/* OmniHMI, the application. Built on the platform's tokens (design.css,
   the Archetype 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);
}

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: var(--space-4); height: var(--space-2); border: 2px solid var(--action); border-radius: var(--radius-sm); }
.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, .workspace + .cockpit, .facts + .workspace { 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; }

/* Screen profiles: the shape is the screen's real aspect ratio */
.profiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.profile { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); cursor: pointer; background: var(--surface); color: var(--text); }
.profile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.profile:has(input:checked) { border-color: var(--action); background: var(--action-quiet); color: var(--text); }
.profile:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.profile-name { font-weight: var(--font-weight-medium); }
.screen-shape { display: block; width: 100%; max-width: 12rem; border: 2px solid var(--action); border-radius: var(--radius-sm); aspect-ratio: 16 / 9; }
.screen-shape--cluster_21_9 { aspect-ratio: 3840 / 1646; }
.screen-shape--console_16_9 { aspect-ratio: 16 / 9; }
.screen-shape--display_16_10 { aspect-ratio: 16 / 10; }
.screen-shape--cluster_32_9 { aspect-ratio: 32 / 9; }
.screen-shape--custom { aspect-ratio: 8 / 3; border-style: dashed; }
.custom-size[hidden] { display: none; }

/* Project cards */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 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); }

/* Results */
.preview { display: block; width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--hairline); }
.findings .row span:first-child { flex: 1 1 16rem; }
.panel h3 { margin: 0; font-size: var(--font-size-md); }

/* 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); }

/* The cockpit */
.cockpit { margin-top: var(--space-5); }
.cockpit-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.cockpit-bar h2 { margin: 0 var(--space-3) 0 0; font-size: var(--font-size-lg); }
.segmented { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.seg {
  min-height: 44px; padding: var(--space-1) var(--space-3);
  font: inherit; font-size: var(--font-size-sm);
  color: var(--text-muted); background: transparent;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard), transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.seg[aria-pressed="true"] { color: var(--text-inverse); background: var(--action); }
.seg:active { transform: translateY(1px); }
.seg[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (hover: hover) {
  .seg:hover { color: var(--text); background: var(--action-quiet); transform: translateY(-1px); }
  .seg[aria-pressed="true"]:hover { color: var(--text-inverse); background: var(--action-hover); transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .seg:hover, .seg[aria-pressed="true"]:hover { transform: none; }
}
.viewport { position: relative; aspect-ratio: 16 / 9; max-height: 72vh; width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-sunken); }
.viewport canvas { display: block; width: 100%; height: 100%; }
.viewport canvas[hidden] { display: none; }
.flat { background: var(--surface-sunken); }
.viewport canvas:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.flat { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-4); }
.flat canvas { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.flat[hidden] { display: none; }
.hud { position: absolute; left: var(--space-3); bottom: var(--space-3); margin: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-muted); font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: 0.08em; }
.fallback { position: absolute; inset: auto var(--space-3) var(--space-3) auto; margin: 0; max-width: 24rem; padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); }
.cockpit-note { margin-top: var(--space-2); font-size: var(--font-size-sm); }
.viewport:fullscreen { max-height: none; border-radius: 0; }

@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; } }

/* A customer's own cabin (AF-18) */
.check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--font-size-sm); }
.seg--solo { margin-left: var(--space-2); }