/*
 * freecellgauntlet.app — the plain page.
 *
 * Phone first (../../MOBILE_FIRST_STANDARD.md): the base rules are the 320px
 * layout, and every rule that widens it is a `min-width` query on the fleet's
 * ladder. There is no `max-width` media query in this file.
 *
 * The palette is DESIGN.md's, literal, and the whole page is the table — dark
 * in light mode too, because it is a table, not a document. Cream text uses
 * the ladder measured against #0F4C4A (80 / 68 / 62%), which holds on the
 * table's whole gradient down to #0A3A38. Signal is a mark only: a word in
 * the demo's verdict, never a fill and never a button.
 *
 * This file is the part a designer's handoff replaces. The demo's geometry
 * hangs off one number, the card width `--w`, and the arithmetic in
 * js/deal.js and js/table.js does not care what any of this looks like.
 */

:root {
  /* The fleet's breakpoint ladder. Custom properties cannot be read inside a
     media query, so the queries below spell the same three values. */
  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;

  --table: #0f4c4a;
  --table-low: #0a3a38;
  --table-edge: #0a3a38;
  --face: #fdfbf4;
  --red: #c0272d;
  --black: #17201f;
  --signal: #ff9470;
  --cream: #f3ead6;
  --cream-80: rgb(243 234 214 / 0.8);
  --cream-68: rgb(243 234 214 / 0.68);
  --cream-62: rgb(243 234 214 / 0.62);

  --gutter: 16px;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", var(--font);

  color-scheme: dark;
  background: var(--table-low);
}

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

/* `hidden` wins over any display a rule sets. */
[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--table) 0%, var(--table-low) 100%);
  color: var(--cream);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--cream);
  text-underline-offset: 0.18em;
}

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

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  background: var(--face);
  color: var(--table);
}

.skip-link:focus {
  top: 8px;
}

/* ── Frame ─────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-bottom: 8px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}

.header-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream-80);
}

section {
  padding: 40px 0;
}

h1,
h2,
h3 {
  line-height: 1.15;
  margin: 0 0 12px;
  font-weight: 700;
}

h1 {
  font-size: 2.25rem;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 12px;
}

.secondary {
  color: var(--cream-80);
}

.tertiary {
  color: var(--cream-68);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding-top: 24px;
}

.subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.promise {
  font-size: 1.125rem;
}

.facts {
  margin: 24px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.facts li {
  padding-left: 14px;
  border-left: 2px solid var(--cream-62);
  color: var(--cream-80);
}

.facts strong {
  color: var(--cream);
  font-weight: 600;
}

/* ── Controls ─────────────────────────────────────────────────────────── */

input,
select,
textarea,
button {
  font: inherit;
  /* 16px floor: below it iOS Safari zooms the page on focus. */
  font-size: max(16px, 1rem);
}

input[type="text"],
input[type="email"],
input[type="number"] {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--cream-62);
  border-radius: 10px;
  background: var(--table-edge);
  color: var(--cream);
}

input::placeholder {
  color: var(--cream-62);
}

input[aria-invalid="true"] {
  border-color: var(--cream);
}

.button,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--face);
  background: var(--face);
  color: var(--table);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.button-quiet,
button.button-quiet {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream-68);
}

button:disabled {
  opacity: 0.62;
  cursor: default;
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--cream-80);
}

.optional {
  color: var(--cream-68);
}

.field {
  margin-bottom: 16px;
}

/* ── The demo ─────────────────────────────────────────────────────────── */

.demo-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}

.demo-form .field {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.demo-form .demo-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.demo-form .demo-actions > * {
  flex: 1 1 0;
}

.demo-error {
  color: var(--cream);
}

.demo-facts {
  margin: 16px 0;
  min-height: 3em;
}

.demo-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.demo-facts dl {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 4px;
}

.demo-facts dl div {
  display: flex;
  gap: 6px;
}

.demo-facts dt {
  color: var(--cream-68);
}

.demo-facts dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.demo-facts .verdict {
  /* A mark: the verdict word, as in the app's pill. Never a ground. */
  color: var(--signal);
}

/*
 * The board. One custom property sets everything: the card width `--w`, an
 * eighth of the board less the gutters between columns. At 320px wide that is
 * about 34px, and the corner index is sized to be read at that width.
 *
 * A covered card shows its corner index and nothing else, so the step down a
 * column is the index's height (DESIGN.md "A covered card shows its corner
 * index and nothing else").
 */
.board {
  container-type: inline-size;
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 12px 0 0;
}

.board-slots,
.board-tableau {
  --gap: max(2px, 1.2cqw);
  --w: calc((100cqw - 7 * var(--gap)) / 8);
  --h: calc(var(--w) * 1.4);
  --step: calc(var(--w) * 0.8);
  display: grid;
  grid-template-columns: repeat(8, var(--w));
  gap: var(--gap);
}

.board-slots {
  margin-bottom: calc(var(--w) * 0.35);
}

.slot {
  height: var(--h);
  border-radius: calc(var(--w) * 0.1);
  background: var(--table-edge);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.35);
}

.board-tableau {
  list-style: none;
  margin: 0;
  padding: 0;
}

.board-column {
  position: relative;
  height: calc((var(--depth) - 1) * var(--step) + var(--h));
}

.card {
  position: absolute;
  left: 0;
  top: calc(var(--row) * var(--step));
  width: var(--w);
  height: var(--h);
  border-radius: calc(var(--w) * 0.1);
  background: linear-gradient(180deg, #fffdf8 0%, var(--face) 55%, #f5f1e6 100%);
  /* Two shadows: the wide faint one makes the seam between overlapped cards,
     the tight one the outline against the table (DESIGN.md "Card stock"). */
  box-shadow:
    0 calc(var(--w) * -0.02) calc(var(--w) * 0.14) rgb(0 0 0 / 0.18),
    0 1px 1.5px rgb(0 0 0 / 0.35);
  font-family: var(--font);
  line-height: 1;
  overflow: hidden;
  animation: deal 240ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: calc(var(--row) * 35ms);
}

.card-red {
  color: var(--red);
}

.card-black {
  color: var(--black);
}

.card-index {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--w) * 0.3);
}

.card-index-top {
  left: calc(var(--w) * 0.02);
  top: calc(var(--w) * 0.05);
}

.card-index-bottom {
  right: calc(var(--w) * 0.02);
  bottom: calc(var(--w) * 0.05);
  transform: rotate(180deg);
}

.card-rank {
  font-size: calc(var(--w) * 0.42);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Condensed, not scaled down: two characters in one character's column, at
   the same height as every other rank (DESIGN.md "One face, every device"). */
.card-rank-10 {
  display: inline-block;
  letter-spacing: -0.08em;
  transform: scaleX(0.78);
}

.card-suit {
  font-size: calc(var(--w) * 0.32);
  margin-top: calc(var(--w) * 0.01);
}

/* The indices own a narrow column down each side and nothing enters it: the
   field is what they leave, from one inset (DESIGN.md "One face, every
   device"). It runs the card's full height, so the top row of pips sits level
   with the rank. */
.card-field {
  position: absolute;
  left: calc(var(--w) * 0.36);
  right: calc(var(--w) * 0.36);
  top: calc(var(--w) * 0.06);
  bottom: calc(var(--w) * 0.06);
}

.pip {
  position: absolute;
  width: 1em;
  text-align: center;
  font-size: calc(var(--w) * 0.12);
  line-height: 1;
  left: calc(var(--x) * (100% - 1em) / 2);
  top: calc(var(--y) * (100% - 1em));
}

.pip-flip {
  transform: rotate(180deg);
}

.card-ace,
.card-court {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-ace {
  font-size: calc(var(--w) * 0.34);
}

.card-court {
  font-size: calc(var(--w) * 0.2);
  font-weight: 800;
  border: max(1px, calc(var(--w) * 0.025)) solid currentColor;
  border-radius: calc(var(--w) * 0.05);
  top: calc(var(--w) * 0.18);
  bottom: calc(var(--w) * 0.18);
}

@keyframes deal {
  from {
    opacity: 0;
    transform: translateY(calc(var(--w) * 0.6));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Reduced motion is not a downgrade: the board simply appears. */
@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

.demo-aside {
  margin-top: 16px;
}

/* ── Frames ───────────────────────────────────────────────────────────── */

.frames-group {
  padding: 16px 0 0;
}

/* A row of frames scrolls inside itself, never the page
   (MOBILE_FIRST_STANDARD rule 5's escape hatch). */
.frames-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}

.frames-row img {
  flex: none;
  height: 360px;
  width: auto;
  border-radius: 12px;
  scroll-snap-align: start;
}

/* ── Waitlist ─────────────────────────────────────────────────────────── */

.platforms {
  border: 0;
  margin: 0 0 16px;
  padding: 0;
}

.platforms legend {
  padding: 0;
  margin-bottom: 6px;
  color: var(--cream-80);
}

.platform-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.toggle {
  position: relative;
  margin: 0;
}

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

.toggle span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--cream-68);
  border-radius: 10px;
  color: var(--cream);
}

.toggle input:checked + span {
  background: var(--face);
  border-color: var(--face);
  color: var(--table);
  font-weight: 600;
}

.toggle input:checked + span::before {
  content: "\2713";
}

.toggle input:focus-visible + span {
  outline: 2px solid var(--cream);
  outline-offset: 2px;
}

.waitlist-status {
  color: var(--cream);
  font-weight: 600;
}

.waitlist-done {
  padding: 16px 0;
}

.waitlist-done:focus {
  outline: none;
}

.small {
  font-size: 0.9375rem;
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  padding: 32px 0 max(32px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(243 234 214 / 0.16);
  color: var(--cream-68);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream-80);
}

/* ── Plain pages: privacy, support, 404 ───────────────────────────────── */

.prose {
  max-width: 40rem;
  padding-top: 16px;
  padding-bottom: 40px;
}

.prose h2 {
  font-size: 1.25rem;
  margin-top: 32px;
}

.prose ul {
  padding-left: 20px;
}

.prose li {
  margin-bottom: 8px;
}

.prose li,
.prose p {
  color: var(--cream-80);
}

.prose strong {
  color: var(--cream);
}

/* ── Wider screens ────────────────────────────────────────────────────── */

@media (min-width: 40rem) {
  .platform-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .demo-form {
    grid-template-columns: minmax(0, 14rem) auto auto;
    align-items: end;
  }

  .demo-form .field {
    grid-column: auto;
  }

  .demo-form .demo-actions {
    grid-column: auto / span 2;
  }

  .frames-row img {
    height: 440px;
  }
}

@media (min-width: 48rem) {
  :root {
    --gutter: 32px;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 1.875rem;
  }

  section {
    padding: 56px 0;
  }

  .facts {
    grid-template-columns: 1fr 1fr;
    gap: 20px 32px;
  }

  .waitlist-form {
    max-width: 32rem;
  }
}

@media (min-width: 64rem) {
  h1 {
    font-size: 3.5rem;
  }

  .hero {
    padding-top: 48px;
  }

  .frames-row img {
    height: 520px;
  }
}

.form-note {
  margin-top: 12px;
}

/* A covered card shows its corner index and nothing else; only the card at
   the front of a column shows its whole face. */
.board-column .card:not(:last-child) .card-field,
.board-column .card:not(:last-child) .card-index-bottom {
  visibility: hidden;
}