/* ============================================================
   suspects.app  —  hybrid case-file aesthetic
   Typewriter/serif headlines, manila-tab accents,
   clean grid for the body. Red only for alerts.
   ============================================================ */

:root {
    --paper:        #f4eee0;     /* manila */
    --paper-edge:   #d8cfb6;
    --paper-deep:   #cbbf9f;
    --card:         #fffaf0;     /* raised panel / card surface */
    --field:        #fbf5e6;     /* form inputs */
    --photo:        #2a2420;     /* photo / thumb placeholder block */
    --photo-ink:    #f4eee0;     /* text on photo block */
    --ink:          #161210;
    --ink-soft:     #4b3f33;
    --ink-mute:     #8a7c66;
    --rule:         rgba(20,16,12,.18);
    --redact:       #0f0c0a;
    --alert:        #b21010;
    --alert-deep:   #6e0707;
    --stamp:        #b21010;
    --tab:          #d8b057;     /* manila tab */
    --tab-deep:     #a87f24;
    --ok:           #2e7a3f;
    --shadow:       0 4px 12px rgba(0,0,0,.18);
    --serif:        'IBM Plex Serif', Georgia, serif;
    --mono:         'JetBrains Mono', ui-monospace, Menlo, monospace;
    --type:         'Special Elite', 'Courier New', monospace;
}

/* ============================================================
   THEMES — remap the palette tokens above per data-theme.
   The manila/paper :root above is the default "Case File" theme
   (selected = no attribute). Picker lives in the footer
   (page_foot() in lib/layout.php). Fonts and base geometry are
   shared; only colors change.
   ============================================================ */

/* THEME: MIDNIGHT ORANGE — black, ember accent */
[data-theme="midnight"] {
    --paper:        #0a0a0a;
    --paper-edge:   #141416;
    --paper-deep:   #1c1c1e;
    --card:         #16161a;
    --field:        #0f0f12;
    --photo:        #050506;
    --photo-ink:    #e8e8e8;
    --ink:          #e8e8e8;
    --ink-soft:     #b0b0b0;
    --ink-mute:     #7a7a7a;
    --rule:         rgba(255,255,255,.14);
    --redact:       #000000;
    --alert:        #F16324;
    --alert-deep:   #d9521a;
    --stamp:        #F16324;
    --tab:          #F16324;
    --tab-deep:     #d9521a;
    --ok:           #4ade80;
    --shadow:       0 4px 14px rgba(0,0,0,.55);
}

/* THEME: NEWSPRINT — bright paper, tabloid red */
[data-theme="newsprint"] {
    --paper:        #f4f1ea;
    --paper-edge:   #e6e1d6;
    --paper-deep:   #d9d3c2;
    --card:         #fffdf7;
    --field:        #faf6ec;
    --photo:        #2a2622;
    --photo-ink:    #f4f1ea;
    --ink:          #1a1a1a;
    --ink-soft:     #4a4a4a;
    --ink-mute:     #7a7a7a;
    --rule:         rgba(20,16,12,.2);
    --redact:       #1a1a1a;
    --alert:        #b8001f;
    --alert-deep:   #8e0017;
    --stamp:        #b8001f;
    --tab:          #1a1a1a;
    --tab-deep:     #000000;
    --ok:           #2e7a3f;
    --shadow:       0 4px 12px rgba(0,0,0,.14);
}

/* THEME: POLICE BLOTTER — deep navy, brass gold */
[data-theme="blotter"] {
    --paper:        #0d1b2a;
    --paper-edge:   #152538;
    --paper-deep:   #1c3047;
    --card:         #16293d;
    --field:        #102132;
    --photo:        #06121f;
    --photo-ink:    #e8e6e1;
    --ink:          #e8e6e1;
    --ink-soft:     #aab6c4;
    --ink-mute:     #6e7d8d;
    --rule:         rgba(255,255,255,.1);
    --redact:       #06101a;
    --alert:        #d4a017;
    --alert-deep:   #b5870e;
    --stamp:        #d4a017;
    --tab:          #d4a017;
    --tab-deep:     #b5870e;
    --ok:           #4ade80;
    --shadow:       0 4px 14px rgba(0,0,0,.5);
}

/* THEME: TRUE CRIME NOIR — jet black, crimson */
[data-theme="noir"] {
    --paper:        #08080a;
    --paper-edge:   #121215;
    --paper-deep:   #1a1a1f;
    --card:         #131318;
    --field:        #0d0d11;
    --photo:        #050507;
    --photo-ink:    #ebe8e0;
    --ink:          #ebe8e0;
    --ink-soft:     #a8a8a8;
    --ink-mute:     #6a6a6a;
    --rule:         rgba(255,255,255,.08);
    --redact:       #000000;
    --alert:        #dc143c;
    --alert-deep:   #b30f30;
    --stamp:        #dc143c;
    --tab:          #dc143c;
    --tab-deep:     #b30f30;
    --ok:           #4ade80;
    --shadow:       0 4px 16px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 14.5px;
    line-height: 1.55;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
}

/* subtle paper grain */
.grain {
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 9000;
    opacity: .15;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(20,16,12,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--alert); color: var(--alert); }

/* ----- masthead ----- */
.masthead {
    border-bottom: 2px solid var(--ink);
    background:
        linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(20,16,12,.05) 100%),
        var(--paper);
    padding: 14px 22px 0;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 4px 0 var(--paper-deep), 0 6px 14px rgba(0,0,0,.06);
}
.masthead-inner {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 18px; max-width: 1100px; margin: 0 auto;
}
.brand {
    text-decoration: none;
    font-family: var(--type);
    font-size: 30px;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--ink);
}
.brand-mark {
    background: var(--ink); color: var(--paper);
    padding: 2px 6px;
    margin-right: 2px;
}
.brand-dot { color: var(--alert); }
.brand-tag {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .25em;
    color: var(--ink-mute);
    text-transform: uppercase;
}
.topnav {
    max-width: 1100px;
    margin: 8px auto 0;
    display: flex; flex-wrap: wrap; gap: 14px;
    align-items: center;
    border-top: 1px dashed var(--rule);
    padding: 8px 0;
    font-family: var(--mono);
    font-size: 13px;
}
.topnav a { text-decoration: none; padding: 4px 8px; border: 1px solid transparent; }
.topnav a:hover { border-color: var(--ink); }
.topnav a.cta {
    background: var(--ink); color: var(--paper);
    border-color: var(--ink);
    letter-spacing: .12em;
}
.topnav a.cta:hover { background: var(--alert); border-color: var(--alert); color: var(--paper); }
.topnav .who { margin-left: auto; color: var(--ink-mute); font-size: 12px; letter-spacing: .1em; }

/* ----- flashes ----- */
.flash {
    max-width: 1100px;
    margin: 12px auto 0;
    padding: 10px 14px;
    border-left: 4px solid var(--ink);
    background: var(--card);
    font-family: var(--mono); font-size: 13px;
}
.flash-ok  { border-left-color: var(--ok); }
.flash-err { border-left-color: var(--alert); background: var(--card); }

/* ----- layout shells ----- */
.wrap { max-width: 1100px; margin: 22px auto 60px; padding: 0 22px; }
.col-2 { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 28px; }
@media (max-width: 880px) { .col-2 { grid-template-columns: 1fr; } }

h1.page-title, h2.page-title {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: .005em;
    margin: 0 0 6px;
}
.page-sub {
    font-family: var(--mono);
    font-size: 12px; letter-spacing: .18em;
    color: var(--ink-mute);
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* ----- card / case file ----- */
.case {
    position: relative;
    background: var(--card);
    border: 1px solid var(--paper-edge);
    border-left: 4px solid var(--ink);
    box-shadow: var(--shadow);
    padding: 16px 18px 14px;
    margin: 0 0 20px;
}
.case::before {
    /* manila tab */
    content: "";
    position: absolute;
    top: -10px; left: 22px;
    width: 96px; height: 14px;
    background: var(--tab);
    border: 1px solid var(--tab-deep);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    box-shadow: 1px 0 0 rgba(0,0,0,.05);
}
.case-head {
    display: flex; gap: 12px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.case-thumb {
    flex: 0 0 110px;
    width: 110px; height: 80px;
    background: var(--photo);
    border: 1px solid var(--paper-deep);
    object-fit: cover;
    display: block;
}
.case-thumb-fallback {
    display: flex; align-items: center; justify-content: center;
    color: var(--photo-ink);
    font-family: var(--type);
    font-size: 24px;
    letter-spacing: .15em;
}
.case-meta { flex: 1 1 auto; min-width: 0; }
.case-title {
    font-family: var(--serif); font-weight: 700;
    font-size: 19px; line-height: 1.25;
    margin: 2px 0 4px;
    word-break: break-word;
}
.case-title a { text-decoration: none; }
.case-bar {
    font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em;
    color: var(--ink-mute);
    text-transform: uppercase;
    display: flex; gap: 10px; flex-wrap: wrap;
    align-items: center;
}
.case-bar .pill {
    background: var(--paper-deep);
    color: var(--ink);
    padding: 2px 7px;
    border: 1px solid var(--paper-edge);
    letter-spacing: .14em;
}
.case-bar .pill.media { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.case-bar .loc a { color: var(--ink); }
.case-body {
    font-size: 14px;
    margin: 6px 0 8px;
    color: var(--ink-soft);
}
.case-foot {
    display: flex; gap: 14px; align-items: center;
    font-family: var(--mono); font-size: 12px;
    color: var(--ink-mute);
    border-top: 1px dashed var(--rule);
    padding-top: 8px;
}
.case-foot .vote {
    display: inline-flex; gap: 4px; align-items: center;
}
.vote button {
    background: transparent; border: 1px solid var(--paper-deep);
    padding: 2px 8px;
    cursor: pointer;
    font-family: var(--mono); font-size: 12px;
    color: var(--ink);
}
.vote button.is-on.up   { background: var(--ok);    color: #fff; border-color: var(--ok); }
.vote button.is-on.down { background: var(--alert); color: #fff; border-color: var(--alert); }
.vote .score { min-width: 22px; text-align: center; font-weight: 600; color: var(--ink); }

.stamp {
    position: absolute;
    top: 10px; right: 14px;
    transform: rotate(6deg);
    border: 2px solid var(--stamp);
    color: var(--stamp);
    font-family: var(--type);
    padding: 2px 8px;
    font-size: 11px;
    letter-spacing: .2em;
    opacity: .9;
    text-transform: uppercase;
    pointer-events: none;
}
.stamp.verified { color: var(--ok); border-color: var(--ok); }
.stamp.disputed { color: var(--alert); border-color: var(--alert); }

/* redaction bar (used very sparingly — e.g. masking unverified names in details) */
.redact {
    background: var(--redact);
    color: var(--redact);
    padding: 0 4px;
    user-select: none;
    border-radius: 1px;
}

/* ----- forms ----- */
.form {
    background: var(--card);
    border: 1px solid var(--paper-edge);
    border-top: 4px solid var(--ink);
    padding: 22px;
    box-shadow: var(--shadow);
    max-width: 640px;
}
.form h1 { font-family: var(--serif); margin-top: 0; }
.form .row { margin-bottom: 14px; }
.form label {
    display: block;
    font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 4px;
}
.form input[type=text],
.form input[type=password],
.form input[type=url],
.form select,
.form textarea {
    width: 100%;
    background: var(--field);
    border: 1px solid var(--paper-deep);
    border-bottom: 2px solid var(--ink);
    padding: 10px 12px;
    font-family: var(--mono); font-size: 14px;
    color: var(--ink);
    outline: none;
}
.form input:focus, .form select:focus, .form textarea:focus {
    border-color: var(--alert);
    background: var(--card);
}
.form textarea { min-height: 110px; resize: vertical; }
.form .help {
    font-family: var(--mono); font-size: 11px;
    color: var(--ink-mute); margin-top: 4px; letter-spacing: .04em;
}
.btn {
    background: var(--ink); color: var(--paper);
    border: 0; padding: 12px 20px;
    font-family: var(--mono); font-size: 13px;
    letter-spacing: .2em; text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 3px 0 #000;
}
.btn:hover { background: var(--alert); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.btn.alt { background: var(--paper-deep); color: var(--ink); box-shadow: 0 3px 0 var(--paper-edge); }
.btn.alt:hover { background: var(--tab); }

/* recovery key download box */
.recovery-box {
    border: 2px dashed var(--alert);
    background: var(--card);
    padding: 18px;
    font-family: var(--mono);
    margin: 18px 0;
}
.recovery-box .key {
    display: block;
    font-family: var(--type);
    font-size: 22px;
    letter-spacing: .12em;
    word-break: break-all;
    color: var(--alert-deep);
    padding: 10px 12px;
    background: var(--field);
    border: 1px dashed var(--alert);
    margin: 10px 0;
}
.recovery-box .download {
    display: inline-block;
    margin-top: 10px;
    background: var(--alert);
    color: #fff;
    padding: 10px 16px;
    text-decoration: none;
    font-family: var(--mono); font-size: 12px;
    letter-spacing: .2em; text-transform: uppercase;
}
.recovery-box .warn {
    font-size: 12px; color: var(--alert-deep); margin-top: 8px;
}

/* sidebar */
.side { font-family: var(--mono); }
.side .panel {
    background: var(--card);
    border: 1px solid var(--paper-edge);
    border-left: 4px solid var(--tab-deep);
    padding: 14px;
    margin-bottom: 16px;
}
.side h3 {
    font-family: var(--serif); font-size: 16px;
    margin: 0 0 8px;
}
.side ul { list-style: none; padding: 0; margin: 0; }
.side li { padding: 4px 0; border-bottom: 1px dashed var(--rule); font-size: 13px; }
.side li:last-child { border-bottom: 0; }
.side .count { color: var(--ink-mute); float: right; font-size: 12px; }

/* comments */
.comments { margin-top: 22px; }
.comment {
    border-left: 3px solid var(--paper-deep);
    padding: 8px 12px;
    margin-bottom: 10px;
    background: var(--card);
}
.comment .meta {
    font-family: var(--mono); font-size: 11px;
    color: var(--ink-mute); letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.comment .body { font-family: var(--serif); font-size: 14.5px; }

/* footer */
.foot {
    border-top: 2px solid var(--ink);
    background: var(--paper);
    margin-top: 60px;
    padding: 18px 22px 26px;
    font-family: var(--mono); font-size: 12px;
}
.foot-row {
    max-width: 1100px; margin: 0 auto;
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.foot-row a { color: var(--ink); }
.foot-stamp {
    border: 1px solid var(--alert); color: var(--alert);
    padding: 2px 8px;
    font-family: var(--type); letter-spacing: .2em;
    transform: rotate(-1deg); display: inline-block;
}
.foot-sep { color: var(--ink-mute); }
.foot-disclaimer {
    max-width: 1100px; margin: 12px auto 0;
    font-size: 12px; color: var(--ink-soft); line-height: 1.55;
    border-top: 1px dashed var(--rule);
    padding-top: 10px;
}

/* mod inline toolbar — only rendered for mod/admin viewers */
.mod-bar {
    margin-top: 10px;
    padding: 8px 10px;
    background: repeating-linear-gradient(
        45deg,
        rgba(178,16,16,.06) 0 8px,
        transparent 8px 16px),
        var(--card);
    border: 1px dashed var(--alert);
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-family: var(--mono); font-size: 11.5px;
}
.mod-bar .mod-tag {
    font-family: var(--type);
    color: var(--alert);
    border: 1px solid var(--alert);
    padding: 1px 6px;
    letter-spacing: .2em;
    margin-right: 4px;
}
.mod-bar .mod-sep {
    width: 1px; height: 18px;
    background: rgba(0,0,0,.15);
    margin: 0 4px;
}
.mod-bar .mb {
    background: var(--card);
    border: 1px solid var(--paper-deep);
    padding: 4px 9px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .08em;
    color: var(--ink);
}
.mod-bar .mb:hover    { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mod-bar .mb.on       { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mod-bar .mb.on.ok    { background: var(--ok);  border-color: var(--ok); }
.mod-bar .mb.on.bad   { background: var(--alert); border-color: var(--alert); }
.mod-bar .mb.danger:hover { background: var(--alert); border-color: var(--alert); }
.mod-bar .mb.dim      {
    background: var(--paper-deep);
    color: var(--ink-mute);
    border-color: var(--paper-edge);
    cursor: not-allowed;
    opacity: .7;
}
.mod-bar .mb.dim:hover { background: var(--paper-deep); color: var(--ink-mute); border-color: var(--paper-edge); }

/* tables (admin) */
.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.tbl th, .tbl td { padding: 8px 10px; border-bottom: 1px solid var(--paper-edge); text-align: left; vertical-align: top; }
.tbl th { background: var(--paper-deep); letter-spacing: .15em; text-transform: uppercase; font-size: 11.5px; }

/* mobile */
@media (max-width: 600px) {
    .case-thumb { display: none; }
    .brand { font-size: 24px; }
    .topnav { gap: 8px; }
}