/* VooSquare member app: polish pass (Nov 2026). Loaded last in app.html. Same brand, colours, logo and layout; this file
 * only makes the existing pieces consistent:
 *  - one label style: sentence case in the UI font (no monospace all-caps labels as decoration),
 *  - one page gutter (16px on phones) and one card radius per size,
 *  - a docked bottom nav that respects the safe area, 44px tap targets on phones,
 *  - Academy on phones: "Continue" above the fold, large quiz and exam targets,
 *  - readable contrast for muted labels, visible focus, and still motion when reduced motion is on.
 * Nothing here pulses, blinks or ripples. */

/* ---------- labels: sentence case, UI font ---------- */
.navg h5, .sc-k, .mono-k, .h2-date, .sn, .at .stage-l, .at-mp, .rl-g h5, .ic-kick, .ic-price em, .ic-seats-t span:last-child,
.ic-note small, .ap-q label em, .sk, .pay-amt small, .pay-f small, .pay-ins small, .pid-r small, .pal-g, .app-body .kick, .app-body .sample,
.co-k, .co-mk, .sp-bt small, .sp-ex, .lv-cv-k, .lv-date small, .lv-k, .lv-facts dt, .pay-dr small {
  font-family: var(--f-d) !important; text-transform: none !important; letter-spacing: -.005em !important;
}
.navg h5, .rl-g h5, .pal-g { font-size: 12.5px; font-weight: 700; }
.navg h5 { color: #8EA398; }
.sc-k, .co-k, .co-mk { font-size: 13px; }
.mono-k, .sn, .at .stage-l, .pid-r small, .pay-amt small, .pay-f small, .pay-ins small, .pay-dr small, .lv-facts dt { font-size: 12.5px; color: var(--muted); }
.h2-date { font-size: 13.5px; font-weight: 600; color: #B7C9C0; }
.sk { font-size: 14px; letter-spacing: -.01em !important; }
.sp-bt small { font-size: 11px; }
.sp-ex { font-size: 10.5px; }
.ex-nav button { font-family: var(--f-d); }

/* ---------- consistent page frame ---------- */
.page-head h2 { letter-spacing: -.045em; }
.backlink { min-height: 44px; }
@media (max-width: 1060px) {
  .page { padding: 16px 16px calc(104px + env(safe-area-inset-bottom, 0px)); }
  .top { padding-inline: 16px; }
  .top .ham, .ib, .me { width: 44px; height: 44px; }
  /* Docked bottom nav: full width, sits on the safe area, nothing peeks out under it. */
  .bnav { left: 0; right: 0; bottom: 0; border-radius: 22px 22px 0 0; border-width: 1px 0 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px -18px rgba(10,26,19,.35); background: rgba(255,255,255,.96); }
  .bnav > a, .bnav > button { min-height: 52px; justify-content: center; }
  .bnav .mid { margin-top: -22px; }
  .notif { width: calc(100vw - 32px); right: 16px; }
}
@media (max-width: 760px) {
  .sp-lh, .cm-lh { padding-inline: 16px; }
  #tList { padding-inline: 16px; }
  .cm-rooms { padding-inline: 16px; }
  .cm-list, .sp-list { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- tap targets on phones ---------- */
@media (max-width: 720px) {
  .app-body select.inp, .app-body input.inp, .pal input { min-height: 44px; }
  .notif button, .notif a.btn { min-height: 44px; }
  .msg-n { padding-block: 6px; margin-block: -6px; }
  .ssp-x { width: 44px !important; height: 44px !important; }
  .px .ssp-ctl .cb { width: 46px !important; height: 46px !important; }
  .ex-nav { gap: 8px; }
  .ex-nav button { width: 44px; height: 44px; font-size: 14px; }
}

/* ---------- Academy on phones ---------- */
@media (max-width: 720px) {
  /* "Continue" comes first in the Academy hero; the long intro and the route follow. */
  .sch-hero { display: flex; flex-direction: column; }
  .sch-hero .sh-top { order: 0; }
  .sch-hero .sh-row { order: 1; margin-top: 18px; }
  .sch-hero .sch-route { order: 2; margin-bottom: 0; }
  .sch-hero h2 { font-size: 26px; margin-top: 10px; }
  .sch-hero .sh-intro p { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sh-badge em { display: none; }
  .sh-stats { width: 100%; justify-content: space-between; }
  /* Module page: a short description so the Continue button sits above the fold. */
  .mh-l > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .mh-l .btn { width: 100%; justify-content: flex-start; min-height: 52px; }
  /* Quiz and exam options: big, full-width targets. */
  .sq-o { min-height: 60px; }
}

/* ---------- reduced motion: hero art and page entrance stay still ---------- */
@media (prefers-reduced-motion: reduce) {
  .page { animation: none; }
}

/* ---------- more 44px targets on phones (from the audit) ---------- */
@media (max-width: 720px) {
  .app-body .chips button, .dl-cat button { min-height: 44px; }
  .sh-also { min-height: 44px; }
  .sp-cta { min-height: 44px; height: auto; }
  .sp-tab { min-height: 44px; }
  .comp-att { width: 44px; height: 44px; }
  .msg-av .av { min-width: 40px; min-height: 40px; }
  .tl-cur select { min-height: 44px; }
  .sch-tabs a { min-height: 44px; display: inline-flex; align-items: center; }
  .cs-li { min-height: 44px; }
  .sh-certs a { min-height: 44px; display: flex; align-items: center; }
  .vs-modal-h .x { width: 44px; height: 44px; }
  .ppo { min-height: 44px; }
}

/* ---------- lesson player on phones: a docked "Next part" bar under the lesson ----------
 * It is a sibling of the scrolling lesson (not over it), so it never covers the picture or the captions, and it sits
 * on the safe area at the bottom where a thumb reaches. Hidden on larger screens (they keep the on-screen controls). */
.px .px-mbar { display: none; }
@media (max-width: 760px) {
  .px .px-mbar:not([hidden]) { display: flex; flex: none; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--px-bg, #fff); border-top: 1px solid rgba(10,26,19,.1); box-shadow: 0 -10px 24px -18px rgba(0,0,0,.35); position: relative; z-index: 6; }
  .px-mb-prev { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(10,26,19,.06); color: inherit; }
  .px-mb-prev:disabled { opacity: .35; }
  .px-mb-prev .ico, .px-mb-next .ico { width: 20px; height: 20px; }
  .px-mb-n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; opacity: .7; text-align: center; white-space: nowrap; }
  .px-mb-next { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; border-radius: 16px; background: var(--px-ink, #0A1A13); color: #fff; font-weight: 700; font-size: 15.5px; }
  .px-mb-next:active, .px-mb-prev:active { transform: scale(.97); }
  /* the on-screen arrows would repeat the bar; the timeline, time and full screen stay */
  .px .px-screen .ssp-ctl [data-prev], .px .px-screen .ssp-ctl [data-next] { display: none !important; }
  .px .ssp-body { padding-bottom: 16px; }
}

/* ================= Referrals: mature pass (owner 2026-11-03) =================
   No cartoon scene or avatars: real figures and initials. No looping motion (the count-up runs once). */
.rf-hero { border-radius: 20px; padding-bottom: 0; }
.rf-hero h2 { letter-spacing: -.03em; }
.rf-sumc { align-self: center; justify-self: end; width: min(400px, 100%); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 18px 20px; display: grid; gap: 10px; margin-bottom: 28px; }
.rf-sumc > small { font-size: 12.5px; font-weight: 600; color: #8FA59A; }
.rf-sumc dl { margin: 0; display: grid; }
.rf-sumc dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px; }
.rf-sumc dt { color: #B9C9C1; } .rf-sumc dd { margin: 0; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.rf-sumc p { margin: 0; font-size: 13px; color: #9FB3A9; }
.rf-open-ic .ico, .rf-step.on .rf-dot, .rf-pr { animation: none !important; }
.rf-mono { display: inline-grid; place-items: center; font-weight: 700; font-size: 14px; line-height: 1; flex: none; }
.rf-mt0 { background: #E3F3EB; color: #00663F; } .rf-mt1 { background: #E6ECFA; color: #2A46B8; } .rf-mt2 { background: #F4ECDD; color: #7A5200; } .rf-mt3 { background: #E9EDEB; color: #2C3D35; } .rf-mt4 { background: #ECE8F6; color: #4F37A8; }
.rf .card { border-radius: 16px; }
@media (max-width: 760px) {
  .rf-sumc { justify-self: stretch; width: auto; margin: 4px 0 20px; }
  .rf-hero { border-radius: 18px; }
  .rf-acts .btn, .rf-sh, .rf-share .rf-sh { min-height: 44px; }
}