/* =================================================================
   HVB UNDERSTANDING KRATOM: "The Plant" and "Inside the Leaf"
   hvb-kratom.css

   Layout, illustration and interaction rules are the approved handoff
   kit's. The presentation (type, colour, section heads, cards, pills,
   buttons) follows the Gruda Heritage pages so the two sections read as
   part of the site:

     container      .wrap            1280px, 96px / 24px padding
     section head   .sec-head        Cinzel 700 title, lede at right,
                                     hairline under the row
     cards          .history-card    20px radius, hairline, soft shadow
                    .botany-card     same, on dark
     pills          Products filter  white, 1.5px hairline, forest-mid
                                     when active
     button         .btn-primary     gold pill, forest text

   Colours and faces come from the theme's tokens (style.css :root, or a
   Heritage page's own scope), each with the theme's value as fallback.
   Body text inherits the host page's face, so it always matches the
   copy around it.

   Everything is scoped under .hvb-kx. The four button classes used here
   are excluded from the theme's global button rule in style.css, and
   every button state sets colour and background explicitly so the Hello
   Elementor reset (#c36 on hover and focus) cannot repaint them.
   ================================================================= */

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

.hvb-kx {
    --kx-forest: var(--forest, #1a3a2e);
    --kx-forest-deep: var(--forest-deep, #0f2a1f);
    --kx-forest-mid: var(--forest-mid, #2a5d3a);
    --kx-gold: var(--gold, #d4af37);
    --kx-gold-light: var(--gold-light, #f4e061);
    --kx-gold-dark: var(--gold-dark, #b8960c);
    --kx-gold-soft: var(--gold-soft, #e8c873);
    --kx-cream: var(--cream, #fff9e6);
    --kx-ink: var(--text-dark, #1a1a1a);
    --kx-muted: var(--text-muted, #555555);
    --kx-faint: var(--text-light, #737373);
    --kx-display: var(--font-display, var(--font-serif, 'Cinzel', Georgia, serif));
    --kx-ui: var(--font-sans, 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif);
    --kx-radius: var(--radius-lg, 20px);
    --kx-vein-fill: #a6d196;
    --kx-vein-edge: rgba(15, 42, 31, .5);
    --kx-stem: #6f9c62;
    position: relative;
    background: linear-gradient(180deg, var(--kx-forest-mid) 0%, var(--kx-forest) 100%);
    color: #fff;
    font-family: inherit;
    line-height: 1.6;
}
.hvb-kx[data-vein="red"] { --kx-vein-fill: #e07a6d; --kx-vein-edge: rgba(70, 16, 12, .6); --kx-stem: #b4574d; }
.hvb-kx[data-vein="white"] { --kx-vein-fill: #f5f1e3; --kx-vein-edge: rgba(15, 42, 31, .45); --kx-stem: #cfd7b9; }

/* ---------------- CONTAINER (as .wrap) ------------------------- */
.hvb-kx .kx-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 96px 24px;
}
@media (max-width: 640px) {
    .hvb-kx .kx-inner { padding: 64px 20px; }
}

/* ---------------- SECTION HEAD (as .sec-head) ------------------ */
.hvb-kx header.kx-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 40px;
    align-items: end;
    max-width: none;
    margin: 0 0 56px;
    padding: 0 0 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hvb-kx h2.kx-title {
    font-family: var(--kx-display);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: #fff;
    max-width: 700px;
    margin: 0;
}
.hvb-kx p.kx-lede {
    max-width: 380px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
    .hvb-kx header.kx-head { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 40px; }
}

.hvb-kx p.kx-note {
    max-width: 760px;
    margin: 48px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}
.hvb-kx button { font-family: var(--kx-ui); }

/* ================================================================
   THE PLANT
   ================================================================ */
.hvb-kx .kx-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 900px) {
    .hvb-kx .kx-grid { grid-template-columns: minmax(0, 33rem) minmax(0, 1fr); align-items: start; }
    .hvb-kx .kx-side { position: sticky; top: calc(1.5rem + env(safe-area-inset-top, 0px)); }
}

/* Plate: the illustration keeps its cream ground, framed like the
   site's photo figures. */
.hvb-kx figure.kx-plate {
    position: relative;
    margin: 0;
    width: 100%;
    max-width: 34rem;
    padding: clamp(.6rem, 2vw, 1.1rem) clamp(.6rem, 2vw, 1.1rem) clamp(.8rem, 2vw, 1.1rem);
    background: radial-gradient(120% 90% at 50% 38%, #fffdf3 0%, #fff9e6 55%, #f7edcf 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: var(--kx-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.hvb-kx .kx-stage { position: relative; aspect-ratio: 480 / 600; container-type: inline-size; }
.hvb-kx .kx-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

/* Plate labels: the site's filter pill, at the kit's size so every
   label keeps its place on the drawing. */
.hvb-kx .kx-tag {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .45em .95em;
    border-radius: 100px;
    border: 1.5px solid rgba(26, 58, 46, 0.18);
    background: #fff;
    color: var(--kx-forest-deep);
    font-family: var(--kx-ui);
    font-weight: 600;
    font-size: 12px;
    font-size: clamp(11px, 2.7cqw, 13.5px);
    line-height: 1;
    letter-spacing: .01em;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(15, 42, 31, 0.14);
    cursor: default;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hvb-kx.is-enhanced .kx-tag { cursor: pointer; }
.hvb-kx .kx-tag:hover,
.hvb-kx .kx-tag:focus,
.hvb-kx .kx-tag:active {
    background: #fff;
    color: var(--kx-forest-deep);
}
.hvb-kx.is-enhanced .kx-tag:hover {
    border-color: var(--kx-forest-mid);
    transform: translate(-50%, calc(-50% - 1px));
}
.hvb-kx .kx-tag[aria-pressed="true"],
.hvb-kx .kx-tag[aria-pressed="true"]:hover,
.hvb-kx .kx-tag[aria-pressed="true"]:focus,
.hvb-kx .kx-tag[aria-pressed="true"]:active {
    background: var(--kx-forest-mid);
    color: #fff;
    border-color: var(--kx-forest-mid);
    box-shadow: 0 4px 12px rgba(42, 93, 58, 0.25);
}
.hvb-kx .kx-tag:focus-visible { outline: 3px solid var(--kx-forest-mid); outline-offset: 2px; }

/* Illustration states (kit) */
.hvb-kx .kx-vein { fill: var(--kx-vein-fill); stroke: var(--kx-vein-edge); stroke-width: .6; transition: fill .35s ease, stroke .35s ease; }
.hvb-kx .kx-stem-color { stroke: var(--kx-stem); transition: stroke .35s ease; }
.hvb-kx .kx-halo { opacity: 0; transition: opacity .3s ease; }
.hvb-kx[data-active="blade"] .kx-halo--blade,
.hvb-kx[data-active="vein"] .kx-halo--vein,
.hvb-kx[data-active="laterals"] .kx-halo--laterals,
.hvb-kx[data-active="stem"] .kx-halo--stem,
.hvb-kx[data-active="flower"] .kx-halo--flower { opacity: 1; }
.hvb-kx .kx-leader { stroke: rgba(26, 58, 46, .42); stroke-width: 1; transition: stroke .25s ease; }
.hvb-kx .kx-dot { fill: #1a3a2e; stroke: #fff9e6; stroke-width: 1.2; transition: fill .25s ease; }
.hvb-kx[data-active="blade"] .kx-leader--blade,
.hvb-kx[data-active="vein"] .kx-leader--vein,
.hvb-kx[data-active="laterals"] .kx-leader--laterals,
.hvb-kx[data-active="stem"] .kx-leader--stem,
.hvb-kx[data-active="flower"] .kx-leader--flower { stroke: #b8960c; stroke-width: 1.6; }
.hvb-kx[data-active="blade"] .kx-dot--blade,
.hvb-kx[data-active="vein"] .kx-dot--vein,
.hvb-kx[data-active="laterals"] .kx-dot--laterals,
.hvb-kx[data-active="stem"] .kx-dot--stem,
.hvb-kx[data-active="flower"] .kx-dot--flower { fill: #d4af37; stroke: #1a3a2e; }
.hvb-kx.is-enhanced .kx-hit { cursor: pointer; }

/* Plate controls: vein colour and leaf edge */
.hvb-kx .kx-ctl { display: none; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .6rem .9rem; margin: .9rem .25rem .15rem; }
.hvb-kx.is-enhanced .kx-ctl { display: grid; }
.hvb-kx .kx-ctl-label {
    font-family: var(--kx-ui);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kx-forest-mid);
}
.hvb-kx .kx-ctl-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.hvb-kx .kx-swatch {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 100px;
    border: 1.5px solid rgba(26, 58, 46, 0.15);
    background: #fff;
    color: var(--kx-forest-deep);
    font-family: var(--kx-ui);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hvb-kx .kx-swatch::before { content: ""; width: .72rem; height: .72rem; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px rgba(15, 42, 31, .4); }
.hvb-kx .kx-swatch--icon::before { display: none; }
.hvb-kx .kx-swatch svg { width: .68rem; height: 1.05rem; fill: currentColor; flex: none; }
.hvb-kx .kx-swatch:hover,
.hvb-kx .kx-swatch:focus,
.hvb-kx .kx-swatch:active {
    background: #fff;
    color: var(--kx-forest-deep);
    border-color: var(--kx-forest-mid);
}
.hvb-kx .kx-swatch:hover { transform: translateY(-1px); }
.hvb-kx .kx-swatch[aria-pressed="true"],
.hvb-kx .kx-swatch[aria-pressed="true"]:hover,
.hvb-kx .kx-swatch[aria-pressed="true"]:focus,
.hvb-kx .kx-swatch[aria-pressed="true"]:active {
    background: var(--kx-forest-mid);
    color: #fff;
    border-color: var(--kx-forest-mid);
    box-shadow: 0 4px 12px rgba(42, 93, 58, 0.25);
}
.hvb-kx .kx-swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); }
.hvb-kx .kx-swatch:focus-visible { outline: 3px solid var(--kx-forest-mid); outline-offset: 2px; }
@media (max-width: 480px) {
    .hvb-kx .kx-ctl { grid-template-columns: minmax(0, 1fr); row-gap: .4rem; }
    .hvb-kx .kx-ctl-opts + .kx-ctl-label { margin-top: .35rem; }
}

/* Side column: the hint reads as the site's gold micro label, and the
   part descriptions sit in a dark card like .botany-card. */
.hvb-kx p.kx-hint {
    display: none;
    margin: 0 0 1rem;
    font-family: var(--kx-ui);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kx-gold-soft);
}
.hvb-kx.is-enhanced p.kx-hint { display: block; }
.hvb-kx .kx-panels {
    padding: 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: var(--kx-radius);
}
.hvb-kx .kx-panel h3 {
    font-family: var(--kx-display);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: .02em;
    color: #fff;
    margin: 0 0 10px;
}
.hvb-kx .kx-panel p { margin: 0; max-width: 34em; font-size: 0.96rem; line-height: 1.7; color: rgba(255, 255, 255, 0.76); }
.hvb-kx .kx-panel + .kx-panel { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(212, 175, 55, 0.18); }
.hvb-kx.is-enhanced .kx-panels { display: grid; }
.hvb-kx.is-enhanced .kx-panel { grid-area: 1 / 1; margin-top: 0; padding-top: 0; border-top: 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; }
.hvb-kx.is-enhanced .kx-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s; }
@media (max-width: 640px) {
    .hvb-kx .kx-panels { padding: 24px; }
}

/* Botanical label: the dark callout, with quick-facts style terms. */
.hvb-kx dl.kx-label {
    position: relative;
    margin: 24px 0 0;
    padding: 24px 28px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 1.25rem;
    row-gap: .7rem;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--kx-radius);
}
.hvb-kx .kx-label dt {
    margin: 0;
    font-family: var(--kx-ui);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kx-gold-soft);
}
.hvb-kx .kx-label dd { margin: 0; font-size: 0.92rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
@media (max-width: 640px) {
    .hvb-kx dl.kx-label { padding: 20px; column-gap: 1rem; }
}

/* ================================================================
   INSIDE THE LEAF
   ================================================================ */
.hvb-kx.hvb-kx--lab { background: var(--kx-cream); color: var(--kx-ink); }
.hvb-kx--lab header.kx-head { border-bottom-color: rgba(26, 58, 46, 0.12); }
.hvb-kx--lab h2.kx-title { color: var(--kx-forest-deep); }
.hvb-kx--lab p.kx-lede { color: var(--kx-muted); }
.hvb-kx--lab p.kx-note { color: var(--kx-muted); border-top-color: rgba(26, 58, 46, 0.12); }
.hvb-kx--lab h3.kx-h3 {
    display: inline-block;
    font-family: var(--kx-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--kx-forest-deep);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--kx-gold);
}

/* White cards on the cream section, as .history-card */
.hvb-kx--lab .kx-lab-grid { display: grid; gap: 24px; }
@media (min-width: 900px) {
    /* Natural heights: the tab card changes height with each tab and is
       shorter than the diagram card, so stretching would leave it half
       empty. */
    .hvb-kx--lab .kx-lab-grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
}
.hvb-kx--lab .kx-where,
.hvb-kx--lab .kx-factors,
.hvb-kx--lab .kx-trace {
    padding: 32px;
    background: #fff;
    border: 1px solid rgba(26, 58, 46, 0.1);
    border-radius: var(--kx-radius);
    box-shadow: 0 8px 24px rgba(26, 58, 46, 0.06);
}
@media (max-width: 640px) {
    .hvb-kx--lab .kx-where,
    .hvb-kx--lab .kx-factors,
    .hvb-kx--lab .kx-trace { padding: 24px 20px; }
}

/* Where they're found */
.hvb-kx--lab .kx-where figure { margin: 0; max-width: 19rem; }
.hvb-kx--lab .kx-where svg { display: block; width: 100%; height: auto; }
.hvb-kx--lab .kx-sl-leaf { fill: #e8efdb; stroke: #1a3a2e; stroke-width: 1.1; }
.hvb-kx--lab .kx-sl-rib { stroke: #3a6d4a; stroke-width: 1; fill: none; }
.hvb-kx--lab .kx-sl-stem { fill: #2a5d3a; }
.hvb-kx--lab .kx-sl-stip { fill: #d6e2c1; stroke: #1a3a2e; stroke-width: .9; }
.hvb-kx--lab .kx-sl-roots path { fill: none; stroke: #5d6b4b; stroke-width: 1.3; stroke-linecap: round; opacity: .8; }
.hvb-kx--lab .kx-sl-dots { fill: #a8860a; }
.hvb-kx--lab .kx-sl-lead path { stroke: rgba(26, 58, 46, .45); stroke-width: 1; fill: none; }
.hvb-kx--lab .kx-sl-label text { font: 600 11px var(--kx-ui); fill: #1a3a2e; }
.hvb-kx--lab ul.kx-key { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .85rem; max-width: 22rem; }
.hvb-kx--lab ul.kx-key li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: .85rem; align-items: start; margin: 0; padding: 0; font-size: .92rem; line-height: 1.5; color: var(--kx-muted); }
.hvb-kx--lab ul.kx-key li::before { content: none; }
.hvb-kx--lab .kx-key strong { display: block; font-family: var(--kx-ui); font-size: .85rem; font-weight: 700; line-height: 1.35; color: var(--kx-forest-deep); }
.hvb-kx--lab .kx-dots {
    width: 2.4rem; height: 1.5rem; margin-top: .1rem; border-radius: 6px; background-color: #e8efdb;
    box-shadow: inset 0 0 0 1px rgba(26, 58, 46, .2);
    background-image: radial-gradient(circle, #a8860a 0 1.2px, transparent 1.6px);
}
.hvb-kx--lab .kx-dots--hi { background-size: 6px 6px; }
.hvb-kx--lab .kx-dots--mid { background-size: 11px 11px; background-position: 2px 3px; }
.hvb-kx--lab .kx-dots--lo { background-size: 20px 20px; background-position: 6px 5px; }

/* Tabs and zoom: the site's filter pill */
.hvb-kx--lab .kx-tabs { display: none; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.hvb-kx--lab.is-enhanced .kx-tabs { display: flex; }
.hvb-kx--lab .kx-tab,
.hvb-kx--lab .kx-zoom {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 100px;
    border: 1.5px solid rgba(26, 58, 46, 0.15);
    background: #fff;
    color: var(--kx-forest-deep);
    font-family: var(--kx-ui);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hvb-kx--lab .kx-tab:hover,
.hvb-kx--lab .kx-tab:focus,
.hvb-kx--lab .kx-tab:active,
.hvb-kx--lab .kx-zoom:hover,
.hvb-kx--lab .kx-zoom:focus,
.hvb-kx--lab .kx-zoom:active {
    background: #fff;
    color: var(--kx-forest-deep);
    border-color: var(--kx-forest-mid);
}
.hvb-kx--lab .kx-tab:hover,
.hvb-kx--lab .kx-zoom:hover { transform: translateY(-1px); }
.hvb-kx--lab .kx-tab[aria-selected="true"],
.hvb-kx--lab .kx-tab[aria-selected="true"]:hover,
.hvb-kx--lab .kx-tab[aria-selected="true"]:focus,
.hvb-kx--lab .kx-tab[aria-selected="true"]:active,
.hvb-kx--lab .kx-zoom[aria-pressed="true"],
.hvb-kx--lab .kx-zoom[aria-pressed="true"]:hover,
.hvb-kx--lab .kx-zoom[aria-pressed="true"]:focus,
.hvb-kx--lab .kx-zoom[aria-pressed="true"]:active {
    background: var(--kx-forest-mid);
    color: #fff;
    border-color: var(--kx-forest-mid);
    box-shadow: 0 4px 12px rgba(42, 93, 58, 0.25);
}
.hvb-kx--lab .kx-tab:focus-visible,
.hvb-kx--lab .kx-zoom:focus-visible { outline: 3px solid var(--kx-forest-mid); outline-offset: 2px; }
.hvb-kx--lab .kx-zoom { display: none; }
.hvb-kx--lab.is-enhanced .kx-zoom { display: inline-flex; }
@media (max-width: 420px) {
    .hvb-kx--lab .kx-tab { padding: 8px 12px; }
    .hvb-kx--lab .kx-tabs { gap: .35rem; }
}

.hvb-kx--lab .kx-fpanel + .kx-fpanel { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid rgba(26, 58, 46, 0.1); }
.hvb-kx--lab.is-enhanced .kx-fpanel { display: none; margin-top: 0; padding-top: 0; border-top: 0; }
.hvb-kx--lab.is-enhanced .kx-fpanel.is-active { display: block; animation: kx-fade .35s ease both; }
@keyframes kx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kx-leaf { from { transform: scale(.42); } to { transform: scale(1); } }
@keyframes kx-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes kx-pop { from { transform: scale(0); } to { transform: scale(1); } }
.hvb-kx--lab h4.kx-fh { font-family: var(--kx-ui); font-size: 1rem; font-weight: 700; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--kx-forest-deep); margin: 0 0 1.1rem; }
.hvb-kx--lab p.kx-cap { margin: 1.1rem 0 0; max-width: 40rem; font-size: .92rem; line-height: 1.7; color: var(--kx-muted); }
.hvb-kx--lab p.kx-src { margin: .5rem 0 0; font-family: var(--kx-ui); font-size: .72rem; font-weight: 600; line-height: 1.45; letter-spacing: .04em; color: var(--kx-faint); }

/* Bar charts */
.hvb-kx--lab .kx-row { display: grid; grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1fr) 5.8rem; align-items: center; column-gap: 1rem; min-height: 2.3rem; }
.hvb-kx--lab .kx-rl { font-family: var(--kx-ui); font-size: .85rem; font-weight: 500; line-height: 1.3; color: var(--kx-ink); }
.hvb-kx--lab .kx-rv { font-family: var(--kx-ui); font-weight: 700; font-size: .88rem; font-variant-numeric: tabular-nums; text-align: right; color: var(--kx-forest-deep); white-space: nowrap; }
.hvb-kx--lab .kx-track { position: relative; height: 12px; border-radius: 100px; background: rgba(26, 58, 46, 0.08); overflow: hidden; }
.hvb-kx--lab .kx-fill {
    position: absolute; top: 0; bottom: 0; border-radius: 100px; background: var(--kx-forest-mid);
    left: calc(var(--a) / var(--max) * 100%);
    width: max(2px, calc((var(--b) - var(--a)) / var(--max) * 100%));
    transform-origin: left center;
    transition: left .7s cubic-bezier(.4, 0, .2, 1), width .7s cubic-bezier(.4, 0, .2, 1);
}
.hvb-kx--lab .kx-fill--gold { background: var(--kx-gold-dark); }
.hvb-kx--lab.is-enhanced .kx-fpanels:not(.is-inview) .kx-fill,
.hvb-kx--lab.is-enhanced .kx-tchart:not(.is-inview) .kx-fill { transform: scaleX(0); }
.hvb-kx--lab.is-enhanced .kx-fpanels.is-inview .kx-fpanel.is-active .kx-fill { animation: kx-grow .8s cubic-bezier(.2, .7, .2, 1) .1s both; }
.hvb-kx--lab.is-enhanced .kx-tchart.is-inview .kx-fill { animation: kx-grow .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
.hvb-kx--lab .kx-row--axis { min-height: 1.6rem; align-items: start; }
.hvb-kx--lab .kx-ticks { position: relative; height: 1.5rem; overflow: hidden; }
.hvb-kx--lab .kx-tick {
    position: absolute; top: .45rem; left: calc(var(--t) / var(--max) * 100%); transform: translateX(-50%);
    font-family: var(--kx-ui); font-size: .7rem; font-weight: 600; line-height: 1; color: var(--kx-faint); white-space: nowrap;
    transition: left .7s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
}
.hvb-kx--lab .kx-tick::before { content: ""; position: absolute; left: 50%; top: -.45rem; width: 1px; height: .3rem; background: rgba(26, 58, 46, .3); }
.hvb-kx--lab .kx-tick.is-first { transform: none; }
.hvb-kx--lab .kx-tick.is-first::before { left: 0; }
.hvb-kx--lab .kx-tick.is-last { transform: translateX(-100%); }
.hvb-kx--lab .kx-tick.is-last::before { left: auto; right: 0; }
.hvb-kx--lab .kx-tick--zoom { opacity: 0; }
.hvb-kx--lab .kx-tchart.is-zoomed .kx-tick--zoom { opacity: 1; }
.hvb-kx--lab .kx-tchart.is-zoomed .kx-tick--wide { opacity: 0; }

/* Leaf age */
.hvb-kx--lab .kx-age { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 640px) { .hvb-kx--lab .kx-age { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 2rem; } }
.hvb-kx--lab .kx-age-art svg { width: 100%; max-width: 13rem; height: auto; display: block; }
.hvb-kx--lab .kx-age-young { fill: #6a9a67; stroke: #0f2a1f; stroke-width: 1; }
.hvb-kx--lab .kx-age-mature { fill: #2a5d3a; stroke: #0f2a1f; stroke-width: 1; }
.hvb-kx--lab .kx-age-grow { transform-box: fill-box; transform-origin: 50% 100%; }
.hvb-kx--lab.is-enhanced .kx-fpanels.is-inview .kx-fpanel.is-active .kx-age-grow { animation: kx-leaf .9s cubic-bezier(.2, .7, .2, 1) .1s both; }
.hvb-kx--lab .kx-age-cap { display: flex; justify-content: space-between; max-width: 13rem; margin-top: .5rem; padding: 0 1.3rem 0 .4rem; font-family: var(--kx-ui); font-size: .66rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--kx-muted); }
.hvb-kx--lab ul.kx-shift { list-style: none; margin: 0; padding: 0; }
.hvb-kx--lab ul.kx-shift li {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin: 0; padding: .55rem 0; border-bottom: 1px solid rgba(26, 58, 46, .1); font-size: .95rem; color: var(--kx-ink);
}
.hvb-kx--lab ul.kx-shift li::before { content: none; }
.hvb-kx--lab.is-enhanced .kx-fpanels.is-inview .kx-fpanel.is-active .kx-shift li { animation: kx-rise .4s ease both; }
.hvb-kx--lab.is-enhanced .kx-shift li:nth-child(2) { animation-delay: .08s; }
.hvb-kx--lab.is-enhanced .kx-shift li:nth-child(3) { animation-delay: .16s; }
.hvb-kx--lab.is-enhanced .kx-shift li:nth-child(4) { animation-delay: .24s; }
.hvb-kx--lab.is-enhanced .kx-shift li:nth-child(5) { animation-delay: .32s; }
.hvb-kx--lab .kx-dir {
    display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .7rem; border-radius: 100px;
    font-family: var(--kx-ui); font-size: .68rem; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
}
.hvb-kx--lab .kx-dir::before { content: ""; width: .55rem; height: .48rem; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hvb-kx--lab .kx-dir.is-up { background: rgba(212, 175, 55, 0.18); color: #6f5607; }
.hvb-kx--lab .kx-dir.is-down { background: rgba(42, 93, 58, 0.1); color: var(--kx-forest-mid); }
.hvb-kx--lab .kx-dir.is-down::before { transform: rotate(180deg); }

/* Vein colour comparison */
.hvb-kx--lab .kx-veins3 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; }
.hvb-kx--lab .kx-veins3 figure { margin: 0; text-align: center; }
.hvb-kx--lab .kx-veins3 svg { width: 3.4rem; height: auto; display: block; margin: 0 auto .5rem; }
.hvb-kx--lab .kx-veins3 figcaption { font-family: var(--kx-ui); font-size: .68rem; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--kx-forest-deep); }
.hvb-kx--lab .kx-approx { font-size: 1.6rem; line-height: 1; color: #6f8577; margin-top: -1.2rem; }

/* 7-OH in context */
.hvb-kx--lab .kx-trace { margin-top: 24px; display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); }
.hvb-kx--lab .kx-trace-copy { max-width: 44rem; }
.hvb-kx--lab .kx-trace-copy p { margin: 0; font-size: .96rem; line-height: 1.75; color: var(--kx-muted); }
@media (min-width: 960px) {
    .hvb-kx--lab .kx-trace { grid-template-columns: minmax(0, 1fr) minmax(0, 17.5rem); align-items: start; }
    .hvb-kx--lab .kx-trace-copy { grid-column: 1 / -1; }
    .hvb-kx--lab .kx-trace.kx-trace--solo { grid-template-columns: minmax(0, 1fr); } /* no batch data on this page */
}
.hvb-kx--lab figure.kx-tchart { margin: 0; }
.hvb-kx--lab .kx-tchart .kx-row { grid-template-columns: minmax(8.5rem, 11.5rem) minmax(0, 1fr) 8.6rem; }
.hvb-kx--lab .kx-tchart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.hvb-kx--lab p.kx-tchart-unit { margin: 0; font-family: var(--kx-ui); font-size: .7rem; font-weight: 700; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--kx-muted); }
.hvb-kx--lab .kx-row--batch .kx-rl { font-weight: 700; color: var(--kx-forest-deep); }
.hvb-kx--lab .kx-track--mark { background: transparent; height: 16px; border-radius: 0; }
.hvb-kx--lab .kx-track--mark::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(26, 58, 46, .25); }
.hvb-kx--lab .kx-mark {
    position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
    left: max(6px, calc(var(--x) / var(--max) * 100%));
    background: var(--kx-forest-deep); box-shadow: 0 0 0 3px #fff;
    transition: left .7s cubic-bezier(.4, 0, .2, 1);
}
.hvb-kx--lab.is-enhanced .kx-tchart:not(.is-inview) .kx-mark { transform: scale(0); }
.hvb-kx--lab.is-enhanced .kx-tchart.is-inview .kx-mark { animation: kx-pop .45s ease .6s both; }
.hvb-kx--lab .kx-over {
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: repeating-linear-gradient(135deg, rgba(42, 93, 58, .55) 0 5px, rgba(42, 93, 58, .16) 5px 10px);
    transition: opacity .3s ease;
}
.hvb-kx--lab .kx-tchart.is-zoomed .kx-row--over .kx-over { opacity: 1; transition-delay: .4s; }
.hvb-kx--lab p.kx-status { margin: 1rem 0 0; max-width: 40rem; font-size: .92rem; line-height: 1.6; color: var(--kx-muted); }

/* This batch: a cream callout inside the white card */
.hvb-kx--lab aside.kx-batch { position: relative; margin: 0; padding: 24px; background: var(--kx-cream); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 16px; }
.hvb-kx--lab h3.kx-batch-t { font-family: var(--kx-display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; letter-spacing: .02em; margin: 0 0 .35rem; color: var(--kx-forest-deep); }
.hvb-kx--lab p.kx-batch-id { margin: 0 0 1.1rem; font-family: var(--kx-ui); font-size: .72rem; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--kx-muted); }
.hvb-kx--lab p.kx-batch-id strong { color: var(--kx-forest-deep); }
.hvb-kx--lab dl.kx-batch-vals { margin: 0 0 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.hvb-kx--lab .kx-batch-vals div { border-top: 2px solid var(--kx-gold); padding-top: .55rem; }
.hvb-kx--lab .kx-batch-vals dt { margin: 0; font-family: var(--kx-ui); font-size: .68rem; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--kx-muted); }
.hvb-kx--lab .kx-batch-vals dd { margin: .35rem 0 0; font-family: var(--kx-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--kx-forest-deep); }
.hvb-kx--lab p.kx-batch-note { margin: 0 0 1.1rem; font-size: .86rem; line-height: 1.55; color: var(--kx-muted); }
.hvb-kx--lab .kx-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 12px 22px;
    border: 0;
    border-radius: 100px;
    background: var(--kx-gold);
    color: var(--kx-forest-deep);
    font-family: var(--kx-ui);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(212, 175, 55, 0.3);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.hvb-kx--lab .kx-btn:hover,
.hvb-kx--lab .kx-btn:focus,
.hvb-kx--lab .kx-btn:active {
    background: var(--kx-gold-soft);
    color: var(--kx-forest-deep);
    text-decoration: none;
}
.hvb-kx--lab .kx-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(212, 175, 55, 0.45); }
.hvb-kx--lab .kx-btn:focus-visible { outline: 3px solid var(--kx-forest-mid); outline-offset: 2px; }
.hvb-kx--lab .kx-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.hvb-kx--lab .kx-flag { margin: .9rem 0 0; font-family: var(--kx-ui); font-size: .72rem; line-height: 1.45; color: #7a5f08; }

@media (max-width: 600px) {
    .hvb-kx--lab .kx-row, .hvb-kx--lab .kx-tchart .kx-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; row-gap: .45rem; margin-bottom: .95rem; }
    .hvb-kx--lab .kx-rl { grid-area: l; }
    .hvb-kx--lab .kx-rv { grid-area: v; }
    .hvb-kx--lab .kx-track { grid-area: t; }
    .hvb-kx--lab .kx-row--axis, .hvb-kx--lab .kx-tchart .kx-row--axis { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t"; margin-bottom: 0; }
    .hvb-kx--lab .kx-row--axis > span:not(.kx-ticks) { display: none; }
    .hvb-kx--lab .kx-ticks { grid-area: t; }
}

/* Touch screens: the site gives every button at least 44px. The plate
   labels are left at their size so they do not cover the drawing; the
   parts of the drawing are tappable as well. */
@media (pointer: coarse) {
    .hvb-kx .kx-swatch,
    .hvb-kx--lab .kx-tab,
    .hvb-kx--lab .kx-zoom { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .hvb-kx *, .hvb-kx *::before { transition: none !important; animation: none !important; }
    .hvb-kx.is-enhanced .kx-panel { transform: none; }
}

/* Print: the theme hides every header, aside and button when printing.
   Keep the section titles and the batch card, and print every part and
   tab panel rather than only the one on screen. */
@media print {
    .hvb-kx header.kx-head { display: grid !important; }
    .hvb-kx--lab aside.kx-batch { display: block !important; }
    .hvb-kx .kx-side { position: static; }
    .hvb-kx.is-enhanced .kx-panels { display: block; }
    .hvb-kx.is-enhanced .kx-panel { opacity: 1; visibility: visible; transform: none; }
    .hvb-kx.is-enhanced .kx-panel + .kx-panel { margin-top: 1.5rem; }
    .hvb-kx--lab.is-enhanced .kx-fpanel { display: block; }
    .hvb-kx--lab.is-enhanced .kx-fpanel + .kx-fpanel { margin-top: 2rem; }
}