/* Copied verbatim from Sam Workflow (pd-live origin/main 9073b821) static/components.css. Do not edit: override in styles.css. */
/* Trang's component catalogue (her prototype, 18.10.2026; SPEC-system section 7), for every page sheet to use. base.html
   links it on every page after app.css. Class names are hers, so her markup can be used as it is, except where Sam
   already uses a name for something else: no bare .doc, .chk, .on or .stamp rules here (.stamp is drawn only when it
   is not also a .tag), and her round "send" buttons are .ask-go (the bare word is banned on every page). Values are
   her resolved ones, written with her token names (app.css maps them onto wf/tokens.css); a colour she hard-codes is a
   --wf-* token. Not here: page layouts (Home's Mission Control, the inbox, the workspaces' grids), which belong to the
   page sheets. FOUNDATION.md lists every class and how to use it. CSP: no url(), no web fonts. */

/* ---------- page headers ---------- */
.svchead { margin: 0 0 16px; }
.svceye { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); font-weight: 600;
  margin-bottom: 2px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 18px; }
.hint { font-size: 12px; color: var(--faint); margin-top: 14px; }
.wshead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 2px; }
.wshead h1 { margin: 0; }
.rochip { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--raise); border-radius: 999px;
  padding: 4px 10px; }

/* ---------- buttons (Sam: .btn alone is her ghost; .btn.primary is her dark .btn) ---------- */
.btn.ghost { background: var(--panel); color: var(--ink); border: 1px solid var(--border2); box-shadow: none; }
.btn.danger { background: var(--bad); color: #ffffff; border: 0; }
.btn.danger:hover { background: #b93a33; }
[data-theme="dark"] .btn.danger:hover { background: var(--bad); }
.btn.upbtn { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; background: var(--btn);
  color: var(--btn-ink); border: 0; }
.btn.upbtn:hover { opacity: .88; background: var(--btn); }
.gatebar .btn, .cfgrow .btn { margin-left: auto; }
.csbtn { all: unset; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  color: var(--muted); cursor: pointer; }
.csbtn:hover { background: var(--raise); color: var(--ink); }
.tlarr { all: unset; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px;
  color: var(--muted); background: var(--panel); box-shadow: 0 0 0 1px var(--border2) inset; cursor: pointer; }
.tlarr:hover { color: var(--ink); background: var(--panel2); }
.csx { all: unset; cursor: pointer; color: var(--faint); padding: 4px 7px; border-radius: 6px; }
.csx:hover { background: var(--panel2); color: var(--ink); }
.pencil { all: unset; cursor: pointer; color: var(--faint); font-size: 13px; padding: 2px 5px; border-radius: 5px;
  visibility: hidden; }
tr:hover .pencil { visibility: visible; }
.pencil:hover { color: var(--ink); background: var(--raise); }
.linkish { all: unset; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  font-size: 12.5px; }
.why { all: unset; font-size: 12px; color: var(--bad); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; white-space: nowrap; }
.nexth { all: unset; display: none; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 4px 6px; }
.nexth.show { display: inline-flex; }
.mcprimary { all: unset; cursor: pointer; background: var(--btn); color: var(--btn-ink); font-size: 12px; font-weight: 500;
  padding: 11px 16px; border-radius: 10px; transition: opacity .15s ease; }
.mcprimary:hover { opacity: .88; }
.mcghost { all: unset; cursor: pointer; font-size: 12px; font-weight: 500; padding: 11px 16px; border-radius: 10px;
  border: 1px solid var(--border2); color: var(--ink); background: var(--panel); }
.mcghost:hover { background: var(--panel2); }

/* ---------- chips, pills, badges ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .1px;
  border-radius: 999px; padding: 2.5px 9px; white-space: nowrap; background: var(--badge); color: var(--badge-ink); }
.chip i { width: 6px; height: 6px; border-radius: 50%; font-style: normal; background: var(--faint); }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.good i { background: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.warn i { background: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.chip.bad i { background: var(--bad); }
.chip.idle { background: var(--badge); color: var(--badge-ink); }
[data-theme="dark"] .chip.idle { background: var(--raise); }
.chip.idle i { background: var(--faint); }
.fchip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .1px;
  color: var(--good); background: var(--good-soft); border-radius: 999px; padding: 3px 8px 3px 7px; }
.fchip svg { flex: none; }
.vchip { font-family: var(--mono); font-size: 10px; letter-spacing: .1px; border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; color: var(--muted); white-space: nowrap; }
[data-theme="dark"] .vchip { border-color: var(--border2); }
.vchip.mut { color: var(--faint); }
.vchip.sug { border-style: dashed; color: var(--faint); }
.mctag { font-size: 10.5px; border-radius: 6px; background: var(--badge); color: var(--badge-ink); padding: 4px 8px;
  letter-spacing: .1px; }
.mctag.ap { background: var(--warn-soft); color: var(--warn); }
.stamp:not(.tag) { margin-left: auto; flex: none; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; border: 1.5px solid; border-radius: 4px; padding: 4px 9px;
  transform: rotate(2deg); }
.stamp.draft:not(.tag) { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
.stamp.verified:not(.tag) { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.stamp.notyet:not(.tag) { color: var(--faint); border-color: var(--border2); background: var(--panel2); }
.kbd { font-family: var(--mono); font-size: 11px; color: var(--faint); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; }
.cnt { font-size: 11px; font-weight: 600; color: var(--ink); background: var(--panel2); border-radius: 999px;
  padding: 0 7px; line-height: 18px; }
.wt { flex: none; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-radius: 4px;
  padding: 1px 5px; }
.wt.sam { background: var(--good-soft); color: var(--good); }
.wt.you { background: var(--panel2); color: var(--ink); border: 1px solid var(--border2); }
.wt.gone { background: var(--panel2); color: var(--faint); text-decoration: line-through; }
.wt.eur { background: var(--warn-soft); color: var(--warn); }
.wt.v2 { background: var(--panel2); color: var(--muted); }

/* ---------- stage tabs (Sam keeps them visible; Trang's .step pills) and other tabs ---------- */
.stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--faint); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; background: var(--panel); text-decoration: none; }
.step.done { color: var(--good); border-color: var(--wf-good-line); background: var(--good-soft); }
.step.cur { color: var(--ink); border-color: var(--border2); background: var(--panel2); font-weight: 600; }
[data-theme="dark"] .step.cur { background: var(--raise); }
.step.lock { opacity: .5; }
.tabs { display: flex; gap: 4px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.tabs button, .tabs a { all: unset; font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 6px;
  color: var(--muted); cursor: pointer; }
.tabs button.on, .tabs a.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
[data-theme="dark"] .tabs button.on, [data-theme="dark"] .tabs a.on { background: var(--raise); }
.tabs .n { font-family: var(--mono); font-size: 11px; }
.mctabs { display: flex; gap: 26px; }
.mctabs button, .mctabs a { all: unset; cursor: pointer; padding: 15px 0; font-size: 13px; color: var(--faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mctabs button.sel, .mctabs a.sel { color: var(--ink); border-bottom-color: var(--ink); }
.mt-tabs { display: flex; overflow: auto; padding: 0 16px; border-top: 1px solid var(--border); background: var(--panel); }
.mt-tabs button, .mt-tabs a { all: unset; position: relative; flex-shrink: 0; cursor: pointer; padding: 18px 20px; font-size: 12px;
  font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; }
.mt-tabs > * + *::before { content: ""; position: absolute; left: 0; top: 19px; width: 1px; height: 14px; background: var(--border); }
.mt-tabs button:hover, .mt-tabs a:hover { color: var(--ink); }
.mt-tabs .active { color: var(--ink); border-bottom-color: var(--ink); background: linear-gradient(0deg, var(--panel2), transparent); }
.mt-review { margin-left: auto; display: flex; flex-wrap: wrap; max-width: 100%; gap: 2px; background: var(--panel2); border-radius: 9px; padding: 3px; }
.mt-review button, .mt-review a { all: unset; cursor: pointer; font-size: 12px; color: var(--muted); padding: 7px 11px;
  border-radius: 7px; white-space: nowrap; }
.mt-review .on { background: var(--panel); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.mt-review .n { font-family: var(--mono); font-size: 11px; margin-left: 3px; }
.mt-review .flagged .n { color: var(--bad); }

/* ---------- panels, gate bars, output cards, config rows ---------- */
.panel { background: var(--panel); border: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--wf-shadow-panel);
  min-width: 0; }
[data-theme="dark"] .panel, [data-theme="dark"] .ocard { border: 1px solid var(--wf-panel-line); }
.panel + .panel { margin-top: 14px; }
.panel.narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.panel h2 { font-size: 13px; font-weight: 500; letter-spacing: -.15px; color: var(--muted); margin: 0; padding: 11px 16px;
  border-bottom: 1px solid var(--border); }
.panel .h2-note { float: right; font-weight: 400; color: var(--faint); }
.panel .h2-aside { float: right; margin-top: -3px; }
.ditog { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.ditog .dicount { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 400; }
.ditog .chev { font-size: 10px; color: var(--faint); }
.gatebar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 13px 16px; background: var(--panel2); }
.gatebar.plain { background: var(--panel); }
.gatebar .note { font-size: 12.5px; color: var(--bad); font-weight: 500; }
.gatebar .note.ok { color: var(--good); }
.gatebar .note.muted { color: var(--muted); }
.outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.ocard { background: var(--panel); border: 0; border-radius: 11px; padding: 13px 15px; min-width: 0;
  box-shadow: var(--wf-shadow-card); }
.ocard b { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 2px; }
.ocard .v { font-size: 12px; color: var(--good); margin-bottom: 8px; }
.ocard .meta { font-size: 12px; color: var(--faint); }
.fig { all: unset; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink);
  border-bottom: 1px dashed var(--ink); cursor: pointer; }
.big { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 26px; font-weight: 700; margin: 2px 0; }
.stat .lb2 { font-size: 12.5px; font-weight: 600; }
.stat .ft { font-size: 11.5px; color: var(--faint); }
.cfg { padding: 2px 0; }
.cfgrow { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; }
.cfgrow:last-of-type { border-bottom: none; }
.cfgrow > span:first-child { width: 170px; flex: none; color: var(--muted); }
.cfgrow .lb { width: 190px; flex: none; color: var(--muted); }
.cfgrow b { font-weight: 500; }
.cfgrow .edit { margin-left: auto; }
.cfgh { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); font-weight: 600;
  padding: 12px 16px 4px; }
.reg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 16px; font-size: 13px; }
.reg b { font-weight: 600; }
.reg .mono { font-size: 12px; color: var(--muted); }
.precnote { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--panel2); }
.precnote b { color: var(--good); }
.emrow, .rule { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 16px;
  border-bottom: 1px solid var(--border); font-size: 13px; }
.emrow:last-child, .rule:last-child { border-bottom: none; }
.rule .mono { font-size: 11.5px; color: var(--faint); }
.intop { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.intop > .panel { display: flex; flex-direction: column; }
.ledstats { display: flex; flex-wrap: wrap; gap: 28px; padding: 14px 16px 2px; }
.lnum { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; color: var(--ink);
  line-height: 1.2; }
.llb { font-size: 12px; color: var(--muted); }
.lrange { font-size: 11px; color: var(--faint); padding: 6px 16px 0; }
.lbtns { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 14px; margin-top: auto; }

/* ---------- tables: clickable rows, the wide-table scroll box, the Monthly accounting table ---------- */
.tscroll > table { min-width: 560px; }
tr.row { cursor: pointer; }
tr.row:hover td { background: var(--panel2); }
tr.hl td { background: var(--warn-soft); }
tr.hl td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.flag td { background: var(--bad-soft); }
tr.flag:hover td { background: var(--wf-row-flag-hover); }
tr.evrow td { background: var(--panel2); font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--bad); }
tr.splitrow td { background: var(--panel2); font-size: 12.5px; border-left: 2px solid var(--border2); }
tr.allocrow td { background: var(--good-soft); font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--good); }
.okmark { color: var(--good); font-size: 12px; white-space: nowrap; }
.ctxbanner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; background: var(--warn-soft);
  border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--warn); font-weight: 500; }
.ctxbanner .btn { margin-left: auto; }
.mt-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 20px; padding: 24px;
  min-height: 94px; }
.mt-title { display: flex; gap: 12px; align-items: center; min-width: 0; }
.mt-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: var(--panel2); color: var(--ink);
  display: grid; place-items: center; font-size: 20px; }
.mt-title h2 { font-size: 18px; font-weight: 600; letter-spacing: -.4px; margin: 0 0 5px; line-height: 23px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); padding: 0; border: 0; }
.mt-muted { color: var(--muted); font-size: 12px; }
.mt-cur { font-size: 10px; color: var(--faint); margin-left: 8px; letter-spacing: .1px; }
.mt-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 0 24px 22px; }
.mt-filters select { height: 38px; border: 1px solid var(--border); background: var(--panel); border-radius: 8px;
  padding: 0 10px; color: var(--muted); font-size: 12px; font-family: inherit; }
.mt-link { all: unset; cursor: pointer; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink); }
.mt-reset { all: unset; cursor: pointer; height: 38px; padding: 0 12px; font-size: 12px; color: var(--ink); font-weight: 500; }
.mt-scroll { overflow: auto; min-height: 410px; position: relative; scrollbar-width: thin; }
.mt-scroll::-webkit-scrollbar { display: block; height: 6px; }
.mt-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
table.mt-table { width: 100%; border-collapse: collapse; white-space: nowrap; min-width: 0; }
.mt-table th { text-align: left; font-size: 10px; letter-spacing: .5px; color: var(--muted); font-weight: 500;
  text-transform: uppercase; background: var(--panel2); padding: 16px 11px; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); }
.mt-table td { padding: 20px 11px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted);
  vertical-align: middle; }
.mt-table th:first-child, .mt-table td:first-child { padding-left: 24px; }
.mt-table th:last-child, .mt-table td:last-child { padding-right: 24px; }
.mt-table tbody tr:hover { background: var(--panel2); }
.mt-table td.mt-name { color: var(--ink); font-weight: 500; max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.mt-table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.mt-table .numeric.debit, .mt-table .numeric.credit { color: var(--ink); }
.mt-table .vat-column { text-align: center; width: 62px; }
.mt-table .vat-column input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--ink);
  cursor: pointer; }
.mt-table tr.flag, .mt-table tr.flag:hover { background: var(--bad-soft); }
.mt-table tr.flag td { background: none; }
.mt-table tr.flag td.mt-name { color: var(--bad); }
.mt-table tr.okrow td { color: var(--faint); }
.mt-table td.state { text-align: right; }
.mt-empty { text-align: center; padding: 70px !important; }
.mt-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 19px 24px; min-height: 52px;
  color: var(--muted); font-size: 11px; border-top: 1px solid var(--border); }
.mt-legend { display: flex; flex-wrap: wrap; gap: 20px; font-variant-numeric: tabular-nums; color: var(--ink); }
.mt-legend span { display: inline-block; min-width: 155px; text-align: right; white-space: pre; }

/* ---------- inputs, selects, search ---------- */
.mt-finder { position: relative; width: 320px; max-width: 100%; min-width: 0; }
.mt-input { display: flex; align-items: center; gap: 10px; padding: 0 13px; height: 38px; border: 1px solid var(--border);
  background: var(--panel2); border-radius: 9px; color: var(--faint); }
.mt-input:focus-within { border-color: var(--border2); box-shadow: 0 0 0 3px var(--panel2); }
.mt-input input { all: unset; flex: 1; min-width: 0; font-size: 12px; color: var(--ink); }
.mt-filters .mt-input { width: 260px; max-width: 100%; background: var(--panel); }
.acc { display: flex; align-items: center; gap: 7px; min-width: 0; }
.acc select, .grpcard select { background: var(--panel); color: var(--ink); border: 1px solid var(--border2); border-radius: 7px;
  padding: 3px 7px; font-size: 12.5px; font-family: inherit; max-width: 190px; }
[data-theme="dark"] .acc select, [data-theme="dark"] .grpcard select, [data-theme="dark"] .amtin { background: var(--panel2); }
.amtin { width: 92px; font-family: var(--mono); font-size: 12.5px; border: 1px solid var(--border2); border-radius: 7px;
  padding: 3px 7px; text-align: right; background: var(--panel); color: var(--ink); }
.grpcard { background: var(--warn-soft); border-bottom: 1px solid var(--border); padding: 12px 14px; }
.grpcard .ttl { font-weight: 600; font-size: 13.5px; }
.grpcard .meta2 { font-size: 12px; color: var(--muted); margin-top: 2px; }
.grpcard .ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 9px; font-size: 12.5px; }
.grpdone { background: var(--good-soft); border-bottom: 1px solid var(--border); padding: 9px 14px; font-size: 12.5px;
  color: var(--good); }
.mcfilters { display: flex; flex-wrap: wrap; gap: 8px; }
.mcfilters select { background: var(--panel); color: var(--muted); border: 1px solid var(--border2); border-radius: 9px;
  font-size: 12px; padding: 8px 10px; font-family: inherit; }

/* ---------- pickers: client and period ---------- */
.cpk { position: relative; display: flex; align-items: center; gap: 8px; }
.cpk.pkr { margin-left: auto; }
.cpbtn { all: unset; display: inline-flex; align-items: center; gap: 8px; padding: 2px 8px 2px 4px; margin-left: -4px;
  border-radius: 10px; cursor: pointer; }
.cpbtn:hover { background: var(--raise); }
.cpbtn .cpchev { display: grid; place-items: center; width: 16px; height: 16px; color: var(--ink); margin-top: 3px; }
.cpmenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 300px; max-width: calc(calc(100vw / var(--wf-zoom, 1)) - 24px);
  padding: 6px; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 1px var(--border2), var(--wf-shadow-pop);
  animation: cpin .14s ease; }
.cpmenu.r { left: auto; right: 0; min-width: 240px; }
.cpmenu .cps { display: block; padding: 6px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); }
.cpsearch { display: block; width: 100%; margin: 0 0 4px; padding: 7px 10px; border: 0; border-radius: 8px;
  background: var(--panel2); color: var(--ink); font: inherit; font-size: 12.5px; outline: none; }
.cpit { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; font-size: 13px; }
.cpit:hover { background: var(--panel2); }
.cpit.on { background: var(--raise); font-weight: 600; }
.cpit .cpav { width: 24px; height: 24px; flex: none; border-radius: 7px; background: var(--raise); display: grid;
  place-items: center; font-size: 10px; font-weight: 600; color: var(--muted); }
.cpit .cpst { margin-left: auto; font-size: 11.5px; color: var(--faint); font-weight: 400; white-space: nowrap; }
.cpit .cpck { width: 14px; flex: none; color: var(--ink); font-size: 12px; }
.perbox { all: unset; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px; border-radius: 9px;
  background: var(--panel); box-shadow: 0 0 0 1px var(--border2) inset; font-size: 12.5px; cursor: pointer; }
.perbox span { color: var(--faint); font-size: 11.5px; }
.perbox i { font-style: normal; color: var(--faint); font-size: 10px; }
.perbox:hover { background: var(--panel2); }

/* ---------- the sidebar's client documents (base.html's sidedocs block; workspace pages fill it) ---------- */
.sidedocs { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; display: flex; flex-direction: column;
  gap: 1px; min-height: 0; overflow-y: auto; }
.sidedocs .cl { font-size: 12px; font-weight: 600; padding: 2px 10px 6px; letter-spacing: -.01em; }
.sidedocs .sdh { display: flex; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--faint); font-weight: 600; padding: 8px 10px 3px; cursor: pointer; user-select: none; list-style: none; }
.sidedocs .sdh::-webkit-details-marker { display: none; }
.sidedocs .sdh .chev { margin-left: auto; font-size: 9px; }
.sditem { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 7px;
  font-size: 12px; color: var(--muted); cursor: pointer; min-width: 0; }
.sditem:hover { background: var(--panel2); color: var(--ink); }
.sditem.notyet { opacity: .55; }
.sditem .nm2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sditem .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--border2); }
.sditem .dot.g { background: var(--good); }
.sditem .dot.b { background: var(--bad); }
.sditem .dot.w { background: var(--warn); }
.sditem .dot.i { background: var(--border2); }
.nav-mini:not(.nav-peek) .sidedocs { display: none; }
@media (max-width: 720px) { .sidedocs { display: none; } }

/* ---------- steps: the workflow panel's list (A), ITR14 steps (B), Sam's run strip (C), balance checks (D) ---------- */
.wfctl { display: flex; align-items: center; gap: 5px; padding: 12px 10px 10px; border-bottom: 1px solid var(--border); }
.wfctl .btn { flex: none; padding: 6px 10px; white-space: nowrap; line-height: 1.2; }
.wfctl .btn.wfic { padding: 6px 9px; }
.wfctl .prog { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.wflist { list-style: none; margin: 0; padding: 8px 16px 16px; overflow-y: auto; }
.wfi { position: relative; display: flex; gap: 11px; padding: 5px 0 9px; }
.wfi::before { content: ""; position: absolute; left: 9px; top: 24px; bottom: -4px; width: 1px; background: var(--border); }
.wfi:last-child::before { display: none; }
.wfm { flex: none; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--border2); background: var(--panel);
  display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--faint); position: relative; z-index: 1; }
.wfm::after { content: ""; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--border2); }
.wft { display: flex; align-items: flex-start; gap: 8px; width: 100%; font-size: 12.5px; color: var(--faint); line-height: 1.35;
  padding-top: 1px; }
.wft .wfn { flex: 1; min-width: 0; }
.wfi.done .wfm { background: var(--panel2); color: var(--muted); }
.wfi.done .wfm::after { display: none; }
.wfi.done .wft { color: var(--muted); }
.wfi.cur .wfm { background: var(--ink); border-color: var(--ink); box-shadow: 0 0 0 4px var(--raise); }
.wfi.cur .wfm::after { width: 6px; height: 6px; background: var(--panel); border: none; }
.wfi.cur .wft { color: var(--ink); font-weight: 600; }
/* the workflow panel's airy list (her final look) */
.wflist .wfi { cursor: pointer; gap: 14px; align-items: center; min-height: 44px; border-radius: 10px; margin: 0 -8px;
  padding: 0 8px; transition: background .15s ease; }
.wflist .wfi:hover { background: var(--panel2); }
.wflist .wfi::before { left: 17px; top: 30px; bottom: -14px; background: var(--border); }
.wflist .wfm { width: 18px; height: 18px; border-width: 1px; }
.wflist .wft { align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; padding: 11px 0; color: var(--faint); }
.wflist .wfi:hover .wft { color: var(--ink); }
.wflist .wfi.done .wft { color: var(--ink); }
.wflist .wfi.done .wfm { background: var(--panel); color: var(--faint); border-color: var(--border2); }
.wflist .wfi.cur .wft, .wflist .wfi.need .wft { color: var(--ink); font-weight: 500; }
.wflist .wfi.cur .wfm, .wflist .wfi.need .wfm, .wflist .wfi.run .wfm { width: 18px; height: 18px; border: 5px solid var(--ink);
  background: var(--panel); box-shadow: 0 0 0 3px var(--bg); }
.wflist .wfi.cur .wfm::after, .wflist .wfi.need .wfm::after, .wflist .wfi.run .wfm::after { display: none; }
.wflist .wfi.run .wfm { border-width: 1.5px; color: var(--ink); }
.wfi.run .wfm svg { animation: arspin .9s linear infinite; }
.wfi.run .wfn { background: linear-gradient(90deg, var(--faint), var(--ink) 50%, var(--faint)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: arsheen 1.4s linear infinite; }
.wfrev { all: unset; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: var(--wf-pill); color: var(--ink); font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .15s ease; }
.wfrev svg { color: var(--muted); }
.wfrev .ra { color: var(--faint); }
.wfrev:hover { background: var(--wf-pill-hover); }
.wfrev[disabled] { opacity: .45; cursor: default; }
.wfsrc { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--panel2);
  color: var(--faint); }
.wflist .wfi:hover .wfsrc { background: var(--panel); }
.ctrsteps { list-style: none; margin: 0; padding: 12px 18px 14px; columns: 2; column-gap: 38px; }
.ctrsteps .wfi { break-inside: avoid; padding: 4px 0 8px; }
.ctrsteps .wfi::before { display: none; }
.ctrsteps .wft { font-size: 12px; }
.ctrsteps .wfi.q .wfm { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.ctrsteps .wfi.q .wfm::after { display: none; }
.ctrsteps .wfi.q .wft { color: var(--bad); }
.agentrun { background: var(--panel); border-radius: 14px; padding: 12px 16px; box-shadow: 0 1px 0 var(--border); margin: 0 0 18px; }
.arhead { all: unset; display: flex; align-items: center; gap: 9px; padding: 3px 2px; cursor: pointer; width: 100%;
  box-sizing: border-box; font-size: 12.5px; color: var(--muted); }
.arhead b { color: var(--ink); font-weight: 600; }
.arhead .chev { margin-left: 6px; color: var(--faint); font-size: 10px; }
.arorb { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: var(--ink); flex: none;
  position: relative; border-radius: 50%; }
.agentrun:not(.done) .arorb::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--border2);
  animation: arping 1.4s ease-out infinite; }
.agentrun.done .arorb { color: var(--good); }
.agentrun.fail .arorb { color: var(--bad); }
.arlab-run { background: linear-gradient(90deg, var(--faint), var(--ink) 50%, var(--faint)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: arsheen 1.5s linear infinite; }
.arsteps { margin: 8px 0 4px 7px; padding: 2px 0 2px 17px; border-left: 1px solid var(--border); max-width: 560px; }
.arstep { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-family: var(--mono); font-size: 11.5px;
  color: var(--muted); }
.arstep .ic { width: 15px; height: 15px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--faint); }
.arstep .stx { margin-left: auto; width: 15px; flex: none; text-align: center; color: var(--good); }
.arstep.cur, .arstep.cur .ic, .arstep.cur .stx { color: var(--ink); }
.arstep.cur .stx svg { animation: arspin .9s linear infinite; display: block; }
.arstep.todo, .arstep.todo .stx { color: var(--faint); }
.arstep.bad, .arstep.bad .ic, .arstep.bad .stx { color: var(--bad); }
.ck { border-bottom: 1px solid var(--border); }
.ck:last-child { border-bottom: none; }
.ckhead { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13.5px; cursor: pointer; }
.ckhead .st { width: 84px; flex: none; }
.ckhead .nm { min-width: 0; }
.ckhead .nm small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ckhead .diff { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ckhead .diff.bad { color: var(--bad); font-weight: 700; }
.ckhead .chev { color: var(--faint); font-size: 11px; width: 12px; }
.ckdetail { padding: 4px 16px 16px 112px; }
.ckdetail table { min-width: 0; margin-top: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; font-size: 12.5px; }
.ckdetail th, .ckdetail td { padding: 6px 12px; }
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; }
.csrc { background: var(--panel2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; min-width: 0; }
.csrc .lb, .ckmath .cmt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint);
  font-weight: 600; margin-bottom: 3px; }
.csrc .val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; }
.csrc .src { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.csign { align-self: center; color: var(--faint); font-size: 15px; font-family: var(--mono); }
.vlink { all: unset; display: block; cursor: pointer; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--border2); text-underline-offset: 3px; }
.vlink:hover { text-decoration-color: var(--ink); }
.ckmath { margin-top: 10px; padding: 10px 12px; border-radius: 9px; background: var(--panel2); font-size: 12.5px; }
.ckmath .cmt { margin-bottom: 6px; }
.cmr { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--muted); }
.cmr b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink); white-space: nowrap; }
.cmr.tot { border-top: 1px solid var(--border2); margin-top: 3px; padding-top: 6px; color: var(--ink); font-weight: 600; }
.cmr.tot b { font-weight: 700; }
.cmr.ok b { color: var(--good); }
.cmr.bad, .cmr.bad b { color: var(--bad); font-weight: 600; }
.cexp { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.cexp.bad { color: var(--bad); font-weight: 500; }

/* ---------- timeline: horizontal (.tl) and vertical (.tl.tlv, the e-mail rail) ---------- */
.tlctl { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.tl { display: flex; overflow-x: auto; scroll-behavior: smooth; padding: 18px 16px 16px; flex: 1; align-items: flex-start; }
.tln { all: unset; flex: none; width: 150px; cursor: pointer; box-sizing: border-box; padding-right: 12px; }
.tln .dr { height: 26px; display: flex; align-items: center; position: relative; }
.tln .dr::after { content: ""; position: absolute; left: 0; right: -12px; top: 50%; height: 1px; background: var(--border2); }
.tln:last-child .dr::after { right: auto; width: 30px; }
.tln .dot { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--faint);
  box-shadow: 0 0 0 5px var(--panel); }
.tln.in .dot { width: 18px; height: 18px; background: var(--muted); }
.tln.latest .dot { width: 24px; height: 24px; background: var(--ink); }
.tln.bad .dot { background: var(--bad); }
.tln.draft .dot { background: var(--panel); box-shadow: 0 0 0 5px var(--panel), inset 0 0 0 1.5px var(--faint); }
.tln .td { display: block; font-size: 11px; color: var(--faint); margin-top: 9px; }
.tln .tt { display: block; font-size: 12.5px; color: var(--ink); margin-top: 3px; line-height: 1.3; min-height: 33px; }
.tln .tp { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.tln.bad .tt { color: var(--bad); }
.tln:hover .tt { text-decoration: underline; text-underline-offset: 2px; }
.tln.new { animation: tlnew .6s ease; }
.tln .aimk { vertical-align: -2px; margin-right: 5px; color: var(--good); }
.tlfree .tl { padding: 6px 0 10px; cursor: grab; user-select: none; }
.tlfree .tln .dot { box-shadow: 0 0 0 5px var(--bg); }
.tl.tlv { display: block; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 24px; cursor: default; user-select: auto; }
.tlv .tln { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; width: 100%; padding: 0 0 16px; position: relative; }
.tlv .tln .dr { grid-row: 1 / span 3; height: auto; display: flex; justify-content: center; align-items: flex-start; padding-top: 2px; }
.tlv .tln .dr::after { left: 50%; right: auto; top: 14px; bottom: -18px; width: 1px; height: auto; transform: translateX(-.5px);
  background: var(--faint); opacity: .4; }
.tlv .tln:last-child .dr::after { display: none; }
.tlv .tln .dot { box-shadow: 0 0 0 4px var(--panel); }
.tlv .tln.in .dot { width: 14px; height: 14px; }
.tlv .tln.latest .dot { width: 16px; height: 16px; }
.tlv .tln .td { margin-top: 0; grid-column: 2; }
.tlv .tln .tt { min-height: 0; grid-column: 2; margin-top: 2px; }
.tlv .tln .tp { grid-column: 2; margin-top: 3px; font-weight: 500; font-size: 11.5px; }
.tlv .tln.draft .dot { background: var(--ink); box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px rgba(0, 0, 0, .08); }
.tlv .tln.draft .tt::after { content: "Draft"; margin-left: 7px; font-size: 10px; font-weight: 600; color: var(--good);
  border: 1px solid currentColor; border-radius: 999px; padding: 0 6px; vertical-align: 1px; }
.tlv .tln.new { animation: tlnewv .6s ease; }

/* ---------- side panes, drawers, overlay, dialog, toast ---------- */
.prov, .prev { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, calc(92vw / var(--wf-zoom, 1))); background: var(--panel);
  border-left: 1px solid var(--border2); padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(102%); transition: transform .22s ease; z-index: 20; overflow-y: auto; box-shadow: var(--wf-shadow-sheet); }
.prev { width: min(560px, calc(94vw / var(--wf-zoom, 1))); z-index: 18; }
.prov.on, .prev.on { transform: none; }
.prov h3, .prev h3 { font-size: 14px; margin: 0 0 2px; }
.prov .sub { margin-bottom: 12px; }
.prov table, .prev table { min-width: 0; }
.prev table { margin-top: 10px; }
.prov .x, .prev .x { all: unset; float: right; cursor: pointer; color: var(--faint); font-size: 16px; padding: 2px 6px; }
.prev tr.tot td { font-weight: 700; border-top: 2px solid var(--ink); }
.tabchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tabchips span { font-size: 11px; font-family: var(--mono); color: var(--muted); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 8px; }
.tabchips span.on { color: var(--ink); border-color: var(--ink); }
.srcover { position: fixed; inset: 0; background: var(--wf-overlay); z-index: 60; }
.csdrawer, .srcpanel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, calc(94vw / var(--wf-zoom, 1))); z-index: 61; padding: 16px 18px 20px;
  overflow: auto; animation: srcin .16s ease; }
.csdrawer { background: var(--bg); box-shadow: -14px 0 44px rgba(0, 0, 0, .14); }
.csdrawer .panel { margin-bottom: 12px; }
.srcpanel { width: min(420px, calc(94vw / var(--wf-zoom, 1))); background: var(--panel); border-left: 1px solid var(--border); box-shadow: var(--wf-shadow-drawer); }
.cstop { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 14px; }
.cstop b { display: block; font-size: 15px; }
.cstop span { font-size: 12px; color: var(--faint); }
.srctop { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; margin-bottom: 10px; font-size: 14px; }
.srclab { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); font-weight: 600; margin: 16px 0 8px; }
.ematt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px;
  font-size: 12.5px; color: var(--muted); background: var(--panel2); }
.ematt svg { width: 22px; height: 27px; flex: none; }
.srcbtns { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.mcdlg { border: 0; border-radius: 20px; padding: 36px; max-width: 500px; width: calc(100% - 40px); background: var(--panel);
  color: var(--ink); box-shadow: var(--wf-shadow-dialog); }
.mcdlg::backdrop { background: var(--wf-backdrop); backdrop-filter: blur(3px); }
.mcclose { all: unset; cursor: pointer; position: absolute; right: 16px; top: 12px; font-size: 22px; color: var(--muted); }
.mcdlg h2 { font-size: 25px; font-weight: 500; letter-spacing: -.6px; line-height: 1.3; margin: 14px 0; }
.mcdlg p { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0 0 16px; }
.mcdlg dl { display: grid; grid-template-columns: 100px 1fr; gap: 12px; font-size: 13px; margin: 0 0 22px; }
.mcdlg dt { color: var(--faint); }
.mcdlg dd { margin: 0; }
.mcdlg label { display: block; font-size: 12.5px; margin: 14px 0; color: var(--muted); }
.mcdlg input, .mcdlg textarea, .mcdlg select { display: block; width: 100%; margin-top: 7px; padding: 10px 12px;
  border: 1px solid var(--border2); border-radius: 9px; background: var(--panel); color: var(--ink); font: inherit; }
.mcdlg .mcbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.mceye { font-size: 10px; letter-spacing: 1.6px; color: var(--faint); font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(8px);
  background: var(--wf-toast); color: var(--wf-toast-ink); border-radius: 10px; padding: 10px 16px; font-size: 13px; opacity: 0;
  pointer-events: none; transition: all .2s ease; z-index: 30; box-shadow: var(--wf-shadow-toast); max-width: calc(calc(100vw / var(--wf-zoom, 1)) - 32px); }
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ---------- Ask Sam: the glass composer and the chat (her .fab-send and .send are .ask-go here) ---------- */
.fab-card { background: var(--wf-glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--wf-glass-line); border-radius: 20px; padding: 11px 10px 10px 16px;
  box-shadow: 0 0 0 5px rgba(20, 20, 20, .025), 0 2px 6px rgba(0, 0, 0, .05), 0 18px 50px rgba(0, 0, 0, .13);
  animation: fabin .22s cubic-bezier(.2, .8, .2, 1); }
[data-theme="dark"] .fab-card { box-shadow: 0 0 0 5px rgba(255, 255, 255, .03), 0 18px 50px rgba(0, 0, 0, .5); }
.fab-ctx { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--faint); margin: 0 0 4px; letter-spacing: .01em; }
.fab-row { display: flex; gap: 10px; align-items: center; }
.fab-row input { all: unset; flex: 1; min-width: 0; font-size: 15px; color: var(--ink); padding: 6px 0; }
.fab-row input::placeholder { color: var(--faint); }
.ask-go { all: unset; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--btn); color: var(--btn-ink);
  display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; transition: transform .12s ease; }
[data-theme="dark"] .ask-go { background: var(--ink); color: #111111; }
.ask-go:hover { transform: scale(1.06); }
.ask-go[disabled] { opacity: .45; cursor: default; transform: none; }
.fab-sugs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.fab-sug { all: unset; background: var(--wf-glass-pill); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 999px; padding: 6px 14px; font-size: 12px; color: var(--muted); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .08); }
.fab-sug:hover { background: var(--panel); color: var(--ink); }
.msg { border-radius: 12px; padding: 8px 12px; font-size: 13px; margin: 0 0 8px; line-height: 1.45; width: fit-content; max-width: 88%; }
.msg.me { margin-left: auto; background: var(--wf-chat-me); color: var(--wf-chat-me-ink); border-bottom-right-radius: 4px; }
.msg.sam { background: none; color: var(--ink); padding: 0 2px; max-width: 100%; border-radius: 0; font-size: 13.5px;
  line-height: 1.6; margin: 0 0 10px; }
.msg.sam b { color: var(--ink); font-weight: 600; }
.cs-empty { color: var(--faint); font-size: 12.5px; padding: 6px 0 10px; }

/* ---------- file tiles, drop zone ---------- */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 8px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); }
.ftile { all: unset; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 10px; border-radius: 10px;
  cursor: pointer; text-align: center; }
.ftile:hover { background: var(--panel2); }
.ftile .fn { font-size: 11.5px; color: var(--muted); line-height: 1.35; max-width: 118px; word-break: break-all; }
.ftile.fq { opacity: .45; cursor: default; }
.ftile.chk { position: relative; overflow: hidden; background: var(--panel2); cursor: default; }
.ftile.chk::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-size: 250% 100%;
  background-image: linear-gradient(100deg, transparent 30%, var(--wf-shimmer) 50%, transparent 70%); animation: ftshim 1.3s linear infinite; }
.ftile .frs { font-size: 10.5px; line-height: 1.35; max-width: 118px; min-height: 28px; }
.ftile.vin .fchip { animation: fvin .35s ease; }
.ftile .fsrc { font-size: 10.5px; color: var(--faint); }
.dropz { border: 1px dashed var(--border2); border-radius: 11px; padding: 10px 14px; display: flex; align-items: center; gap: 12px;
  color: var(--muted); transition: border-color .15s ease, box-shadow .15s ease; }
.dropz:hover { border-color: var(--faint); box-shadow: 0 0 0 3px rgba(20, 20, 20, .03); }
.dropz b { font-size: 12.5px; color: var(--ink); font-weight: 600; display: block; line-height: 1.3; }
.dropz .fmt { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }

/* ---------- paper documents ---------- */
.docwrap { padding: 28px 0; }
.paper { max-width: 720px; margin: 0 auto; background: var(--panel); border: none; border-radius: 3px; padding: 34px 40px 30px;
  min-width: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 10px 30px rgba(0, 0, 0, .07); }
[data-theme="dark"] .paper { border: 1px solid var(--wf-panel-line); }
.paper table { min-width: 0; width: 100%; }
.paper h3 { font-size: 16px; font-weight: 500; line-height: 1.3; }
.dochead { display: flex; align-items: flex-start; gap: 12px; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 16px; }
.dochead .co { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.dochead h3 { font-size: 23px; font-weight: 500; letter-spacing: -.7px; margin: 2px 0 1px; }
.dochead .per { font-size: 12.5px; color: var(--muted); }
.docfoot { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--faint);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.docback { margin-bottom: 14px; }
.emptydoc { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 14px; }
.emptydoc b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.mcempty { grid-column: 1 / -1; padding: 50px; text-align: center; color: var(--faint); }

/* ---------- small helpers for what Trang wrote inline (CSP: no style attributes) ---------- */
.mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt12 { margin-top: 12px; } .mt14 { margin-top: 14px; }
.t-faint { color: var(--faint); } .t-muted { color: var(--muted); } .t-good { color: var(--good); }
.t-warn { color: var(--warn); } .t-bad { color: var(--bad); }
.b500 { font-weight: 500; } .b600 { font-weight: 600; } .b700 { font-weight: 700; }
.cell-note { display: block; color: var(--faint); font-size: 11.5px; }
.cell-note.warn { color: var(--warn); }
.hstack8 { display: flex; gap: 8px; align-items: center; }
.hwrap10 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.is-click { cursor: pointer; }

/* ---------- motion ---------- */
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
@keyframes srcin { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cpin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes fabin { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sugin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tlnew { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tlnewv { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes fvin { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ftshim { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes arping { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes arsheen { to { background-position: -200% 0; } }
@keyframes arspin { to { transform: rotate(360deg); } }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 2px var(--ink), 0 8px 24px rgba(0, 0, 0, .08); } 100% { box-shadow: 0 0 0 0 transparent; } }
.flash { animation: flash 1.6s ease; }
@media (prefers-reduced-motion: reduce) {
  .prov, .prev { transition: none; }
}

/* ---------- narrower screens ---------- */
@media (max-width: 860px) { .outs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .intop { grid-template-columns: minmax(0, 1fr); } .ctrsteps { columns: 1; } }
@media (max-width: 800px) {
  .mt-toolbar { grid-template-columns: minmax(0, 1fr); }
  .mt-finder, .mt-filters .mt-input { width: 100%; }
  .mt-review { margin-left: 0; }
  .mt-legend span { min-width: 0; }
}
@media (max-width: 760px) {
  .ckdetail { padding-left: 16px; }
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .csign { justify-self: center; }
}
@media (max-width: 640px) {
  .paper { padding: 22px 18px; }
  .docwrap { padding: 16px 8px; }
  .cfgrow { flex-wrap: wrap; }
  .cfgrow > span:first-child, .cfgrow .lb { width: auto; flex: 1 1 100%; }
}

/* ---------- keyboard focus (a recorded deviation: Trang has none; Sam keeps a visible ring) ---------- */
:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 2px !important; }