/* Self-hosted Bricolage Grotesque (variable font) — same file the Next.js prototype uses.
   No external/Google dependency, so it works offline and under strict CSP. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/kapdaa/fonts/BricolageGrotesque-VariableFont.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
/* Inter (the reading face) is declared by Frappe's own desk and website bundles ("InterVariable" and "Inter"), so it
   is not declared a second time here. */
/*
 * Kapdaa Factory ERP — Custom Styles
 * Comprehensive branding for portal and desk.
 */

/* Draft material selection shares the Desk dialog and theme tokens. */
.pc-withdrawn { margin-top: 24px; border-top: 1px solid var(--border-color); padding-top: 16px; }
.pc-withdrawn h3 { font-size: 16px; margin: 0 0 12px; }
.pc-withdrawn-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) minmax(180px, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.pc-withdrawn-row > * { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.pc-withdrawn-row time { display: block; color: var(--text-muted); }
.pc-withdrawn-nav { display: flex; gap: 8px; margin-top: 12px; }
.pc-withdrawn-nav .btn, .pc-dayplan [data-act="withdraw"] { min-width: 44px; min-height: 44px; }
@media (max-width: 600px) {
  .pc-withdrawn-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
.pc-bale-dialog .modal-dialog { width: min(960px, calc(100% - 24px)); max-width: 960px; }
.pc-bale-summary { font-size: 16px; font-weight: 600; margin: 4px 0; }
.pc-bale-state { color: var(--text-muted); font-size: 12px; margin-bottom: 12px; }
.pc-bale-results { max-height: 48vh; overflow: auto; border-block: 1px solid var(--border-color); }
.pc-bale-row { display: grid; grid-template-columns: 32px minmax(0, 1.3fr) minmax(0, 1fr) minmax(100px, .7fr); gap: 12px; align-items: center; margin: 0; padding: 12px 4px; border-bottom: 1px solid var(--border-color); font-weight: 400; color: var(--text-color); cursor: pointer; }
.pc-bale-row input { width: 20px; height: 20px; margin: 0; }
.pc-bale-row span { min-width: 0; overflow-wrap: anywhere; }
.pc-bale-row small, .pc-bale-identity > span { display: block; color: var(--text-muted); }
.pc-bale-quantity { text-align: right; }
.pc-bale-paging { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.pc-bale-paging .btn { min-width: 44px; min-height: 44px; }
.pc-bale-refresh { margin-left: auto; }
.pc-bale-feedback { margin-top: 8px; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .pc-bale-row { grid-template-columns: 28px minmax(0, 1fr) 95px; gap: 8px; }
  .pc-bale-location { grid-column: 2 / 4; grid-row: 2; font-size: 12px; }
  .pc-bale-quantity { grid-column: 3; grid-row: 1; font-size: 12px; }
  .pc-bale-dialog .modal-body { padding: 12px; }
}

/* ============================================================
   BRAND TOKENS
   ============================================================ */
/* Kapdaa design system (D1) — ONE token set. The slate ramp uses the exact greys the reference screens
   already ship, so migrating raw hex literals onto these tokens is a no-visual-change unification. Legacy
   --kap-* names are kept as aliases onto the ramp so existing usages inherit the unified palette. */
:root {
    /* Neutrals — one slate ramp */
    --slate-50:  #f9fafb;  --slate-100: #f3f4f6;  --slate-200: #e5e7eb;  --slate-300: #cbd5e1;
    --slate-400: #9ca3af;  --slate-500: #6b7280;  --slate-600: #4b5563;  --slate-700: #374151;
    --slate-800: #1f2937;  --slate-900: #111827;  --ink: #14181c;

    /* Brand action + status (semantic, never a stage colour) */
    --go: #16a34a;  --go-deep: #15803d;  --go-tint: #f0fdf4;
    --warn: #b45309;  --warn-tint: #fef3c7;  --alert: #b91c1c;  --alert-tint: #fee2e2;
    --kap-blue: #2563eb;  --kap-orange: #ea580c;  --kap-red: #dc2626;

    /* Semantic surfaces — CONVERGED onto the ONE design-system ground (kui-tokens loads first). The old screens'
       cool-slate palette now aliases the warm-tinted-neutral --kui-* set, so desk chrome, the .kui-* kit, the
       portal AND these legacy screens all sit on a single ground and flip light/dark together. (D0 unification.) */
    --bg: var(--kui-bg);  --panel: var(--kui-panel);  --line: var(--kui-line);  --line-soft: var(--kui-panel-2);
    --tx: var(--kui-text);  --tx-soft: var(--kui-text-soft);  --tx-strong: var(--kui-ink);

    /* Shape */
    --kap-radius: 10px;  --kap-radius-sm: 8px;
    --kap-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --kap-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);

    /* Responsive scale (D4 will migrate the 8 ad-hoc breakpoints onto these three) */
    --bp-phone: 640px;  --bp-tablet: 960px;

    /* Legacy aliases — retire gradually; keep old var(--kap-*) usages resolving to the unified ramp */
    --kap-white: #ffffff;  --kap-black: var(--tx-strong);  --kap-dark: #2d2d2d;
    --kap-grey-900: var(--slate-700);  --kap-grey-700: var(--slate-600);  --kap-grey-500: var(--slate-500);
    --kap-grey-300: var(--slate-300);  --kap-grey-100: var(--slate-100);  --kap-green: var(--go);
}

/* Dark surfaces (foundation) — as rules migrate off raw hex onto the surface tokens above, they inherit this.
   Desk chrome keeps Frappe's own theming; these tokens theme the Kapdaa surfaces. */
/* Dark: --bg/--panel/--line/--tx now alias --kui-* (above), which redefine themselves in dark — so the surfaces
   flip automatically and no cool-literal overrides are needed here. Only --go-tint is nudged for a dark ground. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --go-tint: #10251a; }
}
:root[data-theme="dark"] { --go-tint: #10251a; }

/* ============================================================
   PORTAL — GLOBAL
   ============================================================ */

/* Clean sans-serif font */
.web-container,
.portal-page {
    font-family: 'InterVariable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 1100px;
}

/* ── Portal GROUND (design-uplift Phase 4) — the client portal shares the desk's warm "raw-fibre" greige ground
   so it reads as ONE branded product. Scoped to website pages (body[data-path], already the portal-only marker
   used for sidebar rules) so the Desk is untouched; theme-aware for free via the --kui-* tokens. ── */
body[data-path] { background: var(--kui-bg); color: var(--kui-text); }
body[data-path] .web-footer, body[data-path] main, body[data-path] .page_content { background: transparent; }
/* The ERPNext web top-navbar (wordmark · bell · avatar) — warm it so it doesn't read as a white strip above
   the warm ground (and flips in dark like the rest of the portal). */
body[data-path] .navbar, body[data-path] header .navbar {
    background: var(--kui-panel) !important; border-bottom: 1px solid var(--kui-line);
}
/* Portal body fills end-to-end: the sidebar + content align to the SAME inset the full-width navbar (logo at
   ~29px) and footer already use, instead of sitting inside an extra ~16px Bootstrap column gutter that read as
   empty greige strips on the left/right. Drop only the OUTER column padding — the sidebar↔content gap (the
   columns' inner padding) stays. Scoped to the portal (body[data-path]); Desk untouched. */
body[data-path] .sidebar-column { padding-left: 0; }
body[data-path] .main-column { padding-right: 0; }
/* ONE tight, consistent horizontal gutter for the whole portal chrome — navbar, body and footer fill the width
   in step (was a loose ~29px page margin that read as empty side strips). 16px keeps a tasteful edge without a
   big greige gutter. Scoped to the portal; the inner sidebar↔content gap is untouched. */
body[data-path] .navbar > .container,
body[data-path] .navbar > .container-fluid,
body[data-path] .web-footer > .container,
body[data-path] .container:has(> .row > .sidebar-column) {
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
}

/* ============================================================
   DESK CHROME (design-uplift · go-live P0) — warm the STANDARD Frappe desk to the KUI identity.
   Core-untouched: we only REMAP Frappe v16's own design tokens (--bg-color / --fg-color / --card-bg /
   --control-bg / --border-color / --text-color / … — the documented theming surface) to --kui-* values,
   scoped to the Desk (body:not([data-path]) — the portal carries data-path and is themed separately). ONE
   override re-skins navbar · sidebar · list views · forms · modals at once, and rides Frappe's own
   data-theme=dark toggle (which also flips the --kui-* tokens), so light + dark stay in sync. Our custom KUI
   pages set --kui-* directly, so they're unaffected — they now just sit on the warm ground instead of white.
   ============================================================ */
body:not([data-path]):not(:has(.for-login)) {
    --bg-color: var(--kui-bg);
    --fg-color: var(--kui-panel);
    --card-bg: var(--kui-panel);
    --control-bg: var(--kui-panel-2);
    --control-bg-on-gray: var(--kui-panel);
    --disabled-control-bg: var(--kui-panel-2);
    --navbar-bg: var(--kui-panel);
    --modal-bg: var(--kui-panel);
    --toast-bg: var(--kui-panel);
    --popover-bg: var(--kui-panel);
    --border-color: var(--kui-line);
    --dark-border-color: var(--kui-line-strong);
    --table-border-color: var(--kui-line);
    --text-color: var(--kui-text);
    --text-muted: var(--kui-text-soft);
    --text-light: var(--kui-text-soft);
    --heading-color: var(--kui-ink);
    --subtle-fg: var(--kui-panel-2);
    --subtle-accent: var(--kui-panel-2);
    --fg-hover-color: var(--kui-panel-2);
    --awesomplete-hover-bg: var(--kui-panel-2);
    --sidebar-select-color: var(--kui-panel-2);
    /* the brand accent takes over Frappe's near-black primary — buttons, links, active tabs read spruce-green */
    --primary: var(--kui-accent);
    --primary-color: var(--kui-accent);
    --btn-primary: var(--kui-accent);

    /* Semantic colour scales → the KUI status register (P1). Frappe draws indicator pills, sidebar dots,
       calendar chips and its charts off --red/--green/--orange/--yellow/--blue-*; remapping the scales (not
       each component) harmonises them ALL to our warmer status hues — while KEEPING the two registers apart:
       red=alert · green=good · orange/yellow=warn · blue=INFO (NOT accent — a blue "info" pill must not read
       green like a "good" pill; the primary button stays accent via --primary/.btn-primary above). Journey
       stage hues are untouched (they live in var(--stg)/STAGE_COLOR/.gate-badge--<stage>, never these scales). */
    --red-50: var(--kui-alert-tint);  --red-100: var(--kui-alert-tint); --red-200: var(--kui-alert-tint);
    --red-300: var(--kui-alert); --red-400: var(--kui-alert); --red-500: var(--kui-alert);
    --red-600: color-mix(in srgb, var(--kui-alert) 88%, #000); --red-700: color-mix(in srgb, var(--kui-alert) 78%, #000);
    --green-50: var(--kui-good-tint); --green-100: var(--kui-good-tint); --green-200: var(--kui-good-tint);
    --green-300: var(--kui-good); --green-400: var(--kui-good); --green-500: var(--kui-good);
    --green-600: color-mix(in srgb, var(--kui-good) 88%, #000); --green-700: color-mix(in srgb, var(--kui-good) 78%, #000);
    --orange-50: var(--kui-warn-tint); --orange-100: var(--kui-warn-tint); --orange-200: var(--kui-warn-tint);
    --orange-300: var(--kui-warn); --orange-400: var(--kui-warn); --orange-500: var(--kui-warn);
    --orange-600: color-mix(in srgb, var(--kui-warn) 88%, #000); --orange-700: color-mix(in srgb, var(--kui-warn) 78%, #000);
    --yellow-50: var(--kui-warn-tint); --yellow-100: var(--kui-warn-tint); --yellow-200: var(--kui-warn-tint);
    --yellow-300: var(--kui-warn); --yellow-400: var(--kui-warn); --yellow-500: var(--kui-warn);
    --yellow-600: color-mix(in srgb, var(--kui-warn) 88%, #000);
    --blue-50: var(--kui-info-tint); --blue-100: var(--kui-info-tint); --blue-200: var(--kui-info-tint);
    --blue-300: var(--kui-info); --blue-400: var(--kui-info); --blue-500: var(--kui-info);
    --blue-600: color-mix(in srgb, var(--kui-info) 88%, #000); --blue-700: color-mix(in srgb, var(--kui-info) 78%, #000);

    /* Frappe v16 indicator PILLS actually paint off --bg-<color> (fill) + --text-on-<color> (label), not the
       numbered scale — so remap those directly (this is what recolours the Draft/Submitted/Paid/Overdue pills,
       sidebar dots, calendar chips). Same register: red=alert · green=good · orange/yellow=warn · blue/cyan=info ·
       gray=neutral; purple/pink/teal folded to info so no stock pink/purple leaks. */
    --bg-red: var(--kui-alert-tint);      --text-on-red: var(--kui-alert);
    --bg-green: var(--kui-good-tint);     --text-on-green: var(--kui-good);
    --bg-orange: var(--kui-warn-tint);    --text-on-orange: var(--kui-warn);
    --bg-yellow: var(--kui-warn-tint);    --text-on-yellow: var(--kui-warn);
    --bg-blue: var(--kui-info-tint);      --text-on-blue: var(--kui-info);
    --bg-cyan: var(--kui-info-tint);      --text-on-cyan: var(--kui-info);
    --bg-purple: var(--kui-info-tint);    --text-on-purple: var(--kui-info);
    --bg-pink: var(--kui-info-tint);      --text-on-pink: var(--kui-info);
    --bg-teal: var(--kui-info-tint);      --text-on-teal: var(--kui-info);
    --bg-gray: var(--kui-panel-2);        --text-on-gray: var(--kui-text-soft);
}

/* Navbar */
.web-header .container {
    max-width: 1100px;
}

/* ============================================================
   PORTAL — SIDEBAR
   ============================================================ */

/* Hide irrelevant portal sidebar items */
.web-sidebar a[href="/projects"],
.web-sidebar a[href="/rfq"],
.web-sidebar a[href="/supplier-quotation"],
.web-sidebar a[href="/purchase-invoices"],
.web-sidebar a[href="/quotations"],
.web-sidebar a[href="/timesheets"],
.web-sidebar a[href="/newsletter"],
.web-sidebar a[href="/material-requests"],
.web-sidebar a[href="/shipments"],
.web-sidebar a[href="/issues"],
.web-sidebar a[href="/addresses"],
.web-sidebar a[href="/purchase-orders"],
body[data-path] .sidebar-menu a[href="/projects"],
body[data-path] .sidebar-menu a[href="/rfq"],
body[data-path] .sidebar-menu a[href="/supplier-quotation"],
body[data-path] .sidebar-menu a[href="/purchase-invoices"],
body[data-path] .sidebar-menu a[href="/quotations"],
body[data-path] .sidebar-menu a[href="/timesheets"],
body[data-path] .sidebar-menu a[href="/newsletter"],
body[data-path] .sidebar-menu a[href="/material-requests"],
body[data-path] .sidebar-menu a[href="/shipments"],
body[data-path] .sidebar-menu a[href="/issues"],
body[data-path] .sidebar-menu a[href="/addresses"],
body[data-path] .sidebar-menu a[href="/purchase-orders"] {
    display: none !important;
}

/* Style sidebar links — icon + label aligned, animated hover/active */
.web-sidebar a,
.portal-sidebar a {
    padding: 8px 12px;
    border-radius: 8px;
    transition: background var(--kui-t-fast) var(--kui-ease), color var(--kui-t-fast) var(--kui-ease), transform var(--kui-t-fast) var(--kui-ease), box-shadow var(--kui-t-fast) var(--kui-ease);
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--kui-text);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 2px;
}
.web-sidebar a svg,
.portal-sidebar a svg { flex: 0 0 auto; color: var(--kui-text-soft); transition: color var(--kui-t-fast) var(--kui-ease); }

.web-sidebar a:hover,
.portal-sidebar a:hover {
    background: var(--kui-panel-2);
    color: var(--kui-ink);
    transform: translateX(2px);
}
.web-sidebar a:hover svg,
.portal-sidebar a:hover svg { color: var(--kui-accent); }
/* Active item: accent tint + a left accent bar (animated) */
.web-sidebar a.active,
.portal-sidebar a.active {
    background: color-mix(in srgb, var(--kui-accent) 12%, transparent);
    color: var(--kui-ink); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--kui-accent);
}
.web-sidebar a.active svg,
.portal-sidebar a.active svg { color: var(--kui-accent); }

.web-sidebar a[href="/book_delivery"],
.web-sidebar a[href="/book_collection"],
.web-sidebar a[href="/my_bookings"] {
    font-weight: 600;
    color: var(--kui-ink);
}

/* ============================================================
   PORTAL — MOTION & CONSISTENCY (tasteful micro-interactions, one language across every page)
   ============================================================ */
/* Buttons: the one skin (no hover lift or shadow) */
.kap-btn-primary, .kap-btn-secondary {
    transition: background var(--kui-t-fast) var(--kui-ease), border-color var(--kui-t-fast) var(--kui-ease), color var(--kui-t-fast) var(--kui-ease);
}
/* Buttons rendered as <a> must never wear the site's link-underline (a button is not a link). */
a.kap-btn-primary, a.kap-btn-secondary,
a.kap-btn-primary:hover, a.kap-btn-secondary:hover,
.kap-btn-primary:hover, .kap-btn-secondary:hover { text-decoration: none; }
/* Cards + KPI tiles + list rows: subtle, uniform hover */
.kap-form-card, .kap-kpi { transition: box-shadow var(--kui-t) var(--kui-ease), transform var(--kui-t) var(--kui-ease), border-color var(--kui-t) var(--kui-ease); }
.kap-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(28,26,21,.4); }
.kap-track-row { transition: background var(--kui-t-fast) var(--kui-ease); }
.kap-track-row:hover { background: var(--kui-panel-2); }
/* Track landing: client footprint banner + per-lot certificate link (moved here from the retired Documents page) */
.kap-track-footprint { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 12px 16px;
    background: var(--kui-good-tint); border: 1px solid color-mix(in srgb, var(--kui-good) 30%, transparent); border-radius: 12px; color: var(--kui-good); font-size: var(--kui-fs-base); }
.kap-track-footprint svg { flex: none; color: var(--kui-good); }
.kap-track-cert { display: inline-flex; align-items: center; gap: 5px; font-size: var(--kui-fs-md); font-weight: 600;
    color: var(--kui-good); text-decoration: none; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--kui-good) 30%, transparent); border-radius: var(--kui-r);
    background: var(--kui-good-tint); transition: background var(--kui-t-fast) var(--kui-ease), border-color var(--kui-t-fast) var(--kui-ease); }
.kap-track-cert:hover { background: color-mix(in srgb, var(--kui-good) 18%, transparent); border-color: var(--kui-good); color: var(--kui-good); text-decoration: none; }
@media (max-width: 560px) { .kap-track-cert span, .kap-track-cert { font-size: 0; gap: 0; padding: 6px; }
    .kap-track-cert svg { width: 16px; height: 16px; } }

/* Account-page top bar — the stock /update-profile, /update-password, /third_party_apps pages are chrome-less
   web forms; this gives them a real portal top bar (Kapdaa wordmark → Home, "‹ My Account" → /me) so Edit Profile
   is never a dead-end. In-flow + sticky, NOT a floating pill. (See kapdaa_web.js renderAccountChrome.) */
.kap-acct-bar { position: sticky; top: 0; z-index: 100; background: var(--kui-panel); border-bottom: 1px solid var(--kui-line);
    box-shadow: 0 1px 0 rgba(28,26,21,.02); }
.kap-acct-bar-in { max-width: 860px; margin: 0 auto; padding: 0 24px; height: 56px;
    display: flex; align-items: center; justify-content: space-between; }
.kap-acct-brand { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--kui-ink); text-decoration: none; }
.kap-acct-brand:hover { color: var(--kui-accent); text-decoration: none; }
.kap-acct-up { display: inline-flex; align-items: center; gap: 4px; font-size: var(--kui-fs-base); font-weight: 600;
    color: var(--kui-text); text-decoration: none; padding: 7px 12px; border-radius: 8px; transition: background var(--kui-t-fast) var(--kui-ease), color var(--kui-t-fast) var(--kui-ease); }
.kap-acct-up:hover { background: var(--kui-panel-2); color: var(--kui-accent); text-decoration: none; }
.kap-acct-up svg { flex: none; }
/* pull the bare form up under the bar with comfortable breathing room */
body.kap-acct-page main { max-width: 860px; margin: 24px auto 48px; padding: 0 24px; }
.kap-acct-brand img { height: 26px; width: auto; display: block; }

/* ---- Send Waste (book_delivery) redesign: inline info bar (replaces the old right rail), side-by-side
   From/To addresses, inline notes. The rail was col-md-4 → buried below submit on phones; these stay visible. */
.kap-book-infobar { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 12px; }
.kap-book-fact { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 13px;
    color: var(--kui-good); background: var(--kui-good-tint); border: 1px solid color-mix(in srgb, var(--kui-good) 26%, transparent); border-radius: 999px; }
.kap-book-fact svg { width: 15px; height: 15px; flex: none; color: var(--kui-good); }
.kap-book-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px;
    padding: 10px 15px; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); text-decoration: none;
    color: var(--kui-text); font-size: 13px; transition: border-color var(--kui-t-fast) var(--kui-ease), box-shadow var(--kui-t-fast) var(--kui-ease); }
.kap-book-recent:hover { border-color: var(--kui-accent); box-shadow: var(--kui-e2); text-decoration: none; color: var(--kui-text); }
.kap-book-recent-all { margin-left: auto; color: var(--kui-accent); font-weight: 600; }
/* From / To address grid */
.kap-addr-grid { margin-bottom: 6px; }
.kap-addr-flag { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--kui-text-soft); margin-bottom: 10px; }
.kap-addr-flag svg { width: 17px; height: 17px; flex: none; }
.kap-addr-flag strong { color: var(--kui-ink); font-weight: 700; }
.kap-addr-flag--from svg { color: var(--kui-good); }
.kap-addr-flag--to svg { color: var(--kui-text-soft); }
.kap-recv-box--tall { height: 100%; display: flex; flex-direction: column; background: var(--kui-panel-2);
    border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 16px; }
.kap-recv-box--tall .kap-addr { margin: 0; font-style: normal; color: var(--kui-text); line-height: 1.55; }
.kap-recv-box--tall .kap-addr span { display: block; }
.kap-recv-fixed { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--kui-text-soft); }
/* generic inline note (site limits etc.) */
.kap-inline-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 13px;
    font-size: 13px; color: var(--kui-text); background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r); }
.kap-inline-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--kui-text-soft); }
.kap-inline-note strong { color: var(--kui-ink); }
.kap-book-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.kap-book-help { font-size: 13px; color: var(--kui-text-soft); }
.kap-book-help strong { color: var(--kui-text); }
@media (max-width: 767px) { .kap-recv-box--tall { margin-top: 12px; } }
/* Map placeholder — shown until a postcode is located, so an empty zoomed-out map never sits on the form */
.kap-map-ph { display: flex; align-items: center; gap: 9px; margin: 2px 0 8px; padding: 18px 16px; font-size: 13px;
    color: var(--kui-text-soft); background: var(--kui-panel-2); border: 1px dashed var(--kui-line-strong); border-radius: var(--kui-r-lg); }
.kap-map-ph svg { flex: none; color: var(--kui-text-soft); }

/* Collapsible reference section (native <details>) — used for "How you're charged" on My Contract */
details.kap-collapse { padding: 0; overflow: hidden; }
details.kap-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; font-weight: 700; color: var(--kui-ink); user-select: none; }
details.kap-collapse > summary::-webkit-details-marker { display: none; }
.kap-collapse-title { font-size: var(--kui-fs-lg); }
.kap-collapse-hint { font-size: 13px; font-weight: 500; color: var(--kui-text-soft); }
.kap-collapse-chev { margin-left: auto; color: var(--kui-text-soft); transition: transform var(--kui-t) var(--kui-ease); flex: none; }
details.kap-collapse[open] > summary .kap-collapse-chev { transform: rotate(180deg); }
.kap-collapse-body { padding: 0 18px 18px; }
details.kap-collapse > summary:hover .kap-collapse-title { color: var(--kui-accent); }

/* Track table: lot link reads as a link, quietly */
.kap-track-lotlink { color: var(--kui-ink); text-decoration: none; }
.kap-track-lotlink:hover { color: var(--kui-accent); text-decoration: none; }

/* Shared portal back-link — one designed treatment used on the passport, certificate, and any sub-page so
   "go back" looks and behaves the same everywhere (was ad-hoc grey text links). */
.kap-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--kui-text);
    text-decoration: none; padding: 6px 13px; border: 1px solid var(--kui-line); border-radius: 8px; background: var(--kui-panel);
    transition: background var(--kui-t-fast) var(--kui-ease), border-color var(--kui-t-fast) var(--kui-ease), color var(--kui-t-fast) var(--kui-ease); }
.kap-back:hover { background: var(--kui-panel-2); border-color: var(--kui-accent); color: var(--kui-accent); text-decoration: none; }
.kap-back svg { flex: none; }
/* GLOBAL reduced-motion policy (a11y, WS-5.7): ONE blanket so every animation/transition honours the OS
   "reduce motion" preference — replaces the fragile per-selector opt-outs scattered below (which only ever
   covered ~10 of 28 animations; the rest still played). The scoped blocks are now redundant belt-and-braces
   and left in place. Uses .01ms (not `none`) so transitionend/animationend STILL FIRE — JS that awaits them
   (steppers, drawers, the camera-scan toggle) keeps working; the motion is just instant. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;   /* the a11y blanket — must stay near-zero, NOT a motion token */
        scroll-behavior: auto !important;
    }
    /* movement goes, feedback stays (docs/23 §2b motion): the kit's controls and rows still change colour and opacity at
       their own pace, and nothing of theirs moves. No script waits on these transitions, so the blanket's
       transitionend guarantee is untouched. */
    :is(.kui-btn, .kui-tb__chip, .kui-tb__applied, .kui-seg__b, .kui-tab, .kui-r, .kui-tile) {
        transition-property: color, background-color, border-color, opacity !important;
        transition-duration: var(--kui-t-fast) !important;
    }
}
@media (prefers-reduced-motion: reduce) { .kap-collapse-chev { transition: none; } }
/* Gentle content fade-in on load — the page settles in, doesn't pop */
@keyframes kapPortalIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kap-page-header, .kap-form-card, .kap-kpi-grid, .kap-home-cols { animation: kapPortalIn .32s ease both; }
.kap-form-card { animation-delay: .04s; }
@media (prefers-reduced-motion: reduce) {
    .web-sidebar a, .portal-sidebar a, .kap-btn-primary, .kap-btn-secondary, .kap-kpi, .kap-track-row,
    .kap-form-card { transition: none; }
    .web-sidebar a:hover, .portal-sidebar a:hover, .kap-btn-primary:hover, .kap-btn-secondary:hover,
    .kap-kpi:hover { transform: none; }
    .kap-page-header, .kap-form-card, .kap-kpi-grid, .kap-home-cols { animation: none; }
}

/* ============================================================
   PORTAL — FOOTER
   ============================================================ */

.web-footer .footer-powered,
.footer-powered,
footer .text-muted:last-child,
a[href="https://erpnext.com"],
footer a[href*="erpnext"],
.footer-message,
.website-footer .footer-powered-section,
.web-footer div:has(a[href*="erpnext"]) {
    display: none !important;
}

.web-footer {
    border-top: 1px solid var(--kui-line);
    background: var(--kui-panel);
    padding: 0;
    margin-top: 56px;
    color: var(--kui-text-soft);
    font-size: 13px;
    text-align: left;
}
/* Designed portal footer (built by kapdaa_web.buildPortalFooter) — wordmark + tagline · grouped quick links ·
   contact · copyright, KUI-styled, edge-aligned with the navbar/body. Replaces the empty stock Frappe footer. */
.kap-foot { padding: 30px 0 22px; }
.kap-foot-top { display: flex; gap: 40px 64px; flex-wrap: wrap; justify-content: space-between; }
.kap-foot-brand { max-width: 300px; }
.kap-foot-logo { height: 24px; width: auto; margin-bottom: 12px; opacity: .92; }
.kap-foot-brand p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--kui-text-soft); }
.kap-foot-links { display: flex; gap: 28px 48px; flex-wrap: wrap; }
.kap-foot-col { display: flex; flex-direction: column; gap: 8px; min-width: 120px; }
.kap-foot-col h4 { margin: 0 0 3px; font-size: 11px; font-weight: 700; color: var(--kui-soft); }
.kap-foot-col a { font-size: 13px; color: var(--kui-text); text-decoration: none; width: fit-content; }
.kap-foot-col a:hover { color: var(--kui-accent); }
.kap-foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--kui-line); font-size: 12px; }
.kap-foot-sys { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: .04em;
    color: var(--kui-soft); }
@media (max-width: 560px) { .kap-foot-top { gap: 26px; } .kap-foot { padding: 24px 0 18px; } }
/* Left-align the "© Kapdaa …" line UNDER the top-header logo. Two things were pushing it out of alignment: the
   copyright sits in a half-width Bootstrap column (the other half is the hidden "powered by ERPNext"), and the
   footer's container is centred/max-width while the navbar (holding the logo at ~29px) is full-width. So: span
   the column full width + full-bleed the footer container with the navbar's 29px gutter → the text starts exactly
   under the logo. */
.web-footer .container { max-width: none; padding-left: 16px; padding-right: 16px; }
.web-footer .footer-info .row { justify-content: flex-start; margin-left: 0; margin-right: 0; }
.web-footer .footer-info .footer-col-left { flex: 0 0 100%; max-width: 100%; text-align: left; padding-left: 0; padding-right: 0; }

/* ============================================================
   PORTAL — FORMS (book_delivery, book_collection)
   ============================================================ */

/* Page header — compact; the section title already sits in the page-head bar, so this row carries only the
   one-line description + actions and shouldn't add much height. */
.kap-page-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--kui-line);
}

.kap-page-header h1 {
    font-size: var(--kui-fs-2xl);
    font-weight: 700;
    color: var(--kui-ink);
    margin: 0 0 6px 0;
}

.kap-page-header p {
    font-size: var(--kui-fs-lg);
    color: var(--kui-text-soft);
    margin: 0;
}

/* Form card */
.kap-form-card {
    background: var(--kui-panel);
    border: 1px solid var(--kui-line);
    border-radius: var(--kap-radius);
    padding: 28px;
    box-shadow: var(--kui-e1);
}

/* "Account not linked yet" (and similar) notice card on the booking pages */
.kap-notice {
    border-left: 4px solid var(--kui-warn);
    max-width: 620px;
}
.kap-notice .kap-section-title {
    margin-top: 0;
    color: var(--kui-warn);
}
.kap-notice p {
    color: var(--kui-text);
    margin: 0 0 12px 0;
}

/* Section divider inside form */
.kap-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--kui-text-soft);
    margin: 24px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--kui-line);
}

/* Form labels */
.kap-form-card .form-label,
.kap-form-card label {
    font-size: 13px;
    font-weight: 600;
    color: var(--kui-text);
    margin-bottom: 4px;
}

/* Form inputs */
.kap-form-card .form-control,
.kap-form-card select,
.kap-form-card input,
.kap-form-card textarea {
    border: 1px solid var(--kui-line-strong);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--kui-ink);
    transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast);
    background: var(--kui-panel);
    /* Form values use a crisp system font, NOT the Bricolage Grotesque DISPLAY font — at 14px/420-weight the
       display font renders thin+light and a select's single-line placeholder reads as faint dotted marks. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 500;
    letter-spacing: normal;
}
/* Selects: the web theme forced `appearance:none` on `.form-control`, which on some browsers renders the
   select's VALUE invisibly (no reliable text paint) — the "weird / can't see the selected option" bug. Fix by
   RESTORING the browser's native menulist rendering (guaranteed-visible text + a native dropdown arrow on every
   OS), and pinning the text solid dark. No custom SVG chevron — the native arrow is the affordance.
   !important beats the ERPNext website bundle's `.form-control` rules. */
.kap-form-card select.form-control {
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    appearance: menulist !important;
    color: var(--kui-ink) !important;
    -webkit-text-fill-color: var(--kui-ink) !important;
    opacity: 1 !important;
    background-color: var(--kui-panel) !important;
    background-image: none !important;   /* native arrow — no custom chevron overlaying the text */
    padding-right: 14px !important;
    cursor: pointer;
    /* The theme pins .form-control to ~28px height (border-box) while our padding(10px×2)+line-height(21px)
       need ~41px — so the value was pushed BELOW the visible box, leaving only the tops of the glyphs (the
       "weird dots/dashes"). Let the select grow to fit its text + vertically centre it. */
    height: auto !important;
    min-height: 44px !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}
.kap-form-card select.form-control option,
.kap-form-card select.form-control option:checked {
    color: var(--kui-ink) !important;
    -webkit-text-fill-color: var(--kui-ink) !important;
    background-color: var(--kui-panel) !important;
}

.kap-form-card .form-control:focus,
.kap-form-card select:focus,
.kap-form-card input:focus,
.kap-form-card textarea:focus {
    border-color: var(--kui-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kui-accent) 14%, transparent);
    outline: none;
}

/* Submit button — the portal's primary CTA now speaks the same brand accent as the Desk primaries. */
.kap-btn-primary {
    background: var(--kui-accent);
    color: var(--kui-accent-ink);
    border: 1px solid var(--kui-accent);
    border-radius: var(--kui-r);
    min-height: var(--kui-control-h);
    padding: 0 var(--kui-s3);
    font-size: var(--kui-fs-md);
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
}

.kap-btn-primary:hover { background: var(--kui-accent-hover); border-color: var(--kui-accent-hover); }

/* When the primary button is an <a> (portal page headers), the portal theme's link colour overrides
   the button text → black-on-black. Force white. */
a.kap-btn-primary,
a.kap-btn-primary:hover,
a.kap-btn-primary:focus,
a.kap-btn-primary:visited {
    color: var(--kui-accent-ink) !important;
}

/* Info card (sidebar) */
.kap-info-card {
    background: var(--kap-grey-100);
    border: 1px solid var(--kap-grey-300);
    border-radius: var(--kap-radius);
    padding: 20px;
}

.kap-info-card h6 {
    font-size: 13px;
    font-weight: 700;
    color: var(--kap-grey-700);
    margin-bottom: 12px;
}

.kap-info-card li {
    font-size: 13px;
    color: var(--kap-grey-500);
    margin-bottom: 4px;
}

/* ============================================================
   PORTAL — MY BOOKINGS
   ============================================================ */

/* Responsive scroll container for every portal data table — on a narrow screen the table scrolls WITHIN its
   card (Bootstrap-5 `.table-responsive` behaviour, defined here so it works regardless of the web stylesheet)
   instead of overflowing the page and pushing the layout sideways. */
.kap-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.kap-bookings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* Keep table cells on one line so the table scrolls as a unit rather than wrapping into an unreadable jumble;
   tighten padding on small screens so more columns fit before the scroll kicks in. */
.kap-bookings-table th,
.kap-bookings-table td { white-space: nowrap; }
@media (max-width: 560px) {
    .kap-bookings-table thead th { padding: 8px 10px; }
    .kap-bookings-table tbody td { padding: 9px 10px; font-size: 13px; }
}

.kap-bookings-table thead th {
    background: var(--kap-grey-100);
    color: var(--kap-grey-700);
    font-size: 12px;
    font-weight: 600;
    padding: 10px 14px;
    border-bottom: 1px solid var(--kap-grey-300);
}

.kap-bookings-table thead th:first-child { border-radius: 8px 0 0 0; }
.kap-bookings-table thead th:last-child { border-radius: 0 8px 0 0; }

.kap-bookings-table tbody td {
    padding: 12px 14px;
    font-size: 14px;
    border-bottom: 1px solid var(--kap-grey-100);
    color: var(--kap-grey-900);
}

.kap-bookings-table tbody tr:hover {
    background: var(--kap-grey-100);
}

/* Status badges */
.kap-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.kap-badge-confirmed { background: var(--kui-good-tint); color: var(--kui-good); }
.kap-badge-waitlisted { background: var(--kui-warn-tint); color: var(--kui-warn); }
.kap-badge-arrived { background: var(--kui-info-tint); color: var(--kui-info); }
.kap-badge-completed { background: var(--kui-panel-2); color: var(--kui-text); }
.kap-badge-cancelled { background: var(--kui-alert-tint); color: var(--kui-alert); }
.kap-badge-ready { background: var(--kui-info-tint); color: var(--kui-info); }
.kap-badge-dispatched { background: var(--kui-panel-2); color: var(--kui-text); }
.kap-badge-draft { background: var(--kui-panel-2); color: var(--kui-text-soft); }
/* invoice + contract statuses */
.kap-badge-paid, .kap-badge-active { background: var(--kui-good-tint); color: var(--kui-good); }
.kap-badge-overdue, .kap-badge-unpaid { background: var(--kui-alert-tint); color: var(--kui-alert); }
.kap-badge-partly { background: var(--kui-warn-tint); color: var(--kui-warn); }
.kap-badge-neutral, .kap-badge-inactive, .kap-badge-unsigned { background: var(--kui-panel-2); color: var(--kui-text); }
/* tonnage-contract progress statuses */
.kap-badge-below-target { background: var(--kui-warn-tint); color: var(--kui-warn); }
.kap-badge-on-target, .kap-badge-on-track, .kap-badge-complete, .kap-badge-ahead { background: var(--kui-good-tint); color: var(--kui-good); }
.kap-badge-at-risk { background: var(--kui-alert-tint); color: var(--kui-alert); }

/* Empty state */
.kap-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--kap-grey-500);
}

.kap-empty-state h4 {
    font-size: var(--kui-fs-lg);
    color: var(--kap-grey-700);
    margin-bottom: 8px;
}

.kap-empty-state p {
    font-size: 14px;
    margin-bottom: 20px;
}

/* ============================================================
   PORTAL — MY ACCOUNT
   ============================================================ */

.portal-page .profile-card {
    border-radius: var(--kap-radius);
    border: 1px solid var(--kap-grey-300);
    box-shadow: var(--kap-shadow);
}

/* ============================================================
   DESK — WORKSPACE
   ============================================================ */

/* Workspace header sections */
.workspace-page .widget-group-head {
    font-size: 14px;
    font-weight: 700;
    color: var(--kap-grey-700);
    padding-bottom: 8px;
    border-bottom: 2px solid var(--kap-black);
    margin-bottom: 12px;
}

/* Shortcut cards in workspace */
.workspace-page .shortcut-widget-box .desk-shortcut {
    border-radius: var(--kap-radius);
    border: 1px solid var(--kap-grey-300);
    transition: box-shadow var(--kui-t-fast), transform var(--kui-t-fast);
}

.workspace-page .shortcut-widget-box .desk-shortcut:hover {
    box-shadow: var(--kap-shadow-md);
    transform: translateY(-2px);
}

/* Number cards */
.workspace-page .number-widget-box .number-widget {
    border-radius: var(--kap-radius);
    border: 1px solid var(--kap-grey-300);
}

/* ============================================================
   DESK — FORM IMPROVEMENTS
   ============================================================ */

/* Custom action buttons */
.btn-primary-dark,
.page-actions .btn-primary-dark {
    background: var(--kap-black);
    color: var(--kap-white);
    border: none;
}

.btn-primary-dark:hover {
    background: var(--kap-dark);
}

/* Kapdaa menu button group */
.inner-group-button[data-label="Kapdaa"] {
    font-weight: 600;
}

/* ============================================================
   Gate Check-In kiosk (www/gate) — tablet / handheld
   ============================================================ */
.gate-kiosk { max-width: none; margin: 0; padding: 0; }   /* gutter comes from the D2.0 page shell (was 20px 16px 60px → double padding vs other pages) */

/* ---- D2.0 PAGE SHELL ---- Every custom Kapdaa page shares ONE responsive container so spacing, gutters and
   the top/bottom rhythm read IDENTICALLY across pages and at every screen width (was ad-hoc per page: 22px /
   18px / 4px / 0). The gutter scales smoothly with clamp() — no per-page breakpoints — and content centers
   within a max width on ultra-wide screens. Inner content wraps inherit this (their own horizontal padding is
   removed just below), so a board on one page sits exactly like a board on another. */
.kap-gate-page, .kap-fo-page {
    --kap-gutter: clamp(12px, 3vw, 26px);
    padding: 18px var(--kap-gutter) 44px;
    /* Edge-to-edge: these are operational dashboards that should FILL the screen — only the responsive gutter
       insets them, no centred max-width cap (that left "squeezed" side margins on wide monitors). */
    max-width: none; width: 100%;
}
@media (max-width: 640px) { .kap-gate-page, .kap-fo-page { padding-top: 12px; padding-bottom: 30px; } }
/* Inner content wraps inherit the shell gutter — their own horizontal padding is removed at each definition
   (.gate-wrap, .fo-wrap) so nothing doubles up. */

/* ---- D4 HANDHELD ---- Layout already reflows to one column on phones (per-board auto-fit grids + the shell).
   The remaining gap is TAP TARGETS: floor operators tap with thumbs/gloves, so on phone widths the PRIMARY
   interactive controls hit ~44px, form fields use ≥16px text (stops iOS zoom-on-focus), and the cramped
   send-to-line row wraps so the button isn't squeezed. */
@media (max-width: 640px), (pointer: coarse) {
    .pc-send, .pc-line-select, .mq-go, .mq-done, .lck-open, .gate-btn, .gate-btn-primary, .gate-chip,
    .mp-print, .kap-cam-btn, .mp-jump-chip, .lens-tab, .pc-open-line, .tlm-panel .lane-sched { min-height: 44px; }
    .mp-jump-chip, .gate-chip, .lck-open, .pc-open-line { display: inline-flex; align-items: center; }
    .pc-line-select, .kap-search input, .gate-step-body input, .gate-step-body select { font-size: 16px; }
    .pc-assign { flex-wrap: wrap; }
    .pc-send { flex: 1 1 100%; }                 /* full-width send button once the row wraps */
    .pc-list-link { padding-top: 7px; padding-bottom: 7px; }   /* bigger hit area on the count-pills */
}
/* Desk-style page-head for the gate kiosk */
.gate-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px;
    border-bottom: 1px solid var(--kui-line); padding: 14px 0; margin: 0 0 8px; }
.gate-header h1 { font-size: var(--kui-fs-xl); font-weight: 700; margin: 0; }
.gate-operator { text-align: right; color: var(--kui-text-soft); font-size: 13px; line-height: 1.4; }
.gate-operator strong { color: var(--kui-ink); font-size: 16px; }

/* Compact gate header: scan + search + client + sort on one row (no big dashed bar, no camera). The scan
   field is just a focused text input — hardware wedge/Zebra scanners type into it; phones scan the printed
   QR (a login-gated URL) with their native camera. */
/* The single scan-or-search field — grows to fill (Google-style), the camera icon sits INSIDE it at the right,
   and the dropdowns line up next to it. */

/* (only the scan-or-search field carries .kap-search in the gate header now the twin field is gone) */
/* One consistent control height across the search + both dropdowns — they read as a matched toolbar, not
   three different-sized boxes. */
.gate-header .kap-search, .gate-header .kap-select, .gate-header .kap-sort { height: var(--kui-field-h, 36px); box-sizing: border-box; align-self: center; margin: 0; }
.gate-header .kap-search { flex: 1 1 340px; max-width: 680px; padding-top: 0; padding-bottom: 0; }
.gate-header .kap-select { border-radius: 999px; padding: 0 32px 0 14px; font-size: 13px;
    color: var(--kui-text); flex: 0 1 170px; min-width: 140px; }
.gate-header .kap-sort { flex: 0 0 auto; padding-top: 0; padding-bottom: 0; }

.gate-section-title { font-size: 13px;
    color: var(--kui-text-soft); font-weight: 700; margin: 0 0 12px; }
/* a section title that follows another block (e.g. the Material Passport stacked sections) needs top gap */
.gate-section-title.gate-section-title--spaced { margin-top: 14px; }
.gate-softlink { font-size: 12px; font-weight: 600; color: var(--kui-accent); margin-left: 10px;
    text-transform: none; letter-spacing: normal; }
.gate-softlink:hover { text-decoration: underline; }
.gate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.gate-empty { color: var(--kui-text-soft); padding: 24px; }

/* Quality Holds board */
.gate-wrap { padding: 0; }   /* gutter comes from the D2.0 page shell (.kap-gate-page) */
.gate-hero { display: flex; align-items: center; gap: 8px; color: var(--kui-text); font-size: 14px; margin-bottom: 12px; }
.kap-count { display: inline-block; background: var(--kui-alert-tint); color: var(--kui-alert); border-radius: 999px;
    padding: 1px 9px; font-size: 12px; font-weight: 700; margin-left: 6px; }

.holds-reason { font-weight: 700; color: var(--kui-ink); font-size: 14px; }
.holds-haz { margin-left: 6px; }
.holds-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--kui-text); font-size: var(--kui-fs-md); }
.holds-meta span { display: inline-flex; align-items: center; gap: 4px; }
.holds-acts { display: flex; gap: 10px; margin-top: 4px; }
.holds-acts .gate-btn { flex: 1; padding: 11px; font-size: 14px; }
.holds-release { border-color: var(--kui-good) !important; color: var(--kui-good); }
.holds-dispose { border-color: var(--kui-alert) !important; color: var(--kui-alert); }
.holds-readonly { color: var(--kui-text-soft); font-size: var(--kui-fs-md); display: flex; align-items: center; gap: 6px; }

/* Outbound Gate — load manifest + weight-match */
.og-match { border-radius: var(--kui-r-lg); padding: 11px 14px; font-size: var(--kui-fs-base); display: flex; align-items: center; gap: 8px; }
.og-match--ok { background: var(--kui-good-tint); border: 1px solid color-mix(in srgb, var(--kui-good) 35%, transparent); color: var(--kui-good); }
.og-match--warn { background: var(--kui-warn-tint); border: 1px solid color-mix(in srgb, var(--kui-warn) 35%, transparent); color: var(--kui-warn); }
/* dispatch at the gate (D-47): what still stands between the vehicle and release */
ul.og-checks { margin: 12px 0; padding: 10px 14px 10px 30px; border-radius: var(--kui-r-lg); background: var(--kui-warn-tint); color: var(--kui-warn); font-size: var(--kui-fs-base); }
ul.og-checks li + li { margin-top: 4px; }
p.og-checks--ok { margin: 12px 0; padding: 10px 14px; border-radius: var(--kui-r-lg); background: var(--kui-ok-tint, #e8f5ec); color: var(--kui-good); font-size: var(--kui-fs-base); display: flex; gap: 8px; align-items: center; }
.og-todo .og-lot { color: var(--kui-text-soft, #777); }
.og-scan-row { margin: 6px 0 10px; }
.og-scan-row .kap-search { width: 100%; }
.og-expected { font-size: 13px; color: var(--kui-text); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.og-manifest-list { display: flex; flex-direction: column; gap: 6px; }
.og-manifest-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px;
    background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 8px; font-size: var(--kui-fs-md); }
.og-lot { font-weight: 700; color: var(--kui-ink); }
.og-lot-item { color: var(--kui-text); grid-column: 1; }
.og-lot-qty { grid-row: 1 / span 2; align-self: center; color: var(--kui-text); font-weight: 600; white-space: nowrap; }
.gate-card { text-align: left; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg);
    padding: 12px 14px 12px 18px; cursor: pointer; position: relative; min-height: 78px;
    display: flex; flex-direction: column; gap: 3px; transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast), transform var(--kui-t-fast); }
.gate-card:hover { border-color: var(--kui-line-strong); box-shadow: var(--kui-e2); transform: translateY(-2px); }
/* card header: id (left) + stage/status badge (right), inline — no absolute positioning */
.gate-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.gate-card-head .kap-stage, .gate-card-head .gate-pill { flex: 0 0 auto; }

/* ── Health / priority colour language ─────────────────────────────────────────────────────────────
   A left edge whose colour signals what needs attention. Works on any card (position:relative + ::before),
   coexists with hover shadows. alert=red · warn=amber · ok=green · idle=grey. */
.kap-health { position: relative; }
/* a rounded accent pill inset from the left edge — sits clear of the card's rounded corners (no stick-out) */
.kap-health::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    height: 62%; width: 4px; border-radius: 999px; }
.kap-health--ok::before { background: var(--kui-good); }
.kap-health--warn::before { background: var(--kui-warn); }
.kap-health--alert::before { background: var(--kui-alert); }
.kap-health--idle::before { background: var(--kui-line-strong); }

/* ── Motion: consistent entrance + hover so the UI feels modern/responsive ── */
@keyframes kapFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.kap-fade-in { animation: kapFade .22s ease both; }
/* line icons (kapdaa.icon) — align to text baseline, inherit colour */
.kap-ic { display: inline-block; vertical-align: -0.18em; flex: 0 0 auto; }
.st-bcard { transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast), transform var(--kui-t-fast); }
.st-bcard:hover { transform: translateY(-2px); }
/* skeleton shimmer for loading states */
@keyframes kapShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

/* Identity hierarchy (§4): Client leads (loud), the booking ID is the quiet mono line beneath. */
.gate-card-client { color: var(--kui-text); font-size: var(--kui-fs-lg); font-weight: 680; line-height: 1.2; }
.gate-card-ref { font-weight: 600; font-size: var(--kui-fs-md); line-height: 1.2; color: var(--kui-text-soft); margin-top: 3px; }
.gate-card-meta { color: var(--kui-text-soft); font-size: var(--kui-fs-md); margin-top: auto; }
.gate-badge { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; }

/* Stage colours — ONE source of truth, mirrors setup/ux.py STAGE_INDICATOR + the Batch list indicator
   (kapdaa_desk.js), so a Lot's Stage reads the same colour on the Kanban, the list, and the kiosk grid. */
/* Stage-journey spectrum (D1, refined). A deliberate progression: WARM intake (orange → amber) → a smooth
   COOL processing ramp (cyan → sky → blue → indigo → violet) → GREEN output, with red reserved for On Hold.
   Each stage is a tint background + accent text pair; the accent is mirrored in kapdaa_desk.js STAGE_COLOR —
   keep the two in sync so a stage reads as ONE colour everywhere (badge · dot · chart · KPI). */
.gate-badge--received      { --st: var(--kui-stage-received); background: color-mix(in srgb, var(--kui-stage-received) 13%, var(--kui-panel)); color: var(--kui-stage-received); }   /* warm — raw intake */
.gate-badge--pre-sorting   { --st: var(--kui-stage-presorting); background: color-mix(in srgb, var(--kui-stage-presorting) 13%, var(--kui-panel)); color: var(--kui-stage-presorting); }   /* amber */
.gate-badge--quality-check { --st: var(--kui-stage-presorting); background: color-mix(in srgb, var(--kui-stage-presorting) 13%, var(--kui-panel)); color: var(--kui-stage-presorting); }   /* legacy value, kept for old data */
.gate-badge--pre-sort      { --st: var(--kui-stage-presorting); background: color-mix(in srgb, var(--kui-stage-presorting) 13%, var(--kui-panel)); color: var(--kui-stage-presorting); }   /* legacy */
.gate-badge--pre-sorted    { --st: var(--kui-stage-presorted); background: color-mix(in srgb, var(--kui-stage-presorted) 13%, var(--kui-panel)); color: var(--kui-stage-presorted); }   /* cyan — enters cool processing */
.gate-badge--sorting       { --st: var(--kui-stage-sorting); background: color-mix(in srgb, var(--kui-stage-sorting) 13%, var(--kui-panel)); color: var(--kui-stage-sorting); }   /* sky */
.gate-badge--sorted        { --st: var(--kui-stage-sorted); background: color-mix(in srgb, var(--kui-stage-sorted) 13%, var(--kui-panel)); color: var(--kui-stage-sorted); }   /* blue */
.gate-badge--tearing       { --st: var(--kui-stage-tearing); background: color-mix(in srgb, var(--kui-stage-tearing) 13%, var(--kui-panel)); color: var(--kui-stage-tearing); }   /* indigo */
.gate-badge--torn          { --st: var(--kui-stage-torn); background: color-mix(in srgb, var(--kui-stage-torn) 13%, var(--kui-panel)); color: var(--kui-stage-torn); }   /* indigo */
.gate-badge--blending      { --st: var(--kui-stage-blending); background: color-mix(in srgb, var(--kui-stage-blending) 13%, var(--kui-panel)); color: var(--kui-stage-blending); }   /* violet — transformation (was a pink outlier) */
.gate-badge--finished      { --st: var(--kui-stage-finished); background: color-mix(in srgb, var(--kui-stage-finished) 13%, var(--kui-panel)); color: var(--kui-stage-finished); }   /* green — output */
.gate-badge--dispatched    { --st: var(--kui-stage-dispatched); background: color-mix(in srgb, var(--kui-stage-dispatched) 13%, var(--kui-panel)); color: var(--kui-stage-dispatched); }   /* slate — left site */
.gate-badge--sold          { --st: var(--kui-stage-sold); background: color-mix(in srgb, var(--kui-stage-sold) 13%, var(--kui-panel)); color: var(--kui-stage-sold); }   /* emerald — value realised */
.gate-badge--on-hold       { --st: var(--kui-stage-onhold); background: color-mix(in srgb, var(--kui-stage-onhold) 13%, var(--kui-panel)); color: var(--kui-stage-onhold); }   /* red — exception */
.gate-badge--disposed      { --st: var(--kui-stage-disposed); background: color-mix(in srgb, var(--kui-stage-disposed) 13%, var(--kui-panel)); color: var(--kui-stage-disposed); }   /* muted slate — terminal */

/* Mobile (phone) — kiosks are used on hand-held devices at the gate / on the floor. Stack the weigh
   columns, full-width video/preview, bigger touch targets. (Access from a phone on the LAN:
   http://<laptop-ip>:8080 — the native camera works over http via the file-input "capture".) */
@media (max-width: 600px) {
    .gate-grid { grid-template-columns: 1fr; gap: 10px; }   /* single column reads cleaner on a phone */
    .gate-weigh { flex-direction: column; gap: 12px; }
    .gate-weigh-col { width: 100%; }
    #gp-video, #st-video, #gp-preview, #st-preview { width: 100%; height: auto; }
    .gate-btn, .gate-photo-btn { min-height: 44px; }   /* comfortable tap targets */
    .gate-card { min-height: 88px; }
}

/* Material Passport — header + vertical journey timeline (reuses the stage colours above). */
/* 2-column hero (R2-3): identity + facts flex on the left, QR panel fixed on the right. */
/* ── Material Passport — MIGRATED onto the KUI (warm) token system (design-uplift Phase 3). Client-facing
   traceability view; mixed slate/kap-grey/semantic/raw-hex palette → unified --kui-* tokens. Journey-timeline
   stage dots keep kapdaa.stageColor (set inline). ── */
.mp-hero { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start;
    background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 18px 20px; margin-bottom: 12px;
    box-shadow: var(--kui-e1); }
.mp-hero-id { min-width: 0; }
/* Identity hierarchy (design standard §4): client leads (loud eyebrow), then the mono id. */
.mp-hero-client { font-size: var(--kui-fs-base); font-weight: 700; letter-spacing: .2px; color: var(--kui-ink); margin-bottom: 3px; }
.mp-lot { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-2xl); font-weight: 750;
    letter-spacing: -.01em; color: var(--kui-ink); line-height: 1.15; word-break: break-word; }
.mp-tag { font-size: var(--kui-fs-xs); font-weight: 700; background: var(--kui-ink); color: var(--kui-bg); border-radius: 6px;
    padding: 2px 7px; vertical-align: middle; margin-left: 8px; letter-spacing: .04em; }
.mp-sub { color: var(--kui-text-soft); margin-top: 4px; font-size: 14px; }
.mp-hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 13px; }
.mp-fact { font-size: 13px; color: var(--kui-ink); display: inline-flex; align-items: baseline; gap: 6px; }
.mp-fact em { font-style: normal; color: var(--kui-text-soft); font-size: var(--kui-fs-sm); font-weight: 700; }
.mp-hero-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto; }

.mp-locs { color: var(--kui-text-soft); font-size: 13px; margin: 8px 2px 12px; }
.mp-qr { width: 104px; height: 104px; border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 5px; background: #fff; }

/* Client → Lot → Fate: breadcrumb, upstream lineage trail, downstream family tree */

.mp-transformed { color: var(--kui-warn); font-weight: 600; font-style: italic; cursor: help; }
.mp-crumb { font-size: 13px; margin: 4px 2px 12px; color: var(--kui-text-soft); }

.mp-crumb-sep { color: var(--kui-line-strong); }
/* Browse entry (R2-3 tail): the Clients heading + "Browse all lots by stage" sit on one toolbar row (title
   left, alt-view right) instead of stacking; the section title's "— pick one" is a quiet hint. */
.mp-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin: 2px 2px 12px; }
.mp-browse-head .gate-section-title { margin: 0; }
.mp-browse-hint { font-weight: 400; color: var(--kui-text-soft); text-transform: none; letter-spacing: 0; }

/* Browse split rows + lot preview peek (TL-2 — shared list + side-peek via kapdaa.splitView). The list row is
   compact (id · stage · qty); the peek is an instant summary from the row data with one "Open full passport". */
.mp-lr1 { display: flex; align-items: center; gap: 8px; }
.mp-lr-id { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; font-size: 13px; color: var(--kui-ink); }
.mp-lr2 { font-size: 12px; color: var(--kui-text-soft); margin-top: 3px; }

/* Client cards: a client is a human org — its NAME reads loud (sans, not the monospace lot-id font), with an
   avatar initial and a chevron so the card is an obvious "open" affordance. */
.mp-client-card { padding-right: 14px; }
.mp-client-top { display: flex; align-items: center; gap: 10px; }
.mp-client-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--kui-panel-2); color: var(--kui-text); font-weight: 700; font-size: 14px; }
.mp-client-name { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--kui-fs-lg); line-height: 1.2;
    color: var(--kui-ink); overflow-wrap: anywhere; }
.mp-client-go { flex: none; color: var(--kui-line-strong); transition: color var(--kui-t-fast), transform var(--kui-t-fast); }
.mp-client-card:hover .mp-client-go { color: var(--kui-text-soft); transform: translateX(2px); }
.mp-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 6px;
    background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 8px; padding: 8px 10px; }
.mp-trail-node { font-size: 13px; }
.mp-trail-client { font-weight: 700; color: var(--kui-ink); }
.mp-trail-booking { color: var(--kui-text-soft); }
.mp-trail-lot { color: var(--kui-info); cursor: pointer; }
.mp-trail-lot:hover { text-decoration: underline; }
.mp-trail-here { font-weight: 700; color: var(--kui-ink); }
/* Family tree — branch connectors + a card per node, so the lot→bales hierarchy reads at a glance */
.mp-tree { list-style: none; margin: 6px 0 0; padding-left: 22px; }
.mp-tree-root { padding-left: 2px; }
.mp-tree-node { position: relative; padding: 6px 0 0 18px; }
.mp-tree-node::before {           /* elbow connector to the parent */
    content: ""; position: absolute; left: 0; top: 0; bottom: 50%; width: 12px;
    border-left: 2px solid var(--kui-line-strong); border-bottom: 2px solid var(--kui-line-strong);
    border-bottom-left-radius: 8px; }
.mp-tree-node::after {            /* vertical line continuing to the next sibling */
    content: ""; position: absolute; left: 0; top: 0; bottom: -6px; border-left: 2px solid var(--kui-line-strong); }
.mp-tree-node:last-child::after { display: none; }
.mp-tree-root > .mp-tree-node { padding-left: 0; }
.mp-tree-root > .mp-tree-node::before, .mp-tree-root > .mp-tree-node::after { display: none; }
.mp-tree-card { display: inline-block; min-width: 260px; background: var(--kui-panel); border: 1px solid var(--kui-line);
    border-radius: var(--kui-r-lg); padding: 8px 12px; cursor: pointer; transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast); }
.mp-tree-card:hover { border-color: var(--kui-line-strong); box-shadow: var(--kui-e2); }
.mp-tree-card:focus-visible { outline: 2px solid var(--kui-info); outline-offset: 2px; }
.mp-tree-row1 { display: flex; align-items: center; gap: 10px; }
.mp-tree-id { font-weight: 700; font-size: 13px; color: var(--kui-ink); }
.mp-tree-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
.mp-tree-chip { font-size: 11px; font-weight: 600; color: var(--kui-text); background: var(--kui-panel-2);
    border-radius: 999px; padding: 1px 8px; }
.mp-tree-meta { color: var(--kui-text-soft); font-size: 12px; }
.mp-tree-sum { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--kui-text-soft); }

.mp-timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.mp-step { display: flex; gap: 14px; padding: 0 0 18px 2px; position: relative; }
.mp-step:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 30px; bottom: 0;
    width: 2px; background: var(--kui-line); }

.mp-step-date { color: var(--kui-text-soft); font-size: 12px; margin-top: 1px; }

/* Production Control board — manager dispatch (3 line columns). Compact, dense, mouse-driven (NOT a kiosk:
   the dispatch action is a small secondary button, not the full-width black touch slab). */
.pc-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.pc-work .pc-runs { margin: 0 0 24px; padding: 0 0 16px; border-bottom: 1px solid var(--border-color); }
.pc-runs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pc-runs-head h2 { margin: 0 auto 0 0; }
.pc-runs button { min-height: 48px; min-width: 48px; }
.pc-run-row { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr) minmax(130px, 1fr) minmax(130px, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.pc-run-row > * { min-width: 0; overflow-wrap: anywhere; color: var(--kui-ink); }
.pc-run-open { border: 0; background: transparent; padding: 8px 0; text-align: left; font-weight: 600; text-decoration: underline; }
.pc-run-time, .pc-run-state, .pc-run-path, .pc-run-footer { font-size: 13px; }
.pc-run-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; color: var(--kui-ink); }
.pc-run-footer > span:first-child { margin-right: auto; }
.pc-run-detail { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: 8px 16px; }
.pc-run-detail dt, .pc-run-detail dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pc-run-detail, .pc-run-evidence { color: var(--kui-ink); }
.pc-run-dialog .modal-header button { min-width: 48px; min-height: 48px; }
.pc-run-evidence summary { min-height: 48px; padding: 12px 0; cursor: pointer; }
@media (max-width: 767px) {
    .pc-runs-head h2 { flex-basis: 100%; }
    .pc-run-row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; }
    .pc-run-detail { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .pc-run-detail dd { margin-bottom: 8px; }
}
.pc-work .pc-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc-work [hidden] { display: none !important; }
.pc-view-tabs { margin-bottom: 16px; }   /* the kit's tabs (.kui-tabs) */
.pc-queue-heading { margin: 0 0 16px; }
.pc-work .pc-dayplan:not([hidden]) { margin-top: 0; }
.pc-work .pc-exceptions:first-child { padding-top: 0; }
.pc-work a.pc-ref { display: inline-flex; align-items: center; min-height: 48px; text-decoration: underline; }
.pc-work .pc-col { min-width: 0; background: transparent; border: 0; border-radius: 0; padding: 0; }
.pc-work .pc-card { border-radius: 6px; box-shadow: none; }
.pc-work .pc-card-top { flex-wrap: wrap; }
.pc-work .pc-ref, .pc-work .pc-meta, .pc-work .pc-mat { min-width: 0; overflow-wrap: anywhere; }
.pc-work .pc-send, .pc-work .pc-line-select { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
/* the site and run order are context, not content: compact controls on one row */
.page-form.pc-context-bar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 300px));
    gap: 16px;
    padding: 16px 0;
    margin: 0;
    background: transparent;
}
.page-form.pc-context-bar .frappe-control {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.pc-context-bar .pc-context-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--kui-ink);
}
.pc-context-bar select.form-control {
    height: 48px;
    min-height: 48px;
    padding: 10px 32px 10px 12px;
    font-size: 14px;
}
.page-form.pc-context-bar .frappe-control[data-fieldtype="Select"] .select-icon.xs {
    top: auto;
    bottom: 18px;
    right: 12px;
    height: 12px;
}
@media (max-width: 767.98px) {
    .page-form.pc-context-bar { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
.pc-work .pc-dayplan { margin-top: 24px; }
.pc-work .pc-dayplan .kui-section { border: 0; border-radius: 0; background: transparent; }
.pc-work .pc-dayplan .kui-section__body { padding-left: 0; padding-right: 0; }
.pc-work .bs-dp { min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 8px 0; }
.pc-work .bs-dp-lot { grid-template-columns: 20px minmax(0, 1fr) auto; }
.pc-work .bs-dp-lotact { grid-column: 2 / -1; }
.pc-plan-work { grid-column: 2 / -1; min-width: 0; display: grid; gap: 8px; }
.pc-plan-order { overflow-wrap: anywhere; font-size: 12px; color: var(--kui-ink); }
.pc-prepare-order { min-height: 44px; white-space: normal; }
.pc-work-details { display: grid; grid-template-columns: minmax(100px, .7fr) minmax(0, 1fr); gap: 12px 16px; }
.pc-work-details dt, .pc-work-details dd { margin: 0; overflow-wrap: anywhere; }
.pc-completion-evidence { overflow-wrap: anywhere; }
.pc-completion-evidence > div { padding: 12px 0; border-bottom: 1px solid var(--border-color); }
.pc-completion-evidence p { margin: 6px 0 0; }
.mq-input-check { margin-bottom: 16px; }
.mq-input-controls { display: flex; gap: 8px; }
.mq-input-controls input { min-width: 0; flex: 1; min-height: 44px; border: 1px solid var(--border-color); border-radius: 4px; padding: 8px; background: var(--control-bg); color: var(--text-color); }
.mq-input-controls button { min-height: 44px; }
.mq-input-check [role="status"] { margin: 8px 0; overflow-wrap: anywhere; }
.mq-placement { margin-bottom: 16px; }
.mq-placement > label { max-width: 100%; overflow-wrap: anywhere; }
.mq-placement > button { min-height: 44px; margin-top: 8px; max-width: 100%; white-space: normal; }
.mq-placement [role="status"], .mq-placement-receipt { margin: 8px 0; overflow-wrap: anywhere; }
.mq-execution { margin: 0 0 20px; padding: 0 0 16px; border-bottom: 1px solid var(--border-color); }
.mq-execution h3 { font-size: 16px; margin: 0 0 12px; }
.mq-execution h4 { font-size: 14px; margin: 16px 0 12px; }
.mq-execution p, .mq-output-receipt { overflow-wrap: anywhere; }
.mq-execution button { min-height: 44px; max-width: 100%; white-space: normal; margin: 4px 8px 4px 0; }
.mq-execution-refresh, .mq-output-add, .mq-output-remove { width: 44px; flex: none; }
.mq-output-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, .5fr) 44px; gap: 8px; align-items: end; margin-bottom: 12px; }
.mq-output-row button { margin: 0; }
.mq-execution label { display: block; min-width: 0; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.mq-execution input, .mq-execution textarea { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 6px; padding: 8px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--control-bg); color: var(--text-color); }
.mq-mass-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.mq-reconciliation-note { margin-bottom: 12px !important; }
.mq-execution [role="status"]:empty { display: none; }
.pc-work.pc-planning-only .bs-dp-board { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.pc-work .bs-dp-reason { grid-column: 2 / -1; min-width: 0; overflow-wrap: anywhere; color: var(--kui-ink); font-size: 12px; }
.pc-work .bs-dp-lotid { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.pc-work .bs-dp-status, .pc-work .bs-dp-basissel, .pc-work .bs-dp-lotst,
.pc-work .bs-dp-seq { color: var(--kui-ink); }
.pc-work .pc-card .pc-next-label, .pc-work .pc-card .pc-rank,
.pc-work .pc-card .pc-wait, .pc-work .bs-dp-line { color: var(--kui-ink); }
.pc-work .pc-meta, .pc-work .bs-dp-empty { color: var(--kui-ink); }
.pc-work .pc-stock-total { color: var(--kui-ink); font-size: 13px; padding: 4px 0 8px; overflow-wrap: anywhere; }
.pc-work .pc-queue-pager { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pc-work .pc-queue-pager span { flex: 1; min-width: 0; color: var(--kui-ink); }
.pc-work .pc-queue-pager button { width: 48px; height: 48px; flex: none; padding: 0; }
.pc-work .pc-next-label, .pc-work .pc-tag { letter-spacing: 0; }
@media (max-width: 900px) {
    .pc-work .pc-board { grid-template-columns: minmax(0, 1fr); }
    .pc-work select[data-fieldname] { min-height: 48px; }
    .pc-work .pc-send, .pc-work .pc-line-select, .pc-work .bs-mini, .pc-work .bs-nav,
    .pc-work .bs-dp-basissel { min-height: 48px; }
    .pc-work .bs-mini, .pc-work .bs-nav { min-width: 48px; }
    .pc-work .bs-dp-board { grid-template-columns: minmax(0, 1fr); }
    .pc-work .bs-dp-lot { flex-wrap: wrap; }
}
.pc-col { background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 12px 12px 4px; }
.pc-col-head { display: flex; justify-content: space-between; align-items: center; gap: 8px 10px;
    flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--kui-line); }
.pc-col-name { font-weight: 700; font-size: var(--kui-fs-lg); color: var(--kui-ink); }
.pc-pills { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
/* Phone: name on its own line, the open-link + count pills wrap onto the next — never overlap. */
@media (max-width: 640px) {
    .pc-col-name { flex: 1 0 100%; }
    .pc-pills { width: 100%; }
}
/* the one pill (shape in "ONE LOOK" below): ink on a quiet panel; amber only while lots wait (above zero) */
.pc-pill { background: var(--kui-panel); color: var(--kui-text); border: 1px solid var(--kui-line); }
.pc-pill--wait { background: var(--kui-warn-tint); color: var(--kui-warn); border-color: transparent; }
/* Counts that link into the native Batch list — signal they're clickable without shouting. */
a.pc-list-link { cursor: pointer; text-decoration: none; transition: filter var(--kui-t-fast); }
a.pc-list-link:hover { filter: brightness(.95); text-decoration: none; }
.pc-open-line { font-size: 11px; font-weight: 600; color: var(--kui-accent); cursor: pointer; white-space: nowrap;
	text-decoration: none; padding: 2px 4px; border-radius: 6px; }
.pc-open-line:hover { background: var(--kui-accent-soft); color: var(--kui-accent); text-decoration: none; }

/* Yard Board (design polish) — a SPATIAL view: parking bays + unloading docks with truck/dock icons and live
   occupancy, beside the single-file weighbridge queue + an at-a-glance strip. */
.yard-bridge { display: flex; align-items: center; gap: 11px; background: var(--kui-panel-2); border: 1px dashed var(--kui-line-strong);
	border-radius: 12px; padding: 12px 15px; margin: 4px 0 18px; font-size: var(--kui-fs-base); color: var(--kui-ink); }
.yard-bridge svg { color: var(--kui-accent); flex: none; }
.yard-bridge b { font-weight: 700; } .yard-bridge-sub { color: var(--kui-text); }
.yard-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: stretch; }
.yard-col-main { display: flex; flex-direction: column; }
@media (max-width: 820px) { .yard-cols { grid-template-columns: 1fr; } .yard-queue { max-height: none; } }
.yard-zone-h { display: flex; align-items: center; gap: 8px; font-size: 11px;
	font-weight: 700; color: var(--kui-text-soft); margin: 0 0 10px; }
.yard-zone-h.mt { margin-top: 18px; }
.yard-zone-h svg { color: var(--kui-text-soft); }
.yard-zone-h .c { margin-left: auto; color: var(--kui-text); font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; letter-spacing: 0; }
.yard-bays { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.yard-bay { text-align: left; border-radius: 12px; padding: 11px 13px; min-height: 92px; border: 1px solid var(--kui-line);
	display: flex; flex-direction: column; gap: 4px; font: inherit; background: var(--kui-panel); }
.yard-bay-name { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--kui-text-soft); }
.yard-bay--free { border-style: dashed; }
.yard-bay--free .yard-bay-state { margin-top: auto; font-size: 12px; font-weight: 600; color: var(--kui-text-soft); display: flex; align-items: center; gap: 5px; }
.yard-bay--busy { cursor: pointer; box-shadow: var(--kui-e1); transition: box-shadow var(--kui-t-fast), transform var(--kui-t-fast); }
.yard-bay--busy:hover { box-shadow: var(--kui-e2); transform: translateY(-1px); }
.yard-bay--park { background: linear-gradient(180deg, color-mix(in srgb,var(--kui-info) 9%,var(--kui-panel)), var(--kui-panel)); border-color: color-mix(in srgb,var(--kui-info) 30%,var(--kui-line)); }
.yard-bay--park .yard-bay-truck { color: var(--kui-info); }
.yard-bay--dock { background: linear-gradient(180deg, color-mix(in srgb,var(--kui-good) 9%,var(--kui-panel)), var(--kui-panel)); border-color: color-mix(in srgb,var(--kui-good) 30%,var(--kui-line)); }
.yard-bay--dock .yard-bay-truck { color: var(--kui-good); }
.yard-bay-top { display: flex; align-items: center; gap: 7px; }
.yard-bay-client { font-weight: 650; font-size: 13px; color: var(--kui-ink); }
.yard-bay-lot { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; color: var(--kui-text); }
.yard-bay-since { margin-top: auto; font-size: 11px; color: var(--kui-warn); font-weight: 600; display: flex; align-items: center; gap: 4px; font-family: var(--font-mono, ui-monospace, monospace); }
/* The queue is the long content; bound it so a busy yard doesn't push the whole page into a long scroll —
   it scrolls inside its own panel instead, keeping the yard map + glance in view. */
.yard-queue { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 300px); min-height: 240px; overflow-y: auto; padding-right: 4px; }
.yard-q-row { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; cursor: pointer;
	background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 7px 11px; }
.yard-q-row:hover { border-color: var(--kui-line-strong); box-shadow: var(--kui-e1); }
.yard-q-row--next { border-color: var(--kui-accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--kui-accent) 18%,transparent); }
.yard-q-seq { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: var(--kui-accent); color: var(--kui-accent-ink);
	font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono, ui-monospace, monospace); }
.yard-q-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.yard-q-lot { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 650; color: var(--kui-ink); }
.yard-q-client { font-size: var(--kui-fs-sm); color: var(--kui-text); }
.yard-due { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.yard-due--in { background: var(--kui-warn-tint); color: var(--kui-warn); }
.yard-due--out { background: var(--kui-info-tint); color: var(--kui-info); }
.yard-q-empty { text-align: center; color: var(--kui-text-soft); font-size: 13px; padding: 22px; border: 1px dashed var(--kui-line-strong);
	border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.yard-glance { margin-top: auto; padding: 14px 16px; border: 1px dashed var(--kui-line-strong); border-radius: 12px; background: var(--kui-panel-2); }
.yard-glance-h { font-size: 11px; font-weight: 700; color: var(--kui-text-soft); margin-bottom: 10px; }
.yard-glance-row { display: flex; gap: 20px; flex-wrap: wrap; }
.yard-glance-n { font-size: var(--kui-fs-xl); font-weight: 800; line-height: 1; color: var(--kui-ink); font-variant-numeric: tabular-nums; }
.yard-glance-l { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); font-weight: 600; margin-top: 4px; }

/* Storage Board (design polish) — a rack MAP: a header band + per-aisle fill bars, occupied racks carrying their
   lot + weight in journey colour, free racks receding, empty aisles collapsed to a slim dimmed row. */
.sb-head { display: flex; align-items: center; gap: 14px; padding: 15px 18px; margin: 4px 0 18px; border: 1px solid var(--kui-line);
	border-radius: var(--kui-r-lg); background: var(--kui-panel); box-shadow: var(--kui-e1); flex-wrap: wrap; }
.sb-head-ic { flex: none; width: 40px; height: 40px; border-radius: var(--kui-r-lg); background: var(--kui-accent); color: var(--kui-accent-ink); display: grid; place-items: center; }
.sb-head-txt { flex: 1; min-width: 180px; }
.sb-head-h { font-weight: 750; font-size: var(--kui-fs-lg); letter-spacing: -.01em; color: var(--kui-ink); }
.sb-head-sub { color: var(--kui-text); font-size: 13px; margin-top: 2px; }
.sb-head .sb-find { width: auto; margin-top: 0; margin-left: auto; flex: none; }
@media (max-width: 560px) { .sb-head .sb-find { width: 100%; margin-left: 0; } }
/* A spatial floor-plan, not a stacked list — the aisles sit side by side as columns (like looking down at the
   warehouse), each a vertical run of its bays. Fills the width AND the height, and reads like the real layout. */
#sb-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.sb-aisle { display: flex; flex-direction: column; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 11px 11px 12px; }
.sb-aisle--empty { background: transparent; }
.sb-aisle--empty .sb-aisle-name { color: var(--kui-text-soft); }
.sb-aisle--empty .sb-aisle-c { color: var(--kui-text-soft); }
.sb-aisle-h { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; }
.sb-aisle-name { font-weight: 700; font-size: 14px; color: var(--kui-ink); white-space: nowrap; }
.sb-aisle-fill { flex: 1; height: 6px; border-radius: var(--kui-r-sm); background: var(--kui-panel-2); overflow: hidden; }
.sb-aisle-fill i { display: block; height: 100%; background: var(--kui-accent); border-radius: var(--kui-r-sm); }
.sb-aisle-c { font-size: var(--kui-fs-sm); color: var(--kui-text); font-family: var(--font-mono, ui-monospace, monospace); white-space: nowrap; }
.sb-racks { display: flex; flex-direction: column; gap: 7px; }
.sb-rack { text-align: left; border-radius: var(--kui-r-lg); padding: 8px 11px; min-height: 58px; border: 1px solid var(--kui-line); background: var(--kui-panel);
	display: flex; flex-direction: column; gap: 3px; font: inherit; background: var(--kui-panel); }
.sb-rack-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--kui-text-soft); }
.sb-rack--free { border-style: dashed; min-height: 46px; flex-direction: row; align-items: center; justify-content: space-between; }
.sb-rack--free .sb-rack-freelbl { margin-top: 0; font-size: 11px; font-weight: 600; color: var(--kui-text-soft); display: flex; align-items: center; gap: 5px; }
.sb-rack--busy { cursor: pointer; box-shadow: var(--kui-e1); border-left: 3px solid var(--stg, var(--kui-line-strong));
	background: linear-gradient(180deg, color-mix(in srgb, var(--stg, var(--kui-line-strong)) 9%, var(--kui-panel)), var(--kui-panel)); transition: box-shadow var(--kui-t-fast), transform var(--kui-t-fast); }
.sb-rack--busy:hover { box-shadow: var(--kui-e2); transform: translateY(-1px); }
.sb-rack-lot { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-sm); font-weight: 650; color: var(--kui-ink); line-height: 1.25; }
.sb-rack-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--kui-text); }
.sb-rack-foot b { color: var(--stg, var(--kui-ink)); font-weight: 700; }
.sb-rack-stage { color: var(--stg, var(--kui-text)); font-weight: 600; }
.pc-list { max-height: calc(100vh - 230px); overflow-y: auto; padding-right: 2px; }
.pc-card { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 10px 12px;
    margin-bottom: 8px; transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast); }
.pc-card:hover { border-color: var(--kui-line-strong); box-shadow: var(--kui-e1); }
.pc-card--running { background: var(--kui-panel-2); }
/* #1 in the sequenced run queue — the HERO "run next" card: elevated, labelled, its Send is the loud primary,
   so the eye lands on what to run next before the ranked list below it. */
.pc-card--next { border-color: color-mix(in srgb, var(--kui-good) 45%, transparent); border-width: 1.5px; box-shadow: var(--kui-e2);
    background: var(--kui-good-tint); padding: 12px 13px; }
.pc-next-label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--kui-fs-sm); font-weight: 800; color: var(--kui-good); margin-bottom: 7px; }
.pc-next-label svg { width: 12px; height: 12px; }
.pc-card--next .pc-ref { font-size: var(--kui-fs-lg); }
.pc-card--next .pc-send { padding: 9px 14px; font-size: 13px; }
.pc-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pc-rank { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--kui-text-soft); background: var(--kui-panel-2);
    border-radius: 6px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.pc-card--next .pc-rank { color: var(--kui-good); background: var(--kui-good-tint); }
/* One-tap send (single line for the stage) → the button owns the row as the clear primary. */
.pc-assign > .pc-send:only-child { flex: 1 1 auto; text-align: center; }
/* Time waited at this stage — grey while fresh, amber past the WIP warn threshold, red past the alert threshold. */
.pc-wait { margin-left: auto; flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 1px 7px;
    border-radius: 999px; font-variant-numeric: tabular-nums; background: var(--kui-panel-2); color: var(--kui-text-soft); }
.pc-wait--warn { background: var(--kui-warn-tint); color: var(--kui-warn); }
.pc-wait--alert { background: var(--kui-alert-tint); color: var(--kui-alert); }
.pc-ref { font-weight: 700; font-size: 14px; color: var(--kui-ink); }
/* Shared lot/bale CODE treatment (P2e) — every board's id reads the SAME: monospace + tabular figures (a
   machine code, quieter than the human client/material line next to it) and it breaks only at the id's own
   hyphens, never mid-token — so long ids no longer shatter across three lines and dominate a card head. */
.pc-ref, .gate-card-ref, .st-bcard-ref, .mq-card .pc-ref, .kap-code {
    font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
    font-variant-numeric: tabular-nums; letter-spacing: 0; word-break: normal; overflow-wrap: normal; }
.pc-tag { font-size: var(--kui-fs-xs); font-weight: 600;
    background: var(--kui-panel-2); color: var(--kui-text); padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.pc-mat { color: var(--kui-text); font-size: 13px; margin-top: 2px; }
.pc-meta { color: var(--kui-text-soft); font-size: 12px; margin-top: 1px; }
.pc-assign { display: flex; gap: 6px; align-items: center; margin-top: 10px;
    padding-top: 9px; border-top: 1px dashed var(--kui-line); }
.pc-assign-label { font-size: 11px; color: var(--kui-text-soft); flex-shrink: 0; }
.pc-line-select { flex: 1; min-width: 0; border: 1px solid var(--kui-line-strong); border-radius: var(--kui-r); padding: 5px 8px;
    font-size: 12px; background: var(--kui-panel); color: var(--kui-ink); }
.pc-send { flex-shrink: 0; white-space: nowrap; border: 0; border-radius: var(--kui-r); padding: 6px 12px;
    font-size: 12px; font-weight: 600; background: var(--kui-accent); color: var(--kui-accent-ink); cursor: pointer;
    transition: filter var(--kui-t-fast); }
.pc-send:hover { filter: brightness(1.08); }
.pc-send:disabled { background: var(--kui-line-strong); color: var(--kui-text-soft); cursor: default; filter: none; }
.pc-sub { font-size: 11px; color: var(--kui-text-soft);
    margin: 10px 2px 8px; font-weight: 600; }
.pc-note { background: var(--kui-warn-tint); color: var(--kui-warn); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
    font-size: 13px; }
@media (max-width: 900px) { .pc-board { grid-template-columns: 1fr; } .pc-list { max-height: none; } }

/* My Queue — an operator's personal work list (reuses .pc-card et al.) */
.mq-list { max-height: none; }

.mq-actions { display: flex; gap: 8px; align-items: center; margin-top: 11px; padding-top: 10px;
    border-top: 1px dashed var(--kui-line); }
.mq-mat-ic { color: var(--slate-400); margin-right: 5px; display: inline-flex; vertical-align: -2px; }
/* Who assigned this + which stage/area it's at (R2-7) */
.mq-by { font-size: 12px; color: var(--tx-soft); margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mq-by svg { width: 13px; height: 13px; color: var(--tx-faint); flex: 0 0 auto; }
.mq-by b { color: var(--tx-strong); font-weight: 650; }

.mq-go:disabled, .mq-done:disabled { opacity: .6; cursor: default; }

/* ============================================================
   LINE COCKPIT (D2 reference component) — per-line live board.
   Continuous "sensor" values (throughput, buffer, pulse) are a SIMULATED IoT preview (HW5) over real
   capacity/efficiency data. Built entirely on the D1 tokens. Icons are inline SVG (sized by their container).
   ============================================================ */
.lck-card svg, .lck-summary svg, .lck-machines svg, .lck-gauge svg, .lck-foot svg { width: 15px; height: 15px;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

.lck-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 16px; }
.lck-sum-live { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--tx-strong); }
.lck-sum-live .lck-sim { color: var(--tx-soft); font-weight: 500; letter-spacing: 0; }
.lck-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--go); box-shadow: 0 0 0 0 rgba(22,163,74,.5);
    animation: lck-pulse 2s infinite; }
@keyframes lck-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
@keyframes lck-pulse-r { 0% { box-shadow: 0 0 0 0 rgba(185,28,28,.55); } 70% { box-shadow: 0 0 0 7px rgba(185,28,28,0); } 100% { box-shadow: 0 0 0 0 rgba(185,28,28,0); } }
.lck-sum-stats { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.lck-stat { display: flex; flex-direction: column; }
.lck-stat-v { font-size: var(--kui-fs-xl); font-weight: 800; color: var(--tx-strong); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.lck-stat-l { font-size: 11px; color: var(--tx-soft); }
.lck-stat--bad .lck-stat-v { color: var(--alert); }

/* 4 fixed lines read best as a balanced 2×2 at desktop width (not a lopsided 3+1); a 400px min means 3 never
   fit at a typical width, so it packs 2-per-row, dropping to 1-col on a phone and 4-across only on an ultrawide. */
.lck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 14px; }
@media (max-width: 460px) { .lck-grid { grid-template-columns: 1fr; } }
.lck-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--kap-radius);
    padding: 15px 16px 14px; border-left: 4px solid var(--stage, var(--slate-400)); box-shadow: var(--kap-shadow);
    overflow: hidden; }
.lck-card.lck--bad { border-left-color: var(--alert); }
.lck-card.lck--warn { border-left-color: var(--warn); }
.lck-head { display: flex; align-items: center; gap: 9px; }
.lck-ico { width: 26px; height: 26px; border-radius: var(--kui-r); flex: none; display: grid; place-items: center;
    background: color-mix(in srgb, var(--stage, var(--slate-400)) 14%, transparent); color: var(--stage, var(--slate-500)); }
.lck--bad .lck-ico { background: var(--alert-tint); color: var(--alert); }
.lck-name { font-weight: 750; font-size: var(--kui-fs-lg); letter-spacing: -.01em; color: var(--tx-strong); }
.lck-live { margin-left: 2px; }
.lck-live-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lck-live-dot--ok { background: var(--go); animation: lck-pulse 2s infinite; }
.lck-live-dot--warn { background: var(--warn); }
.lck-live-dot--bad { background: var(--alert); animation: lck-pulse-r 1.1s infinite; }

/* Verdict-first (P2a): the ONE health line a supervisor reads before any metric. Calm when fed, loud when
   there's a problem — and, for a line down, the fix is one tap away. */
.lck-head .lck-live { margin-left: auto; }
.lck-verdict { display: flex; align-items: center; gap: 10px; margin: 11px 0 3px; padding: 9px 11px;
    border-radius: var(--kui-r-lg); background: var(--go-tint); }
.lck-verdict--warn { background: var(--warn-tint); }
.lck-verdict--bad { background: var(--alert-tint); }
.lck-vico { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--go-deep); }
.lck-verdict--warn .lck-vico { color: var(--warn); }
.lck-verdict--bad .lck-vico { color: var(--alert); }
.lck-vico svg { width: 18px; height: 18px; }
.lck-vtext { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lck-vhead { font-size: 14px; font-weight: 750; color: var(--go-deep); letter-spacing: -.01em; }
.lck-verdict--warn .lck-vhead { color: var(--warn); }
.lck-verdict--bad .lck-vhead { color: var(--alert); }
.lck-vdetail { font-size: 12px; color: var(--tx-soft); }
.lck-vact { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
    font-weight: 700; color: var(--alert); background: var(--panel); border: 1px solid var(--alert); border-radius: 8px;
    padding: 7px 11px; min-height: 34px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.lck-vact:hover { background: var(--alert); color: #fff; }
.lck-vact svg { width: 13px; height: 13px; }
@media (max-width: 640px) { .lck-vact { min-height: 40px; } }
.lck-runway { font-size: 11px; color: var(--tx-soft); font-family: var(--font-mono, ui-monospace, monospace); flex: none; }

.lck-machines { display: flex; align-items: center; gap: 6px; margin: 9px 0 12px; font-size: 12px; color: var(--tx-soft); }
.lck-mico { color: var(--slate-400); display: inline-flex; }
.lck-mdot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.lck-mdot--up { background: var(--go); }
.lck-mdot--down { background: var(--alert); animation: lck-blink 1s steps(2) infinite; }
@keyframes lck-blink { 50% { opacity: .3; } }
.lck-machines .lck-runway { margin-left: auto; }

.lck-gauge-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.lck-gauge-lbl { font-size: 12px; font-weight: 600; color: var(--tx); display: inline-flex; align-items: center; gap: 5px; }
.lck-gico { color: var(--tx-soft); display: inline-flex; }
.lck-kgph { font-size: 11px; color: var(--tx-soft); }
.lck-kgph b { font-size: 16px; font-weight: 800; color: var(--tx-strong); font-variant-numeric: tabular-nums; }
.lck-bar { height: 12px; border-radius: 999px; background: var(--slate-100); overflow: hidden; position: relative; }
.lck-bar-fill { height: 100%; border-radius: 999px; width: 0;
    background: linear-gradient(90deg, var(--stage, var(--slate-400)), color-mix(in srgb, var(--stage, var(--slate-400)) 65%, #fff));
    transition: width .9s cubic-bezier(.4,0,.2,1); position: relative; }
.lck--bad .lck-bar-fill { background: var(--slate-300); }
.lck-flow .lck-bar-fill::after { content: ""; position: absolute; inset: 0; background-size: 40px 100%;
    background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: lck-flow 1.1s linear infinite; }
@keyframes lck-flow { 0% { background-position: -40px 0; } 100% { background-position: 120px 0; } }
.lck-bar-over { position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--alert); opacity: 0; transition: opacity .3s; }
.lck-online { font-size: 11px; color: var(--tx-soft); font-weight: 500; margin-left: 3px; }
/* Idle line — material isn't on it, so the gauge sits still and greyed (only ACTIVE lines animate). */
.lck-card.lck-idle .lck-bar-fill { background: var(--slate-300); }
.lck-card.lck-idle .lck-kgph b, .lck-card.lck-idle .lck-ico { color: var(--tx-soft); }
.lck-card.lck-idle .lck-ico { opacity: .65; }

.lck-metrics { display: flex; gap: 14px; margin: 13px 0 12px; align-items: flex-end; }
.lck-metric { display: flex; flex-direction: column; }
.lck-mv { font-size: 16px; font-weight: 750; color: var(--tx-strong); font-variant-numeric: tabular-nums; }
.lck-ml { font-size: var(--kui-fs-sm); color: var(--tx-soft); letter-spacing: .02em; display: inline-flex; align-items: center; gap: 4px; }
.lck-buf { margin-left: auto; flex-direction: row; align-items: flex-end; gap: 7px; }
.lck-buf-track { width: 12px; height: 34px; border-radius: 4px; background: var(--slate-100); overflow: hidden; display: flex; align-items: flex-end; }
.lck-buf-fill { width: 100%; height: 0; background: color-mix(in srgb, var(--stage, var(--slate-400)) 55%, transparent); transition: height .9s var(--kui-ease); }
.lck-bico { display: inline-flex; }
.lck-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 11px; border-top: 1px dashed var(--line-soft); }
.lck-load { font-size: 12px; color: var(--tx-soft); display: inline-flex; align-items: center; gap: 6px; }
.lck-open { font-size: var(--kui-fs-md); font-weight: 700; color: var(--go-deep); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.lck-open:hover { gap: 8px; text-decoration: none; color: var(--go-deep); }

/* ── Line Cockpit: expandable LIVE MACHINE DETAIL (R2-4) ── the per-machine sensor readout, lazy-mounted ── */
.lck-detail { margin-top: 10px; border-top: 1px dashed var(--line-soft); }
.lck-detail > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    padding: 10px 0 2px; font-size: var(--kui-fs-md); font-weight: 700; color: var(--tx-soft); user-select: none; }
.lck-detail > summary::-webkit-details-marker { display: none; }
.lck-detail > summary svg { width: 14px; height: 14px; }
.lck-detail-chev { margin-left: auto; width: 7px; height: 7px; border-right: 2px solid var(--tx-soft);
    border-bottom: 2px solid var(--tx-soft); transform: rotate(45deg); transition: transform var(--kui-t); }
.lck-detail[open] > summary .lck-detail-chev { transform: rotate(-135deg); }
.lck-detail-body { padding-top: 8px; }

.tlm-panel { background: var(--panel-2, var(--slate-50)); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.tlm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--kui-fs-md); color: var(--tx-strong); margin-bottom: 11px; }
.tlm-head svg { width: 14px; height: 14px; }
.tlm-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--go); animation: lck-pulse 2s infinite; flex: 0 0 auto; }

.tlm-sim { font-family: var(--font-mono, monospace); font-size: var(--kui-fs-sm); color: var(--tx-faint); background: var(--slate-100); padding: 1px 7px; border-radius: 999px; }
.tlm-gauge { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--tx-strong); font-variant-numeric: tabular-nums; }
.tlm-gauge .tlm-cap { color: var(--tx-soft); font-weight: 500; }
.tlm-machines { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.tlm-m { border: 1px solid var(--line); border-radius: var(--kui-r-lg); padding: 9px 11px; background: var(--panel); }
.tlm-m--down { opacity: .7; background: var(--alert-tint, #fdecec); border-color: #f0b3b3; }
.tlm-m.tlm-hot { border-color: color-mix(in srgb, var(--kui-alert) 35%, var(--kui-line)); }
.tlm-m-top { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.tlm-m-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlm-m-led { width: 8px; height: 8px; border-radius: 50%; background: var(--go); flex: 0 0 auto; box-shadow: 0 0 0 3px color-mix(in srgb, var(--go) 22%, transparent); }
.tlm-m--down .tlm-m-led { background: var(--alert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alert) 22%, transparent); }
.tlm-m-status { margin-left: auto; font-size: var(--kui-fs-sm); font-weight: 700; color: var(--tx-soft); }
.tlm-m--down .tlm-m-status { color: var(--alert); }
.tlm-m-load { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 11px; color: var(--tx-soft); font-variant-numeric: tabular-nums; }
.tlm-m-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--slate-100); overflow: hidden; }
.tlm-m-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--go), var(--warn)); border-radius: 4px; transition: width .5s var(--kui-ease); }
.tlm-hot .tlm-m-bar i { background: linear-gradient(90deg, var(--warn), var(--alert)); }
.tlm-m-comps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 10px; }
.tlm-comp { display: inline-flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--tx-strong); font-variant-numeric: tabular-nums; }
.tlm-comp svg { width: 12px; height: 12px; color: var(--tx-faint); align-self: center; flex: 0 0 auto; }
.tlm-comp i { font-style: normal; color: var(--tx-soft); font-size: var(--kui-fs-sm); }
.tlm-empty { font-size: 12px; color: var(--tx-soft); padding: 6px 0; }
/* CX-5: per-line telemetry — the line's role, and the Pre-Sort smart-bins view (kg/h contamination removed). */
.tlm-role { color: var(--tx-soft); font-weight: 500; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-sm); }
.tlm-yield { display: inline-flex; align-items: center; gap: 7px; font-size: var(--kui-fs-md); color: var(--tx-strong); margin-bottom: 10px; }
.tlm-yield svg { width: 14px; height: 14px; color: var(--go); }
.tlm-yield b { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 700; }
.tlm-bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.tlm-bin { border: 1px solid var(--line); border-radius: var(--kui-r); background: var(--panel); padding: 9px 11px; border-left: 3px solid var(--warn); }
.tlm-bin--haz { border-left-color: var(--alert); }
.tlm-bin-n { font-size: var(--kui-fs-sm); font-weight: 600; color: var(--tx-strong); }
.tlm-bin-v { font-family: var(--font-mono, ui-monospace, monospace); font-size: 16px; font-weight: 700; margin-top: 3px; color: var(--tx-strong); }
.tlm-bin-v i { font-style: normal; font-size: var(--kui-fs-sm); color: var(--tx-soft); font-weight: 500; }
.tlm-bin--haz .tlm-bin-v { color: var(--alert); }
@media (max-width: 640px) { .lck-grid { grid-template-columns: 1fr; } .lck-sum-stats { gap: 16px; } }
@media (prefers-reduced-motion: reduce) {
    .lck-pulse, .lck-live-dot, .lck-mdot--down, .lck-flow .lck-bar-fill::after { animation: none !important; }
    .lck-bar-fill, .lck-buf-fill { transition: none; }
}

/* Stage filter chips (station kiosk) */
.gate-chip { border: 1px solid var(--kui-line); background: var(--kui-panel); color: var(--kui-text); border-radius: 999px;
    padding: 5px 13px; font-size: 13px; cursor: pointer; transition: all var(--kui-t-fast); }
.gate-chip:hover { border-color: var(--kui-ink); }
.gate-chip.active { background: var(--kui-ink); color: var(--kui-bg); border-color: var(--kui-ink); font-weight: 600; }

/* --- Gatehouse 3-tab shell (B4): Expected + Register lenses on the gate crossing ledger ----------- */
/* Tab bar: filters/segment on the left, primary action on the right — same on desk + handheld. */
/* Left group (filters / count) then a right-aligned action group. The kiosk .gate-btn is full-width by default
   (phone flows) — in this desk header it must be a compact button pinned right, not a full-width slab. */

/* One colour language for crossing types (locked): in / out / staff / people / contractor / unknown. */

/* Expected cards reuse .gate-card; the action button sits full-width at the foot. */
.gate-exp-card { display: flex; flex-direction: column; }
.gate-exp-card .gate-exp-act { margin-top: 10px; width: 100%; justify-content: center; }

/* Live muster bar. */

/* Register table: header row + crossing rows; a proper aligned table on desk, stacked cards on phone. */
.gate-reg { display: flex; flex-direction: column; border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg);
    overflow: hidden; background: var(--kui-panel); }
.gate-reg-row { display: grid; grid-template-columns: 108px 1.1fr 1.4fr 64px 96px 92px; gap: 12px;
    align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--kui-line); font-size: 14px; }
.gate-reg-row:last-child { border-bottom: 0; }
.gate-reg-head { background: var(--kui-panel-2); font-size: 11px;
    color: var(--kui-text-2); font-weight: 700; }
.gate-reg-veh { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.gate-reg-t { font-variant-numeric: tabular-nums; }
.gate-reg-out { border: 1px solid var(--kui-line); background: var(--kui-panel); color: var(--kui-ink);
    border-radius: var(--kui-r); padding: 4px 10px; font-size: var(--kui-fs-md); font-weight: 600; cursor: pointer; }
.gate-reg-out:hover { border-color: var(--kui-ink); background: var(--kui-panel-2); }

@media (max-width: 720px) {
    .gate-reg-row { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 14px; }
    .gate-reg-head { display: none; }
    .gate-reg-veh { order: 2; text-align: right; }
    .gate-reg-t { order: 3; }
}

/* ===== At the gate — the live crossing (classify grid + context rail) — B4 Gatehouse redesign ===== */
/* 2-col: the crossing action fills the width; the context rail uses the right third. */

/* Leaving → goods: dispatch queue + the "or check a vehicle/person out" divider */

/* Context rail */

/* ===== Gatehouse 4-tab: Arrivals rail extras · Parking · Vehicle register ===== */
.gate-reg-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Arrivals rail — Book-a-visit affordance, parking mini, perimeter panel */

/* On-site breakdown chips (the muster, by type) */

/* Recent-crossings feed — fills the idle left column so the gate reads as a live dashboard */

.gate-panel-h { display: flex; align-items: center; gap: 8px; font-weight: 640; font-size: 13px; margin-bottom: 6px; }
.gate-panel-h svg { color: var(--kui-text-2); }

/* Parking donut + free readout (shared by the rail mini and the Parking tab) */

.gate-donut { --p: 0; width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: conic-gradient(var(--gc, var(--kui-good, #2d8a5e)) calc(var(--p) * 1%), var(--kui-line) 0); position: relative; }
.gate-donut::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--kui-panel); }
.gate-donut span { position: relative; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--kui-text); }

/* Parking tab: card + per-area capacity bars */
.gate-card { border: 1px solid var(--kui-line); border-radius: 12px; background: var(--kui-panel); overflow: hidden; }
.gate-card-h { display: flex; align-items: center; gap: 8px; padding: 12px 15px; border-bottom: 1px solid var(--kui-line);
    background: var(--kui-panel-2); font-weight: 660; font-size: 14px; }
.gate-card-h svg { width: 16px; height: 16px; }
.gate-card-c { margin-left: auto; font-size: var(--kui-fs-md); color: var(--kui-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.gate-zbar { display: grid; grid-template-columns: 120px 1fr 110px; gap: 12px; align-items: center; font-size: 13px; }
.gate-zn { color: var(--kui-text); font-weight: 600; }
.gate-zt { height: 9px; border-radius: var(--kui-r-pill); background: var(--kui-line); overflow: hidden; }
.gate-zt i { display: block; height: 100%; border-radius: var(--kui-r-pill); }
.gate-zc { text-align: right; color: var(--kui-text-2); font-variant-numeric: tabular-nums; }

/* Vehicle register: count chip + 4-col table */
.gate-veh-row { grid-template-columns: 1.1fr 1.3fr 1.1fr 1fr; cursor: pointer; }
.gate-veh-row:not(.gate-reg-head):hover { background: var(--kui-panel-2); }
@media (max-width: 720px) {
    .gate-zbar { grid-template-columns: 1fr auto; gap: 4px 10px; }
    .gate-zt { grid-column: 1 / -1; order: 3; }
    .gate-veh-row { grid-template-columns: 1fr 1fr; }
}

/* Kind badge (kapdaa.kindTag) — identity type (Delivery/Lot/Bale/Product), distinct from the stage badge. Neutral
   chip + a colour-tinted glyph+label per kind; mid-tones so it reads on both the light greige and the dark ground. */
.kap-kind { display: inline-flex; align-items: center; gap: 4px; font-size: var(--kui-fs-xs); font-weight: 700; padding: 1px 7px; border-radius: var(--kui-r-sm); border: 1px solid var(--kui-line);
    background: var(--kui-panel-2); white-space: nowrap; vertical-align: middle; line-height: 1.7; }
.kap-kind--del  { color: #a9762f; }
.kap-kind--lot  { color: #8c7a52; }
.kap-kind--bale { color: #3f7196; }
.kap-kind--prod { color: #5a54d6; }

/* Click-to-expand QR modal (kapdaa.qrModal) — a large scannable QR + print/download, shared everywhere a QR shows. */
.kap-qrov-img { width: 300px; max-width: 78vw; height: auto; aspect-ratio: 1; background: #fff; padding: 10px;
    border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); image-rendering: pixelated; image-rendering: crisp-edges; }
/* the source QR images that open the modal read as interactive */
.mp-qr { cursor: zoom-in; transition: box-shadow var(--kui-t-fast), transform var(--kui-t-fast); }
.mp-qr:hover { box-shadow: 0 0 0 3px var(--kui-accent-weak, rgba(45,106,79,.25)); }

/* Shared filter bar (kapdaa.filterBar) — one row of single-select chip groups under the search field. Each group
   is one dimension (Reason · Zone · Stage…); the .kap-fchip reuses .gate-chip, just tighter + with a count badge.
   A thin divider sits between groups so several dimensions read as distinct. */
.kap-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 14px; }
.kap-filterbar:empty { display: none; }
.kap-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kap-fgroup + .kap-fgroup { padding-left: 14px; border-left: 1px solid var(--kui-line); }
.kap-flabel { font-size: 11px; font-weight: 700; color: var(--kui-text-soft); margin-right: 2px; }
.kap-fchip { padding: 4px 11px; font-size: var(--kui-fs-md); display: inline-flex; align-items: center; gap: 6px; }
.kap-fchip-n { font-size: 11px; font-weight: 700; min-width: 16px; text-align: center; padding: 0 5px; border-radius: 999px;
    background: var(--kui-panel-2); color: var(--kui-text-soft); }
.kap-fchip.active .kap-fchip-n { background: rgba(255,255,255,.22); color: var(--kui-bg); }

.gate-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.5); z-index: 1050;
    display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; }
.gate-panel { width: 100%; max-width: none; margin: 0; background: var(--kui-panel); border-radius: 16px;
    padding: 24px; box-shadow: var(--kui-e3); }
/* opened-card: full-width 3-zone body — Weigh | Inspect & accept | Booking & identity — so the space
   carries grouped content instead of side gutters. Stacks on narrow screens; action button spans below. */
/* Opened card: 2 sides — workflow actions (left) | Booking & identity (right). Stacks on narrow screens. */
.gate-panel-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 28px; align-items: start; }
.gate-panel-actions { display: flex; flex-direction: column; gap: 22px; }
.gate-seq-title { margin: 0 0 6px; }

.gate-col-title { font-size: 12px; font-weight: 700;
    color: var(--kui-text-soft); margin-bottom: 2px; }
.gate-panel-side { display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    padding: 14px; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 12px; }
.gate-qr-box { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
/* booking details summary, stacked in the right column */
/* Identity strip: tidy stacked label-over-value cards (matches Station Scan's .st-stat), auto-fit grid. */
.gate-kv { background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 8px 11px; }
.gate-kv--note { color: var(--kui-warn); }   /* special-instructions note — tokenised (was raw #806000) */
.gate-kv-l { display: block; font-size: 11px;
    color: var(--kui-text-soft); font-weight: 600; margin-bottom: 2px; }
.gate-kv-v { font-size: 14px; font-weight: 700; color: var(--kui-ink); word-break: break-word; }
.gate-qr { width: 160px; height: 160px; background: #fff; border: 1px solid var(--kui-line);
    border-radius: var(--kui-r-lg); padding: 6px; }
.gate-qr-cap { font-size: 12px; font-weight: 700; text-align: center; word-break: break-word; color: var(--kui-text); }
.gate-qr--click { cursor: pointer; transition: border-color var(--kui-t-fast); }
.gate-qr--click:hover { border-color: var(--kui-info); }
.og-lot--link { color: var(--kui-info); cursor: pointer; text-decoration: none; font-weight: 600; }
.og-lot--link:hover { text-decoration: underline; }
@media (max-width: 820px) {
    .gate-panel-body { grid-template-columns: 1fr; gap: 16px; }
    .gate-panel-side { flex-direction: column; }
    .gate-qr { width: 120px; height: 120px; }
}

/* Unified list toolbar: search + sort (Station / Gate) */
.kap-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.kap-search { display: inline-flex; align-items: center; gap: 8px; background: var(--kui-panel);
    border: 1px solid var(--kui-line-strong); border-radius: var(--kui-r); min-height: var(--kui-field-h, 36px); padding: 0 var(--kui-s3);
    box-sizing: border-box; flex: 1 1 320px; max-width: 520px; }   /* the one field shape (kui-shell.css) */
.kap-search input { border: 0; outline: none; background: transparent; flex: 1; min-width: 0; font-size: 13px; color: var(--kui-ink); text-overflow: ellipsis; }
.kap-search .kap-ic { color: var(--kui-text-soft); }
/* ── One modern dropdown style, reused everywhere ─────────────────────────────────────────────────────
   .kap-select = form dropdown (matches the styled inputs); .kap-sort = toolbar sort (pill). Both drop the
   native OS chevron for a consistent custom one, so no page shows a raw "old-school" select. */
.kap-select, .kap-sort {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: var(--kui-panel); color: var(--kui-ink); cursor: pointer; border: 1px solid var(--kui-line-strong);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 13px;
}
.kap-select { border-radius: var(--kui-r); padding: 11px 34px 11px 14px; font-size: 14px; width: 100%; }
.kap-select:focus, .kap-sort:focus { outline: none; border-color: var(--kui-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kui-accent) 14%, transparent); }
.kap-sort { border-radius: 999px; padding: 7px 32px 7px 14px; font-size: 13px; color: var(--kui-text); }

/* Station board — colour-coded swim-lane columns (one per stage), lot cards inside.
   Columns are EQUAL height and fill the viewport (uniform, no ragged bottoms / wasted vertical space);
   each column body scrolls independently. */
.st-board-cols { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: stretch;
    height: calc(100vh - 178px); }
.st-col { flex: 0 0 230px; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 12px;
    display: flex; flex-direction: column; min-height: 0; }
.st-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px;
    border-radius: 12px 12px 0 0; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.st-col-n { background: rgba(0,0,0,.16); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.st-col-sub { padding: 4px 12px 0; font-size: var(--kui-fs-sm); font-weight: 600; color: var(--kui-text-soft);
    flex: 0 0 auto; }
.st-col-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
    flex: 1 1 auto; min-height: 0; }
.st-bcard { text-align: left; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r); padding: 9px 11px;
    cursor: pointer; transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast); }
.st-bcard:hover { border-color: var(--kui-line-strong); box-shadow: var(--kui-e1); }
.st-bcard-ref { font-weight: 700; font-size: 13px; }
.st-bcard-client { font-size: 12px; color: var(--kui-text); margin-top: 2px; }
.st-bcard-meta { font-size: 11px; color: var(--kui-text-soft); margin-top: 2px; }

/* Station detail: clean stat row + a clear move-on action (next-primary + collapsible others) */
/* Station detail header: Print label + Back grouped at the top-right (not floating) */
.st-head-actions { display: flex; gap: 8px; margin-left: auto; }
.st-head-actions .gate-back { margin-left: 0; }
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 4px 0 14px; }
.st-stat { background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r); padding: 9px 12px; }
.st-stat-l { display: block; font-size: 11px;
    color: var(--kui-text-soft); margin-bottom: 2px; }
.st-stat-v { font-size: var(--kui-fs-lg); font-weight: 700; color: var(--kui-ink); }
.st-muted { color: var(--kui-text-soft); font-weight: 500; }
.st-link-btn { font-size: 12px; font-weight: 600; color: var(--kui-accent); background: var(--kui-accent-soft); border: none;
	border-radius: 6px; padding: 2px 8px; cursor: pointer; margin-left: 4px; vertical-align: 1px; }
.st-link-btn:hover { background: color-mix(in srgb, var(--kui-accent) 22%, transparent); }
.st-advance { display: flex; flex-direction: column; gap: 10px; }
.st-next-btn { font-size: 16px; padding: 15px; }

.st-final { display: inline-flex; align-items: center; gap: 8px; color: var(--kui-good); background: var(--kui-good-tint);
    border: 1px solid color-mix(in srgb, var(--kui-good) 35%, transparent); border-radius: var(--kui-r); padding: 11px 14px; font-size: 14px; }

.gate-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 1100;
    background: var(--kui-good); color: #fff; font-weight: 700; padding: 16px 28px; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.gate-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.gate-panel-head h2 { margin: 0; font-size: 20px; font-weight: 800; }
/* Phone: the title + its action buttons can't share one 390px row (the buttons ran off-screen). Wrap the
   header so the actions drop to a full-width row beneath the title, and let them share that row evenly. */
@media (max-width: 640px) {
    .gate-panel-head { flex-wrap: wrap; }
    .gate-panel-head h2 { flex: 1 1 100%; }
    .st-head-actions { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .st-head-actions > * { flex: 1 1 auto; justify-content: center; }
}
.gate-close { border: 0; background: var(--kui-panel-2); border-radius: var(--kui-r); width: 40px; height: 40px; font-size: var(--kui-fs-xl); cursor: pointer; }
/* Denser vertical rhythm — still touch-friendly (~40px inputs / ~44px buttons) but far less bulky. */
.gate-field { margin-bottom: 13px; }
.gate-field label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.gate-field input, .gate-weigh-col input { width: 100%; font-size: var(--kui-fs-lg); padding: 11px 14px;
    border: 1px solid var(--kui-line-strong); border-radius: var(--kui-r); }
.gate-weigh { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.gate-weigh-col label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 5px; }
.gate-btn { width: 100%; margin-top: 8px; padding: 13px; font-size: var(--kui-fs-lg); font-weight: 700;
    border: 0; border-radius: var(--kui-r); background: var(--kui-ink); color: var(--kui-bg); cursor: pointer; }
.gate-btn:disabled { background: var(--kui-line); color: var(--kui-text-soft); cursor: not-allowed; }
.gate-btn-primary { background: var(--kui-accent); color: var(--kui-accent-ink); margin-top: 8px; }
/* Phone: on the SINGLE-action station kiosks (Pre-Sort / Sort / Tear / Blend) the primary "Complete →" can sit
   far below a long form. Pin it to the bottom of the viewport so the doing-action is always in the thumb zone
   — a floating full-width CTA. (Multi-step wizards — Gate / Outbound — keep their inline per-step actions.)
   The button is full-width and opaque, so content scrolls cleanly behind it. */
@media (max-width: 640px) {
    /* Pre-Sort / Sort / Tear: the "Complete →" sits at the END of a long form → pin to the BOTTOM. */
    .sp-complete { position: sticky; bottom: 8px; z-index: 30; box-shadow: 0 6px 20px rgba(0,0,0,.20); }
    /* Blending: the "Blend selected →" sits ABOVE the bale picker → pin to the TOP so it stays reachable
       (and the live selected-count stays visible) while you scroll the list of torn bales. */
    #bl-blend { position: sticky; top: 8px; z-index: 30; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
}
/* Secondary action — clear hierarchy vs the solid primary (print, and non-default choices like Dispose). */

.gate-btn-danger { background: var(--kui-panel); color: var(--kui-alert); border: 1px solid color-mix(in srgb, var(--kui-alert) 45%, transparent); font-weight: 600; }
.gate-btn-danger:hover { background: var(--kui-alert-tint); border-color: var(--kui-alert); }

/* ── Gate Check-In guided wizard ──────────────────────────────────────────────────────────────────
   Identity strip (always-on context) + four step-cards (current open, done collapsed to a summary,
   upcoming locked). Reuses the .st-stat / .mp-stage-card card language + design tokens. */
.gate-idstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 4px 0 16px;
    padding: 12px 16px; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 12px; }
.gate-idstrip .gate-qr-box { flex: 0 0 auto; width: auto; flex-direction: row; align-items: center; gap: 10px; }
.gate-idstrip .gate-qr { width: 84px; height: 84px; }
.gate-idstrip .gate-qr-cap { font-size: 12px; }
.gate-idstrip .mp-print { font-size: 12px; }

/* Outbound Gate: manifest as an always-on context card above the wizard (mirrors .gate-idstrip). */
.gate-manifest-card { margin: 4px 0 16px; padding: 12px 16px; background: var(--kui-panel-2);
    border: 1px solid var(--kui-line); border-radius: 12px; }

.gate-steps-flow { display: flex; flex-direction: column; gap: 12px; }
.gate-step-card { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px;
    overflow: hidden; transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast), opacity var(--kui-t-fast); box-shadow: var(--kui-e1); }
.gate-step-card.is-open { border-color: var(--kui-accent); box-shadow: var(--kui-e2); }
.gate-step-card.is-locked { opacity: .5; }
.gate-step-card.is-locked .gate-step-head { cursor: default; }
.gate-step-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.gate-step-card.is-done .gate-step-head:hover { background: var(--kui-panel-2); }
.gate-step-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
    background: var(--kui-panel-2); color: var(--kui-text-soft); }
/* Current step's number pulses in the brand accent — "you are here, do this next". */
.gate-step-card.is-open .gate-step-num { background: var(--kui-accent); color: var(--kui-accent-ink); animation: lck-pulse 2.2s infinite; }
.gate-step-card.is-done .gate-step-num { background: var(--kui-good-tint); color: var(--kui-good); }
@media (prefers-reduced-motion: reduce) { .gate-step-card.is-open .gate-step-num { animation: none; } }
.gate-step-title { font-size: var(--kui-fs-lg); font-weight: 700; color: var(--kui-ink); }
.gate-step-role { font-size: var(--kui-fs-sm); font-weight: 700;
	color: var(--kui-text-soft); background: var(--kui-panel-2); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.gate-step-sum { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--kui-text-soft);
    text-align: right; }
.gate-step-body { display: none; padding: 2px 16px 16px; }
.gate-step-card.is-open .gate-step-body { display: block; }
/* ── A delivery as a task view (D-70 to D-74, approved mock round 4 v14) ─────────────────────────────────────────
   Back leads; the lorry's three stops on a track (a done one opens its record); the stop's screen as even rows (two
   equal panels over an even grid); its one action in the bar. Track, cards, panels and the bar share one set of edges.
   While it is open the board's tabs and scan step aside. */
#gp-ref { margin: 0; display: grid; gap: 3px; min-width: 0; }   /* a plate is a soft yellow, never the loudest thing */

/* the track: three stops; done = green bar + what was recorded (View opens it); now = half an ink bar + Now pill */
@keyframes gpGrow { from { transform: scaleX(0); } }

/* a done stop's record: a card under the track on a desk (its caret points at the stop), a sheet on a phone */
@keyframes gpRise { from { opacity: 0; transform: translateY(16px); } }

/* the stop's screen: one column of full rows */   /* a heading takes the focus to be read, not pressed */

/* two equal panels: the weighbridge, and where it goes (or the net) */
/* what the driver on the bridge sees (D-74): the signal light and the driver's screen */

/* the checks: an even grid of cards, three a row */

/* where the lorry is: one status card (the bays' job, D-70) */

/* weigh out: is this the lorry on the bridge? */

/* a grouped list: one container, hairline rows, each with its own action */

/* fields and choices (typed weights, turn away) */

/* the stop's one action in the bar, on screen; when it waits, the bar says why; a secondary on the left */

/* the gate booth's monitor: one 1360 px column, centred; track, record, screen and bar on the same edges */

/* turn away: reason tiles, the only red action (D-67), 48 px footer */
/* the shared .btn-primary paints with !important (kui-shell), so the one red action has to say it as firmly */

/* "How this works" onboarding panel (kapdaa.helpPanel) — a dismissible <details> info card. Reads as a
   quiet, on-brand hint: soft blue-grey, info icon, collapses to a one-line header. */
/* Help no longer takes a body row — kapdaa.wireHelp lifts it into a "?" button in the page title bar (next to
   Refresh) that opens the steps as a popover. The body only carries a hidden source block (.kap-help-src). */
.kap-help-src { display: none; }
/* the "?" trigger, sitting in .page-actions left of the primary action */
/* the popover the "?" opens */
.kap-help-pop { position: fixed; z-index: 1055; width: min(400px, calc(100vw - 24px)); background: var(--kui-panel);
    border: 1px solid var(--kui-line); border-radius: 12px; box-shadow: var(--kui-e3);
    overflow: hidden; animation: kapHelpPop .12s ease-out; }
@keyframes kapHelpPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.kap-help-pop-h { display: flex; align-items: center; gap: 8px; padding: 12px 15px; font-weight: 700; font-size: var(--kui-fs-base);
    color: var(--kui-ink); border-bottom: 1px solid var(--kui-line); }
.kap-help-pop-h svg { color: var(--kui-info); flex: 0 0 auto; }
.kap-help-body { margin: 0; padding: 12px 16px 14px 34px; display: flex; flex-direction: column; gap: 7px;
    font-size: 13px; line-height: 1.5; color: var(--kui-text); }
.kap-help-body li { padding-left: 2px; }
.kap-help-body li b { color: var(--kui-ink); }
@media (prefers-reduced-motion: reduce) { .kap-help-pop { animation: none; } }

/* ── Shared collapsible section (kapdaa.collapsible) — collapse to save space, expand on click ───────── */
.kap-collapse { border: 1px solid var(--kui-line); border-radius: 12px; background: var(--kui-panel); overflow: hidden;
    margin: 0 0 12px; }
.kap-collapse > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer;
    list-style: none; user-select: none; font-weight: 700; font-size: 14px; color: var(--kui-ink); }
.kap-collapse > summary::-webkit-details-marker { display: none; }
.kap-collapse > summary:focus-visible { outline: 2px solid var(--kui-info); outline-offset: -2px; }
.kap-c-ico { display: inline-flex; color: var(--kui-text-soft); flex: 0 0 auto; }
.kap-c-ico svg { width: 16px; height: 16px; }
.kap-c-title { flex: 1 1 auto; min-width: 0; }
.kap-c-sub { font-weight: 500; font-size: var(--kui-fs-md); color: var(--kui-text-soft); flex: 0 0 auto; }
.kap-c-right { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--kui-text-soft); }
.kap-c-right + .kap-c-chev { margin-left: 10px; }
.kap-c-chev { margin-left: auto; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--kui-text-soft);
    border-bottom: 2px solid var(--kui-text-soft); transform: rotate(45deg); transition: transform var(--kui-t) var(--kui-ease); margin-right: 2px; }
.kap-c-right ~ .kap-c-chev { margin-left: 10px; }
.kap-collapse[open] > summary .kap-c-chev { transform: rotate(-135deg); }
.kap-collapse[open] > summary { border-bottom: 1px solid var(--kui-line); }
.kap-c-body { padding: 13px 14px; }
/* flush variant — no card chrome, for nesting inside another card (just a header + divider) */
.kap-collapse--flush { border: 0; border-radius: 0; background: transparent; margin: 0; }
.kap-collapse--flush > summary { padding: 10px 0; }
.kap-collapse--flush[open] > summary { border-bottom: 1px solid var(--kui-line); }
.kap-collapse--flush .kap-c-body { padding: 12px 0 4px; }
@media (max-width: 640px) { .kap-collapse > summary { min-height: 44px; } }
/* Passport detail sections as a stack of collapsible cards (R2-3) */
.mp-cboxes { margin-top: 6px; }
.mp-cboxes .kap-collapse { margin-bottom: 10px; }

/* Material Passport scan/search field — the compact pill (was the orphaned .gate-scan class → looked odd) */
.mp-scan-field { max-width: 560px; margin-bottom: 14px; }
.mp-scan-field input { font-size: var(--kui-fs-lg); }
/* Smart Pre-Sort station — live contaminant bins */
.sp-idbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 6px; }
.sp-bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.sp-bin { border: 1px solid var(--kui-line); border-radius: 12px; padding: 12px 14px; background: var(--kui-panel);
  display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast), transform var(--kui-t-fast); }
.sp-bin:hover { border-color: var(--kui-line-strong); box-shadow: var(--kui-e1); }
.sp-bin:active { transform: translateY(1px); }
.sp-bin:focus-visible { outline: 2px solid var(--kui-accent); outline-offset: 2px; }
.sp-bin--haz { border-color: color-mix(in srgb, var(--kui-warn) 45%, transparent); background: var(--kui-warn-tint); }
.sp-bin-name { font-size: 12px; font-weight: 700; color: var(--kui-text); }
.sp-bin-kg { font-size: var(--kui-fs-xl); font-weight: 800; color: var(--kui-ink); margin: 4px 0 8px; }
.sp-bin-bar { height: 8px; background: var(--kui-panel-2); border-radius: 999px; overflow: hidden; }
.sp-bin-bar span { display: block; height: 100%; width: 0; background: var(--kui-accent); transition: width .4s; }
.sp-bin--haz .sp-bin-bar span { background: var(--kui-warn); }
.sp-complete { margin-top: 18px; width: 100%; }
/* Sorting Line — recipe (sort-dimension) chooser */
.sl-recipes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.sl-recipe { text-align: left; border: 1px solid var(--kui-line); border-radius: 12px; padding: 16px 18px;
    background: var(--kui-panel); cursor: pointer; transition: border-color var(--kui-t-fast), box-shadow var(--kui-t-fast); }
.sl-recipe:hover { border-color: var(--kui-accent); box-shadow: var(--kui-e1); }
.sl-recipe-name { font-size: 16px; font-weight: 800; color: var(--kui-ink); }
.sl-recipe-bins { font-size: 12px; color: var(--kui-text-soft); margin-top: 6px; }
.sl-bin .sp-bin-bar span { background: var(--kui-info); }
/* Tearing — by-product bins (amber) */
.tr-bin .sp-bin-bar span { background: var(--kui-warn); }
/* Blending — recipe toolbar + multi-select bale cards */

/* Controls row: recipe picker + live selection count + a compact Blend action (NOT a full-width mid-page slab —
   .gate-btn defaults to width:100% for the phone kiosks, so override to auto here and pin it to the right). */
.bl-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 14px; }
.bl-recipe-lbl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--kui-text); }
.bl-recipe-lbl .kap-select { min-width: 220px; }
.bl-count { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text-soft); padding-bottom: 9px; }
.bl-blend { width: auto; min-width: 190px; margin-top: 0; margin-left: auto; }
@media (max-width: 640px) { .bl-blend { width: 100%; margin-left: 0; } .bl-count { padding-bottom: 0; } }

/* Contextual "open the smart station" button in Station Scan's lot detail */
.gate-back--accent { border-color: var(--kui-accent); color: var(--kui-accent); font-weight: 700; }
.gate-back--accent:hover { background: var(--kui-accent-soft); }
/* Camera-scan button (next to the scan-or-search field) — shown only when the device has a camera + decoder */
.kap-cam-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--kui-line); border-radius: 12px; background: var(--kui-panel);
    cursor: pointer; color: var(--kui-accent); }
.kap-cam-btn:hover { border-color: var(--kui-accent); background: var(--kui-accent-soft); }
.kap-cam-btn .kap-ic { width: 22px; height: 22px; }
/* Inline variant — sits INSIDE the search pill at the right edge (Google-style: search icon · text · camera). */
.kap-cam-btn--inline { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent;
    margin: -3px -6px -3px 0; color: var(--kui-accent); }
.kap-cam-btn--inline:hover { background: var(--kui-panel-2); border-color: transparent; }
.kap-cam-btn--inline .kap-ic { width: 20px; height: 20px; }
/* Outbound sale-type badges — the 3 product streams (Sorted / Torn / Blended → partner) */
.og-sale-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.og-sale { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--kui-panel-2); color: var(--kui-text); }
.og-sale--sorted { background: var(--kui-good-tint); color: var(--kui-good); }
.og-sale--torn { background: var(--kui-warn-tint); color: var(--kui-warn); }
.og-sale--blended { background: var(--kui-info-tint); color: var(--kui-info); }
.og-photo-preview { max-width: 200px; border-radius: 8px; margin-top: 8px; border: 1px solid var(--kui-line); }
/* In-app camera QR scanner overlay */
.kap-qr-overlay { position: fixed; inset: 0; z-index: 1050; background: rgba(0, 0, 0, .85);
    display: flex; align-items: center; justify-content: center; }
.kap-qr-box { position: relative; width: min(92vw, 460px); display: flex; flex-direction: column;
    align-items: center; gap: 16px; }
.kap-qr-video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: #000; }
.kap-qr-frame { position: absolute; top: 19%; left: 19%; width: 62%; height: 62%;
    border: 3px solid rgba(255, 255, 255, .9); border-radius: 16px; pointer-events: none; }
.kap-qr-hint { color: #fff; font-size: var(--kui-fs-lg); font-weight: 600; text-align: center; }
.kap-qr-cancel { background: #fff; border: 0; border-radius: 999px; padding: 10px 22px; font-size: var(--kui-fs-lg);
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
/* One camera and one photo viewer (kapdaa.capturePhoto / kapdaa.photoViewer): full-screen, dark in both themes like a
   phone camera; the kind as chips, one shutter, then Retake / Use photo; removing asks why. */
.kap-cam { --cam-bg: #0b0b0b; --cam-fg: #f5f5f5; --cam-soft: #c9c9c9; --cam-fill: rgba(255, 255, 255, .16);
    --cam-line: rgba(255, 255, 255, .55); --cam-alert: #fca5a5;
    position: fixed; inset: 0; z-index: 1070; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto;   /* above dialogs */
    grid-template-areas: "top" "kinds" "view" "foot";   /* named, so hiding the kinds never moves the photo into their row */
    background: var(--cam-bg); color: var(--cam-fg); font-family: var(--kui-font, inherit); }
.kap-cam button:focus-visible, .kap-cam input:focus-visible { outline: 2px solid var(--cam-fg); outline-offset: 2px; }
.kap-cam__foot, .kap-cam__acts, .kap-cam__why, .kap-cam__meta { width: min(100%, 640px); justify-self: center; box-sizing: border-box; }
.kap-cam--viewer { grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top" "view" "meta" "foot"; }
.kap-cam__top { grid-area: top; } .kap-cam__kinds { grid-area: kinds; } .kap-cam__view { grid-area: view; }
.kap-cam__meta { grid-area: meta; } .kap-cam__foot, .kap-cam__acts, .kap-cam__why { grid-area: foot; }
.kap-cam__top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px; }
.kap-cam__title { text-align: center; font-size: var(--kui-fs-base); font-weight: 600; }
.kap-cam__nav { display: flex; gap: 6px; }
.kap-cam__btn[disabled] { opacity: .4; cursor: progress; }
.kap-cam__btn { min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--kui-r);
    background: var(--cam-fill); color: var(--cam-fg); display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; font-size: var(--kui-fs-base); font-weight: 600; cursor: pointer; }
.kap-cam__icon { padding: 0; }
.kap-cam__kinds { display: flex; gap: 4px; padding: 0 12px 10px; overflow-x: auto; }
.kap-cam__kinds button { flex: 1 0 auto; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--kui-r-pill);
    background: var(--cam-fill); box-shadow: inset 0 0 0 1px var(--cam-line); color: var(--cam-fg);
    font-size: var(--kui-fs-base); cursor: pointer; }
.kap-cam__kinds button[aria-checked="true"] { background: var(--cam-fg); color: var(--cam-bg); font-weight: 600; box-shadow: none; }
.kap-cam__view { position: relative; margin: 0 12px; min-height: 0; border-radius: var(--kui-r-lg); overflow: hidden;
    background: #161616; display: grid; place-items: center; }
.kap-cam__view video, .kap-cam__view img { width: 100%; height: 100%; object-fit: contain; grid-area: 1 / 1; }
.kap-cam__msg { grid-area: 1 / 1; display: grid; gap: 10px; justify-items: center; text-align: center; padding: 24px;
    max-width: 320px; }
.kap-cam__msg:empty { display: none; }
.kap-cam__msg b { font-size: var(--kui-fs-lg); }
.kap-cam__msg span { color: var(--cam-soft); font-size: var(--kui-fs-base); }
.kap-cam__spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--cam-fill);
    border-top-color: var(--cam-fg); animation: kap-cam-spin 1s linear infinite; }
@keyframes kap-cam-spin { to { transform: rotate(360deg); } }
.kap-cam__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 16px 16px max(22px, env(safe-area-inset-bottom)); }
.kap-cam__file { justify-self: start; min-height: 44px; border: 0; background: none; color: var(--cam-fg); padding: 0;
    font-size: var(--kui-fs-base); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kap-cam__shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--cam-fg); background: none;
    padding: 5px; cursor: pointer; }
.kap-cam__shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--cam-fg); }
.kap-cam__shutter:active i { transform: scale(.92); }
.kap-cam__shutter[disabled] { opacity: .4; cursor: default; }
.kap-cam__last { justify-self: end; width: 44px; height: 44px; border-radius: var(--kui-r); overflow: hidden; border: 2px solid var(--cam-fg); }
.kap-cam__last img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kap-cam__pair { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kap-cam__acts { padding: 10px 16px max(22px, env(safe-area-inset-bottom)); }
.kap-cam__ghost, .kap-cam__use { min-height: 56px; border: 0; border-radius: var(--kui-r); font-size: var(--kui-fs-lg);
    font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.kap-cam__ghost { background: var(--cam-fill); color: var(--cam-fg); }
.kap-cam__use { background: var(--cam-fg); color: var(--cam-bg); }
.kap-cam__ghost[disabled], .kap-cam__use[disabled] { opacity: .6; cursor: progress; }
.kap-cam__danger { color: var(--cam-alert); }
.kap-cam__err { grid-column: 1 / -1; margin: 10px 0 0; color: var(--cam-alert); font-size: var(--kui-fs-md); text-align: center; }
.kap-cam__meta { padding: 14px 16px 6px; font-size: var(--kui-fs-md); color: var(--cam-soft); }
.kap-cam__meta b { display: block; color: var(--cam-fg); font-size: var(--kui-fs-lg); }
.kap-cam__why { display: grid; gap: 10px; padding: 6px 16px max(22px, env(safe-area-inset-bottom)); }
.kap-cam__reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kap-cam__reasons button { min-height: 48px; border: 0; border-radius: var(--kui-r); background: var(--cam-fill);
    box-shadow: inset 0 0 0 1px var(--cam-line); color: var(--cam-fg); font-size: var(--kui-fs-base); cursor: pointer; }
.kap-cam__reasons button[aria-checked="true"] { background: var(--cam-fg); color: var(--cam-bg); font-weight: 600; box-shadow: none; }
.kap-cam__text { min-height: 48px; border: 0; border-radius: var(--kui-r); background: var(--cam-fill);
    box-shadow: inset 0 -1.5px 0 var(--cam-line); color: var(--cam-fg); padding: 0 14px; font-size: var(--kui-fs-lg); }
.kap-cam__hint { color: var(--cam-soft); font-size: var(--kui-fs-md); }
.kap-cam__remove { min-height: 56px; border: 0; border-radius: var(--kui-r); background: var(--cam-alert); color: var(--cam-bg);
    font-size: var(--kui-fs-lg); font-weight: 600; cursor: pointer; }
.kap-cam__remove[aria-disabled="true"] { background: var(--cam-fill); color: var(--cam-soft); box-shadow: inset 0 0 0 1.5px var(--cam-line); cursor: not-allowed; }
/* Material Passport — "Pre-sort result" block (bales produced + contaminants pulled + yield) */
.mp-presort { background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 12px; padding: 14px 16px; }
.mp-ps-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.mp-ps-stat { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 8px 11px; }
.mp-ps-lbl { display: block; font-size: 11px; color: var(--kui-text-soft); font-weight: 600; margin-bottom: 2px; }
.mp-ps-val { font-size: 16px; font-weight: 800; color: var(--kui-ink); }
.mp-ps-subttl { font-size: 12px; font-weight: 700; color: var(--kui-text); margin: 14px 0 8px; }
.mp-ps-contam, .mp-ps-bales { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-ps-chip { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--kui-text); }
.mp-ps-chip b { color: var(--kui-ink); }
.mp-ps-chip--haz { border-color: color-mix(in srgb, var(--kui-warn) 45%, transparent); background: var(--kui-warn-tint); color: var(--kui-warn); }
.mp-ps-bale { display: inline-flex; align-items: center; gap: 6px; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--kui-accent); cursor: pointer; text-decoration: none; }
.mp-ps-bale:hover { border-color: var(--kui-accent); background: var(--kui-accent-soft); }

/* Gate arrivals grid (legacy gate.html web page) */
#gate-arrivals { display: block; }

/* Material Passport composition: "Made from ←" source-lot bars + "What it is" fibre/type/colour chips */
.mp-comp { display: flex; flex-direction: column; gap: 6px; }
.mp-comp-row { position: relative; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 9px 12px; border: 1px solid var(--kui-line); border-radius: 8px;
    background: var(--kui-panel); overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; }
.mp-comp-row:hover { border-color: var(--kui-line-strong); }
.mp-comp-bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--kui-info-tint); z-index: 0; }
.mp-comp-lot { position: relative; z-index: 1; font-weight: 600; font-size: 13px; color: var(--kui-ink); }
.mp-comp-client { color: var(--kui-text-soft); font-weight: 500; }
.mp-comp-val { position: relative; z-index: 1; font-size: var(--kui-fs-md); color: var(--kui-text); white-space: nowrap; }
.mp-what { display: flex; flex-direction: column; gap: 8px; }
.mp-what-row { display: flex; align-items: baseline; gap: 10px; }
.mp-what-lbl { flex: 0 0 54px; font-size: 12px; font-weight: 700; color: var(--kui-text-soft); }
.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-chip { font-size: var(--kui-fs-md); padding: 2px 9px; border-radius: 12px; background: var(--kui-panel-2);
    color: var(--kui-text); }
.mp-chip b { color: var(--kui-ink); }
.mp-subtle { font-weight: 400; font-size: 12px; color: var(--kui-text-soft); text-transform: none; letter-spacing: 0; }
/* disposal fate: the QC-proof + charge chips under a Waste Transfer Note row (the traceability chain) */
.mp-fate-proof { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 10px 34px; }
.mp-fate-proof--none { color: var(--kui-text-soft); font-size: var(--kui-fs-sm); font-style: italic; }
.mp-fate-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 9px;
    border-radius: 12px; background: var(--kui-panel-2); color: var(--kui-text); text-decoration: none; cursor: pointer; }
.mp-fate-chip:hover { background: var(--kui-line); color: var(--kui-ink); }
.mp-fate-chip .kap-ic { color: var(--kui-text-soft); }
.mp-haz-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--kui-r); margin-left: 6px;
    background: var(--kui-warn-tint); color: var(--kui-warn); white-space: nowrap; }
.gate-photo-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gate-photo-btn { flex: 1; padding: 14px; font-size: 16px; font-weight: 700; border: 1px solid var(--kui-line-strong);
    border-radius: 12px; background: var(--kui-panel); cursor: pointer; }
.gate-photo-btn:disabled { background: var(--kui-panel-2); color: var(--kui-text-soft); cursor: not-allowed; }
.gate-photo-btn:not(:disabled):hover { border-color: var(--kui-accent); }
#gp-camera-box { margin-top: 12px; }
#gp-video { width: 100%; max-width: 420px; border-radius: 12px; background: #000; display: block; }
#gp-camera-box .gate-btn { max-width: 420px; margin-top: 8px; }
#gp-preview { max-width: 240px; border-radius: 12px; margin-top: 10px; border: 1px solid var(--kui-line); }
.gate-photo span { display: inline-block; margin-top: 6px; color: var(--kui-good); font-weight: 600; }
.gate-result { display: flex; flex-wrap: wrap; gap: 12px; background: var(--kui-good-tint);
    border: 1px solid color-mix(in srgb, var(--kui-good) 35%, transparent); border-radius: 12px; padding: 16px 20px; margin: 8px 0 16px; }
.gate-result-item { flex: 1; min-width: 140px; }
.gate-result-item span { display: block; color: var(--kui-text-soft); font-size: 13px; margin-bottom: 2px; }
.gate-result-item strong { font-size: var(--kui-fs-2xl); }
@media (max-width: 640px) { .gate-weigh { grid-template-columns: 1fr; } }

/* ============================================================
   Client portal sidebar (consistent nav across portal pages)
   ============================================================ */
.web-sidebar { padding: 8px 0; }
.web-sidebar li.title, .web-sidebar .title { list-style: none; font-weight: 700; font-size: 12px; color: var(--kui-text-soft); padding: 0 12px 10px; }
/* Grouped-nav section header (B2 portal shell): a quiet uppercase label above each sidebar section. */
.web-sidebar li.kap-nav-group { list-style: none; font-family: var(--kui-mono, monospace); font-size: var(--kui-fs-sm);
    font-weight: 700; color: var(--kui-text-faint, var(--kui-text-soft));
    padding: 12px 12px 4px; margin-top: 2px; }
body.kap-sidebar-collapsed .web-sidebar li.kap-nav-group { font-size: 0; padding: 6px 0 2px; }
.web-sidebar .sidebar-item { list-style: none; }
.web-sidebar .sidebar-item a { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    margin-bottom: 3px; border-radius: var(--kui-r); color: var(--kui-text); text-decoration: none; font-weight: 500; transition: var(--kui-t-fast); }
.web-sidebar .sidebar-item a svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; }
.web-sidebar .sidebar-item a:hover { background: var(--kui-panel-2); }
.web-sidebar .sidebar-item a.active { background: var(--kui-accent-soft); color: var(--kui-accent); font-weight: 700; }

/* Desk-style page-head bar: ☰ + section title, full width above the sidebar+content row */
.kap-page-head { display: flex; align-items: center; gap: 12px; padding: 6px 16px;
    border-bottom: 1px solid var(--kui-line); background: var(--kui-panel); }
.kap-pagehead-title { font-size: 20px; font-weight: 700; }
.kap-sidebar-toggle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: var(--kui-text);
    border-radius: 6px; cursor: pointer; }
.kap-sidebar-toggle svg.icon { width: 18px; height: 18px; }
.kap-sidebar-toggle:hover { background: var(--kui-panel-2); color: var(--kui-ink); }
.kap-sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1045; display: none; }

/* Customer notification bell (portal top bar) */
.kap-bell { position: relative; }
.kap-bell-badge { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--kui-alert); color: #fff; font-size: var(--kui-fs-xs); font-weight: 700; line-height: 16px; text-align: center;
    border-radius: 8px; }
.kap-bell-panel { position: absolute; right: 0; top: 100%; width: 320px; max-width: 90vw; max-height: 60vh;
    overflow-y: auto; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg);
    box-shadow: var(--kui-e3); z-index: 1055; }
.kap-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
    border-bottom: 1px solid var(--kui-line); font-size: 12px; font-weight: 700; color: var(--kui-text-soft); position: sticky; top: 0; background: var(--kui-panel); z-index: 1; }
.kap-bell-clear { border: none; background: none; cursor: pointer; font: inherit; text-transform: none; letter-spacing: 0;
    font-size: 12px; font-weight: 600; color: var(--kui-accent); padding: 2px 4px; }
.kap-bell-clear:hover { text-decoration: underline; }
.kap-bell-item { display: flex; align-items: stretch; border-bottom: 1px solid var(--kui-line); }
.kap-bell-item:hover { background: var(--kui-panel-2); }
.kap-bell-unread { background: var(--kui-good-tint); }
.kap-bell-body { flex: 1; min-width: 0; display: block; padding: 11px 6px 11px 14px; text-decoration: none; color: var(--kui-ink); }
.kap-bell-subj { font-size: 13px; font-weight: 600; }
.kap-bell-msg { font-size: 12px; color: var(--kui-text); margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kap-bell-time { font-size: 11px; color: var(--kui-text-soft); margin-top: 3px; }
.kap-bell-x { flex: 0 0 auto; width: 34px; border: none; background: none; cursor: pointer; color: var(--kui-text-soft);
    font-size: 20px; line-height: 1; transition: color var(--kui-t-fast); }
.kap-bell-x:hover { color: var(--kui-alert); }
.kap-bell-empty { padding: 22px 14px; text-align: center; color: var(--kui-text-soft); font-size: 13px; }

/* Match core ERPNext: the Desk uses a centred, constrained .container (Bootstrap ~1140px) by default
   and only goes full-width (90%) when the user toggles it. The portal mirrors that exactly — a centred
   constrained layout, full-width on toggle — so Desk and portal feel consistent. */
/* Portal AND Gate match the DESK exactly: the Desk uses a 1290px centred .container (measured), so we use
   the same 1290px centred container — total width, side panel (~215px) and content (~1075px) then line up
   across Desk + portal + gate, and the logo sits at the same x. Full-width (90%) when toggled. */
/* Base (full-width) container geometry with a small gutter — this is the FULL state, applied as the default only
   when body.kap-full is set (the body:not(.kap-full) rule below caps it to a comfortable centred width otherwise). */
.container:has(> .row > .sidebar-column),
.container:not(.page-body):has(.gate-kiosk) { max-width: none; margin: 0; padding: 0 clamp(16px, 2vw, 32px); }
.navbar-light > .container { max-width: none; margin: 0; padding: 0 clamp(16px, 2vw, 32px); }
/* Match the Desk navbar logo size (26px) so the top bar looks identical across Desk + portal + gate. */
.navbar-light .navbar-brand img { height: 26px !important; max-height: 26px !important; width: auto !important; }
/* Width matches the Desk (one model across the product): a COMFORTABLE centred cap by DEFAULT; "Toggle Width"
   (account menu → body.kap-full) releases it to full edge-to-edge. Mirrors the desk's body:not(.full-width) cap
   that its Toggle Full Width releases. */
body:not(.kap-full) .container:has(> .row > .sidebar-column),
body:not(.kap-full) .container:not(.page-body):has(.gate-kiosk),
body:not(.kap-full) .navbar-light > .container { max-width: 1400px; margin: 0 auto; }
@media (min-width: 769px) {
  .row:has(> .sidebar-column) { flex-wrap: nowrap; margin: 0; }
  .sidebar-column.col-sm-2 { flex: 0 0 211px; max-width: 211px; padding: 16px 12px 16px 16px;
    border-right: 1px solid var(--kui-line); }
  .main-column.col-sm-10 { flex: 1 1 0; max-width: none; padding: 8px 16px 20px; }
  body:not(.kap-sidebar-open) .sidebar-column { display: none; }
}
/* Tidy the top spacing under the page-head (page's own title is hidden) and let the page content
   fill the available width like the Desk (the templates cap it at max-width:1000px inline) */
.main-column .container { max-width: none !important; padding-left: 0; padding-right: 0; }
.main-column .container.mt-4 { margin-top: 0 !important; }
.main-column .kap-page-header { margin-top: 0; }
/* Frappe's .page-content-wrapper hard-codes 32px top/bottom margins — that's the extra whitespace under the
   page-head bar (and above the footer). Tighten it so the page starts right under the section title. */
.main-column .page-content-wrapper { margin-top: 6px !important; margin-bottom: 20px !important; }
.main-column.col-sm-10 { padding-top: 4px; }

/* The stock navbar's hamburger duplicates our sidebar/☰ nav — hide the empty toggler and keep the top bar a
   single inline row (logo · bell · account), so the navbar never dumps a second stacked menu on mobile. */
.navbar-light .navbar-toggler { display: none !important; }
.navbar-light .navbar-collapse { display: flex !important; flex-basis: auto; flex-grow: 1; }
/* keep the top bar one clean row: logo left · bell + account right (no wrap/stack on mobile) */
.navbar-light > .container { flex-wrap: nowrap !important; align-items: center; }
.navbar-light .navbar-nav.ml-auto { flex-direction: row; align-items: center; gap: 2px; }

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 768px) {
  .sidebar-column { display: block !important; position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
    z-index: 1050; background: var(--kui-panel); padding: 64px 14px 14px; overflow-y: auto; transform: translateX(-100%);
    transition: transform var(--kui-t) var(--kui-ease); box-shadow: 2px 0 18px rgba(0,0,0,.12); }
  body.kap-sidebar-open .sidebar-column { transform: translateX(0); }
  body.kap-sidebar-open .kap-sidebar-backdrop { display: block; }
  /* Portal data tables scroll inside their card instead of overflowing the page */
  .main-column table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   BRAND THEME — MONOCHROME + BRICOLAGE GROTESQUE  (Desk + Portal)
   Kapdaa's look: black-&-white chrome, Bricolage Grotesque type.
   Functional status colours (green/red/amber indicators) are kept.
   ============================================================ */

/* Type — two voices (D-54): Inter does the work (body, labels, tables, forms, buttons); Bricolage Grotesque speaks
   for the brand (page titles, headings, big numbers). Codes stay in the mono stack. */
:root {
  /* InterVariable first, as Frappe ships it: its static Inter files space the letter "t" wrongly at some sizes
     ("Induct ed", "Visit or") */
  --font-stack: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Bricolage Grotesque", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body, input, button, select, textarea, .btn, .form-control, .ellipsis,
.navbar, .workspace-page, .web-sidebar, .widget {
  font-family: var(--font-stack) !important;
}
.page-title, .title-text, h1, h2, h3, h4, .widget-title, .number-card .widget-body .number {
  font-family: var(--font-display) !important;
}
/* Let the faces size themselves: Inter and Bricolage both carry an optical-size axis, and Frappe pins it to 24 (the
   display cut) with extra tracking, which sets 13–14 px text loose. Auto optical sizing gives small text its text
   cut; tracking stays the face's own (uppercase labels keep their explicit letter-spacing). */
html, body { font-variation-settings: normal; font-optical-sizing: auto; letter-spacing: normal; }

/* Brand accent — override Frappe's blue primary with the KUI spruce accent (was near-black monochrome;
   migrated to the warm identity in the go-live design uplift). All neutrals now flow from --kui-* tokens
   so light/dark + desk/portal stay single-sourced. */
:root {
  --primary: var(--kui-accent); --primary-color: var(--kui-accent);
  --btn-primary: var(--kui-accent); --text-on-primary: var(--kui-accent-ink);
  /* blue = the INFO status hue, NOT primary (primary is the spruce accent above) — keeps the two registers
     apart so an info pill never reads green like a good pill. */
  --blue-500: var(--kui-info); --blue-600: var(--kui-info);
  --sidebar-select-color: var(--kui-panel-2);
}
.btn-primary { background-color: var(--kui-accent) !important; border-color: var(--kui-accent) !important; color: var(--kui-accent-ink) !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--kui-accent-hover) !important;
  border-color: var(--kui-accent-hover) !important;
}
/* One keyboard focus ring across the Desk: the sidebar, search fields and links had none. */
:focus-visible, .body-sidebar .item-anchor:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--kui-focus) !important; outline-offset: 2px;
}
.kap-search:focus-within { box-shadow: 0 0 0 2px var(--kui-focus); }
.kap-search.kap-search--quiet:focus-within { box-shadow: none; }   /* focused by the page for a scanner: no ring until used (kapdaa.ui.pageHeader) */
/* the field draws the focus ring (above); the global :focus-visible ring is !important, so the input opts out the same way */
.kap-search input:focus, .kap-search input:focus-visible { outline: none !important; box-shadow: none; }
.text-primary { color: var(--kui-accent) !important; }
a:not(.btn) { color: var(--kui-accent); }

/* Desk top navbar — warm panel bar with ink logo/icons + a subtle divider (was clean white). */
.navbar.navbar-expand { background: var(--kui-panel) !important; border-bottom: 1px solid var(--kui-line) !important; }
.navbar.navbar-expand .nav-link, .navbar.navbar-expand .navbar-brand,
.navbar.navbar-expand a { color: var(--kui-ink) !important; }
.navbar.navbar-expand .navbar-brand img { height: 26px !important; width: auto !important; }

/* Workspace shortcut tiles — warm neutral surface instead of colour chips. */
.workspace-page .shortcut-widget-box { background: var(--kui-panel) !important; border: 1px solid var(--kui-line) !important; }
.workspace-page .shortcut-widget-box:hover { border-color: var(--kui-accent) !important; }
.workspace-page .number-widget-box { border: 1px solid var(--kui-line); }

/* Portal: the selected item is light-grey with a left accent bar, not a solid black block. */
.web-sidebar .sidebar-item a.active { background: var(--kui-panel-2); color: var(--kui-ink); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--kui-accent); border-radius: 6px; }
.web-sidebar .sidebar-item a.active svg { opacity: 1; }

/* Collapse-to-icon-rail (Desk-style). Desktop only; the toggle persists the choice. When collapsed the
   sidebar becomes a narrow icon rail — labels hidden (font-size:0 collapses the text node, the fixed-size
   SVG icon stays), section title hidden, items centred; the label shows as a native tooltip on hover. */
@media (min-width: 769px) {
  body.kap-sidebar-collapsed .sidebar-column.col-sm-2 { flex: 0 0 60px; max-width: 60px; padding: 16px 8px; }
  body.kap-sidebar-collapsed .web-sidebar .title { font-size: 0; padding: 0 0 8px; }
  body.kap-sidebar-collapsed .web-sidebar .sidebar-item a { font-size: 0; gap: 0; justify-content: center; padding: 10px 0; }
  body.kap-sidebar-collapsed .web-sidebar .sidebar-item a.active { box-shadow: inset 3px 0 0 var(--kui-accent); }
}

/* ============================================================
   STATION SCAN (Slice A.2) — stage buttons + journey list
   ============================================================ */
.gate-stage-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.gate-stage-btn {
    border: 1px solid var(--kui-line); background: var(--kui-panel); color: var(--kui-text);
    border-radius: 8px; padding: 8px 14px; font-size: 14px; cursor: pointer; transition: all var(--kui-t-fast);
}
.gate-stage-btn:hover { border-color: var(--kui-ink); }
.gate-stage-btn.current { border-style: dashed; color: var(--kui-text-soft); }
.gate-stage-btn.active { background: var(--kui-ink); color: var(--kui-bg); border-color: var(--kui-ink); font-weight: 600; }
.st-journey { list-style: none; padding: 0; margin: 4px 0 16px; max-height: 160px; overflow-y: auto; }
.st-journey li {
    font-size: 13px; color: var(--kui-text); padding: 6px 0; border-bottom: 1px solid var(--kui-line);
}

/* ===== Factory Overview (SCADA-style live floor map) — .fo-* ===== */
.kap-fo-page .fo-wrap { padding: 0; }.fo-topbar {
    display: flex; align-items: center; gap: var(--kui-s4); flex-wrap: wrap;
    padding: 12px 16px; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r); margin-bottom: 18px;
}
.fo-kpi { display: flex; align-items: center; gap: 10px; line-height: 1.1; }
.fo-kpi-ico { width: 22px; height: 22px; color: var(--kui-text-soft); flex: none; }
.fo-kpi-tx { display: flex; flex-direction: column; }
.fo-kpi-n { font-size: var(--kui-fs-xl); font-weight: var(--kui-fw-bold); color: var(--kui-ink); }
.fo-kpi-l { font-size: 11px; color: var(--kui-text-soft); }
.fo-kpi--alert .fo-kpi-n { color: var(--kui-alert); }
.fo-kpi--alert .fo-kpi-ico { color: var(--kui-alert); }
.fo-wb { margin-left: auto; font-size: 13px; color: var(--kui-text); padding: 6px 12px; border: 1px dashed var(--kui-line-strong); border-radius: 20px; }
.fo-wb--live { color: var(--kui-good); border-color: var(--kui-good); background: var(--kui-good-tint); font-weight: var(--kui-fw-med); }
.fo-updated { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--kui-text-soft); }
.fo-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kui-good);
    box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: kap-pulse 2s infinite; }
/* Stale = last refresh failed; board is frozen. Amber, no pulse, "reconnecting…" tag. */
.fo-updated--stale { color: var(--kui-warn); font-weight: var(--kui-fw-med); }
.fo-updated--stale .fo-live-dot { background: var(--kui-warn); animation: none; box-shadow: none; }
@keyframes kap-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
    70% { box-shadow: 0 0 0 6px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

.fo-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 2px; }
.fo-node {
    flex: 1 1 90px; min-width: 90px; border-radius: var(--kui-r); padding: 12px 8px; text-align: center;
    border: 1.5px solid var(--kui-line); background: var(--kui-panel); transition: all var(--kui-t);
}
.fo-node-top { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; }
.fo-node-top .kap-ic { color: var(--kui-text-soft); opacity: .85; }
.fo-node-label { font-size: 11px; color: var(--kui-text); }
.fo-node-lots { font-size: 26px; font-weight: var(--kui-fw-bold); color: var(--kui-ink); line-height: 1; }
.fo-node-sub { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); margin-top: 2px; white-space: nowrap; }
.fo-node-kg { font-size: 11px; font-weight: var(--kui-fw-med); color: var(--kui-text-soft); margin-top: 3px; white-space: nowrap; }
.fo-arrow { display: flex; align-items: center; color: var(--kui-line-strong); font-size: var(--kui-fs-xl); padding: 0 1px; }

.fo-node--idle { background: var(--kui-panel-2); border-color: var(--kui-line); }
.fo-node--idle .fo-node-lots { color: var(--kui-text-soft); }
.fo-node--active { background: var(--kui-good-tint); border-color: color-mix(in srgb, var(--kui-good) 45%, transparent); }
.fo-node--active .fo-node-lots { color: var(--kui-good); }
.fo-node--busy { background: var(--kui-warn-tint); border-color: color-mix(in srgb, var(--kui-warn) 45%, transparent); }
.fo-node--busy .fo-node-lots { color: var(--kui-warn); }
.fo-node--alert { background: var(--kui-alert-tint); border-color: color-mix(in srgb, var(--kui-alert) 45%, transparent); }
.fo-node--alert .fo-node-lots { color: var(--kui-alert); }

/* Clickable stage nodes look + feel interactive (hover lift + a persistent drill caret); non-click are flat. */
.fo-node--click { cursor: pointer; position: relative; }
.fo-node--click::after { content: "↗"; position: absolute; top: 6px; right: 8px; font-size: 11px;
    color: var(--kui-line-strong); transition: color var(--kui-t-fast); }
.fo-node--click:hover { border-color: var(--kui-text-soft); box-shadow: var(--kui-e2);
    transform: translateY(-1px); }
.fo-node--click:hover::after { color: var(--kui-text); }

.fo-section-title { font-size: 12px; font-weight: var(--kui-fw-med); color: var(--kui-text-soft); margin: 22px 0 8px; }
.fo-section-link { display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer; border-radius: 6px; transition: color var(--kui-t-fast); }
.fo-section-link:hover, .fo-section-link:focus-visible { color: var(--kui-text); outline: none; }
.fo-section-more { font-size: 11px; font-weight: var(--kui-fw-med); color: var(--kui-good); text-transform: none; letter-spacing: 0; opacity: .85; }
.fo-section-link:hover .fo-section-more { opacity: 1; }
.fo-lines { display: flex; flex-wrap: wrap; gap: 10px; }
.fo-line { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--kui-line); border-radius: 24px; background: var(--kui-panel); font-size: 13px; }
.fo-line-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kui-line-strong); flex: none; }
.fo-line--running { border-color: var(--kui-good); background: var(--kui-good-tint); }
.fo-line--running .fo-line-dot { background: var(--kui-good); animation: kap-pulse 2s infinite; }
.fo-line-name { font-weight: var(--kui-fw-med); color: var(--kui-ink); }
.fo-line-state { color: var(--kui-text-soft); }
.fo-line--running .fo-line-state { color: var(--kui-good); font-weight: var(--kui-fw-med); }

.fo-sinks { display: flex; flex-wrap: wrap; gap: 10px; }
.fo-node--sink { flex: 0 0 150px; }

.fo-legend { margin-top: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fo-chip { font-size: 11px; padding: 2px 10px; border-radius: 12px; border: 1px solid var(--kui-line); }

.fo-empty { color: var(--kui-text-soft); font-size: 13px; padding: 6px 2px; }

/* ── Factory Overview revamp: clickable KPIs, today strip, 2-col lower, icon-tinted nodes ── */
.fo-kpi--click { cursor: pointer; border-radius: var(--kui-r); padding: 4px 10px; margin: -4px -2px;
    transition: background var(--kui-t-fast); }
.fo-kpi--click:hover { background: var(--kui-panel); box-shadow: var(--kui-e1); }
.fo-spacer { flex: 1 1 auto; }
.fo-legend-top { display: flex; align-items: center; gap: 6px; }
/* stage nodes fill the row width evenly + tint their icon by state */
.fo-flow .fo-node { flex: 1 1 0; min-width: 108px; }
.fo-node--active .fo-node-top .kap-ic { color: var(--kui-good); opacity: 1; }
.fo-node--busy .fo-node-top .kap-ic { color: var(--kui-warn); opacity: 1; }
.fo-node--alert .fo-node-top .kap-ic { color: var(--kui-alert); opacity: 1; }
/* today-at-a-glance strip */
.fo-today { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 10px 16px; margin-bottom: 18px;
    border: 1px solid var(--kui-line); border-radius: var(--kui-r); background: var(--kui-panel); }
.fo-today-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--kui-text); }
.fo-today-item b { font-size: 16px; color: var(--kui-ink); }
.fo-today-item .kap-ic { color: var(--kui-text-soft); }
/* per-node oldest-lot age (stagnation signal) */
.fo-node-age { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font-size: var(--kui-fs-sm);
    font-weight: 600; color: var(--kap-grey-500); white-space: nowrap; }
.fo-node-age .kap-ic { color: var(--kap-grey-400); }
.fo-node-age--warn { color: #c2410c; }
.fo-node-age--warn .kap-ic { color: #c2410c; }
.fo-node-age--alert { color: #dc2626; font-weight: 700; }        /* ≥7d — a real jam, reads red (CX-6b) */
.fo-node-age--alert .kap-ic { color: #dc2626; }
/* sorted-bins strip: kg in each fibre bin right now */
.fo-bins { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; margin: 6px 0 18px;
    border: 1px solid var(--kap-grey-100); border-radius: var(--kui-r-lg); background: #fafafa; }
.fo-bins-title { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--kap-grey-500); margin-right: 4px; }
.fo-bins-title .kap-ic { color: var(--kap-grey-400); }
.fo-bin-chip { font-size: var(--kui-fs-md); padding: 3px 10px; border-radius: 999px; background: #fff;
    border: 1px solid var(--kap-grey-100); color: var(--kap-grey-700); white-space: nowrap; }
.fo-bin-chip b { color: var(--kap-black); }
/* lower 2-column: production lines | disposal & holds */
.fo-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; align-items: start; }
.fo-panel { border: 1px solid var(--kap-grey-100); border-radius: 12px; padding: 14px 16px; background: #fff; }
.fo-panel .fo-section-title { margin: 0 0 12px; }
.fo-foot { margin-top: 18px; font-size: 11px; color: var(--kap-grey-500); }
/* Jump row — tap-throughs to the detailed floor surfaces (replaced the duplicated lines/holds panels). */
.fo-jump { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 20px; }
.fo-jump-tile { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; cursor: pointer;
	background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px; padding: 14px 16px;
	color: var(--kui-text); transition: border-color var(--kui-t-fast), transform var(--kui-t-fast); }
.fo-jump-tile:hover { border-color: var(--kui-accent); transform: translateY(-1px); }
.fo-jump-tile:focus-visible { outline: 2px solid var(--kui-accent); outline-offset: 2px; }
.fo-jump-tile > svg:first-child { color: var(--kui-text-soft); flex: none; }
.fo-jump-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fo-jump-tx b { color: var(--kui-ink); font-size: 14px; }
.fo-jump-tx span { font-size: 12px; color: var(--kui-text-soft); }
.fo-jump-arrow { margin-left: auto; color: var(--kui-accent); display: inline-flex; flex: none; }
@media (max-width: 900px) { .fo-lower { grid-template-columns: 1fr; } }

/* ===== Material Passport polish — QC summary, sticky jump-nav, mobile ===== */
.mp-qc-summary { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 2px;
    padding: 8px 14px; border-radius: var(--kui-r-lg); font-size: 13px; font-weight: 600; }
.mp-qc-summary--ok { background: var(--kui-good-tint); color: var(--kui-good); }
.mp-qc-summary--warn { background: var(--kui-alert-tint); color: var(--kui-alert); }
.mp-qc-summary--none { background: var(--kui-panel-2); color: var(--kui-text); }

/* Sections fade + rise in on load — the passport reads as a story unfolding, not a wall of data (D2 pass). */
.mp-sec { scroll-margin-top: 52px; animation: mp-reveal .42s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes mp-reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp-sec { animation: none; } }
/* Phone (P2c): a Passport is opened to read the STORY, so lead with the Journey timeline; the identity block
   (id · QR · print label) is what you need less often, so it drops below. The jump chips reorder to match, and
   the QR shrinks to a strip. Desktop keeps the magazine lead (Identity hero first). */
@media (max-width: 640px) {
    #mp-view { display: flex; flex-direction: column; }

    #mp-view > #mp-sec-stages { order: 1; }
    #mp-view > #mp-sec-id { order: 2; }

    #mp-view > #mp-sec-family { order: 4; }

    
    #mp-sec-id .mp-qr { width: 76px; height: 76px; }
}
/* Mass balance card */
.mp-mb { border: 1px solid var(--kui-line); border-radius: 12px; padding: 14px 16px; background: var(--kui-panel); }
.mp-mb-input { font-size: 14px; color: var(--kui-text); margin-bottom: 8px; }
.mp-mb-input b { color: var(--kui-ink); }
.mp-mb-bar { display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--kui-panel-2); }
.mp-mb-seg { height: 100%; }
.mp-mb-seg--rec { background: var(--kui-good); }
.mp-mb-seg--rem { background: var(--kui-warn); }
.mp-mb-seg--loss { background: var(--kui-line-strong); }
.mp-mb-line { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0;
    border-bottom: 1px solid var(--kui-line); }
.mp-mb-line:last-of-type { border-bottom: 0; }
.mp-mb-lbl { flex: 1; color: var(--kui-text); }
.mp-mb-val { font-weight: 700; }
.mp-mb-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.mp-mb-dot--rec { background: var(--kui-good); } .mp-mb-dot--rem { background: var(--kui-warn); }
.mp-mb-dot--loss { background: var(--kui-line-strong); }
.mp-mb-badge { margin-left: 10px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.mp-mb-badge--ok { background: var(--kui-good-tint); color: var(--kui-good); }
.mp-mb-badge--warn { background: var(--kui-alert-tint); color: var(--kui-alert); }
.mp-mb-badge--none { background: var(--kui-panel-2); color: var(--kui-text-soft); }
.mp-mb-note { font-size: 12px; color: var(--kui-text-soft); margin-top: 8px; }

.mp-print { font-size: 12px; font-weight: 600; color: var(--kui-text); text-decoration: none;
    border: 1px solid var(--kui-line-strong); border-radius: var(--kui-r); padding: 4px 10px; white-space: nowrap; }
.mp-print:hover { border-color: var(--kui-text-soft); background: var(--kui-panel-2); color: var(--kui-ink); }
/* Safety-spine actions on the passport hero (Hold / Undo) reuse the .mp-print pill; a <button> needs the panel
   background + inline-flex the <a> gets for free. */
.mp-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
button.mp-print { background: var(--kui-panel); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 700px) {
    /* hero collapses to one column; QR + Print become a compact strip under the identity, not full-width */
    .mp-hero { grid-template-columns: 1fr; gap: 12px; }
    .mp-hero-qr { flex-direction: row; align-items: center; gap: 12px; align-self: flex-start; }
    .mp-hero-qr .mp-qr { width: 84px; height: 84px; }
    .mp-map { flex-direction: column; align-items: stretch; }
    .mp-map-arrow { transform: rotate(90deg); align-self: center; margin: 2px 0; }
    /* Genealogy trees don't fit a phone — flatten to a compact indented list: tiny indent, full-width node
       cards, and a subtle depth RAIL instead of the elbow connectors (which look messy at small indent).
       Reads top-to-bottom. Applies to the Passport (.mp-tree). */
    .mp-tree { padding-left: 0; }
    .mp-tree-node { padding: 6px 0 0 10px; border-left: 2px solid var(--kui-line); }
    .mp-tree-node::before, .mp-tree-node::after { display: none; }
    .mp-tree-root > .mp-tree-node { border-left: 0; padding-left: 2px; }
    .mp-tree-card { min-width: 0; width: 100%; display: block; }
}

/* ===== Kiosk interaction polish (Station stage buttons) ===== */
/* Station: current stage is a non-clickable marker; the others are pickable targets. */
#st-stages { display: flex; flex-wrap: wrap; gap: 8px; }
.gate-stage-btn.current, .gate-stage-btn:disabled { cursor: default; }

@media (max-width: 640px) { .gate-stage-btn { flex: 1 1 auto; text-align: center; } }

/* ===== Kiosk clarity (NS-2): scan help · legend · back · arrival stepper · detail status ===== */
    
    
    
.gate-scan-help { font-size: var(--kui-fs-md); color: var(--kui-text-soft); margin: 6px 2px 10px; }

/* inline status pill (legend + detail header) — shares the gate-badge-<status> colours but is NOT absolute */
.gate-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }

/* shared circular-numbered sequence stepper (Gate + Station, identical look) */
.kap-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 2px 2px 14px;
    padding: 12px 14px; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 12px; }
/* every step is a pill (same shape as the "All lots" pill), with a colour-coded number circle inside */
.kap-step { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kui-fs-md); color: var(--kui-text);
    background: var(--kui-panel); border: 1px solid var(--kui-line-strong); border-radius: 999px; padding: 3px 11px 3px 4px; }
.kap-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
    border-radius: 50%; font-size: 11px; font-weight: 700; flex: none; }
/* default circle is neutral UNLESS it carries any gate-badge colour (stage `--` or status `-`) */
.kap-step-n:not([class*="gate-badge"]) { background: var(--kui-panel-2); color: var(--kui-text-soft); }
.kap-step.done { border-color: color-mix(in srgb, var(--kui-good) 35%, transparent); background: var(--kui-good-tint); color: var(--kui-good); }
.kap-step.done .kap-step-n { background: var(--kui-good); color: #fff; }
.kap-step.current { border-color: var(--kui-ink); background: var(--kui-panel-2); color: var(--kui-ink); font-weight: 700; }
.kap-step.current .kap-step-n { background: var(--kui-ink); color: var(--kui-bg); }
.kap-step-line { flex: 0 1 16px; min-width: 8px; height: 2px; background: var(--kui-line-strong); border-radius: 2px; }
/* clickable steps (Station: the sequence IS the filter) */
.kap-step--click { cursor: pointer; transition: border-color var(--kui-t-fast), background var(--kui-t-fast); }
.kap-step--click:hover { border-color: var(--kui-line-strong); background: var(--kui-panel-2); }
.kap-step--click:focus-visible { outline: 2px solid var(--kui-info); outline-offset: 2px; border-radius: 6px; }
/* "All" reset pill (non-numbered control inside the sequence) */
.kap-step--all { padding: 3px 12px; border-radius: 999px; border: 1px solid var(--kui-line-strong);
    font-size: 12px; font-weight: 600; color: var(--kui-text); background: var(--kui-panel); }
.kap-step--all.current { background: var(--kui-ink); color: var(--kui-bg); border-color: var(--kui-ink); }
/* live count badge on a sequence step (how many at this stage / substate) */
.kap-step-c { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; margin-left: 5px; border-radius: 999px; background: var(--kui-panel-2);
    color: var(--kui-text); font-size: 11px; font-weight: 700; }
.kap-step-c--zero { color: var(--kui-text-soft); background: transparent; }
.kap-step.current .kap-step-c, .kap-step--all.current .kap-step-c { background: color-mix(in srgb, var(--kui-bg) 24%, transparent); color: var(--kui-bg); }
@media (max-width: 700px) { .kap-step-l { display: none; } .kap-step--all .kap-step-l { display: inline; }
    .kap-step-line { flex-basis: 8px; }
    /* keep the step a ≥44px tap target once its label collapses (was just the 22px number) */
    .kap-step--click { min-height: 44px; padding: 4px 6px; box-sizing: border-box; }
    .kap-step-c { margin-left: 3px; }
    /* Station Scan has ~10 stages — a long scroll on a phone; swap the chip rail for a native picker. */
    #st-legend .kap-steps { display: none; }
    #st-legend .ss-stage-select { display: block; } }
/* the phone stage picker is hidden on desktop (the chip rail is the control there) */
.ss-stage-select { display: none; width: 100%; margin: 2px 0 6px; padding: 10px 12px; font-size: 16px;
    border: 1px solid var(--kui-line-strong); border-radius: var(--kui-r); background: var(--kui-panel); color: var(--kui-ink); }

/* ===== Station Scan — scan-first register (F1): the scan box LEADS; filter + view toggle are compact below.
   Replaces the old stack (toggle → search → hint → "Stage sequence" title → 10-stage rail → "Lots" title). ===== */
.ss-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 20px; margin: 0 0 12px; background: var(--kui-panel);
    border: 1px solid var(--kui-line); border-radius: 16px; box-shadow: var(--kui-e1); }
.ss-hero-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    flex: none; border-radius: 12px; background: var(--kui-accent-soft); color: var(--kui-accent); }
.ss-hero-tx { flex: 1 1 240px; min-width: 0; }
.ss-hero-tx h2 { margin: 0 0 2px; font-size: var(--kui-fs-lg); font-weight: 700; color: var(--kui-ink); }
.ss-hero-tx p { margin: 0; font-size: var(--kui-fs-md); line-height: 1.45; color: var(--kui-text-soft); }
/* the shared search field reads as the primary action inside the hero — full-width, taller, ≥44px touch */
.ss-hero-scan { flex: 2 1 320px; min-width: 240px; }
.ss-hero-scan .kap-search { width: 100%; max-width: none; height: 48px; box-sizing: border-box; }
.ss-hero-scan .kap-search input { font-size: 16px; }

/* compact controls row: the stage filter grows, sort + list↔board sit to the right */
.ss-controls { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; flex-wrap: wrap; }
.ss-legend { flex: 1 1 320px; min-width: 0; }
.ss-legend .kap-steps { margin: 0; }
.ss-controls-right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
@media (max-width: 700px) {
    .ss-hero { padding: 14px; gap: 12px; }
    .ss-hero-ic { display: none; }
    .ss-controls-right { width: 100%; margin-left: 0; }
    .ss-controls-right #st-sort { flex: 1 1 auto; }
}
/* booking status colour for the 'Weighed' gate step (distinct from the others) */
.gate-badge-weighed { background: var(--kui-info-tint); color: var(--kui-info); }

/* modern client filter (replaces the old-school bare <select>) */

/* stage-sequence legend (Station): ordered colour-coded badges, no top divider */

/* booking-status badge colours (cards + legend + detail) */
.gate-badge-confirmed { background: var(--kui-info-tint); color: var(--kui-info); }
.gate-badge-arrived   { background: var(--kui-good-tint); color: var(--kui-good); }

.gate-badge-completed, .gate-badge-complete { background: var(--kui-panel-2); color: var(--kui-text); }
   /* hazard = danger, never a positive colour */
/* clean Back control (replaces the raw "← Back") */
.gate-back { display: inline-flex; align-items: center; gap: 4px; background: var(--kui-panel); border: 1px solid var(--kui-line-strong);
    border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--kui-text); cursor: pointer;
    margin-left: auto; flex: none; }   /* pushed to the top-right of the panel head */
.gate-back:hover { border-color: var(--kui-text-soft); background: var(--kui-panel-2); color: var(--kui-ink); }
.gate-back-ico { font-size: var(--kui-fs-xl); line-height: 1; display: inline-flex; }
.gate-back-ico svg { width: 16px; height: 16px; }
.gate-panel-head { display: flex; align-items: center; gap: 12px; }
.gate-panel-head h2 { margin: 0; font-size: var(--kui-fs-lg); }
/* arrival stepper — Booked › Gross › Tare › Accepted */
.gate-stepper { display: flex; width: 100%; align-items: center; gap: 4px; margin: 4px 0 18px; }
.gate-yard-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.gate-yard-toolbar[hidden] { display: none; }
.gate-yard-toolbar select { width: 320px; max-width: 100%; }
.gate-yard-section { padding: 16px 0; border-top: 1px solid var(--line); }
.gate-yard-section h3 { font-size: 16px; margin: 0 0 8px; }
.gate-yard-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.gate-yard-row button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) { .gate-yard-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
/* Receiving needs attention: one folded line above the check-in (the gate's main job), opened when there's time.
   Each row reads client › ID › reason (identity order, docs/23 §4). */

/* opened-view sequence fills the width on one line: connectors grow so the steps spread left-to-right */
.gate-stepper .kap-steps { width: 100%; flex-wrap: nowrap; }
.gate-stepper .kap-step-line { flex: 1 1 auto; }
.kap-step--here .kap-step-n { box-shadow: 0 0 0 3px color-mix(in srgb, var(--kui-ink) 16%, transparent); }
.kap-step--here .kap-step-l { font-weight: 700; color: var(--kui-ink); }
.kap-step--dim { opacity: .45; }
/* Phone: a linear stepper must NOT wrap — wrapping strands the connector dashes mid-air (the "ugly, weird"
   gate rail). Every .kap-steps rail becomes ONE horizontally-scrollable row: connectors stay attached, the
   edges fade to signal scroll, and JS scrolls the current node into view. Applies to the gate filter rail,
   the opened-card sequence and any future stepper alike. */
@media (max-width: 640px) {
    .kap-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; padding-bottom: 2px; }
    .kap-steps::-webkit-scrollbar { display: none; }
    .kap-step { scroll-snap-align: center; flex: 0 0 auto; }
    .kap-step-line { flex: 0 0 14px; }
    .gate-stepper .kap-steps { width: max-content; min-width: 100%; }
}
.gate-step { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kui-fs-md); color: var(--kui-text-soft); }

.gate-step.done { color: var(--kui-text); }
.gate-step.done .gate-step-dot { background: var(--kui-good); color: #fff; }
.gate-step.current { color: var(--kui-ink); font-weight: 700; }
.gate-step.current .gate-step-dot { background: var(--kui-good); color: #fff; animation: lck-pulse 2.2s infinite; }
@media (prefers-reduced-motion: reduce) { .gate-step.current .gate-step-dot { animation: none; } }

/* Responsive: stack the topbar + give flow nodes a sensible min on small screens. */
@media (max-width: 900px) {
    .fo-topbar { gap: 12px; }
    .fo-wb { margin-left: 0; }
    .fo-node { flex: 1 1 110px; }
    .fo-arrow { display: none; }
}

/* ===== Material Passport — process map + clickable timeline steps ===== */
.mp-map { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 4px; }
.mp-map-node { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 74px;
    padding: 8px 6px; border-radius: var(--kui-r-lg); border: 1.5px solid var(--kui-line); background: var(--kui-panel-2); }
.mp-map-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--kui-line-strong); color: #fff;
    font-size: 11px; line-height: 18px; text-align: center; }
.mp-map-label { font-size: var(--kui-fs-sm); color: var(--kui-text); text-align: center; line-height: 1.15; }
.mp-map-arrow { color: var(--kui-line-strong); font-size: 16px; }
.mp-map--done { background: var(--kui-good-tint); border-color: var(--kui-good); }
.mp-map--done .mp-map-dot { background: var(--kui-good); }
.mp-map--done .mp-map-label { color: var(--kui-good); }
.mp-map--current { background: var(--kui-info-tint); border-color: var(--kui-info); }
.mp-map--current .mp-map-dot { background: var(--kui-info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kui-info) 18%, transparent); }
.mp-map--current .mp-map-label { color: var(--kui-info); font-weight: 600; }
.mp-map--upcoming { opacity: .6; }

.mp-step--link { cursor: pointer; border-radius: 8px; transition: background var(--kui-t-fast); }
.mp-step--link:hover { background: var(--kui-panel-2); }
.mp-step-go { color: var(--kui-info); font-size: 11px; }

/* ============================================================
   KAPDAA UX KIT (Phase 0) — shared primitives reused across every page
   Stage badge: pair `.kap-stage` (shape) with a `.gate-badge--<stage>` colour
   modifier (the single colour source already defined above) via kapdaa.stageBadge().
   ============================================================ */
/* Shape only — colour comes from the paired `.gate-badge--<stage>` modifier (defined earlier, single
   source). A bare `.kap-stage` (unknown stage) falls back to the neutral default below. */
.kap-stage { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
    font-size: var(--kui-fs-sm); font-weight: 600; line-height: 1.5; vertical-align: middle; white-space: nowrap; }
.kap-stage:not([class*="gate-badge--"]) { background: var(--kui-panel-2); color: var(--kui-text); }
/* leading dot: solid = the -ed (done/ready) state; pulsing = the -ing (on-the-line-now) state */
.kap-stage-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
/* on the line now (-ing) is outlined, ready (-ed) is filled: Tearing and Torn share a hue, the shape tells them apart.
   The dot stays still (WCAG 2.2.2: nothing loops beside the work). */
.kap-stage.is-live { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
/* a stage chip's words are its hue deepened toward ink (--kui-stage-text), ≥ 4.5:1 on its pastel in both themes */
.kap-stage[class*="gate-badge--"] { color: color-mix(in srgb, var(--st) var(--kui-stage-text), var(--kui-ink)); }
@keyframes kap-stage-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: .5; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); } }
@media (prefers-reduced-motion: reduce) { .kap-stage.is-live .kap-stage-dot { animation: none; } }
/* Collection-order lifecycle chip (Track: recovered material you're collecting) — Draft→Confirmed→Ready→Dispatched. */
.kap-cstatus { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: var(--kui-panel-2); color: var(--kui-text); }
.kap-cstatus--confirmed { background: var(--kui-info-tint); color: var(--kui-info); }
.kap-cstatus--ready { background: var(--kui-warn-tint); color: var(--kui-warn); }
.kap-cstatus--dispatched { background: var(--kui-good-tint); color: var(--kui-good); }
.kap-cstatus--cancelled { background: var(--kui-alert-tint); color: var(--kui-alert); }

/* Lot identity bar — the one consistent header for a lot/bale (id · owner · stage · zone) */
.kap-lotbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    padding: 4px 0; font-size: 13px; }
.kap-lotbar .kap-lotbar-id { font-weight: 700; font-size: var(--kui-fs-lg); letter-spacing: .2px; }
.kap-lotbar .kap-lotbar-owner { color: var(--kui-ink); font-weight: 600; }
.kap-lotbar .kap-lotbar-meta { color: var(--kui-text-soft); }
.kap-lotbar .kap-lotbar-tag { font-size: var(--kui-fs-xs); font-weight: 700; color: var(--kui-info); background: var(--kui-info-tint); padding: 1px 7px; border-radius: 6px; }
/* the lot's next step as one visible button where ERPNext folds the header actions into "…" (below 992 px) */
.kap-lot-next { padding: 0 var(--kui-s3, 12px) var(--kui-s2, 8px); }
.kap-lot-next .btn { min-height: var(--kui-ctl-touch, 44px); }
@media (min-width: 992px) { .kap-lot-next { display: none; } }

/* Material Passport — interactive per-stage cards (what happened + QC at each stage) */
.mp-stages { display: flex; flex-direction: column; gap: 8px; }
.mp-stage-card { border: 1px solid var(--kui-line); border-radius: var(--kui-r); overflow: hidden; }
.mp-stage-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; background: var(--kui-panel-2); }
.mp-stage-head:hover { background: var(--kui-line); }
.mp-stage-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--kui-line-strong); color: #fff;
    text-align: center; font-size: 12px; line-height: 20px; flex: none; }
.mp-stage--done .mp-stage-dot { background: var(--kui-good); }
.mp-stage--current .mp-stage-dot { background: var(--kui-info); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kui-info) 18%, transparent); }
.mp-stage-label { font-weight: 600; flex: 1; }
.mp-stage--upcoming .mp-stage-label { color: var(--kui-text-soft); }

.mp-stage-date { font-size: 12px; color: var(--kui-text-soft); }

.mp-stage--open .mp-stage-caret { transform: rotate(180deg); }

.mp-stage--open .mp-stage-body { display: block; }
.mp-ev { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
.mp-ev-icon { width: 18px; text-align: center; flex: none; }
.mp-ev-body { flex: 1; display: flex; flex-direction: column; }
.mp-ev-title { font-size: 13px; }
.mp-ev-detail { font-size: 12px; color: var(--kui-text-soft); }
.mp-step--link { cursor: pointer; }
.mp-step--link:hover .mp-ev-title { text-decoration: underline; }

/* Journey timeline (D2 Passport redesign) — a vertical cradle-to-grave story: stage-coloured pips connected
   by a line, events + QC inline, the next step a dashed open pip. Replaces the collapsible cards + process map. */
.mp-timeline { position: relative; padding: 2px 0; }
.mp-tl-ev { display: flex; gap: 13px; padding-bottom: 16px; position: relative; }
.mp-tl-ev::before { content: ""; position: absolute; left: 6px; top: 17px; bottom: -2px; width: 2px; background: var(--kui-line); }
.mp-tl-ev:last-child::before { display: none; }
.mp-tl-pip { width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 3px; z-index: 1;
    background: var(--stage, var(--kui-line-strong)); border: 2px solid var(--kui-panel); box-shadow: 0 0 0 1px var(--kui-line); }
.mp-tl-pip--next { background: var(--kui-panel); border: 2px dashed var(--kui-line-strong); box-shadow: none; }
.mp-tl--upcoming { opacity: .7; }
.mp-tl-body { flex: 1; min-width: 0; }
.mp-tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-tl-stage { font-weight: 700; font-size: 14px; color: var(--kui-ink); letter-spacing: -.01em; }
/* CX-4: the "● NOW" marker on the current stage at the top of the reverse-chron feed. */
.mp-tl-now { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-sm); font-weight: 800; letter-spacing: .06em;
    color: var(--kui-accent); background: var(--kui-accent-soft); border: 1px solid color-mix(in srgb, var(--kui-accent) 35%, transparent); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.mp-tl--upcoming .mp-tl-stage { color: var(--kui-text-soft); font-weight: 600; }
.mp-tl-qc { font-size: var(--kui-fs-sm); font-weight: 700; color: var(--kui-good); background: var(--kui-good-tint);
    padding: 1px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 3px; }
.mp-tl-date { margin-left: auto; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-tl-events { margin-top: 4px; }
.mp-tl-events .mp-ev { padding: 4px 7px; border-radius: var(--kui-r); margin: 0 -7px; transition: background var(--kui-t-fast); }
.mp-tl-events .mp-step--link { cursor: pointer; }
.mp-tl-events .mp-step--link:hover { background: var(--kui-panel-2); }
@media (max-width: 640px) { .mp-tl-date { margin-left: 0; } }
/* Interactive: the CURRENT stage pip pulses in its own stage colour — "the material is here right now". */
@keyframes mp-pip-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--kui-line); }
    50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--stage, var(--go)) 28%, transparent); } }
.mp-tl--current .mp-tl-pip { animation: mp-pip-pulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mp-tl--current .mp-tl-pip { animation: none; } }

/* D2 — detail sections flow into a responsive 2-up grid (1-up on phone) as cards, instead of one long column.
   The Identity hero, Journey timeline and Family tree stay full-width (siblings of the grid). */

/* ============================================================
   SHARED STATE KIT + INTERACTION (loading / empty / error) — portal + kiosks
   One consistent, on-brand block instead of ad-hoc emoji or plain "Loading…" text.
   ============================================================ */
.kap-state { display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 10px; padding: 44px 20px; color: var(--kui-text-soft); }
.kap-state__icon { width: 40px; height: 40px; color: var(--kui-line-strong); }
.kap-state__icon svg { width: 100%; height: 100%; display: block; }
.kap-state__msg { font-size: 14px; color: var(--kui-text); font-weight: var(--kui-fw-med); }
.kap-state__sub { font-size: var(--kui-fs-md); color: var(--kui-text-soft); max-width: 320px; }
.kap-state__action { margin-top: 6px; }
.kap-state--error .kap-state__icon { color: var(--kui-alert); }
.kap-state--error .kap-state__msg { color: var(--kui-alert); }
.kap-spinner { width: 26px; height: 26px; border: 3px solid var(--kui-line-strong);
    border-top-color: var(--kui-accent); border-radius: 50%; animation: kap-spin .7s linear infinite; }
@keyframes kap-spin { to { transform: rotate(360deg); } }

/* Portal empty-state: drop the emoji look, share the muted state styling (icon set inline in templates). */
.kap-empty-state { color: var(--kui-text-soft); }
.kap-empty-state .kap-empty-ico { width: 44px; height: 44px; color: var(--kui-line-strong); margin: 0 auto 14px; }
.kap-empty-state .kap-empty-ico svg { width: 100%; height: 100%; }

/* Legacy kiosk empty hook now centred + muted (token contrast, not var(--slate-400)). */
.gate-empty { color: var(--kui-text-soft); padding: 32px 20px; text-align: center; font-size: 14px; }

/* Disabled inputs read as "not yet", never "broken". */
.gate-field input:disabled, .gate-field select:disabled, .gate-weigh input:disabled,
.kap-form-card input:disabled, .kap-form-card select:disabled, .kap-form-card textarea:disabled {
    background: var(--kui-panel-2); color: var(--kui-text-soft); cursor: not-allowed; }

/* Buttons mid-action (paired with kapdaa.guard). */
.kap-busy { opacity: .75; cursor: progress !important; }

/* Hold-to-confirm (kapdaa.holdToConfirm): a deliberate press-and-hold for irreversible actions. The fill
   sweeps left→right over the hold duration BEHIND the label; releasing early snaps it back. Touch-safe. */
.kap-hold { position: relative; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
.kap-hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0; pointer-events: none;
    background: rgba(255, 255, 255, .3); border-right: 2px solid rgba(255, 255, 255, .75); }
.kap-hold-label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* On a light/neutral button the white fill won't read — darken instead. */
.kap-hold.gate-back .kap-hold-fill, .kap-hold.mp-print .kap-hold-fill, .kap-hold.st-link-btn .kap-hold-fill {
    background: color-mix(in srgb, var(--kui-ink) 14%, transparent); border-right-color: var(--kui-line-strong); }

/* Keyboard focus is always visible on the custom interactive controls. */
.kap-btn-primary:focus-visible, .gate-btn:focus-visible, .pc-send:focus-visible, .gate-chip:focus-visible,
.gate-stage-btn:focus-visible, .fo-node--click:focus-visible, .kap-progress:focus-visible {
    outline: 2px solid var(--kui-info); outline-offset: 2px; }

/* Shared progress bar (portal contract etc.) — replaces inline width styling. */

/* Global secondary button (portal) — was only defined inline on Home; needed on Track etc. */
.kap-btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: var(--kui-control-h);
    background: var(--kui-panel); color: var(--kui-ink) !important; border: 1px solid var(--kui-line-strong);
    border-radius: var(--kui-r); padding: 0 var(--kui-s3); font-size: var(--kui-fs-md); font-weight: 500; text-decoration: none; cursor: pointer; }
.kap-btn-secondary:hover { background: var(--kui-panel-2); border-color: var(--kui-text-soft); }

/* Print: a clean traceability certificate (Track page) — drop the portal chrome. */
@media print {
    .kap-no-print, .web-sidebar, .navbar, .page-head, .web-footer, footer { display: none !important; }
    .kap-form-card { break-inside: avoid; }
}

/* Portal booking forms: the info sidebar must never stay stuck/cramped on a phone. */
@media (max-width: 768px) {
    .kap-info-card { position: static !important; margin-top: 16px; }
}

/* One stage spectrum (D-54): the short --s-* names used by the boards alias the --kui-stage-* tokens, the single
   source, on every page (they were scoped to .kx, so pages outside it drew transparent bars). */
:root {
    --s-received: var(--kui-stage-received); --s-presort: var(--kui-stage-presorting); --s-sorted: var(--kui-stage-sorted);
    --s-torn: var(--kui-stage-torn); --s-blended: var(--kui-stage-blending); --s-sold: var(--kui-stage-sold);
    --s-diverted: var(--kui-stage-disposed);
}
.kx {
    container-type: inline-size;
    --panel: var(--kui-panel); --panel-2: var(--kui-bg); --sunk: var(--kui-panel-2); --rail: var(--kui-panel-2);

    --line: var(--kui-line); --line-2: var(--kui-line-strong); --ink: var(--kui-ink);
    --muted: var(--kui-text-soft); --faint: var(--kui-text-soft);
    --accent: var(--kui-accent); --accent-ink: var(--kui-accent-ink); --accent-soft: var(--kui-accent-soft);
    --ok: var(--kui-good); --warn: var(--kui-warn); --alert: var(--kui-alert); --info: var(--kui-info);
    --r: var(--kui-r-lg); --r-s: var(--kui-r);
    /* the page's size steps are the shared scale (the wall display re-points them below) */
    --f1: var(--kui-fs-sm); --f2: var(--kui-fs-md); --f3: var(--kui-fs-base); --f4: var(--kui-fs-lg); --f5: var(--kui-fs-xl); --mono: var(--kui-mono);
}

.kx .tnum { font-variant-numeric: tabular-nums; }

.kx .rh { font-size: var(--f1); color: var(--faint); display: flex; justify-content: space-between; margin: 2px 2px 10px; }
/* the rail's quick filters are the kit's segmented control, spanning the rail */

 

/* identity band */
.kx .idband { padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2); border-radius: var(--r) var(--r) 0 0; }
.kx .idband .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
/* title flows as ONE line of inline text (client · ref · kind · stage) — not flex items that each wrap to a line */
.kx .idband h1 { margin: 0; font-size: var(--f5); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; }
/* kind + stage badge stay together (never a lone badge on its own line) and wrap as one unit */

.kx .idband h1 .kap-stage { font-size: var(--f1); font-weight: 700; }
.kx .idband h1 .kind { vertical-align: middle; }
.kx .idband h1 .q { font-family: var(--mono); font-size: var(--f2); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.kx .kind { font-size: var(--f1); color: var(--faint); border: 1px solid var(--line-2); border-radius: var(--kui-r-sm); padding: 2px 6px; font-weight: 600; }
.kx .facts { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; }
/* in the identity band the facts sit as a compact 2-col grid (not one-per-line) since the pie takes the right */
.kx .idband .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; max-width: 420px; }
.kx .facts .k { font-size: var(--f1); color: var(--faint); }
.kx .facts .v { font-size: var(--f4); font-weight: 650; margin-top: 2px; letter-spacing: -.01em; color: var(--kui-ink); }
.kx .facts .v.mono { font-family: var(--mono); font-size: var(--f3); }
.kx .idmain { flex: 1; min-width: 0; }
/* the whole right of the identity band is the recovery pie now (actions moved to the footer, badge to the title) */

/* footer: Open passport sits just above the Linked records — a clean left-aligned stack, divided from the body */

   /* left-aligned in the footer stack (override the default margin-left:auto) */

.kx .idact { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.kx .mb { margin-top: 14px; }

.kx .chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f2); color: var(--ink); background: var(--sunk); border: 1px solid var(--line); border-radius: var(--kui-r-pill); padding: 4px 10px; font-weight: 500; text-decoration: none; cursor: pointer; }
.kx .chip:hover { border-color: var(--accent); color: var(--accent); }
.kx .chip svg { width: 12px; height: 12px; color: var(--faint); } .kx .chip:hover svg { color: var(--accent); }
.kx .chip.ok { color: var(--ok); } .kx .chip.ok svg { color: var(--ok); }
/* icon-only chip (compact passport affordance on tree nodes) */

/* QC cue chip on tree nodes — ✓ accepted (green) / ⚠ rejected (red), opens the inspection */
.kx .qcchip--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); } .kx .qcchip--ok svg { color: var(--ok); }
.kx .qcchip--ok:hover { border-color: var(--ok); }
.kx .qcchip--bad { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 35%, var(--line)); } .kx .qcchip--bad svg { color: var(--alert); }
.kx .qcchip--bad:hover { border-color: var(--alert); color: var(--alert); }

/* sticky anchor tabs */
/* Sticky just BELOW the desk's own sticky breadcrumb bar (.page-head, ~49px) — top:0 alone hid the tabs behind
   it. This keeps the tab bar reachable while reading long content. */
.kx .tabs { position: sticky; top: 49px; z-index: 5; display: flex; gap: 2px; padding: 0 16px; background: color-mix(in srgb, var(--panel-2) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.kx .tabs::-webkit-scrollbar { display: none; }
.kx .tabs .kui-tab { padding-block: 13px; }   /* the kit's tabs (.kui-tab), full height of the sticky bar */
.kx .panel { padding: 18px 20px; }
.kx .panel.hidden { display: none; }

 

/* genealogy / breakdown — the lineage SPINE: stage-accented cards on a coloured rail, transforms as rail nodes
   with a true mass-split bar, the live front in focus, spent parents muted. Shared by the Passport and the delivery trace. */

/* Phone: keep only the Passport action in the sticky bar (the tab labels already need the width). */

/* .node is a transparent structural wrapper; the CARD is .nhead — so a node's children rail BELOW its card,
   never inside its border. That keeps the tree flat (no boxes-in-boxes) even when a live node has descendants. */
.kx .node { position: relative; }
.kx .node + .node, .kx .kids > .node { margin-top: 8px; }
.kx .nhead { position: relative; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--st, var(--line-2)); border-radius: var(--r-s); padding: 11px 12px; }
/* the live front — the still-live leaf you'd act on: haloed focus card + a pulsing "Live · <stage>" tag */
.kx .node.live > .nhead { border-color: color-mix(in srgb, var(--st) 45%, var(--line)); background: color-mix(in srgb, var(--st) 5%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--st) 26%, transparent), 0 8px 22px -14px color-mix(in srgb, var(--st) 60%, transparent); }

@keyframes kx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* STAGED — scanned onto a line but not started (parked). Amber, steady dot (no pulse) — distinct from Running. */
.kx .node.staged > .nhead { border-color: color-mix(in srgb, var(--kui-warn) 38%, var(--line)); background: color-mix(in srgb, var(--kui-warn) 4%, var(--panel)); }

/* a spent parent (transformed away) is a done step — present for the record, visually receded */
.kx .node.done > .nhead { opacity: .82; }
.kx .node.done .nid { color: var(--muted); }
.kx .node .r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kx .node .nid { font-family: var(--mono); font-size: var(--f2); font-weight: 600; }
.kx .cat { font-size: var(--f1); font-weight: 650; padding: 2px 9px; border-radius: var(--kui-r-pill); background: var(--sunk); border: 1px solid var(--line-2); color: var(--ink); }
.kx .node .kg { font-weight: 650; white-space: nowrap; }
.kx .node .kg.gone { color: var(--faint); font-weight: 500; font-style: italic; }

.kx .sb { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f1); font-weight: 600; padding: 3px 8px; border-radius: var(--kui-r-pill); color: var(--st); background: color-mix(in srgb, var(--st) 13%, transparent); }
.kx .sb .dot, .kx .sdot { width: 7px; height: 7px; border-radius: 50%; background: var(--st); flex: none; } .kx .sdot { width: 9px; height: 9px; }
.kx .node .r2 { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 7px; font-size: var(--f2); color: var(--muted); }
.kx .node .r2 .i { display: inline-flex; align-items: center; gap: 4px; } .kx .node .r2 svg { width: 12px; height: 12px; color: var(--faint); }
.kx .flag { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: var(--kui-r-sm); }
.kx .flag.mix { color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); }
.kx .flag.age { color: var(--alert); border: 1px solid color-mix(in srgb, var(--alert) 45%, transparent); }
.kx .node .r3 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; align-items: center; position: relative; }

/* Expand/collapse cue: chevron points right when collapsed, rotates down when the node is open. (After the
   .nhead card wrapper, the caret lives at .node > .nhead .caret — the old `.node.open > .r1` never matched.) */

.kx .act { margin-left: auto; }
.kx .act svg { width: 14px; height: 14px; }

/* the rail: children hang off a vertical stage-neutral line; each unit + transform wears a rail dot */
.kx .kids { position: relative; margin: 8px 0 2px 18px; border-left: 2px solid var(--line-2); padding: 2px 0 4px 18px; }
.kx .kids.hidden { display: none; }
.kx .kids > .node, .kx .kids > .xform { position: relative; }
.kx .kids > .node::before { content: ""; position: absolute; left: -20px; top: 15px; width: 10px; height: 10px; border-radius: 50%; background: var(--st, var(--line-strong)); box-shadow: 0 0 0 3px var(--panel); }
.kx .kids > .node.live::before { box-shadow: 0 0 0 3px var(--panel), 0 0 0 6px color-mix(in srgb, var(--st) 26%, transparent); }
/* transform band = a rail NODE with a mass-split bar (recovered vs removed), coloured by transform type */
.kx .xform { position: relative; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 11px; background: color-mix(in srgb, var(--xc, var(--accent)) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--xc, var(--accent)) 26%, var(--line)); border-radius: 8px; font-size: var(--f2); }
.kx .kids > .xform::before { content: ""; position: absolute; left: -21px; top: 12px; width: 12px; height: 12px; border-radius: 4px; background: var(--xc, var(--accent)); box-shadow: 0 0 0 3px var(--panel); }
.kx .xform .xi { width: 22px; height: 22px; border-radius: 6px; background: var(--xc, var(--accent)); color: #fff; display: grid; place-items: center; flex: none; }
.kx .xform .xi svg { width: 13px; height: 13px; }
.kx .xform b { color: var(--ink); font-weight: 650; }
.kx .xform .basis { font-size: var(--f1); color: var(--xc, var(--accent)); border: 1px solid color-mix(in srgb, var(--xc, var(--accent)) 35%, transparent); border-radius: var(--kui-r-sm); padding: 1px 6px; }
.kx .xform .note { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.kx .massbar, .kap-wiw .massbar { flex-basis: 100%; display: flex; height: 7px; border-radius: var(--kui-r-pill); overflow: hidden; margin-top: 3px; max-width: 360px; background: var(--sunk, var(--kui-panel-2)); }
.kx .massbar i, .kap-wiw .massbar i { height: 100%; }

/* removed / contaminants branch */
.kx .node.rm > .nhead { border-style: dashed; }

  
 

/* documents */
.kx .doc { display: flex; align-items: center; gap: 11px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; margin-bottom: 8px; }
.kx .doc .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--sunk); display: grid; place-items: center; flex: none; color: var(--muted); } .kx .doc .ico svg { width: 15px; height: 15px; }
.kx .doc .nm { flex: 1; min-width: 0; } .kx .doc .nm .t { font-weight: 600; } .kx .doc .nm .s { font-family: var(--mono); font-size: var(--f1); color: var(--faint); }
.kx .doc .st { font-size: var(--f1); font-weight: 700; color: var(--ok); display: inline-flex; gap: 4px; align-items: center; }
.kx .doc .dl svg { width: 13px; height: 13px; }

/* in-desk document preview dialog (global — the Frappe dialog lives outside .kx). The branded template shows on
   a neutral mat so it reads as a page; Frappe's own print toolbar is stripped in JS on load. */
.kap-docprev { background: var(--kui-panel-2, #eef0ee); border: 1px solid var(--kui-line, #e2e2de); border-radius: 8px; overflow: hidden; }
.kap-docframe { width: 100%; height: 68vh; border: 0; background: #fff; display: block; }
.kap-docprev-foot { margin-top: 10px; text-align: right; font-size: var(--kui-fs-md); }

/* recovery */

.kx .donut { width: 104px; height: 104px; flex: none; }
.kx .kv { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.kx .kv .row { display: flex; align-items: center; gap: 8px; font-size: var(--f2); } .kx .kv .row .d { width: 9px; height: 9px; border-radius: 2px; } .kx .kv .row .k { color: var(--muted); } .kx .kv .row .v { margin-left: auto; font-weight: 650; }
 

/* phone (container-query — .kx sets container-type: inline-size) */
@container (max-width: 700px) {
    .kx .idband .top { flex-direction: column; gap: 10px; }
    .kx .idband h1 { font-size: var(--f4); }
    .kx .facts { gap: 11px 16px; }
    .kx .idact { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
    .kx .idact .act { flex: 1; justify-content: center; }
    .kx .tabs { padding: 0 8px; }
    /* 5-tab passport: too many to share the width — let them keep natural width and scroll, with an edge fade
       hinting there's more, and JS scrolls the active one into view (no clipped "Sustainab…"). Same for the
       3-way tier lens when its labels overrun. */
    .mpx .lens { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent); }
    .mpx .viewbar { padding: 9px 12px; }
    .mpx .viewbar .lens { width: 100%; }
    .mpx .mpg-head { padding: 13px 13px; gap: 11px; }
    .mpx .mpg-body { padding: 12px 13px 14px; }
    .kx .panel { padding: 12px 13px; }
    
    
    .kx .kids { margin-left: 11px; padding-left: 14px; }
    .kx .kids > .node::before { left: -16px; }
    .kx .kids > .xform::before { left: -17px; }
    .kx .node { padding: 9px 10px; }
    
    
    .kx .node .act { flex: 1; margin-left: auto; justify-content: center; padding: 10px; }
    .kx .xform { padding: 8px 10px; }
    .kx .xform .note { margin-left: 0; width: 100%; text-align: left; margin-top: 4px; }
    .kx .massbar { max-width: none; }
}

/* ============================================================================================
   Material Passport / DPP — FAITHFUL to artifact bbdaf656. Passport-specific vocabulary scoped
   under .mpx; the shared .kx kit supplies node/kids/xform/tabs/panel/sb/cat/doc/recov/donut/kv.
   Wrapper carries `kx mpx`. ============================================================== */
.mpx { container-type: inline-size; }
/* lens = the ESPR three-tier access model */
/* Purpose eyebrow (blue) — signals this page is the RECORD (read & share), not a board. */
.mpx .mp-purpose { font-size: var(--kui-fs-sm); color: var(--kui-info); font-weight: 700; display: flex; align-items: center; gap: 7px; margin: 2px 2px 12px; }
.mpx .mp-purpose::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* The genealogy "this is the read-only record" framing note. */
.mpx .mp-recnote { display: flex; gap: 9px; align-items: flex-start; border-radius: var(--kui-r); padding: 10px 13px; margin: 0 0 14px; font-size: var(--kui-fs-md); color: var(--kui-text);
    background: color-mix(in srgb, var(--kui-info) 9%, transparent); border: 1px solid color-mix(in srgb, var(--kui-info) 26%, transparent); }
.mpx .mp-recnote svg { width: 15px; height: 15px; flex: none; color: var(--kui-info); margin-top: 1px; }
.mpx .mp-recnote b { color: var(--kui-ink); font-weight: 640; }
.mpx .viewbar { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: var(--f2); border-bottom: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.mpx .viewbar .vb-lbl { color: var(--muted); }
.mpx .viewbar .vb-note { color: var(--faint); font-size: var(--f1); margin-left: auto; }
.mpx .lens { display: inline-flex; background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; padding: 3px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.mpx .lens::-webkit-scrollbar { display: none; }
.mpx .lens button { border: 0; background: none; color: var(--muted); font-size: var(--f2); font-weight: 600; padding: 6px 12px; border-radius: 6px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mpx .lens button svg { width: 14px; height: 14px; }
.mpx .lens button.on { background: var(--panel); color: var(--ink); box-shadow: var(--kui-e1, 0 1px 2px #0000000d); }
/* the hinge: two passports meeting at our factory */
.mpx .flow { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent-soft) 60%, var(--panel-2)); flex-wrap: wrap; font-size: var(--f1); }
.mpx .fnode { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.mpx .fnode.now { color: var(--ink); background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--kui-r-pill); padding: 4px 11px; box-shadow: var(--kui-e1, 0 1px 2px #0000000d); }
.mpx .fnode svg { width: 13px; height: 13px; color: var(--accent); }
.mpx .farr { color: var(--faint); }
.mpx .flow .fn { margin-left: auto; color: var(--faint); font-size: var(--f1); font-family: var(--mono); letter-spacing: .04em; }
/* identity band (idmain + carrier) */
.mpx .idband { display: flex; gap: 22px; padding: 20px 22px; border-bottom: 1px solid var(--line); align-items: flex-start; background: var(--panel-2); border-radius: 0; }
.mpx .idmain { flex: 1; min-width: 0; }
.mpx .idmain h1 { margin: 0; font-size: var(--f5); font-weight: 700; letter-spacing: -.02em; }
.mpx .idmain h1 .q { font-family: var(--mono); font-size: var(--f2); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.mpx .idclient { font-size: var(--f1); color: var(--accent); font-weight: 700; margin-bottom: 5px; }
.mpx .idfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 14px 22px; margin-top: 14px; max-width: 600px; }
.mpx .idfacts .k { font-size: var(--f1); color: var(--faint); }
.mpx .idfacts .v { font-size: var(--f4); font-weight: 650; margin-top: 2px; }
.mpx .idfacts .v.mono { font-family: var(--mono); font-size: var(--f3); }
.mpx .idids { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); font-size: var(--f2); color: var(--muted); }
.mpx .idids b { color: var(--ink); font-weight: 600; }
.mpx .idids .lab { font-size: var(--f1); color: var(--faint); margin-right: 6px; }
.mpx .idact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.mpx .idact button:not(.kui-btn) { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 7px 12px; font-weight: 600; font-size: var(--f2); cursor: pointer; }
.mpx .idact button:not(.kui-btn):hover { border-color: var(--accent); color: var(--accent); }
.mpx .idact button svg { width: 14px; height: 14px; }
.mpx .carrier { flex: 0 0 158px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; }
.mpx .carrier .qr { width: 104px; height: 104px; margin: 0 auto; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 8px; background: #fff; display: block; }
.mpx .carrier .cc { font-size: var(--f1); color: var(--muted); margin-top: 8px; line-height: 1.4; }
.mpx .carrier .cc b { color: var(--ink); }
.mpx .carrier .lbl { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--line-2); font-size: var(--kui-fs-sm); color: var(--faint); line-height: 1.5; text-align: left; }
.mpx .carrier .lbl b { color: var(--muted); }
.mpx .carrier .mp-print { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: var(--f1); color: var(--muted); text-decoration: none; }
.mpx .carrier .mp-print:hover { color: var(--accent); }
/* panel head + tier note */
.mpx .panelhead { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.mpx .phicon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.mpx .phicon svg { width: 24px; height: 24px; }
.mpx .pht { margin: 0; font-size: var(--kui-fs-xl); font-weight: 680; letter-spacing: -.01em; }
.mpx .phs { margin: 2px 0 0; font-size: var(--f2); color: var(--muted); }
/* DPP single-scroll data groups + sticky section-nav (replaces the passport tabs) — one record, each ESPR group
   a collapsible section; the nav jumps + opens; "Expand all" folds the whole record for reading / print. */
/* section jump-nav: the kit's underline tabs in one scrolling strip (never wraps), Expand all beside it */
.mpx .mpnavrow { position: sticky; top: 49px; z-index: 6; display: flex; align-items: center; gap: 8px; margin: 4px 0 14px;
    background: color-mix(in srgb, var(--kui-bg) 92%, transparent); backdrop-filter: blur(6px); }
.mpx .mpnav { flex: 1 1 auto; min-width: 0; }
.mpx .mpnav .kui-tab { flex: none; white-space: nowrap; min-height: 44px; }
.mpx .mpnav .mpnav-s { display: none; }
/* a phone: the five sections and Expand all as a 2 × 3 grid with short labels, never a strip clipped sideways */
@media (max-width: 599px) {
    .mpx .mpnavrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .mpx .mpnav { display: contents; }
    .mpx .mpnav .kui-tab { min-width: 0; justify-content: center; }
    .mpx .mpnav .mpnav-l { display: none; }
    .mpx .mpnav .mpnav-s { display: inline; }
    .mpx .mpnavrow .mpnav-all { min-height: 44px; }
}
.mpx .mpnavrow .mpnav-all { flex: none; }
.mpx .mpnav.has-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.mpx .mpgroups { display: flex; flex-direction: column; gap: 12px; }
.mpx .mpg { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; scroll-margin-top: 108px; }
.mpx .mpg-head { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: none; border: 0; padding: 15px 18px; cursor: pointer; color: inherit; }
.mpx .mpg-head:hover { background: color-mix(in srgb, var(--sunk) 55%, transparent); }
.mpx .mpg-head .phicon { width: 38px; height: 38px; border-radius: var(--kui-r-lg); }
.mpx .mpg-head .phicon svg { width: 20px; height: 20px; }
.mpx .mpg-tt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mpx .mpg-tt .pht { font-size: var(--kui-fs-lg); }
.mpx .mpg-sum { margin-left: auto; font-size: var(--f2); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mpx .mpg-caret { flex: none; color: var(--faint); display: inline-flex; }
.mpx .mpg-caret svg { width: 16px; height: 16px; transition: transform var(--kui-t); }
.mpx .mpg.open .mpg-caret svg { transform: rotate(90deg); }
.mpx .mpg.open .mpg-sum { display: none; }
.mpx .mpg.open .mpg-head { border-bottom: 1px solid var(--line); }
.mpx .mpg-body { padding: 16px 18px 18px; }
.mpx .mpg:not(.open) .mpg-body { display: none; }
.mpx .tiernote { font-size: var(--f2); color: var(--muted); background: var(--sunk); border: 1px dashed var(--line-2); border-radius: var(--r-s); padding: 11px 13px; margin-top: 16px; display: flex; gap: 9px; align-items: flex-start; }
.mpx .tiernote svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--muted); }
.mpx .tiernote b { color: var(--ink); }
/* journey timeline */
.mpx .tl { position: relative; margin-left: 6px; }
.mpx .tl::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line-2); }
.mpx .ev { position: relative; padding: 0 0 18px 26px; }
.mpx .ev:last-child { padding-bottom: 0; }
.mpx .ev .d { position: absolute; left: 0; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--st, var(--accent)); border: 2px solid var(--panel); box-shadow: 0 0 0 2px var(--st, var(--accent)); }
.mpx .ev.now .d { box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 30%, transparent); }
.mpx .ev .t { font-weight: 650; font-size: var(--f3); }
.mpx .ev .meta { font-size: var(--f2); color: var(--muted); margin-top: 2px; }
.mpx .ev .meta .who { font-family: var(--mono); font-size: var(--f1); }
.mpx .ev.now .t::after { content: "now"; margin-left: 8px; font-family: var(--mono); font-size: var(--kui-fs-xs); font-weight: 700; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--kui-r-sm); padding: 1px 6px; }
/* composition */
.mpx .comp { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.mpx .cgroup h4 { margin: 0 0 9px; font-size: var(--f2); color: var(--faint); font-weight: 600; }
.mpx .crow { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: var(--f2); }
.mpx .crow .lb { width: 110px; flex: none; color: var(--ink); font-weight: 500; }
.mpx .crow .track { flex: 1; height: 8px; background: var(--sunk); border-radius: var(--kui-r-pill); overflow: hidden; }
.mpx .crow .track i { display: block; height: 100%; background: var(--c, var(--accent)); border-radius: var(--kui-r-pill); }
.mpx .crow .pc { width: 42px; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.mpx .badge-rc { display: inline-flex; align-items: center; gap: 7px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--kui-r-pill); padding: 7px 13px; font-weight: 650; color: var(--accent); font-size: var(--f3); }
.mpx .badge-rc svg { width: 15px; height: 15px; }
.mpx .certref { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--f1); color: var(--muted); background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; margin-left: 8px; }
.mpx .certref svg { width: 13px; height: 13px; }
.mpx .parent-of { font-size: var(--f2); color: var(--muted); margin: 0 0 8px; }
.mpx .socbox { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 15px; max-width: 560px; margin-top: 16px; }
.mpx .socstat { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ok); font-size: var(--f3); margin-bottom: 8px; }
.mpx .socstat svg { width: 15px; height: 15px; }
.mpx .socbox ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: var(--f2); line-height: 1.6; }
/* documents tier tag (kit supplies .doc) */
.mpx .doc .pub { font-family: var(--mono); font-size: var(--kui-fs-sm); font-weight: 700; padding: 2px 7px; border-radius: var(--kui-r-sm); }
.mpx .doc .pub.p { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); }
.mpx .doc .pub.a { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
/* sustainability */
.mpx .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.mpx .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.mpx .kpi .n { font-size: 26px; font-weight: 720; letter-spacing: -.02em; color: var(--c, var(--ink)); }
.mpx .kpi .l { font-size: var(--f2); color: var(--muted); margin-top: 3px; }
.mpx .eol { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); margin-top: 16px; max-width: 560px; overflow: hidden; }
.mpx .eolrow { display: flex; justify-content: space-between; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--line); font-size: var(--f3); }
.mpx .eolrow:last-child { border-bottom: 0; }
.mpx .eolrow .k { color: var(--muted); } .mpx .eolrow .v { font-weight: 650; text-align: right; }
.mpx .cocbadge { font-size: var(--f1); font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 6px; padding: 3px 8px; }
/* passport genealogy node: static (no caret) — kg sits right in r1 */
.mpx .node .r1 .kg { margin-left: auto; }
/* register (client/lot browse) reuses .di2 from the kit */
.mpx .mp-reg-h { font-size: var(--f1); color: var(--faint); margin: 4px 2px 12px; }
.mpx .mp-reg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
/* Passport finder — Command-Hub-style: a rail (deliveries OR stages) + the selection's passport cards. Two
   panes on desk; on a phone the cards replace the rail (a back button returns). */
.mpx .mpf { display: grid; grid-template-columns: 244px 1fr; gap: 16px; align-items: start; }
.mpx .mpf-di-n { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--faint); }
.mpx .mpf-rail { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; position: sticky; top: 12px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; }
.mpx .mpf-rail-h { font-size: var(--kui-fs-sm); color: var(--faint); padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--sunk); }
.mpx #mpf-list { overflow: auto; }
.mpx .mpf-di { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; cursor: pointer; font: inherit; transition: background var(--kui-t); }
.mpx .mpf-di:hover, .mpx .mpf-di:focus-visible { background: color-mix(in srgb, var(--accent) 6%, var(--panel)); outline: none; }
.mpx .mpf-di.on { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: inset 3px 0 0 var(--accent); }
.mpx .mpf-di-t { display: flex; align-items: center; gap: 8px; }
.mpx .mpf-di-cli { font-weight: 620; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpx .mpf-di-m { font-family: var(--mono); font-size: var(--f1); color: var(--faint); margin-top: 3px; }
.mpx .mpf-main { min-width: 0; }
.mpx .mpf-hint { display: flex; gap: 12px; align-items: flex-start; padding: 18px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); font-size: var(--f2); line-height: 1.5; }
.mpx .mpf-hint svg { width: 22px; height: 22px; flex: none; color: var(--faint); }
.mpx .mpf-back { display: none; align-items: center; gap: 5px; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0 0 10px; }
.mpx .mpf-treehead { margin-bottom: 14px; }
.mpx .mpf-th-t { font-size: var(--f4); font-weight: 690; letter-spacing: -.01em; } .mpx .mpf-th-t .mpf-th-q { font-family: var(--mono); font-weight: 500; color: var(--muted); font-size: var(--f2); }
.mpx .mpf-th-m { display: flex; align-items: center; gap: 6px; font-size: var(--f1); color: var(--muted); margin-top: 5px; }
/* clickable finder node — the shared genealogy head becomes a "open passport" affordance */
.mpx .mpf-clickable { cursor: pointer; border-radius: var(--kui-r); transition: background var(--kui-t); }
.mpx .mpf-clickable:hover, .mpx .mpf-clickable:focus-visible { background: color-mix(in srgb, var(--accent) 8%, transparent); outline: none; }
.mpx .mpf-clickable:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.mpx .mpf-go { margin-left: auto; color: var(--faint); display: inline-flex; } .mpx .mpf-go svg { width: 15px; height: 15px; }
.mpx .mpf-clickable:hover .mpf-go { color: var(--accent); }
/* passport-card gallery — the DPP directory: QR + identity cards, grouped along the breakdown */
.mpx .mpf-grouplbl { font-size: var(--kui-fs-sm); color: var(--faint); margin: 20px 2px 11px; display: flex; align-items: center; gap: 9px; }
.mpx .mpf-grouplbl::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* one card per row in the desk's main pane; goes 2-up on a wide / wall display */
.mpx .pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.mpx .pcard { display: flex; gap: 13px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--sc, var(--line-2)); border-radius: var(--r-s); padding: 13px 14px; transition: box-shadow var(--kui-t), border-color var(--kui-t); }
.mpx .pcard:hover { box-shadow: 0 6px 22px -14px color-mix(in srgb, var(--sc) 70%, transparent); border-color: color-mix(in srgb, var(--sc) 45%, var(--line)); }
.mpx .pcard.master { border-left-width: 4px; background: color-mix(in srgb, var(--sc) 5%, var(--panel)); }
.mpx .pc-qr { width: 68px; height: 68px; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px; display: grid; place-items: center; }
.mpx .pc-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.mpx .pc-qr-l { width: 20px; height: 20px; border: 2px solid var(--line-2); border-top-color: var(--faint); border-radius: 50%; animation: kap-spin .8s linear infinite; }
.mpx .pc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mpx .pc-id { font-family: var(--mono); font-size: var(--f2); font-weight: 600; letter-spacing: -.01em; word-break: break-all; }
.mpx .pc-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
.mpx .pc-kind { font-size: var(--kui-fs-xs); font-weight: 700; color: var(--muted); border: 1px solid var(--line-2); border-radius: var(--kui-r-sm); padding: 2px 6px; }
.mpx .pc-meta { font-size: var(--f1); color: var(--muted); margin-top: 6px; } .mpx .pc-meta b { color: var(--ink); font-weight: 600; }
/* "what's in this bale" — item count + fibre/type mix from the scan results */
.mpx .pc-contents { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f1); color: var(--muted); margin-top: 6px; background: var(--sunk); border-radius: var(--kui-r); padding: 4px 9px; align-self: flex-start; }
.mpx .pc-contents svg { width: 12px; height: 12px; flex: none; opacity: .7; } .mpx .pc-contents b { color: var(--ink); font-weight: 640; }
.mpx .pc-acts { display: flex; gap: 7px; margin-top: auto; padding-top: 11px; }
/* card actions are quiet: a gallery of cards must not be a wall of black buttons */
.mpx .pc-print svg { width: 13px; height: 13px; }
/* SPENT unit — its material has moved on (torn / blended). Muted card + a "→ now X" tag, so live units stand out */
.mpx .pcard--spent { background: color-mix(in srgb, var(--sunk) 60%, var(--panel)); }
.mpx .pcard--spent .pc-qr { opacity: .45; } .mpx .pcard--spent:hover .pc-qr { opacity: .7; }
.mpx .pcard--spent .pc-id { color: var(--muted); }
.mpx .pc-became { font-size: var(--kui-fs-sm); font-weight: 700; color: var(--s-torn, var(--muted)); background: color-mix(in srgb, var(--muted) 12%, transparent); border-radius: var(--kui-r-sm); padding: 2px 7px; }
/* the honest STATE chip — the card's hero (in stock / staged / running / sold) */
.mpx .pc-state { display: inline-flex; align-items: center; gap: 7px; font-size: var(--f1); font-weight: 640; padding: 3px 10px; border-radius: var(--kui-r-pill); }
.mpx .pc-state .sd { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
.mpx .pc-state.stock { color: var(--st-mp-stock); background: color-mix(in srgb, var(--st-mp-stock) 13%, transparent); }
.mpx .pc-state.staged { color: var(--st-mp-staged); background: color-mix(in srgb, var(--st-mp-staged) 14%, transparent); }
.mpx .pc-state.running { color: var(--st-mp-run); background: color-mix(in srgb, var(--st-mp-run) 15%, transparent); }
.mpx .pc-state.running .sd { animation: kap-stage-pulse 1.6s ease-in-out infinite; }
.mpx .pc-state.sold { color: var(--st-mp-sold); background: color-mix(in srgb, var(--st-mp-sold) 14%, transparent); }
/* running card gets a faint green ring so live work stands out in the grid */
.mpx .pcard.state-running { border-color: color-mix(in srgb, var(--st-mp-run) 40%, var(--line)); }
.mpx { --st-mp-stock: #5b6b7a; --st-mp-staged: #c0851f; --st-mp-run: #1f9d57; --st-mp-sold: #7a5bb0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mpx { --st-mp-stock: #8ba0b2; --st-mp-staged: #daa437; --st-mp-run: #3fca7e; --st-mp-sold: #a98cd8; } }
:root[data-theme="dark"] .mpx { --st-mp-stock: #8ba0b2; --st-mp-staged: #daa437; --st-mp-run: #3fca7e; --st-mp-sold: #a98cd8; }
.mpx .mpf-note { margin-top: 24px; padding: 13px 15px; border: 1px dashed var(--line-2); border-radius: var(--r-s); color: var(--muted); font-size: var(--f1); display: flex; gap: 10px; align-items: flex-start; }
.mpx .mpf-note svg { width: 16px; height: 16px; flex: none; color: var(--faint); margin-top: 1px; }
/* delivery top band — master-lot details (left) + recovery insight (right) */
.mpx .mpf-top { display: grid; grid-template-columns: 1.75fr 1fr; gap: 14px 22px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; margin-bottom: 16px; }
.mpx .mpf-top-l { display: flex; gap: 14px; min-width: 0; }
.mpx .mpf-top-qr { width: 66px; height: 66px; flex: none; align-self: flex-start; }
.mpx .mpf-top-info { min-width: 0; }
.mpx .mpf-top-cli { font-size: var(--f4); font-weight: 700; letter-spacing: -.01em; }
.mpx .mpf-top-cli .mpf-top-del { font-family: var(--mono); font-weight: 500; color: var(--muted); font-size: var(--f2); }
.mpx .mpf-top-lot { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; } .mpx .mpf-top-lot .mono { font-family: var(--mono); font-size: var(--f2); font-weight: 600; }
.mpx .mpf-top-m { font-size: var(--f1); color: var(--muted); margin-top: 8px; } .mpx .mpf-top-m b { color: var(--ink); font-weight: 640; }
.mpx .mpf-top-acts { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
/* master-lot buttons are IDENTICAL to the card buttons (.pc-acts button) — same size / shape / gap */
.mpx .mpf-top-r { border-left: 1px solid var(--line); padding-left: 24px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.mpx .mpf-top-r .mi-rate { display: flex; align-items: baseline; gap: 7px; }
.mpx .mpf-top-r .mi-rate b { font-size: var(--kui-fs-2xl); font-weight: 720; letter-spacing: -.03em; color: var(--kui-ink); font-variant-numeric: tabular-nums; }   /* a figure, ink */
.mpx .mpf-top-r .mi-rate span { font-size: var(--f1); color: var(--muted); }
.mpx .mpf-top-r .mi-bar { height: 11px; border-radius: var(--kui-r-pill); overflow: hidden; display: flex; background: var(--sunk); margin: 10px 0 8px; }
.mpx .mpf-top-r .mi-bar i { height: 100%; }
.mpx .mpf-top-r .mi-leg { display: flex; flex-direction: column; gap: 5px; font-size: var(--f1); color: var(--muted); }
.mpx .mpf-top-r .mi-leg span { display: inline-flex; align-items: center; gap: 6px; } .mpx .mpf-top-r .mi-leg i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.mpx .mpf-gl-n { font-family: var(--mono); font-size: var(--kui-fs-sm); color: var(--faint); font-weight: 700; }
.mpx .mpf-noch { color: var(--muted); font-size: var(--f2); padding: 4px 2px 8px; }
/* The client name must not determine the width of the finder toolbar. */
.mpx .kui-ph-filters { margin-top: 12px; }
.mpx .mp-retry { min-height: 48px; margin: 8px 12px; }
.mpx .kui-filter { min-width: 0; width: 100%; max-width: 480px; }
.mpx .kui-filter__s { min-width: 0; flex: 1; border-radius: 6px; }
.mpx .mpf-top { border-radius: 8px; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.mpx .mpf-top-info, .mpx .pc-body { overflow-wrap: anywhere; }
.mpx .mpf-top-cli, .mpx .mpf-top-r .mi-rate b, .mpx .pc-id { letter-spacing: 0; }
@container (max-width: 700px) {
    .mpx .kui-ph-search { min-width: 0; flex-basis: 100%; }
    .mpx .kui-ph-right { margin-left: 0; width: 100%; }
    .mpx .kui-seg { display: flex; width: 100%; }
    .mpx .kui-seg__b { flex: 1; min-height: 48px; }
    .mpx .kui-filter__s, .mpx .pc-acts button, .mpx .mpf-top-acts button, .mpx .mpf-back { min-height: 48px; }
    .mpx .pc-acts { flex-wrap: wrap; }
    .mpx .mpf-top-l { flex-wrap: wrap; }
    .mpx .mpf-top-info { flex: 1 1 180px; }
    .mpx .idband { flex-direction: column; gap: 12px; padding: 16px; }
    .mpx .carrier { display: flex; flex: none; align-items: center; gap: 13px; text-align: left; padding: 12px 14px; width: 100%; }
    .mpx .carrier .qr { width: 66px; height: 66px; flex: none; margin: 0; }
    .mpx .carrier .cc { margin-top: 0; }
    .mpx .carrier .lbl { display: none; }
    .mpx .idfacts { grid-template-columns: 1fr 1fr; gap: 14px 16px; max-width: none; }
    .mpx .idids { flex-direction: column; gap: 8px; }
    .mpx .kpis { grid-template-columns: 1fr 1fr; }
    .mpx .recov { flex-direction: column; text-align: center; max-width: none; }
    .mpx .comp, .mpx .socbox, .mpx .eol { max-width: none; }
    .mpx .flow .fn { display: none; }
    /* Finder → one pane on phone: show the rail; once a delivery is picked (.mpf--open) swap to its tree + a
       back button (same idiom as the Capacity Planner day-peek). */
    .mpx .mpf { grid-template-columns: 1fr; }
    .mpx .mpf-rail { position: static; max-height: none; }
    .mpx .mpf--open .mpf-rail { display: none; }
    .mpx .mpf:not(.mpf--open) .mpf-main { display: none; }
    .mpx .mpf-back { display: inline-flex; }
    /* top band stacks: details over recovery (border becomes a divider on top) */
    .mpx .mpf-top { grid-template-columns: 1fr; }
    .mpx .mpf-top-r { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
}

/* ============================================================================================
   Factory Overview — FAITHFUL to artifact f54c1e52. Health verdict · attainment KPIs · per-line
   ANDON · areas · flow spine · exceptions · mass balance · three registers (Desk/Wall/Handheld).
   Scoped under .fox; wrapper carries `kx fox`. ============================================= */
.fox { container-type: inline-size; --f0: var(--kui-fs-sm); --f6: var(--kui-fs-2xl); display: flex; flex-direction: column; gap: 16px; }
.fox .seclbl { font-size: 14px; font-weight: 650; color: var(--kui-text); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.fox .seclbl::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* top hero — the MISSION read (mass balance, left, most space) leads; a compact plant-status verdict sits right.
   Stacks only on a genuinely narrow board (phone), not at desk width. */
.fox .fo-hero { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: stretch; }
.fox .fo-hero .verdict { margin: 0; height: 100%; }
@container (max-width: 620px) { .fox .fo-hero { grid-template-columns: 1fr; } }
/* verdict / health band */
.fox .verdict { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: color-mix(in srgb, var(--vc) 5%, var(--panel)); border: 1px solid color-mix(in srgb, var(--vc) 24%, var(--line)); border-radius: var(--r); padding: 15px 16px; }
.fox .verdict .vi { width: 30px; height: 30px; flex: none; border-radius: var(--kui-r); background: color-mix(in srgb, var(--vc) 14%, transparent); color: var(--vc); display: grid; place-items: center; }
.fox .verdict .vi svg { width: 17px; height: 17px; }
.fox .verdict .vt { flex: 1; min-width: 0; }
.fox .verdict .vk { font-size: var(--f0); font-weight: 700; color: var(--vc); }
.fox .verdict .vt b { font-weight: 690; font-size: var(--f4); display: block; margin-top: 2px; letter-spacing: -.01em; }
.fox .verdict .vt .sub { font-size: var(--f2); color: var(--muted); margin-top: 3px; max-width: 820px; }
.fox .verdict .vact { flex: none; }   /* ink primary (one button skin below): red is an alert, not an action */
/* KPI strip */
.fox .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; }
.fox .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px 13px; }
.fox .kpi.attn { border-color: color-mix(in srgb, var(--kc) 50%, var(--line)); background: color-mix(in srgb, var(--kc) 7%, var(--panel)); }
/* Recovery leads the strip as the mission metric: green wash + a mini diversion gauge under the number */
.fox .kpi.lead { border-color: color-mix(in srgb, var(--kc) 42%, var(--line)); background: color-mix(in srgb, var(--kc) 8%, var(--panel)); }
.fox .kpi.lead .v { color: var(--kc); }
.fox .kpi .recbar { height: 5px; border-radius: var(--kui-r-pill); background: color-mix(in srgb, var(--kc) 16%, var(--sunk)); overflow: hidden; margin: 7px 0 2px; }
.fox .kpi .recbar i { display: block; height: 100%; border-radius: var(--kui-r-pill); background: var(--kc); transform-origin: left; animation: fo-grow .9s cubic-bezier(.33,1,.68,1) both; }
@keyframes fo-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* live cues: running andon dot pulses; line target bars grow in on paint */
.fox .lcard .state.run .sd { animation: fo-andon 2.2s ease-in-out infinite; }
@keyframes fo-andon { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--ok) 6%, transparent); } }
.fox .lcard .tgt .bar i { transform-origin: left; animation: fo-grow .9s cubic-bezier(.33,1,.68,1) both; }
@media (prefers-reduced-motion: reduce) { .fox .kpi .recbar i, .fox .lcard .tgt .bar i { animation: none; } .fox .lcard .state.run .sd { animation: none; } }
.fox .kpi .k { font-size: var(--f0); color: var(--faint); }
.fox .kpi .v { font-size: var(--f5); font-weight: 720; letter-spacing: -.02em; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fox .kpi .v small { font-size: var(--f2); font-weight: 600; color: var(--muted); }
.fox .kpi.attn .v { color: var(--kc); }
.fox .kpi .s { font-size: var(--f1); color: var(--muted); margin-top: 3px; }
.fox .kpi.attn .s { color: var(--kc); font-weight: 600; }
/* per-line ANDON board */
.fox .lineboard { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.fox .lcard { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--lc); border-radius: var(--r-s); padding: 14px 15px; }
.fox .lcard.behind { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 5%, var(--panel)); }   /* behind plan: needs someone */
/* a line card drills into its kiosk — give it the affordance (pointer + lift on hover/focus) */
.fox .lcard[data-go] { cursor: pointer; transition: border-color var(--kui-t), box-shadow var(--kui-t); }
.fox .lcard[data-go]:hover, .fox .lcard[data-go]:focus-visible { border-color: color-mix(in srgb, var(--lc) 55%, var(--line)); box-shadow: 0 6px 20px -14px color-mix(in srgb, var(--lc) 70%, transparent); outline: none; }
.fox .lcard[data-go]:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--lc) 45%, transparent); }
.fox .lcard .lh { display: flex; align-items: center; gap: 9px; }
.fox .lcard .ln { font-size: var(--f4); font-weight: 685; letter-spacing: -.01em; }
.fox .lcard .drumt { font-size: var(--f0); font-weight: 700; color: var(--lc); border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent); border-radius: var(--kui-r-sm); padding: 2px 6px; }
.fox .lcard .state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--f2); font-weight: 640; text-transform: capitalize; }
.fox .lcard .state .sd { width: 8px; height: 8px; border-radius: 50%; }
.fox .lcard .state.run { color: var(--ok); } .fox .lcard .state.run .sd { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.fox .lcard .state.idle { color: var(--faint); } .fox .lcard .state.idle .sd { background: var(--faint); }
/* STAGED — feed queued at the line but no started run (amber, steady — distinct from a live running line) */
.fox .lcard .state.staged { color: var(--warn); } .fox .lcard .state.staged .sd { background: var(--warn); }
.fox .lcard .state.down { color: var(--alert); } .fox .lcard .state.down .sd { background: var(--alert); }
.fox .lcard .lmeta { font-size: var(--f2); color: var(--muted); margin: 8px 0 11px; } .fox .lcard .lmeta b { color: var(--ink); font-weight: 620; }
.fox .lcard .tgt { display: flex; align-items: center; gap: 11px; }
.fox .lcard .tgt .nums { font-variant-numeric: tabular-nums; font-weight: 670; font-size: var(--f3); white-space: nowrap; }
.fox .lcard .tgt .bar { flex: 1; height: 8px; border-radius: var(--kui-r-pill); background: var(--sunk); overflow: hidden; }
.fox .lcard .tgt .bar i { display: block; height: 100%; border-radius: var(--kui-r-pill); }
.fox .lcard .foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.fox .lcard .plan { display: inline-flex; align-items: center; gap: 4px; font-size: var(--f1); font-weight: 600; padding: 3px 9px; border-radius: var(--kui-r-sm); }
.fox .lcard .plan.on { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.fox .lcard .plan.off { color: var(--alert); background: color-mix(in srgb, var(--alert) 12%, transparent); }
.fox .lcard .oee { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 665; }
.fox .lcard .oee small { color: var(--faint); font-size: var(--f0); font-weight: 600; }
/* areas strip */
.fox .areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.fox .area { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--ac); border-radius: var(--r-s); padding: 11px 13px; }
/* the whole board is navigable — area + spine cards drill to their surface, so give them the affordance */
.fox .area[data-go], .fox .snode[data-go], .fox .sstore[data-go] { cursor: pointer; transition: border-color var(--kui-t), box-shadow var(--kui-t); }
.fox .area[data-go]:hover, .fox .area[data-go]:focus-visible { border-color: color-mix(in srgb, var(--ac) 55%, var(--line)); box-shadow: 0 6px 20px -14px color-mix(in srgb, var(--ac) 60%, transparent); outline: none; }
.fox .snode[data-go]:hover, .fox .snode[data-go]:focus-visible { border-color: color-mix(in srgb, var(--nc) 55%, var(--line)); box-shadow: 0 6px 18px -13px color-mix(in srgb, var(--nc) 60%, transparent); outline: none; }
.fox .sstore[data-go]:hover, .fox .sstore[data-go]:focus-visible { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); box-shadow: 0 6px 18px -13px color-mix(in srgb, var(--accent) 55%, transparent); outline: none; }
.fox .area[data-go]:focus-visible, .fox .snode[data-go]:focus-visible, .fox .sstore[data-go]:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.fox .area .an { font-size: var(--f0); color: var(--faint); }
.fox .area .av { font-size: var(--f4); font-weight: 710; margin-top: 3px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fox .area .as { font-size: var(--f1); color: var(--muted); margin-top: 2px; }
/* flow spine */
.fox .spine { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 14px; overflow-x: auto; }
.fox .spinerow { display: flex; align-items: stretch; gap: 0; min-width: 900px; }
.fox .snode { flex: 1; min-width: 104px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 12px; position: relative; }
.fox .snode.drum { border-color: color-mix(in srgb, var(--nc) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nc) 20%, transparent); }
.fox .snode .sh { display: flex; align-items: center; gap: 7px; }
.fox .snode .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--nc); }
.fox .snode .nm { font-weight: 660; font-size: var(--f3); }
.fox .snode .drumtag { position: absolute; top: -8px; right: 9px; font-size: var(--f0); font-weight: 700; color: var(--nc); background: var(--panel); border: 1px solid color-mix(in srgb, var(--nc) 45%, transparent); border-radius: var(--kui-r-sm); padding: 2px 6px; }
.fox .snode .cnt { font-size: var(--f6); font-weight: 730; letter-spacing: -.02em; margin-top: 7px; font-variant-numeric: tabular-nums; line-height: 1; }
.fox .snode .cnt small { font-size: var(--f2); font-weight: 600; color: var(--faint); }
.fox .snode .kg { font-family: var(--mono); font-size: var(--f1); color: var(--muted); margin-top: 3px; }
.fox .sarrow { flex: 0 0 auto; align-self: center; display: inline-flex; color: var(--kui-text-soft); padding: 0 4px; }   /* an icon, at readable contrast */
.fox .sstore { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 10px; min-width: 110px; background: var(--sunk); border: 1px dashed var(--line-2); border-radius: var(--r-s); margin: 0 4px; }
.fox .sstore .sk { font-size: var(--f0); color: var(--faint); text-align: center; }
.fox .sstore .sv { font-size: var(--f4); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
/* phone: the stations stack top to bottom instead of a strip to scroll sideways */
@media (max-width: 600px) {
  .fox .spine { overflow-x: visible; }
  .fox .spinerow { flex-direction: column; min-width: 0; gap: 6px; }
  .fox .snode, .fox .sstore { min-width: 0; }
  .fox .sarrow { transform: rotate(90deg); padding: 0; line-height: 1; }
}
.fox .sstore .sl { font-size: var(--f0); text-align: center; font-weight: 700; }
/* exceptions + mass balance (two columns) */
.fox .cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.fox .exrail { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.fox .exhead { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--line); font-weight: 660; }
.fox .exhead .cnt { margin-left: auto; font-size: var(--f1); color: var(--muted); }
.fox .exitem { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); cursor: pointer; }
.fox .exitem:last-child { border-bottom: 0; }
.fox .exitem .ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--ec) 15%, transparent); color: var(--ec); }
.fox .exitem .ic svg { width: 17px; height: 17px; }
.fox .exitem .tx b { font-weight: 640; }
.fox .exitem .tx .sub { font-size: var(--f2); color: var(--muted); margin-top: 1px; }
.fox .exitem .meta { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--f2); font-weight: 660; color: var(--ec); white-space: nowrap; }
.fox .exitem .meta small { display: block; font-size: var(--f0); color: var(--faint); font-weight: 500; }
.fox .exitem.calm .ic { background: var(--sunk); color: var(--muted); } .fox .exitem.calm .meta { color: var(--muted); }
.fox.is-stale .fo-foot { color: var(--alert) !important; font-weight: 700; }
.fox .rcol { display: flex; flex-direction: column; gap: 16px; }
/* mass-balance donut card (top hero, right) */
.fox .fo-mb { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 17px; display: flex; flex-direction: column; height: 100%; }
.fox .fo-mb-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fox .fo-mb-head b { font-weight: 680; font-size: var(--f3); letter-spacing: -.01em; }
.fox .fo-mb-head .s { font-size: var(--f1); color: var(--muted); }
.fox .fo-mb-body { display: flex; align-items: center; gap: 20px; margin-top: auto; padding-top: 14px; }
.fox .fo-donut { position: relative; width: 112px; height: 112px; flex: none; }
.fox .fo-donut svg { width: 100%; height: 100%; }
.fox .fo-donut circle { transition: stroke-dasharray .7s cubic-bezier(.33,1,.68,1); }
.fox .fo-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fox .fo-donut-c b { font-size: var(--kui-fs-xl); font-weight: 720; letter-spacing: -.03em; line-height: 1; color: var(--kui-good); font-variant-numeric: tabular-nums; }
.fox .fo-donut-c span { font-size: var(--kui-fs-xs); color: var(--muted); margin-top: 3px; max-width: 64%; text-align: center; line-height: 1.15; }
.fox .fo-mb-legend { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.fox .fo-mb-row { display: flex; align-items: center; gap: 9px; font-size: var(--f2); }
.fox .fo-mb-row .d { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.fox .fo-mb-row .k { color: var(--muted); white-space: nowrap; } .fox .fo-mb-row .v { margin-left: auto; font-weight: 660; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fox .fo-donut circle { transition: none; } }
/* One responsive board — reflows by screen (below) and follows the global light/dark theme. On a big
   shop-floor display it just scales up; dark mode gives the mill-black control-room glow via the theme. */
@container (max-width: 760px) {
    .fox .kpis, .fox .areas { grid-template-columns: 1fr 1fr; }
    /* Recovery (mission metric) spans the full width here — emphasises it and keeps the other 6 an even 2×3. */
    .fox .kpi.lead { grid-column: 1 / -1; }
    .fox .lineboard, .fox .cols { grid-template-columns: 1fr; }
    /* keep the verdict's "why" sub-line on phone (it's the context, not teaching prose); only the redundant
       eyebrow is dropped. Top-align so the icon + action sit beside the title, with the sub flowing below. */
    .fox .verdict { gap: 11px; align-items: flex-start; } .fox .verdict .vk { display: none; }
    .fox .verdict .vi, .fox .verdict .vact { align-self: flex-start; }
    /* the 900px flow spine scrolls horizontally here — fade the right edge so it reads as "more to scroll". */
    .fox .spine { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent); }
}

/* Wall-display register: preserve every operational section within a 1080p viewport.
   Large screens get denser vertical rhythm and larger status labels, not desktop whitespace scaled up. */
@media (min-width: 1600px) and (min-height: 900px) {
    .fox { gap: 8px; }
    .fox .seclbl { margin-bottom: 4px; letter-spacing: .08em; }
    .fox .fo-hero { grid-template-columns: 1.65fr 1fr; gap: 10px; }
    .fox .verdict {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 10px 13px;
    }
    .fox .verdict .vact { grid-column: 3; grid-row: 1; }
    .fox .fo-mb { padding: 9px 13px; }
    .fox .fo-mb-body { padding-top: 4px; gap: 16px; }
    .fox .fo-donut { width: 120px; height: 120px; }   /* never smaller on a bigger screen: its label must fit inside */
    .fox .fo-donut-c b { font-size: var(--f5); }
    .fox .fo-mb-legend { gap: 5px; }
    .fox .kpis { gap: 8px; }
    .fox .kpi { padding: 8px 11px; }
    .fox .kpi .v { margin-top: 1px; }
    .fox .kpi .s { margin-top: 1px; }
    .fox .lineboard { gap: 8px; }
    .fox .lcard { padding: 9px 12px; }
    .fox .lcard .lmeta { margin: 4px 0 6px; }
    .fox .lcard .foot { margin-top: 5px; }
    .fox .areas { gap: 8px; }
    .fox .area { padding: 7px 11px; }
    .fox .spine { padding: 9px 11px; }
    .fox .snode { padding: 8px 10px; }
    .fox .snode .cnt { margin-top: 4px; font-size: var(--f5); }
    .fox .sstore { gap: 3px; padding: 6px 9px; }
    .fox .exhead { padding: 8px 13px; }
    .fox .exitem { padding: 8px 13px; }
    .fox .exitem .ic { width: 28px; height: 28px; }
    .fox .fo-foot { margin-top: 0 !important; font-size: var(--f2) !important; }
}

/* ============================================================================================
   Line Kiosk — FAITHFUL to artifact db02f9ee. Scan-first floor execute: line header + line-switch +
   machine status · governed basis band · NOW-job hero · scan-to-pull · run-queue · zone-④ bins/
   compose · stats · bales-out · sticky Scan/Complete on handheld. One responsive kiosk (no device
   toggle) that follows the global theme. Scoped under .lk; wrapper carries `kx lk`. ============= */
.lk { container-type: inline-size; --f0: var(--kui-fs-md); --f1: var(--kui-fs-base); --f2: 15px; --f7: var(--kui-fs-3xl);   /* floor: 13/14/15 */ display: flex; flex-direction: column; }
.lk .cbar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }
.lk .cbar .lh { display: flex; align-items: center; gap: 11px; min-width: 0; }
.lk .cbar .ldot { width: 11px; height: 32px; border-radius: 4px; background: var(--lc, var(--s-sorted)); flex: none; }
.lk .cbar h1 { margin: 0; font-size: var(--f5); font-weight: 700; letter-spacing: -.02em; }
.lk .cbar h1 .ls { display: block; font-size: var(--f1); color: var(--muted); font-weight: 500; margin-top: 1px; }
.lk .mstat { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--f2); font-weight: 600; color: var(--ok); }
.lk .mstat.down { color: var(--alert); } .lk .mstat.down .md { background: var(--alert); }
.lk .mstat.idle { color: var(--muted); } .lk .mstat.idle .md { background: var(--muted); }
.lk .mstat .md { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.lk .linepickwrap { position: relative; }
.lk .linepick { border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 7px 11px; font-weight: 600; font-size: var(--f2); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.lk .linemenu { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 25; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--kui-r-lg); box-shadow: var(--kui-e2, 0 6px 24px #0000001f); padding: 6px; min-width: 196px; }
.lk .linemenu.open { display: block; }
.lk .linemenu .mh { font-size: var(--kui-fs-md); color: var(--faint); padding: 4px 9px 6px; }
.lk .linemenu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); font-size: var(--f2); font-weight: 600; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.lk .linemenu button:hover { background: var(--sunk); }
.lk .linemenu button.cur { color: var(--muted); }
.lk .linemenu button .ld { width: 9px; height: 22px; border-radius: 3px; flex: none; }
.lk .linemenu button .curtag { margin-left: auto; font-size: var(--kui-fs-xs); color: var(--faint); }
/* governed basis band */
.lk .basisband { display: flex; align-items: center; gap: 11px; padding: 11px 18px; background: var(--accent-soft); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lk .basisband .bi { width: 26px; height: 26px; border-radius: var(--kui-r); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; flex: none; }
.lk .basisband .bi svg { width: 15px; height: 15px; }
.lk .basisband .bt { font-size: var(--f2); color: var(--muted); }
.lk .basisband .bt b { color: var(--ink); font-weight: 660; }
.lk .basisband .gov { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent); border-radius: var(--kui-r-sm); padding: 3px 8px; }
/* board */
.lk .board { padding: 16px 18px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.lk .lcol, .lk .rcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* NOW hero */
.lk .now { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: var(--r); padding: 18px; }
.lk .now.idle { border-left-color: var(--line-2); }
.lk .now .nh { display: flex; align-items: center; gap: 9px; font-size: var(--f0); color: var(--ok); font-weight: 700; margin-bottom: 10px; }
.lk .now.idle .nh { color: var(--faint); }
.lk .now .nh .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: lkpulse 2.2s infinite; }
@keyframes lkpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.lk .now .id { font-family: var(--mono); font-size: var(--f5); font-weight: 700; }
.lk .now .sub { color: var(--muted); font-size: var(--f2); margin-top: 4px; } .lk .now .sub b { color: var(--ink); font-weight: 640; }
.lk .now .big { font-size: var(--f7); font-weight: 730; letter-spacing: -.02em; margin: 12px 0 2px; font-variant-numeric: tabular-nums; }
.lk .now .big small { font-size: var(--f4); font-weight: 600; color: var(--muted); }
.lk .now .prog { height: 8px; border-radius: var(--kui-r-pill); background: var(--sunk); overflow: hidden; margin: 12px 0 4px; }
.lk .now .prog i { display: block; height: 100%; background: var(--ok); border-radius: var(--kui-r-pill); }
.lk .now .pl { font-size: var(--f1); color: var(--faint); font-family: var(--mono); }
.lk .now .acts { display: flex; gap: 10px; margin-top: 15px; flex-wrap: wrap; }
.lk .btn { border: 0; border-radius: var(--kui-r); padding: 13px 18px; font-weight: 680; font-size: var(--f3); display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; }
.lk .btn.prime { background: var(--accent); color: var(--accent-ink); flex: 1; } .lk .btn.prime svg { width: 18px; height: 18px; }
.lk .btn.warn { background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line-2)); color: var(--warn); }
.lk .btn.prime[disabled] { opacity: .5; cursor: not-allowed; }
/* run composer (Tear/Blend run-mode) — the NOW hero as staged→running→complete */
.lk .now .rstate { display: inline-flex; align-items: center; gap: 8px; }
.lk .now .rstate.run { color: var(--ok); }
.lk .now .rstate.staged { color: var(--warn); }
.lk .now .rstate.staged .sd { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.lk .now .rex { margin-top: 12px; padding: 13px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--kui-r-lg); }
.lk .now .rgate { margin-top: 9px; font-size: var(--f2); color: var(--warn); font-weight: 600; }
.lk .reciperow { display: inline-flex; align-items: center; gap: 9px; font-size: var(--f2); color: var(--muted); }
.lk .iplock { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; font-size: var(--f1); color: var(--muted); }
.lk .iplock svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.lk .bphead { display: flex; align-items: center; gap: 9px; font-weight: 660; font-size: var(--f2); }
.lk .bphead .c { margin-left: auto; font-family: var(--mono); font-size: var(--f1); color: var(--s-torn, var(--warn)); font-weight: 700; }
.lk .bpbins { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; }
.lk .bpbin { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--kui-r); padding: 8px 12px; font-size: var(--f2); font-weight: 600; cursor: pointer; color: var(--ink); }
.lk .bpbin .bd { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.lk .bpbin .bn { font-family: var(--mono); color: var(--muted); }
.lk .bpbin.on { border-color: color-mix(in srgb, var(--warn) 45%, var(--line-2)); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.lk .bpbin.on .bn { color: var(--ink); }
.lk .bpbin[disabled] { opacity: .5; cursor: not-allowed; }
.lk .bpnote { font-size: var(--f1); color: var(--muted); }
/* lot run (Sorting Line, D-31): where the lot has gone, entries on the run, bins in three groups */
.lk .btn:not(.prime):not(.warn) { background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink); }
.lk .lr-split { display: flex; height: 12px; border-radius: var(--kui-r-pill); background: var(--sunk); overflow: hidden; margin: 14px 0 8px; }
.lk .lr-split i { display: block; height: 100%; }
.lk .lr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--f2); color: var(--muted); }
.lk .lr-legend b { color: var(--ink); font-weight: 680; }
.lk .lr-legend .lr-warn, .lk .lr-legend .lr-warn b { color: var(--warn); }
.lk .lr-legend .lr-over, .lk .lr-legend .lr-over b { color: var(--alert); font-weight: 660; }
.lk .now .lr-remove { width: 100%; margin-top: 14px; }   /* stays in the hero on phones too: the sticky bar holds Close */
.lk .lr-entries { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.lk .lr-eh { font-size: var(--f1); color: var(--faint); font-weight: 660; margin-bottom: 4px; }
.lk .lr-empty { font-size: var(--f2); color: var(--muted); }
.lk .lr-e { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--f2); }
.lk .lr-e:last-child { border-bottom: 0; }
.lk .lr-e .od { width: 8px; height: 8px; border-radius: 50%; }
.lk .lr-e.void { color: var(--faint); } .lk .lr-e.void b { text-decoration: line-through; color: var(--faint); }
.lk .lr-void { border: 1px solid var(--line-2); background: var(--panel); border-radius: var(--kui-r); padding: 6px 10px; min-height: 32px; font-size: var(--f1); font-weight: 640; color: var(--warn); cursor: pointer; }
.lk .lr-bags { margin: 4px 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--kui-r-lg); background: var(--panel); }
.lk .lr-bag { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--f2); }
.lk .lr-bags .lr-eh + .lr-bag { border-top: 0; }
.lk .lr-bagsub { display: block; color: var(--faint); font-size: var(--f1); margin-top: 2px; }
.lk .lr-bale { flex: none; min-height: 40px; padding: 8px 14px; border-radius: 8px; font-weight: 660; }
.lk .lr-paused { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 14px; border-radius: var(--kui-r-lg); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line-2)); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); }
.lk .lr-paused b { display: block; font-size: var(--f3, 1.05rem); }
.lk .lr-paused span { display: block; font-size: var(--f1); color: var(--muted); margin-top: 2px; }
.lk .lr-paused .btn { flex: none; }
.lk .bin[disabled], .lk .lr-bale[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 640px) { .lk .lr-paused { flex-direction: column; align-items: stretch; } }
.lk .lr-bg + .lr-bg { margin-top: 12px; }
.lk .lr-bgh { display: flex; align-items: center; gap: 8px; font-weight: 660; font-size: var(--f2); margin-bottom: 6px; }
.lk .lr-bgh .od { width: 8px; height: 8px; border-radius: 50%; }
.lk .lr-note { font-size: var(--f1); color: var(--kui-text-soft); margin-top: 10px; }
.lk .lr-takeoff { margin-top: 12px; border: 0; background: none; padding: 8px 0; min-height: 32px; color: var(--muted); font-size: var(--f2); text-decoration: underline; cursor: pointer; }
/* scan bar */
.lk .scan { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--r); padding: 14px 16px; }
.lk .scan .si { width: 38px; height: 38px; border-radius: var(--kui-r-lg); background: var(--sunk); color: var(--muted); display: grid; place-items: center; flex: none; } .lk .scan .si svg { width: 20px; height: 20px; }
.lk .scan .st { flex: 1; min-width: 0; } .lk .scan .st b { font-weight: 640; } .lk .scan .st .s { font-size: var(--f2); color: var(--muted); }
.lk .scan .sb { background: var(--ink); color: var(--bg, var(--kui-bg)); border: 0; border-radius: var(--kui-r); padding: 10px 15px; font-weight: 660; font-size: var(--f2); white-space: nowrap; cursor: pointer; }
/* queue */
.lk .queue { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.lk .qhead { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--line); font-weight: 660; }
.lk .qhead .c { margin-left: auto; font-size: var(--f1); color: var(--muted); font-variant-numeric: tabular-nums; }
.lk .qitem { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.lk .qitem:last-child { border-bottom: 0; }
.lk .qitem .pos { width: 24px; height: 24px; border-radius: var(--kui-r); background: var(--sunk); display: grid; place-items: center; font-family: var(--mono); font-size: var(--f2); font-weight: 700; color: var(--muted); flex: none; }
.lk .qitem .qt b { font-weight: 650; } .lk .qitem .qt .mono { font-family: var(--mono); }
.lk .qitem .qacts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lk .qitem .qb.qb--go { background: var(--kui-ink); border-color: var(--kui-ink); color: var(--kui-panel); }
/* phone: number + who on the first line, the actions on their own full-width line; codes never break mid-code */
@media (max-width: 600px) {
  .lk .qitem { grid-template-columns: auto minmax(0, 1fr); }
  .lk .qitem .qacts { grid-column: 1 / -1; justify-content: stretch; }
  .lk .qitem .qacts .qb { flex: 1 1 0; }
  .lk .qitem .qt .mono { white-space: nowrap; }
  .lk .qhead { flex-wrap: wrap; }
  .lk .qhead .kap-search { flex: 1 1 100%; order: 3; }
} .lk .qitem .qt .qm { font-size: var(--f2); color: var(--muted); margin-top: 1px; }
.lk .qitem .qb { border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink); border-radius: 8px; padding: 8px 12px; font-weight: 640; font-size: var(--f2); white-space: nowrap; cursor: pointer; }
.lk .qitem.blk { opacity: .7; } .lk .qitem.blk .qb { color: var(--alert); border-color: color-mix(in srgb, var(--alert) 40%, transparent); }
/* card + zone-④ bins */
.lk .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; }
.lk .card .ch { font-weight: 660; margin-bottom: 11px; display: flex; align-items: center; gap: 8px; }
.lk .card .ch .c { margin-left: auto; font-size: var(--f1); color: var(--muted); }
.lk .recipelink { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent); border-radius: 6px; padding: 3px 8px; font-family: var(--mono); font-size: var(--f1); font-weight: 650; cursor: pointer; }
.lk .bins { display: flex; flex-wrap: wrap; gap: 8px; max-height: 220px; overflow: auto; }
.lk .bin { display: flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--kui-r-pill); padding: 6px 12px; font-size: var(--f2); font-weight: 600; cursor: pointer; }
.lk .bin.pick { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.lk .bin .bd { width: 9px; height: 9px; border-radius: 3px; } .lk .bin .bn { font-family: var(--mono); font-size: var(--f1); color: var(--muted); font-weight: 600; }
/* stats */
.lk .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.lk .stat { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 11px 12px; }
.lk .stat .k { font-size: var(--f0); color: var(--faint); }
.lk .stat .v { font-size: var(--f4); font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; } .lk .stat .v small { font-size: var(--f1); color: var(--muted); font-weight: 600; }
.lk .tgtwrap { margin-top: 11px; }
.lk .tgtk { font-size: var(--f0); color: var(--faint); } .lk .tgtk b { color: var(--ink); }
.lk .tgtbar { height: 7px; border-radius: var(--kui-r-pill); background: var(--sunk); overflow: hidden; margin-top: 7px; } .lk .tgtbar i { display: block; height: 100%; border-radius: var(--kui-r-pill); }
/* outputs */
.lk .outrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--f2); }
.lk .outrow:last-child { border-bottom: 0; }
.lk .outrow .od { width: 9px; height: 22px; border-radius: 3px; flex: none; } .lk .outrow b { font-family: var(--mono); font-weight: 640; } .lk .outrow .ok { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 640; }
/* sticky action bar — appears on a narrow floor tablet; the primary action always thumb-reachable */
.lk .stickybar { display: none; }
@container (max-width: 820px) {
    .lk .board { grid-template-columns: 1fr; }
    .lk .stats { grid-template-columns: 1fr 1fr; }
    .lk .now .acts { display: none; }   /* action moves to the sticky bar */
    .lk .scan { display: none; }        /* scan moves to the sticky bar */
    .lk .stickybar { display: flex; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--line); background: var(--panel-2); position: sticky; bottom: 0; z-index: 6; }
    .lk .stickybar .prime { flex: 1; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--kui-r-lg); padding: 15px; font-weight: 700; font-size: var(--f3); display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; }
    .lk .stickybar .prime svg { width: 18px; height: 18px; }
    .lk .stickybar .scanbtn, .lk .stickybar .holdbtn { flex: none; width: 52px; border-radius: var(--kui-r); display: grid; place-items: center; cursor: pointer; }
    .lk .stickybar .scanbtn { background: var(--ink); color: var(--bg, var(--kui-bg)); border: 0; }
    .lk .stickybar .holdbtn { background: var(--panel); border: 1px solid color-mix(in srgb, var(--warn) 42%, var(--line-2)); color: var(--warn); }
    .lk .stickybar svg { width: 20px; height: 20px; }
    /* A step that can't run must look it: a disabled primary drawn solid green reads as "tap me" and does nothing. */
    .lk .stickybar .prime[disabled], .lk .stickybar .holdbtn[disabled] { opacity: .42; cursor: not-allowed; }
}

/* ============================================================================
   Places (PL) — FAITHFUL to artifact b487d06b. ONE page, three views (Yard ·
   Storage · Find & Move) behind a view switcher — the "three location models,
   one place" resolver. Yard = bay map (dwell colour); Storage = zone → rack →
   elevation drill-down; Find & Move = resolver + two-scan Move + directed
   putaway. Responsive via container queries (no device toggle); follows the
   global theme. Scoped under .plc; wrapper carries `kx plc`. ================= */
.plc { container-type: inline-size; }
.plc .cbar { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--panel-2); flex-wrap: wrap; }

.plc .cbar h1 { margin: 0; font-size: var(--f5); font-weight: 700; letter-spacing: -.02em; }
.plc .viewseg { margin-left: auto; }
.plc .viewseg .seg { display: inline-flex; background: var(--sunk); border: 1px solid var(--line); border-radius: 8px; padding: 3px; }
.plc .viewseg .seg button { border: 0; background: none; color: var(--muted); font-size: var(--f2); font-weight: 600; padding: 6px 13px; border-radius: 6px; cursor: pointer; }
.plc .viewseg .seg button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.plc .board { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.plc .seclbl { font-size: 14px; font-weight: 650; color: var(--kui-text); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }
.plc .plc-meter { border: 1px solid var(--kui-line); border-radius: 12px; background: var(--kui-panel); padding: 14px 16px; margin-bottom: 16px; }
.plc .plc-meter p { margin: 0 0 10px; color: var(--kui-text-soft); font-size: 14px; }
.plc .plc-meter b { font-family: var(--kui-display); font-size: 26px; color: var(--kui-ink); font-variant-numeric: tabular-nums; margin-right: 4px; }
.plc .plc-meter-bar { height: 8px; border-radius: 999px; background: var(--kui-panel-2); overflow: hidden; }
.plc .plc-meter-bar i { display: block; height: 100%; background: var(--kui-text-soft); border-radius: inherit; }
.plc .plc-meter.is-tight .plc-meter-bar i { background: var(--cc); }
.plc .seclbl svg { width: 13px; height: 13px; flex: none; }
/* Yard left column: status strip + bay map stacked, sharing the width with the weighbridge rail. */
.plc .yard-state { display: flex; flex-direction: column; gap: 22px; }
/* summary strip */
.plc .sum { display: flex; flex-wrap: wrap; gap: 10px; }
.plc .sc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 11px 15px; min-width: 120px; }
.plc .sc.attn { border-color: color-mix(in srgb, var(--cc) 45%, var(--line)); }
.plc .sc .k { font-size: var(--f0); color: var(--kui-text); }
.plc .plc-summary-detail { font-size:var(--f2); color:var(--kui-text); font-weight:600; }
.plc .sc .v { color:var(--kui-ink); font-size: var(--f5); font-weight: 720; margin-top: 2px; font-variant-numeric: tabular-nums; }
.plc .sc.attn .v { color: var(--cc); }
/* shared filter bar */
.plc .filterbar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.plc .fbsearch { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--kui-r); padding: 0 12px; flex: 1; min-width: 220px; }
.plc .fbsearch svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.plc .fbsearch input { flex: 1; border: 0; background: none; color: var(--ink); font-size: var(--f2); padding: 9px 0; outline: none; }
.plc .fchip { border: 1px solid var(--line-2); background: var(--panel); color: var(--muted); border-radius: 8px; padding: 8px 12px; font-size: var(--f2); font-weight: 600; white-space: nowrap; cursor: pointer; }
.plc .fchip:hover { color: var(--ink); }
.plc .fchip.on { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: color-mix(in srgb, var(--warn) 42%, transparent); color: var(--warn); }
.plc .fsel { border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 7px 10px; font-size: var(--f2); font-weight: 600; font-family: inherit; cursor: pointer; }
.plc .bay.dim, .plc .slot.dim, .plc .racktile.dim, .plc .bcell.dim, .plc .aislerow.dim { opacity: .32; }
.plc .bay.hl, .plc .slot.hl, .plc .racktile.hl, .plc .bcell.hl { outline: 2px solid var(--accent); outline-offset: -1px; }
/* yard bays */
.plc .baygrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.plc .bay { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--dc, var(--line-2)); border-radius: var(--r-s); padding: 11px 12px; min-height: 78px; text-align: left; color: var(--ink); cursor: default; }
.plc button.bay { cursor: pointer; }
.plc .bay.empty { background: var(--panel-2); border-left-color: var(--line); opacity: .75; }
.plc .bay .bn { font-family: var(--mono); font-size: var(--f1); color: var(--faint); font-weight: 600; letter-spacing: .04em; }
.plc .bay .lot { font-family: var(--mono); font-size: var(--f2); font-weight: 660; margin-top: 5px; }
.plc .bay .cl { font-size: var(--f1); color: var(--muted); margin-top: 2px; }
.plc .bay .bm { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; }
.plc .bay .kg { font-family: var(--mono); font-size: var(--f1); color: var(--muted); }
.plc .bay .dw { font-family: var(--mono); font-size: var(--kui-fs-xs); font-weight: 700; padding: 2px 6px; border-radius: var(--kui-r-sm); color: var(--dc); background: color-mix(in srgb, var(--dc) 13%, transparent); }
.plc .bay .mt { color: var(--faint); font-size: var(--f2); margin-top: 20px; }
/* weighbridge queue (yard side rail) */
.plc .qrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 100px); gap: 10px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; text-align: left; color: var(--ink); cursor: pointer; width: 100%; overflow-wrap: anywhere; }
.plc .qrow.next { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.plc .qrow .qseq { width: 26px; height: 26px; border-radius: var(--kui-r); background: var(--sunk); color: var(--muted); font-family: var(--mono); font-weight: 700; display: grid; place-items: center; font-size: var(--f2); }
.plc .qrow.next .qseq { background: var(--ink); color: var(--bg); }
.plc .qrow .qlot { font-family: var(--mono); font-weight: 640; font-size: var(--f2); }
.plc .qrow .qsub { font-size: var(--f1); color: var(--muted); }
.plc .qdue { font-size: var(--f1); font-weight: 700; padding: 3px 8px; border-radius: var(--kui-r-sm); white-space: normal; }
.plc .qdue.in { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.plc .qdue.out { color: var(--s-sorted); background: color-mix(in srgb, var(--s-sorted) 14%, transparent); }
.plc .qdue.review { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
/* storage — zone overview (aisles → rack rollup tiles) */
.plc .zonemap { display: flex; flex-direction: column; gap: 12px; }
.plc .aislerow { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; align-items: stretch; transition: opacity var(--kui-t-fast); }
.plc .aisletile { text-align: left; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-s); padding: 11px 12px; display: flex; flex-direction: column; gap: 5px; color: var(--ink); cursor: default; }
.plc .aisletile .at-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.plc .aisletile .at-h b { font-family: var(--mono); font-size: var(--f2); font-weight: 700; }
.plc .aisletile .at-c { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--kui-text); }
.plc .aisletile .at-v { font-size: var(--f5); font-weight: 730; font-variant-numeric: tabular-nums; line-height: 1; }
.plc .aisletile .at-v small { font-size: var(--f2); color: var(--muted); font-weight: 600; }
.plc .aisletile .at-bar { height: 6px; border-radius: var(--kui-r-pill); background: var(--panel); overflow: hidden; }
.plc .aisletile .at-bar i { display: block; height: 100%; border-radius: var(--kui-r-pill); }
.plc .aisletile .at-m { font-size: var(--f0); color: var(--kui-text); font-variant-numeric: tabular-nums; }
.plc .rackrow2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plc .racktile { min-width: 0; overflow-wrap: anywhere; }
.plc .racktile { text-align: left; background:var(--kui-panel-2); border: 1px solid var(--line); border-radius: var(--r-s); padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); transition: box-shadow var(--kui-t-fast); cursor: pointer; }
.plc .racktile:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
.plc .racktile.is-free { cursor:default; background:var(--kui-panel); }
.plc .racktile.is-free:hover { box-shadow:none; border-color:var(--line); }
.plc .rt-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; } .plc .rt-h b { min-width: 0; font-family: var(--mono); font-size: var(--f3); font-weight: 680; }
.plc .rt-c { margin-left: auto; font-family: var(--mono); font-size: var(--f2); color: var(--kui-text); }
.plc .rt-cl { font-size:var(--f2); color:var(--kui-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Each slot's stage = the shared, self-labelling stage badge (consistent colour everywhere) — replaces the old
   tiny dot + faint 11px name, so the "stage-coloured" is legible without a separate legend. */
.plc .rt-stage { display: flex; }
.plc .rt-stage .kap-stage { font-size: var(--f1); }
.plc .rt-bar { height: 6px; border-radius: var(--kui-r-pill); background: var(--sunk); overflow: hidden; } .plc .rt-bar i { display: block; height: 100%; border-radius: var(--kui-r-pill); }
.plc .rt-m { font-size: var(--f2); color: var(--ink); font-variant-numeric: tabular-nums; }
.plc .rt-ex, .plc .at-ex { display: flex; flex-wrap: wrap; gap: 5px; }
.plc .rex { font-size: var(--kui-fs-xs); font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.plc .rex.over { color: var(--alert); background: color-mix(in srgb, var(--alert) 13%, transparent); }
.plc .rex.stale { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.plc .rex.rsv { color: var(--warn); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.plc .gdots { display: flex; gap: 3px; } .plc .gdots span { width: 8px; height: 8px; border-radius: 2px; }
/* storage — breadcrumb + rack elevation */
.plc .crumb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 2px; }
.plc .backb { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); border-radius: 8px; padding: 6px 11px 6px 8px; font-weight: 640; font-size: var(--f2); cursor: pointer; }
.plc .backb svg { width: 15px; height: 15px; } .plc .backb:hover { border-color: var(--accent); color: var(--accent); }
.plc .crumb-cur { font-family: var(--mono); font-weight: 700; font-size: var(--f3); }
.plc .crumb-s { font-size: var(--f1); color: var(--muted); font-family: var(--mono); }
.plc .elev { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; overflow-x: auto; }
.plc .elevrow { display: grid; grid-template-columns: 58px repeat(var(--pcols, 3), 1fr); gap: 8px; margin-bottom: 8px; min-width: 540px; }
.plc .elevrow:last-child { margin-bottom: 0; } .plc .elevrow.head { margin-bottom: 6px; }
.plc .poslab { text-align: center; font-size: var(--f0); color: var(--faint); }
.plc .levlab { display: flex; flex-direction: column; justify-content: center; gap: 5px; color: var(--muted); background: var(--sunk); border-radius: var(--r-s); padding: 8px 8px; }
.plc .elevrow.head .levlab { background: none; padding: 0; }
.plc .levlab .ll-h { display: flex; align-items: baseline; gap: 4px; }
.plc .levlab .ll-h b { font-size: var(--f2); font-weight: 700; color: var(--ink); }
.plc .levlab .ll-c { font-size: var(--kui-fs-xs); color: var(--faint); }
.plc .levlab .ll-bar { height: 5px; border-radius: var(--kui-r-pill); background: var(--panel); overflow: hidden; }
.plc .levlab .ll-bar i { display: block; height: 100%; border-radius: var(--kui-r-pill); }
.plc .bcell { border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 9px; min-height: 66px; text-align: left; color: var(--ink); cursor: pointer; }
.plc .bcell.empty { border-style: dashed; opacity: .7; display: flex; flex-direction: column; cursor: default; }
.plc .bcell.rsvd { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 50%, transparent); }
.plc .bc-loc { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: var(--f1); font-weight: 660; color: var(--ink); }
.plc .bc-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.plc .bc-e { font-size: var(--f1); color: var(--faint); margin: auto auto 6px; }
.plc .bc-occ { margin-top: 6px; font-size: var(--kui-fs-xs); color: var(--muted); } .plc .bc-occ b { font-family: var(--mono); color: var(--ink); font-weight: 640; font-size: var(--f1); }
.plc .bc-g { margin-top: 1px; }
.plc .bc-flag { margin-left: auto; font-size: var(--kui-fs-xs); font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border-radius: 4px; padding: 1px 5px; }
.plc .rsvtag { margin-left: auto; font-size: var(--kui-fs-xs); font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); border-radius: 4px; padding: 2px 5px; }
.plc .zleg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: var(--f1); color: var(--muted); }
.plc .zleg span { display: inline-flex; align-items: center; gap: 6px; } .plc .zleg .sw { width: 10px; height: 10px; border-radius: 3px; }
.plc .zleg .rsw { box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 55%, transparent); background: transparent; }
.plc .zleg .esw { background: var(--alert); } .plc .zleg .zlk { color: var(--faint); }
.plc .zleg2 { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
/* find & move */
.plc .searchbig { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r); padding: 6px 8px 6px 16px; }
.plc .searchbig svg { width: 20px; height: 20px; color: var(--faint); flex: none; }
.plc .searchbig input { flex: 1; border: 0; background: none; color: var(--ink); font-size: var(--f4); padding: 11px 0; outline: none; }
.plc .searchbig .scanb { background: var(--ink); color: var(--bg); border: 0; border-radius: var(--kui-r); padding: 11px 15px; font-weight: 660; font-size: var(--f2); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.plc .searchbig .scanb svg { width: 16px; height: 16px; color: currentColor; }
.plc .resolve { padding: 8px 0; overflow-wrap: anywhere; }
.plc .resolve .rq { font-size: var(--f1); color: var(--faint); font-family: var(--mono); margin-bottom: 8px; }
.plc .resolve .rtop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plc .resolve .rid { font-family: var(--mono); font-size: var(--f4); font-weight: 700; }
.plc .resolve .rkind { font-size: var(--f1); font-weight: 700; padding: 2px 8px; border-radius: var(--kui-r-sm); background: color-mix(in srgb, var(--s-sorted) 14%, transparent); color: var(--s-sorted); }
.plc .resolve .rkind.rsv { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); display: inline-flex; align-items: center; gap: 5px; }
.plc .resolve .rkind.rsv svg { width: 12px; height: 12px; }
.plc .rsvbanner { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r-s); padding: 10px 12px; font-size: var(--f2); color: var(--ink); line-height: 1.45; }
.plc .rsvbanner svg { width: 16px; height: 16px; flex: none; color: var(--warn); margin-top: 1px; }
.plc .resolve .loc { display: flex; align-items: center; gap: 10px; margin-top: 13px; border-top: 1px solid var(--line); padding: 14px 0; }
.plc .resolve .loc .pin { width: 34px; height: 34px; border-radius: var(--kui-r); background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); display: grid; place-items: center; flex: none; }
.plc .resolve .loc .pin svg { width: 19px; height: 19px; }
.plc .resolve .loc .lt b { font-weight: 660; } .plc .resolve .loc .lt .s { font-size: var(--f2); color: var(--muted); }
.plc .resolve .loc .mv { margin-left: auto; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 10px 15px; min-height: 48px; font-weight: 660; font-size: var(--f2); cursor: pointer; flex-shrink: 0; }
.plc .resolve .loc .mv:disabled { opacity: .5; cursor: not-allowed; }
.plc .resolve .lt, .plc .putrow .pt { min-width: 0; overflow-wrap: anywhere; }
.plc .plc-recovery { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-bottom: 2px solid var(--warn); background: var(--panel-2); overflow-wrap: anywhere; }
.plc .plc-recovery .btn { min-height: 48px; flex-shrink: 0; white-space: normal; }
.plc-move-dialog .modal-dialog { width: min(560px, calc(100% - 24px)); margin: 12px auto; }
.plc-move-dialog .modal-content { max-height: calc(100dvh - 24px); border-radius: 8px; }
.plc-move-dialog .modal-body { overflow-y: auto; min-height: 0; }
.plc-move-dialog .modal-title { font-size: var(--kui-fs-lg); letter-spacing: 0; overflow-wrap: anywhere; }
.plc-move-dialog .modal-header, .plc-move-dialog .modal-footer { flex-shrink: 0; }
.plc-move-dialog .modal-footer { gap: 8px; }
.plc-move-dialog .modal-footer .btn { min-height: 48px; white-space: normal; border-radius: 6px; }
.plc-move-dialog .form-control { min-height: 48px; font-size: 16px; }
.plc-move-dialog .control-label { color: var(--kui-ink); }
.plc-move-dialog .plc-move-state { padding: 0 0 12px; border-bottom: 1px solid var(--kui-line); color: var(--kui-ink); overflow-wrap: anywhere; }
.plc-move-dialog .plc-move-state b { display: block; margin-bottom: 4px; }
.plc .resolve .one { margin-top: 10px; font-size: var(--f1); color: var(--faint); }
.plc .move { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.plc .move .mh { font-weight: 660; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.plc .move .step { display: grid; grid-template-columns: 30px 1fr; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.plc .move .step:last-of-type { border-bottom: 0; }
.plc .move .sn { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: var(--f2); }
.plc .move .sn svg { width: 16px; height: 16px; }
.plc .move .step.done .sn { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.plc .move .step.now .sn { background: var(--ink); color: var(--bg); }
.plc .move .step.wait .sn { background: var(--sunk); color: var(--faint); }
.plc .move .st b { font-weight: 640; } .plc .move .st .s { font-size: var(--f2); color: var(--muted); }
.plc .move .st .val { font-family: var(--mono); font-size: var(--f2); color: var(--ok); font-weight: 640; }
.plc .move .note { margin-top: 12px; font-size: var(--f1); color: var(--faint); display: flex; align-items: center; gap: 7px; }
.plc .move .note svg { width: 15px; height: 15px; flex: none; color: var(--ok); }
.plc .putaway { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.plc .puthead { padding: 12px 15px; border-bottom: 1px solid var(--line); font-weight: 660; display: flex; align-items: center; gap: 8px; }
.plc .puthead .c { margin-left: auto; font-size: var(--f1); color: var(--warn); }
.plc .putrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.plc .putrow:last-child { border-bottom: 0; }
.plc .putrow .pt b { font-family: var(--mono); font-weight: 640; } .plc .putrow .pt .s { font-size: var(--f1); color: var(--muted); }
.plc .putrow .sug { font-family: var(--mono); font-size: var(--f2); font-weight: 660; color: var(--info); }
.plc .putrow .sug small { display: block; font-size: var(--kui-fs-xs); color: var(--faint); font-weight: 600; }
.plc .putrow .pb { border: 1px solid var(--line-2); background: var(--panel-2); color: var(--ink); border-radius: 8px; padding: 8px 12px; font-weight: 640; font-size: var(--f2); cursor: pointer; }
.plc .cols2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
.plc .yard-cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
/* container-query responsive — one board, adapts to width (no device toggle) */
@container (max-width: 900px) {
    .plc .baygrid { grid-template-columns: repeat(4, 1fr); }
    .plc .yard-cols, .plc .cols2 { grid-template-columns: 1fr; }
}
@container (max-width: 620px) {
    .plc .viewseg { margin-left: 0; width: 100%; } .plc .viewseg .seg { width: 100%; } .plc .viewseg .seg button { flex: 1; }
    .plc .board { padding: 13px 14px; gap: 14px; }
    .plc .baygrid { grid-template-columns: 1fr 1fr; }
    .plc .rackrow2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plc .aislerow { grid-template-columns: 1fr; gap: 9px; }
    .plc .aisletile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
    .plc .aisletile .at-bar { flex: 1 1 100%; order: 5; }
    .plc .searchbig input { font-size: var(--f3); }
    .plc .resolve .loc { flex-wrap: wrap; } .plc .resolve .loc .mv { margin-left: 0; width: 100%; margin-top: 6px; padding: 12px; }
}

/* ============================================================================
   Capacity Planner (PL-A) — month grid of inbound load vs the daily ceiling.
   ============================================================================ */
/* ── Capacity Planner (D-66 Gate & Intake): four figures, a quiet calendar whose bar fills in the visualisation
   green and turns amber when a day is nearly full, closed days hatched, the day's bookings beside it. ── */
/* the month sits in the page header's right zone (pageHeader one row, design plan §7): prev · month · next · Today */
.cp-monthnav { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.cp-live { display: inline-flex; align-items: center; }
.cp-nav, .cp-today { border: 1px solid var(--kui-line-ctl); background: var(--kui-panel); color: var(--kui-text); font-weight: 600; font-size: 13px; padding: 7px 12px; border-radius: 8px; cursor: pointer; min-height: 44px; }
.cp-nav { min-width: 44px; display: inline-grid; place-items: center; line-height: 1; padding: 6px 10px; }
.cp-nav:hover, .cp-today:hover { border-color: var(--kui-text-soft); color: var(--kui-ink); }
.cp-today { background: var(--kui-panel-2); }
/* Month label is a real picker trigger (click → month/year grid) */
.cp-month { font-weight: 700; font-size: 14px; color: var(--kui-ink); background: transparent; border: 1px solid transparent;
    border-radius: 8px; padding: 5px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: inherit;
    min-height: 44px; min-width: 9.5em; justify-content: center; }
.cp-month svg { color: var(--kui-text-soft); }
.cp-month:hover { background: var(--kui-panel-2); border-color: var(--kui-line); }
.cp-monthpick { position: absolute; z-index: 60; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px;
    box-shadow: var(--kui-e3); padding: 12px; width: 258px; }
.cp-pick-yr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cp-pick-yr span { font-weight: 700; font-size: var(--kui-fs-lg); font-variant-numeric: tabular-nums; color: var(--kui-ink); }
.cp-pick-nav { border: 1px solid var(--kui-line-ctl); background: var(--kui-panel); color: var(--kui-text); border-radius: var(--kui-r); padding: 4px 11px; font-size: var(--kui-fs-lg); line-height: 1; cursor: pointer;
    min-width: 44px; min-height: 36px; display: inline-grid; place-items: center; }
@media (pointer: coarse) { .cp-pick-nav { min-height: 44px; } }
.cp-pick-nav:hover { border-color: var(--kui-text-soft); color: var(--kui-ink); }
.cp-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cp-pick-m { border: 1px solid var(--kui-line); background: var(--kui-panel); border-radius: 8px; padding: 9px 4px; font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text); cursor: pointer; }
.cp-pick-m:hover { border-color: var(--kui-text-soft); color: var(--kui-ink); }
.cp-pick-m.now { color: var(--kui-accent); border-color: color-mix(in srgb, var(--kui-accent) 40%, var(--kui-line)); }
.cp-pick-m.sel { background: var(--kui-ink); color: var(--kui-bg); border-color: var(--kui-ink); }
.cp-leg { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kui-fs-sm); color: var(--kui-text); }
.cp-leg-dot { width: 9px; height: 9px; border-radius: 50%; }
#cp-glance { margin: 0 0 16px; }
#cp-tb { margin: 0 0 12px; }
/* with no chip on the count is empty but keeps its place at the right, so the toolbar still spans the column */
#cp-tb .kui-tb__count { margin-left: auto; min-width: 1px; min-height: 1lh; }
#cp-state:empty { display: none; }
#cp-state { margin: 0 0 12px; }

/* Planner layout (CP redesign) — calendar-hero + day side-peek. The month grid leads; clicking a day opens its
   bookings in the peek beside it (desktop) or as a second page (phone), so you act on a day without leaving the
   calendar. The analytical Outlook (line forecast · who to chase) sits below, auto-expanding only when at risk. */
/* Board skeleton (design plan §7): the calendar takes the width; the open day sits beside it, never an empty panel */
.cp-planner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 18px; }
.cp-planner--day { grid-template-columns: minmax(0, 1fr) 360px; }
.kui-wide .cp-planner--day { grid-template-columns: minmax(0, 1fr) 440px; }
.cp-planner:not(.cp-planner--day) .cp-peek { display: none; }
.cp-cal-wrap { min-width: 0; }
/* the open day shares the calendar's height (owner: no staggered columns; Board skeleton §7): its own size never
   sets the row (contain: size), it stretches to the calendar's bottom and scrolls inside its own box */
.cp-peek { align-self: stretch; contain: size; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); background: var(--kui-panel); box-shadow: var(--kui-e1); padding: 16px 18px; min-height: 220px; }
.cp-peek-h { margin: 0; font: 600 var(--kui-fs-lg)/1.3 var(--kui-display); color: var(--kui-ink); }
.cp-peek-room { margin-top: 4px; font: 600 var(--kui-fs-lg)/1.3 var(--kui-display); color: var(--kui-good-text, var(--kui-ink)); font-variant-numeric: tabular-nums; }
.cp-peek-room.is-over { color: var(--kui-alert-text, var(--kui-alert)); }
.cp-none { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--kui-fs-md); color: var(--kui-text); }
.cp-none svg { flex: none; color: var(--kui-text-soft); }
.cp-stops-more { display: block; }
.cp-stops-more summary { display: inline-flex; align-items: center; min-height: 44px; padding-left: 24px; color: var(--kui-text); font-weight: 600; cursor: pointer; }
.cp-stops-more .cp-stops { margin-top: 0; }
.cp-ag-row.is-closed { background: repeating-linear-gradient(135deg, var(--kui-panel-2) 0 6px, var(--kui-panel) 6px 12px); }
.cp-ag-row.is-closed .cp-ag-mid > span { color: var(--kui-text); }
.cp-cal-wrap .cp-exc { margin: 16px 0 0; }
.cp-fig-closed .kui-nowrap, .cp-fig .kui-nowrap { white-space: nowrap; }
/* a narrow cell (tablet): the marks go under the day number instead of squeezing beside it */
@container cp-cell (max-width: 100px) { .cp-cell-top { flex-wrap: wrap; } }
.cp-cell { container: cp-cell / inline-size; }
.cp-exc:empty { display: none; }
.cp-exc { margin: 0 0 18px; }
@media (max-width: 640px) { .cp-none + .cp-planner:not(.cp-planner--day) { display: none; } }   /* nothing left in the list */
.cp-dayclient .kui-badge { margin-left: 6px; vertical-align: 1px; }
.cp-peek-meta { font-size: var(--kui-fs-md); color: var(--kui-text); margin-top: 3px; font-variant-numeric: tabular-nums; }
.cp-peek-closed { font-size: 13px; color: var(--kui-text); margin-top: 14px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.cp-day-override { margin: 10px 0 0; font-size: 12px; color: var(--kui-text-soft); }
.cp-peek-back { display: none; }
#cp-outlook > div { margin-bottom: 12px; }

/* Tablet/phone: the peek folds to a second page — pick a day → the peek replaces the calendar, with a Back button. */
@media (max-width: 820px) {
    .cp-planner { grid-template-columns: 1fr; }
    .cp-peek { position: static; display: none; contain: none; overflow: visible; }
    .cp-planner--day .cp-cal-wrap { display: none; }
    .cp-planner--day .cp-peek { display: block; }
    .cp-peek-back { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--kui-line-strong);
        background: var(--kui-panel-2); color: var(--kui-text); font-weight: 600; font-size: 13px;
        padding: 6px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 12px; }
    .cp-back-chev { font-size: var(--kui-fs-lg); line-height: 1; margin-top: -1px; }
}
/* Forward line projection (CX-6c) — week × line "will each line stay fed?" cascade grid */
.cp-fwd-grid { overflow-x: auto; padding-bottom: 2px; }
.cp-fwd-row { display: grid; grid-template-columns: minmax(132px, 1.4fr) repeat(var(--fwd-weeks, 6), minmax(52px, 1fr)); gap: 6px; align-items: stretch; min-width: 540px; margin-bottom: 6px; }
.cp-fwd-head { margin-bottom: 8px; }
.cp-fwd-linecol { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 2px 4px; min-width: 0; }
.cp-fwd-head .cp-fwd-linecol { font-size: 11px; font-weight: 700; color: var(--kui-text-soft); }
.cp-fwd-line { font-weight: 700; font-size: 13px; color: var(--kui-ink); }
.cp-fwd-meta { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-fwd-dn { display: inline-block; font-size: var(--kui-fs-sm); font-weight: 700; color: var(--kui-text-soft); background: var(--kui-panel-2); border-radius: 4px; padding: 0 5px; vertical-align: middle; }
.cp-fwd-wk { display: flex; align-items: center; justify-content: center; font-size: var(--kui-fs-sm); font-weight: 700; color: var(--kui-text-soft); white-space: nowrap; text-align: center; }
.cp-fwd-cell--data { background: var(--fw-bg); border: 1px solid color-mix(in srgb, var(--fw-c) 22%, transparent); border-left: 3px solid var(--fw-c); border-radius: 8px; padding: 6px 7px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 42px; }
.cp-fwd-bar { position: relative; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--fw-c) 15%, var(--kui-panel)); }
.cp-fwd-bar span { display: block; height: 100%; border-radius: 3px; background: var(--fw-c); transition: width .4s var(--kui-ease); }
.cp-fwd-over { position: absolute; right: -2px; top: -3px; width: 0; height: 0; border-left: 4px solid transparent; border-bottom: 9px solid var(--fw-c); }
.cp-fwd-fig { font-size: 12px; font-weight: 700; color: var(--fw-c); font-variant-numeric: tabular-nums; line-height: 1; }
.cp-fwd-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--kui-line); }
.cp-fwd-note { flex: 1 1 220px; min-width: 200px; font-size: 11px; color: var(--kui-text-soft); line-height: 1.45; }
.cp-fwd-alert { color: var(--kui-warn); font-weight: 700; }
/* compact line-feed glance: the forecast lives on Production Control › Supply vs demand; this links across to it */
.cp-fwd-glance { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--kui-line); border-radius: 12px; background: var(--kui-panel); cursor: pointer; text-decoration: none; color: inherit; transition: border-color var(--kui-t), box-shadow var(--kui-t); }
.cp-fwd-glance:hover, .cp-fwd-glance:focus-visible { border-color: var(--kui-accent); box-shadow: var(--kui-e2); outline: none; }
.cp-fwd-glance.at-risk { border-color: color-mix(in srgb, var(--kui-warn) 40%, var(--kui-line)); background: var(--kui-warn-tint); }
.cp-fwd-glance-ic { color: var(--kui-text-soft); display: inline-flex; flex: none; }
.cp-fwd-glance-tx { flex: 1; font-size: 13px; min-width: 0; }
.cp-fwd-glance-go { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-accent); white-space: nowrap; }
@media (max-width: 640px) { .cp-fwd-glance { flex-wrap: wrap; } .cp-fwd-glance-go { flex-basis: 100%; } }

.cp-dow, .cp-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cp-dow { border: 1px solid var(--kui-line); border-bottom: 0; border-radius: var(--kui-r-lg) var(--kui-r-lg) 0 0; background: var(--kui-panel-2); }
.cp-dow > div { padding: 8px 10px; font-size: var(--kui-fs-sm); font-weight: 600; color: var(--kui-text-soft); }
.cp-cells { border: 1px solid var(--kui-line); border-top: 0; border-radius: 0 0 var(--kui-r-lg) var(--kui-r-lg); overflow: hidden;
    background: var(--kui-line); gap: 1px; }
.cp-cell { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 76px; padding: 10px; border: 0;
    background: var(--kui-panel); text-align: left; font: inherit; color: var(--kui-ink); cursor: pointer;
    transition: background-color var(--kui-t-fast) var(--kui-ease); }
.cp-cell:hover { background: var(--kui-panel-2); }
.cp-day { font-weight: 600; font-size: var(--kui-fs-base); font-variant-numeric: tabular-nums; }
/* a day's marks at its top right: requests waiting (blue count, "your turn"), planned maintenance, machine stops */
.cp-cell-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.cp-marks { display: inline-flex; align-items: center; gap: 4px; color: var(--kui-text-soft); }
.cp-mark { display: inline-flex; align-items: center; }
.cp-mark--wait { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--kui-r-pill); justify-content: center;
    background: var(--kui-info-tint); color: var(--kui-info-text, var(--kui-info)); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cp-ag-mid .cp-marks { margin-left: 6px; vertical-align: middle; }
/* the toolbar's chips: the days not asked for step back as a day gone by does (their words keep their contrast);
   the phone's list of days shows only the days asked for */
.cp-cell.is-dim { background: var(--kui-panel-2); }
.cp-cell.is-dim .cp-day, .cp-cell.is-dim .cp-fig { color: var(--kui-text-soft); font-weight: 400; }
.cp-cell.is-dim .cp-bar { opacity: .4; }
/* today keeps its light figure on its ink disc wherever it shows: a dimmed day, or the next month's lead-in days (axe) */
.cp-cell.cp-cell--today:is(.is-dim, .is-past) .cp-day { color: var(--kui-bg); }
.cp-ag-row.is-dim { display: none; }
.cp-bar { display: block; height: 6px; border-radius: 3px; background: var(--kui-line); overflow: hidden; }
.cp-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--kui-viz); }
.is-near .cp-bar > span { background: var(--kui-warn); }
.cp-fig { font-size: var(--kui-fs-sm); color: var(--kui-text); font-variant-numeric: tabular-nums; }
.cp-cell.is-near .cp-fig { color: var(--kui-warn); font-weight: 600; }
/* over its limit (a reduced day, or booked past it): alert, said in words ("over by 2 t"), never colour alone */
.is-over .cp-bar > span { background: var(--kui-alert); }
.cp-cell.is-over .cp-fig, .cp-ag-row.is-over .cp-ag-mid > span:last-child { color: var(--kui-alert-text, var(--kui-alert)); font-weight: 600; }
/* the open day's ring and the focus ring: drawn 3 px inside the cell with their own corners, so the grid's 1 px gaps
   and its rounded clip never cut them (a corner day's ring once met the container's curve) */
.cp-cell { position: relative; }
.cp-cell::after { content: ""; position: absolute; inset: 3px; border-radius: var(--kui-r-sm); pointer-events: none; }
.cp-cells .cp-cell:focus-visible { outline: none !important; }   /* not the global outside ring (!important), which the clip cuts */
.cp-cell:focus-visible::after { box-shadow: inset 0 0 0 2px var(--kui-focus, var(--kui-info)); }
/* the figures dim while they are old (stale, design plan §6b) */
.cp.is-stale .cp-glance, .cp.is-stale .cp-cells { opacity: .6; }
.cp-cell.is-past { background: var(--kui-panel-2); }
.cp-cell.is-past .cp-day, .cp-cell.is-past .cp-fig { color: var(--kui-text-soft); font-weight: 400; }
.cp-cell.is-closed { background: repeating-linear-gradient(135deg, var(--kui-panel-2) 0 6px, var(--kui-panel) 6px 12px); }
.cp-fig-closed { color: var(--kui-text-soft); }
.cp-cell--today .cp-day { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: -3px 0 0 -4px;
    border-radius: 50%; background: var(--kui-ink); color: var(--kui-bg); }
.cp-cell.cp-cell--sel { background: var(--kui-viz-tint); }
.cp-cell.cp-cell--sel::after { box-shadow: inset 0 0 0 2px var(--kui-viz); }
.cp-cell.cp-cell--sel:focus-visible::after { box-shadow: inset 0 0 0 2px var(--kui-focus, var(--kui-info)), inset 0 0 0 4px var(--kui-viz); }

/* The phone lists the days instead of the grid: one aligned row per operating day left. */
.cp-agenda { display: none; }
.cp-ag-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%;
    min-height: 56px; padding: 8px 16px; border: 0; border-top: 1px solid var(--kui-line); background: var(--kui-panel);
    font: inherit; color: var(--kui-ink); text-align: left; cursor: pointer; }
.cp-ag-row:first-child { border-top: 0; }
.cp-ag-day { font-weight: 600; }
.cp-ag-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); }
.cp-ag-row.is-near .cp-ag-mid > span:last-child { color: var(--kui-warn); font-weight: 600; }
.cp-ag-t { font-weight: 600; font-variant-numeric: tabular-nums; }
/* one tonnes column for every row of the phone's list (a closed row's figure lines up with the rest) */
.cp-ag-row { grid-template-columns: 64px minmax(0, 1fr) 80px; }
.cp-ag-t { text-align: right; }
@media (max-width: 640px) {
    #cp-grid { display: none; }
    .cp-peek { padding: 12px 14px; }
    .cp-ag-row { padding: 8px 12px; }
    /* the open day reads as a second page: the month's figures and chips step out of its way */
    .cp-planner--day ~ .cp-outlook, .cp:has(.cp-planner--day) .cp-glance, .cp:has(.cp-planner--day) .cp-tbar { display: none; }
    .cp-agenda { display: block; border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); overflow: hidden; }
}

/* The day beside the calendar: its date, load and loads, then the bookings in arrival order. */
.cp-daylist { margin-top: 12px; border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); overflow: hidden; background: var(--kui-panel); }
.cp-dayitem { border-top: 1px solid var(--kui-line); }
.cp-dayitem:first-child { border-top: 0; }
.cp-dayrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who kg" "ref kg"; gap: 2px 12px;
    align-items: center; min-height: 56px; padding: 10px 14px; text-decoration: none; color: var(--kui-ink); }
.cp-dayacts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.cp-dayacts .kui-btn { min-height: 44px; }
/* the day's planned maintenance and machine stops (ERPNext's records): a note to book by */
.cp-stops { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-stops li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--kui-text); line-height: 1.45; }
.cp-stops li svg { flex: none; margin-top: 1px; color: var(--kui-text-soft); }
.cp-dayrow:hover { background: var(--kui-panel-2); text-decoration: none; }
.cp-dayclient { grid-area: who; font-weight: 600; overflow-wrap: anywhere; }
.cp-dayref { grid-area: ref; font: 400 var(--kui-fs-sm)/1.3 var(--kui-mono); color: var(--kui-text-soft); }
.cp-daykg { grid-area: kg; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-peek-none { margin-top: 12px; color: var(--kui-text-soft); font-size: var(--kui-fs-md); }
.cp-peek-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cp-peek-acts .kui-btn { width: 100%; justify-content: center; min-height: 44px; }
.cp-peek-acts a.kui-btn--primary, .cp-peek-acts a.kui-btn--primary:hover { color: var(--kui-accent-ink); text-decoration: none; }
.cp-fwd-glance:hover { text-decoration: none; }
.cp-peek-back { min-height: 44px; }
.cp-peek-acts .cp-day-override { order: -1; }

/* ===== Client portal Home dashboard ===== */
.kap-home .kap-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kap-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 20px; }
.kap-kpi { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px; padding: 16px 18px; }
.kap-kpi-n { font-size: 26px; font-weight: 700; color: var(--kui-ink); line-height: 1.1; }
.kap-kpi-l { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); margin-top: 6px; }
.kap-kpi-good { color: var(--kui-good); }
.kap-kpi--muted { background: var(--kui-panel-2); border-style: dashed; }
.kap-kpi--muted .kap-kpi-n { color: var(--kui-text-soft); }
.kap-soon { text-transform: none; letter-spacing: 0; font-style: italic; color: var(--kui-text-soft); }

.kap-pace { margin-bottom: 16px; }
.kap-pace-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.kap-pace-nums { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 14px; margin-bottom: 10px; }
.kap-pace-nums strong { font-size: var(--kui-fs-xl); }
.kap-bar { position: relative; height: 12px; background: var(--kui-panel-2); border-radius: 999px; overflow: hidden; }
.kap-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--kui-good); border-radius: 999px; }
.kap-bar-mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--kui-ink); opacity: .55; }
.kap-pace-foot { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 9px; font-size: var(--kui-fs-md); color: var(--kui-text-soft); }
.kap-pace-foot a { margin-left: auto; }

.kap-home-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.kap-mn-list, .kap-ta-list { display: flex; flex-direction: column; gap: 8px; }
.kap-mn-row, .kap-ta-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border: 1px solid var(--kui-line); border-radius: var(--kui-r); text-decoration: none; color: var(--kui-ink); }
.kap-mn-row:hover, .kap-ta-row:hover { background: var(--kui-panel-2); }
.kap-mn-count { font-weight: 700; font-size: 13px; }
.kap-ta-go { color: var(--kui-text-soft); font-weight: 700; }
.kap-ta-warn { border-color: color-mix(in srgb, var(--kui-alert) 45%, transparent); }
.kap-ta-warn span:first-child { color: var(--kui-alert); font-weight: 600; }

.kap-kpi-ic { margin-bottom: 8px; line-height: 0; }
.kap-kpi--muted .kap-kpi-ic { color: var(--kui-text-soft); }
.kap-kpi-h { font-size: 11px; color: var(--kui-text-soft); margin-top: 3px; line-height: 1.25; }
/* sensitive money — blurred until tapped (kapdaa_web.js wireSecrets) */

.kap-kpi:has(.kap-secret.revealed) .kap-secret-hint { visibility: hidden; }
/* contract timeline + pace */
.kap-timeline { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 7px; font-size: 12px; color: var(--kui-text-soft); }
.kap-timeline-mid { color: var(--kui-text-soft); text-align: center; flex: 1; }
.kap-pace-left { color: var(--kui-warn); font-weight: 600; }
.kap-pace-nudge { color: var(--kui-warn); font-weight: 600; text-decoration: none; }
.kap-pace-nudge:hover { text-decoration: underline; }
.kap-pace-ok { color: var(--kui-good); font-weight: 600; }

@media (max-width: 820px) { .kap-home-cols { grid-template-columns: 1fr; } }

/* My Contract — "how you're charged" list */
.kap-charge-list { display: flex; flex-direction: column; gap: 8px; }
.kap-charge { display: flex; justify-content: space-between; gap: 14px; padding: 9px 12px; border: 1px solid var(--kui-line); border-radius: var(--kui-r); font-size: 13px; }
.kap-charge-k { font-weight: 600; color: var(--kui-ink); }
.kap-charge-v { color: var(--kui-text-soft); text-align: right; }
@media (max-width: 560px) { .kap-charge { flex-direction: column; gap: 2px; } .kap-charge-v { text-align: left; } }

/* Book Delivery — real-time time-slot chips (Available / selected / Full) */
.slot-chip { border: 1.5px solid var(--kui-good); background: var(--kui-good-tint); color: var(--kui-good); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--kui-t-fast); }
.slot-chip:hover { background: color-mix(in srgb, var(--kui-good) 18%, transparent); }
.slot-chip.slot-on { background: var(--kui-good); color: #fff; }
.slot-chip.slot-full { border-color: var(--kui-line); background: var(--kui-panel-2); color: var(--kui-text-soft); cursor: not-allowed; text-decoration: line-through; }

/* Consistent portal form controls — selects and inputs the SAME height, and native selects get a uniform
   chevron across browsers (fixes the packaging row where the number input rendered shorter than the select). */
.kap-form-card select.form-control,
.kap-form-card input.form-control { height: 44px; box-sizing: border-box; }
.kap-form-card textarea.form-control { height: auto; min-height: 80px; }
.kap-form-card select.form-control {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 30px;
}
/* Clean portal checkbox row + Leaflet vector pin (no default marker box) */
.kap-check-row { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 16px; cursor: pointer; user-select: none; }
.kap-check-row input[type="checkbox"] {
  -webkit-appearance: auto !important; appearance: auto !important;
  width: 18px !important; height: 18px !important; min-width: 18px;
  margin: 0 !important; padding: 0 !important; border-radius: 3px !important;
  background: none !important; box-shadow: none !important;
  accent-color: var(--kui-good); flex: 0 0 auto;
}
.leaflet-div-icon.kap-pin { background: transparent; border: 0; }
/* The portal theme forces appearance:none on inputs, which mangles the map's native layer radios — restore them. */
.leaflet-control-layers input[type="radio"], .leaflet-control-layers input[type="checkbox"] {
  -webkit-appearance: auto !important; appearance: auto !important;
  width: 14px !important; height: 14px !important; min-width: 14px;
  background: none !important; box-shadow: none !important; border-radius: 50% !important;
  margin: 0 6px 0 0 !important; padding: 0 !important; vertical-align: middle; accent-color: var(--kui-good);
}
.leaflet-control-layers label { display: flex; align-items: center; margin: 3px 2px; font-weight: 500; }
.leaflet-control-layers { border-radius: 8px !important; padding: 6px 10px !important; }

/* My Bookings — tabs · search · grouped action links */
.mb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.mb-tabs { display: inline-flex; gap: 4px; background: var(--kui-panel-2); padding: 4px; border-radius: var(--kui-r); }
.mb-tab { border: 0; background: transparent; padding: 7px 16px; border-radius: var(--kui-r); font-weight: 600; color: var(--kui-text-soft); cursor: pointer; font-size: 14px; }
.mb-tab.active { background: var(--kui-panel); color: var(--kui-ink); box-shadow: var(--kui-e1); }
.mb-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: var(--kui-r); background: color-mix(in srgb, var(--kui-ink) 8%, transparent); font-size: 11px; font-weight: 700; }
.mb-tab.active .mb-count { background: var(--kui-good); color: #fff; }
.mb-search { flex: 1; min-width: 180px; max-width: 320px; height: 40px; padding: 0 14px; border: 1px solid var(--kui-line-strong); border-radius: var(--kui-r); font-size: 14px; background: var(--kui-panel); color: var(--kui-ink); }
.mb-actions { white-space: nowrap; }
/* Consistent per-delivery document set (kap-docs / kap-doc) — the SAME four chips, same icons, same order, on
   every row (and reused on Track/Home). A live chip is an accent link; an unavailable one is greyed with a
   "when it unlocks" tooltip, so a delivery's Pass · Track · Certificate · Invoice are never scattered. */
.kap-docs { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; }
.kap-doc { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
    text-decoration: none; color: var(--kui-accent); padding: 3px 8px; border-radius: var(--kui-r);
    border: 1px solid var(--kui-line); background: var(--kui-panel); white-space: nowrap; line-height: 1; }
.kap-doc svg { width: 13px; height: 13px; flex: none; }
.kap-doc:hover { background: var(--kui-accent-soft); border-color: color-mix(in srgb, var(--kui-accent) 40%, transparent); }
.kap-doc--off { color: var(--kui-soft); opacity: .5; cursor: not-allowed; background: var(--kui-panel-2); border-color: var(--kui-line); }
.kap-manage { display: flex; gap: 12px; margin-top: 7px; }
.kap-manage a { color: var(--kui-accent); font-weight: 600; font-size: var(--kui-fs-md); text-decoration: none; }
.kap-manage .mb-cancel { color: var(--kui-alert); }
.kap-manage .mb-locked { color: var(--kui-text-soft); font-size: 12px; }
/* A received delivery's row opens its passport (the doc + charge hub). */
.mb-row--link { cursor: pointer; }
.mb-row--link:hover { background: var(--kui-panel-2); }
.mb-lotlink { color: inherit; text-decoration: none; }
.mb-lotlink:hover strong { color: var(--kui-accent); }
.mb-view { color: var(--kui-accent); font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; }
.mb-view:hover { text-decoration: underline; }
.kap-price-total { font-size: var(--kui-fs-2xl); font-weight: 700; color: var(--kui-good); line-height: 1.2; }
.mb-filters { display: flex; gap: 8px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.mb-locked { color: var(--kui-text-soft); font-size: 13px; font-weight: 600; white-space: nowrap; }
/* Secondary id under the primary lot id — the paired booking reference (Lot KAP-… / Booking DEL-…). */
.mb-subid { font-size: 11px; color: var(--kui-text-soft); font-weight: 400; margin-top: 2px; letter-spacing: 0.2px; }
.mb-sortable { cursor: pointer; user-select: none; }
.mb-sortable:hover { color: var(--kui-ink); }
.mb-sortable[data-dir="asc"]::after { content: " \25B2"; font-size: var(--kui-fs-xs); }
.mb-sortable[data-dir="desc"]::after { content: " \25BC"; font-size: var(--kui-fs-xs); }

/* Billing — invoice cost-element breakdown (expandable) */
.inv-toggle { border: 0; background: transparent; cursor: pointer; font-size: 13px; color: var(--kui-text-soft); padding: 2px 4px; }
.inv-breakdown > td { background: var(--kui-panel-2); padding: 0 12px 12px; }
.inv-lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-lines th { text-align: left; color: var(--kui-text-soft); font-weight: 600; font-size: 11px; padding: 8px 8px 4px; border-bottom: 1px solid var(--kui-line); }
.inv-lines td { padding: 6px 8px; border-bottom: 1px solid var(--kui-line); }
.inv-lines .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-lines .inv-sub td { color: var(--kui-text-soft); border-bottom: 0; }
.inv-lines .inv-tot td { font-weight: 700; border-top: 1px solid var(--kui-line-strong); }

/* Receiver (delivery-to) address — UK format, clearly distinct from the sender/pickup form */
.kap-recv-box { background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-left: 3px solid var(--kui-good); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; }
.kap-addr-label { font-size: 11px; color: var(--kui-text-soft); font-weight: 700; margin-bottom: 6px; }
.kap-addr { font-style: normal; margin: 0; line-height: 1.5; }
.kap-addr span { display: block; font-weight: 500; }
@media (max-width: 640px) { .mb-toolbar { flex-direction: column; align-items: stretch; } .mb-search { max-width: none; } }

/* ============================================================= BALANCE & SCHEDULE (bs-) — SP-6 S&OP cockpit */
/* The shared page shell owns the width; this wrapper only adds the content gutter. */
.kap-bs-page .bs-wrap { padding: 18px clamp(12px, 3vw, 26px) 44px; }
.kap-bs-page .bs-wrap { max-width: none; margin: 0 auto; }
.bs-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.bs-cal-ic { display: inline-flex; align-items: center; color: var(--kui-text-soft); margin-right: -4px; }
@media (max-width: 640px) { .bs-cal-ic { display: none; } }
.bs-hz-group { display: inline-flex; border: 1px solid var(--kui-line); border-radius: var(--kui-r); overflow: hidden; }
.bs-hz { border: 0; background: var(--kui-panel); color: var(--kui-text); font-weight: 600; font-size: var(--kui-fs-md); padding: 7px 14px; cursor: pointer; border-right: 1px solid var(--kui-line); }
.bs-hz:last-child { border-right: 0; }
.bs-hz.on { background: var(--kui-accent); color: var(--kui-accent-ink); }
.bs-hz-note { font-size: 12px; color: var(--kui-text-soft); }

/* Storage — a located bale lights up on the rack map (Find & Move folded in) */
.sb-rack--hit { outline: 3px solid var(--kui-accent); outline-offset: 2px;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--kui-accent) 28%, transparent); animation: sb-hit-pulse 1.1s ease 1; }
@keyframes sb-hit-pulse { 0% { outline-color: color-mix(in srgb, var(--kui-accent) 20%, transparent); } 40% { outline-color: var(--kui-accent); } 100% { outline-color: var(--kui-accent); } }
@media (prefers-reduced-motion: reduce) { .sb-rack--hit { animation: none; } }
.lm-card-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.lm-btn-ghost { background: transparent; border: 1px solid var(--kui-line); color: var(--kui-text);
  border-radius: 8px; padding: 8px 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lm-btn-ghost:hover { border-color: var(--kui-accent); color: var(--kui-accent); }
.lm-recent-strip { margin: 10px 0 4px; }

/* Yard Board find-on-the-map — highlight the match, recede the rest (never hide; the yard is spatial) */
.yard-dim { opacity: .3; transition: opacity var(--kui-t-fast); }
.yard-hit { outline: 2px solid var(--kui-accent); outline-offset: 2px; transition: outline-color var(--kui-t-fast); }
button.yard-hit { box-shadow: 0 4px 14px color-mix(in srgb, var(--kui-accent) 22%, transparent); }

.bs-h { font-family: var(--font-disp, inherit); font-weight: 800; font-size: 14px; letter-spacing: -.01em; color: var(--kui-ink); margin: 22px 2px 10px; }
.bs-h-day { display: flex; align-items: center; justify-content: space-between; }
.bs-card { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(28,26,21,.05); }
.bs-cols { display: grid; gap: 16px; }
@media (min-width: 900px) { .bs-cols { grid-template-columns: 1fr 1fr; align-items: start; } .bs-cols .bs-h:first-child { margin-top: 0; } }

/* verdict hero */
.bs-verdict { border: 1.5px solid; border-radius: var(--kui-r-lg); padding: 16px 18px; }
.bs-verdict-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.bs-verdict-tag { color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .01em; border-radius: 999px; padding: 5px 14px; }
.bs-verdict-note { font-size: 14px; color: var(--kui-text); font-weight: 500; }
.bs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.bs-kpi { background: color-mix(in srgb, var(--kui-panel) 62%, transparent); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 11px 13px; }
.bs-kpi-v { font-family: var(--font-disp, inherit); font-weight: 800; font-size: var(--kui-fs-xl); letter-spacing: -.02em; color: var(--kui-ink); line-height: 1.05; }
.bs-kpi-l { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); margin-top: 4px; }
.bs-kpi.warn .bs-kpi-v { color: var(--kui-warn); } .bs-kpi.alert .bs-kpi-v { color: var(--kui-alert); }

/* constraint rail */
.bs-rail-row { display: grid; grid-template-columns: 120px 1fr minmax(150px, auto); align-items: center; gap: 10px; margin-bottom: 9px; }
.bs-rail-lbl { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text); }
.bs-drum { font-size: 11px; font-weight: 650; color: var(--kui-ink); border: 1px solid var(--kui-ink); border-radius: 999px; padding: 0 7px; }
/* Layered rail (C1): nameplate ceiling (faint) · effective plan (solid, drum=red) · measured tick */
.bs-rail-track { position: relative; height: 22px; background: var(--kui-panel-2); border-radius: 6px; }
.bs-rail-name { position: absolute; left: 0; top: 0; height: 100%; background: var(--kui-line); border-radius: 6px; }
.bs-rail-eff { position: absolute; left: 0; top: 0; height: 100%; border-radius: 6px; }
.bs-rail-meas { position: absolute; top: -2px; height: calc(100% + 4px); width: 3px; background: var(--kui-ink); border-radius: 2px; }
.bs-rail-val { font-family: var(--font-disp, inherit); font-weight: 800; font-size: 14px; text-align: right; color: var(--kui-ink); }
.bs-rail-val small { font-weight: 500; color: var(--kui-text-soft); font-size: var(--kui-fs-sm); margin-left: 2px; }
.bs-rail-val em { display: block; font-style: normal; font-weight: 500; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); margin-top: 1px; }
.bs-rail-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--kui-text-soft); margin: 10px 0 2px; }
.bs-rail-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bs-rail-legend span::before { content: ""; width: 11px; height: 11px; border-radius: 3px; }
.bs-rail-legend .lg-name::before { background: var(--kui-line); }
.bs-rail-legend .lg-eff::before { background: var(--s-sorted); }
.bs-rail-legend .lg-meas::before { width: 3px; height: 13px; border-radius: 2px; background: var(--kui-ink); }
.bs-rail-note, .bs-fwd-note, .bs-mps-foot { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); margin-top: 12px; line-height: 1.5; }
/* C2 demand-pull section */
.bs-pull-none { font-size: 13px; color: var(--kui-text-soft); padding: 6px 2px; }
.bs-pull-demand { font-size: 12px; color: var(--kui-text); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bs-pull-dchip { background: var(--kui-panel-2); border-radius: var(--kui-r-pill); padding: 3px 10px; }
.bs-pull-dchip b { color: var(--kui-ink); }
.bs-pull-row { display: grid; grid-template-columns: 120px 1fr 150px; align-items: center; gap: 10px; margin-bottom: 9px; }
.bs-pull-row.bs-pull-binding .bs-pull-line { color: var(--kui-alert); }
.bs-pull-line { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text); }
.bs-pull-track { height: 16px; background: var(--kui-panel-2); border-radius: 6px; overflow: hidden; }
.bs-pull-track > i { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.bs-pull-val { font-size: 13px; text-align: right; color: var(--kui-text); }
.bs-pull-val b { font-family: var(--font-disp, inherit); font-weight: 800; }
.bs-pull-val small { display: block; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); }
.bs-pull-verdict { font-size: var(--kui-fs-md); border-radius: 8px; padding: 9px 12px; margin-top: 12px; }
.bs-pull-ok { background: var(--kui-good-tint); color: var(--kui-good); }
.bs-pull-warn { background: var(--kui-warn-tint); color: var(--kui-warn); }
@media (prefers-color-scheme: dark) { .bs-pull-ok { background: rgba(21,128,61,.16); } .bs-pull-warn { background: rgba(146,64,14,.22); } }
@media (max-width: 640px) { .bs-pull-row { grid-template-columns: 92px 1fr 120px; } }

/* storage */
.bs-rack-top { display: flex; justify-content: space-between; font-size: var(--kui-fs-md); color: var(--kui-text); margin-bottom: 6px; }
.bs-rack-top b { font-family: var(--font-disp, inherit); font-weight: 800; font-size: var(--kui-fs-lg); color: var(--kui-ink); }
.bs-rack-bar { height: 8px; background: var(--kui-panel-2); border-radius: var(--kui-r-sm); overflow: hidden; }
.bs-rack-bar > i { display: block; height: 100%; border-radius: var(--kui-r-sm); }
.bs-rack-sub { font-size: 11px; color: var(--kui-text-soft); margin: 6px 0 12px; }
.bs-stores { display: grid; gap: 2px; }
.bs-store { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--kui-panel-2); font-size: var(--kui-fs-md); }
.bs-store-dot { width: 8px; height: 8px; border-radius: 50%; }
.bs-store-nm { color: var(--kui-text); font-weight: 600; }
.bs-store-kg { font-family: var(--font-disp, inherit); font-weight: 700; color: var(--kui-ink); }
.bs-store-st { font-size: 11px; text-align: right; }
.bs-store-ship { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--kui-alert); }

/* MPS table */
table.bs-mps { width: 100%; border-collapse: collapse; font-size: var(--kui-fs-md); }
table.bs-mps th { text-align: right; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); font-weight: 700; padding: 4px 6px 8px; border-bottom: 1px solid var(--kui-line); }
table.bs-mps th:first-child { text-align: left; }
table.bs-mps td { text-align: right; padding: 8px 6px; font-variant-numeric: tabular-nums; color: var(--kui-text); }
table.bs-mps td.bs-mps-nm { text-align: left; font-weight: 700; color: var(--kui-ink); }
table.bs-mps .bs-mps-mgn { font-family: var(--font-disp, inherit); }
.bs-gap { color: var(--kui-alert); font-weight: 800; }
.bs-lim td { color: var(--kui-warn); }
.bs-mps-barrow td { padding: 0 6px 8px; }
.bs-mps-bar { display: block; height: 4px; background: var(--kui-panel-2); border-radius: 3px; overflow: hidden; }
.bs-mps-bar > i { display: block; height: 100%; }
.bs-nowarn, .bs-nowarn * { color: var(--kui-text-soft); }

/* forward lens */
.bs-fwd-card { overflow: hidden; }
.bs-wks { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.bs-wk { flex: 0 0 132px; border: 1px solid; border-top-width: 3px; border-radius: var(--kui-r-lg); padding: 10px 11px; background: var(--kui-panel); }
.bs-wk-date { font-family: var(--font-disp, inherit); font-weight: 800; font-size: 13px; color: var(--kui-ink); }
.bs-wk-status { display: inline-block; font-size: var(--kui-fs-sm); font-weight: 700; border-radius: 999px; padding: 2px 8px; margin: 6px 0 8px; }
.bs-wk-bar { height: 5px; background: var(--kui-panel-2); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.bs-wk-bar > i { display: block; height: 100%; }
.bs-wk-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; margin: 0; font-size: 11px; }
.bs-wk-facts dt { color: var(--kui-text-soft); }
.bs-wk-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--kui-text); font-weight: 600; }

/* day-plan board */
.bs-daynav { display: inline-flex; align-items: center; gap: 6px; }
.bs-nav { border: 1px solid var(--kui-line); background: var(--kui-panel); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 600; color: var(--kui-text); cursor: pointer; }
.bs-daylabel { font-size: var(--kui-fs-md); font-weight: 700; color: var(--kui-text); min-width: 96px; text-align: center; }
.bs-dp-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.bs-dp-short { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--kui-warn-tint, var(--kui-panel)); color: var(--kui-text); font-size: 13px; }
.bs-dp { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px; padding: 12px; }
.bs-dp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 9px; margin-bottom: 9px; border-bottom: 2px solid; }
.bs-dp-line { font-weight: 800; font-size: 14px; }
.bs-dp-status { font-size: var(--kui-fs-sm); font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--kui-panel-2); color: var(--kui-text); }
.bs-dp-committed { background: var(--kui-good-tint); color: var(--kui-good); } .bs-dp-inprogress { background: var(--kui-info-tint); color: var(--kui-info); } .bs-dp-draft { background: var(--kui-panel-2); color: var(--kui-text-soft); }
.bs-dp-basis { font-size: var(--kui-fs-sm); font-weight: 600; color: var(--kui-info); background: var(--kui-info-tint); border-radius: 999px; padding: 2px 8px; }
.bs-dp-empty { font-size: 12px; color: var(--kui-text-soft); padding: 14px 4px; text-align: center; }
.bs-dp-lots { display: grid; gap: 5px; }
.bs-dp-lot { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 8px; padding: 7px 9px; background: var(--kui-panel-2); border: 1px solid var(--kui-panel-2); border-radius: 8px; font-size: 12px; }
.bs-dp-seq { font-family: var(--font-disp, inherit); font-weight: 800; color: var(--kui-text-soft); font-size: 12px; }
.bs-dp-lotid { font-weight: 600; color: var(--kui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-dp-lotst { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); }
.bs-dp-lot.bs-dp-done { opacity: .6; } .bs-dp-lot.bs-dp-skipped { background: var(--kui-warn-tint); border-color: color-mix(in srgb, var(--kui-warn) 45%, var(--kui-line)); }
.bs-dp-lot.bs-dp-skipped .bs-dp-lotst { color: var(--kui-warn); font-weight: 700; }
@media (max-width: 640px) {
  .bs-rail-row { grid-template-columns: 92px minmax(0, 1fr); }
  .bs-rail-val { grid-column: 2; }   /* the figures sit under the bar on a phone */
  .bs-toolbar { gap: 8px; }
  .bs-hz-note { display: none; }
  /* horizon toggle: never overflow the phone — the segmented group scrolls, buttons shrink (DS toggle-width fix) */
  .bs-hz-group { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bs-hz { padding: 7px 11px; font-size: var(--kui-fs-sm); white-space: nowrap; }
}

/* Balance & Schedule — interactive day-plan controls (SP-6b) */
.bs-dp-basissel { font-size: var(--kui-fs-sm); font-weight: 600; color: var(--kui-info); background: var(--kui-info-tint); border: 1px solid var(--kui-line); border-radius: 999px; padding: 2px 8px; cursor: pointer; }
.bs-dp-nolots { font-size: 12px; color: var(--kui-text-soft); padding: 10px 4px; text-align: center; }
.bs-dp-lot { position: relative; }
.bs-dp-lotact { display: inline-flex; gap: 3px; margin-left: auto; }
.bs-dp-lot { grid-template-columns: 20px 1fr auto auto; }
.bs-mini { border: 1px solid var(--kui-line); background: var(--kui-panel); color: var(--kui-text); border-radius: 6px; font-size: 11px; line-height: 1; padding: 4px 7px; cursor: pointer; font-weight: 600; }
.bs-mini:hover:not(:disabled) { background: var(--kui-panel-2); border-color: var(--kui-line-strong); }
.bs-mini:disabled { opacity: .35; cursor: default; }
.bs-mini.bs-ok { color: var(--kui-good); border-color: color-mix(in srgb, var(--kui-good) 45%, var(--kui-line)); } .bs-mini.bs-ok:hover { background: var(--kui-good-tint); }
.bs-mini.bs-skip { color: var(--kui-alert); border-color: color-mix(in srgb, var(--kui-alert) 45%, var(--kui-line)); } .bs-mini.bs-skip:hover { background: var(--kui-alert-tint); }
.bs-dp-foot { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--kui-panel-2); }
.bs-dp-foot .kui-btn { flex: 1; justify-content: center; }
.bs-mini.bs-add { flex: 1; text-align: center; color: var(--kui-accent); border-color: color-mix(in srgb, var(--kui-accent) 40%, var(--kui-line)); }
.bs-mini.bs-add:hover { background: var(--kui-accent-soft); }
.bs-mini.bs-commit { flex: 1; text-align: center; background: var(--kui-accent); color: var(--kui-accent-ink); border-color: var(--kui-accent); }
.bs-mini.bs-commit:hover { background: color-mix(in srgb, var(--kui-accent) 82%, #000); }

/* ============================================================= FIND & MOVE (lm-) — MV-3 handheld locate+move */
/* Find & Move — a proper page: search + located bale on the left, this-session recent moves as a right rail;
   stacks on narrow. (Was a lost 640px centred column.) */

.kap-lm-page .lm-wrap { max-width: none; }

   /* uses the shared kapdaa.searchField (.kap-search) — camera scan built in */
.lm-btn { border: 1px solid var(--kui-accent); background: var(--kui-accent); color: var(--kui-accent-ink); border-radius: var(--kui-r); font-size: 14px; font-weight: 700; padding: 10px 18px; cursor: pointer; white-space: nowrap; }
.lm-btn:hover { background: color-mix(in srgb, var(--kui-accent) 88%, #000); }
.lm-card { margin-top: 16px; border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); background: var(--kui-panel); padding: 18px; box-shadow: var(--kui-e2); }
.lm-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lm-lot { font-family: var(--font-disp, inherit); font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--kui-ink); }
.lm-code { font-family: var(--font-mono, monospace); font-size: 12px; color: var(--kui-text-soft); }
.lm-stage { font-size: 11px; font-weight: 700; color: var(--kui-info); background: var(--kui-info-tint); border-radius: 999px; padding: 3px 10px; }
.lm-flag { font-size: 11px; font-weight: 700; color: var(--kui-alert); background: var(--kui-alert-tint); border: 1px solid color-mix(in srgb, var(--kui-alert) 40%, transparent); border-radius: 999px; padding: 3px 10px; }
.lm-loc { font-size: 16px; font-weight: 600; color: var(--kui-ink); margin-bottom: 8px; }
.lm-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.lm-area, .lm-rack, .lm-kg { font-size: 12px; font-weight: 600; border-radius: 8px; padding: 4px 10px; }
.lm-area { color: var(--kui-info); background: var(--kui-info-tint); } .lm-rack { color: var(--kui-warn); background: var(--kui-warn-tint); } .lm-kg { color: var(--kui-text); background: var(--kui-panel-2); }
.lm-move { width: 100%; text-align: center; font-size: 16px; padding: 13px; }
.lm-h { font-family: var(--font-disp, inherit); font-weight: 800; font-size: 13px; color: var(--kui-ink); margin: 26px 2px 10px; }
.lm-recent { display: grid; gap: 6px; }
.lm-rec { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 10px; padding: 9px 12px; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r); font-size: var(--kui-fs-md); }
.lm-rec-lot { font-weight: 700; color: var(--kui-ink); }
.lm-rec-loc { color: var(--kui-text); }
.lm-rec-ts { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--kui-text-soft); }
.lm-empty { font-size: var(--kui-fs-md); color: var(--kui-text-soft); padding: 12px; text-align: center; }

/* ===================================================== THE LOOP · splitView (list + side-peek, TL-1) */
.kap-split { display: grid; grid-template-columns: minmax(0, 320px) 1fr; border: 1px solid var(--kui-line); border-radius: 12px; overflow: hidden; background: var(--kui-panel); min-height: 380px; box-shadow: var(--kui-e1); }
/* Solo mode — a deep-linked bale/product has no useful sibling list, so drop the (near-empty) left rail and let
   the passport use the full width instead of stranding ~320px of blank column. */
.kap-split--solo { grid-template-columns: 1fr; }
.kap-split--solo .kap-split-list { display: none; }
/* Solo has no sibling list to scroll against, so the 72vh master-detail cap just strands the lower half of the
   screen. Let the detail flow to its natural height and scroll with the page instead. */
.kap-split--solo .kap-split-detail { max-height: none; overflow: visible; }
.kap-split-list { border-right: 1px solid var(--kui-line); overflow: auto; background: var(--kui-panel); max-height: 72vh; }
.kap-split-row { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--kui-line); background: transparent; padding: 12px 14px; cursor: pointer; border-left: 3px solid transparent; font: inherit; color: inherit; }
.kap-split-row:hover { background: var(--kui-panel-2); }
.kap-split-row.on { background: var(--kui-panel-2); border-left-color: var(--kui-accent); }
.kap-split-detail { overflow: auto; padding: 20px 24px; background: var(--kui-panel-2); max-height: 72vh; }
.kap-split-back { display: none; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--kui-accent); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0 0 12px; }
.kap-split-empty, .kap-split-placeholder { padding: 28px 18px; text-align: center; color: var(--kui-text-soft); font-size: 13px; }
/* Empty → ONE full-width centred state (no empty list box beside an empty detail box). */
.kap-split--empty { grid-template-columns: 1fr; min-height: 0; }
.kap-split--empty .kap-split-list { border-right: 0; max-height: none; }
.kap-split--empty .kap-split-detail { display: none; }
.kap-split--empty .kap-split-empty { padding: 22px; }

/* Designed empty state (kapdaa.emptyState) — a calm, on-brand "all clear", reused across My Queue, Holds, … */
.kap-empty { text-align: center; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; }
.kap-empty-orb { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; }
.kap-empty-orb svg { width: 26px; height: 26px; }
.kap-empty--go .kap-empty-orb { background: radial-gradient(circle at 50% 34%, var(--kui-good-tint), var(--kui-panel)); border: 1px solid color-mix(in srgb, var(--kui-good) 30%, var(--kui-line)); color: var(--kui-good); }
.kap-empty--muted .kap-empty-orb { background: var(--kui-panel-2); border: 1px solid var(--kui-line); color: var(--kui-text-soft); }
.kap-empty-h { font-weight: 750; font-size: var(--kui-fs-lg); color: var(--kui-ink); }
.kap-empty-p { color: var(--kui-text); font-size: 13px; max-width: 40ch; margin: 6px auto 0; line-height: 1.5; }
.kap-empty-btn { margin-top: 16px; }
/* The split view folds by its own width, not the screen's: on a tablet with the menu open it is phone-narrow. */
:has(> .kap-split) { container-type: inline-size; }
@container (max-width: 720px) {
  .kap-split { grid-template-columns: 1fr; min-height: 0; }
  .kap-split-list { border-right: 0; max-height: none; }
  .kap-split-detail { display: none; max-height: none; }
  .kap-split--detail .kap-split-list { display: none; }
  .kap-split--detail .kap-split-detail { display: block; }
  /* Solo (deep-linked single passport) has no list to toggle from — the mobile default hides the detail,
     so without this the whole page is blank on a phone. Show its one pane; keep the dead back-button hidden. */
  .kap-split--solo .kap-split-detail { display: block; }
  .kap-split--solo .kap-split-back { display: none; }
  .kap-split-back { display: inline-flex; }
  .kap-split-detail .holds-acts { position: sticky; bottom: 0; background: var(--kui-panel-2); padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--kui-line); }
}
/* Holds rows + detail within the split */
.holds-r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.holds-r-who { font-weight: 700; font-size: 13px; color: var(--kui-ink); }
.holds-r-code { font-family: var(--font-mono, monospace); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); }
.holds-r2 { display: flex; align-items: center; gap: 7px; margin-top: 5px; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); }
.holds-rb { font-size: var(--kui-fs-sm); font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--kui-panel-2); color: var(--kui-text); }
.holds-rb.haz { background: var(--kui-alert-tint); color: var(--kui-alert); }
.holds-r-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--kui-line-strong); flex: none; }
.holds-haz-banner { display: flex; align-items: center; gap: 9px; background: var(--kui-alert-tint); border: 1px solid color-mix(in srgb, var(--kui-alert) 32%, transparent);
	border-radius: var(--kui-r-lg); padding: 10px 13px; margin-bottom: 14px; font-size: 13px; color: var(--kui-alert); line-height: 1.4; }
.holds-haz-banner svg { color: var(--kui-alert); flex: none; }
.holds-haz-banner b { color: var(--kui-alert); }
.holds-d-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.holds-d-id { font-family: var(--font-disp, inherit); font-weight: 800; font-size: var(--kui-fs-xl); letter-spacing: -.01em; color: var(--kui-ink); }
.holds-d-held { font-size: 12px; color: var(--kui-text-soft); white-space: nowrap; }
.holds-d-open { margin-top: 16px; }
.holds-open-passport { color: var(--kui-accent); font-weight: 600; font-size: 13px; cursor: pointer; }

/* My Queue within the splitView (TL-2) */
.mq-r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mq-r-who { font-weight: 700; font-size: 13px; color: var(--kui-ink); }   /* client-loud (standard §4) */
.mq-r-code { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 500; color: var(--kui-text-soft); }  /* code-quiet */
.mq-r2 { margin-top: 5px; font-size: var(--kui-fs-sm); color: var(--slate-500); }
.mq-d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mq-d-id { font-family: var(--font-disp, inherit); font-weight: 800; font-size: 20px; letter-spacing: -.01em; color: var(--slate-900); }

@media (max-width: 720px) { .kap-split-detail .mq-actions { position: sticky; bottom: 0; background: var(--slate-50, #f8fafc); padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--slate-200); } }

/* ============================================================================
   LOGIN PAGE — Kapdaa dark-textile identity (matches the ai4fibres platform), heading to sign-in mock v5.
   Frappe's own page (sign-in, forgot, set password): styles only, wording in kapdaa_web.js. Scoped to those pages, so
   it never leaks onto portal or Desk pages, which load this stylesheet too. Frappe rewrites this markup in some
   upgrades (16.52 did): look at it after each one.
   ========================================================================== */
/* Bricolage Grotesque — the platform's display face (OFL, vendored). Variable weight axis. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/kapdaa/fonts/BricolageGrotesque-VariableFont.ttf') format('truetype');
  font-weight: 200 800; font-display: swap; font-style: normal;
}
body:is(:has(section.for-login), :has(section.for-reset-password)) {
  background: linear-gradient(rgba(6,9,13,.62), rgba(6,9,13,.62)),
              url('/assets/kapdaa/images/login-bg.webp') center center / cover no-repeat fixed !important;
  min-height: 100vh; color: #fff;
  font-family: var(--kui-font);
}
body:is(:has(section.for-login), :has(section.for-reset-password)) .page-content-wrapper { padding-top: 0; min-height: 0; }
/* centre the column on the textile ground */
body:is(:has(section.for-login), :has(section.for-reset-password)) section[class^="for-"] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100svh; width: 100%; max-width: 26rem; margin: 0 auto; padding: 16px;
}
/* the panel keeps text readable over the bright parts of the mesh */
body:is(:has(section.for-login), :has(section.for-reset-password)) .page-card {
  background: rgba(6,9,13,.78) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: none !important;
  border-radius: 12px; padding: 32px !important; min-height: 0 !important; width: 100%; max-width: 26rem; color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (max-width: 640px) {
  body:is(:has(section.for-login), :has(section.for-reset-password)) .page-card { padding: 24px !important; }
}
.login-content { --kui-focus: #7aa7ff; }
/* wordmark: the white webp, sized like the platform's */
.login-content .page-card-head { text-align: center; align-items: center !important; margin-bottom: 22px; }
.login-content .page-card-head-text { align-items: center; }
.login-content .page-card-subtitle { display: none; }
.login-content .page-card-head .app-logo {
  content: url('/assets/kapdaa/images/kapdaa-logo-white.webp'); filter: brightness(0) invert(1);
  height: 54px; width: auto; margin: 0 auto 14px; display: block;
}
.login-content .page-card-head h4 {
  color: #fff !important; font-family: 'Bricolage Grotesque', var(--kui-font); font-size: 20px; font-weight: 600; margin: 0; text-align: center;
}
.for-forgot .page-card-subtitle { display: block; color: rgba(255,255,255,.72); text-align: center; }
/* fields */
.login-content .form-group label { color: rgba(255,255,255,.85) !important; font-size: 14px; font-weight: 500; }
.login-content .field-error { color: #fca5a5 !important; }
.login-content .email-field, .login-content .password-field { position: relative; width: 100%; }
.login-content .form-control {
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.45) !important;
  color: #f5f5f5 !important; border-radius: 8px !important; height: 48px !important; padding-left: 14px !important;
  font-size: 16px !important; box-shadow: none !important;    /* 16px: phones don't zoom in on the field */
}
.login-content .form-control::placeholder { color: rgba(255,255,255,.5) !important; }
/* The box also takes a username: Frappe's example email would mislead, and its label says what goes here */
.for-login #login_email::placeholder { color: transparent !important; }
.login-content .form-control:focus { border-color: rgba(255,255,255,.7) !important; background: rgba(255,255,255,.10) !important; color: #fff !important; }
.login-content .invalid .form-control { border-color: #fca5a5 !important; }
.login-content :is(.form-control, .es-button, a, .toggle-password):focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; }
/* the show-password eye: a 44px target, vertically centred on the field */
.login-content .password-field input { padding-right: 48px !important; }
.login-content .toggle-password {
  box-sizing: content-box; width: 20px; height: 20px; padding: 12px; color: rgba(255,255,255,.72); right: 0 !important; left: auto !important;
  z-index: 3; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; cursor: pointer; user-select: none;
}
.login-content .toggle-password:hover { color: #fff; }
.login-content input:-webkit-autofill,
.login-content input:-webkit-autofill:hover,
.login-content input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f5f5f5 !important;
  box-shadow: inset 0 0 0 1000px #252a2f !important;
  transition: background-color 9999s var(--kui-ease) var(--kui-t-fast);
}
/* links and helper text */
.login-content a, .sign-up-message { color: rgba(255,255,255,.8) !important; }
.login-content a:hover { color: #fff !important; }
.login-content a[href="#forgot"], .sign-up-message a { display: inline-flex; align-items: center; min-height: 44px; }
.sign-up-message { margin-top: 16px !important; }
.sign-up-message a { color: #fff !important; font-weight: 600; }
/* one primary action */
.login-content .es-button[data-variant="solid"] {
  background: #fff !important; color: #0b0b0b !important; border: none !important;
  border-radius: 8px; height: 48px; font-weight: 600; box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.login-content .es-button[data-variant="solid"]:hover, .login-content .es-button[data-variant="solid"]:focus { background: #f0f0f0 !important; color: #0b0b0b !important; }
.login-content .es-button[data-variant="solid"]:disabled {
  background: rgba(255,255,255,.16) !important; color: rgba(255,255,255,.72) !important; cursor: not-allowed;
}
/* Google, once connected: outlined, on top, then the fields */
.form-login .page-card-actions { display: contents; }
.form-login .social-logins { order: 0; margin: 0; }
.form-login .page-card-body { order: 1; }
.form-login .page-card-actions > .es-button { order: 2; }
.form-login .social-login-buttons { margin-top: 0; }
.form-login .login-button-wrapper { padding: 0 !important; margin: 0 !important; width: 100%; }
.form-login .social-logins, .form-login .social-login-buttons { width: 100%; padding: 0 !important; }
.form-login .social-logins::after { content: "or"; display: block; margin-top: 16px; color: rgba(255,255,255,.72); }
.social-login-buttons .btn-login-option {
  background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.45) !important;
  color: #fff !important; border-radius: 8px; height: 48px;
}
.social-login-buttons .btn-login-option:hover { background: rgba(255,255,255,.14) !important; }
.login-divider, .for-login .text-muted { color: rgba(255,255,255,.72) !important; }
/* the set-password page keeps Kapdaa's account bar: its logo on the dark ground, and room for it */
body:has(section.for-reset-password) .kap-acct-bar { background: rgba(6,9,13,.78); }
body:has(section.for-reset-password) .kap-acct-bar img { filter: brightness(0) invert(1); }
body:has(section.for-reset-password) section[class^="for-"] { min-height: calc(100svh - 56px); }
/* a sign-in error sits on the dark panel */
.login-content .login-error-banner { --es-al-bg: #2c1618; --es-al-icon: #fca5a5; }
.login-content .login-error-banner .es-alert__title { color: #fca5a5; }

/* ================= LINE CONTROL — the Floor line screen (shared 5-zone skeleton) ================= */
/* The shared page shell owns the line's width. */
.lc-page { max-width: none; }
/* Compact header — a single row: identity on the left, KPIs + machine inline on the right, thin progress bar. */
/* ── Line Cockpit — MIGRATED onto the KUI (warm) token system (design-uplift Phase 3). The board's existing
   warm palette (#EFEAE0 / #26221B / #1E6E5C) mapped near-1:1 onto the warm kui tokens, so the look is faithful
   and now dark-mode-correct. The per-line accent stays dynamic (--lc-accent set by JS = the line's stage
   colour); only its FALLBACK moves to --kui-accent. ── */
.lc-header { background: var(--kui-panel); border: 1px solid var(--kui-line); border-top: 3px solid var(--lc-accent, var(--kui-accent)); border-radius: 12px; padding: 11px 16px; margin-bottom: 12px; box-shadow: var(--kui-e1); }
.lc-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lc-eyebrow { font-size: var(--kui-fs-sm); font-weight: 700; color: var(--lc-accent, var(--kui-accent)); }
.lc-name { font-size: var(--kui-fs-xl); font-weight: 800; color: var(--kui-ink); margin: 1px 0; line-height: 1.15; }
.lc-does { font-size: 12px; color: var(--kui-text); max-width: 52ch; }
.lc-mach { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--kui-r-pill); white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.lc-mach--ok { background: var(--kui-good-tint); color: var(--kui-good); }
.lc-mach--down { background: var(--kui-alert-tint); color: var(--kui-alert); }
/* KPIs as a compact horizontal stats strip (was a tall band of boxed tiles). */
.lc-kpis { display: flex; gap: 26px; align-items: baseline; margin-top: 9px; flex-wrap: wrap; }
.lc-kpi { text-align: left; }
.lc-kpi-v { font-size: var(--kui-fs-xl); font-weight: 800; color: var(--kui-ink); line-height: 1; }
.lc-kpi-v small { font-size: 11px; font-weight: 600; color: var(--kui-text-soft); margin-left: 1px; }
.lc-kpi-l { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); margin-top: 3px; }
.lc-bar { height: 5px; border-radius: var(--kui-r-pill); background: var(--kui-panel-2); overflow: hidden; margin-top: 10px; }
.lc-bar > i { display: block; height: 100%; background: var(--lc-accent, var(--kui-accent)); border-radius: var(--kui-r-pill); transition: width .4s; }
/* The line is a BOARD, not a document — it fills one screen and never scrolls the page. The body is bounded to
   the viewport; the feed list and the process pane each scroll INSIDE their own column, so "on the line",
   the waiting/eligible queue and the process controls are all visible at once. */
/* NOW · NEXT · QUEUE — the line is a board: RUNNING NOW (the process) is the main column, NEXT UP + QUEUE the
   rail. Bounded to one screen; the process and the queue each scroll inside their own column. */
.lc-body { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: stretch;
    height: calc(100vh - 208px); min-height: 480px; }
.lc-now { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-right: 4px; }
.lc-now > .lc-proc-col { flex: 0 0 auto; }
.lc-rail { display: flex; flex-direction: column; min-height: 0; gap: 16px; }
.lc-rail > .lc-zone:last-child { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.lc-qlist { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding-right: 4px; }
/* the line's primary action stays pinned to the bottom of the scrolling NOW column — never below the fold */
.lc-proc-col > .gate-btn-primary { position: sticky; bottom: 0; z-index: 3; margin-bottom: 0; }
/* also-in-progress strip */
.lc-alsorun-h { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-sm); font-weight: 700; color: var(--kui-text-soft); display: flex; align-items: center; gap: 7px; margin: 14px 0 8px; }
.lc-alsorun-h svg { color: var(--lc-accent, var(--kui-accent)); }
.lc-zone-h { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; color: var(--kui-text-soft); display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.lc-zone-h svg { color: var(--lc-accent, var(--kui-accent)); }
.lc-zone-h .ct { margin-left: auto; letter-spacing: .02em; color: var(--kui-text); text-transform: none; }
.lc-now-h, #lc-now-h { margin-bottom: 10px; }
/* Next-up card */
.lc-next { display: flex; align-items: center; gap: 10px; background: var(--kui-panel); border: 1px solid var(--kui-line);
    border-radius: var(--kui-r-lg); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; }
.lc-next:hover { border-color: color-mix(in srgb, var(--lc-accent, var(--kui-accent)) 40%, var(--kui-line)); }
.lc-seq { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; width: 20px; height: 20px; flex: none;
    border-radius: 6px; background: color-mix(in srgb, var(--lc-accent, var(--kui-accent)) 14%, transparent); color: var(--lc-accent, var(--kui-accent));
    display: grid; place-items: center; }
.lc-nx-main { flex: 1; min-width: 0; }
.lc-nx-lot { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-md); font-weight: 650; color: var(--kui-ink); }
.lc-nx-sub { font-size: 11px; color: var(--kui-text); display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 1px; }
.lc-staged { color: var(--kui-good); font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.lc-stored { color: var(--kui-text-soft); font-weight: 600; }
.lc-load { font-size: 11px; font-weight: 700; color: var(--kui-accent-ink); background: var(--kui-accent); border-radius: 6px; padding: 5px 12px; white-space: nowrap; }
/* Queue */
.lc-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 9px; }
.lc-chip { font-size: 11px; font-weight: 650; padding: 5px 11px; border-radius: var(--kui-r-pill); border: 1px solid var(--kui-line);
    color: var(--kui-text); background: var(--kui-panel); cursor: pointer; }
.lc-chip.on { background: var(--kui-ink); color: var(--kui-bg); border-color: var(--kui-ink); }
/* The queue zone is a COLUMN flex, so the base .kap-search `flex: 1 1 320px` (a row-toolbar width) would make
   the field GROW VERTICALLY to fill the zone — a tall pill reads as a giant circle when the queue is empty.
   Pin it to its natural height here. */
.lc-rail .kap-search { width: 100%; max-width: none; margin-bottom: 9px; flex: 0 0 auto; }
.lc-qrow { display: flex; align-items: center; gap: 9px; background: var(--kui-panel); border: 1px solid var(--kui-line);
    border-radius: var(--kui-r); padding: 8px 11px; margin-bottom: 6px; cursor: pointer; }
.lc-qrow:hover { border-color: var(--kui-line-strong); }
.lc-q-main { flex: 1; min-width: 0; }
.lc-q-lot { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 650; color: var(--kui-ink); }
.lc-q-sub { font-size: var(--kui-fs-sm); color: var(--kui-text); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 1px; }
.lc-age { display: inline-flex; align-items: center; gap: 3px; }
.lc-age--aged { color: var(--kui-warn); font-weight: 700; }
.lc-move { font-size: var(--kui-fs-sm); font-weight: 700; color: var(--kui-accent); border: 1px solid var(--kui-line); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
/* select mode (Blending — tick to compose a run) */
.lc-check { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--kui-line-strong); border-radius: var(--kui-r-sm);
    display: inline-grid; place-items: center; color: var(--lc-accent, var(--kui-accent)); }
.lc-pick--on { border-color: color-mix(in srgb, var(--lc-accent, var(--kui-accent)) 50%, var(--kui-line)); background: color-mix(in srgb, var(--lc-accent, var(--kui-accent)) 6%, var(--kui-panel)); }
.lc-pick--on .lc-check { border-color: var(--lc-accent, var(--kui-accent)); background: color-mix(in srgb, var(--lc-accent, var(--kui-accent)) 14%, transparent); }
/* Also-running strip (other stations) */
.lc-alsorun { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lc-mini { display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--lc-accent, var(--kui-accent)) 5%, var(--kui-panel));
    border: 1px solid color-mix(in srgb, var(--lc-accent, var(--kui-accent)) 30%, var(--kui-line)); border-radius: var(--kui-r); padding: 10px 13px; cursor: pointer; }
.lc-mini-run { color: var(--lc-accent, var(--kui-accent)); display: inline-flex; }
.lc-mini-lot { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-md); font-weight: 650; color: var(--kui-ink); }
.lc-mini-type { font-size: var(--kui-fs-sm); color: var(--kui-text); }
.lc-mini-open { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--kui-accent); border: 1px solid var(--kui-line); border-radius: 6px; padding: 4px 9px; }
/* live dot in the running pill */
.lc-livedot { width: 7px; height: 7px; border-radius: var(--kui-r-pill); background: currentColor; position: relative; }
.lc-livedot::after { content: ""; position: absolute; inset: -3px; border-radius: var(--kui-r-pill); border: 1.5px solid currentColor; opacity: .5; animation: lcpulse 1.8s ease-out infinite; }
@keyframes lcpulse { to { transform: scale(2.3); opacity: 0; } }
.lc-kpi--warn .lc-kpi-v, .lc-kpi--warn .lc-kpi-l { color: var(--kui-warn); }
/* balance check (⚖ recorded vs on the line) */
.lc-balance-row { margin: 4px 0 4px; }
.lc-balance-l { font-size: var(--kui-fs-sm); color: var(--kui-text); display: flex; align-items: center; gap: 6px; }
.lc-balance-l svg { color: var(--kui-text-soft); }
.lc-balance-row.is-ok .lc-balance-l svg { color: var(--kui-good); }
.lc-bal-ok { color: var(--kui-good); font-weight: 700; }
.lc-balance { height: 8px; border-radius: var(--kui-r-pill); background: var(--kui-panel-2); overflow: hidden; margin-top: 5px; }
.lc-balance > i { display: block; height: 100%; background: var(--kui-line-strong); border-radius: var(--kui-r-pill); transition: width .3s; }
.lc-balance-row.is-ok .lc-balance > i { background: var(--kui-good); }
@media (max-width: 1000px) { .lc-kpis { margin-left: 0; } .lc-top { align-items: flex-start; } }
@media (max-width: 900px) { .lc-body { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .lc-now > .lc-proc-col, .lc-qlist { overflow: visible; } }
@media (prefers-reduced-motion: reduce) { .lc-livedot::after { animation: none; } }

.lc-fr-id { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-ink); }
.lc-fr-mid { flex: 1; min-width: 0; font-size: var(--kui-fs-md); color: var(--kui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lc-feed-more { font-size: 12px; color: var(--kui-text-soft); padding: 6px 2px; }
.lc-proc-col { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); box-shadow: var(--kui-e1); padding: 16px 18px; min-height: 320px; }
.lc-proc-idle { color: var(--kui-text-soft); display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; min-height: 280px; text-align: center; font-size: 14px; }
.lc-proc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.lc-proc-head h3 { font-size: var(--kui-fs-lg); font-weight: 700; display: flex; gap: 8px; align-items: center; margin: 0; color: var(--kui-ink); }

/* Blending Line Control — multi-select feed (tick to add to the run) + the run composition in ④ */

.bl-run { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.bl-run-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--kui-line); border-radius: 8px; background: var(--kui-panel); }
.bl-run-x { margin-left: auto; border: 0; background: transparent; color: var(--kui-text-soft); cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 7px; border-radius: var(--kui-r-sm); }
.bl-run-x:hover { background: var(--kui-panel-2); color: var(--kui-ink); }

/* Capacity Planner — "Lines: enough stock to keep them running?" band (rates + feed status, up top) */
.cp-lines { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px; padding: 12px 16px; margin: 0 0 14px; }
.cp-lines-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; color: var(--kui-ink); margin-bottom: 10px; }
.cp-lines-verdict { font-size: var(--kui-fs-md); font-weight: 700; padding: 4px 11px; border-radius: var(--kui-r-pill); display: inline-flex; gap: 6px; align-items: center; }
.cp-lines-verdict--ok { background: var(--kui-good-tint); color: var(--kui-good); }
.cp-lines-verdict--alert { background: var(--kui-alert-tint); color: var(--kui-alert); }
.cp-lines-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
.cp-line { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nm st" "rate rate" "buf buf"; gap: 3px 8px; align-items: center; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r); padding: 9px 12px; }
.cp-line-nm { grid-area: nm; font-weight: 700; font-size: var(--kui-fs-base); color: var(--kui-ink); }
.cp-line-drum { font-size: var(--kui-fs-sm); font-weight: 700; color: var(--kui-alert); background: var(--kui-alert-tint); padding: 1px 6px; border-radius: var(--kui-r-pill); vertical-align: middle; margin-left: 4px; }
.cp-line-rate { grid-area: rate; font-size: 12px; color: var(--kui-text); font-variant-numeric: tabular-nums; }
.cp-line-buf { grid-area: buf; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); display: inline-flex; gap: 5px; align-items: center; }
.cp-line-st { grid-area: st; justify-self: end; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--kui-r-pill); white-space: nowrap; }

/* ===================================================================== */
/* Help & Guide — in-app documentation (portal /help + desk help page)   */
/* Reads the shared --kui-* tokens (light + dark follow them).           */
/* ===================================================================== */
.khelp{--kh-ink:var(--kui-ink);--kh-ink2:var(--kui-text);--kh-muted:var(--kui-text-soft);--kh-faint:var(--kui-text-soft);--kh-hair:var(--kui-line);
  --kh-green:var(--kui-viz);--kh-green-ink:var(--kui-viz-text);--kh-soft:var(--kui-viz-tint);--kh-panel:var(--kui-panel);--kh-panel2:var(--kui-panel-2);
  display:grid;grid-template-columns:232px minmax(0,1fr) 188px;gap:30px;align-items:stretch;
  max-width:none;margin:0 auto;color:var(--kh-ink);}
/* Respect the Desk "Toggle Full Width" — expand to fill instead of staying capped (was a hard 1080 cap). */
body.full-width .khelp{max-width:none;}
/* a page with no "On this page" list (Help's home): two columns, the article takes the third's width (no empty column) */
@media(min-width:901px){.khelp:not(:has(> .khelp-otp)){grid-template-columns:232px minmax(0,1fr)}}
@media(max-width:900px){.khelp{grid-template-columns:1fr;gap:16px}.khelp-otp{display:none}}
/* equal-height columns (owner: no staggered columns): the side columns take the article's height; what they hold
   stays in view (sticky) and scrolls inside its own box */
.khelp-pin{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:900px){.khelp-pin{position:static;max-height:none;overflow:visible}}
/* Help search now uses the shared kapdaa.searchField (.kap-search pill) — just space it above the results/nav. */
.khelp-side .kap-search{width:100%;margin-bottom:14px}
.khelp-grp{margin-bottom:16px}
.khelp-grp-lbl{font-size:11px;font-weight:700;
  color:var(--kh-faint);margin:0 0 6px;padding:0 4px}
.khelp-link{display:block;text-decoration:none;color:var(--kh-ink2);font-size:var(--kui-fs-base);padding:6px 10px;border-radius:var(--kui-r)}
.khelp-link:hover{background:var(--kh-panel2);color:var(--kh-ink)}
.khelp-link.on{background:var(--kh-soft);color:var(--kh-green-ink);font-weight:600;box-shadow:inset 2px 0 0 var(--kh-green)}
.khelp-crumb{font-size:12px;color:var(--kh-faint);margin-bottom:14px}
.khelp-crumb b{color:var(--kh-muted);font-weight:600}.khelp-crumb span{opacity:.5;margin:0 2px}
.khelp-body{font-size:var(--kui-fs-lg);line-height:1.65;color:var(--kh-ink2);max-width:68ch}
.khelp-body h1{font-size:var(--kui-fs-2xl);letter-spacing:-.02em;margin:0 0 14px;color:var(--kh-ink);font-weight:700}
.khelp-body h2{font-size:var(--kui-fs-lg);margin:28px 0 8px;color:var(--kh-ink);font-weight:700;scroll-margin-top:16px}
.khelp-body h3{font-size:var(--kui-fs-lg);margin:20px 0 6px;color:var(--kh-ink);font-weight:700;scroll-margin-top:16px}
.khelp-body p{margin:0 0 12px}
.khelp-body ul,.khelp-body ol{margin:0 0 14px;padding-left:22px}.khelp-body li{margin:5px 0}
.khelp-body strong{color:var(--kh-ink)}
.khelp-body code{background:var(--kh-panel2);border:1px solid var(--kh-hair);border-radius:var(--kui-r-sm);padding:1px 5px;font-size:.9em}
.khelp-tw{overflow-x:auto;margin:6px 0 18px;border:1px solid var(--kh-hair);border-radius:8px}
.khelp-body table{border-collapse:collapse;width:100%;font-size:var(--kui-fs-base);display:table}
.khelp-body th,.khelp-body td{border-bottom:1px solid var(--kh-hair);border-right:1px solid var(--kh-hair);
  padding:8px 11px;text-align:left;vertical-align:top;word-break:normal}
.khelp-body tr>:last-child{border-right:0}
.khelp-body tbody tr:last-child>*{border-bottom:0}
.khelp-body th{background:var(--kh-panel2);font-weight:700}
.khelp-body a{color:var(--kh-green-ink)}
.khelp-otp{font-size:var(--kui-fs-md)}
.khelp-otp-lbl{font-size:11px;font-weight:700;color:var(--kh-faint);margin-bottom:10px}
.khelp-otp a{display:block;text-decoration:none;color:var(--kh-muted);padding:4px 0 4px 10px;border-left:2px solid var(--kh-hair)}
.khelp-otp a:hover{color:var(--kh-ink);border-left-color:var(--kh-green)}
.khelp-otp-l3{padding-left:22px}

/* Help — Module Reference page (desk) */
.khelp-gen{color:var(--kh-faint);font-size:var(--kui-fs-md);margin-top:18px}
.khelp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 20px}
.khelp-chip{display:inline-flex;align-items:baseline;gap:6px;background:var(--kh-panel2);border:1px solid var(--kh-hair);
  border-radius:20px;padding:5px 12px;font-size:var(--kui-fs-md);color:var(--kh-muted)}
.khelp-chip b{font-size:14px;color:var(--kh-ink);font-weight:700}
.khelp-chip.app{color:var(--kh-green-ink);border-color:color-mix(in srgb,var(--kh-green) 35%,var(--kh-hair))}
.khelp-msec{margin:22px 0 6px;display:flex;align-items:center;gap:9px}
.khelp-msec .t{font-size:13px;font-weight:700;color:var(--kh-ink)}
.khelp-msec .n{font-size:11px;color:var(--kh-faint);border:1px solid var(--kh-hair);border-radius:20px;padding:1px 8px}
.khelp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:4px 0 6px}
@media(max-width:640px){.khelp-grid{grid-template-columns:1fr}}
.khelp-rec{display:flex;align-items:center;gap:9px;border:1px solid var(--kh-hair);border-radius:var(--kui-r);padding:9px 12px;
  background:var(--kh-panel);font-size:var(--kui-fs-base);color:var(--kh-ink2)}
.khelp-rec .b{width:6px;height:6px;border-radius:2px;background:var(--kh-green);flex:0 0 auto;opacity:.75}
.khelp-rec.scr .b{border-radius:50%;background:var(--kui-info)}
.khelp-rec.rep .b{background:var(--kui-warn);border-radius:1px}
.khelp-ext{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:13px}
.khelp-ext td{border-top:1px solid var(--kh-hair);padding:8px 6px;color:var(--kh-ink2);vertical-align:top}
.khelp-ext td.d{font-weight:600;color:var(--kh-ink);white-space:nowrap;width:150px}
.khelp-ext td.n{color:var(--kh-green-ink);font-weight:700;width:52px;text-align:right}
.khelp-ext td.x{color:var(--kh-muted);font-size:var(--kui-fs-md)}

/* Help — callouts · cards · pager (docs modernisation) */
.khelp-callout{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--kh-hair);
  border-left-width:3px;border-radius:8px;padding:11px 14px;margin:14px 0;background:var(--kh-panel2);font-size:14px}
.khelp-callout .ci{flex:0 0 auto;line-height:1.5}
.khelp-callout .cc>*:first-child{margin-top:0}.khelp-callout .cc>*:last-child{margin-bottom:0}
.khelp-callout--tip{border-left-color:var(--kh-green);background:var(--kh-soft)}
.khelp-callout--info{border-left-color:var(--kui-info)}
.khelp-callout--warning{border-left-color:var(--kui-warn)}
.khelp-callout--danger{border-left-color:var(--kui-alert)}
/* one column rule for every group: 3 equal columns, 2 on a tablet, 1 on a phone */
.khelp-cardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 22px}
@media(max-width:700px){.khelp-cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.khelp-cardgrid{grid-template-columns:minmax(0,1fr)}}
/* the topic list: open beside the article; under 900 px it folds behind a 44 px "Topics" control (JS sets open) */
.khelp-nav>summary{display:none;list-style:none;cursor:pointer;min-height:var(--kui-target-touch,44px);align-items:center;padding:0 12px;
  border:1px solid var(--kh-hair);border-radius:var(--kui-r);background:var(--kh-panel);font-weight:600;color:var(--kh-ink);margin-bottom:8px}
.khelp-nav>summary::-webkit-details-marker{display:none}
@media(max-width:900px){.khelp-nav>summary{display:flex}}
.khelp-card{display:block;text-decoration:none;border:1px solid var(--kh-hair);border-radius:12px;
  padding:15px 16px;background:var(--kh-panel);color:var(--kh-ink);transition:border-color var(--kui-t-fast),transform var(--kui-t-fast)}
.khelp-card:hover{border-color:color-mix(in srgb,var(--kh-green) 45%,var(--kh-hair));transform:translateY(-1px)}
.khelp-card .ic{color:var(--kh-green-ink);margin-bottom:8px;display:block}
.khelp-card .t{font-weight:650;font-size:var(--kui-fs-base);letter-spacing:-.01em}
.khelp-card .s{font-size:13px;color:var(--kh-muted);margin-top:3px;line-height:1.5}
.khelp-hero{margin:2px 0 20px}
.khelp-hero h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px;font-weight:700}
.khelp-hero p{color:var(--kh-muted);font-size:var(--kui-fs-lg);margin:0;max-width:62ch}
.khelp-grouptitle{font-size:12px;font-weight:700;
  color:var(--kh-faint);margin:22px 0 10px}
.khelp-pager{display:flex;gap:12px;margin-top:32px;padding-top:18px;border-top:1px solid var(--kh-hair)}
.khelp-pager a{flex:1;text-decoration:none;border:1px solid var(--kh-hair);border-radius:var(--kui-r-lg);padding:12px 15px;
  color:var(--kh-ink);background:var(--kh-panel)}
.khelp-pager a:hover{border-color:color-mix(in srgb,var(--kh-green) 45%,var(--kh-hair))}
.khelp-pager .d{font-size:11px;color:var(--kh-faint);font-weight:700}
.khelp-pager .t{font-size:14px;font-weight:600;margin-top:3px}.khelp-pager .nx{text-align:right}
/* cap the reading measure even when the shell is full-width */
body.full-width .khelp-body{max-width:76ch}
.khelp-updated{font-size:12px;color:var(--kh-faint);margin:-4px 0 16px}

/* Help — search results + contextual "full guide" link */
.khelp-results{margin:0 0 14px;border:1px solid var(--kh-hair);border-radius:var(--kui-r);overflow:hidden;background:var(--kh-panel)}
.khelp-result{display:block;text-decoration:none;padding:9px 12px;border-bottom:1px solid var(--kh-hair);color:var(--kh-ink)}
.khelp-result:last-child{border-bottom:0}.khelp-result:hover{background:var(--kh-panel2)}
.khelp-result .rt{font-weight:600;font-size:var(--kui-fs-base)}
.khelp-result .rg{font-size:var(--kui-fs-sm);color:var(--kh-green-ink);margin-top:1px}
.khelp-result .rs{font-size:12px;color:var(--kh-muted);margin-top:2px;line-height:1.4}
.khelp-noresult{padding:10px 12px;font-size:13px;color:var(--kh-muted)}
.kap-help-more{display:inline-block;margin-top:10px;font-size:var(--kui-fs-md);font-weight:600;color:var(--kui-accent);text-decoration:none}
.kap-help-more:hover{text-decoration:underline}
.khelp-modblurb{font-size:var(--kui-fs-base);color:var(--kh-ink2);margin:-4px 0 18px;max-width:68ch}

/* ── Composition component (WS-1): whose · contents · how-formed. Shared desk+portal; bar colours passed inline. ── */
/* align-items:start — each lens card hugs its content instead of stretching to the tallest, so a sparse
   card (e.g. a 2-client "Whose") doesn't become a tall empty box (standard §1: no dead space). */
.kap-compo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
@media(max-width:820px){.kap-compo{grid-template-columns:1fr}}
.kap-compo__lens{background:var(--kui-panel,#fff);border:1px solid var(--kui-line,#e5ded0);border-radius:12px;padding:13px 15px}
.kap-compo__lh{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin:0 0 11px;color:var(--kui-ink,#221f1b)}
.kap-compo__lh .tag{margin-left:auto;font-size:var(--kui-fs-xs);font-weight:700;color:var(--kui-text-soft,#6c665b);background:var(--kui-bg,#faf6ee);border:1px solid var(--kui-line,#e5ded0);border-radius:var(--kui-r-sm);padding:1px 6px}
.kap-compo__kv{font-size:var(--kui-fs-xl);font-weight:800;font-variant-numeric:tabular-nums;line-height:1;color:var(--kui-ink,#221f1b)}
.kap-compo__kvsub{font-size:var(--kui-fs-sm);color:var(--kui-text-soft,#6c665b);margin:2px 0 11px}
.kap-compo__bar{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:5px}
.kap-compo__bar .l{width:82px;flex:none;color:var(--kui-text-soft,#6c665b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kap-compo__bar .t{flex:1;height:7px;border-radius:4px;background:var(--kui-bg,#efe9dd);overflow:hidden}
.kap-compo__bar .t i{display:block;height:100%;border-radius:4px}
.kap-compo__bar .v{min-width:56px;text-align:right;font-family:var(--font-mono,monospace);font-size:11px;font-weight:700;color:var(--kui-ink,#221f1b)}
.kap-compo__chips{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0 9px}
.kap-compo__chips span{font-size:11px;background:var(--kui-bg,#faf6ee);border:1px solid var(--kui-line,#e5ded0);border-radius:6px;padding:2px 8px;color:var(--kui-text-soft,#6c665b)}
.kap-compo__chips b{color:var(--kui-ink,#221f1b);font-family:var(--font-mono,monospace)}
/* Secondary breakdown group (colour / garment types) — tiny quiet label above its chip row so the
   card scans primary→secondary instead of one flat wall of chips. */
.kap-compo__sub{margin:0 0 9px}
.kap-compo__sub .kap-compo__chips{margin:2px 0 0}
.kap-compo__sublbl{display:block;font-size:var(--kui-fs-sm);font-weight:700;color:var(--kui-text-soft,#6c665b);opacity:.75}
.kap-compo__qc{display:flex;align-items:center;gap:8px;font-size:12px;border-radius:8px;padding:7px 10px;border:1px solid var(--kui-line,#e5ded0);background:var(--kui-bg,#faf6ee)}
.kap-compo__qc .g{font-weight:800}
.kap-compo__step{position:relative;padding:0 0 11px 18px;font-size:12px}
.kap-compo__step::before{content:"";position:absolute;left:3px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--sc,#726d64)}
.kap-compo__step::after{content:"";position:absolute;left:6.5px;top:12px;bottom:0;width:1.5px;background:var(--kui-line,#e5ded0)}
.kap-compo__step:last-child{padding-bottom:0}.kap-compo__step:last-child::after{display:none}
.kap-compo__step b{font-weight:650;color:var(--kui-ink,#221f1b)}
.kap-compo__step .d{color:var(--kui-text-soft,#6c665b);font-size:11px}
.kap-compo__mix{display:inline-block;font-size:var(--kui-fs-xs);font-weight:800;color:#fff;background:var(--kui-warn,#b45309);border-radius:var(--kui-r-sm);padding:1px 6px;margin-right:6px;vertical-align:1px}
.kap-compo-glance{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono,monospace);font-size:12px;color:var(--kui-text-soft,#6c665b)}
.kap-compo-glance b{color:var(--kui-ink,#221f1b)}

/* ── Ops fate card (WS-1): what it sorted into · where it is · route it (tear/blend/sell) ── */
.kap-fate{display:flex;flex-direction:column;gap:9px}
.kap-fate__loc{display:flex;align-items:center;gap:6px;font-size:var(--kui-fs-md);color:var(--kui-text-soft,#6c665b)}
.kap-fate__loc svg{width:14px;height:14px}
.kap-fate__hint{font-size:12px;color:var(--kui-text-soft,#6c665b);font-style:italic}
.kap-fate__routes{display:flex;gap:8px;flex-wrap:wrap}
.kap-fate__route{flex:1;min-width:96px;padding:10px 12px;border-radius:var(--kui-r);border:1px solid var(--kui-line,#e5ded0);background:var(--kui-panel,#fff);font-weight:600;font-size:13px;color:var(--kui-ink,#221f1b);cursor:pointer}
.kap-fate__route:hover{border-color:var(--kui-accent,#15803d)}
.kap-fate__route.is-primary{background:var(--kui-accent,#15803d);color:var(--kui-accent-ink,#fff);border-color:transparent}

/* ===== Portal chrome: global search (⌘K) + org switcher ===== */
/* navbar search trigger */
.kap-gsearch .kap-gsearch-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--kui-text-2, #6c665b); }
.kap-gsearch .kap-gsearch-hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kui-fs-md); color: var(--kui-text-2, #6c665b);
    border: 1px solid var(--kui-line, #e5ded0); border-radius: 8px; padding: 4px 9px; background: var(--kui-panel-2, #f7f4ee); }
.kap-gsearch .kap-gsearch-hint kbd { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-xs); background: var(--kui-panel, #fff);
    border: 1px solid var(--kui-line, #e5ded0); border-radius: 4px; padding: 0 4px; color: var(--kui-text, #221f1b); }
/* Phone: the search trigger is icon-only. Hide the WHOLE hint — "Search" is a bare text node in .kap-gsearch-hint
   (not a nested span), so the old `span, kbd` rule left "Search" visible at ~89px and helped overflow the navbar. */
@media (max-width: 640px) { .kap-gsearch .kap-gsearch-hint { display: none; } }
/* Portal mobile nav = the ☰ drawer (sidebar), NOT the navbar. Below lg the stock Bootstrap navbar dumps a full
   copy of the page links (Home…Help) into a `.d-lg-none` block inside the action group — a second, always-open
   menu that overlapped the header and made the navbar ~259px tall. Nav belongs to the drawer, so hide that block
   here (CSS, no route list to keep in sync) and keep the top bar one clean row: logo · search · bell · account. */
@media (max-width: 991.98px) {
    body[data-path] .navbar .navbar-nav .d-lg-none { display: none !important; }
    body[data-path] .navbar .navbar-nav.ml-auto { min-width: 0; }
}
/* ⌘K palette overlay */
.kap-cmdk { position: fixed; inset: 0; z-index: 2000; background: color-mix(in srgb, #1a1712 42%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.kap-cmdk-box { width: 100%; max-width: 560px; background: var(--kui-panel, #fff); border: 1px solid var(--kui-line, #e5ded0); border-radius: var(--kui-r-lg); box-shadow: 0 24px 60px #0000002e; overflow: hidden; }
.kap-cmdk-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--kui-line, #e5ded0); }
.kap-cmdk-in svg { color: var(--kui-text-2, #6c665b); flex: none; }
.kap-cmdk-in input { flex: 1; border: 0; outline: none; background: none; font-size: 16px; color: var(--kui-text, #221f1b); }
.kap-cmdk-in kbd { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-xs); color: var(--kui-text-2, #6c665b); border: 1px solid var(--kui-line, #e5ded0); border-radius: 4px; padding: 1px 5px; }
.kap-cmdk-results { max-height: 52vh; overflow-y: auto; }
.kap-cmdk-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center; padding: 11px 16px; text-decoration: none; color: var(--kui-text, #221f1b); border-bottom: 1px solid var(--kui-line, #e5ded0); }
.kap-cmdk-row:last-child { border-bottom: 0; }
.kap-cmdk-row.on { background: var(--kui-panel-2, #f7f4ee); }
.kap-cmdk-t { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--kui-fs-sm); font-weight: 700; color: var(--kui-accent, #2d6a4f); background: color-mix(in srgb, var(--kui-accent, #2d6a4f) 12%, transparent); border-radius: var(--kui-r-sm); padding: 3px 7px; text-align: center; }
.kap-cmdk-l { font-weight: 620; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kap-cmdk-s { font-size: 12px; color: var(--kui-text-2, #6c665b); white-space: nowrap; }
.kap-cmdk-empty { padding: 22px 16px; text-align: center; color: var(--kui-text-2, #6c665b); font-size: 13px; }
body.kap-cmdk-open { overflow: hidden; }
/* org switcher (sidebar header) */
.kap-orgsw { list-style: none; padding: 6px 8px 10px; margin: 0 0 4px; border-bottom: 1px solid var(--kui-line, #e5ded0); position: relative; }
.kap-orgsw-btn { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--kui-line, #e5ded0); background: var(--kui-panel, #fff); border-radius: var(--kui-r); padding: 8px 10px; cursor: pointer; text-align: left; color: var(--kui-text, #221f1b); }
.kap-orgsw-btn:hover { border-color: var(--kui-accent, #2d6a4f); }
.kap-orgsw-av { width: 26px; height: 26px; border-radius: var(--kui-r); background: var(--kui-accent, #2d6a4f); color: var(--kui-accent-ink, #fff); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.kap-orgsw-nm { flex: 1; font-weight: 600; font-size: var(--kui-fs-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kap-orgsw-btn svg { color: var(--kui-text-2, #6c665b); flex: none; }
.kap-orgsw-menu { position: absolute; left: 8px; right: 8px; top: calc(100% - 2px); z-index: 30; background: var(--kui-panel, #fff); border: 1px solid var(--kui-line, #e5ded0); border-radius: var(--kui-r-lg); box-shadow: 0 12px 30px #00000022; overflow: hidden; }
.kap-orgsw-item { display: block; padding: 10px 12px; text-decoration: none; color: var(--kui-text, #221f1b); font-size: var(--kui-fs-base); border-bottom: 1px solid var(--kui-line, #e5ded0); }
.kap-orgsw-item:last-child { border-bottom: 0; }
.kap-orgsw-item:hover { background: var(--kui-panel-2, #f7f4ee); }
.kap-orgsw-item.on { font-weight: 640; color: var(--kui-accent, #2d6a4f); }

/* ── Reception — the receptionist front desk (person layer). Shares the --kui-* tokens + the gate type colours. ── */
.rcp .rcp-body { margin-top: 4px; }
.rcp .rcp-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rcp .rcp-muster { margin-left: auto; font-size: 13px; color: var(--kui-text-2); display: inline-flex; align-items: center; gap: 8px; }
.rcp .rcp-muster b { color: var(--kui-text); font-variant-numeric: tabular-nums; }
.rcp .rcp-muster svg { color: var(--kui-text-2); }
.rcp .rcp-list { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); overflow: hidden; }
.rcp .rcp-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-bottom: 1px solid var(--kui-line); }
.rcp .rcp-row:last-child { border-bottom: 0; }
.rcp .rcp-row.is-blocked { background: color-mix(in srgb, var(--kui-alert) 6%, var(--kui-panel)); }
.rcp .rcp-av { width: 34px; height: 34px; border-radius: 50%; background: var(--kui-panel-2); display: grid; place-items: center; font-weight: 680; font-size: 12px; color: var(--kui-text-2); flex: none; }
.rcp .rcp-who { flex: 1; min-width: 0; }
.rcp .rcp-who b { font-weight: 640; }
.rcp .rcp-drv { font-size: var(--kui-fs-sm); font-weight: 700; background: color-mix(in srgb, var(--kui-warn) 16%, transparent); color: var(--kui-warn); border-radius: 4px; padding: 2px 5px; margin-left: 7px; vertical-align: 1px; }
.rcp .rcp-meta { font-size: 12px; color: var(--kui-text-2); margin-top: 2px; }
/* phone: who they are on the first line, their status and the action underneath (after the base rules, so it wins) */
@media (max-width: 600px) {
  .rcp .rcp-row { flex-wrap: wrap; }
  .rcp .rcp-who { flex: 1 1 calc(100% - 47px); }
  .rcp .rcp-row > .rcp-chip { margin-left: 47px; }
  .rcp .rcp-act { margin-left: auto; }
}
.rcp .rcp-type { font-size: 11px; font-weight: 640; border-radius: var(--kui-r-pill); padding: 2px 9px; background: var(--kui-panel-2); color: var(--kui-text); }
.rcp .rcp-type--visitor { background: color-mix(in srgb, var(--kui-people, #8a5a86) 14%, transparent); color: var(--kui-people, #8a5a86); }
.rcp .rcp-type--contractor { background: color-mix(in srgb, var(--kui-warn) 14%, transparent); color: var(--kui-warn); }
.rcp .rcp-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--kui-fs-sm); font-weight: 600; border-radius: var(--kui-r-pill); padding: 4px 10px; white-space: nowrap; }
.rcp .rcp-chip--ok { background: color-mix(in srgb, var(--kui-good) 13%, transparent); color: var(--kui-good); }
.rcp .rcp-chip--pend { background: color-mix(in srgb, var(--kui-warn) 14%, transparent); color: var(--kui-warn); }
.rcp .rcp-chip--block { background: color-mix(in srgb, var(--kui-alert) 13%, transparent); color: var(--kui-alert); }
.rcp .rcp-act { flex: none; } .rcp .rcp-time { font-family: var(--kui-mono, ui-monospace, monospace); font-size: var(--kui-fs-md); color: var(--kui-text-3, var(--kui-text-2)); }
.rcp .rcp-evac { display: flex; align-items: center; gap: 14px; background: color-mix(in srgb, var(--kui-alert) 8%, var(--kui-panel)); border: 1px solid color-mix(in srgb, var(--kui-alert) 30%, var(--kui-line)); border-radius: var(--kui-r-lg); padding: 14px 17px; margin-bottom: 15px; }
.rcp .rcp-evac-n { font-size: var(--kui-fs-3xl); font-weight: 760; color: var(--kui-alert); font-variant-numeric: tabular-nums; }
.rcp .rcp-evac b { color: var(--kui-text); } .rcp .rcp-evac-s { font-size: var(--kui-fs-md); color: var(--kui-text-2); }
/* Roll-call load failure — louder than the normal alert tint so staff can't mistake it for "site clear". */
.rcp .rcp-evac--fail { background: color-mix(in srgb, var(--kui-alert) 16%, var(--kui-panel)); border-color: var(--kui-alert); }
.rcp .rcp-evac--fail .rcp-evac-n { line-height: 1; }
.rcp .rcp-evac-actions { display: flex; justify-content: center; margin-bottom: 15px; }
.rcp .rcp-marks { display: flex; gap: 6px; flex: none; }
.rcp .rcp-mark { border: 1px solid var(--kui-line-2, var(--kui-line)); background: var(--kui-panel); border-radius: 8px; padding: 6px 13px; font-size: 12px; font-weight: 600; color: var(--kui-text-2); cursor: pointer; }
.rcp .rcp-mark--safe.is-on { background: color-mix(in srgb, var(--kui-good) 15%, transparent); border-color: transparent; color: var(--kui-good); }
.rcp .rcp-mark--miss.is-on { background: color-mix(in srgb, var(--kui-alert) 15%, transparent); border-color: transparent; color: var(--kui-alert); }

/* ── Reception sign-in kiosk — a calm, big-target self-service surface (tablet at the door). ── */
/* The door tablet wears the branded login's ground (textile photo under ink, white wordmark): one family with
   /login, and a visitor sees whose site this is before the card says it. */
body.kap-kiosk-mode:has(.rck) {
    background: linear-gradient(rgba(6,9,13,.62), rgba(6,9,13,.62)), url('/assets/kapdaa/images/login-bg.webp') center / cover no-repeat fixed !important; }
body.kap-kiosk-mode:has(.rck) :is(.page-container, .page-body, .layout-main, .layout-main-section-wrapper, .layout-main-section, .page-content) { background: transparent !important; }
.rck { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; min-height: 100dvh; padding: 32px 16px; }
.rck::before { content: ""; width: 200px; height: 56px; flex: none; background: url('/assets/kapdaa/images/kapdaa-logo-white.webp') center / contain no-repeat; }
.rck-card { width: 100%; max-width: 560px; background: var(--kui-panel); border: 0; border-radius: var(--kui-r-lg); padding: 36px 32px 32px; box-shadow: 0 24px 64px rgba(0,0,0,.36); }
.rck-h { margin: 0; font: 700 var(--kui-fs-xl)/1.2 var(--kui-display); letter-spacing: -.01em; color: var(--kui-ink); }
@media (max-width: 520px) { .rck { justify-content: flex-start; gap: 20px; } .rck::before { width: 160px; height: 44px; } .rck-card { padding: 24px 20px 20px; } }
.rck-sub { font-size: var(--kui-fs-base); color: var(--kui-text-2); margin-top: 6px; line-height: 1.5; }
.rck-list { margin: 18px 0 12px; display: flex; flex-direction: column; gap: 9px; }
.rck-pick { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); padding: 13px 15px; cursor: pointer; }
.rck-pick:hover { border-color: var(--kui-accent, #2d6a4f); }
.rck-pick svg { margin-left: auto; color: var(--kui-text-3, var(--kui-text-2)); width: 18px; height: 18px; }
.rck-av { width: 38px; height: 38px; border-radius: 50%; background: var(--kui-panel); display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--kui-text-2); flex: none; }
.rck-pick-t { display: flex; flex-direction: column; } .rck-pick-t b { font-weight: 640; } .rck-pick-t span { font-size: var(--kui-fs-md); color: var(--kui-text-2); }
.rck-empty { font-size: var(--kui-fs-base); color: var(--kui-text-2); padding: 14px 4px; text-align: center; }
.rck-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; border: 0; border-radius: var(--kui-r); padding: 0 16px; min-height: 56px; font-size: var(--kui-fs-lg); font-weight: 500; cursor: pointer; }
.rck-btn svg { width: 19px; height: 19px; }
.rck-btn--ghost { background: var(--kui-panel-2); border: 1px solid var(--kui-line-2, var(--kui-line)); color: var(--kui-text); }
.rck-btn--go { background: var(--kui-accent, #2d6a4f); color: var(--kui-accent-ink, #fff); margin-top: 16px; }
.rck-btn--go[disabled] { opacity: .5; cursor: not-allowed; }
.rck-back { background: none; border: 0; color: var(--kui-text-2); font-size: 13px; font-weight: 600; padding: 0 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.rck-back svg { width: 15px; height: 15px; }
.rck-rev { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 12px; padding: 13px 15px; margin: 16px 0; font-size: var(--kui-fs-base); }
.rck-type { font-size: 11px; font-weight: 640; border-radius: var(--kui-r-pill); padding: 3px 10px; flex: none; }
.rck-type--visitor { background: color-mix(in srgb, var(--kui-people, #8a5a86) 14%, transparent); color: var(--kui-people, #8a5a86); }
.rck-type--contractor { background: color-mix(in srgb, var(--kui-warn) 14%, transparent); color: var(--kui-warn); }
.rck-ack { display: flex; align-items: flex-start; gap: 11px; font-size: var(--kui-fs-base); line-height: 1.5; color: var(--kui-text); background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: 12px; padding: 14px 15px; cursor: pointer; }
.rck-ack input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--kui-accent, #2d6a4f); }
.rck-tick, .rck-blocked { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; margin: 4px auto 16px; }
.rck-tick { background: color-mix(in srgb, var(--kui-good) 15%, transparent); color: var(--kui-good); }
.rck-blocked { background: color-mix(in srgb, var(--kui-alert) 13%, transparent); color: var(--kui-alert); }
.rck-card:has(.rck-tick), .rck-card:has(.rck-blocked) { text-align: center; }
.rck-form { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.rck-label { font-size: var(--kui-fs-base); font-weight: 600; color: var(--kui-text); margin-top: 6px; }
.rck-input { width: 100%; min-height: 56px; font-size: var(--kui-fs-xl); padding: 12px 14px; border: 1px solid var(--kui-line-strong); border-radius: var(--kui-r); background: var(--kui-panel); color: var(--kui-ink); }
.rck-input:focus-visible { outline: 2px solid var(--kui-accent); outline-offset: 2px; }
.rck-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rck-seg label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1px solid var(--kui-line-2, var(--kui-line)); border-radius: 12px; background: var(--kui-panel-2); font-weight: 600; cursor: pointer; }
.rck-seg label:has(input:checked) { border-color: var(--kui-accent); background: color-mix(in srgb, var(--kui-accent) 10%, var(--kui-panel)); }
.rck-seg input { accent-color: var(--kui-accent); }
.rck-btn:focus-visible, .rck-pick:focus-visible, .rck-back:focus-visible { outline: 2px solid var(--kui-accent); outline-offset: 2px; }
/* On a reload, v16 draws the last module menu before it knows the page, then hides it if the page has none (the app
   grid): the menu flashed up over the grid. It shows once Frappe has marked the page (body[data-sidebar], set on every
   page change); `visibility` keeps its space, so a page that has the menu doesn't shift when it appears. */
body:not([data-sidebar]) .body-sidebar-container { visibility: hidden; }
/* Frappe's loading page (the same for every user and page) shows the Desk's outline: the top bar with the logo where
   the real one lands, and the app grid's tiles shimmering. Same sizes as the Desk at 1440 px; the grid narrows with
   the screen. CSS only: the page has just the logo, so the bar and tiles are its ::before and ::after. Kapdaa keeps it
   (as .kap-splash) until the first page has drawn, so a slow first load shows the outline, not a blank page. */
:is(.splash, .kap-splash) { position: fixed; inset: 0; z-index: 1040;   /* over fixed bars (1030), under dialogs (1050) */ transform: none; -webkit-transform: none; background: var(--kui-bg, #f5f5f5); }
:is(.splash, .kap-splash) img { position: absolute; left: 20px; top: 10px; height: 32px; width: auto !important; z-index: 1; }
:is(.splash, .kap-splash)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 52px;
  border-bottom: 1px solid var(--kui-line, #e5e5e5); background-color: var(--kui-panel, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='32'%3E%3Crect width='300' height='32' rx='8' fill='%23808080' fill-opacity='.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='14' fill='%23808080' fill-opacity='.16'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center 10px, right 24px top 12px; }
:is(.splash, .kap-splash)::after { content: ""; position: absolute; top: 146px; left: 50%; transform: translateX(-50%);
  width: 858px; max-width: calc(100% - 32px); height: 426px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='143' height='142'%3E%3Crect x='44' width='54' height='54' rx='14'/%3E%3Crect x='41' y='66' width='60' height='10' rx='5'/%3E%3C/svg%3E") 0 0 / 143px 142px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='143' height='142'%3E%3Crect x='44' width='54' height='54' rx='14'/%3E%3Crect x='41' y='66' width='60' height='10' rx='5'/%3E%3C/svg%3E") 0 0 / 143px 142px;
  background: linear-gradient(90deg, var(--kui-line, #e5e5e5) 40%, var(--kui-panel, #fff) 50%, var(--kui-line, #e5e5e5) 60%);
  background-size: 300% 100%; animation: kapSplash 1.4s linear infinite; }
@media (max-width: 900px) { :is(.splash, .kap-splash)::after { width: 572px; } }
@media (max-width: 620px) {
  :is(.splash, .kap-splash)::before { background-size: 120px 32px, auto; background-position: left 167px top 10px, right 16px top 12px; }
  :is(.splash, .kap-splash)::after { width: 250px; top: 86px; height: 774px; -webkit-mask-size: 125px 129px; mask-size: 125px 129px; } }
@keyframes kapSplash { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { :is(.splash, .kap-splash)::after { animation-duration: 4s; } }
/* The door tablet runs without the Desk around it: a visitor can't reach the menus, search or other pages. */
body.kap-kiosk-mode .navbar, body.kap-kiosk-mode .body-sidebar-container, body.kap-kiosk-mode .body-sidebar,
body.kap-kiosk-mode .layout-side-section, body.kap-kiosk-mode .page-head, body.kap-kiosk-mode .sidebar-toggle-btn { display: none !important; }
body.kap-kiosk-mode .page-container, body.kap-kiosk-mode .layout-main-section { margin: 0 !important; }
.mq-work { width:100%; min-width:0; margin:0 auto; padding:24px; color:var(--kui-text); }
.mq-work .mq-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.mq-work .mq-context { display:flex; align-items:center; gap:8px; color:var(--kui-text-soft); font-size:13px; }
.mq-work .mq-heading-tools { display:flex; align-items:center; gap:12px; }
.mq-work #mq-date { color:var(--kui-text-soft); font-size:14px; }
.mq-work .mq-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--kui-line); }
.mq-work .mq-tabs { box-shadow:none; }   /* the toolbar draws the base line */
.mq-work .mq-search { flex: 0 1 340px; padding-bottom:8px; }
.mq-work input:not(.kap-search *) { width:190px; max-width:100%; min-height:44px; border:1px solid var(--kui-line); border-radius:6px; padding:8px 12px; background:var(--kui-panel); color:var(--kui-text); }
.mq-work .mq-footer button { flex:none; width:var(--kui-control-h); height:var(--kui-control-h); border:1px solid var(--kui-line); border-radius:var(--kui-r); background:var(--kui-panel); color:var(--kui-text); }
.mq-work button { cursor:pointer; }
.mq-work button:disabled { opacity:.4; cursor:default; }
.mq-work button:focus-visible, .mq-work input:focus-visible { outline:2px solid var(--kui-accent); outline-offset:3px; }
.mq-work .mq-list-head, .mq-work .mq-row { display:grid; grid-template-columns:minmax(180px,1fr) 125px 110px 240px; gap:16px; align-items:center; }
.mq-work .mq-list-head { padding:16px 0 12px; font-size:12px; color:var(--kui-text-soft); }
.mq-work .mq-row { border-bottom:1px solid var(--kui-line); padding:16px 0; }
.mq-work .mq-identity { display:flex; flex-direction:column; gap:5px; min-width:0; overflow-wrap:anywhere; }
.mq-work .mq-identity strong { font-size:var(--kui-fs-lg); }
.mq-work .mq-lot { font-size:14px; font-weight:600; }
.mq-work .mq-meta, .mq-work .mq-due { font-size:13px; color:var(--kui-text-soft); overflow-wrap:anywhere; }
.mq-work .mq-meta { display:flex; flex-wrap:wrap; gap:4px 12px; }
.mq-work .mq-status { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.mq-work .mq-status svg { flex:none; }
.mq-work .is-held { color:var(--kui-alert); }
.mq-work .is-overdue { color:var(--kui-alert); }
.mq-work .mq-actions { display:flex; flex-direction:row; gap:8px; align-items:center; justify-content:flex-end; margin:0; padding:0; border:0; }
.mq-work .mq-actions button { min-height:44px; white-space:normal; }
.mq-work .mq-footer { display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:13px; color:var(--kui-text-soft); }
.mq-work .mq-footer > div { display:flex; gap:8px; }
.mq-work #mq-message:not(:empty) { padding:12px 0; color:var(--kui-alert); font-size:14px; }
.mq-work .mq-mobile-label { display:none; }
@media (max-width:1100px) {
 .mq-work .mq-list-head { display:none; }
 .mq-work .mq-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
 .mq-work .mq-status { justify-self:end; }
 .mq-work .mq-identity { grid-column:1 / -1; }
 .mq-work .mq-actions { grid-column:1 / -1; flex-direction:row; }
 .mq-work .mq-actions button { flex:1; min-width:0; }
 .mq-work .mq-mobile-label { display:inline; margin-right:6px; }
 .mq-work .mq-toolbar { flex-wrap:wrap; }
}
@media (max-width:520px) {
 .mq-work { padding:16px 12px; }
 .mq-work .mq-heading { gap:8px; }
 .mq-work #mq-date { font-size:12px; }
 .mq-work .mq-actions button { min-height:48px; }
 .mq-work .mq-search { flex-basis:100%; }
 .mq-work input { flex:1; min-width:0; }
 .mq-work .mq-tabs { width:100%; }
}
/* Native Desk shell accessibility; keep business forms and user-avatar images unchanged. */
.navbar-breadcrumbs a[href="/desk"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
}
[data-theme="light"] .body-sidebar .keyboard-shortcut,
[data-theme="light"] .body-sidebar .avatar-name-email .text-secondary {
  color: var(--kui-shell-muted) !important;   /* the sidebar is ink (kui-shell.css): muted shell text, 6.8:1 */
}
[data-theme="light"] .body-sidebar .sidebar-user-button .avatar-frame.standard-image {
  color: #514100 !important;
  background-color: #fff4c2 !important;
}

.kap-label-station { margin: 0 auto; padding: 20px 16px; color: var(--text-color); }
.kap-label-station label:not(.kap-search) { display: block; margin-bottom: 8px; font-weight: 600; }
/* the shared search-and-scan field keeps its own look (.kap-search) */
.kap-label-station input:not(.kap-search *), .kap-label-station textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px;
  color: var(--text-color); background: var(--control-bg); border: 1px solid var(--border-color);
  border-radius: 4px; font-size: 16px;
}
.kap-label-station .kl-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
.kap-label-station .kui-btn { min-height: 48px; margin: 8px 4px 8px 0; white-space: normal; }
.kap-label-station .kl-input-row .kui-btn { margin: 0; padding: 8px; }
.kap-label-station h2 { font-size: var(--kui-fs-lg); line-height: 1.4; margin: 18px 0 12px; overflow-wrap: anywhere; }
.kap-label-station p { overflow-wrap: anywhere; }
.kap-label-station dl { display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 2fr); gap: 10px 16px; }
.kap-label-station dd { margin: 0; overflow-wrap: anywhere; }
.kap-label-station #kl-feedback:empty { display: none; }
.kap-label-station #kl-feedback { margin-top: 16px; }
.kap-label-station #kl-result, .kap-label-station #kl-recovery { border-top: 1px solid var(--border-color); }
.kap-label-station #kl-result:empty, .kap-label-station #kl-recovery:empty { display: none; }

/* Assigned execution uses one input at a time, without a planning sidebar. */
.mp-record .mp-record-back { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; }
.mp-record .kui-ph-right, .mp-record .kui-ph-filters { display: none; }
.mp-record .mpg-head, .mp-record .mpg-sum, .mp-record .ev .t, .mp-record .ev .meta { color: var(--kui-ink); }
.mp-record .ev.now .t::after { content: none; }
.mp-record .node .sb { color: var(--kui-ink); }
.mp-record .node .nid, .mp-record .node .kind, .mp-record .node .kg { color: var(--kui-ink); overflow-wrap: anywhere; white-space: normal; }
.mp-record .node > .nhead { background: var(--kui-panel); opacity: 1; }
.mp-record .idact { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; margin-top: 16px; }
.mp-record .idact button { margin: 0; }
.mp-record .mpg { background: transparent; border: 0; border-top: 1px solid var(--kui-line); border-radius: 0; }
.mp-record .mpg-head { padding: 12px 0; }
.mp-record .mpg-body { padding: 16px 0; }
.mp-record .idband { background: transparent; padding: 16px 0; }
.mp-record .idmain h1 { font-size: var(--kui-fs-xl); letter-spacing: 0; overflow-wrap: anywhere; }
/* the hero's identity line under the client: ID (mono, quiet) · stage badge · item */
.mp-idline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.mp-idline .mono { font-family: var(--kui-mono); font-size: var(--kui-fs-md); color: var(--kui-text-soft); overflow-wrap: anywhere; }
.mp-record-item { font-size: var(--kui-fs-md); color: var(--kui-text-soft); overflow-wrap: anywhere; }
.mp-current-facts, .mp-record-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.mp-current-facts dt, .mp-record-facts dt { font-weight: 400; font-size: 13px; color: var(--kui-text-soft); }
.mp-current-facts dd, .mp-record-facts dd { margin: 4px 0 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; color: var(--kui-ink); }
.mp-record .mpg-head, .mp-record .lens button { min-height: 48px; white-space: normal; }
.mp-record .mpg-head { flex-wrap: wrap; }
.mp-record .mpg-tt { min-width: 0; overflow-wrap: anywhere; }
.mp-record .mpg-sum { white-space: normal; overflow-wrap: anywhere; }
.mp-record .mpg .phs:empty { display: none; }
.mp-record .mp-preview, .mp-record .mp-record-label { border-top: 1px solid var(--kui-line); margin-top: 16px; }
.mp-record summary { padding: 12px 0; min-height: 48px; cursor: pointer; }
.mp-record .mp-preview .viewbar { background: transparent; }
.mp-record .carrier .mp-print, .mp-record .carrier .mp-print:hover { display: inline-flex; align-items: center; min-height: 48px; font-size: 14px; color: var(--kui-ink); }
@media (max-width: 767px) {
    .mp-current-facts, .mp-record-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The wall display is the Factory Overview itself, full screen: no Desk menus, and a 14 px text floor so it reads
   from across the floor. Escape or the exit button returns to the Desk. */
body.fo-wall .navbar, body.fo-wall .body-sidebar-container, body.fo-wall .body-sidebar, body.fo-wall .layout-side-section,
body.fo-wall .page-head, body.fo-wall .kap-help-btn { display: none !important; }
body.fo-wall .page-container, body.fo-wall .layout-main-section, body.fo-wall .container.page-body { margin: 0 !important; max-width: none !important; }
body.fo-wall .fox .fo-donut { width: 132px; height: 132px; }
/* the ring's centre is sized to the ring, not the page scale */
body.fo-wall .fox .fo-donut-c b { font-size: var(--kui-fs-2xl); } body.fo-wall .fox .fo-donut-c span { font-size: var(--kui-fs-sm); }
/* a wall is never scrolled: what needs someone must fit 1080 px, so the yard/gate counts (their own screens show
   them) step aside and the bands sit closer */
body.fo-wall .fox .sec-areas { display: none; }
body.fo-wall .fox { display: flex; flex-direction: column; gap: 10px; }
body.fo-wall .fox > * { margin-top: 0 !important; }
body.fo-wall .fox .sec-exc { order: 1; }          /* what needs someone right under the verdict */
body.fo-wall .fox .sec-kpis { order: 2; } body.fo-wall .fox .sec-lines { order: 3; }
body.fo-wall .fox .sec-flow { order: 4; } body.fo-wall .fox .fo-foot { order: 5; }
body.fo-wall .fox { --f0: 14px; --f1: 15px; --f2: 16px; --f3: 18px; --f4: 22px; --f5: 34px; --f6: 52px; padding: 20px 32px; }
.fo-wall-exit { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 16px; z-index: 1100; min-height: 44px; padding: 0 16px; border-radius: var(--kui-r-lg); border: 1px solid var(--kui-line-2); background: var(--kui-panel); color: var(--kui-ink); font-weight: 600; }
.fo-wall-exit:focus-visible { outline: 2px solid var(--kui-accent); outline-offset: 2px; }
.kap-putaway { margin: 0 auto; padding: 16px; color: var(--kui-ink); }
.kap-putaway .kp-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.kap-putaway .kp-status { margin: 12px 0; overflow-wrap: anywhere; }
.kap-putaway .kp-status:empty { display: none; }
.kap-putaway .kp-step { color: var(--kui-text-soft); font-size: 13px; margin: 12px 0; }
.kap-putaway h2 { font-size: var(--kui-fs-lg); line-height: 1.4; margin: 12px 0; overflow-wrap: anywhere; }
.kap-putaway .kp-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 0; }
.kap-putaway .kp-id:empty { display: none; }
.kap-putaway .kp-code { font-family: var(--kui-mono); font-size: var(--kui-fs-md); color: var(--kui-text-soft); overflow-wrap: anywhere; }
.kap-putaway dl { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 12px; margin: 12px 0 20px; }
.kap-putaway dd { margin: 0; overflow-wrap: anywhere; }
.kap-putaway dt { color: var(--kui-text-soft); font-weight: 400; }
.kap-putaway label:not(.kap-search) { display: block; margin-bottom: 8px; }   /* the shared search field is a <label> too */
.kap-putaway .kp-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
.kap-putaway input:not(.kap-search *) { width: 100%; min-width: 0; height: 48px; padding: 8px 12px; font-size: 16px;
    border: 1px solid var(--kui-line); border-radius: 6px; background: var(--kui-panel); color: var(--kui-ink); }
.kap-putaway .kui-btn { min-height: 48px; white-space: normal; justify-content: center; }
.kap-putaway a.kui-btn--primary, .kap-putaway a.kui-btn--primary:hover, .kap-putaway a.kui-btn--primary:focus { color: var(--kui-accent-ink); }
.kap-putaway .kp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kap-putaway .kp-details { margin-top: 16px; gap: 8px; }
.kp-detail-dialog .kp-detail-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; color: var(--kui-ink); }
.kp-detail-dialog .kp-detail-list dt, .kp-detail-dialog .kp-detail-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.kp-detail-dialog .modal-header button, .kp-detail-dialog .modal-footer button { min-height: 48px; min-width: 48px; }
.kap-putaway :focus-visible:not(.kap-search input) { outline: 2px solid var(--kui-accent); outline-offset: 3px; }   /* the search field rings itself */
.mq-history-dialog .modal-dialog { width: min(620px, calc(100% - 24px)); margin: 12px auto; }
.mq-history-dialog .modal-content { max-height: calc(100dvh - 24px); border-radius: 8px; }
.mq-history-dialog .modal-body { overflow-y: auto; min-height: 0; }
.mq-history-dialog .modal-header { flex-shrink: 0; }
.mq-history-dialog .modal-title, .mq-history-detail h2 { font-size: var(--kui-fs-lg); line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere; }
.mq-history-detail { color: var(--kui-ink); }
.mq-history-detail p { margin: 12px 0; }
.mq-history-detail dl { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px 12px; margin: 16px 0 0; }
.mq-history-detail dt { font-weight: 400; color: var(--kui-ink); }
.mq-history-detail dd { margin: 0; overflow-wrap: anywhere; }
.mq-history-detail details { margin-top: 16px; border-top: 1px solid var(--kui-line); }
.mq-history-detail summary { min-height: 48px; padding: 14px 0; cursor: pointer; }
.mq-history-detail summary:focus-visible { outline: 2px solid var(--kui-accent); outline-offset: 2px; }
.mq-history-dialog .btn { min-height: 48px; }
.mq-history-actions { border-top: 1px solid var(--kui-line); margin-top: 16px; padding-top: 16px; }
.mq-history-actions a.btn { display: inline-flex; align-items: center; white-space: normal; }
.mq-history-dialog .btn-modal-close { min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.plc-output-queue { border-bottom: 1px solid var(--line-2); padding-bottom: 16px; min-width: 0; }
.plc-output-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plc-output-queue h2 { font-size: 16px; line-height: 1.4; margin: 0; }
.plc-output-queue ul { list-style: none; padding: 0; margin: 8px 0; }
.plc-output-queue li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, auto) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.plc-output-queue li > div > span { display: block; color: var(--muted); font-size: 13px; }
.plc-output-queue li a, .plc-output-queue li span { overflow-wrap: anywhere; }
@media (pointer: coarse) { .plc-output-queue .kui-btn { min-height: 48px; min-width: 48px; } }
@media (max-width: 600px) { .plc-output-queue li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.plc-map-filters { display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin:12px 0 16px; }
.plc-map-filters > div { flex:1 1 180px; min-width:0; max-width:320px; }
.plc-map-filters label { display:block; font-size:13px; margin-bottom:6px; color:var(--kui-text-soft); }
.plc-map-filters select { width:100%; min-height:48px; padding:8px 12px; border:1px solid var(--kui-line); border-radius:6px; background:var(--kui-panel); color:var(--kui-text); }
.plc-map-filters select:focus-visible { outline:2px solid var(--kui-accent); outline-offset:2px; }
.plc-map-count { padding:12px 0; font-size:13px; color:var(--kui-text-soft); }
.plc-map-empty { padding:24px 0; color:var(--kui-text-soft); }
.mp-stock-filter { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:12px 0; color:var(--kui-text); font-size:13px; }
.mp-stock-filter label { margin:0; }
.mp-stock-filter select { max-width:100%; min-height:48px; padding:8px 12px; border:1px solid var(--kui-line); border-radius:6px; color:var(--kui-ink); background:var(--kui-panel); }
.mp-stock-filter select:focus-visible { outline:2px solid var(--kui-accent); outline-offset:2px; }
.plc-map-filters > .plc-layout-choice { display:flex; flex:0 0 auto; gap:4px; margin-left:auto; }
.plc-layout-choice button { display:grid; place-items:center; width:var(--kui-field-h); height:var(--kui-field-h); border:1px solid var(--kui-line); border-radius:6px; background:var(--kui-panel); color:var(--kui-text); }
.plc-layout-choice button[aria-pressed="true"] { background:color-mix(in srgb, var(--kui-ink) 9%, var(--kui-panel)); color:var(--kui-ink); border-color:var(--kui-line-strong); }   /* a view switch: the selected tint, as .kui-seg */
.plc-layout-choice button:focus-visible, .plc-location-list a:focus-visible { outline:2px solid var(--kui-accent); outline-offset:2px; }
.plc-location-list { width:100%; table-layout:fixed; border-collapse:collapse; color:var(--kui-ink); font-size:13px; }
.plc-location-list th, .plc-location-list td { padding:12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--kui-line); overflow-wrap:anywhere; }
.plc-location-list th { color:var(--kui-text); font-weight:600; }
.plc-location-list th:nth-child(1) { width:27%; }
.plc-location-list th:nth-child(2) { width:33%; }
.plc-location-list th:nth-child(3) { width:13%; }
.plc-location-list a { display:inline-block; padding:8px 0; color:var(--kui-accent); }
.plc-list-secondary { display:block; margin-top:4px; color:var(--kui-text); }
.plc-location-list .rt-warning { display:block; }
.plc-location-row.dim { opacity:.5; }
.plc-location-row.hl { background:var(--kui-panel-2); }
@container (max-width:640px) {
 .plc-location-list, .plc-location-list tbody { display:block; }
 .plc-location-list thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); }
 .plc-location-list tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:12px 0; border-bottom:1px solid var(--kui-line); }
 .plc-location-list td { display:block; border:0; padding:8px; min-width:0; }
 .plc-location-list td:nth-child(1), .plc-location-list td:nth-child(2) { grid-column:1 / -1; }
 .plc-location-list td::before { content:attr(data-label); display:block; margin-bottom:4px; font-size:12px; color:var(--kui-text); }
}
.plc .rt-warning { margin-top:6px; font-size:12px; color:var(--kui-alert); white-space:normal; overflow-wrap:anywhere; }
.plc-storage-attention { border-left: 3px solid var(--kui-warn); padding: 4px 12px; }
.plc-storage-attention h2 { font-size: 16px; line-height: 1.4; margin: 0 0 12px; }
.plc-storage-attention h2 span { font-size: 13px; font-weight: 400; margin-left: 8px; }
.plc-storage-attention ul { list-style: none; padding: 0; margin: 0; }
.plc-storage-attention li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--kui-line); overflow-wrap: anywhere; }
.plc-storage-attention strong { font-size: 13px; font-weight: 500; }
@media (max-width: 600px) { .plc-storage-attention li { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .kap-putaway { padding: 8px 12px; } }

.mq-modes[hidden], .mq-work[hidden], .mq-runs[hidden] { display: none !important; }
.mq-modes, .mq-run-tools, .mq-run-pages { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mq-modes { padding: 12px 16px; border-bottom: 1px solid var(--kui-line); }
/* the view switches are the kit's segmented control (.kui-seg); the rest are fields and icon buttons */
.mq-runs button:not(.kui-seg__b), .mq-runs select {
 min-height: 48px; min-width: 48px; padding: 10px 14px; border: 1px solid var(--kui-line);
 border-radius: var(--kui-r); background: var(--kui-panel); color: var(--kui-ink); font-size: 14px;
}
.mq-runs { padding: 16px; color: var(--kui-ink); margin: 0 auto; }
.mq-runs h2 { font-size: var(--kui-fs-lg); line-height: 1.4; margin: 0 0 16px; }
.mq-runs label { display: block; margin-bottom: 6px; }
.mq-runs select { width: 100%; max-width: 100%; margin-bottom: 12px; }
.mq-run-refresh { margin-left: auto; }
.mq-run-content { margin: 16px 0; min-height: 80px; }
.mq-run-row { border-bottom: 1px solid var(--kui-line); padding: 8px 0; overflow-wrap: anywhere; }
.mq-run-row summary { cursor: pointer; min-height: 48px; padding: 12px 4px; }
.mq-run-row summary span { display: block; margin: 6px 0 0 20px; font-size: 13px; }
.mq-run-row dl { display: grid; grid-template-columns: minmax(90px,1fr) minmax(0,3fr); gap: 8px 16px; padding: 12px; }
.mq-run-row dt, .mq-run-row dd { margin: 0; font-size: 13px; }
.mq-modes button:focus-visible, .mq-runs button:focus-visible, .mq-runs select:focus-visible, .mq-runs summary:focus-visible {
 outline: 2px solid var(--kui-accent); outline-offset: 2px;
}
.mq-run-pages { justify-content: flex-end; }
.pc-exceptions { padding: 16px 0; margin-bottom: 16px; border-bottom: 1px solid var(--kui-line); color: var(--kui-ink); }
.pc-exceptions h2 { margin: 0 auto 0 0; }
.pc-exceptions button { min-height: 48px; min-width: 48px; }
.pc-exception-row { padding: 8px 0; border-bottom: 1px solid var(--kui-line); overflow-wrap: anywhere; }
.pc-exception-row summary { min-height: 48px; padding: 12px 4px; cursor: pointer; }
.pc-exception-row summary span { display: block; margin: 6px 0 0 20px; }
.pc-exception-row p { margin: 8px 0; }
.pc-exception-row dl { display: grid; grid-template-columns: minmax(80px,1fr) minmax(0,3fr); gap: 8px 16px; padding: 12px; }
.pc-exception-row dt, .pc-exception-row dd { margin: 0; font-size: 13px; }
.pc-exception-row summary:focus-visible { outline: 2px solid var(--kui-accent); outline-offset: 2px; }
.pc-review-dialog .modal-body { overflow-wrap: anywhere; }
.pc-review-dialog .modal-content { background: var(--kui-panel); color: var(--kui-ink); border-radius: 8px; }
.pc-review-dialog .control-label, .pc-review-dialog .section-head { color: var(--kui-ink); }
.pc-review-dialog textarea { min-height: 96px; height: 112px; }
.pc-review-dialog button { min-height: 48px; min-width: 48px; }
.pc-review-entry { padding: 12px 0; border-bottom: 1px solid var(--kui-line); }
.pc-review-entry p { margin: 6px 0; font-size: 13px; }
.pc-review-note { white-space: pre-wrap; }
.pc-reprocessing-open { margin: 4px 0 4px 8px; }
.pc-reprocessing-state { font-size: var(--kui-fs-xl); margin: 12px 0; }
.pc-reprocessing-context { font-size: 13px; color: var(--kui-muted); }
.pc-reprocessing-navigation { display: flex; gap: 8px; margin: 12px 0; }
.pc-reprocessing-history { border-top: 1px solid var(--kui-line); margin-top: 16px; }
.pc-reprocessing-history summary { min-height: 48px; padding: 14px 0; cursor: pointer; }
.pc-reprocessing-dialog .form-control { min-height: 48px; }

.gate-draft-comparison { overflow-wrap: anywhere; }
.gate-draft-difference { border-top: 1px solid var(--kui-line); padding: 12px 0; }
.gate-draft-difference dl { margin: 8px 0; }
.gate-draft-difference dd { margin: 0 0 8px; white-space: pre-wrap; }
.gate-draft-difference label { display: block; }
.gate-draft-difference select { width: 100%; min-height: 44px; }

/* Places: putaway-queue page links */
.plc-work-links { display: flex; flex-wrap: wrap; gap: 8px; }
@media (pointer: coarse) { .plc-work-links .kui-btn, .plc-layout-choice button { min-height: 48px; min-width: 48px; } }

/* Bale Labels: the station's two lists under the scan field */
.kap-label-station .kl-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.kap-label-station .kl-lists section { border: 1px solid var(--kui-line); border-radius: 12px; background: var(--kui-panel); padding: 12px 16px; }
.kap-label-station .kl-lists h2 { font-size: 14px; font-weight: 650; margin: 0 0 8px; }
.kap-label-station .kl-lists h2 span { color: var(--kui-text-soft); font-weight: 500; margin-left: 6px; }
.kap-label-station .kl-lists ul { list-style: none; margin: 0; padding: 0; }
.kap-label-station .kl-lists li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--kui-line); }
.kap-label-station .kl-lists li span { display: block; font-size: 12px; color: var(--kui-text-soft); }
.kap-label-station .kl-lists code { font-family: var(--kui-mono); font-size: 12px; background: none; padding: 0; color: inherit; }
.kap-label-station .kl-lists .kui-btn { margin: 0; min-height: 40px; }
.kap-label-station .kl-lists p { margin: 0; color: var(--kui-text-soft); font-size: 13px; }

/* A line screen opened by someone who watches it (D-61): the run's controls go, a note says why */
.lk.lk-view .stickybar, .lk.lk-view .qacts, .lk.lk-view [data-add], .lk.lk-view .scan, .lk.lk-view .compose button { display: none !important; }
.lk.lk-view::before { content: "View only: the floor team runs this line."; display: block; margin: 0 0 12px; padding: 8px 12px;
  border-radius: 8px; background: var(--kui-panel-2); color: var(--kui-text-soft); font-size: 13px; }
/* kapdaa.liveBadge: whether a board's figures are live. A dot and words, never colour alone; never animated. */
.kap-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kui-fs-sm, 12px); color: var(--kui-text-soft); white-space: nowrap; }
.kap-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kui-line-strong); }
.kap-live--on::before { background: var(--kui-good); }
.kap-live--down::before { background: var(--kui-warn); }

/* ---- Floor register on touch screens (floor and handheld audit 2026-10-19): line kiosks, the gate and the floor
   boards take a thumb or a glove on a landscape tablet as much as on a phone, so on any coarse pointer their
   controls are 48 px. */
@media (pointer: coarse) {
  .lk .qb, .lk .bpbin, .lk .linepick, .lk .sb, .lk .lr-void, .lk .lr-takeoff, .lk .lr-bale,
  .gate-btn, .gate-btn-primary, .gate-chip, #gate-dir button, .gate-wrap .kui-seg__b,
  .plc .kui-seg__b, .mq-work .kui-btn, .kap-label-station .kui-btn { min-height: 48px; }
  .lk .linepick, .lk .bpbin, #gate-dir button { display: inline-flex; align-items: center; }
  .kap-search input, .lk input, .lk select, .gate-wrap input, .gate-wrap select { min-height: 48px; font-size: 16px; }
}
/* A recent-crossing row on a phone is a small card: who and what on one line, the plate and Check out on the next,
   never broken mid-word. */

/* ============================================================
   ONE LOOK ON KAPDAA'S OWN PAGES (owner 2026-10-19: "elements are inconsistent")
   ============================================================ */
/* Two heading levels: a section title (Bricolage 16/600 ink, as the overview bands) and a panel caption
   (Inter 13/600 soft). Pages keep their own class names; the look is defined once, here. */
.kap-h-section, .kh-h, .pc-runs-head h2, .pc-exceptions h2, .pc-queue-heading, .fox .seclbl, .mpx .pht, .mpx .mpg-tt .pht {
    font: 600 var(--kui-fs-lg)/1.3 var(--kui-display); color: var(--kui-ink); letter-spacing: 0; text-transform: none; }
.kap-h-caption,
.kx .rh,
.mpx .mpf-rail-h,
.mpx .mpf-grouplbl {
    font: 600 var(--kui-fs-md)/1.35 var(--font-stack); color: var(--kui-text-soft); letter-spacing: 0; text-transform: none; }

/* One button skin: secondary = white panel, 1px strong line, radius 8, 32 px on the desk and 44 px on touch,
   13/500; primary = ink. The same values as the kit's .kui-btn (kui.css); these are the pages' own class names. */
.kap-empty-btn,
.kx .act,
.kx .doc .dl,
.mpx .pc-acts button,
.mpx .pc-open,
.mpx .pc-print,
.fox .verdict .vact {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--kui-s2);
    min-height: var(--kui-control-h); padding: 0 var(--kui-s3); border: 1px solid var(--kui-line-strong);
    border-radius: var(--kui-r); background: var(--kui-panel); color: var(--kui-ink);
    font: 500 var(--kui-fs-md)/1.2 var(--font-stack); white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: background-color var(--kui-t-fast) var(--kui-ease), border-color var(--kui-t-fast) var(--kui-ease); }
.kap-empty-btn:hover,
.kx .act:hover,
.kx .doc .dl:hover,
.mpx .pc-acts button:hover,
.mpx .pc-open:hover,
.mpx .pc-print:hover { background: var(--kui-panel-2); border-color: var(--kui-text-soft); color: var(--kui-ink); }
.kx .act:not(.ghost), .fox .verdict .vact {
    background: var(--kui-accent); border-color: var(--kui-accent); color: var(--kui-accent-ink); }
.kx .act:not(.ghost):hover, .fox .verdict .vact:hover {
    background: var(--kui-accent-hover); border-color: var(--kui-accent-hover); color: var(--kui-accent-ink); }
@media (pointer: coarse), (max-width: 640px) {
    .kap-empty-btn,
.kx .act,
.kx .doc .dl,
.mpx .pc-acts button,
.mpx .pc-open,
.mpx .pc-print,
.fox .verdict .vact,
.kap-btn-primary,
.kap-btn-secondary { min-height: 44px; }   /* incl. the client pages' Pay now / Print (kapdaa.css loads there) */
}

/* The one empty state inside a panel or a queue column: the same component, less air. */
.pc-list .kap-empty, .pc-run-content .kap-empty, .pc-exception-content .kap-empty { padding: var(--kui-s4) var(--kui-s3); }
.pc-list .kap-empty-orb, .pc-run-content .kap-empty-orb, .pc-exception-content .kap-empty-orb { width: 44px; height: 44px; margin-bottom: var(--kui-s2); }
.pc-list .kap-empty-h, .pc-run-content .kap-empty-h, .pc-exception-content .kap-empty-h { font-size: var(--kui-fs-base); font-weight: 600; }
/* the review-ownership switch is the kit's segmented control: desk size on a desk, 48 px on touch */
.pc-exceptions .kui-seg__b { min-height: 0; min-width: 0; }
@media (pointer: coarse) { .pc-exceptions .kui-seg__b { min-height: 48px; } }
/* Touch screens: every target on our pages is at least 44 px, kiosk and gate targets 48 px */
@media (pointer: coarse) {
    .kui-filter__s, .cp-nav, .cp-today, .cp-month { min-height: 44px; }
    .lk .btn, .lk .bin { min-height: 48px; }
}

/* ---- One button system, floor size (final polish 2026-10-19) ----------------------------------------------------
   Desk: 32 px, radius 8, 13/500 (.kui-btn, .btn and the list above); touch 44 px. The floor (line kiosks, the gate,
   reception kiosk, put-away) is one size larger on every screen: 48 px, radius 8, 16/500; the line's main action
   56 px (DESIGN.md: line tablet). One weight. Colour stays with each variant; only geometry and type are set here. */
.lk .qitem .qb, .lk .bpbin, .lk .linepick, .lk .scan .sb, .lk .lr-void, .lk .lr-bale, .lk .btn, .lk .holdbtn,
.gate-btn, .holds-acts .gate-btn {
    min-height: 48px; padding-top: 0; padding-bottom: 0; padding-inline: 16px; border-radius: var(--kui-r);
    font-size: var(--kui-fs-lg); font-weight: 500; line-height: 1.2; }
    
.lk .btn.prime, .lk .stickybar .prime { min-height: 56px; font-weight: 500; border-radius: var(--kui-r); }
.lk .lr-takeoff { min-height: 48px; font-weight: 500; }
.gate-btn-danger { font-weight: 500; }

/* ---- One field shape: the native .form-control's (hairline --kui-line, radius 8, 36 px; 48 px and 16 px text on
   touch, where phones would otherwise zoom). Our own selects take the same custom chevron as .kap-select. */
.plc-map-filters select, .mp-stock-filter select, .mq-runs select, .kap-select {
    appearance: none; -webkit-appearance: none; min-height: var(--kui-field-h); height: auto; padding: 0 34px 0 12px;
    border: 1px solid var(--kui-line); border-radius: var(--kui-r); background-color: var(--kui-panel); color: var(--kui-ink);
    font-size: var(--kui-fs-base);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 13px; }
.plc-map-filters select:hover, .mp-stock-filter select:hover, .mq-runs select:hover, .kap-select:hover { border-color: var(--kui-line-strong); }
.kap-putaway input:not(.kap-search *), .kap-label-station input:not(.kap-search *) { border-color: var(--kui-line); border-radius: var(--kui-r); }
.plc-layout-choice button { border-radius: var(--kui-r); }
@media (pointer: coarse) {
    .plc-map-filters select, .mp-stock-filter select, .mq-runs select, .kap-select { min-height: 48px; font-size: 16px; }
}

/* ---- Section headings: one level, 16/600 (Bricolage) — Places, Bale Labels, put-away, run history */
.plc .seclbl, .plc-output-queue h2, .plc-storage-attention h2, .kap-label-station .kl-lists h2, .mq-runs h2 {
    font: 600 var(--kui-fs-lg)/1.3 var(--kui-display); color: var(--kui-ink); letter-spacing: 0; }
/* page titles: one size (20/700) on every page of ours, the kiosks and Places included */
.lk .cbar h1, .plc .cbar h1, .mp-record .idmain h1 { font-size: var(--kui-fs-xl); font-weight: 700; }

/* ---- The one pill (status, counts, tags): 12/600, radius 999, the shape of the stage badge (.kap-stage) */
.kui-badge, .gate-pill, .pc-pill, .fox .lcard .drumt, .fox .snode .drumtag {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--kui-r-pill);
    font-size: var(--kui-fs-sm); font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap; }

/* ---- Factory Overview on the wall: the exit sits above the board, never on the verdict card */
body.fo-wall .fox { padding-top: calc(env(safe-area-inset-top, 0px) + 68px); }

/* ---- Line kiosks on a phone: the basis band keeps what the line sorts on, never the explainer (.bx) */
@container (max-width: 600px) { .lk .basisband .bx { display: none; } }
.lk .qnote { margin: 0; padding: 10px 15px; border-bottom: 1px solid var(--line); font-size: var(--f1); color: var(--muted); }
.lk .qnote b { color: var(--ink); font-weight: 600; }
/* codes never break mid-code (a lot ID in three lines reads as three things) */
.kx .facts .v.mono,
.kx .idband h1 .q { white-space: nowrap; }
/* by-product / additive bins: the name reads left, its weight right and whole; on a phone each takes the row */
.lk .bpbin { justify-content: flex-start; text-align: left; }
.lk .bpbin .bn { margin-left: auto; padding-left: 8px; white-space: nowrap; }
@container (max-width: 600px) {
    .lk .bpbin { flex: 1 1 100%; }
    .lk .reciperow { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; }
}
/* My Work's page buttons: desk size on a desk, a glove's 48 px on touch */
@media (pointer: coarse) {
    .mq-work .mq-footer button { width: 48px; height: 48px; }
}
/* the shared search field draws one focus ring on its box (:focus-within), never a second one on the input */
.kap-search input:focus-visible { outline: none; }

/* Gatehouse (D-66 Station): every control is a 44 px touch target. */
.kap-gate-page .kui-btn, .kap-gate-page .kui-seg__b, .kap-gate-page .gate-chip { min-height: 44px; }

/* A phone on the Gatehouse or the Tipping Bays has ONE scan field (the page header's): the navbar's own search icon gives
   way there, so nobody wonders which of two searches to use. Core untouched: Frappe marks the body with the route. */
@media (max-width: 640px) {
	body:is([data-route="gatehouse"], [data-route^="gatehouse/"], [data-route="bays"], [data-route^="bays/"]) .navbar-modal-search-mobile { display: none; }
}

/* D-83 wave B: the Line Day Plan and Line Run lists keep their record's ID whole (docs/23), as the Move Task list keeps
   its bale: the ID column keeps a whole ID, the rest share what is left, and a narrower list drops whole columns rather
   than cut them (the site, then the day plan, then the operator) */
@media (min-width: 768px) {
	.kap-idlist .list-row-col { flex: 1 1 0 !important; width: auto !important; min-width: 88px !important; }
	.kap-idlist .list-row-col.list-subject { flex: 0 0 200px !important; width: 200px !important; max-width: none; }
	.kap-idlist .list-row-col.list-subject .ellipsis { overflow: visible; text-overflow: clip; }
	.kap-idlist .list-row-col.list-subject a { white-space: nowrap; font-variant-numeric: tabular-nums; }
	.kap-idlist .list-row-col.tag-col { display: none !important; }
	.kap-idlist .list-row-head .list-row-col span { overflow: visible; text-overflow: clip; white-space: nowrap; }
}
@media (min-width: 768px) and (max-width: 1439px) { .kap-idlist :is(.list-row-activity, .level-right) { display: none !important; } }
@media (min-width: 768px) and (max-width: 1279px) { .kap-idlist--ldp .list-row-col.factory_site, .kap-idlist--lr .list-row-col.day_plan { display: none !important; } }
@media (min-width: 768px) and (max-width: 1099px) { .kap-idlist--lr .list-row-col.operator { display: none !important; } }
/* the Line Day Plan list's primary (Production Control) is its icon on a tablet, so the header never runs off the window;
   its words come back on a desk (the button keeps its name for a screen reader through data-label and the title) */
@media (min-width: 768px) and (max-width: 1099px) { .kap-idlist--ldp .page-head .primary-action .hidden-xs { display: none; } }
/* r4: a phone keeps the Line Day Plan's date beside its ID (the rest of the columns fold, as Frappe folds them), and the
   list's primary is a whole 44 px target */
@media (max-width: 767px) {
	.kap-idlist--ldp .list-row-col.plan_date { display: flex !important; }
	.kap-idlist--ldp .page-head .primary-action { min-width: 44px; min-height: 44px; }
}

/* a user's name is text where the person cannot open the User record (kapdaa_desk.js) */
.kap-no-user-links :is(a[data-doctype="User"], a[href^="/desk/user/"], a[href^="/app/user/"]) { pointer-events: none; color: inherit; text-decoration: none; cursor: text; }
.kap-fo-page .kui-ph-bar > .fo-live { align-self: center; }