/* Minimal daily overview. The current trace retains its existing plot/axis. */
:root {--positive:#087c4c; --negative:#c03b48;}
@media (prefers-color-scheme:dark) {:root {--positive:#61dfa6; --negative:#ff919b;}}
.workspace {grid-template-columns:190px minmax(0,1fr);}
.sidebar {background:var(--surface); color:var(--muted); border-right:1px solid var(--line); padding:28px 16px;}
.sidebar .brand {color:var(--ink); margin-bottom:48px;}
.sidebar-heading {color:var(--muted);}
.pump-button, .pump-button small {color:var(--muted);}
.pump-button:hover {background:var(--subtle);}
.pump-button[aria-current="true"] {background:var(--subtle); color:var(--ink); border-color:var(--line);}
.pump-button .pump-icon {color:var(--teal);}
.pump-button small {display:none;}
.count {border-color:var(--line);}
.topbar {min-height:70px; background:transparent; padding-block:12px;}
main {max-width:1220px; margin-inline:auto; padding-top:30px;}
.page-heading {margin-bottom:10px;}
.page-heading h1 {font-size:1.6rem; font-weight:600;}
#refresh {font-size:.75rem; min-height:40px; padding:8px 12px;}
.pump-status {display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:32px; font-size:.75rem; color:var(--muted);}
.pump-status .state-dot {height:6px; width:6px; box-shadow:none;}
.pump-status .pill {font-size:.6875rem; padding:2px 7px;}
.pump-status .muted {font-size:.75rem;}
.daily-heading {display:flex; justify-content:space-between; gap:16px; font-size:.75rem; color:var(--muted); margin-bottom:12px;}
.daily-metrics {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:24px; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.daily-card {padding:24px 26px; min-width:0;}
.daily-card + .daily-card {border-left:1px solid var(--line);}
.daily-card h2 {font-size:.8125rem; color:var(--muted); font-weight:500; letter-spacing:0;}
.daily-value {font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:550; letter-spacing:-.045em; margin:10px 0 8px; font-variant-numeric:tabular-nums; line-height:1.2;}
.daily-unit {font-size:.8rem; font-weight:400; color:var(--muted); letter-spacing:0;}
.daily-change {font-size:.75rem; color:var(--muted); font-variant-numeric:tabular-nums;}
.daily-change[data-tone="up"] {color:var(--positive);}
.daily-change[data-tone="down"] {color:var(--negative);}
.overview-grid {margin-bottom:28px;}
.chart-panel {border:1px solid var(--line);}
.chart-readout .reading-value {font-size:2.5rem;}
.chart-readout {min-height:86px;}
#ranges {display:grid; grid-template-columns:repeat(8,minmax(0,1fr));}
#ranges button {min-width:0; padding-inline:6px;}
#ranges button[aria-expanded="true"] {background:var(--selected); color:var(--ink); box-shadow:0 1px 3px var(--shadow);}
.custom-range {margin:14px 28px; display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end;}
.custom-range label {display:grid; gap:4px; font-size:.75rem; color:var(--muted); min-width:0;}
.custom-range input {width:100%; min-width:0; background:var(--input-bg); color:var(--ink); border:1px solid var(--control-border); padding:9px 8px; border-radius:7px; min-height:44px;}
.custom-range small,.custom-range .form-error {grid-column:1/-1; font-size:.6875rem; color:var(--muted);}
.custom-range .form-error {color:var(--error);}
.chart-inspector {border-bottom:0;}
.activity-panel {padding:0 2px;}
.activity-heading {display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;}
.activity-heading h2 {font-size:1rem;}
.activity-heading .muted {font-size:.75rem;}
.activity-row {display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid var(--line);}
.activity-time {min-width:0; font-size:.8125rem; font-variant-numeric:tabular-nums;}
.activity-time small {display:block; margin-top:3px; font-size:.75rem;}
.activity-control {display:flex; gap:8px; align-items:center; width:255px; flex-shrink:0;}
.quick-select {width:100%; min-width:0; min-height:44px; padding:10px 30px 10px 12px; border:1px solid var(--control-border); border-radius:8px; background:var(--surface); color:var(--ink); font-size:.8125rem;}
.saved-mark {color:var(--positive); font-size:.9rem;}
#activity-status {margin-top:12px; font-size:.75rem;}
#activity-more {margin-top:12px; min-height:44px;}
.label-disclosure {font-size:.6875rem; color:var(--muted); margin-top:14px;}
.saved-labels {margin-top:28px; border-top:1px solid var(--line); color:var(--muted);}
.saved-labels > summary {padding:16px 0; font-size:.8125rem;}
#labels-panel {color:var(--ink); padding:12px 0;}
@media(max-width:1000px) {.workspace {grid-template-columns:170px minmax(0,1fr);} .daily-card {padding:20px;} }
@media(max-width:760px) {
  .workspace {display:block;} .sidebar {display:none;}
  main {padding:24px 18px;} .topbar {padding:12px 18px;} .mobile-brand {color:var(--ink);}
  .daily-card {padding:18px 12px;} .daily-value {font-size:1.5rem;} .daily-unit {font-size:.65rem;}
  .daily-card h2,.daily-change {font-size:.6875rem;} .daily-value {min-height:29px;}
  .pump-status {margin-bottom:25px; gap:8px;} .pump-status #freshness {flex-basis:100%;}
  #ranges {grid-template-columns:repeat(4,minmax(0,1fr));}
  .custom-range {margin:12px 18px; grid-template-columns:1fr;} .custom-range small {grid-column:1;}
  .activity-heading {align-items:flex-start; flex-direction:column; gap:3px;}
  .activity-row {gap:12px; align-items:flex-start; flex-direction:column;}
  .activity-control {width:100%;} .activity-time {font-size:.8125rem;}
  .chart-readout .reading-value {font-size:2.2rem;}
}
@media(prefers-reduced-motion:reduce) {* {scroll-behavior:auto!important;}}
.chart-panel #ranges {display:grid; grid-template-columns:repeat(8,minmax(0,1fr));}
.chart-panel #ranges button:nth-child(n) {grid-column:auto;}
@media(max-width:760px) {.chart-panel #ranges {grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:350px) {.daily-card {padding-inline:9px;} .daily-value {font-size:1.2rem;}}

.history-feedback {min-height:44px; margin:0 18px; display:flex; align-items:center; justify-content:center; gap:10px; font-size:.75rem; color:var(--muted);}
.history-feedback button {min-height:44px;}
.chart-time-axis {min-height:49px;}

.activity-control {flex-wrap:wrap; min-width:0;}
.custom-activity {display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; width:100%;}
.custom-activity label {display:flex; flex-direction:column; gap:6px; flex:1 1 180px; min-width:0; font-size:.75rem;}
.custom-activity input {width:100%; min-width:0; min-height:44px; box-sizing:border-box;}
.custom-activity button {min-height:44px;}
.quick-select {max-width:100%;}