/* Caledonia Plastics — business intelligence dashboard theme
   McKinsey-style layout in Caledonia's burgundy brand palette. */

:root {
  --burgundy: #5F0035;
  --burgundy-bright: #88004E;
  --burgundy-tint: #D5BDC5;
  --burgundy-wash: #F5EEF1;

  --ink: #1B1B1B;
  --ink-soft: #5E5E5E;
  --ink-faint: #A4A4A4;

  --bg: #F4F2F3;
  --card: #FFFFFF;
  --line: #E6E2E4;
  --line-strong: #D8D3D5;

  --pos: #2E7D5B;
  --neg: #9E2B2B;
  --warn: #B5762B;   /* aged / caution accent */

  /* Chart status MARKS (fills only — text keeps --pos/--warn/--neg). The status tokens snapped,
     hue held, to pass the dataviz checks as adjacent fills: chroma >= 0.10, colorblind separation
     dE >= 8 across all pairs, normal-vision dE >= 15, >= 3:1 on white (validate_palette.js). */
  --chart-ok: #2c825e;       /* on track     — 4.71:1 */
  --chart-late: #bf7612;     /* pushed later — 3.61:1 */
  --chart-pastdue: #9E2B2B;  /* past due     — 7.41:1 */

  --font-display: "Fjalla One", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Sans Pro", Arial, Helvetica, sans-serif;

  --maxw: 1180px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(27, 27, 27, 0.05), 0 1px 12px rgba(27, 27, 27, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--burgundy); text-decoration: none; }
a:hover { color: var(--burgundy-bright); }

/* Top accent + header ------------------------------------------------ */
.accent-bar { height: 3px; background: var(--burgundy); }

/* The header is rendered by static/nav.js into <header id="topbar">; min-height reserves its
   space so the page can't shift while it builds. */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  min-height: 68px;
}
.topbar-inner {
  position: relative; /* anchors the full-width menus in the mobile view */
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#topbar [hidden] { display: none !important; } /* nav rules set display; gating relies on [hidden] */
.brand { display: flex; flex-direction: column; gap: 4px; line-height: 1.05; flex: none; }
.brand:hover { color: inherit; }
.brand .mark {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--burgundy);
  text-transform: uppercase;
  white-space: nowrap;
}
.brand .sub {
  font-size: 10.5px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.viewtoggle {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: var(--radius); overflow: hidden;
}
.viewtoggle button {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; border: 0; background: var(--card);
  color: var(--ink-soft); padding: 6px 12px; cursor: pointer;
}
.viewtoggle button + button { border-left: 1px solid var(--line-strong); }
.viewtoggle button[aria-pressed="true"] { background: var(--burgundy); color: #fff; }

/* Grouped navigation: Summary · Sales ▾ · Operations ▾ (structure lives in static/nav.js) */
.mainnav { display: flex; align-items: center; gap: 4px; margin-left: 28px; margin-right: auto; }
.nav-link, .nav-group-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-soft); background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 12px; cursor: pointer; white-space: nowrap;
}
.nav-link:hover, .nav-group-btn:hover, .nav-group-btn[aria-expanded="true"] { color: var(--burgundy); }
.nav-link.is-active, .nav-group-btn.is-active { color: var(--burgundy); border-bottom-color: var(--burgundy); font-weight: 600; }
.nav-caret { font-size: 9px; line-height: 1; transition: transform 0.15s ease; }
[aria-expanded="true"] > .nav-caret { transform: rotate(180deg); }

.nav-group, .user-menu { position: relative; }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 210px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(27, 27, 27, 0.12); padding: 6px 0;
}
.nav-menu a {
  display: block; padding: 9px 16px; font-size: 14px; color: var(--ink);
  border-left: 3px solid transparent; white-space: nowrap;
}
.nav-menu a:hover { background: var(--burgundy-wash); color: var(--burgundy); }
.nav-menu a[aria-current="page"] { color: var(--burgundy); font-weight: 600; border-left-color: var(--burgundy); background: var(--burgundy-wash); }

.user-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 12px;
  max-width: 220px;
}
.user-btn .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-btn:hover, .user-btn[aria-expanded="true"], .user-btn.is-active { border-color: var(--burgundy); color: var(--burgundy); }
.user-menu .nav-menu { left: auto; right: 0; min-width: 240px; }
.menu-head {
  padding: 6px 16px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
  font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-head b { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.menu-label { padding: 6px 16px 6px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
.menu-row { padding: 0 16px 10px; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 0 6px; }
/* Keyboard focus in the header, in brand colour (mouse clicks don't trigger :focus-visible). */
#topbar a:focus-visible, #topbar button:focus-visible { outline: 2px solid var(--burgundy-bright); outline-offset: 2px; border-radius: 2px; }

/* Page shell --------------------------------------------------------- */
.page { max-width: var(--maxw); margin: 0 auto; padding: 32px 24px 64px; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 26px; flex-wrap: wrap;
}
.page-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.01em;
}
.page-title .rule { display: block; width: 46px; height: 3px; background: var(--burgundy); margin-top: 12px; }
.page-sub { color: var(--ink-soft); font-size: 13px; margin-top: 10px; }

.period {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: var(--radius); overflow: hidden;
}
.period button {
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 0; background: var(--card); color: var(--ink-soft);
  padding: 8px 14px; cursor: pointer;
}
.period button + button { border-left: 1px solid var(--line-strong); }
.period button[aria-pressed="true"] { background: var(--burgundy); color: #fff; }

/* Filter bar (presets + custom date range) --------------------------- */
.filters { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.daterange { display: flex; align-items: flex-end; gap: 8px; }
.dr-field { display: flex; flex-direction: column; gap: 3px; }
.dr-field span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint);
}
.dr-field input {
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--card);
}
.dr-field input:focus { outline: none; border-color: var(--burgundy); }
.dr-apply {
  font-family: var(--font-body); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--burgundy); background: var(--burgundy); color: #fff;
  padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
}
.dr-apply:hover { background: var(--burgundy-bright); border-color: var(--burgundy-bright); }

/* KPI tiles ---------------------------------------------------------- */
.kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
.kpi {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
.kpi .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-faint); margin-bottom: 10px;
}
.kpi .value { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ink); }
.kpi .foot { font-size: 12px; color: var(--ink-soft); margin-top: 8px; }
.kpi.accent { border-top: 3px solid var(--burgundy); }
.kpi.warn { border-top: 3px solid var(--warn); }

/* Cards / charts ----------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 22px; margin-bottom: 16px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.card-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); font-weight: 600;
}
.card-note { font-size: 12px; color: var(--ink-faint); }

/* SVG chart bits ----------------------------------------------------- */
.chart { width: 100%; display: block; }
.axis-line { stroke: var(--line-strong); stroke-width: 1; }
.grid-line { stroke: var(--line); stroke-width: 1; }
.tick-text { fill: var(--ink-faint); font-size: 11px; font-family: var(--font-body); }
.area-fill { fill: var(--burgundy); opacity: 0.08; }
.line-path { fill: none; stroke: var(--burgundy); stroke-width: 2; }
.dot { fill: var(--card); stroke: var(--burgundy); stroke-width: 2; }
.dot-last { fill: var(--burgundy); }

/* Ranked bar list ---------------------------------------------------- */
.rank { list-style: none; margin: 6px 0 0; padding: 0; }
.rank li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.rank li:last-child { border-bottom: 0; }
.rank .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.rank .name { color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.rank .amt { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; white-space: nowrap; }
.rank .bar-track { height: 6px; background: var(--burgundy-wash); border-radius: 3px; overflow: hidden; }
.rank .bar-fill { height: 100%; background: var(--burgundy); border-radius: 3px; }
.rank .bar-fill.aged { background: var(--warn); }
.rank .meta { font-size: 12px; color: var(--ink-faint); }
.rank .meta b { color: var(--ink-soft); font-weight: 600; }
/* Compact Part#/Revenue-style sort toggle atop a ranked list */
.rank-sort { display: flex; width: max-content; margin: 0 0 8px auto; }
.rank-sort button { font-size: 10px; padding: 3px 9px; letter-spacing: 0.04em; }

/* Sales-by-item drill-down (customer + order number behind each item) */
.sbi-drill { cursor: pointer; }
.sbi-drill:hover .name { color: var(--burgundy); }
.sbi-caret { color: var(--burgundy); font-size: 10px; margin-right: 6px; flex: none; align-self: center; }
.sbi-detail { margin-top: 8px; }
.sbi-dtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.sbi-dtable th { text-align: left; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; padding: 3px 10px 5px 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.sbi-dtable td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.sbi-dtable td:first-child { color: var(--ink); }
.sbi-dtable .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; padding-left: 12px; } /* left gap: numeric columns sit side by side */
.sbi-dtable tr:last-child td { border-bottom: 0; }

/* Stocking-plan demand-forecast drill-down chart */
.fc-tr { cursor: pointer; }
.fc-tr:hover td.cust { color: var(--burgundy); }
.fc-caret { color: var(--burgundy); font-size: 10px; margin-right: 5px; }
.ctable .fc-row td { background: var(--burgundy-wash); padding: 8px 10px 12px; white-space: normal; }
.fc-box { max-width: 820px; }
.fc-title { font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.fc-scroll { overflow-x: auto; }
.fc-svg { width: 100%; min-width: 520px; height: auto; display: block; }
.fc-grid { stroke: var(--line); stroke-width: 1; }
.fc-tick, .fc-xtick { fill: var(--ink-faint); font-size: 9px; }
.fc-bh { fill: var(--burgundy); }
.fc-bf { fill: var(--burgundy); opacity: 0.35; }
.fc-div { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.fc-avg { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 3; }
.fc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--ink-soft); margin-top: 8px; align-items: center; }
.fc-legend .fc-sw { width: 14px; height: 10px; display: inline-block; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.fc-sw-h { background: var(--burgundy); }
.fc-sw-f { background: var(--burgundy); opacity: 0.35; }
.fc-explain { margin-top: 10px; border-top: 1px solid var(--line-strong); padding-top: 9px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.fc-explain b { color: var(--ink); }

/* Lenis smooth-scroll (inertia) — recommended base styles */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* States / footer ---------------------------------------------------- */
.muted { color: var(--ink-faint); }
.loading, .empty { color: var(--ink-faint); font-size: 13px; padding: 12px 0; }
.pagefoot { margin-top: 30px; font-size: 12px; color: var(--ink-faint); text-align: center; }
.pagefoot .dot-sep { margin: 0 8px; }

/* ── Layout views ──────────────────────────────────────────────────
   Layout is driven by a .view-mobile / .view-desktop class on <html>,
   set from device detection (or the user's saved toggle choice) before
   first paint. The base rules above ARE the desktop view, so .view-desktop
   needs no overrides — even on a narrow phone it yields the full desktop
   layout (a deliberate "desktop site" mode). .view-mobile restacks into a
   single touch-friendly column, and works at any width so a desktop user
   can preview it. */
.view-mobile .topbar-inner { max-width: 560px; flex-wrap: wrap; padding: 14px; row-gap: 12px; }
.view-mobile .page { max-width: 560px; padding: 22px 14px 48px; }
.view-mobile .page-head { flex-direction: column; align-items: stretch; gap: 16px; }
.view-mobile .mainnav { order: 3; width: 100%; margin: 0; justify-content: space-between; }
.view-mobile .brand .mark { font-size: 20px; }
.view-mobile .nav-link, .view-mobile .nav-group-btn { padding: 10px 8px; }
/* Menus open as full-width panels under the header (anchored to .topbar-inner). */
.view-mobile .nav-group, .view-mobile .user-menu { position: static; }
.view-mobile .nav-menu { top: 100%; left: 14px; right: 14px; min-width: 0; margin-top: -6px; }
.view-mobile .nav-menu a { padding: 12px 16px; font-size: 15px; }
.view-mobile .page-title { font-size: 25px; }
.view-mobile .filters { align-items: stretch; width: 100%; }
.view-mobile #presets { display: flex; }
.view-mobile #presets button { flex: 1; padding: 10px 6px; }
.view-mobile .daterange { flex-wrap: wrap; }
.view-mobile .dr-field { flex: 1 1 40%; }
.view-mobile .dr-field input { width: 100%; }
.view-mobile .dr-apply { flex: 1 1 100%; padding: 11px; }
.view-mobile .kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.view-mobile .kpi { padding: 14px 16px; }
.view-mobile .kpi .value { font-size: 24px; }
.view-mobile .grid-2 { grid-template-columns: 1fr; }
.view-mobile .grid-3 { grid-template-columns: 1fr; }
.view-mobile .card { padding: 16px; }
.view-mobile .chart-mobile .tick-text { font-size: 13px; }

/* Login page --------------------------------------------------------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: var(--shadow); width: 100%; max-width: 400px; overflow: hidden;
}
.login-top { height: 4px; background: var(--burgundy); }
.login-body { padding: 40px 36px 36px; text-align: center; }
.login-body .mark {
  font-family: var(--font-display); font-size: 26px; color: var(--burgundy);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.login-body .sub { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; margin-top: 4px; }
.login-body h1 { font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 28px 0 6px; }
.login-body p { color: var(--ink-soft); font-size: 14px; margin: 0 0 26px; }
.btn-ms {
  display: inline-flex; align-items: center; gap: 10px; justify-content: center;
  width: 100%; padding: 12px 16px; border-radius: var(--radius);
  background: var(--burgundy); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
}
.btn-ms:hover { background: var(--burgundy-bright); }
.btn-ms svg { width: 18px; height: 18px; }
.login-foot { color: var(--ink-faint); font-size: 12px; margin-top: 22px; }

/* Customer health: table, badges, chips, search ---------------------- */
.search-box {
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 6px 10px; min-width: 200px; background: var(--card);
}
.search-box:focus { outline: none; border-color: var(--burgundy); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.chips button:hover { border-color: var(--burgundy); color: var(--burgundy); }
.chips button[aria-pressed="true"] { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }

.tablewrap { overflow-x: auto; }
.ctable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ctable th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.ctable td { padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ctable td.num, .ctable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ctable td.cust { font-weight: 600; color: var(--ink); white-space: normal; min-width: 180px; }
.ctable tbody tr:hover, .ctable tbody tr:hover { background: var(--burgundy-wash); }
.trend-down { color: var(--neg); font-weight: 600; }
.trend-up { color: var(--pos); font-weight: 600; }
.trend-flat { color: var(--ink-faint); }

.badge {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.badge-at-risk   { background: #F7E0E0; color: #9E2B2B; }
.badge-slowing   { background: #F6EBD8; color: #8A5A16; }
.badge-lapsed    { background: #E7E3E5; color: #5E5E5E; }
.badge-on-track  { background: #DDEEE4; color: #2E7D5B; }
.badge-growing   { background: #D9EBD9; color: #1F7A38; }
.badge-new       { background: #DEEAF4; color: #2F6FB0; }
.badge-occasional{ background: #ECE9EA; color: #7A7175; }

.view-mobile .search-box { min-width: 0; width: 100%; }
/* let a card header with a search box / note drop the control to its own line */
.view-mobile .card-head { flex-wrap: wrap; gap: 8px; }

/* Sales-by-item header tools: sort toggle + search, right-aligned */
.sbi-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.sbi-tools .period button { padding: 6px 12px; }
.view-mobile .sbi-tools { width: 100%; }
.view-mobile .sbi-tools .search-box { flex: 1 1 100%; }

/* Expand/collapse control for top-N previews ------------------------- */
.showmore {
  display: inline-block; margin-top: 12px; padding: 6px 0;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--burgundy); background: transparent; border: 0; cursor: pointer;
}
.showmore:hover { color: var(--burgundy-bright); text-decoration: underline; }

/* "How these flags work" collapsible methodology ---------------------- */
.methodology {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.methodology > summary {
  cursor: pointer; padding: 16px 22px; list-style: none;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft); font-weight: 600;
}
.methodology > summary::-webkit-details-marker { display: none; }
.methodology > summary::after { content: '  ▾'; color: var(--burgundy); }
.methodology[open] > summary::after { content: '  ▴'; }
.methodology > summary:hover { color: var(--burgundy); }
.methodology-body { padding: 0 22px 20px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }
.methodology-body p { margin: 0 0 12px; }
.methodology-body .term { color: var(--ink); font-weight: 600; }
.methodology-body ul.terms, .methodology-body ul.statuslist { list-style: none; margin: 0 0 16px; padding: 0; }
.methodology-body ul.terms li { padding: 4px 0; }
.methodology-body ul.statuslist li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.methodology-body ul.statuslist li:last-child { border-bottom: 0; }
.methodology-body .badge { margin-right: 8px; }

/* Scoped date controls inside the $/lb card -------------------------- */
.perlb-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 14px; }

/* Prior-year comparison line + chart legend -------------------------- */
.prev-line { fill: none; stroke: var(--ink-faint); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-legend { display: flex; gap: 18px; justify-content: flex-end; font-size: 12px; color: var(--ink-soft); margin-bottom: 2px; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.lg-swatch { width: 16px; height: 0; display: inline-block; border-top: 2px solid var(--burgundy); }
.lg-swatch.lg-prev { border-top: 2px dashed var(--ink-faint); }

/* In-page section divider (e.g. "Raw materials" within Revenue & Sales) ---- */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 30px 0 14px; padding-top: 24px; border-top: 1px solid var(--line-strong);
}
.section-title {
  font-family: var(--font-display); font-weight: 400; font-size: 22px; margin: 0;
  color: var(--ink); letter-spacing: 0.01em;
}
.section-note { font-size: 13px; color: var(--ink-soft); }
/* A section heading's right side when it also holds controls (e.g. the Open Orders search). */
.section-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px 14px; flex-wrap: wrap; }
.section-tools .search-box { min-width: 260px; }
.view-mobile .section-tools { width: 100%; justify-content: flex-start; }
.view-mobile .section-tools .search-box { flex: 1 1 100%; min-width: 0; }

/* Projected (open-order) segment on the revenue chart + backlog accents ---- */
.proj-line { fill: none; stroke: var(--burgundy); stroke-width: 2; stroke-dasharray: 2 3; opacity: 0.72; }
.proj-dot { fill: var(--card); stroke: var(--burgundy); stroke-width: 2; opacity: 0.85; }
.proj-divider { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.lg-swatch.lg-proj { border-top: 2px dashed var(--burgundy); opacity: 0.72; }
.warn-text { color: var(--warn); font-weight: 600; }

/* Order backlog: sales orders expandable to their back-ordered lines ------- */
.so { border-bottom: 1px solid var(--line); }
.so:last-child { border-bottom: 0; }
.so-head {
  display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; padding: 10px 2px;
  font-family: var(--font-body); font-size: 14px; color: var(--ink);
}
.so-head:hover { background: var(--burgundy-wash); }
.so-caret { color: var(--burgundy); font-size: 10px; width: 12px; flex: none; }
.so-cust { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-meta { display: contents; } /* desktop: ref + due flow as direct flex children */
.so-ref { color: var(--ink-soft); font-size: 12px; white-space: nowrap; flex: none; }
.so-due { color: var(--ink-faint); font-size: 12px; white-space: nowrap; flex: none; }
.so-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; flex: none; min-width: 84px; text-align: right; }
.so-lines { padding: 0 0 10px 24px; }
.so-line { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; border-top: 1px dotted var(--line); font-size: 13px; }
.sl-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.sl-qty { color: var(--ink-faint); font-size: 12px; white-space: nowrap; flex: none; }
.sl-sub { display: block; color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; } /* "704 @ $5.00" under an invoice line's item */
.sl-val { font-variant-numeric: tabular-nums; white-space: nowrap; flex: none; min-width: 84px; text-align: right; color: var(--ink); }
.view-mobile .so-line { flex-wrap: wrap; }
/* Mobile backlog row: customer + value on top, SO ref/promised/overdue indented below */
.view-mobile .so-head {
  display: grid; align-items: baseline; gap: 3px 8px;
  grid-template-columns: 12px 1fr auto;
  grid-template-areas: "caret cust val" "meta meta meta";
}
.view-mobile .so-caret { grid-area: caret; }
.view-mobile .so-cust { grid-area: cust; white-space: normal; overflow: visible; }
.view-mobile .so-val { grid-area: val; }
.view-mobile .so-meta {
  grid-area: meta; display: flex; flex-wrap: wrap; gap: 2px 8px; padding-left: 20px;
}
.pos-text { color: var(--pos); font-weight: 600; }

/* ── Performance Summary (board report) ─────────────────────────────── */
.report-page { max-width: 1220px; }

/* Toolbar: output format + export (screen only) */
.rp-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 18px;
}
.rp-tool-group { display: flex; align-items: center; gap: 12px; }
.rp-tool-right { margin-left: auto; }
.rp-tool-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
.fmt-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.fmt-switch button {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 0; background: var(--card); color: var(--ink-soft); padding: 8px 14px; cursor: pointer;
}
.fmt-switch button + button { border-left: 1px solid var(--line-strong); }
.fmt-switch button[aria-pressed="true"] { background: var(--burgundy); color: #fff; }
.rp-hint { font-size: 12px; color: var(--ink-faint); }
.rp-print {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--burgundy); background: var(--burgundy); color: #fff;
  padding: 8px 16px; border-radius: var(--radius); cursor: pointer;
}
.rp-print:hover { background: var(--burgundy-bright); border-color: var(--burgundy-bright); }

/* Stage + the printable canvas */
.rp-stage { display: flex; justify-content: center; background: var(--bg); container-type: inline-size; }
.report-canvas {
  background: var(--card); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  container-type: size; overflow: hidden; display: flex; flex-direction: column;
  width: 100%; color: var(--ink);
  /* Type scales purely with the canvas (container units, no px floor) so the layout is
     scale-invariant: what fits the on-screen preview fits the printed page identically. */
  /* --fit is lowered by report.js (shrink-to-fit) until the content fits the fixed
     canvas, so any volume of real data stays inside the slide without overlapping. */
  /* The canvas's short side as a share of the stage width (cqw = the .rp-stage container — a
     container's own cq units resolve against its PARENT container, so the canvas can't size
     its type from itself). 16:9 → 9/16 of its width, 4:3 → 3/4, portrait → its width. */
  --cw: min(100cqw, var(--maxw-c));
  font-size: calc(var(--cw) * var(--short) * 0.0195 * var(--fit, 1));
  padding: 2.4em 2.6em 1.3em;
}
.report-canvas.fmt-169 { max-width: 1160px; --maxw-c: 1160px; --short: 0.5625; aspect-ratio: 16 / 9; }
.report-canvas.fmt-43 { max-width: 940px; --maxw-c: 940px; --short: 0.75; aspect-ratio: 4 / 3; }
.report-canvas.fmt-portrait { max-width: 800px; --maxw-c: 800px; --short: 1; aspect-ratio: 8.5 / 11; }

/* Masthead */
.rp-masthead {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1em;
  border-bottom: 2px solid var(--burgundy); padding-bottom: 0.7em; margin-bottom: 1em;
}
.rp-brand { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
.rp-mark {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--burgundy); font-size: 1.75em; line-height: 1;
}
.rp-kicker { font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); }
.rp-period { text-align: right; flex: none; }
.rp-range { font-family: var(--font-display); font-size: 1.15em; color: var(--ink); line-height: 1.1; }
.rp-asof { font-size: 0.78em; color: var(--ink-faint); margin-top: 0.25em; }

/* KPI band */
.rp-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7em; margin-bottom: 1em; }
.rp-kpi {
  border: 1px solid var(--line); border-top: 3px solid var(--line-strong);
  border-radius: var(--radius); padding: 0.7em 0.8em; background: var(--card); min-width: 0;
}
.rp-kpi.accent { border-top-color: var(--burgundy); }
.rp-kpi.warn { border-top-color: var(--warn); }
.rp-kpi-label {
  font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint);
  margin-bottom: 0.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-kpi-value { font-family: var(--font-display); font-size: 1.95em; line-height: 1; color: var(--ink); }
.rp-kpi-foot {
  font-size: 0.74em; color: var(--ink-soft); margin-top: 0.45em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rp-delta.pos { color: var(--pos); font-weight: 600; }
.rp-delta.neg { color: var(--neg); font-weight: 600; }

/* Body: main (chart + takeaways) beside side panels.
   Panels take their natural (content) height and clip as a safety net; shrink-to-fit
   scales the whole canvas so the natural height fits — no flex squeezing, no spill. */
.rp-body { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1em; align-items: start; }
.rp-col { display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.rp-panel {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8em 0.9em;
  background: var(--card); min-width: 0; overflow: hidden; display: flex; flex-direction: column;
}
.rp-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; margin-bottom: 0.5em; }
.rp-panel-head > span:first-child {
  font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 600;
}
.rp-panel-note { font-size: 0.72em; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }

/* Chart — fills the panel width; height follows the (wide) viewBox aspect */
.rp-chart { display: flex; flex-direction: column; }
.rp-chart-svg { width: 100%; height: auto; display: block; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 0.3em 1em; justify-content: flex-end; font-size: 0.72em; color: var(--ink-soft); margin-bottom: 0.2em; }
.rp-legend .lg { display: inline-flex; align-items: center; gap: 0.4em; }
.lg-swatch.lg-cur { border-top: 2px solid var(--burgundy); }

/* Takeaways */
.rp-takeaways { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5em; }
.rp-take { display: flex; gap: 0.55em; align-items: flex-start; font-size: 0.86em; line-height: 1.35; }
.rp-take-mark { flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; margin-top: 0.42em; background: var(--burgundy); }
.rp-take.tone-warn .rp-take-mark { background: var(--warn); }
.rp-take.tone-pos .rp-take-mark { background: var(--pos); }
.rp-take.tone-plain .rp-take-mark { background: var(--ink-faint); }
.rp-take-text { min-width: 0; }
.rp-take b { color: var(--ink); font-weight: 700; }

/* Side-panel primitives */
.rp-stat { display: flex; flex-wrap: wrap; gap: 0.2em 1em; font-size: 0.82em; color: var(--ink-soft); margin-bottom: 0.6em; }
.rp-stat b { color: var(--ink); }
.rp-sub { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 0.35em; }
.rp-rows { display: flex; flex-direction: column; gap: 0.3em; }
.rp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em;
  font-size: 0.86em; border-bottom: 1px solid var(--line); padding-bottom: 0.28em;
}
.rp-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rp-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rp-row-val { flex: none; font-variant-numeric: tabular-nums; }
.rp-row-val.muted-val { color: var(--ink-soft); }
.rp-note { font-size: 0.84em; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 0.4em; margin-bottom: 0.6em; }
.rp-chip { font-size: 0.76em; padding: 0.2em 0.6em; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); }
.rp-chip b { color: var(--ink); }
.rp-chip.warn { border-color: var(--warn); color: var(--warn); }
.rp-chip.warn b { color: var(--warn); }

/* Foot */
.rp-foot {
  border-top: 1px solid var(--line); margin-top: auto; padding-top: 0.6em;
  font-size: 0.74em; color: var(--ink-faint); display: flex; flex-wrap: wrap; align-items: center;
}
.rp-foot .dot-sep { margin: 0 0.6em; }
.rp-foot-gen { margin-left: auto; }

/* Portrait keeps the two-column body (uses the taller page better than stacking)
   but drops the KPI band to 3 columns since it is narrower. */
.report-canvas.fmt-portrait .rp-kpis { grid-template-columns: repeat(3, 1fr); }

/* Mobile: a fixed-aspect slide is unreadable on a phone, so the on-screen report
   flows naturally (single column, vertical scroll only). The Format buttons still
   set the export geometry for Save-as-PDF. */
.view-mobile .rp-stage { display: block; }
.view-mobile .report-canvas {
  container-type: normal; overflow: visible;
  width: 100%; max-width: 100%; height: auto; aspect-ratio: auto;
  font-size: 14px; padding: 20px 16px 16px;
}
.view-mobile .rp-kpis { grid-template-columns: repeat(2, 1fr); }
.view-mobile .rp-body { grid-template-columns: 1fr; }
.view-mobile .rp-chart { min-height: 200px; }
.view-mobile .rp-masthead { flex-wrap: wrap; }
.view-mobile .rp-period { text-align: left; }

/* ── Print: only the canvas, filling the page at the chosen geometry ── */
@media print {
  .accent-bar, .topbar, .page-head, .rp-toolbar { display: none !important; }
  html, body { background: #fff !important; }
  .page.report-page { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .rp-stage { padding: 0 !important; background: #fff !important; display: block !important; }
  .report-canvas {
    max-width: none !important; width: 100% !important; height: 100vh !important;
    aspect-ratio: auto !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
    --maxw-c: 100000px; /* the page width, uncapped — same proportions as the preview */
  }
  .report-canvas, .report-canvas * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* Daily activity cards (today's invoicing / order intake) */
.daily-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.daily-amt { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ink); }
.daily-sub { font-size: 13px; color: var(--ink-soft); }

/* Order backlog grouped by customer */
.bl-cust { border-bottom: 1px solid var(--line-strong); }
.bl-cust:last-child { border-bottom: 0; }
.bl-cust-head {
  display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; padding: 12px 4px 8px;
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.bl-cust-head:hover { background: var(--burgundy-wash); }
.bl-caret { color: var(--burgundy); font-size: 10px; flex: none; align-self: center; }
.bl-cust-name { font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.bl-cust-meta { font-size: 12px; color: var(--ink-faint); white-space: nowrap; flex: 0 0 auto; }
.bl-cust-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap; margin-left: auto; flex: none; }
.bl-orders { padding-left: 16px; }
.sl-code { color: var(--ink-faint); font-size: 11px; margin-left: 6px; }

/* Access-control admin table */
.admin-table th.chk, .admin-table td.chk { text-align: center; white-space: nowrap; }
.admin-table th.chk { white-space: normal; } /* two-word page names wrap when the table is tight */
.admin-table td.chk input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--burgundy); }
.admin-table .role-sel {
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); cursor: pointer;
}
.admin-table .role-sel:focus { outline: none; border-color: var(--burgundy); }
.admin-table .small { font-size: 11px; }
.admin-table .rowstatus { font-size: 12px; white-space: nowrap; min-width: 72px; }

.you-tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--burgundy); background: var(--burgundy-wash); border: 1px solid var(--burgundy-tint); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.admin-table tr.row-flash td { background: #fbf3dc; transition: background-color 0.6s; }
.admin-table td.row-actions { text-align: right; white-space: nowrap; }
.row-btn { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.row-btn:hover { color: var(--burgundy); border-color: var(--burgundy); }
.row-btn-danger:hover { color: var(--neg); border-color: var(--neg); background: #fbf1f1; }
.row-btn:disabled { color: var(--ink-faint); border-color: var(--line); background: var(--card); cursor: wait; }
.users-msg { font-size: 13px; margin: 0 0 8px; }
.users-msg:empty { display: none; }

/* Add a user (access control) */
.add-user { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.add-user .dr-field span em { font-style: normal; text-transform: none; letter-spacing: 0; }
.add-user .au-email { flex: 1 1 260px; }
.add-user .au-name { flex: 1 1 180px; }
.add-user .dr-field input { width: 100%; }
.add-user select {
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); cursor: pointer;
}
.add-user select:focus { outline: none; border-color: var(--burgundy); }
.add-user .wo-btn { padding: 7px 16px; }
.add-msg { font-size: 13px; flex: 1 1 100%; min-height: 1.2em; }
.add-hint { margin-top: 6px; }

/* Inventory planning page */
.plan-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chk-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; cursor: pointer; }
.chk-inline input { accent-color: var(--burgundy); width: 15px; height: 15px; }
.ctable td.method { white-space: normal; min-width: 150px; }
.small { font-size: 11px; }

/* ── Work-order traveler + Build action ─────────────────────────────── */
.wo-main { max-width: 900px; margin: 0 auto; padding: 22px 20px 60px; }
.wo-controls-inner {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.wo-controls-inner .dr-field { display: flex; flex-direction: column; gap: 4px; }
.wo-controls-inner select {
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card);
}
.wo-savemsg { font-size: 13px; color: var(--ink-soft); }
.wo-savemsg.ok { color: var(--pos); }
.wo-savemsg.err { color: var(--neg); }
.wo-btn2 { font-family: var(--font-body); font-size: 12px; color: var(--burgundy); border: 1px solid var(--burgundy); background: var(--card); border-radius: var(--radius); padding: 7px 14px; cursor: pointer; }
.wo-btn2:hover { background: var(--burgundy-wash); }
.wo-draft.issued { color: var(--pos); border-color: var(--pos); }

.wo-sheet-inner {
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 26px 30px; box-shadow: var(--shadow); color: var(--ink);
}
.wo-head { display: flex; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--burgundy); padding-bottom: 14px; margin-bottom: 16px; }
.wo-kicker { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--burgundy); }
.wo-draft { display: inline-block; margin-left: 8px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); border-radius: 3px; padding: 1px 7px; vertical-align: 2px; }
.wo-item { font-family: var(--font-display); font-size: 26px; line-height: 1.1; margin-top: 8px; }
.wo-desc { font-size: 15px; margin-top: 3px; }
.wo-code { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.wo-head-r { flex: 0 0 auto; }
.wo-meta { border-collapse: collapse; font-size: 13px; }
.wo-meta td { padding: 3px 0; vertical-align: top; }
.wo-meta td:first-child { color: var(--ink-soft); padding-right: 16px; white-space: nowrap; }
.wo-meta td:last-child { text-align: right; font-weight: 600; }
.wo-fill { border-bottom: 1px solid var(--ink-faint); min-width: 90px; }

.wo-note { background: var(--burgundy-wash); border: 1px solid var(--burgundy-tint); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }

.wo-sec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; break-inside: avoid; }
.wo-sec:first-of-type { border-top: 0; margin-top: 0; }
.wo-sec-t { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--burgundy); margin-bottom: 10px; }
.wo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 22px; }
.wo-f { min-width: 0; }
.wo-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); }
.wo-v { font-size: 14px; color: var(--ink); margin-top: 1px; word-break: break-word; }
.wo-sub { color: var(--ink-soft); font-weight: 400; font-size: 0.88em; }
.wo-alt { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.wo-dash { color: var(--ink-faint); }

.wo-temps { border-collapse: collapse; width: 100%; font-size: 13px; }
.wo-temps th, .wo-temps td { border: 1px solid var(--line); padding: 5px 6px; text-align: center; }
.wo-temps th { background: var(--burgundy-wash); color: var(--ink-soft); font-weight: 600; font-size: 11px; }
.wo-temp-l { text-align: left !important; color: var(--ink-soft); white-space: nowrap; }

.wo-ops { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.wo-op { font-size: 13px; color: var(--ink-faint); }
.wo-op.on { color: var(--ink); }
.wo-req { font-size: 13px; margin-top: 8px; }
.wo-req .wo-l { display: inline; margin-right: 6px; }
.wo-fill-inline { display: inline-block; min-width: 120px; border-bottom: 1px solid var(--ink-faint); }

.wo-foot { border-top: 2px solid var(--burgundy); margin-top: 18px; padding-top: 12px; }
.wo-prov { font-size: 11px; color: var(--ink-faint); margin-bottom: 14px; }
.wo-sign { display: flex; flex-wrap: wrap; gap: 8px 40px; font-size: 13px; color: var(--ink-soft); }

.wo-hist { margin-top: 22px; }
.wo-hist-h { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.wo-rank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.wo-rank { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.wo-rank-t { font-size: 12px; font-weight: 600; color: var(--burgundy); margin-bottom: 6px; }
.wo-rank .ctable { font-size: 12px; }

/* Build button on the finished-goods plan */
.build-btn {
  font-family: var(--font-body); font-size: 12px; color: var(--burgundy);
  border: 1px solid var(--line-strong); background: var(--card);
  border-radius: var(--radius); padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
.build-btn:hover { border-color: var(--burgundy); background: var(--burgundy-wash); }

/* Recent build sheets (reprint list) */
.wo-drafts-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.wo-drafts-row:last-child { border-bottom: 0; }
.wo-drafts-row .d-item { flex: 1 1 auto; min-width: 0; }
.wo-drafts-row .d-item b { font-weight: 600; }
.wo-drafts-row .d-meta { color: var(--ink-soft); font-size: 12px; }
.wo-drafts-row .d-open { flex: 0 0 auto; }
.d-badge { display: inline-block; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 3px; padding: 1px 6px; vertical-align: 1px; margin-right: 4px; }
.d-badge.issued { color: var(--pos); border-color: var(--pos); }

/* Production log — blank run-log / shift sign-off grid (filled on the floor) */
.wo-log { border-collapse: collapse; width: 100%; font-size: 12px; margin-top: 4px; }
.wo-log th, .wo-log td { border: 1px solid var(--line-strong); padding: 6px 8px; text-align: left; }
.wo-log th { background: var(--burgundy-wash); color: var(--ink-soft); font-weight: 600; font-size: 11px; }
.wo-log td { height: 30px; }
.wo-log-date { width: 92px; }
.wo-log-shift { width: 88px; color: var(--ink-soft); white-space: nowrap; }
.wo-log-sign { width: 160px; }
.wo-log-daysep td { border-top: 2px solid var(--ink-faint); }
.wo-log-sec { break-inside: avoid; }

/* Multi-page sheet */
.wo-page + .wo-page { margin-top: 20px; }
.wo-pagefoot { text-align: right; font-size: 11px; color: var(--ink-faint); margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.wo-conthead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 2px solid var(--burgundy); padding-bottom: 8px; margin-bottom: 14px; }
.wo-conthead b { font-family: var(--font-display); font-size: 16px; font-weight: 400; }

@media (max-width: 560px) {
  .wo-main { padding: 16px 12px 48px; }
  .wo-sheet-inner { padding: 18px 16px; }
  .wo-head { flex-wrap: wrap; gap: 12px; }
  .wo-head-r, .wo-meta { width: 100%; }
  .wo-meta td:last-child { white-space: normal; }
  .wo-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; }
  .wo-temps, .wo-log { white-space: normal; overflow-wrap: anywhere; }
}

/* ── Purchase orders (reorder plan → QuickBooks) ─────────────────── */
.wo-btn { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #fff; background: var(--burgundy); border: 1px solid var(--burgundy); border-radius: var(--radius); padding: 9px 18px; cursor: pointer; white-space: nowrap; }
.wo-btn:hover { background: #4a0029; }
.wo-btn:disabled { background: var(--line-strong); border-color: var(--line-strong); color: var(--ink-faint); cursor: not-allowed; }

.po-banner { background: var(--burgundy-wash); border: 1px solid var(--burgundy-tint); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 14px; }
.po-banner strong { color: var(--burgundy); }
.po-banner code { font-size: 12px; background: rgba(0,0,0,0.05); padding: 1px 5px; border-radius: 3px; }

.po-table { width: 100%; }
.po-table th, .po-table td { vertical-align: top; }
.po-table .po-chk { width: 30px; text-align: center; padding-left: 6px; padding-right: 6px; }
.po-in { font-family: var(--font-body); font-size: 13px; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); width: 92px; text-align: right; }
.po-table td.num .po-in { display: inline-block; }
/* Drafts awaiting approval: the vendor (+ where its PO is emailed) and the approval note wrap */
.ctable.dpa-table td.dpa-vend { white-space: normal; min-width: 150px; max-width: 240px; overflow-wrap: anywhere; }
.ctable.dpa-table td.poe-appr { white-space: normal; min-width: 150px; max-width: 260px; }
.po-ref { width: 78px; text-align: left; }
.po-vend select { font-family: var(--font-body); font-size: 13px; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); max-width: 210px; width: 100%; }
.po-tr.needs-vendor .po-vend select { border-color: var(--warn); }
.po-in:disabled, .po-vend select:disabled { background: var(--burgundy-wash); color: var(--ink-soft); cursor: not-allowed; }
.po-tr.po-done { opacity: 0.72; }
.po-tr.po-done .cust { text-decoration: none; }
.po-retry { font-family: var(--font-body); font-size: 11px; color: var(--burgundy); border: 1px solid var(--line-strong); background: var(--card); border-radius: var(--radius); padding: 2px 8px; cursor: pointer; }
.po-retry:hover { background: var(--burgundy-wash); }
.po-retry:disabled { color: var(--ink-faint); cursor: wait; }

/* Resin MOQ (history-based, overridable) */
.ctable td.moq-cell { white-space: normal; min-width: 104px; max-width: 150px; }
.moq-in { width: 84px; }
.moq-note { margin-top: 3px; line-height: 1.35; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--burgundy); text-decoration: underline; cursor: pointer; }

/* Draft PO raw-material picker + the Obsolete items page */
.po-in.po-raw-in { width: 100%; max-width: 260px; text-align: left; margin: 4px 0 2px; }
.ctable.ob-table td.ob-note { white-space: normal; min-width: 160px; max-width: 320px; }
.ob-table .ob-act { white-space: nowrap; text-align: right; }

/* Open POs → email to vendor */
a.po-retry { display: inline-block; text-decoration: none; }
.poe-table td { vertical-align: top; }
.ctable.poe-table td.cust { min-width: 130px; max-width: 200px; }
.ctable.poe-table td.poe-email { white-space: normal; min-width: 170px; max-width: 250px; overflow-wrap: break-word; }
.ctable.poe-table td.poe-status { white-space: normal; min-width: 140px; max-width: 220px; }
.ctable.poe-table td.poe-appr { white-space: normal; min-width: 130px; max-width: 210px; }
.poe-appr-btns { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.po-appr-msg { margin-top: 4px; color: var(--ink-soft); }
.poe-table .poe-act { white-space: nowrap; text-align: right; }
/* Phone: each PO stacks into a card so the Send button is on screen without sideways scrolling. */
.view-mobile .poe-table, .view-mobile .poe-table tbody { display: block; }
.view-mobile .poe-table thead { display: none; }
.view-mobile .poe-table tbody tr {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 4px;
  grid-template-areas: "ref vend total" "email email email" "appr appr appr" "status status act";
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.view-mobile .ctable.poe-table td { display: block; border: 0; padding: 0; min-width: 0; max-width: none; }
.view-mobile .poe-table td.poe-ref { grid-area: ref; }
.view-mobile .poe-table td.poe-date { display: none; }
.view-mobile .poe-table td.cust { grid-area: vend; }
.view-mobile .poe-table td.poe-total { grid-area: total; }
.view-mobile .poe-table td.poe-email { grid-area: email; font-size: 12px; }
.view-mobile .poe-table td.poe-appr { grid-area: appr; }
.view-mobile .poe-table td.poe-status { grid-area: status; align-self: center; }
.view-mobile .poe-table td.poe-act { grid-area: act; align-self: center; white-space: normal; }
.poe-send { padding: 4px 12px; }
.poe-send:disabled { color: var(--ink-faint); border-color: var(--line-strong); background: var(--card); cursor: not-allowed; }

.po-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--burgundy); }
.po-sum { font-size: 14px; color: var(--ink-soft); }
.po-sum b { color: var(--ink); font-weight: 600; }
.po-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.po-caution { font-size: 12px; color: var(--ink-faint); max-width: 340px; }

@media (max-width: 560px) {
  .po-actions { width: 100%; justify-content: space-between; }
  .po-caution { max-width: none; }
}

/* ── Open Orders (weekly sales meeting) ──────────────────────────── */
.cov { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 3px; padding: 2px 7px; border: 1px solid; white-space: nowrap; }
.cov-ok   { color: var(--pos);  border-color: var(--pos); }
.cov-part { color: var(--warn); border-color: var(--warn); }
.cov-back { color: var(--neg);  border-color: var(--neg); background: rgba(160, 30, 30, 0.05); }

.op-table { width: 100%; }
.op-table th, .op-table td { vertical-align: top; }
/* Let order/customer + item/label wrap so the promised-date column stays in view on narrower screens. */
.ctable.op-table td.cust { white-space: normal; min-width: 110px; max-width: 190px; }
.op-tr.op-overdue td:first-child { box-shadow: inset 3px 0 0 var(--neg); }

/* Cells that wrap must out-rank `.ctable td { white-space: nowrap }` or the table forces the page wide. */
.ctable td.op-cell, .ctable td.op-delays-cell { white-space: normal; }
.op-cell { min-width: 172px; }
.op-date, .op-rel-date { font-family: var(--font-body); font-size: 13px; color: var(--ink); padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); }
.op-promise.op-later .op-date { border-color: var(--warn); }
.op-edit { margin-top: 6px; }
.op-reason { font-family: var(--font-body); font-size: 12px; width: 100%; max-width: 240px; padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); box-sizing: border-box; }
.op-promise.op-later .op-reason { border-color: var(--warn); background: #fffaf0; }
.op-edit-row { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.op-save, .op-rel-save { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: #fff; background: var(--burgundy); border: 1px solid var(--burgundy); border-radius: var(--radius); padding: 4px 11px; cursor: pointer; }
.op-save:disabled, .op-rel-save:disabled { opacity: 0.55; cursor: default; }
.op-cancel, .op-rel-cancel { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; }
.op-err { font-size: 12px; color: var(--neg); }
.op-late-note { font-size: 11px; font-weight: 600; color: var(--warn); margin-top: 3px; }

/* Blanket orders: release schedule (Open Orders) */
.op-blanket-link { display: block; margin-top: 6px; padding: 0; font-family: var(--font-body); font-size: 11px; color: var(--ink-soft); background: none; border: 0; cursor: pointer; text-align: left; text-decoration: underline dotted; text-underline-offset: 2px; }
.op-blanket-link:hover { color: var(--burgundy); }
/* Per-line flags — "No ship date yet" / "Ships with other orders"; out of the on-time numbers while ticked */
.op-flag { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 12px; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.op-flag:hover { color: var(--burgundy); }
.op-flag:has(input:checked) { color: var(--ink); font-weight: 600; }
.op-flag input { width: 14px; height: 14px; margin: 0; accent-color: var(--burgundy); cursor: pointer; }
.op-flag-hint { font-size: 11px; color: var(--warn); margin-top: 2px; }
.op-flag-err { font-size: 11px; color: var(--neg); margin-top: 2px; }
.op-date:disabled { color: var(--ink-faint); background: var(--bg); border-style: dashed; cursor: not-allowed; }
.op-nodate-ship, .op-held-ship { color: var(--ink-soft); }
/* Confirm a pre-filled promised date as-is */
.op-date-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.op-confirm { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--burgundy); background: var(--card); border: 1px solid var(--burgundy-tint); border-radius: var(--radius); padding: 4px 8px; cursor: pointer; white-space: nowrap; }
.op-confirm:hover { background: var(--burgundy-wash); border-color: var(--burgundy); }
.op-confirm:disabled { opacity: 0.6; cursor: wait; }
.op-promise.op-editing .op-confirm { display: none; }
.op-confirmed { color: var(--pos); font-weight: 700; font-size: 14px; cursor: default; }
.op-confirm-err { font-size: 11px; color: var(--neg); margin-top: 3px; }
.op-bchip { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--burgundy); background: var(--burgundy-wash); border: 1px solid var(--burgundy-tint); border-radius: 999px; padding: 1px 7px; vertical-align: 1px; }
.op-bnext { font-size: 13px; margin-top: 4px; }
.op-rel-btn { display: inline-block; margin-top: 6px; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--burgundy); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.op-rel-btn:hover { background: var(--burgundy-wash); }
.ctable .op-rel > td { white-space: normal; background: var(--burgundy-wash); }
.op-rel-box { position: sticky; left: 0; max-width: min(640px, calc(100vw - 72px)); padding: 8px 4px 12px; } /* stays inside the visible pane */
.op-rel-scroll { overflow-x: auto; }
.op-rel-h { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--burgundy); }
.op-rel-sub { font-size: 12px; color: var(--ink-soft); margin: 2px 0 8px; }
.op-rel-help { font-size: 12px; color: var(--ink-soft); line-height: 1.45; margin: 0 0 8px; max-width: 560px; }
.op-rel-t { background: var(--card); border-collapse: collapse; font-size: 12px; }
.ctable .op-rel-t td, .ctable .op-rel-t th { padding: 5px 8px; vertical-align: middle; }
.op-rel-n { color: var(--ink-faint); }
.op-rel-qty { width: 104px; text-align: right; font-family: var(--font-body); font-size: 13px; color: var(--ink); padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); }
.op-rel-date.op-later { border-color: var(--warn); }
.op-rel-moved { display: block; font-size: 11px; font-weight: 600; color: var(--warn); }
.op-rel-moved:empty { display: none; }
.op-rel-locked td { color: var(--ink-soft); }
.op-rel-del { font-family: var(--font-body); font-size: 16px; line-height: 1; color: var(--ink-faint); background: none; border: 1px solid transparent; border-radius: var(--radius); padding: 2px 7px; cursor: pointer; }
.op-rel-del:hover { color: var(--neg); border-color: var(--line-strong); }
.op-rel-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0; }
.op-rel-add { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--burgundy); background: var(--card); border: 1px dashed var(--burgundy-tint); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; }
.op-rel-add:hover { border-style: solid; }
.op-rel-add:disabled { opacity: 0.55; cursor: default; }
.op-rel-total { font-size: 12px; }
.op-rel-reason { max-width: 420px; }
.op-rel-reason.op-need { border-color: var(--warn); background: #fffaf0; }
.op-rel-off { margin-left: auto; font-family: var(--font-body); font-size: 12px; color: var(--neg); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

.op-delays { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--neg); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.op-delays:hover { background: var(--burgundy-wash); }
.op-delays.op-hist-only { color: var(--ink-soft); font-weight: 400; }
.op-lastreason { margin-top: 4px; max-width: 200px; line-height: 1.35; }

.ctable .op-hist td { white-space: normal; background: var(--burgundy-wash); }
.op-hist-box { padding: 6px 4px 10px; }
.op-hist-h { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--burgundy); margin-bottom: 8px; }
.op-hist-t { background: var(--card); font-size: 12px; }
.ctable .op-hist-t td { white-space: normal; }

.op-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.op-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--card); }
.op-tile-l { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.op-tile-v { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin-top: 4px; }
.op-tile-f { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.op-trend { margin-top: 18px; }
.op-trend-h { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.op-mrow { display: grid; grid-template-columns: 70px 1fr 110px; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.op-mlab { color: var(--ink-soft); }
.op-mbar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; }
.op-mfill { height: 100%; background: var(--burgundy); border-radius: 5px; }
.op-mval { text-align: right; }

/* Freeze panes: each order table scrolls inside a bounded pane, spreadsheet-style, so the
   header row and the Order column stay put. A page-level sticky header can't work here —
   .tablewrap's overflow-x already makes it the scroll container. The pane carries
   data-lenis-prevent so the mouse wheel scrolls it natively instead of the page. Collapsed
   borders don't travel with sticky cells, so frozen edges are drawn with box-shadow, and
   frozen cells get an opaque background so content can't show through. */
.tablewrap.op-freeze { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow: auto; }
.op-freeze .op-table thead th { position: sticky; top: 0; z-index: 2; background: var(--card); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--line-strong); }
.op-freeze .op-table .op-frz { position: sticky; left: 0; }
.op-freeze .op-table td { transition: background-color 0.6s; }
.op-freeze .op-table td.op-frz { z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--line-strong); }
.op-freeze .op-table thead th.op-frz { z-index: 3; box-shadow: inset 0 -1px 0 var(--line-strong), 1px 0 0 var(--line-strong); }
.op-freeze .op-table tbody tr:hover td.op-frz { background: var(--burgundy-wash); }
.op-freeze .op-table tr.op-overdue td.op-frz { box-shadow: inset 3px 0 0 var(--neg), 1px 0 0 var(--line-strong); }
.op-freeze .op-table tr.op-flash td { background: #fbf3dc; }

/* Sortable column headers */
.th-sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.th-sort:hover, .th-sort.is-active { color: var(--burgundy); }
.th-sort:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; border-radius: 2px; }
.sort-ind { font-size: 9px; opacity: 0.35; }
.th-sort:hover .sort-ind { opacity: 0.7; }
.th-sort.is-active .sort-ind { opacity: 1; }

/* ── Executive summary (Open Orders) ─────────────────────────────── */
.ex-card { margin-bottom: 18px; }
.ex-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ex-tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--card); }
.ex-tile-warn { box-shadow: inset 3px 0 0 var(--chart-late); }
.ex-tile-l { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.ex-tile-v { font-family: var(--font-body); font-weight: 600; font-size: 28px; line-height: 1.15; color: var(--ink); margin-top: 4px; }
.ex-tile-f { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.ex-ico { display: inline-block; font-weight: 700; margin-right: 3px; }
.ex-story { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; max-width: 1000px; }
.ex-story b { color: var(--ink); font-weight: 600; }
.ex-chart-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 14px; }
.ex-chart-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.ex-chart-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.ex-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 2px; font-size: 12px; color: var(--ink-soft); }
.ex-key { display: inline-flex; align-items: center; gap: 5px; }
.ex-sw { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.ex-sw-ok { background: var(--chart-ok); }
.ex-sw-late { background: var(--chart-late); }
.ex-sw-pastdue { background: var(--chart-pastdue); }
.ex-sw-none { background: var(--ink-faint); }

/* Drill-down: click a week/month (chart column or table row) to list its orders by customer */
.ex-hit { cursor: pointer; }
.ex-selband { fill: var(--burgundy-wash); }
.ex-tbl tr.ex-pickrow { cursor: pointer; }
.ex-tbl tr.ex-pickrow:hover td { background: var(--burgundy-wash); }
.ex-tbl tr.ex-row-sel td { background: var(--burgundy-wash); }
.ex-pick { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.ex-pick:hover { color: var(--burgundy); }
.ex-caret { color: var(--burgundy); font-size: 10px; width: 9px; }
.exd { border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card); padding: 14px 16px 10px; margin: 4px 0 18px; }
.exd-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.exd-title { font-weight: 700; color: var(--ink); }
.exd-close { flex: none; font-size: 12px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 2px 8px; cursor: pointer; }
.exd-close:hover { color: var(--burgundy); border-color: var(--burgundy); }
.exd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.exd-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 11px; cursor: pointer; }
.exd-chip:hover { border-color: var(--burgundy); }
.exd-chip.is-on { color: var(--burgundy); border-color: var(--burgundy); background: var(--burgundy-wash); }
.exd-chip b { color: var(--ink); font-weight: 600; }
.exd-chip .ex-sw { width: 10px; height: 10px; }
.exd-cust { border-top: 1px solid var(--line); padding: 9px 0 4px; }
.exd-cust-h { display: flex; align-items: baseline; gap: 10px; }
.exd-cname { font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exd-v { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.exd-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; padding: 5px 0 5px 16px; font-size: 13px; }
.exd-so { flex: none; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--burgundy); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.exd-so:hover { color: var(--burgundy-bright); }
.exd-item { color: var(--ink); }
.exd-why { color: var(--ink-soft); }
.exd-st { flex: none; font-size: 11px; font-weight: 600; border-radius: 3px; padding: 1px 7px; white-space: nowrap; }
.exd-st-ok { color: var(--chart-ok); background: rgba(44, 130, 94, 0.10); }
.exd-st-late { color: #9a5f0c; background: rgba(191, 118, 18, 0.12); }
.exd-st-pastdue { color: var(--chart-pastdue); background: rgba(158, 43, 43, 0.10); }
.exd-st-none { color: var(--ink-soft); background: var(--bg); }
.exd-foot { padding: 6px 0 2px; }
.view-mobile .exd-line { padding-left: 0; }
.ex-chart { position: relative; margin-bottom: 10px; }
.ex-svg { display: block; }
.ex-grid { stroke: var(--line); stroke-width: 1; }
.ex-tick { font-size: 11px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ex-seg.ex-ok { fill: var(--chart-ok); }
.ex-seg.ex-late { fill: var(--chart-late); }
.ex-seg.ex-pastdue { fill: var(--chart-pastdue); }
.ex-seg.ex-none { fill: var(--ink-faint); }
.ex-cap { font-size: 11px; font-weight: 600; fill: var(--ink-soft); }
.ex-xl { font-size: 11px; fill: var(--ink-soft); }
.ex-xl-now { fill: var(--ink); font-weight: 600; }
.ex-xs { font-size: 10px; fill: var(--ink-faint); }
.ex-hl { fill: var(--burgundy-wash); }
.ex-hit { fill: transparent; pointer-events: all; outline: none; }
.ex-hit:focus-visible { stroke: var(--burgundy); stroke-width: 1.5; }
.ex-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.ex-tip-h { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.ex-tip-r { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.ex-tip-r b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ex-tip-k { display: inline-block; width: 10px; height: 2px; border-radius: 1px; }
.ex-tip-f { margin-top: 4px; color: var(--ink-faint); }
.ex-tbl td, .ex-tbl th { font-variant-numeric: tabular-nums; }
.ex-tbl tfoot td { border-top: 1px solid var(--line-strong); font-weight: 600; color: var(--ink); }

@media print {
  .no-print { display: none !important; }
  .wo-hist { display: none !important; }
  .wo-page { break-after: page; }
  .wo-page:last-child { break-after: auto; }
  .wo-page + .wo-page { margin-top: 0; }
  html, body { background: #fff; }
  .wo-main { max-width: none; margin: 0; padding: 0; }
  .wo-sheet-inner { border: 0; box-shadow: none; padding: 0; }
  .wo-sec { break-inside: avoid; }
  @page { size: letter portrait; margin: 14mm; }
}

/* ── Production schedule (Gantt) ─────────────────────────────────── */
.sched-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; }
.sched-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.sched-legend .lg-sw { width: 15px; height: 12px; border-radius: 2px; border: 1px solid var(--line-strong); display: inline-block; }
.sched-legend .lg-setup { background: repeating-linear-gradient(45deg, rgba(0,0,0,.28) 0 3px, transparent 3px 6px); border-color: var(--line-strong); }
.sched-legend .lg-late { background: #fff; box-shadow: inset 3px 0 0 var(--neg); }
.sched-legend .lg-stock { background-color: hsl(28,44%,80%); border-color: hsl(28,40%,42%); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.65) 0 3px, transparent 3px 6px); }
.sched-legend .lg-hint { color: var(--ink-faint); font-style: italic; }

/* Machine availability chips */
.sched-lines { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.lchip-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-right: 2px; }
.lchip { font-family: var(--font-body); font-size: 11px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.lchip:hover { border-color: var(--burgundy); color: var(--burgundy); }
.lchip.down { background: #F3E2E2; border-color: var(--neg); color: var(--neg); text-decoration: line-through; }
.lchip-note { font-size: 11px; color: var(--neg); margin-left: 6px; }
.su-btn { margin-left: 10px; padding: 3px 10px; }

/* Inline "schedule this manual item" editor */
.su-row { padding: 10px 0; }
.su-head { margin-bottom: 7px; }
.su-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.su-edit label { display: flex; flex-direction: column; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.su-in { width: 72px; box-sizing: border-box; font-family: var(--font-body); font-size: 13px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 4px 6px; background: var(--card); }
.su-in:focus { outline: none; border-color: var(--burgundy); }
.su-die-l .su-in { width: 130px; }
.su-foot { margin-top: 12px; }

/* "How this schedule was built" explainer */
#sched-logic { background: var(--burgundy-wash); border-color: var(--line-strong); }
.logic-title { font-family: var(--font-display); font-size: 15px; color: var(--burgundy); margin-bottom: 12px; }
.logic-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.logic-list dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--burgundy); font-weight: 600; white-space: nowrap; padding-top: 1px; }
.logic-list dd { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.logic-list dd b { color: var(--ink); }
.logic-now { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line-strong); font-size: 13px; color: var(--ink-soft); }
.logic-now b { color: var(--ink); }
.view-mobile .logic-list { grid-template-columns: 1fr; gap: 1px; }
.view-mobile .logic-list dd { margin-bottom: 9px; }

.sched-scroll { overflow-x: auto; overflow-y: hidden; }
.g-axis { position: relative; height: 18px; }
.g-tick { position: absolute; top: 13px; height: 5px; width: 1px; background: var(--line-strong); }
.g-tick-lbl { position: absolute; top: 1px; font-size: 10px; color: var(--ink-faint); white-space: nowrap; padding-left: 3px; }
.g-body { position: relative; }
.g-row { display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.g-row:last-child { border-bottom: 1px solid var(--line); }
.g-line-label { flex: none; width: 70px; display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--ink-soft); padding-right: 6px; }
.g-track { position: relative; height: 30px; flex: none; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 46px 100%; }
.g-bar { position: absolute; top: 3px; height: 24px; border-radius: 3px; border: 1px solid; overflow: hidden; cursor: pointer; box-sizing: border-box; }
.g-bar:hover { filter: brightness(0.96); }
.g-setup { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(0,0,0,.26) 0 3px, transparent 3px 6px); }
/* stock portion of a bar: same material hue, faded with a light hatch + a divider from the order portion */
.g-stock { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.6) 0 4px, rgba(255,255,255,.15) 4px 8px); border-left: 1px dashed rgba(0,0,0,.4); }
.g-bar-lbl { position: relative; display: block; padding: 0 4px; line-height: 22px; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.g-late { box-shadow: inset 3px 0 0 var(--neg); }
.g-clip { border-right-style: dashed; border-right-width: 2px; }
.g-sel { outline: 2px solid var(--burgundy); outline-offset: 0; z-index: 3; }
.g-beyond { position: absolute; right: 2px; top: 7px; font-size: 10px; color: var(--ink-faint); }

.sched-detail { position: relative; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin: -4px 0 20px; }
.sd-close { position: absolute; top: 6px; right: 10px; border: 0; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-faint); }
.sd-close:hover { color: var(--ink); }
.sd-head { font-family: var(--font-display); font-size: 16px; margin-bottom: 10px; padding-right: 22px; }
.sd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px 18px; }
.sd-k { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 2px; }
.sd-v { font-size: 13px; color: var(--ink); }
.sd-input { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 13px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 4px 7px; background: var(--card); }
.sd-input:focus { outline: none; border-color: var(--burgundy); }
.sd-actions { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sd-hint { font-size: 11px; color: var(--ink-faint); font-style: italic; }

.sched-ulist { list-style: none; margin: 0; padding: 0; }
.sched-ulist li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.sched-ulist li:last-child { border-bottom: 0; }
.su-meta { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.small { font-size: 11px; }

.view-mobile .g-line-label { width: 54px; font-size: 11px; }
.view-mobile .g-track { background-size: 30px 100%; }


/* Shipped sales (Revenue & Sales) — reuses the Open Orders executive-summary chart styles */
.sh-bar { fill: var(--burgundy); }
.sh-drill { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.sh-drill-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.sh-drill-h b { color: var(--ink); }
.sh-close { font-family: var(--font-body); font-size: 12px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 3px 9px; cursor: pointer; }
.sh-cust { margin: 10px 0 4px; }
.sh-cust-h { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-strong); }
.sh-cust-n { font-weight: 700; color: var(--ink); }
.sh-cust-v { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ctable.sh-inv td { padding: 6px 10px; font-size: 12px; }
.ctable.sh-inv td.sh-items { white-space: normal; }
.sh-ref { font-weight: 600; color: var(--ink); }
.ctable.sh-inv { table-layout: fixed; }
.ctable.sh-inv td:nth-child(1) { width: 90px; }
.ctable.sh-inv td:nth-child(2) { width: 110px; }
.ctable.sh-inv td:nth-child(4) { width: 100px; }
/* Phone: the date moves under the invoice # so the items (qty @ unit price) get the width */
.sh-ref-date { display: none; font-weight: 400; font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.view-mobile .sh-ref-date { display: block; }
.view-mobile .ctable.sh-inv td:nth-child(1) { width: 72px; }
.view-mobile .ctable.sh-inv td:nth-child(2) { display: none; }
.view-mobile .ctable.sh-inv td:nth-child(4) { width: 80px; }

/* Item descriptions under part numbers in the shipped-sales and open-orders breakdowns */
.sh-line + .sh-line { margin-top: 2px; }
.sh-descr { color: var(--ink-soft); }
.exd-descr { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

/* Price update (admin) */
.pl-upload { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 10px; }
.pl-upload select { font-family: var(--font-body); font-size: 13px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); }
.pl-sum { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 6px 0 10px; }
.pl-sum b { color: var(--ink); }
.pl-filter { margin-bottom: 8px; flex-wrap: wrap; }
.pl-apply { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pl-usd { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--line-strong); }
.pl-usd-h { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

/* Quotes */
.qt-mailbox { text-align: right; }
.qt-mailbox .wo-btn { display: inline-block; text-decoration: none; }
.qt-head { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin-bottom: 12px; }
.qt-head .qt-cust { flex: 1 1 320px; } .qt-head .qt-email { flex: 1 1 280px; }
.qt-head input, .qt-head select, .qt-notes textarea { width: 100%; font-family: var(--font-body); font-size: 13px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); box-sizing: border-box; }
.qt-tablewrap { overflow: visible; }
.ctable.qt-table { table-layout: fixed; width: 100%; }
.ctable.qt-table th { background: var(--burgundy); color: #fff; text-align: center; white-space: normal; padding: 6px 4px; font-size: 9px; letter-spacing: .05em; line-height: 1.25; }
.ctable.qt-table td { vertical-align: middle; padding: 5px 4px; white-space: normal; overflow-wrap: anywhere; font-size: 12px; }
.ctable.qt-table td.qt-descr { line-height: 1.3; }
.qt-in { font-family: var(--font-body); font-size: 13px; padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); }
.qt-table .qt-in { width: 100%; box-sizing: border-box; padding: 4px 5px; font-size: 12px; min-width: 0; }
.qt-table .qt-num { text-align: right; }
.qt-table .op-rel-del { padding: 2px 4px; }
.qt-in.qt-miss { border-color: var(--warn); background: #fffaf0; }
.qt-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; margin: 10px 0; }
.qt-actions .qt-notes { flex: 1 1 360px; }
.qt-mailrow { padding: 8px 0; border-bottom: 1px solid var(--line); }
.qt-mail-h { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }

.qt-inbox { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 12px; min-height: 320px; }
.qt-inbox-list { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.qt-msg { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--card); font: inherit; font-size: 13px; cursor: pointer; }
.qt-msg:hover, .qt-msg.is-active { background: var(--burgundy-wash); }
.qt-msg-from { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-msg-at { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.qt-msg-subj, .qt-msg-prev { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-msg-prev { font-size: 12px; color: var(--ink-faint); }
.qt-unread .qt-msg-from, .qt-unread .qt-msg-subj { font-weight: 700; color: var(--burgundy); }
.qt-reader { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; max-height: 520px; overflow: auto; min-width: 0; }
.qt-r-h { margin-bottom: 8px; }
.qt-r-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0; }
.qt-r-body { white-space: pre-wrap; word-break: break-word; font-family: var(--font-body); font-size: 13px; color: var(--ink); margin: 0; }
.view-mobile .qt-inbox { grid-template-columns: 1fr; }

.qt-sig-edit { min-height: 140px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px 12px; background: var(--card); font-family: Arial, Helvetica, sans-serif; font-size: 14px; margin: 8px 0; max-width: 720px; overflow: auto; }
.qt-sig-edit:focus { outline: 2px solid var(--burgundy-tint); }

.qt-quoted { grid-column: 1 / -1; justify-self: start; font-size: 11px; font-weight: 700; color: var(--pos); background: #EEF6F1; border: 1px solid #CFE6D8; border-radius: 999px; padding: 1px 8px; margin-top: 2px; }
.qt-quoted.qt-quoted-draft { color: var(--warn); background: #FFF7EC; border-color: #F0DDBF; }
.qt-r-quoted { font-size: 13px; font-weight: 600; color: var(--pos); margin: 6px 0; }
.pl-format { margin-bottom: 14px; padding: 10px 12px; background: var(--bg-soft, rgba(0,0,0,.03)); border: 1px solid var(--line); border-radius: 6px; }
.pl-format-h { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.pl-format ul { margin: 0 0 10px; padding-left: 18px; line-height: 1.55; }
.pl-format-ex { width: auto; max-width: 100%; }

/* Quotes: pipeline, guidance, outcomes ------------------------------- */
.qt-kpis { margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 10px; }
.qt-kpis .kpi { padding: 14px 16px; box-shadow: none; }
.qt-kpis .kpi .value { font-size: 26px; }
.qt-kpis .kpi .foot .link-btn { font-size: 12px; }
.qt-sub-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 18px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.qt-breakdown { margin-top: 4px; }
.qt-why { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
button.qt-why-link { border: 0; font-family: inherit; cursor: pointer; }
button.qt-why-link:hover { text-decoration: underline; filter: brightness(0.96); }
.qs-draft    { background: #ECE9EA; color: #5E5E5E; }
.qs-sent     { background: #DEEAF4; color: #2F6FB0; }
.qs-replied  { background: #E9E3F1; color: #5B3D8A; }
.qs-po, .qs-order { background: #DDEEE4; color: #1F6B4B; }
.qs-won      { background: #2E7D5B; color: #fff; }
.qs-lost     { background: #F7E0E0; color: #9E2B2B; }
.qs-expired, .qs-expiring { background: #F6EBD8; color: #8A5A16; }
.qs-followup { background: #FFF1DB; color: #8A5A16; }
.qs-test     { background: #fff; color: #5E5E5E; border: 1px dashed #A9A4A6; }
.qt-attn-row td { vertical-align: top; }
.qt-attn-detail { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.qt-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.qt-acts button { font-size: 12px; padding: 4px 10px; }
.qt-bar { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; }
.qt-bar-track { height: 10px; background: var(--burgundy-wash); border-radius: 0 4px 4px 0; }
.qt-bar-fill { height: 100%; background: var(--burgundy); border-radius: 0 4px 4px 0; min-width: 2px; }
.qt-head .qt-valid { flex: 0 0 160px; }
.qt-outcome { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 12px; margin: 0 0 12px; background: var(--burgundy-wash); border-radius: var(--radius); font-size: 13px; }
.qt-outcome .wo-btn, .qt-outcome .op-rel-cancel { font-size: 12px; padding: 5px 12px; }
.ctable.qt-table tr.qt-g td { padding: 0 6px 7px; border-top: 0; background: transparent; }
.ctable.qt-table tr.qt-has-g td { border-bottom: 0; }
.qt-g-in { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ink-soft); line-height: 1.4; }
.qt-g-in b { color: var(--ink); font-weight: 600; }
.qt-m { font-weight: 700; padding: 0 7px; border-radius: 999px; }
.qt-m-ok { color: var(--pos); background: #EEF6F1; }
.qt-m-low { color: #fff; background: var(--neg); }
.qt-g-warn { color: var(--warn); font-weight: 600; }
.qt-total { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 18px; padding: 8px 6px; border-top: 2px solid var(--burgundy); font-size: 13px; }
.qt-total b { font-size: 15px; }
.qt-total:empty { display: none; }
.qt-filter { margin: 0 0 10px; }
.qt-dlg { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 18px 20px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.qt-dlg::backdrop { background: rgba(27,27,27,.35); }
.qt-dlg-title { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--burgundy); margin: 0 0 10px; }
.qt-dlg label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 10px 0 4px; }
.qt-dlg textarea, .qt-dlg input, .qt-dlg select { width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: 14px; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.qt-dlg textarea { min-height: 140px; line-height: 1.45; }
.qt-dlg .op-edit-row { margin-top: 14px; }
.qt-dlg-hint { font-size: 12px; color: var(--ink-soft); margin: 4px 0 0; }
.view-mobile .qt-bar { grid-template-columns: 1fr auto; }
.view-mobile .qt-bar-track { grid-column: 1 / -1; grid-row: 2; }
.neg-text { color: var(--neg); font-weight: 600; }

/* Quotes: the customer's attachments + viewer */
.qt-atts, .qt-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.qt-files { margin: 0 0 12px; }
.qt-files-h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-right: 4px; }
.qt-att { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; font: inherit; font-size: 12px; color: var(--ink); text-decoration: none; background: var(--card); border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 10px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-att:hover { border-color: var(--burgundy); color: var(--burgundy); }
.qt-att-off { cursor: default; color: var(--ink-faint); }
.qt-att-off:hover { border-color: var(--line-strong); color: var(--ink-faint); }
.qt-viewer { padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); width: min(1100px, calc(100vw - 24px)); height: min(92vh, 1000px); box-shadow: 0 10px 40px rgba(0,0,0,.25); overflow: hidden; }
.qt-viewer[open] { display: flex; flex-direction: column; }
.qt-viewer::backdrop { background: rgba(27,27,27,.5); }
.qt-viewer-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--card); }
.qt-viewer-name { font-weight: 700; color: var(--burgundy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 200px; }
.qt-viewer-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.qt-viewer-tools a, .qt-viewer-tools button { font-size: 12px; padding: 5px 12px; text-decoration: none; }
.qt-viewer-b { flex: 1 1 auto; min-height: 0; background: #525659; }
.qt-viewer-pdf { width: 100%; height: 100%; border: 0; display: block; }
.qt-viewer-img { width: 100%; height: 100%; overflow: auto; display: flex; align-items: flex-start; justify-content: center; background: #F4F2F3; }
.qt-viewer-img img { max-width: 100%; height: auto; display: block; margin: 12px auto; }
.qt-outcome[hidden], .qt-files[hidden] { display: none; }

/* Tube / pipe costing panel under a quote line */
.qt-tube-btn { display: inline-block; margin-top: 3px; font: 600 11px var(--font-body); color: var(--burgundy); background: var(--burgundy-wash); border: 1px solid var(--burgundy-tint); border-radius: var(--radius); padding: 1px 7px; cursor: pointer; }
.qt-tube-btn[aria-expanded="true"] { background: var(--burgundy); color: #fff; border-color: var(--burgundy); }
.ctable.qt-table tr.qt-tube td { padding: 0 6px 10px; border-top: 0; background: transparent; }
.qt-t { border: 1px solid var(--burgundy-tint); border-left: 3px solid var(--burgundy); border-radius: var(--radius); background: var(--burgundy-wash); padding: 10px 12px; }
.qt-t-h { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; font-size: 13px; }
.qt-t-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qt-t fieldset { margin: 0; padding: 6px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); min-width: 0; }
.qt-t legend { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); padding: 0 4px; }
.qt-t-f { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; margin: 3px 0; }
.qt-t-f > span:first-child { color: var(--ink-soft); white-space: nowrap; }
.qt-t-in { display: flex; align-items: center; gap: 4px; }
.qt-t-in .qt-in { width: 78px; padding: 3px 5px; font-size: 12px; text-align: right; }
.qt-t-in em { font-style: normal; font-size: 11px; color: var(--ink-faint); min-width: 34px; }
.qt-t-mat { flex-direction: column; align-items: stretch; }
.qt-t-mat .qt-in { width: 100%; box-sizing: border-box; font-size: 12px; padding: 3px 5px; }
.qt-t-chk { display: flex; gap: 6px; align-items: center; font-size: 12px; margin: 5px 0; }
.qt-t-note { font-size: 11px; color: var(--ink-soft); margin-top: 4px; line-height: 1.35; }
.qt-t-out { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px; font-size: 12px; color: var(--ink-soft); }
.qt-t-out b { color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .qt-t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qt-t-grid { grid-template-columns: minmax(0, 1fr); } }
.qt-t-runs { margin-top: 3px; }
.qt-t-runs summary { cursor: pointer; color: var(--burgundy); }
.qt-t-runs table { border-collapse: collapse; margin-top: 3px; font-size: 11px; }
.qt-t-runs th, .qt-t-runs td { padding: 1px 6px 1px 0; text-align: right; white-space: nowrap; }
.ctable .qt-t-runs th { background: none; color: var(--ink-soft); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; border: 0; }
.ctable .qt-t-runs td { border: 0; background: none; font-size: 11px; }
.qt-t-runs th:first-child, .qt-t-runs td:first-child { text-align: left; }

/* ── No sideways scrolling, anywhere ─────────────────────────────────
   Nothing on the dashboard scrolls left-to-right: tables wrap their text to fit the
   card (numbers stay on one line), charts and the schedule board scale to the width,
   and on phones every table with a header row stacks into one card per row, each value
   labelled with its column (nav.js adds .ct-stack and data-label). html/body clip as a backstop. */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
.tablewrap, .fc-scroll, .op-rel-scroll { overflow-x: visible; }
.tablewrap.op-freeze { overflow-x: hidden; overflow-y: auto; }
.sched-scroll { overflow: hidden; }
.fc-svg { min-width: 0; }
.op-rel-box { position: static; max-width: none; }
.ctable th { white-space: normal; }
.ctable td { white-space: normal; overflow-wrap: anywhere; }
.ctable td.num { white-space: nowrap; overflow-wrap: normal; }
.qt-reader, .qt-viewer-img, .qt-inbox-list { overflow-x: hidden; }
.qt-reader img, .qt-reader table { max-width: 100%; height: auto; }
.wo-sheet, .wo-sheet table { max-width: 100%; }

.view-mobile .ctable.ct-stack,
.view-mobile .ctable.ct-stack > tbody,
.view-mobile .ctable.ct-stack > tfoot { display: block; width: 100%; }
.view-mobile .ctable.ct-stack > thead { display: none; }
.view-mobile .ctable.ct-stack > tbody > tr,
.view-mobile .ctable.ct-stack > tfoot > tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
.view-mobile .ctable.ct-stack > tbody > tr > td,
.view-mobile .ctable.ct-stack > tfoot > tr > td {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border: 0; padding: 2px 0; min-width: 0; max-width: none; width: auto; text-align: right;
  white-space: normal; overflow-wrap: anywhere; position: static; box-shadow: none;
}
.view-mobile .ctable.ct-stack > tbody > tr > td::before,
.view-mobile .ctable.ct-stack > tfoot > tr > td::before {
  content: attr(data-label); flex: none; max-width: 45%; text-align: left;
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
}
.view-mobile .ctable.ct-stack > tbody > tr > td:not([data-label])::before,
.view-mobile .ctable.ct-stack > tbody > tr > td[data-label=""]::before,
.view-mobile .ctable.ct-stack > tfoot > tr > td:not([data-label])::before,
.view-mobile .ctable.ct-stack > tfoot > tr > td[data-label=""]::before { display: none; }
/* The row's first cell names it; a cell spanning the row (a detail panel) runs full width. */
.view-mobile .ctable.ct-stack > tbody > tr > td:first-child { font-weight: 600; color: var(--ink); }
.view-mobile .ctable.ct-stack > tbody > tr > td[colspan] { display: block; text-align: left; }
.view-mobile .ctable.ct-stack > tbody > tr > td > input,
.view-mobile .ctable.ct-stack > tbody > tr > td > select { flex: 1 1 auto; max-width: 60%; }
.view-mobile .ctable.sh-inv { table-layout: fixed; }

/* ── Board report (Finance ▸ Board report) ───────────────────────────
   A 16:9 deck. Each slide is an inline-size container and everything inside is sized in cqw,
   so the slide looks the same at any width: on the page, full screen (Present) and printed
   one slide per landscape page. On phones the slides flow as plain cards instead. */
.bd-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.bd-qb { font-size: 13px; color: var(--ink-soft); }
.bd-qb-warn { color: var(--neg); }
.bd-deck { display: flex; flex-direction: column; gap: 22px; outline: none; }
.bd-slide { container-type: inline-size; position: relative; aspect-ratio: 16 / 9; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.bd-s { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 2.8cqw 3.4cqw 1.8cqw; font-size: 1.4cqw; line-height: 1.35; color: var(--ink); font-family: var(--font-body); }
.bd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2cqw; border-bottom: 0.22cqw solid var(--burgundy); padding-bottom: 0.9cqw; }
.bd-kicker { font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; }
.bd-title { font-family: var(--font-display); font-weight: 400; font-size: 2.35em; margin: 0.1em 0 0; color: var(--ink); line-height: 1.1; }
.bd-brand { font-family: var(--font-display); font-size: 1em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--burgundy); }
.bd-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.3cqw; padding-top: 1.3cqw; overflow: hidden; }
.bd-foot { display: flex; justify-content: space-between; gap: 2cqw; font-size: 0.72em; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 0.6cqw; }
.bd-pg { white-space: nowrap; }
.bd-tiles { display: grid; gap: 1cqw; }
.bd-tiles-6 { grid-template-columns: repeat(3, 1fr); }
.bd-tiles-4 { grid-template-columns: repeat(4, 1fr); }
.bd-tile { background: var(--burgundy-wash); border-left: 0.3cqw solid var(--burgundy); padding: 0.8cqw 1cqw; min-width: 0; }
.bd-tl { font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.bd-tv { font-family: var(--font-display); font-size: 2em; line-height: 1.15; color: var(--ink); }
.bd-tiles-4 .bd-tv { font-size: 1.6em; }
.bd-ts { font-size: 0.8em; color: var(--ink-soft); }
.bd-d { white-space: nowrap; }
.bd-good { color: var(--pos); }
.bd-bad { color: var(--neg); }
.bd-points { margin: 0.4cqw 0 0; padding-left: 1.3em; font-size: 1.12em; }
.bd-points li { margin: 0 0 0.55em; }
.bd-points li::marker { color: var(--burgundy); }
.bd-notes { font-size: 1em; }
.bd-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; min-height: 0; align-items: start; }
.bd-2col-wide { grid-template-columns: 1.25fr 1fr; }
.bd-2col > div { min-width: 0; }
.bd-ct { font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--burgundy); font-weight: 600; margin: 0 0 0.4em; }
.bd-ct:not(:first-child) { margin-top: 0.9em; }
.bd-note { font-size: 0.85em; color: var(--ink-soft); margin-top: 0.5em; }
.bd-table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.bd-table th { font-size: 0.78em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; text-align: left; padding: 0 0.5em 0.35em; border-bottom: 1px solid var(--line-strong); }
.bd-table th.num { text-align: right; }
.bd-table td { padding: 0.28em 0.5em; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bd-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bd-table tr.bd-sub td { font-weight: 600; border-top: 1px solid var(--line-strong); }
.bd-table tr.bd-total td { font-weight: 700; border-top: 2px solid var(--ink); background: var(--burgundy-wash); }
.bd-table tr.bd-pct td { font-style: italic; color: var(--ink-soft); }
.bd-table td.muted { color: var(--ink-soft); }
.bd-tight { font-size: 0.85em; }
.bd-tight td { padding: 0.2em 0.5em; }
.bd-chart { display: block; width: 100%; height: auto; overflow: visible; }
.bd-grid { stroke: var(--line); stroke-width: 1; }
.bd-ax { fill: var(--ink-soft); font-size: 11px; font-family: var(--font-body); }
.bd-cur { fill: var(--burgundy); }
.bd-py { fill: #D9D3D6; }
.bd-neg { fill: var(--neg); }
.bd-line { fill: none; stroke: var(--burgundy); stroke-width: 2.5; stroke-linejoin: round; }
.bd-dot { fill: var(--burgundy); stroke: #fff; stroke-width: 2; }
.bd-legend { display: flex; gap: 1.4em; font-size: 0.78em; color: var(--ink-soft); margin-top: 0.3em; }
.bd-legend i { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 2px; margin-right: 0.4em; vertical-align: -0.1em; }
.bd-k-cur { background: var(--burgundy); }
.bd-k-py { background: #D9D3D6; }
.bd-hb { display: flex; flex-direction: column; gap: 0.45em; }
.bd-hb-row { display: grid; grid-template-columns: minmax(0, 14em) 1fr auto; align-items: center; gap: 0.7em; font-size: 0.92em; }
.bd-hb-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-hb-bar { height: 0.9em; background: var(--burgundy-wash); border-radius: 2px; overflow: hidden; }
.bd-hb-bar i { display: block; height: 100%; background: var(--burgundy); border-radius: 2px; }
.bd-hb-warn .bd-hb-bar i { background: var(--neg); }
.bd-hb-v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; min-width: 4.5em; }
.bd-banks { display: flex; flex-wrap: wrap; gap: 0.4em 1.4em; font-size: 0.82em; color: var(--ink-soft); margin-top: 0.5em; }
.bd-banks b { color: var(--ink); }
.bd-missing { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 1.6cqw; color: var(--ink-soft); font-size: 1.05em; }
.bd-missing b { color: var(--ink); }
.bd-cover { background: var(--burgundy); border-color: var(--burgundy); }
.bd-cover .bd-s { color: #fff; justify-content: center; padding: 5cqw 6cqw; }
.bd-cover-brand { font-family: var(--font-display); font-size: 1.4em; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.bd-cover-title { font-family: var(--font-display); font-weight: 400; font-size: 5.2em; line-height: 1; margin: 0.25em 0 0.2em; }
.bd-cover-period { font-size: 1.8em; border-top: 0.15cqw solid rgba(255, 255, 255, 0.5); padding-top: 0.5em; display: inline-block; }
.bd-cover-meta { margin-top: 2.2em; font-size: 1em; opacity: 0.8; line-height: 1.6; }
.bd-cover .bd-pg { position: absolute; right: 3.4cqw; bottom: 1.8cqw; font-size: 0.72em; opacity: 0.7; }
.bd-nav { position: fixed; right: 18px; bottom: 16px; z-index: 1001; display: flex; align-items: center; gap: 8px; background: rgba(27, 27, 27, 0.75); color: #fff; border-radius: 999px; padding: 6px 10px; font-size: 13px; }
.bd-nav button { font: inherit; color: #fff; background: none; border: 0; cursor: pointer; padding: 2px 8px; font-size: 16px; }
.bd-nav button[data-exit] { font-size: 12px; border-left: 1px solid rgba(255, 255, 255, 0.3); }
.bd-nav[hidden] { display: none; }

/* Present: one slide, centred, as large as the screen allows. */
html.bd-presenting, html.bd-presenting body { overflow: hidden; }
html.bd-presenting .bd-deck { position: fixed; inset: 0; z-index: 1000; background: #111; display: flex; align-items: center; justify-content: center; gap: 0; }
html.bd-presenting .bd-slide { display: none; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; border: 0; border-radius: 0; box-shadow: none; }
html.bd-presenting .bd-slide.bd-on { display: block; }
html.bd-presenting .bd-s { position: absolute; font-size: 1.4cqw; padding: 2.8cqw 3.4cqw 1.8cqw; }
html.bd-presenting .bd-cover .bd-s { padding: 5cqw 6cqw; }
html.bd-presenting .bd-body { overflow: hidden; gap: 1.3cqw; padding-top: 1.3cqw; }
html.bd-presenting .bd-tiles-6 { grid-template-columns: repeat(3, 1fr); }
html.bd-presenting .bd-tiles-4 { grid-template-columns: repeat(4, 1fr); }
html.bd-presenting .bd-2col { grid-template-columns: 1fr 1fr; }
html.bd-presenting .bd-2col-wide { grid-template-columns: 1.25fr 1fr; }
html.bd-presenting .bd-brand { display: block; }

/* Phones: slides flow as cards. */
.view-mobile .bd-slide { aspect-ratio: auto; }
.view-mobile .bd-s { position: static; font-size: 13px; padding: 16px; }
.view-mobile .bd-cover .bd-s { padding: 28px 18px; }
.view-mobile .bd-tiles-6, .view-mobile .bd-tiles-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.view-mobile .bd-2col, .view-mobile .bd-2col-wide { grid-template-columns: 1fr; gap: 16px; }
.view-mobile .bd-body { overflow: visible; gap: 14px; padding-top: 12px; }
.view-mobile .bd-tile { border-left-width: 3px; padding: 8px 10px; }
.view-mobile .bd-head { border-bottom-width: 2px; padding-bottom: 8px; }
.view-mobile .bd-brand { display: none; }

/* ── Board deck motion ────────────────────────────────────────────────── */
/* board.js marks a slide .bd-wait when rendered (content parked at its start state) and
   swaps it to .bd-live when it comes on screen: the slide eases in, then its content builds
   in order — heading, tiles (figures counting up), tables and bullets row by row, bars
   growing from the baseline, the cash line drawing itself. Children carry --i (set by
   board.js) for the stagger. Screen only, and only when motion is welcome: print and
   reduced-motion viewers get the finished slide straight away. */
@media screen and (prefers-reduced-motion: no-preference) {
  .bd-deck { --bd-ease: cubic-bezier(0.22, 1, 0.36, 1); }
  /* Start state */
  .bd-wait .bd-head, .bd-wait .bd-foot, .bd-wait .bd-tile, .bd-wait .bd-points > li, .bd-wait .bd-table tbody tr,
  .bd-wait .bd-ct, .bd-wait .bd-note, .bd-wait .bd-legend, .bd-wait .bd-banks, .bd-wait .bd-missing, .bd-wait .bd-chart,
  .bd-wait .bd-dot, .bd-wait .bd-cover-in > * { opacity: 0; }
  .bd-wait .bd-hb-bar i { width: 0 !important; }
  .bd-wait .bd-cur, .bd-wait .bd-py, .bd-wait .bd-neg { transform: scaleY(0); }
  .bd-wait .bd-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
  /* Slide transition (Present mode only; the scrolling view just builds the content in) */
  html.bd-presenting .bd-slide.bd-live { animation: bd-slide-fwd 0.45s var(--bd-ease) both; }
  html.bd-presenting .bd-deck[data-dir="back"] .bd-slide.bd-live { animation-name: bd-slide-back; }
  /* Build-in */
  .bd-live .bd-head { animation: bd-fade 0.5s var(--bd-ease) 0.1s both; }
  .bd-live .bd-tile { animation: bd-rise 0.55s var(--bd-ease) both; animation-delay: calc(0.25s + var(--i, 0) * 0.07s); }
  .bd-live .bd-tv { font-variant-numeric: tabular-nums; }
  .bd-live .bd-ct, .bd-live .bd-chart, .bd-live .bd-legend, .bd-live .bd-missing { animation: bd-fade 0.5s var(--bd-ease) 0.35s both; }
  .bd-live .bd-note, .bd-live .bd-banks, .bd-live .bd-foot { animation: bd-fade 0.5s var(--bd-ease) 0.6s both; }
  .bd-live .bd-table tbody tr { animation: bd-fade 0.4s var(--bd-ease) both; animation-delay: calc(0.4s + var(--i, 0) * 0.045s); }
  .bd-live .bd-points > li { animation: bd-rise-l 0.5s var(--bd-ease) both; animation-delay: calc(0.5s + var(--i, 0) * 0.09s); }
  .bd-live .bd-hb-bar i { animation: bd-grow-w 0.7s var(--bd-ease) both; animation-delay: calc(0.5s + var(--i, 0) * 0.08s); }
  .bd-live .bd-cur, .bd-live .bd-py, .bd-live .bd-neg { transform-box: fill-box; transform-origin: 50% 100%; animation: bd-grow-y 0.55s var(--bd-ease) both; animation-delay: calc(0.45s + var(--i, 0) * 0.04s); }
  .bd-live .bd-neg { transform-origin: 50% 0; }
  .bd-live .bd-line { stroke-dasharray: 1; animation: bd-draw 1.1s ease-out 0.5s both; }
  .bd-live .bd-dot { animation: bd-fade 0.3s ease-out both; animation-delay: calc(0.6s + var(--i, 0) * 0.07s); }
  .bd-live .bd-cover-in > * { animation: bd-rise 0.7s var(--bd-ease) both; animation-delay: calc(0.15s + var(--i, 0) * 0.18s); }
  /* Each keyframe set states only where it starts; it ends at the element's own styles. */
  @keyframes bd-slide-fwd { from { opacity: 0; transform: translateX(2.5%); } }
  @keyframes bd-slide-back { from { opacity: 0; transform: translateX(-2.5%); } }
  @keyframes bd-fade { from { opacity: 0; } }
  @keyframes bd-rise { from { opacity: 0; transform: translateY(0.6em); } }
  @keyframes bd-rise-l { from { opacity: 0; transform: translateX(-0.5em); } }
  @keyframes bd-grow-w { from { width: 0; } }
  @keyframes bd-grow-y { from { transform: scaleY(0); } }
  @keyframes bd-draw { from { stroke-dashoffset: 1; } }
}

@media print {
  .accent-bar, .topbar, .board-page .page-head, .bd-toolbar, .bd-nav { display: none !important; }
  .board-page { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .bd-deck { gap: 0; }
  .bd-slide, .view-mobile .bd-slide { width: 13.333in; height: 7.5in; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bd-s, .view-mobile .bd-s { position: absolute; font-size: 1.4cqw; padding: 2.8cqw 3.4cqw 1.8cqw; }
  .view-mobile .bd-cover .bd-s { padding: 5cqw 6cqw; }
  .view-mobile .bd-body { overflow: hidden; gap: 1.3cqw; padding-top: 1.3cqw; }
  .view-mobile .bd-tiles-6 { grid-template-columns: repeat(3, 1fr); }
  .view-mobile .bd-tiles-4 { grid-template-columns: repeat(4, 1fr); }
  .view-mobile .bd-2col { grid-template-columns: 1fr 1fr; }
  .view-mobile .bd-2col-wide { grid-template-columns: 1.25fr 1fr; }
  .view-mobile .bd-brand { display: block; }
}

.exd-prom { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
/* A line's delay record — full width under the line. */
.exd-track { flex: 1 0 100%; margin: 1px 0 2px; padding: 4px 0 3px 10px; border-left: 2px solid var(--line); font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.exd-tr-h { font-weight: 600; color: var(--ink); }
.exd-tr-flag { color: var(--chart-pastdue); }
.exd-tr-list { list-style: none; margin: 2px 0 0; padding: 0; }
.exd-tr-list li { padding: 1px 0; }
.exd-tr-list li.is-flag { color: var(--chart-pastdue); }
.exd-tr-d { font-variant-numeric: tabular-nums; font-weight: 600; }
.exd-tr-why { color: var(--ink); font-style: italic; }
.exd-tr-list li.is-flag .exd-tr-why { color: inherit; }
.exd-tr-meta { display: block; padding-left: 12px; }
.exd-tr-now { margin-top: 1px; }