/* =====================================================================
   MARROW, THE PHONE.  assets/public/public-app.css
   The device frame and the real app screens of the public system, for any
   signed out page that shows the app on a phone. Needs assets/public/public.css
   first (the keyframes and the motion gate live there).

   The device: figure.pub-device > i.pub-btn.pub-btn-l / -l2 / -r, then
   .pub-glass > span.pub-island + .hm-app (the app canvas, 390 points wide,
   scaled by --s) > .hm-status + .hm-panes > .hm-pane. One pane shows at a
   time (.is-on). The panes are stamped from partials/public-pane-*.html and
   the tab bar glyphs from partials/public-sprite.html. Every figure on a pane
   is a sample and carries data-demo. Each pane replicates a shipping screen of
   marrow-app at a7a84d09 with the app's own tokens (src/constants/theme.ts):
     .pub-pane-log    the set logger (LocalSetLogger.tsx)
     .pub-pane-prog   the Progress tab (app/(tabs)/progress.tsx)
     .pub-pane-money  Money (app/coach-business/money.tsx)
     .pub-pane-coach  coach Home, Going quiet (app/(coach)/home.tsx)
   A lane adds a pane only by reading the app source for the screen.
   ===================================================================== */

/* The device: a titanium band with a specular edge, the glass, the island, a soft
   reflection, the screen's own light around it and a shadow that grounds it. */
#main .pub-device { --s: 0.7641; position: relative; margin: 0; width: 320px; max-width: 100%; aspect-ratio: 9 / 19.5; padding: 11px; border: 0; border-radius: 54px; background: linear-gradient(145deg, #D3DBDC 0%, #6E7C7F 9%, #2A3436 24%, #182022 50%, #2E3A3C 76%, #8E9C9E 92%, #DCE3E4 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42), inset 0 0 0 2.5px #0A1113, inset 0 0 0 3.5px rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 70px 90px -50px rgba(2, 8, 9, 0.9), 0 30px 46px -28px rgba(2, 8, 9, 0.75), 0 0 140px -36px color-mix(in srgb, var(--hy-pool-teal) 42%, transparent); }
#main .pub-device::after { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: -34px; height: 46px; border-radius: 50%; background: radial-gradient(closest-side, rgba(2, 8, 9, 0.5), transparent); pointer-events: none; }
#main .pub-btn { position: absolute; display: block; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #5B696B, #B9C4C6 60%, #5B696B); }
#main .pub-btn-l { left: -3px; top: 19%; height: 30px; border-radius: 2px 0 0 2px; }
#main .pub-btn-l2 { left: -3px; top: 26%; height: 54px; border-radius: 2px 0 0 2px; }
#main .pub-btn-r { right: -3px; top: 23%; height: 78px; border-radius: 0 2px 2px 0; }
/* The atelier sheet clips every main figure (atelier-public.css, overflow hidden)
   and the device keeps that clip, so the side buttons, 3px outside each edge, and
   the floor shadow, 34px below, are cut whole and have never painted. Off, so the
   figure holds only what it shows (Gauntlet GA-marrow-site-3d1850e8, 2026-10-13).
   Showing them would be a visual change. tests/home-phone-mockup-holds-its-content. */
#main .pub-device > .pub-btn { display: none; }
#main .pub-device::after { content: none; }
/* The canvas is 390 points at every designed frame width, because --s is (W - 22) / 390.
   Its width comes from the glass, like its height, so a frame squeezed by max-width (320
   viewport) lays the screen out narrower instead of cutting its right edge (Gauntlet O6,
   2026-10-12: Skip was clipped 16.59px). tests/phone-mockup-screen-fits-its-glass. */
#main .pub-glass { position: relative; height: 100%; border-radius: 44px; overflow: hidden; isolation: isolate; color: var(--hy-ink); background-color: var(--hy-ground); background-image: radial-gradient(90% 46% at 14% 0%, color-mix(in srgb, var(--hy-pool-teal) 20%, transparent) 0%, transparent 70%), radial-gradient(70% 40% at 100% 64%, color-mix(in srgb, var(--hy-pool-blue) 10%, transparent) 0%, transparent 72%), linear-gradient(170deg, var(--hy-ground-hi) 0%, var(--hy-ground) 52%); }
#main .pub-glass::after { content: ""; position: absolute; inset: 0; z-index: 8; border-radius: inherit; pointer-events: none; background: linear-gradient(116deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.025) 26%, transparent 40%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
#main .pub-island { position: absolute; z-index: 9; top: 11px; left: 50%; width: 31%; height: 26px; margin-left: -15.5%; border-radius: 20px; background: #000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
/* THE APP, drawn in its own 390 point space and scaled into the glass (--s is
   the glass width over 390). Values are the app's: src/constants/theme.ts
   (hybrid), src/components/atelier, TabBarFrost and tabIcons.ts at marrow-app
   a7a84d09. #5AD19C is the app's ok status hue, which the site has no token for. */
#main .hm-status { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 18px 34px 0 40px; font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--hy-ink); }
#main .hm-status svg { width: 58px; height: 16px; fill: var(--hy-ink); stroke: var(--hy-ink); }
#main .hm-app { position: absolute; z-index: 1; top: 0; left: 0; width: calc(100% / var(--s, 0.7641)); height: calc(100% / var(--s, 0.7641)); transform: scale(var(--s, 0.7641)); transform-origin: 0 0; color: var(--hy-ink); font-family: var(--sans); background-color: var(--hy-ground); background-image: radial-gradient(44% 38% at 10% 0%, color-mix(in srgb, var(--hy-pool-teal) 14%, transparent) 0%, transparent 72%), radial-gradient(34% 44% at 96% 38%, color-mix(in srgb, var(--hy-pool-blue) 10%, transparent) 0%, transparent 70%), radial-gradient(46% 36% at 42% 106%, color-mix(in srgb, var(--hy-pool-teal) 9%, transparent) 0%, transparent 74%), linear-gradient(160deg, var(--hy-ground-hi) 0%, var(--hy-ground) 58%); }
#main .hm-app p { margin: 0; }
#main .hm-panes { position: absolute; left: 0; right: 0; top: 54px; bottom: 0; }
#main .hm-pane { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 16px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms; }
#main .hm-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1) 220ms, transform 560ms cubic-bezier(0.22, 1, 0.36, 1) 220ms, visibility 0s; }
#main .hm-app .mono { font-family: var(--mono); font-weight: 500; text-transform: none; letter-spacing: 0; }
/* THE REAL SCREENS, replicated from local renders of marrow-app a7a84d09
   (scratchpad home/shots/real/, every backend answer mocked on the page,
   nothing sent anywhere). Points in the app's 390 wide space. */
#main .hm-app .hm-pane { padding: 0 16px; }
/* the logger */
/* The bar and the scroll sit inside the pane's 16 point padding, padded so their
   content lands where it did when they pulled out with negative margins
   (Gauntlet GA-marrow-site-4e1843ac, 2026-10-13). Neither has a ground, so
   nothing on screen moves. tests/home-phone-mockup-holds-its-content. */
#main .hm-app .rl-top { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 56px; margin: 0; padding: 0 4px; }
#main .hm-app .rl-x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(12, 30, 33, 0.6); }
#main .hm-app .rl-x svg { width: 24px; height: 24px; fill: var(--hy-ink); }
#main .hm-app .rl-clock { font-size: 28px; font-weight: 600; letter-spacing: 0; color: var(--hy-ink); font-variant-numeric: tabular-nums; }
#main .hm-app .rl-toprest { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; letter-spacing: 1px; color: var(--hy-muted); text-transform: uppercase; }
#main .hm-app .rl-toprest span { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; letter-spacing: 0; color: var(--hy-ink); }
#main .hm-app .rl-toprest small { font-size: 11px; letter-spacing: 1px; color: var(--hy-muted); }
#main .hm-app .rl-toprest b { font-weight: 500; color: var(--hy-ink); }
#main .hm-app .rl-scroll { margin: 0; padding: 0; }
#main .hm-app .rl-restrow { display: flex; align-items: center; gap: 8px; }
#main .hm-app .rl-lab { margin: 0; font-size: 12px; line-height: 17px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .rl-restrow .rl-lab { width: 100px; }
#main .hm-app .rl-mini { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--hy-sunk); font-size: 20px; color: var(--hy-ink); }
#main .hm-app .rl-val { min-width: 48px; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--hy-ink); }
#main .hm-app .rl-resting { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin: 8px 0 12px; }
#main .hm-app .rl-resting b { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--hy-muted); }
#main .hm-app .rl-resting span { width: 85px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: var(--hy-aqua); font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hy-ground); }
#main .hm-app .rl-restbtn { width: 85px; height: 44px; margin: 8px 0 12px auto; display: none; place-items: center; border-radius: 8px; background: var(--hy-wash); font-size: 13px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hy-ink); }
#main .hm-app .rl-card { padding: 16px 16px 0; border-radius: 8px 8px 0 0; background: var(--hy-card); border-top: 3px solid var(--hy-sunk); }
#main .hm-app .rl-card > .rl-lab { margin-bottom: 8px; }
#main .hm-app .rl-dark { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 4px; background: var(--hy-sunk); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--hy-ink); }
#main .hm-app .rl-dark-s { display: inline-flex; padding: 0 16px; margin-top: 8px; }
#main .hm-app .rl-bar { height: 6px; margin-top: 24px; border-radius: 3px; background: var(--hy-sunk); overflow: hidden; }
#main .hm-app .rl-bar i { display: block; height: 100%; width: 100%; background: color-mix(in srgb, var(--hy-aqua) 80%, var(--hy-card)); transform-origin: 0 50%; transform: scaleX(0.25); }
#main .hm-app .rl-count { margin: 8px 0 12px; font-size: 12px; color: var(--hy-muted); }
#main .hm-app .rl-c0 { display: none; }
#main .hm-app .rl-set { padding: 12px 0 18px; border-top: 1px solid var(--hy-hairline); }
#main .hm-app .rl-sethead { display: flex; align-items: flex-end; justify-content: space-between; }
#main .hm-app .rl-setno { display: inline-flex; align-items: baseline; gap: 8px; padding-bottom: 14px; }
#main .hm-app .rl-setno .mono { font-size: 12px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .rl-setno b { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--hy-ink); }
#main .hm-app .rl-done { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#main .hm-app .rl-done .mono { font-size: 12px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .rl-box { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; border: 1.5px solid var(--hy-aqua); background: var(--hy-aqua); }
#main .hm-app .rl-tick { font-size: 24px; color: var(--hy-ground); }
#main .hm-app .rl-box-idle { background: var(--hy-sunk); border-color: var(--hy-hairline); }
#main .hm-app .rl-box-idle .rl-tick { color: var(--hy-muted); }
#main .hm-app .rl-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
#main .hm-app .rl-flab { margin: 0 0 8px; text-align: center; font-size: 12px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .rl-step { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--hy-boundary); font-size: 22px; color: var(--hy-ink); }
/* The stepper value carries its own ink, the 85 percent white it reads in on the homepage band, so the shared .mono rule cannot paint it sage on another plane. */
#main .hm-app .rl-step b { font-size: 18px; font-weight: 500; letter-spacing: 0; margin-top: -8px; color: color-mix(in srgb, var(--color-pure-white) 85%, transparent); }
#main .hm-app .rl-saved { margin: 6px 0 0; text-align: right; font-size: 12px; color: #5AD19C; }
#main .hm-app .rl-rpe { display: flex; align-items: center; gap: 10px; justify-content: flex-start; padding-left: 56px; margin-top: 4px; }
#main .hm-app .rl-rpe svg { width: 14px; height: 14px; fill: var(--hy-muted); }
#main .hm-app .rl-step-1 { width: 50%; }
#main .hm-app .rl-dim { position: absolute; inset: 0; z-index: 2; background: rgba(5, 12, 13, 0.45); pointer-events: none; }
#main .hm-app .rl-sheet { position: absolute; z-index: 4; left: 20px; right: 20px; bottom: 18px; padding: 16px 16px 16px; border-radius: 12px; background: var(--hy-card); border: 1px solid var(--hy-hairline); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35); }
#main .hm-app .rl-sk { margin: 0; font-size: 12px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-aqua); }
#main .hm-app .rl-sname { margin: 4px 0 0; font-weight: 500; font-size: 16px; color: var(--hy-ink); }
#main .hm-app .rl-stime { margin: 6px 0 0; font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 40px; color: var(--hy-ink); }
#main .hm-app .rl-sbar { height: 3px; margin: 12px 0 16px; border-radius: 2px; background: var(--hy-sunk); }
#main .hm-app .rl-sbar i { display: block; width: 3%; height: 100%; background: var(--hy-aqua); border-radius: 2px; }
#main .hm-app .rl-sbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#main .hm-app .rl-sbtns span { display: grid; place-items: center; height: 52px; padding: 0 14px; border-radius: 8px; font-weight: 600; font-size: 13px; line-height: 15px; letter-spacing: 1.6px; text-align: center; text-transform: uppercase; }
#main .hm-app .rl-skip { background: var(--hy-aqua); color: var(--hy-ground); }
#main .hm-app .rl-keep { background: var(--hy-wash); color: var(--hy-ink); }
#main .hm-app .rl-finish { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 30px; height: 52px; display: grid; place-items: center; border-radius: 999px; background: var(--color-pure-white); color: var(--hy-ground); font-weight: 500; font-size: 15px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55), 0 8px 16px color-mix(in srgb, var(--hy-teal) 45%, transparent); }
/* progress: the app paints this tab on its dusk ground (SCREEN_MOODS) */
#main .hm-app .hm-status { position: relative; z-index: 6; }
#main .hm-app .pub-pane-prog::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -54px; bottom: 0; background-color: #0C111B; background-image: radial-gradient(44% 38% at 10% 0%, color-mix(in srgb, var(--hy-pool-blue) 14%, transparent) 0%, transparent 72%), radial-gradient(34% 44% at 96% 38%, color-mix(in srgb, var(--hy-pool-blue) 10%, transparent) 0%, transparent 70%), radial-gradient(46% 36% at 42% 106%, color-mix(in srgb, var(--hy-pool-teal) 9%, transparent) 0%, transparent 74%), linear-gradient(160deg, #18233A 0%, #0C111B 58%); }
#main .hm-app .hm-pane { isolation: isolate; }
/* progress */
#main .hm-app .rp-title { margin: 30px 0 22px; font-family: var(--serif); font-weight: 300; font-size: 44px; line-height: 48px; color: var(--hy-ink); }
#main .hm-app .rp-card { margin-bottom: 24px; padding: 18px; border-radius: 12px; background: var(--hy-card); border: 1px solid var(--hy-hairline); }
#main .hm-app .rp-eb { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; line-height: 16px; letter-spacing: 1.44px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .rp-eb svg { width: 16px; height: 16px; fill: var(--hy-muted); }
#main .hm-app .rp-body { margin: 0; font-size: 15px; line-height: 22px; color: var(--hy-muted); }
#main .hm-app .rp-link { margin: 22px 0 6px; text-align: center; font-weight: 600; font-size: 15px; color: var(--hy-ink); text-decoration: underline; text-underline-offset: 3px; }
#main .hm-app .rp-trend .rp-eb { margin-bottom: 18px; }
#main .hm-app .rp-graph { padding: 24px 16px 16px; border-radius: 4px; background: var(--hy-sunk); border: 1px solid var(--hy-hairline); }
#main .hm-app .rp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
#main .hm-app .rp-chip { display: grid; place-items: center; height: 44px; padding: 0 24px; border-radius: 4px; border: 1px solid var(--hy-hairline); background: var(--hy-card); font-weight: 600; font-size: 15px; color: var(--hy-ink); }
#main .hm-app .rp-chip-on { background: var(--hy-aqua); border-color: var(--hy-aqua); color: var(--hy-ground); }
#main .hm-app .rp-axis { fill: var(--hy-muted); color: var(--hy-muted); font-family: Georgia, "Times New Roman", serif; font-size: 10px; }
#main .hm-app .pub-spark { width: 100%; height: auto; display: block; overflow: visible; }
#main .hm-app .pub-sp-base { stroke: var(--hy-hairline); stroke-width: 1; }
#main .hm-app .pub-sp-band { fill: var(--hy-aqua-hi); fill-opacity: 0.07; stroke: none; }
#main .hm-app .pub-sp-lum { stroke: var(--hy-aqua-hi); stroke-opacity: 0.18; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
#main .hm-app .pub-sp-line { stroke: var(--hy-aqua-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
#main .hm-app .pub-sp-pts circle { fill: var(--hy-card); stroke: var(--hy-aqua-hi); stroke-width: 1.5; }
#main .hm-app .pub-sp-cap { fill: var(--hy-aqua-hi); fill-opacity: 0.3; }
#main .hm-app .pub-sp-dot { fill: var(--color-pure-white); }
#main .hm-app .pub-sp-end { transform-origin: 264px 150px; }
#main .hm-app .rp-peek { height: 120px; }
/* money */
#main .hm-app .rm-back { display: flex; align-items: center; height: 44px; margin: 4px 0 14px 4px; font-size: 12px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--hy-ink); }
#main .hm-app .rm-title { margin: 0 0 22px 4px; font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 32px; color: var(--hy-ink); }
#main .hm-app .rm-eb { margin: 0 0 10px 4px; }
#main .hm-app .rm-group { margin: 0 4px; border-radius: 8px; background: var(--hy-card); border: 1px solid var(--hy-hairline); }
#main .hm-app .rm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 10px 14px; border-bottom: 1px solid var(--hy-hairline); }
#main .hm-app .rm-row:last-child { border-bottom: 0; }
#main .hm-app .rm-row span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#main .hm-app .rm-row b { font-weight: 500; font-size: 15px; line-height: 20px; color: var(--hy-ink); }
#main .hm-app .rm-row small { font-size: 12px; line-height: 16px; color: var(--hy-muted); }
#main .hm-app .rm-row em { font-style: normal; font-size: 15px; color: var(--hy-ink); font-variant-numeric: tabular-nums; }
#main .hm-app .rm-row-link { min-height: 46px; }
#main .hm-app .rm-row-link svg { width: 18px; height: 18px; fill: var(--hy-muted); }
#main .hm-app .rm-muted { margin: 8px 4px; font-size: 14px; line-height: 20px; color: var(--hy-muted); }
#main .hm-app .rm-group + .rp-eb { margin-top: 26px; }
#main .hm-app .rm-h { margin: 6px 4px 8px; font-weight: 600; font-size: 16px; color: var(--hy-ink); }
#main .hm-app .pub-swap { position: relative; display: inline-grid; justify-items: end; align-items: start; flex: none; }
#main .hm-app .pub-swap > * { grid-area: 1 / 1; }
#main .hm-app .pub-msg { opacity: 0; visibility: hidden; }
/* coach home */
#main .hm-app .rh-card { margin-bottom: 24px; padding: 18px; border-radius: 12px; background: var(--hy-card); border: 1px solid var(--hy-hairline); }
#main .hm-app .rh-today { margin-top: -30px; padding-top: 30px; border-top: 0; border-radius: 0 0 12px 12px; }
#main .hm-app .rh-eb { margin-bottom: 2px; }
#main .hm-app .rh-title { margin: 0 0 4px; font-weight: 600; font-size: 16px; line-height: 22px; color: var(--hy-ink); }
#main .hm-app .rh-body { margin: 0 0 10px; font-size: 15px; line-height: 21px; color: var(--hy-muted); }
#main .hm-app .rh-list { border-radius: 8px; background: var(--hy-sunk); border: 1px solid var(--hy-hairline); }
#main .hm-app .rh-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 16px 12px; border-bottom: 1px solid var(--hy-hairline); }
#main .hm-app .rh-row:last-child { border-bottom: 0; }
#main .hm-app .rh-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#main .hm-app .rh-row b { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--hy-ink); }
#main .hm-app .rh-row small { font-size: 12px; line-height: 16px; color: var(--hy-muted); }
#main .hm-app .rh-btn { flex: none; display: grid; place-items: center; height: 32px; padding: 0 9px; border-radius: 4px; border: 1px solid var(--hy-boundary); background: var(--hy-card); font-size: 12px; letter-spacing: 0.5px; color: var(--hy-muted); }
#main .hm-app .rh-aside { font-size: 12px; color: var(--hy-muted); white-space: nowrap; padding-top: 7px; }
#main .hm-app .rh-cal { padding: 14px 18px; }
#main .hm-app .rh-cal span { display: grid; place-items: center; height: 46px; border-radius: 999px; border: 1px solid var(--hy-boundary); font-weight: 500; font-size: 17px; color: var(--hy-ink); }
#main .hm-app .rh-rev { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hy-hairline); font-size: 15px; color: var(--hy-ink); }
#main .hm-app .rh-rev:last-child { border-bottom: 0; }
#main .hm-app .rh-rev em { font-style: normal; color: var(--hy-muted); }
/* member train (the brand preview) */
/* the tab bar (TabBarFrost) */
#main .hm-app .ap-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; display: flex; justify-content: space-around; align-items: flex-start; padding: 19px 4px 0; background: var(--hy-card); border-top: 1px solid var(--hy-hairline); font-size: 11px; letter-spacing: 1.32px; text-transform: uppercase; color: var(--hy-muted); }
#main .hm-app .ap-tabs > span { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px; line-height: 14px; }
#main .hm-app .ap-tabs svg { width: 32px; height: 32px; padding: 5px; fill: currentColor; }
#main .hm-app .ap-tabs .on { color: var(--hy-aqua); }
#main .hm-app .ap-tabs-c { font-size: 10px; letter-spacing: 1.1px; }
#main .hm-app .ap-tabs-c > span { min-width: 0; }
@media (max-width: 767px) {
  #main .pub-device { width: 300px; --s: 0.7128; }
  #main .pub-swap-tag .pub-chip { font-size: 9px; padding: 2px 6px; }
}
/* =====================================================================
   MOTION. Everything below runs only when the visitor allows it.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* 4A. Live sessions: the set is ticked done, the count and the bar move on, and the rest sheet rises. */
  .pub-armed #main .pub-pane-log:not(.is-in) .rl-box:not(.rl-box-idle) { background-color: var(--hy-sunk); border-color: var(--hy-hairline); }
  .pub-armed #main .pub-pane-log:not(.is-in) .rl-box:not(.rl-box-idle) .rl-tick { color: var(--hy-muted); }
  .pub-armed #main .pub-pane-log:not(.is-in) .pub-logbar { transform: scaleX(0); }
  .pub-armed #main .pub-pane-log:not(.is-in) .rl-c0 { display: inline; }
  .pub-armed #main .pub-pane-log:not(.is-in) .rl-c1 { display: none; }
  .pub-armed #main .pub-pane-log:not(.is-in) :is(.rl-saved, .rl-dim, .rl-toprest) { opacity: 0; }
  .pub-armed #main .pub-pane-log:not(.is-in) .rl-restbtn { display: grid; }
  .pub-armed #main .pub-pane-log:not(.is-in) .rl-resting { display: none; }
  .pub-armed #main .pub-pane-log:not(.is-in) .rl-sheet { opacity: 0; transform: translateY(120%); }
  .pub-armed #main .pub-pane-log .rl-box { transition: background-color 260ms ease 900ms, border-color 260ms ease 900ms; }
  .pub-armed #main .pub-pane-log .rl-tick { transition: color 260ms ease 900ms; }
  .pub-armed #main .pub-pane-log.is-in .rl-box:not(.rl-box-idle) { animation: pub-kf-press 260ms ease 700ms both; }
  .pub-armed #main .pub-pane-log .pub-logbar { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) 1100ms; }
  .pub-armed #main .pub-pane-log.is-in .rl-saved { animation: pub-kf-fade 400ms ease 1200ms both; }
  .pub-armed #main .pub-pane-log.is-in :is(.rl-dim, .rl-toprest) { animation: pub-kf-fade 500ms ease 1700ms both; }
  .pub-armed #main .pub-pane-log.is-in .rl-sheet { animation: pub-kf-sheet 700ms cubic-bezier(0.22, 1, 0.36, 1) 1700ms both; }
  /* 4B. Progress: the line draws, the band fills behind it, the points and the end arrive. */
  .pub-armed #main .pub-pane-prog:not(.is-in) :is(.pub-sp-line, .pub-sp-lum) { stroke-dashoffset: 1; }
  .pub-armed #main .pub-pane-prog:not(.is-in) :is(.pub-sp-band, .pub-sp-end, .pub-sp-pts) { opacity: 0; }
  .pub-armed #main .pub-pane-prog.is-in :is(.pub-sp-line, .pub-sp-lum) { animation: pub-kf-draw1 1400ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
  .pub-armed #main .pub-pane-prog.is-in .pub-sp-band { animation: pub-kf-fade 1000ms ease 700ms both; }
  .pub-armed #main .pub-pane-prog.is-in .pub-sp-pts { animation: pub-kf-fade 700ms ease 500ms both; }
  .pub-armed #main .pub-pane-prog.is-in .pub-sp-end { animation: pub-kf-pop 260ms cubic-bezier(0.22, 1, 0.36, 1) 1600ms both; }
  /* 4D. Coach home: the week's rings draw, then the coach checks in on a quiet member. */
  .pub-armed #main .pub-pane-coach:not(.is-in) :is(.ap-ring-arc, .ap-ring-lum) { stroke-dasharray: 0 100; }
  .pub-armed #main .pub-pane-coach.is-in :is(.ap-ring-arc, .ap-ring-lum) { animation: pub-kf-ringp 1100ms cubic-bezier(0.22, 1, 0.36, 1) 300ms both; }
  .pub-armed #main .pub-pane-coach:not(.is-in) .pub-msg { opacity: 1; visibility: visible; }
  .pub-armed #main .pub-pane-coach:not(.is-in) .pub-aq { opacity: 0; }
  .pub-armed #main .pub-pane-coach.is-in .pub-msg { animation: pub-kf-press-out 900ms ease 1500ms both; }
  .pub-armed #main .pub-pane-coach.is-in .pub-aq { animation: pub-kf-fade 400ms ease 2300ms both; }
}