/* Paraclerk — "calm authority" design system (design handoff 2026-07-27).
   Tokens and rules are FINAL INTENT from the handoff README. Fonts are served
   locally from /fonts — no external requests, ever. */
/* HOSTED APP (web/): fonts from the CDN — this build carries no client data.
   The LOCAL app (public/) self-hosts them instead and must make NO external
   request. This @import line is the ONLY intended difference between the two
   copies of this file. Mirroring one over the other silently reverses it, so
   after any copy, check this line. */
/* SELF-HOSTED, NOT A CDN (2026-08-02). This used to @import from
   fonts.googleapis.com, which told Google the address of every page a
   criminal-defence firm opened, and when. The design handoff asks for
   self-hosting too. The files are the same ones public/ already served, so
   the two apps are now identical here rather than deliberately different. */
@import url('/fonts/fonts.css');

:root {
  --paper: #F7F5F1;
  --sheet: #FFFDF8;
  --hairline: #E4E0D5;
  --mid: #C6BFAE;
  --ink3: #857E70;
  --ink2: #5C564A;
  --ink: #211D15;
  --red: #A02C21;
  --amber: #8F6400;
  --green: #2E6B4E;
  --tint: #B9B29F;
  --dot: #B3AC9A;
  --serif: 'Spectral', Georgia, serif;
  --sc: 'Spectral SC', Georgia, serif;
  --sans: 'Source Sans 3', 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
}

html, body { margin: 0; padding: 0; background: var(--paper); }
body {
  font-family: var(--sans); color: var(--ink); font-size: 17px; line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: #E9E3D2; }
a { color: var(--ink); text-decoration-color: var(--tint); text-underline-offset: 3px; }
a:hover { color: var(--red); }
button { font-family: var(--sans); }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@keyframes pcReveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.reveal { animation: pcReveal .5s ease-out both; }
.reveal-2 { animation: pcReveal .5s ease-out both; animation-delay: .1s; }
.reveal-3 { animation: pcReveal .5s ease-out both; animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-2, .reveal-3 { animation: none; } }

/* ---------- shell ---------- */
.pc-mast-wrap { max-width: 1480px; margin: 0 auto; padding: 20px 44px 0; box-sizing: border-box; }
.pc-mast { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pc-glyph { font-family: var(--serif); font-size: 16px; color: var(--ink2); }
.pc-wordmark { font-family: var(--sc); font-weight: 600; font-size: 21px; letter-spacing: .22em; color: var(--ink); }
.pc-attorney { font-family: var(--sc); font-weight: 500; font-size: 14px; letter-spacing: .09em; color: var(--ink2); }
.pc-sync { font-family: var(--mono); font-size: 13px; color: var(--green); white-space: nowrap; }
.pc-sync.busy { color: var(--ink2); }
.pc-linkbtn { background: none; border: none; padding: 0; cursor: pointer; font-size: 14.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tint); }
.pc-linkbtn:hover { color: var(--red); }
.demo-banner {
  background: var(--ink); color: var(--paper); text-align: center; padding: 7px 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
}

.pc-search { position: relative; margin-top: 10px; max-width: 420px; }
.pc-search input {
  width: 100%; box-sizing: border-box; background: var(--sheet);
  border: 1px solid var(--mid); padding: 7px 10px; font-family: var(--sans);
  font-size: 16px; color: var(--ink); border-radius: 0;
}
.pc-search input::placeholder { color: var(--ink3); }
.pc-search input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.pc-results {
  position: absolute; z-index: 40; left: 0; right: 0; top: 100%;
  background: var(--sheet); border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(33, 29, 21, .1); max-height: 320px; overflow-y: auto;
}
.pc-results a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px;
  padding: 9px 11px; text-decoration: none; border-bottom: 1px solid var(--hairline);
}
.pc-results a:last-child { border-bottom: none; }
.pc-results a.on, .pc-results a:hover { background: #EFEADC; }
.pc-results .nm { font-size: 15.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-results .cn { font-family: var(--mono); font-size: 12.5px; color: var(--ink3); }
.pc-results .src { grid-column: 1 / -1; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ink3); text-transform: uppercase; }

/* clickable rows */
a.rowlink { display: block; text-decoration: none; color: inherit; }
a.rowlink:hover { background: #F1EDE3; color: inherit; }
a.rowlink:hover .case-name { text-decoration: underline; text-decoration-color: var(--tint); text-underline-offset: 3px; }

.pc-rule-thick { margin-top: 14px; border-top: 3px solid var(--ink); }
.pc-rule-thin { margin-top: 2px; border-top: 1px solid var(--ink); }

.pc-frame { max-width: 1480px; margin: 0 auto; padding: 30px 44px 90px; box-sizing: border-box; display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 0 52px; align-items: start; }
.pc-nav { position: sticky; top: 20px; }
.pc-nav a { display: flex; align-items: baseline; gap: 9px; border-bottom: 1px solid var(--hairline); padding: 14px 2px; font-family: var(--sc); font-weight: 600; font-size: 15.5px; letter-spacing: .1em; color: var(--ink2); text-decoration: none; }
.pc-nav a:hover { color: var(--ink); }
.pc-nav a.active { color: var(--ink); }
.pc-nav a .sp { flex: 1; }
.pc-nav a .ct { font-family: var(--mono); font-size: 13px; color: var(--ink3); letter-spacing: 0; }
.pc-nav a .dot-r { color: var(--red); font-size: 9px; }
.pc-nav a .dot-a { color: var(--amber); font-size: 9px; }
.pc-nav a .dot-r { color: var(--red); font-size: 9px; }
.pc-nav .mark { font-size: 10px; }
.pc-nav-foot { margin-top: 28px; font-family: var(--mono); font-size: 12px; color: var(--ink3); line-height: 1.95; letter-spacing: .02em; }
.pc-nav-foot a { font-family: var(--mono); color: var(--ink3); }

/* ---------- shared elements ---------- */
.eyebrow { font-family: var(--sc); font-weight: 600; font-size: 14.5px; letter-spacing: .13em; color: var(--ink2); }
.sect-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
             border-bottom: 2.5px solid var(--ink); padding-bottom: 9px; }
.sect-head .lbl { font-family: var(--sc); font-weight: 600; font-size: 17px; letter-spacing: .1em; color: var(--ink); }
.sect-head .meta { font-family: var(--mono); font-size: 13px; color: var(--ink3); }
.sect-head .meta.red { color: var(--red); letter-spacing: .08em; font-size: 12.5px; font-weight: 500; }
.sect-head .meta.green { color: var(--green); letter-spacing: .08em; font-size: 12.5px; font-weight: 500; }
.lede { font-family: var(--serif); font-size: 28px; line-height: 1.4; font-weight: 400; margin: 16px 0 0; max-width: 42em; color: var(--ink); text-wrap: pretty; }
.lede .hot { color: var(--red); font-weight: 500; }
.lede .firm { font-weight: 600; }
.mono { font-family: var(--mono); }
.m9 { font-family: var(--mono); font-size: 12px; letter-spacing: .07em; color: var(--ink3); }
.m10 { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--ink3); }
.m11 { font-family: var(--mono); font-size: 13.5px; color: var(--ink3); }
.case-name { font-family: var(--serif); font-style: italic; font-size: 17.5px; }
.case-name.lg { font-size: 19px; }
.case-no { font-family: var(--mono); font-size: 12.5px; color: var(--ink3); margin-left: 8px; }
.tag { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.tag.red { color: var(--red); }
.tag.amber { color: var(--amber); }
.tag.green { color: var(--green); }
.ok-stamp { font-family: var(--mono); font-size: 12.5px; color: var(--green); white-space: nowrap; }
.prov { cursor: help; border-bottom: 1px dotted var(--dot); padding-bottom: 1px; }
.struck { text-decoration: line-through; text-decoration-color: var(--red); color: var(--ink3); }
.btn-ink { background: var(--ink); border: 1px solid var(--ink); color: var(--paper); font-weight: 600; font-size: 14.5px; letter-spacing: .02em; padding: 9px 17px; cursor: pointer; }
.btn-ink:hover { background: #3A342A; }
.btn-line { background: transparent; border: 1px solid var(--mid); color: var(--ink); font-weight: 600; font-size: 14.5px; padding: 9px 16px; cursor: pointer; }
.btn-line:hover { border-color: var(--ink); }
.btn-line[disabled] { color: var(--ink3); cursor: not-allowed; border-color: var(--hairline); }
.chip { background: transparent; border: 1px solid var(--mid); color: var(--ink2); font-size: 14px; font-weight: 600; padding: 7px 13px; cursor: pointer; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.today-badge { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; background: var(--ink); color: var(--paper); padding: 3px 7px; }
.quiet-row { padding: 22px 2px; font-size: 16px; color: var(--ink2); border-bottom: 1px solid var(--hairline); }
.sheet-card { background: var(--sheet); border: 1px solid #D8D2C2; padding: 17px 20px 15px; margin-top: 14px; }

#pc-prov-tip { position: fixed; z-index: 60; pointer-events: none; max-width: 360px; background: var(--sheet); border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgba(33, 29, 21, .1); padding: 10px 13px; font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink); display: none; }
#pc-prov-tip .src { font-size: 11px; letter-spacing: .1em; color: var(--ink3); margin-bottom: 4px; }

/* ---------- brief ---------- */
.hearing-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.hearing { padding: 18px 24px 18px 2px; display: flex; gap: 16px; }
.hearing + .hearing { border-left: 1px solid var(--hairline); padding-left: 24px; }
.hearing .tm { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1; color: var(--ink); white-space: nowrap; }
.hearing .ampm { font-family: var(--mono); font-size: 13px; color: var(--ink3); margin-left: 5px; }
.hearing .dt { display: grid; gap: 4px; }
.hearing .sub { font-size: 14.5px; color: var(--ink2); line-height: 1.5; }
.nothing-else { padding: 18px 0 18px 24px; border-left: 1px solid var(--hairline); align-self: center; font-family: var(--mono); font-size: 13px; line-height: 1.85; color: var(--ink3); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(370px, 1fr)); gap: 44px 56px; margin-top: 42px; align-items: start; }
.change { padding: 16px 0 18px; border-bottom: 1px solid var(--hairline); }
.change .line { margin-top: 10px; font-size: 16.5px; }
.change .steps { margin-top: 12px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink2); }
.watch-row { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; gap: 0 16px; padding: 14px 2px; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.watch-row .txt { font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.todo-row { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 16px; padding: 13px 2px; border-bottom: 1px solid var(--hairline); align-items: baseline; font-size: 15.5px; }
.comm-row { display: flex; gap: 14px; align-items: baseline; padding: 13px 2px; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.5; color: var(--ink2); }
.comm-row .when { font-family: var(--mono); font-size: 13px; color: var(--ink3); white-space: nowrap; }
.comm-row .body-prev { color: var(--ink2); }

/* ---------- morning brief (founder spec 2026-07-28) ---------- */
.brief-sect { margin-top: 58px; }
.brief-sect:first-of-type { margin-top: 36px; }

/* Docket reuses the original .hearing / .hearing-strip columns — no new rules,
   no borders on the left. Severity is carried by the tag, as in the design. */
.chg-row { display: grid; grid-template-columns: 165px minmax(0, 1fr) auto; gap: 0 14px;
           align-items: baseline; padding: 12px 2px; border-bottom: 1px solid var(--hairline); }
.chg-row .sub { font-size: 14px; color: var(--ink2); margin-top: 3px; }

.watch-item { padding: 14px 2px 15px; border-bottom: 1px solid var(--hairline); }
.watch-item .wi-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.watch-item .wi-line { font-size: 17px; line-height: 1.5; margin-top: 8px; max-width: 56em; }
.watch-item .wi-act { font-size: 15px; line-height: 1.5; margin-top: 7px; max-width: 56em; color: var(--ink2); }

/* ---------- calendar ---------- */
.cal-wrap { display: flex; flex-wrap: wrap; gap: 40px 52px; margin-top: 26px; align-items: flex-start; }
.cal-main { flex: 1 1 560px; min-width: 0; }
.cal-row { display: grid; grid-template-columns: 104px 80px minmax(0, 1.4fr) auto; gap: 0 16px; align-items: baseline; padding: 13px 2px 12px; border-bottom: 1px solid var(--hairline); }
.cal-row .dcol { font-family: var(--mono); font-size: 13.5px; color: var(--ink2); }
.cal-row .tcol { font-size: 17px; font-weight: 600; }
.cal-row .sub { font-size: 14.5px; color: var(--ink2); margin-top: 3px; }
.cal-row .note { grid-column: 1 / -1; margin-top: 3px; padding-left: 216px; font-size: 14px; color: var(--ink2); }
.cal-rail { flex: 0 0 216px; position: sticky; top: 20px; }
.mini-head { font-family: var(--sc); font-weight: 600; font-size: 13px; letter-spacing: .11em; color: var(--ink2); border-bottom: 1px solid var(--hairline); padding-bottom: 6px; }
.mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 8px; }
.mini-grid .dow { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--dot); }
.mini-cell { height: 28px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 13px; color: var(--ink3); }
.mini-cell.mark { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.mini-cell.moved { color: var(--red); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.mini-cell.today span { background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 13px; padding: 2px 6px; }

/* ---------- tables (clients / discovery) ---------- */
.tbl-scroll { overflow-x: auto; margin-top: 24px; }
.tbl-head { display: grid; gap: 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink3); }
.tbl-row { display: grid; gap: 0 16px; align-items: baseline; padding: 15px 2px; border-bottom: 1px solid var(--hairline); font-size: 15.5px; }
.clients-grid { grid-template-columns: 150px minmax(0, 1.1fr) 150px 64px minmax(0, 1fr); }
.clients-min { min-width: 760px; }
.disc-grid { grid-template-columns: 90px minmax(0, 1.2fr) 170px 205px 90px 155px; }
.disc-min { min-width: 900px; }
.gap-card { margin-top: 22px; border-top: 2px solid var(--red); padding: 16px 0 18px; border-bottom: 1px solid var(--hairline); }

/* ---------- settings ---------- */
.set-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 0 24px; align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--hairline); }
.set-row .k { font-size: 15.5px; font-weight: 600; }
.set-row .v { font-size: 15.5px; color: var(--ink2); }

/* ---------- howto prose ---------- */
.prose { max-width: 760px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 8px 0; font-size: 16px; line-height: 1.6; }
.prose .card { border: 1px solid var(--hairline); background: var(--sheet); padding: 16px 20px; margin: 14px 0; font-size: 16px; line-height: 1.6; }
.prose .card.warn { border-left: 3px solid var(--red); }
.prose .card.ok { border-left: 3px solid var(--green); }
.path { font-family: var(--mono); font-size: 13.5px; background: #ECEAE4; padding: 2px 6px; }

/* ---------- phone (≤700px) ---------- */
@media (max-width: 700px) {
  .pc-mast-wrap { padding: 14px 16px 0; }
  .pc-frame { grid-template-columns: 1fr; padding: 18px 16px 70px; gap: 0; }
  .pc-nav { position: static; display: flex; overflow-x: auto; gap: 0 18px; border-bottom: 1px solid var(--hairline); margin-bottom: 22px; }
  .pc-nav a { border-bottom: none; white-space: nowrap; min-height: 44px; align-items: center; }
  .pc-nav-foot { display: none; }
  .lede { font-size: 19px; }
  .hearing-strip { grid-template-columns: 1fr; }
  .hearing + .hearing { border-left: none; border-top: 1px solid var(--hairline); padding-left: 2px; }
  .hearing { min-height: 56px; }
  .nothing-else { border-left: none; padding-left: 2px; }
  .cal-rail { position: static; flex: 1 1 auto; }
  .cal-row { grid-template-columns: 88px minmax(0, 1fr); }
  .cal-row .tcol { grid-column: 1; }
  .cal-row .status-col { grid-column: 2; }
  .cal-row .note { padding-left: 0; }
  .two-col { grid-template-columns: 1fr; }
  .pc-linkbtn, .btn-ink, .btn-line { min-height: 44px; }
}

/* ---------- print ----------
   A printed brief is read away from the machine, over coffee, and often carried
   into a courthouse. So: paper-white, ink-black, one column, nothing that only
   makes sense on a screen, and no hearing ever split across a page break. */
.print-only { display: none; }

/* A missed message is shown in full (founder, 2026-07-30). It reads as the
   message it is — set apart from the page, not as another line of report. */
.msg-box { margin: 7px 0 2px; padding: 10px 13px; background: #FBF9F3;
           border: 1px solid var(--hairline); border-left: 3px solid var(--amber); }
.msg-text { font-family: var(--serif); font-size: 15px; line-height: 1.6;
            color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-subj { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.msg-limit { margin-top: 7px; font: 400 12.5px var(--sans); line-height: 1.5; color: var(--ink3); }

/* Watch pagination (founder, 2026-07-30): ten at a time, numbered, so the size
   of the pile stays visible instead of hiding behind "show more". */
.pager { display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
         margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.pager .pg { min-width: 32px; height: 30px; padding: 0 9px; cursor: pointer;
             background: var(--sheet); border: 1px solid var(--mid); color: var(--ink);
             font-family: var(--sans); font-size: 14px; line-height: 1; }
.pager .pg:hover:not(:disabled) { background: #F1EFE8; }
.pager .pg.on { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
.pager .pg:disabled { opacity: .35; cursor: default; }

@media print {
  @page { margin: 14mm 15mm; }

  html, body { background: #fff !important; color: #000; }
  body { font-size: 12pt; line-height: 1.45; }

  /* Screen furniture that means nothing on paper */
  .pc-nav, .pc-search, .pc-results, .pc-linkbtn, .chip, .btn-ink, .btn-line,
  .no-print, #pc-prov-tip, .pc-rule-thick, .pc-rule-thin, .pc-mast { display: none !important; }
  .pc-mast-wrap { padding: 0 !important; }
  .pc-frame { display: block !important; padding: 0 !important; max-width: none; }

  /* Keep the fictional-data warning on paper — a printed sheet outlives the
     browser tab — but as a line of type rather than a slab of toner. */
  .demo-banner {
    background: none !important; color: #000 !important;
    border: 1px solid #000; padding: 4pt 6pt !important;
    font-size: 8pt !important; margin-bottom: 10pt;
  }

  .print-only { display: block; }
  .print-head { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 18px; }
  .print-head .ph-firm { font-family: var(--sc); font-size: 10pt; letter-spacing: .16em; }
  .print-head .ph-title { font-family: var(--serif); font-size: 22pt; font-weight: 300; margin-top: 4px; }
  .print-head .ph-date { font-family: var(--serif); font-size: 13pt; margin-top: 2px; }
  .print-head .ph-meta { font-family: var(--mono); font-size: 8pt; color: #444; margin-top: 5px; }
  .print-foot { margin-top: 22px; padding-top: 8px; border-top: 1px solid #000;
                font-family: var(--mono); font-size: 7.5pt; line-height: 1.6; color: #333; }

  /* The screen's dateline duplicates the printed masthead */
  .eyebrow { display: none; }

  .lede { font-size: 14pt; line-height: 1.45; max-width: none; margin: 0 0 6pt; }
  .lede .hot { color: #000; font-weight: 600; text-decoration: underline; }

  /* One column, in reading order */
  .two-col { display: block !important; }
  .two-col > div { margin-bottom: 10pt; }
  .hearing-strip { display: block !important; }

  .sect-head { border-bottom: 1px solid #000; break-after: avoid; page-break-after: avoid; }
  .sect-head .lbl { font-size: 10pt; }
  .sect-head .meta, .sect-head .meta.red, .sect-head .meta.green { color: #333; }

  /* Never break a single item across two sheets */
  .hearing, .change, .watch-row, .todo-row, .comm-row, .rec, .cal-row, .client, .sheet-card,
  .chg-row, .watch-item {
    break-inside: avoid; page-break-inside: avoid;
  }
  .brief-sect { margin-top: 16pt; break-inside: auto; }
  .chg-row { grid-template-columns: 130pt minmax(0, 1fr) auto; padding: 6pt 0; }
  .watch-item { padding: 8pt 0 9pt; }
  .watch-item .wi-line { font-size: 11.5pt; }
  .watch-item .wi-act { font-weight: 500; color: #000; }
  .hearing + .hearing { border-left: none; border-top: 1px solid #bbb; padding-left: 0; }
  .hearing { padding: 8pt 0; }
  .hearing .tm { font-size: 18pt; }
  .nothing-else { border-left: none; padding-left: 0; }

  /* Semantic colour still carries meaning in black and white */
  .tag.red, .m10[style*="--red"] { color: #000; font-weight: 700; }
  .tag.amber { color: #000; font-weight: 700; }
  .ok-stamp, .tag.green { color: #333; }
  .prov { border-bottom: none; cursor: auto; }
  .case-name { font-style: italic; }

  a { text-decoration: none; color: #000; }
  .rowlink:hover { background: none; }
  .quiet-row { border-bottom: 1px solid #ccc; }

  /* Suggested message text must print in full — it may be read aloud or typed */
  .rec .msg { white-space: pre-wrap; }
}


/* ============================================================================
   CLIENT ROSTER — cards (founder, 2026-07-29)
   Peter asked for the printed-brief character to stay, but calmer and bigger,
   with each client as a card holding their matters. These classes were
   referenced by clients.html but had never been defined, so the roster had
   been rendering essentially unstyled — hence "hard to read".
   Rule of the redesign: real information gets real type; tiny letter-spaced
   monospace is for metadata only, never for something you have to read.
   ========================================================================= */
.client {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-top: 2.5px solid var(--ink);
  margin-top: 22px;
  box-shadow: 0 1px 0 rgba(33, 29, 21, .04);
}
.client-head {
  display: flex; align-items: baseline; gap: 12px 16px; flex-wrap: wrap;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--hairline);
  background: #FBF9F3;
}
.client-name {
  font-family: var(--serif); font-size: 23px; font-weight: 600;
  color: var(--ink); letter-spacing: -.01em; line-height: 1.2;
}
.client-sub { font-size: 15px; color: var(--ink2); }

/* Activity — the ACTIVE marker replaces the old "stale" flag. Green means
   contact was captured inside the window; absence of green is never an
   accusation, so the neutral pill states the plain fact instead. */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 4px 13px 5px; border: 1px solid transparent; border-radius: 100px;
  white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.active { color: var(--green); background: #EAF1EC; border-color: #CBDDD1; }
.pill.quiet  { color: var(--ink3); background: transparent; border-color: var(--hairline); }
.pill.warn   { color: var(--amber); background: #F6F0E0; border-color: #E3D7B7; }

/* Matter rows inside a client card. Column headings appear once per card so
   you always know what a column means. */
.matter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .75fr);
  gap: 7px 16px; align-items: start;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.matter-grid:last-child { border-bottom: 0; }
.matter-head {
  padding-top: 9px; padding-bottom: 8px;
  background: transparent; border-bottom: 1px solid var(--hairline);
}
.mcol {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink3);
}
a.matter-grid { text-decoration: none; color: inherit; }
a.matter-grid:hover { background: #F5F1E7; }
a.matter-grid:hover .mtitle { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tint); }
.mtitle { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.mval { font-size: 15.5px; color: var(--ink); line-height: 1.45; }
.mval.dim { color: var(--ink3); }
.mnote { font-size: 14px; color: var(--ink2); margin-top: 3px; line-height: 1.45; }
.mnum { font-family: var(--mono); font-size: 13.5px; color: var(--ink2); }
.mnum.folded { text-decoration: line-through; color: var(--ink3); }

.st-ok   { color: var(--green); }
.st-due  { color: var(--amber); }
.st-none { color: var(--ink3); }

.flag {
  font-size: 14.5px; color: var(--amber); line-height: 1.5;
  padding: 10px 18px; background: #FBF7EA; border-bottom: 1px solid var(--hairline);
}

/* Summary tiles above the roster. */
.sumrow {
  display: flex; flex-wrap: wrap; gap: 14px 34px;
  margin-top: 20px; padding: 18px 20px;
  background: var(--sheet); border: 2px solid var(--hairline); border-top-color: var(--ink);
}
.sumrow .n {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  color: var(--ink); line-height: 1.1;
}
.sumrow .l {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); margin-top: 4px;
}

@media (max-width: 1180px) {
  .matter-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); row-gap: 10px; }
  .matter-head { display: none; }
  .matter-grid > div:nth-child(3)::before { content: 'Advisement — '; color: var(--ink3); font-size: 12px; }
  .matter-grid > div:nth-child(4)::before { content: 'Discovery — '; color: var(--ink3); font-size: 12px; }
}
@media (max-width: 620px) {
  .matter-grid { grid-template-columns: 1fr; }
}

@media print {
  .client { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .client-head { background: none; }
  .pill { border: 1px solid #999; color: #000; background: none; }
  a.matter-grid:hover { background: none; }
  .st-ok, .st-due, .st-none { color: #000; }
}


/* ---------- To-Dos: client in its own column (founder, 2026-07-29) ---------- */
.todo-grid {
  display: grid; gap: 4px 20px; align-items: start;
  padding: 14px 2px; border-bottom: 1px solid var(--hairline);
}
/* Suggested: CLIENT | SUGGESTION */
.todo-grid.sug { grid-template-columns: minmax(170px, .85fr) minmax(0, 2.3fr); }
/* Your own tasks keep the due date, then the same two columns */
.todo-grid.own { grid-template-columns: 132px minmax(170px, .85fr) minmax(0, 2.3fr); }
.todo-grid .who { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.todo-grid .who.all { font-weight: 500; color: var(--ink2); font-style: italic; }
.todo-grid .what { font-size: 16px; color: var(--ink); line-height: 1.5; }
.todo-grid .why { font-size: 14px; color: var(--ink2); margin-top: 4px; }
.todo-grid .due { font-family: var(--mono); font-size: 13px; color: var(--ink3); }
.todo-grid .due.late { color: var(--red); font-weight: 600; }

/* Column headings, once per list, so the columns are self-explaining. */
.todo-head {
  padding-top: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--ink);
  font-family: var(--sans); font-weight: 700; font-size: 12.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink3);
}
.todo-head > div { line-height: 1.3; }

@media (max-width: 900px) {
  .todo-grid.sug, .todo-grid.own { grid-template-columns: 1fr; }
  .todo-head { display: none; }
  .todo-grid .who { font-size: 15.5px; }
  .todo-grid .due { margin-bottom: 2px; }
}

@media print {
  .todo-grid { break-inside: avoid; page-break-inside: avoid; }
  .todo-head { border-bottom: 1.5px solid #000; color: #000; }
  .todo-grid .due.late { color: #000; }
}


/* ---- Remote appearances + calendar conflicts on the docket (2026-07-30) ----
   A courtroom number alone reads as "be there in person", so a remote hearing
   has to announce itself and carry the joining details where the eye lands. */
.remote-line {
  margin-top: 7px; padding: 8px 11px;
  background: #EAF1EC; border: 1px solid #CBDDD1;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.remote-line b { color: var(--green); letter-spacing: .02em; }
.remote-line .joinurl {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink2);
  word-break: break-all; margin-top: 2px;
}
/* A contradiction between the court docket and the firm calendar is not a
   fact — it is a question for the attorney, and it looks like one. */
.conflict-line {
  margin-top: 7px; padding: 8px 11px;
  background: #FBEEEC; border: 1px solid #E5C4BE;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.conflict-line b { color: var(--red); }

@media print {
  .remote-line { background: none; border: 1px solid #999; }
  .remote-line b { color: #000; }
  .conflict-line { background: none; border: 1.5px solid #000; }
  .conflict-line b { color: #000; }
  .remote-line .joinurl { color: #000; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SHELL v2 — the sidebar design (docs/redesign-v2, 2026-08-02)
   ──────────────────────────────────────────────────────────────────────────
   The old top-tab shell (.pc-mast*, .pc-nav*, .pc-frame) is no longer emitted
   by pc.js. Its rules are left above rather than deleted so the local app in
   public/, which still mirrors the old markup, keeps working until it is
   moved over too. New markup uses pc2-* names so the two never collide.

   Every measurement here is read off the prototype's inline styles, which the
   handoff says are final.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --sidebar: #1E1A12;
  --sheet2: #FFFDF8;
  --tint: #FBF9F4;          /* hover and tinted rows */
  --hair-card: #EAE6DB;
  --hair-row: #F0EDE4;
  --tag-bg: #E6E0CE;
  --red-soft: #A85248;      /* red, softened for dark surfaces */
  --green-soft: #4C9B75;
  --count: #D9958C;
  --serif2: 'Newsreader', 'Spectral', Georgia, serif;
  --sans2: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --mono2: 'IBM Plex Mono', Consolas, monospace;
}

.pc2 { display: flex; min-height: 100vh; background: var(--paper); }

/* ── sidebar ───────────────────────────────────────────────────────────── */
.pc2-side { width: 248px; flex-shrink: 0; background: var(--sidebar); color: #F7F5F1;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  border-right: 1px solid rgba(0,0,0,.3); }
.pc2-mast { padding: 26px 22px 20px; border-bottom: 1px solid rgba(247,245,241,.1); }
.pc2-lockup { display: flex; flex-direction: column; align-items: flex-start; }
.pc2-lockup .word { font-family: var(--serif2); font-size: 23px; font-weight: 500;
  color: #FFFDF8; line-height: 1.1; letter-spacing: .01em; }
.pc2-rule { display: flex; gap: 3px; margin-top: 7px; align-self: stretch; }
.pc2-rule i { height: 2px; background: var(--red-soft); flex: 0 0 22px; }
.pc2-rule b { height: 2px; background: rgba(247,245,241,.45); flex: 1; }
.pc2-firm { font-size: 12px; color: rgba(247,245,241,.5); line-height: 1.5; margin-top: 12px; }

.pc2-who { display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-bottom: 1px solid rgba(247,245,241,.1); }
.pc2-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--tag-bg);
  color: var(--ink); font-family: var(--serif2); font-size: 15px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.pc2-who .nm { font-size: 14px; font-weight: 600; color: #FFFDF8; line-height: 1.2; }
.pc2-who .duty { display: flex; align-items: center; gap: 6px; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(247,245,241,.45); margin-top: 2px; }
.pc2-who .duty span { width: 6px; height: 6px; border-radius: 50%; background: var(--green-soft); }

.pc2-nav { flex: 1; overflow-y: auto; padding: 10px 12px 12px;
  scrollbar-width: thin; scrollbar-color: rgba(247,245,241,.2) transparent; }
.pc2-nav::-webkit-scrollbar { width: 8px; }
.pc2-nav::-webkit-scrollbar-thumb { background: rgba(247,245,241,.18); border-radius: 4px; }
.pc2-grp { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(247,245,241,.35); font-weight: 600; padding: 16px 12px 7px; }
.pc2-nav a { display: flex; align-items: center; gap: 10px; font-family: inherit;
  font-size: 13.5px; letter-spacing: .01em; border-left: 2px solid transparent;
  padding: 8px 12px 8px 10px; border-radius: 0 4px 4px 0; text-decoration: none;
  color: rgba(247,245,241,.58); transition: background .15s, color .15s; }
.pc2-nav a:hover { background: rgba(247,245,241,.055); color: #FFFDF8; }
.pc2-nav a.on { background: rgba(247,245,241,.08); color: #FFFDF8; font-weight: 600;
  border-left-color: var(--red-soft); }
.pc2-nav a .sp { flex: 1; }
/* Counts are plain numerals, not bubbles — a bubble reads as a notification, and
   these are unresolved items of work. */
.pc2-nav a .ct { font-family: var(--mono2); font-size: 12px; color: var(--count); }
.pc2-foot { padding: 14px 22px 18px; border-top: 1px solid rgba(247,245,241,.1);
  font-size: 11.5px; color: rgba(247,245,241,.4); line-height: 1.6; }
.pc2-foot a { color: rgba(247,245,241,.55); }

/* ── main column ───────────────────────────────────────────────────────── */
.pc2-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* THE CONTENT USES THE SCREEN. The handoff specifies a 1000px content column,
   which is the right measure for prose — but almost every screen here is a
   dense table: the client roster, the deadline book, the oversight scorecard
   with eight columns. On a 1920 monitor a 1000px cap left 608 pixels empty and
   squeezed the tables that needed the room (founder, 2026-08-02).
   So the ceiling is generous and only stops runaway line lengths on an
   ultra-wide display; the reading measure is applied to PROSE instead, where it
   belongs. */
.pc2-main { flex: 1; padding: 36px 48px 40px; max-width: 1680px; }
.pc2-main > * { max-width: 100%; }
.pc2-main p:not([class]), .pc2-sub, .pc2-main li { max-width: 74ch; }
@media (min-width: 1500px) { .pc2-main { padding: 40px 64px 48px; } }
.pc2-title { font-family: var(--serif2); font-size: 34px; font-weight: 400;
  letter-spacing: .01em; margin: 0 0 6px; line-height: 1.15; }
.pc2-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 10px; }
.pc2-sub { font-size: 14.5px; color: var(--ink2); margin: 0 0 28px; line-height: 1.6; max-width: 68ch; }

/* ── the assistant bar, pinned under every screen ──────────────────────── */
.pc2-ask { position: sticky; bottom: 0; background: var(--sheet2);
  border-top: 1px solid var(--hair-card); padding: 12px 48px;
  display: flex; align-items: center; gap: 12px; }
.pc2-ask .av { width: 34px; height: 34px; border-radius: 50%; background: var(--sidebar);
  color: #FFFDF8; font-family: var(--serif2); font-size: 16px; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0; }
.pc2-ask input { flex: 1; min-width: 0; font-family: var(--sans2); font-size: 14.5px;
  padding: 9px 13px; border: 1px solid var(--hair-card); border-radius: 6px;
  background: var(--paper); color: var(--ink); }
.pc2-ask input:focus { outline: 0; border-color: var(--ink); }
.pc2-ask button { font-family: var(--sans2); font-size: 14px; font-weight: 600;
  padding: 9px 18px; border: 1px solid var(--sidebar); background: var(--sidebar);
  color: #FFFDF8; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.pc2-ask button:hover { background: #2C2619; }

@media (max-width: 900px) {
  .pc2 { flex-direction: column; }
  .pc2-side { width: auto; height: auto; position: static; }
  .pc2-nav { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; }
  .pc2-grp { display: none; }
  .pc2-nav a { border-left: 0; border-radius: 4px; }
  .pc2-nav a.on { border-left: 0; box-shadow: inset 0 -2px 0 var(--red-soft); }
  .pc2-main { padding: 22px 18px 30px; }
  .pc2-ask { padding: 10px 18px; }
  .pc2-title { font-size: 26px; }
}
@media print { .pc2-side, .pc2-ask { display: none; } .pc2-main { padding: 0; } }

/* ── the ten older screens, lifted to the v2 type scale ─────────────────────
   The redesign gives every screen a 34px Newsreader title and a ruled section
   header. Those screens already emit `.eyebrow` as their title and `.sect-head`
   for their sections, so restyling the two here brings all ten across at once
   instead of editing ten files and getting one of them slightly wrong. */
.eyebrow { font-family: var(--serif2); font-weight: 400; font-size: 34px;
  letter-spacing: .01em; color: var(--ink); line-height: 1.15; margin-bottom: 22px; }
.sect-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; gap: 14px; }
.sect-head .lbl { font-family: var(--sans2); font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
/* the flex-1 hairline the handoff calls for, drawn without extra markup */
.sect-head::after { content: ""; flex: 1; height: 1px; background: var(--hair-card);
  align-self: center; order: 1; }
.sect-head .meta { order: 2; font-family: var(--mono2); font-size: 11.5px; }
@media (max-width: 900px) { .eyebrow { font-size: 26px; margin-bottom: 16px; } }