/*
 * Application styles. Source of the values: the approved Claude Design canvas
 * ("Visual direction" and "Status language" artboards). tests/js/ui/design-tokens.test.mjs pins them.
 *
 * Theme selection: without a stored preference the page is dark and follows a light operating system
 * (the media query). The theme controller sets data-bs-theme from the preference, which overrides both.
 * Keep the three light blocks identical; the test fails when they drift.
 */

:root {
    color-scheme: dark;
    --carnet-ground: #111316;
    --carnet-surface-1: #181B1F;
    --carnet-surface-2: #20242A;
    --carnet-surface-3: #2A2F36;
    --carnet-border: #2C3138;
    --carnet-border-strong: #3B414A;
    --carnet-text: #E9EBEE;
    --carnet-text-2: #AEB4BC;
    --carnet-text-3: #848B94;
    --carnet-accent: #5AA2F5;
    --carnet-accent-on: #0A1626;
    --carnet-accent-soft: rgba(90, 162, 245, .14);
    --carnet-ok: #43C281;
    --carnet-ok-soft: rgba(67, 194, 129, .13);
    --carnet-warn: #EBA93F;
    --carnet-warn-soft: rgba(235, 169, 63, .14);
    --carnet-err: #F26A63;
    --carnet-err-soft: rgba(242, 106, 99, .14);
    --carnet-unknown: #A3ABB5;
    --carnet-unknown-soft: rgba(163, 171, 181, .12);
    --carnet-unavailable: #7F868F;
    --carnet-unavailable-soft: rgba(127, 134, 143, .10);
    --carnet-demo: #B897F5;
    --carnet-demo-soft: rgba(184, 151, 245, .14);
}

@media (prefers-color-scheme: light) {
    :root:not([data-bs-theme]) {
        color-scheme: light;
        --carnet-ground: #F3F4F6;
        --carnet-surface-1: #FFFFFF;
        --carnet-surface-2: #F0F2F5;
        --carnet-surface-3: #E4E7EB;
        --carnet-border: #DADEE3;
        --carnet-border-strong: #C2C8CF;
        --carnet-text: #14171B;
        --carnet-text-2: #4B525B;
        --carnet-text-3: #646C76;
        --carnet-accent: #1D6BD0;
        --carnet-accent-on: #FFFFFF;
        --carnet-accent-soft: rgba(29, 107, 208, .10);
        --carnet-ok: #1A8550;
        --carnet-ok-soft: rgba(26, 133, 80, .10);
        --carnet-warn: #9A5B00;
        --carnet-warn-soft: rgba(197, 125, 10, .13);
        --carnet-err: #C2362F;
        --carnet-err-soft: rgba(194, 54, 47, .09);
        --carnet-unknown: #5F6771;
        --carnet-unknown-soft: rgba(95, 103, 113, .10);
        --carnet-unavailable: #6E757E;
        --carnet-unavailable-soft: rgba(110, 117, 126, .10);
        --carnet-demo: #7348C9;
        --carnet-demo-soft: rgba(115, 72, 201, .10);
    }
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --carnet-ground: #111316;
    --carnet-surface-1: #181B1F;
    --carnet-surface-2: #20242A;
    --carnet-surface-3: #2A2F36;
    --carnet-border: #2C3138;
    --carnet-border-strong: #3B414A;
    --carnet-text: #E9EBEE;
    --carnet-text-2: #AEB4BC;
    --carnet-text-3: #848B94;
    --carnet-accent: #5AA2F5;
    --carnet-accent-on: #0A1626;
    --carnet-accent-soft: rgba(90, 162, 245, .14);
    --carnet-ok: #43C281;
    --carnet-ok-soft: rgba(67, 194, 129, .13);
    --carnet-warn: #EBA93F;
    --carnet-warn-soft: rgba(235, 169, 63, .14);
    --carnet-err: #F26A63;
    --carnet-err-soft: rgba(242, 106, 99, .14);
    --carnet-unknown: #A3ABB5;
    --carnet-unknown-soft: rgba(163, 171, 181, .12);
    --carnet-unavailable: #7F868F;
    --carnet-unavailable-soft: rgba(127, 134, 143, .10);
    --carnet-demo: #B897F5;
    --carnet-demo-soft: rgba(184, 151, 245, .14);
}

[data-bs-theme="light"] {
    color-scheme: light;
    --carnet-ground: #F3F4F6;
    --carnet-surface-1: #FFFFFF;
    --carnet-surface-2: #F0F2F5;
    --carnet-surface-3: #E4E7EB;
    --carnet-border: #DADEE3;
    --carnet-border-strong: #C2C8CF;
    --carnet-text: #14171B;
    --carnet-text-2: #4B525B;
    --carnet-text-3: #646C76;
    --carnet-accent: #1D6BD0;
    --carnet-accent-on: #FFFFFF;
    --carnet-accent-soft: rgba(29, 107, 208, .10);
    --carnet-ok: #1A8550;
    --carnet-ok-soft: rgba(26, 133, 80, .10);
    --carnet-warn: #9A5B00;
    --carnet-warn-soft: rgba(197, 125, 10, .13);
    --carnet-err: #C2362F;
    --carnet-err-soft: rgba(194, 54, 47, .09);
    --carnet-unknown: #5F6771;
    --carnet-unknown-soft: rgba(95, 103, 113, .10);
    --carnet-unavailable: #6E757E;
    --carnet-unavailable-soft: rgba(110, 117, 126, .10);
    --carnet-demo: #7348C9;
    --carnet-demo-soft: rgba(115, 72, 201, .10);
}

/*
 * Bootstrap 5.3 reads its own variables; point them at the design tokens. This file is loaded after
 * Bootstrap and the selectors have equal specificity, so these declarations win. Bootstrap's .btn-*
 * classes hard-code their colours, so components are overridden individually when a screen needs them.
 * Fonts: the stacks are declared, the families are not loaded yet (see docs/architecture.md, open questions).
 */
:root, [data-bs-theme] {
    --bs-body-bg: var(--carnet-ground);
    --bs-body-color: var(--carnet-text);
    --bs-emphasis-color: var(--carnet-text);
    --bs-secondary-color: var(--carnet-text-2);
    --bs-border-color: var(--carnet-border);
    --bs-primary: var(--carnet-accent);
    --bs-link-color: var(--carnet-accent);
    --bs-link-hover-color: var(--carnet-accent);
    --bs-success: var(--carnet-ok);
    --bs-warning: var(--carnet-warn);
    --bs-danger: var(--carnet-err);
    --bs-body-font-family: 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --bs-font-monospace: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .625rem;
}

.btn-primary {
    --bs-btn-color: var(--carnet-accent-on);
    --bs-btn-bg: var(--carnet-accent);
    --bs-btn-border-color: var(--carnet-accent);
    --bs-btn-hover-color: var(--carnet-accent-on);
    --bs-btn-hover-bg: var(--carnet-accent);
    --bs-btn-hover-border-color: var(--carnet-accent);
    --bs-btn-active-color: var(--carnet-accent-on);
    --bs-btn-active-bg: var(--carnet-accent);
    --bs-btn-active-border-color: var(--carnet-accent);
}

/*
 * Status language: seven states, each with an icon and a word. Never colour alone, and never merged:
 * unknown and demo use a dashed border so they differ from the solid states in shape as well.
 * Usage: <span class="carnet-state carnet-state--warn">…icon… Attention</span>
 */
.carnet-state {
    --_fg: var(--carnet-text-2);
    --_bg: transparent;
    --_line: solid;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 1.75rem;
    padding: 0 .625rem;
    border: 1px var(--_line) var(--_fg);
    border-radius: 999px;
    background: var(--_bg);
    color: var(--_fg);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

.carnet-state--ok { --_fg: var(--carnet-ok); --_bg: var(--carnet-ok-soft); }
.carnet-state--warn { --_fg: var(--carnet-warn); --_bg: var(--carnet-warn-soft); }
.carnet-state--err { --_fg: var(--carnet-err); --_bg: var(--carnet-err-soft); }
.carnet-state--unknown { --_fg: var(--carnet-unknown); --_bg: var(--carnet-unknown-soft); --_line: dashed; }
.carnet-state--unavailable { --_fg: var(--carnet-unavailable); --_bg: var(--carnet-unavailable-soft); }
.carnet-state--demo { --_fg: var(--carnet-demo); --_bg: var(--carnet-demo-soft); --_line: dashed; }
.carnet-state--pending { --_fg: var(--carnet-accent); --_bg: transparent; }
.carnet-state--active { --_fg: var(--carnet-accent); --_bg: var(--carnet-accent-soft); }

/*
 * Application shell (templates/layout/shell.html.twig): sidebar from lg (992 px, Bootstrap) up,
 * bottom tabs below. Labels never go below 13 px; touch targets are at least 44 px.
 */
.carnet-shell {
    display: flex;
    min-height: 100vh;
}

.carnet-sidebar {
    flex: 0 0 248px;
    flex-direction: column;
    gap: 1.25rem;
    box-sizing: border-box;
    height: 100vh;
    position: sticky;
    top: 0;
    padding: 1.25rem 1rem;
    overflow-y: auto;
    background: var(--carnet-surface-1);
    border-right: 1px solid var(--carnet-border);
}

.carnet-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 0 .5rem;
}

.carnet-brand__mark {
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    border: 2px solid var(--carnet-accent);
    border-radius: 7px;
}

.carnet-brand__name {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.carnet-vehicle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 56px;
    padding: .5rem .75rem;
    border: 1px solid var(--carnet-border);
    border-radius: 10px;
    background: var(--carnet-surface-2);
}

.carnet-vehicle__name {
    font-weight: 600;
}

.carnet-vehicle__detail {
    font-size: .8125rem;
    color: var(--carnet-text-3);
}

.carnet-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carnet-nav-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 44px;
    padding: 0 .75rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--carnet-text-2);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}

a.carnet-nav-item:not(.is-later):hover,
button.carnet-nav-item:hover {
    background: var(--carnet-surface-2);
    color: var(--carnet-text);
}

.carnet-nav-item.is-active {
    background: var(--carnet-accent-soft);
    color: var(--carnet-accent);
    font-weight: 600;
}

.carnet-nav-item.is-later {
    color: var(--carnet-text-3);
    cursor: default;
}

.carnet-nav-item__label {
    flex: 1;
}

.carnet-later {
    padding: 1px .5rem;
    border: 1px dashed var(--carnet-border-strong);
    border-radius: 999px;
    font-size: .8125rem;
}

.carnet-sidebar__footer {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--carnet-border);
}

.carnet-main {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.carnet-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .75rem 1rem;
}

.carnet-rail {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carnet-state__name {
    font-weight: 500;
    color: var(--carnet-text-3);
}

.carnet-content {
    flex: 1;
    padding: 0 1rem 6rem;
}

.carnet-tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--carnet-surface-1);
    border-top: 1px solid var(--carnet-border);
}

.carnet-tabs__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.carnet-nav-item--tab {
    flex-direction: column;
    justify-content: center;
    gap: .125rem;
    min-height: 56px;
    padding: .25rem;
    border-radius: 0;
    font-size: .8125rem;
    text-align: center;
}

.carnet-nav-item--tab.is-active {
    background: transparent;
    box-shadow: inset 0 3px 0 var(--carnet-accent);
}

.carnet-nav-item--tab .carnet-nav-item__label {
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    .carnet-topbar {
        padding: 1.25rem 2rem;
    }

    .carnet-content {
        padding: 0 2rem 2.5rem;
    }
}

/*
 * Screens (templates/pages/*). Built on the design tokens above: depth comes from surface steps and
 * 1 px borders, numbers are the largest element, no text is smaller than 13 px, targets are at least 44 px.
 */
.carnet-page {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 1180px;
}

.carnet-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .25rem 0;
}

.carnet-page-head h1 {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
}

@media (min-width: 992px) {
    .carnet-page-head h1 {
        font-size: 1.75rem;
    }
}

.carnet-page-meta,
.carnet-muted {
    color: var(--carnet-text-3);
    font-size: .875rem;
}

.carnet-back {
    display: inline-block;
    margin-bottom: .25rem;
    font-size: .875rem;
}

.carnet-card {
    box-sizing: border-box;
    padding: 1rem 1.125rem;
    border: 1px solid var(--carnet-border);
    border-radius: 10px;
    background: var(--carnet-surface-1);
    color: var(--carnet-text);
}

.carnet-card > p:last-child,
.carnet-card > ul:last-child {
    margin-bottom: 0;
}

.carnet-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin-bottom: .5rem;
}

.carnet-card__head h2 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.carnet-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.carnet-card--link:hover {
    border-color: var(--carnet-border-strong);
}

.carnet-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: .75rem;
}

.carnet-empty h2 {
    margin: 0 0 .25rem;
    font-size: 1.125rem;
}

.carnet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Buttons */
.carnet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--carnet-border-strong);
    border-radius: 8px;
    background: var(--carnet-surface-1);
    color: var(--carnet-text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.carnet-btn:hover:not(:disabled) {
    background: var(--carnet-surface-2);
}

.carnet-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.carnet-btn--primary {
    border-color: var(--carnet-accent);
    background: var(--carnet-accent);
    color: var(--carnet-accent-on);
}

.carnet-btn--primary:hover:not(:disabled) {
    background: var(--carnet-accent);
    filter: brightness(1.08);
}

.carnet-btn--danger {
    border-color: var(--carnet-err);
    background: transparent;
    color: var(--carnet-err);
}

.carnet-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--carnet-text-3);
    cursor: pointer;
}

.carnet-iconbtn:hover {
    background: var(--carnet-surface-2);
    color: var(--carnet-text);
}

.carnet-iconbtn.is-on {
    color: var(--carnet-accent);
}

.carnet-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--carnet-accent);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

/* Status chips: sizes and two extra shapes (neutral = known and unremarkable, probable = warn, dashed) */
.carnet-state--sm {
    height: 1.5rem;
    padding: 0 .5rem;
    font-size: .8125rem;
}

.carnet-state--neutral { --_fg: var(--carnet-text-2); --_bg: var(--carnet-surface-3); --_line: solid; border-color: transparent; }
.carnet-state--probable { --_fg: var(--carnet-warn); --_bg: var(--carnet-warn-soft); --_line: dashed; }

.carnet-icon {
    flex: none;
}

/* Demo banner */
.carnet-banner {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0 1rem .5rem;
    padding: .625rem .75rem;
    border-radius: 10px;
    font-size: .875rem;
    line-height: 1.35;
}

.carnet-banner[hidden] {
    display: none;
}

.carnet-banner--demo {
    border: 1px dashed var(--carnet-demo);
    background: var(--carnet-demo-soft);
    color: var(--carnet-text);
}

.carnet-banner--demo svg {
    color: var(--carnet-demo);
    flex: none;
}

.carnet-banner--demo b {
    color: var(--carnet-demo);
}

@media (min-width: 992px) {
    .carnet-banner {
        margin: 0 2rem .5rem;
    }
}

/* Dashboard */
.carnet-session {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.carnet-session__text {
    flex: 1;
    min-width: 0;
}

.carnet-session__text h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.carnet-session__text p {
    margin: .125rem 0 0;
    font-size: .875rem;
}

.carnet-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

@media (min-width: 768px) {
    .carnet-metrics {
        grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
        gap: .75rem;
    }
}

.carnet-metric {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem .875rem;
    border: 1px solid var(--carnet-border);
    border-radius: 10px;
    background: var(--carnet-surface-1);
}

.carnet-metric[data-state="demo"] { border-style: dashed; border-color: var(--carnet-demo); }
.carnet-metric[data-state="stale"] { border-color: var(--carnet-warn); }

.carnet-metric__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .375rem;
}

.carnet-metric__label {
    color: var(--carnet-text-2);
    font-size: .875rem;
    font-weight: 500;
}

.carnet-metric__value {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    margin: 0;
}

.carnet-metric__number {
    font-size: 2.5rem;
    line-height: 1.1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

.carnet-metric[data-state="unavailable"] .carnet-metric__number,
.carnet-metric[data-state="unsupported"] .carnet-metric__number,
.carnet-metric[data-state="stale"] .carnet-metric__number {
    color: var(--carnet-text-3);
}

@media (min-width: 992px) {
    .carnet-metric__number {
        font-size: 3.5rem;
    }
}

.carnet-metric__unit {
    color: var(--carnet-text-2);
    font-size: 1.0625rem;
}

.carnet-metric__caption {
    margin: 0;
    min-height: 1.125rem;
    color: var(--carnet-text-3);
    font-size: .8125rem;
}

.carnet-code-list {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}

.carnet-code-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.carnet-code {
    font-family: var(--bs-font-monospace);
    font-size: .9375rem;
    font-weight: 500;
}

.carnet-events {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carnet-events li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--carnet-border);
    font-size: .9375rem;
}

.carnet-time {
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    color: var(--carnet-text-3);
}

/* Forms */
.carnet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
}

.carnet-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1rem;
}

.carnet-field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 12rem;
}

.carnet-field--grow {
    flex: 1 1 14rem;
}

.carnet-field label {
    color: var(--carnet-text-2);
    font-size: .875rem;
    font-weight: 500;
}

.carnet-input {
    box-sizing: border-box;
    min-height: 44px;
    padding: 0 .75rem;
    border: 1px solid var(--carnet-border-strong);
    border-radius: 8px;
    background: var(--carnet-surface-2);
    color: var(--carnet-text);
    font: inherit;
}

.carnet-input:focus-visible,
.carnet-btn:focus-visible,
.carnet-iconbtn:focus-visible,
.carnet-chipbtn:focus-visible {
    outline: 2px solid var(--carnet-accent);
    outline-offset: 2px;
}

.carnet-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font-size: .9375rem;
}

.carnet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.carnet-chipbtn {
    min-height: 36px;
    padding: 0 .75rem;
    border: 1px solid var(--carnet-border-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--carnet-text-2);
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
}

.carnet-chipbtn[aria-pressed="true"] {
    border-color: var(--carnet-accent);
    background: var(--carnet-accent-soft);
    color: var(--carnet-accent);
    font-weight: 600;
}

/* Live data */
.carnet-live {
    display: grid;
    gap: .75rem;
    align-items: start;
}

@media (min-width: 1100px) {
    .carnet-live {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .carnet-chart-card {
        position: sticky;
        top: 1rem;
    }
}

.carnet-sensors {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carnet-sensor {
    display: flex;
    align-items: center;
    gap: .25rem .625rem;
    padding: .375rem .5rem;
    border: 1px solid var(--carnet-border);
    border-radius: 10px;
    background: var(--carnet-surface-1);
}

.carnet-sensor[data-state="demo"] { border-style: dashed; border-color: var(--carnet-demo); }
.carnet-sensor[data-state="unsupported"],
.carnet-sensor[data-state="unavailable"] { background: transparent; }

.carnet-sensor__name {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.carnet-sensor__title {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.carnet-sensor__caption {
    color: var(--carnet-text-3);
    font-size: .8125rem;
}

.carnet-sensor__value {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    min-width: 5.5rem;
    justify-content: flex-end;
}

.carnet-sensor .carnet-metric__number {
    font-size: 1.5rem;
}

.carnet-sensor .carnet-state {
    display: none;
}

@media (min-width: 768px) {
    .carnet-sensor .carnet-state {
        display: inline-flex;
    }
}

/* Charts */
.carnet-chart__svg {
    display: block;
    width: 100%;
    height: auto;
}

.carnet-chart__grid { stroke: var(--carnet-border); stroke-width: 1; }
.carnet-chart__threshold { stroke: var(--carnet-text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.carnet-chart__label { fill: var(--carnet-text-3); font-size: 12px; }
.carnet-chart__unit { margin-bottom: .5rem; }

.carnet-line--0 { --_line: var(--carnet-accent); }
.carnet-line--1 { --_line: var(--carnet-warn); }
.carnet-line--2 { --_line: var(--carnet-ok); }
.carnet-line--3 { --_line: var(--carnet-text-2); }
.carnet-line__path { stroke: var(--_line); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.carnet-line__dot { fill: var(--_line); }
.carnet-line__band { fill: var(--_line); opacity: .16; }

.carnet-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--carnet-text-2);
    font-size: .875rem;
}

.carnet-legend li {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.carnet-swatch {
    display: inline-block;
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--_line);
}

/* DPF */
.carnet-hero {
    --_fg: var(--carnet-unknown);
    --_bg: var(--carnet-unknown-soft);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .875rem;
    padding: 1.125rem;
    border: 1.5px solid var(--_fg);
    border-radius: 12px;
    background: var(--_bg);
}

.carnet-hero[data-state="normal"] { --_fg: var(--carnet-ok); --_bg: var(--carnet-ok-soft); }
.carnet-hero[data-state="regen"] { --_fg: var(--carnet-warn); --_bg: var(--carnet-warn-soft); }
.carnet-hero[data-state="probable"] { --_fg: var(--carnet-warn); --_bg: var(--carnet-warn-soft); border-style: dashed; }
.carnet-hero[data-state="unknown"] { --_fg: var(--carnet-unknown); --_bg: var(--carnet-unknown-soft); border-style: dashed; }
.carnet-hero[data-state="unsupported"] {
    --_fg: var(--carnet-unavailable);
    --_bg: var(--carnet-surface-1);
    background-image: repeating-linear-gradient(135deg, var(--carnet-unavailable-soft) 0 6px, transparent 6px 12px);
}

.carnet-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(--_fg);
    border-radius: 14px;
    background: var(--carnet-surface-1);
    color: var(--_fg);
}

.carnet-hero__text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.carnet-hero__kicker {
    color: var(--_fg);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.carnet-hero__title {
    font-size: 1.625rem;
    line-height: 1.2;
    font-weight: 700;
}

.carnet-hero__sub {
    color: var(--carnet-text-2);
}

.carnet-hero__confidence {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .875rem;
}

.carnet-hero__confidence[hidden] {
    display: none;
}

.carnet-bars {
    display: inline-flex;
    gap: 4px;
}

.carnet-bars i {
    width: 28px;
    height: 8px;
    border: 1px solid var(--_fg);
    border-radius: 4px;
}

.carnet-bars i.is-on {
    background: var(--_fg);
}

.carnet-notice {
    border-color: var(--carnet-border-strong);
    color: var(--carnet-text-2);
}

.carnet-missing,
.carnet-checks,
.carnet-evidence,
.carnet-scans,
.carnet-sessions {
    display: flex;
    flex-direction: column;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}

.carnet-missing li,
.carnet-checks li {
    display: flex;
    gap: .625rem;
    align-items: flex-start;
    padding: .375rem 0;
}

.carnet-missing li > div {
    display: flex;
    flex-direction: column;
}

.carnet-missing__name {
    font-weight: 500;
}

.carnet-checks .is-ok svg { color: var(--carnet-ok); }
.carnet-checks .is-missing svg { color: var(--carnet-unavailable); }

.carnet-evidence li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .125rem .75rem;
    padding: .625rem 0;
    border-top: 1px solid var(--carnet-border);
}

.carnet-evidence__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.carnet-evidence__name {
    font-weight: 500;
}

.carnet-evidence__value {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.carnet-tag {
    padding: 1px .375rem;
    border: 1px solid var(--carnet-border-strong);
    border-radius: 4px;
    color: var(--carnet-text-2);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.carnet-legend-note {
    margin: 0;
    color: var(--carnet-text-3);
    font-size: .8125rem;
    line-height: 1.4;
}

/* Faults */
.carnet-codes {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carnet-codes li {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .625rem 0;
    border-top: 1px solid var(--carnet-border);
}

.carnet-codes__text {
    display: flex;
    flex-direction: column;
}

.carnet-scans li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    padding: .5rem 0;
    border-top: 1px solid var(--carnet-border);
}

.carnet-codes__inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.carnet-danger {
    border-color: var(--carnet-border-strong);
}

/* Dialog (native <dialog>: focus trap and Escape come from the browser) */
.carnet-dialog {
    max-width: min(30rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 1px solid var(--carnet-border-strong);
    border-radius: 12px;
    background: var(--carnet-surface-1);
    color: var(--carnet-text);
    box-shadow: 0 12px 40px rgb(0 0 0 / .35);
}

.carnet-dialog::backdrop {
    background: rgb(0 0 0 / .55);
}

.carnet-dialog h2 {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
}

/* Sessions */
.carnet-session-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem .75rem;
    align-items: center;
    padding: .75rem .875rem;
    border: 1px solid var(--carnet-border);
    border-radius: 10px;
    background: var(--carnet-surface-1);
    color: var(--carnet-text);
    text-decoration: none;
}

.carnet-session-row:hover {
    border-color: var(--carnet-border-strong);
}

.carnet-session-row__time {
    font-weight: 600;
}

.carnet-session-row__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .375rem;
    justify-self: end;
}

.carnet-session-row__line {
    grid-column: 1 / -1;
}

.carnet-session-row > svg {
    display: none;
}

.carnet-sessions {
    gap: .5rem;
}

.carnet-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem 1rem;
    margin: 0 0 .75rem;
}

.carnet-facts dt {
    color: var(--carnet-text-3);
    font-size: .8125rem;
    font-weight: 500;
}

.carnet-facts dd {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

.carnet-sync {
    margin: 0;
    color: var(--carnet-text-2);
}

.carnet-table-wrap {
    overflow-x: auto;
}

.carnet-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
}

.carnet-table th,
.carnet-table td {
    padding: .5rem .5rem;
    border-top: 1px solid var(--carnet-border);
    text-align: left;
    font-weight: 400;
}

.carnet-table thead th {
    border-top: 0;
    color: var(--carnet-text-3);
    font-size: .8125rem;
    font-weight: 600;
}

.carnet-table .carnet-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.carnet-table tr.is-selected {
    background: var(--carnet-accent-soft);
}

/* Connection */
.carnet-pids {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.carnet-pill {
    padding: .125rem .625rem;
    border: 1px solid var(--carnet-border-strong);
    border-radius: 999px;
    color: var(--carnet-text-2);
    font-size: .875rem;
}

.carnet-error {
    margin: .5rem 0 0;
    padding: .5rem .75rem;
    border: 1px solid var(--carnet-err);
    border-radius: 8px;
    background: var(--carnet-err-soft);
    color: var(--carnet-text);
}

.carnet-error[hidden] {
    display: none;
}

.carnet-log {
    max-height: 18rem;
    margin: 0;
    padding: .75rem;
    overflow: auto;
    border: 1px solid var(--carnet-border);
    border-radius: 8px;
    background: var(--carnet-surface-2);
    color: var(--carnet-text-2);
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: no-preference) {
    .carnet-btn,
    .carnet-card--link,
    .carnet-session-row {
        transition: border-color .12s ease, background-color .12s ease;
    }
}