:root {
  color-scheme: dark;
  --bg: #0b0d0c;
  --surface: #111513;
  --surface-raised: #171c19;
  --line: #2b332e;
  --text: #f1f4ef;
  --muted: #a1aaa3;
  --quiet: #707b73;
  --accent: #c5e88a;
  --accent-ink: #18220f;
  --danger: #ff9b91;
  --ring: #d5f39d;
  --radius: 14px;
  --motion: 180ms;
  --player-top-pad: 84px;
  --player-bottom-reserve: 0px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: var(--text); color: var(--bg); border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.topbar { position: fixed; z-index: 5; inset: 0 0 auto; height: 66px; display: flex; align-items: center; padding: env(safe-area-inset-top) max(22px, env(safe-area-inset-left)) 0; background: linear-gradient(180deg, #0b0d0cf2 20%, #0b0d0c00); transition: opacity var(--motion), visibility var(--motion); }
.brand { display: inline-flex; gap: 9px; align-items: center; text-decoration: none; font-weight: 680; font-size: 17px; letter-spacing: -.045em; }
.brand-mark { width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 50%; }
.account { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 4px 0 4px 12px; color: var(--muted); text-decoration: none; font-size: 13px; }
.account:hover { color: var(--text); }
.account img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.layout { min-height: 100dvh; padding: 92px 82px 38px; }
.watch-column { width: min(100%, 1250px); margin: 0 auto; }
.welcome { width: 100%; padding: 0 0 26px; display: flex; justify-content: space-between; align-items: end; gap: 24px; text-align: left; }
.eyebrow { margin: 0 0 14px; color: var(--accent); font-size: 11px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, p { overflow-wrap: anywhere; }
.welcome h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.05em; font-weight: 570; }
.welcome > div > p:not(.eyebrow) { max-width: 42ch; margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.welcome .eyebrow { margin-bottom: 6px; }
.welcome { flex-wrap: wrap; }
.quick-form { width: 100%; display: flex; gap: 9px; }
.quick-form input { min-width: 0; flex: 1; min-height: 52px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.quick-form .button { min-width: 72px; }
.topbar { gap: clamp(12px, 3vw, 36px); background: #0b0d0cf4; border-bottom: 1px solid var(--line); }
.top-search { width: min(650px, 100%); margin: 0 auto; }
.top-search input { min-height: 42px; }
.top-search .button { min-height: 42px; }
.topbar .account { margin-left: 0; white-space: nowrap; }
.account-wrap { position: relative; flex: none; }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: min(250px, calc(100vw - 24px)); padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); box-shadow: 0 16px 40px #0009; }
.account-menu a, .account-menu button { width: 100%; min-height: 44px; display: flex; align-items: center; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); text-align: left; text-decoration: none; font-size: 14px; }
.account-menu a:hover, .account-menu button:hover { background: #ffffff12; }
.account-menu a:last-child { margin-top: 5px; border-top: 1px solid var(--line); color: var(--muted); }
.account:not([data-auth]) { padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-weight: 650; }
.hover-preview { position: fixed; z-index: 30; width: 320px; height: 220px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #000; box-shadow: 0 18px 40px #000b; pointer-events: none; }
.hover-preview iframe { display: block; width: 100%; height: 100%; border: 0; }
.create-link { flex: none; min-height: 42px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 12px; font-weight: 650; }
.create-link span:first-child { font-size: 22px; line-height: 1; color: var(--accent); }
.create-link:hover { border-color: var(--accent); }
.home-videos { margin: 0 0 28px; }
.home-videos-head { margin-bottom: 14px; }
.home-videos-head .eyebrow { margin-bottom: 4px; }
.home-videos-head h2 { margin: 0; font-size: clamp(20px, 2.4vw, 29px); letter-spacing: -.035em; }
.home-videos-head h1 { margin: 0; font-size: clamp(25px, 3vw, 34px); font-weight: 580; letter-spacing: -.045em; }
.home-video-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.home-video-card { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; }
.home-video-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: var(--surface); }
.home-video-card strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; line-height: 1.35; }
.home-video-card small { color: var(--muted); font-size: 11px; }
.home-video-card:hover strong { color: var(--accent); }
.home-video-card:focus-visible { border-radius: 10px; }
.home-video-card img { transition: opacity 180ms ease; }
.home-video-card:hover img { opacity: .84; }
.decor-tick { display: none !important; }
.tick-nav [data-panel="discover"], .tick-nav [data-panel="links"] { display: none; }
.tick-group:has(> [data-panel="discover"]), .tick-group:has(> [data-panel="links"]) { display: none; }
.tick-nav { gap: 4px; }
.tick-hit { border-radius: 12px; }
.eyebrow { letter-spacing: .08em; }
.quick-help, #savedSpace .saved-intro { display: none; }
.space-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 22px; }
.space-rail button { min-width: 0; padding: 0 0 8px; border: 0; background: transparent; text-align: left; }
.space-cover, .content-cover { display: flex; align-items: end; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(135deg, #25362a, #141b17 65%, #35462b); color: var(--accent); font-size: 28px; font-weight: 600; letter-spacing: -.04em; }
.space-rail button:nth-child(2) .space-cover { background: linear-gradient(135deg, #423630, #171b18); }
.space-rail button:nth-child(3) .space-cover { background: linear-gradient(135deg, #26343d, #171b18); }
.space-rail button:nth-child(4) .space-cover { background: linear-gradient(135deg, #383444, #171b18); }
.space-rail button:nth-child(5) .space-cover { background: linear-gradient(135deg, #394029, #171b18); }
.space-rail strong, .space-rail small { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-rail strong { font-size: 13px; }
.space-rail small { color: var(--muted); font-size: 11px; }
.space-rail button:hover .space-cover { border-color: var(--accent); }
.content-cover { margin-bottom: 12px; padding: 0; }
.content-cover img { width: 100%; height: 100%; object-fit: cover; }
.content-cover span { padding: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.curated-card .content-cover, .explore-card .content-cover { width: 100%; }
.learning-form { display: grid; gap: 8px; max-width: 650px; margin-top: 18px; }
.learning-form label { font-size: 13px; font-weight: 600; }
.learning-form input, .learning-form textarea { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); }
.learning-form .button { width: fit-content; }
.learning-form p { margin: 0; color: var(--muted); font-size: 13px; }
.learning-companion { margin: 24px 0 40px; max-width: 760px; }
.learning-promise { max-width: 760px; margin: 28px 0 36px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.learning-promise h3 { margin: 0 0 12px; font-size: clamp(21px, 3vw, 27px); }
.learning-promise p { max-width: 68ch; margin: 0 0 14px; color: var(--muted); line-height: 1.6; }
.learning-promise .learning-invite { color: var(--text); font-weight: 600; }
.learning-promise a:not(.button) { color: inherit; text-underline-offset: 3px; }
.learning-promise .button { display: inline-flex; min-height: 44px; align-items: center; margin-top: 4px; }
.learning-promise small { display: block; margin-top: 10px; color: var(--muted); }
.learning-companion > p { color: var(--muted); }
.learning-form select, .learning-goal select, .learning-goal textarea { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.learning-check { display: flex !important; align-items: flex-start; gap: 12px; line-height: 1.5; }
.learning-check input { width: 20px !important; min-height: 20px !important; flex: none; margin-top: 3px; }
.learning-goals { display: grid; gap: 18px; margin-top: 20px; }
.learning-goal { display: grid; justify-items: start; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: clamp(16px,3vw,24px); background: var(--surface); }
.learning-goal h4, .learning-goal p { margin: 0; }
.learning-goal h4 { font-size: 21px; }
.learning-goal > p, .learning-note-list { color: var(--muted); }
.learning-goal textarea, .learning-goal .learning-inline, .learning-goal .learning-check, .learning-answer { width: 100%; }
.learning-inline { display: flex; flex-direction: column; gap: 6px; }
.learning-inline span { font-weight: 600; }
.learning-answer { white-space: pre-wrap; line-height: 1.55; }
.learning-goal h5 { margin: 12px 0 0; font-size: 17px; }
.learning-goal input[type="url"] { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.learning-brief { width: 100%; display: grid; gap: 9px; white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.learning-brief p { color: var(--text); }
.learning-brief small { color: var(--muted); }
.learning-goal .button { min-height: 44px; }
.interest-watch { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding: 8px 0; }
.interest-watch .button { min-height: 44px; }
.updates-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.update-card.is-unread { border-left: 3px solid var(--accent, #c5e889); padding-left: 12px; }
.update-card a { color: var(--text); font-weight: 600; }
.shelf-card a { display: inline-flex; min-height: 44px; align-items: center; color: var(--accent); }
.smart-search { margin: 0 0 28px; scroll-margin-top: 82px; }
.smart-search-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.smart-search-head .eyebrow { margin-bottom: 4px; }
.smart-search-head h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.smart-search-status { min-height: 20px; margin: 8px 0 15px; color: var(--muted); font-size: 13px; }
.smart-search-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.smart-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.smart-card > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #090b0a; }
.smart-card-content { display: grid; align-content: start; gap: 6px; padding: 13px; }
.smart-card h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.7em; margin: 0; font-size: 14px; line-height: 1.35; }
.smart-card p { margin: 0; color: var(--muted); font-size: 12px; }
.smart-card button { width: fit-content; min-height: 44px; margin-top: 3px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--accent); font-size: 12px; font-weight: 650; }
.smart-card button:hover { border-color: var(--accent); }
.quick-help { width: 100%; margin: -12px 0 0; color: var(--muted); font-size: 12px; }
.saved-group { margin-left: 8px; color: var(--accent); font-size: 12px; }
.saved-group-heading { grid-column: 1 / -1; margin: 20px 0 2px; color: var(--accent); font-size: 13px; font-weight: 650; }
.saved-editor { display: grid; gap: 8px; margin-top: 12px; }
.saved-editor input, .saved-editor textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; }
.saved-editor button { min-height: 44px; }
.button { min-height: 46px; display: inline-flex; justify-content: center; align-items: center; border-radius: 999px; padding: 10px 17px; border: 1px solid transparent; text-decoration: none; font-size: 13px; font-weight: 650; transition: background var(--motion), border-color var(--motion), color var(--motion), transform var(--motion); }
.button:active { transform: scale(.98); }
.button-primary { background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { background: #d4f1a4; }
.button-secondary { background: #ffffff08; color: var(--text); border-color: #ffffff27; }
.button-secondary:hover { background: #ffffff12; border-color: #ffffff4a; }
.player-area { width: 100%; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(285px, .85fr); column-gap: 26px; align-items: start; }
.player-shell { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; overflow: hidden; border: 1px solid #ffffff17; border-radius: var(--radius); background: #101311; }
.player-placeholder { position: relative; width: 100%; min-height: 340px; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(145deg, #202b24, #0b0d0c); }
.feature-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-info { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; justify-content: end; align-items: start; padding: clamp(18px, 2.4vw, 32px); background: linear-gradient(180deg, #05080605 20%, #05080675 52%, #050806ed 100%); text-align: left; }
.feature-info .eyebrow { margin-bottom: 8px; }
.feature-info h2 { max-width: 28ch; margin: 0; font-size: clamp(22px, 2.5vw, 34px); line-height: 1.15; letter-spacing: -.045em; font-weight: 620; }
.feature-info > p:not(.consent-line) { margin: 8px 0 14px; color: #e1e9df; font-size: 13px; }
.feature-info .button { min-width: 124px; }
.consent-line { max-width: 42ch; margin: 10px 0 0; color: #d7e0d4; font-size: 11px; }
.inline-consent:not([hidden]) { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 15px; padding: clamp(20px, 4vw, 40px); background: #0b100ded; }
.inline-consent p { max-width: 45ch; margin: 0; line-height: 1.5; }
.inline-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.consent-links { color: var(--muted); font-size: 12px; }
.consent-links a { color: var(--accent); }
.text-button { border: 0; padding: 5px 4px; background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.text-button:hover { color: #e0f6bd; }
.media-frame { position: relative; width: 100%; min-width: 200px; min-height: 200px; aspect-ratio: 16 / 9; background: #000; }
.hs-checkin-overlay, .hs-pause-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 19, 12, 0.72); z-index: 5; }
.hs-checkin-box, .hs-pause-box { display: flex; flex-direction: column; gap: 10px; align-items: stretch; width: min(320px, 86%); padding: 18px; border-radius: 14px; background: var(--surface); color: var(--text); text-align: center; }
.hs-checkin-box input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); font: inherit; }
.hs-camera-pill { position: absolute; top: 10px; left: 10px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(8, 19, 12, 0.72); color: #fff; font-size: 12px; font-weight: 600; }
.hs-camera-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff5b5b; }
.media-frame iframe { display: block; width: 100%; height: 100%; min-width: 200px; min-height: 200px; aspect-ratio: 16 / 9; border: 0; background: #000; }
.media-frame.is-local { min-height: 0; aspect-ratio: auto; display: grid; place-items: center; }
.media-frame.is-local video { display: block; width: auto; max-width: 100%; height: auto; max-height: min(72dvh, 760px); border: 0; background: #000; object-fit: contain; }
.player-tools { grid-column: 1; grid-row: 2; width: 100%; min-height: 48px; margin: 8px 0 0; display: flex; gap: 12px; align-items: center; }
.up-next { grid-column: 2; grid-row: 1 / span 2; min-width: 0; width: 100%; padding: 0 0 4px; }
.up-next-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.up-next-head .eyebrow { margin-bottom: 6px; }
.up-next-head h2 { margin: 0; font-size: clamp(22px, 3vw, 29px); letter-spacing: -.045em; font-weight: 580; }
.up-next-note { margin: 8px 0 18px; color: var(--muted); font-size: 13px; }
.up-next-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.up-next-card { min-width: 0; min-height: 92px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; align-items: center; text-align: left; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.up-next-card:hover { border-color: var(--accent); background: var(--surface-raised); }
.up-next-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; background: #070807; }
.up-next-detail { min-width: 0; display: grid; gap: 5px; padding: 0; }
.up-next-detail strong { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; line-height: 1.35; font-weight: 600; }
.up-next-detail small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.icon-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border: 1px solid #ffffff20; border-radius: 10px; background: #111513; color: var(--text); font-size: 12px; }
.icon-button:hover { background: var(--surface-raised); }
.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.player-note { color: var(--quiet); font-size: 11px; }
.global-status { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.global-status:empty { display: none; }
.saved-space { margin: 34px 0 24px; padding-top: 25px; border-top: 1px solid var(--line); }
.saved-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.saved-head .eyebrow { margin-bottom: 5px; }
.saved-head h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.045em; font-weight: 580; }
.saved-intro { max-width: 60ch; margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.private-badge { flex: none; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); font-size: 11px; }
.save-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 20px; }
.save-form input, .saved-tools input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; }
.save-form input::placeholder, .saved-tools input::placeholder { color: #89928a; }
.save-details { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.saved-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 17px; }
.saved-tools input { max-width: 360px; }
.saved-tools span { flex: none; color: var(--muted); font-size: 12px; }
.saved-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.saved-card { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.saved-source { color: var(--accent); font-size: 11px; font-weight: 650; }
.saved-card h3 { margin: 5px 0 2px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.35; }
.saved-card p { margin: 0; color: var(--muted); font-size: 12px; }
.learning-record-summary { font-size: 14px; color: var(--muted); }
.learning-report { margin-top: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.learning-report section { padding-block: 12px; border-top: 1px solid var(--line); }
@media print {
  body * { visibility: hidden !important; }
  #learningReport, #learningReport * { visibility: visible !important; color: #111 !important; background: #fff !important; }
  #learningReport { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; padding: 0; }
  #learningReport button { display: none !important; }
}
.saved-card .saved-note { margin-top: 8px; color: var(--text); }
.saved-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.saved-actions a, .saved-actions button { display: inline-flex; align-items: center; min-height: 36px; border: 0; background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; padding: 0; }
.saved-actions .saved-remove { margin-left: auto; color: var(--muted); }
.saved-empty { grid-column: 1 / -1; margin: 0; padding: 18px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; font-size: 13px; }
.curated-space { margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.curated-heading h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.045em; }
.curated-heading p:last-child { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.curated-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.curated-card { min-width: 0; display: flex; flex-direction: column; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.curated-card h3 { margin: 8px 0 4px; font-size: 15px; line-height: 1.3; }
.curated-card p { margin: 0; color: var(--muted); font-size: 12px; }
.curated-card .saved-actions { margin-top: auto; padding-top: 14px; }
.curated-result { display: grid; grid-template-columns: 1fr; }
.curated-result button, .curated-result a { width: fit-content; min-height: 36px; border: 0; padding: 4px 0; background: none; color: var(--accent); text-decoration: underline; font-size: 12px; }
.explore-space { margin: 36px 0 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.explore-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.explore-head .eyebrow { margin-bottom: 6px; }
.explore-head h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.045em; font-weight: 580; }
.explore-head p:not(.eyebrow) { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.explore-head .button { flex: none; }
.explore-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 20px 0 12px; }
.explore-check { display: flex; align-items: center; gap: 9px; max-width: 600px; min-height: 44px; color: var(--text); font-size: 13px; cursor: pointer; }
.explore-check input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.explore-topic-label { color: var(--muted); font-size: 12px; }
.explore-controls select { min-height: 44px; max-width: 200px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text); }
.explore-reason { min-height: 20px; margin: 0 0 16px; color: var(--muted); font-size: 12px; }
.explore-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.explore-card { min-width: 0; min-height: 190px; display: flex; flex-direction: column; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.explore-card .eyebrow { margin-bottom: 9px; font-size: 10px; }
.explore-card h3 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.03em; }
.explore-card p { margin: 9px 0; color: var(--muted); font-size: 12px; }
.explore-card small { margin-top: auto; color: var(--quiet); font-size: 11px; }
.explore-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.explore-actions a, .explore-actions button { min-height: 36px; display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; font-size: 12px; }
.explore-foot { margin: 15px 0 0; color: var(--quiet); font-size: 11px; }
.community { width: min(100% - 32px, 760px); margin: 36px auto 96px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); scroll-margin-top: 24px; }
.community-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.community-heading .eyebrow { margin-bottom: 8px; }
.community-heading h2 { margin: 0 0 8px; font-size: clamp(23px, 4vw, 32px); line-height: 1.15; letter-spacing: -.04em; font-weight: 570; }
.community-heading .subtle { max-width: 58ch; margin-bottom: 0; }
.community-heading .button { flex: none; }
.feed-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 16px; }
.feed-tab { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; }
.feed-tab:hover, .feed-tab.is-active { border-color: var(--accent); color: var(--text); }
.feed-tab.is-active { background: #c5e88a12; }
.post-composer { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #ffffff03; }
.post-composer > label, .product-fields label, .report-form label, .comment-form label, .appeal-form label { color: var(--text); font-size: 13px; font-weight: 600; }
.post-composer input:not([type="checkbox"]), .post-composer textarea, .report-form select, .report-form textarea, .comment-form textarea, .appeal-form textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #ffffff26; border-radius: 10px; background: #0b0e0c; color: var(--text); font-size: 16px; }
.post-composer textarea, .report-form textarea, .comment-form textarea, .appeal-form textarea { min-height: 86px; resize: vertical; }
.product-fields { display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 11px; }
.product-fields legend { padding: 0 6px; color: var(--text); font-size: 13px; font-weight: 650; }
.product-fields .field-help { font-size: 12px; }
.product-row { display: grid; gap: 6px; }
.feed-status { min-height: 24px; margin: 14px 0; color: var(--muted); font-size: 13px; }
.feed-posts { display: grid; gap: 12px; }
.feed-card, .status-row { display: grid; gap: 12px; padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #ffffff03; }
.feed-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
.feed-card-head strong { color: var(--text); }
.feed-card-head time { font-size: 12px; }
.post-title { margin: 0; font-size: 19px; line-height: 1.3; }
.post-body { margin: 0; line-height: 1.65; white-space: pre-wrap; }
.source-label { width: fit-content; margin: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 11px; }
.post-video-link, .product-link { width: fit-content; max-width: 100%; color: var(--accent); overflow-wrap: anywhere; text-underline-offset: 3px; }
.post-actions .post-video-link { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; }
.disclosure { margin: -6px 0 0; color: var(--muted); font-size: 12px; }
.why-shown { color: var(--muted); font-size: 12px; }
.why-shown summary { width: fit-content; min-height: 44px; display: flex; align-items: center; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.why-shown p { margin: 2px 0 0; line-height: 1.5; }
.post-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.post-actions button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); }
.post-actions button:hover { border-color: var(--accent); }
.comments-area, .report-form, .comment-form, .appeal-form { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.report-target { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.comment-item .text-button { min-height: 44px; }
.comments-area h3 { margin: 0; font-size: 15px; }
.comment-item, .status-row p { margin: 0; line-height: 1.55; }
.comment-item strong { color: var(--text); }
.my-content { margin-top: 18px; }
.my-content h3 { font-size: 18px; }
.my-content > div { display: grid; gap: 10px; }
.result-card .source-label { grid-column: 1 / -1; }
body.is-playing .community { display: none !important; }
.tick-nav { position: fixed; z-index: 20; top: 50%; right: max(12px, env(safe-area-inset-right)); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0; transition: opacity var(--motion), visibility var(--motion); }
.tick-group { width: 48px; height: 47px; display: grid; place-items: center; }
.tick-hit { width: 48px; height: 47px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; }
.tick-hit:hover, .tick-hit[aria-expanded="true"] { background: #ffffff09; }
.tick { display: block; width: var(--tick-size, 11px); height: 2px; border-radius: 5px; background: #8f9991; transform-origin: right center; transition: width 220ms cubic-bezier(.2,.8,.2,1), background 180ms, opacity 180ms; opacity: .86; }
.tick-hit:hover .tick, .tick-hit:focus-visible .tick, .tick-hit[aria-expanded="true"] .tick { width: 22px; background: var(--accent); opacity: 1; }
.tick-hit[data-panel="space"] .tick { --tick-size: 8px; }
.tick-hit[data-panel="links"] .tick { --tick-size: 14px; }
.tick-hit[data-panel="updates"] .tick { --tick-size: 10px; }
.tick-hit[data-panel="settings"] .tick { --tick-size: 17px; }
.decor-tick { display: block; width: var(--decor-size, 5px); height: 1px; margin: 0; border-radius: 3px; background: #566059; opacity: .78; }
.decor-tick:nth-of-type(4n) { --decor-size: 9px; }
.decor-tick:nth-of-type(5n) { --decor-size: 3px; }
.tick-hit.has-new .tick { animation: new-cue 450ms ease-in-out 3; background: #85dc7b; }
@keyframes new-cue { 0%,100% { transform: scaleX(1); filter: brightness(1); } 45% { transform: scaleX(1.75); filter: brightness(1.6); } }
.popover { position: fixed; z-index: 19; top: 50%; right: max(72px, calc(env(safe-area-inset-right) + 68px)); transform: translateY(-50%); width: min(420px, calc(100vw - 104px)); max-height: min(86dvh, 880px); overflow: auto; overscroll-behavior: contain; padding: 22px 22px 24px; border: 1px solid #ffffff1c; border-radius: 16px; background: #121613; box-shadow: 0 24px 80px #0009; }
.tick-nav { top: auto; right: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(50%); flex-direction: row; gap: 2px; padding: 5px; border: 1px solid var(--line); border-radius: 15px; background: #121613f2; box-shadow: 0 8px 30px #0008; }
.tick-group { width: auto; height: auto; }
.tick-hit { width: auto; min-width: 54px; height: 46px; padding: 0 12px; }
.tick-hit[aria-expanded="true"] { background: #c5e88a1b; color: var(--accent); }
.tick, .decor-tick { display: none; }
.tick-label { font-size: 12px; white-space: nowrap; }
.popover { top: auto; right: max(24px, env(safe-area-inset-right)); bottom: 84px; transform: none; width: min(460px, calc(100vw - 48px)); max-height: min(76dvh, 760px); }
.layout { padding-bottom: 110px; }
.popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.popover-head .eyebrow { margin: 0; }
.close-popover { width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.close-popover svg { width: 17px; height: 17px; }
.panel-content h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; letter-spacing: -.035em; font-weight: 570; }
.subtle { margin: 0 0 19px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.form-stack { display: grid; gap: 9px; margin: 18px 0 0; }
.form-stack label { color: #e6ebe6; font-size: 12px; font-weight: 600; }
.form-stack input:not([type="checkbox"]), .form-stack textarea, .form-stack select, .search-row input { width: 100%; min-height: 46px; border: 1px solid #ffffff26; border-radius: 10px; padding: 10px 12px; background: #0b0e0c; color: var(--text); font-size: 16px; }
.form-stack textarea { min-height: 92px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #78827b; opacity: 1; }
.search-row { display: flex; gap: 8px; align-items: stretch; }
.search-row input { min-width: 0; }
.search-row .button { flex: none; }
.field-help { margin: 0; color: var(--quiet); font-size: 11px; line-height: 1.5; }
.field-error { margin: 0; color: var(--danger); font-size: 12px; }
.link-form { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.results, .draft-list, .link-list, .updates-list { display: grid; gap: 9px; margin-top: 18px; }
.result-card, .draft-card, .link-card, .update-card { display: grid; gap: 10px; padding: 11px; border: 1px solid #ffffff17; border-radius: 12px; background: #ffffff04; }
.result-card { grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.result-card img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; background: #090b0a; }
.result-card h3, .draft-card h3, .link-card h3 { margin: 0; font-size: 13px; line-height: 1.35; font-weight: 620; }
.result-card p, .draft-card p, .link-card p, .update-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.card-actions button, .card-actions a { min-height: 44px; padding: 9px 13px; border: 1px solid #ffffff26; border-radius: 999px; background: transparent; color: var(--text); text-decoration: none; font-size: 12px; }
.card-actions button:hover, .card-actions a:hover { border-color: var(--accent); color: var(--accent); }
.check-row { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.check-row input, .simple-setting input { width: 18px; height: 18px; accent-color: var(--accent); }
.space-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 12px; }
.danger-text { color: var(--danger); }
.setting-row { min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting-row span { display: grid; gap: 3px; }
.setting-row strong { font-size: 13px; font-weight: 620; }
.setting-row small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.setting-row .button { min-height: 40px; padding: 8px 12px; white-space: nowrap; }
.simple-setting select { max-width: 110px; min-height: 42px; border: 1px solid #ffffff26; border-radius: 9px; background: #0b0e0c; color: var(--text); padding: 7px; }
.policy-links { display: grid; gap: 3px; margin: 14px 0; }
.policy-links a { width: fit-content; min-height: 36px; display: inline-flex; align-items: center; color: var(--accent); font-size: 12px; text-underline-offset: 3px; }
.auth-panel { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.account-controls { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.account-controls h3 { margin: 0; font-size: 16px; }
.account-controls .field-help { font-size: 12px; }
.account-controls > .button { width: fit-content; }
.delete-account-details { padding-top: 12px; border-top: 1px solid var(--line); }
.delete-account-details summary { min-height: 44px; display: flex; align-items: center; width: fit-content; color: var(--danger); cursor: pointer; }
.delete-account-details > p { margin: 8px 0 12px; }
.account-delete-form { display: grid; gap: 9px; }
.account-delete-form label { font-size: 13px; font-weight: 600; }
.account-delete-form input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #ffffff26; border-radius: 10px; background: #0b0e0c; color: var(--text); font-size: 16px; }
.button-danger { width: fit-content; border: 1px solid #ff9b9155; border-radius: 999px; padding: 10px 16px; background: #ff9b9116; color: var(--danger); font-size: 13px; font-weight: 650; }
.button:disabled, .button-danger:disabled { opacity: .5; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.is-playing .topbar, body.is-playing .tick-nav, body.is-playing .popover, body.is-playing .welcome { opacity: 0; visibility: hidden; pointer-events: none; }
body.is-playing .welcome, body.is-playing .curated-space, body.is-playing .saved-space, body.is-playing .explore-space { display: none !important; }
/* Reel "Learn more" row: a compact horizontal strip below the player while
   watching, hidden in true fullscreen so it never covers the video. */
body.is-playing .up-next { margin-top: 12px; padding-top: 0; min-width: 0; max-width: 100%; }
body.is-playing .up-next-note { display: none; }
body.is-playing .up-next-head h2 { font-size: 15px; }
/* The fixed Fullscreen button sits over this row's right edge; keep the
   "Search" link and the last scrolled-to card clear of its footprint. */
body.is-playing .up-next-head { padding-right: 100px; }
body.is-playing .up-next-list { display: flex; gap: 10px; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 4px; padding-right: 100px; contain: layout; -webkit-overflow-scrolling: touch; }
body.is-playing .up-next-card { flex: 0 0 150px; grid-template-columns: 1fr; scroll-snap-align: start; min-height: 0; }
body.is-playing .up-next-card img { border-radius: 10px; }
body.is-playing .up-next-detail strong { font-size: 12px; }
body.is-playing .player-area:fullscreen .up-next { display: none !important; }
/* The shared player lives inside the normally hidden Home School section. Keep
   only the player (plus its own reflection/discussion/challenge follow-ups,
   which app.js keeps is-playing set through so the ended-video "end card"
   stays in this same compact layout instead of the dashboard flooding back
   in) visible while watching, including on the main app route. */
body.is-playing #homeSchool { display: block !important; width: 100%; max-width: none; margin: 0; padding: 0; border: 0; }
body.is-playing #homeSchool > :not(#playerArea):not(.learning-reflection):not(.discussion-panel):not(.challenge-panel) { display: none !important; }
body.is-playing .smart-search, body.is-playing .home-videos { display: none !important; }
html:has(body.is-playing) { scrollbar-gutter: stable both-edges; }
/* display stays block (not grid): a grid item under place-items:center is
   sized before percentages can resolve against its track, so a min(100%, …)
   width below would resolve wrong on the narrow branch. Centering instead
   comes from .watch-column's own margin: 0 auto (set in the base rule),
   which needs a definite containing-block width — exactly what a plain
   block .layout provides. */
body.is-playing .layout { overflow-x: hidden; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
/* Player width is derived from whichever is tighter: the viewport's inline
   space, or its block space at a 16:9 ratio (so the video always fits fully,
   with no horizontal page scroll, on short/landscape screens too). 96px is
   the vertical budget for player-tools plus the layout's own padding; the
   100vh rule is a fallback for browsers without dvh support (Android's
   dynamic toolbar makes 100dvh the more accurate unit where available). */
body.is-playing .watch-column {
  width: min(100%, calc((100vh - 96px - var(--player-top-pad, 0px) - var(--player-bottom-reserve, 0px)) * 16 / 9));
  width: min(100%, calc((100dvh - 96px - var(--player-top-pad, 0px) - var(--player-bottom-reserve, 0px)) * 16 / 9));
  max-width: 1400px;
  margin: 0 auto;
}
body.is-playing .player-area { display: block; width: 100%; padding-top: var(--player-top-pad, 0px); }
body.is-playing .player-area:fullscreen { padding-top: 0; }
body.is-playing .player-shell { width: 100%; }
body.is-playing .player-shell { border: 0; background: transparent; overflow: visible; border-radius: var(--radius); }
body.is-playing .player-area:fullscreen .player-shell { border-radius: 0; }
body.is-playing .media-frame {
  width: min(100%, calc((100vh - 96px - var(--player-top-pad, 0px) - var(--player-bottom-reserve, 0px)) * 16 / 9));
  width: min(100%, calc((100dvh - 96px - var(--player-top-pad, 0px) - var(--player-bottom-reserve, 0px)) * 16 / 9));
  max-width: 1400px;
  margin: auto;
  border-radius: var(--radius);
  overflow: hidden;
}
body.is-playing .player-area:fullscreen .media-frame { border-radius: 0; }
body:not(.is-playing) .player-home, body:not(.is-playing) .player-swipe-handle, body:not(.is-playing) .player-back { display: none !important; }
.player-home { position: fixed; z-index: 40; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid #ffffff42; border-radius: 999px; background: #0b0d0ce8; color: var(--text); font-size: 15px; font-weight: 680; letter-spacing: -.04em; box-shadow: 0 4px 20px #0008; backdrop-filter: blur(8px); }
.player-home:hover { color: var(--accent); background: #171c19f2; }
.player-home:active { background: #263126; }
.player-back { position: fixed; z-index: 40; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); min-height: 44px; display: none; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #ffffff42; border-radius: 999px; background: #0b0d0ce8; color: var(--text); font-size: 14px; font-weight: 650; letter-spacing: -.02em; box-shadow: 0 4px 20px #0008; backdrop-filter: blur(8px); cursor: pointer; }
.player-back:hover { color: var(--accent); background: #171c19f2; }
.player-back:active { background: #263126; }
body.is-playing .player-back { display: inline-flex; }
.player-swipe-handle { display: none; }
@media (max-width: 600px) {
  .player-home { width: 48px; padding: 8px; justify-content: center; }
  .player-home .brand-mark { width: 18px; height: 18px; flex: none; }
  .player-home > span:last-child { display: none; }
}
/* Desktop (>768px): a labeled back button replaces the icon-only clearline
   pill, so exactly one top-left affordance shows at any width. */
@media (min-width: 769px) {
  body.is-playing .player-home { display: none !important; }
}
@media (max-width: 768px) {
  body.is-playing .player-back { display: none !important; }
}
@media (any-pointer: coarse) {
  .player-swipe-handle { position: fixed; z-index: 40; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(190px, 45vw); min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #ffffff30; border-radius: 999px; background: #0b0d0ccf; color: var(--text); font-size: 11px; line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 20px #0008; touch-action: none; user-select: none; }
  .player-swipe-grip { width: 28px; height: 3px; border-radius: 999px; background: var(--accent); }
}
body.is-playing .player-tools {
  width: min(100%, calc((100vh - 96px) * 16 / 9));
  width: min(100%, calc((100dvh - 96px) * 16 / 9));
  max-width: 1400px;
  /* Its only content (fullscreen button, pause button) becomes fixed-position
     below, and .player-note is hidden, so nothing here needs flow space.
     Without this the row still reserved its min-height/margin as a blank
     band between the player and the up-next row. */
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: visible;
}
body.is-playing .player-tools .player-note { display: none; }
body.homeschool-route .watch-column > :not(#homeSchool), body.homeschool-route .top-search, body.homeschool-route .create-link, body.homeschool-route .tick-nav, body.homeschool-route .popover, body.homeschool-route .community { display: none !important; }
/* The site header (.topbar) is fixed at 66px tall; on this route the
   Home School title sits right under it, with no extra saved-space margin
   or divider (those belong to the generic saved-space look, not this route). */
body.homeschool-route .layout { padding-top: calc(66px + env(safe-area-inset-top) + 14px); }
body.homeschool-route .watch-column { max-width: 1000px; margin: 0 auto; }
body.homeschool-route #homeSchool { display: block !important; margin-top: 0; padding-top: 0; border-top: 0; }
body.homeschool-route #homeSchool { max-width: 1080px; }
.hs-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: none; }
.hs-profile-button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff08; color: var(--text); font-size: 13px; font-weight: 620; cursor: pointer; }
.hs-profile-button:hover, .hs-profile-button:focus-visible { border-color: var(--accent); color: var(--accent); }
#learningProfileSheet .hs-sheet { width: min(560px, 100%); }
#learningProfileSheet .learning-chips { margin-top: 0; }
body.homeschool-route.is-playing #homeSchool { display: block !important; }
body.homeschool-route.is-playing #homeSchool > :not(#playerArea):not(.learning-reflection):not(.discussion-panel):not(.challenge-panel) { display: none !important; }
body.homeschool-route.is-playing .layout { padding-top: 0; }
body.homeschool-route.is-playing .watch-column { width: min(100%, 1000px); }
.learning-reflection { margin: 26px 0 36px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--accent); border-radius: 16px; background: var(--surface); }
.learning-reflection[hidden] { display: none !important; }
.learning-reflection h3 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 32px); }
.learning-reflection p { line-height: 1.5; color: var(--muted); }
.learning-reflection textarea { display: block; width: 100%; margin: 16px 0; padding: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.learning-reflection .learning-check { display: flex; gap: 10px; margin-bottom: 16px; }

/* Part C: "Talk about this clip" discussion panel + end-of-video challenge. */
.discussion-panel, .challenge-panel { margin: 20px 0 36px; }
/* Follow-up panels belong to the clip that just played; never show them on other tabs. */
body:not(.is-playing) .learning-reflection,
body:not(.is-playing) .discussion-panel,
body:not(.is-playing) .challenge-panel { display: none !important; }
/* Shown in place of the prompt chips while prompts are still generating, so
   the space under the just-ended player never sits empty before they arrive. */
.discussion-skeleton { display: grid; gap: 8px; margin: 10px 0 16px; }
.discussion-skeleton .skeleton-bar { height: 34px; border-radius: 999px; width: min(100%, 420px); background: linear-gradient(90deg, #ffffff0a 25%, #ffffff17 37%, #ffffff0a 63%); background-size: 400% 100%; animation: discussion-skeleton-pulse 1.4s ease infinite; }
.discussion-skeleton .skeleton-bar:nth-child(2) { width: min(100%, 340px); }
.discussion-skeleton .skeleton-bar:nth-child(3) { width: min(100%, 380px); }
@keyframes discussion-skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .discussion-skeleton .skeleton-bar { animation: none; } }
.discussion-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.discussion-prompt-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff08; font-size: 13.5px; cursor: pointer; text-align: left; max-width: 100%; }
.discussion-prompt-chip:hover, .discussion-prompt-chip:focus-visible { border-color: var(--accent); }
.discussion-thread { display: grid; gap: 8px; margin: 10px 0; }
.discussion-thread p { margin: 0; padding: 10px 14px; border-radius: 12px; max-width: 80%; line-height: 1.5; }
.discussion-turn-child { justify-self: end; background: #c5e88a1f; color: var(--text); }
.discussion-turn-tutor { justify-self: start; background: #ffffff08; color: var(--text); }
.discussion-panel textarea { display: block; width: 100%; margin: 10px 0; padding: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.discussion-panel .learning-check { display: flex; gap: 10px; margin-bottom: 12px; }
.challenge-question { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.challenge-question legend { padding: 0 6px; font-weight: 600; }
.challenge-choice { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.challenge-correct { color: var(--accent); font-weight: 600; }
.challenge-wrong { color: var(--muted); }

.learning-guardian { margin: 36px 0; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.learning-guardian h3 { margin: 0 0 8px; font-size: clamp(24px, 3vw, 32px); }
.learning-guardian > p { max-width: 72ch; color: var(--muted); line-height: 1.5; }
.learning-guardian input[type="password"] { display: block; width: min(100%, 300px); padding: 12px; margin: 18px 0; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.learning-guardian .learning-check { display: flex; gap: 10px; margin-bottom: 16px; max-width: 70ch; }
.learning-guardian button { margin: 0 8px 8px 0; }
.learning-review-list { display: grid; gap: 14px; }
.learning-review-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.learning-review-card h4 { margin: 0 0 5px; }
.learning-review-card p { line-height: 1.5; overflow-wrap: anywhere; }
.learning-review-card textarea { display: block; width: 100%; padding: 10px; margin-bottom: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.learning-review-card select { display: block; min-height: 44px; padding: 8px 12px; margin-bottom: 12px; color: var(--text); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.learning-onboarding { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 5vw, 70px); margin: 34px 0; padding: clamp(24px, 5vw, 52px); background: #1b211c; border: 1px solid var(--line); border-radius: 24px; }
.learning-onboarding[hidden], #learningDashboard[hidden] { display: none !important; }
.learning-path { margin: 28px 0 42px; }
.learning-path > h3 { font-size: clamp(27px, 4vw, 42px); letter-spacing: -.04em; margin: 0 0 8px; }
.learning-caution { color: var(--muted); max-width: 72ch; line-height: 1.5; margin: 0 0 28px; }
.learning-path-group { margin: 0 0 34px; }
.learning-path-group h4 { font-size: 23px; margin: 0 0 14px; text-transform: capitalize; }
.learning-path-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.learning-video { display: flex; flex-direction: column; min-width: 0; padding: 0 0 14px; color: var(--text); text-decoration: none; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.learning-video { text-align: left; cursor: pointer; font: inherit; }
.learning-video:hover,.learning-video:focus-visible { border-color: var(--accent); }
.learning-video img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #272d29; }
.learning-video small,.learning-video strong,.learning-video span { margin: 8px 13px 0; }
.learning-video small { color: var(--accent); text-transform: uppercase; letter-spacing: .11em; font-weight: 700; }
.learning-video strong { line-height: 1.35; }
.learning-video span { color: var(--muted); font-size: 13px; }
.learning-video { position: relative; }
.learning-video-progress { display: block; margin: 8px 13px 0; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.learning-video-progress-fill { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.learning-video-badge { position: absolute; top: 8px; right: 8px; background: var(--accent); color: #08130c; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.learning-extras { margin: 50px 0; border-top: 1px solid var(--line); }
.learning-extras > summary { cursor: pointer; min-height: 52px; padding: 20px 0; color: var(--muted); }
@media (max-width: 700px) { .learning-path-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media (max-width: 470px) { .learning-path-grid { grid-template-columns: 1fr; } }
.learning-onboarding h3 { margin: 6px 0 15px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -.05em; }
.learning-onboarding p { color: var(--muted); line-height: 1.55; }
.learning-interests { border: 0; padding: 6px 0; display: flex; flex-wrap: wrap; gap: 9px; }
.learning-interests legend { font-weight: 600; margin: 0 0 10px; }
.learning-interests label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; min-height: 44px; border: 1px solid var(--line); border-radius: 100px; cursor: pointer; }
.learning-interests label:has(input:checked) { border-color: var(--accent); background: #c5e8891c; }
.learning-interests input { accent-color: var(--accent); }
.learning-location { margin: 2px 0 12px; }
.learning-dashboard-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 30px 0 22px; }
.learning-dashboard-head p:last-child { margin: 5px 0 0; color: var(--muted); }
.learning-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.learning-next > div { padding: 24px; min-height: 180px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.learning-next h3 { font-size: 20px; margin: 8px 0; }
.learning-next p { color: var(--muted); margin: 0; }
.learning-step { color: var(--accent); font-size: 13px; font-weight: 700; }
.activity-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.activity-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; color: var(--text); text-decoration: none; background: var(--surface); }
.activity-card:hover,.activity-card:focus-visible { border-color: var(--accent); }
.activity-card img,.activity-cover { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #29372f; }
.activity-cover { display: grid; place-items: center; color: var(--accent); font-size: 12px; letter-spacing: .14em; font-weight: 700; }
.activity-copy { display: flex; flex-direction: column; gap: 8px; padding: 15px; line-height: 1.4; }
.activity-copy small { color: var(--accent); font-size: 13px; font-weight: 700; }
.activity-copy strong { font-size: 17px; }
.activity-copy span { color: var(--muted); font-size: 13px; }
.activity-copy em { margin-top: auto; font-size: 13px; font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.activity-caution { color: var(--muted); font-size: 13px; }
@media (max-width: 750px) { .activity-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px) { .activity-list { grid-template-columns: 1fr; } }
.learning-network-gate { padding: clamp(20px, 4vw, 32px); margin-bottom: 34px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.learning-network-gate h3 { margin: 8px 0; font-size: clamp(21px, 3vw, 28px); }
.learning-network-gate p:last-child { max-width: 78ch; color: var(--muted); }
@media (max-width: 700px) { .learning-onboarding { grid-template-columns: 1fr; } .learning-next { grid-template-columns: 1fr; } .learning-next > div { min-height: auto; } .learning-dashboard-head { align-items: start; flex-direction: column; } }
body.is-playing .global-status { display: none; }
body.is-playing #fullscreenButton { position: fixed; z-index: 30; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); background: #111513e8; }
body.is-playing #pauseButton { position: fixed; z-index: 30; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
body.is-playing .player-tools { pointer-events: none; }
body.is-playing .player-tools button { pointer-events: auto; }
body.is-playing .player-area:fullscreen { width: 100vw; height: 100dvh; display: grid; place-items: center; background: #000; }
body.is-playing .player-area:fullscreen .player-shell { width: 100%; }
body.is-playing .player-area:fullscreen .media-frame { width: 100%; max-height: 100dvh; }
@media (max-width: 980px) {
  .smart-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .curated-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout { padding-inline: 52px; }
  .player-area { grid-template-columns: 1fr; }
  .up-next { grid-column: 1; grid-row: 3; padding-top: 24px; }
  .up-next-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-next-card { grid-template-columns: 110px minmax(0, 1fr); }
  .saved-list { grid-template-columns: 1fr; }
  .explore-list { grid-template-columns: 1fr; }
  .explore-card { min-height: 160px; }
}
@media (max-width: 560px) {
  .smart-search-grid { grid-template-columns: 1fr; }
  .smart-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); }
  .smart-card > img { height: 100%; min-height: 122px; }
  .smart-card-content { padding: 10px; }
  .topbar { gap: 8px; padding-right: 12px; }
  .brand span:last-child { display: none; }
  .top-search { gap: 5px; }
  .top-search input { font-size: 16px; padding: 8px 10px; }
  .top-search .button { min-width: 44px; min-height: 44px; padding: 8px; }
  .topbar .account { min-width: 54px; max-width: 86px; overflow: hidden; padding: 0 4px; font-size: 12px; text-overflow: ellipsis; }
  .topbar .account[data-auth="true"] { min-width: 44px; max-width: 44px; justify-content: center; font-size: 0; }
  .topbar .account[data-auth="true"] img { flex: none; }
  .space-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .create-link { min-width: 42px; padding: 0 10px; }
  .create-link span:last-child { display: none; }
  .home-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 9px; }
  .curated-list { grid-template-columns: 1fr; }
  .layout { padding-right: 12px; padding-bottom: 100px; }
  .tick-nav { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); transform: none; justify-content: space-around; }
  .tick-group { width: auto; height: auto; flex: 1; }
  .tick-hit { width: 100%; min-width: 0; height: 46px; padding: 0 3px; }
  .tick-label { font-size: 10px; }
  .popover { right: 12px; left: 12px; bottom: max(78px, calc(env(safe-area-inset-bottom) + 72px)); width: auto; max-height: min(76dvh, 720px); }
  .topbar { height: 58px; padding-left: max(16px, env(safe-area-inset-left)); }
  .layout { padding: 74px 66px 24px 12px; }
  .welcome { padding: 0 0 16px; flex-wrap: wrap; gap: 12px; }
  .welcome > div > p:not(.eyebrow) { font-size: 13px; }
  .welcome .button { min-height: 44px; }
  .player-placeholder { min-height: 350px; aspect-ratio: 4 / 5; }
  .feature-info { padding: 18px; }
  .feature-info h2 { font-size: clamp(21px, 5.5vw, 28px); }
  .inline-consent:not([hidden]) { padding: 18px; }
  .tick-nav { right: max(4px, env(safe-area-inset-right)); }
  .tick-group, .tick-hit { width: 44px; height: 46px; }
  .popover { right: max(54px, calc(env(safe-area-inset-right) + 50px)); width: calc(100vw - max(68px, calc(env(safe-area-inset-right) + 64px))); max-height: min(82dvh, 760px); padding: 16px 15px 18px; }
  .search-row { flex-wrap: wrap; }
  .search-row .button { min-width: 90px; }
  .search-row input { flex: 1 1 150px; }
  .media-frame { min-height: 200px; }
  .up-next-list { grid-template-columns: 1fr; }
  .up-next-card { grid-template-columns: 110px minmax(0, 1fr); }
  .saved-head { flex-direction: column; gap: 8px; }
  .save-form { grid-template-columns: 1fr; }
  .save-form .button { width: 100%; }
  .save-details { grid-column: 1; grid-template-columns: 1fr; }
  .explore-head { align-items: start; flex-direction: column; }
  .explore-head .button { min-height: 44px; }
  .community { width: calc(100% - 24px); margin: 24px auto 76px; padding: 17px 14px; }
  .community-heading { flex-direction: column; }
  .community-heading .button { min-width: 44px; }
  .feed-card, .status-row { padding: 14px; }
  .feed-card-head { align-items: flex-start; flex-direction: column; gap: 2px; }
}
@media (max-height: 420px) and (orientation: landscape) {
  .layout { min-height: 100dvh; padding-top: 62px; padding-bottom: 20px; }
  .player-placeholder { min-height: 220px; aspect-ratio: 16 / 9; }
  .popover { max-height: 90dvh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation: none !important; }
}
@media (max-width: 560px) {
  .layout { padding: 74px 12px 102px; }
  .tick-nav { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); transform: none; }
  .tick-group { width: auto; height: auto; flex: 1; }
  .tick-hit { width: 100%; min-width: 0; height: 46px; padding: 0 2px; }
  .popover { top: auto; left: 12px; right: 12px; bottom: max(76px, calc(env(safe-area-inset-bottom) + 70px)); width: auto; max-height: min(76dvh, 720px); transform: none; }
}

/* ---- 2026-09-25 polish: add tiles, add sheet, quieter saved cards ---- */
.home-add-tile { display: grid; place-content: center; justify-items: center; gap: 6px; min-width: 0; aspect-ratio: 16 / 9; align-self: start; padding: 0; border: 1px dashed #3a453e; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; transition: border-color var(--motion), color var(--motion), background var(--motion); }
.home-add-tile:hover, .home-add-tile:focus-visible { border-color: var(--accent); color: var(--accent); background: #c5e88a0d; }
.home-add-plus { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-raised); color: var(--accent); font-size: 24px; font-weight: 300; line-height: 1; }
.home-add-tile small { font-size: 12px; }
.home-add-tile.is-quiet { border-color: #232a26; }
.home-add-tile.is-quiet .home-add-plus { width: 30px; height: 30px; font-size: 19px; background: transparent; color: var(--quiet); }
.home-add-tile.is-quiet small { display: none; }

.add-sheet { width: min(440px, calc(100vw - 24px)); max-height: min(92dvh, 720px); margin: auto; padding: 0; border: 1px solid #ffffff1c; border-radius: 20px; background: var(--surface-raised); color: var(--text); box-shadow: 0 30px 90px #000c; overflow: auto; }
.add-sheet::backdrop { background: #000a; backdrop-filter: blur(6px); }
.add-sheet[open] { animation: sheet-in 220ms cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.add-sheet-inner { display: grid; gap: 12px; padding: 18px 18px 20px; }
.add-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.add-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -.02em; }
.add-sheet-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #ffffff0f; color: var(--muted); cursor: pointer; }
.add-sheet-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.add-sheet-close:hover { color: var(--text); }
.add-sheet-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--bg); }
.add-sheet-tabs button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.add-sheet-tabs button[aria-selected="true"] { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 0 #ffffff12 inset; }
.add-sheet-preview { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border: 1px dashed #3a453e; border-radius: 14px; background: var(--bg); }
.add-sheet-preview.has-media { border-style: solid; border-color: var(--line); }
.add-sheet-preview img, .add-sheet-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.add-sheet-preview small { position: absolute; left: 10px; bottom: 8px; max-width: calc(100% - 20px); overflow: hidden; padding: 2px 8px; border-radius: 999px; background: #000a; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.add-sheet-plus { color: var(--quiet); font-size: 34px; font-weight: 200; }
.add-sheet-domain { color: var(--accent); font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.add-sheet input:not([type="file"]) { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.add-sheet input::placeholder { color: #89928a; }
.add-sheet-pick { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.add-sheet-pick:hover { border-color: var(--accent); }
.add-sheet-status { min-height: 1.2em; margin: 0; color: var(--muted); font-size: 13px; }
.add-sheet-status a { color: var(--accent); }
.add-sheet-save { width: 100%; min-height: 48px; border-radius: 12px; font-weight: 650; }
.add-sheet-save:disabled { opacity: .4; cursor: default; }
@media (max-width: 560px) {
  .add-sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); }
  .add-sheet-head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #ffffff26; }
  .add-sheet-inner { padding-top: 22px; }
  @keyframes sheet-in { from { transform: translateY(100%); } }
}

/* Saved cards: thumbnail plays, actions stay quiet. */
.saved-card { display: flex; flex-direction: column; padding: 10px 10px 8px; border-radius: 14px; }
.saved-card .content-cover { position: relative; margin-bottom: 10px; border-radius: 10px; }
button.content-cover { padding: 0; font: inherit; cursor: pointer; }
.content-cover.is-playable img { transition: opacity var(--motion), transform 300ms ease; }
.play-glyph { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #0b0d0cb8; backdrop-filter: blur(6px); opacity: 0; transform: scale(.9); transition: opacity var(--motion), transform var(--motion); }
.play-glyph::after { content: ""; position: absolute; top: 15px; left: 19px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--text); }
.content-cover.is-playable:hover .play-glyph, .content-cover.is-playable:focus-visible .play-glyph { opacity: 1; transform: scale(1); }
.content-cover.is-playable:hover img { opacity: .82; }
@media (hover: none) { .content-cover.is-playable .play-glyph { opacity: .9; transform: scale(.8); } }
.saved-card-body { padding: 0 4px; }
.saved-meta { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; }
.saved-meta .saved-group { margin-left: 0; color: var(--muted); font-size: 11px; }
.saved-meta .saved-group::before { content: "·"; margin-right: 8px; color: var(--quiet); }
.saved-card h3 { margin: 3px 0 0; }
.saved-card .saved-note { margin-top: 6px; }
.saved-actions { gap: 2px 14px; margin-top: auto; padding: 8px 4px 0; }
.saved-actions a, .saved-actions button { min-height: 32px; color: var(--quiet); text-decoration: none; font-size: 12px; font-weight: 500; }
.saved-actions a:hover, .saved-actions button:hover, .saved-actions a:focus-visible, .saved-actions button:focus-visible { color: var(--text); }
.saved-actions .saved-remove { color: var(--quiet); }
.saved-actions .saved-remove:hover { color: var(--danger); }
.saved-editor { padding: 0 4px 6px; }

/* Keep content clear of the floating bottom nav. */
.layout { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.community { margin-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) {
  .add-sheet[open] { animation: none; }
  .play-glyph, .home-add-tile, .content-cover.is-playable img { transition: none; }
}
@media (max-width: 560px) {
  .top-search { flex: 1 1 0; width: auto; min-width: 0; }
  .topbar .account-wrap, .topbar .create-link { flex: none; }
}

/* Home School: header profile chips + learning assistant bar */
.learning-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff05; max-width: 100%; }
.learning-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 11px; border: 1px solid transparent; border-radius: 999px; background: #c5e88a1f; color: var(--text); font: inherit; font-size: 12.5px; line-height: 1.2; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
button.learning-chip:hover { border-color: var(--accent); }
.learning-chip:focus-visible, .chip-remove:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-age { background: #8ac5e81f; } .chip-grade { background: #e8c58a1f; } .chip-city { background: #b98ae81f; }
.chip-tone-0 { background: #c5e88a1f; } .chip-tone-1 { background: #8ae8c51f; } .chip-tone-2 { background: #e88ab91f; } .chip-tone-3 { background: #e8e08a1f; }
.chip-interest { cursor: default; padding-right: 4px; }
.chip-remove { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; }
.chip-remove:hover:not(:disabled) { background: #ffffff14; color: var(--text); }
.chip-remove:disabled { opacity: .35; cursor: not-allowed; }
.chip-add { min-width: 30px; justify-content: center; border: 1px dashed #3a453e; background: transparent; color: var(--muted); }
.chip-pop { display: grid; gap: 8px; margin-top: 8px; padding: 10px; width: min(340px, 100%); border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.chip-pop select, .chip-pop input { width: 100%; min-width: 0; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.chip-pop-form { display: flex; gap: 6px; } .chip-pop-form .button { min-height: 40px; }
.chip-pop-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.chip-preset { background: transparent; border-color: var(--line); color: var(--muted); }
.learn-ask { width: min(650px, 100%); margin: 14px auto 10px; }
.learn-ask input, .learn-ask .button { min-height: 42px; }
.learn-ask-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: min(650px, 100%); margin: 0 auto 10px; color: var(--muted); font-size: 13px; }
.learn-ask-confirm span { flex: 1 1 200px; }
.learn-ask-confirm .button { min-height: 36px; }
.learn-ask-card { width: min(650px, 100%); margin: 0 auto 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.learn-ask-card p { margin: 0; white-space: pre-line; }
.learn-ask-card small { display: block; margin-top: 8px; color: var(--quiet); font-size: 12px; }
.learn-ask-thread { display: flex; flex-direction: column; gap: 10px; width: min(650px, 100%); margin: 0 auto 10px; }
.learn-ask-bubble { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.learn-ask-bubble-user { background: transparent; border-style: dashed; }
.learn-ask-bubble .learn-ask-text { margin: 0; white-space: pre-line; }
.learn-ask-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.learn-ask-tools small { color: var(--quiet); font-size: 12px; flex: 1 1 200px; }
.learn-ask-tools .button { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.learning-custom-interest { flex: 1 1 220px; border-style: dashed !important; }
.learning-custom-interest input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; }
@media (max-width: 560px) { .learning-chips { border-radius: 16px; } .learn-ask input { font-size: 16px; } }
@media (prefers-reduced-motion: no-preference) {
  .learning-chip, .chip-remove { transition: border-color 140ms ease, background-color 140ms ease; }
  .chip-pop { animation: chip-pop-in 140ms ease-out; }
  @keyframes chip-pop-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
}

/* Agent dashboard: "one project, one step at a time". Kid-facing (age 8-15),
   big tap targets, few words, dark UI with the lime accent already in :root. */
.agent-dashboard { display: grid; gap: 16px; margin: 18px 0 28px; }

/* Pending-approval banner: small, top of the dashboard, only when non-empty. */
.dash-approvals { display: grid; gap: 10px; padding: 14px clamp(14px,3vw,20px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.dash-approval-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.dash-approval-row:first-of-type { border-top: 0; }
.dash-approval-row p { flex: 1 1 220px; margin: 0; }
.dash-approval-stages { color: var(--quiet); }
.dash-approval-row .button { min-height: 48px; padding: 8px 16px; }
.dash-approval-status { color: var(--muted); flex-basis: 100%; }

/* Project hero: the one active project, one step at a time. */
.project-hero { display: grid; gap: 16px; padding: clamp(18px,3.5vw,28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); }
.project-hero-title { margin: 0; font-size: clamp(21px,3vw,28px); letter-spacing: -.01em; }
.project-step-path { display: flex; flex-wrap: wrap; gap: 8px; }
.project-step-dot { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); color: var(--muted); font-size: 18px; }
.project-step-dot.is-done { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.project-step-dot.is-current { border-color: var(--accent); color: var(--accent); }
.project-step-dot.is-selected { outline: 3px solid var(--ring); outline-offset: 2px; }
.project-step-card { display: grid; gap: 10px; padding: clamp(14px,3vw,20px); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.project-step-label { color: var(--quiet); text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
.project-step-card h3 { margin: 0; font-size: clamp(19px,2.6vw,23px); }
.project-step-do { margin: 0; }
.project-step-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.project-step-actions .button { min-height: 52px; padding: 10px 20px; font-size: 16px; flex: 1 1 160px; }
.project-step-done { font-weight: 650; }

.project-empty, .project-celebration { text-align: center; justify-items: center; }
.project-empty h2, .project-celebration h2 { margin: 0; font-size: clamp(21px,3vw,26px); }
.project-celebration textarea { width: 100%; max-width: 480px; min-height: 80px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; }
.project-celebration h3 { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.project-starter-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.project-starter-chips .button { min-height: 48px; }

/* "This week near you": weather strip + up to 6 activity cards, right under
   the project card on the main Home School view. */
.local-week { display: grid; gap: 14px; padding: clamp(16px,3.5vw,24px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.local-week-head h3 { margin: 4px 0 0; font-size: clamp(19px,2.6vw,23px); }
.weather-strip { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.weather-day { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); text-align: center; }
.weather-day strong { font-size: 13px; }
.weather-icon { font-size: 24px; line-height: 1; }
.weather-temps { font-size: 13px; font-weight: 600; }
.weather-day small { color: var(--muted); font-size: 11px; line-height: 1.2; }
.weather-banner { margin: 0; padding: 10px 14px; border-radius: 12px; background: #ff8a0018; color: var(--text); font-weight: 600; font-size: 14px; }
.weather-attribution { margin: 0; color: var(--quiet); font-size: 11.5px; }
.local-week .activity-list { margin-top: 2px; }
.activity-copy .activity-badges { display: flex; flex-wrap: wrap; gap: 6px; color: inherit; font-size: inherit; }
.activity-badge { padding: 2px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-raised); font-size: 11.5px; font-weight: 600; }
.activity-copy small.activity-source { color: var(--quiet); font-weight: 400; }
.indoor-ideas { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; }
.indoor-ideas p { margin: 0; font-weight: 600; }
.indoor-ideas ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--muted); }
.indoor-ideas .button { justify-self: start; min-height: 44px; padding: 8px 16px; }
@media (max-width: 480px) { .weather-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* Other projects: compact collapsible list, one line each. */
.other-projects { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px clamp(14px,3vw,20px); background: #ffffff03; }
.other-projects > summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; font-size: 15px; }
.other-projects > summary::-webkit-details-marker { display: none; }
.other-projects > summary::after { content: '▾'; margin-left: 6px; color: var(--muted); }
.other-projects[open] > summary::after { content: '▴'; }
.other-projects-list { display: grid; gap: 6px; padding: 4px 0 12px; }
.other-project-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.other-project-row:first-child { border-top: 0; }
.other-project-row span { flex: 1 1 160px; }
.other-project-row .button { min-height: 44px; padding: 6px 14px; font-size: 13.5px; }
.other-project-row .text-button { min-height: 44px; padding: 6px 10px; font-size: 13.5px; }

/* One gentle suggestion line, at most. */
.suggestion-line { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 40px 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff05; }
.suggestion-line p { margin: 0; flex: 1 1 200px; }
.suggestion-line .button { min-height: 40px; padding: 6px 14px; font-size: 13.5px; }
.dash-suggestion-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 999px; background: transparent; border: 1px solid transparent; font-size: 16px; line-height: 1; }
.dash-suggestion-close:hover { border-color: var(--line); }

/* My learning: its own tab, open by default (see #panelMyLearning / #hsMyLearning-tab). */
.my-learning { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px clamp(14px,3vw,20px) clamp(14px,3vw,20px); background: var(--surface); }
.my-learning-heading { min-height: 52px; display: flex; align-items: center; font-size: clamp(17px,2.2vw,19px); font-weight: 600; margin: 0; }
.my-learning-body { display: grid; gap: 20px; padding-top: 6px; }
.my-learning-body .learning-companion { border: 0; padding: 0; margin: 0; }
.concept-legend { margin: 0 0 10px; color: var(--quiet); font-size: 13px; }
.concept-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.concept-pill { padding: 4px 10px; border-radius: 999px; background: #ffffff08; font-size: 12.5px; }
.concept-pill-mastered { background: #c5e88a2a; color: var(--accent); }

/* This week strip (My learning). */
.this-week-strip h4 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Skill mastery row (My learning). */
.skill-mastery-row h4 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.skill-mastery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.skill-mastery-card { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); text-align: center; }
.skill-mastery-label { font-size: 13px; color: var(--text); }
.skill-mastery-badge { position: absolute; top: 6px; right: 8px; font-size: 15px; }

/* Undo toast (marking a step done, removing a project). */
.undo-toast { position: fixed; z-index: 40; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 999px; background: var(--surface-raised); border: 1px solid var(--line); box-shadow: 0 12px 30px #000a; max-width: calc(100vw - 32px); }
.undo-toast button { min-height: 40px; color: var(--accent); font-weight: 650; }

/* Light celebration confetti — skipped entirely under reduced motion. */
.confetti-light { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.confetti-light span { position: absolute; top: -10%; font-size: 22px; animation: confetti-fall 1.4s ease-in forwards; }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(40deg); opacity: 0; } }

.learning-video-explorer { margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(12px,2.5vw,18px); background: #ffffff03; }
.learning-video-explorer > summary { cursor: pointer; font-size: 17px; font-weight: 600; list-style: none; }
.learning-video-explorer > summary::-webkit-details-marker { display: none; }
.learning-video-explorer > summary::before { content: '▸ '; }
.learning-video-explorer[open] > summary::before { content: '▾ '; }
.learning-video-explorer[open] > summary { margin-bottom: 12px; }

@media (max-width: 480px) {
  .project-step-actions .button, .dash-approval-row .button, .other-project-row .button { flex: 1 1 auto; }
  .project-step-dot { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .confetti-light { display: none; } }

/* ---------------------------------------------------------------------------
   Phase A navigation: Today · Subjects · Projects · Explore sticky segmented
   nav, plus the skill map / practice UI. Top on desktop, bottom on mobile.
--------------------------------------------------------------------------- */
.hs-nav { position: sticky; top: calc(66px + env(safe-area-inset-top)); z-index: 15; display: flex; gap: 4px; padding: 8px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #121613f2; backdrop-filter: blur(8px); box-shadow: 0 8px 24px #0006; }
.hs-nav-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 52px; padding: 6px 4px; border: none; border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 650; cursor: pointer; transition: background var(--motion), color var(--motion); }
.hs-nav-btn span:first-child { font-size: 18px; }
.hs-nav-btn:hover { background: #ffffff0d; color: var(--text); }
.hs-nav-btn[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.hs-nav-btn.hs-nav-lang, .hs-nav-btn.hs-nav-guardian { flex: 0 0 auto; padding: 6px 12px; }
.hs-panel { animation: hs-panel-in .18s ease; }
@keyframes hs-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hs-panel { animation: none; } }

@media (max-width: 700px) {
  .hs-nav { position: fixed; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); top: auto; z-index: 30; margin: 0; }
  #homeSchool { padding-bottom: 84px; }
}

/* Today: at most 3 priority cards. */
.hs-today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 0 0 20px; }
.hs-today-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.hs-today-card h3 { margin: 0; font-size: 16px; }
.hs-today-card .eyebrow { margin: 0; }
.hs-today-empty { color: var(--muted); font-size: 14px; }

/* Mastery ring: a simple conic-gradient donut, 0-100. */
.mastery-ring { --pct: 0; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), #ffffff1a 0); }
.mastery-ring::after { content: attr(data-pct); width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--text); }
.mastery-ring.is-mastered { background: conic-gradient(var(--ring) calc(var(--pct) * 1%), #ffffff1a 0); }
.hs-today-card-head { display: flex; align-items: center; gap: 12px; }

/* Subjects: program/grade header + subject skill lists. */
.hs-subjects-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.hs-subject-block { margin-bottom: 22px; }
.hs-subject-block h3 { margin: 0 0 10px; font-size: 17px; }
.hs-skill-list { display: flex; flex-direction: column; gap: 8px; }
.hs-skill-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff03; }
.hs-skill-row.is-recommended { border-color: var(--accent); background: #c5e88a12; }
.hs-skill-row.is-locked { opacity: .55; }
.hs-skill-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.hs-skill-main strong { font-size: 14px; }
.hs-skill-meta { font-size: 12px; color: var(--muted); }
.hs-mastery-mini { --pct: 0; width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), #ffffff1a 0); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; }
.hs-mastery-mini::after { content: attr(data-pct); width: 26px; height: 26px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.hs-award { font-size: 15px; }
.hs-based-on { margin-top: 8px; font-size: 12px; color: var(--quiet); }

/* Skill detail / practice / result screens. */
.hs-skill-detail { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--surface); }
.hs-watch-status:empty { display: none; }
.learning-idea-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.learning-idea-fallback p { margin: 0; color: var(--muted); flex: 1 1 220px; }
.hs-practice-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--surface); margin-top: 14px; }
.hs-practice-choice { display: block; width: 100%; text-align: left; padding: 12px 14px; margin: 6px 0; border: 1px solid var(--line); border-radius: 10px; background: #ffffff05; color: var(--text); cursor: pointer; font-size: 14px; }
.hs-practice-choice:hover { background: #ffffff10; }
.hs-practice-choice.is-correct { border-color: var(--ring); background: #d5f39d1f; }
.hs-practice-choice.is-wrong { border-color: var(--danger); background: #ff9b911f; }
.hs-practice-choice:disabled { cursor: default; }
.hs-result-banner { font-size: 15px; font-weight: 650; margin: 0 0 6px; }
.hs-stepback { margin-top: 12px; padding: 12px; border: 1px dashed var(--accent); border-radius: 10px; }
.hs-passage { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #ffffff05; }
.hs-passage summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--muted); }
.hs-passage-text { margin: 10px 0 0; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.hs-report-btn { display: block; margin-top: 12px; padding: 0; border: none; background: none; color: var(--quiet); font-size: 12px; text-decoration: underline; cursor: pointer; }
.hs-report-btn:disabled { cursor: default; text-decoration: none; opacity: .7; }
@media (max-width: 640px) {
  .hs-passage summary { font-size: 12px; }
}

/* ---------------------------------------------------------------------------
   Interest chip → Interest page, own-idea field, project suggestions,
   finished-project shelf, generic detail sheet, My learning showcase
   (stat tiles + Knowledge garden), and the weather detail sheet.
--------------------------------------------------------------------------- */
.chip-interest-name { border: 0; padding: 0; background: none; color: inherit; font: inherit; font-size: inherit; cursor: pointer; }
.chip-interest-name:hover, .chip-interest-name:focus-visible { text-decoration: underline; color: var(--accent); }

.interest-page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.interest-back { flex: 0 0 auto; font-size: 14px; }
.interest-page-title { display: flex; align-items: center; gap: 10px; }
.interest-page-emoji { font-size: 30px; line-height: 1; }
.interest-page-title h2 { margin: 0; font-size: clamp(20px,3vw,26px); }
.interest-section { margin: 0 0 26px; }
.interest-section h3 { margin: 0 0 10px; font-size: 16px; }

.project-own-idea { display: grid; gap: 8px; justify-items: center; margin-top: 4px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.project-own-idea label { font-weight: 650; }
.project-own-idea input { width: min(420px, 100%); min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.project-suggestion-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; width: 100%; margin-top: 6px; }
.project-suggestion-card { min-height: 56px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; font-size: 13.5px; }
.project-suggestion-card:hover, .project-suggestion-card:focus-visible { border-color: var(--accent); }

.finished-projects-shelf { margin-top: 18px; }
.finished-projects-shelf h4 { margin: 0 0 8px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.finished-projects-row { display: flex; flex-wrap: wrap; gap: 10px; }
.finished-project-card { display: grid; gap: 4px; width: 168px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.finished-project-card:hover, .finished-project-card:focus-visible { border-color: var(--accent); }
.finished-project-emoji { font-size: 20px; }
.finished-project-card strong { font-size: 13.5px; line-height: 1.3; }
.finished-project-card small { color: var(--muted); font-size: 11.5px; }
.finished-projects-shelf.is-compact .finished-project-card { width: 140px; padding: 10px 12px; }
.finished-project-steps { margin: 0; padding-left: 22px; display: grid; gap: 6px; }

/* Generic detail sheet. */
.hs-sheet-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: #05070680; padding: 0; }
.hs-sheet { width: min(640px, 100%); max-height: 88vh; overflow-y: auto; border-radius: 20px 20px 0 0; background: var(--surface-raised); border: 1px solid var(--line); border-bottom: none; padding: 18px clamp(16px,4vw,26px) 28px; }
.hs-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; position: sticky; top: 0; background: var(--surface-raised); padding-top: 2px; }
.hs-sheet-head h2 { margin: 0; font-size: clamp(18px,2.6vw,22px); }
.hs-sheet-close { flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.hs-sheet-close:hover, .hs-sheet-close:focus-visible { border-color: var(--accent); color: var(--accent); }
.hs-sheet-body { display: grid; gap: 12px; }
@media (min-width: 641px) {
  .hs-sheet-overlay { align-items: center; }
  .hs-sheet { border-radius: 20px; border-bottom: 1px solid var(--line); }
}

/* Concept detail sheet. */
.concept-sheet-status { margin: 0; font-size: 15px; font-weight: 650; }
.evidence-timeline { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; color: var(--text); }
.concept-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.concept-sheet-videos:not([hidden]) { margin-top: 4px; }
.concept-sheet-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.concept-sheet-note textarea { flex: 1 1 220px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.concept-sheet-note small { color: var(--muted); flex-basis: 100%; }
button.concept-pill { border: 0; font: inherit; cursor: pointer; }
button.concept-pill:hover, button.concept-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* My learning: stat tiles + Knowledge garden. */
.my-learning-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.stat-tile { display: grid; gap: 2px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
.stat-tile-num { font-size: clamp(22px,3.4vw,28px); font-weight: 700; color: var(--accent); }
.stat-tile span:last-child { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.knowledge-garden h4, .from-projects h4 { margin: 0 0 4px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.concept-legend { margin: 0 0 6px; color: var(--quiet); font-size: 12px; }
.garden-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.garden-card { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.garden-card-head { display: flex; align-items: center; gap: 10px; }
.garden-ring { width: 44px; height: 44px; font-size: 10px; }
/* Bug fixed 2026-09-26: this used to zero the ring's own percentage text out
   (font-size: 0), so every garden ring rendered as a filled donut with no
   visible number at all ("rings empty"). */
.garden-ring::after { width: 34px; height: 34px; font-size: 10.5px; font-weight: 700; }
.garden-icons { display: flex; flex-wrap: wrap; gap: 6px; }
/* Bug fixed 2026-09-26: garden icons used to be a bare emoji circle with the
   concept name only in a hover title/aria-label (invisible at a glance,
   "garden icons unlabeled"). Each is now a labeled chip, e.g. "🌿 Ratios and
   rates", clickable straight through to the concept sheet. */
.garden-icon { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff05; font-size: 13px; cursor: pointer; max-width: 100%; }
.garden-icon:hover, .garden-icon:focus-visible { border-color: var(--accent); }
.garden-icon-emoji { font-size: 15px; line-height: 1; flex: 0 0 auto; }
.garden-icon-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; color: var(--text); }
.garden-icon-seen { opacity: .65; }
.garden-icon-practised { opacity: .85; }
.garden-icon-mastered { border-color: var(--accent); background: #c5e88a1f; }
.skill-mastery-ring { width: 44px; height: 44px; font-size: 10px; }
.skill-mastery-ring::after { width: 34px; height: 34px; font-size: 10.5px; font-weight: 700; }

/* Weather day detail sheet. */
button.weather-day { font: inherit; cursor: pointer; }
.weather-day:hover, .weather-day:focus-visible { border-color: var(--accent); }
.weather-sheet-summary { margin: 0; font-size: 16px; font-weight: 600; }
.weather-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.weather-meta-item { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.weather-meta-item small { color: var(--muted); font-size: 11px; }
.weather-meta-item strong { font-size: 15px; }
.hourly-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.hourly-cell { flex: 0 0 auto; display: grid; justify-items: center; gap: 3px; min-width: 52px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hourly-cell small { color: var(--muted); font-size: 11px; }
.hourly-rain:not(:empty) { color: var(--accent); }
.weather-advice { margin: 0; padding: 12px 14px; border-radius: 12px; background: #ffffff05; font-weight: 600; }

/* Guardian interest manager. */
.hs-interest-manager { margin-top: 14px; }
.hs-interest-manage-list { display: grid; gap: 8px; }
.hs-interest-manage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.hs-interest-manage-row:first-of-type { border-top: 0; }
.hs-interest-manage-row span { flex: 1 1 120px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .stat-tile-num { transition: none; }
}
@media (max-width: 480px) {
  .interest-page-head { gap: 8px; }
  .finished-project-card, .finished-projects-shelf.is-compact .finished-project-card { width: 132px; }
}

/* ---- Mobile player (<=768px): pinned "Learn more" row + top breathing room ---- */
@media (max-width: 768px) {
  :root { --player-top-pad: calc(74px + env(safe-area-inset-top)); }
  /* Pin the reel's Learn-more row to the bottom of the screen so it never
     needs a page scroll to reach; its own list still scrolls horizontally.
     #playerArea's touch handler (app.js) ignores swipes starting inside
     #upNextList so this row's own horizontal scroll still works. */
  body.is-playing .up-next {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 35;
    margin: 0;
    max-width: none;
    padding: 10px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: linear-gradient(180deg, transparent, #0b0d0cf5 35%);
  }
  body.is-playing .player-area:fullscreen .up-next { position: static; }
  /* Keep "Learn more"; the "Your next choice" eyebrow is dropped only here. */
  body.is-playing .up-next-head .eyebrow { display: none; }
  body.is-playing .up-next-head { padding-right: 0; }
  /* The fullscreen button floats just above the pinned row instead of
     under it (--player-bottom-reserve is measured/set in app.js). */
  body.is-playing #fullscreenButton { z-index: 36; bottom: calc(var(--player-bottom-reserve, 0px) + max(10px, env(safe-area-inset-bottom))); }
  /* On a tall/narrow phone the 16:9 frame is width-constrained, so it never
     uses the whole height budget between the top pills and the pinned row.
     Center it in that band (instead of pinning it to the top, which would
     leave a dead gap sitting only below the video, right above the row). */
  body.is-playing .player-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - var(--player-bottom-reserve, 0px));
  }
  body.is-playing .player-area:fullscreen { min-height: 0; justify-content: flex-start; }
}

/* ---- Home School: Today's videos row ---- */
.hs-today-videos { margin-top: 26px; }
.hs-today-videos-heading { margin: 0 0 12px; font-size: clamp(18px, 2.6vw, 22px); letter-spacing: -.03em; }
.hs-today-videos .learning-path-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }