:root {
    --ink: #17201f;
    --muted: #687471;
    --paper: #f3f5f2;
    --surface: #ffffff;
    --line: #dce2de;
    --teal: #0b695e;
    --teal-dark: #075047;
    --amber: #c77a17;
    --danger: #b33b31;
}

.autopilot-focus {
    outline: 4px solid #f4b942 !important;
    outline-offset: 3px;
}

.demo-shell {
    background: #101615;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    height: 100vh;
    overflow: hidden;
}

.demo-rail {
    color: #e8eeeb;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem 1rem;
}

.demo-brand span,
.demo-brand strong {
    display: block;
}

.demo-brand span {
    color: #78c8bc;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.demo-brand strong {
    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.demo-rail nav {
    display: grid;
    gap: 0.25rem;
    overflow-y: auto;
}

.demo-rail nav button,
.demo-controls button,
.demo-controls select {
    background: transparent;
    border: 1px solid #53605d;
    border-radius: 4px;
    color: inherit;
    padding: 0.55rem 0.65rem;
    text-align: left;
}

.demo-rail nav button.active {
    background: #0b695e;
    border-color: #4fb6a8;
}

.demo-controls {
    display: grid;
    gap: 0.4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: auto;
}

.demo-controls label {
    display: grid;
    gap: 0.25rem;
    grid-column: 1 / -1;
}

.demo-stage {
    min-width: 0;
    position: relative;
}

.demo-stage iframe {
    border: 0;
    height: 100%;
    width: 100%;
}

.demo-caption {
    background: rgba(16, 22, 21, 0.94);
    bottom: 1.25rem;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.35rem);
    left: 50%;
    max-width: min(780px, calc(100% - 2rem));
    padding: 0.8rem 1.1rem;
    position: absolute;
    transform: translateX(-50%);
    width: max-content;
}

@media (max-width: 720px) {
    .demo-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }

    .demo-rail {
        display: grid;
        grid-template-columns: 1fr auto;
        padding: 0.65rem;
    }

    .demo-rail nav {
        grid-column: 1 / -1;
        grid-template-columns: repeat(7, max-content);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .demo-controls {
        grid-template-columns: repeat(3, auto);
        margin: 0;
    }

    .demo-controls label,
    .demo-rail small {
        display: none;
    }
}

.demo-banner {
    align-items: center;
    background: #f4b942;
    color: #241900;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.4rem 1rem;
}

.demo-banner strong {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

* {
    letter-spacing: 0;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--ink);
    background-color: var(--paper);
    background-image: linear-gradient(rgba(23, 32, 31, 0.025) 1px, transparent 1px);
    background-size: 100% 28px;
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

.app-shell {
    min-height: 100vh;
}

.topbar {
    min-height: 64px;
    padding: 0 28px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    gap: 24px;
    color: #fff;
    background: #17201f;
    border-bottom: 3px solid var(--amber);
}

.brand {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.brand-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 21px;
}

.brand strong,
.brand small {
    display: block;
    line-height: 1.05;
}

.brand strong {
    font-size: 16px;
}

.brand small {
    margin-top: 3px;
    color: #aebbb7;
    font-size: 11px;
    text-transform: uppercase;
}

.primary-nav {
    align-self: stretch;
    display: flex;
    gap: 6px;
}

.primary-nav a {
    min-width: 92px;
    padding: 0 14px;
    display: grid;
    place-items: center;
    border-bottom: 3px solid transparent;
    color: #c9d1ce;
    font-size: 14px;
    text-decoration: none;
}

.primary-nav a:hover,
.primary-nav a.active {
    color: #fff;
    border-bottom-color: #4fb6a8;
}

.btn-accent {
    justify-self: end;
    color: #fff;
    background: var(--teal);
    border-color: var(--teal);
}

.btn-accent:hover {
    color: #fff;
    background: var(--teal-dark);
    border-color: var(--teal-dark);
}

.identity-strip {
    min-height: 76px;
    padding: 10px 28px;
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) minmax(180px, 1fr) auto auto auto;
    align-items: center;
    gap: 22px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
}

.identity-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.identity-person > span:last-child,
.identity-dealer {
    min-width: 0;
}

.identity-person strong,
.identity-person small,
.identity-dealer strong,
.identity-dealer small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.identity-person small,
.identity-dealer span,
.identity-dealer small {
    color: var(--muted);
    font-size: 11px;
}

.identity-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--teal);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
}

.identity-stats {
    margin: 0;
    display: flex;
    gap: 18px;
}

.identity-stats div {
    min-width: 42px;
}

.identity-stats dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.identity-stats dd {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    line-height: 1;
}

.identity-signout {
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.login-required {
    max-width: 620px;
    padding: 54px 0;
}

.login-required h1 {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: 500;
}

.login-required p:not(.eyebrow) {
    margin-bottom: 22px;
    color: var(--muted);
}

.workspace {
    padding: 34px 28px 56px;
}

.workspace-inner {
    width: min(1240px, 100%);
    margin: 0 auto;
}

.page-header {
    margin-bottom: 26px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
}

.page-header h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 36px;
    font-weight: 500;
}

.eyebrow {
    margin: 0 0 4px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.health-pill {
    padding: 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #b8d7d0;
    border-radius: 999px;
    color: var(--teal-dark);
    background: #e9f4f1;
    font-size: 13px;
    font-weight: 700;
}

.health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #168778;
}

.metric-grid {
    margin-bottom: 24px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.metric-card {
    min-height: 142px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-top: 3px solid #9aa6a2;
    border-radius: 6px;
    background: var(--surface);
}

.metric-card.metric-primary {
    border-top-color: var(--teal);
}

.metric-card span,
.metric-card small {
    color: var(--muted);
    font-size: 13px;
}

.metric-card strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-weight: 500;
    line-height: 1;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.85fr);
    gap: 24px;
}

.surface-section {
    padding: 22px 0;
    border-top: 1px solid var(--ink);
}

.section-heading {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.section-heading h2 {
    margin: 0;
    font-size: 18px;
}

.section-heading span {
    color: var(--muted);
    font-size: 13px;
}

.status-list {
    display: grid;
    gap: 14px;
}

.status-row {
    display: grid;
    grid-template-columns: minmax(130px, 180px) minmax(100px, 1fr) 28px;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.status-track {
    height: 8px;
    overflow: hidden;
    background: #dfe5e1;
}

.status-track span {
    height: 100%;
    display: block;
    background: var(--teal);
}

.provider-list {
    margin: 0;
}

.provider-list div {
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
}

.provider-list dt {
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.provider-list dd {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}

.loading-state {
    padding: 72px 0;
    color: var(--muted);
    text-align: center;
}

.page-meta {
    color: var(--muted);
    font-size: 13px;
}

.admin-tabs {
    margin-bottom: 26px;
    display: flex;
    border-bottom: 1px solid var(--line);
}

.admin-tabs button {
    min-width: 120px;
    padding: 11px 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    background: transparent;
    font-weight: 700;
}

.admin-tabs button:hover,
.admin-tabs button.active {
    color: var(--teal-dark);
    border-bottom-color: var(--teal);
}

.admin-section {
    display: grid;
    gap: 24px;
}

.admin-heading {
    margin-bottom: 0;
    align-items: end;
}

.admin-heading h2,
.audit-section h2,
.editor-panel h2 {
    margin: 0 0 3px;
    font-size: 18px;
}

.table-shell {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}

.admin-table {
    min-width: 760px;
    vertical-align: middle;
}

.admin-table thead th {
    padding: 11px 14px;
    color: #5c6865;
    background: #edf1ee;
    border-bottom-color: var(--line);
    font-size: 11px;
    text-transform: uppercase;
}

.admin-table tbody td {
    padding: 13px 14px;
    border-color: #e7ebe8;
    font-size: 13px;
}

.admin-table td strong,
.admin-table td small {
    display: block;
}

.admin-table td small {
    margin-top: 2px;
    color: var(--muted);
}

.table-actions {
    white-space: nowrap;
    text-align: right;
}

.inventory-actions {
    min-width: 250px;
}

.state-badge,
.vehicle-status {
    padding: 4px 7px;
    display: inline-block;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.state-enabled {
    color: #075b50;
    background: #dff1ed;
}

.state-pending {
    color: #80500f;
    background: #f8ead7;
}

.state-revoked {
    color: #852d26;
    background: #f6dfdc;
}

.vehicle-status {
    color: #30413e;
    background: #e4e9e6;
}

.editor-panel,
.audit-section {
    padding: 24px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--teal);
    border-radius: 6px;
    background: var(--surface);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.compact-grid {
    margin-bottom: 18px;
    gap: 12px;
}

.field {
    display: grid;
    gap: 6px;
}

.field > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.span-2 {
    grid-column: span 2;
}

.field-toggle {
    align-self: end;
    margin: 0 0 8px;
}

.action-row {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.dealership-picker {
    display: flex;
    gap: 8px;
}

.dealership-picker .form-select {
    min-width: 220px;
}

.vehicle-editor-grid {
    display: grid;
    grid-template-columns: minmax(180px, 0.6fr) repeat(2, minmax(280px, 1fr));
    gap: 32px;
}

.vehicle-editor-grid > section + section {
    padding-left: 32px;
    border-left: 1px solid var(--line);
}

.vehicle-editor-grid h3 {
    margin: 0 0 16px;
    font-size: 15px;
}

.vehicle-editor-grid > section > .field {
    margin-bottom: 14px;
}

.empty-state {
    padding: 54px 20px;
    border: 1px dashed #bdc7c3;
    color: var(--muted);
    text-align: center;
}

.customs-page-header {
    margin-bottom: 20px;
}

.customs-intake {
    max-width: 820px;
    padding: 22px 0 28px;
    border-top: 1px solid var(--ink);
}

.customs-intake-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.customs-workspace {
    margin-top: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

.customs-result-heading {
    margin-bottom: 0;
    padding-bottom: 18px;
    align-items: end;
    border-bottom: 1px solid var(--ink);
}

.customs-result-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 500;
}

.customs-summary-grid,
.field-metadata,
.source-manifest dl {
    margin: 0;
    display: grid;
    gap: 12px;
}

.customs-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.customs-summary-grid div,
.field-metadata div,
.source-manifest dl div {
    min-width: 0;
}

.customs-summary-grid dt,
.field-metadata dt,
.source-manifest dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.customs-summary-grid dd,
.field-metadata dd,
.source-manifest dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    font-size: 13px;
}

.vin-decode-panel {
    padding-top: 22px;
    border-top: 1px solid var(--ink);
}

.vin-decode-heading {
    align-items: end;
    margin-bottom: 14px;
}

.vin-decoder-provider {
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: #3c4946 !important;
    background: #edf1ee;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 10px !important;
    font-weight: 700;
}

.vin-anatomy-shell {
    padding: 16px;
    overflow-x: auto;
    color: #dce7e3;
    background: #17201f;
    border-left: 4px solid var(--teal);
}

.vin-anatomy-title {
    margin-bottom: 12px;
    color: #9cadA8;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.vin-anatomy {
    min-width: 760px;
    display: grid;
    grid-template-columns: 3fr 5fr 1fr 1fr 1fr 6fr;
    align-items: start;
    gap: 8px;
}

.vin-segment-characters {
    display: grid;
    gap: 3px;
}

.vin-segment-wmi .vin-segment-characters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vin-segment-vds .vin-segment-characters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vin-segment-sequence .vin-segment-characters {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.vin-segment-characters span {
    min-width: 28px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid #53605d;
    color: #f5f7f6;
    background: #222d2b;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 15px;
}

.vin-segment-wmi .vin-segment-characters span {
    color: #78c8bc;
    border-color: #347e74;
}

.vin-segment-vds .vin-segment-characters span {
    color: #9bd08f;
    border-color: #547c50;
}

.vin-segment-check .vin-segment-characters span,
.vin-segment-plant .vin-segment-characters span {
    color: #f4b942;
    border-color: #8c6b2c;
}

.vin-segment-year .vin-segment-characters span {
    color: #a8c5dd;
    border-color: #526d83;
}

.vin-segment-sequence .vin-segment-characters span {
    color: #b9c4c0;
}

.vin-segment-label {
    margin-top: 5px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    color: #dce7e3;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 9px;
    text-transform: uppercase;
}

.vin-segment-label span,
.vin-segment > small {
    color: #8d9d98;
}

.vin-segment > small {
    margin-top: 2px;
    display: block;
    font-size: 8px;
    line-height: 1.25;
}

.vin-decode-grid {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 18px;
}

.vin-decode-field {
    min-width: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.vin-decode-field-heading {
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.vin-decode-field > strong,
.vin-decode-field > small {
    display: block;
    overflow-wrap: anywhere;
}

.vin-decode-field > strong {
    min-height: 1.5rem;
    font-size: 14px;
}

.vin-decode-field > small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.vin-certainty {
    padding: 2px 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-size: 8px;
}

.vin-certainty-certain {
    color: #075b50;
    border-color: #b8d7d0;
    background: #dff1ed;
}

.vin-certainty-inferred {
    color: #244a67;
    border-color: #b8cddd;
    background: #e5eef4;
}

.vin-certainty-estimated {
    color: #80500f;
    border-color: #e5c697;
    background: #f8ead7;
}

.vin-certainty-pending {
    color: #852d26;
    border-color: #e3b4af;
    background: #f6dfdc;
}

.determination-badge,
.evidence-grade {
    width: max-content;
    max-width: 100%;
    padding: 4px 7px;
    display: inline-block;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: #3c4946;
    background: #edf1ee;
    font-size: 10px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.determination-ready,
.evidence-accepted,
.evidence-verified {
    color: #075b50;
    border-color: #b8d7d0;
    background: #dff1ed;
}

.determination-candidate,
.evidence-derived {
    color: #80500f;
    border-color: #e5c697;
    background: #f8ead7;
}

.determination-conflict,
.evidence-unresolved {
    color: #852d26;
    border-color: #e3b4af;
    background: #f6dfdc;
}

.evidence-authority {
    color: #244a67;
    border-color: #b8cddd;
    background: #e5eef4;
}

.evidence-section,
.customs-form-section {
    padding-top: 22px;
    border-top: 1px solid var(--ink);
}

.evidence-section > .section-heading {
    margin-bottom: 14px;
}

.evidence-table,
.logic-table {
    min-width: 900px;
    vertical-align: top;
}

.evidence-table thead th,
.logic-table thead th {
    padding: 10px 12px;
    color: #5c6865;
    background: #edf1ee;
    border-bottom-color: var(--line);
    font-size: 10px;
    text-transform: uppercase;
}

.evidence-table tbody td,
.logic-table tbody td {
    padding: 11px 12px;
    border-color: #e7ebe8;
    font-size: 12px;
}

.evidence-table td small {
    margin-top: 4px;
    display: block;
    color: var(--muted);
}

.customs-form-heading {
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 16px;
}

.customs-form-heading > span {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
}

.evidence-field {
    padding: 20px 0;
    border-top: 1px solid var(--line);
}

.evidence-field-heading {
    margin-bottom: 16px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.evidence-field-heading > div:first-child > span,
.evidence-field-heading > div:first-child > strong {
    display: block;
}

.evidence-field-heading > div:first-child > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.evidence-field-heading > div:first-child > strong {
    margin-top: 2px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 28px;
    font-weight: 500;
}

.field-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    gap: 6px;
}

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

.example-proof {
    padding: 18px;
    border-left: 4px solid var(--teal);
    background: var(--surface);
}

.example-proof a {
    overflow-wrap: anywhere;
}

.proof-claim {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.proof-claim strong {
    font-size: 11px;
    text-transform: uppercase;
}

.proof-claim p {
    margin: 4px 0 0;
}

.evidence-requirements,
.form-flags,
.checker-findings,
.rule-audit-body {
    margin-top: 16px;
    font-size: 13px;
}

.evidence-requirements h3,
.form-flags h3,
.checker-findings h3,
.rule-audit-body h3 {
    margin: 0 0 7px;
    font-size: 12px;
    text-transform: uppercase;
}

.evidence-requirements p,
.evidence-requirements ul,
.form-flags ul,
.checker-findings ul,
.rule-audit-body ul {
    margin-bottom: 0;
}

.logic-trace,
.rule-audit {
    margin-top: 16px;
}

.logic-trace > summary,
.rule-audit > summary {
    cursor: pointer;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 700;
}

.logic-trace > .table-shell {
    margin-top: 9px;
}

.checker-findings {
    padding: 16px 18px;
    border-left: 4px solid var(--amber);
    background: #fbf4e9;
}

.checker-findings > div + div {
    margin-top: 14px;
}

.rule-audit-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.rule-audit {
    margin-top: 0;
    border: 1px solid var(--line);
    background: var(--surface);
}

.rule-audit > summary {
    padding: 11px 13px;
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(100px, 0.5fr) auto auto;
    align-items: center;
    gap: 10px;
    list-style-position: inside;
}

.rule-audit-body {
    margin: 0;
    padding: 16px;
    border-top: 1px solid var(--line);
}

.source-manifest {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    border: 1px solid var(--line);
    background: var(--line);
}

.source-manifest article {
    min-width: 0;
    padding: 17px;
    background: var(--surface);
}

.source-manifest article > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.source-manifest h3 {
    margin: 9px 0 14px;
    font-size: 14px;
}

.correction-list {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.correction-list article {
    padding: 14px 16px;
    border-left: 4px solid var(--teal);
    background: var(--surface);
    font-size: 13px;
}

.correction-list article > strong,
.correction-list article > span,
.correction-list article > small {
    display: block;
}

.empty-ledger,
.customs-disclaimers {
    color: var(--muted);
    font-size: 12px;
}

.empty-ledger {
    margin: 13px 0 0;
}

.customs-disclaimers {
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.customs-disclaimers p:last-child {
    margin-bottom: 0;
}

@media (max-width: 860px) {
    .topbar {
        padding: 0 16px;
        grid-template-columns: 1fr auto;
    }

    .primary-nav {
        min-height: 48px;
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
        order: 3;
    }

    .topbar {
        padding-top: 10px;
    }

    .identity-strip {
        padding: 12px 16px;
        grid-template-columns: minmax(190px, 1fr) minmax(150px, 1fr) auto;
        gap: 12px;
    }

    .identity-access {
        display: none;
    }

    .identity-signout {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }

    .identity-stats {
        grid-column: 1 / -1;
        padding-top: 9px;
        justify-content: space-around;
        border-top: 1px solid var(--line);
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-editor-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-editor-grid > section + section {
        padding: 24px 0 0;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

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

    .vin-decode-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .source-manifest {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .workspace {
        padding: 26px 16px 44px;
    }

    .brand strong {
        font-size: 14px;
    }

    .primary-nav a {
        min-width: 0;
        padding: 0 11px;
    }

    .identity-strip {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .identity-dealer {
        grid-column: 1 / -1;
    }

    .identity-signout {
        grid-column: 2;
    }

    .metric-grid {
        grid-template-columns: 1fr;
    }

    .page-header h1 {
        font-size: 30px;
    }

    .status-row {
        grid-template-columns: 112px minmax(80px, 1fr) 24px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: span 1;
    }

    .admin-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .dealership-picker .form-select {
        min-width: 0;
        width: 100%;
    }

    .customs-intake-grid,
    .customs-summary-grid,
    .field-metadata {
        grid-template-columns: 1fr;
    }

    .vin-decode-grid {
        grid-template-columns: 1fr;
    }

    .customs-result-heading,
    .evidence-field-heading,
    .customs-form-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .customs-form-heading > span {
        margin-left: 0;
    }

    .field-badges {
        justify-content: start;
    }

    .rule-audit > summary {
        grid-template-columns: 1fr auto;
    }
}
/* ── Vehicle paper doll ───────────────────────────────────────────────────────
   Every piece needed to make a car compliant and sold, drawn as a slot on the car.

   State is carried by outline-vs-fill first and colour second. Roughly one man in
   twelve cannot separate red from green, and this is a screen someone reads all day
   to decide what to do next — so a dashed hollow ring means "not done" even in
   greyscale, and colour only reinforces what the shape already said.
   ───────────────────────────────────────────────────────────────────────────── */
.vehicle-doll {
    --doll-body: #eef1f4;
    --doll-glass: #dfe5eb;
    --doll-stroke: #ccd2d8;
}

.vehicle-doll-svg {
    width: 100%;
    max-width: 26rem;
    height: auto;
    display: block;
}

.doll-slot {
    cursor: pointer;
}

.doll-slot circle {
    stroke-width: 2.5;
    transition: transform .12s ease, filter .12s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.doll-slot:hover circle,
.doll-slot:focus-visible circle {
    transform: scale(1.12);
}

.doll-slot:focus-visible {
    outline: none;
}

.doll-slot:focus-visible circle {
    filter: drop-shadow(0 0 0 2px var(--teal));
    stroke: var(--teal);
}

.doll-glyph {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: .3px;
    pointer-events: none;
    user-select: none;
}

/* Not started, and expected: hollow with a dashed edge. The hole is the point. */
.doll-empty circle { fill: var(--surface); stroke: var(--muted); }
.doll-empty .doll-glyph { fill: var(--muted); }

/* Started but unfinished: solid edge, still-light fill. */
.doll-partial circle { fill: #fdf1dd; stroke: var(--amber); }
.doll-partial .doll-glyph { fill: #7a4c0c; }

/* Equipped. */
.doll-filled circle { fill: var(--teal); stroke: var(--teal-dark); }
.doll-filled .doll-glyph { fill: #ffffff; }

/* Recorded but wrong — overdue, contradicted, disputed. Also carries a "!" badge so
   the state survives greyscale and colour-blindness. */
.doll-attention circle { fill: #fbe6e4; stroke: var(--danger); }
.doll-attention .doll-glyph { fill: var(--danger); }
.doll-alert-dot { fill: var(--danger); stroke: var(--surface); stroke-width: 1.5; }
.doll-alert-mark { fill: #ffffff; font-size: 8px; font-weight: 700; pointer-events: none; }

/* Nothing recorded and no basis to say it is needed. Ghosted rather than empty:
   drawing an unequipped slot for a piece this car may never require invents work. */
.doll-ghost circle { fill: var(--surface); stroke: #e4e8e5; }
.doll-ghost .doll-glyph { fill: #c3cbc7; }

.vehicle-doll-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .35rem;
    margin-top: .75rem;
}

.doll-legend-item {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: .4rem;
    padding: .4rem .5rem;
    font: inherit;
    cursor: pointer;
}

.doll-legend-item:hover { border-color: var(--teal); }

.doll-legend-mark {
    flex: 0 0 2.1rem;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.5rem;
    border-radius: 999px;
    border: 2px solid;
}

.doll-legend-item.doll-empty .doll-legend-mark {
    border-style: dashed; border-color: var(--muted); color: var(--muted);
}
.doll-legend-item.doll-partial .doll-legend-mark {
    border-color: var(--amber); background: #fdf1dd; color: #7a4c0c;
}
.doll-legend-item.doll-filled .doll-legend-mark {
    border-color: var(--teal-dark); background: var(--teal); color: #fff;
}
.doll-legend-item.doll-attention .doll-legend-mark {
    border-color: var(--danger); background: #fbe6e4; color: var(--danger);
}
.doll-legend-item.doll-ghost .doll-legend-mark {
    border-style: dashed; border-color: #e4e8e5; color: #c3cbc7;
}

.doll-legend-text { display: flex; flex-direction: column; min-width: 0; }
.doll-legend-label { font-weight: 600; font-size: .82rem; color: var(--ink); }
.doll-legend-detail { font-size: .74rem; color: var(--muted); }
.doll-legend-action { font-size: .74rem; font-weight: 600; color: var(--teal); margin-top: .1rem; }

.vehicle-doll-compact .vehicle-doll-svg { max-width: 9rem; }
.vehicle-doll-compact .doll-glyph { font-size: 0; }

@media (prefers-reduced-motion: reduce) {
    .doll-slot circle { transition: none; }
    .doll-slot:hover circle, .doll-slot:focus-visible circle { transform: none; }
}

/* A blocked piece is real and coming, but is not the operator's move. It reads as
   pending rather than neglected: a fine even dash instead of the open gap of an
   untouched slot, and no pointer affordance suggesting a button that is not there. */
.vehicle-doll .doll-blocked circle {
    fill: none;
    stroke: var(--muted, #6b7785);
    stroke-width: 2;
    stroke-dasharray: 2 2;
    opacity: .75;
}

.vehicle-doll .doll-blocked .doll-glyph {
    fill: var(--muted, #6b7785);
    opacity: .85;
}

.doll-legend-item.doll-blocked .doll-legend-label::after {
    content: " · waiting";
    font-weight: 400;
    color: var(--muted, #6b7785);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Printable readiness checklist — the third variation of the icon view, and the
   one that leaves the screen.

   The print rules are the point. On paper there is no hover, no click, and often
   no colour, so state is carried by a drawn ballot box and a word. Everything
   that is only useful on a screen (nav, buttons, the doll itself) is hidden when
   printing, so the sheet is the checklist and nothing else.
   ───────────────────────────────────────────────────────────────────────────── */
.vehicle-checklist {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--line, #d7dde3);
    border-radius: 6px;
    background: var(--paper, #fff);
}

.checklist-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--ink, #1c242c);
    padding-bottom: .5rem;
    margin-bottom: .75rem;
}

.checklist-title { font-size: 1rem; margin: 0; }
.checklist-desc { font-weight: 600; }
.checklist-vin,
.checklist-printed { font-size: .8rem; color: var(--muted, #6b7785); }
.checklist-meta { text-align: right; font-size: .85rem; }

.checklist-table { width: 100%; border-collapse: collapse; font-size: .85rem; }

.checklist-table th {
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted, #6b7785);
    border-bottom: 1px solid var(--line, #d7dde3);
    padding: .25rem .4rem;
}

.checklist-table td {
    padding: .35rem .4rem;
    border-bottom: 1px solid var(--line, #eceff2);
    vertical-align: top;
}

.checklist-mark { font-size: 1.05rem; line-height: 1; }
.checklist-label { font-weight: 600; white-space: nowrap; }
.checklist-state { white-space: nowrap; color: var(--muted, #6b7785); }
.checklist-detail { color: var(--muted, #6b7785); }
.checklist-action { display: block; color: var(--ink, #1c242c); font-weight: 500; }

/* A completed row is struck back visually so the eye lands on what is left. */
.checklist-row.checklist-filled .checklist-label { font-weight: 400; opacity: .65; }
.checklist-row.checklist-attention .checklist-label::after { content: " (!)"; }

.checklist-na {
    margin-top: .75rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--line, #d7dde3);
    font-size: .8rem;
    color: var(--muted, #6b7785);
}

.checklist-na-head { text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
.checklist-na ul { margin: .25rem 0 0; padding-left: 1.1rem; }

.checklist-sign { display: flex; gap: 2rem; margin-top: 1.25rem; font-size: .8rem; }
.checklist-sign-line { display: flex; align-items: flex-end; gap: .5rem; flex: 1; }

.checklist-rule {
    flex: 1;
    border-bottom: 1px solid var(--ink, #1c242c);
    height: 1.1rem;
}

.checklist-rule-short { max-width: 8rem; }

@media print {
    /* The sheet is the checklist. Everything that only works on a screen goes away. */
    body * { visibility: hidden; }
    .vehicle-checklist,
    .vehicle-checklist * { visibility: visible; }

    .vehicle-checklist {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none;
        padding: 0;
        font-size: 10pt;
    }

    .d-print-none { display: none !important; }

    /* Colour is not meaning on paper — the drawn box and the word already said it. */
    .checklist-row,
    .checklist-detail,
    .checklist-state { color: #000 !important; }

    .checklist-table { page-break-inside: auto; }
    .checklist-row { page-break-inside: avoid; }
}