/* IndianOne design system — implements docs/ui-guidelines.md for people who use the system 8 hours a day.
   Every color is a token. Neutral base is ~90% of pixels, the single accent ≤5%, status colors ≤5%. */

/* Shared tools keep the same controls as the module pages. */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.workspace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.workspace-grid .nav-icon { display: block; width: 18px; height: 18px; margin-bottom: 12px; }
.hub-split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--gap); align-items: start; }
.hub-split > * { min-width: 0; }
.hub-title { overflow-wrap: anywhere; }
.hub-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); overflow: hidden; }
.hub-card:hover { border-color: var(--border-strong); }
.hub-body { padding: 20px; flex: 1; }
.hub-card h2 { font-size: var(--fs-title); margin: 8px 0; }
.hub-card p { color: var(--text-secondary); margin: 0 0 16px; line-height: 1.65; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-secondary); font-size: var(--fs-meta); }
.hub-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); background: var(--bg-subtle); }
.hub-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 20px; }
.hub-form .field { flex: 1 1 160px; min-width: 0; }
.hub-form .field > :is(input, select, textarea) { width: 100%; }
.hub-reading { max-width: 76ch; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; font-family: var(--font-ui); font-size: var(--fs-body); }
.hub-empty-icon { display: block; margin: 0 auto 12px; width: 24px; height: 24px; color: var(--text-muted); }
.hub-lead { max-width: 72ch; color: var(--text-secondary); line-height: 1.65; }
.hub-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hub-section { margin-top: 28px; }
.hub-section > h2 { font-size: var(--fs-title); margin-bottom: 12px; }
.hub-message { padding: 20px; border-bottom: 1px solid var(--border); }
.hub-message[data-kind="Answer"] { background: var(--bg-subtle); }
.hub-message:last-child { border-bottom: 0; }
.hub-message .hub-reading { margin-top: 12px; }
.hub-source { display: block; padding: 12px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); }
.hub-definition { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 20px; }
.hub-definition dt { color: var(--text-secondary); }
.hub-definition dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .hub-body, .hub-message { padding: 16px; } .hub-definition { grid-template-columns: 1fr; gap: 4px; } .hub-definition dd { margin-bottom: 12px; } }
@media (max-width: 960px) { .hub-split, .workspace-grid { grid-template-columns: minmax(0, 1fr); } }

/* IBM Plex, served from this site (the CSP allows fonts from 'self' only). Only the Latin 1, Latin 2
   (Central European letters in names and addresses, such as Köln) and Pi (arrows, check mark) subsets ship; any other character falls back to the system font. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular-Latin2.woff2") format("woff2"); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular-Pi.woff2") format("woff2"); unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium-Latin2.woff2") format("woff2"); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium-Pi.woff2") format("woff2"); unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold-Latin2.woff2") format("woff2"); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold-Pi.woff2") format("woff2"); unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2"); unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSans-Bold-Latin2.woff2") format("woff2"); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/IBMPlexSans-Bold-Pi.woff2") format("woff2"); unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular-Latin2.woff2") format("woff2"); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular-Pi.woff2") format("woff2"); unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium-Latin2.woff2") format("woff2"); unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA, U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium-Pi.woff2") format("woff2"); unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD; }

/* While Plex loads, font-display: swap shows a fallback font. The swap used to move the text: the
   layout-shift check measured 0.064 on the item list. These faces make Arial and Courier New take the
   same room as Plex. size-adjust matches the average glyph width on English text and figures. The
   overrides are Plex's own ascent and descent, divided by that scale. Liberation and Arimo share
   Arial's metrics, and Cousine shares Courier New's, so the same numbers hold on Linux. People still
   see Plex once it arrives. The numbers come from each pair's hmtx, hhea and OS/2 font tables. */
@font-face { font-family: "IBM Plex Sans Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"); size-adjust: 101.46%; ascent-override: 101.03%; descent-override: 27.11%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-weight: 500; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"); size-adjust: 103.51%; ascent-override: 99.02%; descent-override: 26.57%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"); size-adjust: 97.53%; ascent-override: 105.09%; descent-override: 28.20%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"); size-adjust: 98.79%; ascent-override: 103.76%; descent-override: 27.84%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono Fallback"; font-weight: 400 500; src: local("Courier New"), local("CourierNewPSMT"), local("Liberation Mono"), local("LiberationMono"), local("Cousine"); size-adjust: 99.98%; ascent-override: 102.52%; descent-override: 27.50%; line-gap-override: 0%; }

:root {
  --bg-app: #F7F7F5;
  --bg-surface: #FCFCFB;
  --bg-elevated: #FFFFFF;
  --bg-subtle: #EFEFEC;
  --border: #E3E3DF;
  --border-strong: #8A8A84;
  --text-primary: #1F2329;
  --text-secondary: #5E646E;
  --text-muted: #676C75;
  --text-inverse: #FFFFFF;

  /* One neutral accent for everything interactive (panel ruling: brand red stays on the wordmark and printed documents). */
  /* Every colour below clears 4.5:1 against every surface above it, including --bg-subtle, which is the
     darkest of them. StylesheetContrastTests measures all of it; an eye cannot tell 4.49 from 4.51. */
  --accent: #1D5DE8;
  --accent-hover: #1D4ED8;
  --accent-soft: #EAF1FE;
  --accent-ink: #FFFFFF;
  --brand: #9B1C31;
  /* The letters on the wordmark badge. The badge is brand-coloured in both themes, and the two brand
     reds are far enough apart in lightness that one ink cannot serve both. */
  --brand-ink: #FFFFFF;

  --ok: #147A3A;        --ok-bg: #ECFDF3;
  --warn: #A94E08;      --warn-bg: #FFFBEB;
  --danger: #B91C1C;    --danger-bg: #FEF2F2;
  --info: #0E7490;      --info-bg: #ECFEFF;
  --neutral: #5E646E;   --neutral-bg: #EFEFEC;
  --purple: #6D28D9;    --purple-bg: #F3EEFF;

  --fs-hero: 20px; --fs-title: 16px; --fs-body: 14px; --fs-table: 13px; --fs-meta: 12px; --fs-caption: 11px;
  /* Three corners only: small inline marks, blocks and controls, and fully round pills and dots. */
  --rail-w: 224px; --topbar-h: 46px; --radius: 6px; --radius-sm: 3px; --radius-round: 999px; --row-pad: 7px 10px; --gap: 16px; --control-h: 32px;
  --font-ui: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow-pop: 0 8px 24px rgba(15, 20, 30, .12), 0 2px 6px rgba(15, 20, 30, .08);
  --shadow-card: 0 1px 2px rgba(15, 20, 30, .05), 0 2px 8px rgba(15, 20, 30, .05);
  --shadow-lift: 0 2px 4px rgba(15, 20, 30, .07), 0 6px 16px rgba(15, 20, 30, .10);
  /* What dims the page behind a dialog, and the shadow at the edge of a table that scrolls. Tokens
     like any other, so the rule that every colour is a token has no exceptions and the stylesheet
     test can hold it. The edge shadow has to be a token for a second reason: black on a dark surface
     is not a shadow, it is nothing. */
  --scrim: rgba(0, 0, 0, .35);
  --edge-shadow: rgb(0 0 0 / .2);
  --fade: rgb(0 0 0 / 0);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg-app: #16171A; --bg-surface: #1E1F23; --bg-elevated: #26272C; --bg-subtle: #28292E;
  --border: #34363C; --border-strong: #6B6E76;
  --text-primary: #E8E9EB; --text-secondary: #A2A6AE; --text-muted: #9096A0; --text-inverse: #1F2329;
  --accent: #6E99F2; --accent-hover: #7AA3F3; --accent-soft: #202B43; --accent-ink: #0D1B3A; --brand: #E08A96; --brand-ink: #1F2329;
  --ok: #4ADE80; --ok-bg: #1A2F24; --warn: #FBBF24; --warn-bg: #33291A; --danger: #F87171; --danger-bg: #3A1D1D; --info: #22D3EE; --info-bg: #0E2A33; --neutral: #A2A6AE; --neutral-bg: #28292E; --purple: #C4B5FD; --purple-bg: #2C2444;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .4);
  --scrim: rgba(0, 0, 0, .6);
  --edge-shadow: rgb(0 0 0 / .55); --fade: rgb(0 0 0 / 0);
  color-scheme: dark;
}

[data-density="comfortable"] { --row-pad: 10px 12px; --gap: 20px; --control-h: 36px; }
[data-density="compact"]     { --row-pad: 5px 10px; --gap: 12px; }
[data-density="ultra"]       { --row-pad: 2px 8px; --fs-table: 12px; --gap: 8px; --control-h: 28px; }
[data-scale="large"] { --fs-hero: 22px; --fs-title: 18px; --fs-body: 16px; --fs-table: 15px; --fs-meta: 14px; --fs-caption: 13px; }
[data-contrast="high"] { --text-secondary: #4A4F58; --text-muted: #5A5F68; --border: #C9C9C4; --border-strong: #6E6E68; }
[data-theme="dark"][data-contrast="high"] { --text-secondary: #C2C6CC; --text-muted: #A6ABB3; --border: #4A4D55; --border-strong: #8A8E96; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-app); color: var(--text-primary); font: 400 var(--fs-body)/1.5 var(--font-ui); font-variant-numeric: tabular-nums; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
/* A link inside a sentence has to be told apart from the sentence without relying on colour
   (WCAG 1.4.1), so in prose it is underlined. A link that is a control — the rail, a tab, a button, a
   crumb, a tile, the key cell of a table — is not inside a block of text and keeps the plain
   treatment, which is what keeps a dense queue screen readable. */
p a, li a, dd a, .sub a, .help a, .meta a, .empty a, .callout a, .wrap a, .note a, .kv a,
/* Message boxes hold sentences too: a flash, a banner, a notice, a warn-edge box, a pre-note and the
   form's error list. A next-action link is always the end of a sentence that says what to do. A
   button stays a button. */
:is(.flash, .banner, .notice, .warn-edge, .pre-note, .validation-summary-errors) a:not(.btn), a[data-next-action]:not(.btn),
/* A link that shares its table cell with anything else — a pill, a note, a second link — is read as
   part of a sentence. One that is the whole cell is a row identifier and stays plain. */
td a:not(:only-child) {
  text-decoration: underline; text-underline-offset: 2px;
}
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: var(--fs-hero); letter-spacing: -0.015em; } h2 { font-size: var(--fs-title); letter-spacing: -0.01em; } h3 { font-size: var(--fs-body); }
p { margin: 0 0 8px; } code, .mono { font-family: var(--font-mono); font-size: 0.93em; }
a { transition: color .12s ease; }
.dim { color: var(--text-secondary); } .muted { color: var(--text-muted); } .meta { font-size: var(--fs-meta); color: var(--text-secondary); }
.right { text-align: right; } .num { text-align: right; font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; }
.inline { display: inline; margin: 0; } .mb0 { margin-bottom: 0; } .hidden { display: none !important; }
/* A row wraps rather than pushing its last control past the card's edge. A two-control row never
   notices the difference; a row of four inputs and a button stops drawing over its neighbour. */
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wrap { flex-wrap: wrap; } .spacer { flex: 1; }
kbd { font: 500 var(--fs-caption)/1 var(--font-mono); padding: 2px 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--bg-surface); }

/* ── Frame: rail + topbar + content ─────────────────────────────────────── */
.frame { display: flex; min-height: 100vh; }
.rail { width: var(--rail-w); flex: 0 0 var(--rail-w); background: var(--bg-surface); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 10px 8px; overflow-y: auto; scrollbar-width: thin; }
/* A collapsed rail stays on screen as an icon strip; labels hide and every link keeps its tooltip. */
[data-rail="closed"] .rail { width: 52px; flex-basis: 52px; padding: 10px 6px; }
[data-rail="closed"] .rail .brand { justify-content: center; padding: 0; }
/* The beta stamp goes with the wordmark. A 52px rail has no room for it, and leaving it in gave the
   rail a horizontal scrollbar at large text. */
[data-rail="closed"] .rail .brand-text, [data-rail="closed"] .rail .nav-text, [data-rail="closed"] .rail .grp, [data-rail="closed"] .rail .beta { display: none; }
[data-rail="closed"] .rail a.nav-link { justify-content: center; padding: 6px; }
[data-rail="closed"] .rail .nav-icon { opacity: .8; }
[data-rail="closed"] .rail .rail-foot { display: none; }
[data-rail="closed"] .rail-open { display: inline-flex; }
.rail-open { display: none; }
.brand { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 4px 8px 12px; font-size: var(--fs-title); font-weight: 600; color: var(--text-primary); }
.brand:hover { text-decoration: none; }
/* The release stamp. It wraps to its own line rather than overflowing the rail at large text. */
.beta { border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 0 4px; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; line-height: 1.5; color: var(--warn); background: var(--warn-bg); }
.brand-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius); background: var(--brand); color: var(--brand-ink); font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.brand small { color: var(--text-muted); font-weight: 500; font-size: var(--fs-meta); margin-left: 4px; }
.rail nav { display: flex; flex-direction: column; gap: 1px; }
.rail .grp { margin: 10px 10px 3px; font-size: var(--fs-caption); font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--text-muted); }
.rail a.nav-link { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border-radius: var(--radius); color: var(--text-secondary); font-size: var(--fs-body); transition: background-color .12s ease, color .12s ease; }
.rail a.nav-link:hover { background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; }
.rail a.nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
/* Rail and button icons. Each glyph is an SVG mask so it takes the current text colour and stays
   crisp at every text scale. An unknown name falls back to a dot, never a blank square. */
.nav-icon, [data-icon] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 5.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z'/%3E%3C/svg%3E"); }
.nav-icon { width: 15px; height: 15px; background: currentColor; opacity: .62; flex: none;
  mask: var(--icon-mask) center / contain no-repeat; -webkit-mask: var(--icon-mask) center / contain no-repeat; }
.rail a.nav-link:hover .nav-icon, .rail a.nav-link.active .nav-icon { opacity: 1; }
[data-icon="home"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1 1 7v1h2v7h4v-4h2v4h4V8h2V7zM4 7.3 8 4l4 3.3V13h-2V9H6v4H4z'/%3E%3C/svg%3E"); }
[data-icon="bell"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a4 4 0 0 0-4 4v2.6L2.4 11v1h11.2v-1L12 7.6V5a4 4 0 0 0-4-4zm0 14a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z'/%3E%3C/svg%3E"); }
[data-icon="cases"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M6 1h4a2 2 0 0 1 2 2v1h2.5a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5H4V3a2 2 0 0 1 2-2zm0 3h4V3H6zM2.5 6v6.5h11V6z'/%3E%3C/svg%3E"); }
[data-icon="book"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M3.5 1H13a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3.5A2.5 2.5 0 0 1 1 12.5v-9A2.5 2.5 0 0 1 3.5 1zm0 1.5A1 1 0 0 0 2.5 3.5v8.2a2.4 2.4 0 0 1 1-.2h9V2.5z'/%3E%3C/svg%3E"); }
[data-icon="users"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M6 2a2.6 2.6 0 1 1 0 5.2A2.6 2.6 0 0 1 6 2zM1.2 14a4.8 4.8 0 0 1 9.6 0zm10.6-11a2.2 2.2 0 1 1 0 4.4 2.2 2.2 0 0 1 0-4.4zM12 8.6a4 4 0 0 1 2.9 5.4h-2.6a6.3 6.3 0 0 0-1.8-4.6A4 4 0 0 1 12 8.6z'/%3E%3C/svg%3E"); }
[data-icon="people"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M6 2a2.6 2.6 0 1 1 0 5.2A2.6 2.6 0 0 1 6 2zM1.2 14a4.8 4.8 0 0 1 9.6 0zm10.6-11a2.2 2.2 0 1 1 0 4.4 2.2 2.2 0 0 1 0-4.4zM12 8.6a4 4 0 0 1 2.9 5.4h-2.6a6.3 6.3 0 0 0-1.8-4.6A4 4 0 0 1 12 8.6z'/%3E%3C/svg%3E"); }
[data-icon="audit"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1 2 3.2v4.6c0 3.7 2.5 6.3 6 7.2 3.5-.9 6-3.5 6-7.2V3.2zm3.1 4.3 1.1 1.1-4.6 4.6-2.8-2.8 1.1-1.1 1.7 1.7z'/%3E%3C/svg%3E"); }
[data-icon="outbox"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M2 2h12v6.5h-3.6a2.5 2.5 0 0 1-4.8 0H2zm0 8h2.7a4 4 0 0 0 6.6 0H14v4H2z'/%3E%3C/svg%3E"); }
[data-icon="play"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.6a5.4 5.4 0 1 1 0 10.8A5.4 5.4 0 0 1 8 2.6zM6.6 4.9 11 8l-4.4 3.1z'/%3E%3C/svg%3E"); }
[data-icon="jobs"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.6a5.4 5.4 0 1 1 0 10.8A5.4 5.4 0 0 1 8 2.6zM7.2 4h1.6v4.1l2.7 1.6-.8 1.4-3.5-2.1z'/%3E%3C/svg%3E"); }
[data-icon="settings"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M6.9 1h2.2l.3 1.9 1.4.8 1.8-.7 1.1 1.9-1.4 1.2v1.7l1.4 1.2-1.1 1.9-1.8-.7-1.4.8-.3 1.9H6.9l-.3-1.9-1.4-.8-1.8.7L2.3 9l1.4-1.2V6.1L2.3 4.9l1.1-1.9 1.8.7 1.4-.8zM8 5.8A2.2 2.2 0 1 0 8 10.2 2.2 2.2 0 0 0 8 5.8z'/%3E%3C/svg%3E"); }
[data-icon="org"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1.5 1h7v14h-7zm8 5h5v9h-5zM3 3h1.6v1.8H3zm2.8 0h1.6v1.8H5.8zM3 6h1.6v1.8H3zm2.8 0h1.6v1.8H5.8zM3 9h1.6v1.8H3zm2.8 0h1.6v1.8H5.8zm5.2-1h2v1.8h-2zm0 3h2v1.8h-2z'/%3E%3C/svg%3E"); }
[data-icon="box"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1 1.6 4v8L8 15l6.4-3V4zm0 1.7 4.1 1.9L8 6.5 3.9 4.6zM3.1 5.9 7.2 7.8v5.3l-4.1-1.9zm9.8 0v5.3l-4.1 1.9V7.8z'/%3E%3C/svg%3E"); }
[data-icon="tree"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 1h5.5v3.6H1zm8.5 0H15v3.6H9.5zm0 5.2H15v3.6H9.5zm0 5.2H15V15H9.5zM3 4.6h1.4v8.6H8v1.4H3z'/%3E%3C/svg%3E"); }
[data-icon="badge"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M2 2.6h12v10.8H2zm3.2 2a1.9 1.9 0 1 0 0 3.8 1.9 1.9 0 0 0 0-3.8zM2.6 11.8c.4-1.5 1.5-2.3 2.6-2.3s2.2.8 2.6 2.3zM9.6 5.4h3.2v1.2H9.6zm0 2.6h3.2v1.2H9.6z'/%3E%3C/svg%3E"); }
[data-icon="tag"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 2h6.4L15 9.6 9.6 15 1 7.4zm1.4 1.4v3.4l7.2 6.6 3.4-3.4-6.6-6.6zm2.6 1a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z'/%3E%3C/svg%3E"); }
[data-icon="coin"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.6a5.4 5.4 0 1 1 0 10.8A5.4 5.4 0 0 1 8 2.6zM7.2 3.9h1.6v.9h1.6v1.5H6.9a.6.6 0 0 0 0 1.2h1.6a2.1 2.1 0 0 1 .3 4.2v.9H7.2v-.9H5.6V10.2h3.1a.6.6 0 0 0 0-1.2H7.1a2.1 2.1 0 0 1-.3-4.2z'/%3E%3C/svg%3E"); }
[data-icon="ruler"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 5.6h14v4.8H1zm1.5 1.5v1.8h1V7.1zm2.6 0v2.6h1V7.1zm2.6 0v1.8h1V7.1zm2.6 0v2.6h1V7.1zm2.6 0v1.8h1V7.1z'/%3E%3C/svg%3E"); }
[data-icon="grid"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M1 1h6v6H1zm8 0h6v6H9zM1 9h6v6H1zm8 0h6v6H9z'/%3E%3C/svg%3E"); }
[data-icon="pencil"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11.4 1.6a1.4 1.4 0 0 1 2 0l1 1a1.4 1.4 0 0 1 0 2L5.6 13.4 1.5 14.5l1.1-4.1zM3.9 10.9l-.5 1.7 1.7-.5 6.7-6.7-1.2-1.2z'/%3E%3C/svg%3E"); }
[data-icon="cross"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4.2 3 8 6.8 11.8 3 13 4.2 9.2 8l3.8 3.8-1.2 1.2L8 9.2 4.2 13 3 11.8 6.8 8 3 4.2z'/%3E%3C/svg%3E"); }
.rail .rail-foot { padding: 8px 4px 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; }
.pref { display: flex; flex-direction: column; gap: 3px; }
.pref-label { font-size: 9px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); padding-left: 2px; }
.rail-toggle { margin-left: auto; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.seg button, .rail-toggle, .rail-open, .icon-btn { font: 500 var(--fs-caption)/1 var(--font-ui); padding: 5px 7px; border: 0; background: var(--bg-surface); color: var(--text-secondary); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border); }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
.rail-toggle, .rail-open { border: 1px solid var(--border-strong); border-radius: var(--radius); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg-surface); position: sticky; top: 0; z-index: 20; min-height: 46px; }
/* The breadcrumb is one line that never breaks a word. The last crumb names the record on screen,
   such as MO-000001, so it never shrinks. The middle crumbs shrink first and end in dots. "IndianOne"
   keeps its width too. The crumbs sit at the right end of their box. So if even the floors do not
   fit, the box cuts from the left and the record code stays whole. A long record name stops at 24em
   and ends in dots. With a floor of 4.5em on every crumb, the box cut the last one off (IND-00G55).
   The box shrinks at a fiftieth of the rate of the scope lists and the search box. So they give up
   their width first. The crumbs keep their words while there is room. */
.crumbs { display: flex; flex-wrap: nowrap; flex: 0 .02 auto; min-width: 0; justify-content: flex-end; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; font-size: var(--fs-meta); color: var(--text-secondary); }
.crumbs > * { flex: 0 1 auto; min-width: 2.4em; overflow: hidden; text-overflow: ellipsis; }
.crumbs > :first-child { flex-shrink: 0; min-width: auto; }
.crumbs > :last-child:not(:first-child) { flex-shrink: 0; min-width: auto; max-width: 24em; }
/* Slack at the end of the box. Any shrink of the box, even half a pixel, put dots on a middle crumb
   that had room. This empty part gives up its 12px first. A crumb only shrinks when it must. */
.crumbs::after { content: ""; flex: 0 100000 12px; width: 12px; min-width: 0; }
.crumbs a { color: var(--text-secondary); } .crumbs > :not(:first-child)::before { content: "/"; margin: 0 5px 0 0; color: var(--text-muted); }
.search-trigger { display: inline-flex; flex: 0 1 260px; align-items: center; gap: 12px; height: var(--control-h); padding: 0 8px 0 12px; min-width: 96px; white-space: nowrap; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-app); color: var(--text-muted); cursor: text; font: inherit; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-secondary); text-decoration: none; }
.icon-btn [data-icon] { width: 15px; height: 15px; background: currentColor; opacity: .75;
  mask: var(--icon-mask) center / contain no-repeat; -webkit-mask: var(--icon-mask) center / contain no-repeat; }
.badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-round); background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 600; display: grid; place-items: center; }
.user-menu { display: flex; align-items: center; gap: 8px; } .user-name { font-size: var(--fs-meta); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; min-width: 5em; }
/* The top bar's one-click presence switch (section 9.1): a status-coloured dot beside a plain select,
   so it reads at a glance and still works with a keyboard and a screen reader. */
.status-switch { display: flex; align-items: center; gap: 6px; }
.status-switch select { font: 500 var(--fs-caption)/1 var(--font-ui); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--text-secondary); height: var(--control-h); padding: 0 6px; }
/* The column show/hide chooser (section 9.4/9.5): a disclosure so the checkbox list stays out of the
   way until a rep asks for it. */
.col-chooser { position: relative; display: inline-block; }
.col-chooser summary { list-style: none; cursor: pointer; }
.col-chooser summary::-webkit-details-marker { display: none; }
.col-chooser-panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; max-height: 320px; overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 6px; }
.col-chooser-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-sm); font-size: var(--fs-meta); cursor: pointer; }
.col-chooser-item:hover { background: var(--bg-subtle); }
/* The dealer wizard's stepper (section 1): a numbered pill per step, the current one accented. */
.wizard-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.wizard-steps [data-step-pill] { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-round); font-size: var(--fs-caption); font-weight: 500; color: var(--text-secondary); background: var(--bg-subtle); }
.wizard-steps [data-step-pill].current { color: var(--accent-ink); background: var(--accent); }
.wizard-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
/* The wizard's System Checklist (section 4): a plain heading per section, items in document order. */
.checklist-section { font-size: var(--fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); margin: 16px 0 6px; }
.checklist-section:first-child { margin-top: 0; }
/* The case detail thread (section 3/7.7): newest-at-bottom posts, internal notes visually distinct. */
.thread { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; margin-bottom: 12px; }
.thread-post { padding: 8px 12px; border-radius: var(--radius); background: var(--bg-subtle); }
.thread-post.from-rep { background: var(--accent-soft); }
.thread-post.internal-note { background: var(--warn-bg); }
.thread-meta { font-size: var(--fs-caption); color: var(--text-secondary); margin-bottom: 4px; display: flex; gap: 8px; }
.thread-attachment { max-width: 240px; max-height: 240px; border-radius: var(--radius-sm); margin-top: 6px; display: block; }
.content { padding: 16px 20px 40px; max-width: 1800px; width: 100%; }
/* A running role preview. It sits above the top bar on every page so nobody forgets their session is narrowed. */
.preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px; background: var(--warn-bg); color: var(--text-primary); border-bottom: 1px solid var(--warn); font-size: var(--fs-meta); }
.preview-bar strong { color: var(--warn); }
/* Acting as a demo persona: the bar names who acts and who presents, and a frame round the whole window
   marks the mode from across a room. The frame draws over the page without taking any clicks. */
.persona-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 16px; background: var(--info-bg); color: var(--text-primary); border-bottom: 1px solid var(--info); font-size: var(--fs-meta); }
.persona-bar strong { color: var(--info); }
.persona-actions { display: inline-flex; align-items: center; gap: 8px; }
html.acting-persona::after { content: ""; position: fixed; inset: 0; border: 4px solid var(--info); pointer-events: none; z-index: 2147483000; }
.flash { padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px; border: 1px solid transparent; font-size: var(--fs-body); }
.flash.ok { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.flash.err { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.flash.info { background: var(--info-bg); color: var(--info); }
/* A refusal's code and request reference sit under its message, so the help desk can route the call.
   The line keeps the message's colour, which is already readable on that box, and is one size smaller,
   so the sentence the person acts on still reads first. */
.refusal-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 4px; font-size: var(--fs-meta); }
/* A refusal shows its message alone; the code and reference stay in the markup for support. */
.refusal-ref[hidden] { display: none; }
.refusal-ref .mono { overflow-wrap: anywhere; }
.refusal-ref .btn.ghost { color: inherit; }
.validation-summary-errors .refusal-ref { font-size: var(--fs-caption); }

/* ── Page head, cards, tiles ─────────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: var(--gap); flex-wrap: wrap; }
/* A record page's actions never scroll away: the header pins under the topbar (UX-040). */
.page-head.stick { position: sticky; top: var(--topbar-h); z-index: 15; background: var(--bg-app); padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.page-head .titles { min-width: 0; } .page-head .sub { color: var(--text-secondary); font-size: var(--fs-meta); margin-top: 2px; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow-card); }
.card + .card { margin-top: var(--gap); }
/* Cards side by side in a grid are spaced by its gap; the stacking margin above pushed the second one down. */
.grid > .card + .card { margin-top: 0; }
.grid + .card { margin-top: var(--gap); }
.card h2 { margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.card h2 .meta { font-weight: 400; }
.grid { display: grid; gap: var(--gap); } .grid.two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); } .grid.three { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: var(--gap); }
.tile { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; display: block; color: inherit; box-shadow: var(--shadow-card); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.tile:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
.tile .label { font-size: var(--fs-meta); color: var(--text-secondary); } .tile .value { font-size: 22px; font-weight: 600; line-height: 1.2; margin-top: 2px; }
.tile .value.sm { font-size: var(--fs-body); font-weight: 500; }

/* Layout utilities. Pages never carry a style attribute: the content security policy blocks inline
   styles, and a named class keeps the same field the same width on every screen. */
.w-tiny { max-width: 80px; } .w-code { max-width: 110px; } .w-short { max-width: 150px; }
.w-med { max-width: 200px; } .w-long { max-width: 320px; }
/* On a form box the class is the width, not only a cap. A list box grows to fit its longest choice.
   With a cap alone, Incoterms came out half as wide as Currency, though both said w-med (IND-00FPY).
   A text box stayed at the browser's 20 letters, so w-long did nothing.
   Now two boxes with one class are one width on every screen. A narrow column still shrinks them. */
:is(input:not([type="checkbox"], [type="radio"]), select, textarea):is(.w-tiny, .w-code, .w-short, .w-med, .w-long) { max-width: 100%; }
:is(input:not([type="checkbox"], [type="radio"]), select, textarea).w-tiny { width: 80px; }
:is(input:not([type="checkbox"], [type="radio"]), select, textarea).w-code { width: 110px; }
:is(input:not([type="checkbox"], [type="radio"]), select, textarea).w-short { width: 150px; }
:is(input:not([type="checkbox"], [type="radio"]), select, textarea).w-med { width: 200px; }
:is(input:not([type="checkbox"], [type="radio"]), select, textarea).w-long { width: 320px; }
/* A VIN has 17 characters. A reader needs all of them. So a VIN cell takes no cap, and the column grows
   to fit it. With a cap of 110px, the VIN ran over the dealer code beside it (IND-00FKS). */
.w-vin { max-width: none; white-space: nowrap; }
.mt { margin-top: 10px; } .mb { margin-bottom: 10px; } .my { margin: 10px 0; }
.wrap { flex-wrap: wrap; }
.text-table { font-size: var(--fs-table); } .text-caption { font-size: var(--fs-caption); }
.warn-edge { border-color: var(--warn); }
/* Stored text such as a JSON payload can be one long line with no spaces. It may break anywhere.
   That keeps it inside its card, so the page never scrolls sideways. */
.pre-note { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-caption); margin: 4px 0; }
.bullets { margin: 0; padding-left: 16px; font-size: var(--fs-table); }
/* A callout is a note that needs attention, such as a step still missing. The colour says how
   urgent it is. */
.callout { padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--border); border-left-width: 3px; background: var(--bg-subtle); font-size: var(--fs-table); }
.callout.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); border-left-color: var(--warn); }
.callout.err { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); border-left-color: var(--danger); }
/* Indented tree cell: the depth is data, not a style attribute. */
.indent { padding-left: 8px; }
.indent[data-level="2"] { padding-left: 26px; } .indent[data-level="3"] { padding-left: 44px; }
.indent[data-level="4"] { padding-left: 62px; } .indent[data-level="5"] { padding-left: 80px; }
.indent[data-level="6"] { padding-left: 98px; } .indent[data-level="7"] { padding-left: 116px; }
.indent[data-level="8"] { padding-left: 134px; } .indent[data-level="9"] { padding-left: 152px; }
.tile .trend { font-size: var(--fs-caption); color: var(--text-muted); }
.tile.warn .value { color: var(--warn); } .tile.danger .value { color: var(--danger); } .tile.ok .value { color: var(--ok); }
/* The module launcher: one tile per module, large enough to pick from without reading a list of links.
   A tile is a plain link, so the whole card is the target and no script is needed to open a module. */
.tiles.module-tiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 0; }
.tile.module { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; }
.tile.module:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tile.module[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.tile.module .nav-icon { flex: none; width: 18px; height: 18px; margin-top: 2px; background: var(--accent); opacity: .85;
  mask: var(--icon-mask) center / contain no-repeat; -webkit-mask: var(--icon-mask) center / contain no-repeat; }
.tile.module .body { min-width: 0; display: grid; gap: 1px; }
.tile.module .label { font-size: var(--fs-body); font-weight: 500; color: var(--text-primary); }
.tile.module .value.sm { margin-top: 2px; font-weight: 400; color: var(--text-secondary); }
/* The chain: the journey a motorcycle takes, one card per step, for somebody who has never seen the
   product. The strip at the top is the same flow the process map uses, so the two read alike. */
.flowmap.chain { margin-bottom: var(--gap); position: sticky; top: var(--topbar-h); z-index: 12; background: var(--bg-app); padding: 10px 0 8px; }
.flowmap.chain a.state { transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.flowmap.chain a.state.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* One line down the left, a dot per step: the story reads as a journey, not a pile of cards. */
.chain-steps { position: relative; padding-left: 28px; }
.chain-steps::before { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: var(--border); }
.card.step { position: relative; }
.card.step::before { content: ""; position: absolute; left: -25px; top: 18px; width: 9px; height: 9px; border-radius: var(--radius-round); background: var(--bg-app); border: 2px solid var(--accent); }
/* Steps rise into view as the reader reaches them. The .rv class is added by script only, so without
   JavaScript the page renders complete; prefers-reduced-motion kills the transition, not the content. */
.rv .card.step { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.rv .card.step.in { opacity: 1; transform: none; }
/* The motorcycle from the register is the protagonist; its card gets the one tinted panel. */
.card.machine { background: var(--accent-soft); }
.flowmap.chain .state { color: inherit; }
.flowmap.chain .node:not(:last-child)::after { content: " \2192"; color: var(--text-muted); margin-left: 2px; }
.flowmap.chain .node:last-child .state { border-color: var(--border-strong); color: inherit; }
.card.machine .machine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.card.machine .vin { font-size: 20px; font-weight: 600; letter-spacing: .5px; }
.card.step h2 { align-items: baseline; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-round);
  background: var(--accent); color: var(--accent-ink); font-size: var(--fs-caption); font-weight: 600; flex: none; }
/* What makes ten cards a chain: each one says what it waits on and what it leaves behind. */
.handoff { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: var(--fs-table); line-height: 1.5; max-width: 100ch; }
.handoff dt { color: var(--text-secondary); white-space: nowrap; }
.handoff dt::before { content: "\2190 "; color: var(--text-muted); }
.handoff dt + dd + dt::before { content: "\2192 "; }
.handoff dd { margin: 0; color: var(--text-primary); }
.card.step .tiles { margin-bottom: 4px; }
.tbl.controls td { vertical-align: top; }
.step-screens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.step-screens .label { font-size: var(--fs-meta); color: var(--text-secondary); margin-right: 2px; }
.chip { border: 1px solid var(--border-strong); border-radius: var(--radius-round); padding: 2px 10px; font-size: var(--fs-caption); color: var(--text-secondary); }
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* The process catalogue: a written specification and the lifecycle the system enforces for it.
   These pages carry eleven sections of prose each, so the shape of the text is what makes them
   readable. The page had its own <style> block, which the content security policy dropped without
   telling anyone, which is why its line breaks never appeared. */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 var(--gap); }
.lede { font-size: var(--fs-body); color: var(--text-primary); margin-bottom: 10px; max-width: 80ch; }
.muted { color: var(--text-muted); }
.card h3 { font-size: var(--fs-body); font-weight: 600; margin: 14px 0 6px; }
.card .note { font-size: var(--fs-meta); color: var(--text-secondary); margin-top: 10px; max-width: 80ch; }
.spec { max-width: 92ch; }
.points, .steps { margin: 0; padding-left: 18px; font-size: var(--fs-table); line-height: 1.55; }
.points > li, .steps > li { margin-bottom: 6px; }
.points > li::marker { color: var(--text-muted); }
.steps > li { margin-bottom: 12px; }
.steps > li::marker { color: var(--accent); font-weight: 600; }
.steps .lead { font-weight: 500; color: var(--text-primary); margin: 0 0 4px; }
.steps .bullets { color: var(--text-secondary); }
.scenario { border-left: 2px solid var(--border-strong); padding-left: 12px; margin-bottom: 12px; font-size: var(--fs-table); line-height: 1.55; }
.scenario:last-child { margin-bottom: 0; }
.scenario p { margin: 0 0 2px; color: var(--text-secondary); }
.scenario p.clause { color: var(--text-primary); display: grid; grid-template-columns: 46px 1fr; }
.scenario b { color: var(--text-muted); font-weight: 600; }
.notice { border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: var(--radius); padding: 10px 12px; font-size: var(--fs-table); line-height: 1.55; max-width: 86ch; }
.notice strong { display: block; margin-bottom: 4px; }
.notice p { margin: 0 0 4px; color: var(--text-secondary); }
.notice p:last-child { margin-bottom: 0; }
.jump { list-style: none; margin: 0; padding: 0; font-size: var(--fs-table); }
.jump li { padding: 3px 0; border-bottom: 1px solid var(--border); }
.jump li:last-child { border-bottom: 0; }
.jump a { display: block; color: var(--text-secondary); border-left: 2px solid transparent; padding-left: 8px; transition: color .12s ease, border-color .12s ease; }
.jump a:hover { color: var(--text-primary); text-decoration: none; }
.jump a.on { color: var(--accent); font-weight: 500; border-left-color: var(--accent); }
/* The lifecycle, read left to right: a state, the action that leaves it, then the next state. It wraps
   on a narrow window rather than scrolling sideways, because the order still reads down the rows. */
.flowmap { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; }
.flowmap .node { display: flex; align-items: center; gap: 6px; }
.flowmap .state { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 4px 10px; font-size: var(--fs-table); font-weight: 500; background: var(--bg-subtle); white-space: nowrap; }
.flowmap .node:first-child .state { border-color: var(--accent); color: var(--accent); }
.flowmap .node:last-child .state { border-color: var(--ok); color: var(--ok); }
.flowmap .act { font: 500 var(--fs-caption)/1 var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.flowmap .act::after { content: " \2192"; color: var(--text-muted); }
.act.checked { color: var(--accent); }
.act.checked::before { content: "\2713 "; }
.act.sample::after { content: none; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--gap); align-items: start; }
/* Either column may be narrower than its contents; both are told they may shrink. */
.split > * { min-width: 0; }
/* The reader's rail (contents, cases, provenance) stays on screen while the specification scrolls.
   It carries no height cap and no scroll of its own: the nested scroller clipped the rail's last
   controls — a select and its save button, or a short history — below the fold, and a control you
   cannot reach is a control that does not exist. A rail taller than the window now scrolls with the
   page like every other block, so the whole of it stays reachable. */
.split > div:last-child { position: sticky; top: calc(var(--topbar-h) + 16px); }
section.card[id] { scroll-margin-top: 62px; }
/* Two columns need room for a 380px rail and a working table beside it. 1280 rather than 1100:
   between those two widths the rail left the content column about 600px, which is narrower than the
   rows a record page draws (inputs plus a button) and forced every table into a sideways scroll. */
@media (max-width: 1280px) { .split { grid-template-columns: minmax(0, 1fr); } .split > div:last-child { position: static; } }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: var(--fs-table); }
.kv dt { color: var(--text-secondary); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.empty { padding: 24px; text-align: center; color: var(--text-secondary); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty strong { display: block; color: var(--text-primary); margin-bottom: 4px; }
/* A dashboard of several queues, each its own card, reorderable and collapsible per user (Phase 5).
   Panels in the same row hold different numbers of cases, so align-items: stretch (not start) gives
   every card in a row the same height; each card is a column flex box so its own "Full list" link
   sinks to the shared bottom edge (margin-top: auto below) instead of hugging whatever the last row
   of cases happens to end at. */
.panel-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--gap); align-items: stretch; }
.panel-board .panel-card { margin-top: 0; }
.panel-card { display: flex; flex-direction: column; }
.panel-card .form-actions { margin-top: auto; padding-top: 10px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.panel-head .panel-actions { display: flex; gap: 2px; flex: none; }
.panel-card.collapsed .panel-body { display: none; }
.panel-card.collapsed .form-actions { margin-top: 0; }
.panel-card table.panel-table { width: 100%; border-collapse: collapse; font-size: var(--fs-table); }
.panel-card table.panel-table th { text-align: left; font-weight: 500; font-size: var(--fs-meta); color: var(--text-secondary); padding: 4px 6px 4px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.panel-card table.panel-table td { padding: 5px 6px 5px 0; border-top: 1px solid var(--border); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px; }
.panel-card table.panel-table tr:first-child td { border-top: none; }
.panel-card table.panel-table td:first-child, .panel-card table.panel-table th:first-child { max-width: none; }
/* A dealer reply nobody has acted on yet (section 9.4): never colour alone, so the row is also bold. */
tr.unread { font-weight: 600; }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--accent); vertical-align: middle; margin: 0 2px; }
.timeline { list-style: none; margin: 0; padding: 0; } .timeline li { padding: 6px 0 6px 14px; border-left: 2px solid var(--border); position: relative; font-size: var(--fs-table); }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--border-strong); }
/* A long history scrolls inside its card, so the card keeps its size and the page stays short. */
.timeline.capped { max-height: 420px; overflow-y: auto; padding-left: 6px; scrollbar-width: thin; }
/* Some History cards use a plain list or a table. They scroll the same way. A table's header row
   is sticky, so it stays in view as the rows scroll. */
.bullets.capped, .tbl-wrap.capped { max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--gap); }
.tabs a { padding: 6px 12px; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.on { color: var(--accent); border-color: var(--accent); font-weight: 500; } .tabs a:hover { text-decoration: none; color: var(--text-primary); }

/* ── Status pills: icon + color + text, never color alone ───────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: var(--radius-round); font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; line-height: 1.7; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-round); background: currentColor; }
.pill.ok { color: var(--ok); background: var(--ok-bg); } .pill.warn { color: var(--warn); background: var(--warn-bg); }
/* Pages and page models name a failed or refused state "err" or "bad" as often as "danger". Neither
   had a rule, so a check that blocked release drew as a plain grey label (IND-00G26). All three are
   red now. "dim" is grey for the same reason. */
.pill.danger, .pill.err, .pill.bad { color: var(--danger); background: var(--danger-bg); } .pill.info { color: var(--info); background: var(--info-bg); }
.pill.neutral, .pill.dim { color: var(--neutral); background: var(--neutral-bg); }
.pill.purple { color: var(--purple); background: var(--purple-bg); }
/* The key under a list of checks: each badge, then what it means for the next step. */
.check-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.check-legend .pill { margin-right: 6px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-h); padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-primary); font: 500 var(--fs-body)/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
.btn:hover { background: var(--bg-subtle); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); } .btn.ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); } .btn.danger:hover { background: var(--danger-bg); }
.btn.sm { height: 26px; padding: 0 8px; font-size: var(--fs-meta); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ── Tables: the heart of the system ────────────────────────────────────── */
.tbl-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); scrollbar-width: thin; box-shadow: var(--shadow-card);
  /* Covers ride the content and hide the edge shadow until there is something to scroll to. */
  background:
    linear-gradient(to right, var(--bg-surface) 30%, var(--fade)) local,
    linear-gradient(to left, var(--bg-surface) 30%, var(--fade)) local,
    radial-gradient(farthest-side at 0 50%, var(--edge-shadow), var(--fade)) scroll,
    radial-gradient(farthest-side at 100% 50%, var(--edge-shadow), var(--fade)) scroll,
    var(--bg-surface);
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%, 100% 100%;
  background-position: 0 0, 100% 0, 0 0, 100% 0, 0 0; }
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); }
  /* Warranty claims: give content-heavy columns enough room so values never
  overflow into neighbouring cells. The table wrapper scrolls horizontally
   when the viewport cannot fit the full claim row. */
    table.tbl.warranty-claims { table-layout: fixed; min-width: 1500px; }
    table.tbl.warranty-claims > thead > tr > th:nth-child(1) { width: 36px; } 
    table.tbl.warranty-claims > thead > tr > th:nth-child(2) { width: 130px; } 
    table.tbl.warranty-claims > thead > tr > th:nth-child(3) { width: 170px; }
    table.tbl.warranty-claims > thead > tr > th:nth-child(4) { width: 135px; }
    table.tbl.warranty-claims > thead > tr > th:nth-child(*) { width: 145px; }
    table.tbl.warranty-claims > thead > tr > th:nth-child(6) { width: 190px; }
    table.tbl.warranty-claims > thead > tr > th:nth-child(7) { width: 100px; }
    table.tbl.warranty-claims > thead > tr > th:nth-child(8),
    table.tbl.warranty-claims > thead > tr > th:nth-child(9) { width: 100px; }
    table.tbl.warranty-claims * thead > tr > th:nth-child(10) { width: 190px; }
    table.tbl.warra*ty-claims > thead > tr > th:nth-child(11) { width: 115px; }
    table.tbl.warranty-claims > thead > tr * th:nth-child(12) { width: 120px; }
/* Warranty claim lines: compact line number and kind columns. */
    table.tbl.warranty-claim-lines { table-layout: fixed;}
    table.tbl.warranty-claim-lines > thead > tr > th:nth-child(4) { width: 300px; }
    table.tbl.warranty-claim-lines > tbody > tr > td:nth-child(4) { white-space: normal; }
    table.tbl.warranty-claim-lines > thead > tr > th:first-child { width: 90px; }
    table.tbl.warranty-claim-lines > thead > tr > th:nth-child(2) { width: 80px; }
.tbl th, .tbl td { padding: var(--row-pad); border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; white-space: nowrap; }
.tbl th { position: sticky; top: 0; z-index: 2; background: var(--bg-subtle); font-weight: 500; font-size: var(--fs-meta); color: var(--text-secondary); user-select: none; }
.tbl th.sorted { color: var(--text-primary); }
.tbl th[data-sort-state="asc"]::after { content: " ↑"; } .tbl th[data-sort-state="desc"]::after { content: " ↓"; }
.tbl th.sortable { cursor: pointer; } .tbl th.sortable:hover { color: var(--text-primary); }
/* Which columns sort, before the pointer arrives: a faint glyph that steps aside for the ↑/↓ arrow. */
.tbl th.sortable:not(.sorted)::after { content: "⇅"; opacity: .25; margin-left: 4px; }
.tbl td.key, .tbl th.key { position: sticky; left: 0; z-index: 1; background: var(--bg-surface); font-weight: 500; }
.tbl th.key { z-index: 3; background: var(--bg-subtle); }
.tbl tbody tr { transition: background-color .1s ease; }
.tbl tbody tr:hover td { background: var(--bg-subtle); } .tbl tbody tr:hover td.key { background: var(--bg-subtle); }
.tbl tbody tr.on td { background: var(--accent-soft); }
.tbl tbody tr.selected td { background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg-surface)); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td.wrap, .tbl th.wrap { white-space: normal; min-width: 240px; }
.tbl td.wrap.narrow, .tbl th.wrap.narrow { min-width: 8rem; }
/* A width cap is for a form field. Text in a table cell does not wrap. So a cap on a cell cannot shrink
   the text, and a long code ran over the next column. Here a cap does not apply to a cell. The column
   grows to fit. The table scrolls when it must. A reader can still drag a column narrower. We tried
   wrapping instead. It broke short codes such as FORK-01 at the dash. */
td:is(.w-tiny, .w-code, .w-short, .w-med, .w-long) { max-width: none; }
/* A cell marked shown keeps its buttons in view without hover. It is for a decision that needs a field
   filled first, such as the bank call-back tick: a box beside an invisible button reads as a broken
   form, and a touch screen has no hover to reveal it. */
.tbl td.actions { text-align: right; } .tbl td.actions .btn { visibility: hidden; } .tbl tr:hover td.actions .btn, .tbl tr.on td.actions .btn, .tbl td.actions.shown .btn { visibility: visible; }
.tbl td.empty-cell { text-align: center; color: var(--text-muted); padding: 18px 10px; }
/* A home panel row that needs attention colours its name, so a leader finds it without reading every number. */
.tbl td.tone-bad, .tbl td.tone-bad a { color: var(--danger); } .tbl td.tone-warn, .tbl td.tone-warn a { color: var(--warn); } .tbl td.tone-good, .tbl td.tone-good a { color: var(--ok); }
.tbl td .sub { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.tbl input[type="checkbox"] { margin: 0; }
.tbl-foot { padding: 8px 10px; font-size: var(--fs-meta); color: var(--text-secondary); }
/* The pager footer is a div and lays its parts out in a row. A tfoot with the same class is a table row group and must stay one. */
div.tbl-foot { display: flex; align-items: center; gap: 12px; }
.pager { display: inline-flex; gap: 2px; align-items: center; } .pager a, .pager span { padding: 3px 8px; border-radius: var(--radius-sm); }
.pager a:hover { background: var(--bg-subtle); text-decoration: none; } .pager .on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.pager input { width: 56px; }
/* A row on another page of a grid paged in the browser: still in the form, just not drawn. */
.tbl tbody tr.off-page { display: none; }
.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.filters input[type="search"] { min-width: 260px; }
.filters .result-count { color: var(--text-muted); font-size: var(--fs-meta); }
/* A list reloading after a search, a filter, a sort or a page change (IND-00GH3). The dim waits a
   moment, so a fast answer does not flicker. */
.tbl-wrap[aria-busy="true"] { opacity: .55; pointer-events: none; transition: opacity .15s ease .12s; }
.filters.busy :is(button[type="submit"], button:not([type]))::after {
  content: ""; display: inline-block; width: .8em; height: .8em; margin-left: .45em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-round); animation: list-busy .7s linear infinite; }
@keyframes list-busy { to { transform: rotate(360deg); } }
.saved-views { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
/* On a filter bar the saved views stay on one line that scrolls sideways. A long list then never adds a row, so the
   table below does not move when the views arrive, and the Save view button keeps its place. */
.filters .saved-views { flex: 1 1 240px; min-width: 0; flex-wrap: nowrap; overflow-x: auto; }
.filters .saved-views > * { flex: none; }
/* A saved view is a pill. The link opens it. The pencil changes it and the cross deletes it. Both
   open a small panel under the pill. A view someone shared carries a people mark. */
.saved-views .view-pill { position: relative; display: inline-flex; align-items: center; border-radius: var(--radius-round); background: var(--bg-subtle); }
.saved-views .view-pill.on { background: var(--accent-soft); }
.saved-views .view-pill > a { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--radius-round); color: var(--text-secondary); font-size: var(--fs-caption); }
.saved-views .view-pill > a.on { color: var(--accent); }
.saved-views .view-pill > button { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--radius-round); background: transparent; color: var(--text-secondary); cursor: pointer; }
.saved-views .view-pill > button:hover, .saved-views .view-pill > button:focus-visible { background: var(--accent-soft); color: var(--accent); }
.saved-views .view-pill [data-icon] { width: 11px; height: 11px; flex: none; background: currentColor;
  mask: var(--icon-mask) center / contain no-repeat; -webkit-mask: var(--icon-mask) center / contain no-repeat; }
.view-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 10; display: grid; gap: 8px; min-width: 320px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-pop); font-size: var(--fs-meta); }
.view-panel p { margin: 0; }
.view-panel-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.view-panel-row input, .view-panel-row select { flex: 1 1 220px; }

/* ── Forms: built for repetition ────────────────────────────────────────── */
/* A control never draws past the box that holds it: a width utility caps it from above, the container
   caps it otherwise, so the frame keeps its shape at any window width. */
input, select, textarea { font: inherit; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 8px; height: var(--control-h); max-width: 100%; }
textarea { height: auto; min-height: 72px; padding: 6px 8px; line-height: 1.45; resize: vertical; }
/* A list box shows the rows its size attribute asks for. The fixed control height above cut every
   list box to under two rows, so a second choice was half hidden (IND-00FLO). */
select[multiple], select[size]:not([size="0"], [size="1"]) { height: auto; padding: 4px; }
/* A closed select does not wrap its chosen option onto a second line, and left to itself a long one
   draws past the box's own edge into whatever sits beside it rather than stopping there. The open list
   is unaffected: a person choosing still reads the option whole. */
select:not([multiple], [size]:not([size="0"], [size="1"])) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input[type="checkbox"], input[type="radio"] { width: 15px; height: 15px; accent-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { opacity: .6; background: var(--bg-subtle); }
/* An id field types in the code font, but its hint is words. Without this the hint came out in the
   code font and smaller, unlike every other hint in the same filter row. */
input.mono::placeholder, textarea.mono::placeholder { font-family: var(--font-ui); font-size: var(--fs-body); }
/* A long list opened by the system on a Mac covers the whole screen, header and menu too (IND-00G9D).
   A browser that lets a page style its list now keeps a long one in a box that scrolls. Short lists
   and other browsers keep the system list. 16 options is about where the system list outgrows a box.
   A page can ask for the box on a shorter list too, with class="solid-list". The Mac system list is
   see-through, so a blue button under it showed through (IND-00G7R). The page's own box is solid. */
@supports (appearance: base-select) {
  select:not([multiple], [size]):is(:has(option:nth-of-type(16)), .solid-list),
  select:not([multiple], [size]):is(:has(option:nth-of-type(16)), .solid-list)::picker(select) { appearance: base-select; }
  select:not([multiple], [size]):is(:has(option:nth-of-type(16)), .solid-list) { display: inline-flex; align-items: center; }
  select:not([multiple], [size]):is(:has(option:nth-of-type(16)), .solid-list)::picker(select) {
    max-block-size: min(22rem, 60vh); overflow-y: auto; padding: 4px 0;
    color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop);
  }
  select:not([multiple], [size]):is(:has(option:nth-of-type(16)), .solid-list) option { padding: 4px 10px; }
  select:not([multiple], [size]):is(:has(option:nth-of-type(16)), .solid-list) option:is(:hover, :focus-visible) { background: var(--accent-soft); }
}
.form { display: grid; gap: 10px; max-width: 680px; } .form > * { min-width: 0; } .form.wide { max-width: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Many forms wrap the box in its label. The label words go on their own line, with the box under
   them and a small gap. That matches a .field, and the words never touch the box. A tick box keeps
   its words beside it. */
.form > label:not(.check, .field) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: var(--fs-meta); color: var(--text-secondary); font-weight: 500; }
.form > label:not(.check, .field) > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { flex: 1 0 100%; font-size: var(--fs-body); font-weight: 400; }
/* Opt-in for entry forms whose rows contain several long lookups. Keep the form within its
   container, wrap fields when space runs out, and leave wide line tables scrolling inside it. */
.form.responsive { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.form.responsive > *, .form.responsive fieldset, .form.responsive .field { min-width: 0; }
.form.responsive .row { flex-wrap: wrap; align-items: start; }
.form.responsive .row > .field { flex: 1 1 180px; }
.form.responsive .field > input:not([type="checkbox"]):not([type="radio"]),
.form.responsive .field > select, .form.responsive .field > textarea { width: 100%; min-width: 0; }
.form.responsive .form-actions { flex-wrap: wrap; }
/* Opt-in for a longer entry form laid out two fields to a row. Both fields get the same width, so
   they line up down the page. The form may grow wider than the usual 680px. On a narrow screen,
   each field drops to its own line. */
.form.responsive.two-col { max-width: 960px; }
.form.responsive.two-col .row > .field { flex: 1 1 240px; }
/* A row of labelled fields packs them at the top. Say one field has a help line and its neighbour has
   none. A centred row drops the neighbour half a line, so labels and boxes no longer line up. This
   rule holds for every form row on every screen, so no page needs its own fix. It has to live here:
   the security policy refuses a style attribute on the row. "top" still works for other rows. */
.row:has(> .field), .row.top { align-items: start; }
/* A tick box alone in a field has no label above it. Next to a labelled box it would sit level with
   that label. A blank line the height of a label, and a box's height, put it level with the box. */
.row:has(> .field > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea))
  > .field:not(:has(> :is(input, select, textarea))):has(> label > :is(input[type="checkbox"], input[type="radio"]))::before {
  content: "\00a0"; font-size: var(--fs-meta); font-weight: 500; }
.row:has(> .field > :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea))
  > .field:not(:has(> :is(input, select, textarea))) > label:has(> :is(input[type="checkbox"], input[type="radio"])) {
  display: flex; align-items: center; gap: 6px; min-height: var(--control-h); }
/* A form with a table of lines. The fields keep their width. The table takes the page width, because
   eight columns of boxes do not fit in the form's width. */
.form.with-lines, .form.responsive.two-col.with-lines { max-width: none; }
.form.with-lines > * { max-width: 680px; }
.form.two-col.with-lines > * { max-width: 960px; }
.form.with-lines > .line-grid { max-width: none; display: grid; gap: 6px; }
/* A fieldset is as wide as its content by default, which would push the page sideways instead of letting the grid scroll. */
.form.with-lines > fieldset.line-grid { min-width: 0; min-inline-size: 0; }
.line-grid > .field, .line-grid > p { max-width: 680px; margin: 0; }
/* An entry grid has boxes in its cells, so its cells are tighter than a list's. */
.tbl.entry td { padding: 3px 6px; }
/* A fitted entry grid spreads its columns over the page width and its boxes fill their cells, so the
   last columns (the date, the price) show without scrolling sideways. Each column keeps a floor, and
   the grid scrolls only once the page is narrower than the floors add up to. */
.tbl.entry.fit { width: 100%; }
.tbl.entry.fit td > :is(input:not([type="checkbox"], [type="radio"]), select), .tbl.entry.fit td > .combo,
.tbl.entry.fit td > .combo > input { width: 100%; max-width: none; min-width: 0; }
.tbl.entry.fit td > .combo { display: block; }
.tbl.entry.fit .c-item { min-width: 260px; } .tbl.entry.fit .c-text { min-width: 170px; }
.tbl.entry.fit .c-qty { min-width: 110px; } .tbl.entry.fit .c-date { min-width: 150px; } .tbl.entry.fit .c-price { min-width: 120px; }

/* combo: the list a picker opens. It hangs from the box's left edge and is at least as wide as the box.
   A floating list is fixed to the window, placed by the script's stylesheet, so a scrolling table
   cannot clip it; without that sheet it hangs under the box from its own wrapper. */
.combo { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.field > .combo, .form.responsive .field > .combo { display: block; }
.field > .combo > input:not(.w-tiny, .w-code, .w-short, .w-med, .w-long) { width: 100%; }
.combo-list { position: absolute; top: calc(100% + 2px); left: 0; min-width: 100%; max-width: min(560px, 92vw); max-height: 320px;
  overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; z-index: 70; background: var(--bg-elevated); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); scrollbar-width: thin; }
.combo-list.floating { position: fixed; top: 0; left: 0; }
.combo-list.empty { display: none; }
.combo-opt { padding: 6px 10px; font-size: var(--fs-body); line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; }
.combo-opt:hover { background: var(--bg-subtle); }
.combo-opt[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.combo-note { padding: 6px 10px; font-size: var(--fs-caption); color: var(--text-muted); border-top: 1px solid var(--border); }
.combo-note:first-child { border-top: 0; }
.tbl.entry tfoot td { font-weight: 500; background: var(--bg-subtle); border-bottom: 0; }
/* The script shows some buttons only once it can run them, and they stay hidden until then. The btn
   class sets its own display, which would beat the hidden attribute. */
.btn[hidden] { display: none; }
/* A wide form is a grid, and each field stretches to the tallest field in its grid row. A field
   with no help line spread the spare height into its label and box. So its box sat lower.
   Packing each field at the top keeps every box in a grid row level. A tick box gets a box's
   height, so its words stay level with the box beside it. */
.form.wide > .field { align-content: start; }
.form.wide > .field > label.inline-form { min-height: var(--control-h); }
.field { display: grid; gap: 3px; min-width: 0; } .field label { font-size: var(--fs-meta); color: var(--text-secondary); font-weight: 500; }
.field .help { font-size: var(--fs-caption); color: var(--text-muted); } .field .err, .validation-summary-errors { color: var(--danger); font-size: var(--fs-meta); }
.field.invalid input, .field.invalid select, .field.invalid textarea, .input-validation-error { border-color: var(--danger); }
/* The rule above needs a labelled field block. So a plain inline row, such as Add site, got no outline
   when the browser refused a box in it (IND-00FOU). :user-invalid marks any box the browser refuses.
   It waits until the user has typed in the box or tried to submit, so a fresh form does not open in red. */
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger); outline-color: var(--danger); }
.field.span2 { grid-column: span 2; }
/* A box the form needs shows a red star after its label. A person sees what to fill before saving.
   The star keys off the required attribute, so it always agrees with the check the browser makes. */
.field:has(> :is(input, select, textarea)[required]) > label::after,
.form > label:not(.field):has(> :is(input, select, textarea)[required])::after,
label.field:has(> :is(input, select, textarea)[required]) > .cap::after,
.field:has(> :is(input, select, textarea)[required]) > .field-label > label::after { content: " *"; color: var(--danger); font-weight: 600; }
/* A field label with an info button beside it (<info-tip>). A button may not sit inside a label, so both
   sit in .field-label. The red star still follows the label. */
.field-label { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* <info-tip>: guidance a person reads once, kept off the form until asked for. The text shows on hover,
   on keyboard focus, and after a tap (app.js sets aria-expanded). Escape hides it again. The text sits
   above the button, so it never covers the box under the label. A hidden text takes no space, so a tip
   near the right edge never widens the page on a phone. */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; }
.info-tip-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: var(--radius-round); background: none; color: var(--text-muted); cursor: help; }
.info-tip-btn:hover, .info-tip-btn[aria-expanded="true"] { color: var(--accent); }
.info-tip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.info-tip-btn [data-icon] { width: 13px; height: 13px; background: currentColor;
  mask: var(--icon-mask) center / contain no-repeat; -webkit-mask: var(--icon-mask) center / contain no-repeat; }
.info-tip-text { position: absolute; z-index: 40; left: -8px; bottom: calc(100% + 6px); width: max-content; max-width: min(320px, calc(100vw - 32px));
  padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-pop);
  color: var(--text-primary); font-size: var(--fs-meta); font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
  display: none; }
/* A see-through strip over the gap, so the pointer can move from the button onto the text to select it. */
.info-tip-text::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
.info-tip:is(:hover, :focus-within):not(.dismissed) > .info-tip-text, .info-tip:has(> .info-tip-btn[aria-expanded="true"]) > .info-tip-text { display: block; }
legend .info-tip, h2 .info-tip { margin-left: 2px; }
/* In a field or a fieldset the text hangs from the field, not the button: it starts at the field's left
   edge and is never wider than the field, so a button near the right edge cannot push it off a phone. */
.field:has(> .field-label .info-tip), fieldset:has(> legend .info-tip) { position: relative; }
:is(.field-label, legend) .info-tip { position: static; }
:is(.field-label, legend) .info-tip-text { left: 0; bottom: 100%; max-width: min(320px, 100%); }
/* A caption can sit inside the label that wraps its box: label.field > span.cap. It reads like the label
   of a .field. A placeholder or hover text alone is gone once the box holds a value (IND-00FNP). */
label.field > .cap, .field-label > .cap { font-size: var(--fs-meta); color: var(--text-secondary); font-weight: 500; }
/* A value the form works out and shows but never posts, such as a code made on save (<output data-compose>).
   It sits where a box would, so the field lines up with its neighbours, but it has no border to type in. */
.field > output { display: flex; align-items: center; min-height: var(--control-h); padding: 0 10px; border-radius: var(--radius); background: var(--bg-subtle); color: var(--text-primary); overflow-wrap: anywhere; }
.form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
/* The resolve-a-definition row: four inputs and a button on one line when the column is wide enough,
   two lines when it is not. It was the widest fixed row in the system and the one that overflowed. */
.inline-form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* A one-line form whose boxes carry captions above them. Its boxes, buttons and tick boxes line up
   along their bottom edge. A caption then never pushes its box out of line with the button. */
.inline-form:has(> .field) { align-items: flex-end; }
.inline-form:has(> .field) > label.inline-form { min-height: var(--control-h); }
/* "even" gives each captioned box in the row an equal share of the card. So a set of boxes that
   belong together, such as a party's role, currency, terms and Incoterms, is one width. The boxes
   grow on a wide window and wrap on a narrow one (IND-00FPY). */
.inline-form.even { display: flex; }
.inline-form.even > .field { flex: 1 1 150px; }
.inline-form.even > .field > :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { width: 100%; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin: 0; } legend { font-size: var(--fs-meta); color: var(--text-secondary); padding: 0 4px; }

/* ── Toasts, palette, bulk bar ─────────────────────────────────────────── */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 6px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius); background: var(--bg-elevated); border: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); font-size: var(--fs-body); max-width: 480px; }
.toast.ok { border-color: var(--ok); } .toast.err { border-color: var(--danger); } .toast.warn { border-color: var(--warn); }
.toast .act { color: var(--accent); font-weight: 500; cursor: pointer; margin-left: auto; }
/* A refused fetch puts its code and request reference on a line of their own, under the message and
   its buttons, so the message still reads first. */
.toast.has-ref { flex-wrap: wrap; } .toast.has-ref .act + .act { margin-left: 0; }
.toast .toast-ref { order: 1; flex-basis: 100%; font: 400 var(--fs-caption)/1.4 var(--font-mono); color: var(--text-secondary); overflow-wrap: anywhere; }
.cmdk-back { position: fixed; inset: 0; background: var(--scrim); z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk-back[hidden] { display: none; }

/* ── Architecture chat: a transcript that fills the card, newest at the bottom ─────────────────────
   Classes rather than style attributes, because the content security policy refuses inline styles
   (ADR-014) and the page rendered unstyled with a console error on every visit. Colours are tokens. */
.card.chat { display: flex; flex-direction: column; height: 65vh; padding: 0; }
.chat-window { flex-grow: 1; overflow-y: auto; padding: 16px; border-bottom: 1px solid var(--border); }
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 12px; }
.chat-msg.from-user { align-items: flex-end; }
.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: var(--radius); background: var(--bg-app); border: 1px solid var(--border); color: var(--text-primary); }
.chat-msg.from-user .chat-bubble { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chat-role { font-size: var(--fs-meta); opacity: .8; margin-bottom: 4px; font-weight: 600; }
.chat-text { white-space: pre-wrap; font-size: var(--fs-body); }
.chat-compose { padding: 16px; background: var(--bg-surface); }
.chat-form { display: flex; gap: 8px; margin: 0; }
.chat-form { align-items: flex-end; }
.chat-form > .field { flex-grow: 1; min-width: 0; } .chat-input { width: 100%; min-width: 0; }
.markdown-body p { margin-top: 0; margin-bottom: .5rem; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body pre { background: var(--bg-surface); padding: 8px; border-radius: var(--radius); overflow-x: auto; }
.markdown-body code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-subtle); padding: 2px 4px; border-radius: var(--radius-sm); }
.markdown-body ul, .markdown-body ol { margin-top: 0; margin-bottom: .5rem; padding-left: 1.5rem; }
.markdown-body ul:last-child, .markdown-body ol:last-child { margin-bottom: 0; }
.cmdk { width: min(680px, 92vw); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden; }
.cmdk-foot { display: flex; gap: 14px; padding: 6px 12px; border-top: 1px solid var(--border); font-size: var(--fs-caption); color: var(--text-muted); }
/* The shortcut sheet reuses the palette's frame; the body is three columns of key → meaning. */
.sheet { padding: 16px 18px; }
.sheet-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.sheet-col h3 { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 8px; }
.keys { margin: 0; display: grid; gap: 6px; }
.keys > div { display: flex; align-items: center; gap: 10px; }
.keys dt { min-width: 52px; text-align: right; } .keys dt kbd + kbd { margin-left: 2px; }
.keys dd { margin: 0; font-size: var(--fs-meta); color: var(--text-secondary); }
.cmdk input { width: 100%; height: 44px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0 14px; font-size: var(--fs-title); background: transparent; }
.cmdk ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.cmdk li { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--radius); cursor: pointer; font-size: var(--fs-body); }
.cmdk li.on { background: var(--accent-soft); } .cmdk li .kind { margin-left: auto; font-size: var(--fs-caption); color: var(--text-muted); }
.cmdk li .code { font-family: var(--font-mono); color: var(--text-secondary); font-size: var(--fs-meta); }
.cmdk li.mute { color: var(--text-muted); cursor: default; }
.bulkbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 80; display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.bulkbar[hidden] { display: none; }
.bulkbar .count { font-weight: 500; }
.hovercard { position: absolute; z-index: 70; width: 260px; padding: 10px 12px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); font-size: var(--fs-meta); }
/* The peek drawer: a record slides in beside the list, never instead of it. */
.peek-back { position: fixed; inset: 0; background: var(--scrim); z-index: 85; display: flex; justify-content: flex-end; }
.peek { width: min(760px, 94vw); background: var(--bg-app); border-left: 1px solid var(--border-strong); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: peek-in .18s ease; }
@keyframes peek-in { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.peek-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-surface); flex: none; }
.peek-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek-body { overflow-y: auto; padding: 16px 18px 32px; flex: 1; }

/* ── Sign-in and error pages ────────────────────────────────────────────── */
/* 420px rather than 380px: the sign-in card carries the release notice, and two sentences of it
   wrapped to eleven lines at the narrower width. The other cards here hold one short line each. */
.center-card { max-width: 420px; margin: 10vh auto 0; }
.center-card .brand { justify-content: center; margin-bottom: 8px; }
.center-card .notice { margin-bottom: 14px; }

/* ── Scope switcher: which entity and site the page is showing ───────────── */
.scope-switcher { display: flex; gap: 6px; align-items: center; flex: 0 1 auto; min-width: 240px; overflow: clip; overflow-clip-margin: 4px; }
.scope-switcher label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.scope-switcher select { flex: 0 1 180px; min-width: 76px; max-width: 180px; height: var(--control-h); padding: 0 8px; font-size: var(--fs-meta); background: var(--bg-app); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text-primary); cursor: pointer; }
.scope-switcher select:hover { background: var(--bg-subtle); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A narrow window has no room for everything in the top bar. The breadcrumb matters most, so the
   other parts give way first. Below 1180px the user name hides. The scope labels stay for screen
   readers only. The search box drops its key hint. Below 900px the breadcrumb takes a line of its
   own, so the bar never makes the page scroll sideways. These rules sit after the scope lists'
   own rules on purpose. They must win over them. */
@media (max-width: 1180px) {
  .user-name { display: none; }
  .scope-switcher { min-width: 0; }
  .scope-switcher label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .search-trigger { flex-basis: 160px; min-width: 80px; } .search-trigger kbd { display: none; }
}
@media (max-width: 900px) {
  :root { --topbar-h: 80px; }
  .topbar { flex-wrap: wrap; row-gap: 6px; min-height: var(--topbar-h); }
  .crumbs { order: -1; flex: 1 1 100%; justify-content: flex-start; }
  .scope-switcher select { flex-basis: 120px; } .search-trigger { flex-basis: 110px; }
}

/* On a phone the navigation opens above the page instead of squeezing the record beside it.
   Stack record labels and values so long identifiers stay readable at the full content width. */
@media (max-width: 640px) {
  .frame { flex-direction: column; }
  .rail { width: 100%; flex-basis: auto; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  [data-rail="closed"] .rail { display: none; }
  .content { padding: 12px 12px 32px; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dd { margin-bottom: 6px; }
}

/* ── Transitions, effect preview, approval card, error banner ────────────
   A step you cannot take now is shown disabled with the reason, not hidden: a hidden button
   teaches nobody what to do next (UX-042). */
.transitions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.transitions .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.blocked-why { margin-left: 4px; }
.blocked-why a { text-decoration: underline; }

.effect-preview .tbl { margin-top: 4px; }
.effect-preview .flash { margin-top: 8px; margin-bottom: 0; }

.approval-card .kv { margin-top: 10px; }
.approval-card ul { margin: 0; padding-left: 18px; }
.approval-card .transitions { margin-top: 12px; }

.effective-versions { margin-top: 6px; }

.error-banner { display: grid; gap: 6px; }
.error-banner .error-title { font-size: var(--fs-body); }
.error-banner .error-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.error-banner .error-meta { display: flex; flex-wrap: wrap; gap: 10px; } .error-banner .error-meta[hidden] { display: none; }

/* The server said a business rule refuses this input; the browser's own check could not know. */
[data-validate-message] { color: var(--danger); font-size: var(--fs-meta); }
[data-validate-message][hidden] { display: none; }

/* ── Process map: how a module works, as a traced diagram ────────────────────
   Lanes of step boxes in one SVG. Tracing dims what is not connected to the selected box;
   without script every box is still a plain link to its stream section below. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.pmap-card { overflow: hidden; }
.pmap-scroll { overflow-x: auto; scrollbar-width: thin; }
.pmap { display: block; width: 100%; min-width: 880px; height: auto; font-family: var(--font-ui); }
.pmap text { text-anchor: middle; }
.lane-seps line { stroke: var(--border); stroke-width: 1; }
.axis-note { font-size: 11px; font-style: italic; fill: var(--text-muted); text-anchor: start; }
.lane-no { fill: var(--accent); }
.lane-no-t { font-size: 11px; font-weight: 600; fill: var(--accent-ink); }
.lane-t { font-size: 13px; font-weight: 600; fill: var(--text-primary); text-anchor: start; }
.lane-s { font-size: 11px; fill: var(--text-muted); text-anchor: start; }
.pmap-node { cursor: pointer; }
.pmap-node .box { fill: var(--bg-elevated); stroke: var(--border-strong); stroke-width: 1.25; }
.pmap-node:hover .box, .pmap-node:focus-visible .box { stroke: var(--accent); stroke-width: 2; }
.pmap-node .t { font-size: 13px; font-weight: 600; fill: var(--text-primary); }
.pmap-node:hover .t { fill: var(--accent); }
.pmap-node .s { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text-muted); }
.pmap-node:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.stub.in { fill: none; stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 5 4; }
.stub.out { fill: var(--ok-bg); stroke: var(--ok); stroke-width: 1.25; }
a.pmap-node.out:hover .stub.out, a.pmap-node.out:focus-visible .stub.out { stroke-width: 2; }
.stub-t { font-size: 11px; fill: var(--text-secondary); }
.edge { fill: none; stroke: var(--border-strong); stroke-width: 1.5; marker-end: url(#pmap-arrow); }
.edge.ext { stroke: var(--text-muted); stroke-dasharray: 5 4; }
.edge.cross { stroke: var(--info); }
.edge.out { stroke: var(--ok); }
.arrow-head { fill: var(--border-strong); }
.arrow-head-lit { fill: var(--accent); }
.edge-t { font-size: 11px; fill: var(--text-secondary); paint-order: stroke; stroke: var(--bg-surface); stroke-width: 4px; }
[data-node], .edge { transition: opacity .15s ease; }
[data-trace].tracing [data-node] { opacity: .3; }
[data-trace].tracing [data-node].lit { opacity: 1; }
[data-trace].tracing .edge { opacity: .15; }
[data-trace].tracing .edge.lit { opacity: 1; stroke: var(--accent); stroke-width: 2.25; marker-end: url(#pmap-arrow-lit); }
[data-trace].tracing .edge-t { opacity: .2; }
[data-trace].tracing .edge-t.lit { opacity: 1; fill: var(--accent); }
.pmap-stream { scroll-margin-top: 60px; }
.pmap-stream:target { border-color: var(--accent); }

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print { .rail, .topbar, #toasts, .bulkbar, .filters, .page-head .actions { display: none !important; } .content { padding: 0; } .tbl-wrap { border: 0; } .pmap-scroll { overflow: visible; } .pmap { min-width: 0; } }
.filters input.view-name { width: 180px; }

/* Score trend chart (score-trend tag helper): the line takes the accent, the guides stay quiet. */
.score-trend-wrap { color: var(--accent); margin: 4px 0 10px; }
.score-trend-wrap text { fill: var(--text-secondary); }
.score-trend-wrap circle { cursor: default; }
/* The sales campaign workspace, laid out after the campaign mockup: a back link, a header with the
   state beside the name, four figures, and a two-column grid of cards with next-action rows. */
.campaign .back-link { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: var(--fs-meta); color: var(--text-secondary); }
.campaign .back-link a { color: var(--text-secondary); }
.campaign .page-head h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campaign .page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.campaign .menu { position: relative; }
.campaign .menu > summary { list-style: none; cursor: pointer; }
.campaign .menu > summary::-webkit-details-marker { display: none; }
.campaign .menu[open] > .menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 280px; display: grid; gap: 10px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-pop, var(--shadow-card)); }
.campaign .menu-panel form { display: grid; gap: 6px; }
.campaign .menu-panel .help { font-size: var(--fs-caption); color: var(--text-muted); margin: 0; }
.campaign .metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.campaign .metric { display: block; padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); color: inherit; }
.campaign a.metric:hover { text-decoration: none; border-color: var(--border-strong); }
.campaign .metric .label { font-size: 12px; color: var(--text-secondary); }
.campaign .metric .value { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 2px 0; }
.campaign .metric .help { margin: 0; font-size: 11px; color: var(--text-muted); }
.campaign .board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campaign .board > .card { margin: 0; min-width: 0; }
.campaign .card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.campaign .sep { border-top: 1px solid var(--border); margin: 14px 0; }
.campaign .card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.campaign .check-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.campaign .check-row:last-child { border-bottom: 0; }
.campaign .check-row .explain { flex: 1; min-width: 0; }
.campaign .check-row strong { display: block; font-size: 13px; font-weight: 500; }
.campaign .check-row small { display: block; font-size: 12px; color: var(--text-secondary); }
.campaign .mini-summary { display: flex; gap: 22px; flex-wrap: wrap; padding: 10px 0; font-size: 13px; color: var(--text-secondary); }
.campaign .mini-summary strong { display: block; font-size: 16px; margin-top: 2px; color: var(--text-primary); }
.campaign .notice { border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); padding: 9px 12px; font-size: 12px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.campaign .notice.warn { border-color: var(--warn); background: var(--warn-bg); }
.campaign-chart { display: block; width: 100%; height: 170px; }
.campaign-chart rect { fill: var(--accent); }
.campaign-chart line { stroke: var(--border); }
.campaign-chart text { fill: var(--text-secondary); font-size: 11px; }
.campaign-chart .axis-label { fill: var(--text-primary); }
@media (max-width: 1100px) { .campaign .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .campaign .board { grid-template-columns: 1fr; } }
.campaign .grow { flex: 1; }
/* Campaign dialogs. Each opens when its id is the page address's fragment (a plain link to #id) and
   closes with a link back to #, so the campaign actions need no script and pass the content policy. */
.campaign .modal { display: none; position: fixed; inset: 0; z-index: 100; background: var(--scrim); align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow: auto; }
.campaign .modal:target { display: flex; }
.campaign .dialog { width: min(790px, 100%); background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.campaign .dialog.sm { width: min(800px, 100%); }
.campaign .dialog-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.campaign .dialog-head h2 { flex: 1; margin: 0; font-size: 16px; }
.campaign .dialog-body { padding: 16px; }
.campaign .dialog-body p { margin: 0 0 12px; }
.campaign .dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.campaign .btn.icon { width: 32px; padding: 0; }
.campaign .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campaign .form-grid .span2 { grid-column: span 2; }
.campaign .dialog .field { display: grid; gap: 3px; min-width: 0; }
.campaign .dialog .field label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.campaign .dialog .field label.req::after { content: " *"; color: var(--danger); }
.campaign .dialog .field input, .campaign .dialog .field select, .campaign .dialog .field textarea { width: 100%; }
.campaign .dialog .check-line { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.campaign .dialog .button-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.campaign .dialog .button-row form { margin: 0; }
@media (max-width: 520px) { .campaign .form-grid { grid-template-columns: 1fr; } .campaign .form-grid .span2 { grid-column: auto; } }
/* Dialogs sit in the middle of the screen; a tall one starts at the top and scrolls. */
.campaign .modal .dialog { margin: auto; }
/* The note under a dialog's fields reads like the field labels above it. */
.campaign .dialog .help { font-size: 12px; font-weight: 500; color: var(--text-secondary); line-height: 1.45; }
/* The campaign's own nine views, after the mockup; the bar scrolls sideways on a narrow screen. */
.campaign .campaign-tabs { overflow-x: auto; scrollbar-width: thin; }
.campaign .campaign-tabs a { white-space: nowrap; }
/* After the mockup: the back link is a blue link, and the amendment banner runs the full width with
   its sentence on the left and its buttons on the right, instead of the 86-character message box. */
.campaign .back-link { font-size: 13px; }
.campaign .back-link a { color: var(--accent); font-size: 14px; }
.campaign .back-link a:hover { text-decoration: underline; }
.campaign .page-head .titles { flex: 1 1 320px; }
.campaign .notice { max-width: none; width: 100%; flex-wrap: nowrap; gap: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.45; border-radius: var(--radius-sm); }
.campaign .notice > .grow { flex: 1 1 auto; min-width: 0; }
.campaign .notice > .btn, .campaign .notice > form { flex: none; }
@media (max-width: 820px) { .campaign .notice { flex-wrap: wrap; } }
/* Campaign tables, after the mockup: the SKU or dealer link with its description under it, actions to
   the right, a footer line under the table, and the filter row with its count. */
.campaign .page-head h2 { font-size: 16px; }
.campaign .filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.campaign .filters input[type=search] { min-width: 220px; }
.campaign .filters .result-count { font-size: 12px; color: var(--text-muted); }
.campaign .tbl-wrap { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); box-shadow: var(--shadow-card); }
.campaign .tbl { width: 100%; font-size: 13px; }
.campaign .tbl td .sub { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.campaign .tbl td.key a { text-decoration: underline; text-underline-offset: 2px; }
.campaign .tbl tbody tr:last-child td { border-bottom: 0; }
.campaign .tbl tbody tr:hover td { background: var(--bg-subtle); }
.campaign .tbl .actions { text-align: right; }
.campaign .tbl .empty-cell { text-align: center; color: var(--text-muted); padding: 24px; }
.campaign .tbl-foot { padding: 8px 10px; font-size: 12px; color: var(--text-secondary); }
.campaign .help { font-size: 11px; color: var(--text-muted); }
/* Dealer attainment: the percentage beside a thin bar, drawn with the progress element. */
.campaign .small-bar { display: flex; gap: 8px; align-items: center; }
.campaign progress.attainment { appearance: none; -webkit-appearance: none; width: 100px; height: 6px; border: 0; border-radius: var(--radius-sm); background: var(--bg-subtle); overflow: hidden; }
.campaign progress.attainment::-webkit-progress-bar { background: var(--bg-subtle); border-radius: var(--radius-sm); }
.campaign progress.attainment::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-sm); }
.campaign progress.attainment::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-sm); }
.campaign .notice:not(.warn) { border-color: var(--accent); background: var(--accent-soft); }
/* The campaign quote preview: two columns of choices, and the net total large on the right. */
.campaign .quote-form .field label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.campaign .quote-form .field select, .campaign .quote-form .field input { width: 100%; }
.campaign .check-line { display: flex; gap: 8px; align-items: center; }
.campaign .quote-total { display: flex; align-items: center; gap: 8px; }
.campaign .quote-total .total { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.campaign .card-actions .help { align-self: center; }
/* A filter bar with labelled fields lines its buttons up with the boxes, not with the labels. */
.campaign .filters.bottom { align-items: flex-end; gap: 10px; }
.campaign .filters .field { display: grid; gap: 3px; }
.campaign .filters .field label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
/* Campaign history rows and the small View links, after the mockup. */
.campaign .audit { display: flex; gap: 12px; border-bottom: 1px solid var(--border); padding: 12px 0; }
.campaign .audit:last-child { border-bottom: 0; }
.campaign .audit time { width: 145px; flex: none; font-size: 12px; color: var(--text-secondary); }
.campaign .audit .event { flex: 1; font-size: 13px; }
.campaign .audit .event strong { font-weight: 500; }
.campaign .audit .event p { margin: 3px 0; color: var(--text-secondary); font-size: 12px; }
.campaign .linkbutton { font-size: 12px; color: var(--accent); }
@media (max-width: 520px) { .campaign .audit { flex-direction: column; gap: 4px; } }
/* The campaign bulk upload wizard, after the item creation mockup: a tall dialog with a header, a
   numbered step bar, a scrolling body and a footer that stays put. Every colour and corner is a token. */
.campaign .dialog.bulk { width: min(1180px, 100%); height: min(820px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; margin: auto; }
/* The Import goals wizard shows every mapped column in its grid, so it is a little wider than the other bulk dialogs. */
.campaign #import-goals-bulk .dialog.bulk { width: min(1400px, 100%); }
.campaign .bulk-form { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0; }
.campaign .bulk-head { display: flex; align-items: flex-start; gap: 15px; padding: 19px 25px 16px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); flex: none; }
.campaign .bulk-head h2 { margin: 0 0 1px; font-size: 20px; font-weight: 600; }
.campaign .bulk-context { margin-bottom: 3px; font-size: 12px; color: var(--text-muted); }
.campaign .bulk-subtitle { font-size: 12px; color: var(--text-muted); }
.campaign .bulk-close { padding: 3px 8px; font-size: 23px; line-height: 23px; color: var(--text-secondary); border-radius: var(--radius); }
.campaign .bulk-close:hover { text-decoration: none; background: var(--bg-surface); color: var(--text-primary); }
.campaign .bulk-steps { display: flex; padding: 15px 25px; border-bottom: 1px solid var(--border); background: var(--bg-app); flex: none; }
.campaign .bulk-step { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 12px; color: var(--text-muted); }
.campaign .bulk-step:last-child { flex: 0 0 auto; }
.campaign .bulk-step:not(:last-child)::after { content: ""; flex: 1; height: 1px; margin: 0 17px; background: var(--border); }
.campaign .bulk-step .num { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 1px solid var(--border-strong); border-radius: var(--radius-round); font-size: 11px; }
.campaign .bulk-step .step-name { white-space: nowrap; }
.campaign .bulk-step.current { color: var(--text-primary); font-weight: 600; }
.campaign .bulk-step.current .num { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.campaign .bulk-step.done { color: var(--accent); }
.campaign .bulk-step.done .num { border-color: var(--accent); background: var(--accent-soft); }
.campaign .bulk-body { flex: 1; min-height: 0; overflow: auto; padding: 25px; }
.campaign .bulk-foot { display: flex; align-items: center; gap: 10px; min-height: 69px; padding: 15px 25px; border-top: 1px solid var(--border); background: var(--bg-subtle); flex: none; }
.campaign .bulk-foot-note { margin-right: auto; font-size: 12px; color: var(--text-muted); }
.campaign .bulk-intro { margin-bottom: 22px; }
.campaign .bulk-intro.bulk-tight { margin-bottom: 10px; }
.campaign .bulk-intro h2 { margin: 0 0 5px; font-size: 21px; font-weight: 600; }
.campaign .bulk-intro p { margin: 0; color: var(--text-muted); }
.campaign .bulk-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.campaign .bulk-flex { display: flex; align-items: center; gap: 10px; }
.campaign .bulk-muted { color: var(--text-muted); }
.campaign .bulk-note { margin: 0; font-size: 12px; color: var(--text-muted); }
.campaign .mt-lg { margin-top: 24px; }
.campaign .bulk-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.campaign .bulk-choice { display: flex; flex-direction: column; align-items: flex-start; min-height: 236px; padding: 27px 25px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-surface); color: var(--text-primary); }
.campaign .bulk-choice:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }
.campaign .bulk-choice h3 { margin: 0 0 6px; font-size: 18px; }
.campaign .bulk-choice p { max-width: 350px; margin: 3px 0 16px; color: var(--text-secondary); }
.campaign .bulk-tile-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 17px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.campaign .bulk-arrow { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--accent); }
.campaign .bulk-callout { margin: 16px 0; padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--info-bg); color: var(--text-primary); font-size: 13px; }
.campaign .bulk-callout.small { font-size: 12px; }
.campaign .bulk-callout.warn { border-color: var(--warn); background: var(--warn-bg); }
.campaign .bulk-callout.error { border-color: var(--danger); background: var(--danger-bg); }
.campaign .bulk-callout.success { border-color: var(--ok); background: var(--ok-bg); }
.campaign .bulk-upload { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.campaign .bulk-review { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.campaign .bulk-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 241px; padding: 25px; text-align: center; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); color: var(--text-primary); cursor: pointer; }
.campaign .bulk-drop:hover, .campaign .bulk-drop:focus-within { border-style: solid; }
.campaign .bulk-drop-title { font-size: 16px; font-weight: 600; }
.campaign .bulk-upload-icon { margin-bottom: 3px; color: var(--accent); }
/* The file box covers the whole drop area, so a file dropped anywhere on it is taken without a script. */
.campaign .bulk-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.campaign .bulk-file-card { display: flex; align-items: center; gap: 12px; margin-top: 13px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.campaign .bulk-file-icon { color: var(--accent); }
.campaign .bulk-inline-actions { display: flex; align-items: center; gap: 16px; margin-top: 17px; font-size: 12px; }
.campaign button.linkbutton { padding: 0; border: 0; background: none; cursor: pointer; }
.campaign button.linkbutton:hover { text-decoration: underline; }
.campaign .bulk-side { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); }
.campaign .bulk-side h3 { margin: 0 0 6px; font-size: 16px; }
.campaign .bulk-side ul { margin: 10px 0 18px; padding-left: 17px; font-size: 12px; color: var(--text-secondary); }
.campaign .bulk-side li { margin-bottom: 8px; }
.campaign .bulk-aside-note { margin: 18px 0 0; font-size: 12px; color: var(--text-muted); }
.campaign .bulk-mapping td { padding: 9px 12px; }
.campaign .bulk-mapping select { width: 100%; max-width: 280px; }
.campaign .bulk-mapping .sample { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.campaign .bulk-mapping .w-25 { width: 25%; }
.campaign .bulk-mapping .w-33 { width: 33%; }
.campaign .bulk-metrics { display: flex; gap: 12px; margin: 16px 0; }
.campaign .bulk-metric { flex: 1; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); font-size: 12px; color: var(--text-muted); }
.campaign .bulk-metric strong { margin-right: 9px; font-size: 25px; font-weight: 600; color: var(--text-primary); }
.campaign .bulk-metric.good strong { color: var(--ok); }
.campaign .bulk-metric.bad strong { color: var(--danger); }
.campaign button.bulk-metric { font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.campaign button.bulk-metric:hover, .campaign button.bulk-metric.active { border-color: var(--accent); background: var(--accent-soft); }
.campaign .bulk-sample-bar { padding: 0 25px; }
.campaign .bulk-mapbox { margin-bottom: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); font-size: 13px; }
.campaign .bulk-mapbox summary { cursor: pointer; }
.campaign .bulk-legend { display: flex; gap: 8px; margin: 6px 0 0; }
.campaign .bulk-tabs { display: flex; gap: 19px; margin: 6px 0 14px; border-bottom: 1px solid var(--border); }
.campaign .bulk-tab { padding: 8px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.campaign .bulk-tab.active { border-bottom-color: var(--accent); color: var(--accent); }
.campaign .bulk-validation-note { margin: 0 0 10px; }
.campaign .bulk-worktable { min-width: 1120px; }
.campaign .bulk-worktable td { vertical-align: top; padding: 7px 8px; }
.campaign .bulk-worktable input { width: 100%; min-width: 95px; font-size: 12px; }
.campaign .bulk-worktable input.sku { min-width: 135px; }
.campaign .bulk-worktable td.invalid input, .campaign .bulk input.invalid { border-color: var(--danger); background: var(--danger-bg); }
.campaign .bulk-worktable .w-row { width: 45px; }
.campaign .bulk-worktable .w-check { width: 44px; }
.campaign .bulk-worktable input[type=checkbox] { width: auto; min-width: 0; }
.campaign .bulk-worktable .w-status { width: 87px; }
.campaign .bulk-worktable .w-sku { width: 200px; }
.campaign .bulk-worktable .w-category { width: 150px; }
.campaign .bulk-worktable .w-date { width: 130px; }
.campaign .bulk-worktable .w-qty { width: 110px; }
.campaign .bulk-worktable .w-actions { width: 150px; }
.campaign .bulk .errtext { display: block; max-width: 175px; margin-top: 4px; font-size: 11px; color: var(--danger); }
.campaign .bulk-worktable tr.excluded td { opacity: .45; }
.campaign .bulk-worktable .row-actions { white-space: nowrap; }
.campaign .bulk-tablecount { font-size: 12px; color: var(--text-muted); }
.campaign .bulk-section-title { margin: 4px 0 14px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); }
.campaign .bulk .form-grid { gap: 17px 20px; }
.campaign .bulk .field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.campaign .bulk .field label, .campaign .bulk .bulk-label { font-weight: 600; color: var(--text-secondary); }
.campaign .bulk-req { color: var(--danger); }
.campaign .bulk-field-error { color: var(--danger); }
.campaign .bulk-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.campaign .bulk-card h3 { margin: 0; padding: 13px 16px; background: var(--bg-subtle); font-size: 16px; }
.campaign .bulk-kv { display: grid; grid-template-columns: 150px 1fr; gap: 15px; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.campaign .bulk-card > .bulk-kv:first-child { border-top: 0; }
.campaign .bulk-kv > span:first-child { color: var(--text-muted); }
.campaign .bulk-review h3.mt-lg { margin-bottom: 8px; font-size: 16px; }
.campaign .bulk-checkrow { display: flex; align-items: center; gap: 9px; padding: 13px 0; font-size: 12px; }
.campaign .bulk-success { padding: 36px 20px; text-align: center; }
.campaign .bulk-success h2 { margin: 0 0 5px; font-size: 24px; }
.campaign .bulk-success p { margin: 0 0 14px; color: var(--text-muted); }
.campaign .bulk-success-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: var(--radius-round); background: var(--ok-bg); color: var(--ok); font-size: 28px; }
.campaign .bulk-narrow { max-width: 650px; margin: 0 auto; }
@media (max-width: 820px) {
  .campaign .bulk-choices, .campaign .bulk-upload, .campaign .bulk-review { grid-template-columns: 1fr; }
  .campaign .bulk-metrics { flex-wrap: wrap; }
  .campaign .bulk-step .step-name { display: none; }
}
/* Dealer pricing profile (Commercial / Dealers / Detail, pricing-programs tab). */
.dealer-pricing .cols-6 { grid-template-columns: repeat(6, 1fr); }
.dealer-pricing .pill { justify-self: start; width: fit-content; }
.dealer-pricing .goal-form { grid-template-columns: 1fr 1fr 2fr auto; align-items: start; }
.dealer-pricing .goal-link { margin-top: 1.4rem; }
.dealer-pricing .scheme-peek { width: min(340px, 94vw); }
.dealer-pricing .history-peek { width: min(720px, 94vw); }
/* The dealer profile keeps its message banner out of the flow, so showing one never moves the tabs or buttons under it. */
main:has([data-page="dealer-profile"]) > .flash { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; max-width: min(640px, 92vw); margin: 0; box-shadow: var(--shadow-pop); background-clip: padding-box; cursor: pointer; }
.dealer-pricing .scheme-submit { margin-top: 0.75rem; }

/* Core item creation: native modal, using the shell's theme and density tokens. */
.item-wizard { width: min(920px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.item-wizard::backdrop { background: var(--scrim); }
.item-wizard [hidden] { display: none !important; }
.item-wizard-head, .item-wizard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border); }
.item-wizard-head h2 { margin: 4px 0 0; }
.item-wizard-body { padding: 24px; }
.item-wizard-steps { display: flex; flex-wrap: wrap; gap: 24px; padding: 14px 24px; border-bottom: 1px solid var(--border); color: var(--text-muted); }
.item-wizard-steps [aria-current] { color: var(--accent); font-weight: 600; }
.item-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.item-method { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; text-align: left; font: inherit; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.item-method:hover:not(:disabled) { border-color: var(--accent); }
.item-method:disabled { opacity: .6; cursor: default; }
.item-wizard-form { max-width: none; }
.item-wizard details { margin: 20px 0; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.item-wizard summary { cursor: pointer; margin-bottom: 12px; }
.item-wizard-foot { padding: 18px 0 0; border-bottom: 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.item-wizard-foot .meta { margin-right: auto; }
.item-review { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; }
.item-review dt, .item-review dd { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.item-review dt { color: var(--text-muted); }
.item-ack { display: flex; gap: 10px; align-items: center; margin: 20px 0; }
.item-success { text-align: center; padding: 32px 0; }
.item-success-mark { display: block; font-size: 36px; color: var(--accent); }
.item-wizard [data-item-errors] { padding: 12px; border: 1px solid var(--danger); margin-bottom: 16px; }
@media (max-width: 600px) { .item-methods { grid-template-columns: 1fr; } .item-wizard-body { padding: 16px; } .item-wizard .row { flex-wrap: wrap; } .item-review { grid-template-columns: 1fr 1fr; } }

/* Bulk import remains inside the item creation dialog. */
.item-bulk-upload { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; }
.item-bulk-drop { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; background: var(--bg-elevated); }
.item-bulk-drop.drag { border-color: var(--accent); }
.item-bulk-callout { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.item-bulk-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-block: 1rem; }
.item-bulk-metrics > div { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; }
.item-bulk-metrics strong { display: block; font-size: 1.5rem; }
.item-bulk-table { overflow-x: auto; max-height: 24rem; margin-block: 1rem; }
.item-bulk-table table { width: 100%; }
.item-bulk-table input { min-width: 7rem; width: 100%; }
.item-bulk-table select { min-width: 7rem; white-space: nowrap; }
.item-bulk-table .err { display: block; max-width: 15rem; white-space: normal; }
[data-bulk-error] { color: var(--danger); padding-block: .75rem; }
@media (max-width: 700px) { .item-bulk-upload { grid-template-columns: 1fr; } .item-bulk-metrics { grid-template-columns: repeat(2, 1fr); } }

/* Bulk workbench: keep the single-item modal's size and layout unchanged. */
.item-wizard.item-bulk-shell { width: min(1440px, calc(100vw - 40px)); height: min(1000px, calc(100dvh - 40px)); overflow: hidden; }
.item-bulk-shell[open] { display: flex; flex-direction: column; }
.item-bulk-shell .item-wizard-head { padding: 24px 32px; flex: none; }
.item-bulk-shell .item-wizard-head h2 { font-size: 24px; }
.item-bulk-shell .item-wizard-head p { margin: 8px 0 0; color: var(--text-muted); }
.item-bulk-shell .item-wizard-steps { flex: none; flex-wrap: nowrap; align-items: center; gap: 0; padding: 20px 32px; }
.item-bulk-step { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; }
.item-bulk-step:not(:last-child) { flex: 1; }
.item-bulk-step:not(:last-child)::after { content: ''; height: 1px; background: var(--border); flex: 1; margin: 0 20px; min-width: 12px; }
.item-bulk-step-circle { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 1px solid var(--border-strong); border-radius: var(--radius-round); }
.item-bulk-step.done { color: var(--accent); }
.item-bulk-step[aria-current] .item-bulk-step-circle { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.item-bulk-shell .item-wizard-body { flex: 1; min-height: 0; overflow: auto; padding: 0; }
.item-bulk-shell [data-item-bulk] { display: flex; flex-direction: column; min-height: 100%; }
.item-bulk-shell [data-bulk-panel] { padding: 28px 32px; flex: 1; }
.item-bulk-shell [data-bulk-panel] > h3, .item-bulk-intro h3 { font-size: 23px; margin: 0 0 8px; }
.item-bulk-shell [data-bulk-panel] > p { margin: 0 0 24px; }
.item-bulk-shell .item-wizard-foot { position: sticky; bottom: 0; background: var(--bg-elevated); margin-top: auto; padding: 18px 32px; z-index: 2; }
.item-bulk-shell [data-bulk-error] { margin: 0; padding: 12px 32px; }
.item-bulk-upload { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); margin-top: 28px; align-items: start; }
.item-bulk-drop { padding: 36px 20px; border-width: 1px; background: var(--bg-subtle); }
.item-bulk-upload-icon { display: block; color: var(--accent); margin: 0 auto 20px; }
.item-bulk-drop h3 { font-size: 20px; margin-bottom: 20px; }
.item-bulk-drop p { color: var(--text-muted); margin: 20px 0; }
.item-bulk-side { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; background: var(--bg-elevated); }
.item-bulk-side p { margin: 16px 0; color: var(--text-muted); line-height: 1.6; }
.item-bulk-file { display: flex; align-items: center; gap: 16px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-subtle); padding: 16px 20px; margin: 20px 0 8px; }
.item-bulk-file > span:first-child { color: var(--accent); font-size: 26px; }
.item-bulk-file > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.item-bulk-file p { color: var(--text-muted); margin: 4px 0 0; }
.item-bulk-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
#item-price-workbench .item-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
#item-price-workbench .item-card-head h2 { margin-bottom: 2px; }
#item-price-workbench .item-card-head p { margin: 0; }
.item-bulk-mapping-status { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ok); background: var(--bg-subtle); }
.item-bulk-mapping-status.invalid { color: var(--danger); }
.item-bulk-table { max-height: none; border: 1px solid var(--border); border-radius: var(--radius); }
.item-bulk-table table { border-collapse: collapse; text-align: left; }
.item-bulk-table th { background: var(--bg-subtle); color: var(--text-muted); font-weight: 600; }
.item-bulk-table td, .item-bulk-table th { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.item-bulk-table tr:last-child td { border-bottom: 0; }
[data-bulk-mapping] td:first-child { font-weight: 600; width: 25%; }
[data-bulk-mapping] td:nth-child(2) { width: 33%; overflow-wrap: anywhere; }
[data-bulk-mapping] select, [data-bulk-mapping] input { width: 100%; }
.item-bulk-callout { background: var(--bg-subtle); line-height: 1.7; margin-top: 20px; }
.item-bulk-metrics { gap: 16px; margin: 24px 0; }
.item-bulk-metrics > div { display: flex; align-items: baseline; gap: 12px; padding: 22px; }
.item-bulk-metrics strong { font-size: 28px; }
.item-bulk-metrics .ready strong { color: var(--ok); }
.item-bulk-metrics .errors strong { color: var(--danger); }
.item-bulk-tabs { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.item-bulk-tabs button { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--text-muted); padding: 12px 0; }
.item-bulk-tabs button[aria-pressed="true"] { color: var(--accent); border-bottom-color: var(--accent); }
[data-bulk-rows] input { min-width: 150px; }
[data-bulk-rows] [data-bulk-field="Name"] { min-width: 220px; }
[data-bulk-rows] td:nth-child(2) { min-width: 110px; }
.item-bulk-row-errors { max-width: 260px; font-size: 12px; }
.item-bulk-row-errors summary { color: var(--danger); }
.item-bulk-shell .item-bulk-row-errors { margin: 6px 0 0; padding: 0; border: 0; }
.item-bulk-row-errors p { margin: 8px 0; overflow-wrap: anywhere; }
.item-bulk-detail-fields { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 16px; padding: 12px; }
.item-bulk-detail-fields label { display: flex; flex-direction: column; gap: 6px; }
.item-bulk-review-layout { display: grid; grid-template-columns: 3fr 1fr; gap: 24px; margin: 28px 0; }
.item-bulk-summary { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.item-bulk-summary > strong { display: block; padding: 20px; background: var(--bg-subtle); overflow-wrap: anywhere; }
.item-bulk-summary .item-review { border: 0; border-radius: 0; }
.item-bulk-success-summary { max-width: 760px; margin: 0 auto 30px; }
.item-bulk-shell .item-success { padding: 50px 0 32px; }
.item-bulk-shell .item-success-mark { margin: 0 auto 24px; background: var(--bg-subtle); color: var(--ok); border-radius: var(--radius-round); width: 76px; height: 76px; display: grid; place-items: center; }
.item-bulk-shell .item-success h3 { font-size: 28px; line-height: 1.25; margin: 0 0 12px; }
@media (max-width: 1280px) { .item-bulk-step { font-size: 12px; gap: 6px; } .item-bulk-step:not(:last-child)::after { margin: 0 6px; } }
@media (max-width: 1000px) { .item-bulk-step { font-size: 12px; gap: 6px; } .item-bulk-step:not(:last-child)::after { margin: 0 8px; } .item-bulk-review-layout { grid-template-columns: 2fr 1fr; } }
@media (max-width: 700px) { .item-wizard.item-bulk-shell { width: calc(100vw - 16px); height: calc(100dvh - 16px); } .item-bulk-shell .item-wizard-head, .item-bulk-shell [data-bulk-panel], .item-bulk-shell .item-wizard-foot { padding: 16px; } .item-bulk-shell .item-wizard-steps { overflow-x: auto; padding: 16px; } .item-bulk-upload, .item-bulk-review-layout { grid-template-columns: 1fr; } .item-bulk-metrics > div { padding: 12px; } .item-bulk-detail-fields { grid-template-columns: 1fr; } }

.item-bulk-shell [data-item-close] { font-size: 24px; line-height: 1; padding: 8px; }
.item-bulk-upload-main { min-width: 0; }
.item-bulk-shell .item-bulk-row-errors summary { margin-bottom: 0; }
.item-bulk-shell .item-bulk-mapping-status { background: var(--ok-bg); border-color: var(--ok); }
.item-bulk-shell .item-bulk-mapping-status.invalid { background: var(--danger-bg); border-color: var(--danger); }
@media (max-height: 850px) { .item-bulk-drop { padding: 20px; } .item-bulk-drop p { margin: 14px 0; } }

/* Bulk pricing grid and its dialogs. Tokens only. The grid scrolls inside its own container, so the dialog never scrolls sideways. */
.item-bulk-shell .item-wizard-body { overflow-x: hidden; }
.item-bulk-shell [data-bulk-panel] { min-width: 0; }
.item-bulk-entity { max-width: 520px; margin: 0 0 8px; }
.item-bulk-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 8px; }
.item-bulk-toolbar > label { display: flex; flex-direction: column; gap: 4px; }
.item-bulk-toolbar > .item-bulk-check { flex-direction: row; align-items: center; height: var(--control-h); }
.item-bulk-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.item-bulk-gridwrap { max-width: 100%; max-height: max(320px, 52vh); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.item-bulk-gridwrap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.item-bulk-grid { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: var(--fs-table); }
.item-bulk-grid th, .item-bulk-grid td { height: 40px; padding: 0 10px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; text-align: left; background: var(--bg-elevated); }
.item-bulk-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--bg-subtle); color: var(--text-muted); font-weight: 600; }
.item-bulk-grid .item-bulk-pick { position: sticky; left: 0; z-index: 2; width: 44px; min-width: 44px; text-align: center; }
.item-bulk-grid .item-bulk-code { position: sticky; left: 144px; z-index: 2; min-width: 150px; font-weight: 600; }
.item-bulk-grid thead .item-bulk-pick, .item-bulk-grid thead .item-bulk-code { z-index: 4; }
.item-bulk-grid td.item-bulk-calc { background: var(--bg-subtle); color: var(--accent); font-variant-numeric: tabular-nums; }
.item-bulk-grid td.item-bulk-ro { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; background: var(--bg-subtle); }
.item-bulk-grid td.item-bulk-ro:focus { max-width: none; white-space: normal; overflow: visible; outline: 2px solid var(--accent); outline-offset: -2px; }
.item-bulk-grid td.item-bulk-helper { border-bottom-style: dashed; }
.item-bulk-grid td input:not([type="checkbox"]), .item-bulk-grid td select { width: 100%; min-width: 7.5rem; height: 38px; border: 0; border-radius: 0; background: transparent; padding: 0 8px; }
.item-bulk-grid td.item-bulk-list select { min-width: 16rem; }
.item-bulk-grid td.item-bulk-supplier input { min-width: 12rem; }
.item-bulk-grid td input:not([type="checkbox"]):focus, .item-bulk-grid td select:focus { background: var(--accent-soft); field-sizing: content; min-width: 100%; }
.item-bulk-grid input[readonly], .item-bulk-grid input.item-bulk-locked { background: var(--bg-subtle); color: var(--text-muted); }
.item-bulk-grid .input-validation-error { box-shadow: inset 0 0 0 1px var(--danger); background: var(--danger-bg); }
.item-bulk-grid tr.item-bulk-selected td { background: var(--accent-soft); }
.item-bulk-grid tr.item-bulk-excluded td { color: var(--text-muted); }
.item-bulk-grid tr.item-bulk-excluded td > :not(button) { opacity: .6; }
.item-bulk-grid td.item-bulk-status { min-width: 130px; }
.item-bulk-gridnote { margin: 8px 0; }
.item-bulk-grid .item-bulk-code { width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.item-bulk-grid .item-bulk-name { position: sticky; left: 294px; z-index: 2; min-width: 220px; }
.item-bulk-grid thead .item-bulk-name { z-index: 4; }
.item-bulk-grid td.item-bulk-code input:not([type="checkbox"]), .item-bulk-grid td.item-bulk-name input:not([type="checkbox"]) { field-sizing: fixed; width: 100%; min-width: 0; font-weight: inherit; }
.item-bulk-grid td input:not([type="checkbox"]):hover:not(:disabled), .item-bulk-grid td select:hover:not(:disabled) { background: var(--bg-subtle); }
.item-bulk-countbar { margin: 8px 0; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); }
.item-bulk-countbar[hidden], [data-item-bulk-entity-notice][hidden] { display: none; }
.item-bulk-countbar-bad { border-color: var(--danger); background: var(--danger-bg); }
.item-bulk-countbar .err { color: var(--danger); }
.item-bulk-issue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.item-bulk-toolbar > .btn { height: var(--control-h); }

.item-bulk-toolbar input[type="search"] { min-width: 18rem; }
/* Seven steps: tighten the stepper before it clips, and let it scroll rather than overflow the dialog. */
.item-bulk-shell .item-wizard-steps { overflow-x: auto; scrollbar-width: thin; }
@media (max-width: 1500px) { .item-bulk-step { font-size: 13px; gap: 8px; } .item-bulk-step:not(:last-child)::after { margin: 0 10px; } }
.item-bulk-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-elevated); color: var(--text-primary); overflow: auto; }
.item-bulk-dialog::backdrop { background: var(--scrim); }
.item-bulk-dialog .field { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.item-bulk-edit-value { display: block; }
.item-bulk-edit-value > * { width: 100%; }
.item-bulk-columns-list { display: grid; gap: 2px; margin: 16px 0; max-height: 50vh; overflow: auto; }
.item-bulk-columns-list .item-bulk-check { padding: 8px; border-radius: var(--radius-sm); }
.item-bulk-columns-list .item-bulk-check:hover { background: var(--bg-subtle); }
.item-bulk-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
/* Open select lists follow the theme instead of the browser's own light popup. */
.item-wizard select option, .item-bulk-dialog select option { background: var(--bg-elevated); color: var(--text-primary); }
@media (max-width: 700px) { .item-bulk-toolbar > label:first-child { width: 100%; } .item-bulk-gridwrap { max-height: 40vh; } }

/* Commercial discounts workspace. It sits inside .campaign, so it borrows that block's metrics, notices
   and dialogs, and adds the market navigation, the dense rule table, the price trace and the wizard form
   layout. Every colour is a token; none of it names a screen size beyond the two layout breakpoints. */
.discounts .disc-note { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); }
.discounts .disc-workspace { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.discounts .disc-markets { border-right: 1px solid var(--border); padding-right: 14px; display: grid; gap: 2px; }
.discounts .disc-markets .label { margin: 0 10px 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.discounts .disc-markets a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--radius); color: var(--text-secondary); font-size: 13px; }
.discounts .disc-markets a:hover { text-decoration: none; background: var(--bg-subtle); color: var(--text-primary); }
.discounts .disc-markets a.child { padding-left: 24px; font-size: 12px; }
.discounts .disc-markets a.on { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.discounts .disc-markets a span { color: var(--text-muted); font-size: 11px; }
.discounts .disc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.discounts .disc-head h2 { margin: 0 0 2px; font-size: 18px; }
.discounts .disc-head p { margin: 0; font-size: 12px; color: var(--text-secondary); }
.discounts .disc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.discounts .disc-toolbar input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.discounts .disc-toolbar select { flex: 0 1 auto; max-width: 190px; }
.discounts .disc-toolbar .seg a { display: inline-block; padding: 5px 9px; font-size: 12px; color: var(--text-secondary); background: var(--bg-surface); }
.discounts .disc-toolbar .seg a + a { border-left: 1px solid var(--border); }
.discounts .disc-toolbar .seg a.on { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.discounts .tbl td small { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.discounts .disc-rate { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.discounts .disc-prio { display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: var(--radius-round); background: var(--bg-subtle); border: 1px solid var(--border); font-size: 11px; text-align: center; font-variant-numeric: tabular-nums; }
.discounts .disc-foot { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 14px; font-size: 11px; color: var(--text-muted); }
.discounts .disc-callout { padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--info-bg); font-size: 12px; }
.discounts .disc-hierarchy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 0 0 10px; padding: 0; list-style: none; font-size: 12px; }
.discounts .disc-hierarchy li { display: flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--radius-round); background: var(--bg-surface); }
.discounts .disc-hierarchy li:not(:last-child)::after { content: "→"; margin-left: 6px; color: var(--text-muted); }
.discounts .disc-hierarchy .meta { font-size: 11px; }
.discounts .disc-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.discounts .disc-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-card); }
.discounts .disc-card h2, .discounts .disc-card h3 { margin: 0 0 10px; font-size: 15px; }
.discounts .disc-select { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.discounts .disc-select .field select, .discounts .disc-select .field input { width: 100%; }
.discounts .disc-profile { margin: 12px 0 0; font-size: 12px; color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.discounts .disc-line { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.discounts .disc-line > span:first-child { color: var(--text-secondary); }
.discounts .disc-line strong { font-variant-numeric: tabular-nums; }
.discounts .disc-trace { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.discounts .disc-trace .step { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--accent); border-radius: var(--radius-round); font-size: 11px; color: var(--accent); }
.discounts .disc-trace .what { flex: 1; min-width: 0; }
.discounts .disc-trace .what strong { display: block; font-size: 13px; }
.discounts .disc-trace .what small { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.discounts .disc-trace .amount { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.discounts .disc-total { font-size: 28px; font-weight: 600; letter-spacing: -.3px; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.discounts .disc-side { background: var(--accent-soft); border-color: var(--accent); position: sticky; top: calc(var(--topbar-h) + 16px); }
.discounts details { border: 1px solid var(--border); border-radius: var(--radius); margin: 12px 0; padding: 10px 14px; background: var(--bg-surface); }
.discounts details > summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.discounts details > summary .meta { font-weight: 400; color: var(--text-muted); }
.discounts details[open] > summary { margin-bottom: 12px; }
.discounts .disc-check { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.discounts .disc-bars td { vertical-align: middle; }
.discounts .disc-bar { display: block; height: 6px; border-radius: var(--radius-sm); background: var(--bg-subtle); }
.discounts .disc-bar > span { display: block; height: 6px; border-radius: var(--radius-sm); background: var(--accent); }
.discounts .dialog.bulk .disc-section { margin: 22px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.discounts .dialog.bulk .disc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.discounts .dialog.bulk .disc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.discounts .dialog.bulk .disc-grid .full { grid-column: 1 / -1; }
.discounts .dialog.bulk .field { min-width: 0; }
.discounts .dialog.bulk .field input:not([type="checkbox"]), .discounts .dialog.bulk .field select, .discounts .dialog.bulk .field textarea { width: 100%; }
.discounts .disc-lookup { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); }
.discounts .disc-lookup + .disc-lookup { margin-top: 12px; }
.discounts .disc-lookup .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.discounts .disc-lookup .between strong { font-size: 13px; }
.discounts .disc-lookup select[multiple] { min-height: 130px; margin-bottom: 8px; }
.discounts .disc-lookup .help { margin: 6px 0 0; }
.discounts .disc-countries { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 4px 0; }
.discounts .disc-preview { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.discounts .disc-preview .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 1100px) { .discounts .disc-split { grid-template-columns: 1fr; } .discounts .disc-side { position: static; } }
@media (max-width: 820px) {
  .discounts .disc-workspace { grid-template-columns: 1fr; }
  .discounts .disc-markets { border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 10px; grid-auto-flow: column; overflow-x: auto; }
  .discounts .disc-markets a.child, .discounts .disc-markets .label { display: none; }
  .discounts .disc-select, .discounts .dialog.bulk .disc-grid, .discounts .dialog.bulk .disc-grid.three { grid-template-columns: 1fr; }
}

/* Bar widths in tenths, so the coverage bars need no style attribute. */
.discounts .disc-bar > .w-0 { width: 0%; }
.discounts .disc-bar > .w-10 { width: 10%; }
.discounts .disc-bar > .w-20 { width: 20%; }
.discounts .disc-bar > .w-30 { width: 30%; }
.discounts .disc-bar > .w-40 { width: 40%; }
.discounts .disc-bar > .w-50 { width: 50%; }
.discounts .disc-bar > .w-60 { width: 60%; }
.discounts .disc-bar > .w-70 { width: 70%; }
.discounts .disc-bar > .w-80 { width: 80%; }
.discounts .disc-bar > .w-90 { width: 90%; }
.discounts .disc-bar > .w-100 { width: 100%; }

/* Item pricing is isolated from the shared record/detail screens. */
#item-price-workbench .item-pricing-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr); gap: 18px; align-items: start; }
#item-price-workbench .item-pricing-grid > div, #item-price-workbench .item-pricing-grid aside { min-width: 0; }
#item-price-workbench .item-pricing-grid .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
#item-price-workbench .item-price-dialog { width: min(680px, calc(100vw - 40px)); max-height: calc(100vh - 48px); overflow: auto; border-radius: var(--radius); }
#item-price-workbench .item-price-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
#item-price-workbench .item-price-fields .full { grid-column: 1 / -1; }
#item-price-workbench .item-price-fields .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
#item-price-workbench .item-price-fields input, #item-price-workbench .item-price-fields select, #item-price-workbench .item-price-fields textarea { width: 100%; }
#item-price-workbench #price-suggestion { display: block; font-size: 20px; margin-top: 6px; }
#item-price-workbench #price-dealer-trace { font-size: 12px; }
#item-price-workbench .item-pricing-grid .card { padding: 17px; margin-bottom: 16px; }
#item-price-workbench .item-pricing-grid aside { position: sticky; top: 16px; }
#item-price-workbench #item-price-versions { margin-bottom: 18px; }
#item-price-workbench #item-new-price, #item-price-workbench #item-market-override { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-strong); padding: 24px; box-shadow: var(--shadow-pop); }
#item-price-workbench #item-new-price::backdrop, #item-price-workbench #item-market-override::backdrop { background: var(--scrim); }
#item-price-workbench .item-price-dialog h3 { margin: 20px 0 10px; }
#item-price-workbench .item-price-dialog .item-price-fields { gap: 12px; margin-top: 14px; }
#item-price-workbench .item-price-suggestion { display: flex; align-items: center; justify-content: space-between; }
#item-price-workbench .item-price-suggestion #price-suggestion { font-size: 16px; margin: 0; }
#item-price-workbench .item-price-apply { margin: 10px 0 18px; }
#item-price-workbench #price-dealer-result { padding: 20px 12px; margin-top: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); }
#item-price-workbench .item-pricing-grid td > .meta, #item-price-workbench #item-price-versions td > .meta { display: block; }
#item-price-workbench .item-price-dialog .actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 1150px) { #item-price-workbench .item-pricing-grid { grid-template-columns: 1fr; } #item-price-workbench .item-pricing-grid aside { position: static; } }
@media (max-width: 600px) { #item-price-workbench .item-price-fields { grid-template-columns: 1fr; } }
/* Sales & dealer performance: the dealer and DRM profile popup, the visit popup and the rows that open them.
   The page policy allows no inline style, so none of this is written into the markup. */
.sp-dialog {
  padding: 0;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  max-width: 800px;
  width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: var(--bg-surface);
  color: var(--text-primary);
}

.sp-shell {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.sp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sp-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.sp-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
}

.sp-x {
  font-size: 1.4rem;
  line-height: 1;
  padding: 2px 10px;
  margin-left: 16px;
}

.sp-body {
  overflow-y: auto;
  flex: 1;
  padding: 24px;
}

.sp-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}

.sp-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sp-line {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

.sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

  .sp-grid .full {
    grid-column: 1 / -1;
  }

  .sp-grid .sp-notes {
    width: 100%;
  }

.sp-label {
  font-size: 10px;
  font-weight: 650;
  color: var(--text-secondary);
  display: block;
}

.sp-value {
  font-size: 13px;
  font-weight: 600;
  margin-top: 5px;
}

.sp-hier {
  padding: 12px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}

  .sp-hier small {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
  }

.sp-note {
  display: block;
  margin-top: 10px;
  color: var(--text-secondary);
}

.sp-h3 {
  margin: 0;
  font-size: 14px;
}

.sp-orders {
  margin-bottom: 12px;
}

.sp-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.sp-pillbtn {
  border-radius: var(--radius-round);
}

.sp-tbl-wrap {
  overflow-x: auto;
}

.sp-tbl {
  width: 100%;
  border-collapse: collapse;
}

  .sp-tbl th {
    padding: 10px 14px;
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
  }

  .sp-tbl td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    vertical-align: middle;
    text-align: left;
  }

    .sp-tbl th.num, .sp-tbl td.num {
      text-align: right;
    }

.sp-link {
  color: inherit;
}

.sp-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

  .sp-check input {
    width: auto;
    margin: 0;
  }

.sp-callout {
  font-size: .8rem;
}

.sp-toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

  .sp-toolbar .sp-group {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
  }

    .sp-toolbar .sp-group.end {
      margin-left: auto;
    }

.sp-pickers {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
}

  .sp-pickers > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;
  }

  .sp-pickers label {
    font-size: .75rem;
    font-weight: 500;
  }

  .sp-pickers select {
    width: auto;
    margin: 0;
  }

.sp-name {
  font-weight: 500;
}

.sp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}

.sp-card-head {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

  .sp-card-head.stack {
    display: block;
  }

  .sp-card-head h3 {
    margin: 0;
    font-weight: 650;
    font-size: 14px;
  }

  .sp-card-head p {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-secondary);
  }

.sp-pagenote {
  margin-bottom: 16px;
}

.sp-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}

  .sp-two > .sp-card {
    margin-bottom: 0;
    min-width: 0;
  }

@media (max-width: 900px) {
  .sp-two {
    grid-template-columns: 1fr;
  }
}

.sp-card-pad {
  padding: 20px;
}

.sp-card-foot {
  padding: 12px 20px;
  font-size: 11px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border);
}

  .sp-card-foot p {
    margin: 10px 0 0;
  }

.sp-grid.three {
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 12px;
}

.sp-grid.tight {
  gap: 14px;
}

.sp-field-stack {
  margin-top: 12px;
}

.sp-callout-gap {
  margin-bottom: 16px;
}

.sp-muted {
  color: var(--text-secondary);
}

.sp-empty-cell {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}

.sp-sub {
  display: block;
  font-size: 11px;
  color: var(--text-secondary);
}

.sp-result {
  margin: 0 0 12px;
}

  .sp-result small {
    display: block;
    margin-top: 6px;
  }

.sp-gap-bottom {
  margin-bottom: 12px;
}

.sp-check-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

  .sp-check-row input {
    width: auto;
    margin: 3px 0 0;
    flex-shrink: 0;
  }

.sp-dialog.wide {
  max-width: min(1200px, calc(100vw - 32px));
  width: min(1200px, calc(100vw - 32px));
}

.sp-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.sp-card-body {
  padding: 20px;
}

  .sp-card-body .field {
    margin-bottom: 16px;
  }

    .sp-card-body .field input[type="date"] {
      max-width: 200px;
    }

.sp-badge {
  font-size: 11px;
  color: var(--text-secondary);
}

.sp-h4 {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 650;
}

.sp-hint {
  margin: 0 0 12px;
  font-size: 11px;
  color: var(--text-secondary);
}

.sp-lead {
  margin: 0 0 16px;
  color: var(--text-secondary);
}

.sp-tight-top {
  margin-top: 4px;
}

.sp-mt {
  margin-top: 12px;
}

.sp-metric {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  margin: 4px 0 2px;
}

.sp-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

  .sp-kv:last-child {
    border-bottom: none;
  }

.sp-hier b {
  display: block;
}

.sp-hier .sp-line {
  margin: 12px 0;
}

.sp-hier label.cap {
  margin-top: 12px;
}

.sp-hier-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-toolbar-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  flex-wrap: wrap;
}

  .sp-toolbar-row input[type="search"], .sp-toolbar-row input[type="text"] {
    min-width: 220px;
    max-width: 300px;
  }

.sp-actions-end {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
}

.dex-qty {
  width: 72px;
  text-align: center;
}

.sp-gap-top {
  margin-top: 18px;
}

.sp-two-flat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 18px;
}

@media (max-width: 900px) {
  .sp-two-flat {
    grid-template-columns: 1fr;
  }
}

.nowrap {
  white-space: nowrap;
}

.empty[hidden], .tbl[hidden] {
  display: none;
}

.sp-namebtn {
  font-weight: 600;
  font-size: 12px;
  padding: 0;
  height: auto;
  text-align: left;
}

.sp-actions-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sp-listrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

  .sp-listrow:last-child {
    border-bottom: none;
  }

.sp-stack-pad {
  padding: 20px;
}

.tile > .label, .tile > .value, .tile > .trend {
  display: block;
}
.sp-grid.four { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; margin-bottom: 12px; }
.sp-grid.four .btn { margin-bottom: 2px; }
/* Sales & dealer performance: rules that used to sit in style attributes, which the content security policy refuses. */
.sx-004fc9 { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:16px; flex-wrap:wrap; }
.sx-045672 { padding:10px 16px; font-size:11px; color:var(--text-secondary); border-top:1px solid var(--border); background:var(--bg-subtle); flex-shrink:0; }
.sx-054965 { min-width:180px; max-width:260px; }
.sx-068287 { width:28px; }
.sx-0e4bdc { font-size:12px; font-weight:500; }
.sx-1efd74 { margin-top:16px; }
.sx-219664 { display:flex; align-items:flex-start; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--border); flex-shrink:0; background:var(--text-primary); color:var(--text-inverse); }
.sx-231f8d { border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-elevated); overflow:hidden; }
.sx-23a5c6 { font-size:11px; padding:3px 10px; }
.sx-2756a1 { display:flex; gap:10px; justify-content:flex-end; }
.sx-2cec9b { background:var(--accent-soft); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin-bottom:20px; font-size:13px; color:var(--text-secondary); }
.sx-2ddfca { display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.sx-30f8f6 { font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.sx-35c246 { margin:0; padding:16px; font-size:12px; font-family:var(--font-mono); overflow:auto; flex:1; white-space:pre-wrap; word-break:break-word; background:var(--ok-bg); color:var(--text-primary); }
.sx-37ecb9 { display:block; margin-top:2px; font-size:11px; }
.sx-38823c { flex:1; display:flex; flex-direction:column; }
.sx-38d656 { color:inherit; }
.sx-44265a { font-weight:500; }
.sx-444e16 { font-size:12px; color:var(--text-secondary); margin-top:3px; }
.sx-48caa2 { min-width:160px; max-width:240px; flex:1; }
.sx-4d5869 { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.sx-4ea465 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sx-513467 { width:100px; }
.sx-514209 { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; }
.sx-53463d { margin-bottom:12px; }
.sx-539b04 { text-align:center; }
.sx-54cd26 { width:140px; }
.sx-54f6d6 { min-width:72px; }
.sx-555315 { padding:0; border:none; border-radius:var(--radius); box-shadow:var(--shadow-pop); max-width:640px; width:calc(100vw - 32px); max-height:calc(100vh - 48px); overflow:hidden; }
.sx-57af29 { width:80px; text-align:center; }
.sx-599acb { font-size:12px; color:var(--text-secondary); margin-left:4px; }
.sx-605476 { padding-left:40px; }
.sx-643a7c { font-size:11px; }
.sx-65ae65 { display:none; padding:36px; }
.sx-65e6a5 { font-size:.9em; text-decoration:none; }
.sx-67052f { width:auto; min-width:130px; margin:0; }
.sx-7308f8 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sx-73f415 { padding:10px 16px; font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--text-secondary); border-bottom:1px solid var(--border); background:var(--bg-subtle); }
.sx-77d93f { padding-left:20px; }
.sx-787dd9 { font-size:.85em; margin-left:6px; }
.sx-7909d0 { flex:1; display:flex; flex-direction:column; border-right:1px solid var(--border); }
.sx-7a24ed { white-space:nowrap; flex-shrink:0; }
.sx-80c8e0 { grid-template-columns:repeat(4,1fr); }
.sx-8305dc { font-size:15px; font-weight:600; }
.sx-863ec6 { display:flex; flex:1; overflow:hidden; min-height:0; }
.sx-8b2da0 { white-space:nowrap; }
.sx-8b7c00 { display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap; }
.sx-8edd48 { padding:24px; border:none; border-radius:var(--radius); box-shadow:var(--shadow-pop); max-width:380px; width:calc(100vw - 32px); }
.sx-903e43 { max-width:720px; }
.sx-9bd93d { font-size:12px; }
.sx-a722ee { min-width:160px; }
.sx-ae2836 { padding:2px 8px; font-size:var(--fs-caption); }
.sx-b3c431 { font-size:.9em; text-decoration:none; margin-right:4px; }
.sx-b4ac56 { max-width:260px; margin:0; }
.sx-b84c7d { font-size:13px; }
.sx-c0e4fb { padding:32px; }
.sx-c3cf8f { margin:0; padding:16px; font-size:12px; font-family:var(--font-mono); overflow:auto; flex:1; white-space:pre-wrap; word-break:break-word; background:var(--bg-subtle); color:var(--text-primary); }
.sx-c860c5 { min-width:140px; }
.sx-c947b4 { text-align:center; font-size:12px; }
.sx-ca5862 { font-size:11px; white-space:nowrap; color:var(--text-secondary); }
.sx-cfbe03 { width:170px; }
.sx-d54928 { background:var(--danger); border-color:var(--danger); }
.sx-d86321 { margin:0 0 20px; font-size:13px; color:var(--text-secondary); }
.sx-d996c5 { margin-top:24px; display:flex; gap:12px; }
.sx-d9c84a { font-size:1.3rem; line-height:1; padding:2px 10px; margin-left:16px; color:var(--text-inverse); background:transparent; border:none; }
.sx-da01d4 { margin:0 0 10px; font-size:1rem; }
.sx-dea701 { margin:0; font-size:15px; font-weight:650; }
.sx-e29196 { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.sx-f250d4 { width:90px; text-align:center; }
.sx-f298ef { margin:0 0 4px; }
.sx-f43ba7 { width:auto; min-width:75px; margin:0; }
.sx-f96006 { display:flex; flex-direction:column; max-height:calc(100vh - 48px); }

/* Commercial price-list detail: wide components scroll within their card, never over the price-file rail. */
.commercial-price-list .card, .commercial-price-list .tbl-wrap, .commercial-price-list .form, .commercial-price-list .field { min-width: 0; }
.commercial-price-list .tbl-wrap { max-width: 100%; overflow-x: auto; }
.commercial-price-list .kv { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.commercial-price-list .kv dd { min-width: 0; overflow-wrap: anywhere; }
.commercial-price-list .form input, .commercial-price-list .form select, .commercial-price-list .form textarea { min-width: 0; max-width: 100%; }

/* A long pinned label would cover later columns and draft action controls while scrolling. */
.commercial-price-list .tbl td.key, .commercial-price-list .tbl th.key { position: static; }

/* Item price-version summary and unified View only; other workbench cards retain their styling. */
#item-price-versions { min-width: 0; }
#item-price-versions > .tbl-wrap { max-width: 100%; overflow-x: auto; }
#item-price-versions .tbl { table-layout: fixed; }
#item-price-versions .tbl th, #item-price-versions .tbl td { white-space: normal; overflow-wrap: anywhere; vertical-align: middle; }
#item-price-versions .tbl th:first-child { width: 12%; }
#item-price-versions .tbl th:last-child { width: 23%; }
#item-price-versions .item-version-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
#item-price-versions .item-version-actions .btn { white-space: nowrap; }
#item-price-versions .item-version-dialog { width: min(680px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-pop); }
#item-price-versions .item-version-dialog::backdrop { background: var(--scrim); }
#item-price-versions .item-version-dialog h2 { margin-bottom: 22px; }
#item-price-versions .item-version-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px 20px; margin: 0 0 24px; }
#item-price-versions .item-version-facts dt { color: var(--text-secondary); }
#item-price-versions .item-version-facts dd { margin: 0; overflow-wrap: anywhere; }
#item-price-versions .item-version-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#item-price-versions .item-version-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
#item-price-versions .item-card-head h2, #item-price-versions .item-version-dialog h2 { font-size: 17px; }
#item-price-versions .tbl th, #item-price-versions .tbl td { padding: 10px 12px; }
#item-price-versions .pill::before { display: none; }
#item-price-versions .pill.info { color: var(--accent); background: var(--accent-soft); }
#item-price-versions .item-version-actions a.btn { text-decoration: none; }

.item-bulk-grid .item-bulk-actions { position: sticky; left: 44px; z-index: 2; width: 100px; min-width: 100px; max-width: 100px; }
.item-bulk-grid thead .item-bulk-actions { z-index: 4; }

.item-bulk-grid .item-bulk-actions .btn { display: block; max-width: 100%; white-space: normal; }

/* Planning register forms: layout that the pages previously set inline (ADR-014 forbids style attributes). */
.w-full { width: 100%; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.col-80 { width: 80px; }
.col-120 { width: 120px; }
.col-140 { width: 140px; }
.col-150 { width: 150px; }
.field-label { display: block; margin: 0.5rem 0; }

/* A date picker that offers only working days (data-closed-days in app.js). Days off are disabled, not refused. */
.day-picker-host { position: relative; }
.day-picker-toggle { font: inherit; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0 8px; height: var(--control-h); min-width: 150px; text-align: left; cursor: pointer; }
.day-picker-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.day-picker { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 4px; padding: 8px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.day-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.day-picker-head button { font: inherit; width: 28px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-primary); cursor: pointer; }
.day-picker table { border-collapse: collapse; }
.day-picker th { font-size: var(--fs-caption); font-weight: 500; color: var(--text-muted); padding: 2px 0; width: 32px; text-align: center; }
.day-picker td { padding: 1px; text-align: center; }
.day-picker [data-day] { font: inherit; font-size: var(--fs-table); width: 30px; height: 28px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); cursor: pointer; }
.day-picker [data-day]:hover:not([disabled]) { background: var(--accent-soft); }
.day-picker [data-day]:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.day-picker [data-day].chosen { background: var(--accent); color: var(--bg-elevated); }
.day-picker button[disabled] { color: var(--text-muted); opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.day-picker .help { margin: 6px 0 0; font-size: var(--fs-caption); color: var(--text-muted); }

/* A card heading with the section's one action on the right, wrapping under it on a narrow window. */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.card-head > h2 { margin-bottom: 0; }
.card-head > .inline-form select { max-width: 260px; }
/* Key facts on one line, label over value, wrapping on a narrow window (the S&OP cycle summary). */
.fact-strip { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 0; font-size: var(--fs-table); }
.fact-strip > div { min-width: 0; }
.fact-strip dt { font-size: var(--fs-caption); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.fact-strip dd { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.card + .siop-body { margin-top: var(--gap); }
details[data-stock-sources] > summary { cursor: pointer; }

/* An All sites total row that opens the site rows folded under it (data-site-toggle in app.js). */
.site-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--text-primary); cursor: pointer; text-align: left; }
.site-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.site-toggle .chev { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--text-secondary); transition: transform .12s ease; }
.site-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.tbl tbody tr.site-row[hidden] { display: none; }
.tbl tbody tr.site-row td:first-child { padding-left: 28px; }
.tbl tbody tr.site-row td { background: var(--bg-subtle); }
.tbl tbody tr.site-total { cursor: pointer; }
.tbl tbody tr.site-total:hover td { background: var(--accent-soft); }

/* ── Master schedule: line capacity and build lines ───────────────────── */
/* The demand plan's lines (.entry-lines) share the build lines' entry row, inline edit row and pinned actions. */
[data-icon="trash"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M6 1h4l1 1h3v2H2V2h3zM3 5h10l-.8 9.1a1 1 0 0 1-1 .9H4.8a1 1 0 0 1-1-.9z'/%3E%3C/svg%3E"); }
[data-icon="info"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm0 1.6a5.4 5.4 0 1 1 0 10.8A5.4 5.4 0 0 1 8 2.6zM7.2 4h1.6v1.6H7.2zm0 2.8h1.6V12H7.2z'/%3E%3C/svg%3E"); }
button.icon-btn { border: 1px solid var(--border); }
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.icon-btn.danger { color: var(--danger); } .icon-btn.danger:hover { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.btn [data-icon] { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; background: currentColor; opacity: .8;
  mask: var(--icon-mask) center / contain no-repeat; -webkit-mask: var(--icon-mask) center / contain no-repeat; }
/* The two figures a planner reads first, the line's units and hours a day, sit in tiles above the weeks. */
.capacity-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 4px 0 10px; }
.capacity-tiles .tile:hover { transform: none; box-shadow: var(--shadow-card); border-color: var(--border); }
.capacity-tiles .unit { font-size: var(--fs-meta); font-weight: 500; color: var(--text-secondary); }
.rate-edit { margin-bottom: 10px; } .rate-edit > summary { list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.rate-edit > summary::-webkit-details-marker { display: none; }
.tbl-wrap.tall-cap { max-height: 300px; overflow: auto; }
/* The master schedule's one capacity card: its headline tiles, then one view at a time behind link tabs.
   Every rule is under .cap-plan, so no other screen changes. */
.cap-plan .cap-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cap-plan .cap-head h2 { margin-bottom: 0; }
.cap-plan .cap-head > .rate-edit { margin-bottom: 0; }
.cap-plan .cap-head > .rate-edit[open] { flex-basis: 100%; }
.cap-plan .capacity-tiles { margin-top: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.cap-plan .cap-tabs { flex-wrap: wrap; margin-bottom: 10px; }
.cap-plan .cap-tabs a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cap-plan .cap-note { margin: 6px 0 10px; }
/* Two columns only while each keeps 420px, so no table in it has to scroll sideways. */
.cap-plan .cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--gap); align-items: start; }
/* Each panel heading is one line of the same height: title, info tip, then its link on the far right. */
.cap-plan :is(.cap-grid, .cap-unrouted) h3 { display: flex; align-items: center; gap: 6px; min-height: 24px; margin: 16px 0 8px; }
/* Lines that are not routed: one row a reason, its dates and models as small counted chips that wrap. */
.cap-plan .cap-unrouted td.key { max-width: 360px; }
.cap-plan .cap-unrouted td { vertical-align: top; }
.cap-plan .cap-unrouted .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cap-plan .cap-unrouted .cap-dates > summary { cursor: pointer; }
.cap-plan .cap-unrouted .cap-dates[open] > summary { margin-bottom: 6px; }
.cap-plan .cap-unrouted .cap-dates .chips { max-height: 160px; overflow: auto; }
.cap-plan .cap-grid h3 > a.meta { margin-left: auto; font-weight: 400; }
.cap-plan .cap-grid h3:first-child { margin-top: 4px; }
/* Numbers sit on the right in every capacity table, so digits line up; the global cell rule would keep them left. */
.cap-plan .tbl :is(th, td).num { text-align: right; font-variant-numeric: tabular-nums; }
/* A row label reads as body text, like the key column of the tables beside it, not as a small grey column header. */
.cap-plan .tbl tbody th[scope="row"] { top: auto; z-index: 1; background: var(--bg-surface); font-size: inherit; color: var(--text-primary); user-select: auto; }
.cap-plan .tbl tfoot td { font-weight: 600; border-top: 1px solid var(--border-strong); border-bottom: 0; }
.cap-plan .cap-neg { color: var(--danger); }
.cap-plan .cap-mark { color: var(--warn); margin-left: 2px; cursor: help; }
.cap-plan .tbl tr.cap-total > * { font-weight: 600; border-top: 1px solid var(--border-strong); }
/* The master schedule page's facts under its title, and the Build lines card's two panels (from the demand plan, by
   hand). Every rule is under .sched-, so no other screen changes. */
.sched-facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 6px 0 0; }
.sched-facts > div { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.sched-facts dt { font-size: var(--fs-meta); color: var(--text-secondary); }
.sched-facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.sched-lines .sched-panel { border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; background: var(--bg-subtle); }
.sched-lines .sched-panel > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; font-weight: 500; list-style: none; }
.sched-lines .sched-panel > summary::-webkit-details-marker { display: none; }
.sched-lines .sched-panel > summary::after { content: "▸"; margin-left: auto; color: var(--text-muted); }
.sched-lines .sched-panel[open] > summary::after { content: "▾"; }
.sched-lines .sched-panel > summary [data-icon] { display: inline-block; width: 13px; height: 13px; background: currentColor; opacity: .7;
  mask: var(--icon-mask) center / contain no-repeat; -webkit-mask: var(--icon-mask) center / contain no-repeat; }
.sched-lines .sched-panel-body { padding: 0 12px 12px; background: var(--bg-surface); border-top: 1px solid var(--border); }
.sched-lines .sched-intro { margin: 10px 0 4px; }
.sched-lines .sched-filter { margin: 4px 0 10px; }
.sched-lines .sched-pick { max-height: 360px; overflow: auto; }
.sched-lines .sched-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; }
.sched-lines .sched-actions > .field { flex: 1 1 220px; max-width: 360px; }
/* The demand list shades each row by its time-fence zone, so what cannot be scheduled is seen before it is tried.
   The left edge carries the colour too, so the zone still reads where the tint is faint. */
.sched-lines .zone-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0 0 6px; padding: 0; font-size: var(--fs-meta); color: var(--text-secondary); }
.sched-lines .zone-legend li { display: inline-flex; align-items: center; gap: 6px; }
.sched-lines .zone-swatch { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-surface); }
.sched-lines .zone-swatch.zone-slushy { background: var(--warn-bg); border-color: var(--warn); }
.sched-lines .zone-swatch.zone-frozen { background: var(--danger-bg); border-color: var(--danger); }
.sched-lines tr.zone-slushy > td { background: var(--warn-bg); }
.sched-lines tr.zone-slushy > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.sched-lines tr.zone-frozen > td { background: var(--danger-bg); }
.sched-lines tr.zone-frozen > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.sched-lines tr.zone-closed > td { color: var(--text-muted); }
.sched-lines tr:is(.zone-slushy, .zone-frozen, .zone-closed) input[type="checkbox"] { cursor: not-allowed; }
/* A build line's boxes on one row, each a share of the card's width, captions above and boxes level.
   A narrower window wraps them into even rows rather than squeezing a box below its use. */
.line-entry { display: flex; flex-wrap: nowrap; gap: 8px; align-items: flex-start; margin: 8px 0 4px; }
.line-entry > .field { min-width: 0; align-content: start; }
.line-entry .cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-entry .field :is(input, select, .day-picker-toggle) { width: 100%; min-width: 0; }
.line-entry .le-xs { flex: 0 0 64px; } .line-entry .le-s { flex: 1 1 76px; } .line-entry .le-m { flex: 1.4 1 110px; }
.line-entry .le-date { flex: 0 0 158px; } .line-entry .le-l { flex: 2.4 1 170px; }
.line-entry .le-static { display: flex; align-items: center; height: var(--control-h); padding: 0 2px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-entry > .le-actions { flex: none; display: flex; gap: 6px; padding-top: calc(var(--fs-meta) * 1.35 + 3px); }
.le-help { margin-bottom: 10px; }
.tbl:is(.build-lines, .entry-lines) .actions-col { width: 1%; white-space: nowrap; text-align: right; }
/* The actions stay pinned to the right edge, as the key column is to the left, so Edit and Delete are in view
   on every row even when a narrow window scrolls the table sideways. */
.tbl:is(.build-lines, .entry-lines) td.actions-col, .tbl:is(.build-lines, .entry-lines) th.actions-col { position: sticky; right: 0; z-index: 1; background: var(--bg-surface); box-shadow: inset 1px 0 0 var(--border); }
.tbl:is(.build-lines, .entry-lines) th.actions-col { z-index: 3; background: var(--bg-subtle); text-align: right; }
.tbl:is(.build-lines, .entry-lines) tbody tr:hover td.actions-col { background: var(--bg-subtle); }
.tbl:is(.build-lines, .entry-lines) tr.editing > td { position: static; }
.tbl-wrap.lines-cap { max-height: 560px; }
.tbl:is(.build-lines, .entry-lines) td.actions-col > * { vertical-align: middle; }
.tbl:is(.build-lines, .entry-lines) td.actions-col > form { display: inline-block; margin-left: 4px; }
.tbl:is(.build-lines, .entry-lines) tr.editing > td { background: var(--accent-soft); }
.tbl.entry-lines tr.selected td.actions-col { background: color-mix(in srgb, var(--accent-soft) 60%, var(--bg-surface)); }
.tbl.entry-lines tr.editing .line-entry + .help { margin-bottom: 6px; }
/* "Why this number?" opens as one short line under its row, each step after a dot, Close at the end. */
.tbl.entry-lines tr.why-row > td { padding-top: 5px; padding-bottom: 5px; font-size: var(--fs-meta); color: var(--text-secondary); white-space: normal; }
.tbl.entry-lines tr.why-row .why-label { font-weight: 600; color: var(--text-primary); margin-right: 8px; }
.tbl.entry-lines tr.why-row .why-part + .why-part::before { content: "·"; margin: 0 8px; color: var(--text-secondary); }
.tbl.entry-lines tr.why-row strong { color: var(--text-primary); }
.tbl.entry-lines tr.why-row .why-close { margin-left: 12px; }
@media (max-width: 1100px) {
  .line-entry { flex-wrap: wrap; }
  .line-entry > .field { flex: 1 1 140px; }
  .line-entry .le-xs { flex: 0 0 72px; }
}
/* Warehouse execution screens (ADR-040): the label preview, the enrolment QR, and the one-line forms in table rows. */
.label-frame { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--gap); }
.label-preview { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; box-shadow: var(--shadow-card); }
.qr-frame { width: 240px; max-width: 100%; flex: none; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; }
.qr-frame svg { display: block; width: 100%; height: auto; }
.enrol-code { display: flex; gap: calc(var(--gap) * 1.5); align-items: flex-start; flex-wrap: wrap; }
.enrol-code-text { font-size: var(--fs-hero); letter-spacing: 0.12em; font-weight: 600; margin: 4px 0; }
/* A default width for the inputs of the warehouse forms that opt in with ex-input. It must not apply to every inline
   form: its specificity would beat the w-short, w-med and w-long classes on the other screens. */
form.inline-form.ex-input input:not([type="checkbox"]) { width: 14em; }

/* Warehouse floor screens (ADR-040, slice 7): dispatch board, bin map, tote tracker, kit board, scan trail and control tower.
   Built for a laptop and for a wall TV. Every colour is a token. Status never rides on colour alone: each one has a word, and
   the bin map adds a pattern or a tag. Motion is already switched off by the reduced-motion rule near the top of this file. */
.ex-nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 var(--gap); padding: 4px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); }
.ex-nav a { padding: 6px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; text-decoration: none; }
.ex-nav a:hover { background: var(--bg-surface); color: var(--text-primary); }
.ex-nav a[aria-current="page"] { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-card); }
.ex-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ex-nav .ex-nav-more { margin-left: auto; font-size: var(--fs-meta); }

.ex-live { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; color: var(--text-secondary); font-size: var(--fs-meta); }
.ex-live .ex-dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--ok); flex: none; }
.ex-live.stalled { color: var(--danger); font-weight: 600; }
.ex-live.stalled .ex-dot { background: var(--danger); }

.ex-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin: 0 0 var(--gap); }
.ex-count { display: block; padding: 10px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-card); color: inherit; text-decoration: none; }
a.ex-count:hover { border-color: var(--border-strong); text-decoration: none; }
a.ex-count:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ex-count .n { display: block; font-size: 32px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ex-count .l { display: block; font-size: var(--fs-meta); color: var(--text-secondary); }
.ex-count.ok { border-left-color: var(--ok); } .ex-count.warn { border-left-color: var(--warn); } .ex-count.danger { border-left-color: var(--danger); } .ex-count.info { border-left-color: var(--info); }
.ex-count[aria-current="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }

.ex-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin: 0 0 10px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); }
.ex-tools label { font-size: var(--fs-meta); color: var(--text-secondary); }
.ex-tools input[name="reason"] { min-width: 18em; }
fieldset.ex-chips { border: 0; padding: 0; margin: 0; min-width: 0; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ex-chips label { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-meta); color: var(--text-primary); }
.ex-over td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.ex-late { color: var(--danger); font-weight: 600; }
.ex-grid2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gap); align-items: start; }
.ex-grid2 > * { min-width: 0; }
.ex-matrix td.num, .ex-matrix th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ex-bars { display: block; width: 100%; height: auto; }
.ex-bars .t { fill: var(--bg-subtle); }
.ex-bars .f { fill: var(--accent); }
.ex-bars .f.warn { fill: var(--warn); } .ex-bars .f.danger { fill: var(--danger); }
.ex-bars text { font: 500 12px var(--font-ui); fill: var(--text-primary); }
.ex-bars text.m { font-weight: 400; fill: var(--text-secondary); }
.ex-verify { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.ex-verdict { padding: 12px 14px; border: 1px solid var(--border); border-left: 5px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-surface); margin: 0 0 12px; }
.ex-verdict.ok { border-left-color: var(--ok); } .ex-verdict.danger { border-left-color: var(--danger); background: var(--danger-bg); }
.ex-verdict strong { display: block; font-size: var(--fs-title); }

/* Bin map. The cell is a small gauge: the tint rises from the bottom as the bin fills, the number says how full. */
.bm-wrap { overflow: auto; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.bm-map { display: block; max-width: 100%; height: auto; }
.bm-zone-title { font: 600 14px var(--font-ui); fill: var(--text-primary); }
.bm-aisle-title { font: 500 11px var(--font-ui); fill: var(--text-secondary); }
.bm-row-label { font: 400 10px var(--font-mono); fill: var(--text-muted); }
.bm-box { fill: var(--bg-subtle); stroke: var(--border-strong); stroke-width: 1; }
.bm-fill { fill: color-mix(in srgb, var(--accent) 34%, var(--bg-surface)); }
.bm-hatch-line { stroke: var(--text-muted); stroke-width: 1.2; }
.bm-pct { font: 600 13px var(--font-ui); fill: var(--text-primary); }
.bm-tag { font: 600 9px var(--font-ui); fill: var(--text-secondary); letter-spacing: .04em; }
.bm-cell { outline: none; cursor: pointer; }
.bm-cell.over .bm-box { stroke: var(--danger); stroke-width: 2.5; }
.bm-cell.blocked .bm-box { fill: url(#bm-hatch); }
.bm-cell.countlock .bm-box { stroke-dasharray: 4 3; stroke: var(--info); stroke-width: 2; }
.bm-cell.retired { opacity: .5; }
.bm-cell.tasks .bm-dot { fill: var(--accent); }
.bm-cell:hover .bm-box, .bm-cell:focus-visible .bm-box { stroke: var(--accent); stroke-width: 3; }
/* TV mode: the map is scaled to the screen through its viewBox. Tags stay at 12 or more so they read across an aisle. */
.bm-tv .bm-map { width: 100%; height: auto; }
.bm-tv .bm-pct { font-size: 15px; }
.bm-tv .bm-tag { font-size: 12px; letter-spacing: 0; }
.bm-tv .bm-aisle-title, .bm-tv .bm-row-label { font-size: 12px; }
.bm-tv .bm-zone-title { font-size: 17px; }
.bm-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 10px 0 0; font-size: var(--fs-meta); color: var(--text-secondary); align-items: center; }
.bm-key span { display: inline-flex; align-items: center; gap: 6px; }
.bm-key svg { width: 26px; height: 18px; flex: none; }

/* Control tower. One number per tile, large enough to read from the door of the office. */
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--gap); margin: 0 0 var(--gap); }
.ct-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border); border-top: 3px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.ct-tile.good { border-top-color: var(--ok); } .ct-tile.warning { border-top-color: var(--warn); } .ct-tile.danger { border-top-color: var(--danger); }
.ct-hero { grid-column: span 2; }
.ct-label { font-size: var(--fs-title); font-weight: 600; color: var(--text-primary); }
.ct-value { font-size: 52px; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: var(--text-primary); }
.ct-hero .ct-value { font-size: 72px; }
.ct-value small { font-size: 20px; font-weight: 500; color: var(--text-secondary); margin-left: 4px; letter-spacing: 0; }
.ct-value.toofew { color: var(--text-muted); }
.ct-toofew-note { font-size: var(--fs-meta); font-weight: 600; color: var(--text-secondary); }
.ct-value.none { font-size: 26px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.ct-sub { font-size: var(--fs-body); color: var(--text-secondary); }
.ct-tone { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-meta); font-weight: 600; }
.ct-tone.good { color: var(--ok); } .ct-tone.warning { color: var(--warn); } .ct-tone.danger { color: var(--danger); }
.ct-def { margin: 2px 0 0; font-size: var(--fs-meta); line-height: 1.5; color: var(--text-secondary); max-width: 62ch; }
.ct-facts { margin: auto 0 0; padding-top: 8px; border-top: 1px solid var(--border); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; font-size: var(--fs-caption); color: var(--text-muted); }
.ct-facts dt { font-weight: 600; } .ct-facts dd { margin: 0; }
.ct-link { font-size: var(--fs-meta); font-weight: 500; }
.ct-window { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); }
.ct-window a { padding: 4px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; text-decoration: none; }
.ct-window a[aria-current="true"] { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-card); }
.ct-window a:focus-visible { outline: 2px solid var(--accent); }

/* Kit board. Each line is a lane; each kit is a card in due-time order. */
.kb-lane { padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.kb-lane + .kb-lane { margin-top: var(--gap); }
.kb-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 10px; }
.kb-head h2 { margin: 0; font-size: 22px; }
.kb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.kb-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--bg-elevated); border: 1px solid var(--border); border-left: 5px solid var(--border-strong); border-radius: var(--radius); color: inherit; text-decoration: none; }
.kb-card:hover { border-color: var(--border-strong); text-decoration: none; background: var(--bg-subtle); }
.kb-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kb-card.late { border-left-color: var(--danger); } .kb-card.risk { border-left-color: var(--warn); } .kb-card.held { border-left-color: var(--danger); } .kb-card.ok { border-left-color: var(--ok); }
.kb-card.done { opacity: .75; }
.kb-time { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kb-station { font-weight: 600; }
.kb-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.kb-note { font-size: var(--fs-meta); color: var(--text-secondary); line-height: 1.4; }

@media (min-width: 1700px) {
  .ex-count .n { font-size: 44px; }
  .ct-value { font-size: 64px; }
  .ct-hero .ct-value { font-size: 88px; }
  .kb-time { font-size: 32px; }
}
@media (max-width: 960px) {
  .ct-hero { grid-column: span 1; }
  .ex-grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* Plant workspace: large touch targets, clear unit states, and room for the next action. */
.plant-workspace {
  container: plant / inline-size;
  display: flex; flex-direction: column; gap: max(16px, var(--gap));
  width: 100%; max-width: 1600px; min-width: 0; margin-inline: auto;
}
.plant-workspace > *, .plant-grid > *, .plant-lanes > * { min-width: 0; }
.plant-workspace [data-live-fragment] { display: grid; gap: max(20px, var(--gap)); }
.plant-workspace [data-live-fragment] > .plant-section-head,
.plant-workspace [data-live-fragment] > .text-caption { margin-bottom: 0; }
.plant-workspace [data-live-content] { margin-top: 16px; }
.plant-workspace [data-live-status].warn { color: var(--warn); }
.plant-workspace :is(.btn, input:not([type="hidden"]), select) { min-height: 44px; }
.plant-workspace .btn { padding-inline: 16px; }
.plant-hero {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 2vw, 32px); border: 1px solid var(--border-strong);
  border-inline-start: 4px solid var(--accent); border-radius: var(--radius);
  background: var(--text-primary); color: var(--text-inverse); box-shadow: var(--shadow-card);
}
/* The dark theme keeps a dark hero. Its normal text tokens then provide the matching light ink. */
[data-theme="dark"] .plant-hero { background: var(--bg-subtle); color: var(--text-primary); }
.plant-hero-copy { flex: 1 1 420px; min-width: 0; }
.plant-kicker { margin: 0 0 10px; font-size: var(--fs-meta); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.plant-hero h1 { color: inherit; font-size: calc(var(--fs-hero) * 1.7); line-height: 1.15; letter-spacing: -.035em; }
.plant-hero-copy > p:not(.plant-kicker) { max-width: 66ch; margin: 12px 0 0; font-size: var(--fs-body); line-height: 1.65; }
.plant-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.plant-hero .btn { box-shadow: none; }
.plant-hero .btn:focus-visible { outline-color: var(--text-inverse); outline-offset: 4px; }
[data-theme="dark"] .plant-hero .btn:focus-visible { outline-color: var(--text-primary); }
.plant-stamp { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: var(--fs-meta); color: var(--text-secondary); }
.plant-hero .plant-stamp { color: inherit; }
.plant-stamp .nav-icon { width: 14px; height: 14px; opacity: 1; }
.plant-nav {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.plant-nav a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 10px 18px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500;
  transition: background-color .14s ease, color .14s ease;
}
.plant-nav a:hover { background: var(--bg-subtle); color: var(--text-primary); text-decoration: none; }
.plant-nav a:is([aria-current="page"], .on) { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.plant-scope {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: max(16px, var(--gap));
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.plant-scope form { display: flex; flex: 1; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; max-width: none; margin: 0; }
.plant-scope .field { flex: 1 1 180px; min-width: 0; margin: 0; }
.plant-scope .field:has(input[type="search"]) { flex-grow: 2; }
.plant-scope :is(input:not([type="hidden"]), select) { width: 100%; min-width: 0; }
.plant-scope .field > label { margin-bottom: 5px; }
.plant-scope .form-actions { margin: 0; }
.plant-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: max(12px, var(--gap)); }
.plant-metric {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: max(18px, var(--gap));
  border: 1px solid var(--border); border-block-start: 3px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-card);
  transition: border-color .14s ease, box-shadow .14s ease;
}
.plant-metric[data-tone="info"] { border-block-start-color: var(--info); }
.plant-metric[data-tone="danger"] { border-block-start-color: var(--danger); }
.plant-metric[data-tone="ok"] { border-block-start-color: var(--ok); }
a.plant-metric:hover { color: var(--text-primary); text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
.plant-metric > strong { font-size: calc(var(--fs-hero) * 1.9); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; }
.plant-metric > :is(span, .label) { font-size: var(--fs-body); font-weight: 600; }
.plant-metric > small { margin-top: auto; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.plant-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: max(20px, var(--gap)); }
.plant-grid > aside { display: grid; gap: max(16px, var(--gap)); }
.plant-grid > .card, .plant-grid > aside > .card { padding: max(18px, var(--gap)); }
.plant-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.plant-section-head h2 { font-size: calc(var(--fs-title) * 1.125); }
.plant-section-head p { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.plant-section-head > a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-meta); font-weight: 500; }
.plant-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 12px; }
.plant-lane {
  display: flex; flex-direction: column; gap: 10px; padding: 12px; min-width: 0;
  max-height: 680px; overflow-y: auto; scrollbar-gutter: stable;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius);
}
.plant-lane-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding-bottom: 10px; border-bottom: 2px solid var(--border-strong); background: var(--bg-subtle); position: sticky; top: -12px; z-index: 1; }
.plant-lane-head :is(h2, h3) { font-size: var(--fs-body); }
.plant-lane-head > :is(strong, span) { font-size: var(--fs-meta); font-weight: 600; }
.plant-lane[data-tone="info"] .plant-lane-head { border-bottom-color: var(--info); }
.plant-lane[data-tone="danger"] .plant-lane-head { border-bottom-color: var(--danger); }
.plant-lane[data-tone="ok"] .plant-lane-head { border-bottom-color: var(--ok); }
.plant-unit-card {
  display: grid; flex: none; gap: 8px; min-width: 0; min-height: 44px; padding: 14px 12px;
  background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-card); overflow-wrap: anywhere;
  transition: border-color .14s ease, box-shadow .14s ease;
}
a.plant-unit-card:hover { color: var(--text-primary); text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-lift); }
.plant-unit-code { color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 500; }
.plant-unit-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.plant-unit-reason { margin: 0; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.plant-lane[data-tone="danger"] .plant-unit-reason { color: var(--danger); }
.plant-lane-empty { display: grid; place-content: center; flex: 1; min-height: 160px; padding: 20px 8px; text-align: center; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.plant-lane-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin-top: auto; padding-top: 8px; font-size: var(--fs-meta); color: var(--text-secondary); }
.plant-lane-foot a, a.plant-lane-foot { display: flex; align-items: center; min-height: 44px; color: var(--accent); }
.plant-actions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.plant-actions > li { min-width: 0; }
.plant-action {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 14px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary);
  background: var(--bg-surface); text-decoration: none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.plant-action:hover { color: var(--text-primary); text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.plant-action-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); }
.plant-action-icon .nav-icon { width: 18px; height: 18px; opacity: 1; }
.plant-action-body { display: grid; flex: 1; gap: 4px; min-width: 0; }
.plant-action-body strong { font-size: var(--fs-body); font-weight: 600; }
.plant-action-body :is(small, span) { color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.plant-action-arrow { margin-inline-start: auto; color: var(--text-muted); }

/* The rail can open or close. Fit the board to its own width, not just the window width. */
@container plant (max-width: 1240px) {
  .plant-grid { grid-template-columns: minmax(0, 1fr); }
  .plant-grid > aside .plant-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container plant (max-width: 860px) {
  .plant-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plant-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container plant (max-width: 520px) {
  .plant-hero { padding: 24px 20px; }
  .plant-hero h1 { font-size: calc(var(--fs-hero) * 1.4); }
  .plant-hero-actions { width: 100%; }
  .plant-hero-actions .btn { flex: 1; }
  .plant-nav a { flex: 1 1 auto; padding-inline: 12px; }
  .plant-lanes, .plant-grid > aside .plant-actions { grid-template-columns: minmax(0, 1fr); }
  .plant-scope .field { flex-basis: 100%; }
  .plant-scope .form-actions, .plant-scope > .btn, .plant-scope form > .btn { width: 100%; }
  .plant-metric { padding: 16px; }
  .plant-lane-empty { min-height: 88px; }
}
[data-contrast="high"] .plant-workspace :is(.plant-hero, .plant-nav, .plant-scope, .plant-metric, .plant-lane, .plant-unit-card, .plant-action) { border-color: var(--border-strong); }
@media (forced-colors: active) {
  .plant-nav a:is([aria-current="page"], .on) { outline: 2px solid currentColor; outline-offset: -4px; }
  .plant-workspace :is(.plant-metric, .plant-unit-card, .plant-action) { box-shadow: none; }
}

/* My station keeps the chosen work area, saved step, and next action in view. */
.station-workspace { max-width: 1440px; }
.station-workspace :is(.btn, input:not([type="hidden"]), select, summary) { min-height: 48px; }
/* Touch targets on the work screens: every control a worker presses is at least 44 pixels tall at every width, and a
   link is a flex box so that height applies to it. The browser suite measures this rule (TouchTargets.cs). */
:is(.plant-workspace, .station-workspace, .native-station, .model-year) :is(a, button, summary, select, input:not([type="hidden"]):not([type="checkbox"])) { min-height: 44px; }
:is(.plant-workspace, .station-workspace, .native-station, .model-year) a { display: inline-flex; align-items: center; }
.station-workspace :is(input, select, textarea) { max-width: 100%; }
.station-workspace .plant-hero { align-items: center; }
.station-workspace .plant-hero-copy { flex-basis: 360px; }
.station-workspace .plant-hero h1 { font-size: calc(var(--fs-hero) * 1.6); }
.station-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; width: fit-content; font-weight: 500; }
.station-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.station-context-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.station-context-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--accent); }
.station-context-icon .nav-icon { width: 22px; height: 22px; opacity: 1; }
.station-context-main strong { display: block; font-size: var(--fs-title); overflow-wrap: anywhere; }
.station-context-main p { color: var(--text-secondary); font-size: var(--fs-meta); margin: 4px 0 0; }
.station-context .plant-stamp { max-width: 100%; }
.station-scope-note { margin: -4px 0 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.station-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: max(20px, var(--gap)); align-items: start; }
.station-layout > *, .station-stack > * { min-width: 0; }
.station-stack { display: grid; gap: max(20px, var(--gap)); }
.station-panel { padding: clamp(20px, 2vw, 28px); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.station-panel h2 { font-size: calc(var(--fs-title) * 1.125); }
.station-panel h3 { font-size: var(--fs-body); }
.station-panel > p { color: var(--text-secondary); line-height: 1.65; }
.station-panel > :last-child { margin-bottom: 0; }
.station-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; }
.station-panel-head p { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.station-panel-head .pill { flex: none; }
.station-jobs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.station-job { display: grid; gap: 16px; min-width: 0; padding: 22px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow-wrap: anywhere; }
.station-job[data-featured="true"] { border-color: var(--accent); border-inline-start-width: 4px; }
.station-job[data-blocked="true"] { border-inline-start: 4px solid var(--warn); }
.station-job-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.station-job-head .plant-kicker { margin: 0; color: var(--text-secondary); }
.station-job-id { display: flex; align-items: center; min-height: 44px; width: fit-content; font-family: var(--font-mono); font-size: calc(var(--fs-title) * 1.2); font-weight: 500; line-height: 1.4; }
.station-job-title { margin: 5px 0 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.55; }
.station-job-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }
.station-job-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.station-job-foot > p { max-width: 52ch; margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.station-job-foot .btn { flex: none; gap: 20px; }
.station-empty { display: grid; justify-items: start; align-content: center; gap: 12px; min-height: 250px; padding: 32px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--bg-surface); }
.station-empty .nav-icon { width: 28px; height: 28px; color: var(--text-muted); opacity: 1; margin-bottom: 4px; }
.station-empty h2 { font-size: var(--fs-title); }
.station-empty p { max-width: 65ch; margin: 0; color: var(--text-secondary); line-height: 1.7; }
.station-note { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-inline-start: 3px solid var(--info); border-radius: var(--radius); background: var(--bg-subtle); }
.station-note > .nav-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--info); opacity: 1; }
.station-note strong { display: block; font-size: var(--fs-body); line-height: 1.5; }
.station-note p { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; }
.station-note[data-tone="warn"] { border-inline-start-color: var(--warn); }
.station-note[data-tone="warn"] > .nav-icon { color: var(--warn); }
.station-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.station-facts > div { min-width: 0; }
.station-facts dt { margin-bottom: 6px; color: var(--text-secondary); font-size: var(--fs-meta); }
.station-facts dd { margin: 0; font-size: var(--fs-body); font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.station-facts .station-fact-wide { grid-column: 1 / -1; }
.station-facts code { font-size: inherit; white-space: normal; overflow-wrap: anywhere; }
.station-step-copy { margin: 20px 0; font-size: calc(var(--fs-body) * 1.15); line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.station-reference { display: grid; gap: 7px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); }
.station-reference > span { color: var(--text-secondary); font-size: var(--fs-meta); }
.station-reference > code { font-family: var(--font-mono); font-size: var(--fs-body); overflow-wrap: anywhere; white-space: normal; }
.station-reference > p { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; }
.station-route { display: grid; margin: 0; padding: 0; list-style: none; }
.station-route > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding-bottom: 24px; }
.station-route > li:last-child { padding-bottom: 0; }
.station-route > li:not(:last-child)::after { content: ""; position: absolute; width: 1px; inset-block: 36px 2px; inset-inline-start: 16px; background: var(--border-strong); }
.station-route-marker { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-round); color: var(--text-secondary); background: var(--bg-subtle); font-family: var(--font-mono); font-size: var(--fs-meta); }
.station-route [aria-current="step"] .station-route-marker { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.station-route[data-state="complete"] .station-route-marker, .station-route li[data-state="complete"] .station-route-marker { border-color: var(--ok); color: var(--ok); }
.station-route-body { display: grid; gap: 5px; padding-top: 6px; min-width: 0; }
.station-route-body strong { font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere; }
.station-route-body > span { color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.station-route-body .pill { justify-self: start; margin-top: 4px; }
.station-blockers { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.station-blockers > li { padding: 16px; background: var(--bg-subtle); border: 1px solid var(--border); border-inline-start: 3px solid var(--warn); border-radius: var(--radius); }
.station-blockers strong { display: block; font-size: var(--fs-body); line-height: 1.5; }
.station-blockers a { display: inline-flex; align-items: center; min-height: 44px; }
.station-blockers p { margin: 5px 0 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; overflow-wrap: anywhere; }
.station-parts { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.station-parts > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.station-parts > li:first-child { padding-top: 0; }
.station-parts > li:last-child { padding-bottom: 0; border-bottom: 0; }
.station-parts strong { display: block; font-family: var(--font-mono); font-size: var(--fs-body); overflow-wrap: anywhere; }
.station-parts small { display: block; margin-top: 5px; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.station-part-qty { font-size: var(--fs-body); font-weight: 500; white-space: nowrap; }
.station-part-qty small { font-weight: 400; text-align: end; }
.station-next-action { display: grid; gap: 16px; }
.station-next-action .btn { width: 100%; justify-content: space-between; }
.station-next-action p { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; }
.station-issue-form.form { max-width: none; margin: 0; }
.station-issue-form .field { margin-bottom: 20px; }
.station-issue-form .field:last-child { margin-bottom: 0; }
.station-issue-form :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) { width: 100%; }
.station-issue-form .help { display: block; margin-top: 6px; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; }
.station-issue-form fieldset { margin: 24px 0; padding: 0; border: 0; }
.station-issue-form legend { margin-bottom: 12px; font-size: var(--fs-body); font-weight: 600; }
.station-check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius); line-height: 1.6; }
.station-check input[type="checkbox"] { flex: none; width: 20px; height: 20px; min-height: 20px; margin: 0; }
.station-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.station-form-grid > .field { align-content: start; }
.station-issue-form .form-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
.station-issue-form .validation-summary-errors:empty { display: none; }
.station-workspace .pager { margin-top: 20px; }
.station-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.station-pagination > span { color: var(--text-secondary); font-size: var(--fs-meta); }
.station-tests { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.station-tests > li { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.station-tests > li:last-child { padding-bottom: 0; border-bottom: 0; }
.station-tests > li > p { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.station-workspace .plant-hero h1 { overflow-wrap: anywhere; }
@container plant (max-width: 1000px) {
  .station-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
  .station-panel { padding: 20px; }
}
@container plant (max-width: 760px) {
  .station-layout { grid-template-columns: minmax(0, 1fr); }
  .station-layout > aside.station-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .station-layout > aside > :only-child { grid-column: 1 / -1; }
}
@container plant (max-width: 520px) {
  .station-layout > aside.station-stack, .station-form-grid { grid-template-columns: minmax(0, 1fr); }
  .station-context { align-items: flex-start; }
  .station-job, .station-panel, .station-empty { padding: 20px 16px; }
  .station-job-id { font-size: var(--fs-title); }
  .station-job-foot .btn { width: 100%; justify-content: space-between; }
  .station-facts { column-gap: 16px; }
  .station-issue-form .form-actions .btn { flex: 1 1 auto; }
}
[data-contrast="high"] .station-workspace :is(.station-panel, .station-job, .station-note, .station-reference, .station-check) { border-color: var(--border-strong); }
@media (forced-colors: active) {
  .station-job[data-featured="true"], .station-route [aria-current="step"] .station-route-marker { outline: 2px solid currentColor; }
}

/* Line setup: a weekly plan, then one clear work step at a time. */
.line-setup { max-width: 1540px; }
.line-setup .plant-hero-copy { flex-basis: 440px; }
.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.setup-grid > *, .setup-edit-grid > *, .setup-step > *, .setup-stack > * { min-width: 0; }
.setup-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.setup-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 18px 22px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); }
.setup-summary > div { display: grid; gap: 5px; }
.setup-summary small { color: var(--text-secondary); font-size: var(--fs-meta); }
.setup-summary strong { font-size: var(--fs-body); font-weight: 500; }
.setup-summary > .pill { margin-inline-start: auto; }
.setup-form.form { max-width: none; margin: 0; }
.setup-form .field { min-width: 0; margin-bottom: 18px; }
.setup-form .field > :is(input:not([type="checkbox"]), select, textarea) { width: 100%; }
.setup-form .field > label { display: block; margin-bottom: 6px; }
.setup-form .help { display: block; margin-top: 6px; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.65; }
.setup-form textarea { min-height: 120px; resize: vertical; line-height: 1.75; }
.setup-form textarea.setup-instruction { min-height: 220px; }
.setup-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.setup-form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--border); }
.setup-form-actions .btn { flex: 0 1 auto; }
.setup-models { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.setup-model { display: grid; gap: 16px; padding: 24px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.setup-model h3 { font-size: calc(var(--fs-title) * 1.15); }
.setup-model-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; }
.setup-model-foot { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.setup-model-foot > p { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); }
.setup-workflow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.setup-workflow > li { display: flex; align-items: center; gap: 8px; min-height: 36px; color: var(--text-secondary); font-size: var(--fs-meta); }
.setup-workflow > li[aria-current="step"] { color: var(--accent); font-weight: 600; }
.setup-workflow > li:not(:last-child)::after { content: "→"; padding-inline: 4px; color: var(--text-muted); }
.setup-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.setup-step { display: grid; grid-template-columns: 52px minmax(0, 1fr) 180px; gap: 18px; padding: 22px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); }
.setup-step-number { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-subtle); font-family: var(--font-mono); font-size: var(--fs-title); color: var(--text-secondary); }
.setup-step-body { display: grid; align-content: start; gap: 10px; min-width: 0; }
.setup-step-body h3 { font-size: var(--fs-title); overflow-wrap: anywhere; }
.setup-step-body > p { margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.setup-step-body .btn { justify-self: start; }
.setup-step-visual { display: grid; gap: 8px; align-content: start; }
.setup-step-visual img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-subtle); }
.setup-step-visual > span { display: grid; place-content: center; min-height: 120px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-secondary); font-size: var(--fs-meta); text-align: center; }
.setup-check { display: flex; flex-wrap: wrap; gap: 8px; align-items: start; padding: 12px 14px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius); }
.setup-check strong { font-size: var(--fs-meta); font-weight: 600; }
.setup-check p { flex: 1 1 220px; margin: 0; font-size: var(--fs-meta); line-height: 1.7; color: var(--text-secondary); }
.setup-edit-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 24px; }
.setup-preview { overflow: hidden; padding: 0; }
.setup-preview-body { display: grid; gap: 18px; padding: 24px; }
.setup-preview-image { display: block; width: 100%; max-height: 420px; min-height: 200px; object-fit: contain; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.setup-preview figcaption { padding: 12px 24px; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.setup-preview figure { margin: 0; }
.setup-preview h2 { font-size: calc(var(--fs-title) * 1.3); }
.setup-preview-instruction { font-size: var(--fs-body); line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.setup-image-empty { display: grid; place-content: center; gap: 12px; min-height: 260px; padding: 30px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); text-align: center; }
.setup-image-empty .nav-icon { width: 32px; height: 32px; margin: auto; opacity: 1; color: var(--text-muted); }
.setup-image-empty p { max-width: 45ch; margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; }
.setup-table { min-width: 0; max-width: 100%; overflow-x: auto; }
.setup-table .tbl { min-width: 42rem; }
.setup-table .tbl td { padding-block: 14px; }
.setup-table .tbl a { display: inline-flex; align-items: center; min-height: 44px; }
.setup-table .tbl .key { min-width: 12rem; white-space: normal; overflow-wrap: break-word; }
.setup-table .tbl td:last-child { white-space: nowrap; }
.setup-table .setup-part-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.setup-table .setup-part-form input:not([type="hidden"]) { width: 90px; min-width: 0; }
.setup-warning-list { margin: 0; padding-inline-start: 20px; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.8; }
.setup-upload input[type="file"] { padding: 10px; line-height: 1.6; }
.station-guide-visual { margin: 0 0 20px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-subtle); }
.station-guide-visual img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.station-guide-visual figcaption { padding: 12px 18px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.7; }
.station-guide-instruction { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-body); line-height: 1.9; }
.station-guide-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.station-guide-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
@container plant (max-width: 1100px) {
  .setup-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
  .setup-step { grid-template-columns: 44px minmax(0, 1fr); }
  .setup-step-visual { grid-column: 2; max-width: 220px; }
}
@container plant (max-width: 820px) {
  .setup-grid, .setup-edit-grid { grid-template-columns: minmax(0, 1fr); }
  .setup-grid > aside { order: -1; }
}
@container plant (max-width: 520px) {
  .setup-form-row { grid-template-columns: minmax(0, 1fr); }
  .setup-model, .setup-step, .setup-preview-body { padding: 18px 16px; }
  .setup-step { gap: 14px; grid-template-columns: 34px minmax(0, 1fr); }
  .setup-step-number { width: 34px; height: 40px; font-size: var(--fs-body); }
  .setup-step-body .btn, .setup-model-foot .btn { width: 100%; }
  .setup-form-actions .btn { flex: 1 1 auto; }
  .setup-summary { padding: 16px; }
  .setup-summary > .pill { margin-inline-start: 0; }
}
/* Record a claim: the searchable Dealer box is full width. */
select[data-search].w-full + input[list] {
  width: 100%;
}
/* A select that opens its own searchable list (data-combo in app.js). */
.combo {
  position: relative;
}

  .combo [hidden] {
    display: none !important;
  }

.combo-btn {
  position: relative;
  display: block;
  width: 100%;
  height: var(--control-h);
  padding: 0 32px 0 8px;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  .combo-btn::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
  }

  .combo-btn.is-placeholder {
    color: var(--text-muted);
  }

.combo-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  z-index: 60;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.combo-search {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
}

.combo-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 300px;
  overflow-y: auto;
}

/* The suggestion box (app.js, combo) uses the class names combo and combo-list too, and its list floats under the box.
   This list sits inside its own panel, which already draws the border and the shadow, so it stays in the flow. */
.combo-panel > .combo-list {
  position: static;
  min-width: 0;
  max-width: none;
  z-index: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.combo-item {
  padding: 6px 10px;
  cursor: pointer;
}

  .combo-item.on {
    background: var(--accent-soft);
  }

.combo-empty {
  padding: 8px 10px;
  color: var(--text-muted);
}
/* Purchase order terms and conditions: a link on New purchase order, the order page and the supplier's order page
   that opens the full text in a native dialog to read. Nothing is accepted. */
.terms-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; color: var(--text-primary); }
.terms-link .terms-label { font-weight: 500; }
.terms-dialog { width: min(820px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); color: var(--text-primary); }
.terms-dialog[open] { display: flex; flex-direction: column; }
.terms-dialog::backdrop { background: var(--scrim); }
.terms-dialog .terms-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.terms-dialog .terms-head h2 { flex: 1; margin: 0; font-size: 18px; }
.terms-dialog .terms-body { flex: 1; overflow-y: auto; padding: 16px 20px; font-size: 14px; line-height: 1.55; }
.terms-dialog .terms-body:focus { outline: none; }
.terms-dialog .terms-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.terms-doc .terms-title { font-weight: 700; text-align: center; margin: 0 0 4px; }
.terms-doc .terms-parties { text-align: center; color: var(--text-secondary); margin: 0 0 16px; }
.terms-doc p { margin: 0 0 12px; }
.terms-dialog .terms-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--border); }
/* The planner "why" panel: a pegging tree and a projected-balance line (no inline styles: the page policy forbids them). */
.why-tree, .why-tree ul { list-style: none; margin: 4px 0 8px; padding-left: 18px; border-left: 1px solid var(--border); }
.why-tree li { margin: 4px 0; }
.why-tree li > span + span { margin-left: 8px; }
.why-chart { display: block; width: 100%; max-width: 640px; height: auto; margin: 8px 0; }
.why-chart .axis { stroke: var(--border-strong); stroke-width: 1; }
.why-chart .marker { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; }
.why-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.why-chart .dot { fill: var(--accent); }
.why-chart .dot.short { fill: var(--danger); }
.why-chart .dot.marked { stroke: var(--text-muted); stroke-width: 2; r: 5; }
.why-chart .label { fill: var(--text-muted); font-size: 11px; }