/* ============================================================
   DPP Passport Viewer — styles.css
   ============================================================ */

/* === Font ===
   Self-hosted Manrope variable font (wght 200..800), subset per script.
   Sourced from fonts.gstatic.com (Manrope v20, OFL) and served from our
   own assets so published passports make zero external requests.

   The URLs are relative to this stylesheet ("../fonts/..."), so they
   resolve under any assetBase ("./assets" CLI builds, "/{uid}/assets"
   Lambda publishes, "/assets" dev/landing). Caveat: preview pages inline
   this CSS into the HTML (inlineAssets), where "../fonts/..." has no
   stylesheet URL to resolve against and 404s — previews intentionally
   fall back to the system font stack (see the html font-family rule). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Bulgarian (and other EU Cyrillic-script content) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic.woff2") format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Greek */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-greek.woff2") format("woff2-variations");
  unicode-range:
    U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* === Reset === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* === Design Tokens === */
:root {
  /* Brand colors (OKLCH — same as globals.css) */
  --figma-main: oklch(0.786 0.192 155.62); /* #01DC82 */
  --figma-secondary: oklch(0.847 0.036 181.14); /* #B4D5CE */
  --figma-contrast-white: oklch(1 0 0); /* #FFFFFF */
  --figma-contrast-dark: oklch(0.185 0.056 256.67); /* #02122B */

  /* Semantic color tokens */
  --color-background: var(--figma-contrast-white);
  --color-foreground: var(--figma-contrast-dark);
  --color-primary: var(--figma-main);
  --color-primary-foreground: var(--figma-contrast-white);
  --color-secondary: var(--figma-secondary);
  --color-secondary-foreground: var(--figma-contrast-dark);
  --color-muted: oklch(0.97 0.005 181.14);
  --color-muted-foreground: oklch(0.556 0.028 256.67);
  /* Muted text that does NOT sit on the white sheet — the page background
     (--color-secondary-bg) and --color-muted chips. The regular muted token
     measures 4.4:1 there, just under WCAG AA; this step clears it. */
  --color-muted-foreground-strong: oklch(0.45 0.028 256.67);
  /* Secondary body copy (descriptions, list items, rich text). It used to be
     hardcoded at this value in nine component rules, which meant it never
     flipped for the dark theme and measured 2.5:1 there. */
  --color-text-secondary: oklch(0.45 0.03 256.67);
  --color-border: oklch(0.922 0.01 181.14);
  --color-secondary-bg: #f2f8f6;
  --color-destructive: oklch(0.577 0.245 27.325);

  /* Status colors (summary cards, dots, stripes) */
  --color-status-good: var(--figma-main);
  --color-status-good-soft: oklch(0.786 0.192 155.62 / 20%);
  --color-status-average: oklch(0.74 0.14 51); /* #F2994A */
  --color-status-average-soft: oklch(0.74 0.14 51 / 20%);
  --color-status-poor: oklch(0.637 0.194 25.7); /* #EB5757 */
  --color-status-poor-soft: oklch(0.637 0.194 25.7 / 20%);

  /* Callout palettes */
  --color-callout-green-bg: oklch(0.982 0.018 155.83);
  --color-callout-green-fg: oklch(0.432 0.095 166.91);
  --color-callout-green-border: var(--figma-main);
  --color-callout-info-bg: oklch(0.977 0.013 236.62);
  --color-callout-info-fg: oklch(0.391 0.09 240.88);
  --color-callout-info-border: oklch(0.746 0.16 232.66);
  --color-callout-amber-bg: oklch(0.987 0.022 95.28);
  --color-callout-amber-fg: oklch(0.473 0.137 46.2);
  --color-callout-amber-border: oklch(0.74 0.14 51);
  --color-callout-red-bg: oklch(0.971 0.013 17.38);
  --color-callout-red-fg: oklch(0.444 0.177 26.9);
  --color-callout-red-border: oklch(0.637 0.194 25.7);

  /* Charts */
  --color-chart-track: oklch(0.95 0.008 236);
  --color-shadow-soft: oklch(0.185 0.056 256.67 / 6%);
  --color-shadow-hover: oklch(0.185 0.056 256.67 / 12%);

  /* Page chrome (access band, toast) */
  --color-access-bg: oklch(0.957 0.01 262); /* ≈ #EDF1F7 */
  --color-toast-bg: var(--figma-contrast-dark);
  --color-toast-text: var(--figma-contrast-white);

  /* Radius */
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.875rem;

  /* Typography - Display */
  --font-size-display-lg: 3.5rem;
  --line-height-display-lg: 4rem;
  --font-weight-display-lg: 500;
  --font-size-display-md: 3rem;
  --line-height-display-md: 3.5rem;
  --font-weight-display-md: 500;
  --font-size-display-sm: 2.5rem;
  --line-height-display-sm: 3rem;
  --font-weight-display-sm: 500;

  /* Typography - Headline */
  --font-size-headline-lg: 2rem;
  --line-height-headline-lg: 2.5rem;
  --font-weight-headline-lg: 500;
  --font-size-headline-md: 1.75rem;
  --line-height-headline-md: 2.25rem;
  --font-weight-headline-md: 500;
  --font-size-headline-sm: 1.5rem;
  --line-height-headline-sm: 2rem;
  --font-weight-headline-sm: 500;

  /* Typography - Title */
  --font-size-title-lg: 1.375rem;
  --line-height-title-lg: 1.75rem;
  --font-weight-title-lg: 500;
  --font-size-title-md: 1rem;
  --line-height-title-md: 1.5rem;
  --font-weight-title-md: 500;
  --font-size-title-sm: 0.875rem;
  --line-height-title-sm: 1.25rem;
  --font-weight-title-sm: 500;

  /* Typography - Label */
  --font-size-label-lg: 0.875rem;
  --line-height-label-lg: 1.25rem;
  --font-weight-label-lg: 500;
  --font-size-label-md: 0.75rem;
  --line-height-label-md: 1rem;
  --font-weight-label-md: 500;
  --font-size-label-sm: 0.625rem;
  --line-height-label-sm: 1rem;
  --font-weight-label-sm: 500;

  /* Typography - Body */
  --font-size-body-lg: 1rem;
  --line-height-body-lg: 1.5rem;
  --font-weight-body-lg: 400;
  --font-size-body-md: 0.875rem;
  --line-height-body-md: 1.25rem;
  --font-weight-body-md: 400;
  --font-size-body-sm: 0.75rem;
  --line-height-body-sm: 1rem;
  --font-weight-body-sm: 400;
}

/* === Dark Mode === */
.dark {
  --color-background: var(--figma-contrast-dark);
  --color-foreground: var(--figma-contrast-white);
  --color-primary-foreground: var(--figma-contrast-dark);
  --color-secondary: oklch(0.35 0.036 181.14);
  --color-secondary-foreground: var(--figma-contrast-white);
  --color-muted: oklch(0.28 0.036 256.67);
  --color-muted-foreground: oklch(0.708 0.028 256.67);
  --color-muted-foreground-strong: oklch(0.75 0.028 256.67);
  --color-text-secondary: var(--color-muted-foreground);
  --color-border: oklch(1 0 0 / 10%);
  /* The page canvas must sit BEHIND the content sheet, not level with it.
     This was --figma-contrast-dark — identical to --color-background — so
     in dark mode the sheet vanished into the page and the layout lost the
     "document on a surface" reading that light mode has (#f2f8f6 page vs
     white content). Dark mode conventionally raises elevation with
     lightness, so the canvas goes darker than the sheet rather than the
     sheet going lighter, which would wash out the whole page. */
  --color-secondary-bg: oklch(0.14 0.045 256.67);

  /* Status colors */
  --color-status-good-soft: oklch(0.786 0.192 155.62 / 28%);
  --color-status-average-soft: oklch(0.74 0.14 51 / 28%);
  --color-status-poor-soft: oklch(0.637 0.194 25.7 / 28%);

  /* Callout palettes */
  --color-callout-green-bg: oklch(0.27 0.06 153);
  --color-callout-green-fg: oklch(0.845 0.143 164.98);
  --color-callout-info-bg: oklch(0.3 0.06 250);
  --color-callout-info-fg: oklch(0.828 0.111 230.32);
  --color-callout-amber-bg: oklch(0.28 0.07 45);
  --color-callout-amber-fg: oklch(0.924 0.12 95.75);
  --color-callout-red-bg: oklch(0.26 0.09 26);
  --color-callout-red-fg: oklch(0.808 0.114 19.57);

  /* Charts */
  --color-chart-track: oklch(0.37 0.035 256.67);
  --color-shadow-soft: oklch(0 0 0 / 25%);
  --color-shadow-hover: oklch(0 0 0 / 40%);

  /* Page chrome (access band, toast) */
  --color-access-bg: oklch(0.31 0.035 260); /* ≈ #273348 */
  --color-toast-bg: oklch(0.96 0.008 256.67); /* ≈ #F1F5F9 */
  --color-toast-text: oklch(0.21 0.035 262); /* ≈ #0F172A */
}

/* === Base === */
html {
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  background: var(--color-background);
  color: var(--color-foreground);
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Screen-reader-only Utility === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* === Typography Utilities === */
.text-display-lg {
  font-size: var(--font-size-display-lg);
  line-height: var(--line-height-display-lg);
  font-weight: var(--font-weight-display-lg);
}
.text-display-md {
  font-size: var(--font-size-display-md);
  line-height: var(--line-height-display-md);
  font-weight: var(--font-weight-display-md);
}
.text-display-sm {
  font-size: var(--font-size-display-sm);
  line-height: var(--line-height-display-sm);
  font-weight: var(--font-weight-display-sm);
}
.text-headline-lg {
  font-size: var(--font-size-headline-lg);
  line-height: var(--line-height-headline-lg);
  font-weight: var(--font-weight-headline-lg);
}
.text-headline-md {
  font-size: var(--font-size-headline-md);
  line-height: var(--line-height-headline-md);
  font-weight: var(--font-weight-headline-md);
}
.text-headline-sm {
  font-size: var(--font-size-headline-sm);
  line-height: var(--line-height-headline-sm);
  font-weight: var(--font-weight-headline-sm);
}
.text-title-lg {
  font-size: var(--font-size-title-lg);
  line-height: var(--line-height-title-lg);
  font-weight: var(--font-weight-title-lg);
}
.text-title-md {
  font-size: var(--font-size-title-md);
  line-height: var(--line-height-title-md);
  font-weight: var(--font-weight-title-md);
}
.text-title-sm {
  font-size: var(--font-size-title-sm);
  line-height: var(--line-height-title-sm);
  font-weight: var(--font-weight-title-sm);
}
.text-label-lg {
  font-size: var(--font-size-label-lg);
  line-height: var(--line-height-label-lg);
  font-weight: var(--font-weight-label-lg);
}
.text-label-md {
  font-size: var(--font-size-label-md);
  line-height: var(--line-height-label-md);
  font-weight: var(--font-weight-label-md);
}
.text-label-sm {
  font-size: var(--font-size-label-sm);
  line-height: var(--line-height-label-sm);
  font-weight: var(--font-weight-label-sm);
}
.text-body-lg {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-body-lg);
}
.text-body-md {
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  font-weight: var(--font-weight-body-md);
}
.text-body-sm {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  font-weight: var(--font-weight-body-sm);
}

/* === Layout === */
.page {
  min-height: 100vh;
}
.page--passport {
  background: var(--color-secondary-bg);
  /* Reading-column width; stepped up at the desktop breakpoints below. */
  --content-max: 700px;
}
.page--centered {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.main-container {
  width: 100%;
  /* Fallback keeps the landing/404 pages (no .page--passport) at 700px. */
  max-width: var(--content-max, 700px);
  margin: 0 auto;
  background: var(--color-background);
}
.main-padding {
  padding: 2rem 1rem;
}
.section-spacing {
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .main-container {
    border-radius: 0 0 1rem 1rem;
  }
  .main-padding {
    padding: 3rem 2rem;
  }
}

/* === Desktop section rail (>= 1024px) ===
   .page__layout wraps ONLY the rail + .main-container: the footer is a
   sibling of .main-container inside .page--passport and must stay a
   full-width band under both panes, so the grid cannot live on
   .page--passport itself. Below 1024px the wrapper is a plain block and the
   rail is display:none — mobile keeps exactly today's structure. */
.passport-rail {
  display: none;
}

@media (min-width: 1024px) {
  .page--passport {
    --content-max: 780px;
  }
  /* Only when a rail was actually rendered — see passport.njk. Without the
     modifier this stays a plain block and the content keeps its own
     max-width, instead of collapsing into an empty 15rem rail track. */
  .page__layout--with-rail {
    display: grid;
    /* [rail][content], centred as a unit; minmax(0,…) so a wide table
       inside the content pane can never blow the column out. */
    grid-template-columns: 15rem minmax(0, var(--content-max));
    justify-content: center;
    gap: 2rem;
    align-items: start;
    /* The grid wants 240 + 32 + 780 = 1052px but the breakpoint is 1024px,
       so between the two there is no free space for justify-content to
       distribute and both panes sit flush against the viewport edges. The
       content track is minmax(0, …) so it simply shrinks to honour this. */
    padding-inline: 1rem;
  }
  .passport-rail {
    display: block;
    position: sticky;
    top: 1.5rem;
    /* Long passports have long tables of contents; scroll inside the rail
       rather than letting it run off the viewport. */
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3rem 0 1.5rem;
  }
}

@media (min-width: 1440px) {
  .page--passport {
    --content-max: 900px;
  }
}

.passport-rail__identity {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  /* Match the inline padding of .passport-rail__link / __heading so the
     identity block lines up with the nav below it instead of sitting 10px
     further left. */
  padding-inline: 0.625rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.passport-rail__thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-muted);
}
.passport-rail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.passport-rail__identity-text {
  min-width: 0;
}
.passport-rail__name {
  display: block;
  font-size: var(--font-size-label-lg);
  line-height: var(--line-height-label-lg);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.passport-rail__identifier {
  display: block;
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-sm);
  color: var(--color-muted-foreground-strong);
}
.passport-rail__heading {
  font-size: var(--font-size-label-sm);
  line-height: var(--line-height-label-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted-foreground-strong);
  padding: 0 0.625rem;
  margin-bottom: 0.5rem;
}
.passport-rail__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.passport-rail__link {
  display: block;
  padding: 0.375rem 0.625rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
  color: var(--color-muted-foreground-strong);
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}
.passport-rail__link:hover {
  color: var(--color-foreground);
  background: var(--color-muted);
}
.passport-rail__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.passport-rail__link--current,
.passport-rail__link[aria-current="true"] {
  color: var(--color-foreground);
  font-weight: 600;
  border-left-color: var(--color-primary);
  background: var(--color-muted);
}

/* Anchor targets: leave a little breathing room above a jumped-to section. */
.section-list > * {
  scroll-margin-top: 1.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* === Divider === */
.section-divider {
  height: 1px;
  background: var(--color-border);
  width: 100%;
}
.section-divider--full {
  margin-inline: -1rem;
}
@media (min-width: 768px) {
  .section-divider--full {
    margin-inline: -2rem;
  }
}

/* === Manufacturer Card === */
.manufacturer-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.5rem;
}
.manufacturer-card__logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-muted);
}
.manufacturer-card__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.manufacturer-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.manufacturer-card__name {
  font-size: 1rem;
  font-weight: 500;
}
.manufacturer-card__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-muted-foreground);
}

/* === Country Flag === */
.country-flag {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}
.country-flag__emoji {
  margin-inline-end: 0.5rem;
}

/* === Product Image / Carousel === */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel__viewport {
  width: 100%;
  max-width: 448px;
  overflow: hidden;
  background: var(--color-muted);
}
.carousel__track {
  display: flex;
}
.carousel__slide {
  flex: 0 0 100%;
  position: relative;
  aspect-ratio: 1;
}
.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel__btn {
  position: absolute;
  top: 50%;
  z-index: 10;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.carousel__btn:hover {
  background: var(--color-muted);
}
.carousel__btn--prev {
  inset-inline-start: 0;
}
.carousel__btn--next {
  inset-inline-end: 0;
}
.carousel__btn svg {
  width: 24px;
  height: 24px;
}
.carousel__counter {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: oklch(1 0 0 / 80%);
  backdrop-filter: blur(4px);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
}

/* === Passport Header === */
.passport-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.passport-header__name {
  font-size: var(--font-size-headline-lg);
  line-height: var(--line-height-headline-lg);
  font-weight: 500;
}
.passport-header__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

/* === Hero (product identity) === */
.hero {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}
/* No heroImage field: the identity block is the whole hero, so give it a
   bordered card treatment (same tokens as .summary-card) instead of
   floating the title on bare white. */
.hero--card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-background);
  padding: 1.25rem;
}
.hero__image {
  width: 100%;
  background: var(--color-muted);
  border-radius: 1rem;
  overflow: hidden;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 12px var(--color-shadow-soft);
}
.hero__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.hero__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero__identity > *:last-child {
  margin-bottom: 0;
}
.hero__title {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
}
.hero__brand-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.hero__brand {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--color-callout-green-bg);
  color: var(--color-callout-green-fg);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.hero__meta,
.hero__parent {
  color: var(--color-muted-foreground);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}
/* Underlined, not colour-only: the link must stay distinguishable from the
   muted text around it without relying on colour. */
.hero__parent-link {
  color: var(--color-foreground);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* With a heroImage field: two columns from 768px up, image capped at
   320px and the identity block vertically centred beside it. Below
   768px stays a single stacked column (image full-width above text),
   unchanged from the pre-existing mobile layout. */
@media (min-width: 768px) {
  .hero--with-image {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
  .hero--with-image .hero__image {
    width: 320px;
    flex-shrink: 0;
    margin-bottom: 0;
  }
  .hero--with-image .hero__identity {
    flex: 1;
  }
}

/* === Key-Value Row (InfoRow) === */
/* Default (non-grid) layout: used wherever a key-value row renders outside
   a .field-list — e.g. inside .grid-field ("grid" field/section type) or a
   "row" (HorizontalLayout) field — where each row still owns its own box. */
.key-value-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.key-value-row__label {
  min-width: 107px;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.key-value-row__value {
  flex: 1;
  font-size: 0.875rem;
}
.key-value-row__tooltip {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  cursor: help;
}

/* Grid layout: within a .field-list, every key-value row shares one label
   column and one value column (see .field-list below) instead of each row
   sizing its own label independently. Scoped to a direct .field-list child
   so rows rendered elsewhere (.grid-field, .field-row) keep the plain flex
   row above — display: contents there would otherwise leak the label/value
   into an unrelated grid/flex container. */
.field-list > .key-value-row {
  display: contents;
}
.field-list > .key-value-row > .key-value-row__label {
  grid-column: 1;
}
.field-list > .key-value-row > .key-value-row__value {
  grid-column: 2;
  min-width: 0;
}

/* === Sub-entries (compact definition list for object values) === */
.sub-entries {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.sub-entries__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.sub-entries__label {
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}
.sub-entries__label::after {
  content: ":";
}
.sub-entries__value {
  margin: 0;
  font-size: 0.8125rem;
}
/* one nested level: indent instead of repeating the row layout */
.sub-entries .sub-entries {
  padding-left: 0.75rem;
}

/* === Locked Field === */
.locked-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.locked-field--keyValue,
.locked-field--text,
.locked-field--rating {
  align-items: flex-start;
}
.locked-field__label {
  min-width: 107px;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}
.locked-field__value {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-size: 0.8125rem;
  font-weight: 500;
  width: fit-content;
}
.locked-field__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.locked-field__count {
  font-weight: 700;
}

/* === Compliance Badge === */
.badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.badge__icon-box {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: var(--color-muted);
}
.badge__icon-box svg {
  width: 28px;
  height: 28px;
  color: var(--color-muted-foreground);
}
.badge__content {
  flex: 1;
}
.badge__title {
  font-size: 1rem;
  font-weight: 500;
}
.badge__description {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}

/* === Document Link === */
.document-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.document-link__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-muted-foreground);
}
.document-link__name {
  flex: 1;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.15s;
}
.document-link__name:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.document-link__download {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted-foreground);
}
.document-link__download svg {
  width: 16px;
  height: 16px;
}

/* === Rating (Recyclability) === */
.rating {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rating__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rating__percentage {
  font-size: 0.875rem;
  font-weight: 500;
}
.rating__leaves {
  display: flex;
  gap: 0.25rem;
}
.rating__leaf {
  width: 16px;
  height: 16px;
}
.rating__leaf--filled {
  color: #16a34a;
  fill: #16a34a;
}
.rating__leaf--empty {
  color: var(--color-muted);
}
.rating__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}
.rating__description {
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}
.rating__unit {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-inline-start: 0.5rem;
}

/* === Timeline / Sourcing Step === */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.timeline-step {
  position: relative;
}
.timeline-step__number {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.timeline-step__badge {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  border: 2px solid var(--color-foreground);
  background: var(--color-background);
  font-size: 10px;
  font-weight: 500;
}
.timeline-step__content {
  margin-inline-start: 9px;
  padding-inline-start: 1.5rem;
  border-inline-start: 2px solid var(--color-muted);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.timeline-step__row {
  display: flex;
  gap: 0.75rem;
}
.timeline-step__row-label {
  min-width: 107px;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}
.timeline-step__row-value {
  flex: 1;
  font-size: 0.875rem;
}
.timeline-step__factory-name {
  font-weight: 500;
}

/* === Accordion (details/summary) === */
.accordion {
  border-bottom: 1px solid var(--color-border);
}
.accordion__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: start;
}
.accordion__trigger-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  font-size: 1.125rem;
  font-weight: 600;
}
.accordion__trigger-icon svg {
  width: 20px;
  height: 20px;
}
.accordion__trigger-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.accordion__title {
  font-size: inherit;
  font-weight: inherit;
}
.accordion__summary-preview {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-muted-foreground);
  line-height: 1.4;
}
.accordion__chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  margin-inline-start: auto;
  color: var(--color-muted-foreground);
}
details[open] > .accordion__trigger .accordion__chevron {
  transform: rotate(180deg);
}
.accordion__body {
  padding-bottom: 1rem;
}
.accordion__description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

/* === Flat Section === */
.flat-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.flat-section__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.flat-section__title {
  font-size: 1.125rem;
  font-weight: 600;
}
.flat-section__title--nested {
  font-size: 1rem;
}
.flat-section__description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}
.flat-section__children {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--color-border);
}

/* === Grid Section === */
.grid-section__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.grid-section__title {
  font-size: 1.125rem;
  font-weight: 600;
}
.grid-section__description {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 1rem;
}

/* === Tabs === */
.tabs__list {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 0;
  overflow-x: auto;
}
.tabs__trigger {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--color-muted-foreground);
  white-space: nowrap;
  font-family: inherit;
}
.tabs__trigger:hover {
  color: var(--color-foreground);
}
.tabs__trigger--active {
  color: var(--color-foreground);
  border-bottom-color: var(--color-primary);
}
.tabs__panel {
  padding-top: 1rem;
}

/* === Field Spacing === */
/* Two-column grid so every key-value pair in one section shares a single
   label column and a single value column, instead of each row sizing its
   own label independently. fit-content(15rem) sizes the label column to
   this section's longest label but caps it, so one long label wraps
   in-place instead of pushing every value in the section to the right.
   Non-keyValue fields (text, list, richText, ...) span both columns via
   the `.field-list > *` rule below; .key-value-row overrides that back to
   its own two-column placement (see the Key-Value Row rules above). */
.field-list {
  display: grid;
  grid-template-columns: fit-content(15rem) minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  align-items: baseline;
}
.field-list > * {
  grid-column: 1 / -1;
}
@media (max-width: 767px) {
  /* Narrow screens keep the side-by-side pair layout (stacking label above
     value doubles the row count on an already-long page and removes the
     visual pairing cue). Cap the label column as a PERCENTAGE of the
     section instead of a fixed 15rem, so a long label wraps inside its own
     column rather than squeezing the value into a sliver. */
  .field-list {
    grid-template-columns: fit-content(45%) minmax(0, 1fr);
    column-gap: 0.75rem;
  }
  /* Long values (>= 60 chars, flagged server-side as .key-value-row--long —
     see lib/value-rendering.ts) break the side-by-side pair above into a
     narrow multi-line ribbon. Stack label above value instead: forcing both
     onto the full row width means grid auto-placement can't keep them
     side by side, so the value drops to its own row below the label.
     .field-list applies one row-gap to every grid row, so left alone this
     would put an equal gap between the label and ITS value as between that
     value and the NEXT row's label — the stacked pair would read as two
     unrelated lines instead of a pair. Pull the value up toward its own
     label (negative margin-top) and push it back down by the same amount
     (margin-bottom) so the gap before the next field row is preserved —
     net zero added height, just redistributed. */
  .field-list > .key-value-row--long > .key-value-row__label,
  .field-list > .key-value-row--long > .key-value-row__value {
    grid-column: 1 / -1;
  }
  .field-list > .key-value-row--long > .key-value-row__value {
    margin-top: -0.25rem;
    margin-bottom: 0.25rem;
  }
}
.section-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* === Text Field === */
.text-field__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}
.text-field__value {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* === List Field === */
.list-field {
  font-size: 0.875rem;
  padding-inline-start: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.list-field--none {
  list-style: none;
  padding-inline-start: 0;
}
.list-field--bullet {
  list-style: disc;
}
.list-field--numbered {
  list-style: decimal;
}
.list-field__item {
  color: var(--color-text-secondary);
}
.list-field__item-label {
  font-weight: 500;
  color: oklch(0.4 0.03 256.67);
}

/* === Company Field === */
.company-field {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.25rem 0;
}
.company-field__label {
  min-width: 107px;
  font-size: 0.875rem;
  color: var(--color-muted-foreground);
}
.company-field__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.company-field__name {
  font-size: 0.875rem;
  font-weight: 500;
}
.company-field__arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-muted-foreground);
}

/* === Image Field === */
.image-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.image-field__img {
  border-radius: var(--radius-md);
}
.image-field__caption {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  text-align: center;
}

/* === Rich Text Field === */
.rich-text {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.rich-text a {
  color: #2563eb;
}
.rich-text a:hover {
  text-decoration: underline;
}
.rich-text strong {
  font-weight: 600;
}
.rich-text em {
  font-style: italic;
}

/* === Divider Field === */
.divider--sm {
  margin: 0.5rem 0;
}
.divider--md {
  margin: 1rem 0;
}
.divider--lg {
  margin: 1.5rem 0;
}

/* === Grid Field === */
.grid-field {
  display: grid;
  gap: 1rem;
}

/* === Access Band === */
.access-section {
  background: var(--color-access-bg);
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 1rem;
}
.access-section__heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.access-section__grid {
  display: grid;
  /* Was `1fr 1fr`, which overflowed narrow screens: `1fr` is
     `minmax(auto, 1fr)`, so a track can never shrink below its content's
     min-content width. A card measures 181px min-content (set by the
     longest translated button label — Bulgarian "Вход в платформата"), so
     two tracks demanded 374px and burst any viewport under ~406px. It also
     meant the failure width depended on the locale.
     auto-fit drops to a single column instead of overflowing, and
     min(100%, …) keeps the track from exceeding the container even when the
     floor would. Behaviour is unchanged at >= 468px of grid width (still two
     228px cards); only the widths that were broken change.
     The track floor alone is NOT sufficient: a grid item's default
     `min-width: auto` resolves to its content-based minimum, so a single
     unbreakable word (Danish "Genvindingsvirksomheder") can still push the
     track wider. .access-card therefore also opts out of that floor — see
     below. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.75rem;
}
.access-card {
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem;
  /* Opt out of the content-based automatic minimum so a long compound word
     in any of the 24 locales cannot force the grid track wider than its
     container; overflow-wrap then lets that word break instead. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.access-card__label {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.access-card__desc {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  line-height: 1.4;
  margin-bottom: 0.75rem;
}
.access-card .btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}
@media (min-width: 768px) {
  .access-section {
    padding: 1.5rem 2rem;
    border-radius: 0 0 1rem 1rem;
  }
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn:active {
  transform: scale(0.97);
}
.btn--secondary {
  background: var(--color-background);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
}
.btn--secondary:hover {
  background: var(--color-muted);
}

/* === Footer === */
.footer {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1rem 2.5rem;
  text-align: center;
}
.footer__selectors {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.footer__selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
/* The footer sits on the page background (--color-secondary-bg), where the
   regular muted token measures 4.4:1 — see --color-muted-foreground-strong. */
.footer__selector label {
  font-size: 0.6875rem;
  color: var(--color-muted-foreground-strong);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.footer__select {
  padding-block: 0.5rem;
  padding-inline: 0.75rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-family: inherit;
  background-color: var(--color-background);
  color: var(--color-foreground);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2394A3B8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
  transition: border-color 0.2s;
}
/* background-position has no logical-property equivalent */
[dir="rtl"] .footer__select {
  background-position: left 10px center;
}
.footer__select:hover {
  border-color: var(--color-muted-foreground);
}
.footer__select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.footer__divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent
  );
  margin: 1.25rem 0;
}
.footer__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.footer__brand-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.15s;
}
.footer__brand-link:hover {
  opacity: 0.8;
}
.footer__logo {
  height: 36px;
  width: auto;
}
/* Theme-matched logo: see footer.njk. Exactly one variant is ever shown. */
.footer__logo--dark {
  display: none;
}
.dark .footer__logo--light {
  display: none;
}
.dark .footer__logo--dark {
  display: block;
}
.footer__wordmark {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.footer__meta {
  font-size: 0.75rem;
  color: var(--color-muted-foreground-strong);
  line-height: 1.6;
  margin-top: 0.25rem;
}
.footer__partner {
  font-size: 0.75rem;
  color: var(--color-muted-foreground-strong);
  margin-top: 1rem;
}
.footer__partner a {
  font-weight: 600;
  transition: color 0.2s;
}
.footer__partner a:hover {
  color: var(--color-primary);
}

/* === Toast === */
.toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--color-toast-bg);
  color: var(--color-toast-text);
  padding: 0.75rem 1.25rem;
  border-radius: 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 8px 32px oklch(0.185 0.056 256.67 / 30%);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease;
}
.toast--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* === Machine-translation disclosure ===
   Shown by i18n-script.njk when the active locale is a machine translation.
   Styled as an info callout so it reads as part of the page, with an outlined
   "view original" action. Colours reuse the info-callout tokens (theme-aware
   via the .dark overrides on those tokens). */
.translation-disclosure {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  width: fit-content;
  max-width: min(42rem, calc(100% - 2rem));
  margin: 1.5rem auto 2.5rem;
  padding: 0.625rem 1.125rem;
  background: var(--color-callout-info-bg);
  border: 1px solid var(--color-callout-info-border);
  border-radius: var(--radius-lg);
  color: var(--color-callout-info-fg);
  font-size: var(--font-size-label-lg);
  line-height: 1.5;
  text-align: center;
}
.translation-disclosure[hidden] {
  display: none;
}
.translation-disclosure__icon {
  display: inline-flex;
  flex-shrink: 0;
}
.translation-disclosure__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
.translation-disclosure__view-original {
  appearance: none;
  -webkit-appearance: none;
  margin-inline-start: 0.125rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}
.translation-disclosure__view-original:hover {
  background: var(--color-callout-info-fg);
  color: var(--color-callout-info-bg);
}
.translation-disclosure__view-original:focus-visible {
  outline: 2px solid var(--color-callout-info-border);
  outline-offset: 2px;
}

/* === Landing Page === */
.landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: 448px;
  text-align: center;
}
.landing__logo {
  width: 192px;
  height: auto;
}
.landing__description {
  font-size: var(--font-size-body-lg);
  color: var(--color-muted-foreground);
}
.landing__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.landing__input {
  height: 44px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 1rem;
  font-family: inherit;
  font-size: 1rem;
  background: var(--color-background);
  color: var(--color-foreground);
}
.landing__input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
.landing__submit {
  height: 44px;
  width: 100%;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s;
}
.landing__submit:hover {
  opacity: 0.9;
}
.landing__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.landing__learn-link {
  font-size: var(--font-size-label-md);
  color: var(--color-muted-foreground);
  transition: color 0.15s;
}
.landing__learn-link:hover {
  color: var(--color-foreground);
}

/* === 404 Page === */
.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 672px;
  text-align: center;
}
.not-found__icon-box {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: oklch(0.786 0.192 155.62 / 10%);
}
.not-found__icon-box svg {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
}
.not-found__title {
  font-size: var(--font-size-display-lg);
  font-weight: var(--font-weight-display-lg);
  letter-spacing: -0.02em;
}
.not-found__heading {
  font-size: var(--font-size-headline-lg);
  font-weight: var(--font-weight-headline-lg);
}
.not-found__description {
  font-size: var(--font-size-body-lg);
  color: var(--color-muted-foreground);
  max-width: 448px;
  margin: 0 auto;
}
.not-found__actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 384px;
}
.not-found__return-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.not-found__return-btn:hover {
  opacity: 0.9;
}

/* === Summary Cards === */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.summary-card {
  position: relative;
  overflow: hidden;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1rem;
  box-shadow: 0 1px 4px var(--color-shadow-soft);
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.summary-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--color-border);
}
.summary-card--good::before {
  background: linear-gradient(
    90deg,
    var(--color-status-good),
    oklch(0.77 0.16 163)
  );
}
.summary-card--average::before {
  background: linear-gradient(
    90deg,
    var(--color-status-average),
    oklch(0.84 0.15 84)
  );
}
.summary-card--poor::before {
  background: linear-gradient(
    90deg,
    var(--color-status-poor),
    oklch(0.7 0.18 22)
  );
}
.summary-card:hover {
  box-shadow: 0 4px 16px var(--color-shadow-hover);
  transform: translateY(-1px);
}
.summary-card__icon {
  font-size: 1.375rem;
  margin-bottom: 0.5rem;
}
.summary-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--color-muted-foreground);
  margin-bottom: 0.25rem;
}
.summary-card__value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.summary-card__unit {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-muted-foreground);
}

/* === Status Dots (glow ring) === */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot--good {
  background: var(--color-status-good);
  box-shadow: 0 0 0 3px var(--color-status-good-soft);
}
.status-dot--average {
  background: var(--color-status-average);
  box-shadow: 0 0 0 3px var(--color-status-average-soft);
}
.status-dot--poor {
  background: var(--color-status-poor);
  box-shadow: 0 0 0 3px var(--color-status-poor-soft);
}

/* === Donut Chart === */
.donut-chart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.donut-chart__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0;
}
.donut-chart__svg {
  width: 200px;
  height: 200px;
  overflow: visible;
  filter: drop-shadow(0 4px 12px var(--color-shadow-soft));
}
.donut-chart__track {
  stroke: var(--color-chart-track);
}
.donut-chart__segment {
  transform: rotate(-90deg);
  transform-origin: center;
  cursor: pointer;
  transition:
    stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    filter 0.3s ease;
}
/* Pure-CSS hover dimming within the SVG (no JS needed) */
.donut-chart__svg:hover .donut-chart__segment {
  opacity: 0.45;
}
.donut-chart__svg:hover .donut-chart__segment:hover {
  opacity: 1;
  stroke-width: 34;
  filter: drop-shadow(0 0 8px oklch(0 0 0 / 20%));
}
/* JS-driven cross-highlight state (segment <-> material row) */
.donut-chart__svg.has-hover .donut-chart__segment {
  opacity: 0.45;
}
.donut-chart__svg.has-hover .donut-chart__segment.is-active {
  opacity: 1;
  stroke-width: 34;
  filter: drop-shadow(0 0 8px oklch(0 0 0 / 20%));
}
.donut-chart__center-text {
  font-size: 28px;
  font-weight: 700;
  fill: var(--color-foreground);
  transition: opacity 0.25s ease;
}
.donut-chart__center-text--long {
  font-size: 18px;
}
.donut-chart__center-label {
  max-width: 200px;
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-muted-foreground);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition:
    opacity 0.25s ease,
    font-size 0.15s ease;
}
.donut-chart__center-label--hover {
  text-transform: none;
  letter-spacing: 0;
  font-size: 9px;
}

/* === Material List (donut legend) === */
.material-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.material-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-border); /* per-row color via inline style */
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  transition:
    opacity 0.3s ease,
    box-shadow 0.2s ease;
}
.material-row:hover,
.material-row.is-active {
  box-shadow: 0 2px 8px var(--color-shadow-soft);
}
.material-row:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}
.material-list.has-hover .material-row {
  opacity: 0.5;
}
.material-list.has-hover .material-row.is-active {
  opacity: 1;
}
.material-row__name {
  font-weight: 600;
}
.material-row__percent {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-muted-foreground);
}
.material-row__origin {
  font-size: 1rem;
}
.material-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 3px 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.material-badge--green {
  background: var(--color-callout-green-bg);
  color: var(--color-callout-green-fg);
}
.material-badge--blue {
  background: var(--color-callout-info-bg);
  color: var(--color-callout-info-fg);
}

/* === Gauge === */
.gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.gauge__svg {
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 4px 12px var(--color-shadow-soft));
}
.gauge__track {
  fill: none;
  stroke: var(--color-chart-track);
  stroke-width: 14;
}
.gauge__fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 14;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dasharray 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.gauge__text {
  font-size: 36px;
  font-weight: 700;
  fill: var(--color-foreground);
}
.gauge__text--long {
  font-size: 22px;
}
.gauge__label {
  max-width: 180px;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted-foreground);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === Score Bars === */
.score-bars {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.score-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.score-bar__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.score-bar__value {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted-foreground);
  text-align: end;
}
.score-bar__track {
  height: 6px;
  background: var(--color-chart-track);
  border-radius: 3px;
  overflow: hidden;
}
.score-bar__fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--color-status-good),
    oklch(0.77 0.16 163)
  );
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Callout === */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border-inline-start: 4px solid transparent;
  font-size: 0.875rem;
  line-height: 1.6;
}
.callout__icon {
  flex-shrink: 0;
}
.callout--green {
  background: var(--color-callout-green-bg);
  border-inline-start-color: var(--color-callout-green-border);
  color: var(--color-callout-green-fg);
}
.callout--info {
  background: var(--color-callout-info-bg);
  border-inline-start-color: var(--color-callout-info-border);
  color: var(--color-callout-info-fg);
}
.callout--amber {
  background: var(--color-callout-amber-bg);
  border-inline-start-color: var(--color-callout-amber-border);
  color: var(--color-callout-amber-fg);
}
.callout--red {
  background: var(--color-callout-red-bg);
  border-inline-start-color: var(--color-callout-red-border);
  color: var(--color-callout-red-fg);
}

/* === Stat Cards === */
.stat-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.stat-cards__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.stat-card {
  padding: 1.25rem 1rem;
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  text-align: center;
}
.stat-card__value {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stat-card__unit {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted-foreground);
  margin-inline-start: 0.25rem;
}
.stat-card__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted-foreground);
  margin-top: 0.25rem;
}
.stat-card__comparison {
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-top: 0.25rem;
}
.stat-card--hero {
  padding: 1.5rem 1.25rem;
  background: var(--color-secondary-bg);
}
.stat-card--hero .stat-card__value {
  font-size: 3.25rem;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stat-card--hero .stat-card__unit {
  font-size: 1.125rem;
}
.stat-card--hero .stat-card__comparison {
  font-size: 0.875rem;
  font-weight: 500;
  margin-top: 0.75rem;
}

/* === Checklist === */
.checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}
.checklist__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  line-height: 1.5;
}
.checklist__item--attention {
  background: var(--color-callout-amber-bg);
  border-color: var(--color-callout-amber-border);
}
.checklist__icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.checklist__icon svg {
  width: 18px;
  height: 18px;
}
.checklist__icon--ok {
  color: var(--color-status-good);
}
.checklist__icon--attention {
  color: var(--color-callout-amber-fg);
}
.checklist__label {
  font-weight: 700;
}

/* === Certification Badges === */
.cert-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cert-badge {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-background);
  transition: box-shadow 0.2s ease;
}
.cert-badge:hover {
  box-shadow: 0 2px 8px var(--color-shadow-hover);
}
.cert-badge__shield {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  background: var(--color-callout-green-bg);
  border-inline-end: 1px solid var(--color-callout-green-border);
}
.cert-badge__shield-icon {
  width: 18px;
  height: 18px;
  color: var(--color-callout-green-fg);
}
.cert-badge__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.75rem 1rem;
  flex: 1;
  min-width: 0;
}
.cert-badge__name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cert-badge__status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 0.5rem;
  border-radius: 10px;
  background: var(--color-callout-green-bg);
  color: var(--color-callout-green-fg);
  border: 1px solid var(--color-callout-green-border);
  white-space: nowrap;
}
.cert-badge__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}
.cert-badge__sep {
  color: var(--color-border);
}
.cert-badge__verify {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}
.cert-badge__verify:hover {
  text-decoration: underline;
}

/* === Circularity Grid === */
.circularity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.circularity-grid__cell {
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  text-align: center;
  transition: box-shadow 0.2s ease;
}
.circularity-grid__cell:hover {
  box-shadow: 0 2px 8px var(--color-shadow-soft);
}
.circularity-grid__cell--green {
  background: var(--color-callout-green-bg);
  border-color: var(--color-callout-green-border);
}
.circularity-grid__cell--green .circularity-grid__verdict {
  color: var(--color-callout-green-fg);
}
.circularity-grid__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.circularity-grid__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--color-muted-foreground);
  margin-bottom: 0.25rem;
}
.circularity-grid__verdict {
  font-size: 0.9375rem;
  font-weight: 700;
}

/* === Supply Chain Timeline === */
.supply-timeline {
  position: relative;
  list-style: none;
  margin: 0.5rem 0;
  padding-inline-start: 1.5rem;
}
.supply-timeline::before {
  content: "";
  position: absolute;
  inset-inline-start: 11px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(
    to bottom,
    var(--color-primary),
    var(--color-border)
  );
}
.supply-timeline__node {
  position: relative;
  padding: 0.75rem 1rem;
  margin-bottom: 2px;
  border-radius: var(--radius-lg);
}
.supply-timeline__node::before {
  content: "";
  position: absolute;
  inset-inline-start: -19px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-muted);
  border: 3px solid var(--color-background);
  box-shadow: 0 0 0 1px var(--color-border);
}
.supply-timeline__node--highlight {
  background: var(--color-status-good-soft);
}
.supply-timeline__node--highlight::before {
  background: var(--color-primary);
  box-shadow:
    0 0 0 1px var(--color-primary),
    0 0 8px var(--color-status-good-soft);
}
.supply-timeline__stage {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 3px;
}
.supply-timeline__country {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}
.supply-timeline__facility {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
}

/* === Blurred (tier-gated) Field === */
.blurred-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.blurred-field__text {
  filter: blur(4px);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  color: var(--color-muted-foreground);
}
.blurred-field__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: var(--color-muted);
  /* Not --color-muted-foreground: at 10px bold on --color-muted it measures
     4.34:1 (light) / 4.48:1 (dark), just under the 4.5:1 bar. Desktop now
     opens every accordion on load, so these badges are audited on first
     paint — they have to clear it. */
  color: var(--color-muted-foreground-strong);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.blurred-field__lock {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.blurred-field__count {
  font-weight: 700;
}

/* === Component Responsive Tweaks === */
@media (min-width: 768px) {
  .summary-card__value {
    font-size: 1.5rem;
  }
  .stat-cards__row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* === Unknown Section/Field Fallback === */
.unknown-notice {
  padding: 1rem;
  background: #fefce8;
  border: 1px solid #fde68a;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
}

/* === Dev Environment Badge === */
.dev-badge {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 0.25rem 0.75rem;
  background: #f97316;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 1rem;
  z-index: 9999;
  opacity: 0.85;
  pointer-events: none;
  font-family: inherit;
}

/* === Print Styles === */
@media print {
  /* Hide interactive and non-essential elements */
  .dev-badge,
  .carousel__btn,
  .carousel__counter,
  .tabs__list,
  .landing__form,
  .not-found__actions,
  .access-section,
  .footer__selectors,
  .footer__divider,
  .passport-rail,
  .toast {
    display: none;
  }
  .page__layout {
    display: block;
  }

  /* Show all accordion content expanded */
  details .accordion__body {
    display: block;
  }
  .accordion__chevron {
    display: none;
  }

  /* Clean backgrounds */
  body {
    background: #fff;
    color: #000;
  }
  .page--passport {
    background: #fff;
  }
  .main-container {
    box-shadow: none;
  }

  /* Avoid page breaks inside sections */
  .accordion,
  .flat-section,
  .timeline-step,
  .badge,
  .key-value-row,
  /* .key-value-row is display: contents inside a .field-list grid (see
     the Key-Value Row rules above) and generates no box there, so
     break-inside on it alone has no effect for the common case — avoid
     breaks inside each grid cell directly too. */
  .key-value-row__label,
  .key-value-row__value,
  .summary-card,
  .donut-chart,
  .gauge,
  .score-bar,
  .callout,
  .stat-card,
  .checklist__item,
  .cert-badge,
  .circularity-grid__cell,
  .supply-timeline__node {
    break-inside: avoid;
  }

  /* Charts: keep ink and shadows print-clean */
  .summary-card,
  .cert-badge,
  .donut-chart__svg,
  .gauge__svg,
  .circularity-grid__cell,
  .material-row {
    box-shadow: none;
    filter: none;
  }
  .donut-chart__segment,
  .gauge__fill,
  .score-bar__fill,
  .status-dot,
  .summary-card::before,
  .supply-timeline__node--highlight::before {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Blurred preview values print as a neutral grey block */
  .blurred-field__text {
    filter: none;
    color: transparent;
    background: #d1d8e0;
    border-radius: 4px;
  }

  /* Links show URL */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75rem;
    color: #666;
  }
}

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