/* 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-1) 0 0; }
.meter { margin-top: calc(-1 * var(--space-3)); }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-5); }
.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 */
.form { display: flex; flex-direction: column; gap: var(--between); }
.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; }
.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) {
  .masthead { padding-inline: var(--space-4); }
  .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 { color: var(--text-muted); font-weight: var(--font-weight-regular); }
.measure td[data-figure] { font-variant-numeric: tabular-nums; }
.feas .feas-detail { flex: 1 1 16rem; }
.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); }
.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); }