/* nimiq.kids kid app — THE TOP CHROME: the two controls that ride above every
   kid screen (the back button's line and the fixed language corner), and the
   measurements they and every screen share.

   Split out of wallet.css at the 800-line CI guard, the same way box.css came
   out of chart.css. It is a genuine unit and not just the overflow: nothing
   below is a wallet screen, and everything below is either a --kid-chrome-*
   / --kid-corner-* measurement or the control that publishes it.

   Loads BEFORE wallet.css, so phone.css and no-address.css still override both
   files exactly as they did. Custom properties are order-independent; the only
   ordering that matters here is that this sheet beats the shell's own bundle,
   which is linked further up. */

/* ---------- corner control slot (fleet one-button control, language-only) ----------
   The corner is FIXED and shared by every kid screen, so it is not in any
   screen's flow and cannot be spaced by a normal gap. Instead it publishes the
   vertical band it occupies as --kid-corner-band, and every screen reserves
   that much top padding — which is what stops it landing on the balance chip
   (they were flush at y=46 before: corner bottom 46, chip top 46). Change the
   corner's size or offset ONLY through these vars, or screens drift back into
   it. */
:root {
  --kid-corner-top: 14px;
  /* THE one number the whole top row is built from: the kid's identicon. The
     pill that holds it and the language flag beside it are both derived from
     it below, so a screen can only ever be resized by changing this — which is
     the bug that shipped otherwise. The tablet block used to scale the
     identicon to 64px on its own while --kid-corner-h stayed 46px, so the
     hexagon hung 9px out of its own white pill top and bottom, and the
     language pill next to it stayed phone-sized. Derived, they cannot drift. */
  --kid-ident: 38px;
  /* Drives the corner pill AND the home identity block (.ch-kid is height:
     var(--kid-corner-h)), so the two always share a centre line and one number
     scales both. Raised from the shell's stock 38px: on the home screen the
     kid's own identity was rendering SMALLER than the language control beside
     it, which is backwards (Andjroo, 2026-07-30). */
  --kid-corner-h: calc(var(--kid-ident) + 8px);
  /* The flag hexagon inside the pill. The shell draws it at 24px, which is
     right for its own 40px pill and small inside a 46px one — next to the kid's
     38px identicon on the same line it read as a different scale of control.
     Sized to the identicon rather than matched exactly: the hex is wider than
     tall (24:22), so equal widths would make it the heavier of the two. */
  --kid-lang-flag: calc(var(--kid-ident) - 4px);
  /* The right lane .ch-hd keeps clear of the fixed corner control: the pill's
     own width (10 + flag + 7 gap + 10 caret + 12) plus the page gutter plus a
     gap. Derived, so growing the flag cannot silently push the pill under a long
     kid's name. */
  --kid-corner-lane: calc(var(--kid-lang-flag) + 39px + var(--kid-chrome-gutter) + var(--s3));
  --kid-corner-gap: 14px; /* breathing room between the corner and content */
  --kid-corner-band: calc(
    env(safe-area-inset-top, 0px) + var(--kid-corner-top) + var(--kid-corner-h) + var(--kid-corner-gap)
  );

  /* ONE gutter for the whole page: the back button, the corner control and the
     cards all measure from it. They used to be set independently and drifted to
     three different values (12 / 8 / 16 at 390px), which is what read as
     unstandardized -- the back button sat closer to its edge than the flag did
     to its own, and neither lined up with the cards between them. */
  --kid-chrome-gutter: var(--s6);

  /* ONE centerline for the two top controls. They are different sizes (a kid's
     back button wants a bigger tap target than the shell's 38px pill), so
     matching their TOPS would still leave them visibly off. Both are centered on
     this line instead, derived from the corner control's own box: the shell
     component is the fixed point and the app chrome aligns to it. */
  --back-size: 56px;
  --kid-chrome-center: calc(
    env(safe-area-inset-top, 0px) + var(--kid-corner-top) + var(--kid-corner-h) / 2
  );
}
/* The tablet scale-up for the top row, in ONE place. Every other file's 768px
   block restates its own sizes; this one must not, because the pill, the flag,
   the reserved band and the back button's centre line are all calc()s off
   --kid-ident and they only stay in step if the tablet changes that. */
@media (min-width: 768px) {
  :root { --kid-ident: 64px; }
}
/* The white surface goes on the control itself. On the container it painted a
   bar across the whole screen, because the container is deliberately stretched
   edge to edge so the dropdown can clamp (see phone.css).
 *
 * ⚠️ THE SELECTOR IS LOAD-BEARING, not the values. The shell ships
 * `.nq-cc[data-face="lang"] .nq-cc-face-flag` — (0,3,0) — setting height:40px,
 * padding:0 12px, border-radius:999px. This file used to override at
 * `.kid-lang .nq-cc-face-flag`, (0,2,0), and lost SILENTLY: --kid-corner-h has
 * read 46px since 2026-07-30 while the pill rendered 40px beside the 46px kid
 * pill. Naming the shell's own selector plus .kid-lang makes it (0,4,0).
 * Anything added here must clear (0,3,0) or it does nothing and says nothing. */
.kid-lang .nq-cc[data-face="lang"] .nq-cc-face-flag,
.kid-lang .nq-langpill__btn {
  /* Opaque, not 0.92: at 0.92 the scene bled through and the two pills either
     side of the same header did not match — the exact note already on .ch-kid. */
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-card);
  height: var(--kid-corner-h);
  padding: 0 12px 0 10px;
}
/* The flag hexagon itself. `:not(.nq-cc-caret)` because the pill holds two
   SVGs — the flag the shell builds at size:24, then the caret. */
.kid-lang .nq-cc[data-face="lang"] .nq-cc-face-flag > svg:not(.nq-cc-caret) {
  width: var(--kid-lang-flag); height: auto;
}
/* The corner control lives on the HOME screen, and on login where a kid picks a
   language before anything else. It is position:fixed and was mounted once, so
   it used to follow you into every sub-screen -- a settings control riding along
   on the money screen, which the real wallet does not do either (its account
   screen carries back / search / stake, and nothing else). Sub-screens keep the
   kid's own identity; what they lose is the app's chrome. */
.kid-lang {
  position: fixed; z-index: 30; display: none;
  top: calc(var(--kid-chrome-center) - var(--kid-corner-h) / 2);
  right: var(--kid-chrome-gutter);
}
/* only `display` is scoped, so the phone layer's left/right still win */
body:has(#kid-app.chart-screen) .kid-lang,
body:has(#kid-app.login-screen) .kid-lang { display: flex; }