* { box-sizing: border-box; }
:root {
  color-scheme: light dark;
  --bg: #f5f6f0;
  --panel: #ffffff;
  --text: #22382e;
  --muted: #596b61;
  --border: #dfe5dc;
  --accent: #246648;
  --soft: #edf3e9;
  --error: #9d3038;
  --error-bg: #fff0ef;
  --shadow: 0 2px 8px rgb(27 52 34 / 3%);
  --radius: 16px;
}
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, BlinkMacSystemFont, sans-serif; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: rgb(36 102 72 / 12%); }
a, h1, h2, h3, p, dd { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2rem); line-height: 1.25; letter-spacing: -.025em; font-weight: 720; }
h2 { margin: 0; font-size: 1.05rem; line-height: 1.35; font-weight: 650; }
h3 { margin: 0; font-size: .9rem; font-weight: 600; }
p { margin: 0 0 12px; }
.site-header { max-width: 1140px; margin: auto; padding: 8px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-header form { margin: 0; }
.brand { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; text-decoration: none; font-size: 1.1rem; font-weight: 750; letter-spacing: -.04em; }
.brand-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
main { max-width: 1140px; margin: auto; padding: 20px 24px 40px; padding-bottom: max(40px, env(safe-area-inset-bottom)); }
.heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.heading > * { min-width: 0; }
.heading > .button { flex-shrink: 0; }
.dashboard-heading { margin-bottom: 20px; }
.panel { padding: 20px; margin-bottom: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); min-width: 0; }
.grid, .meter-grid { display: grid; gap: 16px; align-items: start; margin-bottom: 20px; }
.grid > .panel, .meter-grid > .panel { margin: 0; }
.meter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meter-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.meter-title h1, .meter-title h2 { min-width: 0; }
.meter-icon { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; flex: 0 0 36px; }
.meter-icon svg { display: block; width: 22px; height: 22px; }
.electricity { color: #805d12; background: #fbf2d7; }
.gas { color: #994d31; background: #fbece4; }
.water { color: #316b83; background: #e7f2f7; }
.value-label, .section-label { margin: 14px 0 3px; font-size: .75rem; font-weight: 550; color: var(--muted); }
.reading-value { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; line-height: 1.25; font-variant-numeric: tabular-nums; }
.reading-value > span { min-width: 0; font-size: clamp(1.45rem, 6.5vw, 2rem); font-weight: 730; letter-spacing: -.045em; }
.reading-value small { flex-shrink: 0; font-size: .9rem; font-weight: 500; color: var(--muted); }
.reading-date { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }
.interval-summary { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.interval-summary .section-label { margin: 0 0 8px; }
dl { margin: 0; font-variant-numeric: tabular-nums; }
.compact-metrics { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
.compact-metrics > div { min-width: 0; }
dt { color: var(--muted); font-size: .75rem; }
dd { margin: 2px 0 0; font-size: .92rem; font-weight: 600; line-height: 1.4; }
dd small { font-size: .75rem; font-weight: 450; color: var(--muted); }
.daily-metric { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.daily-metric dd { text-align: right; }
.card-actions, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.card-actions { justify-content: space-between; }
.button, button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font-size: .875rem; font-weight: 600; line-height: 1.35; text-decoration: none; cursor: pointer; }
.primary { color: #ffffff; background: var(--accent); border-color: var(--accent); }
.danger { background: var(--error); border-color: var(--error); color: #ffffff; }
.quiet { padding: 8px 0 8px 12px; background: transparent; border-color: transparent; color: var(--muted); font-size: .8rem; font-weight: 500; }
.text-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; text-decoration: none; font-size: .875rem; font-weight: 550; }
.text-link:hover { text-decoration: underline; }
.secondary { color: var(--muted); }
.empty { margin: 20px 0 16px; color: var(--muted); font-size: .9rem; }
.first-reading { width: 100%; }
.hint { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.single-reading { margin-top: 16px; }
.back { justify-content: flex-start; margin: -8px 0 12px; }
.form-page { width: 100%; max-width: 540px; margin: 0 auto; }
.form-page > h1 { margin-bottom: 20px; }
.login-page { margin-top: 24px; }
.selected-meter { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.previous-reading { display: flex; flex-wrap: wrap; gap: 3px 8px; margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
.previous-reading strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.previous-reading time { flex-basis: 100%; }
.selected-meter > .hint { margin-top: 10px; }
.field { margin: 0 0 18px; min-width: 0; }
label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; }
input, select, textarea { width: 100%; max-width: 100%; min-width: 0; min-inline-size: 0; min-height: 48px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 16px; line-height: 1.4; }
input[type=date], input[type=time] { display: block; -webkit-appearance: none; appearance: none; }
input::-webkit-date-and-time-value { text-align: left; }
textarea { resize: vertical; min-height: 90px; }
.field .hint { margin-top: 7px; }
.prominent-field input { font-size: 1.65rem; min-height: 60px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.025em; padding-right: 62px; }
.value-field { position: relative; }
.unit-badge { position: absolute; top: 47px; right: 14px; max-width: 44px; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; pointer-events: none; }
.datetime-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.note-details { border-block: 1px solid var(--border); }
summary { min-height: 44px; cursor: pointer; font-size: .875rem; font-weight: 550; padding: 12px 0; }
.note-details summary { display: flex; align-items: center; gap: 8px; list-style: none; }
.note-details summary::-webkit-details-marker { display: none; }
.details-chevron { margin-left: auto; font-size: 1.1rem; }
.note-details[open] .details-chevron { transform: rotate(45deg); }
.note-details .field { margin: 4px 0 16px; }
.calculation-details { margin-top: 12px; border-top: 1px solid var(--border); }
.calculation-details summary { color: var(--accent); }
.form-actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.form-actions button { flex: 1; min-height: 48px; }
.form-actions .text-link { padding: 0 8px; }
.login-submit { width: 100%; min-height: 48px; }
.errorlist { margin: 8px 0; padding-left: 20px; color: var(--error); font-size: .85rem; }
.error-label { font-size: .8rem; font-weight: 650; color: var(--error); }
.field-error { margin-top: 6px; }
.field-error .errorlist { margin-top: 2px; }
.field-invalid input, .field-invalid select, .field-invalid textarea { border-color: var(--error); }
.form-error-summary { padding: 12px; border-radius: 10px; background: var(--error-bg); color: var(--error); font-size: .875rem; margin: 0 0 16px; }
.notice { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--soft); color: var(--text); font-size: .9rem; margin-bottom: 20px; }
.next-readings .actions { margin-top: 10px; }
.next-readings .button { justify-content: flex-start; }
.next-readings .meter-icon { width: 24px; height: 24px; flex-basis: 24px; border-radius: 7px; }
.next-readings svg { width: 16px; height: 16px; }
.latest-interval h2 { margin-bottom: 4px; }
.latest-interval > .hint { margin-bottom: 12px; }
.latest-interval .compact-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filter-panel h2 { margin-bottom: 12px; }
.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
.filters > div { min-width: 0; }
.filters button { min-height: 48px; }
.active-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 10px; }
.stat-total { font-variant-numeric: tabular-nums; margin: 3px 0 8px; }
.stat-total strong { font-size: 1.45rem; letter-spacing: -.03em; font-weight: 680; }
.stat-total small { color: var(--muted); font-size: .85rem; }
.covered-time { margin-bottom: 14px; }
.stat-metrics { display: grid; gap: 8px; }
.stat-metrics > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 12px; }
.stat-metrics dd { text-align: right; font-size: .85rem; }
.period-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.period-grid h2 { margin-bottom: 12px; }
.charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.charts h2 { margin-bottom: 16px; }
.chart-unit { display: block; margin-top: 4px; font-size: .75rem; font-weight: 450; color: var(--muted); }
.chart { color: var(--accent); font-size: .85rem; }
.chart svg { width: 100%; height: auto; display: block; overflow: hidden; }
.charts .hint { margin-top: 12px; }
.section-heading { font-size: 1.2rem; }
.history-help { margin: 8px 0 16px; }
.reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; }
.reading .value-label { margin-top: 8px; }
.reading .reading-value > span { font-size: 1.6rem; }
.reading .compact-metrics > div:last-child { grid-column: 1 / -1; }
.note { white-space: pre-wrap; font-size: .85rem; margin: 0; color: var(--muted); }
.reading .note, .reading-actions { grid-column: 1 / -1; }
.reading-actions { display: flex; gap: 20px; border-top: 1px solid var(--border); padding-top: 4px; }
.reading-value > span.large-number, .reading .reading-value > span.large-number { font-size: clamp(1.2rem, 5.5vw, 1.55rem); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 10; padding: 12px; background: var(--panel); border: 2px solid var(--accent); border-radius: 10px; }
.skip-link:focus { top: 8px; }
@media (max-width: 900px) {
  .meter-grid, .period-grid { grid-template-columns: 1fr; }
  .meter-card { padding: 18px; }
  .meter-grid { max-width: 600px; margin-inline: auto; }
  .charts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .site-header { padding: 6px 16px; }
  main { padding: 12px 16px 32px; padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .heading { gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
  .dashboard-heading { flex-wrap: nowrap; }
  .dashboard-heading .button { padding-inline: 11px; }
  .panel { padding: 16px; border-radius: 14px; }
  .meter-grid { gap: 12px; }
  .meter-card { padding: 16px; }
  .form-page > h1 { margin-bottom: 16px; }
  .filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .filters button { width: 100%; }
  .latest-interval .compact-metrics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .latest-interval .compact-metrics > div:last-child { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; }
  .reading { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .reading-main .reading-value > span { font-size: 1.6rem; }
  .reading .compact-metrics > div:last-child { display: flex; justify-content: space-between; gap: 12px; }
  .page-meter-title { align-items: flex-start; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #142019; --panel: #1c2b22; --text: #edf4e9; --muted: #b0bfb3; --border: #35473a; --accent: #9ad1ae; --soft: #263e2e; --error: #ffc2bd; --error-bg: #472a2b; --shadow: none; }
  .primary { color: #163020; }
  .danger { background: #ac3c46; border-color: #ac3c46; color: #fff; }
  .electricity { color: #e8ca77; background: #3a3320; }
  .gas { color: #f0b49a; background: #3f2c23; }
  .water { color: #9acee5; background: #243740; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Compact reading-first detail navigation; native details work without JavaScript. */
.view-tabs { display: flex; gap: 6px; padding: 4px; background: var(--soft); border-radius: 12px; margin-bottom: 16px; }
.view-tabs a { flex: 1; display: flex; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; text-decoration: none; font-size: .9rem; color: var(--muted); border-radius: 9px; }
.view-tabs .active { background: var(--panel); color: var(--accent); font-weight: 650; box-shadow: var(--shadow); }
.filter-details { padding: 0 16px; }
.filter-details > summary { display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 48px; list-style: none; }
.filter-details > summary::-webkit-details-marker { display: none; }
.filter-summary { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.filter-toggle { flex-shrink: 0; color: var(--accent); }
.filter-details[open] .filter-toggle span { display: inline-block; transform: rotate(180deg); }
.filter-details .filters { margin: 12px 0; }
.filters .field { margin: 0; }
.empty-state p { margin-bottom: 12px; color: var(--muted); }
.meter-grid { gap: 12px; }
.meter-card { padding: 16px; }
.meter-card .interval-summary { margin-top: 12px; padding-top: 10px; }
.meter-card .card-actions { margin-top: 12px; }
.meter-card .value-label { margin-top: 10px; }
.chart-tooltip { padding: 10px 12px; margin-top: 8px; border: 1px solid var(--border); border-radius: 10px; font-size: .85rem; color: var(--text); background: var(--soft); overflow-wrap: anywhere; }
.chart-tip-dismiss { min-width: 44px; min-height: 44px; margin-top: 8px; }
.chart .chart-hit { cursor: pointer; outline: none; }
.chart .chart-hit:focus-visible { stroke: var(--accent); stroke-width: 2px; fill: var(--soft); fill-opacity: .5; }
@media(max-width: 600px) { .meter-card { padding: 14px; } }
/* Financial records share the existing mobile and color-system controls. */
.view-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
.view-tabs a {white-space:normal;text-align:center;overflow-wrap:anywhere;min-height:44px}
.financial-row {border-top:1px solid var(--border);padding:.7rem 0;overflow-wrap:anywhere}
.financial-row p {margin:.35rem 0}
.panel p,.panel dd {overflow-wrap:anywhere}
@media(min-width:760px){.view-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* One-line detail navigation: only this strip scrolls horizontally. */
.view-tabs {display:flex;position:relative;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;gap:4px;padding:3px;scroll-padding:3px;max-width:100%;scrollbar-width:thin;margin-bottom:12px}
.view-tabs a {flex:0 0 auto;white-space:nowrap;min-height:44px;padding:0 13px}
.view-tabs a.active {box-shadow:none;text-decoration:underline;text-underline-offset:5px}
.site-header {padding-top:4px;padding-bottom:4px}
main {padding-top:10px}
.back {margin-bottom:4px}
.detail-heading {margin-bottom:8px}
.detail-heading .back {margin-bottom:2px}
.energy-page {font-variant-numeric:tabular-nums}
.energy-page .panel {padding:16px;margin-bottom:12px;box-shadow:none}
.energy-page h2 {font-size:1.05rem}
.energy-page p {margin-bottom:8px}
.energy-page .year-caption {margin-top:3px;margin-bottom:10px}
.energy-value {font-size:clamp(1.8rem,7.5vw,2.6rem);font-weight:750;line-height:1.15;letter-spacing:-.025em;overflow-wrap:anywhere}
.energy-value small {font-size:.48em;font-weight:500;letter-spacing:normal;white-space:nowrap}
.budget-main {display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.budget-main .energy-value {margin:0}
.estimate-badge {display:inline-block;border:1px solid var(--border);background:var(--soft);color:var(--text);border-radius:5px;padding:1px 6px;font-size:.78rem;line-height:1.5;white-space:nowrap;font-weight:600}
.allowance-bar {position:relative;overflow:hidden;height:12px;border:1px solid var(--border);background:var(--soft);border-radius:6px;margin-top:12px}
.allowance-used {display:block;height:100%;background:var(--accent)}
.allowance-marker {position:absolute;top:0;bottom:0;width:3px;background:var(--text);border-left:1px solid var(--panel);border-right:1px solid var(--panel);transform:translateX(-50%)}
.bar-caption {display:flex;align-items:baseline;gap:10px;justify-content:space-between;margin-top:5px}
.bar-caption .hint {font-size:.75rem;text-align:right;line-height:1.4}
.budget-metrics {display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 10px}
.budget-metrics div {min-width:0}
.budget-metrics dt,.tariff-metrics dt {font-size:.8rem;color:var(--muted);line-height:1.4}
.budget-metrics dd {margin:4px 0 0;font-size:1.05rem;font-weight:650;line-height:1.35}
.energy-page .last-observed {font-size:.8rem;margin:8px 0 4px}
.energy-page .billing-note {font-size:.8rem;margin-bottom:3px}
.compact-details {border-top:1px solid var(--border);margin-top:8px}
.compact-details > summary {min-height:44px;font-size:.85rem;color:var(--accent);padding:10px 0;cursor:pointer}
.compact-details p {font-size:.85rem;line-height:1.5}
.estimate-form {margin-top:10px}
.estimate-dates {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.estimate-dates .field {min-width:0;margin:0 0 4px}
.estimate-dates label {font-size:.85rem}
.estimate-dates input {width:100%;max-width:100%;min-width:0;min-height:44px;font-size:16px;padding:9px 7px}
.estimate-form > button {width:100%}
.cost-result {margin-top:16px}
.cost-result .value-label {margin:0 0 4px}
.cost-segment {padding:8px 0;border-bottom:1px solid var(--border)}
.tariff-card .heading {margin-bottom:6px;gap:8px}
.tariff-name {display:flex;align-items:center;justify-content:space-between;gap:8px}
.tariff-name h3 {font-size:1rem;min-width:0}
.tariff-name .text-link {flex-shrink:0}
.tariff-metrics {margin:4px 0 8px}
.tariff-metrics > div {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px;padding:5px 0}
.tariff-metrics dd {margin:0;text-align:right;font-size:.95rem;overflow-wrap:anywhere;min-width:0}
.tariff-metrics small {font-size:.8em}
.tariff-history {padding:0 16px!important}
.tariff-history > summary {min-height:48px;padding:12px 0;cursor:pointer}
.historical-tariff {border-top:1px solid var(--border);padding:12px 0}
.estimate-error,.incomplete-budget,.no-current-tariff {margin-top:8px}
@media(max-width:360px){.estimate-dates{grid-template-columns:1fr}.energy-page .panel{padding:14px}.budget-metrics{gap:10px}.view-tabs a{padding:0 11px}}
@media(min-width:760px){.estimate-form > button{width:auto}.energy-page{max-width:800px}.energy-value{font-size:2.6rem}}
@supports(padding:max(0px)){main,.site-header{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}}
.bar-caption > * {min-width:0;overflow-wrap:anywhere}
.budget-metrics.wide-metrics {grid-template-columns:1fr;gap:10px}
.gas-manual-consumption {margin:8px 0}
.estimate-form select {max-width:100%;width:100%;min-width:0;font-size:16px}
.estimate-form ul {list-style:none;padding:0;margin:8px 0}
.estimate-form input[type=checkbox] {width:22px;min-height:22px;flex-shrink:0}
.estimate-form ul label {display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 0;overflow-wrap:anywhere}
.estimate-form .compact-details {margin-bottom:12px}
.gas-allocation-fields {border:0;margin:12px 0;padding:0;min-width:0}
.gas-allocation-fields legend {font-size:.85rem;margin-bottom:6px}
.gas-allocation-fields label {display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 0;overflow-wrap:anywhere}
.bar-caption > strong {flex-shrink:0;max-width:50%}
.seasonal-controls{display:flex;flex-wrap:wrap;gap:.65rem;align-items:end}.seasonal-controls label{flex:1 1 200px;min-width:0}.seasonal-controls select{width:100%;max-width:100%;font-size:16px;min-height:44px}.seasonal-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin:1rem 0}.seasonal-summary span{display:block;font-size:.85rem}.seasonal-summary strong{font-size:1.5rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.seasonal-summary small{font-size:1rem}.seasonal-chart{position:relative;min-width:0}.seasonal-chart svg{display:block;width:100%;height:auto;touch-action:pan-y}.seasonal-tooltip{padding:.6rem;border:1px solid var(--border);border-radius:.6rem;min-height:44px;font-size:.9rem;overflow-wrap:anywhere}.seasonal-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:.75rem}.seasonal-months dl{font-size:.9rem}.seasonal-months dd{margin:0 0 .5rem;font-variant-numeric:tabular-nums}
.meter-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.meter-card-header .meter-title{flex:1;align-items:flex-start;padding-top:4px}.meter-card-header h2{padding-top:5px}.meter-card-tools{display:flex;flex-shrink:0;gap:6px}.meter-tool.button{width:44px;height:44px;padding:0;background:#246648;border-color:#246648;color:#fff}.meter-tool svg{display:block;width:23px;height:23px}.meter-tool-plus{font-size:28px;font-weight:500;line-height:1}.meter-tool:hover{background:#1d523a;border-color:#1d523a}
.annual-card-summary{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}.annual-card-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.annual-card-metrics>div{min-width:0}.annual-card-metrics dd{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.annual-card-metrics dd small{display:block}.annual-card-summary .hint{margin:8px 0 0}
.reading{display:block}.reading-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.reading-main{min-width:0;flex:1}.reading-card-tools{display:flex;gap:6px;flex-shrink:0}.reading>.compact-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}.reading .compact-metrics>div{min-width:0}.reading .compact-metrics>div:last-child{grid-column:auto;display:block}.reading .compact-metrics dd{overflow-wrap:anywhere}.reading .compact-metrics dd small{display:block}.reading .note{margin-top:12px}.reading>.hint{margin-top:12px}
.stats-filter-panel{padding:12px}.stats-filter-panel .filters{display:flex;flex-wrap:nowrap;gap:8px;align-items:end}.stats-filter-panel .field{flex:1;min-width:0}.stats-filter-panel .field input{width:100%;min-width:0;max-width:100%;padding-left:6px;padding-right:6px;min-height:44px}.stats-filter-panel .filters>.button{flex:0 0 44px;width:44px;min-height:44px;height:44px;padding:0}.stats-filter-clear{font-size:24px}.stats-filter-panel input::-webkit-date-and-time-value{min-width:0;text-align:left}
.recent-period-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px;padding:4px;background:var(--soft);border-radius:10px}.recent-period-tabs a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:6px;text-align:center;text-decoration:none;font-size:.875rem;color:var(--muted);border-radius:8px}.recent-period-tabs a[aria-current]{background:var(--panel);color:var(--accent);font-weight:650;text-decoration:underline;text-underline-offset:5px}.recent-period>.hint{margin:0}
.seasonal-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.seasonal-summary>div{min-width:0}.seasonal-summary strong{display:block;font-size:clamp(1rem,4vw,1.5rem);line-height:1.3}.seasonal-summary strong small{display:block;font-size:.8rem;font-weight:500}.seasonal-summary span{font-size:.75rem;line-height:1.4;margin-bottom:4px;overflow-wrap:anywhere}
.seasonal-summary>div{display:flex;flex-direction:column}.seasonal-summary strong{margin-top:auto}
.seasonal-controls .seasonal-display-button{flex:0 0 44px;width:44px;height:44px;padding:0}

.header-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.header-actions a {min-height:44px;display:inline-flex;align-items:center}
.check-row {display:flex;align-items:center;gap:10px;min-height:44px;margin:12px 0}
.check-row input[type=checkbox],.form-panel input[type=checkbox] {width:22px;min-height:22px;flex-shrink:0}
.form-panel label:has(input[type=checkbox]) {min-height:44px;display:flex;align-items:center;gap:10px}
.form-panel .field:has(> input[type=checkbox]) {display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 10px;align-items:center}
.form-panel .field:has(> input[type=checkbox]) > label {grid-column:2;grid-row:1;min-height:44px;display:flex;align-items:center;margin:0}
.form-panel .field:has(> input[type=checkbox]) > input {grid-column:1;grid-row:1;margin:0}
.form-panel .field:has(> input[type=checkbox]) > .field-error {grid-column:1 / -1}
button:disabled {opacity:.55;cursor:not-allowed}