/* ============================================================ ASPN Club - My Journey glass candidate (visual only) Glass cards + gradient range bars for: lab results, wearables, comparison (trends). Pearl day / Smoke night, WHOOP/Oura gloss. No data or logic changes. Load after glass65.css. ============================================================ */ /* ---------- shared glossy tokens ---------- */ .jr-root{ --lg-range-optimal:#4f9e63; --lg-range-good:#4c83b1; --lg-range-in:#4c83b1; --lg-range-fair:#cd8b44; --lg-range-out:#ba6057; --lg-num:linear-gradient(160deg,#8a6d51 5%,#a6886e 45%,#dcc6a8 95%); --lg-hairline:linear-gradient(90deg,transparent,rgba(166,136,110,.55),transparent); } html[data-theme=night] .jr-root{ --lg-num:linear-gradient(160deg,#f0e2c9 5%,#cbb89f 50%,#a6886e 95%); } /* ---------- ambient depth behind the glass (very quiet, ASPN warm) ---------- */ #jr-root .jr-wrap{position:relative} #jr-root .jr-wrap::before{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(58% 42% at 82% 6%,rgba(76,131,177,.10),transparent 70%), radial-gradient(52% 38% at 8% 34%,rgba(93,138,95,.10),transparent 70%), radial-gradient(60% 46% at 70% 78%,rgba(166,136,110,.14),transparent 72%); } html[data-theme=night] #jr-root .jr-wrap::before{ background: radial-gradient(58% 42% at 82% 6%,rgba(76,131,177,.14),transparent 70%), radial-gradient(52% 38% at 8% 34%,rgba(93,138,95,.12),transparent 70%), radial-gradient(60% 46% at 70% 78%,rgba(203,184,159,.10),transparent 72%); } /* ============================================================ 1) LAB RESULTS ============================================================ */ /* at-a-glance attention card */ #jr-root .jh-attention{ background:linear-gradient(135deg,rgba(255,253,244,.66),rgba(242,238,228,.5))!important; border:1px solid rgba(255,255,255,.7)!important; box-shadow:0 18px 55px rgba(73,59,43,.10),inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2); position:relative;overflow:hidden; } #jr-root .jh-attention::before{ content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:var(--lg-hairline); } #jr-root .jh-attention::after{ content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:radial-gradient(90% 130% at 100% 0%,rgba(186,96,87,.08),transparent 55%); } #jr-root .jh-attention-list span{border-bottom:1px solid rgba(166,136,110,.14);padding-bottom:10px} #jr-root .jh-attention-list span:last-child{border-bottom:0;padding-bottom:0} /* category groups as frosted cards */ #jr-root .jh-group{ background:linear-gradient(135deg,rgba(255,253,244,.6),rgba(242,238,228,.44))!important; border:1px solid rgba(255,255,255,.65)!important; box-shadow:0 14px 40px rgba(73,59,43,.08),inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15); transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background .22s ease; } @media(hover:hover){ #jr-root .jh-group:hover{ transform:translateY(-2px); box-shadow:0 22px 55px rgba(73,59,43,.13),inset 0 1px 0 rgba(255,255,255,.85); } } #jr-root .jh-group[open]{ background:linear-gradient(135deg,rgba(255,253,244,.74),rgba(242,238,228,.55))!important; } /* category lab score number */ #jr-root .jh-vendor-score>b{ background:var(--lg-num);-webkit-background-clip:text;background-clip:text;color:transparent; } /* individual marker cards: frosted tiles */ #jr-root .jh-group .jr-lab75{ background:linear-gradient(150deg,rgba(255,255,255,.82),rgba(250,248,244,.62))!important; border:1px solid rgba(255,255,255,.7)!important; box-shadow:0 8px 26px rgba(73,59,43,.07),inset 0 1px 0 rgba(255,255,255,.75)!important; } #jr-root .jh-group .jr-lab75::after{background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,0) 34%)} #jr-root .jr-lab75-value{ background:var(--lg-num);-webkit-background-clip:text;background-clip:text;color:transparent; } #jr-root .jr-lab75-value small{-webkit-text-fill-color:var(--jr-mut);color:var(--jr-mut)} /* --- gradient range bar: spectrum track + needle marker (his WHOOP/Oura bar) --- */ #jr-root .jr-range75{ height:7px;border-radius:6px; background-color:rgba(186,96,87,.14); /* outside supplied bands: soft alert tint */ box-shadow:inset 0 1px 2px rgba(37,37,37,.10); margin-top:22px; /* room for the marker triangle above */ } #jr-root .jr-range75::after{ /* vertical gloss on the track */ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 55%); } #jr-root .jr-range75 i{ /* imported band segments stay as tooltips; color comes from the gradient track */ height:7px;background:transparent!important; border-right:1px solid rgba(255,255,255,.55); } #jr-root .jr-range75 i:last-of-type{border-right:0} #jr-root .jr-range75 b{ /* glossy value dot */ width:13px;height:13px;top:-4px; border:2.5px solid #fff; box-shadow:0 2px 7px rgba(37,37,37,.35),0 0 0 1px rgba(37,37,37,.12),inset 0 1px 2px rgba(255,255,255,.5); } #jr-root .jr-range75 b::before{ /* triangle above, pointing at the value */ content:'';position:absolute;left:50%;top:-13px;transform:translateX(-50%); border:5.5px solid transparent;border-top:0;border-bottom:7px solid var(--jr-char); filter:drop-shadow(0 1px 1px rgba(37,37,37,.25)); } #jr-root .jr-range-label75{font-size:10px;letter-spacing:.02em} /* search field */ #jr-root .jh-search{ background:linear-gradient(135deg,rgba(255,253,244,.55),rgba(242,238,228,.4))!important; border:1px solid rgba(255,255,255,.65)!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 10px 28px rgba(73,59,43,.06)!important; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } /* ============================================================ 2) WEARABLES ============================================================ */ #jr-root .jh-wear-glass{ background: radial-gradient(120% 150% at 0% 0%,rgba(255,255,255,.65),transparent 55%), linear-gradient(135deg,rgba(255,253,244,.68),rgba(242,238,228,.5))!important; border:1px solid rgba(255,255,255,.7)!important; box-shadow:0 20px 55px rgba(73,59,43,.11),inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2); position:relative;overflow:hidden; } #jr-root .jh-wear-glass::before{ content:'';position:absolute;top:0;left:8%;right:8%;height:1px;background:var(--lg-hairline); } #jr-root .jh-signals>div{border-left:0;padding-left:0;position:relative} #jr-root .jh-signals>div+div::before{ content:'';position:absolute;left:-12px;top:12%;bottom:12%;width:1px; background:linear-gradient(180deg,transparent,rgba(166,136,110,.35),transparent); } #jr-root .jh-signals strong{ background:var(--lg-num);-webkit-background-clip:text;background-clip:text;color:transparent; } #jr-root .jh-signals strong small{-webkit-text-fill-color:var(--jr-mut);color:var(--jr-mut)} #jr-root .jh-device-mark{ border:1px solid rgba(255,255,255,.7); background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.35)); box-shadow:0 6px 18px rgba(73,59,43,.10),inset 0 1px 0 rgba(255,255,255,.9); } /* 7-day sparkline panel (real device data only) */ #jr-root .jh-wear-spark{ grid-column:1/-1;margin-top:6px;padding-top:18px; border-top:1px solid rgba(166,136,110,.16); } #jr-root .jh-wear-spark .jr-lbl{margin-bottom:8px;display:block} #jr-root .jh-wear-spark svg{width:100%;height:auto;display:block} #jr-root .jh-wear-spark .jr-note{margin-top:6px} /* device history table inside the expander */ #jr-root .jh-wear-detail{ background:linear-gradient(135deg,rgba(255,253,244,.5),rgba(242,238,228,.36)); border:1px solid rgba(255,255,255,.6)!important; backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } #jr-root .jh-wear-table th{font-family:'Bebas Neue',sans-serif;letter-spacing:.14em;font-size:12px} #jr-root .jh-wear-table td{border-bottom:1px solid rgba(166,136,110,.12)} /* snapshot mini-signals strip */ #jr-root .jh-span-snapshot,#jr-root #jh-wear-snapshot{ background:linear-gradient(135deg,rgba(255,253,244,.62),rgba(242,238,228,.46))!important; border:1px solid rgba(255,255,255,.68)!important; box-shadow:0 14px 40px rgba(73,59,43,.09),inset 0 1px 0 rgba(255,255,255,.8); backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15); } #jr-root .jh-span-value{background:var(--lg-num);-webkit-background-clip:text;background-clip:text;color:transparent} #jr-root .jh-mini-signals strong{background:var(--lg-num);-webkit-background-clip:text;background-clip:text;color:transparent} #jr-root .jh-mini-signals strong small{-webkit-text-fill-color:var(--jr-mut);color:var(--jr-mut)} /* ============================================================ 3) COMPARISON (trends) ============================================================ */ #jr-root .jh-visual-chart{ background:linear-gradient(150deg,rgba(255,253,244,.66),rgba(242,238,228,.48)); border:1px solid rgba(255,255,255,.7); border-radius:26px; box-shadow:0 18px 50px rgba(73,59,43,.10),inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15); position:relative;overflow:hidden; } #jr-root .jh-visual-chart::before{ content:'';position:absolute;top:0;left:6%;right:6%;height:1px;background:var(--lg-hairline); } #jr-root .jh-series-legend span{ background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7); padding:6px 13px;border-radius:999px; box-shadow:0 4px 12px rgba(73,59,43,.06),inset 0 1px 0 rgba(255,255,255,.8); } #jr-root .jh-series-legend i{box-shadow:0 0 0 3px rgba(255,255,255,.65),0 2px 5px rgba(37,37,37,.2)} #jr-root .jh-chart-readout{ background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65);border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.75); } #jr-root .jh-chart-topline{color:var(--jr-mut)} #jr-root .jh-trend-search,#jr-root [data-marker-picker] input{ background:linear-gradient(135deg,rgba(255,253,244,.55),rgba(242,238,228,.4))!important; border:1px solid rgba(255,255,255,.65)!important; backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); } /* ============================================================ NIGHT (Smoke glass) ============================================================ */ html[data-theme=night] #jr-root .jh-attention, html[data-theme=night] #jr-root .jh-group, html[data-theme=night] #jr-root .jh-span-snapshot, html[data-theme=night] #jr-root #jh-wear-snapshot, html[data-theme=night] #jr-root .jh-search, html[data-theme=night] #jr-root .jh-trend-search, html[data-theme=night] #jr-root [data-marker-picker] input{ background:linear-gradient(135deg,rgba(39,39,34,.78),rgba(69,68,60,.62))!important; border:1px solid rgba(255,255,255,.22)!important; box-shadow:0 18px 55px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12); } html[data-theme=night] #jr-root .jh-group[open]{background:linear-gradient(135deg,rgba(45,44,38,.85),rgba(74,72,63,.68))!important} html[data-theme=night] #jr-root .jh-group .jr-lab75{ background:linear-gradient(150deg,rgba(58,56,50,.88),rgba(46,45,40,.82))!important; border:1px solid rgba(255,255,255,.14)!important; box-shadow:0 8px 26px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)!important; } html[data-theme=night] #jr-root .jh-group .jr-lab75::after{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,0) 34%)} html[data-theme=night] #jr-root .jh-wear-glass{ background: radial-gradient(120% 150% at 0% 0%,rgba(255,255,255,.09),transparent 55%), linear-gradient(135deg,rgba(39,39,34,.8),rgba(69,68,60,.64))!important; border:1px solid rgba(255,255,255,.2)!important; box-shadow:0 20px 55px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1); } html[data-theme=night] #jr-root .jh-wear-detail{ background:linear-gradient(135deg,rgba(39,39,34,.7),rgba(69,68,60,.5)); border:1px solid rgba(255,255,255,.14)!important; } html[data-theme=night] #jr-root .jh-device-mark{ border:1px solid rgba(255,255,255,.2); background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05)); } html[data-theme=night] #jr-root .jh-visual-chart{ background:linear-gradient(150deg,rgba(39,39,34,.78),rgba(69,68,60,.6)); border:1px solid rgba(255,255,255,.2); box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1); } html[data-theme=night] #jr-root .jh-series-legend span{ background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); } html[data-theme=night] #jr-root .jh-chart-readout{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)} html[data-theme=night] #jr-root .jh-attention::after{background:radial-gradient(90% 130% at 100% 0%,rgba(186,96,87,.14),transparent 55%)} html[data-theme=night] #jr-root .jh-attention-list span{border-bottom-color:rgba(203,184,159,.16)} html[data-theme=night] #jr-root .jr-range75{background-color:rgba(186,96,87,.22);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} html[data-theme=night] #jr-root .jr-range75::after{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%)} html[data-theme=night] #jr-root .jr-range75 b{border-color:#2b2a26} html[data-theme=night] #jr-root .jr-range75 b::before{border-bottom-color:#f0ebe1} html[data-theme=night] #jr-root .jh-wear-spark{border-top-color:rgba(203,184,159,.18)} html[data-theme=night] #jr-root .jh-signals>div+div::before{background:linear-gradient(180deg,transparent,rgba(203,184,159,.3),transparent)} html[data-theme=night] #jr-root .jh-wear-table td{border-bottom-color:rgba(203,184,159,.14)} /* reduced motion: no lifts */ @media(prefers-reduced-motion:reduce){#jr-root .jh-group{transition:none}} /* Full wearables section replaces the duplicate top snapshot. */ #jr-root .jh-snapshot{align-items:start} #jr-root .jh-snapshot>.jh-wear-slot{margin:0;min-width:0;padding:0;border:0} #jr-root .jh-snapshot>.jh-wear-slot .jh-wear-head{margin-top:0} /* Rhythm candidate: compact overview and a modal drill-down, no page reflow. */ #jr-root .jh-quicknav{display:flex;gap:22px;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--jr-line)} #jr-root .jh-snapshot{display:grid;grid-template-columns:minmax(230px,.65fr) minmax(0,1.5fr);gap:24px;margin:24px 0} #jr-root .jh-span-snapshot{padding:22px;gap:16px;align-self:start} #jr-root .jh-wear-head{margin-bottom:12px!important;gap:12px} #jr-root .jh-wear-head h2{margin:5px 0;font-size:27px!important} #jr-root .jh-wear-head .jr-flink{font-size:10px} #jr-root .jh-wear-glass{display:block;padding:20px 22px;border-radius:24px} #jr-root .jh-device{gap:10px;margin-bottom:12px} #jr-root .jh-device-mark{width:36px;height:36px} #jr-root .jh-device strong{font-size:19px} #jr-root .jh-device p{font-size:12px;margin:3px 0} #jr-root .jh-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #jr-root .jh-ring-metric{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;gap:6px} #jr-root .jh-ring{position:relative;width:104px;height:104px;max-width:100%;flex:none} #jr-root .jh-ring svg{width:100%;height:100%;transform:rotate(-90deg)} #jr-root .jh-ring circle{fill:none;stroke-width:4} #jr-root .jh-ring-track{stroke:rgba(166,136,110,.22)} #jr-root .jh-ring-arc{stroke:var(--jr-mong);stroke-linecap:round} #jr-root .jh-ring strong{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;font:35px 'Bebas Neue',sans-serif;color:var(--jr-char)} #jr-root .jh-ring strong small{font:12px Georgia,serif;color:var(--jr-mut)} #jr-root .jh-ring-metric>span{font-size:13px} #jr-root .jh-ring-trend{font-size:10px;color:var(--jr-mut);min-height:24px;line-height:1.4} #jr-root .jh-sleep-line{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--jr-line);padding-top:12px;margin-top:10px;font-size:13px} #jr-root .jh-sleep-line b{font-weight:400;margin-left:6px} #jr-root .jh-sleep-line .jr-flink{font-size:10px} #jr-root .jh-labs-section{margin-top:20px} #jr-root #jh-trends75{padding-top:0} #jr-root .jh-search{margin-top:0} #jr-root .jh-rhythm-dialog{width:min(760px,calc(100vw - 28px));padding:28px;overscroll-behavior:contain} #jr-root .jh-rhythm-dialog h3{font:25px 'Bebas Neue',sans-serif;margin:22px 0 14px} #jr-root .jh-extra-group{padding:18px 0;border-bottom:1px solid var(--jr-line)} #jr-root .jh-extra-group header{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:16px} #jr-root .jh-extra-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 14px} #jr-root .jh-extra-grid>div{display:flex;flex-direction:column;gap:7px;min-width:0} #jr-root .jh-extra-grid span{font-size:13px;color:var(--jr-mut);line-height:1.4} #jr-root .jh-extra-grid strong{font:26px 'Bebas Neue',sans-serif;font-weight:400;overflow-wrap:anywhere} #jr-root .jh-extra-grid strong small{font:12px Georgia,serif} #jr-root .jh-daily-history>summary,#jr-root .jh-device-fields>summary{padding:20px 0;cursor:pointer;border-bottom:1px solid var(--jr-line)} #jr-root #jh-wear,#jr-root #jh-labs,#jr-root #jh-trends75{scroll-margin-top:88px} html[data-theme=night] #jr-root .jh-ring strong{color:#f0e2c9} @media(max-width:700px){#jr-root .jh-snapshot{grid-template-columns:1fr;gap:22px;margin:18px 0}#jr-root .jh-span-snapshot{padding:16px 20px;gap:12px}#jr-root .jh-span-snapshot h2{font-size:23px;margin:6px 0}#jr-root .jh-span-value{font-size:44px}#jr-root .jh-span-snapshot .jr-note{margin:4px 0}#jr-root .jh-span-snapshot .jr-flink{margin-top:0}#jr-root .jh-quicknav{gap:18px}#jr-root .jh-quicknav button{font-size:10px}#jr-root .jh-wear-glass{padding:17px 14px}#jr-root .jh-ring{width:88px;height:88px}#jr-root .jh-ring strong{font-size:30px}#jr-root .jh-rings{gap:7px}#jr-root .jh-ring-metric>span{font-size:12px}#jr-root .jh-ring-trend{font-size:9px}#jr-root .jh-sleep-line{gap:8px;font-size:12px}#jr-root .jh-sleep-line .jr-flink{font-size:9px}#jr-root .jh-rhythm-dialog{padding:23px 20px}#jr-root .jh-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#jr-root .jh-extra-group header{align-items:flex-start;flex-direction:column;gap:5px}} /* Visual direction: warm depth, truly translucent hero-style glass. */ html #jr-root:has(.jh-header){--jr-char:#fffaf2;--jr-ink:#fffaf2;--jr-mut:#e9d5bd;--jr-mong:#e8c299;--jr-line:rgba(207,232,255,.24);--jr-bg:#8b6a53;--lg-num:linear-gradient(160deg,#fff 5%,#f5e1c7 55%,#98d2fa 95%);color:#fffaf2!important;background:radial-gradient(ellipse at 10% 76%,#ddc29a80,transparent 44%),radial-gradient(ellipse at 96% 16%,#ddae7a60,transparent 46%),linear-gradient(165deg,#554338 0%,#8b6a53 43%,#b99778 100%)!important;background-attachment:fixed!important} html #jr-root:has(.jh-header) .jr-wrap::before{display:none} #jr-root:has(.jh-header) .jr-topbar{background:rgba(249,242,231,.9)!important;color:#252525} #jr-root:has(.jh-header) .jr-topbar a{color:#252525} #jr-root:has(.jh-header) .jr-kicker,#jr-root:has(.jh-header) .jr-lbl,#jr-root:has(.jh-header) .jr-flink{color:#f7e3c8} #jr-root:has(.jh-header) .jr-title{color:#fff;-webkit-text-fill-color:#fff} #jr-root:has(.jh-header) .jr-title em{color:#e6c5a1;-webkit-text-fill-color:#e6c5a1} #jr-root:has(.jh-header) .jh-span-snapshot,#jr-root:has(.jh-header) .jh-wear-glass,#jr-root:has(.jh-header) .jh-group,#jr-root:has(.jh-header) .jh-visual-chart,#jr-root:has(.jh-header) .jh-search,#jr-root:has(.jh-header) .jh-trend-search,#jr-root:has(.jh-header) [data-marker-picker] input{background:linear-gradient(135deg,rgba(255,244,224,.17),rgba(207,177,142,.08))!important;border:1px solid rgba(255,234,207,.34)!important;box-shadow:0 15px 38px rgba(4,22,49,.16),inset 0 1px 0 rgba(255,255,255,.24)!important;backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);color:#fffaf2} #jr-root:has(.jh-header) .jh-group[open]{background:linear-gradient(135deg,rgba(255,242,220,.2),rgba(198,164,126,.1))!important} #jr-root:has(.jh-header) .jh-group .jr-lab75{background:linear-gradient(145deg,rgba(255,238,213,.13),rgba(210,180,143,.06))!important;border:1px solid rgba(255,237,212,.25)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 25px rgba(5,24,52,.12)!important;color:#fff} #jr-root:has(.jh-header) .jr-lab75 strong,#jr-root:has(.jh-header) .jh-group>summary strong{color:#fffaf2} #jr-root:has(.jh-header) .jh-device-mark{background:rgba(255,242,222,.12);border-color:#f5e1c766;color:#fff5e7;box-shadow:inset 0 1px 0 #fff4} #jr-root:has(.jh-header) .jh-ring strong{color:#fff} #jr-root:has(.jh-header) .jh-ring-track{stroke:rgba(246,220,187,.26)} #jr-root:has(.jh-header) .jh-ring-arc{stroke:#f0d3ad} #jr-root:has(.jh-header) .jh-ring-trend{color:#ead8c1} #jr-root:has(.jh-header) .jh-flag,#jr-root:has(.jh-header) .jh-group-meta .jh-flag{color:#ffc9bb} #jr-root:has(.jh-header) .jh-search input,#jr-root:has(.jh-header) .jh-trend-search{color:#fff} #jr-root:has(.jh-header) input::placeholder{color:#ead7c1;opacity:1} #jr-root:has(.jh-header) .jr-range75{background-color:#f5b3ad44;height:6px;box-shadow:0 0 12px #b9dfff15} #jr-root:has(.jh-header) .jr-range75 b{background:#fffaf2!important;border:0;width:1px;height:19px;top:-6px;box-shadow:none;border-radius:0} #jr-root:has(.jh-header) .jr-range75 b::before{top:-8px;border:5px solid transparent;border-top:6px solid #fff;border-bottom:0} #jr-root:has(.jh-header) .jr-range75 i{border:0} #jr-root:has(.jh-header) .jr-range-label75{color:#ead8bd} #jr-root:has(.jh-header) .jh-series-legend span{background:#edcfaa15;border-color:#f2ddc144;color:#fff5e9;box-shadow:none} #jr-root:has(.jh-header) .jh-chart-readout{background:#d7ecff0c;border-color:#f2ddc133} #jr-root:has(.jh-header) .jh-rhythm-dialog{background:radial-gradient(ellipse at top right,#c6a17caa,transparent 70%),linear-gradient(145deg,#594335f2,#8f6c50f7);color:#fffaf2;border:1px solid #f6ddbd66;box-shadow:0 30px 90px #21160d66,inset 0 1px 0 #fff4;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)} #jr-root:has(.jh-header) .jh-rhythm-dialog::backdrop{background:#291d1366;backdrop-filter:blur(7px)} #jr-root:has(.jh-header) .jh-device-record{background:#f0d8b90d;border-color:#f0d8b933} #jr-root:has(.jh-header) .jh-rhythm-dialog .jr-note{color:#ead8c1} #jr-root:has(.jh-header) .jh-extra-grid strong{color:#fffaf2} #jr-root:has(.jh-header) .jh-rhythm-dialog .jh-close{color:#fff} #jr-root:has(.jh-header) .jh-header{padding-top:2px!important;margin-bottom:12px!important} #jr-root:has(.jh-header) .jh-header .jr-title{margin:6px 0!important} #jr-root:has(.jh-header) .jh-span-snapshot{padding:18px 20px} #jr-root:has(.jh-header) .jh-span-snapshot h2{font-size:23px} #jr-root:has(.jh-header) .jh-labs-section{margin-top:10px} #jr-root:has(.jh-header) .jh-labintro{margin:18px 0 8px} #jr-root:has(.jh-header) .jh-labintro h2{font-size:26px!important} #jr-root:has(.jh-header) .jh-labs-slot>.jr-sub{margin:0 0 16px;font-size:14px} #jr-root:has(.jh-header) .jh-group>summary{min-height:92px!important;padding:18px 22px!important} #jr-root:has(.jh-header) .jh-rangenote{margin-bottom:20px} #jr-root:has(.jh-header) #jh-trends75{margin-top:32px} html[data-theme=night] #jr-root:has(.jh-header){background:radial-gradient(ellipse at 90% 40%,#80664f77,transparent 58%),linear-gradient(155deg,#231e1a,#393029 65%,#594533)!important} @media(max-width:700px){#jr-root:has(.jh-header) .jh-snapshot{gap:16px;margin:14px 0}#jr-root:has(.jh-header) .jh-span-snapshot{padding:12px 16px;display:grid;grid-template-columns:1fr auto;gap:4px 12px}#jr-root:has(.jh-header) .jh-span-snapshot>div{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}#jr-root:has(.jh-header) .jh-span-snapshot h2{font-size:19px;margin:0}#jr-root:has(.jh-header) .jh-span-snapshot .jr-note{grid-column:1/-1;font-size:11px}#jr-root:has(.jh-header) .jh-span-snapshot .jr-flink{grid-column:1/-1;font-size:9px}#jr-root:has(.jh-header) .jh-span-value{font-size:34px}#jr-root:has(.jh-header) .jh-wear-head h2{font-size:22px!important}#jr-root:has(.jh-header) .jh-wear-head{margin-bottom:9px!important}#jr-root:has(.jh-header) .jh-group>summary{min-height:96px!important;padding:16px 20px!important}#jr-root:has(.jh-header) .jh-quicknav{padding:4px 0;gap:18px}#jr-root:has(.jh-header) .jh-labintro{gap:3px;margin:14px 0 6px}#jr-root:has(.jh-header) .jh-labintro h2{font-size:24px!important}} #jr-root:has(.jh-header) .jr-tabs75{--jr-char:#252525;--jr-mong:#806a54;--jr-chipbg:#d4c5b055;color:#252525!important} #jr-root:has(.jh-header) .jr-tabs75 a{color:#252525!important;-webkit-text-fill-color:#252525} #jr-root:has(.jh-header) .jh-rhythm-dialog{margin:auto!important;max-height:88dvh} #jr-root:has(.jh-header) .jh-rhythm-dialog .jr-note{line-height:1.55} #jr-root:has(.jh-header) .jh-ring-trend{font-size:11px;line-height:1.5} #jr-root:has(.jh-header) .jh-labs-slot .jr-fresh75{margin:8px 0} #jr-root:has(.jh-header) .jh-visual-head{margin-top:0} #jr-root:has(.jh-header) .jh-series-legend span,#jr-root:has(.jh-header) .jh-series-legend b{color:#fff!important} @media(max-width:700px){#jr-root:has(.jh-header) .jh-ring-trend{font-size:10px}#jr-root:has(.jh-header) .jh-ring{width:76px;height:76px}#jr-root:has(.jh-header) .jh-wear-glass{padding:14px}#jr-root:has(.jh-header) .jh-device{margin-bottom:8px}#jr-root:has(.jh-header) .jh-sleep-line{margin-top:4px;padding-top:10px}#jr-root:has(.jh-header) .jh-header{margin-bottom:0!important}#jr-root:has(.jh-header) .jh-quicknav{margin-top:0}#jr-root:has(.jh-header) .jh-rhythm-dialog{max-height:87dvh}} /* Keep smoke warm rather than falling back to the older warm night cards. */ html[data-theme=night] #jr-root:has(.jh-header) .jh-span-snapshot,html[data-theme=night] #jr-root:has(.jh-header) .jh-wear-glass,html[data-theme=night] #jr-root:has(.jh-header) .jh-group,html[data-theme=night] #jr-root:has(.jh-header) .jh-visual-chart,html[data-theme=night] #jr-root:has(.jh-header) .jh-search,html[data-theme=night] #jr-root:has(.jh-header) .jh-trend-search,html[data-theme=night] #jr-root:has(.jh-header) [data-marker-picker] input{background:linear-gradient(135deg,rgba(230,204,171,.15),rgba(151,122,91,.09))!important;border-color:rgba(235,210,179,.28)!important;box-shadow:0 15px 38px #20150d44,inset 0 1px 0 #fcebd425!important} html[data-theme=night] #jr-root:has(.jh-header) .jh-group[open]{background:linear-gradient(135deg,rgba(230,204,171,.18),rgba(151,122,91,.12))!important} html[data-theme=night] #jr-root:has(.jh-header) .jh-group .jr-lab75{background:linear-gradient(145deg,rgba(211,180,141,.13),rgba(151,122,91,.06))!important;border-color:rgba(242,218,188,.22)!important;box-shadow:inset 0 1px 0 #fcebd420!important} html[data-theme=night] #jr-root:has(.jh-header) .jh-ring strong{color:#fff} #jr-root:has(.jh-header) .jr-lab75-value small{color:#f5e4cc!important;-webkit-text-fill-color:#f5e4cc} #jr-root:has(.jh-header) .jr-range75:not(.neutral)::after{background:linear-gradient(90deg,rgba(128,236,238,.12),transparent 40%,rgba(255,221,153,.12) 70%,rgba(255,169,163,.12)),linear-gradient(180deg,#ffffff50,transparent 85%)} #jr-root:has(.jh-header) .jh-ring strong{font-variant-numeric:tabular-nums} #jr-root:has(.jh-header) .jh-visual-chart svg text{fill:#ead7c0} #jr-root:has(.jh-header) .jh-log-button{color:#594335!important;-webkit-text-fill-color:#594335;background:#fff5e7!important;border:1px solid #fff9} #jr-root:has(.jh-header) .jh-band-label{color:#fff4e4!important} #jr-root:has(.jh-header) .jh-band-label[data-band=fair]{color:#ffe7b9!important} #jr-root:has(.jh-header) .jh-band-label[data-band=outOfRange]{color:#ffd0c5!important} #jr-root:has(.jh-header) .jh-series-legend small{color:#e8d4ba} #jr-root:has(.jh-header) .jh-overlay-chart [data-chart-plane]>polyline[stroke='#b69672']{stroke:#9eeaf0;stroke-width:6;opacity:.75} #jr-root:has(.jh-header) .jh-overlay-chart [data-chart-plane]>polyline[stroke='#4d96b0']{stroke:#ffdeab;stroke-width:4;stroke-dasharray:11 6} #jr-root:has(.jh-header) .jh-overlay-chart [data-chart-plane]>polyline[stroke='#94a776']{stroke:#d1c1ff;stroke-width:3;stroke-dasharray:2 7} #jr-root:has(.jh-header) .jh-series-legend span:nth-child(1) i{background:#9eeaf0!important} #jr-root:has(.jh-header) .jh-series-legend span:nth-child(2) i{background:#ffdeab!important} #jr-root:has(.jh-header) .jh-series-legend span:nth-child(3) i{background:#d1c1ff!important} html[data-theme=night] #jr-root:has(.jh-header) .jr-tabs75{background:rgba(246,235,218,.94)!important;box-shadow:0 7px 30px #25190f66!important} html[data-theme=night] #jr-root:has(.jh-header) .jr-tabs75 a{color:#554338!important;-webkit-text-fill-color:#554338} #jr-root:has(.jh-header) .jh-overlay-chart circle[fill='#b69672']{fill:#9eeaf0} #jr-root:has(.jh-header) .jh-overlay-chart circle[fill='#4d96b0']{fill:#ffdeab} #jr-root:has(.jh-header) .jh-overlay-chart circle[fill='#94a776']{fill:#d1c1ff} #jr-root:has(.jh-header) .jh-history-dialog{background:linear-gradient(145deg,#594335f5,#8f6c50f7);color:#fffaf2;border-color:#f6ddbd66;box-shadow:0 30px 90px #21160d66,inset 0 1px 0 #fff4} #jr-root:has(.jh-header) .jh-history-dialog input,#jr-root:has(.jh-header) .jh-history-dialog select{color:#fff7eb;background:#5a4435;border-color:#ddc1a066} #jr-root:has(.jh-header) .jh-history-dialog .jh-picker-cats button{color:#fff7eb;background:#cce9ff12;border-color:#ddc1a055} #jr-root:has(.jh-header) .jh-history-dialog .jh-close{color:#fff7eb} /* Desktop: balance the snapshot row instead of leaving a blank column. */ @media(min-width:701px){#jr-root:has(.jh-header) .jh-snapshot{align-items:stretch}#jr-root:has(.jh-header) .jh-span-snapshot{align-self:stretch;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;align-content:center;align-items:center}#jr-root:has(.jh-header) .jh-span-snapshot>div{align-self:center}#jr-root:has(.jh-header) .jh-span-snapshot h2{font-size:30px;line-height:1.1;max-width:170px;margin:14px 0}#jr-root:has(.jh-header) .jh-span-snapshot .jr-flink{grid-column:1/-1;align-self:end;padding:14px 0 0;border-top:1px solid var(--jr-line)}#jr-root:has(.jh-header) .jh-snapshot>.jh-wear-slot .jh-wear-head{min-height:52px}#jr-root:has(.jh-header) .jh-span-value{font-size:58px}} /* Align actual glass-card edges, with both section headings on their own row. */ @media(min-width:701px){#jr-root:has(.jh-header) .jh-snapshot{grid-template-rows:auto 1fr;gap:12px 24px}#jr-root:has(.jh-header) .jh-snapshot::before{content:'YOUR BIGGER PICTURE';grid-column:1;grid-row:1;align-self:end;padding-bottom:8px;font:11px 'Bebas Neue',sans-serif;letter-spacing:.18em;color:var(--jr-mut)}#jr-root:has(.jh-header) .jh-snapshot>.jh-wear-slot{display:contents}#jr-root:has(.jh-header) .jh-snapshot>.jh-span-snapshot{grid-column:1;grid-row:2}#jr-root:has(.jh-header) .jh-wear-head{grid-column:2;grid-row:1;margin:0!important;min-height:0!important}#jr-root:has(.jh-header) .jh-wear-glass{grid-column:2;grid-row:2}#jr-root:has(.jh-header) .jh-span-snapshot h2{font-size:28px}} html[data-theme=night] #jr-root:has(.jh-header) nav.jr-tabs75,html[data-theme=night] #jr-root:has(.jh-header) nav.jr-tabs75 .tabs-in{background:rgba(244,233,216,.97)!important;--jr-char:#594335;--jr-mong:#8d6f54;color:#594335!important} html[data-theme=night] #jr-root:has(.jh-header) nav.jr-tabs75 a,html[data-theme=night] #jr-root:has(.jh-header) nav.jr-tabs75 a span,html[data-theme=night] #jr-root:has(.jh-header) nav.jr-tabs75 a svg{color:#594335!important;-webkit-text-fill-color:#594335;stroke:#594335} #jr-root:has(.jh-header) .jh-close:focus-visible{outline:2px solid #e8c299;outline-offset:3px} html[data-theme=night] #jr-root:has(.jh-header) nav.jr-tabs75 a img{filter:none!important} /* Jake's lighter copper pass: half-strength warm backdrop, dark ink for contrast. */ html:not([data-theme=night]) #jr-root:has(.jh-header){--jr-char:#3d3028;--jr-ink:#3d3028;--jr-mut:#685447;--jr-mong:#8d6b50;--jr-line:rgba(119,85,60,.22);--lg-num:linear-gradient(160deg,#5c4331,#917051 80%);color:#3d3028!important;background:radial-gradient(ellipse at 10% 76%,#fff0d480,transparent 44%),radial-gradient(ellipse at 96% 16%,#ffe5c960,transparent 46%),linear-gradient(165deg,#b8a99e 0%,#d0b9a6 43%,#e0ccb7 100%)!important} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-span-snapshot,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-wear-glass,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-group,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-visual-chart,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-search,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-trend-search{background:linear-gradient(135deg,rgba(255,251,241,.38),rgba(250,236,217,.2))!important;border-color:rgba(255,251,244,.68)!important;box-shadow:0 15px 38px rgba(83,53,31,.1),inset 0 1px 0 #fff8!important;color:#3d3028} html:not([data-theme=night]) #jr-root:has(.jh-header) .jr-title,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring strong,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-group>summary strong,html:not([data-theme=night]) #jr-root:has(.jh-header) .jr-lab75 strong{color:#3d3028;-webkit-text-fill-color:#3d3028} html:not([data-theme=night]) #jr-root:has(.jh-header) .jr-title em{color:#8d6b50;-webkit-text-fill-color:#8d6b50} html:not([data-theme=night]) #jr-root:has(.jh-header) .jr-kicker,html:not([data-theme=night]) #jr-root:has(.jh-header) .jr-lbl,html:not([data-theme=night]) #jr-root:has(.jh-header) .jr-flink,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-trend{color:#685447} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-device-mark{background:#fffbf166;border-color:#fffbf1aa;color:#8d6b50} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-track{stroke:#a88c6c55} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-arc{stroke:#8d6b50} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-search input,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-trend-search input{color:#3d3028} html:not([data-theme=night]) #jr-root:has(.jh-header) input::placeholder{color:#685447} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-group .jr-lab75{background:linear-gradient(145deg,#fff8ec77,#f7e6cf33)!important;border-color:#fffaf0aa!important;color:#3d3028} html:not([data-theme=night]) #jr-root:has(.jh-header) .jr-lab75-value small{color:#685447!important;-webkit-text-fill-color:#685447} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-band-label{color:#3e6057!important} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-band-label[data-band=fair]{color:#80531f!important} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-band-label[data-band=outOfRange],html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-group-meta .jh-flag{color:#8d4337!important} html:not([data-theme=night]) #jr-root:has(.jh-header) .jr-range-label75{color:#685447} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend span,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend b{color:#3d3028!important} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend small{color:#685447} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-visual-chart svg text{fill:#685447} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-chart-readout{background:#fffaed33;border-color:#fff7e999} /* Lighten smoke moderately too, without turning night into day. */ html[data-theme=night] #jr-root:has(.jh-header){background:radial-gradient(ellipse at 90% 40%,#a68c7055,transparent 58%),linear-gradient(155deg,#342c26,#4c3e32 65%,#705942)!important} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-history-dialog,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-rhythm-dialog{background:radial-gradient(ellipse at top right,#fff8e688,transparent 70%),linear-gradient(145deg,#c6b19bf5,#e0cbb2f7);color:#3d3028;border-color:#fff8eabb;box-shadow:0 30px 90px #34241944,inset 0 1px 0 #fff9} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-rhythm-dialog .jr-note,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-extra-grid span{color:#685447} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-extra-grid strong,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-history-dialog .jh-close{color:#3d3028} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-history-dialog input,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-history-dialog select{color:#3d3028;background:#fffaed55;border-color:#8d6b5066} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-history-dialog .jh-picker-cats button{color:#3d3028;background:#fffaed33} /* Compact categorical overview; details remain opt-in. */ #jr-root:has(.jh-header) .jh-categories{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;align-items:start} #jr-root:has(.jh-header) .jh-group[open]{grid-column:1/-1} #jr-root:has(.jh-header) .jh-group>summary{min-height:84px!important;padding:14px 16px!important;gap:10px;align-items:flex-start} #jr-root:has(.jh-header) .jh-group>summary strong{font-size:22px!important} #jr-root:has(.jh-header) .jh-group-meta{font-size:11px!important;gap:8px!important;max-width:90px} #jr-root:has(.jh-header) .jh-category-title{display:flex;flex-wrap:wrap;gap:8px!important} #jr-root:has(.jh-header) .jh-vendor-score>b{font-size:20px} #jr-root:has(.jh-header) .jh-vendor-score>small{font-size:10px} #jr-root:has(.jh-header) .jh-chart-expand{border:1px solid var(--jr-line);border-radius:22px;background:rgba(255,250,238,.13);overflow:hidden} #jr-root:has(.jh-header) .jh-chart-expand>summary{display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;cursor:pointer;padding:18px 20px} #jr-root:has(.jh-header) .jh-chart-expand>summary::-webkit-details-marker{display:none} #jr-root:has(.jh-header) .jh-chart-expand>summary>span:first-child{display:grid;gap:7px} #jr-root:has(.jh-header) .jh-chart-expand summary strong{font:25px 'Bebas Neue',sans-serif} #jr-root:has(.jh-header) .jh-chart-expand summary small{font-size:12px;color:var(--jr-mut)} #jr-root:has(.jh-header) .jh-chart-open-label{font-size:13px;white-space:nowrap} #jr-root:has(.jh-header) .jh-chart-open-label b{font-size:22px;font-weight:400;margin-left:8px;display:inline-block} #jr-root:has(.jh-header) .jh-chart-expand[open] .jh-chart-open-label b{transform:rotate(45deg)} #jr-root:has(.jh-header) .jh-chart-expand .jh-visual-chart{margin:0 12px 12px;padding:16px;border-radius:18px} #jr-root:has(.jh-header) .jh-chart-expand .jh-overlay-chart svg{height:240px!important;width:100%!important} #jr-root:has(.jh-header) .jh-chart-readout{min-height:48px;padding:12px;font-size:14px} #jr-root:has(.jh-header) .jh-visual-head{margin-bottom:12px} #jr-root:has(.jh-header) .jh-visual-head h2{font-size:30px;margin-top:3px} #jr-root:has(.jh-header) .jh-trend-search{margin-bottom:12px;padding:12px 16px} #jr-root:has(.jh-header) .jh-ring{width:80px;height:80px} #jr-root:has(.jh-header) .jh-wear-glass{padding:16px 20px} #jr-root:has(.jh-header) .jh-snapshot{margin:14px 0} #jr-root:has(.jh-header) .jh-header .jr-title{font-size:40px!important} #jr-root:has(.jh-header) .jh-span-snapshot h2{font-size:25px} @media(max-width:700px){#jr-root:has(.jh-header) .jh-categories{grid-template-columns:repeat(2,minmax(0,1fr))}#jr-root:has(.jh-header) .jh-group>summary{flex-direction:column;min-height:105px!important;padding:13px!important}#jr-root:has(.jh-header) .jh-group[open]>summary{flex-direction:row;min-height:78px!important}#jr-root:has(.jh-header) .jh-group-meta{max-width:none;width:100%;font-size:11px!important}#jr-root:has(.jh-header) .jh-group>summary strong{font-size:21px!important}#jr-root:has(.jh-header) .jh-category-title{gap:6px!important}#jr-root:has(.jh-header) .jh-vendor-score>b{font-size:18px}#jr-root:has(.jh-header) .jh-vendor-score>small{font-size:9px}#jr-root:has(.jh-header) .jh-ring{width:64px;height:64px}#jr-root:has(.jh-header) .jh-ring strong{font-size:27px}#jr-root:has(.jh-header) .jh-device{margin-bottom:5px}#jr-root:has(.jh-header) .jh-wear-glass{padding:12px 14px}#jr-root:has(.jh-header) .jh-chart-expand>summary{padding:16px}#jr-root:has(.jh-header) .jh-chart-expand .jh-visual-chart{margin:0 8px 8px;padding:12px}#jr-root:has(.jh-header) .jh-chart-expand .jh-overlay-chart svg{height:210px!important}#jr-root:has(.jh-header) .jh-chart-open-label{font-size:11px}#jr-root:has(.jh-header) .jh-header .jr-title{font-size:35px!important}} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-overlay-chart [data-chart-plane]>polyline[stroke='#b69672']{stroke:#397b80} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-overlay-chart [data-chart-plane]>polyline[stroke='#4d96b0']{stroke:#a66c2b} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-overlay-chart [data-chart-plane]>polyline[stroke='#94a776']{stroke:#7d5a9d} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-overlay-chart circle[fill='#b69672']{fill:#397b80} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-overlay-chart circle[fill='#4d96b0']{fill:#a66c2b} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-overlay-chart circle[fill='#94a776']{fill:#7d5a9d} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend span:nth-child(1) i{background:#397b80!important} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend span:nth-child(2) i{background:#a66c2b!important} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend span:nth-child(3) i{background:#7d5a9d!important} @media(max-width:700px){#jr-root:has(.jh-header) .jh-group:not([open])>summary{height:136px;min-height:136px!important;justify-content:space-between}#jr-root:has(.jh-header) .jh-group:not([open]) .jh-category-title{display:grid;gap:7px!important}#jr-root:has(.jh-header) .jh-group:not([open]) .jh-group-meta{font-size:10px!important}#jr-root:has(.jh-header) .jh-categories{align-items:stretch}} /* Shorter matched cards, with high-contrast numeric dials (HRV/RHR are outlines). */ #jr-root:has(.jh-header) .jh-wear-glass{padding:10px 18px} #jr-root:has(.jh-header) .jh-device{margin-bottom:2px} #jr-root:has(.jh-header) .jh-device-mark{width:30px;height:30px} #jr-root:has(.jh-header) .jh-device p{margin:2px 0 0;font-size:11px} #jr-root:has(.jh-header) .jh-ring{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle,#fff8e56b,transparent 72%);filter:drop-shadow(0 0 7px #b8753444)} #jr-root:has(.jh-header) .jh-ring circle{stroke-width:7} #jr-root:has(.jh-header) .jh-ring strong{font-size:43px;line-height:1} #jr-root:has(.jh-header) .jh-ring strong small{font-size:11px;margin-top:2px} #jr-root:has(.jh-header) .jh-ring-metric{gap:2px} #jr-root:has(.jh-header) .jh-ring-metric>span{font-size:12px} #jr-root:has(.jh-header) .jh-ring-trend{font-size:10px;min-height:16px;line-height:1.25} #jr-root:has(.jh-header) .jh-sleep-line{margin-top:6px;padding-top:7px} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-track{stroke:#95643e} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:first-child .jh-ring-track{stroke:#a88c6c55} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-arc{stroke:#a85c24;filter:drop-shadow(0 0 3px #d99350aa)} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring strong{color:#352316;-webkit-text-fill-color:#352316;text-shadow:0 1px 7px #fff8eccc} html[data-theme=night] #jr-root:has(.jh-header) .jh-ring{background:radial-gradient(circle,#cf9d5430,transparent 73%);filter:drop-shadow(0 0 9px #f7bb6c55)} html[data-theme=night] #jr-root:has(.jh-header) .jh-ring-track{stroke:#ddb984} html[data-theme=night] #jr-root:has(.jh-header) .jh-ring-metric:first-child .jh-ring-track{stroke:#e7c99d38} html[data-theme=night] #jr-root:has(.jh-header) .jh-ring-arc{stroke:#ffc781;filter:drop-shadow(0 0 4px #f3ae57bb)} html[data-theme=night] #jr-root:has(.jh-header) .jh-ring strong{color:#fff9ed;-webkit-text-fill-color:#fff9ed;text-shadow:0 0 12px #ffd18b77} @media(min-width:701px){#jr-root:has(.jh-header) .jh-span-snapshot{padding:12px 18px}#jr-root:has(.jh-header) .jh-span-snapshot h2{margin:7px 0;font-size:23px}#jr-root:has(.jh-header) .jh-span-snapshot .jr-flink{padding-top:9px}#jr-root:has(.jh-header) .jh-span-value{font-size:46px}} @media(max-width:700px){#jr-root:has(.jh-header) .jh-wear-glass{padding:9px 12px}#jr-root:has(.jh-header) .jh-ring{width:66px;height:66px}#jr-root:has(.jh-header) .jh-ring strong{font-size:36px}#jr-root:has(.jh-header) .jh-ring-trend{font-size:9px}#jr-root:has(.jh-header) .jh-span-snapshot{padding:8px 14px}#jr-root:has(.jh-header) .jh-span-snapshot .jr-note{margin:2px 0}#jr-root:has(.jh-header) .jh-span-snapshot h2{font-size:18px}#jr-root:has(.jh-header) .jh-snapshot{gap:10px}} /* Consistent mobile category slots: name, score, status never compete for a row. */ @media(max-width:700px){ #jr-root:has(.jh-header) .jh-group:not([open])>summary{height:144px;min-height:144px!important;padding:13px!important;display:grid;grid-template-columns:1fr;grid-template-rows:16px 58px 27px;gap:6px;align-content:start;justify-content:stretch} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-category-title{display:grid;grid-template-rows:25px 25px;gap:4px!important;align-content:start;justify-items:start;width:100%} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-category-title>strong{font-size:20px!important;line-height:25px;white-space:nowrap} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-vendor-score{height:25px;display:flex;gap:5px;align-items:baseline;white-space:nowrap} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-group-meta{height:27px;align-self:end;align-items:center;max-width:none;display:flex;justify-content:space-between;line-height:13px;font-size:10px!important} #jr-root:has(.jh-header) .jh-group:last-child:nth-child(odd):not([open]){grid-column:1/-1} #jr-root:has(.jh-header) .jh-group:last-child:nth-child(odd):not([open])>summary{height:144px;min-height:144px!important} } /* Strong copper calls to action, with one-line labels at phone widths. */ #jr-root:has(.jh-header) .jh-log-button,#jr-root:has(.jh-header) .jh-wear-head .jr-flink,#jr-root:has(.jh-header) .jh-sleep-line .jr-flink,#jr-root:has(.jh-header) .jh-span-snapshot>.jr-flink,#jr-root:has(.jh-header) [data-compare-category],#jr-root:has(.jh-header) .jh-chart-open-label{background:linear-gradient(135deg,#b9763d,#8c4b27)!important;color:#fff8ec!important;-webkit-text-fill-color:#fff8ec;border:1px solid #e6b884!important;border-radius:999px;box-shadow:0 5px 15px #9e5c333d,inset 0 1px 0 #ffe0b45c;white-space:nowrap;line-height:1.1;padding:10px 14px!important;text-align:center;font-size:11px;letter-spacing:.06em;align-self:center} #jr-root:has(.jh-header) .jh-log-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;font:13px Georgia,serif;letter-spacing:0} #jr-root:has(.jh-header) .jh-log-button>span{font-size:19px} #jr-root:has(.jh-header) .jh-chart-open-label{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:0} #jr-root:has(.jh-header) .jh-chart-open-label b{margin:0;font-size:18px} #jr-root:has(.jh-header) .jh-visual-head{gap:10px} html[data-theme=night] #jr-root:has(.jh-header) .jh-log-button,html[data-theme=night] #jr-root:has(.jh-header) .jh-wear-head .jr-flink,html[data-theme=night] #jr-root:has(.jh-header) .jh-sleep-line .jr-flink,html[data-theme=night] #jr-root:has(.jh-header) .jh-span-snapshot>.jr-flink,html[data-theme=night] #jr-root:has(.jh-header) [data-compare-category],html[data-theme=night] #jr-root:has(.jh-header) .jh-chart-open-label{background:linear-gradient(135deg,#d3a06a,#b87943)!important;color:#291c13!important;-webkit-text-fill-color:#291c13;box-shadow:0 0 18px #d5955140,inset 0 1px 0 #ffedd077} @media(max-width:700px){#jr-root:has(.jh-header) .jh-log-button{padding:11px 12px!important;font-size:12px}#jr-root:has(.jh-header) .jh-sleep-line .jr-flink{padding:8px 10px!important;font-size:9px}#jr-root:has(.jh-header) .jh-chart-expand>summary{gap:8px}#jr-root:has(.jh-header) .jh-chart-open-label{padding:9px 11px!important;font-size:10px}#jr-root:has(.jh-header) .jh-span-snapshot>.jr-flink{justify-self:start;padding:8px 12px!important;font-size:9px}#jr-root:has(.jh-header) .jh-wear-head .jr-flink{padding:9px 11px!important;font-size:9px}} @media(max-width:700px){ #jr-root:has(.jh-header) .jh-group:not([open])>summary{height:112px;min-height:112px!important;display:flex;flex-direction:column;justify-content:space-between;gap:8px} #jr-root:has(.jh-header) .jh-group:not([open])>summary>span:first-child{display:grid;gap:5px;width:100%} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-category-title{position:relative;display:flex;flex-direction:row;align-items:baseline;flex-wrap:nowrap;gap:6px!important;white-space:nowrap;font-size:18px!important;line-height:23px;min-height:23px} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-category-name{white-space:nowrap} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-vendor-score{height:23px;line-height:23px;display:inline-flex;gap:0;flex:none} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-vendor-score>b{font-size:18px;line-height:23px} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-vendor-score>small{display:none} #jr-root:has(.jh-header) .jh-group:not([open]) .jh-group-meta{height:24px;min-height:24px;max-height:24px;flex:none} #jr-root:has(.jh-header) .jh-group:last-child:nth-child(odd):not([open])>summary{height:112px;min-height:112px!important} } @media(max-width:700px){#jr-root:has(.jh-header) .jh-group:not([open]){height:114px;min-height:114px;max-height:114px;box-sizing:border-box}#jr-root:has(.jh-header) .jh-group:not([open])>summary{height:112px!important;min-height:112px!important;max-height:112px!important;box-sizing:border-box}} @media(max-width:700px){#jr-root:has(.jh-header) .jh-group:last-child:nth-child(odd):not([open]){width:calc((100% - 10px)/2);justify-self:center}} /* Same liked gold dials in day and night. Only Recovery has a progress arc. */ html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring{background:radial-gradient(circle,#7f573b44,#76513722 66%,transparent 73%);filter:drop-shadow(0 0 9px #d9964b55)} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-track{stroke:#ddb984} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:first-child .jh-ring-track{stroke:#8c674a55} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-arc{stroke:#ffc781;filter:drop-shadow(0 0 4px #f3ae57bb)} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring strong{color:#fff9ed;-webkit-text-fill-color:#fff9ed;text-shadow:0 1px 4px #593a24aa,0 0 12px #ffd18b77} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring strong small{color:#fff4df} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-log-button,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-wear-head .jr-flink,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-sleep-line .jr-flink,html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-span-snapshot>.jr-flink,html:not([data-theme=night]) #jr-root:has(.jh-header) [data-compare-category],html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-chart-open-label{background:linear-gradient(135deg,#d3a06a,#b87943)!important;color:#291c13!important;-webkit-text-fill-color:#291c13;box-shadow:0 0 18px #d5955140,inset 0 1px 0 #ffedd077} /* Approved day button treatment; night remains gold. */ html:not([data-theme=night]) #jr-root:has(.jh-header) :is(.jh-log-button,.jh-wear-head .jr-flink,.jh-sleep-line .jr-flink,.jh-span-snapshot>.jr-flink,[data-compare-category],.jh-chart-open-label){background:linear-gradient(135deg,#4c4844,#34312f)!important;color:#fff4e2!important;-webkit-text-fill-color:#fff4e2;border-color:#827468!important;box-shadow:0 5px 16px #34282045,inset 0 1px 0 #fff3!important} /* Comparison chips: readable full labels and explicit keyboard/touch removal. */ #jr-root:has(.jh-header) .jh-series-legend{display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%} #jr-root:has(.jh-header) .jh-series-legend>.jh-selected-marker{display:inline-flex;align-items:center;gap:9px;max-width:100%;min-width:0;padding:3px 4px 3px 12px;box-sizing:border-box;white-space:normal;overflow:visible} #jr-root:has(.jh-header) .jh-selected-marker>i{flex:none;width:8px;height:8px} #jr-root:has(.jh-header) .jh-selected-marker>.jh-marker-label{font:inherit;min-width:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.4} #jr-root:has(.jh-header) .jh-marker-label small{white-space:normal;font-size:11px;margin-left:4px} #jr-root:has(.jh-header) .jh-marker-remove{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:1px solid #88674955;border-radius:50%;background:#fff8ec66;color:#503b2b;font:26px/1 Arial,sans-serif;cursor:pointer;box-shadow:none} #jr-root:has(.jh-header) .jh-marker-remove:hover{background:#fff8ecbb} #jr-root:has(.jh-header) .jh-marker-remove:focus-visible{outline:3px solid #80562f;outline-offset:2px} html[data-theme=night] #jr-root:has(.jh-header) .jh-marker-remove{background:#fff2dc15;border-color:#ebd2b355;color:#fff3df} html[data-theme=night] #jr-root:has(.jh-header) .jh-marker-remove:hover{background:#fff2dc30} html[data-theme=night] #jr-root:has(.jh-header) .jh-marker-remove:focus-visible{outline-color:#f4cd91} @media(max-width:700px){#jr-root:has(.jh-header) .jh-marker-remove{width:44px;height:44px;min-width:44px;min-height:44px}#jr-root:has(.jh-header) .jh-series-legend>.jh-selected-marker{font-size:13px}} /* Approved soft outlined pill treatment, shared across themes and screen sizes. */ html[data-theme] #jr-root:has(.jh-header) .jh-series-legend>.jh-selected-marker,html:not([data-theme]) #jr-root:has(.jh-header) .jh-series-legend>.jh-selected-marker{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.24);border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} #jr-root:has(.jh-header) .jh-series-legend .jh-marker-remove{width:44px;height:44px;min-width:44px;min-height:44px;background:rgba(255,242,220,.08);border:1px solid rgba(235,210,179,.34);box-shadow:inset 0 1px 0 #fff1} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend>.jh-selected-marker{background:rgba(255,255,255,.12);border-color:rgba(115,90,66,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend .jh-marker-remove{background:rgba(255,242,220,.1);border-color:rgba(115,90,66,.3);color:#503b2b} @media(min-width:701px){#jr-root:has(.jh-header) .jh-selected-marker>.jh-marker-label,#jr-root:has(.jh-header) .jh-marker-label small{white-space:nowrap;overflow-wrap:normal}} /* Smaller visible x and circle; retain an invisible 44px keyboard/touch target. */ html #jr-root:has(.jh-header) .jh-series-legend .jh-marker-remove{position:relative;isolation:isolate;background:none;border:0;box-shadow:none;font-size:18px} #jr-root:has(.jh-header) .jh-series-legend .jh-marker-remove::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:6.5px;border-radius:50%;background:rgba(255,242,220,.08);border:1px solid rgba(235,210,179,.34);box-shadow:inset 0 1px 0 #fff1} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-series-legend .jh-marker-remove::before{background:rgba(255,242,220,.1);border-color:rgba(115,90,66,.3)} #jr-root:has(.jh-header) .jh-series-legend .jh-marker-remove:hover::before{background:rgba(255,242,220,.25)} /* J matte gunmetal, day dials only. */ /* Dial content is one centered stack, independent of inherited strong/small styles. */ /* Number-centering fix (dialj2): the unit comes out of flow so flex centers the NUMBER's line box alone, and translateY(.07em) compensates Bebas Neue's baseline-heavy metrics (digits have no descender, so cap-height ink sits 0.0694em above the line-box center). The unit is tucked at the bottom of the inner disc. Scales with every ring/font size via em + %. v2 (Jake zoom review): the unit hangs from the vertical center at 1.55em of its own clamped size, so every glyph corner stays inside the inner disc with >=1px clearance from the stroke on 66px and 76px rings (measured). */ #jr-root:has(.jh-header) .jh-ring strong{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;margin:0;padding:0;box-sizing:border-box;transform:translateY(.07em)} #jr-root:has(.jh-header) .jh-ring strong .jh-ring-value{display:block;line-height:.78;margin:0;padding:0;font:inherit;font-size:inherit;letter-spacing:0} #jr-root:has(.jh-header) .jh-ring strong small{position:absolute;left:0;right:0;top:50%;margin:1.55em 0 0;padding:0;font-size:clamp(9px,.24em,12px);line-height:1;text-align:center} html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(1) .jh-ring{--dial-jewel:#3b4349;filter:none;background:radial-gradient(circle,#76513733,transparent 73%)}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(1) .jh-ring .jh-ring-track{stroke:#3b4349}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(1) .jh-ring .jh-ring-arc{stroke:#3b4349;filter:none}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(1) .jh-ring .jh-ring-track{stroke:#3b434933}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(2) .jh-ring{--dial-jewel:#3b4349;filter:none;background:radial-gradient(circle,#76513733,transparent 73%)}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(2) .jh-ring .jh-ring-track{stroke:#3b4349}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(2) .jh-ring .jh-ring-arc{stroke:#3b4349;filter:none}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(3) .jh-ring{--dial-jewel:#3b4349;filter:none;background:radial-gradient(circle,#76513733,transparent 73%)}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(3) .jh-ring .jh-ring-track{stroke:#3b4349}html:not([data-theme=night]) #jr-root:has(.jh-header) .jh-ring-metric:nth-child(3) .jh-ring .jh-ring-arc{stroke:#3b4349;filter:none}