/* KOPIARD brand devices -- direction C XEROX. Shared by landing (paper) and app (toner). */
:root{
  --lime:#B8FF2C;
  --sans:"Helvetica Neue",Helvetica,Arial,"Inter",sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Courier New",monospace;
  --cm:14px;
}
/* PAPER surface (landing): ink on warm paper. Lime is a FILL only here (never text). */
:root,html[data-surface="paper"]{
  --bg:#F6F5F0; --bg2:#EDEBE2; --ink:#111110; --ink2:#3B3A36; --dim:#4C4A44;
  --g1:#3B3A36; --g2:#55534C; --g3:#6B6860;
  --rule:#CFCDC4; --rule2:#111110; --led:#C42200; --ok:#2F5E00; --lamp:#B8FF2C; --lamp-ink:#111110;
  --field:#FFFFFF; --edge:#6B6860;
}
/* TONER surface (app): warm-tinted neutrals (no grey), lime is the lamp, red re-derived for dark */
html[data-surface="toner"]{
  --bg:#111110; --bg2:#181815; --ink:#F3F0E2; --ink2:#DCD9C6; --dim:#B9B5A0;
  --g1:#CFCCB8; --g2:#ABA895; --g3:#8F8C79;
  --rule:#2F2E27; --rule2:#46443A; --led:#FF3B1F; --ok:#B8FF2C; --lamp:#B8FF2C; --lamp-ink:#111110;
  --field:#0B0B0A; --edge:#7C7966;
}
*{box-sizing:border-box}
html{color-scheme:light}
html[data-surface="toner"]{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--sans);-webkit-text-size-adjust:100%}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit}
:focus-visible{outline:2px solid var(--lamp);outline-offset:2px}
html[data-surface="paper"] :focus-visible{outline-color:var(--ink)}

/* wordmark + K mark: original print + fainter second print */
.mark{display:inline-block;vertical-align:middle;flex:none}
.mark .k1{stroke:var(--ink)} .mark .k2{stroke:var(--ink);opacity:.32}
.word{font:800 1.7rem/1 var(--sans);letter-spacing:-.05em}

/* GENERATION LOSS: every copy a worse print than the one before */
.gen{display:inline-block}
.gen.g1{color:var(--g1);filter:contrast(1.15) blur(.25px)}
.gen.g2{color:var(--g2);filter:contrast(1.3) blur(.5px)}
.gen.g3{color:var(--g3);filter:contrast(1.5) blur(.8px)}
.c-g1{color:var(--g1)} .c-g2{color:var(--g2)} .c-g3{color:var(--g3)}

/* CROP MARKS (no extra DOM): corner brackets painted by 8 gradients */
.crop{position:relative;padding:18px;background-color:var(--bg);
  --m:var(--rule2);
  background-image:
   linear-gradient(var(--m),var(--m)),linear-gradient(var(--m),var(--m)),
   linear-gradient(var(--m),var(--m)),linear-gradient(var(--m),var(--m)),
   linear-gradient(var(--m),var(--m)),linear-gradient(var(--m),var(--m)),
   linear-gradient(var(--m),var(--m)),linear-gradient(var(--m),var(--m));
  background-repeat:no-repeat;
  background-size:var(--cm) 2px,2px var(--cm),var(--cm) 2px,2px var(--cm),var(--cm) 2px,2px var(--cm),var(--cm) 2px,2px var(--cm);
  background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
html[data-surface="toner"] .crop{--m:var(--ink2);background-color:var(--bg2)}

/* RULE: mono label with a hairline running to the edge */
.rule{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.rule::after{content:"";flex:1;border-top:1px solid var(--rule2)}
html[data-surface="toner"] .rule::after{border-color:var(--rule)}
.rule em{font-style:normal;color:var(--ink)}

/* STAMP: status marks, not pills (square, inked) */
.stamp{display:inline-block;font:700 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;border:2px solid currentColor;padding:.32em .5em;white-space:nowrap;transform:rotate(-1.2deg)}
.stamp.inv{background:var(--ink);color:var(--bg);border-color:var(--ink)}
html[data-surface="toner"] .stamp.inv{background:var(--lamp);color:var(--lamp-ink);border-color:var(--lamp)}
.stamp.halt{color:var(--led)}
.stamp.ok{color:var(--ok)}
.stamp.dim{color:var(--dim)}
.stamp.lock{color:var(--ink);border-style:dashed}

/* FIGURE numerals */
.fig{font:800 2.2rem/1 var(--sans);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.fig.mono{font:700 1.6rem/1 var(--mono);letter-spacing:-.04em}
.pos{color:var(--ok)} .neg{color:var(--led)}
html[data-surface="toner"] .pos{color:var(--lamp)}

/* COPY COUNTER: odometer digits */
.counter{display:inline-flex;gap:3px;vertical-align:middle}
.counter b{display:inline-block;min-width:1.35ch;text-align:center;background:var(--ink);color:var(--bg);font:700 1.25rem/1.25 var(--mono);padding:1px 6px;position:relative;overflow:hidden}
html[data-surface="toner"] .counter b{background:#F3F0E2;color:#111110}
.counter b.roll{animation:roll .4s steps(4) 1}
@keyframes roll{from{transform:translateY(-70%);opacity:.3}to{transform:none;opacity:1}}

/* SCAN BAR: beam is moved by JS (setInterval) ONLY when a trade is copied */
.scan{position:relative;height:46px;border:2px solid var(--ink);overflow:hidden;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(128,124,100,.16) 3px 4px)}
html[data-surface="toner"] .scan{border-color:var(--ink2)}
.scan .beam{position:absolute;top:0;bottom:0;left:-40px;width:36px;opacity:0;background:linear-gradient(90deg,transparent,var(--lime),transparent)}
html[data-surface="paper"] .scan .beam{mix-blend-mode:multiply}
.scan .lbl{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:600 .72rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* LED lamp (halt/loss) and ready lamp */
.led{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--led);margin-right:6px;vertical-align:middle}
.led.on{background:var(--lamp)}
html[data-surface="paper"] .led.on{background:var(--ok)}

/* PERIMETER gauge (from Sentinel): equity dot inside guard rings */
.perim{display:block;margin:0 auto;max-width:100%;height:auto}
.perim .ring-dd{stroke:var(--led);stroke-dasharray:3 5;fill:none;stroke-width:1.5}
.perim .ring-day{stroke:var(--ink2);fill:none;stroke-width:1.5}
.perim .axis{stroke:var(--rule2);stroke-width:1}
.perim .dot{fill:var(--lamp)} .perim .halo{fill:none;stroke:var(--lamp);opacity:.45}
.perim .dot.hot{fill:var(--led)} .perim .halo.hot{stroke:var(--led)}
.perim .tick{fill:none;stroke:var(--ink);stroke-width:2}
.perim text{font:600 9px var(--mono);letter-spacing:.06em}

/* buttons */
.btn{font:700 .8rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;background:var(--ink);color:var(--bg);border:0;padding:14px 20px 15px;cursor:pointer;position:relative;text-decoration:none;display:inline-block;margin-bottom:5px}
.btn::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:4px;background:var(--lime)}
html[data-surface="toner"] .btn{background:var(--lamp);color:var(--lamp-ink)}
html[data-surface="toner"] .btn::after{background:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:12px 18px 13px}
.btn.ghost::after{display:none}
html[data-surface="toner"] .btn.ghost{background:transparent;border-color:var(--edge);color:var(--ink)}
html[data-surface] .btn.danger{background:transparent;color:var(--led);border:2px solid var(--led)}
.btn.danger::after{display:none}
.btn.sm{padding:9px 12px 10px;font-size:.7rem;margin-bottom:0}
.btn.sm::after{display:none}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* fields */
label.f{display:block;font:600 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}
.in,select.in,textarea.in{width:100%;background:var(--field);color:var(--ink);border:1px solid var(--edge);border-radius:0;padding:10px;font:500 .9rem var(--mono);min-height:42px}
.in::placeholder{color:var(--dim);opacity:.85}
.row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.fg{margin:0 0 14px}
.hint{font:500 .72rem/1.4 var(--mono);color:var(--dim);margin:6px 0 0}
.err{color:var(--led);font:600 .8rem/1.4 var(--mono)}
.chk{display:flex;gap:10px;align-items:center;font:500 .8rem var(--mono);cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--lamp);margin:0}

/* tables */
table.t{width:100%;border-collapse:collapse;font:500 .78rem/1.2 var(--mono);font-variant-numeric:tabular-nums}
.t th{position:sticky;top:0;z-index:1;background:var(--bg2);text-align:left;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:9px 8px;border-bottom:1px solid var(--rule2);white-space:nowrap}
.t td{padding:8px;border-bottom:1px solid var(--rule);white-space:nowrap}
.t td.r,.t th.r{text-align:right}