/* ============================================================
   Guide readability pass — 2026-09-29
   Additive only: new components + narrowly-scoped overrides for
   long-form guide articles. Nothing here removes or rewrites an
   existing rule; it is loaded last (linked right before </head>
   on each guide page) so equal-specificity overrides below win.
   Uses tokens from tokens.css only — no new colour values.
   To fully undo this pass: delete this file, guide-enhancements.js,
   and remove the two <link>/<script> lines that reference them.
   ============================================================ */

/* ---- 5. Typography polish ---------------------------------- */
.article p { font-size: 16px; line-height: 1.75; }
.lead p { font-size: 18px; line-height: 1.7; color: var(--cream); }

/* ---- 5. Table polish (applies to all three table variants) - */
.sme-table tr:nth-child(even) td,
.scope-table tr:nth-child(even) td,
.compare-table tr:nth-child(even) td {
  background: rgba(150,136,90,0.035);
}
.sme-table tr:hover td,
.scope-table tr:hover td {
  background: rgba(150,136,90,0.09);
}
/* Horizontal scroll does not work for a table with a long-sentence column
   (e.g. the timeline guides' "what happened" cell): once a paragraph wraps
   to 6-8 lines, a horizontally-scrolled view only ever shows a cropped
   slice of each line, so every line reads as a fragment. A sticky label
   column + scroll-hint (tried first) fixes short-label tables but cannot
   fix that — the paragraph itself is still unreadable mid-scroll. The
   actual fix: stop scrolling tables sideways on mobile at all. Each row
   becomes a full-width stacked card; guide-enhancements.js injects a
   data-th attribute per cell (read from that column's <th>) so the
   column label still shows above each value once headers aren't a row
   of their own anymore. */
@media (max-width: 640px) {
  .table-scroll { overflow-x: visible; }
  .sme-table, .scope-table, .compare-table {
    display: block;
    width: 100%;
    min-width: 0;
  }
  /* Several guides carry their own one-off mobile min-width bump on top of
     the base 520px (e.g. .sme-table.matrix{min-width:760px}, or a separate
     .table-scroll .scope-table{min-width:600-640px} block) — each one more
     specific than a plain .sme-table rule, so each would silently re-widen
     the table past the stacked layout and get clipped by the page's own
     overflow-x:hidden with no way to scroll back to the hidden part. Rather
     than find every variant, !important beats all of them at once. */
  .sme-table, .scope-table, .compare-table,
  .table-scroll .sme-table, .table-scroll .scope-table, .table-scroll .compare-table {
    min-width: 0 !important;
  }
  .sme-table tr, .scope-table tr, .compare-table tr {
    display: block;
    border: 1px solid var(--bd-cream);
    margin-bottom: 14px;
  }
  .sme-table tr:first-child, .scope-table tr:first-child, .compare-table tr:first-child {
    display: none; /* the plain header row — labels are reinjected per-cell below instead */
  }
  .sme-table td, .scope-table td, .compare-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-bottom: none;
    padding: 10px 16px;
    white-space: normal;
  }
  .sme-table td:last-child, .scope-table td:last-child, .compare-table td:last-child {
    padding-bottom: 14px;
  }
  .sme-table td[data-th]::before,
  .scope-table td[data-th]::before,
  .compare-table td[data-th]::before {
    content: attr(data-th);
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 5px;
  }
  /* The row-label cell (first column — a date, a category name, a law) is
     what identifies the card; showing it as just another small-labelled
     fact made every card read as a flat list of five equal attributes
     with no title. Give it its own treatment instead: bigger, serif, an
     accent background, and no repeated mono label above it — the value
     alone reads as the card's heading the way "Micro" or "10 October
     2026" already reads as an identity, not a fact. */
  .sme-table td:first-child, .scope-table td:first-child, .compare-table td:first-child {
    min-width: 0 !important; /* .scope-table td:first-child{min-width:150px} in several guides */
    white-space: normal;
    background: rgba(150,136,90,0.06);
    border-bottom: 1px solid var(--bd-cream);
    padding: 14px 16px;
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 400;
    color: var(--cream);
  }
  .sme-table td:first-child[data-th]::before,
  .scope-table td:first-child[data-th]::before,
  .compare-table td:first-child[data-th]::before {
    display: none;
  }
}

/* ---- 1. "On this page" jump-link box ------------------------ */
.guide-toc {
  background: var(--surface);
  border: 1px solid var(--bd-cream);
  border-left: 3px solid var(--gold);
  padding: 26px 30px;
  margin: 8px 0 48px;
}
.guide-toc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.guide-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: 32px;
}
.guide-toc li {
  margin: 0 0 11px;
  break-inside: avoid;
}
.guide-toc li:last-child { margin-bottom: 0; }
.guide-toc a {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cream-2);
  text-decoration: none;
}
.guide-toc a::before {
  content: '\2192';
  flex: 0 0 auto;
  color: var(--gold);
}
.guide-toc a:hover { color: var(--gold-lt); }
@media (min-width: 640px) {
  .guide-toc ol { columns: 2; }
}
@media (max-width: 768px) {
  .guide-toc { padding: 20px 22px; margin: 4px 0 36px; }
}

/* ---- 2. Callout variant — editorial/context note ------------
   Default .reg-callout (gold) stays reserved for verbatim law
   citations. .is-note is for framing/caveat asides that aren't
   quoting a specific article — same shape, neutral accent so the
   two read as visually distinct at a glance. */
.reg-callout.is-note {
  border-left-color: var(--cream-2);
  background: rgba(192,188,176,0.04);
}
.reg-callout.is-note .reg-eyebrow { color: var(--cream-2); }

/* ---- 3. Figure/diagram shell (shared across all guides,
   previously duplicated inline in only 3 of 25 files) --------- */
.guide-figure { margin: 2rem 0; }
.guide-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--bd); }
.guide-figure figcaption { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--muted); line-height: 1.6; margin-top: 0.7rem; }
.guide-diagram svg { display: block; width: 100%; height: auto; border: 1px solid var(--bd); background: rgba(46,41,34,0.55); }
/* Below ~640px a full-width diagram shrinks its labels past legibility —
   same fix already used for wide tables: hold a minimum width and let the
   figure scroll horizontally instead of the SVG scaling text illegibly small. */
@media (max-width: 640px) {
  .guide-diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .guide-diagram svg { width: auto; min-width: 820px; }
  /* Pure-CSS scroll hint — without this, a diagram cut off mid-label at the
     viewport edge gives no sign the rest is reachable by scrolling (same
     silent-clipping problem already fixed for wide tables, applied here to
     SVG diagrams). Added as generated content, not HTML, so this file stays
     fully self-contained and revertible on its own. */
  .guide-diagram::after {
    content: '\2194 scroll to see full diagram';
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(46,41,34,0.9);
    padding: 6px 10px;
    margin-top: 6px;
    position: sticky;
    left: 0;
  }
}

/* ---- 4. Key-facts stat strip --------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bd-cream);
  border: 1px solid var(--bd-cream);
  margin: 32px 0 40px;
}
.stat-tile { background: var(--surface); padding: 24px 22px; }
.stat-tile .stat-value {
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: 1.15;
  color: var(--gold-lt);
  margin-bottom: 8px;
}
.stat-tile .stat-label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--cream-2);
}
@media (max-width: 640px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-tile { padding: 20px; }
}

/* ---- Diagram components, 2026-09-29 — real HTML/CSS, not SVG-shrunk
   text. Each fact-checked against its source article before shipping. */

/* Tiered fallback cascade (e.g. non-eu-brands: who can be the EU party) */
.cascade { border: 1px solid var(--bd-cream); padding: 28px 28px 22px; margin: 32px 0 40px; }
.cascade-tier { display: flex; gap: 20px; align-items: flex-start; }
.tier-num { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: rgba(150,136,90,0.08); border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 19px; font-weight: 600; color: var(--gold-lt); }
.tier-body { padding-top: 2px; }
.tier-body h3 { font-size: 16px; color: var(--cream); margin-bottom: 5px; font-weight: 600; }
.tier-body p { font-size: 14px; color: var(--cream-2); line-height: 1.55; }
.tier-body .art { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--gold-lt); margin-top: 6px; }
.tier-connector { display: flex; align-items: center; gap: 10px; padding: 10px 0 10px 22px; }
.tier-connector .line { width: 1px; height: 20px; background: var(--gold); opacity: 0.5; }
.tier-connector span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cascade-excluded { margin-top: 18px; padding: 18px 22px; border: 1px dashed var(--muted); opacity: 0.9; }
.cascade-excluded p:first-child { font-size: 15px; font-weight: 600; color: var(--cream-2); margin-bottom: 5px; }
.cascade-excluded p:last-child { font-size: 13px; color: var(--muted); line-height: 1.5; }
@media (max-width: 600px) { .cascade { padding: 20px; } .cascade-tier { gap: 14px; } .tier-num { width: 38px; height: 38px; font-size: 16px; } }

/* Branching scope test (e.g. fashion-products-in-scope) */
.scope-funnel { border: 1px solid var(--bd-cream); padding: 28px; margin: 32px 0 40px; }
.funnel-node { max-width: 280px; margin: 0 auto; text-align: center; padding: 16px 20px; background: rgba(150,136,90,0.08); border: 1px solid var(--gold); font-size: 15px; font-weight: 600; color: var(--cream); }
.funnel-line { width: 1px; height: 24px; background: var(--gold); margin: 0 auto; opacity: 0.5; }
.funnel-gate { display: grid; grid-template-columns: 1fr 210px; gap: 18px; align-items: stretch; }
.gate-q { padding: 18px 22px; border: 1px solid var(--gold); background: rgba(46,41,34,0.4); font-size: 14.5px; color: var(--cream); display: flex; flex-direction: column; justify-content: center; }
.gate-q .yes { font-family: var(--font-mono); font-size: 11px; color: var(--gold-lt); margin-top: 10px; letter-spacing: .04em; }
.gate-out { padding: 14px 18px; border: 1px dashed var(--muted); display: flex; flex-direction: column; justify-content: center; }
.gate-out .tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--cream-2); margin-bottom: 5px; }
.gate-out p { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.funnel-result { max-width: 280px; margin: 24px auto 0; text-align: center; padding: 18px 20px; background: rgba(150,136,90,0.14); border: 1.5px solid var(--gold); }
.funnel-result .tag { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--gold-lt); }
.funnel-result p { font-size: 13px; color: var(--cream-2); margin-top: 6px; }
.grey-zone { margin-top: 28px; padding: 20px 24px; border: 1px dashed #d97757; }
.grey-zone .lead-tag { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.grey-zone .tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #d97757; display: block; margin-bottom: 8px; }
.grey-zone p { font-size: 13.5px; color: var(--cream-2); line-height: 1.5; }
@media (max-width: 600px) { .scope-funnel { padding: 18px; } .funnel-gate { grid-template-columns: 1fr; } .gate-out { border-left: 1px dashed var(--muted); border-top: none; } }

/* Role map (e.g. online-selling-marketplaces: who must do what) */
.role-map { margin: 32px 0 40px; }
.role-caption { text-align: center; padding: 18px 20px; border: 1px solid var(--gold); background: rgba(150,136,90,0.08); margin-bottom: 1px; }
.role-caption .t { font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--gold-lt); }
.role-caption .art { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; font-family: var(--font-mono); letter-spacing: .04em; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bd-cream); border: 1px solid var(--bd-cream); border-top: none; }
.role-card { background: var(--surface); padding: 22px 24px; }
.role-card h3 { font-size: 15px; color: var(--cream); margin-bottom: 8px; font-weight: 600; }
.role-card p { font-size: 13.5px; color: var(--cream-2); line-height: 1.55; margin-bottom: 10px; }
.role-card .art { font-family: var(--font-mono); font-size: 11px; color: var(--gold-lt); }
.role-grid > .role-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 600px) {
  .role-grid { grid-template-columns: 1fr; }
  .role-grid > .role-card:last-child:nth-child(odd) { grid-column: auto; }
}

/* Definition branch (e.g. substances-of-concern: 4 criteria) */
.def-branch { margin: 32px 0 40px; }
.def-caption { text-align: center; padding: 16px 20px; border: 1px solid #d97757; background: rgba(217,119,87,0.06); margin-bottom: 24px; }
.def-caption .tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #d97757; }
.def-caption p { font-size: 13px; color: var(--cream-2); margin-top: 7px; }
.def-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--bd-cream); border: 1px solid var(--bd-cream); }
.def-card { background: var(--surface); padding: 22px 16px; text-align: center; }
.def-card .letter { font-family: var(--font-serif); font-size: 26px; color: var(--gold-lt); margin-bottom: 10px; }
.def-card h3 { font-size: 13.5px; color: var(--cream); margin-bottom: 8px; font-weight: 600; }
.def-card p { font-size: 11.5px; color: var(--cream-2); line-height: 1.5; }
@media (max-width: 600px) { .def-grid { grid-template-columns: 1fr 1fr; } }

/* Status stamp contrast (e.g. green-claims-directive-vs-empco) */
.stamp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bd-cream); border: 1px solid var(--bd-cream); margin: 32px 0 40px; }
.stamp-card { background: var(--surface); padding: 36px 28px; text-align: center; }
.stamp-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.stamp { display: inline-flex; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; border: 3px solid; font-family: var(--font-mono); font-weight: 700; font-size: 17px; letter-spacing: .06em; margin-bottom: 20px; transform: rotate(-6deg); }
.stamp.live { border-color: var(--gold); color: var(--gold-lt); box-shadow: 0 0 0 4px rgba(150,136,90,0.12) inset; }
.stamp.blocked { border-color: var(--ink-stamp); color: var(--ink-stamp); box-shadow: 0 0 0 4px rgba(139,30,30,0.12) inset; transform: rotate(5deg); }
.stamp.pending { border-color: var(--muted); color: var(--cream-2); box-shadow: 0 0 0 4px rgba(122,119,112,0.12) inset; transform: rotate(5deg); }
.stamp-detail { font-size: 14px; color: var(--cream-2); line-height: 1.6; max-width: 230px; margin: 0 auto; }
.stamp-detail strong { color: var(--cream); }
@media (max-width: 600px) { .stamp-grid { grid-template-columns: 1fr; } }

/* Obligation × path matrix (e.g. compliance-cost-breakdown: DIY vs. outsourced) */
.matrix { border: 1px solid var(--bd-cream); margin: 32px 0 40px; }
.matrix-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr; border-bottom: 1px solid var(--bd-cream); }
.matrix-row:last-child { border-bottom: none; }
.matrix-row.head { background: rgba(150,136,90,0.05); }
.matrix-cell { padding: 16px 18px; font-size: 13.5px; line-height: 1.5; color: var(--cream-2); border-left: 1px solid var(--bd-cream); }
.matrix-cell:first-child { border-left: none; color: var(--cream); font-weight: 600; font-size: 14.5px; display: flex; flex-direction: column; justify-content: center; }
.matrix-cell:first-child .art { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--muted); margin-top: 3px; }
.matrix-row.head .matrix-cell { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.matrix-cell .mark { color: var(--gold-lt); font-weight: 700; margin-right: 6px; }
.cell-label { display: none; }
@media (max-width: 600px) {
  .matrix-row { grid-template-columns: 1fr; }
  .matrix-cell { border-left: none; border-top: 1px solid var(--bd-cream); }
  .matrix-cell:first-child { border-top: none; }
  .matrix-row.head { display: none; }
  .cell-label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
}