/* ==========================================================================
   Tiebreak — stylesheet
   Built from the Figma "Tiebreak" file, light theme, iPhone frames (402 x 874).
   Mobile-first: one column, full height; on wider screens it stays a phone-width
   column centred on the page, except on touch tablets (iPad Mini), where it fills the screen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --surface-page:      #f6f6f1;
  --surface-raised:    #ffffff;
  --surface-selected:  #fafdee;
  --surface-dark:      #171a14;

  /* Ink */
  --ink:      #171a14;
  --ink-75:   rgba(23, 26, 20, .75);
  --ink-70:   rgba(23, 26, 20, .70);
  --ink-60:   rgba(23, 26, 20, .60);
  --ink-55:   rgba(23, 26, 20, .55);
  --ink-50:   rgba(23, 26, 20, .50);
  --ink-45:   rgba(23, 26, 20, .45);
  --ink-40:   rgba(23, 26, 20, .40);
  --ink-35:   rgba(23, 26, 20, .35);
  --ink-30:   rgba(23, 26, 20, .30);
  --ink-28:   rgba(23, 26, 20, .28);
  --ink-20:   rgba(23, 26, 20, .20);
  --ink-18:   rgba(23, 26, 20, .18);
  --ink-14:   rgba(23, 26, 20, .14);
  --ink-12:   rgba(23, 26, 20, .12);
  --ink-10:   rgba(23, 26, 20, .10);
  --ink-08:   rgba(23, 26, 20, .08);

  /* Ink on the dark header */
  --paper:     #f6f6f1;
  --paper-60:  rgba(246, 246, 241, .60);
  --paper-50:  rgba(246, 246, 241, .50);
  --paper-45:  rgba(246, 246, 241, .45);
  --paper-12:  rgba(246, 246, 241, .12);

  /* Accent (lime) */
  --accent:         #c9f24b;
  --accent-edge:    #a4ce1d;
  --accent-border:  #8fb51a;
  --accent-text:    #5a7311;
  --accent-tile:    #e9f5c4;
  --accent-wash:    rgba(164, 206, 29, .09);

  /* Status */
  --fail:        #c0492f;
  --fail-on-dark:#ff8c6b;
  --fail-wash:   #fde9e2;
  --fail-text:   #8a3320;
  --success:     #8fb51a;

  /* Placeholder tile behind a club with no logo */
  --tile:        #ece6f5;

  /* Type */
  --font-ui:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Type scale: every text style picks one of these by role */
  --fs-display: 28px;  /* the screen's headline: page title, next booking */
  --fs-heading: 22px;  /* a sheet's title */
  --fs-title:   18px;  /* a card's title, the call to action, the review sentence */
  --fs-control: 16px;  /* chips, options, inputs (16px floor: iOS zooms smaller inputs), nav links, the line under a headline */
  --fs-body:    15px;  /* running copy, descriptions, meta lines */
  --fs-label:   13px;  /* mono uppercase labels, eyebrows, key-value rows */
  --fs-small:   11px;  /* mono tags and counters */

  /* Radii */
  --r-card:   16px;
  --r-choice: 14px;
  --r-row:    12px;
  --r-rank:    8px;
  --r-bar:     2px;
  --r-pill:   99px;

  /* Layout */
  --gutter:     16px;
  --column:     440px;

  /* Shadows */
  --glow-cta:    0 6px 11px rgba(143, 181, 26, .45);
  --glow-chip:   0 2px 6px rgba(143, 181, 26, .35);
  --glow-first:  0 3px 6px rgba(143, 181, 26, .16);
  --shadow-card: 0 1px 0 rgba(23, 26, 20, .04);
  --shadow-lift: 0 10px 24px rgba(23, 26, 20, .22);
  --shadow-sheet:0 -10px 40px rgba(23, 26, 20, .3);

  /* Motion */
  --ease:      cubic-bezier(.2, .8, .2, 1);
  --dur-fast:  150ms;
  --dur:       200ms;
}

/* --------------------------------------------------------------------------
   2. Reset / page
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: inherit; }

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

/* The phone-width column every screen sits in */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--column);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--surface-page);
}
@media (min-width: 480px) {
  .app { border-left: 1px solid var(--ink-08); border-right: 1px solid var(--ink-08); }
}
/* Touch tablets (iPad Mini: 744px portrait, 1133px landscape) use the whole screen. Width alone
   cannot tell an iPad from a laptop window, so this keys on a touch-only pointer. */
@media (min-width: 480px) and (hover: none) and (pointer: coarse) {
  :root { --column: 1133px; }
  .app { border-left: 0; border-right: 0; }
}

/* --------------------------------------------------------------------------
   3. Shared type
   -------------------------------------------------------------------------- */
.eyebrow, .field__label, .section-label {
  margin: 0;
  font: 500 var(--fs-label) var(--font-mono);
  color: var(--ink-45);
  text-transform: uppercase;
}

.title {
  margin: 0;
  padding: 16px 0;
  font: 700 var(--fs-display)/1.05 var(--font-ui);
  letter-spacing: -.48px;
}
.title + .helper { margin-top: -8px; }

.helper {
  margin: 0 0 20px;
  font: 400 var(--fs-body)/1.4 var(--font-ui);
  color: var(--ink-55);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   4. Call to action + the dock it sits in
   -------------------------------------------------------------------------- */
/* Pinned to the bottom of the screen; content scrolls underneath it. */
.dock {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: auto;
  padding: 24px var(--gutter) max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(246, 246, 241, 0), var(--surface-page) 24px);
  pointer-events: none;
}
.dock > * { pointer-events: auto; }

.cta {
  display: block;
  width: 100%;
  padding: 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--ink);
  font: 600 var(--fs-title)/24px var(--font-ui);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--glow-cta);
  transition: filter var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.cta:hover { filter: brightness(1.04); }
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.cta:disabled, .cta--disabled {
  background: var(--ink-08);
  color: var(--ink-35);
  box-shadow: none;
  cursor: not-allowed;
  filter: none;
}

.cta--danger  { background: var(--fail); color: #fff; box-shadow: none; }
.cta--outline { background: none; border: 1px solid var(--ink-20); box-shadow: none; }

/* Why the CTA is disabled, sitting just above it */
.hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 400 var(--fs-body)/1.3 var(--font-ui);
  color: var(--ink-55);
}
.hint::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--ink-35);
  border-radius: 50%;
  font: 600 10px var(--font-ui);
  color: var(--ink-50);
}
.hint[hidden] { display: none; }

/* --------------------------------------------------------------------------
   5. Home — dark header
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: var(--gutter);
  background: var(--surface-dark);
  color: var(--paper);
}
.hero__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero__eyebrow { font: 500 var(--fs-label) var(--font-mono); color: var(--accent); text-transform: uppercase; }
.hero__eyebrow--muted { color: var(--paper-45); }
.hero__when {
  margin: 0;
  font: 700 var(--fs-display)/1.05 var(--font-ui);
  letter-spacing: -.48px;
}
.hero__where { margin: 0; font: 400 var(--fs-control)/1.3 var(--font-ui); color: var(--paper-60); }

.balance {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  padding-top: 13px;
  border-top: 1px solid var(--paper-12);
  font: 500 var(--fs-label) var(--font-mono);
  color: var(--paper-50);
  text-transform: uppercase;
}
.balance__amount { color: var(--paper); font-size: var(--fs-body); }
.balance__amount--low { color: var(--fail-on-dark); }
.balance__action {
  padding: 0;
  border: 0;
  background: none;
  font: 500 var(--fs-control) var(--font-ui);
  color: var(--accent);
  text-transform: none;
}
.balance__action:hover { text-decoration: underline; }

/* Warning strip under the header */
.warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: var(--gutter);
  background: var(--fail-wash);
  border-bottom: 1px solid rgba(192, 73, 47, .25);
  font: 400 var(--fs-body)/1.25 var(--font-mono);
  color: var(--fail-text);
}
.warning::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fail);
}

/* One-line confirmation after an action */
.notice {
  margin: 0;
  padding: 12px var(--gutter);
  background: var(--surface-selected);
  border-bottom: 1px solid rgba(143, 181, 26, .4);
  font: 500 var(--fs-body) var(--font-ui);
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   6. Home — body, job cards
   -------------------------------------------------------------------------- */
.home-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--gutter);
}

.group { display: flex; flex-direction: column; gap: 16px; }
.group__head { display: flex; align-items: center; gap: 8px; }
.group__head .eyebrow { color: var(--ink-50); }

/* Pulsing marker: the bot is actively hunting */
.live { position: relative; flex: none; width: 8px; height: 8px; }
.live__dot, .live__ring { position: absolute; inset: 0; border-radius: 50%; background: var(--success); }
.live__dot  { animation: pulse 1.6s ease-in-out infinite; }
.live__ring { animation: ring 1.6s ease-out infinite; }
.live--idle .live__dot { animation: none; background: var(--ink-30); }
.live--idle .live__ring { display: none; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes ring  { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

.job {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-14);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.job__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.job__when { margin: 0; font: 600 var(--fs-title) var(--font-ui); }
.job__state { font: 500 var(--fs-small) var(--font-mono); color: var(--ink-40); text-transform: uppercase; white-space: nowrap; }
.job__where { margin: 0; font: 400 var(--fs-body)/1.3 var(--font-ui); color: var(--ink-60); }
.job__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ink-08);
  font: 400 var(--fs-body) var(--font-ui);
  color: var(--ink-50);
}
.job__foot form { margin: 0; }
.job__action {
  margin: -8px -8px -8px 0;
  padding: 8px;
  border: 0;
  background: none;
  font: 500 var(--fs-body) var(--font-ui);
  color: var(--ink);
}
.job__action:hover { text-decoration: underline; }
.job--paused .job__when, .job--paused .job__where { color: var(--ink-45); }

/* Nothing yet */
.empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 20px 16px;
  border: 1px dashed var(--ink-20);
  border-radius: var(--r-card);
  text-align: center;
}
.empty__title { font: 600 var(--fs-control) var(--font-ui); color: var(--ink-75); }
.empty__text  { font: 400 var(--fs-body)/1.4 var(--font-ui); color: var(--ink-45); }

.link-out {
  align-self: center;
  padding: 4px 8px;
  font: 500 var(--fs-control) var(--font-ui);
  color: var(--ink-45);
  text-decoration: none;
}
.link-out:hover { color: var(--ink-70); }

/* --------------------------------------------------------------------------
   7. Wizard — frame, step bar, progress
   -------------------------------------------------------------------------- */
.wizard {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--gutter) var(--gutter) 0;
}
.wizard > form { display: flex; flex-direction: column; flex: 1; }
.wizard > form[role="search"] { flex: none; }
/* The dock sits inside the form but must still span the column's full width */
.wizard .dock { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }

.stepbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 24px;
}
.stepbar__label {
  font: 500 var(--fs-label) var(--font-mono);
  color: var(--ink-45);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}
.navbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -10px;
  padding: 10px;
  border: 0;
  background: none;
  font: 500 var(--fs-control) var(--font-ui);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.navbtn--back { justify-self: start; }
.navbtn--cancel { justify-self: end; color: var(--ink-50); }
.navbtn:hover { text-decoration: underline; }

/* A single-choice step moves on when tapped (site.js), so its Continue only shows without script */
.js form[data-advance] .dock .cta { display: none; }

/* Moving between steps: the step slides out one side and the next comes in from the other — forward
   to the left, back to the right — while the step bar and progress stay put and cross-fade.
   site.js sets html[data-slide] for a step-to-step swap and drops the transition for anything else. */
html[data-slide] .wizard   { view-transition-name: wizard; }
html[data-slide] .stepbar  { view-transition-name: stepbar; }
html[data-slide] .progress { view-transition-name: progress; }

html[data-slide]::view-transition-old(root),
html[data-slide]::view-transition-new(root) { animation: none; }
html[data-slide]::view-transition-group(wizard) { animation-duration: 280ms; }
html[data-slide]::view-transition-old(wizard),
html[data-slide]::view-transition-new(wizard) { animation: 280ms cubic-bezier(.2, .8, .2, 1) both; mix-blend-mode: normal; }

html[data-slide="forward"]::view-transition-old(wizard) { animation-name: slide-to-left; }
html[data-slide="forward"]::view-transition-new(wizard) { animation-name: slide-from-right; }
html[data-slide="back"]::view-transition-old(wizard)    { animation-name: slide-to-right; }
html[data-slide="back"]::view-transition-new(wizard)    { animation-name: slide-from-left; }

@keyframes slide-to-left    { to   { transform: translateX(-40%); opacity: 0; } }
@keyframes slide-from-right { from { transform: translateX(40%);  opacity: 0; } }
@keyframes slide-to-right   { to   { transform: translateX(40%);  opacity: 0; } }
@keyframes slide-from-left  { from { transform: translateX(-40%); opacity: 0; } }

.progress { display: flex; gap: 8px; padding: 20px 0; }
.progress__seg { flex: 1; height: 8px; border-radius: var(--r-bar); background: var(--ink-10); }
.progress__seg--done { background: var(--accent-edge); }

/* --------------------------------------------------------------------------
   8. Step 1 — clubs
   -------------------------------------------------------------------------- */
.search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    padding: 0 13px;
    background: var(--surface-raised);
    border: 1px solid var(--ink-12);
    border-radius: var(--r-row);
}
.search:focus-within { border-color: var(--accent-border); }
.search__icon { flex: none; width: 20px; height: 20px; color: var(--ink-40); }
.search__input {
  flex: 1;
  min-width: 0;
  padding: 16px 0;
  border: 0;
  outline: 0;
  background: none;
  font: 400 var(--fs-control) var(--font-ui);
}
.search__input::placeholder { color: var(--ink-40); }
.search__input::-webkit-search-cancel-button { cursor: pointer; }

.club-list { display: flex; flex-direction: column; gap: 8px; }

.club {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.club:hover { border-color: var(--ink-20); }
.club:has(input:checked) { background: var(--surface-selected); border-color: var(--accent-border); }
.club:has(input:focus-visible) { outline: 2px solid var(--accent-border); outline-offset: 2px; }

.club__logo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-row);
  background: var(--tile);
  object-fit: cover;
}
.club:has(input:checked) .club__logo { background: var(--accent-tile); }
.club__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.club__name { font: 600 var(--fs-title)/1.2 var(--font-ui); }
.club__sports { font: 400 var(--fs-body) var(--font-ui); color: var(--ink-50); }

/* --------------------------------------------------------------------------
   9. Step 2 — chips, options, slot grid
   -------------------------------------------------------------------------- */
/* A legend ignores its fieldset's top padding, so the space above a section is margin. */
.field { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 0; padding: 0 0 20px; border: 0; min-width: 0; }
.field__label { padding: 0; margin-bottom: 12px; }
.field__empty { margin: 0; font: 400 var(--fs-body)/1.4 var(--font-ui); color: var(--ink-45); }

.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chips--tight { gap: 8px; }
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
/* Full day names ("Quarta-feira") must fit a 112px cell, so the day grid sits a step down */
.days .chip { padding: 12px 0; font-size: var(--fs-body); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* A radio dressed as a pill (sport, day) or a rounded tile (duration, time) */
.chip, .option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-pill);
  font: 500 var(--fs-control) var(--font-ui);
  color: var(--ink-70);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.option { border-radius: var(--r-row); }
.chips--tight .chip { padding: 12px 16px; }
.chip:hover, .option:hover { border-color: var(--ink-20); }
.chip input, .option input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked), .option:has(input:checked), .chip--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--glow-chip);
}
.chip:has(input:focus-visible), .option:has(input:focus-visible), .chip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   10. Step 3 — court ladder
   -------------------------------------------------------------------------- */
.ladder, .available {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.court {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 53px;
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-row);
  font: 400 var(--fs-control) var(--font-ui);
  color: var(--ink-75);
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.court:hover { border-color: var(--ink-20); }
.court:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.court__name { flex: 1; min-width: 0; }

/* The + on a court not yet chosen */
.court__add {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 29px;
  border: 1px solid var(--ink-18);
  border-radius: 7px;
  font: 400 var(--fs-label) var(--font-ui);
  color: var(--ink-30);
}

/* Chosen: lime border, tinted wash, a rank numeral */
.court--ranked {
  background: var(--surface-selected);
  border-color: var(--accent-border);
  box-shadow: var(--glow-first);
  font-weight: 600;
  color: var(--ink);
}
.court--ranked:hover { border-color: var(--accent-border); }

.court__rank {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 29px;
  border-radius: var(--r-rank);
  background: var(--ink);
  color: var(--accent);
  font: 500 var(--fs-small) var(--font-mono);
}
.court__add, .court__rank { display: none; }
.court:not(.court--ranked) .court__add { display: grid; }
.court--ranked .court__rank { display: grid; }

/* Drag handle — reorders a chosen court, or lifts an available one into the ladder */
.court__handle {
  flex: none;
  margin: -12px -12px -12px 0;
  padding: 12px;
  font: 400 15px/1 var(--font-ui);
  color: var(--ink-28);
  letter-spacing: 2px;
  touch-action: none;
  cursor: grab;
}
.court:not(.court--ranked) .court__handle { color: var(--ink-18); }

/* Lifted while dragging */
.court--dragging {
  position: relative;
  z-index: 3;
  background: var(--surface-raised);
  border-color: var(--ink);
  box-shadow: var(--shadow-lift);
  cursor: grabbing;
}
.court--dragging .court__handle { color: var(--ink); cursor: grabbing; }

.ladder-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--ink-20);
  border-radius: var(--r-row);
  text-align: center;
  font: 400 var(--fs-body)/1.4 var(--font-ui);
  color: var(--ink-45);
}
.ladder-empty[hidden] { display: none; }

.section-label { padding: 20px 0; }

/* --------------------------------------------------------------------------
   11. Step 4 — scheduler
   -------------------------------------------------------------------------- */
.segmented {
  display: flex;
  padding: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-row);
}
.segmented__option {
  position: relative;
  flex: 1;
  padding: 10px 0;
  border-radius: 9px;
  font: 500 var(--fs-control) var(--font-ui);
  color: var(--ink-60);
  text-align: center;
  cursor: pointer;
}
.segmented__option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__option:has(input:checked) { background: var(--accent); color: var(--ink); font-weight: 600; }
.segmented__option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 1px; }

.select {
  width: 100%;
  padding: 14px 44px 14px 13px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-raised) no-repeat right 14px center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23171a1480' stroke-width='1.5'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
  border: 1px solid var(--ink-12);
  border-radius: var(--r-row);
  font: 500 var(--fs-control) var(--font-ui);
  cursor: pointer;
}
.select:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }

.choices { display: flex; flex-direction: column; gap: 8px; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-choice);
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__radio {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border: 1px solid var(--ink-35);
  border-radius: 50%;
}
.choice__text { display: flex; flex-direction: column; gap: 2px; }
.choice__title { font: 600 var(--fs-control) var(--font-ui); color: var(--ink-75); }
.choice__desc { font: 400 var(--fs-body)/1.4 var(--font-ui); color: var(--ink-55); }
.choice:has(input:checked) {
  background: var(--surface-selected);
  border-color: var(--accent-border);
  box-shadow: 0 2px 5px rgba(143, 181, 26, .18);
}
.choice:has(input:checked) .choice__radio { border: 5px solid var(--accent-border); }
.choice:has(input:checked) .choice__title { color: var(--ink); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Bot runs ●- - - - - -○ You play */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding: 14px 15px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-choice);
}
.timeline__track { display: flex; align-items: center; }
.timeline__start, .timeline__end { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.timeline__start { background: var(--accent-border); }
.timeline__end { border: 2px solid var(--accent-border); }
.timeline__line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent-border) 0 6px, transparent 6px 12px);
}
.timeline__labels { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.timeline__who { display: block; font: 600 var(--fs-body) var(--font-ui); }
.timeline__who--bot { color: var(--accent-text); }
.timeline__when { display: block; font: 500 var(--fs-label) var(--font-mono); color: var(--ink-55); text-transform: uppercase; }
.timeline__lead { font: 500 var(--fs-small) var(--font-mono); color: var(--ink-40); }
.timeline__end-label { text-align: right; }

/* --------------------------------------------------------------------------
   12. Review
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-card);
}
.kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  font: 500 var(--fs-label) var(--font-mono);
  color: var(--ink-50);
  text-transform: uppercase;
}
.kv dt { flex: none; }
.kv dd { margin: 0; font-size: var(--fs-body); color: var(--ink); text-align: right; text-transform: none; }

.reads-as {
  margin-top: 14px;
  padding: 16px;
  background: var(--surface-selected);
  border: 1px solid rgba(143, 181, 26, .4);
  border-radius: var(--r-card);
}
.reads-as__label { margin: 0 0 8px; font: 500 var(--fs-label) var(--font-mono); color: var(--accent-text); text-transform: uppercase; }
.reads-as__text { margin: 0; font: 600 var(--fs-title)/1.45 var(--font-ui); text-wrap: pretty; }
.reads-as__text b { color: var(--accent-text); }

.errors {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--fail-wash);
  border: 1px solid rgba(192, 73, 47, .25);
  border-radius: var(--r-row);
  font: 400 var(--fs-body)/1.4 var(--font-ui);
  color: var(--fail-text);
  list-style: none;
}

/* --------------------------------------------------------------------------
   13. Discard sheet
   -------------------------------------------------------------------------- */
.sheet-layer { position: fixed; inset: 0; z-index: 20; }
.sheet-layer[hidden] { display: none; }
.scrim { position: absolute; inset: 0; background: rgba(23, 26, 20, .45); animation: fade var(--dur) var(--ease); }
.sheet {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: var(--column);
  padding: 22px var(--gutter) max(18px, env(safe-area-inset-bottom));
  background: var(--surface-page);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateX(-50%);
  animation: rise var(--dur) var(--ease);
}
.sheet__grip { align-self: center; width: 36px; height: 4px; margin-bottom: 6px; border-radius: 2px; background: var(--ink-18); }
.sheet__title { margin: 0; font: 700 var(--fs-heading)/1.2 var(--font-ui); letter-spacing: -.02em; }
.sheet__text  { margin: 0; font: 400 var(--fs-body)/1.5 var(--font-ui); color: var(--ink-55); }
.sheet__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translate(-50%, 100%); } }

/* --------------------------------------------------------------------------
   14. Run log
   -------------------------------------------------------------------------- */
.page { display: flex; flex-direction: column; flex: 1; padding: var(--gutter); }
.page .title { padding: 8px 0 20px; }
.page__eyebrow { color: var(--accent-text); padding-top: 20px; }

.runlog {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 24px 0 0;
  padding: 0 0 0 24px;
  list-style: none;
}
.runlog::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 24px;
  width: 2px;
  background: var(--ink-12);
}
.run { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.run::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid var(--surface-page);
  background: var(--success);
}
.run--missed::before { background: var(--fail); }
.run--skipped::before, .run--running::before { background: var(--ink-30); }
.run--upcoming::before { background: var(--surface-page); border: 2px solid var(--ink-30); }
.run__title { margin: 0; font: 600 var(--fs-title)/1.25 var(--font-ui); }
.run--missed .run__title { color: var(--fail); }
.run--upcoming .run__title, .run--skipped .run__title { color: var(--ink-50); }
.run__meta { margin: 0; font: 400 var(--fs-body)/1.35 var(--font-ui); color: var(--ink-50); overflow-wrap: anywhere; }

.rate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: 16px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-10);
  border-radius: var(--r-choice);
  font: 500 var(--fs-label) var(--font-mono);
  color: var(--ink-50);
  text-transform: uppercase;
}
.rate__value { color: var(--accent-text); }
.page .empty { margin-top: 24px; }
.page .rate { margin-top: auto; }
.page .runlog { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   15. Sign-in
   -------------------------------------------------------------------------- */
.auth { display: flex; flex-direction: column; gap: 16px; padding: 48px var(--gutter) var(--gutter); }
.auth__brand { font: 500 var(--fs-label) var(--font-mono); color: var(--accent-text); text-transform: uppercase; }
.auth .title { padding: 0; }
.auth__text { margin: 0; font: 400 var(--fs-body)/1.45 var(--font-ui); color: var(--ink-60); }
.auth__text a { color: var(--accent-text); }
.auth__label { font: 500 var(--fs-label) var(--font-mono); color: var(--ink-45); text-transform: uppercase; }
.auth__input {
  width: 100%;
  padding: 16px 13px;
  background: var(--surface-raised);
  border: 1px solid var(--ink-12);
  border-radius: var(--r-row);
  font: 400 var(--fs-control) var(--font-ui);
}
.auth__input:focus { outline: none; border-color: var(--accent-border); }
.auth form { display: flex; flex-direction: column; gap: 10px; }
.auth form .cta { margin-top: 12px; }
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding: 12px 14px; list-style: none; background: var(--fail-wash); border-radius: var(--r-row); color: var(--fail-text); }

/* The account step: the auth form's fields, inside the wizard's column */
.account { display: flex; flex-direction: column; gap: 10px; }
.account .auth__text { margin-bottom: 10px; }
.account .auth__text b { color: var(--ink); font-weight: 600; }
.auth__check { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; font: 400 var(--fs-body)/1.4 var(--font-ui); color: var(--ink-60); }
.auth__check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent-text); }

/* --------------------------------------------------------------------------
   16. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .live__dot, .live__ring { animation: none; }
  .live__ring { display: none; }
  /* Steps swap in place rather than slide */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* --------------------------------------------------------------------------
   17. htmx — partial loads
   -------------------------------------------------------------------------- */
/* Regions a step re-reads on its own. They fill the form so the dock inside still sits at the bottom. */
.step-fields, .runs { display: flex; flex-direction: column; flex: 1; }

/* While a region is being re-read it dims, so a quick second tap is not mistaken for a dead one. */
.step-fields.htmx-request { opacity: .55; transition: opacity var(--dur) var(--ease) 80ms; }

/* Thin lime bar across the top while any request is in flight. Held back briefly so fast answers
   never flash it. */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-edge) 30%, var(--accent) 60%, transparent);
  background-size: 200% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.loading-bar.htmx-request { opacity: 1; transition-delay: 150ms; animation: loading 1s linear infinite; }
@keyframes loading { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* A pause or resume on its way — htmx disables the button until the card comes back */
.job:has(.job__action[disabled]) { opacity: .6; }
.job__action[disabled] { cursor: progress; }

/* Why a pause or resume did not take */
.job__error { margin: 0; font: 400 var(--fs-body)/1.35 var(--font-ui); color: var(--fail); }

@media (prefers-reduced-motion: reduce) {
  .loading-bar.htmx-request { animation: none; background: var(--accent-edge); }
}

/* --------------------------------------------------------------------------
   Language switch — PT / EN, at the foot of the home and sign-in screens
   -------------------------------------------------------------------------- */
.lang-switch {
  align-self: center;
  display: flex;
  gap: 4px;
}
.lang-switch__option {
  padding: 4px 8px;
  font: 500 var(--fs-label) var(--font-mono);
  color: var(--ink-45);
  text-decoration: none;
  border-radius: 6px;
}
.lang-switch__option:hover { color: var(--ink-70); }
.lang-switch__option[aria-current] { color: var(--ink); background: var(--ink-08); }