/* Aldward Metals shared theme.
   Page-specific layout is emitted into first-party page CSS assets; this file
   owns the common visual language, tokens, nav, ticker text, and base rendering. */

/* Self-hosted latin font files. The variable font ranges preserve the existing
   weights while keeping first paint independent of a third-party origin. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2?v=3100e775e8616cd2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2?v=0640890476fc1198') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2?v=83c005d49d8a6a50') format('woff2');
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 1: TOKENS
   The single source of truth for colour, spacing and type.
   No colour literal belongs anywhere below this block.
   ═══════════════════════════════════════════════════════════════ */

/* Keep the HTML hidden attribute authoritative even when a component class
   also declares a display value. Launch-mode code reveals nodes explicitly
   by removing the attribute. */
[hidden] { display: none !important; }



/* ═══════════════════════════════════════════════════════════════
   LAYER 2: PRIMITIVES
   Base rendering plus the chrome every page wears: nav, ticker,
   form controls, scroll reveal.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: var(--leading-ratio-1_18); }

/* ── Navigation (consistent across all pages) ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-100);
  background: var(--color-blue-alpha-012);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border-dark);
  height: var(--nav-h);
  display: flex; align-items: center;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 calc(var(--sp-1) * 7); gap: 18px;
}
/* The approved logo kit's horizontal bronze lockup (site/assets/brand/);
   the width follows from the artwork's 650 x 150 aspect ratio. */
.nav-logo {
  display: inline-flex; align-items: center; flex-shrink: 0;
  text-decoration: none;
}
.nav-logo img { display: block; height: 36px; width: auto; }
.nav-links { display: flex; gap: clamp(0.7rem, 1.2vw, 1.4rem); align-items: center; list-style: none; }
.nav-links a {
  font-size: 0.83rem; font-weight: 500; color: var(--color-neutral-alpha-047);
  text-decoration: none; transition: color var(--dur-200ms); position: relative; padding: var(--sp-1) 0;
  white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--cu-1), var(--cu-2));
  border-radius: 2px; transition: width var(--dur-280ms) var(--ease-standard);
}
.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"] { color: var(--color-neutral-solid-024); }
.nav-links a:hover::after,
.nav-links a.active::after,
.nav-links a[aria-current="page"]::after { width: 100%; }
.nav-cta {
  /* Same ramp as .btn-primary: white on --cu-1 is 2.41:1, on --cu-3 it
     is 4.70:1 and on --cu-4 7.9:1. */
  background: linear-gradient(135deg, var(--cu-3), var(--cu-4)) !important;
  color: var(--color-neutral-solid-024) !important;
  padding: var(--sp-2) calc(var(--sp-1) * 4.5) !important; border-radius: var(--radius-md) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px var(--cu-glow);
  transition: transform var(--dur-200ms), box-shadow var(--dur-200ms) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--focus-ring); }
.nav-back, .nav-tab {
  font-size: 0.8rem; color: var(--color-neutral-alpha-048) !important; text-decoration: none;
  padding: calc(var(--sp-1) * 1.5) var(--sp-3) !important; border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-neutral-alpha-030) !important;
  background: var(--color-neutral-alpha-023);
  transition: all var(--dur-200ms);
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-back:hover, .nav-tab:hover { border-color: var(--focus-ring) !important; color: var(--cu-1) !important; background: var(--cu-tint-2); }
.nav-tab.active { color: var(--cu-1) !important; border-color: var(--focus-ring) !important; background: var(--cu-tint-3); }
.nav-tab::after { display: none; }
.nav-back svg, .nav-tab svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.nav-right { font-size: 0.74rem; color: var(--color-neutral-alpha-044); white-space: nowrap; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: calc(var(--sp-1) * 1.5); color: var(--color-neutral-solid-024); }
.nav-lme { display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--color-neutral-alpha-041); }
.nav-lme > span:last-child { color: var(--state-success-text); font-weight: 600; }

@media (max-width: 860px) {
  .nav-inner { padding: 0 calc(var(--sp-1) * 4.5); gap: 10px; }
  .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-h); left: 0; right: 0; background: var(--bg-deep); border-bottom: 1px var(--border-dark); padding: var(--sp-2) calc(var(--sp-1) * 7) var(--sp-4); gap: 0; }
  .nav-links.open { display: flex; }
  /* Touch targets. The links are 24px of text on their own; the menu is
     the primary navigation on every phone, so give each row a full
     44px hit area rather than relying on precise tapping. */
  /* Full-width rows: the parent's `align-items: center` otherwise shrinks
     each item to its text width, leaving a 44px-tall but narrow target. */
  .nav-links { align-items: stretch; }
  .nav-links li { display: flex; width: 100%; }
  .nav-links a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: var(--sp-2) 0; }
  .nav-links .nav-cta { justify-content: center; min-height: 44px; margin-top: var(--sp-2); }
  .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: calc(var(--sp-1) * -1.5); }
  .nav-right { display: none; }
  .nav-back .nav-back-label, .nav-tab .nav-tab-label { display: none; }
  .nav-back, .nav-tab { width: 44px; height: 44px; padding: 0 !important; justify-content: center; }
}

/* ── LME Ticker ───────────────────────────────── */
.lme-ticker {
  background: var(--dark-0);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-dark);
  position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: var(--z-99);
  font-variant-numeric: tabular-nums;
}
.ticker-inner, .lme-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 1180px; margin: 0 auto; padding: 0 calc(var(--sp-1) * 7);
}
/* Ticker text sits on --dark-0, the darkest surface on the site, so the
   alpha it is drawn at is the whole contrast story. Measured against
   var(--color-blue-solid-003): 0.40 gave 3.77:1 and 0.28 gave 2.40:1, both under 4.5. */
.ticker-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--color-neutral-alpha-044); text-transform: uppercase;
}
.ticker-price {
  font-size: 0.82rem; font-weight: 600; color: var(--cu-1);
  font-variant-numeric: tabular-nums;
}
.ticker-price.live { color: var(--color-success-solid-004); }
.ticker-sep { color: var(--color-neutral-alpha-035); }
.ticker-updated, .ticker-source {
  font-size: 0.66rem; color: var(--color-neutral-alpha-045);
  margin-left: auto; letter-spacing: 0.04em;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-success-solid-003);
  display: inline-block; position: relative; margin-right: calc(var(--sp-1) * 0.5);
}
.live-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--color-success-solid-003); opacity: 0; animation: pulse var(--dur-2200ms) var(--ease-ease-out) infinite;
}
@keyframes pulse { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }
.ticker-price.flash { color: var(--cu-0); transition: color var(--dur-300ms); }

/* ── Inputs / buttons (shared baseline) ── */
input, select, textarea, button { font: inherit; }
::selection { background: var(--cu-tint-3); }

/* ── Reveal on scroll ───────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-700ms) var(--ease-standard), transform var(--dur-700ms) var(--ease-standard); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: var(--dur-80ms); } .reveal-d2 { transition-delay: var(--dur-160ms); }
.reveal-d3 { transition-delay: var(--dur-240ms); } .reveal-d4 { transition-delay: var(--dur-320ms); }
.reveal-d5 { transition-delay: var(--dur-400ms); } .reveal-d6 { transition-delay: var(--dur-480ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   LAYER 3: PATTERNS
   Composed components. Marketing patterns, the shared tool shell for
   the three calculation pages, and the alloy technical pages.

   Anything used on more than one page belongs here. Genuinely page-specific
   layout is emitted into a first-party page CSS asset.
   ═══════════════════════════════════════════════════════════════ */

/* ── Material cards (used on the marketing landing page) ── */
.mat-band { height: 96px; position: relative; overflow: hidden; }
.mat-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg,
    var(--color-neutral-alpha-024) 0 1px, transparent 1px 4px);
  pointer-events: none;
}
.mat-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, var(--color-neutral-alpha-042) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.material-card:hover .mat-band::after { animation: sheen var(--dur-900ms) var(--ease-ease); }
/* The five non-copper band gradients below use named aliases; they are
   missed token migration. They encode each alloy's real appearance and are
   the only visual signal separating product categories — tokenising them
   onto the brand ramp would make brass, bronze, nickel silver and phosphor
   bronze indistinguishable. Only the copper band tracks the brand. */
.mat-copper-band { background: linear-gradient(135deg, var(--cu-0), var(--cu-2) 55%, var(--cu-4)); }
.mat-brass-band { background: linear-gradient(135deg, var(--color-amber-solid-015), var(--color-amber-solid-012) 55%, var(--color-amber-solid-007)); }
.mat-bronze-band { background: linear-gradient(135deg, var(--color-amber-solid-014), var(--color-amber-solid-010) 55%, var(--color-amber-solid-004)); }
.mat-nickel-band { background: linear-gradient(135deg, var(--color-neutral-solid-012), var(--color-neutral-solid-005) 55%, var(--color-neutral-solid-002)); }
.mat-phosphor-band { background: linear-gradient(135deg, var(--color-copper-solid-020), var(--color-copper-solid-016) 55%, var(--color-copper-solid-005)); }
.mat-special-band { background: linear-gradient(135deg, var(--color-amber-alpha-004), var(--color-amber-solid-003) 55%, var(--color-amber-solid-001)); }
@keyframes sheen { to { transform: translateX(100%); } }

/* Image-driven material card band (optional, added in the imagery pass).
   The hero asset is rendered as the band image; a gradient underlay remains
   behind it so the card never shows a flat fallback if the image fails.
   The sheen sweep comes from .mat-band::after, so reuse is automatic. */
.mat-band-image { position: relative; }
.mat-band-image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.mat-band-image .mat-band-sheen {
  /* Wrapper that lights up on hover, layered above the image but below the
     symbol badge. The actual sheen sweep still rides on .mat-band::after
     so existing rule .material-card:hover .mat-band::after still applies. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--color-blue-alpha-005) 55%, var(--color-blue-alpha-008) 100%);
}

/* Symbol badge — circular pin in the upper-right of the band.
   Sized for the existing 96px band; colapses cleanly on mobile. */
.mat-symbol {
  position: absolute; top: 10px; right: 10px;
  min-width: 32px; height: 32px; max-width: 78px; padding: 0 calc(var(--sp-1) * 2.25); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.02em;
  /* Sits over photography, so its own backdrop has to carry the
     contrast on its own — at 0.78 a light patch in the image lifted
     the effective background and the symbol fell to ~4.1:1. */
  background: var(--color-blue-alpha-011);
  color: var(--cu-1);
  border: 1px solid var(--cu-line-strong);
  box-shadow: 0 2px 8px var(--color-neutral-alpha-014);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: var(--z-2);
  white-space: nowrap;
}

/* Element / alloy composition chips under the title. Used in conjunction
   with the optional `elements` attribute on ref-material-card. */
.mat-elements {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: calc(var(--sp-1) * 1.5) 0 calc(var(--sp-1) * 2.5);
}
.mat-element {
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.04em; line-height: var(--leading-ratio-1);
  padding: calc(var(--sp-1) * 1.25) var(--sp-2); border-radius: var(--radius-sm);
  background: var(--cu-tint-1);
  color: var(--brand-text);
  border: 1px solid var(--cu-line);
}
.material-card-image .mat-element {
  /* On image-style cards, keep the chips slightly darker so they read
     against the band image — they end up below the band, not on top. */
  background: var(--cu-tint-1);
}

/* Card shell and body for <ref-material-card>. The component shipped with
   its band, symbol and element chips styled but its body (.mat-body, h3,
   .formula, .mat-spec) never was, so the element rendered unstyled text —
   which is why nothing on the site used it. Added 2026-08-11. */
.material-card {
  display: flex; flex-direction: column; height: 100%;
  overflow: hidden; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
.material-card:hover {
  transform: translateY(-3px);
  border-color: var(--cu-line-strong);
  box-shadow: var(--shadow-md);
}
.mat-body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
.mat-body h3 {
  font-family: var(--font-display); font-size: var(--size-px-18);
  letter-spacing: -0.01em; margin-bottom: var(--sp-1);
}
.mat-body .formula {
  font-family: var(--font-mono); font-size: var(--size-px-10);
  color: var(--brand-text); letter-spacing: 0.04em;
}
.mat-body .formula:empty { display: none; }
.mat-body p {
  margin-top: var(--sp-2); color: var(--text-muted);
  font-size: var(--size-px-14); line-height: var(--leading-normal);
}
.mat-spec {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.mat-spec span {
  /* --text-faint is 3.16:1 on white and this is a real label, not a hint.
     --text-muted is 6.53:1 and reads the same at this size. */
  font-size: var(--size-px-10); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--text-muted); font-weight: 600;
}
.mat-spec strong {
  font-family: var(--font-mono); font-size: var(--size-px-12);
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.mat-spec strong:empty { display: none; }

/* Anchor wrapper so a whole card is one click target. The component
   renders a .reveal div, so the link must not collapse the height. */
.material-card-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.material-card-link > ref-material-card,
.material-card-link .reveal { display: block; height: 100%; }

/* Public website and demo app surfaces */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 calc(var(--sp-1) * 7); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--sp-3) calc(var(--sp-1) * 5); border-radius: var(--radius-md);
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  border: 0; cursor: pointer; font-family: var(--font-sans);
  transition: transform var(--dur-200ms) var(--ease-standard), box-shadow var(--dur-200ms) var(--ease-standard), border-color var(--dur-200ms) var(--ease-standard), background var(--dur-200ms) var(--ease-standard);
}
/* The gradient runs --cu-3 -> --cu-4, not the lighter --cu-1 -> --cu-2 it
   used before 2026-08-11. White on --cu-1 measures 2.41:1, far below AA;
   the lightest point of this ramp measures 4.70:1 and the darkest 7.9:1.
   The tool pages used to carry their own accessible variant of this
   button inline — this is now the single definition for both. */
.btn-primary { background: linear-gradient(135deg, var(--cu-3), var(--cu-4)); color: var(--color-neutral-solid-024); box-shadow: var(--shadow-copper); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px var(--cu-glow); }
.btn-outline { background: var(--color-neutral-alpha-024); color: var(--color-neutral-solid-024); border: 1px solid var(--color-neutral-alpha-035); }
.btn-outline:hover { border-color: var(--focus-ring); background: var(--cu-tint-2); }
/* Light-ground secondary, used by the tool pages next to .btn-primary. */
.btn-secondary { background: var(--surface-raised); border: 1px solid var(--border-subtle); color: var(--text-muted); }
.btn-secondary:hover { border-color: var(--brand-text); color: var(--brand-text); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.public-hero {
  padding: calc(var(--nav-h) + var(--ticker-h) + calc(var(--sp-1) * 20.5)) 0 calc(var(--sp-1) * 21.5);
  background: radial-gradient(760px 420px at 82% 20%, var(--cu-glow), transparent 65%), var(--bg-deep);
  color: var(--color-neutral-solid-024); overflow: hidden;
}
.public-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: calc(var(--sp-1) * 5.5);
  padding: calc(var(--sp-1) * 1.75) calc(var(--sp-1) * 3.5); border-radius: var(--radius-pill);
  color: var(--cu-1); border: 1px solid var(--cu-line-strong);
  background: var(--cu-tint-2); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cu-1); box-shadow: 0 0 10px var(--cu-1); }
.public-hero h1, .page-hero h1 { font-family: var(--font-display); letter-spacing: -0.025em; line-height: var(--leading-ratio-1_06); }
.public-hero h1 { max-width: 680px; font-size: clamp(2.6rem, 5vw, 4.8rem); margin-bottom: calc(var(--sp-1) * 4.5); }
.hero-sub, .page-hero p { color: var(--color-neutral-alpha-049); font-size: 1rem; line-height: var(--leading-relaxed); max-width: 650px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: calc(var(--sp-1) * 6.5); }
/* Aspect ratio rather than a fixed 420px height: a pixel height chosen
   for one viewport letterboxes or over-crops at every other one. */
.public-hero-visual { position: relative; }
.public-hero-visual img {
  width: 100%; aspect-ratio: 4 / 3; height: auto;
  object-fit: cover; object-position: 62% 50%;
  border-radius: var(--radius-lg); box-shadow: 0 30px 100px var(--color-neutral-alpha-017);
}
.hero-market-card {
  position: absolute; left: -22px; bottom: -18px; width: min(340px, 92%);
  padding: calc(var(--sp-1) * 5.5); border-radius: var(--radius-lg);
  background: var(--color-blue-alpha-017); border: 1px solid var(--color-neutral-alpha-030);
  backdrop-filter: blur(14px); box-shadow: var(--shadow-lg);
}
.hero-market-card span, .overline {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--brand-text); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
/* --accent is the light-ground copper (5.87:1 on white). On a dark
   surface it drops to 3.01:1, so the overline switches to --cu-1
   (8.01:1 on --dark-1) wherever it sits on dark. */
.hero-market-card span,
.dark-cta .overline,
.public-hero .overline,
.page-hero .overline,
.tool-hero .overline { color: var(--cu-1); }
.overline::before { content: ""; width: 24px; height: 1.5px; background: linear-gradient(90deg, currentColor, transparent); }
.hero-market-card strong { display: block; color: var(--color-neutral-solid-024); margin: var(--sp-2) 0; font-family: var(--font-display); }
.hero-market-card p { color: var(--color-neutral-alpha-047); font-size: 0.84rem; }
.public-section { padding: var(--section-py) 0; background: var(--surface-raised); }
.products-band { background: var(--surface-page); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }

/* ── Homepage quote picker ──────────────────────────────────────
   The full specification, public. Only the price behind it needs an
   account, so this form is deliberately not gated in any way. */
.quote-band { background: var(--surface-page); border-top: 1px solid var(--border-subtle); }
.quote-picker {
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow);
}
/* Material carries the longest labels ("Nickel Silver Strips (CuNi18Zn20)"),
   the numeric fields need almost nothing. Equal columns truncated the first. */
.quote-picker-grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: 1.4fr 1.05fr 0.75fr 0.75fr 0.75fr 1.05fr;
}
.qp-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.qp-field label { font-size: var(--size-px-12); font-weight: 600; color: var(--text-primary); }
.qp-field select, .qp-field input {
  width: 100%; padding: calc(var(--sp-1) * 2.5) var(--sp-3); border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle); background: var(--surface-raised); color: var(--text-primary);
  font-size: var(--size-px-14); min-height: 44px;
}
.qp-field select:focus, .qp-field input:focus {
  outline: none; border-color: var(--cu-line-strong);
  box-shadow: 0 0 0 3px var(--cu-tint-2);
}
.postcode-input-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.postcode-badge {
  display: none;
  margin-top: var(--sp-1);
  font-size: var(--size-px-11);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.postcode-badge.is-valid {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--green, var(--color-success-solid-002));
  font-weight: 600;
}
.postcode-badge.is-unknown {
  display: inline-block;
  color: var(--text-faint);
}
.qp-options {
  border: 0; border-top: 1px solid var(--border-subtle);
  margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0;
}
.qp-options legend {
  font-size: var(--size-px-10); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); padding: 0;
}
.qp-options-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.qp-options label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--size-px-12); color: var(--text-primary); cursor: pointer; min-height: 44px;
}
.qp-options input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--brand-text); }
.qp-options label span { color: var(--text-muted); font-size: var(--size-px-10); }
.qp-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.qp-note { color: var(--text-muted); font-size: var(--size-px-12); margin: 0; }

@media (max-width: 1100px) { .quote-picker-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .quote-picker-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .quote-picker-grid { grid-template-columns: 1fr; } .quote-picker { padding: var(--sp-5); } }
.section-header { max-width: 680px; margin-bottom: var(--sp-6); }
.section-header h2, .public-split h2, .product-detail h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: var(--leading-ratio-1_12); margin: calc(var(--sp-1) * 2.5) 0; }
.section-header p, .public-split p, .product-detail p { color: var(--text-muted); line-height: var(--leading-ratio-1_7); }
.public-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.public-card {
  display: flex; flex-direction: column; gap: 10px; min-height: 150px;
  padding: calc(var(--sp-1) * 5.5); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle);
  background: var(--surface-raised); color: var(--text-primary); text-decoration: none; box-shadow: var(--shadow-sm);
}
.public-card:hover { border-color: var(--cu-line-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.public-card strong { font-family: var(--font-display); font-size: 1.02rem; }
.public-card span { color: var(--text-muted); font-size: 0.9rem; line-height: var(--leading-normal); }
.public-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }
.process-list { display: grid; gap: 10px; }
.process-list div {
  display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center;
  padding: calc(var(--sp-1) * 4.5); background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
}
.process-list strong { color: var(--brand-text); font-family: var(--font-display); }
.process-list span { color: var(--text-muted); }

/* Long-form copy: the privacy and cookie notices. Headings need air above
   them to read as sections, and links inside running text need to look like
   the site's links rather than the browser's default blue. */
.public-copy { max-width: 760px; }
.public-copy h2 { font-family: var(--font-display); margin: var(--sp-6) 0 var(--sp-2); }
.public-copy h2:first-child { margin-top: 0; }
.public-copy p { margin: 0 0 var(--sp-3); line-height: var(--leading-ratio-1_7); }
.public-copy a, .process-list a, .public-card a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }

/* Timeline variant of the process list — a connected sequence reads as
   a process, where four separate boxes read as four unrelated facts. */
.process-list.is-timeline { position: relative; gap: 0; }
.process-list.is-timeline > div {
  position: relative; grid-template-columns: 1fr;
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-8);
  background: transparent; border: 0; border-radius: 0;
}
.process-list.is-timeline > div::before {
  content: ""; position: absolute; left: 18px; top: 0; bottom: 0;
  width: 1px; background: var(--border-subtle);
}
.process-list.is-timeline > div:first-child::before { top: 50%; }
.process-list.is-timeline > div:last-child::before { bottom: 50%; }
.process-list.is-timeline > div::after {
  content: ""; position: absolute; left: 12px; top: 50%;
  width: 13px; height: 13px; margin-top: calc(var(--sp-1) * -1.5); border-radius: 50%;
  background: var(--surface-raised); border: 2px solid var(--cu-2);
}
.process-list.is-timeline strong {
  display: block; margin-bottom: var(--sp-1);
  font-family: var(--font-mono); font-size: var(--size-px-10);
  letter-spacing: 0.14em; color: var(--brand-text);
}
.dark-cta { background: var(--bg-deep); color: var(--color-neutral-solid-024); border-top: 1px solid var(--border-dark); }
.dark-cta p { color: var(--color-neutral-alpha-047); }
.public-footer { background: var(--bg-deep); color: var(--color-neutral-alpha-043); padding: calc(var(--sp-1) * 13.5) 0; border-top: 1px solid var(--border-dark); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.footer-logo { margin-bottom: var(--sp-3); }
.footer-logo img { display: block; height: 40px; width: auto; }
.footer-desc { color: var(--color-neutral-alpha-043); max-width: 380px; }
.footer-desc[data-company-disclosure] { font-size: 0.72rem; line-height: 1.5; opacity: 0.7; margin-top: var(--sp-3); }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { color: var(--color-neutral-solid-024); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; }
.footer-col a { color: var(--color-neutral-alpha-045); text-decoration: none; }
.footer-col a:hover { color: var(--cu-1); }
ref-page-hero, ref-section, ref-section-header, ref-card-grid, ref-stat-row, ref-cta-band { display: block; }
.page-hero { padding: calc(var(--nav-h) + calc(var(--sp-1) * 20)) 0 calc(var(--sp-1) * 17.5); background: var(--bg-deep); color: var(--color-neutral-solid-024); }
.page-hero h1 { font-size: clamp(2rem, 4vw, 3.6rem); max-width: 760px; margin: calc(var(--sp-1) * 2.5) 0; }
.public-page { background: var(--surface-raised); min-height: 100vh; }
.product-detail-grid { display: grid; gap: 0; }
.product-detail {
  display: grid; grid-template-columns: 420px 1fr; gap: clamp(28px, 5vw, 64px);
  align-items: center; padding: calc(var(--sp-1) * 14.5) 0;
}
.product-detail + .product-detail { border-top: 1px solid var(--border-subtle); }
.product-detail:nth-child(even) { grid-template-columns: 1fr 420px; }
.product-detail:nth-child(even) .product-detail-visual { order: 2; }
.product-detail-visual {
  position: relative; padding: var(--sp-5); border-radius: var(--radius-lg);
  background: radial-gradient(120% 110% at 28% 18%, var(--dark-2), var(--bg-deep));
  border: 1px solid var(--color-neutral-alpha-026);
  box-shadow: 0 24px 60px var(--color-blue-alpha-003);
}
.product-detail-visual img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-md); box-shadow: 0 14px 40px var(--color-neutral-alpha-017);
}
.product-detail-num {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fam-accent, var(--brand-text)); font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.product-detail-num::before { content: ""; width: 24px; height: 1.5px; background: currentColor; }
.grade-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--sp-4) 0 calc(var(--sp-1) * 0.5); }
.grade-chip {
  font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600;
  padding: calc(var(--sp-1) * 1.25) calc(var(--sp-1) * 2.75); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  color: var(--text-muted); background: var(--surface-page); text-decoration: none;
  transition: border-color var(--dur-200ms) var(--ease-standard), color var(--dur-200ms) var(--ease-standard), background var(--dur-200ms) var(--ease-standard);
}
.grade-chip:hover { border-color: var(--fam-accent, var(--brand-text)); color: var(--fam-accent, var(--brand-text)); background: var(--color-neutral-solid-024); }
.grade-chip-more { border-style: dashed; color: var(--brand-text); }
.product-detail-spec {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--fam-accent, var(--cu-2)); background: var(--surface-page);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-muted); font-size: 0.88rem; line-height: var(--leading-ratio-1_65);
}
.product-detail-spec strong { color: var(--text-primary); }
.product-detail-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: var(--sp-5); }
.product-detail-cta .link-more { color: var(--brand-text); font-weight: 700; text-decoration: none; font-size: 0.9rem; }
.product-detail-cta .link-more:hover { color: var(--brand-fill-hover); }
.quote-form, .app-panel {
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: calc(var(--sp-1) * 7); box-shadow: var(--shadow-sm);
}
.quote-form { display: grid; gap: 16px; }
.quote-form label { display: grid; gap: 6px; color: var(--text-muted); font-size: 0.82rem; font-weight: 600; }
.quote-form input, .quote-form textarea, .quote-form select {
  width: 100%; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--sp-3) calc(var(--sp-1) * 3.5); color: var(--text-primary); background: var(--surface-raised); font: inherit;
}
.quote-form textarea { min-height: 150px; resize: vertical; }
.quote-form input:focus, .quote-form textarea:focus, .quote-form select:focus {
  outline: none; border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--cu-tint-1);
}
.form-message { color: var(--brand-text); font-size: 0.86rem; min-height: 1.2em; }
.market-watch .muted-metal { color: var(--color-neutral-alpha-046); }
.app-body { background: var(--surface-page); }
/* ── Sign-in ─────────────────────────────────────────────────────────
   White card on the dark copper ground. Status colour inside the card
   is --red on --red-bg, which needs the light surface to clear AA. */
.auth-shell {
  min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6);
  background: radial-gradient(600px 360px at 70% 20%, var(--cu-tint-3), transparent), var(--bg-deep);
}
.auth-stack { width: min(420px, 100%); }
.auth-card {
  width: 100%; display: grid; gap: var(--sp-3);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  animation: authRise var(--dur-450ms) var(--ease-standard) both;
}
@keyframes authRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-logo { margin-bottom: var(--sp-1); }
.auth-logo img { height: 40px; }
.auth-overline { font-size: var(--size-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-text); font-weight: 700; margin: 0; }
.auth-card h1 { font-family: var(--font-display); font-size: 1.9rem; margin: 0; }
.auth-sub { color: var(--text-muted); font-size: var(--size-sm); line-height: var(--leading-normal); margin: 0; }
.auth-field { display: grid; gap: var(--sp-1); }
.auth-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.auth-field-head label { font-size: var(--size-sm); font-weight: 600; color: var(--text-muted); }
.auth-field-link { font-size: var(--size-xs); font-weight: 600; color: var(--brand-text); text-decoration: none; }
.auth-field-link:hover { color: var(--brand-fill-hover); text-decoration: underline; }
.auth-card input {
  width: 100%; min-height: 44px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: var(--sp-3) calc(var(--sp-1) * 3.5); color: var(--text-primary); background: var(--surface-raised); font: inherit;
}
.auth-card input::placeholder { color: var(--text-faint); }
.auth-card input:focus-visible { outline: none; border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--cu-tint-2); }
.auth-card input.is-invalid { border-color: var(--state-danger-text); }
.auth-password { position: relative; display: block; }
.auth-password input { padding-right: calc(var(--sp-1) * 17); }
.auth-reveal {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  min-height: 32px; padding: 0 var(--sp-2); border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--size-xs); font-weight: 700; color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.auth-reveal:hover { color: var(--brand-text); }
.auth-submit { width: 100%; min-height: 46px; margin-top: var(--sp-2); }
.auth-submit[disabled] { opacity: 0.72; cursor: progress; transform: none; }
.auth-alert { display: block; min-height: 0; margin: 0; padding: var(--sp-3); border-radius: var(--radius-md); font-size: var(--size-sm); line-height: var(--leading-ratio-1_5); }
.auth-alert[hidden] { display: none; }
.auth-alert.is-error { background: var(--state-danger-fill); border: 1px solid var(--color-danger-alpha-005); color: var(--state-danger-text); }
.auth-alert.is-error a { color: var(--state-danger-text); font-weight: 600; }
.auth-alt {
  margin: var(--sp-2) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle);
  text-align: center; font-size: var(--size-sm); color: var(--text-muted);
}
.auth-alt a { color: var(--brand-text); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { color: var(--brand-fill-hover); text-decoration: underline; }
.auth-back { margin: var(--sp-4) 0 0; text-align: center; font-size: var(--size-xs); }
.auth-back a { color: var(--color-neutral-alpha-042); text-decoration: none; }
.auth-back a:hover { color: var(--cu-1); }
@media (prefers-reduced-motion: reduce) { .auth-card { animation: none; } }
@media (max-width: 420px) {
  .auth-shell { padding: var(--sp-4); }
  .auth-card { padding: var(--sp-5); gap: var(--sp-2); }
  .auth-card h1 { font-size: 1.6rem; }
}

/* Alloy technical pages */
.products-technical-band {
  padding-top: calc(var(--nav-h) + var(--sp-7));
  background: linear-gradient(135deg, var(--color-neutral-solid-024) 0%, var(--surface-page) 100%);
  border-bottom: 1px solid var(--border-subtle);
}
.technical-entry {
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
}
.technical-entry h2 { font-size: clamp(1.55rem, 2.4vw, 2.25rem); margin: var(--sp-2) 0; }
.technical-entry p { color: var(--text-muted); max-width: 680px; }
.technical-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-light-outline {
  color: var(--text-primary) !important;
  background: var(--color-neutral-solid-024);
  border: 1px solid var(--border-subtle);
}
.btn-light-outline:hover { border-color: var(--cu-line-strong); background: var(--cu-tint-1); }
.products-alloy-library .technical-entry { margin-bottom: calc(var(--sp-1) * 7); }
.products-alloy-grid { margin-top: calc(var(--sp-1) * 4.5); }
.alloy-index-section { background: var(--surface-page); }
.alloy-list-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.alloy-list-card {
  min-height: 190px; display: flex; flex-direction: column; justify-content: space-between;
  gap: 12px; padding: calc(var(--sp-1) * 5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--color-neutral-solid-024); color: var(--text-primary); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-200ms) var(--ease-standard), box-shadow var(--dur-200ms) var(--ease-standard), border-color var(--dur-200ms) var(--ease-standard);
}
.alloy-list-card:hover {
  transform: translateY(-2px); border-color: var(--fam-accent, var(--cu-line-strong)); box-shadow: var(--shadow-md);
}
.alloy-list-card span {
  align-self: flex-start; padding: calc(var(--sp-1) * 1.25) var(--sp-2); border-radius: var(--radius-sm);
  color: var(--fam-accent, var(--brand-text)); background: var(--fam-accent-soft, var(--cu-tint-1));
  border: 1px solid var(--fam-accent-soft, var(--cu-line));
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
.alloy-list-card strong { font-family: var(--font-display); font-size: 1.65rem; line-height: var(--leading-ratio-1); }
.alloy-list-card em { color: var(--text-primary); font-style: normal; font-weight: 700; }
.alloy-list-card small { color: var(--text-muted); font-family: var(--font-mono); line-height: var(--leading-normal); }
.alloy-page { background: var(--color-neutral-solid-024); min-height: 100vh; }
.alloy-hero {
  padding: calc(var(--nav-h) + calc(var(--sp-1) * 21.5)) 0 calc(var(--sp-1) * 18.5);
  color: var(--color-neutral-solid-024);
  background:
    radial-gradient(680px 420px at 86% 18%, var(--cu-glow), transparent 67%),
    linear-gradient(135deg, var(--dark-0) 0%, var(--dark-2) 54%, var(--dark-0) 100%);
  overflow: hidden;
}
.alloy-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.72fr);
  gap: 54px; align-items: center;
}
.alloy-back {
  display: inline-flex; margin-bottom: calc(var(--sp-1) * 6.5); color: var(--color-neutral-alpha-047);
  text-decoration: none; font-size: 0.82rem; font-weight: 700;
}
.alloy-back::before { content: "<"; margin-right: var(--sp-2); color: var(--cu-2); }
.alloy-hero h1 {
  font-size: clamp(3rem, 6vw, 6.4rem);
  line-height: var(--leading-ratio-0_95); margin: var(--sp-3) 0 calc(var(--sp-1) * 5.5);
}
.alloy-hero h1 em {
  display: block; font-style: normal; color: var(--cu-2);
  font-family: var(--font-mono); font-size: clamp(1.5rem, 2.4vw, 2.6rem);
  letter-spacing: 0;
  margin-top: var(--sp-3);
}
.alloy-hero p { max-width: 690px; color: var(--color-neutral-alpha-050); font-size: 1.04rem; line-height: var(--leading-ratio-1_8); }
.alloy-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--sp-1) * 7.5); }
.alloy-id-panel {
  border: 1px solid var(--color-neutral-alpha-030);
  background: var(--color-neutral-alpha-025);
  box-shadow: 0 30px 80px var(--color-neutral-alpha-010);
  backdrop-filter: blur(14px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.alloy-metal-visual {
  min-height: 226px;
  background: linear-gradient(135deg, var(--cu-tint-3), var(--color-neutral-alpha-024));
}
.alloy-metal-visual img {
  width: 100%; height: 226px; display: block; object-fit: cover; object-position: center;
}
.alloy-id-panel dl {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-neutral-alpha-028);
}
.alloy-id-panel dl div { background: var(--color-blue-alpha-004); padding: calc(var(--sp-1) * 4.5); }
.alloy-id-panel dt {
  color: var(--color-neutral-alpha-040); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; font-weight: 700;
}
.alloy-id-panel dd {
  color: var(--color-neutral-solid-024); margin-top: calc(var(--sp-1) * 1.25); font-family: var(--font-display); font-size: 1.12rem;
}
.alloy-intro { border-bottom: 1px solid var(--border-subtle); }
.alloy-intro-grid {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
  gap: 42px; align-items: end;
}
.alloy-intro h2 { font-size: clamp(1.8rem, 3vw, 3rem); margin: calc(var(--sp-1) * 2.5) 0; }
.alloy-designation { color: var(--text-muted); font-family: var(--font-mono); }
.alloy-chip-block { display: flex; flex-wrap: wrap; gap: 9px; }
.alloy-chip-block span {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: calc(var(--sp-1) * 1.75) calc(var(--sp-1) * 2.75); border-radius: var(--radius-md);
  border: 1px solid var(--cu-line);
  background: var(--cu-tint-1);
  color: var(--brand-text); font-size: 0.82rem; font-weight: 700;
}
.alloy-data-band {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.alloy-data-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 18px; align-items: start; }
.alloy-panel {
  background: var(--color-neutral-solid-024); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.alloy-panel header {
  display: flex; align-items: center; gap: 12px; padding: var(--sp-4) calc(var(--sp-1) * 4.5);
  background: var(--cu-4); color: var(--color-neutral-solid-024);
}
.alloy-panel header span { font-family: var(--font-mono); font-size: 0.78rem; opacity: 0.76; }
.alloy-panel header h2 { font-size: 1.08rem; letter-spacing: 0; }
.alloy-composition { display: grid; }
.alloy-composition-row {
  display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center;
  padding: calc(var(--sp-1) * 4.5); border-top: 1px solid var(--border-subtle);
}
.alloy-composition-row:first-child { border-top: 0; }
.alloy-composition-row strong {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--dark-2);
}
.alloy-composition-row span { color: var(--text-primary); font-weight: 700; }
.alloy-composition-row em {
  grid-column: 2; color: var(--text-muted); font-style: normal; font-size: 0.82rem;
}
.alloy-table-wrap {
  overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--color-neutral-solid-024); box-shadow: var(--shadow-sm);
}
.alloy-panel .alloy-table-wrap { border: 0; border-radius: 0; box-shadow: none; }
.alloy-table {
  width: 100%; min-width: 620px; border-collapse: collapse;
  font-size: 0.86rem; font-variant-numeric: tabular-nums;
}
.alloy-table th, .alloy-table td {
  padding: calc(var(--sp-1) * 2.75) var(--sp-3); border-bottom: 1px solid var(--border-subtle); text-align: left;
}
.alloy-table thead th {
  background: var(--dark-2); color: var(--color-neutral-solid-024); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.alloy-table tbody tr:nth-child(even) { background: var(--surface-page); }
.alloy-table tbody tr:hover { background: var(--cu-tint-1); }
.alloy-table tbody th { font-weight: 700; color: var(--text-primary); }
.alloy-mechanical-wrap { border-color: var(--border-strong); }
.alloy-mechanical-table { min-width: 960px; }
.alloy-chart-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.alloy-chart {
  background: var(--color-neutral-solid-024); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: calc(var(--sp-1) * 4.5); box-shadow: var(--shadow-sm);
}
.alloy-chart header { margin-bottom: var(--sp-3); }
.alloy-chart h3 { font-size: 1rem; letter-spacing: 0; margin-bottom: calc(var(--sp-1) * 0.5); }
.alloy-chart header span { color: var(--text-muted); font-size: 0.78rem; }
.alloy-chart svg { display: block; width: 100%; height: auto; min-height: 210px; }
.alloy-chart line { stroke: var(--text-primary); stroke-width: 0.8; }
.alloy-chart text { fill: var(--text-muted); font: 3.2px var(--font-mono); }
.alloy-chart .chart-labels text { text-anchor: middle; font-size: var(--size-px-2_8); }
.alloy-chart path { fill: none; stroke-width: 1.4; }
.alloy-chart circle { fill: var(--color-neutral-solid-024); stroke-width: 1.1; }
.alloy-chart .series-0 path, .alloy-chart .series-0 circle { stroke: var(--cu-2); }
.alloy-chart .series-1 path, .alloy-chart .series-1 circle { stroke: var(--color-teal-solid-006); }
.alloy-chart .series-2 path, .alloy-chart .series-2 circle { stroke: var(--text-primary); }
.alloy-availability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.alloy-availability-grid article {
  padding: calc(var(--sp-1) * 5.5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--color-neutral-solid-024); box-shadow: var(--shadow-sm);
}
.alloy-availability-grid h2 { font-size: 1.15rem; margin-bottom: calc(var(--sp-1) * 3.5); }
.alloy-page.is-loading [data-charts],
.alloy-page.is-loading [data-composition],
.alloy-page.is-loading [data-physical],
.alloy-page.is-loading [data-mechanical] { min-height: 80px; }
.alloy-page.is-error .alloy-hero { background: var(--dark-2); }
@media (max-width: 860px) {
  .public-hero-grid, .public-split, .product-detail, .alloy-hero-grid, .alloy-intro-grid, .alloy-data-grid, .alloy-chart-grid, .alloy-availability-grid { grid-template-columns: 1fr; }
  .alloy-list-grid { grid-template-columns: 1fr 1fr; }
  .public-card-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-market-card { position: static; width: auto; margin-top: var(--sp-3); }
  .technical-entry { align-items: flex-start; flex-direction: column; }
  .alloy-hero { padding-top: calc(var(--nav-h) + calc(var(--sp-1) * 14.5)); }
}
@media (max-width: 640px) {
  .public-card-grid, .footer-grid, .alloy-list-grid { grid-template-columns: 1fr; }
  .process-list div { grid-template-columns: 1fr; gap: 6px; }
  .public-hero { padding-top: calc(var(--nav-h) + var(--ticker-h) + calc(var(--sp-1) * 14.5)); }
}

/* ── Alloy family grouping + products redesign (2026-07) ── */
.fam-copper { --fam-accent: var(--fam-copper); --fam-accent-soft: var(--fam-copper-soft); }
.fam-copper-alloy { --fam-accent: var(--fam-copper-alloy); --fam-accent-soft: var(--fam-copper-alloy-soft); }
.fam-brass { --fam-accent: var(--fam-brass); --fam-accent-soft: var(--fam-brass-soft); }
.fam-phosphor { --fam-accent: var(--fam-phosphor); --fam-accent-soft: var(--fam-phosphor-soft); }
.fam-nickel { --fam-accent: var(--fam-nickel); --fam-accent-soft: var(--fam-nickel-soft); }
.fam-special { --fam-accent: var(--fam-special); --fam-accent-soft: var(--fam-special-soft); }

.public-hero.products-hero { padding-top: calc(var(--nav-h) + calc(var(--sp-1) * 20.5)); }

.alloy-family-stack { display: grid; gap: 46px; }
.alloy-family-group { display: grid; gap: 16px; }
.alloy-family-head { display: flex; align-items: center; gap: 12px; }
.alloy-family-head .fam-dot {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  background: var(--fam-accent, var(--brand-text));
}
.alloy-family-head h3 { font-size: 1.22rem; letter-spacing: -0.01em; }
.alloy-family-count { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap; }
.alloy-family-head::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.alloy-list-card { border-top: 3px solid var(--fam-accent, var(--border-strong)); }

.alloy-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: calc(var(--sp-1) * 4.5); }
.alloy-summary-tile {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: calc(var(--sp-1) * 7) calc(var(--sp-1) * 6.5) var(--sp-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-raised); color: var(--text-primary); text-decoration: none;
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform var(--dur-200ms) var(--ease-standard), box-shadow var(--dur-200ms) var(--ease-standard), border-color var(--dur-200ms) var(--ease-standard);
}
.alloy-summary-tile::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--fam-accent, var(--cu-2)), transparent 82%);
}
.alloy-summary-tile:hover { transform: translateY(-2px); border-color: var(--fam-accent, var(--cu-line-strong)); box-shadow: var(--shadow-md); }
.alloy-summary-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.alloy-summary-head strong { font-family: var(--font-display); font-size: 1.35rem; }
.alloy-summary-count { color: var(--fam-accent, var(--brand-text)); font-family: var(--font-mono); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.alloy-summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.alloy-summary-chips span {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; padding: var(--sp-1) calc(var(--sp-1) * 2.25);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--surface-page); color: var(--text-muted);
}
.alloy-summary-more { margin-top: auto; color: var(--brand-text); font-weight: 700; font-size: 0.86rem; }
.alloy-summary-tile:hover .alloy-summary-more { color: var(--brand-fill-hover); }

@media (max-width: 860px) {
  .product-detail, .product-detail:nth-child(even) { grid-template-columns: 1fr; padding: calc(var(--sp-1) * 10.5) 0; }
  .product-detail:nth-child(even) .product-detail-visual { order: 0; }
}
@media (max-width: 640px) {
  .alloy-summary-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .public-hero.products-hero { padding-top: calc(var(--nav-h) + calc(var(--sp-1) * 14.5)); }
  .alloy-family-stack { gap: 34px; }
}

/* ── Tool shell ────────────────────────────────────────────────
   Shared chrome for calculator.html, landed-cost.html and
   price-table.html. Before 2026-08-11 each page carried its own
   drifted copy of these components in an inline <style> block. */

body.tool-page { background: var(--surface-page); }

.tool-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--nav-h) + var(--ticker-h)) 0 var(--sp-8);
  background: linear-gradient(180deg, var(--dark-1) 0%, var(--dark-2) 100%);
  color: var(--color-neutral-solid-024);
}
.tool-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(600px 320px at 90% 0%, var(--cu-glow), transparent 65%);
}
/* Faint engineering grid, faded out toward the bottom edge. */
.tool-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(var(--color-neutral-alpha-022) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-neutral-alpha-022) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, var(--color-neutral-solid-001) 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, var(--color-neutral-solid-001) 0%, transparent 100%);
}
.tool-hero-inner {
  position: relative; z-index: var(--z-1);
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6);
}
.tool-kicker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  color: var(--cu-1); font-size: var(--size-px-10); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.tool-kicker::before {
  content: ""; width: 22px; height: 1.5px;
  background: linear-gradient(90deg, currentColor, transparent);
}
.tool-hero h1 {
  font-family: var(--font-display); font-size: var(--size-px-24); font-weight: 600;
  line-height: var(--leading-tight); letter-spacing: -0.025em;
  margin-bottom: var(--sp-3); color: var(--color-neutral-solid-024);
}
.tool-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--cu-1), var(--cu-0));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tool-hero p { color: var(--color-neutral-alpha-047); max-width: 640px; }
.tool-meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.tool-meta span {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--color-neutral-alpha-024); border: 1px solid var(--color-neutral-alpha-029);
  border-radius: var(--radius-pill); padding: calc(var(--sp-1) * 1.75) var(--sp-4);
  font-size: var(--size-px-12); color: var(--color-neutral-alpha-051); white-space: nowrap;
}
.tool-meta strong { color: var(--color-neutral-solid-024); font-weight: 600; }
.tool-meta span .accent { color: var(--cu-1); }

.tool-main { max-width: var(--max-w); margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-8); }
.tool-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-5); margin-bottom: var(--sp-5); align-items: start;
}

.tool-card {
  position: relative; overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-slow) var(--ease-standard), border-color var(--dur-slow) var(--ease-standard);
}
.tool-card:hover { box-shadow: var(--shadow-md); border-color: var(--cu-line); }
.tool-card-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: var(--size-px-18); font-weight: 600;
  color: var(--text-primary); margin-bottom: var(--sp-5); letter-spacing: -0.01em;
}
.tool-card-title .badge-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand-text);
  box-shadow: 0 0 0 3px var(--cu-tint-3);
}

.tool-form-group { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.tool-form-group label { font-size: var(--size-px-12); color: var(--text-primary); font-weight: 500; }
.tool-form-group label span { color: var(--brand-text); font-weight: 500; }

/* Form controls are matched on the element, scoped to the tool pages, so
   the marketing quote form and auth card keep their own treatment. */
.tool-page select,
.tool-page input[type="number"],
.tool-page input[type="text"] {
  width: 100%; padding: var(--sp-3);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--text-primary);
  font-size: var(--size-px-14); font-family: var(--font-sans);
  outline: none; transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.tool-page select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238492a6' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: calc(var(--sp-1) * 9);
}
.tool-page select:focus, .tool-page input:focus {
  border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--cu-tint-3);
}
.tool-page input::placeholder { color: var(--text-faint); }

.tool-btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.tool-btn-row .btn-primary { flex: 1; }

/* Result card stays on a LIGHT ground on purpose. The figures inside
   carry +/- semantics in --green and --red, and --green (var(--color-success-solid-002)) only
   reaches 4.27:1 on --dark-1 — below AA. Light ground keeps the money
   legible, and the copper left rule supplies the emphasis instead. */
.tool-result {
  grid-column: 1 / -1;
  position: relative; overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--sp-6);
  box-shadow: var(--shadow-md);
  animation: toolSlideUp var(--dur-500ms) var(--ease-standard);
}
.tool-result::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--cu-1), var(--cu-3));
}
@keyframes toolSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.tool-result-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}
.tool-result-header h2 { font-family: var(--font-display); font-size: var(--size-px-20); }

/* Headline figure block, right-aligned in the result header. */
.tool-total { text-align: right; }
.tool-total .amount {
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 600;
  color: var(--state-success-text); font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em; line-height: var(--leading-tight);
}
.tool-total .perkg { font-size: var(--size-px-12); color: var(--text-muted); margin-top: calc(var(--sp-1) * 0.5); }
.tool-total .perkg strong { color: var(--text-primary); font-family: var(--font-mono); }

.tool-breakdown-title {
  font-size: var(--size-px-10); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-faint);
  margin-bottom: var(--sp-3); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.tool-breakdown {
  width: 100%; border-collapse: collapse;
  font-size: var(--size-px-12); font-variant-numeric: tabular-nums;
}
.tool-breakdown th {
  text-align: left; padding: var(--sp-2) var(--sp-3); color: var(--text-faint);
  font-size: var(--size-px-10); text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 600; border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-page);
}
.tool-breakdown td {
  padding: var(--sp-3); border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
}
.tool-breakdown th.right, .tool-breakdown td.right { text-align: right; }
.tool-breakdown tr:last-child td { border-bottom: none; }
.tool-breakdown tr:hover td { background: var(--cu-tint-1); }
.tool-breakdown .num {
  font-family: var(--font-mono); font-weight: 500; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.tool-breakdown .pos { color: var(--state-success-text); }
.tool-breakdown .neg { color: var(--state-danger-text); }
.tool-breakdown .sublabel {
  display: block; margin-top: calc(var(--sp-1) * 0.75); font-style: normal;
  font-size: var(--size-px-10); color: var(--text-faint);
}
.tool-breakdown .reference-row td,
.tool-breakdown .reference-row:hover td {
  background: var(--surface-page); color: var(--text-faint); font-style: italic;
}
.tool-breakdown .reference-row .num { color: var(--text-muted); font-weight: 500; }
/* Row modifiers. These class names are set from JS (`row(..., 'subtotal')`
   and `row(..., 'grand-total')` in calculator.html) — do not rename them
   without changing the JS in the same edit. */
.tool-breakdown .subtotal td,
.tool-breakdown .subtotal:hover td {
  background: var(--cu-tint-1); font-weight: 600; color: var(--text-primary);
}
.tool-breakdown .grand-total td,
.tool-breakdown .grand-total:hover td {
  background: var(--state-success-fill); font-weight: 700; color: var(--state-success-text);
  font-size: var(--size-px-14); border-top: 2px solid var(--color-success-alpha-003);
}

.tool-breakdown .source-col {
  white-space: nowrap;
  width: 140px;
}
.tool-breakdown .source-tag {
  display: inline-block;
  padding: calc(var(--sp-1) * 0.75) var(--sp-2);
  font-size: var(--size-px-11);
  font-weight: 600;
  border-radius: 4px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tool-breakdown .source-producer { background: var(--color-amber-alpha-005); color: var(--cu-deep, var(--color-copper-solid-007)); border: 1px solid var(--color-amber-alpha-006); }
.tool-breakdown .source-market { background: var(--color-blue-alpha-024); color: var(--color-blue-solid-017); border: 1px solid var(--color-blue-alpha-025); }
.tool-breakdown .source-newcompany { background: var(--color-teal-alpha-003); color: var(--color-teal-solid-004); border: 1px solid var(--color-teal-alpha-004); }
.tool-breakdown .source-logistics { background: var(--color-violet-alpha-001); color: var(--color-violet-solid-001); border: 1px solid var(--color-violet-alpha-002); }
.tool-breakdown .source-bank { background: var(--color-amber-alpha-008); color: var(--color-copper-solid-015); border: 1px solid var(--color-amber-alpha-009); }
.tool-breakdown .source-tax { background: var(--color-blue-alpha-022); color: var(--color-blue-solid-010); border: 1px solid var(--color-blue-alpha-023); }
.tool-breakdown .source-subtotal { background: var(--color-neutral-alpha-003); color: var(--text-muted); border: 1px solid var(--color-neutral-alpha-006); }

.tool-table-wrap {
  overflow-x: auto; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tool-table-wrap table {
  width: 100%; border-collapse: collapse;
  font-size: var(--size-px-12); font-variant-numeric: tabular-nums;
}
.tool-table-wrap th, .tool-table-wrap td {
  padding: var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.tool-table-wrap thead th {
  background: var(--dark-2); color: var(--color-neutral-solid-024);
  font-size: var(--size-px-10); letter-spacing: 0.06em; text-transform: uppercase;
}
/* No vertical sticky header here. `overflow-x: auto` makes overflow-y
   compute to `auto`, so the wrap becomes the scroll container for both
   axes — but it has no height constraint, so a `position: sticky` thead
   would never actually stick. Horizontal pinning of the first column
   is the part that pays off on narrow screens. */
.tool-table-wrap tbody tr:hover { background: var(--cu-tint-1); }

@media (max-width: 860px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-result { order: -1; }
  .tool-hero-inner { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════
   UNIFIED CALCULATOR SPECIFICATION, ALLOY SEARCH & TEMPER STATS
   ════════════════════════════════════════════════════════════════ */

.tool-grid-unified {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 960px;
  margin: 0 auto;
}

.spec-card {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.label-hint {
  font-size: var(--size-px-10);
  font-weight: normal;
  color: var(--text-muted);
  margin-left: var(--sp-1);
}

/* ─── Searchable Alloy Combobox ─── */
.alloy-combobox {
  position: relative;
  width: 100%;
}

.alloy-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: calc(var(--sp-1) * 2.5) calc(var(--sp-1) * 3.5);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 52px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
  user-select: none;
}

.alloy-display:hover,
.alloy-display:focus {
  border-color: var(--cu-line-strong);
  box-shadow: 0 0 0 3px var(--cu-tint-2);
  outline: none;
}

.alloy-display-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.alloy-display-code {
  font-family: var(--font-display);
  font-size: var(--size-px-14);
  font-weight: 700;
  color: var(--text-primary);
}

.alloy-display-sub {
  font-size: var(--size-px-10);
  color: var(--text-muted);
  font-family: var(--font-mono, var(--font-sans));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alloy-family-pill {
  padding: calc(var(--sp-1) * 0.75) calc(var(--sp-1) * 2.25);
  font-size: var(--size-px-11);
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
  background: var(--cu-tint-2);
  color: var(--cu-deep, var(--brand-text));
  border: 1px solid var(--cu-line);
  white-space: nowrap;
}

.alloy-arrow-icon {
  color: var(--text-muted);
  font-size: var(--size-px-14);
  transition: transform var(--dur-200ms) var(--ease-ease);
}

.alloy-combobox.is-open .alloy-arrow-icon {
  transform: rotate(180deg);
}

.alloy-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-100);
  background: var(--surface-raised, var(--color-neutral-solid-025));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg, 0 12px 28px var(--color-neutral-alpha-008));
  overflow: hidden;
  animation: fadeIn var(--dur-fast) var(--ease-ease-out);
}

.alloy-search-box {
  display: flex;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  gap: 8px;
}

.alloy-search-box input {
  flex: 1;
  border: none;
  background: transparent;
  padding: calc(var(--sp-1) * 1.5) var(--sp-1);
  font-size: var(--size-px-12);
  color: var(--text-primary);
  outline: none;
}

.alloy-search-count {
  font-size: var(--size-px-10);
  color: var(--text-muted);
  white-space: nowrap;
}

.alloy-options-list {
  max-height: 280px;
  overflow-y: auto;
  padding: var(--sp-1) 0;
}

.alloy-option-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) calc(var(--sp-1) * 3.5);
  cursor: pointer;
  gap: 10px;
  border-bottom: 1px solid var(--color-neutral-alpha-001);
  transition: background var(--dur-120ms) var(--ease-ease);
}

.alloy-option-item:hover,
.alloy-option-item.is-focused {
  background: var(--cu-tint-1);
}

.alloy-option-item.is-selected {
  background: var(--cu-tint-2);
}

.alloy-option-item .opt-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.alloy-option-item .opt-code {
  font-weight: 600;
  font-size: var(--size-px-12);
  color: var(--text-primary);
}

.alloy-option-item .opt-sub {
  font-size: var(--size-px-11);
  color: var(--text-muted);
  font-family: var(--font-mono, var(--font-sans));
}

.alloy-no-results {
  padding: calc(var(--sp-1) * 4.5) calc(var(--sp-1) * 3.5);
  text-align: center;
  font-size: var(--size-px-12);
  color: var(--text-muted);
}

/* ─── Live Temper & Mechanical Properties Card ─── */
.temper-props-card {
  background: linear-gradient(145deg, var(--surface-page), var(--surface-raised));
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-text);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-4);
  box-shadow: var(--shadow-sm);
  transition: all var(--dur-slow) var(--ease-ease);
}

.temper-props-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: var(--sp-2);
  margin-bottom: calc(var(--sp-1) * 2.5);
  border-bottom: 1px solid var(--border-subtle);
}

.temper-props-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--size-px-12);
  color: var(--text-primary);
}

.tp-alloy-tag {
  font-size: var(--size-px-11);
  color: var(--text-muted);
  background: var(--color-neutral-alpha-002);
  padding: calc(var(--sp-1) * 0.5) calc(var(--sp-1) * 1.5);
  border-radius: 3px;
}

.tp-use-tag {
  font-size: var(--size-px-10);
  color: var(--brand-text);
  font-weight: 500;
}

.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-1);
}

.field-label-row label {
  margin-bottom: 0 !important;
}

.dim-tol-note {
  font-size: var(--size-px-11);
  color: var(--text-muted);
  margin-top: var(--sp-1);
  margin-bottom: calc(var(--sp-1) * 0.5);
  line-height: var(--leading-snug);
}

.dim-tol-note strong {
  color: var(--text-primary);
  font-family: var(--font-mono, var(--font-sans));
}

.temper-props-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tp-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: calc(var(--sp-1) * 1.5) var(--sp-2);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
}

.tp-stat-label {
  font-size: var(--size-px-10);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tp-stat-val {
  font-family: var(--font-mono, var(--font-sans));
  font-size: var(--size-px-12);
  font-weight: 700;
  color: var(--text-primary);
}

.tp-stat-sub {
  font-size: var(--size-px-10);
  color: var(--text-muted);
  font-family: var(--font-mono, var(--font-sans));
}

@media (max-width: 900px) {
  .temper-props-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  .temper-props-grid { grid-template-columns: repeat(2, 1fr); }
  .temper-props-header { flex-direction: column; align-items: flex-start; }
}

/* ─── Options & Secondary Processing Accordion ─── */
.tool-options-accordion {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color var(--dur-200ms) var(--ease-ease);
}

.tool-options-accordion:hover {
  border-color: var(--cu-line);
}

.tool-options-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  cursor: pointer;
  user-select: none;
  font-size: var(--size-px-12);
  background: var(--surface-page);
}

.tool-options-summary:hover {
  background: var(--cu-tint-1);
}

.tool-options-summary::-webkit-details-marker {
  display: none;
}

.summary-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.summary-sub {
  font-size: var(--size-px-10);
  color: var(--text-muted);
  font-weight: normal;
}

.summary-arrow {
  color: var(--text-muted);
  font-size: var(--size-px-14);
  transition: transform var(--dur-200ms) var(--ease-ease);
}

.tool-options-accordion[open] .summary-arrow {
  transform: rotate(180deg);
}

.tool-options-body {
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--border-subtle);
}

/* ── Customer workspace ──────────────────────────────────────────────
   Two pages share this block: the list at /customer, and the quote
   document at /quote/<reference>. Light panels on --bg-subtle. The status
   chips carry --green and --red, which only clear AA on a light ground
   (see the note on .tool-result). */
.job-shell { max-width: var(--max-w); margin: 0 auto; padding: calc(var(--nav-h) + var(--sp-7)) calc(var(--sp-1) * 7) var(--sp-9); }
.job-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.job-overline { font-size: var(--size-px-10); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-text); font-weight: 700; margin: 0; }
.job-head h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: var(--sp-1) 0 0; }
.job-account { color: var(--text-muted); font-size: var(--size-px-12); margin: var(--sp-1) 0 0; }
.job-panel { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
/* Sits at the foot of the workspace, below the record. `scroll-margin-top`
   clears the fixed nav so the Settings link's #account-settings jump does not
   land the heading underneath it. */
.account-settings { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-5); padding: var(--sp-5); margin-top: var(--sp-6); scroll-margin-top: calc(var(--nav-h) + var(--sp-4)); }
.account-settings-copy h2 { margin: var(--sp-1) 0 var(--sp-2); font-family: var(--font-display); font-size: var(--size-px-20); }
.account-settings-copy p:last-child { margin: 0; color: var(--text-muted); font-size: var(--size-px-12); line-height: var(--leading-ratio-1_55); }
.account-details { display: grid; gap: var(--sp-3); margin: 0; align-content: start; }
.account-details div { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border-subtle); }
.account-details dt { color: var(--text-faint); font-size: var(--size-px-10); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.account-details dd { margin: var(--sp-1) 0 0; color: var(--text-primary); font-size: var(--size-px-12); font-weight: 600; overflow-wrap: anywhere; }
.account-password-form { display: grid; grid-column: 1 / -1; gap: var(--sp-2); max-width: 520px; padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); }
.account-password-form h3 { margin: 0 0 var(--sp-1); font-family: var(--font-display); font-size: var(--size-px-18); }
.account-password-form label { color: var(--text-muted); font-size: var(--size-px-12); font-weight: 600; }
.account-password-form input { width: 100%; min-height: 44px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: calc(var(--sp-1) * 2.5) var(--sp-3); color: var(--text-primary); background: var(--surface-raised); font: inherit; }
.account-password-form input:focus-visible { outline: none; border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--cu-tint-1); }
.account-password-form button { justify-self: start; margin-top: var(--sp-2); }
.account-password-form button[disabled] { opacity: 0.72; cursor: progress; }
.account-settings-status { margin: var(--sp-1) 0 0; font-size: var(--size-px-12); line-height: var(--leading-ratio-1_5); }
.account-settings-status[hidden] { display: none; }
.account-settings-status.is-error { color: var(--state-danger-text); }
.account-settings-status.is-success { color: var(--state-success-text); }
.account-settings-status.is-pending { color: var(--text-muted); }

.job-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.job-kpi { padding: var(--sp-4); }
.job-kpi-value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; font-variant-numeric: tabular-nums; }
.job-kpi-value.cu { color: var(--brand-text); }
.job-kpi-label { font-size: var(--size-px-10); letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; margin: var(--sp-2) 0 0; }
.job-kpi-note { font-size: var(--size-px-10); color: var(--text-muted); margin: var(--sp-2) 0 0; }

.job-controls { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); flex-wrap: wrap; }
.job-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.job-chip { border: 1px solid var(--border-subtle); background: var(--surface-raised); color: var(--text-muted); border-radius: var(--radius-pill); padding: calc(var(--sp-1) * 1.75) calc(var(--sp-1) * 3.5); font: inherit; font-size: var(--size-px-10); font-weight: 700; cursor: pointer; }
.job-chip:hover { border-color: var(--cu-line-strong); color: var(--brand-text); }
.job-chip.is-active { background: var(--cu-tint-2); border-color: var(--cu-line-strong); color: var(--brand-text); }
.job-search { margin-left: auto; }
.job-search input { min-width: 240px; min-height: 40px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-2) calc(var(--sp-1) * 3.5); font: inherit; font-size: var(--size-px-12); color: var(--text-primary); background: var(--surface-raised); }
.job-search input:focus-visible { outline: none; border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--cu-tint-1); }

.job-list-panel { overflow: hidden; }
.job-thead, .job-row { display: grid; grid-template-columns: 0.85fr 1.6fr 0.9fr 0.85fr; gap: var(--sp-3); align-items: center; }
.job-thead { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-subtle); font-size: var(--size-px-10); letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
/* A row is a link to the quote document, not a selector. The inset bar on
   hover is the affordance the old selected-row state used to carry. */
.job-row { border-bottom: 1px solid var(--surface-sunken); padding: var(--sp-4); font-size: var(--size-px-12); color: var(--text-primary); text-decoration: none; box-shadow: inset 2px 0 0 transparent; transition: background var(--ease-standard), box-shadow var(--ease-standard); }
.job-row:last-child { border-bottom: 0; }
.job-row:hover { background: var(--surface-page); box-shadow: inset 2px 0 0 var(--cu-3); }
.job-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.job-ref, .job-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.job-ref { color: var(--brand-text); }
.job-material { color: var(--text-muted); }

.job-more { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4); border-top: 1px solid var(--surface-sunken); font-size: var(--size-px-10); color: var(--text-faint); }
.job-more .btn { padding: var(--sp-2) var(--sp-4); font-size: var(--size-px-12); }

.job-stage { justify-self: start; font-size: var(--size-px-10); letter-spacing: 0.07em; text-transform: uppercase; font-weight: 700; padding: calc(var(--sp-1) * 0.75) calc(var(--sp-1) * 2.5); border-radius: var(--radius-pill); white-space: nowrap; }
.job-stage.tone-quoted { background: var(--cu-tint-2); color: var(--brand-text); border: 1px solid var(--cu-line); }
.job-stage.tone-due { background: var(--state-danger-fill); color: var(--state-danger-text); border: 1px solid var(--color-danger-alpha-005); }
.job-stage.tone-ok { background: var(--state-success-fill); color: var(--state-success-text); border: 1px solid var(--color-success-alpha-004); }
.job-stage.tone-done { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border-subtle); }
/* A price still under its sixty-minute hold. It is the only chip that
   moves, so it is the only one that earns the strong copper edge. */
.job-stage.tone-live { display: inline-flex; align-items: baseline; gap: var(--sp-2); background: var(--cu-tint-2); color: var(--brand-text); border: 1px solid var(--cu-line-strong); }
.job-countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0; text-transform: none; }

.job-detail-label { font-size: var(--size-px-10); letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); }
.job-dl { display: flex; justify-content: space-between; gap: var(--sp-4); margin: 0; padding: calc(var(--sp-1) * 0.75) 0; font-size: var(--size-px-12); }
.job-dl dt { color: var(--text-muted); margin: 0; }
.job-dl dd { color: var(--text-primary); font-weight: 600; margin: 0; text-align: right; }
.job-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); font-size: var(--size-px-10); letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; }
.job-total strong { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.02em; color: var(--brand-text); text-transform: none; }

/* The order ladder reads down, not across. It carries nine rungs from
   the order-stages table and the sentence belonging to the rung the order is
   actually on, and neither fits in a horizontal strip inside a column. */
.job-ladder { list-style: none; margin: 0; padding: 0; }
.job-ladder li { position: relative; display: grid; grid-template-columns: 10px 1fr; column-gap: var(--sp-3); padding-bottom: var(--sp-4); }
.job-ladder li:last-child { padding-bottom: 0; }
.job-ladder li::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 0; width: 2px; background: var(--surface-sunken); }
.job-ladder li.is-done::before { background: var(--cu-1); }
.job-ladder li:last-child::before { display: none; }
.job-ladder-dot { grid-column: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); margin-top: var(--sp-1); }
.job-ladder li.is-done .job-ladder-dot { background: var(--cu-3); }
.job-ladder li.is-current .job-ladder-dot { background: var(--surface-raised); border: 2px solid var(--cu-3); box-shadow: 0 0 0 4px var(--cu-tint-2); }
.job-ladder-label { grid-column: 2; font-size: var(--size-px-12); color: var(--text-faint); font-weight: 700; }
.job-ladder li.is-done .job-ladder-label { color: var(--text-muted); }
.job-ladder li.is-current .job-ladder-label { color: var(--brand-text); }
.job-ladder-note { grid-column: 2; display: block; margin-top: var(--sp-1); font-size: var(--size-px-12); font-weight: 400; line-height: var(--leading-ratio-1_55); color: var(--text-muted); max-width: 54ch; }
.job-cancelled { font-size: var(--size-px-12); line-height: var(--leading-normal); color: var(--text-muted); margin: 0; }

.job-events { list-style: none; margin: 0; padding: 0; }
.job-events li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dotted var(--border-subtle); font-size: var(--size-px-12); color: var(--text-muted); }
.job-events li:last-child { border-bottom: 0; }
.job-events time { color: var(--text-faint); white-space: nowrap; }

.job-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.job-actions .btn { padding: calc(var(--sp-1) * 2.5) var(--sp-4); font-size: var(--size-px-12); }
.order-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.order-form fieldset { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
.order-form fieldset[hidden] { display: none; }
.order-form legend { margin-bottom: var(--sp-1); font-size: var(--size-px-12); font-weight: 600; color: var(--text-primary); }
.order-form label { display: grid; gap: var(--sp-1); font-size: var(--size-px-12); color: var(--text-muted); }
.order-form input[type="text"] { padding: var(--sp-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-page); color: var(--text-primary); font: inherit; }
.order-form .order-same { display: flex; align-items: center; gap: var(--sp-2); }
.order-form .job-actions { margin-top: var(--sp-2); }
.job-action-error { flex-basis: 100%; margin: var(--sp-2) 0 0; font-size: var(--size-px-12); color: var(--state-danger-text); }
.job-empty { padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-muted); font-size: var(--size-px-12); }
.job-empty-title { font-family: var(--font-display); color: var(--text-primary); margin: 0 0 var(--sp-4); }
.job-empty p { margin: 0 0 var(--sp-4); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.job-skeleton { display: block; height: 12px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-sunken), var(--surface-page), var(--surface-sunken)); background-size: 200% 100%; animation: jobShimmer var(--dur-1400ms) var(--ease-linear) infinite; }
.job-skeleton-value { height: 22px; width: 60%; }
.job-skeleton-label { width: 45%; margin-top: var(--sp-3); }
.job-row-skeleton { padding: var(--sp-4); border-bottom: 1px solid var(--surface-sunken); }
@keyframes jobShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .job-skeleton { animation: none; } }

/* ── The quote document ──────────────────────────────────────────────
   One quote at /quote/<reference>. There is no form here and nothing on
   the page can be edited: a quote is immutable once issued (TRC-003), so
   the page reads as a document and the only way to change anything is to
   price it again under a new reference. */
.quote-doc-back { display: inline-block; margin-bottom: var(--sp-4); font-size: var(--size-px-12); font-weight: 600; color: var(--text-muted); text-decoration: none; }
.quote-doc-back:hover { color: var(--brand-text); }
.quote-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.quote-doc-ref { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-mono); font-size: clamp(1.3rem, 2.4vw, 1.8rem); letter-spacing: -0.01em; margin: var(--sp-1) 0 0; }
.quote-doc-copy { border: 1px solid var(--border-subtle); background: var(--surface-raised); color: var(--text-muted); border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3); font: inherit; font-size: var(--size-px-10); font-weight: 700; cursor: pointer; }
.quote-doc-copy:hover { border-color: var(--cu-line-strong); color: var(--brand-text); }

/* The hold band. It is the first thing on the page because it is the one
   fact that decides what the customer can do with everything below it. */
.quote-hold { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-lg); margin-bottom: var(--sp-5); }
.quote-hold.is-live { background: var(--cu-tint-1); border: 1px solid var(--cu-line-strong); }
.quote-hold.is-expired { background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.quote-hold.is-superseded { background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.quote-hold.is-ordered { background: var(--state-success-fill); border: 1px solid var(--color-success-alpha-004); }
.quote-hold.is-ordered .quote-hold-title { color: var(--state-success-text); }
.quote-hold.is-superseded .quote-hold-title { color: var(--text-muted); }
.quote-hold-title { font-family: var(--font-display); font-size: var(--size-px-18); font-weight: 600; margin: 0; color: var(--text-primary); }
.quote-hold.is-live .quote-hold-title { color: var(--brand-text); }
.quote-hold-note { font-size: var(--size-px-12); color: var(--text-muted); margin: var(--sp-2) 0 0; max-width: 62ch; }
.quote-hold-bar { height: 4px; border-radius: var(--radius-pill); background: var(--cu-tint-2); overflow: hidden; }
.quote-hold-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--cu-3), var(--cu-2)); }

.quote-doc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--sp-4); align-items: start; }
.quote-doc-main { display: grid; gap: var(--sp-4); }
.quote-doc-block { padding: var(--sp-5); }
.quote-doc-block .job-detail-label:first-child { margin-top: 0; }
.quote-doc-price { padding: var(--sp-5); position: sticky; top: calc(var(--nav-h) + var(--sp-4)); }
.quote-doc-perkg { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 var(--sp-4); font-variant-numeric: tabular-nums; }
.quote-doc-perkg span { display: block; font-family: var(--font-sans); font-size: var(--size-px-10); letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; margin-top: var(--sp-1); }
.quote-doc-immutable { font-size: var(--size-px-10); line-height: var(--leading-normal); color: var(--text-muted); margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--border-subtle); }
.quote-doc-lineage { color: var(--text-muted); font-size: var(--size-px-10); margin: var(--sp-2) 0 0; }
.quote-doc-lineage a, .quote-hold-note a { color: var(--brand-text); font-weight: 700; }

@media (max-width: 1080px) {
  .quote-doc-grid { grid-template-columns: 1.3fr 1fr; }
  .quote-doc-block, .quote-doc-price { padding: var(--sp-4); }
}
@media (max-width: 860px) {
  .job-shell { padding: calc(var(--nav-h) + var(--sp-5)) calc(var(--sp-1) * 5) var(--sp-8); }
  .job-head { flex-direction: column; align-items: flex-start; }
  .account-settings { grid-template-columns: 1fr; }
  .account-password-form { grid-column: auto; }
  .job-search { margin-left: 0; width: 100%; }
  .job-search input { width: 100%; min-width: 0; }
  .quote-doc-grid { grid-template-columns: 1fr; }
  /* The price card leads on a narrow screen: the figure and its one
     action matter more than the specification the customer already
     chose. */
  .quote-doc-price { position: static; order: -1; }
  .quote-doc-head { flex-direction: column; }
}
@media (max-width: 640px) {
  .job-thead { display: none; }
  .job-row { grid-template-columns: 1fr auto; grid-template-areas: "ref stage" "material value"; row-gap: var(--sp-2); }
  .job-ref { grid-area: ref; }
  .job-stage { grid-area: stage; justify-self: end; }
  .job-material { grid-area: material; }
  .job-value { grid-area: value; justify-self: end; }
}
@media (max-width: 420px) {
  .job-kpis { grid-template-columns: 1fr; }
  .job-kpi-value { font-size: 1.3rem; }
  .job-dl { flex-direction: column; gap: 0; }
  .job-dl dd { text-align: left; }
  .job-actions .btn { width: 100%; }
  .quote-doc-perkg { font-size: 1.6rem; }
}

/* ── Customer dashboard sections ───────────────────────────────────────
   The workspace answers three questions in the order they arrive: what is
   happening to my orders, what did I order before, and the full record.
   These are the two new sections; the list below them is unchanged.

   Everything here reuses the tokens and the .job-panel surface, so the
   dashboard reads as the same product as the list it sits above. */

.dash-section { margin-top: var(--sp-6); }
.dash-section[hidden] { display: none; }
.dash-section-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.dash-section-head h2 { font-family: var(--font-display); font-size: var(--size-px-20); font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); margin: 0; }
.dash-count { font: 700 var(--size-xs)/1 var(--font-mono); color: var(--brand-text); background: var(--cu-tint-2); border: 1px solid var(--cu-line-strong); border-radius: var(--radius-pill); padding: var(--sp-1) calc(var(--sp-1) * 2.25); }
.dash-count:empty { display: none; }
.dash-section-note { font-size: var(--size-px-10); color: var(--text-muted); margin-left: auto; }
.dash-records-head { margin-top: var(--sp-7); }

/* Orders in flight. One column: an order is a thing to read, not to scan
   across, and the progress ladder needs the width. */
.dash-orders { display: grid; gap: var(--sp-3); }
.dash-order { padding: var(--sp-4) var(--sp-5); }
.dash-order.is-due { border-color: var(--color-danger-alpha-007); }
.dash-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.dash-order-ref { font: 700 var(--size-sm)/1.3 var(--font-mono); color: var(--text-primary); margin: 0; }
.dash-order-spec { font-size: var(--size-px-12); color: var(--text-muted); margin: var(--sp-1) 0 0; }
.dash-order-figure { text-align: right; flex-shrink: 0; }
.dash-order-value { font-family: var(--font-display); font-size: var(--size-px-20); font-weight: 700; color: var(--text-primary); margin: 0; font-variant-numeric: tabular-nums; }
.dash-order-vat { font-size: var(--size-px-10); color: var(--text-faint); margin: calc(var(--sp-1) * 0.5) 0 0; }

/* The ladder. Rungs and wording come from the order-stages table, so this is
   laid out for "however many the table has" rather than for nine. */
.dash-ladder { display: flex; list-style: none; margin: var(--sp-3) 0 0; padding: 0; gap: 0; overflow-x: auto; }
.dash-rung { flex: 1 1 0; min-width: 68px; position: relative; padding-top: var(--sp-4); text-align: center; }
.dash-rung::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--surface-sunken); }
.dash-rung:first-child::before { left: 50%; }
.dash-rung:last-child::before { right: 50%; }
.dash-rung.is-done::before { background: var(--cu-line-strong); }
/* The current rung is where progress stops, so its segment stops at its own
   dot rather than running on to the next one. */
.dash-rung.is-current::before { background: var(--cu-line-strong); right: 50%; }
.dash-rung-dot { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--surface-raised); border: 2px solid var(--surface-sunken); }
.dash-rung.is-done .dash-rung-dot { background: var(--cu-line-strong); border-color: var(--cu-line-strong); }
.dash-rung.is-current .dash-rung-dot { background: var(--brand-text); border-color: var(--brand-text); box-shadow: 0 0 0 4px var(--cu-tint-1); }
.dash-rung-label { display: block; font-size: var(--size-px-10); line-height: var(--leading-ratio-1_3); color: var(--text-faint); padding: 0 var(--sp-1); }
.dash-rung.is-current .dash-rung-label { color: var(--brand-text); font-weight: 700; }
.dash-rung.is-done .dash-rung-label { color: var(--text-muted); }

/* The stage and the action share a row: what is happening and what you can
   do about it are one thought, and it saves a card's worth of height on an
   account with several orders running. */
.dash-order-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-3); flex-wrap: wrap; }
.dash-order-stage { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin: 0; flex: 1 1 300px; }
.dash-order-note { font-size: var(--size-px-12); color: var(--text-muted); flex: 1 1 240px; }
.dash-order-foot .btn { flex-shrink: 0; }

/* Repeat orders. A grid because these are scanned and compared. */
.dash-repeats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.dash-repeat { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); }
.dash-repeat-spec { font-weight: 700; font-size: var(--size-px-12); color: var(--text-primary); margin: 0; }
.dash-repeat-size { font: var(--size-xs)/1.4 var(--font-mono); color: var(--text-muted); margin: 0; }
.dash-repeat-when { font-size: var(--size-px-10); color: var(--text-faint); margin: 0 0 var(--sp-3); }
.dash-repeat .btn { margin-top: auto; }

.dash-empty { padding: var(--sp-5); color: var(--text-muted); font-size: var(--size-px-12); }
.dash-empty p { margin: 0; }

@media (max-width: 720px) {
  .dash-order-head { flex-direction: column; gap: var(--sp-2); }
  .dash-order-figure { text-align: left; }
  .dash-rung-label { font-size: var(--size-px-9); }
  .dash-rung { min-width: 58px; }
}

/* Cookie consent. The panel is deliberately dependency-free and uses the
   existing surface, border and type tokens so legal controls do not become a
   second visual system. */
.consent-banner { position: fixed; z-index: var(--z-1000); right: var(--sp-4); bottom: var(--sp-4); left: var(--sp-4); padding: var(--sp-4); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.consent-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); max-width: 1180px; margin: 0 auto; }
.consent-copy { margin: 0; color: var(--text-primary); font-size: var(--size-sm); line-height: var(--leading-ratio-1_5); }
.consent-copy strong { display: block; margin-bottom: calc(var(--sp-1) * 0.5); font-family: var(--font-display); }
.consent-actions { display: flex; align-items: center; flex-shrink: 0; flex-wrap: nowrap; justify-content: flex-end; gap: var(--sp-2); }
.consent-actions .btn { white-space: nowrap; }
.consent-banner .btn-outline, .consent-panel .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
.consent-banner .btn-outline:hover, .consent-panel .btn-outline:hover { border-color: var(--brand-text); color: var(--brand-text); background: var(--cu-tint-1); }
.consent-dialog { position: fixed; z-index: var(--z-1001); inset: 0; display: grid; place-items: center; padding: var(--sp-4); background: var(--color-teal-alpha-001); }
.consent-dialog[hidden], .consent-banner[hidden] { display: none; }
.consent-panel { width: min(100%, 560px); max-height: min(90vh, 720px); overflow: auto; padding: var(--sp-5); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.consent-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.consent-panel h2 { margin: 0; font-family: var(--font-display); color: var(--text-primary); }
.consent-close { border: 0; background: transparent; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; }
.consent-category { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-subtle); }
.consent-category strong { display: block; color: var(--text-primary); }
.consent-category p { margin: calc(var(--sp-1) * 0.75) 0 0; color: var(--text-muted); font-size: var(--size-px-12); }
.consent-always { color: var(--brand-text); font: 600 var(--size-xs) var(--font-mono); white-space: nowrap; }
.consent-footer-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.consent-settings-link { display: inline-block; margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--size-px-10); }
@media (max-width: 720px) {
  .consent-banner-inner { align-items: stretch; flex-direction: column; }
  .consent-actions { justify-content: stretch; flex-wrap: wrap; }
  .consent-actions .btn { flex: 1 1 100%; }
}