/* Oryn's shared look (docs/superpowers/specs/2026-10-02-ui-foundation-design.md).
   Every page loads this first. A module's stylesheet adds only what is its
   own: never a colour token, body, or a base button rule (web/ui-guards.spec.ts). */

:root {
  color-scheme: light dark;
  --ink: #1b1b1b; --muted: #5f6368; --paper: #ffffff; --bg: #f4f5f7; --panel: #eef1f5;
  --accent: #1f5fae; --accent-ink: #ffffff; --line: #c9ced4; --field-line: #8a9099; --rule: #1b1b1b;
  --warn: #9a5b00; --warn-bg: #fff6e0; --bad: #b3261e; --good: #2e7d32;
  --tint-a: #e8f0f8; --tint-b: #eef6ec;
  --top-h: 3.5rem; --side-w: 17rem; --radius: 6px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8eaed; --muted: #a0a6ad; --paper: #1d1f22; --bg: #121315; --panel: #24272b;
    --accent: #7fb0f0; --accent-ink: #0d1b2e; --line: #3a3e44; --field-line: #6b7178; --rule: #c4c7cc;
    --warn: #f0b35c; --warn-bg: #3a3220; --bad: #f2a29c; --good: #81c784;
    --tint-a: #1d2a38; --tint-b: #1f3122;
  }
}
/* A document page (.paper-page) shows as the paper it prints on, in either theme: the light tokens, whatever the app's. */
.paper-page {
  color-scheme: light;
  --ink: #1b1b1b; --muted: #5f6368; --paper: #ffffff; --accent: #1f5fae; --accent-ink: #ffffff; --line: #c9ced4; --field-line: #8a9099; --rule: #1b1b1b;
  color: var(--ink);
}

/* Base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
body.plain { background: var(--paper); }
main.plain { max-width: 44rem; margin: 3rem auto; padding: 0 1rem; }
a { color: var(--accent); }
h1 { font-size: 1.4rem; margin: .25rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
code { font-size: .9em; background: var(--panel); padding: 0 .25em; border-radius: 3px; }
pre { white-space: pre-wrap; font: inherit; background: var(--panel); padding: .75rem; border-radius: var(--radius); }
:where(dl) { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .75rem; }
:where(dt) { font-weight: 600; }
:where(dd) { margin: 0; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: .5rem; top: -3rem; z-index: 10; background: var(--paper); padding: .4rem .7rem; border-radius: var(--radius); }
.skip:focus { top: .5rem; }

/* Buttons: one primary style; .secondary is always the outlined one. */
button, a.button { display: inline-block; font: inherit; font-weight: 600; line-height: 1.3; border-radius: var(--radius); padding: .45rem .9rem; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); text-decoration: none; }
button.secondary, a.button.secondary { background: transparent; color: var(--accent); }
button.danger { background: var(--bad); border-color: var(--bad); color: var(--paper); }
button.link { font-weight: inherit; color: var(--accent); background: none; border: 0; padding: 0; text-decoration: underline; }
button:disabled { opacity: .6; cursor: progress; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Fields: label, control, help. :where() keeps these overridable by a module's own controls. */
:where(input:not([type="checkbox"], [type="radio"], [type="file"]), select, textarea) { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--field-line); border-radius: var(--radius); padding: .4rem .55rem; max-width: 100%; }
input[type="file"] { max-width: 100%; }
.field { margin: .6rem 0; }
.field > label { display: block; font-size: .95rem; margin-bottom: .2rem; }
.help { color: var(--muted); font-size: .85rem; margin: .15rem 0; }

/* The amount field (shared, S6-3b): the standard field, right-aligned, "$1,234.56" once you leave it (oryn.js).
   A figure the app works out is plain text with its note ("from return · Change"), never a greyed-out input. */
input.amount { text-align: right; font-variant-numeric: tabular-nums; width: 9.5rem; }
input[aria-invalid="true"] { border-color: var(--bad); }
.field-error { color: var(--bad); font-size: .85rem; margin: .15rem 0; }
.figure { font-variant-numeric: tabular-nums; }
.figure-note { display: block; color: var(--muted); font-size: .8rem; }

/* Cards: a page's top-level sections. */
.content > section { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.25rem; margin: 1rem 0; }
.content > section > h2:first-child { margin-top: 0; }

/* Status lines, notes, banners, pills */
[role="status"] { min-height: 1.5em; color: var(--muted); }
[role="status"].bad, .note.bad, .bad { color: var(--bad); }
.note { color: var(--muted); font-size: .9rem; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.empty { color: var(--warn); }
.error { color: var(--bad); font-weight: 600; }
.draft, .warn { background: var(--warn-bg); color: var(--ink); border-radius: 8px; padding: .6rem .9rem; font-weight: 600; }
.warn { font-weight: 400; }
/* The billing banner at the top of every attorney page (billing-pages.ts billingBanner). */
.banner { max-width: 52rem; margin: 0 auto 1rem; padding: .6rem .9rem; border-radius: 8px; background: var(--panel); color: var(--ink); }
.banner.warn { background: var(--warn-bg); }
.pill, .badge, .tag { display: inline-block; font-size: .8rem; font-weight: 600; line-height: 1.4; border: 1px solid var(--line); border-radius: 999px; padding: 0 .55rem; vertical-align: middle; }
.pill.warn { background: none; color: var(--warn); border-color: var(--warn); padding: 0 .55rem; }
.badge.saved { color: var(--good); border-color: var(--good); }
.badge.done, .tag { color: var(--accent); border-color: var(--accent); }

/* Tables and panels inside a page's content (the form's paper sheet keeps its own). */
.content :where(table) { border-collapse: collapse; }
.content :where(th, td) { text-align: left; padding: .3rem .6rem .3rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.content :where(thead th) { font-weight: 600; }
.content :where(details) { border: 1px solid var(--line); border-radius: var(--radius); padding: .4rem .75rem; margin: .5rem 0; background: var(--paper); }
.content :where(summary) { cursor: pointer; font-weight: 600; }

/* Dialogs */
dialog { max-width: 40rem; width: calc(100% - 2rem); border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); padding: 1rem 1.25rem; }
dialog::backdrop { background: rgb(0 0 0 / .35); }
dialog h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
/* "Save to Clio" and the final review (save.js), on every page that saves. */
#save-dialog, #review-dialog { max-width: 34rem; }
#review-dialog { max-width: 42rem; }
#save-choices { display: grid; gap: .5rem; max-height: 50vh; overflow: auto; }
.choice { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); }
.choice span { display: grid; gap: .15rem; overflow-wrap: anywhere; }
.choice small { color: var(--muted); }
#review-count { margin: 0 0 .5rem; color: var(--muted); }
#review-preview { margin: .75rem 0 0; }
#review-list { max-height: 55vh; overflow: auto; display: grid; gap: .75rem; }
#review-list h3 { font-size: .95rem; margin: 0 0 .25rem; }
#review-list ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
#review-list li { overflow-wrap: anywhere; }
#review-list .resolve { margin-left: .5rem; font: inherit; font-size: .85em; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* The frame: top bar, sidebar, main area, and (on pages with actions) the bottom bar. */
body.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: var(--top-h) 1fr auto; grid-template-areas: "top top" "side main" "side bottom"; min-height: 100vh; }
.app-top { grid-area: top; position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1rem; height: var(--top-h); padding: 0 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
.matter-id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .25rem 1rem; white-space: nowrap; overflow: hidden; }
.matter-id .case { font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; }
.matter-id .parties, .matter-id .desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.matter-id .parties.bad { color: var(--bad); }
.brand { display: flex; align-items: center; gap: .45rem; color: var(--ink); text-decoration: none; font-weight: 700; flex: none; }
.nav-toggle { display: none; }
.app-side { grid-area: side; position: sticky; top: var(--top-h); align-self: start; height: calc(100vh - var(--top-h)); overflow-y: auto; padding: .75rem .5rem 1.5rem; background: var(--paper); border-right: 1px solid var(--line); font-size: .92rem; }
.app-main { grid-area: main; min-width: 0; padding: 1.25rem 1.5rem 3rem; }
.content { max-width: 52rem; margin: 0 auto; }
.content.wide { max-width: 90rem; }
.app-bottom { grid-area: bottom; position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1.5rem; background: var(--paper); border-top: 1px solid var(--line); }
.app-bottom [role="status"] { margin: 0; flex: 1 1 12rem; }
.app-bottom .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-left: auto; }

/* The sidebar */
.nav-item { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: .3rem .6rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nav-item:hover { background: var(--panel); }
.nav-item[aria-current] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); font-weight: 600; }
.nav-head { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 1rem .6rem .3rem; }
.nav-list, .nav-steps { list-style: none; margin: 0; padding: 0; }
.nav-steps { margin: 0 0 .25rem .9rem; padding-left: .3rem; border-left: 2px solid var(--line); }
.nav-note { color: var(--muted); font-size: .85rem; margin: .2rem .6rem; }
.nav-note.bad { color: var(--bad); }
.mark { flex: none; font-size: .75rem; color: var(--muted); white-space: nowrap; }
.mark::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; border: 1px solid currentColor; margin-right: .3rem; vertical-align: .02em; }
.mark.saved { color: var(--good); }
.mark.saved::before { background: currentColor; }
.mark.in-progress { color: var(--warn); }
.mark.in-progress::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.nav-all { margin: .5rem .3rem 0; }
.nav-all > summary { padding: .3rem; color: var(--muted); font-weight: 600; cursor: pointer; }
.nav-filter { width: 100%; margin: .3rem 0; }
.nav-foot { margin-top: 1.25rem; padding-top: .5rem; border-top: 1px solid var(--line); }

/* matter-panel (docs/superpowers/specs/2026-10-03-matter-panel-design.md): a row between the top bar and the
   sidebar/main row on every matter page. The people scroll sideways inside it; the Case and Type of action cards
   stay pinned at its right edge. At most 3 inches tall. */
body.app.has-panel { grid-template-rows: var(--top-h) auto 1fr auto; grid-template-areas: "top top" "panel panel" "side main" "side bottom"; }
.matter-panel, .panel-wrap { grid-area: panel; }
.matter-panel { display: flex; gap: .75rem; align-items: stretch; max-height: 3in; overflow-y: auto; padding: .7rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line); font-size: .875rem; }
.pp-people { flex: 1 1 auto; min-width: 0; display: flex; gap: .75rem; overflow-x: auto; }
.pp-people > .pp-card { flex: 1 0 13rem; }
.pp-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .75rem .6rem; min-width: 0; }
/* A card taller than the panel (at most 3in) scrolls inside itself; its rows never spill over the page below. */
.matter-panel .pp-card { overflow-y: auto; }
.pp-case { flex: 0 0 17.5rem; }
.pp-action { flex: 0 0 14.5rem; }
.pp-error { flex: 1 1 auto; }
.pp-head { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .35rem; }
.pp-head h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0; flex: 1; }
.pp-head button, .pp-edit { font-size: .8rem; }
.pp-name { font-weight: 700; font-size: .95rem; margin: 0 0 .3rem; overflow-wrap: anywhere; }
.pp-card dl { grid-template-columns: 4rem 1fr; gap: .1rem .5rem; margin: 0; }
.pp-card dl.pp-wide { grid-template-columns: 6.6rem 1fr; }
.pp-card dt { font-weight: 400; color: var(--muted); }
.pp-sub { display: block; color: var(--muted); font-size: .8rem; }
.pp-warn { margin: 0 0 .3rem; color: var(--warn); font-size: .8rem; font-weight: 600; }
.missing, .missing button.link { color: var(--warn); font-weight: 600; }
.pp-add { flex: 0 0 7rem; display: grid; place-items: center; text-align: center; border: 1px dashed var(--field-line); border-radius: 8px; color: var(--accent); background: transparent; font-weight: 600; padding: .5rem; }
.pp-kids { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pp-kids li { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; }
.pp-kids .k, .pp-kids .pp-warn { color: var(--muted); font-size: .8rem; grid-column: 1 / -1; }
.pp-kids .pp-warn { color: var(--warn); }
.pp-actions { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .3rem; }
.pp-actions li { border-left: 3px solid var(--accent); padding-left: .45rem; }
.pp-actions .sub { display: block; color: var(--muted); font-size: .8rem; }
.pp-card select { width: 100%; font-size: .85rem; padding: .25rem .4rem; }
.pill.client { color: var(--good); border-color: var(--good); }

/* The panel's edit and add dialog (matter-panel.js), on the shared dialog styles. */
dialog.person-dialog { max-width: 46rem; }
.grid2, .grid3, .grid4 { display: grid; gap: 0 .75rem; }
.grid2 { grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: 1fr 1fr 1fr; }
.grid4 { grid-template-columns: 2fr 1fr .6fr .9fr; }
.person-dialog .field { margin: .35rem 0; }
.person-dialog .field > label { font-size: .85rem; }
.person-dialog input:not([type="radio"], [type="checkbox"]), .person-dialog select { width: 100%; }
input.adding { border-color: var(--warn); background: var(--warn-bg); }
.src { display: block; font-size: .78rem; color: var(--muted); min-height: 1.1em; }
.src.add { color: var(--warn); font-weight: 600; }
.changes { background: var(--panel); border-radius: var(--radius); padding: .45rem .7rem; font-size: .88rem; margin: .6rem 0 0; }
.changes p { margin: .2rem 0; }
.changes ul { margin: .2rem 0; padding-left: 1.1rem; }
.dialog-actions .left { margin-right: auto; }
.person-results { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .3rem; max-height: 10rem; overflow: auto; }
.person-results button { width: 100%; text-align: left; font-weight: 400; }
.person-or { margin: .5rem 0 0; }
.pp-offer { border-style: dashed; }
fieldset.plain { border: 0; padding: 0; margin: .6rem 0 0; }
fieldset.plain legend { font-weight: 600; font-size: .9rem; padding: 0; margin-bottom: .2rem; }
fieldset.plain label { margin-right: 1rem; white-space: nowrap; }
fieldset.plain .help button { padding: .15rem .6rem; font-size: .85rem; }
.pp-offer button { font-size: .8rem; padding: .2rem .6rem; }

/* panel-line: the panel folded to one line on every page but the overview; "Show details" opens the panel over the
   page without moving the document (oryn.js). */
.panel-wrap { position: relative; z-index: 4; }
.panel-line { display: flex; align-items: center; gap: .35rem 1rem; height: 2.5rem; padding: 0 1rem; background: var(--panel); border-bottom: 1px solid var(--line); font-size: .875rem; white-space: nowrap; overflow: hidden; }
.panel-line > span { flex-shrink: 0; }
.panel-line > span.act { flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.panel-line .who b { font-weight: 600; }
.panel-line .sep { color: var(--line); flex: none; }
.panel-line .grow { flex: 1; }
.panel-line button { flex: none; padding: .15rem .6rem; font-size: .8rem; }
.matter-panel.floating { position: absolute; left: 0; right: 0; top: 100%; box-shadow: 0 8px 16px rgb(0 0 0 / .2); }

/* action-group: the type of action at the top of the sidebar, its forms in filing order with a status each. */
.nav-lead { margin: .2rem .6rem .8rem; }
.action-group { margin: 0 0 .5rem; padding: .5rem .3rem .4rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.action-group > a.head { display: block; padding: 0 .3rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.action-group > a.head[aria-current] { color: var(--accent); }
.action-group .progress { display: block; padding: 0 .3rem .3rem; font-size: .78rem; color: var(--muted); font-weight: 400; }
.action-group .nav-item { flex-direction: column; align-items: stretch; gap: 0; padding: .28rem .5rem; }
.action-group .nav-item .t { line-height: 1.3; }
.action-group .nav-item .mark { margin-top: .1rem; white-space: normal; }
.action-group details { margin: .2rem .2rem 0; }
.action-group details > summary { font-size: .8rem; color: var(--muted); padding: .2rem .3rem; cursor: pointer; }
.action-folded { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .5rem; margin: 0 0 .25rem; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .88rem; }
.action-folded[aria-current] { border-color: var(--accent); }
.action-folded .mark { white-space: normal; }
.mark.not-started { color: var(--muted); }
.mark.stale { color: var(--good); }
.mark.stale::before { background: currentColor; }
.mark.stale em { color: var(--warn); font-style: normal; font-weight: 600; }
.mark.depends { color: var(--warn); }
.mark.depends::before { border-style: dashed; }
.mark.not-needed { color: var(--muted); }
.mark.not-needed::before { border-color: var(--line); }
.nav-item.not-needed .t { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); }
.opt { color: var(--muted); font-size: .8rem; }
.next-doc { margin: .8rem 0 .4rem; }
.next-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .6rem; }

/* Narrow windows: the sidebar folds behind Menu; the bottom bar stays pinned. */
@media (max-width: 899px) {
  body.app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main" "bottom"; }
  body.app.has-panel { grid-template-areas: "top" "panel" "main" "bottom"; }
  .nav-toggle { display: inline-block; flex: none; }
  .matter-id .desc { display: none; }
  .app-side { position: fixed; top: var(--top-h); left: 0; bottom: 0; width: min(20rem, 85vw); height: auto; z-index: 6; transform: translateX(-105%); visibility: hidden; transition: transform .15s ease, visibility 0s linear .15s; }
  body.nav-open .app-side { transform: none; visibility: visible; transition: transform .15s ease; box-shadow: 4px 0 16px rgb(0 0 0 / .25); }
  .app-main { padding: 1rem; }
  .app-bottom { padding: .5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .app-side, body.nav-open .app-side { transition: none; } }
@media print {
  :root {
    --ink: #1b1b1b; --muted: #5f6368; --paper: #ffffff; --bg: #f4f5f7; --panel: #eef1f5;
    --accent: #1f5fae; --accent-ink: #ffffff; --line: #c9ced4; --field-line: #8a9099; --rule: #1b1b1b;
    --warn: #9a5b00; --warn-bg: #fff6e0; --bad: #b3261e; --good: #2e7d32;
    --tint-a: #e8f0f8; --tint-b: #eef6ec;
  }
  .app-top, .app-side, .app-bottom, .skip, .matter-panel, .panel-wrap { display: none !important; }
  body.app { display: block; background: #fff; color: #000; }
  .app-main { padding: 0; }
  .content > section { border: 0; padding: 0; }
}