/* The generator page (P2-010) on the brand (ADR-0073): Manrope from the site's /fonts, the grey ramp, the form on the one surface card, matches as rows on lines. */
@font-face { font-family: "Manrope"; src: url("/fonts/manrope_medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope_semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/fonts/manrope_extrabold.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  --ground: #ffffff;
  --surface: #f5f5f7;
  --line: #dadae0;
  --line-control: #6e6e78;
  --ink: #0b0b0d;
  --ink-2: #505059;
  --muted: #686872;
  --error: #b42318;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0b0d;
    --surface: #151518;
    --line: #38383f;
    --ink: #ffffff;
    --ink-2: #bdbdc6;
    --muted: #94949e;
    --error: #f97066;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--ground);
  color: var(--ink);
  font: 500 16px/1.5 "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

header, main, footer { max-width: 640px; margin: 0 auto; }

.brand { margin: 0; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -0.03em; text-transform: uppercase; }

h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; margin: 12px 0 8px; }

h2 { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin: 28px 0 8px; }

.lead, .about p, footer { color: var(--ink-2); }

.other { color: var(--muted); font-size: 15px; font-weight: 600; }

form { background: var(--surface); border-radius: 16px; padding: 16px; margin-top: 20px; display: grid; gap: 8px; }

label { font-weight: 700; font-size: 15px; }

input, select, textarea, button {
  font: inherit;
  color: inherit;
  min-height: 48px;
  border-radius: 12px;
}

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--ground);
  border: 1px solid var(--line-control);
}

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

.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.row label { display: block; margin-bottom: 4px; }

button {
  margin-top: 8px;
  padding: 0 22px;
  border: none;
  border-radius: 24px;
  background: var(--ink);
  color: var(--ground);
  font-weight: 700;
  cursor: pointer;
}

#problem { margin: 0; color: var(--error); font-weight: 600; }

#problem:empty { display: none; }

.done { color: var(--muted); font-size: 13px; }

.round .match:first-of-type { border-top: 1px solid var(--line); }

.match { padding: 12px 0; border-bottom: 1px solid var(--line); }

.court, .rests { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; }

.rests { margin-top: 10px; }

.pairs { margin: 4px 0 8px; overflow-wrap: anywhere; font-weight: 700; }

.vs { color: var(--muted); font-weight: 600; }

.score { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }

.box { width: 72px; min-height: 44px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px; }

table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

caption { text-align: left; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 0 10px; }

th, td { padding: 12px 6px; border-bottom: 1px solid var(--line); text-align: right; }

th { color: var(--muted); font-size: 13px; font-weight: 600; border-bottom-color: var(--ink); }

tr > :first-child { padding-left: 0; }

tr > :last-child { padding-right: 0; }

th:nth-child(2), td:nth-child(2) { text-align: left; width: 100%; overflow-wrap: anywhere; }

td { font-weight: 600; }

td:first-child { color: var(--muted); }

td:nth-child(2) { font-weight: 700; }

td:nth-child(3) { font-weight: 800; font-size: 18px; }

footer { margin-top: 32px; text-align: center; font-size: 14px; font-weight: 600; color: var(--muted); }

a { color: var(--ink); }

@media (max-width: 420px) {
  .row { grid-template-columns: 1fr; }
}