/* reports.css — A report as it is drawn: its answers, the board's bar, the
 * card itself, the modals over it, attachments, and prose.
 *
 * One contiguous slice of the <style> block public/index.html used to
 * carry, in the order it was in, so the cascade is unchanged. It decides
 * no colour and no shape of its own: those are the look’s, in
 * public/tokens.css. See docs/frontend-files.md.
 */
/* What a logbook asked, under the narrative on a card. Reads as a list of
   small facts rather than as a second paragraph, because that is what it
   is — and because the number of them is the operator's choice, not ours. */
.answers{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.answers .ans{font-size:13px;line-height:1.35;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:var(--radius-sm);padding:3px 8px}
.answers .ans b{color:var(--ink);font-weight:600}
/* An element with `hidden` is hidden, whatever else says otherwise.
   Without this any rule setting display on a class — .btn2 among them —
   silently wins the tie, and an element the code believes it has hidden
   stays on screen. That is how the changelog tab, gated to testers, was
   visible to everybody. */
[hidden]{display:none!important}

/* A row of views on one page, not a row of links to other pages. */


.rcard{background:var(--card);border:2px solid var(--rule);
  border-left:9px solid var(--rule);           /* status stripe */
  border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 16px;margin:0 0 12px}
/* The stripe repeats the tag's colour so state is readable while
   scanning — but it never carries the meaning alone; the tag says it in
   words as well. A report nobody has assessed keeps the plain edge. */
.rcard.is-serious{border-left-color:var(--seal)}
.rcard.is-confirmed{border-left-color:var(--verify)}
.rcard.is-review{border-left-color:var(--ink)}
.rcard .top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin:0 0 7px}
.rcard .cat{font-family:var(--cond);font-weight:600;font-size:14.5px}
/* The separator trails the chip before it rather than leading the one
   after, so a list that wraps never starts a line with a lone dot. */
.rcard .cat:has(+ .cat)::after{content:' ·';margin-right:4px;color:var(--muted);font-weight:400}
.rcard .catmore{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:6px}
.rcard .st{font-family:var(--mono);font-size:11px;background:var(--solid);color:var(--on-solid);
  padding:2px 8px;border:2px solid var(--ink);border-radius:var(--radius-sm)}
.rcard .sev{font-family:var(--mono);font-size:11px;padding:2px 8px;
  border:2px solid currentColor;border-radius:var(--radius-sm)}
.rcard .when{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-left:auto}
.rcard .txt{font-size:14.5px;line-height:1.48;color:var(--ink-2)}
.rcard .meta{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:8px}

details.about{border:1px solid var(--rule);background:var(--card);margin:0 0 12px}
details.about summary{padding:14px 16px;cursor:pointer;font-family:var(--cond);font-weight:600;font-size:14.5px}
details.about .inner{padding:0 16px 16px;font-size:14px;line-height:1.55;color:var(--ink-2)}
details.about .inner p{margin:0 0 10px}
details.about .inner p:last-child{margin-bottom:0}


.rcard .actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.rcard .actions button{font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;background:none;border:1px solid var(--rule);color:var(--ink);padding:6px 10px;cursor:pointer}
.rcard .actions button:hover{background:var(--paper)}
.rcard .restricted{background:var(--paper);border:1px dashed var(--rule);padding:10px;margin-top:10px;font-size:13px;font-family:var(--mono);display:none;line-height:1.5}
.rcard .restricted.on{display:block}
/* attachments */
.attach{border:1px dashed var(--rule);background:var(--card);padding:12px;margin-top:4px}
.attach .drop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.attach input[type=file]{font-size:13px;font-family:var(--sans);max-width:100%}
.attach .cap{font-family:var(--mono);font-size:11px;color:var(--muted)}
.attlist{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.attlist li{display:flex;align-items:center;gap:10px;border:1px solid var(--rule-soft,#DCE3E7);padding:8px 10px;font-size:13px;background:var(--paper)}
.attlist .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attlist .sz{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.attlist .stt{font-family:var(--mono);font-size:11px;white-space:nowrap}
.attlist .stt small{display:block;font-size:10px;opacity:.8;white-space:normal;max-width:22ch}
.attlist .stt.ok{color:var(--verify)}
.attlist .stt.bad{color:var(--seal)}
.attlist .rm{border:1px solid var(--rule);background:var(--color--surface);cursor:pointer;font-size:12px;padding:2px 8px;font-family:var(--cond)}
.attbar{height:3px;background:var(--rule-soft,#DCE3E7);width:64px;position:relative;overflow:hidden}
.attbar i{position:absolute;inset:0 auto 0 0;background:var(--verify);width:0}
.attgal{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.attgal figure{margin:0;max-width:220px}
.attgal img,.attgal video{display:block;max-width:100%;height:auto;border:1px solid var(--rule);background:#000}
.attgal figcaption{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35}
.attmod{background:var(--paper);border:1px dashed var(--rule);padding:10px;margin-top:10px;display:none}
.attmod.on{display:block}
.attmod .row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--rule-soft,#DCE3E7)}
.attmod .row:last-child{border-bottom:none}
.attmod .who{font-family:var(--mono);font-size:11px;color:var(--muted);flex:1;min-width:180px;line-height:1.5;word-break:break-all}
.attmod .pill{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--rule);padding:1px 6px}
.attmod .pill.pub{color:var(--verify);border-color:var(--verify)}
.attmod .pill.ref{color:var(--seal);border-color:var(--seal)}
.attmod button{font-family:var(--cond);font-weight:600;font-size:12px;border:1px solid var(--rule);background:var(--color--surface);padding:4px 9px;cursor:pointer}
.attmod .prev{max-width:280px;height:auto;border:1px solid var(--rule);display:block;margin-top:6px;background:#000}

.rc-card{background:var(--card);border:1px solid var(--rule);padding:13px 15px;margin:0 0 8px;
  display:flex;gap:10px;align-items:center;font-size:14px}
.rc-card .who{flex:1}
.rc-card .who b{font-family:var(--cond)}
.rc-card button{background:none;border:0;color:var(--seal);cursor:pointer;font-size:13px;text-decoration:underline}

.prose h2{font-family:var(--cond);font-weight:700;font-size:18px;margin:22px 0 8px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.prose ul{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px;padding-left:22px}
.prose li{margin:0 0 6px}
.prose code{font-family:var(--mono);font-size:12.5px;background:var(--paper);padding:1px 5px}
.prose h3{font-family:var(--cond);font-weight:700;font-size:15px;margin:20px 0 7px;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.prose ol{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px;padding-left:22px}
.prose ol li{margin:0 0 9px}
.prose .lead{font-size:15.5px;line-height:1.62;color:var(--ink)}
.prose .callout{background:var(--amber-bg);border-left:4px solid var(--amber);
  padding:12px 14px;margin:0 0 14px}
.prose .callout p{margin:0;font-size:14px}
.prose .callout p + p{margin-top:8px}

/* THE ARCHIVE'S OWN STATEMENT about a report.

   VISIBLY NOT PART OF THE ACCOUNT, which is the whole job of this block. The
   reporter said what they saw; this is what the archive established or could
   not. A note that read as another paragraph of the account would be putting
   the archive's words in somebody's mouth — so it gets its own ground, a
   rule above it and a label that says what it is.

   Every colour is a palette token and every shape a theme token, like
   everything else here, so an operator's chosen look reaches it. */
.enote{margin:12px 0 0;padding:11px 12px;border-left:3px solid var(--verify);
  background:var(--verify-bg);border-radius:var(--radius)}
.enote_by{font-weight:650;font-size:.82rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px}
/* "revised" is said in words, never by colour alone: a note on its third
   version is the archive having changed its own published statement, and
   that has to be legible to somebody who cannot see a tint. */
.enote_rev{font-weight:500;text-transform:none;letter-spacing:0;
  color:var(--muted);font-style:italic}
.enote p{margin:0 0 7px}
.enote p:last-child{margin-bottom:0}
.enote_links{margin:8px 0 0;padding:0 0 0 18px;font-size:.9rem}
.enote_links li{margin:0 0 3px}
/* A note that is under review or withdrawn. Marked, not missing: the stripe
   goes muted and the label stays, because a reader has to be able to see
   that something was said and then held. */
.enote.is-held{border-left-color:var(--rule);background:transparent;color:var(--muted)}

/* The two permissions a reporter can take back, on their own report's card.
   Set apart from the card's own actions because they are not actions: they
   are a state the reporter owns, and a row of buttons reads as things that
   happen once. */
.perms{margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--rule-soft)}
.perms .choice_item{margin:0 0 6px}
.perms .choice_item:last-of-type{margin-bottom:0}
.perms > .form_help{margin:0 0 9px}

/* ---- what used to be inline `style` attributes ---------------------------
   Every one of these was a style="" in the markup or in a string a script
   writes. `style-src-attr 'none'` refuses those, so each became a class. They
   sit last on purpose: an inline style beat every rule in every file, and
   these have to as well, including :hover. */


textarea.minh-60{min-height:60px}
textarea.minh-110{min-height:110px}
textarea.minh-130{min-height:130px}
textarea.minh-150{min-height:150px}
textarea.minh-260{min-height:260px}
textarea.mono-13{font-family:var(--mono);font-size:13px}

a.link-muted{color:var(--muted);text-decoration:underline}
.text-color-muted.is-serious{color:var(--seal)}

/* A pill's colour, chosen by the script from a fixed set and carried as a
   class rather than written into a string. The three hex values are the
   severity scale's own and were hex in the script before they were here. */
.pv.tone-muted,.sev.tone-muted,.tag.tone-muted{border-color:var(--muted);color:var(--muted)}
.pv.tone-seal,.sev.tone-seal,.tag.tone-seal{border-color:var(--seal);color:var(--seal)}
.pv.tone-verify,.sev.tone-verify,.tag.tone-verify{border-color:var(--verify);color:var(--verify)}
.pv.tone-amber,.sev.tone-amber,.tag.tone-amber{border-color:var(--amber);color:var(--amber)}
.pv.tone-focus,.sev.tone-focus,.tag.tone-focus{border-color:var(--focus);color:var(--focus)}
.pv.tone-note,.sev.tone-note,.tag.tone-note{border-color:#566470;color:#566470}
.pv.tone-ink,.sev.tone-ink,.tag.tone-ink{border-color:#0E151C;color:#0E151C}
.pv.tone-crimson,.sev.tone-crimson,.tag.tone-crimson{border-color:#A81D33;color:#A81D33}

/* ---- a report asking for a second read -------------------------------
   STAFF ONLY. This never renders on the public board, and the colour says
   so: it borrows the amber already used for "something needs attention"
   rather than the crimson of `is-serious`, because crimson on this card
   would read as a finding about the report — which a flag explicitly is
   not.

   Visually quieter than the editorial note on purpose. The note is the
   archive's published statement; this is a sticky label on a reading list,
   and it goes away when somebody has read it. */
.rflag{margin:12px 0 0;padding:11px 12px;border-left:3px solid var(--amber);
  background:var(--amber-bg);border-radius:var(--radius)}
.rflag_by{font-weight:650;font-size:.82rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px}
.rflag p{margin:0 0 7px;font-size:.9rem}
.rflag p:last-child{margin-bottom:0}
/* The terms reuse the provenance chips, so the words that fired look like
   data rather than like a sentence somebody wrote about the report. */
.rflag .prov{margin-top:7px}