/* ============ Tokens ============ */
/* Navi identity: white workspace, black hierarchy, Navi Red as the accent (about 5–10% of the screen, never a status). */
:root{
  --navi-red:#D92D55; --navi-black:#171717;
  --ink:#171717; --ink-2:#55555F; --ink-3:#6E6E79;                      /* text: primary, secondary, muted (all AA on white) */
  --paper:#FFFFFF; --canvas:#F7F7F8; --sunk:#F1F1F3; --line:#E7E7EA; --line-2:#EFEFF2;
  --accent:#D92D55; --accent-hover:#BE1F45; --accent-ink:#FFFFFF; --accent-text:#C4244A;
  --accent-soft:#FCEBEF; --accent-1:#F9D6DF; --accent-2:#F1A7B9; --accent-3:#D92D55;
  --ok:#1E7A4C; --ok-bg:#E7F5EE;
  --warn:#8A5300; --warn-bg:#FFF3DC; --err:#B42318; --err-bg:#FDECEA; --info:#2A5B88; --info-bg:#EAF2FA;
  --edit:#FFF7C2; --ring:rgba(217,45,85,.22);
  --shadow-sm:0 1px 2px rgba(16,16,20,.04),0 1px 1px rgba(16,16,20,.03);
  --shadow:0 4px 14px rgba(16,16,20,.06),0 1px 2px rgba(16,16,20,.04);
  --shadow-lg:0 22px 48px rgba(16,16,20,.14),0 2px 6px rgba(16,16,20,.05);
  --r-xs:8px; --r-s:10px; --r-m:16px; --r-l:20px; --r-pill:999px;
  --rail-w:248px; --rail-mini:72px; --appbar-h:64px;
  --rail-bg:#FFFFFF; --rail-ink:#3A3A44; --rail-ink-2:#8A8A94; --rail-hover:#F4F4F6; --rail-active:#FCEBEF; --rail-line:#EDEDF0;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box; color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --ink:#EDEDEF; --ink-2:#B9B9C1; --ink-3:#9A9AA4; --paper:#18181B; --canvas:#0F0F11; --sunk:#222226; --line:#2E2E34; --line-2:#26262B;
  --accent:#E0385F; --accent-hover:#EC5277; --accent-ink:#FFFFFF; --accent-text:#F27B98;
  --accent-soft:#3A1520; --accent-1:#4A1A27; --accent-2:#8E2B44; --accent-3:#E0385F;
  --ok:#5CC994; --ok-bg:#163326; --warn:#F2C069; --warn-bg:#3A2C10; --err:#F29A90; --err-bg:#3D1C19; --info:#9CC8EC; --info-bg:#172E42; --edit:#3A3510;
  --ring:rgba(242,123,152,.35);
  --shadow-sm:none; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 22px 48px rgba(0,0,0,.55);
  --rail-bg:#141417; --rail-ink:#D4D4DA; --rail-ink-2:#8E8E98; --rail-hover:rgba(255,255,255,.05); --rail-active:rgba(224,56,95,.16); --rail-line:rgba(255,255,255,.07);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ink:#EDEDEF; --ink-2:#B9B9C1; --ink-3:#9A9AA4; --paper:#18181B; --canvas:#0F0F11; --sunk:#222226; --line:#2E2E34; --line-2:#26262B;
  --accent:#E0385F; --accent-hover:#EC5277; --accent-ink:#FFFFFF; --accent-text:#F27B98;
  --accent-soft:#3A1520; --accent-1:#4A1A27; --accent-2:#8E2B44; --accent-3:#E0385F;
  --ok:#5CC994; --ok-bg:#163326; --warn:#F2C069; --warn-bg:#3A2C10; --err:#F29A90; --err-bg:#3D1C19; --info:#9CC8EC; --info-bg:#172E42; --edit:#3A3510;
  --ring:rgba(242,123,152,.35);
  --shadow-sm:none; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 22px 48px rgba(0,0,0,.55);
  --rail-bg:#141417; --rail-ink:#D4D4DA; --rail-ink-2:#8E8E98; --rail-hover:rgba(255,255,255,.05); --rail-active:rgba(224,56,95,.16); --rail-line:rgba(255,255,255,.07);
  color-scheme:dark;
}

/* ============ Base ============ */
/* Set directly, not inherited: content inside <details> sits in a browser-made box that inheritance can't reach,
   which made form fields there content-box (wider and taller than their columns). */
*,*::before,*::after{box-sizing:border-box}
html{height:100%}
body{margin:0; min-height:100%; background:var(--canvas); color:var(--ink);
  font:14.5px/1.5 var(--font); font-feature-settings:"cv11","ss01"; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit; color:inherit}
img{max-width:100%}
a{color:var(--accent-text)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.ic{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
h1{font-size:28px; line-height:1.15; margin:0; font-weight:650; letter-spacing:-.025em}
h2{font-size:18px; font-weight:600; margin:28px 0 10px; letter-spacing:-.015em}
h3{font-weight:600}
.sub{color:var(--ink-2); margin:4px 0 20px; max-width:75ch}
.muted{color:var(--ink-3)}

/* ============ Shell ============ */
.app{display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr); min-height:100vh; transition:grid-template-columns .18s ease}
main{padding:28px 32px 64px; min-width:0; max-width:1480px; width:100%}

.rail{background:var(--rail-bg); color:var(--rail-ink); border-right:1px solid var(--rail-line); position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:16px 12px 12px; gap:12px; overflow:hidden; z-index:40}
.rail-head{display:flex; align-items:center; gap:8px; padding:2px 4px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); min-width:0}
.brand:hover{color:var(--ink)}
.mark{width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; font-weight:700; font-size:13.5px; letter-spacing:.02em;
  background:var(--navi-black); color:#fff; box-shadow:inset 0 -3px 0 var(--navi-red)}
.brand-text{display:flex; flex-direction:column; min-width:0; line-height:1.2}
.brand-text b{font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-text small{font-size:12px; color:var(--rail-ink-2)}
.rail .rail-close{display:none; margin-left:auto}
.nav{flex:1; overflow-y:auto; overflow-x:hidden; margin:0 -4px; padding:0 4px; scrollbar-width:thin}
.nav-group{padding:6px 0}
.nav-h{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--rail-ink-2); padding:8px 12px 6px}
.nav-sep{height:1px; background:var(--rail-line); margin:4px 10px 8px}
.nav a{position:relative; display:flex; align-items:center; gap:12px; padding:9px 12px; margin:1px 0; border-radius:var(--r-s); color:var(--rail-ink); text-decoration:none; font-weight:500; font-size:14px; white-space:nowrap}
.nav a .ic{color:var(--rail-ink-2)}
.nav a:hover{background:var(--rail-hover); color:var(--ink)}
.nav a:hover .ic{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--rail-active); color:var(--ink); font-weight:600}
.nav a[aria-current="page"] .ic{color:var(--accent)}
.nav a[aria-current="page"]::before{content:""; position:absolute; left:-4px; top:9px; bottom:9px; width:3px; border-radius:3px; background:var(--accent)}
.count{margin-left:auto; font-size:11.5px; line-height:18px; min-width:20px; text-align:center; border-radius:20px; padding:0 6px; font-weight:700; background:var(--accent); color:var(--accent-ink)}
.count.info{background:var(--sunk); color:var(--ink-2)}
.rail-foot{border-top:1px solid var(--rail-line); padding-top:12px; display:flex; flex-direction:column; gap:8px}
.usercard{display:flex; align-items:center; gap:10px; padding:4px}
.avatar{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:12.5px; font-weight:700; background:var(--accent-soft); color:var(--accent-text)}
.who{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.25}
.who b{font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who small{font-size:12px; color:var(--rail-ink-2)}
.usercard form{margin:0}
.rail-tools{display:flex; justify-content:space-between; padding:0 2px}
.rail .iconbtn{color:var(--rail-ink-2)}
.rail .iconbtn:hover{background:var(--rail-hover); color:var(--ink)}
.iconbtn{display:inline-grid; place-items:center; width:38px; height:38px; border:0; border-radius:var(--r-s); background:none; cursor:pointer; color:var(--ink-2); flex:none}
.iconbtn:hover{background:var(--sunk); color:var(--ink)}
.when-dark{display:none}
:root[data-theme="dark"] .when-dark{display:block} :root[data-theme="dark"] .when-light{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .when-dark{display:block} :root:not([data-theme="light"]) .when-light{display:none}}

/* app bar (desktop): page context · global search · alerts · account menu */
.workspace{min-width:0; display:flex; flex-direction:column}
.appbar{position:sticky; top:0; z-index:25; display:flex; align-items:center; gap:16px; height:var(--appbar-h); padding:0 32px;
  background:color-mix(in srgb,var(--canvas) 86%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.ab-context{display:flex; gap:6px; align-items:center; font-size:14px; min-width:0; white-space:nowrap; flex:0 1 auto}
.ab-context b{font-weight:600; overflow:hidden; text-overflow:ellipsis}
.ab-search{flex:1 1 360px; max-width:520px; margin:0 auto; position:relative}
.ab-search input[type=search]{border-radius:var(--r-pill); background-color:var(--paper); padding-right:44px}
.ab-search kbd{position:absolute; right:12px; top:50%; transform:translateY(-50%); font:600 11px var(--font); color:var(--ink-3); border:1px solid var(--line);
  border-radius:6px; padding:1px 7px; background:var(--sunk); pointer-events:none}
.ab-tools{display:flex; align-items:center; gap:6px; margin-left:auto}
.ab-bell{position:relative}
.ab-dot{position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 4px; border-radius:var(--r-pill); background:var(--accent); color:var(--accent-ink);
  font-size:10.5px; font-weight:700; display:grid; place-items:center; border:2px solid var(--canvas)}
.usermenu{position:relative}
.usermenu summary{list-style:none; display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:var(--r-pill); cursor:pointer; border:1px solid transparent}
.usermenu summary::-webkit-details-marker{display:none}
.usermenu summary:hover,.usermenu[open] summary{background:var(--paper); border-color:var(--line)}
.usermenu summary .ic{width:16px; height:16px; color:var(--ink-3)}
.um-who{display:flex; flex-direction:column; line-height:1.2; text-align:left}
.um-who b{font-size:13px; font-weight:600} .um-who small{font-size:11.5px; color:var(--ink-3)}
.um-menu{position:absolute; right:0; top:calc(100% + 8px); width:250px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-lg); padding:6px; z-index:50}
.um-head{display:flex; flex-direction:column; padding:8px 10px 10px; border-bottom:1px solid var(--line-2); margin-bottom:4px}
.um-head small{color:var(--ink-3); font-size:12px}
.um-menu a,.um-menu button{display:block; width:100%; text-align:left; padding:9px 10px; border-radius:var(--r-xs); border:0; background:none; color:var(--ink); text-decoration:none; font-size:14px; cursor:pointer}
.um-menu a:hover,.um-menu button:hover,.um-menu a:focus-visible,.um-menu button:focus-visible{background:var(--sunk); color:var(--ink)}
.um-menu .when-dark{display:none}
:root[data-theme="dark"] .um-menu .when-dark{display:inline} :root[data-theme="dark"] .um-menu .when-light{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .um-menu .when-dark{display:inline} :root:not([data-theme="light"]) .um-menu .when-light{display:none}}
.rail .usercard{display:none}  /* on desktop the account lives in the app bar */
main{padding-top:24px}

/* collapsed sidebar (desktop) */
:root[data-rail="mini"] .app{grid-template-columns:var(--rail-mini) minmax(0,1fr)}
:root[data-rail="mini"] .rail{padding-left:10px; padding-right:10px}
:root[data-rail="mini"] .lbl-t,:root[data-rail="mini"] .brand-text,:root[data-rail="mini"] .nav-h{display:none}
:root[data-rail="mini"] .nav a{justify-content:center; padding:10px 0}
:root[data-rail="mini"] .nav a .count{position:absolute; top:2px; right:2px; margin:0; min-width:16px; line-height:15px; font-size:10px; padding:0 4px}
:root[data-rail="mini"] .usercard{justify-content:center}
:root[data-rail="mini"] .rail-tools{flex-direction:column; align-items:center; gap:4px}
:root[data-rail="mini"] .rail-collapse .ic{transform:scaleX(-1)}
:root[data-rail="mini"] .rail-head{justify-content:center}

.topbar,.tabbar,.scrim{display:none}
.progress{position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:100; opacity:0; transition:width .2s, opacity .3s}
body.busy .progress{opacity:1; width:70%; transition:width 2.5s cubic-bezier(.1,.7,.3,1)}

/* ============ Page header, back link ============ */
.page-head,.row:has(> h1){display:flex; flex-wrap:wrap; align-items:center; gap:10px 8px; margin-bottom:2px}
.page-head h1,.row > h1{margin-right:auto}
.page-head > div:first-child{margin-right:auto; min-width:0}  /* title (+ subtitle) left, actions right */
.hint{font-size:12.5px; color:var(--ink-3); font-weight:400}
.page-head .spacer,.row:has(> h1) > .spacer{display:none}
.back{margin:0 0 10px; font-size:13.5px}
.back a{display:inline-flex; align-items:center; gap:2px; color:var(--ink-3); text-decoration:none; font-weight:500; padding:2px 6px 2px 0; border-radius:6px}
.back a:hover{color:var(--accent)}
.back a::before{content:""; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}

/* ============ Buttons ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line); background:var(--paper); border-radius:var(--r-s);
  padding:8px 16px; min-height:40px; cursor:pointer; font-weight:600; font-size:14px; white-space:nowrap; color:var(--ink); text-decoration:none;
  box-shadow:var(--shadow-sm); transition:background .12s, border-color .12s, box-shadow .12s, color .12s}
.btn:hover{border-color:var(--ink-3); color:var(--ink); background:var(--paper)}
.btn:focus-visible{outline:0; box-shadow:0 0 0 3px var(--ring)}
.btn:active{transform:translateY(1px)}
.btn .ic{width:16px; height:16px}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-ink)}
.btn.dark{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn.dark:hover{background:color-mix(in srgb,var(--ink) 86%,var(--paper)); color:var(--paper)}
.btn.danger{color:var(--err)}
.btn.danger:hover{border-color:var(--err); background:var(--err-bg); color:var(--err)}
.btn.ghost{border-color:transparent; background:none; box-shadow:none}
.btn.ghost:hover{background:var(--sunk)}
.btn.small{padding:4px 12px; min-height:32px; font-size:13px; border-radius:var(--r-xs)}
.btn:disabled,.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none}
.linkbtn{border:0; background:none; padding:0; color:var(--accent-text); cursor:pointer; text-decoration:underline; font-size:inherit}
form{margin:0}
.row form,.page-head form,.toolbar form{display:contents}

.seg{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; gap:2px; background:var(--sunk); max-width:100%; overflow-x:auto}
.seg a,.seg button{border:0; background:none; padding:6px 12px; cursor:pointer; min-height:30px; font-weight:600; font-size:13.5px; color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:center; border-radius:var(--r-pill); padding:6px 14px; white-space:nowrap}
.seg a:hover,.seg button:hover{color:var(--ink)}
.seg [aria-pressed="true"]{background:var(--paper); color:var(--ink); box-shadow:var(--shadow)}

/* ============ Form controls ============ */
input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],input[type=tel],input[type=password],input[type=file],select,textarea{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-s); padding:8px 12px; min-height:40px; width:100%;
  transition:border-color .12s, box-shadow .12s}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink-3) 45%,var(--line))}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--sunk); color:var(--ink-2); cursor:not-allowed}
input[type=file]{padding:6px; font-size:13.5px}
input[type=file]::file-selector-button{border:1px solid var(--line); background:var(--sunk); border-radius:5px; padding:4px 10px; margin-right:10px; font-weight:600; cursor:pointer; color:var(--ink)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
select{width:auto; appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/16px}
textarea{min-height:120px; resize:vertical}
input[type=search]{padding-left:34px; background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A94' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center/16px}
label.f,.f{display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--ink-2); font-weight:600; min-width:0}
.f .hint{font-weight:400; color:var(--ink-3); font-size:12px}
.f .errorlist,.errorlist{margin:0; padding:0; list-style:none; color:var(--err); font-size:12px; font-weight:500}
.f:has(.errorlist) input,.f:has(.errorlist) select{border-color:var(--err)}
.check{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:var(--ink)}
.check input{width:17px; height:17px; margin:0}
fieldset{min-width:0}

/* ============ Toolbar ============ */
.toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px; padding:10px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-sm)}
.toolbar .grow{flex:1 1 240px; min-width:0}
.toolbar .check{white-space:nowrap}

/* ============ Cards, panels ============ */
.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:22px 24px; margin-bottom:16px; box-shadow:var(--shadow-sm); min-width:0}
.panel > h2:first-child{margin-top:0}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 16px}
.grid4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 16px}
.span2{grid-column:span 2} .span3{grid-column:span 3} .spanall{grid-column:1/-1}
.pricebox{border:1px solid var(--line-2); background:var(--canvas); border-radius:var(--r-m); padding:14px 16px; margin-top:12px}
.pricebox h4{margin:0 0 10px; font-size:14px}
.kv{display:grid; grid-template-columns:130px minmax(0,1fr); gap:8px 12px; margin:0; font-size:14px}
.kv dt{color:var(--ink-3)} .kv dd{margin:0; overflow-wrap:anywhere}
.imgbox{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.imgbox img{max-height:72px; background:#fff; border:1px solid var(--line); border-radius:var(--r-s); padding:4px}
.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.spacer{flex:1}

/* ============ Lists (products, parties, orders) ============ */
.group{margin-bottom:24px}
.group-h{display:flex; align-items:baseline; gap:10px; padding:0 4px 8px}
.group-h h3{margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.05em}
.group-h span{color:var(--ink-3); font-size:12.5px}
.plist{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; box-shadow:var(--shadow-sm)}
.plist.boxed{border-radius:var(--r-m)}
.prow{display:grid; grid-template-columns:56px minmax(200px,1.6fr) 90px 110px 200px minmax(130px,.8fr) 26px; gap:14px; align-items:center;
  padding:12px 16px; border-top:1px solid var(--line-2); color:inherit; text-decoration:none; transition:background .1s}
.prow:first-child{border-top:0}
.prow:hover{background:var(--canvas); color:inherit}
.prow.inactive{opacity:.55}
.thumb{width:56px; height:56px; border-radius:9px; background:#fff; border:1px solid var(--line-2); object-fit:contain; display:block}
.thumb.none{display:grid; place-items:center; color:var(--ink-3); font-size:10.5px; background:var(--sunk); text-align:center}
.pname{font-weight:600; font-size:14px; line-height:1.3; overflow-wrap:anywhere}
.pmeta{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.num{text-align:right}
.lbl{display:block; font-size:11.5px; color:var(--ink-3)}
.val{font-weight:600}
.strike{color:var(--ink-3); font-size:12.5px}
.ladder{display:flex; align-items:flex-end; gap:3px; min-width:0}
.step{flex:1; min-width:0; border-radius:5px 5px 0 0; padding:3px 4px 2px; text-align:center; line-height:1.15}
.step b{display:block; font-size:13px}
.step small{display:block; font-size:10.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.step.s1{background:var(--sunk); min-height:34px}
.step.s2{background:color-mix(in srgb,var(--ink) 14%,var(--paper)); min-height:42px}
.step.s3{background:var(--ink); min-height:50px; color:var(--paper)}
.step.s3 small{color:color-mix(in srgb,var(--paper) 80%,transparent)}
.step.zero{background:var(--err-bg); color:var(--err)}
.pack{font-size:12.5px; color:var(--ink-2); line-height:1.4}
.pack b{color:var(--ink); font-weight:600}
.flag{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700}
.flag.error{background:var(--err-bg); color:var(--err)}
.flag.warn{background:var(--warn-bg); color:var(--warn)}
.chip{display:inline-block; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:var(--r-pill); background:var(--sunk); color:var(--ink-2); margin-right:4px; white-space:nowrap}
.chip.warn{background:var(--warn-bg); color:var(--warn)}
.chip.ovr{background:var(--info-bg); color:var(--info)}
.orow{grid-template-columns:150px minmax(0,1fr) auto 150px}
.orow > div:last-child{justify-self:end}
.orow .pmeta{white-space:nowrap}
.partyrow{grid-template-columns:minmax(200px,1.6fr) 150px minmax(120px,1fr) 150px 140px 26px}

/* ============ Status pills, badges ============ */
.sev{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:3px 10px 3px 8px; border-radius:20px; height:fit-content; white-space:nowrap; background:var(--sunk); color:var(--ink-2)}
.sev::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9}
.sev.error{background:var(--err-bg); color:var(--err)}
.sev.warn{background:var(--warn-bg); color:var(--warn)}
.sev.info{background:var(--info-bg); color:var(--info)}
.sev.ok{background:var(--ok-bg); color:var(--ok)}
.badge{font-size:11.5px; font-weight:600; background:var(--accent-soft); color:var(--accent-text); padding:2px 8px; border-radius:20px; margin-left:8px}
.badge.up{background:var(--info-bg); color:var(--info)}

/* ============ Tables ============ */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-m); background:var(--paper); box-shadow:var(--shadow-sm)}
table.t{border-collapse:collapse; width:100%; font-size:13.5px}
table.t th{text-align:left; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); background:var(--paper);
  padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; position:sticky; top:0; z-index:1}
table.t td{padding:12px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover td,table.t tr:hover > td{background:color-mix(in srgb,var(--canvas) 60%,transparent)}
table.t td.num,table.t th.num{text-align:right}
table.t input,table.t select{min-height:32px; padding:4px 8px; font-size:13px}
table.t select{padding-right:28px}
table.t tr.total td{background:var(--sunk); font-weight:700}
table.t tr.bad td{background:var(--err-bg)}
.old{color:var(--ink-3); text-decoration:line-through; margin-right:6px}
.edited{background:var(--edit)!important}

/* ============ Issues, notices, empty states ============ */
.issue{display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; padding:14px 16px; border-top:1px solid var(--line-2)}
.issue:first-child{border-top:0}
.issue p{margin:2px 0 0; color:var(--ink-2); font-size:13.5px}
.issue .who{grid-column:2; font-size:12.5px; color:var(--ink-3)}
.notice{display:flex; gap:10px; padding:12px 14px; border-radius:var(--r-m); background:var(--info-bg); color:var(--info); margin-bottom:16px; font-size:14px; border:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.notice.warn,.notice.warning{background:var(--warn-bg); color:var(--warn)}
.notice.err,.notice.error{background:var(--err-bg); color:var(--err)}
.notice.success{background:var(--ok-bg); color:var(--ok)}
.empty{padding:48px 20px; text-align:center; color:var(--ink-2)}
.panel.empty::before,.empty.panel::before{content:""; display:block; width:40px; height:40px; margin:0 auto 12px; background:var(--ink-3); opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ============ Toasts ============ */
.toasts{position:fixed; top:16px; right:16px; z-index:90; display:flex; flex-direction:column; gap:8px; width:min(380px,calc(100vw - 32px))}
.toast{display:flex; align-items:flex-start; gap:10px; padding:12px 8px 12px 14px; border-radius:var(--r-m); background:var(--paper); color:var(--ink); border:1px solid var(--line);
  border-left:4px solid var(--ok); box-shadow:var(--shadow-lg); font-size:14px; font-weight:500; animation:toast-in .22s ease; transition:opacity .3s, transform .3s}
.toast > .ic{color:var(--ok); margin-top:1px}
.toast span{flex:1; padding-top:1px}
.toast .iconbtn{width:28px; height:28px; margin:-4px 0}
.toast .iconbtn .ic{width:15px; height:15px}
.toast.error,.toast.warning{border-left-color:var(--err)}
.toast.error > .ic,.toast.warning > .ic{color:var(--err)}
.toast.out{opacity:0; transform:translateX(12px)}
@keyframes toast-in{from{opacity:0; transform:translateY(-8px)}}

/* ============ Misc ============ */
.ver{display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line-2)}
.ver:first-of-type{border-top:0}
.ver .d{font-weight:600}
.stepper{display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; counter-reset:st}
.stepper span{counter-increment:st; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:5px 12px 5px 6px; border-radius:20px; background:var(--paper); border:1px solid var(--line); color:var(--ink-3)}
.stepper span::before{content:counter(st); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11.5px; background:var(--sunk)}
.stepper span.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.stepper span.on::before{background:var(--accent); color:#fff}
.picker{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:30; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-lg); max-height:320px; overflow:auto; padding:4px}
.picker:empty{display:none}
.picker button{display:block; width:100%; text-align:left; border:0; background:none; padding:8px 10px; cursor:pointer; border-radius:7px}
.picker button:hover,.picker button:focus{background:var(--accent-soft); outline:0}
.picker button span{display:block; font-size:12px; color:var(--ink-3)}
.login{max-width:400px; margin:12vh auto; padding:0 16px}
.login .mark{width:48px; height:48px; font-size:17px; margin-bottom:16px; border-radius:14px}

/* ============ Responsive ============ */
.lineerr{display:flex; gap:5px; align-items:flex-start; color:var(--err); font-size:12px; font-weight:600; margin-top:3px; max-width:46ch}
.lineerr svg{width:14px; height:14px; flex:none; margin-top:1px}
tr:has(.lineerr) input[data-lk^="in_"]:not([value=""]){border-color:var(--err); box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 14%,transparent)}
/* confirmation dialog */
.modal{border:1px solid var(--line); border-radius:var(--r-l); padding:24px 26px; width:min(440px,calc(100vw - 32px)); background:var(--paper); color:var(--ink); box-shadow:var(--shadow-lg)}
.modal::backdrop{background:rgba(16,16,20,.45); backdrop-filter:blur(2px)}
.modal h2{margin:0 0 8px; font-size:18px}
.modal p{margin:0 0 14px; color:var(--ink-2); font-size:14px}
.modal .hint{margin:6px 0 0}
.modal-actions{justify-content:flex-end; margin-top:18px}
/* organization */
.orglayout{display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,410px); gap:16px; align-items:start}
.ocanvas-wrap{position:relative; min-width:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-sm); overflow:hidden}
.otools{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px; border-bottom:1px solid var(--line-2)}
.otools .grow{flex:1 1 220px; min-width:0}
.oztools{display:flex; align-items:center; gap:2px}
.oztools .iconbtn svg{width:18px; height:18px}
.zpct{min-width:44px; text-align:center; font-size:12.5px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.ohits{font-size:12.5px; min-width:0}
.ocanvas{height:calc(100vh - 250px); min-height:420px; overflow:auto; cursor:grab; background-color:var(--canvas);
  background-image:radial-gradient(color-mix(in srgb,var(--ink-3) 30%,transparent) 1px,transparent 1px); background-size:18px 18px}
.ocanvas.dragging{cursor:grabbing; user-select:none}
.ozoom{position:relative; min-width:100%}
.otree{display:inline-block; padding:28px 32px 60px; transform-origin:0 0}
.ocanvas-wrap{--oline:color-mix(in srgb,var(--ink-3) 80%,transparent); --ogap:26px}
.otree ul{display:flex; justify-content:center; margin:0; padding:var(--ogap) 0 0; position:relative}
.otree > ul{padding-top:0; gap:48px}  /* separate trees stand apart */
.otree li{list-style:none; position:relative; padding:var(--ogap) 10px 0; display:flex; flex-direction:column; align-items:center}
.otree > ul > li{padding-top:0}
/* the bar across siblings, and each child's drop from it */
.otree li::before,.otree li::after{content:""; position:absolute; top:0; right:50%; width:50%; height:var(--ogap); border-top:2px solid var(--oline)}
.otree li::after{right:auto; left:50%; border-left:2px solid var(--oline)}
.otree li:first-child::before,.otree li:last-child::after{border:0}
.otree li:last-child::before{border-right:2px solid var(--oline); border-radius:0 8px 0 0}
.otree li:first-child::after{border-radius:8px 0 0 0}
/* an only child hangs straight below its parent */
.otree li:only-child::before{display:none}
.otree li:only-child::after{border:0; border-left:2px solid var(--oline); border-radius:0; left:calc(50% - 1px); width:0}
.otree > ul > li::before,.otree > ul > li::after{display:none}
/* the line from a parent down to its children's bar (the +/- button sits on it) */
.otree ul ul::before{content:""; position:absolute; top:-12px; left:calc(50% - 1px); height:calc(var(--ogap) + 12px); border-left:2px solid var(--oline)}
.otree li.collapsed > ul{display:none}
.onode{display:flex; flex-direction:column; gap:4px; width:200px; padding:10px 12px 11px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-sm); text-align:left; color:var(--ink); text-decoration:none; transition:border-color .15s, box-shadow .15s, opacity .15s}
.onode:hover{border-color:color-mix(in srgb,var(--ink-3) 50%,var(--line)); color:var(--ink); box-shadow:var(--shadow)}
.onode.sel{border:2px solid var(--ink); padding:9px 11px 10px; box-shadow:0 0 0 4px var(--accent-soft),var(--shadow)}
.onode.hit{outline:3px solid var(--edit); outline-offset:2px; border-color:var(--warn)}
.onode.dim{opacity:.4}
.otree li.off > .onode{border-style:dashed; opacity:.7}
.ohead{display:flex; align-items:center; gap:6px}
.ohead .sev{margin-left:auto; font-size:11px; padding:1px 8px 1px 6px}
.oname{font-size:13.5px; line-height:1.3; overflow-wrap:anywhere}
.operson{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); min-width:0}
.ocount{font-size:11.5px; color:var(--ink-3); border-top:1px dashed var(--line); padding-top:5px; margin-top:2px}
.avatar.xs{width:22px; height:22px; font-size:9.5px; display:inline-grid; vertical-align:middle}
.otoggle{position:relative; z-index:1; width:22px; height:22px; margin:-11px 0 0; border-radius:50%; border:2px solid var(--oline); background:var(--paper); cursor:pointer; padding:0}
.otoggle::before{content:"−"; display:block; font:700 13px/16px system-ui; color:var(--ink-2)}
li.collapsed > .otoggle::before{content:"+"}
li.collapsed > .otoggle{background:var(--ink); border-color:var(--ink)}
li.collapsed > .otoggle::before{color:var(--paper)}
.ostate{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-3)}
.ostate::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok)}
.ostate.vacant::before{background:var(--warn)} .ostate.off::before{background:var(--ink-3)}
.oextra{display:inline-flex; align-items:center; gap:4px; align-self:flex-start; font-size:11px; font-weight:600; color:var(--accent-text);
  border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent); border-radius:var(--r-pill); padding:1px 8px}
.oextra .ic{width:12px; height:12px}
.opanel.loading{opacity:.55; pointer-events:none; transition:opacity .15s}
.ostart{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px}
.ostep{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--paper); font-size:13px; color:var(--ink-2)}
.ostep b{color:var(--ink); font-size:14px}
.ostep .n{font-size:22px; font-weight:700; color:var(--ink); line-height:1}
.ostep.done{border-color:var(--accent-2)} .ostep.next{border:2px solid var(--accent); padding:11px 13px}
.ostep .btn{align-self:flex-start; margin-top:4px}
.oorg{display:grid; gap:10px}
.oorg .kv{grid-template-columns:120px minmax(0,1fr)}
.oscope{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600; background:var(--ok-bg); color:var(--ok)}
.oscope.none{background:var(--warn-bg); color:var(--warn)}
.otreepath{font-size:13px; line-height:1.7; margin:0 0 4px; padding:0; list-style:none}
.otreepath li{position:relative}
@media (max-width:1000px){.ostart{grid-template-columns:1fr 1fr}}
.ominimap{position:absolute; left:12px; bottom:12px; width:200px; height:130px; background:color-mix(in srgb,var(--paper) 92%,transparent);
  border:1px solid var(--line); border-radius:var(--r-s); box-shadow:var(--shadow); overflow:hidden; cursor:pointer}
.omini-inner{pointer-events:none}
.omini-inner .otree{transform-origin:0 0}
.omini-view{position:absolute; border:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 8%,transparent); border-radius:3px; pointer-events:none}
.opanel{position:sticky; top:76px; max-height:calc(100vh - 100px); overflow:auto; margin:0}
.ophead{display:flex; align-items:center; gap:8px}
.ophead .sev{margin-left:auto}
.optitle{margin:10px 0 2px; font-size:20px}
.otrail{margin:0 0 14px; font-size:13px}
.otrail a{color:inherit}
.ofacts{margin-bottom:14px}
.oactions{margin-bottom:16px}
.oactions form{display:contents}
.otabs{display:flex; flex-wrap:wrap; margin-bottom:14px; width:100%; overflow:visible; border-radius:var(--r-m)}
.otabs button{border-radius:var(--r-s)}
.otabs button{flex:1 1 auto; justify-content:center; padding:6px 8px; font-size:13px}
.otabs .count{margin-left:6px; background:var(--sunk); color:var(--ink-2)}
.opane{font-size:14px}
.omember{display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line-2); border-radius:var(--r-s)}
.ochips{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.oh3{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-3); margin:16px 0 6px}
.olist{list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px}
.olist.bullets{list-style:disc; padding-left:18px; gap:4px}
.olist.compact{font-size:13px; margin:0}
.oactivity li{display:flex; flex-direction:column; gap:1px; padding-bottom:8px; border-bottom:1px solid var(--line-2)}
.ohint{margin:14px 0 0; font-size:12px}
.operm{margin-bottom:10px} .operm ul{list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; font-size:13px}
.operm li{color:var(--ink-3)} .operm li.on{color:var(--ink)}
.mvpreview{display:flex; align-items:center; gap:12px; margin:14px 0; padding:12px; background:var(--sunk); border-radius:var(--r-s)}
.mvpreview > div{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.mvpreview small{color:var(--ink-3); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em}
.modal.wide{width:min(620px,calc(100vw - 32px))}
.modal .notice{margin:0}
.grid3 .spanall,.grid2 .spanall{grid-column:1/-1}
@media (max-width:1000px){
  .orglayout{grid-template-columns:1fr}
  .opanel{position:static; max-height:none}
  .ocanvas{height:60vh; min-height:340px}
  .ominimap{display:none}
}
/* record tables (orders, search) */
tr.rowlink{cursor:pointer}
tr.rowlink td:first-child a{color:var(--ink); text-decoration:none}
tr.rowlink:hover td:first-child a{color:var(--accent-text)}
.t-sub{font-size:12px; margin-top:2px}
.t-strong{font-weight:500}
.nowrap{white-space:nowrap}
.who-cell{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.orders-t td{vertical-align:middle}
@media (max-width:860px){ .orders-t th:nth-child(3),.orders-t td:nth-child(3),.orders-t th:nth-child(4),.orders-t td:nth-child(4){display:none} }

/* settings: grouped sections */
.setnav{margin:16px 0 4px}
.setgroup{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin:30px 0 10px; scroll-margin-top:calc(var(--appbar-h) + 12px)}
.setlinks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.setlink{display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:var(--ink); margin:0; transition:box-shadow .15s}
.setlink:hover{color:var(--ink); box-shadow:var(--shadow)}
.setlink > .ic{width:22px; height:22px; color:var(--accent); margin-top:2px}
.setlink span{display:flex; flex-direction:column; gap:2px} .setlink small{color:var(--ink-3); font-size:13px}
@media (max-width:860px){.setlinks{grid-template-columns:1fr}}

/* search discovery (app bar box + search page) */
.sx-box{position:relative}
.sx-box.is-loading input[type=search]{background-image:none}
.sx-box.is-loading::after{content:""; position:absolute; left:12px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent); animation:sxspin .7s linear infinite}
@keyframes sxspin{to{transform:rotate(360deg)}}
.sx-panel{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:60; min-width:min(560px,calc(100vw - 32px)); max-height:min(70vh,560px);
  overflow:auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-lg); padding:6px}
.ab-search .sx-panel{left:50%; right:auto; transform:translateX(-50%); width:min(620px,calc(100vw - 32px))}
.sx-group + .sx-group{border-top:1px solid var(--line-2); margin-top:4px; padding-top:4px}
.sx-h{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-3); padding:8px 10px 4px}
.sx-item{display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:var(--r-s); color:var(--ink); text-decoration:none;
  transition:background .12s, opacity .2s var(--d,0ms), transform .2s var(--d,0ms)}
.sx-anim .sx-item{opacity:0; transform:translateY(4px); transition:none}
.sx-item:hover,.sx-item.is-active{background:var(--accent-soft); color:var(--ink)}
.sx-item.is-off{opacity:.6}
.sx-icon{width:32px; height:32px; flex:none; border-radius:var(--r-xs); display:grid; place-items:center; background:var(--sunk); color:var(--ink-2)}
.sx-icon .ic{width:16px; height:16px}
.sx-order{background:var(--accent-soft); color:var(--accent-text)}
.sx-action{background:var(--ink); color:var(--paper)}
.sx-item.is-active .sx-icon:not(.sx-order):not(.sx-action){background:var(--paper)}
.sx-text{display:flex; flex-direction:column; min-width:0; flex:1}
.sx-text b{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sx-text small{font-size:12.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sx-text mark,.sx-list mark{background:none; color:var(--accent-text); font-weight:700; padding:0}
.sx-side{display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; font-size:13px}
.sx-go{color:var(--ink-3); opacity:0; transition:opacity .12s} .sx-item.is-active .sx-go,.sx-item:hover .sx-go{opacity:1; color:var(--accent-text)}
.sx-empty{display:flex; flex-direction:column; gap:4px; padding:22px 14px; text-align:center; color:var(--ink-2); font-size:13.5px}
.sx-empty b{color:var(--ink)}
.sx-foot{display:flex; align-items:center; gap:12px; justify-content:space-between; flex-wrap:wrap; border-top:1px solid var(--line-2); margin-top:4px; padding:8px 10px 4px; font-size:12px; color:var(--ink-3)}
.sx-all{font-weight:600; text-decoration:none}
.sx-keys{margin-left:auto}
.sx-keys kbd{font:600 10.5px var(--font); border:1px solid var(--line); background:var(--sunk); border-radius:5px; padding:0 5px; color:var(--ink-2)}
.ab-search.is-open > kbd{display:none}  /* the "/" hint inside the box; the panel's key hints stay */
.sx-list{list-style:none; margin:4px 0 0; padding:0}
.sx-list li + li{border-top:1px solid var(--line-2)}
.sx-list .sx-item{border-radius:var(--r-xs)}
@media (max-width:860px){.sx-panel{position:fixed; left:12px; right:12px; top:62px; min-width:0; transform:none!important; width:auto!important} .sx-keys{display:none}}
@media (prefers-reduced-motion:reduce){.sx-item{transition:background .12s} .sx-box.is-loading::after{animation:none}}

/* overview dashboard */
.metrics{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:22px 0 16px}
.metric{display:flex; flex-direction:column; gap:6px; padding:18px 20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m);
  box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none; min-width:0; transition:box-shadow .15s, transform .15s}
.metric:hover{color:var(--ink); box-shadow:var(--shadow); transform:translateY(-1px)}
.metric.dark{background:var(--ink); border-color:var(--ink); color:var(--paper)}  /* black in light mode, light in dark mode: always the strongest card */
.metric.dark:hover{color:var(--paper)}
.m-label{font-size:13px; font-weight:500; color:var(--ink-2)}
.metric.dark .m-label,.metric.dark .m-foot{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.m-value{font-size:30px; font-weight:650; letter-spacing:-.025em; line-height:1.1; overflow-wrap:anywhere}
.m-foot{font-size:12.5px; color:var(--ink-3)}
.trend{display:inline-block; font-weight:700; padding:1px 7px; border-radius:var(--r-pill); margin-right:4px; background:var(--ok-bg); color:var(--ok)}
.trend.down{background:var(--accent-soft); color:var(--accent-text)}
.metric.dark .trend{background:color-mix(in srgb,var(--paper) 14%,transparent); color:var(--paper)}
.dashgrid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:start}
.barchart{display:flex; align-items:flex-end; gap:14px; height:230px; margin-top:18px; padding-top:22px; border-bottom:1px solid var(--line)}
.bar{flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; min-width:0}
.bar-fill{width:100%; max-width:56px; min-height:2px; border-radius:8px 8px 3px 3px; background:color-mix(in srgb,var(--ink) 16%,var(--paper))}
.bar.current .bar-fill{background:var(--accent)}
.bar-val{font-size:11.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.bar.current .bar-val{color:var(--accent-text)}
.bar-label{position:absolute; bottom:-24px; font-size:12px; color:var(--ink-3)}
.bar.current .bar-label{color:var(--ink); font-weight:600}
.dashgrid .barchart{margin-bottom:28px}
.recent{list-style:none; margin:12px 0 0; padding:0}
.recent li + li{border-top:1px solid var(--line-2)}
.recent a{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 2px; color:var(--ink); text-decoration:none; border-radius:var(--r-xs)}
.recent a:hover{background:var(--canvas)}
.r-main,.r-side{display:flex; flex-direction:column; min-width:0; gap:2px}
.r-main .muted{font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.r-side{align-items:flex-end; flex:none}
.tablewrap.flat{box-shadow:none}
@media (max-width:1100px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))} .dashgrid{grid-template-columns:1fr}}
@media (max-width:520px){.metrics{grid-template-columns:1fr 1fr; gap:10px} .metric{padding:14px} .m-value{font-size:22px} .barchart{gap:6px}}
/* order: preview & send */
.sendlayout{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:16px; align-items:start}
.pdfpane{padding:12px; position:sticky; top:76px}
.pdfbar{margin-bottom:10px} .pdfbar strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-size:14px}
.grow{flex:1}
.pdfframe{display:block; width:100%; height:calc(100vh - 190px); min-height:520px; border:1px solid var(--line); border-radius:var(--r-s); background:var(--sunk)}
.pdfopen{display:none}
.sendh{display:flex; align-items:center; gap:8px; font-size:15px; margin:20px 0 10px}
.sendh svg{width:18px; height:18px}
.sentlog{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px}
.sentlog .hint{display:block}
@media (max-width:1000px){
  .sendlayout{grid-template-columns:1fr}
  .pdfpane{position:static}
  .pdfframe{display:none}
  .pdfopen{display:inline-flex; width:100%; justify-content:center}
  .pdfopen-desk{display:none}
}
@media (max-width:1100px){
  .partyrow{grid-template-columns:minmax(0,1fr) 150px 150px 26px}
  .partyrow>div:nth-child(3),.partyrow>div:nth-child(5){display:none}
  .orow{grid-template-columns:130px minmax(0,1fr) auto 140px}
  .prow.prod{grid-template-columns:56px minmax(0,1fr) 200px 26px; grid-template-areas:"img name ladder flag" "img mrp pack flag"}
  .prod .c-img{grid-area:img} .prod .c-name{grid-area:name} .prod .c-ladder{grid-area:ladder} .prod .c-flag{grid-area:flag}
  .prod .c-mrp{grid-area:mrp; text-align:left} .prod .c-pack{grid-area:pack} .prod .c-price{display:none}
}
@media (max-width:860px){
  .appbar{display:none}
  .rail .usercard{display:flex}
  :root[data-rail="mini"] .app,.app{grid-template-columns:minmax(0,1fr)}
  main{padding:16px 16px calc(88px + env(safe-area-inset-bottom,0px))}
  /* sidebar becomes a drawer */
  .rail{position:fixed; left:0; top:0; bottom:0; width:min(300px,86vw); height:auto; transform:translateX(-102%); transition:transform .22s ease; box-shadow:var(--shadow-lg)}
  :root[data-rail="mini"] .rail .lbl-t,:root[data-rail="mini"] .rail .brand-text,:root[data-rail="mini"] .rail .nav-h{display:revert}
  :root[data-rail="mini"] .rail .nav a{justify-content:flex-start; padding:9px 12px}
  body.drawer-open .rail{transform:none}
  .rail .rail-close{display:inline-grid}
  .rail .rail-collapse{display:none}
  .scrim{display:block; position:fixed; inset:0; background:rgba(8,20,22,.45); z-index:35; opacity:0; pointer-events:none; transition:opacity .2s}
  body.drawer-open .scrim{opacity:1; pointer-events:auto}
  body.drawer-open{overflow:hidden}
  .topbar{display:flex; align-items:center; gap:8px; position:sticky; top:0; z-index:30; padding:8px 10px; padding-top:calc(8px + env(safe-area-inset-top,0px));
    background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
  .topbar-brand{display:flex; align-items:center; gap:9px; flex:1; min-width:0; font-weight:700; font-size:15px; color:var(--ink); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .topbar-brand .mark{width:30px; height:30px; font-size:12px; border-radius:8px}
  .topbar .iconbtn:last-child{background:var(--accent); color:var(--accent-ink)}
  .tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--paper); border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .tabbar a,.tabbar button{position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:11px; color:var(--ink-3); text-decoration:none; padding:6px 2px; border-radius:10px; font-weight:600; border:0; background:none; cursor:pointer}
  .tabbar .ic{width:21px; height:21px}
  .tabbar [aria-current="page"]{color:var(--accent); background:var(--accent-soft)}
  .tabbar .dot{position:absolute; top:5px; left:calc(50% + 8px); width:8px; height:8px; border-radius:50%; background:var(--accent); border:2px solid var(--paper)}
  .toasts{top:auto; bottom:calc(84px + env(safe-area-inset-bottom,0px)); right:16px}

  h1{font-size:21px}
  .page-head .btn,.row:has(> h1) > .btn,.row:has(> h1) form .btn{font-size:13px; padding:6px 11px; min-height:34px}
  .toolbar{padding:8px}
  .toolbar .grow{flex-basis:100%}
  .toolbar select{flex:1 1 140px}
  .toolbar .seg{flex:1 1 100%}
  .toolbar .seg button{flex:1; justify-content:center}
  .prow{padding:12px}
  .prow.prod{grid-template-columns:52px minmax(0,1fr); grid-template-areas:"img name" "ladder ladder" "mrp pack"; gap:8px 12px}
  .prod .c-flag{display:none}
  .partyrow{grid-template-columns:minmax(0,1fr) auto}
  .partyrow>div:nth-child(2),.partyrow>div:nth-child(4){display:none}
  .orow{grid-template-columns:minmax(0,1fr) auto}
  .orow>div:nth-child(1){grid-column:1/-1}
  .kv{grid-template-columns:110px minmax(0,1fr)}
  .thumb{width:52px; height:52px}
  .grid2,.grid3,.grid4{grid-template-columns:minmax(0,1fr)}
  .span2,.span3{grid-column:auto}
  .ver{grid-template-columns:minmax(0,1fr); gap:4px}
  .panel{padding:16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}
@media print{.rail,.tabbar,.topbar,.toolbar,.toasts{display:none} .app{display:block} .panel,.plist,.tablewrap{box-shadow:none}}
.page-head h1 .sev{margin-left:12px; vertical-align:4px; letter-spacing:0}

/* ============ Users & permissions ============ */
.adduser summary{cursor:pointer; font-weight:600; display:flex; align-items:center; gap:8px; list-style:none}
.adduser summary::-webkit-details-marker{display:none}
.adduser summary .ic{color:var(--accent)}
.adduser-form{margin-top:16px}
.adduser-actions{display:flex; align-items:flex-start; justify-content:flex-end; gap:8px; padding-top:23px}  /* lines up with the field next to it */
@media (max-width:860px){.adduser-actions{padding-top:0; justify-content:stretch} .adduser-actions .btn{flex:1}}
.userrow{grid-template-columns:40px minmax(0,1.4fr) 150px 170px 150px 20px}
.userrow .avatar,.userhead .avatar{background:var(--accent-soft); color:var(--accent)}
.avatar.su{background:var(--info-bg); color:var(--info)}
.permbar{display:flex; align-items:center; gap:8px}
.permbar .bar{flex:1; height:6px; border-radius:6px; background:var(--sunk); overflow:hidden}
.permbar .bar i{display:block; height:100%; background:var(--accent); border-radius:6px}
.permbar small{font-size:12px; color:var(--ink-3); white-space:nowrap; min-width:42px}
.chev .ic{transform:scaleX(-1); color:var(--ink-3); width:16px; height:16px}
.userhead{gap:14px; flex-wrap:nowrap}
.avatar.big{width:52px; height:52px; font-size:17px}
.userlayout{display:grid; grid-template-columns:300px minmax(0,1fr); gap:16px; align-items:start; margin-top:18px}
.profile{position:sticky; top:16px}
.profile h2{margin:0 0 12px}
.pwbox{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2)}
.pwbox summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--ink-2)}
.presets{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px}
.presets small{display:block; color:var(--ink-3); font-size:12.5px}
.presets .btn.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.permcard{padding:6px 8px 8px}
.permcard-h{display:flex; align-items:center; gap:10px; padding:10px 12px 8px}
.permcard-h h2{margin:0; font-size:15px; margin-right:auto}
.areacount{font-size:12.5px}
.permrow{display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:9px; cursor:pointer}
.permrow:hover{background:var(--canvas)}
.permrow input{width:18px; height:18px; margin:2px 0 0; flex:none; cursor:pointer}
.permrow b{display:block; font-size:14px; font-weight:600}
.permrow small{display:block; color:var(--ink-3); font-size:12.5px; margin-top:1px}
.permrow:has(input:checked){background:color-mix(in srgb,var(--accent-soft) 55%,transparent)}
fieldset:disabled .permrow{cursor:default; opacity:.8}
/* toggle switch */
.switch{display:flex; align-items:flex-start; gap:10px; cursor:pointer; position:relative}
.switch input{position:absolute; opacity:0; width:1px; height:1px}
.switch > span{flex:none; width:38px; height:22px; border-radius:22px; background:var(--line); position:relative; transition:background .15s; margin-top:1px}
.switch > span::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:transform .15s}
.switch input:checked + span{background:var(--accent)}
.switch input:checked + span::after{transform:translateX(16px)}
.switch input:indeterminate + span{background:var(--accent-2)}
.switch input:indeterminate + span::after{transform:translateX(8px)}
.switch input:focus-visible + span{box-shadow:0 0 0 3px var(--ring)}
.switch b{display:block; font-size:14px}
.switch small{display:block; color:var(--ink-3); font-size:12.5px}
.switch.small{align-items:center; gap:6px}
.switch.small > span{width:32px; height:18px}
.switch.small > span::after{width:12px; height:12px}
.switch.small input:checked + span::after{transform:translateX(14px)}
.switch.small input:indeterminate + span::after{transform:translateX(7px)}
.savebar{position:sticky; bottom:12px; z-index:5; display:flex; align-items:center; gap:8px; margin-top:12px; padding:10px 14px; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-lg)}
.savebar.dirty{border-color:var(--warn); background:var(--warn-bg)}
.savebar.dirty #dirtytext{color:var(--warn); font-weight:600}
@media (max-width:1100px){ .userrow{grid-template-columns:40px minmax(0,1fr) 140px 150px 20px} .userrow > .pack{display:none} }
@media (max-width:860px){
  .userrow{grid-template-columns:40px minmax(0,1fr) 20px; grid-template-areas:none}
  .userrow > div:nth-child(3),.userrow > .permbar{display:none}
  .userlayout{grid-template-columns:minmax(0,1fr)}
  .profile{position:static}
  .savebar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
.app.noshell{grid-template-columns:minmax(0,1fr)}
.app.noshell main{margin:0 auto}

/* ============ Search clear (×) and Clear filters ============ */
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none; display:none}
input[type=search]{padding-right:34px}
.grow,.toolbar .grow{position:relative}
.searchclear{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:26px; height:26px; border:0; border-radius:50%;
  background:var(--sunk); color:var(--ink-2); display:grid; place-items:center; cursor:pointer; padding:0}
.searchclear:hover{background:var(--line); color:var(--ink)}
.searchclear .ic{width:14px; height:14px; stroke-width:2.4}
input[type=search]:placeholder-shown + .searchclear{display:none}
.searchwrap{position:relative; margin-top:4px}
.clearall{color:var(--ink-2)}
.clearall:hover{color:var(--err); background:var(--err-bg)}
.clearall .ic{width:15px; height:15px}

/* ============ Company logo ============ */
.brand.has-logo{flex:1; min-width:0}
.logo-tile{display:flex; align-items:center; justify-content:center; width:100%; height:64px; padding:8px 12px; background:#fff; border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.logo-tile img{display:block; max-width:100%; max-height:100%; object-fit:contain}
.logo-tile .logo-square{display:none}
:root[data-rail="mini"] .brand.has-logo{flex:none}
:root[data-rail="mini"] .logo-tile{width:44px; height:44px; padding:3px; border-radius:10px}
:root[data-rail="mini"] .logo-tile .logo-wide{display:none}
:root[data-rail="mini"] .logo-tile .logo-square{display:block}
.topbar-brand .brand-logo{height:34px; max-width:150px; object-fit:contain; background:#fff; border-radius:7px; padding:2px 6px}
.login-logo{display:inline-flex; background:#fff; border-radius:14px; padding:12px 18px; margin-bottom:18px; border:1px solid var(--line)}
.login-logo img{display:block; height:72px; max-width:260px; object-fit:contain}
@media (max-width:860px){ :root[data-rail="mini"] .logo-tile{width:100%; height:64px; padding:8px 12px} :root[data-rail="mini"] .logo-tile .logo-wide{display:block} :root[data-rail="mini"] .logo-tile .logo-square{display:none} }

/* ============ Password card ============ */
/* layout: profile + password on the left, permissions on the right, save bar across the bottom */
form.contents{display:contents}
.userlayout{grid-template-rows:auto 1fr auto}  /* row 1 hugs Profile; the tall permissions list stretches row 2, not row 1 */
.userlayout > form > .profile{grid-column:1; grid-row:1; position:static; margin:0}
.userlayout > form > .perms{grid-column:2; grid-row:1 / span 2}
.userlayout > .pwcard{grid-column:1; grid-row:2; align-self:start; margin:0}
.userlayout > form > .savebar{grid-column:1 / -1; grid-row:3}
.pwcard h2{margin:0 0 12px}
.pwinput{position:relative}
.pwinput input{padding-right:44px}
.pwinput .iconbtn{position:absolute; right:2px; top:50%; transform:translateY(-50%); width:34px; height:34px}
.pwinput .iconbtn.on{color:var(--accent)}
.pwinput input[aria-invalid="true"]{border-color:var(--err)}
.pwdone{background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:var(--r-m); padding:12px 14px; margin-bottom:16px}
.pwdone-h{display:flex; align-items:center; gap:8px; color:var(--accent)}
.pwdone-h b{color:var(--ink)}
.pwdone p{margin:6px 0 10px; font-size:13px}
.pwshow{display:flex; align-items:center; gap:8px; background:var(--paper); border:1px dashed var(--accent); border-radius:8px; padding:6px 6px 6px 12px}
.pwshow code{flex:1; font:600 16px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.02em; overflow-wrap:anywhere; user-select:all}
.pwsend{margin-top:10px}
@media (max-width:860px){ .userlayout{grid-template-rows:none} .userlayout > form > .profile,.userlayout > form > .perms,.userlayout > .pwcard,.userlayout > form > .savebar{grid-column:1; grid-row:auto} .userlayout > .pwcard{order:1} .userlayout > form > .perms{order:2} .userlayout > form > .savebar{order:3} }
/* user page: Profile, Organization and Password stack on the left; permissions span them */
.userlayout{grid-template-rows:auto auto auto 1fr auto}
.userlayout > form > .perms{grid-row:1 / span 4}
.userlayout > .orgcard{grid-column:1; grid-row:2; margin:0; align-self:start}
.userlayout > .orgcard h2{margin:0 0 12px}
.orgcard .hint{font-size:12.5px; line-height:1.45}
.userlayout > .orgcard .kv{grid-template-columns:110px minmax(0,1fr); font-size:13.5px}
.userlayout > .pwcard{grid-row:3}
.userlayout > form > .savebar{grid-row:5}
@media (max-width:860px){.userlayout > .orgcard,.userlayout > .pwcard{grid-column:1; grid-row:auto} .userlayout > form > .perms{grid-row:auto}}

input[style*="uppercase"]::placeholder{text-transform:none}  /* keep "Optional, e.g." readable */
/* non-production copy marker (settings.SITE_BANNER) */
.sitebanner{position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:1000; background:#B45309; color:#fff; font-size:12px; font-weight:700;
  padding:3px 14px; border-radius:0 0 8px 8px; box-shadow:var(--shadow); pointer-events:none; white-space:nowrap; letter-spacing:.02em}