/* base.css -- reset, typography, frame, and shared components.
   Rooms style only their own layouts in css/<room>.css and reuse these classes:
   .btn .btn-primary .btn-ghost .btn-quiet .iconbtn .linkbtn .chip .urg .cite .tbl .kv .rows
   .section-label .meta .meta-quiet .mono .num .h1 .h2 .paper .input .seg .subnav .empty-page */

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
img, svg { display: block; max-width: 100%; }
svg.ico { display: inline-block; flex: none; vertical-align: -2px; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-control); }
/* round 7 (S1.6, S16.2, G21): three distinct states -- keyboard focus is a 2 px accent OUTLINE; a selected row is a
   raised fill plus a 3 px accent LEFT BAR; an edited value is an accent-bordered FIELD and Row B reads "Editing".
   Nothing uses color alone: the bar and the word carry it. */
[role="grid"] tr.is-selected, [role="grid"] tr[aria-selected="true"], [role="row"][aria-selected="true"], .row-selected { background: var(--bg-raised); box-shadow: inset var(--selected-bar) 0 0 var(--accent); }
tr[role="row"]:focus-visible, li[role="row"]:focus-visible, [role="row"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
#workMain :is(a, button, [tabindex], input, select, textarea) { scroll-margin-top: 48px; scroll-margin-bottom: 24px; }
::selection { background: var(--accent-soft); }
mark { background: var(--accent-soft); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ----------------------------------------------------------- typography */
.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.015em; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: -0.005em; }
.section-label { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); }
/* round 7 (F1 / round 6 G1) type ladder: page title 22 (.h1, .subj-name) / primary region 17 (.h2) / region title 15
   (.region-title) / working text 14 (body) / second line 13 (.meta) / labels 12 (.section-label, th, chips) / keycaps 11 */
.region-title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--text); margin: 0 0 8px; letter-spacing: -0.003em; }
.unk { color: var(--text-secondary); font-style: normal; font-family: var(--font-ui); }
.meta { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); }
.meta-quiet { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); }
.hint { color: var(--text-placeholder); font-size: var(--fs-caption); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; }
.mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
/* round 7 (F15, S2.7): amounts read as amounts -- UI face, tabular digits, weight 500, right-aligned where comparable */
.money { font-variant-numeric: tabular-nums; font-family: var(--font-ui); font-weight: 500; white-space: nowrap; }
td.money, th.money, .tbl .money { text-align: right; }
.w400 { font-weight: 400; } .w500 { font-weight: 500; } .w600 { font-weight: 600; }
.serif { font-family: var(--font-doc); }
.pad { padding: var(--s3); }
.pad-top { margin-top: var(--s4); }
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500; line-height: 1;
  color: var(--text-secondary); background: var(--bg-app);
  border: 1px solid var(--line); border-radius: 4px;
}
kbd + kbd { margin-left: 2px; }
/* round 7 (round 6 G6): keycaps are hidden at rest inside the work area, Row B/C and cards, and appear on the owning
   control's hover or keyboard focus. Always visible: the box's "/" keycap, the active dropdown row, the menu's Keys
   list and the Demo guide. Every binding still fires. */
:is(#workMain, #subject, #switcher, .pcard) kbd:not(.kbd-rest) { display: none; }
:is(#workMain, #subject, #switcher, .pcard) :is(button, a, [role="button"], [role="tab"]):is(:hover, :focus-visible) > kbd,
.pcard:is(:hover, :focus-within) .pactions kbd,
[data-keys-host]:is(:hover, :focus-within) kbd,
.subnav:hover kbd, .bar-c:is(:hover, :focus-within) .keyhint kbd,
:is(.box-field, .dd-row.is-active, .box-home) kbd { display: inline-flex; }
/* a hint that is only key names plus words ("Enter open  H later") means nothing without its keys: the whole hint
   is hidden at rest and shows only while keyboard focus is inside the region it describes */
:is(#workMain, #subject, #switcher) .hint:has(> kbd) { visibility: hidden; }
:is(#workMain, #subject, #switcher) :has(:focus-visible) > :is(header, .needs-head) > .hint:has(> kbd) { visibility: visible; }
:is(#workMain, #subject, #switcher) :has(:focus-visible) > :is(header, .needs-head) > .hint:has(> kbd) kbd { display: inline-flex; }
.keyhint { visibility: hidden; }
.bar-c:is(:hover, :focus-within) .keyhint { visibility: visible; }
/* R9 (S3.x): a card has no keycaps under 720 px. There is no keyboard to hint at, and a keycap that appears on
   press changes the control's width mid-tap: on the bills card, pressing Later grew it from 50 to 73 px, the
   action row no longer fit 400 px, Later wrapped to the next row and the release landed on empty footer, so the
   tap never fired. (!important: the show rules above are id-level through their :is() list.) */
@media (max-width: 720px) {
  .pcard kbd { display: none !important; }
}

/* ------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--bg-raised); color: var(--text);
  font-size: var(--fs-meta); font-weight: 500; white-space: nowrap;
  transition: background-color var(--t-press) var(--ease), border-color var(--t-press) var(--ease), color var(--t-press) var(--ease);
}
.btn:hover { background: var(--bg-hover); text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn kbd { height: 16px; min-width: 16px; font-size: var(--fs-micro); background: transparent; border-color: color-mix(in srgb, currentColor 35%, transparent); color: inherit; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled:hover { background: var(--accent); }
/* round 7 (round 6 G9): two weights only -- .btn (outlined) and .btn-quiet (text). .btn-ghost renders as .btn. */
.btn-ghost { background: var(--bg-raised); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text); padding: 0 8px; }
.btn-quiet:hover { background: var(--bg-hover); }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: var(--r-control);
  background: transparent; color: var(--text-secondary);
  transition: background-color var(--t-press) var(--ease);
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent-text); font-size: var(--fs-meta); font-weight: 500; }
.linkbtn:hover { text-decoration: underline; text-underline-offset: 2px; }
.input {
  width: 100%; height: var(--control-h); padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-control);
  background: var(--bg-raised); color: var(--text);
}
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder { color: var(--text-placeholder); }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-hover); border-radius: var(--r-control); }
.seg-btn { height: 24px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary); font-size: var(--fs-caption); font-weight: 500; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--bg-raised); color: var(--text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
/* round 7 (S2.12, G23) affordances: a LINK is accent text (a, .linkbtn); a PERSON / ENTITY opens a popover or panel and
   reads as a dotted underline in the text color; a STATUS LABEL (.st, .urg, .chip) has no underline and no pointer;
   an EDITABLE VALUE (.pto[data-edit], Facts Edit) sits on a dashed field line with a pencil on hover. */
.plink { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted var(--text-secondary); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.plink:hover { color: var(--accent-text); text-decoration-color: var(--accent); }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 22px; padding: 0 6px; border-radius: 4px;
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500;
  color: var(--text-secondary); background: var(--bg-hover);
  white-space: nowrap; vertical-align: 1px;
}
a.chip:hover { text-decoration: none; color: var(--text); }
.chip-subject { background: transparent; box-shadow: inset 0 0 0 1px var(--line-subtle); color: var(--text); }
.chip-calc { font-family: var(--font-mono); font-size: var(--fs-caption); background: transparent; box-shadow: inset 0 0 0 1px var(--line); cursor: help; }
.chip-illus { background: transparent; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--line-subtle); font-weight: 400; cursor: help; }
.chip-interp { background: var(--accent-soft); color: var(--accent-text); }
.chip-choose { cursor: pointer; border: 0; }
.chip-ai::after { content: "*"; color: var(--ai-mark); margin-left: 1px; }

/* -------------------------------------------------------------- urgency */
.urg {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-meta); line-height: 20px; font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.urg.u0 { color: var(--text-secondary); font-weight: 400; }
.urg.u1 { color: var(--urgency-1); }
.urg.u2 { color: var(--urgency-2); background: var(--urgency-2-soft); padding: 0 8px 0 6px; border-radius: 999px; }
.urg.u3 { color: var(--urgency-3-text); background: var(--urgency-3); padding: 0 8px 0 6px; border-radius: 999px; }
.urg.u-met { color: var(--text-secondary); }

/* ------------------------------------------------------------ citations */
.cite {
  display: inline-flex; align-items: center; min-height: 20px; padding: 0 6px;
  border: 0; border-radius: 4px;
  font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--accent-text); background: var(--accent-soft);
  white-space: nowrap; vertical-align: 1px;
  transition: background-color var(--t-press) var(--ease), box-shadow var(--t-press) var(--ease);
}
.cite:hover { box-shadow: inset 0 0 0 1px var(--accent); }
/* round 5 (F5): a quiet variant for repeated table cites -- amount first, provenance second.
   Rooms opt in per cite via W.cite(doc, anchor, label, {cls: 'cite-quiet'}) (API.md section 6). */
.cite-quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line-subtle); color: var(--accent-text); }
.cite-quiet:hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cite-n { min-height: 17px; min-width: 17px; padding: 0 4px; justify-content: center; font-size: var(--fs-caption); vertical-align: 2px; margin: 0 1px; }
/* round 6 G3: the inline rendering for citations in prose (letters, briefs, answers) -- document text, dotted underline */
.cite.cite-inline { display: inline; min-height: 0; padding: 0; background: none; box-shadow: none; font: inherit; color: var(--accent-text); text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; white-space: normal; vertical-align: baseline; border-radius: 0; }
.cite.cite-inline:hover { text-decoration-style: solid; box-shadow: none; }
.cite-missing { color: var(--text-secondary); background: var(--bg-hover); }
.cite-static { color: var(--text-secondary); background: var(--bg-hover); cursor: default; }
.cite-static:hover { box-shadow: none; }
/* round 2: one chip carries label, review judgment and mechanical marks (W.cite opts quote/judgment/by) */
.cite-l { display: inline; }
.cite-has-judg { padding-right: 0; }
.cite-judg { display: inline-flex; align-items: center; height: 100%; margin-left: 6px; padding: 0 6px; border-left: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 500; color: var(--text-secondary); }
.cite-judg[data-judg="partial"] { color: var(--text); }
.cite-judg[data-judg="notfound"] { color: var(--text); text-decoration: underline dashed; text-decoration-color: var(--text-secondary); text-underline-offset: 3px; }
.cite-judg[data-judg="proposed"] { font-weight: 400; }
.cite-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 13px; height: 13px; margin-left: 4px; border-radius: 3px; font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 700; line-height: 1; }
.cite-mark-q { color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--text-secondary); }
.cite-mark-nf { color: var(--urgency-2); box-shadow: inset 0 0 0 1px var(--urgency-2); }
.cite-has-judg .cite-mark { margin-right: 4px; margin-left: 0; }
.cite-n .cite-mark { min-width: 12px; height: 12px; margin-left: 2px; font-size: var(--fs-caption); }
a.cite-record { font-family: var(--font-ui); color: var(--accent-text); }
a.cite-record:hover { text-decoration: none; }
.cite-pop {
  position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 16px);
  padding: 10px 12px; pointer-events: none;
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--line-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-float);
}
.cite-pop-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: var(--fs-caption); }
.cite-pop-head .mono { font-size: var(--fs-caption); }
.cite-pop-title { min-width: 0; overflow-wrap: anywhere; }
.cite-pop-quote {
  font-family: var(--font-doc); font-size: 14px; line-height: 21px; white-space: pre-line;
  padding-left: 10px; border-left: 2px solid var(--line);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cite-pop-status { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-subtle); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.cite-pop-row { display: flex; align-items: center; gap: 6px; color: var(--text); }
.cite-pop-row .ico { color: var(--text-secondary); }
.cite-pop-row .cite-mark { margin: 0; }
.cite-pop-warn .ico { color: var(--urgency-2); }
.cite-pop-judg .cite-judg { margin: 0; padding: 0; border: 0; height: auto; font-size: var(--fs-meta); }

/* ---------------------------------------------------------------- frame */
#app { height: 100%; }
.shell {
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--bg-app);
}
.bar-a {
  height: var(--bar-a); display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s3) 0 var(--s5);
  border-bottom: 1px solid var(--line-subtle);
  position: relative; z-index: 20;
}
.shell[data-kind="home"] .bar-a { border-bottom-color: transparent; }
.bar-left { flex: 1 1 0; min-width: 120px; display: flex; align-items: center; }
.bar-mid { flex: 0 1 var(--box-w-compact); min-width: 0; display: flex; justify-content: center; }
.shell[data-kind="home"] .bar-mid { visibility: hidden; }
.shell[data-page="ask"] .bar-mid { visibility: hidden; }   /* the thread page owns the box */
.box-slot { width: 100%; max-width: var(--box-w-compact); }
.bar-right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.wordmark { display: inline-flex; align-items: baseline; gap: 8px; color: var(--text); white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
.wm-name { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.wm-sub { font-size: var(--fs-caption); color: var(--text-secondary); font-weight: 400; }
/* Internal track: the firm's logo SVG at 22px tall. The file is dark ink on transparent, so dark
   theme sets it on a light plate (--logo-plate) instead of recoloring the asset. */
[data-track="internal"] .wordmark-logo { align-items: center; padding: 4px 8px; margin-left: -6px; border-radius: var(--r-control); background: var(--logo-plate); }
.wm-logo { display: block; height: 22px; width: auto; max-width: 100%; }
@media (max-width: 720px) { .wm-logo { height: 18px; } }
.tenant { font-size: var(--fs-meta); color: var(--text-secondary); padding: 0 10px; margin-right: 4px; border-right: 1px solid var(--line-subtle); white-space: nowrap; }
.bar-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--text-secondary); font-size: var(--fs-body); font-weight: 500;
  transition: background-color var(--t-press) var(--ease), color var(--t-press) var(--ease);
}
.bar-btn:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.bar-btn[aria-pressed="true"] { color: var(--text); background: var(--bg-hover); }
.qbadge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--urgency-3); color: var(--urgency-3-text);
  font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums;
}
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: 6px; border-radius: 999px; border: 0;
  background: var(--bg-hover); color: var(--text); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.02em;
}
.avatar:hover { box-shadow: inset 0 0 0 1px var(--line); }
.avatar-lg { width: 36px; height: 36px; margin: 0; font-size: 13px; }

.bar-b {
  min-height: var(--bar-b); display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: 8px var(--s5) 0;
}
.bar-b:empty, .bar-c:empty { display: none; }
.subj-main { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
/* S2.13: the name wraps to two lines before anything is cut */
.subj-name { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.015em; min-width: 0; flex: 0 1 auto; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.subj-editing { display: none; align-items: center; gap: 4px; font-size: var(--fs-meta); font-weight: 500; color: var(--accent-text); white-space: nowrap; }
.shell.is-editing .subj-editing { display: inline-flex; }
.subj-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; font-size: var(--fs-meta); color: var(--text-secondary); white-space: nowrap; min-width: 0; }
.subj-meta .mono { font-size: var(--fs-meta); }
.subj-main { flex-wrap: wrap; }
.subj-meta .urg { align-self: center; }
.subj-meta .chip { align-self: center; }
.subj-side { display: flex; align-items: center; gap: 4px; flex: none; font-size: var(--fs-meta); }
.subj-next { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; color: var(--text); white-space: nowrap; min-width: 0; }
.subj-next .lbl { color: var(--text-secondary); }
.next-label { color: var(--text); font-weight: 500; }
.next-sep { color: var(--text-secondary); }
.next-date { font-weight: 500; }
.subj-next .urg.u1 { padding: 0; }
.subj-sol { display: inline-flex; align-items: center; }
.subj-sol.urg.u2 { padding: 0 8px; }
.subj-link {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px;
  border-radius: var(--r-control); color: var(--text-secondary); white-space: nowrap;
}
.subj-link:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.subj-pin { display: none; }
@media (max-width: 720px) {
  .shell.subj-away .subj-pin {
    display: flex; flex-wrap: wrap; align-items: baseline; position: fixed; z-index: 30; left: 0; right: 0; top: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 16px 4px; background: var(--bg-app); border-bottom: 1px solid var(--line-subtle);
    font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary);
  }
  .subj-pin-name { color: var(--text); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
  .subj-pin-no { white-space: nowrap; font-variant-numeric: tabular-nums; }
}

.bar-c {
  height: var(--bar-c); display: flex; align-items: stretch; justify-content: space-between;
  padding: 0 var(--s3); border-bottom: 1px solid var(--line-subtle);
}
.tabs { display: flex; align-items: stretch; gap: 2px; min-width: 0; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; color: var(--text-secondary); font-size: var(--fs-body); font-weight: 400; white-space: nowrap;
  transition: color var(--t-press) var(--ease);
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--text); font-weight: 600; }
.tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.tab-key { position: absolute; top: 3px; right: -8px; opacity: 0; transition: opacity var(--t-press) var(--ease); height: 15px; min-width: 0; padding: 0 3px; font-size: var(--fs-micro); pointer-events: none; background: var(--bg-app); }
.tab:hover .tab-key, .tab:focus-visible .tab-key, .bar-c.chord .tab-key { opacity: 1; }
.tab-sep { width: 1px; background: var(--line); margin: 12px 8px; }
.tab-off { color: var(--text-placeholder); cursor: not-allowed; }
.tab-off:hover { color: var(--text-placeholder); }
.switcher-right { display: flex; align-items: center; color: var(--text-secondary); font-size: var(--fs-caption); }
.keyhint { display: inline-flex; align-items: center; gap: 6px; opacity: 0.8; }

.work { position: relative; display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.bar-a, .bar-b, .bar-c, .synth { flex: none; }
.work-main { position: relative; flex: 1 1 auto; min-width: 0; overflow: auto; }
.view { opacity: 1; transition: opacity var(--t-fade) var(--ease); min-height: 100%; }
.view-entering { opacity: 0; }
.view-leaving { position: absolute; left: 0; right: 0; opacity: 0; pointer-events: none; }

.synth {
  min-height: var(--footer-h); display: flex; align-items: center; justify-content: center;
  padding: 4px var(--s3); font-size: var(--fs-caption); color: var(--text-secondary);
  border-top: 1px solid var(--line-subtle);
  /* wraps rather than truncates: a disclosure line should never be cut with an ellipsis */
  flex-wrap: wrap; row-gap: 2px; column-gap: var(--s2); text-align: center;
}
.shell[data-kind="home"] .synth { border-top-color: transparent; }
/* round 5 (F18): present mode's own bar already carries a top rule; the footer's would double it. */
.shell.is-presenting .synth { border-top-color: transparent; }
/* product-track footer (core.js drawFooter): the Watts AI demo sentence, an About link, a copyright
   line. --footer-h is set to the rendered height at runtime (core.js measureFooter) since this can
   wrap to two lines, and the dock chip / present bar both offset from that token. */
.synth-rich .footer-about { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------ room sub-nav */
.subnav {
  display: flex; align-items: stretch; gap: var(--s4); min-height: var(--bar-c-h);
  padding: 0 var(--s5); border-bottom: 1px solid var(--line-subtle);
}
/* round 7 (S1.3): Row C's tab already names the room, so the subnav's room title ("Treatment & Records", "Litigation
   Drafting") stays in the markup for assistive technology but is not shown a second time */
.room-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.subtabs { display: flex; gap: 2px; }
.subtab { position: relative; display: inline-flex; align-items: center; padding: 0 10px; color: var(--text-secondary); font-size: var(--fs-body); font-weight: 500; }
.subtab:hover { color: var(--text); text-decoration: none; }
.subtab.active { color: var(--text); }
.subtab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--text); border-radius: 2px 2px 0 0; }
.subnav-right { margin-left: auto; display: flex; align-items: center; gap: var(--s1); }
/* round 3: tab count chip (Discovery's tab counts, Treatment's Bills tab) */
.subnav-count { margin-left: 6px; font-family: var(--font-ui); font-size: var(--fs-caption); font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.subtab.active .subnav-count { color: var(--text-secondary); }

/* round 3: quiet room (W.ui.quietRoom) -- a room with no work on this subject says why, honestly */
.quiet-body { max-width: 760px; padding: var(--s6) var(--s5) var(--s7); display: grid; gap: 12px; }
.quiet-lede { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.quiet-why { color: var(--text); max-width: 64ch; }
.quiet-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-subtle); }
.quiet-fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; min-width: 0; }
.quiet-fact dt { color: var(--text-secondary); font-size: var(--fs-meta); }
.quiet-fact dd { min-width: 0; overflow-wrap: break-word; }
.quiet-fact .urg { vertical-align: 0; margin-left: 4px; }
.quiet-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-top: 6px; }
.quiet-links .meta { margin-right: -6px; }
.facts-open { margin-bottom: 12px; padding: 8px 10px; border-radius: var(--r-control); background: var(--bg-pane); color: var(--text); }

/* round 3: inert mock controls (data-noop) read as unavailable, still focusable */
[data-noop] { cursor: not-allowed; }
.btn[data-noop], .linkbtn[data-noop], a[data-noop], button[data-noop] { color: var(--text-placeholder); }
.btn[data-noop]:hover { background: var(--bg-raised); }
.btn-primary[data-noop] { background: var(--bg-hover); border-color: var(--line); color: var(--text-placeholder); }

/* ---------------------------------------------------------- split pane */
.split-pane {
  flex: 0 0 44%; min-width: 380px; max-width: 760px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--bg-pane); border-left: 1px solid var(--line);
}
.pane-head {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 8px 0 16px; border-bottom: 1px solid var(--line-subtle); background: var(--bg-pane);
}
.pane-kind { color: var(--text-secondary); display: inline-flex; }
.pane-title { font-size: var(--fs-meta); font-weight: 500; min-width: 0; overflow-wrap: anywhere; padding: 4px 0; }
.pane-anchor, .pane-anchor.mono { margin-left: auto; color: var(--text-secondary); font-size: var(--fs-caption); white-space: nowrap; }
.pane-folio { flex: none; padding: 4px 16px; border-bottom: 1px solid var(--line-subtle); background: var(--bg-pane); }
.pane-body { flex: 1 1 auto; overflow: auto; padding: var(--s3); min-height: 0; }

/* paper documents */
.doc { display: flex; flex-direction: column; gap: var(--s3); }
.paper {
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: 28px 40px 36px; max-width: 720px; width: 100%; margin: 0 auto;
  color: var(--text);
}
.paper-folio {
  display: flex; justify-content: space-between; gap: 12px;
  margin: -12px -24px 18px; font-size: var(--fs-caption); color: var(--text-secondary);
}
.paper-folio span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper-pdf { padding: 24px 28px 32px; }
.paper-pdf .paper-folio { margin: -10px -12px 16px; }
.pdf-line { font-family: var(--font-doc); font-size: 13.5px; line-height: 22px; white-space: pre-wrap; padding: 0 6px; margin: 0 -6px; border-radius: 2px; }
.pdf-h { text-align: center; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; }
.pdf-gap { height: 12px; }
.pdf-pre { font-family: var(--font-mono); font-size: 12.5px; line-height: 22px; }
.tx-line { display: grid; grid-template-columns: 4px 32px 1fr; align-items: baseline; font-family: var(--font-mono); font-size: 13px; line-height: 24px; white-space: pre-wrap; border-radius: 2px; }
.tx-bar { align-self: stretch; border-radius: 2px; }
.tx-bar[data-issue] { background: var(--accent); opacity: 0.55; }
.tx-ln { text-align: right; padding-right: 14px; color: var(--text-secondary); font-size: 12px; user-select: none; }
.call-meta { margin: -8px 0 12px; }
.call-seg { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 8px 8px; margin: 0 -8px; border-radius: 4px; }
.call-t { color: var(--text-secondary); font-size: 12px; line-height: 22px; }
.call-who { font-size: var(--fs-caption); font-weight: 500; color: var(--text-secondary); }
.call-text { font-family: var(--font-doc); font-size: 16px; line-height: 25px; }
.slack-msg { display: flex; gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 4px; }
.slack-av { flex: none; width: 28px; height: 28px; border-radius: 6px; background: var(--bg-hover); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-caption); font-weight: 600; }
.slack-body p { margin-top: 2px; }
.slack-file { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--text-secondary); }
.email-head { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line-subtle); display: grid; gap: 2px; }
.email-p { font-family: var(--font-doc); font-size: 16px; line-height: 26px; padding: 0 6px; margin: 0 -6px 8px; border-radius: 2px; }
.flash { background-color: var(--accent-soft); }
.flash.flash-fade { background-color: transparent; transition: background-color 800ms var(--ease); }

/* round 2 reading aids (W.pane): Q/A weight, colloquy, sticky page badge, cite ring, find tint, status */
.tx-q .tx-text { font-weight: 500; }
.tx-coll .tx-text { font-style: italic; color: var(--text-secondary); }
.paper[data-page] { position: relative; }
.paper-badge { position: sticky; top: 0; z-index: 2; height: 0; display: flex; justify-content: flex-end; pointer-events: none; }
.paper-badge span {
  margin: 2px 0 0 0; padding: 1px 6px; border-radius: 3px;
  font-size: var(--fs-micro); line-height: 14px; letter-spacing: 0.06em; color: var(--text-secondary);
  background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-subtle), var(--shadow-float);
  opacity: 0; transition: opacity 120ms var(--ease);
}
.paper-badge.is-stuck span { opacity: 1; }
.doc:not(.doc-multi) .paper-badge { display: none; }
.cite-ring { box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent); border-radius: 0; }
.cite-ring.cite-ring-first { box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent), inset 0 1px 0 var(--accent); border-top-left-radius: 3px; border-top-right-radius: 3px; }
.cite-ring.cite-ring-last { box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent), inset 0 -1px 0 var(--accent); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.cite-ring.cite-ring-first.cite-ring-last { box-shadow: inset 0 0 0 1px var(--accent); }
.paper.cite-ring { box-shadow: 0 0 0 1px var(--accent); }
mark.find-hit { background: color-mix(in srgb, var(--accent) 16%, transparent); color: inherit; border-radius: 2px; padding: 0; box-shadow: none; }
mark.find-hit.find-cur { background: color-mix(in srgb, var(--accent) 26%, transparent); box-shadow: 0 1px 0 var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) mark.find-hit { background: color-mix(in srgb, var(--accent) 28%, transparent); }
  :root:not([data-theme="light"]) mark.find-hit.find-cur { background: color-mix(in srgb, var(--accent) 45%, transparent); }
}
:root[data-theme="dark"] mark.find-hit { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:root[data-theme="dark"] mark.find-hit.find-cur { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.pane-head { container: panehead / inline-size; }
.pane-find { flex: none; display: inline-flex; align-items: center; }
.pane-find-btn { display: none; }
.pane-find-input { width: 180px; height: 26px; padding: 0 8px; font-size: var(--fs-meta); }
.pane-find-input::-webkit-search-cancel-button { display: none; }
.pane-head.has-find .pane-find-btn { color: var(--accent-text); }
.pane-sub {
  flex: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  padding: 4px 12px 5px 16px; border-bottom: 1px solid var(--line-subtle); background: var(--bg-pane);
  font-size: var(--fs-caption); line-height: 18px;
}
.pane-status { display: inline-flex; flex-wrap: wrap; column-gap: 8px; font-size: var(--fs-caption); line-height: 18px; font-variant-numeric: tabular-nums; }
.pane-status:empty { display: none; }
.pane-sep { color: var(--line); }
.pane-cited { margin-left: auto; display: grid; justify-items: end; gap: 2px; }
.pane-cited:empty { display: none; }
.pane-cited-btn { font-size: var(--fs-caption); }
.pane-cited-list { display: grid; gap: 2px; justify-items: end; }
.pane-cited-list li { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 8px; }
@media (max-width: 1100px) {
  .pane-find-btn { display: inline-flex; }
  .pane-find-input { display: none; }
  .pane-head.pane-finding .pane-find { flex: 1 1 auto; min-width: 0; }
  .pane-head.pane-finding .pane-find-input { display: block; width: 100%; }
  .pane-head.pane-finding .pane-title, .pane-head.pane-finding .pane-anchor, .pane-head.pane-finding .dx-phwho { display: none; }
}
@container panehead (max-width: 520px) {
  .pane-find-btn { display: inline-flex; }
  .pane-find-input { display: none; }
  .pane-finding .pane-find { flex: 1 1 auto; min-width: 0; }
  .pane-finding .pane-find-input { display: block; width: 100%; }
  .pane-finding .pane-title, .pane-finding .pane-anchor, .pane-finding .dx-phwho { display: none; }
}
/* Ask sheet in a room (>= 1280): the work area ends at the sheet's left edge, so nothing the room
   shows sits under it. A cite from the sheet keeps the sheet open beside the pane only from 1900 px;
   narrower, ask.js collapses the sheet to its dock chip (three columns plus the sheet do not fit). */
@media (min-width: 1280px) {
  .shell.ask-open .work { margin-right: 480px; }
  .shell.ask-open .split-pane { flex-basis: 32%; min-width: 360px; }
  /* round 3: side sheets (Ask, All facts, guide) start under the frame bars, so Row A-C stay usable */
  .shell ~ .layer-sheet { top: var(--bar-a-h); }
  .shell[data-kind="room"] ~ .layer-sheet { top: var(--bars-h); }
}

/* ------------------------------------------------------- proposal card */
.pcard {
  position: relative; max-width: 760px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: height var(--t-collapse) var(--ease), border-color var(--t-press) var(--ease);
}
.pcard.collapsing, .pcard.is-receipt { overflow: hidden; }
.pactions { border-radius: 0 0 var(--r-card) var(--r-card); }
.pcard[data-state="confirmed"], .pcard[data-state="auto"], .pcard[data-state="verified"] { border-style: solid; }
.pcard.is-receipt, .pcard.collapsing { border-style: solid; border-color: var(--line-subtle); background: var(--bg-pane); }
/* round 7 (S2.9): the card's state is a labeled word in its head ("Pending your review"); the border is plain; keyboard
   focus is a separate 2 px accent outline that no state uses. */
.pcard:focus { outline: none; }
.pcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pcard.is-receipt:focus { border-color: var(--line); box-shadow: none; }
.pbody { padding: var(--card-pad) var(--card-pad) 0; transition: opacity var(--t-collapse) var(--ease); }
.phead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pverb { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: -0.005em; min-width: 0; overflow-wrap: anywhere; }
.phead { flex-wrap: wrap; row-gap: 2px; }
.phead .chip-subject, .phead .chooser { margin-left: auto; }
.pstate { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-caption); color: var(--text-secondary); white-space: nowrap; }
.pstate { font-size: var(--fs-meta); }
.pstate-proposed .st { color: var(--text); font-weight: 500; }
.pstate-stale .st { color: var(--urgency-2); font-weight: 500; }
.pstale-why { margin-top: 6px; font-size: var(--fs-meta); color: var(--text); }
.pline-stale { background: var(--urgency-2-soft); }
.pto-changed { font-weight: 600; }
.psep { color: var(--text-secondary); margin: 0 6px; }
.pgroup { padding: 8px var(--card-pad) 2px; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); list-style: none; }
.pauto { color: var(--text-secondary); justify-content: center; width: 14px; }
.pline-automatic .pvalue { color: var(--text-secondary); }
.pline-automatic .pto { color: var(--text-secondary); }
.peffects { margin: 0 calc(-1 * var(--card-pad)); padding: 0 var(--card-pad) 12px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); }
.pblocked { flex: 1 1 100%; color: var(--text); }
.pactions-blocked { gap: 10px; }
.psent { margin-top: 6px; }
.pcard .illus-legend { margin: 8px 0 4px; }
.auto-mark { font-family: var(--font-mono); font-size: var(--fs-micro); padding: 0 4px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line); margin-right: 4px; }
.pprov { margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; }
.pprov .disc-entity { color: var(--text); font-weight: 500; }
.pprov .cite { margin-left: 2px; }
.pundone { color: var(--text); margin-left: 6px; }
.powner { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); }
.powner b { color: var(--text); font-weight: 500; }
.plines-wrap { margin: 12px calc(-1 * var(--card-pad)) 0; border-top: 1px solid var(--line-subtle); padding: 4px 0; }
.plines { margin: 0; padding: 0; }
.plines + .plines { margin-top: 4px; }
.pline {
  display: grid; grid-template-columns: 22px 72px minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
  padding: 7px var(--card-pad); min-height: var(--row-h);
}
.pline:hover { background: var(--bg-pane); }
.pcheck { display: inline-flex; align-items: center; height: 20px; }
.pcheck input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pglyph { width: 16px; justify-content: center; color: var(--text-secondary); }
.pcat { font-size: var(--fs-caption); line-height: 20px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.pmain { min-width: 0; }
.pvalue { display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: 6px; row-gap: 2px; min-height: 20px; }
.pvalue .pfrom { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pvalue .ico-arrow { align-self: center; flex: none; }
.ppeople { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
.pcalc .disc { text-align: left; }
.pvalue .ico-arrow { color: var(--text-secondary); }
.pfrom { color: var(--text-secondary); text-decoration-color: var(--text-secondary); }
.pplus { color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; width: 8px; }
.pto { flex: 1 1 0; min-width: 12ch; overflow-wrap: anywhere; color: var(--text); font-size: var(--fs-body); border-radius: 0; }
.pto[data-edit] { flex: 0 1 auto; min-width: 0; cursor: text; padding: 0 2px; margin: 0 -2px; border-bottom: 1px dashed var(--line-strong); transition: border-color var(--t-press) var(--ease), background-color var(--t-press) var(--ease); }
.pto[data-edit]:hover { border-bottom-color: var(--text); background: var(--bg-pane); }
.pto[data-edit]:hover::after { content: " edit"; font-size: var(--fs-caption); color: var(--text-secondary); }
.pto-static { cursor: default; }
.pedited { font-size: var(--fs-caption); color: var(--text-secondary); }
.pedit {
  height: 24px; padding: 0 6px; margin: -2px 0; min-width: 8ch; max-width: 100%;
  border: 1px solid var(--accent); border-radius: 4px; background: var(--bg-app);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pcalc, .pnote { margin-top: 2px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); }
.pcalc .chip-illus { vertical-align: 0; }
.pflag-text { color: var(--text); }
.pinfo { color: var(--text-secondary); }
.pline-flag { background: var(--bg-pane); }
.pline.off .pvalue, .pline.off .pcalc, .pline.off .pnote, .pline.off .pcat { opacity: 0.5; }
.pline.off .pto { text-decoration: none; }
.psrc { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; }
.pactions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 calc(-1 * var(--card-pad)); padding: 12px var(--card-pad);
  border-top: 1px solid var(--line-subtle);
}
.pactions-done { justify-content: flex-start; }
/* Phone: while a proposed card has focus (a line value is being edited, keyboard up), its action row
   sticks to the bottom of the viewport so Confirm stays reachable (round 3, 3.1.9 #13). */
@media (max-width: 720px) {
  .pcard[data-state="proposed"]:not(.collapsing):not(.is-editing):focus-within .pactions:not(.pactions-done) {
    position: sticky; bottom: 0; z-index: 2; background: var(--bg-raised);
  }
  .shell.has-dock .pcard[data-state="proposed"]:not(.collapsing):not(.is-editing):focus-within .pactions:not(.pactions-done) { bottom: 60px; }
}
/* Round 4 (2.1): while a line value is edited on a phone, the action row is fixed to the bottom of the
   visual viewport (W.vv.sync sets --vv-top / --vvh; the card sets --pactions-h), the Done / Cancel strip
   sits under the input, and the dock chip steps aside. The sticky rule above stays for plain focus. */
.pedit-strip { display: none; }
@media (max-width: 720px) {
  .pedit-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
  .pedit-strip .btn { height: 32px; padding: 0 12px; box-shadow: inset 0 0 0 1px var(--line-subtle); }
  .pcard.is-editing .pactions:not(.pactions-done) {
    position: fixed; left: 0; right: 0; bottom: auto; z-index: 31; margin: 0;
    top: calc(var(--vv-top, 0px) + var(--vvh, 100vh) - var(--pactions-h, 44px));
    padding: 6px var(--gutter); background: var(--bg-raised); border-top: 1px solid var(--line-subtle); border-radius: 0;
  }
  .shell.is-editing ~ .dock, .shell.is-editing .dock { visibility: hidden; }
}
.pcard[data-placement="slack"] .pactions .meta-quiet { margin-left: 4px; }
.chooser { position: relative; display: inline-flex; }
.chooser-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 260px;
  padding: 4px; background: var(--bg-raised); border: 1px solid var(--line-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-float);
}
.chooser-opt { display: flex; justify-content: space-between; gap: 16px; width: 100%; white-space: nowrap; min-width: 320px; padding: 6px 8px; border: 0; border-radius: 4px; background: none; text-align: left; font-size: var(--fs-meta); }
.chooser-opt:hover, .chooser-opt:focus-visible { background: var(--bg-hover); outline: none; }

/* receipts */
.preceipt-wrap { position: relative; }
.receipt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px var(--card-pad); font-size: var(--fs-body); }
.receipt-glyph { display: inline-flex; color: var(--text-secondary); }
.receipt { flex-wrap: wrap; }
.receipt-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rparts { flex: 1 1 100%; display: grid; gap: 2px; margin: 2px 0 0 24px; }
.rpart { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-meta); }
.rpart .btn { height: 26px; }
.receipt-muted .receipt-text { color: var(--text-secondary); }
.receipt-actions { display: inline-flex; gap: 14px; flex: none; }
.reasons { display: inline-flex; gap: 4px; flex: none; }
.reason { height: 24px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-subtle); color: var(--text-secondary); font-size: var(--fs-caption); }
.reason:hover { color: var(--text); }
.reason.picked { background: var(--bg-hover); color: var(--text); box-shadow: none; }

/* --------------------------------------------------------- data display */
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { text-align: left; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; color: var(--text-secondary); padding: 6px 10px; border-bottom: 1px solid var(--line-subtle); white-space: nowrap; }
/* round 7 (F19, S3.7): headers stay in view while the work area scrolls; the identifying first column can stick too */
.tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-app); }
.tbl .tbl-sticky-id { position: sticky; left: 0; z-index: 1; background: var(--bg-app); }
.tbl thead th.tbl-sticky-id { z-index: 3; }
.tbl th[aria-sort] { cursor: pointer; }
.tbl th[aria-sort="ascending"]::after { content: " \2191"; }
.tbl th[aria-sort="descending"]::after { content: " \2193"; }
.tbl td { padding: 0 10px; height: var(--row-h); border-bottom: 1px solid var(--line-subtle); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
/* round 5 (5.4): one hover idiom for every table; rooms that used --bg-hover switch to this. */
.tbl tr:hover td { background: var(--bg-pane); }
.tbl .num, .tbl th.num { text-align: right; }
.tbl-wrap { position: relative; overflow-x: auto; }
/* S3.7: a horizontal scroll wrapper would capture the sticky header; at desktop widths tables fit, so the wrapper
   does not scroll and the header sticks to the work area instead */
@media (min-width: 721px) { .tbl-wrap { overflow-x: visible; } }
.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kv { display: grid; grid-template-columns: minmax(96px, 36%) 1fr; gap: 6px 16px; font-size: var(--fs-body); }
.kv dt { color: var(--text-secondary); font-size: var(--fs-meta); }
.kv-edit { display: block; }
.kv-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line-subtle); }
.kv-row dd { min-width: 0; overflow-wrap: anywhere; }
.kv-val { min-width: 0; }
.kv-tools { display: inline-flex; align-items: center; gap: 4px; justify-self: end; }
.kv-edit-btn { height: 26px; color: var(--text-secondary); opacity: 0; }
.kv-row:is(:hover, :focus-within) .kv-edit-btn, .kv-edit-btn:focus-visible { opacity: 1; }
/* touch: no Edit button at rest (and none tappable while invisible); a tap on the row or keyboard focus reveals it */
@media (hover: none) {
  .kv-edit-btn { pointer-events: none; }
  .kv-row:is(.is-active, :focus-within) .kv-edit-btn { opacity: 1; pointer-events: auto; }
}
.kv-row.is-editing { grid-template-columns: 140px minmax(0, 1fr); }
.kv-row.is-editing .kv-tools { grid-column: 2; justify-self: start; }
.kv-input { height: 30px; }
.facts-eyebrow { margin: 10px 0 0; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); }
.rows > li + li { border-top: 1px solid var(--line-subtle); }
.row-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--row-h); padding: 0 8px; margin: 0 -8px; border-radius: var(--r-control); color: var(--text); }
.row-link:hover { background: var(--bg-hover); text-decoration: none; }
.empty-page { max-width: 560px; margin: 0 auto; padding: 72px var(--s5); display: grid; gap: 10px; }
.empty-page h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.015em; }
.empty { padding: var(--s5); color: var(--text-secondary); }
.ph-facts { display: grid; grid-template-columns: 120px 1fr; gap: 6px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-subtle); }
.ph-facts dt { color: var(--text-secondary); font-size: var(--fs-meta); }
.skel-bar { display: inline-block; height: 10px; border-radius: 4px; background: var(--bg-hover); }

/* -------------------------------------------------------------- layers */
.layer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column; max-width: 100vw;
  background: var(--bg-raised); border-left: 1px solid var(--line); box-shadow: var(--shadow-layer);
  transform: translateX(100%); transition: transform var(--t-panel) var(--ease);
}
.layer.open { transform: none; }
.layer-drawer { width: 360px; }
.layer-panel { width: 440px; z-index: 42; }
.layer-sheet { width: 480px; z-index: 41; }
.layer-head { flex: none; display: flex; align-items: center; gap: 12px; min-height: var(--bar-a); padding: 0 10px 0 20px; border-bottom: 1px solid var(--line-subtle); }
.layer-head .iconbtn { margin-left: auto; }
.layer-head .seg { margin-left: 4px; }
.layer-body { flex: 1 1 auto; overflow: auto; padding: 16px 20px 24px; min-height: 0; }
.facts-filter { margin-bottom: 8px; }
.facts-group { margin-top: var(--region-gap); }
.facts-group .region-title { margin-bottom: 0; }
.person-head { display: grid; gap: 2px; padding-bottom: 16px; margin-bottom: 12px; border-bottom: 1px solid var(--line-subtle); }
.person-actions { display: flex; align-items: center; gap: 4px 14px; margin-top: 10px; flex-wrap: wrap; }
.person-reach { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }

.dock {
  position: fixed; left: 16px; bottom: calc(var(--footer-h) + 12px); z-index: 30;
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float);
}
.dock-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px; border: 0; border-radius: var(--r-control); background: transparent; font-size: var(--fs-meta); min-width: 0; max-width: min(560px, calc(100vw - 32px - 36px)); text-align: left; }
.dock { max-width: calc(100vw - 32px); }
.dock-chip .meta-quiet { flex: none; }
.dock .iconbtn { flex: none; }
.shell.has-dock .work-main { padding-bottom: 60px; }
.shell[data-page="ask"] ~ .dock { bottom: calc(var(--footer-h) + 84px); }
.dock-chip:hover { background: var(--bg-hover); }
/* R4: the matter is the identifying part and is never cut; the verb gives way first. At phone width the label
   wraps inside the chip (verb on one line, matter on the next). */
.dock-label { display: flex; align-items: baseline; gap: 0 .35em; min-width: 0; font-weight: 500; white-space: nowrap; }
.dock-verb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dock-matter { flex: none; }
@media (max-width: 560px) {
  .dock-chip { padding-block: 3px; }
  .dock-label { flex-wrap: wrap; }
  .dock-matter { flex: 0 1 auto; white-space: normal; }
}
.dock-dot { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--text-secondary); }

.menu {
  /* R9: never wider than the screen it is clamped into (core.js openMenu keeps an 8 px gutter on both sides) */
  position: fixed; z-index: 50; width: 340px; max-width: calc(100vw - 16px); padding: 12px 14px;
  background: var(--bg-raised); border: 1px solid var(--line-subtle); border-radius: var(--r-card); box-shadow: var(--shadow-float);
  animation: menu-in var(--t-menu-in) var(--ease);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-id { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line-subtle); }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.menu-lbl { font-size: var(--fs-meta); color: var(--text-secondary); }
.menu-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-subtle); font-size: var(--fs-caption); line-height: 20px; overflow-wrap: anywhere; }
.menu-item { display: flex; align-items: center; justify-content: space-between; width: 100%; height: var(--control-h); margin-top: 6px; padding: 0 8px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--text); font-size: var(--fs-meta); text-align: left; }
.menu-item:hover { background: var(--bg-hover); }
/* round 4 (3.6): product-track group (Setup, Admin, Partner console) and the configuration note's links */
.menu-group { margin-top: 8px; padding-top: 2px; border-top: 1px solid var(--line-subtle); }
.menu-group .menu-item:first-child { margin-top: 6px; }
.menu-note a { color: var(--accent-text); }

/* ask sheet (aside#ask; ask.js draws the content, core's stub draws a placeholder) */
.layer-ask { z-index: 41; }
.ask-stub-body { display: grid; gap: 8px; align-content: start; }
.ask-stub-body .rows li { padding: 6px 0; }
.ask-stub-foot { flex: none; display: grid; gap: 6px; padding: 10px 20px 14px; border-top: 1px solid var(--line-subtle); }

/* box additions (home.css owns the rest of the box): Ask toggle chip, 'thread' variant */
.box-mode {
  flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-subtle);
  color: var(--text-secondary); font-size: var(--fs-caption); font-weight: 500;
  transition: background-color var(--t-press) var(--ease), color var(--t-press) var(--ease);
}
.box-mode:hover { color: var(--text); }
.box-mode[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.box-compact .box-mode { height: 20px; padding: 0 6px; }
.box-thread .box-field { height: 52px; padding: 0 12px 0 8px; gap: 8px; border-radius: var(--r-dialog); background: var(--bg-raised); }
.box-thread .box-input { font-size: 15px; }
.box-scope { flex: none; display: inline-flex; align-items: center; max-width: 45%; min-width: 0; overflow: hidden; }
.box-scope:empty { display: none; }
.box-scope .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.box-thread .box-pop { top: auto; bottom: calc(100% + 6px); }
.box-thread .box-preview { display: none !important; }
.dd-starter .dd-main span { overflow: hidden; text-overflow: ellipsis; }

/* demo guide sheet */
.layer-guide { width: 440px; z-index: 43; }
.guide-body { display: grid; gap: 14px; align-content: start; }
.guide-list { display: grid; }
.guide-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-subtle); }
.guide-k { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; background: var(--bg-hover); color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--fs-caption); }
.guide-main { display: grid; gap: 4px; min-width: 0; }
.guide-title { font-weight: 600; }
.guide-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.guide-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.guide-foot { display: grid; gap: 6px; justify-items: start; padding-top: 14px; border-top: 1px solid var(--line-subtle); }
.guide-foot-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* activity rows open their room */
.act-open { color: inherit; }
.act-open:hover { color: var(--accent-text); }


/* ================================================= round 7 shared components (design section 3; API.md 14) */
/* ---- F2 disclosure: one trigger style per kind, one popover */
.disc { display: inline; border: 0; padding: 0; margin: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: inherit; cursor: pointer; border-radius: 2px; }
.disc .ico { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.disc-t { text-decoration: underline dotted var(--text-secondary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.disc:hover .disc-t, .disc[aria-expanded="true"] .disc-t { text-decoration-color: var(--accent); text-decoration-style: solid; }
.disc-term abbr { text-decoration: none; }
.disc-calc .disc-t { font-variant-numeric: tabular-nums; }
.disc-scope { color: var(--text-secondary); }
.disc-scope .disc-t { text-decoration-color: var(--line-strong); }
.disc-why { color: var(--text-secondary); font-weight: 500; }
.disc-entity .disc-t { text-decoration-color: var(--text-secondary); }
.ent-initials { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--bg-hover); color: var(--text); font-size: var(--fs-caption); font-weight: 600; vertical-align: middle; }
.ent-initials .disc-t { text-decoration: none; }
.ent-initials:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.disc-pop {
  position: fixed; z-index: 61; width: 340px; max-width: calc(100vw - 16px); max-height: min(420px, calc(100vh - 16px)); overflow: auto;
  padding: 10px 12px; background: var(--bg-raised); color: var(--text); font-size: var(--fs-meta); line-height: var(--lh-meta);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float);
}
.disc-pop p + p { margin-top: 6px; }
.disc-label { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); margin-bottom: 4px; }
.disc-body { display: grid; gap: 6px; }
.ent-rows { display: grid; gap: 4px; margin-top: 4px; }
.ent-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.ent-row.is-shown .ent-v { font-weight: 500; }
.ent-k { color: var(--text-secondary); }
.ent-v { min-width: 0; overflow-wrap: anywhere; }
.ent-open { margin-top: 4px; }

/* ---- F5 state words: glyph + word, one style per meaning; never a chip, never color alone */
.st { display: inline-flex; align-items: baseline; gap: 4px; font-size: inherit; color: var(--text); white-space: nowrap; }
.st .ico { align-self: center; flex: none; color: var(--text-secondary); }
.st-meta { color: var(--text-secondary); font-size: var(--fs-meta); margin-left: 4px; white-space: normal; }
.st-g-x .ico { color: var(--urgency-3); }
.st-g-alert .ico { color: var(--urgency-2); }
.st-g-clock .ico { color: var(--urgency-1); }
.st-g-check .ico { color: var(--text-secondary); }
.st-g-missing .st-w, .st-g-ring .st-w { color: var(--text-secondary); }
.st.is-failed .st-w { font-weight: 500; }

/* ---- F6 fact kinds */
.claim { display: grid; gap: 10px; }
.fact { display: grid; gap: 2px; }
.fact-eyebrow { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; letter-spacing: 0.02em; color: var(--text-secondary); }
.fact-quote { margin: 0; padding-left: 10px; border-left: 2px solid var(--line); font-family: var(--font-doc); font-size: 15px; line-height: 22px; }
.fact-inference .fact-text { color: var(--text); }
.fact-assessment .fact-text { font-weight: 500; }

/* ---- F1 folds, overflow, illustrative mark */
details.fold > summary { list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
.fold-sum { display: flex; align-items: baseline; gap: 8px; }
.fold-sum .ico { display: none; }
.fold-summary { display: none; color: var(--text-secondary); font-size: var(--fs-meta); }
@media (min-width: 721px) { details.fold > summary { pointer-events: none; } }
@media (max-width: 720px) {
  .fold-sum { min-height: 44px; align-items: center; cursor: pointer; }
  .fold-sum .region-title { margin: 0; }
  .fold-summary { display: inline; flex: 1 1 auto; min-width: 0; }
  .fold-sum .ico { display: inline-block; margin-left: auto; transition: transform var(--t-press) var(--ease); }
  details.fold[open] > .fold-sum .ico { transform: rotate(90deg); }
}
.overflow { position: relative; display: inline-flex; }
.ov-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 35; min-width: 220px; padding: 4px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); display: grid; }
.ov-item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border: 0; border-radius: 4px; background: none; color: var(--text); font-size: var(--fs-meta); text-align: left; white-space: nowrap; }
.ov-item:hover { background: var(--bg-hover); text-decoration: none; }
.illus-mark { display: inline-block; margin-right: 2px; color: var(--text-secondary); font-weight: 600; cursor: help; }
/* the tilde and the date it marks are one unit on a line: no break between them, and the marked thing
   still wraps on its own spaces so a long trigger does not run off a 360 px screen */
.illus-pair { white-space: nowrap; }
.illus-pair > * { white-space: normal; }
.illus-legend { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-secondary); }

/* ---- F16 freshness line */
.fresh-notice { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text); }
.fresh-notice .ico { align-self: center; color: var(--urgency-2); flex: none; }

/* ---- menu Keys section, Demo conditions sheet, Activity attention list */
.menu-keys > summary { list-style: none; cursor: pointer; }
.menu-keys > summary::-webkit-details-marker { display: none; }
.keys-list { display: grid; gap: 2px; max-height: 260px; overflow: auto; margin: 4px 0 0; padding: 4px 8px; border-top: 1px solid var(--line-subtle); }
.keys-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: center; font-size: var(--fs-meta); }
.keys-combo { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.demo-group { display: grid; gap: 6px; }
.demo-list { display: grid; gap: 2px; }
.demo-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 0; border-top: 1px solid var(--line-subtle); }
.demo-row input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--accent); }
.demo-row label { display: grid; gap: 1px; cursor: pointer; }
.act-attention { margin-bottom: var(--region-gap); padding-bottom: 12px; border-bottom: 1px solid var(--line-subtle); }
.act-att-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; font-size: var(--fs-meta); }
.act-att-text { flex: 1 1 200px; min-width: 0; }
.is-target { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .keyhint { display: none; }
  .subj-meta > span:nth-child(n+4) { display: none; }
}
@media (max-width: 720px) {
  .shell { height: auto; min-height: 100dvh; }
  .bar-a { height: auto; flex-wrap: wrap; row-gap: 6px; padding: 6px 16px; }
  .bar-left { flex: 1 1 auto; }
  .bar-right { flex: 0 0 auto; }
  .bar-mid { order: 3; flex: 1 1 100%; }
  .shell[data-kind="home"] .bar-mid { display: none; }
  .bar-b { flex-wrap: wrap; padding: 8px 16px 4px; gap: 6px; }
  /* round 5 (F7): the phone header collapses to name, one meta line, Next, then tabs. Channel and
     Dropbox stay reachable from the room's own links and Intake; All facts (a .btn, not .subj-link)
     stays. */
  .subj-name { font-size: 20px; line-height: 26px; }
  .subj-main { flex-wrap: wrap; row-gap: 2px; }
  .subj-meta {
    flex-wrap: wrap; row-gap: 2px; white-space: normal;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
  }
  /* -webkit-box drops the flex `gap` above; restore visible spacing between fields. */
  .subj-meta > * { margin-right: 8px; }
  .subj-side { flex: 1 1 100%; flex-wrap: wrap; }
  .subj-side .subj-link { display: none; }
  .subj-next { white-space: normal; flex-wrap: wrap; }
  .pdf-pre { overflow-wrap: anywhere; font-size: var(--fs-caption); }
  .bar-c { height: auto; min-height: var(--bar-c-h); flex-wrap: wrap; row-gap: 0; overflow-x: visible; padding: 0 8px; }
  .tabs { flex-wrap: wrap; }
  .tab { min-height: 36px; }
  .layer-sheet { height: var(--vvh, 100vh); bottom: auto; }
  .switcher-right { display: none; }
  .work { flex-direction: column; overflow: visible; }
  .work-main { overflow: visible; }
  .split-pane { flex: none; min-width: 0; max-width: none; border-left: 0; border-top: 1px solid var(--line); }
  .pane-body { max-height: 70vh; }
  .paper-badge { display: none; }
  .paper { padding: 20px 16px; }
  .paper-folio { margin: -8px -4px 12px; }
  .layer-drawer, .layer-panel, .layer-sheet, .layer-guide { width: 100vw; }
  .box-mode { display: none; }
  .pline { grid-template-columns: 22px minmax(0, 1fr); }
  .phead { flex-wrap: wrap; }
  .pline .pcat { grid-column: 2; }
  .pline .pmain, .pline .psrc { grid-column: 2; }
  .receipt { flex-wrap: wrap; }
  .receipt-text { white-space: normal; }
  .subnav { padding: 0 16px; flex-wrap: wrap; row-gap: 4px; column-gap: var(--s3); }
  .subtabs { flex-wrap: wrap; }
  .subnav .room-name { flex: 1 1 100%; padding-top: 8px; }
  .subtab { min-height: 36px; }
  .subnav-right { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; padding-bottom: 6px; }
  .subnav-right:empty { display: none; }
  .quiet-body { padding: var(--s4) 16px var(--s6); }
  .quiet-facts { grid-template-columns: minmax(0, 1fr); }
  .synth { white-space: normal; height: auto; padding: 6px 16px; text-align: center; }
  .kv-row { grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
  .kv-row dt { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-property: opacity !important; animation: none !important; }
  .layer { transform: none; opacity: 0; transition: opacity var(--t-fade) var(--ease) !important; }
  .layer.open { opacity: 1; }
}