/* FILE: pb_public/assets/app.css
   PURPOSE: What the Organizer adds on top of wired.css (the house Card Kit). Tokens only - no colour literals.
   The one new idea: a document card wears its kind's tint as a thin line on its top edge, so files that
   belong together read as a family at a glance. Tints come from the kinds collection, never re-mapped. */

/* ---- two kit colours one step darker in light mode, so they pass AA (4.5:1) on the paper as well as on a card:
   the link was 4.03 and the warning 3.67 on --canvas. Same hues; dark mode already passes and is left alone. */
@media not (prefers-color-scheme: dark) {
  :root { --link: #046ca3; --status-warn: #8b5f08; }
}
/* the outline of a box you type in or pick from: --border is 1.6:1 on white, too faint to find the box by (WCAG 1.4.11
   asks 3:1). This one is 3.1-3.8:1 on the white, the paper and the inset tone, in both modes; used at the end of this file */
:root { --control-edge: #8a8275; }
@media (prefers-color-scheme: dark) { :root { --control-edge: #787064; } }

/* ---- menu: one hamburger, anchored dropdown on desktop, full width on a phone */
.site-header { position: sticky; }
.menu {
  position: absolute; left: 0; right: 0; top: var(--header-height);
  display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 16px;
  background: var(--canvas); z-index: 50;
}
.menu a {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 14px;
  border-radius: var(--card-radius); color: var(--ink); text-decoration: none; font-size: var(--fs-title);
}
.menu a.is-on { font-weight: 600; }
@media (min-width: 900px) {
  .menu {
    left: auto; right: max(16px, calc(50% - var(--page-measure, 680px) / 2 + 12px)); width: 260px;
    padding: 6px; border-radius: var(--card-radius-lg); background: var(--surface);
    box-shadow: var(--float-shadow);
  }
  .menu a { min-height: 44px; font-size: var(--fs-body); }
}

/* ---- section headings inside a page */
.section-title { font-family: var(--serif-display); font-weight: 400; font-size: var(--fs-title); margin: 26px 0 10px; }
.section-note { margin: -4px 0 12px; font-size: var(--fs-small); color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* ---- the straight line: scan -> read -> confirm -> file */
.steps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 14px; font-size: var(--fs-small); color: var(--muted); }
.steps b { color: var(--ink); font-weight: 600; }
.progress { height: 4px; border-radius: 999px; background: var(--canvas-soft); overflow: hidden; margin: 10px 0 4px; }
/* no transition: each status check draws a new bar, so there is nothing to animate between */
.progress > span { display: block; height: 100%; background: var(--ink); }

/* ---- document cards: small, many, tinted top line by kind */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.doc-card {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 76px; padding: 12px 14px 10px;
  border: 0; border-radius: var(--card-radius); background: var(--surface); text-align: left; cursor: pointer;
  box-shadow: inset 0 3px 0 var(--tint, var(--card-edge)), var(--card-shadow);
  font: inherit; color: var(--ink);
}
/* the DocId is the card's copy button: it looks like the number it is */
.doc-id { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-soft); }
button.doc-id { margin: 0; padding: 0; border: 0; background: none; text-align: left; cursor: copy; border-radius: 4px; }
button.doc-id:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.doc-title { font-size: var(--fs-body); line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.doc-meta { font-size: var(--fs-meta); color: var(--muted); }
/* date, form and subtype read as three different things: plain date, mono form tag, serif-weight subtype */
.doc-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.doc-date { font-size: var(--fs-meta); color: var(--ink-soft); }
.doc-form { font-family: var(--mono); font-size: var(--fs-label); line-height: 1.5; padding: 0 6px; border-radius: 6px; background: var(--canvas-soft); color: var(--ink); }
.doc-card .doc-title { font-weight: 600; }
/* every card's label stays within two lines; the whole label shows on hover */
.doc-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.doc-pick { border: 0; margin: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; text-decoration: underline 1px transparent; text-underline-offset: 3px; }
.doc-pick.doc-date, .doc-pick.doc-title { padding: 0; }
.doc-pick.doc-form { background: var(--canvas-soft); }
.doc-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) {
  .doc-pick:hover { text-decoration-color: currentColor; }
  .doc-pick.doc-form:hover { background: var(--ink); color: var(--surface); }
}
/* Research: the same cards, one per row, with the matching words underneath */
.doc-list { display: grid; gap: 10px; }
.doc-list .doc-card { padding: 14px 18px 14px; }
.doc-list .doc-title { font-size: var(--fs-lead); }
.doc-snippet { margin: 4px 0 0; font-size: var(--fs-meta); line-height: 1.45; color: var(--body); cursor: text;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Research: the left column lists what the results share; each line is a next filter and shrinks with the results */
.check-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: var(--fs-small); }
.check-sub { margin-top: 4px; padding-left: 26px; color: var(--muted); }
.check-row[hidden] { display: none; }
.facets { margin-top: 18px; }
.facet { padding: 12px 0; border-top: 1px solid var(--card-edge); }
/* an h2: the side panel's sections sit one level under the page title (they were h3s, which skipped a level);
   the face and leading are pinned so the kit's big h2 never shows through */
.facet-title { margin: 0 0 6px; font-family: var(--serif-body); font-size: var(--fs-label); line-height: 1.25; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.facet-list { display: flex; flex-direction: column; gap: 1px; }
.facet-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; min-height: 32px; padding: 5px 10px;
  border: 0; border-radius: 8px; background: none; font: inherit; font-size: var(--fs-small); text-align: left; color: var(--ink); cursor: pointer; }
.facet-label { overflow-wrap: anywhere; }
.facet-count { flex: none; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--muted); }
.facet-item.is-on { background: var(--ink); color: var(--surface); font-weight: 600; }
.facet-item.is-on .facet-count { color: inherit; opacity: .75; }
.facet-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .facet-item:not(.is-on):hover { background: var(--canvas-soft); } }
.facet-more { min-height: 32px; font-size: var(--fs-small); }
.results-note { margin: 10px 0 0; }
.results-note:empty { display: none; }
/* a document's own page: the same parts, larger, each a link to the documents that share it */
.doc-facts-lg { margin: 6px 0 2px; }
.doc-facts-lg .doc-date { font-size: var(--fs-body); }
.doc-facts-lg .doc-form { font-size: var(--fs-small); padding: 1px 8px; }
a.doc-pick { color: inherit; text-decoration: underline 1px transparent; text-underline-offset: 4px; }
.page-title a.doc-pick { font: inherit; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; }
.active-filters:empty { display: none; }
.active-filters .filter-chip { gap: 8px; cursor: pointer; font-family: inherit; }
.pill-x { font-weight: 400; opacity: .75; }
.pills-count { margin: 0 4px 0 0; }
.doc-open { position: absolute; top: 6px; right: 6px; min-height: 32px; padding: 0 8px; font-size: var(--fs-label); }
@media (hover: hover) and (pointer: fine) { .doc-card:hover { background: var(--canvas-soft); } }

.tint-rust { --tint: var(--tint-rust); } .tint-slate { --tint: var(--tint-slate); }
.tint-ochre { --tint: var(--tint-ochre); } .tint-olive { --tint: var(--tint-olive); }
.tint-plum { --tint: var(--tint-plum); } .tint-stone { --tint: var(--tint-stone); }

.group { margin-top: 22px; }
.group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.group-head .panel-dot { background: var(--tint, var(--muted)); }
.group-name { font-family: var(--serif-display); font-size: var(--fs-title); font-weight: 600; }
.subgroup { margin: 12px 0 0; }
.subgroup-name { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 0 6px 2px; }

/* ---- filters: two dropdowns, the second follows the first */
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.prompt-row { display: flex; justify-content: flex-end; margin: 6px 0 2px; }
.filters label { margin: 0; }
/* ---- the forms list, in the left column under the card: a list on a desk, a row of chips when the column stacks */
.form-rail { margin-top: 16px; }
@media (max-width: 1079px) {
  .form-rail .facet-list { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .form-rail .facet-item { width: auto; border: 1px solid var(--card-edge); }
}
/* the left column stays in view; with the forms in it, it may be taller than the window, so it scrolls by itself */
@media (min-width: 1080px) {
  .rail:has(.form-rail) { max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; }
}
select.card-input, input.card-input { height: 48px; min-height: 48px; }
textarea.card-input { height: auto; min-height: 96px; padding: 12px 15px; line-height: 1.5; }
.field-label { display: block; font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 10px 0 5px; }

/* ---- person and project cards (vertical, corporate) */
.entity-card { padding: 16px 18px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); }
.entity-card a.row-name { display: inline; }
.entity-roles { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-soft); }
.entity-people { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
/* a project on a person's page: folded to its facts; opens to the people in it */
.project-lid { padding: 0; }
.project-lid-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; list-style: none; cursor: pointer; border-radius: var(--card-radius); }
.project-lid-head::-webkit-details-marker { display: none; }
.project-lid-head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.project-lid-head .chev { margin-top: 2px; }
.project-lid-text { flex: 1; min-width: 0; }
.project-lid-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.project-lid-count { font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.project-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 12px 0 0; }
.project-facts dt { font-size: var(--fs-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding-top: 2px; }
.project-facts dd { margin: 0; font-size: var(--fs-body); color: var(--ink); }
.project-facts .when { display: flex; flex-direction: column; }
.project-lid-body { padding: 0 18px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border-top: 1px solid var(--card-rule); padding-top: 14px; }
.project-lid-body .entity-people { margin-top: 0; }
@media (hover: hover) and (pointer: fine) { .project-lid-head:hover { background: var(--canvas-soft); } }
.person-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--chip-radius);
  background: var(--canvas-soft); color: var(--ink); font-size: var(--fs-small); text-decoration: none;
}
.person-chip small { color: var(--muted); font-size: var(--fs-meta); }
.tag { display: inline-block; padding: 1px 8px; border-radius: var(--chip-radius); background: var(--canvas-soft); font-size: var(--fs-label); color: var(--muted); }
.tag.is-new { color: var(--ink); font-weight: 600; }

/* ---- papers checklist */
.papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.paper { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); }
.paper.is-missing { background: transparent; box-shadow: inset 0 0 0 1px var(--card-edge); color: var(--muted); }
.paper-mark { flex: none; font-size: var(--fs-body); width: 18px; text-align: center; }
.paper-name { flex: 1; font-size: var(--fs-small); }
.paper-note { font-size: var(--fs-meta); color: var(--muted); }

/* ---- still expected: one card per wait. The step it waits on is the heading; inside, the document we have,
   a drawn arrow, and a dashed slot where the answer belongs. The footer closes it: pick the document that
   answered it, or set it aside as not needed. */
.waits { display: grid; gap: 12px; }
.wait { padding: 14px 16px 10px; border-radius: var(--card-radius-lg); background: var(--surface); box-shadow: var(--card-shadow); }
.wait-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.wait-title { margin: 0; font-family: var(--serif-display); font-size: var(--fs-title); line-height: 1.3; color: var(--ink); text-wrap: balance; }
.wait-note { font-size: var(--fs-meta); color: var(--muted); }
.wait-pair { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; }
.wait-have, .wait-slot { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--card-radius); }
.wait-have { margin: 0 0 0 -12px; cursor: pointer; }
.wait-have:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.wait-id { font-family: var(--mono); font-size: var(--fs-meta); color: var(--muted); }
.wait-name { font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.wait-form { margin-left: 8px; font-weight: 400; white-space: nowrap; vertical-align: 1px; }
.wait-have .when, .wait-slot .when { margin-top: 2px; font-size: var(--fs-meta); color: var(--ink-soft); }
.wait-have .when-ago, .wait-slot .when-ago { font-size: var(--fs-label); color: var(--muted); }
.wait-arrow { align-self: center; justify-self: center; width: 30px; height: 12px; color: var(--muted-soft); }
.wait-slot { justify-content: center; border: 1.5px dashed var(--border); color: var(--muted); }
.wait-slot .wait-name { color: var(--ink-soft); }
.wait-or { font-size: var(--fs-meta); color: var(--muted); }
.wait-slot-note { font-size: var(--fs-meta); color: var(--muted); }
/* the answer found: the dashed slot turns into the document, solid, marked On file */
.wait-slot.is-found { border-style: solid; border-color: var(--status-ok); animation: wait-found 460ms cubic-bezier(.16, 1, .3, 1) both; }
.wait-slot.is-found .wait-slot-note { color: var(--status-ok); font-weight: 600; }
@keyframes wait-found {
  from { border-color: var(--border); transform: scale(.97); opacity: .4; }
  to   { border-color: var(--status-ok); transform: none; opacity: 1; }
}
.wait-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--card-rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.wait-pick { position: relative; display: block; flex: 0 1 300px; min-width: 0; }
.wait-pick select {
  width: 100%; min-height: var(--touch-target); padding: 0 34px 0 12px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: var(--fs-small); text-overflow: ellipsis; cursor: pointer;
}
.wait-pick .chev { position: absolute; right: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; }
.wait-pick select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wait-skip { flex: none; min-height: var(--touch-target); padding: 0 2px; border: 0; background: none; font: inherit; font-size: var(--fs-small); color: var(--muted); cursor: pointer; }
.wait-skip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.wait-pick select:disabled, .wait-skip:disabled { opacity: .5; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .wait-have:hover { background: var(--canvas-soft); }
  .wait-pick select:hover { border-color: var(--muted); color: var(--ink); }
  .wait-skip:hover { color: var(--ink); text-decoration: underline 1px; text-underline-offset: 3px; }
}
@media (min-width: 900px) and (pointer: fine) and (not (any-pointer: coarse)) {
  .wait-pick select, .wait-skip { min-height: 36px; }
}
/* set aside as not needed: the same card, receded onto the paper, with Expect again */
.waits-hidden { margin-top: 28px; padding-top: 6px; border-top: 1px solid var(--hairline); }
.waits-hidden > .waits { margin-top: 8px; }
.wait.is-hidden { background: transparent; box-shadow: inset 0 0 0 1px var(--card-edge); }
/* receded by colour, not by fading: faded grey text fell to 2.4:1; the muted ink keeps 5:1 */
.wait.is-hidden :is(.wait-head, .wait-pair) :is(span, p, b, strong, time) { color: var(--muted); }
.wait.is-hidden .wait-foot { justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .wait-slot.is-found { animation: none; } }
@media (max-width: 560px) {
  .wait-pair { grid-template-columns: minmax(0, 1fr); }
  .wait-have { margin: 0 -12px; }
  .wait-arrow { width: 24px; height: 24px; margin: 6px 0; transform: rotate(90deg); }
  .wait-pick { flex: 1 1 0; }
}
/* the Expected page: each card names its project above the step it waits on */
.xp-case { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: -2px 0 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--card-rule); color: var(--muted); text-decoration: none; font-size: var(--fs-meta); }
.xp-ref { flex: none; font-family: var(--mono); letter-spacing: .02em; color: var(--ink-soft); }
.xp-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-case:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { .xp-case:hover .xp-title { color: var(--ink); text-decoration: underline 1px; text-underline-offset: 3px; } }
.xp-more { margin: 18px 0 8px; display: flex; justify-content: center; }
/* the years across the top: the year of each project's last document */
.xp-years { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.xp-years-label { width: 100%; font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.xp-year { display: inline-flex; align-items: baseline; gap: 6px; min-height: 34px; padding: 6px 12px; border: 1px solid var(--card-edge);
  border-radius: var(--chip-radius); background: var(--surface); font: inherit; font-size: var(--fs-small); color: var(--ink); cursor: pointer; }
.xp-year-n { font-size: var(--fs-label); font-variant-numeric: tabular-nums; color: var(--muted); }
.xp-year.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
.xp-year.is-on .xp-year-n { color: inherit; opacity: .75; }
.xp-year:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .xp-year:not(.is-on):hover { border-color: var(--muted); } }
/* a project line: titles, then its last document and Close project on the right */
.xp-line .panel-title { font-size: var(--fs-title); }
.xp-side { flex: none; display: flex; align-items: center; gap: 14px; }
.xp-last { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.xp-last-label { white-space: nowrap; font-size: var(--fs-label); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.xp-last .when { white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; font-size: var(--fs-meta); color: var(--ink-soft); }
.xp-last .when-ago { font-size: var(--fs-meta); color: var(--muted); }
.xp-close { white-space: nowrap; }
/* closed from this page: one quiet line that can be taken back */
.xp-closed { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 18px; border-radius: var(--card-radius-lg);
  box-shadow: inset 0 0 0 1px var(--card-edge); color: var(--muted); font-size: var(--fs-small); }
.xp-closed-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-closed-note { flex: none; font-size: var(--fs-meta); }
@media (max-width: 560px) {
  .xp-line .panel-head { flex-wrap: wrap; padding: 14px 16px; }
  .xp-line .panel-titles { flex-basis: calc(100% - 40px); }
  .xp-side { order: 3; width: 100%; justify-content: space-between; }
  .xp-last { flex-direction: row; align-items: center; gap: 10px; text-align: left; }
  .xp-last .when { align-items: flex-start; }
}
.expected .waits { grid-template-columns: minmax(0, 1fr); } /* a long project name shortens instead of widening the card */

/* ---- inbox item */
.inbox-item { padding: 16px 18px; border-radius: var(--card-radius-lg); background: var(--surface); box-shadow: var(--card-shadow); }
.inbox-head { display: flex; gap: 10px; align-items: flex-start; }
.inbox-head .row-main { cursor: default; }
.part { margin-top: 14px; padding: 14px; border-radius: var(--card-radius); background: var(--canvas-soft); }
.part.tinted { box-shadow: inset 0 3px 0 var(--tint, var(--card-edge)); }
.part-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.part-grid .wide { grid-column: 1 / -1; }
.people-edit { display: flex; flex-direction: column; gap: 6px; }
.person-row { display: grid; grid-template-columns: 1fr 140px 44px; gap: 6px; align-items: center; }
.person-row .name { font-size: var(--fs-body); overflow-wrap: anywhere; }
.questions { margin: 10px 0 0; padding-left: 20px; font-size: var(--fs-small); color: var(--ink-soft); }
.notice { margin-top: 10px; font-size: var(--fs-small); color: var(--status-warn); }
.notice.is-error { color: var(--status-danger); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ---- research */
.snippet { margin-top: 6px; font-size: var(--fs-small); line-height: 1.55; color: var(--body); white-space: pre-line; }
mark { background: var(--canvas-soft); color: var(--ink); font-weight: 600; padding: 0 2px; border-radius: 2px; }
.reading { white-space: pre-wrap; font-family: var(--serif-body); font-size: var(--fs-title); line-height: 1.7; color: var(--body); }

/* ---- toast */
.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 12px 18px; border-radius: var(--chip-radius); background: var(--ink); color: var(--surface);
  font-size: var(--fs-body); z-index: 60; box-shadow: var(--float-shadow);
}
.toast-action { margin-left: 14px; padding: 4px 12px; min-height: 32px; border: 1px solid currentColor; border-radius: var(--chip-radius);
  background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.toast-action:hover, .toast-action:focus-visible { background: var(--surface); color: var(--ink); }

@media (max-width: 520px) {
  .part-grid, .filters { grid-template-columns: 1fr; }
  .person-row { grid-template-columns: 1fr 110px 44px; }
}

/* ---- the split: the rail holds still beside the column (wired.css makes the grid at 1080px) */
.main-col { min-width: 0; }
.main-col > .section-title:first-child, .main-col > .stack:first-child { margin-top: 0; }
.rail .card + .section-title { margin-top: 22px; }
@media (max-width: 1079px) { .main-col { margin-top: 8px; } }
/* a rail taller than the window scrolls on its own: the wheel moves whichever column the mouse is over.
   The padding (taken back by the margin) keeps the cards' shadows from being cut at the scroll edge. */
@media (min-width: 1080px) {
  .rail {
    max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    padding: 4px 8px 24px; margin: -4px -8px 0;
  }
  .rail::-webkit-scrollbar { display: none; }
}
.brand { color: var(--ink); text-decoration: none; font-family: var(--serif-display); font-size: var(--fs-title); font-weight: 600; letter-spacing: -0.01em; }
.brand:hover { color: var(--ink); }
/* ---- dates: the day (11 OCT 2019), and under it how long ago (6 years, 11 months, and 25 days) */
.when { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.25; text-align: left; }
.when-day { letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.when-ago { font-size: var(--fs-meta); color: var(--muted); letter-spacing: 0; }
/* the form tag rides next to the DocId, so the date and its "how long ago" get the card's full width */
.doc-head { display: flex; align-items: center; gap: 8px; padding-right: 44px; min-height: 22px; }
.doc-facts { align-items: flex-start; }
.doc-facts-lg .when-day { font-size: var(--fs-body); }
.doc-facts-lg .when-ago { font-size: var(--fs-meta); }
.fact-value .when-ago { font-size: var(--fs-meta); }
/* ---- birth place: the country's flag before its name */
.place { display: inline-flex; align-items: center; gap: 8px; }
.place-list { display: flex; flex-direction: column; gap: 6px; }
/* ---- nationality and US status form on a person's card */
.status-form { width: 100%; padding-top: 4px; }
.nat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nat-chips:empty { display: none; }
.nat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border: 1px solid var(--line); border-radius: var(--chip-radius); background: var(--surface); }
.nat-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: var(--fs-lead); line-height: 1; cursor: pointer; }
.nat-x:hover, .nat-x:focus-visible { background: var(--surface-2); color: var(--ink); }
.nat-add { display: flex; gap: 8px; align-items: center; }
.nat-add .ft-input { flex: 1 1 auto; min-width: 0; }
/* ---- phones and emails: the primary first with its tag, the others under it; in the form, one row each with a pin */
.way-list { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.way-primary { margin-left: 8px; padding: 1px 7px; border-radius: var(--chip-radius); background: var(--surface); color: var(--muted);
  font-size: var(--fs-label); letter-spacing: .3px; text-transform: uppercase; vertical-align: 1px; }
.way-more { font-size: var(--fs-small); color: var(--muted); }
.way-rows { display: flex; flex-direction: column; gap: 6px; }
.way-row { display: flex; align-items: center; gap: 6px; }
.way-row .ft-input { flex: 1 1 auto; min-width: 0; }
.way-pin { flex: none; min-height: 30px; padding: 3px 10px; border: 1px solid var(--line); border-radius: var(--chip-radius); background: var(--surface);
  color: var(--muted); font: inherit; font-size: var(--fs-label); cursor: pointer; }
.way-pin:hover, .way-pin:focus-visible { border-color: var(--control-line); color: var(--ink); }
.way-pin.is-on { border-color: var(--ink); color: var(--ink); cursor: default; }
.way-add { align-self: flex-start; }
.way-first { display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 2px; }
.way-input { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.way-input .ft-input { padding-left: 38px; }
.way-flag { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.way-flag:empty::before { content: ""; width: 22px; height: 16.5px; border: 1px dashed var(--line); border-radius: 2px; box-sizing: border-box; }
.way-hint { margin: 0; font-size: var(--fs-label); color: var(--muted); }
/* ---- US status: each kind its own icon and colour, on the card and in the form's tiles */
.us-citizen { --tone: #2f5597; } .us-lpr { --tone: #2e7d4f; } .us-visa { --tone: #96600a; }
.us-humanitarian { --tone: #b03a5b; } .us-asylum { --tone: #6b4fa0; }
@media (prefers-color-scheme: dark) {
  .us-citizen { --tone: #9db8ea; } .us-lpr { --tone: #84d0a2; } .us-visa { --tone: #e5b862; }
  .us-humanitarian { --tone: #f0a0b6; } .us-asylum { --tone: #c3aef0; }
}
.us-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 8px;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
.us-icon svg { width: 18px; height: 18px; }
.us-status { display: inline-flex; align-items: center; gap: 10px; }
.us-label, .us-sub { display: block; }
.us-sub { font-size: var(--fs-meta); color: var(--muted); }
.us-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.us-tile { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px 6px 7px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: inherit; font: inherit; font-size: var(--fs-meta); line-height: 1.25; text-align: left; cursor: pointer; }
.us-tile:last-child { padding-left: 12px; color: var(--muted); }
.us-tile:hover { border-color: var(--control-line); }
.us-tile.is-on { border: 2px solid var(--accent); padding: 5px 9px 5px 6px; background: var(--accent-soft); }
.us-tile.is-on:last-child { padding-left: 11px; }
.us-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.flag { width: 22px; height: 16.5px; flex: none; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.form-list { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }

/* ---- Find: a layer at a time. Panels (the kit's accordion) for people and cases, ruled case lines inside a
   person, and what a case holds on the paper tone once opened. The chevron is the only moving part. */
.find-head { display: flex; align-items: center; gap: 9px; }
.find-count { margin: 18px 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.find-mentions {
  display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 12px 14px;
  border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); color: var(--ink); text-decoration: none;
}
.find-mentions .row-name { font-family: var(--serif-display); font-size: var(--fs-title); }
.find-mentions .row-sub { font-size: var(--fs-meta); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .find-mentions:hover { background: var(--canvas-soft); } }

/* the person's mark sits in the panel head, before the name */
.find-panel .who-mark { width: 38px; height: 38px; font-size: var(--fs-body); }
.who-mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--canvas-soft); font-family: var(--serif-display); font-size: var(--fs-lead); color: var(--ink-soft); letter-spacing: .5px;
}
.who-empty { margin: 4px 0 10px; font-size: var(--fs-small); color: var(--muted); }
.find-panel .panel-body { padding-top: 6px; }

/* a person's cases: one ruled line each - CaseRef, title, their role - opening into what the case holds */
.case-lines { display: flex; flex-direction: column; }
.case-line + .case-line { border-top: 1px solid var(--card-rule); }
.case-line-head { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; list-style: none; cursor: pointer; }
.case-line-head::-webkit-details-marker { display: none; }
.case-line-head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
.case-line-title { flex: 1; min-width: 0; font-family: var(--serif-display); font-size: var(--fs-lead); line-height: 1.3; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-line-role { flex: none; font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.case-line[open] > .case-line-head .case-line-title { white-space: normal; }
.case-line .case-open { margin: 0 0 12px; }
@media (hover: hover) and (pointer: fine) { .case-line-head:hover .case-line-title, .find-panel > .panel-head:hover .panel-title { text-decoration: underline 1px var(--card-edge); text-underline-offset: 4px; } }
/* what a case holds sits on the paper tone inside the white card */
.case-open { padding: 14px; border-radius: var(--card-radius); background: var(--canvas-soft); }
.case-open .person-chip { background: var(--surface); }
.case-go { margin-top: 12px; }
.find-panel .panel-body > div > .case-go { margin: 6px 0 2px; }
.case-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.case-ref { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-soft); }
.case-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--ink-soft); }
.case-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tint-olive); }
.case-status.is-closed { color: var(--muted); }
.case-status.is-closed::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
/* on the project page the status is the stage: a quiet list grouped by phase; picking a step saves it */
.stage-pick { font: inherit; font-size: var(--fs-meta); color: inherit; background: none; border: 0; padding: 1px 4px; margin: -1px -4px; border-radius: 6px; cursor: pointer; text-transform: none; letter-spacing: inherit; max-width: 100%; }
.stage-pick:hover { background: var(--canvas-soft); color: var(--ink); }
.stage-pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stage-pick:disabled { opacity: .5; cursor: progress; }
.stage-pick { field-sizing: content; }
.stage-pick option, .stage-pick optgroup { color: var(--ink); background: var(--surface); }

/* ---- a closed case wears an ink stamp, the way the paper file did.
   Closing presses it on (ink lands, the card takes the blow); reopening lifts it off, faster.
   The texture is a fixed noise mask, so the ink reads as rubber on paper, not a drawn box. */
.case-card { position: relative; }
.case-stamp {
  position: absolute; top: 12px; right: 14px; z-index: 1; pointer-events: none; user-select: none;
  padding: 3px 11px 2px; border: 4px double currentColor; border-radius: 6px;
  font-family: var(--sans); font-size: var(--fs-body); font-weight: 700; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0; transform: rotate(-8deg) scale(1.1);
  transition: opacity 160ms cubic-bezier(.4, 0, 1, 1), transform 160ms cubic-bezier(.4, 0, 1, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 70px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 140px 70px;
}
.case-card.is-closed .case-stamp { opacity: .7; transform: rotate(-8deg); transition: none; }
.case-card.is-stamping { animation: case-thud 560ms cubic-bezier(.16, 1, .3, 1); }
.case-card.is-stamping .case-stamp { animation: case-stamp 560ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes case-stamp {
  0%   { opacity: 0;   transform: rotate(-15deg) scale(1.9); filter: blur(3px); }
  45%  { opacity: .9;  transform: rotate(-8deg) scale(.96);  filter: blur(0); }
  100% { opacity: .7;  transform: rotate(-8deg) scale(1);    filter: blur(0); }
}
@keyframes case-thud {
  0%, 38% { transform: none; }
  48%     { transform: translateY(1.5px) scale(.996); }
  100%    { transform: none; }
}

/* ---- copying a DocId: a highlighter stroke runs across the number, holds, and fades */
.doc-id { position: relative; isolation: isolate; align-self: flex-start; }
.doc-id::before {
  content: ""; position: absolute; inset: 1px -4px 0; z-index: -1; border-radius: 4px;
  background: var(--border); opacity: 0; transform: scaleX(0); transform-origin: left center;
}
.doc-id.is-copied::before { animation: docid-copied 1500ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes docid-copied {
  0%   { opacity: 1; transform: scaleX(0); }
  18%  { opacity: 1; transform: scaleX(1); }
  70%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
/* less motion asked for: no flight and no sweep; the stamp just sits there, the highlight just shows while copied */
@media (prefers-reduced-motion: reduce) {
  .case-card.is-stamping, .case-card.is-stamping .case-stamp, .doc-id.is-copied::before { animation: none; }
  .doc-id.is-copied::before { opacity: 1; transform: none; }
}
.case-docs { margin: 8px 0 0; font-size: var(--fs-meta); color: var(--muted); }
.case-top .case-docs { margin: 0; }
.case-docs a { color: var(--ink-soft); text-decoration: underline 1px var(--card-edge); text-underline-offset: 3px; }
.case-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.case-with { margin-right: 2px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.case-people .person-chip { min-height: 32px; font-size: var(--fs-small); }
@media (hover: hover) and (pointer: fine) {
  .case-docs a:hover { text-decoration-color: currentColor; }
}

.case-more { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; font-size: var(--fs-meta); color: var(--ink-soft); text-underline-offset: 3px; }
/* filters fold on narrow windows; on wide ones the fold is open and its handle hidden */
.facet-summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 2px; cursor: pointer; list-style: none;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink); border-top: 1px solid var(--card-edge); }
.facet-summary::-webkit-details-marker { display: none; }
.facet-summary::after { content: "+"; font-weight: 400; font-size: var(--fs-title); color: var(--muted); }
.facet-fold[open] > .facet-summary::after { content: "–"; }
/* the research rail holds still on wide windows; a long list of filters scrolls inside it */
@media (min-width: 1080px) {
  .facet-fold:not(.is-quiet) > .facet-summary { display: none; }
  .research .rail, .find .rail { max-height: calc(100vh - 92px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
}

/* ---- the family tree on a person's Connections tab (app.js familyView), copied from 32-correspondencia's desktop
   intake app (screens/web/app.css): its own colours and type, so it looks the same there and here. One row per
   generation; a double line = married, dashed = divorced or former, solid from the couple = birth parents, dotted
   accent = step-parent. The words list sits beside the tree, or under it when the column is narrow. */
.fam-host { container-type: inline-size; margin-top: 16px; }
/* a family is wide: on a big screen the person page grows while it shows the tree (wired.css stops it at 1120px) */
@media (min-width: 1280px) { body:has(main .fam-host) { --page-measure: min(1440px, 100vw); } }
/* The family and work charts and the contact forms speak in these names. They were defined only inside .fam-wrap,
   with their own cool grey and blue: outside the charts (US status tiles, phone pins, the remove x) the borders and
   the chosen outline did not draw, and inside the charts it read as another app. Now they are the kit's warm paper,
   for the whole page, and dark mode follows the kit by itself. The accent is ink: the kit's one filled colour. */
:root {
  --surface-2: var(--canvas-soft); --text: var(--ink); --line: var(--hairline); --line-soft: var(--hairline);
  --control-line: var(--muted-soft); --accent: var(--ink); --accent-soft: var(--canvas-soft); --edge: var(--muted-soft);
  --danger: var(--status-danger); --radius: 8px;
  /* the type roles (DESIGN.md): every font-size in this file and linear.css reads one of these, so neighbouring sizes
     are never half a pixel apart and each step is a different job */
  --fs-label: 12px;   /* field names, small labels, badges, stage names: the floor */
  --fs-meta: 13px;    /* dates, notes under a row, counts */
  --fs-small: 14px;   /* secondary lines, chips, tabs, filters, links in a row */
  --fs-body: 15px;    /* everything read; a card's main line */
  --fs-lead: 16px;    /* lead copy; also the touch-screen floor for typing boxes */
  --fs-title: 17px;   /* section titles, a name that heads a panel */
  --fs-page: 24px;    /* the page and case title */
  --fs-head: 26px;    /* h1; a big count */
  --focus: var(--ink);   /* the one focus-ring colour; linear.css makes it the indigo */
  --chip-radius: 999px;   /* chips, tags, small pills; the look (linear.css) sets it. Bars and round icon buttons keep 999px */
  --float-shadow: 0 3px 10px rgba(28, 26, 23, .2);   /* what floats over the page: menu, toast, picked tray */
  --fs-tag: 12px; --fs-0: 12px; --fs-1: 14px; --fs-2: 16px; --motion: 180ms; --motion-fast: 120ms;
}
.fam-wrap {
  display: flex; gap: 24px; height: max(460px, calc(100vh - 154px)); min-width: 0;
  color: var(--text); font: var(--fs-1)/1.45 var(--sans);
}
@media (prefers-color-scheme: dark) { :root { --float-shadow: 0 3px 12px rgba(0, 0, 0, .55); } }
@media (prefers-reduced-motion: reduce) { :root { --motion: 0ms; --motion-fast: 0ms; } }
.fam-wrap h2, .fam-wrap h3 { font-family: inherit; font-weight: 600; margin: 0; }
.fam-wrap h3 { font-size: var(--fs-2); line-height: 24px; }
.fam-wrap button { font: inherit; color: inherit; }
.fam-wrap .quiet-line { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 0; font-size: var(--fs-0); line-height: 16px; color: var(--muted); }
.fam { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.ft-head { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px 12px; }
.ft-head > div { flex: 1 1 auto; min-width: 0; }
.ft-head h2 { margin: 0; font-size: var(--fs-2); line-height: 24px; }
.ft-head p { margin: 2px 0 0; }
/* the picture: a fade on whichever side has more (app.js toggles more-left / more-right), and a mouse can drag it */
.ft-view { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ft-view::before, .ft-view::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 48px; pointer-events: none;
  opacity: 0; transition: opacity var(--motion); }
.ft-view::before { left: 0; background: linear-gradient(to right, var(--surface), transparent); }
.ft-view::after { right: 0; background: linear-gradient(to left, var(--surface), transparent); }
.ft-view.more-left::before, .ft-view.more-right::after { opacity: 1; }
.ft-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: none; }
.ft-scroll::-webkit-scrollbar { display: none; }
.ft-scroll.can-drag { cursor: grab; }
.ft-scroll.is-dragging { cursor: grabbing; user-select: none; }
.ft-canvas { position: relative; }
.ft-edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ft-line { fill: none; stroke: var(--edge); stroke-width: 2; }
.ft-line.former { stroke-dasharray: 7 5; }
.ft-line.step { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 0.1 6; stroke-linecap: round; }
.ft-line.thin { stroke-width: 1.5; }
/* a line from a parent down to a card can cross a row name; like .ft-label, the name sits on a patch of the card
   ground so the line passes behind the words, not through them */
.ft-gen { position: absolute; left: 18px; padding: 0 6px; border-radius: 4px; background: var(--surface);
  font-size: var(--fs-tag); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ft-label { position: absolute; transform: translateX(-50%); padding: 0 6px; border-radius: 4px; background: var(--surface);
  font-size: var(--fs-0); line-height: 18px; color: var(--muted); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.ft-label.step { color: var(--accent); }
.ft-card { position: absolute; display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; box-sizing: border-box; overflow: hidden;
  border: 1px solid var(--control-line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-align: left;
  font: inherit; cursor: pointer; transition: border-color var(--motion), background-color var(--motion); }
.ft-card:hover { border-color: var(--accent); }
.ft-card.off { background: var(--surface-2); border-color: var(--line); }
.ft-card.off:hover { border-color: var(--control-line); }
.ft-card.anchor { background: var(--accent-soft); border: 2px solid var(--accent); padding: 8px 9px; cursor: default; }
.ft-card .l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ft-card .n-t { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-card .n-sub { font-size: var(--fs-0); line-height: 16px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 24px 16px; border-top: 1px solid var(--line-soft); }
.ft-key { display: flex; align-items: center; gap: 8px; font-size: var(--fs-0); color: var(--muted); }
.ft-key-mark { display: flex; }
.ft-key-anchor { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.ft-empty { padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ft-empty p { margin: 0; }
.ft-side { flex: 0 0 272px; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; box-sizing: border-box; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scrollbar-width: none; }
.ft-side::-webkit-scrollbar { display: none; }
.ft-side p { margin: 0; }
.ft-side .ft-side-sub { margin-top: 12px; }
.ft-words { display: flex; flex-direction: column; margin: 4px -8px; }
.ft-word { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 44px; padding: 4px 8px;
  border: 0; border-radius: 6px; background: none; color: var(--text); text-align: left; cursor: pointer; transition: background-color var(--motion-fast); }
.ft-word:hover { background: var(--surface-2); }
.ft-word .w { font-size: var(--fs-0); color: var(--muted); }
.ft-word .who { display: flex; flex-direction: column; min-width: 0; }
.ft-word .n-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-word .n-sub { font-size: var(--fs-0); color: var(--muted); }
.ft-foot { margin-top: auto !important; }
/* changing ties by hand: Add someone above the words, Change beside anyone tied straight to this person, and the small
   form that takes the list's place. Prefixed with .fam-wrap so `.fam-wrap button { color: inherit }` does not win. */
.ft-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ft-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px; }
.fam-wrap .ft-btn { min-height: 32px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent);
  color: var(--surface); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color var(--motion-fast), border-color var(--motion-fast); }
.fam-wrap .ft-btn.quiet { background: none; border-color: var(--line); color: var(--accent); font-weight: 400; }
.fam-wrap .ft-btn.quiet:hover { border-color: var(--accent); }
.fam-wrap .ft-btn:disabled { opacity: .45; cursor: default; }
.fam-wrap .ft-edit { min-height: 32px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--accent);
  font-size: var(--fs-0); cursor: pointer; white-space: nowrap; }
.fam-wrap .ft-edit:hover { background: var(--surface-2); }
.fam-wrap .ft-remove { margin-left: auto; color: var(--danger); }
.fam-wrap label { margin: 0; font-size: inherit; font-weight: 400; text-transform: none; letter-spacing: 0; color: inherit; }   /* not the page's form labels */
.ft-form { display: flex; flex-direction: column; gap: 14px; }
.ft-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ft-field > span { font-size: var(--fs-0); color: var(--muted); }
.ft-input { width: 100%; min-height: 36px; padding: 6px 10px; box-sizing: border-box; border: 1px solid var(--control-line); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; }
.ft-picks { display: flex; flex-direction: column; margin: 0 -8px; }
.fam-wrap .ft-pick { display: flex; flex-direction: column; align-items: flex-start; min-height: 40px; padding: 4px 8px; border: 0; border-radius: 6px;
  background: none; text-align: left; cursor: pointer; }
.fam-wrap .ft-pick:hover { background: var(--surface-2); }
.ft-pick .n-t { font-weight: 600; }
.ft-pick.is-new .n-t { color: var(--accent); }
.ft-pick .n-sub, .ft-note { font-size: var(--fs-0); color: var(--muted); }
.ft-chosen { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.ft-chosen .n-t { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.ft-check input { margin: 3px 0 0; accent-color: var(--accent); }
.ft-error { color: var(--danger); font-size: var(--fs-0); }
.ft-error:empty { display: none; }
.ft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fam-wrap :is(.ft-btn, .ft-edit, .ft-pick, .ft-input, .ft-word, .ft-check input):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@container (max-width: 820px) {
  .fam-wrap { flex-direction: column; height: auto; }
  .fam { flex: none; }               /* the page scrolls, so the tree shows whole; it only scrolls sideways */
  .ft-side { flex: none; }
}
/* ---- US status on a family tree card: the status icon, small, after the name */
.ft-card .ft-us { width: 18px; height: 18px; border-radius: 4px; align-self: center; }
.ft-card .ft-us svg { width: 12px; height: 12px; }
.ft-key-us { width: 36px; justify-content: center; }
.ft-key-us .ft-us { width: 18px; height: 18px; border-radius: 4px; }
.ft-key-us .ft-us svg { width: 12px; height: 12px; }
/* ---- papers: personal / professional (a person) side by side as two tabs over the checklist */
.paper-sets { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 26px 0 10px; border-bottom: 1px solid var(--line); }
.paper-set { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 0 8px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted); font-family: var(--serif-display); font-size: var(--fs-title); font-weight: 500; cursor: pointer; }
.paper-set:hover { color: var(--ink); }
.paper-set.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.paper-set-count { font-family: var(--sans, inherit); font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
/* ---- work chart: company lines heavier, owners in the accent colour, a company card with its flag */
.ft-line.corp { stroke-width: 3.2; }
.ft-line.own { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 0.1 6; stroke-linecap: round; }
.wk-card.is-org .l1 { align-items: center; }
.wk-card .flag { width: 18px; height: 13.5px; }
.wk-card .wk-papers.is-none { color: var(--muted); opacity: .8; }
.wk-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* the lists beside the charts are narrow and names are long: what they are on a small line above the full name */
.ft-side .ft-word { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 6px; padding-bottom: 6px; }
.ft-side .ft-word .n-t { white-space: normal; overflow-wrap: anywhere; line-height: 18px; }
/* ---- a paper on file: the tile filters the documents below, the small button copies its DocIds */
.paper:has(.paper-main) { padding: 0 6px 0 0; gap: 0; }
.paper-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 8px 10px 14px;
  border: 0; border-radius: var(--card-radius); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.paper.is-on { box-shadow: inset 0 0 0 2px var(--ink), var(--card-shadow); }
.paper-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0;
  border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.paper-copy svg { width: 16px; height: 16px; }
.paper-copy:hover, .paper-copy:focus-visible { background: var(--surface-2); color: var(--ink); }
.paper-main:focus-visible, .paper-copy:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.paper-count { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--chip-radius); background: var(--surface-2);
  font-size: var(--fs-label); line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; vertical-align: 1px; }
/* ---- Unified timeline (#/timeline): one row per date, the date on the left, a tinted edge by kind */
.utl-kinds { margin-top: 2px; }
.utl-kinds .chip { min-height: 36px; padding: 0 12px; }
.utl-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* the kind's tint on the top edge, the same family line a document card wears (see the top of this file) */
.utl-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 14px;
  border-radius: var(--card-radius); background: var(--surface); box-shadow: inset 0 3px 0 var(--tint, var(--card-edge)), var(--card-shadow); }
.utl-when .when-day { font-size: var(--fs-small); color: var(--ink); }
.utl-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.utl-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--tint, var(--muted)); }
.utl-kind .doc-form { text-transform: none; letter-spacing: 0; font-weight: 400; }
.utl-note { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.utl-what { font-size: var(--fs-body); line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.utl-meta { font-size: var(--fs-meta); color: var(--muted); overflow-wrap: anywhere; }
.utl-meta a { color: var(--ink-soft); text-decoration: none; }
.utl-meta a:hover, .utl-meta a:focus-visible { color: var(--link); text-decoration: underline; }
.utl-ref { font-family: var(--mono); font-size: var(--fs-meta); }
.utl-done { align-self: center; }
.utl-month { margin: 14px 0 6px 2px; }
.utl-due-title { color: var(--status-danger); }
/* trouble is a thin red outline round the whole card, never a side bar; the words (Past due, the error) carry it too */
.utl-list.is-due .utl-row { box-shadow: inset 0 3px 0 var(--tint, var(--card-edge)), inset 0 0 0 1px color-mix(in srgb, var(--status-danger) 55%, transparent), var(--card-shadow); }
.utl-row.is-done .utl-what, .utl-row.is-replaced .utl-what { color: var(--muted); }
.utl-row.is-done .utl-what { text-decoration: line-through; text-decoration-color: var(--muted-soft); }
.utl-list.is-past .utl-row { box-shadow: inset 0 3px 0 var(--card-edge), var(--card-shadow); }
.utl-more { margin: 10px 0 24px; }
@media (max-width: 520px) {
  .utl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .utl-row .utl-when { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
}

/* ---- Timeline and Milestones tabs (person and project): a rail of dates, ahead first, then the past by year.
   Each kind wears one mark on the rail: happened a filled dot, scheduled a ring, deadline a square, the rest a diamond. */
.tl-find { display: contents; }
.tl-find .progress { flex: 1 1 100%; }
.tl-part { margin: 22px 0 8px; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.tl-year { font-family: var(--mono); letter-spacing: 0; }
.tl-list { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1.5px solid var(--hairline); }
.tl-row { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 4px 14px; align-items: start; padding: 9px 0 9px 8px; }
.tl-row + .tl-row { border-top: 1px solid var(--card-rule); }
.tl-dot { position: absolute; left: -20.5px; top: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-soft); box-shadow: 0 0 0 3px var(--canvas); }
.tl-scheduled .tl-dot { background: var(--canvas); border: 2px solid var(--ink); width: 7px; height: 7px; }
.tl-deadline .tl-dot { border-radius: 2px; background: var(--status-warn); }
.tl-expires .tl-dot, .tl-milestone .tl-dot { border-radius: 2px; transform: rotate(45deg); background: var(--ink); }
.tl-when { font-size: var(--fs-small); color: var(--ink); }
.tl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-kind { font-size: var(--fs-label); font-weight: 600; letter-spacing: .2px; color: var(--muted); }
.tl-deadline .tl-kind { color: var(--status-warn); }
.tl-what { font-size: var(--fs-body); line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.tl-meta { font-size: var(--fs-meta); color: var(--muted); }
.tl-meta a { color: var(--ink-soft); font-family: var(--mono); }
.tl-acts { display: flex; gap: 10px; }
.tl-acts .btn-text { font-size: var(--fs-meta); color: var(--muted); }
.tl-row.is-done .tl-what { color: var(--muted); text-decoration: line-through 1px; }
.tl-row.is-missed .tl-kind { color: var(--status-danger); }
.tl-row.is-missed .tl-dot { background: var(--status-danger); }
.tl-today { position: relative; margin: 14px 0 4px; padding-left: 14px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.tl-today::before { content: ""; position: absolute; left: -4px; top: 50%; width: 10px; height: 2px; background: var(--ink); }
.tl-form { margin: 4px 0 8px; padding: 14px 16px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); }
.tl-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
@media (max-width: 560px) {
  .tl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-row .tl-when { grid-column: 1 / -1; }
}
/* the dates Claude read, on an inbox card, one line each */
.tl-chips { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.tl-chip { display: grid; grid-template-columns: 96px 78px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 4px 4px 10px;
  border-radius: 8px; background: var(--canvas-soft); font-size: var(--fs-small); }
.tl-chip-day { font-variant-numeric: tabular-nums; }
/* what a reading adds to people's records and settles on the case, on an inbox card: one tick line each */
.tick-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.tick-row { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 4px 4px 10px; border-radius: 8px;
  background: var(--canvas-soft); font-size: var(--fs-small); cursor: pointer; }
.tick-row > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tick-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); flex: none; }
@media (max-width: 560px) { .tl-chip { grid-template-columns: minmax(0, 1fr) auto; } .tl-chip > span:nth-child(-n+2) { grid-column: 1 / -1; } }
/* papers that expire: one tile each, its state in words and colour (never colour alone) */
.ms-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.ms-paper { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 8px; border-radius: var(--card-radius); background: var(--surface);
  box-shadow: inset 0 3px 0 var(--ms-tone, var(--card-edge)), var(--card-shadow); }
.ms-paper.is-good { --ms-tone: var(--status-ok); }
.ms-paper.is-soon { --ms-tone: var(--status-warn); }
.ms-paper.is-ended { --ms-tone: var(--status-danger); }
.ms-paper.is-unknown { background: transparent; box-shadow: inset 0 0 0 1px var(--card-edge); padding-bottom: 12px; }
.ms-paper-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ms-paper-name { font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.ms-state { font-size: var(--fs-label); font-weight: 600; color: var(--ms-tone, var(--muted)); white-space: nowrap; }
.ms-paper.is-unknown .ms-state { font-weight: 400; color: var(--muted); }
.ms-paper-end { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-small); }
.ms-label { font-size: var(--fs-meta); color: var(--muted); }
/* ---- snapshot for Claude: the header's copy icon turns to a tick for a moment; Alt+click marks a record as picked,
   and the tray at the bottom right holds the picks (copy them, or clear them) */
.snap-button .snap-done { display: none; color: var(--status-ok); }
.snap-button.is-done .snap-copy { display: none; }
.snap-button.is-done .snap-done { display: block; }
[data-ref].is-picked { outline: 2px solid var(--link); outline-offset: 2px; }
.pick-tray {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 55;
  display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; border-radius: var(--chip-radius);
  background: var(--surface); color: var(--ink); font-size: var(--fs-small); box-shadow: var(--float-shadow);
}
.pick-count { margin-right: 6px; font-variant-numeric: tabular-nums; }
.pick-btn { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--chip-radius); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.pick-btn:hover { background: var(--canvas-soft); }
.pick-btn.is-main { background: var(--ink); color: var(--surface); }
.pick-btn.is-main:hover { background: var(--ink-soft); }
.pick-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* ---- court deadlines on the Timeline page: the manual's citation, its words on hover */
.utl-cite { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
/* ---- the Email page (app.js viewEmail): the mail list in the rail, the open e-mail in the column */
.em-box { margin: 10px 0 0; font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }
.em-manage { margin-top: 8px; font-size: var(--fs-small); }
.em-add { display: block; margin-top: 6px; font-size: var(--fs-small); }
.em-trouble { margin: 0 0 10px; font-size: var(--fs-meta); }
.em-trouble p { margin: 0 0 4px; overflow-wrap: anywhere; }
.em-manage > summary { cursor: pointer; color: var(--muted); min-height: 32px; display: flex; align-items: center; }
.em-boxes { list-style: none; margin: 4px 0 8px; padding: 0; }
.em-boxes li { display: flex; justify-content: space-between; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.em-views .chip { min-height: 36px; padding: 0 12px; }
.em-undo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 4px 4px 4px 14px;
  border-radius: var(--card-radius); background: var(--canvas-soft); font-size: var(--fs-small); color: var(--ink-soft); }
.em-undo[hidden] { display: none; }
.em-undo .btn-text { padding: 8px 10px; white-space: nowrap; }
.em-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.em-row { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--card-radius);
  background: var(--surface); box-shadow: var(--card-shadow); text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.em-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.em-row.is-on { box-shadow: inset 3px 0 0 var(--ink), var(--card-shadow); }
.em-row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.em-from { font-size: var(--fs-small); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-row.is-unread .em-from, .em-row.is-unread .em-subject { font-weight: 600; }
.em-row-when { flex: none; align-items: flex-end; text-align: right; font-size: var(--fs-meta); color: var(--ink-soft); }
.em-subject { font-size: var(--fs-small); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.em-snippet { font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: var(--fs-meta); color: var(--muted); }
.em-tags > span { padding: 1px 7px; border-radius: 6px; background: var(--canvas-soft); }
.em-tags .em-who { color: var(--ink); }
.em-tags .em-in { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-more { margin: 10px 0 24px; }
@media (hover: hover) and (pointer: fine) { .em-row:hover { background: var(--canvas-soft); } }
.em-open { display: flex; flex-direction: column; gap: 12px; }
.em-head { padding: 2px 2px 0; }
.em-title { margin: 0 0 6px; font-family: var(--serif-display); font-weight: 400; font-size: var(--fs-page); line-height: 1.25; overflow-wrap: anywhere; }
.em-line { margin: 2px 0 0; font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }
.em-line a { color: var(--link); }
.em-date { display: flex; align-items: flex-start; gap: 10px; margin-top: 6px; }
.em-q { margin: 0 0 4px; font-family: var(--serif-body); font-size: var(--fs-title); font-weight: 600; }
.em-files .check-row { align-items: flex-start; overflow-wrap: anywhere; }
.em-files input { margin-top: 3px; flex: none; }
/* the mail's own design: always on white, as its sender drew it */
/* an e-mail's own HTML is written for white paper, so its frame stays white in dark mode too */
.em-html { width: 100%; height: 70vh; min-height: 360px; border: 0; border-radius: var(--card-radius); background: #fff; box-shadow: var(--card-shadow); }
.em-text { margin: 0; padding: 16px 18px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow);
  white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.em-reply > summary { cursor: pointer; font-family: var(--serif-body); font-size: var(--fs-title); }
.em-reply-text { min-height: 120px; resize: vertical; font-family: var(--sans); }
/* ---- Email: suggestion, Automate, Scheduled, the reply editor, Write with Claude, the prompt library */
.em-pick { margin: 4px 0 2px; font-size: var(--fs-small); color: var(--ink-soft); overflow-wrap: anywhere; }
.em-tools { margin-top: 10px; }
.em-auto { margin-top: 12px; padding: 14px 16px; }
.em-auto[hidden] { display: none; }
.em-auto .progress { margin: 6px 0; }
.em-auto-sum { margin: 6px 0; font-size: var(--fs-small); }
.em-sched { cursor: default; }
.em-sched.is-error { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-danger) 55%, transparent), var(--card-shadow); }
.em-sched-do { display: flex; gap: 14px; }
.em-sched-do .btn-text { padding: 6px 0; min-height: 32px; font-size: var(--fs-small); }
.em-reply > summary, .em-ai > summary { cursor: pointer; font-family: var(--serif-body); font-size: var(--fs-title); }
.em-ai { padding: 10px 14px; border-radius: var(--card-radius); background: var(--canvas-soft); }
.em-ai > summary { font-size: var(--fs-body); }
.em-chip-note { color: var(--muted); font-size: var(--fs-label); }
.chip.is-on .em-chip-note { color: inherit; opacity: .8; }
.em-prompts .chip { min-height: 36px; padding: 0 12px; }
.em-blanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 10px; }
.em-editor { min-height: 180px; max-height: 60vh; overflow-y: auto; padding: 12px 14px; line-height: 1.5; font-family: var(--sans);
  font-size: var(--fs-body); overflow-wrap: anywhere; scrollbar-width: none; }
.em-editor::-webkit-scrollbar { display: none; }
.em-editor:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.em-editor blockquote { margin: 0 0 0 4px; padding-left: 12px; border-left: 1px solid var(--control-edge); color: var(--ink-soft); }   /* the quote rule Gmail sends: one thin line */
.em-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border-radius: 10px; background: var(--canvas-soft); }
.em-tb { min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink);
  font: 15px var(--sans); cursor: pointer; }
.em-tb[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.em-tb:focus-visible, .em-sel:focus-visible, .em-color:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.em-bar select.em-sel { width: auto; min-height: 34px; height: 34px; padding: 0 6px; border-radius: 8px; font-size: var(--fs-small); }
.em-sel { height: 34px; padding: 0 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font: var(--fs-small) var(--sans); }
.em-color { width: 34px; height: 34px; padding: 3px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.em-sep { width: 1px; height: 22px; margin: 0 3px; background: var(--border); }
@media (hover: hover) and (pointer: fine) { .em-tb:hover { background: var(--surface); } .em-tb[aria-pressed="true"]:hover { background: var(--ink-soft); } }
.em-when { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--card-radius); background: var(--canvas-soft); }
.em-when[hidden] { display: none; }
.em-when .btn-row .card-input { width: auto; flex: 1 1 200px; }
.em-preset { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: var(--surface); color: var(--ink); font: 14.5px var(--sans); text-align: left; cursor: pointer; }
.em-preset:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.em-lib { display: flex; flex-direction: column; gap: 10px; }
.em-lib > .btn-text { align-self: flex-start; padding: 4px 0; }
.em-lib .section-title { margin: 14px 0 0; }
.em-lib-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.em-lib-item { padding: 14px 16px; }
.em-lib-item .btn-text { padding: 6px 0; min-height: 32px; font-size: var(--fs-small); }
.em-lib-item .btn-row { gap: 16px; }
.em-lib-name { margin: 0; font-family: var(--serif-body); font-size: var(--fs-title); }
.em-lib-body { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.em-style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 10px; }
/* labels on the Email page hold a small heading over their field, not the form-page spacing; an attachment's name keeps its case */
.em-page label { margin: 0; }
.em-files label.check-row { margin: 8px 0 0; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-small); color: var(--ink); }
.em-ai .chip:not(.is-on) { background: var(--surface); }
.em-blanks .field-label, .em-ai label .field-label { margin-top: 4px; }
.em-html { height: 55vh; }
.em-steps { margin: 0; padding-left: 20px; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); }
.em-steps li + li { margin-top: 4px; }
/* the Stages page: the phases across the top, each with how many cases and how many need a look */
.sg-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.sg-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 92px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--card-edge); border-radius: var(--card-radius); background: var(--surface); font: inherit; color: var(--ink); cursor: pointer; }
.sg-cell-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.sg-cell-n { font-family: var(--serif-display); font-size: var(--fs-head); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sg-cell-sub { font-size: var(--fs-label); color: var(--muted); }
.sg-cell.is-none .sg-cell-sub, .sg-cell .sg-cell-sub:not(:empty) { overflow-wrap: anywhere; }
.sg-cell.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sg-cell.is-on .sg-cell-label, .sg-cell.is-on .sg-cell-sub { color: inherit; opacity: .8; }
.sg-cell:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .sg-cell:not(.is-on):hover { border-color: var(--muted); } }
@media (max-width: 760px) { .sg-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sg-cell { min-height: 80px; } }
/* the signs in the rail and on the cards: red needs action now, ochre soon, slate and stone need a decision */
.sg-sign .facet-label { display: inline-flex; align-items: center; gap: 8px; }
.sg-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.sg-dot.is-danger { background: var(--status-danger); } .sg-dot.is-warn { background: var(--tint-ochre); }
.sg-dot.is-info { background: var(--tint-slate); } .sg-dot.is-quiet { background: var(--tint-stone); }
.sg-list { display: flex; flex-direction: column; gap: 10px; }
.sg-card { padding: 14px 18px 12px; }
.sg-card.is-urgent { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-danger) 55%, transparent), var(--card-shadow); }
.sg-card.is-moved { background: transparent; box-shadow: inset 0 0 0 1px var(--card-edge); }
.sg-card.is-moved .sg-title, .sg-card.is-moved .sg-sig { color: var(--muted); }
.sg-head { display: flex; align-items: flex-start; gap: 12px; }
.sg-check { flex: none; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--ink); cursor: pointer; }
.sg-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sg-title { color: var(--ink); text-decoration: none; font-size: var(--fs-title); }
@media (hover: hover) { .sg-title:hover { text-decoration: underline 1px; text-underline-offset: 3px; } }
.sg-signs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 30px; }
.sg-sig { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--chip-radius); font-size: var(--fs-meta); line-height: 1.5;
  background: var(--canvas-soft); color: var(--ink-soft); }
.sg-sig.is-danger { background: color-mix(in srgb, var(--status-danger) 14%, transparent); color: var(--status-danger); font-weight: 600; }
/* chip text is the tint with a fifth of ink in it: the bare tint read 4.2:1 on its own wash; this reads 5.4+ in both modes */
.sg-sig.is-warn { background: color-mix(in srgb, var(--tint-ochre) 16%, transparent); color: color-mix(in srgb, var(--tint-ochre) 80%, var(--ink)); font-weight: 600; }
.sg-sig.is-info { background: color-mix(in srgb, var(--tint-slate) 14%, transparent); color: color-mix(in srgb, var(--tint-slate) 80%, var(--ink)); }
.sg-sig.is-quiet { background: color-mix(in srgb, var(--tint-stone) 14%, transparent); color: color-mix(in srgb, var(--tint-stone) 80%, var(--ink)); }
.sg-sig.is-ok { background: color-mix(in srgb, var(--tint-olive) 14%, transparent); color: color-mix(in srgb, var(--tint-olive) 80%, var(--ink)); }
.sg-sig.is-plain { background: none; box-shadow: inset 0 0 0 1px var(--card-edge); }
.sg-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 10px 0 0 30px;
  padding-top: 10px; border-top: 1px solid var(--card-rule); }
.sg-stage { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.sg-stage .case-status { font-size: var(--fs-small); color: var(--ink); }
.sg-stage .stage-pick { font-size: var(--fs-small); field-sizing: content; max-width: min(100%, 340px); }
.sg-since { font-size: var(--fs-label); color: var(--muted); }
.sg-moved { font-size: var(--fs-meta); font-weight: 600; color: var(--tint-olive); }
.sg-actions { display: inline-flex; align-items: center; gap: 14px; }
.sg-waits { margin: 10px 0 0 30px; }
/* ticked cards: one bar to move them all */
.sg-bulk { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 10px;
  padding: 10px 14px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow), inset 0 0 0 1px var(--ink); }
.sg-bulk[hidden] { display: none; }
.sg-bulk-count { font-weight: 600; }
.sg-bulk-pick { width: auto; min-width: 220px; flex: 1 1 220px; max-width: 360px; }
@media (max-width: 560px) {
  .sg-signs, .sg-foot, .sg-waits { margin-left: 0; }
  .sg-head { flex-wrap: wrap; }
  /* the line sits under the title, indented past the checkbox: full width less that indent, and free to wrap, so at
     320px (a page zoomed to 400%) "9 months and 3 days" drops under the date instead of running off the card */
  .sg-head .xp-last { width: calc(100% - 30px); flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-left: 30px; text-align: left; }
  .sg-head .xp-last .when { flex-direction: row; flex-wrap: wrap; gap: 0 6px; white-space: normal; }
}

/* ---- a page heading that takes focus on a page change (render() in app.js) is a landmark, not a control: no ring */
#app [tabindex="-1"]:focus { outline: none; }

/* ---- finger floor: wherever a coarse pointer exists, every control the app adds is at least 44px to touch (the kit's
   own rule, see --touch-target in wired.css). A mouse keeps the compact sizes above. The small "x" and toolbar buttons
   grow their hit area, not their look: the negative margin keeps the row where it was. */
@media (any-pointer: coarse) {
  .facet-item, .facet-more, .doc-open, .xp-year, .toast-action, .way-pin, .person-chip, .case-more, .paper-set,
  .fam-wrap .ft-btn, .fam-wrap .ft-edit, .fam-wrap .ft-pick, .ft-input, .ft-chosen, .utl-kinds .chip, .tick-row, .pick-btn,
  .em-manage > summary, .em-views .chip, .em-sched-do .btn-text, .em-prompts .chip, .em-lib-item .btn-text { min-height: var(--touch-target); }
  .nat-x { width: var(--touch-target); height: var(--touch-target); margin: -10px; }
  .paper-copy { width: var(--touch-target); height: var(--touch-target); margin: -6px; }
  .em-tb, .em-color { min-width: var(--touch-target); height: var(--touch-target); }
  .em-bar select.em-sel, .em-sel { min-height: var(--touch-target); height: var(--touch-target); }
  .tick-row input { width: 20px; height: 20px; }
  .brand, a.panel-title { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  .doc-card button.doc-id { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  /* the one exception: the date, form and subtype on a document card are shortcuts (the filter above the list does the
     same), and three 44px rows would make every card twice as tall. 36px each, well past the 24px the AA rule asks. */
  .doc-card { gap: 0; }
  .doc-pick { display: inline-flex; align-items: center; min-height: 36px; }
  .doc-pick.doc-form { min-height: 0; position: relative; }   /* the form chip keeps its size; its touch area grows */
  .doc-pick.doc-form::after { content: ""; position: absolute; inset: -9px -4px; }
  /* a typing box under 16px makes an iPhone zoom the page on focus */
  .ft-input, .em-sel, .em-bar select.em-sel, .wait-pick select { font-size: var(--input-min-font); }
}
/* the same floor for the boxes styled later in this file and in linear.css: the filter dropdowns on every list page, a
   case's stage picker, the sidebar search on a touch screen at desk width. Last in the cascade (see the end of the file) */

/* ---- the sign-in form: the kit's label margin (28px) is for a long form; two boxes sit closer */
.login-form label { margin: 0; }
.login-form .notice { margin: 0; }   /* stays in the page even when empty, so a screen reader hears the message the moment it appears */

/* ---- a long e-mail address or name breaks inside its tile instead of running out of it */
.fact-value { min-width: 0; overflow-wrap: anywhere; }

/* ---- the tab strip (person, case): labels centred in their 44px; on a phone five tabs do not fit side by side,
   so the strip keeps one line and scrolls sideways, without a scrollbar, like every scrolling area here */
.tab-row a.tab { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
@media (max-width: 560px) {
  .tab-row { overflow-x: auto; scrollbar-width: none; margin-inline: -4px; }
  .tab-row::-webkit-scrollbar { display: none; }
  .tab-row a.tab { flex: 1 0 auto; padding: 0 14px; }
}

/* ---- a person's facts: two to a row only when each gets 190px, so a phone number or an e-mail address never breaks */
.fact-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

/* ---- a document's details: key/value rows on one card. A click on the key or the value copies it; the copy icon takes
   the row. Change and Remove stay quiet until the row is hovered or focused (always shown on touch). On a phone the
   value drops under its key. */
.kv-head { margin-bottom: 12px; }
.kv-list { list-style: none; margin: 0 0 10px; padding: 4px 0; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); }
.kv-row { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 2px 8px; }
.kv-list .kv-row + .kv-row { border-top: 1px solid var(--hairline); }
.kv-key, .kv-value { min-width: 0; padding: 8px; border: 0; border-radius: 6px; background: none; color: inherit; font: inherit;
  text-align: left; overflow-wrap: anywhere; cursor: copy; }
.kv-key { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.kv-value { font-size: var(--fs-body); color: var(--ink); }
.kv-value.is-empty { color: var(--muted); cursor: default; }
.kv-key:hover, .kv-value:hover:not(.is-empty), .kv-key:focus-visible, .kv-value:focus-visible { background: var(--canvas-soft); color: var(--ink); }
.kv-key:focus-visible, .kv-value:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.kv-acts { display: inline-flex; align-items: center; gap: 10px; }
.kv-acts .btn-text { font-size: var(--fs-meta); padding: 6px 0; min-height: 32px; }
.kv-list .kv-row .kv-acts .btn-text { opacity: 0; }
.kv-list .kv-row:hover .kv-acts .btn-text, .kv-list .kv-row:focus-within .kv-acts .btn-text { opacity: 1; }
.kv-row.is-editing { padding: 8px; }
.kv-in.card-input { height: 40px; min-height: 40px; }
.kv-add { padding: 0; }
@media (max-width: 560px) {
  .kv-row { grid-template-columns: minmax(0, 1fr) auto; }
  .kv-row .kv-key { grid-column: 1; }
  .kv-row .kv-value { grid-column: 1 / -1; grid-row: 2; padding-top: 0; }
  .kv-row.is-editing .kv-in, .kv-add .kv-in { grid-column: 1 / -1; }
}
@media (any-pointer: coarse) {
  .kv-key, .kv-value, .kv-acts .btn-text { min-height: var(--touch-target); }
  .kv-list .kv-row .kv-acts .btn-text { opacity: 1; }
  .kv-in.card-input { height: var(--touch-target); min-height: var(--touch-target); }
}

/* ---- Windows high contrast (forced colours). The system swaps every colour for a few of its own and drops shadows
   and background fills, which is how this app draws card edges, the open tab and the chosen filter. Here each of those
   gets a real line in the system's colours: CanvasText for an edge, Highlight for what is chosen, and a double line for
   trouble (there is no red in this mode; the words beside it say what is wrong). Nothing here runs in normal colours. */
@media (forced-colors: active) {
  .card, .panel, .card-list, .settings-block--card, .step-card, .doc-card, .fact, .entity-card, .inbox-item, .kv-list,
  .paper, .ms-paper, .part.tinted, .wait, .utl-row, .em-row, .em-text, .tl-form, .find-mentions, .sg-bulk, .xp-closed {
    border: 1px solid CanvasText;
  }
  .card-list-row + .card-list-row { border-top: 1px solid CanvasText; }
  .tab.is-on { border-bottom: 3px solid Highlight; }
  .chip.is-on, .chip:has(input:checked), .seg-btn.is-on, .seg input:checked + .seg-btn, .pick-tile.is-on, .pick-tile:has(input:checked),
  .facet-item.is-on, .sg-cell.is-on, .xp-year.is-on, .us-tile.is-on, .paper.is-on, .em-row.is-on, .ft-card.anchor,
  .em-tb[aria-pressed="true"], .seg-opt[aria-pressed="true"], .ib-file.is-on {
    outline: 2px solid Highlight; outline-offset: -2px;
  }
  .sg-card.is-urgent, .utl-list.is-due .utl-row, .em-sched.is-error { border: 3px double CanvasText; }
  .wait.is-hidden, .sg-card.is-moved { border-style: dashed; }
  .toast, .pick-tray, .menu { border: 1px solid CanvasText; }
}

/* ---- Messages (reminders to clients). A message reads like the e-mail it is: subject in bold, the words as written,
   line breaks kept. Trouble (not sent, no address) is a thin red outline plus the words, as everywhere else. */
.msg-list { margin-top: 14px; }
.msg-card { display: flex; flex-direction: column; gap: 6px; }
.msg-card.is-problem { box-shadow: var(--card-shadow), 0 0 0 1px color-mix(in srgb, var(--status-danger) 55%, transparent); }
.msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.msg-subject { margin: 6px 0 0; font-weight: 600; }
.msg-body { white-space: pre-wrap; line-height: 1.5; color: var(--ink-soft); }
.msg-card .btn-row { margin-top: 8px; }
.msg-card .notice { margin-top: 0; }
textarea.card-input.msg-edit { min-height: 260px; }
.msg-rule { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.msg-rule select.card-input { width: auto; min-width: 190px; }
.msg-hours > label { flex: 1 1 140px; }
.msg-check { display: flex; align-items: center; gap: 8px; min-height: var(--touch-target, 44px); }
@media (forced-colors: active) {
  .msg-card.is-problem { border: 3px double CanvasText; }
}

/* Messages, part two: per-rule editor, short (WhatsApp/text) bodies, the status address */
.msg-rule { flex-direction: column; align-items: stretch; }
.msg-rule-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.msg-rule-edit > summary { cursor: pointer; color: var(--link); font-size: var(--fs-small); min-height: var(--touch-target, 44px); display: flex; align-items: center; width: max-content; }
.msg-rule-edit[open] { display: flex; flex-direction: column; gap: 10px; }
.msg-body.is-short { font-size: var(--fs-body); }
textarea.card-input.msg-edit.is-short { min-height: 96px; }
.msg-meta { font-family: ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.msg-code { display: block; padding: 10px 12px; border-radius: 8px; background: var(--bg, rgba(0,0,0,.04)); font-size: var(--fs-meta); overflow-wrap: anywhere; }

/* ---- document checklist (a project's Checklist tab and the Checklist page). One bar everywhere: a track, the fill as
   far as the score Claude or the attorney gave, the number at its end. The colour says where the item stands (in =
   green, partly in = amber, problem = red, missing = an empty track); the words beside it say the same, so nothing
   rests on colour alone. A broad item lists its sub-parts, each with its own thinner bar and documents. */
.score-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.score-track { flex: 1; height: 8px; border-radius: 999px; background: var(--canvas-soft); overflow: hidden; box-shadow: inset 0 0 0 1px var(--hairline); }
.score-fill { display: block; height: 100%; border-radius: inherit; background: var(--ink); }   /* drawn fresh each time: nothing to animate */
.score-pct { flex: none; min-width: 3.2em; text-align: right; font-size: var(--fs-meta); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.score-bar.is-in .score-fill { background: var(--status-ok); }
.score-bar.is-partial .score-fill { background: var(--status-warn); }
.score-bar.is-problem .score-fill { background: var(--status-danger); }
.score-bar.is-big .score-track { height: 12px; }
.ck-parts .score-track { height: 6px; }
@media (prefers-reduced-motion: reduce) { .score-fill { transition: none; } }

.ck-panel { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.ck-summary { display: flex; flex-direction: column; gap: 8px; }
.ck-summary-top { display: flex; align-items: center; gap: 16px; }
.ck-big { font-size: var(--fs-head); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-summary-words { display: flex; flex-direction: column; gap: 2px; }
.ck-counts { font-size: var(--fs-body); color: var(--ink-soft); }
.ck-from { margin: 0; }
.ck-section-title { margin: 0 0 8px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.ck-list, .ck-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ck-item { padding: 12px 14px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); }
.ck-item.is-problem { box-shadow: var(--card-shadow), 0 0 0 1px color-mix(in srgb, var(--status-danger) 55%, transparent); }
.ck-item.is-not_needed { opacity: .7; }
.ck-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ck-label { font-weight: 600; overflow-wrap: anywhere; }
.ck-status { flex: none; font-size: var(--fs-label); font-weight: 600; color: var(--muted); }
.ck-status.is-in { color: var(--status-ok); }
.ck-status.is-partial { color: var(--status-warn); }
.ck-status.is-problem { color: var(--status-danger); }
.ck-meta { margin: 2px 0 0; }
.ck-parts { gap: 6px; margin: 10px 0 4px; padding-left: 12px; border-left: 1px solid var(--border); }
.ck-part-label { font-size: var(--fs-small); }
.ck-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ck-doc { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: var(--chip-radius); font-size: var(--fs-meta);
  background: var(--canvas-soft); box-shadow: inset 0 0 0 1px var(--hairline); }
.ck-doc a { font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-doc-type { color: var(--muted); }
.ck-doc-flag { font-size: var(--fs-label); font-weight: 600; }
.ck-doc.is-problem { box-shadow: inset 0 0 0 1px var(--status-danger); }
.ck-doc.is-problem .ck-doc-flag { color: var(--status-danger); }
.ck-doc.is-partial .ck-doc-flag { color: var(--status-warn); }
.ck-unlink { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font-size: var(--fs-lead); cursor: pointer; }
.ck-unlink:hover, .ck-unlink:focus-visible { color: var(--ink); background: var(--surface); }
.ck-note { margin: 6px 0 0; font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.45; }
.ck-ask { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.45; }
.ck-ask-label { font-weight: 600; }
.ck-rule { margin: 6px 0 0; font-size: var(--fs-meta); color: var(--muted); font-style: italic; }
.ck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
.ck-change > summary { cursor: pointer; color: var(--link); font-size: var(--fs-small); min-height: var(--touch-target, 44px); display: flex; align-items: center; }
.ck-change-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 4px 0 6px; }
.ck-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--muted); }
.card-input.ck-pick { width: auto; min-width: 120px; }
.ck-line .score-bar { max-width: 420px; }
@media (forced-colors: active) {
  .ck-item, .ck-doc { border: 1px solid CanvasText; }
  .ck-item.is-problem, .ck-doc.is-problem { border: 3px double CanvasText; }
  .score-track { border: 1px solid CanvasText; }
  .score-fill { background: CanvasText; forced-color-adjust: none; }
}

/* ---- the phone's bottom bar (approved design, 2026-10-08): Find, Inbox, Dates, Messages, More.
   Below 900px only; wider screens keep the header menu. More opens that same menu as a sheet above the bar.
   --tabbar-h lifts everything that floats at the foot of the screen (toast, pick tray, FAB, action bar) above it. */
:root { --tabbar-h: 0px; }
.tabbar { display: none; }
@media (max-width: 899px) {
  :root { --tabbar-h: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 2px max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
    background: var(--surface); box-shadow: 0 -1px 0 var(--card-edge);
  }
  .tabbar a, .tabbar button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 58px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-meta); font-weight: 500;
    color: var(--muted); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .tabbar svg { width: 24px; height: 24px; }
  .tabbar .is-on, .tabbar .is-open { color: var(--ink); font-weight: 600; }
  .tabbar .is-on svg { stroke-width: 2; }
  /* where you are: a short accent line under the label */
  .tabbar .is-on::after { content: ""; position: absolute; bottom: 3px; width: 18px; height: 3px; border-radius: 2px; background: var(--link); }
  .tabbar a:focus-visible, .tabbar button:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 10px; }
  .tab-badge {
    position: absolute; top: 5px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
    border-radius: 4px; background: var(--ink); color: var(--on-ink); font-size: var(--fs-label); font-weight: 600; line-height: 18px; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .tab-badge.is-late { background: var(--status-danger); }
  .tab-badge[hidden], .tabbar[hidden] { display: none; }
  #menu-button { display: none; }
  .menu {
    position: fixed; top: auto; bottom: var(--tabbar-h); max-height: calc(100dvh - var(--header-height) - var(--tabbar-h)); overflow-y: auto;
    border-radius: var(--card-radius-lg) var(--card-radius-lg) 0 0; background: var(--surface); box-shadow: var(--float-shadow);
    animation: tabbar-sheet var(--duration-modal) cubic-bezier(.2, .8, .2, 1);
  }
  main#app { padding-bottom: calc(96px + var(--tabbar-h)); }
  main > .action-bar:last-child { margin-bottom: calc(-96px - var(--tabbar-h)); }
  .action-bar { bottom: var(--tabbar-h); }
  .toast { bottom: calc(18px + var(--tabbar-h)); }
  .pick-tray { bottom: calc(18px + var(--tabbar-h)); }
  .fab { bottom: calc(20px + var(--tabbar-h)); }
}
@keyframes tabbar-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } }
@media (forced-colors: active) {
  .tabbar { border-top: 1px solid CanvasText; }
  .tabbar .is-on::after { background: Highlight; forced-color-adjust: none; }
  .tab-badge { border: 1px solid CanvasText; }
}

/* =====================================================================================================================
   The approved design (2026-10-08), on every page. Three rules hold it together:
   - colour carries meaning, never decoration: red = late, amber = waiting or missing, green = done, the kinds' own tints
     (slate, rust, ochre, olive, plum) = what a thing is, the link blue = where you are. Every colour is mixed from the
     kit's tokens, so dark mode follows by itself; text on a soft fill is the tint mixed toward the ink (AA on its fill).
   - motion only shows a change of state (a card leaves, a step fills, a stamp lands), 150-450ms, and stops for
     prefers-reduced-motion; the change itself still happens.
   - a phone gets the bottom bar (above), a desk gets the left menu (below); the pages themselves are the same.
   ===================================================================================================================== */
:root {
  --soft-late: color-mix(in srgb, var(--status-danger) 10%, var(--surface));
  --soft-warn: color-mix(in srgb, var(--status-warn) 13%, var(--surface));
  --soft-ok: color-mix(in srgb, var(--status-ok) 12%, var(--surface));
  --soft-here: color-mix(in srgb, var(--link) 11%, var(--surface));
  --edge-late: color-mix(in srgb, var(--status-danger) 28%, var(--surface));
  --edge-warn: color-mix(in srgb, var(--status-warn) 40%, var(--surface));
  --ink-late: color-mix(in srgb, var(--status-danger) 88%, var(--ink));
  --ink-warn: color-mix(in srgb, var(--status-warn) 80%, var(--ink));
  --ink-ok: color-mix(in srgb, var(--status-ok) 82%, var(--ink));
  --ink-here: color-mix(in srgb, var(--link) 78%, var(--ink));
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}
/* a tone: what a thing is, as a soft chip (icon squares, kind labels) */
.tone-slate { --tone: var(--tint-slate); } .tone-rust { --tone: var(--tint-rust); } .tone-ochre { --tone: var(--tint-ochre); }
.tone-olive { --tone: var(--tint-olive); } .tone-plum { --tone: var(--tint-plum); } .tone-stone { --tone: var(--tint-stone); }
.tone-ok { --tone: var(--status-ok); } .tone-warn { --tone: var(--status-warn); } .tone-late { --tone: var(--status-danger); }
.tint-late { --tint: var(--status-danger); }
.icon-chip { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--card-radius);
  background: color-mix(in srgb, var(--tone, var(--tint-stone)) 15%, var(--surface)); color: color-mix(in srgb, var(--tone, var(--tint-stone)) 78%, var(--ink)); }
.icon-chip svg { width: 20px; height: 20px; }
.mono { font-family: var(--mono); }

/* ---- Inbox: where the folder stands as one bar of four steps (scan, Claude reads, you check, filed); the step that
   waits for someone is the one in colour */
.stepper { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 6px 0 16px; padding: 0; }
.stepper li { display: flex; flex-direction: column; gap: 7px; font-size: var(--fs-meta); color: var(--muted); }
.stepper li::before { content: ""; height: 4px; border-radius: 2px; background: var(--card-edge); transition: background var(--duration-slow) ease-out; }
.stepper li.is-done::before { background: var(--ink); }
.stepper li.is-now { color: var(--ink); font-weight: 600; }
.stepper li.is-now::before { background: var(--link); }
.inbox-item { position: relative; }
.inbox-item.tinted { box-shadow: inset 0 3px 0 var(--tint, var(--card-edge)), var(--card-shadow); }
.conf { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px; border-radius: var(--chip-radius); font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .3px; text-transform: none; }
.conf.is-sure { background: var(--soft-ok); color: var(--ink-ok); }
.conf.is-check { background: var(--soft-warn); color: var(--ink-warn); }
.conf.is-unsure { background: var(--soft-late); color: var(--ink-late); }
.conf.is-unread { background: var(--canvas-soft); color: var(--ink-soft); }
/* filing: the card holds still under a bar that names each real step, then the stamp lands and the card leaves */
.inbox-item.is-filing .part, .inbox-item.is-filing .questions, .inbox-item.is-filing .inbox-head { opacity: .5; pointer-events: none; transition: opacity var(--duration-slow) ease-out; }
.filing { display: flex; flex-direction: column; gap: 9px; width: 100%; min-height: 44px; justify-content: center; }
.filing-top { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-body); font-weight: 600; }
.filing-count { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.filing-track { height: 6px; border-radius: 2px; background: var(--canvas-soft); overflow: hidden; }
/* the bar stretches (transform) instead of growing its width, so a step never makes the page lay itself out again */
.filing-fill { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left center; transition: transform 450ms var(--ease-out); }
.filed-note { display: flex; align-items: center; gap: 12px; min-height: 48px; animation: rise-in 220ms var(--ease-out) both; }
.filed-check { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--soft-ok); color: var(--status-ok); }
.filed-check svg { width: 20px; height: 20px; }
.filed-check path { stroke-dasharray: 22; animation: draw-check 320ms 80ms var(--ease-out) both; }
.filed-words { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-body); }
/* the stamp the paper file wore: the same double rule and tilt as a closed case's (see .case-stamp) */
.filed-stamp {
  position: absolute; top: 18px; right: 18px; z-index: 2; pointer-events: none; user-select: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 14px 4px; border: 4px double currentColor; border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--status-ok); text-transform: uppercase; font-family: var(--sans);
  transform: rotate(-8deg); opacity: .85; animation: stamp-land 560ms 120ms cubic-bezier(.16, 1, .3, 1) both;
}
.filed-stamp b { font-size: var(--fs-page); letter-spacing: .2em; line-height: 1.1; }
.filed-stamp small { font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; }
.inbox-item.is-filed { animation: case-thud 560ms 120ms cubic-bezier(.16, 1, .3, 1); }
@keyframes stamp-land {
  0%   { opacity: 0;   transform: rotate(-15deg) scale(1.9); filter: blur(3px); }
  45%  { opacity: .95; transform: rotate(-8deg) scale(.96);  filter: blur(0); }
  100% { opacity: .85; transform: rotate(-8deg) scale(1);    filter: blur(0); }
}
@keyframes draw-check { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* a card that is done leaves: it fades and slides a little, then the list closes over it */
.is-leaving { animation: leave 260ms var(--ease-out) forwards; }
@keyframes leave { to { opacity: 0; transform: translateX(14px); } }

/* ---- a person: a birthday in the next two weeks, said under the date of birth (the Birthday reminder goes out that day) */
.dob-with { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.bday-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--chip-radius); font-size: var(--fs-meta); font-weight: 600;
  background: color-mix(in srgb, var(--tint-plum) 15%, var(--surface)); color: color-mix(in srgb, var(--tint-plum) 78%, var(--ink)); }
.bday-tag svg { width: 14px; height: 14px; }
/* papers: one on file is ticked in green; one missing is an amber tile with a dashed edge, because it is something to get */
.paper:not(.is-missing) .paper-mark { color: var(--status-ok); font-weight: 600; }
.paper.is-missing { background: var(--soft-warn); box-shadow: none; border: 1.5px dashed var(--edge-warn); padding: 8.5px 12.5px; color: var(--ink-warn); }
.paper.is-missing .paper-note { color: var(--ink-warn); }
/* the buttons under a person's or a case's facts: rounded, like everything else pressed on a card */
.detail-page .card > .btn-row .btn-quiet { border-radius: var(--chip-radius); }

/* ---- a case: the stage as a slate chip (what the case is waiting on), closed in grey */
.case-card .stage-status { padding: 3px 10px 3px 9px; border-radius: var(--chip-radius); background: color-mix(in srgb, var(--tint-slate) 14%, var(--surface));
  color: color-mix(in srgb, var(--tint-slate) 80%, var(--ink)); font-weight: 600; }
.case-card .stage-status:not(.is-closed)::before { background: var(--status-ok); }
.case-card .stage-status.is-closed { background: var(--canvas-soft); color: var(--muted); font-weight: 400; }

/* ---- still expected: each card says where it stands, in words and colour: waiting (amber) or past its usual time (red) */
.wait-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-warn); }
.wait-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-warn); }
/* late is trouble: the thin red outline all round, like every other trouble mark (the top edge is for a kind's tint) */
.wait.is-late { background: var(--soft-late); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status-danger) 55%, transparent), var(--card-shadow); }
.wait.is-late .wait-state { color: var(--ink-late); }
.wait.is-late .wait-state::before { background: var(--status-danger); }
.wait.is-late .wait-have { background: transparent; }

/* ---- Dates: Past due, Coming up, Earlier as one switch; the white thumb slides to the chosen one */
.seg3 { position: relative; display: grid; grid-template-columns: repeat(var(--seg-n, 3), minmax(0, 1fr)); padding: 4px; margin: 0 0 14px;
  border-radius: var(--card-radius); background: var(--canvas-soft); }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--seg-n, 3)); border-radius: var(--card-radius);
  background: var(--surface); box-shadow: var(--card-shadow); transform: translateX(calc(var(--seg-i, 0) * 100%)); transition: transform 240ms var(--ease-out); }
.seg-opt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 6px; border: 0;
  background: none; font: inherit; font-size: var(--fs-small); color: var(--ink-soft); cursor: pointer; border-radius: var(--card-radius); transition: color var(--duration-slow) ease-out; }
.seg-opt.is-on { color: var(--ink); font-weight: 600; }
.seg-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.seg-n { font-size: var(--fs-meta); font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.seg-opt.is-late .seg-n { color: var(--ink-late); }
.utl-section.is-new { animation: rise-in 200ms var(--ease-out) both; }
/* a kind's label in its tint, darkened toward the ink so it reads on the white card */
.utl-kind { color: color-mix(in srgb, var(--tint, var(--muted)) 80%, var(--ink)); }
.tl-scheduled .tl-kind { color: color-mix(in srgb, var(--tint-slate) 80%, var(--ink)); }
.tl-deadline .tl-kind { color: var(--ink-late); }
.tl-deadline .tl-dot { background: var(--status-danger); }
.tl-expires .tl-kind { color: color-mix(in srgb, var(--tint-rust) 80%, var(--ink)); }
.tl-milestone .tl-kind { color: color-mix(in srgb, var(--tint-olive) 80%, var(--ink)); }

/* ---- Messages: the reminder's name in the tone of what it is about; the list and the settings side by side on a desk */
.msg-card .row-kicker { color: var(--ink-soft); }
.msg-card .row-kicker.msg-src-event { color: color-mix(in srgb, var(--tint-plum) 80%, var(--ink)); }
.msg-card .row-kicker.msg-src-wait, .msg-card .row-kicker.msg-src-stage { color: var(--ink-warn); }
.msg-card .row-kicker.msg-src-rule { color: var(--ink-late); }
.msg-card .row-kicker.msg-src-birthday { color: color-mix(in srgb, var(--tint-rust) 80%, var(--ink)); }
.msg-card .row-kicker.is-team { color: color-mix(in srgb, var(--tint-slate) 80%, var(--ink)); }
.msg-card .msg-body { padding: 12px 14px; border-radius: var(--card-radius); background: var(--canvas-soft); color: var(--ink); }
.msg-state { font-weight: 600; color: var(--ink-warn); }
.msg-state.is-sent { color: var(--ink-ok); }
.msg-state.is-problem { color: var(--ink-late); }
.msg-state.is-quiet { color: var(--muted); font-weight: 400; }
.msg-layout { display: grid; gap: 8px; }
@media (min-width: 1280px) {
  .msg-layout { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 28px; align-items: start; }
  .msg-side > :first-child { margin-top: 0; }
}

/* ---- the checklist: the big number in the colour of where the case stands */
.ck-big { font-family: var(--serif-display); font-weight: 400; }
.ck-big.is-in { color: var(--ink-ok); }
.ck-big.is-partial { color: var(--ink-warn); }
.ck-big.is-problem { color: var(--ink-late); }
.ck-item.is-problem { background: var(--soft-late); }
.ck-item.is-not_needed { opacity: 1; background: transparent; box-shadow: none; border: 1.5px dashed var(--card-edge); }
.ck-item.is-not_needed .ck-label { color: var(--muted); }

/* ---- every page */
.page-title { text-wrap: balance; }
@media (max-width: 899px) {
  /* the header search is the Find tab now; the header keeps Copy for Claude */
  .site-header .header-actions > a.header-icon[href="#/"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .filed-stamp, .inbox-item.is-filed, .filed-note, .filed-check path, .utl-section.is-new, .is-leaving { animation: none; }
  .is-leaving { opacity: 0; }
  .seg-thumb, .filing-fill, .stepper li::before, .today-go svg { transition: none; }
}
@media (forced-colors: active) {
  .seg3, .filed-stamp, .icon-chip, .conf, .bday-tag { border: 1px solid CanvasText; }
  .seg-opt.is-on { outline: 2px solid Highlight; outline-offset: -2px; }
  .stepper li.is-now::before { background: Highlight; forced-color-adjust: none; }
  .wait.is-late { border: 3px double CanvasText; }
  .paper.is-missing { border-style: dashed; border-color: CanvasText; }
}
.wait-head .wait-state { width: 100%; margin-bottom: 2px; }
/* Messages: one message under the other, everywhere; trouble first, as a red line that opens the Problems tab */
.msg-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.msg-trouble { display: flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 14px; padding: 0 14px; border-radius: var(--card-radius);
  background: var(--soft-late); box-shadow: inset 0 0 0 1px var(--edge-late); color: var(--ink-late); font-size: var(--fs-body); font-weight: 600; text-decoration: none; }
.msg-trouble:hover { color: var(--ink-late); }
.msg-trouble > span:nth-child(2) { flex: 1; }
.msg-trouble-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--status-danger); }
.msg-trouble .chev { width: 18px; height: 18px; transform: rotate(-90deg); }
.msg-trouble:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (forced-colors: active) { .msg-trouble { border: 3px double CanvasText; } }
/* Find with nothing typed: the search box over Today, one wide column, on a desk too */
@media (min-width: 1080px) {
  .home.find.is-idle { display: block; }
  .home.find.is-idle > .rail { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; max-width: 720px; }
  .home.find.is-idle > .main-col { margin-top: 4px; }
}
/* a case: its name under the CaseRef and stage; the stage chip is as tall as its words */
.case-title { margin: 10px 0 0; font-size: var(--fs-head); line-height: 1.2; }
.case-card .stage-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 10px; vertical-align: middle; }
.case-card .stage-pick { min-height: 0; height: auto; padding: 2px 0; margin: 0; line-height: 1.4; }
main#app:focus { outline: none; }
/* the Inbox: the cards start below the buttons; the stamp lands across the card's head, the way it would on paper */
.list-page > .stepper ~ .stack { margin-top: 16px; }
.filed-stamp { left: 0; right: 0; width: max-content; margin: 0 auto; top: 14px; }
.inbox-item.is-filed .inbox-head .btn-quiet { visibility: hidden; }
.msg-layout > * { min-width: 0; }   /* the sideways-scrolling tab strip must not widen the column past the screen */

/* =====================================================================================================================
   The PC layout (approved 2026-10-08, second pass): one top bar, one column, controls on top. Quiet by default: counts
   in plain figures, colour only where something is late or waiting, one filled button per page. Every width works and
   nothing is dropped on a narrow one: the controls row wraps, the side-by-side panes stack, the phone gets the bottom bar.
   ===================================================================================================================== */

/* ---- the top bar: brand, the four everyday places with what waits in each, More, then search, Copy for Claude, Settings */
html body .site-header .site-header__inner { max-width: 1180px; gap: 18px; }
.topnav, .top-find, .top-find-icon { display: none; }
@media (min-width: 900px) {
  .topnav:not([hidden]) { display: flex; align-self: stretch; gap: 2px; margin-right: auto; }
  .topnav a, .topnav button {
    display: inline-flex; align-items: center; gap: 6px; min-height: var(--header-height); padding: 0 12px; border: 0; background: none;
    font: inherit; font-size: var(--fs-body); color: var(--ink-soft); text-decoration: none; cursor: pointer; white-space: nowrap;
  }
  .topnav svg { width: 14px; height: 14px; }
  .topnav .is-on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
  .topnav a:focus-visible, .topnav button:focus-visible { outline: 2px solid var(--focus); outline-offset: -6px; border-radius: 8px; }
  .top-n { font-size: var(--fs-meta); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
  .top-n.is-late { color: var(--status-danger); font-weight: 600; }
  .top-n[hidden] { display: none; }
  .header-actions { display: flex; align-items: center; gap: 4px; }
  .top-find-icon { display: inline-flex; }
  /* More drops under its button (app.js sets left and top) */
  .menu { position: fixed; right: auto; width: 230px; padding: 6px; border-radius: var(--card-radius-lg); background: var(--surface); box-shadow: var(--float-shadow); }
  .menu a { min-height: 42px; font-size: var(--fs-body); }
  @media (hover: hover) and (pointer: fine) { .topnav a:not(.is-on):hover, .topnav button:not(.is-on):hover { color: var(--ink); } .menu a:hover { background: var(--canvas-soft); } }
}
@media (min-width: 1100px) {
  .top-find:not([hidden]) {
    display: flex; align-items: center; gap: 8px; width: 240px; height: 38px; padding: 0 12px; border-radius: 10px;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--muted);
  }
  .top-find svg { flex: none; width: 16px; height: 16px; }
  .top-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--fs-small); color: var(--ink); }
  .top-find:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
  .top-find-icon { display: none; }
}
/* Find has its own big box: the small one steps aside there */
body[data-page="find"] .top-find, body[data-page="find"] .top-find-icon { visibility: hidden; }
@media (max-width: 899px) { .top-settings { display: none; } }   /* on a phone Settings is under More */

/* ---- one column on every window: a page's side column stacks above it, and no page is wider than 1080px */
@media (min-width: 1080px) {
  body:has(main > .home), body:has(main > .list-page), body:has(main > .detail-page) { --page-measure: 1080px; }
  .home, .detail-page { display: block; }
  .rail, .rail:has(.form-rail) { position: static; max-height: none; overflow: visible; padding: 0; margin: 0 0 12px; }
}
.detail-page > .main-col { margin-top: 8px; }

/* ---- a list page: the title and one line, then one row of controls, then the list */
.lp { display: flex; flex-direction: column; gap: 12px; }
.lp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-top: 6px; }
.lp-titles { flex: 1 1 420px; min-width: 0; }
.lp-head .page-title { margin: 0; }
.lp-note { margin: 4px 0 0; max-width: 72ch; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.lp-head > .section-note, .lp-head > .results-note { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.lp-head > .btn-row, .lp-head > div > .btn-row { margin: 0; }
.lp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lp-search { flex: 1 1 260px; min-width: 0; }
.lp-search .card-input { width: 100%; }
.lp-bar .card-input, .lp-search .card-input { height: 44px; min-height: 44px; }
.lp-bar .check-row { margin: 0; min-height: 44px; padding: 0 4px; }
.lp-bar .check-sub { padding-left: 4px; }
.pick-row, .pick-holder { display: contents; }
.pick {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 44px; margin: 0; padding: 0 2px 0 12px; border-radius: 10px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-size: var(--fs-small); color: var(--muted); white-space: nowrap;
}
.pick-title { flex: none; }
.pick select.card-input {
  width: auto; max-width: 260px; height: 40px; min-height: 40px; margin: 0; padding: 0 26px 0 4px; border: 0; box-shadow: none;
  background-color: transparent; font-size: var(--fs-small); font-weight: 600; color: var(--ink); text-overflow: ellipsis;
}
.pick.is-set:not(.is-plain) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pick:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.lp-bar > .seg3 { flex: 0 1 380px; margin: 0; }
.lp-bar > .sg-tabs { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 0 4px; }
.sg-tabs::-webkit-scrollbar { display: none; }
.tab-n { font-size: var(--fs-meta); font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.tab-n.is-late { color: var(--status-danger); font-weight: 600; }
@media (max-width: 899px) {
  .pick { flex: 1 1 170px; }
  .pick select.card-input { flex: 1; min-width: 0; max-width: none; }
  .lp-bar > .seg3 { flex: 1 1 100%; }
}

/* ---- Find: the big box, then Today, or the filters and what matched */
.find-box .card-input { width: 100%; height: 56px; min-height: 56px; border-radius: var(--card-radius); font-size: var(--fs-title); }
.find-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.find-bar .find-count { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.find-bar .find-mentions { display: inline; margin: 0 0 0 auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--fs-small); font-weight: 600; color: var(--link); }
.find-results > .section-title:first-child { margin-top: 4px; }

/* ---- Today: quiet rows, words first; red only for what is late */
.today { display: flex; flex-direction: column; gap: 10px; }
.today .section-title { margin: 12px 0 0; }
.q-list { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); }
.q-row { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 18px; color: var(--ink); text-decoration: none; }
.q-row + .q-row { border-top: 1px solid var(--card-rule); }
.q-row:hover { color: var(--ink); }
.q-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--card-radius); }
.q-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-name { font-size: var(--fs-lead); font-weight: 600; }
.q-sub { font-size: var(--fs-small); color: var(--muted); }
.is-bad { color: var(--ink-late); font-weight: 600; }
.q-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.q-go { flex: none; font-size: var(--fs-page); line-height: 1; color: var(--muted); }
.q-btn { flex: none; }
.q-recent { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); }
.q-recent a { color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .q-row:hover { background: var(--canvas-soft); } }

/* ---- the Inbox: the files beside the one being checked; stacked on a phone */
.inbox-page .stepper { margin: 0; }
.ib-split { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ib-list { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--card-shadow); }
.ib-file { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 14px; border: 0; background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.ib-file + .ib-file { border-top: 1px solid var(--card-rule); }
.ib-file.is-on { background: var(--canvas-soft); box-shadow: inset 3px 0 0 var(--ink); }
.ib-file:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ib-name { font-family: var(--mono); font-size: var(--fs-label); color: var(--muted); overflow-wrap: anywhere; }
.ib-title { font-size: var(--fs-body); font-weight: 600; overflow-wrap: anywhere; }
.ib-meta { font-size: var(--fs-meta); color: var(--muted); }
.ib-conf { font-weight: 600; }
.ib-conf.is-sure { color: var(--ink-ok); } .ib-conf.is-check { color: var(--ink-warn); } .ib-conf.is-unsure { color: var(--ink-late); }
@media (min-width: 900px) {
  .ib-list { position: sticky; top: calc(var(--header-height) + 12px); max-height: calc(100vh - var(--header-height) - 24px); overflow-y: auto; scrollbar-width: none; }
}
@media (max-width: 899px) {
  .ib-split { grid-template-columns: minmax(0, 1fr); }
  .ib-list { max-height: 264px; overflow-y: auto; }
}
@media (hover: hover) and (pointer: fine) { .ib-file:not(.is-on):hover { background: var(--canvas-soft); } }

/* ---- Email: the views as one switch, then the list beside the open e-mail; stacked on a phone */
.em-split { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.em-side { min-width: 0; }
@media (max-width: 899px) { .em-split { grid-template-columns: minmax(0, 1fr); } }
.lp-bar .chip-row.em-views { display: inline-flex; flex-wrap: nowrap; gap: 0; max-width: 100%; margin: 0; padding: 3px; overflow-x: auto; scrollbar-width: none;
  border-radius: var(--card-radius); background: var(--canvas-soft); }
.lp-bar .em-views .chip { min-height: 38px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--ink-soft); white-space: nowrap; }
.lp-bar .em-views .chip.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--card-shadow); }

/* ---- Messages: the list reads at a letter's width; the settings are their own view */
.msg-page .msg-list, .msg-page > .tab-row, .msg-page > .msg-trouble, .msg-page > .questions { max-width: 860px; }
.msg-page > .tab-row { margin-top: 0; }

/* ---- a record (person, case, document): its header across the page, the tabs under it, then the tab */
.detail-page > .rail > .card { padding: 22px 24px; }
.detail-page .card .fact-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px 28px; }
.detail-page .card .fact { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.case-people-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.case-people-row .person-chip { background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-edge); }
/* More ▾: the less used actions of a record, one press away */
.act-more { position: relative; display: inline-block; }
.act-more > summary { list-style: none; cursor: pointer; }
.act-more > summary::-webkit-details-marker { display: none; }
.act-more > summary::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.act-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; display: flex; flex-direction: column; min-width: 260px; max-width: calc(100vw - 32px);
  padding: 6px; border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--float-shadow); }
.act-menu > a, .act-menu > button { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: var(--fs-small); color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.act-menu > a:focus-visible, .act-menu > button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .act-menu > a:hover, .act-menu > button:hover { background: var(--canvas-soft); } }

/* ---- a person's papers: the ones on file as small chips (press one to show only its documents), what is missing in
   one amber line under them */
.paper-sets { display: inline-flex; gap: 0; margin: 18px 0 8px; padding: 3px; border: 0; border-radius: var(--card-radius); background: var(--canvas-soft); }
.paper-set { min-height: 36px; margin: 0; padding: 0 14px; border: 0; border-radius: 8px; font-family: inherit; font-size: var(--fs-small); color: var(--ink-soft); }
.paper-set.is-on { border: 0; background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--card-shadow); }
.papers-box { display: flex; flex-direction: column; gap: 10px; }
.papers { display: flex; flex-wrap: wrap; gap: 6px; }
.paper, .paper:has(.paper-main) { min-height: 0; padding: 0 4px 0 0; gap: 0; border: 0; border-radius: var(--chip-radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--card-edge); }
.paper-main { min-height: 36px; gap: 6px; padding: 4px 6px 4px 12px; border-radius: var(--chip-radius); }
.paper-mark { width: auto; font-size: var(--fs-meta); }
.paper-name { font-size: var(--fs-small); }
.paper-name br { display: none; }
.paper-main .paper-note { margin-left: 6px; font-family: var(--mono); font-size: var(--fs-label); }
.paper-copy { width: 28px; height: 28px; }
.paper.is-on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.papers-missing { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.papers-missing-n { color: var(--ink-warn); font-weight: 600; }
.papers-missing-n::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
/* a record's documents: kind, type and form as one row of dropdowns */
.filters { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

/* ---- Stages: the signs on a card in words with a small dot, not filled pills; no red outline round every card */
.sg-card.is-urgent { box-shadow: var(--card-shadow); }
.sg-sig, .sg-sig.is-danger, .sg-sig.is-warn, .sg-sig.is-info, .sg-sig.is-quiet, .sg-sig.is-ok, .sg-sig.is-plain { padding: 0; background: none; box-shadow: none; font-weight: 600; }
.sg-sig::before { content: ""; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.sg-sig.is-plain { font-weight: 400; color: var(--muted); }
.sg-sig.is-danger { color: var(--ink-late); }
.sg-signs { gap: 4px 16px; }

@media (forced-colors: active) {
  .pick, .q-list, .ib-list, .act-menu { border: 1px solid CanvasText; }
  .topnav .is-on, .ib-file.is-on { outline: 2px solid Highlight; outline-offset: -2px; }
}
/* the phase tabs keep one line each and scroll sideways; the Inbox's three buttons sit closer on a phone */
.sg-tabs .tab { flex: none; white-space: nowrap; padding: 0 14px; }
.inbox-page .lp-head .btn-row { flex-wrap: wrap; gap: 8px; }
@media (max-width: 899px) {
  .inbox-page .lp-head .btn-row > button { min-height: 44px; padding: 0 14px; font-size: var(--fs-small); }
}
.tab .tab-n { margin-left: 6px; }

/* ---- audit fixes, 2026-10-08 afternoon (after the approved PC layout). Last in the file, so they win over the rules above. */
/* the filter dropdown in a controls row may shrink: at 320px (a page zoomed to 400%) its choice ellipsizes instead of
   running off the screen */
.lp-bar > * { min-width: 0; max-width: 100%; }   /* every part of a controls row may shrink to the row, wrappers included */
.pick { min-width: 0; }
.pick select.card-input { flex: 0 1 auto; min-width: 0; }
/* More on a record page: on a phone the list opens as a sheet just above the bottom bar, full width, the way the bar's
   own More does; a dropdown 260px wide ran off the right edge of a narrow phone */
@media (max-width: 899px) {
  .act-menu { position: fixed; top: auto; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 10px); min-width: 0; max-width: none; z-index: 55; }
}
/* an Expected case line: on a narrow phone, Close project wraps under the last-document date instead of being cut off */
@media (max-width: 560px) { .xp-side { flex-wrap: wrap; gap: 8px 14px; } }
/* finger floor again for the controls the new layout restyled (see the block further up for the rule itself) */
@media (any-pointer: coarse) {
  .paper-set, .paper-main, .seg-opt, .lp-bar .em-views .chip, .act-menu > a, .act-menu > button { min-height: var(--touch-target); }
  .paper-copy { width: var(--touch-target); height: var(--touch-target); margin: -8px -6px -8px 0; }
}
/* high contrast: the top bar's search box and a chosen filter show focus with a shadow, which this mode removes */
@media (forced-colors: active) {
  .top-find:focus-within, .pick:focus-within { outline: 2px solid Highlight; outline-offset: 1px; }
}
/* every box you type in or pick from draws its outline in --control-edge (see the top of this file). Last, so it wins
   over the kit's --border; :where() keeps the bare-element part weak, so .ft-input keeps its own darker line */
:where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"],
  input[type="search"], input[type="tel"], input[type="time"], input[type="date"], textarea, select),
input.card-input, select.card-input, textarea.card-input, .wait-pick select, .em-sel { border-color: var(--control-edge); }
.pick { box-shadow: inset 0 0 0 1px var(--control-edge); }
@media (min-width: 1100px) { .top-find:not([hidden]):not(:focus-within) { box-shadow: inset 0 0 0 1px var(--control-edge); } }
/* the type floor: 12px. Dense facts and metadata sit at 12-12.5px (an everyday-work screen, read up close); nothing
   goes under that. The kit's uppercase labels were 11px; here they keep their caps and weight, one step up */
.row-kicker, .fact-label { font-size: var(--fs-label); }
/* spacing above a block, four steps (were six inline values in app.js: 10 now 12, 14 now 16). !important because they
   stand in for the inline styles they replaced, which beat every rule; a class must not lose to .section-title's margin */
.mt-0 { margin-top: 0 !important; } .mt-s { margin-top: 8px !important; } .mt-m { margin-top: 12px !important; } .mt-l { margin-top: 16px !important; }
.flush { margin: 0 !important; }
.btn-row.is-center { justify-content: center; }
.loading { padding: 24px 0; }
/* a card that wears its kind's tint on the top edge, like a document card */
.card.is-tinted { box-shadow: inset 0 3px 0 var(--tint), var(--card-shadow); }
@media (any-pointer: coarse) {
  .pick select.card-input, .stage-pick, .sg-stage .stage-pick, html body .site-header .top-find input, .top-find input { font-size: var(--input-min-font); }
}