/* Nicrome Works — concept build for Nicrome Stainless. Design: yWeb */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  /* light palette — olive-biased neutrals drawn from the brand charcoal + lime */
  --ground:#F1F2EC; --surface:#FFFFFF; --surface-2:#E9EBE2; --surface-3:#F7F8F4;
  --ink:#1D2023; --ink-2:#565C62; --ink-3:#868C90;
  --line:#D9DCD2; --line-2:#C0C4B7;
  --brand:#A3C614; --brand-2:#8CAC0B; --brand-ink:#5C7500;
  --charcoal:#3E4044; --charcoal-2:#2B2D30;
  --ok:#17765F; --ok-bg:#E2F0EA;
  --warn:#A55F00; --warn-bg:#FBEEDB;
  --crit:#AE362E; --crit-bg:#FAE6E3;
  --info:#2A6386; --info-bg:#E3EEF5;
  --c-draw:#5C6FAE; --c-meas:#2A8C8C; --c-cut:#C08A14; --c-fab:#7FA219; --c-site:#B0603C; --c-del:#7A7E86;
  --shadow:0 1px 2px rgba(29,32,35,.06), 0 6px 18px -12px rgba(29,32,35,.25);
  --r:6px;
  --display:"Saira Condensed",ui-sans-serif,system-ui,"Arial Narrow",sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131518; --surface:#1B1E22; --surface-2:#23272C; --surface-3:#191C20;
    --ink:#E9EBE5; --ink-2:#A6ADB3; --ink-3:#7C838A;
    --line:#2E333A; --line-2:#3C434B;
    --brand:#B4D62B; --brand-2:#9CBD18; --brand-ink:#C4E24F;
    --ok:#4FBF9F; --ok-bg:#12302A;
    --warn:#DFA243; --warn-bg:#33270F;
    --crit:#E4756B; --crit-bg:#361D1A;
    --info:#6FAFD4; --info-bg:#14262F;
    --c-draw:#8C9CD8; --c-meas:#43B3B3; --c-cut:#D9A93B; --c-fab:#9FC634; --c-site:#D18863; --c-del:#9AA0A8;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px -14px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#131518; --surface:#1B1E22; --surface-2:#23272C; --surface-3:#191C20;
  --ink:#E9EBE5; --ink-2:#A6ADB3; --ink-3:#7C838A;
  --line:#2E333A; --line-2:#3C434B;
  --brand:#B4D62B; --brand-2:#9CBD18; --brand-ink:#C4E24F;
  --ok:#4FBF9F; --ok-bg:#12302A;
  --warn:#DFA243; --warn-bg:#33270F;
  --crit:#E4756B; --crit-bg:#361D1A;
  --info:#6FAFD4; --info-bg:#14262F;
  --c-draw:#8C9CD8; --c-meas:#43B3B3; --c-cut:#D9A93B; --c-fab:#9FC634; --c-site:#D18863; --c-del:#9AA0A8;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 22px -14px rgba(0,0,0,.8);
}

body{
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:600; letter-spacing:.01em; text-wrap:balance; line-height:1.12}
p{margin:0}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- shell ---------- */
.app{min-height:100vh; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--charcoal); color:#fff; padding:0 14px 0 0; border-bottom:1px solid var(--charcoal-2);
  position:sticky; top:0; z-index:40;
}
.brandmark{display:flex; align-items:stretch; align-self:stretch}
.brandmark .bm-txt{padding:11px 16px 11px 18px; display:flex; flex-direction:column; justify-content:center}
.bm-name{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.14em; line-height:1}
.bm-sub{font-family:var(--display); font-weight:500; font-size:10.5px; letter-spacing:.42em; color:#C9CCD0; line-height:1; margin-top:4px}
.brandmark .bm-block{width:26px; background:var(--brand)}
.topbar .sysname{font-family:var(--display); font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:#B9BDC2; padding-left:4px; border-left:1px solid #55585D; margin-left:2px}
.topbar .spacer{flex:1 1 40px}
.topbar .who{display:flex; align-items:center; gap:9px; font-size:12.5px; color:#C9CCD0}
.topbar .who .dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.tbtn{background:transparent; border:1px solid #55585D; color:#DDE0E3; padding:5px 10px; border-radius:var(--r); font-size:12px; cursor:pointer}
.tbtn:hover{border-color:var(--brand); color:#fff}

.body{display:grid; grid-template-columns:212px minmax(0,1fr); flex:1}
.rail{border-right:1px solid var(--line); background:var(--surface); padding:14px 10px 40px; position:sticky; top:49px; align-self:start; max-height:calc(100vh - 49px); overflow:auto}
.rail-lbl{font-family:var(--display); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); padding:12px 8px 6px}
.navitem{display:flex; align-items:center; gap:9px; width:100%; text-align:left; background:none; border:0; border-left:3px solid transparent;
  padding:8px 10px; cursor:pointer; color:var(--ink-2); font-size:13.5px; border-radius:0 var(--r) var(--r) 0}
.navitem:hover{background:var(--surface-2); color:var(--ink)}
.navitem[aria-current="true"]{background:var(--surface-2); border-left-color:var(--brand); color:var(--ink); font-weight:600}
.navitem .n{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.navicon{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}

.main{padding:22px 24px 90px; min-width:0}
@media (max-width:860px){
  .body{grid-template-columns:1fr}
  .rail{position:static; max-height:none; display:flex; gap:4px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:8px 10px}
  .rail-lbl{display:none}
  .navitem{width:auto; white-space:nowrap; border-left:0; border-bottom:3px solid transparent; border-radius:var(--r)}
  .navitem[aria-current="true"]{border-left:0; border-bottom-color:var(--brand)}
  .navitem .n{display:none}
  .main{padding:16px 16px 96px}
}

/* ---------- page furniture ---------- */
.page-head{margin-bottom:18px}
.eyebrow{font-family:var(--display); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--brand-ink); font-weight:600}
.page-head h1{font-size:30px; margin:3px 0 5px}
.lede{color:var(--ink-2); font-size:14.5px; max-width:68ch}
.section-h{display:flex; align-items:baseline; gap:10px; margin:26px 0 10px; flex-wrap:wrap}
.section-h h2{font-size:19px; letter-spacing:.02em}
.section-h .hint{font-size:12.5px; color:var(--ink-3)}

.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); min-width:0}
.panel-h{display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.panel-h h3{font-size:15px; letter-spacing:.03em}
.panel-h .sub{font-size:12px; color:var(--ink-3); margin-left:auto; font-family:var(--mono)}
.panel-b{padding:14px}
.panel-b.flush{padding:0}

.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; display:flex; flex-direction:column; gap:2px}
.tile .k{font-family:var(--display); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3)}
.tile .v{font-family:var(--display); font-size:27px; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1}
.tile .m{font-size:12px; color:var(--ink-2)}
.tile.accent{border-left:3px solid var(--brand)}
.tile.crit .v{color:var(--crit)} .tile.warn .v{color:var(--warn)} .tile.ok .v{color:var(--ok)}

/* ---------- tables ---------- */
.tw{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13px}
th{font-family:var(--display); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:600;
   text-align:left; padding:8px 10px; border-bottom:1px solid var(--line-2); white-space:nowrap; background:var(--surface)}
td{padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-3)}
td.num,th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
td.mono{font-family:var(--mono); font-size:12px}
.sub2{color:var(--ink-3); font-size:11.5px}
tr.clickable{cursor:pointer}

/* ---------- chips ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:2px 8px; border-radius:99px; border:1px solid var(--line-2); color:var(--ink-2); white-space:nowrap; font-weight:500}
.chip.ok{background:var(--ok-bg); color:var(--ok); border-color:transparent}
.chip.warn{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.chip.crit{background:var(--crit-bg); color:var(--crit); border-color:transparent}
.chip.info{background:var(--info-bg); color:var(--info); border-color:transparent}
.chip.brand{background:color-mix(in srgb,var(--brand) 22%, transparent); color:var(--brand-ink); border-color:transparent}
.chip .d{width:6px;height:6px;border-radius:50%;background:currentColor}

.flagrow{display:flex; gap:11px; padding:10px 13px; border-bottom:1px solid var(--line); align-items:flex-start}
.flagrow:last-child{border-bottom:0}
.flagrow .stripe{width:3px; align-self:stretch; border-radius:2px; background:var(--ink-3); flex:none}
.flagrow.crit .stripe{background:var(--crit)} .flagrow.warn .stripe{background:var(--warn)}
.flagrow.info .stripe{background:var(--info)} .flagrow.ok .stripe{background:var(--ok)}
.flagrow .ft{font-size:13px; font-weight:600}
.flagrow .fd{font-size:12.5px; color:var(--ink-2)}
.flagrow .fj{margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap}

/* ---------- bars ---------- */
.bar{height:8px; background:var(--surface-2); border-radius:99px; overflow:hidden; display:flex}
.bar span{display:block; height:100%}
.bar.thin{height:5px}
.legend{display:flex; flex-wrap:wrap; gap:10px 16px; font-size:12px; color:var(--ink-2); margin-top:9px}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:7px; background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  padding:6px 12px; border-radius:var(--r); font-size:13px; cursor:pointer; font-weight:500}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--brand); border-color:var(--brand-2); color:#1D2023; font-weight:600}
.btn.primary:hover{background:var(--brand-2)}
.btn.dark{background:var(--charcoal); border-color:var(--charcoal); color:#fff}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.sm{padding:4px 9px; font-size:12px}
.btnrow{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto}
.tab{background:none; border:0; border-bottom:2px solid transparent; padding:8px 12px; font-size:13px; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--brand); font-weight:600}

.field{display:flex; flex-direction:column; gap:4px}
.field label{font-family:var(--display); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
input,select{font:inherit; font-size:13px; padding:6px 9px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); color:var(--ink); min-width:0}

.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:13px}
.kv dt{font-family:var(--display); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding-top:2px}
.kv dd{margin:0}

.note{background:var(--surface-2); border-left:3px solid var(--brand); padding:10px 13px; border-radius:0 var(--r) var(--r) 0; font-size:13px; color:var(--ink-2)}
.note b{color:var(--ink)}

/* ---------- sheet / nest visual ---------- */
.nest{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:16px; align-items:start}
@media (max-width:760px){.nest{grid-template-columns:1fr}}
.sheetsvg{width:100%; height:auto; display:block; background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r)}

/* ---------- phone ---------- */
.phonewrap{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start}
.phone{width:312px; flex:none; background:var(--charcoal); border-radius:26px; padding:9px; box-shadow:var(--shadow)}
.phone-screen{background:var(--surface); border-radius:19px; overflow:hidden; min-height:540px; display:flex; flex-direction:column}
.phone-bar{background:var(--charcoal-2); color:#E6E8EA; font-size:10.5px; padding:6px 14px; display:flex; justify-content:space-between; font-family:var(--mono)}
.phone-h{padding:11px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px}
.phone-h .t{font-family:var(--display); font-size:15px; font-weight:600}
.phone-b{padding:12px 14px; flex:1; overflow:auto; display:flex; flex-direction:column; gap:10px}
.scanbox{border:2px dashed var(--line-2); border-radius:var(--r); padding:16px; text-align:center; color:var(--ink-3); font-size:12.5px}
.lineitem{border:1px solid var(--line); border-radius:var(--r); padding:9px 10px; display:flex; gap:9px; align-items:center}
.lineitem .li-t{font-size:12.5px; font-weight:600; line-height:1.25}
.lineitem .li-s{font-size:11.5px; color:var(--ink-3); font-family:var(--mono)}
.lineitem .li-q{margin-left:auto; font-family:var(--mono); font-size:13px; font-weight:600; white-space:nowrap}
.lineitem.done{border-color:var(--ok); background:var(--ok-bg)}

/* ---------- kiosk ---------- */
.kiosk{background:var(--charcoal); border-radius:10px; padding:18px; color:#E9EBE5; max-width:330px}
.kiosk .disp{background:#1F2124; border:1px solid #3A3D42; border-radius:var(--r); padding:12px; text-align:center; margin-bottom:12px}
.kiosk .disp .pin{font-family:var(--mono); font-size:24px; letter-spacing:.34em; min-height:30px}
.kiosk .disp .nm{font-family:var(--display); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand)}
.pad{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.pad button{background:#4A4D52; border:0; color:#fff; font-family:var(--mono); font-size:17px; padding:12px 0; border-radius:var(--r); cursor:pointer}
.pad button:hover{background:#5A5D63}
.pad button.act{background:var(--brand); color:#1D2023; font-family:var(--body); font-size:13px; font-weight:600}
.pad button.clr{background:#3A3D42; font-size:13px; font-family:var(--body)}

/* ---------- invoice ---------- */
.doc{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow); max-width:720px}
.doc-h{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-bottom:2px solid var(--charcoal); padding-bottom:12px; margin-bottom:14px}
.doc-h .t{font-family:var(--display); font-size:24px; letter-spacing:.08em; text-transform:uppercase}

/* ---------- talk track ---------- */
.talk{position:fixed; left:0; right:0; bottom:0; background:var(--charcoal); color:#E4E6E9; z-index:50;
  display:flex; align-items:center; gap:12px; padding:9px 14px; border-top:2px solid var(--brand); flex-wrap:wrap}
.talk .step{font-family:var(--mono); font-size:11px; color:var(--brand); white-space:nowrap}
.talk .msg{font-size:13px; flex:1 1 220px; min-width:0}
.talk .msg b{color:#fff}
.talk button{background:#4A4D52; border:0; color:#fff; padding:5px 12px; border-radius:var(--r); font-size:12.5px; cursor:pointer}
.talk button.primary{background:var(--brand); color:#1D2023; font-weight:600}
.talk button:disabled{opacity:.4; cursor:not-allowed}

.watermark{font-family:var(--display); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.toast{position:fixed; right:16px; bottom:70px; background:var(--charcoal); color:#fff; padding:10px 14px; border-left:3px solid var(--brand);
  border-radius:var(--r); font-size:13px; z-index:60; box-shadow:var(--shadow); max-width:320px}