/* ===========================================================================
   CHILD SCREENS — the per-child header the six tabs sit under, and the Time
   tab's locked-period editor.

   OWNED BY THE CHILD-SCREENS LANE: js/family-controls.js and
   js/child-settings.js. It is a separate file, and not more lines in app.css,
   for two reasons that are both about other people:

     1. app.css is the coordinator's single-writer file while this fanout runs.
        Several lanes edit this worktree at once and app.css is the one file
        they all otherwise collide in.
     2. app.css carries a 262-line VERBATIM-DUPLICATED region (DF-16: A
        3563-3869 == B 6491-6775) in which the LATER copy wins. It has already
        caused two no-op edits. A rule added to the wrong copy is silently dead.

   LOADED AFTER app.css (index.html), which is load-bearing: several rules here
   override an app.css rule of EQUAL specificity and win only on source order.
   Each of those says so where it sits.

   NO NEW CLASS NAMES ARE INVENTED HERE. zip-parity-family-controls.test.js
   asserts that every class js/family-controls.js names is declared in app.css,
   so the markup is built from `.avatar`/`.lg`, `.ov-who`, `.help`, `.sr-only`
   and `.child-headtop`, all of which app.css already defines. This file only
   changes their PLACEMENT inside `.fc-head`, and every selector below is
   scoped to `.fc-head` so nothing else that wears those classes moves.
   =========================================================================== */

/* ------------------------------------------------- the child identity header

   HER HEADER IS NOT A CARD. app.css's `.screen > .fc-head` (~line 7406) paints
   an indigo-tinted gradient, a 1px indigo border, a 4px indigo LEFT border,
   18px radius and 18/20px padding. On a child's own screen that reads as an
   ALERT above their name — indigo is this product's needs-attention colour
   (UI-DIRECTION §3, revised 2026-09-18), and nothing is wrong.

   MEASURED against her KidOverview export at 1512x982: hers is a flat
   1170x62.25 row (monogram, name, one muted line); ours was 1198x128.2. It is
   the first element on all six child tabs, so it is also the single most
   visible difference between this product and her artboards.

   DESKTOP ONLY, AND THAT IS AN OWNER DECISION, NOT A SHORTCUT.
   DECISIONS-2026-09-20 (second ruling): "her type scale is applied at >=900px
   only; below that the previous scale stands... hold her scale at desktop,
   keep the old scale narrow". Her artboards are all 1512px. MEASURED here the
   same way: with this header applied at every width, #fc-head-processes is
   161.4px tall at 375px against zip-parity-child-cluster's hard <=58px budget,
   and zip-parity-family-controls put the first device control 260px behind the
   phone dock. Below 900px this file therefore leaves the shipped header alone
   and only takes back the height the new nodes cost — see the narrow block. */
@media (min-width: 900px) {
  /* Same specificity as the rule it overrides (0,2,0) — wins on source order,
     exactly as app.css's own `.fc-head .ov-eyebrow` rule does to
     `.child-head .ov-eyebrow` a few hundred lines further down that file. */
  .screen > .fc-head {
    margin: 0 0 26px;            /* her 26px, measured off the export */
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    /* MONOGRAM | NAME-AND-META, with the crumb row spanning above both. app.css
       already gives `.ovhead:has(.ov-who)` a flex row with a 14px gap — her gap
       exactly — but `:has()` is not something to lean on for the primary layout
       of every child screen, so this states it outright. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* THE CRUMB ROW SPANS. It carries the "‹ Back to devices" link, the
     now-sr-only eyebrow and the online pill, and must sit ABOVE the monogram
     rather than beside it. */
  .screen > .fc-head > .child-headtop {
    flex: 0 0 100%;
    gap: 10px;
    margin-bottom: 2px;
  }

  /* Her crumb: 13px, semibold, slate. The chevron travels in the STRING
     (fc.backToDevices) rather than in a ::before, so it translates and mirrors
     with the text instead of being pinned left in an RTL locale. */
  .screen > .fc-head > .child-headtop > .btnlink {
    padding: 0;
    min-height: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
  }
  .screen > .fc-head > .child-headtop > .btnlink:hover { color: var(--text-primary); }

  /* app.css's `.child-headtop > .pill { margin-left: auto }` already puts the
     pill at the end of the row; this only stops it stretching now that the row
     is a 100%-basis flex item. */
  .screen > .fc-head > .child-headtop > .pill { flex: none; }

  /* Her monogram is a 44px circle. `.avatar.lg` is 46px — within a pixel and a
     half, and the size this product already ships. Reusing it beats inventing a
     third avatar size for a 2px difference. */
  .screen > .fc-head > .avatar { flex: 0 0 auto; align-self: center; }

  .screen > .fc-head > .ov-who { flex: 1 1 0; min-width: 0; }

  /* HER PER-CHILD H1 IS SMALLER THAN THE GLOBAL ONE, and that is a real spec
     difference rather than drift: her measured global h1 is 32/700 lh48
     ls-0.32 (the Home greeting); her per-child h1 is 26/700 lh39 ls-0.26. A
     child's name is an identity label under a crumb, not a page greeting. */
  .screen > .fc-head .ov-greet {
    font-size: 26px;
    line-height: 39px;
    letter-spacing: -.26px;
    margin: 0;
  }

  /* The one muted line under the name, and the scope sentence under that.
     `--text-tertiary` is the TEXT token: the owner-pinned `#8A93A3` lives on
     `--text-tertiary-ui`, its non-text twin, which must never paint glyphs
     (DECISIONS-2026-09-20, third ruling). */
  .screen > .fc-head .ov-who > .help,
  .screen > .fc-head .ov-who > .ov-sub {
    margin: 2px 0 0;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--text-tertiary);
  }

  /* The per-device breakdown the pill discloses is a full-width block under the
     crumb row, not a flex sibling of the monogram. */
  .screen > .fc-head > .fc-pillbreak { flex: 0 0 100%; order: 1; }
}

/* ---------------------------------------------------------- narrow widths

   BELOW 900px THE SHIPPED HEADER STANDS (owner ruling above), so this block
   adds no layout — it only takes back the height the three nodes paintHead()
   newly renders would otherwise cost, against a budget that is already tight:
   zip-parity-child-cluster asserts #fc-head-<tab> is <= 58px at 375px, and
   app.css's own 320-340px block documents what overflowing it does (the child
   subnav lands under the fixed dock, elementFromPoint returns <nav>, and a tap
   on the ONLY path to the other five tabs does nothing).

   NOTHING IS LOST RELATIVE TO WHAT SHIPS TODAY. The crumb and the meta line
   are both NEW; hiding them here leaves this header exactly as it is on the
   current build, and Devices remains one tap away in the phone dock, which is
   where a phone's navigation lives. Neither node is written into by JS as
   user-facing feedback — the crumb's label is a static string and the meta
   line is rebuilt wholesale by paintHead() on every paint — so this is a
   visibility change, not a silenced message.

   The eyebrow is NOT hidden here: paintHead() gives it `.sr-only`, so it stays
   in the accessibility tree at every width. app.css's
   `@media (max-width: 899px) { .fc-head .ov-eyebrow { display: block } }`
   still applies and is harmless — sr-only positions and clips rather than
   setting `display`. That rule exists because the header's title used to be
   the words "Family controls" and named no child; the title IS the child's
   name now, so the eyebrow is a redundant line here rather than the only
   statement of whose controls these are. */
@media (max-width: 899px) {
  .screen > .fc-head > .child-headtop > .btnlink,
  .screen > .fc-head > .avatar,
  .screen > .fc-head .ov-who > .help { display: none; }
}

/* ---------------------------------------------------- Time tab: locked periods

   Her KidTime draws the locked-period editor as an INSET PANEL — a raised
   surface with its own radius holding the name field, From/Until side by side,
   the day chips and the primary button — rather than as loose fields running
   the full width of the card. The inset is what makes it read as one object
   you are composing, which is the whole point of the screen.

   `--surface-raised` is the pinned token for exactly this (#F1F3F6 light /
   var(--dusk2) dark), and the border is the owner-pinned rgba(22,35,63,.16)
   via `--line` — a KNOWN, twice-confirmed WCAG 1.4.11 regression that is NOT
   to be "fixed" here.

   SELECTED STRUCTURALLY, WITH NO NEW CLASS. js/child-settings.js's
   scheduleForm() builds its container as `ctx.elem('div', null)` — it carries
   no class at all — and the class-vocabulary guards mean a new one cannot be
   introduced without also editing app.css, which belongs to the coordinator.
   `:has(> .timerow)` identifies it exactly: the From/Until row is unique to
   this form inside this mount. If `:has()` is ever unavailable the panel simply
   renders flat, which is what ships today — a graceful loss, which is why
   `:has()` is acceptable HERE and deliberately NOT used for the header layout
   above, where it would be the primary layout of every child screen. */
#schedulesMount .child-time-section > div:has(> .timerow) {
  margin: 14px 0 0;
  padding: 20px;               /* hers, measured off the export */
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-raised);
}

/* FROM AND UNTIL ARE ONE ROW IN HER ARTBOARD: two equal columns, each a label
   over its input. They are a PAIR — a locked period is meaningless with only
   one of them — and running them full width down the card made a four-field
   form read as four unrelated questions.

   A GRID RATHER THAN THE FLEX `.timerow` ALREADY HAS, because the DOM order is
   label, input, label, input — flex cannot put items 1 and 3 on one row above
   items 2 and 4. Explicit grid placement does, with no markup change.

   app.css's `.timerow label { flex: 1 }` never applied to this form: these
   labels are `<span class="fld">`, not `<label>`. That is the same
   span-not-label shape that made an earlier lane's probe report this form
   "MISSING IN LIVE" when it was plainly on screen. */
#schedulesMount .timerow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
}
#schedulesMount .timerow > .fld:nth-of-type(1)    { grid-area: 1 / 1; }
#schedulesMount .timerow > .fld:nth-of-type(2)    { grid-area: 1 / 2; }
#schedulesMount .timerow > .timein:nth-of-type(1) { grid-area: 2 / 1; }
#schedulesMount .timerow > .timein:nth-of-type(2) { grid-area: 2 / 2; }
#schedulesMount .timerow > .timein { width: 100%; margin-top: 0; }

/* Below 600px two half-width time inputs are narrower than a native time
   picker's own spinner controls, so the pair stacks rather than overflowing.
   This is the `flex-wrap: wrap` of the grid version, and it is load-bearing
   for the same measured reason wrapping is elsewhere in this product. */
@media (max-width: 599px) {
  #schedulesMount .timerow { grid-template-columns: minmax(0, 1fr); }
  #schedulesMount .timerow > .fld:nth-of-type(1)    { grid-area: 1 / 1; }
  #schedulesMount .timerow > .timein:nth-of-type(1) { grid-area: 2 / 1; }
  #schedulesMount .timerow > .fld:nth-of-type(2)    { grid-area: 3 / 1; }
  #schedulesMount .timerow > .timein:nth-of-type(2) { grid-area: 4 / 1; }
}