/* Regia record + log surfaces (2026-09-27). Tokens only; no raw colors except the
   status tints composed from tokens with color-mix. Loaded after premium.css. */

/* ---------- icons (inline SVG from app/icons.py; replaces emoji) ---------- */
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
.wx-ico .ico { width: 30px; height: 30px; }
.wx-hi .ico { width: 18px; height: 18px; }
.ahead-ic .ico { width: 16px; height: 16px; color: var(--mut); }
.standing-line > .ico:first-child { color: var(--gold-ink); margin-right: 4px; }
.theme-btn .ico { width: 17px; height: 17px; }
.ap-mic .ico { width: 18px; height: 18px; }
.ico-rain, .ico-storm { color: var(--link); }
.ico-sun { color: var(--gold); }
.cm-badges .ico { width: 12px; height: 12px; margin-right: 1px; vertical-align: -2px; }
.cm-badges > span { margin-right: 4px; white-space: nowrap; }
.cm-star .ico { width: 10px; height: 10px; vertical-align: 0; }

/* ---------- record header ---------- */
.rec-hd { margin: 6px 0 14px; }
.rec-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-1); color: var(--mut); }
.rec-kind { font-family: var(--font-data); font-weight: 600; color: var(--tx); letter-spacing: .02em; }
.rec-spec { color: var(--mut); }
.rec-title { margin: 6px 0 2px; line-height: 1.15; }
.rec-superseded { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--radius); background: var(--warn-soft);
  color: var(--tx); font-size: var(--fs-1); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }

/* ---------- where it stands ---------- */
.rec-strip { display: grid; grid-template-columns: 1.1fr 1.6fr 1fr 1fr; gap: 0; margin: 0 0 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; border-left: 6px solid var(--mut); }
.rec-strip.is-closed { border-left-color: var(--ok); }
.rec-strip.is-open { border-left-color: var(--link); }
.rec-strip.is-ours { border-left-color: var(--gold); }
.rec-strip.is-overdue { border-left-color: var(--bad); }
.rec-strip.is-owed { border-left-color: var(--warn); }
.rs-cell { padding: 14px 16px; border-right: 1px solid var(--line); min-width: 0; }
.rs-cell:nth-child(4) { border-right: 0; }
.rs-k { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.rs-v { font-size: var(--fs-3); font-weight: 600; color: var(--tx); line-height: 1.3; overflow-wrap: anywhere; }
.rs-sub { font-size: var(--fs-1); color: var(--mut); margin-top: 3px; }
.rs-none { color: var(--mut); font-weight: 500; font-size: var(--fs-2); }
.rs-bad { color: var(--bad); font-weight: 600; }
.rs-src { grid-column: 1 / -1; padding: 8px 16px; font-size: 12px; color: var(--mut); background: var(--panel2);
  border-top: 1px solid var(--line); }
.tag-ours { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-soft); }

/* ---------- layout ---------- */
.rec-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.rec-main > .card, .rec-side > .card { margin-bottom: 16px; }
.rec-side { position: sticky; top: 12px; }

/* ---------- question / answer ---------- */
.rec-quote { margin: 6px 0 0; padding: 10px 14px; border-left: 3px solid var(--rule); background: var(--panel2);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--fs-2); line-height: 1.55; white-space: pre-line; }
.rec-answer + .rec-answer { margin-top: 12px; }
.ra-hd { font-size: var(--fs-1); color: var(--mut); }
.ra-hd .src.inl, .ver-meta .src { display: inline; }
.ra-comment { font-size: var(--fs-1); margin: 6px 0 0 14px; color: var(--tx); }
.hev-carry { font-size: 11.5px; color: var(--mut); margin-top: 4px; }

/* ---------- stages (file name says what it is) ---------- */
.stage { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  white-space: nowrap; background: var(--panel2); color: var(--mut); border: 1px solid var(--line); }
.stage-ok { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.stage-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.stage-bad { background: var(--bad-soft); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.stage-info { background: color-mix(in srgb, var(--link) 10%, var(--panel)); color: var(--link);
  border-color: color-mix(in srgb, var(--link) 25%, transparent); }

/* ---------- versions + ladder ---------- */
.ver { padding: 12px 0; border-top: 1px dashed var(--line); }
.ver:first-of-type { border-top: 0; padding-top: 4px; }
.ver-me { background: linear-gradient(90deg, var(--gold-soft), transparent 60%); margin: 0 -14px; padding-left: 14px; padding-right: 14px; border-radius: var(--radius); }
.ver-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ver-no { font-family: var(--font-data); font-weight: 700; }
.ver-title { font-weight: 600; }
.ver-meta { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ver-meta .src { display: inline; margin: 0; }
.ver-why { display: block; margin-top: 2px; }
.ladder { list-style: none; margin: 8px 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.rung { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 5px 0 5px 12px; font-size: var(--fs-1); }
.rung::before { content: ""; position: absolute; left: -20px; top: 12px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--rule); }
.rung-primary::before { background: var(--ok); border-color: var(--ok); }
.rung-date { font-family: var(--font-data); color: var(--mut); min-width: 86px; }
.rung-file { color: var(--link); text-decoration: none; overflow-wrap: anywhere; flex: 1 1 260px; min-width: 0; }
.rung-file:hover { text-decoration: underline; }
.rung-rev { color: var(--mut); font-style: italic; }
.rung .src { display: inline; margin: 0; }

/* ---------- history ---------- */
.hist-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.hf { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--mut); cursor: pointer; }
.hf.on { background: var(--tx); color: var(--panel); border-color: var(--tx); }
.hist { list-style: none; margin: 0; padding: 0; }
.hev { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.hev:first-child { border-top: 0; }
.hev[hidden] { display: none; }
.hev-date { font-family: var(--font-data); font-size: 12.5px; color: var(--mut); }
.hev-date a { color: inherit; text-decoration: none; }
.hev-date a:hover { color: var(--link); text-decoration: underline; }
.hev-time { display: block; font-size: 11px; color: var(--faint); }
.hev-hd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.hev-ver { font-family: var(--font-data); font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--panel2); color: var(--mut); border: 1px solid var(--line); }
.hev-change { font-size: var(--fs-1); color: var(--mut); margin-top: 3px; }
.hc-f { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-right: 4px; }
.hc-from { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--mut) 60%, transparent); }
.hc-to { color: var(--tx); font-weight: 600; }
.hev-q { font-size: var(--fs-1); }
.hev-text { margin: 4px 0 0; font-size: var(--fs-1); color: var(--tx); }
.hev-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.hev-file { font-size: 12px; padding: 2px 8px; border-radius: var(--radius); background: var(--panel2); border: 1px solid var(--line); color: var(--link); text-decoration: none; overflow-wrap: anywhere; }
.hev-src { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.hev-more summary { cursor: pointer; }
.lane-acc .hev-date { border-left: 3px solid var(--link); padding-left: 8px; }
.lane-file .hev-date { border-left: 3px solid var(--ok); padding-left: 8px; }
.lane-email .hev-date { border-left: 3px solid var(--gold); padding-left: 8px; }
.lane-note .hev-date { border-left: 3px dashed var(--gold); padding-left: 8px; }
.lane-truth .hev-date { border-left: 3px solid var(--rule); padding-left: 8px; }
.act-closed .hev-hd b, .act-answered .hev-hd b { color: var(--ok); }
.act-reopened .hev-hd b { color: var(--warn); }
.act-comment .hev-hd b { color: var(--tx); }

/* ---------- chain of custody ---------- */
.custody { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); }
.cu { position: relative; padding: 6px 0 8px 10px; }
.cu::before { content: ""; position: absolute; left: -21px; top: 11px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--rule); }
.cu-now::before { background: var(--link); border-color: var(--link); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 20%, transparent); }
.cu-ours .cu-who { color: var(--gold-ink); }
.cu-ours::before { border-color: var(--gold); }
.cu-now.cu-ours::before { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.cu-who { font-weight: 600; font-size: var(--fs-1); }
.cu-when { display: block; margin: 1px 0 0; }
.cu-src { display: block; margin: 0; text-decoration: none; }
.cu-src:hover { text-decoration: underline; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: var(--fs-1); }
.facts dt { color: var(--faint); }
.facts dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- logs ---------- */
.log-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.log-job { color: var(--mut); font-weight: 500; }
.log-switch, .log-shows { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--mut); text-decoration: none; }
.seg b { color: var(--tx); margin-left: 2px; }
.seg.on { background: var(--tx); color: var(--panel); border-color: var(--tx); }
.seg.on b { color: var(--panel); }
.log-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 12px 0; }
.log-jobs { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.log-q { margin-left: auto; min-width: 260px; }
.log-q input { width: 100%; }
.pchip.sm { font-size: 11px; padding: 1px 8px; }
table.log { width: 100%; border-collapse: collapse; font-size: var(--fs-1); }
table.log th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  padding: 8px 8px; border-bottom: 2px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 1; }
table.log td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* a <td class="src"> must stay a table cell: board.css makes .src display:block, which
   tore every date/file cell out of the grid (seen 2026-09-27 in the first log render) */
table.log td.src, table.log td.num { display: table-cell; margin: 0; font-size: 12px; }
table.log td.src { color: var(--mut); white-space: nowrap; font-family: var(--font-data); }
table.log td .src { display: inline; margin: 0; }
table.log tr:hover td { background: var(--panel2); }
table.log .num { text-align: right; font-variant-numeric: tabular-nums; }
.lg-no { font-family: var(--font-data); white-space: nowrap; }
.lg-vers { margin-left: 6px; font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: var(--panel2); color: var(--mut); border: 1px solid var(--line); }
.lg-title a { color: var(--tx); text-decoration: none; font-weight: 500; }
.lg-title a:hover { color: var(--link); text-decoration: underline; }
.lg-spec { font-family: var(--font-data); color: var(--mut); font-size: 12px; }
.lg-disp { font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.lg-late { font-size: 11.5px; color: var(--bad); font-weight: 600; }
.lg-ball { max-width: 280px; }
table.log b.hot { color: var(--bad); }
.lstat { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--panel2); color: var(--mut); }
.lstat-overdue { background: var(--bad-soft); color: var(--bad); }
.lstat-ours { background: var(--gold-soft); color: var(--gold-ink); }
.lstat-open { background: color-mix(in srgb, var(--link) 12%, var(--panel)); color: var(--link); }
.lstat-answered { background: var(--ok-soft); color: var(--ok); }
.lstat-required { background: var(--panel2); color: var(--mut); }
.lstat-closed { background: var(--ok-soft); color: var(--ok); }
.lstat-owed { background: var(--warn-soft); color: var(--warn); }
tr.lg-closed td { color: var(--mut); }
.log-foot { display: block; margin-top: 10px; }

/* ---------- job cards: the paper lane ---------- */
.jc-paper { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.jc-ours, .jc-owed, .jc-late { font-size: 11px; font-weight: 700; padding: 0 7px; border-radius: 999px; }
.jc-ours { background: var(--gold-soft); color: var(--gold-ink); }
.jc-owed { background: var(--warn-soft); color: var(--warn); }
.jc-late { background: var(--bad-soft); color: var(--bad); }
.jc-paper .src.inl { display: inline; margin: 0; }

/* ---------- the paper strip on job pages + home ---------- */
.paper-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 0 0 16px; }
.ps-tile { display: block; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel);
  text-decoration: none; color: var(--tx); box-shadow: var(--shadow); border-top: 4px solid var(--line); }
.ps-tile:hover { border-color: var(--rule); transform: translateY(-1px); }
.ps-tile b { display: block; font-size: 26px; line-height: 1.1; font-family: var(--font-display); }
.ps-tile span { font-size: var(--fs-1); color: var(--mut); }
.ps-bad { border-top-color: var(--bad); } .ps-bad b { color: var(--bad); }
.ps-ours { border-top-color: var(--gold); } .ps-ours b { color: var(--gold-ink); }
.ps-owed { border-top-color: var(--warn); } .ps-owed b { color: var(--warn); }
.ps-open { border-top-color: var(--link); }
.ps-req { border-top-color: var(--rule); }

/* ---------- who owes what ---------- */
.rs-cite { color: var(--mut); font-size: 12px; }
.rec-later { border-left: 5px solid var(--gold); margin: 0 0 16px; }
.rl-list { list-style: none; margin: 0; padding: 0; }
.rl-list li { padding: 7px 0; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.rl-list li:first-child { border-top: 0; }
.owes { border-left: 5px solid var(--link); }
.owes-ours { border-left-color: var(--gold); }
.owes-req { border-left-color: var(--rule); }
.owes > h3 { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.owes-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.owes-more > summary { cursor: pointer; font-size: 12.5px; color: var(--link); margin: 2px 0 6px; }

/* ---------- small screens ---------- */
@media (max-width: 980px) {
  .rec-grid { grid-template-columns: 1fr; }
  .rec-side { position: static; }
  .rec-strip { grid-template-columns: 1fr 1fr; }
  .rs-cell:nth-child(2) { border-right: 0; }
  .rs-cell:nth-child(1), .rs-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .rec-strip { grid-template-columns: 1fr; }
  .rs-cell { border-right: 0; border-bottom: 1px solid var(--line); }
  .hev { grid-template-columns: 1fr; gap: 4px; }
  .log-q { margin-left: 0; width: 100%; }
  table.log:not(.stack) th:nth-child(n+7), table.log:not(.stack) td:nth-child(n+7) { display: none; }
}
/* phone: a log row becomes a stacked card - number + title first, then where it stands,
   then the numbers, each labelled - instead of seven columns squeezed to 50px each */
table.log td.lg-mail { max-width: 230px; font-size: 12.5px; }
table.log td.lg-mail .inl { color: var(--faint); }
@media (max-width: 640px) {
  table.log.stack td.lg-mail { flex: 1 1 100%; max-width: none; }
  table.log.stack thead { display: none; }
  table.log.stack, table.log.stack tbody { display: block; }
  table.log.stack tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
    padding: 11px 2px; border-bottom: 1px solid var(--line); }
  table.log.stack td, table.log.stack td.src, table.log.stack td.num { display: block; border: 0; padding: 0;
    text-align: left; white-space: normal; }
  table.log.stack td.lg-title { flex: 1 1 100%; order: -1; font-size: var(--fs-2); }
  table.log.stack td.lg-title a { font-weight: 600; }
  table.log.stack td.lg-where { flex: 0 1 auto; }
  table.log.stack td.lg-ball { flex: 1 1 100%; max-width: none; font-size: 12.5px; }
  table.log.stack td.lg-where .lg-disp { display: inline; margin-left: 6px; }
  table.log.stack td[data-k]::before { content: attr(data-k) " "; font-family: var(--font-body, inherit);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
  table.log.stack tr:hover td { background: none; }
  table.log.stack td:empty { display: none; }
}