/* CaseVault — styles: layout, square corners, light and dark. Every colour, the font, the six text
   sizes and the two shadows live in css/theme.css (loaded after this file). Paddings sit on a 4px grid
   (multiples of .25rem; v1.129). The theme follows Windows unless it's set with the sun/moon button
   (js/theme.js puts data-theme="light" or "dark" on <html>). */


:root {
  --radius: 1rem;
  --radius-sm: .5rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 15px/1.5 var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
}
body.gated .topbar, body.gated .layout { visibility: hidden; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: var(--fs-title); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-sub); }
a { color: var(--accent); }
code, .mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.spacer { flex: 1; }
.error-text { color: var(--danger); }
[hidden] { display: none !important; }

/* ---------- controls ---------- */

.btn {
  font: inherit;
  font-size: var(--fs-text);
  padding: .45em .9em;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { font-size: var(--fs-small); padding: .25em .6em; }
.btn.block { width: 100%; }
.btn.active { background: var(--accent-soft); border-color: var(--accent); }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-align: left; word-break: break-all; }
.linkish:hover { color: var(--accent-strong, var(--accent)); }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .45em .6em;
  width: 100%;
  min-width: 0;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, .dropzone:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input[type="checkbox"], input[type="radio"] { width: auto; }
input.narrow { width: 5em; display: inline-block; }
textarea { resize: vertical; }

.field { display: flex; flex-direction: column; gap: .25em; }
.field > span { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }

.pill {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: 600;
  padding: .1em .6em;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.status-open { background: var(--accent-soft); color: var(--accent); }
.status-pending { background: var(--warn-soft); color: var(--warn); }
.status-closed { background: var(--ok-soft); color: var(--ok); }
.status-archived { background: var(--surface-2); color: var(--muted); }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: var(--fs-sub); }
.vault-name { color: var(--muted); font-size: var(--fs-text); }
.save-status { font-size: var(--fs-small); padding: .25em .7em; border-radius: 999px; }
.save-status.saved { color: var(--ok); background: var(--ok-soft); }
.save-status.saving { color: var(--warn); background: var(--warn-soft); }
.save-status.error { color: var(--danger); background: var(--danger-soft); font-weight: 600; }

/* ---------- layout ---------- */

.layout { flex: 1; display: flex; min-height: 0; }
.sidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-head { display: flex; flex-direction: column; align-items: flex-end; padding: .25rem .5rem 0; }
/* v1.34: the hide button sits far left and the padlock far right; locked, the hide buttons and the drag edge are off. */
body:not(.sidebar-collapsed) .sidebar-head { flex-direction: row; justify-content: space-between; align-items: center; gap: .3rem; }
#btn-sidebar-lock[aria-pressed="true"] { color: var(--accent); }
body.sidebar-locked .sidebar-resizer { display: none; }
body.sidebar-locked #btn-sidebar-collapse, body.sidebar-locked #btn-sidebar-expand { opacity: .35; cursor: not-allowed; }
.sidebar-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sidebar-tools { padding: .75rem; padding-top: .25rem; display: grid; gap: .5rem; border-bottom: 1px solid var(--border); }

/* Icon-only buttons (sidebar toggle). The text is kept for screen readers. */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-btn .icon { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rail-only { display: none; }

/* Collapsed: a thin rail with the toggle and "new case". The header's own toggle is only for
 * phone width, where the rail is hidden too (one toggle on screen at a time). */
#btn-sidebar-expand { display: none; }
body.sidebar-collapsed .sidebar { width: 2.9rem; align-items: center; }
body.sidebar-collapsed .sidebar-head { align-items: center; gap: .35rem; padding: .5rem 0; }
body.sidebar-collapsed .sidebar-body { display: none; }
body.sidebar-collapsed .rail-only { display: inline-flex; }
.case-list { list-style: none; margin: 0; padding: .5rem; overflow-y: auto; flex: 1; }
.case-list .empty { padding: 1rem .5rem; font-size: var(--fs-text); }
.case-item {
  display: block;
  padding: .5rem .75rem;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}
.case-item:hover { background: var(--surface-2); }
.case-item.active { background: var(--accent-soft); border-color: var(--accent); }
.case-item-top { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.case-item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-item-meta { font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.due.soon { color: var(--warn); }
.due.overdue { color: var(--danger); font-weight: 600; }

.main { flex: 1; overflow-y: auto; padding: 1.5rem 2rem 3rem; min-width: 0; }
.main:focus { outline: none; }

/* ---------- dashboard ---------- */

.dashboard { max-width: 900px; }
.dashboard h2 { margin-top: 1.8rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .8rem; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1rem; }

.plain-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.plain-list li + li { border-top: 1px solid var(--border); }

/* ---------- case ---------- */

.case { max-width: 1000px; }
.case-head h1 { margin-bottom: .2em; word-break: break-word; }
.case-sub { font-size: var(--fs-text); margin-bottom: 1rem; }
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); margin-bottom: 1.2rem; }
.tab {
  padding: .5rem 1rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 600;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; max-width: 760px; }
.span-2 { grid-column: 1 / -1; }

/* Case actions: archive (or restore) and delete, side by side. */
.case-actions {
  margin-top: 2.5rem;
  max-width: 760px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  background: var(--surface);
}
.case-actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }

@media (max-width: 620px) { .case-actions-grid { grid-template-columns: 1fr; } }
.danger-text { color: var(--danger); }

/* An archived case: read-only, with a way back. */
.archived-banner {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .75rem 1rem;
  border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: var(--radius);
  background: var(--surface-2);
}
.case.archived .tab-panel textarea[readonly], .case.archived .tab-panel input[readonly] { background: var(--surface-2); }

/* Sidebar: the archived cases, folded away under the active list. */

/* notes */
.toolbar { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.segmented { display: inline-flex; gap: .25rem; }
.notes-editor {
  min-height: calc(60vh / var(--z, 1));
  font: 15px/1.2 var(--font);
  padding: 1rem;
}
.notes-preview {
  min-height: calc(60vh / var(--z, 1));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.notes-preview pre { background: var(--surface-2); padding: .75rem; border-radius: 6px; overflow-x: auto; }
.notes-preview blockquote { border-left: 3px solid var(--border); margin: .5em 0; padding-left: 1em; color: var(--muted); }

/* timeline */
.timeline-form {
  display: grid;
  grid-template-columns: 160px 150px 130px 1fr;
  gap: .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1.2rem;
}
.timeline-form .full { grid-column: 1 / -1; }
.form-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); margin-left: .5rem; }
.timeline .empty { padding: .5rem 1rem; }
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 11.5rem 1fr auto;
  gap: 1rem;
  padding: .75rem 0 .75rem 1.25rem;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 1rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}
.tl-item.deadline::before { border-color: var(--warn); border-radius: 2px; transform: rotate(45deg); }
.tl-item.deadline.overdue::before { border-color: var(--danger); background: var(--danger); }
.tl-item.done { opacity: .6; }
.tl-item.done .tl-title strong { text-decoration: line-through; }
.tl-when { font-weight: 600; font-size: var(--fs-text); white-space: nowrap; }
.tl-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tl-note { white-space: pre-wrap; color: var(--muted); font-size: var(--fs-text); margin-top: .2rem; }
.tl-actions { display: flex; gap: .2rem; align-items: flex-start; }
.badge { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1em .5em; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.badge.deadline { background: var(--warn-soft); color: var(--warn); }
.due { font-size: var(--fs-small); }

/* files */
.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  background: var(--surface);
  margin-bottom: .6rem;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .link { color: var(--accent); text-decoration: underline; }
table.files { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.files th, table.files td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.files th { font-size: var(--fs-small); color: var(--muted); background: var(--surface-2); }
table.files .num { text-align: right; white-space: nowrap; }
table.files .actions { text-align: right; white-space: nowrap; }

/* ---------- dialogs ---------- */

.dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.5rem;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  width: min(620px, calc(94vw / var(--z, 1)));
  max-height: calc(92vh / var(--z, 1));
}
.dialog::backdrop { background: rgba(10, 15, 25, .55); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; }
.preview { display: flex; flex-direction: column; height: 100%; gap: .6rem; }
.preview-head { display: flex; align-items: center; gap: .8rem; }
.preview-head h2 { margin: 0; font-size: var(--fs-sub); word-break: break-all; }
.preview-frame { flex: 1; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.preview-img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; display: block; }
.preview-text { flex: 1; overflow: auto; margin: 0; padding: 1rem; background: var(--surface-2); border-radius: 6px; white-space: pre-wrap; font-size: var(--fs-text); }
.preview-none { padding: 1rem; }
.path { display: block; padding: .5rem .75rem; background: var(--surface-2); border-radius: 6px; word-break: break-all; user-select: all; }

.vault-panel h3 { margin-top: 1.4rem; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: .3rem 1rem; margin: 0; }
.kv dt { color: var(--muted); font-size: var(--fs-text); }
.kv dd { margin: 0; word-break: break-all; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.inline { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------- gate ---------- */

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--bg);
}
.gate-card {
  max-width: 520px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem 2.25rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.gate-logo { display: block; margin: 0 auto .6rem; }
#gate-message { font-size: var(--fs-sub); font-weight: 600; }
.gate-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0 .4rem; }
.gate-foot { font-size: var(--fs-small); margin-top: 1.4rem; margin-bottom: 0; }

/* ---------- toasts ---------- */

.toasts { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 100; max-width: min(420px, calc(90vw / var(--z, 1))); }
.toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: .75rem 1rem;
  box-shadow: var(--shadow);
  font-size: var(--fs-text);
}
.toast.error { border-left-color: var(--danger); }
.toast.success { border-left-color: var(--ok); }

/* ---------- narrow windows ---------- */

@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar { width: auto; max-height: calc(40vh / var(--z, 1)); border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar-head { flex-direction: row; justify-content: flex-end; }
  .topbar { flex-wrap: wrap; gap: .4rem .6rem; padding: .5rem .5rem; }
  .topbar .vault-name { display: none; }
  .save-status { white-space: nowrap; }
  /* Phone width: collapsed means hidden; the header button brings it back. */
  body.sidebar-collapsed .sidebar { display: none; }
  body.sidebar-collapsed #btn-sidebar-expand:not([hidden]) { display: inline-flex; }
  .main { padding: 1rem; }
  .form-grid, .timeline-form { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: .3rem; }

  .vault-name { display: none; }
}

/* ---------- consistency checker ---------- */

.block { display: block; }
.warn-text { color: var(--warn); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; display: grid; gap: .7rem; }
.card h2 { margin: 0; }
.section-title { margin-top: 1.5rem; }
.back-link { display: inline-block; margin-bottom: .6rem; }

.ai-banner {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: .5rem 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.check-reports { display: grid; gap: .25rem; max-height: 220px; overflow-y: auto; padding: .5rem .5rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.check-row { display: flex; align-items: flex-start; gap: .5rem; }
.check-row input { margin-top: .3rem; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2); }

.sev-count { display: inline-block; min-width: 1.8em; text-align: center; font-weight: 700; font-size: var(--fs-small); border-radius: 4px; padding: 0 .3em; margin-right: .2rem; }
.sev-high { --sev: var(--danger); --sev-soft: var(--danger-soft); }
.sev-medium { --sev: var(--warn); --sev-soft: var(--warn-soft); }
.sev-low { --sev: var(--accent); --sev-soft: var(--accent-soft); }
.sev-count, .pill.sev { background: var(--sev-soft); color: var(--sev); }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 1rem; }
.filters select { width: auto; }
.chip { font: inherit; font-size: var(--fs-small); font-weight: 600; padding: .3em .8em; border-radius: 999px; border: 1px solid var(--sev); color: var(--sev); background: transparent; cursor: pointer; opacity: .55; }
.chip.on { background: var(--sev-soft); opacity: 1; }

.doc-list { margin: 0; padding-left: 1.25rem; font-size: var(--fs-text); }
.result-head p { margin: 0; }

.flag-list { display: grid; gap: .8rem; }
.flag { background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--sev); border-radius: var(--radius); padding: .75rem 1rem; display: grid; gap: .55rem; }
.flag.status-fix, .flag.status-not-issue, .flag.status-explained { opacity: .72; }
.flag-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.flag-title { word-break: break-word; }
.layer-badge { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1em .5em; border-radius: 4px; background: var(--surface-2); color: var(--muted); }
.flag-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.quote { font: inherit; text-align: left; display: grid; gap: .25rem; padding: .5rem .75rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; }
button.quote:hover { border-color: var(--accent); }
.quote.none { cursor: default; }
.quote-where { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.quote-text { font-size: var(--fs-text); line-height: 1.45; }
.quote mark, .doc-view mark { background: #ffe58a; color: #1a1300; border-radius: 2px; padding: 0 .1em; }
.flag-detail { margin: 0; }
.flag-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.flag-note { font-size: var(--fs-text); }

.progress-panel progress { width: 100%; height: .8rem; }
.progress-steps { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .3rem; }
.progress-steps li::before { display: inline-block; width: 1.4em; }
.progress-steps li.running::before { content: "…"; color: var(--warn); }
.progress-steps li.done::before { content: "✓"; color: var(--ok); }
.progress-steps li.done.warn::before { content: "✓"; color: var(--warn); }
.progress-steps li.failed { color: var(--danger); }
.progress-steps li.failed::before { content: "✗"; }

.doc-view { flex: 1; overflow-y: auto; padding: .5rem 1rem; background: var(--surface-2); border-radius: 6px; }
.doc-view p { margin: .5rem 0; line-height: 1.55; }
.doc-view p.target { background: var(--accent-soft); outline: 2px solid var(--accent); border-radius: 4px; padding: .25rem .5rem; }
.doc-view mark.sentence { background: #fff2b8; }
.doc-view mark.sentence mark { background: #ffc94d; }
.doc-page { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; color: var(--muted); border-top: 1px dashed var(--border); padding-top: .5rem; margin-top: .8rem; }

.engine-status { font: inherit; font-size: var(--fs-small); padding: .25em .75em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; background: var(--surface-2); color: var(--muted); }
.engine-status.connected { background: var(--ok-soft); color: var(--ok); }
.engine-status.offline { background: var(--warn-soft); color: var(--warn); }
.engine-status.rules-only { background: var(--surface-2); color: var(--muted); }
.radio-list { display: grid; gap: .5rem; }
.radio-row { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.radio-row input { width: auto; margin-top: .3rem; }

@media (max-width: 820px) {
  .flag-sides { grid-template-columns: 1fr; }
  .engine-status { display: none; }
}

/* ---------- spreadsheet preview ---------- */

.sheet-preview { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: .4rem; }
.sheet-tabs { display: flex; flex-wrap: wrap; gap: .25rem; }
.sheet-tab { font: inherit; font-size: var(--fs-small); padding: .3em .8em; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px 6px 0 0; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.sheet-tab.active { background: var(--surface); color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.sheet-view { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.sheet-table { border-collapse: collapse; font-size: var(--fs-small); }
.sheet-table th, .sheet-table td { border: 1px solid var(--border); padding: .25rem .5rem; white-space: pre-wrap; max-width: 28rem; vertical-align: top; text-align: left; }
.sheet-table thead th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-weight: 600; z-index: 1; }
.sheet-table .rownum { position: sticky; left: 0; background: var(--surface-2); color: var(--muted); text-align: right; font-weight: 600; }
.sheet-table tr.target td, .sheet-table tr.target th { background: var(--accent-soft); outline: 1px solid var(--accent); }

/* ---------- privacy screen ---------- */

.privacy-screen {
  /* Blue 1s and 0s falling on a muted near-black (a canvas; v1.50), with a thin AUTHENTICATE box
   * in the lower right. No text that names the app or a case. The same in light and dark theme. */
  position: fixed;
  inset: 0;
  width: calc(100vw / var(--z, 1));
  height: calc(100vh / var(--z, 1));
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0e1116;
  color: #60a5fa;
  outline: none;
  font-family: var(--font);
  overflow: hidden;
}
.privacy-screen:not([open]) { display: none; }
.privacy-screen::backdrop { background: #0e1116; }
.privacy-rain { position: fixed; inset: 0; width: calc(100vw / var(--z, 1)); height: calc(100vh / var(--z, 1)); display: block; }
.privacy-unlock { position: absolute; z-index: 1; right: 1.5rem; bottom: 1.5rem; display: grid; justify-items: end; gap: .3rem; margin: 0; }
.privacy-unlock[hidden] { display: none; }
.privacy-prompt { position: relative; display: flex; align-items: center; width: 15rem; height: 1.9rem; padding: 0 .5rem; font-size: var(--fs-text); color: #93c5fd; background: rgba(14, 17, 22, .88); border: 1px solid #3b82f6; }
.privacy-prompt:focus-within { box-shadow: 0 0 0 1px #3b82f6; }
.privacy-dots { letter-spacing: .3em; white-space: nowrap; overflow: hidden; }
.privacy-dots:empty::before { content: attr(data-placeholder); letter-spacing: .2em; color: #64748b; }
.privacy-cursor { display: inline-block; width: .55em; height: 1.05em; background: #3b82f6; animation: cv-blink 1s steps(1) infinite; margin-left: .15rem; }
.privacy-dots:empty + .privacy-cursor { position: absolute; left: .6rem; opacity: .6; }
@keyframes cv-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .privacy-cursor { animation: none; } }
.privacy-unlock .privacy-prompt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; border: 0; cursor: text; font-size: 16px; }
.privacy-msg { min-height: 1.2em; margin: 0; font-size: var(--fs-small); color: #f87171; }
.privacy-hint { position: fixed; z-index: 1; right: 1.5rem; bottom: 1.5rem; margin: 0; padding: .25rem .75rem; font-size: var(--fs-small); color: #93c5fd; background: rgba(14, 17, 22, .88); border: 1px solid #3b82f6; }
.privacy-hint:empty { display: none; }
.hint { font-size: var(--fs-small); background: var(--accent-soft); border-radius: 6px; padding: .5rem .75rem; }
kbd { font-family: var(--mono); font-size: .8em; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; background: var(--surface-2); }
input.pin { width: 6.5em; letter-spacing: .2em; }

/* ---------- drafts ---------- */

.draft-head { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.draft-head .draft-title { font-size: var(--fs-section); font-weight: 600; flex: 1; }
.draft-head select { width: auto; }
.draft-toolbar { flex-wrap: wrap; }
.suggest-toggle { align-items: center; font-size: var(--fs-text); }
.suggest-toggle input { margin-top: 0; }
.draft-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1rem; align-items: start; }
.draft-main { min-width: 0; }
.editor-wrap { position: relative; }
.draft-editor {
  font: 15px/1.6 var(--font);
  letter-spacing: normal;
  padding: 1rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 4;
  min-height: calc(65vh / var(--z, 1));
  display: block;
}
/* The AI suggestion box: floats just below (or above) the cursor line; never takes focus. */
.sugg-box {
  position: absolute;
  z-index: 5;
  width: min(36rem, calc(100% - 1rem));
  box-sizing: border-box;
  padding: .5rem .75rem .25rem;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-text);
  line-height: 1.45;
}
.sugg-box[hidden] { display: none; }
.sugg-label { font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.sugg-body { margin: .15rem 0 .25rem; overflow-wrap: anywhere; height: calc(1.45em * 3); overflow-y: auto; }
.sugg-context { color: var(--muted); }
.sugg-text { background: var(--accent-soft); color: var(--text); border-radius: 3px; padding: 0 .1em; cursor: pointer; }
.sugg-text:hover { outline: 1px solid var(--accent); }
.sugg-foot { font-size: var(--fs-tiny); color: var(--muted); }
.sugg-foot kbd { font-size: var(--fs-small); }

.confirm-panel { position: sticky; top: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; max-height: calc(75vh / var(--z, 1)); overflow-y: auto; }
.confirm-panel h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.confirm-list { margin: .4rem 0 0; padding-left: 1.25rem; display: grid; gap: .3rem; font-size: var(--fs-text); }
.confirm-list li.none { list-style: none; margin-left: -1.3rem; }
.confirm-list .linkish { word-break: normal; overflow-wrap: anywhere; }
.gen-status { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; margin-bottom: .6rem; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-text); }
.spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.ai-badge { margin-left: .5rem; background: var(--accent-soft); color: var(--accent); }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-items { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); padding: .25rem; }
.menu-items button { font: inherit; font-size: var(--fs-text); text-align: left; padding: .5rem .75rem; border: 0; border-radius: 5px; background: transparent; color: var(--text); cursor: pointer; }
.menu-items button:hover { background: var(--surface-2); }
.gen-form { display: grid; gap: .8rem; }
.template-list li { display: flex; justify-content: space-between; align-items: center; padding: .25rem .75rem; }
.template-editor { display: grid; gap: .5rem; margin-top: .6rem; }
.template-text { font-family: var(--mono); font-size: var(--fs-small); }
@media (max-width: 1000px) { .draft-grid { grid-template-columns: 1fr; } .confirm-panel { position: static; } }

/* ---------- XFA forms (Adobe LiveCycle) ---------- */
.xfa-preview { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: .4rem; }
.xfa-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.xfa-bar p { margin: 0; }
.xfa-view { flex: 1; overflow: auto; min-height: 0; background: var(--surface-2); border-radius: 6px; padding: .5rem; }
.xfa-pages { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.xfa-fields { width: 100%; background: var(--surface); }
.xfa-fields th { text-align: left; vertical-align: top; width: 32%; font-weight: 600; }
.xfa-fields td { white-space: pre-wrap; overflow-wrap: anywhere; }
.xfa-fields tr.target td, .xfa-fields tr.target th { background: var(--accent-soft); outline: 1px solid var(--accent); }
.warn-card { border-left: 4px solid var(--warn); background: var(--warn-soft); }
.warn-card p { margin: .3rem 0 0; }

/* The form drawn by pdf.js: a trimmed copy of the xfaLayer rules from pdf.js's viewer CSS.
   The page is always black on white, like the printed form. */
.xfa-page.xfaLayer { position: relative; max-width: 100%; overflow: auto; background: #fff; color: #000; line-height: 1.2; text-align: initial; box-shadow: var(--shadow); }
.xfaLayer * { color: inherit; font: inherit; font-style: inherit; font-weight: inherit; font-kerning: inherit; letter-spacing: -0.01px; text-align: inherit; text-decoration: inherit; box-sizing: border-box; background-color: transparent; padding: 0; margin: 0; line-height: inherit; }
.xfaPage { overflow: hidden; position: relative; }
.xfaContentarea { position: absolute; }
.xfaPrintOnly { display: none; }
.xfaFont { color: black; font-weight: normal; font-kerning: none; font-size: 10px; font-style: normal; letter-spacing: 0; text-decoration: none; vertical-align: 0; }
.xfaCaption { overflow: hidden; flex: 0 0 auto; }
.xfaCaptionForCheckButton { overflow: hidden; flex: 1 1 auto; }
.xfaLabel { height: 100%; width: 100%; }
.xfaLeft { display: flex; flex-direction: row; align-items: center; }
.xfaRight { display: flex; flex-direction: row-reverse; align-items: center; }
.xfaLeft > .xfaCaption, .xfaLeft > .xfaCaptionForCheckButton, .xfaRight > .xfaCaption, .xfaRight > .xfaCaptionForCheckButton { max-height: 100%; }
.xfaTop { display: flex; flex-direction: column; align-items: flex-start; }
.xfaBottom { display: flex; flex-direction: column-reverse; align-items: flex-start; }
.xfaTop > .xfaCaption, .xfaTop > .xfaCaptionForCheckButton, .xfaBottom > .xfaCaption, .xfaBottom > .xfaCaptionForCheckButton { width: 100%; }
.xfaBorder { background-color: transparent; position: absolute; pointer-events: none; }
.xfaWrapped { width: 100%; height: 100%; }
.xfaTextfield, .xfaSelect { height: 100%; width: 100%; flex: 1 1 auto; border: none; resize: none; background-color: rgb(0 54 255 / .08); color: #000; opacity: 1; -webkit-text-fill-color: #000; }
.xfaTop > .xfaTextfield, .xfaTop > .xfaSelect, .xfaBottom > .xfaTextfield, .xfaBottom > .xfaSelect { flex: 0 1 auto; }
.xfaButton { width: 100%; height: 100%; border: none; text-align: center; }
.xfaLink { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.xfaCheckbox, .xfaRadio { width: 100%; height: 100%; flex: 0 0 auto; border: none; }
.xfaRich { white-space: pre-wrap; width: 100%; height: 100%; }
.xfaImage { object-position: left top; object-fit: contain; width: 100%; height: 100%; }
.xfaLrTb, .xfaRlTb, .xfaTb { display: flex; flex-direction: column; align-items: stretch; }
.xfaLr { display: flex; flex-direction: row; align-items: stretch; flex: 0 0 auto; }
.xfaRl { display: flex; flex-direction: row-reverse; align-items: stretch; flex: 0 0 auto; }
.xfaTb > div { flex: 1 1 auto; }
.xfaPosition, .xfaArea { position: relative; }
.xfaValignMiddle { display: flex; align-items: center; }
.xfaTable { display: flex; flex-direction: column; align-items: stretch; }
.xfaTable .xfaRow { display: flex; flex-direction: row; align-items: stretch; }
.xfaTable .xfaRlRow { display: flex; flex-direction: row-reverse; align-items: stretch; flex: 1; }
.xfaTable .xfaRow > div, .xfaTable .xfaRlRow > div { flex: 1 1 auto; }

/* ---------- My details (affiant profile) ---------- */
.affiant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem .9rem; }
.affiant-grid label { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.affiant-grid label code { font-weight: 400; }
.affiant-grid .field.affiant-address { grid-column: 1 / -1; }
.affiant-grid textarea { resize: vertical; }

/* ---------- AI activity (header) ---------- */
.ai-activity { position: relative; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-small); color: var(--accent); padding: .2em .5em; border-radius: 999px; white-space: nowrap; cursor: default; }
.ai-activity[hidden] { display: none; }
.ai-activity:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-activity.loading { color: var(--warn); }
.ai-wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.ai-wave i { display: block; width: 3px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: center; animation: ai-wave 1s ease-in-out infinite; }
.ai-wave i:nth-child(1) { animation-delay: -0.9s; }
.ai-wave i:nth-child(2) { animation-delay: -0.7s; }
.ai-wave i:nth-child(3) { animation-delay: -0.5s; }
.ai-wave i:nth-child(4) { animation-delay: -0.3s; }
.ai-wave i:nth-child(5) { animation-delay: -0.1s; }
.ai-activity.loading .ai-wave i { animation-duration: 1.8s; }
@keyframes ai-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
/* Reduced motion: still bars of different heights, and the text says what's happening. */
@media (prefers-reduced-motion: reduce) {
  .ai-wave i { animation: none; }
  .ai-wave i:nth-child(odd) { transform: scaleY(.55); }
  .ai-wave i:nth-child(3) { transform: scaleY(1); }
}
.ai-activity-pop { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 14rem; max-width: 20rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); white-space: pre-line; font-size: var(--fs-small); line-height: 1.45; }
.ai-activity:hover .ai-activity-pop, .ai-activity:focus .ai-activity-pop, .ai-activity:focus-within .ai-activity-pop { display: block; }
.progress-panel .timing { color: var(--muted); margin-top: .15rem; }
.small-model-note { margin-top: 0; }

/* ---------- v1.9: document folders ---------- */

.files-layout { display: grid; grid-template-columns: 15rem 1fr; gap: 1.2rem; align-items: start; }
.files-main { min-width: 0; }
.folder-nav { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .25rem; position: sticky; top: .5rem; }
.folder-item { display: grid; grid-template-columns: 1.4rem 1fr auto; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: 6px; color: var(--text); text-decoration: none; font-size: var(--fs-text); }
.folder-item:hover { background: var(--surface-2); }
.folder-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.folder-nav > .folder-item:first-child { border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; margin-bottom: .2rem; }
.folder-icon { font-size: .95rem; }
.folder-count { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.pill.warn-pill { background: var(--warn-soft); color: var(--warn); margin-left: .4rem; font-size: var(--fs-tiny); }
.table-scroll { overflow-x: auto; max-width: 100%; }
.type-form table.files td { vertical-align: middle; }
.type-form select, .type-form input { min-width: 10rem; }
@media (max-width: 820px) { .files-layout { grid-template-columns: 1fr; } .folder-nav { position: static; flex-direction: row; flex-wrap: wrap; } .folder-item { grid-template-columns: auto auto auto; } }

/* ---------- v1.9: header indicators ---------- */

.net-status { font: inherit; font-size: var(--fs-small); padding: .25em .75em; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.net-status.off { background: var(--ok-soft); color: var(--ok); }
.mem-status { position: relative; display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-small); color: var(--muted); padding: .2em .55em; border-radius: 999px; white-space: nowrap; cursor: default; background: var(--surface-2); }
.mem-status.warn { color: var(--warn); background: var(--warn-soft); }
.mem-status.high { color: var(--danger); background: var(--danger-soft); font-weight: 600; }
.mem-status:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mem-icon { display: inline-flex; align-items: flex-end; gap: 1px; height: .8rem; }
.mem-icon i { display: block; width: 3px; background: currentColor; border-radius: 1px; opacity: .8; }
.mem-icon i:nth-child(1) { height: 40%; } .mem-icon i:nth-child(2) { height: 70%; } .mem-icon i:nth-child(3) { height: 100%; }
.mem-pop { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 18rem; max-width: 26rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); white-space: pre-line; font-size: var(--fs-small); line-height: 1.45; font-weight: 400; }
.mem-pop .btn { margin-top: .5rem; display: block; }
.mem-status:hover .mem-pop, .mem-status:focus .mem-pop, .mem-status:focus-within .mem-pop { display: block; }
@media (max-width: 820px) { .mem-status, .net-status { display: none; } }

/* ---------- v1.9: review before sending ---------- */

.review-form h2 { margin-bottom: .4rem; }
.review-dest { padding: .5rem .75rem; border-radius: 6px; background: var(--surface-2); margin-bottom: .6rem; overflow-wrap: anywhere; }
.review-dest.net { background: var(--warn-soft); }
.hint.warn-hint { background: var(--warn-soft); color: var(--text); }
.review-body { max-height: calc(52vh / var(--z, 1)); overflow: auto; border: 1px solid var(--border); border-radius: 6px; padding: .5rem .75rem; margin: .6rem 0; }
.review-part + .review-part { border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .6rem; }
.pii-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: 2px; }
.pii-row { display: grid; grid-template-columns: auto 13rem 1fr; gap: .5rem; align-items: baseline; padding: .25rem .5rem; border-left: 3px solid var(--border); background: var(--surface); }
.pii-row:not(:has(input)) { grid-template-columns: 13rem 1fr; }
.pii-row.lvl-critical { border-left-color: var(--danger); }
.pii-row.lvl-high { border-left-color: var(--warn); }
.pii-row.lvl-medium { border-left-color: var(--accent); }
.pii-type { font-size: var(--fs-small); font-weight: 600; }
.pii-ctx { color: var(--muted); overflow-wrap: anywhere; }
.pii-ctx mark { background: var(--warn-soft); color: var(--text); padding: 0 .15em; border-radius: 2px; }
.block-list, .warn-list, .ok-list { list-style: none; margin: .3rem 0; padding: 0; font-size: var(--fs-text); }
.block-list li { color: var(--danger); font-weight: 600; }
.warn-list li { color: var(--warn); }
.ok-list li { color: var(--ok); }
.ok-text { color: var(--ok); }
.grow { flex: 1; min-width: 0; }
input.narrow-wide { width: 12rem; }
@media (max-width: 820px) { .pii-row, .pii-row:not(:has(input)) { grid-template-columns: 1fr; } }

/* ---------- v1.9: online research & drafting ---------- */

.turn { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }

/* ---------- v1.9: department mail ---------- */

.mail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.2rem; align-items: start; }
.mail-form .field { margin-bottom: .5rem; }
.mail-form input, .mail-form textarea { width: 100%; }
.mail-body { font-family: var(--font); }
.mail-attach { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem; background: var(--surface); max-height: calc(70vh / var(--z, 1)); overflow: auto; }
.attach-list details { margin: .3rem 0; }
.attach-list summary { cursor: pointer; font-weight: 600; font-size: var(--fs-text); }
.attach-list .check-row { font-size: var(--fs-small); padding: .1rem 0 .1rem .75rem; overflow-wrap: anywhere; }
.mail-history { margin-top: 1.5rem; }
@media (max-width: 1000px) { .mail-layout { grid-template-columns: 1fr; } }
table.files td.fname .linkish { word-break: normal; overflow-wrap: anywhere; }
table.files td.fname { min-width: 14rem; }

/* ---------- v1.9: API key ---------- */

.btn.danger-ghost { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.danger-ghost:hover { background: var(--danger-soft); }

.radio-row + .radio-row { margin-top: .35rem; }
.vault-panel h4 { margin: 1rem 0 .3rem; font-size: var(--fs-text); }
.nowrap { white-space: nowrap; }
.list-none { list-style: none; margin-left: -1.2em; }

/* ---------- self-test ---------- */
.selftest-list { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .45rem; }
.selftest-item { display: grid; grid-template-columns: 1.6rem 1fr; gap: .4rem; align-items: start; }
.selftest-icon { font-weight: 700; text-align: center; border-radius: 999px; line-height: 1.5rem; height: 1.5rem; background: var(--surface-2); color: var(--muted); }
.selftest-item.pass .selftest-icon { background: var(--ok-soft); color: var(--ok); }
.selftest-item.warn .selftest-icon { background: var(--warn-soft); color: var(--warn); }
.selftest-item.fail .selftest-icon { background: var(--danger-soft); color: var(--danger); }
.selftest-item .block { overflow-wrap: anywhere; }

/* ---------- Word (.docx) preview ---------- */
.docx-preview { flex: 1; overflow: auto; min-height: 0; }
.docx-page { max-width: 48rem; margin: 0 auto; background: #fff; color: #111; padding: 2rem 2.5rem; border: 1px solid var(--border); border-radius: 6px; font-family: Calibri, "Segoe UI", Arial, sans-serif; line-height: 1.5; }
.docx-page h2, .docx-page h3, .docx-page h4 { color: #111; margin: 1.1em 0 .4em; }
.docx-page p { margin: 0 0 .6em; white-space: pre-wrap; }
.docx-page p.docx-empty { min-height: .8em; }
.docx-page ol, .docx-page ul { margin: 0 0 .6em 1.4em; padding: 0; }
.docx-table { border-collapse: collapse; margin: .4em 0 .9em; width: 100%; }
.docx-table td { border: 1px solid #bbb; padding: .3em .5em; vertical-align: top; }
.docx-table td p { margin: 0; }
.docx-page-break { border: 0; border-top: 2px dashed #ccc; margin: 1.5em 0; }

/* ---------- Arrest details, close case, status ---------- */
.status-note { margin-top: .3rem; font-weight: 400; }
.arrestee h3 { margin: 1.1rem 0 .4rem; font-size: var(--fs-text); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.arrest-grid { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); max-width: none; }
.arrest-grid .span-2 { grid-column: 1 / -1; }
.charges-table input, .charges-table select { min-width: 6rem; }
.charges-table td { padding: .25rem; }
.arrestees { display: grid; gap: 1rem; margin-bottom: 1rem; }
.close-form .radio-list { margin-bottom: .8rem; }

/* Template editor: placeholder list */
.placeholder-help { margin: .5rem 0; }
.placeholder-help summary { cursor: pointer; font-size: var(--fs-small); }
.ph-group { margin: .45rem 0; }
.ph-title { display: block; color: var(--muted); margin-bottom: .2rem; }
.ph-keys { display: flex; flex-wrap: wrap; gap: .25rem; }
.ph-key { font: .8em var(--mono); padding: .1rem .25rem; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); color: var(--text); cursor: pointer; }
.ph-key:hover, .ph-key:focus-visible { border-color: var(--accent); }

/* =====================================================================
   v1.10: the LE Cyber-Docs look. Icons (.bi), rounded cards, a glass header, pill tabs,
   the Vault panel with its section list, and the Reference screens.
   ===================================================================== */

body { font-size: var(--fs-text); letter-spacing: .005em; transition: background-color .2s, color .2s; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.005em; }

/* icons */
.bi { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; }
.btn,.tab,.pill,.ref-pill,.hint,.net-status,.engine-status,.save-status,h1[class],h2[class],h3,.page-title { gap: .45em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; border-radius: var(--radius-sm); font-weight: 400; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:hover { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }
.btn.primary:hover { color: var(--accent-text); filter: brightness(1.08); }
.btn.danger:hover { color: #fff; filter: brightness(1.08); }
.btn.ghost:hover { background: var(--accent-soft); color: var(--accent); }
.btn.danger-ghost:hover { background: var(--danger-soft); color: var(--danger); }
.btn.active { color: var(--accent); }
.pill { display: inline-flex; align-items: center; gap: .3em; }
.pill .bi { width: .9em; height: .9em; }
h1 .bi, h2 .bi, h3 .bi { color: var(--accent); }
h1.page-title, h2.section-title, .ref-card-title, .vault-card h3 { display: flex; align-items: center; gap: .5rem; }

.hint { display: flex; align-items: flex-start; gap: .5em; border-radius: var(--radius-sm); }
.hint .bi { margin-top: .2em; color: var(--accent); }
input, select, textarea { border-radius: var(--radius-sm); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); }
.field > span { font-weight: 400; }

/* header */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--topbar-bg); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); gap: .6rem; padding: .5rem 1rem; }
.brand { color: var(--accent); font-weight: 700; letter-spacing: .01em; }
.brand img { border-radius: 7px; }
.vault-name { display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em; border-radius: 999px; background: var(--surface-2); }
.vault-name:empty { display: none; }
.save-status, .net-status, .engine-status { display: inline-flex; align-items: center; gap: .4em; }
.save-status .bi, .net-status .bi, .engine-status .bi { width: .95em; height: .95em; }
.save-status.saving .bi { animation: cv-spin 1s linear infinite; }
@keyframes cv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .save-status.saving .bi { animation: none; } }
.theme-toggle { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.theme-toggle:hover { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-soft); }
.theme-toggle .bi { width: 1.05rem; height: 1.05rem; }
#btn-reference, #btn-vault, #btn-privacy { font-weight: 400; }
@media (max-width: 1100px) { #btn-reference, #btn-privacy, #btn-vault { font-size: 0; gap: 0; padding: .45em .6em; } #btn-reference .bi, #btn-privacy .bi, #btn-vault .bi { font-size: 1.05rem; } }

/* sidebar */
.sidebar { background: var(--surface); }
.sidebar-tools { gap: .6rem; }
.search-wrap { position: relative; display: block; }
.search-wrap > .bi { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-wrap > input { padding-left: 2.25rem; }
.case-list { padding: .5rem; }
.case-item { border-radius: .75rem; padding: .5rem .75rem; transition: background-color .15s, border-color .15s; }
.case-item + .case-item, .case-list li + li { margin-top: .15rem; }
.case-item.active { background: var(--surface-2); border-color: transparent; box-shadow: inset 3px 0 0 var(--accent); }
.case-item.active .case-item-title { color: var(--text); }
.icon-btn { border-radius: var(--radius-sm); }

/* main */
.main { padding: 1.5rem 2rem 3rem; }
.case-head h1 { font-size: var(--fs-title); }
.case-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.tabs { gap: .25rem; border-bottom: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .25rem; width: fit-content; max-width: 100%; overflow-x: auto; box-shadow: var(--shadow); margin-bottom: 1.4rem; }
.tab { display: inline-flex; align-items: center; gap: .45em; border: 0; margin: 0; padding: .5rem 1rem; border-radius: 999px; font-weight: 400; white-space: nowrap; transition: background-color .15s, color .15s; }
.tab:hover { color: var(--accent); background: var(--accent-soft); }
.tab.active { color: var(--accent-text); background: var(--accent); border: 0; }
.tab.active:hover { color: var(--accent-text); }
.case-actions, .timeline-form, .plain-list, .notes-preview, .stat { border-radius: var(--radius); box-shadow: var(--shadow); }
.case-actions h3 { display: flex; align-items: center; gap: .5rem; }
.archived-banner { border-radius: var(--radius); }
.banner-icon { width: 1.4rem; height: 1.4rem; color: var(--muted); }

/* overview */
.dashboard { max-width: 1040px; }
.stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.stat { display: flex; align-items: center; gap: .9rem; padding: 1rem 1rem; }

.plain-list { overflow: hidden; }

/* quick links (Overview and Reference) */
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.quick-link { display: flex; align-items: center; gap: .9rem; padding: 1rem 1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.quick-link:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
.quick-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ql-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem; background: var(--accent-soft); color: var(--accent); font-size: 1.4rem; flex-shrink: 0; }
.ql-incident { background: var(--ok-soft); color: var(--ok); }
.ql-ucr { background: var(--danger-soft); color: var(--danger); }
.ql-text { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.ql-go { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .quick-link, .quick-link:hover { transition: none; transform: none; } }

/* files */
.folder-icon { display: inline-grid; place-items: center; color: var(--accent); }
.folder-item.active .folder-icon { color: inherit; }
.fname { display: flex; align-items: center; gap: .5rem; }
.file-icon { display: inline-grid; place-items: center; font-size: 1.1rem; color: var(--muted); flex-shrink: 0; }
.file-icon.pdf { color: #dc3545; } .file-icon.word { color: #2b579a; } .file-icon.sheet { color: #198754; }
.file-icon.image { color: #6f42c1; } .file-icon.audio, .file-icon.video { color: #d63384; } .file-icon.mail { color: var(--accent); }
:root[data-theme="dark"] .file-icon.word { color: #6ea8fe; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .file-icon.word { color: #6ea8fe; } }
.drop-icon { display: block; width: 1.8rem; height: 1.8rem; margin: 0 auto .4rem; color: var(--accent); }
.dropzone { border-radius: var(--radius); }
table.files { border-radius: var(--radius); overflow: hidden; }

/* dialogs */
.dialog { border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.dialog h2 { display: flex; align-items: center; gap: .5rem; }
.selftest-icon { display: inline-grid; place-items: center; font-size: 1.05rem; }
.selftest-item.pass .selftest-icon { color: var(--ok); } .selftest-item.warn .selftest-icon { color: var(--warn); }
.selftest-item.fail .selftest-icon { color: var(--danger); } .selftest-item.running .selftest-icon .bi { animation: cv-spin 1s linear infinite; }
.toast { border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }

/* Vault panel: section list on the left, cards on the right */
.vault-panel { display: flex; flex-direction: column; height: 100%; }
.vault-panel-head { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.vault-panel-head h2 { margin: 0; }
.vault-panel-head p { margin: 0; }
.vault-badge { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: var(--accent); color: var(--accent-text); font-size: var(--fs-section); }
.vault-panel-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px 1fr; }
.vault-nav { display: flex; flex-direction: column; gap: .15rem; padding: .75rem; border-right: 1px solid var(--border); background: var(--bg); overflow-y: auto; }
.vault-nav-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-text); font-weight: 400; text-align: left; cursor: pointer; }
.vault-nav-item:hover { background: var(--accent-soft); color: var(--accent); }
.vault-nav-item.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.vault-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.vault-content { overflow-y: auto; padding: 1.25rem 1.5rem 2rem; background: var(--bg); scroll-padding-top: 1rem; }
.vault-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.vault-card > h3:first-child { margin-top: 0; font-size: var(--fs-sub); }
.vault-card h3 { margin-top: 1.1rem; }
.vault-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: .6rem; }
.fact { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: .75rem; background: var(--bg); border: 1px solid var(--border); min-width: 0; }
.fact strong { font-weight: 400; overflow-wrap: anywhere; }
.fact-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.row.wrap { flex-wrap: wrap; }
@media (max-width: 760px) {
  .vault-panel-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .vault-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .vault-nav-item { white-space: nowrap; }
}

/* Reference */
.reference { max-width: 1120px; }
.ref-head p { margin-top: -.3rem; }
.ref-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1.3rem; }
.ref-pill { display: inline-flex; align-items: center; gap: .45em; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 400; font-size: var(--fs-text); }
.ref-pill:hover { color: var(--accent); border-color: var(--accent); }
.ref-pill.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.ref-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
@media (max-width: 980px) { .ref-grid { grid-template-columns: 1fr; } }
.ref-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.25rem; margin-bottom: 1rem; min-width: 0; }
.ref-card-title { font-size: var(--fs-sub); margin-bottom: .8rem; }
.ref-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 .9rem; }
.ref-filters .search-wrap { flex: 1 1 240px; }
.ref-filters select { width: auto; flex: 0 1 220px; }

.calc-form { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.calc-result { margin: .9rem 0 .6rem; padding: 1rem 1rem; border-radius: .8rem; background: var(--bg); border: 1px dashed var(--border); font-size: var(--fs-sub); font-weight: 600; text-align: center; color: var(--muted); }
.calc-result.is-value { background: var(--ok-soft); border: 1px solid transparent; color: var(--ok); font-size: var(--fs-title); }
.calc-result.is-error { background: var(--danger-soft); border-color: transparent; color: var(--danger); font-size: var(--fs-text); }

@media (max-width: 760px) { .complaint-row { grid-template-columns: auto 1fr; } .complaint-actions { grid-column: 1 / -1; justify-content: flex-start; } }

.value-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1rem 1.4rem; }
.value-group { min-width: 0; }
@media (max-width: 560px) { .value-chart { grid-template-columns: 1fr; } }
.value-group h3 { font-size: var(--fs-text); margin: 0 0 .4rem; color: var(--accent); }
.table-wrap { overflow-x: auto; }
.value-table { width: 100%; border-collapse: collapse; font-size: var(--fs-text); }
.value-table th, .value-table td { padding: .25rem .5rem; border-bottom: 1px solid var(--border); text-align: left; }
.value-table thead th { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.value-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.value-table tbody th { font-weight: 400; }
.value-table td.verify { color: var(--warn); }
.value-table .warn-pill { margin-left: .3rem; }

@media (max-width: 760px) { .report-grid { grid-template-columns: 1fr 1fr; } }

.check-row { display: flex; align-items: flex-start; gap: .5rem; padding: .25rem 0; cursor: pointer; }
.check-row input { margin-top: .3em; accent-color: var(--accent); }

.flow { list-style: none; margin: .4rem 0 0; padding: 0 0 0 .25rem; position: relative; }
.flow::before { content: ""; position: absolute; left: 1.15rem; top: .6rem; bottom: .6rem; width: 2px; background: var(--border); }

.segmented.choice { display: flex; flex-wrap: wrap; gap: .3rem; }

.code-group h3 { font-size: var(--fs-text); color: var(--accent); margin: 1.1rem 0 .5rem; }
.code-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.code-card { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: .75rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-text); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.code-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.code-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.code-card-code { font-family: var(--mono); font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: .1rem .5rem; border-radius: .4rem; }
.code-card-copy { color: var(--muted); opacity: 0; transition: opacity .15s; }
.code-card:hover .code-card-copy, .code-card:focus-visible .code-card-copy { opacity: 1; }

@media (max-width: 620px) { .main { padding: 1rem 1rem 3rem; } .tabs { border-radius: var(--radius); } }
@media (max-width: 820px) { .topbar .mem-status, .topbar .net-status { display: none; } }

/* =====================================================================
   v1.11: centred, symmetric layout that scales from a phone to 1920×1080 and up;
   hover boxes; case actions as same-size buttons.
   ===================================================================== */

.case, .dashboard, .reference { width: 100%; max-width: 1360px; margin-inline: auto; }
@media (min-width: 2200px) { .case, .dashboard, .reference { max-width: 1680px; } }
.main { padding: 1.5rem clamp(1rem, calc(3vw / var(--z, 1)), 3rem) 3rem; }
.form-grid { max-width: none; }
.tabs { width: 100%; display: flex; }
.tab { flex: 1 1 0; justify-content: center; min-width: max-content; }
.case-actions { max-width: none; }
.case-actions-grid { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: .7rem; }
.action-btn { width: 100%; min-height: 2.75rem; }
@media (max-width: 620px) { .case-actions-grid { grid-template-columns: 1fr 1fr; } }

/* Overview: each part separated by a line */
.dash-section { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.dash-section > h2 { margin-top: 0; }

/* Hover box (js/tooltip.js) */
.cv-tip {
  position: fixed; z-index: 1000; max-width: min(22rem, calc(calc(100vw / var(--z, 1)) - 12px));
  padding: .5rem .75rem; border-radius: .55rem;
  background: var(--text); color: var(--surface);
  font-size: var(--fs-small); line-height: 1.4; font-weight: 400; letter-spacing: 0;
  box-shadow: var(--shadow-lg); pointer-events: none; white-space: pre-line;
}
.cv-tip[hidden] { display: none; }

/* Files tab (v1.11): fixed columns with clear lines; long names end in "…" (full name on hover). */
.files-layout { grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); }
.folder-item.child { padding-left: 1.5rem; font-size: var(--fs-small); }
.folder-item[draggable="true"] { cursor: grab; }
.folder-item.drop-target { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -2px; }
.folder-item .folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-reset { margin-top: .3rem; align-self: center; }
/* Arrange folders dialog (v1.13). */
.arrange-list { list-style: none; margin: .6rem 0 0; padding: 0; max-height: calc(60vh / var(--z, 1)); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.arrange-item { display: flex; align-items: center; gap: .5rem; padding: .25rem .5rem; border-bottom: 1px solid var(--border); background: var(--surface); cursor: grab; }
.arrange-item:last-child { border-bottom: 0; }
.arrange-item.dragging { opacity: .5; }
.arrange-item.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
.arrange-item .arrange-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arrange-item .grip-cell { color: var(--muted); display: inline-flex; }
.arrange-item .icon-btn[disabled] { opacity: .3; cursor: default; }
.arrange-form { min-width: min(26rem, calc(80vw / var(--z, 1))); }
.arrange-form .dialog-actions { align-items: center; }
.merge-hint { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.files-table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.files-table-wrap table.files { table-layout: fixed; width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.files-table-wrap col.col-grip { width: 2rem; }
.files-table-wrap col.col-type { width: 9.5rem; }
.files-table-wrap col.col-size { width: 6rem; }
.files-table-wrap col.col-added { width: 9.5rem; }
.files-table-wrap col.col-actions { width: 8.2rem; }
.files-table-wrap table.files th, .files-table-wrap table.files td { padding: .5rem .75rem; border-bottom: 1px solid var(--border); overflow: hidden; }
.files-table-wrap table.files th + th, .files-table-wrap table.files td + td { border-left: 1px solid var(--border); }
.files-table-wrap table.files tbody tr:last-child td { border-bottom: 0; }
.files-table-wrap table.files tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.files-table-wrap table.files tbody tr:hover { background: var(--accent-soft); }
.files-table-wrap table.files thead th { background: var(--surface-2); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; padding: 0; }
.th-btn { display: flex; align-items: center; gap: .35rem; width: 100%; padding: .5rem .75rem; border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 600; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-btn:hover, .sortable.sorted .th-btn, .th-btn.sorted { color: var(--accent); }
.th-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
th.num .th-btn { justify-content: flex-end; }
.actions-head .th-btn { justify-content: center; text-transform: none; letter-spacing: 0; }
.files-table-wrap td.fname { display: table-cell; min-width: 0; }
.files-table-wrap td.fname { white-space: nowrap; }
.files-table-wrap td.fname > * { vertical-align: middle; }
.files-table-wrap .file-icon { display: inline-grid; margin-right: .5rem; }
.fname-text { display: inline-flex; flex-direction: column; max-width: calc(100% - 2rem); vertical-align: middle; }
.files-table-wrap .fname-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; word-break: normal; overflow-wrap: normal; font-weight: 400; color: var(--text); }
.files-table-wrap .fname-link:hover { color: var(--accent); }
.fname-folder { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftype { white-space: nowrap; text-overflow: ellipsis; }
.files-table-wrap td.actions { text-align: center; white-space: nowrap; }
.files-table-wrap td.actions .icon-btn { width: 2rem; height: 2rem; }
.icon-btn.danger-icon:hover { color: var(--danger); background: var(--danger-soft); }
.grip-cell { text-align: center; color: var(--muted); cursor: grab; }
tr.dragging { opacity: .45; }
tr.drop-before td { box-shadow: inset 0 2px 0 var(--accent); }
tr.drop-after td { box-shadow: inset 0 -2px 0 var(--accent); }
.sort-icon { width: .8em; height: .8em; }
@media (max-width: 900px) {
  .files-table-wrap col.col-type, .files-table-wrap col.col-added { width: 0; }
  .files-table-wrap table.files th:nth-last-child(2), .files-table-wrap table.files td:nth-last-child(2) { display: none; }
}
@media (max-width: 820px) { .files-layout { grid-template-columns: 1fr; } .folder-item.child { padding-left: .5rem; } }

/* Tables in notes and drafts (Markdown | a | b |) */
.md-table-wrap { overflow-x: auto; margin: .6rem 0; }
.md-table { border-collapse: collapse; min-width: 50%; font-size: .92em; }
.md-table th, .md-table td { border: 1px solid var(--border); padding: .25rem .5rem; text-align: left; vertical-align: top; }
.md-table th { background: var(--surface-2); font-weight: 600; }
.md-table .al-right { text-align: right; } .md-table .al-center { text-align: center; }

/* Formatting bar (Notes and Drafts) */
.fmt-bar { display: inline-flex; align-items: center; gap: .15rem; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.fmt-bar[hidden] { display: none; }
.fmt-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: .4rem; background: transparent; color: var(--text); cursor: pointer; }
.fmt-btn:hover { background: var(--accent-soft); color: var(--accent); }
.fmt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fmt-sep { width: 1px; height: 1.3rem; background: var(--border); margin: 0 .2rem; }
.fmt-table { position: relative; display: inline-flex; }
.fmt-grid { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; padding: .5rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--surface); box-shadow: var(--shadow-lg); }
.fmt-grid[hidden] { display: none; }
.fmt-grid-label { text-align: center; margin-bottom: .35rem; color: var(--muted); font-weight: 400; }
.fmt-cells { display: grid; grid-template-columns: repeat(6, 1.2rem); gap: 3px; }
.fmt-cell { width: 1.2rem; height: 1.2rem; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); cursor: pointer; }
.fmt-cell.on { background: var(--accent-soft); border-color: var(--accent); }
.note-save-status { display: inline-block; min-width: 8.5rem; text-align: right; }
.toolbar { flex-wrap: wrap; row-gap: .5rem; }

/* Quick links (bottom of the Overview): tabs, same-size tiles, show/hide */
.quick-links-box { display: grid; gap: .8rem; }
.ql-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ql-tabs .btn { min-width: 7rem; }
.ql-note { display: flex; align-items: center; gap: .4rem; margin: 0; }
.quick-links { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: .8rem; }
.quick-link { position: relative; min-height: 4.2rem; padding: .75rem 1rem; gap: .8rem; font: inherit; text-align: left; cursor: pointer; }
.quick-link.needs-url { border-style: dashed; color: var(--muted); background: var(--surface); }
.ql-icon { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
.ql-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-ext { color: var(--muted); font-size: var(--fs-small); }
.ql-osint { background: var(--ok-soft); color: var(--ok); }
.ql-leo { background: var(--warn-soft); color: var(--warn); }
.ql-reference { background: var(--accent-soft); color: var(--accent); }
.ql-edit-wrap { position: relative; }
.ql-edit-wrap > .quick-link { width: 100%; height: 100%; }
.ql-edit-wrap.is-hidden > .quick-link { opacity: .45; border-style: dashed; }
.ql-toggle { position: absolute; top: -.5rem; right: -.5rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; }
.ql-toggle:hover { color: var(--accent); border-color: var(--accent); }

/* Vault → Quick links */
.links-group h4, .lib-group h4 { display: flex; align-items: center; gap: .45rem; margin: 1rem 0 .4rem; font-size: var(--fs-text); }
.links-group h4 .bi, .lib-group h4 .bi { color: var(--accent); }
.links-rows, .lib-rows { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: .75rem; overflow: hidden; }
.links-row, .lib-row { display: grid; align-items: center; gap: .5rem; padding: .5rem .5rem; }
.links-row { grid-template-columns: 1.5rem minmax(8rem, 1fr) minmax(10rem, 2fr) auto 2rem; }
.links-row + .links-row, .lib-row + .lib-row { border-top: 1px solid var(--border); }
.links-icon { color: var(--muted); display: grid; place-items: center; }
.links-add { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(10rem, 2fr) auto; gap: .5rem; margin-top: .5rem; }
@media (max-width: 760px) { .links-row { grid-template-columns: 1.5rem 1fr auto 2rem; } .links-row input:nth-of-type(2) { grid-column: 2 / -1; grid-row: 2; } .links-add { grid-template-columns: 1fr; } }

/* Vault → Library and AI writing behavior */
.lib-add { margin: .4rem 0; }
.lib-add select { width: auto; }
.lib-row { grid-template-columns: minmax(0, 1fr) 13rem 10rem 2rem 2rem; font-size: var(--fs-text); }
.lib-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-empty { margin: 0; padding: .5rem .25rem; }
.lib-preview { display: flex; flex-direction: column; gap: .5rem; max-height: calc(80vh / var(--z, 1)); }
.lib-text { white-space: pre-wrap; overflow: auto; max-height: calc(60vh / var(--z, 1)); background: var(--bg); border: 1px solid var(--border); border-radius: .6rem; padding: .75rem; font-size: var(--fs-small); }
.behavior-prompt { font-family: var(--mono); font-size: var(--fs-small); line-height: 1.45; }
.lib-pick { max-height: 14rem; overflow-y: auto; }
.lib-pick-head { display: block; margin: .3rem 0 .1rem; font-weight: 600; }
@media (max-width: 760px) { .lib-row { grid-template-columns: 1fr 2rem 2rem; } .lib-row select, .lib-row label { grid-column: 1 / -1; } }

/* v1.11: symmetric Details, overview rows and case actions */
.case-actions-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
@media (min-width: 1100px) {
  .details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .details-grid .span-2 { grid-column: 1 / -1; }
}

.recent-row > :last-child { text-align: right; }

/* v1.11.1: an ⓘ after a heading marks its hover box */
.vault-card h3[data-tip] { cursor: help; }
.count-pill { display: inline-block; min-width: 1.4rem; padding: 0 .5rem; margin-left: .35rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: var(--fs-tiny); font-weight: 600; text-align: center; }

/* v1.12: dialog sizes, set by openDialog() from what the dialog shows (no CSS :has(), which
   older Firefox versions ignore). File previews use almost the whole window. */
.dialog.dialog-wide { width: min(1120px, calc(calc(100vw / var(--z, 1)) - 2rem)); }
.dialog.dialog-full { width: min(1760px, calc(calc(100vw / var(--z, 1)) - 2rem)); height: calc(calc(100vh / var(--z, 1)) - 2rem); max-height: none; padding: 1rem 1.25rem; }
.dialog.dialog-panel { width: min(1320px, calc(calc(100vw / var(--z, 1)) - 2rem)); height: min(960px, calc(calc(100vh / var(--z, 1)) - 2rem)); max-height: none; padding: 0; overflow: hidden; }
.dialog-full .preview { height: 100%; min-height: 0; }
.dialog-full .preview-frame { min-height: 0; }
.docx-page { max-width: min(70rem, 100%); overflow-x: auto; }
.docx-table { table-layout: auto; min-width: 100%; }
.docx-table td { overflow-wrap: anywhere; }
.sheet-preview, .docx-preview, .doc-view { min-width: 0; }
.preview-head h2 { word-break: normal; overflow-wrap: anywhere; }

/* v1.12: inline boxes keep their size (the Subject marking box spilled over its neighbours), and
   button rows in the Vault wrap with room above them instead of running into the box above. */
.inline { flex-wrap: nowrap; white-space: nowrap; }
.inline > input:not([type="checkbox"]):not([type="radio"]), .inline > select { width: auto; flex: 0 0 auto; }
input.narrow-wide { width: 9rem; }
.vault-card .row { flex-wrap: wrap; row-gap: .5rem; column-gap: 1.2rem; }
.vault-card .field + .row, .vault-card .row + .field { margin-top: .7rem; }
.vault-card .field { margin-top: .5rem; min-width: 0; }
.vault-card .row > .field { flex: 1 1 16rem; margin-top: 0; }
.behavior-prompt { width: 100%; resize: vertical; min-height: 12rem; }

/* Ask AI (#/chat) */
.chat-float { position: fixed; z-index: 40; right: 1.2rem; bottom: 1.2rem; width: min(30rem, calc(calc(100vw / var(--z, 1)) - 2rem)); height: min(40rem, calc(calc(100vh / var(--z, 1)) - 6rem)); min-width: 20rem; min-height: 18rem; max-width: calc(calc(100vw / var(--z, 1)) - 1rem); max-height: calc(calc(100vh / var(--z, 1)) - 1rem); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; resize: both; }
.chat-float[hidden] { display: none; }
.chat-float.big { left: 50% !important; top: 50% !important; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(62rem, calc(calc(100vw / var(--z, 1)) - 2rem)); height: calc(calc(100vh / var(--z, 1)) - 4rem); resize: none; }
.chat-float.min { height: auto !important; min-height: 0; resize: none; width: 16rem; }
.chat-float.min .chat-float-body { display: none; }
.chat-float.moving { user-select: none; opacity: .92; }
.chat-float-head { display: flex; align-items: center; gap: .15rem; padding: .25rem .5rem .25rem .75rem; border-bottom: 1px solid var(--border); background: var(--surface-2); cursor: move; touch-action: none; }
.chat-float.big .chat-float-head { cursor: default; }
.chat-float.min .chat-float-head { border-bottom: 0; }
.chat-float-title { display: flex; align-items: center; gap: .45rem; color: var(--accent); }
.chat-float-title strong { color: var(--text); }
.chat-float-head .icon-btn { width: 1.9rem; height: 1.9rem; }
.chat-float-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .5rem .75rem .5rem; }
.chat-float .chat-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .4rem .6rem; align-items: end; margin: 0 0 .5rem; }
.chat-float .chat-options .check-row { grid-column: 1 / -1; padding: 0; }
.chat-float .chat-options .field { margin: 0; min-width: 0; }
.chat-float .chat-options select { width: 100%; }
.chat-thread { flex: 1; min-height: 0; overflow-y: auto; padding: .75rem .1rem; display: flex; flex-direction: column; gap: .9rem; border-top: 1px solid var(--border); }
.chat-msg { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .55rem; align-items: start; }
.chat-avatar { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: var(--fs-sub); }
.chat-msg.assistant .chat-avatar { background: var(--accent-soft); color: var(--accent); }
.chat-msg.user .chat-content { background: var(--surface-2); border-radius: 1rem; padding: .5rem .75rem; justify-self: start; max-width: 100%; }
.chat-msg.user .chat-body { white-space: pre-wrap; }
.chat-body { line-height: 1.55; overflow-wrap: anywhere; font-size: var(--fs-text); }
.chat-body > :first-child { margin-top: 0; }
.chat-body > :last-child { margin-bottom: 0; }
.chat-body pre { background: var(--surface-2); padding: .75rem; border-radius: .6rem; overflow-x: auto; }
.chat-body table { display: block; overflow-x: auto; }
.chat-tools { display: flex; gap: .2rem; margin-top: .3rem; opacity: .7; }
.chat-msg:hover .chat-tools { opacity: 1; }
.chat-empty { margin: auto; text-align: center; max-width: 24rem; display: grid; justify-items: center; gap: .3rem; }
.chat-empty h2 { font-size: var(--fs-sub); margin: .3rem 0 0; }
.chat-empty-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .9rem; background: var(--accent-soft); color: var(--accent); font-size: 1.3rem; }
.chat-starters { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .4rem; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: end; padding: .5rem; border: 1px solid var(--border); border-radius: .9rem; background: var(--surface); box-shadow: var(--shadow); }
.chat-input { border: 0; resize: none; box-shadow: none !important; background: transparent; min-height: 3.6rem; max-height: 3.6rem; }
.chat-actions { display: flex; gap: .4rem; }
.chat-foot { display: flex; align-items: center; gap: .35rem; justify-content: center; margin: .4rem 0 0; text-align: center; }
/* Keep the toasts clear of the chat box. */
body.chat-open .toasts { right: auto; left: 1rem; }
@media (max-width: 640px) {
  .chat-float, .chat-float.big { left: .5rem !important; right: .5rem; top: auto !important; bottom: .5rem; transform: none; width: auto; height: calc(75vh / var(--z, 1)); min-width: 0; resize: none; }
  .chat-float.min { height: auto !important; }
}
@media (max-width: 1100px) { #btn-chat { font-size: 0; gap: 0; padding: .45em .6em; } #btn-chat .bi { font-size: 1.05rem; } }

/* v1.13: contacts on the Details tab. Each row: role, name, email, phone (and remove). */
.contacts { margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; background: var(--surface); box-shadow: var(--shadow); }
.contacts h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; }
.contact-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 1fr) 2.1rem; gap: .5rem .8rem; align-items: end; padding: .5rem 0; border-top: 1px solid var(--border); }
.contacts > .contact-row:first-of-type { border-top: 0; }
.contact-row .field { margin: 0; min-width: 0; }
.contact-row input, .contact-row select { width: 100%; }
.contact-fixed { display: flex; align-items: center; min-height: 2.35rem; font-weight: 600; }
.contact-remove { align-self: end; margin-bottom: .15rem; }
.contact-add { margin-top: .6rem; }
@media (max-width: 900px) {
  .contact-row { grid-template-columns: 1fr 1fr; }
  .contact-row .contact-remove { justify-self: end; grid-column: 2; }
}

/* v1.13: time boxes (js/timefield.js): type the time, or pick it and press "Set time". */
.time-field, .field > span.time-field { position: relative; display: flex; align-items: stretch; min-width: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.time-field .time-text { flex: 1; min-width: 0; width: 100%; padding-right: 2.5rem; font-variant-numeric: tabular-nums; }
.time-field .time-btn { position: absolute; right: .15rem; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; }
.time-pop { position: absolute; z-index: 60; top: calc(100% + .3rem); left: 0; min-width: 14.5rem; padding: .75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: grid; gap: .6rem; }
.time-pop.up { top: auto; bottom: calc(100% + .3rem); }
.time-pop-row { display: flex; align-items: center; justify-content: center; gap: .35rem; }
.time-pop-row select { width: 4.6rem; font-variant-numeric: tabular-nums; }
.time-colon { font-weight: 700; }
.time-pop-actions { display: flex; gap: .35rem; justify-content: flex-end; }
.time-pop-actions .time-set { margin-left: auto; }

/* ---------- v1.14 top bar: brand and data folder on the left, status icons in the middle,
 * Ask AI, Hide and the menu on the right. ---------- */
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; }
.tb-left, .tb-right { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.tb-right { justify-content: flex-end; }
.brand { gap: .6rem; min-width: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-name { font-size: var(--fs-sub); }
.topbar .vault-name, .topbar .vault-name:empty { display: block; padding: 0; background: none; border-radius: 0; font-size: var(--fs-tiny); font-weight: 400; color: var(--muted); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }
.topbar .vault-name:empty { display: none; }
.tb-status { display: flex; align-items: center; gap: .45rem; }
/* Each status is a round icon; the words are in its hover box. */
.tb-status .net-status, .tb-status .engine-status, .tb-status .mem-status, .tb-status .save-status {
  font-size: 0; gap: 0; width: 2.1rem; height: 2.1rem; padding: 0; justify-content: center; border-radius: 50%; border: 1px solid transparent; font-weight: 400;
}
.tb-status .bi { width: 1.05rem; height: 1.05rem; }
.tb-status .save-status:empty { display: none; }
.tb-status .net-status.off { background: var(--ok-soft); color: var(--ok); }
.tb-status .engine-status.offline { background: var(--danger-soft); color: var(--danger); }
.tb-status .save-status.error { font-size: var(--fs-small); width: auto; padding: 0 .75rem; border-radius: 999px; gap: .35rem; }
.tb-status .mem-status .mem-label, .tb-status .ai-activity-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tb-status .mem-pop, .tb-status .ai-activity-pop { left: 50%; right: auto; transform: translateX(-50%); }
.tb-right #btn-chat, .tb-right #btn-privacy { white-space: nowrap; }
.menu-wrap { position: relative; }
.menu-btn { width: 2.3rem; height: 2.3rem; border: 1px solid var(--border); color: var(--text); background: var(--surface); }
.menu-btn .bi { width: 1.3rem; height: 1.3rem; }
.menu-btn[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent); }
.app-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 45; min-width: 14rem; display: grid; padding: .25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.app-menu[hidden] { display: none; }
.menu-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .75rem; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: var(--fs-text); text-align: left; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); color: var(--accent); outline: none; }
.menu-item .bi { width: 1.05rem; height: 1.05rem; color: var(--muted); flex-shrink: 0; }
.menu-item:hover .bi { color: var(--accent); }
.app-menu .theme-toggle { width: 100%; height: auto; border-radius: var(--radius-sm); border: 0; background: none; }
@media (max-width: 1100px) { #btn-chat, #btn-privacy { font-size: 0; gap: 0; padding: .45em .6em; } #btn-chat .bi, #btn-privacy .bi { font-size: 1.05rem; } }
@media (max-width: 820px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .tb-status { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .topbar .vault-name { max-width: 10rem; }
  .tb-status .mem-status:not([hidden]), .tb-status .net-status:not([hidden]), .tb-status .engine-status:not([hidden]) { display: inline-flex; }
}

/* v1.14: Options (Display, Dev Tools) and Contact Dev. */
#cv-brightness { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; backdrop-filter: brightness(var(--cv-brightness, 1)); -webkit-backdrop-filter: brightness(var(--cv-brightness, 1)); }
#cv-brightness[hidden] { display: none; }
html.bright-adjusted dialog[open] { filter: brightness(var(--cv-brightness, 1)); }
.options-form { display: grid; gap: .8rem; }
.opt-head { display: flex; align-items: center; gap: .6rem; }
.opt-head h2 { margin: 0; }
.opt-tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border); }
.opt-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.opt-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.opt-panel { display: grid; gap: .8rem; }
.opt-panel h3 { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 0; }
.opt-row { display: grid; grid-template-columns: 7rem auto minmax(8rem, 1fr) auto 3.5rem auto; align-items: center; gap: .5rem; }
.opt-row input[type="range"] { width: 100%; padding: 0; accent-color: var(--accent); }
.opt-label { font-weight: 600; }
.opt-value { font-variant-numeric: tabular-nums; text-align: right; }

.dev-col { display: grid; gap: .45rem; align-content: start; min-width: 0; }

.dev-src, .dev-out { min-height: 14rem; resize: vertical; font-family: var(--font); font-size: var(--fs-small); }
.dev-actions, .dev-save { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dev-save input[type="text"] { width: 16rem; }
.dev-save select { width: auto; }
.dev-report { min-height: 1.2rem; }
.contact-form { display: grid; gap: .8rem; }
.contact-form h2 { margin: 0; }
.contact-where summary { cursor: pointer; color: var(--muted); font-size: var(--fs-text); margin-bottom: .5rem; }
@media (max-width: 820px) { .dev-cols { grid-template-columns: 1fr; } .opt-row { grid-template-columns: 1fr auto auto; } .opt-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; } }

/* v1.14: case list: [bell] [status] title, then File · Case · Client. */
.case-item .case-item-top { justify-content: flex-start; gap: .45rem; }
.case-item .case-item-title { flex: 1; min-width: 0; }
.case-bell { display: inline-flex; color: var(--danger); flex-shrink: 0; animation: cv-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
.case-bell .bi { width: .95rem; height: .95rem; }
@keyframes cv-ring { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(14deg); } 93% { transform: rotate(-12deg); } 97% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .case-bell { animation: none; } }
.case-item .case-item-meta { padding-left: 2rem; }

/* v1.14: folder list: name, count, then the icon on the right; sub-folders fold away. */
.folder-item { grid-template-columns: minmax(0, 1fr) auto 1.4rem; }
.folder-item .folder-icon { justify-self: end; }
.folder-parent-row { display: flex; align-items: center; gap: .1rem; }
.folder-parent-row .folder-item { flex: 1; min-width: 0; }
.folder-toggle { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; flex-shrink: 0; }
.folder-toggle:hover { background: var(--surface-2); color: var(--text); }
.folder-toggle .bi { width: .8rem; height: .8rem; }
.folder-children[hidden] { display: none; }
.folder-item.child { padding-left: 1.5rem; }
@media (max-width: 820px) { .folder-item { grid-template-columns: auto auto auto; } }

/* v1.14: suspects on the Details tab (same card as Contacts). */
.suspect-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 10.5rem 3.5rem minmax(0, 1.7fr) 8.5rem 2.1rem; gap: .5rem .8rem; align-items: end; padding: .5rem 0; border-top: 1px solid var(--border); }
.suspect-rows > .suspect-row:first-child { border-top: 0; }
.suspect-row .field { margin: 0; min-width: 0; }
.suspect-row input, .suspect-row select { width: 100%; }
.suspect-age { display: flex; align-items: center; min-height: 2.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .suspect-row { grid-template-columns: 1fr 1fr; } .suspect-row .contact-remove { justify-self: end; grid-column: 2; } }

/* v1.15: one scrollbar. The page itself never scrolls; the main area (and the case list) do. */
html, body { overflow: hidden; }
.main { overflow-x: hidden; }

/* v1.15: date boxes (js/formats.js): type MM.DD.YYYY or pick from the calendar. */
.date-field, .field > span.date-field { position: relative; display: flex; align-items: stretch; min-width: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.date-field .date-text { flex: 1; min-width: 0; width: 100%; padding-right: 2.5rem; font-variant-numeric: tabular-nums; }
.date-field .date-btn { position: absolute; right: .15rem; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; }

.details-save { display: flex; justify-content: flex-end; margin-top: 1.2rem; }

/* v1.15: case list: [bell] [Open] Title, then "100 | JH123456 | State"; adjustable width. */
.sidebar { width: var(--sidebar-w, 300px); position: relative; }
body.sidebar-collapsed .sidebar { width: 2.9rem; }
.sidebar-resizer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 5; touch-action: none; }
.sidebar-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background-color .15s; }
.sidebar-resizer:hover::after, .sidebar-resizer:focus-visible::after, body.resizing-sidebar .sidebar-resizer::after { background: var(--accent); }
.sidebar-resizer:focus-visible { outline: none; }
body.sidebar-collapsed .sidebar-resizer { display: none; }
body.resizing-sidebar { cursor: col-resize; user-select: none; }
.case-status { flex-shrink: 0; font-size: var(--fs-tiny); font-weight: 600; line-height: 1; padding: .28em .55em; border-radius: 999px; text-transform: none; }
.case-item .case-item-meta { padding-left: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .sidebar { width: auto; } .sidebar-resizer { display: none; } }

/* v1.15: square buttons on the right of the header, and square status icons in the middle. */
.tb-square { width: 2.3rem; height: 2.3rem; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--surface); }
.tb-square:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-soft); }
.tb-square .bi { width: 1.15rem; height: 1.15rem; }
#btn-chat.tb-square, #btn-chat.tb-square:hover { color: var(--accent); }
#btn-chat[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
.tb-right { gap: .45rem; }
.tb-status .net-status, .tb-status .engine-status, .tb-status .mem-status, .tb-status .save-status { width: 2.3rem; height: 2.3rem; border-radius: var(--radius-sm); }
.tb-status .save-status.error { border-radius: var(--radius-sm); }
/* The AI's robot: blue when it's running, red when it isn't, grey while looking. */
.tb-status .engine-status.connected { background: var(--accent-soft); color: var(--accent); }
.tb-status .engine-status.checking, .tb-status .engine-status.rules-only { background: var(--surface-2); color: var(--muted); }
@media (max-width: 1100px) { #btn-chat.tb-square, #btn-privacy.tb-square { font-size: inherit; padding: 0; } }
.template-actions, .links-save { margin-top: 1rem; gap: .5rem; flex-wrap: wrap; }

/* v1.15: Quick links at the bottom of the Overview as a slim strip, not a third of the page. */

/* v1.15: "Add another AI model" in the AI engine window. */
.more-models { margin: .8rem 0; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem; background: var(--surface); }
.more-models summary { cursor: pointer; font-weight: 600; }
.models-table { width: 100%; border-collapse: collapse; margin: .5rem 0; }
.models-table th, .models-table td { text-align: left; padding: .25rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.models-table code { font-size: var(--fs-small); word-break: break-all; }

/* v1.16 */
/* The selected case: grey only, no blue bar. */
.case-item.active, .case-item.active:hover { box-shadow: none; border-color: transparent; background: var(--surface-2); }
.case-bell { margin-left: auto; }
/* The Vault's sections scroll inside their own box. */
.vault-content { position: relative; }
/* The X at the top right of every box. */
.dialog > .dialog-x { position: absolute; top: .55rem; right: .55rem; z-index: 3; width: 2rem; height: 2rem; }
.dialog > .dialog-x:hover { background: var(--danger-soft); color: var(--danger); }
.dialog > .vault-panel-head, .opt-head, .preview-head { padding-right: 0; }
.dialog > form > h2:first-child, .dialog > div > h2:first-child { padding-right: 2.25rem; }
/* Header: blue chat bubble for Ask AI; the memory bars move. */
#btn-chat.tb-square .bi { color: var(--accent); }
.tb-status .mem-icon i { transform-origin: bottom; animation: cv-bars 1.4s ease-in-out infinite; }
.tb-status .mem-icon i:nth-child(2) { animation-delay: .2s; }
.tb-status .mem-icon i:nth-child(3) { animation-delay: .4s; }
@keyframes cv-bars { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .tb-status .mem-icon i { animation: none; } }

/* v1.17: Reports (notes + drafts). */
.notes-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.notes-head h2 { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: var(--fs-section); }

.notes-editor, .draft-editor, .notes-editor:focus { tab-size: 4; -moz-tab-size: 4; }

/* v1.18: the memory indicator is a green moving wave (amber or red when memory runs short). */
.tb-status .mem-status:not(.warn):not(.high) { color: var(--ok); background: var(--ok-soft); }
.tb-status .mem-icon { gap: 2px; height: 1rem; align-items: center; }
.tb-status .mem-icon i { width: 2.5px; height: 100%; border-radius: 2px; opacity: 1; animation: cv-wave 1.1s ease-in-out infinite; transform-origin: center; }
.tb-status .mem-icon i:nth-child(1) { animation-delay: 0s; } .tb-status .mem-icon i:nth-child(2) { animation-delay: .15s; }
.tb-status .mem-icon i:nth-child(3) { animation-delay: .3s; } .tb-status .mem-icon i:nth-child(4) { animation-delay: .45s; }
.tb-status .mem-icon i:nth-child(5) { animation-delay: .6s; }
@keyframes cv-wave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .tb-status .mem-icon i { animation: none; transform: scaleY(.7); } }

/* v1.18: Location Codes and Common UCR: every card the same size, codes the same width, labels
 * wrapped inside the card (never past its edge). */
.code-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 1fr; gap: .55rem; }
.code-grid > li { display: flex; min-width: 0; }
.code-card { height: 100%; min-height: 3.6rem; grid-template-columns: 3.4rem minmax(0, 1fr) 1rem; }
.code-card-code { text-align: center; min-width: 3.4rem; }
.code-card-desc { min-width: 0; overflow-wrap: anywhere; line-height: 1.3; font-size: var(--fs-small); }
/* The Vault's save buttons are all the same size. */
.btn.vault-save { min-width: 10.5rem; min-height: 2.4rem; justify-content: center; }
.vault-save-row { margin-top: 1rem; }

/* v1.18: Reports: start dropdown, Re-phrase and Review windows, template buttons. */
.start-box { display: grid; gap: .45rem; max-width: 34rem; }
.start-box select { width: 100%; }
.rephrase-form, .review-report { display: grid; gap: .7rem; min-width: min(46rem, calc(85vw / var(--z, 1))); }
.rephrase-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rephrase-cols h3 { margin: 0 0 .35rem; font-size: var(--fs-text); }
.rephrase-in, .rephrase-out { min-height: 8rem; max-height: calc(50vh / var(--z, 1)); overflow: auto; white-space: pre-wrap; padding: .75rem .75rem; }
.review-math p { margin: .2rem 0; }
.review-math.warn { color: var(--warn); }
.review-math.ok { color: var(--ok); }
.review-ai { max-height: calc(45vh / var(--z, 1)); overflow: auto; padding: .75rem .75rem; }
.template-btns { display: inline-flex; flex-wrap: wrap; gap: .15rem; }
@media (max-width: 820px) { .rephrase-cols { grid-template-columns: 1fr; } }

/* v1.18: Report Fields. */
.rf-section { margin-top: 1.2rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.rf-section h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; }
.rf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: .7rem 1rem; }
.rf-grid .field { margin: 0; min-width: 0; }
.rf-grid .span-all { grid-column: 1 / -1; }
.rf-evidence input, .rf-evidence select { width: 100%; }
.rf-evidence .rf-exhibit { font-family: var(--mono); font-weight: 700; color: var(--accent); width: 5rem; }
.rf-narrative { width: 100%; min-height: 14rem; tab-size: 4; }
/* v1.18: Ask AI history. */
.chat-history-form { display: grid; gap: .6rem; min-width: min(34rem, calc(85vw / var(--z, 1))); }
.chat-history-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; }
.chat-history-open { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; }
/* The report's Export menu opens to the right of its button, never under the case list. */
.draft-toolbar .menu .menu-items { left: 0; right: auto; z-index: 30; }

/* ---------- v1.19: formatted editing (js/rich-editor.js) ---------- */
.rich-editor {
  display: block; position: relative; width: 100%; box-sizing: border-box;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  white-space: pre-wrap; overflow-wrap: break-word; tab-size: 4; -moz-tab-size: 4;
  overflow-y: auto; max-height: calc(78vh / var(--z, 1)); cursor: text;
  transition: border-color .15s, box-shadow .15s;
}
.rich-editor[hidden] { display: none; }
.rich-editor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); }
.rich-editor[contenteditable="false"] { background: var(--surface-2); cursor: default; }
.rich-editor.empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; position: absolute; }
.rich-editor > :first-child { margin-top: 0; }
.rich-editor p { margin: 0 0 .7em; }
.rich-editor h2, .rich-editor h3, .rich-editor h4 { margin: .9em 0 .4em; line-height: 1.3; }
.rich-editor ul, .rich-editor ol { margin: 0 0 .7em; padding-left: 1.6em; white-space: normal; }
.rich-editor li { white-space: pre-wrap; }
.rich-editor blockquote { border-left: 3px solid var(--border); margin: .5em 0; padding-left: 1em; color: var(--muted); }
.rich-editor pre { background: var(--surface-2); padding: .75rem; border-radius: 6px; overflow-x: auto; }
.rich-editor .md-table-wrap, .rich-editor table { white-space: normal; }
.rich-editor .md-table td, .rich-editor .md-table th { min-width: 4rem; }
.rich-editor mark.confirm-mark { background: #fff3a3; color: #3a3000; border-radius: 2px; padding: 0 .1em; }
.rf-narrative-rich { min-height: 14rem; padding: .75rem 1rem; font: 15px/1.6 var(--font); }

/* v1.42: Field Notes single spaced: no space between paragraphs, lines 1.2 high. */

.edit-mode .btn { min-width: 5.5rem; }
.fmt-bar .edit-mode { margin-right: .1rem; }
.fmt-bar { flex-wrap: wrap; max-width: 100%; }

/* ---------- v1.20: Report Fields as the Supplementary Report ---------- */
.rf-page { --font-doc: var(--font); }
.rf-section, .rf-actions { font-family: "Segoe UI", Calibri, system-ui, Arial, sans-serif; }
.rf-section .field > span, .rf-section label.field > span:first-child { font-size: var(--fs-small); font-weight: 600; letter-spacing: .01em; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.rf-section input, .rf-section select, .rf-section textarea { font-family: "Segoe UI", Calibri, system-ui, Arial, sans-serif; font-size: var(--fs-text); }
.rf-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .2rem; }
.rf-lines { display: grid; gap: .45rem; }
.rf-lines > .field { display: grid; grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr); align-items: center; gap: .9rem; margin: 0; }
.rf-lines > .field > span { text-transform: uppercase; font-size: var(--fs-tiny); }
@media (max-width: 700px) { .rf-lines > .field { grid-template-columns: 1fr; gap: .2rem; } }
.rf-update .rf-grid { grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr)); }
.rf-check { align-self: center; min-height: 2.2rem; }
.rf-exhibits { display: grid; gap: .7rem; margin-bottom: .6rem; }
.rf-exhibit-card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.rf-exhibit-no { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; min-height: 4.5rem; border-radius: var(--radius-sm); background: var(--accent-soft); text-align: center; }
.rf-exhibit-no .rf-exhibit { font-size: 1.7rem; line-height: 1; color: var(--accent); font-family: "Segoe UI", Calibri, Arial, sans-serif; }
.rf-exhibit-body { display: grid; gap: .6rem; min-width: 0; }
.rf-exhibit-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: .6rem; }
.rf-exhibit-row .field, .rf-exhibit-body .field { margin: 0; min-width: 0; }
.rf-narc { display: contents; }
.rf-narc[hidden] { display: none; }
.rf-exhibit-card textarea { width: 100%; min-height: 5rem; resize: vertical; }
@media (max-width: 600px) { .rf-exhibit-card { grid-template-columns: 1fr; } .rf-exhibit-no { flex-direction: row; min-height: 0; padding: .5rem; } }
.rf-narrative-rich { min-height: 34rem; max-height: none; font: 16px/1.7 Cambria, Georgia, "Times New Roman", serif; padding: 1rem 1.25rem; }
.rf-narrative { min-height: 34rem; font: 15px/1.6 var(--font); }
.pdf-view { display: flex; flex-direction: column; gap: .5rem; height: 100%; min-height: 0; }
.pdf-view h2, .pdf-view p { margin: 0; }
.pdf-view .preview-frame { flex: 1; width: 100%; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }

/* ---------- v1.20: polish ---------- */
.case-item-flags { display: inline-flex; align-items: center; gap: .35rem; flex-shrink: 0; margin-left: auto; }
.case-item-flags .case-bell { margin-left: 0; }

/* The X that closes a box: a square button, like the header's, in the header row next to Done. */
.dialog-x { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); }
.dialog-x .bi { width: 1rem; height: 1rem; }
.dialog-x.in-head { width: 2.4rem; height: 2.4rem; margin-left: .15rem; }
.dialog > .dialog-x { top: .75rem; right: .75rem; width: 2.1rem; height: 2.1rem; }
.dialog-x:hover, .dialog-x:focus-visible { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

/* ---------- v1.21: Report Fields lists, include boxes, photos; symmetric columns ---------- */
.rf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rf-grid.rf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rf-grid, .rf-grid.rf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rf-grid, .rf-grid.rf-grid-4 { grid-template-columns: 1fr; } }
/* Submission and Approval: one row per officer - Name | Star | Date | Time (v1.23). */
.rf-grid.rf-grid-officers { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
@media (max-width: 600px) { .rf-grid.rf-grid-officers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rf-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.rf-head h3 { margin: 0; }
.rf-include { display: inline-flex; align-items: center; cursor: pointer; }
.rf-include input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent); cursor: pointer; }
.rf-section.rf-off { opacity: .6; padding-bottom: .75rem; }
.rf-section.rf-off .rf-head { margin-bottom: 0; }
.rf-section.rf-off h3::after { content: "Not in the report"; margin-left: .6rem; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.rf-body[hidden] { display: none; }
.rf-list { margin-top: 1.1rem; }
.rf-list h4 { margin: 0 0 .5rem; font-size: var(--fs-text); }
.rf-items { display: grid; gap: .6rem; }
.rf-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: .75rem .75rem; }
.rf-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.rf-item-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem .8rem; }
.rf-item-grid .field { margin: 0; min-width: 0; }
.rf-item-grid .rf-wide { grid-column: 1 / -1; }
@media (max-width: 1000px) { .rf-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .rf-item-grid { grid-template-columns: 1fr; } }
.rf-none { margin: 0; }
.rf-photo-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.rf-photos { display: flex; flex-wrap: wrap; gap: .6rem; }
.rf-photo { position: relative; width: 112px; height: 112px; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.rf-photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.rf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-photo-x { position: absolute; top: 4px; right: 4px; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; }
.rf-photo-x:hover { color: var(--danger); border-color: var(--danger); }
.rf-photo-x .bi { width: .7rem; height: .7rem; }

/* v1.21: icons on the right of the words, also where the icon comes first in the markup. */
:where(button, a, h1, h2, h3, h4, h5, summary, label, .menu-item, .tab, .pill, .tb-status) > svg.bi:not(:only-child) { order: 99; }
/* Reference, OSINT and LEO: three equal buttons. */
.ql-tabs .btn { width: 7.5rem; min-width: 7.5rem; justify-content: center; }

/* v1.21: the case tabs are a straight strip across the page, no rounded ends. */
.tabs { width: 100%; border-radius: 0; border: 0; border-bottom: 1px solid var(--border); box-shadow: none; padding: 0; background: transparent; gap: 0; }
.tab { flex: 1 1 0; min-width: 0; justify-content: center; border-radius: 0; border-bottom: 3px solid transparent; padding: .75rem .5rem .5rem; margin-bottom: -1px; }
.tab:hover { background: var(--accent-soft); }
.tab.active, .tab.active:hover { color: var(--accent); background: transparent; border-bottom: 3px solid var(--accent); font-weight: 600; }
@media (max-width: 620px) { .tabs { border-radius: 0; } }
/* v1.24: the case tabs always fit: no scroll bar (or its arrow buttons) and no icons; at phone width they wrap. */
.tabs { overflow: visible; flex-wrap: wrap; scrollbar-width: none; }
.tab .icon, .tab svg { display: none; }

 .decon-table th:nth-child(3) { width: 9.5rem; } .decon-table th:nth-child(4) { width: 9rem; } .decon-table th:nth-child(5) { width: 5.5rem; } .decon-table th:nth-child(6) { width: 18%; } .decon-table th:nth-child(7) { width: 2.6rem; }

.deconfliction .table-wrap { overflow-x: auto; }
@media (max-width: 800px) { .decon-table { table-layout: auto; min-width: 760px; } }

/* ---------- v1.21: the landing page's welcome banner ---------- */
.hero { position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.4rem; padding: 1.5rem 1.75rem; border-radius: var(--radius); color: #fff;
  background: radial-gradient(120% 140% at 100% 0%, rgba(99, 179, 255, .45) 0%, transparent 55%), linear-gradient(135deg, #0b3d91 0%, #0d6efd 55%, #3d8bfd 100%); box-shadow: var(--shadow-lg); }
.hero-text { position: relative; z-index: 1; min-width: 0; }
.hero-date { font-size: var(--fs-text); opacity: .85; letter-spacing: .02em; }
.hero-title { margin: .15rem 0 .25rem; font-size: clamp(1.5rem, 2.calc(6vw / var(--z, 1)), 2.2rem); line-height: 1.15; color: #fff; }
.hero-clock { position: relative; z-index: 1; font-size: clamp(1.8rem, 3.calc(6vw / var(--z, 1)), 3rem); font-weight: 600; letter-spacing: .02em; line-height: 1; opacity: .95; font-variant-numeric: tabular-nums; }
.hero .btn .bi { color: inherit; }
.hero-art { position: absolute; right: -40px; bottom: -60px; width: 300px; height: 300px; pointer-events: none; }
.hero-side { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.1rem; align-self: center; }
.hero-vault { flex: none; width: 64px; height: 64px; color: rgba(255, 255, 255, .85); fill: none; stroke: currentColor; stroke-width: 3; }
.hero-vault .hv-frame { stroke-width: 2.5; }
.hero-vault .hv-hinge, .hero-vault .hv-bolt { stroke: none; fill: currentColor; }
.hero-vault .hv-ring { stroke-width: 1.5; stroke-dasharray: 3 5; }
.hero-vault .hv-hub { fill: currentColor; }
.hero-vault .hv-wheel { stroke-width: 4; stroke-linecap: square; transform-origin: 60px 60px; animation: cv-vault-turn 8s ease-in-out infinite; }
.hero-vault .hv-ring { transform-origin: 60px 60px; animation: cv-vault-dial 8s ease-in-out infinite; }
@keyframes cv-vault-turn { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(90deg); } }
@keyframes cv-vault-dial { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(-45deg); } }
.hero-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .14); right: 0; bottom: 0; animation: cv-hero-pulse 6s ease-in-out infinite; }
.hero-ring.r1 { width: 300px; height: 300px; } .hero-ring.r2 { width: 220px; height: 220px; right: 40px; bottom: 40px; animation-delay: -2s; } .hero-ring.r3 { width: 140px; height: 140px; right: 80px; bottom: 80px; animation-delay: -4s; }
@keyframes cv-hero-pulse { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .hero-ring, .hero-vault .hv-wheel, .hero-vault .hv-ring { animation: none; } }
@media (max-width: 700px) { .hero { flex-direction: column-reverse; padding: 1.25rem; } .hero-clock { font-size: 1.6rem; } .hero-side { align-self: flex-start; } .hero-vault { width: 44px; height: 44px; } }
.stats .stat { transition: transform .15s, box-shadow .15s; }
.stats .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* ---------- v1.22: searchable lists, optional lines, photo labels ---------- */
.combo { position: relative; display: flex; align-items: stretch; min-width: 0; }
.combo > input { flex: 1; min-width: 0; padding-right: 2rem; }
.combo-toggle { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface-2); color: var(--muted); cursor: pointer; }
.combo-toggle:hover { color: var(--accent); }
.combo-toggle .bi { width: .8rem; height: .8rem; }
.combo-list { position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; right: 0; min-width: min(26rem, calc(90vw / var(--z, 1))); max-height: 17rem; overflow-y: auto; margin: 0; padding: .25rem 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.combo-list[hidden] { display: none; }
.combo-opt { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .5rem .75rem; cursor: pointer; font-size: var(--fs-text); }
.combo-opt:hover, .combo-opt.active { background: var(--accent-soft); }
.combo-hint { flex-shrink: 0; font-size: var(--fs-tiny); color: var(--muted); }
.rf-optional { position: relative; }
.rf-lines > .rf-optional { grid-template-columns: 1.2rem minmax(10rem, 16rem) minmax(0, 1fr); }
.rf-lines > .field:not(.rf-optional) { padding-left: 2rem; }
.rf-optional > input[type=checkbox] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); }
.rf-line-off > span, .rf-line-off > input:not([type=checkbox]), .rf-line-off > .combo { opacity: .45; }
.rf-auto { background: var(--surface-2); color: var(--muted); }
.rf-photo-tag { position: absolute; left: 4px; top: 4px; z-index: 1; padding: .05rem .5rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: var(--fs-tiny); font-weight: 700; }
@media (max-width: 700px) { .rf-lines > .rf-optional { grid-template-columns: 1.2rem minmax(0, 1fr); } .rf-lines > .rf-optional > :last-child { grid-column: 1 / -1; } .rf-lines > .field:not(.rf-optional) { padding-left: 0; } }

/* ---------- v1.22: Ask AI box ---------- */
.chat-float .chat-options { grid-template-columns: 1fr; gap: .35rem; }
.chat-float .chat-options .field { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.chat-float .chat-options .field > span { font-size: var(--fs-tiny); }
.chat-float .chat-options select { font-size: var(--fs-small); padding: .25rem .5rem; text-overflow: ellipsis; }
.chat-input { font-size: var(--fs-small); line-height: 1.45; min-height: 4.6rem; max-height: 4.6rem; }
.chat-input::placeholder { font-size: var(--fs-small); }
.chat-foot { font-size: var(--fs-tiny); color: var(--danger); font-weight: 600; margin: .35rem 0 0; }
/* Vault menu: words on the left, icons lined up in one column on the right, in blue. */
.vault-nav-item { justify-content: space-between; }
.vault-nav-item > .bi { color: var(--accent); width: 1rem; height: 1rem; }
/* v1.22: tables keep their rounded corners: the grey header row no longer pokes out of them. */
table.files { border-collapse: separate; border-spacing: 0; }
table.files tr:last-child > td { border-bottom: 0; }
table.files thead th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
table.files thead th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }

/* v1.22: the role box is wide enough for "Secondary". */
/* v1.24: one line per suspect, the residence taking the room it needs for a full address. */
.suspect-row { grid-template-columns: minmax(7rem, .85fr) 9.2rem 2.4rem minmax(12rem, 3.2fr) 6.6rem 1.9rem; gap: .5rem .55rem; }
.suspect-row .suspect-age { text-align: center; }
@media (max-width: 900px) { .suspect-row { grid-template-columns: 1fr 1fr; } }
/* One grid for every Officer's Report line: tick box | label | entry, so all entries line up. */
.rf-lines > .field, .rf-lines > .rf-optional { grid-template-columns: 1.2rem minmax(10rem, 16rem) minmax(0, 1fr); padding-left: 0; }
.rf-lines > .field:not(.rf-optional) > :first-child { grid-column: 2; }
@media (max-width: 700px) { .rf-lines > .field, .rf-lines > .rf-optional { grid-template-columns: 1.2rem minmax(0, 1fr); } .rf-lines > .field > :last-child { grid-column: 1 / -1; } .rf-lines > .field:not(.rf-optional) > :first-child { grid-column: 1 / -1; } }
.rf-lines > .field, .rf-lines > .rf-optional { grid-template-columns: 1.2rem 15rem minmax(0, 1fr); }
@media (max-width: 700px) { .rf-lines > .field, .rf-lines > .rf-optional { grid-template-columns: 1.2rem minmax(0, 1fr); } }
.rf-lines > .field:not(.rf-optional) { padding-left: 0; }

/* v1.24: the floating Field Notes button (bottom right) and its box, built like Ask AI. */
.notes-fab { position: fixed; z-index: 41; right: 1.2rem; bottom: 1.2rem; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: var(--shadow-lg); cursor: pointer; font-size: var(--fs-section); }
.notes-fab:hover { filter: brightness(1.08); }
.notes-fab:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.notes-fab[aria-expanded="true"] { background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
body.gated .notes-fab, body.gated .notes-float { display: none; }
.chat-float { bottom: 5.2rem; }
.notes-float { bottom: 5.2rem; width: min(34rem, calc(calc(100vw / var(--z, 1)) - 2rem)); }
body.chat-open .notes-float:not(.big):not([style*="left"]) { right: min(32.5rem, calc(calc(100vw / var(--z, 1)) - 22rem)); }
body.notes-open .toasts { right: auto; left: 1rem; }
.notes-float-top { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 0 .5rem; }
.notes-float-top .field { margin: 0; }
.notes-float-top select { width: 100%; }
.notes-float-edit { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .4rem; }
.notes-float-edit[hidden] { display: none; }
.notes-float-edit .rich-editor, .notes-float-editor { flex: 1; min-height: 6rem; overflow-y: auto; resize: none; width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem; font: 14px/1.2 var(--font); background: var(--surface); }
.notes-float-edit .format-bar { flex-wrap: wrap; }
.notes-float-foot { display: flex; align-items: center; gap: .5rem; padding-top: .5rem; }
.notes-float-empty { margin: auto; text-align: center; }
@media (max-width: 640px) { .notes-fab { right: .8rem; bottom: .8rem; } .chat-float, .notes-float { bottom: 4.6rem; } }
/* v1.24: Vault facts have their icon on the right, like the rest of the app. */
.fact .fact-icon { order: 2; margin-left: auto; }
.fact > span:not(.fact-icon) { min-width: 0; }

/* ---------------- v1.25 ---------------- */
/* Date and time boxes: the calendar / clock button sits beside the text inside one border (not over
   it), so no browser clips it; same font and weight as every other box. */
.date-field, .field > span.date-field, .time-field, .field > span.time-field {
  align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font: inherit; font-size: var(--fs-text); font-weight: 400; color: var(--text); letter-spacing: normal; transition: border-color .15s, box-shadow .15s;
}
.date-field:focus-within, .time-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); }
.date-field .date-text, .time-field .time-text { border: 0; box-shadow: none !important; background: transparent; padding-right: .25rem; font-weight: 400; color: var(--text); }
.date-field .date-text:focus, .time-field .time-text:focus { outline: none; }
.date-field .date-btn, .time-field .time-btn { position: static; transform: none; flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin: 0 .15rem 0 0; }

.rf-section .field > span.date-field, .rf-section .field > span.time-field { font-size: var(--fs-text); font-weight: 400; color: var(--text); letter-spacing: normal; }
.time-field .time-mode { flex: 0 0 auto; border: 0; background: var(--surface-2); color: var(--muted); font: 600 var(--fs-tiny)/1 var(--font); padding: .25rem .25rem; border-radius: .35rem; cursor: pointer; margin-left: .1rem; }
.time-field .time-mode:hover { color: var(--accent); background: var(--accent-soft); }
.time-field .time-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.date-field input:disabled, .date-field:has(input:disabled) { opacity: .6; }

/* Details suspects: name room for three names, a full address, DOB just wide enough, Role fits "Secondary". */
.suspect-row { grid-template-columns: minmax(12rem, 1.6fr) 7.8rem 2.2rem minmax(15rem, 2.4fr) 7.4rem 1.8rem; gap: .5rem .5rem; }

/* Buttons side by side (Add Offender, Add From Suspects…) get room between them. */
.contact-add { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Report Fields: fold button, feet/inches and pounds, ranges, narcotic lines. */
.rf-head { display: flex; align-items: center; gap: .6rem; }
.rf-head .rf-fold { margin-left: auto; }
.rf-section.rf-folded { padding-bottom: .5rem; }
/* v1.69: "Hidden on screen" sits beside the checkbox, in a column of its own, so every title lines up. */
.rf-head .rf-hidden-tag { flex: none; width: 8.2rem; font-size: var(--fs-tiny); font-weight: 400; color: var(--muted); visibility: hidden; white-space: nowrap; }
.rf-section.rf-folded .rf-head .rf-hidden-tag { visibility: visible; }
.rf-measure { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.rf-measure .rf-num { width: 3.6rem; flex: 0 1 3.6rem; min-width: 2.6rem; text-align: right; }
.rf-measure .rf-unit { font-size: var(--fs-small); color: var(--muted); }
.rf-range .rf-num { width: 3.2rem; flex-basis: 3.2rem; }
.rf-span2 { grid-column: span 2; }
.rf-unknown { margin-left: .8rem; font-weight: 400; }
.rf-item-unknown { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.rf-item-grid.rf-grid-narcotics { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.5fr); }
.rf-with-btn { display: flex; gap: .35rem; align-items: center; min-width: 0; }
.rf-with-btn input { flex: 1; min-width: 0; }
.rf-calc { flex: 0 0 auto; white-space: nowrap; }
.rf-lines > .rf-list.span-all { margin: .4rem 0 .2rem; }
@media (max-width: 900px) { .rf-item-grid.rf-grid-narcotics { grid-template-columns: 1fr 1fr; } .rf-span2 { grid-column: auto; } }

/* The report viewer (pdf.js): toolbar with zoom in percent, pages in their own scroll area. */
.pdf-view .pv { flex: 1; min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.pv-bar { display: flex; align-items: center; gap: .35rem; padding: .25rem .5rem; background: var(--surface-2); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.pv-pct { min-width: 3.4rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.pv-info { margin-right: .4rem; }
.pv-pages { flex: 1; min-height: 0; overflow: auto; background: var(--muted); padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.pv-pages:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pv-page { background: #fff; box-shadow: var(--shadow-lg); flex: 0 0 auto; max-width: none; }
.pv-pages.pv-framed { padding: 0; background: #fff; }
.pv-frame { width: 100%; height: 100%; border: 0; flex: 1; }
.pv-print { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }
.suspect-row input, .suspect-row select, .suspect-row .date-field .date-text { font-size: var(--fs-text); }
.suspect-row input:not([type="checkbox"]) { padding-left: .5em; padding-right: .45em; }
/* Number boxes for feet, inches, pounds and ages: room for 3 digits, no spinner arrows eating it. */
.rf-measure .rf-num { width: 4rem; flex: 0 0 4rem; min-width: 3.2rem; -moz-appearance: textfield; appearance: textfield; text-align: center; padding-left: .3em; padding-right: .3em; }
.rf-measure .rf-num::-webkit-outer-spin-button, .rf-measure .rf-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rf-range .rf-num { width: 3.6rem; flex-basis: 3.6rem; }
.rf-item-head { display: flex; align-items: center; gap: .6rem; }
.rf-item-head > .icon-btn { margin-left: auto; }
.rf-item-unknown .date-field { opacity: .5; }
.rf-section .field > span.rf-with-btn, .rf-section .field > span.rf-measure { font-size: var(--fs-text); font-weight: 400; color: var(--text); letter-spacing: normal; }
.rf-section .field > span.rf-measure > .rf-unit { font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.rf-item-grid.rf-grid-narcotics { grid-template-columns: minmax(0, 1.8fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.9fr); }

/* ---------------- v1.26 ---------------- */
/* Ask AI and Field Notes: two square buttons side by side, bottom right. */
.fab-dock { position: fixed; z-index: 41; right: 1.2rem; bottom: 1.2rem; display: flex; gap: .5rem; }
.fab, .fab-dock .notes-fab { position: static; width: 3rem; height: 3rem; border-radius: .7rem; border: 0; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: var(--shadow-lg); cursor: pointer; font-size: var(--fs-section); padding: 0; }
.fab:hover { filter: brightness(1.08); }
.fab:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.fab[aria-expanded="true"] { background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
.fab svg { width: 1.3rem; height: 1.3rem; }
body.gated .fab-dock { display: none; }
@media (max-width: 640px) { .fab-dock { right: .8rem; bottom: .8rem; } }

/* Menu: labels on the left, icons in one straight column on the right. */
.app-menu .menu-item { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; width: 100%; text-align: left; }
.app-menu .menu-item > svg, .app-menu .menu-item > .bi { margin-left: auto; flex: 0 0 auto; }
#fab-dock #btn-chat { font-size: var(--fs-section); padding: 0; gap: 0; background: var(--accent); color: #fff; border: 0; }
#fab-dock #btn-chat[aria-expanded="true"] { background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
#fab-dock #btn-chat .bi, #fab-dock #btn-chat svg { color: inherit; font-size: inherit; }
/* Charges: a statute is longer than a UCR code, so it gets its own line above the wording (no clipping). */
.code-card.code-card-long { grid-template-columns: minmax(0, 1fr) 1rem; grid-template-areas: "code copy" "desc desc"; align-items: start; row-gap: .35rem; }
.code-card-long .code-card-code { grid-area: code; justify-self: start; text-align: left; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.code-card-long .code-card-desc { grid-area: desc; }
.code-card-long .code-card-copy { grid-area: copy; }

/* Operations in the case list (v1.26): the operation, then its case numbers. */
.op-item { list-style: none; }
.op-group { border-radius: var(--radius-sm); }
.op-head { display: flex; align-items: center; gap: .45rem; padding: .5rem .5rem; cursor: pointer; font-weight: 600; color: var(--text); border-radius: var(--radius-sm); list-style: none; }
.op-head::-webkit-details-marker { display: none; }
.op-head:hover { background: var(--accent-soft); }
.op-head svg { color: var(--accent); flex: 0 0 auto; }
.op-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-count { font-size: var(--fs-tiny); font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: .05rem .5rem; }
.op-head .bi[data-icon="bell-fill"], .op-head svg[data-icon="bell-fill"] { color: var(--danger); }
.op-cases { list-style: none; margin: 0 0 .3rem .7rem; padding: 0 0 0 .5rem; border-left: 2px solid var(--accent-soft); }
.op-group:not([open]) .op-head { opacity: .9; }
/* Details: the operation's case numbers. */
.op-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: -.3rem; }
.op-chips { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.op-chip { font-size: var(--fs-small); font-weight: 600; padding: .25rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--accent); border: 1px solid var(--border); text-decoration: none; }
.op-chip.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.op-note:empty { display: none; }
/* LEO partners. */
.partner-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.partner-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.partner-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.partner-chip .check-row { padding: 0; margin: 0; font-weight: 600; }

.partner-edit { width: 1.7rem; height: 1.7rem; }
.partner-form { width: min(30rem, 100%); }
/* Mail signature box. */
.mail-signature textarea { font-family: var(--font); }

/* ---------------- v1.27 ---------------- */
/* Room at the bottom of every page, so the Ask AI and Notes buttons never cover a Save button. */
.main { padding-bottom: 7rem; }
/* Report Fields: no decorative icons (v1.27). Icon-only buttons (delete, fold, calendar) stay. */
.rf-head-bar svg, .rf-actions .btn svg, .rf-section h3 > svg, .rf-section h4 > svg, .rf-section .btn svg, .rf-bottom .btn svg { display: none; }
.rf-item-state .rf-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Local AI box: four short lines (v1.27). */
.mem-pop { min-width: 12rem; }
.mem-rows { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; white-space: normal; }
.mem-k { color: var(--muted); font-weight: 600; }
.mem-v { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* Files: a File column for the kind (.docx, .pdf) (v1.27). */
.files-table-wrap col.col-ext { width: 4.6rem; }
.files .fext { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .files-table-wrap col.col-ext { width: 0; } .files .fext, .files .fext-head { display: none; } }
/* Details (v1.27): the operation at the top, its case numbers as folders, then this case, then
   the shared Case Overview below a line. */
.op-card { margin-bottom: 1.2rem; }
.op-top { margin-bottom: .6rem; }
.case-tiles { display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 .4rem; }
.case-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-width: 6.8rem; padding: .5rem .75rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; font: inherit; cursor: pointer; }
.case-tile svg { font-size: 1.6rem; width: 1.6rem; height: 1.6rem; color: var(--accent); }
.case-tile-num { font-weight: 700; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.case-tile-status { font-size: var(--fs-tiny); color: var(--muted); }
.case-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.case-tile.current { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); cursor: default; }
.case-tile.status-closed svg { color: var(--muted); }
.case-tile.add { border-style: dashed; color: var(--muted); }
.case-tile.add svg { color: var(--muted); }
.overview-sep { border: 0; border-top: 2px solid var(--border); margin: 2rem 0 1rem; }
.overview-head h2 { margin: 0 0 .2rem; }
.overview-head p { margin: 0 0 .8rem; }
/* Timeline: which case number an event belongs to. */
.tl-case { font-size: var(--fs-tiny); font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.tl-case.current { color: var(--accent); border-color: var(--accent); }
.tl-op-note { margin: 0 0 .6rem; }
.case-tile > svg.bi, .case-tile > svg { order: -1; margin: 0; }
.case-tiles .case-tile > svg.bi:not(:only-child) { order: -1; }

/* v1.28: the memory hover box is a black box like every other hover box, four short lines. */
.mem-pop, .tb-status .mem-pop { min-width: 0; max-width: none; width: max-content; padding: .5rem .75rem; border: 0; border-radius: .55rem; background: var(--text); color: var(--surface); box-shadow: var(--shadow-lg); font-size: var(--fs-small); line-height: 1.45; white-space: nowrap; }
.mem-rows { display: flex; flex-direction: column; gap: .05rem; }
.mem-rows .mem-k { color: inherit; font-weight: 600; }
.mem-rows .mem-v { color: inherit; opacity: .9; }
.mem-status.can-free { cursor: pointer; }

/* v1.28: the case list. New Case lives on the Overview; numbers aren't bold; the deadline bell
   sits right after the title (or the operation's name). */
#btn-new-case[hidden] { display: none !important; }
.sidebar-tools { border-bottom: 0; padding: .5rem .75rem .25rem; }
.sidebar-tools .search-wrap input { border-radius: 999px; background: var(--surface-2); border-color: transparent; }
.sidebar-tools .search-wrap input:focus { background: var(--surface); border-color: var(--accent); }
.case-list { padding: .25rem .5rem .75rem; }
.case-list > li + li { margin-top: .3rem; }
.case-item { border: 1px solid var(--border); background: var(--surface); border-radius: .7rem; padding: .5rem .75rem; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.case-item:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow-lg); background: var(--surface); }
.case-item.active, .case-item.active:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.case-item .case-item-top { gap: .4rem; }
.case-item .case-item-title { flex: 0 1 auto; }
.case-item-title.is-number { font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.case-item-top > .case-bell { margin-left: 0; }
.case-item-top > .case-item-flags { margin-left: auto; }
.case-item .case-item-meta { margin-top: .15rem; font-size: var(--fs-tiny); letter-spacing: .01em; }
.op-group { border: 1px solid var(--border); border-radius: .7rem; background: var(--surface); overflow: hidden; }
.op-head { padding: .5rem .5rem; gap: .5rem; border-radius: 0; }
.op-head:hover { background: var(--surface-2); }
.op-head > .op-folder { order: -1; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: .45rem; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.op-head > .op-folder svg { width: .95rem; height: .95rem; }
.op-head > .op-name { flex: 0 1 auto; }
.op-head > .case-bell { margin-left: 0; }
.op-head > .op-count { margin-left: auto; }
.op-cases { margin: 0; padding: .1rem .5rem .5rem 1rem; border-left: 0; position: relative; }
.op-cases::before { content: ""; position: absolute; left: 1.45rem; top: 0; bottom: .8rem; width: 2px; background: var(--accent-soft); border-radius: 2px; }
.op-cases .case-item { margin-left: .85rem; border-color: transparent; background: transparent; padding: .5rem .5rem; }
.op-cases .case-item:hover { background: var(--surface-2); box-shadow: none; }
.op-cases .case-item.active { background: var(--accent-soft); border-color: transparent; }
.op-cases > li + li { margin-top: .1rem; }

/* v1.28: Operations on the Overview: a blue folder per operation, its name under it. */
.op-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .75rem; }
.op-folder-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem .5rem .75rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer; font: inherit; text-align: center; transition: background-color .15s, border-color .15s; }
.op-folder-tile:hover { background: var(--surface); border-color: var(--border); }
.op-folder-tile.open { background: var(--accent-soft); border-color: var(--accent); }
.op-folder-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(button) > .op-folder-art { order: 0; }
.op-folder-art { position: relative; display: inline-grid; place-items: center; color: var(--accent); }
.op-folder-art > svg { width: 3.4rem; height: 3.4rem; }
.op-folder-count { position: absolute; right: -.35rem; bottom: .15rem; min-width: 1.35rem; padding: .05rem .25rem; border-radius: 999px; background: var(--surface); color: var(--accent); border: 1px solid var(--accent); font-size: var(--fs-tiny); font-weight: 700; line-height: 1.3; }
.op-folder-name { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; font-size: var(--fs-small); font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; }
.op-folder-name .case-bell .bi { width: .8rem; height: .8rem; }
.op-open { margin-top: .9rem; padding: 1rem 1rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.op-open-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.op-open-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; }
.op-case-card { border: 1px solid var(--border); border-radius: .7rem; padding: .75rem .75rem; background: var(--surface-2); }
.op-case-top { display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.op-case-top > svg.bi, .op-case-top > svg { order: -1; color: var(--accent); width: 1.3rem; height: 1.3rem; }
.op-case-top .op-case-num { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-case-top:hover .op-case-num { color: var(--accent); }
.op-case-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.op-case-links a { font-size: var(--fs-small); padding: .25rem .5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); text-decoration: none; }
.op-case-links a:hover { border-color: var(--accent); color: var(--accent); }
/* Charges quick link: Federal or State. */
.ql-choice-wrap { position: relative; }
.ql-choice-wrap > .quick-link { width: 100%; font: inherit; text-align: left; cursor: pointer; }
.ql-choices { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); display: grid; gap: .25rem; padding: .25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-lg); }
.ql-choices[hidden] { display: none; }
.ql-choice { padding: .5rem .75rem; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-weight: 400; }
.ql-choice:hover, .ql-choice:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.charges-scope { margin-bottom: .8rem; }
.charges-scope .btn { text-decoration: none; }

/* v1.28: Dev Tools → Document Anonymizer: the original on top, bigger; the result under it; every
   button the same size; no icons. Emergency Purge at the bottom. */
.dev-panel { display: grid; gap: .75rem; }
.dev-panel > h3 { margin: 0; }
.dev-panel .dev-src { min-height: 18rem; }
.dev-panel .dev-out { min-height: 12rem; }

.dev-actions, .dev-save { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; align-items: stretch; }
.dev-save { grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(8.5rem, 1fr)); }
.dev-panel .dev-btn, .dev-panel .dev-name { height: 2.4rem; min-height: 2.4rem; margin: 0; justify-content: center; }
.dev-panel .dev-name { width: 100%; }
.dev-panel .dev-btn svg { display: none; }
.purge-box { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; padding: .75rem 1rem; border: 1px solid var(--danger); border-radius: var(--radius); background: var(--danger-soft); }
.purge-box > div { flex: 1; }
.purge-box p { margin: .15rem 0 0; }
.purge-box .dev-btn { width: 11rem; }
@media (max-width: 820px) { .dev-save { grid-template-columns: 1fr 1fr; } .dev-save .dev-name { grid-column: 1 / -1; } .purge-box { flex-direction: column; align-items: stretch; } .purge-box .dev-btn { width: 100%; } }
.dev-panel .dev-save .dev-name { width: 100%; }

/* v1.29 */
/* Case search: a rectangle with slightly rounded corners. */
.sidebar-tools .search-wrap input { border-radius: var(--radius-sm); }
/* Quick link tabs fit their words and icon (nothing cut off at any zoom or font). */
.ql-tabs .btn { width: auto; min-width: 7.5rem; padding: .25rem 1rem; white-space: nowrap; overflow: visible; }
.ql-tabs .btn svg { flex: 0 0 auto; }
/* Operation folders: a quieter blue. */
.op-folder-art { color: color-mix(in srgb, var(--accent) 52%, #8a94a6); }
.op-folder-tile.open .op-folder-art { color: color-mix(in srgb, var(--accent) 80%, #8a94a6); }
.op-case-top > svg.bi, .op-case-top > svg { color: color-mix(in srgb, var(--accent) 52%, #8a94a6); }
/* Words only; on hover the colour changes and they're underlined. */
.op-case-links { gap: 1.1rem; margin-top: .5rem; }
.op-case-links a.op-word, .op-open-head a.op-word { padding: 0; border: 0; background: none; border-radius: 0; font-size: var(--fs-small); color: var(--text); text-decoration: none; }
.op-case-links a.op-word:hover, .op-case-links a.op-word:focus-visible, .op-open-head a.op-word:hover, .op-open-head a.op-word:focus-visible { color: var(--accent); outline: none; }
.op-open-head a.op-word { margin-left: .6rem; font-weight: 400; }
/* Recently Updated: titles not bold. */

/* Dev Tools open-file button: room for its icon. */

/* Quick links: Arrange (v1.29). */
.ql-edit-wrap { display: flex; align-items: stretch; gap: .25rem; cursor: grab; }
.ql-edit-wrap > .quick-link { flex: 1; min-width: 0; }
.ql-edit-wrap.dragging { opacity: .5; }
.ql-edit-wrap.drop-target > .quick-link { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ql-move { flex: 0 0 auto; display: grid; place-items: center; width: 1.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); cursor: pointer; padding: 0; }
.ql-move:hover, .ql-move:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.ql-move svg { width: .85rem; height: .85rem; }
/* Files: the Document column fits "Subject Information", "Supplementary Report" (v1.29). */
.files-table-wrap col.col-type { width: 13rem; }
@media (max-width: 1100px) { .files-table-wrap col.col-type { width: 11rem; } }
@media (max-width: 900px) { .files-table-wrap col.col-type { width: 0; } }
/* Arrest charges: the statute and charge boxes suggest from the Reference (v1.29). */
.charges-table .combo { width: 100%; }
/* Explanations (v1.29): no ⓘ; the heading or label shows it when pointed at. */
.has-tip { cursor: help; }

/* v1.30: the Arrest details tab, laid out like the Arrest Report. */
.arrest-toolbar { flex-wrap: wrap; gap: .5rem; }
.arrest-section { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.arrest-section > h3 { margin: 0 0 .6rem; font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.arrest-offender { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 1rem; align-items: start; }
.arrest-photo { display: grid; gap: .5rem; }
.arrest-photo-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); }
.arrest-photo-pick { display: grid; gap: .4rem; }
.arrest-photo-pick select { width: 100%; }
.arrest-age { display: block; padding: .5rem .25rem; font-variant-numeric: tabular-nums; }
.arrest-list { display: grid; gap: .6rem; justify-items: start; }
.arrest-list > p { margin: 0; }
.arrest-item { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem .75rem; background: var(--surface-2); }
.arrest-item-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
@media (max-width: 820px) { .arrest-offender { grid-template-columns: 1fr; } .arrest-photo { max-width: 12rem; } }
/* The arrest card stays within the page; the charges table scrolls sideways on its own. */
.arrestees, .card.arrestee, .arrest-section { min-width: 0; max-width: 100%; }
.card.arrestee .table-scroll { max-width: 100%; overflow-x: auto; }
.card.arrestee .charges-table { width: 100%; }
.arrest-grid.arrest-numbers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 820px) { .arrest-grid.arrest-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v1.31: AI answers in the Review and Re-phrase windows in one font and size: the AI's headings,
   code marks and tables don't switch fonts. */
.review-ai, .review-ai *, .rephrase-out, .rephrase-out *, .review-math, .review-math * { font-family: var(--font, inherit) !important; }
.review-ai, .rephrase-out, .review-math { font-size: var(--fs-text); line-height: 1.55; }
.review-ai :is(h1, h2, h3, h4, h5, h6), .rephrase-out :is(h1, h2, h3, h4, h5, h6) { font-size: 1em; font-weight: 700; margin: .8em 0 .3em; letter-spacing: 0; text-transform: none; }
.review-ai :is(code, pre, kbd, samp), .rephrase-out :is(code, pre, kbd, samp) { font-size: 1em; background: none; padding: 0; white-space: pre-wrap; }
.review-ai :is(p, li, td, th), .rephrase-out :is(p, li, td, th) { font-size: 1em; }

/* v1.31: Reports: a heading with the New dropdown; the New Report window. */
.reports-head { display: flex; align-items: center; gap: .75rem; margin: .2rem 0 .6rem; }
.reports-head .section-title { margin: 0; }

.new-report-form { min-width: min(34rem, 90vw); }
.rf-photo-add svg { width: 1.05rem; height: 1.05rem; }

/* v1.31: one font everywhere (Consolas since v1.33): Report Fields, Dev Tools, templates,
   the Word preview, code marks and AI answers. (The PDF viewer's invisible text layer keeps the
   fonts pdf.js measured, so selecting text there still lines up.) */

body *:not(svg):not(svg *):not(.textLayer *):not(.xfaLayer *):not(.textLayer):not(.xfaLayer) { font-family: var(--font) !important; }

/* v1.32 */
/* Files: a long Document name wraps instead of being cut off. */
.files-table-wrap td.ftype { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
/* Sidebar: the operation's file number, original case and client under its name. */
.op-head > .op-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; gap: .05rem; }
.op-name-row { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.op-name-row .op-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-meta { font-size: var(--fs-tiny); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Landing: a section heading with a button on the right; the operation's Timeline. */
.section-head { display: flex; align-items: center; gap: .6rem; }
.section-head .section-title { margin-bottom: .5rem; }

.op-tl-date { font-variant-numeric: tabular-nums; color: var(--muted); }
.op-tl-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-case-top { gap: .6rem; }
@media (max-width: 700px) { .op-tl .row-link { grid-template-columns: 1fr; gap: .1rem; } }
.dev-drop { padding: .75rem 1rem; text-align: center; font-size: var(--fs-text); }
/* Operation case cards: the status word only, no folder icon (v1.32). */
.op-case-top .pill svg { display: none; }

/* v1.33: LEO Partners as agency badges. */
.partner-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .55rem; }
.partner-badge { position: relative; display: flex; align-items: center; gap: .3rem; padding: 0; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.partner-badge:hover { border-color: color-mix(in srgb, var(--agency) 55%, var(--border)); box-shadow: var(--shadow-lg); }
.partner-badge.on { border-color: var(--agency); background: color-mix(in srgb, var(--agency) 9%, var(--surface)); }
.partner-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; cursor: pointer; }
.partner-pick input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.partner-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: .8rem; }
.partner-emblem { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: color-mix(in srgb, var(--agency) 14%, var(--surface)); color: color-mix(in srgb, var(--agency) 45%, var(--muted)); filter: grayscale(.6); transition: filter .15s, background-color .15s, color .15s; }
.partner-emblem svg { width: 1.3rem; height: 1.3rem; order: 0 !important; }
.partner-badge.on .partner-emblem { background: var(--agency); color: #fff; filter: none; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35); }
.partner-words { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.partner-words strong { font-size: var(--fs-text); letter-spacing: .02em; }
.partner-full { font-size: var(--fs-tiny); line-height: 1.25; color: var(--muted); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.partner-badge.on .partner-full { color: var(--text); }
.partner-badge .partner-edit { margin-right: .35rem; }
/* Deconfliction (v1.33): a card per check; the boxes wrap, nothing is cut off. */
.decon-list { display: grid; gap: .6rem; margin-top: .4rem; }
.decon-card { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .75rem .75rem; background: var(--surface); }
.decon-card.conflict { border-color: var(--danger); box-shadow: inset 3px 0 0 var(--danger); }
.decon-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.decon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .5rem .75rem; }
.decon-grid .decon-wide { grid-column: span 2; }
.decon-grid .date-field { min-width: 12.5rem; }
.decon-grid select.decon-yes { border-color: var(--danger); color: var(--danger); font-weight: 600; }
@media (max-width: 700px) { .decon-grid .decon-wide { grid-column: 1 / -1; } }
/* The operation's Timeline on the Overview (v1.33): left to right, click an event to open it. */

/* v1.34 */
/* Sidebar on a narrow window keeps the same order (hide button left, padlock right). */
@media (max-width: 820px) { body:not(.sidebar-collapsed) .sidebar-head { justify-content: space-between; } }
/* Files: the Added date wraps onto two lines when it has to, instead of being cut off, and the
   Name column keeps room for the file name. */
.files-layout { grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr); }
.files-table-wrap col.col-type { width: 10rem; }
.files-table-wrap col.col-size { width: 5.4rem; }
.files-table-wrap col.col-added { width: 8.8rem; }
.files-table-wrap col.col-actions { width: 7.4rem; }
.files-table-wrap td.fadded { white-space: normal; overflow: visible; overflow-wrap: normal; line-height: 1.3; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .files-table-wrap col.col-type { width: 8.5rem; } }
/* Quick links: the tabs size to their words and icon with room on both sides, so the icon is never cut. */
.ql-tabs { flex-wrap: wrap; overflow: visible; }
.ql-tabs .btn { width: auto; min-width: 8rem; padding: .25rem 1rem; gap: .5em; overflow: visible; line-height: 1.3; }
.ql-tabs .btn svg { flex: 0 0 auto; width: 1.05em; height: 1.05em; overflow: visible; }
/* Officer's Report (v1.34): every line has its tick box, and every label looks the same: the
   words as written (not all capitals), one size and weight. */
.rf-lines > .field > span, .rf-lines > .rf-optional > span { text-transform: none; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0; color: var(--text); }
.rf-line-off > span { color: var(--muted); }
.rf-list-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .35rem; cursor: pointer; }
.rf-list-head > input[type=checkbox] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
.rf-list-head h4 { margin: 0; }
.rf-list.rf-line-off > .rf-items, .rf-list.rf-line-off > .contact-add, .rf-list.rf-line-off h4 { opacity: .45; }
/* Evidence photos (v1.34): each photo with a label under it, and a big camera tile to add more. */
.rf-photo-row { align-items: flex-start; gap: .75rem; }
.rf-photos { gap: .75rem; }
.rf-photo-card { margin: 0; width: 140px; display: grid; gap: .3rem; }
.rf-photo-card .rf-photo { width: 140px; height: 112px; }
.rf-photo-label { width: 100%; font-size: var(--fs-small); padding: .25rem .5rem; }
.rf-photo-add { width: 140px; height: 112px; display: inline-flex; flex-direction: column-reverse; align-items: center; justify-content: center; gap: .35rem; border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: var(--fs-small); cursor: pointer; transition: background-color .15s, border-color .15s, transform .15s; }
.rf-photo-add:hover, .rf-photo-add:focus-visible { border-color: var(--accent); border-style: solid; transform: translateY(-1px); }
.rf-section .rf-photo-add svg, .rf-photo-add svg { display: inline-block; width: 2rem; height: 2rem; }

/* Reports tab (v1.34): Field Notes and Reports as two cards. */
.rpt-card { margin: 0 0 1.2rem; padding: 1rem 1.25rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.rpt-card .reports-head { margin: 0 0 .8rem; }
.rpt-icon { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .6rem; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.rpt-icon svg { width: 1.1rem; height: 1.1rem; }
.notes-card { display: block; padding: .75rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); text-decoration: none; transition: border-color .15s, background-color .15s; }
.notes-card:hover, .notes-card:focus-visible { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.notes-card-text { white-space: pre-wrap; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; } /* v1.42: no fade at the bottom; single spaced */
.notes-empty { display: flex; align-items: center; gap: .6rem; color: var(--muted); }
.reports-table { table-layout: fixed; width: 100%; }
.reports-table col.col-rtype { width: 14rem; }
.reports-table col.col-ai { width: 5.5rem; }
.reports-table col.col-ract { width: 10.5rem; }
.reports-table col.col-grip { width: 2.4rem; }
.reports-table th.ai-col, .reports-table td.ai-col { text-align: center; }
.reports-table td.ai-col .ai-badge { margin: 0; display: inline-flex; align-items: center; gap: .3em; }
.reports-table td.ai-col .ai-badge svg { width: .9em; height: .9em; }
.reports-table .report-name .report-open { display: inline-flex; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; align-items: center; gap: .6rem; min-width: 0; max-width: 100%; color: var(--text); font-weight: 600; text-decoration: none; }
.reports-table .report-name .report-open:hover .report-title { color: var(--accent); }
.reports-table .report-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-icon { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .5rem; background: var(--surface-2); color: var(--accent); flex: 0 0 auto; }
.report-icon svg { width: 1rem; height: 1rem; }
.type-tag { display: inline-block; max-width: 100%; padding: .12rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.reports-table td.actions { text-align: center; white-space: nowrap; }
.reports-table tr[draggable="true"] { cursor: grab; }
.reports-table .grip-btn { display: inline-grid; place-items: center; padding: .25rem; border: 0; background: none; color: var(--muted); cursor: grab; }
.reports-table .grip-btn:hover, .reports-table .grip-btn:focus-visible { color: var(--accent); }
.report-preview .preview-head .muted { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
@media (max-width: 700px) { .reports-table col.col-rtype { width: 8rem; } }

/* Report editor: the actions in one bar, in order, each with its icon; the formatting bar under it. */
.draft-actions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .2rem 0 .6rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.draft-actions-bar .btn svg { width: 1em; height: 1em; }
.draft-actions-bar .menu { position: relative; }
.draft-actions-bar .menu .menu-items { left: 0; right: auto; z-index: 30; min-width: 13rem; }
.export-menu .menu-items button { display: flex; align-items: center; gap: .55rem; }
.export-menu summary { display: inline-flex; align-items: center; gap: .4em; }
.word-view { display: flex; flex-direction: column; gap: .5rem; height: 100%; min-height: 0; }
.word-view h2, .word-view p { margin: 0; }
.word-view-page { flex: 1; min-height: 0; overflow: auto; background: var(--surface-2); padding: 1rem; border-radius: var(--radius-sm); }
.word-view-page .docx-page { max-width: 46rem; margin: 0 auto; }

/* Suspects (v1.34): each suspect is a card with their demographics under the first row. */
.suspect-card { padding: .75rem .75rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.suspect-rows { display: grid; gap: .7rem; }
.suspect-card .suspect-row { border-top: 0; padding: 0; }
.suspect-demo { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem .6rem; margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--border); }
.suspect-demo .field { margin: 0; min-width: 0; }
.suspect-demo input, .suspect-demo select { width: 100%; }
.suspect-demo .suspect-wide { grid-column: 1 / -1; }

/* Deconfliction System: the drop-down and, for Other, the system's name under it. */
.decon-system { display: grid; gap: .35rem; }
.decon-system select, .decon-system input { width: 100%; }

/* Anonymizer: a taller drop box. */
.dev-drop { min-height: 6.5rem; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; }

/* Draft tab (v1.34): each part's heading on a light band, the buttons in a bar that stays in view. */
.rf-section > h3, .rf-section .rf-part-head { padding-bottom: .5rem; margin-bottom: .8rem; border-bottom: 1px solid var(--border); }
.rf-actions { position: sticky; top: 0; z-index: 5; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); box-shadow: var(--shadow); }
.rf-section { border-left: 4px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.rf-section.rf-off { border-left-color: var(--border); }
.suspect-row { grid-template-columns: minmax(11rem, 1.5fr) 10.5rem 2.4rem minmax(13rem, 2.2fr) 7.6rem 1.8rem; align-items: end; }
@media (max-width: 1100px) { .suspect-row { grid-template-columns: 1fr 10.5rem 2.4rem; } }
.rf-photo-card, .rf-photo-card .rf-photo, .rf-photo-add { width: 160px; }
.rf-photo-label { resize: none; line-height: 1.3; min-height: 0; overflow-wrap: anywhere; }

/* v1.36 */
/* Drop-downs, everywhere: the traditional look. Square corners and one plain arrow on the right,
   the same for lists, type-or-pick boxes (Hair Color, Eye Color…) and searchable lists (IUCR…). */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  border-radius: 2px;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23707b87' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .6rem center !important;
  background-size: .72rem .5rem !important;
  text-overflow: ellipsis;
  cursor: pointer;
}
select::-ms-expand { display: none; }
input[list] {
  border-radius: 2px;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23707b87' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: .72rem .5rem;
}
input[list]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.combo > input { border-radius: 2px; }
.combo-toggle { background: transparent; border-left: 0; border-radius: 0 2px 2px 0; color: #707b87; }
.combo-toggle:hover { color: var(--accent); background: transparent; }
.combo-list, select option { border-radius: 2px; }
/* LEO Partners: once one agency is picked, the others dim so the picked ones stand out. */
.partner-chips:has(.partner-badge.on) .partner-badge:not(.on) { opacity: .45; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.partner-chips:has(.partner-badge.on) .partner-badge:not(.on):hover,
.partner-chips:has(.partner-badge.on) .partner-badge:not(.on):focus-within { opacity: 1; filter: none; }
/* Suspects: the date of birth fits in full (long dates), and so does the longest Race choice. */
.suspect-row { grid-template-columns: minmax(11rem, 1.4fr) 13.5rem 2.4rem minmax(12rem, 2fr) 8.5rem 1.8rem; }
@media (max-width: 1150px) { .suspect-row { grid-template-columns: 1fr 13.5rem 2.4rem; } }
.suspect-demo { display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.suspect-demo .field { flex: 1 1 9rem; }
.suspect-demo .field:has(select[aria-label$="Race"]) { flex: 2 1 20rem; }
.suspect-demo .field:has(select[aria-label$="Complexion"]) { flex: 1 1 11rem; }
.suspect-demo .suspect-wide { flex: 1 1 100%; }
/* Race: the longest choice ("American Indian / Alaska Native") shows in full: the box takes two columns. */
.rf-item-grid .field:has(select[aria-label$=" Race"]) { grid-column: span 2; }
@media (max-width: 600px) { .rf-item-grid .field:has(select[aria-label$=" Race"]) { grid-column: auto; } }
/* Square corners everywhere (v1.36): boxes, buttons, cards, tabs, menus, dialogs, tags and badges,
   for clean symmetric edges. Only true dots and rings (a spinner, status dots, timeline dots) stay round. */
*:not(.spinner):not(.hero-ring):not(.mini-tl-dot),
*::before, *::after { border-radius: 0 !important; }
:root { --radius: 0; --radius-sm: 0; }
/* No clipped words (v1.36): long operation names wrap in the sidebar, the Timeline's date box fits a
   long date, and Files folder names wrap instead of ending in "…". */
.op-name-row .op-name, .op-head .op-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.25; }
.timeline-form { grid-template-columns: minmax(12.5rem, auto) 150px 130px 1fr; }
@media (max-width: 820px) { .timeline-form { grid-template-columns: 1fr; } }
.folder-item .folder-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.files-layout { grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr); }
.partner-full { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Long names wrap onto another line everywhere instead of ending in "…" (v1.36). */
.case-item-title,.case-item-meta,.arrange-item .arrange-name,.files-table-wrap .fname-link,.fname-folder,.ftype,.ql-name,.lib-name,.chat-history-open,.op-name,.op-case-top .op-case-num,.op-meta,.op-tl-title,.reports-table .report-title,.type-tag {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  overflow-wrap: anywhere; -webkit-line-clamp: unset;
}

/* v1.37 */
/* Details: each suspect is a darker box, so how many there are shows at a glance. */
.suspect-card { background: color-mix(in srgb, var(--text) 9%, var(--surface)); border-color: color-mix(in srgb, var(--text) 22%, var(--border)); }
.suspect-card input, .suspect-card select, .suspect-card .date-field { background-color: var(--surface); }
/* Details: the slim timeline under the case-number folders: a line, small dots, a Today mark. */
.mini-tl { margin: .9rem 0 1.1rem; padding: .75rem 1rem 1rem; border: 1px solid var(--border); background: var(--surface); }
.mini-tl-head { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .9rem; }
.mini-tl-title { font-weight: 700; }
.mini-tl-line { position: relative; height: 1.2rem; margin: 0 .2rem; }
.mini-tl-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.mini-tl-dot { position: absolute; top: 50%; width: .7rem; height: .7rem; transform: translate(-50%, -50%); border-radius: 50% !important; background: var(--surface); border: 2px solid var(--accent); z-index: 1; transition: transform .12s; }
.mini-tl-dot:hover, .mini-tl-dot:focus-visible { transform: translate(-50%, -50%) scale(1.5); z-index: 2; }
.mini-tl-dot.deadline { border-color: var(--warn); border-radius: 0 !important; transform: translate(-50%, -50%) rotate(45deg); }
.mini-tl-dot.deadline:hover, .mini-tl-dot.deadline:focus-visible { transform: translate(-50%, -50%) rotate(45deg) scale(1.5); }
.mini-tl-dot.deadline.overdue { border-color: var(--danger); background: var(--danger); }
.mini-tl-dot.done { opacity: .45; }
/* v1.97: events close together share one marker with their count. */
.mini-tl-dot.mini-tl-group { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; font-size: .66rem; font-weight: 700; line-height: 1; color: var(--accent); text-decoration: none; }
.mini-tl-dot.mini-tl-group.deadline { color: var(--warn); }
.mini-tl-dot.mini-tl-group.overdue { color: #fff; }
.mini-tl-today { position: absolute; top: -.15rem; bottom: -.15rem; width: 2px; transform: translateX(-50%); background: var(--danger); }
/* Sidebar (v1.37): a chevron on each operation shows it folds; Titles only folds them all. */
.op-chev { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--muted); transition: transform .15s; }
.op-chev svg { width: .8rem; height: .8rem; color: var(--muted) !important; }
.op-group:not([open]) .op-chev { transform: rotate(-90deg); }
.sidebar-tools { display: flex; align-items: center; gap: .4rem; }
.sidebar-tools .search-wrap { flex: 1; min-width: 0; }
#btn-titles-only[aria-pressed="true"] { color: var(--accent); }
.op-group:not([open]) .op-meta { display: none; }

/* v1.39 */
/* Suspects: the description in even columns (no box stretches, Eye Color included); Race takes two. */
.suspect-demo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .6rem; }
.suspect-demo .field { flex: none; }
.suspect-demo .field:has(select[aria-label$="Race"]) { grid-column: span 2; }
.suspect-demo .suspect-wide { grid-column: 1 / -1; }
@media (max-width: 1000px) { .suspect-demo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sidebar: the arrow folds an operation; its name opens the Details. */
.op-chev { padding: .25rem; margin: -.3rem -.2rem -.3rem 0; cursor: pointer; }
.op-chev:hover svg { color: var(--accent) !important; }
/* Offenders: phone numbers and monikers, one row each, with an Add button under them (v1.39). */
.rf-multi { display: grid; gap: .4rem; }
.rf-multi-row { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: .4rem; align-items: center; }
.rf-multi-socials { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 2rem; }
.rf-multi-add { justify-self: start; }
/* Pre-Recorded Funds: quantity, denomination, serial number and recovered, side by side. */
.rf-list-funds .rf-item-grid { grid-template-columns: minmax(0, .6fr) minmax(0, .8fr) minmax(0, 1.6fr) minmax(0, 1fr); }
/* Files (v1.39): the Added date on one line; the Document column gives up the room and wraps. */
.files-table-wrap col.col-added { width: 12.2rem; }
.files-table-wrap td.fadded { white-space: nowrap; }
.files-table-wrap col.col-type { width: 8.5rem; }
.files-table-wrap col.col-size { width: 5rem; }
.files-table-wrap col.col-ext { width: 4.2rem; }
@media (max-width: 1100px) { .files-table-wrap col.col-type { width: 7rem; } }
/* Close Case (v1.39): the case numbers to close, and the Draft tab's boxes it fills in. */
.close-picks { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: .2rem 0 .6rem; }
.close-draft { margin: .4rem 0 .8rem 1.6rem; }
.close-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem .8rem; margin-top: .5rem; }
@media (max-width: 760px) { .close-checks { grid-template-columns: 1fr 1fr; } }
/* A report sent from the Draft tab is view only. */
.view-only-note { display: flex; align-items: center; gap: .45rem; margin: .2rem 0 .6rem; padding: .5rem .75rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--accent-soft); font-size: var(--fs-text); }
/* Files: room for the Name (the file type shows as the icon, so no separate File column). */
.files-table-wrap col.col-ext { width: 0; }
.files-table-wrap td.fext, .files-table-wrap th.fext-head { padding: 0 !important; border: 0 !important; font-size: 0; overflow: hidden; visibility: hidden; }
.files-table-wrap col.col-added { width: 11.8rem; }
.files-table-wrap col.col-size { width: 4.8rem; }
.files-table-wrap col.col-actions { width: 6.6rem; }
.files-table-wrap .fname-link, .fname-folder { overflow-wrap: break-word !important; word-break: normal; }
.files-layout { grid-template-columns: minmax(12rem, 13.5rem) minmax(0, 1fr); }
.files-table-wrap col.col-type { width: 9.8rem; }
.files-table-wrap td.ftype { overflow-wrap: break-word !important; word-break: normal !important; }

/* ---------- v1.42 ---------- */
/* Files: the Document column breaks only between words ("Supplementary / Report"), never inside
   one, and file names break between words before splitting one. */
.files-table-wrap col.col-type { width: 10.5rem; }
.files-table-wrap td.ftype { overflow-wrap: normal !important; word-break: normal; hyphens: none; }
.files-table-wrap .fname-link, .files-table-wrap .fname-folder { overflow-wrap: break-word !important; word-break: normal; }
@media (max-width: 1100px) { .files-table-wrap col.col-type { width: 10rem; } }
@media (max-width: 900px) { .files-table-wrap col.col-type { width: 0; } }
/* Draft tab: the exhibit numbering control sits beside Add Exhibit. */
.rf-evidence-add { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.rf-numbering { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; }
.rf-numbering-label { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.rf-numbering .rf-start-at { width: 5.5rem; }
/* Pre-Recorded Funds: one compact row per bill (Bill N, denomination, serial number, recovered, delete). */
.rf-list-funds .rf-items { gap: .3rem; }
.rf-list-funds .rf-item { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: end; gap: .2rem .7rem; padding: .25rem .5rem; }
.rf-list-funds .rf-item-head { display: contents; }
.rf-list-funds .rf-item-head > strong { order: 1; align-self: center; padding-top: 1rem; font-size: var(--fs-small); white-space: nowrap; }
.rf-list-funds .rf-item-grid { order: 2; grid-template-columns: minmax(0, 8rem) minmax(0, 1.6fr) minmax(0, 11rem); gap: .4rem .6rem; }
.rf-list-funds .rf-item-head > button { order: 3; align-self: end; margin-bottom: .1rem; }
.rf-list-funds .rf-item-grid .field > span { font-size: var(--fs-tiny); }
@media (max-width: 700px) { .rf-list-funds .rf-item { grid-template-columns: 1fr auto; } .rf-list-funds .rf-item-grid { grid-template-columns: 1fr; grid-column: 1 / -1; } }
/* Dev Tools (v1.42): the Anonymizer as a card in numbered steps; the purge in a danger zone. */
.dev-card { display: grid; gap: .8rem; padding: 1rem 1.25rem; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
.dev-card-head { display: flex; align-items: center; gap: .9rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.dev-card-head h3 { margin: 0; font-size: var(--fs-sub); }
.dev-card-head p { margin: .15rem 0 0; }
.dev-card-icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent); }
.dev-card-icon svg { width: 1.4rem; height: 1.4rem; }
.dev-step-head { display: flex; align-items: center; gap: .7rem; }
.dev-step-num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; background: var(--accent); color: #fff; font-weight: 700; font-size: var(--fs-text); }
.dev-step { gap: .55rem; }
.dev-panel .dev-actions { grid-template-columns: minmax(10rem, 14rem) minmax(8rem, 10rem); }
.purge-box { gap: 1.1rem; padding: 1rem 1.25rem; margin-top: .4rem; border: 1px solid var(--danger); border-left-width: 6px; background: var(--danger-soft); }
.purge-box strong { color: var(--danger); font-size: var(--fs-sub); }
.purge-box p { color: var(--text); }
.purge-skull { display: inline-grid; place-items: center; width: 3.4rem; height: 3.4rem; flex: 0 0 auto; background: var(--danger); color: #fff; }
.purge-skull svg { width: 2.2rem; height: 2.2rem; }
.dev-panel .purge-btn { display: inline-flex; align-items: center; gap: .5rem; width: 13rem; }
.dev-panel .purge-btn svg { display: inline-block; width: 1.1rem; height: 1.1rem; order: -1; }
/* Sidebar (v1.42): each operation a card with an accent edge, the two-tone folder, case numbers
   under a thin guide line; Closed and Archived sit together at the bottom. */
.sidebar { background: var(--surface); }
.case-list > li + li { margin-top: .45rem; }
.op-group { border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--surface); box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s; }
.op-group:hover { box-shadow: var(--shadow-lg); }
.op-head { padding: .5rem .5rem .5rem .5rem; }
.op-head > .op-folder { width: 2rem; height: 2rem; background: linear-gradient(160deg, var(--accent-soft), color-mix(in srgb, var(--accent) 22%, var(--surface))); }
.op-head > .op-folder svg { width: 1.15rem; height: 1.15rem; }
.op-name { font-weight: 700; font-size: var(--fs-text); letter-spacing: .01em; }
.op-meta { font-size: var(--fs-tiny); }
.op-cases::before { width: 1px; background: var(--border); }
.op-cases .case-item { padding: .5rem .5rem; }
.op-cases .case-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.case-item .pill, .case-item .status-pill { font-size: var(--fs-tiny); padding: .08rem .5rem; letter-spacing: .03em; }
/* Overview (v1.42): the open operation's case numbers, each with all of its tabs. */
.op-timeline-section .section-head { justify-content: center; }
.op-timeline-section .section-head .section-title { text-align: center; }
.op-open-section .op-open { margin: 0; }
.op-case-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.op-tab-link { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: var(--fs-small); text-decoration: none; white-space: nowrap; }
.op-tab-link svg { width: .9rem; height: .9rem; color: var(--accent); flex: 0 0 auto; }
.op-tab-link:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.op-folder-art svg { width: 3.6rem; height: 3.6rem; color: var(--accent); }
.op-open-section .op-open-cases { grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr)); }
.op-case-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-tab-link { justify-content: center; }
@media (max-width: 600px) { .op-case-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The landing timeline: each event's title centered in its card, like the section title. */
/* Funds: the column names show once, over the first bill. */
.rf-list-funds .rf-item:not(:first-child) .rf-item-grid .field > span { display: none; }
.rf-list-funds .rf-item:not(:first-child) .rf-item-head > strong { padding-top: 0; }
.rf-list-funds .rf-item:not(:first-child) { align-items: center; }
.rf-list-funds .rf-item:not(:first-child) .rf-item-head > button { align-self: center; margin-bottom: 0; }

/* ---------- v1.44 ---------- */
/* Details: four boxes to a row (Title, Status, Opened, Closed; File, Original Case, Federal Jacket, Client). */
.details-grid.details-row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.details-grid.details-row-title { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.details-grid.details-row4 > .span-2, .details-grid.details-row4 > p { grid-column: 1 / -1; }
@media (max-width: 900px) { .details-grid.details-row4, .details-grid.details-row-title { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Overview: an open operation's case numbers link to Details, Reports and Files only. */
.op-case-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Draft tab: a person's Gender, Gender Identity, Race and Complexion in one row. */
.rf-item-grid .field:has(select[aria-label$=" Race"]) { grid-column: auto; }
/* Assignment: Method Assigned, Unit Number, Safe Method, Arrest Unit, If Residence in one row;
   Adults, Juveniles, Fire, Gang Related in the next. */
.rf-grid.rf-grid-assign { grid-template-columns: repeat(20, minmax(0, 1fr)); }
.rf-grid.rf-grid-assign > :nth-child(-n+5) { grid-column: span 4; }
.rf-grid.rf-grid-assign > :nth-child(n+6) { grid-column: span 5; }
@media (max-width: 1100px) { .rf-grid.rf-grid-assign { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rf-grid.rf-grid-assign > * { grid-column: auto !important; } }
/* Funds: Recovered wide enough for "Not Recovered". */
.rf-list-funds .rf-item-grid { grid-template-columns: minmax(6rem, 8rem) minmax(0, 1.6fr) minmax(12.5rem, 13rem); }
/* Files: the Size column wide enough for "000 KB". */
.files-table-wrap col.col-size { width: 6.6rem; }
.files-table-wrap td.num { white-space: nowrap; }

/* ---------- v1.45: compact, symmetrical entry forms (Draft tab and Arrest Details) ---------- */
/* Tighter rows: smaller gaps, shorter boxes, labels close to their box. */
.rf-section { padding-top: .75rem; padding-bottom: .75rem; }
.rf-section .rf-head { margin-bottom: .45rem; }
.rf-grid, .rf-item-grid, .arrest-grid { gap: .45rem .75rem; }
.rf-section .field > span, .card.arrestee .field > span { margin-bottom: .15rem; font-size: var(--fs-small); }
.rf-section input:not([type=checkbox]):not([type=radio]), .rf-section select,
.card.arrestee input:not([type=checkbox]):not([type=radio]), .card.arrestee select { min-height: 2rem; padding-top: .25rem; padding-bottom: .25rem; font-size: var(--fs-text); }
.rf-section .rf-item { padding: .5rem .75rem; }
.rf-section .rf-item-head { margin-bottom: .3rem; }
.rf-section .rf-list { margin-top: .7rem; }
.rf-lines { row-gap: .3rem; }
/* Draft: no box left alone on a row. */
.rf-update .rf-grid .field:has(select) { grid-column: span 2; }
.rf-item-grid .field:has([aria-label$=" Tattoos / Scars"]) { grid-column: span 3; }
.rf-item-grid .field:has([aria-label$=" Statute"]) { grid-column: span 1; }
.rf-item-grid .field:has([aria-label$=" Statute Description"]) { grid-column: span 3; }
/* Arrest Details: four columns throughout; the photo is the fourth column beside the offender. */
.card.arrestee .arrest-section { margin-top: .7rem; padding-top: .5rem; }
.card.arrestee .arrest-section > h3 { margin-bottom: .4rem; }
.arrest-offender { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: .75rem; }
.arrest-grid.arrest-g-offender { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arrest-grid.arrest-g-offender .span-2 { grid-column: span 2; }
.arrest-grid.arrest-g-offender textarea { min-height: 2rem; height: 2rem; resize: vertical; }
.arrest-grid.arrest-g-incident, .arrest-grid.arrest-g-4, .arrest-grid.arrest-g-court, .arrest-grid.arrest-g-personnel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arrest-grid.arrest-g-incident .span-2 { grid-column: span 2; }
.arrest-grid.arrest-g-incident textarea { min-height: 2rem; height: 2rem; resize: vertical; }
.arrest-grid.arrest-g-incident > :nth-child(5), .arrest-grid.arrest-g-incident > :nth-child(11), .arrest-grid.arrest-g-incident > :nth-child(12) { grid-column: span 2; }
.arrest-grid.arrest-g-court > :nth-child(9) { grid-column: span 2; }
.arrest-grid.arrest-g-personnel > :nth-child(7) { grid-column: span 2; }
@media (max-width: 900px) {
  .arrest-grid.arrest-g-offender, .arrest-grid.arrest-g-incident, .arrest-grid.arrest-g-4, .arrest-grid.arrest-g-court, .arrest-grid.arrest-g-personnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arrest-grid.arrest-g-incident > *, .arrest-grid.arrest-g-court > *, .arrest-grid.arrest-g-personnel > * { grid-column: auto !important; }
}

/* ---------- v1.46: Operations and General Files ---------- */
.ops-page { max-width: 1100px; }
.page-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.page-head h1 { margin: 0; word-break: break-word; }
.page-head .page-icon { color: var(--accent); font-size: 1.8rem; line-height: 1; display: inline-flex; }
.page-head .page-title { display: grid; gap: .15rem; min-width: 0; flex: 1 1 18rem; }
.page-head > .btn, .op-files-head > .btn { flex: none; }
.page-head > h1 { flex: 1 1 auto; }
.page-head .page-title .muted { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.ops-page .back-link { display: inline-block; margin-bottom: .5rem; }
.ops-page .table-wrap { border: 1px solid var(--border); background: var(--surface); overflow-x: auto; margin: .6rem 0 1rem; }
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data-table th { font-size: var(--fs-small); color: var(--muted); background: var(--surface-2); font-weight: 600; white-space: nowrap; }
table.data-table tbody tr:last-child td { border-bottom: 0; }
table.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table .nowrap, .nowrap { white-space: nowrap; }
table.data-table tr.archived-row td { color: var(--muted); }
table.data-table .empty-cell { text-align: center; padding: 1.5rem; }
.op-row-link, .case-num-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.op-row-link .bi { color: var(--accent); }
.dup-flag { display: inline-flex; align-items: center; gap: .25rem; margin-left: .5rem; font-size: var(--fs-tiny); color: var(--warn); background: var(--warn-soft); padding: .05rem .5rem; white-space: nowrap; }
.warn-note { display: flex; align-items: center; gap: .3rem; color: var(--warn); background: var(--warn-soft); padding: .5rem .75rem; }
.empty-state { border: 1px dashed var(--border); padding: 1.5rem; text-align: center; margin: .6rem 0 1rem; background: var(--surface); }
.empty-state p { margin: .2rem 0; }
.op-info { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0; }
.op-info-item { display: grid; gap: .2rem; min-width: 0; }
.op-info-label { font-size: var(--fs-tiny); color: var(--muted); }
.op-info-value { background: var(--surface-2); padding: .5rem .5rem; overflow-wrap: anywhere; min-height: 2.1rem; }
.op-notes { margin: 0 0 .8rem; display: grid; gap: .2rem; }
.op-notes p { margin: 0; background: var(--surface-2); padding: .5rem .75rem; white-space: pre-wrap; }
.op-files-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.op-files-head .section-title { margin: 0; }
.op-files-note { flex: 1 1 14rem; min-width: 0; }
.op-cases-table .op-case-links { display: flex; gap: .3rem; }
.op-danger { margin-top: 1.4rem; }
.op-danger .case-actions-grid { grid-template-columns: minmax(0, 15rem); }
.general-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .8rem 0 0; }
.general-tools input[type="search"] { flex: 1 1 18rem; min-width: 12rem; }
.general-tools select { flex: 0 0 auto; width: auto; }

.op-form textarea { resize: vertical; }
.pick-list { max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); margin: .6rem 0; min-width: min(36rem, 80vw); }
.pick-row { display: grid; grid-template-columns: auto minmax(6rem, auto) minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.pick-row:last-child { border-bottom: 0; }
.pick-row.disabled { cursor: not-allowed; opacity: .6; }
.pick-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.pick-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-existing input[type="search"] { width: 100%; }
.match-list { margin: .4rem 0 .8rem; padding-left: 1.25rem; }
.subject-warn { max-width: 34rem; }
/* The case: number first, subject under it, then the Operation. */
.case-head .case-subject { font-size: var(--fs-sub); font-weight: 600; margin: -.1rem 0 .25rem; overflow-wrap: anywhere; }
.case-op-link { display: inline-flex; align-items: center; gap: .3rem; }
.case-op-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .75rem; margin-bottom: .7rem; background: var(--surface-2); }
.case-op-label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.case-op-label .bi { color: var(--accent); }

.case-item-meta.no-subject { font-style: italic; }
.op-case-id { display: grid; min-width: 0; }
.op-case-subject { font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-open-name { color: inherit; }
.op-folders-section > .section-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.op-folders-section > .section-head .section-title { margin: 0; }
@media (max-width: 900px) { .op-info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.op-form { width: auto; }
.details-grid.details-row-title { grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
@media (max-width: 900px) { .details-grid.details-row-title { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v1.47: General Files folders are manila amber, so they never look like an Operation's blue folder. */
:root { --gf: #c98a12; --gf-soft: rgba(201, 138, 18, .16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gf: #e0a83a; --gf-soft: rgba(224, 168, 58, .16); } }
:root[data-theme="dark"] { --gf: #e0a83a; --gf-soft: rgba(224, 168, 58, .16); }
.year-tile .op-folder-art, .year-tile .op-folder-art svg, .year-tile.open .op-folder-art { color: var(--gf); }
.op-head > .op-folder.gf-icon { background: var(--gf-soft); color: var(--gf); }
.page-head .page-icon.gf-icon, .gf-link .bi, .case-op-label.gf-link .bi { color: var(--gf); }
.year-tile.open { border-color: var(--gf); background: var(--gf-soft); }
.op-head > .op-folder.gf-icon svg, .op-head > .op-folder.gf-icon .bi { color: var(--gf); }
.year-tile .op-folder-count { border-color: var(--gf); color: var(--gf); }
.op-group.general-group { border-left-color: var(--gf); }

/* v1.48: the list that drops down from a select is square too (Chrome and Edge draw it themselves
   once the select uses appearance: base-select; other browsers keep their own list). */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select::picker(select) { -webkit-appearance: base-select; appearance: base-select; }
  select { display: inline-flex; align-items: center; }
  select::picker-icon { display: none; }
  select::picker(select) { border-radius: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0; box-shadow: var(--shadow); max-height: 22rem; }
  select option { padding: .25rem .75rem; min-height: 1.9rem; border-radius: 0; }
  select option::checkmark { display: none; }
  select option:checked { background: var(--accent-soft); font-weight: 600; }
  select option:hover, select option:focus-visible { background: var(--surface-2); outline: none; }
}

/* v1.48: the Draft tab: each field is its own grey box with its label inside it, and the section
   headers in capitals. An empty text box or list shows the label as its placeholder; with a value,
   the label sits small at the top of the box. */
.rf-section { --rf-box: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.rf-section .rf-head h3 { text-transform: uppercase; letter-spacing: .04em; }
.rf-section .rf-head h3::after { text-transform: none; letter-spacing: normal; }
.rf-section .field.rf-boxed { background: var(--rf-box); border: 1px solid transparent; padding: .25rem .5rem .25rem; gap: .05rem; min-width: 0; }
.rf-section .field.rf-boxed:focus-within { border-color: var(--accent); }
.rf-section .field.rf-boxed > .rf-lab { font-size: var(--fs-tiny); line-height: 1.2; font-weight: 600; color: var(--muted); text-transform: none; }
.rf-section .field.rf-boxed input:not([type=checkbox]):not([type=radio]), .rf-section .field.rf-boxed select, .rf-section .field.rf-boxed textarea {
  background: transparent; border: 0; box-shadow: none; padding: .12rem 0; min-height: 1.6rem; }
.rf-section .field.rf-boxed input:focus, .rf-section .field.rf-boxed select:focus, .rf-section .field.rf-boxed textarea:focus { outline: none; }
.rf-section .field.rf-boxed .rf-measure input.rf-num { background: var(--surface); padding: .12rem .25rem; }
.rf-section .field.rf-boxed .combo-toggle { background: transparent; border-left: 0; }
.rf-section .field.rf-boxed ::placeholder { color: var(--muted); opacity: 1; font-weight: 400; }
/* Empty: no label on top, the placeholder (or the list's first choice) says what goes there. */
.rf-section .field.rf-ph:has(> input:placeholder-shown:not(:focus)) > .rf-lab,
.rf-section .field.rf-ph:has(> textarea:placeholder-shown:not(:focus)) > .rf-lab,
.rf-section .field.rf-ph:has(> .combo > input:placeholder-shown:not(:focus)) > .rf-lab,
.rf-section .field.rf-ph:has(> select option[value=""]:checked) > .rf-lab { display: none; }
.rf-section .field.rf-ph > input:placeholder-shown:not(:focus), .rf-section .field.rf-ph > textarea:placeholder-shown:not(:focus),
.rf-section .field.rf-ph > .combo > input:placeholder-shown:not(:focus), .rf-section .field.rf-ph:has(> select option[value=""]:checked) > select { padding-top: .5rem; padding-bottom: .5rem; }
.rf-section .field.rf-ph:has(> select option[value=""]:checked) > select { color: var(--muted); font-weight: 400; }
/* The Officer's Report lines: tick box, then the box. */
.rf-lines > .field.rf-boxed { grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0 .5rem; padding-left: .5rem; align-items: center; }
.rf-lines > .field.rf-boxed > .rf-lab { grid-column: 2; text-transform: uppercase; font-size: var(--fs-tiny); }
.rf-lines > .field.rf-boxed > :not(input[type=checkbox]):not(.rf-lab) { grid-column: 2; }
.rf-lines > .field.rf-boxed > input[type=checkbox] { grid-row: 1 / span 2; }
.rf-lines > .field.rf-boxed.rf-ph:has(> input:placeholder-shown:not(:focus)) > input[type=checkbox],
.rf-lines > .field.rf-boxed.rf-ph:has(> .combo > input:placeholder-shown:not(:focus)) > input[type=checkbox] { grid-row: 1; }
.rf-lines > .field.rf-boxed:not(.rf-optional) { padding-left: .5rem; }
.rf-lines > .field.rf-boxed:not(.rf-optional) > :first-child { grid-column: 2; }
.rf-section .rf-item { background: var(--surface); }
.rf-section .field.rf-boxed .date-field, .rf-section .field.rf-boxed .time-field, .rf-section .field.rf-boxed .date-field > input, .rf-section .field.rf-boxed .time-field > input { background: transparent; border: 0; box-shadow: none; }
.rf-section .field.rf-boxed .date-field button, .rf-section .field.rf-boxed .time-field button { background: transparent; border: 0; }
/* A label too long to fit as a placeholder stays on top, in full. */
.rf-section .field.rf-ph.rf-ph-long > .rf-lab { display: block !important; }
.rf-section .field.rf-ph.rf-ph-long > input, .rf-section .field.rf-ph.rf-ph-long > .combo > input, .rf-section .field.rf-ph.rf-ph-long > select { padding-top: .12rem !important; padding-bottom: .12rem !important; }
.rf-section .field.rf-ph.rf-ph-long ::placeholder { color: transparent; }
.rf-section .rf-phones { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.rf-section .rf-phones > .rf-multi { align-self: stretch; }

/* v1.49: Discovery (Files tab): case files on the left, the production list on the right. */
.disc { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.disc h2 { margin: 0; }
.disc-panes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; min-height: 0; }
.disc-pane { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); min-height: 0; }
.disc-pane-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem; border-bottom: 1px solid var(--border); background: var(--surface-2); flex-wrap: wrap; }
.disc-pane-head input[type=search] { flex: 1 1 12rem; min-width: 8rem; }
.disc-list { overflow-y: auto; height: min(34vh, 22rem); }
.disc-row { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) 4.6rem auto; align-items: center; gap: .6rem; padding: .5rem .5rem; border-bottom: 1px solid var(--border); }
.disc-list:not(.disc-picked) .disc-row { cursor: pointer; }
.disc-list:not(.disc-picked) .disc-row:hover, .disc-list:not(.disc-picked) .disc-row:focus-visible { background: var(--accent-soft); outline: none; }
.disc-row.on { opacity: .55; }
.disc-kind { font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); }
.disc-name { overflow-wrap: anywhere; min-width: 0; }
.disc-size { text-align: right; white-space: nowrap; }
.disc-act { font-size: var(--fs-small); color: var(--accent); white-space: nowrap; }
.disc-btns { display: inline-flex; gap: .2rem; }
.disc-empty { padding: 1rem; }
.disc-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.disc-progress { position: relative; height: 1.6rem; background: var(--surface-2); border: 1px solid var(--border); }
.disc-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent-soft); border-right: 2px solid var(--accent); transition: width .2s; }
.disc-progress > span { position: relative; display: block; padding: .25rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-history summary { cursor: pointer; font-weight: 600; }
.disc-hist-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .25rem .5rem; }
.disc-done { min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
@media (max-width: 900px) { .disc-panes, .disc-opts { grid-template-columns: minmax(0, 1fr); } }

/* v1.50: CaseVault's own calendar under a date box's button: square, like everything else. */
.cal-pop { position: fixed; z-index: 1000; width: 16.5rem; padding: .5rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: var(--fs-small); }
.cal-head { display: grid; grid-template-columns: 1.7rem 1.7rem minmax(0, 1fr) 1.7rem 1.7rem; align-items: center; gap: .15rem; margin-bottom: .35rem; }
.cal-title { text-align: center; font-weight: 600; white-space: nowrap; }
.cal-nav, .cal-day, .cal-act { font: inherit; border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; padding: 0; }
.cal-nav { height: 1.7rem; color: var(--muted); font-size: var(--fs-sub); }
.cal-nav:hover, .cal-day:hover, .cal-act:hover { background: var(--surface-2); border-color: var(--border); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-wd { text-align: center; font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); padding: .25rem 0; }
.cal-day { height: 1.9rem; font-variant-numeric: tabular-nums; }
.cal-day.out { color: var(--muted); opacity: .6; }
.cal-day.today { border-color: var(--accent); }
.cal-day.on { background: var(--accent); color: #fff; font-weight: 700; }
.cal-day:focus-visible, .cal-nav:focus-visible, .cal-act:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-foot { display: flex; justify-content: space-between; margin-top: .4rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.cal-act { padding: .25rem .5rem; color: var(--accent); font-weight: 600; }

/* v1.50: the Arrest details, Timeline, Contacts and Deconfliction forms look like the Draft tab:
   each field is a grey box with its label small inside it at the top, section headers in capitals. */
.cv-boxed { --rf-box: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.cv-boxed .field { background: var(--rf-box); border: 1px solid transparent; padding: .25rem .5rem .25rem; gap: .05rem; min-width: 0; align-self: stretch; justify-content: flex-start; }
.cv-boxed .field:focus-within { border-color: var(--accent); }
.cv-boxed .field > span:first-child:not(.date-field):not(.time-field) { font-size: var(--fs-tiny); line-height: 1.2; font-weight: 600; color: var(--muted); }
.cv-boxed .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .cv-boxed .field select, .cv-boxed .field textarea, .cv-boxed .field output, .cv-boxed .field .contact-fixed {
  background: transparent; border: 0; box-shadow: none !important; padding: .12rem 0; min-height: 1.6rem; }
.cv-boxed .field input:focus, .cv-boxed .field select:focus, .cv-boxed .field textarea:focus { outline: none; }
.cv-boxed .field .date-field, .cv-boxed .field .time-field { background: transparent; border: 0; box-shadow: none; }
.cv-boxed .field .date-field .date-text, .cv-boxed .field .time-field .time-text { padding-left: 0; }
.cv-boxed .field .date-btn, .cv-boxed .field .time-btn, .cv-boxed .field .combo-toggle { background: transparent; border: 0; }
.cv-boxed .field .contact-fixed { display: flex; align-items: center; }
.cv-boxed h3, .cv-boxed .arrest-section > h3 { text-transform: uppercase; letter-spacing: .04em; }
.cv-boxed table.files input, .cv-boxed table.files select { background: var(--rf-box); border-color: transparent; }
.contacts.cv-boxed { border-left: 4px solid color-mix(in srgb, var(--accent) 55%, var(--border)); }
.contacts.cv-boxed .contact-row { align-items: stretch; }
.contacts.cv-boxed .contact-remove { align-self: center; }
.timeline-form.cv-boxed { align-items: stretch; }
.decon-card .decon-grid { align-items: stretch; }

/* v1.50: the case list's top row: hide-the-list, Search, Home and Hide on the left, the padlock on
   the right. The search box shows only after Search is pressed (or while it has a search in it). */
body:not(.sidebar-collapsed) .sidebar-head { justify-content: flex-start; gap: .15rem; }
body:not(.sidebar-collapsed) .sidebar-head #btn-sidebar-lock { margin-left: auto; }
.sidebar-head #btn-privacy { width: 2.1rem; height: 2.1rem; }
.sidebar-head .icon-btn.on { color: var(--accent); background: var(--accent-soft); }
.sidebar-tools:not(.search-open) .search-wrap { display: none; }
.sidebar-tools:not(.search-open):has(> #btn-new-case[hidden]) { display: none; }
body.sidebar-collapsed #btn-side-search, body.sidebar-collapsed #btn-side-home { display: inline-flex; }

/* Move File (v1.50) */
.move-file { display: grid; gap: .7rem; }
.move-dests { display: grid; gap: .3rem; max-height: 50vh; overflow-y: auto; }
.move-dest { display: flex; align-items: center; gap: .55rem; padding: .5rem .75rem; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.move-dest:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.move-dest .bi { color: var(--accent); }
.move-dest.gf-link .bi { color: var(--gf); }
.disc-pane-head select { flex: 1 1 12rem; min-width: 8rem; }
.disc-confirm { width: min(640px, calc(94vw / var(--z, 1))); }
.disc-confirm-list { max-height: 45vh; overflow-y: auto; border: 1px solid var(--border); }
.disc-confirm-list table { width: 100%; }
.disc-confirm-list .disc-size { text-align: right; }
.disc-confirm-list tfoot td { font-weight: 600; border-top: 1px solid var(--border); }
.disc-confirm-list .disc-total td { font-weight: 700; }

/* v1.51: colour icons. An icon with a colour picture shows it; where one colour is needed (white on
   a filled button, the Overview banner, the privacy screen) its plain shape shows instead. */
svg.ci > image { display: inline; }
svg.ci:not(.ci-only) > :not(image) { display: none; }
.privacy-screen svg.ci:not(.ci-only) > :not(image) { display: inline; }
.privacy-screen svg.ci:not(.ci-only) > image { display: none; }
/* A colour picture is a touch larger than a line icon so it reads at the same weight. */
svg.ci { overflow: visible; }
svg.ci > image { transform: scale(1.12); transform-origin: 50% 50%; }
/* The Field Notes and Ask AI buttons: white squares with the colour notebook and chat bubble. */
.fab, .fab-dock .notes-fab { background: var(--surface); color: var(--accent); border: 1px solid var(--border); }
.fab svg { width: 1.6rem; height: 1.6rem; }
.fab[aria-expanded="true"] { border-color: var(--accent); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--accent); }
.partner-emblem.partner-art, .partner-badge.on .partner-emblem.partner-art { background: transparent; box-shadow: none; filter: none; }
.partner-emblem.partner-art svg { width: 2.1rem; height: 2.1rem; }
/* Closed and Archived: the green and the dark folder pictures, without a box around them. */

#fab-dock #btn-chat.fab, #fab-dock #btn-chat.fab:hover { background: var(--surface); color: var(--accent); border: 1px solid var(--border); }

/* v1.52: Link Chart tab: the cards and the form on the left, the chart (as it prints) on the right. */
.lc { display: flex; flex-direction: column; gap: .8rem; }
.lc { display: flex; flex-direction: column; gap: .8rem; }
.lc-head { display: flex; align-items: flex-end; gap: .8rem; flex-wrap: wrap; padding: .5rem .75rem; }
.lc-head .lc-title { flex: 1 1 16rem; min-width: 14rem; margin: 0; }
.lc-head-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.lc-head-actions .btn { white-space: nowrap; }
.lc-body { display: grid; grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.lc-side { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.lc-add { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.lc-add .btn { justify-content: center; }
.lc-tree { list-style: none; margin: 0; padding: .25rem; border: 1px solid var(--border); background: var(--surface); max-height: 18rem; overflow-y: auto; }
.lc-item { --depth: 0; --lc: var(--muted); display: grid; grid-template-columns: .5rem 1.1rem minmax(0, 1fr) auto; align-items: center; gap: .4rem; width: 100%; padding: .25rem .5rem .25rem calc(.5rem + var(--depth) * 1rem); background: none; border: 1px solid transparent; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.lc-item:hover { background: var(--surface-2); }
.lc-item.on { background: var(--accent-soft); border-color: var(--accent); }
.lc-dot { width: .5rem; height: .5rem; background: var(--lc); }
.lc-item .bi { width: 1.05rem; height: 1.05rem; }
.lc-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-item-sub { white-space: nowrap; }
.lc-none { padding: .5rem; }
.lc-form, .lc-links { border: 1px solid var(--border); padding: .75rem; display: grid; gap: .6rem; min-width: 0; }
.lc-form:empty, .lc-links:empty { display: none; }
.lc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.lc-form-grid .span-2 { grid-column: 1 / -1; }
.lc-form .field > span, .lc-links .field > span { white-space: normal; overflow: visible; }
.lc-form .field input, .lc-form .field select, .lc-links .field input, .lc-links .field select { width: 100%; min-width: 0; }
.lc-form-move { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem; }
.lc-form-move .btn { justify-content: center; }
.lc-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.lc-form-actions .btn { justify-content: center; white-space: normal; text-align: center; }
.lc-links h3 { margin: 0; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; }
.lc-hint { margin: 0; }
.lc-link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem; align-items: end; padding-top: .5rem; border-top: 1px solid var(--border); }
.lc-link-row > .field.span-2 { grid-column: 1 / -1; }
.lc-link-row textarea { width: 100%; resize: none; min-height: 2.9rem; }
.lc-link-del { justify-self: end; align-self: center; }
.lc-main { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); background: var(--surface); }
.lc-toolbar { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .5rem .5rem; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.lc-segs { display: inline-flex; }
.lc-segs .btn + .btn { margin-left: -1px; }
.lc-toolbar .btn.on, .lc-toolbar .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
.lc-perrow { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
.lc-perrow select { width: auto; min-width: 3.6rem; }
.lc-zoom { display: inline-flex; align-items: center; gap: .2rem; }
.lc-zoom-pct { min-width: 3.4rem; text-align: center; font-weight: 700; }
.lc-view { background: #ffffff; height: min(70vh, 46rem); min-height: 22rem; overflow: auto; padding: .75rem; display: grid; place-items: start center; }
.lc-view svg { display: block; max-width: none; }
.lc-view .lc-card { cursor: pointer; }
.lc-view.free .lc-card { cursor: grab; }
.lc-view.free .lc-card:active { cursor: grabbing; }
.lc-view.linking .lc-card { cursor: crosshair; }
.lc-view .lc-card:hover > rect:first-child { stroke: var(--accent); }
.lc-view.linking { outline: 2px dashed #c98a12; outline-offset: -2px; }
.lc-view { touch-action: none; user-select: none; }
.lc-empty { align-self: center; }
.lc-note { margin: 0; padding: .5rem .75rem; border-top: 1px solid var(--border); background: var(--surface-2); }
.lc-note .bi { vertical-align: -.15em; }
.lc-note:empty { display: none; }
@media (max-width: 1000px) { .lc-body { grid-template-columns: minmax(0, 1fr); } }
.lc-item > * { order: 0 !important; }

/* v1.53: CaseVault's own square list for every drop-down (js/select.js). */
.sel-pop { position: fixed; z-index: 1000; max-height: min(22rem, 70vh); overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 2px 0; font-size: var(--fs-text); }
.sel-opt { padding: .5rem .75rem; cursor: pointer; white-space: nowrap; }
.sel-opt.in-group { padding-left: 1.25rem; }
.sel-opt.active { background: var(--surface-2); }
.sel-opt.on { background: var(--accent-soft); font-weight: 600; }
.sel-opt.on.active { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2)); }
.sel-opt.disabled { color: var(--muted); cursor: default; opacity: .6; }
.sel-group { padding: .25rem .5rem .25rem; font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* v1.53: a softer, warmer off-white, and the colour icons on white tiles (not on tinted ones), so
   the icons carry the colour. The state of the header buttons shows as a coloured line under them. */


.ql-icon:has(> svg.ci),.fact-icon:has(> svg.ci),.chat-empty-icon:has(> svg.ci),.rpt-icon:has(> svg.ci),.page-icon:has(> svg.ci),.op-head > .op-folder:has(> svg.ci) { background: var(--surface); border: 1px solid var(--border); }
.op-head > .op-folder.gf-icon:has(> svg.ci) { background: var(--surface); }
.tb-status .tb-square:has(> svg.ci), .tb-status .net-status, .tb-status .engine-status, .tb-status .mem-status { background: var(--surface) !important; border: 1px solid var(--border); box-shadow: inset 0 -3px 0 var(--state, transparent); }
.tb-status .net-status.off { --state: var(--ok); }
.tb-status .engine-status.offline { --state: var(--danger); } .tb-status .engine-status.connected { --state: var(--ok); }
.tb-status .mem-status:not(.warn):not(.high) { --state: var(--ok); } .tb-status .mem-status.warn { --state: var(--warn); } .tb-status .mem-status.high { --state: var(--danger); }
/* v1.57: the blue and red buttons are tinted, not filled: a light tint, a coloured border and
   coloured words, so the colour icons sit on them as they are (no white square behind them). */



.btn.primary, .btn.primary:hover, .btn.primary:focus-visible { background: var(--btn-primary-bg); border: 1px solid var(--accent); color: var(--accent-strong); font-weight: 700; filter: none; box-shadow: inset 0 -2px 0 var(--accent); }
.btn.primary:hover { background: var(--btn-primary-hover); }
.btn.danger, .btn.danger:hover, .btn.danger:focus-visible { background: var(--btn-danger-bg); border: 1px solid var(--danger); color: var(--danger-strong); font-weight: 700; filter: none; box-shadow: inset 0 -2px 0 var(--danger); }
.btn.danger:hover { background: var(--btn-danger-hover); }
.btn.primary:disabled, .btn.danger:disabled { opacity: .55; }
.btn.primary .bi, .btn.danger .bi { color: inherit; }
/* The Overview banner: white buttons with the colour icons, like New Case. */

.hero-art svg.ci:not(.ci-only) > :not(image) { display: inline !important; }
.hero-art svg.ci:not(.ci-only) > image { display: none !important; }
/* The deadline bell is red. */
.case-bell, .case-bell .bi { color: var(--danger); }
.tb-status .save-status { background: var(--surface) !important; border: 1px solid var(--border); box-shadow: inset 0 -3px 0 var(--state, transparent); }
.tb-status .save-status.saved { --state: var(--ok); } .tb-status .save-status.saving { --state: var(--warn); } .tb-status .save-status.error { --state: var(--danger); }

/* v1.54: Draft tab rows: Court Branch and Court Date on one row; Warrant or Subpoena, ASA or AUSA,
   Judge or Magistrate on one row (the label of each is a switch). */
.rf-line-row { display: grid; gap: .45rem; }
.rf-line-row.rf-row-court { grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr); }
.rf-line-row.rf-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rf-line-row > .field { grid-column: auto !important; }
.rf-line-row > .field.rf-boxed.rf-optional { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0 .5rem; align-items: center; padding-left: .5rem; }
.rf-line-row > .field.rf-boxed.rf-optional > input[type=checkbox] { grid-row: 1 / span 2; }
.rf-line-row > .field.rf-boxed.rf-optional > :not(input[type=checkbox]) { grid-column: 2; }
.rf-section .field.rf-switch-field > .rf-lab { display: block !important; overflow: visible !important; white-space: nowrap; text-overflow: clip !important; }
.rf-section .field.rf-switch-field select.rf-switch { min-height: 0 !important; padding: 0 1.5rem 0 0 !important; font-size: var(--fs-tiny); font-weight: 700; color: var(--accent) !important; background: transparent; border: 0; width: auto; max-width: none; flex: none; overflow: visible; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; }
@media (max-width: 1100px) { .rf-line-row.rf-row-3, .rf-line-row.rf-row-court { grid-template-columns: minmax(0, 1fr); } }
/* Pre-Recorded Funds: a line per denomination, Add Funds at the lower left, Recovered at the lower right. */
.rf-funds-list { display: grid; gap: .3rem; }
.rf-fund { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .25rem .5rem; background: var(--rf-box, var(--surface-2)); }
.rf-fund-den { white-space: nowrap; }
.rf-fund-serials { overflow-wrap: anywhere; font-size: var(--fs-text); }
.rf-fund-btns { display: inline-flex; gap: .15rem; }
.rf-funds-foot { display: flex; align-items: center; gap: .6rem; margin-top: .45rem; }
.rf-funds-rec { min-width: 13rem; margin: 0; }
.rf-fund-form { display: grid; gap: .6rem; width: min(30rem, 90vw); }
.rf-fund-grid { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: .5rem; }
.rf-fund-grid .span-2 { grid-column: span 2; }
/* The evidence photo's label: one line. */
.rf-photo-label { height: auto; min-height: 0; padding: .25rem .5rem; font-size: var(--fs-small); }
.rf-funds-rec select { padding-right: 1.75rem !important; min-width: 12rem; }

/* v1.54: sections that fold away (Case Overview, LEO Partners, the Vault). */
.fold-head { display: flex; align-items: center; gap: .5rem; }
.fold-head > h3 { margin: 0; }
section.foldable > .fold-head { margin-bottom: .6rem; }
section.foldable.folded > .fold-head { margin-bottom: 0; }
.fold-btn .bi { width: .95rem; height: .95rem; }
.partner-tools { display: flex; justify-content: flex-end; margin-top: .5rem; }
.partner-tools .btn[hidden] { display: none; }
/* The Vault: each section a card with grey boxes. */
.vault-sec { border: 1px solid var(--border); background: var(--surface); padding: .75rem 1rem; margin-bottom: .9rem; }
.vault-sec .fact { background: var(--rf-box); padding: .5rem .5rem; }
/* Mail: grey boxes. */
.mail-form.cv-boxed .field textarea { min-height: 12rem; }

/* v1.55: Discovery popups. */
.disc-head { display: flex; align-items: center; gap: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.disc-head-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--accent); }
.disc-head-icon .bi { width: 1.6rem; height: 1.6rem; }
.disc-head-text { min-width: 0; }
.disc-head-text h2 { margin: 0; }
.disc-head-text p { margin: .15rem 0 0; }
.disc-card { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .45rem; padding: .5rem .75rem .75rem; border: 1px solid var(--border); background: var(--surface-2); }
.disc-card legend { padding: 0 .25rem; font-weight: 700; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .03em; display: inline-flex; align-items: center; gap: .35rem; background: var(--surface); border: 1px solid var(--border); }
.disc-card .field { margin: 0; min-width: 0; }
.disc-card .check-row { align-items: flex-start; }
.disc-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.disc-pane { box-shadow: var(--shadow); }
.disc-pane-head strong { text-transform: uppercase; font-size: var(--fs-small); letter-spacing: .03em; }
.disc-history { border: 1px solid var(--border); background: var(--surface-2); }
.disc-history summary { padding: .5rem .5rem; }
.disc-history .plain-list { margin: 0; border-top: 1px solid var(--border); background: var(--surface); max-height: 12rem; overflow-y: auto; }
.disc-hist-row + .disc-hist-row { border-top: 1px solid var(--border); }
.disc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.disc-tile { display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .5rem .5rem; background: var(--surface-2); border: 1px solid var(--border); border-top: 3px solid var(--accent); }
.disc-tile-label { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.disc-tile-value { overflow-wrap: anywhere; font-size: var(--fs-text); }
.disc-steps { margin: 0; padding: .5rem .75rem .5rem 1.5rem; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: .35rem; font-size: var(--fs-text); }
.disc-confirm[open] { display: flex; flex-direction: column; gap: .6rem; }
@media (max-width: 640px) { .disc-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .disc-pair { grid-template-columns: minmax(0, 1fr); } }

.files-table-wrap table.files.has-lc col.col-actions { width: 9rem; }

/* v1.57: the drive name no longer shows under the logo; the SSD square in the header says where
   the data is saved (hover it). */
.brand .vault-name { display: none; }

/* v1.57: Options. */
.options-form { display: flex; flex-direction: column; gap: .8rem; }
.opt-head { padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.opt-head-icon, .opt-card-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); }
.opt-head-icon .bi, .opt-card-icon .bi { width: 1.6rem; height: 1.6rem; }
.opt-head-text h2 { margin: 0; }
.opt-head-text p { margin: .15rem 0 0; }
.opt-tabs { gap: 0; border-bottom: 0; }
.opt-tab { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); margin-right: -1px; padding: .5rem 1rem; }
.opt-tab.active { background: var(--surface); color: var(--accent-strong); border-bottom-color: var(--surface); box-shadow: inset 0 3px 0 var(--accent); }
.opt-body { border: 1px solid var(--border); margin-top: -1px; padding: 1rem; background: var(--surface-2); }
.opt-card { display: grid; gap: .55rem; padding: .75rem .75rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.opt-card-head { display: flex; align-items: center; gap: .7rem; }
.opt-card .opt-label { display: none; }
.opt-card .opt-row { grid-template-columns: auto minmax(8rem, 1fr) auto 3.5rem auto; }

/* v1.57: Ask AI window: a header bar with the robot on a tile and square tool buttons, the model and
   case in a grey box, prompt chips with an accent line, and a framed message box. */
.chat-float { border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: var(--surface); }
.chat-float-head { background: var(--surface-2); padding: .5rem .5rem .5rem .5rem; gap: .25rem; border-bottom: 1px solid var(--border); box-shadow: inset 0 -2px 0 var(--accent); }
.chat-float-title { gap: .5rem; }
.chat-float-title > .bi, .chat-float-title > svg { width: 1.7rem; height: 1.7rem; padding: .25rem; background: var(--surface); border: 1px solid var(--border); box-sizing: border-box; }
.chat-float-title strong { font-size: var(--fs-text); letter-spacing: .02em; }
.chat-float-head .icon-btn { width: 1.95rem; height: 1.95rem; background: var(--surface); border: 1px solid var(--border); }
.chat-float-head .icon-btn:hover { border-color: var(--accent); background: var(--btn-primary-bg); }
.chat-float-head .icon-btn .bi { width: 1.05rem; height: 1.05rem; }
.chat-float .chat-options { background: var(--surface-2); border: 1px solid var(--border); padding: .5rem .5rem; }
.chat-float .chat-options select { background: var(--surface); }
.chat-thread { border-top: 0; }
.chat-empty-icon { width: 3.2rem; height: 3.2rem; border-left: 3px solid var(--accent) !important; }
.chat-empty-icon .bi { width: 2rem; height: 2rem; }
.chat-starters .btn { background: var(--surface); border: 1px solid var(--border); box-shadow: inset 3px 0 0 var(--accent); text-align: left; }
.chat-starters .btn:hover { background: var(--btn-primary-bg); border-color: var(--accent); }
.chat-composer { border: 1px solid var(--border); background: var(--surface); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05); }
.chat-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.chat-msg.user .chat-content { border: 1px solid var(--border); }
.chat-msg.assistant .chat-avatar { border: 1px solid var(--border); background: var(--surface); }
.disc-dest-hint { margin: 0; }

/* v1.57: every grey field box gets a thin border and a faint line under it, so boxes next to each
   other (and on grey sections) don't run together. */



.rf-section .field.rf-boxed, .cv-boxed .field { border: 1px solid var(--box-edge); box-shadow: inset 0 -2px 0 var(--box-line); }
.rf-section .field.rf-boxed:focus-within, .cv-boxed .field:focus-within { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.cv-boxed table.files input, .cv-boxed table.files select { border: 1px solid var(--box-edge); }
/* The case tabs: each as wide as its name (no overlapping names when there are many tabs). */
.tab { flex: 1 1 auto; min-width: max-content; padding-left: .75rem; padding-right: .75rem; }
/* The Vault's header icon on a white tile like the other box headers (not on a blue square). */
.vault-badge { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); color: var(--accent); }
.purge-skull { background: var(--btn-danger-bg); border: 1px solid var(--danger); color: var(--danger); }
.purge-btn .bi { color: inherit; }

/* v1.58: Link Chart: the chart sits on small faint olive-green squares; drag the background to move
   around, the mouse wheel zooms. */
.lc-view { background: #f3f6ec; cursor: grab; }
.lc-view.panning { cursor: grabbing; }
:root[data-theme="dark"] .lc-view { background: #f3f6ec; }
.lc-carries select { min-width: 8.5rem; }
.lc-view .lc-flow { pointer-events: none; }
.lc-link-del { grid-column: 1 / -1; justify-self: end; }

/* v1.59: Ask AI suggestions: four boxes of the same size in a 2 x 2 grid, plain border, no blue line. */
.chat-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .45rem; width: 100%; max-width: 26rem; margin-top: .6rem; }
.chat-starters .btn, .chat-starters .btn:hover { box-shadow: none; display: flex; align-items: center; justify-content: center; text-align: center; white-space: normal; min-height: 3.4rem; height: 100%; padding: .5rem .5rem; line-height: 1.3; font-size: var(--fs-small); }
.chat-starters .btn:hover { border-color: var(--accent); background: var(--surface-2); }

/* v1.59: the Checks tab. */
.chk-card { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1rem; border: 1px solid var(--border); box-shadow: var(--shadow); }
.chk-head { display: flex; align-items: center; gap: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.chk-head-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); }
.chk-head-icon .bi { width: 1.6rem; height: 1.6rem; }
.chk-head h2 { margin: 0; }
.chk-head p { margin: .15rem 0 0; }
.chk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: .9rem; }
.chk-col { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.chk-col .field { margin: 0; }
.check-reports { display: flex; flex-direction: column; max-height: 16rem; overflow-y: auto; border: 1px solid var(--box-edge); background: var(--surface-2); }
.chk-doc { padding: .5rem .5rem; border-bottom: 1px solid var(--border); background: var(--surface); align-items: flex-start; }
.chk-doc:last-child { border-bottom: 0; }
.chk-doc span { overflow-wrap: anywhere; }
.chk-ai { padding: .5rem .75rem; background: var(--surface-2); border: 1px solid var(--box-edge); }
.chk-actions { display: flex; align-items: center; gap: .6rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.chk-past .checks-table { margin: 0; }
.checks-table tbody tr.clickable:hover { background: var(--btn-primary-bg); }
@media (max-width: 900px) { .chk-grid { grid-template-columns: minmax(0, 1fr); } }
.disc-burn { border: 1px solid var(--border); background: var(--surface); }
.disc-burn summary { cursor: pointer; padding: .5rem .5rem; font-weight: 700; font-size: var(--fs-small); background: var(--surface-2); }
.disc-burn-steps { margin: .5rem 0; padding-left: 1.5rem; padding-right: .75rem; display: flex; flex-direction: column; gap: .35rem; font-size: var(--fs-small); }
.disc-burn > p { margin: 0 .7rem .6rem; }
/* v1.59: Link Chart connections: a card each, folded to one line with an eye (show or hide the line). */
.lc-link-card { border: 1px solid var(--box-edge); background: var(--surface); }
.lc-link-card.off { opacity: .7; }
.lc-link-head { display: flex; align-items: center; gap: .3rem; padding: .25rem .5rem .25rem .5rem; background: var(--surface-2); }
.lc-link-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; font-size: var(--fs-small); }
.lc-link-names { overflow-wrap: anywhere; font-weight: 600; }
.lc-link-flow { font-size: var(--fs-tiny); font-weight: 700; padding: .05rem .5rem; color: #fff; }
.lc-link-flow-money { background: #1f9d55; } .lc-link-flow-narcotics { background: #c2410c; }
.lc-link-card > .lc-link-row { padding: .5rem .5rem .5rem; border-top: 1px solid var(--border); }

/* v1.60: the sidebar's top icons are all the same size (same box, same picture size). */
.sidebar-head > .icon-btn, .sidebar-head > a.icon-btn { width: 2.1rem; height: 2.1rem; padding: 0; align-items: center; justify-content: center; }
.sidebar-head > .icon-btn > svg, .sidebar-head > a.icon-btn > svg { width: 1.2rem; height: 1.2rem; }
/* An Operation in the case list: its number on top, its name under it. */
.op-name { display: flex; flex-direction: column; min-width: 0; }
.op-name .op-num { font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; }
.op-name .op-title { font-weight: 600; font-size: var(--fs-small); color: var(--text); opacity: .85; overflow-wrap: anywhere; }
/* A case (or Operation folder) with a reminder: a thin red line around it. */
.case-item.has-reminder { box-shadow: inset 0 0 0 1px var(--danger); }
.op-cases .case-item.has-reminder.active { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--danger); }
.op-group.has-reminder { border-color: var(--danger); border-left-color: var(--danger); }
/* A long case list scrolls in its own box with a thin, steady scroll bar. */
#case-list { scrollbar-width: thin; scrollbar-gutter: stable; }
/* Crisp text: no blurred glass behind the header (a solid colour instead), and a big Ask AI window
   placed on whole pixels (no half-pixel shift from centring). */
.topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
@media (min-width: 641px) { .chat-float.big { transform: none; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; margin: auto; } }
/* v1.60: landing Operation tiles, number on top and name below. */
.op-folder-name.op-two-line { flex-direction: column; gap: .1rem; text-align: center; }
.op-folder-name.op-two-line .op-num { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.op-folder-name.op-two-line .op-title { font-size: var(--fs-small); color: var(--muted); }

/* v1.61: landing page — smaller banner with the status counts, quick actions, Needs Attention. */
.hero.hero-compact { align-items: center; margin-bottom: 1rem; padding: 1rem 1.5rem; }
.hero-compact .hero-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.hero-compact .hero-title { margin: 0; font-size: var(--fs-section); }
.hero-compact .hero-date { font-size: var(--fs-small); }
.hero-compact .hero-clock { font-size: 1.9rem; }
.hero-compact .hero-art { transform: scale(.7); transform-origin: right bottom; }
.hero-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 7.5rem)); gap: .5rem; }
.hero-count { display: flex; align-items: center; gap: .4rem; padding: .25rem .5rem; background: #fff; color: #0b3d91; border: 1px solid #fff; font-size: var(--fs-small); white-space: nowrap; }
.hero-count strong { font-size: var(--fs-sub); }
.hero-count .bi { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.quick-actions { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .5rem; margin-bottom: .4rem; }
.qa-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 4.4rem; padding: .5rem .25rem; background: var(--surface); color: var(--text); border: 1px solid var(--box-edge, var(--border)); border-bottom-width: 2px; font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; text-align: center; }
.qa-tile:hover { background: var(--surface-2); border-color: var(--accent); }
.qa-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.qa-icon .bi { width: 1.6rem; height: 1.6rem; }
.qa-label { line-height: 1.2; }
@media (max-width: 1100px) { .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .hero-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash-section.attention-section { margin-top: .9rem; padding-top: 1rem; }
.attention-section .section-head { align-items: center; margin-bottom: .6rem; }
.attention-section .section-title { margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.attention-section .section-title .bi { width: 1.1rem; height: 1.1rem; }
.attention-none { margin: .2rem 0 0; }
.attention-list { display: grid; gap: .35rem; }
.attention-row { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr) 13.5rem 9.5rem; align-items: center; gap: .8rem; padding: .5rem .75rem; background: var(--surface); color: var(--text); border: 1px solid var(--box-edge, var(--border)); border-left: 4px solid var(--warn); text-decoration: none; }
.attention-row:hover { background: var(--surface-2); }
.attention-row.att-now { border-left-color: var(--danger); }
.attention-row.att-overdue { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.att-case { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.att-what { min-width: 0; overflow-wrap: anywhere; }
.att-when { font-size: var(--fs-small); color: var(--muted); }
.att-due { justify-self: end; font-size: var(--fs-small); font-weight: 700; padding: .25rem .5rem; border: 1px solid currentColor; color: var(--warn); white-space: nowrap; }
.att-now .att-due, .att-overdue .att-due { color: var(--danger); }
@media (max-width: 1000px) { .attention-row { grid-template-columns: 1fr auto; } .att-what, .att-when { grid-column: 1 / -1; } }
.pick-case { display: grid; gap: .7rem; width: min(560px, 86vw); }
.pick-case h2 { margin: 0; }
.pick-case-list { display: grid; gap: .3rem; max-height: 52vh; overflow-y: auto; scrollbar-width: thin; }
.pick-case-row { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .5rem .5rem; background: var(--surface); color: var(--text); border: 1px solid var(--box-edge, var(--border)); font: inherit; text-align: left; cursor: pointer; }
.pick-case-row:hover, .pick-case-row:focus-visible { background: var(--surface-2); border-color: var(--accent); }
.pick-case-sub { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .attention-section .section-head > .muted { display: none; } }
.lc-link-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
/* v1.62: street value chart: the form (Powder, Crack…) in its own column. */
.value-table .vc-form-cell { color: var(--muted); white-space: nowrap; }
.ref-grid.ref-narc { grid-template-columns: 1fr; }
.ref-narc .calc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ref-narc .value-chart { grid-template-columns: 1fr; }
.value-table { table-layout: fixed; min-width: 46rem; }
.value-table col.vc-drug { width: 13rem; }
.value-table col.vc-form { width: 7rem; }
.value-table td.num { white-space: normal; }
.value-table .vc-price-text { white-space: nowrap; }
@media (max-width: 700px) { .ref-narc .calc-form { grid-template-columns: 1fr; } }

/* v1.62: popups (New Case, New Operation, confirm boxes…): a tinted title bar with a coloured
   line, sections with a thin heading, hint boxes, and the buttons on a bar that stays in view.
   (v1.118: a stray "}" above this always cancelled the popups' padding rule, so it never applied;
   both are gone and the popups look the same as before.) */
.dialog:not(.dialog-panel):not(.dialog-full) > :is(form, div) > h2:first-child {
  position: sticky; top: -1.2rem; z-index: 2; margin: -1.2rem -1.5rem 1rem; padding: .75rem 3.5rem .75rem 1.5rem;
  background: var(--surface-2); border-bottom: 2px solid var(--accent); font-size: var(--fs-sub); line-height: 1.3; }
.dialog:not(.dialog-panel):not(.dialog-full) > :is(form, div) > h2:first-child .bi { width: 1.3rem; height: 1.3rem; }
.dialog:not(.dialog-panel):not(.dialog-full) > :is(form, div) > .dialog-actions:last-child {
  position: sticky; bottom: -1.2rem; z-index: 2; margin: 1.1rem -1.5rem -1.2rem; padding: .75rem 1.5rem;
  background: var(--surface-2); border-top: 1px solid var(--box-edge, var(--border)); }
.dialog:not(.dialog-panel):not(.dialog-full) > .dialog-x { top: .6rem; right: .7rem; }
.form-sect { display: flex; align-items: center; gap: .45rem; margin-top: .35rem; padding-bottom: .25rem; border-bottom: 1px solid var(--box-edge, var(--border)); font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-strong, var(--accent)); }
.form-sect:first-of-type, h2 + .form-sect { margin-top: 0; }
.form-sect .bi { width: 1.05rem; height: 1.05rem; }
.form-hint { display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding: .5rem .75rem; background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--text); font-size: var(--fs-small); line-height: 1.4; }
.form-hint:empty { display: none; }
.form-hint .bi { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .1rem; }
.form-hint code { overflow-wrap: anywhere; }
.form-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1rem; }
@media (max-width: 640px) { .form-row3 { grid-template-columns: 1fr; } }
.dialog.dialog-form { width: min(720px, calc(94vw / var(--z, 1))); }
.dialog:not(.dialog-panel):not(.dialog-full) > .form-grid > h2:first-child { margin-bottom: .1rem; }
.dialog:not(.dialog-panel):not(.dialog-full) > :is(form, div):first-child { width: auto; max-width: none; }

/* v1.63: Quick Links footer: a bar under the page, from the case list to the right edge of the
   screen (Overview only). A top row (title, tabs, Arrange), then the links in five equal columns. */
.main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.main-col > .main { flex: 1; min-height: 0; }
/* v1.65: four rows of links (all of OSINT at five columns), the same height on every tab. */

body .fab-dock { bottom: calc(var(--ql-dock-h, 0px) + 1.2rem); }

/* v1.64: the case tabs look like the Options tabs: boxes side by side with an icon; the open
   tab is white with a blue line along its top. */
.tabs { gap: 0; border: 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tab { gap: .35rem; border: 1px solid var(--border); border-radius: 0; background: var(--surface-2); color: var(--text); margin: 0 -1px -1px 0; padding: .5rem .5rem; font-size: var(--fs-text); font-weight: 400; }
.tab:hover { background: var(--accent-soft); color: var(--accent-strong, var(--accent)); }
.tab.active, .tab.active:hover { background: var(--surface); color: var(--accent-strong, var(--accent)); border: 1px solid var(--border); border-bottom-color: var(--surface); box-shadow: inset 0 3px 0 var(--accent); font-weight: 700; }
.tab .icon, .tab svg { display: inline-block; }
.tab svg.bi { width: 1rem; height: 1rem; flex-shrink: 0; }

/* v1.66: Charges in the footer: one button; a click shows Federal and State in its place. */

/* v1.66: footer layout: on the left "Quick Links" with the Reference / OSINT / LEO buttons
   under it (then the Outside Sites sign and Arrange); the links fill the rest. */

/* v1.67 */

.hero-compact .hero-line { margin-bottom: .75rem; }
.att-sol .att-what { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--danger); }
.att-sol .att-what .bi { width: 1rem; height: 1rem; flex-shrink: 0; }
.att-count { font-variant-numeric: tabular-nums; }
.arch-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.arch-opt { display: flex; align-items: center; gap: .5rem; padding: .5rem .5rem; border: 1px solid var(--box-edge, var(--border)); background: var(--surface); cursor: pointer; font-weight: 600; }
.arch-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.arch-opt .bi { width: 1.2rem; height: 1.2rem; }
.arch-sub-head { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .5rem .5rem; border: 1px solid var(--box-edge, var(--border)); background: var(--surface-2); color: var(--text); font: inherit; font-size: var(--fs-small); font-weight: 700; letter-spacing: .05em; cursor: pointer; text-align: left; margin-bottom: .3rem; }
.arch-sub-head:hover { border-color: var(--accent); }
.arch-sub-head .arch-sub-name { flex: 1; }
.arch-sub-head .count { font-size: var(--fs-tiny); padding: .05rem .5rem; background: var(--surface); border: 1px solid var(--border); }
.arch-sub-head .bi { width: .95rem; height: .95rem; }
.arch-expired .arch-sub-head { border-left: 3px solid var(--danger); }
.arch-nolle .arch-sub-head { border-left: 3px solid var(--warn); }
.arch-prosecution .arch-sub-head { border-left: 3px solid var(--ok); }
.arch-sub-list { padding-left: .5rem; margin: 0 0 .35rem; }
.arch-folder-pick { display: inline-flex; flex-direction: column; gap: .15rem; margin-right: .6rem; }
.arch-folder-pick select { min-width: 11rem; }
.suspect-name-label { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.suspect-notid { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.suspect-notid input { margin: 0; }
.suspect-card.not-identified .suspect-notid { color: var(--danger); }
.suspect-card.not-identified .suspect-name-field input { background: var(--surface-2); font-style: italic; }
.rf-done { display: inline-flex; align-items: center; justify-content: center; width: 2rem; flex-shrink: 0; visibility: hidden; }
.rf-done.on { visibility: visible; }
.rf-done .bi { width: 1.2rem; height: 1.2rem; color: var(--ok); }
/* v1.67: the Search Warrant / Subpoena number gets twice the room of ASA and Judge (long warrant
   numbers were cut off); the three stack one under another below 1400 px. */
.rf-line-row.rf-row-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1400px) { .rf-line-row.rf-row-3 { grid-template-columns: minmax(0, 1fr); } }

/* v1.68: OPERATIONS / GENERAL FILES / OTHER FILES headings in capitals; folders not tied to a case. */
.section-title.caps { text-transform: uppercase; letter-spacing: .05em; display: inline-flex; align-items: center; gap: .45rem; }
.section-title.caps .bi { width: 1.25rem; height: 1.25rem; }
.shared-files { display: grid; gap: .6rem; }
.shared-tabs { margin-bottom: 0; }
.shared-tabs .tab { font-family: inherit; cursor: pointer; }
.shared-tabs .tab-count { font-size: var(--fs-tiny); padding: .02rem .5rem; background: var(--surface); border: 1px solid var(--border); color: var(--muted); }
.shared-drop { border: 1px dashed var(--box-edge, var(--border)); background: var(--surface); padding: .5rem; display: grid; gap: .5rem; }
.shared-files.drop-on .shared-drop { border-color: var(--accent); background: var(--accent-soft); }
.shared-table td .linklike { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; padding: 0; color: var(--accent-strong, var(--accent)); font: inherit; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.shared-table td .linklike .bi { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.shared-foot { display: flex; align-items: center; gap: .6rem; }
.shared-empty { margin: .2rem 0; }
.op-folder-card { display: flex; align-items: center; gap: .6rem; padding: .75rem .75rem; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text); text-decoration: none; box-shadow: inset 3px 0 0 var(--accent); }
.op-folder-card .bi { width: 2rem; height: 2rem; flex-shrink: 0; }
.op-folder-card-text { display: grid; gap: .15rem; min-width: 0; }
.op-folder-card-text .small { overflow-wrap: anywhere; }
.op-folder-head { margin-top: 1.4rem; }

/* v1.68: Additional Exhibits (not tied to an inventory number) under Evidence Inventoried. */
.rf-extras { margin-top: .9rem; padding-top: .75rem; border-top: 1px dashed var(--border); display: grid; gap: .6rem; }
.rf-extras-head { margin: 0; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: .4rem; }
.rf-extra-card .rf-exhibit-no strong { color: var(--accent); }
.rf-extra-pdf { display: flex; align-items: flex-end; }
.rf-extra-pdf .btn { white-space: nowrap; }
.rf-photos-texts .rf-photo-card .rf-photo { height: 220px; }
.rf-photos-texts .rf-photo img { object-fit: contain; background: var(--surface-2); }
.rf-photo-row:has(.rf-photos-texts) .rf-photo-add { height: 220px; }

/* v1.68: Power Off, next to the SSD (save) icon in the header, and the screen shown after it. */
.power-btn { width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 0; background: var(--surface); display: inline-grid; place-items: center; }
.power-btn:hover { border-color: var(--danger); background: var(--danger-soft); }
.power-btn .bi { width: 1.15rem; height: 1.15rem; }
.power-off-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: .8rem; text-align: center; background: var(--bg); color: var(--text); font-family: inherit; padding: 1rem; }
.power-off-screen .bi { width: 4rem; height: 4rem; }
.power-off-screen h1 { margin: 0; font-size: 1.6rem; }
.power-off-screen p { margin: 0; max-width: 34rem; color: var(--muted); }
.value-group-head { display: flex; align-items: center; gap: .45rem; }
.value-group-head .bi { width: 1.35rem; height: 1.35rem; flex: none; }

/* v1.69: the sidebar's case numbers and archive sub-folders use the folder names' size and weight. */
#sidebar .case-item-title, #sidebar .case-item-title.is-number { font-size: var(--fs-text); font-weight: 700; }
#sidebar .arch-sub-name, #sidebar .op-name, #sidebar .op-num { font-size: var(--fs-text); }

/* v1.69: Court Date with a Pending box beside the date. */
.rf-date-pending { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.rf-date-pending > input { flex: 1; min-width: 0; }
.rf-date-pending .rf-pending { flex: none; margin: 0; white-space: nowrap; font-size: var(--fs-small); }
.rf-date-pending.is-pending > input { opacity: .45; }

/* v1.69: one field look everywhere, the Draft's: a grey box with a thin edge, the heading small
   and grey inside it at the top, and the entry in the box at .9rem. (Low specificity, so a page's
   own layout rules still apply.) */
:where(#main, dialog) .field:not(.check-row):not(.rf-check):not(:has(> fieldset)) { background: var(--rf-box); border: 1px solid var(--box-edge, transparent); padding: .25rem .5rem .25rem; gap: .05rem; min-width: 0; }
:where(#main, dialog) .field:not(.check-row):focus-within { border-color: var(--accent); }
:where(#main, dialog) .field > span:first-child:not(.date-field):not(.time-field):not(.combo) { font-size: var(--fs-tiny); line-height: 1.2; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
:where(#main, dialog) .field:not(.check-row) :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]), select, textarea, output) {
  background: transparent; border: 0; box-shadow: none; padding: .12rem 0; min-height: 1.6rem; font-size: var(--fs-text); }
:where(#main, dialog) .field :is(input, select, textarea):focus { outline: none; }
:where(#main, dialog) .field .date-field, :where(#main, dialog) .field .time-field { background: transparent; border: 0; box-shadow: none; }
:where(#main, dialog) .field .date-field .date-text, :where(#main, dialog) .field .time-field .time-text { padding-left: 0; }
:where(#main, dialog) .field :is(.date-btn, .time-btn, .combo-toggle) { background: transparent; border: 0; }
.cv-boxed .field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea, output), .rf-section .field.rf-boxed :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: var(--fs-text); }
:is(#main, dialog) .field:not(.check-row):not(.rf-check):not(:has(> fieldset)):not(.rf-line-off) { background: var(--rf-box); }
:root { --rf-box: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
:is(#main, dialog) .field :is(.date-field, .time-field), :is(#main, dialog) .field :is(.date-field, .time-field) > input { background: transparent; border: 0; box-shadow: none; }
:is(#main, dialog) .field :is(.date-field, .time-field) > input { padding-left: 0; font-size: var(--fs-text); }
/* v1.69: the Operation's read-only details look like the fields: label inside the grey box. */
.op-info .op-info-item { background: var(--rf-box); border: 1px solid var(--box-edge, transparent); padding: .25rem .5rem .25rem; display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.op-info .op-info-label { font-size: var(--fs-tiny); line-height: 1.2; font-weight: 600; color: var(--muted); text-transform: none; }
.op-info .op-info-value { font-size: var(--fs-text); background: transparent; padding: .12rem 0; min-height: 1.6rem; overflow-wrap: anywhere; }

/* v1.70: Back to Top, left of Ask AI; its place is kept while hidden so the others don't move. */
.fab-dock .top-fab svg.bi { width: 1.6rem; height: 1.6rem; color: var(--accent); stroke: currentColor; stroke-width: 1.2px; }
.fab-dock .top-fab:hover svg.bi { color: var(--accent-strong, var(--accent)); }

/* v1.71: every page starts at the same place, next to the case list, and has the same width:
   nothing moves sideways when going from a folder to a case. */
#main > section { margin-left: 0 !important; margin-right: auto !important; max-width: 1360px; }

/* v1.71: Other Files / Operation Folder tabs: icon, name and count on a line, the description
   under it; every tab the same size. */
.shared-tabs { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr)); }
.shared-tabs .tab { flex-direction: column; align-items: stretch; justify-content: center; gap: .15rem; min-width: 0; text-align: left; }
.shared-tabs .tab-main { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.shared-tabs .tab-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.shared-tabs .tab-desc { font-size: var(--fs-tiny); font-weight: 400; color: var(--muted); line-height: 1.25; }
.shared-tabs .tab-new { border-style: dashed; color: var(--accent); }
.shared-foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* v1.71: the Overview's sections in matching panels with matching headers. */
.dashboard .ov-panel { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: 1rem 1rem 1rem; margin-top: 1rem; }
.dashboard .ov-panel + .ov-panel, .dashboard .ov-panel ~ .dash-section { border-top-width: 1px; }
.dashboard .ov-head { display: flex; align-items: center; gap: .8rem; min-height: 3rem; margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.dashboard .ov-head-text { display: grid; gap: .15rem; min-width: 0; }
.dashboard .ov-head .section-title { margin: 0; font-size: var(--fs-sub); }
.dashboard .ov-desc { font-size: var(--fs-small); }
.dashboard .ov-head .btn { flex: none; min-width: 9.5rem; justify-content: center; }
.dashboard .ov-action-space { width: 9.5rem; flex: none; }

/* Recently Updated: five even columns, Quick Links' size, regular weight. */
.recent-grid { display: grid; border: 1px solid var(--border); }
.recent-grid .recent-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr); gap: .8rem; align-items: center; padding: .5rem .75rem; font-size: var(--fs-small); font-weight: 400; color: var(--text); text-decoration: none; border-top: 1px solid var(--border); }
.recent-grid .recent-row:first-child { border-top: 0; }
.recent-grid .recent-headrow { background: var(--surface-2); font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.recent-grid a.recent-row:hover { background: var(--accent-soft); }
.recent-grid .recent-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-grid .recent-row > :last-child { text-align: left; }
@media (max-width: 720px) { .recent-grid .recent-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1fr); } .recent-grid .recent-row > :nth-child(3), .recent-grid .recent-row > :nth-child(5) { display: none; } }
.shared-tabs .tab-desc { white-space: normal; overflow-wrap: anywhere; }
.shared-tabs .tab-name { white-space: normal; }
.dashboard .ov-head a.btn { text-decoration: none; }

/* v1.72: OTHER FILES as five folders (and New Folder), like Operations and General Files. */
.shared-tiles .shared-folder-tiles { margin-bottom: .6rem; }
.shared-tiles .shared-tile .op-title { font-size: var(--fs-tiny); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.shared-tiles .shared-tile-new .op-num { color: var(--accent); }
.shared-tiles .shared-open-head { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .5rem; }

/* v1.73: the case list and the Quick Links bar in a cool slate shade, so the white buttons on
   them stand out; each button has a soft shadow that lifts on hover. */
:root { --chrome: #e6ebf2; --chrome-edge: #cbd4e1; --lift: 0 1px 2px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .07); --lift-hover: 0 3px 8px rgba(15, 23, 42, .16), 0 6px 16px rgba(15, 23, 42, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chrome: #141a23; --chrome-edge: #2a3341; --lift: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); --lift-hover: 0 3px 10px rgba(0, 0, 0, .6); } }
:root[data-theme="dark"] { --chrome: #141a23; --chrome-edge: #2a3341; --lift: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); --lift-hover: 0 3px 10px rgba(0, 0, 0, .6); }
.sidebar { background: var(--chrome) !important; border-right: 1px solid var(--chrome-edge); }
.sidebar .op-group { box-shadow: var(--lift); border-top-color: var(--chrome-edge); border-right-color: var(--chrome-edge); border-bottom-color: var(--chrome-edge); transition: box-shadow .15s; }
.sidebar .case-item {
  background: var(--surface); border: 1px solid var(--chrome-edge); box-shadow: var(--lift); transition: box-shadow .15s, transform .15s, border-color .15s; }
.sidebar .op-group .case-item { box-shadow: none; }
.sidebar .op-group:hover { box-shadow: var(--lift-hover); }
.sidebar .case-item:hover { box-shadow: var(--lift-hover); border-color: var(--accent); }
.sidebar .case-item.active { background: var(--accent-soft); }
.sidebar-tools .icon-btn { background: var(--surface); border: 1px solid var(--chrome-edge); box-shadow: var(--lift); }

/* v1.73: the Timeline as a rail: month headings, a dated chip per entry, a coloured node on the
   line (blue event, amber deadline, red overdue, green done) and a Today line. */
.tl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0 .6rem; }
.tl-stat { display: grid; gap: .1rem; padding: .5rem .75rem; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent); box-shadow: var(--lift, var(--shadow)); min-width: 0; }
.tl-stat-n { font-size: var(--fs-section); font-weight: 700; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-stat-l { font-size: var(--fs-tiny); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tl-stat-s { font-size: var(--fs-tiny); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-stat.dl { border-top-color: var(--warn); } .tl-stat.od { border-top-color: var(--danger); } .tl-stat.od .tl-stat-n { color: var(--danger); }
.tl-stat.ok { border-top-color: var(--ok); } .tl-stat.nx { border-top-color: var(--st-archived); }
@media (max-width: 760px) { .tl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tl-filters { display: flex; gap: .35rem; margin: 0 0 .9rem; flex-wrap: wrap; }
.tl-filter { font: inherit; font-size: var(--fs-small); padding: .25rem .75rem; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.tl-filter.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.timeline.tl-modern { border-left: 0; margin-left: 0; position: relative; padding-left: 0; }
.timeline.tl-modern::before { content: ""; position: absolute; left: 4.6rem; top: .2rem; bottom: .2rem; width: 3px; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 25%, var(--border))); }
.tl-modern .tl-month { position: relative; margin: 1.1rem 0 .5rem 5.6rem; font-size: var(--fs-small); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.tl-modern .tl-month:first-child { margin-top: .2rem; }
.tl-modern .tl-today { position: relative; margin: .8rem 0 .8rem 5.6rem; display: flex; align-items: center; gap: .5rem; font-size: var(--fs-tiny); font-weight: 700; color: var(--danger); text-transform: uppercase; letter-spacing: .05em; }
.tl-modern .tl-today::after { content: ""; flex: 1; height: 0; border-top: 2px dashed var(--danger); }
.tl-modern .tl-today::before { content: ""; position: absolute; left: -1.38rem; width: .9rem; height: .9rem; background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent); }
.tl-modern .tl-item { position: relative; display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: 1.6rem; align-items: start; padding: 0; margin: 0 0 .6rem; border: 0; background: none; }
.tl-modern .tl-item::before { content: ""; position: absolute; left: 4.3rem; top: .95rem; width: .85rem; height: .85rem; transform: none; border: 3px solid var(--surface); background: var(--accent); box-shadow: 0 0 0 2px var(--accent); border-radius: 0; z-index: 1; }
.tl-modern .tl-item.deadline::before { background: var(--warn); box-shadow: 0 0 0 2px var(--warn); transform: rotate(45deg); }
.tl-modern .tl-item.deadline.overdue::before { background: var(--danger); box-shadow: 0 0 0 2px var(--danger); }
.tl-modern .tl-item.done::before { background: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.tl-modern .tl-when { display: grid; justify-items: center; align-content: start; gap: 0; padding: .25rem 0; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--lift, var(--shadow)); text-align: center; }
.tl-modern .tl-day { font-size: var(--fs-section); font-weight: 700; line-height: 1.1; }
.tl-modern .tl-wk { font-size: var(--fs-tiny); text-transform: uppercase; color: var(--muted); letter-spacing: .05em; }
.tl-modern .tl-time { font-size: var(--fs-tiny); color: var(--accent); font-weight: 600; margin-top: .1rem; }
.tl-modern .tl-body { grid-column: 2; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: .5rem .75rem; box-shadow: var(--lift, var(--shadow)); min-width: 0; transition: box-shadow .15s, transform .15s; }
.tl-modern .tl-item:hover .tl-body { box-shadow: var(--lift-hover, var(--shadow-lg)); transform: translateX(2px); }
.tl-modern .tl-item.deadline .tl-body { border-left-color: var(--warn); }
.tl-modern .tl-item.deadline.overdue .tl-body { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.tl-modern .tl-item.done .tl-body { border-left-color: var(--ok); }
.tl-modern .tl-item.past:not(.deadline) .tl-body { opacity: .85; }
.tl-modern .tl-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tl-modern .tl-note { margin-top: .3rem; font-size: var(--fs-small); color: var(--muted); white-space: pre-wrap; }
.tl-modern .tl-actions { grid-column: 3; display: flex; gap: .3rem; align-self: center; opacity: .55; transition: opacity .15s; }
.tl-modern .tl-item:hover .tl-actions, .tl-modern .tl-actions:focus-within { opacity: 1; }
.tl-modern .empty { margin-left: 5.6rem; }
@media (max-width: 640px) { .tl-modern .tl-item { grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1.2rem; } .tl-modern .tl-actions { grid-column: 2; opacity: 1; } .timeline.tl-modern::before { left: 3.95rem; } .tl-modern .tl-item::before { left: 3.65rem; } }

/* v1.73: Operation Folder → Vehicle List: a card per vehicle, the fields on the left and a photo
   on the right. */
.op-vehicles { display: grid; gap: .7rem; margin: .2rem 0 .8rem; }
.op-veh-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); box-shadow: var(--lift, var(--shadow)); padding: .5rem .75rem .75rem; }
.op-veh-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.op-veh-body { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: .9rem; align-items: start; }
.op-veh-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); gap: .45rem; }
.op-veh-fields .op-veh-wide { grid-column: 1 / -1; }
.op-veh-photo { display: grid; gap: .4rem; }
.op-veh-photo-add, .op-veh-photo-img { width: 100%; height: 11rem; display: grid; place-items: center; align-content: center; gap: .4rem; border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 0; overflow: hidden; }
.op-veh-photo-img { border-style: solid; border-color: var(--border); background: var(--surface-2); }
.op-veh-photo-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.op-veh-photo-add .bi { width: 2rem; height: 2rem; }
.op-veh-photo-acts { display: flex; gap: .4rem; justify-content: center; }
.op-veh-foot { display: flex; }
@media (max-width: 760px) { .op-veh-body { grid-template-columns: 1fr; } }

/* v1.74: Needs Attention folds into one slim bar. */
.attention-section .att-head { display: flex; align-items: center; gap: .7rem; }
.attention-section .att-summary { display: none; font-size: var(--fs-small); color: var(--muted); }
.attention-section .att-summary.has-overdue { color: var(--danger); font-weight: 600; }
.attention-section .att-fold .bi { transition: transform .15s; }
.attention-section.att-folded { padding-top: .25rem; padding-bottom: .25rem; }
.attention-section.att-folded > :not(.att-head) { display: none !important; }
.attention-section.att-folded .att-head { margin: 0; padding: .25rem .75rem; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--danger); box-shadow: var(--lift, none); cursor: pointer; }
.attention-section.att-folded .att-head .section-title { font-size: var(--fs-text); }
.attention-section.att-folded .att-summary { display: inline; }
.attention-section.att-folded .att-fold .bi { transform: rotate(-90deg); }

/* v1.74: MISSION FILES, GENERAL FILES and OTHER FILES the same width; each section's colour
   (blue, purple, green, as its folder icon) on its edge and its header button. */
.dashboard .ov-files-title > span { display: inline-block; white-space: nowrap; }
.dashboard .op-folders-section:not(.general-years-section) { border-left-color: var(--sec-mission); }
.dashboard .general-years-section { border-left-color: var(--sec-general); }
.dashboard .other-files-section { border-left-color: #2a9d8f; }
.dashboard .ov-btn-mission { color: var(--sec-mission); border-color: color-mix(in srgb, var(--sec-mission) 45%, var(--border)); }
.dashboard .ov-btn-general { color: var(--sec-general); border-color: color-mix(in srgb, var(--sec-general) 45%, var(--border)); }
.dashboard .ov-btn-other { color: #1f7d72; border-color: color-mix(in srgb, #2a9d8f 45%, var(--border)); }
.dashboard .ov-btn-mission:hover { background: color-mix(in srgb, var(--sec-mission) 12%, var(--surface)); }
.dashboard .ov-btn-general:hover { background: color-mix(in srgb, var(--sec-general) 12%, var(--surface)); }
.dashboard .ov-btn-other:hover { background: color-mix(in srgb, #2a9d8f 12%, var(--surface)); }
.op-folder-art .bi.ci { width: 3.6rem; height: 3.6rem; }

/* v1.74: the Operation page: plain section headers, the explanation small under each section. */
.op-section-note { margin: .4rem 0 1.2rem; font-size: var(--fs-small); }
.op-files-head .section-title, .op-folder-head .section-title { margin: 0; }

/* v1.74: anything you can click shows it when the mouse is over it: links, buttons and cards take
   the accent colour. (v1.102: no underline on hover.) */
a[href]:not(.btn):not(.tab):not(.quick-link):not(.qa-tile):not(.case-item):not(.op-folder-card):not(.recent-row):not(.attention-row):not(.brand):not(.icon-btn):hover { color: var(--accent-strong, var(--accent)); }
.btn:not(:disabled):not(.primary):not(.danger):hover, a.btn:not(.primary):hover { border-color: var(--accent); color: var(--accent-strong, var(--accent)); }
.btn.primary:not(:disabled):hover { filter: brightness(1.08); }
.icon-btn:not(:disabled):hover { color: var(--accent-strong, var(--accent)); background: var(--accent-soft); }
.op-folder-tile:hover, .qa-tile:hover, .attention-row:hover, .tl-filter:hover, .shared-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.op-folder-tile:hover .op-num, .op-folder-tile:hover .op-folder-name { color: var(--accent-strong, var(--accent)); }
a[href], button:not(:disabled), [role="button"], summary, .op-folder-tile, label.check-row { cursor: pointer; }
/* OTHER FILES (11 letters) spaced out to the width of MISSION FILES and GENERAL FILES (13). */
.dashboard .ov-files-title > span.ov-title-wide { letter-spacing: calc(.05em + .2ch); margin-right: -.2ch; }

/* v1.76: every timeline marker is a circle (events, deadlines, overdue, done and the Today mark). */
.tl-modern .tl-item::before, .tl-modern .tl-today::before { border-radius: 50% !important; }
.tl-modern .tl-item.deadline::before { transform: none; }
html .mini-tl-dot.deadline { border-radius: 50% !important; transform: translate(-50%, -50%); }
html .mini-tl-dot.deadline:hover, html .mini-tl-dot.deadline:focus-visible { transform: translate(-50%, -50%) scale(1.5); }
html .tl-item::before { border-radius: 50% !important; }
html .tl-item.deadline::before { transform: none; }

/* v1.76: Draft part headers. The checkbox explains itself in a float box on hover (in the report,
   left out, or hidden on screen); "Not in the report" has its own column next to the green check. */
.rf-head .rf-hidden-tag { display: none; }
.rf-section.rf-off h3::after { content: none; }
.rf-include { position: relative; }
.rf-include-tip { position: absolute; left: calc(100% + .6rem); top: 50%; transform: translateY(-50%); z-index: 30; display: none; padding: .25rem .5rem; background: var(--text); color: var(--surface); font-size: var(--fs-tiny); font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; box-shadow: var(--shadow-lg); pointer-events: none; }
.rf-include-tip::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: var(--text); }
.rf-include:hover .rf-include-tip, .rf-include:focus-within .rf-include-tip { display: block; }
.rf-include-tip > span { display: none; }
.rf-section:not(.rf-off):not(.rf-folded) .rf-include-tip .tip-on,
.rf-section.rf-off .rf-include-tip .tip-off,
.rf-section.rf-folded:not(.rf-off) .rf-include-tip .tip-hidden { display: inline; }
.rf-head .rf-off-tag { flex: none; width: 8.6rem; text-align: right; font-size: var(--fs-tiny); font-weight: 400; color: var(--muted); visibility: hidden; white-space: nowrap; }
.rf-section.rf-off .rf-head .rf-off-tag { visibility: visible; }

/* v1.76: Update Information and Status: the eight Verified / Updated ticks in one grey box. */
.rf-checkbox-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: .2rem 1rem; padding: .5rem .75rem; background: var(--rf-box); border: 1px solid var(--box-edge, transparent); }
.rf-checkbox-group .rf-check { min-height: 1.9rem; }
@media (max-width: 760px) { .rf-checkbox-group { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rf-checkbox-group .rf-check span { white-space: nowrap; }

/* v1.76: Files tab. The Updated column shows the time under the date; the folder list's Arrange
   button is boxed like Discovery; a folder's files can be arranged from the line above the table. */
.files-table-wrap td.fadded { line-height: 1.25; }
.fadded-day, .fadded-time { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fadded-time { font-size: var(--fs-small); opacity: .85; }
.files-where-row { display: flex; align-items: center; gap: .8rem; }
.files-where-row .files-where { flex: 1; min-width: 0; }
.files-where-row .files-arrange { flex: none; }
.folder-reset.folder-arrange { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.type-table { table-layout: fixed; width: 100%; }
.type-table col.tt-file { width: 22%; } .type-table col.tt-type { width: 24%; } .type-table col.tt-name { width: 22%; } .type-table col.tt-saved { width: 32%; }
.type-table td { overflow-wrap: anywhere; }
.type-table td select, .type-table td input { width: 100%; min-width: 0; box-sizing: border-box; }
/* v1.76: the Files table text matches the folder list and the Draft fields (.9rem). */
.files-table-wrap table.files tbody td, .files-table-wrap .fname-link { font-size: var(--fs-text); }
.files-table-wrap .fname-folder { font-size: var(--fs-tiny); }
/* v1.76: more room for the name: narrower Size and action columns; the case number never breaks. */
.files-table-wrap col.col-type { width: 9rem; }
.files-table-wrap col.col-size { width: 4.8rem; }
.files-table-wrap col.col-actions { width: 5.6rem; }
.files-table-wrap .fn-pre { white-space: nowrap; }
.folder-reset.folder-arrange, .folder-reset.disc-open { width: 9.5rem; justify-content: center; }

/* v1.78: MISSION FILES in the case list: the Missions inside one blue folder, with + New Mission. */
.op-group.mission-group { border-left-color: var(--sec-mission); }
.mission-children { list-style: none; margin: 0; padding: .25rem .5rem .5rem .5rem; display: grid; gap: .4rem; border-top: 1px solid var(--border); }
.mission-children > li { list-style: none; }
.mission-children .empty { padding: .25rem .25rem; }
.mission-group > .op-head .mission-add { flex: none; width: 1.7rem; height: 1.7rem; border: 1px solid var(--border); background: var(--surface); color: var(--sec-mission); }
.mission-group > .op-head .mission-add:hover { background: color-mix(in srgb, var(--sec-mission) 12%, var(--surface)); border-color: var(--sec-mission); }
.mission-group > .op-head .mission-add .bi { width: .85rem; height: .85rem; }
.ov-head-actions { display: flex; gap: .4rem; align-items: center; }
/* v1.78: the timeline dot sits exactly on the centre of the line (it was 3.5px to the right). */
.tl-modern .tl-item::before { box-sizing: border-box; width: calc(.85rem + 6px); height: calc(.85rem + 6px); left: calc(4.6rem + 1.5px - (.85rem + 6px) / 2); top: calc(.95rem - 3px); }
@media (max-width: 640px) { .tl-modern .tl-item::before { left: calc(3.95rem + 1.5px - (.85rem + 6px) / 2); } }

/* v1.79: drop-down lists fit the window: a long choice wraps instead of making the list wider than
   the screen, and a typed-in list is at least as wide as its box but never wider than the window. */
.sel-opt { white-space: normal; overflow-wrap: anywhere; }
.combo-list { min-width: 100%; width: max-content; max-width: min(30rem, calc(100vw / var(--z, 1) - 16px)); right: auto; }
.combo-list .combo-opt { white-space: normal; overflow-wrap: anywhere; }

/* v1.79: Gang Affiliations, Persons Present, Police Personnel, Vehicles and Notifications each sit in
   one grey box (like the Verified / Updated box): the title, its cards and the Add button. */
.rf-list:is(.rf-list-gangs, .rf-list-notArrested, .rf-list-personnel, .rf-list-vehicles, .rf-list-notifications) { padding: .5rem .75rem .75rem; background: var(--rf-box); border: 1px solid var(--box-edge, var(--border)); }
.rf-list:is(.rf-list-gangs, .rf-list-notArrested, .rf-list-personnel, .rf-list-vehicles, .rf-list-notifications) .rf-item { background: var(--surface); }

/* v1.79: Timeline spacing. A wider date square (the time never clips), then an even gap with the line
   and its dot in the middle, then the event box: date | gap (line) | event | actions. */
.timeline.tl-modern { --tl-date: 5.4rem; --tl-gap: 2.8rem; --tl-x: calc(var(--tl-date) + var(--tl-gap) / 2); }
.timeline.tl-modern::before { left: calc(var(--tl-x) - 1.5px); }
.tl-modern .tl-item { grid-template-columns: var(--tl-date) var(--tl-gap) minmax(0, 1fr) auto; column-gap: 0; }
.tl-modern .tl-when { grid-column: 1; padding: .5rem .25rem; }
.tl-modern .tl-time { white-space: nowrap; font-size: var(--fs-tiny); }
.tl-modern .tl-day, .tl-modern .tl-wk { white-space: nowrap; }
.tl-modern .tl-body { grid-column: 3; }
.tl-modern .tl-actions { grid-column: 4; margin-left: .7rem; }
.tl-modern .tl-item::before { left: calc(var(--tl-x) - (.85rem + 6px) / 2); }
.tl-modern .tl-month, .tl-modern .tl-today, .tl-modern .empty { margin-left: calc(var(--tl-date) + var(--tl-gap)); }
.tl-modern .tl-today::before { left: calc(var(--tl-gap) / -2 - .45rem); }
@media (max-width: 640px) {
  .timeline.tl-modern { --tl-date: 4.4rem; --tl-gap: 2.2rem; }
  .tl-modern .tl-item::before { left: calc(var(--tl-x) - (.85rem + 6px) / 2); }
  .tl-modern .tl-actions { grid-column: 3; margin-left: 0; }
}

/* v1.79: Files tab: the Document column holds the file's icon, centred; the name no longer has one. */
.files-table-wrap col.col-type { width: 7rem; }
.files-table-wrap td.fdoc-icon { text-align: center; }
.files-table-wrap td.fdoc-icon .file-icon { margin: 0; }
.tl-modern .tl-actions { align-self: start; padding-top: .5rem; }

/* v1.80: dates line up on the right in every table (Updated, Opened, Start and End Date), and in the
   Updated column of Recently Updated. */
:is(table) :is(td, th).date-cell { text-align: right; }
:is(table) th.date-cell .th-btn { margin-left: auto; justify-content: flex-end; width: 100%; }
.files-table-wrap td.fadded.date-cell .fadded-day, .files-table-wrap td.fadded.date-cell .fadded-time { text-align: right; }
.recent-row > :last-child { text-align: right; justify-self: end; }

/* v1.82: a funds line is as wide as its denomination ("Electronic Funds × 2" no longer runs into the
   reference numbers). */
.rf-fund { grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr) auto; }

/* v1.83: CLOSED FILES and ARCHIVED look like the MISSION FILES and GENERAL FILES folders: a card
   with a coloured left edge, the folder icon in a box, the name in capitals with a line under it,
   the count and the arrow. */

.general-group > .op-head .general-add { flex: none; width: 1.7rem; height: 1.7rem; border: 1px solid var(--border); background: var(--surface); color: var(--sec-general); }
.general-group > .op-head .general-add:hover { background: color-mix(in srgb, var(--sec-general) 12%, var(--surface)); border-color: var(--sec-general); }
.general-group > .op-head .general-add .bi { width: .85rem; height: .85rem; }

/* v1.83: Recently Updated: every status box the same width (Open, Pending, Closed, Archived). */
.recent-grid .recent-row .pill { display: inline-flex; justify-content: center; align-items: center; width: 6.6rem; box-sizing: border-box; }
#sidebar .general-group > .op-head .op-name { white-space: nowrap; }

/* v1.84: CLOSED FILES and ARCHIVED always sit at the bottom of the case list, in a panel whose
   height is dragged with the bar on its top edge; Quick Links has the same bar. A padlock on the bar
   keeps the height as it is. */

/* v1.84: closing by arrest needs the arrest report; archiving needs a reason; Undo in the toast. */
.close-form .arrest-required { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid #e0a43a; border-left: 4px solid var(--warn); background: #fff7e6; color: #6b4300; }
.close-form .arrest-required .btn { margin-left: auto; }
.arch-form .arch-need { color: #9a3412; margin: 4px 0 0; }
.arch-form .arch-opt strong { display: block; }
.archived-banner .arch-reason { margin-top: 2px; font-weight: 600; }
.toast .toast-undo { margin-left: 8px; padding: 2px 10px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; border-radius: 0; }
.toast .toast-undo:hover { background: rgba(255,255,255,.18); }
[data-theme="dark"] .close-form .arrest-required { background: #3a2a10; color: #ffd9a0; border-color: #a86b12; }

/* v1.84: a closed case stays in its Mission's folder, greyed with a lock, under the open ones. */
.op-cases .case-item.case-dim { opacity: .62; }
.op-cases .case-item.case-dim:hover, .op-cases .case-item.case-dim.active { opacity: 1; }
.case-item .case-lock { display: inline-flex; vertical-align: -2px; margin-right: 5px; color: var(--muted); }
.case-item .case-lock .bi { width: .85rem; height: .85rem; }
.status-hint { margin-top: .15rem; font-weight: 400; font-style: italic; }

/* v1.84: the banner's counts are glass chips with a colour edge, and open General Files. */
.hero-counts { grid-template-columns: repeat(5, minmax(0, 7.5rem)); }
.hero-count { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); border-left: 4px solid var(--hc-edge, #cbd5e1); font: inherit; font-size: var(--fs-small); cursor: pointer; text-align: left; border-radius: 0; }
.hero-count:hover { background: rgba(255,255,255,.22); }
.hero-count:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.hero-count .bi { color: var(--hc-edge, #fff); }
.hero-count.hc-open { --hc-edge: #7cc4ff; }
.hero-count.hc-pending { --hc-edge: #ffd166; }
.hero-count.hc-closed { --hc-edge: #6ee7b7; }
.hero-count.hc-archived { --hc-edge: #cbd5e1; }
.hero-count.hc-overdue { --hc-edge: #ff6b6b; }
.hero-count.hc-overdue.hc-alert { background: rgba(255,80,80,.24); }
@media (max-width: 1100px) { .hero-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .hero-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v1.85: data safety. The whole-vault backup card, the restore list and the banner line. */
.backup-full { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--box-edge, var(--border)); border-left: 4px solid var(--ok); background: var(--surface); }
.backup-full.backup-due { border-left-color: var(--danger); background: #fff5f5; }
.backup-full .btn { flex: none; }
.backup-list { margin: 0 0 10px; }
.backup-list summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.backup-list ul { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; border: 1px solid var(--box-edge, var(--border)); }
.backup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.backup-row:last-child { border-bottom: 0; }
.backup-steps { margin: 6px 0 10px 1.2rem; padding: 0; line-height: 1.6; }

[data-theme="dark"] .backup-full.backup-due { background: #3a1616; }
.readonly-date { background: var(--surface-2) !important; color: var(--muted); cursor: default; }

/* v1.85: the last Delete Case question, over a big skull and crossbones. */
.doom-form { position: relative; min-height: 300px; display: grid; place-items: center; overflow: hidden; padding: 18px 8px 4px; }
.doom-skull { position: absolute; inset: 0; display: grid; place-items: center; opacity: .16; pointer-events: none; }
.doom-skull svg, .doom-skull img, .doom-skull .bi { width: 280px; height: 280px; max-width: 90%; }
.doom-body { position: relative; text-align: center; max-width: 30rem; }
.doom-body h2 { margin: 0 0 4px; color: var(--danger); letter-spacing: .04em; text-transform: uppercase; }
.doom-case { font-weight: 700; font-size: var(--fs-sub); margin: 0 0 10px; }
.doom-body .dialog-actions { justify-content: center; margin-top: 14px; }
/* v1.85: INDEPENDENT CASES (was GENERAL FILES) on one line. */
#sidebar .ind-name { white-space: nowrap !important; font-size: var(--fs-small); letter-spacing: 0; }
.doom-form h2 { justify-content: center; text-align: center; }
.doom-skull { opacity: .2; }

/* v1.85: the department letterhead: a square for the logo, the header text to its right. */
.lh-editor { display: flex; align-items: stretch; gap: 12px; margin: 0 0 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--box-edge, var(--border)); border-left: 4px solid var(--accent); }
.lh-square-wrap { position: relative; flex: none; }
.lh-logo { width: 84px; height: 84px; display: grid; place-items: center; padding: 4px; background: var(--surface-2); border: 2px dashed var(--box-edge, var(--border)); cursor: pointer; border-radius: 0; color: var(--muted); font: inherit; font-size: var(--fs-small); }
.lh-logo:hover { border-color: var(--accent); color: var(--accent); }
.lh-logo.has-logo { border-style: solid; background: #fff; }
.lh-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lh-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lh-empty .bi { width: 1.6rem; height: 1.6rem; }
.lh-remove { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0; background: var(--surface); border: 1px solid var(--box-edge, var(--border)); }
.lh-remove .bi { width: .7rem; height: .7rem; }
.lh-header { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lh-label { font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lh-text { width: 100%; min-height: 60px; resize: none; font-family: inherit; font-size: var(--fs-text); line-height: 1.35; }
.lh-text::first-line { font-weight: 700; }

/* v1.85: Report a Problem and Keyboard Shortcuts. */
.problem-preview { width: 100%; font-size: var(--fs-tiny); line-height: 1.35; background: var(--surface-2); resize: vertical; }
.shortcuts-table td:first-child { width: 8rem; }
.shortcuts-table kbd { display: inline-block; min-width: 1.6rem; padding: 1px 7px; border: 1px solid var(--box-edge, var(--border)); border-bottom-width: 2px; background: var(--surface-2); font: inherit; font-size: .8rem; font-weight: 700; text-align: center; }
/* v1.85: Beta tag (Templates, Checks, Document Anonymizer). */
.beta-tag { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: var(--fs-tiny); font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: #92400e; background: #fef3c7; border: 1px solid #f59e0b; vertical-align: middle; }
[data-theme="dark"] .beta-tag { color: #fde68a; background: #3a2a05; border-color: var(--warn); }
.backup-drives { grid-template-columns: minmax(0, 1fr); }

/* v1.88: Quick Links and CLOSED FILES / ARCHIVED: one fixed height, five Quick Links tiles high
   (--cv-panel-h is measured from a tile). The bottom area eases to whole cards when it stops
   scrolling (js/app.js), so the top one is never left cut in half. */

/* One scroll box for the whole bottom area (the lists inside used to scroll on their own). */

/* The headings scroll with their lists here (a pinned heading left cards half hidden under it). */

/* v1.89: the Draft's floating bar sits right under the top toolbar (no gap the height of the
   page's top padding). */
.main { --main-pt: 1.6rem; }
@media (max-width: 620px) { .main { --main-pt: 1rem; } }
.main .rf-actions { top: calc(-1 * var(--main-pt)); }

/* v1.89: Case History: the date and time in their own column, then what happened; your notes
   are tagged and can be deleted. The Case Officer role reads like the boxes next to it. */
.history-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.history-list li { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr) 3.2rem; align-items: center; gap: 1rem; padding: .5rem .25rem; border-bottom: 1px solid var(--border); }
.history-list li:last-child { border-bottom: 0; }
.history-when { color: var(--muted); font-size: var(--fs-small); white-space: nowrap; }
.history-what { min-width: 0; overflow-wrap: anywhere; }
.history-tag { display: inline-block; margin-right: .5rem; padding: 0 .5rem; font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--accent); color: var(--accent); }
.history-derived .history-what { color: var(--muted); font-style: italic; }
.history-del, .history-edit { width: 1.5rem; height: 1.5rem; padding: 0; }
.history-del .bi, .history-edit .bi { width: .7rem; height: .7rem; }
.history-add { display: grid; grid-template-columns: 13rem minmax(0, 1fr) auto; gap: .6rem; align-items: end; }
@media (max-width: 700px) { .history-list li { grid-template-columns: minmax(0, 1fr) 3.2rem; } .history-when { grid-column: 1 / -1; } .history-add { grid-template-columns: minmax(0, 1fr); } }
.cv-boxed .field .contact-fixed { font-size: var(--fs-text); font-weight: 400; }
/* v1.89: PDFs in the Files preview use CaseVault's own viewer (square controls). */
.preview-pdf { display: flex; flex-direction: column; height: calc(84vh / var(--z, 1)); min-height: 20rem; }
.preview-pdf .pv { flex: 1; min-height: 0; }
.pdf-view .pv, .pv-bar .btn, .pv-bar .icon-btn { border-radius: 0; }
/* v1.89: every key in Keyboard Shortcuts is the same size. */
.shortcuts-table td:first-child { width: 7rem; }
.shortcuts-table kbd { display: inline-flex; align-items: center; justify-content: center; width: 5.4rem; min-width: 0; height: 1.75rem; padding: 0; box-sizing: border-box; }

/* v1.90: change a Case History note in place. */
.history-btns { display: inline-flex; gap: .2rem; justify-content: flex-end; }
.history-list li.history-editing { display: block; padding: .5rem .25rem; }
.history-edit-actions { display: inline-flex; gap: .4rem; }
.power-backup-form { max-width: 34rem; }

/* v1.91: the Offline badge only informs (CaseVault never goes online). */
.net-status { cursor: default; }

/* v1.93: pick which suspects go into the report (Draft → Offenders → Add From Suspects). */
.suspect-pick-form { max-width: 40rem; }
.suspect-pick-list { display: grid; gap: .35rem; margin: .6rem 0 .2rem; }
.suspect-pick-list .rf-suspect-pick { padding: .5rem .5rem; border: 1px solid var(--border); background: var(--surface); }
/* v1.117: one grid for every row: tick, Name, Role, In Report, so the columns line up. */
.suspect-pick-list .sp-row { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) 7.5rem minmax(0, 13rem); gap: .3rem .7rem; align-items: center; cursor: pointer; }
.suspect-pick-list .sp-head { border: 0; background: none; padding: 0 .5rem; font-size: var(--fs-tiny); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: default; }
.suspect-pick-list .sp-name { overflow-wrap: anywhere; }
.suspect-pick-list .sp-role { justify-self: start; font-size: var(--fs-tiny); font-weight: 700; padding: .05rem .5rem; border: 1px solid var(--border); background: var(--surface-2); }
.suspect-pick-list .sp-role-primary { color: var(--sec-mission); border-color: color-mix(in srgb, var(--sec-mission) 45%, var(--border)); }
.suspect-pick-list .sp-role-secondary { color: var(--sec-general); border-color: color-mix(in srgb, var(--sec-general) 45%, var(--border)); }
@media (max-width: 560px) { .suspect-pick-list .sp-row { grid-template-columns: 1.3rem minmax(0, 1fr) auto; } .suspect-pick-list .sp-note { grid-column: 2 / -1; } .suspect-pick-list .sp-head span:last-child { display: none; } }

/* v1.94: Offender Vehicle(s): a card per vehicle, Impound / Tow / DNA click boxes beside its name. */
.rf-vehicles { display: block; }
.rf-vehicles > span { display: block; margin-bottom: .35rem; }
.rf-vehicles-list { display: grid; gap: .5rem; }
.rf-veh-card { border: 1px solid var(--border); background: var(--surface); padding: .5rem .5rem .5rem; }
.rf-veh-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.rf-veh-head > strong { font-size: var(--fs-small); white-space: nowrap; }
.rf-veh-ticks { display: flex; gap: 1rem; flex: 1; }
.rf-veh-tick { margin: 0; white-space: nowrap; font-size: var(--fs-small); }
.rf-veh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem .5rem; }
.rf-veh-grid .rf-veh-vin { grid-column: span 2; }
.rf-veh-grid .rf-veh-owner { grid-column: 1 / -1; }
.rf-veh-add { justify-self: start; }
@media (max-width: 700px) { .rf-veh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rf-veh-head { flex-wrap: wrap; } }
/* v1.98: drive encryption, in the backup drive list. */
.backup-drives .enc-on { color: var(--success, var(--ok)); }
.backup-drives .enc-off, .backup-drives .enc-suspended { color: var(--danger); font-weight: 600; }
.backup-drives .enc-unknown { color: var(--muted); }
.backup-drives [class^="enc-"] .bi { width: .9rem; height: .9rem; vertical-align: -2px; }

/* v1.99: the backup reminder and an unencrypted SSD sit with the counts, in the same row as Overdue:
 * the row wraps, every chip at least as wide as a count, the reminders as wide as their words. */
.hero-counts { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-counts .hero-count { flex: 0 0 auto; min-width: 7.5rem; }
.hero-count.hc-backup { --hc-edge: #6ee7b7; }
.hero-count.hc-backup.hc-alert, .hero-count.hc-encrypt { --hc-edge: #ff6b6b; }
.hero-count.hc-alert.hc-backup, .hero-count.hc-encrypt { background: rgba(255,80,80,.24); }
/* v1.100: after Save Changes, what keeps a part from its green check is outlined in red. */
.rf-section .rf-missing { outline: 2px solid var(--danger, var(--danger)); outline-offset: -1px; }
.rf-actions .rf-next-missing { color: var(--danger, var(--danger)); border-color: var(--danger, var(--danger)); }
.rf-section .rf-missing.rf-missing-flash { outline-width: 4px; }
.rf-section .rf-none.rf-missing, .rf-section .rf-empty.rf-missing { padding: .25rem .5rem; color: var(--danger, var(--danger)); }
/* v1.100: the sidebar shows when each case was opened, and how long ago, under the Subject Name. */
.case-item-meta .cim-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-item .case-item-opened { display: flex; align-items: center; gap: .3rem; margin-top: .1rem; font-size: var(--fs-tiny); font-variant-numeric: tabular-nums; white-space: nowrap; }
.case-item-opened .bi { width: .8rem; height: .8rem; flex: none; }

/* v1.101: General Files: sortable headings and the Age column. */
.general-table .th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-weight: inherit; }
.general-table .th-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.general-table .th-arrow::after { content: ""; display: inline-block; width: .7rem; color: var(--muted); }
.general-table th[aria-sort="ascending"] .th-arrow::after { content: "▲"; font-size: .6rem; color: var(--accent); }
.general-table th[aria-sort="descending"] .th-arrow::after { content: "▼"; font-size: .6rem; color: var(--accent); }
.general-table .age-cell { text-align: right; font-variant-numeric: tabular-nums; }

/* v1.101: INDEPENDENT CASES header: nothing overlaps. The bell is a badge on the folder, and the
 * count keeps its distance from the name. */
.op-head > .op-folder { position: relative; }
.op-folder .folder-bell { position: absolute; top: -.35rem; right: -.35rem; margin: 0; line-height: 0; background: var(--surface); border-radius: 50%; padding: 1px; }
.op-folder .folder-bell .bi { width: .8rem; height: .8rem; }
.op-head > .op-count { flex: none; margin-left: .4rem; }
#sidebar .general-group > .op-head > .op-text { flex: 1 1 auto; min-width: 0; }

/* v1.102: backing up to a shared folder on another PC. */
.backup-drives .enc-network { color: var(--muted); }
.backup-drives .arch-opt.backup-off { opacity: .6; }
.backup-drives .backup-net-remove { margin-left: auto; align-self: center; }
.backup-net-open { display: flex; justify-content: flex-start; margin-top: .5rem; }
.backup-net-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; margin-top: .6rem; }
.backup-net-row > p { grid-column: 1 / -1; margin: 0; }

/* v1.103: the Mission timeline on the home page is the Details tab's slim line with small circles. */
.op-timeline-section .mini-tl { margin-top: .4rem; }
.op-timeline-section .mini-tl-title { display: none; }
/* v1.104: a PDF attached to an exhibit: its first page on the tile, with a PDF badge. */
.rf-photo-pdf { position: absolute; right: 4px; bottom: 4px; z-index: 1; padding: .05rem .5rem; background: var(--danger); color: #fff; font-size: var(--fs-tiny); font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.rf-photo img.rf-thumb-pdf { object-fit: contain; object-position: top center; background: #fff; }
.form-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
@media (max-width: 640px) { .form-row2 { grid-template-columns: 1fr; } }
/* v1.106: Recently Deleted (Vault panel). */
.bin-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.bin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .6rem; align-items: center; padding: .5rem .75rem; border: 1px solid var(--border); border-left: 4px solid var(--danger); background: var(--surface); }
.bin-row .bin-what { min-width: 0; }
.bin-row .bin-when { white-space: nowrap; }
@media (max-width: 760px) { .bin-row { grid-template-columns: 1fr; } .bin-row .bin-when { white-space: normal; } }
/* v1.106: Search Inside Cases. */
.deep-search-btn { width: 100%; justify-content: center; margin: 0; }
.sidebar-tools { flex-wrap: wrap; }
.sidebar-tools > .deep-search-btn { flex: 0 0 100%; }
.deep-results { display: grid; gap: .7rem; max-height: 60vh; overflow: auto; margin: .4rem 0; }
.deep-case { border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--surface); padding: .5rem .75rem; }
.deep-case h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; margin: 0 0 .35rem; font-size: var(--fs-text); }
.deep-case ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.deep-case a { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .6rem; padding: .25rem .25rem; color: var(--text); text-decoration: none; }
.deep-case a:hover, .deep-case a:focus-visible { background: var(--accent-soft); }
.deep-case a strong { font-size: var(--fs-small); color: var(--muted); font-weight: 600; overflow-wrap: anywhere; }
.deep-snippet { font-size: var(--fs-small); overflow-wrap: anywhere; }
@media (max-width: 640px) { .deep-case a { grid-template-columns: 1fr; } }
/* v1.106: Restore cases from a full backup. */
.restore-list { display: grid; gap: .35rem; max-height: 55vh; overflow: auto; margin: .4rem 0; }
.restore-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .2rem .7rem; align-items: center; padding: .5rem .75rem; border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--surface); cursor: pointer; }
.restore-row.restore-exists { border-left-color: var(--warn); }
.restore-row .restore-note { grid-column: 2 / -1; }
.restore-row .restore-meta { color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .restore-row { grid-template-columns: auto minmax(0, 1fr); } .restore-row .restore-meta { grid-column: 2; white-space: normal; } }

/* ---------- v1.106: design polish ---------- */
/* (8) One colour per status, everywhere: Open blue, Closed slate grey, Archived purple. */



.status-open { background: var(--st-open-soft); color: var(--st-open); }
.status-closed { background: var(--st-closed-soft); color: var(--st-closed); }
.status-archived { background: var(--st-archived-soft); color: var(--st-archived); }
.hero-count.hc-open { --hc-edge: #7cc4ff; }
.hero-count.hc-closed { --hc-edge: #cbd5e1; }
.hero-count.hc-archived { --hc-edge: #c4b5fd; }
.case-tile.status-closed svg { color: var(--st-closed); }
.case-tile.status-archived svg { color: var(--st-archived); }

/* (9) The banner's chips the same width, spread across the row. */
.hero-counts .hero-count { flex: 1 1 0; min-width: 8.5rem; max-width: 12rem; }

/* (10) Empty lists: an icon and the hint in a soft dashed box. */
.empty-note { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .75rem 1rem; margin: .4rem 0; border: 1px dashed var(--box-line, var(--border)); background: color-mix(in srgb, var(--surface) 70%, transparent); text-align: center; }
.empty-note > svg { width: 1.35rem; height: 1.35rem; flex: none; }
.empty-state > svg { width: 1.6rem; height: 1.6rem; display: block; margin: 0 auto .4rem; }
.empty-state.small { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.empty-state.small > svg { margin: 0; width: 1.3rem; height: 1.3rem; }

/* (11) Every section heading in the same style: capitals, a little letter spacing. */
.section-title { text-transform: uppercase; letter-spacing: .05em; }

/* (12) Grey hint text a little darker, easier to read on the off-white background. */




/* (13) Where the keyboard is: a clear blue outline on every button, link and tab. */
:where(button, a[href], summary, [role="button"], [role="tab"], .tab, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }
.privacy-screen :focus-visible { outline: none !important; }

/* (14) Sidebar: even spacing, and the status colour on each case's left edge. */
.sidebar .case-list > li + li, .sidebar .op-cases > li + li { margin-top: .3rem; }
.case-item.st-open { border-left: 3px solid var(--st-open); }
.case-item.st-closed { border-left: 3px solid var(--st-closed); }
.case-item.st-archived { border-left: 3px solid var(--st-archived); }

/* ---------- v1.107 ---------- */
/* The banner chips never clip their words: all as wide as the widest one needs (--chip-w is
 * measured in welcomeHero), so they stay the same width. */
.hero-counts .hero-count { min-width: var(--chip-w, 8.5rem); }
.hero-count > span { white-space: nowrap; }
/* On a case's Details tab, the timeline circles of the case number on screen glow green. */
.mini-tl-dot.mini-tl-mine { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 30%, var(--surface)); box-shadow: 0 0 0 3px var(--ok-soft), 0 0 10px color-mix(in srgb, var(--ok) 70%, transparent); animation: mine-glow 2.4s ease-in-out infinite; z-index: 1; }
.mini-tl-dot.mini-tl-mine.mini-tl-group { color: var(--ok); }
.mini-tl-dot.mini-tl-mine.overdue { background: var(--danger); border-color: var(--ok); }
@keyframes mine-glow { 0%, 100% { box-shadow: 0 0 0 3px var(--ok-soft), 0 0 6px color-mix(in srgb, var(--ok) 50%, transparent); } 50% { box-shadow: 0 0 0 4px var(--ok-soft), 0 0 14px color-mix(in srgb, var(--ok) 85%, transparent); } }
@media (prefers-reduced-motion: reduce) { .mini-tl-dot.mini-tl-mine { animation: none; } }
.mini-tl-key { display: inline-flex; align-items: center; gap: .35rem; color: var(--ok); font-weight: 600; }
.mini-tl-key-dot { width: .6rem; height: .6rem; border-radius: 50% !important; border: 2px solid var(--ok); background: color-mix(in srgb, var(--ok) 30%, var(--surface)); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 60%, transparent); }
.date-order-table { width: 100%; border-collapse: collapse; margin: .4rem 0 .6rem; font-size: var(--fs-text); }
.date-order-table th, .date-order-table td { text-align: left; padding: .25rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.date-order-table th { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* ---------- v1.110 ---------- */
/* Offense: Offense Classification, Address and Type of Location are two columns wide, so the
 * written-out IUCR wording ("Manufacture and Delivery: Hallucinogen") is never cut off. */
.rf-grid .rf-off-wide { grid-column: span 2; }
@media (max-width: 600px) { .rf-grid .rf-off-wide { grid-column: auto; } }

/* v1.111: Field Notes in plain view (Details tab and Mission page). */
.field-notes-card { margin: .8rem 0; }
.fn-cards { display: grid; gap: .6rem; }
.fn-card { border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--surface); padding: .5rem .75rem; }
.fn-card-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.fn-text { max-height: 18rem; overflow: auto; font-size: var(--fs-text); line-height: 1.5; padding-right: .25rem; }
.fn-text > :first-child { margin-top: 0; }
.close-related { border: 1px solid var(--border); border-left: 4px solid var(--accent); padding: .5rem .75rem; margin: .6rem 0; background: var(--surface-2, var(--surface)); }
/* v1.111: General Files name columns, left aligned. */
.general-table th.name-cell, .general-table td.name-cell { text-align: left; }
.general-table td.name-last { font-weight: 600; }
/* Nine columns fit at 1366 wide: a little less padding between them. */
table.data-table.general-table th, table.data-table.general-table td { padding-left: .5rem; padding-right: .5rem; }

/* ---------- v1.111: Secure Locker ---------- */
.locker-icon .bi { color: var(--warn); }
.locker-card { max-width: 46rem; padding: 1rem 1.25rem; }
.locker-points { margin: .4rem 0 .8rem 1.1rem; display: grid; gap: .25rem; }
.locker-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.locker-note { display: flex; align-items: center; gap: .35rem; }
.locker-section { margin: 1rem 0 1.4rem; }
.locker-section .section-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.locker-section .section-head input[type=search] { width: 16rem; max-width: 100%; }
.locker-table td { vertical-align: middle; }
.locker-table td.col-actions { text-align: right; }
.secret-wrap { display: inline-flex; align-items: center; gap: .2rem; font-family: var(--font); }
.secret-text { min-width: 8ch; }
.secret-edit { display: flex; gap: .3rem; align-items: center; }
.secret-edit input { flex: 1 1 auto; min-width: 0; font-family: var(--font); }
.recovery-key { font: 700 1.3rem/1.6 var(--font); letter-spacing: .04em; padding: .75rem 1rem; margin: .6rem 0; background: var(--surface-2); border: 1px dashed var(--accent); text-align: center; word-break: break-all; user-select: all; }
.locker-drop.drag { outline: 2px dashed var(--accent); outline-offset: 4px; }
.locker-img { text-align: center; overflow: auto; max-height: 75vh; }
.locker-img img { max-width: 100%; }
.locker-text { white-space: pre-wrap; max-height: 75vh; overflow: auto; }
.locker-tile .op-folder-art .bi { color: var(--warn); }
.locker-has-notes { margin-right: .3rem; }
.locker-tabs .tab-main { display: inline-flex; align-items: center; gap: .4rem; }
.locker-tabs .tab-count { margin-left: .2rem; min-width: 1.4rem; padding: 0 .25rem; font-size: var(--fs-tiny); line-height: 1.3rem; text-align: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }

a.locker-tile, a.locker-tile:hover, a.locker-tile * { text-decoration: none !important; color: inherit; }

/* ---------- v1.112 ---------- */
.year-tile.placeholder-tile .op-folder-art { opacity: .55; }
.year-tile.placeholder-tile .op-folder-name { color: var(--muted); }
.locker-section .op-folders { justify-content: flex-start; }

/* v1.114: arrest charges on two lines (nothing cut off); properties: a short Inventory # and a
   wide Description. */
.arrest-grid.arrest-g-property { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
@media (max-width: 820px) { .arrest-grid.arrest-g-property { grid-template-columns: minmax(0, 1fr); } }
.charges-table { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.charges-table td.charge-card { padding: .5rem .75rem .75rem; background: var(--surface-2); border: 1px solid var(--border); }
.charge-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .45rem .75rem; }
.charge-grid > * { min-width: 0; }
.charge-grid > .charge-statute { grid-column: span 3; order: 1; }
.charge-grid > .charge-degree { grid-column: span 2; order: 2; }
.charge-grid > .charge-level { grid-column: span 2; order: 3; }
.charge-grid > .charge-counts { grid-column: span 1; order: 4; }
.charge-grid > .charge-description { grid-column: span 6; order: 5; }
.charge-grid > .charge-victim { grid-column: span 2; order: 6; }
.charge-grid .combo { width: 100%; }
.charges-table .charge-grid input, .charges-table .charge-grid select { min-width: 0; width: 100%; }
@media (max-width: 820px) { .charge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .charge-grid > * { grid-column: span 2 !important; } }

/* v1.115: the Arrest tab of a case whose arrest report is on another RD. */
.arrest-ref-card { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; padding: .5rem .75rem; margin-bottom: .75rem; }
.arrest-ref-card .btn { width: auto; margin-left: auto; }
.close-arrest-ref { margin: .25rem 0 .5rem; }

/* v1.116: CLOSED FILES (grey) and ARCHIVED (amber) on the landing page, under Other Files. */
.dashboard .op-folders-section.closed-files-section { border-left-color: var(--muted); }
.dashboard .op-folders-section.archived-section { border-left-color: var(--warn); }
.dashboard .ov-btn-closed { color: #4b5563; border-color: color-mix(in srgb, var(--muted) 45%, var(--border)); }
.dashboard .ov-btn-archived { color: #8a5a12; border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.dashboard .ov-btn-closed:hover { background: color-mix(in srgb, var(--muted) 12%, var(--surface)); }
.dashboard .ov-btn-archived:hover { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }

/* v1.117: timeline colours by suspect: the event's edge and marker in its colour, a suspect tag,
   the colour swatches on the form, and a key of the suspects above the list. */
.tl-modern .tl-item.tl-colored:not(.overdue) .tl-body { border-left-color: var(--tl-color); background: color-mix(in srgb, var(--tl-color) 5%, var(--surface)); }
.tl-modern .tl-item.tl-colored:not(.overdue)::before { background: var(--tl-color); box-shadow: 0 0 0 2px var(--tl-color); }
.tl-suspect { font-size: var(--fs-tiny); font-weight: 700; padding: .05rem .5rem; color: var(--tl-color, var(--muted)); border: 1px solid color-mix(in srgb, var(--tl-color, var(--border)) 60%, var(--border)); background: color-mix(in srgb, var(--tl-color, transparent) 10%, var(--surface)); }
.tl-swatches { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; min-height: 2.1rem; }
.tl-swatch { width: 1.45rem; height: 1.45rem; padding: 0; border: 2px solid var(--surface); background: var(--sw, var(--surface)); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.tl-swatch.on { box-shadow: 0 0 0 2px var(--text); }
.tl-swatch-none { display: grid; place-items: center; font-size: var(--fs-text); line-height: 1; color: var(--muted); background: var(--surface); }
@media (min-width: 821px) { .timeline-form .tl-suspect-field, .timeline-form .tl-color-field { grid-column: span 2; } }
.tl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .1rem 0 .7rem; }
.tl-legend-title { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-right: .2rem; }
.tl-legend-chip { position: relative; display: inline-flex; align-items: stretch; border: 1px solid var(--border); background: var(--surface); }
.tl-legend-chip.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
.tl-legend-dot { width: 1.3rem; border: 0; border-right: 1px solid var(--border); background: var(--sw); cursor: pointer; padding: 0; }
.tl-legend-name { border: 0; background: none; padding: .25rem .5rem; font: inherit; font-size: var(--fs-small); cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; color: var(--text); }
.tl-legend-name .count { font-size: var(--fs-tiny); color: var(--muted); }
.tl-recolor { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1.45rem); gap: .3rem; padding: .5rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg, var(--shadow)); }
.mini-tl-dot.has-color:not(.overdue) { border-color: var(--dot-color); background: color-mix(in srgb, var(--dot-color) 45%, var(--surface)); color: var(--dot-color); }

/* v1.118: Quick Links as a slim bar (one row: title, tabs, the tab's links side by side, More).
   More opens the full panel as before; the sidebar's Closed / Archived row matches its height. */
 /* v1.119: whole links only */

/* v1.118: the sidebar's CLOSED FILES and ARCHIVED side by side in one slim row while both are
   folded; opening one gives the panel room for its list. */

/* v1.118: a warning toast (amber edge) and a close button on the longer ones. */
.toast.warn { border-left-color: var(--warn); }
.toast { position: relative; }
.toast:has(> .toast-close) { padding-right: 2.25rem; }
.toast .toast-close { position: absolute; top: .3rem; right: .35rem; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none; color: var(--muted); font-size: var(--fs-sub); line-height: 1; cursor: pointer; }
.toast .toast-close:hover { color: var(--text); }
/* v1.118: the round buttons (top, Ask AI, Notes) a little smaller, so they cover less of the page
   (the page already has room under it to scroll its last buttons clear of them). */
.fab-dock .fab, .fab-dock .notes-fab { width: 2.6rem; height: 2.6rem; }
.fab-dock .top-fab svg.bi { width: 1.35rem; height: 1.35rem; }
.fab-dock { gap: .4rem; }
/* The two chips: a small folder, the name on one line, the count; no arrow. */

/* v1.118: the letterhead as one slim line on the Draft, Arrest and Link Chart tabs. */
.lh-summary { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; margin: 0 0 .7rem; border: 1px solid var(--border); background: var(--surface); }
.lh-thumb { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); overflow: hidden; flex: none; }
.lh-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.lh-sum-text { min-width: 0; overflow-wrap: anywhere; }
.lh-dialog { width: min(44rem, 92vw); }
.profile-letterhead { margin-top: 1rem; }
.profile-letterhead h4 { margin: 0 0 .4rem; }
/* v1.118: an empty landing section is one header line. */
.dashboard .ov-panel.ov-empty { padding-top: .75rem; padding-bottom: .75rem; }
.dashboard .ov-panel.ov-empty > .section-head { margin: 0; padding: 0; border-bottom: 0; }
.general-table td.gen-mission a { white-space: nowrap; } /* v1.118 */
/* v1.118: the Details tab's folded boxes are slim rows, with their count beside the title. */
.fold-head .fold-count { margin-left: .55rem; font-size: var(--fs-tiny); }
.fold-head .fold-count.zero { opacity: .55; }
#main .contacts.foldable.folded { padding-top: .5rem; padding-bottom: .5rem; }
#main .cv-boxed.foldable.folded > .fold-head h3 { margin: 0; }
.tb-status { column-gap: .5rem; } /* v1.137: icons only (no captions); the hover box names each */
/* v1.118: the section buttons readable in dark mode too (Closed grey and Archived amber lighter). */
:root[data-theme="dark"] .dashboard .ov-btn-closed { color: #c7ced8; }
:root[data-theme="dark"] .dashboard .ov-btn-archived { color: #e3ad55; }
:root[data-theme="dark"] .dashboard .ov-btn-mission { color: #7fb0f0; }
:root[data-theme="dark"] .dashboard .ov-btn-general { color: var(--st-archived); }
:root[data-theme="dark"] .dashboard .ov-btn-other { color: #5fc4b8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dashboard .ov-btn-closed { color: #c7ced8; }
  :root:not([data-theme="light"]) .dashboard .ov-btn-archived { color: #e3ad55; }
  :root:not([data-theme="light"]) .dashboard .ov-btn-mission { color: #7fb0f0; }
  :root:not([data-theme="light"]) .dashboard .ov-btn-general { color: var(--st-archived); }
  :root:not([data-theme="light"]) .dashboard .ov-btn-other { color: #5fc4b8; }
}

.toasts { bottom: calc(var(--ql-dock-h, 0px) + 4.4rem); }
.tb-status > .power-btn { width: 2.3rem; height: 2.3rem; } /* v1.119: as tall as the other top-bar icons, so the captions line up */
/* v1.119: Details' first row: the Status hint as one line under it; no Closed box until closed. */
.details-grid.details-row-title > .row-hint { grid-column: 1 / -1; margin: -.2rem 0 0; }
.details-grid.details-row-title.not-closed { grid-template-columns: minmax(0, 1.6fr) minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 900px) { .details-grid.details-row-title.not-closed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.details-grid > .field[hidden] { display: none; }

/* v1.119: a Buy's narcotic, amount and money; the Buy Summary and Print Timeline buttons. */
.timeline-form .tl-buy-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: inherit; }
.timeline-form .tl-buy-row[hidden] { display: none; }
@media (max-width: 820px) { .timeline-form .tl-buy-row { grid-template-columns: 1fr; } }
.tl-qty { display: flex; gap: .35rem; }
.tl-qty > input { flex: 1; min-width: 0; }
.tl-qty > select { width: 5.5rem; flex: none; }
.tl-filter-row { display: flex; align-items: flex-start; gap: .6rem; flex-wrap: wrap; }
.tl-filter-row > .tl-filters { flex: 1; }
.tl-tools { display: flex; gap: .35rem; margin-bottom: .9rem; }
.tl-buy { font-size: var(--fs-small); font-weight: 600; color: var(--text); margin-top: .15rem; }
.badge.buy { background: var(--ok-soft); color: var(--ok); }
.buy-summary { min-width: min(46rem, 90vw); }
.buy-group { margin: .8rem 0 1rem; }
.buy-group-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.tl-legend-dot.static { display: inline-block; width: .9rem; height: .9rem; border: 1px solid var(--border); cursor: default; flex: none; }
.buy-table tfoot th { text-align: left; border-top: 2px solid var(--border); }
.copy-list { display: grid; gap: .35rem; margin: .6rem 0; } .copy-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem; border: 1px solid var(--border); background: var(--surface-2); }
/* v1.119: the person view. */
.person-view { min-width: min(48rem, 90vw); }
.person-variants { padding: .5rem .5rem; background: var(--warn-soft, #fff4dc); border-left: 3px solid var(--warn, var(--warn)); }
.person-table tr.similar-row td { background: var(--warn-soft, #fff8e8); }
.person-event-list { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .25rem; }
.person-event-list li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto auto; gap: .6rem; align-items: baseline; padding: .25rem .5rem; background: var(--surface-2); }
.suspect-row .person-btn, .buy-group-head .person-btn { align-self: end; color: var(--accent); }
.suspect-row { grid-template-columns: minmax(11rem, 1.4fr) 13.5rem 2.4rem minmax(12rem, 2fr) 8.5rem 1.8rem 1.8rem; }
@media (max-width: 1150px) { .suspect-row { grid-template-columns: 1fr 13.5rem 2.4rem; } }
/* v1.119: the Mission's closing progress. */
.op-progress { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.op-progress:empty { display: none; }
.op-progress-bar { width: 12rem; height: .55rem; background: var(--surface-2); border: 1px solid var(--border); }
.op-progress-fill { display: block; height: 100%; background: var(--ok); }
.closing-state { font-size: var(--fs-small); font-weight: 600; }
.closing-state.closed, .closing-state.ready { color: var(--ok); }
.closing-state.ref { color: var(--accent); }
.closing-state.open { color: var(--warn, var(--warn)); }
.closing-state.archived { color: var(--muted); }
/* v1.119: a tab with changes still on their way to the SSD. */
.tabs a.tab.unsaved::after { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-left: .35rem; background: var(--warn, var(--warn)); vertical-align: middle; }

/* v1.121: Quick Links slide in from the right (the bottom bar is gone). */
.ql-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(27rem, 94vw); box-sizing: border-box; padding: 1rem 1rem 1.25rem;
  background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow-y: auto;
  transform: translateX(100%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s; }
.ql-panel.open { transform: none; visibility: visible; transition: transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .ql-panel, .ql-panel.open { transition: none; } }
.ql-panel-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.ql-panel-head h2 { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: var(--fs-sub); text-transform: uppercase; letter-spacing: .04em; }
.ql-panel-head .ql-panel-close { margin-left: auto; }
.ql-panel .quick-links-box .ql-head { flex-wrap: wrap; row-gap: .4rem; }
/* v1.123: one link per row, all the same size, the name on one line. */
.ql-panel .quick-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; height: auto; }
.ql-panel .quick-link, .ql-panel .ql-edit-wrap > .quick-link, .ql-panel .ql-choice-wrap > .quick-link { min-height: 0; height: 2.9rem; padding: .25rem .75rem; gap: .65rem; }
.ql-panel .quick-link .ql-icon { width: 2rem; height: 2rem; font-size: 1rem; }
.ql-panel .quick-link .ql-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-tile.ql-open-btn.on, #btn-side-links.on { border-color: var(--accent); color: var(--accent); }
.side-found-head { list-style: none; padding: .5rem .5rem .25rem; text-transform: uppercase; letter-spacing: .05em; }

/* v1.123: tables line up. Dates in fixed month / day / year columns (Consolas: one ch per letter);
   status pills all one width; subject names in Last / First / Middle columns. */
.date-cols { display: inline-grid; grid-template-columns: 9.1ch 3.1ch 4.1ch; column-gap: .35ch; text-align: left; font-variant-numeric: tabular-nums; }
.date-cols > span { white-space: nowrap; }
:is(.ops-table, .op-cases-table, .general-table) .pill { display: inline-flex; justify-content: center; box-sizing: border-box; width: 7.3em; white-space: nowrap; }
.op-cases-table :is(th, td).name-cell { text-align: left; }
.op-cases-table td.name-last { white-space: nowrap; }
.op-cases-table td.name-mid { width: 3rem; }
table.op-cases-table :is(th, td) { padding-left: .5rem; padding-right: .5rem; }
table.op-cases-table td.op-closing { width: 9.5rem; min-width: 9.5rem; line-height: 1.25; }
.op-cases-table .op-case-links { flex-wrap: nowrap; gap: .3rem; margin-top: 0; }
.op-cases-table .op-tab-link { padding: .25rem .5rem; }
@media (max-width: 1500px) {
  .op-cases-table .op-case-links { display: grid; grid-template-columns: 1fr; gap: .25rem; }
  .op-cases-table .op-tab-link { justify-content: center; }
}
/* v1.138: the suspect sits on the right of the event box, the same width on every event, so the
   names line up down the timeline. */
.tl-body:has(> .tl-who) { display: flex; align-items: center; gap: .9rem; }
.tl-main { flex: 1 1 auto; min-width: 0; }
.tl-who { flex: none; display: flex; }
.tl-who .tl-suspect { box-sizing: border-box; min-width: var(--tl-who-w, auto); max-width: 14rem; text-align: center; padding: .2rem .6rem; overflow-wrap: anywhere; }
@media (max-width: 640px) { .tl-who .tl-suspect { max-width: 8rem; } }
/* v1.138: the top-left logo is the banner's vault door: navy with gold bolts; the handle turns a
   quarter when the pointer is over CaseVault. */
.brand-vault { flex: none; width: 30px; height: 30px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 6; }
.brand-vault .hv-frame { fill: var(--accent-soft); stroke-width: 5; }
.brand-vault .hv-door { fill: var(--surface); }
.brand-vault .hv-ring { stroke-width: 3; stroke-dasharray: 6 8; }
.brand-vault .hv-hinge { fill: currentColor; stroke: none; }
.brand-vault .hv-bolt { fill: var(--warn); stroke: none; }
.brand-vault .hv-hub { fill: currentColor; }
.brand-vault .hv-wheel { stroke-width: 8; stroke-linecap: square; transform-origin: 60px 60px; transition: transform .6s ease-in-out; }
.brand:hover .brand-vault .hv-wheel, .brand:focus-visible .brand-vault .hv-wheel { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .brand-vault .hv-wheel { transition: none; } }
/* v1.139: Training shows each certificate as a card of the same size: a picture of its first page
   (any shape fits inside the same frame, centred), then its name, then size, date and Delete. */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .9rem; padding: .25rem 0 .75rem; }
.cert-card { display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--lift, var(--shadow)); min-width: 0; }
.cert-card:hover { box-shadow: var(--lift-hover, var(--shadow-lg)); }
.cert-open { all: unset; box-sizing: border-box; display: flex; flex-direction: column; flex: 1 1 auto; cursor: pointer; }
.cert-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cert-art { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 11 / 8.5; background: var(--surface-2); border-bottom: 1px solid var(--border); overflow: hidden; }
.cert-art .cert-icon .bi, .cert-art .cert-icon svg { width: 2.6rem; height: 2.6rem; }
.cert-art.has-thumb .cert-icon { display: none; }
.cert-thumb { width: 100%; height: 100%; object-fit: contain; padding: .45rem; box-sizing: border-box; }
.cert-name { padding: .55rem .7rem .2rem; font-weight: 700; text-align: center; line-height: 1.3; min-height: calc(2 * 1.3em); overflow-wrap: anywhere; display: flex; align-items: flex-start; justify-content: center; flex: 1 1 auto; }
.cert-foot > .muted { white-space: nowrap; }
.cert-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .15rem .45rem .35rem .7rem; }
/* v1.140: a certificate's details on its card: what it is, when and how long; the expiry date (amber
   within 90 days, red once expired); the pencil beside Delete. */
.cert-facts { display: block; text-align: center; padding: 0 .7rem .3rem; }
.cert-exp { display: block; margin: 0 auto .45rem; padding: .1rem .5rem; font-size: var(--fs-tiny); font-weight: 700; border: 1px solid var(--border); color: var(--muted); }
.cert-exp-notice { color: var(--warn); border-color: var(--warn); }
.cert-exp-soon { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.cert-exp-expired { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.cert-card.cert-expired { border-color: var(--danger); }
.cert-tools { display: inline-flex; gap: .15rem; }
.cert-form-row { display: grid; grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr); gap: .75rem; }
@media (max-width: 560px) { .cert-form-row { grid-template-columns: 1fr; } }
.attention-row.att-cert-notice { border-left: 3px solid var(--st-pending); }
.attention-row.att-cert-soon { border-left: 3px solid var(--warn); background: var(--warn-soft); }
.attention-row.att-cert-notice .att-what, .attention-row.att-cert-soon .att-what { color: var(--warn); }
/* v1.141: Timeline → Group by Suspect: a heading for each suspect (their colour, name and count). */
.tl-modern .tl-group-head { display: flex; align-items: center; gap: .55rem; margin: 1rem 0 .5rem calc(var(--tl-date) + var(--tl-gap)); padding: .35rem .7rem; border-left: 4px solid var(--tl-color, var(--border)); background: color-mix(in srgb, var(--tl-color, transparent) 8%, var(--surface)); }
.tl-modern .tl-group-head strong { font-size: var(--fs-sub); }
.tl-modern .tl-group-head .count { color: var(--muted); font-size: var(--fs-small); }
.tl-modern .tl-group-head.none { border-left-color: var(--border); }
.tl-group-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* v1.141: Cards / List for a folder's files, beside Close. */
.view-switch { display: inline-flex; }
.view-switch .view-btn + .view-btn { margin-left: -1px; }
.view-switch .view-btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); position: relative; }
.tl-grouped .tl-who { display: none; } /* v1.141: the group heading names the suspect */
/* v1.142: an Arrest stands out on the Timeline: a red badge with handcuffs, a red square on the line
   (the others are round) and a thick red edge, whatever the suspect's colour (their name box keeps it). */
.badge.arrest { display: inline-flex; align-items: center; gap: .3rem; background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.tl-cuffs { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tl-modern .tl-item.arrest .tl-body, .tl-modern .tl-item.arrest.tl-colored:not(.overdue) .tl-body { border-left: 6px solid var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
html .tl-modern .tl-item.arrest::before, html .tl-modern .tl-item.arrest.tl-colored:not(.overdue)::before { background: var(--danger); box-shadow: 0 0 0 2px var(--danger); border-radius: 0 !important; }
.tl-legend-cuffs { display: inline-flex; color: var(--danger); } /* v1.143: this suspect was arrested */
.tl-legend-cuffs .tl-cuffs { width: .95em; height: .95em; }