/* ============================================================================
   NovaSolo OS — visual refresh (2026-09-27, preview).
   Loaded right after os.css. Same brand: monochrome ink on white, Nunito Sans.
   What changes is the finish:
     · soft canvas + white cards with a hairline and a small radius, instead of
       one big grid of shared 1px borders;
     · sentence-case labels, tabs, table heads and buttons: uppercase
       letter-spacing is kept for the wordmark only;
     · lighter weights (900 -> 700) so the numbers, not the chrome, carry weight;
     · charts in soft grey with the latest period in ink; values on hover.
   Remove the <link> in base.html and the OS returns to the previous look exactly.
   ========================================================================= */
:root {
  --canvas: #f6f6f4;
  --bg: #ffffff;
  --panel: #f3f3f1;
  --ink: #111111;
  --ink-2: #3a3a38;
  --muted: #6f6f6b;
  --line: #e7e7e3;
  --line-strong: #d9d9d4;
  --bar: #d3d3ce;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-card: 0 1px 2px rgba(17, 17, 17, .04);
  --shadow-pop: 0 10px 30px rgba(17, 17, 17, .12);
  --scrim: rgba(17, 17, 17, .4);
  --row: calc(var(--s4) * 2 + var(--s1));         /* 36px list row */
  --row-touch: calc(var(--s4) * 2 + var(--s3));   /* 44px list row on a phone */
  /* The closed dropdown's thin chevron, --muted (B119 P1). */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='dimgray' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.75l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
}

body { background: var(--canvas); font-size: 14.5px; color: var(--ink); }

/* ---------- shell ---------- */
.sidebar { background: var(--bg); border-right: 1px solid var(--line); }
.sidebar .brand { border-bottom: 0; padding: 1.1rem 1rem .8rem; }
.wordmark { font-size: var(--fs-md); }
.nav-group { margin-bottom: 0; }
/* The rows name themselves ("Logistics" under LOGISTICS); groups are spacing now. */
.nav-group-label { font-size: 0; padding: 0; height: .9rem; }
.sidenav { padding: .25rem .6rem 1.2rem; }
.nav-item, button.nav-item {
  border-left: 0; border-radius: var(--radius-sm); padding: .5rem .7rem;
  font-weight: 600; font-size: var(--fs-base); color: var(--ink-2); margin: 1px 0;
}
.nav-item:hover { background: var(--panel); }
.nav-item.active { background: var(--panel); color: var(--ink); border-left: 0; }
.side-user, .side-logout { border-radius: var(--radius-sm); }
.nav-item svg { width: 17px; height: 17px; opacity: .8; }
.nav-sub { margin: 2px 0 6px; }
.nav-sub a {
  border-left: 0; border-radius: var(--radius-sm); font-weight: 500; font-size: var(--fs-base);
  padding: .36rem .7rem .36rem 2.45rem;
}
.nav-sub a:hover { background: var(--panel); }
.nav-sub a.active { background: transparent; color: var(--ink); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--ink); border-radius: 0; }
html.nav-compact .sidenav { padding: .25rem .35rem; }
html.nav-compact .nav-item { padding: .55rem 0; }

.topbar {
  background: rgba(246, 246, 244, .82); border-bottom: 1px solid transparent;
  backdrop-filter: saturate(180%) blur(10px);
}
.world-clock { font-size: var(--fs-sm); }
.world-clock .wc b { font-weight: 700; letter-spacing: .02em; font-size: var(--fs-xs); color: var(--ink-2); }
.topbar .market-toggle {
  border: 0; background: #ebebe7; border-radius: 999px; padding: 3px; gap: 2px;
}
.topbar .market-toggle a {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--fs-sm);
  padding: .28rem .8rem; border-radius: 999px; color: var(--muted);
}
.topbar .market-toggle a.active { background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 2px rgba(17,17,17,.12); }
.topbar .market-toggle a:hover:not(.active) { background: transparent; color: var(--ink); }
@media (max-width: 600px) {
  .topbar .market-toggle a { padding: .28rem .55rem; font-size: var(--fs-sm); }
}

main { margin-top: 1.5rem; max-width: 80rem; padding: 0 2rem; }

/* ---------- type ---------- */
h1 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.025em; }
h2, h3 { letter-spacing: -.01em; }
.section-title { margin: 2.25rem 0 .8rem; }
.section-title h2 {
  text-transform: none; letter-spacing: -.01em; font-size: var(--fs-md); font-weight: 700;
}
label, legend, .kpi-label, .control-kpi-label, .sales-window, .fact b,
.growth-chart-head strong, .growth-block-head strong, .metric-help summary,
.metric-help > div b, .crumb, .rowlink, .source, .operational-state, .issue {
  text-transform: none; letter-spacing: 0;
}
label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
legend { font-size: var(--fs-md); font-weight: 700; }
.crumb, .rowlink { font-size: var(--fs-base); font-weight: 600; }

/* ---------- buttons ---------- */
button, .btn {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--fs-base);
  border-radius: var(--radius-sm); min-height: 2.5rem; padding: .45rem .95rem;
}
@media (max-width: 900px), (pointer: coarse) {
  button, .btn { min-height: var(--tap); }
}
/* :where keeps a bare button's hover at element weight, so a button's own class (background: none) wins. */
button:where(:hover), .btn:hover { background: #2a2a2a; }
.btn--secondary, .btn.secondary, button.secondary {
  background: var(--bg); border-color: var(--line-strong); color: var(--ink);
}
.btn--secondary:hover, .btn.secondary:hover, button.secondary:hover {
  background: var(--panel); border-color: var(--line-strong);
}
.btn--quiet { background: var(--bg); border-color: var(--line); letter-spacing: 0; font-weight: 600; }
.btn--quiet:hover { background: var(--panel); border-color: var(--line-strong); }
.btn--quiet.is-on:hover, .btn--quiet[aria-pressed="true"]:hover, .btn--quiet.active:hover { border-color: var(--ink); }
.btn--sm { font-size: var(--fs-sm); padding: .25rem .6rem; }
.btn--link, .link-button { font-size: var(--fs-base); }
.btn--link.danger { padding: 0; }  /* a stop link in a header lines up as text, not as a button */
/* The .btn:hover above (#2a2a2a) outranks os.css by order; text buttons keep no fill. */
.btn--link:hover, .link-button:hover { background: transparent; }
.seg { border: 0; background: #ebebe7; border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg > .btn, .seg > .btn:last-child {
  border: 0; border-radius: 5px; background: transparent; color: var(--muted);
  min-height: 1.85rem; font-size: var(--fs-sm); font-weight: 600;
}
.seg > .btn:hover { background: rgba(255,255,255,.6); color: var(--ink); }
.seg > .btn.is-on, .seg > .btn[aria-pressed="true"], .seg > .btn.active {
  background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(17,17,17,.12);
}

/* ---------- forms ---------- */
input, select, textarea {
  border-color: var(--line-strong); border-radius: var(--radius-sm); font-size: var(--fs-base);
  background-color: var(--bg);
}
input:focus, select:focus, textarea:focus { border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(17,17,17,.07); }
fieldset { background: var(--bg); border-color: var(--line); }
/* Switch (B67 D4): a yes/no that opens something, instead of a bare native tick (DESIGN rule 7).
   The second selector outranks the phone card rule that sizes every checkbox. */
input[type="checkbox"].switch, .t-cards tbody td > input[type="checkbox"].switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 2.1rem; height: 1.2rem; min-height: 0; margin: 0; padding: 0; border: 0;
  border-radius: 999px; background: var(--line-strong); cursor: pointer; vertical-align: middle;
  transition: background-color .15s; }
input.switch::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem;
  height: .9rem; border-radius: 50%; background: var(--bg); box-shadow: 0 1px 2px rgba(17,17,17,.2);
  transition: transform .15s; }
input.switch:checked { background: var(--ink); }
input.switch:checked::after { transform: translateX(.9rem); }
input.switch:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }

/* ---------- the OS dropdown (select-search.js, B119 P1) ----------
   The <select> stays the closed field (its look is the input rule above); the script stops
   the browser's list and opens this one, on <body>, under the field. */
select:has(> option[value=""]:checked:is([hidden], [disabled])),
select:required:has(> option[value=""]:checked) { color: var(--muted); }
.combo-pop {
  position: fixed; z-index: 60; display: flex; flex-direction: column; overflow: hidden;
  width: max-content; max-width: min(calc(var(--s7) * 9), calc(100vw - var(--s4)));
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.combo-head { display: none; }
/* Whole rows plus half a row: the cut row under a fade says the list goes on. */
.combo-list { flex: 1 1 auto; min-height: 0; max-height: calc(var(--row) * 10.5 + var(--s2)); overflow-y: auto;
  margin: 0; padding: var(--s1); list-style: none; }
.combo-list.is-cut { --fade-top: black 0%; --fade-end: black calc(100% - var(--row)), transparent; }
.combo-list.is-cut-top { --fade-top: transparent, black calc(var(--row) / 2); }
.combo-list:is(.is-cut, .is-cut-top) {
  -webkit-mask-image: linear-gradient(to bottom, var(--fade-top, black 0%), var(--fade-end, black 100%));
  mask-image: linear-gradient(to bottom, var(--fade-top, black 0%), var(--fade-end, black 100%)); }
.combo-list li {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  min-height: var(--row); padding: 0 calc(var(--s4) * 2) 0 var(--s2); border-radius: var(--radius-sm);
  font-size: var(--fs-base); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.combo-list li:hover, .combo-list li.is-active { background: var(--panel); }
.combo-list li[aria-disabled="true"] { color: var(--muted); cursor: default; }
.combo-list li[aria-disabled="true"]:hover { background: none; }
.combo-list li[aria-selected="true"]::after {
  content: ""; position: absolute; right: var(--s3); top: 50%; width: var(--s1); height: var(--s2);
  margin-top: calc(var(--s1) * -1.25); border-right: calc(var(--s1) / 2) solid var(--ink);
  border-bottom: calc(var(--s1) / 2) solid var(--ink); transform: rotate(45deg);
}
/* The empty row of an optional field clears it: grey, never ticked. */
.combo-list li.combo-clear { color: var(--muted); }
.combo-list li.combo-clear::after { display: none; }
.combo-name { overflow: hidden; text-overflow: ellipsis; }
.combo-name b { font-weight: 700; }
.combo-hint { margin-left: auto; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.combo-list li.combo-more { margin-top: var(--s1); border-top: 1px solid var(--line); border-radius: 0; font-weight: 600; }
.combo-list li.combo-more .combo-hint { font-weight: 400; }
.combo-list li.combo-none { display: block; min-height: 0; padding: var(--s3) var(--s2); color: var(--muted);
  white-space: normal; cursor: default; }
.combo-list li.combo-none:hover { background: none; }
.combo-all { display: block; margin-top: var(--s1); padding: 0; border: 0; background: none; font: inherit;
  color: var(--ink); text-decoration: underline; cursor: pointer; }
.combo-search { display: flex; align-items: center; gap: var(--s2); flex: none; min-height: var(--row);
  padding: 0 var(--s3); border-bottom: 1px solid var(--line); color: var(--muted); }
.combo-search svg { flex: none; }
.combo-search input, .combo-search input:focus { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0;
  border-radius: 0; box-shadow: none; background: none; color: var(--ink); font-size: var(--fs-base); }
.combo-count { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.combo-count:empty { display: none; }
.combo-x { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: calc(var(--s4) * 2); height: calc(var(--s4) * 2); padding: 0; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--muted); cursor: pointer; }
.combo-x:hover { background: var(--panel); color: var(--ink); }

/* "Search more…": the whole list in a dialog, same search, a count. */
/* Its top stays put while the list shrinks under the typing. */
.combo-dialog { width: calc(100% - var(--s6)); max-width: calc(var(--s7) * 13); max-height: 80vh; margin: 15vh auto auto; padding: 0;
  border: 0; border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: var(--shadow-pop); }
.combo-dialog[open] { display: flex; flex-direction: column; }
.combo-dialog::backdrop { background: var(--scrim); }
.combo-dialog header { display: flex; justify-content: space-between; align-items: center; flex: none;
  padding: var(--s2) var(--s2) var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.combo-dialog header b { font-size: var(--fs-base); }
.combo-dialog .combo-search { padding: 0 var(--s4); }
.combo-dialog .combo-list { max-height: calc(var(--row) * 12.5 + var(--s4)); padding: var(--s2); }

/* Phone: the list opens as a sheet over the page; a long one (search line) full height. */
.combo-scrim { position: fixed; inset: 0; z-index: 59; background: var(--scrim); }
@media (max-width: 600px) {
  .combo-pop.is-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 85vh;
    padding: 0 var(--s2) var(--s4); border: 0; border-radius: var(--radius) var(--radius) 0 0; }
  .combo-pop.is-sheet.is-full { top: var(--s4); max-height: none; }
  .combo-pop.is-sheet .combo-head { display: flex; justify-content: space-between; align-items: center; flex: none;
    min-height: var(--row-touch); padding: var(--s2) 0 0 var(--s2); }
  .combo-pop.is-sheet .combo-head b { font-size: var(--fs-base); }
  .combo-pop.is-sheet .combo-search { min-height: var(--row-touch); margin: 0 0 var(--s2);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
  .combo-pop.is-sheet .combo-list { max-height: calc(var(--row-touch) * 10.5); padding: 0; }
  .combo-pop.is-sheet.is-full .combo-list { max-height: none; }
  .combo-pop.is-sheet .combo-list li, .combo-dialog.is-sheet .combo-list li { min-height: var(--row-touch); }
  .combo-pop.is-sheet .combo-name, .combo-dialog.is-sheet .combo-name { white-space: normal; padding: var(--s2) 0; }
  .combo-dialog.is-sheet { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
  .combo-search input, .combo-search input:focus { min-height: 0 !important; padding: 0; }
}

/* ---------- tabs: an underline, sentence case ---------- */
.tabs { gap: .25rem; border-bottom-color: var(--line); margin-bottom: 1.1rem; }
.tabs a {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-base); font-weight: 600;
  padding: .65rem .85rem;
  white-space: nowrap;  /* the strip scrolls sideways on a phone; a label never breaks */
}

/* ---------- day buttons beside a page title (B67 D4) ----------
   One row beside the title; on a phone one full-width row under it, the date field on its own line. */
.day-nav { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.day-nav form { margin: 0; }
@media (max-width: 600px) {
  .page-head .grow { flex-basis: 100%; }
  .day-nav { flex: 1 1 100%; }
  .day-nav > a { flex: 1 1 0; justify-content: center; }
  .day-nav > form, .day-nav > form input { flex: 1 1 100%; width: 100%; }
}

/* ---------- table columns (B67 D3) ---------- */
td.act, th.act { text-align: right; width: 1%; white-space: nowrap; }  /* row action, flush right */
.phone-only { display: none; }
@media (max-width: 600px) {
  .wide-only { display: none; }  /* a list keeps rows on a phone: key column + one more */
  .phone-only { display: block; }
}

/* ---------- chips: sentence case; the pill shapes that stay are soft (a state is dot + word, os.css) ---------- */
.chip { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--fs-sm); }
.chip--outline { border-radius: 999px; padding: .12rem .55rem; }
.chip--dot { border-radius: 50%; padding: 0; }
.chip--count { border-radius: 999px; font-size: var(--fs-xs); }
.chip--mini { border-radius: 4px; }
.trend-change {
  border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); padding: .12rem .45rem;
}
.flag { font-weight: 700; letter-spacing: .02em; }

/* ---------- tables: a white card, quiet head ---------- */
.table-wrap {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
thead th {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.table-wrap thead th { background: var(--bg); box-shadow: inset 0 -1px 0 var(--line); }
/* Column-head sort (behaviors.js, data-sort): the head reads as before; a chevron shows the order. */
.th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2); }
th.num .th-sort { flex-direction: row-reverse; }
.th-sort:hover, .th-sort:active { color: var(--ink); background: none; transform: none; }
.th-sort:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--radius-sm); }
th[aria-sort] .th-sort { color: var(--ink); }
th[aria-sort] .th-sort::after { content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
th[aria-sort="ascending"] .th-sort::after { margin: 3px 0 0; transform: rotate(-135deg); }
tbody td { font-size: var(--fs-base); border-bottom-color: #efefec; }
tbody tr:hover { background: #fafaf8; }
tbody tr:last-child td { border-bottom: 0; }
td.part { font-weight: 700; letter-spacing: 0; }
td.col-key, .table-wrap thead th.col-key { background: #fafaf8; }
td.col-strong, .table-wrap thead th.col-strong { background: #f4f4f1; }

/* ---------- cards: separate white tiles instead of one shared grid ---------- */
.kpi-grid, .control-kpi-grid, .supply-source-grid, .sales-channel-grid,
.growth-charts, .warehouse-strip, .risk-register, .sales-period-grid,
.integration-grid {
  gap: 12px; background: transparent; border: 0;
}
.kpi, .control-kpi, .supply-source, .sales-channel-card, .growth-chart,
.warehouse-strip > a, .integration, .blocked-panel, .control-actions, .readiness-panel {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.control-kpi:nth-child(n), .supply-source:last-child, .warehouse-strip > a { border-right: 1px solid var(--line); }
.sales-channel-card + .sales-channel-card, .growth-chart + .growth-chart,
.sales-period + .sales-period { border-left: 1px solid var(--line); }
.kpi { padding: 1.1rem 1.2rem; min-height: 0; }
.kpi-label, .control-kpi-label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.kpi-value { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; margin-top: .35rem; }
.kpi-sub { font-size: var(--fs-sm); margin-top: .35rem; }

.control-kpi { padding: 1.15rem 1.25rem; min-height: 8rem; }
.control-kpi-value { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.03em;
  display: flex; align-items: center; gap: .6rem; }
/* Home window toggle in flight: the old number fades until the new one lands. */
.control-kpi.is-loading .control-kpi-value { opacity: .3; transition: opacity .12s; }

/* sales pulse: channel card holds two plain columns, no box inside a box */
.sales-channel-card { padding: 1.1rem 1.2rem; }
.sales-channel-head h3 { font-size: var(--fs-md); font-weight: 700; }
.sales-period-grid { gap: 1.5rem; }
.sales-period { padding: 0; border: 0 !important; }
.sales-window { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.sales-period-head strong { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.sales-comparison { font-size: var(--fs-sm); }
.sales-dates { font-size: var(--fs-xs); }

/* ---------- charts: grey bars, the latest period in ink ---------- */
.sales-chart { border-bottom-color: var(--line); gap: 3px; }
.sales-bar i { background: var(--bar); border-radius: 2px 2px 0 0; }
.sales-bar:last-child i, .sales-bar:hover i { background: var(--ink); }
.sales-bar.negative i { border-radius: 0 0 2px 2px; }
.growth-chart { padding: 1.1rem 1.2rem; }
.growth-chart-head { margin-bottom: .6rem; }
.growth-chart-head strong { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.growth-chart-head .muted { font-size: var(--fs-sm); }
.growth-axis, .growth-xaxis { font-size: var(--fs-xs); }
.growth-block-head { margin: 1.4rem 0 .7rem; }
.growth-block-head strong { font-size: var(--fs-md); font-weight: 700; }

/* ---------- supply block ---------- */
.supply-source { padding: 1.1rem 1.2rem; gap: .3rem; }
.supply-source > strong { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em; }
.supply-source > span:not(.control-kpi-label) { font-size: var(--fs-sm); }
.supply-source .eta-list small { font-size: var(--fs-sm); }
.warehouse-strip > a { padding: .9rem 1.1rem; gap: .15rem; }
.warehouse-strip strong { font-size: var(--fs-md); }
.warehouse-strip span, .warehouse-strip small { font-size: var(--fs-sm); }
a.supply-source:hover, .warehouse-strip > a:hover { background: var(--bg); border-color: var(--line-strong); }
.risk-register { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.risk-register > a, .risk-register > .risk-static {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1rem; font-size: var(--fs-base);
}
.risk-register > a { border-left: 3px solid var(--warn-ink); }
.risk-register strong { font-size: var(--fs-md); }
.risk-clear { color: var(--muted); font-size: var(--fs-base); margin: 0 0 1.5rem; }

/* ---------- disclosures, notices, misc ---------- */
.metric-help { border-top-color: var(--line); }
.metric-help summary { font-size: var(--fs-sm); font-weight: 600; }
.metric-help--inline > summary { width: 1.2rem; height: 1.2rem; font-size: var(--fs-xs); font-weight: 700; }
.metric-help--inline > div { border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); font-size: var(--fs-sm); }
.error, .notice { border-radius: var(--radius-sm); font-weight: 500; }
.source-bar { background: var(--bg); border-radius: var(--radius); }
.source { font-size: var(--fs-sm); font-weight: 600; }
.source::before { border-radius: 50%; }
.operational-state, .issue { border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; padding: .12rem .5rem; }
.cell-sub { font-size: var(--fs-sm); }
.result-count { font-size: var(--fs-sm); }
.empty { font-style: normal; }

@media (max-width: 600px) {
  main { padding: 0 16px; }
  .sales-channel-card + .sales-channel-card, .growth-chart + .growth-chart { border-left: 1px solid var(--line); }
}

/* ---------- remaining small labels: sentence case, one size ---------- */
.headline-label, .more-filters > summary,
.filter-chips > span, .chat-metrics .m .k, .day-sep span, .control-action-head,
.growth-detail-row details.record > summary, .growth-channel-rows th, .readiness-panel h2,
.answer-search > label, .knowledge-id, .tagfield-label, .night-jump label, .cal-count,
.cal-list-head, .recap h3, .detail-notes h3, .recap-edit label, .batch-preview-head,
.night-count, .night-note-form > label, .night-inline-form > label, .night-tag-fields > label,
.night-tag-fields legend, .form-block h2, .form-grid > label, .richard-compose label,
.governance-action label, .button-row label, .knowledge-primary h2, .knowledge-governance h2,
.knowledge-governance h3, .price-table td:first-child, .inbound-docs h4,
.dc-fields > legend, .pf-part > legend {
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: var(--fs-sm);
}
.t-cards tbody td::before { text-transform: none; letter-spacing: 0; }
.growth-detail-row details.record > summary { font-size: var(--fs-sm); }

/* supply cards: content sits at the top, not spread over the stretched height */
.supply-source { align-content: start; }
.supply-source > strong { margin-top: .15rem; }
.risk-register { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.risk-register > a, .risk-register > .risk-static { grid-template-columns: minmax(0,1fr) auto auto; }

/* one size for every state of a segmented pill; the top bar never wraps a control */
.seg > .btn.btn--quiet, .seg > .btn.btn--quiet.is-on { font-size: var(--fs-sm); letter-spacing: 0; }
.topbar a, .topbar button { white-space: nowrap; }

/* ---------- readable charts (2026-09-27): a value on every bar, latest in ink ----------
   Labels sit directly on top of their own bar (the bar is a column: label, then fill),
   so the eye reads height and number together. A dense chart (30 daily bars, 26/52
   weeks) keeps only the latest and the peak labelled; hover shows any other. */
.sales-chart { padding-top: 1.15rem; overflow: visible; height: 7rem; }
.growth-bars { height: 9.5rem; }
.sales-bar, .growth-bars .sales-bar {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: stretch;
}
.sales-bar.negative { justify-content: flex-start; }
.bar-value, .growth-bars .bar-value {
  position: static; transform: none; display: block; text-align: center; white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 600; color: var(--muted); line-height: 1.3;
  margin-bottom: 2px; opacity: 1; font-variant-numeric: tabular-nums;
}
.sales-bar:last-child .bar-value { color: var(--ink); font-weight: 800; }
.sales-bar:hover .bar-value { color: var(--ink); }
.is-dense .sales-bar .bar-value { visibility: hidden; }
.is-dense .sales-bar:is(:last-child, .is-peak, :hover) .bar-value { visibility: visible; }
/* a dense label may be wider than its bar: let it overhang, centred */
.is-dense .bar-value { margin-left: -1.5rem; margin-right: -1.5rem; }
.is-dense .sales-bar:last-child .bar-value { margin-left: -3rem; margin-right: 0; text-align: right; }

.growth-plot { display: block; }
.growth-axis { display: none; }
.growth-xaxis { margin-left: 0; gap: 3px; }
.growth-xaxis > span:nth-child(even) { visibility: visible; }
.growth-xaxis.is-dense > span:nth-child(even) { visibility: hidden; }
.growth-chart-head { align-items: center; margin-bottom: .1rem; }
.chart-headline { display: inline-flex; align-items: center; gap: .5rem; }
.chart-headline b { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.chart-sub { color: var(--muted); font-size: var(--fs-sm); margin-bottom: .6rem; text-align: right; }

.sales-days { display: flex; gap: 3px; margin-top: .25rem; }
.sales-days > span { flex: 1; min-width: 0; text-align: center; color: var(--muted);
  font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; }
.sales-days > span:last-child { color: var(--ink); font-weight: 700; }
.sales-days > span > small { display: block; font-size: var(--fs-xs); line-height: 1.2; }
/* dense x-axis: first and last date only, never clipped */
.growth-xaxis.is-dense { position: relative; height: 1rem; }
.growth-xaxis.is-dense > span { visibility: hidden !important; }
.growth-xaxis.is-dense > span:first-child, .growth-xaxis.is-dense > span:last-child {
  visibility: visible !important; position: absolute; overflow: visible; }
.growth-xaxis.is-dense > span:first-child { left: 0; text-align: left; }
.growth-xaxis.is-dense > span:last-child { right: 0; text-align: right; color: var(--ink); font-weight: 700; }

/* ---------- line chart (long runs: 30 days, 26/52 weeks) ---------- */
.lc { margin-top: .9rem; }
.lc-plot { position: relative; height: 7.5rem; margin-right: 2.6rem; }
.growth-chart .lc-plot { height: 9rem; }
.lc-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lc-area { fill: #f1f1ee; stroke: none; }
.lc-daily { fill: none; stroke: #b8b8b2; stroke-width: 1.25; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.lc-avg { fill: none; stroke: var(--ink); stroke-width: 2.25; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.lc-zero { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke;
  stroke-dasharray: 3 3; }
.lc-hit { fill: transparent; }
.lc-hit:hover { fill: rgba(17,17,17,.05); }
.lc-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--bg); pointer-events: none; }
.lc-last { position: absolute; left: 100%; transform: translate(.45rem, -50%);
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; pointer-events: none; }
.lc-peak { position: absolute; transform: translate(-50%, -135%); font-size: var(--fs-xs);
  font-weight: 600; color: var(--muted); white-space: nowrap; pointer-events: none;
  font-variant-numeric: tabular-nums; }
.lc-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  margin: .3rem 2.6rem 0 0; font-size: var(--fs-xs); color: var(--muted); }
.lc-key { display: inline-flex; align-items: center; gap: .3rem; }
.lc-key i { display: inline-block; width: 12px; height: 0; border-top: 1.5px solid #b8b8b2; }
.lc-key i.k-avg { border-top: 2.5px solid var(--ink); margin-left: .5rem; }
.lc-foot, .lc-foot > span { white-space: nowrap; }
.k-daily-item { display: inline-flex; align-items: center; gap: .3rem; }
.sales-period .k-daily-item { display: none; }  /* narrow cards: keep only the average's key */

/* section heading with its window on the same baseline (Home Growth) */
.section-title--inline { justify-content: flex-start; gap: .75rem; flex-wrap: wrap; }
.section-title--inline .muted { font-size: var(--fs-base); }
/* Sales pulse: the 30-day line sits in the same frame as the 7-day bars beside it — same
   label headroom, plot height, baseline and date row (Robin 2026-09-29: "graphs not
   properly lined up"). The bar chart is 7rem tall with 1.15rem of it kept for values. */
.sales-period .lc { margin-top: 0; }
.sales-period .lc-plot { height: 5.85rem; margin-top: 1.4rem; }
.sales-period .lc-foot { margin-top: .25rem; }

/* ---------- Orders > Backorders (rework phase 1, 2026-10-01) ----------
   The row, chevron toggle, stock dot and drawer are the Dispatch board's own classes
   (warehouse.css, linked by the page), so both boards share one finish. This block adds only
   what Backorders has and Dispatch has not. */
.bo-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.bo-title h1 { margin: 0; }
.bo-title .muted { font-size: var(--fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.bo-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 var(--s3); }
.bo-tools .bo-search { flex: 1 1 16rem; max-width: 30rem; width: auto; height: 2.5rem; }
.bo-tools select { flex: 0 0 auto; width: auto; height: 2.5rem; }
.bo-tools .seg { height: 2.5rem; }
/* Closed is "Find an order" (Orders remake O3): the search takes its own full line. */
.bo-tools .bo-search--find { flex-basis: 100%; max-width: 44rem; height: 3rem; font-size: var(--fs-md); }
.bo-groups { margin: 0 0 var(--s4); }
.bo-title .metric-help--inline { align-self: center; }
.bo-groups .bo-due { margin-left: auto; }
.bo-gdot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%;
  vertical-align: 1px; }
.bo-gdot[data-state="ok"] { background: var(--dot-ok); }
.bo-gdot[data-state="stop"] { background: var(--dot-stop); }
.bo-gdot[data-state="warn"] { background: var(--dot-warn); }
/* New orders (Orders remake O2): received, paid, stock, warehouse, booked, shipped. Done is
   ink, the next step is outlined, a blocked step is a stop dot. */
.bo-steps { display: flex; align-items: center; gap: 6px; height: 22px; }
.bo-steps i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.bo-steps i[data-s="done"] { background: var(--ink); }
.bo-steps i[data-s="next"] { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.bo-steps i[data-s="stop"] { background: var(--stop-ink); }

.orders-scan .bo-table { min-width: 60rem; }
.bo-table col.bo-c-order  { width: 11.5rem; }
.bo-table col.bo-c-party  { width: 13rem; }
.bo-table col.bo-c-supply { width: 16rem; }
.bo-table col.bo-c-value  { width: 7rem; }
.bo-table col.bo-c-cin7   { width: 10rem; }
.wh-row .wh-sub.bo-wrap { white-space: normal; }  /* the CIN7 line on a phone, parts and all */
.bo-table thead th.bo-th-order { padding-left: calc(var(--s3) + 20px); }
.bo-table thead th.num, .bo-table td.bo-value { text-align: right; }
.bo-table .wh-toggle { max-width: 100%; }
.bo-table .wh-toggle strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-src .wh-stock { vertical-align: top; height: 22px; }
.bo-table .wh-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.bo-table td.bo-value .wh-main { font-weight: 700; }
.bo-item, .bo-src { line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-item b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bo-item span { margin-left: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.bo-pl { font-weight: 600; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.bo-pl:hover { text-decoration: underline; text-underline-offset: 3px; }
.bo-eta { color: var(--muted); font-variant-numeric: tabular-nums; }
.bo-late { color: var(--stop-ink); font-variant-numeric: tabular-nums; }
.orders-scan tr.bo-drawer:hover > td { background: #fafaf8; }
.bo-drawer .wh-drawer { padding-left: calc(var(--s3) + 20px); }

/* Backorders pager (2026-10-02): the OS table pager, in the refreshed finish */
.bo-pager { justify-content: flex-end; gap: var(--s2) var(--s4); margin: var(--s4) 0; }
.bo-pager .pager-size, .bo-pager .pager-page { font-size: var(--fs-base); }
.bo-pager select, .bo-pager input[type="number"] { width: auto; min-width: 4.5rem; height: 2.25rem;
  background: var(--bg); border-color: var(--line-strong); border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums; }
.bo-pager .pager-arrow { padding: 0 .65rem; font-size: var(--fs-md); border-radius: var(--radius-sm); }
@media (min-width: 901px) and (pointer: fine) {
  .bo-pager .pager-arrow { min-height: 0; height: 2.25rem; }
}

/* By container (rework phase 2): one white card per source, the waiting orders as compact
   hairline rows beneath its header */
.bo-groups .bo-by { height: 2.5rem; margin-right: var(--s2); }
.bo-blks { display: grid; gap: var(--s3); }
.bo-blk { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden; }
.bo-blk-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); cursor: pointer;
  list-style: none; }
.bo-blk-head::-webkit-details-marker { display: none; }
.bo-blk:not([open]) > .bo-blk-head { border-bottom: 0; }
.bo-blk-head:hover .wh-chev, .bo-blk[open] > .bo-blk-head .wh-chev { color: var(--ink); }
.bo-blk[open] > .bo-blk-head .wh-chev::before { transform: rotate(45deg); margin: -3px 0 0; }
.bo-blk-head:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.bo-blk-head > .wh-chev { margin-right: calc(var(--s2) - var(--s4)); }
.bo-blk-title { flex: 1 1 18rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--s1) var(--s3); line-height: 22px; }
.bo-blk-title strong { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.bo-blk-title .wh-stock { font-size: var(--fs-md); font-weight: 700; }
.bo-blk-sum { color: var(--muted); font-size: var(--fs-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.bo-blk-act { display: inline-flex; gap: var(--s2); }
/* the OS scroll container, without its own card: the block is the card */
.table-wrap.bo-blk-wrap { max-height: none; border: 0; border-radius: 0; box-shadow: none; background: none; }
.table-wrap .bo-blk-table { width: 100%; min-width: 44rem; table-layout: fixed; border-collapse: collapse; }
.bo-blk-table col.bo-k-order   { width: 11.5rem; }
.bo-blk-table col.bo-k-party   { width: 14rem; }
.bo-blk-table col.bo-k-contact { width: 11rem; }
.bo-blk-table td { padding: 10px var(--s4); border: 0; border-top: 1px solid #efefec; background: none;
  vertical-align: top; font-size: var(--fs-base); line-height: 22px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bo-blk-table tr:first-child td { border-top: 0; }
.bo-blk-table tbody tr:hover td { background: #fafaf8; }
.bo-blk-table td b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bo-blk-table td.bo-eta { font-size: var(--fs-base); color: var(--muted); }
.bo-blk-table td.bo-late { font-size: var(--fs-base); color: var(--stop-ink); }

/* drawer (rework phase 3): up to three white cards on the Dispatch drawer tint; the fact
   lists are Dispatch's own (.wh-facts dl) */
.wh-facts.bo-cards { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s4); padding: 0; }
.bo-cards > section { min-width: 0; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--s3) var(--s4) var(--s4); }
.bo-cards h4 { margin-bottom: var(--s3); }
.wh-facts.bo-cards dl { grid-template-columns: 6rem minmax(0, 1fr); }
.bo-cards a { color: var(--ink); font-weight: 600; text-decoration: none; }
.bo-cards a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bo-box-head { margin: 0 0 var(--s2); font-size: var(--fs-base); line-height: 1.45; }
.bo-box-head a { font-variant-numeric: tabular-nums; }
.bo-cards dd.muted { margin: 0; }
.bo-dd-sub { display: block; color: var(--muted); font-size: var(--fs-sm); }
.bo-box + .bo-box { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid #efefec; }
/* B41 P2: pin, Container changed, pin pop-up (mock p2-mock/p2.css). */
.bo-box + .bo-plan { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.bo-pin { margin-left: var(--s1); min-height: 1.375rem; padding: 0 var(--s2); vertical-align: 1px;
  box-shadow: inset 0 0 0 1px var(--line); } /* stays a pill on the open row's grey */
.bo-pin-act { display: block; padding: 0; min-height: 0; margin-top: var(--s1); font-size: var(--fs-sm); }
.bo-pin-none { color: var(--muted); font-size: var(--fs-sm); }
.bo-was { font-size: var(--fs-sm); color: var(--warn-ink); line-height: 1.45; white-space: normal; }
.bo-was.is-good { color: var(--ok-ink, var(--ink)); }
.bo-was .bo-gdot { vertical-align: 1px; }
.bo-why { color: var(--muted); }
.bo-told { display: block; padding: 0; min-height: 0; margin-top: 2px; font-size: var(--fs-sm); }
.bo-changed-help { font-size: var(--fs-sm); margin: var(--s3) 0 0; }
.bo-empty-row { padding: var(--s5) var(--s4); color: var(--muted); text-align: center; }
.bo-empty-row b { color: var(--ink); }
.bo-flash { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s3); padding: var(--s2) var(--s3);
  background: var(--panel); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.bo-flash .btn--link { padding: 0; min-height: 0; font-size: inherit; }
.bo-pin-list { border: 0; padding: 0; margin: 0 0 var(--s3); display: grid; gap: var(--s2); }
.bo-pin-opt { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: var(--fs-base); cursor: pointer; }
.bo-pin-opt:has(input:checked) { border-color: var(--ink); }
.bo-pin-opt.is-off { cursor: default; color: var(--muted); background: var(--panel); }
.bo-pin-opt input { flex: none; width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--ink); }
.bo-pin-opt > span { flex: 1; min-width: 0; }
.bo-pin-opt small { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.bo-pin-opt small.bo-pin-warn { color: var(--warn-ink); }
.bo-pin-note { display: grid; gap: var(--s1); font-size: var(--fs-sm); }
.bo-pin-note input { width: 100%; }
.bo-pin-empty { padding: var(--s3); background: var(--panel); border-radius: var(--radius-sm); }
@media (max-width: 600px) {
  dialog.bo-pin-dlg { margin: auto 0 0; inset-inline: 0; width: 100%; max-width: none; box-sizing: border-box;
    border-radius: var(--radius) var(--radius) 0 0; }
  .bo-was-now { margin-top: var(--s1); font-size: var(--fs-sm); }
}

/* Inbound: waiting orders past the first 12 open in place; a searched order is marked */
.inbound-waiting-more > summary { cursor: pointer; color: var(--muted); font-size: var(--fs-sm);
  margin: -.2rem 0 .4rem 1.1rem; list-style: none; }
.inbound-waiting-more > summary::-webkit-details-marker { display: none; }
.inbound-waiting-more > summary::before { content: "+ "; }
.inbound-waiting-more[open] > summary::before { content: "− "; }
.inbound-waiting-more .if-open, .inbound-waiting-more[open] .if-closed { display: none; }
.inbound-waiting-more[open] .if-open { display: inline; }
.inbound-waiting-more[open] > summary { margin: .3rem 0 .4rem 1.1rem; }
.inbound-waiting-more > summary:hover { color: var(--ink); }
@media (max-width: 900px) {
  /* The scan table scrolls sideways on a phone; keep the open drawer inside the screen. */
  .bo-drawer .wh-drawer { position: sticky; left: 0; width: calc(100vw - 2.5rem); padding: var(--s1) var(--s4) var(--s4); }
  .wh-facts.bo-cards { grid-template-columns: 1fr; }
  .bo-groups .bo-due { margin-left: 0; }
  .bo-blk-head { padding: var(--s3); }
  .bo-blk-act { width: 100%; }
}
/* Products > Sales control: Top-20 board (one partial, swapped by its buttons) + month change */
.sales-board-controls { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
  margin: 1.4rem 0 .2rem; }
.sales-board.is-loading .table-wrap { opacity: .4; transition: opacity .12s; }
.sales-months td .trend-change { vertical-align: 1px; }
.sales-change-basis { font-size: var(--fs-sm); margin-left: .3rem; white-space: nowrap; }
/* Logistics > Inbound container dropdown (2026-10-01 redesign): answers first in the header,
   then timeline, facts, contents with totals, orders waiting. */
details.record > summary.ib-head {
  grid-template-columns: minmax(13rem, 1.6fr) minmax(9rem, 1.1fr) minmax(10.5rem, 1.1fr)
    minmax(5.5rem, .6fr) minmax(7.5rem, .8fr) 5.5rem;
  gap: .9rem; padding: .85rem 1rem; }
.ib-id { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ib-id strong { font-size: var(--fs-md); overflow-wrap: anywhere; }
.ib-lane, .ib-head small { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.ib-state { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.ib-eta { display: flex; align-items: flex-end; gap: .45rem; font-variant-numeric: tabular-nums; }
.ib-eta > span:not(.ib-arrow), .ib-size { display: flex; flex-direction: column; line-height: 1.25; }
.ib-eta b { font-size: var(--fs-md); }
.ib-arrow { color: var(--muted); padding-bottom: .05rem; }
.ib-size b { font-variant-numeric: tabular-nums; }
.ib-orders b { font-size: var(--fs-md); }
.ib-actions { text-align: right; }
.ib-body { display: grid; gap: 1.1rem; padding: .4rem 1rem 1.2rem; }
.ib-section h4 { margin: 0 0 .5rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.ib-section-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.ib-section-head h4 { margin: 0; }
.ib-section-head .metric-help { margin: 0; border: 0; }
.ib-body .voyage { max-width: 44rem; margin: .2rem 0 0; }
.ib-delay { margin: .55rem 0 0; font-size: var(--fs-base); color: var(--ink-2); }
.ib-exceptions { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center;
  padding: .55rem .8rem; background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--warn-ink); border-radius: var(--radius-sm); font-size: var(--fs-base); }
.ib-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ib-facts > div { padding: .6rem .8rem; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); min-width: 0; }
.ib-facts > div:nth-child(4n) { border-right: 0; }
.ib-facts dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .15rem; }
.ib-facts dd { margin: 0; font-size: var(--fs-base); color: var(--ink); overflow-wrap: anywhere; }
.ib-pending { margin: -.5rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.ib-pending::before { content: ""; display: inline-block; width: .45rem; height: .45rem;
  margin-right: .4rem; border: 1.5px dashed var(--muted); border-radius: 50%; vertical-align: 0; }
.record-detail .ib-table { min-width: 0; width: 100%; }
.ib-table th, .ib-table td { padding-top: .42rem; padding-bottom: .42rem; font-size: var(--fs-base); }
.ib-m { display: none; }
.ib-table tfoot td { font-weight: 700; border-top: 1px solid var(--line-strong); background: var(--bg); }
.ib-waiting { table-layout: fixed; }
.ib-waiting .c-order { width: 18%; } .ib-waiting .c-cust { width: 30%; }
.ib-waiting .c-item { width: 26%; } .ib-waiting .c-date { width: 14%; } .ib-waiting .c-age { width: 12%; }
.ib-waiting td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbound-waiting tr.is-hit td { background: #fff6d6; font-weight: 600; }
.inbound-waiting .inbound-waiting-more > summary { margin: .45rem 0 .2rem .8rem; }
@media (max-width: 900px) {
  details.record > summary.ib-head { grid-template-columns: 1fr auto; gap: .5rem .8rem; }
  .ib-id { grid-column: 1 / -1; }
  .ib-actions { grid-column: 2; grid-row: 4; }
  .ib-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ib-facts > div:nth-child(4n) { border-right: 1px solid var(--line); }
  .ib-facts > div:nth-child(2n) { border-right: 0; }
  .record-detail .ib-waiting { min-width: 32rem; }
}
@media (max-width: 600px) {
  .t-cards .ib-table tfoot { display: block; margin-top: .5rem; }
  .t-cards .ib-table tfoot tr { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .6rem .8rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .t-cards .ib-table tfoot td { border: 0; padding: 0; background: none; }
  .ib-m { display: inline; }
}

/* Sales › Product rank (kept #58): figures right-aligned; cells never wrap, the table scrolls. */
.rank-table th.num, .rank-table td.num { text-align: right; }
.rank-table td { white-space: nowrap; }

/* ---------- Indonesia Analisis (B67 D5): flow, heatmap, trend ----------
   Moved out of production.css. White card, soft state tints, one legend style. */
.p-flow small { display: block; }
.p-flow thead th small { font-size: inherit; font-weight: 400; }
.t-cards .p-flow td { white-space: normal; }  /* a long parts line wraps in its card */
@media (max-width: 600px) { .stick-1 .p-flow td:first-child .muted { display: none; } }
.p-up { color: var(--ok-ink); font-weight: 600; }
.p-down { color: var(--stop-ink); font-weight: 600; }
.p-heat-scroll { overflow-x: auto; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card); }
table.p-heat { font-size: var(--fs-sm); border-collapse: separate; border-spacing: 2px; }
.p-heat thead th { padding: .3rem .1rem; text-align: center; min-width: 1.9rem; box-shadow: none; }
.p-heat th.p-heat-div { position: sticky; left: 0; z-index: 1; background: var(--bg);
  text-align: left; font-weight: 600; color: var(--ink); min-width: 9rem; padding: 0 .75rem; }
.p-heat thead th.p-heat-div { color: var(--muted); }
.p-heat td.p-heat-cell { padding: .3rem .1rem; text-align: center; border: 0;
  border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.p-heat .sun { color: var(--muted); }
.p-heat td.on_target, .p-legend .sw.on_target { background: var(--ok-bg); color: var(--ok-ink); }
.p-heat td.behind, .p-legend .sw.behind { background: var(--warn-bg); color: var(--warn-ink); }
.p-heat td.critical, .p-legend .sw.critical { background: var(--stop-bg); color: var(--stop-ink); }
.p-heat td.unknown, .p-legend .sw.unknown { background: var(--panel); }
.p-heat td.no_data { color: var(--muted); }
.p-legend .sw.no_data, .p-legend .sw.unknown { border: 1px solid var(--line-strong, var(--line)); }
.p-legend .sw.on_target { border: 1px solid var(--ok-ink); }
.p-legend .sw.behind { border: 1px solid var(--warn-ink); }
.p-legend .sw.critical { border: 1px solid var(--stop-ink); }
.p-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s2) 0 0;
  font-size: var(--fs-sm); color: var(--muted); }
.p-legend span { display: inline-flex; align-items: center; gap: var(--s1); }
.p-legend .sw { display: inline-block; width: .75rem; height: .75rem; border-radius: var(--radius-sm); }
.p-legend .sw.bar { background: var(--muted); opacity: .35; }
.p-legend .sw.avg { height: 2px; background: var(--ink); border-radius: 0; }
.p-legend .sw.tgt { height: 0; border-top: 2px dashed var(--ink); border-radius: 0; }
.p-legend .sw.ot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--warn-ink); }
.p-trend .toolbar select { min-width: 12rem; }
.p-trend-chart { width: 100%; height: auto; display: block; margin-top: var(--s3); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }
/* Target (D5): form about 40rem, the month list beside it from 1100px. */
.p-split { display: grid; gap: var(--s5); align-items: start; }
.p-split td { white-space: nowrap; }
@media (min-width: 1100px) {
  .p-split { grid-template-columns: minmax(0, 36rem) minmax(18rem, 1fr); }
  .p-split-title { margin-top: 0; }
}
.p-form-card { padding: var(--s5); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-card); }
.p-form-card .form-grid { gap: var(--s4); }
@media (min-width: 1100px) { .p-form-card .form-grid:has(> .span-2) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.p-form-card .field { gap: var(--s1); }
.p-form-card .field > .label { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.p-form-card .form-grid > .span-2 { grid-column: 1 / -1; }
@media (max-width: 760px) { .p-form-card { padding: var(--s4); } }
.p-form-end { justify-content: flex-end; margin-top: var(--s4); }
@media (max-width: 600px) { .p-form-end > button { flex: 1 1 100%; } }
.wd-pick { border: 0; padding: 0; margin: var(--s4) 0 0; min-width: 0; }
.wd-pick legend { padding: 0; margin-bottom: var(--s2); font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.wd-pick p { margin: var(--s2) 0 0; }
.wd-pick p b { color: var(--ink); }
.wd-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s1); max-width: 28rem; }
.wd-day { position: relative; display: inline-flex; align-items: center; gap: var(--s1); min-height: 2.5rem;
  padding: 0 var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg);
  font-size: var(--fs-base); font-weight: 600; cursor: pointer; }
.wd-day input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.wd-day small { color: var(--muted); font-weight: 400; }
.wd-day:has(input:checked) { border-color: var(--ink); background: var(--panel); }
.wd-day:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }
.wd-cal .wd-day { justify-content: center; padding: 0; min-height: 2.25rem; }
.wd-cal .wd-head { border-color: transparent; background: none; color: var(--muted); font-size: var(--fs-sm); }
.wd-cal .wd-head:hover span { text-decoration: underline; text-underline-offset: 3px; }
.wd-cal .wd-head:has(input:checked) { border-color: transparent; background: none; color: var(--ink); }
.wd-date { font-weight: 500; font-variant-numeric: tabular-nums; }
.wd-date:has(input:checked) { border-color: var(--line); background: var(--bg); color: var(--ink); font-weight: 600; }
.wd-date:has(input:checked):hover { border-color: var(--muted); }
.wd-date:not(:has(input:checked)) { color: var(--muted); border-style: dashed; background: none; }

/* ======================================================================================
   Indonesia daily board, Papan harian (B67 D6: moved out of production.css). The page never
   page-scrolls (Robin, 2026-09-04: "header still not fixed"): main is a locked flex column and
   the table scrolls in both axes inside its region, so both header rows pin on every screen.
   ====================================================================================== */
.production-board-page { display: flex; flex-direction: column; max-width: none; width: 100%;
  margin: 0; padding: 0; height: calc(100vh - var(--topbar-h)); overflow: hidden; animation: none; }
.production-board-page .p-wrap { display: flex; flex-direction: column; min-height: 0; height: 100%;
  padding: 1rem 1.25rem 1.25rem; }
.p-board-scroll { overflow-x: auto; max-width: 100%; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--field); }
.p-board-vscroll { overflow: auto; flex: 1 1 auto; min-height: 0; }
.p-board { font-size: var(--fs-sm); white-space: nowrap; min-width: 100%; }
.p-board th, .p-board td { padding: .22rem .4rem; text-align: right; }
.p-board th:nth-child(-n+3), .p-board td:nth-child(-n+3),
.p-board tfoot td:first-child { text-align: left; }
/* border-collapse borders do not stick with the cell: rows carry z-index and an inset shadow. */
.p-board thead th { position: sticky; background: var(--bg); color: var(--muted); font-weight: 600; }
.p-board thead tr:first-child th { top: 0; z-index: 6; box-shadow: inset 0 -1px 0 var(--line); }
.p-board thead tr:nth-child(2) th { top: 1.32rem; z-index: 5; box-shadow: inset 0 -2px 0 var(--line); }
.p-board-group { text-align: center !important; }
.p-board tbody tr.p-board-sunday { background: color-mix(in srgb, var(--line) 22%, transparent); }
.p-board tbody tr.p-board-empty td { color: var(--muted); }
.p-board tfoot td { border-top: 1px solid var(--line); font-weight: 700; }
.p-board tfoot tr:first-child td { border-top: 2px solid var(--ink); }
/* A figure under the division's daily target: amber; under behind_min (config): red. OT = a small mark. */
.p-board td.p-below { background: var(--warn-bg); }
.p-board td.p-below-critical { background: var(--stop-bg); color: var(--stop-ink); }
.p-ot { margin-left: .3rem; font-size: var(--fs-xs); font-weight: 600; color: var(--warn-ink); }
/* Produk pinned while the divisions scroll; on a phone the code alone, so the figures show. */
@media (max-width: 900px) {
  .p-board tbody td:first-child, .p-board tfoot td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--bg); box-shadow: inset -1px 0 0 var(--line); }
  .p-board thead th:first-child { left: 0; z-index: 7;
    box-shadow: inset -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
  .p-board tbody tr:hover td:first-child { background: var(--panel); }
}
@media (max-width: 600px) {
  .production-board-page .p-wrap { padding: .75rem .9rem 1.25rem; }  /* main's sm gutter */
  .p-board td:first-child .muted { display: none; }
}
/* Target readout (D5): two quiet tiles, label on top, a thin progress bar in the pace's state colour. */
.p-target-readout { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s3); }
.p-target-item { display: grid; gap: var(--s1); flex: 0 1 16rem; min-width: 9rem; padding: var(--s2) var(--s3);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.p-target-label, .p-target-item small { color: var(--muted); font-size: var(--fs-sm); }
.p-target-item b { color: var(--ink); font-weight: 600; }
.p-target-bar { display: block; height: 4px; background: var(--panel); border-radius: var(--radius); overflow: hidden; }
.p-target-bar > i { display: block; height: 100%; background: var(--muted); }
.p-target-item[data-state="ok"] .p-target-bar > i { background: var(--ok-ink); }
.p-target-item[data-state="warn"] .p-target-bar > i { background: var(--warn-ink); }
.p-target-item[data-state="stop"] .p-target-bar > i { background: var(--stop-ink); }
.p-target-item[data-state="ok"] small { color: var(--ok-ink); }
.p-target-item[data-state="warn"] small { color: var(--warn-ink); }
.p-target-item[data-state="stop"] small { color: var(--stop-ink); }

/* Close on every notice band (behaviors.js closable, Robin 2026-10-18): a quiet line icon in the
   band's own ink, centred on its first line, never a box on the coloured band. */
.notice:has(> .notice-x) { position: relative; padding-right: 2.75rem; }
.notice > .notice-x { position: absolute; top: var(--s1); right: var(--s1); width: 2rem; height: 2rem;
  min-width: 2rem; min-height: 2rem; background: none; border-color: transparent; color: inherit; opacity: .55; }
.notice > .notice-x svg { display: block; }
.notice > .notice-x:hover { opacity: 1; background: none; border-color: transparent; color: inherit; }
.notice > .notice-x:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: -2px; }
.notice { transition: opacity .18s ease, max-height .18s ease, padding .18s ease, margin .18s ease; }
.notice.is-closing { opacity: 0; max-height: 0 !important; padding-block: 0; margin-block: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .notice { transition: none; } }
/* ======================================================================================
   People (office HR), moved out of people/_head.html (B77 P2, 19 Oct 2026). The review page
   (.rv-*) follows 04_OUTPUTS/2026-10-19-novasolo-os-design-audit/people-review-mock.html:
   self-review beside the manager's score, summary first.
   ====================================================================================== */
.ppl-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.ppl-form .wide { grid-column: 1 / -1; }
.ppl-form .two { grid-column: span 2; }
.ppl-inline { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-end; margin: 0 0 var(--s4); }
.ppl-inline .field { min-width: 9rem; }
.ppl-inline .field.grow { flex: 1; min-width: 14rem; }
.ppl-att { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-sm); }
.ppl-att .bar { height: 5px; background: var(--neutral-bg); width: 7rem; border-radius: 999px; overflow: hidden; }
.ppl-att .bar > span { display: block; height: 100%; background: var(--ink); }
.ppl-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s5); margin: 0 0 var(--s4); font-size: var(--fs-base); }
.ppl-dl dt { color: var(--muted); font-size: var(--fs-base); font-weight: 600; padding-top: 1px; }
.ppl-dl dd { margin: 0; }
.ppl-crit { border-top: 1px solid var(--line); padding: var(--s3) 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s2) var(--s5); }
.ppl-crit h3 { margin: 0; font-size: var(--fs-md); }
.ppl-crit .hint { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 0; }
.ppl-crit textarea { min-height: 2.4rem; font-size: var(--fs-base); }
.ppl-score { font-size: var(--fs-xl); font-weight: 800; }
.ppl-note { white-space: pre-wrap; }
.ppl-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s4) 0; }
.ppl-warn { margin: var(--s1) 0 0; padding-left: var(--s4); font-size: var(--fs-base); color: var(--warn-ink); }
.ppl-board { margin: 0 0 var(--s6); }
.ppl-board .section-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.ppl-months { display: flex; flex-wrap: wrap; gap: var(--s1); }
.ppl-months .chip { text-decoration: none; white-space: normal; max-width: 100%; }
.ppl-delta { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.ppl-delta.up { color: var(--ok-ink); }
.ppl-delta.down { color: var(--stop-ink); }
.ppl-goals { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s2) var(--s3); margin: 0 0 var(--s4); background: var(--bg); }
.ppl-goals h3 { margin: 0 0 2px; font-size: var(--fs-base); }
.ppl-list { margin: 2px 0 0; padding-left: var(--s4); font-size: var(--fs-base); }
.ppl-list li { margin: 2px 0; }
.ppl-goal-row { margin: 0 0 var(--s2); }
.ppl-cal { overflow-x: auto; margin: 0 0 var(--s2); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.ppl-cal table { border-collapse: collapse; font-size: var(--fs-sm); width: 100%; }
.ppl-cal th, .ppl-cal td { padding: var(--s1) 2px; text-align: center; min-width: 1.55rem; border-bottom: 1px solid var(--line); }
.ppl-cal thead th { font-weight: 600; color: var(--muted); line-height: 1.1; }
.ppl-cal thead th span { display: block; font-size: var(--fs-xs); }
.ppl-cal .who { position: sticky; left: 0; background: var(--bg); text-align: left; white-space: nowrap; padding-right: var(--s2); min-width: 7rem; font-weight: 600; }
.ppl-cal .off { background: var(--neutral-bg); }
.ppl-cal .today { box-shadow: inset 0 0 0 1px var(--ink); }
.ppl-cal .total td { color: var(--muted); font-weight: 600; }
.lv { display: inline-block; min-width: 1.2rem; padding: 1px 2px; text-decoration: none; font-weight: 700; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
.lv.approved { background: var(--ok-bg); color: var(--ok-ink); }
.lv.pending { border: 1px dashed var(--warn-ink); color: var(--warn-ink); }
.ppl-cal-key { font-size: var(--fs-sm); }
.ppl-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s4); }
/* The old one-up radio row (self-review form): a segmented control like the review page. */
.ppl-scale { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.ppl-scale label { position: relative; margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.25rem; padding: 0 var(--s2); font-size: var(--fs-base); font-weight: 600; border-right: 1px solid var(--line); color: var(--ink); }
.ppl-scale label:last-child { border-right: 0; color: var(--muted); }
.ppl-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ppl-scale label:has(input:checked) { background: var(--ink); color: var(--bg); }
.ppl-scale label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.ppl-returned { background: var(--warn-bg); color: var(--warn-ink); }

/* Review page */
.rv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4) var(--s5); align-items: end; margin: var(--s5) 0 var(--s4); }
.rv-who h2 { margin: var(--s1) 0 0; font-size: var(--fs-lg); }
.rv-who p { margin: var(--s1) 0 0; font-size: var(--fs-base); }
.rv-steps { list-style: none; display: flex; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.rv-steps li { padding: var(--s2) var(--s4); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 8.5rem; }
.rv-steps li:last-child { border-right: 0; }
.rv-steps b { font-size: var(--fs-base); color: var(--muted); font-weight: 700; }
.rv-steps span { font-size: var(--fs-sm); color: var(--muted); }
.rv-steps li[data-s="done"] b { color: var(--ok-ink); }
.rv-steps li[data-s="now"] { box-shadow: inset 0 -2px 0 var(--ink); }
.rv-steps li[data-s="now"] b { color: var(--ink); }
.rv-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); margin: 0 0 var(--s5); }
.rv-kpi { padding: var(--s4); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s1); align-items: flex-start; min-width: 0; }
.rv-kpi:last-child { border-right: 0; }
.rv-kpi .muted { font-size: var(--fs-base); }
.rv-kpi .muted a { color: var(--ink); }
.rv-lbl { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.rv-big { font-size: var(--fs-xl); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rv-note p { margin: 0; font-size: var(--fs-base); white-space: pre-wrap; }
.rv-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); margin: 0 0 var(--s5); }
.rv-pad { padding: 0 var(--s4) var(--s4); }
.rv-colhead, .rv-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s5); padding: var(--s3) var(--s4); }
.rv-card.no-self .rv-colhead, .rv-card.no-self .rv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.rv-colhead { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line); }
.rv-sec { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s4) var(--s4) var(--s1); border-top: 1px solid var(--line); }
.rv-colhead + .rv-sec { border-top: 0; }
.rv-sec h3 { margin: 0; font-size: var(--fs-base); }
.rv-sec .muted { font-size: var(--fs-sm); }
.rv-sec-top { border-top: 0; padding-left: 0; padding-right: 0; }
.rv-row { border-top: 1px solid var(--line); align-items: start; }
.rv-sec + .rv-row { border-top: 0; }
.rv-row[data-gap] { box-shadow: inset 3px 0 0 var(--warn-ink); }
.rv-crit b { display: block; font-size: var(--fs-md); }
.rv-crit span { display: block; font-size: var(--fs-base); color: var(--muted); margin-top: 2px; }
.rv-crit a { color: inherit; }
.rv-self { font-size: var(--fs-base); color: var(--muted); }
.rv-self b, .rv-mgr-top > b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-self p, .rv-mgr p { margin: var(--s1) 0 0; font-size: var(--fs-base); white-space: pre-wrap; }
.rv-mgr p { color: var(--ink); }
.rv-self .rv-lbl, .rv-mgr .rv-lbl { display: none; }
.rv-ev { margin: var(--s1) 0 0; font-size: var(--fs-base); }
.rv-ev > summary { list-style: none; cursor: pointer; }
.rv-ev > summary::-webkit-details-marker { display: none; }
.rv-ev > summary > span { display: block; white-space: pre-wrap; }
.rv-ev:not([open]) > summary > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rv-ev > summary::after { content: "Show more"; display: inline-block; margin-top: 2px; font-size: var(--fs-sm); color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.rv-ev[open] > summary::after { content: "Show less"; }
.rv-ev-all { margin-left: var(--s2); }
.rv-mgr-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-base); }
.rv-scale { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg); }
.rv-scale label { margin: 0; cursor: pointer; position: relative; }
.rv-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-scale span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.25rem; padding: 0 var(--s2); font-size: var(--fs-base); font-weight: 600; border-right: 1px solid var(--line); color: var(--ink); font-variant-numeric: tabular-nums; }
.rv-scale label:last-child span { border-right: 0; color: var(--muted); }
.rv-scale input:checked + span { background: var(--ink); color: var(--bg); }
.rv-scale input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -2px; }
.rv-mgr textarea { margin-top: var(--s2); min-height: 3.6rem; width: 100%; font-size: var(--fs-base); resize: vertical; }
.rv-need { margin: var(--s1) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.rv-goal { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.rv-goal b { display: block; font-size: var(--fs-md); }
.rv-goal .muted { display: block; font-size: var(--fs-base); }
.rv-goal-in { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.rv-goal-in input[type="text"] { width: 100%; }
.rv-out span { min-width: 4.2rem; white-space: nowrap; }
.rv-out label:last-child span { color: var(--ink); }
.rv-out label:first-child span, .rv-out label:first-child input:checked + span { color: var(--muted); }
.rv-out label:first-child input:checked + span { background: var(--panel); }
.rv-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); padding-top: var(--s4); }
.rv-two .field { margin: 0; }
.rv-text { padding-top: var(--s4); }
.rv-text h3 { margin: 0 0 var(--s1); font-size: var(--fs-base); color: var(--muted); font-weight: 600; }
.rv-text p, .rv-text ul { margin: 0; font-size: var(--fs-base); }
.rv-goalnew { margin-top: var(--s4); }
.rv-goalrow { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s2); margin-bottom: var(--s2); }
.rv-locked { margin: 0 0 var(--s2); font-size: var(--fs-base); }
.rv-actions { display: flex; justify-content: flex-end; align-items: flex-start; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.rv-actions > .muted { margin-right: auto; font-size: var(--fs-base); align-self: center; }
.rv-actions { flex-wrap: wrap; }
.rv-todo { flex-basis: 100%; margin: 0; text-align: right; font-size: var(--fs-sm); }
.rv-goal-in input[type="text"] { display: none; }
.rv-goal-in:has(input[value="dropped"]:checked) input[type="text"], .rv-goal-in input[type="text"].has-value { display: block; }
.rv-flagged { display: none; }
.rv-end button { border-color: transparent; background: none; color: var(--muted); padding-left: 0; }
.rv-end button:hover { color: var(--ink); background: none; border-color: transparent; }
.rv-return { margin-right: auto; }
.rv-return summary { cursor: pointer; font-size: var(--fs-base); color: var(--muted); padding: var(--s2) 0; }
.rv-return textarea { margin: var(--s2) 0; min-width: 18rem; }
.rv-end { display: flex; gap: var(--s3); margin: 0 0 var(--s5); }
/* Review list and employee Reviews tab (B77 P2c): one row per employee per month. */
.ppl-rl td { vertical-align: top; }
.ppl-rl td > div { min-height: 22px; }
.ppl-sub { display: block; font-size: var(--fs-base); line-height: 18px; }
.ppl-overdue { color: var(--stop-ink); font-variant-numeric: tabular-nums; }
.ppl-count { font-size: var(--fs-base); margin-left: auto; align-self: center; }
.ppl-act { display: flex; gap: var(--s2); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.ppl-act form { margin: 0; }
.ppl-rl .bo-steps { height: 22px; }
.ppl-latest { margin: 0 0 var(--s4); font-size: var(--fs-base); }
.ppl-hint { font-size: var(--fs-sm); margin: var(--s1) 0 var(--s2); }
.ppl-small { font-size: var(--fs-sm); }
.ppl-h3 { margin: var(--s4) 0 var(--s1); font-size: var(--fs-md); }
.ppl-inline-form { display: inline-block; margin: var(--s2) var(--s2) 0 0; }
.ppl-list--flush { margin: 0; }
.ppl-gap-top { margin-top: var(--s4); }
.rv-head .ppl-act { align-self: end; }
.ppl-phone { display: none; }
.ppl-rl td:first-child a { text-decoration: none; }
.ppl-rl td:first-child a:hover { text-decoration: underline; }
.ppl-act .btn, .ppl-act button { min-width: 6.5rem; justify-content: center; }
.bo-steps i[data-s="skip"] { height: 2px; border-radius: 0; }
@media (max-width: 600px) {
  .ppl-rl .ppl-wide { display: none; }
  .ppl-rl .ppl-phone { display: block; }
  .ppl-rl td:first-child b { white-space: nowrap; }
  .ppl-rl .ppl-band { display: none; }
  .ppl-rl .ppl-phone .bo-steps { height: 18px; }
  .ppl-act .btn, .ppl-act button { min-width: 0; }
  .ppl-filter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
  .ppl-filter .field { min-width: 0; }
  .ppl-filter label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ppl-filter .ppl-count { grid-column: 1 / -1; }
  .rv-head .ppl-act, .rv-head .ppl-act form { width: 100%; }
  .rv-head .ppl-act .btn, .rv-head .ppl-act button { flex: 1; width: 100%; }
}
@media (max-width: 1240px) {
  .rv-head { grid-template-columns: 1fr; }
  .rv-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rv-note { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .rv-kpi:nth-child(3) { border-right: 0; }
}
@media (max-width: 900px) {
  .ppl-form { grid-template-columns: 1fr; }
  .ppl-form .two { grid-column: auto; }
  .ppl-crit { grid-template-columns: 1fr; }
  .rv-steps { width: 100%; }
  .rv-steps li { min-width: 0; flex: 1; padding: var(--s2); }
  .rv-steps b { font-size: var(--fs-sm); }
  .rv-steps span { font-size: var(--fs-xs); }
  .rv-kpi { padding: var(--s3); }
  .rv-kpi .chip { white-space: normal; font-size: var(--fs-xs); }
  .rv-big { font-size: var(--fs-lg); }
  .rv-gl { display: none; }
  .rv-flagged { display: inline; }
  .rv-crit span { display: none; }
  .rv-head { margin-top: var(--s3); }
  .rv-who p { font-size: var(--fs-base); }
  .rv-colhead { display: none; }
  .rv-row, .rv-card.no-self .rv-row { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s3); }
  .rv-sec { padding: var(--s4) var(--s3) 0; }
  .rv-sec.rv-sec-top { padding: var(--s4) 0 0; }
  .rv-out { flex-wrap: wrap; }
  .rv-out span { padding: 0 var(--s1); font-size: var(--fs-base); white-space: normal; text-align: center; line-height: 1.15; }
  .rv-self { border-left: 2px solid var(--line); padding-left: var(--s2); }
  .rv-self .rv-lbl { display: inline; margin-right: var(--s1); }
  .rv-self > div { display: inline; }
  .rv-mgr .rv-lbl { display: block; margin-bottom: 2px; }
  .rv-scale, .ppl-scale { display: flex; width: 100%; }
  .rv-scale label, .ppl-scale label { flex: 1; }
  .rv-scale span { width: 100%; min-width: 0; height: var(--tap); }
  .ppl-scale label { min-width: 0; height: var(--tap); }
  .rv-goal { flex-direction: column; align-items: stretch; }
  .rv-goal-in { align-items: stretch; }
  .rv-two, .rv-goalrow { grid-template-columns: 1fr; }
  .rv-actions { flex-wrap: wrap; }
  .rv-actions > .muted, .rv-return { width: 100%; }
  .rv-actions > button { flex: 1 1 100%; width: 100%; }
  .rv-todo { text-align: left; }
  .ppl-act { justify-content: flex-start; }
  .ppl-count { margin-left: 0; width: 100%; }
}

/* People › Quarterly review (B77 P2d): qv-* from quarterly-review-mock.html. */
.qv-sum { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.qv-sum .rv-kpi:last-child { border-right:0; }
.qv-yn label:last-child span { color:var(--ink); }
.qv-yn label:last-child input:checked + span { color:var(--bg); }
.qv-act input { width:100%; }
.qv-trend { display:flex; gap:var(--s5); align-items:flex-end; }
.qv-sum .rv-kpi:nth-child(odd) { position:relative; justify-content:center; align-items:center; text-align:center; gap:var(--s2); padding-top:calc(var(--s4) * 2 + .74rem); }
.qv-sum .rv-kpi:nth-child(odd) > .rv-lbl { position:absolute; top:var(--s4); left:var(--s4); }
.qv-trend div { align-items:center; }
.qv-q { display:flex; gap:var(--s2); align-items:center; }
.qv-goals { font-size:var(--fs-xl); }
.qv-goals small { font-size:var(--fs-lg); font-weight:700; color:var(--muted); }
.qv-trend div { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.qv-trend small { font-size:var(--fs-sm); color:var(--muted); }
.qv-trend b { font-size:var(--fs-lg); font-variant-numeric:tabular-nums; }
.qv-trend div:last-child b { font-size:var(--fs-xl); font-weight:800; line-height:1.1; }
.qv-board { width:100%; border-collapse:collapse; font-size:var(--fs-base); font-variant-numeric:tabular-nums; }
.qv-board th { font-size:var(--fs-sm); font-weight:600; color:var(--muted); padding:0 var(--s2) var(--s1); text-align:center; }
.qv-board td { padding:3px var(--s2); border-top:1px solid var(--line); text-align:center; }
.qv-board th:first-child, .qv-board td:first-child { text-align:left; padding-left:0; }
.qv-board td + td { border-left:1px solid var(--line); }
.qv-board td:last-child { text-align:right; padding-right:0; font-weight:700; }
.qv-board a { color:var(--ink); text-decoration:none; }
.qv-board a:hover { text-decoration:underline; }
.qv-sum .rv-kpi:nth-child(2) { gap:var(--s2); }
.qv-ch { display:grid; grid-template-columns:2.2rem minmax(0, 1fr); gap:var(--s1) var(--s2); margin:0; font-size:var(--fs-base); line-height:1.35; }
.qv-ch dt, .qv-ch dd { margin:0; }
.qv-ch a { color:var(--ink); text-decoration:none; }
.qv-ch a:hover { text-decoration:underline; }
.qv-ch .muted { font-size:var(--fs-base); }
.qv-cols { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); max-width:17rem; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; font-variant-numeric:tabular-nums; }
.qv-cols > span { text-align:center; padding:var(--s1) 0; border-left:1px solid var(--line); }
.qv-cols > span:first-child { border-left:0; }
.qv-cols > span:nth-child(4) { border-left:1px solid var(--line-strong); border-right:1px solid var(--line-strong); background:var(--panel); }
.qv-cols > span:nth-child(5) { border-left:0; }
.qv-cols i { display:none; }
.qv-cols b { font-weight:600; }
.qv-cols > span:nth-child(4) b { font-weight:800; }
.rv-colhead .qv-colh { border:0; border-radius:0; background:none; }
.rv-colhead .qv-colh > span { padding:0; border:0; background:none; }
.qv-m { display:flex; gap:var(--s3); font-variant-numeric:tabular-nums; flex-wrap:wrap; }
.qv-m span { color:var(--muted); }
.qv-m b { color:var(--ink); }
.qv-m .qv-avg { color:var(--ink); font-weight:600; }
.qv-pre { font-size:var(--fs-sm); color:var(--muted); }
.qv-self3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s4); padding-top:var(--s4); }
.qv-self3 .rv-text { padding-top:0; }
.qv-done { margin:var(--s2) 0 0; padding:0; list-style:none; font-size:var(--fs-base); }
.qv-done li { display:flex; justify-content:space-between; gap:var(--s3); padding:var(--s1) 0; }
.qv-done .muted { white-space:nowrap; }
.qv-dec { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--line); }
.qv-dec b { font-size:var(--fs-md); font-weight:600; }
.qv-yn span { min-width:4.6rem; }
.qv-act textarea { resize:none; min-height:2.25rem; }
.qv-act { display:grid; grid-template-columns:minmax(0, 1fr) auto 7rem; gap:var(--s2); align-items:start; margin-bottom:var(--s2); }
.qv-acthead { display:grid; grid-template-columns:minmax(0, 1fr) 8.6rem 7rem; gap:var(--s2); font-size:var(--fs-sm); color:var(--muted); font-weight:600; padding:var(--s3) 0 var(--s1); }
.qv-sign { border-top:1px solid var(--line); padding:var(--s3) 0; display:flex; justify-content:space-between; align-items:center; gap:var(--s4); font-size:var(--fs-base); }
.qv-sign .muted { display:block; font-size:var(--fs-sm); }
.qv-corr { font-size:var(--fs-base); margin:2px 0 0; color:var(--warn-ink); }
.qv-sec-note { font-size:var(--fs-sm); }
@media (max-width: 900px) {
  .qv-sum { grid-template-columns:1fr; }
  .qv-sum .rv-kpi { border-right:0; border-top:1px solid var(--line); flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3); }
  .qv-sum .rv-kpi:first-child { border-top:0; }
  .qv-sum .rv-lbl { flex-basis:100%; }
  .qv-sum .rv-kpi:nth-child(odd) { padding-top:var(--s3); justify-content:flex-start; align-items:baseline; text-align:left; }
  .qv-sum .rv-kpi:nth-child(odd) > .rv-lbl { position:static; }
  .qv-trend b { font-size:var(--fs-md); }
  .qv-trend div:last-child b { font-size:var(--fs-xl); }
  .qv-goals { font-size:var(--fs-xl); }
  .qv-goals small { font-size:var(--fs-md); }
  .rv-sec-top { flex-wrap:wrap; }
  .rv-sec-top .muted { flex-basis:100%; }
  .rv-goalrow input { font-size:var(--fs-base); }
  .qv-self3 { grid-template-columns:1fr; }
  .qv-dec, .qv-sign { flex-direction:column; align-items:stretch; }
  .qv-yn span { min-width:0; }
  .qv-act { grid-template-columns:1fr 1fr; }
  .qv-act textarea { grid-column:1 / -1; height:4.6rem; min-height:4.6rem; max-height:none; }
  .qv-act .qv-yn { width:auto; }
  .rv-self.qv-cols { display:grid; border:1px solid var(--line); padding-left:0; max-width:none; }
  .qv-cols i { display:block; font-style:normal; font-size:var(--fs-sm); color:var(--muted); }
  .qv-acthead { display:none; }

}

/* Quarterly additions beyond the mock: the comment box opens once the score moves off its
   pre-set value; a correction line opens when the employee picks Correct. */
.rv-row:has(input[data-pre]:checked) textarea:placeholder-shown { display: none; }
.qv-sign input[type=text] { display: none; width: 100%; margin-top: var(--s2); }
.qv-sign:has(input[value=corrected]:checked) input[type=text] { display: block; }
.qv-sign > .chip { flex: none; }
.table-wrap.qv-wrap { width: 100%; border: 0; border-radius: 0; box-shadow: none; background: none; }
.table-wrap.qv-wrap thead th { position: static; background: none; box-shadow: none; }

/* People › Performance (B77 P2c): was the <style> block in people/performance.html. */
.perf-bar { display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:flex-end; margin:0 0 1.1rem; }
.perf-bar .seg .btn.is-on { background:var(--ink); color:var(--bg); }
.perf-bar .field { min-width:12rem; }
.perf-num { font-variant-numeric:tabular-nums; }
.perf-heat td.s { text-align:center; font-variant-numeric:tabular-nums; font-weight:700; }
.perf-heat td.s[data-s="1"], .perf-heat td.s[data-s="2"] { background:var(--stop-bg); color:var(--stop-ink); }
.perf-heat td.s[data-s="4"], .perf-heat td.s[data-s="5"] { background:var(--ok-bg); color:var(--ok-ink); }
.perf-heat th.c { font-size:var(--fs-xs); max-width:6.5rem; white-space:normal; line-height:1.2; }
/* score chart (people/_score_chart.html) */
.psc-fig { margin:0 0 1.25rem; border:1px solid var(--line); background:var(--bg); border-radius:var(--radius); padding:.75rem .9rem .5rem; }
.psc-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem; font-size:var(--fs-base); margin:0 0 .5rem; }
.psc-key { display:flex; gap:1rem; color:var(--muted); font-size:var(--fs-sm); }
.psc-key i { display:inline-block; width:1.1rem; height:0; vertical-align:middle; margin-right:.35rem; }
.psc-key .k-p { border-top:2px solid var(--ink); }
.psc-key .k-b { border-top:2px dashed var(--muted); }
.psc { position:relative; height:140px; margin-left:1.4rem; }
.psc svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.psc-grid { stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.psc-p { fill:none; stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.psc-b { fill:none; stroke:var(--muted); stroke-width:2; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.psc-y { position:absolute; left:-1.4rem; transform:translateY(-50%); font-size:var(--fs-xs); color:var(--muted); }
.psc-dot { position:absolute; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.psc-dot.p { background:var(--ink); box-shadow:0 0 0 2px var(--bg); }
.psc-dot.b { background:var(--bg); border:2px solid var(--muted); width:9px; height:9px; }
.psc-val { position:absolute; transform:translate(-50%,-165%); font-size:var(--fs-sm); background:var(--bg); padding:0 .15rem; pointer-events:none; }
.psc-hit { position:absolute; top:0; bottom:0; cursor:default; }
.psc-hit:hover { background:var(--neutral-bg); }
.psc-x { display:flex; justify-content:space-between; margin:.35rem 0 0 1.4rem; font-size:var(--fs-xs); color:var(--muted); }
.psc-table summary { font-size:var(--fs-sm); color:var(--muted); cursor:pointer; margin-top:.35rem; }
@media (max-width: 900px) { .perf-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .perf-two { grid-template-columns:1fr; } }
@media (max-width: 600px) { .perf-grid { grid-template-columns:1fr; } }
/* inline styles moved out of the template */
h2.perf-mb2, .perf-mb2 { margin:0 0 var(--s2); }
h3.perf-h, .perf-h { margin:0 0 var(--s1); }
h3.perf-h-mt, .perf-h-mt { margin:var(--s4) 0 var(--s1); }
.perf-mb { margin:0 0 var(--s4); }
.perf-mb3 { margin:0 0 var(--s2); }
.perf-m0, .ppl-list.perf-m0, h3.perf-m0 { margin:0; }
.perf-mt { margin-top:var(--s4); }
.perf-mt1 { margin:var(--s1) 0 0; }
.perf-mt1b { margin-top:var(--s1); }
.perf-mt2 { margin-top:var(--s2); }
.perf-mt5 { margin-top:var(--s5); }
.perf-t74 { font-size:var(--fs-sm); }
.perf-t76 { font-size:var(--fs-sm); }
.perf-t78 { font-size:var(--fs-sm); }
.perf-t80 { font-size:var(--fs-base); }
.perf-t78-mt { font-size:var(--fs-sm); margin:var(--s1) 0 0; }
.perf-note { margin:0 0 var(--s2); font-size:var(--fs-base); }
.perf-legend { font-size:var(--fs-sm); margin:var(--s1) 0 var(--s5); }
.perf-bar .field.perf-nomin { min-width:0; }
.field input[type=checkbox].perf-wauto { width:auto; }
.perf-check { display:flex; gap:var(--s2); align-items:center; }
.perf-attendees { display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4); }
/* Performance, answer first (B77 P2e, 20 Oct 2026): answer line + band strip, people by attention,
   heatmap, chart beside the divisions. Strips and bars are SVG sized by attributes. */
.pv-answer { border:1px solid var(--line); background:var(--bg); border-radius:var(--radius); padding:var(--s4) var(--s5); margin:0 0 var(--s5); }
.pv-lead { margin:0; font-size:var(--fs-md); line-height:1.6; }
.pv-big { font-size:var(--fs-xl); font-variant-numeric:tabular-nums; margin-right:var(--s1); letter-spacing:-.01em; }
.pv-meta { margin:var(--s2) 0 0; font-size:var(--fs-sm); }
.pv-bands { margin-top:var(--s3); }
.pv-strip { display:block; width:100%; height:10px; border-radius:var(--radius-sm); overflow:hidden; background:var(--neutral-bg); }
.pv-strip rect { stroke:var(--bg); stroke-width:.4; vector-effect:non-scaling-stroke; }
.pv-strip .b5, .pv-key .b5 { fill:var(--ok-ink); background:var(--ok-ink); }
.pv-strip .b4, .pv-key .b4 { fill:color-mix(in srgb, var(--ok-ink) 50%, var(--bg)); background:color-mix(in srgb, var(--ok-ink) 50%, var(--bg)); }
.pv-strip .b3, .pv-key .b3 { fill:var(--bar); background:var(--bar); }
.pv-strip .b2, .pv-key .b2 { fill:color-mix(in srgb, var(--warn-ink) 55%, var(--bg)); background:color-mix(in srgb, var(--warn-ink) 55%, var(--bg)); }
.pv-strip .b1, .pv-key .b1 { fill:var(--stop-ink); background:var(--stop-ink); }
.pv-strip .b0, .pv-key .b0 { fill:var(--neutral-bg); background:var(--neutral-bg); }
.pv-key { display:flex; flex-wrap:wrap; gap:var(--s1) var(--s4); margin-top:var(--s2); font-size:var(--fs-sm); color:var(--muted); }
.pv-key i { display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:var(--s1); }
.pv-key b { color:var(--ink); font-variant-numeric:tabular-nums; }
.pv-zero { opacity:.55; }
.pv-nums { display:block; font-size:var(--fs-sm); color:var(--muted); margin-top:var(--s1); font-variant-numeric:tabular-nums; }
.pv-people td:first-child b, .pv-writers td:first-child b { white-space:nowrap; }
.pv-namerow { display:flex; align-items:center; justify-content:space-between; gap:var(--s2); }
.pv-trend { display:flex; align-items:center; gap:var(--s2); }
.pv-trend a { color:inherit; text-decoration:none; }
.pv-trend b { font-variant-numeric:tabular-nums; }
.pv-spark { width:80px; height:26px; flex:none; overflow:visible; }
.pv-spark path { fill:none; stroke:var(--ink); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.pv-spark circle { fill:var(--ink); }
.pv-status { text-align:right; } .pv-people .chip { white-space:nowrap; } .pv-people a.chip { text-decoration:none; }
.pv-sechead { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin:var(--s6) 0 var(--s2); flex-wrap:wrap; }
.pv-sechead h3 { margin:0; }
.pv-train > summary { list-style:none; } .pv-train > summary::-webkit-details-marker { display:none; }
.pv-train[open] { flex-basis:100%; }
.pv-train[open] > summary { margin-bottom:var(--s3); }
.pv-heat th.c { font-size:var(--fs-sm); white-space:nowrap; max-width:none; }
.pv-heat th:first-child, .pv-heat td:first-child { position:sticky; left:0; background:var(--bg); z-index:1; white-space:nowrap; }
.pv-weakword { display:block; font-weight:400; color:var(--muted); font-size:var(--fs-xs); }
.pv-heat .pv-team td { border-top:1px solid var(--line-strong); font-weight:700; }
.pv-foot { font-size:var(--fs-sm); margin:var(--s2) 0 0; }
.pv-two { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--s4); margin-top:var(--s6); align-items:start; }
.pv-two .psc-fig { margin:0; }
.pv-div { border:1px solid var(--line); background:var(--bg); border-radius:var(--radius); padding:var(--s3) var(--s4); }
.pv-div h3 { margin:0 0 var(--s3); font-size:var(--fs-base); }
.pv-div ul { list-style:none; margin:0; padding:0; }
.pv-div li { display:grid; grid-template-columns:minmax(0,1fr) 6rem 3rem 5rem; gap:var(--s3); align-items:center; padding:var(--s2) 0; border-top:1px solid var(--line); font-size:var(--fs-base); }
.pv-div li:first-child { border-top:0; }
.pv-div li > .muted:last-child { font-size:var(--fs-sm); text-align:right; }
.pv-dbar svg { display:block; width:100%; height:6px; background:var(--neutral-bg); border-radius:999px; }
.pv-dbar rect { fill:var(--ink); } .pv-mine .pv-dbar rect { fill:var(--info-ink); }
.pv-crit .pv-secrow td { border-top:1px solid var(--line-strong); }
.pv-crit .chip { margin-left:var(--s1); }
.pv-stripcell { min-width:14rem; } .pv-stripcell .pv-strip { height:12px; }
.pv-link { font-size:var(--fs-base); }
@media (max-width: 900px) { .pv-two { grid-template-columns:minmax(0,1fr); } }
@media (max-width: 600px) {
  .pv-answer { padding:var(--s3) var(--s4); }
  .pv-lead { font-size:var(--fs-md); }
  .pv-big { font-size:var(--fs-lg); }
  .pv-stripcell { min-width:8rem; }
  .pv-div li { grid-template-columns:minmax(0,1fr) 4rem 2.6rem; }
  .pv-div li > .muted:last-child { display:none; }
}

/* Day bar (B77 P3, 2026-10-20): components/_day_bar.html, on Output per orang, Input harian,
   In Raw and Absensi. A week strip with a state dot per day replaces the month calendar. */
.daybar { border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); }
.db-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.db-top > form, .db-top .field { margin: 0; }
.db-top select { min-width: 14rem; }
.db-nav { display: flex; align-items: center; gap: var(--s2); }
.db-nav .btn { white-space: nowrap; }
.db-label { font-size: var(--fs-base); min-width: 11rem; text-align: center; }
.db-arrow { min-width: 44px; min-height: 44px; font-size: var(--fs-md); justify-content: center; }
.db-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s1); margin-top: var(--s3); }
.db-day { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: var(--s1) 0;
  border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.db-day:hover { border-color: var(--line); }
.db-day.is-sel { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.db-wd { font-size: var(--fs-base); color: var(--muted); }
.db-day b { font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
.db-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; flex: none; }
.db-dot.ok { background: var(--ok-ink); }
.db-dot.part { background: linear-gradient(90deg, var(--ok-ink) 50%, transparent 50%); border: 1.5px solid var(--ok-ink); }
.db-dot.none, .db-dot.miss { border: 1.5px solid var(--line-strong); }
.db-day .db-dot.none { border-color: transparent; }
.db-month { margin-top: var(--s3); }
.db-month .cal { border: 0; margin: 0; }
.db-miss { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--line); font-size: var(--fs-base); color: var(--muted); }
.db-mleft { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s3); flex: 1; min-width: 0; }
.db-mday { display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; color: var(--ink); text-decoration: none; font-weight: 600; }
.db-mday:hover { text-decoration: underline; text-underline-offset: 3px; }
.db-mday .db-dot.miss { border-color: var(--warn-ink); }
.db-view { margin-left: auto; flex: none; }
.db-miss .db-view .btn { min-height: 32px; }
/* Hairline segments (B77 P3): segments on white, the chosen one with an ink border and a faint tint;
   --joined makes one group of them (the attendance status). */
.seg-hair { display: inline-flex; gap: var(--s1); }
.seg-hair .btn { border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); min-height: 36px; }
.seg-hair .btn.is-on, .seg-hair input:checked + .btn { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); color: var(--ink); font-weight: 600; }
.seg-hair--joined { gap: 0; }
.seg-hair--wrap { flex-wrap: wrap; }
.p-ez-jadi { margin-top: var(--s3); }  /* "Jadi" at Spray, under the product */
.p-ez-jadi [data-ez-jadi-need] .p-ez-hint { margin-top: var(--s1); }
.seg-hair--joined .btn { border-radius: 0; margin-left: -1px; }
/* The ends of the group: the buttons themselves, or the labels round a radio + .btn
   (the user Access form), where every .btn is its label's last child. */
.seg-hair--joined > .btn:first-child, .seg-hair--joined > label:first-child > .btn { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.seg-hair--joined > .btn:last-child, .seg-hair--joined > label:last-child > .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.seg-hair--joined .btn.is-on, .seg-hair--joined input:checked + .btn { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .daybar { padding: var(--s3); }
  .db-top { flex-direction: column; align-items: stretch; }
  .db-nav { justify-content: space-between; }
  .db-label { min-width: 0; }
  .db-wk { display: none; }
  .db-top select { min-width: 0; }
}

/* B77 P3 Absensi: the attendance page on the day bar. One toolbar, one summary line whose counts
   filter, one row per worker with the six statuses as one joined hairline control. */
.de-tools { align-items: flex-end; }
.de-tools .field { margin: 0; }
.de-sum { margin: 0 0 var(--s3); font-size: var(--fs-base); color: var(--muted); }
.de-sumb { all: unset; cursor: pointer; color: var(--ink); white-space: nowrap; min-height: 32px; display: inline-flex; align-items: center; gap: var(--s1); }
.de-sumb:hover, .de-sumb[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 3px; }
.de-sumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.de-attlist { list-style: none; margin: 0 0 var(--s4); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.de-team { padding: var(--s3) var(--s4) var(--s1); font-size: var(--fs-base); color: var(--muted); }
.de-att { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); }
.de-att + .de-att, .de-team + .de-att, .de-att + .de-team { border-top: 1px solid var(--line); }
.de-attwho { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s2); align-items: center; }
.de-attwho a { color: var(--ink); text-decoration: none; }
.de-attwho .muted { grid-column: 2; font-size: var(--fs-base); }
.de-att.is-dirty .db-dot { background: transparent; border: 1.5px solid var(--line-strong); }
.de-away { grid-column: 1 / -1; display: none; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); justify-content: flex-end; }
.de-att.is-away .de-away { display: flex; }
.de-away .note-box { flex-basis: 100%; display: flex; flex-direction: column; gap: var(--s2); }
.de-away .note-preview { max-width: 22rem; font-size: var(--fs-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.de-away textarea { width: 100%; }
.de-stat .btn { position: relative; justify-content: center; }
.de-stat input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.de-stat .btn:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); color: var(--ink); font-weight: 600; position: relative; z-index: 1; }
.de-stat .btn:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.de-stat .btn:has(input:disabled) { opacity: .6; }
.de-short { display: none; }
/* one line, no visible labels above the fields (the labels stay for screen readers) */
.de-tools label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hr-toolbar.de-tools .field { min-width: 0; }
.hr-toolbar.de-tools .field.grow { min-width: 10rem; }
.hr-toolbar.de-tools .field:not(.grow) { flex: 0 1 12rem; }
.de-more { position: relative; }
.de-more summary { list-style: none; cursor: pointer; }
.de-more summary::-webkit-details-marker { display: none; }
.de-menu { display: flex; flex-direction: column; gap: var(--s2); min-width: 14rem; position: absolute; right: 0; top: 100%; z-index: 6; margin-top: var(--s1); padding: var(--s1); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius); white-space: nowrap; }
@media (max-width: 600px) {
  .de-att { grid-template-columns: 1fr; }
  .de-stat { display: flex; }
  .de-stat .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0; }
  .de-stat .de-long { display: none; }
  .de-stat .de-short { display: inline; }
  .de-stat .btn:has(input:checked) { flex: 2.4 1 0; }
  .de-stat .btn:has(input:checked) .de-long { display: inline; }
  .de-stat .btn:has(input:checked) .de-short { display: none; }
  .de-away { justify-content: flex-start; }
  .hr-toolbar.de-tools .field.grow { flex: 1 1 100%; order: -1; }
  .hr-toolbar.de-tools .field:not(.grow) { flex: 1 1 8rem; }
  .de-tools > [data-all] { flex: none; }
}

/* B159 P2 USA People > Attendance (people/attendance.html): the Absensi page above for the office,
   plus a leave-locked row, a file row and the month page's Out / Leave left columns. */
.att-facts { margin: var(--s3) 0; }
.chip.de-lock { justify-self: end; padding: 2px var(--s2); border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); color: var(--ink-2); }
.db-day.is-off { opacity: .45; }  /* weekend / holiday in the week strip */
.att-files { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.att-files label.btn { position: relative; }
.att-files .caps, .att-chosen { font-size: var(--fs-xs); color: var(--muted); }
.att-file { display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.att-file button { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--muted); }
.att-mbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.att-msum { display: flex; justify-content: space-between; align-items: center; margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.att-msum .de-sum { margin: 0; }
.att-mtools { display: flex; align-items: flex-end; gap: var(--s2); margin: 0 0 var(--s3); }
.att-mtools .field { margin: 0; }
.att-mtools .field.grow { flex: 1; }
.att-mtools .field:not(.grow) { flex: 0 1 12rem; }
.att-mtools label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hr-cal th.left, .hr-cal td.left { width: 4.6rem; text-align: right; padding-right: var(--s3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.att-mlist { display: none; }
.de-sum .att-short { display: none; }
@media (max-width: 600px) {
  .de-att:has(.de-lock) { grid-template-columns: minmax(0, 1fr) auto; }  /* the Leave pill stays beside the name */
  .de-team { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hr-cal, .hr-legend.att-mlegend { display: none; }  /* .hr-legend (template style) loads later */
  .att-mlist { display: block; list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
  .att-mlist li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3); border-top: 1px solid var(--line); }
  .att-mlist li:first-child { border-top: 0; }
  .att-mlist a { color: var(--ink); text-decoration: none; }
  .att-mlist li.team { color: var(--muted); font-size: var(--fs-sm); }
  .att-mlist .nums { display: grid; grid-template-columns: 4.5rem 6.5rem; gap: var(--s3); text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-sm); }
  .att-mlist .nums b { color: var(--ink); }
  .de-sum .att-full { display: none; }
  .de-sum .att-short { display: inline; }
  .att-facts .long { display: none; }
  .att-mtools .field:not(.grow) { max-width: 40%; }
}

/* B77 P3 Input (Input harian): one table row per division on a desktop; on a phone one compact row
   (dot, name, what is entered) that opens its fields in place. Sticky save bar that sits in the flow. */
.p-div-open { display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: default; }
.p-div-open .db-dot, .p-div-sum { display: none; }
.p-input-form tbody.p-div-rows > tr.p-person-sum:has(.p-person-sum-empty) { display: none; }
html:has(.de-savebar) { scroll-padding-bottom: 5rem; }  /* a focused field never ends under the bar */
.p-derived { display: block; font-size: var(--fs-base); font-weight: 400; white-space: nowrap; }
.p-input-form table { table-layout: fixed; }
.p-input-form thead th:nth-child(1) { width: 14rem; }
.p-input-form thead th:nth-child(n+2):nth-child(-n+3) { width: 7rem; }
.p-input-form thead th:nth-child(4) { width: 13rem; }
.p-input-form .p-div-cell .p-lock.is-on { display: none; }  /* a locked row says so in its Output cell */
.p-input-form thead th:nth-child(5) { width: 4.5rem; }
.p-input-form thead th:nth-child(6) { width: 6rem; }
.p-input-form thead th:nth-child(7) { width: 4rem; }
.p-input-form .p-div-inner { justify-content: space-between; }
.p-input-form .p-lock { order: 2; font-size: var(--fs-base); }
.p-input-form .p-div-open { flex: 1; min-width: 0; }
.p-input-form .p-div-inner { width: 100%; }
.p-lock.is-on { color: var(--muted); }
@media (min-width: 901px) {  /* an unlocked row shows "Kunci" only under the pointer or focus */
  .p-lock:not(.is-on) .p-lock-txt { opacity: 0; }
  .p-div-rows:hover .p-lock-txt, .p-lock:focus-visible .p-lock-txt { opacity: 1; }
}
.p-note summary { cursor: pointer; list-style: none; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-base); }
.p-note summary::-webkit-details-marker { display: none; }
.p-note[open] summary { margin-bottom: var(--s1); }
.p-input-form .p-ot-cells { display: flex; align-items: center; gap: var(--s4); }
.p-input-form .p-ot-cells label, .p-input-form .p-ot-marker { white-space: nowrap; font-size: var(--fs-base); color: var(--muted); font-weight: 400; }

.de-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3);
  margin-top: var(--s4); padding: var(--s3) 0; background: var(--bg); border-top: 1px solid var(--line); }
.de-savebar .p-draft-saved { margin: 0 auto 0 0; }
@media (max-width: 600px) {
  /* one hairline list, no cards */
  .p-input-form .table-wrap { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); overflow: hidden; }
  .p-input-form tbody.p-div-rows { gap: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .p-input-form tbody.p-div-rows + tbody.p-div-rows { margin: 0; border-top: 1px solid var(--line); }
  .p-input-form tbody.p-div-rows > tr { box-shadow: none; border: 0; background: none; border-radius: 0; }
  .p-input-form tbody.p-div-rows > tr:first-child { padding: 0 var(--s4); }
  .p-input-form tbody.p-div-rows > tr:first-child > td.p-div-cell { padding: 0; width: auto; }
  .p-div-open { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s3); align-items: center; cursor: pointer;
    min-height: 44px; padding: var(--s2) 0; width: 100%; }
  .p-div-open .db-dot { display: inline-block; grid-row: 1 / 3; }
  .p-div-sum { display: block; grid-column: 2; font-size: var(--fs-base); font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .p-input-form tbody.p-div-rows:not(.is-open) > tr:first-child > td:not(.p-div-cell),
  .p-input-form tbody.p-div-rows:not(.is-open) > tr:not(:first-child) { display: none !important; }
  .p-input-form tbody.p-div-rows:not(.is-open) .p-lock:not(.is-on) { display: none; }
  .p-input-form tbody.p-div-rows.is-open .p-div-cell .p-lock.is-on { display: inline-flex; }  /* unlock lives in the opened row */
  .p-derived .p-lock { display: none; }
  .de-savebar .btn--primary { flex: 1; justify-content: center; }
}

.p-ez-addperson { margin-top: var(--s3); justify-self: start; }
.p-ez-cardfoot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }
.p-ez-cardfoot .p-ez-addline { margin-top: 0; }
.p-ez-side-warn { color: var(--warn-ink, var(--muted)); font-size: var(--fs-base); }
/* QC, helper, note: one quiet link per card; the fields open under it (card.is-detail). Without JS they stay open. */
.p-ez-more { grid-column: 1 / -1; }
html.nav-js .p-ez-card:not(.is-detail) .p-ez-more { display: none; }
.p-ez-more-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s3); }
/* Who is already in today: beside the form from 901px, under it on a phone. */
.p-ez-side { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--s3) var(--s4); margin-top: var(--s4); }
.p-ez-side h2 { font-size: var(--fs-md); margin: 0 0 var(--s2); }
.p-ez-side ul { list-style: none; margin: 0; padding: 0; }
.p-ez-side li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.p-ez-side li:first-child { border-top: 0; }
.p-ez-side a { color: var(--ink); }
/* The list is a child of the form, after the cards: on a phone the order is cards, list, Simpan (no empty slot
   between them); from 901px the form is two columns and the list takes the right one. */
@media (min-width: 901px) {
  .p-ez-form { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; column-gap: var(--s5); align-items: start; }
  .p-ez-form > * { grid-column: 1; }
  .p-ez-form > .p-ez-side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: var(--s4); margin-top: 0; }
}
@media (max-width: 600px) {
  .p-ez-mode > .p-ez-label { display: none; }  /* Orang | Tim sits alone on its row */
}
/* Products and catalogue (B77 P4, Robin's OK on the mocks 20 Oct 2026): catalogue list, Fill
   missing data, product record, In development, Pricing. Rows are two lines (pk-main / pk-sub). */
.pk-crumb { display: inline-block; color: var(--muted); text-decoration: none; font-size: var(--fs-base); margin-bottom: var(--s2); }
.pk-actions { display: flex; gap: var(--s2); align-items: center; }
/* B121 P5b: the factory's head actions, one group (kept on a phone below). */
.pk-actions > .pp-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.pk-stop { color: var(--stop-ink); }
.pk-groups { margin: 0 0 var(--s4); }
.pk-fill { margin-left: auto; }
.pk-filters { display: contents; }
.pk-filter-btn { display: none; }
.pk-main { line-height: 22px; color: var(--ink); }
.pk-main b, .pk-code { font-weight: 600; color: var(--ink); }
.pk-code { text-decoration: none; }
.pk-code:hover { text-decoration: underline; }
.pk-sub { font-size: var(--fs-base); line-height: 18px; color: var(--muted); margin-top: 2px; }
button.pk-sub { display: block; padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; min-height: 0; }
.pk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-right: 6px; vertical-align: 1px; background: var(--line); }
.pk-dot.ok { background: var(--dot-ok); }
.pk-dot.warn { background: var(--dot-warn); }
.pk-scan { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.pk-empty { padding: var(--s5); text-align: center; }
.pk-table { width: 100%; border-collapse: collapse; background: var(--bg); }
.pk-table th { text-align: left; font-weight: 500; color: var(--muted); font-size: var(--fs-base); padding: var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.pk-table td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.pk-table tbody tr:last-child td { border-bottom: 0; }
.pk-table .num { text-align: right; }
.pk-table .group-row td { font-weight: 600; background: var(--panel); }
.pk-c-sel { width: 2.5rem; }
.pk-c-prod { width: 16rem; }
.pk-c-col { width: 12rem; }
.pk-c-mk { width: 8rem; }
.pk-c-num { width: 8rem; }
.pk-c-step { width: 15rem; }
.pk-c-age { width: 11rem; }
.pk-c-btn { width: 10rem; }
.pk-table .col-select { width: 2.5rem; padding-right: 0; }
.pk-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.pk-pager-size { display: inline-flex; align-items: center; gap: var(--s2); }
.pk-pager-size select { width: auto; height: 2.25rem; }
.pk-arrows { display: flex; align-items: center; gap: var(--s1); margin-left: auto; }
.pk-arrows .btn { min-width: 2.5rem; justify-content: center; }
.pk-arrows .is-off { opacity: .4; pointer-events: none; }
.pk-in { height: 2.25rem; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); font: inherit; font-size: 16px; width: 100%; min-width: 7rem; }
.pk-in--sm { width: 5rem; min-width: 5rem; }
.pk-in--page { width: 4.5rem; min-width: 4.5rem; }
textarea.pk-in { height: auto; min-height: 5rem; padding: var(--s2); }
.pk-grid td { vertical-align: middle; }
.pk-grid .pk-gprod { position: sticky; left: 0; z-index: 1; background: var(--bg); min-width: 11rem; }
.pk-have { color: var(--muted); font-size: var(--fs-base); white-space: nowrap; }
.pk-have.is-saved { color: var(--ink); }
.pk-multi { display: flex; gap: var(--s1); }
.pk-multi .pk-in--sm { width: 4.25rem; min-width: 4.25rem; }
/* A carton's four figures stay on one line (one row height), narrow enough to fit a desktop. */
.pk-multi--4 .pk-in--sm { width: 3.5rem; min-width: 3.5rem; }
.pk-need .pk-in::placeholder { color: var(--muted); }
.pk-need.is-changed .pk-in { border-color: var(--ink); }
.pk-need.is-refused .pk-in { border-color: var(--stop-ink); }
.pk-err { display: block; color: var(--stop-ink); font-size: var(--fs-base); margin-top: var(--s1); white-space: nowrap; }
.pk-colfill { display: block; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-sm); color: var(--muted); text-decoration: underline; cursor: pointer; min-height: 0; }
.pk-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3);
  margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.pk-savebar .muted { margin-right: auto; }
.pk-savebar .btn--primary[disabled] { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
@media (max-width: 600px) {
  .page-head:has(.pk-actions) { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .pk-actions { flex-wrap: wrap; }
  .pk-actions .btn--primary { order: -1; flex: 1 1 100%; justify-content: center; }
  .pk-groups .btn { white-space: nowrap; flex: 0 0 auto; }
  .pk-fill { margin-left: 0; }
  .pk-catalogue colgroup, .pk-catalogue thead .col-row { display: none; }
  .table-wrap .pk-catalogue, .pk-catalogue tbody { display: block; min-width: 0; width: 100%; }
  .pk-catalogue tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s3); padding: var(--s3); border-bottom: 1px solid var(--line); }
  .pk-catalogue tbody td { padding: 0; border: 0; }
  .pk-catalogue td.col-select, .pk-catalogue td:nth-child(3), .pk-catalogue td:nth-child(4) { display: none; }
  .pk-catalogue td.num { grid-row: 1; grid-column: 2; }
  /* Phone: two lines a row (code + price, name + gaps); Export and the selects step back. */
  .pk-actions .btn--quiet, .pk-actions .btn--link.danger { display: none; }
  /* B121 P5b: the factory's own actions on the record (delete, back to sample, revision,
     discontinue) stay on a phone, as on its old product page. */
  .pk-actions .pp-actions :is(.btn--quiet, .btn--link.danger) { display: inline-flex; }
  /* One row of links, the stage button full width above them (not .pp-actions' column below). */
  .pk-actions > .pp-actions { flex: 1 1 100%; flex-direction: row; align-items: center; column-gap: var(--s4); }
  .pk-actions > .pp-actions > form:has(> :is(.btn--primary, .btn--secondary)) { order: -1; flex: 1 1 100%; }
  .pk-actions > .pp-actions > form > :is(.btn--primary, .btn--secondary) { width: 100%; }
  .pk-filter-btn { display: inline-flex; height: 2.5rem; }
  .pk-filters { display: none; }
  .pk-filters.is-open { display: flex; flex-wrap: wrap; gap: var(--s2); flex-basis: 100%; }
  .pk-catalogue td:nth-child(2) { grid-row: 1 / span 2; }
  .pk-catalogue td:nth-child(5) { grid-column: 2; grid-row: 2; text-align: right; align-self: end; }
  .pk-catalogue td:nth-child(5) .pk-sub, .pk-catalogue td.num .pk-sub, .pk-catalogue .product-component-toggle { display: none; }
  .pk-catalogue tr.group-row, .pk-catalogue tr.product-component-row { display: block; }
  .pk-pager-size:first-of-type { display: none; }
  .pk-grid thead { display: none; }
  .table-wrap .pk-grid, .pk-grid tbody { display: block; min-width: 0; width: 100%; }
  .table-wrap.pk-scan { max-height: none; overflow: visible; }
  .pk-grid tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s3); border-bottom: 1px solid var(--line); }
  .pk-grid tbody td { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: 0; border: 0; }
  .pk-grid .pk-gprod { position: static; min-width: 0; }
  .pk-grid td.pk-have { display: none; }
  .pk-grid td.pk-need::before { content: attr(data-label); font-size: var(--fs-base); color: var(--ink-2); }
  .pk-grid .pk-in { width: 100%; min-width: 0; }
  .pk-multi .pk-in--sm { flex: 1 1 0; width: auto; min-width: 0; }
  .pk-savebar .muted { display: none; }
  .pk-savebar .btn--primary { flex: 1; justify-content: center; }
}
button.pk-sub { font-weight: 400; color: var(--muted); }

/* B77 P4 product record: one page of sections (pr-sec), a Data panel and Markets in the
   rail, one save bar. Sections are <details>; Compliance and Media fold when complete. */
.pr-head h1 { margin: 0; }
.pr-facts { margin: var(--s1) 0 0; color: var(--muted); }
.pr-unit { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; min-height: 0; }
.pr-unit.is-on { color: var(--ink); text-decoration: underline; }
.pr-compare { position: relative; }
.pr-compare > summary { list-style: none; }
.pr-compare > summary::-webkit-details-marker { display: none; }
.pr-pop { position: absolute; right: 0; top: calc(100% + var(--s1)); z-index: 6; width: 20rem; display: grid; gap: var(--s2);
  padding: var(--s3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.pr-layout { margin-top: var(--s4); }
.pr-sec, .pr-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 var(--s3); }
.pr-sec > summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s4); cursor: pointer; list-style: none; }
.pr-sec > summary::-webkit-details-marker { display: none; }
.pr-sec > summary h2, .pr-card h2 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.pr-sec-state { color: var(--muted); }
.pr-sec[open] > summary { padding-bottom: var(--s2); }
.pr-sec-body { padding: 0 var(--s4) var(--s4); }
/* B121 P5b: the factory's read-only record: a disabled fieldset, drawn like the section body. */
.pr-sec fieldset.pr-ro { border: 0; margin: 0; min-width: 0; padding: 0 var(--s4) var(--s4); }
/* B121 P6: read, not typed into, but drawn like the USA page (Robin 4 Nov: "just like the
   USA page"): every figure keeps its field box, in ink, with no cursor; the Pieces kind keeps
   its three-way switch with the chosen one lit; empty rows, hints and add buttons go. */
.pr-ro :is(input, select, textarea), main .pr-ro select:not([multiple]):not([size]):disabled {
  color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; cursor: default; }
.pr-ro input::placeholder { color: transparent; }
.pr-ro textarea { resize: none; field-sizing: content; }
.pr-ro tbody tr:not(:has(input:not([type=hidden]):not([value=""]))) { display: none; }
.pr-ro button:not([role=tab]):not(.seg *), .pr-ro p.muted { display: none; }
/* On the phone an empty cell is no line at all; a first cell that holds a figure (the empty
   Group or Label went) is a labelled line like the rest, not the card's heading. */
@media (max-width: 600px) {
  .pr-ro .t-cards tbody td:has(input:not([type=hidden])):not(:has(input:not([type=hidden]):not([value=""]))) { display: none; }
  .pr-ro .t-cards tbody td:first-child:has(input:not([type=hidden])) {
    display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center;
    font-weight: 400; font-size: var(--fs-base); margin-bottom: 0; border-bottom: 0; }
  .pr-ro .t-cards tbody td:first-child:has(input:not([type=hidden]))::before { content: attr(data-label); }
}
.pr-ro .seg > .btn { cursor: default; }
.pr-ro .seg > .btn.is-on:disabled { opacity: 1; }
.pr-ro legend :is(.pr-auto, .pr-req) { display: none; }
.pr-ro .pr-caption { padding: var(--s2) var(--s3) 0; }
/* A section head is pressed with the mouse to open it: no black box then; the keyboard
   keeps the global ink ring (os.css :focus-visible). */
.pr-sec > summary:focus:not(:focus-visible) { outline: none; }
.pr-sec .grid.two { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.pr-sec .field--wide { grid-column: 1 / -1; }
.pr-sec fieldset { border: 0; padding: 0; margin: var(--s4) 0 0; background: none; }
.pr-sec fieldset:first-child { margin-top: 0; }
.pr-sec legend { padding: 0; margin-bottom: var(--s2); font-size: var(--fs-md); font-weight: 600; }
.pr-sec legend > span { margin-left: var(--s2); font-weight: 400; }
.pr-label { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; min-height: 22px; }
.pr-label label { margin: 0; }
.pr-req { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--warn-ink); overflow: hidden; text-indent: 100%; white-space: nowrap; }
.pr-issue { color: var(--stop-ink); font-size: var(--fs-base); }
.pr-auto { color: var(--muted); font-size: var(--fs-base); }
.pr-note { margin: 0 0 var(--s2); font-size: var(--fs-sm); }
.pr-caption { text-align: left; font-size: var(--fs-sm); font-weight: 600; padding: var(--s1) 0; }
.pr-subhead { margin: 0 0 var(--s2); font-size: var(--fs-base); font-weight: 600; }
.pr-subtable { margin-bottom: var(--s2); }
.pr-subtable.is-empty { display: none; }
.pr-check .pr-label { flex-wrap: nowrap; justify-content: space-between; padding: var(--s2) 0; }
.pr-check .pr-label .switch { margin-left: auto; }
.pr-gap { border-color: var(--warn-ink); }
.pr-card { padding: var(--s4); }
.pr-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.pr-gaps { list-style: none; margin: 0; padding: 0; }
.pr-gaps li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); }
.pr-gaps a { color: var(--ink); }
.pr-done { margin: 0; }
.pr-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; margin: 0; font-weight: 400; color: var(--ink-2); }
.pr-gaps + .pr-row { border-top: 1px solid var(--line); }
.pr-state { width: auto; }
.pr-only-missing .pr-sec[data-gaps="0"],
.pr-only-missing .pr-sec .field:not(.is-missing),
.pr-only-missing .pr-sec fieldset:not(:has(.is-missing, [aria-invalid="true"], .chip[data-state="warn"])) { display: none; }
@media (max-width: 900px) {
  .pr-rail { display: contents; }
  #data-panel { order: -1; }
  /* Its edit mode: the forms first, the right column after them. */
  .pr-layout--edit #data-panel, .pr-layout--edit #data-panel ~ :is(*, #fob, #sheet) { order: 1; }
}
@media (max-width: 600px) {
  .pr-sec .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-pop { width: min(20rem, calc(100vw - 2 * var(--s4))); }
}

/* B77 P4 In development: one labelled step bar per product (done ink, now amber,
   sent back red, to do / not needed hairline). Phone: one card per product. */
.pk-steps { display: inline-flex; gap: 3px; vertical-align: middle; }
.pk-steps i { width: 18px; height: 5px; border-radius: 999px; background: var(--line); }
.pk-steps i[data-state="done"] { background: var(--ink); }
.pk-steps i[data-state="now"], .pk-steps i[data-state="doing"] { background: var(--warn-ink); }
.pk-steps i[data-state="stop"] { background: var(--stop-ink); }
.pk-steps i[data-state="na"] { background: var(--panel); }
.pk-dev tbody tr[data-row-toggle] { cursor: pointer; }
.pk-dev .num form { display: inline; }
.pk-drawer > td { background: var(--bg); }
@media (max-width: 600px) {
  .pk-dev colgroup, .pk-dev thead { display: none; }
  .table-wrap .pk-dev, .pk-dev tbody { display: block; min-width: 0; width: 100%; }
  .pk-dev tbody tr:not(.pk-drawer) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s3); padding: var(--s3); border-bottom: 1px solid var(--line); }
  .pk-dev tbody tr:not(.pk-drawer) > td { padding: 0; border: 0; }
  .pk-dev tbody tr:not(.pk-drawer) > td:nth-child(2), .pk-dev tbody tr:not(.pk-drawer) > td:nth-child(3) { grid-column: 1 / -1; }
  .pk-dev tbody tr:not(.pk-drawer) > td:nth-child(4) { grid-row: 1; grid-column: 2; text-align: right; }
  .pk-dev td.num { grid-column: 1 / -1; text-align: left; }
  .pk-dev td.num .btn { width: 100%; justify-content: center; }
  .pk-dev tr.pk-drawer { display: block; }
  .pk-dev tr.pk-drawer > td { display: block; }
}

/* B77 P4 Pricing calculator: start from a product, inputs left, the Prices card right
   with each level's rule; phone puts the prices first. */
.pc-pick { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.pc-pick > select { flex: 1 1 auto; max-width: 40rem; }
.pc-layout { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--s3); }
.pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.pc-boxes th, .pc-boxes td { padding: var(--s2); }
.pc-boxes .pk-in--sm { text-align: right; }
.pc-add { margin-top: var(--s2); font-size: var(--fs-base); }
.pc-rows { list-style: none; margin: 0; padding: 0; }
.pc-rows li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: var(--s2) 0; border-top: 1px solid var(--line); }
.pc-rows li .muted { font-size: var(--fs-base); }
.pc-rows li b { font-weight: 600; text-align: right; white-space: nowrap; }
.pc-note { margin: var(--s3) 0 0; font-size: var(--fs-base); }
@media (max-width: 900px) {
  .pc-layout { grid-template-columns: minmax(0, 1fr); }
  .pc-layout > .record-rail { display: contents; }
  .pc-layout #price-preview { order: -1; }
}
@media (max-width: 600px) {
  .pc-pick { flex-wrap: wrap; }
  .pc-pick > select { flex-basis: 100%; max-width: none; }
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-rows li { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pc-boxes { table-layout: fixed; }
  .pc-boxes th:first-child { width: 3.5rem; }
  .pc-boxes th, .pc-boxes td { padding: var(--s2) var(--s1); }
  .pc-boxes .pk-in--sm { width: 100%; min-width: 0; }
  /* The five-way status segment scrolls sideways on a phone instead of wrapping a label. */
  .pk-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pk-seg > .btn { flex: none; white-space: nowrap; }
}
/* One select look for every page (DESIGN rule 7, B77 P4 then P5): drawn like the OS fields, chevron from tokens. */
main select:not([multiple]):not([size]) {
  appearance: none; -webkit-appearance: none; padding-right: 2rem;
  background-image: var(--chevron); background-repeat: no-repeat;
  background-position: right var(--s3) center; background-size: var(--s3) var(--s2); }
main select:not([multiple]):not([size]):disabled { border-color: var(--line); background-image: none;
  color: var(--muted); cursor: default; opacity: 1; }
.pk-table.pc-boxes td { vertical-align: middle; }
.pr-card .table-wrap { border: 0; border-radius: 0; max-height: none; }

/* Operations (B77 P5, 2026-10-20): Booking quote and draft, Warehouse EDI Push, the shared list toolbar
   (Outbound, Tracking, Drafts, Booked, Processed, Dispatch). From the mocks Robin OK'd (p5/mock). */
.op-crumb { display: inline-block; margin-bottom: var(--s2); color: var(--muted); text-decoration: none; font-size: var(--fs-base); }
.op-main { line-height: 22px; color: var(--ink); }
.op-sub { line-height: 18px; color: var(--muted); font-size: var(--fs-base); }
.op-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-base); }
.op-tabs { margin: 0 0 var(--s4); }
.op-n { color: var(--muted); font-weight: 400; margin-left: 2px; }
.op-two { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s5); align-items: start; }
.op-two--draft { grid-template-columns: minmax(0, 1fr) 22rem; }
.op-two--draft .op-sum { order: 2; }
/* minmax(0, 1fr): a wide table (What was quoted, 62rem) scrolls in its wrap instead of widening the
   column under the Recent quotes rail (team's 1366px screen, 2026-10-21). */
.op-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); min-width: 0; container-type: inline-size; }
.op-rail { position: sticky; top: var(--s4); }
.op-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.op-card--flush { padding: 0; overflow: hidden; }
.op-pad { padding: var(--s4) var(--s4) var(--s2); }
.op-h { font-size: var(--fs-md); margin: 0 0 var(--s3); }
.op-ch { font-size: var(--fs-md); margin: 0 0 var(--s3); font-weight: 700; }
.op-ch .muted { font-weight: 400; margin-left: var(--s2); }
.op-chrow { display: flex; justify-content: space-between; align-items: baseline; }
.op-edit { font-size: var(--fs-base); color: var(--ink); }
.op-f { display: grid; gap: var(--s1); font-size: var(--fs-base); color: var(--muted); min-width: 0; }
.op-f > span:first-child { line-height: 18px; }
.op-f input, .op-f select, .op-toolbar input, .op-toolbar select, .op-date, .op-card textarea { font: inherit; font-size: var(--fs-md); color: var(--ink);
  min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background-color: var(--bg); padding: 0 var(--s3); width: 100%; box-sizing: border-box; }
.op-card textarea { padding: var(--s2) var(--s3); resize: vertical; }
.op-f select, .op-toolbar select { appearance: none; -webkit-appearance: none; padding-right: 2rem;
  background-image: var(--chevron); background-repeat: no-repeat;
  background-position: right var(--s3) center; background-size: var(--s3) var(--s2); }
.op-date { text-align: left; cursor: pointer; padding-left: 2.1rem;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236f6f6b' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat 10px 50%; }
.op-date.is-empty { color: var(--muted); }
.op-f input.op-date { padding-left: 2.1rem; position: relative; }
.op-f input.op-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
button.op-date { display: flex; align-items: center; justify-content: flex-start; }
.op-seg .btn { white-space: nowrap; }
.op-card--flush .table-wrap { border: 0; border-radius: 0; }
.op-next { color: var(--ink); font-weight: 600; }
.op-qrow { display: grid; grid-template-columns: minmax(12rem, 1fr) 11rem auto auto; gap: var(--s3); align-items: end; }
.op-f--btn .btn { min-height: 40px; }
.op-seg .btn { min-height: 40px; }
.op-fold { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--fs-base); color: var(--ink-2); }
.op-fold summary { cursor: pointer; }
.op-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
.op-rhead h2 { font-size: var(--fs-md); margin: var(--s2) 0 2px; }
.op-rhead a { color: var(--ink); }
.op-notice { margin: 0; }
.op-notice a { color: inherit; font-weight: 600; }
.op-bar { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center; }
.op-svc { display: flex; gap: var(--s4); font-size: var(--fs-base); }
.op-svc a { color: var(--muted); text-decoration: none; padding: var(--s2) 0; }
.op-svc a.is-on { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
.op-tw { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.op-table { width: 100%; border-collapse: collapse; }
.op-table th { text-align: left; font-weight: 600; font-size: var(--fs-base); color: var(--muted); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.op-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; }
.op-table tr:last-child td { border-bottom: 0; }
.op-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.op-table .right { text-align: right; }
.op-c-days { color: var(--ink-2); white-space: nowrap; line-height: 22px; }
.op-c-ins { font-size: var(--fs-base); line-height: 22px; }
.op-book--off { width: 100%; justify-content: center; min-height: 44px; background: var(--bg); color: var(--muted); border: 1px solid var(--line-strong); }
.op-why { font-size: var(--fs-base); color: var(--warn-ink); text-align: center; }
.op-empty { padding: var(--s4); display: grid; gap: 2px; }
.op-emptyact { display: flex; gap: var(--s4); align-items: center; margin-top: var(--s3); }
.op-emptyact a { color: var(--ink); font-size: var(--fs-base); }
.op-low { color: var(--ok-ink); }
.op-ph { display: none; }
.op-recent { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.op-recent li { display: grid; grid-template-columns: 1fr auto 36px; align-items: center; gap: var(--s2); padding: var(--s2) 0 var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.op-recent li.is-on { box-shadow: inset 2px 0 0 var(--ink); }
.op-recent a { text-decoration: none; }
.op-recent .muted { font-size: var(--fs-base); }
.op-x { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); font-size: var(--fs-md); border-radius: var(--radius-sm); cursor: pointer; }
.op-x:hover { background: var(--panel); color: var(--ink); }
.op-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s2); list-style: none; padding: 0; margin: 0 0 var(--s5); }
.op-step { display: grid; gap: var(--s2); font-size: var(--fs-base); color: var(--muted); }
.op-step i { height: 4px; border-radius: 999px; background: var(--line); }
.op-step.done i { background: var(--ink); }
.op-step.now i { background: var(--ink-2); }
.op-step.done i { opacity: .55; }
.op-step.now span { color: var(--ink); font-weight: 700; }
.op-step.done span { color: var(--ink-2); }
.op-hchip { font-size: var(--fs-base); vertical-align: 6px; margin-left: var(--s2); }
.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); }
.op-addr { margin-bottom: var(--s3); }
.op-from { padding-top: var(--s3); border-top: 1px solid var(--line); }
.op-sum .op-card { display: grid; gap: var(--s2); }
.op-price { font-size: var(--fs-xl); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.op-checks { list-style: none; margin: var(--s2) 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s2); font-size: var(--fs-base); }
.op-book { width: 100%; justify-content: center; min-height: 44px; }
.op-sumfoot { display: flex; justify-content: space-between; align-items: center; }
.op-cancel { color: var(--stop-ink); font-size: var(--fs-base); }
.op-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: var(--s2); vertical-align: 1px; }
.op-dot.ok { background: var(--dot-ok); } .op-dot.warn { background: var(--dot-warn); }
.op-dot.stop { background: var(--dot-stop); } .op-dot.info { background: var(--dot-info); }
.op-run { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); margin-bottom: var(--s4); }
.op-run-end { display: flex; align-items: center; gap: var(--s4); }
.op-run-docs { text-align: right; }
.op-run-docs .muted { color: var(--muted); }
.op-run-docs .link-button { font: inherit; font-weight: 400; color: var(--ink); cursor: pointer; }
.op-all { display: none; }
/* Show on the Send card narrows the table to the orders lacking documents (edi-files.js, 22 Oct) */
.docs-need .op-tw tbody > tr:not(.op-need), .docs-need .op-show { display: none; }
.docs-need .op-run-docs .op-all { display: inline; }
.op-docs { margin-top: var(--s5); }
.op-drop { display: grid; justify-items: center; gap: var(--s1); padding: var(--s5); border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg); cursor: pointer; text-align: center; }
.op-dbtn { display: none; }
.op-link { text-decoration: underline; text-underline-offset: 3px; }
.op-caps { color: var(--muted); font-size: var(--fs-base); }
.op-files { list-style: none; margin: var(--s3) 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.op-file { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 13rem 36px; gap: var(--s3); align-items: center; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.op-file:last-child { border-bottom: 0; }
.op-file .op-f > span:first-child { position: absolute; left: -9999px; }
.op-filefoot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s3); font-size: var(--fs-base); }
.op-toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.op-toolbar .op-search { flex: 1 1 16rem; width: auto; }
.op-toolbar select { flex: 0 0 11rem; width: 11rem; }
.op-toolbar .op-sort { margin-left: auto; flex-basis: 12rem; width: 12rem; }
.op-toolbar .drp, .op-toolbar .op-check { flex: 0 0 9.5rem; }
.op-toolbar .drp-toggle { width: 100%; min-height: 40px; justify-content: flex-start; gap: var(--s2); font-size: var(--fs-md); font-weight: 400; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); padding: 0 var(--s3); }
.op-toolbar .drp-toggle svg { color: var(--muted); flex: none; }
.op-dot.neutral { background: var(--dot-neutral); }
.op-out td.op-act { text-align: right; white-space: nowrap; }
.op-out td.op-act .btn, .op-out td.op-act form { display: inline-flex; }
.op-chips { margin-bottom: var(--s3); }
.op-late .op-main { color: var(--ink); }
.op-out td:nth-child(4) .op-main { color: var(--ink-2); }
.op-late td:nth-child(4) .op-main { color: var(--stop-ink); }
/* EDI Push: warehouse + range picker inside the day bar, row actions, the add-files drawer, the save result */
.op-pick { display: flex; align-items: flex-end; gap: var(--s3); order: -1; margin: 0; }
.op-pick .op-f { min-width: 14rem; }
.op-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); }
.op-acts form { margin: 0; }
.op-day .wh-detail > td { padding: 0; }
.op-result { margin: 0 0 var(--s3); }
.op-fcust { min-width: 14rem; margin-left: auto; }
.op-filefoot { margin-bottom: var(--s4); }
.op-filefoot .op-fcust + .btn { flex: none; }

.op-two--solo { grid-template-columns: minmax(0, 1fr); }
.op-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.op-seg .btn { position: relative; }
.op-seg .btn:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); color: var(--ink); font-weight: 600; z-index: 1; }
.op-seg .btn:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }
.op-seg .btn:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.op-quoted > summary { cursor: pointer; list-style: none; }
.op-quoted > summary::-webkit-details-marker { display: none; }
.op-quoted .op-link { color: var(--ink); }
.op-quoted .table-wrap { margin-top: var(--s3); }
.op-rhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
.op-rhead .chip { justify-self: start; }
.op-nb { white-space: nowrap; }
/* The OS tick (rule 7): a drawn box, not the browser's. Sized here for every tier (P1 phone rule is 0,1,1). */
input[type="checkbox"].op-tick { appearance: none; -webkit-appearance: none; flex: none; width: 1.125rem; height: 1.125rem; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--bg); cursor: pointer; display: inline-grid; place-content: center; }
input[type="checkbox"].op-tick::after { content: ""; width: .6rem; height: .35rem; border: solid var(--bg); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); visibility: hidden; }
input[type="checkbox"].op-tick:checked { background: var(--ink); border-color: var(--ink); }
input[type="checkbox"].op-tick:checked::after { visibility: visible; }
input[type="checkbox"].op-tick:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.op-card input[type=checkbox]:not(.switch) { accent-color: var(--ink); width: 1rem; height: 1rem; margin: 0; }
.op-rates .ship-group-head td { padding-block: var(--s2); background: var(--panel); }
.op-rates tr.ship-off td { opacity: .6; }
.op-fs { display: contents; border: 0; padding: 0; margin: 0; }
.op-f input:disabled, .op-fs[disabled] .op-f input:disabled, .op-fs[disabled] .op-f select:disabled, .op-fs[disabled] .op-card textarea:disabled { background-color: var(--panel); color: var(--ink-2); }
.op-card > .op-sub { margin: var(--s3) 0 0; }
.op-grid--address { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.op-span { grid-column: 1 / -1; }
.op-addrbox > summary { cursor: pointer; list-style: none; }
.op-addrbox > summary::-webkit-details-marker { display: none; }
.op-addrbox[open] .op-edit { visibility: hidden; }
.op-pieces-ed td input { font-size: var(--fs-base); }
.op-pieces-ed tr.op-p-read { display: none; }
.op-pieces-ed th.bk-c-item { width: auto; }
.op-pieces-ed th.bk-c-sku { width: 8rem; }
.op-pieces-ed th.num { width: 3.5rem; }
.op-pieces-ed .bk-c-x { width: 2.75rem; }
.op-pieces-ed th.bk-c-value { width: 4.5rem; }  /* last when booked: also carries the 1rem edge padding */
.op-sumfoot { gap: var(--s2); flex-wrap: wrap; }
button.op-cancel { background: none; border: 0; padding: var(--s1); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: var(--fs-base); margin-left: auto; }
.op-sum .bk-cancel-booked { display: grid; gap: var(--s2); }
/* Column too narrow for the order row in one line (rail beside it on a ~1366px screen):
   Order gets its own line, the other three share the second. */
@container (max-width: 46rem) {
  .op-qrow { grid-template-columns: minmax(0, 1fr) auto auto; }
  .op-qrow .op-grow { grid-column: 1 / -1; }
}
@media (max-width: 1240px) {
  .op-two, .op-two--draft { grid-template-columns: 1fr; }
  .op-two--draft .op-sum { order: 0; }
  .op-rail { position: static; }
}
@media (max-width: 600px) {
  .op-qrow { grid-template-columns: 1fr 1fr; }
  .op-qrow .op-grow { grid-column: 1 / -1; }
  .op-qrow .op-f--btn { grid-column: 1 / -1; }
  .op-qrow .op-f--btn .btn { width: 100%; justify-content: center; }
  .op-qrow .op-f:nth-child(2), .op-qrow .op-f:nth-child(3) { grid-column: 1 / -1; }
  .op-seg { display: flex; } .op-seg .btn { flex: 1; justify-content: center; }
  .op-svc { overflow-x: auto; white-space: nowrap; max-width: 100%; }
  .op-rates thead, .op-day thead, .op-out thead, .op-pieces thead { display: none; }
  .op-rates tr { display: grid; grid-template-columns: 1fr auto; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); gap: 2px var(--s3); }
  .op-rates td { padding: 0; border: 0; }
  .op-rates td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .op-rates td:nth-child(2) { display: none; }
  .op-rates td:nth-child(3) { grid-column: 2; grid-row: 1; }
  .op-rates td.op-c-ins { display: none; }
  .op-rates td.right { grid-column: 2; grid-row: 2; }
  .op-ph { display: inline; }
  .op-day tr, .op-out tr { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .op-day td, .op-out td { padding: 0; border: 0; }
  .op-day td:nth-child(2) { grid-column: 1 / -1; }
  .op-day td:nth-child(2) > .op-main { display: none; }
  .op-day td:nth-child(2) > .op-sub:empty { display: none; }
  .op-day td:nth-child(3) { grid-column: 1 / -1; }
  .op-day td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .op-day .wh-detail { padding: 0; }
  .op-day .wh-detail > td { grid-column: 1 / -1; }
  .op-pick { flex-direction: column; align-items: stretch; order: 0; }
  .op-fcust { margin-left: 0; }
  .op-out td:nth-child(2) { grid-column: 1 / -1; }
  .op-out td:nth-child(2) .op-main { color: var(--muted); font-size: var(--fs-base); line-height: 18px; }
  .op-out td:nth-child(3) { grid-column: 2; grid-row: 1; text-align: right; }
  .op-out td:nth-child(4) { grid-column: 1 / -1; }
  .op-grid { grid-template-columns: 1fr; }
  .op-steps { grid-template-columns: repeat(5, 1fr); }
  .op-step span { font-size: var(--fs-sm); }
  .op-step:not(.now) span { visibility: hidden; }
  .op-step.now span { white-space: nowrap; }
  .op-run { flex-direction: column; align-items: stretch; }
  .op-run .btn { width: 100%; justify-content: center; }
  .op-run-end { flex-direction: column; align-items: stretch; }
  .op-run-docs { text-align: left; padding-top: var(--s3); border-top: 1px solid var(--line); }
  .op-drop { padding: var(--s4); }
  .op-dtext { display: none; } .op-dbtn { display: inline-flex; }
  .op-file { grid-template-columns: 1fr 1fr 36px; }
  .op-file .op-fname { grid-column: 1 / 3; }
  .op-file .op-x { grid-column: 3; grid-row: 1; }
  .op-file .op-f { grid-row: 2; }
  .op-file .op-f:nth-of-type(2) { grid-column: 2 / 4; }
  .op-filefoot { flex-direction: column; align-items: stretch; }
  .op-filefoot .btn { width: 100%; justify-content: center; }
  .op-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .op-toolbar .op-search { grid-column: 1 / -1; }
  .op-toolbar select, .op-toolbar .op-sort, .op-toolbar .drp { width: 100%; margin-left: 0; }
  .op-out td.op-nil, .op-out td.op-act:empty { display: none; }
  .op-out td.op-act { grid-column: 1 / -1; text-align: left; white-space: normal; }
  .op-chips { flex-wrap: nowrap; overflow-x: auto; }
  .op-chips .btn { white-space: nowrap; flex: none; }
  .op-pieces td.num { display: none; }
  .op-table.op-pieces-ed { table-layout: auto; min-width: 0; }
  .op-pieces-ed thead { display: none; }
  .op-pieces-ed tbody tr.op-p-read { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .op-pieces-ed tbody tr.op-p-read td { padding: 0; border: 0; }
  .op-pieces-ed tbody tr.op-p-row:not(.is-open) { display: none; }
  .op-pieces-ed tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
  .op-pieces-ed tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  .op-pieces-ed td.num { display: block; }
  .op-pieces-ed .op-p-item { grid-column: 1 / -1; }
  .op-pieces-ed td input { border-color: var(--line); text-align: left; }
  .op-pieces-ed .op-p-sku { grid-column: 1 / -1; }
  .op-pieces-ed td[data-l]::before { content: attr(data-l); display: block; font-size: var(--fs-sm); color: var(--muted); }
  .op-pieces-ed .bk-c-x { align-self: end; }
  .page-head .btn--primary.op-wide { width: 100%; justify-content: center; }
  .op-recent li { padding-left: var(--s2); }
}

/* Admin › Users › a user (B77 P6, 2026-10-20): account, then one None · View · Edit
   control per tab with its rights folded under it; a summary rail holds Save. */
.adm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s4); align-items: start; }
.adm-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s4); }
.adm-card-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.adm-card-head h2 { margin: 0; font-size: var(--fs-md); flex: 1; }
.adm-sw { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-size: var(--fs-base); color: var(--ink);
  text-transform: none; letter-spacing: normal; font-weight: 400; }
.adm-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); padding: var(--s4); }
.adm-f { display: grid; gap: var(--s1); align-content: start; text-transform: none; letter-spacing: normal; }
.adm-f > span { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.adm-f input, .adm-f select { width: 100%; min-height: 2.5rem; }
.adm-full-note { margin: 0; padding: var(--s3) var(--s4); font-size: var(--fs-base); }
.perm-when-full, .is-full .perm-when-limited { display: none; }
.is-full .perm-when-full { display: block; }
.adm-tools { display: flex; gap: var(--s3); align-items: end; padding: var(--s3) var(--s4); flex-wrap: wrap; }
.adm-copy { flex: 0 1 16rem; } .adm-find { flex: 1 1 12rem; }
.adm-tools .seg-hair, .adm-level { position: relative; }
.adm-tools .seg-hair label, .adm-level label { display: contents; }
.adm-tools .seg-hair input, .adm-level input, .adm-chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg-hair input:focus-visible + .btn, .adm-chip input:focus-visible + .btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.adm-sec { border-top: 1px solid var(--line); }
.adm-sec-head { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s3) var(--s4) var(--s1); }
.adm-sec-head h2 { margin: 0; font-size: var(--fs-md); }
.adm-rows { padding: 0 var(--s4) var(--s3); }
.adm-gblock { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s3); border-top: 1px solid var(--line); }
.adm-group { font-size: var(--fs-base); color: var(--muted); font-weight: 600; padding-top: .85rem; }
.adm-tab + .adm-tab .adm-row { border-top: 1px solid var(--line); }
.adm-row { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem minmax(0, 11rem); gap: var(--s3); align-items: center;
  min-height: 2.75rem; padding: var(--s1) 0; }
.adm-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-name b { font-weight: 600; font-size: var(--fs-md); } .adm-name .muted { font-size: var(--fs-base); }
.adm-row.is-none .adm-name b { color: var(--ink-2); font-weight: 500; }
.adm-row.is-none .adm-level input:checked + .btn { border-color: var(--line); background: var(--bg); color: var(--ink-2); font-weight: 500; }
.adm-level .btn { min-width: 4.4rem; justify-content: center; min-height: 2rem; font-size: var(--fs-base); }
.adm-right { font-size: var(--fs-base); min-width: 0; }
.adm-one { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-more { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.adm-more::after { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-left: .4rem; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.adm-more[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.adm-sub { display: grid; grid-template-columns: minmax(0, 22rem); gap: var(--s2) var(--s4);
  padding: var(--s1) 0 var(--s3) var(--s3); margin: 0 0 0 var(--s1); border-left: 2px solid var(--line); }
.adm-sub .adm-sw { justify-content: space-between; }
.adm-divs { display: block; } .adm-divs-head { margin-bottom: var(--s2); max-width: 18rem; } .adm-divs-head .adm-sw { display: flex; }
.adm-chips { display: flex; flex-wrap: wrap; gap: var(--s1); position: relative; }
.adm-chip { display: contents; }
.adm-chip .btn { border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); }
.adm-chip input:checked + .btn { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); color: var(--ink); font-weight: 600; }
.adm-signin { padding: 0 var(--s4); }
.adm-line { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.adm-line:first-child { border-top: 0; }
.adm-line > div { display: flex; flex-direction: column; } .adm-line b { font-weight: 600; font-size: var(--fs-md); } .adm-line .muted { font-size: var(--fs-base); }
.adm-two { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: start; justify-content: flex-end; }
.adm-setpw > summary { list-style: none; } .adm-setpw > summary::-webkit-details-marker { display: none; }
.adm-setpw[open] > summary { display: none; }
.adm-setpw-form { display: flex; gap: var(--s2); align-items: center; }
.adm-setpw-form input { min-height: 2rem; width: 13rem; }
.adm-hint { font-size: var(--fs-base); }
.adm-rail { position: sticky; top: var(--s4); }
.adm-sum { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.adm-sum h2 { margin: 0 0 var(--s1); font-size: var(--fs-md); }
.adm-sum-n { margin: 0 0 var(--s3); } .adm-sum-n b { font-variant-numeric: tabular-nums; }
.adm-sum-list { font-size: var(--fs-base); line-height: 1.45; margin-bottom: var(--s2); }
.adm-sum-list .muted { display: block; font-size: var(--fs-sm); }
.adm-changed { font-size: var(--fs-base); margin: var(--s3) 0 var(--s2); }
.adm-save { display: flex; gap: var(--s2); justify-content: flex-end; }
@media (max-width: 1240px) {
  .adm-layout { grid-template-columns: 1fr; }
  .adm-rail { position: sticky; bottom: 0; top: auto; z-index: 5; }
  .adm-sum { border-radius: 0; margin: 0 calc(-1 * var(--s4)); padding: var(--s3) var(--s4); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
  .adm-sum h2, .adm-sum-list, .adm-changed { display: none; }
  .adm-sum-n { margin: 0; flex: 1; }
}
@media (max-width: 600px) {
  .adm-fields { grid-template-columns: 1fr; }
  .adm-gblock { grid-template-columns: 1fr; gap: 0; }
  .adm-group { padding: var(--s2) 0 0; }
  .adm-name { white-space: normal; }
  .adm-name .muted { display: none; }
  .adm-card-head, .adm-rows, .adm-tools, .adm-signin, .adm-sec-head, .adm-full-note { padding-left: var(--s3); padding-right: var(--s3); }
  .adm-copy, .adm-find { flex: 1 1 100%; }
  .adm-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; min-height: 2.9rem; }
  .adm-level { grid-column: 2; grid-row: 1; width: 9.9rem; } .adm-level .btn { min-width: 3.3rem; padding: 0 var(--s2); }
  .adm-right { grid-column: 1 / -1; grid-row: 2; } .adm-right:empty { display: none; }
  .adm-one { display: none; }
  .adm-sub { grid-template-columns: 1fr; }
  .adm-line { flex-direction: column; align-items: flex-start; }
  .adm-two { justify-content: flex-start; }
  .adm-setpw-form input { width: auto; flex: 1; }
  .adm-save { flex: 1 1 100%; } .adm-save .btn--primary { flex: 1; justify-content: center; }
}

/* Admin home (B77 P6, 2026-10-20): a short directory, one row per area. */
.adm-dir { display: block; }
.adm-dir > a { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline;
  padding: var(--s3) var(--s4); color: var(--ink); text-decoration: none; }
.adm-dir > a + a { border-top: 1px solid var(--line); }
.adm-dir > a:hover { background: var(--panel); }
.adm-dir b { font-weight: 600; }
.adm-dir span { color: var(--muted); font-size: var(--fs-base); }
.adm-dir em { font-style: normal; font-size: var(--fs-base); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .adm-dir > a { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding-inline: var(--s3); }
  .adm-dir span { grid-column: 1 / -1; grid-row: 2; }
}
.adm-map { padding: var(--s4); }
.adm-map h3 { margin: 0 0 var(--s3); font-size: var(--fs-md); }
@media (max-width: 600px) { .adm-map { padding: var(--s3); } .adm-map .grid.two { grid-template-columns: minmax(0, 1fr); } }

/* Growth › Spend input (B77 P7, Robin's OK on the mocks 20 Oct 2026): the days to fill as one
   hairline card with one Save; on a phone one block per day, the four channels 2 × 2. */
.gi-line { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s4); font-size: var(--fs-base); }
.gi-form { border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius); margin: 0 0 var(--s5); }
.gi-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.gi-head h2 { margin: 0; }
.gi-head .muted { font-size: var(--fs-base); }
.gi-wrap { border: 0; box-shadow: none; border-radius: 0; background: none; }
.gi-table { width: 100%; table-layout: fixed; }
.table-wrap .gi-table { min-width: 0; }
.gi-table th:first-child { width: 14rem; }
.gi-table th:last-child { width: 8rem; }
.gi-table td { vertical-align: middle; }
.gi-day b { display: block; }
.gi-day .muted { font-size: var(--fs-base); }
.gi-table input { width: 100%; max-width: 8rem; text-align: right; font-variant-numeric: tabular-nums; }
.gi-table input:user-invalid { border-color: var(--stop); outline: 2px solid var(--stop); outline-offset: -1px; }
.gi-total b { font-variant-numeric: tabular-nums; }
.gi-edit { display: flex; justify-content: flex-end; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s4); border-top: 1px solid var(--line); font-size: var(--fs-base); }
.gi-remove { display: inline-flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.gi-foot { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.gi-foot input { flex: 1; min-width: 0; }
.gi-h2 { margin: 0 0 var(--s2); }
.gi-note { margin: var(--s2) 0 0; font-size: var(--fs-base); }
.gi-week td, .gi-week th { white-space: nowrap; }
.gi-week tr.is-sel td { background: var(--neutral-bg); }
.gi-lab { font-size: var(--fs-base); color: var(--muted); font-weight: 400; }
@media (max-width: 600px) {
  .gi-head h2, .gi-h2 { font-size: var(--fs-md); font-weight: 600; }
  .gi-table, .gi-table tbody { display: block; }
  .gi-table thead { display: none; }
  .gi-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s3); padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--line); }
  .gi-table td { display: block; padding: 0; border: 0; text-align: left; }
  .gi-table td.gi-day { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; }
  .gi-table td.gi-total { grid-column: 1 / -1; display: flex; justify-content: space-between; }
  .gi-table input { max-width: none; min-width: 0; }
  .gi-foot { flex-direction: column; align-items: stretch; }
  .gi-foot .btn--primary { justify-content: center; }
}

/* Growth Control (B77 P7): one toolbar, four headline figures in one hairline card, one quiet
   line, one chart with its metric switch, then Channels and the days with the detail in the row. */
.gc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.gc-head h1 { margin: 0; }
.gc-tools { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.gc-vs { font-size: var(--fs-base); }
.gc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line);
  background: var(--bg); border-radius: var(--radius); margin: var(--s4) 0 var(--s3); }
.gc-kpi { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4); min-width: 0; }
.gc-kpi + .gc-kpi { border-left: 1px solid var(--line); }
.gc-lbl { font-size: var(--fs-base); color: var(--muted); }
.gc-val { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.gc-sub { font-size: var(--fs-base); }
.gc-chg { font-weight: 600; font-variant-numeric: tabular-nums; }
.gc-chg.up { color: var(--ok-ink); }
.gc-chg.down { color: var(--stop-ink); }
.gc-chg.flat { color: var(--muted); }
.gc-neg { color: var(--stop-ink); }
.gc-more { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: 0 0 var(--s2); font-size: var(--fs-base); color: var(--ink-2); }
.gc-miss { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s2); font-size: var(--fs-base); color: var(--muted); }
.gc-empty { display: flex; flex-direction: column; gap: var(--s1); border: 1px solid var(--line); background: var(--bg);
  border-radius: var(--radius); padding: var(--s5) var(--s4); margin: var(--s4) 0; }
.gc-chart { border: 1px solid var(--line); background: var(--bg); border-radius: var(--radius); margin: var(--s4) 0 var(--s5); }
.gc-chart-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4) 0; }
.gc-chart-head h2 { margin: 0; }
.gc-chart .growth-chart { padding: var(--s3) var(--s4) var(--s4); border: 0; box-shadow: none; background: none; }
.gc-chart .growth-bars { height: 11rem; gap: var(--s5); }
.gc-chart .growth-xaxis { gap: var(--s5); }
.gc-h2 { margin: 0 0 var(--s2); }
.gc-h2 ~ .table-wrap { margin-bottom: var(--s5); }
.gc-table td, .gc-table th { white-space: nowrap; }
.gc-total td { font-weight: 700; border-top: 1px solid var(--line); }
.gc-days tbody.gc-row > tr[data-row-toggle] { cursor: pointer; }
.gc-days tbody.gc-row + tbody.gc-row > tr:first-child td { border-top: 1px solid var(--line); }
.gc-open { display: inline-flex; align-items: center; gap: var(--s2); border: 0; background: none; padding: 0; min-height: 0; height: auto;
  font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gc-chev { width: 0; height: 0; border: 4px solid transparent; border-left-color: var(--muted); border-right-width: 0; transition: transform .15s; }
tr.is-open .gc-chev { transform: rotate(90deg); }
.gc-drawer > td { padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 16px); white-space: normal; }
.gc-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); gap: var(--s1) var(--s5); margin: 0; font-size: var(--fs-base); }
.gc-detail > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s2); }
.gc-detail .gc-wide { grid-column: 1 / -1; }
.gc-detail dt { color: var(--muted); }
.gc-detail dd { margin: 0; font-variant-numeric: tabular-nums; }
.gc-warn { margin: var(--s2) 0 0; font-size: var(--fs-base); color: var(--warn-ink); }
.gc-ev { margin: var(--s2) 0 0; font-size: var(--fs-base); }
@media (max-width: 900px) {
  .gc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-kpi:nth-child(3) { border-left: 0; }
  .gc-kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .gc-val { font-size: var(--fs-lg); }
  .gc-kpi { padding: var(--s3); }
  .gc-detail { grid-template-columns: 1fr; }
  .gc-drawer > td { padding-left: var(--s3); }
  .gc-chart .growth-bars, .gc-chart .growth-xaxis { gap: var(--s1); }
}

/* Growth › Website changes (B104 P2, Robin's OK on the mock sheet 26 Oct 2026): the overview chart
   with its figure switch and change markers, one row per change with its own 28 days inside,
   the Add / Edit window (a native popover: a sheet on the phone). */
.wc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.wc-head h1 { margin: 0; }
.wc-meta { margin: calc(-1 * var(--s2)) 0 var(--s4); color: var(--muted); font-size: var(--fs-sm); }
.wc-bar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.wc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.wc-table th { text-align: right; font-weight: 500; color: var(--muted); font-size: var(--fs-sm); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.wc-table th:nth-child(-n+2) { text-align: left; }
.wc-table td { padding: var(--s3); vertical-align: top; text-align: right; border-top: 1px solid var(--line); }
.wc-table tbody:first-of-type tr:first-child td { border-top: 0; }
.wc-table td.wc-date { text-align: left; white-space: nowrap; width: 6.5rem; }
.wc-table td.wc-what { text-align: left; width: 34%; }
.wc-what .gc-open { text-decoration: none; }
.wc-what .gc-open b { font-weight: 600; text-align: left; }
.wc-what .gc-open:hover b { text-decoration: underline; }
.wc-what .wc-sub { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s1); }
.wc-table tr[data-row-toggle] { cursor: pointer; }
.wc-fig { display: block; font-size: var(--fs-base); color: var(--ink-2); }
.wc-fig small { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s1); }
.wc-fig.is-target { color: var(--ink); font-weight: 700; }
.wc-fig.is-target small { font-weight: 400; }
.wc-fig.up { color: var(--ok-ink); }
.wc-fig.down { color: var(--stop-ink); }
.wc-fig.flat { color: var(--muted); font-weight: 600; }
.wc-wait { color: var(--muted); font-size: var(--fs-sm); text-align: left; }
.wc-table td.wc-wait { text-align: left; }
.wc-wait b { color: var(--ink-2); font-weight: 500; }
.wc-key { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s3); }
.wc-empty { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--s6) var(--s5); text-align: center; }
.wc-empty p { margin: 0 0 var(--s3); color: var(--muted); }

.wc-drawer > td { text-align: left; padding: var(--s3) var(--s4) var(--s4) calc(var(--s4) * 2); }
.wc-drawer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s5); align-items: start; }
.wc-chart { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); background: var(--bg); }
.wc-chart-head { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s2); }
.wc-chart-head b { color: var(--ink); font-weight: 600; }
.wc-chart svg { display: block; width: 100%; height: calc(var(--s7) * 2); }
.wc-chart .ln, .wc-over .ln { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wc-chart .avg { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.wc-chart .live { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wc-axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s1); }
.wc-drawer .gc-detail { grid-template-columns: 1fr; }
.wc-allfigs { display: none; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); font-size: var(--fs-base); margin: 0 0 var(--s2); }
.wc-allfigs dt { color: var(--muted); }
.wc-allfigs dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.wc-actions { margin-top: var(--s3); display: flex; gap: var(--s2); align-items: center; }
.wc-actions .wc-del { margin-left: auto; }
.wc-actions .danger { color: var(--stop-ink); }

/* Overview: 7-day average of the switched figure; a change = a dashed line + a dot below */
.wc-over { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.wc-over-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); font-size: var(--fs-sm); }
.wc-over svg { display: block; width: 100%; height: calc(var(--s7) * 3); }
.wc-over .mk { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.wc-over .gr { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wc-plot { position: relative; padding-left: var(--s7); }
.wc-yl { position: absolute; left: 0; top: var(--at); transform: translateY(-50%); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.wc-dots, .wc-axis--at { position: relative; margin-left: var(--s7); }
.wc-dots { height: var(--s4); margin-top: var(--s1); }
.wc-axis--at { display: block; height: var(--s4); }
.wc-axis--at span { position: absolute; left: var(--at); transform: translateX(-50%); white-space: nowrap; }
.wc-axis--at span:first-child { transform: none; }
.wc-axis--at span:last-child { transform: translateX(-100%); }
.wc-dot { position: absolute; top: 0; left: var(--at); }
.wc-dot > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: var(--s2); height: var(--s2); margin-left: calc(var(--s1) * -1); border-radius: 999px; background: var(--ink); color: var(--bg); cursor: pointer; }
.wc-dot > summary::-webkit-details-marker { display: none; }
.wc-dot.has-n > summary { width: var(--s4); height: var(--s4); margin: calc(var(--s1) * -1) 0 0 calc(var(--s2) * -1); font-size: var(--fs-xs); }
.wc-dot.has-n b { font-weight: 700; }
.wc-mk-pop { position: absolute; left: calc(var(--s2) * -1); top: calc(100% + var(--s1)); z-index: 5; display: flex; flex-direction: column; gap: var(--s1); min-width: 15rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--s3); font-size: var(--fs-sm); }
.wc-dot.is-end .wc-mk-pop { left: auto; right: calc(var(--s2) * -1); }
.wc-mk-pop a { color: var(--ink); }
.wc-switch { display: inline-flex; gap: var(--s1); padding: var(--s1); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
.wc-switch a { padding: var(--s1) var(--s3); border-radius: 999px; color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; white-space: nowrap; }
.wc-switch a.is-on { background: var(--bg); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-card); }
.wc-switch .mk-s { display: none; }

/* Add / Edit: a native popover under the button on desktop, a full-height sheet on the phone */
.wc-pop { inset: auto; top: calc(var(--s7) * 2 + var(--s6)); right: calc(var(--s5) + var(--s2)); margin: 0; width: 26rem; max-height: calc(100dvh - var(--s7) * 3); overflow: auto; text-align: left; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: var(--s4); }
.wc-pop::backdrop { background: transparent; }
.wc-pop h2 { font-size: var(--fs-md); margin: 0 0 var(--s3); }
.wc-pop label, .wc-pop .wc-lab { display: block; font-size: var(--fs-sm); color: var(--muted); margin: var(--s3) 0 var(--s1); }
.wc-pop .wc-two label, .wc-pop .wc-two .wc-lab { margin-top: 0; }
.wc-pop .wc-fixed { margin: 0; padding: var(--s2) 0; }
.wc-pop input:not([type=radio]) { width: 100%; }
.wc-pop .wc-count { float: right; }
.wc-pop .seg-hair { flex-wrap: wrap; }
.wc-pop .seg-hair label { display: contents; }
.wc-pop .seg-hair input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wc-pop .wc-two { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s3); }
.wc-pop .wc-foot { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s4); }
.wc-pop .wc-hint { font-size: var(--fs-sm); color: var(--muted); margin: var(--s1) 0 0; }
.wc-pop .wc-why-off { text-align: right; }
.wc-pop .wc-why-off:empty { display: none; }
.wc-pop .btn--primary:disabled { background: var(--bg); color: var(--muted); border-color: var(--line-strong); }

.wc-ph { display: none; }
@media (max-width: 600px) {
  .wc-bar .seg-hair { width: 100%; flex-wrap: wrap; }
  .wc-over .wc-switch { width: 100%; justify-content: space-between; }
  .wc-over .wc-switch { gap: 0; overflow-x: auto; scrollbar-width: none; }
  .wc-over { padding: var(--s3); }
  .wc-switch a { padding: var(--s1); flex: none; }
  .wc-switch .mk-l { display: none; }
  .wc-switch .mk-s { display: inline; }
  .wc-over-head .muted { width: 100%; }
  .wc-over svg { height: calc(var(--s7) * 2); }
  .wc-plot { padding-left: var(--s6); }
  .wc-dots, .wc-axis--at { margin-left: var(--s6); }
  .wc-table thead { display: none; }
  .wc-table, .wc-table tbody, .wc-table tr { display: block; }
  .wc-table tr[data-row-toggle] { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
  .wc-table tbody:first-of-type tr:first-child { border-top: 0; }
  .wc-table td { display: none; border: 0; padding: 0; }
  .wc-table td.wc-what { display: block; width: auto; grid-column: 1; }
  .wc-table td.wc-date { display: block; grid-column: 2; grid-row: 1; text-align: right; color: var(--muted); font-size: var(--fs-sm); width: auto; }
  .wc-table td.wc-ph { display: block; grid-column: 1 / -1; text-align: left; }
  .wc-ph .wc-fig { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); }
  .wc-ph .wc-fig small { margin: 0; }
  .wc-table tr[data-row-toggle] { padding-left: var(--s3); padding-right: var(--s3); }
  .wc-table tr.wc-drawer > td { display: block; padding: 0 var(--s3) var(--s3); }
  .wc-drawer-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .wc-drawer .wc-allfigs { display: grid; }
  .wc-pop { inset: var(--s4); width: auto; max-height: none; flex-direction: column; padding: 0; }
  .wc-pop:popover-open { display: flex; }
  .wc-pop::backdrop { background: color-mix(in srgb, var(--ink) 32%, transparent); }
  .wc-pop-head { padding: var(--s4) var(--s4) 0; }
  .wc-pop-body { flex: 1; overflow-y: auto; padding: 0 var(--s4); }
  .wc-pop .wc-two { grid-template-columns: 1fr; }
  .wc-pop .wc-foot { margin: 0; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
  .wc-pop .wc-foot .btn { flex: 1; }
  .wc-pop .wc-why-off { padding: 0 var(--s4) var(--s3); margin: 0; }
}

/* Sales control (B77 P7): the Growth headline card, months newest first, the top 20 with its toolbar. */
.sc-kpis { margin: 0 0 var(--s5); }
.sc-board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin: var(--s5) 0 var(--s2); }
.sc-board-head h2 { margin: 0; }
.sc-prod b { display: block; font-weight: 600; }
.sc-prod .muted { display: block; font-size: var(--fs-base); white-space: normal; }
/* The other Sales pages (B77 P7 tidy): one toolbar row, long notes kept narrow, the decision form, the band editor. */
.sc-bar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--s3); }
.sc-bar > .sc-end { margin-left: auto; }
.sc-note { max-width: 26rem; white-space: normal; overflow-wrap: anywhere; }
.sc-decide { display: flex; flex-direction: column; gap: var(--s1); min-width: 11rem; }
.sc-decide > div { display: flex; gap: var(--s1); }
.sc-decide input { font: inherit; font-size: var(--fs-md); padding: .25rem .4rem; }
.sc-bands input { width: 8rem; }
.sc-bands input[name$="_label"] { width: 14rem; }
.gc-note-line { margin: var(--s2) 0 0; font-size: var(--fs-base); }
@media (max-width: 600px) { .wide-only-inline { display: none; } }

/* Catalogue > Sets (B90 P3): one hairline card per Shopify bundle, its members as rows. */
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: var(--s4); align-items: start; }
.st-set { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--s4); }
.st-head { display: flex; align-items: baseline; gap: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
.st-head h2 { flex: 1; margin: 0; font-size: var(--fs-md); font-weight: 600; }
.st-price { font-variant-numeric: tabular-nums; }
.st-members { list-style: none; margin: 0; padding: 0; }
.st-members li { display: flex; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.st-members li:last-child { border-bottom: 0; padding-bottom: 0; }
.st-qty { flex: 0 0 2.5rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-name { display: flex; flex-direction: column; min-width: 0; }
.st-missing { color: var(--warn-ink); }
.st-note { margin: var(--s3) 0 0; }
@media (max-width: 600px) { .st-grid { grid-template-columns: 1fr; } }

/* B90 P1: the Pieces section (products/_pieces.html); the CIN7 part code under a piece name. */
.pr-piece-sku { display: block; margin-top: var(--s1); font-size: var(--fs-sm); white-space: nowrap; }
.pr-pieces-sum { font-size: var(--fs-base); color: var(--muted); }
.pr-piece-confirm { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); white-space: nowrap; }
.pr-pieces .pr-gap::placeholder { color: var(--muted); }
.pr-pieces .pr-worked { border-style: dashed; border-color: var(--warn-ink); }
.pr-pieces-sum .is-off { color: var(--warn-ink); }
table.pr-pieces th:first-child { width: 11rem; }
table.pr-pieces:not(.pr-items) th:nth-child(2) { width: 4.5rem; }
@media (max-width: 600px) {
  /* A piece card: name, then W/D/H in one row, then qty and weight. */
  table.pr-pieces tbody tr { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s2); }
  table.pr-pieces tbody td { grid-template-columns: minmax(0, 1fr); grid-column: span 2; border-bottom: 0; order: 1; }
  table.pr-pieces tbody td:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--line); order: 0; }
  table.pr-pieces tbody td:nth-child(2), table.pr-pieces tbody td:nth-child(6) { grid-column: span 3; order: 2; }
  /* An item card has no qty: W/D/H in one row, the weight under it. */
  table.pr-items tbody td:nth-child(2) { grid-column: span 2; order: 1; }
  table.pr-items tbody td:nth-child(5) { grid-column: span 3; order: 2; }
}

/* Catalogue › Download (21 Oct 2026): a small window over the page, the Lapor window's look.
   Desk only: the catalogue hides its quiet buttons on a phone (.pk-actions .btn--quiet). */
.ps-dialog { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); box-shadow: 0 24px 64px color-mix(in srgb, var(--ink) 22%, transparent); overflow: auto; overscroll-behavior: contain; }
.ps-dialog::backdrop { background: color-mix(in srgb, var(--ink) 28%, transparent); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
html:has(.ps-dialog[open]) { overflow: hidden; }
.ps-form { padding: var(--s5); }
.ps-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.ps-head h2 { margin: 0; font-size: var(--fs-md); }
.ps-close { width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: var(--fs-lg); line-height: 1; cursor: pointer; }
.ps-close:hover { border-color: var(--muted); }
.ps-group { border: 0; padding: 0; margin: 0 0 var(--s4); background: none; }
.ps-group legend { padding: 0; margin-bottom: var(--s2); font-size: var(--fs-base); font-weight: 600; color: var(--muted); }
.ps-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.ps-tiles--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-tile { position: relative; display: block; margin: 0; padding: var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); cursor: pointer; }
.ps-tile b { display: block; font-size: var(--fs-md); font-weight: 600; }
.ps-tile span { display: block; margin-top: 2px; font-size: var(--fs-sm); }
.ps-tile input { position: absolute; opacity: 0; pointer-events: none; }
.ps-tile:hover { border-color: var(--muted); }
.ps-tile:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.ps-tile:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ps-scope { margin: 0 0 var(--s4); font-size: var(--fs-base); }
.ps-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.ps-master { font-size: var(--fs-base); color: var(--muted); }
.ps-master:hover { color: var(--ink); }

/* Pricing › Price outliers (B123 P6): one row per flagged product, figures right, actions at the end. */
.ol-filters { margin: var(--s3) 0; }
.ol-filters > summary { display: none; }
.ol-strip { margin: 0 0 var(--s3); }
.ol-strip .ol-n { margin-left: var(--s1); color: var(--muted); font-variant-numeric: tabular-nums; }
.ol-table table { table-layout: fixed; width: 100%; }
.ol-table th:nth-child(1) { width: 20%; } .ol-table th:nth-child(2) { width: 13%; } .ol-table th:nth-child(3) { width: 21%; }
.ol-table th:nth-child(4) { width: 9%; } .ol-table th:nth-child(5) { width: 13%; }
.ol-table td { vertical-align: top; }
.ol-table .rowlink { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ol-name, .ol-sub { display: block; font-size: var(--fs-sm); }
.ol-flags { flex-direction: column; align-items: flex-start; margin: 0; }
.ol-act { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--s1) var(--s3); }
.ol-act:has(.ol-reason) { flex-wrap: wrap; }
.ol-act form { margin: 0; }
.ol-reason { display: block; width: 100%; font-size: var(--fs-base); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-who { font-size: var(--fs-sm); }
.ol-hint { margin: var(--s2) 0 0; font-size: var(--fs-sm); }
.ol-bands { margin-top: var(--s4); }
@media (max-width: 600px) {
  .ol-filters > summary { display: list-item; margin-bottom: var(--s2); cursor: pointer; font-size: var(--fs-base); font-weight: 600; }
  /* Phone (Robin 3 Nov, ask 7): SKU + name, then flags, then MAP per CBM vs its reference, then the actions. */
  .ol-table tbody td[data-label] { display: block; border-bottom: 0; padding: var(--s1) 0; }
  .ol-table tbody td[data-label="Family"], .ol-table tbody td[data-label="Price"] { display: none; }
  .ol-table tbody td:first-child .ol-name { display: inline; }
  .ol-table tbody td[data-label]::before { content: none; }
  .ol-table td[data-label="MAP per CBM"] { text-align: left; color: var(--muted); font-size: var(--fs-sm); }
  .ol-table td[data-label="MAP per CBM"]::before { content: "MAP per CBM " !important; font: inherit; letter-spacing: 0; text-transform: none; }
  .ol-table td[data-label="MAP per CBM"] .ol-sub { display: inline; }
  .ol-table td[data-label="MAP per CBM"] .ol-sub::before { content: " · "; }
  .ol-table td.ol-cell-act { display: block; border-bottom: 0; }
  .ol-act { justify-content: flex-start; flex-wrap: wrap; }
  .ol-reason { text-align: left; white-space: normal; }
}


/* Reports > Daily sales + Email schedule (B105 P2) */
.rp-meta { margin: var(--s1) 0 0; font-size: var(--fs-sm); }
.rp-step { align-self: flex-start; display: flex; gap: var(--s2); align-items: center; }
.rp-step .btn, .rp-step select { height: 2rem; min-height: 0; box-sizing: border-box; white-space: nowrap; }
.rp-step .btn { display: inline-flex; align-items: center; }
.rp-step select { width: auto; padding-block: 0; }
.rp-step [aria-disabled="true"] { color: var(--muted); pointer-events: none; }
.rp-delta[data-dir="up"] { color: var(--ok-ink); }
.rp-delta[data-dir="down"] { color: var(--stop-ink); }
.rp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.rp-split > .table-wrap { grid-column: 1 / -1; margin: 0; }
.rp-split td.num, .rp-split th.num { text-align: right; }
.rp-h { font-size: var(--fs-md); margin: 0 0 var(--s2); }
.rp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3);
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.rp-list .rp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-list .num { font-variant-numeric: tabular-nums; text-align: right; }
.rp-list .cell-sub { grid-column: 1 / -1; }
.rp-none { margin: 0; padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.rp-foot { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); margin-top: var(--s4); }
.rp-foot details.metric-help { display: inline-block; margin: 0; padding: 0; border: 0; }
.rp-state { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  padding: var(--s5) var(--s4); margin: 0 0 var(--s5); }
.rp-state h2 { font-size: var(--fs-md); margin: 0 0 var(--s1); }
.rp-gap { margin-bottom: var(--s5); }
.rp-sched td { vertical-align: top; }
.rp-sched .rp-act { text-align: right; padding-block: var(--s1); }
.rp-sched .rp-act { white-space: nowrap; }
.rp-sched .rp-act form { display: inline; margin: 0 0 0 var(--s1); }
.rp-sched .rp-to { max-width: 18rem; }
.rp-pop { inset: 0; margin: auto; height: fit-content; }
.rp-pop textarea { width: 100%; resize: vertical; font-variant-numeric: normal; }
.rp-pop .rp-hour { width: 9rem; }
.rp-pop .error { margin: var(--s2) 0 0; }
/* Pause comes last in the markup (Enter in a field must press Save, the first submit) but sits on the left. */
.rp-pop .wc-foot .rp-pause { order: -2; margin-right: auto; }
.rp-pop .wc-foot .btn--quiet { order: -1; }
.rp-people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rp-people li { border-bottom: 1px solid var(--line); }
.rp-pop .rp-people label { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: var(--s2) 0; color: var(--ink); font-size: var(--fs-base); cursor: pointer; }
.rp-people label .muted { margin-left: auto; font-size: var(--fs-sm); }
.rp-pop .rp-people input.op-tick { width: 1.125rem; }
/* Tag field (behaviors.js data-tags): looks like a text field; tags sit before the caret. */
.tag-field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); min-height: 2.5rem; padding: var(--s1) var(--s2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg); cursor: text; box-sizing: border-box; }
.tag-field:focus-within { border-color: var(--ink); }
.rp-pop .tag-field { margin-bottom: var(--s3); }
.tag-field input, .rp-pop .tag-field input:not([type=radio]) { flex: 1 1 8ch; width: auto; min-width: 8ch; border: 0; box-shadow: none; padding: var(--s1); background: transparent; }
.tag-field input:focus { outline: none; box-shadow: none; }
.tag-chip { display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s1) 0 var(--s2); min-height: 1.75rem; border-radius: 999px; background: var(--panel); color: var(--ink); font-size: var(--fs-sm); }
.tag-field:has(.tag-chip) input::placeholder { opacity: 0; }
/* The × keeps the tag 1.75rem tall (no tap min-height); its ::after gives the finger a bigger target. */
button.tag-x { position: relative; min-height: 0; min-width: 0; }
.tag-x::after { content: ""; position: absolute; inset: calc(var(--s2) * -1); }
.tag-x { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: var(--fs-base); line-height: 1; cursor: pointer; }
.tag-x:hover, .tag-x:focus-visible { background: var(--line); color: var(--ink); }
.rp-next { display: none; }
@media (max-width: 600px) {
  .rp-split { grid-template-columns: 1fr; }
  .rp-step { width: 100%; }
  .rp-step .btn, .rp-step select { height: var(--tap); }
  .rp-step select { flex: 1; min-width: 0; }
  .rp-step { flex-wrap: wrap; }
  .rp-step .rp-dl { flex-basis: 100%; justify-content: center; }  /* else the day picker shrinks to "Mon 2" */
  .rp-next { display: inline; }
  .rp-sched thead { display: none; }
  .rp-sched tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: var(--s2) 0; }
  .rp-sched td { border: 0; padding: 0 var(--s3); }
  .rp-sched td:nth-child(2), .rp-sched td:nth-child(3) { grid-column: 1; color: var(--muted); font-size: var(--fs-sm); }
  .rp-sched .rp-to { max-width: none; }
  .rp-sched td:nth-child(4), .rp-sched td:nth-child(5) { grid-row: 4; color: var(--muted); font-size: var(--fs-sm); }
  .rp-sched td:nth-child(4) { grid-column: 1; }
  .rp-sched td:nth-child(5) { grid-column: 2; text-align: right; }
  .rp-sched .rp-act { grid-column: 2; grid-row: 1 / 4; align-self: center; padding-block: 0; }
  .rp-pop { inset: auto var(--s4) var(--s4); height: fit-content; max-height: calc(100dvh - var(--s5) * 2); }
  .rp-pop .wc-foot .rp-pause { flex: none; }
}

/* B123 P2 Sibling rates card (Pricing › Calculator, under Cartons) */
.sr-card .pr-card-head { flex-wrap: wrap; gap: var(--s2) var(--s3); }
.sr-table td, .sr-table th { white-space: nowrap; }
.sr-bandcell { width: 8rem; }
.sr-rng { display: block; font-size: var(--fs-sm); }
.sr-band { position: relative; display: block; height: var(--s3); }
.sr-band::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.sr-range { position: absolute; left: var(--lo); width: var(--w); top: 20%; height: 60%; min-width: var(--s1); background: var(--muted); opacity: .35; border-radius: var(--radius-sm); }
.sr-med { position: absolute; left: 50%; top: 0; height: 100%; border-left: 2px solid var(--muted); }
.sr-own { position: absolute; left: var(--own); top: 50%; width: var(--s2); height: var(--s2); margin: calc(var(--s2) / -2) 0 0 calc(var(--s2) / -2); border-radius: 999px; background: var(--ink); }
.sr-key { position: relative; font-weight: normal; color: var(--muted); }
.sr-key i { position: relative; left: auto; display: inline-block; margin: 0 var(--s1) 0 var(--s2); vertical-align: middle; }
.sr-key .sr-own { width: var(--s2); height: var(--s2); top: 0; }
.sr-key .sr-med { height: var(--s3); }
.sr-sub { font-size: var(--fs-md); margin: var(--s4) 0 var(--s2); white-space: nowrap; }
.sr-twins { list-style: none; margin: 0; padding: 0; }
.sr-twins li { display: grid; grid-template-columns: 7rem minmax(12rem, 1fr) auto 9rem; gap: var(--s4); padding: var(--s2) 0; border-top: 1px solid var(--line); align-items: baseline; }
.sr-twins li > .num { text-align: right; }
.sr-twins li > :nth-child(4) { font-size: var(--fs-sm); }
.sr-none { margin: var(--s3) 0 0; }
.sr-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--s3); }
.sr-fold > summary::-webkit-details-marker { display: none; }
.sr-fold > summary::after { content: "Show"; margin-left: auto; text-decoration: underline; color: var(--muted); }
.sr-fold[open] > summary::after { content: "Hide"; }
.sr-table td.sr-gap .chip { margin-right: 0; }
@media (max-width: 600px) {
  .sr-table thead, .sr-bandcell { display: none; }
  .sr-table tr { display: grid; grid-template-columns: 1fr auto auto; column-gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  .sr-table td { border: 0; padding: 0; }
  .sr-table td[data-label="Chain"], .sr-table td.sr-sib { grid-row: 2; text-align: left; font-size: var(--fs-sm); color: var(--muted); }
  .sr-table td[data-label="Chain"] { grid-column: 1; }
  .sr-table td.sr-sib { grid-column: 2 / -1; text-align: right; }
  .sr-table td[data-label="Chain"]::before { content: "chain "; }
  .sr-table td.sr-sib::before { content: "median "; }
  .sr-rng::before { content: "\00a0· "; }
  .sr-rng { display: inline; }
  .sr-twins li { grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); }
  .sr-fold > summary { flex-wrap: wrap; }
  .sr-fold > summary > .muted { order: 3; flex-basis: 100%; }
  .sr-twins li > :nth-child(3) { grid-column: 1; text-align: left; }
  .sr-twins li > :nth-child(4) { grid-column: 2; grid-row: 1; }
  .sr-twins li > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}

/* Sign-in and code pages (B131 P11): one centred column, passkey under an "or" divider. */
.sg-wrap { max-width: 23rem; margin: 4rem auto 0; }
.sg-wrap h1 { letter-spacing: -.02em; margin-bottom: var(--s1); }
.sg-meta { margin: 0; color: var(--muted); font-size: var(--fs-base); }
.sg-form { margin-top: var(--s5); }
.sg-form .field { margin-bottom: var(--s4); }
.sg-form .field.sg-last { margin-bottom: var(--s5); }
.sg-label { display: flex; justify-content: space-between; gap: var(--s3); }
.sg-label a { font-weight: 400; }
.sg-wide { width: 100%; justify-content: center; }
.sg-first { margin-top: var(--s5); }
.sg-or { display: flex; align-items: center; gap: var(--s3); margin: var(--s4) 0; color: var(--muted); font-size: var(--fs-sm); }
.sg-or::before, .sg-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.sg-or--tight { margin-bottom: 0; }
.sg-code { font-size: var(--fs-lg); letter-spacing: .3em; font-variant-numeric: tabular-nums; text-align: center; }
.sg-hint { margin: var(--s1) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.sg-hint.sg-bad { color: var(--stop-ink); }
.sg-wrap input[aria-invalid="true"] { border-color: var(--stop-ink); }
.sg-center { text-align: center; }
.sg-other { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sg-other h2 { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); margin: 0 0 var(--s2); }
.sg-other ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--fs-base); }
.sg-other .sg-hint { margin-top: var(--s3); }
.sg-foot { margin-top: var(--s5); text-align: center; font-size: var(--fs-base); color: var(--muted); }
.sg-foot a, .sg-other a, .sg-foot .btn--link { color: var(--ink); }
.sg-foot .btn--link { padding: 0; min-height: 0; font-size: inherit; font-weight: inherit; text-decoration: underline; vertical-align: baseline; }
.sg-legal { margin-top: var(--s6); font-size: var(--fs-sm); text-align: center; }
@media (max-width: 600px) { .sg-wrap { margin-top: var(--s6); } }

/* Sign-in and security page (B131 P11): the passkey rows. */
.psk-back { display: inline-block; margin-bottom: var(--s2); font-size: var(--fs-base); }
.psk-head { display: flex; gap: var(--s4); align-items: center; }
.psk-head > div:first-child { flex: 1; }
.psk-list { list-style: none; margin: 0; padding: 0; }
.psk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2) var(--s4); align-items: center; padding: var(--s3) 1.1rem; border-top: 1px solid var(--line); }
.psk-row:first-child { border-top: 0; }
.psk-name { font-weight: 600; line-height: 22px; }
.psk-sub { color: var(--muted); font-size: var(--fs-sm); line-height: 18px; }
.psk-acts { display: flex; gap: var(--s4); align-items: center; min-height: 2.4rem; font-size: var(--fs-base); }
.psk-acts a { color: var(--ink); }
.psk-acts a.danger { color: var(--stop-ink); font-weight: 600; }
.psk-edit { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.psk-edit .field { flex: 1; min-width: 12rem; margin: 0; }
.psk-full { grid-column: 1 / -1; }
.psk-gap { margin-top: var(--s5); }
.psk-confirm { grid-column: 1 / -1; display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; font-size: var(--fs-base); }
.psk-confirm a { color: var(--ink); }
.psk-empty { padding: var(--s5) 1.1rem; color: var(--muted); font-size: var(--fs-base); }
@media (max-width: 600px) {
  .psk-row { grid-template-columns: minmax(0, 1fr); }
  .psk-head { flex-direction: column; align-items: stretch; }
  .psk-head .btn { width: 100%; justify-content: center; }
}
/* B123 P3 Price this product: the right column under Prices (24rem), stacked on the phone. */
.pp-first { margin-top: 0; }
.pp-card .pr-card-head { flex-wrap: wrap; gap: var(--s1) var(--s3); }
.pp-card .pr-card-head h2 { flex: 1 0 100%; }
.pp-pct { display: block; }
.pp-opts { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.pp-opt { position: relative; display: block; margin: 0; }
.pp-opt input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pp-opt-t { color: var(--ink); font-weight: 600; font-size: var(--fs-base); }
.pp-opt .btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; height: auto; padding: var(--s2) var(--s3); text-align: left; white-space: normal; border: 1px solid var(--line); background: var(--bg); font-weight: normal; text-transform: none; letter-spacing: 0; }
.pp-opt .btn .muted { font-size: var(--fs-sm); }
.pp-opt input:checked + .btn { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pp-opt input:focus-visible + .btn { outline: 2px solid var(--ink); outline-offset: 2px; }
.pp-opt.is-off .btn { opacity: .55; cursor: not-allowed; }
.pp-twinline { display: flex; align-items: center; gap: var(--s1); }
.pp-step { width: 4rem; }
.pp-table { table-layout: fixed; width: 100%; }
.pp-table td, .pp-table th { white-space: nowrap; }
.pp-table th:nth-child(1) { width: 32%; } .pp-table th:nth-child(2) { width: 20%; } .pp-table th:nth-child(3) { width: 24%; }
.pp-table td:first-child { white-space: normal; }
.pp-new .pk-in { width: 100%; max-width: 6rem; text-align: right; }
.pp-ch { font-size: var(--fs-sm); }
.pp-ch .chip { margin: 0; }
.pp-fold { margin-top: var(--s3); }
.pp-fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s3); }
.pp-fold > summary::-webkit-details-marker { display: none; }
.pp-fold > summary > .muted { font-size: var(--fs-sm); order: 3; flex-basis: 100%; }
.pp-fold > summary::after { content: "Show"; margin-left: auto; text-decoration: underline; color: var(--muted); }
.pp-fold[open] > summary::after { content: "Hide"; }
.pp-rules { list-style: none; margin: 0; padding: 0; }
.pp-rules li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); align-items: center; }
.pp-rules li > .muted { grid-row: 2; font-size: var(--fs-sm); }
.pp-rules li > .switch { grid-column: 2; grid-row: 1 / 3; }
.pp-rules li.is-na { color: var(--muted); }
.pp-actions { margin-top: var(--s4); }
.pp-actions .btn--primary:disabled { background: var(--bg); color: var(--muted); border-color: var(--line-strong); opacity: 1; }
.pp-done { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.pp-shop { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); margin: var(--s3) 0 var(--s5); font-size: var(--fs-sm); }
.pp-shop .chip { margin-right: 0; }
.pp-shop .nowrap { white-space: nowrap; }
@media (max-width: 600px) {
  .pp-table { table-layout: auto; }
  .pp-pct { display: inline; margin-left: var(--s1); }
  .pp-table thead { display: none; }
  .pp-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  .pp-table td { border: 0; padding: 0; text-align: left; }
  .pp-table td.pp-new { grid-column: 2; grid-row: 1 / 4; align-self: center; }
  .pp-table td[data-label="Now"], .pp-table td.pp-ch { grid-column: 1; font-size: var(--fs-sm); color: var(--muted); }
  .pp-table td[data-label="Now"]::before { content: "now "; }
  .pp-table td[data-label="Now"]:has(.pp-none) { display: none; }
  .pp-table td[data-label="DEAR"] { grid-column: 1; font-size: var(--fs-sm); color: var(--muted); }
  .pp-table td[data-label="DEAR"]::before { content: "DEAR "; }
  .pp-actions { flex-direction: column; align-items: stretch; gap: var(--s2); }
}

/* B143 W2: listing per piece, under the Pieces size table (products/_piece_listing.html). */
.pl { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pl-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.pl-head h3 { margin: 0; font-size: var(--fs-md); }
.pl-hint { font-size: var(--fs-sm); }
.pl-tabs { margin-bottom: var(--s3); }
.pl-count { margin-left: var(--s2); color: var(--muted); font-weight: 400; }
.pl-body { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--s4); }
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.pl-field { margin-bottom: var(--s3); }
.pl-field select, .pl-field input, .pl-field textarea { width: 100%; }
.pl-field > .pl-hint { display: block; margin-top: var(--s1); }
.pl-borrowed { color: var(--muted); }
.pl-src { display: flex; align-items: center; gap: var(--s3); margin: var(--s1) 0 0; font-size: var(--fs-sm); }
.pl-src .chip { margin: 0; }
.pl-barcode { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: var(--tap-sm); margin: 0; }
.pl-code { font-variant-numeric: tabular-nums; }
.pl-bullets { margin: 0; padding-left: var(--s4); display: grid; gap: var(--s1); }
.pl-bullets li::marker { color: var(--muted); font-size: var(--fs-sm); }
.pl-photos { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.pl-photos-head { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.pl-photos-head h4 { margin: 0; font-size: var(--fs-base); font-weight: 600; }
.pl-empty { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) 0; }
.pl-empty .chip { margin: 0; }
.pl-add { margin-top: var(--s2); }
.pl-add > summary { display: inline-flex; align-items: center; min-height: var(--tap-sm); cursor: pointer; }
.pl-add .pp-link { padding: var(--s2) 0 0; max-width: 34rem; }
.pl-add .pp-link input { flex: 1; min-width: 0; }
.pl-add .pp-err { margin: var(--s1) 0 0; }
@media (max-width: 600px) {
  .pl-body { padding: var(--s3); }
  .pl-grid { grid-template-columns: 1fr; gap: 0; }
  .pl-src { flex-wrap: wrap; gap: var(--s2); }
  .pl-empty .btn { width: 100%; justify-content: center; }
  /* Beside the star, as light as it: no hover on a phone, and removing is not the lead. */
  .pl-strip .pp-x { opacity: 1; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-card); }
}
.pl-count .pr-req { margin-left: var(--s1); }
.pl-photos.htmx-request .pp-busy { display: inline; }
.pl-photos.htmx-request .pp-idle { display: none; }

/* Siap produksi (B121 P5a): the Catalogue list as the factory sees it — a photo on the
   row, Parts, FOB/CBM/gross kg; on a phone CBM and kg ride under the name. */
.pk-factory .pk-prod{display:flex;gap:12px;align-items:center}
.pk-factory .pk-thumb{width:44px;height:44px;border-radius:var(--radius);object-fit:cover;background:var(--line);flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.pk-factory .pk-thumb svg{width:20px;height:20px}
.pk-factory .pk-prod .pk-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28ch}
.pk-factory .num .pk-sub{white-space:nowrap}
.pk-factory .pk-c-parts{width:11%}
.pk-factory td.pk-parts .pk-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-factory td .pk-main{white-space:nowrap}
.ps-sub{margin:.25rem 0 0;font-size:var(--fs-sm)}
.pk-factory .pk-phone-line{display:none}
@media (max-width: 600px){
  .pk-factory td.num{display:none}
  .pk-factory td.num.pk-first{display:block}
  .pk-factory .pk-phone-line{display:block}
  .pk-factory td.pk-data .pk-sub{display:block}
}

/* --- B123 P7 New price increase (mock p7/sheet): form + preview, Approve sticky on the right;
   on a phone the Approve card follows the form and the preview shows 3 cards. --- */
.pi-layout { display: grid; gap: 0 var(--s4); grid-template-areas: "inc" "app" "prev"; }
.pi-inc { grid-area: inc; } .pi-approve { grid-area: app; } .pi-prev { grid-area: prev; }
.pi-rows { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: baseline; }
.pi-k { font-size: var(--fs-sm); color: var(--muted); }
.pi-v { margin: 0; }
.pi-picked { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); margin-top: var(--s2); }
.pi-add > summary { list-style: none; cursor: pointer; padding: 0; min-height: 0; }
.pi-add > summary::-webkit-details-marker { display: none; }
.pi-options { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.pi-opt { display: inline-flex; align-items: center; gap: var(--s2); }
.pi-pct input { width: 6rem; text-align: right; }
.pi-date { width: 10rem; }
.pi-dl { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s2) var(--s3); margin: 0 0 var(--s3); }
.pi-dl dt { font-size: var(--fs-sm); color: var(--muted); }
.pi-dl dd { margin: 0; }
.pi-note { border-top: 1px solid var(--line); padding-top: var(--s3); margin: 0; }
.pi-actions { display: flex; }
.pi-why { margin: var(--s2) 0 0; text-align: right; }
.pi-prev .pr-card-head { flex-wrap: wrap; justify-content: flex-start; }
.pi-table tbody tr:nth-child(n+15) { display: none; }
.pi-table.pi-all tbody tr { display: table-row; }
.pi-n-phone { display: none; }
.pi-more { margin: var(--s3) 0 0; }
.pi-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); }
.pi-run .pr-card-head { align-items: center; }
.pi-run-name { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.pi-run-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; }
.pi-run-line .btn--link { padding: 0; min-height: 0; }
.pi-see > summary { list-style: none; cursor: pointer; padding: 0; min-height: 0; }
.pi-see > summary::-webkit-details-marker { display: none; }
.pi-see[open] { flex-basis: 100%; order: 9; }
.pi-table td.num, .pi-table td:nth-child(2) { white-space: nowrap; }
.pi-rows .field-hint { display: block; margin-top: var(--s1); }
.pr-lock { margin: 0 0 var(--s3); }
.pr-lock a { color: var(--ink); }
@media (min-width: 1240px) {
  .pi-layout { grid-template-columns: minmax(0, 1fr) 24rem; grid-template-areas: "inc app" "prev app"; align-items: start; }
  .pi-approve { position: sticky; top: var(--s4); }
}
@media (max-width: 600px) {
  .pi-rows { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .pi-rows .pi-k:not(:first-child) { margin-top: var(--s2); }
  .pi-actions .btn { width: 100%; }
  .pi-why { text-align: left; }
  .pi-table tbody tr:nth-child(n+4) { display: none; }
  .pi-table.pi-all tbody tr { display: block; }
  .pi-n-desk { display: none; } .pi-n-phone { display: inline; }
  .pi-head { align-items: baseline; }
}
/* B123 P5: Australia block in Price this product (method = the system .seg group) */
.pp-au { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pp-au-head { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: var(--s2); }
.pp-au-head .sr-sub { margin: 0; }
.pp-au-head .muted, .pp-au-basis, .pp-au-note, .pp-au-off { font-size: var(--fs-sm); }
.pp-au-method { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.pp-seg > label.btn { margin: 0; font-weight: 600; color: var(--ink); }
.pp-seg input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pp-seg > label.btn:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.pp-au-num { display: inline-flex; align-items: center; gap: var(--s1); }
.pp-au-num .pk-in { width: 4.5rem; text-align: right; }
.pp-au-basis { margin: 0 0 var(--s2); }
.pp-au-note { margin: var(--s2) 0 0; }
.pp-au-enter { margin: var(--s3) 0 0; }
.pp-au-off { margin: var(--s5) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s1) var(--s3); }
.pp-au-add { display: inline-flex; align-items: center; gap: var(--s1); margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.pp-new .chip { margin: var(--s1) 0 0; }
.pp-au .pp-table th:nth-child(1) { width: 30%; } .pp-au .pp-table th:nth-child(2) { width: 22%; } .pp-au .pp-table th:nth-child(3) { width: 18%; }
.pp-au .pp-table td:first-child { white-space: nowrap; }

/* Reminders on Home (B156 R1, mock OK Robin 4 Nov 2026): app/templates/home/_reminders.html */
.rem { margin-bottom: var(--s5); }
.rem-head { display: flex; align-items: center; justify-content: flex-start; gap: var(--s3); min-height: var(--tap-sm); margin-top: 0; }
.rem-head .muted { font-size: var(--fs-base); }
.rem-head .btn { margin-left: auto; }
.rem-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.rem-row { display: grid; grid-template-columns: 1.125rem minmax(0,1fr) 8rem; gap: var(--s3);
  align-items: start; padding: var(--s2) var(--s4); border-top: 1px solid var(--line); }
.rem-row:first-child { border-top: 0; }
.rem-row .op-tick { margin-top: var(--s1); }
.rem-text { display: grid; gap: var(--s1); min-width: 0; }
.rem-open { color: var(--ink); font-weight: 600; text-decoration: none; }
.rem-open:hover { text-decoration: underline; }
.rem-text > span:not(.rem-open), .rem-due { color: var(--muted); font-size: var(--fs-sm); }
.rem-text > span a { color: var(--ink); }
.rem-due { text-align: right; padding-top: var(--s1); }
.rem-due-inline { display: none; }
/* Desktop: one line per reminder, the source after the text (Robin 5 Nov: "thinner"). */
@media (min-width: 901px) {
  .rem-row { align-items: center; }
  .rem-row .op-tick { margin-top: 0; }
  .rem-row .rem-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
  .rem-row .rem-text > span:not(.rem-open) { flex: none; }
  .rem-row .rem-due { padding-top: 0; }
}
.rem-row:has(.op-tick:checked) .rem-open { text-decoration: line-through; color: var(--muted); font-weight: 400; }
.rem-empty { margin: 0; padding: var(--s4); color: var(--muted); }
.rem-add { display: grid; grid-template-columns: minmax(0,1fr) auto 10rem auto; gap: var(--s2);
  align-items: start; padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--bg); }
.rem-add:first-child { border-top: 0; }
.rem-add + .rem-row { border-top: 1px solid var(--line); }
.rem-date-wrap { display: grid; gap: var(--s1); }
.rem-date.is-invalid { border-color: var(--stop-ink); }
.rem-error { color: var(--stop-ink); font-size: var(--fs-sm); }
.rem-add-actions { display: flex; gap: var(--s3); align-items: center; }
.rem-add:has(.rem-delete) { grid-template-columns: auto minmax(0,1fr) auto 10rem auto auto; align-items: center; }
.rem-add:has(.rem-delete) .rem-add-actions { display: contents; }
.rem-delete { grid-column: 1; grid-row: 1; align-self: center; }
.rem-due .chip { padding-right: 0; margin-right: 0; }
.rem-row { transition: opacity .2s ease; }
.rem-row.is-leaving { opacity: 0; }
.rem-head .rem-all { margin-left: auto; color: var(--ink); font-size: var(--fs-base); }
.rem-head .rem-all + .btn { margin-left: 0; }
.rem-undo { display: flex; gap: var(--s2); align-items: baseline; margin: var(--s2) 0 0; color: var(--muted); font-size: var(--fs-sm); }
.rem-undo .btn--link { color: var(--ink); text-decoration: underline; }
.rem-done { margin-top: var(--s4); }
.rem-done summary { cursor: pointer; color: var(--muted); font-size: var(--fs-base); margin-bottom: var(--s2); }
.note-list { list-style: none; margin: 0; padding: 0; }
.note { display: grid; grid-template-columns: 1.125rem minmax(0,1fr) 8rem; gap: var(--s3); align-items: start;
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
.note:first-child { border-top: 0; }
.note .chip--dot { margin: var(--s1) 0 0; }
.note:not(.is-unread) .rem-open { font-weight: 400; }
.note .rem-due { display: grid; justify-items: end; gap: var(--s1); }
.note .rem-due form { margin: 0; }
.note .btn--link { color: var(--ink); font-size: var(--fs-sm); text-decoration: underline; }
.rem-head .note-all { margin: 0 0 0 auto; }
@media (max-width: 900px) {
  .note { grid-template-columns: 1.125rem minmax(0,1fr) auto; }
  .rem-row { grid-template-columns: 1.125rem minmax(0,1fr); }
  .rem-due { display: none; }
  .rem-due-inline { display: inline; }
  .rem-add { grid-template-columns: 1fr 1fr; }
  .rem-add input[type=text] { grid-column: 1 / -1; }
  .rem-add-actions { grid-column: 1 / -1; }
  .rem-add-actions .btn--primary { flex: 1; order: -1; }
  .rem-add:has(.rem-delete) { grid-template-columns: 1fr 1fr; }
  .rem-add:has(.rem-delete) .rem-add-actions { display: flex; }
  .rem-delete { grid-column: auto; grid-row: auto; order: 2; }
}
.rem-date .drp-label { white-space: nowrap; }
.rem-add .drp { display: block; }
.rem-add input[type=text] { min-width: 0; }
/* On a phone the picker stacks: presets as one row above the month, inside the screen. */
@media (max-width: 600px) {
  .rem-add .drp-pop { flex-direction: column; left: 0; right: auto; }
  .rem-add .drp-presets { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); min-width: 0; padding: 0; }
  .rem-add .drp-main { min-width: 0; }
}

/* B159 P3 fingerprint import (people/attendance_import.html). On a phone each person is one
   compact block: name + PIN, one muted line of counts, the select full width. */
.att-mact { display: flex; gap: var(--s2); flex-wrap: wrap; }
.fp-table td.num, .fp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fp-one.is-warn { color: var(--warn-ink); }
.fp-one, .fp-phone { font-weight: 400; }
.fp-one { display: block; }
.fp-sum { margin-bottom: var(--s3); }
.fp-pick { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.fp-back { margin-top: var(--s3); }
.fp-back .btn--link { padding-left: 0; }
.fp-phone { display: none; }
/* A row still on Skip is the one thing left to do: warn ink until a person is chosen. */
.fp-table select:has(option[value=""]:checked) { color: var(--warn-ink); border-color: var(--warn-ink); }
@media (max-width: 600px) {
  .fp-table td.num { display: none; }
  .fp-phone { display: block; }
  /* By position, not label: the Produksi copy (production/hr_attendance_import.html) has Bahasa labels. */
  .fp-table tbody td:nth-child(2) { display: block; }
  .fp-table tbody td:nth-child(-n+2)::before { display: none; }
  .fp-table td select { width: 100%; }
  .fp-table tbody td:first-child { border-bottom-color: var(--line); }  /* over os.css .t-cards' ink rule */
}
.fp-range { white-space: nowrap; }

/* Reports > Automations (B44 A3): emails and alerts with their last run. Phone: one block per job. */
.au-sum { margin-top: var(--s1); }
.au-sum-stop { color: var(--stop-ink); font-weight: 600; }
.au-notice { margin-top: var(--s3); }
.au-tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.au-find { margin: 0 0 0 auto; width: 16rem; max-width: 100%; }
.au-jump { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); font-size: var(--fs-sm); }
.au-jump a { color: var(--ink); text-decoration: none; }
.au-jump a:hover { text-decoration: underline; }
.au-sec { margin-top: var(--s4); scroll-margin-top: var(--s4); }
.au-sec h2 { font-size: var(--fs-md); margin: 0 0 var(--s2); }
.au-sec h2 .muted { font-weight: 400; margin-left: var(--s1); }
.au-table { table-layout: fixed; width: 100%; }
.au-c1 { width: 40%; } .au-c2 { width: 19%; } .au-c3 { width: 21%; } .au-c4 { width: 20%; }
.au-table td { vertical-align: top; }
.au-table .cell-sub { display: block; }
.au-table code { font-size: var(--fs-sm); color: var(--muted); background: none; padding: 0; }
.au-why { color: var(--stop-ink); }
.au-edit { color: var(--muted); font-size: var(--fs-sm); }
.au-ago { font-weight: 600; }
.au-none { margin-top: var(--s4); }
@media (max-width: 600px) {
  .au-find { margin-left: 0; width: 100%; }
  .au-tools .btn { min-height: 44px; }
  .au-jump a, .au-edit { display: inline-block; padding-block: var(--s3); margin-block: calc(-1 * var(--s3)); }
  .au-table thead, .au-table colgroup { display: none; }
  .au-table, .au-table tbody, .au-table tr, .au-table td { display: block; width: auto; }
  .au-table tr { display: flex !important; flex-wrap: wrap; align-items: baseline; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
  .au-job, .au-who { flex: 0 0 100%; }
  .au-who { order: 3; font-size: var(--fs-sm); color: var(--muted); }
  .au-who::before { content: attr(data-pre); }
  .au-table td { border: 0; padding: 0; }
  .au-when, .au-last, .au-last > * { font-size: var(--fs-sm); color: var(--muted); }
  .au-last .chip { color: var(--ink); }
  .au-when::after { content: "·"; margin: 0 var(--s2); }
  .au-last .cell-sub:not(.au-why) { display: none; }
  .au-table td.au-last { display: contents !important; }
  .au-last .au-why { flex: 0 0 100%; order: 2; color: var(--stop-ink); }
}

/* Growth · Prospects (B181 C4) ------------------------------------------------------------ */
.crm-head { align-items: baseline; margin-bottom: var(--s4); }
.crm-head h1 { margin: 0; }
.crm-meta { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--s4); }
.crm-head .crm-meta { margin: 0; }
.crm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--s5); }
.crm-tools { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s4); flex-wrap: wrap; }
.crm-search { flex: 0 1 22rem; }
.crm-search input { width: 100%; }
.crm-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.crm-table .c-co { width: 30%; } .crm-table .c-next { width: 30%; } .crm-table .c-src { width: 12%; }
.crm-table .c-own { width: 11%; } .crm-table .c-days { width: 8%; } .crm-table .c-act { width: 9%; }
.crm-table th, .crm-table td { padding: var(--s3) var(--s4); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.crm-table th { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); border-top: 0; }
.crm-table th.num, .crm-table td.num { text-align: right; }
.crm-table td small { display: block; color: var(--muted); font-size: var(--fs-sm); margin-top: var(--s1); }
.crm-co a { color: var(--ink); font-weight: 600; text-decoration: none; }
.crm-co a:hover { text-decoration: underline; }
.crm-src, .crm-own { color: var(--ink-2); font-size: var(--fs-base); }
.crm-act { text-align: right !important; }
.crm-act form { display: inline; }
.crm-group td { background: color-mix(in srgb, var(--ink) 3%, var(--bg)); font-size: var(--fs-sm); font-weight: 600; padding: var(--s2) var(--s4); }
.crm-group a, .crm-group .btn--link { font-weight: 500; }
.crm-foot { margin: var(--s3) 0 0; font-size: var(--fs-sm); }
.crm-undo { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }
.crm-empty { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--s6) var(--s4); text-align: center; }
.crm-empty p { margin: 0 0 var(--s2); }
.crm-empty .btn { margin-top: var(--s3); }
.crm-names { font-size: var(--fs-sm); margin: var(--s3) 0; }

.crm-stagerow { display: flex; gap: var(--s4); align-items: center; margin: 0 0 var(--s5); }
.crm-stages { list-style: none; display: flex; gap: var(--s1); padding: 0; margin: 0; flex: 1; min-width: 0; }
.crm-decide { display: flex; gap: var(--s3); align-items: center; flex: none; }
.crm-decide form { display: contents; }
.crm-stages li { flex: 1; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--muted); background: var(--bg); }
.crm-stages li.is-done { color: var(--ink-2); border-color: var(--line-strong); background: color-mix(in srgb, var(--ink) 7%, var(--bg)); }
.crm-stages li.is-on { color: var(--ink); border-color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.crm-stages small { font-weight: 500; color: var(--muted); }
.crm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s5); align-items: start; }
.crm-side { position: sticky; top: var(--s4); display: grid; gap: var(--s4); }
.crm-main { display: grid; gap: var(--s4); }
.crm-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); padding: var(--s4); }
.crm-card h2 { font-size: var(--fs-md); margin: 0 0 var(--s3); }
.crm-card p { margin: 0 0 var(--s1); }
.crm-big { font-size: var(--fs-md); font-weight: 600; }
.crm-log label, .crm-log .wc-lab { display: block; font-size: var(--fs-sm); color: var(--muted); margin: var(--s3) 0 var(--s1); }
.crm-log textarea, .crm-log input:not([type=radio]) { width: 100%; }
.crm-log .seg-hair { position: relative; flex-wrap: wrap; }
.crm-log .seg-hair label { display: contents; }
.crm-log .seg-hair input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.crm-foot-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.crm-foot-row .wc-hint { margin: 0; }
.crm-actions { display: grid; gap: var(--s3); justify-items: start; }
.crm-actions label { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s1); }
.crm-history { list-style: none; padding: 0; margin: 0; }
.crm-history li { padding: var(--s3) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s1); }
.crm-history li:first-child { border-top: 0; padding-top: 0; }
.crm-h-what { font-weight: 600; }
.crm-h-note { white-space: pre-line; }
.crm-history small { color: var(--muted); font-size: var(--fs-sm); }
.crm-wrote { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; }
.crm-meta .btn--link { font-size: inherit; padding: 0; min-height: 0; }
.crm-phone-meta { display: none; }
#crm-edit .wc-two, #crm-add .wc-two { margin-top: var(--s3); }
.crm-log input.crm-day { width: auto; }
.crm-log .crm-chiprow .btn { padding-inline: var(--s2); }
.crm-date-err { color: var(--stop-ink); font-size: var(--fs-sm); margin: var(--s1) 0 0; }
.crm-dnc-hint { display: none; }
#crm-close:has(input[value=do_not_contact]:checked) .crm-dnc-hint { display: block; }
.crm-owner span { display: flex; gap: var(--s2); align-items: center; }
.crm-ticks { border: 0; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s2); }
.crm-ticks label { display: flex; gap: var(--s2); align-items: center; }
.crm-log .btn--primary:disabled, .wc-pop .btn.danger:disabled { background: var(--bg); color: var(--muted); border: 1px solid var(--line-strong); opacity: 1; }
@media (max-width: 900px) {
  .crm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-cols { display: flex; flex-direction: column; align-items: stretch; gap: var(--s4); }
  .crm-main, .crm-side { display: contents; }
  .crm-historycard { order: 9; }
}
@media (max-width: 600px) {
  .crm-head .btn--primary { width: 100%; }
  .crm-search { flex: 1 1 100%; }
  .crm-table colgroup, .crm-table thead { display: none; }
  .crm-table, .crm-table tbody, .crm-table tr, .crm-table td { display: block; width: auto; }
  .crm-table tr:not(.crm-group) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); }
  .crm-table tr:not(.crm-group) td { border: 0; padding: 0; }
  .crm-table .crm-co { grid-column: 1; }
  .crm-table .crm-act { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .crm-table .crm-next { grid-column: 1; margin-top: var(--s2); }
  .crm-table .crm-src, .crm-table .crm-days { display: none; }
  .crm-phone-meta { display: inline; }
  .crm-table .crm-own { grid-column: 1; font-size: var(--fs-sm); color: var(--muted); }
  .crm-stagerow { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .crm-stages { flex-wrap: wrap; }
  .crm-stages li { flex: 1 0 auto; padding: var(--s1) var(--s2); }
  .crm-decide { justify-content: space-between; }
  .crm-foot-row { flex-direction: column; align-items: stretch; position: sticky; bottom: 0; background: var(--bg); padding: var(--s3) 0; border-top: 1px solid var(--line); margin-bottom: calc(-1 * var(--s3)); }
  .crm-foot-row .btn--primary { width: 100%; }
}