/* Household Usage — "Kids Usage" and its per-child report.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * SCOPE, AND THE BUG THAT LIVED IN IT (fixed 2026-09-20, owner item L9)
 *
 * Every rule below used to be scoped to `#householdUsage`. THERE IS NO SUCH
 * ELEMENT. The module mounts into `#householdUsageMount` — index.html's div
 * inside #devicePanelStatus — and `grep -rn 'id="householdUsage"'` across
 * public/ returns nothing. So this entire stylesheet had never applied in a
 * browser: measured live on the real server with computed styles, `.husage-card`
 * was `display: block; gap: normal` (the flex-column rule below never ran) and
 * `.husage-status-note` rendered in plain `--haze` grey instead of the
 * `--waiting-text` amber it asks for.
 *
 * The ONE part that did work is the chart block, because it is dual-scoped and
 * its `#overview` half is real. That sharing is deliberate and is preserved
 * verbatim below — see its own note.
 * ────────────────────────────────────────────────────────────────────────────
 *
 * ────────────────────────────────────────────────────────────────────────────
 * 2026-09-20, SECOND PASS — "the kids usage card is still totally strange
 * looking vs the mockup styles of things" (owner, on the live site, after the
 * scope fix above had already landed).
 *
 * Measured, not guessed: `.scratch/kids-usage-lane/before/*` renders this
 * section on a real server against a real three-child fixture (no-devices /
 * ok-with-data / no-data). What that showed, against the BINDING 2026-09-16
 * handoff's own "Today at a glance" card (Home.dc.html, unescaped):
 *
 *   OURS (before)                          HERS
 *   grey #F1F3F6 slab, no shadow           #FFFFFF, 22px radius, 0 1px 2px +
 *                                          0 6px 18px navy — which is exactly
 *                                          what a bare `.card` already renders
 *                                          in light (`--shadow` == her two
 *                                          layers, byte for byte)
 *   full-bleed 1140px, stacked 1-up        a bounded glance card
 *   name = h3.sect, 16.5px/800 + a ~1000px  15px/800, plain, no rule
 *   trailing hairline (the SECTION
 *   heading treatment, on a child's name)
 *   two 263x85 white stat tiles floating   a 12.5px label/value ROW; the metric
 *   in a 1094px row, value 20px/750 —      reads SMALLER than the child's name,
 *   the metric shouting over the name      not louder
 *   "View X's report" = 1094x45 bordered   a 13px/700 inline link with a
 *   empty box that reads as a disabled     trailing arrow, natural width
 *   text input
 *
 * The single largest fix in here is a DELETION: the grey `--surface-raised`
 * fill and `box-shadow: none` were the only two declarations standing between
 * `.husage-card` and her card. They were added when this stylesheet was first
 * made real, to separate a nested card from the white `.card` panel it sat on
 * — but `#devicePanelStatus` is `background: transparent; border: 0;
 * box-shadow: none` (app.css, "the inventory is a record list, not nested
 * cards"), so there is no white-on-white to fix any more.
 *
 * NEIGHBOUR CHECK, because matching her artboard while clashing with the rows
 * directly above is still "strange looking": the device inventory above this
 * section is `width: min(100%, 1120px); margin: 10px auto 0`. The card grid
 * below takes the same bounded, centred 1120px column, so the two line up on
 * both edges instead of this section sitting 10px proud of every row above it.
 * ────────────────────────────────────────────────────────────────────────────
 *
 * Every color is a shared token from app.css so this section stays correct in
 * both themes without redefining anything here. Light is the default theme.
 * Borders use `--line` / `--border-subtle` as they are: the
 * rgba(22,35,63,.16) value is a pinned owner-accepted decision, not a bug to
 * fix from in here.
 */

/* ───────────────────────────────── the section, not a second screen ──────── */

/* Kids Usage is a SECTION OF MY DEVICES, mounted below the device inventory
 * (docs/design/PARENT-PORTAL-IA-2026-09-15.md). js/household-usage.js used to
 * paint a full page header here — `.ovhead` + `.ov-eyebrow "Household"` +
 * `h1.ov-title` — directly under the screen's OWN identical header
 * (index.html:1126-1129, eyebrow "Household" + h1 "My Devices"), so one screen
 * carried two screen headers and the lower one read as bolted on. It now
 * renders `h2.sect`, the same heading-plus-trailing-rule vocabulary
 * "Paired devices" uses a few hundred pixels above it.
 *
 * What is left for this file is the SEAM: a section needs more air above it
 * than the rows it follows, or it reads as the tail of the device list. */
#householdUsageMount {
  display: block;
  margin-top: 26px;
}

#householdUsageMount > .husage-sect {
  margin-top: 0;
  margin-bottom: 8px;
}

/* The section lede and the timezone note are one stacked block, not two
 * floating lines. `.help` is already left-aligned 12px; this only tightens the
 * gap between them so they read as a single caption under the heading. */
#householdUsageMount > .husage-sub {
  margin: 0 2px 4px;
}

/* THE TIMEZONE SENTENCE IS A CONTEXTUAL NOTICE, NOT BODY COPY (owner,
 * 2026-09-21: "The timezone warning is also dumped into body copy instead of
 * being handled as a contextual notice"). Same element, same translated
 * sentence, same position under the lede — it now reads as a compact chip on
 * the portal's `--surface-raised` fill at `--radius-pill`, the shape this
 * portal already uses for small inline context, sized to its own text.
 *
 * NO "Set household timezone" LINK, deliberately: PUT /api/account/timezone
 * exists (owner-only) but no portal screen calls it, so the link would have
 * nowhere to go. A dead action is worse than none.
 *
 * `display` IS SET ON AN ELEMENT JS WRITES INTO (household-usage.js
 * timezoneNote(): `note.textContent = ...`) — the ed3eaf68 bug shape. It is
 * `flex`, never `none`/hidden, and the sentence was checked visible by hand in
 * both the summary and the per-child report, which renders the same note. */
#householdUsageMount .husage-tz-note {
  display: flex;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 2px 14px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  color: var(--text-secondary, var(--haze));
}

/* ───────────────────────────────────────────────── the per-child cards ──── */

/* THE COLUMN THE DEVICE ROWS ABOVE ALREADY USE.
 *
 * app.css: `#devices .devgroup { width: min(100%, 1120px); margin: 10px auto 0 }`
 * inside a 1140px panel. Measured before this pass, every Kids Usage card sat
 * at x=258 while every device row above sat at x=268 — ten pixels of
 * misalignment down one edge of the same screen, which is a cheap way to make
 * a section read as bolted on.
 *
 * `minmax(min(100%, 380px), 1fr)` gives two ~552px cards side by side on the
 * 1120px desktop column and one full-width card at 390px, and `min(100%, ...)`
 * (not a bare 380px) is what stops the track overflowing a viewport narrower
 * than the minimum. `align-items: start` because a device-less child's card is
 * GENUINELY shorter than a reporting child's — stretching them to match would
 * pad the honest empty state out to look like it was hiding something.
 *
 * AUTO-FIT, NOT AUTO-FILL (2026-09-21). OWNER: "another single card stranded
 * in a layout that reserves an empty second column ... A one-child household
 * must not leave an empty card slot." MEASURED on the real page, real
 * one-child household, 1440px: `auto-fill` resolved to TWO 552px tracks with
 * ONE card in them — a 568px empty right half. `auto-fill` keeps every track
 * that fits whether or not an item exists for it; `auto-fit` collapses the
 * empty ones to zero, so the `1fr` card(s) take the row. With 2+ children the
 * two are identical (every track has a card), which is why the pinned
 * two-per-row layout in kids-usage-card-shape.test.js is unaffected. */
#householdUsageMount .husage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 16px;
  align-items: start;
  width: min(100%, 1120px);
  margin: 0 auto;
}

/* The one-child household, said explicitly rather than left to the track
 * arithmetic above: ONE column, the full bounded width, so the solo panel
 * lines up edge-for-edge with the device rows above it. */
#householdUsageMount .husage-cards.husage-cards-solo {
  grid-template-columns: minmax(0, 1fr);
}

/* HER CARD IS OUR `.card` — this rule's job is to stop overriding it.
 *
 * `.card` in light already renders #FFFFFF, `--radius` 22px, 22px padding and
 * `--shadow` (0 1px 2px rgba(22,35,63,.03), 0 6px 18px rgba(22,35,63,.04)) —
 * her glance card's shadow, byte for byte, because that token was taken from
 * this same handoff. So NO background, NO box-shadow and NO radius is set
 * here on purpose: every one of them would be a local copy of a shared token
 * that can silently drift from it.
 *
 * `margin: 0` because `.husage-cards`'s grid `gap` owns the spacing now;
 * `.card`'s own `margin-bottom: 16px` would compound with it.
 *
 * `gap: 8px` is hers: 8px between the sentence and the action in her
 * no-device card. */
#householdUsageMount .husage-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

/* Her name row: a 32px avatar, 12px gap, 14px of air under it. `.cardhead`'s
 * own `gap: 8px` and the card's 8px gap add to that 14px exactly (6 + 8). */
#householdUsageMount .husage-card > .cardhead {
  gap: 12px;
  margin: 0 0 6px;
}

/* Her avatar is 32px/13px; `.avatar`'s default is 36px/13px. Size only — the
 * per-child gradient tone is a GLOBAL system keyed to profileId (app.css
 * `.avatar[data-tone]`), and recolouring it here would make the same child a
 * different colour on this screen than on every other one. */
#householdUsageMount .husage-card .avatar {
  width: 32px;
  height: 32px;
  font-size: 13px;
}

/* A CHILD'S NAME IS NOT A SECTION HEADING. It was rendering as `h3.sect`,
 * which since the re-skin is 16.5px/800 PLUS `.sect::after` — a ~1000px
 * hairline ruled out from the name to the far edge of the card, the same
 * treatment "Paired devices" and "Kids Usage" itself use. Three section
 * headings inside one section is why the stack read as unplaced boxes.
 * Hers: 15px/800 Nunito, plain. The element stays an <h3> for the document
 * outline; only the presentation changes.
 *
 * NO `white-space: nowrap` / ellipsis: a child's name is never truncated. It
 * WRAPS instead, mid-word if it has to — `overflow-wrap: anywhere`, the same
 * rule app.css already gives `.arow .an`, `.pickrow .an` and `.reqhead .an`
 * for the same reason. That is not cosmetic. MAX_DISPLAY_NAME_LEN is 60
 * (platform/src/accounts.js), a parent may legally name a child 60 characters
 * with no space in them, and MEASURED on a real render at 390x844 such a name
 * pushed the card to 559px inside a 370px column and turned the whole page
 * into a 179px horizontal scroller — every screen, not just this section.
 * PRE-EXISTING, and measured as such against 7eb9d482~1, where the identical
 * name produced a 273px scroller; this pass narrowed it and this line closes
 * it. `min-width: 0` alone does not: it lets the flex item shrink, but an
 * unbreakable word still refuses to.
 *
 * `flex: 1 1 auto` replaces `.cardhead > .sect { flex: 1 }`, which stopped
 * applying with the class. */
#householdUsageMount .husage-card > .cardhead > .husage-name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: normal;
  color: var(--text-primary, var(--cloud));
}

/* ─────────────────────────────────────────── data freshness, in the header ─*/

/* OWNER, 2026-09-21: "the most important fact may be that the data is five
 * days old, but it appears as low-emphasis text." It was a 12.5px grey line
 * under everything else. It is now a pill beside the child's name, and the
 * pill is the portal's OWN `.pill` (app.css): `.pill.neutral` when the data is
 * fresh, `.pill.wait` — amber, the WAITING meaning — when a device has gone
 * quiet. Nothing here sets a colour: both are the shared, AA-checked,
 * theme-aware rules, so this cannot drift into a sixth colour meaning.
 *
 * WHAT IS LOCAL is only the fit. `.pill` is `white-space: nowrap; flex: none`,
 * which is right for a one-word status but not for "Dernière mise à jour il y
 * a 5 jours" at 320px: it would take the whole row and crush the child's name
 * to a sliver breaking one letter per line. So the header row may WRAP, the
 * pill may wrap its own words, and the name keeps a floor (`7em`, or the whole
 * row if that is less) before the pill is allowed to squeeze it — past that,
 * the pill drops to its own line instead. The name keeps `min-width: 0` +
 * `overflow-wrap: anywhere` above, so the 60-character-name guarantee holds. */
#householdUsageMount .husage-card > .cardhead {
  flex-wrap: wrap;
  row-gap: 6px;
}

#householdUsageMount .husage-card > .cardhead > .husage-name {
  min-width: min(100%, 7em);
}

#householdUsageMount .husage-card > .cardhead > .husage-fresh {
  flex: 0 1 auto;
  max-width: 100%;
  white-space: normal;
  line-height: 1.35;
}

/* ─────────────────────────────────────────── the metric rows, not tiles ────*/

/* HER METRIC IS A LABEL/VALUE ROW, NOT A STAT TILE.
 *
 * `.ovtiles`/`.ovtile` is the Overview's big-figure vocabulary: a
 * `minmax(180px, 1fr)` grid of filled, bordered, shadowed boxes with an
 * 11px uppercase key over a 20px/750 value. Measured in the 1094px card that
 * produced two 263x85 boxes and ~560px of empty grey beside them, with the
 * number shouting twice as loud as the child's name above it. In her card the
 * metric line is 12.5px — SMALLER than the 15px name — and carries no box at
 * all.
 *
 * SCOPED TO `.husage-card` deliberately: the per-child drill-down report
 * further down this file keeps the full-size tiles, where a big figure is the
 * point of the screen. The class names `.ovtiles`/`.ovtile`/`.ovt-k`/`.ovt-v`
 * are kept exactly as they are — three tests read `.ovt-v` for the rendered
 * duration strings, and this is a presentation change, not a markup one. */
#householdUsageMount .husage-card .husage-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0;
}

#householdUsageMount .husage-card .husage-tiles .ovtile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#householdUsageMount .husage-card .husage-tiles .ovt-k {
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--haze);
}

#householdUsageMount .husage-card .husage-tiles .ovt-v {
  margin-top: 0;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  text-align: right;
  color: var(--text-primary, var(--cloud));
}

/* ───────────────────────────────────────── facts, and the .muted override ──*/

/* `.muted` (app.css) is `text-align: center; padding: 10px 0` — correct for
 * the standalone one-line status elements it was written for (#devMsg), wrong
 * for a label/value line inside a left-aligned card. These lines keep `.muted`
 * for its colour, and for the honest fallback if this stylesheet ever fails to
 * load again; the alignment and the doubled padding are corrected here rather
 * than by dropping the class.
 *
 * ONE RHYTHM PER CARD. These two lines used to be the inverse of the tiles
 * above them — a BOLD muted label with a plain value, while the tile had a
 * muted key with a bold value. Same card, two opposite emphases. They now
 * match the metric rows exactly, so a parent reads four lines of one shape
 * instead of two lines of two shapes. */
#householdUsageMount .husage-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#householdUsageMount .husage-fact {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: left;
}

/* THE LABEL DOES NOT SHRINK; THE VALUE DOES. Both halves of this row are
 * flex items, and a flex item's default `flex-shrink: 1` applies to the LABEL
 * too. MEASURED at 320x568 (iPhone SE) with a long hostname on the right:
 * "Most-visited site" was squeezed into three stacked fragments — "Most-" /
 * "visited" / "site" — beside the wrapping value, which is three lines of
 * chrome to read one fact. The longest of these labels across en/es/fr is
 * ~106px against 256px of card interior at 320px, so refusing to shrink the
 * label always leaves the value room to wrap into; it is the value that is
 * unbounded (a hostname), not the label. */
#householdUsageMount .husage-fact-k {
  flex: 0 0 auto;
  font-weight: 400;
  color: var(--haze);
}

/* `overflow-wrap: anywhere` — the value here can be a HOSTNAME, and a hostname
 * is one unbreakable word. `.ask-setting` in app.css carries the same rule for
 * the same reason; without it a long host is what turns a 380px card into a
 * horizontal scroller. */
#householdUsageMount .husage-fact-v {
  min-width: 0;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
  color: var(--text-primary, var(--cloud));
}

/* (`.husage-last`, the old "Last report X" footnote, is gone: freshness is the
 * header pill now — see "data freshness, in the header" above. Its rules went
 * with it rather than staying as selectors that match nothing, which is how
 * this file once carried a whole stylesheet that never applied.) */
#householdUsageMount .husage-status-note {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Attention text — a child with no device or no data yet is not an error, but
 * it is a fact worth a parent's eye, so it borrows the same amber
 * "needs attention" token every other waiting-for-parent state on this portal
 * already uses (never mint, which means healthy/applied, and never coral,
 * which means destructive/paused — neither is true here).
 *
 * THIS RULE HAD NEVER APPLIED before the scope fix above: the sentence was
 * shipping in plain grey, which is precisely the honesty signal this product
 * cannot afford to lose. Measured live: rgb(91,100,114) before, --waiting-text
 * after.
 *
 * KEPT AMBER ON PURPOSE in the 2026-09-20 pass, although her card's
 * equivalent sentence is plain grey: in HER card the status is carried by a
 * separate pill in the name row ("No device yet"), which we deliberately do
 * not render — we have no limit to judge "On track" against. This sentence IS
 * our status. Greying it to match her would delete a signal rather than
 * restyle one. */
#householdUsageMount .husage-status-note {
  line-height: 1.45;
  color: var(--waiting-text);
  font-weight: 600;
}

/* ──────────────────────────────────────────── the one-child usage panel ────*/

/* OWNER, 2026-09-21, recommended composition for ONE child: "let the
 * visualization use the full available width. A good desktop composition
 * would be a chart occupying roughly two-thirds of the panel with summary
 * information in the remaining third ... On tablet and mobile, stack the
 * visualization and supporting summary intentionally."
 *
 * A CONTAINER QUERY, NOT A VIEWPORT ONE: the panel's real width depends on the
 * nav rail beside it, not on the window. Measured on the real page, the card
 * is 1120px wide at a 1440 viewport but only 724px at 1024 and 740px at 768,
 * because the rail and the panel's own padding take the rest. 760px of CARD
 * CONTENT is where a 2:1 split still leaves the summary third ~250px — enough
 * for "Most-visited site" plus a value without either fragmenting (see the
 * `.husage-fact-k` rule above for that exact failure at 320px). Below it the
 * two stack: chart first, summary under it. app.css already uses container
 * queries, so this is not a new mechanism for the portal. */
#householdUsageMount .husage-card.husage-solo {
  container-type: inline-size;
  container-name: husage-panel;
}

#householdUsageMount .husage-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

#householdUsageMount .husage-panel-chart,
#householdUsageMount .husage-panel-summary {
  min-width: 0;
}

/* The summary third keeps the compact card's own column rhythm (8px), so the
 * tiles/facts/link read exactly as they do in a multi-child card. A hairline
 * separates it from the chart — ABOVE it when stacked, BESIDE it when split —
 * on `--border-subtle`, the same token the card's own edge uses. */
#householdUsageMount .husage-panel-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle, var(--line));
}

@container husage-panel (min-width: 760px) {
  #householdUsageMount .husage-panel {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  #householdUsageMount .husage-panel-summary {
    padding-top: 0;
    padding-left: 28px;
    border-top: 0;
    border-left: 1px solid var(--border-subtle, var(--line));
  }
}

/* THE TABLET BAND, STACKED BUT STILL PAIRED. Between 520px and the split
 * above, the chart sits on top and the summary runs the FULL card width —
 * which left a label at the far left and its value at the far right of a
 * ~700px row, three rows deep. The rows pair up into two columns instead
 * (durations beside facts, the action under both), so a label and its number
 * stay within reading distance of each other. Below 520px they go back to one
 * column: on a phone a single column IS the intentional stack. */
@container husage-panel (min-width: 520px) and (max-width: 759px) {
  #householdUsageMount .husage-panel-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 28px;
    align-items: start;
  }
  #householdUsageMount .husage-panel-summary > .husage-report-btn {
    grid-column: 1 / -1;
  }
}

/* The chart's range label. The report prints the same string as an `h3.sect`
 * section heading; INSIDE a card that treatment is the one this file already
 * took off the child's name (a trailing hairline ruled across the card). So
 * it is the card's own 12.5px label weight instead — the `.ovt-k` rhythm. */
#householdUsageMount .husage-panel-title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: normal;
  color: var(--text-secondary, var(--haze));
}

/* THE INTENTIONAL EMPTY CHART STATE. It sits in the chart's own footprint (the
 * chart is 120px + its 8px top padding) so a week with nothing to draw reads as
 * a deliberate answer IN THE CHART'S PLACE, not as a chart that failed to load
 * or a gap where one should be. Dashed `--line` border + `--surface-raised`
 * fill: the two tokens this portal already uses for an empty track (the
 * Overview's `.ovbar`). Left-aligned, like every other card body here. */
#householdUsageMount .husage-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-height: 128px;
  box-sizing: border-box;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--surface-raised);
}

#householdUsageMount .husage-empty-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text-primary, var(--cloud));
}

#householdUsageMount .husage-empty-text {
  margin: 0;
  max-width: 60ch;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: left;
  color: var(--text-secondary, var(--haze));
}

/* The `no-data` sentence keeps its amber WAITING treatment inside the empty
 * state too. Needed explicitly: `.husage-empty-text` comes later in this file
 * at the same specificity as `.husage-status-note`, so without this the pinned
 * sentence would silently lose its colour the moment it moved into the panel. */
#householdUsageMount .husage-empty-text.husage-status-note {
  color: var(--waiting-text);
  font-weight: 600;
}

/* The chart's honesty footnote, under a chart that has blank days. */
#householdUsageMount .husage-chart-note {
  margin: 8px 0 0;
  text-align: left;
}

/* ──────────────────────────────────────────────────── the report action ────*/

/* AN INLINE LINK, NOT A FULL-WIDTH EMPTY BOX.
 *
 * This shipped as `ghost wide`, which is the portal's block-button vocabulary
 * (`#startGet`'s shape): `.ghost` = 1px --line border on four sides + 12/14
 * padding + 44px min-height, `.wide` = width 100%. Measured at 1094x45 with a
 * centred 14px label and nothing else inside it — the owner's "totally strange
 * looking" is in large part this: on a white card an empty full-width bordered
 * box reads as a DISABLED TEXT INPUT, not as an action.
 *
 * Hers is a 13px/700 inline link at natural width with a trailing arrow, so
 * that is what this is. The `ghost wide` classes are dropped at source in
 * js/household-usage.js rather than fought with overrides here; what is left
 * is only undoing the base `button` rule (pill radius) and setting her type.
 *
 * THE ARROW IS A CSS `::after`, NOT PART OF THE LABEL, and it has to stay
 * that way: test/household-usage-ui.test.js's `findButton()` matches
 * `button.textContent === label` EXACTLY, and five tests go through it.
 * Appending "→" to the translated string breaks all five, and that file is
 * not this lane's to edit. The arrow is decorative — the label already says
 * where the button goes — so it is correct to keep it out of the accessible
 * name as well.
 *
 * The negative margin plus the padding is a deliberate pair: it buys a ~32px
 * pointer target (WCAG 2.5.8 wants 24px) without moving the text's baseline
 * away from her 8px gap. This is SMALLER than `.ghost`'s 44px, matching her
 * design; it is a link inside a card, not a primary control, and it is not
 * inside the app shell that test/portal-shell-a11y.test.js holds to 44px. */
#householdUsageMount .husage-report-btn,
#householdUsageMount .husage-status-link {
  align-self: flex-start;
  width: auto;
  /* `width: auto` on a flex item sizes to MAX-CONTENT, and this label
   * interpolates the child's name — `husage.viewReport` is "View {child}'s
   * report". MAX_DISPLAY_NAME_LEN is 60 (platform/src/accounts.js), so a
   * parent may legally produce a 60-character unbreakable word inside this
   * button's own text. MEASURED at 390x844 with exactly that name: the card
   * grew to 466px inside a 370px column and the page became an 86px
   * horizontal scroller — on every screen, because a shrink-to-fit ancestor
   * carries it up. `max-width: 100%` stops it growing past its track and
   * `overflow-wrap: anywhere` lets the word break rather than push. The old
   * `.ghost.wide` shape hid half of this behind `width: 100%`; the inline
   * link cannot, so it has to say so.
   *
   * NOT truncation: the label still reads in full, on as many lines as it
   * needs. A parent is never shown a child's name with the end cut off. */
  max-width: 100%;
  overflow-wrap: anywhere;
  min-height: 0;
  margin: -3px 0 0 -4px;
  padding: 7px 4px;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  color: var(--glow);
  cursor: pointer;
}

#householdUsageMount .husage-report-btn::after {
  content: " \2192";
}

/* "View device status" scrolls UP to the paired-device list directly above this
 * section, so its arrow points up. Decorative, like the report link's: the
 * label already says where it goes, and the arrow stays out of the name. */
#householdUsageMount .husage-status-link::after {
  content: " \2191";
}

#householdUsageMount .husage-report-btn:hover,
#householdUsageMount .husage-status-link:hover {
  text-decoration: underline;
}

#householdUsageMount .husage-report-btn:focus-visible,
#householdUsageMount .husage-status-link:focus-visible {
  outline: 2px solid var(--glow);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────── the report drill-down ─*/

/* The per-child report's own cards are plain `.card`s on a transparent panel
 * — the same white-with-her-shadow treatment the summary cards above now get.
 * They used to be forced to `--surface-raised` with `box-shadow: none` for the
 * nested-card problem described at the top of this file, which no longer
 * exists. */

/* The back control is a section-level action, not a full-width block button. */
#householdUsageMount > .ghost:first-child {
  width: auto;
  margin: 0 0 12px;
}

/* ───────────────────────────────────────────────────────────── the chart ───*/

/* A minimal, dependency-free bar chart for the per-child time series. Bars use
 * --glow (the trusted/primary accent) because this is neutral reported
 * information, not a status judgement.
 *
 * SHARED WITH #overview (GoodQA round-1332, "bring the mockup's weekly chart to
 * Overview"): js/overview.js's weeklyCard() reuses this exact markup/class
 * contract rather than a second stylesheet, so the two screens' charts cannot
 * drift into two different looks for the same data shape. household-usage.js
 * remains the only place that FETCHES the series; overview.js just renders it
 * through the same classes.
 *
 * NOTE: the `#overview` half of this block is the ONLY part of this file that
 * was ever live before 2026-09-20 — the `#householdUsage` half never matched
 * anything, so the report's own chart rendered as undistinguished stacked divs.
 * Both halves are now real. */
#householdUsageMount .husage-chart,
#overview .husage-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding: 8px 4px 0;
  border-bottom: 1px solid var(--line);
}

#householdUsageMount .husage-chart-col,
#overview .husage-chart-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 4px;
}

#householdUsageMount .husage-chart-bar,
#overview .husage-chart-bar {
  width: 100%;
  max-width: 28px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--glow);
}

#householdUsageMount .husage-chart-label,
#overview .husage-chart-label {
  font-size: 0.72em;
  color: var(--haze);
  white-space: nowrap;
}

/* A DAY NOBODY REPORTED IS BLANK, NOT A ZERO BAR (2026-09-21). A day after a
 * quiet child's last report is not a day of no usage — it is a day no device
 * spoke. js/household-usage.js gives that column NO bar at all, so what
 * separates it from a genuinely measured zero (which still draws the 2%
 * stub) is the absence of the bar, and the column keeps its date label and
 * carries a "no report received" tooltip.
 *
 * The label is ITALIC rather than lightened: a smaller, greyer date would
 * drop this 0.72em text under the contrast floor to say something the chart
 * already says, and the chart's own footnote ("Days with no report are left
 * blank, not shown as zero.") is what actually explains it in words. Italic
 * is not the only cue and never the only carrier of the meaning. */
#householdUsageMount .husage-chart-col.is-unknown .husage-chart-label,
#overview .husage-chart-col.is-unknown .husage-chart-label {
  font-style: italic;
}

/* Phone width (~400px+): narrower gutters between bars, and the chart itself
 * scrolls rather than crushing every label unreadable. */
@media (max-width: 480px) {
  #householdUsageMount .husage-chart,
  #overview .husage-chart {
    overflow-x: auto;
    justify-content: flex-start;
  }
  #householdUsageMount .husage-chart-col,
  #overview .husage-chart-col {
    flex: 0 0 32px;
  }
}