/* ═══════════════════════════════════════════
   AquaCalc Dashboard — Responsive Stylesheet
   Mobile-first, all breakpoints covered
═══════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
body{
  background:var(--bg);
  background-image:
    radial-gradient(1100px 520px at 18% -260px, rgba(31,111,235,.10), transparent 70%),
    radial-gradient(900px 480px at 92% -220px, rgba(63,185,150,.055), transparent 70%);
  background-repeat:no-repeat;
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:var(--fs-base);
  line-height:1.7;
  min-height:100vh;
  overflow-x:hidden;
}

/* ── PROFILE BAR ── */
.profile-bar{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:10px max(24px,calc((100% - 1232px) / 2));
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  max-width:100vw;
  overflow:visible;
}
.profile-label{font-size:var(--fs-xs);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.profile-select{background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:var(--fs-sm);font-family:inherit;padding:5px 10px;outline:none;cursor:pointer;min-width:130px;max-width:200px;flex-shrink:1}
.sep{color:var(--border2);font-size:var(--fs-md);user-select:none}
.profile-saved{font-size:var(--fs-xs);color:var(--green);display:none;align-items:center;gap:4px;white-space:nowrap}
.profile-saved.show{display:flex}
/* Account-sync status: the single header indicator. (Distinct from .sync-badge,
   the inline synced-metric dot.) At rest it is a calm dark-green reminder
   ("Synced to your account"); while saving it brightens to light-green "Syncing…";
   an amber state shows a failed save. */
.acct-sync{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);white-space:nowrap;padding:3px 10px;border-radius:20px;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}
.acct-sync::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto;transition:background .2s}
/* Rest — darker, muted green reminder */
.acct-sync.is-synced{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.acct-sync.is-synced::before{background:var(--green)}
/* Saving — brighter light-green, pulsing dot */
.acct-sync.is-saving{background:rgba(63,185,80,.20);color:#7ee787;border-color:rgba(126,231,135,.45)} /* token-ok */
.acct-sync.is-saving::before{background:#7ee787;animation:acctSyncPulse .9s ease-in-out infinite} /* token-ok */
@keyframes acctSyncPulse{0%,100%{opacity:1}50%{opacity:.25}}
/* Error — amber */
.acct-sync.is-error{background:rgba(227,179,65,.15);color:#e3b341;border-color:rgba(227,179,65,.35)} /* token-ok */
.acct-sync.is-error::before{background:#e3b341} /* token-ok */
/* Signed out — device-only, muted */
.acct-sync.is-local{color:var(--muted)}
.acct-sync.is-local::before{background:var(--muted);opacity:.6}
.acct-sync-link{color:var(--blue);text-decoration:none}
.acct-sync-link:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.acct-sync.is-saving::before{animation:none}}

/* ── BUTTONS ── */
.btn{background:transparent;color:var(--blue);border:1px solid var(--blue-dark);border-radius:6px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:6px 14px;cursor:pointer;transition:background .15s;white-space:nowrap}
.btn:hover{background:var(--blue-bg)}
.btn-ghost{background:transparent;color:var(--faint);border:1px solid var(--border);border-radius:6px;font-size:var(--fs-sm);font-weight:500;font-family:inherit;padding:6px 14px;cursor:pointer;transition:background .15s;white-space:nowrap}
.btn-ghost:hover{background:var(--border);color:var(--text)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid #4a1a1a;border-radius:6px;font-size:var(--fs-sm);font-weight:500;font-family:inherit;padding:6px 14px;cursor:pointer;white-space:nowrap}
.btn-danger:hover{background:#2a0e0e}
.btn-sm{padding:4px 10px;font-size:var(--fs-xs)}
.btn-teal{color:var(--teal);border-color:var(--teal)}
.btn-teal:hover{background:var(--teal-bg)}
.btn-share{background:rgba(31,111,235,.15);color:var(--blue);border:1px solid var(--btn-primary);border-radius:6px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:6px 14px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn-share:hover{background:rgba(31,111,235,.28);border-color:var(--blue);color:var(--blue);}
.btn-analyse{background:rgba(167,139,250,.12);color:var(--purple);border:1px solid rgba(167,139,250,.3);border-radius:6px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:6px 14px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn-analyse:hover{background:rgba(167,139,250,.24);border-color:var(--purple);}
.btn-import-label{display:inline-flex;align-items:center;cursor:pointer;line-height:1;}
.btn-import-label:hover{background:var(--border);color:var(--text);}
.profile-bar-sep{width:1px;height:20px;background:var(--border);margin:0 2px;flex-shrink:0;}

/* ── TAB BAR ── */
.tab-bar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:0 max(24px,calc((100% - 1232px) / 2));
  display:flex;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  max-width:100vw;
}
.tab-bar::-webkit-scrollbar{display:none}
@media(max-width:640px){.tab-bar{-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}}
.tab-btn{
  background:transparent;
  color:var(--faint);
  border:none;
  border-bottom:2px solid transparent;
  font-size:var(--fs-sm);
  font-weight:500;
  font-family:inherit;
  padding:12px 14px;
  cursor:pointer;
  transition:color .15s,border-color .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-panel{display:none}
.tab-panel.active{display:block;overflow-x:clip}

/* ── MODE BAR ── */
.mode-bar{
  background:var(--bg2);
  border-bottom:1px solid var(--border);
  padding:10px max(24px,calc((100% - 1232px) / 2));
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  max-width:100vw;
  overflow:hidden;
}
.mode-bar-label{font-size:var(--fs-xs);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.mode-toggle{display:flex;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px}
.mode-btn{background:transparent;color:var(--faint);border:none;border-radius:9px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:6px 12px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.mode-btn.active{background:var(--surface-2);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.mode-info{font-size:var(--fs-xs);color:var(--faint);background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 12px;flex:1 0 100%;min-width:0;line-height:1.5}
.mode-info strong{color:var(--text);font-weight:600}

/* ── CONTAINER ── */
.container{max-width:1280px;margin:0 auto;padding:20px 24px;overflow-x:clip}

/* ── LABELS ── */
.section-label{display:flex;align-items:center;gap:9px;font-size:var(--fs-xs);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.section-label::before{content:"";width:3px;height:13px;border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--btn-primary));flex-shrink:0}

/* ── SUMMARY CARDS ── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:28px}
.card{position:relative;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--border);border-radius:16px;padding:18px;transition:border-color .15s,transform .15s,box-shadow .15s;min-width:0;box-shadow:0 6px 20px -10px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.03)}
.card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(1,4,9,.45),inset 0 1px 0 rgba(255,255,255,.03)}
.card-label{font-size:var(--fs-xs);font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.card-value{font-size:clamp(24px,5vw,32px);font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.05;word-break:break-all;font-variant-numeric:tabular-nums}
.card-unit{font-size:var(--fs-sm);font-weight:400;color:var(--faint);margin-left:2px}
.card-sub{font-size:var(--fs-xs);color:var(--faint);margin-top:7px}
/* Summary KPI tiles get a thin accent rail along the top edge. */
.cards>.card::before{content:"";position:absolute;top:0;left:14px;right:14px;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,rgba(88,166,255,.55),transparent);opacity:.7}

/* ── BADGES ── */
.badge{display:inline-block;font-size:var(--fs-xs);font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap}
.badge-ok{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge-warn{background:#2a1f0e;color:var(--amber);border:1px solid #4a3510}
.badge-info{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-dark)}
.badge-danger{background:#2a0e0e;color:var(--danger);border:1px solid #4a1a1a}
.badge-purple{background:#1e1a3a;color:var(--purple);border:1px solid #3d2f7a}
.badge-muted{background:var(--bg2);color:var(--faint);border:1px solid var(--border2)}
.badge-teal{background:var(--teal-bg);color:var(--teal);border:1px solid var(--teal)}
/* Synced-metric badge: a live pulsing dot marks a value fed in from another tool (e.g. RO Mixer). */
.sync-badge{display:inline-flex;align-items:center;gap:5px}
.sync-badge::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;animation:syncPulse 1.6s ease-in-out infinite}
@keyframes syncPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}
@media(prefers-reduced-motion:reduce){.sync-badge::before{animation:none}}
.btn-how-it-works{display:inline-flex;align-items:center;background:rgba(31,111,235,.16);border:1px solid var(--btn-primary);border-radius:20px;color:var(--blue);font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:4px 13px;cursor:pointer;vertical-align:middle;margin-left:10px;transition:all .15s;box-shadow:0 0 0 3px rgba(31,111,235,.08)}
.btn-how-it-works:hover{background:rgba(31,111,235,.3);border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 4px rgba(31,111,235,.14)}
.btn-alert-toggle{display:inline-flex;align-items:center;gap:5px;background:none;border:1px solid var(--border2);border-radius:6px;color:var(--faint);font-size:var(--fs-xs);font-weight:600;font-family:inherit;padding:4px 12px;cursor:pointer;transition:all .15s;white-space:nowrap;}
.btn-alert-toggle svg{width:13px;height:13px;flex-shrink:0}
.btn-alert-toggle:hover{border-color:var(--faint);color:var(--text2);}
.btn-alert-toggle.alert-on{background:rgba(210,153,34,.1);border-color:var(--amber);color:var(--amber);}
.btn-alert-toggle.alert-on:hover{background:rgba(210,153,34,.2);}
.alert-banner{margin:10px 0 4px;padding:10px 16px;background:rgba(210,153,34,.12);border:1px solid var(--amber);border-radius:6px;color:var(--amber);font-size:var(--fs-sm);font-weight:600;}
.alert-countdown{padding:6px 0 2px;font-size:var(--fs-xs);color:var(--faint);}
.modal-guide-prose{padding:24px 28px;}
.modal-guide-prose p{font-size:var(--fs-sm);line-height:1.75;}
.modal-guide-prose h2{font-size:var(--fs-base);margin:28px 0 10px;}
.modal-guide-prose h3{font-size:var(--fs-sm);margin:20px 0 6px;}
.modal-guide-prose ul,.modal-guide-prose ol{font-size:var(--fs-sm);}
.modal-guide-prose .article-section-break{margin:32px 0 24px;}
.modal-guide-prose .pullquote{margin:20px 0;}
.modal-guide-prose .pullquote p{font-size:var(--fs-sm);}
.modal-guide-prose .highlight{margin:16px 0;}

/* ── CHART CARDS ── */
.chart-card{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:20px 22px;margin-bottom:20px;box-shadow:0 6px 20px -12px rgba(0,0,0,.5)}
.chart-title{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-bottom:4px}
.chart-sub{font-size:var(--fs-xs);color:var(--faint);margin-bottom:14px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:var(--fs-xs);color:var(--faint);margin-bottom:14px}
.legend-item{display:flex;align-items:center;gap:5px}
.legend-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}

/* ── TWO COLUMN — stacks on mobile ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}

/* ── MINI GRID ── */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mini-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;min-width:0}
.mini-label{font-size:var(--fs-xs);color:var(--faint);margin-bottom:3px}
.mini-value{font-size:var(--fs-base);font-weight:600;color:var(--text);word-break:break-all}

/* ── DIVIDER ── */
.divider{border:none;border-top:1px solid var(--border);margin:24px 0}

/* ── PARAMS GRID ── */
.params-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px}
.param-row{display:flex;align-items:center;padding:9px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;gap:8px;min-width:0}
.param-row.hidden{display:none}
.param-label{color:var(--faint);font-size:var(--fs-sm);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.param-value{font-weight:600;color:var(--text);font-size:var(--fs-sm);text-align:right;white-space:nowrap;flex-shrink:0}
.editable-input{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-dark);border-radius:6px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:4px 8px;width:76px;text-align:right;outline:none;transition:border-color .15s;flex-shrink:0}
.editable-input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.edit-hint{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--faint);background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 14px;margin-bottom:20px}
.edit-hint-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}

/* ── ALERT BANNERS ── */
.alert-banner{display:none;align-items:center;gap:10px;border-radius:10px;padding:12px 16px;margin-bottom:16px}
.alert-banner.show{display:flex}
.alert-danger-b{background:#2a0e0e;border:1px solid #6e2020}
.alert-over-b{background:#2a1f0e;border:1px solid #6e4a10}
.alert-mode-b{background:#1e1a3a;border:1px solid #3d2f7a}
.approx-note{display:inline-block;font-size:var(--fs-xs);color:var(--faint);background:var(--border);border-radius:4px;padding:1px 6px;margin-left:4px;font-weight:500;vertical-align:middle}

/* ── LOG SECTION ── */
.log-section{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px}
.log-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.log-title{font-size:var(--fs-base);font-weight:600;color:var(--text)}
.log-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.log-controls label{font-size:var(--fs-sm);color:var(--faint);white-space:nowrap}
/* Shorter tab labels on mobile so all 5 tabs fit (icons keep them clear) */
.tlab-short{display:none}
@media(max-width:640px){.tlab-full{display:none}.tlab-short{display:inline}}
/* Keep each label + its control together so they never wrap apart on mobile */
.lc-pair{display:inline-flex;align-items:center;gap:6px}
.lc-pair label{margin:0}
/* Interval/Slots selects size to their widest option (no clipped "60 min") */
#log-interval,#num-slots{width:auto;min-width:0}
.time-input{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-dark);border-radius:6px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:5px 10px;outline:none;color-scheme:dark}
.log-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.log-table{width:100%;border-collapse:collapse;min-width:520px}
.log-table th{font-size:var(--fs-xs);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.log-table td{padding:10px 12px;border-bottom:1px solid var(--bg);font-size:var(--fs-sm);vertical-align:middle}
.log-table tr:last-child td{border-bottom:none}
.log-table tr:hover td{background:var(--bg3)}
.log-table tr.row-danger td{background:#1a0a0a}
.log-table tr.row-over td{background:#1a1200}
.time-cell{color:var(--faint);font-size:var(--fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.event-select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:var(--fs-xs);font-family:inherit;padding:3px 6px;outline:none;cursor:pointer;max-width:120px}
.event-select.lights-on{background:var(--green-bg);color:var(--green);border-color:var(--green-border)}
.event-select.co2-on{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-dark)}
.event-select.co2-off{background:#1a1008;color:#e3b341;border-color:#3d2a08}
.event-select.lights-off{background:#1a1008;color:var(--amber);border-color:#3d2a08}
.ph-input-cell input{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:4px 8px;width:66px;text-align:right;outline:none}
.ph-input-cell input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.ph-input-cell input.has-value{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-dark)}
.co2-cell,.drop-cell{font-weight:600;font-size:var(--fs-sm);white-space:nowrap}
.drop-cell{font-weight:400;font-size:var(--fs-sm)}
.progress-bar-wrap{width:54px;height:5px;background:var(--border);border-radius:3px;overflow:hidden;flex-shrink:0}
.progress-bar-fill{height:100%;border-radius:3px;transition:width .3s}
.prog-row{display:flex;align-items:center;gap:6px}
.prog-pct{font-size:var(--fs-xs);font-weight:600;min-width:28px}

/* ── FOOTER ── */
.footer{text-align:center;padding:24px 16px;font-size:var(--fs-xs);color:var(--faint);border-top:1px solid var(--border)}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;align-items:center;justify-content:center;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:24px;width:420px;max-width:100%;max-height:90vh;overflow-y:auto}
.modal-title{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-bottom:6px}
.modal-sub{font-size:var(--fs-sm);color:var(--faint);margin-bottom:20px;line-height:1.6}
.modal-input{width:100%;background:var(--field-bg);color:var(--text);border:1px solid var(--field-border);border-radius:var(--field-radius);font-size:var(--fs-base);font-family:inherit;padding:10px 12px;outline:none;margin-bottom:12px}
.modal-input:hover:not(:focus){border-color:var(--field-border-hover)}
.modal-input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px;flex-wrap:wrap}
.modal-error{font-size:var(--fs-sm);color:var(--danger);margin:-4px 0 10px;display:none}
.modal-error.show{display:block}

/* ── CURVE ANALYSIS REPORT ── */
.ar-grade-card{border:1px solid;border-radius:10px;padding:16px 20px;margin-bottom:20px;}
.ar-grade-label{font-size:20px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px;}
.ar-grade-detail{font-size:var(--fs-sm);color:var(--muted);line-height:1.55;}
.ar-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px;}
.ar-stat{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 8px;text-align:center;}
.ar-stat-val{font-size:var(--fs-md);font-weight:700;color:var(--text);margin-bottom:3px;}
.ar-stat-label{font-size:10px;color:var(--faint);line-height:1.3;}
.ar-findings-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:10px;}
.ar-mode-note{font-weight:400;text-transform:none;letter-spacing:0;font-size:var(--fs-xs);}
.ar-findings{display:flex;flex-direction:column;gap:8px;margin-bottom:18px;}
.ar-finding{display:flex;gap:10px;align-items:flex-start;border:1px solid;border-radius:8px;padding:11px 14px;}
.ar-finding-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.ar-finding-body{flex:1;min-width:0;}
.ar-finding-title{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin-bottom:3px;line-height:1.4;}
.ar-finding-detail{font-size:var(--fs-xs);color:var(--muted);line-height:1.55;}
.ar-finding-action{font-size:var(--fs-xs);color:var(--blue);line-height:1.55;margin-top:5px;}
.ar-learn-link{display:flex;align-items:center;gap:10px;background:var(--blue-bg);border:1px solid var(--blue-dark);border-radius:8px;padding:11px 14px;color:var(--blue);font-size:var(--fs-sm);text-decoration:none;transition:background .15s;line-height:1.4;}
.ar-learn-link:hover{background:#142a4e;}
.ar-chart-wrap{border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:20px;background:var(--bg);}
.ar-chart-wrap img{width:100%;display:block;}
@media(max-width:640px){.ar-stats-row{grid-template-columns:repeat(2,1fr);}}

/* ── RO MIXER ── */
.mixer-panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px}
.mixer-panel-title{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.mixer-input-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);gap:8px;flex-wrap:wrap}
.mixer-input-row:last-child{border-bottom:none}
.mixer-input-label{font-size:var(--fs-sm);color:var(--faint);flex:1;min-width:0}
.mixer-input{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-dark);border-radius:6px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:4px 8px;width:80px;text-align:right;outline:none;flex-shrink:0}
.mixer-input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.tap-color{background:var(--blue-bg);color:var(--blue);border-color:var(--blue-dark)}
.ro-color{background:var(--teal-bg);color:var(--teal);border-color:var(--teal)}
.slider-wrap{margin:14px 0 4px}
.slider-label-row{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--faint);margin-bottom:8px}
.big-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;outline:none;cursor:pointer}
.big-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--text);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 0 2px var(--border2)}
.big-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--text);cursor:pointer;border:2px solid var(--bg)}
.mix-res-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
.mix-res-label{font-size:var(--fs-xs);color:var(--faint);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.mix-res-val{font-size:clamp(16px,4vw,20px);font-weight:600;letter-spacing:-.02em}
.mix-res-unit{font-size:var(--fs-xs);color:var(--faint);margin-top:2px}
.tds-sync-banner{background:var(--teal-bg);border:1px solid var(--teal);border-radius:8px;padding:10px 14px;font-size:var(--fs-sm);color:var(--teal);display:flex;align-items:center;gap:8px}

/* Chemistry table */
.chem-name{color:var(--text);font-weight:500;font-size:var(--fs-sm)}
.chem-val-num{font-weight:600;font-variant-numeric:tabular-nums;font-size:var(--fs-sm)}
.chem-unit{font-size:var(--fs-xs);color:var(--faint);margin-left:2px}
.inline-input{background:var(--bg);color:var(--blue);border:1px solid var(--border);border-radius:5px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:3px 6px;width:72px;text-align:right;outline:none}
.inline-input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.inline-input.ro-inp{background:var(--teal-bg);color:var(--teal);border-color:var(--teal)}
.range-pill{display:inline-block;font-size:var(--fs-xs);padding:2px 8px;border-radius:20px;font-weight:600;white-space:nowrap}
.rp-good{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.rp-low{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-dark)}
.rp-high{background:#2a1f0e;color:var(--amber);border:1px solid #4a3510}
.rp-danger{background:#2a0e0e;color:var(--danger);border:1px solid #4a1a1a}
.rp-na{background:var(--border);color:var(--faint);border:1px solid var(--border2)}

/* Range toggle */
.range-toggle{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:3px;gap:2px}
.rt-btn{background:transparent;color:var(--faint);border:none;border-radius:6px;font-size:var(--fs-xs);font-weight:600;font-family:inherit;padding:4px 11px;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.rt-btn.active{background:var(--surface-2);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.4)}

/* Charts grid */
.mini-chart-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px}
.mini-chart-title{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin-bottom:2px}
.mini-chart-sub{font-size:var(--fs-xs);color:var(--faint);margin-bottom:10px}

/* Param search */
.param-search-wrap{position:relative;margin-bottom:12px}
.param-search{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border2);border-radius:8px;font-size:var(--fs-base);font-family:inherit;padding:10px 12px;outline:none}
.param-search:focus{border-color:var(--blue)}
.param-dropdown{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;z-index:200;max-height:200px;overflow-y:auto;margin-top:2px}
.param-dropdown.open{display:block}
.param-option{padding:8px 14px;font-size:var(--fs-sm);cursor:pointer;color:var(--text);border-bottom:1px solid var(--border)}
.param-option:last-child{border-bottom:none}
.param-option:hover{background:var(--border)}
.param-option.custom-opt{color:var(--blue);font-style:italic}
.param-option .opt-unit{font-size:var(--fs-xs);color:var(--faint);margin-left:6px}

/* ── DOSING & WATER CHANGE TOOLS ── */
.tools-section{margin-bottom:8px}
.tools-header{margin-bottom:20px}
.tools-title{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.tools-sub{font-size:var(--fs-sm);color:var(--faint);line-height:1.5}
.tools-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tools-panel{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px}
.tools-panel-title{font-size:var(--fs-xs);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px}
.tfield-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border);gap:8px;flex-wrap:wrap}
.tfield-row:last-child{border-bottom:none}
.tfield-label{font-size:var(--fs-sm);color:var(--faint);flex:1;min-width:0}
.tselect{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:var(--fs-sm);font-family:inherit;padding:5px 8px;outline:none;cursor:pointer;max-width:200px}
.tselect:focus{border-color:var(--blue)}
.tinput{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-dark);border-radius:6px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:4px 8px;width:90px;text-align:right;outline:none;transition:border-color .15s;flex-shrink:0}
.tinput:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.result-cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.result-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:14px 16px;text-align:center}
.result-label{font-size:var(--fs-xs);color:var(--faint);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.result-val{font-size:clamp(20px,5vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1}
.result-unit{font-size:var(--fs-xs);color:var(--faint);margin-top:4px}
.method-info-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.method-info-title{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin-bottom:6px}
.method-info-body{font-size:var(--fs-sm);color:var(--faint);line-height:1.6}
.schedule-card,.multi-change-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.schedule-title{font-size:var(--fs-sm);font-weight:600;color:var(--text);margin-bottom:10px}
.tools-warning{background:#2a1f0e;border:1px solid #6e4a10;border-radius:8px;padding:10px 14px;font-size:var(--fs-sm);color:var(--amber);line-height:1.5;margin-bottom:12px}
.tools-warning.danger{background:#2a0e0e;border-color:#6e2020;color:var(--danger)}
.tools-warning.ok{background:var(--green-bg);border-color:var(--green-border);color:var(--green)}

/* ══════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */

/* Tablet and below */
@media(max-width:900px){
  .container{padding:16px 16px}
  .tab-btn{padding:11px 10px;font-size:var(--fs-xs)}

  /* Stack two-col layouts */

  /* Mode bar stacks vertically so it never overflows */
  .mode-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .mode-toggle{width:100%}
  .mode-btn{flex:1;text-align:center;font-size:var(--fs-xs)}
  .mode-info{min-width:0;width:100%}

  /* Profile bar compact */
  .profile-bar{padding:8px 16px}
  .profile-select{min-width:100px;max-width:160px}
  .sep{display:none}

  /* Mode bar wraps cleanly */
  .mode-bar{padding:8px 12px}
  .mode-toggle{flex-wrap:wrap}
  .mode-btn{padding:5px 10px;font-size:var(--fs-xs)}

  /* Log controls wrap */
  .log-controls{gap:12px 8px}
}

/* Mobile */
@media(max-width:640px){
  /* Cards: 2-up minimum */
  .cards{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}

  /* Keep result cards 2-up */
  .result-cards-grid{grid-template-columns:1fr 1fr}

  /* Tab bar scrollable */
  .tab-bar{padding:0 16px}
  .tab-btn{padding:11px 12px;font-size:var(--fs-sm)}

  /* Log table: keep scrollable, don't collapse */
  .log-table-wrap{margin:0;padding:0}

  /* Mixer: smaller inputs */
  .mixer-input{width:70px}
  .tinput{width:80px}
}

/* Very small phones */
@media(max-width:400px){
  .cards{grid-template-columns:1fr 1fr}
  .result-cards-grid{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr 1fr}
  .mode-btn{font-size:var(--fs-xs);padding:5px 8px}
  .modal{padding:16px}
}

/* ═══════════════════════════════════════════
   ADDITIONS — new semantic classes replacing
   all inline font-size styles in dashboard HTML
═══════════════════════════════════════════ */

/* Empty states (profile not selected) */
.empty-state{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:24px;margin-bottom:24px;text-align:center}
.empty-state-title{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-bottom:8px}
.empty-state-body{font-size:var(--fs-base);color:var(--faint);margin-bottom:16px;line-height:1.6}

/* Alert banners — consistent sizing */
.alert-icon{font-size:20px;flex-shrink:0;line-height:1}
.alert-title{font-size:var(--fs-base);font-weight:600;margin-bottom:4px}
.alert-body{font-size:var(--fs-sm);line-height:1.5;margin-top:2px}
.alert-danger-text{color:var(--danger)}
.alert-over-text{color:var(--amber)}
.alert-mode-text{color:var(--purple)}

/* Log section sub-heading */
.log-sub{font-size:var(--fs-sm);color:var(--faint);margin-top:4px;line-height:1.5}

/* Section label note (the "auto-saved" aside) */
.section-label-note{font-weight:400;text-transform:none;letter-spacing:0;color:var(--blue);font-size:var(--fs-sm);margin-left:4px}

/* Mixer colour helpers */
.tap-label{color:var(--blue)}
.ro-label{color:var(--teal)}
.tap-vol{font-weight:600;font-size:var(--fs-sm)}
.ro-vol{font-weight:600;font-size:var(--fs-sm)}
.slider-vol-row{display:flex;justify-content:space-between;margin-top:6px}

/* Mixer layout — fully responsive */
/* ── RO MIXER LAYOUT ──
   ro-top-row: 2 equal panels side by side at ≥900px, stacked below
   ro-chem-panel: chemistry table, always full width
────────────────────────────────────────────────── */
.ro-top-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;align-items:start}
.ro-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.ro-tds-card{margin-bottom:10px}
.ro-chem-panel{margin-bottom:20px}
.mixer-panel-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.mixer-panel-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* RO charts grid — 2 col desktop, 1 col mobile */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}

/* Section note under section-label */
.section-note{font-size:var(--fs-sm);color:var(--faint);margin-bottom:16px;line-height:1.6}

/* Chem table — always scrollable, never causes overflow */
.chem-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.chem-table{width:100%;border-collapse:collapse;min-width:460px}
.chem-table th{font-size:var(--fs-sm);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
.chem-table td{padding:10px 12px;border-bottom:1px solid var(--bg);font-size:var(--fs-sm);vertical-align:middle}

/* Water change table */
.wc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
.wc-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.wc-table th{text-align:left;padding:8px 10px;font-size:var(--fs-sm);color:var(--faint);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--border)}
.wc-table th:not(:first-child){text-align:right}
.wc-table td{padding:8px 10px;border-bottom:1px solid var(--bg);color:var(--text)}
.wc-table td:not(:first-child){text-align:right}

/* Info rows within tool panels */
.tfield-row-info{border-bottom:none;padding-top:10px}
.tfield-label-muted{font-size:var(--fs-sm);color:var(--faint);flex:1}
.tfield-val-highlight{font-size:var(--fs-sm);color:var(--blue);font-weight:600;text-align:right;flex-shrink:0}

/* Field hint text */
.field-hint{font-size:var(--fs-sm);color:var(--faint);line-height:1.6;padding:6px 0 10px}

/* Schedule body */
.schedule-body{font-size:var(--fs-sm);color:var(--faint);line-height:1.8}

/* Section divider */
.section-divider{border-top:1px solid var(--border);margin:28px 0}

/* Add param modal selected info */
.ap-selected-info{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:var(--fs-sm);color:var(--faint);line-height:1.6}


/* Medium screens (tablets, large phones in landscape) */
@media(max-width:900px){
  .tab-bar{padding:0 16px}
  .mode-bar{padding:8px 16px}
}
/* ── UPDATED RESPONSIVE BREAKPOINTS ── */
@media(max-width:900px){
  /* Stack all two-column layouts */
  .ro-top-row{grid-template-columns:1fr;gap:12px}
  .two-col{grid-template-columns:1fr}
  /* Stack charts grid */
  .charts-grid{grid-template-columns:1fr}
  /* Stack dosing/WC tool layout */
  .tools-layout{grid-template-columns:1fr}
  .mixer-panel-header{flex-direction:column;align-items:flex-start}
}

@media(max-width:640px){
  /* Tighter tab labels */
  .tab-btn{font-size:var(--fs-sm);padding:10px 12px}
  /* placeholder - moved to 768px block */
  /* Cards: at least 2 per row */
  .cards{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  /* Result cards: 2 per row always */
  .result-cards-grid{grid-template-columns:1fr 1fr}
  /* Log controls stack */
  .log-header{flex-direction:column;align-items:flex-start;gap:10px}
  .log-controls{flex-wrap:wrap;gap:12px 8px}
}

@media(max-width:400px){
  .cards{grid-template-columns:1fr 1fr}
  .result-cards-grid{grid-template-columns:1fr 1fr}
  .tab-btn{font-size:var(--fs-xs);padding:9px 10px}
}

/* ═══════════════════════════════════════════
   RO MIXER — MOBILE CARD LAYOUT
   Replaces the horizontal-scrolling table
   on screens ≤ 768px
═══════════════════════════════════════════ */

/* Show/hide helpers */
.chem-desktop-only{display:block}
.chem-mobile-only{display:none}
.charts-desktop-only{display:block}

/* ── Mobile card per parameter ── */
.chem-cards-mobile{display:flex;flex-direction:column;gap:10px;padding-top:4px}

.chem-card-mobile{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
}
.chem-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:8px;
}
.chem-card-name{
  font-size:var(--fs-base);
  font-weight:600;
  color:var(--text);
  flex:1;
  min-width:0;
}
.chem-card-header-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.chem-card-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:8px;
}
.chem-card-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.chem-card-field-label{
  font-size:var(--fs-xs);
  color:var(--faint);
  font-weight:500;
}
.chem-card-input{
  width:100%;
  min-width:0;
}
.chem-card-mixed{
  font-size:var(--fs-base);
  font-weight:700;
  line-height:1;
  padding-top:6px;
}

/* Remove buttons */
.chem-remove-btn{
  background:transparent;
  color:#4a4f57;
  border:none;
  cursor:pointer;
  font-size:var(--fs-base);
  padding:2px 4px;
  border-radius:4px;
  line-height:1;
  transition:color .15s;
  flex-shrink:0;
}
.chem-remove-btn:hover{color:var(--danger)}
.chem-remove-btn-desktop{
  background:transparent;
  color:#4a4f57;
  border:none;
  cursor:pointer;
  font-size:var(--fs-sm);
  padding:2px 6px;
  border-radius:4px;
  transition:color .15s;
}
.chem-remove-btn-desktop:hover{color:var(--danger)}

/* ── Responsive switches ── */
@media(max-width:640px){
  /* Switch table → cards */
  .chem-desktop-only{display:none !important}
  .chem-mobile-only{display:block !important}

  /* Hide bar charts — card layout already shows mixed + status */
  .charts-desktop-only{display:none !important}



  .mixer-panel-header{flex-direction:column;align-items:flex-start;gap:8px}
  .mixer-panel-controls{width:100%;justify-content:flex-start;gap:6px}

  /* Range toggle fills width nicely */
  .range-toggle{flex:1}
  .rt-btn{flex:1;text-align:center;padding:6px 8px}

  /* Mixed result 2×2 grid stays on mobile */

  /* Inline inputs in cards: full width */
  .chem-card-input{width:100%;box-sizing:border-box}
}

@media(max-width:400px){
  /* Very small phones: card row 3-col stays but inputs shrink */
  .chem-card-row{gap:6px}
  .chem-card-input{padding:4px 6px;font-size:var(--fs-sm)}
  .chem-card-mixed{font-size:var(--fs-base)}
  .chem-card-name{font-size:var(--fs-sm)}
}

/* ═══════════════════════════════════════════
   MOBILE SENTINEL — CSS-based viewport detection
   Visible only on mobile; JS reads this via
   getComputedStyle to reliably detect mobile
═══════════════════════════════════════════ */
@media(max-width:900px){
  #mobile-sentinel{display:block !important}
}

/* ── PROFILE BAR — prevent wrapping on mobile ── */
@media(max-width:640px){
  .profile-bar{
    flex-wrap:wrap;
    overflow:visible;
    gap:8px;
    padding:8px 16px;
  }
  .profile-bar::-webkit-scrollbar{display:none}
  .profile-label{display:none}  /* save space — context is obvious */
  .profile-select{min-width:100px;max-width:150px;font-size:var(--fs-sm)}
  .profile-saved{flex-shrink:0}
}

/* ── SLIDER VOL ROW ── */
.slider-vol-row{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  padding:6px 0 0;
  border-top:1px solid var(--border);
}
.tap-vol,.ro-vol{font-size:var(--fs-sm);font-weight:600}

/* ── CHEM TABLE font consistency ── */
.inline-input{
  background:var(--bg);
  color:var(--blue);
  border:1px solid var(--border);
  border-radius:5px;
  font-size:var(--fs-sm);
  font-weight:600;
  font-family:inherit;
  padding:4px 8px;
  width:80px;
  text-align:right;
  outline:none;
}
.inline-input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.inline-input.ro-inp{background:var(--teal-bg);color:var(--teal);border-color:var(--teal)}

/* ── CHEM CARD MOBILE input sizing ── */
.chem-card-input{width:100%;min-width:0;font-size:var(--fs-sm)}

/* ── CHARTS section full-width on desktop ── */
.charts-desktop-only .charts-grid{width:100%}

/* ═══════════════════════════════════════════════════════════
   PUBLIC.CSS ISOLATION
   These rules override anything public.css sets that doesn't
   belong on the dashboard. Scoped to body.dash so specificity
   is higher than public.css's unscoped class rules.
═══════════════════════════════════════════════════════════ */

/* section-label: public.css uses --blue, dashboard needs --muted */
body.dash .section-label{color:var(--faint);letter-spacing:.08em}

/* result-card: public uses --bg (dark), dashboard needs var(--bg) (darker) */
body.dash .result-card{background:var(--bg)}

/* range slider: public.css sets background via var, dashboard controls via JS inline */
body.dash input[type=range]{background:var(--border)}

/* Mobile rules from public.css @media(max-width:640px) that don't fit the dashboard */
@media(max-width:640px){
  body.dash .tselect{max-width:200px;font-size:var(--fs-sm)}
  body.dash .tinput{width:90px}
}

/* Ensure public.css btn-ghost hover doesn't override dashboard's version */
body.dash .btn-ghost:hover{background:var(--border);color:var(--text)}
body.dash .btn-sm{padding:4px 8px;font-size:var(--fs-xs)}

/* ── IOS SAFARI ZOOM FIX ──────────────────────────────────────
   iOS Safari auto-zooms the viewport when focusing any input
   with font-size < 16px, then fails to restore the viewport.
   Force 16px on all inputs on mobile to prevent this entirely.
   This is the correct fix alongside maximum-scale=1 in the viewport meta.
─────────────────────────────────────────────────────────────── */
/* (removed) redundant @768 input font-size — handled by the coarse-pointer rule below */

/* Tab button icon boxes — matches site-wide nav icon style */
.tab-icon-box{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;vertical-align:-6px;margin-right:2px}

/* ── TANK DATASHEET TAB ──────────────────────────────────────── */
.ds-block{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:16px}
.ds-block-header{margin-bottom:16px}
.ds-block-title{font-size:var(--fs-base);font-weight:600;color:var(--text);margin-bottom:4px}
.ds-block-note{font-size:var(--fs-xs);color:var(--faint);line-height:1.5}
.ds-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ds-stat{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;position:relative}
.ds-stat-label{font-size:var(--fs-xs);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;display:flex;align-items:center;gap:5px}
.ds-stat-val{font-size:var(--fs-base);font-weight:600;color:var(--text);line-height:1.2}
.ds-stat-edit{background:none;border:none;cursor:pointer;color:var(--border2);font-size:var(--fs-xs);padding:0;margin-left:auto;line-height:1;transition:color .15s;flex-shrink:0}
.ds-stat-edit:hover{color:var(--blue)}
.ds-fields{display:flex;flex-direction:column;gap:12px}
.ds-field-row{display:flex;flex-direction:column;gap:5px}
.ds-lbl{font-size:var(--fs-sm);font-weight:500;color:var(--text2)}
.ds-opt{font-size:var(--fs-xs);font-weight:400;color:var(--faint);margin-left:4px}
.ds-note{font-size:var(--fs-xs);font-weight:400;color:var(--blue);margin-left:4px}
.ds-input{background:var(--field-bg);border:1px solid var(--field-border);border-radius:var(--field-radius);color:var(--text);font-size:var(--fs-sm);font-family:inherit;padding:9px 12px;outline:none;transition:border-color .15s;width:100%;box-sizing:border-box}
.ds-input:hover:not(:focus){border-color:var(--field-border-hover)}
.ds-input:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.ds-textarea{background:var(--bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:var(--fs-sm);font-family:inherit;padding:9px 12px;outline:none;transition:border-color .15s;width:100%;box-sizing:border-box;resize:vertical;line-height:1.6}
.ds-textarea:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.ds-export-btns{display:flex;gap:10px;flex-wrap:wrap}
.ds-confirm{margin-top:10px;font-size:var(--fs-sm);font-weight:600;color:var(--green)}
.ds-ph-attach-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.ds-ph-attached{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-top:10px}
.ds-ph-attached-label{font-size:var(--fs-xs);font-weight:600;color:var(--green);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ds-ph-table{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.ds-ph-table th{color:var(--faint);font-weight:600;text-align:left;padding:3px 8px;border-bottom:1px solid var(--border)}
.ds-ph-table td{color:var(--text2);padding:3px 8px}
.ds-ph-table tr:nth-child(even) td{background:#0a0e14}
.ds-backup-block{border-color:var(--border2)}
.ds-backup-row{display:flex;align-items:center;gap:12px;margin:12px 0 8px;flex-wrap:wrap}
.ds-backup-code{font-family:'Courier New',monospace;font-size:var(--fs-sm);background:var(--bg);border:1px solid var(--border2);border-radius:6px;padding:6px 12px;color:var(--blue);word-break:break-all;flex:1;min-width:0}
.ds-backup-copy-btn{flex-shrink:0}
.ds-backup-tip{font-size:var(--fs-xs);color:var(--faint);line-height:1.6;margin:8px 0 0}
.ds-sync-label{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}
.ds-save-status{font-size:var(--fs-xs);color:var(--faint)}
/* ── Sync tab layout ─────────────────────────────── */
.sync-wrap{max-width:640px;margin:0 auto}
.sync-title{font-size:var(--fs-md);font-weight:700;color:var(--text);margin:4px 0 6px}
.sync-intro{font-size:var(--fs-sm);color:var(--muted);line-height:1.6;margin:0 0 18px}
.sync-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px}
.sync-card-head{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:700;color:var(--text);margin-bottom:14px}
.sync-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--btn-primary);color:#fff;font-size:var(--fs-sm);flex:0 0 auto}
.sync-save-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sync-save-btn{flex:0 0 auto}
.sync-load-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;background:var(--bg);border:1px dashed var(--border2);border-radius:12px}
.sync-load-text{font-size:var(--fs-sm);color:var(--muted)}
/* ── Save / Load progress list ───────────────────── */
.spr-list{list-style:none;margin:6px 0 4px;padding:0}
.spr-item{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:var(--fs-sm);color:var(--text2)}
.spr-icon{width:18px;height:18px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.spr-spin{border:2px solid var(--border2);border-top-color:var(--blue);border-radius:50%;animation:spr-rot .7s linear infinite}
@keyframes spr-rot{to{transform:rotate(360deg)}}
.spr-ok::before{content:'\2713';color:var(--green);font-weight:700;font-size:var(--fs-base)}
.spr-err::before{content:'\2717';color:var(--danger);font-weight:700;font-size:var(--fs-base)}
.spr-item.spr-muted{color:var(--faint)}
/* ── Recent saves log ────────────────────────────── */
.synclog-empty{font-size:var(--fs-sm);color:var(--faint);padding:4px 0}
.synclog-row{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:var(--fs-sm);border-bottom:1px solid var(--border)}
.synclog-row:last-child{border-bottom:0}
.synclog-ok{color:var(--green);font-weight:700;flex:0 0 auto}
.synclog-err{color:var(--danger);font-weight:700;flex:0 0 auto}
.synclog-src{color:var(--text2);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.synclog-time{color:var(--faint);font-size:var(--fs-xs);flex:0 0 auto}
.ds-sync-link-input{font-size:var(--fs-sm);background:var(--bg);border:1px solid var(--border2);border-radius:6px;padding:7px 12px;color:#adbac7;flex:1;min-width:0}
.ds-sync-link-input:focus{outline:none;border-color:var(--btn-primary);color:var(--text2)}
.sync-grid{display:flex;gap:26px;align-items:flex-start;margin:14px 0 4px}
.sync-qr-col{flex:0 0 auto;text-align:center}
.sync-fields-col{flex:1 1 auto;min-width:0}
.ds-qr{width:210px;height:210px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:10px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ds-qr img,.ds-qr canvas{display:block;width:100%!important;height:auto!important;image-rendering:pixelated;border-radius:4px}
.ds-qr-msg{font-size:var(--fs-xs);color:#57606a;padding:0 14px;text-align:center;line-height:1.5}
.ds-qr-cap{font-size:var(--fs-xs);color:var(--faint);margin-top:8px;max-width:210px}
@media(max-width:640px){
  .sync-grid{flex-direction:column;align-items:center;gap:18px}
  .sync-fields-col{width:100%}
}

/* ── DATASHEET PRINT VIEW ────────────────────────────────────── */
@media print {
  /* When not printing the datasheet, hide everything */
  body:not(.printing-datasheet) * { display: none !important; }

  /* When printing the datasheet */
  body.printing-datasheet { background: #fff !important; color: #111 !important; }
  body.printing-datasheet .site-nav,
  body.printing-datasheet .profile-bar,
  body.printing-datasheet .tab-bar,
  body.printing-datasheet .mode-bar,
  body.printing-datasheet .footer { display: none !important; }
  body.printing-datasheet .tab-panel { display: none !important; }
  body.printing-datasheet #tab-datasheet { display: block !important; }
  body.printing-datasheet .ds-export-btns,
  body.printing-datasheet .ds-backup-block,
  body.printing-datasheet .ds-confirm { display: none !important; }
  body.printing-datasheet .ds-block { background: #fff !important; border: 1px solid #ccc !important; border-radius: 4px !important; padding: 12px 16px !important; margin-bottom: 10px !important; break-inside: avoid; }
  body.printing-datasheet .ds-block-title { color: #111 !important; font-size: 14px !important; }
  body.printing-datasheet .ds-block-note { color: #555 !important; }
  body.printing-datasheet .ds-stat { background: #f8f8f8 !important; border-color: #ddd !important; }
  body.printing-datasheet .ds-stat-label { color: #555 !important; }
  body.printing-datasheet .ds-stat-val { color: #111 !important; }
  body.printing-datasheet .ds-input,
  body.printing-datasheet .ds-textarea { background: #fff !important; border-color: #ccc !important; color: #111 !important; }
  body.printing-datasheet .ds-lbl { color: #333 !important; }
  body.printing-datasheet .container { padding: 8px !important; }

  /* Print footer */
  body.printing-datasheet #tab-datasheet::after {
    content: 'Generated by AquaCalc — aquacalc.uk';
    display: block;
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-top: 16px;
    border-top: 1px solid #ddd;
    padding-top: 8px;
  }
}

@media(max-width:640px) {
  .ds-summary-grid { grid-template-columns: 1fr 1fr; }
  .ds-block { padding: 16px; }
}

/* Prevent iOS Safari auto-zoom on input focus (triggered when font-size < 16px) */
@media(hover:none)and(pointer:coarse){
  input,select,textarea{font-size:1rem!important}
  /* Touch targets >= 44px (project standard); centre content so they don't look top-aligned */
  .btn,.btn-sm,.btn-ghost,.btn-danger,.btn-teal,.btn-share,.btn-analyse,.btn-how-it-works,.btn-alert-toggle,.mode-btn,.rg-seg-btn,.rt-btn,.tab-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .pb-menu-trigger,.pb-menu-item{min-height:44px;display:flex;align-items:center}
  .profile-select,.time-input{min-height:44px}
  .mw-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
  /* Setup wizard: comfortable touch targets */
  .wiz2-seg-btn,.wiz2-next,.wiz2-back,.wiz2-skip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .wiz2-close{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;margin:-6px -8px -6px 0}
}

/* ── My Tank signed-in indicator (Phase C) — interim; Phase E integrates it ── */
.aq-acct-chip{display:inline-flex;align-items:center;gap:8px;
  background:var(--bg2);border:1px solid var(--border2);border-radius:999px;padding:5px 11px;
  font:600 12.5px/1 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text2)}
.aq-acct-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.aq-acct-em{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2);text-decoration:none}
.aq-acct-em:hover{color:#fff;text-decoration:underline}
.aq-acct-out{color:var(--faint);text-decoration:none;padding-left:9px;margin-left:2px;border-left:1px solid var(--border2)}
.aq-acct-out:hover{color:var(--danger)}
@media(max-width:640px){.aq-acct-chip{padding:5px 10px}.aq-acct-em{max-width:110px}
  /* public.css hides .site-nav-right at ≤640; keep it on the dashboard so the
     account chip stays reachable on mobile — just drop the Live pill there. */
  body.dash .site-nav-right{display:flex}
  body.dash .live-pill{display:none}
  /* Keeping site-nav-right visible re-introduced the desktop "Search ⌘K" pill AND
     a second search icon → double search + a wrapped nav. Hide the desktop pill and
     lay the bar out as one flex row: logo | chip | search | menu. */
  body.dash .nav-search-btn{display:none}
  body.dash .site-nav{display:flex;align-items:center;gap:8px}
  body.dash .site-nav-logo{margin-right:auto}}

/* Floating "Saved" toast — visible regardless of scroll position. */
.save-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(8px);z-index:8000;
  display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--green-border);
  color:var(--green);font-size:var(--fs-sm);font-weight:600;padding:8px 16px;border-radius:999px;
  box-shadow:0 10px 30px -8px rgba(1,4,9,.7);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
.save-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.save-toast-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto}
@media(prefers-reduced-motion:reduce){.save-toast{transition:opacity .2s ease}}

/* ── "Updated on another device" banner (Phase C pull-on-refocus) ─────────── */
.aq-remote-change{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9500;
  display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);
  background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:10px 12px 10px 16px;
  font:500 13px/1.4 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text2);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.75)}
.aq-remote-change .aq-rc-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aq-remote-change button{border:0;border-radius:8px;padding:7px 13px;font:600 12.5px system-ui;cursor:pointer}
.aq-rc-refresh{background:var(--btn-primary);color:#fff}
.aq-rc-refresh:hover{filter:brightness(1.08)}
.aq-rc-dismiss{background:transparent;color:var(--faint)}
.aq-rc-dismiss:hover{color:var(--text2)}

/* Native form controls (number up/down spinners, selects, date/time pickers) must
   render in dark mode so their arrows are visible on the dark UI. */
input, select, textarea { color-scheme: dark; }

/* Setup-wizard live total-water hint (tank + sump) */
.wiz-total{margin:6px 0 2px;font-size:var(--fs-sm);line-height:1.5;color:var(--blue);min-height:1em}

/* Signed-out "Save / Sign in" chip + first-save nudge (Phase E discoverability) */
.aq-acct-chip.aq-acct-signin{text-decoration:none;cursor:pointer}
.aq-acct-chip.aq-acct-signin:hover{border-color:#2f81f7aa}
.aq-acct-dot-off{background:#6e7681}
.aq-nudge{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9600;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:min(560px,calc(100vw - 24px));
  background:var(--bg2);border:1px solid var(--border2);border-radius:12px;padding:12px 14px;
  font:500 13px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--text2);
  box-shadow:0 16px 44px -14px rgba(0,0,0,.75)}
.aq-nudge-msg{flex:1;min-width:180px}
.aq-nudge-yes{background:var(--btn-primary);color:#fff;text-decoration:none;border-radius:8px;padding:8px 14px;font-weight:600;white-space:nowrap}
.aq-nudge-yes:hover{filter:brightness(1.08)}
.aq-nudge-no{background:transparent;border:0;color:var(--faint);cursor:pointer;font-weight:600;padding:8px 6px}
.aq-nudge-no:hover{color:var(--text2)}

/* ══ DASHBOARD POLISH — depth + hierarchy (v3.204) ══════════════════
   Palette-true: same GitHub-dark hues, adds soft elevation, subtle
   surface gradients and a leading accent on panel titles so the page
   reads as a crafted dashboard rather than flat slabs. */
.chart-card,.log-section,.mixer-panel,.mini-chart-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 2px 4px rgba(1,4,9,.28),0 12px 32px -8px rgba(1,4,9,.35),inset 0 1px 0 rgba(255,255,255,.03);
}
/* Panel titles get a small accent tick to anchor the header. */
.chart-title{position:relative;padding-left:12px;font-size:var(--fs-base);font-weight:700;letter-spacing:-.01em}
.chart-title::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--btn-primary))}
/* Inner metric tiles (turnover / cycle time, etc.) — punchier numbers. */
.mini-card{background:linear-gradient(180deg,#12161d,#0f131a);transition:border-color .15s}
.mini-card:hover{border-color:var(--border2)}
.mini-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
.mini-value{font-size:var(--fs-base);font-weight:700;color:#f0f6fc;font-variant-numeric:tabular-nums}
/* Reduce motion honours user setting. */
@media(prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}}

/* ── Container coherence: align the site-nav gutter to the dashboard column
   (profile/tab/mode bars + .container all share max(24px,(100%-1232px)/2)). ── */
body.dash .site-nav{padding:0 max(24px,calc((100% - 1232px) / 2))}
@media(max-width:768px){body.dash .site-nav{padding:0 16px}} /* bp-ok: matches .container's 768px switch to 16px so gutters stay aligned */

/* ── Profile-bar "Manage" overflow menu (declutter) — native <details>, no JS ── */
.pb-menu{position:relative;display:inline-block}
.pb-menu-trigger{list-style:none;display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--faint);border:1px solid var(--border);border-radius:6px;font-size:var(--fs-xs);font-weight:500;font-family:inherit;padding:4px 11px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.pb-menu-trigger::-webkit-details-marker{display:none}
.pb-menu-trigger::marker{content:""}
.pb-menu-trigger:hover,.pb-menu[open] .pb-menu-trigger{background:var(--border);color:var(--text);border-color:var(--border2)}
.pb-caret{font-size:9px;line-height:1;transition:transform .15s}
.pb-menu[open] .pb-caret{transform:rotate(180deg)}
.pb-menu-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:196px;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:6px;box-shadow:0 14px 34px rgba(1,4,9,.55);display:flex;flex-direction:column;gap:2px}
.pb-menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;color:var(--text2);border:0;border-radius:6px;font-size:var(--fs-sm);font-weight:500;font-family:inherit;padding:8px 10px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.pb-menu-item:hover{background:#1f2630;color:#f0f6fc}
.pb-menu-danger{color:var(--danger)}
.pb-menu-danger:hover{background:#2a0e0e;color:#ff7b72}
.pb-menu-div{height:1px;background:var(--border);margin:4px 2px}
.pb-menu .is-hidden{display:none}

/* ══ SEMANTIC ACCENT SYSTEM ════════════════════════════════════════════
   Each metric family carries one consistent hue site-wide:
   pH = blue · target = green · CO₂ = amber · pH drop = purple · flow = teal.
   Elements opt in with .acc-{ph,target,co2,drop,flow}; --acc drives rails,
   number colour, hovers and title ticks. */
.acc-ph{--acc:var(--blue)}
.acc-target{--acc:var(--green)}
.acc-co2{--acc:var(--amber)}
.acc-drop{--acc:var(--purple)}
.acc-flow{--acc:var(--teal)}
.cards>.card{--acc:var(--blue);background:
  radial-gradient(130% 90% at 50% -30%, color-mix(in srgb, var(--acc) 9%, transparent), transparent 62%),
  linear-gradient(180deg,var(--surface-2),var(--surface))}
.cards>.card::before{background:linear-gradient(90deg,transparent,var(--acc),transparent);opacity:.9}
.cards>.card:hover{border-color:color-mix(in srgb, var(--acc) 42%, var(--border2))}
.card.acc-ph .card-value{color:var(--blue)}
.card.acc-target .card-value{color:#56d364}
.card.acc-drop .card-value{color:#b8a5fb}
/* CO₂ number colour is set inline by JS (amber in formula mode, purple for estimates). */
.c-co2-approx{margin-top:4px;display:none} /* JS toggles display when est mode active */
/* Cross-tab consistency — RO Mixer + analysis data cards get the SAME hero
   treatment as the pH KPI tiles: accent-tinted surface, top rail, tinted
   number, hover lift. Colour comes from each card's .acc-* class (--acc),
   defaulting to teal (the RO/water theme). */
.mix-res-card,.ar-stat,.result-card,.ds-stat{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:16px;
  background:
    radial-gradient(130% 90% at 50% -30%, color-mix(in srgb, var(--acc,var(--teal)) 9%, transparent), transparent 62%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 1px 2px rgba(1,4,9,.35),inset 0 1px 0 rgba(255,255,255,.02);
  transition:border-color .15s,transform .15s,box-shadow .15s}
.mix-res-card::before,.ar-stat::before,.result-card::before,.ds-stat::before{content:"";position:absolute;top:0;left:14px;right:14px;height:2px;
  border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,var(--acc,var(--teal)),transparent);opacity:.9}
.mix-res-card:hover,.ar-stat:hover,.result-card:hover,.ds-stat:hover{transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--acc,var(--teal)) 42%, var(--border2));
  box-shadow:0 6px 18px rgba(1,4,9,.45),inset 0 1px 0 rgba(255,255,255,.03)}
.mix-res-val,.result-val{font-size:clamp(22px,4.5vw,27px);font-weight:700;color:var(--acc,var(--teal));font-variant-numeric:tabular-nums}
.result-card{--acc:var(--blue)}
.ds-stat{--acc:var(--blue)}
.ds-stat-val{color:var(--acc,var(--teal));font-variant-numeric:tabular-nums}
.ar-stat{--acc:var(--amber)}
.ar-stat-val{font-size:var(--fs-lg);color:var(--acc,var(--teal));font-variant-numeric:tabular-nums}
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .mix-res-card,.ar-stat,.result-card,.ds-stat{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
  .mix-res-card:hover,.ar-stat:hover,.result-card:hover,.ds-stat:hover{border-color:var(--border2)}
}
.mini-chart-title{position:relative;padding-left:10px}
.mini-chart-title::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px;background:var(--teal)}
@media(prefers-reduced-motion:reduce){.mix-res-card,.mix-res-card:hover,.ar-stat,.ar-stat:hover{transition:none;transform:none}}
/* Chart-panel title ticks inherit the panel's metric hue. */
.chart-card{--acc:var(--blue)}
.chart-title::before{background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 55%,var(--bg)))}
/* Graceful fallback for engines without color-mix() — solid accent tints. */
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .cards>.card:hover{border-color:var(--border2)}
  .cards>.card{background:linear-gradient(180deg,var(--surface-2),var(--surface))}
}

/* ── pH profiler: chart empty states ── */
.chart-empty-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:16px;pointer-events:none}
.chart-empty-ov .ceo-title{font-size:var(--fs-sm);font-weight:600;color:#adbac7}
.chart-empty-ov .ceo-sub{font-size:var(--fs-sm);color:var(--faint);line-height:1.5;max-width:280px}
.ceo-hidden{display:none}

/* ── pH profiler: flow stats moved to full-width row under the charts ── */
.flow-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
@media(max-width:640px){.flow-stats{grid-template-columns:1fr 1fr}}

/* ── pH profiler: collapsible advanced inputs / calculated values ── */
.dash-details{border:1px solid var(--border);border-radius:10px;background:#12161d;margin-bottom:16px;overflow:hidden}
.dash-details-sum{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 15px;cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--text2);list-style:none}
.dash-details-sum::-webkit-details-marker{display:none}
.dds-title{letter-spacing:.01em}
.dds-chev{color:var(--faint);flex-shrink:0;transition:transform .2s}
.dash-details[open] .dds-chev{transform:rotate(180deg)}
.dash-details-grid{padding:2px 15px 15px}
.params-grid-essentials{margin-bottom:12px}
/* Calculated values read as computed output, not editable inputs */
.calc-output-grid .param-row{background:var(--bg);border-color:#1a1f27}
.calc-output-grid .param-label{color:#6e7681}
.calc-output-grid .param-value{font-weight:500;color:#adbac7}

/* pH log table: drop the Progress column on phones (Status badge carries the verdict) */
@media(max-width:640px){
  .prog-col{display:none}
  .log-table{min-width:440px}
}

/* ── RO Mixer: leaner result panel, Table/Charts toggle, collapsible guide ── */
.ro-tds-hero{padding:20px 16px;margin-bottom:12px}
.ro-tds-hero .mix-res-val{font-size:clamp(30px,7vw,40px)}
.ro-view-hidden{display:none}
.ro-charts-note{margin-top:12px}
.ro-guide{margin-top:6px}
.ro-guide-body{padding:0 15px 14px;font-size:var(--fs-sm);color:var(--muted);line-height:1.7}
.ro-guide-body p{margin:5px 0}
.ro-guide-body strong{color:var(--text2)}
@media(max-width:640px){ /* bp-ok: matches this tab's chem table→cards swap */
  #ro-view-seg{display:none}
  #ro-view-charts{display:none!important}
  #ro-view-table{display:block!important}
}

/* ── Dosing & Datasheet: icon alignment + grouped datasheet form ── */
.schedule-title{display:flex;align-items:center;gap:6px}
.ds-edit-ico{width:11px;height:11px;display:block}
.ds-export-btns .btn,.ds-export-btns .btn-ghost,.ds-ph-attach-row .btn-ghost{display:inline-flex;align-items:center;gap:6px}
.ds-group-head{font-size:var(--fs-xs);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:8px;padding-top:12px;border-top:1px solid var(--border)}
.ds-fields>.ds-group-head:first-child{margin-top:0;padding-top:0;border-top:none}

/* ── Regime dosing calculator ─────────────────────────────────── */
.rg-seg{display:flex;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px;margin-bottom:12px}
.rg-seg-btn{flex:1;min-width:0;text-align:center;background:transparent;color:var(--faint);border:none;border-radius:9px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;padding:6px 10px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.rg-seg-btn:hover:not(.active){color:#adbac7}
.rg-seg-btn.active{background:var(--surface-2);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.rg-targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:10px}
.rg-target{display:flex;flex-direction:column;gap:3px}
.rg-target-lbl{font-size:var(--fs-xs);font-weight:600;color:#adbac7}
.rg-target .tinput{width:100%}
.rg-target-unit{font-size:10.5px;color:var(--faint)}
.rg-adv{margin-bottom:4px}
.rg-adv-sum{font-size:var(--fs-xs);color:var(--faint);cursor:pointer;padding:4px 0}
.rg-salts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
@media(max-width:640px){.rg-salts{grid-template-columns:1fr}}
.rg-salt{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text2);cursor:pointer;line-height:1.3}
.rg-salt input{flex-shrink:0}
.rg-plan,.rg-profile{overflow-x:auto}
.rg-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.rg-table th{font-size:var(--fs-xs);font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;text-align:right;padding:6px 10px;border-bottom:1px solid var(--border2)}
.rg-table th:first-child{text-align:left}
.rg-table td{padding:7px 10px;border-bottom:1px solid var(--border)}
.rg-table tr:last-child td{border-bottom:none}
.rg-salt-name,.rg-nut{color:var(--text2)}
.rg-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.rg-strong{font-weight:700;color:#f0f6fc}
.rg-ok{color:var(--green)}
.rg-under{color:var(--amber)}
.rg-over{color:var(--blue)}
.rg-trace td{color:#6e7681}
.rg-trace .rg-nut{color:#6e7681}
.rg-sched-note{font-size:var(--fs-sm);color:var(--muted);margin-top:8px;line-height:1.5}
.rg-units{font-size:var(--fs-xs);color:var(--faint);margin-top:8px;line-height:1.5}
.rg-profile-label{margin-top:24px;margin-bottom:2px;font-size:.95rem;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0}
.rg-profile-label::before{display:none}
.rg-empty{font-size:var(--fs-sm);color:var(--faint);padding:16px 4px}
.rg-warnings{margin-top:10px;display:flex;flex-direction:column;gap:8px}
/* stock-solution mode */
.rg-hidden{display:none}
.rg-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.rg-form-seg{margin-bottom:0;width:auto;flex:0 0 auto}
.rg-form-seg .rg-seg-btn{flex:0 1 auto}
.rg-stock-inputs{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rg-stock-field{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);color:var(--faint)}
.rg-stock-in{display:inline-flex;align-items:center;gap:6px}
.rg-stock-in .tinput{width:84px}
.rg-stock-unit{font-size:var(--fs-xs);color:var(--faint)}
.rg-bottle{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:12px}
.rg-bottle-dry{border-style:dashed}
.rg-bottle-head{font-size:var(--fs-sm);font-weight:700;color:var(--text);margin-bottom:6px}
.rg-bottle-recipe{font-size:var(--fs-sm);color:var(--muted);margin-bottom:8px;line-height:1.5}
.rg-bottle .rg-table{margin-bottom:8px}
.rg-bottle-dose{font-size:var(--fs-sm);color:var(--text2);line-height:1.5}
.rg-bottle-dose strong{color:#f0f6fc}
.rg-bottle-shelf{font-size:var(--fs-xs);color:var(--faint);margin-top:8px;line-height:1.5}
.rg-bottle-warn{margin-top:8px}

/* ── FERTILISER DOSING — beginner-first redesign ── */
.dz-hidden{display:none!important}
/* Numbered, prominent steps so the process is obvious */
.dz-step{display:flex;align-items:center;gap:11px;font-size:1rem;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0;margin:0 0 8px}
.dz-step-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#0d1117;font-size:.85rem;font-weight:800;flex:0 0 auto}
.dz-step-recipe .dz-step-n{background:var(--green)}
.dz-step2{margin-top:34px}
.dz-hint{color:var(--muted);font-size:.84rem;line-height:1.5;margin:0 2px 14px}
.dz-mode{margin-bottom:16px}
.dz-levels{margin-top:0}
.dz-advanced{display:none;margin-top:2px}
#dz-root.dz-adv-on .dz-simple{display:none}
#dz-root.dz-adv-on .dz-advanced{display:block}
.dz-field{margin-top:18px}
.dz-field-lbl{display:block;font-size:var(--fs-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}
.dz-seg{margin-bottom:0}
.dz-seg .rg-seg-btn{padding:10px 14px;font-size:.9rem}
/* Focus the dosing + water-change tools in a readable column rather than the full 1280px */
.tools-section.dz,.tools-section.dz-guide{max-width:880px;margin-left:auto;margin-right:auto}
.dz-tank{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:22px;padding:16px 18px;background:var(--bg2);border:1px solid var(--border);border-radius:12px}
.dz-vol{display:flex;align-items:baseline;gap:7px}
.dz-vol-lbl{font-size:var(--fs-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.dz-vol-n{font-size:1.3rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.dz-toggles{margin-left:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start;width:100%;padding-top:14px;border-top:1px solid var(--border)}
.dz-toggles .dz-toggle{margin-left:0}
.dz-toggle-hint{color:var(--faint);font-size:.78rem}
@media(max-width:640px){.dz-toggles{margin-left:0;width:100%}}
.dz-toggle{display:inline-flex;align-items:flex-start;gap:11px;margin-left:auto;font-size:.85rem;color:var(--text2);cursor:pointer;user-select:none;line-height:1.35}
.dz-toggle input{position:absolute;opacity:0;width:0;height:0}
.dz-toggle .dz-sw{margin-top:1px}
.dz-toggle-txt{display:flex;flex-direction:column;gap:3px}
.dz-toggle-main{color:var(--text);font-size:.9rem}
.dz-toggle-sub{color:var(--faint);font-size:.78rem;line-height:1.45}
/* Tank volume: inline edit affordance */
.dz-vol{flex-wrap:wrap}
.dz-vol-sync{font-size:var(--fs-xs);color:var(--faint)}
.dz-edit{background:none;border:none;color:var(--blue);font-size:.78rem;font-weight:600;cursor:pointer;padding:0;font-family:inherit;text-decoration:underline}
.dz-vol-edit-wrap{display:inline-flex;align-items:center;gap:6px}
.dz-vol-input{width:90px}
.dz-vol-unit{font-size:.85rem;color:var(--muted)}
.dz-sw{width:38px;height:22px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border2);position:relative;flex:0 0 auto;transition:background .15s,border-color .15s}
.dz-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:.15s}
.dz-toggle input:checked + .dz-sw{background:rgba(88,166,255,.35);border-color:var(--blue)}
.dz-toggle input:checked + .dz-sw::after{left:18px;background:var(--blue)}
@media(max-width:640px){.dz-toggle{margin-left:0}}

.dz-recipe{margin-top:24px}
.dz-recipe-h{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:12px}
.dz-bottle{background:var(--bg);border:1px solid var(--border2);border-left:4px solid var(--blue);border-radius:11px;padding:14px 16px;margin-bottom:12px}
.dz-bottle.trace{border-left-color:var(--green)}
.dz-bottle.dry{border-left-color:var(--amber);border-style:dashed}
.dz-bottle-h{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:8px}
.dz-line{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:6px 0;font-size:.87rem;line-height:1.5;align-items:baseline}
.dz-line + .dz-line{border-top:1px solid var(--border)}
.dz-line .k{font-size:var(--fs-xs);font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;padding-top:1px}
.dz-line .v{color:var(--text2)}
.dz-line .v b,.dz-line .v strong{color:var(--text)}
.dz-muted{color:var(--muted)}
.dz-chip{display:inline-block;background:var(--bg2);border:1px solid var(--border2);border-radius:7px;padding:2px 8px;margin:2px 5px 2px 0;font-size:.82rem;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.dz-shelf{font-size:var(--fs-xs);color:var(--faint);margin-top:8px;line-height:1.5}
.dz-desc{color:var(--text2);font-size:.88rem;line-height:1.55;margin:12px 2px 0}
.dz-delivered-intro{margin-top:2px;margin-bottom:12px}
/* Mix: one salt per line for maximum clarity */
.dz-mixlist{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.dz-mixrow{display:flex;justify-content:space-between;align-items:center;max-width:340px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:6px 12px;font-size:.88rem}
.dz-mixrow .s{color:var(--text2)}
.dz-mixrow b{color:var(--text);font-variant-numeric:tabular-nums}
/* Typical-range column in the 'This delivers' table */
.rg-prof-table th:last-child,.rg-prof-table td:last-child{text-align:right}
.rg-range{color:var(--muted);font-variant-numeric:tabular-nums}
/* Intensity pill (custom targets): cool Low -> warm Full-EI, so effort reads at a glance */
.rg-band{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.02em;line-height:1.45;white-space:nowrap}
.rg-band-0{background:rgba(139,148,158,.16);color:var(--muted)}
.rg-band-1{background:rgba(var(--accent-blue),.15);color:var(--blue)}
.rg-band-2{background:rgba(var(--accent-green),.16);color:var(--green)}
.rg-band-3{background:rgba(var(--accent-amber),.16);color:var(--amber)}
.rg-band-4{background:rgba(var(--accent-amber),.26);color:var(--amber)}
.rg-band-5{background:rgba(248,81,73,.18);color:var(--danger)}
.dz-mixtip{font-size:var(--fs-xs);color:var(--faint);line-height:1.5;margin-top:12px}
.dz-warn{margin-top:8px}
.dz-delivered{margin-top:16px}

.dz-adv{margin-top:20px;border-top:1px solid var(--border);padding-top:14px}
.dz-adv-sum{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--faint);list-style:none;display:flex;align-items:center;gap:8px}
.dz-adv-sum::-webkit-details-marker{display:none}
.dz-adv-sum .dds-chev{transition:transform .15s}
.dz-adv[open] .dz-adv-sum .dds-chev{transform:rotate(90deg)}
.dz-adv-body{margin-top:16px}
.dz-adv-body .rule{margin:16px 0}

/* Water change calculator (guided rebuild, shares the dz language) */
.wc-hidden{display:none}
.wc-param-wrap{margin-bottom:16px}
.wc-param-wrap .tselect{width:100%}
.wc-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:2px}
@media(max-width:640px){.wc-two{grid-template-columns:1fr}}
.wc-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.wc-field-lbl{font-size:var(--fs-xs);font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.05em}
.wc-field .tinput{width:100%}
.wc-hero{background:var(--bg);border:1px solid var(--border2);border-left:4px solid var(--blue);border-radius:11px;padding:18px 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.wc-hero-main{display:flex;align-items:baseline;gap:8px}
.wc-hero-num{font-size:2.6rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.wc-hero-unit{font-size:1rem;color:var(--muted)}
.wc-hero-meta{display:flex;flex-direction:column;gap:5px}
.wc-hero-sub{font-size:.92rem;color:var(--text2)}
.wc-hero-sub b{color:var(--text);font-variant-numeric:tabular-nums}
.wc-dir{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-weight:600}
.wc-after{font-size:.85rem;color:var(--muted)}
.wc-after b{color:var(--text);font-variant-numeric:tabular-nums}
.wc-multi{margin-top:16px;background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:14px 16px}
.wc-multi-h{font-size:.9rem;font-weight:700;color:var(--text)}
.wc-multi table{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:8px}
.wc-multi th{text-align:left;font-size:var(--fs-xs);color:var(--faint);text-transform:uppercase;letter-spacing:.04em;padding:6px 8px;font-weight:700}
.wc-multi th:last-child,.wc-multi td:last-child{text-align:right}
.wc-multi td{padding:7px 8px;border-top:1px solid var(--border);color:var(--text2);font-variant-numeric:tabular-nums}
.wc-multi .wc-num{color:var(--blue);font-weight:600}
.wc-multi .wc-fin{color:var(--faint)}

.dz-guide .tools-title{margin-bottom:16px}
.dz-guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
@media(max-width:640px){.dz-guide-grid{grid-template-columns:1fr}}
.dz-guide-salt{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:3px}
.dz-guide-role{font-size:.84rem;color:var(--text2);line-height:1.55}
.dz-guide-role strong{color:var(--text)}
.dz-guide-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:.84rem;color:var(--muted);line-height:1.65}
.dz-guide-note strong{color:var(--text2)}

/* ── Setup wizard (moved from inline <style>, tokenised) ── */
.modal-wizard{max-width:500px}
.modal-wizard .mw-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--faint);font-size:20px;cursor:pointer;padding:2px 8px;border-radius:4px;line-height:1}
.modal-wizard .mw-close:hover{color:var(--text);background:var(--border)}
.wiz-steps{display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.wiz-ind{width:28px;height:28px;border-radius:50%;background:var(--border);border:2px solid var(--border2);color:var(--faint);display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:600;flex-shrink:0;transition:all .2s}
.wiz-ind.wi-active{background:var(--btn-primary);border-color:var(--blue);color:#fff}
.wiz-ind.wi-done{background:var(--green);border-color:var(--green);color:#fff}
.wiz-line{flex:1;height:2px;background:var(--border2);max-width:56px}
.wiz-lbl{display:block;font-size:var(--fs-sm);color:var(--text2);margin:13px 0 5px;font-weight:500}
.wiz-note{font-size:var(--fs-xs);color:var(--faint);font-weight:400;margin-left:5px}
.wiz-opt{font-size:var(--fs-xs);color:var(--faint);font-weight:400;margin-left:5px;background:var(--border);padding:1px 5px;border-radius:4px}
.wiz-pair{display:flex;gap:8px;margin:5px 0}
.wiz-btn{flex:1;padding:9px 10px;border-radius:6px;border:1px solid var(--border2);background:var(--bg2);color:var(--muted);font-size:var(--fs-sm);cursor:pointer;text-align:center;transition:all .15s}
.wiz-btn.wb-on{border-color:var(--blue);background:rgba(var(--accent-blue),.13);color:var(--text)}
.wiz-nav{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:15px;border-top:1px solid var(--border)}
.wiz-nav #wiz-next{margin-left:auto}

/* ── Sliding segmented indicator (Apple-style) ── */
.mode-toggle,.rg-seg{position:relative}
.seg-slider{position:absolute;top:3px;bottom:3px;left:0;width:0;border-radius:9px;background:var(--surface-2);box-shadow:0 1px 3px rgba(0,0,0,.4);transition:left .24s cubic-bezier(.4,0,.2,1),width .24s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0}
.mode-toggle .mode-btn,.rg-seg .rg-seg-btn{position:relative;z-index:1}
.has-slider .mode-btn.active,.has-slider .rg-seg-btn.active{background:transparent;box-shadow:none}

/* ── Collapsible "Your salts" (progressive disclosure, open by default) ── */
.rg-salts-d{margin-bottom:4px}
.rg-salts-sum{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none}
.rg-salts-sum::-webkit-details-marker{display:none}
.rg-salts-sum .dds-chev{margin-left:auto;color:var(--faint);transition:transform .2s}
.rg-salts-d[open] .rg-salts-sum .dds-chev{transform:rotate(180deg)}

/* ── Mobile: bottom tab bar (native-iOS pattern) ──
   On phones the 5 tabs move to a fixed bottom bar (icon over label), thumb-reachable,
   which removes the horizontal-scroll overflow and reclaims vertical space at the top.
   Placed last so it overrides the earlier per-breakpoint .tab-btn padding/touch rules. */
@media(max-width:640px){
  .tab-bar{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;
    display:flex;gap:2px;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    overflow-x:hidden;max-width:100vw;
    border-top:1px solid var(--border);border-bottom:none;
    background:rgba(22,27,34,.92);
    -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
    box-shadow:0 -2px 16px rgba(0,0,0,.4);
    -webkit-mask-image:none;mask-image:none;
  }
  .tab-btn{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;margin:0;min-height:52px;
    border:none;border-bottom:none;border-radius:12px;
    font-size:10px;font-weight:600;line-height:1.15;
    white-space:nowrap;color:var(--faint);
  }
  .tab-btn .tab-icon-box{margin:0;vertical-align:baseline;flex-shrink:0}
  .tab-btn:hover{color:var(--faint)}
  .tab-btn.active{color:var(--text);border-bottom:none;background:var(--surface-2)}
  /* content must clear the fixed bottom bar */
  .tab-panel.active{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
}
/* Bottom-anchored toasts must float above the mobile bottom tab bar, not over it */
@media(max-width:640px){
  .save-toast,.aq-remote-change,.aq-nudge{bottom:calc(74px + env(safe-area-inset-bottom))}
}

/* ── Dashboard content visibility (class-based, so it can be a flex column on mobile) ── */
#dashboard-content{display:block}
#dashboard-content.dc-hidden{display:none!important}
.ph-sticky{display:none}

/* ── Phase 1 mobile (pH Monitor): task-first reorder + sticky key-stat strip ──
   On phones the reading log jumps to the top (under the alerts), charts follow, then the
   read-only summary/stats. A slim sticky strip keeps Latest pH + CO2 on screen while you log.
   overflow-x on .container/.tab-panel is `clip` (not hidden) so position:sticky isn't broken. */
@media(max-width:640px){
  #dashboard-content:not(.dc-hidden){display:flex;flex-direction:column}
  /* All overrides are qualified with #dashboard-content > … so they out-specify the base rule */
  #dashboard-content > *{order:3}
  #dashboard-content > #ph-sticky{order:-1}
  #dashboard-content > #alert-danger,#dashboard-content > #alert-over,#dashboard-content > #alert-mode{order:0}
  #dashboard-content > .log-section{order:1}
  #dashboard-content > .two-col{order:2}

  /* position:sticky only binds to the nearest scroll-container ancestor. Here body.dash,
     .container and .tab-panel were all scroll containers between the strip and <html> (the
     real scroller), so the strip never pinned. Neutralise them on mobile — html{overflow-x:
     hidden} still guards against page-level horizontal scroll — so the strip binds to <html>. */
  body.dash,#tab-ph.tab-panel.active,#tab-ro.tab-panel.active,.container{overflow-x:visible}
  .ph-sticky{
    display:flex;gap:22px;align-items:center;
    position:sticky;top:calc(var(--banner-h,0px) + 60px);z-index:39;
    margin:0 -16px 12px;padding:14px 16px;
    background:rgba(13,17,23,.92);
    -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid var(--border);
  }
  .phs-item{display:flex;flex-direction:column;gap:3px;line-height:1}
  .phs-k{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
  .phs-v{font-size:19px;font-weight:700;color:var(--text);line-height:1}
}

/* ═══════════════════ SETUP WIZARD v2 (Apple-quality, sectioned) ═══════════════════
   Premium tank setup flow: sticky header (progress) + scrollable body + sticky footer.
   Captures the numeric core (steps 1–3) plus optional context (steps 4–5). */
.wiz-overlay{align-items:center;justify-content:center;padding:16px}
.wiz2{display:flex;flex-direction:column;width:560px;max-width:100%;max-height:92vh;overflow:hidden;
  background:linear-gradient(180deg,var(--surface-2,#1c2128),var(--bg2));
  border:1px solid var(--border2);border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(1,4,9,.9), inset 0 1px 0 rgba(255,255,255,.03)}
.wiz2 [hidden]{display:none!important}   /* author display rules must never override [hidden] */

/* Header */
.wiz2-head{flex:0 0 auto;padding:20px 24px 16px;border-bottom:1px solid var(--border)}
.wiz2-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.wiz2-eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.wiz2-close{background:none;border:none;color:var(--faint);font-size:18px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px;transition:color .15s,background .15s}
.wiz2-close:hover{color:var(--text);background:var(--border)}
.wiz2-progress{display:flex;gap:6px}
.wiz2-seg{flex:1;height:5px;border-radius:99px;background:var(--border2);transition:background .3s}
.wiz2-seg.is-done{background:rgb(var(--accent-blue))}
.wiz2-seg.is-current{background:linear-gradient(90deg,rgb(var(--accent-blue)),color-mix(in srgb,rgb(var(--accent-blue)) 55%,transparent))}
.wiz2-progress-cap{margin-top:10px;font-size:var(--fs-xs);color:var(--muted);font-weight:500}
.wiz2-progress-cap span:last-child{color:var(--text2)}

/* Body + steps */
.wiz2-body{flex:1 1 auto;overflow-y:auto;padding:22px 24px 24px}
.wiz2-step{display:none}
.wiz2-step.is-active{display:block;animation:wiz2in .28s ease}
@keyframes wiz2in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wiz2-step.is-active{animation:none}}
.wiz2-title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:0 0 8px;line-height:1.2}
.wiz2-optional{display:inline-block;vertical-align:middle;margin-left:8px;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--border);border-radius:99px;padding:3px 9px}
.wiz2-sub{font-size:var(--fs-sm);color:var(--faint);line-height:1.6;margin:0 0 22px}
.wiz2-sub strong{color:var(--text2)}

/* Fields */
.wiz2-fields{display:flex;flex-direction:column;gap:16px}
.wiz2-field{display:flex;flex-direction:column;gap:7px}
.wiz2-lbl{font-size:var(--fs-sm);font-weight:600;color:var(--text);display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.wiz2-unit{font-size:.72rem;font-weight:500;color:var(--muted)}
.wiz2-opt{font-size:.72rem;font-weight:500;color:var(--faint)}
.wiz2-val{margin-left:auto;font-size:.78rem;font-weight:600;color:rgb(var(--accent-blue));white-space:nowrap}
.wiz2-hint{font-size:.76rem;color:var(--faint);line-height:1.5}
.wiz2-input,.wiz2-textarea{width:100%;box-sizing:border-box;background:var(--field-bg);color:var(--text);
  border:1px solid var(--field-border);border-radius:12px;font-size:var(--fs-base);font-family:inherit;
  padding:13px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.wiz2-textarea{resize:vertical;line-height:1.5;min-height:64px}
.wiz2-input:hover:not(:focus),.wiz2-textarea:hover:not(:focus){border-color:var(--field-border-hover)}
.wiz2-input:focus,.wiz2-textarea:focus{border-color:var(--blue);box-shadow:var(--focus-ring)}
.wiz2-input::placeholder,.wiz2-textarea::placeholder{color:var(--faint)}
.wiz2-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wiz2-range{width:100%;accent-color:rgb(var(--accent-blue));cursor:pointer}

/* Segmented controls */
.wiz2-seg-ctl{display:flex;gap:8px;flex-wrap:wrap}
.wiz2-seg-btn{flex:1 1 auto;min-width:120px;padding:12px 14px;border-radius:12px;border:1px solid var(--field-border);
  background:var(--field-bg);color:var(--muted);font-size:var(--fs-sm);font-weight:600;font-family:inherit;cursor:pointer;
  text-align:center;transition:border-color .15s,background .15s,color .15s}
.wiz2-seg-btn:hover{color:var(--text);border-color:var(--field-border-hover)}
.wiz2-seg-btn.is-on{border-color:rgb(var(--accent-blue));background:color-mix(in srgb,rgb(var(--accent-blue)) 15%,transparent);color:var(--text)}

/* Reveal groups + notes */
.wiz2-reveal{display:flex;flex-direction:column;gap:16px}
.wiz2-note,.wiz2-callout{font-size:.8rem;line-height:1.55;border-radius:12px;padding:12px 14px}
.wiz2-note{color:var(--muted);background:var(--bg);border:1px solid var(--border2)}
.wiz2-note strong{color:var(--text2)}
.wiz2-callout{color:var(--text2);background:color-mix(in srgb,rgb(var(--accent-blue)) 10%,transparent);border:1px solid color-mix(in srgb,rgb(var(--accent-blue)) 30%,transparent)}

/* Footer nav */
.wiz2-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:16px 24px;border-top:1px solid var(--border)}
.wiz2-back{background:none;border:none;color:var(--muted);font-size:var(--fs-sm);font-weight:600;font-family:inherit;cursor:pointer;padding:10px 6px;border-radius:8px;transition:color .15s}
.wiz2-back:hover{color:var(--text)}
.wiz2-skip{margin-left:auto;background:none;border:none;color:var(--faint);font-size:var(--fs-sm);font-weight:500;font-family:inherit;cursor:pointer;padding:10px 8px;border-radius:8px;transition:color .15s}
.wiz2-skip:hover{color:var(--text2);text-decoration:underline}
.wiz2-next{background:var(--btn-primary);color:#fff;border:none;border-radius:99px;font-size:var(--fs-sm);font-weight:600;font-family:inherit;cursor:pointer;padding:12px 24px;transition:opacity .15s}
.wiz2-next:hover{opacity:.9}
.wiz2-next:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media(max-width:540px){
  .wiz-overlay{padding:0;align-items:stretch;justify-content:stretch}
  .wiz2{width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0;border:none}
  /* Full-screen sheet: keep header/footer clear of the notch + home indicator */
  .wiz2-head{padding-top:calc(20px + env(safe-area-inset-top));padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}
  .wiz2-body{padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}
  .wiz2-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom));padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}
  .wiz2-two{grid-template-columns:1fr}
  .wiz2-seg-ctl{flex-direction:column}
  .wiz2-seg-btn{min-width:0}
  .wiz2-title{font-size:1.35rem}
}