/* ==========================================================================
   Shite Shifters component library. Every page loads theme.css (tokens) then this file.
   Each control is defined once here; pages only add layout that is truly theirs.
   Builders for the same components live in /assets/kit.js.

   Components (class names):
     layout     .wrap .page main .stack-v .row .grow .grid .grid2
     header     .bar .bar-in .bar-top .brand .metarow .sync .tabs
     card       .card .card-head (h2 + .desc) .card-foot .sub-block .strip
     buttons    .btn  + .dark (primary dark) .primary (green) .danger-ghost .danger .ghost  + .small
     inputs     input select textarea  .field (input + Scan)  .f (label over a control)  .check-row
     status     .pill (+ .live .warn .bad .muted)  .tag  .status  .badge  .note (.ok .warn .bad)
     numbers    .stats > .stat (label over value)   .kpis > .kpi (older markup, same look)
     progress   .progress (+ .progress-row with a % label)
     tables     .tbl-box (bordered) .tbl-wrap (scrolls)  table th td .num
     lists      .list .result .item .meta .chips .chip .loc-pill
     misc       .empty .empty-box .disc (disclosure) .hint .desc .lbl .toast dialog.danger-dialog
   ========================================================================== */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-body); }
a { color: var(--ink); }
p { margin: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- layout ---------- */
.wrap, main { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 max(var(--sp-page), env(safe-area-inset-right, 0px)) 48px max(var(--sp-page), env(safe-area-inset-left, 0px)); }
main { display: flex; flex-direction: column; gap: var(--gap-cards); padding-top: var(--sp-page); max-width: var(--wrap-wide); }
main.narrow { max-width: var(--wrap); }
main.wide { max-width: var(--wrap-wide); }
.page { display: flex; flex-direction: column; gap: var(--gap-cards); padding-top: var(--sp-page); }
.stack-v { display: flex; flex-direction: column; gap: var(--gap-in); }
.row { display: flex; gap: var(--gap-ctl); flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.row.baseline { align-items: baseline; }
.stack-v.tight { gap: var(--gap-ctl); }           /* a short list: 8px */
.stack-v.xs { gap: 4px; }                         /* a label and its lines */
.stack-v.loose { gap: 24px; }
.grid-2.loose { gap: 24px; }
.flush { margin: 0; }                             /* a hint or list with no outer margin */
.list-indent { margin: 0; padding-left: 1.2em; }
.mt-s { margin-top: var(--gap-ctl); }
.mt-m { margin-top: 10px; }
.num-in { width: 6em; }                           /* a short number box */
.num-in.xs { width: 5em; }
.label-strong { font-weight: var(--fw-semibold); }
.scroll-list { max-height: 50vh; overflow: auto; }
.row > * { min-width: 0; }
.grow { flex: 1 1 12em; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11em), 1fr)); gap: 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14em), 1fr)); gap: 12px; }
.grid label, .grid2 label { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-medium); min-width: 0; }
.grid select, .grid2 select, .grid input:not([type="checkbox"]):not([type="radio"]), .grid2 input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
h1 { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: 0; }
main > h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; }
h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* header: /assets/header.css */

/* ---------- card ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: none; padding: var(--sp-card); display: flex; flex-direction: column; gap: var(--gap-in); min-width: 0; container-type: inline-size; }
.card-head { display: flex; flex-direction: column; gap: 4px; }
.card-head.split { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; }
.card-head.split > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.meta-line { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.strip[role="button"] { cursor: pointer; }
.strip[role="button"]:hover { background: var(--sunk); }
.desc, .card-head p { color: var(--muted); font-size: var(--fs-desc); max-width: 62ch; text-wrap: pretty; margin: 0; }
.card-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.card-foot > .row { margin-left: auto; }
.card-foot .summary { font-size: var(--fs-desc); color: var(--muted); }
.card-foot .summary b { color: var(--ink); font-weight: var(--fw-semibold); }
.sub-block { background: var(--sunk); border-radius: var(--r-md); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.sub-block .sb-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sub-block .sb-label { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.sub-block .sb-value { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sub-block .sb-value .mono { font-size: 1rem; font-weight: var(--fw-medium); }
.strip { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.strip .progress { flex: 1 1 8em; }
.strip b { font-weight: var(--fw-semibold); }

/* ---------- buttons ---------- */
.btn, a.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: auto; min-height: var(--ctl-h); padding: 4px 18px; border-radius: var(--r-sm); max-width: 100%;
  font: var(--fw-semibold) var(--fs-desc)/1.2 var(--font-sans); text-decoration: none; text-align: center; overflow-wrap: anywhere; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); transition: background 0.12s, border-color 0.12s; }
.btn:hover { background: var(--sunk); }
.btn.small { min-height: var(--ctl-h-sm); padding: 4px 14px; }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.dark:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); }
.btn.primary, a.primary-link { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover, a.primary-link:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger-ghost, .btn.danger-out { background: transparent; border-color: transparent; color: var(--bad); padding: 4px 10px; }
.btn.danger-ghost:hover, .btn.danger-out:hover { background: var(--bad-bg); }
.btn.danger, .btn.dd-go { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--sunk); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }
a.primary-link { display: inline-flex; align-items: center; justify-content: center; height: var(--ctl-h-sm); padding: 0 14px; border-radius: var(--r-sm); font: var(--fw-semibold) var(--fs-desc)/1 var(--font-sans); text-decoration: none; }
a.btn-link { color: var(--ink); font-weight: var(--fw-medium); text-decoration: none; }
a.btn-link:hover { color: var(--accent); }

/* ---------- inputs ---------- */
/* :where() keeps these at no specificity, so any class (.count-in, input.code) adjusts them */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea) {
  font: var(--fw-regular) var(--fs-input) var(--font-sans); color: var(--ink); background: var(--field); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 12px; max-width: 100%; }
:where(textarea) { height: auto; min-height: 88px; padding: 10px 12px; width: 100%; resize: vertical; line-height: var(--lh-body); }
:where(select) { appearance: none; -webkit-appearance: none; padding: 0 34px 0 12px; background: var(--field) var(--chevron) no-repeat right 12px center / 12px 12px; cursor: pointer; }
:where(select):hover, :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])):hover { border-color: var(--line-hover); }
select:has(option[value=""]:checked) { color: var(--muted); }   /* not --placeholder: a chosen value's text has to pass contrast */
select option { color: var(--ink); }
input[type="date"], input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="date"].empty { color: var(--muted); }
/* iPhones give date boxes a built-in minimum width and centre the date: make them fit their column like every other field */
input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
@supports (-webkit-touch-callout: none) {
  input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; display: flex; align-items: center; font-family: var(--font-sans); font-size: var(--fs-input); }
  input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { font-family: var(--font-sans); line-height: var(--lh-tight); min-height: 0; padding: 0; }
}
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.f input[type="date"], .form-grid input[type="date"] { width: 100%; display: block; }
select.compact, input.compact { height: 34px; min-height: 34px; font-size: var(--fs-desc); }
input.code { font-family: var(--font-code); font-weight: var(--fw-medium); text-transform: uppercase; }
input.code::placeholder { text-transform: none; }
input[type="file"] { max-width: 100%; min-width: 0; min-height: var(--ctl-h); padding: 8px 0; font-size: var(--fs-desc); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: 0 0 16px; }
.lbl, .f > span:first-child, label.f { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.f .aside, .lbl .aside { color: var(--muted); font-weight: var(--fw-regular); }   /* "Owner · gets the replies" */
/* form grid: four across, two on tablets, one on phones */
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 12px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .form-grid, .form-grid.two { grid-template-columns: minmax(0, 1fr); } }
.inline-label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
/* search box with its icon inside */
.search { position: relative; flex: 1 1 14em; min-width: 0; }
.search > svg { position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: var(--muted); pointer-events: none; }
.search > input { width: 100%; padding-left: 34px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vsep { width: 1px; height: 20px; background: var(--line-strong); flex: 0 0 1px; }
@media (max-width: 760px) { .toolbar > .vsep { display: none; } }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f input, .f select, .f textarea { width: 100%; }
/* input + Scan (or any button) side by side, the same height */
.field { display: flex; gap: var(--gap-ctl); align-items: stretch; container-type: inline-size; }
.field > input, .field > select { flex: 1 1 auto; min-width: 0; width: 100%; }
.field > .btn, .field > button { flex: 0 0 auto; }
.field-help { font-size: var(--fs-sm); color: var(--muted); margin-top: -8px; }
.field-help .warn { color: var(--warn); }
/* checkbox rows */
.check-row, label.check, label.inline, .st-opt { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: var(--fs-base); font-weight: var(--fw-regular); cursor: pointer; }
.check-row .count, .st-opt .count { margin-left: auto; color: var(--muted); font-size: var(--fs-desc); font-variant-numeric: tabular-nums; }
fieldset.checks-list { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
fieldset.checks-list legend { font-size: var(--fs-sm); font-weight: var(--fw-medium); padding: 0; margin-bottom: 6px; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
/* segmented choice */
.seg { --seg-h: var(--ctl-h); display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 2px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-sm); }
.seg.small { --seg-h: var(--ctl-h-xs); }
.seg button { font: var(--fw-medium) var(--fs-desc)/1.2 var(--font-sans); border: 0; background: transparent; color: var(--muted); padding: 0 14px; min-height: calc(var(--seg-h) - 6px); border-radius: 6px; cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--panel); color: var(--ink); font-weight: var(--fw-semibold); box-shadow: var(--shadow-seg); }

/* ---------- status ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-sans); white-space: nowrap;
  background: var(--sunk); color: var(--muted); border: 0; }
.pill.live, .pill.ok, .pill.super { background: var(--accent-soft); color: var(--accent-soft-ink); }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.warn.dot::before { background: var(--warn-dot); }
.pill.bad, .pill.off { background: var(--bad-bg); color: var(--bad); }
.status, .status-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-sans); white-space: nowrap; background: var(--sunk); color: var(--muted); }
.status.open, .status.taking, .status.ready, .status-tag.warn { background: var(--warn-bg); color: var(--warn); }
.status.done, .status.picked, .status.packed, .status.collected, .status-tag.ok { background: var(--ok-bg); color: var(--ok); }
.status.assigned { background: color-mix(in srgb, var(--navy) 14%, var(--panel)); color: var(--ink); }
.status.cancelled { background: var(--sunk); color: var(--muted); }
.status-tag.bad { background: var(--bad-bg); color: var(--bad); }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-sans); background: var(--accent); color: var(--accent-ink); white-space: nowrap; vertical-align: 1px; }
.tag.web, .tag.owner { background: var(--sunk); color: var(--ink); border: 1px solid var(--line); }
.tag.bad { background: var(--bad-bg); color: var(--bad); }
.tag.ok { background: var(--accent-soft); color: var(--accent-soft-ink); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font: var(--fw-semibold) var(--fs-xs)/20px var(--font-sans); text-align: center; margin-left: 4px; }
.note { border-radius: var(--r-sm); padding: 10px 12px; font-size: var(--fs-desc); background: var(--sunk); color: var(--ink); overflow-wrap: anywhere; }
.note.ok { background: var(--ok-bg); color: var(--ok); }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.note.bad { background: var(--bad-bg); color: var(--bad); }
.ok-text { color: var(--ok); } .bad-text { color: var(--bad); } .warn-text { color: var(--warn); }

/* ---------- numbers ---------- */
.stats, .kpis { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.stats > *, .kpis > * { flex: 1 1 8.5em; }   /* boxes that wrap onto a new row stretch to fill it, so no gap is left beside the last one */
.stat, .kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-width: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); text-align: left; }
.kpi { flex-direction: column-reverse; justify-content: flex-end; }
.stat > span, .kpi > span { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-tight); }
.stat > .sub { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); }
.stat > .sub.ok { color: var(--accent-soft-ink); } .stat > .sub.bad { color: var(--bad); }
a.stat { color: var(--ink); text-decoration: none; }
a.stat:hover { background: var(--sunk); }
.stat.good > b, .stat.ok > b, .stat.accent > b { color: var(--accent); } .stat.bad > b { color: var(--bad); } .stat.warn > b { color: var(--warn); }
.stat > b, .kpi > b { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; max-width: 100%; }
.stat.good b, .kpi.good b, .stat.accent b { color: var(--accent); }
.stat.bad b, .kpi.bad b { color: var(--bad); }
.kpi.good span, .kpi.bad span { color: var(--muted); }

/* ---------- progress ---------- */
.progress { height: 6px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; }
.progress i { display: block; height: 100%; min-width: 4px; background: var(--accent); border-radius: var(--r-pill); }
.meter { height: 6px; background: var(--track); border-radius: var(--r-pill); overflow: hidden; min-width: 5em; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.meter.behind i { background: var(--warn); }
.progress-row { display: flex; align-items: center; gap: 12px; }
.progress-row .progress { flex: 1 1 auto; }
.progress-row .pct { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* ---------- tables ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl-box { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tbl-box table th { background: var(--sunk); }
.tbl-box table.stack tr { padding-left: 12px; padding-right: 12px; }   /* when a table stacks on a narrow card */
.tbl-box .tbl-foot { display: flex; gap: var(--gap-ctl); padding: 12px; border-top: 1px solid var(--line); container-type: inline-size; }
.tbl-box .tbl-foot > input { flex: 1 1 auto; min-width: 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-desc); font-variant-numeric: tabular-nums; }
th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; }
td.act { white-space: nowrap; }
.mono { font-family: var(--font-code); font-weight: var(--fw-medium); }

/* ---------- lists ---------- */
.list { display: flex; flex-direction: column; gap: 6px; }
.result { text-align: left; font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; align-items: center; min-height: 48px; }
.result:hover { background: var(--sunk); }
.result .r-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.result .r-desc { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--panel); }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: var(--fs-sm); }
.kv { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: var(--fs-sm); }
.kv b { color: var(--ink); font-weight: var(--fw-semibold); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ctl-h-xs); max-width: 100%; padding: 4px 12px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: var(--fw-medium) var(--fs-sm)/1.25 var(--font-sans); cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.chip .n { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 2px; }
.chip:hover { background: var(--sunk); }
.chip.go, .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: var(--fw-semibold); }
.chip[aria-pressed="true"] .n { color: inherit; }
.chip.static { cursor: default; }
.loc-pill { display: inline-flex; align-items: center; font-family: var(--font-code); font-weight: var(--fw-medium); font-size: var(--fs-sm); background: var(--sunk); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-xs); padding: 1px 7px; white-space: nowrap; }
.loc-pill.named { font-family: var(--font-sans); }
.loc-pill.soft { background: transparent; border-style: dashed; border-color: var(--line-strong); }

/* ---------- misc ---------- */
.hint { color: var(--muted); font-size: var(--fs-desc); margin: 0; overflow-wrap: anywhere; }
.empty { color: var(--muted); font-size: var(--fs-desc); text-align: center; padding: 16px 8px; }
.empty-box { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 22px 16px; text-align: center; color: var(--muted); font-size: var(--fs-desc); }
/* disclosure ("Still to count 365") */
details.disc > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: var(--ctl-h-xs); padding: 0 10px 0 6px; margin-left: -6px; border-radius: var(--r-sm); cursor: pointer; font-weight: var(--fw-medium); }
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); margin: 0 4px 0 2px; transition: transform 0.15s; }
details.disc[open] > summary::before { transform: rotate(45deg); }
details.disc > summary:hover { background: var(--sunk); }
details.disc > summary .count { color: var(--muted); font-weight: var(--fw-regular); }
details > summary { cursor: pointer; padding-block: 4px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r-sm); font-size: var(--fs-desc); font-weight: var(--fw-medium); max-width: calc(100% - 32px); z-index: 50; box-shadow: var(--shadow-pop); }
kbd { font-size: var(--fs-xs); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; line-height: 16px; color: var(--muted); background: var(--panel); }
.pending-tag { color: var(--warn); font-weight: var(--fw-semibold); }
a.notif-banner { text-decoration: none; color: var(--ink); border-color: var(--accent); background: var(--accent-soft); gap: 4px; }

/* Touch screens: links on their own get a finger-sized target */
@media (pointer: coarse) {
  .who a, a.back, a.set-link, a.btn-link, .metarow a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- confirm dialogs (assets/confirm.js) ---------- */
dialog.danger-dialog { border: 1px solid var(--line); border-radius: var(--r); padding: 0; width: min(30rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-pop); }
dialog.danger-dialog::backdrop { background: rgba(10, 14, 18, 0.5); }
.dd { display: flex; flex-direction: column; gap: 12px; padding: var(--sp-card); }
.dd h2 { margin: 0; font-size: var(--fs-md); color: var(--bad); }
.dd.calm h2 { color: var(--ink); }
.dd p, .dd ul { margin: 0; font-size: var(--fs-desc); }
.dd ul { padding-left: 1.2em; }
.dd-note { color: var(--muted); font-size: var(--fs-desc); }
.dd label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.dd input { width: 100%; font-family: var(--font-code); letter-spacing: 0.08em; text-transform: uppercase; }
.dd .dd-in-l { display: flex; flex-direction: column; gap: 6px; }
.dd input.dc-in { font-family: var(--font-sans); letter-spacing: normal; text-transform: none; }
.dd-msg { background: var(--bad-bg); color: var(--bad); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--fs-desc); }
.dd-actions { display: flex; gap: var(--gap-ctl); flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.btn.dd-go:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- stacked tables on narrow cards (used by office pages) ---------- */
@container (max-width: 34em) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody { display: block; }
  table.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.stack td { border: 0; padding: 0; min-width: 0; }
  table.stack td.empty { grid-column: 1 / -1; }
  table.stack input, table.stack select { width: 100%; }
}

/* ==========================================================================
   Office pages: people, companies, sale set-up (admin.html, setup.html)
   ========================================================================== */
.sale-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.client { color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.sale-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.actions { display: flex; gap: var(--gap-ctl); flex-wrap: wrap; align-items: center; }
.docs { display: flex; flex-direction: column; gap: 6px; }
.docs a { color: var(--ink); font-weight: var(--fw-medium); }
.docs > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.docs > div > a { min-width: 0; min-height: 32px; display: inline-flex; align-items: center; overflow-wrap: anywhere; }
.docs > div > .btn { margin-left: auto; }
.person, .company { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--panel); container-type: inline-size; }
.person-top { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; align-items: baseline; }
.person-top b { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.acc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); }
.acc .sales-pick { display: flex; flex-direction: column; gap: 4px; }
.acc select { width: 100%; }
#nu-access { container-type: inline-size; }
@container (max-width: 40em) {
  .acc { grid-template-columns: minmax(0, 1fr) auto; }
  .acc > :nth-child(1) { grid-column: 1 / -1; }
  .acc > :nth-child(3) { grid-column: 1 / -1; order: 4; }
}
@container (max-width: 44em) {
  #admin thead { display: none; }
  #admin table, #users { display: block; }
  #users tr { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  #users td { border: 0; padding: 0; }
  #users td:nth-child(2)::before { content: "Role"; display: block; font-size: var(--fs-sm); color: var(--muted); }
  #users td:nth-child(3)::before { content: "Email"; display: block; font-size: var(--fs-sm); color: var(--muted); }
  #users td:nth-child(4)::before { content: "Sales they can open"; display: block; font-size: var(--fs-sm); color: var(--muted); }
  #users select, #users input { width: 100%; }
}
.sale-row { display: flex; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.steps { display: flex; flex-direction: column; gap: 18px; }
.step-no { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: var(--fs-sm); margin-right: 8px; vertical-align: 0.1em; }
.map { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px 10px; align-items: center; }
.map > * { min-width: 0; }
.map select { width: 100%; }
.map .ex { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
@container (max-width: 34em) { .map { grid-template-columns: minmax(0, 1fr); gap: 2px; } .map .ex { margin-bottom: 8px; } .map > label { margin-top: 6px; } }
.sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); gap: 8px; }
.sum div { background: var(--sunk); border-radius: var(--r-sm); padding: 10px 12px; }
.sum b { display: block; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.sum span { color: var(--muted); font-size: var(--fs-sm); }
@container (max-width: 34em) {
  table.areas td:nth-child(2) { grid-column: 1 / -1; order: -1; }
  table.cats td:nth-child(1) { grid-column: 1 / -1; font-weight: var(--fw-semibold); }
  table.cats td:nth-child(4) { grid-column: 1 / -1; }
  table.cats td.num { text-align: left; }
  table.cats td:nth-child(2)::after { content: " lines"; color: var(--muted); }
  table.cats td:nth-child(3)::after { content: " units"; color: var(--muted); }
}
.danger-zone { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.danger-zone h2 { color: var(--bad); }
details.ship, details.co-sec { border-top: 1px solid var(--line); padding-top: 12px; }
details.ship > summary, details.co-sec > summary { font-weight: var(--fw-semibold); min-height: 32px; display: flex; align-items: center; }
.ship-box { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ship-box h3 { margin: 6px 0 0; }
.ship-box .carrier { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.ship-box .shop-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: var(--fs-desc); overflow-wrap: anywhere; min-width: 0; }
.ship-box .shop-steps * { overflow-wrap: anywhere; word-break: break-word; }
.ship-box .log { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--muted); margin-top: 6px; }
.ship-box .log .bad { color: var(--bad); }
.ship-box .log .ok { color: var(--ok); }
.ship-box details summary { min-height: 32px; display: flex; align-items: center; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: 12px; }
figure.lp { margin: 0; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; background: var(--sunk); }
figure.lp img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--line); }

/* ---------- multi-select dropdown (UI.multi) ---------- */
/* single select with search (UI.combo) */
.cb { position: relative; min-width: 0; }
.cb-input { width: 100%; min-height: var(--ctl-h); padding-right: 34px; text-overflow: ellipsis; }
.cb-chev { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: grid; }
.cb-chev svg { width: 14px; height: 14px; }
.cb.open .cb-chev { transform: translateY(-50%) rotate(180deg); }
.cb-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow: auto; min-width: min(28rem, 90vw);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-menu); }
.cb-opt { display: flex; flex-direction: column; gap: 1px; min-height: 40px; justify-content: center; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.cb-opt b { font-size: var(--fs-desc); font-weight: var(--fw-medium); color: var(--ink); }
.cb-path { font-size: var(--fs-xs); color: var(--muted); }
.cb-opt:hover, .cb-opt.active { background: var(--sunk); }
.cb-opt[aria-selected="true"] b { color: var(--accent-soft-ink); }
.cb-none { padding: 10px; font-size: var(--fs-sm); color: var(--muted); }
.cb-add { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-top: 1px solid var(--line); margin-top: 4px; font-size: var(--fs-desc); color: var(--accent-soft-ink); cursor: pointer; }
.cb-add svg { width: 14px; height: 14px; }
.cb-add:hover { background: var(--sunk); }
.ms { position: relative; min-width: 0; }
.ms-trigger { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; min-height: var(--ctl-h); padding: 4px 34px 4px 6px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--field) var(--chevron) no-repeat right 12px center / 12px 12px; color: var(--ink); font-size: var(--fs-input); }
.ms-trigger:hover { border-color: var(--line-hover); }
.ms-trigger:focus-visible, .ms.open .ms-trigger { border-color: var(--accent); }
.ms-ph { color: var(--muted); padding-left: 6px; }
.ms-tag { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; max-width: 100%; padding: 2px 4px 2px 10px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-soft-ink); font: var(--fw-medium) var(--fs-sm)/1.25 var(--font-sans); overflow-wrap: anywhere; }
.ms-tag button { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.ms-tag button:hover { background: var(--accent-soft-hover); }
.ms-tag svg { width: 10px; height: 10px; }
.ms-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-menu); }
.ms-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 10px; border-radius: 6px; font-size: var(--fs-desc); cursor: pointer; }
.ms-opt:hover, .ms-opt.active { background: var(--sunk); }
.ms-box { display: grid; place-items: center; width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--field); color: var(--accent-ink); }
.ms-opt[aria-selected="true"] .ms-box { background: var(--accent); border-color: var(--accent); }
.ms-box svg { width: 12px; height: 12px; stroke-width: 2.2; }

/* ---------- a record in a list: summary row, then sections (UI.record) ---------- */
.rec { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; min-width: 0; }
.rec.sel { border-color: var(--accent); }
.rec-head { display: flex; gap: 12px; align-items: center; padding: 12px 20px; }
.rec.open > .rec-head { background: var(--sunk); padding-block: 14px; }
.rec-head > input[type="checkbox"] { align-self: center; }
.rec-open { all: unset; box-sizing: border-box; flex: 1 1 auto; min-width: 0; min-height: 40px; display: flex; flex-direction: column; justify-content: center; gap: 2px; cursor: pointer; border-radius: 4px; }
.rec-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rec-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.rec-meta { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.rec-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; flex: 0 1 auto; max-width: 45%; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.rec-side .money { color: var(--ink); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.rec-sec { border-top: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sec-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sec-title h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.sec-title .count { color: var(--muted); font-variant-numeric: tabular-nums; }
.sec-title .sub { color: var(--muted); font-size: var(--fs-desc); }
@media (max-width: 480px) { .rec-head { padding-inline: 14px; } .rec-sec { padding: 16px 14px; } }

/* ---------- photos (UI.photos) ---------- */
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.thumb { position: relative; width: 112px; height: 112px; border-radius: var(--r-sm); overflow: hidden; background: var(--sunk); border: 1px solid var(--line); flex: 0 0 auto; }
.thumb > a, .thumb img { display: block; width: 100%; height: 100%; }
.thumb img { object-fit: cover; }
.thumb .x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-seg); cursor: pointer; }
.thumb .x:hover { background: var(--bad-bg); color: var(--bad); }
.thumb .x svg { width: 10px; height: 10px; }
.thumb-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 112px; height: 112px; padding: 8px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: transparent; color: var(--ink); font: var(--fw-semibold) var(--fs-desc)/1.2 var(--font-sans); text-align: center; cursor: pointer; }
.thumb-add:hover { border-color: var(--accent); }
.thumb-add:disabled { opacity: 0.6; cursor: progress; }
.thumb-add svg { width: 20px; height: 20px; }

/* ---------- activity timeline and note composer (UI.timeline, UI.composer) ---------- */
.avatar { display: grid; place-items: center; width: max(28px, 2.4em); height: max(28px, 2.4em); flex: 0 0 auto; border-radius: 50%; background: var(--accent-soft); color: var(--accent-soft-ink); font: var(--fw-semibold) var(--fs-xs)/1 var(--font-sans); }
.avatar.me { background: var(--ink); color: var(--bg); }
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: minmax(28px, auto) minmax(0, 1fr); column-gap: 12px; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-rail { display: flex; flex-direction: column; align-items: center; }
.tl-rail::after { content: ""; flex: 1 1 auto; width: 2px; min-height: 8px; background: var(--line); margin: 4px 0 -14px; }
.tl-item:last-child .tl-rail::after { display: none; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); margin-top: 7px; }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 28px; padding-top: 3px; }
.tl-head b { font-size: var(--fs-desc); font-weight: var(--fw-semibold); }
.tl-head time, .tl-head .when { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-bubble { width: fit-content; max-width: min(60ch, 100%); margin-top: 6px; padding: 10px 12px; border-radius: 0 10px 10px 10px; background: var(--sunk); font-size: var(--fs-desc); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-event { font-size: var(--fs-sm); color: var(--muted); padding-top: 2px; overflow-wrap: anywhere; }
.tl-event b { color: var(--ink); font-weight: var(--fw-medium); }
.tl-staged .tl-head .when { color: var(--warn); }
.tl-staged .link-btn { font-size: var(--fs-xs); }
.tl-more { margin-left: auto; min-width: 32px; min-height: 28px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: var(--fw-semibold) var(--fs-base) var(--font-sans); line-height: 1; cursor: pointer; }
.tl-more:hover, .tl-more:focus-visible { background: var(--sunk); color: var(--ink); }
.tl-editbox { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; max-width: min(60ch, 100%); }
.tl-edit { width: 100%; min-height: 64px; resize: vertical; font: inherit; font-size: var(--fs-input); line-height: 1.5; }
.tl-editbar { display: flex; justify-content: flex-end; gap: 8px; }
.tl-dot.ok { background: var(--accent); }
.tl-resolved { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px; border: 0; background: none; color: var(--muted); font: var(--fw-medium) var(--fs-sm) var(--font-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tl-resolved:hover, .tl-resolved:focus-visible { color: var(--ink); }
.tl-resolved svg { width: 14px; height: 14px; color: var(--accent); }
dialog.sheet { border: 1px solid var(--line); border-radius: var(--r); padding: 0; width: min(36rem, calc(100vw - 32px)); max-height: min(80dvh, 720px); background: var(--panel); color: var(--ink); box-shadow: var(--shadow-pop); overflow: hidden; }
dialog.sheet[open] { display: flex; flex-direction: column; }
dialog.sheet::backdrop { background: rgba(10, 14, 18, 0.5); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.sheet-x { min-width: 40px; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.sheet-x:hover, .sheet-x:focus-visible { background: var(--sunk); color: var(--ink); }
.sheet-x svg { width: 18px; height: 18px; }
.sheet-body { overflow: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.sheet-note { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.sheet-note:last-child { border-bottom: 0; padding-bottom: 0; }
.sheet-note .tl-bubble { margin-top: 0; }
.sheet-note .meta-line { margin: 0; }
.sheet-note .sheet-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {   /* a bottom sheet on phones */
  dialog.sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r) var(--r) 0 0; border-bottom: 0; max-height: 85dvh; padding-bottom: env(safe-area-inset-bottom); }
  dialog.sheet[open] { animation: sheet-up .18s ease-out; }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }
.link-btn { border: 0; background: transparent; padding: 4px 2px; min-height: 24px; color: var(--muted); font: var(--fw-medium) var(--fs-sm) var(--font-sans); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--bad); }
.composer-wrap { position: relative; min-width: 0; }
.composer { display: flex; align-items: flex-end; gap: 6px; min-height: 36px; padding: 3px 3px 3px 14px; border: 1px solid var(--line-strong); border-radius: 18px; background: var(--field); }
.composer:hover { border-color: var(--line-hover); }
.composer:focus-within { border-color: var(--accent); }
.composer textarea { flex: 1 1 auto; min-width: 0; min-height: 28px; max-height: 120px; height: auto; padding: 4px 0; border: 0; border-radius: 0; background: transparent; resize: none; field-sizing: content; line-height: 1.35; overflow-y: auto; }
.composer textarea:focus-visible { outline: none; }
.composer .post { flex: 0 0 auto; height: 28px; padding: 0 12px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font: var(--fw-semibold) var(--fs-sm)/1 var(--font-sans); cursor: pointer; }
.composer .post:hover { background: var(--accent-hover); }
.composer .post:disabled { background: var(--track); color: var(--placeholder); cursor: not-allowed; }

/* ---------- page title row: title on the left, a compact control (company) on the right ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.mention { color: var(--accent-soft-ink); background: var(--accent-soft); border-radius: 4px; padding: 0 3px; font-weight: var(--fw-medium); }
.mention-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 20; min-width: 220px; max-width: 100%; margin: 0; padding: 4px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-menu); }
.mention-opt { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 8px; border-radius: 6px; font-size: var(--fs-desc); cursor: pointer; }
.mention-opt:hover, .mention-opt.active { background: var(--sunk); }

/* ---------- bars (UI.bars) and the date range (UI.period) ---------- */
.bars { display: grid; grid-template-columns: minmax(6em, max-content) minmax(0, 1fr) max-content; gap: 8px 12px; align-items: center; font-size: var(--fs-desc); }
.bar-name { overflow-wrap: anywhere; }
.bar-track { height: 14px; }
.bar-track i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--accent) 60%, var(--panel)); }
.bar-track i.top { background: var(--accent); }
.bar-v { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.period { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.period-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period-dates input { width: auto; min-width: 9.5em; height: 34px; min-height: 34px; font-size: var(--fs-desc); }
.sec-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted); margin: 0; }
td.up { color: var(--accent-soft-ink); font-weight: var(--fw-semibold); }
td.down { color: var(--bad); font-weight: var(--fw-semibold); }

/* ---------- executive dashboard parts (UI.tiles, UI.targetBar, UI.hbars, UI.columns, UI.stackBar, UI.flow, UI.attention, UI.blockHead) ---------- */
.blk { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-card); display: flex; flex-direction: column; gap: var(--gap-in); min-width: 0; }
.blk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; }
.blk-head > div:first-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.blk-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; background: none; border: 0; padding: 4px 0; margin: -4px 0; min-height: 32px; text-align: left; cursor: pointer; font-family: inherit; line-height: 1.4; }
a.blk-title:hover, button.blk-title:hover { color: var(--accent); }
.blk-title::after { content: " →"; }
.blk-title.plain::after { content: none; cursor: default; }
.blk-desc { font-size: var(--fs-desc); color: var(--muted); max-width: 62ch; text-wrap: pretty; }
.blk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.tiny { min-height: 30px; padding: 2px 10px; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: var(--gap-cards); align-items: start; }
.grid-2.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }
.sublabel { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.divided { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
/* link tiles: label, big value, a line under it */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
@media (max-width: 480px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none; min-width: 0; background: var(--panel); }
a.tile:hover, button.tile:hover { border-color: var(--accent); }
button.tile { font: inherit; text-align: left; cursor: pointer; }
.tile > span { font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; }
.tile > b { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile > small { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); font-variant-numeric: tabular-nums; }
.tile.soft { background: var(--sunk); border-color: var(--sunk); }
.tile.soft > b { font-size: var(--fs-lg); }
.tile .ok, .ink-ok { color: var(--accent-soft-ink); } .tile .bad, .ink-bad { color: var(--bad); } .ink-warn { color: var(--warn); }
.tile.bad > b { color: var(--bad); } .tile.warn > b { color: var(--warn); } .tile.good > b { color: var(--accent); }
/* needs attention */
.attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.attn > a, .attn > button { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); text-decoration: none; font: inherit; text-align: left; cursor: pointer; }
.attn > a:hover, .attn > button:hover { border-color: var(--accent); }
.attn .area { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.attn .area::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-hover); }
.attn .bad .area::before, .attn .bad.area::before { background: var(--bad); } .attn .warn .area::before { background: var(--warn-dot); }
.attn .v { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.attn .bad .v { color: var(--bad); }
.attn .t { font-size: var(--fs-sm); line-height: 1.4; text-wrap: pretty; }
.attn .t::after { content: " →"; color: var(--accent); font-weight: var(--fw-semibold); }
/* a bar against a target, with a tick where it should be by now */
.tbar { position: relative; height: 10px; background: var(--track); border-radius: 5px; }
.tbar.sm { height: 8px; border-radius: 4px; }
.tbar.md { height: 14px; border-radius: 4px; }
.tbar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: var(--accent); }
.tbar > i.on { background: color-mix(in srgb, var(--accent) 55%, var(--panel)); } .tbar > i.warn { background: var(--warn-dot); } .tbar > i.bad { background: var(--bad); }
.tbar > em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.tbar.sm > em, .tbar.md > em { top: -3px; bottom: -3px; opacity: .6; }
.big-figure { display: flex; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
.big-figure b { font-size: 2rem; font-weight: var(--fw-bold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.big-figure span { font-size: var(--fs-desc); color: var(--muted); font-variant-numeric: tabular-nums; }
/* rows of horizontal bars: label, bar, value(s) */
.hbars { display: grid; grid-template-columns: minmax(5.5em, max-content) minmax(0, 1fr) max-content; gap: 8px 12px; align-items: center; }
.hbars:has(.wide-label) { grid-template-columns: minmax(6em, 14em) minmax(0, 1fr) max-content; }
.hbar { display: contents; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.hbar > * { min-height: 22px; display: flex; align-items: center; }
.hbar .l { display: block; line-height: 1.35; max-width: 14em; overflow-wrap: anywhere; }
a.hbar:hover { color: var(--accent); }

.hbar .l.mono { font-family: var(--font-code); font-weight: var(--fw-medium); }
.hbar .v { justify-content: flex-end; text-align: right; color: var(--muted); flex-wrap: wrap; gap: 0 4px; } .hbar .v b { color: var(--ink); font-weight: var(--fw-semibold); }
.hbar .bar { height: 10px; position: relative; min-height: 0; display: block; }
.hbar .tbar { min-height: 0; display: block; }
.hbar .bar > i { height: 10px; }
.hbar .bar > i { display: block; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--accent) 60%, var(--panel)); }
.hbar .bar > i.c0 { background: var(--accent); } .hbar .bar > i.warn { background: var(--warn-dot); } .hbar .bar > i.bad { background: color-mix(in srgb, var(--bad) 55%, var(--panel)); } .hbar .bar > i.mute { background: var(--line-strong); }
@media (max-width: 480px) { .hbars, .hbars:has(.wide-label) { grid-template-columns: minmax(0, 8em) minmax(2em, 1fr) minmax(0, max-content); column-gap: 8px; } .hbar .l { max-width: 8em; } .hbar .v { max-width: 9em; } }
/* a stacked bar and its legend */
.stackbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--track); }
.stackbar > a, .stackbar > span { display: block; min-width: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-xs); color: var(--muted); }
.legend > * { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; min-height: 24px; }
.legend > a:hover { color: var(--ink); }
.legend i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }
.legend b { color: var(--ink); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.legend .line { width: 14px; height: 2px; border-radius: 0; } .legend .dash { width: 14px; height: 0; border-top: 2px dashed var(--accent); background: none; }
/* column chart: one column per band or month, an optional target tick */
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; align-items: end; height: 170px; border-bottom: 1px solid var(--line); }
.cols > a, .cols > div { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: var(--ink); text-decoration: none; }
.cols > a:hover { opacity: .8; }
.cols .cv { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: center; font-variant-numeric: tabular-nums; }
.cols .col { border-radius: 3px 3px 0 0; background: var(--accent); min-height: 2px; }
.cols .tick { position: absolute; left: -2px; right: -2px; height: 2px; background: var(--ink); }
@media (max-width: 480px) { .cols, .cols-x { gap: 4px; } }
.cols-x { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: -8px; }
.cols-x span { font-size: var(--fs-xs); color: var(--muted); text-align: center; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.cols-x small { font-size: var(--fs-xs); }
.cols-x span b { color: var(--ink); font-weight: var(--fw-medium); }
/* a process: numbered steps side by side */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.flow > a { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--panel); color: var(--ink); text-decoration: none; }
.flow > a:hover { background: var(--sunk); }
.flow .n { display: flex; align-items: center; gap: 8px; font: var(--fw-medium) var(--fs-xs) var(--font-code); color: var(--muted); }
.flow .n::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.flow .l { font-size: var(--fs-sm); color: var(--muted); }
.flow b { font-size: var(--fs-xl); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.flow small { font-size: var(--fs-xs); color: var(--muted); }
a.chip { text-decoration: none; } .chip b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--ink); }
/* line chart (SVG drawn in page units, stretched) */
.lchart { position: relative; height: 200px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lchart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lchart .ytop { position: absolute; left: 6px; top: 2px; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.lchart .now { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--ink); opacity: .35; }
.lchart-x { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
/* clickable table rows */
tr.go { cursor: pointer; } tr.go:hover td { background: var(--sunk); }
tr.total td { background: var(--sunk); font-weight: var(--fw-semibold); }
td .mini { display: block; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 60%, var(--panel)); }
td.indent { padding-left: 32px; color: var(--muted); }
/* the date range button and its panel, and the export menu */
.range { position: relative; }
.range-btn, .export-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: var(--fw-regular) var(--fs-desc) var(--font-sans); cursor: pointer; max-width: 100%; }
.range-btn:hover, .export-btn:hover { border-color: var(--line-hover); }
.range-btn b, .export-btn { font-weight: var(--fw-semibold); }
.range-btn span { color: var(--muted); font-variant-numeric: tabular-nums; }
.range-btn svg, .export-btn svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--muted); }
.range-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 31; width: 420px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-menu); display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.range-pop .presets { padding: 6px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.range-pop .presets button { min-height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: var(--fw-regular) var(--fs-desc) var(--font-sans); text-align: left; cursor: pointer; }
.range-pop .presets button:hover { background: var(--sunk); }
.range-pop .presets button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-soft-ink); font-weight: var(--fw-semibold); }
.range-pop .custom { padding: 14px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.range-pop .custom input { width: 100%; height: 36px; min-height: 36px; font-size: var(--fs-desc); padding: 0 8px; }
@media (max-width: 480px) { .range-pop { grid-template-columns: minmax(0, 1fr); right: auto; left: 0; position: fixed; top: auto; bottom: 0; width: 100%; max-width: 100%; border-radius: var(--r) var(--r) 0 0; } .range-pop .presets { border-right: 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; } }
.menu-pop { position: fixed; z-index: 41; width: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-menu); padding: 4px; display: flex; flex-direction: column; }
.menu-pop .mh { padding: 8px 10px 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); }
.menu-pop button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; display: flex; align-items: center; justify-content: space-between; font: var(--fw-regular) var(--fs-desc) var(--font-sans); color: var(--ink); cursor: pointer; text-align: left; }
.menu-pop button:hover, .menu-pop button:focus-visible { background: var(--sunk); }
.menu-pop button span { font: var(--fw-medium) var(--fs-xs) var(--font-code); color: var(--muted); }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.live-dot.off::before { background: var(--line-hover); }
td.strong { font-weight: var(--fw-semibold); }
.ink-mute { color: var(--muted); }

/* set-up: standard categories (a table whose last column is a category picker) */
.cx-table td { vertical-align: top; }
.cx-table .cx-pick { min-width: 16rem; width: 40%; }
.cx-mix { color: var(--muted); font-size: var(--fs-sm); }
.cx-why { display: block; margin-top: 4px; }
.cx-filters { justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cx-filters .search { flex: 1 1 16rem; max-width: 24rem; }
.legend i.sw-line { background: var(--line-strong); }
.legend i.sw-accent { background: var(--accent); }
.stack-v.cards { gap: var(--gap-cards); }
.page.inner { padding-top: 0; }
.logo-preview .logo-img { display: block; max-height: 56px; max-width: 240px; }
.spacer { flex: 1 1 0; }

/* home: To do */
.todo-add { flex-wrap: wrap; }
.todo-add input { flex: 1 1 14rem; }
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.todo-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.todo-row:first-child { border-top: 0; }
.todo-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 18rem; }
.todo-t { font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.todo-t:hover { text-decoration: underline; }
.todo-side { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
.todo-side input[type="date"].compact { width: auto; }

/* chart tooltips (UI.showTip) and the line chart's guide */
.chart-tip { position: fixed; z-index: 60; max-width: 18rem; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--panel); font: var(--fw-medium) var(--fs-sm)/1.4 var(--font-sans); white-space: pre-line; pointer-events: none; box-shadow: var(--shadow-menu); font-variant-numeric: tabular-nums; }
.lchart .lguide { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--line-strong); pointer-events: none; }
.lchart .lguide i { position: absolute; left: -5px; width: 10px; height: 10px; margin-bottom: -5px; border-radius: 50%; background: var(--accent); border: 2px solid var(--panel); }
[data-tip] { cursor: default; }
a[data-tip] { cursor: pointer; }

/* ---------- home: choose a company, then that company's tiles ----------
   .home-head  title and aside over a grid      .co-grid > a.co-card (mark, name, where; foot with your role)
   .co-mark    initials on a tint (.t1–.t4)     .nav-tiles > a.nav-tile (title →, description)
   .crumbs     Companies / Stylewise in the bar  .me-btn + .me-pop  your initials, name and a menu
   .drawer     UI.drawer: slides in from the right on a laptop, up from the bottom on a phone */
main.home { max-width: var(--wrap-home); gap: 24px; padding-bottom: 48px; }
body.home .bar-in { max-width: calc(var(--wrap-home) - 2 * var(--sp-page)); padding-block: 12px; }
.home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.home-head h1 { margin: 0; font-size: 1.375rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.home-head .meta { font-size: var(--fs-desc); }
.home-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.home-id > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-acts { display: flex; align-items: center; gap: var(--gap-ctl); flex-wrap: wrap; }
.co-mark { min-width: 40px; min-height: 40px; padding: 0 4px; box-sizing: border-box; line-height: 1; flex: 0 0 auto; border-radius: var(--r-md); display: grid; place-items: center; font-size: var(--fs-base); font-weight: var(--fw-bold); background: var(--tint-1); color: var(--tint-1-ink); overflow: hidden; }
.co-mark.big { min-width: 48px; min-height: 48px; border-radius: var(--r); font-size: var(--fs-md); }
.co-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 4px; box-sizing: border-box; }
.co-mark.t2 { background: var(--tint-2); color: var(--tint-2-ink); } .co-mark.t3 { background: var(--tint-3); color: var(--tint-3-ink); } .co-mark.t4 { background: var(--tint-4); color: var(--tint-4-ink); }
.co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--gap-cards); }
a.co-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); text-decoration: none; overflow: hidden; }
a.co-card:hover, a.co-card:focus-visible { border-color: var(--accent); color: var(--ink); }
.co-card-in { padding: var(--sp-card); display: flex; flex-direction: column; gap: 16px; flex: 1; }
.co-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.co-card-name { display: flex; flex-direction: column; gap: 4px; }
.co-card-name b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.co-card-name span, .co-card-foot span { font-size: var(--fs-sm); color: var(--muted); }
.co-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px var(--sp-card); border-top: 1px solid var(--line); background: var(--sunk); }
.go-arrow { color: var(--accent); font-weight: var(--fw-semibold); }
.nav-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
a.nav-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-height: 112px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--ink); text-decoration: none; }
a.nav-tile:hover, a.nav-tile:focus-visible { border-color: var(--accent); background: var(--tile-hover); color: var(--ink); }
.nav-tile-t { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.nav-tile-d { font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.nav-tile .pill { align-self: flex-start; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-desc); min-width: 0; }
.crumbs a { color: var(--bar-muted); text-decoration: none; font-weight: var(--fw-regular); }
.crumbs a:hover { color: var(--bar-ink); }
.crumbs .sep { color: var(--line-strong); }
.crumbs b { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.bar-left .vline { width: 1px; height: 18px; background: var(--bar-line); }
.bar-right { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--bar-ink); display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--sunk); color: var(--bar-ink); }
.icon-btn svg { width: 15px; height: 15px; }
.me-btn { height: 34px; padding: 0 10px 0 4px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--panel); color: var(--bar-ink); display: flex; align-items: center; gap: 8px; cursor: pointer; font: var(--fw-medium) var(--fs-desc) var(--font-sans); }
.me-btn:hover { background: var(--sunk); }
.me-btn .av { width: 26px; height: 26px; border-radius: var(--r-xs); background: var(--ink); color: var(--panel); font-size: 11px; font-weight: var(--fw-semibold); display: grid; place-items: center; }
.me-btn svg { width: 10px; height: 10px; color: var(--muted); }
.menu-pop .mh-me { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: flex; flex-direction: column; gap: 2px; }
.menu-pop .mh-me b { font-size: var(--fs-desc); font-weight: var(--fw-semibold); }
.menu-pop .mh-me span { font: var(--fw-regular) var(--fs-sm) var(--font-sans); color: var(--muted); }
.menu-pop button.danger { color: var(--bad); }
.menu-pop button.danger:hover { background: var(--bad-bg); }
@media (max-width: 520px) { .me-btn .me-name, .crumbs .crumb-all, .crumbs .sep { display: none; } .bar-left { gap: 10px; } }
.banner-ok { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 12px 12px 16px; border: 1px solid var(--accent-soft-hover); background: var(--accent-soft); border-radius: var(--r); }
.banner-ok > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.banner-ok b { font-size: var(--fs-desc); color: var(--accent-soft-ink); }
.banner-ok span { font-size: var(--fs-sm); color: var(--ink); opacity: .8; text-wrap: pretty; }
.banner-ok .row { gap: 8px; }
.banner-ok .btn.ghost { color: var(--accent-soft-ink); }
/* the drawer: a sheet that slides in from the right on a laptop */
@media (min-width: 641px) {
  dialog.sheet.drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(32rem, 100vw); border-radius: 0; border-width: 0 0 0 1px; }
  dialog.sheet.drawer[open] { animation: drawer-in .2s ease-out; }
}
@keyframes drawer-in { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet.drawer[open] { animation: none; } }
dialog.sheet.drawer .sheet-body { flex: 1; }
.sheet-foot { display: flex; justify-content: flex-end; gap: var(--gap-ctl); padding: 12px 20px; border-top: 1px solid var(--line); background: var(--panel); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* forms in a drawer are two across (one on a phone), so dates and pickers have room */
dialog.sheet .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) { dialog.sheet .form-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { a.nav-tile { min-height: 0; } }

/* ---------- Set up → Locations (bays, rows, pallet spaces) ----------
   .lt          a table of inputs (div grid): .lt-head + .lt-row, each column a cell; stacks into a card per row when narrow
   .lt-naming / .lt-sizes / .lt-bays   the column layout of each table
   .code-ex     the example code panel        .runs  the "A, B, C … AA" preview      .inh  a value taken from the rack size */
.loc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.loc-top .meta-line { margin: 0; }
.loc-total { font-size: var(--fs-sm); color: var(--muted); max-width: 100%; overflow-wrap: anywhere; }
.loc-total b { font-size: var(--fs-xl); color: var(--ink); font-weight: var(--fw-semibold); margin-right: 4px; font-variant-numeric: tabular-nums; }
.card h2 .step-no { margin-right: 10px; }
.loc-naming { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: 16px; align-items: start; container-type: inline-size; }
@media (max-width: 760px) { .loc-naming { grid-template-columns: minmax(0, 1fr); } }
.lt { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; container-type: inline-size; }
.lt-head, .lt-row { display: grid; gap: 8px 10px; align-items: center; padding: 8px 12px; }
.lt-head { background: var(--sunk); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); }
.lt-row + .lt-row { border-top: 1px solid var(--line); }
.lt-row > *, .lt-head > * { min-width: 0; }
.lt-row input, .lt-row select { width: 100%; min-width: 0; }
.lt .num { text-align: right; font-variant-numeric: tabular-nums; }
.lt input.num { text-align: right; }
.lt-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--sunk); }
.lt-foot input, .lt-foot select { min-width: 0; }
.lt-foot .grow { flex: 1 1 12rem; }
.lt-naming .lt-head, .lt-naming .lt-row { grid-template-columns: 2.75rem minmax(7rem, 1fr) minmax(8rem, 10.5rem) 5.75rem minmax(7rem, 1fr); }
.lt-sizes .lt-head, .lt-sizes .lt-row { grid-template-columns: minmax(8rem, 1fr) 5.5rem 6.5rem 6.5rem 6.5rem 2rem; }
.lt-bays .lt-head, .lt-bays .lt-row { grid-template-columns: 1.75rem 4.5rem minmax(8rem, 1fr) minmax(9rem, 11rem) 4.5rem 4.5rem 4rem 6.5rem; }
.lt-lvl { font: var(--fw-semibold) var(--fs-sm) var(--font-code); color: var(--muted); }
.runs { font-family: var(--font-code); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; border-top: 1px solid var(--line); }
.lt-opts label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; max-width: 100%; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.lt-opts input { width: 7rem; max-width: 100%; }
.lt-opts select, .lt-opts .seg { max-width: 100%; min-width: 0; }
.inh { color: var(--muted); background: var(--sunk); }
.lt-acts { display: flex; justify-content: flex-end; gap: 2px; }
.icon-sm { width: 30px; height: 30px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; font-size: var(--fs-base); }
.icon-sm:hover:not(:disabled) { background: var(--sunk); color: var(--ink); }
.icon-sm.danger { color: var(--bad); }
.icon-sm:disabled { opacity: .35; cursor: not-allowed; }
.icon-sm svg { width: 15px; height: 15px; }
.code-ex { background: var(--sunk); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.code-ex .lbl { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); }
.code-ex .big { font: var(--fw-semibold) 2rem/1.1 var(--font-code); letter-spacing: .02em; overflow-wrap: anywhere; }
.code-ex dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: var(--fs-sm); }
.code-ex dt { color: var(--muted); } .code-ex dd { margin: 0; font-family: var(--font-code); text-align: right; }
.code-ex p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.walk-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.walk-chips .meta { font-size: var(--fs-sm); }
@container (max-width: 40rem) {
  .lt-head { display: none; }
  .lt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; padding: 12px; }
  .lt-row > [data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); margin-bottom: 4px; }
  .lt-row > .wide { grid-column: 1 / -1; }
  .lt-row > .lt-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .lt-row > .lt-idx::before { content: '#'; }
  .lt-row > .lt-idx, .lt-row > .lt-lvl { font-weight: var(--fw-semibold); color: var(--ink); }
}
.row.nowrap { flex-wrap: nowrap; }
.ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stack-v.none { gap: 0; }
.strong { font-weight: var(--fw-semibold); }
.small-note { margin: 0; font-size: var(--fs-sm); }
input.invalid, select.invalid { border-color: var(--bad); }
.seg.fill { display: flex; } .seg.fill button { flex: 1 1 0; }
.seg.mono button { font-family: var(--font-code); }
.lt-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.lt-row.sel { background: var(--accent-soft); }
.lt-foot.plain { background: transparent; padding-block: 6px; }
.lt-empty { margin: 12px; }
.meta-num { color: var(--muted); font-size: var(--fs-sm); }
/* a rack size's colour: the same on its row, in the palette and on the floor plan (tints from theme.css) */
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; border: 1.5px solid var(--tint-1-ink); background: var(--tint-1); }
.swatch.tall { width: 8px; height: 20px; border-radius: 2px; }
.swatch.t2, .plan-bay.t2 { --tb: var(--tint-2); --ti: var(--tint-2-ink); } .swatch.t3, .plan-bay.t3 { --tb: var(--tint-3); --ti: var(--tint-3-ink); } .swatch.t4, .plan-bay.t4 { --tb: var(--tint-4); --ti: var(--tint-4-ink); }
.swatch.t1, .plan-bay.t1 { --tb: var(--tint-1); --ti: var(--tint-1-ink); } .swatch.tc, .plan-bay.tc { --tb: var(--plan-custom); --ti: var(--muted); }
.swatch[class*=" t"] { background: var(--tb); border-color: var(--ti); }

/* ---------- the floor plan (Set up → Locations, step 4) ----------
   .plan-pal    the palette: shapes, single racks, bays not placed yet, doors and benches
   .plan-floor  the floor, to scale, with a grid every 5 rack rows; .plan-bay and .plan-fx sit on it (positions in %)
   .plan-sel    what's chosen, with Rotate and Take off plan        .plan-ghost  the label following a drag */
.plan-pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 16px; align-items: start; padding: 14px; background: var(--sunk); border-radius: var(--r-md); }
.pal-h { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--muted); }
.pal-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); overflow: hidden; }
.pal-grip, .pal-item, .pal-chip { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pal-grip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: var(--fs-sm); }
.pal-grip:hover, .pal-grip:focus-visible { background: var(--accent-soft); }
.pal-grip b { flex: 1; font-weight: var(--fw-semibold); }
.shape-ico { width: 16px; height: 14px; flex: 0 0 auto; box-sizing: border-box; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.shape-ico.U { border-top: 3px solid var(--ink); }
.pal-opts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 8px; align-items: center; padding: 0 10px 8px; font-size: var(--fs-xs); color: var(--muted); }
.pal-opts select { min-height: 30px; font-size: var(--fs-xs); }
.pal-item { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink); }
.pal-item:hover, .pal-item:focus-visible { border-color: var(--accent); color: var(--ink); }
button.pal-item { cursor: pointer; font-family: var(--font-sans); text-align: left; touch-action: manipulation; }
button.pal-item svg { width: 14px; height: 14px; color: var(--muted); }
.pal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pal-chip { font-size: var(--fs-sm); padding: 5px 9px; min-height: 32px; display: inline-flex; align-items: center; border: 1px dashed var(--muted); border-radius: var(--r-xs); background: var(--panel); }
.pal-chip:hover, .pal-chip:focus-visible { border-color: var(--accent); color: var(--accent-soft-ink); }
.plan-size input { width: 5rem; }
.plan-sel { min-height: 48px; box-sizing: border-box; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunk); font-size: var(--fs-sm); }
.plan-sel b { font-size: var(--fs-desc); }
.plan-floor { position: relative; width: 100%; box-sizing: border-box; border: 3px solid var(--plan-wall); background-color: var(--panel); touch-action: none;
  background-image: linear-gradient(var(--plan-grid) 1px, transparent 1px), linear-gradient(90deg, var(--plan-grid) 1px, transparent 1px); }
.plan-floor.drop { outline: 3px solid var(--accent); outline-offset: 2px; }
.plan-bay, .plan-fx { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.plan-bay { --tb: var(--tint-1); --ti: var(--tint-1-ink); background: var(--tb); border: 1.5px solid var(--ti); color: var(--ink); font: var(--fw-semibold) clamp(6px, calc(var(--cell, 12px) * .8), 11px)/1 var(--font-code); z-index: 1; }   /* the name fits the rack: a pallet deep */
.plan-bay.on { background: var(--ti); color: var(--panel); z-index: 3; }
.plan-bay.vert { writing-mode: horizontal-tb; }
.plan-fx { z-index: 2; font: var(--fw-bold) clamp(6px, calc(var(--cell, 12px) * .75), 10px)/1 var(--font-sans); letter-spacing: .04em; white-space: nowrap; border: 1.5px solid var(--ink); }
.plan-fx.vert { writing-mode: vertical-rl; }
.plan-fx.shutter { background: repeating-linear-gradient(45deg, var(--ink) 0 4px, var(--muted) 4px 8px); color: var(--panel); }
.plan-fx.door { background: var(--panel); color: var(--ink); }
.plan-fx.exit { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.plan-fx.bench { background: var(--sunk); border-style: dashed; border-color: var(--muted); color: var(--ink); }
.plan-fx.on { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); z-index: 4; }
.plan-bay:focus-visible, .plan-fx:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-ghost { position: fixed; z-index: 1000; transform: translate(-50%, -130%); pointer-events: none; padding: 6px 10px; border-radius: var(--r-xs); background: var(--ink); color: var(--panel); font: var(--fw-semibold) var(--fs-xs) var(--font-sans); white-space: nowrap; box-shadow: var(--shadow-menu); }
@media print {
  body.print-plan header.bar, body.print-plan .loc-top, body.print-plan #out > section:not(#loc-plan), body.print-plan #loc-plan > :not(.card-head):not(.plan-scroll):not(#plan-count), body.print-plan #loc-plan .card-head .row { display: none !important; }
  body.print-plan #loc-plan { border: 0; padding: 0; }
  body.print-plan .plan-floor { -webkit-print-color-adjust: exact; print-color-adjust: exact; min-width: 0; }
  body.print-plan .plan-scroll { overflow: visible; }
}
/* bays on a phone: number and buttons on one line, then name and description, size, then rows, spaces and total */
@container (max-width: 40rem) {
  .lt-bays .lt-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-areas: "idx idx acts" "name desc desc" "size size size" "rows spaces total"; gap: 8px 10px; }
  .lt-bays .lt-row > :nth-child(1) { grid-area: idx; align-self: center; } .lt-bays .lt-row > :nth-child(2) { grid-area: name; } .lt-bays .lt-row > :nth-child(3) { grid-area: desc; }
  .lt-bays .lt-row > :nth-child(4) { grid-area: size; } .lt-bays .lt-row > :nth-child(5) { grid-area: rows; } .lt-bays .lt-row > :nth-child(6) { grid-area: spaces; }
  .lt-bays .lt-row > :nth-child(7) { grid-area: total; align-self: end; padding-bottom: 8px; } .lt-bays .lt-row > :nth-child(8) { grid-area: acts; justify-content: flex-end; }
  .lt-sizes .lt-row > .lt-acts { grid-column: auto; justify-content: flex-end; }
}
.card-head.split > .row { justify-content: flex-start; }

.plan-sel > div { min-width: 0; max-width: 100%; }
.plan-sel .ellip { display: block; max-width: 100%; }
.plan-scroll { width: 100%; overflow: auto; overscroll-behavior: contain; }
/* phones: the floor is drawn at least 26px a position (a rack is one deep), so every run is big enough to grab; drag the empty floor to pan */
@media (max-width: 760px) {
  .plan-floor { min-width: calc(var(--fw, 100) * 26px); touch-action: pan-x pan-y; }
  .plan-bay, .plan-fx { touch-action: none; }
}
.plan-floor.dragging, .plan-floor.dragging .plan-bay, .plan-floor.dragging .plan-fx { cursor: grabbing; }