/* ActuallySpeak Kids — Home UI/UX polish layer.
   Implements the Home Screen Build Spec v1.0 on top of the existing components:
   warm cream canvas, layered warm shadows (#3D2A18 base), gradient card surfaces,
   one dominant green CTA, pastel quick-action tiles, chevron wells on action
   strips and a mint active-nav capsule. Loaded LAST so it wins on the cascade;
   removing this file returns the app to its previous look. */

/* ---- 1. Design tokens (normalized from the spec) ---- */
:root {
  --j-cream: #FFF9EF;     /* canvas  */
  --j-cream-2: #FFFCF7;   /* surface */
  --j-ink: #2B1F16;       /* text-primary   */
  --j-ink-2: #6F5A46;     /* text-secondary */
  --j-green: #18B94F;     --j-green-d: #0F9F43;
  --j-blue: #2E86D1;      --j-blue-d: #1F6FB2;
  --j-yellow: #FFD33D;    --j-yellow-d: #B07D12;   /* gold + readable dark gold */
  --j-orange: #F05423;    --j-orange-d: #C23C12;
  --j-purple: #9B5DE5;    --j-purple-d: #7A3FD1;
  --j-line: #EAD8B6;      /* outline */
  --r: 24px; --r-sm: 16px; --r-md: 18px; --r-lg: 22px;
  /* warm, layered elevation */
  --sh-1: 0 4px 12px rgba(61,42,24,.08);
  --sh-2: 0 8px 22px rgba(61,42,24,.12);
  --sh-3: 0 14px 30px rgba(61,42,24,.17);
  --shadow: var(--sh-2);
  --shadow-sm: var(--sh-1);
}
html.ask-contrast { --j-cream:#fff; --j-ink:#000; --j-line:#333; }

body { background: var(--j-cream); color: var(--j-ink); letter-spacing: -.005em; }
#ask-root { background: var(--j-cream); box-shadow: 0 0 80px rgba(61,42,24,.14); }

/* ---- 2. Header: soft surface, quiet outline, refined chips ---- */
.ask-top {
  background: linear-gradient(180deg,#FFFDF9,#FFF6E8);
  border-bottom: 1px solid var(--j-line);
  box-shadow: 0 2px 10px rgba(61,42,24,.06);
}
.ask-av { border-width: 3px; box-shadow: 0 4px 10px rgba(61,42,24,.16); }
.ask-pill { border-width: 1.5px; box-shadow: var(--sh-1); background: #fff; }
.ask-iconbtn { border-width: 1.5px; box-shadow: var(--sh-1); background: #fff; }

/* ---- 3. Hero: rounded, elevated, softer scrim ---- */
.ask-hero {
  border-radius: var(--r); margin: 12px 16px 0; height: 200px;
  border-bottom: 0; box-shadow: var(--sh-2); overflow: hidden;
}
.ask-bubble {
  background: rgba(255,255,255,.96); border-width: 0; border-radius: 22px;
  box-shadow: 0 8px 20px rgba(61,42,24,.18); padding: 12px 15px;
}
.ask-bubble:after { border-right-color: rgba(255,255,255,.96); }
.ask-bubble b { color: var(--j-orange); }

/* ---- 4. Card grammar: warm surface, 1px outline, soft warm shadow ---- */
.ask-card {
  background: var(--j-cream-2); border: 1px solid var(--j-line);
  border-radius: var(--r); box-shadow: var(--sh-2);
}
/* the "Today's adventure" / celebration card = the positive, dominant surface */
.ask-card--wood {
  background: linear-gradient(135deg,#F3FFD9,#E7F6B9);
  border: 2px solid var(--j-green); box-shadow: var(--sh-3);
}
.ask-region__ic { border-radius: var(--r-sm); box-shadow: var(--sh-1); }

/* ---- 5. The one dominant action: green gradient CTA that pops ---- */
.ask-btn {
  background: linear-gradient(135deg,#22C55E,#10A548);
  box-shadow: 0 6px 0 var(--j-green-d), 0 12px 26px rgba(16,165,72,.32), inset 0 1px 0 rgba(255,255,255,.28);
  border-radius: var(--r-pill); letter-spacing: .01em;
}
.ask-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--j-green-d), 0 4px 10px rgba(16,165,72,.28); }
.ask-btn--big { min-height: 64px; box-shadow: 0 7px 0 var(--j-green-d), 0 16px 32px rgba(16,165,72,.38), inset 0 1px 0 rgba(255,255,255,.30); }
.ask-btn--blue { background: linear-gradient(135deg,#3aa0e6,#2374bd); box-shadow: 0 6px 0 var(--j-blue-d), 0 12px 24px rgba(31,111,178,.30); }
.ask-btn--orange { background: linear-gradient(135deg,#ff7043,#e34513); box-shadow: 0 6px 0 var(--j-orange-d), 0 12px 24px rgba(194,60,18,.30); }
.ask-btn--purple { background: linear-gradient(135deg,#a879ec,#7f43d6); box-shadow: 0 6px 0 var(--j-purple-d), 0 12px 24px rgba(122,63,209,.30); }
.ask-btn--yellow { background: linear-gradient(135deg,#ffdd57,#f6b81e); color: #5a3a06; box-shadow: 0 6px 0 var(--j-yellow-d), 0 12px 24px rgba(176,125,18,.30); }
.ask-btn--ghost { background: #fff; box-shadow: 0 4px 0 var(--j-line), var(--sh-1); }

/* ---- 6. Quick-action tiles: one pastel tint each, soft depth ---- */
.ask-tiles { gap: 10px; }
.ask-tile {
  background: var(--j-cream-2); border: 1px solid var(--j-line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ask-tile:active { transform: scale(.98); box-shadow: var(--sh-1); }
.ask-tile__ic { border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(61,42,24,.05); }
.ask-tile--v { background: linear-gradient(135deg,#EAF7FF,#D6EBF8); }
.ask-tile--v .ask-tile__ic { background: #cfe8fb; }
.ask-tile--s { background: linear-gradient(135deg,#FFF0E4,#FFE1CC); }
.ask-tile--s .ask-tile__ic { background: #ffd9bd; }
.ask-tile--g { background: linear-gradient(135deg,#E7F8E7,#D2F0D2); }
.ask-tile--g .ask-tile__ic { background: #c7ecc7; }
.ask-tile--m { background: linear-gradient(135deg,#F5E9FA,#EBD6F5); }
.ask-tile--m .ask-tile__ic { background: #e4c9f3; }
.ask-tile--r { background: linear-gradient(135deg,#FFF3C3,#FFE79A); }
.ask-tile--r .ask-tile__ic { background: #ffe58f; }

/* ---- 7. Progress: soft track, spec green fill ---- */
.ask-prog { height: 12px; border-width: 0; background: #E8DEC9; box-shadow: inset 0 1px 2px rgba(61,42,24,.10); }
.ask-prog__b { background: linear-gradient(90deg,#22C55E,#0F9F43); }
.ask-levelhead__tag, .ask-card [class*="levelhead__tag"] { box-shadow: var(--sh-1); }

/* ---- 8. Bottom navigation: floating surface + mint active capsule ---- */
.ask-nav {
  background: linear-gradient(180deg,#FFFCF7,#FFF4E4);
  border-top: 1px solid var(--j-line);
  box-shadow: 0 -8px 24px rgba(61,42,24,.10);
}
.ask-nav button { border-radius: 16px; transition: background .16s ease; }
.ask-nav button.is-on { background: #E7F8E7; color: var(--j-green-d); }
.ask-nav button span { filter: grayscale(.35); }
.ask-nav button.is-on span { filter: none; }

/* ---- 9. Section headings ---- */
.ask-sec { color: #116B3C; }
.ask-sec:before { background: #18B94F; }

/* ---- 10. Fun layer strips: per-card gradient + a chevron well ---- */
.askfun-card { border: 1px solid var(--j-line); box-shadow: var(--sh-1); border-radius: var(--r-md); }
.askfun-streak { background: linear-gradient(135deg,#FFF1E4,#FFE4CE); }
.askfun-chest.is-ready { background: linear-gradient(135deg,#FFF8CF,#FFECA4); }
.askfun-chest.is-done { background: var(--j-cream-2); }
.askfun-treasure { background: linear-gradient(135deg,#EAF7FF,#D6EBF8); }
.askfun-mini--wide { background: linear-gradient(135deg,#F0FFD7,#DCF5B0); }
.askfun-mini--map { background: linear-gradient(135deg,#EAF7FF,#D6EBF8); }
/* chevron well on the tappable strips (daily chest, treasure, buddies, regions) */
.askfun-chest, .askfun-treasure, .askfun-mini--wide { position: relative; padding-right: 52px; }
.askfun-chest::after, .askfun-treasure::after, .askfun-mini--wide::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 30px; height: 30px;
  transform: translateY(-50%); border-radius: 50%; background: #fff;
  box-shadow: var(--sh-1);
}
.askfun-chest::before, .askfun-treasure::before, .askfun-mini--wide::before {
  content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; z-index: 1;
  transform: translateY(-50%) rotate(45deg); border-top: 3px solid var(--j-green-d);
  border-right: 3px solid var(--j-green-d); border-radius: 2px;
}
.askfun-treasure::before { border-color: var(--j-blue); }
.askfun-chest__ic { right: 54px; }

/* keep motion calm under reduced-motion (spec §6.2) */
.ask-reduced .ask-tile, .ask-reduced .ask-btn { transition: none; }

/* ============================================================= */
/*  TREASURE MAP — winding trail of stepping-stone lesson nodes   */
/* ============================================================= */
.ask-map {
  background:
    radial-gradient(circle at 18% 8%, rgba(245,222,179,.30), transparent 55%),
    radial-gradient(circle at 88% 30%, rgba(150,200,140,.20), transparent 50%),
    radial-gradient(circle at 30% 90%, rgba(120,190,220,.16), transparent 55%);
}
/* region header becomes a warm banner card */
.ask-region__h {
  background: linear-gradient(135deg,#FFFDF7,#FFF3DE);
  border: 1px solid var(--j-line); border-left: 5px solid var(--rc, var(--j-green));
  border-radius: var(--r-md); padding: 10px 12px; box-shadow: var(--sh-1);
}
.ask-region__ic { border-width: 0; box-shadow: 0 4px 10px rgba(61,42,24,.18); background: #fff; }
.ask-bar { background: #E8DEC9; height: 10px; box-shadow: inset 0 1px 2px rgba(61,42,24,.10); }
.ask-bar i { background: linear-gradient(90deg,#22C55E,#0F9F43); }

/* the trail: a golden dashed path down the left */
.ask-path { padding-left: 8px; }
.ask-path:before {
  left: 34px; width: 5px; border-radius: 4px; top: 0; bottom: 0;
  background: repeating-linear-gradient(180deg,#CBA968 0 9px, transparent 9px 19px);
  opacity: .95;
}
/* stepping-stone nodes */
.ask-node { align-items: center; gap: 14px; padding: 7px 6px; border-radius: 16px; transition: transform .12s ease; position: relative; }
.ask-node:active { transform: scale(.985); }
.ask-node__dot {
  width: 54px; height: 54px; border-radius: 50%; font-size: 23px; z-index: 1; flex: 0 0 auto;
  border: 3px solid #fff;
  box-shadow: 0 5px 12px rgba(61,42,24,.22), inset 0 2px 5px rgba(255,255,255,.45);
}
.ask-node.is-open .ask-node__dot { background: var(--nc); color: #fff; border-color: #fff; }
.ask-node.is-done .ask-node__dot {
  background: linear-gradient(135deg,#FFDD6B,#F2A600); color: #fff; border-color: #fff;
  box-shadow: 0 5px 12px rgba(217,119,6,.42), inset 0 2px 5px rgba(255,255,255,.55);
}
.ask-node.is-locked { opacity: 1; }
.ask-node.is-locked .ask-node__dot {
  background: #DBCFB4; color: #9A8A6C; border-color: #EFE6D2;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.10);
}
.ask-node.is-next .ask-node__dot {
  box-shadow: 0 0 0 4px rgba(24,185,79,.30), 0 8px 16px rgba(24,185,79,.42), inset 0 2px 5px rgba(255,255,255,.5);
  animation: askMapBeat 1.6s ease-in-out infinite;
}
@keyframes askMapBeat { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ask-reduced .ask-node.is-next .ask-node__dot { animation: none; }
/* a little "start here" flag on the next lesson */
.ask-node.is-next::after {
  content: "▶ START"; position: absolute; left: 60px; top: 4px;
  background: linear-gradient(135deg,#22C55E,#0F9F43); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; box-shadow: var(--sh-1);
}
.ask-node.is-next .ask-node__t { margin-top: 14px; display: inline-block; }
/* treasure chest marker at the end of each region trail */
.ask-region { position: relative; padding-bottom: 8px; }
.ask-path::after {
  content: ""; display: block; width: 46px; height: 46px; margin: 4px 0 0 11px;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='7' y='20' width='34' height='20' rx='4' fill='%23B45309' stroke='%2378350F' stroke-width='2'/%3E%3Cpath d='M7 22 q17-14 34 0 v3 H7 z' fill='%23D97706' stroke='%2378350F' stroke-width='2'/%3E%3Crect x='20' y='23' width='8' height='11' rx='2' fill='%23FCD34D' stroke='%2378350F' stroke-width='1.6'/%3E%3Ccircle cx='24' cy='27' r='1.6' fill='%2378350F'/%3E%3Cpath d='M10 40 h28' stroke='%2378350F' stroke-width='1.5' opacity='.4'/%3E%3C/svg%3E");
  filter: drop-shadow(0 4px 6px rgba(61,42,24,.25));
}

/* "Say it" mic button on every word page — green = your turn to speak */
.ask-speak-btn--mic {
  background: linear-gradient(135deg,#22C55E,#0F9F43) !important; color: #fff !important;
  border: 0 !important; box-shadow: 0 4px 0 #0C8A3A, 0 8px 16px rgba(16,165,72,.32) !important;
}
.ask-speak-btn--mic:active { box-shadow: 0 1px 0 #0C8A3A !important; transform: translateY(3px); }

/* ============================================================= */
/*  Custom jungle microphone — used everywhere the child speaks   */
/* ============================================================= */
.ask-speak-btn--mic {
  background: #eafff1 center/62% no-repeat url("../art/ui/mic.png") !important;
  font-size: 0 !important; border: 2px solid #0F9F43 !important;
  box-shadow: 0 4px 0 #0C8A3A, 0 8px 16px rgba(16,165,72,.28) !important;
}
/* big record button: custom mic in the ready state; keep red/blue emoji states while recording */
.ask-mic:not(.is-rec):not(.is-busy) {
  background: #ffffff center/72% no-repeat url("../art/ui/mic.png");
  font-size: 0; box-shadow: 0 7px 0 #dcc98f, 0 14px 28px rgba(61,42,24,.22);
}
/* Speak tab icon */
.ask-nav button:nth-child(3) span {
  font-size: 0 !important; width: 26px; height: 26px; display: inline-block;
  background: center/contain no-repeat url("../art/ui/mic.png"); filter: none !important;
}
/* "Speak with Kiki" quick tile icon */
.ask-tile--s .ask-tile__ic {
  font-size: 0; background: #ffe1cc center/70% no-repeat url("../art/ui/mic.png");
}

/* ============================================================= */
/*  MAP v2 — numbered stones + lesson thumbnails + card rows      */
/*  (matches the Parrot Treehouse mockup)                         */
/* ============================================================= */
.ask-path { padding-left: 0; position: relative; }
.ask-path:before { left: 31px; top: 4px; bottom: 20px; width: 5px;
  background: repeating-linear-gradient(180deg,#CBA968 0 8px, transparent 8px 18px); }
.ask-node {
  display: flex; align-items: center; gap: 11px; position: relative; z-index: 1;
  background: #FFFDF7; border: 1px solid var(--j-line); border-radius: 18px;
  box-shadow: var(--sh-1); padding: 8px 12px 8px 6px; margin: 0 0 10px 0;
  transition: transform .12s ease;
}
.ask-node:active { transform: scale(.99); }
.ask-node__dot {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; font-size: 21px; font-weight: 900; color: #fff;
  border: 3px solid #fff; box-shadow: 0 5px 12px rgba(61,42,24,.22);
}
.ask-node.is-open .ask-node__dot { background: var(--nc); }
.ask-node.is-next .ask-node__dot { background: linear-gradient(135deg,#34D36B,#0F9F43);
  box-shadow: 0 0 0 3px rgba(24,185,79,.28), 0 6px 14px rgba(24,185,79,.42); animation: none; }
.ask-node.is-done .ask-node__dot { background: linear-gradient(135deg,#FFDD6B,#F2A600); }
.ask-node.is-locked .ask-node__dot { background: #CFC3A6; color: #7B6E52; box-shadow: inset 0 2px 4px rgba(0,0,0,.12); }
.ask-node.is-next::after { content: none; }
.ask-node__lock { position: absolute; right: -5px; bottom: -5px; font-size: 13px; font-style: normal;
  width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--sh-1); }
.ask-node__thumb {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 13px;
  display: grid; place-items: center; font-size: 27px;
  background: linear-gradient(135deg,#EAF7E6,#D6EFC7); box-shadow: inset 0 0 0 1px rgba(61,42,24,.06);
}
.ask-node__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ask-node__t { font-weight: 800; font-size: 1em; line-height: 1.15; }
.ask-node__s { font-size: .74em; font-weight: 700; color: var(--j-ink-2); margin-top: 1px; }
.ask-node.is-locked .ask-node__t { color: #8A7A5C; }
.ask-node__start {
  flex: 0 0 auto; background: linear-gradient(135deg,#22C55E,#0F9F43); color: #fff;
  font-weight: 800; font-size: .8em; padding: 8px 15px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(16,165,72,.35);
}
.ask-node.is-next {
  background: linear-gradient(135deg,#EBFBD3,#DAF3B2); border: 2px solid var(--j-green);
  box-shadow: 0 8px 20px rgba(24,185,79,.24);
}
/* A1 badge as a leaf */
.ask-levelhead__tag { border-radius: 50% 12px 50% 12px; }
/* treasure chest in the banner instead of the compass */
.askfun-treasure__ic { font-size: 0 !important; width: 40px; height: 40px; flex: 0 0 auto;
  background: center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='7' y='20' width='34' height='20' rx='4' fill='%23B45309' stroke='%2378350F' stroke-width='2'/%3E%3Cpath d='M7 22 q17-14 34 0 v3 H7 z' fill='%23D97706' stroke='%2378350F' stroke-width='2'/%3E%3Crect x='20' y='23' width='8' height='11' rx='2' fill='%23FCD34D' stroke='%2378350F' stroke-width='1.6'/%3E%3Ccircle cx='24' cy='27' r='1.6' fill='%2378350F'/%3E%3C/svg%3E"); }