/* ── Shared design tokens + reset ─────────────────────────────────────────────
   Extracted in Phase 2 from the per-page copies. ONLY values that were
   byte-identical across every page live here; anything that drifted per page
   (--purple-l, --sh, --green-l/--red-l/--orange-l, toast offsets, topbar
   variants) stays in that page's own <style> block and overrides these. */
:root {
  /* Fundio-inspired system: palm green + screamin' green + soft pastels */
  --bg:        #FCFCFC;   /* clean near-white */
  --surface:   #FFFFFF;
  --border:    #EDEEEC;
  --accent:    #1B6FD8;   /* brand blue — primary */
  --accent-l:  #EAF2FD;
  --accent-d:  #123E75;   /* deep navy — hero, key numbers */
  --bright:    #1B6FD8;   /* single accent — CTAs, active states */
  --bright-d:  #10488F;
  --text:      #171D18;
  --sub:       #6E756E;
  --muted:     #9DA39C;
  --red:       #D94040;
  --toast-bg:  #1A2438;
  --green:     #12A05A;
  --orange:    #E07B00;
  --purple:    #7A53C9;
  --peach:     #FAEFE4;
  --lemon:     #FAF6DF;
  --aqua:      #E6F4F1;
  --pinkp:     #F9EEF3;
  --tab-h:     72px;
  --safe-bot:  env(safe-area-inset-bottom, 0px);
}

html, body { font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif; line-height: 1.5; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { overflow-x: clip; }   /* clip (not hidden) — hidden breaks position:sticky */
a { text-decoration: none; }

/* ── Mobile UX pass: minimum touch targets (Apple HIG 44pt) ──────────────────
   Pages still declare their original 36-38px sizes; these earlier-sheet
   !important rules win the cascade without editing every page. */
.topbar .topbar-action, .topbar .eye-btn, .topbar-actions .icon-btn,
.eye-btn, .topbar-action { width: 44px !important; height: 44px !important; }
.back-btn { min-width: 44px; min-height: 44px; }
.seg-btn { min-height: 40px !important; }
.btn-refresh { min-height: 44px !important; }

/* Shared pill buttons. Also used by the requirePin() confirm sheet built in
   app.js, so they must live in the shared stylesheet (not only in the pages
   that happen to redefine them) or the dialog renders unstyled. Pages may
   still override these locally; identical rules there are harmless. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; border: none; border-radius: 999px; cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: .78rem; font-weight: 700;
  padding: 9px 14px; min-height: 36px; white-space: nowrap; text-decoration: none;
  transition: opacity .15s;
}
.btn:active { opacity: .75; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-green   { background: var(--green); color: #fff; }
.btn-red     { background: #FDECEC; color: var(--red); border: 1px solid #F5C0C0; }
.btn-blue    { background: var(--accent-l); color: var(--accent); }
.btn-ghost   { background: var(--surface); color: var(--sub); border: 1.5px solid var(--border); }
.btn-orange  { background: #FBEFDD; color: var(--orange); border: 1px solid #F2D9AE; }
.btn-full    { width: 100%; min-height: 52px; border-radius: 999px; padding: 14px; font-size: .95rem; font-weight: 800; }
.btn-red.btn-full { background: var(--red); color: #fff; border: none; }

/* ── Redesign: shared component polish ── */
.seg-btn { border-radius: 12px !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   FD component library — full redesign. Every page composes these.
   ═══════════════════════════════════════════════════════════════════════ */

/* page scaffold */
.fd-page { max-width: 560px; margin: 0 auto; padding: 0 20px calc(150px + var(--safe-bot)); }
.fd-sec { margin-top: 36px; }
.fd-sec-title { font-size: .8rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; }
.fd-sec-title .fd-see { font-size: .78rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--accent); cursor: pointer; text-decoration: none; }

/* greeting */
.fd-greet { padding: 28px 0 8px; }
.fd-greet-hi { font-size: .95rem; font-weight: 600; color: var(--sub); }
.fd-greet-big { font-size: 1.8rem; font-weight: 800; color: var(--accent); letter-spacing: -.03em; line-height: 1.15; }

/* hero block (student portal / profile headers) */
.fd-hero { background: none; border-radius: 0; padding: 10px 0 4px; color: var(--text); display: flex; align-items: center; gap: 16px; }
.fd-hero .fd-hero-name { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.fd-hero .fd-hero-name em { font-style: normal; color: var(--accent); }
.fd-hero .fd-hero-sub { font-size: .85rem; color: var(--sub); margin-top: 3px; line-height: 1.45; }

/* pastel stat tiles */
.fd-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: 20px; padding: 2px 20px 8px; margin: 0 -20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; }
.fd-tiles::-webkit-scrollbar { display: none; }
.fd-tiles .fd-tile { flex: 0 0 auto; width: 158px; scroll-snap-align: start; }
.fd-tiles.two { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; margin: 0; padding: 0; }
.fd-tiles.two .fd-tile { width: auto; }
.fd-tile { border-radius: 22px; padding: 16px 14px 14px; background: var(--surface); border: 1px solid var(--border); min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0; }
.fd-tile .fd-tile-lbl { font-size: .64rem; font-weight: 800; letter-spacing: .04em; line-height: 1.5; text-transform: uppercase; color: rgba(23,29,24,.55); white-space: nowrap; }
.fd-tile .fd-tile-val { font-size: 1.3rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; white-space: nowrap; }
.fd-tile.peach { background: var(--peach); }
.fd-tile.lemon { background: var(--lemon); }
.fd-tile.aqua  { background: var(--aqua); }
.fd-tile.pinkp { background: var(--pinkp); }
.fd-tile.dark  { background: var(--accent); }
.fd-tile.dark .fd-tile-lbl { color: rgba(255,255,255,.65); }
.fd-tile.dark .fd-tile-val { color: #fff; }
.fd-tile.on-hero { background: var(--surface); border: 1px solid var(--border); }
.fd-tile.on-hero .fd-tile-lbl { color: rgba(23,29,24,.55); }
.fd-tile.on-hero .fd-tile-val { color: var(--text); }

/* cards + list rows */
.fd-card { background: none; border: none; border-radius: 0; padding: 0; }
.fd-card.boxed { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 8px; }
.fd-card.pad { padding: 22px; }
.fd-row { display: flex; align-items: center; gap: 14px; padding: 18px 2px; border-radius: 0; cursor: pointer; transition: background .12s; text-decoration: none; color: inherit; }
.fd-row:active { background: var(--bg); }
.fd-row + .fd-row { border-top: 1px solid var(--border); }
.fd-row .fd-row-main { flex: 1; min-width: 0; }
.fd-row .fd-row-title { font-size: .98rem; font-weight: 700; color: var(--text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row .fd-row-title.wrap { white-space: normal; line-height: 1.25; }
.fd-row .fd-row-sub { font-size: .82rem; color: var(--sub); margin-top: 4px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-row .fd-row-end { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fd-chev { color: var(--muted); flex-shrink: 0; font-size: 1.1rem; }

/* date tile (lessons, upcoming) */
.fd-daytile { width: 54px; height: 58px; border-radius: 16px; background: var(--accent-l); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-daytile .dt-dow { font-size: .58rem; font-weight: 800; letter-spacing: .08em; color: var(--accent); text-transform: uppercase; }
.fd-daytile .dt-num { font-size: 1.25rem; font-weight: 800; color: var(--text); line-height: 1.05; }
.fd-daytile .dt-mon { font-size: .58rem; font-weight: 700; color: var(--sub); }
.fd-daytile.today { background: var(--bright); }
.fd-daytile.today .dt-num { color: #fff; }
.fd-daytile.today .dt-mon { color: rgba(255,255,255,.75); }
.fd-daytile.today .dt-dow { color: rgba(255,255,255,.85); }
.fd-daytile.muted { background: #F3F5F8; }

/* avatar */
.fd-avatar { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-l); color: var(--accent-d); font-weight: 800; font-size: 1.05rem; flex-shrink: 0; }
.fd-avatar.lg { width: 64px; height: 64px; border-radius: 20px; }

/* chips */
.fd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; background: var(--accent-l); color: var(--accent); }
.fd-chip.green { background: #E6F7EC; color: var(--green); }
.fd-chip.orange { background: #FBEFDD; color: var(--orange); }
.fd-chip.red { background: #FDECEC; color: var(--red); }
.fd-chip.purple { background: #F0EAFB; color: var(--purple); }
.fd-chip.gray { background: var(--bg); color: var(--sub); }
.fd-chip.bright { background: var(--bright); color: #fff; }

/* buttons */
.fd-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: none; border-radius: 999px; background: var(--bright); color: #fff; text-decoration: none !important; font-family: inherit; font-size: 1rem; font-weight: 800; cursor: pointer; transition: transform .1s, background .15s; }
.fd-btn:active { transform: scale(.985); background: var(--bright-d); }
.fd-btn.dark { background: var(--accent); color: #fff; }
.fd-btn.ghost { background: var(--surface); border: 1.5px solid var(--border); color: var(--text); font-weight: 700; }
.fd-btn.danger { background: var(--red); color: #fff; }
.fd-btn.sm { min-height: 42px; width: auto; padding: 0 18px; font-size: .88rem; }

/* segmented pills */
.fd-seg { display: flex; gap: 6px; background: var(--surface); border: 1px solid var(--border); padding: 5px; border-radius: 999px; }
.fd-seg button { flex: 1; min-height: 40px; border: none; border-radius: 999px; background: none; font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--sub); cursor: pointer; }
.fd-seg button.active { background: var(--bright); color: #fff; }

/* topbar (rebuilt pages) */
.fd-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); position: sticky; top: 0; background: var(--bg); z-index: 60; }
.fd-top .fd-top-title { font-size: 1.05rem; font-weight: 800; color: var(--text); flex: 1; text-align: center; }
.fd-iconbtn { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--sub); cursor: pointer; flex-shrink: 0; text-decoration: none; }
.fd-iconbtn.danger { background: #FDECEC; border-color: #F5C0C0; color: var(--red); }
.fd-iconbtn.danger:active { background: #F9DADA; }

/* rounded bar chart (stats / student activity) */
.fd-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 6px 4px 0; }
.fd-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.fd-bar .bar { width: 100%; max-width: 34px; border-radius: 10px; background: #EDF0F3; min-height: 6px; }
.fd-bar.current .bar { background: var(--bright); }
.fd-bar .bar-lbl { font-size: .62rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.fd-bar.current .bar-lbl { color: var(--accent); }

/* ── v3: standardised icons + icon tiles ── */
.fd-iconbtn svg { width: 20px !important; height: 20px !important; }
.fd-ico { width: 38px; height: 38px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-l); color: var(--accent-d); }
.fd-ico svg { width: 19px; height: 19px; }
.fd-ico.peach { background: var(--peach); } .fd-ico.lemon { background: var(--lemon); }
.fd-ico.aqua { background: var(--aqua); }   .fd-ico.pinkp { background: var(--pinkp); }
.fd-ico.red { background: #FDECEC; color: var(--red); }
.fd-tile .fd-ico { margin-bottom: 2px; }
/* avatar picker (add/edit student sheets) */
.fd-avpick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 8px 0 4px; }
.fd-avpick .fd-avatar { width: 100%; aspect-ratio: 1; height: auto; cursor: pointer; border: 2px solid transparent; }
.fd-avpick .fd-avatar.sel { border-color: var(--accent); }

/* stats bar chart: value floats above the bar (never steals bar height); tap to reveal */
.fd-bar { position: relative; }
.fd-bar .bar-zone { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.fd-bar .bar-val { position: absolute; left: 50%; transform: translateX(-50%); font-size: .62rem; font-weight: 800; color: var(--accent); white-space: nowrap; opacity: 0; transition: opacity .15s; pointer-events: none; }
.fd-bar.current .bar-val, .fd-bar.show .bar-val { opacity: 1; }

/* ── Quiet action rows under lesson cards (shared by 1-1 + group records) ──
   One prominent Sign pill stays; every other action is a compact text
   button so expanded cards don't turn into a wall of pills. */
.act-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 6px; }
.act-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 999px; padding: 9px 14px; min-height: 40px; font-family: inherit; font-size: .76rem; font-weight: 800; color: var(--sub); cursor: pointer; text-decoration: none; letter-spacing: .01em; }
.act-btn:active { background: var(--bg); }
.act-btn.blue { color: var(--accent); }
.act-btn.red { color: var(--red); }