/*
 * KUB Studio waitlist: one screen, one column. Tokens are the Bitkub DS Core variables
 * from the Figma "Developers Center (2025)" file (dark only, GraphikTH; the brand green is #00b359 by user decision, 2026-11-04).
 */

/* ── Typeface ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'GraphikTH';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/graphikth-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'GraphikTH';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/graphikth-medium.woff2') format('woff2');
}
@font-face {
  font-family: 'GraphikTH';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/graphikth-semibold.woff2') format('woff2');
}

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --bg-primary: #252625;
  --bg-secondary: #1b1c1b;
  --bg-tertiary: #303130;

  --brand: #00b359; /* user decision 2026-11-04 (was #00cc66) */
  --brand-hover: #00994d; /* fg-success-secondary */
  --brand-pressed: #008040; /* brand/1500 */
  --brand-wash: rgba(0, 179, 89, 0.3);

  --text-primary: #ffffff;
  --text-secondary: #c7c7c5;
  --text-tertiary: #9e9e9c;
  --text-placeholder: #929290; /* 4.9:1 on bg-primary */
  --text-on-brand: #ffffff; /* white on brand by user decision (2.8:1 on #00b359; the Figma Button pair) */
  --text-error: #f04542;

  --border-primary: #5f5f5e; /* utility/gray/300: hover border */
  --border-secondary: #464746;
  --border-tertiary: #303130;
  --border-focus: #5f5f5e; /* focus matches hover: no lighter 'outline' on the field (user decision) */

  --radius-md: 8px;
  --radius-lg: 12px;

  --gutter: 48px;
  --column: 840px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1); /* confident deceleration for entrances */
  --font: 'GraphikTH', 'Helvetica Neue', Arial, 'Noto Sans Thai', Thonburi, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 64px 1fr auto;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
}
h1,
p {
  margin: 0;
}
img {
  display: block;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
::selection {
  background: var(--brand-wash);
  color: var(--text-primary);
}
/* No focus rings or highlight boxes anywhere (user decision, 2026-11-03): keyboard focus shows through
   each control's own hover tone instead (see the :focus-visible rules beside each control). */
:focus,
:focus-visible {
  outline: none;
}

/* ── Bar ──────────────────────────────────────────────────────────────── */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
.brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand::after {
  content: '';
  position: absolute;
  inset: -12px 0; /* 44px tall hit area on the 20px lockup */
}
.brand-logo {
  height: 20px;
  width: auto;
}
.brand-divider {
  width: 1px;
  height: 16px;
  background: var(--border-secondary);
}
.brand-name {
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

/* ── Arrival: the page's one rehearsed entrance (headline → lead → composer → reward) ───── */
@keyframes arrive {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.display,
.lead,
.composer,
.reward {
  animation: arrive 640ms var(--ease-arrive) both;
}
.lead {
  animation-delay: 80ms;
}
.composer {
  animation-delay: 160ms;
}
.reward {
  animation-delay: 240ms;
}

/* ── Stage: the one column ────────────────────────────────────────────── */
.stage {
  width: min(var(--column), 100% - 2 * var(--gutter));
  margin: 0 auto;
  align-self: center; /* sits in the middle of whatever height is left; never below the fold */
  padding: clamp(32px, 6vh, 64px) 0 clamp(32px, 8vh, 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.display {
  font-size: clamp(36px, 4.5vw, 60px); /* Figma display/md */
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lead {
  margin-top: 28px;
  max-width: 72ch; /* the sentence sits on two even lines at desktop */
  font-size: 18px;
  line-height: 28px;
  color: var(--text-secondary);
  text-wrap: balance;
}

/* The studio's chat composer: a picture of the product with two real controls, the mode switch and the network selector. */
.composer {
  position: relative;
  z-index: 1; /* the arrival animation leaves the reward line in its own stacking context; without this it paints over the open network menu */
  margin-top: 48px;
  width: min(640px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-tertiary);
  border-radius: 16px;
  text-align: left;
}
.composer-text {
  min-height: 48px; /* two lines: the box never grows while a prompt types in */
  font-size: 16px; /* body/md */
  line-height: 24px;
  color: var(--text-secondary);
}
.composer-bar,
.composer-left,
.composer-right {
  display: flex;
  align-items: center;
}
.composer-bar {
  justify-content: space-between;
  gap: 12px;
}
.composer-left {
  gap: 10px;
}
.composer-right {
  gap: 12px;
}
.composer-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
}
/* Mode switch: Build writes app prompts, Chat writes questions. A real radio group. */
.segment {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-tertiary);
  border-radius: 8px;
}
.segment-btn {
  position: relative;
  padding: 3px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 14px; /* body/sm/medium */
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.segment-btn::after {
  content: '';
  position: absolute;
  inset: -9px 0; /* 44px tall hit area on a 26px control */
}
.segment-btn:hover,
.segment-btn:focus-visible {
  color: var(--text-secondary);
}
.segment-btn[aria-checked='true'] {
  background: var(--border-secondary);
  color: var(--text-primary);
}
/* Network selector: the composer's second working control, beside the mode switch. */
.net {
  position: relative;
}
.net-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  height: 32px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px; /* body/sm/medium */
  line-height: 22px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.net-btn::after {
  content: '';
  position: absolute;
  inset: -6px 0; /* 44px tall hit area on a 32px control */
}
.net-btn:hover,
.net-btn:focus-visible,
.net-btn[aria-expanded='true'] {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.net-chevron {
  color: var(--text-tertiary);
  transition: transform 150ms var(--ease);
}
.net-btn[aria-expanded='true'] .net-chevron {
  transform: rotate(180deg);
}
.net-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  min-width: 208px;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px; /* the two highlighted rows never touch */
  list-style: none;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: menu-in 120ms var(--ease-arrive) both;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.net-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
}
.net-option:hover,
.net-option:focus {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.net-option svg {
  visibility: hidden;
  color: var(--text-primary);
}
.net-option[aria-selected='true'] {
  color: var(--text-primary);
}
.net-option[aria-selected='true'] svg {
  visibility: visible;
}
.composer-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--text-on-brand);
}
.caret {
  display: inline-block;
  width: 1.5px;
  height: 17px;
  margin-left: 2px;
  vertical-align: -3px;
  background: var(--text-primary);
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}

.reward {
  margin-top: 24px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-secondary);
}
.reward strong {
  color: var(--brand);
  font-weight: 500;
}

/* ── Modal (the sign-up) ──────────────────────────────────────────────── */
.modal {
  width: min(520px, calc(100% - 32px));
  margin: auto;
  padding: 32px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  max-height: calc(100dvh - 32px); /* short phones with the keyboard up: the dialog scrolls, the page does not */
  overflow: auto;
  text-align: center;
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.modal[open] {
  animation: modal-in 160ms var(--ease);
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.modal-close:hover,
.modal-close:focus-visible {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
.modal-title {
  margin: 0;
  padding: 0 24px; /* keeps the centred sentence clear of the close button */
  font-size: 20px; /* header/h4 */
  line-height: 32px;
  font-weight: 500;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.modal-title strong {
  color: var(--brand);
  font-weight: 600;
}

/* ── Form ─────────────────────────────────────────────────────────────── */
.signup {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Three steps in one view: numbered rows; a finished step turns its number into a tick. */
.steps {
  margin: 24px 0 0;
  padding: 0;
  min-height: var(--steps-height, 256px); /* rows and success card share one height: the dialog never resizes */
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-md);
}
.step-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.step-check {
  display: none;
}
.step-text {
  font-size: 14px; /* body/sm/medium: the rows sit under the 20px title and beside the 16px field */
  line-height: 22px;
  font-weight: 500;
  color: var(--text-primary);
}
.step-text strong {
  font-weight: 600;
}
.step-action {
  display: inline-flex;
  align-items: center;
  height: 36px;
  min-width: 80px; /* "Open" and "Opened" keep one width, so a finished row never reflows */
  padding: 0 12px;
  justify-content: center;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.step-action:hover,
.step-action:focus-visible {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}
.step-action-done {
  display: none;
}
.step.is-done .step-mark {
  background: var(--brand);
  color: var(--text-on-brand);
  animation: mark-pop 320ms var(--ease-arrive);
}
@keyframes mark-pop {
  0% {
    transform: scale(0.8);
  }
  60% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
.step-check path {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: draw 260ms 120ms var(--ease-arrive) forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.step.is-done .step-num {
  display: none;
}
.step.is-done .step-check {
  display: block;
}
.step.is-done .step-action {
  border-color: transparent;
  color: var(--text-tertiary);
}
.step.is-done .step-action-do {
  display: none;
}
.step.is-done .step-action-done {
  display: inline;
}
.step-email {
  position: relative;
}
.step-email .row {
  grid-column: 1 / -1;
}
.step-email .error {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 7px); /* lives in the dialog's bottom padding, so nothing moves when it appears */
  min-height: 0;
  text-align: center;
}
.step-email .row {
  margin-top: 14px; /* same as the row's side padding */
  gap: 14px;
}
/* Inside the dialog the field and Submit match the row actions' 36px. */
.step-email .input,
.step-email .btn {
  height: 36px;
}
.step-email .btn {
  padding: 0 16px;
  font-size: 14px;
  line-height: 22px;
}
.step-email .row {
  transition: opacity 200ms var(--ease);
}
.step-email.is-locked .row {
  opacity: 0.6;
}
.row {
  display: flex;
  gap: 10px;
}
.row .input {
  flex: 1;
  min-width: 0;
}
.input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 16px;
  caret-color: var(--brand);
  transition: border-color 150ms var(--ease);
}
.input::placeholder {
  color: var(--text-placeholder);
}
.input:hover {
  border-color: var(--border-primary);
}
.input:focus {
  border-color: var(--border-focus);
}
.signup.is-invalid .input {
  border-color: var(--text-error);
}
.btn {
  text-decoration: none; /* the 404 page uses it on a link */
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px; /* one size for every primary and secondary button */
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--brand);
  color: var(--text-on-brand);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms var(--ease),
    opacity 150ms var(--ease);
}
.btn:hover,
.btn:focus-visible {
  background: var(--brand-hover);
}
.btn:active {
  background: var(--brand-pressed);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.btn-busy {
  display: none;
}
.btn.is-busy .btn-label {
  display: none;
}
.btn.is-busy .btn-busy {
  display: inline;
}
.error {
  font-size: 12px; /* small/lg */
  line-height: 18px;
  color: var(--text-error);
}
.error:empty {
  visibility: hidden;
}
.turnstile {
  margin-top: 12px; /* only when a visible challenge renders; empty, it takes no space */
}
/* While a challenge is on screen the rows give up their reserved height (it exists to match the
   success card), so the challenge sits 12px under the last row instead of floating below a gap. */
.signup:has(.turnstile:not(:empty)) .steps {
  min-height: 0;
}
.turnstile:empty {
  display: none;
}

/* ── Success: replaces the three rows after joining; same inset card look ─ */
.success {
  margin-top: 24px;
  min-height: var(--steps-height, 256px); /* matches the three rows, so the dialog keeps its height */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
}
.success .panel-title {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
.success .panel-text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-tertiary);
}
.success {
  animation: arrive 420ms var(--ease-arrive) both;
}
.success-icon {
  margin-bottom: 10px;
  color: var(--brand);
  animation: mark-pop 420ms 120ms var(--ease-arrive) both;
}
.success-icon path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: draw 320ms 300ms var(--ease-arrive) forwards;
}
.btn-secondary {
  margin-top: 16px;
  background: transparent;
  border: 1px solid var(--border-secondary);
  color: var(--text-primary);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: var(--bg-tertiary);
  border-color: var(--border-primary);
}
.btn-secondary:active {
  background: var(--border-secondary);
}

/* ── Footer line ──────────────────────────────────────────────────────── */
/* One centred line: the copyright (a Privacy Notice link joins it once the legal pages exist). */
.foot {
  padding: 16px var(--gutter) max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-tertiary);
  font-size: 12px; /* small/lg */
  line-height: 18px;
  color: var(--text-tertiary);
  text-align: center;
}
.foot-row {
  margin: 0;
}

/* ── Touch: a tap must not leave a hover fill behind ─────────────────── */
@media (hover: none) {
  .net-btn:hover:not([aria-expanded='true']),
  .segment-btn:hover:not([aria-checked='true']),
  .step-action:hover,
  .modal-close:hover,
  .btn-secondary:hover {
    background: transparent;
  }
  .net-btn:hover:not([aria-expanded='true']) {
    color: var(--text-secondary);
  }
  .segment-btn:hover:not([aria-checked='true']) {
    color: var(--text-tertiary);
  }
  .step-action:hover {
    border-color: var(--border-secondary);
  }
  .modal-close:hover {
    color: var(--text-tertiary);
  }
  .btn-secondary:hover {
    border-color: var(--border-secondary);
  }
  .btn:hover {
    background: var(--brand);
  }
}

/* ── Motion preferences ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .caret,
  .modal[open],
  .net-menu,
  .step.is-done .step-mark,
  .success-icon {
    animation: none;
  }
  .display,
  .lead,
  .composer,
  .reward,
  .success {
    animation: fade 240ms ease-out both; /* arrival stays legible without any movement */
  }
  .step-check path,
  .success-icon path {
    animation: none;
    stroke-dashoffset: 0;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
/* From tablet up the headline is one line; it scales with the viewport until it reaches 60px. On a
   portrait tablet the column sits in the upper half instead of floating mid-field. */
@media (min-width: 561px) {
  .display {
    font-size: min(60px, 7vw);
    white-space: nowrap;
  }
}
@media (min-width: 561px) and (max-width: 1100px) and (orientation: portrait) {
  .stage {
    align-self: start;
    padding-top: clamp(80px, 12vh, 160px);
  }
}
@media (max-width: 820px) {
  :root {
    --gutter: 24px;
  }
  .lead {
    margin-top: 20px;
  }
  .composer {
    margin-top: 36px;
  }
}
@media (max-width: 560px) {
  :root {
    --gutter: 16px;
  }
  body {
    grid-template-rows: 56px 1fr auto;
  }
  .stage {
    padding: 24px 0 28px; /* keeps the whole column above the fold on a 390x844 phone */
  }
  .brand-logo {
    height: 18px;
  }
  .display {
    font-size: clamp(32px, 9.2vw, 40px);
  }
  .lead {
    font-size: 16px;
    line-height: 24px;
  }
  .composer {
    margin-top: 36px;
    padding: 16px 16px 12px;
    gap: 14px;
  }
  .composer-text {
    font-size: 14px;
    line-height: 22px;
    min-height: 66px;
  }
  .composer-plus {
    display: none; /* makes room for the network selector beside the send button */
  }
  .bar .btn {
    padding: 0 16px;
    font-size: 14px;
  }
  .modal {
    padding: 28px 24px 32px; /* the longer error messages take two lines here; the extra 4px keeps the second line inside */
  }
  .row {
    flex-direction: column;
  }
  .row .input {
    flex: none; /* in a column, flex: 1 would collapse the field's height */
  }
  .row .btn {
    width: 100%;
  }
  .step {
    padding: 10px 12px;
    column-gap: 10px;
  }
  .step-email .row {
    margin-top: 12px;
    gap: 12px;
  }
  .step-action {
    height: 32px;
    min-width: 72px;
    width: 72px; /* one fixed width for "Open" and "Opened", so a finished row never reflows */
    padding: 0;
  }
  .step-email .input,
  .step-email .btn {
    height: 32px;
  }
  .modal {
    --steps-height: 308px; /* rows and success card share it on phones too */
  }
  .success {
    padding: 16px;
  }
  .foot {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* ── Narrow phones (≤360): after the 560 rules so the tighter rhythm wins ─── */
@media (max-width: 360px) {
  body {
    grid-template-rows: 52px 1fr auto;
  }
  .composer-bar {
    flex-wrap: wrap;
    gap: 10px 12px;
  }
  .stage {
    padding: 8px 0 8px;
  }
  .display {
    line-height: 1.15;
  }
  .lead {
    margin-top: 10px;
    font-size: 14px;
    line-height: 22px;
  }
  .composer {
    margin-top: 16px;
    padding: 12px 12px 10px;
    gap: 10px;
  }
  .reward {
    margin-top: 12px;
  }
  .foot {
    padding-top: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .modal {
    padding: 24px 16px;
    --steps-height: 372px; /* the follow rows wrap to two or three lines in a 288px dialog */
  }
  .modal-title {
    padding: 0 20px;
    font-size: 18px;
    line-height: 28px;
  }
}

/* ── Short viewports (landscape phones): the column tightens and starts at the top ─── */
@media (max-height: 480px) {
  /* After the width rules on purpose: height wins when both apply. */
  .stage {
    align-self: start;
    padding: 12px 0 20px;
  }
  .display {
    font-size: 36px;
    white-space: normal;
  }
  .lead {
    margin-top: 12px;
  }
  .composer {
    margin-top: 20px;
  }
  .reward {
    margin-top: 14px;
  }
}

/* ── Forced colours (Windows High Contrast): fills and tints are replaced by the system palette,
   so the states that normally live in a hover tone need a line. This is the one place an outline
   is drawn; in every other mode focus shows through the control's own tone (user decision). ── */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid;
    outline-offset: 2px;
  }
  .btn,
  .step-action,
  .net-btn,
  .modal-close,
  .input,
  .segment,
  .step-mark {
    border: 1px solid;
  }
  .btn:disabled {
    opacity: 1;
    color: GrayText;
    border-color: GrayText;
  }
  .segment-btn[aria-checked='true'],
  .net-option[aria-selected='true'] {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .step.is-done .step-mark,
  .success-icon {
    forced-color-adjust: none; /* the green disc with its white tick stays as drawn */
  }
}