html {
    background: var(--paper);
}

body {
    background: var(--paper);
    font-family: var(--font-body);
    line-height: var(--lh-body);
    margin: 0;
    min-height: 100dvh;
    width: 100%;
    color: var(--ink);
    scrollbar-color: var(--border-strong) transparent;
    scrollbar-width: thin;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--ink);
    color: var(--paper);
}

/* The caret is the one piece of brand a customer sees while they are actually
   typing their plate into the quote form. */
input,
textarea,
select,
[contenteditable] {
    caret-color: var(--ink);
}

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

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

button {
    font: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

svg {
    display: block;
}

:root {
    /* The interface accent is the logo's ink: the brand is one colour, and
       the colour on the page belongs to the paint. --paint-red stays what it
       always was: the colour of a selected body panel and of errors, not of
       the interface. */
    --accent: #262d40;
    --accent-strong: #1b2130;
    --accent-soft: rgba(38, 45, 64, 0.07);
    --text-dim: #5a6275;
    /* 4.5:1 on white and on --surface-tint alike: it sets hints, step labels,
       prices and placeholders, all of it small text that carries meaning. */
    --text-faint: #666e81;
    --paper: #ffffff;
    --surface: #ffffff;
    --surface-tint: #f3f4f7;
    --border: #dadde5;
    --border-strong: #c4c9d4;
    --focus: #262d40;
    --paint-red: #c9302a;
    --radius-lg: 0;
    --radius-md: 0;
    --radius-sm: 0;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    /* Jost is the geometric face closest to the wordmark; Schibsted Grotesk
       is the sturdy grotesque the tagline is set in the spirit of; Archivo,
       a grotesque drawn for technical use, carries labels, codes and plates.
       Every rule that sets it also asks for tabular figures, so a ten-digit
       code keeps one width whichever digits it has. */
    --font-body: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
    --font-label: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

    /* Type scale. Leading tightens as the type grows and tracking opens back
       toward zero as it shrinks: a 74px line and a 22px line cannot share one
       ratio without one of them being wrong, which is what a flat 1.06 /
       -0.02em across every heading did here. Rules below pick a step from this
       list; none of them invents a number. */
    --lh-display: 0.97;
    --lh-title: 1.05;
    --lh-heading: 1.16;
    --lh-subhead: 1.3;
    --lh-compact: 1.45;
    --lh-snug: 1.5;
    --lh-body: 1.6;

    /* Optical tracking. Jost sets loose at display sizes and closes up on its
       own below ~24px, so the correction shrinks with the type instead of
       staying proportional to it. */
    --track-display: -0.032em;
    --track-title: -0.022em;
    --track-heading: -0.013em;
    --track-subhead: -0.005em;
    --track-label: 0.08em;

    /* Brand. The ink is the logo's; there is no second brand colour. The
       --accent*, --brand* and --ink* names are aliases for the same two inks
       (and --paper/--surface/--ground*, --surface-tint/--ground-tint for the
       same grounds), kept because rules across the file were written against
       each of them. Change the value here, never add a third name. */
    --ink: #262d40;
    --ink-deep: #1b2130;
    --brand: #262d40;
    --brand-dark: #1b2130;
    --brand-soft: rgba(38, 45, 64, 0.07);
    --brand-line: rgba(38, 45, 64, 0.32);
    --shell: 1180px;
    /* Header height is deterministic because the logo has a fixed height.
       Anchor offsets, the menu panel and the wizard's sticky progress bar
       all derive from this. */
    --header-h: 64px;

    /* The two finish levels that carry a colour of their own. The bright cut
       fills the chip, the badge and the card border. It is about 2:1 on
       white, so anything that has to be read or has to show a state (the
       price, the subtitle, the radio of the selected card) takes the -text
       cut, at least 4.5:1 on white and on the card's own tint. The
       recommended level is the ink. */
    --tier-standard: #2ecc71;
    --tier-alta: #f4b400;
    --tier-standard-text: #1b7d4d;
    --tier-alta-text: #8f6405;

    /* Grounds. --ground is the page, --ground-tint the alternate sections,
       --ground-raised anything that sits on a tint (cards, fields). */
    --ground: #ffffff;
    --ground-tint: #f3f4f7;
    --ground-raised: #ffffff;
    --line: #e3e6ec;
}

@media (min-width: 900px) {
    :root {
        --header-h: 76px;
    }
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
    border-radius: 0;
}

/* ===== Menu ===== */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: none;
    background: none;
    cursor: pointer;
}

.menu-toggle:hover {
    background: var(--surface-tint);
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--ink);
    border-radius: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-panel {
    position: fixed;
    /* Just under the sticky header, and above it in the stack. */
    top: calc(var(--header-h) + 4px);
    right: 16px;
    z-index: 41;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 6px;
    box-shadow: 0 12px 20px -8px rgba(27, 33, 48, 0.28);

    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0s linear 0.22s;
}

.nav-panel.is-open {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0s;
}

.nav-panel a {
    padding: 11px 12px;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dim);
}

.nav-panel a:hover {
    background: var(--surface-tint);
    color: var(--ink);
}

/* ===== Wizard shell ===== */
.repair {
    max-width: 600px;
    margin: 0 auto;
    padding: 8px 20px 16px;
}

/* ===== Progress ===== */
.progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
}

.progress[hidden] {
    display: none;
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--border-strong);
    flex-shrink: 0;
    transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.progress-dot.is-current {
    background: var(--accent-strong);
    box-shadow: 0 0 0 4px var(--accent-soft);
    transform: scale(1.2);
}

.progress-dot.is-done {
    background: var(--accent);
}

.progress-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.progress-line .fill {
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease-out);
}

.progress-line.is-done .fill {
    transform: scaleX(1);
}

/* ===== Back link ===== */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 6px 4px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-dim);
    border: none;
    background: none;
    cursor: pointer;
}

.back-link:hover {
    color: var(--ink);
}

.back-link svg {
    width: 16px;
    height: 16px;
}

.back-link[hidden] {
    display: none;
}

/* ===== Steps ===== */
.step {
    display: none;
}

.step.active {
    display: block;
    animation: step-in 0.4s var(--ease-out);
}

@keyframes step-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 1.7rem + 1vw, 3rem);
    margin: 4px 0 6px;
    text-align: center;
}

.step__subtitle {
    color: var(--text-dim);
    font-size: 1.15rem;
    margin: 0 0 22px;
    text-align: center;
}

/* ===== Vehicle data (step 1) ===== */
.car-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.data-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* No bottom padding: the last field's margin provides it. */
    padding: 16px 16px 0;
}

.data-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 14px;
}

.data-card__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
}

.data-card__icon svg {
    width: 21px;
    height: 21px;
}

/* A year and a plate fit two to a row even on a phone, so these rows do not
   follow the contact form's one-column break: they give up on their own when
   they really do not fit. The --wide ones do follow it, because their content
   (model names, a surname) cannot be read in half a screen. */
.data-card .field-row {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

@media (max-width: 480px) {
    .data-card .field-row--wide {
        grid-template-columns: 1fr;
    }
}

.field__hint {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--text-faint);
}

/* Card for the recognised vehicle: it appears as soon as make and model are
   enough to know which car it is. */
.car-preview {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 24px rgba(27, 33, 48, 0.08);
    animation: step-in 0.35s var(--ease-out);
}

.car-preview[hidden] {
    display: none;
}

.car-preview__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.car-preview__title {
    margin-right: auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: var(--lh-subhead);
}

.car-preview__type {
    flex: none;
    padding: 4px 10px;
    border-radius: 2px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.car-preview__check {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--brand);
}

.car-preview__check svg {
    width: 13px;
    height: 13px;
}

.car-preview__media {
    display: grid;
    place-items: center;
}

/* The photo does not live inside a fixed-ratio box: each model brings its
   own, and the ones that were not 16/9 spilled out of the frame on load. Now
   it grows to the card's width and its own ratio sets the height, with a cap
   so a portrait photo cannot push the form off screen. */
.car-preview__photo {
    display: block;
    max-width: 100%;
    max-height: 260px;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 10px rgba(27, 33, 48, 0.12);
}

/* No model photo: the make's logo, cut out with a mask so it takes its
   colour and drags no background along. */
.car-preview__logo {
    display: block;
    width: min(110px, 45%);
    aspect-ratio: 1;
    background-color: var(--logo-color, var(--text-dim));
    -webkit-mask-image: var(--logo-src);
    mask-image: var(--logo-src);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.car-preview__photo[hidden],
.car-preview__logo[hidden],
.car-preview__note[hidden] {
    display: none;
}

.car-preview__note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}

.view-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.view-tab {
    padding: 9px 16px;
    border: 1.5px solid var(--border-strong);
    border-radius: 2px;
    background: var(--surface);
    color: var(--text-dim);
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.view-tab:hover {
    background: var(--surface-tint);
}

.view-tab.is-active {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: #fff;
}

/* ===== Quality cards (step 2) ===== */
.quality-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 22px;
}

@media (min-width: 640px) {
    .quality-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.quality-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--surface);
    border: 2px solid var(--tier);
    border-radius: var(--radius-md);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.quality-card--standard {
    --tier: var(--tier-standard);
    --tier-text: var(--tier-standard-text);
    --tier-soft: rgba(46, 204, 113, 0.09);
}

.quality-card--premium {
    --tier: var(--ink);
    --tier-text: var(--ink);
    --tier-soft: rgba(38, 45, 64, 0.06);
}

.quality-card--alta-gama {
    --tier: var(--tier-alta);
    --tier-text: var(--tier-alta-text);
    --tier-soft: rgba(244, 180, 0, 0.11);
}

.quality-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(27, 33, 48, 0.08);
}

.quality-card.is-selected {
    background: var(--tier-soft);
    box-shadow: 0 0 0 2px var(--tier);
}

.quality-card__badge {
    align-self: flex-start;
    padding: 3px 10px;
    background: var(--tier);
    color: #fff;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 0;
}

.quality-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quality-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
}

.quality-card__sub {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--tier-text, var(--tier));
    margin-top: -4px;
}

.quality-card__radio {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--tier-text, var(--tier));
    position: relative;
    transition: border-color 0.2s var(--ease-out);
}

.quality-card__radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--tier-text, var(--tier));
    transform: scale(0);
    transition: transform 0.2s var(--ease-out);
}

.quality-card.is-selected .quality-card__radio::after {
    transform: scale(1);
}

.quality-card__desc {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.quality-card__features {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.quality-card__features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.quality-card__features svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--tier);
}

/* ===== 3D car view (step 3, every vehicle) ===== */

.car-view-3d[hidden] {
    display: none;
}

/* Both pages that mount the picker sit it inside a card that is already the
   right width (.wizard the wizard card, .staff the intake card), so the
   block takes the width it is given and no longer bleeds out of its column. */
.car-view-3d {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 0 0 18px;
}

@media (min-width: 760px) {
    .car-view-3d {
        grid-template-columns: 1.6fr 1fr;
        /* No align-items: start. The resume panel stretches to the stage's
           full height instead of hugging its own contents. */
    }
}

.car-view-3d__stage {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-view-3d__canvas-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/* On a phone the stage no longer shares its row with the parts panel, so the
   height it gives up to that panel on a wide screen is free. A square frame
   buys back about a third of the render (and the camera reframes itself from
   the aspect ratio, computePresets in src/carVisual.js, so the car grows with
   it), which is the difference between tapping a side skirt and missing it. */
@media (max-width: 759px) {
    .car-view-3d__canvas-wrap {
        aspect-ratio: 1 / 1;
    }
}

.car-view-3d__canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: default;
}

.car-view-3d__canvas.hoverable {
    cursor: pointer;
}

.car-view-3d__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    transition: opacity 0.3s var(--ease-out);
}

.car-view-3d__overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.car-view-3d__progress-track {
    width: 200px;
    height: 5px;
    border-radius: 3px;
    background: var(--border);
    overflow: hidden;
}

.car-view-3d__progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent-strong);
    transition: width 0.15s var(--ease-out);
}

.car-view-3d__loading-label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.car-view-3d__error {
    margin: 0;
    max-width: 30ch;
    text-align: center;
    font-size: 0.85rem;
    color: var(--paint-red);
    line-height: var(--lh-snug);
}

.car-view-3d__buttons {
    justify-content: center;
}

.car-view-3d__hint {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-dim);
    text-align: center;
}

.car-view-3d__summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.car-view-3d__summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.car-view-3d__summary-head h2 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.car-view-3d__count {
    font-size: 0.8rem;
    color: var(--text-dim);
    white-space: nowrap;
}

/* Stacked under the stage, the list is as tall as what is in it, and the
   viewport is what caps it: there is no stage beside it whose height it has to
   respect. The cap is generous because scrolling a panel inside a page that
   also scrolls is the thing to avoid, not the thing to reach for. */
.car-view-3d__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 40px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Side by side with the stage, the rule inverts: flex-basis 0 keeps the list
   out of the panel's natural height, so a long selection never drives the row
   taller than the stage. It fills whatever space the stage leaves and scrolls
   past that, keeping "Quitar todas" pinned to the bottom of the panel.
   It belongs here and not in the base rule: below this breakpoint the picker
   is a single column and the panel's height is its content, so flex-basis 0
   has no free space to grow back out of and the list collapses to its
   min-height, one row, whatever is selected.
   The floor is three rows of names that wrap to two lines, plus their gaps:
   the hint and the estimate under the list take their share of the panel
   first, and without it a second part already sat below the fold of a list
   one and a half rows tall. Past the floor the panel grows the row instead
   of squeezing the list. */
@media (min-width: 760px) {
    .car-view-3d__list {
        flex: 1 1 0;
        min-height: 11.5rem;
        max-height: none;
    }
}

.car-view-3d__list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--surface-tint);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
}

/* 24px and not the 22 the glyph wants: on a phone this is the only way to drop
   a part short of hitting the same panel again on the render, and 24 is the
   floor a tap target is allowed to reach (WCAG 2.5.8). */
.car-view-3d__list-item-remove {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.car-view-3d__list-item-remove:hover {
    background: var(--border);
    color: var(--ink);
}

/* The name takes the slack so every price lines up against the remove button. */
.car-view-3d__list-item-name {
    flex: 1;
    min-width: 0;
}

.car-view-3d__list-item-price {
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
}

.car-view-3d__estimate {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-strong);
}

.car-view-3d__estimate-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.car-view-3d__estimate-amount {
    white-space: nowrap;
}

/* Savings read in the site's green: the Económico tier's text colour, which
   holds 4.5:1 on the summary's tint. */
.car-view-3d__estimate-row--discount {
    color: var(--tier-standard-text);
}

.car-view-3d__estimate-row--discount .car-view-3d__estimate-amount {
    font-weight: 500;
}

/* What one more part would earn. Dashed while there is a next step, solid
   green once the cap is reached. */
.car-view-3d__nudge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 10px;
    border: 1px dashed var(--border-strong);
    font-size: 0.8rem;
    line-height: var(--lh-compact);
    color: var(--text-dim);
}

.car-view-3d__nudge svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.car-view-3d__nudge.is-maxed {
    border-style: solid;
    border-color: var(--tier-standard-text);
    color: var(--tier-standard-text);
}

.car-view-3d__estimate-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.car-view-3d__estimate-total strong {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.car-view-3d__estimate-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: var(--lh-compact);
    color: var(--text-dim);
}

.car-view-3d__empty {
    color: var(--text-faint);
    font-size: 0.85rem;
    line-height: var(--lh-snug);
    padding: 4px 2px;
}

.car-view-3d__clear {
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text-dim);
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}

.car-view-3d__clear:hover:not(:disabled) {
    border-color: var(--paint-red);
    color: var(--paint-red);
}

.car-view-3d__clear:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Form fields (step 3 + 4) ===== */
.field {
    margin-bottom: 16px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
}

.field--full {
    grid-column: 1 / -1;
}

@media (max-width: 480px) {

    .field-row,
    .contact-form {
        grid-template-columns: 1fr;
    }
}

.field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.field__optional {
    color: var(--text-faint);
    font-weight: 400;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 11px 12px;
    color: var(--ink);
    font-family: inherit;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 34px;
}

.field select:invalid {
    color: var(--text-faint);
}

.field select.is-placeholder {
    color: var(--text-faint);
}

.field select:disabled {
    background: var(--surface-tint);
    color: var(--text-faint);
    cursor: not-allowed;
}

.field textarea {
    field-sizing: content;
    min-block-size: 4.5lh;
    max-block-size: 40dvh;
    resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--text-faint);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
    border-color: var(--focus);
    outline: none;
    background: var(--surface-tint);
}

/* Fixed phone prefix (+51); the input only takes the local digits */
.phone-input {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.phone-input:hover {
    border-color: var(--text-faint);
}

.phone-input:focus-within {
    border-color: var(--focus);
    background: var(--surface-tint);
}

.phone-input__prefix {
    display: flex;
    align-items: center;
    padding: 0 4px 0 12px;
    color: var(--text-dim);
    font-weight: 500;
    user-select: none;
}

.phone-input input {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    background: none;
    padding: 11px 12px 11px 4px;
}

.phone-input input:focus-visible {
    outline: none;
    background: none;
}

/* Validation error state (phone / email) */
.field__error {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--paint-red);
}

.field--invalid .phone-input,
.field--invalid input {
    border-color: var(--paint-red);
}

/* ===== Confirm button ===== */

.confirm-container {
    display: flex;
    justify-content: end;
    max-width: 600px;
    margin: 12px auto 0;
    padding: 0 20px;
}

.step-confirm {
    padding: 14px 28px;
    white-space: nowrap;
    background: var(--accent-strong);
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.2s var(--ease-out), transform 0.1s var(--ease-out), opacity 0.2s var(--ease-out);
}

.step-confirm:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--accent);
}

.step-confirm:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.98);
}

/* aria-disabled: the step is incomplete but the button still answers a click
   by pointing at what is missing (see explainStep in src/repair.js). */
.step-confirm:disabled,
.step-confirm[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Success ===== */
.success {
    text-align: center;
    padding: 40px 12px 40px;
}

.success__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.success__icon svg {
    width: 30px;
    height: 30px;
}

.success h1 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 8px;
}

.success p {
    color: var(--text-dim);
    max-width: 40ch;
    margin: 0 auto 26px;
}

.success__reset {
    padding: 12px 22px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    font-weight: 500;
    color: var(--ink);
    background: none;
    cursor: pointer;
    transition: background 0.2s var(--ease-out);
}

.success__reset:hover {
    background: var(--surface-tint);
}

@media (min-width: 640px) {
    .repair {
        padding-top: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-contrast: more) {

    .data-card,
    .car-preview,
    .quality-card,
    .field input,
    .field select,
    .field textarea,
    .phone-input {
        border-width: 2px;
    }
}
/* ==========================================================================
   HOME PAGE (index.html)
   Everything below is scoped to `body.home` or to `.home-*` / page-section
   classes that only the home page uses, so the repair wizard is untouched.

   The page is a laboratory, after the logo: white paper, one ink (#262D40,
   the logo's own), square corners like the mark, and hairlines instead of
   cards. The brand stays one colour so the paint (the swatches, the vehicle,
   the finish levels) is the only colour on the page.
   ========================================================================== */

body.home {
    background: var(--paper);
    color: var(--ink);
}

/* On the root, not on body: the viewport takes scroll-behavior from the root
   element only, so the rule on body.home never smoothed an anchor jump. */
html:has(body.home) {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html:has(body.home) {
        scroll-behavior: auto;
    }
}

.home h1,
.home h2,
.home h3 {
    font-family: var(--font-display);
    font-weight: 500;
    text-wrap: balance;
    margin: 0;
}

/* Section headings run 32-48px: the tightest leading on the page after the
   hero, and enough negative tracking to close the gaps Jost leaves between
   its round caps at that size. */
.home h2 {
    line-height: var(--lh-title);
    letter-spacing: var(--track-title);
}

/* Card, step and tier headings sit at 20-26px. At 1.06 the two-line ones
   ("Planchado y desabolladura") nearly collided, and -0.02em had started to
   eat the counters. */
.home h3 {
    line-height: var(--lh-subhead);
    letter-spacing: var(--track-subhead);
}

.home p {
    margin: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    transition: top 0.2s var(--ease-out);
}

.skip-link:focus-visible {
    top: 12px;
}

/* ===== Home: buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s var(--ease-out), border-color 0.18s var(--ease-out),
        color 0.18s var(--ease-out);
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn--primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.btn--primary:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
}

.btn--ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--ink);
}

.btn--ghost:hover {
    border-color: var(--ink);
}

.btn--lg {
    min-height: 54px;
    padding: 14px 26px;
    font-size: 1.02rem;
}

.btn--sm {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 0.94rem;
}

.btn--block {
    width: 100%;
    margin-top: auto;
}

/* ===== Home: header ===== */
/* Pinned to --header-h rather than left to its contents: the nav links, the
   call-to-action and the menu toggle each give it a different natural height,
   and the wizard's sticky progress bar and the anchor offsets are placed at
   the token, so any difference shows up as a gap under the header. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--header-h);
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 16px 10px 20px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.site-header__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* The horizontal lockup: mark and wordmark, no tagline. The tagline is
   unreadable at header size, and it opens the hero instead. */
.site-header__logo {
    width: auto;
    height: 24px;
}

.site-nav {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: 28px;
}

.site-nav a {
    position: relative;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dim);
    transition: color 0.18s var(--ease-out);
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s var(--ease-out);
}

.site-nav a:hover {
    color: var(--ink);
}

.site-nav a:hover::after {
    transform: scaleX(1);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.site-header__actions .btn {
    display: none;
}

.nav-panel__cta {
    margin-top: 4px;
    padding: 13px 12px !important;
    border-radius: 0;
    background: var(--brand);
    color: #fff !important;
    text-align: center;
}

.nav-panel__cta:hover {
    background: var(--brand-dark) !important;
}

.nav-panel__cta--ghost {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--ink) !important;
}

.nav-panel__cta--ghost:hover {
    background: var(--surface-tint) !important;
    border-color: var(--ink);
}

@media (min-width: 900px) {
    .site-header {
        padding: 13px 32px;
    }

    .site-header__logo {
        height: 30px;
    }

    .site-nav {
        display: flex;
    }

    .site-header__actions .btn {
        display: inline-flex;
    }

    .site-header .menu-toggle {
        display: none;
    }
}

/* Four links and two buttons need about 1060px at full spacing. Below that
   the links close up instead of wrapping "Cómo funciona" onto two lines, and
   under 1000px the logo drops to its mobile height and the trade button to
   one word. */
.site-header .label-short {
    display: none;
}

@media (min-width: 900px) and (max-width: 999px) {
    .site-header__logo {
        height: 24px;
    }

    .site-header .label-long {
        display: none;
    }

    .site-header .label-short {
        display: inline;
    }
}

@media (min-width: 900px) and (max-width: 1099px) {
    .site-nav {
        gap: 0;
        margin-left: 12px;
    }

    .site-nav a {
        padding-inline: 8px;
        white-space: nowrap;
    }

    .site-nav a::after {
        left: 8px;
        right: 8px;
    }
}

/* ===== Home: shared section furniture ===== */
.section {
    padding: 72px 20px;
    /* the header is sticky, so anchor jumps need room to land under it */
    scroll-margin-top: calc(var(--header-h) + 4px);
    border-top: 1px solid var(--line);
}

.section--tint {
    background: var(--ground-tint);
}

.section__inner {
    max-width: var(--shell);
    margin: 0 auto;
}


/* Heading on the left, lede on the right, both on the same bottom line: the
   lede answers the heading instead of trailing under it. */
.section__head {
    display: grid;
    gap: 16px;
    margin-bottom: 44px;
}

.section__head h2,
.split__copy h2,
.contact__copy h2 {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}


.section__lede {
    max-width: 52ch;
    color: var(--text-dim);
    font-size: 1.06rem;
    line-height: var(--lh-body);
    text-wrap: pretty;
}

@media (min-width: 900px) {
    .section {
        padding: 96px 32px;
    }

    .section__head:has(.section__lede) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 64px;
        align-items: end;
    }

    .section__head h2 {
        grid-column: 1;
    }

    .section__head .section__lede {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 1.12rem;
    }
}

.section__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 20px;
    margin-top: 48px;
}

.section__cta-note {
    color: var(--text-faint);
    font-size: 0.9rem;
}

/* ===== Home: hero ===== */
.hero {
    position: relative;
    padding: 40px 20px 0;
    background: var(--ground);
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
    max-width: var(--shell);
    margin: 0 auto;
    padding-bottom: 56px;
}


.hero__title {
    font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
    line-height: var(--lh-display);
    letter-spacing: var(--track-display);
}

/* The old page coloured "de fábrica" red; on a one-ink page the phrase just
   stays part of the sentence. */
.hero__title em {
    font-style: normal;
}

.hero__lede {
    max-width: 48ch;
    margin-top: 24px !important;
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: var(--lh-body);
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

/* The trade buyer's own line under the owner's actions: a subtitle naming
   who it is for, then its button. */
.hero__trade {
    margin-top: 28px;
}

.home .hero__trade-lede {
    margin-bottom: 12px;
    color: var(--text-dim);
    font-size: 0.98rem;
    line-height: var(--lh-snug);
}

.hero__trade-lede strong {
    font-weight: 600;
    color: var(--ink);
}

.hero__trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px 28px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.hero__trust li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9rem;
    line-height: var(--lh-compact);
    color: var(--text-dim);
}

.hero__trust svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ink);
}

@media (min-width: 480px) {
    .hero__trust {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__trust li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

/* --- hero vehicle + live colour preview --- */
.hero__visual {
    display: flex;
    flex-direction: column;
}

/* The vehicle stands straight on the page, with only its own shadow. */
.hero__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    overflow: hidden;
}

.hero__vehicle {
    position: relative;
    z-index: 1;
    /* isolation, so the `color` blend of the tint sees the vehicle as its
       backdrop and not the hero behind it. */
    isolation: isolate;
    width: min(100%, 520px);
    /* the photo is square with the vehicle across its middle half; the
       negative margins give back the empty band above and below it */
    margin-block: -17% -14%;
    line-height: 0;
}

.hero__vehicle-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Both paint layers are cut with the same mask: a PNG of the same size whose
   alpha channel is 1 on the bodywork and 0 on glass, tyres, wheels, chrome,
   lights, plate and badge. It was generated from the photo itself (see
   README) because the beige bodywork is the only warm tone in it; the rest
   is grey or black.

   The photo itself used to be the luminance mask, which is why the colour
   swallowed the whole car: luminance only tells light from dark, so the
   chrome grille and the headlights (which are light) were painted like the
   bodywork, and the tyres came out a dull red instead of black. */
.hero__vehicle-paint,
.hero__vehicle-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: url("imgs/assets/suv-paint-mask.webp");
    mask-image: url("imgs/assets/suv-paint-mask.webp");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* A copy of the photo on top of itself, cut to the bodywork and filtered: it
   is what changes light and dark. With the filter at `none` it draws exactly
   the same pixels as the ones below, so the initial state is not altered,
   not even at the mask's soft edge.

   The filter sits here and not on the whole photo, which is what made pearl
   white and onyx black also dim the tail lights. */
.hero__vehicle-paint {
    background-image: url("imgs/assets/suv.webp");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: var(--vehicle-filter, none);
    transition: filter 0.45s var(--ease-out);
}

/* The flat colour in `color` mode takes the swatch's hue and saturation and
   keeps the luminance the layer below left, which is what preserves
   reflections, shadows and the seams between panels. */
.hero__vehicle-tint {
    background: var(--vehicle-tint, transparent);
    mix-blend-mode: color;
    opacity: var(--vehicle-tint-opacity, 0);
    transition: background 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}

.swatches {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 0 0;
    background: var(--ground);
}

.swatches__label {
    color: var(--text-dim);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Laid out like a colour chart: a chip per paint, its name under it. */
.swatches__row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.swatch {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: var(--lh-subhead);
    text-align: left;
    cursor: pointer;
}

.swatch::before {
    content: "";
    display: block;
    height: 48px;
    background: var(--sw);
    box-shadow: inset 0 0 0 1px rgba(38, 45, 64, 0.1);
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}

.swatch:hover::before {
    transform: translateY(-2px);
}

.swatch.is-active {
    color: var(--ink);
    font-weight: 600;
}

.swatch.is-active::before {
    outline-color: var(--ink);
}

.swatch:focus-visible {
    outline: none;
}

.swatch:focus-visible::before {
    outline-color: var(--focus);
    outline-style: dashed;
}

.swatch__name {
    overflow-wrap: anywhere;
}

.swatches__note {
    max-width: 44ch;
    color: var(--text-faint);
    font-size: 0.78rem;
    line-height: var(--lh-snug);
}

@media (max-width: 479px) {
    .swatch__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .swatch::before {
        height: 44px;
    }
}

@media (min-width: 900px) {
    .hero {
        padding: 72px 32px 0;
    }

    .hero__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 64px;
        padding-bottom: 88px;
    }

    .hero__copy {
        padding-top: 20px;
    }

    .hero__stage {
        min-height: 400px;
    }
}

/* ===== Home: service cards ===== */
/* One hairline grid rather than six floating cards: the gap is the rule. */
.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

@media (min-width: 620px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Capped at three so six services fill two even rows instead of leaving a
   two-card orphan row on wide screens. */
@media (min-width: 1000px) {
    .cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

.card {
    padding: 30px 28px 32px;
    background: var(--ground-raised);
}

.card__icon {
    display: block;
    margin-bottom: 22px;
    color: var(--ink);
}

.card__icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.6;
}

.card h3 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.card p {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: var(--lh-body);
}

/* ===== Home: trade sale band ===== */
/* Paint sold to other shops, under the service grid: the copy beside the
   three ways to give us the colour. Ink, like the recommended tier, so it
   reads as the second offer on the page and not as a footnote to the first. */
.trade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 20px;
    padding: 32px 28px;
    background: var(--ink);
    border: 1px solid var(--ink);
    color: #fff;
}

@media (min-width: 820px) {
    .trade {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        align-items: center;
        gap: 40px;
    }
}

.trade__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.trade__copy h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
}

.trade__copy p {
    margin: 0;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.95rem;
    line-height: var(--lh-snug);
}

.trade__copy .btn {
    margin-top: 14px;
}

.trade__btn {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

.trade__btn:hover {
    background: var(--surface-tint);
    border-color: var(--surface-tint);
}

.trade :focus-visible {
    outline-color: #fff;
}

.trade__ways {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

@media (min-width: 520px) {
    .trade__ways {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.trade__ways li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.trade__ways strong {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
}

.trade__ways span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    line-height: var(--lh-snug);
}

/* ===== Home: process steps ===== */
/* Four stations on one rule. The first is filled: it is where you start. */
.steps {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 700px) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1000px) {
    .steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .steps::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 20px;
        height: 1px;
        background: var(--border);
    }
}

.step-card {
    position: relative;
}

.step-card__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 22px;
    background: var(--ground);
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    line-height: 1;
}

.step-card:first-child .step-card__num {
    background: var(--ink);
    color: #fff;
}

.step-card h3 {
    font-size: 1.35rem;
    margin-bottom: 10px;
}

.step-card p {
    max-width: 34ch;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: var(--lh-body);
}

/* ===== Home: finish tiers ===== */
.tiers {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
}

@media (min-width: 820px) {
    .tiers {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Each level carries its own colour, the same as in the wizard: green for
   the economy level, the ink for the recommended one, gold for the top. The
   colour marks a chip beside the name, the price and the ticks. */
.tier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 32px 28px 28px;
    background: var(--ground-raised);
    border: 1px solid var(--border);
    --tier-color: var(--ink);
}

.tier--standard {
    --tier-color: var(--tier-standard);
    --tier-text: var(--tier-standard-text);
}

.tier--alta {
    --tier-color: var(--tier-alta);
    --tier-text: var(--tier-alta-text);
}

/* The recommended level is the one ink block in the row. */
.tier--premium {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    --tier-color: #fff;
}

.tier__badge {
    position: absolute;
    top: -1px;
    right: -1px;
    padding: 7px 12px;
    background: var(--ground);
    border: 1px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tier h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 1.65rem;
}

.tier h3::before {
    content: "";
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background: var(--tier-color);
}

.tier__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 2.1rem;
    line-height: 1.1;
    letter-spacing: var(--track-title);
    /* Prices are read down the row of three cards, so the digits are
       equal-width and the columns line up. */
    font-variant-numeric: tabular-nums;
    color: var(--tier-text, var(--tier-color));
}

.tier__price span {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.home .tier__price {
    margin-bottom: 14px;
}

.tier__desc {
    color: var(--text-dim);
    font-size: 0.95rem;
}

.tier__list {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin: 22px 0 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.tier__list li {
    position: relative;
    padding-left: 24px;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: var(--lh-snug);
}

/* The lead of each line names what it is; the sentence after it explains. */
.tier__list strong {
    font-weight: 600;
    color: var(--ink);
}

.tier__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    background: var(--tier-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.tier--premium .tier__price span,
.tier--premium .tier__desc,
.tier--premium .tier__list li {
    color: #c3c8d4;
}

.tier--premium .tier__list {
    border-top-color: rgba(255, 255, 255, 0.16);
}

.tier--premium .tier__list strong {
    color: #fff;
}

.tier--premium .btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

.tier--premium .btn--primary:hover {
    background: var(--ground-tint);
    border-color: var(--ground-tint);
}

.tier--premium :focus-visible {
    outline-color: #fff;
}

/* The multi-part discount under the three tiers: one card as wide as the row,
   the copy beside a four-step scale set like the tiers' prices. */
.discount {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 20px;
    padding: 28px;
    background: var(--ground-raised);
    border: 1px solid var(--border);
}

@media (min-width: 820px) {
    .discount {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        align-items: center;
        gap: 40px;
    }
}

.discount__copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.discount__copy h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
}

.discount__copy p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: var(--lh-snug);
}

.discount__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

@media (min-width: 520px) {
    .discount__steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.discount__steps li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.discount__steps strong {
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--tier-standard-text);
}

.discount__steps span {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.tiers__note {
    margin-top: 22px !important;
    max-width: 62ch;
    color: var(--text-faint);
    font-size: 0.86rem;
    line-height: var(--lh-body);
}

/* ===== Home: why us ===== */
.section__inner--split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
    max-width: var(--shell);
    margin: 0 auto;
}

@media (min-width: 900px) {
    .section__inner--split {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 80px;
    }
}

.split__copy .section__lede {
    margin-top: 18px;
    max-width: 46ch;
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px 40px;
    margin: 34px 0 0;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

.fact dt {
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 500;
    line-height: var(--lh-subhead);
    letter-spacing: var(--track-subhead);
    color: var(--ink);
}

.fact dd {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: var(--lh-body);
}

/* Links reset to plain text site-wide, so one inside running copy needs its
   underline back or it reads as an ordinary sentence. */
.fact dd a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--brand-line);
    text-underline-offset: 3px;
}

.fact dd a:hover {
    text-decoration-color: var(--ink);
}

/* The figures read as a spec sheet: a heavy rule on top, a hairline under
   each row, the number and what it counts on one line. */
.split__panel {
    border-top: 2px solid var(--ink);
}

/* Subgrid, so every figure shares one column and the labels line up
   whichever number is widest. */
.stats {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
}

.stats li {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.stats strong {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: var(--track-title);
    color: var(--ink);
    white-space: nowrap;
    /* while the figure counts up the digits change every frame; equal-width
       ones keep it from shivering */
    font-variant-numeric: tabular-nums;
}

.stats span {
    font-size: 0.95rem;
    line-height: var(--lh-compact);
    color: var(--text-dim);
}

/* ===== Home: FAQ ===== */
/* On a wide screen the questions take the right-hand column and the heading
   stays beside them, like the other section heads. */
@media (min-width: 900px) {
    .section__inner--aside {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 80px;
        align-items: start;
        max-width: var(--shell);
    }

    .section__inner--aside .section__head {
        margin-bottom: 0;
    }
}

.faq {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--border-strong);
}

.faq__item {
    background: transparent;
    border-bottom: 1px solid var(--border-strong);
    overflow: hidden;
}

/* The item clips (overflow: hidden), so the focus ring is drawn inside the
   summary instead of the 3px outside where it disappeared. */
.faq__item summary:focus-visible,
.map iframe:focus-visible {
    outline-offset: -3px;
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 2px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: var(--track-subhead);
    line-height: var(--lh-subhead);
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker {
    display: none;
}

/* A plus that loses its upright when the answer is open. */
.faq__item summary::after {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background:
        linear-gradient(var(--ink), var(--ink)) center / 16px 2px no-repeat,
        linear-gradient(var(--ink), var(--ink)) center / 2px 16px no-repeat;
    transition: background-size 0.25s var(--ease-out);
}

.faq__item[open] summary::after {
    background-size: 16px 2px, 2px 0;
}

.faq__item summary:hover {
    color: var(--ink-deep);
}

.faq__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 2px 24px;
    max-width: 58ch;
    color: var(--text-dim);
    font-size: 0.98rem;
    line-height: var(--lh-body);
}

.faq__body strong {
    color: var(--ink);
}

/* ===== Home: the proof photos =====
   One photo alone, next to what it proves. Grouped, they read as a gallery
   again: a drawer of loose things that proved nothing. That is why this has
   no title or frame of its own: it is not a block, it is part of the
   section it lands in.

   And no caption, except on one. Four of the five repeated what the text
   beside them already says: the Services card describes panel beating, the
   finishes describe the materials, the Colorimetry fact describes the
   spectrophotometer and the address says where the workshop is. With the
   caption gone, the photo keeps the full width instead of the 56% the text
   column left it, and the 400-600px of dead column beside each one go away. */
.proof {
    max-width: var(--shell);
    margin: 56px auto 0;
}

/* Two in a row need more space between them than from the text around them,
   or they read as a pair again instead of as two claims. */
.proof + .proof {
    margin-top: 88px;
}

.proof img {
    display: block;
    width: 100%;
    height: auto;
    /* The reserved space in the tone of the alternating backgrounds: no
       white flash on load. */
    background: var(--surface-tint);
}

/* From two-column width up, the photo is a band: at the shell's width a 4:3
   one would be 885px tall and cover the whole screen. 2:1 keeps it genuinely
   tall without making it a wall, and it is the same height for all of them,
   so the page gets a horizontal beat instead of rising and falling with each
   photo's ratio. */
@media (min-width: 900px) {
    .proof img {
        aspect-ratio: 2 / 1;
        height: auto;
        object-fit: cover;
    }
}

/* Where the crop lands: each photo's subject sits at a different height and
   the geometric centre works for none of the three. */
.proof img[src*="planchado"] { object-position: center 42%; }
.proof img[src*="matizado"] { object-position: center 45%; }
.proof img[src*="instalaciones"] { object-position: center 54%; }

.home .proof figcaption {
    margin-top: 16px;
    max-width: 58ch;
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: var(--lh-body);
}

.proof figcaption strong {
    font-weight: 600;
    color: var(--ink);
}

/* The portrait one is a band too, and its caption goes below, not beside.
   Standing upright it took 468px of the 1180 and left 594px of dead column in
   the top-right quadrant: on a wide screen it was the page's worst moment. A
   portrait cannot be fixed at this width (making it bigger only makes it
   taller), so it joins the band system like the others.

   16:9 and not 2:1 because it is the photo carrying the most weight and the
   only one with a caption: a little more height keeps the whole panel and the
   hand holding it. The crop is centred at 45%, where the panel sits against
   the bodywork; what gets lost is the glove below. */
@media (min-width: 900px) {
    .proof--lead img {
        aspect-ratio: 16 / 9;
        object-position: center 45%;
    }

    .home .proof--lead figcaption {
        /* 54 and not 62: `ch` measures the width of the zero, which in
           Schibsted Grotesk runs 23% above the average letter, so 62ch put
           76 characters on the line. */
        max-width: 54ch;
        font-size: 1.06rem;
    }
}

/* Next to the map, the list of details already provides the space above. */
.proof--tight {
    margin-top: 40px;
    margin-bottom: 32px;
}

/* ===== Home: contact ===== */
/* A page section like the others, not part of the footer: the details sit
   beside the pitch and the map runs the full width under both. */
.contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
}

@media (min-width: 900px) {
    .contact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 64px;
    }
}

/* Qualified to beat the `.home p` margin reset. */
.contact__copy .contact__trade {
    margin-top: 18px;
    color: var(--text-dim);
    font-size: 0.95rem;
}

.contact__trade a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact__copy .section__lede {
    margin-top: 18px;
}

.contact__details {
    display: flex;
    flex-direction: column;
    border-top: 2px solid var(--ink);
}

.contact__details li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
}

@media (min-width: 480px) {
    .contact__details li {
        grid-template-columns: 7.5rem minmax(0, 1fr);
        align-items: baseline;
        gap: 20px;
    }
}

.contact__label {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.contact__value {
    font-size: 1.04rem;
    line-height: var(--lh-snug);
    color: var(--ink);
    /* the address and the mail have no spaces to break at, and the cells are
       narrow; without this they run out over the rule on the right */
    overflow-wrap: anywhere;
}

/* The phone number and the mail are what a customer reaches for on a phone,
   and both were 25px of hit area inside a 61px row. The padding fills the row
   and the negative margin gives the space back, so nothing moves and the
   baseline alignment beside the label survives. */
a.contact__value {
    display: block;
    padding-block: 10px;
    margin-block: -10px;
}

a.contact__value:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.map {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    min-height: 260px;
    /* the embed paints white before the tiles arrive; the tint keeps that
       first second from reading as an empty hole in the page */
    background: var(--ground-tint);
    border: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 0.88rem;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

.map iframe {
    width: 100%;
    /* the embed carries width="600"; as a flex item its intrinsic width
       becomes its floor, so it has to be told it may shrink */
    min-width: 0;
    max-width: 100%;
    min-height: 400px;
    border: 0;
    /* just enough grey that the map's own colours don't outshout the page */
    filter: grayscale(0.4);
}

/* ===== Home: footer ===== */
/* The one ink ground on the page, with the full stacked lockup. Its columns
   and its bottom rule share one measure: the shell, centred, never closer
   than the page gutter to the edge. */
.site-footer {
    --footer-gutter: max(20px, calc((100% - var(--shell)) / 2));
    background: var(--ink-deep);
    color: #c3c8d4;
}

.site-footer :focus-visible {
    outline-color: #fff;
}

@media (min-width: 900px) {
    .site-footer {
        --footer-gutter: max(32px, calc((100% - var(--shell)) / 2));
    }
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 40px;
    margin-inline: var(--footer-gutter);
    padding-block: 64px 48px;
}

.site-footer__brand {
    grid-column: 1 / -1;
}

@media (min-width: 760px) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .site-footer__brand {
        grid-column: auto;
    }
}

.site-footer__logo {
    display: block;
    width: 240px;
    max-width: 100%;
    height: auto;
}

.site-footer__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-footer__nav h2 {
    margin: 0 0 6px;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8e96a8;
}

.site-footer__nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
    font-size: 0.95rem;
    color: #c3c8d4;
    transition: color 0.18s var(--ease-out);
}

.site-footer__nav a:hover {
    color: #fff;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-inline: var(--footer-gutter);
    padding-block: 22px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.84rem;
    line-height: var(--lh-snug);
    color: #8e96a8;
}

@media (min-width: 900px) {
    .site-footer__legal {
        text-align: right;
    }
}

/* ===== Home: WhatsApp floating button ===== */
.whatsapp-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: 0 8px 22px rgba(27, 33, 48, 0.28);
    transition: transform 0.2s var(--ease-out);
}

.whatsapp-fab svg {
    width: 30px;
    height: 30px;
}

.whatsapp-fab:hover {
    transform: translateY(-2px);
}

/* ===== Home: the one authored moment =====
   The page used to fade in every card, header and tier on scroll, which meant
   thirty identical entrances and copy that read half-grey the whole way down.
   The motion now happens once, on arrival, in the hero, and the rest of the
   page is simply there when you reach it.

   `backwards` is what makes this safe: the resting state is the finished one,
   so the keyframes only ever pull the element back during the animation. If
   animations never run, nothing is hidden. */
@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

.hero__copy > * {
    animation: hero-in 0.7s var(--ease-out) backwards;
}

.hero__title {
    animation-delay: 0.04s;
}

.hero__lede {
    animation-delay: 0.1s;
}

.hero__actions {
    animation-delay: 0.16s;
}

.hero__trust {
    animation-delay: 0.22s;
}

/* The car arrives a beat after the sentence that describes it, and travels a
   little further, so the hero reads left to right rather than all at once. */
.hero__visual {
    animation: hero-in 0.9s var(--ease-out) 0.14s backwards;
}

@media (prefers-reduced-motion: reduce) {

    .hero__copy > *,
    .hero__visual {
        animation: none;
    }
}

/* ==========================================================================
   QUOTE WIZARD polish (pgs/repair.html)
   Scoped to `body.wizard`, so every rule here outranks the base wizard
   styles above without editing them. The step markup, class names and ids
   the JS depends on are untouched: this is presentation only.
   ========================================================================== */

/* The wizard card sits on the section tint, so it reads as one sheet on the
   page rather than as the page itself. */
body.wizard {
    background: var(--surface-tint);
    color: var(--ink);
    min-height: 100dvh;
}

/* A label, not a button: it names the page and does nothing when clicked,
   so it carries no border (it used to look exactly like an outlined button).
   It appears from 1000px: between 900 and 1000 the five nav links, the logo
   and the label do not fit one row and the page scrolled sideways. */
.wizard .site-header__tag {
    display: none;
    color: var(--text-dim);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (min-width: 1000px) {
    .wizard .site-header__tag {
        display: inline-flex;
    }
}

/* ===== Wizard: shell ===== */
.wizard .repair {
    max-width: 680px;
    margin: 0 auto;
    padding: 28px 16px 8px;
    transition: max-width 0.35s var(--ease-out);
}

/* Two steps need more room than a form column: the three finish cards, and
   the 3D stage next to its parts list. Rather than bleeding those out of
   the card, the card itself widens for them and snaps back afterwards.
   Without :has() support the card simply stays at its base width; the
   grids inside already collapse gracefully. */
.wizard .repair:has(.step[data-step="2"].active) {
    max-width: 880px;
}

.wizard .repair:has(.step[data-step="3"].active) {
    max-width: 1000px;
}

.wizard-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: clip;
}

.wizard-body {
    padding: 26px 20px 30px;
}

@media (min-width: 640px) {
    .wizard-body {
        padding: 32px 34px 36px;
    }
}

/* ===== Wizard: progress =====
   Pinned under the site header so you can always see which step you are on,
   even part-way down a long step. Together with the sticky footer it frames
   the scrolling step content. */
/* The display below would otherwise beat the base .progress[hidden] rule
   (same specificity, later in the file), and the step bar stayed on top of
   the success screen after a request was sent. */
.wizard .progress[hidden],
.wizard-foot[hidden] {
    display: none;
}

.wizard .progress {
    position: sticky;
    top: var(--header-h);
    z-index: 6;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    padding: 22px 20px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.wizard .progress-dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 0;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text-faint);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 500;
    box-shadow: none;
    transform: none;
    transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
        color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.wizard .progress-dot::before {
    content: attr(data-step);
}

/* The label sits outside the 32px square without widening it, so the dots
   stay evenly spaced whatever the label length. */
.wizard .progress-dot::after {
    content: attr(data-label);
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-faint);
    white-space: nowrap;
    transition: color 0.3s var(--ease-out);
}

.wizard .progress-dot.is-current {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    box-shadow: none;
    transform: none;
}

.wizard .progress-dot.is-current::after {
    color: var(--ink);
    font-weight: 600;
}

.wizard .progress-dot.is-done {
    background: var(--surface);
    border-color: var(--ink);
    color: var(--ink);
}

.wizard .progress-dot.is-done::before {
    /* a tick reads faster than a number you have already passed */
    content: "✓";
}

.wizard .progress-dot.is-done::after {
    color: var(--text-dim);
}

.wizard .progress-line {
    height: 1px;
    margin-top: 16px;
    background: var(--border-strong);
}

.wizard .progress-line .fill {
    background: var(--brand);
}

/* Room for the labels hanging below the dots. */
.wizard .progress {
    padding-bottom: 36px;
}

@media (max-width: 420px) {
    .wizard .progress-dot::after {
        font-size: 0.66rem;
    }

    .wizard .progress {
        padding-inline: 14px;
    }
}

/* ===== Wizard: step headings ===== */
/* Jost, sentence case, as on the home page. */
.wizard .step h1 {
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
    font-weight: 500;
    line-height: var(--lh-heading);
    letter-spacing: var(--track-heading);
    text-wrap: balance;
    margin: 0 0 10px;
}

.wizard .step__subtitle {
    max-width: 46ch;
    margin: 0 auto 26px;
    font-size: 1rem;
    line-height: var(--lh-body);
    color: var(--text-dim);
}

/* ===== Wizard: quality cards ===== */
.wizard .quality-card {
    gap: 10px;
    padding: 20px 16px;
    border-radius: 0;
    border-width: 1px;
}

/* The three levels keep the home page's colours: green, the ink, gold. The
   border carries the colour at rest; selection doubles it. */
.wizard .quality-card:hover {
    box-shadow: 0 12px 26px rgba(27, 33, 48, 0.08);
}

.wizard .quality-card__badge {
    position: absolute;
    top: -11px;
    right: 16px;
    align-self: auto;
}

.wizard .quality-card__title {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.wizard .quality-card__sub {
    font-size: 0.95rem;
}

.wizard .quality-card__features {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ===== Wizard: camera tabs ===== */
.wizard .view-tab {
    padding: 8px 15px;
    border-width: 1px;
    border-color: var(--border);
    background: var(--surface-tint);
    font-size: 0.85rem;
}

.wizard .view-tab:hover {
    border-color: var(--border-strong);
    color: var(--ink);
}

.wizard .view-tab.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* The seams between one body panel and the next only read against a light
   ground, so the 3D stage keeps a white platen. */
.wizard .car-view-3d__canvas-wrap {
    border-radius: 0;
    background: #ffffff;
    border: 1px solid var(--border);
}

.wizard .car-view-3d__loading-label {
    color: var(--text-dim);
}

.wizard .car-view-3d__progress-track {
    background: rgba(27, 33, 48, 0.16);
}

.wizard .car-view-3d__summary {
    border-radius: 0;
    padding: 18px;
    background: var(--surface-tint);
}

.wizard .car-view-3d__list-item {
    background: var(--surface);
    border: 1px solid var(--border);
}

.wizard .car-view-3d__progress-bar {
    background: var(--brand);
}

/* ===== Wizard: parts checklist (step 3) =====
   The 3D picker's twin for keyboards, screen readers and failed viewers. */
.parts-picker {
    margin: 0 0 18px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.parts-picker__toggle {
    padding: 12px 16px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.parts-picker__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 2px 12px;
    min-width: 0;
    margin: 0;
    padding: 4px 12px 14px;
    border: 0;
}

.parts-picker__option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 6px 4px;
    font-size: 0.9rem;
    cursor: pointer;
}

.parts-picker__option input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ink);
}

/* ===== Wizard: form fields ===== */
/* ===== Wizard: vehicle data ===== */
.wizard .data-card__icon,
.wizard .car-preview__type {
    color: var(--ink);
}

.wizard .car-preview {
    box-shadow: none;
}

.wizard .field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6275' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.wizard .contact-form {
    column-gap: 18px;
}

.wizard .field {
    margin-bottom: 18px;
}

.wizard .field label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: 0.005em;
}

.wizard .field__optional {
    font-weight: 400;
    color: var(--text-faint);
}

.wizard .field input,
.wizard .field select,
.wizard .field textarea,
.wizard .phone-input {
    border-color: var(--border-strong);
    border-radius: 0;
    background: var(--surface);
}

.wizard .field input,
.wizard .field select,
.wizard .field textarea {
    padding-block: 12px;
}

.wizard .phone-input input {
    background: none;
    border-radius: 0;
}

.wizard .field input:hover,
.wizard .field select:hover,
.wizard .field textarea:hover,
.wizard .phone-input:hover {
    border-color: var(--text-faint);
}

.wizard .field input:focus-visible,
.wizard .field select:focus-visible,
.wizard .field textarea:focus-visible,
.wizard .phone-input:focus-within {
    border-color: var(--ink);
    background: var(--surface);
    box-shadow: 0 0 0 3px rgba(38, 45, 64, 0.12);
    outline: none;
}

.wizard .field--invalid .phone-input,
.wizard .field--invalid input {
    border-color: var(--paint-red);
    box-shadow: 0 0 0 3px rgba(201, 48, 42, 0.12);
}

/* The wrapper draws the ring for the phone field. The two rules above also
   match the input inside it, whose ring the wrapper clipped to a stray bar
   between «+51» and the digits. */
.wizard .phone-input input:focus-visible,
.wizard .field--invalid .phone-input input {
    box-shadow: none;
}

.wizard .field__error {
    font-weight: 500;
}

/* ===== Wizard: footer actions ===== */
.wizard-foot {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
}

@media (min-width: 640px) {
    .wizard-foot {
        padding: 16px 34px;
    }
}

.wizard .back-link {
    margin: 0;
    padding: 10px 16px 10px 12px;
    border: 1px solid transparent;
    border-radius: 0;
    font-weight: 600;
    color: var(--text-dim);
}

.wizard .back-link:hover {
    background: var(--surface-tint);
    border-color: var(--border);
    color: var(--ink);
}

/* The back button is hidden on step 1, so the footer needs something to
   hold the Continue button on the right. */
.wizard .back-link[hidden]+.confirm-container {
    margin-left: auto;
}

.wizard .confirm-container {
    max-width: none;
    margin: 0 0 0 auto;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 14px;
}

.confirm-hint {
    margin: 0;
    max-width: 30ch;
    font-size: 0.85rem;
    line-height: var(--lh-compact);
    text-align: right;
    color: var(--paint-red);
}

.wizard .step-confirm {
    padding: 14px 28px;
    border-radius: 0;
    background: var(--ink);
    box-shadow: none;
    transition: background 0.2s var(--ease-out), transform 0.12s var(--ease-out),
        opacity 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.wizard .step-confirm:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--ink-deep);
}

.wizard .step-confirm:disabled,
.wizard .step-confirm[aria-disabled="true"] {
    background: var(--border-strong);
    color: #fff;
    opacity: 1;
    box-shadow: none;
}

/* ===== Wizard: success ===== */
.wizard .success {
    padding: 48px 16px 44px;
}

.wizard .success__icon {
    width: 72px;
    height: 72px;
    border-radius: 0;
    background: var(--brand-soft);
    box-shadow: none;
}

.wizard .success h1 {
    font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.4rem);
    font-weight: 500;
    line-height: var(--lh-heading);
    letter-spacing: var(--track-heading);
}

.wizard .success__reset {
    padding: 13px 24px;
    border-radius: 0;
    border-color: var(--border);
    font-weight: 600;
}

.wizard .success__reset:hover {
    border-color: var(--ink);
    color: var(--ink);
    background: var(--brand-soft);
}

/* ===== Wizard: reassurance line under the card ===== */
.wizard-note {
    max-width: 680px;
    margin: 18px auto 40px;
    padding: 0 20px;
    text-align: center;
    font-size: 0.85rem;
    line-height: var(--lh-body);
    color: var(--text-faint);
}

.wizard-note a {
    color: var(--text-dim);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wizard-note a:hover {
    color: var(--ink);
}

/* ==========================================================================
   REQUEST TRACKING
   The code handed out when the form is sent, and the lookup form that sits
   below the wizard card.
   ========================================================================== */

/* ===== Form error notice ===== */
.form-error {
    margin: 14px 0 0;
    padding: 11px 14px;
    border: 1px solid rgba(201, 48, 42, 0.35);
    border-radius: var(--radius-sm);
    background: rgba(201, 48, 42, 0.06);
    color: #a5241d;
    font-size: 0.88rem;
    line-height: var(--lh-snug);
    text-align: left;
}

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

/* ===== Tracking code (success screen) ===== */
.tracking-code {
    max-width: 27rem;
    margin: 0 auto 26px;
    padding: 18px 20px 16px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-md);
    background: var(--brand-soft);
    text-align: center;
}

.tracking-code__label {
    display: block;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.tracking-code__row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 10px;
}

/* Spaced with letter-spacing instead of real spaces, so the code can be read
   aloud but copied as is. */
.tracking-code__value {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--ink);
}

.tracking-code__copy {
    padding: 8px 14px;
    border: 1px solid var(--brand-line);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out),
        border-color 0.2s var(--ease-out);
}

.tracking-code__copy:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.tracking-code__copy.is-copied {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.tracking-code__hint {
    margin: 0;
    font-size: 0.82rem;
    line-height: var(--lh-snug);
    color: var(--text-dim);
}

.tracking-code__hint a {
    color: var(--brand-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ===== Lookup by code ===== */

/* Its own width: the wizard card widens in steps 2 and 3 (see
   .wizard .repair:has(…)), and this card has no reason to move every time
   the customer moves on a step. */
.lookup {
    max-width: 680px;
    margin: 28px auto 0;
    padding: 24px 20px 26px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0;
}

@media (min-width: 640px) {
    .lookup {
        padding: 28px 34px 32px;
    }
}

.lookup__head h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
}

.lookup__head p {
    margin: 0 0 18px;
    font-size: 0.92rem;
    line-height: var(--lh-body);
    color: var(--text-dim);
    max-width: 46ch;
}

/* Field and button share a row as soon as there is room; below that the
   button goes full width instead of squeezing beside the field. */
.lookup__form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
}

.lookup__form .field {
    flex: 1 1 15rem;
    margin-bottom: 0;
}

.lookup__form .field input {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
}

.lookup__submit {
    flex: 0 0 auto;
    padding: 11px 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), opacity 0.2s var(--ease-out),
        transform 0.1s var(--ease-out);
}

.lookup__submit:hover:not(:disabled) {
    background: var(--brand-dark);
}

.lookup__submit:active:not(:disabled) {
    transform: scale(0.98);
}

.lookup__submit:disabled {
    opacity: 0.55;
    cursor: progress;
}

@media (max-width: 420px) {
    .lookup__submit {
        flex: 1 1 100%;
    }
}

.lookup__result {
    margin: 20px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: clip;
}

.lookup__result[hidden] {
    display: none;
}

.lookup__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.lookup__row:last-child {
    border-bottom: none;
}

.lookup__row:nth-child(odd) {
    background: var(--surface-tint);
}

.lookup__row dt {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
}

.lookup__row dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.lookup__code {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1em;
}

/* The colour follows the raw status the API returns, not its label: blue
   while the request moves along, green when the work is done, muted grey if
   it was cancelled. */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 0;
    background: var(--surface-tint);
    border: 1px solid var(--border-strong);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
}

.status-pill[data-status="recibido"],
.status-pill[data-status="planchado"],
.status-pill[data-status="desmontaje_montaje"],
.status-pill[data-status="pintura"],
.status-pill[data-status="preparacion"],
.status-pill[data-status="cuadrada"],
.status-pill[data-status="cristales"],
.status-pill[data-status="finitura"] {
    background: var(--brand-soft);
    border-color: var(--brand-line);
    color: var(--brand-dark);
}

.status-pill[data-status="listo"],
.status-pill[data-status="entregado"] {
    background: rgba(31, 138, 76, 0.1);
    border-color: rgba(31, 138, 76, 0.35);
    color: #1a6d3c;
}

.status-pill[data-status="cancelado"] {
    background: rgba(201, 48, 42, 0.08);
    border-color: rgba(201, 48, 42, 0.3);
    color: #a5241d;
}

/* =============================================================================
   MATIZADO SALES (pgs/paintings.html)

   Reuses the quote wizard's shell (the card, the step bar, the footer, the
   fields) and adds only what this page has and the other does not: the ways
   of identifying a colour, the card for the colour found, the six containers
   and the summary before confirming.

   Everything sits under .wizard--paints so nothing in repair.html is touched.
   ========================================================================== */

/* The containers step wants six cards in a row; the summary, a little more
   width than a form. The rest keeps the wizard's base width (see
   `.wizard .repair` above). */
.wizard--paints .repair:has(.step[data-step="2"].active) {
    max-width: 1000px;
}

.wizard--paints .repair:has(.step[data-step="4"].active) {
    max-width: 780px;
}

/* The step that does not apply: neither done nor pending. It stays written in
   the bar, struck through, because vanishing would make the bar change shape
   when an option is picked, and that reads as a fault. */
.wizard--paints .progress-dot.is-skipped {
    background: var(--surface-tint);
    border-style: dashed;
    color: var(--text-faint);
}

.wizard--paints .progress-dot.is-skipped::before {
    content: "–";
}

.wizard--paints .progress-dot.is-skipped::after {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    color: var(--text-faint);
}

/* ===== Step 1: the routes ===== */
.method-tabs {
    margin: 0 0 22px;
}

.method-panel[hidden] {
    display: none;
}

.method-panel:focus-visible {
    outline: none;
}

.method-hint {
    margin: -4px 0 16px;
}

/* The line under each route: what to do when that route does not work. It is
   what turns a dead end into a door to the others. */
.method-note {
    margin: 14px 0 0;
    padding-left: 14px;
    border-left: 2px solid var(--border);
    font-size: 0.88rem;
    line-height: var(--lh-snug);
    color: var(--text-dim);
}

/* Field and button joined, with the button inside the same border: it is one
   gesture (type the code and search for it) and it looks like one. */
.code-search {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    transition: border-color 0.2s var(--ease-out);
}

.code-search:hover {
    border-color: var(--text-faint);
}

.code-search:focus-within {
    border-color: var(--focus);
}

.code-search input {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    background: none;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
}

.code-search input::placeholder {
    font-family: var(--font-body);
    text-transform: none;
}

.code-search input:focus-visible {
    outline: none;
    background: none;
}

.code-search__submit,
.reading-submit {
    flex: none;
    padding: 0 18px;
    border: none;
    background: var(--ink);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease-out);
}

.code-search__submit:hover,
.reading-submit:hover {
    background: var(--ink-deep);
}

.reading-submit {
    width: 100%;
    padding: 12px 18px;
}

/* The three steps of the workshop visit. Numbered because they are an order,
   not a list of benefits. */
.shop-steps {
    display: grid;
    gap: 14px;
    margin: 0 0 16px;
}

.shop-steps li {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    align-items: start;
    font-size: 0.95rem;
    line-height: var(--lh-snug);
    color: var(--text-dim);
}

.shop-steps__n {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--brand-soft);
    color: var(--brand);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 600;
}

.shop-card__note {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--surface-tint);
    font-size: 0.88rem;
    line-height: var(--lh-snug);
    color: var(--text-dim);
}

/* ===== The card for the colour found ===== */
.colour-card {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    margin: 18px 0 0;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--brand-line);
    box-shadow: 0 10px 24px rgba(27, 33, 48, 0.08);
    animation: step-in 0.35s var(--ease-out);
}

.colour-card[hidden] {
    display: none;
}

/* The swatch. The two-tone inner border keeps a factory white from getting
   lost against the card and a black from swallowing its own frame. */
.colour-card__swatch {
    min-height: 96px;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.colour-card__body {
    min-width: 0;
}

.colour-card__status {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 8px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
}

/* How close a digital reading landed. Exact and very close pass on their
   own; from there on the colour is adjusted by hand, and the stamp's colour
   says so before anyone reads the ΔE. */
.colour-card__status.is-exact,
.colour-card__status.is-close {
    background: rgba(31, 138, 76, 0.1);
    color: #1a6d3c;
}

.colour-card__status.is-near {
    background: rgba(244, 180, 0, 0.14);
    color: var(--tier-alta-text);
}

.colour-card__status.is-far {
    background: rgba(201, 48, 42, 0.08);
    color: #a5241d;
}

.colour-card__name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: var(--lh-subhead);
}

.colour-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 10px 0 0;
}

.colour-card__facts dt {
    font-size: 0.72rem;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-faint);
}

.colour-card__facts dd {
    margin: 2px 0 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.colour-card__code {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.colour-card__note {
    margin: 12px 0 0;
    font-size: 0.85rem;
    line-height: var(--lh-snug);
    color: var(--text-faint);
}

/* Sherwin's name for it. It goes under the manufacturer's, quieter: the one
   above is what the car's label says (and comes in the language of where it
   was built), this is the one understood at the counter. */
.colour-card__alias {
    display: block;
    margin-top: 2px;
    font-size: 0.85rem;
    color: var(--text-faint);
}

/* Picking the finish. It shows when the manufacturer catalogue does not say
   (one colour in eight) or when we inferred it from the name. It is not
   decoration: the finish multiplies the price, so asking is more honest than
   guessing and undercharging. */
.colour-card__finish {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.colour-card__finish-ask {
    margin: 0 0 8px;
    font-size: 0.85rem;
    line-height: var(--lh-snug);
    color: var(--text-dim);
}

.finish-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Rectangles like the finder's hue chips, not pills: here one filters and
   picks, and pills are for status. See the note next to .staff-chip. */
.finish-chip {
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.finish-chip:hover {
    border-color: var(--border-strong);
}

.finish-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* The colours are no longer in the page: they have to be fetched. The grid
   dims while they arrive instead of emptying, because emptying would make the
   page height jump on every model or year change. */
.swatch-grid.is-loading {
    opacity: 0.45;
    pointer-events: none;
}

/* The code that is not in the catalogue. It is not the customer's mistake,
   so it is not painted red: it is a note that also offers the other routes. */
.colour-miss {
    margin: 18px 0 0;
    padding: 14px 16px;
    background: var(--surface-tint);
    border-left: 2px solid var(--border-strong);
    font-size: 0.9rem;
    line-height: var(--lh-snug);
    color: var(--text-dim);
}

.colour-miss[hidden] {
    display: none;
}

/* A colour the guides have no chip for: a hatch, never a guessed hex. */
.swatch--none {
    background: repeating-linear-gradient(135deg, var(--surface-tint) 0 6px, var(--surface) 6px 12px) !important;
}

/* A colour picked from the finder, not read off the label. */
.colour-card__status.is-picked {
    background: var(--brand-soft);
    color: var(--ink);
}

/* ===== Step 1: the finder, for whoever has no label to read ===== */
.finder-toggle {
    display: inline-block;
    margin: 2px 0 16px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.finder-toggle[aria-expanded="true"] {
    text-decoration-style: dotted;
}

.colour-finder {
    margin: 0 0 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.colour-finder[hidden] {
    display: none;
}

/* The button sets its own display, which beats the hidden attribute; without
   this it stayed on screen after a code search had found the colour. */
.finder-toggle[hidden] {
    display: none;
}

/* A code with several versions: the grid of those versions and its note, and
   none of the browsing controls (model, year, tones, text filter, «ver más»).
   The class is set by renderFinder in src/paintings.js. */
.colour-finder.is-variants > .field-row,
.colour-finder.is-variants .finder-tools,
.colour-finder.is-variants .finder-widen,
.colour-finder.is-variants .finder-more {
    display: none;
}

.finder-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 12px;
}

.finder-families {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.finder-family {
    padding: 5px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.finder-family:hover {
    border-color: var(--border-strong);
}

.finder-family.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

.finder-search {
    width: 100%;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
}

.finder-search:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

.finder-widen {
    margin: -6px 0 12px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.finder-widen[hidden] {
    display: none;
}

.finder-note {
    margin: 0 0 12px;
    font-size: 0.85rem;
    line-height: var(--lh-snug);
    color: var(--text-dim);
}

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
}

.swatch-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    min-width: 0;
    padding: 8px 8px 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.swatch-option:hover {
    border-color: var(--border-strong);
}

.swatch-option.is-selected {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

.swatch-option__chip {
    align-self: stretch;
    height: 44px;
    margin-bottom: 7px;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.swatch-option__code {
    /* The line now carries the factory code and Sherwin's («KBX / PBX /
       92514») and the tile is 118px wide. It breaks at the separators the way
       the name does, instead of overflowing the box. */
    max-width: 100%;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

.swatch-option__name {
    max-width: 100%;
    font-size: 0.8rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.swatch-option__meta {
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--text-faint);
}

.finder-more {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: none;
    border: 1px dashed var(--border-strong);
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.finder-more:hover {
    border-style: solid;
}

.finder-more[hidden] {
    display: none;
}

@media (max-width: 520px) {
    .colour-card {
        grid-template-columns: 1fr;
    }

    .colour-card__swatch {
        min-height: 72px;
    }
}

/* ===== Step 2: the six containers ===== */
.size-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
}

.size-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
}

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

.size-card.is-selected {
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
}

/* The container, drawn. Six cans of the same drawing at different sizes say
   «this one is twice that one» faster than six fractions, and no photo is
   needed. The side comes from the cube root of the volume (see
   renderSizeCards in src/paintings.js), so the comparison is that of two
   real containers and not of two numbers.

   The platform is what keeps the six cards aligned: the cans stand on its
   bottom edge and the labels all start at the same height, even though the
   gallon can is twice the size of the 1/32 one. */
.size-card__stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 60px;
    margin-bottom: 10px;
}

/* The can is painted the chosen colour, because that is what it holds: the
   customer sees their colour in all six sizes and does not have to remember
   which one they picked two steps back.

   All the relief is translucent layers over --jar, never computed tones. A
   lightened black and a darkened white have to be computed separately and
   one always breaks; white and black with alpha land equally well on any
   colour, and here there are 28,562. And they stay below 0.18 on purpose:
   the can has to look like a can, but the colour it shows is still the
   colour, not a prettier version of it. */
.size-card__jar {
    display: block;
    width: calc(16px + var(--fill) * 22px);
    height: calc(18px + var(--fill) * 40px);
    background:
        /* light comes from the left and the can is round */
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.17) 0%,
            rgba(255, 255, 255, 0.05) 34%,
            rgba(0, 0, 0, 0.03) 64%,
            rgba(0, 0, 0, 0.11) 100%),
        /* and the bottom of the can sits in shadow */
        linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(0, 0, 0, 0.11) 100%),
        var(--jar, var(--surface-tint));
    /* The border is painted over the background, so a translucent black gives
       the rim and the lid the same colour, a touch darker, without having to
       know what the colour is. */
    border: 1px solid rgba(0, 0, 0, 0.24);
    border-top-width: 3px;
    border-top-color: rgba(0, 0, 0, 0.34);
    /* A light thread under the lid. On a light colour the lid already
       separates by its dark border; on a black it does not, and without this
       the black can is a rectangle with no lid. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
        box-shadow 0.2s var(--ease-out);
}

/* With no colour to show it is striped, like the card's swatch: a can painted
   an invented colour is exactly what the customer would believe. */
.size-card__jar.swatch--none {
    box-shadow: none;
}

.size-card:hover .size-card__jar {
    border-color: rgba(0, 0, 0, 0.42);
    border-top-color: rgba(0, 0, 0, 0.52);
}

/* The chosen one is already marked on the card (border and ring), so the can
   is only outlined: if it also changed colour, the colour would stop being the data. */
.size-card.is-selected .size-card__jar {
    border-color: rgba(0, 0, 0, 0.55);
    border-top-color: rgba(0, 0, 0, 0.66);
}

.size-card__fraction {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

.size-card__volume {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--text-dim);
}

.size-card__use {
    margin-top: 6px;
    font-size: 0.78rem;
    line-height: var(--lh-compact);
    color: var(--text-faint);
    text-wrap: balance;
}

.size-card__price {
    margin-top: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

/* The bottom bar: how many containers and what they add up to. It appears once one is picked. */
.order-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: var(--surface-tint);
    border: 1px solid var(--border);
}

.order-bar[hidden] {
    display: none;
}

.order-bar__units {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-bar__label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-dim);
}

.units-stepper {
    display: flex;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border-strong);
}

.units-stepper__btn {
    width: 36px;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s var(--ease-out);
}

.units-stepper__btn:hover:not(:disabled) {
    background: var(--surface-tint);
}

.units-stepper__btn:disabled {
    color: var(--border-strong);
    cursor: not-allowed;
}

.units-stepper__value {
    display: grid;
    place-items: center;
    min-width: 44px;
    padding: 8px 0;
    border-inline: 1px solid var(--border-strong);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 600;
}

.order-bar__total {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.order-bar__total strong {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--ink);
}

.order-note {
    margin: 12px 0 0;
    font-size: 0.85rem;
    line-height: var(--lh-snug);
    color: var(--text-faint);
}

.order-note[hidden] {
    display: none;
}

/* ===== Step 3: the two data blocks ===== */
.company-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Step 4: the summary ===== */
.summary {
    display: grid;
    gap: 14px;
    margin: 0 0 18px;
}

.summary__block {
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
}

.summary__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.summary__head h2 {
    margin: 0;
    margin-right: auto;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
}

/* The shortcut to the step where it is changed. Discreet, but present on each
   block: this is the screen where one finds they picked the wrong container. */
.summary__edit {
    padding: 4px 2px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.summary__edit:hover {
    color: var(--ink);
}

.summary__swatch {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.summary__rows {
    display: grid;
    gap: 8px;
    margin: 0;
}

.summary__rows > div {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 12px;
    align-items: baseline;
}

.summary__rows dt {
    font-size: 0.85rem;
    color: var(--text-faint);
}

.summary__rows dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: var(--lh-snug);
    overflow-wrap: anywhere;
}

.summary__code {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.summary__pending {
    margin: 0;
    padding: 12px 14px;
    background: var(--surface-tint);
    font-size: 0.9rem;
    line-height: var(--lh-snug);
    color: var(--text-dim);
}

@media (max-width: 480px) {
    .summary__rows > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.summary__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
    padding: 16px;
    background: var(--ink);
    color: #fff;
    font-size: 0.9rem;
}

.summary__price[hidden] {
    display: none;
}

.summary__price strong {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
}

.summary__legal {
    margin: 0 0 4px;
    font-size: 0.85rem;
    line-height: var(--lh-snug);
    color: var(--text-faint);
}

/* =============================================================================
   Workshop panel (pgs/taller.html)

   It is an internal tool, not a page of the site: it has no public header or
   menu, so it brings its own wrapper. The difference from the rest of the
   site is deliberate (a dark bar, smaller type, everything tighter) because
   nobody is being persuaded here: people watch a work queue all day long, and
   what helps is density and contrast, not air.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Barra superior
   -------------------------------------------------------------------------- */

/* Behind a table that is looked at all day goes a flat, quiet ground: the
   section tint, with the cards on white and the bar on top in the logo's ink,
   so the panel reads as the same brand as the site without borrowing its
   generous spacing. The status pills carry their own tints (below), which
   hold their contrast on white. */
body.staff {
    background: var(--surface-tint);
    color: var(--ink);
}

/* .staff-panel is flex, and a class's `display` beats the hidden attribute:
   without this the panel would show beneath the login form, empty table and
   all. It is scoped to this page instead of fixing [hidden] for the whole
   site, which is a much bigger change than the symptom calls for. */
.staff [hidden] {
    display: none !important;
}

.staff-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 24px;
    background: var(--ink);
    color: #fff;
}

.staff-topbar :focus-visible {
    outline-color: #fff;
}

.staff-topbar__logo {
    display: block;
    height: 24px;
    width: auto;
}

.staff-topbar__rule {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.22);
}

.staff-topbar__label {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c3c8d4;
}

.staff-topbar__clock {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    white-space: nowrap;
}

.staff-topbar__logout {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-sm);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}

.staff-topbar__logout:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.45);
}

/* -----------------------------------------------------------------------------
   Cuerpo
   -------------------------------------------------------------------------- */

.staff-page {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 26px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Like the wizard's wide step (see `.wizard .repair`), the column widens
       on its own when needed and comes back with a transition. */
    transition: max-width 0.35s var(--ease-out);
}

/* With the table in view the normal width falls short: nine fields per row
   plus the status and who holds it, and squeezing them into the site's box
   forced horizontal scrolling and clipped the «Ocupado» pill when it
   stretched. So the column stretches as far as the viewport allows and the
   table (width:100%) shares that extra room among its columns, which is what
   gives the right-hand one slack. On the login (no table) it stays narrow. */
.staff-page:has(#staffPanel:not([hidden])) {
    max-width: min(1340px, calc(100vw - 40px));
}

/* The profile breaks loose entirely: the photo against the left edge and the
   buttons sharing the whole window. It is a single-decision screen, and
   boxing it in the site's frame left it floating in the middle with half the
   screen empty on either side. */
.staff-page:has(#staffProfile:not([hidden])) {
    /* `none` and not `100%`: the column has a max-width transition, and
       between a length and a percentage the browser interpolates a calc()
       that stops halfway. With the keyword there is nothing to interpolate,
       and the width jump lands at the same instant the screen changes. */
    max-width: none;
}

/* The whole panel is a flex child of .staff-page, so it shares out its own
   space: title, tools, card and note. */
.staff-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.staff-page h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem);
    font-weight: 500;
    line-height: var(--lh-heading);
    letter-spacing: var(--track-heading);
    color: var(--ink);
}

/* The count sits by the title and not in the card: it is the first thing
   looked at on returning to the screen (how many there are, and how many of
   the total) and from up there it does not compete with the data. */
.staff-page__count {
    margin: 5px 0 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.staff-loading {
    margin: 0;
    color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   Search and filters
   -------------------------------------------------------------------------- */

.staff-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.staff-search {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
}

/* The magnifier is the field's own background and not a separate element:
   that way nothing sits on top that could steal the click from the input. */
.staff-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px 9px 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23737b8d' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.3'/%3E%3Cpath d='M10.4 10.4 14 14' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px 50% / 14px 14px;
    font: inherit;
    font-size: 0.9rem;
    color: var(--ink);
}

.staff-search__input::placeholder {
    color: var(--text-faint);
}

.staff-search__input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: transparent;
}

.staff-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Filters are rectangles and statuses are pills. The different shape is on
   purpose: a «Listo» filter and a request's «Listo» status live on the same
   row, and they must not be confused. */
.staff-chip {
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-dim);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out),
                border-color 0.15s var(--ease-out);
}

.staff-chip:hover {
    border-color: var(--border-strong);
    color: var(--ink);
}

.staff-chip[aria-pressed="true"] {
    background: var(--ink);
    border-color: transparent;
    color: #fff;
}

/* «Mis vehículos» trims not by stage but by who holds the vehicle, so it
   combines with any of the statuses instead of replacing it. It goes first in
   the row, set off by a divider, and when on it gets a border rather than a
   fill like the statuses: two filters that do different things share the
   line, and they have to look different. */
.staff-chip--mine {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-right: 9px;
}

.staff-chip--mine svg {
    width: 15px;
    height: 15px;
}

.staff-chip--mine::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: var(--border-strong);
}

/* Outlined in ink when on. It used to be filled in --brand, which the
   rebrand made the same colour as the status chips' --ink, and the two kinds
   of filter could no longer be told apart. */
.staff-chip--mine[aria-pressed="true"] {
    background: var(--brand-soft);
    border-color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--ink);
    color: var(--ink);
}

/* -----------------------------------------------------------------------------
   Card and table
   -------------------------------------------------------------------------- */

.staff-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: none;
}

/* On a narrow screen the table scrolls inside its card instead of
   rearranging: nine columns that read as a row, and one scroll rule costs
   less than twenty rearranging ones. */
.staff-table__scroll {
    overflow-x: auto;
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
    font-size: 0.875rem;
}

.staff-table thead tr {
    background: var(--surface-tint);
}

.staff-table th {
    padding: 11px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.staff-table td {
    padding: 10px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}

.staff-table tbody tr:last-child td {
    border-bottom: none;
}

.staff-table tbody tr:hover {
    background: var(--surface-tint);
}

/* Only what reads as one run (code, date, phone) refuses to break. Names and
   vehicles may take two lines: the row height is set by the status pill
   anyway, so it costs nothing. */
.staff-table__nowrap {
    white-space: nowrap;
}

.staff-table__code {
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* The plate gets its own box: it is what identifies the car in the yard, and
   this way it is found by running an eye down the column. */
.staff-table__plate {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 0;
    background: var(--surface-tint);
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.staff-table__muted {
    color: var(--text-dim);
    white-space: nowrap;
}

.staff-table__num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Status: a pill with its own dropdown

   A hand-made menu and not a <select>, because the native one does not let
   its options be painted: here each status carries its colour dot, and
   seeing the coloured list on opening is half the point.

   The menu is positioned `fixed`, not `absolute`. The table lives inside a
   container with overflow so it can scroll horizontally, and an absolute
   element would be clipped against that edge: the dropdown on the last rows
   would be cut off. With `fixed` it escapes the clipping, at the cost of
   computing the position on opening and closing when anything scrolls
   (src/staff.js).
   -------------------------------------------------------------------------- */

.staff-status {
    position: relative;
    display: inline-block;
}

/* While the PATCH is in flight the pill dims and takes no other click: the
   change is not in the database yet and must not read as if it were. */
.staff-status[data-saving="1"] {
    opacity: 0.5;
    pointer-events: none;
}

.staff-status__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 11px;
    border: none;
    border-radius: 0;
    background: var(--pill-bg, var(--surface-tint));
    color: var(--pill-fg, var(--text-dim));
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.staff-status__pill:focus-visible,
.staff-status__option:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.staff-status__dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pill-dot, currentColor);
}

/* The triangle is drawn with borders so it inherits the status colour, which
   is exactly what a caret set as a background image cannot do. */
.staff-status__caret {
    flex: none;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.55;
}

.staff-status__menu {
    position: fixed;
    z-index: 40;
    min-width: 190px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 26px rgba(27, 33, 48, 0.14);
}

.staff-status__option {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 11px;
    border: none;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.staff-status__option:hover {
    background: var(--surface-tint);
}

/* The status the request already has shows in its own colour, so on opening
   the menu it is immediately clear where it stands. */
.staff-status__option[aria-selected="true"] {
    background: var(--pill-bg);
    color: var(--pill-fg);
}

/* The eleven statuses of the table's CHECK (server/schema.sql), each with
   its tone. With the whole table on screen, colour works as an index: the
   load is visible without reading a word, which is why the seven workshop
   stages carry seven different hues and not the same blue seven times.

   It sits on bare [data-status] so it serves the pill and each menu option
   alike, which is what gives them their colour dot. */
.staff [data-status="recibido"]           { --pill-bg: #eceef2; --pill-fg: #3f4757; --pill-dot: #7d8a97; }
.staff [data-status="planchado"]          { --pill-bg: #f8efd9; --pill-fg: #6f520b; --pill-dot: #d19b1e; }
.staff [data-status="desmontaje_montaje"] { --pill-bg: #eeebf8; --pill-fg: #4d3f88; --pill-dot: #8a76c8; }
.staff [data-status="pintura"]            { --pill-bg: #e3f0f9; --pill-fg: #1b5a80; --pill-dot: #299fdf; }
.staff [data-status="preparacion"]        { --pill-bg: #faecdf; --pill-fg: #854114; --pill-dot: #dd7b38; }
.staff [data-status="cuadrada"]           { --pill-bg: #f1ede5; --pill-fg: #65553a; --pill-dot: #a8916a; }
.staff [data-status="cristales"]          { --pill-bg: #e0f3f1; --pill-fg: #15645b; --pill-dot: #26a89c; }
.staff [data-status="finitura"]           { --pill-bg: #f9e8f0; --pill-fg: #892856; --pill-dot: #d1508f; }
.staff [data-status="listo"]              { --pill-bg: #e2f2e9; --pill-fg: #1a6a3b; --pill-dot: #2f9e5c; }
.staff [data-status="entregado"]          { --pill-bg: #eceee8; --pill-fg: #50574a; --pill-dot: #8d9682; }
.staff [data-status="cancelado"]          { --pill-bg: #f9e7e6; --pill-fg: #9f231c; --pill-dot: #d94a41; }

/* The status pill of a vehicle someone else holds: inert and without the
   caret that invites opening it. The server refuses the change anyway (403);
   this only avoids the click that led nowhere. */
.staff-status__pill--locked {
    cursor: default;
    opacity: 0.55;
}

.staff-status__pill--locked .staff-status__caret {
    display: none;
}

/* -----------------------------------------------------------------------------
   The «Ocupado» column

   Who has the vehicle in hand. Available is a button to take it; held by
   oneself, a pill that releases it when pressed; held by someone else, just
   the name. The rule (once taken, only its holder releases it or changes its
   status) is enforced by the server; this is its reflection.
   -------------------------------------------------------------------------- */

.staff-occupied {
    white-space: nowrap;
    /* Reserves room for the stretched pill (name + «Liberar»). The resting
       pill still fits the name; what reserves is the column, so that on hover
       «Liberar» fits inside the column itself (without widening the table or
       getting clipped) and, when the table does not fit and has to scroll,
       there is somewhere to go. */
    min-width: 15rem;
}

/* Available: a quiet button that invites taking it. */
.staff-occupied__claim {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px dashed var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

.staff-occupied__claim:hover {
    border-color: var(--brand);
    border-style: solid;
    color: var(--ink);
    background: var(--surface-tint);
}

/* Held by oneself: a solid pill with the name; pressing it releases it. */
.staff-occupied__mine {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: none;
    border-radius: 0;
    background: #e2f2e9;
    color: #1a6a3b;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s var(--ease-out);
}

.staff-occupied__mine:hover {
    background: #d0eadb;
}

/* «Liberar» appears on hover or focus, and the pill stretches to make room
   for it instead of always reserving it: at rest it is 0 wide (without that,
   the name was left with an empty gap on its right) and it grows with the
   max-width transition. The margin animates separately so it does not add a
   gap while folded either. */
.staff-occupied__free {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a6a3b;
    opacity: 0;
    transition: max-width 0.18s var(--ease-out), margin-left 0.18s var(--ease-out), opacity 0.14s var(--ease-out);
}

/* staff.js sets the class on entering the cell (not :hover), so «Liberar»
   does not close while the table scrolls to show it. */
.staff-occupied.is-peeking .staff-occupied__free {
    max-width: 6rem;
    margin-left: 8px;
    opacity: 1;
}

.staff-occupied__claim:focus-visible,
.staff-occupied__mine:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* Held by someone else: just the name, muted, not looking pressable. */
.staff-occupied__other {
    color: var(--text-dim);
    font-size: 0.82rem;
    font-weight: 500;
}

/* Two people at most per vehicle, so the cell is a list and not a single
   control: one's own pill, the other person's name and (while there is room
   left) the button to join. Stacked, so that one long name cannot push the
   other out of the column. */
.staff-occupied__holders {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

/* «Acompañar» rather than «Disponible»: somebody already has the vehicle and
   what is on offer is joining them, not taking it. */
.staff-occupied__claim--join {
    font-size: 0.78rem;
    padding: 4px 10px;
}

/* -----------------------------------------------------------------------------
   The «Piezas» column: the arrow that opens the viewer

   The number is still the column's data; the arrow says there is something
   behind it to look at. It only appears when there are parts and a silhouette
   to draw them on (see buildPartsCell in src/staff.js).
   -------------------------------------------------------------------------- */

.staff-parts__open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin: -4px -8px;          /* the row does not grow for the button */
    border: none;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

.staff-parts__open:hover {
    background: var(--surface-tint);
    color: var(--brand);
}

.staff-parts__open:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

/* The tip turns when it opens, which is what ties the arrow to what came
   out of it. */
.staff-parts__caret {
    flex: none;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    opacity: 0.55;
    transition: transform 0.18s var(--ease-out), opacity 0.15s var(--ease-out);
}

.staff-parts__open:hover .staff-parts__caret {
    opacity: 1;
}

.staff-parts__open[aria-expanded="true"] .staff-parts__caret {
    transform: rotate(90deg);
    opacity: 1;
}

/* -----------------------------------------------------------------------------
   The parts viewer

   A layer over the table: the vehicle turning on the left and the list of
   parts on the right, which is the split .car-view-3d already has in the
   wizard and in the counter's form. All this adds is the layer around it.
   -------------------------------------------------------------------------- */

.parts-view[hidden] {
    display: none;
}

.parts-view {
    position: fixed;
    inset: 0;
    /* Above the top bar and the status menus (40), which is everything else
       this page has. */
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

.parts-view__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(27, 33, 48, 0.55);
}

.parts-view__panel {
    position: relative;       /* over the darkened backdrop */
    width: min(1040px, 100%);
    /* Its height comes from what is inside it, with the window as the ceiling:
       on a short screen the viewer and its list scroll instead of overflowing. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 22px 24px 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgba(27, 33, 48, 0.28);
}

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

.parts-view__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
}

/* The plate and the vehicle: which car it is that is turning. */
.parts-view__subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.parts-view__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

.parts-view__close svg {
    width: 17px;
    height: 17px;
}

.parts-view__close:hover {
    border-color: var(--text-faint);
    background: var(--surface-tint);
    color: var(--ink);
}

.parts-view__close:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* The viewer carries no camera buttons here (it turns by itself), so the gap
   they left under the canvas is not needed. */
.parts-view .car-view-3d {
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Page states
   -------------------------------------------------------------------------- */

.staff-empty {
    margin: 0;
    padding: 44px 20px;
    text-align: center;
    color: var(--text-dim);
}

.staff-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-faint);
}

/* The login card competes with nothing: it is the only thing on screen, so it
   stays centred and narrow. */
.staff-login {
    max-width: 380px;
    margin: 6vh auto 0;
}

/* -----------------------------------------------------------------------------
   The worker's profile

   The step between the login and the table: the photo, the name, the notepad
   of reminders and the ways to go on (with the session started or just to
   look). Like the login, it stays narrow and centred: there is no table here
   asking for width.
   -------------------------------------------------------------------------- */

.staff-profile {
    width: 100%;
    margin: 4vh 0 0;
}

.staff-profile__top {
    display: flex;
    /* Top-aligned, not stretched: with the height cap the photo is usually
       shorter than the column beside it, and hanging it to the bottom would
       separate it from the name, which is what it belongs with. */
    align-items: flex-start;
    gap: 34px;
}

/* The photo frame, while there is no photo. Dotted on purpose: it reads as a
   gap to fill and not as an empty avatar. */
.staff-profile__photo {
    flex: 0 0 auto;
    /* As tall as the column beside it (name, code and notes card), up to a
       cap, and with a portrait's proportion. Both sizes are written by
       src/staff.js measuring that column: all that is left here is the size
       it shows at if the script never runs, and then the ratio rules. */
    width: clamp(180px, 18vw, 300px);
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-tint);
    color: var(--text-faint);
}

.staff-profile__photo svg {
    width: 58px;
    height: 58px;
}

.staff-profile__photo-note {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* min-width:0 so a long name does not stretch the row and push the photo. */
.staff-profile__main {
    flex: 1 1 auto;
    min-width: 0;
}

.staff-profile__code {
    margin: 6px 0 0;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--text-dim);
}

.staff-profile__notes {
    margin-top: 20px;
    padding: 18px 20px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-tint);
}

.staff-profile__notes-title {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ink);
}

/* The notes are free text: no lists or fields, whatever the worker finds
   useful to remember. It grows with what is written and can be stretched by
   hand, like the site's other long text fields (see `.field textarea`). */
.staff-profile__notes-input {
    width: 100%;
    /* `field-sizing: content` stretches the field both ways, not only in
       height: a long word with no spaces (the kind that comes from leaning on
       the keyboard) pushed it out of the card and widened the whole page. With
       the width cap the field stays inside, and `anywhere` breaks the word
       wherever needed instead of pushing. */
    max-inline-size: 100%;
    overflow-wrap: anywhere;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 12px;
    color: var(--ink);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: var(--lh-body);
    field-sizing: content;
    min-block-size: 6lh;
    /* It grows with what is written up to here, and from there on it scrolls
       inside. The cap is not the box's whim: the photo beside it is as tall
       as this column, and without a ceiling a long list of reminders turned
       it into a poster. The `dvh` is for short screens, where 320px would
       already be half the window. */
    max-block-size: min(320px, 50dvh);
    resize: vertical;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.staff-profile__notes-input:hover {
    border-color: var(--text-faint);
}

.staff-profile__notes-input:focus-visible {
    border-color: var(--focus);
    outline: none;
}

.staff-profile__notes-hint {
    margin: 8px 0 0;
    min-height: 1.2em;
    font-size: 0.78rem;
    color: var(--text-faint);
}

/* The ways to go on, the same size and on the same row: neither is a corner
   of the other. Two for a worker and three for the boss, so the row shares
   itself out instead of having the number written in. */
.staff-profile__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.staff-profile__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out),
        transform 0.1s var(--ease-out);
}

.staff-profile__action svg {
    width: 20px;
    height: 20px;
}

.staff-profile__action:active {
    transform: scale(0.99);
}

.staff-profile__action--primary {
    background: var(--brand);
    color: #fff;
}

.staff-profile__action--primary:hover {
    background: var(--brand-dark);
}

.staff-profile__action--ghost {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink);
}

.staff-profile__action--ghost:hover {
    border-color: var(--text-faint);
    background: var(--surface-tint);
}

/* -----------------------------------------------------------------------------
   Vehículos / Matizado: the switch above the title

   Two large tabs rather than two more filter chips: they swap the whole table,
   not a slice of it, and at the workshop screen they are tapped by hand. The
   selected one is filled in ink like a status filter that is on; the counts
   ride inside so the other table's queue is visible without opening it.
   -------------------------------------------------------------------------- */

.staff-switch {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
}

.staff-switch__tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px;
    border: none;
    background: var(--surface);
    color: var(--text-dim);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}

.staff-switch__tab + .staff-switch__tab {
    border-left: 1px solid var(--border-strong);
}

.staff-switch__tab svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.staff-switch__tab:hover {
    color: var(--ink);
    background: var(--surface-tint);
}

.staff-switch__tab[aria-selected="true"] {
    background: var(--ink);
    color: #fff;
}

.staff-switch__tab:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.staff-switch__count {
    min-width: 22px;
    padding: 2px 7px;
    box-sizing: border-box;
    background: #eceef2;
    color: #3f4757;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.staff-switch__count:empty {
    display: none;
}

.staff-switch__tab[aria-selected="true"] .staff-switch__count {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* «2 nuevos»: the received orders nobody has opened. Orange, the colour of
   «En preparación», because it is the next thing that has to happen to them. */
.staff-switch__new {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #a24c14;
}

.staff-switch__new::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #dd7b38;
}

.staff-switch__tab[aria-selected="true"] .staff-switch__new {
    color: #f6c39e;
}

@media (max-width: 520px) {
    .staff-switch {
        display: flex;
        align-self: stretch;
    }

    .staff-switch__tab {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 12px;
    }

    .staff-switch__new {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   Matizado: the table's own cells
   -------------------------------------------------------------------------- */

.paint-who__company {
    font-weight: 600;
}

.paint-who__person {
    font-size: 0.82rem;
    color: var(--text-dim);
}

.paint-colour {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The colour itself, as big as the row allows: it is what the counter checks
   the mixed tin against at a glance. A hint, not a proof of the match. */
.paint-colour__swatch {
    flex: none;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid rgba(38, 45, 64, 0.18);
    background: var(--surface-tint);
}

/* A colour the catalogue has no hex for: hatched, so it cannot be read as grey. */
.paint-colour__swatch--unknown {
    background: repeating-linear-gradient(45deg, #eceef2 0 4px, #ffffff 4px 8px);
}

/* Not read yet: the customer is bringing the vehicle. */
.paint-colour__swatch--pending {
    border: 1px dashed #a0a7b6;
    background: transparent;
}

.paint-colour__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.paint-colour__name {
    font-weight: 600;
}

.paint-colour__meta {
    font-size: 0.82rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.paint-colour__code {
    font-family: var(--font-label);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
}

.paint-colour__tag {
    flex: none;
    padding: 3px 7px;
    background: #f8efd9;
    color: #6f520b;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.paint-colour__tag--read {
    background: #e0f3f1;
    color: #15645b;
}

/* The boss's button on an order read at the counter. Dashed like «Tomar» in
   the vehicle table: it offers a job that is waiting for somebody. */
.paint-colour__define {
    flex: none;
    margin-left: auto;
    padding: 6px 12px;
    border: 1px dashed var(--border-strong);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}

.paint-colour__define:hover {
    border-style: solid;
    border-color: var(--brand);
    background: var(--surface-tint);
}

.paint-colour__define:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.paint-time {
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.paint-size {
    font-weight: 600;
}

.paint-size__volume {
    font-size: 0.82rem;
    color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   Matizado: the boss's form for an order read at the counter

   It borrows the parts viewer's layer (.parts-view) and only narrows it: one
   column of fields instead of a 3D model and its list.
   -------------------------------------------------------------------------- */

.paint-define__panel {
    width: min(620px, 100%);
}

.paint-define__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.paint-define__group {
    margin: 6px 0 0;
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--text-dim);
}

.paint-define__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
}

.paint-define__swatch {
    display: flex;
    align-items: center;
    gap: 14px;
}

.paint-define__swatch input[type="color"] {
    width: 56px;
    height: 44px;
    padding: 2px;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    cursor: pointer;
}

.paint-define__check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
}

.paint-define__check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.paint-define__row3 {
    grid-template-columns: 1.4fr 0.8fr 1fr;
}

.paint-define .field__hint {
    margin-top: -6px;
}

@media (max-width: 560px) {
    .paint-define__row3 {
        grid-template-columns: 1fr 1fr;
    }

    .paint-define__row3 .field:first-child {
        grid-column: 1 / -1;
    }
}

/* Look-only notice above the table: without it, a table with everything
   inert reads as a broken table. */
.staff-readonly {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-tint);
    font-size: 0.86rem;
    color: var(--text-dim);
}

.staff-readonly span {
    flex: 1 1 20rem;
}

.staff-readonly__enter {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease-out);
}

.staff-readonly__enter:hover {
    background: var(--brand-dark);
}

/* The role, under the code. Only the boss carries one: everybody else does the
   same job, and repeating «Trabajador» on every profile would say nothing. */
.staff-profile__role {
    margin: 8px 0 0;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 0;
    background: var(--surface-tint);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-dim);
}

/* -----------------------------------------------------------------------------
   The boss's monitor

   One card per worker with the vehicles they have taken. It is read from across
   the room and at a glance (who is on something and who is not) so the name
   carries weight, and the card of somebody holding nothing dims instead of
   disappearing: a missing name would be information lost.
   -------------------------------------------------------------------------- */

.staff-monitor {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.staff-monitor__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.staff-monitor__head h1 {
    margin: 0;
}

.staff-monitor__refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.staff-monitor__refresh svg {
    width: 17px;
    height: 17px;
}

.staff-monitor__refresh:hover {
    border-color: var(--text-faint);
    background: var(--surface-tint);
}

/* One card per row, stacked. Tiled in columns, each worker's vehicle list was
   squeezed into a third of the width while the eye had to zigzag to read the
   roster; down a single column the names line up and the vehicles get the
   width they need. */
.staff-monitor__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Who on the left, what they are holding on the right. The left column has a
   fixed width so the names line up down the page (the whole point of one
   column) and `minmax(0, 1fr)` on the right lets a long model name shrink
   instead of pushing the card wider than the page. */
.staff-monitor__card {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 10px 24px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.staff-monitor__card--idle {
    background: var(--surface-tint);
    border-style: dashed;
}

.staff-monitor__worker {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.staff-monitor__worker h2 {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.staff-monitor__worker p {
    margin: 0;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: var(--text-faint);
}

/* Under the code, not out at the card's right edge: in a wide row that edge is
   a long way from the name it counts for. */
.staff-monitor__count {
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
}

.staff-monitor__vehicles {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* No rule above the first one: it would run alongside the name rather than
   between two vehicles, and read as a divider that separates nothing. */
.staff-monitor__vehicle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.staff-monitor__vehicle + .staff-monitor__vehicle {
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.staff-monitor__model {
    font-size: 0.9rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* The request's code, so it can be looked up in the table afterwards. Pushed to
   the right so the status badges line up down the card's edge; grey because it
   is useful when needed, not before. */
.staff-monitor__code {
    margin-left: auto;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: var(--text-faint);
}

/* The same coloured badge as the table's pill, minus the pill behaviour:
   nothing opens here. The colour comes from [data-status], further up. */
.staff-monitor__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    border-radius: 0;
    background: var(--pill-bg, var(--surface-tint));
    color: var(--pill-fg, var(--text-dim));
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    /* A fixed width so the badges make a column of their own down the card,
       which is what lets the boss read the shop's stage at a glance instead of
       hunting for each one at the end of a ragged line. */
    width: 9.5rem;
}

.staff-monitor__idle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-faint);
}

/* What the boss wrote for this worker, on their own profile, above the notepad
   that is theirs. Tinted and ruled down one side so the two are not mistaken
   for each other: this one arrives from somebody else and cannot be edited. */
.staff-boss-note {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
}

.staff-boss-note__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
}

.staff-boss-note__title svg {
    width: 15px;
    height: 15px;
}

.staff-boss-note__text {
    margin: 0;
    font-size: 0.98rem;
    line-height: var(--lh-snug);
    color: var(--ink);
    /* The boss types line breaks and means them. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.staff-boss-note__date {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--text-faint);
}

/* The «…» on a monitor card, and the little menu it opens. Its own column in
   the card's grid rather than a corner overlay, so it can never sit on top of a
   status badge. */
.staff-monitor__menu {
    /* Placed rather than left to auto-placement: it comes last in the markup
       (the card is built top-down) and would otherwise land on a row of its own
       under the vehicles. */
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}

.staff-monitor__more {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-tint);
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out),
        color 0.15s var(--ease-out);
}

.staff-monitor__more svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.staff-monitor__more:hover {
    border-color: var(--text-faint);
    background: var(--surface);
    color: var(--ink);
}

/* On a dimmed card the tinted circle is the same colour as the card itself, so
   it borrows the card's own background to stay a circle and not a smudge. */
.staff-monitor__card--idle .staff-monitor__more {
    background: var(--surface);
}

.staff-monitor__card--idle .staff-monitor__more:hover {
    background: var(--surface-tint);
}

.staff-monitor__more:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* `fixed`, like the status menu, and placed by the same placeMenu(). */
.staff-cardmenu {
    position: fixed;
    z-index: 40;
    min-width: 160px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 26px rgba(27, 33, 48, 0.14);
}

.staff-cardmenu__option {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 0.88rem;
    text-align: left;
    cursor: pointer;
}

.staff-cardmenu__option:hover {
    background: var(--surface-tint);
}

.staff-cardmenu__option:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

/* The note across the foot of the card, spanning every column. */
.staff-monitor__note {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 2px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
    line-height: var(--lh-compact);
    color: var(--text-dim);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.staff-monitor__note-date {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--text-faint);
    white-space: nowrap;
}

/* Writing one, inside the card it belongs to. */
.staff-noteedit {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.staff-noteedit__title {
    display: block;
    margin-bottom: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-dim);
}

.staff-noteedit__input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
    line-height: var(--lh-snug);
    resize: vertical;
}

.staff-noteedit__input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}

.staff-noteedit__actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.staff-noteedit__save,
.staff-noteedit__cancel {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}

.staff-noteedit__save {
    border: 1px solid transparent;
    background: var(--brand);
    color: #fff;
}

.staff-noteedit__save:hover {
    background: var(--brand-dark);
}

.staff-noteedit__save:disabled {
    opacity: 0.6;
    cursor: default;
}

.staff-noteedit__cancel {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
}

.staff-noteedit__cancel:hover {
    background: var(--surface-tint);
}


/* -----------------------------------------------------------------------------
   Registering a walk-in vehicle

   One page, six answers above the fold, and an optional block underneath that
   can be skipped entirely. The fields reuse the site's own `.field` system, so
   this looks like the wizard the customers fill in rather than a second dialect
   of the same form.
   -------------------------------------------------------------------------- */

.staff-intake {
    max-width: 780px;
}

.staff-intake__head h1 {
    margin: 0;
}

.staff-intake__head p {
    margin: 6px 0 0;
    color: var(--text-dim);
}

.staff-intake__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 22px;
}

.staff-intake__card {
    padding: 22px 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.staff-intake__card .field-row + .field-row,
.staff-intake__card .field-row + .staff-intake__group {
    margin-top: 16px;
}

.staff-intake__group {
    margin: 16px 0 0;
    padding: 0;
    border: none;
}

.staff-intake__group legend {
    padding: 0;
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ink);
}

.staff-intake__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Buttons and not a `<select>`: there are four of one and three of the other,
   they never grow, and at a counter one tap beats open-scroll-pick. */
.staff-intake__choice {
    padding: 9px 16px;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out),
        color 0.15s var(--ease-out);
}

.staff-intake__choice:hover {
    border-color: var(--text-faint);
    background: var(--surface-tint);
}

.staff-intake__choice[aria-checked="true"] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
    font-weight: 600;
}

.staff-intake__choice:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* The walk-in form's quote, under the parts it prices: one row per finish,
   discount already taken off, the picked one inked like the finish buttons
   above. Built for reading a number out at the counter, so no subtotal, no
   hint and no small print; the customer's wizard has those. */
.intake-quote {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border-strong);
}

.intake-quote__finishes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.intake-quote__finish {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: var(--surface);
    color: var(--text-dim);
    font: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out),
        color 0.15s var(--ease-out);
}

.intake-quote__finish strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.intake-quote__finish:hover {
    border-color: var(--text-faint);
}

.intake-quote__finish[aria-pressed="true"] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.intake-quote__finish[aria-pressed="true"] strong {
    color: #fff;
}

.intake-quote__finish:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.intake-quote__discount {
    margin: 0;
    font-size: 0.78rem;
    color: var(--tier-standard-text);
}

/* The second card names what it is for, and says why it is asked at the
   counter rather than left for the table: the customer and the car are both
   standing there, which is the one moment any of it can be read off the
   vehicle instead of chased down a week later. */
.staff-intake__card-title {
    margin: 0 0 16px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.staff-intake__card-title span {
    display: block;
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-faint);
}

.staff-intake__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.staff-intake__submit,
.staff-intake__cancel {
    padding: 13px 26px;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.staff-intake__submit {
    border: 1px solid transparent;
    background: var(--brand);
    color: #fff;
}

.staff-intake__submit:hover {
    background: var(--brand-dark);
}

.staff-intake__submit:disabled {
    opacity: 0.6;
    cursor: default;
}

.staff-intake__cancel {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink);
}

.staff-intake__cancel:hover {
    background: var(--surface-tint);
}

/* The 3D part picker inside the walk-in form. The viewer and its layout are
   the wizard's (.car-view-3d, further up); these are the few things the panel
   sees differently: surfaces that sit on the panel's card rather than the
   site's, and camera tabs that match the panel's chips. */
.staff-intake__parts {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.staff-intake__parts-title {
    margin: 0 0 14px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
}

.staff-intake__parts-title span {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    color: var(--text-faint);
}

.staff .car-view-3d__canvas-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(165deg, #e6e8ec, #fafbfc 70%);
}

/* The loading label and its bar sit on the light platen. */
.staff .car-view-3d__loading-label {
    color: var(--text-dim);
}

.staff .car-view-3d__progress-track {
    background: rgba(27, 33, 48, 0.16);
}

.staff .car-view-3d__summary {
    background: var(--surface-tint);
}

.staff .car-view-3d__list-item {
    background: var(--surface);
    border: 1px solid var(--border);
}

.staff .view-tab {
    padding: 7px 13px;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: var(--surface);
    font-size: 0.82rem;
}

.staff .view-tab:hover {
    border-color: var(--text-faint);
    background: var(--surface-tint);
}

.staff .view-tab.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.staff .car-view-3d__progress-bar {
    background: var(--brand);
}

/* What is left on screen after saving. The code is read out loud to somebody
   standing at the counter, so it is set large, spaced, and alone. */
.staff-intake__done {
    margin-top: 22px;
    padding: 32px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    text-align: center;
}

.staff-intake__done-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
}

.staff-intake__done-name {
    margin: 10px 0 0;
    font-size: 1.15rem;
    color: var(--ink);
}

.staff-intake__done-code {
    margin: 14px 0 0;
    font-family: var(--font-label);
    font-variant-numeric: tabular-nums;
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--ink);
    /* Read off the screen digit by digit, so it has to survive a phone line. */
    overflow-wrap: anywhere;
}

.staff-intake__done-hint {
    margin: 10px 0 24px;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.staff-intake__done .staff-intake__actions {
    justify-content: center;
}


/* The photo goes above the name as soon as the two-column row no longer fits
   without squeezing the text. */
@media (max-width: 700px) {
    .staff-profile__top {
        flex-direction: column;
        /* In a column, stretching would be sideways: the photo would take the
           whole screen. It goes back to a width of its own. */
        align-items: flex-start;
        gap: 22px;
    }

    .staff-profile__photo {
        width: 160px;
    }

    .staff-profile__actions {
        grid-template-columns: 1fr;
    }

    /* Narrow, the columns of a card stop being columns: the name sits above
       the vehicles instead of beside them, and the «…» goes with the name
       rather than dropping to a line of its own at the bottom. */
    .staff-monitor__card {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .staff-monitor__vehicles,
    .staff-monitor__idle {
        grid-column: 1 / -1;
    }

    .staff-monitor__menu {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    /* Nothing in this row shrinks (the lockup has a fixed height, the clock
       and the button are single words that do not break), so below about
       510px the bar ran wider than the screen. That widened the page itself,
       and with it the containing block of every fixed layer on it: the status
       menu and the parts viewer were laid out at the width of the OVERFLOW,
       with their left edge off screen. Wrapping is what makes that impossible
       whatever the button ends up saying («Salir», «Terminar sesión»,
       «Volver al perfil»), instead of a width that happens to fit today. */
    .staff-topbar {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* The lockup already says Autocolor. The rule and the «Taller» label are
       there to keep it company across a wide bar, and on a phone that company
       is exactly what pushes the button onto a second row. */
    .staff-topbar__rule,
    .staff-topbar__label {
        display: none;
    }

    .staff-topbar__clock {
        font-size: 0.85rem;
    }

    /* On the row it shares with the clock this only splits the free space
       between the two; on the second row, where it lands on the narrowest
       screens, it keeps the button against the right edge instead of under
       the logo. */
    .staff-topbar__logout {
        margin-left: auto;
    }

    .staff-page {
        padding: 20px 16px 40px;
    }

    .staff-search {
        max-width: none;
    }
}