/* vTracker: a blue workbench palette for a case register.
   Blue identifies actions; amber identifies pending work. */

:root {
  color-scheme: dark;
  --ground: #10151d;
  --sheet: #181f2a;
  --ink: #edf3fc;
  --muted: #a0aec0;
  --rule: #303e52;
  --rule-strong: #63758e;
  --hover: #202d40;
  --docket: #80b7ff;
  --docket-ink: #10151d;
  --accent-soft: #1d304a;
  --accent-border: #3c5e88;
  --pending: #e0a33b;
  --pending-ink: #efbd66;
  --pending-wash: #292419;
  --complete: #80b7ff;
  --error: #f28b82;
  --focus: #80b7ff;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 8px;
  --measure: 1200px;
}

* { box-sizing: border-box; }

/* Always reserve the scrollbar's space. Otherwise pages long enough to scroll (dashboard,
   analytics) are 15 px narrower than short ones, and the centred header and content jump
   sideways when moving between them. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--ground);
  color: var(--ink);
}

a { color: var(--docket); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

h1 { font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: 1.125rem; font-weight: 650; margin: 2.25rem 0 0.75rem; }

/* ---- Top bar ------------------------------------------------------------ */

.topnav {
  background: var(--sheet);
  border-bottom: 1px solid var(--rule);
}
.topnav-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  min-height: 3.25rem;
}
.brand { font-weight: 750; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.nav-links { display: flex; gap: 1.25rem; }
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.9rem 0 calc(0.9rem - 2px);
  border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--docket); font-weight: 600; }
.logout-form { margin-left: auto; }
.logout-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  font: 600 14px/1.5 Arial, "Helvetica Neue", sans-serif;
  white-space: nowrap;
}
.logout-form button:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--docket);
}

main { max-width: var(--measure); margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* ---- Page header -------------------------------------------------------- */

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-header p { margin: 0.35rem 0 0; color: var(--muted); }
.page-header strong { color: var(--ink); font-weight: 650; }
.page-header .pending-count { color: var(--pending-ink); }

/* ---- Buttons ------------------------------------------------------------ */

.button,
button.primary,
.filters button,
.form-actions button,
.login-form button {
  display: inline-flex;
  align-items: center;
  background: var(--docket);
  color: var(--docket-ink);
  border: 1px solid var(--docket);
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.button:hover, button.primary:hover, .filters button:hover, .form-actions button:hover, .login-form button:hover {
  filter: brightness(1.08);
}
button.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
  cursor: pointer;
}
button.secondary:hover { border-color: var(--muted); background: var(--hover); }
.actions button.primary { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }

/* ---- Filters ------------------------------------------------------------ */

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}
.status-tabs {
  display: inline-flex;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 3px;
}
.status-tabs a {
  padding: 0.3rem 0.85rem;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 550;
}
.status-tabs a:hover { color: var(--ink); }
.status-tabs a[aria-current="page"] { background: var(--ink); color: var(--sheet); }

.filters { display: flex; gap: 0.5rem; margin: 0; }
.filters input {
  width: min(22rem, 60vw);
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.875rem;
}

/* ---- The register (tables) ------------------------------------------------ */

.register-wrap {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow-x: auto;
}
.register {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.register th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sheet);
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.register td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.register tbody tr:hover td { background: var(--hover); }
.register td.nowrap, .register th.nowrap { white-space: nowrap; }
.register a { font-weight: 600; text-decoration: none; }
.register a:hover { text-decoration: underline; }
.register .secondary-line { display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }

/* The flag: pending cases get an amber tab on the row's left edge. */
.register tr.pending td:first-child { box-shadow: inset 4px 0 0 var(--pending); }
.register tr.pending td { background: var(--pending-wash); }
.register tr.pending:hover td { background: var(--pending-wash); filter: brightness(0.985); }

.status { white-space: nowrap; font-weight: 600; }
.status.pending { color: var(--pending-ink); }
.status.complete { color: var(--muted); font-weight: 500; }

.register td.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }
.register td.empty a { font-weight: 600; }

.review-log { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: 0.8125rem; }
.review-log li + li { margin-top: 0.15rem; }
.review-log .who { color: var(--ink); }
.review-log time { white-space: nowrap; }
/* Long follow-up histories (hundreds on one case at production volume) fold away after the
   three newest. */
.review-more { margin-top: 0.3rem; font-size: 0.8125rem; }
.review-more summary { overflow-wrap: anywhere; cursor: pointer; color: var(--docket); font-weight: 600; width: max-content; }
.review-more[open] summary { margin-bottom: 0.15rem; }

/* The daybook: the dashboard lists cases under the date they were requested, one heading per
   day, the way a paper case register is kept. */
.daybook .day-row th {
  position: static;
  background: var(--sheet);
  color: var(--ink);
  font-weight: 650;
  font-size: 0.8125rem;
  padding: 0.85rem 1rem 0.3rem;
  border-bottom: 1px solid var(--rule);
}
.daybook tbody:first-of-type .day-row th { padding-top: 0.55rem; }
.daybook .weekday { color: var(--muted); font-weight: 500; margin-right: 0.2rem; }
.register tbody:last-child tr:last-child td { border-bottom: none; }
/* The case table has actions and follow-ups that shouldn't wrap: on narrow screens it scrolls
   sideways inside its panel instead of squeezing into unreadable columns. */
.register.cases-detail { min-width: 48rem; }

.actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.actions form { margin: 0; }
.register th.actions-col { text-align: right; }
/* Words that only the stacked phone layout needs, where there are no column headers. */
.stack-label { display: none; }

/* ---- Pagination --------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.9rem;
  font-size: 0.875rem;
}
.pagination .page-info { color: var(--muted); margin-right: auto; }
.pagination a { text-decoration: none; font-weight: 600; }
.pagination .disabled { color: var(--rule-strong); }
.pagination .page-limit { color: var(--muted); }

/* ---- Analytics ---------------------------------------------------------- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0;
}
.figure-group {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
}
.figure-group h2 { margin: 0.5rem 0; font-size: 0.9375rem; }
.figure-group dl { margin: 0; }
.figure-group div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
}
.figure-group dt { color: var(--muted); }
.figure-group dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

.chart-panel {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem;
}
.trend-chart { width: 100%; height: auto; display: block; }
.gridline { stroke: var(--rule); stroke-width: 1; }
.axis-label { fill: var(--muted); font-size: 10px; font-family: inherit; }
.area { fill: var(--docket); fill-opacity: 0.08; stroke: none; }
.line { fill: none; stroke: var(--docket); stroke-width: 2; }
.point { fill: var(--docket); }
/* Pending in the chart uses the same amber as the pending flag on case rows. */
.line.pending-line { stroke: var(--pending); }
.point.pending-point { fill: var(--pending); }

.chart-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 2.25rem 0 0.75rem; }
.chart-heading h2 { margin: 0; }
.chart-key { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; color: var(--muted); }
.chart-key li { display: flex; align-items: center; gap: 0.45rem; }
.chart-key li::before { content: ""; width: 1.1rem; height: 2px; border-radius: 1px; background: var(--docket); }
.chart-key .key-pending::before { background: var(--pending); }
.chart-note { margin: 0.5rem 0 0; color: var(--muted); font-size: 0.8125rem; }

.breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1rem; margin-top: 2.25rem; }
.breakdowns h2 { margin: 0 0 0.75rem; }
.bar-breakdown { display: flex; flex-direction: column; gap: 0.55rem; }
.bar-row { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr max-content; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
.bar-label { color: var(--ink); }
.bar-track { background: var(--hover); border-radius: 3px; height: 8px; }
/* An SVG rect, not a div with style="width": the CSP forbids inline styles. */
.bar-fill { display: block; width: 100%; height: 100%; fill: var(--docket); }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.empty { color: var(--muted); }

/* ---- Forms -------------------------------------------------------------- */

.entity-form {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 28rem;
}
.entity-form label, .login-form label {
  display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.875rem; font-weight: 600;
}
.entity-form input, .entity-form select, .login-form input {
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 400;
}
.form-note { margin: 0; color: var(--muted); font-size: 0.875rem; }
.form-actions { display: flex; align-items: center; gap: 1rem; }
.form-actions a { color: var(--muted); text-decoration: none; font-size: 0.875rem; }
.form-actions a:hover { color: var(--ink); }
.error { color: var(--error); font-size: 0.8125rem; font-weight: 500; }

/* ---- Login -------------------------------------------------------------- */

.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-form {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(22rem, 100%);
}
.login-form h1 { font-size: 1.375rem; }
.login-form p.lede { margin: -0.5rem 0 0.25rem; color: var(--muted); font-size: 0.875rem; }
.login-form button { justify-content: center; padding: 0.6rem; }

/* ---- Small screens ------------------------------------------------------ */

@media (max-width: 640px) {
  .topnav-inner { gap: 1rem; padding: 0 1rem; }
  .nav-links { gap: 0.9rem; }
  main { padding: 1.25rem 1rem 3rem; }
  .page-header { flex-direction: column; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .filters input { width: 100%; }
  .register th, .register td { padding: 0.6rem 0.75rem; }
  .bar-row { grid-template-columns: 7rem 1fr max-content; }

  /* Dashboard and customer rows become stacked entries instead of a squeezed table:
     name and ID on the left, status (or date added) on the right, details below. */
  .daybook thead, .roster thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .daybook, .daybook tbody, .roster, .roster tbody,
  .daybook .day-row, .daybook .day-row th { display: block; }
  .daybook tr.case-row, .roster tr.customer-row {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--rule);
  }
  .daybook tr.case-row td, .roster tr.customer-row td { padding: 0; border: none; background: none; }
  .daybook tr.pending { background: var(--pending-wash); box-shadow: inset 4px 0 0 var(--pending); }
  .daybook tr.pending td:first-child { box-shadow: none; }
  .daybook td.who { grid-column: 1; }
  .daybook td.state { grid-column: 2; grid-row: 1; text-align: right; }
  .daybook td.what, .daybook td.from { grid-column: 1 / -1; color: var(--muted); font-size: 0.8125rem; }
  .daybook td.what { margin-top: 0.3rem; }
  .roster td.id { grid-column: 1; color: var(--muted); font-size: 0.8125rem; }
  .roster td.added { grid-column: 2; grid-row: 1; color: var(--muted); font-size: 0.8125rem; }
  .register tbody:last-child tr:last-child { border-bottom: none; }
  .daybook td.empty, .roster td.empty { display: block; }

  /* Customer detail: each case as an entry, so status, follow-ups and the actions (the page's
     main job) aren't off the edge of a sideways-scrolling table. */
  .register.cases-detail { min-width: 0; }
  .cases-detail thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .cases-detail, .cases-detail tbody { display: block; }
  .cases-detail tr.case-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "what what state"
      "when from from"
      "log  log  log"
      "acts acts acts";
    column-gap: 0.3rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--rule);
  }
  .cases-detail tr.case-row td { padding: 0; border: none; background: none; }
  .cases-detail tr.pending { background: var(--pending-wash); box-shadow: inset 4px 0 0 var(--pending); }
  .cases-detail tr.pending td:first-child { box-shadow: none; }
  .cases-detail .stack-label { display: inline; }
  .cases-detail .table-only { display: none; }
  .cases-detail .log-label { display: block; color: var(--ink); font-weight: 600; margin-bottom: 0.1rem; }
  .cases-detail td.what { grid-area: what; font-weight: 600; }
  .cases-detail td.state { grid-area: state; text-align: right; padding-left: 0.75rem; }
  .cases-detail td.when { grid-area: when; }
  .cases-detail td.from { grid-area: from; }
  .cases-detail td.when, .cases-detail td.from { color: var(--muted); font-size: 0.8125rem; margin-top: 0.15rem; }
  .cases-detail td.log { grid-area: log; margin-top: 0.5rem; font-size: 0.8125rem; }
  .cases-detail td.acts { grid-area: acts; margin-top: 0.65rem; }
  .cases-detail .actions { justify-content: flex-start; }
  .cases-detail td.empty { display: block; }
}
@media (max-width: 420px) {
  .topnav-inner { column-gap: 0.5rem; }
}

.subtitle { margin: 0.35rem 0 0; color: var(--muted); }
.subtitle a { font-weight: 600; text-decoration: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Refined workspace: a strong brand anchor, quiet surfaces and amber work flags. */
.topnav-inner { min-height: 4.5rem; gap: 2.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; font-size: 1.125rem; }
.brand-mark {
  display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem;
  background: var(--docket); color: var(--docket-ink); border-radius: 7px;
  font-size: 1.5rem; font-weight: 800; line-height: 1;
}
.nav-links { align-self: stretch; align-items: stretch; gap: 1.5rem; }
.nav-links a { display: flex; align-items: center; padding: 0.75rem 0.1rem; }
main { padding-top: 2.75rem; }
h1 { font-size: clamp(1.65rem, 3vw, 2.125rem); letter-spacing: -0.035em; overflow-wrap: anywhere; }
.page-header { align-items: center; margin-bottom: 1.75rem; }
.page-header p { max-width: 65ch; }
.caseload { display: inline-block; padding: 0.6rem 0.85rem; border-left: 3px solid var(--pending); background: var(--sheet); border-radius: 0 5px 5px 0; }
.page-header .caseload { margin-top: 1rem; font-size: 0.875rem; }
.button, button.primary, .filters button, .form-actions button, .login-form button,
button.secondary { min-height: 44px; justify-content: center; }
.toolbar { gap: 1rem; margin-bottom: 1.25rem; }
.status-tabs a { min-height: 40px; display: inline-flex; align-items: center; }
.filters input { min-height: 44px; }
.filters input:focus, .entity-form input:focus, .entity-form select:focus, .login-form input:focus { border-color: var(--focus); }
.register-wrap { border-radius: 10px; }
.register th { background: var(--hover); padding-top: 0.85rem; padding-bottom: 0.85rem; }
.register td { padding-top: 1rem; padding-bottom: 1rem; }
.register .secondary-line { margin-top: 0.2rem; }
.daybook .day-row th { padding-top: 1rem; padding-bottom: 0.55rem; }
.daybook tbody:first-of-type .day-row th { padding-top: 0.85rem; }
.status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; padding: 0.25rem 0.55rem; border: 1px solid var(--rule); border-radius: 5px; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status.pending { border-color: var(--pending); background: var(--pending-wash); }
.status.complete { color: var(--complete); }
.pagination { flex-wrap: wrap; gap: 0.5rem 1rem; }
.pagination a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.65rem; border: 1px solid var(--rule); border-radius: 5px; background: var(--sheet); }
.back-link { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 0.75rem; color: var(--muted); font-size: 0.875rem; text-decoration: none; }
.back-link::before { content: "\2190"; margin-right: 0.5rem; }
.back-link:hover { color: var(--docket); }
.entity-form { max-width: 34rem; padding: 2rem; gap: 1.5rem; border-top: 3px solid var(--docket); }
.entity-form input, .entity-form select, .login-form input { min-height: 48px; min-width: 0; width: 100%; }
.form-actions { border-top: 1px solid var(--rule); padding-top: 1.25rem; flex-wrap: wrap; }
.form-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.figure-group { padding: 1rem 1.25rem; border-top: 3px solid var(--docket); }
.figure-group h2 { margin-bottom: 0.75rem; }
.figure-group dd { font-size: 1.125rem; }
.chart-panel { padding: 1.5rem; }
.login-body { min-height: 100svh; }
.login-form { width: min(26rem, 100%); padding: 2.5rem; border-top: 4px solid var(--docket); border-radius: 12px; }
.login-brand { display: flex; align-items: center; gap: 0.65rem; font-weight: 750; margin-bottom: 1rem; }
.login-form h1 { font-size: 1.65rem; }
.skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 10; padding: 0.75rem 1rem; background: var(--sheet); border: 2px solid var(--focus); border-radius: var(--radius); }
.skip-link:focus { top: 0.5rem; }
@media (prefers-reduced-motion: no-preference) {
  a, button, input, select { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
}
@media (max-width: 760px) {
  .topnav-inner { flex-wrap: wrap; gap: 0 1rem; padding-top: 0.65rem; }
  .brand { margin-right: auto; }
  .logout-form { margin-left: 0; }
  .nav-links { order: 3; width: 100%; gap: 1.5rem; }
  .nav-links a { min-height: 48px; }
  .filters { flex: 1; }
  .filters input { width: 100%; min-width: 0; flex: 1; }
}
@media (max-width: 640px) {
  main { padding-top: 1.5rem; }
  .page-header { align-items: flex-start; }
  .status-tabs { display: flex; }
  .status-tabs a { flex: 1; justify-content: center; }
  .entity-form, .login-form { padding: 1.5rem; }
  .daybook tr.case-row, .roster tr.customer-row, .cases-detail tr.case-row { padding-top: 1rem; padding-bottom: 1rem; }
  .actions { flex-wrap: wrap; }
  .chart-panel { padding: 0.75rem; }
}

/* Search recovery, field validation and readable chart data. */
.search-reset { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.filters { flex-wrap: wrap; align-items: center; }
.error-summary { border: 1px solid var(--error); border-left-width: 4px; border-radius: 5px; padding: 1rem; }
.error-summary h2 { margin: 0 0 0.5rem; font-size: 1rem; }
.error-summary ul { margin: 0; padding-left: 1.25rem; }
.error-summary a { color: var(--error); font-size: 0.875rem; }
[aria-invalid="true"] { border-color: var(--error) !important; }
.chart-data { margin-top: 0.75rem; }
.chart-data summary { cursor: pointer; color: var(--docket); font-size: 0.875rem; font-weight: 600; padding: 0.65rem 0; }
.chart-data .register th, .chart-data .register td { padding: 0.6rem 0.75rem; }
.chart-data tbody th { position: static; color: var(--ink); background: var(--sheet); border-bottom-color: var(--rule); }
.line.pending-line { stroke-dasharray: 5 4; }
.chart-key .key-pending::before { background: repeating-linear-gradient(to right, var(--pending) 0 5px, transparent 5px 8px); }
.who, .what, .from, .bar-label, .review-log .who { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .filters input[type="search"] { flex-basis: 55%; }
}
@media (max-width: 640px) {
  .daybook tr.case-row, .roster tr.customer-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cases-detail tr.case-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .roster td.id { white-space: normal; overflow-wrap: anywhere; }
  .bar-row { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) max-content; }
  .search-reset { flex-basis: 100%; }
}

/* Keep long registers navigable from either end. */
.register-navigation .pagination { margin: 0 0 0.85rem; }
.register-navigation:empty { display: none; }
.page-number { color: var(--ink); font-weight: 600; margin-right: 0.65rem; }
.queue-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 600; margin-left: 0.75rem; text-underline-offset: 3px; }
.register .who a { display: inline-block; padding: 0.3rem 0; }
.register .who a:focus-visible { border-radius: 2px; }
.review-more summary { min-height: 44px; padding: 0.35rem 0; max-width: 100%; }
@media (max-width: 640px) {
  .daybook .stack-label { display: inline; }
  .queue-link { margin-left: 0; }
  .pagination .page-info { flex-basis: 100%; }
  .register .who a { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (forced-colors: active) {
  .status { border-color: CanvasText; }
  .nav-links a[aria-current="page"] { border-bottom-color: Highlight; }
  .register tr.pending td:first-child { border-left: 4px solid Highlight; }
}

/* Form labels stay distinct from hints and validation messages. */
.form-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.field-hint { margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; }
.entity-form input, .entity-form select, .login-form input, .filters input { font-size: 1rem; }
input::placeholder { color: var(--muted); opacity: 1; }
.login-error { margin: 0; padding: 0.75rem; border: 1px solid var(--error); border-left-width: 4px; border-radius: 5px; }
.chart-scroll { overflow-x: auto; border-radius: 3px; }
.chart-scroll .trend-chart { min-width: 36rem; }
.page-header p, .subtitle, .error-summary, .field-hint { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .chart-scroll { padding-bottom: 0.5rem; }
}

/* Controls remain distinct in either theme and resilient to long record text. */
.page-header > div { min-width: 0; }
.page-header > .button { flex-shrink: 0; }
.brand-mark { flex-shrink: 0; }
.entity-form select { max-width: 100%; }
.form-field label { overflow-wrap: anywhere; }
.chart-data summary { min-height: 44px; }
.status-tabs a { min-height: 44px; }
@media (max-width: 640px) {
  .cases-detail tr.case-row { grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; }
  .cases-detail td.when { white-space: normal; }
}
/* Shared workbench identity. Keep data dense and the surrounding space calm. */
::selection { background: var(--docket); color: var(--ground); }
a { text-underline-offset: 4px; }
:focus-visible { outline-offset: 4px; }
body { display: flex; flex-direction: column; min-height: 100svh; line-height: 1.7; }
.topnav { background: var(--ground); }
.topnav-inner { min-height: 88px; padding-inline: 40px; gap: 2.5rem; }
.brand, .login-brand { font: 700 21px var(--mono); letter-spacing: -1px; gap: 5px; }
.brand-mark { width: 36px; height: 36px; background: var(--docket); color: var(--ground); margin-right: 8px; border-radius: 8px; font: inherit; letter-spacing: inherit; }
.brand-dot { color: var(--docket); }
main { width: 100%; flex: 1; padding: 48px 40px 72px; }
h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); letter-spacing: -0.035em; text-wrap: balance; }
h2 { letter-spacing: -0.025em; }
.page-header { align-items: flex-start; margin-bottom: 28px; }
.page-header > .button { margin-top: 4px; }
.toolbar { padding-top: 24px; border-top: 1px solid var(--rule); margin-bottom: 24px; }
.caseload { border: 1px solid var(--rule); border-radius: 7px; background: var(--sheet); }
.entity-form, .figure-group, .chart-panel { border-color: var(--rule); }
.entity-form { border-radius: 16px; }
.figure-group { border-radius: 16px; }
.register tbody tr:hover td { background: #1d2a3d; }
.register-wrap, .chart-panel { border-radius: 16px; }
.nav-links { font-size: 14px; gap: 28px; margin-left: auto; }
.logout-form { margin-left: 0; }
.nav-links a { border-bottom: 0; }
.nav-links a[aria-current="page"] { font-weight: 400; text-decoration: underline; text-decoration-color: var(--docket); text-underline-offset: 12px; }
.button, button.primary, .filters button, .form-actions button { border-radius: 7px; font-weight: 700; padding-inline: 20px; }
.button:hover, button.primary:hover, .filters button:hover, .form-actions button:hover, .login-form button:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); filter: none; }
.status { font: 11px/1.8 var(--mono); border-radius: 999px; padding: 3px 10px; }
.register th { font-size: 0.8125rem; }
.register thead th { background: var(--sheet); border-bottom-color: var(--rule); color: var(--muted); font: 12px/1.8 var(--mono); }
.register .who a { color: var(--ink); }
.register .who a:hover { color: var(--docket); }
.status-tabs { background: transparent; border-color: var(--rule); border-radius: 7px; }
.status-tabs a { font-size: 14px; }
.filters input, .entity-form input, .entity-form select { background: var(--ground); border-color: #63758e; border-radius: 5px; }
.register .secondary-line, .daybook .day-row th, .pagination .page-info { font-family: var(--mono); font-size: 0.75rem; }
.status-tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--docket); }
.status.complete { background: var(--accent-soft); border-color: var(--accent-border); }
.figure-group { border-top-width: 1px; padding: 30px; }
.figure-group dd { color: var(--docket); font-variant-numeric: tabular-nums; }
.figure-group dd.pending-count { color: var(--pending-ink); }
.entity-form { border-top-width: 1px; padding: 30px; }
.site-footer { margin-top: auto; border-top: 1px solid var(--rule); color: var(--ink); font: 12px/1.6 var(--mono); }
.footer-note { color: var(--muted); margin-left: 12px; }
.site-footer .footer-inner > :last-child { color: var(--muted); }
.footer-inner { max-width: var(--measure); margin: auto; padding: 28px 40px; display: flex; justify-content: space-between; gap: 20px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--docket); }
.login-body { display: flex; padding: 0; align-items: stretch; justify-content: flex-start; }
.login-header { border-bottom: 1px solid var(--rule); }
.login-header .footer-inner { min-height: 88px; align-items: center; padding-block: 0; }
.login-header-label { color: var(--muted); font: 12px/1.7 var(--mono); }
.login-layout { display: flex; align-items: center; max-width: var(--measure); padding: 64px 40px 80px; flex: 1; }
.login-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 80px; width: 100%; }
.login-hero > * { min-width: 0; }
.login-intro h1 { font-size: clamp(3rem, 5.5vw, 4.5rem); line-height: 1.1; margin: 0 0 24px; }
.hero-subtitle { display: block; font-size: .63em; margin-top: 12px; letter-spacing: -0.045em; }
.login-intro > p { color: var(--muted); max-width: 48ch; margin: 0 0 20px; }
.workbench-label { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font: 11px/1.6 var(--mono); }
.login-intro > .workbench-label { margin-bottom: 24px; letter-spacing: .12em; text-transform: uppercase; }
.workbench-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--docket); box-shadow: 0 0 12px #80b7ff30; flex-shrink: 0; }
.login-form { width: 100%; border: 1px solid #3b506b; padding: 0; border-radius: 12px; box-shadow: 0 28px 70px #0004; gap: 0; overflow: hidden; background: #141d29; }
.login-fields { display: flex; flex-direction: column; gap: 20px; padding: 36px; }
.login-fields h2 { margin: 0; font: 700 1.75rem/1.2 Arial, "Helvetica Neue", sans-serif; letter-spacing: -0.035em; }
.login-description { color: var(--muted); font-size: 0.875rem; margin: -8px 0 4px; }
.login-fields label { font-size: 0.875rem; font-weight: 600; gap: 8px; }
.login-fields input { font: 1rem/1.5 Arial, "Helvetica Neue", sans-serif; border-color: #63758e; border-radius: 7px; padding: 10px 12px; }
.login-form input { background: var(--ground); }
.login-form button { width: 100%; min-height: 48px; margin-top: 4px; font-size: 14px; font-weight: 700; border-radius: 7px; }
@media (max-width: 760px) {
  .topnav-inner { min-height: 0; align-content: flex-start; gap: 8px 16px; padding-top: 12px; }
  .nav-links { align-self: auto; }
  .login-layout { max-width: var(--measure); padding: 48px 22px 64px; }
  .login-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .login-intro h1 { font-size: clamp(2.7rem, 10vw, 3.5rem); margin-bottom: 16px; }
  .brand { font-size: 17px; gap: 2px; }
  .nav-links { margin-left: 0; }
  .entity-form, .figure-group { padding: 24px; }
  .login-header .footer-inner { min-height: 76px; }
  .brand-mark { width: 30px; height: 30px; margin-right: 4px; }
  .topnav-inner, .footer-inner { padding-inline: 22px; }
  .login-fields { padding: 1.5rem; }
  .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  main { padding: 28px 22px 48px; }
  .login-layout { padding-top: 32px; padding-bottom: 40px; }
  .page-header { gap: 16px; margin-bottom: 24px; }
  .page-header > .button { margin-top: 0; }
  .toolbar { padding-top: 20px; }
  .footer-inner { flex-direction: column; gap: 8px; }
  .login-header .footer-inner { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .register tr.empty-row { display: block; }
  .register tr.empty-row td { display: block; padding: 24px 16px; }
  .register tr.case-row > td { min-width: 0; }
  .actions { gap: 8px; }
  .actions button { white-space: normal; text-align: center; }
  .pagination .disabled { display: inline-flex; align-items: center; min-height: 44px; padding: 0.35rem 0.65rem; border: 1px solid var(--rule); border-radius: 5px; }
}
@media (max-width: 900px) and (min-width: 761px) { .login-hero { gap: 32px; } .login-layout { padding-inline: 28px; } }
@media (max-width: 360px) { .login-header .footer-inner { padding-block: 12px; } .login-fields { padding: 24px 20px; } }

@media print {
  :root { color-scheme: light; --ground: #fff; --sheet: #fff; --ink: #000; --muted: #444; --rule: #ccc; --rule-strong: #888; --hover: #fff; --docket: #000; --pending-ink: #000; --pending-wash: #fff; --complete: #000; }
  .topnav, .site-footer, .skip-link, .toolbar, .pagination, .back-link, .queue-link, .page-header > .button, .actions, .actions-col { display: none; }
  main { max-width: none; padding: 0; }
  .register-wrap, .chart-scroll { overflow: visible; }
  .chart-scroll .trend-chart { min-width: 0; }
  .register th { position: static; }
  .register tr { break-inside: avoid; }
  .register a { color: var(--ink); }
  .status::before { display: none; }
  .register tr.pending td:first-child { box-shadow: none; }
  .page-header { margin-bottom: 1rem; }
}

/* Investigation types: free-text descriptions wrap; the name stays on as few lines as it can. */
.entity-form textarea {
  background: var(--sheet);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
  min-width: 0;
  resize: vertical;
}
.entity-form textarea:focus { border-color: var(--focus); }
.optional { color: var(--muted); font-weight: 400; }
.type-list .type-name { font-weight: 600; overflow-wrap: anywhere; min-width: 10rem; }
.type-list .type-description { overflow-wrap: anywhere; white-space: pre-line; }