@layer components {
    .jh-button {
        display: inline-flex;
        min-block-size: 2.75rem;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        border: var(--border-w) solid transparent;
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-weight: var(--weight-body-semibold);
        line-height: 1.4;
        text-align: center;
        text-decoration: none;
        transition:
            background-color var(--motion-fast) var(--ease-standard),
            border-color var(--motion-fast) var(--ease-standard),
            color var(--motion-fast) var(--ease-standard);
    }

    .jh-button:hover {
        text-decoration: none;
    }

    .jh-button--primary {
        border-color: var(--color-action-primary);
        background: var(--color-action-primary);
        color: var(--color-action-primary-text);
    }

    .jh-button--primary:hover {
        border-color: var(--color-action-hover);
        background: var(--color-action-hover);
        color: var(--color-action-primary-text);
    }

    .jh-button--secondary {
        border-color: var(--color-action-secondary);
        background: transparent;
        color: var(--color-action-secondary);
    }

    .jh-button--secondary:hover {
        background: var(--color-action-secondary);
        color: var(--color-action-secondary-text);
    }

    .jh-button[aria-disabled="true"],
    .jh-button:disabled {
        cursor: not-allowed;
        opacity: 0.6;
    }

    .jh-chip,
    .jh-alert,
    .jh-block {
        --state-bg: var(--color-state-current-bg);
        --state-rule: var(--color-state-current-rule);

        border-inline-start: var(--rule-w) solid var(--state-rule);
        background: var(--state-bg);
        color: var(--color-state-text);
    }

    .jh-chip[data-state="current"],
    .jh-alert[data-state="current"],
    .jh-block[data-state="current"] {
        --state-bg: var(--color-state-current-bg);
        --state-rule: var(--color-state-current-rule);
    }

    .jh-chip[data-state="partial"],
    .jh-alert[data-state="partial"],
    .jh-block[data-state="partial"] {
        --state-bg: var(--color-state-partial-bg);
        --state-rule: var(--color-state-partial-rule);
    }

    .jh-chip[data-state="thin"],
    .jh-alert[data-state="thin"],
    .jh-block[data-state="thin"] {
        --state-bg: var(--color-state-thin-bg);
        --state-rule: var(--color-state-thin-rule);
    }

    .jh-chip[data-state="stale"],
    .jh-alert[data-state="stale"],
    .jh-block[data-state="stale"] {
        --state-bg: var(--color-state-stale-bg);
        --state-rule: var(--color-state-stale-rule);
    }

    .jh-chip[data-state="unavailable"],
    .jh-alert[data-state="unavailable"],
    .jh-block[data-state="unavailable"] {
        --state-bg: var(--color-state-unavailable-bg);
        --state-rule: var(--color-state-unavailable-rule);
    }

    .jh-alert[data-status="positive"] {
        --state-bg: var(--color-positive-bg);
        --state-rule: var(--color-positive);
    }

    .jh-alert[data-status="adverse"] {
        --state-bg: var(--color-adverse-bg);
        --state-rule: var(--color-adverse);
    }

    .jh-alert[data-status="warning"] {
        --state-bg: var(--color-warning-bg);
        --state-rule: var(--color-warning);
    }

    .jh-alert[data-status="informational"] {
        --state-bg: var(--color-informational-bg);
        --state-rule: var(--color-informational);
    }

    .jh-chip {
        display: inline-flex;
        min-block-size: 2rem;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        border-block: var(--border-w) solid var(--color-border);
        border-inline-end: var(--border-w) solid var(--color-border);
        border-radius: var(--radius-sm);
        font-size: var(--text-min);
        font-weight: var(--weight-body-semibold);
        line-height: var(--leading-label);
    }

    .jh-chip__glyph {
        position: relative;
        inline-size: 0.55rem;
        block-size: 0.55rem;
        flex: 0 0 auto;
        overflow: hidden;
        border: var(--border-w) solid var(--state-rule);
        background: var(--state-rule);
    }

    .jh-chip[data-state="current"] .jh-chip__glyph {
        border-radius: 50%;
    }

    .jh-chip[data-state="partial"] .jh-chip__glyph {
        background: transparent;
    }

    .jh-chip[data-state="partial"] .jh-chip__glyph::before {
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: 50%;
        background: var(--state-rule);
        content: "";
    }

    .jh-chip[data-state="thin"] .jh-chip__glyph {
        background: transparent;
    }

    .jh-chip[data-state="stale"] .jh-chip__glyph {
        transform: rotate(45deg);
    }

    .jh-chip[data-state="unavailable"] .jh-chip__glyph {
        border-radius: 50%;
        background: transparent;
    }

    .jh-alert {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-4);
        border-block: var(--border-w) solid var(--color-border);
        border-inline-end: var(--border-w) solid var(--color-border);
        border-radius: var(--radius-sm);
    }

    .jh-alert__label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: var(--weight-body-semibold);
    }

    .jh-block {
        min-inline-size: 0;
    }

    .jh-block__part {
        min-inline-size: 0;
    }

    .jh-evidence-page,
    .jh-evidence-index {
        --stack-space: var(--space-7);
    }

    .jh-evidence-page__header {
        display: flex;
        max-inline-size: var(--prose-max);
        flex-direction: column;
        gap: var(--space-3);
    }

    .jh-evidence-page__header > * {
        margin-block: 0;
        overflow-wrap: anywhere;
    }

    .jh-country-group {
        --stack-space: var(--space-5);

        padding-block-start: var(--space-6);
        border-block-start: var(--rule-w) solid var(--color-accent-primary);
    }

    .jh-country-group__heading p {
        margin-block: var(--space-2) 0;
    }

    .jh-country-group__heading,
    .jh-country-group__heading a,
    .jh-market-card__heading,
    .jh-market-card__heading a {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    .jh-market-card-grid,
    .jh-snapshot__grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
        gap: var(--grid-gap);
    }

    .jh-metric {
        display: grid;
        align-content: start;
        gap: var(--space-4);
        padding: var(--space-5);
        border: var(--border-w) solid var(--color-border);
        border-inline-start: var(--rule-w) solid var(--state-rule);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .jh-metric__specimen,
    .jh-metric__label,
    .jh-metric__comparison,
    .jh-metric__confidence,
    .jh-market-card p,
    .jh-coverage p {
        margin-block: 0;
    }

    .jh-metric__header {
        min-block-size: 3.5rem;
    }

    .jh-metric__label {
        overflow-wrap: anywhere;
    }

    .jh-metric__value-row {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2);
    }

    .jh-metric__value {
        color: var(--color-text-primary);
        font-family: var(--font-analytical);
        font-size: var(--text-metric);
        font-variant-numeric: tabular-nums;
        font-weight: var(--weight-analytical-bold);
        letter-spacing: var(--tracking-metric);
        line-height: var(--leading-metric);
        overflow-wrap: anywhere;
    }

    .jh-metric__unit {
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        font-weight: var(--weight-body-semibold);
        overflow-wrap: anywhere;
    }

    .jh-metric__comparison {
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-metric__context {
        display: grid;
        gap: var(--space-3);
        margin: 0;
        padding-block: var(--space-4);
        border-block: var(--border-w) solid var(--color-border);
    }

    .jh-metric__context div {
        display: grid;
        gap: var(--space-1);
    }

    .jh-metric__context dt {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-metadata);
    }

    .jh-metric__context dd {
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
        overflow-wrap: anywhere;
    }

    .jh-metric__states {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .jh-metric__confidence {
        display: inline-flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        font-size: var(--text-body-small);
    }

    .jh-confidence-dots {
        color: var(--color-text-primary);
        font-family: var(--font-metadata);
        letter-spacing: 0.08em;
    }

    .jh-snapshot {
        display: grid;
        gap: var(--space-6);
        padding: var(--space-6);
        border: var(--border-w) solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .jh-snapshot[data-variant="analytical"] {
        background: var(--gradient-analytical-primary);
        color: var(--color-text-inverse);
    }

    .jh-snapshot[data-variant="analytical"] .jh-snapshot__header .jh-metadata {
        color: var(--color-text-inverse-secondary);
    }

    .jh-snapshot[data-variant="analytical"] .jh-snapshot__title {
        color: var(--color-text-inverse);
    }

    .jh-snapshot__header {
        display: grid;
        gap: var(--space-2);
    }

    .jh-snapshot__header > * {
        margin-block: 0;
    }

    .jh-snapshot[data-variant="analytical"] .jh-metric {
        background: var(--color-surface);
    }

    .jh-snapshot[data-variant="analytical"] .jh-metric__value {
        color: var(--color-analytical-highlight);
    }

    .jh-snapshot__empty {
        margin: 0;
    }

    .jh-coverage {
        display: grid;
        gap: var(--space-5);
        padding: var(--space-5);
        border-block: var(--border-w) solid var(--color-border);
        background: var(--color-surface-subtle);
    }

    .jh-coverage[data-variant="short"] {
        padding: var(--space-4);
        border-inline-start: var(--rule-w) solid var(--state-rule);
        border-inline-end: 0;
    }

    .jh-coverage__short {
        display: grid;
        gap: var(--space-3);
        color: var(--color-text-primary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-coverage__heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }

    .jh-coverage__details {
        display: grid;
        gap: 0;
        margin: 0;
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-coverage__details > div {
        display: grid;
        grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
        gap: var(--space-4);
        padding-block: var(--space-3);
        border-block-end: var(--border-w) solid var(--color-border);
    }

    .jh-coverage__details dd,
    .jh-coverage__methodology {
        overflow-wrap: anywhere;
    }

    .jh-coverage__basis-list {
        display: grid;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-coverage__basis-list li + li {
        margin-block-start: 0;
    }

    .jh-context {
        display: grid;
        gap: var(--space-4);
        padding-block-end: var(--space-4);
        border-block-end: var(--border-w) solid var(--color-border);
    }

    .jh-context > .jh-label {
        margin: 0;
    }

    .jh-context__trail,
    .jh-context__segments ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-context__trail {
        display: flex;
        min-inline-size: 0;
        flex-wrap: wrap;
        gap: var(--space-2);
        align-items: center;
    }

    .jh-context__trail li {
        display: inline-flex;
        min-inline-size: 0;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
    }

    .jh-context__trail li + li::before {
        color: var(--color-text-secondary);
        content: "/";
    }

    .jh-context__trail [aria-current="page"] {
        color: var(--color-text-primary);
        font-weight: var(--weight-body-semibold);
    }

    .jh-context__trail a,
    .jh-context__trail span {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    .jh-context__segments {
        display: grid;
        gap: var(--space-2);
        padding-block-end: var(--space-2);
    }

    .jh-context__segments ul {
        display: flex;
        inline-size: max-content;
        min-inline-size: 100%;
        gap: var(--space-2);
    }

    .jh-context__segments li {
        margin: 0;
    }

    .jh-context__segments a {
        display: inline-flex;
        min-block-size: 2.75rem;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: var(--border-w) solid var(--color-border);
        border-block-end: var(--rule-w) solid var(--state-rule);
        background: var(--color-surface);
        text-decoration: none;
        white-space: nowrap;
    }

    .jh-context__segments a:hover,
    .jh-context__segments a[aria-current="page"] {
        border-block-end-color: var(--color-accent-primary);
        text-decoration: underline;
        text-decoration-thickness: var(--rule-w);
    }

    .jh-context__availability {
        color: var(--color-text-secondary);
        font-size: var(--text-metadata);
    }

    .jh-context__segments .jh-chip {
        min-block-size: 1.75rem;
        padding: 0 var(--space-2);
    }

    .jh-context__freshness {
        color: var(--color-text-secondary);
        font-size: var(--text-metadata);
    }

    .jh-market-card {
        display: grid;
        align-content: start;
        gap: var(--space-4);
        min-block-size: 14rem;
        padding: var(--space-5);
        border: var(--border-w) solid var(--color-border);
        border-inline-start: var(--rule-w) solid var(--state-rule);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .jh-market-card__heading {
        display: grid;
        gap: var(--space-2);
    }

    .jh-market-card__country {
        color: var(--color-text-secondary);
        overflow-wrap: anywhere;
    }

    .jh-market-card__meta {
        display: grid;
        gap: var(--space-3);
        margin-block-start: auto;
        padding-block-start: var(--space-4);
        border-block-start: var(--border-w) solid var(--color-border);
        font-size: var(--text-body-small);
    }

    .jh-method-strip {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2) var(--space-4);
        padding-block: var(--space-4);
        border-block: var(--border-w) solid var(--color-border);
        font-size: var(--text-body-small);
    }

    .jh-read {
        display: grid;
        gap: var(--space-4);
        max-inline-size: var(--prose-max);
        padding-inline-start: var(--space-5);
        border-inline-start: var(--rule-w) solid var(--color-accent-primary);
    }

    .jh-read > * {
        margin-block: 0;
    }

    .jh-read__confidence {
        color: var(--color-text-secondary);
        font-weight: var(--weight-body-semibold);
    }

    .jh-continuation {
        display: grid;
        gap: var(--space-4);
        padding-block-start: var(--space-6);
        border-block-start: var(--rule-w) solid var(--color-accent-primary);
    }

    .jh-continuation ol {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-continuation li {
        margin: 0;
    }

    .jh-indicator {
        display: grid;
        gap: var(--space-5);
        padding: var(--space-6);
        border: var(--border-w) solid var(--color-border);
        border-inline-start: var(--rule-w) solid var(--state-rule);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .jh-indicator__header,
    .jh-indicator__primary {
        display: grid;
        gap: var(--space-3);
    }

    .jh-indicator__header > *,
    .jh-indicator__primary > *,
    .jh-indicator__methodology,
    .jh-chart__caption > *,
    .jh-chart__footer p,
    .jh-chart__summary,
    .jh-table > .jh-label,
    .jh-table__footer p,
    .jh-report > *,
    .jh-report__header > *,
    .jh-cta > *,
    .jh-media > .jh-label,
    .jh-methodology__intro > * {
        margin-block: 0;
    }

    .jh-indicator__score {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2);
        color: var(--color-text-primary);
        font-family: var(--font-analytical);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--tracking-metric-large);
        line-height: var(--leading-metric-large);
    }

    .jh-indicator__score-value,
    .jh-indicator__score-unavailable {
        color: var(--color-analytical-highlight);
        font-size: var(--text-metric-large);
        font-weight: var(--weight-analytical-black);
    }

    .jh-indicator__denominator {
        color: var(--color-text-secondary);
        font-size: var(--text-metric);
        font-weight: var(--weight-analytical-bold);
    }

    .jh-indicator__score-label,
    .jh-indicator__score-prefix {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
    }

    .jh-indicator__score-label {
        flex-basis: 100%;
    }

    .jh-indicator__score-prefix {
        align-self: flex-start;
    }

    .jh-indicator__score-visual,
    .jh-indicator__track,
    .jh-indicator__comparison-track {
        display: block;
        inline-size: 100%;
    }

    .jh-indicator__track,
    .jh-indicator__comparison-track {
        position: relative;
        overflow: visible;
        background: var(--color-border);
    }

    .jh-indicator__track {
        block-size: var(--space-2);
        margin-block: var(--space-2);
    }

    .jh-indicator__score-fill,
    .jh-indicator__comparison-fill {
        display: block;
        inline-size: var(--jh-score-position);
        block-size: 100%;
        transform-origin: left center;
    }

    .jh-indicator__score-fill {
        background: var(--color-analytical-highlight);
    }

    .jh-indicator__score-marker {
        position: absolute;
        inset-block: calc(var(--space-2) * -1);
        inset-inline-start: var(--jh-score-position);
        inline-size: var(--rule-w);
        background: var(--color-analytical-highlight);
        transform: translateX(-50%);
    }

    .jh-indicator__rank {
        display: grid;
        gap: var(--space-1);
        color: var(--color-text-primary);
    }

    .jh-indicator__rank-statement {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2);
    }

    .jh-indicator__rank-prefix {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
    }

    .jh-indicator__rank-value {
        color: var(--color-text-primary);
        font-family: var(--font-analytical);
        font-size: var(--text-h3);
        font-variant-numeric: tabular-nums;
        font-weight: var(--weight-display-bold);
        line-height: var(--leading-h3);
    }

    .jh-indicator__universe {
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
    }

    .jh-indicator__comparison {
        display: grid;
        gap: var(--space-3);
        padding-block-start: var(--space-4);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-indicator__comparison-title {
        margin: 0;
        color: var(--color-text-primary);
        font-family: var(--font-display);
        font-size: var(--text-h4);
        font-weight: var(--weight-display-medium);
        letter-spacing: var(--tracking-h4);
        line-height: var(--leading-h4);
    }

    .jh-indicator__comparison ul {
        display: grid;
        gap: var(--space-3);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-indicator__comparison li {
        display: grid;
        grid-template-columns: minmax(9rem, 0.75fr) minmax(8rem, 1.5fr) auto;
        align-items: center;
        gap: var(--space-3);
        margin: 0;
    }

    .jh-indicator__comparison-track {
        block-size: var(--space-2);
    }

    .jh-indicator__comparison-fill {
        background: var(--color-border-strong);
    }

    .jh-indicator__comparison li[aria-current="true"] .jh-indicator__comparison-fill {
        background: var(--color-analytical-highlight);
    }

    .jh-indicator__comparison-value {
        min-inline-size: 3ch;
        font-family: var(--font-analytical);
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    .jh-indicator__context,
    .jh-chart__context,
    .jh-report__meta,
    .jh-methodology__meta,
    .jh-methodology__dictionary {
        display: grid;
        gap: 0;
        margin: 0;
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-indicator__context > div,
    .jh-chart__context > div,
    .jh-report__meta > div,
    .jh-methodology__meta > div,
    .jh-methodology__dictionary > div {
        display: grid;
        grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
        gap: var(--space-4);
        padding-block: var(--space-3);
        border-block-end: var(--border-w) solid var(--color-border);
    }

    .jh-indicator__context dd,
    .jh-chart__context dd,
    .jh-report__meta dd,
    .jh-methodology__meta dd,
    .jh-methodology__dictionary dd {
        overflow-wrap: anywhere;
    }

    .jh-chart {
        display: grid;
        gap: var(--space-5);
        margin: 0;
        padding: var(--space-6);
        border: var(--border-w) solid var(--color-border);
        border-inline-start: var(--rule-w) solid var(--state-rule);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .jh-chart__caption {
        display: grid;
        gap: var(--space-3);
    }

    .jh-chart__question,
    .jh-chart__summary {
        max-inline-size: var(--prose-max);
    }

    .jh-chart__question,
    .jh-scroller-hint,
    .jh-chart__footer,
    .jh-table__meta,
    .jh-table__footer {
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-scroller-hint {
        margin: 0;
    }

    .jh-chart__scroller,
    .jh-table__scroller {
        border: var(--border-w) solid var(--color-border);
        background: var(--color-surface);
    }

    .jh-chart__scroller:focus-visible,
    .jh-table__scroller:focus-visible,
    .jh-methodology__rail:focus-visible {
        outline: var(--focus-w) solid var(--color-focus);
        outline-offset: var(--space-1);
    }

    .jh-chart__plot {
        display: block;
        inline-size: 100%;
        min-inline-size: 40rem;
        block-size: auto;
        background: var(--color-surface);
    }

    .jh-chart__grid path {
        fill: none;
        stroke: var(--color-border);
        stroke-width: 1;
    }

    .jh-chart__axes path,
    .jh-chart__series,
    .jh-chart__current-mark path {
        fill: none;
        stroke-linecap: square;
        stroke-linejoin: round;
    }

    .jh-chart__axes path {
        stroke: var(--color-text-secondary);
        stroke-width: 1.5;
    }

    .jh-chart__axes text {
        fill: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-min);
    }

    .jh-chart__series {
        stroke-width: 4;
    }

    .jh-chart__series--primary {
        stroke: var(--color-action-primary);
    }

    .jh-chart__series--secondary {
        stroke: var(--color-border-strong);
        stroke-dasharray: 12 8;
    }

    .jh-chart__series-marker {
        fill: var(--color-surface);
        stroke-width: 3;
    }

    .jh-chart__series-marker--primary {
        stroke: var(--color-action-primary);
    }

    .jh-chart__series-marker--secondary {
        stroke: var(--color-border-strong);
    }

    .jh-chart__current-mark path {
        stroke: var(--color-analytical-highlight);
        stroke-width: var(--rule-w);
    }

    .jh-chart__current-mark circle {
        fill: var(--color-analytical-highlight);
        stroke: var(--color-surface);
        stroke-width: var(--rule-w);
    }

    .jh-chart__legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-5);
        margin: 0;
        padding: 0;
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        list-style: none;
    }

    .jh-chart__legend li {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
    }

    .jh-chart__legend-mark {
        position: relative;
        display: inline-block;
        inline-size: var(--space-5);
        block-size: var(--space-3);
    }

    .jh-chart__legend-mark::before,
    .jh-chart__legend-mark::after {
        position: absolute;
        content: "";
    }

    .jh-chart__legend-mark::before {
        inset-block-start: calc(50% - var(--border-w));
        inset-inline: 0;
        border-block-start: var(--rule-w) solid var(--color-action-primary);
    }

    .jh-chart__legend-mark::after {
        inset-block-start: calc(50% - var(--space-1));
        inset-inline-start: calc(50% - var(--space-1));
        inline-size: var(--space-2);
        block-size: var(--space-2);
        border: var(--border-w) solid var(--color-action-primary);
        border-radius: 50%;
        background: var(--color-surface);
    }

    .jh-chart__legend-mark--secondary::before {
        border-block-start-color: var(--color-border-strong);
        border-block-start-style: dashed;
    }

    .jh-chart__legend-mark--secondary::after {
        border-color: var(--color-border-strong);
        border-radius: 0;
    }

    .jh-chart__legend-mark--current::before {
        inset-block: 0;
        inset-inline-start: calc(50% - var(--border-w));
        inline-size: var(--rule-w);
        border: 0;
        background: var(--color-analytical-highlight);
    }

    .jh-chart__legend-mark--current::after {
        border-color: var(--color-surface);
        background: var(--color-analytical-highlight);
    }

    .jh-chart__footer,
    .jh-table__meta,
    .jh-table__footer {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
    }

    .jh-chart__unavailable {
        margin: 0;
    }

    .jh-table {
        display: grid;
        gap: var(--space-4);
        padding: var(--space-5);
        border-block: var(--border-w) solid var(--color-border);
        background: var(--color-surface);
    }

    .jh-table table {
        inline-size: 100%;
        border-collapse: collapse;
        color: var(--color-text-primary);
    }

    .jh-table caption {
        padding-block: 0 var(--space-4);
        font-family: var(--font-display);
        font-size: var(--text-h4);
        font-weight: var(--weight-display-medium);
        line-height: var(--leading-h4);
        text-align: start;
    }

    .jh-table th,
    .jh-table td {
        padding: var(--space-3);
        border-block-end: var(--border-w) solid var(--color-border);
        text-align: start;
        vertical-align: top;
    }

    .jh-table thead th {
        border-block-end: var(--rule-w) solid var(--color-border-strong);
        background: var(--color-surface-subtle);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-metadata);
    }

    .jh-table tbody th {
        font-weight: var(--weight-body-semibold);
    }

    .jh-table tr[aria-current="true"] th,
    .jh-table tr[aria-current="true"] td {
        border-block-end-color: var(--color-accent-primary);
    }

    .jh-table__numeric {
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    .jh-table__current {
        display: block;
        margin-block-start: var(--space-1);
        color: var(--color-text-secondary);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-regular);
    }

    .jh-table[data-table-layout="scroll"] table {
        min-inline-size: 50rem;
    }

    .jh-table[data-table-layout="scroll"] th:first-child {
        position: sticky;
        inset-inline-start: 0;
        z-index: 1;
        background: var(--color-surface);
    }

    .jh-table[data-table-layout="scroll"] thead th:first-child {
        background: var(--color-surface-subtle);
    }

    .jh-table__stacked {
        display: none;
    }

    .jh-table__stacked-caption {
        margin: 0;
        font-family: var(--font-display);
        font-size: var(--text-h4);
        font-weight: var(--weight-display-medium);
        line-height: var(--leading-h4);
    }

    .jh-table__stacked ul {
        display: grid;
        gap: var(--space-5);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-table__stacked li {
        margin: 0;
        border: var(--border-w) solid var(--color-border);
        background: var(--color-surface);
    }

    .jh-table__stacked li[aria-current="true"] {
        border-block-start: var(--rule-w) solid var(--color-accent-primary);
    }

    .jh-table__stacked-heading {
        margin: 0;
        padding: var(--space-3);
        border-block-end: var(--rule-w) solid var(--color-border-strong);
        background: var(--color-surface-subtle);
    }

    .jh-table__stacked dl {
        margin: 0;
    }

    .jh-table__stacked dl > div {
        display: grid;
        grid-template-columns: minmax(7.5rem, 0.65fr) minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-3);
        border-block-end: var(--border-w) solid var(--color-border);
    }

    .jh-table__stacked dl > div:last-child {
        border-block-end: 0;
    }

    .jh-table__stacked dt {
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
    }

    .jh-table__stacked dd {
        overflow-wrap: anywhere;
    }

    .jh-report {
        display: grid;
        align-content: start;
        gap: var(--space-4);
        min-block-size: 18rem;
        padding: var(--space-5);
        border: var(--border-w) solid var(--color-border);
        border-block-start: var(--rule-w) solid var(--state-rule);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
    }

    .jh-report__header {
        display: grid;
        gap: var(--space-2);
    }

    .jh-report__standfirst {
        color: var(--color-text-secondary);
    }

    .jh-report__meta {
        margin-block-start: auto;
    }

    .jh-cta {
        display: grid;
        gap: var(--space-4);
        padding: var(--space-6);
        border: var(--border-w) solid var(--color-border);
        border-block-start: var(--rule-w) solid var(--color-accent-primary);
        background: var(--color-surface);
    }

    .jh-cta__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3) var(--space-5);
    }

    .jh-media {
        display: grid;
        gap: var(--space-4);
        margin: 0;
        padding: var(--space-5);
        border: var(--border-w) solid var(--color-border);
        background: var(--color-surface);
    }

    .jh-media__region {
        position: relative;
        overflow: hidden;
        background: var(--color-surface-inverse);
    }

    .jh-media__visual {
        display: block;
        inline-size: 100%;
        block-size: auto;
    }

    .jh-media__plane {
        fill: var(--color-action-primary);
        opacity: 0.48;
    }

    .jh-media__trace {
        fill: none;
        stroke: var(--color-analytical-highlight);
        stroke-linecap: square;
        stroke-width: 5;
    }

    .jh-media__points circle {
        fill: var(--color-analytical-highlight);
        stroke: var(--color-surface);
        stroke-width: var(--rule-w);
    }

    .jh-media__fallback-label {
        position: absolute;
        inset-block-end: var(--space-3);
        inset-inline-start: var(--space-3);
        padding: var(--space-1) var(--space-2);
        background: var(--color-surface);
        color: var(--color-text-primary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
    }

    .jh-media figcaption {
        display: grid;
        gap: var(--space-2);
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
    }

    .jh-media__policy {
        padding-block-start: var(--space-3);
        border-block-start: var(--border-w) solid var(--color-border);
        color: var(--color-text-primary);
    }

    .jh-methodology {
        --stack-space: var(--space-7);
    }

    .jh-methodology__intro {
        display: grid;
        max-inline-size: var(--prose-max);
        gap: var(--space-4);
    }

    .jh-methodology__layout {
        display: grid;
        gap: var(--space-7);
    }

    .jh-methodology__rail {
        max-inline-size: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .jh-methodology__rail p {
        margin-block: 0 var(--space-2);
    }

    .jh-methodology__rail ol {
        display: flex;
        inline-size: max-content;
        min-inline-size: 100%;
        gap: var(--space-2);
        margin: 0;
        padding: 0 0 var(--space-2);
        list-style: none;
    }

    .jh-methodology__rail li {
        margin: 0;
    }

    .jh-methodology__rail a {
        display: inline-flex;
        min-block-size: 2.75rem;
        align-items: center;
        padding: var(--space-2) var(--space-3);
        border: var(--border-w) solid var(--color-border);
        border-block-end: var(--rule-w) solid var(--color-accent-primary);
        background: var(--color-surface);
        text-decoration: none;
        white-space: nowrap;
    }

    .jh-methodology__content {
        display: grid;
        gap: var(--space-8);
        min-inline-size: 0;
    }

    .jh-methodology__section {
        display: grid;
        gap: var(--space-5);
        scroll-margin-block-start: calc(var(--header-height) + var(--space-4));
    }

    .jh-methodology__section > * {
        margin-block: 0;
    }

    .jh-methodology__confidence-list,
    .jh-methodology__coverage-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
        gap: var(--space-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-methodology__confidence-list li,
    .jh-methodology__coverage-list li {
        display: grid;
        align-content: start;
        gap: var(--space-3);
        margin: 0;
        padding: var(--space-4);
        border: var(--border-w) solid var(--color-border);
        border-block-start: var(--rule-w) solid var(--state-rule, var(--color-accent-primary));
        background: var(--color-surface);
    }

    .jh-methodology__confidence-list p,
    .jh-methodology__coverage-list p {
        margin: 0;
    }

    .jh-methodology__limitations {
        display: grid;
        gap: var(--space-4);
        margin: 0;
        padding-inline-start: var(--space-6);
    }

    .jh-methodology__limitations li {
        margin: 0;
        padding-inline-start: var(--space-2);
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    [data-reveal][data-reveal-state="pending"] {
        opacity: 0;
        transform: translateY(8px);
    }

    [data-reveal][data-reveal-state="revealed"],
    [data-reveal][data-reveal-state="pending"]:focus-within {
        opacity: 1;
        transform: none;
        transition:
            opacity var(--motion-standard) var(--ease-standard),
            transform var(--motion-standard) var(--ease-standard);
    }

    .jh-indicator[data-reveal-state="pending"] .jh-indicator__score-fill,
    .jh-indicator[data-reveal-state="pending"] .jh-indicator__comparison-fill {
        transform: scaleX(0);
    }

    .jh-indicator[data-reveal-state="revealed"] .jh-indicator__score-fill,
    .jh-indicator[data-reveal-state="revealed"] .jh-indicator__comparison-fill {
        transform: scaleX(1);
        transition: transform var(--motion-standard) var(--ease-standard);
    }

    .jh-indicator[data-reveal-state="pending"] .jh-indicator__score-marker {
        inset-inline-start: 0;
    }

    .jh-indicator[data-reveal-state="revealed"] .jh-indicator__score-marker {
        inset-inline-start: var(--jh-score-position);
        transition: inset-inline-start var(--motion-standard) var(--ease-standard);
    }

    .jh-media[data-specimen-component][data-reveal-state="pending"] .jh-media__trace {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }

    .jh-media[data-specimen-component][data-reveal-state="revealed"] .jh-media__trace {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset var(--motion-standard) var(--ease-standard);
    }

    .jh-site-footer__grid {
        align-items: start;
    }

    .jh-footer__sitemap {
        grid-template-columns: 1fr;
    }

    /* Footer market structure (owner review 2026-09-12): regions -> countries. */
    .jh-footer__regions,
    .jh-footer__countries {
        display: grid;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-footer__regions {
        gap: var(--space-2);
    }

    .jh-footer__regions li + li,
    .jh-footer__countries li + li {
        margin-block-start: 0;
    }

    .jh-footer__region-name {
        display: block;
        margin-block-end: var(--space-1);
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
    }

    .jh-footer__availability,
    .jh-footer__empty {
        color: var(--color-text-secondary);
        font-size: var(--text-metadata);
    }

    .jh-footer__sitemap > div,
    .jh-footer__country,
    .jh-footer__country a {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    @media (min-width: 30rem) {
        .jh-footer__sitemap {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 48rem) {
        .jh-coverage__short {
            grid-template-columns: auto repeat(2, minmax(0, 1fr));
            align-items: center;
        }

        .jh-context {
            grid-template-columns: minmax(0, 1fr) minmax(18rem, auto);
            align-items: end;
        }

        .jh-context > .jh-label {
            grid-column: 1 / -1;
        }

        .jh-context__segments {
            justify-self: end;
        }

        .jh-continuation ol {
            flex-direction: row;
            align-items: center;
        }

        .jh-indicator__context,
        .jh-chart__context,
        .jh-report__meta,
        .jh-methodology__meta {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .jh-indicator__context > div,
        .jh-chart__context > div,
        .jh-report__meta > div,
        .jh-methodology__meta > div {
            grid-template-columns: 1fr;
        }

        .jh-footer__sitemap {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    @media (min-width: 64rem) {
        .jh-methodology__layout {
            grid-template-columns: minmax(12rem, 0.25fr) minmax(0, 1fr);
            align-items: start;
        }

        .jh-methodology__rail {
            position: sticky;
            inset-block-start: calc(var(--header-height) + var(--space-4));
            overflow: visible;
        }

        .jh-methodology__rail ol {
            display: grid;
            inline-size: auto;
            min-inline-size: 0;
        }

        .jh-methodology__scroll-hint {
            display: none;
        }

        .jh-methodology__rail a {
            inline-size: 100%;
            white-space: normal;
        }

        .jh-site-footer__grid {
            grid-template-columns: minmax(10rem, 0.65fr) minmax(0, 3.35fr);
        }
    }

    @media (max-width: 40rem) {
        .jh-indicator__comparison li {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .jh-indicator__comparison-track {
            grid-column: 1 / -1;
            grid-row: 2;
        }

        .jh-table[data-table-layout="stack"] .jh-table__compact {
            display: none;
        }

        .jh-table[data-table-layout="stack"] .jh-table__stacked {
            display: grid;
            gap: var(--space-4);
        }
    }

    /* J5-C consent surfaces: compact, non-blocking, equal-weight choices. */
    .jh-consent {
        position: sticky;
        z-index: 20;
        inset-block-end: 0;
        border-block-start: var(--rule-w) solid var(--color-accent-primary);
        background: var(--color-surface);
        color: var(--color-text-primary);
    }

    .jh-consent__inner {
        display: grid;
        gap: var(--space-4);
        padding-block: var(--space-4);
    }

    .jh-consent__title {
        margin: 0;
        font-size: var(--text-h4);
        line-height: var(--leading-h4);
    }

    .jh-consent__body {
        max-inline-size: var(--prose-max);
        margin: var(--space-2) 0 0;
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-consent__form {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .jh-consent__form .jh-button {
        flex: 1 1 10rem;
        min-inline-size: 0;
    }

    .jh-site-footer__controls {
        min-inline-size: 0;
    }

    .jh-consent-control {
        border-block-start: var(--border-w) solid var(--color-border);
        padding-block: var(--space-3);
    }

    .jh-consent-control__summary {
        display: inline-flex;
        min-block-size: 2.25rem;
        align-items: center;
        gap: var(--space-2);
        cursor: pointer;
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-metadata);
        font-weight: var(--weight-metadata-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-consent-control__summary:focus-visible {
        outline: var(--focus-w) solid var(--color-focus);
        outline-offset: 3px;
    }

    .jh-consent-control__panel {
        display: grid;
        gap: var(--space-3);
        padding-block-start: var(--space-3);
    }

    .jh-consent-control__status,
    .jh-consent-control__hint {
        margin: 0;
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-consent-control__status {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .jh-consent-control__hint {
        color: var(--color-text-secondary);
    }

    @media (min-width: 48rem) {
        .jh-consent__inner {
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
        }

        .jh-consent__form .jh-button {
            flex: 0 0 auto;
        }
    }

    /* J5-D contact workflow: server-rendered form, no JavaScript required. */
    .jh-contact {
        --stack-space: var(--space-6);

        display: grid;
        gap: var(--space-7);
        padding-block: var(--section-space);
    }

    .jh-contact__intro {
        display: grid;
        gap: var(--space-3);
        max-inline-size: var(--prose-max);
    }

    .jh-contact__intro > * {
        margin: 0;
    }

    /* Owner final pass 2026-09-24: the thesis beside the form. */
    .jh-contact__thesis {
        display: grid;
        gap: var(--space-6);
        align-content: start;
    }

    .jh-contact__statement {
        max-inline-size: 22ch;
        font-family: var(--font-display);
        font-size: var(--text-h2);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h2);
        line-height: var(--leading-h2);
    }

    .jh-contact__support {
        max-inline-size: 40ch;
        font-size: var(--text-body-large);
        line-height: var(--leading-body-large);
    }

    .jh-contact__services {
        max-inline-size: 40ch;
        margin: 0;
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-contact__services > a {
        color: var(--color-action-primary);
        font-weight: var(--weight-body-semibold);
    }

    .jh-contact__panel {
        display: grid;
        gap: var(--space-5);
        min-inline-size: 0;
    }

    .jh-contact__return {
        margin: 0;
    }

    .jh-alert__body {
        min-inline-size: 0;
    }

    .jh-alert__body p {
        margin: 0;
    }

    .jh-form {
        display: grid;
        gap: var(--space-6);
        max-inline-size: var(--prose-max);
        padding: var(--space-6) var(--space-5);
        border-block-start: var(--rule-w) solid var(--color-action-primary);
        background: var(--color-surface);
    }

    .jh-form__head {
        display: grid;
        gap: var(--space-2);
    }

    .jh-form__head > h2 {
        margin: 0;
        font-size: var(--text-h3);
        letter-spacing: var(--tracking-h3);
        line-height: var(--leading-h3);
    }

    .jh-form__group {
        display: grid;
        gap: var(--space-4);
    }

    .jh-form__group-title {
        margin: 0;
        padding-block-start: var(--space-4);
        border-block-start: var(--border-w) solid var(--color-border);
        color: var(--color-text-secondary);
        font-family: var(--font-metadata);
        font-size: var(--text-label);
        font-weight: var(--weight-body-semibold);
        letter-spacing: var(--tracking-label);
        line-height: var(--leading-label);
        text-transform: uppercase;
    }

    .jh-form__grid {
        display: grid;
        gap: var(--space-4);
    }

    .jh-form__group--message .jh-form__label {
        font-family: var(--font-display);
        font-size: var(--text-h4);
        font-weight: var(--weight-display-semibold);
        letter-spacing: var(--tracking-h4);
        line-height: var(--leading-h4);
    }

    .jh-form__group--message .jh-form__textarea {
        min-block-size: 12rem;
    }

    .jh-form__note,
    .jh-form__help {
        margin: 0;
        color: var(--color-text-secondary);
        font-size: var(--text-body-small);
        line-height: var(--leading-body-small);
    }

    .jh-form__field {
        display: grid;
        gap: var(--space-2);
        min-inline-size: 0;
    }

    .jh-form__fieldset {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .jh-form__label {
        display: block;
        font-weight: var(--weight-body-semibold);
    }

    .jh-form__required {
        color: var(--color-adverse);
    }

    .jh-form__input {
        inline-size: 100%;
        min-inline-size: 0;
        min-block-size: 2.75rem;
        padding: var(--space-2) var(--space-3);
        border: var(--border-w) solid var(--color-border-strong);
        border-radius: var(--radius-sm);
        background: var(--color-canvas);
        color: var(--color-text-primary);
        transition: border-color var(--motion-fast) var(--ease-standard);
    }

    .jh-form__input:focus-visible {
        border-color: var(--color-action-primary);
        outline: var(--rule-w) solid var(--color-focus);
        outline-offset: var(--space-1);
    }

    .jh-form__textarea {
        min-block-size: 9rem;
        resize: vertical;
    }

    .jh-form__input[aria-invalid="true"] {
        border-color: var(--color-adverse);
        border-inline-start-width: var(--rule-w);
    }

    .jh-form__fieldset--invalid {
        border-inline-start: var(--rule-w) solid var(--color-adverse);
        padding-inline-start: var(--space-3);
    }

    .jh-form__options {
        display: grid;
        gap: var(--space-2);
    }

    .jh-form__option {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-block-size: 2.25rem;
    }

    .jh-form__option input {
        inline-size: 1.25rem;
        block-size: 1.25rem;
        margin: 0;
        accent-color: var(--color-action-primary);
    }

    .jh-form__error {
        margin: 0;
        color: var(--color-adverse);
        font-size: var(--text-body-small);
        font-weight: var(--weight-body-semibold);
        line-height: var(--leading-body-small);
    }

    .jh-form__error-list {
        margin: var(--space-2) 0 0;
        padding-inline-start: var(--space-5);
    }

    .jh-form__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .jh-form__actions .jh-button {
        flex: 1 1 12rem;
        min-inline-size: 0;
    }

    @media (min-width: 48rem) {
        .jh-form__actions .jh-button {
            flex: 0 0 auto;
        }

        .jh-form {
            padding: var(--space-7) var(--space-7) var(--space-8);
        }

        .jh-form__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-5);
        }

        .jh-form__options--row {
            grid-auto-flow: column;
            grid-auto-columns: max-content;
            gap: var(--space-5);
        }
    }

    @media (min-width: 64rem) {
        .jh-contact--page {
            grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
            column-gap: var(--space-9);
            align-items: start;
        }

        .jh-contact__thesis {
            position: sticky;
            inset-block-start: var(--space-8);
        }

        .jh-form {
            max-inline-size: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        [data-reveal][data-reveal-state],
        [data-reveal][data-reveal-state="pending"],
        [data-reveal][data-reveal-state="revealed"] {
            opacity: 1;
            transform: none;
            transition: none;
        }

        .jh-indicator[data-reveal-state] .jh-indicator__score-fill,
        .jh-indicator[data-reveal-state] .jh-indicator__comparison-fill {
            transform: scaleX(1);
            transition: none;
        }

        .jh-indicator[data-reveal-state] .jh-indicator__score-marker {
            inset-inline-start: var(--jh-score-position);
            transition: none;
        }

        .jh-media[data-specimen-component][data-reveal-state] .jh-media__trace {
            stroke-dasharray: none;
            stroke-dashoffset: 0;
            transition: none;
        }
    }

    @media print {
        [data-reveal][data-reveal-state="pending"] {
            opacity: 1;
            transform: none;
        }
    }
}

@layer components {
    /* J6 composes J4 evidence with compact editorial rows; no new palette. */
    .jh-experience__module,
    .jh-experience__evidence > *,
    .jh-experience__reading > * {
        min-inline-size: 0;
        overflow-wrap: anywhere;
    }

    .jh-experience__module .jh-stack {
        --stack-space: var(--space-4);
    }

    .jh-experience__segments {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--space-6);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .jh-experience__segments li {
        display: grid;
        align-content: start;
        gap: var(--space-2);
        padding-block: var(--space-4);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-experience__segments a {
        display: inline-flex;
        align-items: center;
        min-block-size: 2.75rem;
        font-weight: var(--weight-body-semibold);
    }

    .jh-experience__evidence {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: var(--space-5);
        padding-block-start: var(--space-5);
        border-block-start: var(--border-w) solid var(--color-border);
    }

    .jh-experience__evidence h2,
    .jh-experience__evidence p,
    .jh-experience__reading p,
    .jh-experience__reading h3,
    .jh-experience__reading dd {
        margin: 0;
    }

    .jh-experience__interpretation {
        padding-inline-start: var(--space-5);
        border-inline-start: var(--rule-w) solid var(--color-accent-primary);
    }

    .jh-experience__reading {
        display: grid;
        gap: var(--space-4);
        max-inline-size: var(--prose-max);
    }

    .jh-experience__reading dt {
        font-weight: var(--weight-body-semibold);
        margin-block-end: var(--space-2);
    }

    @media (max-width: 40rem) {
        .jh-experience {
            --stack-space: var(--space-6);
        }

        .jh-experience .jh-snapshot__empty {
            grid-template-columns: minmax(0, 1fr);
        }

        .jh-experience .jh-context__segments {
            min-inline-size: 0;
            inline-size: 100%;
        }

        .jh-experience .jh-context__segments ul {
            inline-size: auto;
            min-inline-size: 0;
            flex-wrap: wrap;
        }

        .jh-experience .jh-context__segments li {
            min-inline-size: 0;
            max-inline-size: 100%;
        }

        .jh-experience .jh-context__segments a {
            flex-wrap: wrap;
            white-space: normal;
        }

        .jh-experience__segments,
        .jh-experience__evidence {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}