/* Batch 026: semantic Native presentation for public Job Detail and Demo Workspace. */
@layer components {
    body.hrc-design-system-v1.hrc-native-presentation-route {
        margin: var(--hrc-space-0);
        background: var(--hrc-color-bg-app);
        color: var(--hrc-color-text);
        font-family: var(--hrc-font-sans);
    }

    body.hrc-design-system-v1.hrc-native-presentation-route :where(a, button, input, select, textarea):focus-visible {
        outline: var(--hrc-focus-width) solid var(--hrc-color-focus);
        outline-offset: var(--hrc-focus-offset);
        box-shadow: var(--hrc-focus-ring);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-detail-shell {
        width: min(calc(100% - (var(--hrc-page-gutter) * 2)), var(--hrc-container-lg));
        margin-inline: auto;
        padding-block: var(--hrc-space-6) var(--hrc-space-12);
        display: grid;
        gap: var(--hrc-section-gap);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-detail-hero {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-detail-min)), 1fr));
        align-items: start;
        gap: var(--hrc-section-gap);
        padding: var(--hrc-space-0);
        border: var(--hrc-space-0);
        background: transparent;
        box-shadow: none;
    }

    body.hrc-design-system-v1.hrc-module-jobs :where(.job-detail-card, .job-apply-card, .job-section-card) {
        min-width: var(--hrc-space-0);
        padding: var(--hrc-card-padding);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-card);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-detail-card {
        background: linear-gradient(145deg, var(--hrc-color-surface), var(--hrc-module-tint-subtle));
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-company {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--hrc-space-3);
        color: var(--hrc-module-accent-strong);
        font-weight: var(--hrc-weight-bold);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-company img {
        width: calc(var(--hrc-control-height-lg) + var(--hrc-space-2));
        height: calc(var(--hrc-control-height-lg) + var(--hrc-space-2));
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        object-fit: contain;
        background: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-detail-card h1 {
        margin-block: var(--hrc-space-3);
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-3xl);
        line-height: var(--hrc-leading-tight);
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1.hrc-module-jobs :where(.job-detail-card > p, .job-section-card > p, .job-apply-card > p) {
        margin-block: var(--hrc-space-2) var(--hrc-space-0);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-lg);
        line-height: var(--hrc-leading-relaxed);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-meta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-controls-min)), 1fr));
        gap: var(--hrc-space-3);
        margin-block-start: var(--hrc-space-5);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-meta-grid > span {
        min-width: var(--hrc-space-0);
        display: grid;
        gap: var(--hrc-space-2);
        padding: var(--hrc-space-4);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
        line-height: var(--hrc-leading-normal);
        box-shadow: none;
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-meta-grid b {
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-md);
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-apply-card {
        position: sticky;
        inset-block-start: calc(var(--hrc-topbar-height) + var(--hrc-space-3));
        display: grid;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-jobs :where(.job-apply-card h2, .job-section-card h2) {
        margin: var(--hrc-space-0);
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-xl);
        line-height: var(--hrc-leading-tight);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-apply-card form {
        display: grid;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-field-label {
        display: block;
        min-width: var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-field-label > span:not(.hrc-searchable-select) {
        position: absolute;
        width: var(--hrc-border-width);
        height: var(--hrc-border-width);
        padding: var(--hrc-space-0);
        margin: calc(var(--hrc-border-width) * -1);
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-apply-card :where(input:not([type="hidden"]):not([type="checkbox"]), select) {
        width: 100%;
        min-height: var(--hrc-control-height-lg);
        box-sizing: border-box;
        margin: var(--hrc-space-0);
        padding-inline: var(--hrc-space-4);
        border: var(--hrc-border-width) solid var(--hrc-color-border-strong);
        border-radius: var(--hrc-radius-control);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
        font: inherit;
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-consent {
        min-height: var(--hrc-control-height);
        display: grid;
        grid-template-columns: var(--hrc-control-height) minmax(var(--hrc-space-0), 1fr);
        align-items: start;
        gap: var(--hrc-space-2);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
        line-height: var(--hrc-leading-normal);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-consent input {
        width: var(--hrc-icon-md);
        height: var(--hrc-icon-md);
        margin: var(--hrc-space-3);
        accent-color: var(--hrc-color-brand);
    }

    body.hrc-design-system-v1.hrc-module-jobs :where(.job-apply-card button, .job-call-button) {
        width: 100%;
        min-height: var(--hrc-control-height-lg);
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: var(--hrc-space-0);
        border-radius: var(--hrc-radius-control);
        text-align: center;
        text-decoration: none;
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-call-button {
        margin-block-start: var(--hrc-space-2);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-section-card {
        display: grid;
        gap: var(--hrc-space-3);
        margin: var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-related-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-detail-min)), 1fr));
        gap: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-alert {
        padding: var(--hrc-space-3) var(--hrc-space-4);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-control);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-alert-success {
        border-color: color-mix(in srgb, var(--hrc-color-success) 34%, var(--hrc-color-border));
        background: var(--hrc-color-success-soft);
        color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1.hrc-module-jobs .job-alert-danger {
        border-color: color-mix(in srgb, var(--hrc-color-danger) 34%, var(--hrc-color-border));
        background: var(--hrc-color-danger-soft);
        color: var(--hrc-color-danger);
    }

    body.hrc-design-system-v1.hrc-module-jobs .ai-honeypot {
        position: absolute;
        inset-inline-start: calc(var(--hrc-container-4k) * -1);
    }

    body.hrc-design-system-v1.hrc-module-demo {
        min-height: 100dvh;
    }

    body.hrc-design-system-v1.hrc-module-demo .hrc-skip-link {
        position: fixed;
        inset-block-start: calc(var(--hrc-space-12) * -2);
        inset-inline-start: var(--hrc-space-4);
        z-index: var(--hrc-z-toast);
        min-height: var(--hrc-control-height);
        display: inline-flex;
        align-items: center;
        padding-inline: var(--hrc-space-4);
        border-radius: var(--hrc-radius-control);
        background: var(--hrc-color-text);
        color: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1.hrc-module-demo .hrc-skip-link:focus {
        inset-block-start: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-shell {
        min-height: 100dvh;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        background: var(--hrc-color-bg-app);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-sidebar {
        flex: 1 1 var(--hrc-sidebar-width);
        min-width: var(--hrc-space-0);
        display: flex;
        flex-direction: column;
        gap: var(--hrc-space-5);
        padding: var(--hrc-space-5);
        border-inline-end: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-sidebar-surface);
        color: var(--hrc-color-text);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-app {
        flex: 999 1 var(--hrc-container-sm);
        min-width: var(--hrc-space-0);
        display: flex;
        flex-direction: column;
    }

    body.hrc-design-system-v1.hrc-module-demo :where(.demo-brand, .demo-topbar__context) {
        min-width: var(--hrc-space-0);
        display: flex;
        align-items: center;
        gap: var(--hrc-space-3);
        color: var(--hrc-color-text);
        text-decoration: none;
    }

    body.hrc-design-system-v1.hrc-module-demo :where(.demo-brand__mark, .demo-mobile-mark, .demo-avatar) {
        width: var(--hrc-control-height-lg);
        height: var(--hrc-control-height-lg);
        flex: 0 0 var(--hrc-control-height-lg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-brand);
        color: var(--hrc-neutral-0);
        font-weight: var(--hrc-weight-bold);
        text-decoration: none;
    }

    body.hrc-design-system-v1.hrc-module-demo :where(.demo-brand, .demo-topbar__context) > span:last-child {
        min-width: var(--hrc-space-0);
        display: grid;
        gap: var(--hrc-space-1);
    }

    body.hrc-design-system-v1.hrc-module-demo :where(.demo-brand small, .demo-topbar small) {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-nav {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-controls-min)), 1fr));
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-nav a {
        min-height: var(--hrc-control-height);
        display: flex;
        align-items: center;
        gap: var(--hrc-space-3);
        padding-inline: var(--hrc-space-3);
        border-radius: var(--hrc-radius-control);
        color: var(--hrc-color-text-muted);
        text-decoration: none;
        font-weight: var(--hrc-weight-medium);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-nav a:is(:hover, .is-active, [aria-current="page"]) {
        background: var(--hrc-color-brand-soft);
        color: var(--hrc-color-brand-hover);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-sidebar__status {
        margin-block-start: auto;
        display: grid;
        grid-template-columns: var(--hrc-icon-md) minmax(var(--hrc-space-0), 1fr);
        gap: var(--hrc-space-1) var(--hrc-space-2);
        padding: var(--hrc-space-4);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-sidebar__status small {
        grid-column: 2;
        color: var(--hrc-color-text-muted);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-live-dot {
        width: var(--hrc-icon-sm);
        height: var(--hrc-icon-sm);
        align-self: center;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-success);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-topbar {
        min-height: var(--hrc-topbar-height);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
        padding: var(--hrc-space-3) var(--hrc-page-gutter);
        border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-color-surface);
        box-shadow: var(--hrc-shadow-xs);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-topbar__actions {
        min-width: var(--hrc-space-0);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-data-badge {
        min-height: var(--hrc-control-height);
        display: inline-flex;
        align-items: center;
        gap: var(--hrc-space-2);
    }

    body.hrc-design-system-v1.hrc-module-demo #demo-main-content {
        width: min(calc(100% - (var(--hrc-page-gutter) * 2)), var(--hrc-container-xl));
        margin-inline: auto;
        padding-block: var(--hrc-space-6) var(--hrc-space-12);
        display: grid;
        gap: var(--hrc-section-gap);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-section-gap);
        background: linear-gradient(135deg, var(--hrc-color-surface), var(--hrc-module-tint));
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-hero__copy {
        flex: 999 1 var(--hrc-container-sm);
        min-width: var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-eyebrow {
        display: block;
        margin-block-end: var(--hrc-space-2);
        color: var(--hrc-module-accent-strong);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-bold);
        letter-spacing: var(--hrc-tracking-eyebrow);
        text-transform: uppercase;
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-hero h1 {
        margin: var(--hrc-space-0);
        font-size: var(--hrc-text-3xl);
        line-height: var(--hrc-leading-tight);
        overflow-wrap: anywhere;
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-hero p {
        margin-block: var(--hrc-space-3) var(--hrc-space-0);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-lg);
        line-height: var(--hrc-leading-relaxed);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-hero__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--hrc-space-3);
        margin-block-start: var(--hrc-space-5);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-button {
        min-height: var(--hrc-control-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-health {
        flex: 1 1 var(--hrc-layout-controls-min);
        min-width: min(100%, var(--hrc-layout-controls-min));
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-health__ring {
        width: calc(var(--hrc-control-height-lg) * 2);
        height: calc(var(--hrc-control-height-lg) * 2);
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--hrc-space-2) solid var(--hrc-color-success-soft);
        border-block-start-color: var(--hrc-color-success);
        border-radius: var(--hrc-radius-pill);
        color: var(--hrc-color-text);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-health__ring strong {
        font-size: var(--hrc-text-2xl);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpis {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-compact-metrics-min)), 1fr));
        gap: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpi {
        display: grid;
        grid-template-columns: var(--hrc-control-height) minmax(var(--hrc-space-0), 1fr);
        gap: var(--hrc-space-2) var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpi__icon {
        width: var(--hrc-control-height);
        height: var(--hrc-control-height);
        grid-row: span 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--hrc-radius-control);
        background: var(--hrc-color-info-soft);
        color: var(--hrc-color-info);
        font-weight: var(--hrc-weight-bold);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpi__icon.is-teal {
        background: var(--hrc-color-success-soft);
        color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpi__icon.is-violet {
        background: var(--hrc-module-tint);
        color: var(--hrc-module-accent-strong);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpi__icon.is-amber {
        background: var(--hrc-color-warning-soft);
        color: var(--hrc-color-warning);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpi small {
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpi strong {
        color: var(--hrc-color-text);
        font-size: var(--hrc-text-2xl);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-kpi p {
        grid-column: 1 / -1;
        margin: var(--hrc-space-0);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
    }

    body.hrc-design-system-v1.hrc-module-demo .is-positive {
        color: var(--hrc-color-success);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1.hrc-module-demo :where(.demo-primary-grid, .demo-secondary-grid) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--hrc-layout-detail-min)), 1fr));
        gap: var(--hrc-section-gap);
    }

    body.hrc-design-system-v1.hrc-module-demo .hrc-saas-card {
        min-width: var(--hrc-space-0);
        padding: var(--hrc-card-padding);
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-card);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text);
        box-shadow: var(--hrc-shadow-sm);
    }

    body.hrc-design-system-v1.hrc-module-demo .hrc-saas-card__header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
        margin-block-end: var(--hrc-space-5);
    }

    body.hrc-design-system-v1.hrc-module-demo .hrc-saas-card__header :where(h2, p) {
        margin: var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-demo .hrc-saas-card__header h2 {
        font-size: var(--hrc-text-xl);
    }

    body.hrc-design-system-v1.hrc-module-demo .hrc-saas-card__header p {
        margin-block-start: var(--hrc-space-1);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-chart {
        display: grid;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-chart__plot {
        min-height: calc(var(--hrc-control-height-lg) * 4);
        display: flex;
        align-items: end;
        gap: var(--hrc-space-2);
        padding: var(--hrc-space-4);
        border-radius: var(--hrc-radius-md);
        background: var(--hrc-color-surface-soft);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-bar {
        height: 72%;
        flex: 1 1 var(--hrc-space-6);
        min-width: var(--hrc-space-3);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        border-radius: var(--hrc-radius-sm) var(--hrc-radius-sm) var(--hrc-space-0) var(--hrc-space-0);
        background: var(--hrc-color-brand);
        color: var(--hrc-neutral-0);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-bar i {
        font-size: var(--hrc-text-xs);
        font-style: normal;
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-bar.is-81 { height: 81%; }
    body.hrc-design-system-v1.hrc-module-demo .demo-bar.is-76 { height: 76%; }
    body.hrc-design-system-v1.hrc-module-demo .demo-bar.is-89 { height: 89%; }
    body.hrc-design-system-v1.hrc-module-demo .demo-bar.is-96 { height: 96%; }
    body.hrc-design-system-v1.hrc-module-demo .demo-bar.is-84 { height: 84%; }
    body.hrc-design-system-v1.hrc-module-demo .demo-bar.is-78 { height: 78%; }

    body.hrc-design-system-v1.hrc-module-demo .demo-chart__labels {
        display: grid;
        grid-template-columns: repeat(7, minmax(var(--hrc-space-0), 1fr));
        gap: var(--hrc-space-2);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        text-align: center;
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-progress {
        display: grid;
        grid-template-columns: minmax(var(--hrc-space-0), 1fr) auto;
        align-items: center;
        gap: var(--hrc-space-3);
        margin-block-end: var(--hrc-space-4);
    }

    body.hrc-design-system-v1.hrc-module-demo progress {
        width: 100%;
        height: var(--hrc-space-2);
        accent-color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-checklist {
        display: grid;
        gap: var(--hrc-space-3);
        margin: var(--hrc-space-0);
        padding: var(--hrc-space-0);
        list-style: none;
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-checklist li {
        display: grid;
        grid-template-columns: var(--hrc-control-height) minmax(var(--hrc-space-0), 1fr);
        align-items: center;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-checklist li > span {
        width: var(--hrc-control-height);
        height: var(--hrc-control-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-text-muted);
        font-weight: var(--hrc-weight-bold);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-checklist .is-complete > span {
        background: var(--hrc-color-success-soft);
        color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-checklist li > div {
        min-width: var(--hrc-space-0);
        display: grid;
        gap: var(--hrc-space-1);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-checklist small {
        color: var(--hrc-color-text-muted);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        border: var(--hrc-border-width) solid var(--hrc-color-border);
        border-radius: var(--hrc-radius-md);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-table-wrap table {
        width: 100%;
        min-width: var(--hrc-container-sm);
        border-collapse: collapse;
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-table-wrap :where(th, td) {
        padding: var(--hrc-space-3) var(--hrc-space-4);
        border-block-end: var(--hrc-border-width) solid var(--hrc-color-border);
        text-align: start;
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-table-wrap th {
        background: var(--hrc-color-surface-soft);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-table-wrap td small {
        display: block;
        margin-block-start: var(--hrc-space-1);
        color: var(--hrc-color-text-muted);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-status {
        min-height: var(--hrc-control-height);
        display: inline-flex;
        align-items: center;
        padding-inline: var(--hrc-space-3);
        border-radius: var(--hrc-radius-pill);
        font-size: var(--hrc-text-xs);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-status.is-success {
        background: var(--hrc-color-success-soft);
        color: var(--hrc-color-success);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-status.is-info {
        background: var(--hrc-color-info-soft);
        color: var(--hrc-color-info);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-status.is-warning {
        background: var(--hrc-color-warning-soft);
        color: var(--hrc-color-warning);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-text-link,
    body.hrc-design-system-v1.hrc-module-demo .demo-footer a {
        min-height: var(--hrc-control-height);
        display: inline-flex;
        align-items: center;
        color: var(--hrc-color-brand-hover);
        font-weight: var(--hrc-weight-semibold);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-empty .hrc-empty-state {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: var(--hrc-space-3);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-empty :where(h2, p) {
        margin: var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-empty p {
        color: var(--hrc-color-text-muted);
        line-height: var(--hrc-leading-relaxed);
    }

    body.hrc-design-system-v1.hrc-module-demo .hrc-empty-state__icon {
        width: var(--hrc-control-height-lg);
        height: var(--hrc-control-height-lg);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--hrc-radius-pill);
        background: var(--hrc-color-success-soft);
        color: var(--hrc-color-success);
        font-weight: var(--hrc-weight-bold);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-footer {
        margin-block-start: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--hrc-space-3);
        padding: var(--hrc-space-4) var(--hrc-page-gutter);
        border-block-start: var(--hrc-border-width) solid var(--hrc-color-border);
        background: var(--hrc-color-surface);
        color: var(--hrc-color-text-muted);
        font-size: var(--hrc-text-sm);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-footer p {
        margin: var(--hrc-space-0);
    }

    body.hrc-design-system-v1.hrc-module-demo .demo-visually-hidden {
        position: absolute;
        width: var(--hrc-border-width);
        height: var(--hrc-border-width);
        padding: var(--hrc-space-0);
        margin: calc(var(--hrc-border-width) * -1);
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: var(--hrc-space-0);
    }
}