:root { --bg: #f6f7fb; --card: #ffffff; --ink: #1b2430; --muted: #4b5563; --accent: #2f5fd6; --accent-ink: #ffffff; --line: #d9dee8; --warn-bg: #fff4d6; --warn-ink: #5c4300; --danger: #b42318; --focus: #1d4ed8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f141b; --card: #171e27; --ink: #e8ecf2; --muted: #a7b0bd; --accent: #7fa3ff; --accent-ink: #0b1220; --line: #2a3442; --warn-bg: #3a2f10; --warn-ink: #ffe3a3; --danger: #ff8a80; --focus: #9db9ff; } }
* { box-sizing: border-box; }
/* The hidden attribute wins over every display rule, so a hidden form (the two-factor step) never shows early. */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* The app UI standard (docs/APP-UI-STANDARD.md): every fee, total, installment and time in tabular numbers; headings wrap balanced. */
html, body { font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; z-index: 10; }
.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.mark { width: 14px; height: 14px; background: var(--accent); transform: rotate(45deg); display: inline-block; border-radius: 2px; }
.sub { color: var(--muted); font-weight: 400; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav { background: transparent; border: 1px solid transparent; color: var(--ink); padding: 8px 12px; border-radius: 8px; cursor: pointer; font: inherit; }
.nav[aria-current="page"] { border-color: var(--accent); color: var(--accent); }
.who { margin-left: auto; color: var(--muted); font-size: 14px; }
/* The recording indicator in the top bar's own row (never over a control): the red dot and the elapsed time, at a fixed
   width so nothing moves while it runs. "Recording" hangs just below the bar for about three seconds, out of the row
   and over no control, then fades. Reduced motion makes the fade instant. */
.rec-ind { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); pointer-events: none; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; }
.rec-clock { font-variant-numeric: tabular-nums; min-width: 5ch; }
.top { position: relative; }
/* While recording, the bar (and its dot) stays at the top of the window on screens wide enough for a short bar. */
@media (min-width: 640px) { body.is-recording .top { position: sticky; top: 0; z-index: 5; } }
.rec-word { position: absolute; top: calc(100% + 6px); left: 16px; padding: 2px 8px; border-radius: 999px; background: var(--danger); color: var(--bg); font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .4s; }
.rec-ind.intro .rec-word { opacity: 1; }
/* The notice's EN | SP toggle: two buttons in one outline, the shown language filled. */
.notice-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.notice-head h1 { margin: 0; }
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lang-toggle .lang { border: 0; border-radius: 0; padding: 8px 14px; background: var(--card); color: var(--muted); font-weight: 600; }
.lang-toggle .lang + .lang { border-left: 1px solid var(--line); }
.lang-toggle .lang[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.lang-toggle .lang:focus-visible { outline-offset: -3px; }
main { max-width: 920px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 16px; }
h1 { font-size: 22px; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 20px 0 8px; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.warn { background: var(--warn-bg); color: var(--warn-ink); padding: 8px 12px; border-radius: 8px; }
.notice { font-size: 18px; line-height: 1.6; }
.big { font-size: 40px; font-variant-numeric: tabular-nums; margin: 8px 0; }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
label.check { grid-template-columns: auto 1fr; align-items: center; }
label.check > span { white-space: nowrap; }
.linkish { background: none; border: 0; color: var(--accent); padding: 0; cursor: pointer; font: inherit; text-decoration: underline; justify-self: start; }
.suggest .item { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.suggest .item:first-of-type { border-top: 0; }
.suggest .item .grow { flex: 1 1 200px; }
dialog { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--card); color: var(--ink); max-width: 420px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
#mfa-dialog-error:empty { display: none; }
.ask { margin: 8px 0 12px; }
.ask textarea { min-height: 56px; }
.questions { list-style: none; padding: 10px 14px; margin: 0 0 12px; }
.questions li { margin: 4px 0; }
.questions button { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; text-align: left; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; width: 100%; }
input[type="checkbox"] { width: 20px; height: 20px; }
button, .button { font: inherit; border-radius: 10px; padding: 10px 16px; border: 1px solid var(--line); cursor: pointer; text-decoration: none; display: inline-block; background: var(--card); color: var(--ink); min-height: 44px; }
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.secondary { background: var(--card); color: var(--ink); }
.danger { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 600; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The eye button inside the right edge of a password field: the label's last row is its input, so the button sits on
   that row, as tall as the input inside its border (the label's 14px text at the body's 1.5 line height, plus padding). */
.pw-field { position: relative; }
.pw-field input { padding-right: 48px; }
.pw-toggle { position: absolute; right: 1px; bottom: 1px; width: 44px; height: calc(1.5em + 20px); min-height: 0; font-size: 14px; padding: 0; border: 0; border-radius: 0 7px 7px 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline-offset: -3px; }
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.list li { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.list li .grow { flex: 1 1 200px; }
.suggest { border-color: var(--accent); }
.changes li { margin: 4px 0; }
.back { display: inline-block; margin-bottom: 8px; color: var(--accent); }
#toast { position: fixed; left: 16px; right: 16px; bottom: 16px; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: 10px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; max-width: 600px; margin: 0 auto; }
#toast.show { opacity: 1; transform: none; }
#toast.show #toast-action { pointer-events: auto; }
#toast { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
#toast button { padding: 6px 12px; background: var(--bg); color: var(--ink); border-color: var(--bg); font-weight: 600; }
/* Views and the command menu animate on entry; every animation is interruptible, and reduced motion turns them off. */
.view:not([hidden]) { animation: view-in 180ms ease-out; }
@keyframes view-in { from { opacity: 0; translate: 0 4px; } }
dialog[open] { animation: view-in 140ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* Skeleton loaders shaped like the content they stand in for (a list row: a title line, a muted line, a button). */
.skeleton { pointer-events: none; }
.sk-line { display: block; height: 12px; border-radius: 6px; margin: 6px 0; background: linear-gradient(90deg, var(--line) 25%, var(--bg) 50%, var(--line) 75%); background-size: 200% 100%; animation: sk-shimmer 1.2s linear infinite; }
.sk-muted { opacity: 0.6; height: 10px; }
.sk-w35 { width: 35%; } .sk-w40 { width: 40%; } .sk-w60 { width: 60%; } .sk-w70 { width: 70%; } .sk-w90 { width: 90%; } .sk-w95 { width: 95%; }
.sk-pill { width: 72px; height: 36px; border-radius: 10px; background: var(--line); }
@keyframes sk-shimmer { to { background-position: -200% 0; } }
[data-stale="true"] { opacity: 0.85; }
/* Shortcut hints in menus and tooltips. */
kbd { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; color: var(--muted); background: var(--bg); white-space: nowrap; }
.nav kbd { margin-left: 4px; }
/* The command menu: one level deep, so the safe triangle rule for nested menus does not apply here. */
.cmd { max-width: 560px; padding: 12px; }
.cmd input { margin-bottom: 8px; }
.cmd ul { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.cmd li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.cmd li .grow { flex: 1 1 auto; }
.cmd li[aria-selected="true"] { background: var(--warn-bg); color: var(--warn-ink); outline: 2px solid var(--accent); outline-offset: -2px; }
.cmd-foot { font-size: 13px; margin: 8px 0 0; }
/* The sound check: one meter per source, a real element with a name and a value (role meter). The bar follows the level;
   under reduced motion the script steps it twice a second and the rule above drops the easing. */
.sound { margin: 12px 0; }
.sound h2 { margin-top: 8px; }
.sound fieldset { border: 0; padding: 0; margin: 0; }
.sound legend { font-size: 14px; color: var(--muted); padding: 0; margin-bottom: 4px; }
.meters { display: grid; gap: 8px; }
.meter-row { display: grid; grid-template-columns: 9em minmax(0, 1fr) 8em; gap: 10px; align-items: center; }
.meter { height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.meter-fill { display: block; height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(var(--level, 0)); transition: transform 90ms linear; }
.meter-state { font-size: 14px; color: var(--muted); }
.meter-row[data-state="silent"] .meter-state, .meter-row[data-state="stopped"] .meter-state, .meter-row[data-state="refused"] .meter-state { color: var(--danger); font-weight: 600; }
#src-warn:empty { display: none; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
dt { color: var(--muted); }
@media (max-width: 600px) { .top { padding: 10px 12px; } .who { width: 100%; margin-left: 0; } .big { font-size: 32px; } dl { grid-template-columns: 1fr; } .meter-row { grid-template-columns: minmax(0, 1fr) auto; } .meter { grid-column: 1 / -1; grid-row: 2; } }

/* The retainer editor: the fonts the renderer uses (Times New Roman's metrics, Book Antiqua's stand-in, the script signature), pages at 1 point = 96/72 px, scaled to the column. */
@font-face { font-family: "Summrex Serif"; src: url("/capture/fonts/LiberationSerif-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; }
@font-face { font-family: "Summrex Serif"; src: url("/capture/fonts/LiberationSerif-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; }
@font-face { font-family: "Summrex Serif"; src: url("/capture/fonts/LiberationSerif-Italic.ttf") format("truetype"); font-weight: normal; font-style: italic; }
@font-face { font-family: "Summrex Serif"; src: url("/capture/fonts/LiberationSerif-BoldItalic.ttf") format("truetype"); font-weight: bold; font-style: italic; }
@font-face { font-family: "Summrex Letterhead"; src: url("/capture/fonts/texgyrepagella-regular.otf") format("opentype"); font-weight: normal; }
@font-face { font-family: "Summrex Letterhead"; src: url("/capture/fonts/texgyrepagella-bold.otf") format("opentype"); font-weight: bold; }
@font-face { font-family: "Summrex Script"; src: url("/capture/fonts/GreatVibes-Regular.ttf") format("truetype"); }
.editor { margin-top: 12px; }
.ed-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.ed-version { font-weight: 600; margin-right: auto; }
.ed-instruct { margin: 8px 0 12px; }
.ed-columns { display: flex; gap: 16px; align-items: flex-start; }
.ed-pages { flex: 1 1 0; display: grid; gap: 16px; }
.ed-page { position: relative; background: #fff; color: #000; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); overflow: hidden; }
.ed-skeleton { aspect-ratio: 612 / 792; padding: 12%; }
/* The document pages draw a Word file with the renderer's metrics, not the app's numbers. */
.ed-page { font-variant-numeric: normal; }
.changes li.skeleton { list-style: none; }
.ed-skeleton .sk-line { margin: 10px 0; }
.ed-scaled { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--ed-scale, 1)); }
.ed-hl { position: absolute; background: #ffff00; }
.ed-rule { position: absolute; background: #000; }
.ed-img { position: absolute; }
.ed-para { position: absolute; outline: 2px solid transparent; outline-offset: -2px; }
.ed-editable { cursor: text; }
.ed-picking .ed-para { cursor: crosshair; outline-color: #8a5a00; }
.ed-question { margin: 8px 0; padding: 8px 12px; background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; }
.ed-question p { margin: 0 0 6px; }
.staff { margin: 8px 0 12px; padding: 8px 12px; border: 1px solid var(--muted); border-radius: 8px; }
.staff h2 { font-size: 15px; margin: 4px 0; }
.staff ul { margin: 0 0 6px 18px; }
.ed-picking .ed-para:hover { background: rgba(255, 196, 0, 0.2); }
.ed-editable:hover { background: rgba(47, 95, 214, 0.06); }
/* The page is always white, so the ring is a fixed colour (6.7:1) drawn as an outline, which forced-colors mode keeps. */
.ed-editable:focus { outline-color: #1d4ed8; }
.ed-changed { box-shadow: inset 4px 0 0 #8a5a00, inset 0 0 0 2px #8a5a00; background: rgba(255, 196, 0, 0.14); }
.ed-changed::before { content: "changed"; position: absolute; left: -1px; top: -1px; font: 600 7px/9px system-ui, sans-serif; color: #fff; background: #8a5a00; padding: 0 3px; letter-spacing: 0.04em; }
.ed-line { position: relative; height: 0; }
.ed-t { position: absolute; white-space: pre; color: #000; }
.ed-marker { user-select: none; }
.ed-diff { width: 100%; border-collapse: collapse; font-size: 14px; }
.ed-diff th, .ed-diff td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; width: 50%; }
tr.ed-row-changed td { background: rgba(255, 196, 0, 0.14); }
tr.ed-row-added td:last-child { background: rgba(0, 128, 64, 0.12); }
tr.ed-row-removed td:first-child { background: rgba(200, 0, 0, 0.1); text-decoration: line-through; }