/* ==========================================================================
   Crew rostering coordinator console — "the prompt book"

   Design direction, and why it is this and not a dashboard.

   The thing this replaces is a *document*: a hand-maintained year-grid workbook
   that the admin team reads fluently every day, and SPEC.md §8/§9 both make
   continuity with it an explicit requirement. So the interface is built like
   stage-management paperwork rather than like an analytics product — ruled, not
   carded; hairlines, not shadows; square corners; dense enough to read a week at
   a glance. Nothing floats.

   Two deliberate, load-bearing choices:

   1. EVERY NUMBER AND TIME IS MONOSPACED. A roster is a timing document, and
      setting times in a mono face makes them align down a column without
      tabular-figure tricks, so "8am / 8am / 1pm" reads as a column of calls
      rather than as prose. Names and prose are set in the text face.

   2. COLOUR IS NEVER THE ONLY CHANNEL. The three coverage states carry a fill
      pattern as well as a hue (solid / diagonal hatch / dense cross-hatch), a
      hover title, and a text label, so the bar survives a monochrome print, a
      colour-blind reader and a bad projector. The palette itself is drawn from
      lighting gel — moss green, straw, primary red — because that is the
      vernacular of the world this system serves, and because those three are
      already distinguishable to most kinds of colour vision.

   The accent is a theatre lavender, kept for interactive things only, so it
   never competes with the three coverage colours for meaning.
   ========================================================================== */

:root {
  /* Paper and ink. A cool photocopier grey-green, not a warm cream. */
  --paper: #f1f2ee;
  --paper-raised: #fcfcfa;
  --paper-sunk: #e6e8e1;
  --ink: #191b18;
  --ink-soft: #4e544b;
  --ink-faint: #7f867b;

  --rule: #cdd1c7;
  --rule-strong: #9aa294;

  /* Coverage states (§4.1). Gel names in comments; contrast checked on paper. */
  --covered: #1c6a46;      /* Moss green   — committed cover */
  --provisional: #9c6a0c;  /* Straw        — pencilled, visible but not closed */
  --uncovered: #a81f33;    /* Primary red  — a real hole */
  --covered-wash: #d8e7de;
  --provisional-wash: #f0e3c6;
  --uncovered-wash: #f2d8dc;

  /* Interactive. Lavender, reserved for controls and links. */
  --cue: #56377c;
  --cue-strong: #3f2760;
  --cue-wash: #e7e1f0;

  --face-text: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --face-data: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --rail: 13.5rem;
  --gutter: 1.25rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 13.5px/1.5 var(--face-text);
  letter-spacing: 0.005em;
}

/* Times, headcounts, dates, coverage figures. See note 1 above. */
time,
.num,
.mono,
code,
kbd,
input[type="time"],
input[type="date"],
input[type="datetime-local"] {
  font-family: var(--face-data);
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--cue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--cue-strong);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 1px;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.011em;
}

h1 {
  font-size: 1.35rem;
}

h2 {
  font-size: 1rem;
}

h3 {
  font-size: 0.875rem;
}

p {
  margin: 0 0 0.75rem;
  max-width: 62ch;
}

/* The uppercase tracked label is the paperwork vernacular: PHASE, CALL, CREW. */
.label {
  display: block;
  font: 600 10px/1.4 var(--face-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.muted {
  color: var(--ink-soft);
}

.faint {
  color: var(--ink-faint);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Shell
   ========================================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

.rail {
  border-right: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rail__mark {
  padding: 0 1rem 0.85rem;
  border-bottom: 1px solid var(--rule);
}

.rail__org {
  display: block;
  font-weight: 650;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
}

.rail__nav {
  display: flex;
  flex-direction: column;
}

.rail__link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.42rem 1rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 3px solid transparent;
}

.rail__link:hover {
  background: var(--paper-raised);
  color: var(--ink);
}

.rail__link[aria-current="page"] {
  border-left-color: var(--cue);
  background: var(--paper-raised);
  color: var(--ink);
  font-weight: 600;
}

.rail__group {
  padding: 0.6rem 1rem 0.2rem;
}

.rail__foot {
  margin-top: auto;
  padding: 0.85rem 1rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
}

.badge-count {
  font-family: var(--face-data);
  font-size: 0.7rem;
  padding: 0 0.3rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink-soft);
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  padding: 1.1rem var(--gutter) 0.85rem;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}

.topbar__actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.content {
  padding: var(--gutter);
  min-width: 0;
}

/* ==========================================================================
   Controls
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper-raised);
  color: var(--ink);
  font: 500 12.5px/1.5 var(--face-text);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: var(--paper-sunk);
  color: var(--ink);
}

.btn--primary {
  background: var(--cue);
  border-color: var(--cue-strong);
  color: #fff;
}

.btn--primary:hover {
  background: var(--cue-strong);
  color: #fff;
}

.btn--danger {
  color: var(--uncovered);
  border-color: var(--uncovered);
}

.btn--danger:hover {
  background: var(--uncovered-wash);
  color: var(--uncovered);
}

.btn--small {
  padding: 0.16rem 0.44rem;
  font-size: 11.5px;
}

/* A Phase 2/3 affordance: visible, obviously inert, and labelled with the phase.
   Not hidden (§4.1 promises the action) and not wired to anything (a button that
   silently does nothing is worse than one that says it cannot yet). */
.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  background: repeating-linear-gradient(
    -45deg,
    var(--paper-sunk) 0 3px,
    var(--paper-raised) 3px 6px
  );
  color: var(--ink-faint);
}

.field {
  margin-bottom: 0.9rem;
  max-width: 44rem;
}

.field > label,
.field > .label {
  display: block;
  margin-bottom: 0.2rem;
  font-weight: 600;
  font-size: 12.5px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="datetime-local"],
.field select,
.field textarea {
  width: 100%;
  max-width: 26rem;
  padding: 0.34rem 0.45rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
}

.field input[type="color"] {
  width: 3rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--rule-strong);
  background: none;
}

.field__help {
  margin: 0.22rem 0 0;
  font-size: 11.5px;
  color: var(--ink-soft);
  max-width: 52ch;
}

.field__errors {
  margin: 0.22rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--uncovered);
  font-weight: 500;
}

.field--inline {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0;
}

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li label,
.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 400;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: flex-start;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
}

/* ==========================================================================
   Panels, tables, notes
   ========================================================================== */

.panel {
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  margin-bottom: var(--gutter);
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-sunk);
}

.panel__body {
  padding: 0.75rem;
}

.panel__body--flush {
  padding: 0;
}

.grid-2 {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  align-items: start;
}

.sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.sheet th,
.sheet td {
  text-align: left;
  padding: 0.34rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.sheet thead th {
  font: 600 10px/1.4 var(--face-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.sheet tbody tr:hover {
  background: var(--paper);
}

.note {
  border-left: 3px solid var(--rule-strong);
  padding: 0.5rem 0.75rem;
  background: var(--paper-sunk);
  font-size: 12.5px;
  margin-bottom: var(--gutter);
}

.note--warn {
  border-left-color: var(--provisional);
  background: var(--provisional-wash);
}

.note--stop {
  border-left-color: var(--uncovered);
  background: var(--uncovered-wash);
}

.note--later {
  border-left-color: var(--cue);
  background: var(--cue-wash);
}

.empty {
  padding: 1.75rem 0.75rem;
  text-align: center;
  color: var(--ink-soft);
}

.messages {
  list-style: none;
  margin: 0 0 var(--gutter);
  padding: 0;
}

.messages li {
  border-left: 3px solid var(--rule-strong);
  background: var(--paper-raised);
  padding: 0.45rem 0.7rem;
  margin-bottom: 0.3rem;
  font-size: 12.5px;
}

.messages li.success {
  border-left-color: var(--covered);
}

.messages li.warning {
  border-left-color: var(--provisional);
  background: var(--provisional-wash);
}

.messages li.error {
  border-left-color: var(--uncovered);
  background: var(--uncovered-wash);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.32rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font: 600 10px/1.55 var(--face-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper);
  white-space: nowrap;
}

.tag--draft {
  border-style: dashed;
}

.tag--tentative {
  border-style: dashed;
  color: var(--provisional);
  border-color: var(--provisional);
}

.tag--cancelled {
  color: var(--uncovered);
  border-color: var(--uncovered);
  text-decoration: line-through;
}

.tag--covered {
  color: var(--covered);
  border-color: var(--covered);
}

.tag--short {
  color: var(--uncovered);
  border-color: var(--uncovered);
  background: var(--uncovered-wash);
}

.tag--pencilled {
  color: var(--provisional);
  border-color: var(--provisional);
  background: var(--provisional-wash);
}

/* ==========================================================================
   THE SIGNATURE: the coverage strip (§4.1)
   Three bands, sized to real elapsed time, patterned as well as coloured.
   ========================================================================== */

.bar {
  display: flex;
  width: 100%;
  height: 1.35rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
  overflow: hidden;
}

.bar--slim {
  height: 0.6rem;
}

.bar__seg {
  position: relative;
  min-width: 2px;
  border-right: 1px solid rgba(25, 27, 24, 0.28);
}

.bar__seg:last-child {
  border-right: 0;
}

.bar__seg--covered {
  background: var(--covered);
}

/* Diagonal hatch: the coordinator's intention, not a commitment (D11). Reading
   as "provisional" without relying on the hue is the whole point. */
.bar__seg--provisional {
  background: repeating-linear-gradient(
    45deg,
    var(--provisional) 0 4px,
    var(--provisional-wash) 4px 8px
  );
}

/* Dense cross-hatch: a real hole. Heaviest texture, because it is the thing to
   look at first. */
.bar__seg--uncovered {
  background: repeating-linear-gradient(
      45deg,
      var(--uncovered) 0 3px,
      transparent 3px 6px
    ),
    repeating-linear-gradient(
      -45deg,
      var(--uncovered) 0 3px,
      var(--uncovered-wash) 3px 6px
    );
}

/* The band this row is actually about, outlined in ink so it is findable inside
   a requirement whose other bands are fine. */
.bar__seg--focus {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  z-index: 1;
}

.bar__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--face-data);
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 0.12rem;
}

.bar-key {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.bar-key__swatch {
  display: inline-block;
  width: 1.1rem;
  height: 0.7rem;
  border: 1px solid var(--rule-strong);
  vertical-align: -0.05rem;
  margin-right: 0.25rem;
}

/* ==========================================================================
   Gap dashboard
   ========================================================================== */

.gap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  gap: 0.75rem 1.1rem;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  border-left: 4px solid var(--rule-strong);
}

.gap--running {
  border-left-color: var(--uncovered);
  background: var(--uncovered-wash);
}

.gap--urgent {
  border-left-color: var(--uncovered);
}

.gap--soon {
  border-left-color: var(--provisional);
}

.gap--later {
  border-left-color: var(--rule-strong);
}

.gap__head {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.gap__when {
  font-family: var(--face-data);
  font-weight: 600;
}

.gap__proximity {
  font-family: var(--face-data);
  font-size: 11.5px;
  padding: 0 0.3rem;
  border: 1px solid currentColor;
}

.gap--running .gap__proximity,
.gap--urgent .gap__proximity {
  color: var(--uncovered);
  font-weight: 600;
}

.gap--soon .gap__proximity {
  color: var(--provisional);
}

.gap--later .gap__proximity {
  color: var(--ink-soft);
}

.gap__reasons {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
}

.gap__reasons li {
  border-left: 2px solid var(--provisional);
  padding: 0.1rem 0 0.1rem 0.45rem;
  margin-bottom: 0.15rem;
  color: var(--ink-soft);
}

.gap__actions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: flex-start;
}

.gap__actions-row {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Calendar grid (§8)
   ========================================================================== */

.bands {
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  margin-bottom: var(--gutter);
}

.bands__row {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: center;
  padding: 0.22rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.bands__row:last-child {
  border-bottom: 0;
}

.bands__title {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bands__track {
  position: relative;
  height: 0.85rem;
  background: var(--paper-sunk);
}

.bands__band {
  position: absolute;
  top: 0;
  bottom: 0;
  border: 1px solid rgba(25, 27, 24, 0.35);
}

/* A tentative production: the whole booking is unconfirmed and offers are
   suppressed. Dashed and washed out — a different signal from the dotted
   underline a pencilled *person* gets (D11). */
.bands__band--tentative {
  border-style: dashed;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.65) 0 4px,
    transparent 4px 8px
  );
}

.cal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}

.cal caption {
  text-align: left;
  padding-bottom: 0.4rem;
  font-size: 11.5px;
  color: var(--ink-soft);
}

.cal thead th {
  font: 600 10px/1.6 var(--face-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: 0.2rem 0.35rem;
  text-align: left;
}

.cal td {
  border: 1px solid var(--rule);
  vertical-align: top;
  padding: 0.2rem 0.28rem 0.35rem;
  height: 6.5rem;
  width: 14.28%;
}

/* Out-of-month cells are CONTENT SLOTS, not filler (§9.1, D15.5). Tinted so the
   month boundary is legible, never emptied or hidden. */
.cal td.out {
  background: var(--paper-sunk);
}

.cal td.today {
  box-shadow: inset 0 0 0 2px var(--ink);
}

.cal__day {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.2rem;
}

.cal__daynum {
  font-family: var(--face-data);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.cal td.out .cal__daynum {
  color: var(--ink-faint);
  font-weight: 400;
}

.cal__gapbadge {
  font-family: var(--face-data);
  font-size: 10px;
  font-weight: 700;
  padding: 0 0.24rem;
  border: 1px solid var(--uncovered);
  color: var(--uncovered);
  background: var(--uncovered-wash);
}

.cal__gapbadge--soon {
  border-color: var(--provisional);
  color: var(--provisional);
  background: var(--provisional-wash);
}

.chip {
  display: block;
  border-left: 4px solid var(--rule-strong);
  padding: 0.1rem 0.24rem 0.16rem;
  margin-bottom: 0.16rem;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.35;
}

.chip:hover {
  background: var(--paper-sunk);
  color: var(--ink);
}

.chip--draft {
  border-left-style: dashed;
  background: repeating-linear-gradient(
    -45deg,
    var(--paper) 0 4px,
    var(--paper-sunk) 4px 8px
  );
}

.chip--cancelled {
  opacity: 0.6;
}

.chip--cancelled .chip__title {
  text-decoration: line-through;
}

.chip__time {
  font-family: var(--face-data);
  font-size: 10.5px;
  color: var(--ink-soft);
  display: block;
}

.chip__title {
  font-weight: 600;
  display: block;
}

.chip__crew {
  display: block;
  color: var(--ink-soft);
  font-size: 10.5px;
}

/* A pencilled person: `Name?`, dotted underline. Deliberately NOT the same
   signal as a tentative production (D11) — same mark, different attachment, and
   each carries its own hover text. */
.pencilled {
  text-decoration: underline dotted var(--provisional);
  text-underline-offset: 0.14em;
  color: var(--provisional);
}

.cal__note {
  display: block;
  font-size: 10.5px;
  color: var(--ink-soft);
  border-top: 1px dotted var(--rule-strong);
  padding-top: 0.1rem;
  margin-top: 0.16rem;
}

/* ==========================================================================
   Skills matrix
   ========================================================================== */

.matrix {
  border-collapse: collapse;
  font-size: 12px;
}

.matrix th,
.matrix td {
  border: 1px solid var(--rule);
  padding: 0.22rem 0.35rem;
}

.matrix thead th {
  background: var(--paper-sunk);
  font: 600 10px/1.4 var(--face-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 6.5rem;
}

.matrix thead th.matrix__corner {
  writing-mode: horizontal-tb;
  height: auto;
  text-align: left;
}

.matrix tbody th {
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  background: var(--paper-raised);
}

.cell {
  text-align: center;
  font-family: var(--face-data);
  font-size: 10.5px;
}

.cell--none {
  color: var(--ink-faint);
}

.cell--held,
.cell--current {
  background: var(--covered-wash);
  color: var(--covered);
}

.cell--expiring {
  background: var(--provisional-wash);
  color: var(--provisional);
  font-weight: 700;
}

.cell--expired {
  background: var(--uncovered-wash);
  color: var(--uncovered);
  font-weight: 700;
}

/* ==========================================================================
   Contact card (§4.1, §6.5) — the one thing allowed to float, because it is a
   card somebody picks up.
   ========================================================================== */

.card {
  border: 1px solid var(--ink);
  background: var(--paper-raised);
  box-shadow: 3px 3px 0 var(--rule-strong);
  padding: 0.75rem;
  max-width: 22rem;
}

.card__name {
  font-size: 1.05rem;
  font-weight: 650;
  margin-bottom: 0.1rem;
}

.card__number {
  display: block;
  font-family: var(--face-data);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  margin: 0.35rem 0;
}

.card__actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.auth__sheet {
  width: 100%;
  max-width: 26rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
}

.auth__head {
  padding: 1rem 1.25rem 0.85rem;
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper-sunk);
}

.auth__body {
  padding: 1.1rem 1.25rem 1.25rem;
}

.auth__steps {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font: 600 10px/1.4 var(--face-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

.auth__step--on {
  color: var(--cue);
}

.qr {
  display: grid;
  place-items: center;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--rule-strong);
  margin: 0 auto 0.75rem;
  max-width: 15rem;
}

.qr svg {
  width: 100%;
  height: auto;
  display: block;
}

.codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.3rem;
  margin: 0.75rem 0;
  padding: 0;
  list-style: none;
}

.codes li {
  font-family: var(--face-data);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  text-align: center;
}

.secret {
  font-family: var(--face-data);
  font-size: 11px;
  word-break: break-all;
  color: var(--ink-soft);
}

/* ==========================================================================
   Responsive. A coordinator's phone is a real target: they work gaps while
   walking a venue.
   ========================================================================== */

@media (max-width: 60rem) {
  .shell {
    grid-template-columns: 1fr;
  }

  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--rule-strong);
  }

  .rail__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .rail__group,
  .rail__foot {
    width: 100%;
  }

  .gap {
    grid-template-columns: minmax(0, 1fr);
  }

  .cal td {
    height: auto;
    min-height: 4rem;
  }
}

@media (max-width: 44rem) {
  /* The month grid stops being a grid and becomes a list of days with work.
     Seven 2.5rem columns is not a calendar, it is a smear. */
  .cal,
  .cal caption,
  .cal tbody,
  .cal tr,
  .cal td {
    display: block;
    width: auto;
  }

  .cal thead {
    display: none;
  }

  /* Only days with work survive the collapse: an empty cell in a list is a blank
     line, and thirty of them is not a calendar either. */
  .cal td:not(:has(.chip)):not(:has(.cal__note)) {
    display: none;
  }

  .cal td {
    border-top: 0;
  }

  /* The weekday header is gone, so the day number alone loses its bearings. */
  .cal__weekday {
    display: inline;
  }
}

/* Shown only in the collapsed mobile list, where the column header is gone. */
.cal__weekday {
  display: none;
  font-family: var(--face-data);
  font-size: 11px;
  color: var(--ink-faint);
}

@media print {
  .rail,
  .topbar__actions,
  .gap__actions,
  .skip-link {
    display: none;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  body {
    background: #fff;
  }
}

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