/* Home uses the same restrained palette, card shape and typography as Analytics. */
#screen_home { container:patient-home / inline-size; padding:16px 12px var(--mobile-scroll-bottom); background:linear-gradient(140deg,#fff 15%,#f6fbf8); }
body.is-mobile-app #screen_home { padding:16px 12px var(--mobile-scroll-bottom) !important; }
.home-header { margin-bottom:14px; }
#screen_home .screen-title { font-family:var(--font-suisseintl); font-size:25px; line-height:1.2; font-weight:750; letter-spacing:-.7px; color:#123f27; }
.home-header .pill-badge { min-height:27px; padding:5px 10px; border-radius:9px; background:#edf6f1; color:#356247; font-size:10px; font-weight:600; }
.home-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; align-items:stretch; }
#screen_home .home-status-grid .card { display:flex; flex-direction:column; margin:0; padding:12px; min-width:0; min-height:147px; border:1px solid #dce9e2; border-radius:12px; background:#fff; box-shadow:0 3px 12px #24483309; text-align:left; }
.home-summary-heading { display:flex; align-items:center; gap:7px; margin:0 0 13px; color:#264c36; font-size:12px; font-weight:500; line-height:1.2; }
.home-summary-icon { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; flex:0 0 26px; color:#287849; background:#d9f1e0; font-size:18px; }
.home-summary-icon.cycle { color:#d75a79; background:#fae8ed; }
.home-status-grid #home_cycle_day { font-family:var(--font-suisseintl); font-size:20px; line-height:1.2; font-weight:700; color:#173f29; letter-spacing:-.35px; }
.home-status-grid .cycle-bar-container { height:6px; margin:11px 0; background:#f1e8ec; border-radius:4px; }
.home-status-grid .cycle-bar-fill { background:#d97f97; border-radius:4px; }
.home-status-grid .cycle-info-row { display:grid; gap:5px; font-size:11px; line-height:1.35; color:#355a43; }
.home-status-grid #home_cycle_countdown { color:#76857c; font-size:10px; }
.home-status-grid .glucose-dial-val { justify-content:flex-start; flex-wrap:wrap; gap:4px; font-size:35px; line-height:1.1; margin:0 0 8px; font-family:var(--font-suisseintl); font-weight:750; letter-spacing:-.6px; }
.home-status-grid .glucose-dial-val span { font-size:10px !important; margin:0 !important; letter-spacing:0; }
.home-status-grid .glucose-dial-time { font-size:11px; line-height:1.3; color:#64796c; }
.home-status-grid .glucose-alert-box { font-size:10px; line-height:1.35; padding:7px; margin-top:9px; border-radius:8px; align-items:flex-start; }
.home-status-grid .glucose-alert-box span { min-width:0; overflow-wrap:break-word; }
.home-status-grid .glucose-alert-box i { font-size:13px; flex-shrink:0; }
.home-timeline { padding:10px !important; }
.home-chart-meta { font-size:10px; line-height:1.3; color:#718178; margin:0 3px 12px; }
.home-chart-controls { display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:5px; margin-bottom:12px; }
.home-timeline #patient_chart_range_btns { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; min-width:0; }
.home-timeline .chart-range-btn { min-width:0; min-height:38px; padding:7px 2px; font-family:var(--font-suisseintl); font-size:11px; line-height:1.2; font-weight:500; border:1px solid #e1ece6; border-radius:9px; background:#f0f7f3; color:#315b41; white-space:nowrap; }
.home-timeline .chart-range-btn.active { background:#24613d; color:#fff; border-color:#24613d; }
.home-timeline .home-chart-reset { grid-column:2; grid-row:1; align-self:stretch; display:grid; place-items:center; padding:0; font-size:17px; }
.home-timeline #patient_history_sample_note { grid-column:1 / -1; margin:0 2px !important; line-height:1.4; }
.home-timeline .timeline-chart-wrapper { height:260px; border-color:#e6ede8; border-radius:10px; }
.home-timeline .timeline-scroll-container { overflow-x:hidden; }
.home-timeline .chart-range-btn:focus-visible { outline:3px solid #6caa7e; outline-offset:2px; }
@container patient-home (max-width:330px) { .home-status-grid .card { padding:10px !important; } .home-summary-heading { font-size:10.5px; gap:5px; } .home-summary-icon { width:23px; height:23px; flex-basis:23px; font-size:16px; } .home-status-grid #home_cycle_day { font-size:18px; } .home-status-grid .glucose-dial-val { font-size:30px; } }
@media(prefers-reduced-motion:reduce) { #screen_home .glucose-dial-val.critical { animation:none; } }
/* Match the supplied reference at phone widths: compact cards and horizontal factor rows. */
/* An explicit shell width avoids shrink-to-content sizing around the query container. */
@media(max-width:900px) { .desktop-wrapper > .simulator-panel { width:100%; } }
#screen_analytics { container:patient-analytics / inline-size; padding:16px 12px var(--mobile-scroll-bottom); background:linear-gradient(140deg,#fff 15%,#f6fbf8); }
body.is-mobile-app #screen_analytics { padding:16px 12px var(--mobile-scroll-bottom) !important; }
.factor-analytics-header { flex-wrap:nowrap; gap:8px; margin-bottom:12px; }
#screen_analytics .screen-title { font-family:var(--font-suisseintl); font-size:25px; line-height:1.2; font-weight:750; letter-spacing:-.7px; color:#123f27; white-space:nowrap; }
.factor-period-button { display:flex; align-items:center; justify-content:center; gap:6px; min-height:36px; border:1px solid #d4e3dc; background:#fbfdfc; color:#254f38; border-radius:11px; padding:7px 8px; font:inherit; font-size:10.5px; line-height:1.2; white-space:nowrap; cursor:pointer; }
.factor-period-button i { font-size:16px; }
.factor-period-button i:last-child { font-size:13px; }
.factor-card { background:#fff; border:1px solid #dce9e2; box-shadow:0 3px 12px #24483309; border-radius:12px; padding:9px 8px 8px; margin-bottom:10px; }
.factor-card-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:0 3px 7px; }
.factor-card-heading h3 { font-size:16px; line-height:1.2; font-weight:750; color:#173f29; margin:0; font-family:var(--font-suisseintl); }
.factor-card-heading h3 > i { color:#377d48; font-size:20px; vertical-align:-2px; margin-right:4px; }
.factor-card-heading .metric-help { flex-shrink:0; width:30px; min-width:30px; height:30px; min-height:30px; font-size:18px; }
.factor-overview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
.factor-overview-metric { position:relative; display:flex; flex-direction:column; padding:9px 7px 8px; gap:3px; border-radius:9px; background:#f0f8f3; min-width:0; min-height:105px; }
.factor-overview-metric.peach { background:#fff7eb; }
.factor-overview-metric.lavender { background:#f4f1fd; }
.factor-metric-heading { color:#264c36; font-size:9px; line-height:1.25; white-space:nowrap; }
.factor-metric-heading i { position:absolute; right:5px; top:27px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:15px; color:#287849; background:#d9f1e0; }
.factor-overview-metric.peach .factor-metric-heading i { color:#be7a24; background:#ffebc9; }
.factor-overview-metric.lavender .factor-metric-heading i { color:#6360ca; background:#e6e0ff; }
.factor-metric-value { font-size:24px; line-height:1.2; color:#123b23; font-weight:750; letter-spacing:-.5px; margin-top:2px; }
.factor-metric-value.wide { font-size:20px; }
.factor-metric-unit { font-size:9.5px; line-height:1.25; white-space:nowrap; color:#355a43; }
.factor-metric-delta { display:flex; flex-direction:column; gap:2px; font-size:9px; margin-top:3px; color:#3d6d50; line-height:1.3; }
.factor-metric-delta strong { font-size:11px; font-weight:600; }
.factor-metric-delta strong i { font-size:11px; vertical-align:-1px; margin-right:2px; }
.factor-metric-delta > span { color:#738179; font-size:8.5px; line-height:1.25; white-space:nowrap; }
.factor-overview-metric.limited .factor-metric-unit { color:#806527; }
.factor-sample,.factor-row-note,#factor_previous_period,#factor_target_note { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.factor-analytics-status,.factor-subnote { font-size:11px; line-height:1.4; color:#627269; margin:6px 0 9px; }
.factor-analytics-status[hidden] { display:none; }
.factor-analytics-status.error { color:#9b2828; }
.factor-row { display:grid; grid-template-columns:67px minmax(0,1fr); gap:6px; align-items:center; background:linear-gradient(105deg,#f1f8f5,#f6faf8); border:1px solid #e0ece5; border-radius:11px; padding:4px; margin-bottom:5px; min-height:61px; scroll-margin:12px; }
.factor-row:last-child { margin-bottom:0; }
.factor-row[data-factor=sleep],.factor-row[data-factor=stress] { grid-template-columns:101px minmax(0,1fr); }
.factor-row-heading { margin:0; min-width:0; }
.factor-entry-link { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; width:100%; min-height:47px; border:0; border-radius:6px; padding:2px; background:transparent; color:#214b33; font:inherit; text-align:left; cursor:pointer; }
.factor-row-label { display:block; max-width:100%; overflow-wrap:anywhere; font-size:10.5px; line-height:1.25; font-weight:500; }
.factor-row-label small { display:block; font:inherit; color:#7a877e; font-size:8px; white-space:nowrap; }
.factor-row-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; background:#dff1e6; color:#26754b; font-size:20px; flex-shrink:0; }
.factor-row-icon.cycle { color:#d75a79; background:#fae8ed; }
.factor-row-icon.sleep { color:#5d70ca; background:#e8edfb; }
.factor-row-icon.stress { color:#e4aa38; background:#fff0cc; }
.factor-buckets { display:grid; grid-template-columns:repeat(var(--bucket-count),minmax(0,1fr)); gap:4px; min-width:0; }
.factor-bucket { min-width:0; background:#ffffffa8; border:1px solid #edf2ef; padding:7px 4px 6px; border-radius:7px; display:flex; flex-direction:column; gap:4px; min-height:53px; justify-content:center; }
.factor-bucket-label { font-size:9px; line-height:1.15; min-height:11px; color:#3d4d43; white-space:normal; }
.factor-row[data-factor=cycle] .factor-bucket-label { font-size:9px; letter-spacing:-.1px; white-space:normal; min-height:21px; }
.factor-bucket strong { font-size:16px; line-height:1.1; font-weight:700; letter-spacing:-.25px; }
.factor-bucket small:not(.factor-sample) { font-size:8px; color:#866522; line-height:1.2; }
.factor-bar { background:#e7ebea; height:7px; border-radius:4px; overflow:hidden; }
.factor-bar span { display:block; height:100%; border-radius:4px; }
.factor-tone-0 { background:#d97f97; }.factor-tone-1 { background:#81b36f; }.factor-tone-2 { background:#7492d9; }.factor-tone-3 { background:#ee9853; }
.factor-row[data-factor=sleep] .factor-bucket:first-child .factor-bar span { background:#f1975e; }
.factor-row[data-factor=stress] .factor-bucket:nth-child(2) .factor-bar span { background:#f4b433; }
.factor-row[data-factor=stress] .factor-bucket:nth-child(3) .factor-bar span { background:#e9787b; }
.factor-row[data-factor=nutrition] .factor-bucket:first-child .factor-bar span,.factor-row[data-factor=nutrition] .factor-bucket:nth-child(3) .factor-bar span { background:#efba45; }
.factor-row[data-factor=nutrition] .factor-bucket:nth-child(2) .factor-bar span { background:#ee9b59; }
.factor-row[data-factor=nutrition] .factor-bucket-label { font-size:8.8px; letter-spacing:-.1px; min-height:20px; }
.factor-observations { padding:0; margin:0; list-style:none; counter-reset:observation; display:grid; gap:10px; }
.factor-observations li { counter-increment:observation; display:flex; align-items:flex-start; gap:8px; font-size:11px; line-height:1.4; color:#414f46; }
.factor-observations li:before { content:counter(observation); flex:0 0 23px; height:23px; border-radius:50%; display:grid; place-items:center; background:#dff3e7; color:#347c50; font-size:12px; font-weight:600; }
.factor-empty { font-size:11px; color:#718178; line-height:1.4; margin:0; }
.factor-details { margin:12px 0; border:1px solid #dce8e1; border-radius:12px; background:white; }
.factor-details > summary { padding:12px; font-size:12px; font-weight:500; color:#31563e; cursor:pointer; min-height:44px; }
.factor-details-content { padding:0 10px 10px; }
@container patient-analytics (max-width:355px) { #screen_analytics .screen-title { font-size:21px; } .factor-period-button { font-size:9px; gap:4px; padding:6px; } .factor-period-button i { font-size:14px; } .factor-row { grid-template-columns:61px minmax(0,1fr); gap:4px; } .factor-row[data-factor=sleep],.factor-row[data-factor=stress] { grid-template-columns:91px minmax(0,1fr); } .factor-bucket { padding:6px 3px; } .factor-bucket-label { font-size:8.5px; } .factor-row[data-factor=cycle] .factor-bucket-label { font-size:8.5px; } .factor-row[data-factor=nutrition] .factor-bucket-label { font-size:8.5px; } .factor-overview-metric { padding:8px 5px; } .factor-metric-heading { font-size:8.5px; } .factor-metric-value { font-size:22px; } .factor-metric-heading i { width:18px; height:18px; right:3px; font-size:13px; } .factor-metric-unit { font-size:9px; } .factor-metric-delta > span { font-size:8.5px; } }
@container patient-analytics (max-width:300px) { .factor-analytics-header { flex-wrap:wrap; } .factor-period-button { margin-left:auto; } .factor-row { grid-template-columns:62px minmax(0,1fr); } .factor-buckets { grid-template-columns:repeat(2,minmax(0,1fr)); } .factor-row[data-factor=sleep],.factor-row[data-factor=stress] { grid-template-columns:81px minmax(0,1fr); } .factor-bucket-label,.factor-row[data-factor=cycle] .factor-bucket-label,.factor-row[data-factor=nutrition] .factor-bucket-label { font-size:9px; } .factor-metric-heading { white-space:normal; min-height:20px; } .factor-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .factor-metric-delta > span { font-size:9px; } }
@container patient-analytics (min-width:500px) { .factor-row { grid-template-columns:100px minmax(0,1fr); min-height:74px; padding:7px; } .factor-row[data-factor=sleep],.factor-row[data-factor=stress] { grid-template-columns:150px minmax(0,1fr); } .factor-bucket-label,.factor-row[data-factor=cycle] .factor-bucket-label,.factor-row[data-factor=nutrition] .factor-bucket-label { font-size:12px; } .factor-row-label { font-size:13px; } .factor-bucket strong { font-size:20px; } .factor-overview-metric { min-height:118px; padding:12px; } .factor-metric-heading { font-size:13px; } .factor-metric-value { font-size:28px; } .factor-metric-heading i { width:30px; height:30px; top:37px; right:10px; font-size:20px; } .factor-metric-unit,.factor-metric-delta { font-size:12px; } .factor-metric-delta > span { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { #screen_analytics { animation:none; } }
.factor-period-dialog { border:1px solid #cddfd4; border-radius:20px; padding:22px; width:min(400px,calc(100% - 32px)); box-sizing:border-box; color:#173f27; }
.factor-period-dialog::backdrop { background:#0b241b70; }
.factor-period-dialog h3 { margin:0 0 18px; font-size:22px; }
.factor-period-presets { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.factor-period-presets button { border:1px solid #d4e4da; border-radius:10px; padding:9px; background:#f2f7f4; color:#235c3a; font:inherit; font-size:13px; min-height:40px; cursor:pointer; }
.factor-period-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.factor-period-fields label { display:grid; gap:7px; font-size:13px; min-width:0; }
.factor-period-fields input { min-width:0; box-sizing:border-box; width:100%; min-height:44px; padding:9px; border:1px solid #d7e2dc; border-radius:10px; font:inherit; font-size:13px; }
.factor-period-actions { display:flex; gap:10px; margin-top:18px; }
.factor-period-actions button { flex:1; min-height:44px; }

.home-load-status { margin:8px 0 4px; color:#92400e; font-size:11px; line-height:1.4; overflow-wrap:break-word; }
.home-load-retry { border:0; border-radius:7px; background:#f0f7f3; color:#315b41; padding:6px 8px; min-height:32px; font:inherit; font-size:11px; cursor:pointer; }
.home-load-status[hidden], .home-load-retry[hidden] { display:none; }
.home-load-retry:focus-visible { outline:3px solid #6caa7e; outline-offset:2px; }