/* ============================================================
   Springboard Minds — shared chrome
   ----------------------------------------------------------------
   Loaded by every tool (index, spelling, math, letters, sight-words,
   color) via <link rel="stylesheet" href="_shared.css">. Single source
   of truth for the brand palette, brand bar header, floating dot/
   sparkle decorations, and footer wave.

   Per-tool stylesheets stay inline and may add their own:
     • theme accent variables (--accent, --accent-dark, --accent-tint)
     • --container-max / --container-padding when a tool needs a
       different card width or density
     • screen and tool-specific component styles
     • per-tool media-query overrides

   Convention: this file contains ONLY rules that should be identical
   across every tool. Tool-specific tweaks belong in the tool's own
   <style> block so changes here can never accidentally regress one
   game while improving another.
   ============================================================ */

/* ---- Brand palette (shared across all tools) ---- */
:root{
  --teal:#1F7A8C;        --teal-dark:#155862;     --teal-light:#D4ECEF;
  --mint:#7BD389;        --mint-dark:#4FA960;     --mint-tint:#E7F5E8;
  --gold:#F4C95D;        --gold-dark:#C08A1A;     --gold-tint:#FDEBB8;
  --coral:#EE6C4D;       --coral-dark:#D85A3A;    --coral-tint:#FDE3DA;
  --plum:#8B5CF6;        --plum-dark:#6D28D9;     --plum-tint:#EDE4FA; --plum-soft:#F4EEFC;
  --sky:#3B82F6;         --sky-dark:#1D4ED8;      --sky-tint:#DBEAFE;
  --rose:#F472B6;        --rose-dark:#BE185D;     --rose-tint:#FCE7F3;
  --aqua:#14B8A6;        --aqua-dark:#0F766E;     --aqua-tint:#CCFBF1;
  --gold-soft:#FFF6DE;
  --cloud:#ECF3FA;
  --ink:#22394A;         --ink-soft:#6A7E8C;
  /* Default accent — tools override these inside their own :root if
     they want a different theme colour (letters uses plum, etc.). */
  --accent: var(--teal);
  --accent-dark: var(--teal-dark);
  --accent-tint: var(--teal-light);
  --container-max: 760px;
  --container-padding: 36px;
  --container-padding-mobile: 22px 16px;
  --container-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

/* ---- Universal reset + body base ---- */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Set the cloud background on <html> so macOS desktop Safari paints it
   across the full canvas (including any scroll-overflow area). When
   the bg lives only on <body>, some Safari builds fail to propagate
   it to the canvas and the page reads as plain white. */
html{ background: var(--cloud); }
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--cloud);
  color: var(--ink);
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
  /* justify-content keeps the brand bar at the top so the .sbm-foot
     can grow downward and let the wave SVG (width: 100vw) sit at the
     bottom of the viewport instead of being squashed. */
  justify-content: flex-start;
  padding: 20px;
  /* On a wide screen the .sbm-foot-wave (width:100vw, translateX(-50%))
     can extend a few pixels past body's padded edge before being
     centered. Without overflow-x:hidden + position:relative the wave
     gets clipped to body's content area on the right, which looks
     like a shorter-than-viewport footer. Mirrors the home page. */
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  /* Prevent text selection across the whole UI. Kids tapping cards or
     handwriting on canvases should never accidentally highlight a
     label, header, or footer line. Text inputs + textareas are
     re-enabled below so typing, search, etc. still work normally. */
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
}
/* Re-enable selection for elements where typing/editing is the point.
   contenteditable areas join inputs + textareas so any future custom
   editor (math draw input notes, etc.) keeps cursor + selection. */
input, textarea, [contenteditable="true"]{
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  -webkit-touch-callout: default;
}

/* ============ Shared tool shell ============
   The card, hero, kicker, info bar, and hidden-state primitives are
   identical across the practice tools. Individual tools should only
   override custom properties or add truly tool-specific pieces. */
.container{
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--container-shadow);
  padding: var(--container-padding);
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.hidden{ display: none !important; }

.hero-section{ text-align: center; margin: 6px 0 16px; }
.kicker{
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent-dark);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.hero-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0;
  line-height: 1.1;
}
.hero-title .rays{ color: var(--gold); width: 22px; flex-shrink: 0; }
.hero-title .rays.r{ transform: scaleX(-1); }
.hero-sub{ color: var(--ink-soft); font-size: 15px; margin-top: 6px; }

.info-bar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  padding: 10px 14px;
  border-radius: 16px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
}

/* ============ Shared start-screen selectors ============
   New tools should use these classes directly. Existing tools may keep
   narrow overrides for layout density, icons, or tool-specific rows. */
#startScreen{ text-align: center; padding: 4px 0 18px; }
#startScreen .hero-section{ margin: 10px 0 22px; }
#startScreen .hero-title{
  gap: 16px;
  letter-spacing: -.5px;
  margin: 0;
}
#startScreen .hero-title .rays{ height: 22px; }
#startScreen .hero-sub{
  margin: 8px auto 0;
  max-width: 460px;
  font-size: 15.5px;
  line-height: 1.4;
}
#startScreen .select-card{
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 22px;
  max-width: var(--select-card-max, 560px);
  width: 100%;
  margin: 20px auto 10px;
  padding: 18px 18px 22px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  box-sizing: border-box;
}
#startScreen .select-card-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
#startScreen .select-card-head .badge{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#startScreen .select-card-head .badge svg{ width: 22px; height: 22px; }
#startScreen .select-card-head h3{
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
#startScreen .select-card-head p{
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}
#startScreen .search-wrap{
  position: relative;
  margin-bottom: 14px;
}
#startScreen .search-wrap svg{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  pointer-events: none;
}
#startScreen #groupSearch,
#startScreen .search-wrap input[type=text]{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px 12px 42px;
  border: 2px solid var(--accent-tint);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#startScreen #groupSearch:focus,
#startScreen .search-wrap input[type=text]:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
#startScreen .group-section{ margin-bottom: 14px; }
#startScreen .group-section:last-child{ margin-bottom: 2px; }
#startScreen .group-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 6px 2px 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
#startScreen .group-section-head .h{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
#startScreen .group-section-head .chev{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transition: transform .2s, background-color .15s;
  flex-shrink: 0;
}
#startScreen .group-section-head:hover .chev{
  background: var(--accent);
  color: #fff;
}
#startScreen .group-section.collapsed .chev{ transform: rotate(-90deg); }
#startScreen .group-section.collapsed .group-grid{ display: none; }
#startScreen .group-grid{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#startScreen .group-grid.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
#startScreen .group-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid #EEF1F4;
  border-radius: 14px;
  background: #FAFBFC;
  cursor: pointer;
  font-size: 14.5px;
  color: var(--ink);
  transition: border-color .12s, background-color .12s;
}
#startScreen .group-item:hover{
  border-color: var(--accent);
  background: #fff;
}
#startScreen .group-item.is-checked{
  border-color: var(--accent);
  background: var(--accent-tint);
}
#startScreen .group-item .gi-text{
  flex: 1;
  min-width: 0;
}
#startScreen .group-item .gi-label{ font-weight: 700; }
#startScreen .group-item .gi-meta,
#startScreen .group-item .count,
#startScreen .group-item .gi-count{
  color: var(--ink-soft);
  font-weight: 700;
}
#startScreen .group-item input[type=checkbox],
#startScreen .group-item .gi-radio,
#startScreen .group-item .radio{
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  background: #fff;
  position: relative;
}
#startScreen .group-item input[type=checkbox]{
  border-radius: 6px;
}
#startScreen .group-item .gi-radio,
#startScreen .group-item .radio{
  border-radius: 50%;
}
#startScreen .group-item input[type=checkbox]:checked,
#startScreen .group-item.is-checked .gi-radio,
#startScreen .group-item.is-checked .radio{
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
#startScreen .group-item input[type=checkbox]:checked::after{
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
#startScreen .group-item.is-checked .gi-radio::after,
#startScreen .group-item.is-checked .radio::after{
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}
#startScreen .group-item .gi-icon{
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #EEF1F4;
}
#startScreen .group-item.is-checked .gi-icon{
  border-color: var(--accent);
  background: #fff;
}
#startScreen .group-item .gi-icon svg,
#startScreen .group-item .gi-icon .mini svg{
  width: 80%;
  height: 80%;
}
#startScreen .group-item .gi-meta{
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.3;
}
#startScreen .group-item .count{
  margin-left: auto;
  font-size: 12.5px;
  flex-shrink: 0;
}
#startScreen .group-item .gi-count{
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--ink-soft);
  background: #F4F7FA;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
#startScreen .group-item.is-checked .gi-count{
  background: #fff;
  color: var(--accent-dark);
}
#startScreen .chips-bar{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 4px 10px;
  margin-bottom: 10px;
  border-bottom: 2px dashed #EEF1F4;
  flex-wrap: wrap;
}
#startScreen .chips-bar .badge-sm{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 4px;
}
#startScreen .chips-bar .badge-sm svg{ width: 16px; height: 16px; }
#startScreen .chips-bar .chips-label{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 9px;
  flex-shrink: 0;
}
#startScreen #chipsList{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
#startScreen .chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  max-width: 100%;
}
#startScreen .chip .x{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: inherit;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
#startScreen .chip .x:hover{ background: rgba(0,0,0,.14); }
#startScreen .chips-empty{
  font-size: 13.5px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 9px 2px;
}
#startScreen .chips-clear{
  background: none;
  border: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 9px 4px;
  margin-left: auto;
  flex-shrink: 0;
}
#startScreen .chips-clear:hover{ color: var(--accent-dark); }
#startScreen .check-pill{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 10px 18px 10px 14px;
  margin: 18px auto 4px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
#startScreen .select-card-toggles{
  border-top: 2px dashed #EEF1F4;
  margin-top: 14px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#startScreen .check-pill--flush{
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px 4px;
  margin: 0;
  width: 100%;
  font-size: 14.5px;
}
#startScreen .check-pill input[type=checkbox]{
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  border: 2px solid var(--accent);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
#startScreen .check-pill input[type=checkbox]:checked{
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}
#startScreen .check-pill input[type=checkbox]:checked::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
#startScreen .cta-wrap{
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#startScreen .start-hint{
  min-height: 20px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 520px){
  .container{ padding: var(--container-padding-mobile); }
  .hero-title{ font-size: 24px; }
  #startScreen .hero-title{ gap: 10px; }
}
@media (max-width: 480px){
  #startScreen .group-grid.two-col{ grid-template-columns: 1fr; }
  #startScreen .chips-bar .chips-label{ display: none; }
}

/* ============ Brand bar (top of every practice tool) ============ */
.sbm-brand-bar{
  display: flex; align-items: center; gap: 12px;
  margin: -16px -16px 18px; padding: 12px 16px;
  border-bottom: 1px solid #E8EEF3;
  flex: 0 0 auto;
}
.sbm-brand-bar .home{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal-light); color: var(--teal-dark);
  text-decoration: none; font-weight: 800; font-size: 18px;
  flex-shrink: 0;
}
.sbm-brand-bar .home:hover{ background: #B8DCE1; }
.sbm-brand-bar .mini-logo{ height: 44px; width: auto; flex-shrink: 0; display: block; }
.sbm-brand-bar .wm{
  display: flex; flex-direction: column; line-height: 1; gap: 2px;
  flex: 1; min-width: 0; text-align: left;
}
.sbm-brand-bar .wm .sp{ color: var(--teal);      font-weight: 800; font-size: 17px; letter-spacing: -.3px; }
.sbm-brand-bar .wm .mn{ color: var(--mint-dark); font-weight: 800; font-size: 17px; letter-spacing: -.3px; }
.sbm-brand-bar .tag{
  display: none; font-size: 10px; font-weight: 800;
  letter-spacing: 2.5px; color: var(--ink-soft);
}
@media (min-width: 520px){
  .sbm-brand-bar .tag{ display: inline-flex; align-items: center; gap: 6px; }
  .sbm-brand-bar .tag .d{ width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
  .sbm-brand-bar .tag .d.t{ background: var(--teal); }
  .sbm-brand-bar .tag .d.c{ background: var(--coral); }
  .sbm-brand-bar .tag .d.g{ background: var(--gold); }
}

/* ============ Ambient deco — floaty dots + sparkles ============ */
/* High z-index keeps these above the white .container; pointer-events:
   none so they never block taps. */
.sbm-deco{ position: fixed; inset: 0; pointer-events: none; z-index: 100; overflow: hidden; }
.sbm-deco i{ position: absolute; border-radius: 50%; opacity: .55; }

/* Bigger corner + edge dots */
.sbm-deco .s1{  top: 4%;  left: 5%;  width: 18px; height: 18px; background: var(--gold-tint); }
.sbm-deco .s2{  top: 14%; right: 6%; width: 20px; height: 20px; background: var(--coral-tint); }
.sbm-deco .s3{  top: 44%; right: 4%; width: 14px; height: 14px; background: var(--teal-light); }
.sbm-deco .s4{  bottom: 14%; left: 4%; width: 18px; height: 18px; background: var(--gold-tint); }
.sbm-deco .s5{  bottom: 6%;  right: 6%; width: 16px; height: 16px; background: var(--mint-tint); }

/* Mid-page side dots */
.sbm-deco .s6{  top: 32%; left: 3%;  width: 13px; height: 13px; background: var(--coral-tint); }
.sbm-deco .s7{  top: 55%; left: 6%;  width: 15px; height: 15px; background: var(--mint-tint); }
.sbm-deco .s8{  top: 38%; right: 7%; width: 14px; height: 14px; background: var(--gold-tint); }
.sbm-deco .s9{  top: 72%; left: 4%;  width: 12px; height: 12px; background: var(--teal-light); }
.sbm-deco .s10{ top: 80%; right: 5%; width: 16px; height: 16px; background: var(--coral-tint); }
.sbm-deco .s11{ top: 25%; right: 8%; width: 11px; height: 11px; background: var(--mint-tint); }
.sbm-deco .s12{ top: 88%; left: 48%; width: 12px; height: 12px; background: var(--gold-tint); }

/* Foreground floaties layered on top of the container (lower opacity
   so they don't compete with the text underneath). */
.sbm-deco i.fg{ opacity: .42; }
.sbm-deco .s13{ top: 18%; left: 30%;  width: 12px; height: 12px; background: var(--coral-tint); }
.sbm-deco .s14{ top: 22%; right: 28%; width: 11px; height: 11px; background: var(--mint-tint); }
.sbm-deco .s15{ top: 38%; left: 25%;  width: 12px; height: 12px; background: var(--gold-tint); }
.sbm-deco .s16{ top: 62%; right: 22%; width: 13px; height: 13px; background: var(--coral-tint); }
.sbm-deco .s17{ top: 65%; left: 35%;  width: 11px; height: 11px; background: var(--teal-light); }
.sbm-deco .s18{ top: 78%; right: 30%; width: 12px; height: 12px; background: var(--mint-tint); }
.sbm-deco .s19{ top: 84%; left: 18%;  width: 13px; height: 13px; background: var(--gold-tint); }
.sbm-deco .s20{ top: 92%; right: 18%; width: 12px; height: 12px; background: var(--coral-tint); }
.sbm-deco .s21{ top: 95%; left: 50%;  width: 10px; height: 10px; background: var(--teal-light); }

/* Sparkle stars (bigger than the dots) */
.sbm-deco .spk{ position: absolute; opacity: .7; }
.sbm-deco .spk.a{ top: 28%; left: 3%;   width: 24px; color: var(--mint); }
.sbm-deco .spk.b{ top: 62%; right: 3%;  width: 22px; color: var(--coral); }
.sbm-deco .spk.c{ bottom: 8%; left: 46%; width: 18px; color: var(--gold); }
.sbm-deco .spk.d{ top: 46%; left: 2%;   width: 18px; color: var(--gold); }
.sbm-deco .spk.e{ top: 78%; right: 8%;  width: 16px; color: var(--mint); }
.sbm-deco .spk.f{ top: 18%; left: 48%;  width: 14px; color: var(--coral); }

/* Foreground sparkles over the container */
.sbm-deco svg.fg{ opacity: .5; }
.sbm-deco .spk.g{ top: 32%; left: 22%;  width: 14px; color: var(--gold); }
.sbm-deco .spk.h{ top: 42%; right: 30%; width: 13px; color: var(--mint); }
.sbm-deco .spk.i{ top: 72%; left: 42%;  width: 15px; color: var(--coral); }
.sbm-deco .spk.j{ top: 88%; right: 42%; width: 13px; color: var(--gold); }

/* ============ Footer wave + footer text ============
   Identical sizing/spacing to the home page's .foot block so every
   page in the suite has the same footer. */
.sbm-foot{
  /* z-index:0 + isolation:isolate creates a local stacking context so
     the wave's z-index:-1 stays inside .sbm-foot. Without this macOS
     desktop Safari renders the wave (and its white fill) behind the
     body bg layer, making the footer disappear. iPad Safari/Chrome
     happen to handle the unscoped z-index:-1 correctly, but desktop
     Safari does not. The wave still sits behind .container because
     they're separate elements (DOM siblings) and the wave's white fill
     only extends downward — not upward into .container's region. */
  position: relative;
  z-index: 0;
  isolation: isolate;
  margin: 28px 0 28px;    /* original top margin restored — reducing it
                             to 8px caused the wave's white fill to paint
                             into the .container's bottom on iPhone
                             because the wave is positioned at top:-80px
                             relative to .sbm-foot.top, and the visible
                             "tall blue gap" complaint from the original
                             brief was primarily caused by the white
                             fill failing to paint on iOS Safari, not
                             by this margin. The white now paints
                             correctly via the path-close-inside-viewBox
                             change + ::after extension below. */
  padding: 110px 0 36px;
  text-align: center;
  /* Span full body content width so the wave inside (positioned by
     half-translate against this element) is correctly anchored to
     the viewport's centre, not to a content-width-shrunk box. Without
     this, on iPad wide screens the footer's bounding box collapses
     to "Learn ▪ Rise ▪ Grow"-text-width and the wave gets visibly
     offset / clipped on the right edge. */
  width: 100%;
  /* flex:1 grows .sbm-foot to fill body's remaining vertical space
     when the page content is short. The white band rendered by
     .sbm-foot::after is anchored to .sbm-foot's bottom (bottom:0),
     so this growth lets the white reach the viewport bottom on a
     single-screen start screen instead of stopping just below the
     cheer text. On long pages (color worksheet picker) flex:1 has
     no extra space to grow into and .sbm-foot stays at its natural
     height, so no unwanted scrollable padding is added. */
  flex: 1 1 auto;
}
.sbm-foot .trio{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 17px; letter-spacing: .3px;
  color: var(--teal);
}
.sbm-foot .trio .d{ width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.sbm-foot .trio .d.m{ background: var(--mint); }
.sbm-foot .trio .d.g{ background: var(--gold); }
.sbm-foot .cheer{
  margin-top: 10px; font-size: 14px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: center; width: 100%;
}
.sbm-foot .cheer .hrt{ color: var(--coral); font-size: 16px; }
.sbm-foot-privacy{
  position: absolute;
  right: 14px; bottom: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px;
  color: var(--ink-soft);
  text-decoration: none;
  opacity: .6;
  z-index: 1;
}
.sbm-foot-privacy:hover{ opacity: 1; color: var(--teal-dark); }

/* Continuous wavy dotted line. The SVG covers just the wave area; its
   inner white-fill path closes inside the viewBox (y=100) so the fill
   is fully painted within the SVG's CSS box — no longer relying on
   overflow:visible spilling outside, which iOS Safari mobile doesn't
   honour. The white BELOW the SVG box is supplied by .sbm-foot::after. */
.sbm-foot-wave{
  position: absolute; top: 30px;
  height: 80px;
  left: 50%; width: 100vw; transform: translateX(-50%);
  pointer-events: none;
  display: block; z-index: -1;
}
/* Edge-to-edge white band that picks up where the wave SVG's box ends
   and continues down past the viewport. Without this the iPhone view
   would show cloud-blue immediately under the dotted wave because the
   wave's white-fill overflow no longer paints outside its CSS box.
   - top equals .sbm-foot-wave's top + height, so the SVG's curvy
     bottom edge butts up against this rectangular extension exactly.
   - height: 100vh ensures coverage on any reasonable viewport.
     On a short page this can extend body's scrollable area by a
     little; the trade-off for a guaranteed-visible footer. */
.sbm-foot::after{
  content: "";
  position: absolute;
  top: 110px;                  /* desktop: wave top 30 + height 80 */
  bottom: -28px;               /* paint through the existing bottom
                                  margin so no cloud-blue strip shows
                                  below the footer; does not affect
                                  layout height. */
  left: 50%; transform: translateX(-50%);
  width: 100vw;
  background: #FFFFFF;
  z-index: -2;                 /* below the wave (z-index:-1) */
  pointer-events: none;
}

@media (max-width: 520px){
  /* margin-top:60 (vs the desktop 28) gives ~32 px more cloud-blue
     between .container's bottom and the wave's tip on iPhone. With
     the wave at top:-80 and height:130, the wave's tip (viewBox y=30
     → CSS y=39 from SVG top) was landing at .container.bottom - 13 —
     fully hidden by .container's z-index:2 — so the visible wave
     started right at the card's bottom edge with no breathing room.
     Bumping the margin to 60 puts the tip at .container.bottom + 19
     instead, giving a clear gap. Desktop / iPad keep margin: 28.
     min-height:220 forces the footer to be at least as tall as a
     home-page card tile (118 px) plus its own padding, so the white
     footer band doesn't collapse to a thin strip on iPhone where
     content tends to push body > 100vh and flex:1 has no remaining
     space to grow into. On wider devices, cards/start-screens fit
     within 100vh so flex:1 already grows the footer tall — this rule
     only kicks in on phone where it's actually needed. */
  .sbm-foot{ margin-top: 60px; padding: 14px 0 18px; min-height: 220px; }
  .sbm-foot-wave{ top: -80px; height: 130px; }
  .sbm-foot::after{ top: 50px; } /* phone: wave top -80 + height 130 */
}


/* ============ Locale selector (privacy-safe start-screen variant) ============
   Name collection is disabled. Tools that still need a British/American
   English choice use SBM.injectPlayerPicker to render this single, disclosed
   locale setting in the old picker slot. */
.sbm-player-picker{
  display: flex; flex-direction: column; gap: 0;
  margin: 14px auto; max-width: 500px; width: 100%;
}
.sbm-player-picker .sbm-row{
  display: flex; gap: 8px; align-items: stretch;
}
.sbm-player-picker .sbm-row .sbm-field{ margin: 7px 0; }
.sbm-player-picker .sbm-field-player{ flex: 1 1 auto; min-width: 0; }
.sbm-player-picker .sbm-field-locale{
  flex: 0 0 auto;
  /* Slimmer field — just wide enough for the globe badge + label */
}
.sbm-player-picker .sbm-field-locale-only{
  width: min(100%, 320px);
  margin-left: auto;
  margin-right: auto;
}
.sbm-player-picker .sbm-field-locale select{
  padding-right: 30px;
  font-size: 15px;
}
.sbm-player-picker .sbm-field{
  position: relative; display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 18px;
  margin: 7px 0;
  padding: 7px 10px 7px 8px; text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.sbm-player-picker .sbm-field:focus-within{
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.sbm-player-picker .sbm-field .badge{
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sbm-player-picker .sbm-field .badge svg{ width: 22px; height: 22px; }
.sbm-player-picker .sbm-field select,
.sbm-player-picker .sbm-field input[type=text]{
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font: inherit; font-size: 17px; color: var(--ink);
  padding: 10px 6px; margin: 0;
  width: auto; max-width: none;
}
.sbm-player-picker .sbm-field select{
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236A7E8C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 36px;
}
.sbm-player-picker .sbm-field input[type=text]::placeholder{ color: #9CA7B0; }

/* ============ Start CTA button (unified across tools) ============
   All tools use the same shape, padding, font, and rounding so the
   "Start!" button looks identical regardless of which tool the kid
   is in. Per-tool theming comes purely through --accent / --accent-
   dark (background, box-shadow), so adding a new tool only needs an
   accent override. Disabled + hover behaviour is also unified. */
.cta-primary{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  font: inherit; font-weight: 800; font-size: 22px;
  background: var(--accent-dark); color: #fff;
  border: none; border-radius: 16px;
  padding: 16px 40px; min-width: 280px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(34, 57, 74, 0.18);
  transition: transform .15s, box-shadow .15s, background-color .15s;
  touch-action: manipulation;
}
.cta-primary:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(34, 57, 74, 0.22);
}
.cta-primary:disabled{
  background: #CBD5E0; color: #fff; cursor: not-allowed; box-shadow: none;
}
.cta-primary .play{ width: 26px; height: 26px; color: #fff; }
@media (max-width: 480px){
  .cta-primary{ min-width: 220px; }
}

/* ============ Base button (shared across all tools) ============
   Every tool's `<button class="btn">…</button>` inherits this footprint:
   font, padding, border-radius, hover lift, active press, disabled state.
   Variant background colours come from the shared .btn-primary and
   the colour-only variants below. Tools theme primary buttons by
   setting --accent-dark, not by redefining the button rule.

   To add a new tool: declare your accent triplet, add `<button class=
   "btn btn-primary">…</button>` in the markup, and you're done — no new
   button CSS needed. Override one rule (e.g. a custom .btn-primary
   background) only if your tool has a colour requirement these vars
   can't express. */
.btn{
  font-family: inherit;
  font-size: 1.05em;
  font-weight: 800;
  padding: 12px 22px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  margin: 6px;
  transition: transform .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,.18);
}
.btn:active:not(:disabled){ transform: translateY(0); }
.btn:disabled{
  background: #CBD5E0; color: #fff;
  cursor: not-allowed; box-shadow: none; transform: none;
}
/* Bigger version of any .btn — apply with class="btn btn-large".
   Keeps the same shape rules; just bumps font + padding + radius so a
   "Start a new round" or "Practice again" CTA can dominate the row. */
.btn-large{ font-size: 1.35em; padding: 16px 32px; border-radius: 16px; }

/* ============ Shared button variants ============ */
.btn-primary  { background: var(--accent-dark); color: #fff; }
.btn-secondary { background: #a0aec0; color: #fff; }
.btn-warning   { background: var(--coral); color: #fff; }
.btn-success   { background: var(--mint-dark); color: #fff; }
.btn-help      { background: var(--gold-tint); color: var(--gold-dark); }
.btn-help:hover{ background: #FBDF8C; }
/* Audio replay / "Hear it again" / "Play the notes" pill button.
   Same gold colourway as .btn-help (visually says "tap me for audio")
   so any tool can drop in <button class="btn btn-replay">🔊 Hear again
   </button> and get a consistent affordance. Pair with .btn-large for
   bigger CTAs. */
.btn-replay   { background: var(--gold-tint); color: var(--gold-dark); }
.btn-replay:hover:not(:disabled){ background: #FBDF8C; }

/* ============ Tab / chip selector pill ============
   For a row of "switch which thing is selected" pills — sticker
   categories, word-bank tabs, BPM chips, print mode toggle, etc.
   Default: white pill, transparent border. Add .is-active to mark
   the currently-selected one (fills with --accent + dark border).

   <button class="btn-pill">All</button>
   <button class="btn-pill is-active">Animals</button>

   Note: this is NOT a .btn (different padding/font, doesn't take
   the .btn base rules). Use it standalone. */
.btn-pill{
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 800; font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, background-color .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn-pill:hover:not(.is-active):not(:disabled){
  border-color: var(--accent-tint);
  color: var(--accent-dark);
}
.btn-pill.is-active{
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-dark);
}

/* iPad/iPhone Safari can keep :hover alive after the first tap. Keep
   touch devices on the base visual state so a tap activates controls
   immediately instead of first entering a hover-only state. */
@media (hover: none){
  .btn:hover:not(:disabled),
  .cta-primary:hover:not(:disabled),
  .btn-pill:hover:not(.is-active):not(:disabled){
    transform: none !important;
  }
  .btn:hover:not(:disabled){
    box-shadow: none !important;
  }
}

/* ============ Manage Players trigger + modal ============ */
.sbm-manage-trigger{
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px auto 14px;
  padding: 8px 14px;
  background: transparent;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  color: var(--accent-dark);
  font: inherit; font-weight: 700; font-size: 13.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sbm-manage-slot{ text-align: center; }
.sbm-manage-trigger:hover{
  background: var(--accent-tint);
  border-color: var(--accent-dark);
}

.sbm-manage-overlay{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(34, 57, 74, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sbm-manage-card{
  background: #fff; border-radius: 18px;
  max-width: 480px; width: 100%;
  padding: 24px 24px 20px;
  border-top: 6px solid var(--accent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  text-align: center;
}
.sbm-manage-card h2{
  font-size: 22px; margin: 0 0 6px; color: var(--ink);
}
.sbm-manage-hint{
  font-size: 14px; color: var(--ink-soft);
  margin: 0 0 18px;
}
.sbm-manage-list{
  text-align: left;
  margin: 0 0 16px;
  max-height: 50vh; overflow-y: auto;
}
.sbm-manage-empty{
  text-align: center; color: var(--ink-soft);
  padding: 24px 8px;
  font-size: 14px;
}
.sbm-manage-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #F7FAFC;
}
.sbm-manage-name{
  font-weight: 800; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0;
}
.sbm-manage-delete{
  appearance: none;
  background: var(--coral); color: #fff;
  border: none; border-radius: 10px;
  padding: 8px 12px;
  font: inherit; font-weight: 800; font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.sbm-manage-delete:hover{ background: var(--coral-dark); }
.sbm-manage-close{
  appearance: none;
  background: transparent;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 22px;
  font: inherit; font-weight: 800; font-size: 14px;
  color: var(--ink); cursor: pointer;
}
.sbm-manage-close:hover{
  background: var(--cloud);
  border-color: var(--ink-soft);
}
