:root{
  --ground:#EDF0EC; --surface:#FFFFFF; --surface-2:#F7F9F6; --sunk:#E3E8E1;
  --ink:#10201C; --ink-2:#3B4F49; --ink-3:#6C7D77; --ink-4:#93A19B;
  --hair:#D2DAD1; --hair-2:#E5EAE3;
  --accent:#0B6B5B; --accent-deep:#064A3F; --accent-wash:#DEEDE8;
  --warm:#AE5019; --warm-wash:#F7E8DD;
  --low:#0B6B5B; --std:#3A5A7A; --high:#8E6208; --esc:#9C2E25;
  --low-w:#DEEDE8; --std-w:#E2EAF1; --high-w:#F5EDD9; --esc-w:#F6E2E0;
  --shadow:0 1px 2px rgba(16,32,28,.06), 0 8px 24px -12px rgba(16,32,28,.18);
  --hero:#0A3F36; --hero-ink:#EAF3F0; --hero-dim:#9EC4BA; --hero-line:#1C5B50;
  --radius:5px;
  --sans:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --serif:"Literata", Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B1311; --surface:#131D1A; --surface-2:#182320; --sunk:#0E1715;
    --ink:#E6EDE9; --ink-2:#B3C1BB; --ink-3:#889792; --ink-4:#66756F;
    --hair:#26332E; --hair-2:#1D2926;
    --accent:#4FBFA6; --accent-deep:#8FD8C6; --accent-wash:#12302A;
    --warm:#DF8B51; --warm-wash:#332114;
    --low:#4FBFA6; --std:#7FA6CE; --high:#D3A33C; --esc:#E08379;
    --low-w:#12302A; --std-w:#19262F; --high-w:#2E2612; --esc-w:#321A18;
    --hero:#0C1D19; --hero-ink:#DDEAE5; --hero-dim:#829C94; --hero-line:#1E332E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0B1311; --surface:#131D1A; --surface-2:#182320; --sunk:#0E1715;
  --ink:#E6EDE9; --ink-2:#B3C1BB; --ink-3:#889792; --ink-4:#66756F;
  --hair:#26332E; --hair-2:#1D2926;
  --accent:#4FBFA6; --accent-deep:#8FD8C6; --accent-wash:#12302A;
  --warm:#DF8B51; --warm-wash:#332114;
  --low:#4FBFA6; --std:#7FA6CE; --high:#D3A33C; --esc:#E08379;
  --low-w:#12302A; --std-w:#19262F; --high-w:#2E2612; --esc-w:#321A18;
  --hero:#0C1D19; --hero-ink:#DDEAE5; --hero-dim:#829C94; --hero-line:#1E332E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---------- shell ---------- */
.app{display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100dvh}
.rail{background:var(--surface); border-right:1px solid var(--hair); display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; overflow-y:auto}
.brand{padding:18px 18px 14px; border-bottom:1px solid var(--hair-2); display:flex; flex-direction:column; gap:3px}
.brand b{font-family:var(--serif); font-size:15px; font-weight:700; letter-spacing:-.015em}
.brand span{font-size:10.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-3)}
.navgroup{padding:14px 12px 4px}
.navgroup>h5{font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-4); margin:0 0 6px 6px; font-family:var(--sans); font-weight:600}
.nav{display:flex; flex-direction:column; gap:1px}
.nav button{display:flex; align-items:baseline; gap:9px; width:100%; text-align:left; background:none; border:0; padding:6px 8px; border-radius:var(--radius); cursor:pointer; color:var(--ink-2); font-size:13.5px}
.nav button .st{font-family:var(--mono); font-size:10.5px; color:var(--ink-4); min-width:15px; font-variant-numeric:tabular-nums}
.nav button .ct{margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-3); background:var(--sunk); padding:0 5px; border-radius:9px; font-variant-numeric:tabular-nums}
.nav button:hover{background:var(--surface-2); color:var(--ink)}
.nav button[aria-current="true"]{background:var(--accent-wash); color:var(--accent-deep); font-weight:500}
.nav button[aria-current="true"] .st{color:var(--accent)}
.railfoot{margin-top:auto; padding:12px 16px 16px; border-top:1px solid var(--hair-2); display:flex; flex-direction:column; gap:7px}
.storage{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-3)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--ink-4); flex:none}
.dot.on{background:var(--accent)}
.railfoot small{font-size:10.5px; color:var(--ink-4); line-height:1.45}

/* ---------- topbar ---------- */
.main{display:flex; flex-direction:column; min-width:0}
.topbar{display:flex; align-items:center; gap:16px; padding:13px 26px; border-bottom:1px solid var(--hair); background:var(--surface); position:sticky; top:0; z-index:20; flex-wrap:wrap}
.topbar h1{font-size:17px}
.season{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3); margin-left:auto}
.season b{font-family:var(--mono); font-weight:500; color:var(--ink-2); font-size:12px}
.pipe{width:1px; height:15px; background:var(--hair)}
.who{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-3)}
.who b{font-weight:600; color:var(--ink); font-size:12.5px}
.who select{background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--radius); padding:3px 6px; font-size:12px}

.view{padding:22px 26px 60px; display:none; max-width:1180px}
.view.on{display:block}
.view>header{margin-bottom:18px; display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap}
.view>header .lede{max-width:64ch; color:var(--ink-2); font-size:13.5px; margin:5px 0 0}
.eyebrow{font-size:10px; text-transform:uppercase; letter-spacing:.13em; color:var(--ink-4); font-weight:600; display:block; margin-bottom:5px}
.view h2{font-size:22px}
.sec{margin-top:26px}
.sec>h3{font-size:14.5px; margin-bottom:9px; display:flex; align-items:center; gap:9px}
.sec>h3 .ref{font-family:var(--mono); font-size:10.5px; color:var(--ink-4); font-weight:400; letter-spacing:0}
.note{font-size:12.5px; color:var(--ink-3); max-width:70ch; margin:7px 0 0}

/* ---------- tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:1px; background:var(--hair-2); border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden}
.tile{background:var(--surface); padding:13px 15px 14px; display:flex; flex-direction:column; gap:3px}
.tile .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3)}
.tile .v{font-family:var(--mono); font-size:25px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1}
.tile .s{font-size:11.5px; color:var(--ink-3)}
.tile .s.warn{color:var(--warm)}

/* ---------- funnel ---------- */
.funnel{display:flex; flex-direction:column; gap:3px; border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); padding:14px 16px}
.frow{display:grid; grid-template-columns:132px 1fr 46px; align-items:center; gap:11px}
.frow .fl{font-size:12.5px; color:var(--ink-2)}
.frow .fb{height:16px; background:var(--sunk); border-radius:2px; overflow:hidden}
.frow .fb i{display:block; height:100%; background:var(--accent); opacity:.85}
.frow .fn{font-family:var(--mono); font-size:12.5px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2)}

/* ---------- ledger tables ---------- */
.tablewrap{border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); overflow-x:auto}
table.ledger{width:100%; border-collapse:collapse; font-size:13px}
table.ledger th{text-align:left; font-weight:600; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); padding:9px 12px; border-bottom:1px solid var(--hair); white-space:nowrap; background:var(--surface-2)}
table.ledger td{padding:9px 12px; border-bottom:1px solid var(--hair-2); vertical-align:top}
table.ledger tr:last-child td{border-bottom:0}
table.ledger tbody tr:hover{background:var(--surface-2)}
table.ledger tr.sel{background:var(--accent-wash)}
table.ledger tr.clickable{cursor:pointer}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12.5px}
.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.sub{display:block; color:var(--ink-3); font-size:11.5px; margin-top:1px}
.empty{padding:26px 14px; text-align:center; color:var(--ink-3); font-size:13px}

/* ---------- chips ---------- */
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:1px 7px; border-radius:3px; background:var(--sunk); color:var(--ink-2); white-space:nowrap; font-weight:500}
.chip.low{background:var(--low-w); color:var(--low)}
.chip.std{background:var(--std-w); color:var(--std)}
.chip.high{background:var(--high-w); color:var(--high)}
.chip.esc{background:var(--esc-w); color:var(--esc)}
.chip.ok{background:var(--accent-wash); color:var(--accent-deep)}
.chip.warm{background:var(--warm-wash); color:var(--warm)}
.chip.ghost{background:none; border:1px solid var(--hair); color:var(--ink-3)}
.stripe{display:inline-block; width:3px; align-self:stretch; border-radius:2px}
.age{font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.age.breach{color:var(--esc); font-weight:500}

/* ---------- buttons & forms ---------- */
.btn{text-decoration:none; border:1px solid var(--hair); background:var(--surface); color:var(--ink); padding:6px 12px; border-radius:var(--radius); cursor:pointer; font-size:13px; font-weight:500; display:inline-flex; align-items:center; gap:6px}
.btn:hover{background:var(--surface-2); border-color:var(--ink-4)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
:root[data-theme="dark"] .btn.primary, :root:not([data-theme="light"]) .btn.primary{color:#07201B}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn.primary{color:#fff}}
.btn.primary:hover{background:var(--accent-deep); border-color:var(--accent-deep)}
.btn.danger{color:var(--esc); border-color:var(--esc-w)}
.btn.danger:hover{background:var(--esc-w); border-color:var(--esc)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.sm{padding:3px 9px; font-size:12px}
.btnrow{display:flex; gap:7px; flex-wrap:wrap; align-items:center}

.field{display:flex; flex-direction:column; gap:4px; margin-bottom:11px}
.field>label{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); font-weight:600}
.field input, .field select, .field textarea{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:7px 9px; font-size:13.5px; width:100%}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent)}
.field .hint{font-size:11.5px; color:var(--ink-3)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 12px}
.check{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--ink-2); cursor:pointer; padding:5px 0}
.check input{margin-top:3px; accent-color:var(--accent); flex:none}

/* ---------- panel / detail ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr) 352px; gap:16px; align-items:start}
@media (max-width:1040px){.split{grid-template-columns:1fr}}
.panel{border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); position:sticky; top:74px}
.panel>header{padding:12px 14px; border-bottom:1px solid var(--hair-2); display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.panel>header h4{font-size:14px}
.panel .body{padding:13px 14px; display:flex; flex-direction:column; gap:12px; max-height:calc(100dvh - 190px); overflow-y:auto}
/* a scrolling column must not let its children shrink to nothing */
.panel .body>*, .phone .screen>*, .signals>*, .script>*{flex:0 0 auto}
.panel .body h5{font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-4); margin:0; font-family:var(--sans); font-weight:600}
.kv{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; font-size:12.5px}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0; color:var(--ink); text-align:right; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums}
.kv dd.txt{font-family:var(--sans); font-size:12.5px}
.signals{display:flex; flex-direction:column; gap:0; border:1px solid var(--hair-2); border-radius:var(--radius); overflow:hidden}
.signal{display:flex; gap:9px; align-items:baseline; padding:6px 10px; border-bottom:1px solid var(--hair-2); font-size:12.5px; background:var(--surface-2)}
.signal:last-child{border-bottom:0}
.signal .pts{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--warm); font-weight:500}
.signal em{display:block; color:var(--ink-3); font-size:11px; font-style:normal; margin-top:2px}
.signal.off{opacity:.42}
.signal.off .pts{color:var(--ink-4)}
.script{background:var(--surface-2); border:1px solid var(--hair-2); border-radius:var(--radius); padding:11px 13px; font-size:12.5px; display:flex; flex-direction:column; gap:9px}
.script p{margin:0; color:var(--ink-2)}
.script q{color:var(--ink); font-style:normal}
.script em{display:block; color:var(--ink-3); font-size:11.5px; font-style:normal; margin-top:2px}
.timeline{display:flex; flex-direction:column; gap:0; font-size:12.5px}
.tl{display:grid; grid-template-columns:14px 1fr auto; gap:9px; padding:5px 0; align-items:baseline}
.tl i{width:7px; height:7px; border-radius:50%; background:var(--accent); justify-self:center; font-style:normal}
.tl.pend i{background:var(--hair); border:1px solid var(--ink-4)}
.tl time{font-family:var(--mono); font-size:11px; color:var(--ink-3)}

/* ---------- phone ---------- */
.phones{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap}
.phone{width:330px; flex:none; border:1px solid var(--hair); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.phone .bar{background:var(--accent-deep); color:#fff; padding:9px 15px 10px; display:flex; align-items:center; gap:8px}
:root[data-theme="dark"] .phone .bar, :root:not([data-theme="light"]) .phone .bar{background:var(--accent-wash); color:var(--accent-deep)}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .phone .bar{background:var(--accent-deep); color:#fff}}
.phone .bar b{font-size:13px; font-weight:600; font-family:var(--serif)}
.phone .bar .sig{margin-left:auto; font-family:var(--mono); font-size:10px; opacity:.8}
.phone .screen{padding:14px 15px 17px; display:flex; flex-direction:column; gap:2px; max-height:640px; overflow-y:auto}
.phone .screen h4{font-size:15px; margin-bottom:3px}
.phone .screen>p{font-size:12.5px; color:var(--ink-2); margin:0 0 10px}
.wa{background:var(--surface-2); border:1px solid var(--hair-2); border-left:3px solid var(--accent); border-radius:var(--radius); padding:10px 12px; font-size:12.5px; color:var(--ink-2); line-height:1.55}
.wa b{color:var(--ink)}
.wa .meta{display:block; margin-top:7px; font-family:var(--mono); font-size:10.5px; color:var(--ink-4)}

/* ---------- title picker ---------- */
.picker{display:flex; flex-direction:column; gap:1px; border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; max-height:260px; overflow-y:auto}
.bookrow{display:flex; gap:10px; align-items:center; padding:8px 10px; background:var(--surface); border-bottom:1px solid var(--hair-2); cursor:pointer; text-align:left; border-left:0; border-right:0; border-top:0; width:100%}
.bookrow:last-child{border-bottom:0}
.bookrow:hover{background:var(--surface-2)}
.bookrow[aria-pressed="true"]{background:var(--accent-wash)}
.bookrow.blocked{opacity:.5; cursor:not-allowed}
.cover{width:26px; height:36px; border-radius:2px 3px 3px 2px; flex:none; background:linear-gradient(135deg,var(--accent-deep),var(--accent)); box-shadow:inset -3px 0 0 rgba(0,0,0,.18); display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px}
.cover span{font-family:var(--mono); font-size:8px; color:#fff; opacity:.9}
.bookrow .bt{min-width:0; flex:1}
.bookrow .bt b{display:block; font-size:12.5px; font-weight:500; line-height:1.3}
.bookrow .bt span{display:block; font-size:11px; color:var(--ink-3); font-family:var(--mono); margin-top:1px}
.bookrow .bp{font-family:var(--mono); font-size:12px; color:var(--ink-2); text-align:right; flex:none}

.filters{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:9px}
.filters select, .filters input{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius); padding:4px 7px; font-size:12.5px}

/* ---------- misc ---------- */
.callout{border:1px solid var(--hair); border-left:3px solid var(--warm); background:var(--warm-wash); border-radius:var(--radius); padding:10px 13px; font-size:12.5px; color:var(--ink-2); max-width:76ch}
.callout b{color:var(--ink)}
.cols2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:16px; align-items:start}
.cols2>*, .split>*{min-width:0}
.label-sheet{border:1px dashed var(--ink-4); border-radius:var(--radius); background:var(--surface); padding:13px 15px; font-family:var(--mono); font-size:11.5px; line-height:1.6; color:var(--ink-2)}
.label-sheet .big{font-size:15px; color:var(--ink); letter-spacing:.06em}
.barcode{height:26px; margin:7px 0; background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 13px); border-radius:1px}
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--ground); padding:9px 16px; border-radius:var(--radius); font-size:13px; box-shadow:var(--shadow); z-index:80; opacity:0; pointer-events:none; transition:opacity .18s}
.toast.on{opacity:1}
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--hair); margin-bottom:14px}
.tabs button{background:none; border:0; border-bottom:2px solid transparent; padding:7px 11px; cursor:pointer; font-size:13px; color:var(--ink-3)}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent); font-weight:500}
.scroll-x{overflow-x:auto}
.legend{display:flex; gap:13px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-3); margin-top:8px}
.legend span{display:flex; align-items:center; gap:5px}
.legend i{width:9px; height:9px; border-radius:2px; display:block}
/* ---------- tablet ---------- */
@media (max-width:1040px){
  .panel{position:static}
  .panel .body{max-height:none}
}
@media (max-width:900px){
  .app{grid-template-columns:198px minmax(0,1fr)}
  .view{padding:20px 18px 50px}
  .topbar{padding:12px 18px}
}

/* ---------- phone: the rail becomes a scrolling strip of stage chips ---------- */
@media (max-width:720px){
  .app{display:block}
  .rail{position:static; height:auto; border-right:0; border-bottom:1px solid var(--hair)}
  .brand{flex-direction:row; align-items:baseline; gap:9px; padding:10px 14px 9px; border-bottom:1px solid var(--hair-2)}
  .brand span{font-size:9.5px}
  .navscroll{display:flex; overflow-x:auto; padding:8px 12px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .navscroll::-webkit-scrollbar{display:none}
  .navgroup{display:flex; padding:0}
  .navgroup>h5{display:none}
  .nav{flex-direction:row; gap:6px; padding-right:6px}
  .nav button{white-space:nowrap; border:1px solid var(--hair); border-radius:20px; padding:8px 13px; min-height:38px}
  .nav button[aria-current="true"]{border-color:var(--accent)}
  .nav button .ct{margin-left:0}
  .railfoot{flex-direction:row; align-items:center; margin:0; padding:0 14px 10px; border-top:0}
  .railfoot small{display:none}

  .topbar{padding:10px 14px; gap:10px}
  .topbar h1{font-size:15px}
  .season, .topbar>.pipe{display:none}
  .who{margin-left:auto; min-width:0}
  .who span{display:none}
  .who select{max-width:48vw}

  .view{padding:16px 14px 46px}
  .view h2{font-size:19px}
  .view>header .lede{font-size:13px}
  .sec{margin-top:22px}

  /* a bare 1fr track never shrinks below its content, which scrolls the page body sideways */
  .split, .cols2, .grid2{grid-template-columns:minmax(0,1fr)}
  .split>*, .cols2>*, .grid2>*, .phones>*{min-width:0}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile .v{font-size:21px}
  .frow{grid-template-columns:94px minmax(0,1fr) 36px; gap:8px}
  .phone{width:100%; min-width:0}
  .phone .screen{max-height:none}
  table.ledger th, table.ledger td{padding:8px 9px}
  .tabs{overflow-x:auto}
  .tabs button{white-space:nowrap}
  .toast{left:14px; right:14px; transform:none; text-align:center}

  /* 16px stops iOS zooming the page when a control takes focus */
  .field input, .field select, .field textarea,
  .filters select, .filters input, .who select,
  table.ledger input, table.ledger select{font-size:16px}
  .btn{min-height:38px}
  .btn.sm{min-height:0}
}

/* ============================================================
   Field sales app — a separate surface on the same record
   ============================================================ */
#sales-root{min-height:100dvh; background:var(--ground)}

/* --- login --- */
.s-login{min-height:100dvh; display:grid; grid-template-columns:1.1fr 1fr}
.s-hero{background:var(--hero); color:var(--hero-ink); padding:52px 46px; display:flex; flex-direction:column; gap:20px; justify-content:center}
.s-hero .mark{font-family:var(--serif); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.s-hero .kick{font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--hero-dim)}
.s-hero p{margin:0; color:var(--hero-dim); font-size:14px; max-width:42ch; line-height:1.6}
.s-hero dl{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:8px 0 0; font-size:12.5px; border-top:1px solid var(--hero-line); padding-top:18px}
.s-hero dt{color:var(--hero-dim)}
.s-hero dd{margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums}
.s-signin{display:flex; align-items:center; justify-content:center; padding:40px 30px}
.s-card{width:100%; max-width:352px; background:var(--surface); border:1px solid var(--hair); border-radius:8px; padding:26px 26px 24px; box-shadow:var(--shadow)}
.s-card h2{font-size:20px; margin-bottom:5px}
.s-card .sub{color:var(--ink-3); font-size:13px; margin:0 0 20px}
.s-card .demo{margin-top:16px; font-size:11.5px; color:var(--ink-3); border-top:1px solid var(--hair-2); padding-top:13px; line-height:1.5}
.s-card .demo b{color:var(--ink-2); font-family:var(--mono)}
.s-otp{display:flex; gap:9px}
.s-otp input{font-family:var(--mono); font-size:19px; letter-spacing:.42em; text-align:center}
.s-back{background:none; border:0; color:var(--ink-3); font-size:12.5px; cursor:pointer; padding:7px 0; text-decoration:underline; text-underline-offset:3px}

/* --- app shell --- */
.s-app{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100dvh}
.s-rail{background:var(--surface); border-right:1px solid var(--hair); display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; overflow-y:auto}
.s-me{padding:17px 17px 15px; border-bottom:1px solid var(--hair-2); display:flex; gap:11px; align-items:center}
.s-av{width:38px; height:38px; border-radius:50%; background:var(--accent-wash); color:var(--accent-deep); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:14px; flex:none}
.s-me b{display:block; font-size:13.5px; font-weight:600; line-height:1.3}
.s-me span{display:block; font-size:11px; color:var(--ink-3); margin-top:1px}
.s-nav{display:flex; flex-direction:column; gap:2px; padding:12px 11px}
.s-nav button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; padding:9px 11px; border-radius:6px; cursor:pointer; color:var(--ink-2); font-size:13.5px; min-height:40px}
.s-nav button:hover{background:var(--surface-2); color:var(--ink)}
.s-nav button[aria-current="true"]{background:var(--accent-wash); color:var(--accent-deep); font-weight:500}
.s-nav .badge{margin-left:auto; font-family:var(--mono); font-size:11px; background:var(--warm); color:#fff; border-radius:9px; padding:0 6px; font-variant-numeric:tabular-nums}
.s-railfoot{margin-top:auto; padding:13px 15px 16px; border-top:1px solid var(--hair-2); display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.s-ico{width:16px; height:16px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.75}
.s-nav button[aria-current="true"] .s-ico{opacity:1}

.s-main{display:flex; flex-direction:column; min-width:0}
.s-top{display:flex; align-items:center; gap:14px; padding:14px 24px; border-bottom:1px solid var(--hair); background:var(--surface); position:sticky; top:0; z-index:20}
.s-top h1{font-size:17px}
.s-top .when{margin-left:auto; font-size:12px; color:var(--ink-3); font-family:var(--mono)}
.s-body{padding:22px 24px 40px; max-width:900px}
.s-tabs{display:none}

/* --- field app pieces --- */
.s-greet{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.s-greet h2{font-size:23px}
.s-greet p{margin:4px 0 0; color:var(--ink-2); font-size:13.5px}
.s-quota{border:1px solid var(--hair); border-radius:var(--radius); background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:9px}
.s-qrow{display:grid; grid-template-columns:104px minmax(0,1fr) auto; gap:12px; align-items:center; font-size:12.5px}
.s-qbar{height:8px; border-radius:4px; background:var(--sunk); overflow:hidden}
.s-qbar i{display:block; height:100%; background:var(--accent)}
.s-qbar i.hot{background:var(--warm)}
.s-qrow b{font-family:var(--mono); font-size:12.5px; font-variant-numeric:tabular-nums; font-weight:500}
.s-task{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-bottom:1px solid var(--hair-2); background:var(--surface)}
.s-task:last-child{border-bottom:0}
.s-task .s-when{font-family:var(--mono); font-size:11px; color:var(--ink-3); white-space:nowrap}
.s-task b{font-size:13.5px; font-weight:600; display:block}
.s-task span{font-size:12.5px; color:var(--ink-3); display:block; margin-top:2px}
.s-task .btn{margin-left:auto; flex:none}
.s-list{border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--surface)}
.s-book{display:flex; gap:13px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--hair-2)}
.s-book:last-child{border-bottom:0}
.s-book .cover{width:34px; height:47px}
.s-book .bi{min-width:0; flex:1}
.s-book .bi b{display:block; font-size:13.5px; font-weight:600; line-height:1.35}
.s-book .bi span{display:block; font-size:11.5px; color:var(--ink-3); font-family:var(--mono); margin-top:2px}
.s-book .bm{text-align:right; flex:none; display:flex; flex-direction:column; gap:3px; align-items:flex-end}
.s-found{border:1px solid var(--accent); background:var(--accent-wash); border-radius:var(--radius); padding:12px 14px; font-size:13px}
.s-found b{display:block; margin-bottom:3px}
.s-chiprow{display:flex; flex-wrap:wrap; gap:7px}
.s-pick{border:1px solid var(--hair); background:var(--surface); border-radius:16px; padding:6px 12px; font-size:12.5px; cursor:pointer; min-height:34px; color:var(--ink-2)}
.s-pick[aria-pressed="true"]{background:var(--accent-wash); border-color:var(--accent); color:var(--accent-deep); font-weight:500}
.s-form{max-width:520px}
.s-steps{display:flex; gap:7px; align-items:center; font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.09em; margin-bottom:14px}
.s-steps i{width:18px; height:1px; background:var(--hair); display:block}
.s-steps b{color:var(--accent-deep); font-weight:600}

@media (max-width:860px){
  .s-login{grid-template-columns:1fr}
  .s-hero{padding:34px 24px 30px; gap:14px}
  .s-hero .mark{font-size:22px}
  .s-hero dl{display:none}
  .s-signin{padding:26px 20px 44px}
}
@media (max-width:720px){
  .s-app{display:block; padding-bottom:68px}
  .s-rail{position:static; height:auto; flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid var(--hair); overflow:visible}
  .s-me{border-bottom:0; padding:11px 14px; flex:1; min-width:0}
  .s-me b, .s-me span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .s-nav{display:none}
  .s-railfoot{margin:0; padding:0 14px 0 0; border-top:0}
  .s-top{padding:11px 14px}
  .s-top h1{font-size:15px}
  .s-top .when{display:none}
  .s-body{padding:16px 14px 30px}
  .s-greet h2{font-size:20px}
  .s-qrow{grid-template-columns:84px minmax(0,1fr) auto; gap:9px}
  .s-task{flex-wrap:wrap}
  .s-task .btn{margin-left:0; width:100%; justify-content:center}
  .s-card{max-width:none; padding:22px 20px}
  .s-form{max-width:none}
  .s-tabs{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--surface); border-top:1px solid var(--hair); padding-bottom:env(safe-area-inset-bottom)}
  .s-tabs button{flex:1; min-width:0; background:none; border:0; padding:9px 4px 10px; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; color:var(--ink-3); cursor:pointer; min-height:56px}
  .s-tabs button[aria-current="true"]{color:var(--accent-deep)}
  .s-tabs .s-ico{width:19px; height:19px; opacity:1}
  .s-tabs .badge{position:absolute; transform:translate(13px,-4px); font-family:var(--mono); font-size:10px; background:var(--warm); color:#fff; border-radius:9px; padding:0 5px}
  #sales-root .field input, #sales-root .field select, #sales-root .field textarea{font-size:16px}
}

/* --- admin sign-in --- */
.s-err{background:var(--esc-w); color:var(--esc); border-radius:var(--radius); padding:8px 11px; font-size:12.5px; margin:0 0 12px}

/* location indicator in the field app rail */
.s-loc{gap:7px}
.s-loc .dot{width:7px; height:7px}