/* ============================================================
   The start page's pieces (assets/home.js), on the website and in the apps: the class cards, the class
   hero (next exam, readiness, the next lesson), Today across all classes, study tools, the path, and
   exam week. Big Sky rules: class colours on the hero and path, gold for XP, pine for mastered, coral
   for exams; everything pressable sinks onto its lip.
   ============================================================ */
/* ---------- the start page (shared with the website) ---------- */
.ah { max-width: 640px; margin: 0 auto; padding: 12px 16px 28px; }
.ah-banners:not(:empty) { margin-bottom: 14px; }
.ah-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.ah .ah-sec-h h2 { margin: 0; font: 800 21px/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink); }
.ah-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font: 700 14.5px/1 var(--font-body); color: var(--accent-deep); text-decoration: none; white-space: nowrap; }
.ah-count { font: 700 14px/1 var(--font-body); color: var(--muted); }
.ah-hint { margin: -4px 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.ah-quiet { margin: 4px 0 8px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.ah-bar { display: block; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ah-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.ah-bar.gold i { background: var(--sun, #FFC629); }
.ah-bar.pine i { background: var(--pine); }

/* Today, across every class (after the class you picked) */
.ah-today { margin-top: 24px; padding: 6px 16px 8px; border: 2px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: 0 4px 0 var(--lip); }
.ah-today .ah-sec-h { margin: 0; }
.ah-goal { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); }
.ah-goal > span:first-child { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ah-goal svg { color: var(--sun-deep, #E0A800); }
.ah-goal b { font: 800 16px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ah-list { display: flex; flex-direction: column; }
.ah-item { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 0; border-top: 2px solid var(--border); color: var(--ink); text-decoration: none; }
.ah-item:active { opacity: .7; }
.ah-ic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-deep); }
.ah-item.coral .ah-ic { background: var(--coral-soft); color: var(--coral-deep); }
.ah-item.gold .ah-ic { background: var(--gold-soft); color: var(--gold); }
.ah-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ah-item-t b { font: 700 15.5px/1.3 var(--font-body); }
.ah-item-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.ah-item > svg { flex: none; color: var(--muted); }
.ah-end { flex: none; font: 700 13px/1 var(--font-body); color: var(--muted); }
.ah-item.coral .ah-end { color: var(--coral-deep); }
.ah-more-row { display: flex; align-items: center; gap: 4px; min-height: 46px; border-top: 2px solid var(--border); color: var(--accent-deep); font: 700 14px/1 var(--font-body); text-decoration: none; }

/* your classes */
.ah-row { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 14px; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: none; }
.ah-row::-webkit-scrollbar { display: none; }
.ah-card { position: relative; flex: 0 0 132px; min-height: 118px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 10px 12px 12px; border: 0; border-radius: 20px; background: var(--cc, var(--accent)); color: var(--cc-ink, #fff); text-align: left; scroll-snap-align: start; box-shadow: 0 5px 0 var(--cc-deep, var(--accent-deep)); transition: transform .08s ease-out, box-shadow .08s ease-out; overflow: hidden; }
.ah-card:active { transform: translateY(5px); box-shadow: none; }
.ah-card.on { box-shadow: 0 5px 0 var(--cc-deep, var(--accent-deep)), 0 0 0 3px var(--bg), 0 0 0 6px var(--cc, var(--accent)); }
.ah-card.on:active { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--cc, var(--accent)); }
.ah-art { position: absolute; top: 8px; right: 8px; opacity: .95; }
.ah-code { font: 800 20px/1.05 var(--font-display); letter-spacing: -.01em; }
.ah-exam { font: 700 12.5px/1.25 var(--font-body); opacity: .95; }
.ah-cbar { display: block; height: 6px; margin-top: 4px; border-radius: 999px; background: color-mix(in srgb, var(--cc-ink, #fff) 28%, transparent); overflow: hidden; }
.ah-cbar i, .ap-ubar i { display: block; height: 100%; border-radius: inherit; background: var(--cc-ink, #fff); }
.ah-add { align-items: center; justify-content: center; text-align: center; background: var(--surface); color: var(--muted); border: 2px dashed var(--border-strong); box-shadow: none; }
.ah-add:active { transform: none; background: var(--surface-2); }

/* the class you picked: where it is, its exam, the next lesson */
.ah-main { margin-top: 4px; }
.ah-hero { padding: 14px 16px 16px; border: 2px solid var(--border); border-radius: 24px; background: var(--surface); box-shadow: 0 4px 0 var(--lip); }
.ah-hero-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ah .ah-hero-h h2 { margin: 0; font: 800 24px/1.12 var(--font-display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.ah-hero-h p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.ah-hero-h .ah-link { min-height: 34px; }
.ah-ex { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border-radius: 18px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
.ah-ex:active { opacity: .8; }
.ah-ex > svg { flex: none; color: var(--muted); }
.ah-days { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 16px; background: var(--coral); color: #fff; box-shadow: 0 4px 0 var(--coral-deep); }
.ah-days b { font: 800 27px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.ah-days b.sm { padding: 0 4px; font-size: 13.5px; line-height: 1.1; text-align: center; }
.ah-days small { font: 700 11.5px/1.2 var(--font-body); }
.ah-ex-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ah-ex-t b { font: 800 16px/1.25 var(--font-display); }
.ah-ex-t small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.ah-ready { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
.ah-ready em { font: 700 12.5px/1.2 var(--font-body); font-style: normal; color: var(--ink-2); }
.ah-go { display: flex; align-items: center; gap: 14px; min-height: 70px; margin-top: 14px; padding: 10px 16px 10px 12px; border-radius: 20px; background: var(--cc, var(--accent)); color: var(--cc-ink, #fff); text-decoration: none; box-shadow: 0 6px 0 var(--cc-deep, var(--accent-deep)); transition: transform .08s ease-out, box-shadow .08s ease-out; }
.ah-go:active { transform: translateY(6px); box-shadow: none; }
.ah-go-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--cc-ink, #fff) 20%, transparent); }
.ah-go-t { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ah-go-t small { font: 700 13px/1.2 var(--font-body); opacity: .92; }
.ah-go-t b { font: 800 19px/1.2 var(--font-display); }
.ah-mast { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin: 16px 2px 0; font: 700 13px/1 var(--font-body); color: var(--muted); }

/* its tools */
.ah-tools { margin-top: 24px; }
.ah-tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ah-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 86px; padding: 10px 4px; border: 2px solid var(--border); border-radius: 18px; background: var(--surface); color: var(--ink); font: 700 12.5px/1.2 var(--font-body); text-align: center; text-decoration: none; box-shadow: 0 4px 0 var(--lip); transition: transform .08s ease-out, box-shadow .08s ease-out; }
.ah-tool:active { transform: translateY(4px); box-shadow: none; }
.ah-tool-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cc-soft, var(--accent-soft)); color: var(--cc-deep, var(--accent-deep)); }

/* its path: every lesson named, the next one marked */
.ah-pathsec { margin-top: 28px; }
.ap-unit + .ap-unit { margin-top: 20px; }
.ap-banner { position: sticky; z-index: 8; top: calc(env(safe-area-inset-top) + var(--ab-h, 0px) + 8px); display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 18px; border-radius: 20px; background: var(--cc, var(--accent)); color: var(--cc-ink, #fff); box-shadow: 0 5px 0 var(--cc-deep, var(--accent-deep)); }
.ap-banner-txt { flex: 1; min-width: 0; }
.ah .ap-banner h3 { margin: 0; color: inherit; font: 800 20px/1.15 var(--font-display); letter-spacing: -.01em; }
.ap-banner p { margin: 3px 0 0; font: 600 13.5px/1.35 var(--font-body); opacity: .92; }
.ap-ubar { display: block; height: 6px; margin-top: 9px; border-radius: 999px; background: color-mix(in srgb, var(--cc-ink, #fff) 28%, transparent); overflow: hidden; }
.ap-guide { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 58px; height: 58px; border-radius: 14px; border: 2px solid color-mix(in srgb, var(--cc-ink, #fff) 40%, transparent); color: inherit; font: 700 11.5px/1 var(--font-body); text-decoration: none; }
.ap-guide:active { background: color-mix(in srgb, var(--cc-ink, #fff) 16%, transparent); }
.ap-nodes { list-style: none; margin: 0; padding: 62px 0 10px; display: flex; flex-direction: column; gap: 14px; }
.ap-li { position: relative; }
.ap-li.current:not(:first-child) { margin-top: 40px; }   /* room for the Start bubble */
.ap-li.open { z-index: 7; }   /* the open lesson's card sits above the lessons after it */
.ap-row { position: relative; display: block; width: 100%; height: 88px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ap-node { position: absolute; top: 4px; left: calc(50% + var(--x) - 38px); width: 76px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: var(--cc, var(--accent)); color: var(--cc-ink, #fff); box-shadow: 0 8px 0 var(--cc-deep, var(--accent-deep)); transition: transform .08s ease-out, box-shadow .08s ease-out; }
.ap-row:active .ap-node { transform: translateY(8px); box-shadow: 0 0 0 var(--cc-deep, var(--accent-deep)); }
.ap-row:focus-visible { outline: none; }
.ap-row:focus-visible .ap-node { outline: 3px solid var(--accent); outline-offset: 4px; }
.ap-li.done .ap-node { background: var(--pine); color: #fff; box-shadow: 0 8px 0 var(--pine-deep); }
.ap-li.soon .ap-node { background: var(--surface-3); color: var(--muted); box-shadow: 0 8px 0 var(--border-strong); }
.ap-li.current .ap-node { outline: 6px solid color-mix(in srgb, var(--cc, var(--accent)) 24%, transparent); outline-offset: 5px; }
.ap-label { position: absolute; top: 39px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 3px; }
.ap-li[data-side="r"] .ap-label { left: calc(50% + var(--x) + 52px); right: 0; }
.ap-li[data-side="l"] .ap-label { left: 0; right: calc(50% - var(--x) + 52px); align-items: flex-end; text-align: right; }
.ap-label b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 800 16px/1.2 var(--font-display); color: var(--ink); }
.ap-label small { font: 600 12.5px/1.3 var(--font-body); color: var(--muted); }
.ap-li.current .ap-label small { color: var(--cc-deep, var(--accent-deep)); font-weight: 800; }
.ap-li.done .ap-label small { color: var(--pine-deep); }
.ap-li.soon .ap-label b { color: var(--ink-2); }
.ap-start { position: absolute; z-index: 1; top: -48px; left: calc(50% + var(--x)); padding: 8px 14px; border-radius: 14px; background: var(--surface); border: 2px solid var(--border); color: var(--cc-deep, var(--accent-deep)); font: 800 16px/1 var(--font-display); white-space: nowrap; transform: translateX(-50%); animation: ap-bob 1.6s ease-in-out infinite; pointer-events: none; }
.ap-start::after { content: ""; position: absolute; left: 50%; top: 100%; width: 12px; height: 12px; background: var(--surface); border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); transform: translate(-50%, -6px) rotate(45deg); }
@keyframes ap-bob { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(-50%) translateY(-5px); } }
.ap-bo { position: absolute; z-index: 1; top: 14px; pointer-events: none; }
.ap-li[data-side="r"] .ap-bo { right: calc(50% - var(--x) + 46px); }
.ap-li[data-side="l"] .ap-bo { left: calc(50% + var(--x) + 46px); }
.ap-pop { position: absolute; z-index: 6; top: calc(100% + 6px); left: 50%; width: min(320px, 100%); transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: var(--cc, var(--accent)); color: var(--cc-ink, #fff); text-align: left; box-shadow: 0 18px 40px -18px rgba(20, 33, 61, .45); animation: ab-in .18s ease-out; }
.ap-pop[hidden], .sheet-pick[hidden] { display: none; }
.ap-pop::before { content: ""; position: absolute; bottom: 100%; left: calc(50% + var(--x)); border: 10px solid transparent; border-bottom-color: var(--cc, var(--accent)); transform: translateX(-50%); }
.ap-pop b { font: 800 18px/1.2 var(--font-display); }
.ap-pop > span { font-size: 14px; opacity: .92; }
.ap-pop-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ap-pop-acts .btn { flex: 1 1 auto; justify-content: center; }
.ah .ap-pop .btn.primary { flex-basis: 100%; background: var(--surface); color: var(--cc-deep, var(--accent-deep)); border-color: transparent; box-shadow: 0 4px 0 color-mix(in srgb, var(--cc-deep, #000) 55%, #000); }
.ah .ap-pop .btn:not(.primary) { background: transparent; color: inherit; border: 2px solid color-mix(in srgb, var(--cc-ink, #fff) 45%, transparent); box-shadow: none; }
.ap-li.exam { display: flex; flex-direction: column; align-items: center; margin-top: 10px; }
.ap-exam { width: 84px; height: 76px; display: grid; place-items: center; border-radius: 24px; background: var(--coral); color: #fff; box-shadow: 0 8px 0 var(--coral-deep); text-decoration: none; transition: transform .08s ease-out, box-shadow .08s ease-out; }
.ap-exam:active { transform: translateY(8px); box-shadow: none; }
.ap-li.exam.past .ap-exam { background: var(--pine); box-shadow: 0 8px 0 var(--pine-deep); }
.ap-exam-label { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13.5px; color: var(--muted); text-align: center; }
.ap-exam-label b { font: 800 16px/1.2 var(--font-display); color: var(--ink); }
.ah-loading { display: flex; flex-direction: column; gap: 14px; padding: 6px 0; }
.ah-loading i { height: 132px; border-radius: 24px; background: var(--surface-3); animation: ah-pulse 1.1s ease-in-out infinite alternate; }
.ah-loading i:nth-child(2) { height: 86px; animation-delay: .15s; } .ah-loading i:nth-child(3) { height: 200px; animation-delay: .3s; }
@keyframes ah-pulse { to { opacity: .45; } }
.ah-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 8px; text-align: center; }
.ah .ah-empty h2 { margin: 0; font: 800 22px/1.15 var(--font-display); }
.ah-empty p { margin: 0; color: var(--muted); }


/* ---------- the website's start page: pick a class, then two columns ---------- */
.ah.wh { max-width: none; margin: 0; padding: 0; }
.wh-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wh-tab { min-height: 40px; padding: 0 16px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink); font: 800 14.5px/1 var(--font-display); cursor: pointer; box-shadow: 0 3px 0 var(--lip, var(--border-strong)); transition: transform .08s ease-out, box-shadow .08s ease-out; }
.wh-tab:hover { border-color: var(--cc, var(--accent)); }
.wh-tab:active { transform: translateY(3px); box-shadow: none; }
.wh-tab.on { background: var(--cc, var(--accent)); border-color: var(--cc-deep, var(--accent-deep)); color: var(--cc-ink, #fff); box-shadow: 0 3px 0 var(--cc-deep, var(--accent-deep)); }
.wh-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wh-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.wh-side .ah-today { margin-top: 0; }
.wh-side .ah-tools { margin-top: 20px; }
.wh .ap-banner { position: static; }
.wh .ah-pathsec { margin-top: 24px; }
@media (pointer: fine) { .wh .ah-hero-h .ah-link, .wh .ah-link { min-height: 32px; } }
@media (pointer: coarse) { .wh-tab { min-height: 44px; } }
.wh .ah-whole { margin-top: 8px; }
.wh :is(.ah-item, .ah-tool, .ah-go, .ah-ex):hover { filter: brightness(1.03); }
.wh .ah-item:hover .ah-item-t b, .wh .xw-item:hover .xw-t b { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1000px) {
  .wh-grid { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 24px; }
  .wh-side { position: sticky; top: 16px; }
}

/* ---------- exam week ---------- */
.xw { margin-top: 16px; padding: 16px 16px 10px; border: 2px solid var(--coral, #e5533d); border-radius: 22px; background: var(--surface); box-shadow: 0 4px 0 var(--coral-deep, #9f2d1f); }
.xw-head { display: flex; align-items: center; gap: 14px; }
.xw-days { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 18px; background: var(--coral-deep, #9f2d1f); color: #fff; }
.xw-days b { font: 800 27px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.xw-days small { font: 700 11.5px/1.2 var(--font-body); }
.xw-h { min-width: 0; }
.xw .xw-h h2 { margin: 0; font: 800 20px/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.xw-h p { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.xw-bar { margin: 12px 0 2px; }
.xw .xw-sub { margin: 14px 0 4px; font: 800 15px/1.2 var(--font-display); color: var(--ink); }
.xw-list { display: flex; flex-direction: column; }
.xw-item { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 0; border-top: 2px solid var(--border); color: var(--ink); text-decoration: none; }
.xw-item > svg { flex: none; color: var(--muted); }
.xw-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--coral-soft, #fde8e4); color: var(--coral-deep, #9f2d1f); }
.xw-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xw-t b { font: 700 15px/1.3 var(--font-body); }
.xw-t small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.xw-plan { border-top: 2px solid var(--border); }
.xw-plan summary { display: flex; align-items: center; min-height: 46px; cursor: pointer; font: 700 14.5px/1.2 var(--font-body); color: var(--accent-deep); }
.xw-plan ol { list-style: none; margin: 0 0 6px; padding: 0; }
.xw-plan li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px dashed var(--border); font-size: 14px; line-height: 1.4; }
.xw-plan li b { font-weight: 800; }
.xw-plan li span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xw-plan li a { display: flex; align-items: center; min-height: 28px; color: var(--ink-2); }
.xw-plan .xw-exam-day b { color: var(--ink); }
.xw-plan .xw-exam-day b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--coral, #e5533d); vertical-align: 1px; }
.xw-dash { margin: 0 0 18px; }
@media (min-width: 900px) {
  .xw-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .xw-wide > .xw-head, .xw-wide > .xw-bar { grid-column: 1 / -1; }
  .xw-wide .xw-plan { border-top: 0; }
  .xw-wide .xw-plan summary { min-height: 0; margin: 14px 0 4px; color: var(--ink); font: 800 15px/1.2 var(--font-display); pointer-events: none; list-style: none; }
  .xw-wide .xw-plan summary::-webkit-details-marker { display: none; }
  .xw-wide .xw-plan li:first-child { border-top: 2px solid var(--border); }
}
.xw-dash .xw { margin-top: 0; }

@media (prefers-reduced-motion: reduce) { .ah-loading i, .ap-start, .ap-pop, .wh-tab { animation: none; transition: none; } }
html[data-motion="off"] :is(.ah-loading i, .ap-start, .ap-pop, .wh-tab) { animation: none; transition: none; }