:root{
  /* Tinick palette — swap --brand when we have his real brand colour */
  --brand:#0e5f4f; --brand-2:#0a4a3d; --brand-wash:#e8f2ef;
  --ink:#111827; --ink-2:#374151; --mut:#6b7280; --faint:#9ca3af;
  --line:#eceff3; --line-2:#e3e7ed; --bg:#f7f8fa; --card:#ffffff; --sunk:#f3f5f8;
  --red:#b42318; --red-wash:#fef3f2; --amber:#b54708; --amber-wash:#fffaeb; --amber-dot:#f59e0b;
  --green:#067647; --green-wash:#ecfdf3; --blue:#175cd3; --blue-wash:#eff8ff; --violet:#5925dc; --violet-wash:#f4f3ff;
  --rail-w:268px;
  --shadow:0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 1px 3px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.08);
  /* derived, so the brand line above stays the only one to change */
  --brand-tint:color-mix(in srgb, var(--brand) 16%, #fff);
  --brand-glow:color-mix(in srgb, var(--brand) 25%, transparent);
  --chart-line:#1f5fa8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:400 14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
a{color:var(--brand-2)}

/* ---------- rail ---------- */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail-w); background:var(--card);
  border-right:1px solid var(--line); display:flex; flex-direction:column; z-index:20;
}
.brand{padding:22px 20px 18px; border-bottom:1px solid var(--line)}
.brand-top{display:flex; align-items:center; gap:12px}
.mark{
  width:40px; height:40px; border-radius:11px; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:19px; letter-spacing:-.02em;
  flex:none; box-shadow:0 2px 6px var(--brand-glow);
}
.mark.logo{background:var(--card); box-shadow:none; overflow:hidden}
.mark.logo img{width:100%; height:100%; object-fit:contain}
.brand-name{font-weight:600; font-size:16px; letter-spacing:-.015em; line-height:1.2}
.brand-sub{font-size:10.5px; color:var(--faint); letter-spacing:.09em; text-transform:uppercase; margin-top:2px}
.brand-pill{
  display:inline-block; margin-top:14px; padding:5px 11px; border-radius:7px;
  background:var(--brand-wash); color:var(--brand-2);
  font-size:10.5px; font-weight:600; letter-spacing:.075em; text-transform:uppercase;
}
.nav{flex:1; overflow-y:auto; padding:18px 12px}
.nav-group{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); padding:0 10px; margin:20px 0 7px}
.nav-group:first-child{margin-top:0}
.nav a{
  display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:8px;
  color:var(--ink-2); text-decoration:none; font-weight:500; font-size:13.5px; margin-bottom:1px;
}
.nav a:hover{background:var(--sunk)}
.nav a.on{background:var(--brand-wash); color:var(--brand-2); font-weight:600}
.nav a.on svg{color:var(--brand)}
.nav svg{width:17px; height:17px; flex:none; color:var(--faint)}
.badge{margin-left:auto; font-size:11.5px; font-weight:600; color:var(--mut);
  background:var(--sunk); border-radius:20px; padding:1px 8px; min-width:24px; text-align:center}
.nav a.on .badge{background:#fff; color:var(--brand-2)}
.badge.hot{background:var(--red-wash); color:var(--red)}
.who-card{display:flex; align-items:center; gap:11px; padding:14px 18px; border-top:1px solid var(--line); position:relative}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-wash);color:var(--brand-2);
  display:grid;place-items:center;font-weight:600;font-size:12px;flex:none}
.who-card b{display:block;font-size:13px;font-weight:600;line-height:1.3}
.who-card span{display:block;font-size:11.5px;color:var(--faint)}
.gear{margin-left:auto;color:var(--faint);width:17px;height:17px}
/* the gear opens a small menu with the logout */
.who-card details{margin-left:auto}
.who-card summary{list-style:none; cursor:pointer; display:grid; place-items:center; border-radius:6px; padding:3px}
.who-card summary::-webkit-details-marker{display:none}
.who-card summary:hover .gear{color:var(--ink-2)}
.who-card .menu{position:absolute; right:14px; bottom:calc(100% - 6px); background:var(--card); border:1px solid var(--line-2);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:6px; min-width:170px}
.who-card .menu button{display:flex; align-items:center; gap:9px; width:100%; padding:8px 10px; border:0; background:none;
  border-radius:7px; font:500 13px Inter,sans-serif; color:var(--ink-2); cursor:pointer; text-align:left}
.who-card .menu button:hover{background:var(--sunk)}
.who-card .menu svg{width:15px; height:15px}

/* ---------- canvas ---------- */
main{margin-left:var(--rail-w); min-height:100vh}
.topbar{
  background:var(--card); border-bottom:1px solid var(--line);
  padding:20px 32px; display:flex; align-items:center; gap:16px;
  position:sticky; top:0; z-index:10;
}
h1{margin:0; font-size:21px; font-weight:600; letter-spacing:-.02em}
.wrap{padding:24px 32px 90px; max-width:1560px}

.pills{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; margin-bottom:20px; box-shadow:var(--shadow)}
.pill{padding:8px 17px; border-radius:9px; font-size:13px; font-weight:500; color:var(--ink-2);
  border:1px solid var(--line-2); background:#fff; cursor:pointer}
.pill:hover{background:var(--sunk)}
.pill.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600}
.pills .when{margin-left:auto; color:var(--faint); font-size:12.5px}

.up{color:var(--green); font-weight:600}
.meter{height:5px; border-radius:4px; background:var(--sunk); margin-top:11px; overflow:hidden}
.meter i{display:block; height:100%; border-radius:4px; background:var(--brand)}
a.tag{text-decoration:none}
a.tag:hover{filter:brightness(.96)}
.warn{color:var(--amber); font-weight:600}
.bad{color:var(--red); font-weight:600}

.dash-cols{display:grid; grid-template-columns:1fr 400px; gap:16px; margin-bottom:20px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow)}
.card-h{display:flex; align-items:baseline; gap:12px; padding:18px 22px 0}
.card-h h2{margin:0; font-size:15.5px; font-weight:600; letter-spacing:-.01em}
.card-h .note{margin-left:auto; font-size:12px; color:var(--faint)}
.card-b{padding:16px 22px 22px}

.legend{display:flex; gap:20px; font-size:12.5px; color:var(--mut); margin-top:12px}
.legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.legend i.ln{width:16px; height:2.5px; border-radius:2px; vertical-align:3px}

.split{padding:4px 22px 20px}
.split-row{padding:14px 0; border-bottom:1px solid var(--line)}
.split-row:last-of-type{border-bottom:0}
.split-top{display:flex; align-items:baseline; gap:12px; margin-bottom:9px}
.split-top b{font-size:13.5px; font-weight:600}
.split-top span{margin-left:auto; font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums}
.bar{height:7px; border-radius:5px; background:var(--sunk); overflow:hidden}
.bar i{display:block; height:100%; border-radius:5px; background:var(--brand)}
.split-sub{font-size:12px; color:var(--faint); margin-top:7px}
.split-sub .mono{color:var(--mut)}
.total{display:flex; align-items:baseline; padding:15px 22px; border-top:1px solid var(--line-2);
  font-size:10.5px; font-weight:600; letter-spacing:.085em; text-transform:uppercase; color:var(--faint)}
.total b{margin-left:auto; font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); text-transform:none}

/* tags and buttons, used everywhere */
.body{flex:1; min-width:0}
.tags{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12px; color:var(--mut)}
.tag{display:inline-block; padding:2.5px 9px; border-radius:6px; font-size:11.5px; font-weight:600; white-space:nowrap}
.tag.crit{background:var(--red-wash); color:var(--red)}
.tag.soon{background:var(--amber-wash); color:var(--amber)}
.tag.watch{background:var(--sunk); color:var(--mut)}
.tag.ok{background:var(--green-wash); color:var(--green)}
.tag.info{background:var(--blue-wash); color:var(--blue)}
.btn{padding:7px 15px; border-radius:8px; font:600 12.5px Inter,sans-serif; cursor:pointer;
  border:1px solid var(--line-2); background:#fff; color:var(--ink-2)}
.btn:hover{background:var(--sunk)}
.btn.go{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.go:hover{background:var(--brand-2)}

.sec-lbl{font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--faint); margin:28px 0 11px}


.ask{position:fixed; right:28px; bottom:26px; display:flex; align-items:center; gap:11px;
  background:var(--ink); color:#fff; border:0; border-radius:30px; padding:13px 20px;
  font:600 13.5px Inter,sans-serif; cursor:pointer; box-shadow:0 8px 28px rgba(16,24,40,.26); z-index:30}
.ask:hover{background:#000}
.ask svg{width:17px;height:17px}
.kbd{background:rgba(255,255,255,.17); border-radius:5px; padding:2px 7px; font-size:11.5px}

@media(max-width:1320px){.dash-cols{grid-template-columns:1fr}}

/* ========== beyond the mockup: what the real pages need ========== */
.topbar .right{margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--faint); font-size:12.5px}
.lang{display:inline-flex; gap:2px; padding:3px; background:var(--sunk); border-radius:9px}
.lang a{padding:3px 10px; border-radius:7px; font-size:12px; font-weight:600; color:var(--mut); text-decoration:none}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{background:var(--card); color:var(--ink); box-shadow:var(--shadow)}

/* period pills are links; the custom range opens a small form */
a.pill{text-decoration:none}
.custom{position:relative}
.custom summary{list-style:none}
.custom summary::-webkit-details-marker{display:none}
.custom form{position:absolute; top:calc(100% + 8px); left:0; z-index:15; background:var(--card); border:1px solid var(--line-2);
  border-radius:12px; box-shadow:var(--shadow-lg); padding:14px; display:flex; gap:10px; align-items:flex-end; white-space:nowrap}
.custom label{display:block; font-size:10.5px; font-weight:600; letter-spacing:.085em; text-transform:uppercase; color:var(--faint)}
.custom input{display:block; margin-top:5px; padding:7px 9px; border:1px solid var(--line-2); border-radius:8px; font:500 13px Inter,sans-serif; color:var(--ink)}


/* long supplier names: the name gives way, the amount never wraps */
.split-top b{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.split-top span{white-space:nowrap}
/* grid children default to min-width:auto, which lets a wide chart push the page sideways */
.dash-cols>*{min-width:0}

.chart .base{stroke:var(--line-2)}
.chart .grid{stroke:var(--line)}
.chart text{font-family:Inter,sans-serif; font-size:10.5px}
.chart .ax{fill:var(--faint)}
.chart .axr{fill:var(--chart-line); font-weight:600}
.chart .b{fill:var(--brand-tint)}
.chart .b.now{fill:var(--brand)}
.chart .val{fill:var(--ink); font-size:11px; font-weight:600}
.chart .ln{fill:none; stroke:var(--chart-line); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart .pt{fill:var(--chart-line); stroke:#fff; stroke-width:2}
.chart .none{fill:var(--faint); font-size:13px}

.banner{border-radius:12px; padding:12px 16px; margin-bottom:20px; font-weight:500; font-size:13.5px; border:1px solid}
.banner.demo{background:var(--amber-wash); color:var(--amber); border-color:color-mix(in srgb, var(--amber) 25%, transparent); font-weight:600}
.banner.demo code{background:var(--card); color:var(--ink); font-weight:500}
.banner.flash{background:var(--green-wash); color:var(--green); border-color:color-mix(in srgb, var(--green) 20%, transparent); font-weight:600}
code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; background:var(--sunk); padding:1px 5px; border-radius:5px}


/* plain pages: a card per section, with tables */
section.card{padding:20px 22px; margin-bottom:20px; scroll-margin-top:90px}
section.card h2{margin:0 0 4px; font-size:15.5px; font-weight:600; letter-spacing:-.01em}
h3{margin:22px 0 8px; font-size:14px; font-weight:600}
p.sub{color:var(--mut); margin:0 0 16px; max-width:80ch; font-size:13px}
p.note{color:var(--mut); font-size:12px; margin:12px 0 0}
.muted{color:var(--mut)}
.risk{color:var(--red); font-weight:600}
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:10.5px; color:var(--faint); font-weight:600; white-space:nowrap; text-transform:uppercase; letter-spacing:.085em}
td.n,th.n{text-align:right; white-space:nowrap}
tbody tr:hover td{background:#fcfdfe}
.tag.critical,.tag.err{background:var(--red-wash); color:var(--red)}

/* ================= shared components: templates/_ui.html =================
   From messages_mockup.html. Every page builds its body from these. */

/* tabs: links, so a tab is a URL and works without script */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line-2); margin-bottom:20px; overflow-x:auto}
.tab{padding:11px 16px; font-weight:600; font-size:13.5px; color:var(--mut); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--brand-2); border-bottom-color:var(--brand)}
.tab .cnt{margin-left:8px; background:var(--sunk); color:var(--mut); border-radius:20px; padding:1px 8px; font-size:11.5px}
.tab.on .cnt{background:var(--brand-wash); color:var(--brand-2)}
.tab .cnt.hot{background:var(--red-wash); color:var(--red)}

/* summary strip */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px}
.stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 18px; box-shadow:var(--shadow); min-width:0}
.stat .l{font-size:10.5px; font-weight:600; letter-spacing:.085em; text-transform:uppercase; color:var(--faint)}
.stat .v{font-size:25px; font-weight:600; letter-spacing:-.025em; margin:6px 0 2px; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stat .v.sm{font-size:17px; padding:5px 0 4px}
.stat .v.bad{color:var(--red)}
.stat .v.warn{color:var(--amber)}
.stat .v.good{color:var(--green)}
.stat .s{font-size:12px; color:var(--mut)}
.stat .v small{font-size:14px; font-weight:500; color:var(--mut); letter-spacing:0; margin-left:5px}
.stats:has(>:nth-child(5)){grid-template-columns:repeat(5,1fr)}
a.stat-link{color:inherit; text-decoration:none; display:block}
a.stat-link:hover{border-color:var(--line-2); box-shadow:var(--shadow-lg)}

/* toolbar */
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.search{position:relative}
.search svg{position:absolute; left:12px; top:11px; color:var(--faint); width:16px; height:16px}
.search input{width:350px; max-width:100%; height:38px; border:1px solid var(--line-2); border-radius:10px;
  padding:0 12px 0 36px; font:inherit; font-size:13.5px; background:#fff; color:var(--ink)}
.search input:focus{outline:2px solid var(--brand-wash); border-color:var(--brand)}
.chip-btn{padding:8px 15px; border-radius:9px; font:500 13px Inter,sans-serif; color:var(--ink-2);
  border:1px solid var(--line-2); background:#fff; cursor:pointer}
.chip-btn:hover{background:var(--sunk)}
.chip-btn.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:600}
.chip-btn .n{margin-left:6px; opacity:.65}
.tb-right{margin-left:auto; display:flex; align-items:center; gap:14px; font-size:12px; color:var(--mut)}
.tb-right .key{display:inline-flex; align-items:center; gap:7px}
.tb-right .dot{width:8px; height:8px; border-radius:50%; background:var(--amber-dot)}

/* grouped list; each list sets its own columns in --cols */
.list{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden}
.list + .list, .gallery + .list{margin-top:16px}
.cols{display:grid; grid-template-columns:var(--cols); gap:16px; align-items:center}
.cols>*{min-width:0}
.colhead{padding:10px 22px; background:var(--sunk); border-bottom:1px solid var(--line);
  font-size:10.5px; font-weight:600; letter-spacing:.085em; text-transform:uppercase; color:var(--faint)}
.cols .r{text-align:right; justify-content:flex-end}
.grp{display:flex; align-items:center; gap:10px; padding:11px 22px; background:#fbfcfd;
  border-bottom:1px solid var(--line); border-top:1px solid var(--line);
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--mut)}
.colhead + .grp-sec .grp, .grp-sec:first-child .grp{border-top:0}
.grp .cnt{background:var(--sunk); border-radius:20px; padding:0 8px; font-size:11px; letter-spacing:0; color:var(--mut)}
.grp .grp-x{margin-left:auto; letter-spacing:0; text-transform:none; font-size:12px; font-weight:500; color:var(--mut)}
.grp .grp-x b{color:var(--ink); font-weight:600}
.grp .av{width:22px; height:22px; font-size:9.5px; border-radius:6px}
.row{padding:14px 22px; border-bottom:1px solid var(--line); position:relative; background:#fff}
.grp-sec:last-child .row:last-child{border-bottom:0}
.row[data-panel],.row[data-href]{cursor:pointer}
.row[data-panel]:hover,.row[data-href]:hover{background:#fafcfb}
.row:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.row.attn::before,.row.crit::before{content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px; border-radius:0 3px 3px 0}
.row.attn::before{background:var(--amber-dot)}
.row.crit::before{background:var(--red)}
.row.picked{background:var(--brand-wash)}
.av{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-weight:700; font-size:12.5px; flex:none}
.av.sm{width:28px; height:28px; font-size:11px; border-radius:8px}
.av.t0{background:#e8f2ef; color:#0e5f4f} .av.t1{background:#eff8ff; color:#175cd3} .av.t2{background:#fffaeb; color:#b54708}
.av.t3{background:#f4f3ff; color:#5925dc} .av.t4{background:#fef3f2; color:#b42318} .av.t5{background:#f3f5f8; color:#374151}
.who b{display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who span{display:block; font-size:11.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Stock health: what an open order does to the row (late wording or the covered pill) */
.who-note{margin-top:4px; font-size:12px; line-height:1.4}
.who .who-note .tag{display:inline-block; color:var(--mut); white-space:normal}
.subj{font-size:13.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.subj.multi{white-space:normal}
.chip{display:inline-block; padding:1px 8px; border-radius:6px; background:var(--sunk); border:1px solid var(--line-2);
  font-size:12px; color:var(--ink); font-weight:500; white-space:nowrap}
.list .num{display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:13px; color:var(--ink-2); white-space:nowrap}
.list .num.mut{color:var(--mut)}
.list .num svg{width:14px; height:14px; color:var(--faint)}
.list .num small{color:var(--faint); font-size:12px}
.list .when{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--mut); white-space:nowrap}
.list .dot{width:8px; height:8px; border-radius:50%; background:var(--amber-dot); flex:none}
.list .dot.ok{background:var(--green)} .list .dot.bad{background:var(--red)} .list .dot.off{background:var(--line-2)}
.chev{color:var(--faint); display:flex}
.chev svg{width:15px; height:15px}
.no-hits{padding:48px; text-align:center; color:var(--mut)}
.list-foot{padding:12px 22px; border-top:1px solid var(--line); font-size:12px; color:var(--faint)}
a.list-more{display:block; font-size:13px; font-weight:600; color:var(--brand-2); text-decoration:none}
a.list-more:hover{background:var(--sunk)}
.hint{font-size:12.5px; color:var(--mut); margin:-6px 0 16px; max-width:100ch}

/* row selection */
.pick{display:grid; place-items:center}
.pick input{width:16px; height:16px; margin:0; accent-color:var(--brand); cursor:pointer}
.selbar{position:sticky; bottom:22px; z-index:15; display:flex; align-items:center; gap:14px; margin:16px auto 0; width:max-content; max-width:100%;
  background:var(--ink); color:#fff; border-radius:12px; padding:10px 12px 10px 18px; box-shadow:0 8px 28px rgba(16,24,40,.26);
  font-size:13px; font-weight:500}
.selbar[hidden]{display:none}
.selbar .btn{border-color:transparent}
.selbar .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.25)}
.selbar .btn.ghost:hover{background:rgba(255,255,255,.08)}
.selbar form{margin:0}

/* drawing thumbnail in a row */
.dthumb{width:40px; height:50px; border-radius:7px; border:1px solid var(--line-2); background:#fff; overflow:hidden;
  display:grid; place-items:center; color:var(--faint)}
.dthumb img{width:100%; height:100%; object-fit:contain}
.dthumb.blank{background:var(--sunk); border-style:dashed}
.dthumb.blank svg{width:16px; height:16px}

/* days of cover against lead time */
.cover{display:flex; align-items:center; gap:10px}
.cover .tr{position:relative; flex:1; height:8px; border-radius:4px; background:var(--sunk)}
.cover .tr i{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:#7fb8a7}
.cover .tr i.risk{background:var(--red)}
.cover .tr i.over{border-radius:4px 0 0 4px; -webkit-mask:linear-gradient(90deg,#000 85%,transparent); mask:linear-gradient(90deg,#000 85%,transparent)}
.cover .tr u{position:absolute; top:-5px; bottom:-5px; width:2px; margin-left:-1px; background:var(--ink); box-shadow:0 0 0 2px var(--card); border-radius:1px}
.cover b{font-size:12.5px; font-weight:600; min-width:62px; text-align:right; white-space:nowrap}
.cover b.risk{color:var(--red)}
.key i.sw{display:inline-block; width:11px; height:8px; border-radius:3px}
.key i.mk{display:inline-block; width:2px; height:13px; background:var(--ink); border-radius:1px}

/* bar for amounts (figures) */
.hbar{display:flex; align-items:center; gap:10px}
.hbar .tr{flex:1; height:8px; border-radius:4px; background:var(--sunk); overflow:hidden}
.hbar .tr i{display:block; height:100%; border-radius:4px; background:var(--brand-tint)}
.hbar b{font-size:13px; font-weight:600; min-width:78px; text-align:right; white-space:nowrap}

/* empty state */
.empty-state{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); text-align:center; padding:64px 20px}
.empty-state .ic{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin:0 auto 18px}
.empty-state .ic svg{width:26px; height:26px}
.empty-state .ic.ok{background:var(--green-wash); color:var(--green)}
.empty-state .ic.info{background:var(--sunk); color:var(--mut)}
.empty-state h3{margin:0 0 6px; font-size:18px; font-weight:600; letter-spacing:-.015em}
.empty-state p{margin:0 auto; color:var(--mut); max-width:460px}
.empty-state .sync{margin-top:16px; font-size:12px; color:var(--faint)}
.list .empty-state{border:0; box-shadow:none; border-radius:0}

/* side panel */
.scrim{position:fixed; inset:0; background:rgba(17,24,39,.32); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s}
.scrim.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(520px,100%); background:#fff; z-index:50; display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); transform:translateX(100%); visibility:hidden; transition:transform .26s ease, visibility 0s .26s}
.drawer.on{transform:none; visibility:visible; transition:transform .26s ease}
.d-head{display:flex; gap:14px; padding:22px 24px 18px; border-bottom:1px solid var(--line); align-items:flex-start}
.d-head>div{min-width:0}
.d-head h2{margin:0 0 4px; font-size:16.5px; font-weight:600; letter-spacing:-.015em; line-height:1.3}
.d-head .m{font-size:12.5px; color:var(--mut)}
.x{margin-left:auto; background:none; border:0; color:var(--faint); cursor:pointer; padding:4px; border-radius:7px; flex:none}
.x:hover{background:var(--sunk); color:var(--ink)}
.x svg{width:18px; height:18px}
.d-body{flex:1; overflow-y:auto; padding:6px 24px 24px}
.d-body .pre{white-space:pre-wrap; font-size:13.5px; color:var(--ink-2); line-height:1.6; padding-top:14px}
.d-body .pre b{color:var(--ink)}
.d-tags{display:flex; gap:8px; flex-wrap:wrap; padding:16px 0 4px}
.d-sec{padding:16px 0; border-bottom:1px solid var(--line)}
.d-sec:last-child{border-bottom:0}
.d-sec h4{margin:0 0 10px; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}
.d-sec h4 span{margin-left:6px; color:var(--mut); letter-spacing:0}
.d-note{margin:12px 0 0; padding:10px 12px; border-radius:9px; background:var(--sunk); color:var(--mut); font-size:12.5px}
.d-foot{display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--line); align-items:center}
.d-foot form{margin:0}
.d-foot .note{margin-left:auto; font-size:11.5px; color:var(--faint); text-align:right; max-width:220px}
.kv{display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin:0}
.kv div{min-width:0}
.kv dt{font-size:11.5px; color:var(--faint)}
.kv dd{margin:1px 0 0; font-size:13.5px; font-weight:600; color:var(--ink)}
.reason{white-space:pre-wrap; font-size:13px; color:var(--ink-2); line-height:1.6; background:var(--sunk); border-radius:10px; padding:12px 14px}
.d-drawing{display:flex; gap:14px; align-items:flex-start}
.d-drawing a.big{width:150px; height:190px; flex:none; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:#fff; display:grid; place-items:center}
.d-drawing a.big img{width:100%; height:100%; object-fit:contain}
.d-drawing a.big:hover{border-color:var(--brand)}
.d-drawing .meta{font-size:12.5px; color:var(--mut); overflow-wrap:anywhere}
.d-drawing .meta b{display:block; color:var(--ink); font-size:13px; margin-bottom:3px}
.tl{list-style:none; margin:0; padding:0}
.tl li{border:1px solid var(--line); border-radius:10px; margin-bottom:8px}
.tl a{display:block; padding:10px 12px; color:inherit; text-decoration:none}
.tl a:hover{background:var(--sunk); border-radius:10px}
.tl b{display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl span{display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; color:var(--mut)}
.d-more{font-size:12.5px; font-weight:600}
@media(prefers-reduced-motion:reduce){.drawer,.drawer.on,.scrim{transition:none}}

/* gallery: product and candidate drawing side by side */
.gallery{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.gallery .no-hits{grid-column:1/-1; background:var(--card); border:1px solid var(--line); border-radius:14px}
.gcard[hidden],.row[hidden],.grp-sec[hidden]{display:none}
.gcard{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); display:flex; flex-direction:column; scroll-margin-top:90px}
.gcard.alt{border-style:dashed}
.pair{display:grid; grid-template-columns:1fr 1fr; flex:1}
.pair>div{padding:16px 18px; min-width:0}
.pair>div+div{border-left:1px solid var(--line)}
.pair h5{margin:0 0 10px; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}
.pair .name{font-size:14px; font-weight:600; line-height:1.35; margin:0 0 4px; overflow-wrap:anywhere}
.pair .sub2{font-size:12px; color:var(--mut); overflow-wrap:anywhere}
.pair .tags{margin-top:10px}
.gimg{display:flex; gap:12px; align-items:flex-start}
.gimg a.pic{width:92px; height:116px; flex:none; border:1px solid var(--line-2); border-radius:9px; overflow:hidden; background:#fff; display:grid; place-items:center}
.gimg a.pic img{width:100%; height:100%; object-fit:contain}
.gimg a.pic:hover{border-color:var(--brand)}
.gimg .pic.off{background:var(--sunk); color:var(--faint); font-size:11px; text-align:center}
.gfoot{display:flex; align-items:center; gap:14px; padding:12px 18px; border-top:1px solid var(--line); flex-wrap:wrap}
.gfoot form{margin:0}
.gfoot .acts2{margin-left:auto; display:flex; gap:8px}
.conf{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mut)}
.conf .tr{width:70px; height:6px; border-radius:4px; background:var(--sunk); overflow:hidden}
.conf .tr i{display:block; height:100%; border-radius:4px}
.conf b{color:var(--ink); font-weight:600}
.method{font-size:12.5px; color:var(--mut)}
.method b{color:var(--ink); font-weight:600}

.btn:disabled{opacity:.5; cursor:default}
a.btn{display:inline-block; text-decoration:none}
.list a.muted{text-decoration:none}
.list a.muted:hover{color:var(--brand-2)}

@media(max-width:1250px){.stats,.stats:has(>:nth-child(5)){grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:1fr}}
@media(max-width:1000px){
  .colhead{display:none}
  .cols{grid-template-columns:var(--cols-sm, 1fr auto); gap:8px 12px}
  .cols .sm-hide{display:none}
  .cols .sm-wide{grid-column:1/-1; order:1}
  .search, .search input{width:100%}
  .tb-right{margin-left:0}
  .pair{grid-template-columns:1fr}
  .pair>div+div{border-left:0; border-top:1px solid var(--line)}
}

/* mail: waiting meter, shipment cards, conversation bubbles */
.wait{display:flex; align-items:center; gap:10px}
.wait .tr{flex:1; height:6px; border-radius:4px; background:var(--sunk); overflow:hidden}
.wait .tr i{display:block; height:100%; border-radius:4px; background:#a6c9bf}
.wait .tr i.hot{background:var(--amber-dot)}
.wait b{font-size:12.5px; font-weight:600; min-width:64px; text-align:right; white-space:nowrap}
.filterbar{display:flex; align-items:center; gap:12px; background:var(--blue-wash); border:1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius:10px; padding:8px 10px 8px 16px; margin-bottom:16px; font-size:13px; color:var(--blue); font-weight:500}
.filterbar .btn{margin-left:auto; text-decoration:none}
.ships{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.ships .no-hits{grid-column:1/-1; background:var(--card); border:1px solid var(--line); border-radius:14px}
.ship{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; cursor:pointer; box-shadow:var(--shadow);
  transition:box-shadow .15s, transform .15s, border-color .15s; min-width:0}
.ship[hidden]{display:none}
.ship:hover{box-shadow:var(--shadow-lg); border-color:var(--line-2); transform:translateY(-1px)}
.ship:focus-visible{outline:2px solid var(--brand)}
.ship-top{display:flex; gap:12px; align-items:center}
.ship-top>div{min-width:0}
.mode{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--sunk); color:var(--mut)}
.mode.sea{background:var(--blue-wash); color:var(--blue)}
.mode.air{background:var(--violet-wash); color:var(--violet)}
.mode svg{width:18px; height:18px}
.ship-top b{display:block; font-size:13.5px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ship-top small{display:block; font-size:12px; color:var(--faint)}
.lastfrom{margin-left:auto; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:6px; white-space:nowrap}
.lastfrom.fwd{background:var(--amber-wash); color:var(--amber)}
.lastfrom.us{background:var(--sunk); color:var(--mut)}
.ship h3{margin:15px 0 11px; font-size:15px; font-weight:600; line-height:1.35; letter-spacing:-.01em; overflow-wrap:anywhere}
.refs{display:flex; flex-wrap:wrap; gap:7px}
.ref{font-size:12px; border:1px solid var(--line-2); border-radius:6px; padding:2px 9px; background:var(--sunk); color:var(--ink)}
.ref i{font-style:normal; color:var(--faint); margin-right:7px; font-family:Inter,sans-serif; font-weight:600; font-size:10px; letter-spacing:.07em}
.ship-foot{display:flex; align-items:flex-end; gap:18px; margin-top:17px; padding-top:15px; border-top:1px solid var(--line)}
.spark-wrap{flex:1}
.spark-l{font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.spark{display:flex; align-items:flex-end; gap:3px; height:32px}
.spark b{flex:1; max-width:11px; background:#cfe3dc; border-radius:2px; min-height:2px}
.spark b.hi{background:var(--brand)}
.msgsn{font-size:12.5px; color:var(--mut); white-space:nowrap}
.msgsn b{font-size:20px; color:var(--ink); margin-right:4px; font-weight:600; letter-spacing:-.02em}
.msg{display:flex; gap:12px; margin-bottom:20px}
.msg .body{flex:1; min-width:0}
.msg .h{display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 9px; margin-bottom:6px}
.msg .h b{font-size:13px; font-weight:600}
.msg .h span{font-size:12px; color:var(--faint)}
.bubble{background:var(--sunk); border-radius:4px 12px 12px 12px; padding:11px 14px; font-size:13.5px; color:var(--ink-2);
  white-space:pre-wrap; overflow-wrap:anywhere; max-height:340px; overflow-y:auto}
.msg.us .bubble{background:var(--brand-wash); color:var(--brand-2); border-radius:12px 4px 12px 12px}
.atts{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px}
.att{display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border:1px solid var(--line-2); border-radius:8px; font-size:12px; color:var(--ink-2); background:#fff; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.att svg{width:14px; height:14px; color:var(--faint); flex:none}
.d-note.risk{background:var(--red-wash); color:var(--red); font-weight:500}
.thread-page .d-body{padding-bottom:10px}
.thread-page .d-head{border-bottom:1px solid var(--line)}
@media(max-width:1250px){.ships{grid-template-columns:1fr}}

/* density: comfortable (default) or compact, chosen per viewer in the toolbar */
.seg{display:inline-flex; background:var(--sunk); border-radius:9px; padding:3px}
.seg button{padding:5px 13px; border:0; background:transparent; font:600 12px Inter,sans-serif; border-radius:7px; color:var(--mut); cursor:pointer}
.seg button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(16,24,40,.1)}
html.compact .row{padding-top:7px; padding-bottom:7px}
html.compact .grp{padding-top:8px; padding-bottom:8px}
html.compact .av{width:28px; height:28px; font-size:11px; border-radius:8px}
html.compact .who span{display:none}
html.compact .dthumb{width:30px; height:36px}
html.compact .subj .tags{display:none}
html.compact .subj.multi{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
html.compact .stats{margin-bottom:12px}
html.compact .stat{padding:10px 16px}
html.compact .stat .v{font-size:20px; margin:3px 0 1px}
html.compact .gcard .pair>div{padding:12px 14px}
html.compact .gimg a.pic{width:64px; height:80px}

/* login */
.login{min-height:100vh; display:grid; place-items:center; padding:24px 16px; margin:0}
.login .card{width:100%; max-width:380px; padding:28px}
.login .brand-top{margin-bottom:22px}
.login h2{margin:0 0 4px; font-size:17px; font-weight:600}
.login input{width:100%; padding:10px 12px; font:inherit; border:1px solid var(--line-2); border-radius:9px; margin-bottom:12px}
.login input:focus{outline:2px solid var(--brand); outline-offset:0}
.login .btn{width:100%; padding:10px; font-size:13.5px}
.login .lang{float:right}

:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

@media(max-width:900px){
  /* the rail folds into a strip across the top instead of disappearing */
  .rail{position:static; width:auto; border-right:0; border-bottom:1px solid var(--line)}
  .brand{display:none}
  .nav{display:flex; gap:4px; overflow-x:auto; padding:10px 12px}
  .nav-group{display:none}
  .nav a{white-space:nowrap; margin:0}
  .who-card{display:none}
  main{margin-left:0}
  .wrap,.topbar{padding-left:16px;padding-right:16px}
  .topbar{position:static}
  .pills{flex-wrap:wrap}
  .pills .when{margin-left:0; width:100%}
  .card-h{flex-wrap:wrap}
  .card-h .note{margin-left:0; width:100%}
  .ask{right:16px; bottom:16px}
}