/* ============================================================
   ProsperAI Family — Guardian + Child apps.
   Imports the app design system (tokens, buttons, modals, toasts,
   compare view, settings, sparkle) and layers family-specific UI.
   ============================================================ */
/* Versioned deliberately. app.css carries the app frame for all three apps and
   was referenced with no query string at all, so a returning phone could keep a
   cached copy indefinitely — which is how a layout fix ships as an invisible
   no-op. Bump this AND the link in app/index.html together whenever app.css
   changes; family.css's own ?v= only busts this file, not what it imports. */
@import url("../../app/css/app.css?v=2");

/* ---------- shared ---------- */
.role-tag {
  font-size: 0.68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  border-radius: 999px; padding: 3px 10px; background: var(--accent-soft); color: var(--accent);
}
.role-tag.kid { background: var(--c-child-soft); color: var(--c-child); }

.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.25rem; background: var(--paper-2); border: 1px solid var(--line); flex: none;
}

.src-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 3px 10px; color: var(--ink-2);
}
.aud-chip { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--c-adult-soft); color: var(--c-adult); }

/* ---------- guardian: dashboard ---------- */
.kid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 24px; }
.kid-tile {
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; text-align: left;
}
.kid-tile.child { border-top-color: var(--c-child); }
.kid-tile.teen { border-top-color: var(--c-teen); }
.kid-tile .kt-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kid-tile .kt-top .em { font-size: 1.7rem; }
.kid-tile h3 { font-size: 1.05rem; }
.kid-tile .kt-group { font-size: 0.76rem; color: var(--ink-2); }
.kid-tile .kt-stats { display: flex; gap: 7px; flex-wrap: wrap; }

.quick-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }

.activity { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 6px 0; }
.activity .act {
  display: flex; gap: 10px; padding: 9px 18px; font-size: 0.86rem; border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.activity .act:last-child { border-bottom: 0; }
.activity .act time { flex: none; color: var(--ink-2); opacity: .75; font-size: 0.76rem; padding-top: 2px; min-width: 58px; }

/* ---------- guardian: groups & children ---------- */
.group-block { margin-bottom: 28px; }
.group-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.group-head h2 { font-size: 1.15rem; }
.group-head .g-note { color: var(--ink-2); font-size: 0.82rem; }
.group-head .g-actions { margin-left: auto; display: flex; gap: 8px; }
.follow-note { font-size: 0.74rem; font-weight: 700; color: var(--c-adult); background: var(--c-adult-soft); border-radius: 999px; padding: 3px 10px; }

/* ---------- guardian: classrooms ----------
   Visually a classroom is not the household — it is somebody else's standards
   arriving in your app, and it should read that way. */
.section-rule {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 18px; margin: 6px 0 18px;
}
.section-rule h2 { font-size: 1.15rem; }
.section-rule .g-note { color: var(--ink-2); font-size: 0.82rem; flex: 1 1 320px; }
.section-rule .btn { margin-left: auto; }

.class-block {
  border: 1px solid var(--line); border-left: 4px solid var(--c-adult);
  border-radius: var(--radius); background: var(--panel); padding: 18px 20px;
}
.class-block .group-head { margin-bottom: 4px; }
.teacher-line { font-size: 0.84rem; color: var(--ink-2); margin-bottom: 10px; }
.class-notes {
  font-family: var(--font-body); font-size: 0.88rem; color: var(--ink-2);
  border-left: 2px solid var(--line); padding-left: 12px; margin: 4px 0 14px;
}
.class-line { font-size: 0.8rem; color: var(--ink-2); margin: 2px 0 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.enroll-list { display: flex; flex-direction: column; gap: 8px; }
.enroll-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px;
}
.enroll-row .em { font-size: 1.5rem; }
.enroll-row .er-who { display: flex; flex-direction: column; min-width: 150px; }
.enroll-row .er-home { font-size: 0.76rem; color: var(--ink-2); }
.enroll-row .er-follow { margin: 0 auto 0 0; font-size: 0.84rem; }
.enroll-picks { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.enroll-pick .chip { margin-left: 6px; }

/* Home / classroom / result, so a guardian can see which side each line
   came from rather than taking the merge on trust. */
.std-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 14px 16px; margin: 14px 0 4px; }
.std-panel h3 { font-size: 0.98rem; margin-bottom: 10px; }
.std-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.std-table th, .std-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.std-table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.std-table tbody th { font-weight: 600; color: var(--ink-2); }
.std-table td:last-child { color: var(--ink); }
.std-table tr.from-class td:last-child { background: var(--c-adult-soft); color: var(--c-adult); font-weight: 700; }

/* Prism: whose standards the reader is under, next to their name. */
.class-tag {
  margin-left: 10px; font-size: 0.72rem; font-weight: 700;
  background: var(--c-adult-soft); color: var(--c-adult); border-radius: 999px; padding: 3px 10px;
}
@media (max-width: 560px) { .class-tag { display: none; } }

/* ---------- guardian: sources ---------- */
.src-list { display: flex; flex-direction: column; gap: 12px; }
.src-row {
  display: flex; align-items: center; gap: 15px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 18px;
}
.src-row .ico { font-size: 1.6rem; width: 40px; text-align: center; }
.src-row .sr-main { flex: 1; min-width: 0; }
.src-row .sr-main strong { display: block; }
.src-row .sr-main span { font-size: 0.82rem; color: var(--ink-2); }
.src-row.soon { opacity: 0.65; }
.soon-tag { font-size: 0.7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pend); background: var(--pend-soft); border-radius: 999px; padding: 3px 10px; }
.src-row .sr-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.gmail-status { display: block; margin-top: 4px; font-size: 0.78rem; font-weight: 600; color: var(--ink-2); }

/* ---------- guardian: browser add-in (Prism Lens) ---------- */
.lens-status {
  display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 18px; margin-bottom: 22px;
}
.lens-status .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--ink-2); }
.lens-status.ok .dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.lens-status.warn .dot { background: var(--pend); box-shadow: 0 0 0 4px var(--pend-soft); }
.lens-status.off .dot { background: var(--ink-2); }
.lens-status .ls-main { flex: 1; min-width: 0; }
.lens-status .ls-main strong { display: block; }
.lens-status .ls-main span { font-size: 0.82rem; color: var(--ink-2); }
.lens-site select {
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink);
  padding: 7px 9px; font: inherit; font-size: 0.84rem;
}
.chip-row { display: flex; gap: 9px; flex-wrap: wrap; }
.chip-btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 15px;
  font-size: 0.88rem; font-weight: 600; color: var(--ink-2);
}
.chip-btn.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-btn .dim { opacity: 0.6; font-weight: 500; }

/* ---------- guardian: content stream ---------- */
.stream-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.stream-filter button {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 14px;
  font-size: 0.84rem; font-weight: 600; color: var(--ink-2);
}
.stream-filter button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stream-list { display: flex; flex-direction: column; gap: 12px; }
.stream-row {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 18px; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
}
.stream-row:hover { border-color: var(--accent); }
.stream-row .sr-body { flex: 1; min-width: 0; }
.stream-row .sr-body strong { display: block; }
.stream-row .sr-body .meta { font-size: 0.8rem; color: var(--ink-2); }
.stream-row .ed-chips { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.ed-chip { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.ed-chip.ok { background: var(--ok-soft); color: var(--ok); }
.ed-chip.none { background: var(--paper-2); color: var(--ink-2); border: 1px dashed var(--line); }
.ed-chip.na { display: none; }

/* ---------- guardian: requests ---------- */
.req-row {
  display: flex; align-items: center; gap: 14px; background: var(--panel);
  border: 1px solid var(--line); border-left: 4px solid var(--pend); border-radius: var(--radius);
  padding: 14px 18px; width: 100%; text-align: left;
}
.req-row.done { border-left-color: var(--line); opacity: 0.8; }
.req-row:hover { border-color: var(--accent); }
.req-row .rq-main { flex: 1; min-width: 0; }
.req-row .rq-main strong { display: block; }
.req-row .rq-main span { font-size: 0.82rem; color: var(--ink-2); }
.req-status { font-size: 0.74rem; font-weight: 800; border-radius: 999px; padding: 4px 11px; }
.req-status.pending { background: var(--pend-soft); color: var(--pend); }
.req-status.approved { background: var(--ok-soft); color: var(--ok); }
.req-status.reedited { background: var(--c-adult-soft); color: var(--c-adult); }
.req-status.denied { background: var(--warn-soft); color: var(--warn); }

/* The waiting-reader bar, under the topbar on every view. Deliberately loud —
   it replaced a toast that faded before anyone could act on it. */
.ask-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--pend-soft); border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--pend); padding: 11px 20px;
}
.ask-bar .abar-main { flex: 1; min-width: 180px; }
.ask-bar .abar-main strong { display: block; }
.ask-bar .abar-main span { font-size: 0.82rem; color: var(--ink-2); }
@media (max-width: 640px) { .ask-bar { padding: 10px 14px; gap: 8px; } }

/* ---------- Prism Relay (Labs) ----------
   The banner is deliberately the loudest thing in either app. Every other
   surface here is designed to reassure; this one exists to interrupt, because
   it marks the only state in which this product's central claim is narrower
   than usual. It uses the teen accent rather than an error colour — the relay
   working is not a fault — and it cannot be dismissed, only switched off. */
.relay-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--c-teen-soft); color: var(--ink);
  border-bottom: 1px solid var(--line); border-left: 4px solid var(--c-teen);
  padding: 10px 20px; font-size: 0.88rem;
}
.relay-bar.bad { background: var(--warn-soft); border-left-color: var(--warn); }
.relay-bar .rb-main { flex: 1; min-width: 200px; }
.relay-bar .rb-main strong { display: block; }
.relay-bar .rb-main span { font-size: 0.82rem; color: var(--ink-2); }
.relay-bar .rb-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--c-teen); box-shadow: 0 0 0 4px var(--c-teen-soft);
  animation: relay-pulse 2.4s ease-in-out infinite;
}
.relay-bar.bad .rb-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); animation: none; }
/* Prism's reader is a child: same fact, no jargon, and nothing to switch. */
.relay-bar.kid { background: var(--ok-soft); border-left-color: var(--ok); }
.relay-bar.kid .rb-dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
@keyframes relay-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .relay-bar .rb-dot { animation: none; } }
@media (max-width: 640px) { .relay-bar { padding: 9px 14px; gap: 8px; } }

/* The Labs group in Settings, marked so it never reads as a settled feature. */
.set-group.labs { border: 1px dashed var(--c-teen); border-radius: var(--radius); padding: 16px 18px; }
.labs-tag {
  font-size: 0.66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--c-teen-soft); color: var(--c-teen); border-radius: 999px;
  padding: 3px 9px; vertical-align: middle; margin-left: 6px;
}
/* The trade-off, set apart from the sales pitch above it on purpose: a reader
   deciding whether to switch this on should be able to find the cost without
   reading the benefit first. */
.relay-honest {
  border-left: 3px solid var(--c-teen); background: var(--paper-2);
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 12px 0;
  font-size: 0.86rem; line-height: 1.65; color: var(--ink-2);
}
.relay-honest strong { color: var(--ink); }
.relay-no { font-size: 0.86rem; color: var(--ink-2); font-style: italic; }

/* ============================================================
   CHILD APP — big, friendly, click-and-read
   ============================================================ */
body.child-app { font-size: 17px; }
.child-app .topbar { gap: 10px; }
.child-app .hi { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.child-app .hi .em { font-size: 1.5rem; }

.child-app .view { padding-top: 22px; }

.shelf-cats { display: flex; flex-direction: column; gap: 28px; }
.shelf-cat-title {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
  font-size: 0.84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2);
}
.shelf-cat-title .ico { font-size: 1.25rem; }
.shelf-cat-title .cat-count {
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; font-size: 0.72rem; color: var(--ink-2);
}
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.shelf-card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow); padding: 20px; text-align: left;
  display: flex; flex-direction: column; gap: 10px; transition: transform .12s ease;
}
.shelf-card:hover { transform: translateY(-3px); }
.shelf-card .sc-top { display: flex; align-items: center; gap: 10px; }
.shelf-card .sc-top .big-em { font-size: 2.1rem; }
.shelf-card h3 { font-size: 1.2rem; line-height: 1.25; }
.shelf-card .sc-by { font-size: 0.84rem; color: var(--ink-2); }
.shelf-card .sc-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.shelf-card .new-dot {
  position: absolute; top: 14px; right: 16px; background: var(--accent); color: #fff;
  font-size: 0.66rem; font-weight: 800; letter-spacing: .06em; border-radius: 999px; padding: 4px 10px;
  animation: pop .25s ease;
}

/* child reader */
.kid-reader {
  border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow);
  padding: 34px clamp(20px, 5vw, 56px); font-size: 1.14rem; line-height: 1.8; max-width: 44em; margin: 0 auto;
}
.kid-reader h1 { font-size: 1.7rem; margin-bottom: 4px; }
.kid-reader .kr-by { color: var(--ink-2); font-size: 0.9rem; margin-bottom: 20px; }
.kid-reader p { margin-bottom: 16px; }
.kid-reader.original-mode { border-style: dashed; }
/* translation: the status bar lines up with the page it describes, and the
   translated line sits tight under the English it belongs to */
.view-inner > .tr-bar { max-width: 44em; margin: 0 auto 18px; }
.kid-reader .tr-line { margin: 0 0 22px; }
.kid-reader p.tr-line.reading { background: var(--pend-soft); border-radius: 8px; box-shadow: 0 0 0 6px var(--pend-soft); }
.doc-figure { margin: 0 0 18px; }
.doc-figure img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.doc-figure figcaption { font-size: 0.8rem; line-height: 1.5; color: var(--ink-2); margin-top: 7px; }

/* news-clip player: a poster with play/pause, timed frames, progress bar */
.doc-video { margin: 0 0 18px; }
.doc-video .dv-stage { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #10131a; }
.doc-video .dv-frame { display: block; width: 100%; height: auto; }
.doc-video .dv-play {
  position: absolute; inset: 0; width: 100%; display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
}
.doc-video .dv-play-ico {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.5rem; color: #fff; background: rgba(16, 19, 26, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.85); padding-left: 4px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.doc-video .dv-play:hover .dv-play-ico { transform: scale(1.08); background: rgba(16, 19, 26, 0.82); }
.doc-video.playing .dv-play-ico { opacity: 0; }
.doc-video.playing .dv-play:hover .dv-play-ico { opacity: 1; }
.doc-video .dv-time {
  position: absolute; right: 10px; bottom: 10px; font-size: 0.74rem; font-weight: 700;
  color: #fff; background: rgba(16, 19, 26, 0.68); border-radius: 999px; padding: 3px 10px;
}
.doc-video .dv-badge {
  position: absolute; left: 10px; top: 10px; font-size: 0.72rem; font-weight: 800;
  color: var(--ink); background: var(--gold, #d7a021); border-radius: 999px; padding: 3px 10px;
}
.doc-video .dv-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.doc-video .dv-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
.doc-video figcaption { font-size: 0.8rem; line-height: 1.5; color: var(--ink-2); margin-top: 7px; }

/* reader feedback: the child's tap (Prism) and the guardian's inbox */
.fb-box {
  max-width: 44em; margin: 18px auto 0; text-align: center;
  border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; background: var(--panel);
}
.fb-box .fb-q { font-weight: 800; margin-bottom: 10px; }
.fb-box .fb-opts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fb-box .fb-opt {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 8px 15px; font-weight: 700; cursor: pointer;
}
.fb-box .fb-opt:hover { border-color: var(--accent); }
.fb-box .fb-opt.picked { background: var(--accent); border-color: var(--accent); color: #fff; }
.fb-box .fb-note { margin-top: 10px; font-size: 0.82rem; color: var(--ink-2); }
.fb-inbox {
  border: 1px solid var(--line); border-left: 5px solid var(--gold, #d7a021);
  border-radius: var(--radius); background: var(--panel); padding: 14px 18px; margin-bottom: 18px;
}
.fb-inbox h3 { margin: 0 0 10px; }
.fb-inbox .fb-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.fb-inbox .fb-row:first-of-type { border-top: 0; }
.fb-inbox .fb-em { font-size: 1.3rem; }
.fb-inbox .fb-msg { flex: 1; min-width: 200px; }
.fb-inbox .fb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ---------- original PDF, embedded for an approved reader ---------- */
.kid-reader.pdf-mode { max-width: 60em; }
.orig-pdf {
  display: block; width: 100%; height: min(80vh, 900px); margin-top: 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
}
.orig-pdf-actions { margin-top: 12px; }
/* ---------- Live engine cost readout ---------- */
.engine-cost {
  display: inline-block; margin-top: 8px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2);
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.engine-cost a { color: inherit; }

/* ---------- the daily spend cap ----------
   The design system has no "caution" colour, and reaching the cap is not an
   error to be coloured like one — the cap worked. Its own amber token, themed
   both ways like everything else in app.css. */
:root { --cap-over: #b45309; }
@media (prefers-color-scheme: dark) { :root { --cap-over: #e0a23c; } }
:root[data-theme="light"] { --cap-over: #b45309; }
:root[data-theme="dark"] { --cap-over: #e0a23c; }

.cap-unit { color: var(--ink-2); font-size: 0.9rem; }
.cap-meter {
  margin-top: 12px; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--paper-2); border: 1px solid var(--line);
}
.cap-meter > span {
  display: block; height: 100%; border-radius: 999px; background: var(--accent);
  transition: width 0.3s ease;
}
.cap-meter.over > span { background: var(--cap-over); }
/* ---------- Prism: reply to an email (guardian-approved send) ---------- */
.reply-box {
  margin: 18px auto 0; max-width: 40em; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.reply-box h4 { margin: 0 0 10px; font-size: 1rem; }
.reply-box textarea {
  width: 100%; min-height: 96px; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  padding: 11px 13px; font: inherit; font-size: 0.98rem; margin-bottom: 10px;
}
.reply-box.sent { border-color: var(--ok); background: var(--ok-soft); }
.reply-box .rb-status { font-weight: 700; }
.reply-box .rb-draft { margin-top: 8px; font-style: italic; color: var(--ink-2); }
.reply-box .rb-note { margin-top: 8px; font-size: 0.9rem; }
.reply-box .rb-note + .btn, .reply-box .rb-draft + .btn { margin-top: 10px; }
/* guardian: an outgoing reply in the Requests queue */
.req-row.reply-row .avatar { background: var(--c-adult-soft); }
.kid-reader.fs-big { font-size: 1.28rem; }
.kid-reader.fs-huge { font-size: 1.45rem; }
.kid-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 44em; margin: 0 auto 16px; }
.kid-toolbar .tb-spacer { flex: 1; }

/* story-to-story navigation: a labelled bar of its own, so it can never be
   mistaken for the read-aloud transport buttons */
.story-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  max-width: 44em; margin: 0 auto 12px;
}
.story-bar .sn-btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; padding: 8px 15px; cursor: pointer; color: var(--ink);
  box-shadow: var(--shadow);
}
.story-bar .sn-btn:hover:not([disabled]) { border-color: var(--accent); }
.story-bar .sn-btn[disabled] { opacity: 0.35; cursor: default; box-shadow: none; }
.story-bar .sn-pos { font-size: 0.78rem; color: var(--ink-2); font-weight: 700; text-align: center; }

.read-progress {
  max-width: 44em; margin: 0 auto 14px; height: 6px; border-radius: 999px;
  background: var(--line); overflow: hidden;
}
.read-progress span { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width 0.25s ease; }

.next-up { max-width: 44em; margin: 18px auto 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.next-up .nu-card {
  flex: 1; min-width: 240px; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--line); background: var(--panel); border-radius: 18px;
  box-shadow: var(--shadow); padding: 14px 18px; cursor: pointer; transition: transform 0.12s ease;
}
.next-up .nu-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.next-up .nu-em { font-size: 1.9rem; }
.next-up .nu-main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.next-up .nu-kicker { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); }
.next-up .nu-title { font-weight: 700; }
.next-up .nu-go { font-weight: 800; color: var(--accent); white-space: nowrap; }
.next-up .nu-done {
  flex: 1; min-width: 240px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--line); border-radius: 18px; padding: 14px 18px; color: var(--ink-2); font-weight: 600;
}

.talk-box {
  max-width: 44em; margin: 18px auto 0; border: 1px solid var(--line); border-left: 5px solid var(--c-teen);
  border-radius: var(--radius); background: var(--panel); padding: 16px 20px;
}
.talk-box h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-teen); margin-bottom: 8px; }
.talk-box li { margin: 0 0 6px 18px; font-size: 0.95rem; }

.ask-box {
  max-width: 44em; margin: 18px auto 0; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--paper-2); padding: 16px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ask-box .ab-text { flex: 1; min-width: 200px; font-size: 0.92rem; color: var(--ink-2); }
.ask-note { font-weight: 600; color: var(--ink); }
.guardian-msg {
  max-width: 44em; margin: 18px auto 0; border: 1px solid var(--line); border-left: 5px solid var(--c-adult);
  border-radius: var(--radius); background: var(--panel); padding: 14px 20px; font-size: 0.95rem;
}
.guardian-msg .gm-who { font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--c-adult); margin-bottom: 5px; }

/* ---------- answering across two devices ----------
   Codes are read aloud and typed in, so they are set in a monospace face at a
   size that survives a phone held at arm's length, and never wrap mid-group. */
.ask-box .ask-away {
  flex: 1 0 100%; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.aw-head { font-weight: 700; font-size: 0.92rem; }
.aw-step { font-size: 0.85rem; color: var(--ink-2); }
.aw-code, .pair-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.35rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  overflow-x: auto; padding: 10px 14px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.pair-code { text-align: center; font-size: 1.6rem; margin: 6px 0 4px; }
.aw-entry, .pb-entry { display: flex; gap: 8px; flex-wrap: wrap; }
.aw-entry input, .pb-entry input {
  flex: 1; min-width: 180px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: .04em;
}
.aw-msg, .pb-msg { font-size: 0.85rem; color: var(--c-warn, #b45309); font-weight: 600; }

.pair-box {
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper-2);
  padding: 16px 20px; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px;
}
.pair-box.paired { border-style: solid; border-left: 5px solid var(--c-adult); }
.pb-head { font-weight: 700; }
.pb-sub { font-size: 0.88rem; color: var(--ink-2); }
.pb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* The QR is the one thing here that must not shrink below scannability. */
.pair-qr { display: flex; justify-content: center; margin: 8px 0; }
.pair-qr svg { width: 100%; max-width: 260px; height: auto; background: #fff; border-radius: 8px; }

/* Sending beats reciting, so the send button leads and the spoken code folds
   away behind a summary — still there, no longer the first thing offered. */
.aw-send { display: flex; }
.aw-send .btn { flex: 1; }
.aw-hint { font-size: 0.82rem; color: var(--ink-2); }
.aw-fallback > summary {
  cursor: pointer; font-size: 0.85rem; color: var(--ink-2); padding: 4px 0;
  list-style: revert;
}
.aw-fallback[open] > summary { margin-bottom: 8px; }
.aw-fallback > *:not(summary) { margin-top: 8px; }

/* standing permissions */
.std-box {
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper-2);
  padding: 16px 20px; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px;
}
.std-row {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line);
}
.std-what { font-size: 0.9rem; }
.std-none { font-size: 0.88rem; color: var(--ink-2); font-style: italic; }
.std-also {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  font-size: 0.9rem; cursor: pointer;
}
.std-also input { margin-top: 2px; flex: none; }

/* child picker */
.who-groups { display: flex; flex-direction: column; gap: 24px; text-align: left; }
.pick-group-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2);
}
.pick-group-title .pg-ico { font-size: 1.15rem; }
.pick-group-title .pg-count {
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; font-size: 0.72rem; color: var(--ink-2);
}
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.who-card {
  background: var(--panel); border: 2px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  padding: 26px 18px; text-align: center; transition: transform .12s ease;
}
.who-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.who-card .em { font-size: 3rem; display: block; margin-bottom: 8px; }
.who-card h3 { font-size: 1.25rem; }
.who-card .wc-age { color: var(--ink-2); font-size: 0.85rem; }

@media (max-width: 620px) {
  .shelf { grid-template-columns: 1fr; }
  .kid-reader { padding: 24px 18px; }
}

/* ---------- ProsperAI recommendation (request triage) ---------- */
.rec-box {
  border: 1px solid var(--line); border-left: 5px solid var(--c-teen); border-radius: var(--radius-sm);
  background: var(--paper); padding: 12px 16px; margin: 0 0 14px; font-size: 0.9rem;
}
.rec-box .rec-head { font-weight: 700; margin-bottom: 4px; }
.rec-box .rec-head strong { color: var(--accent); }
.btn.suggested { outline: 2px solid var(--c-teen); outline-offset: 2px; }

/* ---------- discussions ---------- */
.disc-box {
  max-width: 44em; margin: 14px auto 0; border: 1px solid var(--line); border-left: 5px solid var(--c-adult);
  border-radius: var(--radius); background: var(--panel); padding: 16px 20px;
}
.disc-box h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-adult); margin-bottom: 10px; }
.disc-msg { display: flex; gap: 9px; margin-bottom: 9px; font-size: 0.93rem; align-items: baseline; flex-wrap: wrap; }
.disc-msg .who { font-weight: 700; white-space: nowrap; }
.disc-msg .txt { flex: 1; min-width: 140px; }
.disc-input { display: flex; gap: 8px; margin-top: 10px; }
.disc-input input { flex: 1; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); padding: 9px 14px; font-size: 0.92rem; }
.modal .disc-box { max-width: none; margin: 16px 0 0; }
.share-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.share-list label {
  display: flex; align-items: center; gap: 10px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--paper); padding: 9px 12px; font-weight: 600; cursor: pointer;
}

/* ---------- Prism brand (child app) ---------- */
.prism-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1; letter-spacing: .01em;
  background: linear-gradient(90deg, #97202b, #c22a3c 30%, #2f6cb0 70%, #0a4f94);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="dark"] .prism-name {
  background: linear-gradient(90deg, #d95561, #e07986 30%, #7fa8d9 70%, #5b8fd0);
  -webkit-background-clip: text; background-clip: text;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .prism-name {
    background: linear-gradient(90deg, #d95561, #e07986 30%, #7fa8d9 70%, #5b8fd0);
    -webkit-background-clip: text; background-clip: text;
  }
}
.prism-by { font-size: 0.68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.prism-lockup { display: flex; align-items: center; gap: 9px; }
.prism-words { display: flex; align-items: baseline; gap: 8px; }
.prism-hero { display: flex; flex-direction: column; align-items: center; gap: 5px; margin-bottom: 16px; }
.prism-hero .prism-name.big { font-size: 2.7rem; }
.prism-mark { width: 88px; height: 88px; border-radius: 20px; box-shadow: var(--shadow); margin-bottom: 4px; }
.prism-lockup .prism-mark.sm { width: 32px; height: 32px; border-radius: 9px; margin-bottom: 0; box-shadow: none; }
.prism-mini { width: 20px; height: 20px; border-radius: 6px; display: inline-block; vertical-align: -5px; }

/* ---------- reader secret code (Prism picker, step 2) ---------- */
.code-card {
  grid-column: 1 / -1; text-align: center; background: var(--panel); border: 2px solid var(--line);
  border-radius: 22px; box-shadow: var(--shadow); padding: 30px 22px;
}
.code-card .em { font-size: 3rem; display: block; margin-bottom: 6px; }
.code-card h3 { font-size: 1.35rem; }
.code-card p { color: var(--ink-2); margin: 4px 0 12px; }
.code-card input {
  font-size: 1.5rem; text-align: center; letter-spacing: .35em; width: min(220px, 80%);
  border: 2px solid var(--line); border-radius: 14px; background: var(--paper); padding: 10px 12px;
}
.code-card input:focus { border-color: var(--accent); outline: none; }
.code-card .m-status { margin-top: 10px; display: block; }
.code-card.shake { animation: shake .4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(4px); }
}
.f-hint { display: block; font-size: 0.76rem; color: var(--ink-2); margin-top: 5px; }

/* The guardian's standard, in their own words. Given real room because it is
   the most direct control on the form, not an afterthought below the checkboxes. */
.std-notes {
  width: 100%; min-height: 76px; resize: vertical; line-height: 1.5;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper); padding: 10px 11px; font: inherit; color: inherit;
}
.prompt-peek { margin: 4px 0 14px; }
.prompt-peek > summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--accent);
  padding: 6px 0; list-style: revert;
}
/* Answered-without-you. Same furniture as the standing-permission box, so the
   two read as one idea: answers the guardian is not being woken for. */
.auto-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-top: 1px solid var(--line);
}
.auto-row .ar-main { flex: 1; min-width: 0; }
.auto-row .ar-main strong { display: block; }
.auto-row .ar-main span { display: block; font-size: 0.84rem; color: var(--ink-2); }
.auto-row .ar-meta { font-size: 0.74rem !important; opacity: 0.8; margin-top: 2px; }
.auto-row.undone { opacity: 0.6; }
.auto-row.undone .ar-main strong { text-decoration: line-through; }
.ab-why {
  font-size: 0.9rem; color: var(--ink-2); margin-top: 8px;
  padding: 8px 12px; background: var(--paper-2); border-radius: var(--radius-sm);
}

.prompt-preview {
  font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow-y: auto;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px; margin: 6px 0 0;
}

/* ---------- pages, bookmarks, resume ---------- */
.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; max-width: 44em; margin: 14px auto; }
.page-nav .pg-label { font-size: 0.85rem; font-weight: 700; color: var(--ink-2); text-align: center; flex: 1; }
.page-nav button[disabled] { opacity: .4; pointer-events: none; }
.kr-page-title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink-2);
  margin: -8px 0 18px;
}
.page-sep {
  font-size: 0.7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  border-top: 1px dashed var(--line); padding-top: 8px; margin: 14px 0 8px;
}
.resume-box {
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper-2);
  text-align: center; padding: 24px 18px; margin-top: 10px;
}
.resume-box .rb-em { font-size: 2.3rem; margin-bottom: 6px; }
.sc-progress { display: flex; flex-direction: column; gap: 5px; }
.sc-progress .bar { height: 6px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.sc-progress .bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #97202b, #2f6cb0); }
.sc-progress .pg-chip { font-size: 0.74rem; font-weight: 700; color: var(--ink-2); }

/* ---------- read-aloud media bar ---------- */
.player {
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap; max-width: 44em; margin: 0 auto 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  box-shadow: var(--shadow);
}
.player .pl-tag { font-size: 0.95rem; margin-right: 1px; }
.player .pl-lbl {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-2); margin-right: 5px;
}
.player .pl-btn {
  border: 0; background: transparent; font-size: 1.05rem; line-height: 1; padding: 7px 8px;
  border-radius: 999px; cursor: pointer; color: var(--ink);
}
.player .pl-btn:hover { background: var(--paper-2); }
.player .pl-main { font-size: 1.2rem; background: var(--btn-bg, var(--accent)); color: #fff; padding: 8px 13px; }
.player .pl-main:hover { background: var(--btn-bg, var(--accent)); filter: brightness(1.1); }
.player .pl-rate {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px; font-size: 0.8rem;
  font-weight: 800; padding: 6px 11px; cursor: pointer; color: var(--ink-2); margin-left: 3px;
}
.player .pl-status { font-size: 0.78rem; color: var(--ink-2); margin-left: auto; padding-right: 4px; }
.kid-reader p.reading { background: var(--pend-soft); border-radius: 8px; box-shadow: 0 0 0 6px var(--pend-soft); }

/* ---------- add content: link / file / text ---------- */
.method-seg { margin: 0 0 14px; }
.fetch-row { display: flex; gap: 8px; margin: 0 0 14px; }
.fetch-row input { flex: 1; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); padding: 9px 11px; }
.file-drop {
  display: flex; align-items: center; justify-content: center; gap: 8px; border: 2px dashed var(--line);
  border-radius: var(--radius); background: var(--paper-2); padding: 18px; font-weight: 600;
  color: var(--ink-2); cursor: pointer; margin: 0 0 14px;
}
.file-drop:hover { border-color: var(--accent); color: var(--ink); }