/* Lilypad Live · lilypad-skin.css (loads after live.css on the phone, the presenter and the big screen)
   Brings the game in line with lilypadlearning.ca (new-site/assets/css/styles.css) without editing live.css:
   the site's tokens and shadows, sentences in Nunito Sans, green eyebrows, pill buttons, flat accent bars,
   navy step numbers, navy numbers on light surfaces, gold as a fill (not a text colour), icon tiles,
   the brand stripe, and the navy hero look for the recap card. The kid's phone keeps its chunky game look
   (hard drop shadows under buttons and chips, bold numbers). Reasons and screenshots: live-server/STYLE-AUDIT.md.
   To fold it into live.css later, paste each block over the rule it names. */

/* ---------- 1. Tokens: the website's names and values ---------- */
:root {
  --green-soft: #E6F6EC; --navy-soft: #E6E9F5; --gold-soft: #FFF4DE; --green-dark: #0B2B1C;
  --mint-on-navy: #7FE0A1;                         /* the site's green on navy: hero highlight, stats, eyebrows */
  --ink-2: #344054; --muted: #667085;
  --radius: 16px; --radius-sm: 10px; --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --shadow-lg: 0 20px 48px rgba(16, 24, 40, .14);
  --focus-ring: 0 0 0 4px rgba(42, 112, 222, .15);
  /* the stripe under the site's heroes (from the roll-up banner) */
  --stripe: linear-gradient(90deg, #30AE58 0 40%, #0B2B1C 40% 55%, #2A70DE 55%);
  /* the Lilypad lotus (the website's logo, img/logo.png), for the tip bubbles */
  --lotus: url("../img/logo.png");
  /* the site's check-list tick */
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  /* lily pads floating in perspective (like the ripples around them), with a narrow notch and veins, so they read as pads, not pie charts */
  --pads-low: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 240'%3E%3Cellipse cx='80' cy='196' rx='150' ry='46' fill='none' stroke='%23213E8C' stroke-opacity='0.05' stroke-width='1.5'/%3E%3Cellipse cx='80' cy='196' rx='112' ry='34' fill='none' stroke='%23213E8C' stroke-opacity='0.06' stroke-width='1.5'/%3E%3Cellipse cx='250' cy='112' rx='60' ry='18' fill='none' stroke='%23213E8C' stroke-opacity='0.05' stroke-width='1.5'/%3E%3Cg fill='%2330AE58' fill-opacity='.11' stroke='%2330AE58' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round'%3E%3Cg transform='translate(80 196) scale(1 .42) rotate(200)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 0L73.1 11.6A74 74 0 1 1 73.1 -11.6Z'/%3E%3Cpath vector-effect='non-scaling-stroke' fill='none' d='M0 0L31.5 54.5M0 0L-31.5 54.5M0 0L-62.9 0M0 0L-31.5 -54.5M0 0L31.5 -54.5'/%3E%3C/g%3E%3Cg transform='translate(196 216) scale(1 .42) rotate(120)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 0L39.5 6.3A40 40 0 1 1 39.5 -6.3Z'/%3E%3Cpath vector-effect='non-scaling-stroke' fill='none' d='M0 0L17 29.4M0 0L-17 29.4M0 0L-34 0M0 0L-17 -29.4M0 0L17 -29.4'/%3E%3C/g%3E%3Cg transform='translate(254 180) scale(1 .42) rotate(300)'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 0L21.7 3.4A22 22 0 1 1 21.7 -3.4Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --pads-high: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Cellipse cx='104' cy='52' rx='70' ry='22' fill='none' stroke='%23213E8C' stroke-opacity='0.05' stroke-width='1.5'/%3E%3Cellipse cx='104' cy='52' rx='44' ry='14' fill='none' stroke='%23213E8C' stroke-opacity='0.06' stroke-width='1.5'/%3E%3Cg transform='translate(104 52) scale(1 .42) rotate(40)' fill='%2330AE58' fill-opacity='.11' stroke='%2330AE58' stroke-opacity='.16' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 0L29.6 4.7A30 30 0 1 1 29.6 -4.7Z'/%3E%3Cpath vector-effect='non-scaling-stroke' fill='none' d='M0 0L12.8 22.1M0 0L-12.8 22.1M0 0L-25.5 0M0 0L-12.8 -22.1M0 0L12.8 -22.1'/%3E%3C/g%3E%3C/svg%3E");
}
:focus-visible { outline-offset: 3px; }
h1, h2, h3 { letter-spacing: -.01em; }

/* ---------- 2. Eyebrows: the site's (Poppins 600, uppercase, .12em, green-deep) ---------- */
.cr-head small, .sv-head small, .hm header small, .lb small, .rp-top small, .rp-sec small, .t-chapter small, .cs-ch, .chapter, .pr-day, .sx-card-top small {
  font: 600 var(--t-xs)/1.3 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--green-d);
}
.hcol h3, .hp-top small { font: 600 var(--t-sm)/1.3 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--green-d); }
.sc-chapter, .sc-eyebrow, .sc-card-intro > small, .sp-in small, .mvp small { font-family: var(--f-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--green-d); }
.sc-card-intro > small { display: block; font-size: var(--s-sm); }
.sp-in.pay small { color: var(--green-d); }
.sc-res-label { letter-spacing: .12em; }
.sc-sx .sc-res-label { color: var(--green-d); }                         /* THE MARKET is not a debt: no coral */
/* labels that are not eyebrows use the site's muted small caps (like "Proud to have worked with") */
.cr-row small { font: 600 var(--t-xs)/1.3 var(--f-head); letter-spacing: .12em; color: var(--muted); }

/* ---------- 3. Sentences in Nunito Sans (the site keeps Poppins for headings, labels, numbers and buttons) ---------- */
.sub { font: 600 var(--t-body)/1.45 var(--f-body); }
.cs-how span { font: 600 var(--t-md)/1.4 var(--f-body); color: var(--dim); }
.cf-coach p { font: 600 var(--t-md)/1.35 var(--f-body); }
.bd .bd-coach p { font: 600 var(--t-md)/1.35 var(--f-body); }
.cf-toast { font: 600 var(--t-md)/1.4 var(--f-body); }
.bd .cf-toast { font: 600 var(--t-md)/1.3 var(--f-body); }
.sv-b.wide { font: 600 var(--t-body)/1.3 var(--f-body); }
.sv-list.two .sv-b.wide { font-size: var(--t-md); }
.sv-b small { font: 600 var(--t-xs)/1.2 var(--f-body); }
.hm-card small { font: 600 var(--t-cap)/1.35 var(--f-body); letter-spacing: 0; }
.rp-next li { font: 600 var(--t-md)/1.4 var(--f-body); }
.rp-note { font: 600 var(--t-md)/1.4 var(--f-body); }
.rc-mine { font: 600 var(--t-body)/1.45 var(--f-body); }
.rc-class { font: 600 var(--t-md)/1.4 var(--f-body); }
.bd .bd-year span { font: 600 var(--t-cap)/1.3 var(--f-body); }
.bd-offer span { font: 600 var(--t-cap)/1.3 var(--f-body); }
.bd-rp-tip { font: 600 var(--t-body)/1.4 var(--f-body); }
.bd-rp-min { font: 600 var(--t-md)/1.35 var(--f-body); }
.sx-card-in p { font: 600 var(--t-md)/1.45 var(--f-body); }
.sx-era { font: 600 var(--t-cap)/1.4 var(--f-body); }
.sx-name small { font: 600 var(--t-xs)/1.2 var(--f-body); }
.sc-next { font: 600 var(--s-md)/1.4 var(--f-body); }
.lb-tip { font: 600 var(--t-body)/1.4 var(--f-body); color: var(--navy) !important; }

/* ---------- 4. Buttons: the site's pills ---------- */
/* phones keep the hard edge under a button (it helps kids see what to press) but lose the green glow */
.btn { box-shadow: 0 3px 0 var(--green-d); }
.btn:not(.ghost):hover { background-color: var(--green); }             /* live.css's hover sticks after a tap on phones */
@media (hover: hover) { .btn:not(.ghost):not(:disabled):hover { background-color: var(--green-d); } }
.btn.sm { box-shadow: 0 2px 0 var(--green-d); }
.btn.ghost { box-shadow: inset 0 0 0 2px var(--navy); }
/* the start buttons: a ripple from the pond instead of a light sweep */
.btn.shine { overflow: visible; }
.btn.shine::after { left: 0; right: 0; width: auto; transform: none; background: none; border-radius: inherit; animation: lp-ripple 2.8s 1.2s ease-out infinite; }
@keyframes lp-ripple { 0% { box-shadow: 0 0 0 0 rgba(48, 174, 88, .42); } 70%, 100% { box-shadow: 0 0 0 14px rgba(48, 174, 88, 0); } }
.pill-btn { background: #fff; border: 1.5px solid var(--line2); color: var(--navy); }
.pill-btn.on { color: var(--green-d); border-color: var(--green); background: var(--green-soft); }
/* the presenter is a desktop tool, like the site: flat pills that lift on hover, outline buttons with a 2px navy border */
body.hostpage .btn { border: 2px solid transparent; box-shadow: none; min-height: 48px; padding: 12px 22px; font: 600 var(--t-body)/1.2 var(--f-head); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
body.hostpage .btn.big { padding: 13px 26px; font-size: var(--t-body); }
body.hostpage .btn.sm { min-height: 40px; padding: 8px 16px; font-size: var(--t-md); box-shadow: none; }
body.hostpage .btn:active { transform: none; box-shadow: none; }
body.hostpage .btn.ghost { background: transparent; color: var(--navy); border-color: var(--navy); box-shadow: none; }
@media (hover: hover) {
  body.hostpage .btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow); }
  body.hostpage .btn.ghost:not(:disabled):hover { background: var(--navy); color: #fff; }
}

/* ---------- 5. Cards: flat accent bars, soft ink shadows ---------- */
/* A thick border on one side of a rounded card curls round its corners (a common generated-UI look).
   The site draws its accent bars flat inside the card (.big-stat, .timeline), which an inset shadow does here. */
.sv-card { border-top: 1px solid var(--line); box-shadow: inset 0 5px 0 var(--green), var(--shadow); }
.cf-coach { border-left: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--green), var(--shadow-lg); }
.sc-prologue { border-left: 1px solid var(--line); box-shadow: inset .35vw 0 0 var(--green), var(--shadow-lg); }
.mvp { border-left: 1px solid var(--line); box-shadow: inset .3vw 0 0 var(--gold), var(--shadow); }
.sx-tile { border-top: 2px solid var(--line); box-shadow: inset 0 5px 0 var(--c), var(--hard) var(--line); }
.sx-tile.has { border-top-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
/* numbered steps look like the site's "How a session works": plain white cards, navy number circles */
.cs-how li, .cs-how li.red { border-left: 1px solid var(--line); border-radius: var(--radius); }
.cs-how li::before { background: var(--navy); color: #fff; font: 700 var(--t-md) var(--f-head); }
.cs-how li.red::before { background: var(--coral); }
.sc-steps li, .sc-steps li.red { background: #fff; border-left: 1px solid var(--line); }
.sc-step-n { background: var(--navy); }
.sc-steps li.red .sc-step-n { background: var(--coral); }
/* shadows tinted with the ink colour, never pure black */
.cf-card.ghost { box-shadow: 0 20px 40px rgba(16, 24, 40, .3); }
.cf-paused > div { box-shadow: var(--shadow-lg); }
.sc-lobby { box-shadow: 0 1.6vw 4vw rgba(16, 24, 40, .2); }
.sc-tags .tag { box-shadow: 0 .4vw 1vw rgba(16, 24, 40, .22); }
.sc-tags .bub { box-shadow: 0 .4vw 1vw rgba(16, 24, 40, .25); }
.sp-in { box-shadow: 0 1.2vw 3vw rgba(16, 24, 40, .26); }
.chip { border-radius: 999px; padding: 2px 7px; }                        /* the site's chips are pills */

/* ---------- 6. Numbers are navy on light surfaces (the site's stats); gold is a fill ---------- */
.stat b, .sc-day b, .sc-stats b:where(:not(.sc-credit)), .rp-stats b, .bd-rp-stats b, .bd-gauge b, .hp-month .day b, .cf-day b,
.sx-amt, .sx-chip b, .bd-coins b, .hm-card .rent, .cf-banner b, .cf-more, .pd span, .sc-join .code, .rp-look, .hp-top5 li span:last-child { color: var(--navy); }
.cf-card-row .cost { color: var(--navy); }
.k-emergency .cf-card-row .cost { color: var(--coral); }
.k-income .cf-card-row .cost { color: var(--green-d); }
.stat small, .sc-stats small, .rp-stats small { color: var(--muted); }
.sc-code span, .pd i { color: var(--navy); }
/* gold text only sits on the gold tint, like the site's gold pill */
.note { background: var(--gold-soft); color: var(--gold-ink); border-radius: 12px; padding: 8px 12px; }
.net.offline, .net.waiting { background: var(--gold-soft); }
.cm.pay { background: var(--gold-soft); }
.hc-net:not(:empty) { background: var(--gold-soft); border-radius: 999px; padding: 4px 10px; }
.cf-banner { border-color: var(--gold); }
.hm-card:active { border-color: var(--green); }
.ev:hover:not(:disabled) { border-color: var(--green); }
.switch input { accent-color: var(--green); }
/* the countdown: navy numbers in the gold ring, a clean Go! */
.cf-count span { color: var(--navy); text-shadow: none; }
.cf-count span.go { color: #fff; }
.toast-global { background: var(--navy); color: #fff; border-radius: 999px; padding: 12px 20px; font: 600 var(--t-body) var(--f-body); box-shadow: var(--shadow-lg); }

/* ---------- 7. Icons sit in the site's tinted icon tiles, not loose on the card ---------- */
.hm-card .ic { width: 56px; height: 56px; padding: 9px; border-radius: 14px; background: var(--green-soft); }
.ev img { width: 44px; height: 44px; padding: 7px; border-radius: 12px; background: var(--gold-soft); flex: none; }
.sp-in img { border-radius: 1.4vw; background: var(--gold-soft); box-shadow: none; }
.sp-in.pay img { background: var(--green-soft); box-shadow: none; }

/* ---------- 8. Kid's phone ---------- */
.logo, .sc-logo { filter: none; }                                          /* the site's logo has no glow */
.wordmark { color: var(--navy); }                                          /* FIRST PLACE in the brand's navy and green, as on the big screen */
.t-pad { filter: drop-shadow(0 10px 14px rgba(16, 24, 40, .16)); }
.t-rip { border-color: rgba(42, 112, 222, .22); }
.t-level { background: var(--green-soft); border-color: transparent; color: var(--green-d); font: 600 var(--t-cap) var(--f-head); padding: 6px 12px 6px 8px; }
/* the pie-slice pads read as Pac-Man: a lily pad has a narrow notch, and tips come from the Lilypad lotus */
.t-level i { background: conic-gradient(from 212deg, transparent 0 16deg, var(--green) 0); }
.bd .bd-coach::before, .bd-rp-tip::before { background: #fff var(--lotus) center 58% / 80% auto no-repeat; box-shadow: 0 0 0 1.5px var(--green-soft); }
.bd .bd-coach::before { width: 28px; height: 28px; margin-top: -14px; left: 8px; }
.bd-rp-tip::before { width: 26px; height: 26px; margin-top: -13px; }
/* the title's coins: flat, like the rest of the brand, and behind the words */
.coins { z-index: -1; }
.coins i { background: var(--gold); box-shadow: inset 0 0 0 2.5px #E3A12B, inset 0 -3px 0 rgba(154, 100, 0, .22); opacity: .5; }
.code-in { background: #fff; border: 2px solid var(--line2); border-radius: var(--radius); color: var(--navy); }
.code-in:focus { border-color: var(--blue); box-shadow: var(--focus-ring); }
.code-in::placeholder { color: #98A2B3; }
.cr-opt { border-radius: 999px; padding: 8px 16px; }
.cr-dice { background: #fff; box-shadow: var(--shadow-sm); border-color: var(--line); }
.lb-card { background: rgba(255, 255, 255, .92); }
.lb-av { background: var(--navy); }
.rp-stats div { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
/* Chapter 2 and 3 report heads: the site's navy hero with its stripe underneath */
.bd-rp-top { background: var(--stripe) left bottom / 100% 6px no-repeat, var(--navy); padding-bottom: 20px; }
.bd-rp-top.free { background: var(--stripe) left bottom / 100% 6px no-repeat, var(--green-d); }
.bd-rp-top small { color: var(--mint-on-navy); opacity: 1; letter-spacing: .12em; }
.bd-rp-top.free small { color: rgba(255, 255, 255, .88); }

/* recap card: the site's navy page hero (flat navy, a green and a blue circle) with the stripe at the bottom */
.rc-card {
  --dim: rgba(255, 255, 255, .8); --dim2: rgba(255, 255, 255, .62); --line: rgba(255, 255, 255, .16); --line2: rgba(255, 255, 255, .24);
  background: var(--stripe) left bottom / 100% 8px no-repeat,
    radial-gradient(circle at calc(100% + 26px) -34px, rgba(48, 174, 88, .38) 0 120px, transparent 121px),
    radial-gradient(circle at 12% calc(100% + 124px), rgba(42, 112, 222, .5) 0 170px, transparent 171px),
    var(--navy);
  border: 0; padding-bottom: 26px; box-shadow: 0 24px 56px rgba(16, 24, 40, .28);
}
.rc-av { background: var(--navy-d); }
.rc-top small, .rc-next small, .rc-pledge small, .rc-lesson small, .rc-bd > small { color: var(--mint-on-navy); letter-spacing: .12em; }
.rc-stats > div { background: rgba(255, 255, 255, .08); border-radius: var(--radius); padding: 10px 4px 8px; }
.rc-stats b { color: var(--mint-on-navy); }
.rc-stats .bad b { color: #FFB3AB; }
.rc-stats small { color: rgba(255, 255, 255, .85); }
.rc-lesson { font: 500 var(--t-body)/1.45 var(--f-head); }                       /* like the site's quote block */
.rc-pledge { background: rgba(255, 255, 255, .08); }
.rc-mine { background: rgba(255, 255, 255, .08); border-color: rgba(242, 179, 61, .55); }   /* a gold tint turns muddy on navy */
.rc-next b { color: var(--mint-on-navy); }                               /* good news is green, not coral */
.rc-badges span { background: rgba(127, 224, 161, .16); color: var(--mint-on-navy); }

/* ---------- 9. Presenter: the site's forms, choice cards and nav ---------- */
.hh { border-bottom: 0; background: var(--stripe) left bottom / 100% 4px no-repeat, rgba(255, 255, 255, .94); padding-bottom: 14px; }
.setup-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 32px; }
.fl > span { font: 600 var(--t-md) var(--f-head); letter-spacing: 0; text-transform: none; color: var(--ink); }
input.in { background: #fff; border: 1.5px solid var(--line2); border-radius: var(--radius-sm); min-height: 48px; font: 400 var(--t-body) var(--f-body); }
input.in:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
input.in.code { font: 600 var(--t-body) var(--f-head); }
.lv { background: #fff; border: 1.5px solid var(--line2); border-radius: 12px; transition: border-color .15s, background-color .15s; }
.lv.on { border-color: var(--green); background: var(--green-soft); }
@media (hover: hover) { .lv:not(.on):hover { background: var(--bg); } }
.lv span, .lv small { color: var(--muted); }
/* the month speed switch looks like the site's nav: pills, the current one navy on blue-soft */
.seg { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.seg button { border-radius: 999px; }
.seg button.on { background: var(--blue-soft); color: var(--navy); }
body.hostpage .tag { padding: 6px 12px; font: 600 var(--t-cap) var(--f-head); background: var(--green-soft); color: var(--green-d); }
body.hostpage .tag.warn { background: var(--gold-soft); color: var(--gold-ink); }
/* run of show: done steps get the site's green tick, the current one is the site's featured card */
.hs button { background: #fff; border-color: var(--line); }
.hs .done button { opacity: 1; background: transparent; border-color: transparent; }
.hs .done b { color: var(--muted); font-weight: 600; }
.hs .done b::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border-radius: 50%; background: var(--green) var(--tick) center / 10px no-repeat; }
.hs .now button { background: #fff; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.stat, .hp-month, .ev { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ev { background: #fff; }
.ev.fired { box-shadow: none; }
/* live feed: calm white rows, a coloured dot says what kind of line it is */
.hf li { display: block; cursor: default; box-shadow: none; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line); color: var(--ink-2); }   /* li.ev also matched the event buttons' .ev */
.hf li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--green); }
.hf li.ev, .hf li.ev:hover { color: var(--navy); border-color: var(--line); }
.hf li.ev::before { background: var(--gold); }
.hf li.red::before { background: var(--coral); }

/* ---------- 10. Big screen: the brand stripe under the top bar, opaque panels for projectors ---------- */
.sc-top { border-bottom: 0; background: var(--stripe) left bottom / 100% .32vw no-repeat, #fff; }
.sc-lobby, .sc-day, .sc-stats div, .pd, .sc-next, .tk { background-color: rgba(255, 255, 255, .95); }
.sc-res-wrap { background: rgba(255, 255, 255, .95); }
.sc-lobby { border-color: var(--line); }
.sc-tags .tag { color: var(--navy); }
.sp-in { background-color: rgba(255, 255, 255, .97); }

/* ---------- 11. Small phones (checked at 320, 390 and 430 wide with tools/qa.mjs sweep) ---------- */
/* card names wrap to two lines instead of "Friend's birth..." */
.cf-card-tx b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.15; }
@media (max-width: 360px), (max-height: 640px) {
  .cf-coach p { font-size: var(--t-cap); line-height: 1.25; }       /* a tip fits the short room strip */
  .cf-card-tx b { font-size: var(--t-cap); -webkit-line-clamp: 1; line-clamp: 1; }
  .cf-stage:has(.cf-coach.on) .cf-mood { opacity: 0; }           /* the tip needs the whole room strip */
  .cf-next { padding: 4px 8px; font-size: var(--t-sm); }
}


/* ---------- 12. Big screen labels at the type scale minimum (1vw) ---------- */
.sc-paper .mast { letter-spacing: .06em; white-space: nowrap; gap: 1vw; }
.mvp small { letter-spacing: .06em; }