/* timer.toolforge.ai — a count-up poster.
 *
 * The whole layout is derived from one number, --n (the numeral font size). Every other
 * dimension is a multiple of it, so the design scales as one object and the only question
 * "does it fit the viewport" ever has to answer is: how big can --n be.
 *
 * CSS picks a --n that fits on every phone we care about; app.js measures the real,
 * font-loaded result and shrinks --n if it still overflows. Belt and braces, because the
 * brief is "always fits vh" and font metrics are not something CSS can promise.
 */

@font-face{
  font-family:'Geist';font-style:normal;font-weight:100 900;font-display:block;
  src:url('fonts/geist-latin.19f9c92546.woff2') format('woff2');
}
@font-face{
  font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:block;
  src:url('fonts/geist-mono-latin.684ad5b531.woff2') format('woff2');
}

:root{
  --yellow:#FFE800;
  --ink:#000;
  /* 4 units, each 1.125n tall. 21svh leaves the top and bottom margin; 47vw is the width
     share the numerals keep (see WIDTH_RATIO in app.js). */
  --n: min(21svh, 47vw);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:var(--yellow);
  color:var(--ink);
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* A fixed height, not a min-height: app.js reads body.clientHeight as the space it has to
     fill, and a min-height would grow to match the content it is supposed to be sizing. */
  height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Zero side padding: the label bars run to both screen edges, so there is nothing to
     inset them from. The vertical padding is the safe area only. */
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  /* A count-up poster has nothing to scroll to, and a rubber-band scroll on iOS just
     shows the browser's own background behind the yellow. */
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

/* Full bleed. The only black shapes on the page are the four label bars, each one running
   from screen edge to screen edge; the numerals sit on open yellow between them. */
.card{
  width:100%;
}

.unit{display:block}

.num{
  font-weight:800;
  font-size:var(--n);
  line-height:1;
  /* Tight, not collapsed: the digits read as one block without the 2 and the 1 touching. */
  letter-spacing:-0.045em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  height:calc(var(--n) * 0.92);
  display:flex;
  align-items:center;
  justify-content:center;
  /* The line box a numeral sits in is taller than the row (Geist's own ascent + descent come
     to ~1.14n at line-height 1), and the part that hangs below the last row counts toward the
     document's scrollable height: a page with every element inside the viewport still reports
     a scrollbar. Digit ink is about 0.72n inside a 0.92n row, so clipping the line box costs
     nothing visible. */
  overflow:hidden;
  /* Optical centring. A line box carries descender space the digits never use, so centring
     the box leaves the ink high in the row. This pushes it back down, and the amount is
     measured rather than guessed: render, read the black pixels in each band, and take the
     difference between the gap above the digits and the gap below. At 0.06n the ink came out
     4.53px low on a 185.71px n, the same to within a fifth of a pixel in all four rows, which
     is 0.0244n.

     The padding buys half of what it looks like it buys. The box is border-box and the digits
     are centred inside it, so a padding-top of p leaves a content box of (0.92n - p) whose own
     centre has already moved down by p/2. The ink therefore moves by p/2, and correcting a
     0.0244n error costs 0.0488n of padding. 0.06 - 0.0488 = 0.0112. Verified by re-measuring:
     the gap above and the gap below land within 0.2px of each other in every row. */
  padding-top:calc(var(--n) * 0.0112);
  /* The negative tracking is applied to the right of the last digit too; pull it back so
     the numeral group stays centred rather than drifting left. */
  text-indent:-0.045em;
}

.bar{
  background:var(--ink);
  color:var(--yellow);
  height:calc(var(--n) * 0.205);
  display:flex;
  align-items:center;
  justify-content:center;
}

.bar span{
  font-family:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;
  font-size:calc(var(--n) * 0.082);
  letter-spacing:0.42em;
  text-indent:0.42em;   /* the tracking's trailing space, removed from the centring */
  line-height:1;
  white-space:nowrap;
}

/* Landscape on a phone: the viewport is short and wide, so --n comes off the height and the
   card just gets narrow. Nothing to change — the formula already handles it. */

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}