: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 #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-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; }
}