/* ======== WONDER LAB (PHILOSOPHY) ======== */
/* Themed off the app's design tokens so it adapts to BOTH the in-app dark
   toggle ([data-theme="dark"]) and the OS setting (prefers-color-scheme).
   Only the purple brand accent is local — defined for each theme so text on
   the accent-tinted surfaces always stays readable. */

:root {
  --phil-accent: #7c3aed;
  --phil-accent-soft: #f5f3ff;   /* purple-tinted surface */
}
[data-theme="dark"] {
  --phil-accent: #c4b5fd;
  --phil-accent-soft: #2b2540;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --phil-accent: #c4b5fd;
    --phil-accent-soft: #2b2540;
  }
}

.phil-home, .phil-lesson, .phil-intro { max-width: 640px; margin: 0 auto; padding: 8px 14px 40px; }

.phil-hero { display: flex; align-items: center; gap: 14px;
  background: var(--phil-accent-soft); border: 1px solid var(--color-border);
  border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; }
.phil-hero-emoji, .phil-hero-img { width: 84px; height: 84px; flex: 0 0 84px; object-fit: contain; }
.phil-hero h2 { margin: 0 0 4px; color: var(--phil-accent); font-size: 1.4rem; }
.phil-hero p { margin: 0; color: var(--color-text-muted); font-size: .92rem; line-height: 1.35; }

.phil-intro-link { display: inline-flex; margin: 0 0 14px; border: 2px solid var(--color-border);
  background: var(--phil-accent-soft); color: var(--phil-accent); font-weight: 600; }

.phil-mode { background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 12px 14px; margin-bottom: 16px; }
.phil-mode-label { font-weight: 700; color: var(--phil-accent); font-size: .9rem; }
.phil-mode-pills { display: flex; gap: 8px; margin: 8px 0 6px; }
.phil-pill { flex: 1; padding: 10px; border-radius: 12px; border: 2px solid var(--color-border);
  background: var(--color-surface); color: var(--phil-accent); font-weight: 600; cursor: pointer; font-size: .95rem; }
.phil-pill-on { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.phil-mode-hint { margin: 0; color: var(--color-text-muted); font-size: .82rem; }

/* daily card */
.phil-daily-card { display: flex; align-items: center; gap: 12px;
  background: var(--color-accent-light); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 12px 14px; margin-bottom: 6px; }
.phil-daily-done { background: var(--color-success-light); }
.phil-daily-emoji { font-size: 1.8rem; flex: 0 0 auto; }
.phil-daily-body { flex: 1 1 auto; min-width: 0; }
.phil-daily-body h4 { margin: 0 0 2px; color: var(--color-text); font-size: 1rem; }
.phil-daily-body p { margin: 0; font-size: .82rem; color: var(--color-text-muted); }
.phil-daily-go { flex: 0 0 auto; }

.phil-tier h3 { color: var(--phil-accent); margin: 16px 0 10px; }
.phil-tier-locked { opacity: .72; }
.phil-lock { font-size: .72rem; font-weight: 500; color: var(--color-text-faint); }
.phil-card-lock { flex: 0 0 auto; font-size: 1.2rem; padding: 0 8px; }
.phil-logic-count { font-size: .8rem; color: var(--color-text-muted); font-weight: 500; }

.phil-card { display: flex; align-items: center; gap: 12px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 16px; padding: 10px; margin-bottom: 10px; box-shadow: var(--shadow-sm); }
.phil-card-done { background: var(--phil-accent-soft); }
.phil-card-art { width: 96px; height: 54px; flex: 0 0 96px; border-radius: 10px; overflow: hidden; background: var(--color-surface-2); }
.phil-card-img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.phil-card-body { flex: 1 1 auto; min-width: 0; }
.phil-card-body h4 { margin: 0 0 2px; font-size: 1rem; color: var(--color-text); }
.phil-card-body p { margin: 0; font-size: .82rem; color: var(--color-text-muted); }
.phil-card-go { flex: 0 0 auto; }

/* lesson player */
.phil-scene { border-radius: 16px; overflow: hidden; margin-bottom: 14px; background: var(--color-surface-2); }
.phil-scene-img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.phil-scene-sm { max-width: 360px; margin-left: auto; margin-right: auto; }

.phil-say { display: flex; gap: 12px; align-items: flex-start; background: var(--phil-accent-soft);
  border-radius: 14px; padding: 12px; margin-bottom: 14px; }
.phil-say-owl, .phil-say-owl-img { width: 56px; height: 56px; flex: 0 0 56px; object-fit: contain; }
.phil-say-text { margin: 0; color: var(--color-text); line-height: 1.4; }
.phil-talk-cue { color: var(--phil-accent); font-weight: 600; }

.phil-q { color: var(--color-text); font-size: 1.15rem; line-height: 1.35; margin: 4px 0; }
.phil-q-sub { color: var(--color-text-muted); font-size: .85rem; margin: 0 0 12px; }

.phil-positions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.phil-pos { text-align: left; padding: 14px; border-radius: 14px; border: 2px solid var(--color-border);
  background: var(--color-surface); cursor: pointer; font-size: 1rem; color: var(--color-text);
  transition: border-color .15s, background .15s; }
.phil-pos:hover { border-color: var(--phil-accent); background: var(--phil-accent-soft); color: var(--color-text); }
.phil-pos-hint { display: block; color: var(--color-text-faint); font-size: .8rem; margin-top: 3px; font-style: normal; }

/* talk-mode scaffolds */
.phil-ladder { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 12px; }
.phil-ladder-label { color: var(--color-text-muted); font-size: .82rem; }
.phil-step { padding: 7px 11px; border-radius: 20px; border: 1px dashed var(--phil-accent);
  background: var(--phil-accent-soft); color: var(--phil-accent); font-size: .82rem; cursor: pointer; }
.phil-scaffold { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 10px; color: var(--color-text); font-size: .9rem; }
.phil-react { margin: 6px 0; padding-left: 20px; }

.phil-grownup { background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 12px; margin: 6px 0 14px; }
.phil-grownup-head { margin: 0 0 8px; font-size: .85rem; color: var(--color-text-muted); }
.phil-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.phil-chip { padding: 8px 12px; border-radius: 20px; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted); font-size: .82rem; cursor: pointer; }
.phil-chip-on { background: var(--phil-accent-soft); border-color: var(--phil-accent); color: var(--phil-accent); font-weight: 600; }

/* reveal */
.phil-reveal h3 { color: var(--phil-accent); margin: 0; }
.phil-views { margin: 6px 0 10px; padding-left: 20px; }
.phil-views li { margin-bottom: 8px; color: var(--color-text); line-height: 1.4; }
.phil-twist { background: var(--color-accent-light); border-radius: 12px; padding: 10px 12px; color: var(--color-text); font-size: .9rem; }
.phil-sage-says { background: var(--phil-accent-soft); border-radius: 12px; padding: 10px 12px; color: var(--phil-accent); font-weight: 600; }

/* logic feedback */
.phil-logic-fb { border-radius: 14px; padding: 14px; color: var(--color-text); }
.phil-fb-right { background: var(--color-success-light); }
.phil-fb-wrong { background: var(--color-accent-light); }
.phil-logic-fb h3 { margin: 0 0 6px; color: var(--color-text); }

/* speak button */
.phil-speak { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0 2px; vertical-align: middle; }

/* done */
.phil-done { text-align: center; padding: 20px 10px; }
.phil-done-owl, .phil-done-img { width: 120px; height: 120px; object-fit: contain; }
.phil-done h2 { color: var(--phil-accent); margin: 8px 0 4px; }
.phil-done p { color: var(--color-text-muted); }
.phil-stars { font-size: 1.1rem; color: var(--phil-accent); font-weight: 700; }

.phil-next { margin-top: 6px; }

/* intro screen */
.phil-intro { text-align: center; }
.phil-intro-hero, .phil-intro-img { width: 150px; height: 150px; object-fit: contain; margin: 0 auto; }
.phil-intro-line { font-size: 1.15rem; color: var(--color-text); line-height: 1.4; max-width: 460px; margin: 10px auto 18px; }
.phil-intro-thumbs { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.phil-intro-thumb { width: 120px; height: 68px; border-radius: 10px; overflow: hidden; background: var(--color-surface-2); }
.phil-intro-thumb-img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* ---- Break It Down (first principles) strand ------------------------------ */
/* Theme tokens only — no hard-coded hex on text or surfaces, so dark mode
   follows [data-theme="dark"] / prefers-color-scheme like the rest of the file. */
.phil-strand-blurb { margin: -4px 0 10px; color: var(--color-text-muted); font-size: .85rem; line-height: 1.4; }

.phil-sort { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.phil-sort-card { background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: 14px; padding: 12px 14px; }
.phil-sort-text { margin: 0; color: var(--color-text); font-size: 1rem; line-height: 1.35; }
.phil-sort-buckets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.phil-sort-btn { flex: 1 1 auto; min-width: 140px; padding: 10px 12px; border-radius: 12px;
  border: 2px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text); font-size: .88rem; font-weight: 600; cursor: pointer; }
.phil-sort-btn:hover { border-color: var(--phil-accent); background: var(--phil-accent-soft); }

.phil-sort-right { border-color: var(--color-success, var(--phil-accent)); background: var(--phil-accent-soft); }
.phil-sort-wrong { border-color: var(--color-border); background: var(--color-surface-2); }
.phil-sort-verdict { margin: 8px 0 2px; font-weight: 700; font-size: .9rem; color: var(--color-text); }
.phil-sort-why { margin: 0; color: var(--color-text-muted); font-size: .85rem; line-height: 1.4; }

/* ---- Meet the Thinkers ---------------------------------------------------- */
.phil-thinker-count { font-weight: 700; color: var(--color-text); }
.phil-thinker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.phil-thinker-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 12px 10px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); }
.phil-thinker-met { background: var(--phil-accent-soft); border-color: var(--phil-accent); }
.phil-thinker-locked { opacity: .75; }
.phil-thinker-tile strong { font-size: .95rem; color: var(--color-text); }
.phil-thinker-tile em { font-size: .8rem; color: var(--color-text-muted); line-height: 1.35; font-style: normal; }
.phil-thinker-howto { font-style: italic !important; }
.phil-thinker-portrait { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--color-surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 2.2rem; flex: 0 0 auto; }
.phil-thinker-portrait-lg { width: 96px; height: 96px; font-size: 3rem; }
.phil-thinker-portrait-img { width: 100%; height: 100%; object-fit: cover; }
.phil-thinker-silhouette { opacity: .6; }
.phil-thinker-links { font-size: .75rem; color: var(--color-text-muted); margin-top: 4px; }
.phil-thinker-link { background: none; border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 8px; font-size: .75rem;
  color: var(--color-text); cursor: pointer; margin: 2px; }
.phil-thinker-tag { display: inline-block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--phil-accent); margin-right: 6px; }
.phil-meet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.phil-meet-head h2 { margin: 0 0 4px; font-size: 1.3rem; }
.phil-meet-native { font-size: .9rem; color: var(--color-text-muted); font-weight: 500; }
.phil-meet-when { margin: 0; color: var(--color-text-muted); font-size: .9rem; line-height: 1.4; }
.phil-meet-facts { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.phil-meet-facts li { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 12px;
  font-size: .95rem; line-height: 1.45; }
.phil-meet-idea { margin-bottom: 14px; }
.phil-thinker-unlock { display: flex; align-items: center; gap: 12px; background: var(--phil-accent-soft); border: 1px solid var(--phil-accent);
  border-radius: 16px; padding: 10px 12px; margin: 10px 0 14px; text-align: left; }
.phil-thinker-unlock-txt { display: flex; flex-direction: column; gap: 2px; }
.phil-thinker-unlock-txt em { font-style: normal; color: var(--color-text-muted); font-size: .85rem; }