@charset "UTF-8";
/* =========================================================================
   /mdb/add + /mdb/edit/{id} — martyr-edit / suggest form
   Extracted 2026-05-12 from rebuilt/css/style-black.css (which had inherited
   these rules from an earlier inline-<style> extraction on 2026-05-11).
   Loaded conditionally from rebuilt/pages/mdb.php so site-wide pages don't
   ship the ~170-line form palette they never use.

   Selectors used exclusively by mdb.php (martyr edit/add) and tag-input.js
   (which renders `.ti-*` chips on the admin-only "Special classification"
   field).
   ========================================================================= */

.mdb-wrap {
    --mdb-accent:        #1d4c6b;
    --mdb-accent-dark:   #03151e;
    --mdb-accent-light:  #e8f4fd;
    --mdb-accent-border: #b8d9f0;
    --mdb-danger:        #c0392b;
    --mdb-danger-bg:     #fff8f8;
    --mdb-admin-accent:  #b7860b;
    --mdb-admin-border:  #e6d18a;
    --mdb-admin-bg:      #fffdf3;
    --mdb-text-muted:    #888;
    --mdb-text-label:    #555;
    --mdb-border:        #ccc;
    --mdb-divider:       #f0f0f0;
    --mdb-input-bg:      #fafafa;

    max-width: 800px;
    margin: 40px auto;
    background: #fff;
    border-radius: 12px;
    padding: clamp(22px, 4vw, 44px) clamp(20px, 4vw, 48px);
    box-shadow: 0 4px 20px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    font-size: 14px;
}
.mdb-inner { margin: 20px; }
.mdb-wrap[dir="ltr"] .mdb-id-note { text-align: left; }
.mdb-wrap[dir="ltr"] .mdb-badge { margin-left: 6px; margin-right: 0; }
.mdb-wrap[dir="ltr"] .mdb-required { margin-right: 0; margin-left: 2px; }
.mdb-back { font-size:.85em; color: var(--mdb-accent); cursor:pointer; text-decoration:underline; margin-bottom:14px; display:inline-block; }
.mdb-title { font-size:1.4em; font-weight:bold; margin-bottom:6px; color: var(--mdb-accent); }
.mdb-subtitle { font-size:.9em; color:#666; margin-bottom:24px; padding-bottom:14px; border-bottom:1px solid #eee; }
.mdb-badge {
    display:inline-block; font-size:.75em; padding:2px 10px;
    border-radius:20px; margin-right:6px; vertical-align:middle;
}
.mdb-badge-admin { background: var(--mdb-accent); color:#fff; }
.mdb-section { margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid var(--mdb-divider); }
.mdb-section:last-of-type { border-bottom: 0; padding-bottom: 8px; }
.mdb-section-title { font-size:.78em; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; }
.mdb-row { display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.mdb-field { display:flex; flex-direction:column; flex:1 1 180px; min-width:0; }
.mdb-field.full { flex:1 1 100%; }
.mdb-field.w2 { flex:2 1 240px; }
.mdb-label { font-size:.82em; color: var(--mdb-text-label); margin-bottom:4px; font-weight:600; }
.mdb-input, .mdb-select, .mdb-textarea {
    padding:9px 11px; border:1px solid var(--mdb-border); border-radius:6px;
    font-size:.93em; font-family:inherit; background: var(--mdb-input-bg);
    width:100%; box-sizing:border-box;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.mdb-input:focus, .mdb-select:focus, .mdb-textarea:focus {
    outline: 0;
    border-color: var(--mdb-accent);
    box-shadow: 0 0 0 3px rgba(29,76,107,.12);
    background: #fff;
}
.mdb-textarea { resize:vertical; min-height:90px; }

/* Styled file input (browsers won't restyle the native button, but the
   surrounding box can read like the rest of the form). */
#mPhoto {
    display: block;
    width: 100%;
    padding: 9px 11px;
    background: var(--mdb-input-bg);
    border: 1px dashed var(--mdb-border);
    border-radius: 6px;
    font: inherit;
    color: var(--mdb-text-label);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
#mPhoto:hover { border-color: var(--mdb-accent); background: #fff; }
#mPhoto:focus { outline: 0; border-color: var(--mdb-accent); box-shadow: 0 0 0 3px rgba(29,76,107,.12); }

.mdb-photo-preview { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.mdb-photo-preview img {
    width:96px; height:96px; object-fit:cover;
    border-radius:8px; border:1px solid #ddd;
}
.mdb-photo-preview img.is-clickable {
    cursor: pointer;
    transition: transform .15s ease, border-color .15s;
}
.mdb-photo-preview img.is-clickable:hover {
    transform: scale(1.03);
    border-color: var(--mdb-accent);
}
.mdb-photo-hint { font-size:.82em; color: var(--mdb-text-muted); line-height: 1.5; }

.mdb-actions { margin-top:18px; display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.mdb-btn {
    background: var(--mdb-accent); color:#fff; border:none; border-radius:6px;
    padding:11px 32px; font-size:1em; font-weight:bold; cursor:pointer;
    transition: background .18s, transform .12s, box-shadow .18s;
    text-decoration: none; display: inline-block; line-height: 1.2;
}
.mdb-btn:hover { background: var(--mdb-accent-dark); color:#fff; text-decoration:none; box-shadow: 0 4px 14px rgba(29,76,107,.22); }
.mdb-btn:active { transform: translateY(1px); }
.mdb-btn-cancel { background: #8a8a8a; }
.mdb-btn-cancel:hover { background: #5a5a5a; box-shadow: none; }
.mdb-btn:disabled { opacity: .6; cursor: not-allowed; }

.mdb-note {
    font-size:.82em; color: var(--mdb-text-muted);
    margin-top:18px; padding-top:12px; border-top:1px solid #eee;
}
.mdb-admin-section {
    border:1px solid var(--mdb-admin-border);
    border-radius:8px;
    padding:16px 18px;
    margin-bottom:14px;
    background: var(--mdb-admin-bg);
}
.mdb-admin-section .mdb-section-title { color: var(--mdb-admin-accent); }
.mdb-required { color: var(--mdb-danger); margin-right:2px; }
.mdb-input.error, .mdb-select.error { border-color: var(--mdb-danger); background: var(--mdb-danger-bg); }
.mdb-legend { font-size:.78em; color:#999; margin-bottom:18px; }
.mdb-id-note {
    font-size:.82em; color: var(--mdb-accent); background: var(--mdb-accent-light);
    border:1px solid var(--mdb-accent-border);
    border-radius:6px; padding:10px 13px; margin-top:8px; line-height:1.6;
}

/* Tag-input chips — rendered by rebuilt/js/tag-input.js on the admin-only
   "Special classification" field. `.ti-active` is toggled in JS. */
.ti-root { position:relative; }
.ti-shell {
    display:flex; flex-wrap:wrap; align-items:center; gap:5px;
    min-height:38px; padding:4px 8px;
    border:1px solid var(--mdb-border); border-radius:6px; background: var(--mdb-input-bg);
    cursor:text; transition: border-color .14s, box-shadow .14s;
}
.ti-shell:focus-within { border-color: var(--mdb-accent); box-shadow:0 0 0 3px rgba(29,76,107,.12); }
.ti-chips { display:contents; }
.ti-chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 4px 3px 10px; border-radius:999px;
    background: var(--mdb-accent); color:#fff; font-size:13px; line-height:1;
}
.ti-chip-text { padding:2px 0; }
.ti-chip-x {
    width:18px; height:18px; padding:0; border:0; border-radius:50%;
    background:rgba(255,255,255,.2); color:#fff; font-size:14px; line-height:1;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
.ti-chip-x:hover { background:rgba(255,255,255,.4); }
.ti-input {
    flex:1 1 80px; min-width:80px; border:0; outline:0; background:transparent;
    font:inherit; padding:4px 0;
}
.ti-suggest {
    position:absolute; inset-inline-start:0; inset-inline-end:0;
    top:calc(100% + 2px); z-index:30; margin:0; padding:4px 0;
    list-style:none; background:#fff; border:1px solid var(--mdb-border); border-radius:6px;
    box-shadow:0 4px 14px rgba(0,0,0,.08); max-height:220px; overflow-y:auto;
}
.ti-suggest li { padding:6px 12px; cursor:pointer; font-size:13px; }
.ti-suggest li:hover, .ti-suggest li.ti-active { background: var(--mdb-accent-light); color: var(--mdb-accent); }

@media (max-width: 600px) {
    .mdb-wrap {
        margin: 0 auto;
        border-radius: 0;
        box-shadow: none;
    }
    .mdb-title { font-size: 1.2em; }
    .mdb-row { gap: 10px; margin-bottom: 10px; }
    .mdb-section { margin-bottom: 18px; padding-bottom: 16px; }
    .mdb-photo-preview img { width: 78px; height: 78px; }
    .mdb-actions { flex-direction: column; align-items: stretch; }
    .mdb-actions .mdb-btn { width: 100%; padding: 12px 16px; text-align: center; }
}