/* Base layer: reset, layout, controls. Phone-first, and it *opens up* — the same
 * markup is a single column on a phone and a proper multi-pane layout on a laptop.
 * Two breakpoints only, named for what changes rather than for a device:
 *   >=680px  "roomy"  — side-by-side pairs, wider cards
 *   >=1024px "desk"   — two-pane console, grid dashboards, persistent nav
 *
 * Buttons are road signs: the colour runs to the edge and a white border sits just
 * inside it. Green moves you on; a ghost is a white plate for the other way. When a
 * pointer or a keyboard lands on one, a glint crosses it the way a sign catches your
 * headlights. Everything that is not a sign is the calm road: white ground, no washes,
 * no shadows.
 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--type);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + var(--space-4));
}

.wrap, .wrap-wide, .site, .page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 20px;
}
/* Long handbook-style prose stays a reading measure *inside* the wide page. */
.prose { max-width: var(--reading); }

header.bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 14px 0 10px;
}
/* The brand: a small green guide sign. */
.bar .mark {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px 0 12px;
  border-radius: 8px; background: var(--guide); color: #fff; text-decoration: none; white-space: nowrap;
  font: 700 15px/1 var(--sign-face); letter-spacing: -.005em;
  box-shadow: inset 0 0 0 3px var(--guide), inset 0 0 0 4.5px #fff;
}
.bar .mark svg { width: 14px; height: 14px; flex: none; }

h1, h2, h3 { font-family: var(--sign-face); font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: var(--step-3); line-height: 1.08; margin: var(--space-3) 0 var(--space-2); }
h2 { font-size: var(--step-2); line-height: 1.15; margin: var(--space-5) 0 var(--space-3); }
h3 { line-height: 1.2; }
p.lede { color: var(--muted); margin: 0 0 var(--space-4); }

label { display: block; font: 600 14px/1.25 var(--sign-face); color: var(--muted); margin: var(--space-3) 0 7px; }
input, select, button, textarea { font: inherit; }
input:not([type=checkbox], [type=radio]), select, textarea {
  width: 100%; padding: 14px; border: 0; border-radius: var(--radius);
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2);
}
input:not([type=checkbox], [type=radio]):focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---- buttons are signs ---------------------------------------------------- */
button {
  --c: var(--guide);
  --edge: #fff;
  width: 100%; min-height: var(--tap); padding: 10px 22px; margin-top: var(--space-3);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: var(--radius); cursor: pointer; text-align: center;
  color: #fff; font: 700 17.5px/1.15 var(--sign-face); letter-spacing: .005em;
  background:
    linear-gradient(100deg, transparent 38%, rgb(255 255 255 / .34) 48%,
                    rgb(255 255 255 / .08) 54%, transparent 62%) 160% 0 / 260% 100% no-repeat,
    var(--c);
  box-shadow: inset 0 0 0 4px var(--c), inset 0 0 0 6.5px var(--edge), var(--glow) var(--c);
  transition: background-position .9s ease, transform .45s var(--spring);
}
/* the white plate: the other way */
button.ghost {
  --c: var(--plate); --edge: var(--plate-ink);
  color: var(--plate-ink);
  box-shadow: inset 0 0 0 4px var(--c), inset 0 0 0 6.5px var(--edge), 0 0 0 1px var(--line-2);
}
button.inline { width: auto; margin-top: 0; min-height: 46px; padding: 8px 18px; font-size: 16px;
  border-radius: 10px; box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--edge), var(--glow) var(--c); }
button.ghost.inline { box-shadow: inset 0 0 0 3px var(--c), inset 0 0 0 5px var(--edge), 0 0 0 1px var(--line-2); }
button:disabled { opacity: .45; cursor: default; }
/* a sign button's arrow, drawn in the button's own colour */
button .go-arrow { width: 20px; height: 20px; flex: none; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--orr-amber); outline-offset: 2px;
}
a { color: var(--guide-ink); text-underline-offset: 3px; }

.card {
  background: var(--card); border-radius: var(--radius-lg);
  padding: 18px; box-shadow: inset 0 0 0 1.5px var(--line);
}
section[id^="v-"]:not(.hide) { animation: rise .55s var(--spring); }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* Screen-reader focus on view headings must not paint a form-field ring. */
h1[tabindex]:focus, h1[tabindex]:focus-visible,
h2[tabindex]:focus, h2[tabindex]:focus-visible { outline: none; }
/* a little plate: a topic, a status */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px;
  border-radius: 7px; background: var(--zone); color: var(--muted);
  font: 700 12.5px/1 var(--sign-face); letter-spacing: .02em; white-space: nowrap;
}
.chip.state { background: var(--guide); color: #fff; text-transform: none; }
.count { font-size: 14px; color: var(--muted); }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.err { color: var(--wrong); margin-top: var(--space-3); font-weight: 600; }
.hide { display: none !important; }

/* roomy: pairs sit side by side, buttons stop being full-bleed */
@media (min-width: 680px) {
  .wrap, .wrap-wide, .site, .page { padding: 0 var(--space-5); }
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .menu button { margin-top: 0; }
  .menu { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  button.auto { width: auto; min-width: 200px; }
}

/* desk: real desktop layouts — two panes for the console, grid for dashboards */
@media (min-width: 1024px) {
  body { font-size: 17px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
  .two-pane { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--space-4); align-items: start; }
  .two-pane > .detail { position: sticky; top: var(--space-4); }
}

/* Hover states only where a real pointer exists — a phone must not inherit them.
   The glint runs on hover and on keyboard focus, once, across the sign. */
@media (hover: hover) {
  button:hover:not(:disabled) { background-position: -60% 0, 0 0; transform: translateY(-1px); }
}
button:focus-visible:not(:disabled) { background-position: -60% 0, 0 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  section[id^="v-"]:not(.hide) { animation: none; }
  button:hover:not(:disabled) { transform: none; }
}
html.exam section[id^="v-"]:not(.hide) { animation: none; }