/* The same app, reflowed for laptop windows; loaded only from 1000px. */
body{background:var(--canvas);background-attachment:fixed}
html{scroll-padding-top:100px;scroll-padding-bottom:24px}
.app-shell{width:calc(100% - 64px);max-width:1160px;padding:24px 32px 36px;background:transparent;overflow:visible}
.page{padding:0;min-width:0}
.page-heading{margin-bottom:24px;min-height:48px}
h1{font-size:30px}
h2{font-size:20px}
.subtle,.note{font-size:14px}
.person-name{font-size:16px;gap:8px}
.person-dot{width:8px;height:8px}
.text-button{font-size:14px}
.bottom-nav{position:sticky;top:20px;left:auto;bottom:auto;transform:none;width:100%;max-width:560px;margin:0 auto 32px;padding:5px;border:1px solid var(--line);border-radius:12px}
.bottom-nav a{flex-direction:row;gap:9px;min-height:46px;font-size:15px}
.bottom-nav svg{width:21px;height:21px}
.network-message{margin:0 0 20px}

/* Weight entry leads; the shared comparison sits alongside it. */
#page-today{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;min-height:calc(100svh - 176px)}
#page-today .entry-form{padding:28px 28px 8px}
#page-today .entry-form .page-heading{margin-bottom:24px}
#page-today h1{font-size:30px}
#page-today .identity{font-size:14px}
#page-today .date-label{width:145px;font-size:14px}
#page-today .weight-field input{width:380px;font-size:126px;padding:22px 0 28px}
#page-today .weight-field input.wide-number{font-size:80px}
#page-today .unit{font-size:21px}
#page-today .last-weight{font-size:14px;margin-top:16px}
#page-today .habits{margin:24px 0}
#page-today .habits label{font-size:14px;gap:7px}
#page-today .habits input{width:17px;height:17px}
#page-today .save-feedback{font-size:14px;min-height:38px}
#page-today .pk-section{margin:0;padding:0}
#pk-pair{grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);gap:8px}
#pk-pair .pk-weight{font-size:44px;margin-top:12px}
#pk-pair .pk-weight small{font-size:13px}
#pk-pair .pk-change{font-size:13px;margin-top:6px}
#pk-pair .pk-status{font-size:13px;line-height:1.7}
.pk-win-slot{min-height:28px;margin-bottom:8px}
.pk-win{font-size:16px}
.pk-sticker{max-height:120px}

/* A readable month with its check-in totals beside the calendar. */
#page-calendar{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:36px;grid-template-areas:"heading heading" "month totals" "legend totals" "week totals" "days totals"}
#page-calendar>.page-heading{grid-area:heading;margin-bottom:20px}
#page-calendar>.month-nav{grid-area:month;margin:0 0 4px}
#page-calendar>.month-nav h2{font-size:24px}
#page-calendar>.legend{grid-area:legend;min-height:42px;font-size:14px}
#page-calendar .calendar-unit{font-size:12px}
#page-calendar>.weekdays{grid-area:week;font-size:13px;margin:10px 0}
#calendar-grid{grid-area:days;gap:8px}
#page-calendar .calendar-day,#calendar-grid[data-weeks="6"] .calendar-day{min-height:80px;gap:4px;padding:8px}
#page-calendar .day-number,#calendar-grid[data-weeks="6"] .day-number{font-size:14px;line-height:18px}
#page-calendar .day-weight,#calendar-grid[data-weeks="6"] .day-weight{font-size:14px;min-height:18px;line-height:18px;gap:2px}
#page-calendar .weight-down{width:10px;height:13px}
#page-calendar .month-summary{grid-area:totals;margin:8px 0 0;padding-left:28px;border-left:1px solid var(--line);align-self:start}
#page-calendar .month-summary .section-heading{display:block;margin-bottom:24px}
#page-calendar .month-summary .subtle{display:block;font-size:12px;margin-top:8px}
#month-checkins{grid-template-columns:1fr;gap:24px}
#month-checkins>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
#page-calendar .checkin-count{font-size:48px}
#page-calendar .checkin-count small{font-size:14px}

/* Give the plot the broad canvas, with both readings to the right. */
#page-trends{display:grid;grid-template-columns:minmax(0,1fr) 266px;column-gap:36px;grid-template-areas:"heading heading" "range readings" "chart readings" "summary readings";align-items:start}
#page-trends>.page-heading{grid-area:heading}
#current-weights{grid-area:readings;grid-template-columns:1fr;padding:0 0 0 28px;border-left:1px solid var(--line);gap:28px}
#current-weights>div+div{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:24px}
#current-weights .current-number{font-size:48px;margin:10px 0 4px}
#current-weights .current-number small{font-size:13px}
#current-weights .current-reading{gap:12px}
#current-weights .current-bmi{font-size:12px}
#current-weights .current-bmi strong{font-size:15px}
#current-weights .current-note{font-size:13px}
#current-weights .goal-progress{margin-top:16px;padding-top:14px}
#current-weights .progress-label{font-size:13px;margin-top:12px}
#current-weights .progress-label strong{font-size:16px}
#page-trends .range-switch{grid-area:range;width:280px;margin:0 0 20px}
#page-trends .range-switch button{font-size:14px}
#page-trends .chart-figure{grid-area:chart;min-width:0}
#page-trends .chart{height:clamp(320px,42svh,420px)}
#page-trends .chart text{font-size:12px}
#page-trends .chart-detail{font-size:13px;min-height:32px;gap:16px;flex-wrap:wrap}
#page-trends .chart-figure figcaption{font-size:12px}
#trend-summary{grid-area:summary;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-top:24px;padding-top:20px}
#trend-summary .trend-row{display:block;font-size:13px}
#trend-summary .trend-row>div{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
#trend-summary .progress-note{grid-column:1/-1;font-size:12px}

/* Settings stay compact while the BMI scale gains room for its labels. */
#page-settings{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:48px;grid-template-areas:"heading heading" "form bmi" "actions bmi" "error bmi" "sync bmi";align-items:start}
#page-settings>.page-heading{grid-area:heading;margin-bottom:24px}
#page-settings .profile-form{grid-area:form}
#page-settings .setting-field{font-size:17px;min-height:70px;padding:8px 0}
#page-settings .setting-field input{font-size:24px}
#page-settings .profile-form .primary{margin-top:24px}
#page-settings .bmi-section{grid-area:bmi;margin:0;padding:0 0 0 36px;border-top:0;border-left:1px solid var(--line)}
#page-settings .bmi-value{font-size:60px;padding:14px 0}
#page-settings .bmi-category{font-size:14px}
#page-settings .bmi-scale{margin-top:24px}
#page-settings .bmi-scale-label{font-size:12px;margin-bottom:14px}
#page-settings .bmi-band-name{font-size:14px}
#page-settings .bmi-band-range,#page-settings .bmi-band-weight,#page-settings .bmi-band-current{font-size:12px}
#page-settings .bmi-guidance{font-size:14px;margin-top:16px}
#page-settings .bmi-explanation{font-size:13px;margin-top:20px}
#page-settings .settings-actions{grid-area:actions;margin-top:24px}
#settings-error{grid-area:error}
#sync-status{grid-area:sync;text-align:left}
.date-dialog{max-width:390px}
.login-page{min-height:0;margin:12vh auto;padding:40px 36px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.loading-shell{max-width:1160px;background:transparent}