/* The client app design system, lifted verbatim from the home page
(companion.html) so this page cannot drift from it. Home keeps its own
inline copy and is untouched; this is a byte-for-byte extract, so any
page linking it inherits the real tokens, type scale, card treatment,
buttons, tab bar and sheet styling rather than an approximation. */
/* ============================================================
FORWARD COMPANION, round 9 flagship
Andy's convergence brief, assembled from the parts he picked:
base ................ Z Companion (dark, photographic, magazine)
rings + illustrations Y Atlas
floating tab bar .... O Liquid
card-presentation ... O Liquid pop-outs (page pushes back)
"Thirty four days" .. O Liquid streak treatment
weekly analytics .... X Console (click opens the detail UI)
Current status ...... X Console widget
Log an update ....... U Capital, wired to the REAL check-in flows
motivational welcome "Day 34 is yours", rotating
NEW: a real Google Map on the appointment.
Key comes from GET /api/recovery-network/map-key, which is public by
design for exactly this case (static design-study pages reviewed
without a session). The key lives only in server env, never here.
Falls back to a drawn map when unavailable.
============================================================ */
/* THE TOKEN LAYER LIVES IN ONE PLACE: theme-tokens.css. It used to be
defined here AND duplicated byte-for-byte inside companion.html and
companion-stage1.html (a fourth copy turned up in la-threshold.html,
already drifted). @import keeps this file a single for any page
that only wants appts-shell.css, while there is exactly one copy of the
values to keep in step. @import must be the first rule in the file, so it
comes before the box-sizing reset below even though that reset used to
come first. It also carries the BIG SCREENS --page-max/--gutter steps,
which are token-adjacent and moved with the rest of the layer. */
@import url("/theme-tokens.css");
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:var(--body);background:var(--canvas);color:var(--ink);font-size:16px;
line-height:1.5;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover,a:focus{text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;text-align:left}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--secondary-soft);outline-offset:3px;border-radius:8px}
.tnum{font-variant-numeric:tabular-nums}
.display-lg{font-family:var(--display);font-size:clamp(36px,5.2vw,60px);line-height:1.03;
letter-spacing:-.042em;font-weight:700}
.headline-lg{font-family:var(--display);font-size:clamp(25px,2.9vw,32px);line-height:1.18;
letter-spacing:-.025em;font-weight:700}
.headline-md{font-family:var(--display);font-size:21px;line-height:1.28;font-weight:600;
letter-spacing:-.012em}
.body-md{font-size:16px;line-height:1.5}
.body-sm{font-size:14px;line-height:1.43}
.label-caps{font-size:11.5px;line-height:1.33;letter-spacing:.07em;font-weight:700;
text-transform:uppercase}
/* ============ SHELL: pushes back when a sheet presents (from O) ============ */
.shell{position:relative;z-index:2;min-height:100vh;background:var(--canvas);
transition:transform .52s var(--spring),border-radius .52s var(--spring),filter .52s var(--spring);
transform-origin:50% 0}
body.sheet-open .shell{transform:scale(.93) translateY(16px);border-radius:var(--r-xl);
overflow:hidden;filter:brightness(.78)}
/* ============ TOP BAR with the real Forward logo ============ */
.topbar{position:sticky;top:0;z-index:55;background:color-mix(in srgb,var(--canvas) 84%,transparent);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
body.scrolled .topbar{border-bottom-color:var(--hair)}
.topbar-in{max-width:var(--page-max);margin:0 auto;padding:13px var(--gutter);display:flex;
align-items:center;justify-content:space-between;gap:22px}
.lockup{display:flex;align-items:center;gap:13px;min-width:0}
.lockup img{height:26px;width:auto;flex-shrink:0}
html[data-theme="dark"] .lockup img{filter:brightness(1.18) saturate(1.1)}
.lockup .rule{width:1px;height:22px;background:var(--hair-2);flex-shrink:0}
.lockup .sub{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.03em;
color:var(--ink-2);white-space:nowrap}
.topnav{display:flex;gap:26px}
.topnav a{font-size:11.5px;letter-spacing:.07em;font-weight:700;text-transform:uppercase;
color:var(--ink-2);transition:color .2s var(--ease);position:relative;padding:4px 0}
.topnav a:hover{color:var(--ink)}
.topnav a[aria-current="page"]{color:var(--secondary-soft)}
html[data-theme="light"] .topnav a[aria-current="page"]{color:var(--secondary)}
.topnav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;
height:2px;border-radius:2px;background:currentColor}
.bar-right{display:flex;align-items:center;gap:7px}
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;position:relative;
color:var(--ink-2);transition:background .2s var(--ease),color .2s var(--ease),transform .18s var(--bounce)}
.icon-btn:hover{background:var(--raise-2);color:var(--ink)}
.icon-btn:active{transform:scale(.9)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
background:var(--secondary);border:2px solid var(--canvas)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;
font-weight:600;font-size:12.5px;background:linear-gradient(135deg,#2A3A61,var(--cyan));
border:2px solid var(--hair-2)}
.page{max-width:var(--page-max);margin:0 auto;padding:30px var(--gutter) 170px}
section+section{margin-top:var(--section-gap)}
/* ============ OPENER ============ */
.opener{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:540px;
display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow-lg);
isolation:isolate}
.opener img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 44%;z-index:0}
.opener .scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(102deg,rgba(5,9,17,.94) 0%,rgba(5,9,17,.8) 34%,
rgba(5,9,17,.32) 68%,rgba(5,9,17,.1) 100%)}
.opener .warm{position:absolute;inset:0;z-index:1;mix-blend-mode:soft-light;
background:linear-gradient(120deg,rgba(181,37,85,.55),transparent 52%,rgba(0,164,153,.42))}
.opener-in{position:relative;z-index:2;padding:44px;display:grid;grid-template-columns:1fr auto;
gap:36px;align-items:end;width:100%}
@media(max-width:940px){.opener-in{grid-template-columns:1fr;padding:26px 22px}}
.opener .eyebrow{color:#BFE3FA;letter-spacing:.2em;display:block;margin-bottom:14px}
.opener h1{color:#fff;margin-bottom:14px;max-width:640px;text-shadow:0 2px 26px rgba(0,0,0,.42)}
/* the motivational line rotates, so it needs a stable box */
.motiv{display:block;min-height:1.05em;color:var(--secondary-soft);
transition:opacity .5s var(--ease),transform .5s var(--ease)}
.motiv.out{opacity:0;transform:translateY(-8px)}
.opener .lede{font-size:17.5px;line-height:1.46;color:rgba(255,255,255,.84);max-width:520px;
margin-bottom:26px;text-shadow:0 1px 16px rgba(0,0,0,.42)}
.opener-acts{display:flex;gap:12px;flex-wrap:wrap}
/* streak, the O treatment: the words, then the number */
.streak{display:inline-flex;align-items:center;gap:18px;padding:12px 16px 12px 22px;
border-radius:999px;background:var(--hero-glass);border:1px solid var(--hero-hair);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
box-shadow:inset 0 1px 0 var(--glass-hi),0 10px 26px rgba(0,0,0,.28);
transition:transform .3s var(--bounce)}
.streak:hover{transform:translateY(-2px)}
.streak:active{transform:scale(.985)}
.streak .num{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.04em;
line-height:1;color:#fff}
.streak .lab{font-size:12.5px;line-height:1.3;color:rgba(255,255,255,.7)}
.streak .track{display:block;width:118px;height:6px;border-radius:3px;background:rgba(255,255,255,.18);
overflow:hidden}
.streak .track i{display:block;height:100%;width:0;border-radius:3px;
background:linear-gradient(90deg,var(--secondary),var(--cyan) 58%,var(--teal));
transition:width 1.5s var(--spring)}
.streak .go{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;
place-items:center;color:#fff;transition:background .2s var(--ease)}
.streak:hover .go{background:var(--secondary);}
/* countdown + rings dock */
.dock{width:320px;display:flex;flex-direction:column;gap:14px}
@media(max-width:940px){.dock{width:100%}}
.glasscard{border-radius:var(--r-lg);padding:24px;background:var(--hero-glass);
border:1px solid var(--hero-hair);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 34px rgba(0,0,0,.3)}
.cd .lab{color:rgba(255,255,255,.6);letter-spacing:.14em;display:block;margin-bottom:16px;
text-align:center}
.cd-row{display:flex;justify-content:center;align-items:baseline;gap:11px;color:#fff}
.cd-unit b{display:block;font-family:var(--display);font-size:32px;font-weight:700;
letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.cd-unit span{display:block;font-size:9px;font-weight:700;text-transform:uppercase;
letter-spacing:.09em;opacity:.55;margin-top:6px;text-align:center}
.cd-sep{font-size:26px;font-weight:300;opacity:.3;line-height:1}
.cd-foot{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
display:flex;align-items:center;gap:10px}
.cd-foot .av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
font-size:11px;font-weight:600;color:#fff;background:linear-gradient(135deg,#7B4B9E,#B52555)}
.cd-foot .n{display:block;font-size:13px;font-weight:600;color:#fff}
.cd-foot .r{display:block;font-size:11.5px;color:rgba(255,255,255,.6)}
.cd-foot .map-btn{margin-left:auto;width:34px;height:34px;border-radius:10px;flex-shrink:0;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);display:grid;
place-items:center;color:#fff;transition:background .2s var(--ease),transform .18s var(--bounce)}
.cd-foot .map-btn:hover{background:var(--cyan)}
.cd-foot .map-btn:active{transform:scale(.9)}
/* rings inside the dock (from Y) */
.ringcard{display:flex;align-items:center;gap:18px}
.rings{position:relative;width:96px;height:96px;flex-shrink:0}
.rings svg{position:absolute;inset:0;transform:rotate(-90deg)}
.rings circle{fill:none;stroke-linecap:round}
.rings .fg{transition:stroke-dashoffset 1.7s var(--spring)}
.rings .core{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.rings .core b{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.04em;
line-height:1;color:#fff}
.ringlegend{display:flex;flex-direction:column;gap:7px;flex:1;min-width:0}
.rl{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.78)}
.rl i{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.rl b{margin-left:auto;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;
border-radius:var(--r-sm);font-size:15px;font-weight:600;
transition:transform .18s var(--bounce),filter .2s var(--ease),background .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--secondary);color:#fff;box-shadow:0 8px 22px rgba(181,37,85,.42)}
.btn-primary:hover{filter:brightness(1.12)}
.btn-glass{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn-glass:hover{background:rgba(255,255,255,.24)}
.btn-quiet{background:var(--raise-2);color:var(--ink);border:1px solid var(--hair)}
.btn-quiet:hover{background:var(--hair)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn-full{width:100%}
/* ============ SECTION HEAD (P/Y Show All rhythm) ============ */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px;
margin-bottom:22px;flex-wrap:wrap}
.sec-head .eyebrow{color:var(--secondary-soft);display:block;margin-bottom:7px}
html[data-theme="light"] .sec-head .eyebrow{color:var(--secondary)}
.show-all{font-size:14.5px;color:var(--secondary-soft);font-weight:600;white-space:nowrap;
transition:opacity .2s var(--ease)}
html[data-theme="light"] .show-all{color:var(--secondary)}
.show-all:hover{opacity:.68}
.panel{background:var(--raise);border:1px solid var(--hair);border-radius:var(--r-lg);padding:26px;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
transition:border-color .24s var(--ease),transform .24s var(--ease),box-shadow .24s var(--ease)}
.panel.tap{cursor:pointer;width:100%}
.panel.tap:hover{border-color:var(--hair-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.panel.tap:active{transform:scale(.995)}
/* ============ ROW 1: status + analytics ============ */
/* TABLET KEEPS BOTH CARDS SIDE BY SIDE.
This used to collapse at 1040px, which is above an iPad portrait's 1024,
so a tablet with 960px of page to play with was given the phone layout:
Current status full width, and the rings pushed a screen further down.
Andy's words, and he is right, were that tablet should show the rings
beside the status the way the browser does.
860px is the app's own tablet breakpoint and is where it now collapses,
so tablet gets the browser layout and phone keeps the stack. No new
breakpoint is introduced.
The floor on the first track is what makes that safe. At 1024 a plain
.62fr is 288px and at 880 it is 244px, and the status rows read as a
squeeze at either. minmax(300px,.62fr) holds the status column at a width
its rows fit in and lets the progress card take the rest; above about
1100px .62fr is already wider than 300, so the browser layout is
untouched, byte for byte. */
.row-1{display:grid;grid-template-columns:minmax(300px,.62fr) minmax(0,1.38fr);
gap:var(--gutter);align-items:stretch}
@media(max-width:860px){.row-1{grid-template-columns:minmax(0,1fr)}}
/* current status (from X) */
.status{display:flex;flex-direction:column}
.status .sh{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:20px}
.status .sh .label-caps{color:var(--ink-3)}
.pill{padding:5px 11px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;white-space:nowrap;background:rgba(0,119,200,.2);color:var(--cyan-soft)}
html[data-theme="light"] .pill{background:#E6F2FA;color:var(--cyan)}
.status-row{display:flex;align-items:center;gap:15px;margin-bottom:auto}
.status-row .ic{width:50px;height:50px;border-radius:var(--r-md);flex-shrink:0;display:grid;
place-items:center;background:rgba(181,37,85,.2);color:var(--secondary-soft)}
html[data-theme="light"] .status-row .ic{background:#F8E8EE;color:var(--secondary)}
.status-row .t{display:block}
.status-row .s{display:block;font-size:13.5px;color:var(--ink-2)}
.today-list{display:flex;flex-direction:column;gap:0;margin-bottom:auto}
.tl{display:grid;grid-template-columns:16px 1fr;gap:11px;align-items:start;padding:9px 0;
position:relative}
.tl+.tl{border-top:1px solid var(--hair)}
.tl .n{width:9px;height:9px;border-radius:50%;background:var(--raise-2);
box-shadow:0 0 0 1px var(--hair);justify-self:center;margin-top:5px}
.tl.done .n{background:var(--teal);box-shadow:none}
.tl.now .n{background:var(--secondary);box-shadow:0 0 0 4px rgba(181,37,85,.22)}
.tl .tx{font-size:12.5px;color:var(--ink-3);line-height:1.35}
.tl .tx b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:1px}
.tl.now .tx b{color:var(--ink)}
.tl.done .tx b{color:var(--ink-3);font-weight:500}
.track{display:block;height:8px;border-radius:4px;background:var(--raise-2);overflow:hidden;
margin-top:22px}
.track i{display:block;height:100%;border-radius:4px;width:0;transition:width 1.3s var(--spring)}
.f-brand{background:linear-gradient(90deg,var(--secondary),var(--cyan) 55%,var(--teal))}
.f-mag{background:linear-gradient(90deg,var(--secondary),var(--secondary-soft))}
.f-cyan{background:linear-gradient(90deg,var(--cyan),var(--cyan-soft))}
.f-teal{background:linear-gradient(90deg,var(--teal),var(--teal-soft))}
.track-foot{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;
font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.track-foot .l{color:var(--ink-3)}
.track-foot .r{color:var(--ink);white-space:nowrap}
/* analytics (from X), clickable */
.an-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px;
flex-wrap:wrap}
.an-head .label-caps{color:var(--ink-3)}
.an-head h3{margin-top:7px}
.seg{display:flex;gap:5px;background:var(--raise-2);padding:4px;border-radius:var(--r-sm)}
.seg button{padding:8px 16px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink-2);
transition:all .22s var(--ease)}
.seg button[aria-selected="true"]{background:var(--hair);color:var(--ink)}
.chart{position:relative;height:180px;width:100%}
.chart svg{width:100%;height:100%;overflow:visible}
.chart .grid-l{stroke:var(--hair);stroke-width:1;stroke-dasharray:4 5}
.chart .area{fill:url(#cg);opacity:0;transition:opacity .9s var(--ease) .7s}
.chart .line{fill:none;stroke:var(--secondary-soft);stroke-width:4;stroke-linecap:round;
stroke-linejoin:round;stroke-dasharray:2000;stroke-dashoffset:2000;
transition:stroke-dashoffset 2s var(--ease)}
.chart.drawn .line{stroke-dashoffset:0}
.chart.drawn .area{opacity:1}
.chart .pt{fill:var(--canvas);stroke:var(--secondary-soft);stroke-width:3;opacity:0;
transition:opacity .4s var(--ease),r .2s var(--ease)}
.chart.drawn .pt{opacity:1}
.chart .pt.peak{stroke:var(--teal-soft)}
.chart .hit{fill:transparent;cursor:pointer}
.axis{display:flex;justify-content:space-between;margin-top:12px;font-size:11px;font-weight:700;
letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase}
.axis span{flex:1;text-align:center}
.axis span.today{color:var(--secondary-soft)}
.tipbox{position:absolute;pointer-events:none;background:var(--primary-container);color:#fff;
padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;
transform:translate(-50%,-14px);transition:opacity .2s var(--ease);box-shadow:var(--shadow-lg);
border:1px solid var(--hair-2)}
.tipbox.on{opacity:1}
.an-foot{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:18px;
border-top:1px solid var(--hair);font-size:13.5px;color:var(--ink-2)}
.an-foot .go{margin-left:auto;color:var(--secondary-soft);font-weight:600;font-size:14px;
display:inline-flex;align-items:center;gap:6px}
html[data-theme="light"] .an-foot .go{color:var(--secondary)}
/* ============ APPOINTMENT + MAP ============ */
.appt{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-lg);overflow:hidden;
border:1px solid var(--hair);background:var(--raise)}
@media(max-width:900px){.appt{grid-template-columns:1fr}}
.appt-body{padding:30px}
.appt .cd-chip{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-soft);background:rgba(0,119,200,.18);
padding:6px 12px;border-radius:999px;margin-bottom:14px}
html[data-theme="light"] .appt .cd-chip{background:#E6F2FA;color:var(--cyan)}
.appt h3{margin-bottom:8px}
.appt-body>p{font-size:14.5px;color:var(--ink-2);margin-bottom:20px}
.appt .who{display:flex;align-items:center;gap:12px;padding:16px 0;
border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-bottom:20px}
.appt .who .av{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
font-size:13px;font-weight:600;color:#fff;background:linear-gradient(135deg,#7B4B9E,#B52555)}
.appt .who .n{display:block;font-size:14.5px;font-weight:600}
.appt .who .r{display:block;font-size:12.5px;color:var(--ink-2)}
.appt .who .pres{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;
font-weight:600;color:var(--teal-soft);white-space:nowrap}
.appt .who .pres i{width:8px;height:8px;border-radius:50%;background:var(--teal-soft)}
.appt .acts{display:flex;gap:10px;flex-wrap:wrap}
/* the map itself */
.mapwrap{position:relative;min-height:330px;background:#0E1524}
html[data-theme="light"] .mapwrap{background:#E8EDF3}
.mapwrap .gmap{position:absolute;inset:0}
.map-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:14px;padding:24px;text-align:center;
background:linear-gradient(150deg,#152036,#0C1220)}
html[data-theme="light"] .map-fallback{background:linear-gradient(150deg,#E9EEF5,#DCE3EC)}
.map-fallback svg.art{width:100%;max-width:280px;height:auto;opacity:.9}
.map-fallback p{font-size:13px;color:var(--ink-2);max-width:250px}
.map-badge{position:absolute;left:16px;top:16px;z-index:4;display:flex;align-items:center;gap:9px;
padding:9px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--hair-2);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);font-size:12.5px;font-weight:600;
color:var(--ink);box-shadow:var(--shadow)}
.map-badge .pin{color:var(--secondary-soft)}
html[data-theme="light"] .map-badge .pin{color:var(--secondary)}
.map-open{position:absolute;right:16px;bottom:16px;z-index:4;display:inline-flex;align-items:center;
gap:8px;padding:11px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--hair-2);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);font-size:13.5px;font-weight:600;
color:var(--ink);box-shadow:var(--shadow);
transition:background .2s var(--ease),transform .18s var(--bounce)}
.map-open:hover{background:var(--secondary);color:#fff;border-color:var(--secondary)}
.map-open:active{transform:scale(.96)}
/* ============ LOG AN UPDATE (U capital, real flows) ============ */
.logbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
background:linear-gradient(140deg,rgba(181,37,85,.18),rgba(0,119,200,.14) 60%,rgba(0,164,153,.12));
border:1px solid var(--hair-2)}
.logbar .tx{flex:1;min-width:230px}
.logbar h3{margin-bottom:6px}
.logbar p{font-size:14px;color:var(--ink-2)}
.flows{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:22px;width:100%}
@media(max-width:900px){.flows{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px){.flows{grid-template-columns:repeat(3,1fr)}}
.flow{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px;
border-radius:var(--r-md);background:var(--raise-2);border:1px solid transparent;
transition:transform .2s var(--bounce),background .2s var(--ease),border-color .2s var(--ease)}
.flow:hover{background:var(--hair);transform:translateY(-2px)}
.flow:active{transform:scale(.95)}
.flow .fi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
color:#fff}
.flow span{font-size:11.5px;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.25}
/* ============ RESOURCE CARDS (Y illustrations + Z photography) ============ */
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.arrows{display:flex;gap:9px}
.arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--hair-2);display:grid;
place-items:center;color:var(--ink);background:var(--raise);
transition:background .2s var(--ease),transform .18s var(--bounce),opacity .2s var(--ease)}
.arrow:hover{background:var(--raise-2)}
.arrow:active{transform:scale(.9)}
.arrow[disabled]{opacity:.3;cursor:default}
.rcard{position:relative;flex:0 0 min(400px,80vw);height:330px;border-radius:var(--r-lg);
overflow:hidden;scroll-snap-align:start;box-shadow:var(--shadow);isolation:isolate;
border:1px solid var(--hair)}
.rcard .plate{position:absolute;inset:0;z-index:0;transition:transform .7s var(--ease)}
.rcard:hover .plate{transform:scale(1.05)}
.rcard .plate img{width:100%;height:100%;object-fit:cover}
/* illustration variant: white-plate art on a tint, multiply drops the white */
.rcard .plate.illus{display:grid;place-items:center}
.rcard .plate.illus img{width:74%;height:auto;object-fit:contain;mix-blend-mode:multiply}
.plate.tint-mag{background:linear-gradient(150deg,#FBE9F0,#F5D9E4)}
.plate.tint-cyan{background:linear-gradient(150deg,#EAF4FC,#D9E9F6)}
.rcard .scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(to top,rgba(5,9,17,.94) 6%,rgba(5,9,17,.46) 46%,transparent 76%)}
.rcard .body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px;color:#fff}
.rcard .chip{display:inline-block;padding:5px 12px;border-radius:999px;font-size:10px;font-weight:700;
letter-spacing:.06em;text-transform:uppercase;margin-bottom:11px;color:#fff}
.chip-mag{background:var(--secondary)}
.chip-cyan{background:var(--cyan)}
.chip-teal{background:var(--teal)}
.rcard h4{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.015em;
margin-bottom:6px}
.rcard p{font-size:14px;color:rgba(255,255,255,.8);max-width:300px}
.rcard .go{position:absolute;right:20px;bottom:22px;z-index:3;width:44px;height:44px;border-radius:50%;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);color:#fff;
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;place-items:center;
transition:background .22s var(--ease),color .22s var(--ease),transform .24s var(--bounce)}
.rcard:hover .go{background:#fff;color:var(--secondary);transform:scale(1.08)}
/* ============ TONIGHT + COMMUNITY ============ */
.row-2{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gutter);align-items:stretch}
@media(max-width:1000px){.row-2{grid-template-columns:1fr}}
.photopanel{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:flex-end;min-height:330px}
.photopanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.photopanel .scrim{position:absolute;inset:0;z-index:1;
background:linear-gradient(165deg,rgba(6,10,20,.68) 0%,rgba(6,10,20,.92) 56%,rgba(4,7,14,.97) 100%)}
.photopanel .in{position:relative;z-index:2;padding:28px;color:#fff}
.photopanel .eyebrow{color:rgba(255,255,255,.6);letter-spacing:.15em;display:block;margin-bottom:11px}
.photopanel h3{margin-bottom:14px}
.win{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
background:rgba(148,97,10,.34);border:1px solid rgba(240,180,60,.4);font-size:12px;font-weight:700;
color:#F2CE7E;margin-bottom:16px}
.prow{display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:center;padding:11px 0;
border-top:1px solid rgba(255,255,255,.12)}
.prow .tm{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.44)}
.prow .ti{display:block;font-size:14.5px;font-weight:600}
.prow .ts{display:block;font-size:12.5px;color:rgba(255,255,255,.55)}
.prow.hot .ti{color:#F2CE7E}
.standby{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.66)}
.standby .av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
font-size:11px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--cyan),var(--teal))}
.standby .on{width:8px;height:8px;border-radius:50%;background:var(--teal-soft);margin-left:auto;
flex-shrink:0}
.community .in{max-width:520px}
.community h2{margin-bottom:10px}
.community>.in>p{font-size:15.5px;color:rgba(255,255,255,.78);margin-bottom:20px}
.stack{display:flex;align-items:center;margin-bottom:20px}
.stack span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;
font-weight:700;color:#fff;border:2.5px solid rgba(8,12,21,.9);margin-left:-11px;
transition:transform .24s var(--bounce)}
.stack span:first-child{margin-left:0}
.community:hover .stack span{transform:translateY(-3px)}
.stack .more{background:rgba(255,255,255,.2)}
/* ============ FOOTER LOCKUP ============ */
.footlock{margin-top:var(--section-gap);padding-top:30px;border-top:1px solid var(--hair);
display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.footlock .left{display:flex;align-items:center;gap:14px}
.footlock img{height:24px;width:auto}
html[data-theme="dark"] .footlock img{filter:brightness(1.18) saturate(1.1)}
.footlock .rule{width:1px;height:20px;background:var(--hair-2)}
.footlock .sub{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--ink-2);
letter-spacing:.03em}
.footlock p{font-size:13px;color:var(--ink-3)}
.footlock a{color:var(--secondary-soft);font-weight:600}
html[data-theme="light"] .footlock a{color:var(--secondary)}
/* ============ FLOATING TAB BAR ============
Its CSS moved out to nx-tabbar.css, beside nx-tabbar.js which owns its
markup and behaviour. What used to sit here was a copy of the block in
companion.html, so home and every other page each carried their own
definition of one widget; one of the two was always going to be edited
alone. Every page that loads this file also loads nx-tabbar.css.
============================================ */
/* ============ SHEETS (O card presentation) ============ */
.backdrop{position:fixed;inset:0;z-index:80;background:rgba(4,7,14,.5);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;
transition:opacity .35s var(--ease)}
.backdrop.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:90;left:50%;bottom:0;width:min(680px,100%);
transform:translateX(-50%) translateY(100%);max-height:90vh;display:flex;flex-direction:column;
background:linear-gradient(178deg,#1B2440 0%,#141C31 42%,#0F1626 100%);
-webkit-backdrop-filter:saturate(180%) blur(40px);backdrop-filter:saturate(180%) blur(40px);
border:1px solid var(--hair-2);border-bottom:none;border-radius:var(--r-xl) var(--r-xl) 0 0;
box-shadow:0 -10px 46px rgba(0,0,0,.5);transition:transform .52s var(--spring);will-change:transform}
html[data-theme="light"] .sheet{background:linear-gradient(178deg,#FFFFFF,#F6F8FC)}
.sheet.on{transform:translateX(-50%) translateY(0)}
.grabber{width:38px;height:5px;border-radius:3px;background:var(--ink-3);margin:10px auto 0;
flex-shrink:0;opacity:.5}
.sheet-head{padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;
border-bottom:1px solid var(--hair);flex-shrink:0}
.sheet-head h3{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.025em}
.sheet-body{padding:24px 26px 40px;overflow-y:auto}
.sheet-body>*{opacity:0;transform:translateY(10px)}
.sheet.on .sheet-body>*{animation:rise .5s var(--spring) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.close-btn{width:32px;height:32px;border-radius:50%;background:var(--raise-2);display:grid;
place-items:center;color:var(--ink-2);flex-shrink:0;
transition:background .2s,transform .18s var(--bounce)}
.close-btn:hover{background:var(--hair)}
.close-btn:active{transform:scale(.88)}
.sheet-foot{padding:14px 26px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--hair);
display:flex;gap:10px;flex-shrink:0}
/* an equal split wrapped "Start a conversation" onto two lines. The action gets
the room it needs and the quiet button takes what is left. */
.sheet-foot .btn{white-space:nowrap}
#rvFoot{gap:12px}
#rvFoot .btn-quiet{flex:0 1 auto;min-width:110px;width:auto;padding-left:20px;padding-right:20px}
#rvFoot .btn-primary{flex:1 1 auto;width:auto}
@media(max-width:420px){
#rvFoot .btn{font-size:14px;padding-left:14px;padding-right:14px}
#rvFoot .btn-quiet{min-width:0}
}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;margin-bottom:18px}
.stats .s{padding:18px;border-radius:var(--r-md);background:var(--raise-2);border:1px solid var(--hair)}
.stats .s b{display:block;font-family:var(--display);font-size:25px;font-weight:700;
letter-spacing:-.03em;margin-bottom:3px}
.stats .s span{font-size:12.5px;color:var(--ink-2)}
.ladder{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.rung{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:14px;padding:12px 14px;
border-radius:var(--r-md);transition:background .2s var(--ease)}
.rung:hover{background:var(--raise-2)}
.rung .d{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.rung .l{font-size:14px;color:var(--ink-2)}
.rung.done .d{color:var(--teal-soft)} .rung.done .l{color:var(--ink)}
.rung.now{background:rgba(181,37,85,.14);border:1px solid rgba(181,37,85,.28)}
.rung.now .d{color:var(--secondary-soft)} .rung.now .l{color:var(--ink)}
.rung .st{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
background:var(--raise-2);color:var(--ink-3)}
.rung.done .st{background:var(--teal);color:#fff}
.rung.now .st{background:var(--secondary);color:#fff}
.why{padding:20px;border-radius:var(--r-md);
background:linear-gradient(140deg,rgba(0,119,200,.18),rgba(0,164,153,.12));
border:1px solid rgba(0,119,200,.24)}
.why .lab{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--cyan-soft);margin-bottom:9px}
html[data-theme="light"] .why .lab{color:var(--cyan)}
.why q{font-size:17px;font-style:italic;line-height:1.45;display:block;quotes:none}
.bars{display:flex;align-items:flex-end;gap:8px;height:150px;margin:10px 0 18px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;
justify-content:flex-end}
.bars .b i{width:100%;border-radius:7px 7px 3px 3px;height:0;transition:height .9s var(--spring);
background:linear-gradient(180deg,var(--cyan-soft),rgba(0,119,200,.3))}
.bars .b.hi i{background:linear-gradient(180deg,var(--teal-soft),rgba(0,164,153,.3))}
.bars .b span{font-size:11px;color:var(--ink-3);font-weight:600}
.opt{display:flex;align-items:center;gap:15px;padding:17px;border-radius:var(--r-md);
background:var(--raise-2);border:1px solid var(--hair);width:100%;margin-bottom:10px;
transition:background .2s var(--ease),transform .2s var(--ease)}
.opt:hover{background:var(--hair);transform:translateX(4px)}
.opt .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
color:#fff}
.opt b{display:block;font-size:15px;font-weight:600;margin-bottom:2px}
.opt span{display:block;font-size:13px;color:var(--ink-2)}
/* the real check-in scale: same values and labels as production */
.scale{display:flex;gap:8px;margin:6px 0 20px}
.scale button{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;
border-radius:var(--r-md);background:var(--raise-2);border:1px solid transparent;
transition:all .22s var(--bounce)}
.scale button:hover{background:var(--hair);transform:translateY(-2px)}
.scale button[aria-checked="true"]{background:rgba(181,37,85,.2);border-color:var(--secondary)}
.scale .g{font-size:26px;line-height:1}
.scale .w{font-size:11px;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.2}
.scale button[aria-checked="true"] .w{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip-b{padding:10px 16px;border-radius:999px;background:var(--raise-2);border:1px solid var(--hair);
font-size:14px;font-weight:500;color:var(--ink-2);
transition:all .2s var(--bounce)}
.chip-b:hover{background:var(--hair)}
.chip-b:active{transform:scale(.95)}
.chip-b[aria-pressed="true"]{background:rgba(0,164,153,.2);border-color:var(--teal);color:var(--teal-soft)}
/* ---- 3. the options are the interface, so they get the room ----
Small pills left two thirds of the panel empty on a Yes/No step. These are
cards, sized by how many there are, and a single-answer step MOVES ON BY
ITSELF once you pick, because tapping Yes then hunting for Continue is a
tap you should not have to make. */
.opts{display:grid;gap:10px;margin-bottom:14px;align-content:center;flex:1}
.opts.n2{grid-template-columns:1fr 1fr}
.opts.n3{grid-template-columns:repeat(3,1fr)}
.opts.many{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
@media(max-width:700px){.opts.n3,.opts.many{grid-template-columns:1fr 1fr}}
.opt-card{position:relative;display:flex;align-items:center;gap:11px;text-align:left;
padding:15px 16px;border-radius:var(--r-md);background:var(--raise-2);
border:1px solid var(--hair);font-size:14.5px;font-weight:600;color:var(--ink-1);
overflow:hidden;transition:transform .22s var(--bounce),border-color .22s var(--ease),
background .22s var(--ease),box-shadow .22s var(--ease)}
.opts.n2 .opt-card{min-height:108px;max-height:170px;font-size:17px;justify-content:center;text-align:center}
.opts.n3 .opt-card{min-height:78px}
.opt-card::before{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;
background:linear-gradient(135deg,rgba(181,37,85,.22),rgba(0,164,153,.16));
transition:opacity .22s var(--ease)}
.opt-card:hover{transform:translateY(-2px);border-color:var(--edge-hi);
box-shadow:0 8px 22px rgba(0,0,0,.28)}
.opt-card:hover::before{opacity:.5}
.opt-card:active{transform:scale(.975)}
.opt-card > *{position:relative}
.opt-card .tick{width:22px;height:22px;border-radius:50%;flex-shrink:0;
border:1.6px solid var(--edge-hi);display:grid;place-items:center;color:transparent;
transition:all .22s var(--bounce)}
.opts.n2 .opt-card .tick{position:absolute;top:12px;right:12px}
.opt-card[aria-pressed="true"]{background:rgba(0,164,153,.16);border-color:var(--teal);
color:var(--ink-1)}
.opt-card[aria-pressed="true"] .tick{background:var(--teal);border-color:var(--teal);
color:#fff;transform:scale(1.06)}
/* the beat between choosing and moving on, so the choice is seen to land */
.opt-card.chosen{border-color:var(--teal);background:rgba(0,164,153,.24)}
.opt-card.chosen::after{content:'';position:absolute;inset:0;border-radius:inherit;
background:radial-gradient(circle at var(--px,50%) var(--py,50%),
rgba(79,209,199,.5),transparent 62%);animation:optpulse .42s var(--ease) forwards}
@keyframes optpulse{from{opacity:.85;transform:scale(.5)}to{opacity:0;transform:scale(1.9)}}
@media(prefers-reduced-motion:reduce){.opt-card.chosen::after{animation:none;opacity:0}}
html[data-theme="light"] .opt-card{background:#fff;border-color:#DDE3EC}
html[data-theme="light"] .opt-card[aria-pressed="true"]{background:rgba(0,164,153,.12)}
/* the answers already given, so the aside is never empty and the flow has memory */
.fs-trail{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);
display:flex;flex-direction:column;gap:7px}
.fs-trail .tr{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;
color:var(--ink-3);line-height:1.4}
.fs-trail .tr b{display:block;color:var(--ink-2);font-weight:600}
.fs-trail .tr .n{width:17px;height:17px;border-radius:50%;flex-shrink:0;margin-top:1px;
background:var(--teal);color:#fff;font-size:9.5px;font-weight:700;
display:grid;place-items:center}
.fs-hint{margin-top:12px;font-size:12px;color:var(--ink-3);line-height:1.45}
/* ---- 8. the panel becomes Rivo once a log is saved ----
Rivo does NOT invent what it noticed. The observations come from the
deterministic 28 day engine (checkin_insights.py, no AI) and from the
server's own flag rules, so nothing on screen is a guess. The wording can
come from the Nexus governed coach, and when that is unavailable the
deterministic sentences stand on their own. */
.coachstage{display:none;flex-direction:column;flex:1;min-height:0}
.logbar.coached .flowstage,
.logbar.coached.staged .flowstage{display:none !important}
.logbar.coached .coachstage,
.logbar.coached.staged .coachstage{display:flex;width:100%;
animation:rise .5s var(--spring) forwards}
.logbar.coached .tx,
.logbar.coached #flows{display:none}
.cs-top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.cs-orb{width:46px;height:46px;border-radius:50%;flex-shrink:0;
background:linear-gradient(135deg,#B52555,#0077C8 52%,#00A499);
display:flex;align-items:center;justify-content:center;line-height:0;color:#fff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 18px rgba(0,119,200,.28)}
.cs-orb svg{width:23px;height:23px;display:block}
.cs-top b{display:block;font-family:var(--display);font-size:17px;font-weight:700;
letter-spacing:-.02em}
/* SPECIFICITY: `.cs-top span` is (0,1,1) and beat `.cs-orb` at (0,1,0), so the
disc laid out as a block and the glyph sat high and left. Third time this
shape of collision has appeared here, so the orb is qualified. */
.cs-top > span:not(.cs-orb){display:block;font-size:12.5px;color:var(--ink-3)}
.cs-top .cs-orb{display:flex;align-items:center;justify-content:center;line-height:0}
/* Rivo's opening line runs the full width of the panel. It is the one piece
of generated text here, so it gets the room to be read as a sentence rather
than a column squeezed against the left. */
.cs-lead{font-size:16.5px;line-height:1.55;color:var(--ink-1);margin-bottom:18px;
max-width:none;padding:15px 18px;border-radius:var(--r-md);
background:rgba(255,255,255,.05);border:1px solid var(--hair)}
html[data-theme="light"] .cs-lead{background:#F2F4F8;border-color:#DDE3EC}
.cs-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:start;flex:1;
min-height:0}
@media(max-width:860px){.cs-grid{grid-template-columns:1fr}}
.cs-list{display:flex;flex-direction:column;gap:9px}
.cs-item{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-md);
background:var(--raise-2);border:1px solid var(--hair)}
.cs-item .ic{width:28px;height:28px;border-radius:9px;flex-shrink:0;display:grid;
place-items:center;color:#fff;background:var(--cyan)}
.cs-item.warn .ic{background:var(--gold)}
.cs-item.risk{background:rgba(180,35,24,.14);border-color:rgba(255,120,120,.34)}
.cs-item.risk .ic{background:var(--system-error)}
.cs-item.good .ic{background:var(--teal)}
.cs-item b{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.cs-item span{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.cs-side{padding:17px;border-radius:var(--r-md);background:var(--raise);
border:1px solid var(--hair)}
.cs-side .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:9px}
.cs-side p{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-bottom:11px}
.cs-do{display:flex;flex-direction:column;gap:7px}
.cs-do button{text-align:left;padding:10px 12px;border-radius:var(--r-sm);
background:var(--raise-2);border:1px solid var(--hair);font-size:13px;font-weight:600;
transition:background .2s var(--ease),transform .2s var(--bounce)}
.cs-do button:hover{background:var(--hair);transform:translateX(3px)}
.cs-acts{display:flex;gap:10px;margin-top:20px}
.cs-acts .btn{flex:1}
.cs-src{font-size:11.5px;color:var(--ink-3);margin-top:12px;line-height:1.45}
.cs-thinking{display:flex;gap:6px;padding:6px 0 2px}
.cs-thinking i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);
animation:think 1.3s var(--ease) infinite}
.cs-thinking i:nth-child(2){animation-delay:.16s}
.cs-thinking i:nth-child(3){animation-delay:.32s}
@keyframes think{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
/* ---- the beat between saving and Rivo ----
A log going in is a small act of trust, so it gets a moment of its own
before anything starts interpreting it, AND the coach behind it is not
shown until it is finished. A half built panel with three dots in it reads
as the app struggling, which is the opposite of what this moment is for.
OPAQUE, NOT A VEIL. This used to be a translucent wash with a 3px blur, so
the questions you had just answered ghosted through it and the whole thing
read as an overlay rather than the container itself changing. It now
carries the logbar's OWN gradient over a solid canvas, so it is
indistinguishable from the card and the transition is submit -> review ->
coach in one surface. */
.cs-landing{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;
align-items:center;justify-content:center;gap:13px;text-align:center;padding:26px;
background:
linear-gradient(140deg,rgba(181,37,85,.18),rgba(0,119,200,.14) 60%,rgba(0,164,153,.12)),
var(--canvas);
transition:opacity .34s var(--ease)}
.logbar.landing .cs-landing{display:flex}
/* fading OUT is what hands over to the finished panel underneath */
.logbar.landing.handover .cs-landing{opacity:0;pointer-events:none}
.cs-tick{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
background:var(--teal);color:#fff;
animation:tickpop .5s var(--bounce) forwards;transform:scale(.4);opacity:0}
.cs-tick svg{width:36px;height:36px}
.cs-tick svg path{stroke-dasharray:32;stroke-dashoffset:0;
animation:tickdraw .64s var(--ease) forwards}
@keyframes tickpop{to{transform:scale(1);opacity:1}}
@keyframes tickdraw{0%,34%{stroke-dashoffset:32}100%{stroke-dashoffset:0}}
.cs-landing b{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em;
opacity:0;animation:rise .45s var(--spring) .3s forwards;position:relative;z-index:2}
/* SPECIFICITY: `.cs-landing span` is (0,1,1) and the tick is a , so this
was beating `.cs-tick` at (0,1,0) and replacing tickpop/tickdraw with rise.
The tick still appeared, so nothing looked broken, which is exactly why it
went unnoticed. Fourth time this shape has appeared on this page: a generic
descendant selector quietly eating a component's own rule. */
.cs-landing > span:not(.cs-tick){font-size:13px;color:var(--ink-2);opacity:0;
animation:rise .45s var(--spring) .42s forwards;position:relative;z-index:2}
.cs-landing .wave{display:flex;gap:5px;margin-top:2px;opacity:0;
animation:rise .4s var(--spring) .58s forwards}
.cs-landing .wave i{width:6px;height:6px;border-radius:50%;background:var(--secondary-soft);
animation:think 1.1s var(--ease) infinite}
.cs-landing .wave i:nth-child(2){animation-delay:.13s}
.cs-landing .wave i:nth-child(3){animation-delay:.26s}
/* ---- the celebration, for a day with none of it ----
A person logging that they did not drink or use is telling us the thing the
whole service is for, and the old flow answered it with the same neutral
tick it gives a relapse. This is warm, brief and does not overclaim: no
streak, no score, no "well done" from a machine that does not know what the
day cost. It says what happened and that it counts. */
.logbar.celebrate .cs-landing{
background:
radial-gradient(620px 420px at 50% 38%,rgba(0,164,153,.30),transparent 68%),
linear-gradient(140deg,rgba(0,164,153,.20),rgba(0,119,200,.14) 62%,rgba(181,37,85,.10)),
var(--canvas)}
.logbar.celebrate .cs-tick{background:var(--teal);
box-shadow:0 0 0 0 rgba(79,209,199,.55);animation:tickpop .5s var(--bounce) forwards,
halo 1.5s var(--ease) .45s 2}
@keyframes halo{
0%{box-shadow:0 0 0 0 rgba(79,209,199,.5)}
70%{box-shadow:0 0 0 26px rgba(79,209,199,0)}
100%{box-shadow:0 0 0 0 rgba(79,209,199,0)}}
/* Rays, drawn with one element and a conic gradient rather than a pile of
nodes, so there is nothing to clean up and nothing to leak. */
.cs-tick{position:relative}
.cs-tick svg{position:relative;z-index:1}
.cs-rays{position:absolute;width:186px;height:186px;border-radius:50%;pointer-events:none;
top:50%;left:50%;margin:-93px 0 0 -93px;opacity:0;z-index:0;
background:conic-gradient(from 0deg,
rgba(79,209,199,.55) 0 3deg,transparent 3deg 30deg,
rgba(255,255,255,.4) 30deg 33deg,transparent 33deg 60deg,
rgba(79,209,199,.5) 60deg 63deg,transparent 63deg 90deg,
rgba(224,86,138,.4) 90deg 93deg,transparent 93deg 120deg,
rgba(79,209,199,.5) 120deg 123deg,transparent 123deg 150deg,
rgba(255,255,255,.35) 150deg 153deg,transparent 153deg 180deg,
rgba(79,209,199,.55) 180deg 183deg,transparent 183deg 210deg,
rgba(224,86,138,.35) 210deg 213deg,transparent 213deg 240deg,
rgba(79,209,199,.5) 240deg 243deg,transparent 243deg 270deg,
rgba(255,255,255,.35) 270deg 273deg,transparent 273deg 300deg,
rgba(79,209,199,.5) 300deg 303deg,transparent 303deg 330deg,
rgba(224,86,138,.35) 330deg 333deg,transparent 333deg 360deg);
-webkit-mask:radial-gradient(circle,transparent 34%,#000 40%,#000 62%,transparent 68%);
mask:radial-gradient(circle,transparent 34%,#000 40%,#000 62%,transparent 68%)}
.logbar.celebrate .cs-rays{animation:burst 1.15s var(--spring) .1s forwards}
@keyframes burst{
0%{opacity:0;transform:scale(.35) rotate(0deg)}
35%{opacity:1}
100%{opacity:0;transform:scale(1.5) rotate(42deg)}}
@media(prefers-reduced-motion:reduce){
.cs-rays{display:none}
.logbar.celebrate .cs-tick{animation:none;opacity:1;transform:none}
}
/* The review steps. EACH ONE MARKS REAL WORK and only ticks when that work
has actually finished: the row was saved, /api/checkins/v2/insights came
back, the governed coach answered. A progress display that advances on a
timer is a lie, and on this screen it would be a lie about whether
somebody's disclosure had been read. */
.cs-steps{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:6px;
position:relative;z-index:2;
padding:14px 18px;border-radius:var(--r-md);min-width:min(320px,100%);
background:var(--raise);border:1px solid var(--hair);
opacity:0;animation:rise .45s var(--spring) .5s forwards}
.cs-steps li{display:flex;align-items:center;gap:11px;font-size:13px;text-align:left;
color:var(--ink-3);transition:color .3s var(--ease)}
.cs-steps li .d{width:17px;height:17px;border-radius:50%;flex-shrink:0;position:relative;
border:1.5px solid var(--hair-2);transition:background .3s var(--ease),border-color .3s var(--ease)}
.cs-steps li .d::after{content:'';position:absolute;left:4px;top:6.5px;width:7px;height:3.5px;
border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(.4);
opacity:0;transition:opacity .22s var(--ease),transform .3s var(--bounce)}
.cs-steps li.on{color:var(--ink-1);font-weight:600}
.cs-steps li.on .d{border-color:var(--secondary-soft);
animation:steppulse 1.1s var(--ease) infinite}
.cs-steps li.done{color:var(--ink-2)}
.cs-steps li.done .d{background:var(--teal);border-color:var(--teal);animation:none}
.cs-steps li.done .d::after{opacity:1;transform:rotate(-45deg) scale(1)}
@keyframes steppulse{0%,100%{box-shadow:0 0 0 0 rgba(224,86,138,.5)}
70%{box-shadow:0 0 0 6px rgba(224,86,138,0)}}
/* Nothing on this overlay may DEPEND on an animation to be seen. With motion
turned off the tick, the two lines and the steps must simply be there,
because an invisible review screen reads as a frozen app at the exact
moment somebody is waiting to hear what was made of what they wrote. */
@media(prefers-reduced-motion:reduce){
.cs-steps{animation:none;opacity:1}
.cs-steps li.on .d{animation:none;border-color:var(--secondary-soft)}
.cs-tick{animation:none;opacity:1;transform:none}
.cs-tick svg path{animation:none;stroke-dashoffset:0}
.cs-landing b,.cs-landing > span:not(.cs-tick){animation:none;opacity:1;transform:none}
}
/* ---- coach, option D: the pattern gets the room to be a statement ---- */
.cs-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;flex:1;
min-height:0}
@media(max-width:900px){.cs-split{grid-template-columns:1fr}}
.cs-big{padding:22px;border-radius:var(--r-md);display:flex;flex-direction:column;
background:linear-gradient(150deg,rgba(181,37,85,.26),rgba(0,119,200,.18) 72%);
border:1px solid rgba(224,86,138,.34)}
.cs-big .k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
color:var(--secondary-soft);margin-bottom:10px;display:block}
.cs-big h4{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.03em;
line-height:1.16;margin-bottom:10px}
@media(max-width:1100px){.cs-big h4{font-size:21px}}
.cs-big p{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:46ch}
.cs-big .nums{display:flex;gap:24px;margin-top:auto;padding-top:18px;flex-wrap:wrap}
.cs-big .nums div b{display:block;font-family:var(--display);font-size:26px;font-weight:700;
letter-spacing:-.03em;line-height:1}
.cs-big .nums div span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:4px}
.cs-big.quiet{background:var(--raise-2);border-color:var(--hair)}
.cs-big.quiet .k{color:var(--ink-3)}
.cs-stack{display:flex;flex-direction:column;gap:9px;min-width:0}
.cs-stack .cs-side{margin-top:auto}
/* ---- the space under the chart: when things happen, or which areas ----
The hour view is the deterministic engine's own 12 two-hour buckets from
06:00, and the area view is the dashboard's per-area counts. Neither can
show a figure that is not real, and each has an honest empty state. */
.wk-extra{margin-top:16px}
.wx-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:11px}
.wx-t{font-size:13px;font-weight:600;color:var(--ink-2)}
.wx-seg{display:flex;gap:2px;padding:2px;border-radius:10px;background:var(--raise-2);
border:1px solid var(--hair);flex-shrink:0}
.wx-seg button{padding:5px 11px;border-radius:8px;font-size:12px;font-weight:600;
color:var(--ink-3);transition:background .2s var(--ease),color .2s var(--ease)}
.wx-seg button[aria-selected="true"]{background:var(--secondary);color:#fff}
.wx-pane[hidden]{display:none}
.hrow{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-bottom:7px}
.hrow i{display:block;height:30px;border-radius:5px;background:var(--raise-2);
border:1px solid var(--hair);transition:background .5s var(--ease)}
.hrow i.peak{box-shadow:0 0 0 1.5px var(--gold-soft)}
.hlabels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3)}
.hnote{font-size:12.5px;color:var(--ink-2);margin-top:11px;line-height:1.5;
padding:11px 13px;border-radius:var(--r-sm);background:rgba(185,138,47,.13);
border:1px solid rgba(242,206,126,.28)}
.hnote.plain{background:var(--raise);border-color:var(--hair);color:var(--ink-3)}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px}
.ar{padding:11px 12px;border-radius:var(--r-sm);background:var(--raise-2);
border:1px solid var(--hair)}
.ar .r{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ar .d{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ar .n{font-size:12.5px;font-weight:600;flex:1}
.ar .v{font-family:var(--display);font-size:15px;font-weight:700;
font-variant-numeric:tabular-nums}
.ar .t{display:block;height:6px;border-radius:4px;background:var(--hair);overflow:hidden}
.ar .t i{display:block;height:100%;border-radius:4px;transition:width .9s var(--spring)}
.ar .s{display:block;font-size:11.5px;color:var(--ink-3);margin-top:6px}
.flabel{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:10px}
.stepdots{display:flex;gap:6px;align-items:center}
.stepdots i{width:7px;height:7px;border-radius:50%;background:var(--hair);display:block;
transition:background .3s var(--ease),width .3s var(--ease)}
.stepdots i.on{background:var(--secondary);width:20px;border-radius:4px}
/* ============ TOAST ============ */
.toast{position:fixed;bottom:104px;left:50%;transform:translateX(-50%) translateY(24px);z-index:120;
display:flex;align-items:center;gap:11px;padding:13px 22px;border-radius:999px;
background:var(--primary-container);color:#fff;border:1px solid var(--hair-2);
box-shadow:var(--shadow-lg);font-size:14.5px;font-weight:500;opacity:0;pointer-events:none;
transition:opacity .28s var(--ease),transform .42s var(--bounce)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .tk{width:20px;height:20px;border-radius:50%;background:var(--teal);display:grid;
place-items:center;flex-shrink:0}
/* ==========================================================================
AURORA. THE ONE NOTIFICATION GROUND, chosen from six at /tn-index.
WHY IT IS HERE AND NOT IN SEVEN PLACES. There are seven separate toast
implementations on this host: .toast, .cx-toast, .mx-toast, .md-toast,
.ks-toast, .rn-toast, .rx-toast and .sp-toast, in seven stylesheets, with
three different function signatures and about seventy five call sites
between them. Every one of them is the same object: fixed, centred, just
above the tab bar, sliding up as it fades in. They disagree only about what
they are made of.
So the GROUND is stated once, in the sheet every page already loads, and
the seven keep their own positions, their own transitions and their own
internals. Nothing in those files is edited, which matters while other work
is open in them, and nothing new is added to any page's payload.
THE SPECIFICITY IS DELIBERATE AND IS THE WHOLE TRICK. `body .x-toast` is
(0,1,1), which beats the (0,1,0) of each file's own base rule, so this
ground wins. Every one of those files ALSO has an `.x-toast.on` rule at
(0,2,0), which still beats this, so each keeps its own idea of how it
arrives and leaves. Ground from here, behaviour from there, and neither has
to know about the other.
MEANING IS NEVER CARRIED BY THE GLOW ALONE. --tn-glow only tints the light
behind the glass; every one of these components already prints a word and
most print an icon, and none of that changes.
========================================================================== */
body .toast, body .cx-toast, body .mx-toast, body .md-toast,
body .ks-toast, body .rn-toast, body .rx-toast, body .sp-toast{
background:rgba(14,19,32,.74);
border:1px solid var(--hair);
border-radius:20px;
box-shadow:0 20px 56px -14px rgba(0,0,0,.7);
backdrop-filter:var(--blur);
-webkit-backdrop-filter:var(--blur);
color:var(--ink);
/* isolation, so the glow below has a stacking context of its own to sit in
rather than escaping to the page and painting behind the whole panel. */
isolation:isolate;
overflow:hidden;
}
/* A negative z-index child paints ABOVE its parent's own background and BELOW
the parent's in-flow content, which is exactly where a light behind glass
belongs and is why this needs no wrapper element and no markup change. */
body .toast::before, body .cx-toast::before, body .mx-toast::before,
body .md-toast::before, body .ks-toast::before, body .rn-toast::before,
body .rx-toast::before, body .sp-toast::before{
content:'';position:absolute;inset:-60% -20%;z-index:-1;pointer-events:none;
background:radial-gradient(42% 60% at 22% 60%,var(--tn-glow,var(--teal)),transparent 70%);
opacity:.30;
animation:tn-aurora 14s ease-in-out infinite;
}
@keyframes tn-aurora{
0%,100%{transform:translate3d(-6%,2%,0) scale(1)}
50%{transform:translate3d(8%,-3%,0) scale(1.18)}
}
/* A failure is the one thing here that must not read as a confirmation, so it
is the one case where the light changes colour. Every component that has a
warning state already marks it with one of these. */
/* THE SHARED NOTIFICATION MARKUP. One box, built by NX.notify in nx-core.js,
replacing seven that were all the same object. It carries .toast as well as
.nx-toast so it inherits the position, the transition and the on/off state
that were already correct, and only its insides are new. */
.nx-toast{align-items:flex-start;gap:12px;padding:14px 16px;max-width:min(520px,calc(100vw - 36px));
text-align:left;font-weight:400}
.nx-toast-ic{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;
color:var(--teal-soft)}
.nx-toast-problem .nx-toast-ic{color:#F2B0B0}
.nx-toast-bd{display:flex;flex-direction:column;gap:3px;min-width:0}
.nx-toast-word{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:#F2B0B0}
.nx-toast-title{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink)}
.nx-toast-msg{font-size:14.5px;line-height:1.45;color:var(--ink)}
/* No underline in any state, including hover. Standing rule. */
.nx-toast-link{margin-top:4px;font-size:13.5px;font-weight:600;color:var(--teal-soft);
text-decoration:none}
.nx-toast-link:hover{color:var(--teal);text-decoration:none}
.nx-toast-act{flex:none;align-self:center;background:rgba(255,255,255,.10);color:var(--ink);
border:1px solid var(--hair-2);border-radius:999px;padding:8px 15px;font:inherit;
font-size:13.5px;font-weight:600;cursor:pointer}
.nx-toast-act:hover{background:rgba(255,255,255,.17)}
.nx-toast-x{flex:none;align-self:flex-start;width:26px;height:26px;display:grid;place-items:center;
background:transparent;color:var(--ink-3);border:0;border-radius:50%;cursor:pointer;padding:0}
.nx-toast-x:hover{color:var(--ink);background:rgba(255,255,255,.09)}
.nx-toast-act:focus-visible,.nx-toast-x:focus-visible{outline:2px solid var(--secondary-soft);
outline-offset:2px}
/* Visually hidden but IN the accessibility tree: display:none or hidden would
take the live region out of it and it would announce nothing at all. */
.nx-toast-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
body .md-toast.t-warn, body .rn-toast.warn, body .rx-toast.warn,
body .sp-toast.warn, body .ks-toast.warn, body .cx-toast.warn{--tn-glow:#C0425A}
/* ABSENCE OF ANIMATION MUST NEVER READ AS ABSENCE OF CONTENT: the light holds
at its resting opacity rather than being removed. */
@media (prefers-reduced-motion: reduce){
body .toast::before, body .cx-toast::before, body .mx-toast::before,
body .md-toast::before, body .ks-toast::before, body .rn-toast::before,
body .rx-toast::before, body .sp-toast::before{animation:none;transform:none}
}
@media(max-width:860px){
.topnav{display:none}
.page{padding:20px 18px 150px}
.topbar-in{padding:11px 18px}
.lockup .sub{display:none}
.opener{min-height:470px}
.panel{padding:22px}
.appt-body{padding:24px 22px}
.sheet{max-height:93vh}
:root{--gutter:18px;--section-gap:38px}
}
@media(prefers-reduced-motion:reduce){
.rail{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important}
.sheet-body>*{opacity:1;transform:none}
body.sheet-open .shell{transform:none;filter:none}
.chart .line{stroke-dashoffset:0}
.chart .area,.chart .pt{opacity:1}
}
/* ---- light-mode corrections ---- */
/* hero glass keeps white type in both themes, so pin the colours */
html[data-theme="light"] .cd .lab{color:rgba(255,255,255,.62)}
html[data-theme="light"] .cd-foot .n,html[data-theme="light"] .streak .num{color:#fff}
html[data-theme="light"] .cd-foot .r,html[data-theme="light"] .streak .lab{color:rgba(255,255,255,.72)}
html[data-theme="light"] .rl{color:rgba(255,255,255,.8)}
html[data-theme="light"] .rl b,html[data-theme="light"] .rings .core b{color:#fff}
/* sheet internals: brand navy tint rather than neutral grey */
.sheet .stats .s,.sheet .opt,.sheet .scale button,.sheet .chip-b{
background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11)}
.sheet .opt:hover,.sheet .scale button:hover,.sheet .chip-b:hover{background:rgba(255,255,255,.1)}
.sheet .rung:hover{background:rgba(255,255,255,.05)}
html[data-theme="light"] .sheet .stats .s,html[data-theme="light"] .sheet .opt,
html[data-theme="light"] .sheet .scale button,html[data-theme="light"] .sheet .chip-b{
background:#EEF1F7;border-color:#DDE3EC}
/* the Thrive mark sits 2px low so its baseline lines up with Forward */
.lockup .thrive,.footlock .thrive{height:19px;width:auto;flex-shrink:0;position:relative;top:2px}
.footlock .thrive{height:17px}
@media(max-width:860px){.lockup .thrive{display:none}}
/* ---- appointment card in the hero ---- */
.apptcard{text-align:left}
.ac-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ac-kick{display:inline-flex;align-items:center;gap:7px;color:#DCEBFA;letter-spacing:.1em;
font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.livedot{width:7px;height:7px;border-radius:50%;background:var(--teal-soft);flex-shrink:0;
box-shadow:0 0 0 0 rgba(79,209,199,.6);animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(79,209,199,.5)}70%{box-shadow:0 0 0 10px rgba(79,209,199,0)}100%{box-shadow:0 0 0 0 rgba(79,209,199,0)}}
.ac-when{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.05em;
text-transform:uppercase}
.ac-title{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.022em;
color:#fff;margin-bottom:9px;line-height:1.2}
.ac-meta{display:flex;flex-direction:column;gap:5px;margin-bottom:18px;padding-bottom:16px;
border-bottom:1px solid rgba(255,255,255,.16)}
.ac-meta span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.72)}
.ac-meta svg{opacity:.75;flex-shrink:0}
.ac-pres{width:9px;height:9px;border-radius:50%;background:var(--teal-soft);margin-left:auto;
flex-shrink:0}
.ac-acts{display:flex;gap:8px;margin-top:16px}
.ac-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 12px;
border-radius:10px;font-size:13.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.2);
transition:background .2s var(--ease),transform .18s var(--bounce)}
.ac-btn:hover{background:rgba(255,255,255,.24)}
.ac-btn:active{transform:scale(.96)}
.ac-btn.primary{background:var(--secondary);border-color:transparent;flex:1;
white-space:nowrap;box-shadow:0 6px 18px rgba(181,37,85,.4)}
.ac-btn.icon{flex:0 0 44px;padding:11px 0}
.ac-btn.primary:hover{filter:brightness(1.12);background:var(--secondary)}
/* ---- rings as a control ---- */
.ringcard{width:100%;cursor:pointer;transition:transform .3s var(--bounce),border-color .25s var(--ease)}
.ringcard:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.38)}
.ringcard:active{transform:scale(.985)}
.ringcard:hover .rings{transform:scale(1.05)}
.rings{transition:transform .35s var(--bounce)}
.rl.open{margin-top:4px;padding-top:7px;border-top:1px solid rgba(255,255,255,.14);
color:#9FD2F5;font-weight:600;justify-content:flex-start;gap:5px}
.rl.open svg{transition:transform .22s var(--bounce)}
.ringcard:hover .rl.open svg{transform:translateX(4px)}
/* ---- ASK RIVO floating dock ---- */
.rivo{position:fixed;right:26px;bottom:104px;z-index:57;display:flex;align-items:center;gap:11px;
padding:9px 18px 9px 9px;border-radius:999px;background:var(--glass);border:1px solid var(--hair-2);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-hi);
transition:transform .3s var(--bounce),opacity .3s var(--ease)}
html[data-theme="light"] .rivo{background:rgba(255,255,255,.9);border-color:rgba(31,42,68,.1);
box-shadow:0 2px 8px rgba(31,42,68,.08),0 14px 34px rgba(31,42,68,.12)}
.rivo:hover{transform:translateY(-2px)}
.rivo:active{transform:scale(.96)}
body.sheet-open .rivo{transform:translateY(160%);opacity:0}
.rivo .orb{width:38px;height:38px;border-radius:50%;flex-shrink:0;position:relative;
background:conic-gradient(from 200deg,#B52555,#0077C8 45%,#00A499 78%,#B52555);
display:grid;place-items:center}
.rivo .orb::after{content:'';position:absolute;inset:4px;border-radius:50%;
background:var(--canvas);opacity:.82}
.rivo .orb svg{position:relative;z-index:1;color:var(--ink)}
.rivo .tx{display:flex;flex-direction:column;line-height:1.2}
.rivo .tx b{font-size:13.5px;font-weight:700}
.rivo .tx span{font-size:11.5px;color:var(--ink-3)}
@media(max-width:860px){.rivo{right:14px;bottom:96px;padding:8px 14px 8px 8px}
.rivo .tx span{display:none}}
.bigrings{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.bigrings .rings .core b{font-size:44px}
.bigrings .rings .fg{transition:stroke-dashoffset 1.5s var(--spring)}
/* A class-level display declaration BEATS the UA [hidden]{display:none}
rule, so every sheet was still laid out at the bottom of the viewport
and its upward box-shadow bled in as a dark band. Invisible against a
dark canvas, obvious in light mode. */
.sheet[hidden]{display:none}
/* ============ ROUND 9c ============ */
/* 1. Branded ambient field. The flat canvas read as dull, so the brand
gradient now sits behind the whole page and scales with the shell
during card presentation. */
.shell::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(1000px 700px at 8% -8%, rgba(181,37,85,.30), transparent 62%),
radial-gradient(1100px 780px at 96% 4%, rgba(0,119,200,.28), transparent 62%),
radial-gradient(900px 720px at 44% 106%, rgba(0,164,153,.24), transparent 62%),
radial-gradient(700px 520px at 78% 62%, rgba(123,75,158,.18), transparent 64%)}
html[data-theme="light"] .shell::before{
background:
radial-gradient(1000px 700px at 8% -8%, rgba(181,37,85,.13), transparent 62%),
radial-gradient(1100px 780px at 96% 4%, rgba(0,119,200,.13), transparent 62%),
radial-gradient(900px 720px at 44% 106%, rgba(0,164,153,.11), transparent 62%)}
.shell > *{position:relative;z-index:1}
/* 5. Top bar: nav lives in the floating tab bar, so the logos take the
centre and only the account controls stay on the right. */
.topbar-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.topnav{display:none}
.lockup{justify-self:center}
.bar-right{justify-self:end}
/* 2. Ask Rivo sits on the SAME LINE as the floating tab bar. */
.rivo{bottom:20px;right:26px}
@media(max-width:1180px){
/* on narrow desktops the pill would collide with the centred tab bar */
.rivo .tx{display:none}
.rivo{padding:9px;right:20px}
}
@media(max-width:860px){.rivo{bottom:12px;right:14px;padding:8px}}
/* 6. The hero TRANSFORMS into the map rather than opening a pull-up.
The content layer slides out, the map layer takes the whole hero. */
.opener-in{transition:opacity .38s var(--ease),transform .5s var(--spring)}
.opener.mapmode .opener-in{opacity:0;transform:translateY(-18px) scale(.98);pointer-events:none}
.heromap{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;
transition:opacity .45s var(--ease)}
.opener.mapmode .heromap{opacity:1;pointer-events:auto}
.heromap .canvasmap{position:absolute;inset:0}
.heromap .hm-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:30px;
text-align:center;color:rgba(255,255,255,.62);font-size:14px;
background:linear-gradient(150deg,#152036,#0C1220)}
/* the info rail floats over the map */
.hm-panel{position:absolute;left:24px;top:24px;bottom:24px;width:330px;z-index:2;
border-radius:var(--r-lg);padding:24px;overflow-y:auto;
background:var(--hero-glass);border:1px solid var(--hero-hair);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
box-shadow:inset 0 1px 0 var(--glass-hi),0 14px 34px rgba(0,0,0,.36);
transform:translateX(-16px);opacity:0;
transition:transform .5s var(--spring) .12s,opacity .4s var(--ease) .12s}
.opener.mapmode .hm-panel{transform:none;opacity:1}
@media(max-width:820px){.hm-panel{left:14px;right:14px;top:auto;bottom:14px;width:auto;max-height:56%}}
.hm-back{display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 11px;border-radius:999px;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;
font-size:13px;font-weight:600;margin-bottom:18px;
transition:background .2s var(--ease),transform .18s var(--bounce)}
.hm-back:hover{background:rgba(255,255,255,.26)}
.hm-back:active{transform:scale(.95)}
.hm-panel h3{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.024em;
color:#fff;margin-bottom:6px}
.hm-panel .addr{font-size:13.5px;color:rgba(255,255,255,.74);margin-bottom:18px;line-height:1.45}
.hm-modes{display:flex;gap:7px;margin-bottom:18px}
.hm-modes button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;
border-radius:11px;background:rgba(255,255,255,.1);border:1px solid transparent;color:#fff;
transition:all .2s var(--bounce)}
.hm-modes button:hover{background:rgba(255,255,255,.2)}
.hm-modes button[aria-pressed="true"]{background:rgba(0,119,200,.42);border-color:rgba(143,214,255,.6)}
.hm-modes .t{font-size:11.5px;font-weight:700}
.hm-modes .m{font-size:11px;opacity:.72}
.hm-row{display:flex;align-items:flex-start;gap:11px;padding:11px 0;font-size:13px;
color:rgba(255,255,255,.78);border-top:1px solid rgba(255,255,255,.14)}
.hm-row svg{flex-shrink:0;margin-top:2px;opacity:.7}
.hm-row b{display:block;color:#fff;font-size:13.5px;font-weight:600;margin-bottom:2px}
.hm-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:16px;
padding:12px;border-radius:11px;background:var(--secondary);color:#fff;font-size:14px;font-weight:600;
box-shadow:0 6px 18px rgba(181,37,85,.4);transition:filter .2s var(--ease),transform .18s var(--bounce)}
.hm-open:hover{filter:brightness(1.12)}
.hm-open:active{transform:scale(.97)}
/* ============ ROUND 9d ============ */
/* 7. The header is transparent so the brand field reads straight
through it. Only a hairline appears once you scroll. */
.topbar{background:transparent !important;-webkit-backdrop-filter:none !important;
backdrop-filter:none !important}
body.scrolled .topbar{border-bottom-color:var(--hair)}
/* 6. Bigger lockup, and the Forward mark now carries the same ramp as
the Thrive mark so the two read as one family. */
.lockup img{height:28px}
.lockup .thrive{height:25px}
.lockup .rule{height:26px}
.footlock img{height:24px}
.footlock .thrive{height:21px}
@media(max-width:860px){.lockup img{height:24px}.lockup .thrive{height:19px}}
/* 2/4. A second hero mode for the agenda, alongside the map mode.
Interactive: the steps are a rail you step through, not prose. */
.opener.panelmode .opener-in{opacity:0;transform:translateY(-18px) scale(.98);pointer-events:none}
.heropanel{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;
display:flex;flex-direction:column;justify-content:center;padding:44px;
transition:opacity .45s var(--ease)}
.opener.panelmode .heropanel{opacity:1;pointer-events:auto}
.heropanel::before{content:'';position:absolute;inset:0;z-index:0;
background:linear-gradient(102deg,rgba(5,9,17,.95) 0%,rgba(5,9,17,.86) 46%,rgba(5,9,17,.6) 100%)}
.hp-in{position:relative;z-index:1;max-width:1000px;width:100%;margin:0 auto}
.hp-top{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.hp-top h3{font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:700;
letter-spacing:-.03em;color:#fff}
.hp-sub{font-size:14.5px;color:rgba(255,255,255,.7);max-width:520px;margin-bottom:26px}
.hp-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.hp-rail{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hp-rail{grid-template-columns:1fr}}
.hp-step{position:relative;text-align:left;padding:18px;border-radius:var(--r-md);
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);color:#fff;
transition:background .26s var(--ease),transform .3s var(--bounce),border-color .26s var(--ease)}
.hp-step:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.hp-step[aria-expanded="true"]{background:rgba(181,37,85,.34);border-color:rgba(224,86,138,.7)}
.hp-step .n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
background:rgba(255,255,255,.18);font-size:13px;font-weight:700;margin-bottom:11px}
.hp-step[aria-expanded="true"] .n{background:#fff;color:var(--secondary)}
.hp-step b{display:block;font-size:15px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
.hp-step .d{display:block;font-size:13px;color:rgba(255,255,255,.72);line-height:1.45;
max-height:0;overflow:hidden;opacity:0;
transition:max-height .45s var(--spring),opacity .3s var(--ease)}
.hp-step[aria-expanded="true"] .d{max-height:170px;opacity:1;margin-top:2px}
.hp-hint{display:block;font-size:12px;color:rgba(255,255,255,.5);margin-top:20px}
/* 4. a smaller hero.
RAISED FROM 462 TO 520 (2026-08-14). The capital panel takes this hero
over, and at 462 it did not fit: the shipped three-row panel already
overflowed by 9px, and the four-metric panel needs 575 with a row open.
A panel that scrolls inside the hero it is replacing is not a takeover.
Home and the shared sheet move together, on purpose, so every client
hero stays one height. */
.opener{min-height:580px}
@media(max-width:860px){.opener{min-height:460px}}
/* 3. The analytics card turns over in place rather than opening a
pull-up: the chart face slides out, the metric face slides in,
and the card grows to fit. */
.an-card{position:relative;overflow:hidden;transition:min-height .5s var(--spring)}
.an-face{transition:opacity .34s var(--ease),transform .5s var(--spring)}
.an-face.detail{position:absolute;inset:26px;opacity:0;transform:translateX(26px);
pointer-events:none}
.an-card.flipped .an-face.overview{opacity:0;transform:translateX(-26px);pointer-events:none}
.an-card.flipped .an-face.detail{opacity:1;transform:none;pointer-events:auto}
.an-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border-radius:999px;
background:var(--raise-2);border:1px solid var(--hair);font-size:13px;font-weight:600;
margin-bottom:18px;transition:background .2s var(--ease),transform .18s var(--bounce)}
.an-back:hover{background:var(--hair)}
.an-back:active{transform:scale(.95)}
.an-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
margin-bottom:18px}
.an-metrics .m{padding:16px;border-radius:var(--r-md);background:var(--raise-2);
border:1px solid var(--hair)}
.an-metrics .m b{display:block;font-family:var(--display);font-size:24px;font-weight:700;
letter-spacing:-.03em;margin-bottom:3px}
.an-metrics .m span{font-size:12.5px;color:var(--ink-2)}
/* 5. Log an update morphs in place. The seven tiles fan out of the way
and the chosen flow expands inside the same panel, so nothing
covers the page and you never lose your place. */
.logbar{position:relative;overflow:hidden;transition:min-height .5s var(--spring)}
.flows,.flowstage{transition:opacity .32s var(--ease),transform .5s var(--spring)}
.logbar.staged .flows{opacity:0;transform:scale(.94) translateY(-10px);pointer-events:none;
position:absolute;inset:auto 26px 26px 26px}
.flowstage{display:none;width:100%;margin-top:22px}
.logbar.staged .flowstage{display:block}
.fs-top{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.fs-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;
flex-shrink:0}
.fs-t b{display:block;font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:-.02em}
.fs-t span{display:block;font-size:12.5px;color:var(--ink-3)}
.fs-dots{margin-left:auto;display:flex;gap:6px;align-items:center}
.fs-dots i{width:7px;height:7px;border-radius:50%;background:var(--hair);display:block;
transition:background .3s var(--ease),width .3s var(--ease)}
.fs-dots i.on{background:var(--secondary);width:20px;border-radius:4px}
.fs-body{min-height:150px}
.fs-acts{display:flex;gap:10px;margin-top:22px}
.fs-acts .btn{flex:1}
/* the 0 to 10 dial, matching the live scale's range */
.dial{display:flex;align-items:center;gap:20px;margin:4px 0 6px;flex-wrap:wrap}
.dial-track{display:flex;gap:5px;flex:1;min-width:260px}
.dv{flex:1;height:46px;border-radius:9px;background:var(--raise-2);border:1px solid var(--hair);
font-size:12.5px;font-weight:700;color:var(--ink-3);
display:grid;place-items:center;
transition:background .18s var(--ease),color .18s var(--ease),transform .18s var(--bounce)}
.dv:hover{transform:translateY(-2px)}
.dv.on{background:linear-gradient(180deg,rgba(181,37,85,.55),rgba(142,27,65,.55));color:#fff;
border-color:transparent}
.dv[aria-pressed="true"]{background:linear-gradient(180deg,var(--secondary),#8E1B41);
box-shadow:0 6px 16px rgba(181,37,85,.4);transform:translateY(-2px)}
.dial-read{min-width:120px}
.dial-read b{display:block;font-family:var(--display);font-size:32px;font-weight:700;
letter-spacing:-.04em;line-height:1}
.dial-read span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.chips.single .chip-b[aria-pressed="true"]{background:rgba(181,37,85,.22);
border-color:var(--secondary);color:var(--ink)}
.notebox{padding:16px;border-radius:var(--r-md);background:var(--raise-2);border:1px solid var(--hair);
min-height:110px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.notebox:empty::before{content:attr(data-ph);color:var(--ink-3);font-style:italic}
.notebox:focus{outline:none;border-color:var(--secondary)}
.flabel.safety{color:var(--secondary-soft)}
html[data-theme="light"] .flabel.safety{color:var(--secondary)}
.safety-note{margin-top:14px;padding:13px 15px;border-radius:var(--r-sm);font-size:13px;
color:var(--ink-2);background:rgba(181,37,85,.12);border:1px solid rgba(181,37,85,.24)}
/* ============ ASK RIVO ============
Two stages, as Andy asked: the pull-up opens on a short statement about
what Rivo is and is not, and only then EXPANDS into the chat box. The
chat itself matches the live RivoAskBar: header lockup, message stream,
input with a gradient send, and the crisis microcopy footer. */
#sheet-rivo{max-height:88vh;transition:transform .52s var(--spring),max-height .5s var(--spring)}
#sheet-rivo.chat{max-height:92vh}
.rv-stage{display:block}
#sheet-rivo.chat .rv-intro{display:none}
.rv-chat{display:none}
#sheet-rivo.chat .rv-chat{display:flex;flex-direction:column;min-height:0}
#sheet-rivo.chat .sheet-body{display:flex;flex-direction:column;min-height:0;padding-bottom:0}
.rv-mark{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.rv-orb{width:46px;height:46px;border-radius:50%;flex-shrink:0;position:relative;
background:conic-gradient(from 200deg,#B52555,#0077C8 45%,#00A499 78%,#B52555);
display:grid;place-items:center}
.rv-orb::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--canvas)}
html[data-theme="light"] .rv-orb::after{background:#fff}
.rv-orb svg{position:relative;z-index:1;color:var(--ink)}
.rv-mark b{display:block;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em}
.rv-mark span{display:block;font-size:12.5px;color:var(--ink-3)}
.rv-say{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin-bottom:18px}
.rv-points{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.rv-pt{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--r-md);
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11)}
html[data-theme="light"] .rv-pt{background:#EEF1F7;border-color:#DDE3EC}
.rv-pt .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.rv-pt b{display:block;font-size:14px;font-weight:600;margin-bottom:2px}
.rv-pt span{display:block;font-size:13px;color:var(--ink-2)}
/* the chat */
.rv-stream{flex:1;min-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;
padding:4px 0 14px}
.rv-msg{max-width:82%;padding:13px 16px;border-radius:18px;font-size:14.5px;line-height:1.5}
.rv-msg.bot{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
border-bottom-left-radius:6px}
html[data-theme="light"] .rv-msg.bot{background:#EEF1F7;border-color:#DDE3EC}
.rv-msg.me{align-self:flex-end;background:var(--secondary);color:#fff;border-bottom-right-radius:6px}
.rv-typing{align-self:flex-start;display:flex;gap:5px;padding:15px 18px;border-radius:18px;
background:rgba(255,255,255,.07);border-bottom-left-radius:6px}
.rv-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:block;
animation:rvdot 1.2s infinite}
.rv-typing i:nth-child(2){animation-delay:.15s}
.rv-typing i:nth-child(3){animation-delay:.3s}
@keyframes rvdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.rv-sugg{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:12px}
.rv-sugg[hidden]{display:none}
.rv-sugg button{padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.13);font-size:13px;font-weight:500;color:var(--ink-2);
transition:background .2s var(--ease),transform .18s var(--bounce)}
html[data-theme="light"] .rv-sugg button{background:#EEF1F7;border-color:#DDE3EC}
.rv-sugg button:hover{background:rgba(255,255,255,.13)}
.rv-sugg button:active{transform:scale(.95)}
.rv-input{display:flex;align-items:flex-end;gap:10px;padding:12px 0 10px;
border-top:1px solid var(--hair)}
.rv-input textarea{flex:1;resize:none;min-height:46px;max-height:120px;padding:13px 15px;
border-radius:var(--r-md);background:var(--raise-2);border:1px solid var(--hair);color:var(--ink);
font:inherit;font-size:15px;line-height:1.4}
.rv-input textarea:focus{outline:none;border-color:var(--secondary)}
.rv-input textarea::placeholder{color:var(--ink-3)}
.rv-send{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
color:#fff;background:linear-gradient(135deg,#B52555,#0077C8 55%,#00A499);
box-shadow:0 6px 18px rgba(181,37,85,.34);
transition:transform .18s var(--bounce),filter .2s var(--ease)}
.rv-send:hover{filter:brightness(1.12)}
.rv-send:active{transform:scale(.92)}
.rv-foot{font-size:12px;color:var(--ink-3);text-align:center;
padding:0 0 calc(14px + env(safe-area-inset-bottom))}
.rv-foot a{color:var(--secondary-soft);font-weight:600}
html[data-theme="light"] .rv-foot a{color:var(--secondary)}
/* ---- live-data banner: the page never pretends whose data it is ----
IT MUST CLEAR THE FLOATING TAB BAR. At 78px it sat 13px INTO the bar on
desktop, so the sentence explaining whose data this is was the thing
covering the way out of the page. The bar occupies 20..91px from the
bottom, so this clears it by 12. The narrow rule below was already clear
and is left alone. */
.live-banner{position:fixed;left:50%;bottom:103px;transform:translateX(-50%);z-index:58;
max-width:min(560px,calc(100% - 32px));padding:12px 18px;border-radius:999px;font-size:13.5px;
background:var(--glass);border:1px solid var(--hair-2);color:var(--ink-2);
-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow-lg);
text-align:center}
html[data-theme="light"] .live-banner{background:rgba(255,255,255,.94);border-color:rgba(31,42,68,.12)}
.live-banner b{color:var(--ink)}
.live-banner a{color:var(--secondary-soft);font-weight:600}
html[data-theme="light"] .live-banner a{color:var(--secondary)}
.live-banner.warn{border-color:rgba(148,97,10,.4)}
@media(max-width:860px){.live-banner{bottom:150px;font-size:12.5px;padding:10px 14px}}
/* ---- Ask Rivo: the DOCK EXPANDS into the chat, as it does app side.
Not a bottom sheet. The pill grows into a panel anchored to the
same corner, so the thing you tapped becomes the thing you use. */
#sheet-rivo{position:fixed;left:auto;right:26px;bottom:20px;width:min(420px,calc(100vw - 36px));
max-height:min(640px,calc(100vh - 120px));border-radius:var(--r-xl);border:1px solid var(--hair-2);
transform:translateY(14px) scale(.94);transform-origin:bottom right;opacity:0;
transition:transform .46s var(--spring),opacity .3s var(--ease),max-height .46s var(--spring)}
#sheet-rivo.on{transform:none;opacity:1}
#sheet-rivo.chat{max-height:min(720px,calc(100vh - 110px))}
#sheet-rivo .grabber{display:none}
/* the dock stays put and dims, rather than sliding away, so the expansion
visibly comes OUT of it */
body.rivo-open .rivo{opacity:0;pointer-events:none;transform:scale(.9)}
body.rivo-open .shell{transform:none;border-radius:0;filter:none}
body.rivo-open .backdrop{background:rgba(4,7,14,.28)}
@media(max-width:860px){
#sheet-rivo{right:10px;left:10px;width:auto;bottom:76px;
max-height:min(560px,calc(100vh - 150px))}
}
/* ---- 1/2: nothing booked means nothing pretends otherwise ----
appt-pending is the state BEFORE /api/community/me answers. It hides the same
chrome as no-appt, so the page never flashes an appointment it does not have
and then takes it away. companion-live.js clears it either way. */
body.no-appt .appt-only,
body.appt-pending .appt-only{display:none !important}
body.appt-pending [data-live="upnextSection"]{display:none !important}
body.appt-pending .apptcard .ac-title,
body.appt-pending .apptcard .ac-meta,
body.appt-pending .apptcard .ac-when{opacity:0}
body.appt-pending .apptcard .ac-title,
body.appt-pending .apptcard .ac-meta,
body.appt-pending .apptcard .ac-when,
.apptcard .ac-title,.apptcard .ac-meta,.apptcard .ac-when{transition:opacity .3s var(--ease)}
body.no-appt .ac-kick,
body.appt-pending .ac-kick{color:rgba(255,255,255,.72)}
.ac-type{font-size:12.5px;font-weight:600;color:var(--teal-soft);margin:-4px 0 10px;
letter-spacing:.01em}
html[data-theme="light"] .ac-type{color:var(--teal)}
/* the empty card should read as calm, not broken */
body.no-appt .apptcard .ac-meta{border-bottom:none;margin-bottom:4px;padding-bottom:4px}
/* ---- 5. Rivo dock: the ring was drawn as a conic gradient with a punched
centre, which reads as a broken donut at small sizes. It is now a
solid brand-gradient disc with the glyph on top, and the pill is
smaller so it stops competing with the tab bar. ---- */
.rivo{padding:7px 15px 7px 7px;gap:9px}
.rivo .orb{width:32px;height:32px;background:linear-gradient(135deg,#B52555,#0077C8 52%,#00A499)}
.rivo .orb::after{display:none}
.rivo .orb svg{color:#fff}
.rivo .tx b{font-size:12.5px}
.rivo .tx span{font-size:11px}
/* SPECIFICITY: `.rv-mark span{display:block}` (0,1,1) was beating `.rv-orb`
(0,1,0), so the disc laid out as a block and the glyph sat 12px high. Same
class of collision as the .an-face.chart one. Qualify the selector. */
.rv-mark .rv-orb{width:46px;height:46px;background:linear-gradient(135deg,#B52555,#0077C8 52%,#00A499);
display:flex;align-items:center;justify-content:center;line-height:0;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 4px 14px rgba(0,119,200,.28)}
.rv-mark .rv-orb::after{display:none}
/* the bubble glyph carries its tail at the bottom-left, so it sits a whisker up
and right of dead centre to LOOK centred in a circle */
.rv-mark .rv-orb svg{color:#fff;display:block;width:23px;height:23px;
transform:translate(.5px,-.5px);stroke-width:2}
/* a governed reply that was blocked or flagged says so */
.rv-flag{align-self:flex-start;max-width:82%;padding:11px 14px;border-radius:14px;font-size:13px;
background:rgba(180,35,24,.16);border:1px solid rgba(180,35,24,.34);color:var(--ink)}
.rv-flag a{color:#FF8B80;font-weight:600}
/* ---- Your check-ins takes the hero over too, like the map, the agenda and
recovery capital. Same left inset so the heading starts where the
content starts, and the same overflow guard. ---- */
.opener.chkmode .opener-in{opacity:0;transform:translateY(-18px) scale(.98);pointer-events:none}
.herochk{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;
display:flex;flex-direction:column;justify-content:center;padding:28px 34px;
transition:opacity .45s var(--ease);overflow:auto;scrollbar-width:none}
.herochk::-webkit-scrollbar{display:none}
.opener.chkmode .herochk{opacity:1;pointer-events:auto}
.herochk::before{content:'';position:absolute;inset:0;z-index:0;
background:linear-gradient(102deg,rgba(5,9,17,.95) 0%,rgba(5,9,17,.86) 46%,rgba(5,9,17,.6) 100%)}
.hk-in{position:relative;z-index:1;max-width:1000px;width:100%;margin:0 auto;
--dial-col:196px}
.hk-top{display:flex;align-items:center;gap:14px;margin-bottom:6px;min-height:34px;
padding-left:var(--dial-col)}
.hk-top .hm-back{position:absolute;left:0;top:2px}
.hk-top h3{font-family:var(--display);font-size:clamp(21px,2.5vw,28px);font-weight:700;
letter-spacing:-.03em;color:#fff}
.hk-sub{font-size:13px;color:rgba(255,255,255,.68);max-width:640px;margin:0 0 16px;
line-height:1.5;padding-left:var(--dial-col)}
.hk-grid{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.hk-dial{position:relative;width:168px;height:168px;flex-shrink:0}
.hk-dial svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hk-dial circle{fill:none;stroke-linecap:round}
.hk-dial .fg{transition:stroke-dashoffset 1.4s var(--spring)}
.hk-dial .core{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
color:#fff}
.hk-dial .core b{font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.045em;
line-height:1;display:block}
.hk-dial .core span{font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
opacity:.62;margin-top:4px;display:block;max-width:60px;line-height:1.25;
margin-left:auto;margin-right:auto}
.hk-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.hk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px}
.hk-stats .s{padding:12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.14);color:#fff}
.hk-stats .s b{display:block;font-family:var(--display);font-size:23px;font-weight:700;
letter-spacing:-.03em;line-height:1}
.hk-stats .s span{display:block;font-size:11.5px;color:rgba(255,255,255,.62);margin-top:5px;
line-height:1.35}
.hk-ladder{display:flex;gap:8px}
.hk-rung{flex:1;padding:11px 12px;border-radius:var(--r-md);background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.13);color:#fff;text-align:left;min-width:0}
.hk-rung b{display:block;font-family:var(--display);font-size:19px;font-weight:700;
letter-spacing:-.03em;line-height:1}
.hk-rung span{display:block;font-size:11px;color:rgba(255,255,255,.6);margin-top:5px;
line-height:1.35}
.hk-rung.done{background:rgba(0,164,153,.2);border-color:rgba(79,209,199,.46)}
.hk-rung.done b{color:var(--teal-soft)}
.hk-rung.now{background:rgba(181,37,85,.24);border-color:rgba(224,86,138,.56)}
.hk-rung.now b{color:var(--secondary-soft)}
.hk-why{font-size:12.5px;color:rgba(255,255,255,.68);line-height:1.5;padding-left:2px}
@media(max-width:820px){
.hk-in{--dial-col:0px;padding-top:34px}
.hk-grid{grid-template-columns:1fr;gap:20px}
.hk-dial{margin:0 auto}
.hk-ladder{flex-wrap:wrap}
.hk-rung{flex:1 1 44%}
.hk-top .hm-back{top:0}
}
/* ---- 7. Recovery capital transforms the hero, like the map and agenda do,
and its numbers come from the live rings. ---- */
.opener.capmode .opener-in{opacity:0;transform:translateY(-18px) scale(.98);pointer-events:none}
.herocap{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;
display:flex;flex-direction:column;justify-content:center;padding:28px 34px;
transition:opacity .45s var(--ease);overflow:auto;scrollbar-width:none}
.herocap::-webkit-scrollbar{display:none}
.opener.capmode .herocap{opacity:1;pointer-events:auto}
.herocap::before{content:'';position:absolute;inset:0;z-index:0;
background:linear-gradient(102deg,rgba(5,9,17,.95) 0%,rgba(5,9,17,.86) 46%,rgba(5,9,17,.6) 100%)}
/* The heading starts where the AREA CARDS start, not where the rings do. The
rings column is a fixed 168px with a 28px gap, so the header is inset by
exactly that and the type lines up down the left edge of the cards. */
.hc-in{position:relative;z-index:1;max-width:1000px;width:100%;margin:0 auto;
--rings-col:196px}
/* Back sits at the far left of the panel, out of the flow, so the title can
start at the card edge rather than being pushed along by it */
.hc-top{display:flex;align-items:center;gap:14px;margin-bottom:6px;min-height:34px;
padding-left:var(--rings-col)}
.hc-top .hm-back{position:absolute;left:0;top:2px}
.hc-top h3{font-family:var(--display);font-size:clamp(21px,2.5vw,28px);font-weight:700;
letter-spacing:-.03em;color:#fff}
.hc-sub{font-size:13px;color:rgba(255,255,255,.68);max-width:640px;margin:0 0 16px;
line-height:1.5;padding-left:var(--rings-col)}
.hc-grid{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
@media(max-width:820px){
.hc-in{--rings-col:0px;padding-top:34px}
.hc-grid{grid-template-columns:1fr;gap:20px}
.hc-rings{margin:0 auto}
.hc-top .hm-back{top:0}
}
.hc-rings{position:relative;width:168px;height:168px;flex-shrink:0}
.hc-rings svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hc-rings circle{fill:none;stroke-linecap:round}
.hc-rings .fg{transition:stroke-dashoffset 1.4s var(--spring)}
.hc-rings .core{position:absolute;inset:0;display:grid;place-content:center;text-align:center;
color:#fff}
/* the innermost arc has a radius of 38 in a 168 box, so the clear middle is
about 60px across. The label was wider than that and ran over the rings. */
.hc-rings .core b{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.045em;
line-height:1;display:block}
.hc-rings .core span{font-size:8px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
opacity:.62;margin-top:4px;display:block;max-width:58px;line-height:1.25;
margin-left:auto;margin-right:auto}
.hc-bars{display:flex;flex-direction:column;gap:9px}
.hc-bar{text-align:left;width:100%;padding:10px 13px;border-radius:var(--r-md);
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;
transition:background .24s var(--ease),transform .26s var(--bounce)}
.hc-bar:hover{background:rgba(255,255,255,.14);transform:translateX(4px)}
.hc-bar[aria-expanded="true"]{background:rgba(181,37,85,.28);border-color:rgba(224,86,138,.6)}
.hc-bar .r1{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.hc-bar .sw{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.hc-bar .nm{font-size:14.5px;font-weight:600}
.hc-bar .pc{margin-left:auto;font-family:var(--display);font-size:16px;font-weight:700;
font-variant-numeric:tabular-nums}
.hc-bar .track{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.16);
overflow:hidden}
.hc-bar .track i{display:block;height:100%;width:0;border-radius:4px;transition:width 1.2s var(--spring)}
.hc-foot{font-size:12.5px;color:rgba(255,255,255,.66);line-height:1.5;padding:4px 2px 0}
.hc-bar .d{display:block;font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.45;
max-height:0;overflow:hidden;opacity:0;
transition:max-height .42s var(--spring),opacity .3s var(--ease)}
.hc-bar[aria-expanded="true"] .d{max-height:120px;opacity:1;margin-top:9px}
/* ---- 3. Log an update: the dead space beside a question now carries the
reason the question is asked and what happens to the answer. ---- */
.fs-body{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;align-items:start}
@media(max-width:860px){.fs-body{grid-template-columns:1fr;gap:16px}}
.fs-main{min-width:0;display:flex;flex-direction:column}
.fs-aside{padding:18px;border-radius:var(--r-md);background:rgba(255,255,255,.05);
border:1px solid var(--hair);animation:rise .5s var(--spring)}
html[data-theme="light"] .fs-aside{background:#EEF1F7;border-color:#DDE3EC}
.fs-aside .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-3);margin-bottom:9px}
.fs-aside p{font-size:13px;color:var(--ink-2);line-height:1.5}
.fs-aside .why{display:flex;gap:10px;align-items:flex-start;padding-top:12px;margin-top:12px;
border-top:1px solid var(--hair);font-size:12.5px;color:var(--ink-3)}
.fs-aside .why svg{flex-shrink:0;margin-top:2px;color:var(--teal-soft)}
.fs-prev{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;
border-top:1px solid var(--hair);font-size:12.5px;color:var(--ink-3)}
.fs-prev b{color:var(--ink-2);font-weight:600}