/* ═══════════════════════════════════════════════════════════════════════════
   CASE V03 + V04 — FIRST TOUCH
   V03 = „ვინ სწავლობს?" (the profile picker), V04 = „ახალი ბავშვი" (registration).
   The first screen a child ever sees and the first form a parent ever fills, so between them they
   make the app's promise before a single lesson gets the chance to. Everything here is scoped to
   .screen.home or .screen.ft-add: no other case can inherit it by accident.

   Loaded AFTER niko/styles.css in index.html, so it wins by source order and never needs
   !important. Where a base rule is (0,2,0) the override here is written at (0,2,0) or higher,
   never lower — a rule that loses the cascade is worse than no rule, because it looks intentional.
   ═══════════════════════════════════════════════════════════════════════════ */

/* .app pads itself with clamp(16px,4.5vw,22px). The illustrated band on V03 has to reach the
   physical edge of the phone, and the only honest way to do that from inside a padded column is
   to cancel exactly that padding. Naming the number once keeps the two from drifting apart.
   The vw term is viewport-relative, so it resolves identically here and on .app. */
.screen.home,.screen.ft-add{--ft-pad:clamp(16px,4.5vw,22px)}

/* ═══════════════ SHARED: the drawn portrait medallion ═══════════════
   §8.1 — the primary child-facing image on these two screens is ours, drawn in inline SVG
   (see ftFace/ftPortrait in niko/screens.js), never the phone's emoji font. The medallion is the
   stage: a CSS gradient in the child's own colour, with the light, the ground swell and the cast
   shadow painted inside the SVG on top of it.
   The element also keeps its `avatar a-<color>` classes so nothing that already queries them
   breaks; the box below simply outranks the base .avatar rules. */
.ft-med{position:relative;display:block;width:82px;height:82px;border-radius:30%;overflow:hidden;
  flex:0 0 auto;
  background:linear-gradient(168deg,color-mix(in oklch,var(--sky) 45%,#fff),var(--sky));
  box-shadow:0 9px 20px -12px rgba(42,28,18,.6),inset 0 0 0 1px rgba(255,255,255,.4)}
.ft-med>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ft-med.a-niko,.ft-med.a-sky{background:linear-gradient(168deg,color-mix(in oklch,var(--sky) 45%,#fff),var(--sky))}
.ft-med.a-primary{background:linear-gradient(168deg,color-mix(in oklch,var(--primary) 42%,#fff),var(--primary))}
.ft-med.a-green{background:linear-gradient(168deg,color-mix(in oklch,var(--green) 45%,#fff),var(--green))}
.ft-med.a-sun{background:linear-gradient(168deg,color-mix(in oklch,var(--sun) 55%,#fff),var(--sun))}
.ft-med.a-purple{background:linear-gradient(168deg,color-mix(in oklch,var(--purple) 42%,#fff),var(--purple))}

/* The scene SVG behind a band or a card. Never interactive: the tap belongs to what is on top. */
.ft-scene{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* ═══════════════ V03 — „ვინ სწავლობს?" ═══════════════ */

/* The illustrated sky band. It bleeds to both edges and to the top of the screen, which is what
   turns a header into a PLACE. Rounded only at the bottom, because the top edge is the phone. */
.screen.home .ft-sky{position:relative;overflow:hidden;
  margin:calc(var(--ft-pad) * -1) calc(var(--ft-pad) * -1) 18px;
  padding:calc(var(--ft-pad) + 10px) var(--ft-pad) 20px;
  border-radius:0 0 30px 30px;
  box-shadow:0 12px 26px -20px rgba(42,28,18,.55)}
.screen.home .ft-sky-in{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:8px;text-align:center}
.screen.home .ft-sky .brand{gap:6px}

/* owl-logo.png is one of the 28 real art files and it is the brand's own face, so the lockup uses
   the painting rather than a redraw. The radial behind it is a pool of light on the scene, not a
   badge: a filled tile here would read as a second object competing with the wordmark. */
.ft-owl{width:76px;height:76px;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.8),rgba(255,255,255,0) 70%)}
.ft-owl img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 7px 11px rgba(42,28,18,.24))}

.screen.home .ft-sky .mark{font-size:clamp(1.66rem,6.8vw,2.1rem);color:var(--world-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.6)}

/* The question is the one instruction on the screen, so it carries display weight and the world's
   ink colour instead of the muted grey a caption would get. The scene under it is light in every
   band (sky, haze, meadow), so dark ink clears AA against all of them. */
.screen.home .ft-ask{color:var(--world-ink);font-weight:700;font-family:var(--f-text);
  font-size:clamp(1.04rem,4.5vw,1.26rem);line-height:1.3;max-width:290px;
  text-shadow:0 1px 0 rgba(255,255,255,.62)}
.screen.home .ft-ask.tag-welcome{gap:3px;font-size:clamp(.94rem,4vw,1.08rem)}
.screen.home .ft-ask .tw-step{font-weight:600;opacity:.78}

/* ── the children ──
   A child card is a PORTRAIT, so the picture gets the room and the chrome gets out of the way. */
.screen.home .profile-grid{gap:14px}
.screen.home .pcard.ft-kid{padding:15px 12px 14px;gap:7px;border-radius:24px;
  border-color:color-mix(in oklch,var(--line) 65%,transparent);
  background:linear-gradient(178deg,color-mix(in oklch,var(--card) 88%,#fff),var(--card))}
.screen.home .pcard.ft-kid:active{transform:scale(.97)}
.screen.home .pcard.ft-kid .ft-med{margin-top:3px}
.screen.home .pcard.ft-kid .pname{font-size:1.04rem;font-weight:700;line-height:1.2;
  max-width:100%;overflow-wrap:anywhere}
.screen.home .pcard.ft-kid .page{font-size:.78rem;color:var(--muted);margin-top:-3px}
.screen.home .pcard.ft-kid .pmeta{font-size:.74rem}

/* ── the three actions ──
   Hierarchy, not decoration (§2.2): a first visitor needs to play, a returning parent needs to add
   a child, and nobody has ever arrived at this app wanting the settings drawer. So the parent row
   is deliberately the quietest object here and the only one without a filled tile. It keeps its
   full 44px+ target and its chevron; it just stops shouting. */
.screen.home .pcard.add,.screen.home .pcard.demo{border-radius:24px}
.screen.home .pcard.demo{padding:16px 15px}
.screen.home .pcard.add.add-wide{padding:16px 15px}
.screen.home .pcard.parent{padding:11px 14px;background:transparent;box-shadow:none;
  border-style:dashed;border-width:1.5px;border-color:color-mix(in oklch,var(--line) 80%,transparent)}
.screen.home .pcard.parent .avatar{width:34px;height:34px;border-radius:11px;
  background:color-mix(in oklch,var(--purple) 13%,var(--card));color:var(--purple-d)}
.screen.home .pcard.parent .avatar svg{width:17px;height:17px}
.screen.home .pcard.parent .pname{font-size:.9rem;font-weight:700;color:var(--muted)}
.screen.home .pcard.parent .lockwrap{margin-top:1px;font-size:.7rem}

.screen.home .trustline{margin-top:15px}

/* The add + parent rows used to be the last two cells of the SAME grid the children live in, which is
   why the screen worked at two children and failed at four: the family list is the only part of this
   page whose height is data, and everything below it was riding on top of that data. They are their own
   grid now (same columns, same gap, same order, so the picture is unchanged) and the list above them is
   what gives way. */
.screen.home .home-acts{margin-top:14px}

/* ── NB-205: a bigger family must not push the parent's own controls off the screen ──
   Measured before touching anything: at 360x640 the add card, the parent row and the privacy promise
   sat at 0/0/9% of the page's scroll with one child and at 48/59/70% with six. The promise a parent
   reads once, „მონაცემები ამ მოწყობილობაზე რჩება", was two thirds of a page away exactly when the
   family was biggest.
   The correction is structural, not cosmetic: `flex:0 1 auto` lets the LIST shrink and scroll while
   the rows under it keep their place. Nothing is pinned and nothing is forced above the fold, which
   is what he asked for. Note the shrink only ever happens when the content genuinely overflows, so
   three children on a tall phone still render exactly as they do today, centred and unscrolled. */
/* No `overflow` here on purpose. Making the screen its own scroller looks equivalent and is not: the
   band bleeds upward with `margin-top:calc(var(--ft-pad) * -1)` to reach the top edge of the phone, and
   a scroll container cannot scroll to content above its own origin, so at 320x568 the owl's head was
   silently cut off while the probe still read 0. Overflow stays with `.app`, which has always carried
   the padding that bleed is drawn into, so the worst case degrades to today's page scroll. */
/* `justify-content` is part of the fix, not housekeeping. `.home` centres its column, and a centred
   flex column that outgrows its box overflows EQUALLY at both ends: at 320x568 that put the top of the
   brand band 68px above the scroll origin, and a scroll container cannot reach content above its own
   origin, so the owl was not clipped, it was gone — while the probe read a clean 0 for all three
   anchors. Starting the column at the top is also what the band already asks for: it bleeds upward
   with a negative margin specifically to touch the top edge of the phone, which centring breaks in the
   other direction the moment the content DOES fit (a cream strip above the sky). Spare room now falls
   below the version line, where there is nothing to lose. */
.screen.home.home-fit{max-height:100%;min-height:0;justify-content:flex-start;padding-top:0}
/* padding-top:0 because `.home` adds 8px that the band's bleed does not cancel: the negative margin is
   sized to `--ft-pad` (the app's padding) alone. While the page always overflowed, centring hid this by
   pulling the band off the top anyway; with the column starting at the top the 8px became a visible
   cream strip above the sky. The band touches the top edge again, at every size. */
/* `.kid-list`, not `:not(.home-acts)`. The first grid also holds the DEMO card on a first visit, when
   there are no children at all, and a floor of one child-row under a single 90px demo card is 120px of
   dead space on the one screen a first visitor sees — a regression on an approved surface, introduced
   by the fix for a different one. The floor belongs to the thing whose height is family data, so the
   class is put on the grid only when it actually holds children. */
.screen.home.home-fit>.profile-grid.kid-list{
  flex:0 1 auto;min-height:210px;align-content:start;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* min-height is ONE WHOLE ROW PLUS A SLIVER OF THE NEXT, and both numbers are measured, not chosen:
   `node qa/_profiles.mjs` prints `row Npx` per family size and fails if the top row is ever sliced or
   a scrolling list ever shows a clean bottom edge. 210 = the 189px card plus the 14px gap plus 7px of
   the row below it. The first attempt used 132px, which was under the real row, and the result was
   worse than the bug being fixed: a family with a single child had that child's card sliced under the
   name, age and coins gone, while every number on the probe still read a clean 0. A row cut at the
   fold with more rows below it is an affordance that says „there is more"; a row cut with nothing
   below it is just damage, and a list that ends on a clean edge while four children sit under it is
   the same lie in the other direction.
   Because the floor is identical at every family size, the page height stops being a function of how
   many children a parent has — which is the actual thing he reported. And if a phone is so short that
   even this will not fit, the list stops shrinking and `.app` scrolls exactly as it does today:
   degrading to today's behaviour is acceptable, slicing a child's face is not. */
/* Everything that is NOT the list keeps its natural height. The band is the one that matters: its
   scene is an absolutely-positioned SVG inside `overflow:hidden`, so letting flexbox take height out
   of it does not scale the painting, it CROPS it, and the first measured pass rendered a beheaded owl
   while every number on the probe read zero. A green metric over a broken picture is the whole reason
   §6c exists. */
.screen.home.home-fit>.ft-sky,
.screen.home.home-fit>.trustline,
.screen.home.home-fit>.gate-foot,
.screen.home.home-fit>.profile-grid:not(.kid-list){flex:0 0 auto}

/* .app reserves 80px at the bottom for the tab bar, and this screen hides the tab bar (`render(…,false)`),
   so on the one screen that is short of vertical room that reservation is dead space. Only this screen
   is affected, and only where :has() is supported: an older browser simply keeps today's padding and a
   slightly shorter list. */
.app:has(>.screen.home.home-fit){padding-bottom:calc(18px + env(safe-area-inset-bottom))}

/* The brand moment earns its full size for a first visitor and a one-child family. It gives way in the
   two states where the screen is genuinely short of room: a parent with three or more children (who has
   met the owl many times), and a small phone (where the promise „მონაცემები ამ მოწყობილობაზე რჩება" was
   otherwise 133px below the fold with a SINGLE child — the reason this is keyed to viewport height and
   not only to child count). A 390x844 phone with one or two children sees no change at all. */
.screen.home.home-many .ft-owl{width:58px;height:58px}
.screen.home.home-many .mark{font-size:clamp(1.44rem,5.8vw,1.8rem)}
.screen.home.home-many .ft-sky{padding-bottom:14px;margin-bottom:12px}
/* A 189px portrait card on a 640px phone is a desktop proportion: measured, this screen spent 498 of
   640 pixels on everything that is not the family, leaving 142px for the family itself. That is the
   mobile-first finding, not a detail, so on a short phone the card is drawn smaller instead of the
   page being drawn longer. Nothing is removed — same portrait, same name, age and coins, same 44px+
   target. A 390x844 phone renders the approved card untouched. */
@media (max-height:700px){
  .screen.home.home-fit{gap:12px}
  .screen.home.home-fit .ft-sky{padding-bottom:11px;margin-bottom:9px}
  .screen.home.home-fit .ft-owl{width:48px;height:48px}
  .screen.home.home-fit .mark{font-size:clamp(1.32rem,5.2vw,1.56rem)}
  .screen.home.home-fit .gate-foot{margin-top:8px}
  .screen.home.home-fit .trustline{margin-top:6px}
  .screen.home.home-fit .pcard.ft-kid{padding:11px 10px 10px;gap:5px}
  .screen.home.home-fit .pcard.ft-kid .ft-med{width:62px;height:62px;margin-top:2px}
  .screen.home.home-fit .pcard.ft-kid .pname{font-size:.96rem}
  .screen.home.home-fit .pcard.ft-kid .page{font-size:.74rem}
  .screen.home.home-fit .pcard.ft-kid .pmeta{font-size:.71rem}
  /* The floor follows the card down. 188 = the tallest measured compressed card (168px, the narrow
     half-column one at 320 where the name and the coins line both wrap) plus the 14px gap and a
     6px sliver of the row beneath it. That sliver is not decoration: with the floor at exactly one
     row, a family of six showed two children and a clean bottom edge, so the list looked finished
     when four children were hidden under it. The floor is the same at every family size, so the
     page height stops being a function of how many children a parent has. */
  .screen.home.home-fit>.profile-grid.kid-list{min-height:188px}
}

/* ═══════════════ V04 — „ახალი ბავშვი" ═══════════════ */

.screen.ft-add{justify-content:flex-start}

/* Trust is the second thing the eye should meet, so it stays at the top. It is restyled to sit
   quietly INSIDE the page rather than being the loudest block on it: a parent reads a promise once
   and then wants to get on with naming their child. */
.screen.ft-add .consent-banner{margin:2px 0 14px;padding:11px 13px;border-radius:16px;
  font-size:.76rem;line-height:1.4;
  background:color-mix(in oklch,var(--green) 7%,var(--card));
  border-color:color-mix(in oklch,var(--green) 22%,var(--line))}

/* ── the hero: identity in progress, not a form header ── */
.ft-hero{position:relative;overflow:hidden;margin:2px 0 18px;padding:18px 16px 20px;
  border-radius:26px;box-shadow:0 14px 30px -22px rgba(42,28,18,.6),
  inset 0 0 0 1px rgba(255,255,255,.5)}
.ft-hero-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center}
.ft-hero .ft-med.ft-hero-med{width:112px;height:112px;border-radius:33%}
.ft-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.1em;color:var(--world-ink-soft)}

/* The name the parent is typing, shown at display size the moment it exists. min-height reserves
   the line so the whole card does not jump on the first keystroke, and the empty state shows a
   soft bar rather than a hole: it says "your name goes here" without needing a word to say it. */
.ft-heroname{font-family:var(--f-text);font-weight:700;line-height:1.2;color:var(--world-ink);
  font-size:clamp(1.2rem,5.4vw,1.5rem);min-height:1.35em;max-width:100%;
  overflow-wrap:anywhere;text-wrap:balance}
.ft-heroname:empty::before{content:'';display:block;width:104px;height:11px;border-radius:999px;
  margin:.45em auto 0;background:color-mix(in oklch,var(--world-ink) 13%,transparent)}

/* ── the fields ──
   Section labels lose the uppercase-grey tracking of a settings screen and gain a small colour
   tick, which gives the page rhythm at a glance without adding a single word. inline-block on the
   tick (not flex) because the ასაკი label has <b> and text siblings a flex row would space apart. */
.screen.ft-add .section-label{margin:16px 2px 8px;font-size:.95rem;font-weight:700;color:var(--ink);
  letter-spacing:.02em;text-transform:none}
.screen.ft-add .section-label::before{content:'';display:inline-block;vertical-align:-2px;
  width:5px;height:15px;margin-right:9px;border-radius:3px;
  background:color-mix(in oklch,var(--primary) 55%,var(--card))}
.screen.ft-add .lvl-hint{margin:9px 2px 0;font-size:.8rem;color:var(--muted);line-height:1.45}

.screen.ft-add .spell-input{padding:15px 16px;font-size:1.15rem;border-width:2px;
  border-radius:16px}
.screen.ft-add .spell-input:focus{border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in oklch,var(--primary) 13%,transparent)}

/* Ten ages, five to a row, on every phone width. The width is derived rather than fixed so the
   row cannot wrap to a ragged 5+3+2 on one device and 5+5 on another; the extra 1px of slack
   absorbs sub-pixel rounding. 52px clears the 48px floor that 46px never did. */
.screen.ft-add .age-row{gap:8px}
.screen.ft-add .age-chip{width:calc((100% - 33px) / 5);height:auto;min-height:52px;
  border-radius:16px;border-width:2px;font-size:1.14rem}
.screen.ft-add .age-chip.on{border-color:var(--primary-d);
  background:linear-gradient(160deg,var(--primary),var(--primary-d));
  box-shadow:0 7px 16px -9px var(--primary-d)}

.screen.ft-add .lang-row{gap:10px}
.screen.ft-add .lang-chip{flex:1 1 0;min-width:0;min-height:52px;padding:12px 10px;
  border-radius:16px;border-width:2px;font-size:.95rem}
.screen.ft-add .lang-chip.on{border-color:var(--sky-d);color:var(--sky-d);
  background:color-mix(in oklch,var(--sky) 16%,var(--card))}

/* The colour swatch is the one control on the page whose whole job is a colour, so „which one is
   chosen" must not be told by colour alone (§2.3). The ring says it and the drawn tick repeats it,
   and the tick is CSS the app owns, never something baked into a picture (§8.2). */
.screen.ft-add .color-row{gap:10px}
.screen.ft-add .color-dot{position:relative;width:calc((100% - 41px) / 5);height:52px;
  border-radius:18px;border-width:3px;box-shadow:0 7px 15px -10px rgba(42,28,18,.7)}
.screen.ft-add .color-dot.on{border-color:var(--ink);transform:none}
.screen.ft-add .color-dot.on::after{content:'';position:absolute;left:50%;top:50%;
  width:11px;height:20px;margin:-13px 0 0 -6px;transform:rotate(45deg);
  border:solid #fff;border-width:0 3.4px 3.4px 0;
  filter:drop-shadow(0 1px 2px rgba(42,28,18,.5))}

/* ── the character picker ──
   This is the avatar chooser, so each cell shows the animal DRAWN and gives it its name: an
   unlabelled grid of faces is a puzzle, a named face is somebody you adopt. Four across stays,
   and the cells stay short (~76px) on purpose — these are compact controls, not destinations, and
   a 4-track grid of tall tiles is exactly the cramped phone layout the geometry rule forbids. */
.screen.ft-add .tutor-grid{gap:9px;margin:4px 0 0}
.screen.ft-add .tutor-pick{min-height:0;padding:7px 3px 6px;gap:2px;border-radius:18px;
  border-width:2px;
  background:linear-gradient(178deg,color-mix(in oklch,var(--card) 90%,#fff),var(--card))}
.screen.ft-add .tp-face{display:block;width:100%;max-width:46px;height:auto;aspect-ratio:1;
  margin:0 auto}
.screen.ft-add .tp-name{font-size:.6rem;font-weight:700;line-height:1.15;color:var(--muted);
  white-space:nowrap}
.screen.ft-add .tutor-pick.on{transform:none;border-color:var(--primary);
  background:linear-gradient(178deg,color-mix(in oklch,var(--primary) 15%,var(--card)),
    color-mix(in oklch,var(--primary) 6%,var(--card)));
  box-shadow:0 9px 18px -12px var(--primary-d)}
.screen.ft-add .tutor-pick.on .tp-name{color:var(--primary-d)}

/* The last tap on the screen should feel like a door opening, so it is the heaviest object on the
   page and carries a chevron: the button says what happens, the arrow says that something happens. */
.btn.ft-cta{display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;
  border-radius:18px;font-size:1.06rem;
  background:linear-gradient(140deg,var(--primary),var(--primary-d));
  box-shadow:0 13px 26px -14px var(--primary-d)}
.btn.ft-cta svg{width:19px;height:19px;flex:0 0 auto}
.btn.ft-cta:active{transform:scale(.985)}
.screen.ft-add .consent-mini{margin-top:11px}