/* ==========================================================================
   FMCG HUB platform — design system v7.6 stage 3 (15 Oct 2026)
   ONE file. Every portal page uses it; no page carries its own styles.
   White header · 3 px orange→blue rule · flat white cards · no shadows.
   Blue = primary action. Orange = THE one next action on a screen (.btn-next).
   ========================================================================== */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2')}

:root{
  /* design tokens (mandatory) */
  --blue:#0055B7; --blue-dark:#003B82; --blue-pale:#E5EEF8;
  --orange:#FF6B00; --orange-dark:#B84D00; --orange-pale:#FFE9D6;
  --ink:#111111; --grey:#6B6B6B; --grey-light:#8A8A8A;
  --line:#DDDDDB; --head:#F2F4F7; --light:#F7F8FA; --page:#FFFFFF;
  --rule:linear-gradient(90deg,#FF6B00 0%,#0055B7 100%);
  --font:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  --radius:4px; --shadow:none;
  /* status pills */
  --green:#1E7A3C; --green-pale:#E6F4EA; --red:#A21515; --red-pale:#FDECEC;
  /* legacy names (inline styles and older rules still use them) → tokens */
  --navy:var(--ink); --surface:var(--page); --bg:var(--light); --zebra:var(--light); --line-2:var(--line);
  --ink-2:#3A3A3A; --ink-3:var(--grey); --blue-soft:var(--blue-pale); --orange-dk:var(--orange-dark);
  --s-draft-bg:var(--light); --s-draft:var(--grey);
  --s-open-bg:var(--blue-pale); --s-open:var(--blue);
  --s-due-bg:var(--orange-pale); --s-due:var(--orange-dark);
  --s-over-bg:var(--red-pale); --s-over:var(--red);
  --s-done-bg:var(--green-pale); --s-done:var(--green);
  /* spacing + type */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px;
  --t-min:11px; --t-small:12px; --t-body:13px; --t-input:14px; --t-section:16px; --t-title:20px;
  --radius-sm:4px; --hdr:56px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 var(--t-body)/1.5 var(--font)}
a{color:var(--blue)}
img{max-width:100%}
h1,h2,h3{margin:0;color:var(--ink);letter-spacing:-.005em}
h1{font-size:var(--t-title);line-height:1.3;font-weight:600;color:var(--blue)}
h2{font-size:var(--t-section);line-height:1.35;font-weight:600}
h3{font-size:14px;font-weight:600}
p{margin:0 0 var(--s2)}
.num,td.right,th.right,.right{text-align:right;font-variant-numeric:tabular-nums}

/* ==========================================================================
   Shell: sandbox bar · white header · 3 px rule · hub tabs · page · footer
   ========================================================================== */
.app{min-height:100vh;display:flex;flex-direction:column;min-width:0}
.top{position:sticky;top:0;z-index:50;background:var(--page)}
.hdr{position:relative;height:var(--hdr);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);background:var(--page)}
.hdr .brand{display:flex;align-items:center;flex:none;height:var(--hdr)}
.hdr .brand img{height:28px;width:auto;display:block}
.hdr .ptitle{display:none}
.hdr .burger{display:none}
.hdrmenu{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s2)}
.mainnav{display:flex;align-items:center;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.navitem{display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:var(--radius);color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap}
.navitem:hover{background:var(--light);color:var(--blue)}
.navitem.on{background:var(--blue-pale);color:var(--blue);font-weight:600}
.hrule{height:3px;background:var(--rule)}

.search{flex:0 1 240px;min-width:120px;margin-left:auto;position:relative}
.search input{width:100%;height:36px;border:1px solid var(--line);background:var(--page);border-radius:var(--radius);padding:0 10px 0 34px;font:inherit;font-size:var(--t-input);color:var(--ink)}
.search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,85,183,.18)}
.search svg{position:absolute;left:10px;top:9px;width:18px;height:18px;color:var(--grey)}
.tools{display:flex;align-items:center;gap:4px;flex:none}
.hdrmenu .search + .tools{margin-left:0}
.hdrmenu .mainnav + .tools{margin-left:auto}
.tools .sbbtn{height:32px;padding:0 10px;font-size:12px}
.iconbtn{width:36px;height:36px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);background:transparent;border:1px solid transparent;text-decoration:none;cursor:pointer;font:inherit;font-weight:700;font-size:15px}
.iconbtn:hover{background:var(--light);border-color:var(--line)}
.iconbtn svg{width:20px;height:20px}
.user{position:relative}
.user summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s1);height:40px;padding:0 var(--s1) 0 4px;border-radius:var(--radius)}
.user summary::-webkit-details-marker{display:none}
.user summary:hover{background:var(--light)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}
.user .who{display:flex;flex-direction:column;line-height:1.2}
.user .who b{font-size:13px;font-weight:600}.user .who span{font-size:var(--t-min);color:var(--grey)}
.menu{position:absolute;right:0;top:46px;background:var(--page);border:1px solid var(--line);border-radius:var(--radius);min-width:240px;padding:var(--s1);z-index:60}
.menu a,.menu .row{display:block;padding:var(--s1) 12px;border-radius:var(--radius);color:var(--ink);text-decoration:none;font-size:14px}
.menu a:hover{background:var(--light)}
.menu select{width:100%;height:36px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;padding:0 8px;background:var(--page)}
.menu hr{border:0;border-top:1px solid var(--line);margin:var(--s1) 0}

/* sandbox bar — sits above the header, a clearly different colour */
.sbbar{background:var(--orange-dark);color:#fff;font-size:12px;line-height:1.4;padding:8px var(--s3);display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s2)}
.sbbar b{font-weight:700;letter-spacing:.06em}
.sbbar .sb-t{flex:1 1 320px;min-width:0}
.sbbar .sb-a{display:flex;align-items:center;gap:var(--s2);flex:none}
.sbbar a{color:#fff;font-weight:600}
.sbbar form{display:inline;margin:0}
.sbbar button{height:28px;padding:0 10px;border:1px solid #fff;background:transparent;color:#fff;border-radius:var(--radius);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.sbbar button:hover{background:rgba(255,255,255,.14)}

/* hub tab strip */
.hubtabs{border-bottom:1px solid var(--line);background:var(--page)}
.hubtabs .in{position:relative;display:flex;gap:4px;max-width:1280px;margin:0 auto;padding:0 var(--s3);overflow-x:auto;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.hubtabs a{flex:none;display:inline-flex;align-items:center;height:44px;padding:0 12px;color:var(--grey);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.hubtabs a:hover{color:var(--blue)}
.hubtabs a.on{color:var(--blue);font-weight:600;border-bottom-color:var(--blue)}

.helpbox{display:none;background:var(--blue-pale);border-bottom:1px solid var(--line);color:var(--ink-2);font-size:14px;line-height:1.6}
.helpbox.open{display:block}
.helpbox .in{max-width:1280px;margin:0 auto;padding:12px var(--s3)}
.helpbox b{color:var(--blue-dark)}

.wrap{flex:1;width:100%;min-width:0;max-width:1280px;margin:0 auto;padding:var(--s3) var(--s3) var(--s6)}
.wrap > h1{margin-bottom:var(--s2)}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s2);margin-bottom:var(--s2);flex-wrap:wrap}
.pagehead h1{font-size:var(--t-title);font-weight:600;color:var(--blue)}
.pagehead .sub{color:var(--grey);font-size:13px;margin-top:2px}
.pagehead .actions{display:flex;gap:var(--s1);flex-wrap:wrap}
.pfoot{border-top:1px solid var(--line);color:var(--grey);font-size:var(--t-min);padding:12px var(--s3);text-align:center}

/* ---------- Page furniture (v7.6) ---------- */
.refstrip{font-size:var(--t-min);color:var(--grey);margin:0 0 var(--s2);letter-spacing:.02em}
.refstrip b{color:var(--orange);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-right:6px}
.nextline{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) var(--s2);font-size:15px;font-weight:500;color:var(--ink);padding:12px var(--s2);margin:0 0 var(--s2);background:var(--page);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--radius)}
.nextline .nl-t{flex:1 1 240px;min-width:0}
.nextline > .btn,.nextline > .btn-next,.nextline > .btn2,.nextline > .btn3{flex:none}
.timebar{font-size:12px;color:var(--grey);margin:0 0 var(--s2);font-variant-numeric:tabular-nums}
.secbar{display:flex;align-items:center;height:32px;background:var(--head);border-left:3px solid var(--orange);padding:0 12px;margin:var(--s2) 0 0;color:var(--blue);font-size:var(--t-min);font-weight:700;text-transform:uppercase;letter-spacing:.08em;list-style:none}
.secbar:first-child{margin-top:0}
.moving{font-size:12px;color:var(--grey);margin:var(--s2) 0 0}

/* Today list */
ol.today{list-style:none;margin:0 0 var(--s2);padding:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
ol.today > .secbar{margin:0;border-top:1px solid var(--line)}
ol.today > .secbar:first-child{border-top:0}
li.trow{display:grid;grid-template-columns:32px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:12px var(--s2);border-top:1px solid var(--line);background:var(--page)}
ol.today > li.trow:first-child,ol.today > .secbar + li.trow{border-top:0}
li.trow .tnum{grid-column:1;grid-row:1 / span 2;align-self:center;width:24px;height:24px;border-radius:50%;background:var(--head);color:var(--blue);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
li.trow .twhat{grid-column:2;font-weight:600;font-size:14px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
li.trow .twhy{grid-column:2;font-size:12px;color:var(--grey);min-width:0;overflow-wrap:anywhere}
li.trow .tbtn{grid-column:3;grid-row:1 / span 2}
li.trow[data-group="need"] .tnum{background:var(--orange-pale);color:var(--orange-dark)}
.tbtn{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:var(--radius);border:1px solid var(--line);background:var(--page);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.tbtn:hover{border-color:var(--blue);color:var(--blue)}
.tbtn.btn-next,.tbtn.btn-next:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.tbtn.btn-next:hover{background:var(--orange-dark);border-color:var(--orange-dark)}

/* hubs */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s2)}
.hubcard{display:flex;flex-direction:column;gap:4px;background:var(--page);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2);text-decoration:none;color:var(--ink)}
.hubcard:hover{border-color:var(--blue)}
.hubcard .hc-t{font-size:15px;font-weight:600;color:var(--blue)}
.hubcard .hc-d{font-size:13px;color:var(--grey);line-height:1.45}

/* steps strip: <ol class="steps"><li><b>Label</b><span>caption</span></li>…</ol> */
ol.steps{list-style:none;counter-reset:st;margin:0 0 var(--s2);padding:0;display:flex;flex-direction:column;gap:6px}
ol.steps > li{counter-increment:st;position:relative;border-left:3px solid var(--orange);background:var(--light);padding:8px 12px 8px 40px;border-radius:0 var(--radius) var(--radius) 0}
ol.steps > li::before{content:counter(st);position:absolute;left:12px;top:8px;font-size:13px;font-weight:700;color:var(--orange-dark)}
ol.steps > li b,ol.steps > li strong{display:block;font-size:13px;font-weight:700;color:var(--ink)}
ol.steps > li span,ol.steps > li small{display:block;font-size:12px;color:var(--grey)}
ol.steps > li.done{border-left-color:var(--green)}
ol.steps > li.done::before{color:var(--green)}

/* ---------- Cards ---------- */
.card{background:var(--page);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2);margin-bottom:var(--s2);box-shadow:none;min-width:0}
.card > h2,.card h2{font-size:15px;font-weight:600;margin:0 0 12px;display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap}
.card h2 .count{background:var(--orange-pale);color:var(--orange-dark);border-radius:10px;font-size:var(--t-min);font-weight:700;padding:0 8px;line-height:20px}
.card.flush{padding:0;overflow:hidden}
.card.flush > h2{padding:12px var(--s2);margin:0;border-bottom:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:3fr 2fr;gap:var(--s2)}
.grid-2 > .card{margin-bottom:0;min-width:0}
.stack > * + *{margin-top:var(--s2)}

/* ---------- Notices ---------- */
.msg,.err,.note{border-radius:var(--radius);padding:10px 14px;font-size:14px;margin-bottom:var(--s2);border:1px solid;overflow-wrap:anywhere}
.msg{background:var(--green-pale);border-color:#BFE0C9;color:var(--green)}
.err{background:var(--red-pale);border-color:#F2C2C2;color:var(--red)}
.note{background:var(--orange-pale);border-color:#F5CBA6;color:var(--orange-dark)}
.note b:first-child{color:var(--orange-dark)}
.phbanner{background:var(--orange-pale);border:1px solid #F5CBA6;color:var(--orange-dark);padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;font-size:14px}

/* ---------- Tiles (dashboard) ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s2)}
.tile{background:var(--page);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:4px;position:relative;min-width:0}
.tile:hover{border-color:var(--blue)}
.tile .lbl{padding-right:20px;font-size:var(--t-min);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--blue)}
.tile .val{font-size:24px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ink)}
.tile .foot{font-size:var(--t-body);color:var(--grey);margin-top:2px}
.tile .go{color:var(--blue);font-weight:600}
.tile .light{position:absolute;top:var(--s2);right:var(--s2);width:10px;height:10px;border-radius:50%}
.light.green{background:#1E9E4A}.light.amber{background:var(--orange)}.light.red{background:#D33A3A}

/* ---------- Lists (dashboard rows) ---------- */
.rows{margin:0;padding:0;list-style:none}
.rows li{display:grid;grid-template-columns:104px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px var(--s2);border-top:1px solid var(--line);font-size:13px}
.rows li:first-child{border-top:0}
.rows li .meta{color:var(--grey);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.rows li a.go{font-weight:600;text-decoration:none;white-space:nowrap}
.rows li.simple{grid-template-columns:minmax(0,1fr) auto}
.rows .empty{color:var(--grey);grid-template-columns:1fr}

/* ---------- Status pills: in progress · waiting · needs you · done · blocked ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;font-size:var(--t-min);font-weight:600;line-height:20px;padding:0 8px;border-radius:10px;white-space:nowrap;background:var(--light);color:var(--grey);text-decoration:none;border:1px solid transparent}
.pill.s-draft,.p-draft,.p-cancelled{background:var(--light);color:var(--grey);border-color:var(--line)}
.pill.s-open,.p-issued,.p-blue{background:var(--blue-pale);color:var(--blue)}
.pill.s-due,.p-warn,.p-amber{background:var(--orange-pale);color:var(--orange-dark)}
.pill.s-overdue,.p-red{background:var(--red-pale);color:var(--red)}
.pill.s-done,.p-ok{background:var(--green-pale);color:var(--green)}
.p-cancelled{text-decoration:line-through}

/* ---------- Tables (one style) ---------- */
.tablewrap{background:var(--page);border:1px solid var(--line);border-radius:var(--radius);overflow:auto;max-height:72vh;margin-bottom:var(--s2);max-width:100%;-webkit-overflow-scrolling:touch}
.card .tablewrap{margin-bottom:0}
table.list{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--page)}
table.list th{position:sticky;top:0;z-index:2;background:var(--page);color:var(--blue);text-align:left;font-size:var(--t-min);font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:8px 12px;border-bottom:2px solid var(--blue);white-space:nowrap}
table.list td{height:36px;padding:6px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
table.list tr:hover td{background:var(--light)}
table.list tr:last-child td{border-bottom:0}
table.list tr.tot td,table tr.tot td{background:var(--blue-pale)!important;color:var(--blue);font-weight:700}
table.list td.nw{white-space:nowrap}
table.list td.num,table.list th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.list a.lnk{font-weight:600}
table.list .more{display:none}
table.list tr.open + tr.more{display:table-row}
table.list tr.more td{background:var(--light);font-size:13px;color:var(--ink-2)}
.xbtn{border:1px solid var(--line);background:var(--page);border-radius:var(--radius);width:28px;height:28px;cursor:pointer;color:var(--ink-2);font:inherit;font-weight:700}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--s1) var(--s3)}
.kv > div{min-width:0;overflow-wrap:anywhere}
.kv div span{display:block;font-size:var(--t-min);color:var(--blue);text-transform:uppercase;letter-spacing:.06em;font-weight:600}

/* ---------- Forms & buttons ---------- */
.frm{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px var(--s2)}
.frm > div{min-width:0}
.frm label,label.f{font-size:var(--t-min);font-weight:600;display:block;margin-bottom:4px;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.frm input,.frm select,.frm textarea,input.f,select.f,textarea.f{width:100%;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:var(--t-input);color:var(--ink);background:var(--page)}
.frm input[type=checkbox],.frm input[type=radio]{width:auto;height:auto}
.frm input[type=file]{padding:7px 10px}
.frm textarea,textarea.f{height:auto;min-height:72px;padding:8px 10px}
.frm input:focus,.frm select:focus,.frm textarea:focus,input.f:focus,select.f:focus,textarea.f:focus,input.sm:focus,select.sm:focus,.gate-reason input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,85,183,.18)}
.frm .full{grid-column:1/-1}
.btn,.btn2,.btn3,.btn-next{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);height:38px;padding:0 var(--s2);border-radius:var(--radius);font:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;border:1px solid transparent;white-space:nowrap;max-width:100%}
.btn{background:var(--blue);border-color:var(--blue);color:#fff}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.blue{background:var(--blue)}
.btn-next,.btn.btn-next{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-next:hover,.btn.btn-next:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn2{background:var(--page);color:var(--ink);border-color:var(--line);height:32px;padding:0 12px;font-size:13px}
.btn2:hover{border-color:var(--blue);color:var(--blue)}
.btn3{background:var(--page);color:var(--ink);border-color:var(--line)}
.btn3:hover{border-color:var(--blue);color:var(--blue)}
button[disabled],.btn[disabled],.btn.disabled{background:var(--head)!important;color:var(--grey-light)!important;border-color:var(--line)!important;cursor:not-allowed}
a.lnk{color:var(--blue);text-decoration:none;font-weight:600}
a.lnk:hover{text-decoration:underline}

/* bare controls (no class) — zero specificity, so every styled control above wins */
:where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=submit]),select,textarea){font:inherit;font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);background:var(--page);min-height:32px;padding:0 8px;max-width:100%}
:where(textarea){padding:6px 8px}
:where(input,select,textarea):focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,85,183,.18)}
table.list .btn3{height:30px;padding:0 10px;font-size:13px}

/* ---------- Hints ---------- */
.hint{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--blue-pale);color:var(--blue);font-size:var(--t-min);font-weight:700;cursor:help;position:relative;vertical-align:1px;margin-left:6px;text-transform:none;letter-spacing:0}
.hint .hintbox{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:26px;width:240px;max-width:70vw;background:var(--ink);color:#fff;font-size:12px;font-weight:400;line-height:1.5;border-radius:var(--radius);padding:10px 12px;z-index:60;text-transform:none;letter-spacing:0}
.hint:hover .hintbox,.hint:focus .hintbox{display:block}

/* ---------- Older inline sizes: floor at 11 px ---------- */
[style*="font-size:9"],[style*="font-size:10"]{font-size:var(--t-min)!important}

@media print{ .top,.sbbar,.hubtabs,.helpbox,.pfoot{display:none!important} .wrap{padding:0} }

/* ==========================================================================
   Helpers — the only "styling" a page may use (no style="" attributes)
   ========================================================================== */
.muted{color:var(--grey)!important}.ink2{color:var(--ink-2)}.blue:not(.btn){color:var(--blue)}
.danger{color:var(--red)!important}.good{color:var(--green)!important}.warn-t{color:var(--orange-dark)!important}
.t-sm{font-size:12px}.t-md{font-size:15px}.t-lg{font-size:var(--t-section);font-weight:600}
.b{font-weight:700}.caps{text-transform:uppercase;letter-spacing:.05em}.nw{white-space:nowrap}.pre{white-space:pre-wrap}
.m0{margin:0!important}.mt-1{margin-top:var(--s1)}.mt-2{margin-top:var(--s2)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}
.mb-1{margin-bottom:var(--s1)}.mb-2{margin-bottom:var(--s2)}.mb-3{margin-bottom:var(--s3)}.ml-1{margin-left:var(--s1)}
.inline{display:inline}.hide{display:none}.w100{width:100%}.self-end{align-self:end}
.row{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center}
.narrow{max-width:560px}
.frm.one{grid-template-columns:1fr}
.grid-2.even{grid-template-columns:1fr 1fr}
.grid-2.even > .card{margin-bottom:0}
.grid-2 + *{margin-top:var(--s2)}
h2.section{font-size:var(--t-section);margin:var(--s3) 0 12px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer;text-decoration:underline}
.linkbtn.danger{color:var(--red)}
input.sm,select.sm{height:32px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:13px;background:var(--page);max-width:100%}
input.w-xs{width:64px}input.w-s{width:96px}input.w-m{width:128px}input.w-l{width:260px;max-width:100%}
.chart-img{width:100%;max-width:640px;height:auto}

/* ==========================================================================
   Page components
   ========================================================================== */
/* stat strip — board, cost index, customer home */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:var(--s2)}
.stat{background:var(--page);border:1px solid var(--line);border-radius:var(--radius);padding:12px var(--s2);display:flex;flex-direction:column;gap:2px;min-width:0}
.stat .v{font-size:22px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.stat .v.sm{font-size:15px}
.stat .l{font-size:var(--t-min);color:var(--blue);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.stat.bad .v{color:var(--red)}.stat.warn .v{color:var(--orange-dark)}

/* board */
.legend{margin:0 0 var(--s2);font-size:13px;color:var(--ink-2)}
.legend summary{cursor:pointer;color:var(--blue);font-weight:600}
.legend ol{columns:3;margin:var(--s1) 0 0;padding-left:20px}
.ms{display:flex;gap:3px}.ms i{display:block;width:14px;height:10px;border-radius:2px;background:var(--line)}
.ms i.d{background:var(--green)}.ms i.n{background:var(--orange)}
.cd{font-weight:700;white-space:nowrap}.cd.ok{color:var(--green)}.cd.amber{color:var(--orange-dark)}.cd.overdue{color:var(--red)}.cd.done{color:var(--blue)}
table.list tr.late td{background:#FFF6F6}
td.qlog{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
td.qlog form{display:block}

/* calendar */
.nav2{display:flex;gap:var(--s2);align-items:center;margin-bottom:var(--s2);font-size:14px;flex-wrap:wrap}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal .h{font-size:var(--t-min);color:var(--blue);text-transform:uppercase;letter-spacing:.06em;padding:0 4px;font-weight:600}
.cal .d{background:var(--page);border:1px solid var(--line);border-radius:var(--radius);min-height:96px;padding:6px;font-size:12px;min-width:0}
.cal .d.today{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.cal .d.wk{background:var(--light)}
.cal .n{font-weight:700;font-size:13px;margin-bottom:4px}
.ev{display:block;padding:2px 6px;border-radius:3px;margin:2px 0;background:var(--blue-pale);border-left:3px solid var(--blue);color:var(--ink);text-decoration:none;line-height:1.35;overflow-wrap:anywhere}
.ev.cut{border-left-color:var(--ink);background:var(--head)}.ev.hol{border-left-color:var(--red);background:var(--red-pale)}.ev.rule{border-left-color:var(--orange);background:var(--orange-pale)}
.ev.stock{border-left-color:var(--green);background:var(--green-pale)}.ev.ship{border-left-color:#4D9BFF;background:#EAF3FF}.ev.miss{border-left-color:var(--orange-dark);background:var(--orange-pale)}
.leg{display:flex;flex-wrap:wrap;gap:6px var(--s2);font-size:12px;color:var(--ink-2);margin:var(--s2) 0 0}
.leg i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* confirmations */
.bands{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.stair{display:flex;align-items:flex-end;gap:6px;height:112px;margin:var(--s1) 0 24px}
.stair div{flex:1;background:var(--blue);border-radius:3px 3px 0 0;color:#fff;font-size:var(--t-min);font-weight:700;text-align:center;padding-top:4px;position:relative;min-width:0}
.stair div.floor{background:var(--orange)}.stair div.low{background:var(--grey-light)}
.stair div span{position:absolute;bottom:-20px;left:0;right:0;color:var(--ink-2);font-size:var(--t-min);font-weight:600}
.rulebox{background:var(--green-pale);border-left:3px solid var(--green);padding:10px 14px;border-radius:0 var(--radius) var(--radius) 0;font-size:13px;margin:var(--s2) 0}

/* in-page tabs (CRM, Leads, Broker sign-ups) */
.tabs{display:flex;gap:0;margin-bottom:var(--s2);flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);width:fit-content;max-width:100%;overflow:hidden}
.tabs a{height:34px;display:inline-flex;align-items:center;padding:0 14px;text-decoration:none;font-size:13px;font-weight:600;color:var(--ink);background:var(--page);border-right:1px solid var(--line)}
.tabs a:last-child{border-right:0}
.tabs a:hover{color:var(--blue)}
.tabs a.on{background:var(--blue);color:#fff}
.calc{font-size:12px;color:var(--blue);font-weight:600}
a.edit{color:var(--blue);text-decoration:none;font-weight:600}
table.list tr.off td{color:var(--grey-light)}

/* customer home */
.avail{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:2px;background:var(--line)}
.avail.on{background:var(--green)}
.track{display:flex;margin:var(--s2) 0 4px;position:relative;z-index:0}
.track .st{flex:1;text-align:center;font-size:var(--t-min);color:var(--grey);position:relative;padding-top:24px;min-width:0}
.track .st::before{content:'';position:absolute;top:4px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--line);z-index:1}
.track .st::after{content:'';position:absolute;top:10px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.track .st:first-child::after{display:none}
.track .st.done{color:var(--ink);font-weight:600}
.track .st.done::before,.track .st.done::after{background:var(--blue)}

/* evidence */
.ph{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.ph .s{background:var(--page);border:1px solid var(--line);border-radius:var(--radius);padding:12px;font-size:12px;min-height:120px;min-width:0}
.ph .s.ok{border-color:#BFE0C9;background:#F4FAF6}
.ph .s b{display:block;font-size:13px;margin-bottom:6px}
.ph .s .f{color:var(--ink-2);word-break:break-all}
.ph .s form{margin-top:var(--s1)}
.ph input[type=file]{font-size:12px;width:100%}
.mini{background:var(--blue-pale);color:var(--blue);border:0;border-radius:var(--radius);height:30px;padding:0 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;margin-top:4px}

/* cost index */
.gauge{position:relative;height:24px;background:var(--light);border:1px solid var(--line);border-radius:var(--radius);margin:var(--s2) 0 4px}
.gauge .band{position:absolute;top:0;bottom:0;background:var(--blue-pale);border-left:2px solid var(--blue);border-right:2px solid var(--blue)}
.gauge .pin{position:absolute;top:-6px;width:4px;height:34px;background:var(--orange);border-radius:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}

/* chat */
.chatgrid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--s2)}
.bubble{max-width:85%;border-radius:var(--radius);padding:8px 12px;align-self:flex-start;background:var(--light);border:1px solid var(--line);overflow-wrap:anywhere}
.bubble.mine{align-self:flex-end;background:var(--blue-pale);border-color:#CFDDF0}

/* sign-in family: white card, logo, gradient rule */
body.auth{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s3) var(--s2);background:var(--light)}
body.auth .sbbar{position:fixed;top:0;left:0;right:0;z-index:10}
body.auth.is-sandbox{padding-top:64px}
.authcard{background:var(--page);border:1px solid var(--line);border-radius:var(--radius);width:100%;max-width:420px;overflow:hidden}
.authhead{padding:var(--s3) var(--s4) 18px}
.authbar{height:3px;background:var(--rule)}
.authpad{padding:var(--s3) var(--s4) var(--s4)}
.authlogo{height:40px;width:auto;display:block}
.authcard h1{font-size:var(--t-title);margin-bottom:6px}
.authcard p{font-size:14px}
.authcard .frm{margin-top:var(--s2)}
.btn.wide{width:100%;height:44px;font-size:15px}
.authlinks{display:flex;justify-content:space-between;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s3);font-size:14px}
.authfoot{color:var(--grey);font-size:var(--t-min);margin-top:var(--s2);text-align:center}

/* v7.0 sweep extras */
.leg i.ev-slot{background:var(--blue)}.leg i.ev-cut{background:var(--ink)}.leg i.ev-ship{background:#4D9BFF}.leg i.ev-stock{background:var(--green)}.leg i.ev-rule{background:var(--orange)}.leg i.ev-hol{background:var(--red)}.leg i.ev-miss{background:var(--orange-dark)}
.frm.divider{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.thread{margin-top:12px;display:flex;flex-direction:column;gap:var(--s1)}
.composer{display:flex;gap:var(--s1);margin-top:var(--s2);align-items:flex-end}
.composer textarea{flex:1;min-height:48px;min-width:0}
input.f,select.f,textarea.f{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-size:var(--t-input);max-width:100%}
textarea.f{height:auto;padding:8px 10px}
.subcard{border:1px solid var(--line);border-radius:var(--radius);padding:12px var(--s2);margin:var(--s1) 0}
.m0b{margin-bottom:0}
td.clip{max-width:220px}
.gauge-scale{display:flex;justify-content:space-between;font-size:var(--t-min);color:var(--grey)}
.btn2.danger-btn{color:var(--red);background:var(--page);border-color:#F2C2C2}
.btn2.danger-btn:hover{background:var(--red-pale)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s1)}
label.check{display:flex;gap:var(--s1);align-items:center;font-weight:500;font-size:13px;color:var(--ink);text-transform:none;letter-spacing:0}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.authcard .filerow{display:flex;gap:var(--s1);margin-bottom:var(--s1);flex-wrap:wrap}
.authcard .filerow input[type=file]{flex:2 1 180px;height:auto;padding:8px;min-width:0}.authcard .filerow select{flex:1 1 120px}
body.auth .authcard:has(.filerow){max-width:560px}
/* column fold (max 7 on screen) */
table.list th.x,table.list td.x{display:none}
table.list .xbtn{width:24px;height:24px;margin-right:var(--s1);font-size:14px;line-height:1;vertical-align:1px;padding:0}
table.list .xsp{display:inline-block;width:32px}
table.list tr.more{display:none}
table.list tr.open + tr.more{display:table-row}
table.list tr.more td{background:var(--light)!important;border-bottom:1px solid var(--line)}
table.list tr.more .kv div{font-size:13px}
.card > h2:not(:first-child),.card > form + h2,.card > table + h2,.card > .tablewrap + h2{margin-top:var(--s2)}
.frm > button,.frm > .btn,.frm > .btn2,.frm > .btn-next{justify-self:start;align-self:end}
.linkbtn{margin-left:var(--s1)}
.ph .s b::first-letter{text-transform:uppercase}
.card .tablewrap{max-height:none}
table.list .btn,table.list .btn-next{height:30px;padding:0 10px;font-size:13px}
table.list .btn2{height:28px;padding:0 10px;font-size:12px}
table.list td form.inline + form.inline,table.list td .btn2 + .btn2{margin-left:4px}
table.list td.qlog form + form{margin-left:0}

/* Lead Hub (v7.4) */
.leadgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s2)}
.leadcard{background:var(--page);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2);display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.leadcard.p1{border-left:3px solid var(--orange)}
.leadcard .ref{font-variant-numeric:tabular-nums}
.leadcard .nm{font-size:15px;font-weight:600;min-height:22px}
.kv2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--s1);font-size:13px}
.kv2 span{color:var(--grey)}
.leadcard .btn,.leadcard .btn2{align-self:flex-start;height:34px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:var(--s1) 0;border-top:1px solid var(--line);font-size:13px;display:grid;grid-template-columns:150px 90px minmax(0,1fr);gap:var(--s1)}
.timeline li:first-child{border-top:0}
.timeline .muted{font-size:12px}

/* v7.4b: broker sign-up, email-code login, online agreement */
.authcard.wide{max-width:680px}
.frm input.codebox{height:56px;font-size:28px;letter-spacing:.45em;text-align:center;font-weight:700}
div.steps{display:flex;gap:6px;margin:0 0 var(--s2);font-size:12px;color:var(--grey);flex-wrap:wrap}
div.steps span{flex:1 1 0;min-width:0;padding:6px 8px;border-radius:var(--radius);background:var(--light);border:1px solid var(--line);text-align:center}
div.steps span.on{background:var(--blue);border-color:var(--blue);color:#fff}
div.steps span.done{background:var(--green-pale);border-color:#BFE0C9;color:var(--green)}
.agreetext{max-height:55vh;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;background:var(--page);font-size:14px;line-height:1.6}
.agreetext h3{font-size:15px;margin:16px 0 6px}.agreetext h2{font-size:17px;margin:16px 0 6px}.agreetext ul{margin:0 0 10px 20px}.agreetext p{margin:0 0 10px}
.tick{display:flex;gap:10px;align-items:flex-start;font-weight:400 !important;font-size:14px !important;color:var(--ink) !important;text-transform:none !important;letter-spacing:0 !important}
.tick input{margin-top:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sect{display:flex;align-items:center;height:32px;background:var(--head);border-left:3px solid var(--orange);padding:0 12px;font-size:var(--t-min);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin:var(--s3) 0 12px}
.reqs{margin:0 0 var(--s2) 18px;font-size:14px;color:var(--ink-2)}

/* v7.5 — gates with keys: orange-pale banner, "Proceed anyway" is secondary */
.gate{background:var(--orange-pale);border:1px solid #F5CBA6;border-left:3px solid var(--orange);border-radius:var(--radius);padding:var(--s2);margin:var(--s2) 0}
.gate-h{font-size:var(--t-section);font-weight:700;color:var(--orange-dark);margin-bottom:var(--s1)}
.gate-list{margin:0 0 var(--s2) 0;padding-left:20px;font-size:14px}
.gate-list li{margin:4px 0;overflow-wrap:anywhere}
.gate-form{display:flex;flex-wrap:wrap;gap:12px var(--s2);align-items:flex-end}
.gate-reason{display:flex;flex-direction:column;gap:4px;flex:1 1 280px;min-width:0;font-size:var(--t-min);font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.gate-reason input{height:38px;border:1px solid var(--line);border-radius:var(--radius);padding:0 10px;font:inherit;font-size:var(--t-input);background:var(--page);text-transform:none;letter-spacing:0;font-weight:400;color:var(--ink)}
.gate-actions{display:flex;gap:var(--s1);flex-wrap:wrap}
.gate-actions .btn2{height:38px;font-size:14px}
.gate .gate-actions .btn{background:var(--page);color:var(--ink);border-color:var(--line)}
.gate .gate-actions .btn:hover{border-color:var(--blue);color:var(--blue)}
.gate .err{background:var(--page)}
.ready{display:flex;flex-wrap:wrap;gap:4px}
.ready .tk{display:inline-flex;align-items:center;gap:4px;font-size:var(--t-min);font-weight:600;padding:0 8px;line-height:20px;border-radius:10px;background:var(--light);color:var(--grey);border:1px solid var(--line)}
.ready .tk.on{background:var(--green-pale);color:var(--green);border-color:#BFE0C9}
.owner-fh{background:var(--blue-pale);color:var(--blue)} .owner-wt{background:#EFE9F7;color:#5B2A99}
.cmp{overflow:auto;max-width:100%}
.cmp table{border-collapse:separate;border-spacing:0;min-width:720px}
.cmp th,.cmp td{padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}
.cmp th{background:var(--page);color:var(--blue);font-size:var(--t-min);text-transform:uppercase;letter-spacing:.06em;border-bottom:2px solid var(--blue);text-align:left;position:sticky;top:0}
.cmp td.num,.cmp th.num{text-align:right;font-variant-numeric:tabular-nums}
.cmp tr.best td{background:var(--green-pale);font-weight:600}
.cmp tr.bench td{background:var(--light);color:var(--grey);font-style:italic}
.cmp .exp{color:var(--red);font-weight:600}
.steps-row{display:flex;gap:6px;flex-wrap:wrap;margin:var(--s1) 0}
.steps-row .st{padding:2px 10px;border-radius:10px;background:var(--light);color:var(--grey);border:1px solid var(--line);font-size:var(--t-min);font-weight:600}
.steps-row .st.on{background:var(--blue-pale);color:var(--blue);border-color:#CFDDF0} .steps-row .st.done{background:var(--green-pale);color:var(--green);border-color:#BFE0C9}
.sheet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s1) var(--s3)}
.sheet-grid > div{min-width:0;overflow-wrap:anywhere}
.sheet-grid .k{color:var(--blue);font-size:var(--t-min);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.sheet-grid .v{font-size:14px;font-weight:600}
.copybox{width:100%;min-height:160px;font:12px/1.4 ui-monospace,Menlo,monospace;border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.pod-img{max-width:220px;border-radius:var(--radius);border:1px solid var(--line)}
details.card summary{cursor:pointer;font-size:15px;font-weight:600}
details.card[open] summary{margin-bottom:var(--s2)}
table.list tr.hl td{background:#FFF6E8}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1200px){
  .user .who{display:none}
  .navitem{padding:0 9px}
  .search{flex-basis:180px}
}
@media (max-width:1024px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .hdr{gap:12px;padding:0 var(--s2)}
  .navitem{font-size:13px;padding:0 8px}
  .search{flex-basis:150px;min-width:100px}
  .tools .sbbtn{padding:0 8px}
}
@media (max-width:860px){
  .bands,.two,.grid-2.even,.chatgrid{grid-template-columns:1fr}
  .legend ol{columns:1}
  .cal{grid-template-columns:1fr}
  .cal .h{display:none}
  .cal .d{min-height:0}
  .timeline li{grid-template-columns:1fr}
  .leadgrid{grid-template-columns:1fr}
  table.list.stack,table.list.stack tbody,table.list.stack tr,table.list.stack td{display:block;width:100%}
  table.list.stack tr:first-child{display:none}
  table.list.stack tr{border-bottom:8px solid var(--light);padding:var(--s1) 0}
  table.list.stack td{height:auto;border:0;padding:6px var(--s2);background:transparent!important;text-align:left!important}
  table.list.stack td[data-label]::before{content:attr(data-label);display:block;font-size:var(--t-min);font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
  table.list.stack td.qlog{flex-direction:row;flex-wrap:wrap}
  table.list.stack td.qlog .btn2{height:38px;font-size:14px}
  .tablewrap{max-height:none}
}
/* phones: header = logo + page title + menu button; the menu drops down full width */
@media (max-width:760px){
  .hdr{height:52px;padding:0 var(--s2);gap:12px}
  .hdr .brand{height:52px}
  .hdr .ptitle{display:block;flex:1;min-width:0;font-size:17px;font-weight:600;color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hdr .burger{display:inline-flex;flex:none;margin-left:auto;border-color:var(--line)}
  .hdrmenu{display:none;position:absolute;top:55px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--page);border-bottom:1px solid var(--line);max-height:calc(100vh - 60px);overflow-y:auto;padding:var(--s1) 0 var(--s2)}
  body.nav-open .hdrmenu{display:flex}
  .mainnav{flex-direction:column;align-items:stretch;overflow:visible;gap:0}
  .navitem{height:48px;padding:0 var(--s2);border-radius:0;font-size:15px;border-bottom:1px solid var(--line)}
  .navitem.on{box-shadow:inset 3px 0 0 var(--blue)}
  .search{flex:none;margin:12px var(--s2) 0;min-width:0}
  .search input{height:44px;font-size:16px}
  .search svg{top:13px}
  .tools,.hdrmenu .mainnav + .tools,.hdrmenu .search + .tools{margin:12px var(--s2) 0;flex-wrap:wrap;gap:var(--s1)}
  .tools .sbbtn{height:36px}
  .user{flex-basis:100%}
  .user .who{display:flex}
  .user .menu{position:static;margin-top:4px;min-width:0}
  .sbbar{padding:8px var(--s2)}
  .hubtabs .in{padding:0 var(--s1)}
  .hubtabs a{height:42px;padding:0 10px}
  .helpbox .in{padding:12px var(--s2)}
  .wrap{padding:var(--s2) var(--s2) var(--s6)}
  .pagehead h1{font-size:18px}
  .tiles{grid-template-columns:1fr 1fr;gap:var(--s1)}
  .tile{padding:12px}
  .tile .val{font-size:20px}
  .tile .light{top:12px;right:12px}
  .rows li{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px}
  .rows li .pill{grid-column:1/-1;justify-self:start}
  .rows li .meta{grid-column:1;text-align:left}
  .card{padding:12px}
  .card.flush > h2{padding:12px}
  .btn,.btn-next,.btn3{height:44px}
  .frm{grid-template-columns:1fr}
  .frm input,.frm select{height:44px;font-size:16px}
  li.trow{grid-template-columns:28px minmax(0,1fr);padding:12px}
  li.trow .tnum{grid-row:1}
  li.trow .tbtn{grid-column:2;grid-row:auto;justify-self:start;margin-top:8px;height:40px}
  .hubgrid{grid-template-columns:1fr;gap:12px}
  .nextline{font-size:14px;padding:10px 12px}
  .tabs{width:auto}
  .authhead{padding:var(--s2) var(--s3) 14px}
  .authpad{padding:var(--s2) var(--s3) var(--s3)}
  .pfoot{padding:12px var(--s2)}
  .gate-actions .btn,.gate-actions .btn2{height:40px}
}

/* ==========================================================================
   v7.6 stage 2 — the living box: journey strip · 8-step ladder · pipeline ·
   carrier tracking link · prepared emails. Flat, 4 px radius, no shadows.
   ========================================================================== */
/* journey strip: 7 stages, count big, money small; .need = orange 2 px outline */
nav.journey{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s1);margin:0 0 var(--s2)}
a.jstage{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;background:var(--page);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);text-decoration:none;cursor:pointer}
a.jstage:hover{border-color:var(--blue)}
a.jstage:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
a.jstage.need{border-color:var(--orange);outline:2px solid var(--orange);outline-offset:-2px}
a.jstage .js-l{font-size:var(--t-min);font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.jstage.need .js-l{color:var(--orange-dark)}
a.jstage .js-n{font-size:24px;line-height:1.15;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
a.jstage .js-m{font-size:12px;color:var(--grey);min-height:18px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
a.jstage.on{border-color:var(--blue);background:var(--blue-pale)}

/* the ladder progress bar: 8 thin cells, done cells blue */
.ladder{display:inline-flex;gap:2px;width:96px;max-width:100%;height:6px;vertical-align:middle;flex:none}
.ladder > i{flex:1 1 0;min-width:0;background:var(--line);border-radius:1px}
.ladder > i.d{background:var(--blue)}
td .ladder{display:flex;margin-top:4px}

/* the ladder steps on box.php: horizontal on desktop, vertical on phone */
ol.ladder-steps{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--s1)}
li.lstep{position:relative;min-width:0;padding:16px 0 0;border-top:3px solid var(--line);font-size:13px;color:var(--grey);overflow-wrap:anywhere}
li.lstep::before{content:"";position:absolute;top:-7px;left:0;width:11px;height:11px;border-radius:50%;background:var(--page);border:2px solid var(--line)}
li.lstep.done{border-top-color:var(--blue);color:var(--ink)}
li.lstep.done::before{background:var(--blue);border-color:var(--blue)}
li.lstep > b,li.lstep > strong,li.lstep .ls-l{display:block;font-size:13px;font-weight:600;color:inherit}
li.lstep.done > b,li.lstep.done > strong,li.lstep.done .ls-l{color:var(--blue)}
li.lstep .ls-d,li.lstep time{display:block;font-size:12px;color:var(--ink-2)}
li.lstep span.who{display:block;font-size:12px;color:var(--grey)}
li.lstep > span.muted,li.lstep > .ls-x{display:block;font-size:12px;color:var(--grey)}

/* pipeline per warehouse */
table.pipeline td[data-col],table.pipeline th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.pipeline td[data-col]{font-weight:600}
table.pipeline tr[data-wh="0"] td{color:var(--grey)}
.pipeline-boxes,ul.pipe-boxes{list-style:none;margin:var(--s1) 0 0;padding:0;font-size:12px;color:var(--grey)}
.pipeline-boxes li,ul.pipe-boxes li{padding:4px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.pipeline-boxes li:last-child,ul.pipe-boxes li:last-child{border-bottom:0}

/* carrier tracking link (opens the carrier's own page) */
a.trk{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--page);color:var(--blue);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap;max-width:100%}
a.trk::after{content:"\2197";font-size:12px}
a.trk:hover{border-color:var(--blue)}

/* prepared emails (loading plan drafts): one row per party, copy buttons per field */
.drafts{border:1px solid var(--line);border-radius:var(--radius);background:var(--page);margin:0 0 var(--s2)}
.drafts > *{padding:12px var(--s2);border-top:1px solid var(--line);min-width:0}
.drafts > *:first-child{border-top:0}
.drafts .dhead,.drafts h3{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s1);font-size:14px;font-weight:600;color:var(--blue);margin:0 0 var(--s1)}
.drafts .kv,.drafts dl{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:6px 12px;align-items:center;margin:0;font-size:13px}
.drafts .kv > b,.drafts dt{font-size:var(--t-min);font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.drafts .kv > span,.drafts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.drafts button,.drafts .cpy,.drafts .copy{height:28px;padding:0 10px;font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:var(--radius);background:var(--page);color:var(--ink);cursor:pointer;white-space:nowrap}
.drafts button:hover,.drafts .cpy:hover,.drafts .copy:hover{border-color:var(--blue);color:var(--blue)}
.drafts .superseded,.drafts [data-status="superseded"]{opacity:.55}
.drafts .noaddr{color:var(--orange-dark);font-weight:600}
/* the panel on cbookings.php (#drafts > .draft): From/To/Cc/Subject with Copy, the body, Copy email, mark sent */
#drafts .draft{padding:12px 0;border-top:1px solid var(--line);min-width:0}
#drafts > h2 + .draft{border-top:0;padding-top:0}
#drafts .draft > h3{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1);margin:0 0 var(--s1);color:var(--blue)}
#drafts .draft.superseded,#drafts .draft.sent_by_ilyas{opacity:.7}
#drafts .draft table.list td{overflow-wrap:anywhere;word-break:break-word}
#drafts .draft table.list td:first-child{width:72px;white-space:nowrap;overflow-wrap:normal;word-break:normal;font-size:var(--t-min);font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
#drafts .draft table.list td:last-child{width:1%;white-space:nowrap;text-align:right}
#drafts details{margin:var(--s1) 0 0}
#drafts details > summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:13px}
#drafts .mailbody{margin-top:var(--s1);padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--page);max-width:100%;overflow-x:auto;font-size:13px}
#drafts .mailbody table{max-width:100%}
#drafts p.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);margin:var(--s1) 0 0}
#drafts p.row form.inline{display:inline-flex;margin:0}
.btn2.tick.on{border-color:var(--blue);color:var(--blue);background:var(--blue-pale)}

@media (max-width:1024px){
  nav.journey{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  nav.journey{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  a.jstage{padding:8px}
  a.jstage .js-l{font-size:10px;letter-spacing:.03em;white-space:normal;overflow:visible;line-height:1.25;overflow-wrap:anywhere}
  a.jstage .js-n{font-size:20px}
  a.jstage .js-m{font-size:11px;min-height:0}
  ol.ladder-steps{grid-template-columns:1fr;gap:0;padding-left:6px}
  li.lstep{border-top:0;border-left:3px solid var(--line);padding:0 0 14px 18px}
  li.lstep::before{top:2px;left:-7px}
  li.lstep.done{border-left-color:var(--blue)}
  li.lstep:last-child{padding-bottom:0}
  table.pipeline{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  table.pipeline th,table.pipeline td{padding:6px 8px}
  .drafts > *{padding:12px}
  .drafts .kv,.drafts dl{grid-template-columns:minmax(0,1fr) auto}
  .drafts .kv > b,.drafts dt{grid-column:1 / -1}
}
@media (max-width:360px){
  nav.journey{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==========================================================================
   v7.6 stage 3 — buyers + money (buyer page = statement, slips, money emails, Monday plan)
   ========================================================================== */
.acct{display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid var(--blue);border-radius:var(--radius);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:middle}
.buyerhead{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s1) 12px;margin:0 0 var(--s1)}
.buyerhead h1{margin:0;overflow-wrap:anywhere;min-width:0}
.bal-big{font-size:40px;line-height:1.1;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;margin:var(--s1) 0 4px;overflow-wrap:anywhere}
.bal-big.credit{color:var(--green)}
.bal-lbl{font-size:var(--t-min);font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:.06em;margin:0}
.overdue-line{font-size:15px;font-weight:600;margin:0 0 4px;color:var(--green)}
.overdue-line.is-over{color:var(--red)}
.pay-by{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
.pay-by.urgent{color:var(--red)}
.terms-line{font-size:13px;color:var(--ink-2);margin:4px 0 var(--s2)}
.cn-line{font-size:13px;color:var(--green);margin:0 0 var(--s1)}
.buyer-actions{display:flex;flex-wrap:wrap;gap:var(--s1);align-items:center;margin:0 0 var(--s2)}
.buyer-actions form{margin:0}
table.stmt-rows tr[data-kind="sent"] td,table.stmt-rows tr[data-kind="load"] td{color:var(--grey)}
table.stmt-rows tr[data-kind="payment"] td,table.stmt-rows tr[data-kind="credit_note"] td{color:var(--green)}
table.stmt-rows td{overflow-wrap:anywhere}
/* prepared money email */
.draft-card{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--radius);background:var(--page);padding:var(--s2);margin:0 0 var(--s2);min-width:0}
.draft-card.awaiting_confirm{border-left-color:var(--orange)}
.draft-card.sent_by_ilyas,.draft-card.superseded{opacity:.75}
.draft-card .who-big{font-size:20px;font-weight:700;color:var(--ink);line-height:1.3;overflow-wrap:anywhere;margin:0 0 4px}
.draft-card .who-big .acct{font-size:14px;height:26px}
.draft-card dl{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:6px 12px;align-items:center;margin:var(--s1) 0;font-size:13px}
.draft-card dt{font-size:var(--t-min);font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.draft-card dd{margin:0;min-width:0;overflow-wrap:anywhere}
.draft-card .mailbody{margin-top:var(--s1);padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--page);max-width:100%;overflow-x:auto;font-size:13px}
.draft-card .mailbody table{max-width:100%}
.draft-card .confirm-box{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) 12px;margin:var(--s1) 0 0;padding:12px;background:var(--orange-pale);border-radius:var(--radius)}
.draft-card .confirm-box label{display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:600;min-width:0;overflow-wrap:anywhere;flex:1 1 220px}
.copy-btn{height:28px;padding:0 10px;font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line);border-radius:var(--radius);background:var(--page);color:var(--ink);cursor:pointer;white-space:nowrap}
.copy-btn:hover{border-color:var(--blue);color:var(--blue)}
/* Monday plan */
.plan h3{margin:var(--s2) 0 6px;color:var(--blue)}
.plan ul{margin:0 0 var(--s1);padding-left:20px}
.plan-day{border-left:3px solid var(--blue-pale);padding:4px 0 4px 12px;margin:0 0 var(--s1)}
.plan-day > b{display:block;font-size:13px;color:var(--ink)}
/* slip result */
.slip-lines td{overflow-wrap:anywhere}
@media (max-width:760px){
  .bal-big{font-size:32px}
  .draft-card dl{grid-template-columns:minmax(0,1fr) auto}
  .draft-card dt{grid-column:1 / -1}
}

/* v7.7 stage 1 (bug 16 — "the first click only scrolls"): the sticky header (.top) covered the field the browser scrolled to
   when a required field was empty, and "#anchor" next-step links landed under it. Keep every jump clear of the header, and
   show an empty required field plainly (app/ui.php adds the message under it). */
input,select,textarea,[id]{scroll-margin-top:calc(var(--hdr) + 48px)}   /* header 56 px + rule + air; html scroll-padding would add to it */
.was-invalid,input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(162,21,21,.15)!important}
.fld-msg{display:block;color:var(--red);font-size:12px;font-weight:600;margin-top:4px;text-transform:none;letter-spacing:0}