/* Layout and components for all pages. Colours and sizes come ONLY from tokens.css (var(--...)).
   Mobile first: these rules are for a ~390px phone; wider screens get a @media block at the end.
   Handy while working: Chrome DevTools > Elements > Styles shows which rule wins and why. */

/* ---------- Base: DONE ---------- */

*,
*::before,
*::after {
  box-sizing: border-box; /* width includes padding and border: sizes mean what they say */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.4;
}

h1,
h2 {
  font-family: var(--font-head);
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.05;
}

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

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

[hidden] {
  display: none !important; /* so a component's display: flex never un-hides it */
}

.mute {
  color: var(--mute);
  font-size: var(--text-small);
}

/* ---------- Page layout ---------- */

/* TODO(serge): .home = a column with gap 16px and padding 8px 20px 16px (handoff M1).
   Hint: display: flex; flex-direction: column; gap: ...; max-width ~480px and margin: 0 auto
   so it does not stretch on a laptop. */
.home {
}

/* TODO(serge): .top-row = a row; the 112 pill takes all the width (flex: 1 on the pill). */
.top-row {
}

/* ---------- Pill buttons: DONE as the example component ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tap);
  padding: 0 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}

.pill-big {
  flex: 1;
  min-height: var(--tap-big);
  padding-left: 8px; /* the white circle sits close to the left edge */
}

.pill-danger {
  background: var(--danger);
  color: var(--on-danger);
}

/* the white circle with the phone icon */
.pill-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--on-danger);
  color: var(--danger);
}

/* ---------- Cards ---------- */

/* TODO(serge): .card = surface background, radius var(--radius-card), padding 20px,
   border var(--line) solid var(--ink). .card-fill = same but background var(--fill) and no border. */
.card {
}

.card-fill {
}

/* TODO(serge): .stat = the big litres number: font var(--font-head), size var(--text-stat), line-height 1, margin 0. */
.stat {
}

/* TODO(serge): progress bar. Style <progress> in the water card: full width, height 12px,
   rounded, terracotta bar. Browsers style <progress> differently; the simple route is
   `accent-color: var(--go)` + width/height. Stop any animation under reduced motion:
   @media (prefers-reduced-motion: reduce) { ... } */

/* ---------- Number tiles ---------- */

/* TODO(serge): .tiles = a 3-column grid (grid-template-columns: repeat(3, 1fr); gap 12px),
   no bullets (list-style: none; padding: 0; margin: 0).
   .tile = a card-like link, min-height var(--tap), number big (b { font-size: 28px }),
   name small below it, text colour var(--ink), no underline. */

/* ---------- Scenario cards ---------- */

/* TODO(serge): .nav-card = a card that is a link: min-height 72px, flex row, space-between,
   ink text, no underline. .is-disabled = opacity 0.6. */

/* ---------- Language chips ---------- */

/* TODO(serge): .chip = a 56px-tall pill with a 3px ink outline and transparent background.
   The active chip has aria-pressed="true" (set by i18n.js): style it with
   .chip[aria-pressed="true"] { background: var(--go); color: var(--go-ink); }
   Why style by aria-pressed and not a .active class: the same attribute tells screen readers
   which language is on, so the look and the accessibility can never disagree. */