@layer settings, generic, elements, objects, components, utilities;

@layer settings {
/* 01-settings.css
   Design tokens: color, type, space, radius, shadow, motion, breakpoints.
   No component rules live here. Everything else references these values. */

/* Self-hosted font faces (OFL). Sans is a variable font (wght 100-700);
   Mono and Sans Italic are static 400; Serif is served as Latin subsets. */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-wght.b2c9031d9fd6.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-italic-wght.ac3e6cdbce96.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono.79936b18df9f.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-Regular-Latin1.17c42b54019e.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6,
    U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212,
    U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-Regular-Latin2.7fcf091f96a3.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F,
    U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237,
    U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA,
    U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-Medium-Latin1.49e75b048bd4.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6,
    U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212,
    U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-Medium-Latin2.aa0c8ea40e22.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F,
    U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237,
    U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA,
    U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-SemiBold-Latin1.2d6ee94fac66.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6,
    U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212,
    U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-SemiBold-Latin2.ab6f6a72d340.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F,
    U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237,
    U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA,
    U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-Italic-Latin1.5004b9f221f8.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6,
    U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212,
    U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-Italic-Latin2.4c58620fcca7.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F,
    U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237,
    U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA,
    U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-SemiBoldItalic-Latin1.77d2abf11dbf.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6,
    U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022,
    U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212,
    U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexSerif-SemiBoldItalic-Latin2.326e80dd060b.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0130, U+0132-0151, U+0154-017F, U+018F,
    U+0192, U+01A0-01A1, U+01AF-01B0, U+01FA-01FF, U+0218-021B, U+0237,
    U+0259, U+1E80-1E85, U+1E9E, U+20A1, U+20A4, U+20A6, U+20A8-20AA,
    U+20AD-20AE, U+20B1-20B2, U+20B4-20B5, U+20B8-20BA, U+20BD, U+20BF;
}

:root {
  color-scheme: light;

  /* Color: newsprint neutrals */
  --paper: #f7f8f6;
  --surface: #ffffff;
  --ink: #13211c;
  --muted: #607069;
  --hairline: #d8dfdb;

  /* Color: brand (deep industrial green) 50-900 ramp */
  --brand-50: #edf5f1;
  --brand-100: #d6e8de;
  --brand-200: #aad3bf;
  --brand-300: #79b89b;
  --brand-400: #4b9a77;
  --brand-500: #2f8260;
  --brand-600: #1d6b4d;
  --brand-700: #145c43;
  --brand-800: #0f4a36;
  --brand-900: #0a3829;

  /* Journal desk identity: 700-level accent per desk.
     Values traced from Times ramp families (Times.Uk findings); two stepped
     darker for AA on paper (materials travel-750, corporate-deals money-350).
     Mapping table: logs/r1_desk_mapping.csv. */

  --desk-supply-chain: #00787c;
  --desk-trade: #21709c;
  --desk-manufacturing: #556d7f;
  --desk-materials: #286d9c;
  --desk-procurement: #0f3d38;
  --desk-corporate-deals: #3e725d;
  --desk-policy: #9b1f45;
  --desk-markets: #135dcb;

  /* Editorial signals (Times live badge). */
  --live: #9f0000;
  /* Desk hover states: 800-level, derived 0.8x from each 700 accent. */
  --desk-supply-chain-800: #006063;
  --desk-trade-800: #1a597c;
  --desk-manufacturing-800: #445765;
  --desk-materials-800: #20577c;
  --desk-procurement-800: #0c302c;
  --desk-corporate-deals-800: #315b4a;
  --desk-policy-800: #7c1837;
  --desk-markets-800: #0f4aa2;

  /* Color: semantic (AA-verified on surface) */
  --success: #1a7d4b;
  --warning: #b45309;
  --danger: #b3261e;
  --info: #1d4ed8;
  --success-bg: #e8f5ee;
  --warning-bg: #fdf3e7;
  --danger-bg: #fbeceb;
  --info-bg: #e9eefc;
  --muted-bg: #ecefec;
  --success-fg: #0f4a2c;
  --warning-fg: #7a3806;
  --danger-fg: #7d1a14;
  --info-fg: #173fa6;
  --muted-fg: #3d4a44;
  --success-border: #9dcfb4;
  --warning-border: #e3b078;
  --danger-border: #e0a19c;
  --info-border: #a9bdf3;

  /* Type: family */
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-display: var(--font-serif);
  --font-sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  /* Type: ramp (fluid display, body 16-18px, small 14px, caption 12px) */
  --text-display: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --text-h1: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-h4: 1.125rem;
  --text-body: clamp(1rem, 0.95rem + 0.15vw, 1.125rem);
  --text-small: 0.875rem;
  --text-caption: 0.75rem;
  --leading-tight: 1.15;
  --leading-body: 1.6;

  /* Type: weight */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type: letter-spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.06em;

  /* Space: 4px scale */
  --space-0: 1px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;

  /* Shadow: restrained */
  --shadow-sm: 0 1px 2px rgb(19 33 28 / 0.06);
  --shadow: 0 4px 12px rgb(19 33 28 / 0.08);

  /* Motion: 150ms, no gratuitous animation */
  --duration: 150ms;
  --ease: ease-out;

  /* Breakpoints */
  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Controls */
  --control-h: 2.75rem;

  /* Focus ring */
  --focus-ring: var(--info);

  /* Layout */
  --wrap-max: 80rem;
  --measure: 42rem;
  --header-h: 4rem;
}

}

@layer generic {
/* 02-generic.css
   Reset and box-sizing. No class selectors here. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

}

@layer elements {
/* 03-elements.css
   Bare HTML element styling: headings, links, tables, forms, lists.
   No class selectors. Everything inherits tokens from settings. */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

h4 {
  font-size: var(--text-h4);
}

p {
  max-width: var(--measure);
}

a {
  color: var(--brand-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--brand-800);
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

ul,
ol {
  padding-left: var(--space-5);
}

li + li {
  margin-top: var(--space-1);
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

th {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

input,
select,
textarea {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  color: inherit;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  min-height: var(--control-h);
}

button {
  cursor: pointer;
}

blockquote {
  border-left: 3px solid var(--hairline);
  margin-left: 0;
  padding-left: var(--space-4);
  color: var(--muted);
}

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-6) 0;
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

pre {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
}

small {
  font-size: var(--text-small);
}

}

@layer objects {
/* 04-objects.css
   Layout primitives only: o-wrap, o-grid, o-list, table-wrap.
   Chrome (header, nav, footer, toasts) lives in 05-components.css.
   Tokens only (01-settings.css), no raw hex. */

/* o-wrap: centered max-width container */
.o-wrap {
  width: min(100% - 2 * var(--space-5), var(--wrap-max));
  margin-inline: auto;
}

/* Tighter page gutters below the small breakpoint: 24px is wasteful at 360px */
@media (max-width: 40rem) {
  .o-wrap {
    width: min(100% - 2 * var(--space-4), var(--wrap-max));
  }
  .o-grid {
    gap: var(--space-4);
  }
}

/* table-wrap: horizontal scroll for wide tables */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* o-grid: equal-column responsive grid */
.o-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(12, 1fr);
}

.o-grid > * {
  grid-column: span 12;
}

@media (min-width: 40rem) {
  .o-grid--2 > *,
  .o-grid--2 .o-grid__item {
    grid-column: span 6;
  }
}

@media (min-width: 48rem) {
  .o-grid--3 > *,
  .o-grid--3 .o-grid__item {
    grid-column: span 4;
  }
}

/* o-list: structural list reset with stack/inline/divided variants */
.o-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.o-list > li + li {
  margin-top: 0;
}

.o-list--stack > li + li {
  margin-top: var(--space-3);
}

.o-list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* o-media: figure beside flexible body, with optional intrinsic-ratio crop */
.o-media {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.o-media__figure {
  flex: 0 0 var(--media-width, 40%);
  min-width: 0;
  margin: 0;
}

.o-media__figure img,
.o-media__figure picture,
.o-media__figure video {
  display: block;
  width: 100%;
  height: auto;
}

.o-media__figure img,
.o-media__figure video {
  aspect-ratio: var(--media-ratio, auto);
  object-fit: cover;
}

.o-media__body {
  flex: 1 1 auto;
  min-width: 0;
}

.o-media__caption {
  margin-top: var(--space-2);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
}

@media (max-width: 40rem) {
  .o-media {
    flex-direction: column;
    gap: var(--space-4);
  }

  .o-media__figure {
    flex-basis: auto;
    width: 100%;
  }
}

}

@layer components {
/* 05-components.css
   Shared chrome and UI components: masthead, nav, footer, buttons, cards,
   tables, forms, badges, alerts, pagination, breadcrumbs, empty states.
   BEM naming: block__element--modifier. */

/* --- Masthead --------------------------------------------------------- */

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}

.brand__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}


}

@layer components {
/* --- Footer (dark ink, hairline structure, quiet type) ---------------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--paper);
  text-decoration: none;
}

.site-footer__col h3 {
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--hairline) 80%, transparent);
  margin-bottom: var(--space-3);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.site-footer__col a {
  color: color-mix(in srgb, var(--paper) 68%, transparent);
  text-decoration: none;
  font-size: var(--text-small);
}

.site-footer__col a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.footer-coming { color: var(--brand-300); font-size: var(--text-caption); margin-left: var(--space-1); }

}

@layer components {
/* ============================================================
   Header nav chrome (audience dropdowns, drawer, toasts).
   No-JS via <details>. Tokens only, no hardcoded colors.
   ============================================================ */

/* Header row: brand + nav share one line, vertically centered.
   base.html uses .brand / .brand-mark / .brand-dot (not the
   .site-header__brand variant). */
.site-header .o-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
  padding-block: var(--space-3);
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  overflow: hidden;
  flex: none;
}

.brand-mark img {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.brand-dot {
  color: var(--brand-600);
}

.nav-main {
  margin-left: auto;
  min-width: 0;
}

/* Drawer: inline bar on desktop, collapsed panel below header */
.nav-drawer {
  position: relative;
}
.nav-drawer > .nav-drawer-toggle {
  display: none;
}
.nav-drawer > .nav-drawer-body {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-drawer > .nav-drawer-body[hidden] {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding-block: var(--space-1);
  border-bottom: var(--space-0) solid transparent;
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--brand-300);
}

.nav-link[aria-current] {
  color: var(--ink);
  border-bottom-color: var(--brand-600);
}
.nav-coming { border: 1px solid var(--hairline); border-radius: var(--radius-sm); color: var(--muted); font-family: var(--font-mono); font-size: var(--text-caption); margin-left: var(--space-1); padding-inline: var(--space-1); }

/* Dropdown toggle (summary): nav-link look with caret */
.nav-drop {
  position: relative;
}
.nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--control-h);
  min-height: var(--control-h);
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.nav-drop-toggle::-webkit-details-marker {
  display: none;
}
.nav-drop-toggle::marker {
  content: "";
}
.nav-drop-toggle:hover {
  color: var(--ink);
  border-bottom-color: var(--brand-300);
}
.nav-drop-toggle[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--brand-600);
}
.nav-drop-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: var(--space-1) solid transparent;
  border-right: var(--space-1) solid transparent;
  border-top: var(--space-1) solid currentColor;
  margin-left: var(--space-1);
}
.nav-drop[open] > .nav-drop-toggle::after {
  transform: rotate(180deg);
}

/* Menu panel: hidden by default, revealed on hover / focus / [open] */
.nav-drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: max-content;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 30;
}
.nav-drop[open] > .nav-drop-menu {
  display: block;
}
.nav-drop-menu a {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: var(--text-small);
  white-space: nowrap;
  text-decoration: none;
}
.nav-drop-menu a:hover,
.nav-drop-menu a:focus-visible {
  background: var(--brand-50);
  color: var(--brand-800);
}

.nav-drop-menu--markets {
  grid-template-columns: repeat(2, minmax(10rem, 1fr));
  width: 32rem;
  padding: 0;
  border-color: var(--ink);
  border-radius: 0;
  box-shadow: none;
}
.nav-drop[open] > .nav-drop-menu--markets { display: grid; }
.nav-drop-menu--markets li { border-bottom: 1px solid var(--hairline); }
.nav-drop-menu--markets li:nth-child(odd) { border-right: 1px solid var(--hairline); }
.nav-drop-menu--markets a { border-radius: 0; }

/* Header search + auth actions + CTA */
.header-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: 0 1 14rem;
  min-width: 0;
}
.header-search input {
  flex: 1 1 var(--space-9);
  min-width: 0;
  min-height: var(--control-h);
  max-width: 100%;
}
.header-search .btn {
  min-height: var(--control-h);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-actions a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding-block: var(--space-1);
  white-space: nowrap;
}
.nav-actions a:hover,
.nav-actions a:focus-visible {
  color: var(--ink);
}
.nav-cta {
  min-height: var(--control-h);
  white-space: nowrap;
}

/* Toasts: fixed stack for Django messages */
.toast-stack {
  position: fixed;
  top: calc(var(--header-h) + var(--space-3));
  right: var(--space-5);
  z-index: 60;
  display: grid;
  gap: var(--space-2);
  max-width: min(24rem, calc(100% - 2 * var(--space-5)));
}
.toast-stack .alert {
  box-shadow: var(--shadow);
}

}

@layer components {
/* Footer layout: brand block + 4 link columns (dark ink band) */
.site-footer .o-wrap {
  padding-block: var(--space-6) var(--space-5);
}

.footer-brand {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
}

.footer-brand__tagline {
  margin-top: var(--space-3);
  max-width: 34rem;
  font-size: var(--text-small);
  color: color-mix(in srgb, var(--paper) 60%, transparent);
}

.site-footer .brand-mark {
  border-color: color-mix(in srgb, var(--paper) 20%, transparent);
}

.site-footer .brand-dot {
  color: var(--brand-300);
}

.footer-cols {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) {
  .footer-cols {
    grid-template-columns: repeat(5, 1fr);
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  font-size: var(--text-caption);
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}

.footer-bottom a {
  color: inherit;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

}

@layer components {
/* Mobile drawer (collapsed nav below header) */
@media (max-width: 71.99rem) {
  body.nav-is-open { overflow: hidden; }
  .nav-main,
  .nav-drawer {
    position: static;
  }
  .nav-drawer > .nav-drawer-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--control-h);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-size: var(--text-small);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: border-color var(--duration) var(--ease),
      color var(--duration) var(--ease);
  }
  .nav-drawer-toggle:hover {
    border-color: var(--muted);
  }
  .nav-drawer-toggle::-webkit-details-marker {
    display: none;
  }
  .nav-drawer-toggle::after {
    content: "";
    width: 0;
    height: 0;
    border-left: var(--space-1) solid transparent;
    border-right: var(--space-1) solid transparent;
    border-top: var(--space-1) solid currentColor;
    margin-left: var(--space-1);
  }
  .nav-drawer-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }
  .nav-drawer > .nav-drawer-body {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow);
    max-height: calc(100vh - var(--header-h) - var(--space-3));
    overflow: auto;
    overscroll-behavior: contain;
    z-index: 40;
  }
  .nav-drawer > .nav-drawer-body:not([hidden]) {
    display: flex;
  }
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav-list > li + li {
    border-top: 1px solid var(--hairline);
  }
  .nav-drop-toggle {
    width: 100%;
    justify-content: space-between;
    padding-block: var(--space-3);
  }
  .nav-drop-menu {
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-2);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .nav-drop-menu a {
    padding-left: var(--space-5);
    white-space: normal;
  }
  .nav-drop:hover > .nav-drop-menu,
  .nav-drop:focus-within > .nav-drop-menu {
    display: none;
  }
  .nav-drop[open] > .nav-drop-menu {
    display: block;
  }
  .header-search {
    width: 100%;
    flex: none;
    min-width: 0;
  }
  .nav-actions {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

}

@layer components {
.site-chrome { position: sticky; top: 0; z-index: 30; min-height: var(--header-h); background: var(--surface); border-bottom: 1px solid var(--hairline); }
.site-chrome__row { display: flex; align-items: center; gap: clamp(.5rem, 1.2vw, 1.25rem); height: var(--header-h); }
.site-chrome__row .brand { font-size: 1.125rem; }
.site-chrome__row .brand-mark { width: 2rem; height: 2rem; }
.site-chrome__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.site-chrome__actions > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: var(--text-small); font-weight: 600; text-decoration: none; }
.site-chrome button, .nav-drawer button { min-width: 44px; min-height: 44px; color: var(--ink); cursor: pointer; background: transparent; border: 1px solid var(--hairline); }
.site-search { display: flex; align-items: center; width: clamp(13rem, 17vw, 18rem); min-height: 42px; overflow: hidden; background: var(--paper); border: 1px solid var(--hairline); }
.site-search:focus-within { border-color: var(--ink); outline: 2px solid var(--focus-ring); outline-offset: 2px; overflow: visible; }
.site-search input { width: 100%; min-width: 0; min-height: 40px; padding: .45rem .65rem; color: var(--ink); font-family: inherit; font-size: var(--text-small); background: transparent; border: 0; outline: 0; }
.site-search > button { min-width: auto; min-height: 40px; padding-inline: .7rem; font-size: var(--text-small); font-weight: 600; border: 0; border-left: 1px solid var(--hairline); }
.site-search__close, .site-search-toggle { display: none; }
.global-app-nav { display: flex; align-self: stretch; align-items: stretch; gap: 0; min-width: 0; }
.global-app-nav__item { position: relative; display: flex; border-bottom: 3px solid transparent; }
.global-app-nav__item.is-active-app { border-bottom-color: var(--brand-600); }
.global-app-nav__link { display: flex; align-items: center; min-height: 100%; padding: .25rem clamp(.45rem, .8vw, .8rem); color: var(--ink); font-size: var(--text-small); font-weight: 600; text-decoration: none; white-space: nowrap; }
.global-app-nav__link:hover, .global-app-nav__link:focus-visible { color: var(--brand-800); border-bottom-color: var(--brand-300); }
.global-app-nav__toggle { width: 32px; min-width: 32px !important; border: 0 !important; }
.global-app-nav__toggle::after { display: inline-block; content: ""; border-right: .25rem solid transparent; border-left: .25rem solid transparent; border-top: .3rem solid currentcolor; }
.global-app-nav__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.app-mega-menu { position: absolute; top: 100%; left: 0; z-index: 40; display: none; width: min(26rem, calc(100vw - 2rem)); padding: .75rem; background: var(--surface); border: 1px solid var(--hairline); box-shadow: var(--shadow); }
.app-mega-menu--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(42rem, calc(100vw - 2rem)); }
.app-mega-menu.is-open { display: grid; }
.app-mega-menu__item { display: grid; gap: .2rem; padding: .75rem; color: var(--ink); text-decoration: none; }
.app-mega-menu__item span { color: var(--muted); font-size: var(--text-small); }
.app-mega-menu__item[aria-current="page"] { color: var(--brand-800); background: var(--brand-50); box-shadow: inset 3px 0 0 var(--brand-600); }
.mobile-menu-toggle { display: none; }
.mobile-account { display: none; }
.nav-backdrop { position: fixed; inset: 0; z-index: 50; background: rgb(5 31 24 / 58%); backdrop-filter: blur(1px); }
.nav-drawer { position: fixed; top: 0; right: 0; z-index: 60; display: flex; flex-direction: column; width: min(24rem, 92vw); height: 100dvh; overflow: auto; background: var(--surface); border-left: 1px solid var(--hairline); box-shadow: -12px 0 32px rgb(5 31 24 / 18%); scrollbar-width: thin; }
.nav-drawer[hidden] { display: none; }
.nav-drawer__header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; min-height: 4.5rem; padding: 1rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.nav-drawer__header h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.nav-drawer .nav-drawer__close { min-width: auto; min-height: 40px; padding-inline: .75rem; font-weight: 600; border-color: transparent; border-radius: var(--radius-sm); }
.nav-drawer .nav-drawer__close:hover, .nav-drawer .nav-drawer__close:focus-visible { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-200); }
.nav-drawer__apps { display: grid; padding: .5rem 1.25rem; }
.drawer-app { display: grid; grid-template-columns: 1fr 44px; border-bottom: 1px solid var(--hairline); }
.drawer-app:last-child { border-bottom: 0; }
.drawer-app > a, .drawer-submenu a { display: flex; align-items: center; min-height: 52px; padding: .75rem .625rem; color: var(--ink); font-weight: 600; text-decoration: none; }
.drawer-app > a[aria-current="page"] { color: var(--brand-800); box-shadow: inset 3px 0 0 var(--brand-600); background: var(--brand-50); }
.nav-drawer .drawer-app__toggle { position: relative; width: 44px; min-width: 44px; min-height: 44px; align-self: center; border: 0; border-radius: var(--radius-sm); }
.nav-drawer .drawer-app__toggle::after { position: absolute; top: 50%; left: 50%; width: .5rem; height: .5rem; content: ""; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; transform: translate(-50%, -65%) rotate(45deg); transition: transform var(--duration) var(--ease); }
.nav-drawer .drawer-app__toggle[aria-expanded="true"]::after { transform: translate(-50%, -35%) rotate(225deg); }
.nav-drawer .drawer-app__toggle:hover, .nav-drawer .drawer-app__toggle:focus-visible { color: var(--brand-700); background: var(--brand-50); }
.drawer-submenu { display: grid; grid-column: 1 / -1; padding: .25rem .5rem .625rem 1rem; background: var(--brand-50); border-top: 1px solid var(--brand-100); }
.drawer-submenu[hidden] { display: none; }
.drawer-submenu a { min-height: 44px; padding-block: .55rem; font-size: var(--text-small); font-weight: 500; }
.drawer-submenu a:hover, .drawer-submenu a:focus-visible { color: var(--brand-800); text-decoration: underline; text-underline-offset: 3px; }
.nav-drawer__account { display: grid; gap: .25rem; margin-top: auto; padding: 1rem 1.25rem 1.5rem; border-top: 1px solid var(--hairline); }
.nav-drawer__account > a { display: flex; align-items: center; min-height: 44px; padding: .625rem; color: var(--ink); text-decoration: none; border-radius: var(--radius-sm); }
.nav-drawer__account > a:hover, .nav-drawer__account > a:focus-visible { color: var(--brand-800); background: var(--brand-50); }
.nav-drawer .nav-drawer__search { width: 100%; margin-bottom: .5rem; color: var(--surface); font-weight: 700; background: var(--brand-700); border-color: var(--brand-700); border-radius: var(--radius-sm); }
.nav-drawer .nav-drawer__search:hover, .nav-drawer .nav-drawer__search:focus-visible { background: var(--brand-800); border-color: var(--brand-800); }
.site-footer .footer-cols { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.site-chrome[data-nav-no-js] .app-mega-menu { position: static; display: grid; width: auto; box-shadow: none; }
.os-workspace-bar { display: none; }
.os-rail [data-workspace-close] { display: none; }

@media (max-width: 63.99rem) {
  .global-app-nav { display: none; }
  .mobile-menu-toggle { display: inline-flex; align-items: center; }
  .os-workspace-bar { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem; background: var(--surface); border-bottom: 1px solid var(--hairline); }
  .os-workspace-bar button { min-height: 44px; }
  .os-layout .os-rail { display: none; }
  .os-layout .os-rail.is-mobile-open { position: fixed; inset: 0 0 0 auto; z-index: 60; display: block; width: min(24rem, 92vw); padding: 1rem; overflow: auto; background: var(--surface); }
  .os-rail [data-workspace-close] { display: block; }
  .workspace-nav-is-open { overflow: hidden; }
}

@media (max-width: 47.99rem) {
  .site-chrome__row .brand > span:last-child { display: none; }
  .site-chrome__account { display: none !important; }
  .site-search { display: none; }
  .site-search.is-open { position: absolute; top: 100%; right: 0; left: 0; z-index: 70; display: flex; width: 100%; padding: .65rem 1rem; overflow: visible; background: var(--surface); border: 0; border-bottom: 1px solid var(--hairline); box-shadow: var(--shadow); }
  .site-search.is-open input { background: var(--paper); border: 1px solid var(--hairline); }
  .site-search.is-open > button { background: var(--surface); border: 1px solid var(--hairline); border-left: 0; }
  .site-search.is-open .site-search__close { display: inline-flex; margin-left: .5rem; border-left: 1px solid var(--hairline); }
  .site-search-toggle { display: inline-flex; align-items: center; padding-inline: .35rem; font-weight: 600; border: 0 !important; }
  .site-chrome[data-nav-no-js] .site-search { display: flex; width: min(14rem, calc(100vw - 7rem)); }
  .site-chrome[data-nav-no-js] .site-search-toggle { display: none; }
  .site-chrome[data-nav-no-js] .site-search__close { display: none; }
  .site-chrome[data-nav-no-js] .global-app-nav { display: grid; }
  .site-chrome[data-nav-no-js] .global-app-nav__item { display: block; }
  .app-mega-menu--wide { grid-template-columns: 1fr; }
}

}

@layer components {
/* --- Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.btn--primary {
  background: var(--brand-700);
  color: var(--surface);
}

.btn--primary:hover {
  background: var(--brand-800);
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--hairline);
  color: var(--ink);
}

.btn--secondary:hover {
  border-color: var(--muted);
}

.btn--danger {
  background: var(--danger);
  color: var(--surface);
}

.btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 85%, var(--ink));
  color: var(--surface);
}

.btn--sm {
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-caption);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}


}

@layer components {
/* --- Cards ------------------------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card__header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--hairline);
}

.card__header h1,
.card__header h2,
.card__header h3 {
  margin: 0;
}

.card__body {
  padding: var(--space-5);
  flex-grow: 1;
}

.card__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--hairline);
  margin-top: auto;
}

/* Card inside a grid: equal-height rows pin the footer to the bottom
   and lay its content out edge-to-edge. */
.o-grid .card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Card title: heading that links to the record the card represents */
.card__title {
  margin: 0;
}

.card__title a {
  color: var(--ink);
  text-decoration: none;
}

.card__title a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

/* Card meta: muted byline / badge row inside card__body */
.card__meta {
  font-size: var(--text-small);
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.card__meta:last-child {
  margin-bottom: 0;
}

/* Link card: whole card is an anchor (category tiles, promo tiles) */
.card--link {
  color: var(--ink);
  text-decoration: none;
  padding: var(--space-4) var(--space-5);
}

.card--link:hover {
  border-color: var(--brand-300);
  text-decoration: none;
}

.card--link h3 {
  color: var(--brand-600);
  font-size: var(--text-h4);
  margin-bottom: var(--space-1);
}

.card--link p {
  margin-bottom: 0;
}

/* Centered card: confirmation / status cards */
.card--center {
  text-align: center;
}


}

@layer components {
/* --- Tables ----------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.table th,
.table td {
  border-bottom: 1px solid var(--hairline);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: top;
}

.table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
}

.table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--paper) 50%, transparent);
}

.table--dense th,
.table--dense td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
}

.table--striped tbody tr:nth-child(even) {
  background: var(--paper);
}

.table--sticky-col {
  border-collapse: separate;
  border-spacing: 0;
}

.table--sticky-col th:first-child,
.table--sticky-col td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  box-shadow: inset -1px 0 0 var(--hairline);
  z-index: 1;
}

.table--sticky-col tbody tr:nth-child(even) th:first-child,
.table--sticky-col tbody tr:nth-child(even) td:first-child {
  background: color-mix(in srgb, var(--paper) 50%, var(--surface));
}

.table--sticky-col thead th:first-child {
  z-index: 2;
}

/* table-scroll: alias of .table-wrap for wide tables */
.table-scroll {
  overflow-x: auto;
}

/* numeric cells: right-aligned with tabular figures */
.table th.num,
.table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


}

@layer components {
/* --- Forms ------------------------------------------------------------ */

.form-field {
  margin-bottom: var(--space-4);
}

/* One label treatment: every form label, including the bare labels in
   the tariff calculator markup and the newsletter and alert partials. */
.form-field__label,
.form-field > label:not(.form-field__check),
.newsletter-form__label,
.alert-form__label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

/* One control treatment: 44px minimum height from the control token,
   shared padding, surface, hairline border, and inherited type. */
.form-field__control,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="password"],
.form-field input[type="url"],
.form-field input[type="search"],
.form-field input[type="tel"],
.form-field input[type="number"],
.form-field input[type="date"],
.form-field input[type="datetime-local"],
.form-field input[type="month"],
.form-field input[type="week"],
.form-field input[type="time"],
.form-field input[type="file"],
.form-field select,
.form-field textarea,
.newsletter-form__input,
.alert-form__input {
  width: 100%;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-family: inherit;
  color: inherit;
}

.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  width: auto;
  min-height: 0;
  padding: 0;
}

/* One focus style: the global focus-visible ring with a border tint. */
.form-field__control:focus-visible,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.newsletter-form__input:focus-visible,
.alert-form__input:focus-visible {
  border-color: var(--info);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

textarea.form-field__control,
.form-field textarea {
  min-height: 6rem;
  resize: vertical;
}

.form-field__check {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-small);
  cursor: pointer;
}

.form-field__check input {
  flex: none;
  margin: 0;
}

/* One hint and one error style, shared with the tariff calculator markup. */
.form-field__help,
.form-hint {
  font-size: var(--text-caption);
  color: var(--muted);
  margin-top: var(--space-1);
}

.form-field__error,
.form-error {
  font-size: var(--text-caption);
  color: var(--danger);
  margin-top: var(--space-1);
}

.form-field__errors {
  margin-top: var(--space-2);
}

.form-field__required {
  color: var(--danger);
}

/* Static read-only field row (tariff calculator destination). */
.form-static {
  display: block;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--muted-bg);
  color: var(--muted);
  font-size: var(--text-body);
  font-family: inherit;
}

.form-field.has-error .form-field__control,
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea,
.form-field .form-field__control[aria-invalid="true"],
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

/* Newsletter capture and price alert partials: the same field, label,
   input, note, and honeypot treatments as the form-field system. */
.newsletter-form__field,
.alert-form__field {
  margin-bottom: var(--space-4);
}

.alert-form__hint {
  font-weight: 400;
  color: var(--muted);
}

.newsletter-form__note,
.newsletter-form__privacy,
.alert-form__note,
.alert-form__privacy {
  margin: var(--space-2) 0 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.newsletter-form__honeypot,
.alert-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

}

@layer components {
/* --- Badges ----------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.badge--success {
  background: var(--success-bg);
  color: var(--success);
}

.badge--warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.badge--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.badge--neutral {
  background: var(--paper);
  color: var(--muted);
  border: 1px solid var(--hairline);
}

.badge--muted {
  background: var(--muted-bg);
  color: var(--muted);
}


}

@layer components {
/* --- Alerts ----------------------------------------------------------- */

.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--surface);
  margin-bottom: var(--space-5);
}

.alert__icon {
  flex: none;
  font-size: var(--text-h3);
  line-height: 1;
}

.alert__title {
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.alert__body {
  font-size: var(--text-small);
  color: var(--muted);
  max-width: none;
}

.alert--success,
.alert--warning,
.alert--danger,
.alert--info {
  border-left-width: 4px;
  border-left-style: solid;
}

.alert--success {
  border-left-color: var(--success);
  background: var(--success-bg);
}

.alert--success .alert__title {
  color: var(--success);
}

.alert--warning {
  border-left-color: var(--warning);
  background: var(--warning-bg);
}

.alert--warning .alert__title {
  color: var(--warning);
}

.alert--danger {
  border-left-color: var(--danger);
  background: var(--danger-bg);
}

.alert--danger .alert__title {
  color: var(--danger);
}

.alert--info {
  border-left-color: var(--info);
  background: var(--info-bg);
}

.alert--info .alert__title {
  color: var(--info);
}

.alert--neutral {
  border-left-color: var(--muted);
  background: var(--paper);
}

.alert--neutral .alert__title {
  color: var(--muted);
}


}

@layer components {
/* --- Pagination ------------------------------------------------------- */

.pagination {
  margin-top: var(--space-6);
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__item {
  display: flex;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.pagination__link:hover {
  border-color: var(--brand-300);
  color: var(--brand-700);
}

.pagination__link:focus-visible {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 20%, transparent);
}

.pagination__link[aria-current="page"] {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--surface);
}

.pagination__link[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


}

@layer components {
/* --- Breadcrumbs ------------------------------------------------------ */

/* Owner decision 2026-08-14: breadcrumb strips removed sitewide. Markup may
   remain in templates; this rule keeps them from rendering. */
.breadcrumbs {
  display: none;
}


}

@layer components {
/* --- Empty states ----------------------------------------------------- */

.empty-state {
  border: 1px dashed var(--muted);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}

.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  margin-bottom: var(--space-2);
}

.empty-state__body {
  color: var(--muted);
  font-size: var(--text-small);
  max-width: 28rem;
  margin: 0 auto var(--space-4);
}


}

@layer components {
/* --- Main content frame ---------------------------------------------- */

.site-main__inner {
  padding-block: var(--space-7) var(--space-8);
}


}

@layer components {
/* --- Error pages ------------------------------------------------------ */

.error-page {
  text-align: center;
  padding-block: var(--space-9);
}

.error-page__code {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
}

.error-page__title {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  margin-top: var(--space-3);
}

.error-page__body {
  color: var(--muted);
  max-width: 32rem;
  margin: var(--space-4) auto var(--space-6);
}

.error-page__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  margin: var(--space-6) 0 0;
  padding: 0;
}

.error-page__links a {
  color: var(--brand-700);
  text-decoration-color: var(--hairline);
  text-underline-offset: 0.2em;
}

.error-page__links a:hover {
  text-decoration-color: var(--brand-700);
}

}

@layer components {
/* Additive: standalone report presentation shared by print templates. */
.report-print {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--space-6);
}

.report-print h1 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin: 0 0 var(--space-1);
}

.report-print h2 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  border-bottom: var(--space-0) solid var(--hairline);
  padding-bottom: var(--space-1);
  margin-top: var(--space-6);
}

.report-print table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-2) 0;
  font-size: var(--text-small);
}

.report-print th,
.report-print td {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: var(--space-0) solid var(--hairline);
  vertical-align: top;
}

.report-print thead th {
  background: var(--paper);
}

.report-print td.num,
.report-print th.num {
  text-align: right;
}

.report-print .brand-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: calc(var(--space-0) * 3) solid var(--brand-700);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
}

.report-print .brand-name {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--brand-700);
  letter-spacing: var(--tracking-wide);
}

.report-print .u-muted {
  color: var(--muted);
}

.report-print .print-hint {
  font-size: var(--text-small);
  color: var(--muted);
  margin-bottom: var(--space-5);
}

.report-print .footnotes {
  margin-top: var(--space-7);
  border-top: var(--space-0) solid var(--hairline);
  padding-top: var(--space-3);
  font-size: var(--text-caption);
  color: var(--muted);
}


}

@layer components {
/* --- Spacing: mobile (360/768) ---------------------------------------- */
/* Stack, card, and page gaps shrink proportionally below the small
   breakpoint; layout (columns) collapses via the object rules. */

@media (max-width: 40rem) {
  .site-main__inner {
    padding-block: var(--space-6) var(--space-7);
  }
  .card__header,
  .card__footer {
    padding: var(--space-3) var(--space-4);
  }
  .card__body,
  .card--link {
    padding: var(--space-4);
  }
  .empty-state {
    padding: var(--space-6) var(--space-4);
  }
}

/* Additive: horizontal-scroll affordance for wide tables on small screens.
   Gradient edge cue signals scrollable content; no nested fixed-height scroll. */
@media (max-width: 47.99rem) {
  .table-scroll {
    background-image:
      linear-gradient(to right, var(--surface), var(--surface)),
      linear-gradient(to right, var(--surface), var(--surface)),
      linear-gradient(to right, color-mix(in srgb, var(--ink) 25%, transparent), transparent),
      linear-gradient(to left, color-mix(in srgb, var(--ink) 25%, transparent), transparent);
    background-position: 0 0, 100% 0, 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: var(--space-5) 100%, var(--space-5) 100%, var(--space-3) 100%, var(--space-3) 100%;
    background-attachment: local, local, scroll, scroll;
    border-bottom: var(--space-0) solid var(--hairline);
  }
}


}

@layer components {
/* Additive: shared print system. Token-driven; pairs with .no-print contract. */
@media print {
  @page {
    margin: var(--space-5) var(--space-4);
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: var(--font-sans);
      font-size: var(--text-caption);
      color: var(--muted);
    }
  }

  thead {
    display: table-header-group;
  }

  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .no-print {
    display: none !important;
  }
}


}

@layer components {
/* Additive: report-specific refinements within the shared print contract. */
@media print {
  .report-print {
    max-width: none;
    padding: 0;
  }

  .report-print h2 {
    page-break-after: avoid;
    break-after: avoid;
  }

  .report-print thead th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


}

@layer components {
/* --- Accessibility repairs (WS6) ----------------------------------------- */

/* Skip link: u-sr-only keeps it hidden; reveal it on keyboard focus so
   sighted keyboard users can see the bypass control (WCAG 2.4.1). */
a.u-sr-only:focus-visible {
  position: fixed !important;
  top: var(--space-3);
  left: var(--space-3);
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  clip: auto;
  overflow: visible;
  white-space: normal;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--radius-sm);
  z-index: var(--z-toast);
}

/* Focus visibility: the base form and pagination rules set outline: none
   with only a 20% alpha ring, which is too faint to read as a focus
   indicator. Restore a solid outline for keyboard focus; pointer focus
   keeps the original border and shadow treatment. */
.form-field__control:focus-visible,
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible,
.pagination__link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}


}

@layer components {
/* ============================================================
   Legacy selectors migrated from static/site.css (dedup compaction).
   Selectors preserved verbatim so existing markup does not restyle.
   Hardcoded sizes swapped to tokens only where a token holds the
   exact value. The rules that could not move without flipping the
   cascade against the lane stylesheets remain in static/site.css.
   ============================================================ */

/* Bare-label gap and monospace utility (elements layer keeps bare
   element basics; these two gaps were documented in site.css) */
label { font-weight: 600; display: block; margin-bottom: var(--space-1); }
.mono { font-family: var(--font-mono); font-size: 0.875em; }

/* Masthead hover shim */
.brand:hover { text-decoration: none; }


}

@layer components {
/* Hero */
.hero { padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--surface), var(--paper)); }
.hero h1 { max-width: 40rem; }
.hero p { max-width: var(--measure); color: var(--muted); font-size: var(--text-h4); }

/* Eyebrow kicker, base styling (the .hero .eyebrow sizing rule stays in
   site.css: lane-directory.css sets a mobile type floor on that compound
   selector that must keep losing the cascade) */
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }


}

@layer components {
/* Card descendants for legacy bare-.card markup */
.card h3 { margin-bottom: var(--space-2); }
.card--narrow { max-width: 36rem; }


}

@layer components {
/* Alert variant matching the Django error message tag
   (base.html renders alert--{{ message.tags }}) */
.alert--error { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); }


}

@layer components {
/* Search */

.search-bar {
  display: flex;
  gap: var(--space-2);
}

.search-bar input {
  flex: 1;
  min-width: 0;
  min-height: var(--control-h);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-family: inherit;
  color: inherit;
}

.search-bar input:focus-visible {
  border-color: var(--info);
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.search-results-page { padding-block: var(--space-7); }
.search-results-page__header { display: grid; gap: var(--space-3); max-width: 52rem; }
.search-results-page__header h1 { margin: 0; }
.search-results-form { display: flex; gap: var(--space-2); }
.search-results-form input { flex: 1; min-width: 0; min-height: var(--control-h); padding: var(--space-2) var(--space-3); color: var(--ink); font: inherit; background: var(--surface); border: 1px solid var(--hairline); }
.search-results-form input:focus-visible { border-color: var(--ink); outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.search-scopes { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline); }
.search-scopes a { flex: none; padding: var(--space-2) var(--space-3); color: var(--muted); font-weight: 600; text-decoration: none; }
.search-scopes a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px var(--brand-600); }
.search-result-groups { display: grid; gap: var(--space-7); }
.search-result-group { display: grid; gap: var(--space-3); }
.search-result-group__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-bottom: 2px solid var(--ink); }
.search-result-group__header h2 { margin: 0; padding-bottom: var(--space-2); }
.search-result-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.search-result { padding-block: var(--space-4); border-bottom: 1px solid var(--hairline); }
.search-result h3 { margin: var(--space-1) 0; }
.search-result h3 a { color: var(--ink); }
.search-result p { max-width: 70ch; margin: 0; }
.search-result__meta { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; }

.supplier-search-all {
  display: inline-block;
  font-weight: var(--weight-semibold);
  margin-top: var(--space-3);
}

.supplier-suggest {
  flex: 1;
  min-width: 0;
  position: relative;
  text-align: left;
}

.supplier-suggest input {
  width: 100%;
}

.supplier-suggest__list {
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  left: 0;
  list-style: none;
  margin: var(--space-1) 0 0;
  max-height: 20rem;
  overflow-y: auto;
  padding: var(--space-1);
  position: absolute;
  right: 0;
  top: 100%;
  z-index: var(--z-dropdown);
}

.supplier-suggest__list[hidden] {
  display: none;
}

.supplier-suggest__option {
  align-items: baseline;
  border-radius: var(--radius-sm);
  color: var(--ink);
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}

.supplier-suggest__label { font-weight: var(--weight-semibold); }

.supplier-suggest__secondary {
  color: var(--muted);
  flex: 1;
  font-size: var(--text-caption);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-suggest__type {
  color: var(--brand-700);
  flex: none;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.supplier-suggest__option[aria-selected="true"],
.supplier-suggest__option:hover {
  background: var(--brand-50);
  color: var(--brand-800);
}

@media (max-width: 32rem) {
  .search-results-form { align-items: stretch; flex-direction: column; }
}

}

@layer components {
/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.filter-link { padding: var(--space-1) var(--space-3); border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--text-small); }

/* Active state: brand fill on ink-text surfaces (the .os-rail a.is-active
   part of this grouped rule stays in site.css with the rail block) */
.filter-link:hover, .filter-link.is-active {
  background: var(--brand-600);
  color: var(--surface);
}
.filter-link:hover, .filter-link.is-active { border-color: var(--brand-600); }
.filter-link:hover, .filter-link.is-active { text-decoration: none; }


}

@layer components {
/* Pagination compat removed 2026-08-13: all consumers use the BEM
   pagination__list/__link contract in components/pagination.css. The legacy
   a/span override and .is-disabled rule had zero producers and overrode the
   BEM padding at (0,1,1) vs (0,1,0) in the same layer. */


}

@layer components {
/* Breadcrumbs (legacy ol/li markup; the BEM contract above is used only
   by publication templates). Owner decision 2026-08-14: hidden sitewide. */
.breadcrumbs { display: none; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; font-size: var(--text-small); color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; color: var(--hairline); margin-inline: var(--space-2); }
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  color: var(--brand-600);
}
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }


}

@layer components {
/* Empty state actions (base .empty / .empty-title stay in site.css) */
.empty-actions { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }


}

@layer components {
/* Stat tiles (sourcing os dashboard and trust strip) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.stat { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-4); }
.stat strong { display: block; font-family: var(--font-display); font-size: var(--text-h1); line-height: 1; margin-bottom: var(--space-1); }
.stat span { color: var(--muted); font-size: var(--text-small); }


}

@layer components {
/* Error pages */
.error-page h1 { font-size: var(--text-h1); color: var(--ink); }

}

@layer components {
/* Prose: long-form content (directory static pages depend on the full
   component; lane-publication.css adds article-only extras) */
.prose { max-width: var(--measure); font-size: var(--text-body); line-height: 1.7; }
.prose p { margin: 0 0 var(--space-4); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose h2:first-child, .prose h3:first-child, .prose h4:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-1); }
.prose li > ul, .prose li > ol { margin-top: var(--space-1); margin-bottom: 0; }
.prose blockquote { margin: 0 0 var(--space-4); padding: var(--space-1) var(--space-4); border-left: 3px solid var(--brand-300); color: var(--muted); }
.prose code { background: var(--brand-50); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--space-0) var(--space-1); font-size: 0.85em; }
.prose pre { margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--ink); color: var(--brand-100); border-radius: var(--radius); overflow-x: auto; font-size: var(--text-small); line-height: 1.6; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose img { border-radius: var(--radius); }
.prose hr { margin: var(--space-6) 0; }


}

@layer components {
/* --- Cookie banner ---------------------------------------------------- */

.cookie-banner {
  position: fixed;
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-sticky);
  max-width: 26rem;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--ink);
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner__text {
  margin: 0;
}

.cookie-banner__text a {
  color: var(--brand-700);
  text-decoration: underline;
}

.cookie-banner__dismiss {
  flex-shrink: 0;
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--brand-700);
  color: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
}

.cookie-banner__dismiss:hover {
  background: var(--brand-800);
}

}

@layer components {
/* Layout utilities */
.o-stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cluster--between { justify-content: space-between; }

/* Mobile hero rhythm (the o-stack mobile rhythm rules stay in site.css
   with the o-stack sibling-margin block) */
@media (max-width: 40rem) {
  .hero { padding: var(--space-6) 0 var(--space-5); }
}

/* Type utility */
.u-text-serif { font-family: var(--font-display); }

}

@layer utilities {
/* 07-utilities.css
   Utilities: u-mt-*, u-mb-*, u-mx-auto, u-muted, u-sr-only.
   Highest layer, always wins. Single-purpose classes, no nesting. */

/* Spacing: margin-top scale (4px base) */
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }

/* Spacing: margin-bottom scale */
.u-mb-0 { margin-bottom: 0; }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }

/* Spacing: mobile (360/768) - section gaps shrink proportionally */
@media (max-width: 40rem) {
  .u-mt-5 { margin-top: var(--space-4); }
  .u-mt-6 { margin-top: var(--space-5); }
  .u-mt-7 { margin-top: var(--space-6); }
}

/* Spacing: margin-inline auto */
.u-mx-auto { margin-inline: auto; }

/* Text: color (canonical class is u-muted; the u-text-muted alias was
   removed in the dedup compaction) */
.u-muted { color: var(--muted); }

/* Text: size */
.u-text-sm { font-size: var(--text-small); }

/* Text: whitespace */
.u-pre-wrap { white-space: pre-wrap; }

/* Visually hidden but available to assistive tech */
.u-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: calc(-1 * var(--space-0));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

}

/* static/site.css (unlayered supplement) */
/* ==========================================================================
   DEPRECATED SUPPLEMENT. Most of this file was migrated into the ITCSS
   layer stack (static/css/manifest.css); see css/05-components.css and
   css/07-utilities.css. base.html still links this file because the rules
   below must stay UNLAYERED to preserve current rendering:

   Unlayered author styles beat layered ones. The lane stylesheet
   (lane-directory.css) is imported into the
   components layer AFTER 05-components.css and holds conflicting
   declarations for the selectors kept here. Moving any rule below
   into a layer flips the cascade winner:

   - tbody tr:hover        .table tbody tr:nth-child(even) (05) has higher
                           specificity; once layered, hover on striped rows
                           would show the stripe color, not brand-50.
   - .hero .eyebrow        lane-directory.css sets a mobile type floor on
                           this compound selector; once layered, the mobile
                           font-size would change from 0.8125rem to the
                           small token.

   Do not add new rules here. New styles belong in the css/ layer files.
   ========================================================================== */

/* table row hover (kept unlayered, see header) */
tbody tr:hover { background: var(--brand-50); }

/* hero eyebrow sizing (kept unlayered, see header) */
.hero .eyebrow { font-size: 0.8125rem; margin-bottom: var(--space-2); }

/* empty state base (kept unlayered, see header; .empty-actions moved to
   css/05-components.css) */
.empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--muted); border: 1px dashed var(--hairline); border-radius: var(--radius); background: var(--surface); }
.empty-title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--ink); margin-bottom: var(--space-1); }


/* o-stack rhythm (kept unlayered, see header; .o-stack base and the
   cluster/grid objects moved to css/05-components.css) */
.o-stack > * + * { margin-top: var(--space-4); }
.o-stack--lg > * + * { margin-top: var(--space-7); }
@media (max-width: 40rem) {
  .o-stack > * + * { margin-top: var(--space-3); }
  .o-stack--lg > * + * { margin-top: var(--space-5); }
}