/* 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
   (Polish) 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); }
.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); }
.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: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 { display: flex; align-items: center; gap: 12px; padding: 8px 10px; font-size: var(--fs-meta); color: var(--text-secondary); }
.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; }
/* 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; }
.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; }
.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 { content: " *"; color: var(--danger); font-weight: 600; }
/* 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 { font-size: var(--fs-meta); color: var(--text-secondary); font-weight: 500; }
.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; }

/* 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; }
.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 .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-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 .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: 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; } }

/* 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; }

/* 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; }