/* WykonOS — Kreska design language, translated from WykonOS Prototype.dc.html.
   Values are the design's own; do not "normalize" them. Dark is the designed
   theme; light derives via light-dark(); OLED = true black canvas on narrow. */

:root {
  color-scheme: dark;
  /* paper / ink */
  --canvas: light-dark(#F2EFE8, #131110);
  --rail-bg: light-dark(#EBE7DE, #0E0D0C);
  --ink: light-dark(#26231F, #EDE9E1);
  --ink-soft: light-dark(#3D382F, #D8D2C7);
  --muted: light-dark(#6E675C, #A79F92);
  --faint: light-dark(#8A8272, #7E7869);
  --ghost: light-dark(#A69D8C, #5C574E);
  /* the one brass accent */
  --brass: light-dark(#8F7440, #C9A96A);
  --brass-border: light-dark(rgba(143,116,64,.5), rgba(201,169,106,.45));
  --brass-wash: light-dark(rgba(143,116,64,.07), rgba(201,169,106,.08));
  --brass-fill: light-dark(rgba(143,116,64,.2), rgba(201,169,106,.25));
  /* semantic */
  --ember: light-dark(#B06E3F, #E2A377);
  --ember-glow: light-dark(rgba(176,110,63,.4), rgba(226,163,119,.5));
  --rust: light-dark(#A2543F, #C98F82);
  --rust-border: light-dark(rgba(162,84,63,.4), rgba(201,143,130,.4));
  --moss: light-dark(#4E7D46, #95B98F);
  --add-ink: light-dark(#3E6C38, #B9CEB4);
  --add-bg: light-dark(rgba(78,125,70,.07), rgba(149,185,143,.09));
  --add-hl: light-dark(rgba(78,125,70,.16), rgba(149,185,143,.26));
  --del-ink: light-dark(#8F4A37, #D6ACA2);
  --del-bg: light-dark(rgba(162,84,63,.06), rgba(201,143,130,.09));
  --del-hl: light-dark(rgba(162,84,63,.16), rgba(201,143,130,.26));
  /* surfaces */
  --card: light-dark(#FBF9F4, #1B1917);
  --card-border: light-dark(rgba(38,35,31,.12), rgba(237,233,225,.10));
  --card-inset: light-dark(rgba(255,255,255,.85), rgba(255,255,255,.06));
  --well: light-dark(#F2EFE8, #131110);
  --hairline: light-dark(rgba(38,35,31,.25), rgba(237,233,225,.22));
  --hairline-2: light-dark(rgba(38,35,31,.10), rgba(237,233,225,.09));
  --rule: light-dark(rgba(38,35,31,.20), rgba(237,233,225,.18));
  --chip-border: light-dark(rgba(38,35,31,.18), rgba(237,233,225,.16));
  --dot-idle: light-dark(rgba(38,35,31,.35), rgba(237,233,225,.35));
  /* type */
  --serif: ui-serif, 'New York', Georgia, serif;
  --mono: ui-monospace, Menlo, monospace;
}
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"], [data-theme="oled"] { color-scheme: dark; }

html { background: #0A0908; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--canvas);
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  font-size: 16px; /* rem base; user scaling honored — no clamps */
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}
/* OLED: true black canvas on the phone layout only (design decision) */
@media (max-width: 899.98px) {
  body[data-theme="oled"] { background: #000; }
  body[data-theme="oled"] .canvas { background: #000; }
}
a { color: #C9A96A; } a:hover { color: #E0C489; }
button { font: inherit; cursor: pointer; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes emberPulse { from { opacity: .45; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes stampIn { 0% { transform: scale(1.5); opacity: 0; } 60% { transform: scale(.96); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) { .rm-still { animation: none !important; } }

.canvas { min-height: 100dvh; display: flex; justify-content: center; background: var(--canvas); }

/* ── rail (≥900px) ─────────────────────────────────────────── */
.rail {
  flex: none; width: 216px; box-sizing: border-box; position: sticky; top: 0;
  align-self: flex-start; height: 100dvh; background: var(--rail-bg);
  border-right: 1px solid var(--hairline-2);
  padding: 26px 18px 20px; display: none; flex-direction: column;
}
.rail .brand { font-family: var(--serif); font-size: 19px; font-weight: 500; }
.rail .brand-sub { margin-top: 3px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; color: var(--faint); }
.rail nav { margin-top: 24px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.rail nav .item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--muted); }
.rail nav .item[aria-current="page"] {
  color: var(--ink); background: light-dark(#FBF9F4, #1B1917);
  box-shadow: inset 0 1px 0 light-dark(rgba(255,255,255,.8), rgba(255,255,255,.05));
}
.rail .pend { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.rail .pend .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.rail .pend .n { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.rail .agents-label { margin-top: 30px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; color: var(--faint); }
.rail .agents { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; font-size: 12.5px; }
.rail .agent { display: flex; align-items: center; gap: 9px; }
.rail .agent .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .agent .st { margin-left: auto; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.rail .agent .st.hot { color: var(--ember); } .rail .agent .st.bad { color: var(--rust); }
.rail .foot { margin-top: auto; font-family: var(--mono); font-size: 9.5px; line-height: 1.8; color: var(--faint); }
.adot { flex: none; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.adot.done { border: 1px solid light-dark(rgba(38,35,31,.4), rgba(237,233,225,.4)); }
.adot.working { background: var(--dot-idle); }
.adot.waiting { background: var(--ember); box-shadow: 0 0 8px light-dark(rgba(176,110,63,.35), rgba(226,163,119,.5)); }
.adot.attention { background: var(--rust); }
.adot.idle { border: 1px dashed var(--dot-idle); }

/* ── main column ───────────────────────────────────────────── */
.main {
  width: 100%; max-width: 430px; min-height: 100dvh; box-sizing: border-box;
  padding: 28px 24px 40px;
  padding-top: max(28px, env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: 0;
}
@media (min-width: 900px) {
  .rail { display: flex; }
  .main { max-width: 1000px; flex-direction: row; gap: 48px; }
  .pane { flex: 1; min-width: 0; display: flex; flex-direction: column; }
}
.pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ── masthead ──────────────────────────────────────────────── */
.masthead { text-align: center; }
.masthead .name { font-size: 10.5px; letter-spacing: .24em; font-weight: 500; color: var(--muted); }
.masthead .date { margin-top: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.masthead .rule1 { margin-top: 12px; height: 1px; background: var(--hairline); }
.masthead .rule2 { margin-top: 3px; height: 1px; background: var(--hairline-2); }

/* ── brief ─────────────────────────────────────────────────── */
.top { position: relative; margin-top: 26px; }
.ember {
  position: absolute; top: -34px; left: -38px; width: 150px; height: 150px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(226,163,119,.20), transparent 68%);
  animation: emberPulse 7s ease-in-out infinite alternate;
}
h1.topline {
  position: relative; margin: 0; outline: none;
  font-family: var(--serif); font-size: 33px; font-weight: 400;
  line-height: 1.22; letter-spacing: -0.004em; text-wrap: balance;
}
.top .sub { position: relative; margin: 12px 0 0; font-size: 14.5px; color: var(--muted); }

.section { margin-top: 30px; }
.section > .label { font-size: 10px; letter-spacing: .2em; font-weight: 500; color: var(--muted); }
.docket-list { margin-top: 14px; border-left: 1px solid var(--rule); padding-left: 18px; display: flex; flex-direction: column; gap: 24px; }
.docket-item {
  display: block; width: calc(100% + 20px); box-sizing: border-box; text-align: left;
  background: transparent; border: none; padding: 8px 10px; margin: -8px -10px;
  border-radius: 10px;
}
.docket-item.sel { background: light-dark(rgba(38,35,31,.06), #1B1917); }
.docket-item .row { display: flex; gap: 12px; align-items: center; }
.docket-item .idx { font-family: var(--mono); font-size: 11px; color: var(--brass); }
.docket-item .tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; color: var(--faint); }
.docket-item .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember-glow); margin-left: auto; }
.docket-item .title { display: block; margin-top: 7px; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.28; }
.docket-item .meta { display: block; margin-top: 7px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }

.decided-list { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.decided-item { display: flex; gap: 12px; align-items: baseline; }
.decided-item .idx { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.decided-item .t { min-width: 0; font-size: 14px; color: var(--muted); }
.decided-item .stamp { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; white-space: nowrap; }

.alldone { margin-top: 44px; text-align: center; }
.alldone .t { font-family: var(--serif); font-style: italic; font-size: 26px; }
.alldone .s { margin-top: 6px; font-size: 12.5px; color: var(--faint); }

.feed-item { margin-top: 10px; display: flex; justify-content: space-between; gap: 14px; }
.feed-item .t { font-family: var(--serif); font-size: 16px; line-height: 1.4; color: var(--ink-soft); }
.feed-item .at { font-family: var(--mono); font-size: 10px; color: var(--faint); padding-top: 4px; }

.agents-line { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.agents-line .dots { display: flex; gap: 6px; }
.agents-line .d { width: 6px; height: 6px; border-radius: 50%; background: light-dark(rgba(38,35,31,.30), rgba(237,233,225,.32)); }
.agents-line .d.bad { background: var(--rust); }
.agents-line .t { font-size: 12.5px; color: var(--muted); }

.brief-foot { margin-top: auto; padding-top: 36px; text-align: center; }
.brief-foot .rule { width: 64px; height: 1px; background: var(--hairline); margin: 0 auto; }
.brief-foot .quiet { margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); }
.footer-controls { margin-top: 16px; display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.footer-controls button {
  background: none; border: none; padding: 6px 10px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--ghost);
  min-height: 32px;
}
.footer-controls button[aria-pressed="true"] { color: var(--brass); }

/* ── decision card ─────────────────────────────────────────── */
.case-top { display: flex; align-items: center; gap: 12px; min-height: 36px; }
.back { background: none; border: none; padding: 8px 10px 8px 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13.5px; }
.back .chev { font-size: 17px; line-height: 1; }
.case-eyebrow { margin-left: auto; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--faint); }
h1.case-title { margin: 18px 0 0; outline: none; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: -0.004em; text-wrap: balance; }
.consequence { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.chips { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--chip-border); color: var(--muted); }
.chip.warn { border-color: var(--rust-border); color: var(--rust); }

.evidence { margin-top: 22px; background: var(--card); border: 1px solid var(--card-border); box-shadow: inset 0 1px 0 var(--card-inset); border-radius: 12px; overflow: hidden; }
.evidence + .evidence { margin-top: 12px; }
.evidence .head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 16px 10px; }
.evidence .head .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--faint); }
.evidence .head .stat { font-family: var(--mono); font-size: 10.5px; }
.evidence .body { border-top: 1px solid var(--hairline-2); padding: 10px 16px 12px; }
.evidence.pad { padding: 14px 16px; }
.evidence.pad .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--faint); }

.diff { font-family: var(--mono); font-size: 11.5px; line-height: 1.75; overflow-wrap: anywhere; }
.diff .ln { display: flex; gap: 10px; border-radius: 4px; padding: 0 6px; margin: 0 -6px; }
.diff .g { flex: none; width: 10px; }
.diff .add { background: var(--add-bg); } .diff .add, .diff .add .g { color: var(--add-ink); }
.diff .del { background: var(--del-bg); } .diff .del, .diff .del .g { color: var(--del-ink); }
.diff .meta, .diff .meta .g { color: var(--faint); }
.diff .ctx, .diff .ctx .g { color: light-dark(#5C574E, #A79F92); }
.diff .hl { border-radius: 3px; padding: 1px 3px; }
.diff .add .hl { background: var(--add-hl); } .diff .del .hl { background: var(--del-hl); }

.linkish { margin-top: 8px; background: none; border: none; padding: 6px 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--brass); min-height: 32px; }
.well { margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: var(--well); font-family: var(--mono); font-size: 10.5px; line-height: 1.8; color: light-dark(#5C574E, #A79F92); }
.well.serif { font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--ink-soft); padding: 12px 14px; }
.well.serif .ref { display: block; margin-top: 7px; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.well.serif .hl { background: light-dark(rgba(176,110,63,.18), rgba(226,163,119,.22)); border-radius: 3px; padding: 1px 3px; }

.checkline { margin-top: 9px; display: flex; align-items: center; gap: 9px; }
.checkline + .checkline { margin-top: 7px; }
.checkline .ring { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass); font-size: 9px; }
.checkline .t { font-size: 13.5px; line-height: 1.45; }

.claim-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.claim { padding: 10px 12px; border-radius: 8px; background: var(--well); }
.claim .lab { font-size: 11px; color: var(--faint); }
.claim .val { margin-top: 5px; font-family: var(--mono); font-size: 15px; }
.claim .val.bad { color: var(--rust); } .claim .val.good { color: var(--moss); }

.costline { margin-top: 12px; display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px; }
.costline .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--faint); }
.costline .val { font-family: var(--mono); font-size: 12px; }

/* verdict controls */
.verdict { margin-top: 26px; padding-bottom: 8px; }
.hold-btn {
  position: relative; overflow: hidden; width: 100%; min-height: 58px; border-radius: 14px;
  border: 1px solid var(--brass-border); background: var(--brass-wash); color: var(--ink);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.hold-btn .fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; background: var(--brass-fill); }
.hold-btn .inner { position: relative; display: block; padding: 10px 16px 11px; text-align: center; }
.hold-btn .big { display: block; font-size: 15.5px; font-weight: 600; }
.hold-btn .hint { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.verdict-row { margin-top: 10px; display: flex; gap: 10px; }
.reject-btn { flex: 1; min-height: 46px; border-radius: 12px; border: 1px solid var(--chip-border); background: none; font-size: 13.5px; }
.later-btn { flex: none; padding: 0 18px; min-height: 46px; border-radius: 12px; border: none; background: none; color: var(--faint); font-size: 13px; }
.confirm-box { margin-top: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rust-border); }
.confirm-box .q { font-size: 13.5px; line-height: 1.45; }
.confirm-box .row { margin-top: 10px; display: flex; gap: 10px; }
.confirm-box .yes { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid light-dark(rgba(162,84,63,.5), rgba(201,143,130,.5)); background: none; color: var(--rust); font-size: 13.5px; font-weight: 600; }
.confirm-box .no { flex: 1; min-height: 44px; border-radius: 10px; border: 1px solid var(--chip-border); background: none; font-size: 13.5px; }
.stamp-box { min-height: 58px; display: flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid var(--brass); }
.stamp-box.muted { border-color: var(--muted); }
.stamp-inner { display: flex; align-items: center; gap: 10px; animation: stampIn 420ms cubic-bezier(.2,.9,.3,1.35) both; }
.stamp-inner .ring { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
.stamp-inner .word { font-family: var(--serif); font-style: italic; font-size: 20px; }
.stamp-box .stamp-inner { color: var(--brass); } .stamp-box.muted .stamp-inner { color: var(--muted); }
.readonly-note { margin-top: 26px; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--chip-border); font-size: 13px; line-height: 1.5; color: var(--muted); }
.readonly-note code { font-family: var(--mono); font-size: 11.5px; color: var(--brass); overflow-wrap: anywhere; }