/* Gate: the guarded switch (DESIGN.md §7). Tokens from /shared/tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--panel); color: var(--legend); }
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(var(--s-7), env(safe-area-inset-top)) var(--gutter) max(var(--s-7), env(safe-area-inset-bottom));
  padding-right: max(16px, env(safe-area-inset-right));
  font: 400 var(--fs-body)/var(--lh-ui) var(--font-ui);
  font-variation-settings: "wdth" var(--wdth-body);
}
.gate { inline-size: 100%; max-inline-size: 560px; }
p { margin: 0; }

.who {
  font: 500 var(--fs-small)/var(--lh-ui) var(--font-mono);
  color: var(--legend-dim);
  margin-block-end: var(--s-4);
}
.q {
  margin: 0 0 var(--s-7);
  font: 600 clamp(2rem, 9vw, var(--fs-gate))/var(--lh-tight) var(--font-ui);
  font-variation-settings: "wdth" var(--wdth-legend);
  text-wrap: balance;
}

/* Subgrid rows [control][state][legend]: names share a baseline, legends share a row. */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--s-6);
  row-gap: var(--s-3);
}
.choice { display: grid; grid-row: span 3; grid-template-rows: subgrid; justify-items: start; }
.plain, .switch { grid-row: 1; align-self: last baseline; }
.state { grid-row: 2; }
.choice .legend { grid-row: 3; }
.legend {
  font-size: var(--fs-small);
  color: var(--legend-dim);
  max-inline-size: 26ch;
  text-wrap: balance;
}
kbd { font: 500 var(--fs-small) var(--font-mono); color: var(--legend); }

/* Blue: a plain bordered button. No guard, no animation. */
.plain {
  display: inline-block;
  padding: var(--s-3) var(--s-4);
  border: var(--hair) solid var(--legend-dim);
  color: var(--legend);
  text-decoration: none;
  font: 600 var(--fs-h3)/var(--lh-ui) var(--font-ui);
  font-variation-settings: "wdth" var(--wdth-legend);
  transition: border-color var(--t-quick) var(--ease);
}
.plain:hover { border-color: var(--legend); }

:focus-visible { outline: 2px solid var(--legend); outline-offset: 2px; }

/* Red: switch under a spring-loaded guard. */
.switch, .state { display: none; }
.js .switch { display: grid; }
.js .state { display: block; }
.switch {
  gap: var(--s-3);
  justify-items: start;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: start;
}
.switch:focus-visible { outline-color: var(--fault); outline-offset: 4px; }
.name {
  font: 600 var(--fs-h3)/var(--lh-ui) var(--font-ui);
  font-variation-settings: "wdth" var(--wdth-legend);
}

.housing {
  position: relative;
  display: block;
  inline-size: 112px;
  block-size: 152px;
  background: var(--strip);
  border: var(--hair) solid var(--rule-strong);
  border-radius: var(--radius-plate);
  perspective: 480px;
}
.mark {
  position: absolute;
  inset-inline: 0;
  text-align: center;
  font: 500 var(--fs-id)/1 var(--font-mono);
  color: var(--legend-faint);
}
.mark.on { top: var(--s-2); }
.mark.off { bottom: var(--s-2); }

/* Lever: a flat bat on a pivot. Down = OFF; thrown = up. */
.lever {
  position: absolute;
  left: 50%;
  top: 50%;
  inline-size: 12px;
  block-size: 44px;
  margin-inline-start: -6px;
  border: var(--hair) solid var(--legend-dim);
  background: var(--panel);
  transform-origin: 50% 0;
  transition: transform var(--t-quick) var(--ease);
}
.lever::before { /* pivot */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  inline-size: var(--lamp);
  block-size: var(--lamp);
  margin: calc(var(--lamp) / -2) 0 0 calc(var(--lamp) / -2);
  border-radius: 50%;
  background: var(--rule-strong);
}
.switch.is-thrown .lever { transform: rotate(180deg); }

/* Guard: --fault outlined plate, 1px hatching, hinged at the top edge. */
.guard {
  position: absolute;
  inset: 28px 20px 24px;
  display: block;
  background: var(--panel);
  border: var(--hair) solid var(--fault);
  border-top-width: 3px;
  color: var(--fault);
  transform-origin: 50% 0;
  transition: transform var(--t-move) var(--ease);
}
.guard svg { display: block; }
.switch:hover .housing { border-color: var(--legend-faint); }
.switch[aria-expanded="true"] .guard { transform: rotateX(-110deg); }

.state {
  font: 500 var(--fs-small)/var(--lh-ui) var(--font-mono);
  color: var(--legend-faint);
}
.switch[aria-expanded="true"] + .state { color: var(--fault); }

@media (max-width: 479px) {
  .choices { grid-template-columns: 1fr; }
  .red { margin-block-start: var(--s-6); }
}