/* ════════════════════════════════════════════════════════════════════════════
   theme.css — the SaaS design system (phase 1, 2026-09-29).

   Loaded AFTER styles.css. Two layers:
     1. :root tokens, prefixed --ui-*. Nothing outside this file reads them yet,
        so adding them changes no other panel.
     2. The pilot: the delivery control tower (#delivery-view, the dossier drawer
        and its hover). Scoped to .dl-view / .dl-drawer / .dl-pop, so meetings,
        kanban, GOTS, HR and the Wacoal panel look exactly as before.

   The tower's own CSS in styles.css is written against the app's legacy tokens
   (--ink*, --rule*, --surface*, --wc-*). Inside the scope those tokens are
   re-pointed at the --ui-* set, which restyles most of the tower at once; the
   component rules below then change structure (cards, tabs, pills, tables).

   CSP: this is a file, loaded with <link>; no inline <style>, no style="".
   No dark mode: the app has none today (DESIGN.md §non-goals).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* type — one family in three scripts: IBM Plex Sans (Latin), Plex Sans JP, Plex Sans Thai */
  --ui-font: 'IBM Plex Sans', 'IBM Plex Sans JP', 'IBM Plex Sans Thai', 'Hiragino Sans', 'Yu Gothic UI', 'Noto Sans JP', 'Noto Sans Thai', system-ui, sans-serif;
  --ui-fs-xs: 12px;   /* captions, table heads, badges */
  --ui-fs-sm: 13px;   /* body, table cells, controls */
  --ui-fs-md: 14px;   /* entity names, emphasised body */
  --ui-fs-lg: 16px;   /* card titles */
  --ui-fs-xl: 22px;   /* page title */
  --ui-fs-kpi: 26px;  /* KPI tile figure */
  --ui-fs-hero: 34px; /* the one lead figure of a view */

  /* colour — neutral canvas, white cards, one accent (藍, indigo: the dye the mills upstream of us work in) */
  --ui-canvas: #F4F5F7;
  --ui-surface: #FFFFFF;
  --ui-sunken: #F8F9FB;       /* table head, quiet fills */
  --ui-hover: #F1F3F7;        /* row / control hover */
  --ui-border: #E2E5EA;
  --ui-border-strong: #CBD0D8;
  --ui-text: #151A23;         /* 16.9:1 on white */
  --ui-text-2: #3D4553;       /* 10.0:1 */
  --ui-text-3: #5A6270;       /*  6.3:1 */
  --ui-text-4: #6B7280;       /*  4.8:1 — the lightest text colour allowed */
  --ui-accent: #2B4C9B;       /*  8.0:1 */
  --ui-accent-hover: #213C7C;
  --ui-accent-soft: #EDF1FA;
  --ui-accent-line: #BCC9EA;
  --ui-focus: 0 0 0 2px var(--ui-surface), 0 0 0 4px #5B7BD0;

  /* status — soft pill fill, AA text, a saturated dot for the mark */
  --ui-late: #B42318;     --ui-late-bg: #FEF3F2;  --ui-late-dot: #D92D20;  --ui-late-line: #FECDCA;
  --ui-risk: #B54708;     --ui-risk-bg: #FFF7E6;  --ui-risk-dot: #F79009;  --ui-risk-line: #FEDF89;
  --ui-ok: #067647;       --ui-ok-bg: #ECFDF3;    --ui-ok-dot: #17B26A;    --ui-ok-line: #ABEFC6;
  --ui-unknown: #475467;  --ui-unknown-bg: #F2F4F7; --ui-unknown-dot: #98A2B3; --ui-unknown-line: #E4E7EC;

  /* chart series (dataviz reference palette slots 1–3, validated as a set) */
  --ui-series-plan: #8A94A6;  /* the plan: a neutral, it is the yardstick */
  --ui-series-1: #2A78D6;     /* sewn (SEWING REPORT) */
  --ui-series-2: #EB6834;     /* LINE PLAN's own actual */
  --ui-grid: #ECEEF2;

  /* space, radius, depth */
  --ui-sp-1: 4px; --ui-sp-2: 8px; --ui-sp-3: 12px; --ui-sp-4: 16px; --ui-sp-5: 20px; --ui-sp-6: 24px; --ui-sp-8: 32px; --ui-sp-10: 40px;
  --ui-r-sm: 6px; --ui-r: 8px; --ui-r-lg: 12px; --ui-r-pill: 999px;
  --ui-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .04);
  --ui-shadow-pop: 0 12px 32px -8px rgba(16, 24, 40, .22), 0 2px 6px rgba(16, 24, 40, .06);
  --ui-shadow-drawer: -16px 0 48px -16px rgba(16, 24, 40, .22);
  --ui-row-h: 44px;
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 2 (2026-09-29) — the global shell: base tokens, header, module menu,
   settings, login, the shared .btn / .form-input primitives.
   The legacy tokens are re-pointed at :root, so every module inherits the new
   type, greys, accent and radius at once; structure per module follows in the
   later phases (Wacoal, GOTS, meetings / kanban / HR …).
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: var(--ui-surface);
  --surface: var(--ui-surface);
  --surface-2: var(--ui-sunken);
  --ink: var(--ui-text);
  --ink-2: var(--ui-text-2);
  --ink-3: var(--ui-text-3);
  --ink-4: var(--ui-text-4);
  --rule: var(--ui-border);
  --rule-dark: var(--ui-border-strong);
  --accent: var(--ui-accent);
  --accent-bg: var(--ui-accent-soft);
  --accent-hover: var(--ui-accent-hover);
  --danger: var(--ui-late);
  --danger-bg: var(--ui-late-bg);
  --success: var(--ui-ok);
  --success-bg: var(--ui-ok-bg);
  --mark-fg: #FFFFFF;
  --font-display: var(--ui-font);
  --font-mono: var(--ui-font);
  --font-jp: var(--ui-font);
  --radius: var(--ui-r-sm);
  --header-h: 56px;
}
html { font-size: 14px; }
body { font-family: var(--ui-font); color: var(--ui-text); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid #5B7BD0; outline-offset: 2px; }

/* header: a white bar with a hairline, the product name, nav as quiet pills; the open module is indigo */
.dashboard-header { background: var(--ui-surface); color: var(--ui-text); border-bottom: 1px solid var(--ui-border); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); backdrop-filter: none; }
.dashboard-header .header-content { padding: 0 var(--ui-sp-6); }
.dashboard-header .header-brand { font-family: var(--ui-font); font-size: 18px; font-weight: 600; letter-spacing: .22em; color: var(--ui-text); }
.dashboard-header .header-divider { background: var(--ui-border); }
.dashboard-header .header-title { font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.dashboard-header .sync-status { font-family: var(--ui-font); font-size: var(--ui-fs-xs); letter-spacing: 0; color: var(--ui-text-4); }
.dashboard-header .header-nav { gap: 2px; padding-right: var(--ui-sp-2); margin-right: var(--ui-sp-1); border-right: 1px solid var(--ui-border); }
.header-nav-btn { height: 36px; gap: 7px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--ui-r); font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 500; letter-spacing: 0; color: var(--ui-text-2); }
.header-nav-btn svg { opacity: .8; }
.header-nav-btn:hover { color: var(--ui-text); background: var(--ui-hover); }
.header-nav-btn:focus-visible { outline: 2px solid #5B7BD0; outline-offset: 1px; }
.header-nav-btn[aria-pressed="true"], .header-nav-btn[aria-expanded="true"] { color: var(--ui-accent); background: var(--ui-accent-soft); border-color: transparent; }
.header-nav-btn[aria-pressed="true"] svg { opacity: 1; }
.header-nav-btn .my-tasks-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--ui-r-pill); background: var(--ui-unknown-bg); color: var(--ui-text-2); font-size: 11px; font-weight: 600; }
.header-nav-btn[data-urgent="true"] .my-tasks-count { background: var(--ui-late-dot); color: #FFFFFF; }
.header-nav-btn[data-notif="true"]::after { background: var(--ui-late-dot); box-shadow: 0 0 0 2px var(--ui-surface); }
.dashboard-header .btn-outline { height: 32px; color: var(--ui-text-2); background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); letter-spacing: 0; font-size: var(--ui-fs-sm); }
.dashboard-header .btn-outline:hover { color: var(--ui-text); background: var(--ui-hover); border-color: var(--ui-border-strong); }
.dashboard-header .btn-ghost { color: var(--ui-text-3); border-radius: var(--ui-r); letter-spacing: 0; font-size: var(--ui-fs-sm); }
.dashboard-header .btn-ghost:hover { color: var(--ui-text); background: var(--ui-hover); }

/* the 管理 module menu and the settings panel: white popovers */
.nav-modules-menu { top: calc(100% + 8px); min-width: 220px; padding: 6px; gap: 2px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-pop); }
.nav-modules-menu .header-nav-btn { height: 36px; color: var(--ui-text-2); border-radius: var(--ui-r); }
.nav-modules-menu .header-nav-btn:hover { background: var(--ui-hover); color: var(--ui-text); }
.nav-modules-caret { font-size: 10px; opacity: .6; }
.settings-panel { width: 280px; border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-pop); overflow: hidden; }
.settings-panel-user { font-size: var(--ui-fs-sm); letter-spacing: 0; color: var(--ui-text-2); background: var(--ui-sunken); }
.settings-panel-label { font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.settings-panel .settings-logout, .settings-panel #tour-replay-btn { border-radius: var(--ui-r); border-color: var(--ui-border-strong); }
.lang-toggle-btn { border-radius: var(--ui-r-sm); font-family: var(--ui-font); letter-spacing: 0; }
.lang-toggle-btn[aria-pressed="true"] { color: var(--ui-accent); background: var(--ui-accent-soft); }

/* shared primitives every module uses */
.btn { border-radius: var(--ui-r); font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; }
.btn:hover { transform: none; box-shadow: none; }
.btn-primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #FFFFFF; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.btn-primary:hover:not(:disabled) { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
.btn-outline { background: var(--ui-surface); color: var(--ui-text-2); border: 1px solid var(--ui-border-strong); }
.btn-outline:hover { background: var(--ui-hover); color: var(--ui-text); border-color: var(--ui-border-strong); }
.btn-ghost:hover { background: var(--ui-hover); border-color: transparent; }
.btn-sm { font-size: var(--ui-fs-xs); }
.link-btn { font-family: var(--ui-font); font-size: var(--ui-fs-sm); letter-spacing: 0; color: var(--ui-accent); }
.form-label { font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.form-input { padding: 0 var(--ui-sp-3); height: 40px; background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); }
.form-input:focus { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.otp-box { border-radius: var(--ui-r); font-family: var(--ui-font); }
.otp-box:focus, .otp-box.filled { border-color: var(--ui-accent); }

/* login: a card on the canvas */
#login-view { background: var(--ui-canvas); }
.login-container { max-width: 400px; }
.login-card { gap: var(--ui-sp-6); padding: var(--ui-sp-8); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card); }
.login-logo { padding-bottom: var(--ui-sp-5); }
.login-brand { font-family: var(--ui-font); font-size: 30px; font-weight: 600; letter-spacing: .22em; }
.login-subtitle { font-family: var(--ui-font); font-size: var(--ui-fs-sm); letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.step-back { font-family: var(--ui-font); letter-spacing: 0; font-size: var(--ui-fs-sm); }
.login-error { border-radius: var(--ui-r-sm); border-left-width: 3px; }

@media (max-width: 768px) {
  .dashboard-header .header-content { padding: 0 var(--ui-sp-3); gap: var(--ui-sp-2); }
  .dashboard-header .header-brand { font-size: 14px; letter-spacing: .08em; }
  .dashboard-header .header-right, .dashboard-header .header-nav { gap: 0; }
  .dashboard-header .header-nav { padding-right: 2px; margin-right: 2px; }
  .header-nav-btn { padding: 0 7px; gap: 4px; }
}

/* ── 1. the scope: legacy tokens re-pointed ─────────────────────────────── */
.dl-view, .dl-drawer, .dl-pop {
  /* the neutrals, fonts and radius come from :root since phase 2; only what differs in the tower stays here */
  --surface-2: var(--ui-hover); --accent-bg: var(--ui-unknown-bg);
  --wc-slipping: var(--ui-late); --wc-at_risk: var(--ui-risk); --wc-on_plan: var(--ui-ok); --wc-stale: var(--ui-text-4); --wc-grid: var(--ui-grid);
  --dl-fs-eyebrow: var(--ui-fs-xs); --dl-fs-meta: var(--ui-fs-xs); --dl-fs-body: var(--ui-fs-sm); --dl-fs-name: var(--ui-fs-md);
  --dl-fs-head: var(--ui-fs-lg); --dl-fs-fig: var(--ui-fs-kpi); --dl-fs-headline: var(--ui-fs-hero);
  --gots-fs-meta: var(--ui-fs-xs);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
}
.dl-view .num, .dl-view .mono, .dl-drawer .num, .dl-drawer .mono, .dl-view .dl-fig, .dl-drawer .dl-fig { font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ── 2. page frame: canvas, header, alerts ──────────────────────────────── */
.dl-view.exec-view { background: var(--ui-canvas); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); overflow: clip; }
.dl-view > .exec-header { align-items: center; padding: var(--ui-sp-6) var(--ui-sp-8) var(--ui-sp-4); background: var(--ui-surface); border-bottom: 0; }
.dl-view .exec-eyebrow { display: none; }
.dl-view .exec-header-left { gap: 6px; }
.dl-view .exec-title { font-family: var(--ui-font); font-size: var(--ui-fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ui-text); }
.dl-view .exec-meta { font-family: var(--ui-font); font-size: var(--ui-fs-xs); letter-spacing: 0; color: var(--ui-text-3); }
.dl-view .exec-btn-link { height: 34px; padding: 0 var(--ui-sp-3); gap: 6px; background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 500; letter-spacing: 0; color: var(--ui-text-2); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.dl-view .exec-btn-link:hover { background: var(--ui-hover); color: var(--ui-text); }

.dl-view :focus-visible, .dl-drawer :focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--ui-focus); border-radius: var(--ui-r-sm); }
.dl-view tr:focus-visible { box-shadow: inset 0 0 0 2px #5B7BD0; }

/* problem strip → alert banners */
.dl-view .dl-problems { gap: var(--ui-sp-2); padding: var(--ui-sp-4) var(--ui-sp-8) 0; background: var(--ui-surface); }
.dl-view .dl-problem { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ui-sp-2); padding: 10px var(--ui-sp-4) 10px 38px; position: relative; background: var(--ui-risk-bg); border: 1px solid var(--ui-risk-line); border-radius: var(--ui-r); font-size: var(--ui-fs-sm); color: var(--ui-text); }
.dl-view .dl-problem::before { content: '!'; position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--ui-risk-dot); color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
.dl-view .dl-problem.is-quiet { background: var(--ui-sunken); border: 1px solid var(--ui-border); }
.dl-view .dl-problem.is-quiet::before { content: 'i'; background: var(--ui-text-4); font-style: italic; font-family: Georgia, serif; }
.dl-view .dl-problem.is-fail { background: var(--ui-late-bg); border-color: var(--ui-late-line); }
.dl-view .dl-problem.is-fail::before { background: var(--ui-late-dot); }
.dl-view .dl-problem-run { margin-left: 0; font-size: var(--ui-fs-xs); color: var(--ui-text-3); }

/* ── 3. navigation: customer switcher (where) + tabs (what) + breadcrumb ── */
.dl-view .dl-switch { gap: 6px; padding: var(--ui-sp-4) var(--ui-sp-8) var(--ui-sp-3); background: var(--ui-surface); }
.dl-view .dl-chip { height: 32px; gap: 8px; padding: 0 var(--ui-sp-3); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-pill); font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-text-2); }
.dl-view .dl-chip:hover { background: var(--ui-hover); border-color: var(--ui-border-strong); color: var(--ui-text); }
.dl-view .dl-chip.is-on { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent); }
.dl-view .dl-chip.is-on .dl-swatch { box-shadow: none; }
.dl-view .dl-chip.is-on .dl-chip-n { color: var(--ui-accent); }
.dl-view .dl-chip-n { font-weight: 400; color: var(--ui-text-4); font-variant-numeric: tabular-nums; }
.dl-view .dl-swatch, .dl-drawer .dl-swatch { width: 8px; height: 8px; border-radius: 50%; }

.dl-view .exec-tabs.dl-tabs { gap: var(--ui-sp-1); padding: 0 var(--ui-sp-8); background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
.dl-view .exec-tab.dl-tab { padding: 12px var(--ui-sp-3) 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; background: transparent; font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.dl-view .exec-tab.dl-tab:hover { background: transparent; color: var(--ui-text); }
.dl-view .exec-tab.dl-tab.is-active { background: transparent; color: var(--ui-accent); border-bottom-color: var(--ui-accent); font-weight: 600; }
.dl-view .exec-tab.dl-tab.is-unavailable { color: var(--ui-text-4); }
.dl-view .exec-tab.dl-tab.is-unavailable > span:first-child { text-decoration: line-through dotted var(--ui-border-strong); }
.dl-view .dl-tab-badge { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: var(--ui-r-pill); background: var(--ui-unknown-bg); font-size: 11px; font-weight: 500; line-height: 18px; text-align: center; color: var(--ui-text-3); font-variant-numeric: tabular-nums; }
.dl-view .exec-tab.dl-tab.is-active .dl-tab-badge { background: var(--ui-accent-soft); color: var(--ui-accent); }

.dl-view .dl-crumbs { padding: var(--ui-sp-5) var(--ui-sp-8) 0; }
.dl-view .dl-crumbs.dl-crumbs--drawer, .dl-drawer .dl-crumbs.dl-crumbs--drawer { padding: 0; }
.dl-view .dl-crumbs-list, .dl-drawer .dl-crumbs-list { font-family: var(--ui-font); font-size: var(--ui-fs-xs); letter-spacing: 0; text-transform: none; color: var(--ui-text-4); }
.dl-view .dl-crumb + .dl-crumb::before, .dl-drawer .dl-crumb + .dl-crumb::before { content: '/'; padding: 0 8px; color: var(--ui-border-strong); }
.dl-view .dl-crumb-link, .dl-drawer .dl-crumb-link { border-bottom: 0; color: var(--ui-text-3); }
.dl-view .dl-crumb-link:hover, .dl-drawer .dl-crumb-link:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.dl-view .dl-crumb-here, .dl-drawer .dl-crumb-here { font-weight: 500; color: var(--ui-text); }

/* ── 4. the panel: sections become cards on the canvas ─────────────────── */
.dl-view .dl-panel { padding: var(--ui-sp-5) var(--ui-sp-8) var(--ui-sp-10); }
.dl-view .dl-board { gap: var(--ui-sp-5); }
.dl-view .dl-board > .dl-sec, .dl-view .dl-board > .dl-top, .dl-view .dl-cols > .dl-col,
.dl-view .dl-panel > .dl-sec, .dl-view .dl-panel > .dl-table-wrap, .dl-view .dl-board > .dl-asides {
  padding: var(--ui-sp-5) var(--ui-sp-6); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card);
}
.dl-view .dl-cols { gap: var(--ui-sp-5); }
.dl-view .dl-cols > .dl-col { padding-bottom: var(--ui-sp-3); }
.dl-view .dl-sec { gap: var(--ui-sp-4); }
.dl-view .dl-sec-head { align-items: flex-start; }
.dl-view .dl-h, .dl-drawer .dl-h { font-size: var(--ui-fs-lg); font-weight: 600; letter-spacing: -.005em; line-height: 1.35; color: var(--ui-text); }
.dl-view .dl-lede, .dl-drawer .dl-lede { font-size: var(--ui-fs-sm); color: var(--ui-text-3); }
.dl-view .dl-sec-titles { gap: 4px; }
.dl-view .dl-eyebrow, .dl-drawer .dl-eyebrow { font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.dl-view .dl-src, .dl-drawer .dl-src { font-size: var(--ui-fs-xs); color: var(--ui-text-4); }
.dl-view .dl-empty { padding: var(--ui-sp-6); background: var(--ui-sunken); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-r); font-size: var(--ui-fs-sm); color: var(--ui-text-3); text-align: center; }
.dl-view .dl-note { padding: var(--ui-sp-2) var(--ui-sp-3); background: var(--ui-sunken); border: 0; border-radius: var(--ui-r-sm); font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.dl-view .dl-tab-lede { margin-bottom: var(--ui-sp-3); }
.dl-view .dl-more, .dl-drawer .dl-more { border-bottom: 0; font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-accent); }
.dl-view .dl-more:hover, .dl-drawer .dl-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-view .dl-aside-summary { justify-self: start; padding: 6px var(--ui-sp-3); margin-top: 0; background: var(--ui-surface); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-r); color: var(--ui-text-2); font-weight: 400; }
.dl-view .dl-aside-summary:hover { border-style: solid; text-decoration: none; background: var(--ui-hover); }
.dl-view .dl-linkbtn, .dl-drawer .dl-linkbtn { height: 34px; padding: 0 var(--ui-sp-4); background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); font-weight: 500; color: var(--ui-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.dl-view .dl-linkbtn:hover, .dl-drawer .dl-linkbtn:hover { background: var(--ui-hover); color: var(--ui-text); }

/* ── 5. KPI: the lead figures and the stat tiles ────────────────────────── */
.dl-view .dl-top { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--ui-sp-6); }
.dl-view .dl-heads { gap: var(--ui-sp-3); }
.dl-view .dl-headline { gap: 4px; padding: var(--ui-sp-4); background: var(--ui-sunken); border: 1px solid var(--ui-border); border-radius: var(--ui-r); justify-items: stretch; }
.dl-view .dl-fig--headline { font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; border-bottom: 0; }
.dl-view .dl-fig--headline.is-late { color: var(--ui-late); }
.dl-view .dl-fig { border-bottom: 0; }
.dl-view .dl-fig:hover { color: var(--ui-accent); border-bottom: 0; }
.dl-view .dl-asof { font-size: var(--ui-fs-xs); line-height: 1.6; color: var(--ui-text-4); }

.dl-view .dl-tiles { gap: var(--ui-sp-3); }
.dl-view .dl-tile { gap: 4px; padding: var(--ui-sp-4); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r); }
.dl-view .dl-tile.is-hollow { border-top-style: solid; background: var(--ui-sunken); border-style: dashed; }
.dl-view .dl-tile-n { font-family: var(--ui-font); font-size: var(--ui-fs-kpi); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; font-variant-numeric: normal; }
.dl-view .dl-tile-u { font-size: var(--ui-fs-sm); color: var(--ui-text-3); }
.dl-view .dl-tile-sub { font-size: var(--ui-fs-xs); line-height: 1.5; color: var(--ui-text-3); }
.dl-view button.dl-tile-v:hover { border-bottom-color: transparent; }
.dl-view button.dl-tile-v:hover .dl-tile-n { color: var(--ui-accent); }
.dl-view .dl-figs { gap: var(--ui-sp-3); }
.dl-view .dl-figcard { padding: var(--ui-sp-4); border: 1px solid var(--ui-border); border-radius: var(--ui-r); }

/* ── 6. the customer rail (overview) ────────────────────────────────────── */
.dl-view .dl-rail-row { min-height: 44px; border-top: 1px solid var(--ui-border); column-gap: var(--ui-sp-4); }
.dl-view .dl-rail-row:not(.dl-rail-head):hover { background: var(--ui-hover); }
.dl-view .dl-rail-head { min-height: 32px; border-top: 0; }
.dl-view .dl-rail-head .dl-eyebrow { font-size: var(--ui-fs-xs); color: var(--ui-text-4); }
.dl-view .dl-rail-name { font-size: var(--ui-fs-md); font-weight: 500; }
.dl-view .dl-rail-name:hover { color: var(--ui-accent); }
.dl-view .dl-rail-row .dl-fig { font-size: var(--ui-fs-md); padding-right: var(--ui-sp-2); }
.dl-view .dl-rail-age { display: inline-block; padding: 0 6px; border-radius: var(--ui-r-pill); background: var(--ui-unknown-bg); font-size: 11px; line-height: 18px; text-decoration: none; color: var(--ui-text-3); }
.dl-view .dl-rail-open { fill-opacity: .55; }

/* ── 7. status: pills with a dot, never colour alone (the word is inside) ─ */
.dl-view .dl-pill, .dl-drawer .dl-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 7px;
  border: 1px solid var(--ui-unknown-line); border-left-width: 1px; border-radius: var(--ui-r-pill);
  background: var(--ui-unknown-bg); font-size: var(--ui-fs-xs); font-weight: 500; line-height: 20px; color: var(--ui-unknown);
}
.dl-view .dl-pill::before, .dl-drawer .dl-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-unknown-dot); }
.dl-view .dl-pill.dl-lv-slipping, .dl-drawer .dl-pill.dl-lv-slipping { background: var(--ui-late-bg); border-color: var(--ui-late-line); color: var(--ui-late); }
.dl-view .dl-pill.dl-lv-slipping::before, .dl-drawer .dl-pill.dl-lv-slipping::before { background: var(--ui-late-dot); }
.dl-view .dl-pill.dl-lv-at_risk, .dl-drawer .dl-pill.dl-lv-at_risk { background: var(--ui-risk-bg); border-color: var(--ui-risk-line); color: var(--ui-risk); }
.dl-view .dl-pill.dl-lv-at_risk::before, .dl-drawer .dl-pill.dl-lv-at_risk::before { background: var(--ui-risk-dot); }
.dl-view .dl-pill.dl-lv-on_plan, .dl-drawer .dl-pill.dl-lv-on_plan { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok); }
.dl-view .dl-pill.dl-lv-on_plan::before, .dl-drawer .dl-pill.dl-lv-on_plan::before { background: var(--ui-ok-dot); }
.dl-view .dl-pill.dl-lv-dismissed, .dl-drawer .dl-pill.dl-lv-dismissed { background: var(--ui-surface); border-style: dashed; color: var(--ui-text-4); }
/* the level counts on a customer card: the same four states as small pills */
.dl-view .dl-count { display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border: 0; border-radius: var(--ui-r-pill); background: var(--ui-unknown-bg); font-family: var(--ui-font); font-size: 11px; line-height: 18px; color: var(--ui-unknown); }
.dl-view .dl-count.dl-lv-text-slipping { background: var(--ui-late-bg); color: var(--ui-late); font-weight: 600; }
.dl-view .dl-count.dl-lv-text-at_risk { background: var(--ui-risk-bg); color: var(--ui-risk); }
.dl-view .dl-count.dl-lv-text-on_plan { background: var(--ui-ok-bg); color: var(--ui-ok); }
.dl-view .dl-levelbar { gap: 2px; height: 8px; border-radius: var(--ui-r-pill); overflow: hidden; }
.dl-view .dl-lv-bg-slipping { background: var(--ui-late-dot); }
.dl-view .dl-lv-bg-at_risk { background: var(--ui-risk-dot); }
.dl-view .dl-lv-bg-on_plan { background: var(--ui-ok-dot); }
.dl-view .dl-lv-bg-stale { background: var(--ui-unknown-dot); }
.dl-view .dl-aside-chip, .dl-drawer .dl-aside-chip, .dl-view .dl-badge, .dl-view .dl-dflag, .dl-drawer .dl-dflag {
  border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-r-pill); padding: 0 7px; background: var(--ui-surface); font-family: var(--ui-font); font-size: 11px; letter-spacing: 0; line-height: 18px; color: var(--ui-text-3);
}
.dl-view .dl-badge { border-radius: var(--ui-r-sm); }
.dl-view .dl-undoc-word { font-size: 11px; }

/* ── 8. the three columns: decide / customers / warnings ────────────────── */
.dl-view .dl-col-head { padding-bottom: var(--ui-sp-3); margin-bottom: 0; border-bottom: 1px solid var(--ui-border); }
.dl-view .dl-dec, .dl-view .dl-cust, .dl-view .dl-warn { border-bottom: 1px solid var(--ui-border); border-radius: 0; }
.dl-view .dl-dec:last-child, .dl-view .dl-cust:last-child, .dl-view .dl-warn:last-child { border-bottom: 0; }
.dl-view .dl-dec { grid-template-columns: 76px 88px 52px minmax(0, 1fr); align-items: center; padding: 12px var(--ui-sp-2); margin: 0 calc(-1 * var(--ui-sp-2)); width: calc(100% + 2 * var(--ui-sp-2)); }
.dl-view .dl-dec-pcs { font-size: var(--ui-fs-md); font-weight: 600; }
.dl-view .dl-dec-unit { margin-right: 4px; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ui-text-4); }
.dl-view .dl-dec-days { font-size: var(--ui-fs-sm); color: var(--ui-text-3); }
.dl-view .dl-dec-text { font-size: var(--ui-fs-sm); line-height: 1.45; }
.dl-view .dl-cust { padding: 12px var(--ui-sp-2); margin: 0 calc(-1 * var(--ui-sp-2)); width: calc(100% + 2 * var(--ui-sp-2)); }
.dl-view .dl-cust-name { font-weight: 500; }
.dl-view .dl-cust-open { font-weight: 600; }
.dl-view .dl-warn { gap: 4px; padding: 12px var(--ui-sp-3); margin: var(--ui-sp-2) 0 0; border: 1px solid var(--ui-border); border-left: 3px solid var(--ui-border-strong); border-radius: var(--ui-r-sm); }
.dl-view .dl-warn:last-child { border-bottom: 1px solid var(--ui-border); }
.dl-view .dl-warn.is-people { border-left-color: var(--ui-risk-dot); background: var(--ui-risk-bg); }
.dl-view .dl-warn.is-gap, .dl-view .dl-warn.is-silent, .dl-view .dl-warn.is-source-silent { border-left-style: solid; border-left-color: var(--ui-unknown-dot); }
.dl-view .dl-warn { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ui-sp-2); }
.dl-view .dl-warn > * { min-width: 0; }
.dl-view .dl-warn > .dl-both { flex-basis: 100%; }
.dl-view .dl-warn-text { flex: 1 1 60%; }
.dl-view .dl-warn-text { font-size: var(--ui-fs-sm); line-height: 1.45; }
.dl-view .dl-dec:hover, .dl-view .dl-cust:hover { background: var(--ui-hover); }
.dl-view .dl-warn:hover { background: var(--ui-hover); }

/* ── 9. tables: sticky head, 44-px rows, right-aligned tabular numbers ─── */
.dl-view .dl-toolbar { gap: var(--ui-sp-2); margin-bottom: var(--ui-sp-4); }
.dl-view .dl-search { flex: 1 1 260px; max-width: 380px; height: 36px; padding: 0 var(--ui-sp-3) 0 34px; background: var(--ui-surface) no-repeat 11px 50% / 15px 15px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E"); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); font-size: var(--ui-fs-sm); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.dl-view .dl-search::placeholder { color: var(--ui-text-4); }
.dl-view .dl-toolbar .dl-chip { height: 36px; border-radius: var(--ui-r); }
.dl-view .dl-count-note { font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.dl-view .dl-table-wrap, .dl-drawer .dl-table-wrap { border: 1px solid var(--ui-border); border-radius: var(--ui-r); background: var(--ui-surface); max-height: min(72vh, 900px); overflow: auto; }
.dl-view .dl-panel > .dl-table-wrap { padding: 0; }
.dl-view .dl-table, .dl-drawer .dl-table { font-size: var(--ui-fs-sm); border-collapse: separate; border-spacing: 0; }
.dl-view .dl-table th, .dl-drawer .dl-table th { position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 var(--ui-sp-3); background: var(--ui-sunken); border-bottom: 1px solid var(--ui-border); vertical-align: middle; }
.dl-view .dl-th, .dl-drawer .dl-th { font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.dl-view .dl-table th.num .dl-th { margin-left: auto; }
.dl-view .dl-table th.num { text-align: right; }
.dl-view .dl-table td, .dl-drawer .dl-table td { height: var(--ui-row-h); padding: 6px var(--ui-sp-3); border-bottom: 1px solid var(--ui-border); vertical-align: middle; color: var(--ui-text); }
.dl-view .dl-table tbody tr:last-child td { border-bottom: 0; }
.dl-view .dl-table tbody tr:nth-child(even) td { background: #FBFCFD; }
.dl-view .dl-table tr.is-link:hover td { background: var(--ui-hover); }
.dl-view .dl-table td.num { font-weight: 500; }
.dl-view .dl-table td.mono { color: var(--ui-text-2); }
.dl-view .dl-table th[aria-sort] .dl-th { color: var(--ui-text); }
.dl-view .dl-cellbtn { border-bottom: 0; color: var(--ui-accent); }
.dl-view .dl-cellbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-view .dl-hollow, .dl-drawer .dl-hollow { border-bottom: 0; color: var(--ui-text-4); }
.dl-view .dl-body .is-late, .dl-view .is-late { color: var(--ui-late); font-weight: 600; }
.dl-view .dl-orders-foot { margin-top: var(--ui-sp-4); }

/* ── 10. stage pipeline, doors, coverage ───────────────────────────────── */
.dl-view .dl-pipe { gap: 0; border: 1px solid var(--ui-border); border-radius: var(--ui-r); overflow: hidden; }
.dl-view .dl-stage.dl-pipe-stage { padding: var(--ui-sp-3); border-right: 1px solid var(--ui-border); }
.dl-view .dl-stage { border-top: 0; }
.dl-view .dl-stage-name { font-weight: 500; }
.dl-view .dl-stage-mark { border-radius: 3px; }
.dl-view .dl-stage.is-present .dl-stage-mark { background: var(--ui-accent); }
.dl-view .dl-door { padding: 10px var(--ui-sp-2); border-top: 1px solid var(--ui-border); }
.dl-view .dl-door:hover { background: var(--ui-hover); }
.dl-view .dl-custcard-levels, .dl-view .dl-doors { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dl-view .dl-door-fig { flex-wrap: nowrap; white-space: nowrap; }
.dl-view .dl-door-n { font-size: 22px; font-weight: 600; }
.dl-view .dl-custcard-name { font-size: var(--ui-fs-lg); font-weight: 600; }
.dl-view .dl-cov-cell { border-radius: 3px; }
.dl-view .dl-cov-cell.is-present { background: var(--ui-accent); }

/* ── 11. the loom (line × week) ─────────────────────────────────────────── */
.dl-view .dl-loom-week { border-left-color: var(--ui-border); font-family: var(--ui-font); font-size: 11px; }
.dl-view .dl-loom-week.is-current { color: var(--ui-accent); font-weight: 600; }
.dl-view .dl-loom-cur { fill: var(--ui-accent-soft); }
.dl-view .dl-loom-lines { font-size: 11px; }
.dl-view .dl-loom-today, .dl-view .dl-chart-today { stroke: var(--ui-accent); stroke-width: 1.5; }
.dl-view .dl-loom-today-label { font-family: var(--ui-font); font-size: 11px; font-weight: 600; color: var(--ui-accent); }
.dl-view .dl-lg-today { background: var(--ui-accent); width: 2px; }
.dl-view .dl-legend { gap: var(--ui-sp-1) var(--ui-sp-4); font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.dl-view .dl-lg { border-radius: 2px; }

/* ── 12. the line monitor's charts (drawn by delivery.js) ──────────────── */
.dl-view .dl-chart-tick, .dl-view .dl-chart-x, .dl-view .dl-chart-ahead-label { font-family: var(--ui-font); font-size: 11px; color: var(--ui-text-4); font-variant-numeric: tabular-nums; }
.dl-view .dl-chart-ahead { fill: var(--ui-sunken); }
.dl-view .dl-chart-base { stroke: var(--ui-border-strong); }
.dl-view .dl-rate-line { stroke: var(--ui-series-1); }
.dl-view .dl-rate-dot { fill: var(--ui-series-1); }
.dl-view .dl-ln-charts { padding: var(--ui-sp-5) var(--ui-sp-6); }
.dl-view .dl-ln-chartcol > .dl-eyebrow { font-size: var(--ui-fs-md); font-weight: 600; color: var(--ui-text); }
.dl-view .dl-lnex-col { padding: var(--ui-sp-4); border: 1px solid var(--ui-border); border-radius: var(--ui-r); }
.dl-view .dl-lnex-row:hover { background: var(--ui-hover); }
.dl-view .dl-ln-filter .dl-chip { height: 30px; }
.dl-view .dl-ln-empty, .dl-view .dl-unavailable, .dl-view .dl-building { padding: var(--ui-sp-5); background: var(--ui-sunken); border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-r); }

/* line charts: plan vs sewn vs the plan's own actual — cumulative or per period */
.dl-lc { display: grid; gap: var(--ui-sp-2); min-width: 0; }
.dl-lc-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-sp-2) var(--ui-sp-4); }
.dl-lc-mode { display: inline-flex; padding: 2px; background: var(--ui-hover); border: 1px solid var(--ui-border); border-radius: var(--ui-r); }
.dl-lc-mode button { height: 26px; padding: 0 var(--ui-sp-3); background: transparent; border: 0; border-radius: var(--ui-r-sm); font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-text-3); cursor: pointer; }
.dl-lc-mode button[aria-pressed="true"] { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.dl-lc-legend { display: flex; flex-wrap: wrap; gap: var(--ui-sp-1) var(--ui-sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--ui-fs-xs); color: var(--ui-text-2); }
.dl-lc-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dl-lc-key { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--ui-series-1); }
.dl-lc-key.is-plan { border-top: 2px dashed var(--ui-series-plan); }
.dl-lc-key.is-actual { border-top-color: var(--ui-series-2); }
.dl-lc-key.is-gap { height: 10px; border: 0; background: var(--ui-late-bg); outline: 1px solid var(--ui-late-line); }
.dl-lc-key.is-today { width: 0; height: 12px; border-top: 0; border-left: 2px solid var(--ui-accent); }
.dl-lc-key.is-ahead { height: 10px; border: 1px solid var(--ui-border); background: var(--ui-sunken); }
.dl-lc-key.is-hue { border-top-color: var(--dl-hue); }
.dl-lc-svg { display: block; overflow: visible; }
.dl-lc-grid { stroke: var(--ui-grid); stroke-width: 1; shape-rendering: crispEdges; }
.dl-lc-base { stroke: var(--ui-border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.dl-lc-ahead { fill: var(--ui-sunken); }
.dl-lc-gap { fill: var(--ui-late-dot); fill-opacity: .10; }
.dl-lc-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl-lc-line.is-plan { stroke: var(--ui-series-plan); stroke-dasharray: 5 4; }
.dl-lc-line.is-sewn { stroke: var(--ui-series-1); }
.dl-lc-line.is-hue { stroke: var(--dl-hue); }
.dl-lc-line.is-actual { stroke: var(--ui-series-2); }
.dl-lc-line.is-whole { stroke: var(--ui-border-strong); stroke-width: 1.5; }
.dl-lc-dot { stroke: var(--ui-surface); stroke-width: 2; }
.dl-lc-dot.is-sewn { fill: var(--ui-series-1); }
.dl-lc-dot.is-hue { fill: var(--dl-hue); }
.dl-lc-dot.is-plan { fill: var(--ui-series-plan); }
.dl-lc-dot.is-actual { fill: var(--ui-series-2); }
.dl-lc-today { stroke: var(--ui-accent); stroke-width: 1.5; shape-rendering: crispEdges; }
.dl-lc-cross { stroke: var(--ui-text-4); stroke-width: 1; stroke-dasharray: 2 2; opacity: 0; pointer-events: none; }
.dl-lc-hit { fill: transparent; cursor: crosshair; outline: none; }
.dl-lc-hit:focus-visible { fill: var(--ui-accent); fill-opacity: .06; }
.dl-lc-plot { position: relative; min-width: 0; }
.dl-lc-labels { position: absolute; inset: 0; pointer-events: none; }
.dl-lc-label { position: absolute; transform: translateY(-50%); padding-left: 8px; font-size: var(--ui-fs-xs); line-height: 1.25; color: var(--ui-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-lc-label.is-above { transform: translateY(calc(-100% - 6px)); }
.dl-lc-label b { display: block; font-size: var(--ui-fs-sm); font-weight: 600; color: var(--ui-text); }
.dl-lc-flag { position: absolute; transform: translate(-50%, 0); padding: 2px 8px; border-radius: var(--ui-r-pill); background: var(--ui-late-bg); border: 1px solid var(--ui-late-line); font-size: 11px; font-weight: 600; color: var(--ui-late); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dl-lc-flag.is-ahead { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok); }
.dl-lc-todaylab { position: absolute; top: -18px; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--ui-accent); white-space: nowrap; }
.dl-lc-y { position: absolute; right: 8px; transform: translateY(-50%); font-size: 11px; color: var(--ui-text-4); font-variant-numeric: tabular-nums; }
.dl-lc-x { position: relative; height: 18px; font-size: 11px; color: var(--ui-text-4); font-variant-numeric: tabular-nums; }
.dl-lc-x span { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.dl-lc-body { display: grid; grid-template-columns: var(--dl-lc-gutter, 44px) minmax(0, 1fr); }
.dl-lc-yaxis { position: relative; }
.dl-lc.is-compact .dl-lc-label { font-size: 11px; }
.dl-lnsum-chart .dl-lc-flag { position: static; transform: none; justify-self: start; }
.dl-lnsum-chart .dl-lc-flag[hidden] { display: none; }
.dl-lc-top .dl-lc-flag { position: static; transform: none; justify-self: start; margin-top: 2px; }
.dl-lc-top .dl-lc-flag[hidden] { display: none; }
.dl-lc-key.is-whole { border-top: 2px solid var(--ui-border-strong); }
.dl-lc-top .dl-eyebrow { font-size: var(--ui-fs-md); font-weight: 600; color: var(--ui-text); }
.dl-view .dl-th.has-why > span:first-child { text-decoration: underline dotted var(--ui-text-4); text-underline-offset: 4px; cursor: help; }
/* per-line sparkline in the line table: cumulative sewn vs plan */
.dl-view .dl-ln-trend .dl-lc-line { stroke-width: 1.5; }
.dl-view .dl-ln-trend .dl-lc-line.is-plan { stroke-dasharray: 3 2; }

/* ── 13. the dossier drawer ────────────────────────────────────────────── */
.dl-drawer { width: min(520px, calc(100vw - 24px)); background: var(--ui-surface); border-left: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-drawer); font-size: var(--ui-fs-sm); }
.dl-drawer .dl-drawer-head { gap: var(--ui-sp-3); padding: var(--ui-sp-5) var(--ui-sp-6) var(--ui-sp-4); border-bottom: 1px solid var(--ui-border); }
.dl-drawer .dl-drawer-x { height: 30px; padding: 0 var(--ui-sp-3); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-text-2); }
.dl-drawer .dl-drawer-x:hover { background: var(--ui-hover); color: var(--ui-text); border-color: var(--ui-border-strong); }
.dl-drawer .dl-drawer-title { gap: var(--ui-sp-2); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.dl-drawer .dl-keys { gap: 6px; font-family: var(--ui-font); font-size: var(--ui-fs-xs); color: var(--ui-text-2); }
.dl-drawer .dl-keys li { padding: 1px 8px; background: var(--ui-sunken); border: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); }
.dl-drawer .dl-keys b { margin-right: 4px; font-weight: 400; color: var(--ui-text-4); }
.dl-drawer .dl-drawer-body { gap: var(--ui-sp-6); padding: var(--ui-sp-5) var(--ui-sp-6) var(--ui-sp-10); }
.dl-drawer .dl-dfigs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r); overflow: hidden; }
.dl-drawer .dl-dfig { gap: 2px; margin: 0 -1px -1px 0; padding: var(--ui-sp-3); background: var(--ui-surface); border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.dl-drawer .dl-dfig-v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-drawer .dl-dfig-v.mono { font-size: var(--ui-fs-md); font-weight: 500; }
.dl-drawer .dl-dfig-v[data-dl-why] { cursor: help; }
.dl-drawer .dl-dfig.is-key { background: var(--ui-accent-soft); }
.dl-drawer .dl-reasons li { padding: var(--ui-sp-2) var(--ui-sp-3); background: var(--ui-sunken); border: 0; border-left: 3px solid var(--ui-border-strong); border-radius: var(--ui-r-sm); }
.dl-drawer .dl-tl-date { font-family: var(--ui-font); font-size: var(--ui-fs-xs); color: var(--ui-text-4); }
.dl-drawer .dl-tl-body { border-left: 2px solid var(--ui-border); }
.dl-drawer .dl-tl-mention .dl-tl-body { border-left: 2px dotted var(--ui-border-strong); }
.dl-drawer .dl-tl-row.is-contra .dl-tl-body { border-left-color: var(--ui-risk-dot); }
.dl-drawer .dl-tl-fig { font-weight: 500; }
.dl-drawer .dl-src-link { border-bottom: 0; font-weight: 500; color: var(--ui-accent); }
.dl-drawer .dl-src-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-drawer .dl-sec { gap: var(--ui-sp-3); }

/* the hover: a dark tooltip card */
.dl-pop { padding: 8px 10px; border-radius: var(--ui-r); background: #1D2330; color: #F4F6FA; font-family: var(--ui-font); font-size: var(--ui-fs-xs); line-height: 1.55; box-shadow: var(--ui-shadow-pop); }

/* ── 13b. the Wacoal panel: its weekly chart is lines now (wacoal.js chartWeeks) ── */
.wc-line-done { fill: none; stroke: var(--wc-on_plan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wc-line-tosew { fill: none; stroke: var(--wc-at_risk); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.wc-dot-done { fill: var(--wc-on_plan); stroke: #FFFFFF; stroke-width: 2; }
.wc-dot-tosew { fill: var(--wc-at_risk); stroke: #FFFFFF; stroke-width: 2; }
.wc-k-line-done { background: transparent !important; height: 0 !important; border-top: 2px solid var(--wc-on_plan); }
.wc-k-line-tosew { background: transparent !important; height: 0 !important; border-top: 2px dashed var(--wc-at_risk); }

/* ── 14. small screens ─────────────────────────────────────────────────── */
@media (max-width: 799px) {
  .dl-view > .exec-header { flex-wrap: nowrap; align-items: flex-start; padding: var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-3); }
  .dl-view > .exec-header .exec-header-left { align-items: flex-start; text-align: left; }
  .dl-view .exec-title { font-size: 19px; }
  .dl-view .dl-problems, .dl-view .dl-switch, .dl-view .dl-crumbs, .dl-view .dl-panel { padding-left: var(--ui-sp-4); padding-right: var(--ui-sp-4); }
  .dl-view .dl-switch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .dl-view .dl-switch > * { flex: 0 0 auto; }
  .dl-view .exec-tabs.dl-tabs { padding-left: var(--ui-sp-2); padding-right: var(--ui-sp-2); flex-wrap: nowrap; }
  .dl-view .exec-tabs.dl-tabs .dl-tab { padding: 12px 10px 11px; }
  .dl-view .dl-board > .dl-sec, .dl-view .dl-board > .dl-top, .dl-view .dl-cols > .dl-col, .dl-view .dl-panel > .dl-sec { padding: var(--ui-sp-4); border-radius: var(--ui-r); }
  .dl-view .dl-top { grid-template-columns: minmax(0, 1fr); }
  .dl-view .dl-fig--headline { font-size: 24px; }
  .dl-view .dl-tile-n { font-size: 22px; }
  .dl-view .dl-dec { grid-template-columns: auto auto minmax(0, 1fr); }
  .dl-view .dl-stage.dl-pipe-stage { border-right: 0; border-bottom: 1px solid var(--ui-border); }
  .dl-drawer .dl-dfigs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-drawer .dl-drawer-head, .dl-drawer .dl-drawer-body { padding-left: var(--ui-sp-4); padding-right: var(--ui-sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  .dl-lc-cross { transition: none; }
}
/* ════════════════════════════════════════════════════════════════════════════
   PHASE 3 (2026-09-29) — the Wacoal panel (#wacoal-view, public/wacoal.js).
   The module frame (canvas, white header, underline tabs, close button) is
   written against :is(…) so the later phases extend the list instead of
   copying the rules.
   ════════════════════════════════════════════════════════════════════════════ */

/* the module frame: .exec-view:not(.dl-view) in the phase-5 block (it was :is(.wacoal-view) here until phase 5 generalised it) */

/* status ramp and series: the AA status colours (they are also text), the dataviz series for lines */
.wacoal-view {
  --wc-slipping: var(--ui-late); --wc-at_risk: var(--ui-risk); --wc-on_plan: var(--ui-ok); --wc-stale: var(--ui-text-4); --wc-grid: var(--ui-grid);
  --wc-s0: #2A78D6; --wc-s1: #EB6834; --wc-s2: #1BAF7A; --wc-s3: #8A94A6;
  --wc-fs-micro: 11px; --wc-fs-meta: 12px; --wc-fs-lede: 13px; --wc-fs-body: 13px; --wc-fs-head: 15px; --wc-fs-stake: 18px;
  --wc-warn-bg: var(--ui-risk-bg);
}

/* toolbar, spans, tabs, view switch */
.wacoal-view .wacoal-body { padding: var(--ui-sp-5) var(--ui-sp-8) var(--ui-sp-10); }
.wacoal-view .wc-spans, .wacoal-view .wc-viewsw { padding: 2px; gap: 2px; background: var(--ui-hover); border: 1px solid var(--ui-border); border-radius: var(--ui-r); }
.wacoal-view .wc-span, .wacoal-view .wc-viewbtn { height: 28px; padding: 0 var(--ui-sp-3); border: 0; border-radius: var(--ui-r-sm); font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-text-3); }
.wacoal-view .wc-viewbtn + .wc-viewbtn { border-left: 0; }
.wacoal-view .wc-span:hover, .wacoal-view .wc-viewbtn:hover { background: var(--ui-surface); color: var(--ui-text); }
.wacoal-view .wc-span.is-on, .wacoal-view .wc-viewbtn.is-on { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.wacoal-view .wc-tabs { gap: var(--ui-sp-1); margin: 0 calc(-1 * var(--ui-sp-8)) var(--ui-sp-5); padding: 0 var(--ui-sp-8); background: var(--ui-surface); border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); }
.wacoal-view .wc-tab { padding: 12px var(--ui-sp-3) 11px; border-bottom: 2px solid transparent; font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-text-3); }
.wacoal-view .wc-tab:hover { background: transparent; color: var(--ui-text); }
.wacoal-view .wc-tab.is-on { color: var(--ui-accent); border-bottom-color: var(--ui-accent); font-weight: 600; }
.wacoal-view .wc-tab-badge { min-width: 20px; padding: 0 6px; border: 0; border-radius: var(--ui-r-pill); background: var(--ui-unknown-bg); font-size: 11px; line-height: 18px; text-align: center; color: var(--ui-text-3); }
.wacoal-view .wc-tab.is-on .wc-tab-badge { background: var(--ui-accent-soft); color: var(--ui-accent); }
.wacoal-view .wc-toolbar { margin-bottom: var(--ui-sp-3); }
.wacoal-view .wc-toolbar ~ .wc-tabs { margin-top: 0; }

.wacoal-view .wc-tabs + .wc-panel { border-top: 0; padding-top: 0; }
.wacoal-view .wc-panel { border-top-color: var(--ui-border); }

/* the panel head and the health line → a heading and a soft banner */
.wacoal-view .wc-panel-head h3 { font-size: var(--ui-fs-lg); font-weight: 600; }
.wacoal-view .wc-lede { font-size: var(--ui-fs-sm); color: var(--ui-text-3); }
.wacoal-view .wc-healthline { align-items: center; padding: 8px var(--ui-sp-3); background: var(--ui-sunken); border: 1px solid var(--ui-border); border-radius: var(--ui-r); box-shadow: inset 3px 0 0 var(--ui-unknown-dot); }
.wacoal-view .wc-healthline.wc-lv-at_risk { background: var(--ui-risk-bg); border-color: var(--ui-risk-line); box-shadow: inset 3px 0 0 var(--ui-risk-dot); }
.wacoal-view .wc-healthline.wc-lv-slipping { background: var(--ui-late-bg); border-color: var(--ui-late-line); box-shadow: inset 3px 0 0 var(--ui-late-dot); }
.wacoal-view .wc-health-go { border-bottom: 0; color: var(--ui-accent); font-weight: 500; }
.wacoal-view .wc-health-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.wacoal-view .wc-health { border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-surface); padding: var(--ui-sp-3) var(--ui-sp-4); }
.wacoal-view .wc-health-title { font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* the board: white cards, radius 12, no ink top rule; the title reads as a card title */
.wacoal-view .wc-board { gap: var(--ui-sp-4); }
.wacoal-view .wc-bcard { padding: var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-3); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card); }
.wacoal-view .wc-bcard.is-clickable:hover, .wacoal-view .wc-bcard.is-clickable:focus-visible { border-color: var(--ui-accent-line); box-shadow: 0 0 0 3px var(--ui-accent-soft), var(--ui-shadow-card); }
.wacoal-view .wc-bcard-head { margin-bottom: var(--ui-sp-3); }
.wacoal-view .wc-bcard-title { font-size: var(--ui-fs-md); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ui-text); }
.wacoal-view .wc-src { border-bottom: 0; font-size: var(--ui-fs-xs); color: var(--ui-text-4); }
.wacoal-view .wc-src:hover { color: var(--ui-accent); text-decoration: underline; text-underline-offset: 3px; }
.wacoal-view .wc-bnum-v { font-weight: 600; letter-spacing: -.02em; font-variant-numeric: normal; }
.wacoal-view .wc-brow { padding: 8px 0 8px 10px; }
.wacoal-view .wc-brow-title { font-weight: 600; }
.wacoal-view .wc-chart { border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); padding: var(--ui-sp-4); }
.wacoal-view .wc-bcard-body > .wc-chart { border: 0; box-shadow: none; padding: 0; }
.wacoal-view .wc-chart-title { font-size: var(--ui-fs-md); letter-spacing: 0; }
.wacoal-view .wc-chart-note { font-family: var(--ui-font); font-size: var(--ui-fs-xs); }
.wacoal-view .wc-axis, .wacoal-view .wc-axis-cap { font-family: var(--ui-font); letter-spacing: 0; }
.wacoal-view .wc-line { stroke: var(--ui-series-1); stroke-width: 2; stroke-linecap: round; }
.wacoal-view .wc-dot-end { fill: var(--ui-series-1); }
.wacoal-view .wc-area { fill: var(--ui-series-1); fill-opacity: .08; }
.wacoal-view .wc-line-capacity { stroke: var(--ui-text-3); }

/* planner load: a line per factory (wacoal.js chartLoad), dots keep the level colour */
.wc-load-line { fill: none; stroke: var(--ui-text-3); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wc-load-dot { opacity: 1; stroke: #FFFFFF; stroke-width: 1.5; }

/* chips and tables */
.wacoal-view .wc-chip { font-family: var(--ui-font); font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: var(--ui-r-pill); background: var(--ui-unknown-bg); border-color: var(--ui-unknown-line); color: var(--ui-unknown); }
.wacoal-view .wc-chip-slipping { background: var(--ui-late-bg); border-color: var(--ui-late-line); color: var(--ui-late); }
.wacoal-view .wc-chip-at_risk { background: var(--ui-risk-bg); border-color: var(--ui-risk-line); color: var(--ui-risk); }
.wacoal-view .wc-chip-on_plan { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); color: var(--ui-ok); }
.wacoal-view .wc-chipbtn { height: 30px; border-radius: var(--ui-r-pill); border-color: var(--ui-border); font-size: var(--ui-fs-sm); color: var(--ui-text-2); }
.wacoal-view .wc-chipbtn.is-on { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent); }
.wacoal-view .wc-tablewrap { border: 1px solid var(--ui-border); border-radius: var(--ui-r); background: var(--ui-surface); }
.wacoal-view .wc-table { font-size: var(--ui-fs-sm); }
.wacoal-view .wc-table th { position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 var(--ui-sp-3); background: var(--ui-sunken); border-bottom: 1px solid var(--ui-border); font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; color: var(--ui-text-3); }
.wacoal-view .wc-table td { height: var(--ui-row-h); padding: 6px var(--ui-sp-3); border-bottom: 1px solid var(--ui-border); }
.wacoal-view .wc-table tbody tr:nth-child(even) td { background: #FBFCFD; }
.wacoal-view .wc-table tbody tr:hover td { background: var(--ui-hover); }
.wacoal-view .wc-srcbtn { border-bottom: 0; color: var(--ui-accent); }

@media (max-width: 799px) {
  .wacoal-view .wacoal-body { padding: var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-8); }
  .wacoal-view .wc-tabs { margin-left: calc(-1 * var(--ui-sp-4)); margin-right: calc(-1 * var(--ui-sp-4)); padding: 0 var(--ui-sp-2); }
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 4 (2026-09-29) — GOTS (#gots-view, public/gots.js, its drawer and toast).
   GOTS is written against its own --gots-* tokens, so most of the change is the
   tokens re-pointed inside the scope; the rest is the frame, the tabs, the KPI
   band, panels and chips.
   ════════════════════════════════════════════════════════════════════════════ */
.gots-view, .gots-drawer, .gots-toast {
  --gots-ok: var(--ui-ok); --gots-ok-bg: var(--ui-ok-bg);
  --gots-warn: var(--ui-risk); --gots-warn-bg: var(--ui-risk-bg);
  --gots-bad: var(--ui-late); --gots-bad-bg: var(--ui-late-bg);
  --gots-unknown: var(--ui-unknown);
  --gots-info: var(--ui-text-2); --gots-info-bg: var(--ui-sunken);
  --gots-ok-line: var(--ui-ok-line); --gots-warn-line: var(--ui-risk-line); --gots-bad-line: var(--ui-late-line);
  --gots-rule-edge: var(--ui-border); --gots-rule-hair: var(--ui-border);
  --gots-fs-micro: 12px; --gots-fs-meta: 12px; --gots-fs-body: 13px; --gots-fs-strong: 14px; --gots-fs-head: 16px; --gots-fs-num-sm: 22px; --gots-fs-num: 28px;
  --gots-ls-caps: 0;
  --gots-r: var(--ui-r);
  --gots-shadow-pop: var(--ui-shadow-pop);
  --gots-ring: var(--ui-focus);
  --gots-ed-hint: var(--ui-border-strong); --gots-ed-focus: var(--ui-accent); --gots-ed-bg: var(--ui-hover);
}

/* the module frame and the tab strip: .exec-view:not(.dl-view) in the phase-5 block */

.gots-view .gots-body { padding: var(--ui-sp-5) var(--ui-sp-8) var(--ui-sp-10); }
.gots-view .gots-countdown { height: 34px; display: inline-flex; align-items: center; padding: 0 var(--ui-sp-3); border: 1px solid var(--ui-risk-line); border-radius: var(--ui-r); background: var(--ui-risk-bg); font-family: var(--ui-font); font-size: var(--ui-fs-sm); letter-spacing: 0; color: var(--ui-risk); }

/* the KPI band and the milestones: separate white tiles on the canvas instead of one ruled grid */
.gots-view .gots-band { gap: var(--ui-sp-3); background: transparent; border: 0; }
.gots-view .gots-kpis, .gots-view .gots-milestones { gap: var(--ui-sp-3); background: transparent; border: 0; margin-bottom: 0; }
.gots-view .gots-kpi, .gots-view .gots-ms { border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card); }
.gots-view .gots-kpi:hover { background: var(--ui-surface); border-color: var(--ui-accent-line); box-shadow: 0 0 0 3px var(--ui-accent-soft), var(--ui-shadow-card); }
.gots-view .gots-kpi-label { font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.gots-view .gots-kpi-value { font-family: var(--ui-font); font-weight: 600; letter-spacing: -.015em; }
.gots-view .gots-kpi-desc { font-size: var(--ui-fs-xs); }

/* panels: white cards; panel titles; chips as pills */
.gots-view .gots-panel { border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card); overflow: hidden; }
.gots-view .gots-panel-head { padding: var(--ui-sp-4) var(--ui-sp-5); border-bottom: 1px solid var(--ui-border); }
.gots-view .gots-panel-head h3 { font-size: var(--ui-fs-lg); font-weight: 600; letter-spacing: 0; }
.gots-view .gots-panel-head h3 em { font-style: normal; font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-4); }
.gots-view .gots-chip, .gots-drawer .gots-chip { font-family: var(--ui-font); font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 1px 8px; border-radius: var(--ui-r-pill); }
.gots-view .gots-subtabs { padding: 2px; gap: 2px; background: var(--ui-hover); border: 1px solid var(--ui-border); border-radius: var(--ui-r); }
.gots-view .gots-subtab { height: 28px; padding: 0 var(--ui-sp-3); border: 0; border-radius: var(--ui-r-sm); font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; }
.gots-view .gots-subtab[aria-selected="true"], .gots-view .gots-subtab.is-active, .gots-view .gots-subtab.is-on { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }

/* alerts: groups as small headings, each alert a row with a soft hover */
.gots-view .gots-alert-grp-head, .gots-view .gots-alert-grp-head * { letter-spacing: 0; text-transform: none; }
html[lang="en"] .gots-view .gots-panel-head h3 em { display: none; }   /* the English subtitle repeats the English title */
.gots-view .gots-alert { padding: var(--ui-sp-3) var(--ui-sp-2); border-bottom: 1px solid var(--ui-border); border-radius: var(--ui-r-sm); }
.gots-view .gots-alert.is-door:hover { background: var(--ui-hover); }
.gots-view .gots-alert-body b { font-weight: 600; }
.gots-view .gots-alert-hint { font-style: normal; color: var(--ui-accent); }

/* every uppercase, tracked micro label of the old system reads as a sentence-case caption */
.gots-view :is([class$="-label"], [class*="-label "], [class$="-eyebrow"], [class*="-cap"], th), .gots-drawer :is([class$="-label"], th) { letter-spacing: 0; text-transform: none; }

/* tables */
.gots-view .gots-table { font-size: var(--ui-fs-sm); }
.gots-view .gots-table th { height: 40px; padding: 0 var(--ui-sp-3); background: var(--ui-sunken); border-bottom: 1px solid var(--ui-border); font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-text-3); }
.gots-view .gots-table td { padding: 10px var(--ui-sp-3); border-bottom: 1px solid var(--ui-border); }
.gots-view .gots-table tbody tr:hover td { background: var(--ui-hover); }

/* the drawer */
.gots-drawer .gots-drawer-panel { width: min(480px, 92vw); border-left: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-drawer); }
.gots-drawer .gots-drawer-panel > header { padding: var(--ui-sp-5) var(--ui-sp-6); }
.gots-drawer .gots-drawer-panel > header b { font-size: 17px; font-weight: 600; }
.gots-toast { border-radius: var(--ui-r); box-shadow: var(--ui-shadow-pop); }

@media (max-width: 799px) {
  .gots-view .gots-body { padding: var(--ui-sp-4) var(--ui-sp-4) var(--ui-sp-8); }
}

/* ════════════════════════════════════════════════════════════════════════════
   PHASE 5 (2026-09-29) — meetings (calendar, day panel, meeting popup, agenda),
   kanban, search, my tasks, and the remaining exec-view modules (エグゼクティブ,
   HR, <dev>) plus the process-map chrome. The page itself moves onto the canvas.
   ════════════════════════════════════════════════════════════════════════════ */
:root { --weekend-bg: #F6F7F9; --weekend-bg-hover: #EEF0F4; }
#dashboard-view { background: var(--ui-canvas); min-height: 100vh; }

/* every exec-view module gets the frame the tower, Wacoal and GOTS have */
.exec-view:not(.dl-view) { background: var(--ui-canvas); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); overflow: clip; }
.exec-view:not(.dl-view) > .exec-header { align-items: center; padding: var(--ui-sp-6) var(--ui-sp-8) var(--ui-sp-4); background: var(--ui-surface); border-bottom: 0; }
.exec-view:not(.dl-view) .exec-eyebrow { display: none; }
.exec-view:not(.dl-view) .exec-header-left { gap: 6px; }
.exec-view:not(.dl-view) .exec-title { font-family: var(--ui-font); font-size: var(--ui-fs-xl); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ui-text); }
.exec-view:not(.dl-view) .exec-meta { font-family: var(--ui-font); font-size: var(--ui-fs-xs); letter-spacing: 0; color: var(--ui-text-3); }
.exec-view:not(.dl-view) .exec-btn-link { height: 34px; padding: 0 var(--ui-sp-3); gap: 6px; background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 500; letter-spacing: 0; color: var(--ui-text-2); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.exec-view:not(.dl-view) .exec-btn-link:hover { background: var(--ui-hover); color: var(--ui-text); border-color: var(--ui-border-strong); }
.exec-view:not(.dl-view) > .exec-tabs { gap: var(--ui-sp-1); padding: 0 var(--ui-sp-8); background: var(--ui-surface); border-bottom: 1px solid var(--ui-border); }
.exec-view:not(.dl-view) > .exec-tabs .exec-tab { padding: 12px var(--ui-sp-3) 11px; margin-bottom: -1px; border-bottom: 2px solid transparent; background: transparent; font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.exec-view:not(.dl-view) > .exec-tabs .exec-tab:hover { background: transparent; color: var(--ui-text); }
.exec-view:not(.dl-view) > .exec-tabs .exec-tab.is-active { background: transparent; color: var(--ui-accent); border-bottom-color: var(--ui-accent); font-weight: 600; }

/* エグゼクティブ: KPI tiles and panels as cards */
#exec-view .exec-kpi-strip { gap: var(--ui-sp-3); padding: var(--ui-sp-5) var(--ui-sp-8) 0; background: transparent; border: 0; }
#exec-view .exec-kpi { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card); }
#exec-view .exec-kpi-label { font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
#exec-view .exec-kpi-value, #exec-view .exec-kpi-value-number { font-family: var(--ui-font); font-weight: 600; letter-spacing: -.015em; }
#exec-view .exec-kpi-delta { font-family: var(--ui-font); letter-spacing: 0; }

#exec-view .exec-trend { margin: var(--ui-sp-3) var(--ui-sp-8) 0; border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card); }
#exec-view .exec-trend-title { font-family: var(--ui-font); font-size: var(--ui-fs-md); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ui-text); }
#exec-view .exec-grid { gap: var(--ui-sp-3); margin: var(--ui-sp-3) var(--ui-sp-8) var(--ui-sp-8); background: transparent; border-top: 0; }
#exec-view .exec-tile { border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card); }
/* the meeting trend is already a line chart: the dataviz series colours instead of ink */
.exec-trend-chart .series-primary { stroke: var(--ui-series-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.exec-trend-chart .series-secondary { stroke: var(--ui-series-plan); stroke-width: 1.5; stroke-dasharray: 5 4; }
.exec-trend-chart .area-primary { fill: var(--ui-series-1); opacity: .08; }
.exec-trend-chart .hover-dot { fill: var(--ui-series-1); }
.exec-trend-chart .tick-label { font-family: var(--ui-font); letter-spacing: 0; }
.exec-trend-legend-swatch { background: var(--ui-series-1); }
.exec-trend-legend-swatch--dashed { background: transparent; border-top-color: var(--ui-series-plan); }
.exec-trend-tooltip { background: #1D2330; border-radius: var(--ui-r); box-shadow: var(--ui-shadow-pop); font-family: var(--ui-font); letter-spacing: 0; }

/* HR: the toolbar and the org canvas on a card */
.hr-view .hr-toolbar { padding: var(--ui-sp-4) var(--ui-sp-8); }
.hr-view .hr-enforce { font-family: var(--ui-font); letter-spacing: 0; }
.hr-view .hr-colhead { font-family: var(--ui-font); letter-spacing: 0; text-transform: none; font-size: 11px; }
.hr-view .hr-mgr-bar { stroke: var(--ui-accent); }

/* <dev>: its chrome only — the handbook inside the iframe is its own app with its own stylesheet */
.dev-view.exec-view { background: var(--ui-surface); }

/* ── calendar ── */
#calendar-view .calendar-header { margin-bottom: var(--ui-sp-4); }
#calendar-view .calendar-month-title { font-family: var(--ui-font); font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
#calendar-view .month-nav-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--ui-surface); border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); font-family: var(--ui-font); color: var(--ui-text-2); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
#calendar-view .month-nav-btn:hover { background: var(--ui-hover); color: var(--ui-text); border-color: var(--ui-border-strong); }
#calendar-view .calendar-grid { background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); overflow: hidden; box-shadow: var(--ui-shadow-card); }
#calendar-view .calendar-weekday { padding: 10px 0; font-family: var(--ui-font); font-size: var(--ui-fs-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ui-text-3); background: var(--ui-sunken); }
#calendar-view .calendar-weekday:nth-child(7n), #calendar-view .calendar-day:nth-child(7n), #calendar-view .calendar-empty:nth-child(7n) { border-right: 0; }
#calendar-view .calendar-day { min-height: 88px; }
#calendar-view .calendar-day.has-meetings:hover { background: var(--ui-accent-soft); }
#calendar-view .day-number { font-family: var(--ui-font); font-size: 18px; font-weight: 500; }
#calendar-view .calendar-day.today, #calendar-view .calendar-day.today.is-weekend { background: var(--ui-surface); box-shadow: inset 0 0 0 2px var(--ui-accent); }
#calendar-view .calendar-day.today:hover, #calendar-view .calendar-day.today.is-weekend:hover { background: var(--ui-accent-soft); }
#calendar-view .calendar-day.today .day-number, #calendar-view .calendar-day.today.is-weekend .day-number { color: var(--ui-accent); font-weight: 700; }
#calendar-view .day-badge, #calendar-view .day-badge-upcoming { padding: 0 7px; border-radius: var(--ui-r-pill); font-family: var(--ui-font); font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 18px; }
#calendar-view .day-badge, #calendar-view .calendar-day.today .day-badge { background: var(--ui-accent-soft); color: var(--ui-accent); }
#calendar-view .day-badge-upcoming, #calendar-view .calendar-day.today .day-badge-upcoming { background: var(--ui-surface); color: var(--ui-text-3); border: 1px solid var(--ui-border-strong); }
#calendar-view .cal-legend { margin-top: var(--ui-sp-3); font-family: var(--ui-font); font-size: var(--ui-fs-xs); letter-spacing: 0; color: var(--ui-text-3); }

/* ── kanban ── */
.kanban-section { margin-top: var(--ui-sp-8); padding: var(--ui-sp-6); background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-card); }
.kanban-title, html[lang="th"] .kanban-title { font-family: var(--ui-font); font-size: var(--ui-fs-lg); font-weight: 600; letter-spacing: 0; text-transform: none; }
.kanban-title::after { display: none; }
.kanban-subtitle, html[lang="th"] .kanban-subtitle, html[lang="en"] .kanban-subtitle { font-size: var(--ui-fs-sm); letter-spacing: 0; color: var(--ui-text-3); }
.kanban-search, .kanban-select, .kanban-chip { height: 36px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r); background: var(--ui-surface); font-family: var(--ui-font); font-size: var(--ui-fs-sm); letter-spacing: 0; text-transform: none; color: var(--ui-text-2); }
.kanban-chip[aria-pressed="true"] { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); color: var(--ui-accent); }
.kanban-new-btn { height: 36px; padding: 0 var(--ui-sp-4); border: 1px solid var(--ui-accent); border-radius: var(--ui-r); background: var(--ui-accent); color: #FFFFFF; font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.kanban-new-btn:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); color: #FFFFFF; transform: none; }
.kanban-new-btn::after { display: none; }
.kanban-col { background: var(--ui-sunken); border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); overflow: hidden; }
.kanban-col-header { padding: var(--ui-sp-3) var(--ui-sp-4); background: transparent; border-bottom: 1px solid var(--ui-border); }
.kanban-col-title { font-family: var(--ui-font); font-size: var(--ui-fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
.kanban-col-count { min-width: 24px; padding: 0 7px; border: 0; border-radius: var(--ui-r-pill); background: var(--ui-unknown-bg); font-size: 11px; font-weight: 600; line-height: 18px; color: var(--ui-text-3); }
.kanban-card { border: 1px solid var(--ui-border); border-left: 3px solid var(--ui-border); border-radius: var(--ui-r); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.kanban-card:hover { border-color: var(--ui-border-strong); box-shadow: 0 4px 12px -4px rgba(16, 24, 40, .12); }
.kanban-card-title { font-weight: 600; }
.kanban-card-meeting { font-family: var(--ui-font); letter-spacing: 0; text-transform: none; }
.kanban-card-modal, .kanban-confirm-modal { border-radius: var(--ui-r-lg); border-color: var(--ui-border); box-shadow: var(--ui-shadow-pop); }

/* ── day panel, meeting popup, agenda, search, my tasks ── */
.day-side-panel { border-left: 1px solid var(--ui-border); }
.day-side-panel.open { box-shadow: var(--ui-shadow-drawer); }
.dsp-header { padding: var(--ui-sp-5) var(--ui-sp-6); }
.dsp-date { font-family: var(--ui-font); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.dsp-count { font-family: var(--ui-font); letter-spacing: 0; padding: 0 7px; border-radius: var(--ui-r-pill); background: var(--ui-unknown-bg); color: var(--ui-text-3); }
.day-meeting-row:hover { background: var(--ui-hover); }
.dmr-time { font-family: var(--ui-font); letter-spacing: 0; color: var(--ui-text-3); }
.meeting-popup { border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-pop); overflow: hidden; }
.mp-header { background: var(--ui-surface); color: var(--ui-text); border-bottom: 1px solid var(--ui-border); }
.mp-title { font-family: var(--ui-font); font-weight: 600; letter-spacing: -.005em; color: var(--ui-text); }
.mp-type-dot { box-shadow: none !important; }
.mp-action-btn, .mp-close { color: var(--ui-text-3); border-radius: var(--ui-r-sm); }
.mp-action-btn:hover, .mp-close:hover { color: var(--ui-text); background: var(--ui-hover); }
.mp-meta { background: var(--ui-sunken); border-bottom: 1px solid var(--ui-border); }
.mp-meta-label, .section-label, .mp-summary-label, .mp-correct-head-label { font-family: var(--ui-font); letter-spacing: 0; text-transform: none; color: var(--ui-text-3); }
.attendee-tag { border-radius: var(--ui-r-pill); }
.agenda-modal, .search-modal { border: 1px solid var(--ui-border); border-radius: var(--ui-r-lg); box-shadow: var(--ui-shadow-pop); overflow: hidden; }
.agenda-eyebrow { font-family: var(--ui-font); letter-spacing: 0; text-transform: none; }
.search-input { font-family: var(--ui-font); }
.search-kbd { border-radius: var(--ui-r-sm); font-family: var(--ui-font); }
.my-tasks-panel { border-left: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-drawer); padding: var(--ui-sp-5); }
.my-tasks-title { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.my-tasks-summary { font-size: var(--ui-fs-xs); letter-spacing: 0; }
.my-tasks-notifs { border-radius: var(--ui-r); border-color: var(--ui-border); }
.my-tasks-item-wrap { border-radius: var(--ui-r); }
.my-tasks-filters select { height: 30px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-r-sm); background: var(--ui-surface); font-family: var(--ui-font); }

/* ── process map chrome ── */
.pm-header { border-bottom: 1px solid var(--ui-border); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.process-hub { max-width: 1280px; }

@media (max-width: 799px) {
  .exec-view:not(.dl-view) > .exec-header { flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding: var(--ui-sp-4); }
  .exec-view:not(.dl-view) > .exec-header .exec-header-left { align-items: flex-start; text-align: left; }
  .exec-view:not(.dl-view) > .exec-tabs { padding: 0 var(--ui-sp-2); }
  #exec-view .exec-kpi-strip { padding: var(--ui-sp-4) var(--ui-sp-4) 0; }
  .kanban-section { padding: var(--ui-sp-4); }
}


/* ════════════════════════════════════════════════════════════════════════════
   PHASE 7 (2026-09-29 evening) — the floor plan (ライン稼働表) and the overview's
   no-overlap pass. The grid is HTML: a sticky week header, a sticky line column,
   one 36-px row per line, factory groups that fold, a cell per week.
   ════════════════════════════════════════════════════════════════════════════ */
.dl-fl-holder { display: grid; gap: var(--ui-sp-3); min-width: 0; }
.dl-fl-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-sp-2); }
.dl-fl-sumcap { margin-right: var(--ui-sp-1); font-size: var(--ui-fs-sm); color: var(--ui-text-3); }
.dl-fl-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: var(--ui-r-pill); border: 1px solid var(--ui-border); background: var(--ui-surface); font-size: var(--ui-fs-sm); color: var(--ui-text-2); }
.dl-fl-chip b { font-size: 16px; font-weight: 600; color: var(--ui-text); }
.dl-fl-chip.is-behind { background: var(--ui-late-bg); border-color: var(--ui-late-line); }
.dl-fl-chip.is-behind b { color: var(--ui-late); }
.dl-fl-chip.is-slight { background: var(--ui-risk-bg); border-color: var(--ui-risk-line); }
.dl-fl-chip.is-slight b { color: var(--ui-risk); }
.dl-fl-chip.is-met { background: var(--ui-ok-bg); border-color: var(--ui-ok-line); }
.dl-fl-chip.is-met b { color: var(--ui-ok); }
.dl-fl-chip.is-late b { color: var(--ui-late); }
.dl-fl-legend { display: flex; flex-wrap: wrap; gap: 6px var(--ui-sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.dl-fl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.dl-fl-sw { position: relative; width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--ui-border); background: var(--ui-surface); }
.dl-fl-sw.is-met { background: #D3F4E1; border-color: var(--ui-ok-line); }
.dl-fl-sw.is-slight { background: #FDEBC8; border-color: var(--ui-risk-line); }
.dl-fl-sw.is-behind { background: #FBD5D2; border-color: var(--ui-late-line); }
.dl-fl-sw.is-planned { background: var(--ui-accent-soft); border-color: var(--ui-accent-line); }
.dl-fl-sw.is-notarget { background: var(--ui-sunken); }
.dl-fl-sw.is-idle { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--ui-border) 3px 4px); }
.dl-fl-sw.is-late { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--ui-late-dot); }
.dl-fl-sw.is-now { border: 2px solid var(--ui-accent); }
.dl-fl-sw.is-stripe { background: linear-gradient(90deg, var(--dl-c-wacoal, #8A4664) 0 4px, var(--ui-surface) 4px); }

.dl-fl-scroll { max-height: min(72vh, 900px); overflow: auto; border: 1px solid var(--ui-border); border-radius: var(--ui-r); background: var(--ui-surface); }
.dl-fl { min-width: max-content; }
.dl-fl-row { display: grid; grid-template-columns: var(--dl-fl-label, 220px) repeat(var(--dl-fl-n, 13), minmax(68px, 1fr)); align-items: stretch; min-height: 36px; border-bottom: 1px solid var(--ui-border); }
.dl-fl-row.is-head { position: sticky; top: 0; z-index: 3; min-height: 40px; background: var(--ui-sunken); }
.dl-fl-label { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 12px; background: var(--ui-surface); border: 0; border-right: 1px solid var(--ui-border); text-align: left; font: inherit; color: var(--ui-text); }
.dl-fl-row.is-head .dl-fl-label { background: var(--ui-sunken); font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-text-3); }
button.dl-fl-label { cursor: pointer; }
button.dl-fl-label:hover { background: var(--ui-hover); }
.dl-fl-label > b { min-width: 22px; font-size: var(--ui-fs-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.dl-fl-who { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; font-size: var(--ui-fs-xs); color: var(--ui-text-2); }
.dl-fl-tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.dl-fl-more { font-size: var(--ui-fs-xs); color: var(--ui-text-4); }
.dl-fl-latechip { margin-left: auto; padding: 0 6px; border-radius: var(--ui-r-pill); background: var(--ui-late-bg); color: var(--ui-late); font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.dl-fl-week { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4px; font-size: var(--ui-fs-xs); font-weight: 500; color: var(--ui-text-3); font-variant-numeric: tabular-nums; border-right: 1px solid var(--ui-border); }
.dl-fl-week small { font-size: 10px; font-weight: 600; color: var(--ui-accent); }
.dl-fl-week.is-now { background: var(--ui-accent-soft); color: var(--ui-accent); }
.dl-fl-week.is-today small { color: var(--ui-text-3); }
.dl-fl-group > summary { list-style: none; cursor: pointer; }
.dl-fl-group > summary::-webkit-details-marker { display: none; }
.dl-fl-row.is-factory { min-height: 40px; background: var(--ui-sunken); }
.dl-fl-row.is-factory .dl-fl-label { background: var(--ui-sunken); }
.dl-fl-row.is-factory .dl-fl-label::before { content: '\25BE'; font-size: 11px; color: var(--ui-text-4); }
.dl-fl-group:not([open]) > .dl-fl-row.is-factory .dl-fl-label::before { content: '\25B8'; }
.dl-fl-sub { font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.dl-fl-cell { position: relative; display: flex; align-items: center; justify-content: center; margin: 3px 2px; padding: 0 6px 0 10px; min-height: 28px; border: 1px solid transparent; border-radius: 6px; background: transparent; font: inherit; font-size: var(--ui-fs-sm); color: var(--ui-text-2); font-variant-numeric: tabular-nums; }
button.dl-fl-cell { cursor: pointer; }
button.dl-fl-cell:hover { box-shadow: 0 0 0 2px var(--ui-accent-line); }
.dl-fl-cell.is-idle { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--ui-grid) 5px 6px); }
.dl-fl-cell.is-planned { background: var(--ui-accent-soft); color: var(--ui-text-2); }
.dl-fl-cell.is-notarget { background: var(--ui-sunken); color: var(--ui-text-4); }
.dl-fl-cell.is-worked { background: var(--ui-surface); border-color: var(--ui-border-strong); color: var(--ui-text-2); }
.dl-fl-sw.is-worked { background: var(--ui-surface); border-color: var(--ui-border-strong); }
.dl-fl-cell.is-met { background: #D3F4E1; color: var(--ui-ok); font-weight: 600; }
.dl-fl-cell.is-slight { background: #FDEBC8; color: var(--ui-risk); font-weight: 600; }
.dl-fl-cell.is-behind { background: #FBD5D2; color: var(--ui-late); font-weight: 700; }
.dl-fl-cell.is-now { box-shadow: inset 0 0 0 2px var(--ui-accent-line); }
.dl-fl-row.is-factory .dl-fl-cell { font-weight: 700; }
.dl-fl-stripe { position: absolute; left: 3px; top: 5px; bottom: 5px; display: flex; flex-direction: column; gap: 1px; width: 3px; }
.dl-fl-stripe i { flex: 1; border-radius: 2px; background: var(--dl-hue); }
.dl-fl-late { position: absolute; top: -5px; right: -4px; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--ui-late-dot); color: #FFFFFF; font-size: 10px; font-weight: 700; box-shadow: 0 0 0 2px var(--ui-surface); }
.dl-fl-note { margin: 0; font-size: var(--ui-fs-xs); color: var(--ui-text-3); }
.dl-loom-details { border-top: 1px solid var(--ui-border); padding-top: var(--ui-sp-3); }
.dl-loom-details > summary { cursor: pointer; font-size: var(--ui-fs-sm); font-weight: 500; color: var(--ui-accent); }
.dl-loom-details[open] > summary { margin-bottom: var(--ui-sp-3); }
.dl-loom-details .dl-loom-legend { margin-bottom: var(--ui-sp-2); }

/* the customer rail and the lead figures never overlap: the tower measures its own width (a container), not the window */
.dl-view .dl-board { container-type: inline-size; }
.dl-view .dl-rail-row { grid-template-columns: 8px minmax(9.5em, 1.4fr) minmax(56px, 1fr) repeat(3, minmax(72px, auto)); }
.dl-view .dl-rail-namecell { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.dl-view .dl-rail-namecell .dl-rail-name { min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; text-align: left; }
.dl-view .dl-rail-head .dl-eyebrow { white-space: normal; line-height: 1.3; }
@container (max-width: 1060px) {
  .dl-view .dl-top { grid-template-columns: minmax(0, 1fr); }
  .dl-view .dl-heads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-view .dl-heads .dl-asof { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
  .dl-view .dl-rail-row { grid-template-columns: 8px minmax(7em, 1fr) repeat(3, minmax(52px, auto)); column-gap: var(--ui-sp-2); }
  .dl-view .dl-rail-bar, .dl-view .dl-rail-head > :nth-child(3) { display: none; }
  .dl-fl-row { --dl-fl-label: 132px; grid-template-columns: var(--dl-fl-label) repeat(var(--dl-fl-n, 13), minmax(58px, 1fr)); }
  .dl-fl-who { display: none; }
}
@media (max-width: 799px) {
  .dl-view .dl-rail-row { grid-template-columns: 8px minmax(7em, 1fr) repeat(3, minmax(52px, auto)); column-gap: var(--ui-sp-2); }
  .dl-fl-scroll { max-height: 70vh; }
}
/* at the widths a 13-inch laptop gives the tower, a decision row reads pill · figure · days on one line and its sentence under them */
@container (max-width: 1320px) {
  .dl-view .dl-dec { grid-template-columns: auto auto minmax(0, 1fr); row-gap: 4px; }
  .dl-view .dl-dec-days { justify-self: end; white-space: nowrap; }
  .dl-view .dl-dec-why { grid-column: 1 / -1; }
}