/* Clayproof, the application. Built on the platform's tokens (design.css,
   the clay overlay below); beyond the overlay nothing here names a colour, a
   size or a duration of its own. The dark-room direction: house lights down, hairlines of light
   rather than borders, colour only where it means something. */

:root {
  /* AW-104: the scale forms are held to. A label to its own field; between
     pairs; before the submit. */
  --arcwright-spacing-scale: pair 0.375rem, between 1.25rem, submit 2rem;
  --pair: 0.375rem;
  --between: 1.25rem;
  --submit: 2rem;
  --hairline: color-mix(in srgb, var(--action) 18%, transparent);
}

/* The clay overlay wins over the platform's dark theme (same selector, loaded after). */
:root, :root[data-theme="dark"] {
  /* The clay overlay (docs/ARCHITECTURE.md §6): clay on graphite, bone for text, the zebra accent. */
  --action: #d4855a;
  --action-hover: #e8dccb;
  --action-quiet: color-mix(in srgb, #d4855a 14%, transparent);
  --accent: #d4855a;
  --surface: #1c1f25;
  --surface-raised: #23272e;
  --surface-sunken: #14161a;
  --text: #efe9e1;
  --text-muted: #b3aca2;
  --zebra: #e8dccb;
}

body.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--surface-sunken); }
body.app main { flex: 1; width: 100%; padding-block: var(--space-6) var(--space-8); }

/* Masthead */
.masthead {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; font-weight: var(--font-weight-medium); letter-spacing: 0.02em; }
.brand-mark { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--zebra) 0 18%, transparent 19%), conic-gradient(from 200deg, #b8653a, var(--action) 40%, #b8653a 75%, var(--action)); }
.brand-family { margin-left: var(--space-2); color: var(--text-muted); font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); letter-spacing: 0.04em; }
.skip-link { position: absolute; left: -999px; top: var(--space-2); background: var(--action); color: #1a0f08; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); z-index: 10; }
.skip-link:focus { left: var(--space-3); }
.topnav { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.topnav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3); color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); }
.topnav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--action); }
@media (hover: hover) { .topnav a:hover { color: var(--text); } }
.who { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.who form { margin: 0; }
.chip { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-full); font-size: var(--font-size-sm); color: var(--text-muted); }
.notice { margin: 0; padding: var(--space-3) var(--space-5); background: var(--action-quiet); color: var(--text); }
.foot { padding: var(--space-5); border-top: 1px solid var(--hairline); color: var(--text-muted); font-size: var(--font-size-sm); }
.foot p { margin: 0; }

a.button { text-decoration: none; }
a.button:active { transform: translateY(1px); }

/* Type helpers */
.eyebrow { margin: 0; font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--action); }
.eyebrow a { color: inherit; }
.hint { margin: 0; font-size: var(--font-size-sm); color: var(--text-muted); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.page-head h1 { margin: var(--space-3) 0 0; }
.meter { margin-top: calc(-1 * var(--space-3)); }

/* Panels. The stack rhythm is restated here at panel specificity: element
   rules below set margin: 0 and would otherwise win, leaving headings flush
   against what follows (Philip, 6 Oct). One rule, every panel. */
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-5); }
.panel.stack > * + * { margin-top: var(--space-4); }
.panel.stack > h2 + * { margin-top: var(--space-4); }
.panel.stack > .hint { margin-top: var(--space-4); }
.panel + .panel, .facts + .workspace, .workspace + .panel { margin-top: var(--space-5); }
.panel--narrow { max-width: 34rem; margin-inline: auto; margin-top: var(--space-7); }
.panel h2 { margin: 0; font-size: var(--font-size-lg); }
.workspace { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.workspace > .panel + .panel { margin-top: 0; }
@media (max-width: 60rem) { .workspace { grid-template-columns: minmax(0, 1fr); } }

/* Forms: the declared scale. One control height everywhere (44px, the touch
   minimum), so inputs, selects and buttons line up on a row without guesswork;
   the select is drawn by us, not the platform, so it is the same height as an
   input on every browser (Philip, 6 Oct: "uniform and correctly spaced"). */
.form { display: flex; flex-direction: column; gap: var(--between); }
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, .button, button.seg, .preset { min-height: 44px; }
select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--space-3) + 1.5rem); background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - var(--space-3) - 5px) 50%, calc(100% - var(--space-3)) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.form--row .pair { justify-content: flex-end; }
.form--row .actions .button { width: 100%; }
@media (min-width: 40rem) { .form--row .actions { flex: 0 0 auto; } .form--row .actions .button { width: auto; min-width: 8rem; } }
.pair { display: flex; flex-direction: column; gap: var(--pair); min-width: 0; }
.form .actions, .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-top: calc(var(--submit) - var(--between)); }
.form--row { display: grid; gap: var(--between); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); align-items: end; }
.form--row .actions { margin-top: 0; }
.check { display: flex; gap: var(--space-3); align-items: flex-start; }
.check input { margin-top: var(--space-1); width: 1.25rem; min-height: 1.25rem; flex: none; }
textarea { resize: vertical; min-height: 8rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: var(--font-weight-medium); margin-bottom: var(--pair); padding: 0; }
.inline { display: inline; margin: 0; }

/* Project cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.project-card { padding: 0; background: var(--surface); border-color: var(--hairline); }
.card-link { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); color: var(--text); text-decoration: none; min-height: 100%; }
.card-title { font-weight: var(--font-weight-medium); font-size: var(--font-size-md); }
@media (hover: hover) { .card-link:hover .card-title { color: var(--action); } }

/* Facts and lists */
.facts { display: grid; gap: var(--space-3) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }
.facts div { min-width: 0; }
.facts dt { font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.facts dd { margin: var(--space-1) 0 0; }
.facts--tight { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.plain { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.row:last-child { border-bottom: 0; }
.row-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.row-actions select { width: auto; min-width: 9rem; }
.row-actions form { display: inline-flex; gap: var(--space-2); align-items: center; }
table td.row-actions { padding-block: var(--space-2); }
table th, table td { vertical-align: middle; }
.brief { margin: 0; padding: var(--space-3) var(--space-4); border-left: 2px solid var(--action); white-space: pre-wrap; color: var(--text); }

/* The operator inbox: mail is text, never HTML */
.inbox-row a { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 20rem; min-width: 0; color: var(--text); text-decoration: none; min-height: 44px; justify-content: center; }
.inbox-from { color: var(--text-muted); font-size: var(--font-size-sm); }
.inbox-subject { overflow-wrap: anywhere; }
.inbox-row--unread .inbox-subject { font-weight: var(--font-weight-medium); }
.inbox-row--unread .inbox-from::before { content: "● "; color: var(--action); }
@media (hover: hover) { .inbox-row a:hover .inbox-subject { color: var(--action); } }
.mail-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--font-size-base); line-height: var(--font-leading-normal); }

/* Stages: every one is a record, so nothing here animates */
.stages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.stage { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-muted); border: 1px solid transparent; }
.stage--done { color: var(--text); }
.stage--done .stage-name::before { content: "✓ "; color: var(--action); }
.stage--current { color: var(--text); border-color: var(--action); }
.stage--current .stage-name::before { content: "● "; color: var(--action); }
.stage time { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--text-muted); }

@media (max-width: 40rem) {
  /* A phone: brand and sign-out on one row, the navigation as one scrolling row beneath, the organisation chip only on the Organisation page. */
  .masthead { padding: var(--space-2) var(--space-4); gap: var(--space-2) var(--space-3); }
  .masthead .brand { flex: 1 1 auto; }
  .masthead .who { margin-left: 0; order: 2; gap: var(--space-2); }
  .masthead .who .chip { display: none; }
  .masthead .who .button { min-height: 36px; padding-inline: var(--space-3); font-size: var(--font-size-sm); }
  .masthead .topnav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); padding-inline: var(--space-4); }
  .masthead .topnav::-webkit-scrollbar { display: none; }
  .masthead .topnav a { min-height: 40px; white-space: nowrap; }
  .panel { padding: var(--space-4); }
}

/* Iterations (D-033) */
.versions { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.versions a { display: inline-block; min-width: 2.75rem; text-align: center; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hairline); text-decoration: none; }
.versions a[aria-current="page"] { background: var(--action); color: var(--surface); border-color: var(--action); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.compare figure { margin: 0; display: grid; gap: var(--space-1); }
.compare img { width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--hairline); }
.compare figcaption { font-size: var(--font-size-sm); color: var(--text-muted); }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }


/* Vehicle cards: the latest view, else a ghost in the vehicle's own proportions */
.card-view { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--surface-sunken); }
.card-view--empty { display: grid; place-items: center; }
.card-ghost { display: block; width: 55%; aspect-ratio: 4 / 1.4; border: 2px solid var(--action); border-radius: 40% 40% 12% 12% / 70% 70% 14% 14%; opacity: 0.6; }
.card-dims { padding: 0 var(--space-5) var(--space-4); }
.project-card .card-link { padding: 0; }
.project-card .card-title, .project-card .text-muted { padding-inline: var(--space-5); }
.project-card .card-title { padding-top: var(--space-4); }
.empty { padding: var(--space-6); text-align: center; color: var(--text-muted); border: 1px dashed var(--hairline); border-radius: var(--radius-lg); }
.lede-app { font-size: var(--font-size-md); color: var(--text-muted); max-width: 42rem; }

/* The datum form */
.datum-form .datum-fields { display: grid; gap: var(--between); grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); align-items: start; }
.datum-form .pair--wide { grid-column: 1 / -1; }
.unit { color: var(--text-muted); font-size: var(--font-size-sm); margin-left: var(--space-1); }
.presets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.preset { min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-full); background: transparent; color: var(--text); cursor: pointer; font: inherit; }
.preset[aria-pressed="true"] { border-color: var(--action); background: var(--action-quiet); }
@media (hover: hover) { .preset:hover { border-color: var(--action); } }
.derived { padding: var(--space-3) var(--space-4); border-left: 2px solid var(--action); }
.problems { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--danger, #c0392b); border-radius: var(--radius-md); }
.problem-list { margin: var(--space-2) 0 0; padding-left: var(--space-4); display: grid; gap: var(--space-1); }
.field-error { color: var(--danger, #e06c5b); font-size: var(--font-size-sm); }

/* The datum diagram: side and plan, drawn from the numbers; labels are text beside it */
.datum-diagram { display: grid; gap: var(--space-4); }
.datum-svg { display: block; width: 100%; height: auto; max-height: 300px; background: var(--surface-sunken); border-radius: var(--radius-md); border: 1px solid var(--hairline); }
.dg-body { fill: color-mix(in srgb, var(--action) 16%, transparent); stroke: var(--action); stroke-width: 1.5; }
.dg-cabin { fill: color-mix(in srgb, var(--zebra) 10%, transparent); stroke: var(--zebra); stroke-width: 1; stroke-dasharray: 4 3; }
.dg-wheel { fill: var(--surface); stroke: var(--text); stroke-width: 1.5; }
.dg-hub { fill: var(--text); }
.dg-ground { stroke: var(--text-muted); stroke-width: 1; }
.dg-centre { stroke: var(--text-muted); stroke-width: 0.75; stroke-dasharray: 2 4; }
.dg-dim { stroke: var(--text-muted); stroke-width: 0.75; }

/* The direction: three tones as ranges with words at each end */
.tone { display: grid; gap: var(--space-1); }
.tone-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); }
.tone-end { font-size: var(--font-size-sm); color: var(--text-muted); white-space: nowrap; }
.tone input[type="range"] { width: 100%; accent-color: var(--action); min-height: 44px; }
.tone-out { font-size: var(--font-size-sm); color: var(--text); }
.form--row-3 { display: grid; gap: var(--between); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }

/* The studio */
.workspace--studio { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 60rem) { .workspace--studio { grid-template-columns: minmax(0, 1fr); } }
.versions { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; gap: var(--space-2); flex-wrap: wrap; }
.versions a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-full); color: var(--text-muted); text-decoration: none; }
.versions a[aria-current="page"] { border-color: var(--action); color: var(--text); background: var(--action-quiet); }
.views { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .views { grid-template-columns: 1fr 1fr; } .views .view:first-child { grid-column: 1 / -1; } }
.view { margin: 0; display: grid; gap: var(--space-2); }
.view img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface-sunken); }
.view figcaption { font-size: var(--font-size-sm); color: var(--text-muted); }
.view-wait { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); border: 1px dashed var(--hairline); background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--zebra) 6%, transparent) 14px 16px); }
.viewer { margin-top: var(--space-5); }
.viewer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-3); }
.viewer-bar h2 { margin-right: auto; }
.segmented { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--radius-full); overflow: hidden; }
.seg { min-height: 44px; padding: var(--space-2) var(--space-4); background: transparent; border: 0; color: var(--text-muted); font: inherit; cursor: pointer; }
.seg + .seg { border-left: 1px solid var(--hairline); }
.seg[aria-pressed="true"] { background: var(--action-quiet); color: var(--text); }
.seg:disabled { opacity: 0.4; cursor: default; }
.segmented--radio .seg-radio { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); }
.segmented--radio .seg-radio + .seg-radio { border-left: 1px solid var(--hairline); }
.section-ctl { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.section-ctl input[type="range"] { width: 12rem; accent-color: var(--action); min-height: 44px; }
.viewport { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; border-radius: var(--radius-lg); overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #2a2e36 0%, var(--surface-sunken) 70%); border: 1px solid var(--hairline); touch-action: none; }
.viewport canvas { display: block; width: 100%; height: 100%; }
.viewport--empty { display: grid; place-items: center; aspect-ratio: 16 / 7; }
.viewer-note { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); color: var(--text-muted); background: linear-gradient(transparent, color-mix(in srgb, var(--surface-sunken) 85%, transparent)); }
.viewport--empty .viewer-note { position: static; background: none; }
.viewer-note[hidden], .fallback[hidden] { display: none; }
.measure { width: 100%; border-collapse: collapse; }
.measure th, .measure td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.measure th[data-figure], .measure td[data-figure] { text-align: right; padding-right: 0; padding-left: var(--space-3); white-space: nowrap; }
.measure tbody th { color: var(--text); }
.measure th { color: var(--text-muted); font-weight: var(--font-weight-regular); }
.measure td[data-figure] { font-variant-numeric: tabular-nums; }
.feas .row { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; align-items: start; gap: var(--space-4); padding-block: var(--space-3); }
.feas .feas-detail { min-width: 0; }
.feas .status { justify-self: end; justify-content: center; min-width: 6.5rem; }
@media (max-width: 30rem) { .feas .row { grid-template-columns: minmax(0, 1fr); } .feas .status { justify-self: start; } }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.swatch { display: grid; gap: var(--space-1); }
.swatch-chip { display: block; aspect-ratio: 3 / 2; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: var(--surface-sunken); }
.swatch-name { font-weight: var(--font-weight-medium); }
.swatch-meta { font-size: var(--font-size-sm); }
.swatches + p, .swatches + .hint { margin-top: var(--space-5); }
.status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--font-size-sm); border: 1px solid var(--hairline); color: var(--text-muted); }
.status--positive { color: var(--colour-positive-500, #6fcf97); border-color: currentColor; }
.status--caution { color: var(--colour-caution-500, #e9b44c); border-color: currentColor; }
.status--critical { color: var(--colour-critical-500, #ef7b6d); border-color: currentColor; }
p.status { display: flex; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.meter-bar { height: 0.5rem; border-radius: var(--radius-full); background: var(--surface-sunken); overflow: hidden; border: 1px solid var(--hairline); }
.meter-fill { display: block; height: 100%; background: var(--action); width: var(--pct, 0%); }
.pct { font-variant-numeric: tabular-nums; }
.tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.tile { padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); display: grid; gap: var(--space-1); }
.tile-label { font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.tile-value { font-size: var(--font-size-xl); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.tile-sub { font-size: var(--font-size-sm); color: var(--text-muted); }
.optable { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.optable th, .optable td { text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.table-wrap { overflow-x: auto; }
.opnav { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-bottom: var(--space-4); }
.opnav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3); color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); }
.opnav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--action); }
.mail-bar, .mail-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-check { display: inline-flex; align-items: center; gap: var(--space-2); }
.danger { color: var(--colour-critical-500, #ef7b6d); }
.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; }
.count { font-variant-numeric: tabular-nums; color: var(--text-muted); }


/* Paint: colour and finish applied to the form (Philip, 6 Oct 2026) */
.paint { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: var(--between); }
.paint h3 { margin: 0; font-size: var(--font-size-md); }
.paint .label { display: block; margin-bottom: var(--space-1); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.paint-grid { display: grid; gap: var(--between); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; }
.paint-grid .pair--finish { grid-column: 1 / -1; }
/* Finish: five equal pills, each carrying a small rendering of the finish it names. */
.finishes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
@media (max-width: 40rem) { .finishes { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); } }
.finish { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--hairline); border-radius: var(--radius-full); color: var(--text-muted); cursor: pointer; transition: border-color var(--motion-duration-fast) var(--motion-easing-standard), background var(--motion-duration-fast) var(--motion-easing-standard); user-select: none; }
.finish:has(input:checked) { border-color: var(--action); background: var(--action-quiet); color: var(--text); }
.finish:has(input:focus-visible) { outline: 2px solid var(--focus-ring, var(--action)); outline-offset: 2px; }
@media (hover: hover) { .finish:hover { border-color: var(--text-muted); } }
.finish-chip { width: 1.25rem; height: 1.25rem; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35); }
.finish--gloss .finish-chip { background: radial-gradient(circle at 32% 28%, #ffffff 0 14%, rgba(255,255,255,0.25) 22%, transparent 34%), linear-gradient(160deg, #9aa3ad, #3c434c); }
.finish--satin .finish-chip { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), transparent 45%), linear-gradient(160deg, #8a9199, #464c54); }
.finish--matt .finish-chip { background: linear-gradient(160deg, #7a8088, #5a6067); }
.finish--metallic .finish-chip { background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.8) 0 8%, transparent 20%), repeating-radial-gradient(circle at 60% 60%, rgba(255,255,255,0.18) 0 1px, transparent 1px 3px), linear-gradient(160deg, #aab2bb, #3f464e); }
.finish--pearl .finish-chip { background: radial-gradient(circle at 30% 28%, #ffffff 0 10%, transparent 24%), linear-gradient(135deg, #e8dcf0 0%, #b9c9e6 35%, #d9c6cf 70%, #c9dcd6 100%); }
/* Generated views: no drag-to-desktop and no context menu. A screenshot cannot be prevented by any page; this is a courtesy, not a defence. */
.view img[data-guard], .lightbox img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }
.paint-grid--two-tone { grid-template-columns: minmax(12rem, 1.4fr) minmax(8rem, 1fr) minmax(12rem, 1.4fr); }
@media (max-width: 48rem) { .paint-grid--two-tone { grid-template-columns: 1fr; } }
.paint input[type="color"] { width: 100%; min-height: 44px; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.paint input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.paint input[type="color"]::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-md) - 3px); }
.paint .pair--range input[type="range"] { width: 100%; accent-color: var(--action); min-height: 44px; }
.paint .check { align-items: center; min-height: 44px; }
.paint .actions { align-items: center; }
.paint [data-paint-saved] { margin: 0; }
.swatch-chip--inline { display: inline-block; width: 1.1em; height: 1.1em; aspect-ratio: auto; vertical-align: -0.15em; margin-right: var(--space-1); }
.chosen { margin: 0; }

/* The view lightbox (CL-23): the car alone, centred, on a quiet ground. */
.view-open { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); }
.view-open:focus-visible { outline: 2px solid var(--focus-ring, var(--action)); outline-offset: 3px; }
.view-open img { transition: transform var(--motion-duration-fast) var(--motion-easing-standard); }
@media (hover: hover) { .view-open:hover img { transform: translateY(-2px); } }
body.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(12, 13, 15, 0); transition: background 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.lightbox--in { background: rgba(12, 13, 15, 0.94); }
.lightbox-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: radial-gradient(60% 70% at 50% 100%, rgba(232, 220, 203, 0.10) 0%, rgba(232, 220, 203, 0.03) 45%, transparent 75%); opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.lightbox--in .lightbox-ground { opacity: 1; }
.lightbox-stage { position: absolute; margin: 0; display: grid; place-items: center; border-radius: var(--radius-lg); overflow: visible; }
.lightbox-stage img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-md); transition: opacity 400ms ease, transform 180ms ease-out, filter 700ms ease; will-change: transform; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55)); }
.lightbox:not(.lightbox--cutout) .lightbox-stage img { border: 1px solid var(--hairline); }
.lightbox--cutout .lightbox-stage img { border-radius: 0; }
.lightbox-caption { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--space-6)); text-align: center; font-size: var(--font-size-sm); color: var(--text-muted); opacity: 0; transition: opacity 600ms ease 300ms; }
.lightbox--in .lightbox-caption { opacity: 1; }
.lightbox-bar { position: absolute; left: 0; right: 0; bottom: max(var(--space-5), env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); opacity: 0; transition: opacity 600ms ease 400ms; }
.lightbox--in .lightbox-bar { opacity: 1; }
.lightbox-hint { text-align: center; }
.lightbox-close { position: absolute; top: max(var(--space-4), env(safe-area-inset-top)); right: var(--space-4); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(28, 31, 37, 0.8); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 500ms ease 500ms, border-color var(--motion-duration-fast); }
.lightbox--in .lightbox-close { opacity: 1; }
@media (hover: hover) { .lightbox-close:hover { border-color: var(--text-muted); } }
.viewport--lightbox { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; background: transparent; border: 0; }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox-ground, .lightbox-stage img, .lightbox-caption, .lightbox-bar, .lightbox-close { transition: none; } }

/* Reference images (CL-24) */
.refs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
.ref { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--hairline); }
.ref img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ref-remove { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(20, 22, 26, 0.85); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; }
.ref--add { border-style: dashed; }
.ref-add { display: grid; place-items: center; width: 100%; height: 100%; color: var(--text-muted); cursor: pointer; font-size: var(--font-size-sm); }
.ref-add:has(input:focus-visible) { outline: 2px solid var(--focus-ring, var(--action)); outline-offset: 2px; }
@media (hover: hover) { .ref-add:hover { color: var(--text); } .ref--add:hover { border-color: var(--text-muted); } }

/* Downloads: the two packs (D-019). One list, each pack a quiet card with its name and price on one line. */
.packs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3, 16px); }
@media (min-width: 880px) { .packs { grid-template-columns: 1fr 1fr; } }
.pack { border: 1px solid var(--line, #e6e0d8); border-radius: var(--r-2, 12px); padding: var(--s-3, 16px) var(--s-4, 20px); display: flex; flex-direction: column; gap: var(--s-2, 10px); background: var(--panel-2, rgba(255,255,255,0.02)); }
.pack-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3, 16px); }
.pack-name { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.pack-price { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.pack-price .text-muted { font-weight: 400; font-size: 0.8125rem; }
.pack-what { margin: 0; color: var(--ink-2, inherit); }
.pack .actions { margin-top: auto; }
.pack form.inline { display: inline; margin: 0; }

/* The inside (CL-28): the body held as a ghost while the interior is designed. */
.view--ghost img { opacity: 0.38; filter: saturate(0.6); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.view--ghost:hover img { opacity: 0.9; }
/* The screens studio (CL-32): the cluster is 21:9 and spans the row; the console is 16:9 and sits on its own. */
.views--screens .view--wide img { aspect-ratio: 21 / 9; }
@media (min-width: 48rem) { .views--screens .view:not(:first-child) { grid-column: 1 / span 1; } }