/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · theme: custom "card stock and ballpoint" (paper oklch(96.5% 0.012 85), accent oklch(46% 0.15 262) ballpoint blue, Gloock display + Barlow body; axes: light paper / high-contrast serif display / cool accent) · enrichment: none, typography and CSS-built index cards · nav: N9 edge-aligned on the home, privacy and 404 pages, view tabs in the practice room (Impeccable Operate mode) · footer: Ft2 inline single line · tone: austere stagecraft, the clock is the stage and everything else recedes · audience: teenage extemp speakers and their coaches · job: run one honest practice round · contrast: pass (gates 40 and 41) · nav, footer, hero: pass (42 to 45) · honest, chrome, tokens, responsive, icons: pass (46 to 49, 30) · mobile: pass (34, 49, 50 to 57) */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */

/* Base ---------------------------------------------------------------------------------------------------------- */

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

html {
  background: var(--color-paper);
  color: var(--color-ink);
  overflow-x: clip;
  scrollbar-color: var(--color-rule-strong) var(--color-paper);
  accent-color: var(--color-accent);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  caret-color: var(--color-accent);
  font-kerning: normal;
}

::selection {
  background: var(--color-selection);
  color: var(--color-ink);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

p {
  margin: 0;
  max-width: var(--measure);
}

p + p {
  margin-top: var(--space-sm);
}

a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: var(--rule-hair);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--color-accent-hover);
  text-decoration-thickness: var(--rule-mid);
}

a:active {
  color: var(--color-accent-press);
}

:focus-visible {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: var(--rule-mid);
}

/* Headings that receive focus on purpose (after a screen changes) are reading positions, not controls. */
[tabindex="-1"]:focus {
  outline: none;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 var(--space-2xs);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  line-height: 1.5;
  text-align: center;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: var(--space-xs);
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-card);
  color: var(--color-accent);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  opacity: 0;
  pointer-events: none;
}

.skip:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.num,
.clock,
.stage-clock,
time {
  font-variant-numeric: tabular-nums lining-nums;
}

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

.small {
  font-size: var(--text-sm);
}

.nowrap {
  white-space: nowrap;
}

/* Page frame ---------------------------------------------------------------------------------------------------- */

.bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.bar-edge {
  align-items: center;
}

.bar-edge .btn {
  min-height: 2.5rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.wordmark:active {
  color: var(--color-accent-press);
}

.bar nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar nav a {
  display: inline-block;
  padding: var(--space-2xs) 0;
  color: var(--color-muted);
  font-weight: var(--weight-strong);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-mid) solid transparent;
}

.bar nav a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--color-rule-strong);
}

.bar nav a:active {
  color: var(--color-accent-press);
}

.bar nav a[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-2xl);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.foot p {
  max-width: var(--measure);
  flex: 1 1 28rem;
}

.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot a {
  white-space: nowrap;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  line-height: var(--leading-snug);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}

.btn:hover {
  background: var(--color-paper-3);
  border-color: var(--color-ink);
  color: var(--color-ink);
  text-decoration: none;
}

.btn:active {
  background: var(--color-rule);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-paper-2);
  border-color: var(--color-rule);
  color: var(--color-muted);
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: var(--color-on-accent);
}

.btn-primary:active {
  background: var(--color-accent-press);
  border-color: var(--color-accent-press);
}

.btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--color-accent);
  padding-left: var(--space-xs);
  padding-right: var(--space-xs);
}

.btn-quiet:hover {
  background: var(--color-scrim);
  border-color: transparent;
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.btn-quiet:active {
  background: var(--color-paper-3);
  color: var(--color-accent-press);
}

.btn-quiet:disabled {
  background: transparent;
  border-color: transparent;
}

.btn-big {
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-lg);
}

.btn kbd {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

/* Form controls ------------------------------------------------------------------------------------------------- */

label,
legend {
  font-weight: var(--weight-strong);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

input[type="text"],
input[type="number"],
input[type="search"],
textarea,
select {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  transition: border-color var(--dur-micro) var(--ease-out);
}

select {
  width: auto;
  max-width: 100%;
  cursor: pointer;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
textarea:hover,
select:hover {
  border-color: var(--color-ink);
}

input:active,
select:active,
textarea:active {
  border-color: var(--color-accent);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--color-paper-2);
  border-color: var(--color-rule);
  color: var(--color-muted);
  cursor: not-allowed;
}

::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

input[type="radio"],
input[type="checkbox"] {
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

input[type="file"] {
  max-width: 100%;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

input[type="file"]::file-selector-button {
  margin-right: var(--space-sm);
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-strong);
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: var(--color-paper-3);
  border-color: var(--color-ink);
}

input[type="file"]::file-selector-button:active {
  background: var(--color-rule);
}

.field {
  display: grid;
  gap: var(--space-2xs);
}

.field + .field {
  margin-top: var(--space-md);
}

.hint {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-body);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: var(--weight-body);
  cursor: pointer;
}

.check + .check {
  margin-top: var(--space-xs);
}

details > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  color: var(--color-accent);
  font-weight: var(--weight-strong);
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left: 0.45em solid currentColor;
}

details[open] > summary::before {
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.45em solid currentColor;
  border-bottom: 0;
}

details > summary:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

details > summary:active {
  color: var(--color-accent-press);
}

/* Status and notices -------------------------------------------------------------------------------------------- */

.notice {
  max-width: var(--measure);
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}

.notice[data-tone="caution"] {
  border-color: var(--color-caution);
  background: var(--color-caution-wash);
}

.notice[data-tone="error"] {
  border-color: var(--color-signal);
  background: var(--color-signal-wash);
}

.tag {
  display: inline-block;
  padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
  line-height: 1.6;
  white-space: nowrap;
}

.tag[data-tone="demo"] {
  border-color: var(--color-caution);
  color: var(--color-caution);
}

.unverified {
  color: var(--color-caution);
  font-weight: var(--weight-strong);
}

.toast {
  position: fixed;
  left: 0;
  right: 0;
  width: max-content;
  margin-inline: auto;
  bottom: var(--space-lg);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: calc(100vw - 2 * var(--space-md));
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-ink);
  box-shadow: var(--shadow-lift);
}

/* Home and plain pages ------------------------------------------------------------------------------------------ */

.intro {
  display: grid;
  gap: var(--space-lg);
  max-width: 46rem;
  padding-bottom: var(--space-2xl);
}

.intro h1 {
  font-size: var(--text-4xl);
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  max-width: var(--measure);
}

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
  margin: 0 0 var(--space-xl);
  padding: var(--space-lg) 0 0;
  list-style: none;
  border-top: var(--rule-heavy) solid var(--color-ink);
  counter-reset: stage;
}

.flow li {
  counter-increment: stage;
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

.flow li::before {
  content: counter(stage);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-accent);
}

.flow h2 {
  font-size: var(--text-xl);
}

.flow p {
  color: var(--color-muted);
}

.prose {
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure);
}

.flow + .prose {
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.prose h1 {
  margin-bottom: var(--space-xs);
}

.prose h2 {
  margin-top: var(--space-lg);
  font-size: var(--text-xl);
}

.prose ul {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding-left: var(--space-lg);
}

/* The round: stage rail ----------------------------------------------------------------------------------------- */

.stages {
  margin-bottom: var(--space-xl);
}

.stages ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.stages li {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-xs) 0;
  color: var(--color-muted);
  font-weight: var(--weight-strong);
  border-bottom: var(--rule-heavy) solid transparent;
  margin-bottom: calc(-1 * var(--rule-hair));
}

.stages li .n {
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-muted);
}

.stages li[data-state="done"] {
  color: var(--color-muted);
}

.stages li[data-state="done"] .n {
  color: var(--color-accent);
}

.stages li[aria-current="step"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

.stages li[aria-current="step"] .n {
  color: var(--color-accent);
}

.screen-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-bottom: var(--space-lg);
}

.screen-head p {
  color: var(--color-muted);
}

/* Draw: format picker and deck ---------------------------------------------------------------------------------- */

.setup {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-xl);
  align-items: start;
}

.formats {
  display: grid;
}

.formats legend {
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
}

.format {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-sm);
  align-items: baseline;
  padding: var(--space-sm) var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-weight: var(--weight-body);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}

.format:first-of-type {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.format:hover {
  background: var(--color-paper-2);
}

.format:has(input:checked) {
  background: var(--color-paper-2);
}

.format input {
  align-self: center;
}

.format-name {
  font-weight: var(--weight-strong);
}

.format-facts {
  grid-column: 2;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.custom-numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.custom-numbers .field + .field {
  margin-top: 0;
}

.rules {
  margin-top: var(--space-md);
}

.rules dl {
  display: grid;
  gap: var(--space-lg);
  margin: var(--space-sm) 0 0;
  max-width: var(--measure);
}

.rules dt {
  font-weight: var(--weight-strong);
}

.rules dd {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-2xs) 0 0;
}

.rules blockquote {
  margin: var(--space-2xs) 0 0;
  padding-left: var(--space-sm);
  border-left: var(--rule-hair) solid var(--color-rule-strong);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.rules .source {
  margin-top: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.deckside {
  display: grid;
  gap: var(--space-md);
  position: sticky;
  top: var(--space-lg);
}

.deck {
  position: relative;
  aspect-ratio: 5 / 3;
  max-width: 22rem;
  margin-bottom: var(--space-sm);
}

.deck-card {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  background: var(--color-card-back);
  box-shadow: var(--shadow-card);
}

.deck-card::after,
.card-back::after {
  content: "";
  position: absolute;
  inset: var(--space-xs);
  border: var(--rule-hair) solid var(--color-card-back-line);
  border-radius: var(--radius-sm);
}

.deck-card span,
.card-back span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-card-back-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.deck-count {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Draw: the table of dealt cards -------------------------------------------------------------------------------- */

.table {
  display: grid;
  grid-template-columns: repeat(var(--cards, 5), minmax(0, 1fr));
  gap: var(--space-md);
  perspective: 1400px;
}

.card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 11rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
}

.card:disabled {
  cursor: default;
}

.card-inner {
  position: relative;
  display: grid;
  transform-style: preserve-3d;
  border-radius: var(--radius-md);
}

.card-face,
.card-back {
  position: relative;
  grid-area: 1 / 1;
  border-radius: var(--radius-md);
  backface-visibility: hidden;
  box-shadow: var(--shadow-card);
}

.card-back {
  background: var(--color-card-back);
}

.card-face {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  background: var(--color-card);
  border: var(--rule-hair) solid var(--color-rule);
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-strong);
}

.card-rule {
  height: var(--rule-hair);
  background: var(--color-accent);
}

.card-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.card:hover .card-face {
  border-color: var(--color-ink);
}

.card:active .card-face {
  background: var(--color-paper-2);
}

.card:focus-visible {
  outline: none;
}

.card:focus-visible .card-face {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: var(--rule-mid);
}

.card[data-chosen="true"] .card-face {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lift);
}

.card:disabled .card-face {
  border-color: var(--color-rule);
}

/* Face up without motion: the back is simply hidden. */
.card[data-face="up"] .card-back {
  opacity: 0;
}

.choose-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-lg);
}

.redeal-problem {
  margin-top: var(--space-md);
}

.decision {
  color: var(--color-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

.decision[data-state="over"] {
  color: var(--color-caution);
  font-weight: var(--weight-strong);
}

/* Prep ---------------------------------------------------------------------------------------------------------- */

.topic-card {
  display: grid;
  gap: var(--space-xs);
  max-width: 52rem;
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
}

.topic-card .card-text {
  font-size: var(--text-xl);
}

.prep {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-xl);
}

.clock-block {
  display: grid;
  gap: var(--space-md);
}

.clock-label {
  color: var(--color-muted);
  font-weight: var(--weight-strong);
}

.clock {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-clock);
  line-height: 1;
  letter-spacing: -0.02em;
}

.clock[data-state="paused"] {
  color: var(--color-muted);
}

.clock[data-state="over"] {
  color: var(--color-muted);
}

.cues {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.cues li {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding: var(--space-xs) var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.cues li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent-wash);
  opacity: 0;
  pointer-events: none;
}

.cues li[data-state="done"] {
  color: var(--color-muted);
}

.cues li[data-state="done"] .cue-label::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: var(--space-xs);
  border-radius: 50%;
  background: var(--color-accent);
  vertical-align: 0.1em;
}

.cues li[data-state="next"] {
  font-weight: var(--weight-strong);
}

.cues li[data-state="next"] .cue-time {
  color: var(--color-accent);
}

.cues li[data-flash="true"]::after {
  animation: flash 1600ms var(--ease-out) 1;
}

.cue-time {
  position: relative;
  z-index: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--weight-strong);
}

.cue-label {
  position: relative;
  z-index: 1;
}

.outline {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}

.outline h2 {
  font-size: var(--text-xl);
}

.outline .field + .field {
  margin-top: 0;
}

.points {
  display: grid;
  gap: var(--space-xs);
}

.count {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Speech -------------------------------------------------------------------------------------------------------- */

.speech-topic {
  max-width: var(--measure);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.speech {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-xl);
  padding: var(--space-xl) 0;
  border-top: var(--rule-heavy) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.stage-clock {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-stage);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.overtime {
  margin-top: var(--space-xs);
  font-weight: var(--weight-strong);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums lining-nums;
}

.standing {
  margin-top: var(--space-sm);
  font-weight: var(--weight-strong);
  font-size: var(--text-lg);
}

.speech[data-standing="sentence"] .stage-clock,
.speech[data-standing="over"] .stage-clock,
.speech[data-standing="sentence"] .overtime,
.speech[data-standing="over"] .overtime,
.speech[data-standing="over"] .standing,
.speech[data-standing="sentence"] .standing {
  color: var(--color-signal);
}

.speech[data-standing="grace"] .overtime,
.speech[data-standing="grace"] .standing {
  color: var(--color-caution);
}

.timecard {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-2xs);
  aspect-ratio: 3 / 5;
  max-height: 22rem;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-card);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.timecard-big {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);
  font-size: var(--text-stage-s);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

.timecard-small {
  color: var(--color-muted);
  font-weight: var(--weight-strong);
}

.timecard[data-state="idle"] .timecard-big {
  color: var(--color-muted);
}

.timecard[data-state="time"] .timecard-big {
  color: var(--color-signal);
  font-size: var(--text-3xl);
}

.practice-label {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Ballot -------------------------------------------------------------------------------------------------------- */

.ballot {
  display: grid;
  gap: var(--space-xl);
  max-width: 52rem;
}

.summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
  margin: 0;
  padding: var(--space-md) 0;
  border-top: var(--rule-heavy) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.summary div {
  display: grid;
}

.summary dt {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.summary dd {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-strong);
  font-variant-numeric: tabular-nums lining-nums;
}

.summary dd[data-tone="signal"] {
  color: var(--color-signal);
}

.groups {
  display: grid;
  gap: var(--space-xl);
}

.group h2 {
  margin: 0 0 var(--space-sm);
  font-size: var(--text-xl);
}

.criterion {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xs) var(--space-lg);
  align-items: center;
  padding: var(--space-sm) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.criterion legend {
  float: left;
  padding-top: var(--space-xs);
}

.criterion details {
  grid-column: 1 / -1;
}

.criterion details ul {
  margin: 0 0 var(--space-xs);
  padding-left: var(--space-lg);
  max-width: var(--measure);
  color: var(--color-muted);
}

.scale {
  display: flex;
  gap: var(--space-2xs);
}

.seg {
  position: relative;
  display: block;
  font-weight: var(--weight-strong);
}

.seg input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.seg span {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--rule-hair) solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums lining-nums;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.seg:hover span {
  background: var(--color-paper-3);
  border-color: var(--color-ink);
}

.seg:active span {
  background: var(--color-rule);
}

.seg input:checked + span {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.seg input:focus-visible + span {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: var(--rule-mid);
}

.seg input:disabled + span {
  background: var(--color-paper-2);
  border-color: var(--color-rule);
  color: var(--color-muted);
}

.clear-score {
  font-size: var(--text-sm);
}

/* Log ----------------------------------------------------------------------------------------------------------- */

.trend {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding: var(--space-md) 0;
  border-top: var(--rule-heavy) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.trend ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.trend h2 {
  font-size: var(--text-xl);
}

.trend li {
  display: grid;
  font-variant-numeric: tabular-nums lining-nums;
}

.trend li b {
  font-size: var(--text-xl);
}

.log-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
}

.log-table caption {
  text-align: left;
  color: var(--color-muted);
  padding-bottom: var(--space-xs);
}

.log-table th,
.log-table td {
  padding: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}

.log-table th {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}

.log-table td.topic {
  max-width: 28rem;
}

.log-table tr[data-new="true"] td {
  background: var(--color-accent-wash);
}

.log-table td.row-actions .cell {
  display: flex;
  gap: var(--space-2xs);
  white-space: nowrap;
}

.log-table .over {
  color: var(--color-signal);
  font-weight: var(--weight-strong);
}

.empty {
  display: grid;
  gap: var(--space-md);
  max-width: var(--measure);
  padding: var(--space-lg);
  border: var(--rule-hair) dashed var(--color-rule-strong);
  border-radius: var(--radius-md);
}

.log-tools {
  margin-top: var(--space-2xl);
}

.recording {
  display: grid;
  gap: var(--space-sm);
  max-width: var(--measure);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}

#log-player {
  margin-bottom: var(--space-xl);
}

.recording h2 {
  font-size: var(--text-xl);
}

.recording audio {
  width: 100%;
}

.rec-line {
  margin-bottom: var(--space-md);
  color: var(--color-muted);
}

.rec-line[data-state="recording"] {
  color: var(--color-accent);
  font-weight: var(--weight-strong);
}

.rec-line[data-state="problem"] {
  color: var(--color-ink);
}

.log-tools .notice .actions {
  margin-top: var(--space-sm);
}

/* Topics and settings ------------------------------------------------------------------------------------------- */

.twocol {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-xl);
  align-items: start;
}

.panel {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-paper-2);
}

.panel h2 {
  font-size: var(--text-xl);
}

.panel .field + .field {
  margin-top: 0;
}

.topic-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.topic-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2xs) var(--space-md);
  align-items: start;
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.topic-list .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.sources-list {
  margin: 0;
  padding-left: var(--space-lg);
}

.settings {
  display: grid;
  gap: var(--space-xl);
  max-width: 46rem;
}

.settings section {
  display: grid;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.settings h2 {
  font-size: var(--text-xl);
}

.cue-edit {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--space-xs) var(--space-sm);
  align-items: end;
  padding: var(--space-sm) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.cue-edit legend {
  float: left;
  grid-column: 1 / -1;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
}

input[type="number"] {
  max-width: 10rem;
}

.cue-edit .field + .field {
  margin-top: 0;
}

.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-lg);
}

/* In a row the gap spaces the options; the stacked-options margin would push the first one up. */
.inline .check + .check {
  margin-top: 0;
}

/* Motion: one authored moment (the draw), only when the reader has not asked for less --------------------------- */

@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .card-inner {
    transition: transform var(--dur-flip) var(--ease-out);
  }

  :root:not([data-motion="reduce"]) .card-face {
    transform: rotateY(180deg);
  }

  :root:not([data-motion="reduce"]) .card[data-face="up"] .card-inner {
    transform: rotateY(180deg);
  }

  :root:not([data-motion="reduce"]) .card[data-face="up"] .card-back {
    opacity: 1;
  }

}

/* Reduced motion: nothing moves. The flip above never applies and the script skips its animations; the colour
   changes on hover and focus (120 ms, named properties only) stay, since they move nothing. The one keyframe
   animation, the cue flash, is switched off; the list still marks the milestone done. No rule here may touch every
   element: a transition duration on "*" would start an "all" transition on elements that declare none. */
@media (prefers-reduced-motion: reduce) {
  .cues li[data-flash="true"]::after {
    animation: none;
  }
}

/* Narrow screens ------------------------------------------------------------------------------------------------ */

@media (max-width: 60rem) {
  .setup,
  .prep,
  .twocol {
    grid-template-columns: minmax(0, 1fr);
  }

  .deckside {
    position: static;
  }

  .table {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }

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

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

  .timecard {
    aspect-ratio: auto;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    text-align: left;
    gap: var(--space-md);
  }

  .timecard .practice-label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  main {
    padding: var(--space-lg) var(--space-md) var(--space-xl);
  }

  .bar {
    padding: var(--space-sm) var(--space-md);
  }

  .bar nav ul {
    gap: var(--space-2xs) var(--space-md);
  }

  .foot {
    padding: var(--space-md);
  }

  h1 {
    font-size: var(--text-2xl);
  }

  .intro h1 {
    font-size: var(--text-3xl);
  }

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

  .stages li {
    font-size: var(--text-sm);
    flex-direction: column;
    gap: 0;
  }

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

  .card {
    min-height: 8.5rem;
  }

  .clock {
    font-size: var(--text-clock-s);
  }

  .stage-clock {
    font-size: var(--text-stage-s);
  }

  .custom-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .log-table thead {
    display: none;
  }

  .log-table,
  .log-table tbody,
  .log-table tr,
  .log-table td {
    display: block;
  }

  .log-table tr {
    padding: var(--space-sm) 0;
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }

  .log-table td {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--space-sm);
    padding: var(--space-2xs) 0;
    border-bottom: 0;
  }

  .log-table caption {
    display: block;
  }

  .log-table td::before {
    content: attr(data-label);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-strong);
  }

  .cue-edit {
    grid-template-columns: 5.5rem minmax(0, 1fr);
  }

  .custom-numbers input[type="number"] {
    max-width: none;
  }
}