/* App shell from the approved mockups (mockups/shell.css): top bar, rail, hint bar,
   palette. Tier is texture, who authored a value is hue (ink for people, violet for
   agents); the roles below add a quiet hue to tiers, states and entity kinds. Tokens
   follow monitor.css; the layout marks html and body .dark-mode. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  /* optional: preloaded, so it is ready on first paint; never swaps and reflows later */
  font-display: optional;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext: transliterated names (Ḥ, ā, ʿ) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --bg: #ecebe6; --panel: #fbfaf7; --raise: #f5f4f0; --line: #e0dfd9; --line-strong: #c6c5be;
  --ink: #1f2124; --ink-2: #4a4c50; --ink-3: #66696e;
  --wash: rgba(31,33,36,.06); --solid: rgba(31,33,36,.13);
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
:root.dark-mode, body.dark-mode {
  --bg: #151619; --panel: #1c1d21; --raise: #222428; --line: #2c2e33; --line-strong: #3e4148;
  --ink: #d9dad6; --ink-2: #aeb1b5; --ink-3: #8d9197;
  --wash: rgba(217,218,214,.06); --solid: rgba(217,218,214,.16);
  color-scheme: dark;
}
/* Colour roles (docs/design.md, Colour roles). Picked in OKLCH, stored as sRGB hex so
   MapLibre and canvas read them. Each role has an ink for text and glyphs (AA on panel,
   bg and its own wash), a -wash for chip and tile grounds and a -line for edges, marks
   and link underlines (3:1 on panel). Colour never carries meaning alone: it rides on
   a texture, icon or word. config.js mirrors the inks for Vuetify colour props; change
   both together. Maps and timelines read these tokens at runtime. Kinds (person, place, source, incident, story) have hues
   again; light inks sit at different lightness so they stay apart under deutan and
   protan simulation (acceptance/check_palette.py). */
:root {
  --agent: #6f5bb0; --agent-wash: #f0eeff; --agent-solid: rgba(111,91,176,.2); --agent-line: #8c7ad2;
  --accepted: #00775c; --accepted-wash: #daf8ec; --accepted-line: #28997a;
  --conflict: #724800; --conflict-wash: #ffedd8; --conflict-line: #a06800;
  --negative: #ac4a41; --negative-wash: #ffebe8; --negative-line: #ce695e;
  --sensitive: #9c5076; --sensitive-wash: #ffe9f3; --sensitive-line: #bd6e95;
  --new: #006cac; --new-wash: #e4f2ff; --new-line: #178dda;
  --person: #007289; --person-wash: #d9f6ff; --person-line: #0695b1;
  --place: #45751c; --place-wash: #e7f6de; --place-line: #64963f;
  --source: #404e60; --source-wash: #ebf1f8; --source-line: #637285;
  --incident: #b2471c; --incident-wash: #ffebe5; --incident-line: #d5663e;
  /* actor avatars: low chroma, clear of the status hues and of agent violet */
  --av-1: #c0e6eb; --av-1-ink: #024c52; --av-2: #c7e2f6; --av-2-ink: #0d4768;
  --av-3: #ebd6ee; --av-3-ink: #56335b; --av-4: #e7dcd2; --av-4-ink: #513e2f;
  --av-5: #d7dfe8; --av-5-ink: #364452; --av-6: #e2ded0; --av-6-ink: #494229;
  --av-agent: #e6e2f8; --av-agent-ink: #4a37b0; --av-import: #e9e9e6; --av-import-ink: #44464a;
}
:root.dark-mode, body.dark-mode {
  --agent: #b3a1fd; --agent-wash: #2c283e; --agent-solid: rgba(179,161,253,.22); --agent-line: #7768b0;
  --accepted: #6cd5b3; --accepted-wash: #143228; --accepted-line: #389075;
  --conflict: #eaa950; --conflict-wash: #382814; --conflict-line: #a16d20;
  --negative: #f2897c; --negative-wash: #3d2320; --negative-line: #a8554c;
  --sensitive: #e694bb; --sensitive-wash: #3a232e; --sensitive-line: #9e5d7d;
  --new: #3ba6f5; --new-wash: #1a2d3e; --new-line: #0e70ae;
  --person: #50c2df; --person-wash: #103039; --person-line: #1d829a;
  --place: #d3ef8b; --place-wash: #282f17; --place-line: #8ba150;
  --source: #ccd5e2; --source-wash: #262c33; --source-line: #878e98;
  --incident: #f0834e; --incident-wash: #3c251a; --incident-line: #a85125;
  --av-1: #133f44; --av-1-ink: #bae8ed; --av-2: #1f3b4e; --av-2-ink: #c2e3fb;
  --av-3: #442f47; --av-3-ink: #eed4f1; --av-4: #41352d; --av-4-ink: #e9dbd0;
  --av-5: #313941; --av-5-ink: #d5dfea; --av-6: #3c382a; --av-6-ink: #e3decd;
  --av-agent: #2d2850; --av-agent-ink: #c9c0fb; --av-import: #2a2c31; --av-import-ink: #c8cace;
}
/* Story shares incident's hue: a story is told through its incidents, and an eleventh
   hue has no room left that stays apart under colour-blind simulation. Its icon
   (timeline) tells the two apart. */
:root, body {
  --due: var(--conflict); --due-wash: var(--conflict-wash); --due-line: var(--conflict-line);
  --overdue: var(--negative); --overdue-wash: var(--negative-wash); --overdue-line: var(--negative-line);
  --corroborated: var(--accepted); --corroborated-wash: transparent; --corroborated-line: var(--accepted-line);
  --story: var(--incident); --story-wash: var(--incident-wash); --story-line: var(--incident-line);
}

/* Role carriers: a role class names the meaning, r-ink, r-chip and r-dot draw it. No
   role edge on rows: the inset left edge already marks the selected row everywhere. */
.is-person { --r: var(--person); --r-wash: var(--person-wash); --r-line: var(--person-line); }
.is-place { --r: var(--place); --r-wash: var(--place-wash); --r-line: var(--place-line); }
.is-source { --r: var(--source); --r-wash: var(--source-wash); --r-line: var(--source-line); }
.is-incident { --r: var(--incident); --r-wash: var(--incident-wash); --r-line: var(--incident-line); }
.is-story { --r: var(--story); --r-wash: var(--story-wash); --r-line: var(--story-line); }
.is-agent, .is-finding { --r: var(--agent); --r-wash: var(--agent-wash); --r-line: var(--agent-line); }
.tier-accepted { --r: var(--accepted); --r-wash: var(--accepted-wash); --r-line: var(--accepted-line); }
.tier-corroborated { --r: var(--corroborated); --r-wash: var(--corroborated-wash); --r-line: var(--corroborated-line); }
.tier-unconfirmed { --r: var(--ink-2); --r-wash: var(--wash); --r-line: var(--line-strong); }
.r-neutral { --r: var(--ink-2); --r-wash: var(--wash); --r-line: var(--line-strong); }
.tier-rejected, .state-negative { --r: var(--negative); --r-wash: var(--negative-wash); --r-line: var(--negative-line); }
.state-conflict { --r: var(--conflict); --r-wash: var(--conflict-wash); --r-line: var(--conflict-line); }
.state-sensitive { --r: var(--sensitive); --r-wash: var(--sensitive-wash); --r-line: var(--sensitive-line); }
.state-due { --r: var(--due); --r-wash: var(--due-wash); --r-line: var(--due-line); }
.state-overdue { --r: var(--overdue); --r-wash: var(--overdue-wash); --r-line: var(--overdue-line); }
.state-new { --r: var(--new); --r-wash: var(--new-wash); --r-line: var(--new-line); }
.r-ink, .r-ink .ti { color: var(--r) !important; }
.r-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border: 1px solid var(--r-line); border-radius: 3px; background: var(--r-wash); color: var(--r); font-size: 11.5px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.r-dot::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--r); margin-inline-end: 6px; vertical-align: 1px; }
/* Kind tile: the item's icon on a small square of its kind's wash, set on the icon itself. */
.r-tile { display: inline-grid !important; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--r-wash); color: var(--r) !important; font-size: 13px !important; line-height: 1; flex: none; opacity: 1 !important; }
/* Kind links: a link takes the kind of the page it opens, so a person, place, source or
   incident reads the same on every page. Anchors that wrap a whole row keep their ink. */
a[href^="/people/"] { --r: var(--person); --r-line: var(--person-line); }
a[href^="/places/"] { --r: var(--place); --r-line: var(--place-line); }
a[href^="/evidence/"] { --r: var(--source); --r-line: var(--source-line); }
a[href^="/incidents/"] { --r: var(--incident); --r-line: var(--incident-line); }
a:is([href^="/people/"], [href^="/places/"], [href^="/evidence/"], [href^="/incidents/"]):not(.v-btn, .v-list-item, .v-tab, .v-chip, .en-rel, .sr-hit, .mv-thumb, .ev-thumb, .td-row, .in-row),
.r-link { color: var(--r); text-decoration: underline; text-decoration-color: var(--r-line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Rail: each section's icon takes the hue of what the page is about; labels stay ink. */
.sb-nav-icon .v-icon, .sb-nav-icon.v-icon { color: var(--r) !important; opacity: 1 !important; }
html, body { background: var(--bg); }
body, .v-application { font-size: 13px; font-feature-settings: 'tnum', 'cv11'; }
.v-application { background: var(--bg) !important; color: var(--ink); }
::selection { background: var(--solid); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
/* Controls with their own border show focus on that border; an outline beside it reads as two. */
.v-field input:focus-visible, .v-field textarea:focus-visible { outline: none; }
.v-chip:focus-visible, .gd-chip:focus-visible, .v-btn--variant-outlined:focus-visible, .v-btn--variant-tonal:focus-visible {
  outline: none; border-color: var(--ink) !important; box-shadow: 0 0 0 1px var(--ink);
}
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.mono { font-family: var(--mono) !important; font-size: 12px; }
.text-agent { color: var(--agent) !important; }

/* boot frame: same boxes as the mounted bar, rail, hint bar and bottom bar */
.sb-boot > div { position: fixed; box-sizing: border-box; background: var(--panel); }
.sb-boot-top { top: 0; left: 0; right: 0; height: 49px; border-bottom: 1px solid var(--line); z-index: 1; }
.sb-boot .brand { position: absolute; left: 12px; top: 14px; height: 20px; display: flex; align-items: center; gap: 7px; font: 700 13px/1.5 'Inter', system-ui, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.sb-boot-rail { top: 48px; left: 0; bottom: 0; width: 188px; border-right: 1px solid var(--line); }
.sb-boot-hints { left: 188px; right: 0; bottom: 0; height: 30px; border-top: 1px solid var(--line); }
.sb-boot-bottom { display: none; left: 0; right: 0; bottom: 0; height: 40px; box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15); }

/* top bar */
.sb-top.v-app-bar { border-bottom: 1px solid var(--line) !important; }
.sb-top .v-toolbar__content { gap: 10px; padding: 0 12px; }
.sb-top .brand { display: flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; color: var(--ink); width: 178px; flex: none; }
.sb-top .brand:hover { opacity: 1; }
/* The brand spans the rail, so the switcher starts clear of the rail's edge. */
.case-sw { width: 236px; max-width: 236px; flex: none; }
.case-sw-menu .v-list-item-title { letter-spacing: 0; font-size: 14px; }
.qbox { flex: 1; max-width: 560px; }

/* rail */
.sb-rail.v-navigation-drawer { border-right: 1px solid var(--line) !important; }
.sb-rail .v-list-item--active { font-weight: 600; }
.sb-rail .v-list-item-title { white-space: normal; }
.sb-rail .sb-sub { min-height: 28px; font-size: 11.5px; color: var(--ink-3); }
.sb-rail .sb-foot { border-top: 1px solid var(--line); padding-top: 4px; }
.sb-rail .sb-foot .v-list-item { min-height: 32px; }

/* bell */
.sb-bell .v-list-item.unread .v-list-item-title { font-weight: 650; }
.sb-bell .v-list-item.unread .v-list-item__prepend .v-icon { color: var(--new); opacity: 1; }

/* hint bar */
.sb-hints { display: flex; gap: 16px; font-size: 12px; color: var(--ink-3); border-top: 1px solid var(--line); background: var(--panel) !important; white-space: nowrap; overflow: hidden; padding: 0 14px; }
.sb-hints span, .sb-hints button { display: inline-flex; gap: 5px; align-items: center; }
.sb-hints button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* palette */
.sb-pal .v-list-item.sel { background: var(--wash); box-shadow: inset 2px 0 0 var(--ink); }

@media (max-width: 959px) {
  .sb-boot-rail, .sb-boot-hints, .sb-boot .brand span { display: none; }
  .sb-boot-bottom { display: block; }
  .sb-boot .brand { left: 8px; }
  .sb-top .brand span { display: none; }
  .sb-top .brand { width: auto; }
  /* The case name is the one thing the switcher must show; its chevron is not. */
  .case-sw { width: 128px; max-width: 128px; }
  .case-sw .v-field__prepend-inner, .case-sw .v-field__append-inner { display: none; }
  .case-sw .v-field { font-size: 14px; }
  .qbox { flex: 1 1 auto; min-width: 0; }
  .qbox .v-field__input { padding-inline: 4px; }
  .qbox .v-kbd, .sb-top .sb-pal-btn { display: none; }
  .sb-top .v-toolbar__content { gap: 6px; padding: 0 8px; }
}

/* Case page: the case's header and a tab per case page, above that page. */
.case-head { padding: 16px 24px 0; }
.case-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.case-title h1 { margin: 0; font-weight: 600; }
.case-title p { margin: 2px 0 0; color: var(--ink-2); }
.case-tabs { display: flex; gap: 4px; margin-top: 12px; border-bottom: 1px solid var(--line-strong); overflow-x: auto; }
.case-tabs a { padding: 9px 12px 8px; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.case-tabs a:hover { color: var(--ink); }
.case-tabs a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.case-tabs a:focus-visible { outline: 2px solid var(--agent); outline-offset: -2px; }
.case-tabs .n { margin-inline-start: 5px; color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; }