/* Compact, two-column home composition; record pages keep their own layout. */
@media (max-width:600px) {
  body main { padding-left:14px; padding-right:14px; }
  body #today .dashboard { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:stretch; }
  body #today .dashboard > .health,
  body #today .dashboard > .experiment,
  body #today .dashboard > .places { grid-column:1/-1; }
  body #today .dashboard > .money,
  body #today .dashboard > .moment { grid-column:auto; min-height:282px; --card-inset:16px; }
  body #today .card { padding:18px; }
  body #today .money,body #today .moment { padding:var(--card-inset); }
  body #today .card-top > span:first-child { gap:7px; white-space:nowrap; }
  body #today .card-top .illustrated-icon { width:23px; height:23px; flex-shrink:0; }
  body #today .money .card-top,body #today .moment .card-top { font-size:15px; }
  body #today .sleep-summary { display:grid; grid-template-columns:112px minmax(0,1fr); gap:14px; padding:20px 0; }
  body #today .sleep-chart { width:auto; min-width:0; margin:0; max-width:none; }
  body #today .sleep-value { font-size:32px; margin:8px 0; }
  body #today .sleep-value > span { font-size:12px; margin:0 2px; }
  body #today .sleep-comparison { font-size:12px; line-height:1.5; }
  body #today .sleep-comparison > span { display:block; }
  body #today .chart-topline { font-size:12px; flex-wrap:wrap; gap:0; }
  body #today .sleep-chart .chart-topline > b { font-size:12px; }
  body #today .sleep-track { height:38px; gap:2px; margin:9px 0; }
  body #today .chart-scale { font-size:12px; }
  body #today .health-stats { margin:0; padding:16px 0 0; grid-template-columns:repeat(3,minmax(0,1fr)); }
  body #today .health-stats > div { min-width:0; padding:0 10px; }
  body #today .health-stats > div:first-child { padding-left:0; }
  body #today .health-stats > div:last-child { padding-right:0; }
  body #today .health-stats strong { font-size:22px; margin:6px 0 2px; }
  body #today .health-stats strong small { font-size:12px; }
  body #today .stat-caption { font-size:12px; }
  body #today .money { display:flex; flex-direction:column; }
  body #today .money .card-top { margin-bottom:17px; }
  body #today .spend-head { gap:4px; }
  body #today .spend-head .metric-label { font-size:13px; }
  body #today .receipt-count { font-size:12px; white-space:nowrap; }
  body #today .spend-value { font-size:32px; letter-spacing:-1px; margin-top:6px; }
  body #today .spend-value > span { font-size:22px; }
  body #today .spend-value small { font-size:14px; margin-right:2px; }
  body #today .money-chart { margin-top:auto; padding-top:18px; }
  body #today .bars { height:58px; gap:5px; padding:0; margin:0; }
  body #today .bars i { width:100%; max-width:13px; }
  body #today .bar-labels { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); text-align:center; font-size:12px; margin-top:6px; }
  body #today .spend-breakdown { margin-top:12px; padding-top:10px; font-size:12px; gap:2px; flex-direction:column; }
  body #today .spend-breakdown > span { margin:0; gap:3px; flex-wrap:wrap; }
  body #today .moment .moment-date { font-size:32px; margin-top:47px; }
  body #today .moment .moment-text { bottom:16px; left:16px; right:16px; }
  body #today .moment h2 { font-size:18px; line-height:1.55; margin:0 0 14px; overflow-wrap:anywhere; }
  body #today .moment-location { font-size:12px!important; gap:4px; }
  body #today .moment-location > span { font-size:12px; }
  body #today .experiment .card-top { flex-wrap:wrap; height:auto; }
  body #today .experiment-metrics { margin:20px 0; }
  body #today .map-frame { margin-left:-18px; margin-right:-18px; }
}
@media (max-width:374px) {
  body main { padding-left:12px; padding-right:12px; }
  body #today .dashboard { gap:12px; }
  body #today .dashboard > .money,body #today .dashboard > .moment { --card-inset:13px; }
  body #today .moment .moment-text { left:13px; right:13px; }
  body #today .sleep-summary { grid-template-columns:105px minmax(0,1fr); gap:10px; }
  body #today .health-stats > div { padding:0 7px; }
  body #today .health-stats strong { font-size:20px; }
  body #today .moment h2 { font-size:17px; }
}
@media(max-width:600px){
  body #today .bar-labels .day-suffix{display:none}
  body #today .bar-labels>span{white-space:nowrap}
  body #today .moment h2{font-size:16px;line-height:1.6}
  body #today .money-chart{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-top:14px}
}
/* Render failures must retain a translucent card, never a blank bitmap. */
body .lens-surface[hidden]{display:none!important}
body.light :is(.card,.apps,.record-surface,.alternate):not(.refractive-ready){background:linear-gradient(135deg,#ffffff70,#ffffff32);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1px 2px #fff9,inset 0 -1px 2px #ffffff50,0 8px 26px #23432b1c;border:1px solid #ffffff80}
body:not(.light) :is(.card,.apps,.record-surface,.alternate):not(.refractive-ready){background:#18272dc2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid #ffffff40}

body #today .experiment .tag{border:0;background:transparent;box-shadow:none;backdrop-filter:none;padding:0;border-radius:0}

/* One stable photographic scene, independent of Safari toolbar/keyboard height. */
body.light::before,body:not(.light)::before,body.light::after,body:not(.light)::after,.wallpaper-viewport{position:fixed;inset:0 0 auto;height:var(--wallpaper-height,100vh);width:100%;pointer-events:none}
@supports(height:100lvh){body.light::before,body:not(.light)::before,body.light::after,body:not(.light)::after,.wallpaper-viewport{height:100lvh}}
.wallpaper-viewport{visibility:hidden;z-index:-10}
body.light,body:not(.light){background-attachment:scroll}
body.light::before,body:not(.light)::before{transform:translateZ(0);backface-visibility:hidden}
.native-touch-glass .card,.native-touch-glass .ledger-panel,.native-touch-glass .record-surface,.native-touch-glass .alternate,.native-touch-glass .bottom{backdrop-filter:blur(14px) saturate(1.12);-webkit-backdrop-filter:blur(14px) saturate(1.12);box-shadow:inset 0 0 2px 1px #ffffff70,inset 0 0 12px #ffffff38,0 8px 24px #20382d20}
.native-touch-glass .lens-surface{display:none!important}

/* The wallpaper extends under iPhone chrome; only controls respect the safe area. */
html{min-height:100%;background:#edf1e7}
html:has(body:not(.light)){background:#101b1f}
body{isolation:isolate;min-height:100vh;min-height:100lvh}
@media(max-width:600px),(display-mode:standalone){
 body main{padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(120px + env(safe-area-inset-bottom,0px));padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
 body.light main{padding-top:calc(24px + env(safe-area-inset-top,0px))}
 body .bottom{bottom:calc(10px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px))}
 body #amap-picker{padding-top:calc(16px + env(safe-area-inset-top,0px));padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
 body[data-view="health-page"] main{padding-top:calc(12px + env(safe-area-inset-top,0px))!important;padding-bottom:env(safe-area-inset-bottom,0px)!important}
 body #health-frame{height:calc(100dvh - 76px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
}
@media(display-mode:standalone){
 html,body{overscroll-behavior-y:none}
}