/* The custom status bar — ticket 33.
 *
 * Exists because the brief states a clock (7:58PM / 8:09PM) and an iOS clock
 * cannot be frozen: on the real bar the time is right only at the instant it is
 * set and drifts through every take, so two takes cut together disagree. Drawn,
 * it is an authored constant that resets with the scene like every other beat.
 *
 * Draws INK ONLY. The band's background is already the header gradient painted
 * to y=0 (decision 19) with 22's glass over it, verified to within 1% on WebKit
 * by 29 — so this file must never set a background, or it destroys the one
 * composite that is already signed off.
 *
 * Numbers all live in tokens.css. Geometry is absolute against the stage rather
 * than flowed, because every element's position is a measured number and flow
 * would round them. */

.statusbar {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--stage-w);
  height: var(--sb-h);
  color: var(--sb-ink);
  /* Nothing up here is ever touched. A stray thumb on the bar must fall through
   * to the thread, or it becomes a swallowed first tap like decision 205's. */
  pointer-events: none;
  /* Above the header's glass so the glyphs are never behind the blur — iOS's
   * own bar composites on top and ours has to sit where that one did. */
  z-index: 90;
  /* Belt: the bar is the one element whose absence is invisible in a dev tree
   * and fatal on camera, so it is never allowed to inherit a text style. */
  font: var(--t-statusbar);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- left group */

.sb-left {
  position: absolute;
  left: var(--sb-pad-left);
  top: 0;
  height: var(--sb-h);
  display: flex;
  align-items: flex-end;
}

/* The bars share a bottom edge at --sb-bar-base (15.0), which is 5 ABOVE the
 * band's own bottom — so the row is lifted by that difference rather than
 * bottom-aligned in the band. Sitting it flush cost the first render 5px. */
.sb-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--sb-bar-gap);
  height: var(--sb-bar-base);
  margin-bottom: calc(var(--sb-h) - var(--sb-bar-base));
}

.sb-bar {
  width: var(--sb-bar-w);
  background: currentColor;
  border-radius: var(--sb-bar-r);
}

.sb-bar-1 { height: var(--sb-bar-1); }
.sb-bar-2 { height: var(--sb-bar-2); }
.sb-bar-3 { height: var(--sb-bar-3); }
.sb-bar-4 { height: var(--sb-bar-4); }

/* An unfilled bar. Ticket 45, the director's "maybe like 3/4 signal": iOS keeps
 * the bar's full geometry and dims only its ink, so this is deliberately NOT a
 * height or a colour change — every measured number above still applies to it,
 * and a bar that is short instead of dim is the tell that this was eyeballed. */
.sb-bar--off {
  opacity: var(--sb-bar-off);
}

/* Cap height 8.5 on rows 6.0..14.5 — the same rows as the clock, which is why
 * both take --t-statusbar and neither gets its own size. */
.sb-carrier {
  margin-left: var(--sb-bars-gap);
  margin-right: var(--sb-carrier-gap);
  /* The band is 20 tall and the ink sits on rows 6.0..14.5, which --t-statusbar's
   * 20px line box lands on its own — no baseline offset. */
  line-height: var(--sb-h);
  white-space: nowrap;
  /* FITTED, not chosen. At the correct cap height (8.5, confirmed) `Telstra`
   * still measured 39.0 wide against the reference's 36.5, so the face needs
   * iOS's tighter status-bar tracking: 2.5 over six gaps. The clock does not get
   * this — its digits are tabular and already measured within 0.5. */
  letter-spacing: -0.42px;
}

/* THE WIFI ARC IS GONE — removed 21 Aug, the director's call (see statusbar.js).
 * Its rules are deleted rather than left dangling, but decision 228's model is
 * NOT lost: three concentric sectors about one centre at the glyph's bottom
 * apex, radii 0->3.5 / 4.5->7.0 / 8.5->11.0, each clipped to a 41 deg half-angle.
 * That fit was expensive and it is written up in reference/status-bar-spec.md.
 *
 * .sb-carrier keeps its margin-right: it is now trailing space at the end of a
 * left-aligned flex row, so it costs nothing and it is what makes putting the
 * arc back a two-line change instead of a re-fit. */

/* ----------------------------------------------------------------- clock */

/* Centred on the stage, never positioned: two reference strings of different
 * widths both centre on 187.25 against a stage centre of 187.5. */
.sb-clock {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--sb-h);
  line-height: var(--sb-h);
  text-align: center;
  /* SF's digits are tabular by default in the system face, but say it out loud:
   * a proportional 1 would move the whole string off centre between 7:58 and
   * 8:09, which is the one thing this element must not do between scenes. */
  font-variant-numeric: tabular-nums;
  /* FITTED. Every token in the string measured 0.5 wide (rasterisation, and the
   * same 0.5 the ink shows vertically) but the SPACE before `pm` measured 5.0
   * against the reference's 3.5 — iOS tracks the meridiem tighter. word-spacing
   * touches only the space, so the tabular digits keep their own advances. */
  word-spacing: -1.5px;
}

/* ---------------------------------------------------------------- battery */

/* Top is the MEASURED 4.0, not (20 - 11.5) / 2 = 4.25. The quarter-pixel is not
 * cosmetic: it rasterised the fill half a pixel low at DPR 2, and a box is the
 * one thing that must land exactly (decision 209). */
.sb-battery {
  position: absolute;
  right: var(--sb-batt-right);
  top: var(--sb-batt-top);
  width: calc(var(--sb-batt-w) + var(--sb-nub-gap) + var(--sb-nub-w));
  height: var(--sb-batt-h);
}

.sb-batt-body {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sb-batt-w);
  height: var(--sb-batt-h);
  box-sizing: border-box;
  border: var(--sb-batt-stroke) solid var(--sb-batt-line);
  border-radius: var(--sb-batt-r);
}

.sb-batt-nub {
  position: absolute;
  right: 0;
  top: calc((var(--sb-batt-h) - var(--sb-nub-h)) / 2);
  width: var(--sb-nub-w);
  height: var(--sb-nub-h);
  background: var(--sb-batt-line);
  /* The reference's nub is a stub with a rounded outer end, not a square. */
  border-radius: 0 var(--sb-nub-w) var(--sb-nub-w) 0;
}

/* Width is set inline from the scene's level — the one number in this file that
 * is content rather than geometry. */
.sb-batt-fill {
  position: absolute;
  left: var(--sb-fill-x);
  top: calc((var(--sb-batt-h) - var(--sb-fill-h)) / 2);
  height: var(--sb-fill-h);
  background: var(--sb-ink);
  border-radius: var(--sb-fill-r);
}