:root {
    color-scheme:dark;
    --pool-bg:light-dark(#f1f6fb,#000000);
    --pool-panel:light-dark(#ffffff,#0a0a0a);
    --pool-text:light-dark(#19354d,#ffffff);
    --pool-muted:light-dark(#60758b,#bfbfbf);
    --pool-line:light-dark(#dce6f0,#333333);
    --pool-accent:light-dark(#0064c8,#009dff);
    --pool-soft:light-dark(#e3f1fc,#002542);
    --pool-button:light-dark(#006ce0,#006ce0);
    --pool-button-text:light-dark(#ffffff,#ffffff);
    --pool-range:light-dark(#008000,#30a46c);
    --pool-outside:light-dark(#d60000,#e5484d);
    --pool-temp-cold:light-dark(#0055ff,#0066ff);
    --pool-temp-cool:light-dark(#00a6d6,#00cfff);
    --pool-temp-mild:light-dark(#dfba00,#ffe000);
    --pool-temp-warm:light-dark(#ef7000,#ff8000);
    --pool-temp-hot:light-dark(#e60000,#ff0000);
    --pool-selected:light-dark(#ffffff,#262626);
    color:var(--pool-text); font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--pool-bg); border:1px solid var(--pool-line); border-radius:18px; overflow:hidden; position:relative;
  }
  #pool-direction[data-theme="light"] { color-scheme:light; }
  #pool-direction * { box-sizing:border-box; }
  #pool-direction button, #pool-direction input, #pool-direction select, #pool-direction textarea { font:inherit; }
  #pool-direction button { cursor:pointer; }
  #pool-direction h1, #pool-direction h2, #pool-direction h3, #pool-direction p { margin:0; }
  #pool-direction .pool-shell { display:grid; grid-template-columns:176px minmax(0,1fr); min-height:600px; }
  #pool-direction .pool-sidebar { background:var(--pool-panel); padding:28px 16px 18px; display:flex; flex-direction:column; border-right:1px solid var(--pool-line); }
  #pool-direction .pool-brand { display:flex; align-items:center; gap:10px; padding:0 9px 30px; font-size:20px; font-weight:600; letter-spacing:-.6px; }
  #pool-direction .pool-brand-icon { display:grid; place-items:center; width:33px; height:33px; border-radius:10px; background:var(--pool-button); color:var(--pool-button-text); }
  #pool-direction .pool-nav { display:flex; flex-direction:column; gap:5px; }
  #pool-direction .pool-nav button { display:flex; align-items:center; gap:10px; padding:11px 12px; background:none; border:0; border-radius:8px; text-align:left; color:var(--pool-muted); font-size:13px; }
  #pool-direction .pool-nav button[aria-pressed="true"] { background:var(--pool-soft); color:var(--pool-accent); font-weight:600; }
  #pool-direction .pool-sidebar-bottom { margin-top:auto; padding:34px 10px 0; color:var(--pool-muted); font-size:12px; }
  #pool-direction .pool-owner { display:flex; align-items:center; gap:10px; padding-top:15px; border-top:1px solid var(--pool-line); color:var(--pool-text); font-size:13px; }
  #pool-direction .pool-avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--pool-bg); }
  #pool-direction .pool-main { padding:26px 28px 30px; min-width:0; }
  #pool-direction .pool-context { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; color:var(--pool-muted); font-size:12px; margin-bottom:26px; }
  #pool-direction .pool-context span { display:flex; align-items:center; gap:6px; }
  #pool-direction .pool-demo { border:1px solid var(--pool-line); border-radius:6px; padding:4px 8px; background:var(--pool-panel); }
  #pool-direction .pool-appearance { display:flex; align-items:center; gap:2px; padding:3px; background:var(--pool-bg); border:1px solid var(--pool-line); border-radius:8px; }
  #pool-direction .pool-appearance button { display:flex; align-items:center; justify-content:center; gap:5px; padding:5px 9px; border:0; background:none; border-radius:5px; color:var(--pool-muted); font-size:12px; }
  #pool-direction .pool-appearance button[aria-pressed="true"] { background:var(--pool-selected); color:var(--pool-text); }
  #pool-direction .pool-demo-note { display:flex; gap:6px; align-items:center; color:var(--pool-muted); font-size:11px; margin:0 0 14px; }
  #pool-direction .pool-gauge-legend { display:flex; align-items:center; gap:7px 15px; flex-wrap:wrap; padding:13px 0 0; color:var(--pool-muted); font-size:11px; }
  #pool-direction .pool-gauge-legend>span { display:inline-flex; align-items:center; gap:5px; }
  #pool-direction .pool-legend-range, #pool-direction .pool-legend-outside { width:13px; height:5px; border-radius:3px; background:var(--pool-range); }
  #pool-direction .pool-legend-outside { background:var(--pool-outside); }
  #pool-direction .pool-legend-target { width:2px; height:12px; background:var(--pool-text); }
  #pool-direction .pool-legend-reading { width:8px; height:8px; background:var(--pool-text); border-radius:50%; }
  #pool-direction .pool-heading { display:flex; gap:18px; align-items:center; justify-content:space-between; margin-bottom:26px; }
  #pool-direction h1 { font-size:29px; font-weight:500; letter-spacing:-1.1px; line-height:1.2; }
  #pool-direction .pool-subtitle { color:var(--pool-muted); margin-top:6px; font-size:13px; }
  #pool-direction .pool-primary, #pool-direction .pool-secondary { display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid transparent; border-radius:8px; padding:10px 14px; font-size:13px; font-weight:500; white-space:nowrap; }
  #pool-direction .pool-primary { background:var(--pool-button); color:var(--pool-button-text); }
  #pool-direction .pool-secondary { background:var(--pool-panel); border-color:var(--pool-line); color:var(--pool-text); }
  #pool-direction .pool-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  #pool-direction .pool-basin { background:var(--pool-panel); border:1px solid var(--pool-line); border-radius:12px; padding:20px; min-width:0; }
  #pool-direction .pool-basin-title { display:flex; gap:9px; justify-content:space-between; align-items:center; margin-bottom:21px; }
  #pool-direction .pool-basin-title h2 { font-size:17px; font-weight:500; letter-spacing:-.3px; }
  #pool-direction .pool-basin-title small { color:var(--pool-muted); font-size:12px; }
  #pool-direction .pool-basin-symbol { color:var(--pool-accent); background:var(--pool-soft); border-radius:9px; padding:9px; display:grid; place-items:center; }
  #pool-direction .pool-measures { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
  #pool-direction .pool-device-time { display:flex; align-items:center; justify-content:space-between; gap:6px 10px; flex-wrap:wrap; font-size:11px; color:var(--pool-muted); margin-bottom:13px; }
  #pool-direction .pool-device-time>span { display:flex; align-items:center; gap:5px; }
  #pool-direction .pool-device-time time, #pool-direction .pool-reading-time time { white-space:nowrap; font-variant-numeric:tabular-nums; }
  #pool-direction .pool-equipment { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:13px; background:var(--pool-bg); border-radius:9px; }
  #pool-direction .pool-equipment .pool-metric-label { margin-bottom:6px; }
  #pool-direction .pool-pump-status { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; }
  #pool-direction .pool-pump-status.is-running { color:var(--pool-accent); }
  #pool-direction .pool-pump-status.is-stopped { color:var(--pool-muted); }
  #pool-direction .pool-hydro { display:flex; align-items:center; gap:8px; }
  #pool-direction .pool-hydro-label { color:var(--pool-muted); font-size:11px; }
  #pool-direction .pool-hydro-ring { width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--pool-accent) var(--hydro-fill),var(--pool-line) 0); }
  #pool-direction .pool-hydro-ring>span { display:grid; place-items:center; width:36px; height:36px; background:var(--pool-bg); border-radius:50%; font-size:12px; font-weight:500; font-variant-numeric:tabular-nums; }
  #pool-direction .pool-targets { padding:11px 0 13px; border-bottom:1px solid var(--pool-line); color:var(--pool-muted); font-size:11px; }
  #pool-direction .pool-targets summary { cursor:pointer; padding:3px 0; }
  #pool-direction .pool-targets dl { display:grid; grid-template-columns:1fr auto; gap:6px 14px; margin:10px 0 1px; }
  #pool-direction .pool-targets dd { margin:0; color:var(--pool-text); font-variant-numeric:tabular-nums; }
  #pool-direction .pool-reading-time { display:flex; flex-direction:column; gap:3px; margin-top:15px; font-size:11px; color:var(--pool-muted); }
  #pool-direction .pool-reading-time time { font-size:13px; color:var(--pool-text); font-weight:500; }
  #pool-direction .pool-reading-condition { display:flex; gap:6px; align-items:flex-start; margin-top:11px; min-height:35px; font-size:11px; color:var(--pool-muted); }
  #pool-direction .pool-reading-condition strong { font-weight:500; color:var(--pool-text); }
  #pool-direction .pool-round-measure { min-width:0; text-align:center; }
  #pool-direction .pool-reading-ring { position:relative; width:100%; max-width:110px; aspect-ratio:1; margin:auto; isolation:isolate; }
  #pool-direction .pool-progress-ring { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke-width:7; }
  #pool-direction .pool-progress-track { stroke:var(--pool-line); }
  #pool-direction .pool-progress-arc { stroke-linecap:butt; }
  #pool-direction .pool-progress-arc.is-good { stroke:var(--pool-range); }
  #pool-direction .pool-progress-arc.is-outside { stroke:var(--pool-outside); }
  #pool-direction .pool-progress-arc.is-unknown { stroke:var(--pool-muted); }
  #pool-direction .pool-progress-ring + .pool-gauge-center { inset:14%; background:transparent; }
  #pool-direction .pool-gauge-delta { display:block; min-height:17px; margin:3px 0; color:var(--pool-muted); font-size:10px; }
  #pool-direction .pool-temperature-band { position:absolute; inset:5px; border-radius:50%; background:var(--temperature-color); }
  #pool-direction .pool-temperature-scale { margin:8px 5px 0; }
  #pool-direction .pool-temperature-track { position:relative; height:5px; border-radius:3px; background:linear-gradient(to right,var(--pool-temp-cold) 0%,var(--pool-temp-cool) 25%,var(--pool-temp-mild) 50%,var(--pool-temp-warm) 75%,var(--pool-temp-hot) 100%); }
  #pool-direction .pool-temperature-track::after { content:""; position:absolute; top:-3px; left:clamp(5px,var(--temperature-position),calc(100% - 5px)); width:2px; height:11px; background:var(--pool-text); box-shadow:0 0 0 1px var(--pool-panel); }
  #pool-direction .pool-temperature-limits { display:flex; justify-content:space-between; gap:4px; margin-top:7px; color:var(--pool-muted); font-size:11px; }
  #pool-direction .pool-gauge-center { position:absolute; inset:12px; border-radius:50%; background:var(--pool-panel); display:flex; flex-direction:column; justify-content:center; align-items:center; }
  #pool-direction .pool-reading-ring .pool-number { font-size:25px; line-height:1.15; letter-spacing:-.8px; }
  #pool-direction .pool-reading-ring .pool-unit { font-size:11px; color:var(--pool-muted); min-height:16px; }
  #pool-direction .pool-gauge-pointer, #pool-direction .pool-gauge-target { position:absolute; inset:0; transform:rotate(var(--marker-angle)); pointer-events:none; }
  #pool-direction .pool-gauge-pointer::after { content:""; position:absolute; top:3px; left:50%; width:11px; height:11px; transform:translateX(-50%); background:var(--pool-text); border:2px solid var(--pool-panel); border-radius:50%; }
  #pool-direction .pool-gauge-target::after { content:""; position:absolute; top:0; left:50%; width:2px; height:15px; transform:translateX(-50%); background:var(--pool-text); box-shadow:0 0 0 1px var(--pool-panel); }
  #pool-direction .pool-gauge-limits { position:absolute; bottom:-2px; left:4px; right:4px; display:flex; justify-content:space-between; gap:2px; font-size:11px; color:var(--pool-muted); font-variant-numeric:tabular-nums; }
  #pool-direction .pool-round-measure .pool-metric-label { margin:10px 0 3px; color:var(--pool-text); font-weight:500; }
  #pool-direction .pool-gauge-target-label { display:block; font-size:11px; min-height:33px; color:var(--pool-muted); }
  #pool-direction .pool-gauge-target-label b { color:var(--pool-text); font-weight:500; white-space:nowrap; }
  #pool-direction .pool-gauge-status { display:block; font-size:11px; font-weight:500; color:var(--pool-range); }
  #pool-direction .pool-gauge-status.is-outside { color:var(--pool-outside); }
  #pool-direction .pool-gauge-band-label { display:block; color:var(--pool-muted); font-size:11px; font-variant-numeric:tabular-nums; }
  #pool-direction .pool-reading-source { display:flex; align-items:center; justify-content:center; gap:5px; font-size:11px; color:var(--pool-muted); margin-top:12px; }
  #pool-direction .pool-number { font-size:27px; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
  #pool-direction .pool-number small { font-size:12px; letter-spacing:0; color:var(--pool-muted); }
  #pool-direction .pool-metric-label { color:var(--pool-muted); font-size:11px; display:block; margin-bottom:3px; }
  #pool-direction .pool-source { display:flex; align-items:center; gap:5px; color:var(--pool-muted); margin-top:17px; padding-top:12px; border-top:1px solid var(--pool-line); font-size:11px; flex-wrap:wrap; }
  #pool-direction .pool-source .pool-method { color:var(--pool-accent); }
  #pool-direction .pool-basin-actions { display:flex; gap:6px; margin-top:15px; }
  #pool-direction .pool-basin-actions button { flex:1; font-size:12px; padding:8px; }
  #pool-direction .pool-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:26px 0 13px; }
  #pool-direction .pool-section-head h2 { font-size:16px; font-weight:500; }
  #pool-direction .pool-text-button { color:var(--pool-accent); background:none; border:none; padding:6px 0; font-size:12px; display:flex; align-items:center; gap:5px; }
  #pool-direction .pool-log { background:var(--pool-panel); border:1px solid var(--pool-line); border-radius:12px; overflow:hidden; }
  #pool-direction .pool-log-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--pool-line); }
  #pool-direction .pool-log-row:last-child { border:0; }
  #pool-direction .pool-log-icon { color:var(--pool-muted); background:var(--pool-bg); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; }
  #pool-direction .pool-log-title { font-weight:500; font-size:13px; }
  #pool-direction .pool-log-note { color:var(--pool-muted); font-size:12px; }
  #pool-direction .pool-log-date { color:var(--pool-muted); text-align:right; font-size:11px; }
  #pool-direction .pool-tag { font-size:10px; font-weight:500; letter-spacing:.5px; color:var(--pool-accent); padding-right:8px; }
  #pool-direction .pool-footer { display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:var(--pool-muted); font-size:11px; margin-top:18px; }
  #pool-direction .pool-footer #pool-logout { margin-left:auto; font-size:12px; }
  #pool-direction .pool-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
  #pool-direction .pool-filters button { background:var(--pool-panel); color:var(--pool-muted); border:1px solid var(--pool-line); border-radius:7px; padding:7px 11px; font-size:12px; }
  #pool-direction .pool-filters button[aria-pressed="true"] { background:var(--pool-soft); color:var(--pool-accent); border-color:var(--pool-soft); }
  #pool-direction .pool-stack { display:grid; gap:13px; }
  #pool-direction .pool-option { padding:18px; background:var(--pool-panel); border:1px solid var(--pool-line); border-radius:10px; }
  #pool-direction .pool-option h2 { font-size:15px; font-weight:500; margin-bottom:5px; }
  #pool-direction .pool-option p { font-size:12px; color:var(--pool-muted); }
  #pool-direction .pool-form { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
  #pool-direction .pool-form label { display:grid; gap:5px; color:var(--pool-muted); font-size:12px; }
  #pool-direction .pool-form input, #pool-direction .pool-form select, #pool-direction .pool-form textarea { min-width:0; width:100%; border:1px solid var(--pool-line); border-radius:7px; background:var(--pool-panel); color:var(--pool-text); padding:9px 10px; font-size:16px; }
  #pool-direction .pool-form .pool-span { grid-column:1/-1; }
  #pool-direction .pool-form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }
  #pool-direction .pool-form-intro { color:var(--pool-muted); font-size:12px; margin-bottom:18px; }
  #pool-direction .pool-review { background:var(--pool-soft); border-radius:9px; padding:17px; margin-top:18px; color:var(--pool-accent); font-size:13px; }
  #pool-direction .pool-review dl { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0 0; }
  #pool-direction .pool-review dd { text-align:right; margin:0; font-variant-numeric:tabular-nums; }
  #pool-direction .pool-review button { margin-top:16px; }
  #pool-direction [hidden] { display:none!important; }
  #pool-direction svg { flex-shrink:0; }
  @media (max-width:820px) {
    #pool-direction .pool-shell { grid-template-columns:145px minmax(0,1fr); }
    #pool-direction .pool-sidebar { padding:23px 10px 16px; }
    #pool-direction .pool-main { padding:24px 18px; }
    #pool-direction .pool-basin { padding:15px; }
    #pool-direction .pool-number { font-size:24px; }
    #pool-direction .pool-heading { align-items:flex-start; }
    #pool-direction .pool-heading>.pool-primary { padding:9px 11px; }
  }
  @media (max-width:640px) {
    #pool-direction .pool-shell { display:block; min-height:0; }
    #pool-direction .pool-sidebar { border-right:0; border-bottom:1px solid var(--pool-line); padding:15px 12px 9px; }
    #pool-direction .pool-brand { padding:0 7px 13px; font-size:18px; }
    #pool-direction .pool-nav { flex-direction:row; gap:3px; }
    #pool-direction .pool-nav button { flex:1; justify-content:center; flex-direction:column; gap:4px; padding:9px 3px; font-size:11px; }
    #pool-direction .pool-sidebar-bottom { display:none; }
    #pool-direction .pool-main { padding:19px 16px 23px; }
    #pool-direction .pool-context { margin-bottom:21px; font-size:11px; }
    #pool-direction .pool-heading { flex-wrap:wrap; gap:14px; margin-bottom:20px; }
    #pool-direction h1 { font-size:27px; }
    #pool-direction .pool-pair { grid-template-columns:1fr; gap:12px; }
    #pool-direction .pool-basin { padding:19px; }
    #pool-direction .pool-basin-title { margin-bottom:16px; }
    #pool-direction .pool-number { font-size:28px; }
    #pool-direction .pool-log-row { padding:13px; gap:8px; }
    #pool-direction .pool-log-date { max-width:64px; }
    #pool-direction .pool-log-title { font-size:12px; }
    #pool-direction .pool-log-note { font-size:11px; }
    #pool-direction .pool-form { gap:12px 9px; }
  }
  @media (min-width:641px) and (max-width:900px) { #pool-direction #pool-overview>.pool-pair { grid-template-columns:1fr; } }
  @media (max-width:380px) { #pool-direction .pool-reading-ring .pool-number { font-size:22px; } }
  @media (pointer:coarse) { #pool-direction button, #pool-direction .pool-targets summary { min-height:44px; } }

/* Application surfaces extend the approved prototype without changing its palette. */
html#pool-direction { border:0; border-radius:0; overflow:visible; min-height:100%; }
body { margin:0; }
#pool-direction .pool-shell { min-height:100dvh; max-width:1560px; margin:auto; grid-template-columns:190px minmax(0,1fr); }
#pool-direction .pool-sidebar { position:sticky; top:0; height:100dvh; }
#pool-direction .pool-main { padding:32px clamp(20px,3vw,48px) 36px; }
#pool-direction h1:focus { outline:none; }
#pool-direction button, #pool-direction a, #pool-direction summary { -webkit-tap-highlight-color:transparent; }
#pool-direction button, #pool-direction .pool-targets summary, #pool-direction .pool-secondary { min-height:44px; }
#pool-direction a { color:var(--pool-accent); }
#pool-direction a.pool-secondary { text-decoration:none; color:var(--pool-text); }
#pool-direction button:disabled { opacity:.48; cursor:default; }
#pool-direction :focus-visible { outline:2px solid var(--pool-accent); outline-offset:3px; }
#pool-direction .pool-secondary:hover:not(:disabled), #pool-direction .entry-row:hover { background:var(--pool-selected); }
#pool-direction .pool-primary:hover:not(:disabled) { filter:brightness(1.1); }
.icon { vertical-align:middle; }
#pool-direction .skip-link { position:fixed; top:-80px; left:16px; padding:12px; background:var(--pool-panel); z-index:20; }
#pool-direction .skip-link:focus { top:10px; }
#pool-direction .mode-bar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:-4px 0 18px; color:var(--pool-muted); font-size:12px; }
#pool-direction .mode-bar button { flex-shrink:0; }
#pool-direction .pool-basin { padding:22px; }
#pool-direction .pool-reading-ring { max-width:128px; }
#pool-direction .pool-reading-ring .pool-number { font-size:29px; }
#pool-direction .no-reading::after { display:none; }
#pool-direction .reading-stamp { display:block; color:var(--pool-muted); font-size:10px; line-height:1.5; margin-top:10px; }
#pool-direction .manual-summary { margin-top:20px; padding-top:15px; border-top:1px solid var(--pool-line); }



#pool-direction .entry-row { width:100%; border:0; border-bottom:1px solid var(--pool-line); background:transparent; color:var(--pool-text); font:inherit; text-align:left; }
#pool-direction .entry-row .pool-log-title, #pool-direction .entry-row .pool-log-note { display:block; }
#pool-direction .entry-row .pool-log-note { overflow-wrap:anywhere; }
#pool-direction .entry-row.voided { opacity:.55; }
#pool-direction .empty-state { padding:32px 22px; color:var(--pool-muted); text-align:center; }
#pool-direction .empty-state strong { color:var(--pool-text); font-size:14px; font-weight:500; }
#pool-direction .empty-state p { margin-top:7px; font-size:12px; }
#pool-direction .pool-error, #pool-direction .pool-warning { border:1px solid var(--pool-outside); border-radius:8px; padding:12px 14px; margin-bottom:18px; color:var(--pool-text); font-size:13px; }
#pool-direction .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:13px 20px; background:var(--pool-soft); color:var(--pool-text); border:1px solid var(--pool-accent); border-radius:10px; box-shadow:0 6px 30px #0004; z-index:15; max-width:calc(100% - 32px); width:max-content; }
#pool-direction .section-note { color:var(--pool-muted); font-size:12px; margin:12px 0 18px; }
#pool-direction .field-help { color:var(--pool-muted); font-size:11px; align-self:center; }
#pool-direction .form-section-title { border-top:1px solid var(--pool-line); margin-top:6px; padding-top:18px; font-size:13px; font-weight:500; }
#pool-direction .pool-form input, #pool-direction .pool-form select { min-height:44px; }
#pool-direction .pool-form textarea { resize:vertical; }
#pool-direction #entry-screen { max-width:900px; margin:0 auto; }
#pool-direction #entry-screen .pool-option { padding:26px; }
#pool-direction .action-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
#pool-direction .action-heading h2{font-size:22px;margin:0}
#pool-direction .action-heading label{display:grid;gap:4px;color:var(--pool-muted);font-size:12px}
#pool-direction .action-heading select{min-width:150px;min-height:44px;padding:8px 12px;border:1px solid var(--pool-line);border-radius:8px;background:var(--pool-panel);color:var(--pool-text);font:inherit;font-size:16px}
#pool-direction .action-products{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:22px}
#pool-direction .action-products button{min-height:78px;padding:14px 8px;border:1px solid var(--pool-line);border-radius:12px;background:var(--pool-soft);color:var(--pool-text);font:inherit;font-size:16px;line-height:1.25;cursor:pointer}
#pool-direction .action-products button[aria-pressed=true]{border-color:var(--pool-accent);color:var(--pool-accent);box-shadow:inset 0 0 0 1px var(--pool-accent)}
#pool-direction .action-dose{grid-template-columns:minmax(0,1fr) minmax(85px,.35fr);max-width:420px;margin-bottom:18px}
#pool-direction .action-dose input{font-size:24px;min-height:52px}
#pool-direction .action-dose select{min-height:52px}
#pool-direction .action-extra{border-top:1px solid var(--pool-line);padding-top:4px}
#pool-direction .action-extra>summary{padding:12px 0;color:var(--pool-muted);font-size:13px;cursor:pointer}
#pool-direction .action-extra>.pool-form{padding:12px 0}
#pool-direction .action-other{display:block;background:transparent;border:0;color:var(--pool-muted);font:inherit;font-size:12px;padding:12px 0;min-height:44px;cursor:pointer;text-align:left}
#pool-direction .action-simple .pool-primary:disabled{opacity:.45;cursor:default}
@media(max-width:600px){#pool-direction .action-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px}#pool-direction .action-products button{min-height:60px;font-size:15px}#pool-direction .action-products button:last-child{grid-column:1/-1}#pool-direction .action-heading{gap:12px;margin-bottom:16px}#pool-direction .action-heading h2{font-size:20px}#pool-direction .action-heading select{min-width:110px}#pool-direction .action-simple .action-dose{grid-template-columns:minmax(0,1fr) 90px}}
#pool-direction #entry-review h2 { font-size:19px; font-weight:500; }
#pool-direction .detail-list { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); margin:20px 0; font-size:13px; }
#pool-direction .detail-list dt, #pool-direction .detail-list dd { padding:9px 0; border-bottom:1px solid var(--pool-line); overflow-wrap:anywhere; white-space:pre-wrap; }
#pool-direction .detail-list dt { color:var(--pool-muted); padding-right:16px; }
#pool-direction .detail-list dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
#pool-direction .photo-field { padding-top:12px; }
#pool-direction .photo-upload { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:16px; border:1px dashed var(--pool-line); border-radius:9px; }
#pool-direction .photo-upload input { border:0; padding:5px 0; font-size:12px; }
#pool-direction .photo-field .field-help { margin:8px 0; }
#pool-direction .photo-list { display:flex; gap:12px; flex-wrap:wrap; margin:14px 0; }
#pool-direction .photo-item { display:flex; flex-direction:column; width:150px; gap:6px; font-size:11px; overflow-wrap:anywhere; }
#pool-direction .photo-item img, #pool-direction .review-photo { width:150px; height:130px; object-fit:contain; border:1px solid var(--pool-line); background:var(--pool-bg); border-radius:8px; }
#pool-direction .journal-controls { grid-template-columns:repeat(4,minmax(0,1fr)); }
#pool-direction .check-label { display:flex; gap:8px; align-items:center; font-size:12px; color:var(--pool-muted); min-height:44px; margin:8px 0; }
#pool-direction .check-label input { width:18px; height:18px; accent-color:var(--pool-accent); }
#pool-direction .chart-panel { background:var(--pool-panel); border:1px solid var(--pool-line); border-radius:12px; padding:18px 20px; margin-top:16px; }
#pool-direction .chart-panel .pool-section-head { margin:0 0 12px; }
#pool-direction .chart-selector { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--pool-muted); }
#pool-direction .chart-selector select { max-width:210px; border:1px solid var(--pool-line); border-radius:6px; padding:8px; min-height:44px; background:var(--pool-panel); color:var(--pool-text); font-size:16px; }
#pool-direction .chart { width:100%; height:auto; display:block; overflow:visible; }
#pool-direction .chart .chart-grid { stroke:var(--pool-line); stroke-width:1; }
#pool-direction .chart text { fill:var(--pool-muted); font-size:12px; }
#pool-direction .chart circle { fill:var(--pool-accent); stroke:var(--pool-panel); stroke-width:1.5; }
#pool-direction .chart-panel summary, #pool-direction #revision-details>summary { cursor:pointer; padding:12px 0; font-size:12px; color:var(--pool-muted); min-height:44px; }
#pool-direction .table-wrap { overflow-x:auto; }
#pool-direction table { border-collapse:collapse; width:100%; font-size:12px; }
#pool-direction th { color:var(--pool-muted); text-align:left; font-weight:500; }
#pool-direction td, #pool-direction th { padding:10px 8px; border-bottom:1px solid var(--pool-line); }
#pool-direction .settings-extra { margin-top:20px; }
#pool-direction .button-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
#pool-direction dialog { border:1px solid var(--pool-line); border-radius:14px; padding:26px; max-width:650px; width:calc(100% - 32px); max-height:85dvh; overflow-y:auto; color:var(--pool-text); background:var(--pool-panel); box-shadow:0 20px 100px #0007; }
#pool-direction dialog::backdrop { background:#000a; backdrop-filter:blur(4px); }
#pool-direction .dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#pool-direction dialog h2 { font-size:19px; font-weight:500; }
#pool-direction .revision { padding:14px 0; border-top:1px solid var(--pool-line); font-size:12px; }
#pool-direction .revision p { color:var(--pool-muted); margin:6px 0; }
#pool-direction .revision summary { padding:8px 0; cursor:pointer; }
#pool-direction .revision .text-link { display:block; margin:8px 0; }
#pool-direction .form-error { color:var(--pool-outside); font-size:12px; margin-top:12px; }
#pool-direction .calculator-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
#pool-direction .calculator-tabs button { min-height:48px; padding:12px; border:1px solid var(--pool-line); border-radius:9px; background:var(--pool-panel); color:var(--pool-muted); font:inherit; font-size:13px; cursor:pointer; }
#pool-direction .calculator-tabs button[aria-pressed=true] { border-color:var(--pool-accent); background:var(--pool-soft); color:var(--pool-text); }
#pool-direction .calc-panel { max-width:900px; }
#pool-direction .calc-panel .pool-form { min-width:0; }
#pool-direction .calc-panel input, #pool-direction .calc-panel select { min-width:0; width:100%; }
#pool-direction .calc-confirm { margin:22px 0 12px; line-height:1.6; align-items:flex-start; }
#pool-direction .calc-confirm input { flex:0 0 18px; margin-top:3px; }
#pool-direction .calc-result { border-color:var(--pool-accent); max-width:900px; }
#pool-direction .pool-option .calc-dose { font-size:42px; font-weight:500; margin:12px 0; overflow-wrap:anywhere; }
#pool-direction .calc-dose span { font-size:23px; color:var(--pool-muted); }
#pool-direction .calc-status { color:var(--pool-accent); font-size:13px; margin-top:20px; }
#pool-direction .calc-dictionary { max-width:900px; }
#pool-direction .calc-target-note { color:var(--pool-muted); font-size:13px; line-height:1.5; margin:12px 0; }
#pool-direction .calc-target-note p { margin:4px 0; }
#pool-direction .calc-target-warning { color:var(--pool-text); padding:10px 12px; border-left:3px solid #c99640; background:var(--pool-soft); }
#pool-direction .calc-dictionary summary { cursor:pointer; min-height:44px; padding:12px 0; font-size:13px; }
#pool-direction .calc-product { border-top:1px solid var(--pool-line); padding:16px 0; font-size:13px; }
#pool-direction .calc-product p { color:var(--pool-muted); }
@media (max-width:640px) {
  #pool-direction .calculator-tabs { grid-template-columns:1fr 1fr; }
  #pool-direction .calc-panel, #pool-direction .calc-result, #pool-direction .calc-dictionary { padding:18px 14px; }
  #pool-direction .calc-panel .pool-form { grid-template-columns:1fr; }
}
@media (min-width:641px) and (max-width:1050px) {
  #pool-direction .pool-shell { grid-template-columns:155px minmax(0,1fr); }
  #pool-direction #pool-overview>.pool-pair, #pool-direction #pool-content>section>.pool-pair { grid-template-columns:1fr; }
  #pool-direction .journal-controls { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  #pool-direction .pool-shell { display:block; }
  #pool-direction .pool-sidebar { position:static; height:auto; }
  #pool-direction .pool-main { padding:20px 16px 32px; }
  #pool-direction .pool-basin { padding:18px; }
  #pool-direction .pool-reading-ring .pool-number { font-size:27px; }
  #pool-direction .mode-bar { align-items:flex-start; font-size:11px; gap:10px; }
  #pool-direction .mode-bar button { font-size:11px; padding:8px; }
  #pool-direction .journal-controls { grid-template-columns:1fr 1fr; }
  #pool-direction .chart-panel { padding:15px 12px; }
  #pool-direction .chart-panel .pool-section-head { align-items:flex-start; flex-direction:column; }
  #pool-direction .chart text { font-size:12px; }
  #pool-direction #entry-screen .pool-option { padding:18px 14px; }
  #pool-direction .pool-form-actions { flex-wrap:wrap; }
  #pool-direction dialog { padding:20px 16px; }
  #pool-direction .detail-list { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); font-size:12px; }
  #pool-direction .pool-footer { align-items:flex-start; }
}
@media (max-width:380px) {
  #pool-direction .pool-basin { padding:14px 10px; }
  #pool-direction .pool-reading-ring .pool-number { font-size:24px; }
  #pool-direction .pool-form { grid-template-columns:1fr; }
  #pool-direction .journal-controls { grid-template-columns:1fr 1fr; }
  #pool-direction .pool-log-row { grid-template-columns:25px minmax(0,1fr); }
  #pool-direction .pool-log-date { grid-column:2; text-align:left; max-width:none; }
}

/* Approved water overview: one pool at a time, CILLIT profile, last known results. */
#pool-direction .pool-shell { display:block; }
#pool-direction .pool-sidebar { position:static; height:auto; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:20px; padding:14px 32px; border:0; border-bottom:1px solid var(--pool-line); }
#pool-direction .pool-brand { padding:0; white-space:nowrap; }
#pool-direction .pool-nav { flex-direction:row; gap:6px; }
#pool-direction .pool-sidebar-bottom { display:none; }
#pool-direction .pool-main { max-width:1180px; margin:auto; padding:24px 32px 36px; }
#pool-direction .pool-context { margin-bottom:22px; }
#pool-direction .pool-heading { margin-bottom:22px; }
#pool-direction .water-picker { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 20px; }
#pool-direction .water-picker button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:66px; padding:13px 20px; border:1px solid var(--pool-line); border-radius:12px; color:var(--pool-text); background:var(--pool-panel); text-align:left; }
#pool-direction .water-picker button[aria-pressed=true] { background:var(--pool-soft); border-color:var(--pool-accent); }
#pool-direction .water-picker button>span { display:flex; align-items:center; gap:9px; font-weight:600; }
#pool-direction .water-picker small { font-size:12px; color:var(--pool-muted); }
#pool-direction .water-basin { min-width:0; }
#pool-direction .water-hero { --status-color:var(--pool-muted); padding:25px 28px 12px; background:var(--pool-panel); border:1px solid var(--pool-line); border-radius:16px; position:relative; overflow:hidden; border-top:3px solid var(--status-color); }
#pool-direction .level-0,#pool-direction .level-1 { --status-color:var(--pool-outside); }
#pool-direction .level-2 { --status-color:light-dark(#9c6400,#e5b454); }
#pool-direction .level-3,#pool-direction .level-4 { --status-color:var(--pool-range); }
#pool-direction .water-hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--pool-muted); font-size:12px; }
#pool-direction .water-eyebrow { text-transform:uppercase; letter-spacing:1.6px; font-size:11px; font-weight:600; }
#pool-direction .water-hero-main { display:flex; gap:22px; justify-content:space-between; align-items:center; margin:14px 0 26px; }
#pool-direction .water-hero-main h2 { font-size:54px; font-weight:600; letter-spacing:-2px; line-height:1.15; color:var(--status-color); }
#pool-direction .water-hero-main p { color:var(--pool-muted); font-size:14px; margin-top:12px; }
#pool-direction .water-mark { flex:0 0 70px; height:70px; border-radius:50%; color:var(--status-color); background:color-mix(in srgb,var(--status-color) 9%,var(--pool-panel)); border:1px solid color-mix(in srgb,var(--status-color) 40%,var(--pool-line)); display:grid; place-items:center; font-size:40px; }
#pool-direction .water-score { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:0; margin:0; list-style:none; font-size:11px; color:var(--pool-muted); }
#pool-direction .water-score li { min-width:0; }
#pool-direction .water-score i { display:block; height:5px; border-radius:5px; background:var(--pool-line); margin-bottom:8px; }
#pool-direction .water-score li.active { color:var(--status-color); font-weight:600; }
#pool-direction .water-score li.active i { background:var(--status-color); }
#pool-direction .water-basis { border-top:1px solid var(--pool-line); margin-top:19px; }
#pool-direction .water-basis summary,#pool-direction .water-profile>summary { cursor:pointer; padding:14px 0; min-height:44px; color:var(--pool-muted); font-size:12px; }
#pool-direction .water-basis p { padding:12px 0; }
#pool-direction .water-auto { padding:0 24px 24px; margin:24px 0; border:1px solid var(--pool-line); border-radius:14px; background:var(--pool-panel); }
#pool-direction .water-auto .pool-section-head { margin:22px 0 12px; }
#pool-direction .water-auto .pool-reading-condition { background:none; border:0; margin:0 0 12px; padding:0; }
#pool-direction .water-auto-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(220px,1fr); gap:28px; }
#pool-direction .water-auto .pool-measures { gap:20px; margin-top:8px; }
#pool-direction .water-auto .pool-reading-ring { width:100%; max-width:142px; }
#pool-direction .water-auto .pool-number { font-size:32px; }
#pool-direction .water-device { border-left:1px solid var(--pool-line); padding-left:24px; min-width:0; }
#pool-direction .water-device .pool-equipment { padding:12px; }
#pool-direction .water-device button { margin-top:14px; }
#pool-direction .water-device .pool-targets summary { min-height:44px; display:list-item; padding:12px 0; }
#pool-direction .water-live-label { color:var(--pool-muted); font-size:11px; }
#pool-direction .manual-summary { border:0; padding:0; margin:24px 0; }
#pool-direction .manual-summary .pool-section-head { margin:0 0 16px; }
#pool-direction .manual-summary>div { border:0; }
#pool-direction .water-manual-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#pool-direction .water-card { display:flex; flex-direction:column; align-items:flex-start; padding:20px; min-width:0; background:var(--pool-panel); border:1px solid var(--pool-line); border-radius:12px; }
#pool-direction .water-card h3 { color:var(--pool-muted); font-size:12px; font-weight:500; }
#pool-direction .water-value { font-size:34px; letter-spacing:-.9px; font-weight:500; margin:12px 0 4px; line-height:1.1; font-variant-numeric:tabular-nums; }
#pool-direction .water-value>span { font-size:12px; color:var(--pool-muted); letter-spacing:0; white-space:nowrap; }
#pool-direction .water-status { font-size:11px; color:var(--pool-muted); }
#pool-direction .water-card.good .water-status { color:var(--pool-range); }
#pool-direction .water-card.outside .water-status { color:var(--pool-outside); }
#pool-direction .water-linear { width:100%; position:relative; margin:20px 0 9px; height:4px; border-radius:5px; background:linear-gradient(to right,color-mix(in srgb,var(--pool-outside) 30%,var(--pool-panel)) var(--band-start),var(--pool-range) var(--band-start),var(--pool-range) var(--band-end),color-mix(in srgb,var(--pool-outside) 30%,var(--pool-panel)) var(--band-end)); }
#pool-direction .water-linear i { position:absolute; left:var(--position); transform:translate(-50%,-3px); width:3px; height:10px; background:var(--pool-text); border-radius:3px; }
#pool-direction .water-bound { color:var(--pool-muted); font-size:11px; padding:6px 0 14px; }
#pool-direction .water-card time { font-size:11px; color:var(--pool-muted); margin-top:auto; }
#pool-direction .water-source { background:none; border:0; color:var(--pool-accent); min-height:44px; padding:10px 0 0; font-size:11px; text-align:left; }
#pool-direction .water-additional { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); margin-top:14px; border:1px solid var(--pool-line)!important; border-radius:12px; background:var(--pool-panel); padding:18px 20px; gap:14px; }
#pool-direction .water-additional>div { padding:0; border:0; display:flex; flex-direction:column; min-width:0; font-size:11px; color:var(--pool-muted); }
#pool-direction .water-additional strong { font-size:20px; color:var(--pool-text); font-weight:500; margin:7px 0; }
#pool-direction .water-additional strong small { font-size:10px; font-weight:400; color:var(--pool-muted); }
#pool-direction .water-additional time { font-size:10px; }
#pool-direction .water-uncertain { display:block; color:var(--pool-muted); font-size:10px; margin-top:6px; }
#pool-direction .water-profile { margin:20px 0; padding:0 20px; border:1px solid var(--pool-line); background:var(--pool-panel); border-radius:12px; }
#pool-direction .water-profile table small { display:block; max-width:550px; padding-top:6px; color:var(--pool-muted); font-size:11px; }
#pool-direction .water-profile p { padding:8px 0; }
#pool-direction .water-profile .text-link { display:inline-flex; min-height:44px; padding:10px 0; }
#pool-direction .water-source-note p { overflow-wrap:anywhere; font-size:11px; }
#pool-direction .water-source-note summary { cursor:pointer; min-height:44px; padding:12px 0; font-size:11px; }
#pool-direction #pool-overview>.mode-bar { margin-top:28px; }
@media(max-width:950px) {
  #pool-direction .pool-sidebar { padding:14px 20px; }
  #pool-direction .pool-main { padding:20px; }
  #pool-direction .water-auto-layout { grid-template-columns:1fr; gap:20px; }
  #pool-direction .water-device { border-left:0; border-top:1px solid var(--pool-line); padding:20px 0 0; }
  #pool-direction .water-additional { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:640px) {
  #pool-direction .pool-sidebar { display:block; padding:16px 12px 10px; }
  #pool-direction .pool-brand { padding:0 5px 14px; font-size:18px; }
  #pool-direction .pool-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; }
  #pool-direction .pool-nav button { flex-direction:column; justify-content:center; gap:5px; padding:8px 2px; font-size:10px; }
  #pool-direction .pool-main { padding:18px 14px 26px; }
  #pool-direction .pool-heading { gap:8px; }
  #pool-direction h1 { font-size:26px; }
  #pool-direction .pool-subtitle { font-size:11px; }
  #pool-direction .pool-heading .pool-primary { font-size:11px; padding:10px; }
  #pool-direction .water-picker { gap:8px; }
  #pool-direction .water-picker button { flex-direction:column; align-items:flex-start; gap:4px; padding:12px; font-size:12px; }
  #pool-direction .water-picker button small { font-size:10px; }
  #pool-direction .water-hero { padding:20px 18px 8px; }
  #pool-direction .water-hero-main { margin:18px 0 23px; gap:10px; }
  #pool-direction .water-hero-main h2 { font-size:39px; letter-spacing:-1.5px; }
  #pool-direction .water-hero-main p { font-size:12px; }
  #pool-direction .water-mark { flex-basis:48px; height:48px; font-size:29px; }
  #pool-direction .water-score { font-size:8.5px; gap:6px; grid-template-columns:.65fr .9fr 1.25fr .8fr 1.1fr; }
  #pool-direction .water-coverage { font-size:10px; }
  #pool-direction .water-auto { padding:0 12px 18px; }
  #pool-direction .water-auto .pool-measures { gap:10px; }
  #pool-direction .water-auto .pool-number { font-size:26px; }
  #pool-direction .water-live-label { display:none; }
  #pool-direction .water-manual-grid { grid-template-columns:1fr 1fr; gap:8px; }
  #pool-direction .water-card { padding:15px 12px; }
  #pool-direction .water-value { font-size:29px; }
  #pool-direction .water-value>span { display:block; margin-top:5px; font-size:10px; }
  #pool-direction .water-card h3 { font-size:11px; }
  #pool-direction .water-card time { font-size:10px; }
  #pool-direction .water-additional { grid-template-columns:1fr 1fr; padding:16px; }
  #pool-direction .water-profile { padding:0 14px; }
  #pool-direction .manual-summary .pool-section-head { align-items:flex-start; gap:10px; }
  #pool-direction .manual-summary .pool-section-head h2 { font-size:17px; }
  #pool-direction .manual-summary .pool-section-head button { font-size:11px; padding:9px; }
  #pool-direction .manual-summary .section-note { font-size:11px; }
}
@media(max-width:360px) {
  #pool-direction .water-hero-main h2 { font-size:33px; }
  #pool-direction .water-mark { display:none; }
  #pool-direction .water-auto .pool-number { font-size:24px; }
}
#pool-direction .wqi-number { font-size:84px; font-weight:600; letter-spacing:-4px; line-height:1; color:var(--status-color); flex:none; }
#pool-direction .wqi-number small { font-size:16px; color:var(--pool-muted); letter-spacing:0; display:block; margin-top:8px; }
#pool-direction .wqi-heading { flex:1; min-width:0; }
#pool-direction .wqi-heading h2 { font-size:32px; letter-spacing:-1px; }
#pool-direction .wqi-subindices { display:flex; flex-wrap:wrap; gap:10px 24px; font-size:12px; color:var(--pool-muted); margin:0 0 18px; }
#pool-direction .wqi-subindices b { color:var(--pool-text); margin-left:5px; font-size:17px; font-weight:500; }
#pool-direction .wqi-last,#pool-direction .wqi-trend { color:var(--pool-muted); font-size:12px; margin-bottom:14px; }
#pool-direction .wqi-warnings { padding-left:18px; font-size:12px; line-height:1.6; margin:10px 0 16px; color:var(--pool-text); }
#pool-direction .wqi-csi-help { margin:14px 0; font-size:12px; line-height:1.6; color:var(--pool-muted); }
#pool-direction .wqi-csi-help h3 { color:var(--pool-text); font-size:14px; }
#pool-direction .wqi-csi-help p { margin:10px 0; }
#pool-direction .wqi-csi-help ul { padding-left:18px; }
#pool-direction .wqi-components td { vertical-align:top; }
#pool-direction .wqi-components small { display:block; color:var(--pool-muted); }
#pool-direction .water-manual-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
#pool-direction .water-manual-grid .water-card { padding:14px; }
#pool-direction .water-manual-grid .water-value { font-size:28px; margin:10px 0 6px; }
#pool-direction .water-manual-grid .water-value span { font-size:11px; }
#pool-direction .water-manual-grid .water-linear { margin:8px 0; }
#pool-direction .water-manual-grid .water-bound { margin:4px 0 10px; }
#pool-direction .water-auxiliary { display:flex; flex-wrap:wrap; gap:0 24px; margin-top:12px; color:var(--pool-muted); font-size:12px; }
#pool-direction .water-auxiliary>div { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#pool-direction .water-auxiliary strong { color:var(--pool-text); font-weight:500; }
#pool-direction .water-auxiliary time { font-size:10px; }
#pool-direction .water-auxiliary .water-source { margin:0; }
#pool-direction .wqi-settings h3 { margin:24px 0 10px; }
#pool-direction .wqi-form { display:grid; gap:12px; margin-top:14px; }
#pool-direction .wqi-form label { display:grid; gap:8px; font-size:13px; color:var(--pool-muted); min-width:0; }
#pool-direction .wqi-form select { width:100%; min-width:0; }
#pool-direction .wqi-form button { justify-self:start; }
#pool-direction .wqi-form .check-label { display:flex; align-items:center; }
#pool-direction .wqi-samples small { display:block; font-size:11px; }
#pool-direction .wqi-samples { display:grid; gap:10px; }
#pool-direction .wqi-checks { display:flex; flex-wrap:wrap; gap:8px 20px; }
#pool-direction .wqi-history-item { border-bottom:1px solid var(--pool-line); padding:16px 0; }
#pool-direction .action-wqi { padding:14px; border:1px solid var(--pool-line); border-radius:10px; }
#pool-direction .action-wqi .field-help { margin:12px 0; }
@media(max-width:650px) {
  #pool-direction .water-hero-main { gap:18px; }
  #pool-direction .wqi-number { font-size:62px; letter-spacing:-3px; }
  #pool-direction .wqi-heading h2 { font-size:24px; letter-spacing:-.6px; }
  #pool-direction .water-manual-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  #pool-direction .water-manual-grid .water-card { padding:10px 7px; }
  #pool-direction .water-manual-grid .water-value { font-size:23px; }
  #pool-direction .water-manual-grid .water-value span { display:block; font-size:9px; min-height:12px; }
  #pool-direction .water-manual-grid .water-status { font-size:10px; min-height:28px; }
  #pool-direction .water-manual-grid .water-bound { font-size:9px; min-height:25px; }
  #pool-direction .water-manual-grid time { font-size:9px; overflow-wrap:anywhere; }
  #pool-direction .water-manual-grid .water-source { font-size:10px; white-space:normal; text-align:left; }
  #pool-direction .water-auxiliary { font-size:11px; }
}
@media(max-width:360px) {
  #pool-direction .water-manual-grid .water-value { font-size:19px; }
  #pool-direction .water-manual-grid .water-card { padding:9px 5px; }
  #pool-direction .wqi-heading h2 { font-size:20px; }
  #pool-direction .wqi-number { font-size:50px; }
}

/* The score drives the title, color and scale; checks are a separate disclosure. */
#pool-direction .water-hero .wqi-number { color:var(--status-color); }
#pool-direction .wqi-summary-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,290px); align-items:start; gap:24px; margin-top:12px; }
#pool-direction .wqi-summary-primary { min-width:0; }
#pool-direction .wqi-summary-primary:only-child { grid-column:1/-1; }
#pool-direction .wqi-summary-primary .water-hero-main { justify-content:flex-start; }
#pool-direction .wqi-operational { color:var(--pool-text); font-size:14px; line-height:1.5; margin:0 0 16px; }
#pool-direction .wqi-attention { --check-color:light-dark(#9c6400,#e5b454); min-width:0; border:1px solid color-mix(in srgb,var(--check-color) 35%,var(--pool-line)); border-radius:10px; background:color-mix(in srgb,var(--check-color) 5%,var(--pool-panel)); font-size:12px; line-height:1.5; }
#pool-direction .wqi-attention>summary { padding:12px 15px; cursor:pointer; min-height:44px; color:var(--check-color); }
#pool-direction .wqi-attention>summary span { display:block; font-size:11px; color:var(--pool-muted); margin-top:3px; }
#pool-direction .wqi-attention-content { padding:0 15px 15px; }
#pool-direction .wqi-attention-content section+section { border-top:1px solid var(--pool-line); padding-top:16px; margin-top:16px; }
#pool-direction .wqi-attention h3 { font-size:14px; margin:0 0 8px; font-weight:600; color:var(--pool-text); }
#pool-direction .wqi-attention p { margin:8px 0; color:var(--pool-muted); }
#pool-direction .wqi-attention .wqi-next-step { color:var(--pool-text); }
#pool-direction .wqi-check-readings { margin:12px 0 0; }
#pool-direction .wqi-check-readings>div { border-top:1px solid var(--pool-line); padding:9px 0; }
#pool-direction .wqi-check-readings dt { font-weight:500; }
#pool-direction .wqi-check-readings dd { margin:3px 0 0; }
#pool-direction .wqi-check-readings time,#pool-direction .wqi-check-readings dd>span { display:block; font-size:11px; color:var(--pool-muted); }
#pool-direction .wqi-check-readings dd>span.needs-update { color:var(--check-color); }
#pool-direction .water-score .active i { height:7px; margin-bottom:6px; }
#pool-direction .wqi-csi-help { border-bottom:1px solid var(--pool-line); padding-bottom:12px; }
@media(max-width:850px) {
  #pool-direction .wqi-summary-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
  #pool-direction .wqi-attention>summary span { display:inline; margin-left:8px; }
}
@media(max-width:360px) {
  #pool-direction .water-score { font-size:9px; gap:5px; }
  #pool-direction .wqi-attention>summary span { display:block; margin-left:0; }
}

/* Measurement reminders remain separate from the water quality score. */
#pool-direction .alarm-count { font-size:10px; min-width:18px; padding:2px 5px; border-radius:9px; color:var(--pool-text); background:var(--pool-soft); }
#pool-direction .alarm-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
#pool-direction .alarm-filters [aria-pressed=true] { border-color:var(--pool-accent); color:var(--pool-accent); }
#pool-direction .alarm-list { display:grid; gap:14px; margin:18px 0; }
#pool-direction .alarm-card { padding:20px; border:1px solid var(--pool-line); border-left:3px solid light-dark(#9c6400,#e5b454); border-radius:12px; background:var(--pool-panel); }
#pool-direction .alarm-card-heading { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:12px; }
#pool-direction .alarm-card h2 { font-size:18px; }
#pool-direction .alarm-card p { font-size:13px; line-height:1.6; margin:8px 0; }
#pool-direction .alarm-state { margin-left:auto; color:light-dark(#9c6400,#e5b454); font-size:12px; }
#pool-direction .alarm-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; align-items:end; }
#pool-direction .alarm-actions label,#pool-direction #push-preferences>label { display:grid; gap:6px; font-size:12px; color:var(--pool-muted); }
#pool-direction .alarm-actions select,#pool-direction #push-preferences input[type=time] { min-height:44px; border:1px solid var(--pool-line); border-radius:7px; padding:8px; color:var(--pool-text); background:var(--pool-panel); }
#pool-direction .notification-settings .button-row { margin-top:18px; }
#pool-direction .notification-settings p { line-height:1.6; }
#pool-direction .push-status { font-size:14px; margin:14px 0; }
#pool-direction #push-preferences { display:grid; gap:14px; max-width:400px; margin:16px 0; }
#pool-direction #push-preferences .check-label { display:flex; align-items:center; gap:8px; min-height:44px; }
#pool-direction .push-pools { display:flex; gap:24px; }
@media(max-width:650px) {
  #pool-direction .pool-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #pool-direction .pool-nav button { position:relative; }
  #pool-direction .alarm-count { position:absolute; right:0; top:2px; }
  #pool-direction .alarm-card { padding:16px; }
  #pool-direction .alarm-state { margin-left:0; }
  #pool-direction .alarm-card h2 { font-size:16px; }
}

/* Accounts and service: compact on desktop, readable at phone widths. */
.account-panel,.users-panel{margin-bottom:24px}.profile-days,.push-pools{border:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}.profile-days legend,.push-pools legend{margin-bottom:10px}.profile-days label{display:flex;gap:6px}.user-card{border-top:1px solid var(--pool-line);padding:16px 0}.user-card summary{cursor:pointer;overflow-wrap:anywhere}.user-card form{margin-top:18px}.account-panel details{margin-top:20px}.service-list h2{margin-top:0}.service-card h3{margin:0}.temporary-password{font-family:monospace;overflow-wrap:anywhere;user-select:all}.account-panel button,.users-panel button{margin-top:12px}[data-view="password"] .pool-nav{display:none}[translate="no"]{overflow-wrap:anywhere}

/* Keep navigation on one row on narrow phones, with either five or six sections. */
#pool-direction .pool-footer-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
#pool-direction .pool-footer-actions button { display:flex; align-items:center; gap:6px; font-size:12px; min-height:44px; }
#pool-direction .pool-footer-actions #pool-logout { margin-left:0; }
#pool-direction .pool-footer-actions [aria-pressed="true"] { color:var(--pool-accent); background:var(--pool-soft); }
#pool-direction[data-view="password"] .pool-footer [data-view="settings"] { display:none; }
@media(max-width:650px) {
  #pool-direction .pool-sidebar .pool-nav { display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(0,1fr); gap:3px; }
  #pool-direction .pool-sidebar .pool-nav button { min-width:0; flex-direction:column; justify-content:flex-start; padding:8px 2px; gap:5px; overflow-wrap:anywhere; }
}

/* Wall dashboard: one water panel and an independently mounted control panel. */
#pool-direction .dash-pools{display:flex;gap:4px;padding:4px;background:var(--pool-soft);border:1px solid var(--pool-line);border-radius:12px}
#pool-direction .dash-pools button{min-height:44px;padding:8px 24px;border:0;border-radius:8px;background:transparent;color:var(--pool-muted);font:inherit;font-weight:600}
#pool-direction .dash-pools [aria-pressed=true]{background:var(--pool-panel);color:var(--pool-accent)}
#pool-direction #pool-menu{display:none;min-height:44px;background:var(--pool-panel);color:var(--pool-text);border:1px solid var(--pool-line);border-radius:10px;padding:8px 14px;font:inherit;align-items:center;gap:8px}
#pool-direction:not([data-view=overview]) .dash-pools{display:none}
#pool-direction[data-view=overview] .pool-sidebar{position:relative;padding:12px 24px;display:flex;gap:18px}
#pool-direction[data-view=overview] #pool-menu{display:flex}
#pool-direction[data-view=overview] .pool-nav{display:none;position:absolute;right:24px;top:68px;z-index:10;background:var(--pool-panel);padding:10px;border:1px solid var(--pool-line);border-radius:12px;box-shadow:0 12px 32px #0004}
#pool-direction[data-view=overview] .pool-nav.is-open{display:grid;grid-template-columns:1fr;grid-auto-flow:row;min-width:200px}
#pool-direction[data-view=overview] .pool-nav button{flex-direction:row;justify-content:flex-start;padding:12px}
#pool-direction[data-view=overview] .pool-context{display:none}
#pool-direction[data-view=overview] .pool-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#pool-direction[data-view=overview] .pool-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:var(--dashboard-width);width:100%;padding:18px 24px 14px;align-items:stretch}
#pool-direction[data-view=overview] #pool-content{display:contents}
#pool-direction[data-view=overview] #pool-overview{display:flex;flex-direction:column;gap:12px;min-width:0;align-self:start}
#pool-direction[data-view=overview] #pool-error{grid-column:1/-1}
#pool-direction[data-view=overview] .pool-footer{grid-column:1/-1;margin-top:0}
#pool-direction[data-view=overview][data-pool=lower] #pool-overview,#pool-direction[data-view=overview][data-has-control=false] #pool-overview{grid-column:1/-1;max-width:950px;width:100%;justify-self:center}
#pool-direction .dash-water{background:var(--pool-panel);border:1px solid var(--pool-line);border-radius:16px;padding:18px;min-width:0;display:flex;flex-direction:column}
#pool-direction :is(.dash-water,.dash-filtration) button{font:inherit;color:inherit;cursor:pointer;text-align:left;background:transparent;border:0;min-width:0}
#pool-direction .dash-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px}
#pool-direction .dash-panel-head h2{font-size:18px;margin:0}
#pool-direction .dash-panel-actions{display:flex;align-items:center;gap:12px}
#pool-direction .dash-panel-head button{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--pool-accent);min-height:44px}
#pool-direction .dash-assessment{display:flex;align-items:center;gap:16px;width:100%;padding:15px 0 20px}
#pool-direction .dash-score{width:86px;height:86px;flex:none;border:5px solid var(--pool-range);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:32px;line-height:1.1}
#pool-direction .dash-score small{font-size:11px;color:var(--pool-muted);margin-top:4px}
#pool-direction .dash-assessment.level-none .dash-score{border-color:var(--pool-line)}
#pool-direction .dash-assessment:is(.level-0,.level-1) .dash-score,#pool-direction .dash-assessment.summary-problem .dash-score{border-color:var(--pool-outside)}
#pool-direction .dash-assessment:is(.level-2,.level-3) .dash-score{border-color:var(--pool-accent)}
#pool-direction .dash-assessment-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
#pool-direction .dash-assessment-copy strong{font-size:21px;line-height:1.2;font-weight:500}
#pool-direction .dash-assessment-copy>span,#pool-direction .dash-assessment-copy small{font-size:11px;color:var(--pool-muted);line-height:1.4}
#pool-direction .dash-assessment-copy .dash-attention{color:var(--pool-outside);display:flex;align-items:center;gap:4px}
#pool-direction .dash-readings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#pool-direction .dash-reading{border:1px solid var(--pool-line)!important;border-radius:10px;padding:11px 9px;display:flex;flex-direction:column;gap:4px}
#pool-direction .dash-reading>span:first-child{font-size:12px;color:var(--pool-muted)}
#pool-direction .dash-reading strong{font-size:28px;font-weight:500;white-space:nowrap;letter-spacing:-1px}
#pool-direction .dash-water em{font-size:11px;font-style:normal;font-weight:400;letter-spacing:0;color:var(--pool-muted);margin-left:2px}
#pool-direction .dash-reading small,#pool-direction .dash-water time{font-size:10px;color:var(--pool-muted);line-height:1.4}
#pool-direction .dash-scale{position:relative;display:block;width:100%;height:4px;background:var(--pool-line);border-radius:4px;margin:7px 0 6px;flex:none}
#pool-direction .dash-band{position:absolute;left:var(--start);width:var(--width);height:100%;background:color-mix(in srgb,var(--pool-range) 40%,var(--pool-panel));border-radius:4px}
#pool-direction .dash-marker{position:absolute;left:clamp(2%,var(--reading),98%);top:-2px;width:3px;height:8px;background:var(--pool-range);border-radius:2px;transform:translateX(-50%)}
#pool-direction .dash-range{display:block;width:100%;container-type:inline-size;margin:2px 0;color:var(--pool-muted);font-variant-numeric:tabular-nums}
#pool-direction .dash-reading .dash-range{margin-top:auto}
#pool-direction .dash-range-status,#pool-direction .dash-range-empty{display:block;font-size:10px;line-height:1.3;font-weight:400;letter-spacing:0}
#pool-direction .range-good .dash-range-status{color:var(--pool-range)}
#pool-direction .range-outside .dash-range-status{color:var(--pool-outside)}
#pool-direction .dash-range-plot{position:relative;display:block;height:24px;margin:8px 4px 0}
#pool-direction .dash-range-track{position:absolute;inset:0 0 auto;height:6px;border-radius:4px;background:linear-gradient(to right,color-mix(in srgb,var(--pool-outside) 24%,var(--pool-panel)) 0 25%,var(--pool-range) 25% 75%,color-mix(in srgb,var(--pool-outside) 24%,var(--pool-panel)) 75% 100%)}
#pool-direction .dash-range-marker{position:absolute;top:-3px;width:3px;height:12px;border-radius:2px;transform:translateX(-50%);background:var(--pool-text);box-shadow:0 0 0 1px var(--pool-panel)}
#pool-direction .range-outside .dash-range-marker{background:var(--pool-outside)}
#pool-direction .dash-range-overflow{position:absolute;top:-4px;line-height:14px;font-size:13px;color:var(--pool-outside)}
#pool-direction .range-left{left:-4px}#pool-direction .range-right{right:-4px}
#pool-direction .dash-range-tick{position:absolute;top:10px;font-size:10px;line-height:1.2;font-weight:400;letter-spacing:0;white-space:nowrap}
#pool-direction .range-low{left:25%;transform:translateX(-50%);color:var(--pool-range)}
#pool-direction .range-high{left:75%;transform:translateX(-50%);color:var(--pool-range)}
#pool-direction .range-min{left:0;display:none}#pool-direction .range-max{right:0;display:none}
#pool-direction .dash-temperature .dash-range-track{background:linear-gradient(90deg,#468de1,#5bb7bd,#d9b869,#d67b63)}
#pool-direction .dash-temperature .dash-range-overflow{color:var(--pool-text)}
#pool-direction .temperature-min{left:0}
#pool-direction .temperature-mid{left:50%;transform:translateX(-50%)}
#pool-direction .temperature-max{right:0}
@container(min-width:200px){#pool-direction .range-min,#pool-direction .range-max{display:block}}
@container(max-width:130px){#pool-direction .dash-range-status{min-height:2.6em}}
#pool-direction .dash-source{display:flex;align-items:flex-start;gap:5px;font-size:10px;color:var(--pool-muted);line-height:1.5;margin:12px 0}
#pool-direction .dash-source svg{width:13px;height:15px;flex:none}
#pool-direction .dash-equipment{display:flex;align-items:center;gap:12px;padding:12px 0;margin-top:auto;border-top:1px solid var(--pool-line);border-bottom:1px solid var(--pool-line)}
#pool-direction .dash-equipment>div{display:grid;gap:3px;font-size:13px}
#pool-direction .dash-equipment small{font-size:11px;color:var(--pool-muted)}
#pool-direction .dash-equipment>span{margin-left:auto;font-size:13px;white-space:nowrap}
#pool-direction .is-running{color:var(--pool-range)}
#pool-direction .dash-equipment time{max-width:100px;text-align:right}
#pool-direction .dash-manual{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:15px 0 0}
#pool-direction .dash-manual-item{padding:10px 9px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--pool-line)!important;border-radius:10px}
#pool-direction .dash-manual-item time{margin-top:auto}
#pool-direction .dash-manual-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:12px;color:var(--pool-muted)}
#pool-direction .dash-manual-heading small{font-size:10px;white-space:nowrap}
#pool-direction .dash-manual-item strong{font-size:22px;letter-spacing:-.5px;font-weight:500;white-space:nowrap}
#pool-direction .dash-water .outside strong,#pool-direction .dash-water .outside em,#pool-direction .dash-water .outside .dash-manual-heading>span{color:var(--pool-outside)}
#pool-direction .dash-water .outside .dash-marker{background:var(--pool-outside)}
#pool-direction .dash-water .dash-add{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:var(--pool-accent);font-size:12px;min-height:44px;margin-top:6px}
#pool-direction .dash-panel-actions .dash-add{margin:0;min-width:44px;justify-content:center}
@media(max-width:540px){#pool-direction .dash-panel-actions{gap:4px}#pool-direction .dash-add-label{display:none}}
#pool-direction .dash-dialog-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}
#pool-direction .dash-details>.water-card{margin-bottom:18px}
#pool-direction .dash-details .water-picker{display:none}
#pool-direction .dash-details .water-auto-layout{grid-template-columns:1fr}
#pool-direction .dash-details .water-basin{padding:0}
@media(max-width:850px){#pool-direction[data-view=overview] .pool-main{grid-template-columns:1fr;padding:14px}#pool-direction[data-view=overview] .pool-sidebar{padding:10px 14px;gap:10px}#pool-direction .dash-pools button{padding:8px 15px}}
@media(max-width:540px){#pool-direction[data-view=overview] .pool-sidebar{flex-wrap:wrap}#pool-direction[data-view=overview] .dash-pools{order:3;width:100%}#pool-direction .dash-pools button{flex:1}#pool-direction[data-view=overview] #pool-menu{margin-left:auto}#pool-direction .dash-water{padding:14px}#pool-direction .dash-reading strong{font-size:25px}#pool-direction .dash-reading{padding:9px 7px}#pool-direction .dash-manual-item{padding:0 8px}#pool-direction .dash-manual-heading{font-size:11px}#pool-direction .dash-assessment-copy strong{font-size:20px}}

#pool-direction[data-theme=dark][data-view=overview]{--pool-bg:#060d18;--pool-panel:#101a29;--pool-text:#f0f5fd;--pool-muted:#a2b2c8;--pool-line:#28374d;--pool-soft:#142236;--pool-accent:#55aeff;--pool-range:#54cba0;--pool-outside:#ff8181}
#pool-direction .dash-water time{overflow-wrap:anywhere}
#pool-direction .dash-water .dash-reading time{min-height:28px}
#pool-direction .dash-details #pool-overview{display:block}
#pool-direction[data-view=overview] #pool-dialog .dash-details #pool-overview{display:block}

#pool-direction .dash-water{line-height:1.35}
#pool-direction .dash-assessment{padding:10px 0 16px}
#pool-direction .dash-reading strong{line-height:1.15}
#pool-direction .dash-reading time{min-height:0!important}
#pool-direction .dash-reading{padding:10px 9px}
#pool-direction .dash-manual-item strong{line-height:1.2}
#pool-direction .dash-source{margin:10px 0}
#pool-direction .dash-equipment{padding:10px 0}
#pool-direction .dash-manual{padding-top:12px}
#pool-direction .dash-manual-item{padding-block:10px}
#pool-direction[data-view=overview] .pool-footer{font-size:10px}

@media(min-width:851px){#pool-direction[data-view=overview] .pool-main{padding-top:12px;padding-bottom:8px;gap:12px 16px}#pool-direction[data-view=overview] .pool-sidebar{padding-top:10px;padding-bottom:10px}#pool-direction .dash-assessment{padding-top:6px;padding-bottom:12px}}

#pool-direction:not([data-view=overview]) .dash-menu-theme{display:none}#pool-direction .dash-menu-theme{display:flex;border-top:1px solid var(--pool-line);margin-top:5px;padding-top:5px}

/* Keep the approved tablet proportions on wide desktop windows. */
#pool-direction[data-view=overview]{--dashboard-width:1133px;--dashboard-gutter:max(24px,calc((100% - var(--dashboard-width))/2 + 24px))}
#pool-direction[data-view=overview] .pool-shell{max-width:none}
@media(min-width:851px){
  #pool-direction[data-view=overview] .pool-sidebar{display:grid;grid-template-columns:1fr auto 1fr;padding-inline:var(--dashboard-gutter)}
  #pool-direction[data-view=overview] .pool-brand{justify-self:start}
  #pool-direction[data-view=overview] #pool-menu{justify-self:end}
  #pool-direction[data-view=overview] .pool-nav{right:var(--dashboard-gutter)}
}

/* CILLIT mode, saved times and explicit manual commands. */
#pool-direction .dash-filtration{background:var(--pool-panel);border:1px solid var(--pool-line);border-radius:16px;padding:16px 18px;min-width:0;line-height:1.35}
#pool-direction .dash-filtration .dash-equipment{border-bottom:0;padding-bottom:5px}
#pool-direction .dash-equipment strong small{margin-left:6px;color:var(--pool-accent);font-weight:500}
#pool-direction .filtration-hours{font-size:10px;color:var(--pool-muted);display:flex;gap:4px 8px;flex-wrap:wrap;margin-bottom:6px}
#pool-direction .filtration-actions{display:flex;gap:6px}
#pool-direction .dash-filtration .filtration-actions button{border:1px solid var(--pool-line);border-radius:8px;min-height:40px;flex:1;text-align:center;font-size:12px;background:var(--pool-soft)}
#pool-direction .dash-filtration .filtration-actions button[aria-pressed=true]{border-color:var(--pool-accent);color:var(--pool-accent)}
#pool-direction .dash-filtration .filtration-actions button:disabled{opacity:.45;cursor:default}
#pool-direction .filtration-hint{display:block;font-size:10px;color:var(--pool-muted);margin-top:4px}
#pool-direction .filtration-message{font-size:11px;color:var(--pool-muted);margin:5px 0 0;line-height:1.35}
#pool-direction .filtration-message.outside{color:var(--pool-outside)}
#pool-direction .cillit-warnings{display:flex;flex-wrap:wrap;gap:3px 8px;color:var(--pool-outside);font-size:11px;margin-top:6px}
#pool-direction .cillit-warnings strong{font-weight:600}
#pool-direction .dash-filtration{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
#pool-direction .dash-filtration .dash-equipment{grid-column:1;grid-row:1;border:0;padding:0 0 5px;gap:8px}
#pool-direction .dash-filtration .dash-equipment time{max-width:none;text-align:left;font-size:9px}
#pool-direction .filtration-actions{grid-column:2;grid-row:1;align-self:center}
#pool-direction .dash-filtration .filtration-actions button{min-width:55px;min-height:44px;padding:6px;font-size:11px}
#pool-direction .filtration-hours,#pool-direction .filtration-hint,#pool-direction .filtration-message,#pool-direction .cillit-warnings{grid-column:1/-1}
#pool-direction .filtration-hours{margin:4px 0 0}
@media(max-width:540px){#pool-direction .dash-filtration{column-gap:6px;padding:14px}#pool-direction .filtration-actions{gap:4px}#pool-direction .dash-filtration .filtration-actions button{min-width:44px;padding:5px;font-size:10px}}

/* Per-pool schedule editor; keep the main dashboard compact. */
#pool-direction .dash-filtration .filtration-edit{font-size:10px;color:var(--pool-accent);padding:0;text-decoration:underline;min-height:24px}
#pool-direction .filtration-hours{align-items:center}
#pool-dialog:has(.filtration-editor){width:min(760px,calc(100% - 24px));max-width:760px}
#pool-direction .filtration-editor .dialog-heading h2{font-size:20px}
#pool-direction .filtration-windows{display:grid;gap:8px}
#pool-direction .filtration-window{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center}
#pool-direction .filtration-window label,#pool-direction .filtration-thresholds label{display:grid;gap:3px;font-size:11px;color:var(--pool-muted)}
#pool-direction .filtration-window input[type=time],#pool-direction .filtration-thresholds input{width:100%;min-width:0;padding:8px;border:1px solid var(--pool-line);border-radius:8px;background:var(--pool-soft);color:var(--pool-text);font:inherit;font-size:16px;min-height:42px;box-sizing:border-box}
#pool-direction .filtration-window .filtration-window-check{display:flex;gap:6px;font-size:14px;padding-top:14px}
#pool-direction .filtration-editor input[type=checkbox]{width:18px;height:18px;accent-color:var(--pool-accent)}
#pool-direction .filtration-total{font-size:18px;font-weight:600;padding:4px 0}
#pool-direction .filtration-total.outside{font-size:13px;color:var(--pool-outside)}
#pool-direction .filtration-editor-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
#pool-direction .filtration-editor-actions button,#pool-direction .filtration-editor [data-editor-close]{min-height:44px;padding:8px 12px;border:1px solid var(--pool-line);border-radius:9px;background:var(--pool-soft);color:var(--pool-text)}
#pool-direction .filtration-editor-actions .pool-primary{background:var(--pool-accent);color:#081321;border-color:var(--pool-accent)}
#pool-direction .filtration-editor button:disabled{opacity:.45;cursor:default}
#pool-direction .filtration-season-details{border-top:1px solid var(--pool-line);padding-top:14px;margin-top:18px}
#pool-direction .filtration-season-details summary{cursor:pointer;padding:8px 0;font-size:14px}
#pool-direction .filtration-profiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0}
#pool-direction .filtration-profiles fieldset{min-width:0;border:1px solid var(--pool-line);border-radius:10px;padding:12px}
#pool-direction .filtration-profiles legend{color:var(--pool-accent);font-size:14px;padding:0 5px}
#pool-direction .filtration-thresholds{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
#pool-direction .filtration-temperature-days{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;margin:10px 0}
#pool-direction .filtration-enable{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:14px}
@media(max-width:600px){#pool-direction .filtration-profiles{grid-template-columns:1fr}#pool-direction .filtration-thresholds{gap:6px}#pool-direction .filtration-window{gap:6px;grid-template-columns:40px minmax(0,1fr) minmax(0,1fr)}}

/* Energy costs belong only in the filtration planner. */
#pool-direction .energy-planner{border-top:1px solid var(--pool-line);padding-top:16px;margin-top:16px;font-size:13px}
#pool-direction .energy-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#pool-direction .energy-title h3{font-size:16px;margin:0}
#pool-direction .energy-planner label{display:grid;gap:5px;color:var(--pool-muted);font-size:12px;min-width:0}
#pool-direction .energy-planner input{min-width:0;width:100%;box-sizing:border-box;min-height:40px;font:inherit;font-size:15px;padding:7px;border:1px solid var(--pool-line);border-radius:8px;background:var(--pool-soft);color:var(--pool-text)}
#pool-direction .energy-bands{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0}
#pool-direction .energy-band{display:grid;gap:5px;border-radius:6px;padding:8px;min-width:72px;text-align:center;border-top:3px solid var(--energy-color);background:var(--pool-soft)}
#pool-direction .energy-band small{font-size:10px;white-space:nowrap}
#pool-direction .energy-P1{--energy-color:#ed6969}#pool-direction .energy-P2{--energy-color:#e99d61}#pool-direction .energy-P3{--energy-color:#cfb548}#pool-direction .energy-P4{--energy-color:#55a8db}#pool-direction .energy-P5{--energy-color:#9587d3}#pool-direction .energy-P6{--energy-color:#45b6a2}
#pool-direction .energy-headline{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#pool-direction .energy-headline>div{display:grid;gap:5px}
#pool-direction .energy-headline strong{font-size:26px;color:var(--pool-text)}
#pool-direction .energy-headline strong small{font-size:13px;font-weight:400;color:var(--pool-muted)}
#pool-direction .energy-headline>span{color:var(--pool-muted)}
#pool-direction .energy-warning{color:var(--pool-text);padding:8px 10px;border-left:3px solid #c99640;background:var(--pool-soft);line-height:1.5;font-size:12px}
#pool-direction .energy-breakdown{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0}
#pool-direction .energy-breakdown>span{display:flex;gap:8px;align-items:center;font-size:12px}
#pool-direction .energy-period{border-bottom:3px solid var(--energy-color);padding:3px 0}
#pool-direction .energy-settings summary,#pool-direction .energy-calendar summary{cursor:pointer;padding:9px 0}
#pool-direction .energy-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0}
#pool-direction .energy-rates small{font-size:10px;line-height:1.4;min-height:28px}
#pool-direction .energy-powers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0}
#pool-direction .energy-table-scroll{overflow:auto}
#pool-direction .energy-planner table{font-size:11px;border-collapse:collapse;width:100%}
#pool-direction .energy-planner th,#pool-direction .energy-planner td{padding:8px 6px;border-bottom:1px solid var(--pool-line);text-align:left}
#pool-direction .energy-planner a{color:var(--pool-accent)}
#pool-direction [data-energy-saved]{font-size:12px;align-self:center;color:var(--pool-muted)}
@media(max-width:420px){#pool-direction .energy-rates{grid-template-columns:repeat(2,minmax(0,1fr))}#pool-direction .energy-title{display:grid}#pool-direction .energy-powers{gap:8px}}

/* TA operational bands: warning within working limits, alarm outside. */
#pool-direction .water-card.warning .water-status,#pool-direction .dash-manual-item.warning{color:light-dark(#946000,#ffc45c)}

/* iPad landscape: use spacing, not clipping or page zoom, to fit the overview. */
@media(min-width:851px) and (max-width:1200px) and (orientation:landscape){
  #pool-direction[data-view=overview] .pool-sidebar{padding-block:2px}
  #pool-direction[data-view=overview] .pool-main{padding-top:6px;padding-bottom:6px;gap:8px 16px}
  #pool-direction[data-view=overview] #pool-overview{gap:8px}
  #pool-direction[data-view=overview] .dash-water{padding:10px}
  #pool-direction[data-view=overview] .dash-assessment{padding:0 0 8px;gap:12px}
  #pool-direction[data-view=overview] .dash-score{width:68px;height:68px;font-size:28px;border-width:4px}
  #pool-direction[data-view=overview] .dash-assessment-copy{gap:3px}
  #pool-direction[data-view=overview] .dash-assessment-copy strong{font-size:18px}
  #pool-direction[data-view=overview] .dash-assessment-copy>span,#pool-direction[data-view=overview] .dash-assessment-copy small{line-height:1.3}
  #pool-direction[data-view=overview] .dash-reading,#pool-direction[data-view=overview] .dash-manual-item{padding:7px 8px;gap:2px}
  #pool-direction[data-view=overview] .dash-reading strong{font-size:26px}
  #pool-direction[data-view=overview] .dash-range{margin:0}
  #pool-direction[data-view=overview] .dash-reading .dash-range{margin-top:auto}
  #pool-direction[data-view=overview] .dash-range-plot{margin-top:4px;height:22px}
  #pool-direction[data-view=overview] .dash-source{margin:4px 0;line-height:1.3}
  #pool-direction[data-view=overview] .dash-manual{padding-top:0}
  #pool-direction[data-view=overview] .dash-add{margin-top:0}
  #pool-direction[data-view=overview] .dash-filtration{padding:10px 12px}
}
.push-warning { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;margin-bottom:18px;border:1px solid #ad7f38;border-radius:14px;background:rgba(255,190,70,.08); }
.push-warning strong { color:var(--warning,#e8b45b);font-size:15px; }
.push-warning p { margin:4px 0 0;font-size:14px;line-height:1.4; }
.push-warning button { flex-shrink:0; }
@media(max-width:600px){.push-warning{align-items:stretch;flex-direction:column;gap:10px;padding:12px 14px;}.push-warning button{align-self:flex-start;}}

#pool-session{max-width:440px;width:calc(100% - 32px);padding:24px;background:var(--pool-surface);color:var(--pool-text);border:1px solid var(--pool-line);border-radius:18px;}
#pool-session form,#pool-session label{display:grid;gap:10px;}
#pool-session form{gap:18px;}

/* The warning is one compact row, not an extra dashboard column. */
#pool-direction[data-view=overview] .push-warning{grid-column:1/-1;margin:0;align-self:start}