/* Layout shared by the homepage and every tool. Load tokens.css first. */
html { color-scheme: light; -webkit-text-size-adjust: 100%; }

.page { max-width: 1120px; margin: 0 auto; padding: var(--s6) var(--s5); }
@media (max-width: 640px) { .page { padding: var(--s5) var(--s4); } }

/* Masthead: title and dek left, stamp and controls right, full-width rule below */
.masthead { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s4); border-bottom: 1px solid var(--brand-primary, var(--rule)); margin-bottom: var(--s5); }
.masthead h1 { margin: 0; }
.masthead .dek { margin: var(--s1) 0 0; font-style: italic; color: var(--text-muted); }
.masthead .meta { display: flex; align-items: center; gap: var(--s4); }
.masthead .meta .label { font-size: 15px; }

.back { display: inline-block; margin-bottom: var(--s3); font: 600 12px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.back:hover { text-decoration: underline; }

.foot { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--brand-accent, var(--rule)); font-size: 13px; color: var(--text-muted); }

input, select { font-size: 15px; color: var(--text); background: var(--bg); border: 1px solid var(--rule);
  padding: var(--s2) var(--s3); min-height: 36px; box-sizing: border-box; }
input:focus, select:focus { outline: none; border-color: var(--forest); }
:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
button:hover { color: var(--walnut); border-color: var(--walnut); }

@media (prefers-reduced-motion: no-preference) {
  a, button, input { transition: color 120ms, border-color 120ms; }
}

/* The Tab Marshal mark (/shared/brand/). Outlined artwork in forest, never recolored by tournament branding.
   Lockups by mark height: lockup-large 64px and up, lockup 32-63px, lockup-small under 32px (20px minimum). */
.brand img, img.brand { display: block; width: auto; }
.back.brand { margin-bottom: var(--s4); }
.back.brand img { height: 24px; }