/* DPI Members app — Royal Velvet, phone-first, one hand. Big targets (≥44 px), bottom tabs, sheets from the bottom. */
:root { --bg: #150A1E; --card: rgba(35,18,54,.82); --card2: rgba(52,26,78,.9); --ink: #F5EDFA; --sub: #C9B8DA; --dim: #A091B4; --gold: #E6C866; --gold2: #C9A227;
  --am: #8E24C9; --sa: #1C48C4; --line: rgba(201,162,39,.24); --ok: #34d399; --bad: #fca5a5; --r: 18px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 -apple-system, 'SF Pro Text', 'Segoe UI', Helvetica, Arial, sans-serif; }
body { min-height: 100vh; background: radial-gradient(ellipse at 50% -15%, #3a1a55, var(--bg) 55%) fixed; padding: env(safe-area-inset-top) 0 calc(78px + env(safe-area-inset-bottom)); }
a { color: var(--gold); }
button { font: inherit; color: inherit; }
.boot { text-align: center; padding: 80px 20px; color: var(--sub); }
.wrap { max-width: 640px; margin: 0 auto; padding: 18px 16px 24px; }
.top { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; }
.top h1 { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: normal; font-size: 30px; margin: 0; flex: 1; line-height: 1.1; }
.kick { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.sub { color: var(--sub); font-size: 14px; }
.dim { color: var(--dim); }
h2 { font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 24px 2px 10px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
h2 .sp { flex: 1; }
h2 a { font-size: 12px; letter-spacing: .04em; text-transform: none; font-weight: 500; text-decoration: none; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 10px; }
.row { display: flex; align-items: center; gap: 10px; }
.sp { flex: 1; min-width: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }
.btn.pri { background: linear-gradient(160deg, #9B2BD8, var(--am) 50%, #6A1A99); border-color: var(--gold2); color: #fff; }
.btn.sm { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 11px; }
.btn.block { width: 100%; }
.btn.ghost { background: none; border-color: rgba(230,200,102,.5); color: var(--gold); }   /* no fill, but outlined: it's a button */
.btn:disabled { opacity: .5; }
.in { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(21,10,30,.7); color: #fff; font: inherit; font-size: 16px; }
label.f { display: block; font-size: 13px; color: var(--sub); margin: 10px 0 0; }
label.f .in { margin-top: 5px; }
.chk { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 15px; }
.chk input { width: 22px; height: 22px; accent-color: var(--am); flex: none; }
.pill { display: inline-block; font-size: 12px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--sub); white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: rgba(52,211,153,.45); } .pill.warn { color: var(--gold); border-color: rgba(230,200,102,.5); } .pill.bad { color: var(--bad); border-color: rgba(252,165,165,.45); }

/* home */
.next { background: linear-gradient(155deg, rgba(142,36,201,.55), rgba(28,72,196,.45) 60%, rgba(35,18,54,.9)); border-color: rgba(230,200,102,.45); }
.next .when { font-family: Georgia, serif; font-size: 26px; line-height: 1.15; margin: 6px 0 2px; }
.next .what { font-size: 18px; font-weight: 600; }
.passbtn { display: flex; align-items: center; gap: 10px; }
.passbtn svg { width: 22px; height: 22px; }
.banner { display: flex; gap: 12px; align-items: center; border-color: rgba(230,200,102,.55); background: rgba(230,200,102,.08); }
.favs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; }
.favs::-webkit-scrollbar { display: none; }
.fav { flex: none; width: 168px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.fav b { display: block; font-size: 14.5px; line-height: 1.25; }
.fav .auto { font-size: 12px; color: var(--ok); margin-top: 2px; }
.fav .btn { margin-top: 10px; width: 100%; }
.line { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.date { width: 46px; flex: none; text-align: center; border-radius: 12px; padding: 5px 0; background: rgba(142,36,201,.28); }
.date b { display: block; font-size: 19px; line-height: 1.05; font-family: Georgia, serif; }
.date span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); }

/* book */
.days { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 6px; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; width: 54px; padding: 8px 0 7px; border-radius: 14px; text-align: center; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; position: relative; }
.day span { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); }
.day b { display: block; font-size: 20px; font-family: Georgia, serif; }
.day.on { background: linear-gradient(160deg, #9B2BD8, #6A1A99); border-color: var(--gold2); }
.day.on span { color: #F3E3A8; }
.day i { position: absolute; bottom: 4px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold); }
.seg { display: flex; gap: 4px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 13px; padding: 3px; margin-bottom: 14px; }
.seg button { flex: 1; min-height: 38px; border: 0; background: none; border-radius: 10px; color: var(--sub); font-weight: 600; font-size: 14px; }
.seg button.on { background: rgba(142,36,201,.45); color: #fff; }
.cls { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; }
.cls.mine { border-color: rgba(52,211,153,.55); box-shadow: inset 3px 0 0 var(--ok); }
.cls .t { width: 58px; flex: none; }
.cls .t b { display: block; font-size: 17px; }
.cls .t span { font-size: 12px; color: var(--sub); }
.cls .n { font-weight: 600; font-size: 16px; line-height: 1.25; }
.cls .m { font-size: 13px; color: var(--sub); margin-top: 2px; }
.cls .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.star { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--dim); font-size: 19px; line-height: 1; cursor: pointer; }
.star.on { color: var(--gold); border-color: rgba(230,200,102,.55); }
.kidtag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #FF8FC8; }

/* membership */
.plan { font-family: Georgia, serif; font-size: 22px; }
.bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; margin: 10px 0 4px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold2), var(--gold)); }

/* family */
.kid { display: flex; align-items: center; gap: 12px; }
.av { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 20px; background: linear-gradient(150deg, #9B2BD8, #1C48C4); color: #fff; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 30px; letter-spacing: .3em; }

/* sheets, pass, toast */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheetbg { position: absolute; inset: 0; background: rgba(5,2,10,.62); backdrop-filter: blur(3px); }
.sheetcard { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; overflow: auto; background: #1F0F30; border-top: 1px solid var(--gold2); border-radius: 22px 22px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
.sheetcard .grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); margin: 0 auto 12px; }
.sheetcard h3 { font-family: Georgia, serif; font-style: italic; font-weight: normal; font-size: 24px; margin: 4px 0 8px; }
.pass { text-align: center; }
.pass .qr { background: #fff; border-radius: 18px; padding: 16px; display: inline-block; margin: 8px 0 12px; }
.pass .qr img { width: 230px; height: 230px; display: block; image-rendering: pixelated; }
.doc { max-height: 38vh; overflow: auto; font-size: 14px; color: var(--sub); background: rgba(21,10,30,.6); border-radius: 12px; padding: 4px 14px; border: 1px solid rgba(255,255,255,.08); white-space: pre-wrap; }
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); opacity: 0; transition: all .25s; background: #2A1540; border: 1px solid var(--gold2); padding: 11px 16px; border-radius: 14px; font-size: 15px; z-index: 30; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* tabs */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(21,10,30,.92); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.tabs a { flex: 1; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; color: var(--dim); text-decoration: none; font-size: 11px; font-weight: 600; }
.tabs a svg { width: 25px; height: 25px; }
.tabs a.on { color: var(--gold); }
.signin { max-width: 420px; margin: 0 auto; padding: 60px 22px; text-align: center; }
.signin .brand { margin: 20px 0 10px; }   /* the gilded wordmark, a size up (Kevin 2026-10-28: logos and branding "really strong, elegant") */
.signin .brand .bm-top { font-size: 40px; padding-bottom: 4px; } .signin .brand .bm-sub { font-size: 11px; gap: 10px; margin-top: 4px; } .signin .brand .bm-sub i { width: 34px; }
.signin img { width: 120px; height: 120px; border-radius: 28px; }
.empty { text-align: center; color: var(--sub); padding: 18px 8px; }

.btn svg { width: 18px; height: 18px; flex: none; }

/* class roster (staff) */
.av.sm { width: 36px; height: 36px; font-size: 14px; font-family: inherit; font-weight: 700; }
.rp .flags, .kid .flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.btn.here { color: var(--ok); border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.08); }
.pill.care { color: #FFD0DC; border-color: rgba(255,160,190,.45); background: rgba(255,120,170,.1); }   /* care notes: the Desk's rose (theme-velvet .carechip), not blue — Kevin 2026-10-26 */
.carebox { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card2); border: 1px solid rgba(255,160,190,.3); border-left: 3px solid #FFB3C8; }
.carebox .kick { color: #FFB3C8; }
.pre { white-space: pre-wrap; }
textarea.in { resize: vertical; min-height: 76px; font: inherit; }
.emerbox { margin-top: 12px; border-radius: 14px; border: 1px solid rgba(252,165,165,.35); background: rgba(252,165,165,.06); }
.emerbox summary { cursor: pointer; padding: 12px 14px; font-weight: 700; color: var(--bad); list-style: none; }
.emerbox summary::after { content: ' ›'; }
.emerbox[open] summary::after { content: ' ⌄'; }
.emerbox ol { margin: 0; padding: 0 14px 12px 32px; line-height: 1.55; }
.emerbox li { margin: 6px 0; }
.whorow { gap: 8px; margin: 0 0 12px; flex-wrap: nowrap; }
.whorow select { flex: 1; min-height: 40px; }
.linkish { background: none; border: 1px solid rgba(230,200,102,.5); border-radius: 99px; padding: 3px 11px; margin-top: 5px; color: var(--gold); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.demo { margin-top: 18px; text-align: left; border-style: dashed; }
.demo .btn { flex-direction: column; gap: 2px; }
.demo .btn small { font-weight: 400; font-size: 12px; color: var(--sub); }
.demorow { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; text-align: left; cursor: pointer; }

/* Settings: a gear in each page's header row (was the More tab); Done on the Settings page */
.gearbtn { flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--sub); border: 1px solid var(--line); background: rgba(255,255,255,.04); text-decoration: none; }
.gearbtn svg { width: 21px; height: 21px; }
.gearbtn.done { width: auto; height: 36px; padding: 0 14px; border-radius: 99px; color: var(--gold); font-weight: 600; font-size: 14px; }

/* long names / emails in a person card stay on one line */
.kid .sp { min-width: 0; }
.kid .sp > .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* skill packs */
.skillpack summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; } .skillpack summary::-webkit-details-marker { display: none; }
.skillpack .chev { color: var(--dim); transition: transform .2s; } .skillpack[open] .chev { transform: rotate(90deg); }
.skpath { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 14px 0 4px; }
.skrow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--sub); font-size: 14px; }
.skrow.r1, .skrow.r2, .skrow.r3, .skrow.r4 { color: var(--ink); } .skrow small { color: var(--dim); font-size: 12px; }
.skdot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); font-size: 12px; }
.skrow.r1 .skdot { border-color: #3AA6E6; color: #3AA6E6; } .skrow.r2 .skdot { border-color: var(--am); background: rgba(142,36,201,.3); color: #fff; }
.skrow.r3 .skdot { border-color: var(--sa); background: rgba(28,72,196,.5); color: #fff; } .skrow.r4 .skdot { border-color: #0B9A66; background: #0B9A66; color: #fff; }


/* ================= 2026-09-30: the new shell (Kevin) — Profile · Dragonfly Studios LA · Settings on one line, places along the bottom ================= */
body { padding-top: 0; }
#app { position: relative; z-index: 1; }
.apphead { position: sticky; top: 0; z-index: 12; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; min-height: 64px;
  padding: max(8px, calc(env(safe-area-inset-top) - 6px)) 14px 8px; background: linear-gradient(rgba(21,10,30,.98), rgba(21,10,30,.92)); border-bottom: 1px solid rgba(201,162,39,.28); }
.hbtn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); color: var(--sub); background: rgba(255,255,255,.04); text-decoration: none; }
.hbtn svg { width: 21px; height: 21px; }
.hbtn:first-child { background: linear-gradient(150deg, #9B2BD8, #1C48C4); border-color: rgba(230,200,102,.55); }
.hbtn.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 2px rgba(230,200,102,.25); }
.hav { font-family: Georgia, serif; font-size: 18px; color: #fff; }
/* the name: a gilded italic "Dragonfly", and a small-caps line between two fine gold rules */
.brandmark { display: flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; min-width: 0; }
.bm-top { font-family: Didot, 'Bodoni 72', 'Bodoni MT', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; font-size: 27px; white-space: nowrap; letter-spacing: .01em; padding: 0 4px 2px;
  color: #EBCB6A; position: relative; }
/* the gilding (Kevin 2026-10-28: on a friend's older, non-Pro iPhone the logo came out faded). WebKit draws gradient-clipped text unreliably
   with a filter on the same element and under a blurred sticky header, and the old gradient's dark lower half sank into the plum on LCD
   screens (iPhone SE / XR / 11). So: solid gold unless the clip is supported, no filter on the words, a brighter gradient, and the glow is
   a soft light behind the name, not a filter on it */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bm-top { background: linear-gradient(180deg, #FFF6D6 0%, #F2D57E 40%, #E0BA4A 72%, #C9A227 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
}
.brandmark { position: relative; isolation: isolate; }
.brandmark::before { content: ''; position: absolute; z-index: -1; left: 8%; right: 8%; top: 10%; height: 55%; border-radius: 50%; background: radial-gradient(closest-side, rgba(230,200,102,.16), transparent); pointer-events: none; }
@media (prefers-contrast: more) { .bm-top { background: none; -webkit-text-fill-color: #F2D57E; color: #F2D57E; } }
.bm-sub { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 9.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.bm-sub i { display: block; width: 20px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.bm-sub i:last-child { transform: scaleX(-1); }

/* the jewelled dragonfly drifting behind everything (shared/dragonfly-bg.js) */
.kbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.kbg .glow { display: none; }
.kbg .dfly { position: absolute; left: 0; top: 0; width: min(78vw, 560px); opacity: .22; transform-origin: 50% 50%; will-change: transform; }
.kbg .dfimg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(142,36,201,.35)); will-change: transform; animation: dfhover 3.4s ease-in-out infinite alternate; }
@keyframes dfhover { from { transform: translateY(-.6%) scale(1); } to { transform: translateY(.6%) scale(1.012); } }
@media (prefers-reduced-motion: reduce) { .kbg .dfimg { animation: none; } }

/* Today */
.greet h1 { font-size: 28px; }
.segtabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(21,10,30,.65); border: 1px solid var(--line); margin: 0 0 12px; }
.segtabs button { flex: 1; min-height: 40px; border: 0; border-radius: 11px; background: none; color: var(--sub); font-weight: 600; font-size: 14px; cursor: pointer; }
.segtabs button.on { background: linear-gradient(160deg, rgba(155,43,216,.6), rgba(28,72,196,.5)); color: #fff; box-shadow: inset 0 0 0 1px rgba(230,200,102,.45); }
.flight { margin: 4px 0; min-height: 52px; font-size: 16px; letter-spacing: .02em; text-decoration: none; }
.fl-orn { color: #FFE9A8; }
.subnote { font-size: 12.5px; color: var(--gold); margin-top: 2px; }
.line.tap { cursor: pointer; }
a.line { text-decoration: none; color: inherit; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hw .hwskill { padding: 10px 0 4px; border-top: 1px solid var(--line); margin-top: 10px; }
.hw ul { list-style: none; margin: 6px 0 0; padding: 0; }
.hw li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0 5px 16px; position: relative; font-size: 14.5px; }
.hw li::before { content: '◆'; position: absolute; left: 0; top: 8px; font-size: 8px; color: var(--gold); }
.hw li small { display: block; color: var(--sub); font-size: 12.5px; }
.hw .dose { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--gold); white-space: nowrap; }

/* Classes */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 4px -16px 4px; padding: 2px 16px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 38px; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--sub); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.chip.on { color: #fff; border-color: var(--gold2); background: rgba(142,36,201,.45); }
h2.dayhd { margin-top: 20px; }
.cls { cursor: pointer; }
/* kids' classes, for a parent: an emerald edge and the kids who can take it */
.kidcls { border-color: rgba(16,185,129,.55) !important; background: linear-gradient(100deg, rgba(16,185,129,.17), var(--card) 48%) !important; box-shadow: inset 3px 0 0 #10B981; }
.forchips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 5px; }
.kidchip { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px; border-radius: 99px; background: rgba(16,185,129,.2); color: #6EE7B7; border: 1px solid rgba(16,185,129,.45); }
.fav { cursor: pointer; display: flex; flex-direction: column; }
.fav > .btn, .fav > .pill { margin-top: auto; }
.fav > .btn { width: 100%; }
.fav > .pill { align-self: flex-start; }
.fav .auto { margin-bottom: 10px; }

/* Workshops & Events */
.evcard { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); margin-bottom: 10px; text-decoration: none; color: inherit; }
.evcard .n { font-weight: 600; font-size: 16px; line-height: 1.25; }
.evcard .evthumb { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(201,162,39,.35); }   /* an event's photo (Kevin 2026-10-26) */
.evhero { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; border: 1px solid rgba(201,162,39,.3); margin: 4px 0 12px; }
.campromo .campph { flex: none; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(201,162,39,.4); }
.evcard .m { font-size: 13px; color: var(--sub); margin-top: 2px; }

/* a wide screen: tabs under the header, Today in two columns, classes two across */
/* the wide-screen layout: html.desk (set by app.js from the window width, or the Phone / Desktop switch) */
html.desk body { padding-bottom: 32px; }
html.desk .apphead { grid-template-columns: 48px 1fr 48px; padding-left: 24px; padding-right: 24px; }
html.desk .bm-top { font-size: clamp(22px, 3.6vw, 38px); }
html.desk .bm-sub { font-size: 10.5px; }
html.desk .tabs { top: 64px; bottom: auto; justify-content: center; gap: 6px; padding: 8px; background: rgba(21,10,30,.85); border-top: 0; border-bottom: 1px solid var(--line); }
html.desk .tabs a { flex: none; max-width: none; flex-direction: row; gap: 8px; padding: 8px 18px; border-radius: 99px; font-size: 14px; }
html.desk .tabs a svg { width: 18px; height: 18px; }
html.desk .tabs a.on { background: rgba(142,36,201,.35); }
html.desk .wrap { max-width: 1120px; padding: 78px 28px 32px; }
html.desk .wrap-profile, html.desk .wrap-more, html.desk .wrap-teach { max-width: 720px; }
html.desk .wrap-workshops .evcard, html.desk .wrap-events .evcard { max-width: 760px; }
html.desk .toast { bottom: 28px; }
html.desk .kbg .dfly { width: min(40vw, 620px); opacity: .18; }
.cls .t { width: 64px; } .cls .t b { white-space: nowrap; font-size: 16px; }

/* test site: the Phone / Desktop switch and the phone frame (local testing only) */
.viewsw { position: fixed; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 15; display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 99px; background: rgba(21,10,30,.92); border: 1px dashed var(--gold2); font-size: 12px; color: var(--sub); }
.viewsw button { border: 0; background: none; color: var(--sub); font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 99px; cursor: pointer; }
.viewsw button.on { background: var(--am); color: #fff; }
/* the wide-screen layout: html.desk (set by app.js from the window width, or the Phone / Desktop switch) */
html.desk .viewsw { bottom: 18px; }
.pvwrap { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 30%, #2a1440, #07040c 70%); }
.pvphone { height: calc(100vh - 36px); aspect-ratio: 9 / 19.5; max-width: calc(100vw - 36px); border-radius: 42px; overflow: hidden; background: var(--bg);
  box-shadow: 0 0 0 3px #C9A227, 0 0 0 5px rgba(230,200,102,.25), 0 30px 80px rgba(0,0,0,.6); }   /* the gold edge sits outside the screen: nothing is pushed in */
.pvphone iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }

/* Profile: faces with a small edit badge, the account holder on top, kids under */
.face { width: 46px; height: 46px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: center / cover no-repeat; font-family: Georgia, serif; font-size: 20px; color: #fff; }
.face.blank { background: linear-gradient(150deg, #9B2BD8, #1C48C4); }
.face.lg { width: 76px; height: 76px; font-size: 32px; } .face.xl { width: 112px; height: 112px; font-size: 44px; box-shadow: 0 0 0 2px rgba(230,200,102,.5); }
.facebtn { position: relative; flex: none; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.facebtn .face { box-shadow: 0 0 0 1.5px rgba(230,200,102,.45); }
.fedit { position: absolute; right: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--gold); color: #1a0d26; border: 2px solid var(--bg); }
.facebtn.lg .fedit { width: 26px; height: 26px; font-size: 14px; }
.pcard { display: flex; gap: 16px; align-items: center; }
.pname { font-size: 19px; display: block; }
.pline { font-size: 13.5px; margin-top: 6px; color: var(--ink); }
.share { font-size: 12.5px; color: var(--gold); margin-top: 2px; }
.famchk { margin: 4px 2px; }
.profhead { text-align: center; margin: 4px 0 6px; }
.purow { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 6px; margin-bottom: 8px; align-items: center; }
.purow input:nth-child(3) { grid-column: 1 / 3; }
.purow .btn { grid-row: 1; grid-column: 3; }
.carebox2 { margin-top: 16px; } .carebox2 summary { cursor: pointer; list-style: none; } .carebox2 summary::-webkit-details-marker { display: none; }
@media (max-width: 600px) { .viewsw { opacity: .75; padding: 2px; } .viewsw span { display: none; } .viewsw button { padding: 5px 9px; font-size: 11.5px; } }

h2.first { margin-top: 4px; }
/* the wide-screen layout: html.desk (set by app.js from the window width, or the Phone / Desktop switch) */
html.desk .bm-top { font-size: clamp(22px, 3.4vw, 34px) !important; }
@media (max-width: 360px) { .bm-top { font-size: 23px; } }
.bm-sub { letter-spacing: .42em; }

/* Teach → a class roster: check in · missing · add someone */
.rp .racts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rp.miss b { color: var(--sub); text-decoration: line-through; text-decoration-color: rgba(252,165,165,.6); }
.addbox { margin-top: 12px; } .addbox .in { margin-top: 8px; min-height: 44px; }
.viewsw { z-index: 35 !important; }
body:has(.sheet:not([hidden])) .viewsw { display: none; }

/* Phone view on a phone: the gold edge around the screen, drawn on top so nothing is pushed in */
html.phoneview body::after { content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; box-shadow: inset 0 0 0 2px #C9A227, inset 0 0 0 4px rgba(230,200,102,.22); }
@media (display-mode: standalone) { html.phoneview body::after { border-radius: var(--scr-r, 55px); } }   /* the phone's own screen corners (app.js sets --scr-r by model) */
html.desk .tabs { overflow-x: auto; justify-content: safe center; scrollbar-width: none; } html.desk .tabs::-webkit-scrollbar { display: none; } html.desk .tabs a { flex: none; }

/* feel like an app: no pull-to-refresh or rubber-band on the page itself (the app refreshes when it comes back to the front) */
html, body { overscroll-behavior-y: none; }

/* Profile: the account card opens the account panel; + Family Member; Dismiss on pop-ups */
.pcard.tap { cursor: pointer; }
.acctline { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--gold); }
.famadd { margin-top: 6px; }
.sheettop { position: sticky; top: -10px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px -18px 8px; padding: 8px 18px; background: #1F0F30; }
.btn.dismiss { background: linear-gradient(160deg, #3A6BF0, var(--sa) 55%, #14338F); border-color: rgba(127,184,255,.6); color: #fff; }

/* in-app checkout */
.coopt .coprice { font-family: Georgia, serif; font-size: 20px; color: var(--gold); white-space: nowrap; }
.cosum .line { padding: 8px 0; } .cosum .total b { font-size: 18px; color: var(--gold); }
.codone { text-align: center; padding: 10px 0 4px; }
.cotick { width: 72px; height: 72px; margin: 6px auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #fff; background: linear-gradient(150deg, #10B981, #0B7A55); box-shadow: 0 0 0 3px rgba(230,200,102,.55); }

/* every button reads as a button (Kevin, 2026-10-01): outlines strong enough to see */
.btn { border-color: rgba(230,200,102,.45); }
.acctline { display: inline-block; border: 1px solid rgba(230,200,102,.5); border-radius: 99px; padding: 3px 11px; }
.acctline { white-space: nowrap; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* the cart: one card per person with their choices */
.cperson .coline { align-items: flex-start; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.cperson .coline small { display: block; color: var(--sub); font-size: 12.5px; }
.cperson .coline .coprice { font-size: 16px; }

/* a gold scrollbar (Kevin, 2026-10-01 — the simple first version): a thin gold bar on the velvet track, everywhere (iPhone too) */
html { scrollbar-color: #C9A227 #1a0d26; scrollbar-width: thin; }
.sheetcard, .doc { scrollbar-color: #C9A227 transparent; scrollbar-width: thin; }

/* Teach → Time off: compact fields that fit a phone (iOS draws date fields wide unless told otherwise) */
.toform .row { gap: 8px; } .toform label.f { min-width: 0; font-size: 12.5px; }
.toform .in { min-height: 40px; padding: 8px 10px; font-size: 15px; border-radius: 10px; width: 100%; min-width: 0; }
.toform input[type=date] { -webkit-appearance: none; appearance: none; display: block; }
.toform input[type=date]::-webkit-date-and-time-value { text-align: left; }

/* the desktop layout on a narrow screen (a phone showing "Desktop"): keep the wide-screen header and tabs, but only go side by side
   when there's room — one column below 720 px, phone-sized gutters, and the tabs sit under the header however tall it is */
html.desk .tabs { top: calc(64px + max(0px, env(safe-area-inset-top) - 14px)); }
@media (min-width: 720px) {
  html.desk .todaygrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  html.desk .clslist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  html.desk .clslist h2.dayhd { grid-column: 1 / -1; }
  html.desk .todaygrid .tcol > h2:first-child { margin-top: 0; }
}
@media (max-width: 719px) {
  html.desk .wrap { padding: 72px 16px 24px; }
  html.desk .apphead { padding-left: 14px; padding-right: 14px; }
  html.desk .tabs a { padding: 7px 12px; font-size: 13px; }
  html.desk .tabs { justify-content: center; }
}
@media (max-width: 460px) { html.desk .tabs a svg { display: none; } html.desk .tabs a { padding: 7px 11px; } }



/* the test view switch and the phone frame never select text */
.viewsw, .pvwrap { -webkit-user-select: none; user-select: none; }

/* sub-request badges: on the Teach tab and the Subs sub-tab */
.tabs a .tico { position: relative; display: inline-flex; }
.tbadge { position: absolute; top: -5px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #E0245E; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); }
html.desk .tabs a .tbadge { top: -7px; right: -10px; }
.sbadge { display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 99px; background: #E0245E; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px; }

/* Refer a friend · Teach → Extra work → Referrals */
.seg2{margin-top:-4px}
.refhero{background:linear-gradient(155deg,rgba(142,36,201,.45),rgba(28,72,196,.35) 60%,rgba(35,18,54,.9));border-color:rgba(230,200,102,.45)}
.refrew{list-style:none;padding:0;margin:8px 0 6px}.refrew li{padding:5px 0;font-size:15.5px}.refrew li b{color:var(--gold);font-size:17px;margin-right:4px}
.refshare{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:center}
.refqr{grid-row:span 2;text-align:center}.refqr img{width:150px;height:150px;border-radius:12px;background:#fff;padding:6px;display:block;margin:0 auto 6px}.refqr .sub{font-size:12px;max-width:150px}
.reflink{display:flex;flex-direction:column;gap:3px;min-width:0}.reflink b{font-size:15px;word-break:break-all}.refcode{color:var(--gold);letter-spacing:.06em}
.refbtns{display:flex;flex-wrap:wrap;gap:8px}.refbtns .btn{flex:1;min-width:92px}
@media (max-width:440px){.refshare{grid-template-columns:1fr}.refqr{grid-row:auto}}
.refitems{list-style:none;margin:10px 0 0;padding:8px 0 0;border-top:1px solid var(--line)}.refitems li{display:flex;gap:8px;font-size:13.5px;padding:3px 0;color:var(--sub)}
.reftally{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0 0 10px}.reftally div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}.reftally b{display:block;font-family:Georgia,serif;font-size:22px;color:var(--gold)}.reftally span{font-size:11.5px;color:var(--sub)}
.refpend{border-color:rgba(52,211,153,.45)}.big{font-size:22px;font-family:Georgia,serif}
.invited{border-color:rgba(230,200,102,.55);background:rgba(230,200,102,.08);text-align:left}

/* Events in LA: a photo in the list, and the details sheet */
.lashow .lathumb{width:64px;height:48px;object-fit:cover;border-radius:10px;flex:none;border:1px solid var(--line)}
.lahero{position:relative;margin:-4px -4px 14px;border-radius:16px;overflow:hidden;background:#000}.lahero img{display:block;width:100%;max-height:260px;object-fit:cover}
.lahero span{position:absolute;right:8px;bottom:6px;font-size:11px;color:#fff;background:rgba(0,0,0,.5);padding:2px 7px;border-radius:99px}
.latitle{font-family:Georgia,serif;font-style:italic;font-weight:normal;font-size:26px;margin:4px 0 10px;line-height:1.15}
.lafacts .line{align-items:flex-start}.lablurb{font-size:15.5px;line-height:1.55;margin:12px 2px 0}

.lalist{display:grid;gap:14px}
.lacard{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--card);cursor:pointer}
.laimg{position:relative;height:190px;background:linear-gradient(150deg,#3a1a55,#1C48C4) center/cover no-repeat}
.ladate{position:absolute;left:10px;bottom:10px;background:rgba(21,10,30,.82);color:var(--gold);border:1px solid rgba(230,200,102,.55);font-weight:700;font-size:14px;letter-spacing:.02em;padding:5px 11px;border-radius:99px}
.latags{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.lakind{background:rgba(21,10,30,.7);color:var(--ink);font-size:12px;padding:3px 10px;border-radius:99px}
.laage,.laage2{background:rgba(110,30,170,.9);color:#fff;font-weight:700;box-shadow:inset 0 0 0 1px rgba(230,200,102,.65)}   /* age note: amethyst with a gold edge (gem palette — no pink) */
.laage2{display:inline-block;font-size:12px;padding:2px 9px;border-radius:99px;margin-top:4px}
.labody{padding:11px 14px 13px}.labody b{font-size:17px;line-height:1.25;display:block}
html.desk .lalist{grid-template-columns:repeat(2,1fr)}

/* Teach → Schedule: Request sub / Sub requested (tap again to withdraw) */
.btn.subon{flex-direction:column;align-items:flex-end;gap:0;border-color:rgba(230,200,102,.6);color:var(--gold);background:rgba(230,200,102,.08);line-height:1.15}
.btn.subon small{font-size:10.5px;font-weight:500;color:var(--sub)}
/* Teach → Schedule: Request sub sits bottom right under the class name, so long names don't wrap around it (Kevin) */
.tfoot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:2px}.tfoot .sub{flex:1;min-width:0}.tfoot>.btn,.tfoot>.pill{flex:none}
/* Teach → Schedule: KIDS leads the "booked" line instead of trailing the class name (Kevin) */
.tfoot .sub .kidtag{font-size:10px;margin-right:2px}
/* My Schedule: a class they teach today looks different from one they take — gold tile and a TEACHING kicker (Kevin) */
.teachrow .date.tt{width:58px;background:transparent;border:1.5px solid rgba(230,200,102,.7)}.teachrow .date.tt b{font-size:15px;font-family:inherit;color:var(--gold)}
.teachrow .tkick{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1px}
/* Teach → Last 7 days: folded by default above Today (Kevin) */
.past7 summary{list-style:none;cursor:pointer}.past7 summary::-webkit-details-marker{display:none}
.past7 summary h2{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.past7 summary h2>span:first-child::after{content:' ›';color:var(--sub)}.past7[open] summary h2>span:first-child::after{content:' ⌄'}
.past7 .p7hint{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--sub);font-family:inherit}.past7 summary h2 .dim{font-size:13px;font-weight:500}
/* the header's top edge (Kevin 2026-10-01: "a big space above Dragonfly Studios" when opened from the Home Screen): the iPhone safe area already
   leaves room under the clock / Dynamic Island, so the header sits just inside it rather than 8px further down */
/* Classes → Favorites: the weekly auto-book switch on each favorite's card (Kevin) */
.fav .favauto{font-size:12.5px;margin:2px 0 10px;color:var(--sub);gap:6px}.fav .favauto input{width:16px;height:16px}

/* waiver: who it covers — the adult signing, then each child as a tap-to-add minor (Kevin 2026-10-01) */
.wwho { margin: 12px 0; padding: 12px; border-radius: 14px; background: rgba(42,99,214,.10); border: 1px solid rgba(127,184,255,.25); }
.wwho #wkids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wkid { display: inline-flex; align-items: baseline; gap: 6px; padding: 9px 13px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: inherit; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
.wkid small { font-weight: 400; font-size: 12px; color: var(--sub); }
.wkid.me { margin-top: 6px; cursor: default; }
.wkid.on { background: rgba(142,36,201,.45); border-color: rgba(200,140,255,.6); }
.wkid.done { cursor: default; opacity: .75; }
.wkid.add { border-style: dashed; color: var(--sub); }
.wread summary { cursor: pointer; color: var(--sub); margin: 6px 0; }

/* family membership → "Who uses it": the waiver's kid chips (.wkid); on = emerald, the holder in gold */
.whouses { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.whouses .wkids { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; }
.whouses .wkid.on { background: rgba(16,185,129,.2); border-color: rgba(52,211,153,.6); }
.whouses .wkid.me { margin-top: 0; border-color: rgba(230,200,102,.55); color: var(--gold); }
.whouses .wkid.done { opacity: .85; }
/* "How do you want to book?" — the best fit for the group is outlined in gold; family members a class leaves out are greyed with why */
.coopt.cobest { border-color: rgba(230,200,102,.6); }
.whooff { opacity: .55; } .whooff small { color: var(--sub); font-size: 12.5px; margin-left: 4px; }

/* My Homework → progress notes: what moved up, what's newly started */
.hwprog { margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: rgba(46,204,113,.08); border: 1px solid rgba(46,204,113,.22); font-size: 14px; line-height: 1.5; }
.hwprog b { color: #fff; }
/* the coverage builder: "Covered 1 of 2" with a bar (emerald when everyone is covered); picks that cover nobody are dimmed */
.bldcount { margin: 10px 0 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.bldcount b { font-size: 16px; } .bldcount.ok { border-color: rgba(52,211,153,.6); } .bldcount.ok b { color: var(--ok); }
.bldbar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); margin-top: 8px; overflow: hidden; }
.bldbar i { display: block; height: 100%; background: var(--gold); border-radius: 99px; transition: width .2s; } .bldcount.ok .bldbar i { background: var(--ok); }
.bldpick .row { align-items: flex-start; gap: 10px; } .bldpick.extra { opacity: .6; }
.bldfor { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .bldfor .wkid { padding: 5px 10px; font-size: 13px; }
.bldfor .wkid.on, .bldwho .wkid.on { background: rgba(16,185,129,.2); border-color: rgba(52,211,153,.6); }

/* waiver: full name above a drawn signature */
.wnerr { color: #F5C66B; font-size: 13px; min-height: 16px; margin-top: 4px; }
.signame { margin-top: 10px; font-size: 20px; font-weight: 600; min-height: 26px; padding: 0 4px 4px; border-bottom: 1px solid rgba(255,255,255,.2); }
.sigwrap { position: relative; background: #fff; border-radius: 12px; height: 150px; margin-top: 8px; touch-action: none; }
.sigwrap canvas { width: 100%; height: 100%; display: block; border-radius: 12px; cursor: crosshair; }
.sigwrap .ph { position: absolute; left: 14px; bottom: 10px; color: #999; font-size: 13px; pointer-events: none; }
.sigwrap.inked .ph { display: none; }

/* every expandable section shows it opens: a down chevron on the right, flipped up when open (Kevin 2026-10-01) */
details > summary { list-style: none; cursor: pointer; position: relative; padding-right: 30px; }
details > summary::-webkit-details-marker { display: none; }
details[class] > summary::after { content: ''; position: absolute; right: 10px; top: 50%; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .7; transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
details[class][open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.past7 summary h2 > span:first-child::after { content: none !important; }
/* empty → needs attention */
.carebox2.need { border-color: rgba(245,198,107,.6); background: rgba(245,198,107,.07); }
.carebox2.need summary { color: #F5C66B; }
.linkish.need { color: #F5C66B; }

/* profile tiles: plain status lines (the whole tile opens the profile), a chevron on the right */
.pnote { font-size: 13px; color: var(--sub); margin-top: 4px; }
.pnote.need { color: #F5C66B; }
.pcard, .card.kid { position: relative; }
.tilechev { align-self: center; font-size: 22px; color: var(--sub); padding-left: 6px; }

/* profile: Save in the top bar, left of Dismiss — shown once something changed */
.sheettop .topsave { margin-right: 8px; } .sheettop .topsave[hidden] { display: none; }

/* pickup people: a card each, the add/edit form in place */
.purow2 { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px; }
.purow2 .sub { white-space: normal; }
.puform { padding: 14px; margin-bottom: 8px; border-color: rgba(127,184,255,.35); }
.face.md { width: 40px; height: 40px; font-size: 14px; }

/* pickup person tile: collapsed row (face · name · relation/when · trash), opens to details */
.putile { padding: 0; margin-bottom: 8px; }
.putile > summary { display: flex; align-items: center; gap: 12px; padding: 10px 40px 10px 12px; }
.putile .putrash { background: none; border: 0; color: #ff8a8a; padding: 8px; border-radius: 10px; cursor: pointer; display: flex; }
.putile .putrash:hover { background: rgba(255,90,90,.12); }
.putile .pubody { display: flex; gap: 14px; align-items: flex-start; padding: 4px 14px 14px; }
.putile .pubody .line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
/* pickup form: From / Until side by side without overflowing a phone (iOS date inputs have a wide built-in width) */
.puform .row > .f { min-width: 0; flex: 1 1 0; }
.puform input[type=date] { min-width: 0; width: 100%; max-width: 100%; -webkit-appearance: none; appearance: none; font-size: 15px; padding-left: 10px; padding-right: 6px; }

/* pickup tile: name … then the open/close arrow, then the trash can at the far right (plain, not red) */
.putile > summary { padding-right: 8px; }
details.putile > summary::after { position: static; order: 2; flex: none; margin: 0 6px 4px 2px; transform: rotate(45deg); }
details.putile[open] > summary::after { transform: rotate(-135deg); margin: 6px 6px 0 2px; }
.putile .putrash { order: 3; color: var(--sub); }
.putile .putrash:hover { background: rgba(255,255,255,.08); color: #fff; }

/* photo cropper: a square frame over the app */
.cropper { position: fixed; inset: 0; z-index: 60; background: rgba(8,4,14,.82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cropcard { background: #1F0F30; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 16px; width: 312px; max-width: 100%; display: grid; gap: 10px; }
.cropstage { width: 280px; height: 280px; margin: 0 auto; overflow: hidden; position: relative; border-radius: 14px; background: #000; touch-action: none; cursor: grab; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.cropstage img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cropzoom { width: 100%; accent-color: var(--am); }

.note-open { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(42,99,214,.12); border: 1px solid rgba(127,184,255,.3); font-size: 13.5px; }

/* class tile: the star top-right, Book / Add to Waitlist bottom-right on its own row (the title gets the width) */
.cls { flex-wrap: wrap; position: relative; } .cls:has(> .star) { padding-right: 44px; }
.cls > .star { position: absolute; top: 10px; right: 10px; }
.cls > .acts { flex: 1 0 100%; flex-direction: row; justify-content: flex-end; margin: 2px -32px 0 0; }

/* roster row: Check in · Missing · then a plain trash can at the far right */
.rp .rtrash { background: none; border: 0; color: var(--sub); padding: 6px; margin-left: 4px; border-radius: 10px; cursor: pointer; display: inline-flex; align-self: center; }
.rp .rtrash:hover { background: rgba(255,255,255,.08); color: #fff; }
/* roster rows on a phone: the full name gets the width; Check in · Missing · trash sit on their own line, right-aligned */
@media (max-width: 520px) {
  .line.rp { flex-wrap: wrap; row-gap: 6px; }
  .line.rp > .sp { flex: 1 1 calc(100% - 56px); min-width: 0; }
  .line.rp > .racts { flex: 1 0 100%; display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
}

/* Add to Waitlist (2026-10-02): a waitlist booking reads amber — never the green "booked" look */
.cls.mine.wl { border-color: rgba(245,166,35,.55); box-shadow: inset 3px 0 0 #F5A623; }
.line.wl { box-shadow: inset 3px 0 0 #F5A623; padding-left: 10px; }
.wltag { color: #F5A623; font-weight: 600; }

/* attendance ticks: ✓ green when here, ✕ red when missing (same as the coach app, desk and Gym) */
.tick { width: 44px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; cursor: pointer; font-size: 19px; font-weight: 800; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); color: var(--sub); }
.tick.ok.on { background: #13a873; border-color: #5fe0ae; color: #fff; }
.tick.no.on { background: #C8364A; border-color: #ff9aa8; color: #fff; }
.tick:active { transform: scale(.95); }
/* signed out there are no tabs — the empty tab bar (desktop view) mustn't draw its line through the logo */
#tabs:empty { display: none; }

/* an exact check-in time (app.js atT): to the second on long-press — Kevin 2026-10-03 */
.at { font-variant-numeric: tabular-nums; -webkit-touch-callout: none; }

/* 2026-10-04: waiver-first sign-up, the sign-in code, claim your account, Set up your app (Kevin) */
.signin { padding-bottom: 90px; }
.signin .newbtn { flex-direction: column; gap: 2px; min-height: 64px; font-size: 17px; margin-top: 8px; }
.signin .newbtn small { font-weight: 400; font-size: 12.5px; opacity: .85; }
.orline { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; color: var(--sub); font-size: 14px; }
.orline::before, .orline::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.codef { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.codef .in { flex: 1; min-width: 0; }
.in.code { font: 600 22px/1 ui-monospace, Menlo, monospace; letter-spacing: .2em; text-align: center; }
.doc.full { max-height: none; overflow: visible; }   /* the waiver at full height: one page scroll, no box inside the sheet */
.kidrow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kidrow .f { margin: 0; min-width: 120px; } .kidrow .kdob { flex: 1 1 140px; }
.kidtrash { background: none; border: 0; color: var(--sub); padding: 10px 8px; border-radius: 10px; cursor: pointer; display: flex; margin-left: auto; }   /* plain, far right */
.kidtrash:hover { background: rgba(255,255,255,.08); color: #fff; }
.wwho .wkids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wwho .wkid.on { cursor: default; }
.banner.claim { align-items: flex-start; }   /* amber = needs attention (optional, with Later) */
.card.setup { border-color: rgba(28,72,196,.55); background: rgba(28,72,196,.10); }
.card.setup .line { padding: 10px 0; gap: 12px; }
.card.mobile { border-color: rgba(230,200,102,.55); background: rgba(230,200,102,.08); }
ol.a2hs { list-style: none; padding: 0; margin: 12px 0 0; counter-reset: a; }
ol.a2hs li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
ol.a2hs .a2i { flex: none; width: 40px; height: 40px; border-radius: 10px; background: #fff; color: #111; display: flex; align-items: center; justify-content: center; }
ol.a2hs .a2add { color: #3B82F6; font-weight: 700; font-size: 14px; }
/* the test site's Phone / Desktop switch sits at the top on the sign-in screen, clear of the Staff button */
body:has(.signin) .viewsw { top: calc(10px + env(safe-area-inset-top)); bottom: auto; }
/* the setup hub (2026-10-04): independent choices, an emerald ✓ when done; Today's "Complete your setup" is amber */
.hub { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.hubrow { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; min-height: 56px; }
.hubrow .sp { display: flex; flex-direction: column; }
.hubrow .sub { font-size: 13px; }
.hubtick { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(201,162,39,.5); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.hubrow.done { cursor: default; border-color: rgba(52,211,153,.45); background: rgba(16,185,129,.10); }
.hubrow.done .hubtick { background: #10B981; border-color: #10B981; color: #fff; }
.setupcard { align-items: flex-start; }
.setupcard .hubrow { background: rgba(21,10,30,.45); }
/* "Yes, that's my email" (Kevin 2026-10-04): the email check in checkout / password popups; amber until confirmed, then a green tick */
.emck { border-color: rgba(245,158,11,.55); }
.emck .btn { width: 100%; }
.emck.ok { display: flex; align-items: center; gap: 10px; border-color: rgba(16,185,129,.5); font-weight: 600; }
.emck.ok .hubtick { background: #10B981; border-color: #10B981; color: #fff; }
button[data-needemail] { opacity: .5; }

/* Teach → Pay: the parts of the gross, quieter than the totals (2026-10-09) */
.paynow .payparts{margin:2px 0 4px;padding-left:10px;border-left:2px solid var(--line,rgba(255,255,255,.12))}
.paynow .line.sm{padding:4px 0;font-size:14px}
.paynow .line.sm span{opacity:.85}

/* Settings → Privacy & terms (the website's /privacy and /terms, shown in the app — 2026-10-13) */
.legaldoc h2{font-size:16px;margin:16px 0 6px}.legaldoc p,.legaldoc li{font-size:14px;line-height:1.55}.legaldoc ul{padding-left:18px;margin:6px 0}

/* Camps & Intensives (2026-10-19): a newly listed camp — a slowly circling gradient border + NEW! */
@property --campang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.camptile { position: relative; }
.campnew { border: 2px solid transparent !important; border-radius: 14px; background: linear-gradient(var(--card), var(--card)) padding-box, conic-gradient(from var(--campang), #2B6CB0, #8B5CF6, #10B981, #C9A84C, #2B6CB0) border-box !important; animation: campspin 4s linear infinite; }
@keyframes campspin { to { --campang: 360deg; } }
.newbadge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; background: linear-gradient(90deg, #8B5CF6, #10B981); animation: newpulse 1.6s ease-in-out infinite; }
@keyframes newpulse { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .campnew, .newbadge { animation: none; } }

/* the camp promo button (2026-10-19): "Winter Camps for Kids" — a gem gradient, season icon, Reserve Your Spot */
.campromo { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px 16px; margin: 6px 0; border-radius: 14px; border: 1px solid rgba(139,92,246,.45); color: inherit; font: inherit; cursor: pointer;
  background: linear-gradient(115deg, rgba(43,108,176,.35), rgba(139,92,246,.30) 55%, rgba(16,185,129,.22)); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.campromo b { display: block; font-size: 16px; } .campromo .sub { display: block; margin-top: 2px; }
.campromo .campico { font-size: 26px; line-height: 1; } .campromo .campgo { white-space: nowrap; font-size: 12px; font-weight: 700; color: #F5D98B; }
.campbanner { margin: 0 0 12px; }
.campromo.campnew { background: linear-gradient(115deg, #1d1530, #24183a) padding-box, conic-gradient(from var(--campang), #2B6CB0, #8B5CF6, #10B981, #C9A84C, #2B6CB0) border-box !important; border: 2px solid transparent !important; }

/* Show Adult Classes, fixed on (no kids) — 2026-10-19 */
.dimmed { opacity: .55; }
/* "where to add kids later" — little drawings of the app with arrows (2026-10-19) */
.howto { display: grid; gap: 10px; margin-top: 10px; }
.howstep { font-size: 14px; } .howstep .hnum { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold, #C9A84C); color: #1a1026; font-size: 12px; margin-right: 6px; }
.howshot { position: relative; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 10px; background: rgba(0,0,0,.25); min-height: 96px; }
.howbar { display: flex; align-items: center; gap: 10px; } .howbar .hav { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #6D28D9; color: #fff; font-weight: 700; }
.howlogo { flex: 1; text-align: center; font-family: Georgia, serif; font-style: italic; color: #F5D98B; } .howgear { opacity: .7; }
.howfam { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 8px; }
.howarrow { position: absolute; font-size: 26px; color: #F5D98B; text-shadow: 0 0 8px rgba(245,217,139,.7); animation: howbob 1.2s ease-in-out infinite; }
@keyframes howbob { 50% { transform: translateY(-6px); } }
.howpulse { box-shadow: 0 0 0 0 rgba(245,217,139,.7); animation: howring 1.6s ease-out infinite; }
@keyframes howring { 70% { box-shadow: 0 0 0 10px rgba(245,217,139,0); } 100% { box-shadow: 0 0 0 0 rgba(245,217,139,0); } }
@media (prefers-reduced-motion: reduce) { .howarrow, .howpulse { animation: none; } }

/* a setup row with its own Not Now (Add kids to your profile, 2026-10-19) */
.hubwrap { display: flex; gap: 8px; align-items: stretch; } .hubwrap .hubrow { flex: 1; } .hublater { align-self: center; white-space: nowrap; }

/* Media (2026-10-19): tiles, the player with the coach's drawings, NEW glow on the tab */
.clipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 8px 0; }
.cliptile { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: inherit; font: inherit; cursor: pointer; }
.cliptile .ck { font-size: 20px; } .cliptile b { display: block; } .cliptile .sub { display: block; font-size: 12px; }
.cliptile.clipnewt { border: 2px solid transparent; background: linear-gradient(#1d1530, #1d1530) padding-box, conic-gradient(from var(--campang), #2B6CB0, #8B5CF6, #10B981, #C9A84C, #2B6CB0) border-box; animation: campspin 4s linear infinite; }
.clipgroup summary { cursor: pointer; }
.clipstage { position: relative; display: flex; justify-content: center; background: #000; border-radius: 12px; overflow: hidden; }
.clipstage video, .clipstage img { max-width: 100%; max-height: 62vh; display: block; }
#clipink { position: absolute; pointer-events: none; }
.clippin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; border: 3px solid #FFE600; background: rgba(0,0,0,.55); color: #fff; font-weight: 700; font-size: 12px; display: grid; place-items: center; }
.clipnum { min-width: 24px; height: 24px; border-radius: 50%; border: 2px solid #FFE600; display: inline-grid; place-items: center; font-weight: 700; font-size: 12px; margin-right: 8px; }
.cliptoday { margin: 0 0 12px; }
.tbadge.tnew { background: linear-gradient(90deg, #8B5CF6, #10B981); animation: newpulse 1.6s ease-in-out infinite; }

/* ‹ ⌂ dates ›: the dates sit in a fixed-width slot, so › stays put while you click through (Kevin 2026-10-20 — every app) */
.navlbl{display:inline-block;text-align:center;white-space:nowrap;flex:0 1 133px;min-width:0;overflow:hidden;text-overflow:ellipsis;margin:0 4px}   /* a steady 133px so the arrows don't jump, narrower when the screen is (Larger text) */
html.tl .weeknav{gap:4px !important}

/* the cart & checkout (docs/22, Kevin 2026-10-22: "high end, premium, super clean and easy") */
.ckpill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; min-width: 240px;
  border-radius: 999px; border: 1px solid var(--gold2); background: linear-gradient(160deg, #9B2BD8, var(--am) 50%, #6A1A99); color: #fff; font: inherit; font-weight: 600; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 4px rgba(230,200,102,.08); cursor: pointer; }
.ckpill span:nth-child(2) { flex: 1; text-align: left; }
.ckpn { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: #1d0f2a; font-size: 13px; font-weight: 700; }
.ck { padding-bottom: 6px; }
.ckhead { display: flex; align-items: baseline; justify-content: space-between; margin: 2px 2px 14px; }
.ckt { font-family: inherit; font-size: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ckitems { border-top: 1px solid var(--line); }
.ckitem { display: flex; gap: 14px; align-items: flex-start; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.ckico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: linear-gradient(160deg, rgba(155,43,216,.28), rgba(28,72,196,.22)); border: 1px solid var(--line); }
.ckname { font-weight: 600; font-size: 15.5px; line-height: 1.3; }
.ckprice { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ckprice small { display: block; font-weight: 400; color: var(--dim); font-size: 12px; }
.ckctl { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.ckqty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.ckqty button { width: 34px; height: 30px; border: 0; background: none; color: var(--ink); font-size: 17px; cursor: pointer; }
.ckqty b { min-width: 22px; text-align: center; font-size: 14px; }
.cklink { background: none; border: 0; padding: 0; color: var(--sub); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cktag { display: inline-block; margin-top: 6px; font-size: 11.5px; padding: 2px 8px; border-radius: 99px; border: 1px solid rgba(230,200,102,.35); color: var(--gold); }
.cktag.off { color: var(--sub); border-color: var(--line); }
.cksec { margin-top: 22px; }
.ckh { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 2px 10px; }
.ckopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ckopt { display: flex; align-items: center; gap: 10px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ckopt b { white-space: nowrap; }
.ckopt.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, 0 6px 18px rgba(0,0,0,.25); background: linear-gradient(160deg, rgba(155,43,216,.18), rgba(35,18,54,.9)); }
.ckopt.static { cursor: default; }
.ckoi { font-size: 22px; }
@media (max-width: 380px) { .ckopts { grid-template-columns: 1fr; } }
.ckaddr { display: grid; gap: 8px; margin-top: 12px; }
.ckin { min-height: 46px; }
.ckrow { display: flex; gap: 8px; } .ckrow .grow { flex: 1; } .ckrow .st { width: 72px; } .ckrow .zip { width: 104px; }
.ckget { margin-top: 12px; }
.ckrates { display: grid; gap: 8px; margin-top: 12px; }
.ckrate { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink); font: inherit; cursor: pointer; }
.ckrate.on { border-color: var(--gold); background: rgba(230,200,102,.07); }
.ckdot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--dim); }
.ckrate.on .ckdot { border-color: var(--gold); background: radial-gradient(circle, var(--gold) 45%, transparent 50%); }
.cknote { margin-top: 10px; font-size: 13px; color: var(--sub); line-height: 1.45; }
.cksum { margin-top: 22px; padding: 16px 16px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); }
.cksl { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--sub); font-variant-numeric: tabular-nums; }
.cksl.tot { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 19px; font-weight: 700; }
.ckterms { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--sub); cursor: pointer; }
.ckterms input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--gold2); }
.ckpay { margin-top: 18px; min-height: 56px; font-size: 17px; border-radius: 16px; letter-spacing: .01em; box-shadow: 0 10px 26px rgba(106,26,153,.45); }
.cksecure { text-align: center; font-size: 12.5px; color: var(--dim); margin-top: 10px; }
.ckback { display: block; margin: 14px auto 2px; }
.cksl.sub2 { color: var(--ink); border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
/* "For you" on Today (docs/22 round 4) */
.fyrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 6px; }
.card.fy { position: relative; margin: 0; border-color: rgba(230,200,102,.45); background: linear-gradient(160deg, rgba(155,43,216,.22), rgba(35,18,54,.9)); }
.fyt { display: block; font-size: 17px; margin-top: 4px; }
.fyw { margin-top: 6px; color: var(--sub); font-size: 14px; }
.fyx { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: none; color: var(--dim); cursor: pointer; font-size: 14px; }
/* a birthday's friend passes on Today (Kevin 2026-10-27): cake, candles, confetti — amethyst into sapphire, gold filigree */
.card.bday { position: relative; overflow: hidden; display: flex; gap: 14px; align-items: center; margin: 0 0 10px; padding: 16px 16px 16px 10px; border: 1.5px solid rgba(230,200,102,.7);
  background: radial-gradient(120% 140% at 0% 0%, rgba(155,43,216,.55), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(28,72,196,.5), transparent 60%), #1E0F33;
  box-shadow: inset 0 0 0 4px rgba(230,200,102,.08), 0 10px 28px rgba(0,0,0,.35); }
.card.bday .bdtx { position: relative; flex: 1; min-width: 0; }
.card.bday .kick { color: #E6C866; letter-spacing: .14em; }
.card.bday .fyt { font-size: 19px; }
.bdcake { position: relative; flex: 0 0 96px; width: 96px; height: 96px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.bdflame { transform-origin: 50% 100%; transform-box: fill-box; animation: bdflick 1.1s ease-in-out infinite alternate; }
@keyframes bdflick { 0% { transform: scale(1, 1) rotate(-3deg); opacity: .9; } 100% { transform: scale(.86, 1.12) rotate(3deg); opacity: 1; } }
.bdconf { position: absolute; inset: 0; pointer-events: none; }
.bdconf i { position: absolute; top: -10px; width: 7px; height: 11px; opacity: .85; border-radius: 2px; animation: bdfall 4s linear infinite; }
@keyframes bdfall { 0% { transform: translateY(-10px) rotate(0); } 100% { transform: translateY(190px) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .bdflame, .bdconf i { animation: none; } .bdconf i { top: auto; bottom: 8px; opacity: .5; } }
/* after a drop-in: "How was it?" + the thank-you (Kevin 2026-10-24) */
.aftercard .stars { display: flex; gap: 8px; margin: 12px 0 6px; }
.aftercard .star { font-size: 21px; }
/* Save to Home Screen on iPhone (Kevin 2026-10-24): the steps at the top of the screen, clear of Safari's bottom bar and its menus */
.sheet.top .sheetbg { background: rgba(5,2,10,.35); backdrop-filter: none; }
.sheet.top .sheetcard { top: 0; bottom: auto; max-height: 70vh; border-top: 0; border-bottom: 1px solid var(--gold2); border-radius: 0 0 22px 22px; padding: calc(10px + env(safe-area-inset-top)) 18px 16px; }
.sheet.top .sheetcard .grab { display: none; }
.a2dots { font-weight: 700; letter-spacing: 1px; font-size: 15px; color: #3B82F6; }
.sheet.top .a2hs li { padding: 6px 0; }
.sheet.top .sheetcard h3 { font-size: 21px; margin-bottom: 6px; }
/* the iPhone steps' icons the way Safari draws them on this phone (Kevin 2026-10-24): Safari's grays, light or dark — .light / .dark is set from
   the phone's mode when the steps open. View More is a gray circle with a chevron, the same size as the Share icon. */
.a2hs.light .a2i { color: #3C3C43; background: #FFFFFF; } .a2hs.dark .a2i { color: #EBEBF5; background: #2C2C2E; }   /* Safari's share-sheet tiles, light / dark */
.a2hs .a2dots { color: inherit; font-size: 14px; letter-spacing: 1px; font-weight: 800; }
.a2more { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 16px; line-height: 1; padding-bottom: 3px; box-sizing: border-box; }
.a2hs.light .a2more { background: #E5E5EA; color: #3C3C43; } .a2hs.dark .a2more { background: #3A3A3C; color: #EBEBF5; }
/* iOS's "Open as Web App" switch, on (Kevin 2026-10-24): a small green pill with its knob to the right */
.a2pill { display: inline-block; position: relative; width: 30px; height: 18px; border-radius: 9px; background: #34C759; vertical-align: -4px; margin: 0 2px; }
.a2pill::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
/* the browser's own menu / install buttons in the install steps (Android, computers) */
.a2glyph { font-size: 22px; font-weight: 700; line-height: 1; color: inherit; }
/* Complete your setup (Kevin 2026-10-24): no empty circles on the left — a green ✓ on the right once a step is done; a step's second choice
   ("No kids") is a button just like the step, the same height and look, so it reads as one or the other */
.hubdone { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #10B981; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.hubwrap .hublater { align-self: stretch; flex: none; min-width: 96px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(21,10,30,.45); color: inherit; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.hubwrap .hublater:active, .hubwrap .hubrow:active { border-color: var(--gold2); }
/* Memberships & programs tiles → their detail; Purchase receipts; one-click checkout (Kevin 2026-10-25) */
/* Memberships · Packs · Courses & Workshops · Camps & Intensives · Events · Drop-ins · Makeups — slim rows under their group's header (Kevin 2026-10-25) — name, then one line: who · bills / left · this week · card; tap → the detail */
.mkick { margin: 10px 2px 6px; } .card.mlist { padding: 2px 14px; }
.mrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mrow:last-child { border-bottom: 0; } .mrow:active { opacity: .7; } .mrow .chev { color: var(--dim); font-size: 18px; flex: none; }
.mrow .mtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mrow .mname { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow .mtop { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .mrow .mtop .mname { flex: 1 1 auto; min-width: 0; } .mrow .mcardr { flex: none; font-size: 12.5px; color: var(--sub); white-space: nowrap; }   /* the card nickname, right of the name; the name ellipsizes first */
.mrow .mline { display: flex; align-items: center; gap: 0; font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mrow .mown { color: var(--ink, #fff); font-weight: 600; flex: none; }
.mrow .mseg { overflow: hidden; text-overflow: ellipsis; } .mrow .mseg::before { content: '·'; margin: 0 5px; color: var(--dim); }
.mrow .mseg.mcard { flex: 0 1 auto; } .mrow .mseg.mfirst::before { content: none; } .mrow .mseg.msub { color: var(--ink, #fff); flex: 0 1 auto; min-width: 0; } .mrow .mseg.mleft { flex: none; } .mrow .mwho { margin-left: 0; }   /* line 2: how it's used (subscriptions / who shares it), then what's left — no owner (Kevin 2026-10-25) */ .mrow .mseg.warn { color: var(--gold); } .mrow .mseg.bad { color: var(--bad); font-weight: 600; }
.mwho { display: inline-flex; margin-left: 5px; flex: none; } .mwho i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; margin-left: -4px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(150deg, #9B2BD8, #1C48C4); border: 1.5px solid var(--bg, #14091f); }
.mwho i:first-child { margin-left: 0; } .mwho i.more { background: rgba(255,255,255,.14); }
.mnext { margin: 4px 0 6px; font-size: 14.5px; color: var(--sub); } .mnext b { color: var(--ink, #fff); }
.card.mfam .chk { display: flex; align-items: center; gap: 8px; font-size: 15px; } .card.mfam .chk input { width: 20px; height: 20px; }
.mtile { cursor: pointer; display: block; } .mtile .chev { color: var(--dim); margin-left: 6px; font-size: 18px; } .mtile:active { border-color: var(--gold2); }
.mdecide { margin-top: 12px; } .mdecide .mbtns { gap: 8px; flex-wrap: wrap; margin-top: 8px; } .mdecide .mbtns .btn[disabled] { opacity: .45; }   /* Hold · Change card · Cancel — buttons by themselves (Kevin 2026-10-25) */ .mdecide > .row:first-child { margin-top: 0 !important; }
.mlist summary, .receipts summary, .receipts .older summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; } .mlist summary::-webkit-details-marker, .receipts summary::-webkit-details-marker { display: none; }
.mlist summary { color: var(--gold); font-size: 14px; margin-top: 6px; } .receipts > summary { min-height: 28px; } .receipts .chev, .mlist .chev { color: var(--dim); transition: transform .2s; }
.receipts[open] > summary .chev, .receipts .older[open] > summary .chev, .mlist[open] > summary .chev { transform: rotate(90deg); }
.receipts[open] > summary { margin-bottom: 6px; } .receipts .older { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; } .receipts .older > summary { color: var(--dim); }
.payrow { gap: 8px; align-items: center; } .payrow > span { white-space: nowrap; }
.paywith { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 13.5px; color: var(--dim); } .paywith b { color: inherit; filter: brightness(1.3); } .paywith[hidden] { display: none; }
/* stars & the Flight Log (Kevin 2026-10-25, docs/27): the star art is app/shared/stars.js (holographic = iridescent sapphire / amethyst / emerald with
   a gold filigree edge; gold; silver) — the holographic one slowly shifts its colours, like a foil sticker */
.dstar { display: inline-block; vertical-align: middle; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.dstar.holo { animation: holoshift 7s linear infinite; filter: drop-shadow(0 0 6px rgba(127,243,255,.35)) drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.dstar.gold { filter: drop-shadow(0 0 5px rgba(230,200,102,.35)) drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
@keyframes holoshift { 0% { filter: hue-rotate(0deg) drop-shadow(0 0 6px rgba(127,243,255,.35)); } 50% { filter: hue-rotate(30deg) drop-shadow(0 0 8px rgba(181,108,255,.45)); } 100% { filter: hue-rotate(0deg) drop-shadow(0 0 6px rgba(127,243,255,.35)); } }
@media (prefers-reduced-motion: reduce) { .dstar.holo { animation: none; } }
h2 .h2go { margin-left: auto; font-size: 11px; letter-spacing: .12em; text-decoration: none; }
.flwho { display: flex; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; } .flwho .pill { cursor: pointer; font: inherit; font-size: 14px; padding: 6px 14px; background: none; color: var(--sub); }
.flwho .pill.on, .starwhy .pill.on { color: #fff; border-color: var(--gold2); background: rgba(142,36,201,.45); }
.flsum { display: flex; gap: 10px; align-items: stretch; } .flstat { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.flstat b { font-size: 26px; line-height: 1.1; color: var(--gold); } .flstat > span { font-size: 12px; color: var(--sub); line-height: 1.25; }
.flstars { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 2px; }   /* the three tiers stacked, stoplight style (Kevin 2026-10-26) */
.flstars > span[title] { display: inline-flex; align-items: center; gap: 4px; line-height: 1; } .flstars i { font-style: normal; font-weight: 700; font-size: 15px; min-width: 1.2em; text-align: left; } .flstars > span:last-child { flex-basis: auto; margin-top: 2px; }
.fllist { padding: 4px 14px; } .flrow { display: flex; gap: 12px; align-items: center; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.flrow:last-child { border-bottom: 0; } .flrow .sp { display: flex; flex-direction: column; min-width: 0; } .flrow .sub { font-size: 13px; } .fld { flex: none; font-size: 12px; color: var(--dim); }
.flico { flex: none; width: 34px; display: inline-flex; justify-content: center; } .flemo { font-size: 20px; line-height: 1; }
.flrow.fl-class { padding: 7px 0; } .flrow.fl-class b { font-weight: 500; font-size: 15px; } .flrow.fl-class .flemo { font-size: 15px; opacity: .7; }
.flthumb { flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0b0b14; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; } .flthumb img { width: 100%; height: 100%; object-fit: cover; }   /* a photo / clip on a star or skill step (docs/27) */
.flrow.fl-note .flnote { font-style: normal; }
.flrow.fl-star b, .flrow.fl-mile b, .flrow.fl-learned b { color: var(--gold); }
.flnote { font-size: 13.5px; color: var(--ink); font-style: italic; margin-top: 2px; } .flnote.big { font-size: 16px; margin: 6px 0 0; }
.starbig .stararta { display: flex; justify-content: center; margin: 4px 0 8px; } .starbig h3 { margin: 6px 0 2px; }
.stargive .starkinds { display: flex; gap: 8px; } .starkind { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--sub); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.starkind.on { border-color: var(--gold); color: #fff; background: rgba(142,36,201,.35); box-shadow: 0 0 0 2px rgba(230,200,102,.25); }
.starbtn { width: 44px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; padding: 0; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); } .starbtn:active { transform: scale(.95); }   /* a roster row: give a star for this class (docs/27) */
.starhere { display: inline-flex; align-items: center; gap: 1px; vertical-align: middle; } .starhere small { font-size: 11px; color: var(--sub); margin-left: 2px; }
.starwhy { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .starwhy .pill { cursor: pointer; font: inherit; font-size: 13.5px; padding: 6px 11px; background: none; color: var(--sub); }
/* Communications (docs/27): emails and mobiles as rows; each opt-in an Off · On pill (grey / green — SPEC Hold / Live toggles) */
.commlist { padding: 4px 14px; } .commrow { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.commrow:last-child { border-bottom: 0; } .commrow .sp { display: flex; flex-direction: column; min-width: 0; } .commrow b { overflow-wrap: anywhere; } .commrow .sub { font-size: 13px; } .commrow .chev { color: var(--dim); font-size: 20px; }
.commrow .cmi { flex: none; width: 26px; display: inline-flex; justify-content: center; color: var(--gold); font-size: 20px; } .commrow.add b { color: var(--gold); font-weight: 600; }
.cpt { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 4px 0; color: var(--dim); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; flex: none; }
.cpt i { position: relative; width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.16); transition: background .2s; }
.cpt i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
.cpt.on i { background: #0B9A66; }   /* the brand emerald, as the Gym's green pill (Kevin 2026-10-28) */ .cpt.on i::after { left: 21px; } .cpt .a { color: var(--ink); }
/* no zoom when a field is tapped (Kevin 2026-10-25: "When I clicked to edit fields, it zoomed in, and that messes with the overall framing"): iOS Safari zooms
   into any field under 16px — every field in the Members app is 16px (sign-in, join, profile, care, checkout, kids…). Pinch-zoom stays on (accessibility). */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }
.flico { width: 38px; }
.starpick { display: flex; gap: 14px; align-items: center; margin-top: 12px; } .starprev { flex: none; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; } .starprev:active { transform: scale(.94); }
/* Hold (Kevin 2026-10-25): two choices — Open-ended · Until a date — then Activate Hold */
.hopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 8px; }
.hopt { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.hopt.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; background: linear-gradient(160deg, rgba(155,43,216,.18), rgba(35,18,54,.9)); }
.hopt .sub { font-size: 12px; }
.f[hidden] { display: none; }
/* Care & emergency — who it's for (Kevin 2026-10-25) */
.carefor { margin: 10px 0 4px; }
/* a held membership's detail (Kevin 2026-10-25: "On Hold and Resume now have some alignment issues, and Resume Now should be a purple action item"):
   the On hold line on its own, left with the text, then the purple Resume now where Hold · Change card · Cancel sit */
/* Kevin 2026-10-25: "a little space between the buttons and the tiles below them … too left justified, like they're aligned with headers not the tiles":
   inset to the cards' content edge (16px padding + 1px border) and 18px before the next card */
.mdecide { margin-bottom: 18px; padding: 0 17px; } .mdecide .mheld { display: block; font-size: 14px; line-height: 1.4; color: #F5A623; font-weight: 600; margin: 0; text-align: left; }
/* Class Subscriptions (Kevin 2026-10-25 — was Weekly classes): a slim row — ↻ class · day & time · who, then Edit; the Edit sheet changes the day */
.csub { display: flex; align-items: center; gap: 10px; } .csub .sp { min-width: 0; } .csub .sp b { overflow-wrap: anywhere; } .csub > .btn { flex: none; }
.csubpick { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.csubpick label { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 15px; }
.csubpick label.on { border-color: var(--gold2); background: rgba(155,43,216,.14); } .csubpick input { width: 20px; height: 20px; flex: none; margin: 0; } .csubpick .dim { margin-left: auto; font-size: 13px; }
/* With Ana — a friend's classes (Kevin 2026-10-25): rows inside one card; a kid's row keeps the emerald edge, text clear of it */
.friendc .friendrow { padding: 10px 0 10px 12px; border-radius: 10px; gap: 10px; }
.friendc .friendrow .btn { flex: none; white-space: nowrap; }

/* ---------- the checkout's pay box (Kevin 2026-10-25: the card dropdown · Type a new card… · Charge Card + Pay with Cash / Venmo / Zelle) ---------- */
.paybox { margin-top: 14px; padding: 16px; border-radius: var(--r); border: 1px solid rgba(230,200,102,.42); background: linear-gradient(155deg, rgba(142,36,201,.28), rgba(28,72,196,.22) 65%, rgba(35,18,54,.85)); position: relative; }
.paybox::before { content: ''; position: absolute; top: -1px; left: 50%; width: 44px; height: 2px; margin-left: -22px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }   /* the gold gleam */
.payamt { text-align: center; margin-bottom: 4px; }
.payamt b { display: block; font-family: Georgia, 'Times New Roman', serif; font-weight: normal; font-size: 38px; line-height: 1.1; color: var(--gold); margin-top: 4px; letter-spacing: .01em; }
.payamt .sub { font-size: 13px; } .payamt .sub:empty { display: none; }
.payf { margin-top: 12px; } .payf .in { appearance: none; -webkit-appearance: none; background: rgba(21,10,30,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E6C866' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 36px; }
#paycard[hidden], #paysec[hidden], .payalt[hidden] { display: none; }
.payrow { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; margin-top: 12px; }
.payrow .btn { width: 100%; min-height: 50px; padding: 8px 10px; line-height: 1.2; text-align: center; }
.payrow.one { grid-template-columns: 1fr; }
.payrow .payalt { font-size: 14px; }
.claimbox { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(21,10,30,.55); }
.claimbox .pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pillb { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.05); font-weight: 600; font-size: 14px; cursor: pointer; }
.pillb.on { background: rgba(142,36,201,.5); border-color: rgba(200,140,255,.7); color: #fff; }
.claimto { margin: 10px 0 2px; } .claimto b { font-size: 19px; } .claimto .btn { margin-top: 8px; }
.claimbox .btn.block { margin-top: 12px; }
.ncpop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,2,10,.6); backdrop-filter: blur(3px); }
.ncard { width: 100%; max-width: 420px; background: #1F0F30; border: 1px solid var(--gold2); border-radius: 20px; padding: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.ncard .btn.block { margin-top: 14px; }
.ncel { padding-top: 15px; margin-top: 12px; }
/* Today → check in (Kevin 2026-10-25): every class today, a purple Check in <first> per person */
.cirow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cirow .cibtn { flex: 1 1 140px; min-height: 48px; }
.cirow .ciok { font-size: 14px; padding: 8px 12px; background: rgba(16,185,129,.14); }
.cirow .cidone { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; }   /* ✓ checked in + the member's plain Undo to its right (Kevin 2026-10-25) */
.cirow .cidone .ciok { flex: 0 1 auto; min-width: 0; white-space: normal; line-height: 1.35; }
.cirow .ciundo { flex: 0 0 auto; min-height: 36px; }
.pill.busy { color: var(--sub); white-space: nowrap; }   /* Everyone's booked at that time */
.imm + .imm { margin-top: 10px; }
.wkid.famspot { border-color: rgba(230,200,102,.55); }
.wkid.famspot.on { background: rgba(16,185,129,.2); border-color: rgba(52,211,153,.6); border-style: solid; }
/* booking more than one class in the same checkout */
.bldx .sub { margin-top: 4px; } .bldx .row .btn { flex: none; }
.bldmore summary { cursor: pointer; list-style: none; padding: 2px 0; } .bldmore summary::-webkit-details-marker { display: none; }
.bldmore .bldxrow { padding: 10px 0; border-top: 1px solid var(--line); }
.bldxsel span { display: block; }
/* Invite a friend — a quiet row in a class / event's detail (Kevin 2026-10-25: "suggestive, but not obnoxious") */
.invrow { margin: 12px 0; padding: 4px 14px; }
.invrow .line { cursor: pointer; }

/* the pricing by track (docs/22, Kevin 2026-10-25): the drop-in with the new-student first-class price beside it */
.coopt.trk .trkfirst { color: var(--gold); font-size: 14px; margin-top: 2px; }
/* How is this paid? (staff mode — app.js hpaSheet, Kevin 2026-10-26): the preselected option lit purple, one purple confirm */
.hplist { display: grid; gap: 8px; margin-top: 10px; }
.hpopt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 16px; cursor: pointer; }
.hpopt.on { border-color: var(--gold2); background: rgba(142,36,201,.32); box-shadow: 0 0 0 1px rgba(200,140,255,.45) inset; }
.hpopt .pill { font-size: 11px; margin-left: 6px; vertical-align: 1px; }
.hpcomp { margin-top: 12px; padding: 12px; border-radius: 14px; border: 1px solid rgba(230,200,102,.35); background: rgba(230,200,102,.06); }
.hpcomp .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.upbtn { min-height: 0; padding: 2px 10px; font-size: 12px; margin-left: 6px; vertical-align: middle; }
/* today's finished classes on My Schedule — dimmed until midnight; one they took: tap to rate (Kevin 2026-10-26) */
.donecard .kick { margin-bottom: 4px; }
.line.past { opacity: .55; } .line.past.tap { cursor: pointer; } .line.past:hover { opacity: .75; }
.line.past .ratebtn { pointer-events: none; } .line.past .ratedpill { color: var(--gold); border-color: rgba(230,200,102,.45); background: none; letter-spacing: 1px; }
.rtstars { display: flex; gap: 8px; margin: 14px 0 6px; }
.anonwhy { margin: -2px 0 0 28px; font-size: 13px; }
/* the person page's sections (Members app staff, Kevin 2026-10-26): Skills · Give a Star! · Note to … · 🔒 Staff notes — each folds */
.psec { padding: 0; margin-top: 10px; }
.psec > summary { display: flex; align-items: center; gap: 10px; padding: 14px 40px 14px 14px; }
.psec > summary .sp { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.psec > summary b { font-size: 16px; } .psec > summary .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psec .psbody { padding: 0 14px 14px; }
.psec .psbody .card { margin-top: 8px; }
.psec .stargive { margin-top: 0; }
.sklvrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .sklvrow select { width: auto; min-width: 128px; font-size: 16px; }
.fbrow .fbstars { color: var(--gold); letter-spacing: 1px; }
/* How is this paid? confirm (staff mode, Kevin 2026-10-26): what happens, then Add: This class (purple) · Every week — only when the option recurs */
.hpwhat { margin: 14px 0 6px; }
.hpadd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hpadd .btn { flex: 1 1 0; }
.hpadd .sub { flex: 0 0 auto; }
/* Add someone: the whole row is Add (Kevin 2026-10-26) · the Upgrade sheet's radio list (Send Offer / Charge Card) */
.raddrow { cursor: pointer; border-radius: 12px; transition: background .12s; -webkit-tap-highlight-color: transparent; }
.raddrow:hover { background: rgba(142,36,201,.12); }
.raddrow:active { background: rgba(142,36,201,.28); }
.hpopt.uprad { flex-direction: row; align-items: center; gap: 12px; }
.uprad .updot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); }
.uprad.on .updot { border-color: #c88cff; background: radial-gradient(circle, #c88cff 0 5px, transparent 6px); }
.uprad .upprice { text-align: right; white-space: nowrap; line-height: 1.35; }
.upgo { margin-top: 14px; }
.upgo .btn[disabled] { opacity: .45; }
/* Payment methods (Kevin 2026-10-27): the cards as a row of tiles — tap one for its detail; the primary has the gold edge, an inactive one is dimmed */
.ctiles { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.ctile { flex: 0 0 148px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; min-height: 92px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--card2), var(--card)); color: var(--ink); font: inherit; cursor: pointer; }
.ctile .cbrand { font-size: 13px; color: var(--sub); } .ctile b { font-size: 20px; letter-spacing: .04em; } .ctile .clbl { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ctile .ctag { margin-top: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); } .ctile.pri { border-color: var(--gold); } .ctile.off { opacity: .55; } .ctile.off .ctag { color: var(--dim); }

/* an event's theme (Kevin 2026-10-27 — servers/studio/booking.py ART): the art behind its card, its page's band, and a party host's Today card */
.evcard.evart { background: linear-gradient(90deg, rgba(21,10,30,.94) 38%, rgba(21,10,30,.55)), var(--evart) right 30% / cover no-repeat, var(--card); border-color: rgba(230,200,102,.5); }
.evband { height: 170px; margin: 4px 0 12px; border-radius: var(--r); border: 1px solid rgba(230,200,102,.45); background: linear-gradient(180deg, transparent 55%, rgba(21,10,30,.75)), var(--evart) center 22% / cover no-repeat; }
.card.evparty { position: relative; overflow: hidden; padding: 18px 16px; border: 1.5px solid rgba(230,200,102,.7); background: linear-gradient(90deg, rgba(21,10,30,.95) 45%, rgba(21,10,30,.45)), var(--evart) right 25% / cover no-repeat, #1E0F33; box-shadow: inset 0 0 0 4px rgba(230,200,102,.08), 0 10px 28px rgba(0,0,0,.35); }
.card.evparty .kick { color: #E6C866; letter-spacing: .14em; }
.card.evparty .fyt { display: block; font-size: 19px; margin: 2px 0; }

/* ---------- Ivory — the light look (Kevin 2026-10-28: a member asked for a white-screen version for people who have trouble seeing phone text;
   not the default — Settings → App → Look; "retain our premium, high end, rich boutique feel"). Warm ivory paper, deep plum ink, antique gold
   that reads on ivory (≥ 4.5:1 for words), the same amethyst / sapphire; the celebration cards (a party you host, a birthday) stay dark jewels
   on the ivory. Set on <html> before the page draws (index.html), so it never flashes dark. ---------- */
html.light { --bg: #FAF6EF; --card: #FFFFFF; --card2: #F4ECDF; --ink: #22102E; --sub: #4E3D60; --dim: #605070; --gold: #775409; --gold2: #B8901F;
  --am: #7B1FB0; --sa: #1C48C4; --line: rgba(132,95,14,.26); --ok: #0B7A52; --bad: #9E3B3B; color-scheme: light; }
html.light body { background: radial-gradient(ellipse at 50% -12%, #EFE0C6, #F7F0E4 38%, var(--bg) 62%) fixed; }
html.light .kbg { opacity: .16; filter: sepia(.4) saturate(.8); }
html.light .card, html.light .evcard, html.light .ckopt, html.light .hopt { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 6px 18px rgba(80,50,20,.07); }
html.light .btn:not(.pri):not(.dismiss):not(.ghost) { background: #FFFDF8; border-color: rgba(132,95,14,.38); color: var(--ink); }
html.light .btn.ghost { background: none; color: var(--gold); }
html.light .btn.pri, html.light .btn.dismiss { color: #fff; }
html.light .in, html.light .payf .in { background-color: #FFFDF8; color: var(--ink); border-color: rgba(132,95,14,.35); }
html.light .in::placeholder { color: #8C7E9A; }
html.light .next, html.light .refhero { background: linear-gradient(155deg, #F1E3FA, #E4EBFB 60%, #FFFFFF); border-color: rgba(132,95,14,.4); }
html.light .card.fy, html.light .ckopt.on, html.light .hopt.on { background: linear-gradient(160deg, #F3E6FB, #FFFFFF); }
html.light .sheetcard, html.light .sheettop, html.light .cropcard, html.light .ncard { background: #FFFCF6; }
html.light .sheetcard { border-top-color: var(--gold2); box-shadow: 0 -12px 40px rgba(60,30,10,.12); }
html.light .doc, html.light .claimbox, html.light .setupcard .hubrow, html.light .hubwrap .hublater { background: #F7F0E4; border-color: rgba(132,95,14,.2); }
html.light .hubrow, html.light .chip:not(.on), html.light .pillb:not(.on), html.light .day:not(.on) { background: #FFFDF8; }
html.light .toast { background: #22102E; color: #FAF6EF; }
html.light .tabs { background: rgba(250,246,239,.94); border-top-color: rgba(132,95,14,.3); }
html.light .tabs a { color: #6E5F80; } html.light .tabs a.on { color: #7B1FB0; }
html.light .apphead { background: linear-gradient(rgba(250,246,239,.97), rgba(250,246,239,.86)); border-bottom: 1px solid rgba(132,95,14,.18); }
html.light .segtabs { background: #F1E8DA; }
html.light .segtabs button.on, html.light .seg button.on, html.light .chip.on, html.light .pillb.on, html.light .flwho .pill.on, html.light .starwhy .pill.on, html.light .starkind.on,
html.light .skrow.r2 .skdot, html.light .skrow.r3 .skdot { background: #7B1FB0; color: #fff; border-color: #7B1FB0; }   /* a selected thing: solid amethyst, white words (the dark look's see-through purple washes out on ivory) */
html.light .seg { background: #F1E8DA; }
html.light .date { background: rgba(123,31,176,.12); }
html.light .ladate, html.light .lakind { background: rgba(255,252,246,.92); color: var(--ink); }
html.light .campromo.campnew { background: linear-gradient(115deg, #FFFFFF, #F6EEFB) padding-box, conic-gradient(from var(--campang), #2B6CB0, #8B5CF6, #10B981, #C9A84C, #2B6CB0) border-box !important; }
html.light .cliptile.clipnewt { background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, conic-gradient(from var(--campang), #2B6CB0, #8B5CF6, #10B981, #C9A84C, #2B6CB0) border-box; }
html.light .bm-top { color: #845F0E; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) { html.light .bm-top { background: linear-gradient(180deg, #B8901F 0%, #8F6A12 48%, #6E4E0A 100%); -webkit-background-clip: text; background-clip: text; } }
html.light .bm-sub { color: #845F0E; }
/* the dark jewels on ivory: they keep their own dark palette */
html.light .card.bday, html.light .card.evparty, html.light .evcard.evart { --ink: #F5EDFA; --sub: #E2D4EE; --gold: #E6C866; color: #F5EDFA; }
html.light .evcard.evart { background: linear-gradient(90deg, rgba(21,10,30,.94) 38%, rgba(21,10,30,.55)), var(--evart) right 30% / cover no-repeat, #1E0F33; }

/* Larger text (Settings → App → Text size): the screen's content drawn a size up — the words, the buttons and the spacing together, the way
   the phone's own Larger Text does; the tab bar and the top bar stay as they are. 1.25× in all (Kevin 2026-10-28: "a notch bigger"), less
   whatever the phone already adds — --tz from index.html dpiTextScale() */
html.tl .wrap, html.tl .sheetcard > * { zoom: var(--tz, 1.25); }
html.tl .sheetcard .sheettop { zoom: 1; }
html.tl .chips { flex-wrap: wrap; }
/* Ivory: the Off · On switch keeps a visible track and knob on ivory (Kevin 2026-10-28: "doesn't seem to have a green toggle pill there") */
html.light .cpt i { background: rgba(59,26,82,.22); box-shadow: inset 0 0 0 1px rgba(59,26,82,.12); } html.light .cpt i::after { box-shadow: 0 1px 3px rgba(43,20,60,.35); }
html.light .cpt.on i { background: #0B9A66; box-shadow: none; }   /* the filter chips (All classes · Kids’ classes · For me) all in view, on two lines if they need to */
html.light .day.on, html.light .day.on b { color: #fff; }
/* Ivory: the accent words tuned for the dark look, a shade deeper so they read on ivory (≥ 4.5:1) */
html.light .kidtag { color: #A52A63; } html.light .pill.care { color: #8E2A4F; background: rgba(165,42,99,.1); } html.light .carebox .kick { color: #A52A63; }
html.light .kidchip { color: #075A3B; background: rgba(16,185,129,.14); }
html.light .howlogo, html.light .howarrow { color: #775409; } html.light .howstep .hnum { background: #E6C866; } html.light .howshot { background: #F4ECDF; border-color: rgba(119,84,9,.25); }
html.light .wnerr, html.light .carebox2.need summary, html.light .linkish.need, html.light .pnote.need, html.light .wltag, html.light .mdecide .mheld { color: #8A5200; }
html.light .day.on span { color: #F3E3A8; }
html.light .fedit { background: #E6C866; color: #1a0d26; box-shadow: 0 0 0 2px #FFFCF6; }

/* comfortable targets for every finger (Kevin 2026-10-28 design pass — the look unchanged, the tap area ≥ 40 px) */
.flwho .pill { min-height: 40px; }
.h2go { position: relative; } .h2go::after { content: ''; position: absolute; inset: -12px -8px; }
.cpt { min-height: 36px; }
.kidchip { font-size: 12px; }
/* a waiting primary button often carries the instruction ("Tap who's coming"): keep its words readable — a quiet fill, not a faded button */
.btn.pri:disabled { opacity: 1; background: rgba(142,36,201,.22); border-color: rgba(230,200,102,.3); color: #D9CBE6; box-shadow: none; }
html.light .btn.pri:disabled { background: #EDE3F4; border-color: rgba(123,31,176,.25); color: #5A3D73; }

/* standing on/off settings are the green pill switch (SPEC → UI conventions: Hold / Live (and Off / On) toggles — Kevin 2026-10-28 "check the green
   pills"): a checkbox drawn as the switch, at the row's right — notifications, share with the family, auto-refill, a favourite's every week */
label.sw { display: flex; align-items: center; gap: 10px; cursor: pointer; }
label.sw input { -webkit-appearance: none; appearance: none; order: 2; margin: 0 0 0 auto; flex: none; position: relative; width: 40px !important; height: 22px !important; border-radius: 11px; background: rgba(255,255,255,.16); border: 0; cursor: pointer; transition: background .2s; }
label.sw input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; }
label.sw input:checked { background: #0B9A66; } label.sw input:checked::before { left: 21px; } label.sw input:disabled { opacity: .45; cursor: default; }
label.sw input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html.light label.sw input { background: rgba(59,26,82,.22); box-shadow: inset 0 0 0 1px rgba(59,26,82,.12); } html.light label.sw input::before { box-shadow: 0 1px 3px rgba(43,20,60,.35); }
html.light label.sw input:checked { background: #0B9A66; box-shadow: none; }
.fav label.sw.favauto input { transform: scale(.85); transform-origin: right center; }

/* Ivory's event art (Kevin 2026-10-28): the light twin of the theme art (party-kids-ivory.jpg …) behind an ivory wash — dark plum words, the
   picture clear on the right; art without a twin stays the dark jewel card. The birthday-pass card turns ivory with soft jewel glows. */
html.light .evcard.evart[style*="--evart-l"], html.light .card.evparty[style*="--evart-l"] { --ink: #22102E; --sub: #4E3D60; --gold: #775409; color: #22102E; border-color: rgba(184,144,31,.55); }
/* the picture on the right ~62% of the card (its cake / hoop clear of the words), faded in from the ivory on the left */
html.light .evcard.evart[style*="--evart-l"] { background: linear-gradient(90deg, #FFFCF6 38%, rgba(255,252,246,.55) 55%, rgba(255,252,246,0) 74%), var(--evart-l) right 0 top 30% / 62% auto no-repeat, #FFFCF6; }
html.light .card.evparty[style*="--evart-l"] { background: linear-gradient(90deg, #FFFCF6 38%, rgba(255,252,246,.55) 55%, rgba(255,252,246,0) 74%), var(--evart-l) right 0 top 33% / 58% auto no-repeat, #FFFCF6; box-shadow: inset 0 0 0 4px rgba(184,144,31,.1), 0 8px 22px rgba(80,50,20,.12); }
html.light .card.evparty[style*="--evart-l"] .kick { color: #775409; }
/* each line of words on its own soft ivory backing where it meets the picture (SPEC: text over art — per-line, never a band) */
html.light .card.evparty[style*="--evart-l"] > .kick, html.light .card.evparty[style*="--evart-l"] > .fyt, html.light .card.evparty[style*="--evart-l"] > .sub,
html.light .evcard.evart[style*="--evart-l"] b, html.light .evcard.evart[style*="--evart-l"] .sub { width: fit-content; max-width: 68%; background: rgba(255,252,246,.86); box-shadow: 0 0 0 4px rgba(255,252,246,.86); border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html.light .card.evparty[style*="--evart-l"] > .kick { max-width: none; }
html.light .evband[style*="--evart-l"] { background: linear-gradient(180deg, transparent 60%, rgba(250,246,239,.6)), var(--evart-l) center 18% / cover no-repeat; border-color: rgba(184,144,31,.45); }
html.light .card.bday { --ink: #22102E; --sub: #4E3D60; --gold: #775409; color: #22102E; border-color: rgba(184,144,31,.6);
  background: radial-gradient(120% 140% at 0% 0%, rgba(155,43,216,.14), transparent 60%), radial-gradient(120% 140% at 100% 100%, rgba(28,72,196,.12), transparent 60%), #FFFCF6; box-shadow: inset 0 0 0 4px rgba(184,144,31,.08), 0 8px 22px rgba(80,50,20,.1); }
html.light .card.bday .kick { color: #775409; }
html.light .bdcake { filter: drop-shadow(0 4px 8px rgba(80,50,20,.25)); }

/* ---------- the Coach + Scheduling Lead (docs/30): the floating +, the whole schedule, the session editor, the month calendar ---------- */
.ldadd { position: fixed; z-index: 11; top: calc(max(8px, env(safe-area-inset-top) - 6px) + 72px); right: max(16px, calc(50vw - 320px + 16px)); width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid var(--gold2); background: linear-gradient(160deg, #9B2BD8, var(--am) 50%, #6A1A99); color: #fff; font-size: 34px; line-height: 1; font-weight: 300; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 3px; box-shadow: 0 8px 22px rgba(60,10,90,.45), 0 0 0 4px rgba(21,10,30,.55); }
.ldadd:active { transform: scale(.95); }
html.desk .ldadd { top: 96px; right: max(28px, calc(50vw - 560px + 28px)); }
.wrap-classes .top { padding-right: 70px; }
.ldgo { flex: none; font-size: 13px; color: var(--gold); font-weight: 600; }
.flbl { font-size: 13px; color: var(--sub); margin: 14px 0 6px; }
.ld2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ld2 label.f { min-width: 0; }
.lddates { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; } .lddates .chip { min-height: 36px; }
.ldteach { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 10px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
.ldteach .chk { padding: 7px 0; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.ldcancel { margin-top: 20px; border-color: rgba(230,200,102,.45); }
.ldgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ldgrid em { font-style: normal; font-size: 11px; color: var(--dim); text-align: center; }
.ldcd { aspect-ratio: 1; min-height: 40px; min-width: 0; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; cursor: pointer; font: inherit; }
.ldcd b { font-size: 15px; font-weight: 600; } .ldcd i { font-style: normal; font-size: 10px; line-height: 8px; height: 8px; color: var(--gold); letter-spacing: 1px; }
.ldcd:disabled { opacity: .3; cursor: default; } .ldcd.today { border-color: var(--gold2); }
.ldcd.closed { background: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 5px, rgba(201,162,39,.1) 5px 10px); }
.ldcd.on { background: linear-gradient(160deg, #9B2BD8, var(--am) 60%, #6A1A99); border-color: var(--gold2); color: #fff; } .ldcd.on i { color: #F7E7A8; }
h3.ldday { margin: 14px 0 4px; }
.ldline .ldspan { width: 104px; flex: none; font-size: 13.5px; white-space: nowrap; } .ldline .sp { min-width: 0; overflow-wrap: anywhere; }
.ldline.off { opacity: .55; } .ldline.clash { box-shadow: inset 3px 0 0 var(--gold); padding-left: 10px; }
.ldaf { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.ldprice { display: flex; align-items: center; gap: 8px; margin-top: 0; } .ldprice span { font-size: 18px; color: var(--ink); } .ldprice .in { margin-top: 0; max-width: 160px; }
.ldaf label.sw { margin-top: 14px; }
html.light .ldadd { box-shadow: 0 8px 20px rgba(80,30,110,.28), 0 0 0 4px rgba(250,246,239,.85); }
html.light .ldcd { background: #fff; } html.light .ldcd.on { background: var(--am); color: #fff; } html.light .ldcd.on i { color: #FFE9A8; }
html.light .ldcd.closed { background: repeating-linear-gradient(135deg, #fff 0 5px, rgba(132,95,14,.1) 5px 10px); }
html.light html.tl .ldcd b { font-size: 14px; } html.tl .ldcd { min-height: 34px; } html.tl .ldgrid { gap: 3px; } html.tl .ldline .ldspan { width: 96px; white-space: normal; }
.ldnote { margin-top: 12px; border-color: rgba(230,200,102,.5); } .ldrnote { font-style: italic; }
.ldinv { margin-top: 12px; } .ldinvb { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .ldinvb .btn { flex: 1 1 auto; text-decoration: none; }
.ldqr { margin: 12px auto 0; width: max-content; max-width: 100%; padding: 10px; background: #fff; border-radius: 12px; } .ldqr svg { display: block; width: 220px; height: 220px; max-width: 100%; }

/* a class they teach, on the Classes list (docs/30) · an invitation on Today */
.cls .tchm { color: var(--gold); font-weight: 600; }
.card.invtodo { border-color: rgba(230,200,102,.5); } .card.invtodo .kick { color: var(--gold); }

/* My Students (Staff → Schedule, Kevin 2026-10-28) */
.stubtn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;margin-bottom:12px;padding:16px 16px 16px 18px}
.stubtn .sp{min-width:0}
.stubtn .sub{margin-top:2px;line-height:1.35}
.stubtn .stuchev{flex:none;opacity:.75}   /* Kevin 2026-10-28: My Students sat on the card's edge — inset like Archive */

/* an event's photo behind its whole card (Kevin 2026-10-28): Events, My Schedule, the Today to-do — dark on the left where the words are */
.evcard[data-x] { cursor: pointer; }
.evcard.evph, html.light .evcard.evph { background: linear-gradient(90deg, rgba(21,10,30,.86) 25%, rgba(21,10,30,.38)), var(--evart) 50% var(--evy, 50%) / cover no-repeat, #1E0F33; }
.evline.evart { border-radius: var(--r); padding: 12px; margin: 6px 0; border: 1px solid rgba(230,200,102,.5); background: linear-gradient(90deg, rgba(21,10,30,.92) 38%, rgba(21,10,30,.5)), var(--evart) right 30% / cover no-repeat, #1E0F33; --ink: #F5EDFA; --sub: #E2D4EE; --gold: #E6C866; color: #F5EDFA; }
.evline.evph { background: linear-gradient(90deg, rgba(21,10,30,.86) 25%, rgba(21,10,30,.38)), var(--evart) 50% var(--evy, 50%) / cover no-repeat, #1E0F33; }
.evline.evart .sub, .evcard.evph .m { color: #E2D4EE; }
html.light .evcard.evph { --ink: #F5EDFA; --sub: #E2D4EE; --gold: #E6C866; color: #F5EDFA; border-color: rgba(184,144,31,.55); }
/* a show's booking (Kevin 2026-10-28): Performing · Watching side by side */
.perfcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.perfcols > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
/* medical beside the care notes (Kevin 2026-10-28): sapphire, so it reads as its own thing */
.carebox.medbox { border-color: rgba(120,170,255,.3); border-left-color: #7FA8FF; } .carebox.medbox .kick { color: #9DBBFF; }
html.light .carebox.medbox .kick { color: #2B4FA8; }
.mkrow{align-items:center;gap:10px}
.mkstep{gap:6px;align-items:center;flex:none}
.mkstep .num{min-width:1.4em;text-align:center}
.fav{position:relative}
.fav > b{padding-right:30px}
.favstar{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(230,200,102,.55);background:rgba(230,200,102,.12);color:var(--gold);font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.favstar:active{transform:scale(.92)}
/* Emergency & Medical (Kevin 2026-10-28): one garnet box — the steps, then medical for the EMT; Care notes a rose fold under it */
.emerbox { margin-top: 12px; padding: 12px 14px 10px; border-radius: 14px; border: 1px solid rgba(232,104,124,.45); border-left: 3px solid #E8687C; background: linear-gradient(180deg, rgba(190,48,72,.16), rgba(190,48,72,.06)); }
.emerbox .emerh { font-weight: 800; font-size: 16px; color: #FFA3B1; }
.emerbox .emsub { margin: 2px 0 2px; }
.emerbox ol { padding: 0 0 4px 20px; }
.emerbox .medinfo { margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(232,104,124,.3); }
.emerbox .medinfo .kick { color: #FFA3B1; }
html.light .emerbox { border-color: rgba(158,42,63,.35); border-left-color: #9E2A3F; background: rgba(158,42,63,.07); }
html.light .emerbox .emerh, html.light .emerbox .medinfo .kick { color: #8E2238; }
.carefold { border-color: rgba(255,160,190,.35); border-left: 3px solid #FFB3C8; }
.carefold summary b, .carefold .kick { color: #FFB3C8; }
.careheart { vertical-align: -2px; margin-right: 2px; }
html.light .carefold summary b, html.light .carefold .kick { color: #A52A63; }
.progk { margin: 4px 0 8px; } .progk ~ .progk { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.mkm { padding: 10px 0; border-bottom: 1px solid var(--line); } .mkm:last-child { border-bottom: 0; }
.mkm .mkbtn { margin-top: 8px; }
.mkm .mkrow { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--card2); }
.mkm > b { display: block; }