/*
 * HSCodeMatch regulation news — footnotes + infographic figure.
 *
 * Loaded once for all articles instead of a <style> block per post. That is the
 * whole reason the infographic prompt is forbidden from emitting CSS: 507 unique
 * style blocks would be uncacheable, unreviewable, and would leak bare `body{}`
 * and `.card{}` selectors into the theme.
 *
 * Everything is scoped under .hsn-*. Colours and fonts come from the theme's own
 * Elementor globals, with the measured values as fallbacks, so this tracks the
 * site rather than competing with it.
 */

:root {
    --hsn-ink:    var(--e-global-color-primary,   #181D27);
    --hsn-accent: var(--e-global-color-secondary, #7A5AF8);
    --hsn-text:   var(--e-global-color-text,      #535862);
    --hsn-line:   rgba(24, 29, 39, .12);
    --hsn-wash:   rgba(122, 90, 248, .07);
    --hsn-warn:   #C2410C;
    --hsn-radius: 14px;
}

/* ── lede ─────────────────────────────────────────────────────────────── */

.hsn-lede {
    font-size: 1.18em;
    line-height: 1.6;
    color: var(--hsn-ink);
    font-weight: 500;
    border-left: 3px solid var(--hsn-accent);
    padding-left: 1em;
    margin-bottom: 1.6em;
}

/* ── inline citations ─────────────────────────────────────────────────── */

.hsn-cite {
    font-size: .7em;
    line-height: 0;
    vertical-align: super;
    white-space: nowrap;
    margin-left: .12em;
}
.hsn-cite a {
    color: var(--hsn-accent);
    text-decoration: none;
    font-weight: 600;
    padding: 0 .1em;
}
.hsn-cite a:hover,
.hsn-cite a:focus { text-decoration: underline; }
/* Highlight the footnote you just jumped to. */
.hsn-refs li:target { background: var(--hsn-wash); border-radius: 6px; }

/* ── source list ──────────────────────────────────────────────────────── */

/* Size and weight come from the theme's .wp-block-heading; only spacing here. */
.hsn-refs-title { margin-top: 2.4em; }

.hsn-refs {
    font-size: .9em;
    line-height: 1.55;
    color: var(--hsn-text);
    padding-left: 1.4em;
    border-top: 1px solid var(--hsn-line);
    padding-top: 1.1em;
}
.hsn-refs li { margin-bottom: .8em; padding: .2em .4em; }
.hsn-refs a { color: var(--hsn-ink); }
.hsn-refs__back { margin-right: .4em; text-decoration: none; color: var(--hsn-accent); }
.hsn-refs__url {
    display: block;
    font-size: .85em;
    color: var(--hsn-text);
    opacity: .75;
    word-break: break-all; /* long WTO directdoc URLs must not widen the page */
}

/* ── tables in the long-form answer ───────────────────────────────────── */

/* The answer pipeline emits comparison tables. They must scroll inside their own
   box — the page body must never scroll sideways on a phone. */
.hsn-table {
    overflow-x: auto;
    margin: 1.6em 0;
    border: 1px solid var(--hsn-line);
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
}
.hsn-table table {
    border-collapse: collapse;
    width: 100%;
    min-width: 480px;
    font-size: .92em;
    margin: 0;
}
.hsn-table th,
.hsn-table td {
    padding: .7em .9em;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--hsn-line);
}
.hsn-table thead th {
    background: rgba(24, 29, 39, .03);
    font-weight: 600;
    color: var(--hsn-ink);
    white-space: nowrap;
}
.hsn-table tbody tr:last-child td { border-bottom: 0; }

/* ── infographic figure ───────────────────────────────────────────────── */

/* Section headings inside the figure. The theme sizes h3/h4 for article body
   copy, which is far too loud for a caption-scale label inside a card. */
.hsn-fig h3:not(.hsn-fig__headline),
.hsn-fig h4 {
    font-size: .78em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hsn-text);
    margin: 0 0 .9em !important;
}
/* Fixed class vocabulary. The generator may only use these plus inline <svg>. */

.hsn-fig {
    margin: 2em 0;
    border: 1px solid var(--hsn-line);
    border-radius: var(--hsn-radius);
    overflow: hidden;
    background: #fff;
}
.hsn-fig > figcaption {
    font-size: .85em;
    color: var(--hsn-text);
    padding: .8em 1.2em;
    border-top: 1px solid var(--hsn-line);
    background: rgba(24, 29, 39, .02);
}

.hsn-fig__hero { background: var(--hsn-ink); color: #fff; padding: 1.8em 1.6em; }
.hsn-fig__kicker {
    font-size: .72em; text-transform: uppercase; letter-spacing: .09em;
    opacity: .72; margin-bottom: .7em;
}
.hsn-fig__headline {
    font-size: 1.75em; font-weight: 800; line-height: 1.15; margin: 0 0 .45em;
    color: #fff;
}
.hsn-fig__stand { font-size: 1em; opacity: .82; margin: 0; line-height: 1.5; }

.hsn-fig__stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px; background: var(--hsn-line);
}
.hsn-fig__stats > *:not(.hsn-fig__stat) {
    grid-column: 1 / -1; background: #fff; padding: 1.1em 1.2em 0;
}
.hsn-fig__stat { background: #fff; padding: 1.3em 1.2em; }
.hsn-fig__num {
    display: block; font-size: 2.1em; font-weight: 800; line-height: 1.05;
    color: var(--hsn-accent);
}
.hsn-fig__lab {
    display: block; font-size: .8em; color: var(--hsn-text); margin-top: .35em;
    line-height: 1.4;
}

.hsn-fig__cards, .hsn-fig__who, .hsn-fig__flow, .hsn-fig__time { padding: 1.5em 1.6em; }
.hsn-fig__cards { display: grid; gap: .9em; }
.hsn-fig__cards > *:not(.hsn-fig__card) { grid-column: 1 / -1; }
.hsn-fig__card {
    display: flex; gap: .9em; align-items: flex-start;
    border: 1px solid var(--hsn-line); border-left: 3px solid var(--hsn-accent);
    border-radius: 10px; padding: .95em 1.1em;
}
.hsn-fig__card > *:not(.hsn-fig__icon) { flex: 1; margin: 0; }
.hsn-fig__card.hsn-fig--warn { border-left-color: var(--hsn-warn); }

/* Icon chip. The set is stroke-based and inherits currentColor, so one rule
   colours every icon and --warn recolours it without a second icon set. */
.hsn-fig__icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2em; height: 2.2em;
    border-radius: 9px;
    background: var(--hsn-wash);
    color: var(--hsn-accent);
}
.hsn-fig__icon svg { width: 1.25em; height: 1.25em; display: block; }
.hsn-fig--warn > .hsn-fig__icon { background: rgba(194, 65, 12, .10); color: var(--hsn-warn); }
.hsn-fig__hero .hsn-fig__icon { background: rgba(255, 255, 255, .14); color: #fff; }
.hsn-fig__stat .hsn-fig__icon { width: 1.9em; height: 1.9em; margin-bottom: .5em; }

.hsn-fig__who { background: var(--hsn-wash); }
.hsn-fig__row {
    display: flex; gap: .9em; align-items: flex-start;
    padding: .8em 0; border-bottom: 1px solid var(--hsn-line);
}
.hsn-fig__row > *:not(.hsn-fig__icon) { flex: 1; margin: 0; }
.hsn-fig__row .hsn-fig__icon { background: #fff; }
.hsn-fig__row:last-child { border-bottom: 0; }

/* Process flow.
   Numbered steps rather than connector arrows. The arrow was a rotated
   pseudo-element sitting in the flex gap: too faint at 2px of --hsn-line,
   never quite centred, and — the real problem — it still pointed sideways
   when steps wrapped onto a second row, implying a link that was not there.
   A counter is correct at every width and needs nothing from the model. */
.hsn-fig__flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1em;
    counter-reset: hsn-step;
}
/* A heading is a grid item too, so without this it becomes a column and the
   steps wrap around it instead of sitting under it. */
.hsn-fig__flow > *:not(.hsn-fig__step) { grid-column: 1 / -1; }
.hsn-fig__step {
    counter-increment: hsn-step;
    position: relative;
    display: flex;
    gap: .75em;
    align-items: flex-start;
    border: 1px solid var(--hsn-line);
    border-radius: 12px;
    padding: 1em 1.1em 1em .95em;
    background: #fff;
}
/* The number badge doubles as the ordering cue, so no connector is needed. */
.hsn-fig__step::before {
    content: counter(hsn-step);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75em;
    height: 1.75em;
    border-radius: 50%;
    background: var(--hsn-accent);
    color: #fff;
    font-size: .82em;
    font-weight: 700;
    line-height: 1;
}
.hsn-fig__step > *:not(.hsn-fig__icon) { flex: 1; margin: 0; }
/* An icon inside a step would compete with the number; keep it quiet. */
.hsn-fig__step .hsn-fig__icon {
    width: 1.6em; height: 1.6em; background: transparent;
    color: var(--hsn-text); opacity: .75;
}

.hsn-fig__time { border-top: 1px solid var(--hsn-line); }
.hsn-fig__ev {
    padding-left: 1.4em; position: relative; margin-bottom: .9em;
    border-left: 2px solid var(--hsn-line);
}
.hsn-fig__ev::before {
    content: ""; position: absolute; left: -6px; top: .45em;
    width: 10px; height: 10px; border-radius: 50%; background: var(--hsn-accent);
}

/* Two bar shapes, because the model builds them both ways.
   `style` is stripped from generated markup, so it cannot set a fill width on a
   div — it reaches for <svg><rect width="60"> instead, which IS expressible in
   the allowed SVG attributes. An SVG rect takes `fill`, not `background`, so
   styling only the div shape left those bars rendering solid black. */
.hsn-fig__bar {
    display: flex; align-items: center; gap: .6em; margin: .55em 0;
    font-size: .9em;
}
.hsn-fig__bar > svg { flex: 1 1 auto; width: 100%; height: auto; }
.hsn-fig__bar .hsn-fig__lab,
.hsn-fig__bar .hsn-fig__num {
    flex: 0 0 auto; display: inline; font-size: 1em; margin: 0;
    color: var(--hsn-text); white-space: nowrap;
}
.hsn-fig__bar .hsn-fig__num { color: var(--hsn-ink); font-weight: 700; }

/* The plain div track, when there is no svg to lay out. */
.hsn-fig__bar:not(:has(svg)) {
    display: block; height: 12px; background: var(--hsn-line);
    border-radius: 999px; overflow: hidden;
}
div.hsn-fig__barfill { background: var(--hsn-accent); height: 100%; border-radius: 999px; }
/* The svg rect shape. */
rect.hsn-fig__barfill, .hsn-fig__bar svg .hsn-fig__barfill { fill: var(--hsn-accent); }
.hsn-fig__bar svg text { fill: var(--hsn-text); }
.hsn-fig--warn div.hsn-fig__barfill { background: var(--hsn-warn); }
.hsn-fig--warn rect.hsn-fig__barfill { fill: var(--hsn-warn); }

.hsn-fig svg { max-width: 100%; height: auto; display: block; }
/* Wide SVG charts scroll inside the figure; the page body never does. */
.hsn-fig__scroll { overflow-x: auto; }

@media (max-width: 600px) {
    .hsn-fig__hero { padding: 1.4em 1.1em; }
    .hsn-fig__headline { font-size: 1.4em; }
    .hsn-fig__cards, .hsn-fig__who, .hsn-fig__flow, .hsn-fig__time { padding: 1.1em; }
}

/* The site has no dark mode today; if the theme ever adds one this keeps the
   figure legible rather than white-on-white. */
@media (prefers-color-scheme: dark) {
    .hsn-fig[data-theme-aware] { background: #14161d; }
}