/* Learn Along v10.6 — quirky editorial brand layer
   Visual-only override. Core application logic is intentionally untouched. */

:root {
  --ink: #151515;
  --muted: #65625d;
  --paper: #fffaf0;
  --cream: #fff4dc;
  --card: #fffdf8;
  --line: rgba(21,21,21,.16);
  --sage: #69a954;
  --sage-deep: #315b35;
  --sage-soft: #dcefd5;
  --terracotta: #ff5a3d;
  --terracotta-soft: #ffe0d8;
  --gold: #e1a800;
  --gold-soft: #ffed9d;
  --blue: #4169e1;
  --blue-soft: #dde5ff;
  --lilac: #b58bd8;
  --lilac-soft: #ead7f5;
  --sun: #ffd02f;
  --tomato: #ff593d;
  --leaf: #63aa56;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 4px 5px 0 rgba(21,21,21,.08);
  --shadow-soft: 3px 4px 0 rgba(21,21,21,.06);
  --hand: "Patrick Hand", "Comic Sans MS", cursive;
}

html { background: var(--paper); }
body {
  background:
    radial-gradient(circle at 7% 18%, rgba(255,208,47,.16) 0 4px, transparent 5px),
    radial-gradient(circle at 92% 22%, rgba(181,139,216,.12) 0 5px, transparent 6px),
    var(--paper);
  color: var(--ink);
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  font-family: var(--hand);
  opacity: .65;
}
body::before {
  content: "∿∿";
  top: 18vh;
  right: 1.5vw;
  color: var(--blue);
  font-size: 54px;
  transform: rotate(24deg);
}
body::after {
  content: "✷";
  left: 2.5vw;
  bottom: 6vh;
  color: var(--sun);
  font-size: 68px;
  transform: rotate(-10deg);
}

button, input, select { font-family: "DM Sans", system-ui, sans-serif; }
h1, h2, h3 { color: var(--ink); }
h1 { letter-spacing: -.045em; }
h2 { letter-spacing: -.03em; }

.topbar {
  height: 78px;
  border-bottom: 2px solid var(--ink);
  background: rgba(255,250,240,.96);
  box-shadow: 0 4px 0 rgba(255,208,47,.3);
}
.brand { gap: 10px; }
.brand-mark {
  width: 45px;
  height: 45px;
  padding: 7px;
  border: 1.5px solid var(--ink);
  border-radius: 13px 16px 12px 17px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--sun);
  transform: rotate(-2deg);
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand strong {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.04em;
  text-transform: uppercase;
  line-height: .92;
  max-width: 86px;
}
.brand small {
  margin-top: 5px;
  font-family: var(--hand);
  color: var(--tomato);
  font-size: 13px;
  line-height: 1;
}

.region-pill,
.plan-pill {
  border: 1.5px solid var(--ink) !important;
  box-shadow: 2px 2px 0 rgba(21,21,21,.11);
}
.region-pill { background: var(--sage-soft); }
.plan-pill { background: var(--sun) !important; }
.plan-pill::before { color: var(--ink); }
.ghost-btn,
.secondary-btn {
  border: 1.5px solid var(--ink);
  background: #fffdf8;
  border-radius: 10px 13px 11px 12px;
  box-shadow: 2px 2px 0 rgba(21,21,21,.08);
}
.ghost-btn:hover,
.secondary-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 rgba(21,21,21,.11); }
.primary-btn {
  border: 1.5px solid var(--ink);
  background: var(--tomato);
  color: #fff;
  border-radius: 11px 14px 10px 13px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.primary-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
.primary-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.text-link, .back-link, .text-btn { color: var(--blue) !important; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.main { max-width: 1160px; padding-top: 34px; }
.eyebrow,
.focus-label,
.category,
.membership-kicker,
.focus-card .focus-label {
  width: max-content;
  padding: 4px 9px;
  border-radius: 6px 9px 6px 8px;
  background: var(--sage);
  color: var(--ink) !important;
  font-family: var(--hand);
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  transform: rotate(-1deg);
}

.hero-panel {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: #fffdf8;
  box-shadow: 7px 7px 0 var(--lilac-soft);
}
.hero-panel::before {
  content: "✷";
  position: absolute;
  right: 30px;
  top: 17px;
  color: var(--sun);
  font-family: var(--hand);
  font-size: 62px;
  line-height: 1;
  transform: rotate(13deg);
}
.hero-panel::after {
  content: "good stuff →";
  position: absolute;
  right: 40px;
  bottom: 15px;
  color: var(--blue);
  font-family: var(--hand);
  font-size: 18px;
  transform: rotate(-4deg);
}
.hero-panel h1 {
  max-width: 760px;
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 900;
  line-height: .97;
}
.hero-copy { color: #55514c; }
.hero-chips span {
  border: 1.5px solid var(--ink);
  background: #fff;
  box-shadow: 2px 2px 0 rgba(21,21,21,.07);
}
.hero-chips span:nth-child(1) { background: var(--gold-soft); transform: rotate(-1deg); }
.hero-chips span:nth-child(2) { background: var(--blue-soft); transform: rotate(1deg); }
.hero-chips span:nth-child(3) { background: var(--sage-soft); transform: rotate(-.5deg); }
.hero-action-stack > span { font-family: var(--hand); font-size: 17px; color: var(--muted); }

.family-grid { gap: 20px; }
.child-card {
  position: relative;
  border: 1.75px solid var(--ink);
  background: #fffdf8;
  box-shadow: 5px 5px 0 rgba(21,21,21,.08);
}
.child-card:nth-child(3n+1) { box-shadow: 5px 5px 0 var(--blue-soft); }
.child-card:nth-child(3n+2) { box-shadow: 5px 5px 0 var(--gold-soft); }
.child-card:nth-child(3n) { box-shadow: 5px 5px 0 var(--lilac-soft); }
.child-avatar {
  border: 1.5px solid var(--ink);
  background: var(--sun);
  box-shadow: 2px 2px 0 var(--ink);
  border-radius: 47% 53% 44% 56% / 48% 43% 57% 52%;
}
.card-highlight { border: 1.5px dashed rgba(21,21,21,.34); background: var(--cream); }
.info-strip > div {
  border: 1.5px solid var(--ink);
  background: #fff;
  box-shadow: 3px 3px 0 rgba(21,21,21,.06);
}
.info-strip > div:first-child { background: var(--blue-soft); transform: rotate(-.35deg); }
.info-strip > div:last-child { background: var(--sage-soft); transform: rotate(.35deg); }
.info-icon { font-family: var(--hand); font-size: 20px; }

.child-header {
  position: relative;
  padding: 10px 4px 25px;
}
.child-header::after {
  content: "small things add up";
  position: absolute;
  right: 4px;
  bottom: 4px;
  font-family: var(--hand);
  color: var(--tomato);
  font-size: 16px;
  transform: rotate(-2deg);
}
.child-header h1 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.05em;
}
.child-title-row .child-avatar { background: var(--lilac-soft); }

.primary-tabs {
  top: 78px;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: 5px;
  background: rgba(255,253,248,.95);
  box-shadow: 3px 3px 0 rgba(21,21,21,.06);
}
.tab { border-radius: 10px; border-bottom: 0; }
.tab.active {
  border-bottom: 0;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(21,21,21,.12);
}

.today-hero-copy {
  position: relative;
  overflow: hidden;
  border: 1.75px solid var(--ink);
  background: var(--lilac-soft);
  box-shadow: 5px 5px 0 rgba(21,21,21,.07);
}
.today-hero-copy::after {
  content: "↗";
  position: absolute;
  right: 22px;
  top: 12px;
  color: var(--tomato);
  font-family: var(--hand);
  font-size: 54px;
  transform: rotate(-12deg);
}
.today-hero-copy h2,
.section-heading h2,
.progress-page-head h2,
.profile-page-head h2,
.milestone-intro h2,
.stage-guide-hero-copy h2 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 900;
}
.today-meta span { border: 1px solid rgba(21,21,21,.25); background: rgba(255,255,255,.7); }
.rhythm-card {
  border: 1.75px solid var(--ink);
  background: var(--gold-soft);
  box-shadow: 5px 5px 0 var(--sun);
  transform: rotate(.5deg);
}
.rhythm-icon { border: 1.5px solid var(--ink); background: #fff; color: var(--ink); }
.rhythm-card strong { font-family: "DM Sans", system-ui, sans-serif; font-weight: 900; }

.learning-now-card,
.focus-card,
.mini-item,
.checkin-card,
.journey-row,
.progress-area-card,
.coming-card,
.portfolio-card,
.milestone-card,
.library-card,
.profile-action-card,
.onboarding-card {
  border: 1.5px solid var(--ink) !important;
  box-shadow: 3px 3px 0 rgba(21,21,21,.06) !important;
}
.learning-now-card:nth-child(3n+1) { background: var(--sage-soft); }
.learning-now-card:nth-child(3n+2) { background: var(--blue-soft); }
.learning-now-card:nth-child(3n) { background: var(--gold-soft); }
.learning-dot { background: var(--ink); }
.focus-card.primary { background: var(--sage-soft); border-color: var(--ink); }
.activity-box { border: 1.5px dashed rgba(21,21,21,.28); background: rgba(255,255,255,.68); }
.tip-card { border: 1.5px solid var(--ink); background: var(--terracotta-soft); box-shadow: 3px 3px 0 var(--tomato); }
.readiness-callout,
.readiness-progress-card { border: 1.5px solid var(--ink); background: var(--blue-soft); box-shadow: 4px 4px 0 rgba(65,105,225,.25); }
.progress-summary { border: 1.5px solid var(--ink); background: var(--gold-soft); }

/* At-this-stage becomes a signature colourful experience */
.home-shortcut-stage {
  border: 1.5px solid var(--ink) !important;
  background: var(--lilac-soft) !important;
  box-shadow: 3px 3px 0 rgba(21,21,21,.08);
}
.stage-guide-hero {
  border: 2px solid var(--ink);
  background: var(--lilac-soft);
  box-shadow: 7px 7px 0 var(--sun);
}
.stage-guide-hero::before {
  content: "this bit matters";
  position: absolute;
  right: 26px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--hand);
  color: var(--blue);
  font-size: 18px;
  transform: rotate(-3deg);
}
.stage-guide-hero::after { border: 3px dashed rgba(21,21,21,.13); }
.stage-guide-meta span { border: 1px solid rgba(21,21,21,.25); }
.stage-guide-orbit { border: 2px dashed var(--ink); background: rgba(255,255,255,.48); }
.stage-guide-orbit > span { border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--blue-soft); }
.stage-guide-orbit i:nth-of-type(1) { background: var(--sage); }
.stage-guide-orbit i:nth-of-type(2) { background: var(--tomato); }
.stage-guide-orbit i:nth-of-type(3) { background: var(--sun); }
.stage-focus-grid article,
.stage-expectation-card,
.framework-reference-list > div,
.teacher-message-card,
.teacher-stage-fallback {
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(21,21,21,.06);
}
.stage-focus-grid article:nth-child(4n+1) { background: var(--gold-soft); }
.stage-focus-grid article:nth-child(4n+2) { background: var(--sage-soft); }
.stage-focus-grid article:nth-child(4n+3) { background: var(--blue-soft); }
.stage-focus-grid article:nth-child(4n) { background: var(--terracotta-soft); }
.stage-focus-grid article > span { color: var(--ink); font-family: var(--hand); font-size: 16px; }
.stage-focus-grid strong,
.stage-expectation-card h3,
.teacher-stage-fallback strong { font-family: "DM Sans", system-ui, sans-serif; font-weight: 800; }
.stage-expectation-card:nth-child(3n+1) { box-shadow: 4px 4px 0 var(--sage-soft); }
.stage-expectation-card:nth-child(3n+2) { box-shadow: 4px 4px 0 var(--gold-soft); }
.stage-expectation-card:nth-child(3n) { box-shadow: 4px 4px 0 var(--blue-soft); }
.stage-domain-pill { border: 1px solid var(--ink); background: #fff; color: var(--ink); }
.stage-next-section { border: 1.5px solid var(--ink); background: var(--gold-soft); box-shadow: 4px 4px 0 rgba(21,21,21,.07); }
.stage-next-list > div { border: 1px solid rgba(21,21,21,.2); background: #fffdf8; }
.stage-framework-section { border: 1.5px solid var(--ink); background: var(--sage-soft); }
.teacher-message-card { background: var(--blue-soft); }
.teacher-message-card blockquote { font-family: var(--hand); font-size: 25px; color: var(--ink); }
.teacher-stage-fallback { background: var(--terracotta-soft); }
.stage-home-support,
.stage-guide-progress-cta {
  border: 2px solid var(--ink);
  background: var(--sage-deep);
  box-shadow: 5px 5px 0 var(--sun);
}

/* Inputs, diagnostics and progress stay clear while gaining the brand */
input, select {
  border: 1.5px solid var(--ink);
  background: #fff;
  box-shadow: 2px 2px 0 rgba(21,21,21,.04);
}
.answer-btn,
.diagnostic-answer,
.milestone-status-btn {
  border: 1.5px solid var(--ink) !important;
  box-shadow: 2px 2px 0 rgba(21,21,21,.05);
}
.answer-btn.selected,
.diagnostic-answer.selected,
.milestone-status-btn.selected {
  background: var(--sun) !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  box-shadow: 2px 2px 0 var(--ink) !important;
}
.diagnostic-card { border: 2px solid var(--ink) !important; background: #fffdf8 !important; box-shadow: 5px 5px 0 var(--blue-soft) !important; }
.diagnostic-track span,
.progress-track > span { background: var(--tomato); }
.baseline-card:nth-child(odd) { background: var(--sage-soft); }
.baseline-card:nth-child(even) { background: var(--gold-soft); }
.next-step-card { background: var(--blue-soft); }

/* Modals + auth */
.modal {
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 8px 8px 0 rgba(21,21,21,.22);
}
.modal-head h2 { font-family: "DM Sans", system-ui, sans-serif; font-weight: 900; }
.auth-root {
  background:
    radial-gradient(circle at 8% 10%, rgba(255,208,47,.25), transparent 26rem),
    radial-gradient(circle at 92% 85%, rgba(99,170,86,.19), transparent 26rem),
    var(--paper);
}
.auth-brand-block::before {
  content: "OH, HELLO.";
  display: inline-block;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--hand);
  font-size: 24px;
  font-weight: 700;
  transform: rotate(-2deg);
  text-decoration: underline 4px var(--blue);
  text-underline-offset: 7px;
}
.auth-mark { border: 2px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--sun); }
.auth-brand-block h1 { font-family: "DM Sans", system-ui, sans-serif; font-weight: 900; letter-spacing: -.06em; }
.auth-points span { border: 1.5px solid var(--ink); background: #fff; box-shadow: 2px 2px 0 rgba(21,21,21,.07); }
.auth-points span:nth-child(1) { background: var(--sage-soft); }
.auth-points span:nth-child(2) { background: var(--gold-soft); }
.auth-points span:nth-child(3) { background: var(--blue-soft); }
.auth-card { border: 2px solid var(--ink); background: #fffdf8; box-shadow: 7px 7px 0 var(--lilac-soft); }
.auth-card h2 { font-family: "DM Sans", system-ui, sans-serif; font-weight: 900; }
.auth-submit { background: var(--tomato) !important; border: 1.5px solid var(--ink) !important; box-shadow: 3px 3px 0 var(--ink); }

/* Mobile app should feel like the same brand, not a scaled desktop site */
.mobile-bottom-nav {
  border-top: 2px solid var(--ink) !important;
  background: rgba(255,253,248,.96) !important;
  box-shadow: 0 -4px 0 rgba(255,208,47,.22);
}
.mobile-capture-btn {
  border: 2px solid var(--ink) !important;
  background: var(--sage-deep) !important;
  box-shadow: 3px 3px 0 var(--sun) !important;
}
.mobile-tab.active,
.mobile-tab[aria-current="page"] { color: var(--tomato) !important; }

/* Keep owner area more restrained but on-brand. */
.owner-side { background: var(--ink); }
.owner-kpi,
.owner-panel,
.owner-plan-card { border: 1.5px solid var(--ink) !important; box-shadow: 3px 3px 0 rgba(21,21,21,.07) !important; }

@media (max-width: 900px) {
  body::before, body::after { display: none; }
  .hero-panel::after { display: none; }
  .child-header::after { display: none; }
}

@media (max-width: 620px) {
  .topbar { height: 70px; border-bottom-width: 1.5px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 11px 13px 10px 12px; }
  .brand strong { font-size: 15px; max-width: 70px; }
  .brand small { display: none; }
  .primary-tabs { top: 70px; border-radius: 14px; }
  .hero-panel { box-shadow: 5px 5px 0 var(--lilac-soft); }
  .hero-panel::before { right: 16px; top: 9px; font-size: 45px; }
  .hero-panel h1 { font-size: 40px; }
  .today-hero-copy { box-shadow: 4px 4px 0 rgba(21,21,21,.07); }
  .today-hero-copy::after { font-size: 36px; right: 12px; }
  .rhythm-card { transform: none; }
  .stage-guide-hero { box-shadow: 5px 5px 0 var(--sun); }
  .stage-guide-hero::before { display: none; }
  .teacher-message-card blockquote { font-size: 22px; }
  .auth-brand-block::before { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-btn, .ghost-btn, .secondary-btn, .child-card { transition: none !important; }
  .child-card:hover, .primary-btn:hover, .ghost-btn:hover, .secondary-btn:hover { transform: none !important; }
}


/* =========================================================
   v10.7 — new Learn Along badge integration
   Uses the exact approved circular badge artwork.
   ========================================================= */
.topbar{height:90px}
.brand{gap:12px}
.brand-mark.badge-mark{
  width:68px;
  height:68px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:2px 3px 0 rgba(21,21,21,.08);
  transform:none;
  overflow:hidden;
}
.brand-mark.badge-mark img{
  width:100%;height:100%;object-fit:contain;border-radius:50%;display:block;
}
.brand:hover .brand-mark.badge-mark{transform:rotate(-2deg)}
.brand-copy strong{font-size:18px;line-height:.92}
.brand-copy small{font-size:14px;color:var(--tomato)}
.primary-tabs{top:90px}

.auth-mark.badge-auth-mark{
  width:148px;
  height:148px;
  padding:0;
  margin-bottom:22px;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:5px 6px 0 rgba(21,21,21,.08);
  transform:rotate(-1deg);
  overflow:hidden;
}
.auth-mark.badge-auth-mark img{width:100%;height:100%;object-fit:contain;border-radius:50%;display:block}

@media (max-width:760px){
  .topbar{height:72px}
  .brand-mark.badge-mark{width:54px;height:54px}
  .brand-copy{display:none}
  .primary-tabs{top:72px}
  .auth-mark.badge-auth-mark{width:124px;height:124px}
}


/* =========================================================
   v10.8 — product consistency + activity evidence
   ========================================================= */

/* A smaller app-like header: logo + account. */
.topbar{height:74px;padding-top:0;padding-bottom:0}
.brand-mark.badge-mark{width:54px;height:54px;box-shadow:1px 2px 0 rgba(21,21,21,.08)}
.brand-copy strong{font-size:16px}
.brand-copy small{font-size:12px}
.primary-tabs{top:74px}
.top-actions{gap:10px}
.account-menu{position:relative}
.account-menu>summary{
  list-style:none;display:flex;align-items:center;gap:7px;min-height:44px;padding:5px 10px 5px 6px;
  border:1.5px solid var(--ink);border-radius:999px;background:#fffdf8;box-shadow:2px 2px 0 rgba(21,21,21,.09);
  cursor:pointer;font-weight:800
}
.account-menu>summary::-webkit-details-marker{display:none}
.account-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lilac-soft);font-size:20px}
.account-menu-label{font-size:12px}
.account-menu-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:70;display:grid;gap:7px;width:190px;padding:10px;
  border:1.5px solid var(--ink);border-radius:16px;background:#fffdf8;box-shadow:4px 5px 0 rgba(21,21,21,.12)
}
.account-menu-panel .ghost-btn,.account-menu-panel .plan-pill{width:100%;justify-content:center}
.account-menu:not([open]) .account-menu-panel{display:none}

/* Onboarding should get out of the way as soon as progress starts. */
.onboarding-card-compact{
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;margin-bottom:18px;
  border:1.5px solid var(--ink);border-radius:17px;background:var(--gold-soft);box-shadow:3px 3px 0 rgba(21,21,21,.08)
}
.onboarding-card-compact h3{margin:5px 0 2px;font-size:20px}
.onboarding-card-compact p{margin:0}
.onboarding-compact-progress{display:flex;align-items:center;gap:12px}
.onboarding-compact-progress>span{font-family:var(--hand);font-size:22px;letter-spacing:3px}

/* Weekly recommendations are the hero. */
.today-week-hero{margin-top:0}
.today-week-hero .section-heading h2{font-size:clamp(30px,4vw,48px)}
.today-week-hero .section-heading p{max-width:640px}

/* Activity evidence belongs to the activity itself. */
.activity-evidence-inline{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding:13px 14px;
  border:1.5px dashed rgba(21,21,21,.55);border-radius:15px;background:#fff9e8
}
.activity-evidence-inline.has-evidence{background:var(--sage-soft);border-style:solid}
.activity-evidence-inline>div{display:grid;gap:2px}
.activity-evidence-inline strong{font-size:13px}
.activity-evidence-inline span{font-size:12px;color:var(--muted)}
.activity-evidence-modal{max-width:680px}
.activity-evidence-intro{padding:14px 16px;border:1.5px solid var(--ink);border-radius:16px;background:var(--gold-soft)}
.activity-evidence-intro p{margin:5px 0 0;color:var(--muted)}
.activity-evidence-saved{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;font-size:13px}
.activity-photo-picker{margin:16px 0}
.activity-photo-picker>label{
  display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:16px;
  border:2px dashed var(--ink);border-radius:18px;background:var(--blue-soft);cursor:pointer
}
.activity-photo-picker>label strong,.activity-photo-picker>label small{grid-column:2}
.activity-photo-picker>label small{color:var(--muted);margin-top:3px}
.activity-camera-icon{grid-row:1/3;display:grid;place-items:center;width:48px;height:48px;border:1.5px solid var(--ink);border-radius:14px;background:var(--sun);font-size:28px}
.activity-photo-picker input[type=file]{width:100%;margin-top:8px;font-size:13px}
.activity-file-preview{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.activity-file-preview span{padding:5px 8px;border-radius:9px;background:#fff;border:1px solid var(--line);font-size:11px}
.activity-evidence-tip{display:grid;gap:3px;padding:11px 13px;border-radius:13px;background:var(--cream);font-size:12px}
.activity-evidence-tip span{color:var(--muted)}

/* Parent-facing stage information first; framework detail second. */
.stage-expectation-card.parent-first .stage-notice-label{
  margin:12px 0 4px;font-family:var(--hand);font-size:16px;color:var(--sage-deep)
}
.stage-expectation-card.parent-first>small{display:none}
.stage-why-details{margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
.stage-why-details summary{cursor:pointer;color:var(--blue);font-weight:800;font-size:12px}
.stage-why-details small{display:block;margin-top:8px;color:var(--muted);line-height:1.45}

/* Library now shares the illustrated card language from Today. */
.library-filter-row{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0 18px}
.library-filter{
  min-height:38px;padding:8px 13px;border:1.5px solid var(--ink);border-radius:999px;background:#fffdf8;
  font-weight:800;font-size:12px;box-shadow:1px 2px 0 rgba(21,21,21,.08)
}
.library-filter.selected{background:var(--sun);box-shadow:2px 2px 0 var(--ink)}
.quirky-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.quirky-library-card{padding:0!important;overflow:hidden;border:1.5px solid var(--ink)!important;border-radius:18px!important;background:#fffdf8!important}
.quirky-library-card .activity-motion{height:118px;border-radius:0;border:0;border-bottom:1px solid var(--line)}
.library-card-copy{display:grid;gap:8px;padding:14px}
.library-card-copy>span{width:max-content;padding:4px 8px;border-radius:999px;background:var(--sage-soft);font-size:10px;font-weight:800;text-transform:uppercase}
.library-card-copy>strong{font-size:17px}
.library-card-copy>p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.library-card-copy .text-link{justify-self:start}

/* Give the fixed mobile navigation real breathing room. */
@media(max-width:620px){
  body{padding-bottom:calc(140px + env(safe-area-inset-bottom))!important}
  .main{padding-bottom:calc(150px + env(safe-area-inset-bottom))!important}
  #tabContent{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .mobile-bottom-nav{bottom:calc(8px + env(safe-area-inset-bottom))}
  .topbar{height:66px;padding-left:10px;padding-right:10px}
  .brand-mark.badge-mark{width:48px;height:48px}
  .primary-tabs{top:66px}
  .top-actions{gap:6px}
  .top-actions>.region-pill{display:none}
  .account-menu-label{display:none}
  .account-menu>summary{padding:5px;min-width:44px;justify-content:center}
  .account-avatar{width:32px;height:32px}
  .account-menu-panel{position:fixed;right:12px;top:72px;width:min(220px,calc(100vw - 24px))}
  .onboarding-card-compact{align-items:flex-start;flex-direction:column;gap:10px}
  .onboarding-compact-progress{width:100%;justify-content:space-between}
  .activity-evidence-inline{align-items:stretch;flex-direction:column}
  .activity-evidence-inline button{width:100%}
  .activity-evidence-saved{align-items:flex-start;flex-direction:column}
  .activity-photo-picker>label{padding:14px}
  .quirky-library-grid{grid-template-columns:1fr}
  .library-filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .library-filter{flex:0 0 auto}
  .today-journal-shell{margin-top:20px}
}

.activity-linked-chip{display:inline-block;width:max-content;margin:8px 0 2px;padding:4px 8px;border-radius:999px;background:var(--lilac-soft);font-size:10px;font-weight:800}