/* LWF-CSC — Courses as a phone app (course-app.js). Everything is scoped to html.capp, which is set only on phones (≤ 720px)
   for an approved member inside a course. Site tokens only (surface, line, text, --invert, --blue, --red); flat, no gradients. */
#capp-nav,.capp-back,.capp-title{display:none}

/* ===== the page: one view at a time ===== */
html.capp #caMain > [data-capp-view]{display:none}
html.capp[data-capp="home"] #caMain > [data-capp-view="home"],
html.capp[data-capp="acts"] #caMain > [data-capp-view="acts"],
html.capp[data-capp="more"] #caMain > [data-capp-view="more"],
html.capp[data-capp="quiz"] #caMain > [data-capp-view="quiz"],
html.capp[data-capp="progress"] #caMain > [data-capp-view="progress"],
html.capp[data-capp="cert"] #caMain > [data-capp-view="cert"]{display:grid;gap:12px;align-content:start}
html.capp main > .ph,html.capp #caHead,html.capp #caMain .ca-jump,html.capp #caMain .ca-launch,html.capp #ca-sched,html.capp .ftr,html.capp .bnav{display:none!important}
html.capp .ca-sec{margin-top:0}
html.capp .ca-sec > h2{display:none}
html.capp #caMain{padding-top:16px}

/* ===== app bar: the site header, trimmed ===== */
html.capp .hdr .nav,html.capp .hdr .right > :not(.hdr-bell-w){display:none!important}
html.capp .hdr .brand > div{display:none}
html.capp .hdr .wrap{gap:12px}
html.capp .capp-title{display:block;flex:1;min-width:0}
html.capp .capp-title b{display:block;font-size:16px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.capp .capp-title small{display:block;color:var(--text-3);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.capp:not([data-capp="home"]) .hdr .brand{display:none}
html.capp:not([data-capp="home"]) .capp-back{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text);flex:none}

/* ===== bottom bar: fixed, full width, like the site's phone tab bar ===== */
html.capp #capp-nav{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;padding:0 0 env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line)}
html.capp #capp-nav .nt{position:relative;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-3);font-size:11px;font-weight:500;text-decoration:none}
html.capp #capp-nav .nt.on{color:var(--text)}
html.capp #capp-nav .nt.on svg{stroke-width:2.4}
html.capp #capp-nav .nt.on span{font-weight:600}
html.capp #capp-nav .pt{position:absolute;top:6px;left:calc(50% + 5px);width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 2px var(--surface)}
html.capp #capp-nav .pt[hidden]{display:none}
html.capp body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}

/* ===== shared pieces ===== */
.capp-sh{display:flex;align-items:center;justify-content:space-between;margin:6px 0 -2px}
.capp-sh b{font-size:17px}
.capp-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:14px}
.capp-ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.capp-ch b{font-size:17px}
.capp-cb{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.capp-rw{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);background:var(--surface);border-radius:16px;color:var(--text);text-decoration:none}
.capp-rw .lead{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--link);font-weight:700;flex:none}
.capp-rw .tx{flex:1;min-width:0}.capp-rw b{display:block;font-size:15px;line-height:1.3}
.capp-meta{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:3px;color:var(--text-2);font-size:12.5px}
.capp-meta span{display:inline-flex;align-items:center;gap:4px}.capp-meta svg{color:var(--text-3)}
.capp-rw .go{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;border:1px solid var(--line);color:var(--text-2)}
.capp-rw .go.pri{background:var(--invert);border-color:var(--invert);color:var(--on-invert)}
.capp-rw .go.red{background:var(--red);border-color:var(--red);color:var(--on-invert)}
.capp-rw .go.ok{border-color:color-mix(in srgb,#16A34A 55%,var(--line));color:#16A34A}
.capp-rw .go.am{border-color:color-mix(in srgb,#F59E0B 55%,var(--line));color:var(--amber)}
.capp-rw .go.mu{opacity:.5}
[data-theme="dark"] .capp-rw .go.ok{color:#4ADE80}
.capp-rw.dim{opacity:.7}
.capp-rw.lock{opacity:.6}
.capp-rw.live{border-color:color-mix(in srgb,var(--red) 55%,var(--line));background:color-mix(in srgb,var(--red) 7%,var(--surface))}
.capp-rw.live .lead{background:var(--red);color:var(--on-invert)}
.capp-tag{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border-radius:999px;background:#DC2626;color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.capp-join{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:10px;background:var(--invert);color:var(--on-invert);font-weight:700;font-size:15px;text-decoration:none}

/* ===== Home: hero (countdown / live) + class week ===== */
.capp-hero.cd-host{margin:0}
.capp-hero .cd{padding:14px;border-radius:16px}
.capp-hero .cd-next,.capp-hero .cd-before{background:var(--surface);border:1px solid var(--line)}
.capp-hero .cd-live{gap:12px}
.capp-hero .cd-join{width:100%;min-height:48px;border-radius:10px;font-size:16px}
.capp-hero .cd-u{flex:1;min-width:0;padding:10px 4px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line)}
.capp-hero .cd-u b{font-size:26px}
.capp-hero .cd-t{width:100%}
.capp-wk{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;color:inherit;text-decoration:none}
.capp-dt{position:relative;display:grid;justify-items:center;gap:3px;padding:12px 0;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.capp-dt small{font-size:12px;color:var(--text-3);font-weight:600}.capp-dt b{font-size:20px}
.capp-dt .bd{position:absolute;top:-6px;right:-4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--surface);box-sizing:content-box;color:#fff}
.capp-dt.j{background:color-mix(in srgb,#16A34A 16%,var(--surface));border-color:color-mix(in srgb,#16A34A 55%,var(--line))}.capp-dt.j .bd{background:#16A34A}
.capp-dt.x{background:color-mix(in srgb,var(--red) 14%,var(--surface));border-color:color-mix(in srgb,var(--red) 55%,var(--line))}.capp-dt.x .bd{background:var(--red)}
.capp-dt.h{background:color-mix(in srgb,#F59E0B 15%,var(--surface));border-color:color-mix(in srgb,#F59E0B 55%,var(--line))}.capp-dt.h .bd{background:#F59E0B}
.capp-dt.on{background:var(--blue);border-color:var(--blue);color:#fff}.capp-dt.on small{color:#DBEAFE}
.ca-none.cn{margin:0}

/* the existing sections, inside the app */
html.capp #caQuizBox .ca-card,html.capp #caOverallResult .ca-card,html.capp #caCert .ca-card{border-radius:16px}
@media (prefers-reduced-motion:reduce){ html.capp #capp-nav .nt{transition:none} }
.capp-rw .capp-join.cd-join{width:auto;min-height:44px;padding:0 18px;border-radius:10px;font-size:15px;gap:0}
.capp-done{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid color-mix(in srgb,#16A34A 45%,var(--line));background:color-mix(in srgb,#16A34A 8%,var(--surface));border-radius:16px}
.capp-done .lead{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#16A34A;color:#fff;flex:none}
.capp-done b{display:block;font-size:16px}.capp-done small{display:block;margin-top:2px;color:var(--text-2);font-size:13px;line-height:1.4}