/* ============================================================
   App portal "Pixer" theme layer — v7.33
   Loaded AFTER styles.css in app.html. Pure presentation:
   no markup or JS changes required. Mirrors the landing look:
   Poppins/Open Sans, gradient pills, soft white cards, dark
   sidebar, brand gradients (Sparks indigo→magenta; Bright
   Sparks blue→green via body.brand-bright, applied by the
   branding middleware exactly as on the landing page).
   ============================================================ */

:root{
  --a1:#3F27BD; --a2:#D22CB2;      /* Sparks Academy gradient */
  --acc:#F434A1;
  --grad:linear-gradient(90deg,var(--a1),var(--a2));
  --grad-135:linear-gradient(135deg,var(--a1),var(--a2));

  /* retune shared tokens */
  --ink:#222222;
  --ink-soft:#444455;
  --paper:#f7f7fb;
  --line:#ececf3;
  --violet:#3F27BD;                 /* keeps existing var users on-brand */
  --violet-soft:#f3effc;
  --radius:12px;
  --radius-sm:9px;
  --shadow:0 10px 30px rgba(34,34,60,.08);
  --font-display:'Poppins','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Open Sans','Segoe UI',system-ui,sans-serif;
}
body.brand-bright{
  --a1:#0084F7; --a2:#0FCC83;
  --acc:#0aa06d;
  --violet:#0a6cd6;
  --violet-soft:#eaf6f1;
}

h1,h2,h3,h4{ letter-spacing:0; }
a{ color:var(--violet); }
:focus-visible{ outline:3px solid var(--acc); }

/* ---------- sidebar: light Pixer panel (v8.2 — dark look retired) ---------- */
.sidebar{ background:#ffffff; color:var(--ink); border-right:1px solid var(--line); box-shadow:4px 0 18px rgba(34,34,60,.05); }
.sidebar a, .sidebar .brand-name{ color:var(--ink); }
.sidebar .brand-mark{ background:var(--grad-135); color:#fff; border-radius:50%; box-shadow:0 6px 14px rgba(0,0,0,.18); }
.sidebar .brand-name em{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.side-nav a{ border-radius:999px; color:var(--ink-soft); }
.side-nav a:hover{ background:var(--violet-soft); color:var(--violet); }
/* v11.2.36a — the selected item, as quiet as the Hide menu button.

   It was a full-bleed indigo→magenta gradient pill with a heavy shadow: the
   loudest thing on the screen, permanently, for a row that only says where you
   already are. A white pill with a hairline and the accent carried by the text
   and a bar down the left says the same thing without shouting it. */
.side-nav a.active{
  background:#fff; color:var(--a1); font-weight:700;
  border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(61,75,102,.12);
  position:relative;
}
/* v11.5.5: the gradient bar down the left of the active item is gone —
   the white pill, the accent text and the shadow already say it. */
.side-nav a.active .nav-ico,.side-nav a.active img{ filter:none; }
.side-nav .nav-group{ color:#9a9aa8; }
.sidebar .btn-ghost{ border-color:var(--line); color:var(--ink); }
.sidebar .btn-ghost:hover{ border-color:var(--a1); color:var(--a1); }

/* ---------- topbar ---------- */
.topbar{ box-shadow:0 5px 20px rgba(34,34,60,.06); border-bottom:0; }
.spark-meter{ background:var(--grad); color:#fff; }
.spark-meter b{ color:#fff; }

/* ---------- cards ---------- */
.card,.stat-card,.badge-card,.lesson-card,.qblock{
  border:0; box-shadow:var(--shadow); border-radius:var(--radius);
  /* v11.5.5: a whisper of translucency so the page tint shows through, and the
     mock question blocks (.qblock) sit in the same card family as everything
     else instead of carrying their own hairline border. */
  background-color:#ffffffa8;
}
.card:hover,.stat-card:hover{ box-shadow:0 14px 36px rgba(34,34,60,.11); }
.stat-card .stat-value{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* v11.27.0: the same correction at the figure that reports a child's score.
   Large text needs 3:1; the old pair managed 2.43:1, so the number a child
   most wants to read was the hardest thing on the card to read. These are
   3.47:1 and 4.64:1, and stay brighter than the button because a figure is
   not a control. */
.stat-spark .stat-value{
  background:linear-gradient(90deg,#E2632A,#D42B8C);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- buttons: gradient pills ---------- */
.btn{ border-radius:999px; font-family:var(--font-display); font-weight:600; }
.btn-primary{
  background:var(--grad); background-size:180% 100%; background-position:0 0;
  box-shadow:0 8px 20px rgba(0,0,0,.18); border:0; color:#fff;
  transition:background-position .35s,transform .15s,box-shadow .15s;
}
.btn-primary:hover{ background:var(--grad); background-size:180% 100%; background-position:95% 0; transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,0,0,.22); }
/* v11.27.0 — the one-next-thing button.

   Two changes, one of them a real accessibility fix. White on the old orange
   (#FF8442) measured 2.43:1, which fails normal-text contrast outright and is
   hard work on a bright screen for a child with low vision. The gradient now
   runs #C64A1B to #C2237F: 4.78:1 and 5.47:1, so both ends clear AA at any
   size. It reads as the same colour, just less washed out.

   The second change is not in this file: btn-spark is now RESERVED for the
   single next action on a screen (see V._sparkCta in views-student.js).
   Two orange buttons on one page halve each other, and a child then has to
   work out which of two identical-looking calls to action is the real one. */
.btn-spark{
  background:linear-gradient(90deg,#C64A1B,#C2237F); color:#fff;
  box-shadow:0 8px 20px rgba(194,35,127,.28); border:0;
}
.btn-spark:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.btn-ghost{ border:2px solid var(--line); }
.btn-ghost:hover{ border-color:var(--a1); color:var(--a1); }
.btn-sm{ border-radius:999px; }

/* ---------- chips / tags / fields ---------- */
.chip{ border-radius:999px; }
.chip:hover{ border-color:var(--a1); color:var(--a1); }
.tag{ font-family:var(--font-display); font-weight:600; letter-spacing:.03em; }
.field input,.field select,.field textarea{ border-radius:10px; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--a1); outline:2px solid var(--violet-soft); }

/* ---------- progress / quiz / exam bits ---------- */
.progress > i{ background:var(--grad); }
.progress.violet > i{ background:var(--grad); }
.q-option{ border-radius:10px; }
.q-option:hover{ border-color:var(--a1); }
.q-option.selected{ border-color:var(--a1); background:var(--violet-soft); }
.palette button.answered{ background:var(--grad); border-color:transparent; }
.palette button.current{ box-shadow:0 0 0 3px var(--a2); }
.palette button.flagged{ outline:2px solid #FF8442; }
.exam-timer{ border-radius:999px; font-family:var(--font-display); }
.score-ring{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lb-row.me{ background:var(--violet-soft); }
.lb-row.top1 .lb-rank{ color:var(--acc); }
.lb-sp{ color:var(--acc); }

/* ---------- auth screen: landing-style gradient hero ---------- */
.auth-hero{ background:linear-gradient(115deg,var(--a1) 0%,var(--a2) 100%); }
.auth-hero::after{ display:none; }
.auth-hero::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  background:rgba(255,255,255,.09); top:-110px; right:-90px;
}
.auth-hero .brand-mark{ background:rgba(255,255,255,.95); border-radius:50%; }
.auth-strap{ font-family:var(--font-display); font-weight:700; }
.spark-word{
  font-family:'Playfair Display',serif; font-style:italic; color:#fff;
  border-bottom:3px solid rgba(255,255,255,.55);
}
.auth-sub{ color:rgba(255,255,255,.92); }
.auth-points li{ color:rgba(255,255,255,.95); }
.auth-points li::before{ content:"✦"; color:#fff; }
.auth-card{ border-radius:16px; box-shadow:0 20px 50px rgba(34,34,60,.16); }
.auth-card h2{ font-family:var(--font-display); }

/* ---------- misc polish ---------- */
.topbar-title{ font-weight:600; }
.hamburger{ border-radius:999px; }
.form-error{ border-radius:10px; }
.table-wrap table th{ font-family:var(--font-display); font-weight:600; }


/* ---------- v8.2.2: flat icon set replaces emojis ---------- */
.side-nav .ico .nav-img{width:22px;height:22px;object-fit:contain;display:block}
.side-nav .ico{display:inline-flex;align-items:center;justify-content:center}

/* ============================================================
   v11.23.0 — line icons (js/icons.js)
   They draw in `currentColor`, so the icon and its label always agree:
   grey at rest, violet when active, white on a gradient button. Nothing
   here sets a colour; that is the point.
   ============================================================ */
.sa-ico{width:1.15em;height:1.15em;flex:none;vertical-align:-0.18em}
.side-nav .ico .nav-svg{width:21px;height:21px;opacity:.9}
.side-nav a.active .ico .nav-svg{opacity:1}
/* a heading's icon sits on the text baseline and takes the brand accent */
/* the heading's icon: violet, on the baseline, with air after it. Matched at
   any depth because the icon is often inside the heading's link. */
h1 .sa-ico,h2 .sa-ico,h3 .sa-ico,.announce b .sa-ico,.ci-course-head .sa-ico{
  width:1.05em;height:1.05em;margin-right:.42em;color:var(--violet)
}
.announce b .sa-ico{color:inherit}
.tw-item .sa-ico,.ci-item .sa-ico{margin-right:0}
.btn .sa-ico,.btn-spark .sa-ico,.btn-primary .sa-ico{margin-right:.4em}
.ico-dot{opacity:.45}
.spark-meter .meter-img{width:15px;height:15px;object-fit:contain;vertical-align:-2px}
.sidebar .brand-mark{
  background:url("/assets/icons/bolt.png") center/58% no-repeat, var(--grad-135);
  color:transparent;
}

/* v12.59.0: "Sparks" in the login-page logo was the sidebar's dark blue on the
   purple hero, which read as dull. On the hero it is white with a soft glow;
   "Academy" keeps its gold. */
.auth-hero .brand-name{ color:#fff; text-shadow:0 1px 10px rgba(255,255,255,.35); }
.auth-hero .brand-name em{ color:#FFC83D; }
/* v12.59.0: each tick on its own line in the sign-up form, as in the pop-up */
#register-form .check{ display:block; position:relative; padding-left:26px; margin:8px 0; }
#register-form .check input{ position:absolute; left:0; top:3px; margin:0; }