/**
 * Copyright (c) Opendpp UAB.
 * SPDX-License-Identifier: LicenseRef-OpenDPP-Proprietary
 */
/*
 * OpenDPP public passport-viewer design system — "Modern SaaS" (Direction B).
 *
 * The single external, cacheable stylesheet for the PUBLIC product-passport surface:
 * the SKU/type passport page (src/views/passport.ts), the per-unit page (src/views/unit.ts)
 * and the friendly not-found page. Authored here, served from /public/css with a content-hash
 * query (src/views/marketing/assets.ts → PASSPORT_CSS_HREF) and linked once per page.
 *
 * Reads the shared website tokens (public/css/tokens.generated.css, generated from portal/tokens/ and
 * linked ahead of this sheet), so the resolver surface is visually identical to the brand, but is kept
 * independent of the marketing site so the heavy passport-only components never bloat marketing.css.
 * Its small radius and content width are the passport's own (--radius-sm-passport, --maxw-passport).
 *
 * Dynamic per-page bits stay in a tiny nonced <style> on the page: --cat-badge (category gradient)
 * and the tenant brand overrides (renderCustomBrandingStyles → --accent-primary / --accent-blue).
 */

  /* Runtime hooks, not design tokens — the tokens come from tokens.generated.css, linked first. These
   * three are re-pointed per page: a tenant brand overrides the two accents (renderCustomBrandingStyles,
   * !important) and each passport sets its category's badge gradient, so they need a declared default
   * here, read from the shared tokens rather than restated. */
  :root {
    --accent-primary: var(--emerald);
    --accent-blue: var(--blue-600);
    --cat-badge: var(--cat-badge-default);
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background:
      radial-gradient(1100px 520px at 12% -8%, var(--mint), transparent 60%),
      radial-gradient(1000px 520px at 92% -12%, var(--sky), transparent 60%),
      var(--slate-50);
    background-attachment: fixed;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    overflow-x: hidden;
  }
  h1, h2, h3, h4 { font-family: "Outfit", sans-serif; line-height: 1.15; margin: 0; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; }
  code, pre, .mono { font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace; }

  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 100;
  }
  .skip-link:focus { left: 0; }

  .grad-text {
    background: var(--grad);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

  /* ---------- Top bar ---------- */
  .pp-topbar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--white) 82%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--slate-200) 70%, transparent);
  }
  .pp-topbar-inner {
    max-width: var(--maxw-passport); margin: 0 auto; padding: 0 24px;
    height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  }
  .pp-brand {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: "Outfit", sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
  }
  .pp-brand .mark {
    width: 30px; height: 30px; border-radius: 9px; background: var(--grad);
    display: grid; place-items: center; box-shadow: 0 4px 10px color-mix(in srgb, var(--emerald) 30%, transparent);
  }
  .pp-topbar-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--slate);
  }
  .pp-topbar-tag .eu-flag {
    width: 20px; height: 14px; border-radius: 3px;
    background: var(--eu-blue); color: var(--eu-yellow); font-size: 9px; line-height: 14px; text-align: center;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--eu-yellow) 50%, transparent);
  }

  /* ---------- Container ---------- */
  .passport-container {
    max-width: var(--maxw-passport); margin: 0 auto; padding: 32px 24px 64px;
  }

  /* ---------- Banners ---------- */
  .demo-note {
    display: flex; align-items: center; gap: 0.6rem;
    margin-bottom: 1.25rem; padding: 0.75rem 1.1rem; border-radius: var(--radius-sm-passport);
    background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber);
    font-weight: 600; font-size: 0.9rem;
  }
  .recall-banner {
    display: flex; align-items: flex-start; gap: 1rem;
    margin-bottom: 1.5rem; padding: 1.1rem 1.35rem;
    border-radius: var(--radius-md);
    background: var(--rose-bg); border: 1px solid var(--rose-border);
    box-shadow: var(--shadow-md);
    animation: pulse-border 2.4s infinite ease-in-out;
  }
  .recall-icon { font-size: 1.6rem; line-height: 1; }
  .recall-content h2 {
    font-size: 1.05rem; color: var(--rose); letter-spacing: 0.01em; margin: 0 0 0.2rem;
  }
  .recall-content p { margin: 0; font-size: 0.9rem; color: var(--red-900); }
  .recall-banner.decommissioned {
    background: var(--slate-100); border-color: var(--slate-300); animation: none;
  }
  .recall-banner.decommissioned .recall-content h2 { color: var(--slate); }
  .recall-banner.decommissioned .recall-content p { color: var(--slate); }

  /* ---------- Hero ---------- */
  .pp-hero {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: var(--white); border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: 26px 28px; margin-bottom: 22px;
  }
  .pp-hero-main { min-width: 0; flex: 1 1 380px; }
  .pp-kicker {
    font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    background: var(--grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .pp-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .tenant-logo { max-height: 34px; max-width: 150px; object-fit: contain; }
  .category-badge {
    display: inline-flex; align-items: center;
    padding: 5px 13px; border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: capitalize;
    color: var(--white); background: var(--cat-badge);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--indigo-600) 22%, transparent);
  }
  .status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .status-pill.is-active { color: var(--text-brand); background: var(--mint); border: 1px solid var(--emerald-200); }
  .status-pill.is-recalled { color: var(--rose); background: var(--rose-bg); border: 1px solid var(--rose-border); }
  .status-pill.is-decommissioned { color: var(--slate); background: var(--slate-100); border: 1px solid var(--slate-300); }
  .pp-title {
    font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 0;
    word-break: break-word;
  }
  .pp-meta { margin: 8px 0 0; font-size: 13.5px; color: var(--slate); }
  .pp-meta strong { color: var(--ink); font-weight: 700; }
  .pp-meta.access-request-line { margin-top: 10px; }

  .digital-link-badge {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 10px 16px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600;
    background: var(--white); color: var(--ink);
    border: 1px solid var(--slate-200); box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .digital-link-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--slate-300); }
  .digital-link-badge svg { color: var(--accent-blue); }

  /* ---------- Tabs ---------- */
  .passport-tabs-nav {
    display: flex; gap: 6px; flex-wrap: wrap;
    border-bottom: 1px solid var(--slate-200);
    margin-bottom: 22px;
  }
  .passport-tab-btn {
    background: transparent; border: none; border-bottom: 2px solid transparent;
    color: var(--slate); padding: 12px 16px 13px;
    font-family: "Plus Jakarta Sans", sans-serif; font-size: 14.5px; font-weight: 600;
    cursor: pointer; transition: color .15s ease, border-color .15s ease;
    margin-bottom: -1px;
  }
  .passport-tab-btn:hover { color: var(--ink); }
  .passport-tab-btn.active { color: var(--ink); border-bottom-color: var(--accent-primary); }
  .passport-tab-pane { display: none; }
  .passport-tab-pane.active { display: block; animation: fade-in .25s ease; }

  /* ---------- Grid + cards ---------- */
  .passport-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .grid-col-span-2 { grid-column: span 2; }
  .passport-grid > section { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

  .info-card {
    background: var(--white); border: 1px solid var(--slate-200);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    padding: 20px 22px;
  }
  .info-card h2 {
    font-size: 16px; font-weight: 700; margin: 0 0 6px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  .verified-badge {
    font-size: 11px; font-weight: 700; color: var(--text-brand);
    background: var(--mint); border: 1px solid var(--emerald-200); padding: 3px 9px; border-radius: 999px;
    text-transform: none; letter-spacing: 0;
  }
  .info-card ul { list-style: none; margin: 6px 0 0; padding: 0; }
  .info-card ul li {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    padding: 11px 0; border-top: 1px solid var(--slate-100);
    font-size: 13.5px;
  }
  .info-card ul li:first-child { border-top: none; }
  .info-card ul li strong { color: var(--slate); font-weight: 600; flex-shrink: 0; }
  .info-card ul li > span,
  .info-card ul li > div { text-align: right; font-weight: 600; color: var(--ink); min-width: 0; word-break: break-word; }
  .info-card ul li > .textile-care { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
  .info-card ul li > .cosmetic-ingredients { font-size: 0.85rem; margin-top: 0.25rem; }
  .cap-text { text-transform: capitalize; }
  .warning-text { color: var(--amber); }
  .no-data { color: var(--slate-400); font-style: italic; font-size: 13px; margin: 8px 0 0; }
  .glass-link {
    color: var(--accent-blue); font-weight: 600; border-bottom: 1px solid transparent;
    transition: border-color .15s ease;
  }
  .glass-link:hover { border-bottom-color: var(--accent-blue); }

  /* ---------- Public forms (legitimate-interest unlock + request-access) ----------
     Light-theme form controls matching the marketing design tokens. Used by the
     restricted-data unlock form (src/views/unit.ts) and the request-access page
     (src/views/request-access.ts). */
  .form-label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--slate); }
  .form-input, .form-textarea {
    width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--slate-300);
    background: var(--white); color: var(--ink); font: inherit; font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .form-input::placeholder, .form-textarea::placeholder { color: var(--slate-400); }
  .form-input:focus, .form-textarea:focus {
    outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 15%, transparent);
  }
  .form-textarea { min-height: 110px; resize: vertical; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px; border: 1px solid var(--slate-300);
    background: var(--white); color: var(--ink); font: inherit; font-size: 14px; font-weight: 700;
    cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm);
    transition: filter .15s ease, transform .05s ease;
  }
  .btn:hover { filter: brightness(.97); }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--grad); border-color: transparent; color: var(--white); }
  .btn-primary:hover { filter: brightness(1.06); }
  .grant-unlock-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
  .grant-unlock-form .form-input { flex: 1; min-width: 240px; width: auto; }
  .form-honeypot { position: absolute; left: -5000px; }
  .request-access-submit { margin-top: 16px; }
  .form-banner { border-radius: 12px; border: 1px solid var(--slate-200); padding: 14px 16px; margin: 14px 0; }
  .form-banner.is-success { background: var(--mint); border-color: var(--emerald-200); color: var(--text-brand); }
  .form-banner.is-error { background: var(--rose-bg); border-color: var(--rose-border); color: var(--rose); }

  /* ---------- Material composition ---------- */
  .material-list { margin-top: 0.5rem; }
  .material-row {
    display: grid; grid-template-columns: minmax(90px, 1fr) 2fr auto; align-items: center; gap: 12px;
    padding: 7px 0;
  }
  .material-name { font-size: 13px; font-weight: 600; color: var(--ink); }
  .material-bar-container { height: 9px; border-radius: 999px; background: var(--slate-100); overflow: hidden; }
  .material-bar { height: 100%; border-radius: 999px; background: var(--grad); }
  .material-percentage { font-size: 12.5px; font-weight: 700; color: var(--slate); min-width: 38px; text-align: right; }

  /* ---------- Carbon footprint ---------- */
  .carbon-score-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
  .carbon-main-score {
    grid-column: span 2; display: flex; flex-direction: column; gap: 2px;
    padding: 16px 18px; border-radius: var(--radius-sm-passport);
    background: linear-gradient(135deg, var(--mint), var(--sky)); border: 1px solid var(--emerald-100);
  }
  .carbon-main-score > span:first-child { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--slate); }
  .carbon-val { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 30px; color: var(--text-brand); }
  .carbon-unit { font-size: 0.85rem; color: var(--slate); }
  .carbon-scope-box { padding: 12px 14px; border-radius: var(--radius-sm-passport); background: var(--slate-50); border: 1px solid var(--slate-100); }
  /* Spans both columns at every width — the 600px breakpoint narrows the board but not this box. */
  .carbon-scope-box.is-wide { grid-column: span 2; }
  .carbon-scope-label { font-size: 11px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.03em; }
  .carbon-scope-val { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 16px; margin-top: 3px; }

  /* ---------- Compliance ---------- */
  .compliance-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; margin-top: 8px; }
  .seal-block { margin-top: 12px; }
  .seal-entry { width: 100%; }
  .seal-entry > strong { display: block; margin-bottom: 6px; }
  .seal-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    color: var(--text-brand); background: var(--mint); border: 1px solid var(--emerald-200);
  }
  .code-mini {
    margin-top: 8px; font-size: 11.5px; color: var(--slate);
    background: var(--slate-50); border: 1px solid var(--slate-200); border-radius: 10px;
    padding: 10px 12px; max-height: 92px; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
  }
  .sync-button {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 14px;
    padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    background: var(--grad); color: var(--white);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--emerald) 26%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .sync-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 26px color-mix(in srgb, var(--emerald) 32%, transparent); }
  .sync-button:disabled { opacity: 0.6; cursor: progress; }
  .cert-item {
    padding: 11px 13px; border-radius: 10px; background: var(--slate-50); border: 1px solid var(--slate-100);
    margin-bottom: 8px; font-size: 13px;
  }
  .cert-item strong { display: block; color: var(--ink); font-size: 13.5px; }
  .cert-item div { color: var(--slate); font-size: 12px; margin-top: 2px; }
  .compliance-side-label { display: block; font-size: 12px; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 10px; }
  .qr-panel {
    margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--slate-200);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  }
  .qr-panel .compliance-side-label { align-self: stretch; text-align: center; }
  .qr-panel .qrcode { padding: 10px; background: var(--white); border: 1px solid var(--slate-200); border-radius: 14px; display: inline-block; line-height: 0; }
  /* 168px, not the old 140: the symbol now carries its 4-module quiet zone, so 49 modules occupy the
     box where 41 used to (140 x 49/41) and one data module stays the same size on screen. */
  .qr-panel .qrcode svg { display: block; width: 168px; height: 168px; }
  .qr-panel .qr-uri { font-size: 12px; color: var(--slate); word-break: break-all; font-family: ui-monospace, monospace; }

  /* ---------- Code viewer (AAS / JSON-LD) ---------- */
  .dev-note {
    font-size: 13px; color: var(--slate); margin: 0 0 14px;
    background: var(--sky); border: 1px solid var(--blue-200); border-radius: 10px; padding: 10px 14px;
  }
  .code-viewer-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-bottom: 12px;
  }
  .code-viewer-header > span { font-weight: 700; font-size: 14px; color: var(--ink); }
  .code-toggle-group { display: flex; gap: 6px; }
  .code-toggle-btn {
    background: var(--white); border: 1px solid var(--slate-200); color: var(--slate);
    padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 999px;
    transition: all .15s ease;
  }
  .code-toggle-btn:hover { border-color: var(--slate-300); }
  .code-toggle-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .code-block {
    background: var(--ink); color: var(--code-text); border: 1px solid var(--slate-800); border-radius: var(--radius-sm-passport);
    padding: 18px; overflow: auto; max-height: 560px;
    font-family: "Fira Code", ui-monospace, monospace; font-size: 12.5px; line-height: 1.55;
    white-space: pre; tab-size: 2;
  }
  .code-block code { white-space: pre; }

  /* ---------- GINETEX care icons ---------- */
  .ginetex-icons {
    display: inline-flex; gap: 0.5rem; align-items: center;
    background: var(--slate-50); padding: 0.4rem 0.7rem; border-radius: 10px;
    border: 1px solid var(--slate-200); margin-top: 0.5rem;
  }
  .care-icon { vertical-align: middle; margin-right: 0.25rem; }
  .care-icon.is-wash { color: var(--blue-400); }
  .care-icon.is-dry { color: var(--emerald-400); }
  .care-icon.is-bleach { color: var(--pink-400); }
  .care-icon.is-iron { color: var(--rose-400); }
  .care-icon.is-neutral { color: var(--slate-500); }

  /* ---------- Serialized units ---------- */
  .units-section {
    margin: 22px 0; padding: 22px 24px;
    background: var(--white); border: 1px solid var(--slate-200);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  }
  .units-section h2 { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
  .units-section h2 .units-count { font-weight: 500; font-size: 13px; color: var(--slate); }
  .units-section .units-lead { font-size: 13px; color: var(--slate); margin: 0 0 14px; }
  .unit-list { display: flex; flex-direction: column; gap: 8px; }
  .unit-row { border: 1px solid var(--slate-200); border-radius: 12px; overflow: hidden; background: var(--white); }
  .unit-toggle {
    width: 100%; display: flex; align-items: center; gap: 12px;
    background: var(--white); border: none; cursor: pointer; text-align: left;
    padding: 12px 16px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 13.5px; color: var(--ink);
    transition: background .15s ease;
  }
  .unit-toggle:hover { background: var(--slate-50); }
  .unit-toggle .unit-serial { font-weight: 600; }
  .unit-status-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
  .unit-status-chip.is-active { color: var(--text-brand); background: var(--mint); border: 1px solid var(--emerald-200); }
  .unit-status-chip.is-decommissioned { color: var(--slate); background: var(--slate-100); border: 1px solid var(--slate-300); }
  .unit-chevron { margin-left: auto; color: var(--slate-400); transition: transform .2s ease; }
  .unit-toggle.is-open .unit-chevron { transform: rotate(180deg); }
  .unit-detail {
    padding: 4px 16px 16px; border-top: 1px solid var(--slate-100);
  }
  /* Scope display to :not([hidden]) so the `hidden` attribute (toggled in JS) actually collapses
     the panel — a bare `display:flex` here would override the UA [hidden]{display:none} rule. */
  .unit-detail:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
  .unit-current { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; padding-top: 12px; }
  .unit-current > div { display: flex; flex-direction: column; gap: 2px; }
  .unit-current .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); font-weight: 600; }
  .unit-current .v { font-size: 14px; font-weight: 700; font-family: "Outfit", sans-serif; }
  .unit-history-wrap { overflow-x: auto; }
  .unit-history-tbl { font-size: 12.5px; }
  .unit-history-tbl th, .unit-history-tbl td { padding: 6px 10px; }
  .unit-permalink { font-size: 12.5px; align-self: flex-start; }
  .doc-sample-tag {
    display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-border);
  }

  /* ---------- Brand enrichment ---------- */
  .enrichment {
    margin: 0 0 22px; padding: 22px 24px;
    background: var(--white); border: 1px solid var(--slate-200);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  }
  .enrichment h2 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }
  .enrichment p { color: var(--slate); white-space: pre-line; margin: 0 0 14px; }
  .enrichment-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
  .enrichment-figure { margin: 0; }
  .enrichment-gallery img { width: 100%; height: 140px; object-fit: cover; border-radius: 12px; border: 1px solid var(--slate-200); }
  .enrichment-gallery figcaption { margin-top: 6px; font-size: 12px; color: var(--slate); }
  .enrichment-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .enrichment-links a {
    display: inline-block; padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--slate-200); font-size: 13px; color: var(--ink); background: var(--white);
  }
  .enrichment-links a:hover { border-color: var(--slate-300); }

  /* ---------- Supply-chain pedigree graph ---------- */
  .lineage-graph-container { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
  .graph-viewport {
    position: relative; height: 540px; overflow: auto;
    background:
      radial-gradient(circle, color-mix(in srgb, var(--slate-400) 18%, transparent) 1px, transparent 1px) 0 0 / 22px 22px,
      var(--white);
    border: 1px solid var(--slate-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  }
  .graph-legend {
    position: sticky; top: 0; z-index: 2;
    display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
    padding: 10px 14px; font-size: 11.5px; color: var(--slate);
    background: color-mix(in srgb, var(--white) 90%, transparent); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--slate-100);
  }
  .legend-item { display: inline-flex; align-items: center; gap: 6px; }
  .legend-dot { width: 9px; height: 9px; border-radius: 999px; }
  .legend-dot.ok { background: var(--emerald); }
  .legend-dot.warn { background: var(--rose-600); }
  .graph-details-panel {
    position: sticky; top: 84px;
    background: var(--white); border: 1px solid var(--slate-200); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm); padding: 18px 20px;
    display: flex; flex-direction: column; gap: 12px;
    max-height: 540px; overflow-y: auto;
  }
  .graph-panel-title { font-size: 15px; font-weight: 700; color: var(--ink); }
  .graph-panel-hint { font-size: 13px; color: var(--slate); margin: 0; }
  .graph-node-heading { display: flex; align-items: center; gap: 8px; }
  .graph-comp-icon.is-ok, .graph-verify-status.is-ok { color: var(--text-brand); }
  .graph-comp-icon.is-warn, .graph-verify-status.is-warn { color: var(--rose); }

  .graph-node { cursor: pointer; transition: filter .2s ease; }
  .graph-node:hover { filter: brightness(0.985) drop-shadow(0 4px 10px color-mix(in srgb, var(--ink) 12%, transparent)); }
  .graph-node.active .node-card { stroke: var(--accent-primary); stroke-width: 2px; }
  .graph-link { fill: none; stroke: var(--slate-300); stroke-width: 2px; transition: stroke .2s ease; }
  .graph-link.active { stroke: var(--accent-primary); stroke-width: 2.5px; }

  .detail-card { background: var(--slate-50); border: 1px solid var(--slate-100); border-radius: 10px; padding: 11px 13px; }
  .detail-card strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); margin-bottom: 3px; }
  .detail-card span { font-size: 13px; color: var(--ink); word-break: break-word; }
  .detail-card .graph-verify-status { font-weight: 700; }
  .detail-card .graph-event-id { font-size: 11px; }
  .graph-epc-list { max-height: 120px; overflow-y: auto; margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
  .graph-epc {
    font-size: 11.5px; background: var(--white); border: 1px solid var(--slate-200); padding: 3px 7px;
    border-radius: 6px; color: var(--ink); word-break: break-all;
  }
  .cert-banner {
    display: flex; align-items: center; gap: 12px;
    background: var(--mint); border: 1px solid var(--emerald-200); border-radius: 12px; padding: 12px 14px;
  }
  .cert-banner.non-compliant { background: var(--amber-bg); border-color: var(--amber-border); }
  .cert-banner-icon { font-size: 1.25rem; }
  .cert-banner-text { font-size: 0.8rem; line-height: 1.3; color: var(--text-brand); }
  .cert-banner.non-compliant .cert-banner-text { color: var(--amber); }
  .cert-banner-did { margin-top: 2px; word-break: break-all; color: var(--emerald-deep); }
  .cert-banner-note { margin-top: 2px; }
  .graph-empty { padding: 40px; text-align: center; color: var(--slate); font-size: 14px; }
  .graph-empty .ge-icon { font-size: 2rem; display: block; margin-bottom: 10px; }

  /* ---------- Footer ---------- */
  .pp-footer { border-top: 1px solid var(--slate-200); background: var(--white); }
  .pp-footer-inner {
    max-width: var(--maxw-passport); margin: 0 auto; padding: 22px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--slate);
  }
  .pp-footer-left { display: flex; flex-direction: column; gap: 5px; }
  /* Underlined: a link inside a sentence must not be told apart by colour alone (WCAG 1.4.1). */
  .pp-footer-left a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; }
  .pp-footer .legal-links { display: flex; gap: 12px; flex-wrap: wrap; }
  /* The legal links read as plain links in the accent blue, not underlined like the footer's other links. */
  .pp-footer .legal-links a, .pp-footer .legal-links button[data-consent-open] { color: var(--accent-blue); text-decoration: none; }
  .pp-footer-right { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
  .pp-footer-right .eu-flag {
    width: 22px; height: 15px; border-radius: 3px; background: var(--eu-blue); color: var(--eu-yellow);
    font-size: 9px; line-height: 15px; text-align: center;
  }

  /* ---------- Not-found page ---------- */
  .notfound { min-height: 70vh; display: grid; place-items: center; padding: 48px 24px; }
  .notfound-card {
    max-width: 540px; width: 100%; text-align: center;
    background: var(--white); border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    padding: 44px 40px;
  }
  .notfound-icon {
    width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 20px;
    display: grid; place-items: center; font-size: 2.1rem;
    background: var(--amber-bg); border: 1px solid var(--amber-border);
  }
  .notfound-title { font-size: 24px; font-weight: 700; margin: 0 0 10px; }
  .notfound-msg { color: var(--slate); font-size: 15px; margin: 0 0 8px; }
  .notfound-id {
    display: inline-block; margin: 6px 0 22px; padding: 7px 13px; border-radius: 10px;
    background: var(--slate-50); border: 1px solid var(--slate-200);
    font-family: ui-monospace, monospace; font-size: 12.5px; color: var(--ink); word-break: break-all;
  }
  .notfound-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 14.5px;
    padding: 11px 22px; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .btn-grad { background: var(--grad); color: var(--white); box-shadow: 0 8px 20px color-mix(in srgb, var(--emerald) 26%, transparent); }
  .btn-grad:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in srgb, var(--emerald) 32%, transparent); }
  .btn-outline { background: var(--white); color: var(--ink); border-color: var(--slate-200); box-shadow: var(--shadow-sm); }
  .btn-outline:hover { border-color: var(--slate-300); transform: translateY(-2px); box-shadow: var(--shadow-md); }

  /* ---------- Per-unit battery page ---------- */
  .unit-hero {
    background: var(--white); border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    padding: 26px 28px; margin-bottom: 18px;
  }
  .unit-hero .pp-kicker { display: block; margin-bottom: 4px; }
  .pp-badges.unit-badges { margin-top: 8px; }
  .pp-meta.unit-sku-link { margin-top: 14px; }
  .pp-meta.unit-ceased-body { margin-top: 12px; }
  .pp-meta.unit-ceased-link { margin-top: 10px; }
  .pp-meta.request-access-intro { margin-top: 10px; }
  .unit-restricted-body { margin-top: 8px; }
  .unit-history-panel { margin-top: 8px; }
  .unit-serial { font-family: ui-monospace, monospace; color: var(--text-link); }
  .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 6px; }
  .kv-grid .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--slate); font-weight: 600; }
  .kv-grid.unit-lineage-grid { margin-top: 8px; }
  .kv-grid .v { font-size: 16px; font-weight: 700; font-family: "Outfit", sans-serif; margin-top: 2px; }
  /* An identifier is read to be copied, not admired: the display face and weight are wrong for one,
     and a URL that cannot break overflows the column instead of wrapping inside it. */
  .kv-record { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .kv-grid.kv-record { margin-top: 12px; }
  .info-card .record-intro { margin-top: 6px; font-size: 13.5px; }
  .kv-record .v-id { font-family: ui-monospace, monospace; font-size: 12.5px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
  .kv-record .v-exact { display: block; margin-top: 3px; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--slate); overflow-wrap: anywhere; }
  .muted { color: var(--slate); }
  .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .tbl th, .tbl td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--slate-100); }
  .tbl th { color: var(--slate); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
  .tbl tbody tr:hover td { background: var(--slate-50); }
  .note { font-size: 13px; color: var(--slate); margin-top: 22px; }

  /* ---------- Animations ---------- */
  @keyframes pulse-border {
    0%, 100% { box-shadow: var(--shadow-md); }
    50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose-600) 12%, transparent), var(--shadow-md); }
  }
  @keyframes blink-warning { from { opacity: 1; } to { opacity: 0.45; } }
  @keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

  /* ---------- Responsive ---------- */
  @media (max-width: 900px) {
    .passport-grid { grid-template-columns: 1fr; }
    .grid-col-span-2 { grid-column: span 1; }
    .compliance-grid { grid-template-columns: 1fr; }
    .lineage-graph-container { grid-template-columns: 1fr; }
    .graph-details-panel { position: static; max-height: none; }
  }
  @media (max-width: 600px) {
    .pp-hero { padding: 20px; }
    .pp-title { font-size: 24px; }
    .passport-container { padding: 22px 16px 48px; }
    .carbon-score-board { grid-template-columns: 1fr; }
    .carbon-main-score { grid-column: span 1; }
  }