/* =====================================================================================
   RJ DTC Admin · Round 4 · Orders pages (brand shell) · od.css   (prefix od-)
   One stylesheet for the five Orders surfaces: /orders, /orders/[id], /orders/kanban,
   /orders/envelopes/[id], /orders/retry-erp. Copied verbatim into each page folder by
   src/build.py. Load order: _kit/tokens -> base -> data-table -> data-display (+ cloth) ->
   status-feedback -> app-shell -> overlays -> page-help -> od.css.
   Only what turns kit specimens into full-viewport pages. Values come from tokens.
   Two dedicated compositions: .kit-d (desktop /) and .kit-m (phone /m/). No size queries.
   ===================================================================================== */

.od{background:hsl(var(--background))}
.od [hidden]{display:none!important}
.od a.btn{text-decoration:none}
.od-meta a,.od-links a,.od-back,.od-pcrumb a,.dd-col-more,.od-sec-h a{color:inherit}

/* ---------- desktop shell (same anatomy as the Round 3 reference pages) ---------- */
.kit-d .od-app{min-height:100vh;border-radius:0;box-shadow:none}
.kit-d .od-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .od-side::-webkit-scrollbar{display:none}
.kit-d .od-side .sb-item{text-decoration:none}
.kit-d .od-main{overflow:clip}
.od-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.od-top .top-r{gap:var(--s-3)}
.od-top .crumbs a{text-decoration:none}
.od-top .crumbs a:hover{color:hsl(var(--foreground))}
.od-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16)}
.od-ph{align-items:flex-start}
.od-ph .page-title{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.od-ph .ph-r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.od-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);margin-top:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.od-meta .sep{opacity:.5}
.od-meta a{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.25);text-underline-offset:2px}
.od-meta a.warn{color:hsl(var(--warning))}
.od-src{font:var(--text-micro)/1.3 var(--font-code);color:hsl(var(--muted-foreground))}
.od-back{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground));text-decoration:none;margin-bottom:var(--s-3)}
.od-back:hover{color:hsl(var(--foreground))}
.od-chips{display:inline-flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
.od-viewlinks{display:inline-flex}
.od-viewlinks a{text-decoration:none}

/* sticky toolbar */
.od-bar{position:sticky;top:var(--topbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin:0 calc(var(--s-6) * -1);padding:var(--s-3) var(--s-6);background:hsl(var(--background));border-bottom:1px solid hsl(var(--border))}
.od-bar .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.od-bar .dt-search{width:280px}
.od-bar .dt-search kbd{margin-left:auto}
.od-body{padding-top:var(--s-5)}

/* table cells */
.od-tbl .dt{table-layout:fixed}
.od-tbl .dt th{top:calc(var(--topbar-h) + var(--od-bar-h, 60px))}
.od-tbl .dt td{vertical-align:top}
.od-tbl tbody tr{cursor:pointer}
.od-tbl .dt-ord{text-decoration:none}
.od-tbl tbody tr:hover .dt-ord{text-decoration:underline}
.od-tbl .dt-t1,.od-tbl .dt-t2{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-tbl .dt-erp{display:block;margin-top:2px}
.od-tbl .dt-state{font-size:var(--text-body)}
.od-tbl .nw{white-space:nowrap}
.od-tbl .dt-flag{margin-left:var(--s-1)}
.od-cur{font:var(--text-micro)/1 var(--font-ui);color:hsl(var(--muted-foreground));margin-left:4px}
.od-empty{padding:var(--s-12) var(--s-6)}
.od-pager{border:1px solid hsl(var(--border));border-top:0;border-radius:0 0 var(--r-card) var(--r-card)}
.od-tbl .dt-wrap{border-radius:var(--r-card) var(--r-card) 0 0}

/* panels used across detail pages */
.od-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-5);align-items:start}
.od-col{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.od-panel .dd-panel-b{padding:var(--s-4)}
.od-panel .dd-panel-b.flush{padding:0}
.od-panel .dd-panel-h .dd-h3{display:inline-flex;align-items:center;gap:var(--s-2)}
.od-panel .dd-panel-h .dd-h3 svg{color:hsl(var(--muted-foreground))}
.od-sub{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.od-sec+.od-sec{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid hsl(var(--border))}
.od-sec-h{display:flex;align-items:baseline;gap:var(--s-2);margin-bottom:var(--s-3)}
.od-sec-h b{font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice)}
.od-sec-h .r{margin-left:auto;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.od-none{color:hsl(var(--muted-foreground));font-size:var(--text-body)}
.od-note{padding:var(--s-3);border-radius:var(--r-control);background:hsl(var(--muted)/.6);font-size:var(--text-body);line-height:1.5}
.od-lines .dt{table-layout:fixed}
.od-lines .dt td{vertical-align:top}
.od-lines .dt th:first-child,.od-lines .dt td:first-child{padding-left:var(--s-4)}
.od-lines .dt th:last-child,.od-lines .dt td:last-child{padding-right:var(--s-4)}
.od-lines .dt-wrap{border:0;border-radius:0;box-shadow:none}
.od-totals{display:flex;justify-content:flex-end;padding:var(--s-3) var(--s-4) var(--s-4);border-top:1px solid hsl(var(--border))}
.od-totals .dd-dl{width:360px}
.od-addr{font-style:normal;line-height:1.55;font-size:var(--text-body)}
.od-sp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.od-spc{border:1px solid hsl(var(--border));border-radius:var(--r-control);padding:var(--s-3);min-width:0}
.od-spc-h{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2)}
.od-spc-h b{font:var(--w-semibold) var(--text-body)/1.2 var(--font-voice)}
.od-spc-h .r{margin-left:auto}
.od-spc .dd-dl{font-size:var(--text-small)}
.od-fit{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.od-stage{display:flex;gap:var(--s-1);margin-top:var(--s-2)}
.od-stage i{flex:1;height:6px;border-radius:var(--r-pill);background:hsl(var(--muted))}
.od-stage i.done{background:hsl(var(--success))}
.od-stage i.now{background:hsl(var(--primary))}
.od-stage-l{display:flex;justify-content:space-between;margin-top:var(--s-1);font-size:var(--text-micro);color:hsl(var(--muted-foreground))}
.od-stage-l b{color:hsl(var(--foreground));font-weight:var(--w-semibold)}

/* skeleton panels */
.od-sk{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4)}
.od-sk .skel{height:12px;border-radius:var(--r-chip)}
.od-sk .skel.h{height:18px;width:40%}
.od-loadline{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-4)}

/* notices: kit status-feedback alerts sized for a page */
.od-notice{margin-bottom:var(--s-5)}
.od-notice h4{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice)}
.od-notice p{margin-top:var(--s-1);font-size:var(--text-body)}
.od-notice .act{margin-top:var(--s-3);display:flex;gap:var(--s-2)}
.od-notice code{font-size:var(--text-small)}
.od-errbox{border:1px solid hsl(var(--destructive)/.3);background:hsl(var(--destructive)/.03);border-radius:var(--r-card)}

/* JSON viewer (envelope) */
.od-json{position:relative;margin:0;max-height:none;overflow:auto;background:hsl(var(--muted)/.45);border-radius:0 0 var(--r-card) var(--r-card);
  font:var(--text-code)/1.65 var(--font-code);counter-reset:ln;padding:var(--s-3) 0}
.od-json span.l{display:block;padding:0 var(--s-4) 0 0;white-space:pre}
.od-json span.l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:44px;padding-right:var(--s-3);margin-right:var(--s-3);text-align:right;
  color:hsl(var(--muted-foreground)/.7);border-right:1px solid hsl(var(--border));user-select:none}
.od-json .k{color:hsl(var(--primary))}
.od-json .s{color:hsl(var(--success))}
.od-json .n{color:hsl(var(--info))}
.od-json .b{color:hsl(var(--warning))}
.od-json .p{color:hsl(var(--muted-foreground))}
.od-json span.l.hit{background:hsl(var(--warning)/.12)}
.od-kv{display:flex;flex-direction:column}
.od-kv>div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid hsl(var(--border));font-size:var(--text-body)}
.od-kv>div:last-child{border-bottom:0}
.od-kv dt{color:hsl(var(--muted-foreground))}
.od-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.od-links{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.od-links li a{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) 0;text-decoration:none;border-bottom:1px solid hsl(var(--border))}
.od-links li:last-child a{border-bottom:0}
.od-links li a:hover b{text-decoration:underline}
.od-links .ic{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-control);background:hsl(var(--muted));color:hsl(var(--muted-foreground));flex:none}
.od-links .t{flex:1;min-width:0;display:flex;flex-direction:column}
.od-links .t b{font-weight:var(--w-medium);font-size:var(--text-body)}
.od-links .t span{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.od-links svg.chev{color:hsl(var(--muted-foreground))}

/* retry queue */
.od-kpis{margin-bottom:var(--s-5)}
.od-kpis .dd-kpi{cursor:default}
.od-kpis .dd-kpi-v .code{font-size:inherit}
.od-fail b{display:block;font-weight:var(--w-medium);font-size:var(--text-body)}
.od-fail .od-wire{display:block;margin-top:2px;font:var(--text-micro)/1.4 var(--font-code);color:hsl(var(--muted-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.od-wirebox{margin:var(--s-2) 0 0;padding:var(--s-2) var(--s-3);border-radius:var(--r-control);background:hsl(var(--warning)/.07);border:1px solid hsl(var(--warning)/.25);
  font:var(--text-micro)/1.55 var(--font-code);white-space:pre-wrap;overflow-wrap:anywhere;color:hsl(var(--foreground))}
.od-att{font-variant-numeric:tabular-nums;white-space:nowrap}
.od-att i{display:inline-block;width:6px;height:6px;border-radius:50%;background:hsl(var(--muted));margin-right:2px}
.od-att i.on{background:hsl(var(--warning))}
.od-rowerr{margin-top:var(--s-2);display:flex;gap:var(--s-2);align-items:flex-start;color:hsl(var(--destructive));font-size:var(--text-small)}
.od-rq tr.is-busy td{opacity:.7}
.od-rq tr.is-done td{background:hsl(var(--success)/.06)}
.od-rq tr.is-gone{opacity:0;transition:opacity var(--motion-sheet-out)}
.od-rq .dt-ra{gap:var(--s-2);justify-content:flex-end}
.od-exp{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:var(--s-1)}
.od-exp svg{transition:transform var(--motion-hover)}
.od-exp[aria-expanded=true] svg{transform:rotate(180deg)}

/* kanban */
.od-board{border:1px solid hsl(var(--border));border-radius:var(--r-card);overflow:hidden}
.od-board .dd-board{align-items:start;min-height:520px}
.od-board .dd-card{text-decoration:none;color:inherit}
.od-legend{display:flex;gap:var(--s-4);align-items:center;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-3)}
.od-legend i{display:inline-block;width:3px;height:14px;border-radius:2px;margin-right:var(--s-2);vertical-align:-2px}
.od-legend i.stale{background:hsl(var(--warning))}
.od-legend i.blocked{background:hsl(var(--destructive))}
.od-legend .r{margin-left:auto}
.od-unmapped{border:1px dashed hsl(var(--not-wired)/.55);background:hsl(var(--not-wired)/.05);border-radius:var(--r-control);padding:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.od-unmapped b{display:block;color:hsl(var(--foreground));font-weight:var(--w-medium);margin-bottom:2px}
.dd-col.is-unmapped .dd-col-h{color:hsl(var(--muted-foreground))}
.dd-card .od-due{white-space:nowrap}

/* ---------- fixed overlay layers ---------- */
.od-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.od-layer>.k-sheet,.od-layer>.k-dialog,.od-layer.open>.k-scrim{pointer-events:auto}
.kit-d .od-help-layer{left:var(--sidebar-w)}
.kit-d .od-help-layer>.k-sheet,.kit-d .od-help-layer>.k-scrim{top:var(--topbar-h)}
.od-help-layer .k-sheet{display:flex;flex-direction:column}
.od-cmd-layer>.k-dialog{top:14vh;width:auto;background:transparent;box-shadow:none;border-radius:var(--r-frame);overflow:visible;transform:translate(-50%,var(--pop-shift)) scale(.985)}
.od-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.od-cmd-in{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--w-regular) var(--text-read)/1 var(--font-ui);color:hsl(var(--foreground))}
.od-cmd-in::placeholder{color:hsl(var(--muted-foreground))}

/* toasts */
.od-toasts{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--toast-gap);pointer-events:none}
.kit-d .od-toasts{left:calc(var(--sidebar-w) + var(--s-6));bottom:var(--s-6);width:360px}
.od-toasts .toast{pointer-events:auto}

/* preview-state switcher (prototype only, not product UI) */
.od-proto{position:fixed;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2);transition:opacity var(--motion-hover)}
.kit-d .od-proto{right:var(--s-5);bottom:var(--s-5)}
.od-proto>.k-anchor>button{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-pill);
  border:1px dashed hsl(var(--input));background:hsl(var(--background)/.94);backdrop-filter:blur(6px);box-shadow:var(--e-pop);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.od-proto>.k-anchor>button b{font-weight:var(--w-semibold);color:hsl(var(--foreground))}
body:has(.od-layer.open) .od-proto{opacity:0;pointer-events:none}

/* ======================================== PHONE ======================================== */
.kit-m .od-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .od-phone .p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.od-pcrumb{display:flex;align-items:center;gap:var(--s-2)}
.od-pcrumb a{text-decoration:none;display:inline-flex;align-items:center;gap:2px}
.od-pcrumb .od-proto{position:static;margin-left:auto}
.od-pcrumb .od-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.kit-m .p-head{flex-wrap:wrap}
.kit-m .p-head .od-chips{flex-basis:100%;margin-top:var(--s-2)}
.kit-m .od-pbody{padding:0 var(--s-4) var(--s-6);flex:1;display:flex;flex-direction:column;gap:var(--s-4);min-width:0}
.kit-m .od-ptools{display:flex;flex-direction:column;gap:var(--s-2);padding:0 var(--s-4) var(--s-3);border-bottom:1px solid hsl(var(--border));background:hsl(var(--background))}
.kit-m .od-ptools .dt-row{flex-wrap:nowrap}
.kit-m .od-ptools .field{flex:1;min-width:0}
.kit-m .od-ptools .dt-hs{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4)}
.kit-m .od-ptools .dt-hs::-webkit-scrollbar{display:none}
.kit-m .od-ptools .dt-fchip{height:var(--control-h-m)}
.kit-m .od-ptools .seg{width:100%}
.kit-m .od-ptools .seg a{flex:1;justify-content:center;text-decoration:none}
.kit-m .od-cards{margin:0 calc(var(--s-4) * -1)}
.kit-m .od-cards .dt-oc{text-decoration:none;color:inherit;display:flex}
.kit-m .od-cards .dt-oc-no{text-decoration:none}
.kit-m .od-count{font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums;padding-top:var(--s-3)}
.kit-m .od-more{width:100%}
.kit-m .od-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.kit-m .od-col{gap:var(--s-4)}
.kit-m .od-sp{grid-template-columns:minmax(0,1fr)}
.kit-m .od-totals .dd-dl{width:100%}
.kit-m .od-totals{padding:var(--s-3) var(--s-4)}
.kit-m .od-kv>div{grid-template-columns:104px minmax(0,1fr)}
.kit-m .od-json{max-height:60vh;font-size:var(--text-micro)}
.kit-m .od-json span.l::before{width:30px;padding-right:var(--s-2);margin-right:var(--s-2)}
.kit-m .od-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-bottom:0}
.kit-m .od-kpis .dd-kpi{padding:var(--s-3)}
.kit-m .od-kpis .dd-kpi-v{font-size:var(--text-page)}
.kit-m .od-litem{display:flex;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.kit-m .od-litem:last-child{border-bottom:0}
.kit-m .od-litem .t{flex:1;min-width:0}
.kit-m .od-litem .t b{display:block;font-weight:var(--w-medium)}
.kit-m .od-litem .t span{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .od-litem .money{font-weight:var(--w-semibold);white-space:nowrap}
.kit-m .od-rqc{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));padding:var(--s-3) var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.kit-m .od-rqc.is-done{border-color:hsl(var(--success)/.5)}
.kit-m .od-rqc-h{display:flex;align-items:center;gap:var(--s-2)}
.kit-m .od-rqc-h .r{margin-left:auto;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .od-rqc-b{display:flex;align-items:baseline;gap:var(--s-2)}
.kit-m .od-rqc-b .money{margin-left:auto;font-weight:var(--w-semibold)}
.kit-m .od-rqc-f{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.kit-m .od-rqc-f .btn{width:100%}
.kit-m .od-board-m .dd-stage-h{display:flex;align-items:center;gap:var(--s-2);margin:var(--s-1) 0 var(--s-3)}
.kit-m .od-board-m .dd-card{text-decoration:none;color:inherit}
.kit-m .od-legend{flex-wrap:wrap;gap:var(--s-2) var(--s-4)}

/* phone: the one primary action sits at the bottom, in thumb reach */
.kit-m .od-actbar{position:sticky;bottom:var(--tabbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;gap:var(--s-2);align-items:center;
  padding:var(--s-3) var(--s-4);background:hsl(var(--background)/.96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border))}
.kit-m .od-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .od-actbar .btn.btn-secondary{flex:0 0 auto}
.kit-m .tabbar{bottom:0}
.kit-m .od-layer>.k-sheet.k-bottom{display:flex;flex-direction:column}
.kit-m .od-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%}
.kit-m .od-cmd-sheet .sh-pop-l{max-height:none;flex:1}
.kit-m .od-cmd-sheet .sh-cmd-f{display:none}
.kit-m .od-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}
.kit-m .od-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5)}
.kit-m .od-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}
.kit-m .od-errbox .sf-errpage{padding:var(--s-6) var(--s-4)}
.od-dim .dt-chips,.od-dim .dt-hs,.od-dim .r>.field,.od-dim>.dt-row{opacity:.5;pointer-events:none}
.od-tbl .dt td{vertical-align:middle}
.od-tbl .dt-t2.od-plain,.dt-oc-it .od-plain{font-family:var(--font-ui);letter-spacing:0}
.kit-m .dt-oc-st .dt-erp{white-space:normal;overflow:visible;text-overflow:clip}
.od-lines .dt{min-width:0;width:100%}
.od-lines .dt-wrap{overflow:hidden}
.od-lines .dt-prod .thumb{width:32px;height:40px;flex:none}
.od-lines .dt-t2,.od-lines .dt-t1{white-space:normal;overflow:visible}
.od-lines .dt-t2{font-family:var(--font-ui);font-size:var(--text-small)}
.od-lines .dt-prod{min-width:0}
.od-pcrumb .od-proto b{white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
.kit-m .od-kpis .dd-kpi,.kit-m .od-kpis .dd-kpi-foot{min-width:0}
.kit-m .od-kpis .dd-kpi-foot,.kit-m .od-kpis .dd-kpi-foot .code{overflow-wrap:anywhere;word-break:break-all;font-size:var(--text-micro)}
.od-cmd-layer .sh-pop-l{max-height:56vh;overflow-y:auto}