/* glass_v1.1 (Rowan 11:22 'a bit stronger': blur 14->18 / saturate 1.5->1.7, phones 10->12 / 1.4->1.55, edge .55->.72, rim + sheen + shadow a touch stronger; same properties only) · glass_v1 · frosted glass (毛玻璃) sitewide layer · Built 2026-11-03 (Rowan 09:33 via Relay); v1.1 published with Rowan's OK 11:22 via Relay.
   Recipe = All programs format boxes v3 (assets/v223/allprograms.css, Rowan 23:14): blur(14px) saturate(1.5) desktop,
   blur(10px) saturate(1.4) phones, border rgba(214,220,232,.55), inset rim + soft top sheen, shadow 0 10px 26px rgba(20,32,74,.12).
   ADDITIVE ONLY. Layout-neutral properties only: background-color/-image, border-COLOR (never width), box-shadow, backdrop-filter.
   No ::before/::after, no position/size/margin/padding/transform/transition/animation changes (homepage positioning lock).
   Rollback = delete the <link ... glass_v1.css> line (and glass_v1.js script line) from each page. */
:root{
  --gl-blur:blur(18px) saturate(1.7);
  --gl-blur-m:blur(12px) saturate(1.55);
  --gl-line:rgba(200,208,226,.72);
  --gl-sheen:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 62%);
  --gl-rim:inset 1px 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -2px 0 rgba(186,195,214,.6);
  --gl-drop:0 1px 2px rgba(20,32,74,.07),0 12px 30px rgba(20,32,74,.15);
  --gl-drop-h:0 1px 2px rgba(20,32,74,.07),0 16px 36px rgba(20,32,74,.19),0 0 0 4px rgba(255,255,255,.6);
}

/* ---------- 1. glass surfaces: cards, panels, tiles (white glass) ---------- */
.card:not(.pw-card),.nc-contact,.ig-card,.linklist.ll-v221 > li > a,details.qa,.fmt-card,.hero-notes .note,.act,
.ap-ex.ap-glass,.ap-bundle.ap-glass,.ap-mc.ap-glass{
  background-color:rgba(255,255,255,.66);background-image:var(--gl-sheen);
  border-color:var(--gl-line);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-rim),var(--gl-drop)}
/* pathway cards: coloured 5px top border is the course accent, keep it; glass the body only */
.card.pw-card{background-color:rgba(255,255,255,.66);background-image:var(--gl-sheen);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);box-shadow:var(--gl-rim),var(--gl-drop)}
/* "What your child will do" tiles: their own tint mixed into the glass (format-box style) */
.hl-list > li{background-image:var(--gl-sheen);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-rim),0 1px 1px rgba(20,32,74,.05),0 8px 20px rgba(20,32,74,.08)}
.hl-list > li.hl-a{background-color:rgba(255,241,226,.78)}
.hl-list > li.hl-b{background-color:rgba(232,244,255,.78)}
.hl-list > li.hl-c{background-color:rgba(241,236,255,.78)}
.hl-list > li.hl-d{background-color:rgba(231,248,238,.78)}
/* partner tiles sit in a moving marquee: sheen + rim only, no blur (no repaint cost) */
.pt-tile{background-image:var(--gl-sheen);border-color:var(--gl-line);box-shadow:var(--gl-rim),0 6px 16px rgba(20,32,74,.07)}
/* small pills / chips / course icons row (already glass in v219: add rim + sheen) */
.gicons a,.mt-chips > li,.ig-chip > span,.ap-tags > li,.hb-pill{background-image:var(--gl-sheen);box-shadow:var(--gl-rim),0 4px 12px rgba(20,32,74,.08)}
.mt-chips > li,.ig-chip > span,.ap-tags > li{border-color:var(--gl-line)}
/* existing All programs glass: same rim so both pages match. (.ap-acts-u pills left exactly as live: their text runs into the
   rounded ends, where the rim would sit behind glyphs; 11:00 contrast fix) */
.ap-glass,.nr-rack .listing{background-image:var(--gl-sheen);box-shadow:var(--gl-rim),var(--gl-drop)}

/* hover glow (static, no new motion) on interactive glass cards */
@media (hover:hover){
  .card:not(.pw-card):hover,.card.pw-card:hover,.linklist.ll-v221 > li > a:hover,.gicons a:hover,details.qa:hover{box-shadow:var(--gl-rim),var(--gl-drop-h)}
}

/* ---------- 2. buttons ---------- */
/* orange: base colour untouched (#BF5508, hover #A64508), white text. Sheen limited to the top 22% (above the text line)
   + a 1px inner highlight; bottom 40% is slightly DARKER, so text contrast only goes up. */
.btn-primary,.ap-btn:not(.ap-grey):not(.ap-ghost):not(.ap-off),.ig-btn.ig-primary,.ap-enroll,.hi-btn{
  background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 22%,rgba(0,0,0,0) 60%,rgba(0,0,0,.08) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12),0 6px 16px rgba(191,85,8,.22)}
.btn-primary:hover,.btn-primary:focus-visible,.ap-btn:not(.ap-grey):not(.ap-ghost):not(.ap-off):hover,.ig-btn.ig-primary:hover,.ap-enroll:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.12),0 8px 22px rgba(191,85,8,.32),0 0 0 4px rgba(191,85,8,.14)}
/* booked / disabled grey buttons keep their own look (no orange glow) */
.btn-primary.av-booked{background-image:var(--gl-sheen);box-shadow:var(--gl-rim)}
/* light buttons: near-solid white glass (keeps orange/navy text >= 4.5:1 over cream) */
.btn-outline-o,.btn-secondary,.ap-ghost,.ap-arr,.toy-try,.toy-3d,.cs-motion,.drum-loop,.drum-mute,.loop-toggle{
  background-color:rgba(255,255,255,.9);background-image:var(--gl-sheen);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--gl-rim),0 4px 12px rgba(20,32,74,.08)}
@media (hover:hover){.btn-outline-o:hover,.btn-secondary:hover,.ap-ghost:hover{box-shadow:var(--gl-rim),0 6px 16px rgba(20,32,74,.12),0 0 0 4px rgba(191,85,8,.10)}}

/* ---------- 3. phones / tablets: lighter blur, fewer blurred layers ---------- */
@media (max-width:1020px){
  /* big cards: no backdrop blur on phones (smooth scrolling); denser tint + sheen + rim keep the glass look */
  .card:not(.pw-card),.card.pw-card,.nc-contact,.ig-card,.linklist.ll-v221 > li > a,details.qa,.fmt-card,.hero-notes .note,.act,
  .btn-outline-o,.btn-secondary,.ap-ghost,.ap-arr,.toy-try,.toy-3d,.cs-motion,.drum-loop,.drum-mute,.loop-toggle{
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .card:not(.pw-card),.card.pw-card,.nc-contact,.ig-card,.linklist.ll-v221 > li > a,details.qa,.fmt-card,.hero-notes .note,.act{background-color:rgba(255,255,255,.9)}
  .btn-outline-o,.btn-secondary,.ap-ghost,.ap-arr,.toy-try,.toy-3d,.cs-motion,.drum-loop,.drum-mute,.loop-toggle{background-color:#fff}
  /* the 4 small tiles keep a light blur (recipe phone value) */
  .hl-list > li{-webkit-backdrop-filter:var(--gl-blur-m);backdrop-filter:var(--gl-blur-m)}
  .ap-ex.ap-glass,.ap-bundle.ap-glass,.ap-mc.ap-glass{background-color:#fff}
}
/* no backdrop-filter support: solid fallback */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.nc-contact,.ig-card,.linklist.ll-v221 > li > a,details.qa,.fmt-card,.hero-notes .note,.act{background-color:#fff}
  .hl-list > li.hl-a{background-color:#FFF1E2}.hl-list > li.hl-b{background-color:#E8F4FF}.hl-list > li.hl-c{background-color:#F1ECFF}.hl-list > li.hl-d{background-color:#E7F8EE}
  .btn-outline-o,.btn-secondary,.ap-ghost{background-color:#fff}
}
/* All programs book-flight overlay already drops blur while flying; follow it */
html.ap-flying .card,html.ap-flying .hl-list > li,html.ap-flying details.qa{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ---------- 4. gentle entrance motion: NON-HOME pages only (class added by glass_v1.js, never on index) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.gl-motion .gl-rise{opacity:0;translate:0 10px;transition:opacity .55s ease,translate .55s cubic-bezier(.2,.7,.2,1)}
  html.gl-motion .gl-rise.gl-in{opacity:1;translate:0 0}
}

/* ---------- 5. Rowan 09:57: rating bars -> 5 dots (homepage program cards; the only place these bars exist) ----------
   Markup: <span class="cm ... cm-dots" data-dots="N" role="img" aria-label="Fun N out of 5"><i aria-hidden="true"></i></span>.
   The span keeps its exact layout box (block, full cell width, 10px tall); the <i> fill keeps its box but is painted transparent;
   dots are background layers on the span (10px dots, 17px pitch, left-aligned). Filled = the card's current bar colour,
   empty = light tint of it + thin ring. Mapping: full 100% = 5, half 50% = 3 (Rowan), 75% = 4, 70% = 4 (round(fill x 5), .5 up). */
.pc-cmp .cm.cm-dots{--dot:var(--c,#1E9ED0);--dot-t:color-mix(in srgb,var(--dot) 16%,#fff);--dot-r:color-mix(in srgb,var(--dot) 55%,#fff);
  --dF:radial-gradient(circle closest-side,var(--dot) 88%,transparent 100%);
  --dE:radial-gradient(circle closest-side,var(--dot-t) 60%,var(--dot-r) 68%,var(--dot-r) 86%,transparent 100%);
  background-color:transparent;background-repeat:no-repeat;background-size:10px 10px;
  background-position:0 0,17px 0,34px 0,51px 0,68px 0;border-radius:0}
.pc-cmp .cm.cm-dots i{background:transparent!important}
body[data-page="index"] .c-code .pc-cmp .cm.cm-dots{--dot:#1E9ED0}
body[data-page="index"] .c-design .pc-cmp .cm.cm-dots{--dot:#BF5508}
body[data-page="index"] .c-music .pc-cmp .cm.cm-dots{--dot:#7A5AF8}
.pc-cmp .cm.cm-dots[data-dots="5"]{background-image:var(--dF),var(--dF),var(--dF),var(--dF),var(--dF)}
.pc-cmp .cm.cm-dots[data-dots="4"]{background-image:var(--dF),var(--dF),var(--dF),var(--dF),var(--dE)}
.pc-cmp .cm.cm-dots[data-dots="3"]{background-image:var(--dF),var(--dF),var(--dF),var(--dE),var(--dE)}
.pc-cmp .cm.cm-dots[data-dots="2"]{background-image:var(--dF),var(--dF),var(--dE),var(--dE),var(--dE)}
.pc-cmp .cm.cm-dots[data-dots="1"]{background-image:var(--dF),var(--dE),var(--dE),var(--dE),var(--dE)}
/* browsers without color-mix: neutral empty dots (same grey as the old bar track) */
@supports not (color:color-mix(in srgb,red 50%,#fff)){.pc-cmp .cm.cm-dots{--dot-t:#EEF0F5;--dot-r:#B9C0D0}}
@media (forced-colors:active){.pc-cmp .cm.cm-dots{forced-color-adjust:none}}