/* Household Websites — platform/public/js/household-sites.js's own stylesheet.
 *
 * Reuses the shared design tokens (--mint/--coral/--track/--line/--haze/--dusk2
 * etc., defined once in app.css's :root and already corrected for light/dark
 * there) rather than redefining any colour. This file only adds the layout
 * shapes this screen needs that app.css does not already provide: a per-child
 * chip row under a site card, the household summary tiles at this screen's own
 * width, and the Add dialog.
 */

#householdSitesMount { grid-column: 1 / -1; min-width: 0; }

.hsites-summary { margin-bottom: 12px; }

.hsites-add-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--glow) 9%, var(--dusk));
}
.hsites-add-copy { min-width: 0; }
.hsites-add-copy .sect { margin-bottom: 3px; }
.hsites-add-copy .help { margin: 0; }
.hsites-add-actions { display: flex; gap: 8px; flex: none; }
.hsites-add-actions .primary { width: auto; min-height: 44px; margin: 0; padding: 10px 18px; font-size: 14px; }
.hsites-add-actions .ghost { white-space: nowrap; }

.hsites-tabs { margin-bottom: 12px; }
.hsites-tabs .badge { margin-left: 6px; }

.hsites-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 14px;
  margin-bottom: 16px;
}
.hsites-controls .fld { display: block; margin-bottom: 4px; }
.hsites-controls input[type="search"],
.hsites-controls select {
  min-width: 0;
}
.hsites-controls > label.fld { flex: 1 1 220px; }
.hsites-controls > label.fld + input,
.hsites-controls > label.fld + select {
  width: 100%;
}

.hsites-results { display: flex; flex-direction: column; gap: 12px; }

.hsites-request-card,
.hsites-rule-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hsites-request-head,
.hsites-rule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.hsites-request-host,
.hsites-rule-host {
  font-size: 1.02em;
  word-break: break-word;
}

.hsites-request-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.hsites-rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* DEF-001 (owner's 2026-09-21 visual audit, CRITICAL) — THE WHOLE DOCUMENT
 * SCROLLED SIDEWAYS ON A PHONE. Audit measured 488px of document inside a
 * 375px client; reproduced here at 480px inside 375 (105px), the difference
 * being only how long the child's name makes the sentence.
 *
 * MEASURED CAUSE, not guessed — .scratch/def001-002-repro.mjs printed the two
 * guilty boxes and they were both `span.pill.neutral`, 451px wide, left 29 ->
 * right 480. That is the per-child AI-state line built by renderChildSettings
 * in js/household-sites.js:
 *     ctx.elem('span', 'pill neutral', ctx.t('hsites.aiOff', { reason }))
 * A WHOLE SENTENCE IN A `.pill`. app.css gives `.pill` `white-space: nowrap`,
 * which is right for what a pill is for — a short status token that must never
 * break across two lines — and wrong the moment a sentence is put in one. One
 * unbreakable 451px line box drags the document to 480px, and because the text
 * is left-aligned nothing is PAINTED past 375, which is why the owner's
 * capture shows 113px of blank white overflow and no visible culprit.
 *
 * FIXED HERE AND NOT IN app.css: `.pill { white-space: nowrap }` is correct and
 * is relied on by every real pill in the portal (`1 waiting`, `Safe`, `Applied`).
 * The defect is this screen putting long, variable-length content into pills,
 * so this screen's own sheet is where it is undone — for the three pills that
 * can hold a sentence or a hostname rather than a one-word token. No app.css
 * patch is needed for DEF-001.
 *
 * CSS-THAT-IS-REALLY-BEHAVIOUR CHECK (commit ed3eaf68): these rules set
 * white-space / overflow-wrap / max-width only. Nothing here touches display,
 * visibility or opacity, so no node js/household-sites.js writes text into can
 * be silenced by them. Every one of these pills renders exactly the same text
 * as before, on more lines. */
.hsites-ai-line .pill,
.hsites-rating .pill,
.hsites-add-candidate .pill {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hsites-childrow-label { margin-top: 6px; }

.hsites-childrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* A CHIP, NOT A BARE CHECKBOX. Column-per-child would not survive a 400px
 * viewport once a household has more than two or three children, so each
 * child gets a wrapping, labelled toggle instead of a matrix table cell.
 * Colour follows UI-DIRECTION-2026-08-22 §4/§3 exactly as the rest of the
 * portal does: mint for an active Allow, coral for an active Lock — never the
 * same colour meaning two different things on one screen. */
.hsites-childchip {
  border: 1px solid var(--line);
  background: var(--dusk2);
  color: var(--haze);
}
.hsites-childchip.on {
  background: rgba(79, 224, 165, .18);
  border-color: var(--mint);
  color: var(--done-text);
}
.hsites-childchip.on.locked {
  background: rgba(255, 107, 94, .18);
  border-color: var(--coral);
  color: var(--coral);
}
.hsites-childchip:disabled { opacity: .6; cursor: default; }

.hsites-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.hsites-settings { margin-top: 20px; }
.hsites-settings-row {
  border-top: 1px solid var(--line);
  padding-block: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hsites-settings-row:first-of-type { border-top: none; }

.hsites-settings-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hsites-ai-line { margin: 2px 0; }

.hsites-subhead {
  margin: 8px 0 2px;
  font-size: .95em;
  color: var(--haze);
}

.hsites-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}

.hsites-add {
  margin: 0 0 16px;
  border: 1px solid var(--line);
}
.hsites-add-candidate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.hsites-add-candidate:last-of-type { border-bottom: none; }

/* Phone width (~400px and down): let the controls bar and card actions stack
 * to one column rather than compress into unreadable slivers, and keep every
 * tap target at least 44px, matching the rest of this portal's phone rules. */
@media (max-width: 480px) {
  .hsites-add-task { align-items: stretch; flex-direction: column; }
  .hsites-add-actions { align-items: stretch; flex-direction: column; }
  .hsites-add-actions .primary { width: 100%; }
  .hsites-controls { flex-direction: column; align-items: stretch; }
  .hsites-controls > label.fld { flex: 1 1 auto; }
  .hsites-request-actions .iconbtn,
  .hsites-add button.primary,
  .hsites-add button.ghost.wide {
    width: 100%;
    min-height: 44px;
  }
}