/* THRØ on the web. The colours, spacing and radii are the generated tokens (tokens.css); nothing here
   invents one. What this file adds is the arrangement: a brand field that bleeds, paper under it, and
   content held to the same 560-point measure the app holds it to (PD-052). */

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

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

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* The measure. A column of comfortable width with the room around it left as room. */
.measure { max-width: 560px; margin-inline: auto; padding-inline: 20px; }

/* The board bleeds; what is read under it sits in the column. */
.field {
  background: var(--color-background-brand);
  color: var(--color-text-on-board);
  padding-block: 28px 32px;
}
.field a { color: var(--color-text-on-board); }
/* The brand, on every page, as the mark and never as type.
   THRØ's Ø is a dart through a ring at measured proportions (`MarkGeometry.Ratios.wordmark`, which the
   app draws live). A typeface's Ø is a letter with a stroke through it, and setting the name in a font
   was putting a different logo on the brand's green — `tools/make_web_wordmark.py` generates the real
   one and `check_brand.py` refuses a page that goes back to type. */
.brand { display: block; height: 22px; width: auto; margin: 0 0 10px; }
.brand-link { display: inline-block; line-height: 0; text-decoration: none; }
.field .brand { opacity: 0.92; }
/* The front page wears it at size: it is the only page whose subject is the product itself. */
.brand-hero { height: 56px; margin-bottom: 14px; }

.wordmark {
  font-family: var(--font-sport);
  font-weight: var(--font-weight-extrabold);
  font-size: 34px;
  letter-spacing: 0.02em;
  margin: 0;
}
.eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-on-board-secondary);
  margin: 6px 0 0;
}
.field .lede { color: var(--color-text-on-board-secondary); margin: 16px 0 0; }

main { padding-block: 28px 56px; }

h1, h2, h3 { font-family: var(--font-ui); font-weight: var(--font-weight-bold); line-height: 1.2; }
h2 { font-size: 22px; margin: 32px 0 8px; }
h3 { font-size: 17px; margin: 24px 0 4px; }
p { margin: 0 0 12px; }
.quiet { color: var(--color-text-secondary); font-size: 14px; }

a { color: var(--color-text-brand); }

input[type="search"] {
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  color: var(--color-text-primary);
  background: var(--color-background-raised);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-field);
}
input[type="search"]:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

ul.rows { list-style: none; margin: 16px 0 0; padding: 0; }
ul.rows li { border-top: 1px solid var(--color-border-default); }
ul.rows li:last-child { border-bottom: 1px solid var(--color-border-default); }
ul.rows a { display: block; padding: 14px 0; text-decoration: none; color: inherit; }
ul.rows a:hover, ul.rows a:focus-visible { background: var(--color-background-secondary); }
.row-name { font-weight: var(--font-weight-semibold); }
.row-meta { color: var(--color-text-secondary); font-size: 14px; }

/* A result and the word that corrects it, on one line: the scoreline takes the room and the correction
   sits at the end of it, so a season of right answers reads as a list and not as a page of open forms. */
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.row-head .row-name { min-width: 0; }
.row-head button.quiet-button { flex: none; padding: 0; font-size: 14px; }
/* The form a correction opens belongs to the row above it, not beside it. */
.row-head + .row-meta + .entry { margin-top: 10px; }

/* A table is not prose, so it may scroll inside its own box rather than force the page sideways. */
.table-scroll { overflow-x: auto; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
caption { text-align: left; color: var(--color-text-secondary); font-size: 14px; padding-bottom: 8px; }
th, td { padding: 10px 6px; border-bottom: 1px solid var(--color-border-default); text-align: right; }
th:nth-child(1), td:nth-child(1) { width: 2ch; text-align: left; color: var(--color-text-secondary); }
th:nth-child(2), td:nth-child(2) { text-align: left; width: auto; }
thead th { font-size: 13px; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
td.points { font-family: var(--font-sport); font-weight: var(--font-weight-bold); }
td.team { font-weight: var(--font-weight-semibold); }
.evidenced { color: var(--color-status-verified); }

.note {
  border-left: 3px solid var(--color-border-brand);
  padding: 10px 0 10px 14px;
  margin: 20px 0;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.goes li, .stays li { margin-bottom: 8px; }

footer { border-top: 1px solid var(--color-border-default); padding-block: 24px 40px; color: var(--color-text-secondary); font-size: 14px; }

/* Running a league: two boxes and a button, on a card. */
.entry { border: 1px solid var(--color-border-default); border-radius: var(--radius-card);
         background: var(--color-background-raised); padding: 14px; margin-bottom: 12px; }
.entry-form { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.entry-form input { width: 5rem; font: inherit; padding: 10px; text-align: center;
                    color: var(--color-text-primary); background: var(--color-background-primary);
                    border: 1px solid var(--color-border-default); border-radius: var(--radius-field); }
.entry-form .v { color: var(--color-text-secondary); }
button.primary { font: inherit; font-weight: var(--font-weight-semibold); padding: 12px 20px;
                 color: var(--color-text-inverse); background: var(--color-background-brand);
                 border: 0; border-radius: var(--radius-control); cursor: pointer; min-height: 44px; }
button.primary:disabled { opacity: 1; background: var(--color-text-tertiary); cursor: default; }
button.quiet-button { font: inherit; padding: 8px 0; color: var(--color-text-brand);
                      background: none; border: 0; cursor: pointer; text-decoration: underline; }

/* A notice about people's information (PD-094). Drawn only from notice.json, and only while a notice is live. The
   warning surface says "read this" without borrowing the error colour: a notice is not a fault on the page. Both
   tokens have dark values, so the card reads in either theme. */
.notice {
  background: var(--color-status-warning-surface);
  border-left: 4px solid var(--color-status-warning);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  margin: 20px 0;
  color: var(--color-text-primary);
}
.notice p { margin: 0 0 10px; }
.notice p:last-child { margin-bottom: 0; }
.notice .notice-title { font-weight: var(--font-weight-bold); font-size: 18px; margin-bottom: 4px; }
.notice .notice-when { color: var(--color-text-secondary); font-size: 14px; }