/* nimiq.kids kid app — the CONNECT screen (main.js showPairing), the one surface
   a tablet shows before it belongs to a household.

   Andjroo, 2026-07-31: "it doesn't match the rest of the branding", and the
   background should be "white simple ... not that gradient since that gradient
   is nowhere else."

   So this screen is the BRAND's page composition rather than the app's scene
   system: light body, one centred white card, generous air. Structure is the
   registry — .small-page + .page-header + .page-body — and the code entry is the
   Keyguard's `password-box`, the component Nimiq actually ships for "type your
   secret to get in". Nothing here is hand-drawn.

   The gradient did not just move, it CHANGED JOB. `bg-meadow` was a full-bleed
   scene behind everything, and a scene is something a kid picks for their own
   app once they are in it — nobody has picked anything at this point. The only
   saturated thing left is the light-blue action box, which is the brand's one
   calculated break: exactly one lit element per experience, and it sits on the
   single thing the screen is asking you to do. */

.k-connect-screen {
  /* The Nimiq page body. Not pure white: white is the CARD, and a white card on
     a white page has no page left. */
  background: #F8F8F8;

  /* Stand on top of the keyboard rather than under it. `.screen` is
     `position: fixed; inset: 0`, and iOS does NOT shrink the layout viewport when the
     software keyboard opens — so the screen kept its full height, the keyboard covered
     the bottom ~336px of it, and the Connect button sat 23px below the fold with
     `scrollHeight === clientHeight`, i.e. no scroll to recover it (#14). Raising the
     screen's own bottom edge hands the whole composition — the centring AND the
     `overflow-y: auto` on .k-connect — the height that is actually visible.

     `--k-kbd` is set from the VISUAL viewport by trackKeyboard() in main.js. `dvh`
     cannot stand in for it: dvh follows the URL bar, not the keyboard. It defaults to
     0px, so anything without a visual viewport renders exactly as before. */
  bottom: var(--k-kbd, 0px);
  transition: bottom 160ms var(--ease, ease);
}
@media (prefers-reduced-motion: reduce) {
  .k-connect-screen { transition: none; }
}
.k-connect {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

/* The registry's SmallPage is a fixed 420x564 desktop card. Same override the
   wallet sheets make: keep its surface and radius, let the width and height come
   from the content and the phone. */
.k-connect-card {
  width: 100%; max-width: 420px; height: auto; min-height: 0; margin: 0;
  display: flex; flex-direction: column;
}
.k-connect-card .page-header { text-align: center; padding-bottom: 0; }
.k-connect-card .page-body {
  display: flex; flex-direction: column; gap: 20px;
  overflow: visible; /* the box lifts its own input on .input-eligible */
}

/* The brand mark, alone. Rule 4: the hexagon never sits next to the horizontal
   logo, because that logo already contains it. This screen has no wordmark, so
   the hexagon IS the mark. */
.k-connect-hex { display: block; margin: 0 auto 20px; font-size: 40px; }
.k-connect-hex svg { width: 1em; height: auto; display: block; }

.k-connect-card .nq-h1 { margin: 0; text-align: center; text-wrap: balance; }
/* The instruction, in the brand's secondary ink. It is a real sentence, so it
   keeps its full stop — the no-period rule is for titles and CTAs (rule 16). */
.k-connect-sub {
  margin: 12px auto 0; max-width: 34ch;
  font-size: 17px; font-weight: 600; line-height: 1.4;
  color: rgba(31, 35, 72, 0.5); text-align: center; text-wrap: pretty;
}

/* The one lit element. The registry box is sized for Keyguard's 51rem card
   footer; here it fills the kid card. Its own padding/margins are upstream and
   are left alone. */
.k-connect-box { width: 100%; }
/* The prompt is the box's `.nq-text-s`: 14px, 600, white. White on the light end
   of the light-blue gradient (#0582CA) is 4.16:1 — under WCAG AA's 4.5 for
   normal text, which `nq lint` flags. Raising it to 19px/700 puts it over the
   large-text threshold (18.66px bold), where AA asks 3:1 and 4.16 clears it.
   It is also just the right size for a reader who is four: this line is the
   instruction, not a caption. */
.k-connect-box .prompt { font-size: 19px; font-weight: 700; }
/* A pair code is READ ALOUD, so the field is plain text, not a masked password,
   and there is no eye toggle to un-hide it. Upstream drops the wide tracking for
   type=text (0.25rem) because a typed password is a word; six digits are exactly
   what the wide tracking is for, so it is restored. */
.k-connect-box .password-input input[type="text"] { letter-spacing: 1.25rem; }
/* The tracking pushes the string right by one whole space; nudge it back so the
   digits sit ON the centre line rather than half a character past it.
   min-height is the TAP TARGET, not the type size: the registry input is 3rem of
   font with no height of its own, which measures 30px — fine for a desktop
   Keyguard, under the 44px floor for the fingers this app is built for. */
.k-connect-box .password-input input {
  text-indent: 1.25rem; min-height: 48px;
}

.k-connect-err { margin: 0; }

/* Tablet: the card grows with the screen, the composition does not change. */
@media (min-width: 768px) {
  .k-connect { padding: 40px 32px; }
  .k-connect-card { max-width: 520px; }
  .k-connect-hex { font-size: 60px; margin-bottom: 24px; }
  .k-connect-sub { font-size: 21px; margin-top: 16px; }
}

/* ---------- the roster: "Who are you?" (main.js showLogin) ----------
   The second screen before the app, and it is the SAME screen as the connect
   one now (Andjroo, 2026-07-31: the meadow gradient "needs to go ... I wanted to
   match the connect screen"). It reuses .k-connect / .k-connect-card outright
   rather than restating them, so the two cannot drift apart again.

   Rows are the registry `account-list` — the Hub's own AccountSelector, which
   asks this exact question. Two changes for a four-year-old, and only two:
   the identicon is BIG, because for a reader who cannot read, the picture IS
   the label; and the row keeps its caret visible instead of revealing it on
   hover, because a tablet has no hover to reveal it with. */
.k-roster-list { width: 100%; }

/* ---- a surface under every kid, at REST ----
   `account-list` paints nothing until you hover it, because upstream it lives in
   a Hub modal driven by a mouse. A tablet has no hover, so two kids read as two
   words on a white card with nothing saying they can be pressed (Andjroo,
   2026-08-01: "hard to see and only highlights once selected").

   The fix is the component's OWN picked-out fill, simply moved to the resting
   state — the same move this file already makes for the caret three rules down,
   and for the same reason. Nothing is invented and nothing is imported from
   another screen:

     rest   rgba(31,35,72,0.06)   account-list's `a.account-entry:hover`
     press  rgba(31,35,72,0.12)   `.nq-button-s:active` in nimiq-style

   An earlier pass reached for the wallet HOME's greys instead (page #F4F4F4,
   group #E7E7E9, row #DBDBDF) and it came out far too heavy (Andjroo: "too dark,
   it doesn't look like the actual wallet"). Those values are correct where they
   were measured and wrong here: the wallet steps DOWN from an already-grey page,
   about 13 per step, so a row is one step from its surroundings. Dropped onto a
   white card the same hex is nearly three steps from white, so the row shouted
   where the wallet murmurs. What carries across surfaces is the STEP, not the
   hex, and 6% navy is exactly that step from white.

   Radius, padding and margins stay the component's throughout. */
.k-roster-list .account-entry { background: rgba(31, 35, 72, 0.06); }
/* Only the fill is stated here. The press itself is the app's own — kid.css
   scales every tappable thing on :active with the shared spring, and this row is
   already in that list. */
.k-roster-list .account-entry:active { background: rgba(31, 35, 72, 0.12); }
.k-roster-list .identicon { width: 64px; height: 64px; flex: none; }
.k-roster-list .identicon img { width: 100%; height: 100%; }
.k-roster-list .identicon-and-label { gap: 16px; }
/* The component holds its label at opacity .7 and lifts it on :hover, and masks
   the tail so a long address fades. A kid's NAME is the whole point of this row,
   there is no hover to lift it with, and "Sam" never needs fading — so it reads
   at full ink. Selector depth matches the component's own (.account-list .label)
   or it loses; specificity, not source order, is what decides here. */
.account-list.k-roster-list .label {
  font-size: 24px; font-weight: 700; color: var(--navy);
  opacity: 1; mask-image: none; padding-left: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Same reason for the caret: upstream slides it in from translateX(3rem) on
   :hover, and a tablet has no hover, so it simply never arrived. It is parked
   in place and always visible, at the opacity the hover state would have given
   it (0.23), and the row's own press is the feedback. */
.account-list.k-roster-list .account-entry .caret {
  transform: none; opacity: 0.23; top: 50%; margin-top: -1rem; right: 2rem;
}
.account-list.k-roster-list a.account-entry:active .caret { opacity: 0.5; }

@media (min-width: 768px) {
  .k-roster-list .identicon { width: 84px; height: 84px; }
  .k-roster-list .label { font-size: 30px; }
  .k-roster-list .identicon-and-label { gap: 20px; }
}

/* ---- the switch gate (#123): a kid's secret pictures ---------------------------------
 * Same page composition as the roster above, because it is the same moment: the screen
 * between a tap and the app. The pictures are the whole interface. They are sized for a
 * four-year-old's finger first (the reference is the roster's identicons, not a keypad)
 * and the count is shown as dots rather than digits, since the reader cannot read. */
.k-secret-sub {
  margin: 0 0 16px; text-align: center; text-wrap: balance;
  color: var(--nq-neutral-800, #1f2348);
}
.k-secret-dots { display: flex; gap: 10px; justify-content: center; margin: 0 0 20px; }
.k-secret-dots i {
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(31, 35, 72, 0.14); transition: background 120ms ease, transform 120ms ease;
}
.k-secret-dots i.on { background: var(--nq-light-blue, #0582ca); transform: scale(1.15); }

.k-secret-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.k-secret-pic {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: clamp(28px, 9vw, 42px); line-height: 1;
  border: 0; border-radius: 16px; cursor: pointer;
  background: rgba(31, 35, 72, 0.06);
  transition: transform 100ms ease, background 100ms ease;
}
.k-secret-pic:active { transform: scale(0.92); background: rgba(31, 35, 72, 0.12); }
/* The drawn picture (assets/secret/*.png). The tile keeps its font-size above, because the
   emoji is still what renders when the art fails — .k-secret-face holds whichever arrived.
   The art is drawn on flat white and the tile is a light grey, so it needs its own white
   rounded plate or every picture sits in a visible pale square. */
.k-secret-face { display: grid; place-items: center; width: 100%; height: 100%; }
.k-secret-face img {
  width: 100%; height: 100%; display: block;
  border-radius: 16px; background: #fff;
}

.k-secret-msg {
  margin: 16px 0 0; text-align: center; text-wrap: balance;
  color: var(--nq-red, #d94432);
}
.k-secret-grown {
  display: block; margin: 20px auto 0;
  background: transparent; color: var(--nq-neutral-700, #5f6377);
}

@media (min-width: 480px) {
  .k-secret-grid { grid-template-columns: repeat(6, 1fr); }
}