/* PRO360 Kids — playful theme
 *
 * Layered on top of app.css. Everything here is a re-skin: colours, radii,
 * depth and the journey map. No layout rules move, so every existing screen
 * keeps working.
 *
 * The look comes from the reference art: a warm yellow canvas, mint panels,
 * fat rounded cards with a solid bottom edge (the "chunky" 3D press), pill
 * buttons and floating stat chips.
 */

:root {
  /* canvas */
  --sun:        #FFC81E;
  --sun-deep:   #F5A800;
  --sun-soft:   #FFE07A;
  --mint:       #C9F2E4;
  --mint-soft:  #E6FBF4;
  --mint-deep:  #8FDCC6;

  /* accents lifted from the reference */
  --grass:      #6DC24B;
  --grass-deep: #4E9B33;
  --sky:        #35B7E8;
  --sky-deep:   #1F94C2;
  --berry:      #FF6B6B;
  --berry-deep: #E04B4B;
  --grape:      #8C6BE8;
  --grape-deep: #6E4FC7;
  --tangerine:  #FF9F1C;

  /* ink */
  --ink:        #2B2A4A;
  --ink-soft:   #5D5B84;
  --ink-faint:  #918FB4;
  --line:       #E6E3F2;
  --bg:         #FFC81E;
  --card:       #FFFFFF;

  --purple:     var(--grape);
  --purple-d:   var(--grape-deep);
  --green:      var(--grass);
  --blue:       var(--sky);
  --orange:     var(--tangerine);
  --red:        var(--berry);
  --yellow:     var(--sun);
  --teal:       var(--mint-deep);

  --radius:   20px;
  --radius-l: 30px;
  --shadow:   0 3px 0 rgba(43,42,74,.10), 0 8px 22px rgba(43,42,74,.08);
  --shadow-l: 0 6px 0 rgba(43,42,74,.12), 0 18px 44px rgba(43,42,74,.16);

  --font: "Baloo 2", "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont,
          "Segoe UI Rounded", "Segoe UI", Inter, Roboto, sans-serif;
}

body {
  font-family: var(--font);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.35) 0 22%, transparent 22.5%),
    radial-gradient(circle at 88% 4%, rgba(255,255,255,.22) 0 14%, transparent 14.5%),
    var(--sun);
  font-weight: 600;
  color: var(--ink);
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.015em; }

/* app.css sets a lavender gradient on .shell-kid, which outranks the body rule
   above — restate it here so the kid surfaces stay on-theme. */
.shell-kid  { background: linear-gradient(180deg, #DDF6EC 0%, #FFE9A8 78%, var(--sun) 100%); }
.shell-admin { background: var(--bg); }

/* Content sits on a white sheet so the yellow reads as a frame, not a wash. */
main { position: relative; z-index: 1; }
.page {
  background: #FFFDF5;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -6px 0 rgba(255,255,255,.5);
  margin-top: .5rem;
  padding-top: 1.75rem;
  /* The sheet is the frame, so it owns its own inset. Scale it to the sheet
     rather than the viewport: a 1400px portal can afford generous margins, the
     460px login column cannot — the same clamp would eat a fifth of its width. */
  padding-inline: 1.25rem;
  min-height: 72vh;
}
.page.wrap,
.page.wrap-wide { padding-inline: clamp(1.25rem, 3.5vw, 3rem); }
.shell-kid .page { background: linear-gradient(180deg, var(--mint-soft), #FFFDF5 46%); }
/* The admin sheet matches the family portals — same product, same frame. Its
   own identity comes from the purple active tab further down, which no other
   portal uses. */
.shell-admin .page { background: #FFFDF5; }

/* ------------------------------------------------------------------ header */

/* The bar is transparent so the yellow canvas runs behind it — which means it
   must NOT be sticky, or scrolled content shows through and collides with the
   links (it wraps to two rows on a phone). Taking it out of the overlay and
   back into normal flow fixes both. */
.topbar {
  background: transparent; border-bottom: none; box-shadow: none;
  position: static;
}
.shell-kid .topbar { background: transparent; backdrop-filter: none; }
.topbar-in { height: auto; min-height: 70px; padding: .5rem 0; }
.brand-logo { height: 42px; filter: drop-shadow(0 2px 0 rgba(255,255,255,.65)); }

.nav a, .nav button.linklike {
  color: #7A5B00; font-weight: 800; border-radius: 999px;
}
.nav a:hover { background: rgba(255,255,255,.55); color: var(--ink); }
.nav a.on { background: #fff; color: var(--grape-deep); box-shadow: 0 2px 0 rgba(43,42,74,.10); }

.lang-pill {
  background: #fff; border: none; color: #7A5B00; font-weight: 800;
  box-shadow: 0 2px 0 rgba(43,42,74,.10);
}
.lang-pill:hover { color: var(--grape-deep); }

/* app.css gives the admin a dark navy bar, and `.shell-admin .topbar` outranks
   the plain `.topbar` re-skin above no matter which file loads last — so the
   yellow treatment has to be restated at matching specificity to reach it. */
.shell-admin .topbar { background: transparent; border-bottom: none; box-shadow: none; }
.shell-admin .brand { color: var(--ink); }
/* The white plate existed to keep the navy wordmark legible on the dark bar.
   On yellow the logo stands on its own again. */
.shell-admin .brand-logo {
  height: 42px; background: none; border-radius: 0; padding: 0;
}
.shell-admin .nav a,
.shell-admin .nav button.linklike { color: #7A5B00; font-weight: 800; }
.shell-admin .nav a:hover { background: rgba(255,255,255,.55); color: var(--ink); }
/* Purple, where the family portals go grape-on-white: the one cue that says
   which side of the product you are looking at. */
.shell-admin .nav a.on {
  background: var(--purple); color: #fff; box-shadow: 0 2px 0 rgba(43,42,74,.14);
}
.shell-admin .lang-pill {
  background: #fff; border: none; color: #7A5B00;
  box-shadow: 0 2px 0 rgba(43,42,74,.10);
}

/* ------------------------------------------------------------------- cards */

.card, .card-flat, .stat, .feat, .plan, .table-wrap, .comp-card, .game-card,
.pick-card, .q-card, .result-card {
  border-color: transparent;
  box-shadow: var(--shadow);
}
.card, .card-flat { border-radius: var(--radius); }
.stat { border-radius: var(--radius); background: var(--mint-soft); }
.shell-admin .stat { background: #fff; }

/* ----------------------------------------------------------------- buttons */

/* The chunky press: a solid colour edge instead of a soft shadow. */
.btn {
  border-radius: 999px; font-weight: 800; letter-spacing: .01em;
  background: var(--grass); box-shadow: 0 4px 0 var(--grass-deep);
  padding: .7rem 1.4rem; transform: translateY(0);
}
.btn:hover { background: var(--grass); filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--grass-deep); }
.btn-lg { padding: .95rem 1.9rem; font-size: 1.08rem; }

.btn-ghost {
  background: #fff; color: var(--ink-soft); box-shadow: 0 4px 0 var(--line);
}
.btn-ghost:hover { background: #fff; color: var(--ink); filter: none; }
.btn-ghost:active { box-shadow: 0 1px 0 var(--line); }

.btn-green  { background: var(--grass); box-shadow: 0 4px 0 var(--grass-deep); }
.btn-danger { background: var(--berry); box-shadow: 0 4px 0 var(--berry-deep); }
.btn-danger:active { box-shadow: 0 1px 0 var(--berry-deep); }

/* Primary actions on the marketing + auth screens read as "sky" like the ref. */
.hero-cta .btn:first-child { background: var(--sky); box-shadow: 0 4px 0 var(--sky-deep); }
.hero-cta .btn:first-child:active { box-shadow: 0 1px 0 var(--sky-deep); }

.btn-sm { padding: .4rem .9rem; box-shadow: 0 3px 0 var(--grass-deep); }
.btn-ghost.btn-sm { box-shadow: 0 3px 0 var(--line); }

/* ------------------------------------------------------------------- forms */

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=date], input[type=file], select, textarea {
  border-radius: 14px; border-width: 2px; border-color: var(--line);
  font-family: var(--font); font-weight: 600; background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--grape); box-shadow: 0 0 0 4px rgba(140,107,232,.16);
}
label { font-weight: 800; color: var(--ink-soft); }

/* ------------------------------------------------------------------- chips */

.tag { border-radius: 999px; font-weight: 800; border: none; background: #F0EEFA; }
.tag-green  { background: #DCF5D0; color: #3B7A22; }
.tag-blue   { background: #D6EFFB; color: #14688C; }
.tag-orange { background: #FFE8CC; color: #A85E06; }
.tag-red    { background: #FFDEDE; color: #B03636; }
.tag-purple { background: #E8E0FE; color: var(--grape-deep); }
.tag-grey   { background: #EFEDF6; color: var(--ink-faint); }

/* Floating stat chips, as on the reference map screen. */
.kid-stat {
  border-radius: 999px; box-shadow: 0 3px 0 rgba(43,42,74,.10);
  border: none; font-weight: 800; padding: .45rem 1rem;
}
.kid-avatar { border-radius: 24px; box-shadow: 0 4px 0 rgba(43,42,74,.10); border: none; }

/* --------------------------------------------------------------- gameplay */

.q-card { border-radius: 30px; box-shadow: var(--shadow-l); }
/* pre-line keeps the blank line that separates a comprehension passage from the
   question asked about it — otherwise the two run together as one paragraph. */
.q-prompt { font-weight: 800; white-space: pre-line; }
/* A passage is prose, not a headline: lighten it so the question still leads. */
.q-prompt.passage { font-weight: 600; font-size: 1.02rem; text-align: left; }
.q-prompt.passage .ask { display: block; font-weight: 800; margin-top: .9rem;
                         text-align: center; font-size: 1.15rem; }
.q-image {
  max-width: 100%; max-height: 210px; border-radius: 18px; margin: 0 auto 1rem;
  display: block; box-shadow: var(--shadow);
}

.choice {
  border-radius: 18px; border-width: 3px; border-color: var(--line);
  font-weight: 800; box-shadow: 0 3px 0 rgba(43,42,74,.06);
}
.choice:hover:not(:disabled) { border-color: var(--grape); background: #FBFAFF; }
.choice.picked { border-color: var(--grape); background: #F1ECFF; }
.choice.right  { border-color: var(--grass); background: #E5F8DA; color: #33701A; }
.choice.wrong  { border-color: var(--berry); background: #FFE6E6; color: #A83232; }

.match-item { border-radius: 16px; border-width: 3px; font-weight: 800; }
.type-input { border-radius: 18px; border-width: 3px; }

.play-progress { background: #fff; box-shadow: inset 0 2px 0 rgba(43,42,74,.06); height: 16px; }
.play-progress > span {
  background: repeating-linear-gradient(115deg, var(--tangerine) 0 10px, var(--sun) 10px 20px);
}

/* ---------------------------------------------------------- journey  map */

/* Levels as a winding path of nodes, like the reference's world map. */
.journey {
  position: relative; padding: 1.5rem 0 .5rem; margin-bottom: .5rem;
  background:
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.5) 0 10%, transparent 10.5%),
    linear-gradient(180deg, #DFF3C9, #C7E9F6);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.journey-track { position: relative; margin: 0 auto; width: min(340px, 94%); }

/* The route itself, drawn through the node centres. */
.journey-path { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey-path polyline {
  fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 2 18; opacity: .95;
}

.journey-slot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.journey-node {
  width: 68px; height: 68px; border-radius: 50%; background: #fff;
  box-shadow: 0 5px 0 rgba(43,42,74,.14); display: grid; place-items: center;
  text-decoration: none; color: var(--ink); border: 4px solid #fff;
  transition: transform .15s ease; line-height: 1;
}
.journey-node:hover { transform: translateY(-3px); text-decoration: none; }
.journey-node.done    { background: var(--grass); border-color: #fff; color: #fff;
                        box-shadow: 0 5px 0 var(--grass-deep); }
.journey-node.current { background: var(--sun); border-color: #fff;
                        box-shadow: 0 5px 0 var(--sun-deep); }
.journey-node.locked  { background: #EDEBF5; color: var(--ink-faint);
                        box-shadow: 0 5px 0 #DAD7E8; }
.journey-node .lvl { font-size: 1.5rem; font-weight: 800; }
.journey-node .st  { font-size: .55rem; letter-spacing: .02em; margin-top: .15rem; }
.journey-label {
  font-size: .72rem; font-weight: 800; color: #3C6B2A;
  background: rgba(255,255,255,.8); border-radius: 999px; padding: .1rem .5rem;
  white-space: nowrap;
}

/* The current node gently pulses so a child's eye lands on where to go next. */
@media (prefers-reduced-motion: no-preference) {
  .journey-node.current { animation: journey-pulse 2s ease-in-out infinite; }
}
@keyframes journey-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.journey-cap {
  text-align: center; font-weight: 800; color: #3C6B2A; font-size: .82rem;
  padding-bottom: .8rem;
}

/* ------------------------------------------------------------------ misc */

.comp-banner { border-radius: var(--radius-l); box-shadow: var(--shadow); }
.code-chip { border-radius: 18px; background: #fff; border-style: solid; border-color: var(--sun); }
.flash { border-radius: 16px; border: none; font-weight: 700; box-shadow: var(--shadow); }
.footer { border-top: none; color: #8A6A08; }
.bar { background: #EDEBF5; height: 10px; }
.bar > span { background: var(--grass); }
.spark-bar { background: var(--grape); border-radius: 8px 8px 3px 3px; }

th { background: transparent; color: var(--ink-faint); }
/* `overflow: hidden` rounded the corners but also overrode app.css's
   `overflow-x: auto`, so a wide table was cut off with no way to scroll to it —
   the admin Actions column simply became unreachable on a narrow screen.
   `overflow-x` clips to the radius just the same and keeps the table scrollable. */
.table-wrap { border-radius: var(--radius); overflow-x: auto; }

.badge-chip { border-radius: 18px; border: none; box-shadow: 0 3px 0 rgba(43,42,74,.08); }
.result-card { border-radius: 32px; }
.rank-pill { border: none; font-weight: 800; }

@media (max-width: 640px) {
  .page { border-radius: 26px 26px 0 0; }
  .journey-row.left  { transform: translateX(-48px); }
  .journey-row.right { transform: translateX(48px); }
}