/*
  Shared foundation — global reset, identity bar / trust-line shell,
  and reusable form controls common to every screen in this series.
  Screen-specific layout lives in its own stylesheet.
*/

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

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--colour-base);
  color: var(--colour-text);
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

::selection { background: var(--colour-accent-low); color: var(--colour-text); }

/* ---------- Identity bar (VISUAL_DNA §2.8: opened and closed the same way) ---------- */

.identity-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--colour-hairline);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
}

.identity-bar__mark { color: var(--colour-text-muted); }

/* ---------- Global navigation (Experience Prototype Sprint 7) ----------
   A small, quiet row beneath the identity bar, present on every screen,
   so Home is reachable in one action from anywhere — the platform's
   navigation philosophy (a small set of primary destinations, no menu
   structure) made literal. Equal-weight links, no active-state marker,
   no accent — this is wayfinding, not a priority signal. */

.global-nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--colour-hairline);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.global-nav a {
  color: var(--colour-text-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.global-nav a:hover { color: var(--colour-text-muted); border-bottom-color: var(--colour-hairline-strong); }

/* ---------- Trust-line footer ---------- */

.trust-line {
  border-top: 1px solid var(--colour-hairline);
  padding: var(--space-6);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  color: var(--colour-text-faint);
}

/* ---------- Layout primitives ---------- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.measure {
  max-width: var(--content-max);
}

.hairline-divider {
  border: none;
  border-top: 1px solid var(--colour-hairline);
  margin: var(--space-6) 0;
}

.region-label {
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  display: block;
  margin-bottom: var(--space-2);
}

/* A labelled section of a page — shared across every screen in this
   series, not specific to Screen 01. Moved here from screen-01.css
   (Experience Prototype Sprint 2) without changing its rules. */

.region {
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--colour-hairline);
}
.region:first-child { padding-top: 0; }
.region:last-child { border-bottom: none; }

.region__question {
  font-family: var(--font-serif);
  font-size: var(--size-h2);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.region__hint {
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-faint);
  margin-top: var(--space-2);
}

/* ---------- Buttons ---------- */

.btn {
  appearance: none;
  border: 1px solid var(--colour-hairline-strong);
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--duration-quick) ease, color var(--duration-quick) ease;
}

.btn:hover { border-color: var(--colour-accent-low-border); color: var(--colour-accent-strong); }
.btn:focus-visible { outline: 1px solid var(--colour-accent); outline-offset: 3px; }

.btn--commit {
  background: var(--colour-accent);
  border-color: var(--colour-accent);
  color: var(--colour-accent-ink);
  font-weight: 600;
  padding: var(--space-4) var(--space-7);
}

.btn--commit:hover { background: var(--colour-accent-strong); border-color: var(--colour-accent-strong); color: var(--colour-accent-ink); }

.btn--commit:disabled {
  background: transparent;
  border-color: var(--colour-hairline);
  color: var(--colour-text-faint);
  cursor: not-allowed;
}

.text-link {
  font-family: var(--font-serif);
  color: var(--colour-text);
  text-decoration: none;
  border-bottom: 1px solid var(--colour-hairline-strong);
  padding-bottom: 1px;
  transition: border-color var(--duration-quick) ease, color var(--duration-quick) ease;
}
.text-link:hover { color: var(--colour-accent-strong); border-color: var(--colour-accent-low-border); }

/* ---------- Choice chips (sector, ownership, preferences, cadence) ---------- */

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.chip {
  appearance: none;
  border: 1px solid var(--colour-hairline-strong);
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-quick) ease, background var(--duration-quick) ease;
}

.chip:hover { border-color: var(--colour-accent-low-border); }
.chip:focus-visible { outline: 1px solid var(--colour-accent); outline-offset: 2px; }

.chip[aria-pressed="true"] {
  border-color: var(--colour-accent-low-border);
  background: var(--colour-accent-low);
  color: var(--colour-accent-strong);
}

.chip--disabled,
.chip[disabled] {
  color: var(--colour-text-faint);
  border-style: dashed;
  cursor: default;
  opacity: 0.6;
}
.chip--disabled:hover, .chip[disabled]:hover { border-color: var(--colour-hairline-strong); }

.chip__soon {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  margin-left: var(--space-2);
}

/* ---------- Range controls ---------- */

.range-field { margin-bottom: var(--space-5); }

.range-field__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.range-field__question {
  font-family: var(--font-serif);
  font-size: var(--size-body);
}

.range-field__value {
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--colour-text-muted);
  white-space: nowrap;
}

.range-track {
  position: relative;
  height: 1px;
  background: var(--colour-hairline-strong);
  margin: var(--space-5) var(--space-1) var(--space-2);
}

.range-track input[type="range"] {
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.range-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.range-track input[type="range"]::-moz-range-track { background: transparent; border: none; }

.range-track input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  pointer-events: all;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--colour-base);
  border: 1.5px solid var(--colour-accent);
  cursor: pointer;
  margin-top: 0;
}

.range-track input[type="range"]::-moz-range-thumb {
  pointer-events: all;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--colour-base);
  border: 1.5px solid var(--colour-accent);
  cursor: pointer;
}

.range-field__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--colour-text-faint);
}

/* ---------- Toggle (binary governance questions) ---------- */

.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--colour-hairline);
}
.toggle-row:last-child { border-bottom: none; }

.toggle-row__question {
  flex: 1;
  font-family: var(--font-serif);
}

.toggle {
  appearance: none;
  position: relative;
  width: 34px;
  height: 18px;
  flex: none;
  border: 1px solid var(--colour-hairline-strong);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  margin-top: 3px;
}

.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--colour-text-faint);
  transition: transform var(--duration-quick) ease, background var(--duration-quick) ease;
}

.toggle[aria-pressed="true"] {
  border-color: var(--colour-accent-low-border);
}
.toggle[aria-pressed="true"]::after {
  transform: translateX(15px);
  background: var(--colour-accent);
}

/* ---------- Utility ---------- */

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

/* Restrained disclosure panel — the shared device for "this destination
   is not built in the prototype yet," reused wherever a pathway points
   to a screen outside the current sprint's scope. Generalised from
   Screen 01's original confirmation-state note (Experience Prototype
   Sprint 2) without changing how it already looks or behaves there. */

.disclosure {
  margin-top: var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--size-small);
  color: var(--colour-text-faint);
  border: 1px dashed var(--colour-hairline-strong);
  padding: var(--space-4);
  display: none;
  line-height: var(--leading-normal);
}
.disclosure.visible { display: block; }

/* A quiet route back to a screen the customer arrived from — present
   before any other content, so context is never lost on arrival,
   including a direct URL arrival with no prior navigation. Shared from
   Screen 02 onward (Experience Prototype Sprint 4) since more than one
   screen now needs it. */
.back-route {
  display: inline-block;
  margin-bottom: var(--space-7);
  font-family: var(--font-mono);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--colour-text-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.back-route:hover { color: var(--colour-text-muted); border-bottom-color: var(--colour-hairline-strong); }

.back-routes { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-7); }
.back-routes .back-route { margin-bottom: 0; }

.fade-in { animation: fadeIn var(--duration-settle) var(--ease-settle); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}