/* Kids Videos in the new Yezbi Homeschool look (Derek, October 13–14, 2026: "update Kids Videos and Bookshelf after
   these fixes"; coordination/WORK.md, queued item 2). Loaded last on every page, after css/brand-theme.css.
   The look is Homeschool's remodel "Look C": the Sculpted Flare lockup from the October 10 brand kit, its "A little
   brighter" tokens, the system font, a 64px top bar, pill buttons and chips, 24px cards, 18px fields and 32px dialogs.
   Its values are apps/homeschool/frontend-next/css/next/tokens.css (and output/yezbi-brand-kit-sculpted-brighter-
   2026-10-10/tokens/tokens.json). shared/brand/yezbi-tokens.css still holds the October 8 values; until the
   coordinator moves the October 10 kit into shared/brand, this file sets the --yz-* roles to the new ones.
   Child screens (data-kt-surface="kid") stay Dark and TV-sized, with their emoji, artwork and warm highlights (now
   the kit's gold and soft orange). Grown-up pages (data-kt-surface="parent") follow kt-appearance-v1 as before.
   Nothing here changes behavior: no markup is hidden or added, and no stored value is read or written. */

/* ---------- Tokens: the October 10 kit, as in the new Homeschool design ---------- */
html:not([data-yezbi-theme="dark"]) {
  --yz-background: #F7F8FA; --yz-surface: #FFFFFF; --yz-raised: #EFF2F6; --yz-text: #243247; --yz-muted: #59677A;
  --yz-border: #CED6DF; --yz-control-border: #7B899D;
  --yz-primary: #3B68CA; --yz-primary-hover: #2C55AB; --yz-on-primary: #FFFFFF; --yz-primary-soft: #EEF3FC; --yz-primary-on-soft: #2C55AB;
  --yz-emphasis: #B4511E; --yz-emphasis-soft: #FEF4EE; --yz-success: #1F7556; --yz-success-soft: #EDF6F1;
  --yz-plum: #765B94; --yz-plum-soft: #F0EAF5; --yz-teal: #247778; --yz-teal-soft: #E7F3F2; --yz-gold: #816019; --yz-gold-soft: #FBF2DA;
  --yz-danger: #B13B4A; --yz-danger-soft: #FBECEF; --yz-on-danger: #FFFFFF; --yz-focus: #3B68CA;
  --yz-header-bg: #FFFFFF; --yz-header-border: #CED6DF; --yz-brand-name: #243247;
  --yz-inverse: #243247; --yz-on-inverse: #EDF2F7;
  --kt-shadow: 0 2px 10px rgba(16, 24, 40, .07); --kt-shadow-raised: 0 8px 24px rgba(16, 24, 40, .18);
}
html[data-yezbi-theme="dark"] {
  --yz-background: #141B26; --yz-surface: #1C2634; --yz-raised: #253244; --yz-text: #EDF2F7; --yz-muted: #B3BFCE;
  --yz-border: #3B4B61; --yz-control-border: #687D98;
  --yz-primary: #A3C0FE; --yz-primary-hover: #C0D3FE; --yz-on-primary: #16264F; --yz-primary-soft: #293A56; --yz-primary-on-soft: #C0D3FE;
  --yz-emphasis: #F7BB8D; --yz-emphasis-soft: #45352D; --yz-success: #84D1B2; --yz-success-soft: #233F38;
  --yz-plum: #CEB5EC; --yz-plum-soft: #352D44; --yz-teal: #81CBCD; --yz-teal-soft: #233B42; --yz-gold: #E6CB84; --yz-gold-soft: #3B3525;
  --yz-danger: #EEA1AA; --yz-danger-soft: #432B36; --yz-on-danger: #1C2634; --yz-focus: #A3C0FE;
  /* The kit's neutral dark header (not the slate page colour), as in Homeschool. */
  --yz-header-bg: #242424; --yz-header-border: #404040; --yz-brand-name: #F2F2F2;
  --yz-inverse: #EDF2F7; --yz-on-inverse: #1C2634;
  --kt-shadow: none; --kt-shadow-raised: 0 8px 24px rgba(0, 0, 0, .45);
}
html {
  --kt-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --kt-font-brand: 'Trebuchet MS', 'Fira Sans', system-ui, sans-serif;
  --kt-r-card: 24px; --kt-r-dialog: 32px; --kt-r-field: 18px; --kt-r-thumb: 16px; --kt-r-menu: 16px; --kt-r-pill: 999px;
  /* The app's own corner sizes: boxes 16px, cards and panels 24px; buttons are pills below. */
  --radius: 16px; --radius-lg: 24px;
  /* Shared controls (shared/ui/components.css) in the same shapes. */
  --lp-radius: 24px; --lp-control-radius: 18px;
}
html, body { font-family: var(--kt-font); }

/* ---------- The lockup: wordmark → "Kids Videos" → icon, one home link (October 10 art, Homeschool sizes) ---------- */
/* shared/brand/brand-header.css lines the three up on one baseline; Homeschool's sizes: a 24px wordmark, the name at
   17px and a 26px icon. The light or dark art shows with the page's theme. */
/* --kt-ic is the icon height; the link's padding keeps it a 44px target at every size. */
.yezbi-brand.kt-lockup { --kt-wm: 24px; --kt-ic: 26px; gap: 6px; font-size: 17px; border-radius: 14px; padding: calc((44px - var(--kt-ic)) / 2) 8px; margin-left: -8px; }
.yezbi-brand.kt-lockup .yezbi-wordmark { height: var(--kt-wm); }
.yezbi-brand.kt-lockup .yezbi-app-icon { height: var(--kt-ic); }
.yezbi-brand.kt-lockup .yezbi-app-name { font-family: var(--kt-font-brand); color: var(--yz-brand-name); }
.yezbi-brand.kt-lockup:hover { background: color-mix(in srgb, var(--yz-brand-name) 6%, transparent); }
.yezbi-brand.kt-lockup:focus-visible { outline: 3px solid var(--yz-focus); outline-offset: 0; }
html[data-yezbi-theme="dark"] .yezbi-brand.kt-lockup .kt-art-light,
html:not([data-yezbi-theme="dark"]) .yezbi-brand.kt-lockup .kt-art-dark { display: none; }
@media (max-width: 420px) {
  .yezbi-brand.kt-lockup { --kt-wm: 21px; --kt-ic: 23px; gap: 5px; font-size: 15px; }
}
@media (max-width: 340px) {
  .yezbi-brand.kt-lockup { --kt-wm: 20px; --kt-ic: 21px; font-size: 14px; }
}

/* ---------- Top bars: 64px, white in Light and #242424 in Dark ---------- */
.kt-brand-bar {
  min-height: 64px;
  padding: max(8px, env(safe-area-inset-top)) clamp(12px, 3vw, 32px) 8px;
  gap: 8px;
  border-bottom: 1px solid var(--yz-header-border);
  background: var(--yz-header-bg);
  color: var(--yz-brand-name);
  font-family: var(--kt-font);
}
@media (max-width: 640px) {
  .kt-brand-bar { min-height: 56px; padding: max(6px, env(safe-area-inset-top)) 12px 6px; }
}
/* Light/Dark switch and Account & settings: Homeschool's outlined pills. */
.kt-scheme-switch { border-radius: var(--kt-r-pill); border-color: var(--yz-control-border); background: transparent; color: var(--yz-brand-name); padding: 0 14px; font-weight: 600; }
.kt-scheme-switch:hover { border-color: var(--yz-control-border); background: color-mix(in srgb, var(--yz-brand-name) 6%, transparent); }
.kt-brand-bar .lp-account summary { min-height: 44px; padding: 0 16px; border-radius: var(--kt-r-pill); border-color: var(--yz-control-border); color: var(--yz-brand-name); font-weight: 600; }
.kt-brand-bar .lp-account summary:hover { background: color-mix(in srgb, var(--yz-brand-name) 6%, transparent); }
.kt-brand-bar .lp-account-panel { border-radius: var(--kt-r-menu); border-color: var(--yz-border); box-shadow: var(--kt-shadow-raised); }

/* The library's bar (sticky): lockup, Home · Explore · My List as Homeschool's top tabs, then the actions. */
html[data-kt-surface="kid"] .kids-appbar {
  min-height: 64px;
  gap: 8px 16px;
  padding: max(8px, env(safe-area-inset-top)) clamp(12px, 3vw, 32px) 8px;
  border-bottom: 1px solid var(--yz-header-border);
  background: var(--yz-header-bg);
  font-family: var(--kt-font);
}
html[data-kt-surface="kid"] .kids-appbar .kids-nav { gap: 2px; }
html[data-kt-surface="kid"] .kids-appbar .kids-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px;
  color: var(--yz-muted); background: transparent; font-size: 15px; font-weight: 600; line-height: 1.1;
}
html[data-kt-surface="kid"] .kids-appbar .kids-nav a:hover { color: var(--yz-text); background: color-mix(in srgb, var(--yz-text) 6%, transparent); }
html[data-kt-surface="kid"] .kids-appbar .kids-nav a.is-active { color: var(--yz-primary-on-soft); background: var(--yz-primary-soft); font-weight: 700; }
html[data-kt-surface="kid"] .kids-appbar .kids-appbar-actions { gap: 8px; }
html[data-kt-surface="kid"] .kids-appbar :is(.kids-utility-button, .active-kid-chip, .parent-gear) {
  min-height: 44px; border: 1px solid var(--yz-control-border); border-radius: var(--kt-r-pill);
  color: var(--yz-brand-name); background: transparent; font-weight: 600;
}
html[data-kt-surface="kid"] .kids-appbar .kids-utility-button { padding: 0 16px; font-size: 14px; }
html[data-kt-surface="kid"] .kids-appbar .parent-gear { width: 44px; height: 44px; }
html[data-kt-surface="kid"] .kids-appbar :is(.kids-utility-button, .active-kid-chip, .parent-gear):hover { background: color-mix(in srgb, var(--yz-brand-name) 8%, transparent); outline: 0; }
html[data-kt-surface="kid"] .kids-appbar .kids-utility-button:focus-visible { outline: 3px solid var(--yz-focus); outline-offset: 2px; }
@media (max-width: 760px) {
  html[data-kt-surface="kid"] .kids-appbar { padding-right: 12px; padding-left: 12px; }
  html[data-kt-surface="kid"] .kids-appbar .kids-utility-button { width: 44px; padding: 0; }
  html[data-kt-surface="kid"] .kids-appbar .kids-nav a { min-height: 40px; padding: 0 14px; }
}
/* Narrow phones: Home · Explore · My List all fit beside the child and Parent settings. */
@media (max-width: 440px) {
  html[data-kt-surface="kid"] .kids-appbar .kids-nav { gap: 0; }
  html[data-kt-surface="kid"] .kids-appbar .kids-nav a { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 340px) {
  html[data-kt-surface="kid"] .kids-appbar .kids-nav a { padding: 0 8px; font-size: 13px; }
}

/* ---------- Every page: buttons are pills, fields 18px, focus one 3px ring ---------- */
:is(.btn-primary, .btn-secondary, .state-link, .catalog-back, .search-submit, .search-clear, .hero-action,
  .kid-request-open, .kid-request-status, .search-request-empty, .kid-feature-primary, .kid-request-play,
  .video-info-save, .quick-block-actions button, .btn-back, .btn-fullscreen, .btn-player-utility, .btn-block-video,
  .btn-control, .data-button, .kids-tour-actions button, .cs-kid-action-btn, .tm-row-btn, .media-block-unblock,
  .media-block-result-action, .parent-request-actions button, .parent-history-actions button, .parent-link-button,
  .topic-chip, .chapter-pill) {
  border-radius: var(--kt-r-pill);
}
.lp-ui :is(button, .lp-button) { border-radius: var(--kt-r-pill); }
.lp-ui input:is([type=checkbox], [type=radio]) { border-radius: revert; }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; font-weight: 700; line-height: 1.2; }
.btn-primary { border: 1px solid var(--yz-primary); background: var(--yz-primary); color: var(--yz-on-primary); }
.btn-primary:hover, .btn-primary:focus-visible { border-color: var(--yz-primary-hover); background: var(--yz-primary-hover); }
html[data-kt-surface] .btn-secondary { border: 1px solid var(--yz-control-border); background: transparent; color: var(--yz-text); box-shadow: none; }
html[data-kt-surface] .btn-secondary:hover, html[data-kt-surface] .btn-secondary:focus-visible { border-color: var(--yz-control-border); background: color-mix(in srgb, var(--yz-text) 8%, transparent); }
html[data-kt-surface="parent"] .btn-secondary,
html[data-kt-surface="parent"] .btn-secondary:hover,
html[data-kt-surface="kid"] .btn-secondary { box-shadow: none; }
:is(.btn-primary, .btn-secondary):focus-visible { outline: 3px solid var(--yz-focus); outline-offset: 2px; }
/* Library and player buttons: TV-readable, still one line in a pill where they fit. */
html[data-kt-surface="kid"] :is(.library-page, .player-page) :is(.btn-primary, .btn-secondary) { min-height: 52px; padding: 8px 24px; font-size: 17px; text-align: center; }
@media (min-width: 769px) { html[data-kt-surface="kid"] .player-page :is(.btn-primary, .btn-secondary) { min-height: 60px; padding: 8px 32px; font-size: 20px; } }

/* ---------- Child screens (always Dark, TV-sized) ---------- */
html[data-kt-surface="kid"] {
  /* Warm highlights from the kit: gold kickers, soft orange headings on the player's cards. */
  --accent: var(--yz-emphasis);
  --accent-hover: var(--yz-primary-hover);
}
html[data-kt-surface="kid"] .library-page {
  --library-accent: var(--yz-gold);
  --library-border: var(--yz-border);
  background: var(--yz-background);
}
html[data-kt-surface="kid"] .library-page #search-input::placeholder { color: var(--yz-muted); }
/* Search: one pill-shaped field with the Search pill inside it. */
html[data-kt-surface="kid"] .library-page .search-section form {
  padding: 6px 6px 6px 10px; border: 1px solid var(--yz-control-border); border-radius: var(--kt-r-pill);
  background: var(--yz-surface); box-shadow: none;
}
html[data-kt-surface="kid"] .search-icon { color: var(--yz-muted); }
html[data-kt-surface="kid"] :is(.search-submit, .hero-action) { min-height: 48px; padding: 0 22px; font-size: 15px; font-weight: 700; }
html[data-kt-surface="kid"] .search-clear { min-height: 48px; color: var(--yz-text); background: var(--yz-raised); }
@media (max-width: 760px) {
  html[data-kt-surface="kid"] .search-submit { width: 48px; padding: 0; font-size: 0; }
}
/* Ask a grown-up (soft orange, a reminder in the kit's roles) and My asks (outlined). */
html[data-kt-surface="kid"] :is(.kid-request-open, .search-request-empty) {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--yz-emphasis); color: var(--yz-emphasis); background: var(--yz-emphasis-soft); font-size: 14px; font-weight: 700;
}
html[data-kt-surface="kid"] .kid-request-status { min-height: 44px; padding: 0 18px; border: 1px solid var(--yz-control-border); color: var(--yz-text); background: transparent; font-size: 14px; font-weight: 700; }
html[data-kt-surface="kid"] :is(.kid-request-open, .kid-request-status, .search-request-empty):hover { outline: 0; filter: brightness(1.08); }
html[data-kt-surface="kid"] .kid-request-status.has-update { border-color: var(--yz-success); color: var(--yz-success); background: var(--yz-success-soft); }
@media (max-width: 520px) {
  html[data-kt-surface="kid"] :is(.kid-request-open, .kid-request-status, .search-request-empty) { padding: 4px 14px; font-size: 13px; }
}
html[data-kt-surface="kid"] .kid-request-update { border: 0; border-radius: var(--kt-r-thumb); color: var(--yz-success); background: var(--yz-success-soft); }
/* The featured theme, shelves and cards: 24px surfaces with no outline, as Homeschool's cards in Dark. */
html[data-kt-surface="kid"] .curriculum-feature { border: 0; border-radius: var(--kt-r-dialog); background: var(--yz-surface); box-shadow: none; }
html[data-kt-surface="kid"] .curriculum-feature-copy::after { background: linear-gradient(90deg, var(--yz-surface), transparent); }
html[data-kt-surface="kid"] .curriculum-feature h1 { font-weight: 800; letter-spacing: -0.03em; }
html[data-kt-surface="kid"] .curriculum-feature p.hero-description,
html[data-kt-surface="kid"] .video-info-summary { color: var(--yz-muted); }
@media (max-width: 760px) {
  html[data-kt-surface="kid"] .curriculum-feature-copy::after { background: linear-gradient(0deg, var(--yz-surface), transparent); }
}
html[data-kt-surface="kid"] .library-page .card { border: 0; border-radius: var(--kt-r-card); background: var(--yz-surface); box-shadow: none; }
html[data-kt-surface="kid"] .library-page .card:hover,
html[data-kt-surface="kid"] .library-page .card:focus-within { background: var(--yz-raised); box-shadow: 0 0 0 2px var(--yz-primary); }
html[data-kt-surface="kid"] .section-heading-row h2 { font-weight: 800; letter-spacing: -0.02em; }
html[data-kt-surface="kid"] :is(.hero-kicker, .section-kicker) { letter-spacing: .1em; }
html[data-kt-surface="kid"] .resume-progress span { background: var(--yz-primary); }
html[data-kt-surface="kid"] .topic-chip { min-height: 48px; padding: 0 18px; border: 1px solid var(--yz-control-border); background: transparent; font-weight: 600; }
html[data-kt-surface="kid"] .topic-chip:hover,
html[data-kt-surface="kid"] .topic-chip:focus-visible { border-color: var(--yz-control-border); background: var(--yz-primary-soft); }
html[data-kt-surface="kid"] .my-list-empty,
html[data-kt-surface="kid"] .search-empty-request { border: 1px dashed var(--yz-control-border); border-radius: var(--kt-r-card); background: var(--yz-surface); }
html[data-kt-surface="kid"] .library-error { border: 0; border-radius: var(--kt-r-card); color: var(--yz-emphasis); background: var(--yz-emphasis-soft); }
html[data-kt-surface="kid"] .library-page .page-footer { border-top-color: var(--yz-border); }
/* Family shelves (js/family-library.js draws them with inline sizes): the explanation lines up with the shelves. */
html[data-kt-surface="kid"] #family-library-shelves > :is(p, details, button) {
  width: min(1500px, calc(100% - clamp(36px, 8vw, 112px))); margin-right: auto; margin-left: auto;
}
html[data-kt-surface="kid"] #family-library-shelves > p { padding: 0 0 18px !important; color: var(--yz-muted) !important; font-size: 16px; }
html[data-kt-surface="kid"] #family-library-shelves .library-section > h2 { font-size: clamp(23px, 2.5vw, 32px); font-weight: 800; letter-spacing: -0.02em; }
html[data-kt-surface="kid"] #family-library-shelves .library-section > p { margin: 2px 0 14px; color: var(--yz-muted); font-size: 16px; }
html[data-kt-surface="kid"] #family-library-shelves .video-card img { border-radius: var(--kt-r-thumb) !important; }
html[data-kt-surface="kid"] #family-library-shelves .video-card p { margin-top: 8px; font-size: 16px; font-weight: 600; }
@media (max-width: 760px) {
  html[data-kt-surface="kid"] #family-library-shelves > :is(p, details, button) { width: calc(100% - 28px); }
}

/* Dialogs on child screens: 32px sheets on the surface colour, 18px fields, a blue main action. */
html[data-kt-surface="kid"] :is(.kid-feature-dialog, .video-info-dialog, .quick-block-dialog) {
  border: 0; border-radius: var(--kt-r-dialog); background: var(--yz-surface); color: var(--yz-text); box-shadow: var(--kt-shadow-raised);
}
html[data-kt-surface="kid"] :is(.kid-feature-dialog, .video-info-dialog, .quick-block-dialog)::backdrop { background: rgba(0, 0, 0, .55); }
@media (max-width: 760px) {
  html[data-kt-surface="kid"] :is(.kid-feature-dialog, .video-info-dialog) { border-radius: var(--kt-r-dialog) var(--kt-r-dialog) 0 0; }
}
@media (max-width: 560px) {
  html[data-kt-surface="kid"] .quick-block-dialog { border-radius: var(--kt-r-dialog) var(--kt-r-dialog) 0 0; }
}
html[data-kt-surface="kid"] :is(.kid-feature-close, .video-info-close, .quick-block-close) { color: var(--yz-text); background: var(--yz-raised); }
html[data-kt-surface="kid"] :is(.kid-feature-close, .video-info-close, .quick-block-close):hover { background: color-mix(in srgb, var(--yz-text) 14%, var(--yz-raised)); outline: 0; }
html[data-kt-surface="kid"] :is(.kid-choice-grid label, .report-reasons label, .quick-block-types label) {
  border: 1px solid var(--yz-control-border); border-radius: var(--kt-r-field); background: transparent;
}
html[data-kt-surface="kid"] :is(.kid-choice-grid label, .report-reasons label, .quick-block-types label):has(input:checked) {
  border-color: var(--yz-primary); background: var(--yz-primary-soft);
}
html[data-kt-surface="kid"] :is(.kid-choice-grid input, .report-reasons input, .quick-block-types input) { accent-color: var(--yz-primary); }
html[data-kt-surface="kid"] :is(.kid-feature-field input, .kid-feature-field textarea, .quick-block-field input, .quick-block-field select) {
  min-height: 48px; border: 1px solid var(--yz-control-border); border-radius: var(--kt-r-field); color: var(--yz-text); background: var(--yz-surface);
}
html[data-kt-surface="kid"] :is(.kid-feature-field input, .kid-feature-field textarea, .quick-block-field input, .quick-block-field select):focus {
  border-color: var(--yz-primary); outline: 2px solid var(--yz-primary); outline-offset: 0;
}
html[data-kt-surface="kid"] .kid-feature-primary { min-height: 52px; border: 0; color: var(--yz-on-primary); background: var(--yz-primary); font-size: 16px; font-weight: 700; }
html[data-kt-surface="kid"] .kid-feature-primary:hover { background: var(--yz-primary-hover); outline: 0; }
html[data-kt-surface="kid"] .kid-feature-primary:focus-visible { background: var(--yz-primary-hover); outline: 3px solid var(--yz-focus); outline-offset: 2px; }
html[data-kt-surface="kid"] .kid-feature-message { color: var(--yz-danger); }
html[data-kt-surface="kid"] .kid-feature-message.is-success { color: var(--yz-success); }
html[data-kt-surface="kid"] .kid-request-history { border-top-color: var(--yz-border); }
html[data-kt-surface="kid"] .kid-request-item { border: 0; border-radius: var(--kt-r-thumb); background: var(--yz-raised); }
html[data-kt-surface="kid"] .kid-request-badge { color: var(--yz-gold); background: var(--yz-gold-soft); }
html[data-kt-surface="kid"] :is(.kid-request-item.is-approved, .kid-request-item.is-suggested) .kid-request-badge { color: var(--yz-success); background: var(--yz-success-soft); }
html[data-kt-surface="kid"] .kid-request-item.is-declined .kid-request-badge { color: var(--yz-muted); background: var(--yz-surface); }
html[data-kt-surface="kid"] .kid-request-play { min-height: 44px; padding: 0 16px; color: var(--yz-on-success, #10261E); background: var(--yz-success); font-weight: 700; }
html[data-kt-surface="kid"] .tv-capability-note { border-left-color: var(--yz-teal); color: var(--yz-text); background: var(--yz-teal-soft); }
html[data-kt-surface="kid"] :is(.video-info-trust, .quick-block-target) { border-left-color: var(--yz-gold); background: var(--yz-gold-soft); border-radius: 0 var(--kt-r-thumb) var(--kt-r-thumb) 0; }
html[data-kt-surface="kid"] .video-info-facts div { border-radius: var(--kt-r-thumb); background: var(--yz-raised); }
html[data-kt-surface="kid"] .video-info-talk { border-radius: var(--kt-r-thumb); background: var(--yz-success-soft); }
html[data-kt-surface="kid"] .video-info-talk p:last-child { color: var(--yz-success); }
html[data-kt-surface="kid"] .video-info-save { min-height: 48px; border: 1px solid var(--yz-control-border); color: var(--yz-text); background: transparent; font-weight: 700; }
html[data-kt-surface="kid"] .video-info-save[aria-pressed="true"] { border-color: var(--yz-primary); color: var(--yz-primary-on-soft); background: var(--yz-primary-soft); }
html[data-kt-surface="kid"] .quick-block-cancel { border: 1px solid var(--yz-control-border); color: var(--yz-text); background: transparent; }
html[data-kt-surface="kid"] .quick-block-confirm { color: var(--yz-on-danger); background: var(--yz-danger); }
html[data-kt-surface="kid"] .quick-block-confirm:hover,
html[data-kt-surface="kid"] .quick-block-confirm:focus-visible { background: color-mix(in srgb, var(--yz-danger) 86%, #fff); outline: 3px solid var(--yz-focus); outline-offset: 2px; }
html[data-kt-surface="kid"] .quick-block-message { color: var(--yz-danger); }
/* The toast is Homeschool's snackbar: inverse colours, 16px corners. */
.kid-feature-toast { border: 0; border-radius: var(--kt-r-menu); color: var(--yz-on-inverse); background: var(--yz-inverse); box-shadow: var(--kt-shadow-raised); font-size: 14px; font-weight: 600; }

/* The player: still black around the video (TV-friendly), with Homeschool's pill buttons. */
html[data-kt-surface="kid"] .player-topbar { gap: 16px 24px; border-bottom-color: var(--yz-header-border); }
html[data-kt-surface="kid"] .player-bottom { border-top-color: var(--yz-header-border); }
html[data-kt-surface="kid"] :is(.btn-back, .btn-fullscreen, .btn-player-utility) {
  min-height: 56px; padding: 0 22px; border: 1px solid var(--yz-control-border); color: var(--yz-text); background: transparent; box-shadow: none; font-weight: 600;
}
html[data-kt-surface="kid"] .btn-block-video { min-height: 56px; padding: 0 22px; border: 1px solid var(--yz-danger); color: var(--yz-danger); background: var(--yz-danger-soft); font-weight: 600; }
html[data-kt-surface="kid"] :is(.btn-back, .btn-fullscreen, .btn-player-utility):hover { border-color: var(--yz-control-border); background: color-mix(in srgb, var(--yz-text) 10%, transparent); }
html[data-kt-surface="kid"] .btn-block-video:hover { border-color: var(--yz-danger); background: color-mix(in srgb, var(--yz-danger) 22%, var(--yz-danger-soft)); }
html[data-kt-surface="kid"] .btn-control { min-height: 60px; border: 1px solid var(--yz-control-border); color: var(--yz-text); background: transparent; box-shadow: none; font-weight: 600; }
html[data-kt-surface="kid"] .btn-control:hover { border-color: var(--yz-control-border); background: color-mix(in srgb, var(--yz-text) 10%, transparent); }
html[data-kt-surface="kid"] .btn-control:disabled { border-color: var(--yz-border); background: transparent; }
html[data-kt-surface="kid"] .btn-control.btn-play-pause { border-color: var(--yz-primary); color: var(--yz-on-primary); background: var(--yz-primary); font-weight: 700; }
html[data-kt-surface="kid"] .btn-control.btn-play-pause:hover { border-color: var(--yz-primary-hover); background: var(--yz-primary-hover); }
html[data-kt-surface="kid"] :is(.btn-back, .btn-fullscreen, .btn-player-utility, .btn-block-video, .btn-control):focus-visible { outline: 3px solid var(--yz-focus); outline-offset: 2px; }
html[data-kt-surface="kid"] .progress-track { background: var(--yz-raised); }
html[data-kt-surface="kid"] .progress-thumb { border-color: var(--yz-text); }
html[data-kt-surface="kid"] .progress-bar:focus-visible { outline: 3px solid var(--yz-focus); }
html[data-kt-surface="kid"] .chapter-pill { border-color: var(--yz-control-border); background: transparent; }
html[data-kt-surface="kid"] .chapter-pill.active { border-color: var(--yz-primary); color: var(--yz-primary-on-soft); background: var(--yz-primary-soft); }
html[data-kt-surface="kid"] :is(.end-card, .error-card) { background: var(--yz-background); }
html[data-kt-surface="kid"] :is(.end-card, .error-card) h2 { font-weight: 800; letter-spacing: -0.02em; }
html[data-kt-surface="kid"] #lock-pin-input { min-height: 52px; padding: 0 18px; border: 1px solid var(--yz-control-border); border-radius: var(--kt-r-field); color: var(--yz-text); background: var(--yz-surface); font: inherit; font-size: 18px; }
@media (max-width: 768px) {
  /* Phones keep the player's own narrower padding, so the six controls stay on one row. */
  html[data-kt-surface="kid"] :is(.btn-back, .btn-fullscreen, .btn-player-utility, .btn-block-video) { min-height: 48px; padding-top: 0; padding-bottom: 0; }
  html[data-kt-surface="kid"] .btn-control { min-height: 52px; }
}

/* Who's watching? */
html[data-kt-surface="kid"] .sk-card { border: 0; border-radius: var(--kt-r-dialog); background: var(--yz-surface); }
html[data-kt-surface="kid"] .sk-title { font-weight: 800; letter-spacing: -0.02em; }
html[data-kt-surface="kid"] .sk-eyebrow { color: var(--yz-gold); font-weight: 700; letter-spacing: .1em; }
html[data-kt-surface="kid"] .sk-kid-tile { border: 2px solid var(--yz-control-border); border-radius: var(--kt-r-card); background: var(--yz-raised); }
html[data-kt-surface="kid"] .sk-kid-tile:hover { border-color: var(--yz-primary); background: var(--yz-primary-soft); }
html[data-kt-surface="kid"] .sk-msg.error { color: var(--yz-danger); }

/* The guided tour: the kit's dark surfaces and soft blue on every page. */
.kids-tour-spotlight { border-color: #A3C0FE; border-radius: 20px; box-shadow: 0 0 0 9999px rgba(10, 14, 21, .78), 0 0 0 7px rgba(163, 192, 254, .18), 0 12px 38px rgba(0, 0, 0, .55); }
.kids-tour-bubble { border: 0; border-radius: 24px; background: #1C2634; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); font-family: var(--kt-font); }
.kids-tour-progress span { background: #A3C0FE; }
.kids-tour-name { color: #F7BB8D; }
.kids-tour-close { border-color: #687D98; background: transparent; }
.kids-tour-note { border: 0; border-radius: 16px; background: #3B3525; color: #E6CB84; }
.kids-tour-actions button { min-height: 44px; padding: 0 18px; border-color: #687D98; background: transparent; color: #EDF2F7; font-weight: 700; }
.kids-tour-actions .kids-tour-next { border-color: #A3C0FE; background: #A3C0FE; color: #16264F; }
@media (max-width: 760px) { .kids-tour-bubble { border-radius: 20px; } }

/* ---------- Grown-up pages ---------- */
html[data-kt-surface="parent"] { --shadow: var(--kt-shadow); }
html[data-kt-surface="parent"] body { font-family: var(--kt-font); font-size: 16px; line-height: 1.5; }
/* Cards and panels: the surface colour, 24px corners and Homeschool's soft shadow in Light (none in Dark). */
html[data-kt-surface="parent"] :is(.state-card, .signed-out-card, .dashboard-section, .parent-feature-panel, .media-blocks-section,
  .data-card, .family-shell section, .parent-preflight, .kids-tour-resume, .modal-card, .device-lock-help) {
  border-radius: var(--kt-r-card);
}
html[data-kt-surface="parent"] :is(.parent-feature-panel, .media-blocks-section, .data-card, .family-shell section, .state-card, .signed-out-card) {
  border-color: transparent; background: var(--yz-surface); box-shadow: var(--kt-shadow);
}
html[data-kt-surface="parent"][data-yezbi-theme="dark"] :is(.parent-feature-panel, .media-blocks-section, .data-card, .family-shell section, .state-card, .signed-out-card) { border-color: transparent; }
html[data-kt-surface="parent"] .parent-preflight { box-shadow: var(--kt-shadow); }
html[data-kt-surface="parent"] :is(.parent-feature-empty, .parent-request-card, .parent-history-row, .parent-preflight-grid > div, .parent-privacy-counts > div,
  .media-block-row, .media-block-result-row, .data-counts > div, .parent-history-summary > div) { border-radius: var(--kt-r-thumb); }
/* Headings in the system font at 700, as Homeschool's titles. */
html[data-kt-surface="parent"] :is(h1, h2, h3) { font-family: var(--kt-font); letter-spacing: -0.01em; }
html[data-kt-surface="parent"] :is(.dashboard-title, .state-card h1, .data-page h1, .family-shell h1) { font-weight: 700; }
/* Buttons and fields. */
html[data-kt-surface="parent"] .btn-primary,
html[data-kt-surface="parent"] .btn-secondary { min-height: 44px; padding: 0 20px; font-size: 15px; }
html[data-kt-surface="parent"] .data-button { min-height: 44px; padding: 0 20px; font-weight: 700; }
html[data-kt-surface="parent"] .family-shell :is(button, .lp-button) { min-height: 44px; padding: 0 20px; border-radius: var(--kt-r-pill); font-weight: 700; }
html[data-kt-surface="parent"] .family-shell :is(input, select),
html[data-kt-surface="parent"] :is(.data-input, .block-form input, .block-form select, .block-form textarea, .pin-form input[type="password"],
  .parent-feature-toolbar select, .parent-request-match select, .parent-feature-dialog-sheet textarea, .media-block-search-row input,
  .media-block-dialog textarea, .media-block-dialog select, .cs-universal-grid select) {
  min-height: 48px; border-radius: var(--kt-r-field);
}
html[data-kt-surface="parent"] .family-shell :is(fieldset, details) { border-radius: var(--kt-r-thumb); }
html[data-kt-surface="parent"] .cs-chip { min-height: 40px; padding: 0 16px; border-color: var(--yz-control-border); color: var(--yz-text); font-weight: 600; }
html[data-kt-surface="parent"] .cs-chip.selected { border-color: var(--yz-primary); color: var(--yz-primary-on-soft); background: var(--yz-primary-soft); font-weight: 700; }
html[data-kt-surface="parent"] .cs-chip.selected::before { content: "✓ "; }
html[data-kt-surface="parent"] .cs-universal-grid .block-field { border-color: var(--yz-border); border-radius: var(--kt-r-thumb); background: var(--yz-raised); }
html[data-kt-surface="parent"] :is(.parent-feature-dialog, .media-block-dialog, #shelf-discard-dialog, .modal-card) {
  border-color: transparent; border-radius: var(--kt-r-dialog); box-shadow: var(--kt-shadow-raised);
}
/* Section tabs: Homeschool's chips. Each tab is its own outlined pill; the open one is soft blue with a check. */
html[data-kt-surface="parent"] :is(.parent-quick-nav, .section-nav).yz-tabs .yz-tabs-list { gap: 8px; padding: 0; border: 0; background: transparent; }
html[data-kt-surface="parent"] :is(.parent-quick-nav, .section-nav).yz-tabs .yz-tabs-list > [role="tab"] {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--yz-control-border); border-radius: var(--kt-r-pill);
  color: var(--yz-text); background: transparent; font-size: 15px; font-weight: 600;
}
html[data-kt-surface="parent"] :is(.parent-quick-nav, .section-nav).yz-tabs .yz-tabs-list > [role="tab"]:hover { background: color-mix(in srgb, var(--yz-text) 6%, transparent); }
html[data-kt-surface="parent"] :is(.parent-quick-nav, .section-nav).yz-tabs .yz-tabs-list > [role="tab"][aria-selected="true"] {
  border-color: var(--yz-primary); color: var(--yz-primary-on-soft); background: var(--yz-primary-soft); font-weight: 700;
}
html[data-kt-surface="parent"] :is(.parent-quick-nav, .section-nav).yz-tabs .yz-tabs-list > [role="tab"][aria-selected="true"]::before { content: "✓"; margin-right: 6px; }
html[data-kt-surface="parent"] :is(.parent-quick-nav, .section-nav).yz-tabs .yz-tabs-actions > :is(a, button) { border-radius: var(--kt-r-pill); padding: 0 16px; border-color: var(--yz-control-border); }
/* Phones: the row scrolls sideways inside itself; keep room for the focus ring. */
@media (max-width: 600px) { html[data-kt-surface="parent"] :is(.parent-quick-nav, .section-nav).yz-tabs .yz-tabs-list { padding: 5px; } }
/* Badges and counts: soft pills. */
html[data-kt-surface="parent"] :is(.parent-feature-count, .media-blocks-count, .parent-preflight-badge, .data-role) { border-radius: var(--kt-r-pill); }
html[data-kt-surface="parent"] :is(.parent-feature-count, .media-blocks-count) { border-color: transparent; color: var(--yz-primary-on-soft); }
/* Themes (theme.html's own styles): cards, rows and the dialog in the same shapes. */
html[data-kt-surface="parent"] :is(.tm-catalog-card, .tm-current-banner) { border-radius: var(--kt-r-thumb); }
html[data-kt-surface="parent"] .tm-custom-row { border-radius: var(--kt-r-thumb); }
html[data-kt-surface="parent"] .tm-modal { border-radius: var(--kt-r-dialog); padding: 24px; }
/* Trust, Privacy notice and Terms: their sections become cards. */
html[data-kt-surface="parent"] body:not([class]) :is(section:not(.plain), .truth div) { border-color: transparent; border-radius: var(--kt-r-card); box-shadow: var(--kt-shadow); }
html[data-kt-surface="parent"] body:not([class]) :is(.draft, .callout) { border-radius: var(--kt-r-thumb); }
html[data-kt-surface="parent"] body:not([class]) { font-family: var(--kt-font); }