/* WhosFree on the web, in the app's own design language.
 *
 * The tokens below are copied from src/tokens.ts rather than reinterpreted, so
 * the two surfaces can't drift into looking like cousins: same green, same
 * greys, same 2px borders, same 4px ledge, same Rubik weights. Anything here
 * that has a name in the app keeps that name. */

:root {
  color-scheme: light dark;

  /* shared */
  --primary:      #58CC02;
  --primary-dark: #48A502;
  --on-primary:   #FFFFFF;
  --soon:         #FFC800;

  /* light */
  --bg:          #FFFFFF;
  --card:        #FFFFFF;
  --card-border: #E5E5E5;
  --card-shadow: #D7D7D7;
  --input-bg:    #F7F7F7;
  --text:        #3C3C3C;
  --text-muted:  #777777;
  --text-faint:  #AFAFAF;
  --tint:        #58CC021A;   /* soft(primary, 'light') */

  /* scales, from S */
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --pill: 999px;
  --border: 2px;
  --ledge:  4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #101214;
    --card:        #1B1F23;
    --card-border: #303842;
    --card-shadow: #0B0D10;
    --input-bg:    #242A30;
    --text:        #F7F7F7;
    --text-muted:  #AFAFAF;
    --text-faint:  #777777;
    --tint:        #58CC021F;  /* soft(primary, 'dark') */
  }
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Rubik is the app's face. The stack behind it matters: the pages must stay
     readable when Google Fonts is blocked or slow. */
  font-family: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  font-weight: 500;      /* FONT.body */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 720px; margin: 0 auto; padding: 40px 22px 96px }

/* ── the wordmark ─────────────────────────────────────────────────────── */

/* "Who's Free?" ships as artwork rather than type plus SVG. Rebuilding it in
 * CSS meant re-deriving the spark placement against web glyph metrics, which is
 * a thing that can only ever approximate the drawing; the file is the drawing.
 * Transparent, so it sits on either theme, and 2172px wide, which is ample for
 * the largest size here at 3x. */
.mark { display: block; width: 100%; height: auto }

/* ── masthead ─────────────────────────────────────────────────────────── */

.mast { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 34px }
/* Scoped to the icon by class, not by tag: the wordmark is an img in here too,
   and a bare `.mast img` height beat its own height:auto on specificity, which
   drew it 152x40 against a natural 3:1. */
.mast .app-icon { width: 40px; height: 40px; border-radius: var(--r-sm); display: block }
.mast img { flex: none }
/* Sized against the icon beside it. The artwork carries its own padding, most
   of it above the letters to make room for the spark, so the box is taller than
   the word looks and a nudge up re-centers it on the icon. */
.mast .mark { width: 152px; height: auto; margin-top: -2px }

/* ── type, from FONT ──────────────────────────────────────────────────── */

h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.15; margin: 0 0 6px }
h1::after { content: ''; display: block; width: 56px; height: 5px; background: var(--primary); border-radius: 3px; margin-top: 18px }
h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; margin: 40px 0 10px; display: flex; align-items: center; gap: 12px }
h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.1px; margin: 24px 0 8px }
p  { margin: 0 0 14px }
ul { margin: 0 0 16px; padding-left: 22px }
li { margin: 6px 0 }
strong { font-weight: 700 }
a { color: var(--primary); font-weight: 600 }
.stamp { color: var(--text-muted); font-size: 14px; font-weight: 600 }
.lede  { font-size: 19px; line-height: 1.5 }

/* Section numbers as the app draws a badge: a filled green pill, not a numeral
   sitting loose in the margin. */
.num {
  flex: none;
  min-width: 30px; height: 30px;
  border-radius: var(--pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 14px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px;
}

/* ── surfaces ─────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: var(--border) solid var(--card-border);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 26px 0;
}
/* The one tinted panel. Green stays on the accents (rule, numbers, links) so
   the page doesn't turn into the wash the app screens were pulled back from. */
.card.tint { background: var(--tint) }
.card > :last-child { margin-bottom: 0 }
.card h2 { margin-top: 0; font-size: 18px }

/* ── the ledge ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  font-size: 15px; font-weight: 700;
  padding: 13px 20px;
  border-radius: var(--r);
  border: var(--border) solid var(--card-border);
  background: var(--card);
  color: var(--text);
  box-shadow: 0 var(--ledge) 0 var(--card-shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn.primary {
  background: var(--primary);
  border-color: transparent;
  color: var(--on-primary);
  box-shadow: 0 var(--ledge) 0 var(--primary-dark);
}
/* Sinks onto its shadow, the way SUNK does on press. */
.btn:hover  { transform: translateY(2px); box-shadow: 0 2px 0 var(--card-shadow) }
.btn.primary:hover { box-shadow: 0 2px 0 var(--primary-dark) }
.btn:active { transform: translateY(var(--ledge)); box-shadow: none }

.btns { display: flex; flex-wrap: wrap; gap: 12px }

/* ── tables ───────────────────────────────────────────────────────────── */

.scroll { overflow-x: auto; margin: 8px 0 20px }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px }
th, td { text-align: left; padding: 12px 14px; border-bottom: var(--border) solid var(--card-border); vertical-align: top }
tr:last-child td { border-bottom: none }
th { /* FONT.tiny */
  font-size: 12px; font-weight: 800; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-muted);
}
td:first-child { font-weight: 600 }

footer {
  margin-top: 56px; padding-top: 20px;
  border-top: var(--border) solid var(--card-border);
  color: var(--text-muted); font-size: 14px; font-weight: 600;
}

@media (max-width: 520px) {
  h1 { font-size: 28px }
  main { padding: 28px 18px 72px }
}