/* ============================================================
   Bella Vita Pool — merged stylesheet.
   Shared shell rules first; page-specific rules are scoped under
   .page-water / .page-tasks because the two design files reuse
   several class names (.pill, .r, .btn, .sect-h) with different
   meanings. Rules are verbatim from the design files — do not
   "improve" them.
   ============================================================ */
:root{
  /* ---- Forgotten Pools brand tokens (matches forgottenpools.com) ---- */
  --accent-a:#7FE9F5;
  --accent-b:#0EA5B7;
  --good:#34D399;
  --good-bg:rgba(52,211,153,0.14);
  --warn:#F2B84B;
  --warn-bg:rgba(242,184,75,0.14);
  --danger:#FB7185;
  --danger-bg:rgba(251,113,133,0.14);
  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",serif;

  --bg:#05141E;
  --bar:#081A26;
  --card:#0F2530;
  --card2:#16303C;
  --line:rgba(234,246,249,0.09);
  --line2:rgba(234,246,249,0.16);
  --tx:#EAF6F9;
  --tx2:rgba(234,246,249,0.62);
  --tx3:rgba(234,246,249,0.38);
  --blue:var(--accent-b);
  --green:var(--good);
  --green-d:#155239;
  --amber:var(--warn);
  --amber-d:#5C4116;
  --red:var(--danger);
  --red-d:#5C2430;
  --cyan:var(--accent-a);
  --orange:var(--warn);
  --purple:var(--accent-b);
  --indigo:var(--accent-b);
  --magenta:var(--danger);
  --yellow:var(--warn);
  --resort:var(--accent-a);
  --apple-ring-move:var(--danger);
  --apple-ring-move-end:var(--danger);
  --apple-ring-move-track:var(--danger-bg);
  --apple-ring-exercise:var(--good);
  --apple-ring-exercise-end:var(--good);
  --apple-ring-exercise-track:var(--good-bg);
  --apple-ring-stand:var(--accent-a);
  --apple-ring-stand-end:var(--accent-b);
  --apple-ring-stand-track:rgba(127,233,245,0.16);
  --apple-ring-symbol-color:#04222B;
  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --squircle-radius:18px;
}
body.theme-light {
  --bg:#F4FBFC;
  --bar:#FFFFFF;
  --card:#FFFFFF;
  --card2:#EAF6F4;
  --line:rgba(5,20,30,0.08);
  --line2:rgba(5,20,30,0.14);
  --tx:#05141E;
  --tx2:rgba(5,20,30,0.62);
  --tx3:rgba(5,20,30,0.42);
  --good:#0E9F6E;
  --good-bg:rgba(14,159,110,0.12);
  --warn:#B4790E;
  --warn-bg:rgba(180,121,14,0.12);
  --danger:#DC2626;
  --danger-bg:rgba(220,38,38,0.12);
  --blue:var(--accent-b);
  --green:var(--good);
  --amber:var(--warn);
  --red:var(--danger);
  --cyan:var(--accent-b);
  --resort:var(--accent-b);
  --apple-ring-move:var(--danger);
  --apple-ring-move-end:var(--danger);
  --apple-ring-move-track:var(--danger-bg);
  --apple-ring-exercise:var(--good);
  --apple-ring-exercise-end:var(--good);
  --apple-ring-exercise-track:var(--good-bg);
  --apple-ring-stand:var(--accent-b);
  --apple-ring-stand-end:var(--accent-b);
  --apple-ring-stand-track:rgba(14,165,183,0.12);
  --apple-ring-symbol-color:#FFFFFF;
}
.page-tasks{
  --green-d:#155239; --amber-d:#5C4116; --red-d:#5C2430;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--f);font-size:13px;-webkit-font-smoothing:antialiased}
button{font-family:inherit}

/* ---------- Apple Health Category Badges & Color Tokens ---------- */
.cat-icon-bg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cat-icon-bg svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.cat-cyan { background: rgba(127, 233, 245, 0.16); color: var(--accent-a, #7FE9F5); }
.cat-orange { background: var(--warn-bg); color: var(--warn); }
.cat-amber { background: var(--warn-bg); color: var(--warn); }
.cat-blue { background: rgba(14, 165, 183, 0.16); color: var(--accent-b, #0EA5B7); }
.cat-indigo { background: rgba(14, 165, 183, 0.16); color: var(--accent-b, #0EA5B7); }
.cat-purple { background: rgba(14, 165, 183, 0.16); color: var(--accent-b, #0EA5B7); }
.cat-mint { background: var(--good-bg); color: var(--good); }
.cat-red { background: var(--danger-bg); color: var(--danger); }
.cat-gray { background: rgba(234, 246, 249, 0.14); color: var(--tx2); }

/* ---------- Apple Health Sidebar (Expandable & Collapsible) ---------- */
.apple-sidebar {
  width: 250px;
  flex: 0 0 250px;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 44px;
  align-self: flex-start;
  height: calc(100vh - 44px);
  overflow-y: auto;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), flex 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.apple-sidebar.collapsed {
  width: 64px;
  flex: 0 0 64px;
  padding: 16px 8px;
}
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.sidebar-toggle-btn {
  background: none;
  border: none;
  color: var(--tx2);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-toggle-btn:hover { background: var(--card2); color: var(--tx); }
.sidebar-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--tx3);
  padding: 8px 8px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.sidebar-section-title .chevron {
  font-size: 10px;
  transition: transform 0.2s ease;
}
.sidebar-section-title.closed .chevron {
  transform: rotate(-90deg);
}
.apple-sidebar.collapsed .sidebar-section-title,
.apple-sidebar.collapsed .nav-label,
.apple-sidebar.collapsed .sidebar-header-title {
  display: none;
}
.sidebar-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 10px;
  color: var(--tx);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s ease;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.sidebar-nav-item:hover { background: var(--card2); }
.sidebar-nav-item.active {
  background: var(--blue);
  color: #FFFFFF;
  font-weight: 600;
}
.sidebar-nav-item.active .cat-icon-bg {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* ---------- Profile Atmospheric Header Banner ---------- */
.apple-profile-banner {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.12) 0%, rgba(94, 92, 230, 0.08) 50%, rgba(0, 0, 0, 0) 100%);
  border: 1px solid var(--line);
  border-radius: var(--squircle-radius);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.profile-user-info {
  display: flex;
  align-items: center;
  gap: 14px;
}
.user-avatar-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-a, #7FE9F5), var(--accent-b, #0EA5B7));
  color: #04222B;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.user-details h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
}
.user-details .meta {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--tx2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.apple-btn-primary {
  background: var(--blue);
  color: #FFFFFF;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.15s ease;
}
.apple-btn-primary:hover { opacity: 0.9; }

/* ---------- Apple Health Favorites Tile Grid ---------- */
.apple-fav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .apple-fav-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .apple-fav-grid { grid-template-columns: 1fr; } }

.apple-fav-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--squircle-radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 110px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.apple-fav-tile:hover {
  background: var(--card2);
  transform: translateY(-1px);
}
.apple-fav-tile.static {
  cursor: default;
}
.apple-fav-tile.static:hover {
  background: var(--card);
  transform: none;
}
.apple-fav-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tile-category {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tx2);
}
.tile-meta-date {
  font-size: 12px;
  color: var(--tx3);
  display: flex;
  align-items: center;
  gap: 2px;
}
.apple-fav-tile-val {
  font-family: var(--db-numeral, inherit);
  font-size: 32px;
  font-weight: 800;
  color: var(--tx);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.apple-fav-tile-val span {
  font-family: var(--db-numeral, inherit);
  font-size: 16px;
  font-weight: 700;
  color: var(--tx2);
  margin-left: 4px;
}
.apple-fav-tile-sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--tx2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.apple-status-pill {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.apple-status-pill.g { background: var(--good-bg); color: var(--good); }
.apple-status-pill.a { background: var(--warn-bg); color: var(--warn); }
.apple-status-pill.r { background: var(--danger-bg); color: var(--danger); }
.apple-status-pill.resort { background: rgba(127, 233, 245, 0.18); color: var(--accent-a, #7FE9F5); font-weight: 700; }

/* ---------- Swift Charts & Apple Health Subpage Components ---------- */
.swift-chart-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--squircle-radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.swift-timeframe-capsule {
  display: inline-flex;
  background: var(--card2);
  border-radius: 18px;
  padding: 3px;
  gap: 2px;
}
.swift-tf-btn {
  background: none;
  border: none;
  color: var(--tx2);
  padding: 5px 14px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.swift-tf-btn.active {
  background: var(--card);
  color: var(--tx);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.apple-stats-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--squircle-radius);
  padding: 16px;
  margin-bottom: 16px;
}
@media (max-width: 768px) { .apple-stats-matrix { grid-template-columns: repeat(2, 1fr); } }
.stat-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-box .lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tx3);
}
.stat-box .val {
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  font-variant-numeric: tabular-nums;
}

.apple-highlight-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--squircle-radius);
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.apple-highlight-card h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.apple-highlight-card p {
  margin: 0;
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.4;
}

/* Multi-stage horizontal operating timeline */
.stage-timeline-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}
.stage-timeline-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stage-label {
  width: 90px;
  flex: 0 0 90px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx2);
}
.stage-track {
  flex: 1;
  height: 24px;
  background: var(--card2);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
}
.stage-block {
  height: 100%;
  border-right: 1px solid rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #FFF;
}
.stage-block.off { background: rgba(142, 142, 147, 0.2); color: var(--tx3); }
.stage-block.low { background: rgba(10, 132, 255, 0.6); }
.stage-block.high { background: rgba(94, 92, 230, 0.85); }
.stage-block.heat { background: rgba(255, 69, 58, 0.85); }



/* ---------- top bar (shared shell) ---------- */
.topbar{display:flex;align-items:center;height:44px;background:var(--bar);border-bottom:1px solid var(--line);padding:0 12px;gap:2px;position:sticky;top:0;z-index:30}
.tb-site{display:flex;align-items:center;gap:8px;padding:0 14px 0 4px;color:var(--tx2)}
.tb-site .live{width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ---------- shell (shared) ---------- */
.shell{display:flex;min-height:calc(100vh - 44px)}

/* left rail — primary page navigation (UniFi-style icon sidebar) */
.rail{width:60px;flex:0 0 60px;background:var(--bar);border-right:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:sticky;top:44px;align-self:flex-start;height:calc(100vh - 44px)}
.rail-top,.rail-bottom{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.rail-item{position:relative;width:100%;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-left:3px solid transparent;color:var(--tx3);cursor:pointer;padding:0}
.rail-item svg{width:20px;height:20px;flex:0 0 20px}
.rail-item:hover{color:var(--tx)}
.rail-item[aria-selected="true"]{color:var(--accent-b, #0EA5B7);border-left-color:var(--accent-b, #0EA5B7);background:rgba(14,165,183,.10)}
.rail-badge{position:absolute;top:6px;right:12px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:var(--red);color:#fff;font-size:9px;font-weight:700;line-height:14px;text-align:center}
.rail-tooltip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateX(-6px) translateY(-50%);background:var(--card2);border:1px solid var(--line2);color:var(--tx);font-size:11.5px;font-weight:600;padding:6px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;box-shadow:0 8px 20px rgba(0,0,0,.4);z-index:50}
.rail-item:hover .rail-tooltip{opacity:1;transform:translateX(0) translateY(-50%)}

.body{flex:1;display:flex;gap:14px;padding:14px;padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));padding-bottom:max(14px, env(safe-area-inset-bottom));
  align-items:flex-start;min-width:0}
.side{width:284px;flex:0 0 284px;display:flex;flex-direction:column;gap:12px}

.card{background:var(--card);border:1px solid var(--line);border-radius:8px}

@media (max-width:1000px){
  .rail{position:static;height:auto}
  .body{flex-direction:column;align-items:stretch}
  .side{width:100%;flex:1 1 auto}
  .topbar{overflow-x:auto;scrollbar-width:none}
  .topbar::-webkit-scrollbar{display:none}
  .tb-site{white-space:nowrap;flex:0 0 auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================================================
   WATER page
   ============================================================ */
.page-water .main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.page-water .pad{padding:14px 16px}

.page-water .dev{display:flex;gap:12px;align-items:flex-start;padding:14px 16px 12px}
.page-water .dev .thumb{width:34px;height:52px;border-radius:5px;border:1px solid var(--line2);background:linear-gradient(180deg,#2A2B30,#1E1F23);position:relative;flex:0 0 34px}
.page-water .dev .thumb::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:7px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--blue)}
.page-water .dev h2{margin:0 0 8px;font-size:14px;font-weight:700}
.page-water .counts{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--tx2);font-size:11.5px}
.page-water .counts span{display:flex;align-items:center;gap:4px}
.page-water .counts b{color:var(--tx);font-weight:700}

.page-water .rows{padding:0 16px 14px}
.page-water .r{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12.5px;gap:10px}
.page-water .r .k{color:var(--tx2)}
.page-water .r .v{color:var(--tx);text-align:right}
.page-water .r .v.g{color:var(--green)}
.page-water .r .v.b{color:var(--blue)}
.page-water .r .v.a{color:var(--amber)}
.page-water .r .v.m{color:var(--tx2)}
.page-water .sep{height:1px;background:var(--line);margin:10px 0}

.page-water .spark{padding:4px 16px 0}
.page-water .pills{display:flex;gap:6px;padding:10px 16px 14px}
.page-water .pill{flex:1;background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:7px 6px;text-align:center;font-size:11.5px;color:var(--tx2)}
.page-water .pill b{display:block;color:var(--tx);font-size:12.5px;font-weight:700;margin-top:2px}
.page-water .pill .d{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:4px}

.page-water .btns{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.page-water .btn{width:100%;background:transparent;border:1px solid var(--line2);color:var(--blue);border-radius:6px;padding:9px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.page-water .btn:hover{background:rgba(0,144,255,.07);border-color:var(--blue)}
.page-water .btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.page-water .sect-h{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 0;font-size:13px;font-weight:700}
.page-water .sect-h .more{color:var(--blue);font-size:12px;cursor:pointer}

.page-water .chwrap{padding:4px 16px 14px}
.page-water .chrow{display:flex;justify-content:space-between;font-size:12px;color:var(--tx2);padding:5px 0}
.page-water .chrow b{color:var(--tx);font-weight:400}
.page-water .bars6{display:flex;gap:4px;padding:6px 16px 16px}
.page-water .bars6 div{height:26px;border-radius:3px;flex:1;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff}

.page-water .chart-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px}
.page-water .pick{display:flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:6px 10px;font-size:12.5px}
.page-water .pick .lbl{color:var(--tx2)}
.page-water .pick .val{color:var(--tx);font-weight:700}
.page-water .tabs{display:flex;gap:2px;font-size:12.5px}
.page-water .tabs button{background:none;border:0;color:var(--tx3);padding:6px 10px;cursor:pointer;border-radius:5px}
.page-water .tabs button[aria-selected="true"]{color:var(--tx);background:var(--card2)}
.page-water .spacer{flex:1}
.page-water .legend{display:flex;gap:10px;flex-wrap:wrap}
.page-water .lg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx2);cursor:pointer;user-select:none;padding:4px 2px}
.page-water .lg input{appearance:none;width:14px;height:14px;border:1.5px solid var(--line2);border-radius:3px;margin:0;cursor:pointer;position:relative}
.page-water .lg input:checked{background:var(--dot, var(--blue));border-color:var(--dot, var(--blue))}
.page-water .lg input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.page-water .lg input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.page-water .lg .sw{width:14px;height:3px;border-radius:2px}
.page-water .lg.off{opacity:.5}
.page-water .lg.disabled{opacity:.4;cursor:not-allowed}
.page-water .lg.disabled input{cursor:not-allowed}
.page-water .ranges{display:flex;gap:1px}
.page-water .ranges button{background:none;border:0;color:var(--tx3);font-size:12px;padding:5px 8px;border-radius:4px;cursor:pointer}
.page-water .ranges button[aria-selected="true"]{color:var(--tx);background:var(--card2)}
.page-water #plot{display:block;width:100%}
.page-water .uptime{display:flex;align-items:center;gap:8px;padding:2px 14px 14px;color:var(--tx3);font-size:11px}
.page-water .uptime .track{flex:1;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--green) 0 62%,var(--amber) 62% 72%,var(--green) 72% 100%)}

.page-water .strips{display:flex;gap:26px;padding:14px 16px;overflow-x:auto}
.page-water .strip{min-width:0}
.page-water .strip h3{margin:0 0 10px;font-size:12.5px;font-weight:700;color:var(--tx)}
.page-water .items{display:flex;gap:10px}
.page-water .it{width:56px;text-align:center;flex:0 0 56px}
.page-water .it .box{height:48px;border-radius:8px;background:var(--card2);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;margin-bottom:5px}
.page-water .it .box .n{font-size:14px;font-weight:700;line-height:1}
.page-water .it .box .u{font-size:9px;color:var(--tx3)}
.page-water .it .cap{font-size:10.5px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-water .it.sel .box{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,144,255,.18)}
.page-water .it .box.g{border-color:rgba(59,208,123,.45)}
.page-water .it .box.a{border-color:rgba(242,178,62,.5)}
.page-water .it .box.r{border-color:rgba(240,74,92,.5)}
.page-water .it .box.m{border-style:dashed}

.page-water .scale-wrap{padding:12px 16px 18px}
.page-water .ok-line{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:42px}
.page-water .ok-line .tick{width:15px;height:15px;border-radius:50%;background:var(--green-d);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900}
.page-water .scale{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--red-d) 0%,var(--amber-d) 22%,var(--good) 42%,var(--good) 62%,var(--amber-d) 82%,var(--red-d) 100%);margin:0 6px}
.page-water .mk{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--green);border:2px solid var(--card);transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--line2)}
.page-water .mk.dim{background:var(--tx3)}
.page-water .mk .tag{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:10.5px;color:var(--tx2);white-space:nowrap}
.page-water .mk .tag.edge-l{left:0;transform:none}
.page-water .mk .tag.edge-r{left:auto;right:0;transform:none}
.page-water .ticks{display:flex;justify-content:space-between;margin:10px 6px 0;color:var(--tx3);font-size:11px}

/* ---------- v2 layout: system banner, KPI tiles, split view ---------- */
.page-water .sys-banner{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap}
.page-water .sys-banner h1{margin:0;font-size:17px;font-weight:900}
.page-water .sys-banner .sub{font-size:12px;color:var(--tx2);margin-top:2px}
.page-water .sys-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.page-water .status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:700;border:0;cursor:pointer;font-family:inherit}
.page-water .pill-wrap{position:relative;display:inline-block}
.page-water .pill-detail{position:absolute;top:calc(100% + 8px);right:0;z-index:30;width:400px;background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:14px 16px;font-size:12.5px;line-height:1.55;color:var(--tx2);box-shadow:0 14px 36px rgba(0,0,0,.65);display:none}
.page-water .pill-detail.show{display:block}
.page-water .pill-detail h4{margin:0 0 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tx3);font-weight:700;border-bottom:1px solid rgba(255,255,255,0.08);padding-bottom:6px}
.page-water .action-list{margin:0;padding:0;list-style:none}
.page-water .action-item{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.06)}
.page-water .action-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.page-water .action-head{font-size:13px;font-weight:700;color:var(--danger);margin-bottom:3px}
.page-water .action-why{font-size:12px;color:var(--tx2);margin-bottom:4px;line-height:1.4}
.page-water .action-dose{font-size:12.5px;color:var(--accent-a, #7FE9F5);font-weight:600;line-height:1.4;background:rgba(127,233,245,0.10);padding:6px 10px;border-radius:6px;margin-top:4px}
.page-water .pill-detail p{margin:0}
.page-water .pill-detail p.ok{color:var(--green)}
@media (max-width:1000px){ .page-water .pill-detail{width:min(400px,90vw);right:auto;left:0} }
.page-water .status-pill .sdot{width:8px;height:8px;border-radius:50%}
.page-water .status-pill.g{background:rgba(59,208,123,.1);color:var(--green)}
.page-water .status-pill.g .sdot{background:var(--green);box-shadow:0 0 8px var(--green)}
.page-water .status-pill.a{background:rgba(242,178,62,.12);color:var(--amber)}
.page-water .status-pill.a .sdot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.page-water .status-pill.r{background:rgba(240,74,92,.12);color:var(--red)}
.page-water .status-pill.r .sdot{background:var(--red);box-shadow:0 0 8px var(--red)}
.page-water .hw{display:flex;gap:6px;flex-wrap:wrap}
.page-water .hw span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:4px 10px}
.page-water .hw i{width:6px;height:6px;border-radius:50%;display:inline-block}
.page-water .hw .g{background:var(--green)} .page-water .hw .a{background:var(--amber)} .page-water .hw .r{background:var(--red)}
.page-water .cta{background:linear-gradient(180deg,var(--accent-a, #7FE9F5),var(--accent-b, #0EA5B7) 90%);color:#04222B;border:0;padding:9px 16px;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer}
.page-water .cta:hover{filter:brightness(1.06)}

.page-water .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.page-water .metric-card{background:var(--card);border:1px solid var(--line2);border-radius:10px;padding:13px 16px;position:relative;overflow:visible}
.page-water .metric-card.g{border-color:rgba(59,208,123,.55);box-shadow:0 0 12px rgba(59,208,123,.10)}
.page-water .metric-card.a{border-color:rgba(242,178,62,.65);box-shadow:0 0 12px rgba(242,178,62,.12)}
.page-water .metric-card.r{border-color:rgba(240,74,92,.65);box-shadow:0 0 12px rgba(240,74,92,.12)}
.page-water .metric-card .mdot{position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--line2)}
.page-water .metric-card.g .mdot{background:var(--green)} .page-water .metric-card.a .mdot{background:var(--amber)} .page-water .metric-card.r .mdot{background:var(--red)}
.page-water .metric-title{font-size:12px;color:var(--tx);font-weight:700}
.page-water .metric-value{font-size:24px;font-weight:700;margin:6px 0 3px}
.page-water .metric-value small{font-size:12px;font-weight:400;color:var(--tx2)}
.page-water .metric-sub{font-size:11px;color:var(--tx3)}
.page-water .metric-card.g .metric-sub{color:var(--green)} .page-water .metric-card.a .metric-sub{color:var(--amber)} .page-water .metric-card.r .metric-sub{color:var(--red)}

/* resort-grade: a brighter green glow layered on top of the safe/green
   state — never used in place of amber/red, purely a "you're doing better
   than required" cue. Kept in the green family (not gold) so it can't be
   mistaken for the amber warning state; the extra brightness + double-layer
   glow is what makes it read as "more," not just a duplicate of plain green. */
.page-water .metric-card.resort{border-color:var(--resort);box-shadow:0 0 10px rgba(57,255,176,.5),0 0 26px rgba(57,255,176,.3),0 0 0 1px rgba(57,255,176,.35) inset}
.page-water .metric-card.resort .mdot{background:var(--resort);box-shadow:0 0 9px var(--resort)}
.page-water .metric-card.resort .metric-sub{color:var(--resort)}

/* hover/focus tip: numbers for both the safe range and the resort-grade
   target, plus the one-line why. Shown on hover (desktop) or keyboard focus. */
.page-water .metric-tip{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:240px;max-width:300px;background:var(--card2);border:1px solid var(--line2);border-radius:8px;padding:10px 12px;font-family:var(--f);font-size:11.5px;line-height:1.5;font-weight:400;color:var(--tx2);text-align:left;box-shadow:0 14px 36px rgba(0,0,0,.55);opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .15s ease,transform .15s ease}
.page-water .metric-card:hover .metric-tip,
.page-water .metric-card:focus-visible .metric-tip{opacity:1;transform:translateY(0)}
.page-water .metric-tip .tip-row{display:flex;justify-content:space-between;gap:10px}
.page-water .metric-tip .tip-row span:first-child{color:var(--tx3)}
.page-water .metric-tip .resort-row{margin-bottom:6px}
.page-water .metric-tip .resort-row span:last-child{color:var(--resort);font-weight:700}
.page-water .metric-tip .why{margin-top:2px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.08);color:var(--tx3);font-style:italic}
.page-water .metric-tip .nudge{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.08);color:var(--cyan);font-weight:600;line-height:1.5}
.page-water .metric-tip .nudge strong{color:var(--tx)}
.page-water .metric-tip .lsi-note{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,0.08);color:var(--tx2);font-style:normal;line-height:1.5}
@media (max-width:1000px){ .page-water .metric-tip{left:auto;right:0} }
.page-water .hnum-row{display:flex;padding:14px 8px;border-bottom:1px solid var(--line)}
.page-water .hnum{flex:1;text-align:center;border-right:1px solid var(--line)}
.page-water .hnum:last-child{border-right:0}
.page-water .hnum b{display:block;font-size:24px;font-weight:900;line-height:1.1}
.page-water .hnum span{font-size:11px;color:var(--tx2)}

.page-water .main-layout{display:grid;grid-template-columns:2fr 1fr;gap:12px;align-items:start}
.page-water .atask{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:inherit;align-items:center}
.page-water .atask:last-child{border-bottom:0}
.page-water .atask:hover{background:var(--card2)}
.page-water .atask .lbl{white-space:nowrap;font-weight:700;font-size:11.5px}
.page-water .atask .lbl.r{color:var(--red)} .page-water .atask .lbl.a{color:var(--amber)} .page-water .atask .lbl.g{color:var(--tx3)}
.page-water .panel-h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:13px;font-weight:700;border-bottom:1px solid var(--line)}
.page-water .panel-h .hint{font-size:12px;color:var(--tx2);font-weight:400}
.page-water .panel-h .hint.r{color:var(--red);font-weight:700}

.page-water details.drawer summary{list-style:none;cursor:pointer;padding:13px 16px;font-size:13px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.page-water details.drawer summary::-webkit-details-marker{display:none}
.page-water details.drawer summary .chev{color:var(--tx3);transition:transform .15s}
.page-water details.drawer[open] summary .chev{transform:rotate(90deg)}
.page-water details.drawer .rows{columns:2;column-gap:34px}
.page-water details.drawer .rows .r{break-inside:avoid}
.deep-dive-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:16px;margin-top:14px}
@media (max-width:1000px){
  .page-water .main-layout{grid-template-columns:1fr}
  .page-water details.drawer .rows{columns:1}
}
@media (max-width:600px){
  .deep-dive-grid{grid-template-columns:1fr}
}

/* ============================================================
   TASKS page
   ============================================================ */
.page-tasks .main{flex:1;min-width:0;display:flex;gap:14px;align-items:flex-start}
.page-tasks .list{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.page-tasks .detail{width:390px;flex:0 0 390px;position:sticky;top:58px}

.page-tasks .sect-h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:13px;font-weight:700;border-bottom:1px solid var(--line)}
.page-tasks .sect-h .sub{font-weight:400;color:var(--tx3);font-size:12px}

.page-tasks .health{display:flex;padding:16px}
.page-tasks .hnum{flex:1;text-align:center;border-right:1px solid var(--line)}
.page-tasks .hnum:last-child{border-right:0}
.page-tasks .hnum b{display:block;font-size:26px;font-weight:900;line-height:1}
.page-tasks .hnum span{font-size:11px;color:var(--tx2)}
.page-tasks .rows{padding:4px 16px 14px}
.page-tasks .r{display:flex;justify-content:space-between;padding:6px 0;gap:10px}
.page-tasks .r .k{color:var(--tx2)}
.page-tasks .r .v.g{color:var(--green)} .page-tasks .r .v.a{color:var(--amber)} .page-tasks .r .v.rd{color:var(--red)} .page-tasks .r .v.m{color:var(--tx2)}

.page-tasks .filters{padding:10px 12px;display:flex;flex-wrap:wrap;gap:5px}
.page-tasks .fb{background:var(--card2);border:1px solid var(--line);color:var(--tx2);border-radius:14px;padding:5px 11px;font-size:12px;cursor:pointer}
.page-tasks .fb[aria-pressed="true"]{background:rgba(0,144,255,.14);border-color:var(--blue);color:var(--tx)}
.page-tasks .fb:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.page-tasks .grp-h{display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx3);border-bottom:1px solid var(--line)}
.page-tasks .grp-h .ct{color:var(--tx3);font-weight:400;letter-spacing:0;text-transform:none}
.page-tasks .task{display:grid;grid-template-columns:12px minmax(0,1fr) auto 16px;gap:12px;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left;color:inherit}
.page-tasks .task:last-child{border-bottom:0}
.page-tasks .task:hover{background:var(--card2)}
.page-tasks .task[aria-current="true"]{background:rgba(0,144,255,.09);box-shadow:inset 3px 0 0 var(--blue)}
.page-tasks .task:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.page-tasks .dot{width:9px;height:9px;border-radius:50%}
.page-tasks .dot.g{background:var(--green)} .page-tasks .dot.a{background:var(--amber)} .page-tasks .dot.r{background:var(--red)} .page-tasks .dot.m{background:var(--tx3)}
.page-tasks .tname{font-size:13px}
.page-tasks .tmeta{font-size:11.5px;color:var(--tx3);margin-top:3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-tasks .tdue{font-size:11.5px;text-align:right;white-space:nowrap}
.page-tasks .tdue.g{color:var(--tx3)} .page-tasks .tdue.a{color:var(--amber);font-weight:700} .page-tasks .tdue.r{color:var(--red);font-weight:700} .page-tasks .tdue.m{color:var(--tx3)}
.page-tasks .chev{color:var(--tx3);font-size:14px;text-align:center}

.page-tasks .d-head{padding:16px 18px;border-bottom:1px solid var(--line)}
.page-tasks .d-head h2{margin:0 0 8px;font-size:16px;font-weight:700;line-height:1.25}
.page-tasks .pillrow{display:flex;gap:6px;flex-wrap:wrap}
.page-tasks .pill{font-size:11px;padding:3px 9px;border-radius:12px;border:1px solid var(--line2);color:var(--tx2)}
.page-tasks .pill.g{background:var(--green-d);border-color:transparent;color:var(--green)}
.page-tasks .pill.a{background:var(--amber-d);border-color:transparent;color:var(--amber)}
.page-tasks .pill.r{background:var(--red-d);border-color:transparent;color:var(--red)}
.page-tasks .d-body{padding:14px 18px 18px;max-height:calc(100vh - 190px);overflow:auto}
.page-tasks .d-body h3{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--tx3);margin:18px 0 8px;font-weight:700}
.page-tasks .d-body h3:first-child{margin-top:0}
.page-tasks .why{color:var(--tx2);line-height:1.55;font-size:12.5px;margin:0}
.page-tasks .kit{display:flex;flex-wrap:wrap;gap:5px}
.page-tasks .kit span{background:var(--card2);border:1px solid var(--line);border-radius:4px;padding:4px 8px;font-size:11.5px;color:var(--tx2)}
.page-tasks ol.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.page-tasks ol.steps li{counter-increment:s;position:relative;padding:0 0 14px 30px;line-height:1.55;color:var(--tx2);font-size:12.5px}
.page-tasks ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--card2);border:1px solid var(--line2);color:var(--tx);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.page-tasks ol.steps li::after{content:"";position:absolute;left:10px;top:22px;bottom:2px;width:1px;background:var(--line)}
.page-tasks ol.steps li:last-child::after{display:none}
.page-tasks ol.steps b{color:var(--tx);font-weight:700}
.page-tasks .warn{background:var(--red-d);border:1px solid rgba(251,113,133,.35);border-radius:6px;padding:10px 12px;color:#FFE1E5;font-size:12.5px;line-height:1.5;margin:0 0 4px}
.page-tasks .warn b{color:var(--red)}
.page-tasks .tip{background:var(--card2);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:4px;padding:10px 12px;color:var(--tx2);font-size:12.5px;line-height:1.5}
.page-tasks .d-foot{display:flex;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.page-tasks .btn{flex:1;border-radius:6px;padding:9px;font-size:12.5px;cursor:pointer;border:1px solid var(--line2);background:transparent;color:var(--blue)}
.page-tasks .btn:hover{background:rgba(0,144,255,.08);border-color:var(--blue)}
.page-tasks .btn.primary{background:linear-gradient(180deg,var(--accent-a, #7FE9F5),var(--accent-b, #0EA5B7) 90%);border-color:var(--accent-b);color:#04222B;font-weight:700}
.page-tasks .btn.primary:hover{filter:brightness(1.06)}
.page-tasks .btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.page-tasks .empty{padding:40px 20px;text-align:center;color:var(--tx3)}
.page-tasks .close{display:none}

/* ============================================================
   LOG page — monthly warranty chemical report
   ============================================================ */
.page-log .main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.page-log .controls{display:flex;align-items:center;gap:8px;padding:12px 14px;flex-wrap:wrap}
.page-log .controls .mlabel{font-size:15px;font-weight:700;min-width:150px;text-align:center}
.page-log .controls button{background:var(--card2);border:1px solid var(--line);color:var(--tx);border-radius:6px;padding:7px 12px;font-size:12.5px;cursor:pointer}
.page-log .controls button:hover{border-color:var(--blue);color:var(--blue)}
.page-log .controls .print{margin-left:auto;color:var(--blue);border-color:var(--line2)}
.page-log .banner{margin:0 14px 12px;border-radius:6px;padding:10px 14px;font-size:12.5px;line-height:1.5}
.page-log .banner.ok{background:var(--green-d);color:var(--green)}
.page-log .banner.miss{background:var(--amber-d);color:var(--amber)}
.page-log .rep{padding:26px 30px;font-size:12.5px;line-height:1.5}
.page-log .rep .lh{border-bottom:2px solid var(--line2);padding-bottom:14px;margin-bottom:16px}
.page-log .rep .lh h1{margin:0 0 2px;font-size:19px;font-weight:900;letter-spacing:.01em}
.page-log .rep .lh .sub{color:var(--tx2);font-size:13px}
.page-log .rep .meta{display:flex;flex-wrap:wrap;gap:4px 34px;margin-bottom:18px}
.page-log .rep .meta div{min-width:220px}
.page-log .rep .meta .k{color:var(--tx3);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;display:block}
.page-log .rep h2{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--tx3);margin:20px 0 8px;font-weight:700}
.page-log .tablewrap{overflow-x:auto}
.page-log .rep table{width:100%;border-collapse:collapse;font-size:12px}
.page-log .rep th{text-align:left;color:var(--tx3);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:6px 8px;border-bottom:1px solid var(--line2);white-space:nowrap}
.page-log .rep td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.page-log .rep td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.page-log .rep th.num{text-align:right}
.page-log .rep .low{color:var(--amber)} .page-log .rep .hi{color:var(--amber)} .page-log .rep .inr{color:var(--green)}
.page-log .rep .remark{color:var(--tx2)}
.page-log .rep .cert{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);color:var(--tx2)}
.page-log .rep .sig{display:flex;gap:60px;margin-top:34px}
.page-log .rep .sig div{flex:1;border-top:1px solid var(--tx3);padding-top:5px;color:var(--tx3);font-size:11px;max-width:260px}

@media print{
  .page-log{background:#fff;color:#000}
  .page-log .topbar,.page-log .rail,.page-log .controls,.page-log .banner,.page-log .side{display:none!important}
  .page-log .body{padding:0}
  .page-log .card{background:#fff;border:0;border-radius:0}
  .page-log .rep{padding:0;color:#000;font-size:11.5px}
  .page-log .rep .lh{border-color:#000}
  .page-log .rep .lh h1{color:#000}
  .page-log .rep .lh .sub,.page-log .rep .meta .k,.page-log .rep h2{color:#444}
  .page-log .rep .meta div,.page-log .rep td{color:#000}
  .page-log .rep th{color:#444;border-color:#999}
  .page-log .rep td{border-color:#ccc}
  .page-log .rep .low,.page-log .rep .hi{color:#000;font-weight:700}
  .page-log .rep .inr,.page-log .rep .remark,.page-log .rep .cert{color:#000}
  .page-log .rep .sig div{border-color:#000;color:#444}
}

@media (max-width:1240px){ .page-tasks .detail{width:340px;flex-basis:340px} }
@media (max-width:1000px){
  .page-tasks .main{flex-direction:column}
  .page-tasks .detail{width:100%;flex:1 1 auto;position:fixed;inset:0;z-index:40;background:var(--bg);overflow:auto;display:none;border-radius:0}
  .page-tasks .detail.open{display:block}
  .page-tasks .d-body{max-height:none}
  .page-tasks .close{display:block;background:none;border:0;color:var(--tx2);font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;position:absolute;right:10px;top:10px}
}
@media (max-width:600px){
  .page-tasks .hnum b{font-size:21px}
  .page-tasks .health{padding:12px}
  .page-tasks .rows{padding:4px 12px 12px}
  .page-tasks .filters{padding:8px 10px}
  .page-tasks .task{grid-template-columns:10px minmax(0,1fr) auto 14px;gap:8px;padding:12px}
  .page-tasks .tdue{font-size:11px}
  .page-tasks .d-head{padding:14px}
  .page-tasks .d-head h2{font-size:15px}
  .page-tasks .d-body{padding:12px 14px 16px}
  .page-tasks .d-foot{padding:10px 14px}
}

/* ============================================================
   MULTI-POOL & HARDWARE INSPECTOR EXTENSIONS
   ============================================================ */

/* Top bar location selector & header aggregate badges */
#pool-selector {
  background: var(--card2);
  color: var(--tx);
  border: 1px solid var(--line2);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#pool-selector:hover, #pool-selector:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0, 144, 255, 0.25);
}
#pool-selector option {
  background: var(--card);
  color: var(--tx);
}

.hdr-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
.hdr-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 12px;
  letter-spacing: 0.02em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}
.hdr-badge .sdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.hdr-badge.g {
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.hdr-badge.g .sdot { background: var(--green); box-shadow: 0 0 6px var(--green); }

.hdr-badge.a {
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.hdr-badge.a .sdot { background: var(--amber); box-shadow: 0 0 6px var(--amber); }

.hdr-badge.r {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.hdr-badge.r .sdot { background: var(--red); box-shadow: 0 0 6px var(--red); }

.hdr-badge.alarms {
  background: var(--card2);
  color: var(--tx2);
  border: 1px solid var(--line);
}
.hdr-badge.alarms.a { color: var(--amber); border-color: rgba(245, 158, 11, 0.4); }
.hdr-badge.alarms.r { color: var(--red); border-color: rgba(239, 68, 68, 0.4); }

/* header alert popover — hover previews the issue, click opens the full task list */
.hdr-alert-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  position: relative;
  font: inherit;
}
.hdr-alert-wrap:hover .hdr-badge,
.hdr-alert-wrap:focus-visible .hdr-badge {
  filter: brightness(1.2);
}
.hdr-alert-wrap:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 12px;
}
.hdr-alert-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 50;
  min-width: 220px;
  max-width: 280px;
  background: var(--card2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--f);
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--tx2);
  text-align: left;
  white-space: normal;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.hdr-alert-tip.show { opacity: 1; transform: translateY(0); }
.hdr-alert-tip b { display: block; color: var(--tx); font-size: 11.5px; margin-bottom: 4px; }
.hdr-alert-tip span { display: block; }
.hdr-alert-tip .go { color: var(--cyan); font-weight: 700; margin-top: 6px; }

/* Master-Detail Split Pane View (40% / 60%) */
.split-container {
  display: flex;
  gap: 16px;
  width: 100%;
}
.split-master {
  width: 40%;
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.split-inspector {
  width: 60%;
  flex: 0 0 60%;
  min-width: 0;
}

/* Equipment Inspector Styles */
.inspector-head {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.inspector-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
}
.inspector-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Deep Telemetry Grid */
.telemetry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.telemetry-tile {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.telemetry-tile .lbl {
  font-size: 10.5px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.telemetry-tile .val {
  font-size: 15px;
  font-weight: 700;
  color: var(--tx);
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.telemetry-tile .val.g { color: var(--green); }
.telemetry-tile .val.a { color: var(--amber); }
.telemetry-tile .val.r { color: var(--red); }

/* Diagnostic Error Logs */
.diag-logs {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  font-size: 12px;
}
.diag-logs h4 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--tx3);
  letter-spacing: 0.06em;
}
.diag-log-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.diag-log-item:last-child { border-bottom: none; }
.diag-log-item .time { color: var(--tx3); font-size: 11px; flex: 0 0 90px; }
.diag-log-item .msg { color: var(--tx2); flex: 1; }

/* Non-electronic Fallback Card */
.no-telemetry-card {
  background: var(--card2);
  border: 1px dashed var(--line2);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  color: var(--tx2);
}
.no-telemetry-card .badge {
  display: inline-block;
  background: rgba(110, 113, 120, 0.2);
  color: var(--tx2);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Documentation Links */
.doc-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.doc-link-btn {
  background: var(--card2);
  border: 1px solid var(--line2);
  color: var(--blue);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.doc-link-btn:hover {
  background: rgba(0, 144, 255, 0.1);
  border-color: var(--blue);
}

@media (max-width: 900px) {
  .split-container { flex-direction: column; }
  .split-master, .split-inspector { width: 100%; flex: 1 1 auto; }
}


/* ============================================================
   WEATHER, DOSING & VOICE/VISION MODAL EXTENSIONS
   ============================================================ */

/* Weather Alert Banner */
.weather-banner {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.weather-banner.alert-heavy {
  border-color: rgba(242, 178, 62, 0.6);
  background: linear-gradient(180deg, rgba(242, 178, 62, 0.08), var(--card));
  box-shadow: 0 0 16px rgba(242, 178, 62, 0.1);
}
.weather-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.weather-icon {
  font-size: 28px;
}
.weather-text h4 {
  margin: 0 0 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tx);
}
.weather-text p {
  margin: 0;
  font-size: 12px;
  color: var(--tx2);
  line-height: 1.4;
}
.weather-forecast {
  display: flex;
  gap: 10px;
}
.wf-day {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 10px;
  text-align: center;
  font-size: 11px;
}
.wf-day b {
  display: block;
  color: var(--tx);
  font-size: 11.5px;
}
.wf-day span {
  color: var(--blue);
}

/* Secondary CTA Buttons */
.page-water .cta.sec {
  background: var(--card2);
  color: var(--tx);
  border: 1px solid var(--line2);
}
.page-water .cta.sec:hover {
  background: rgba(0, 144, 255, 0.12);
  border-color: var(--blue);
  color: var(--blue);
}

/* Dosing Cards Container */
.dosing-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dosing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 4px;
}
.dosing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.dosing-card {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.dosing-card.r { border-color: rgba(240,74,92,0.6); box-shadow: 0 0 12px rgba(240,74,92,0.1); }
.dosing-card.a { border-color: rgba(242,178,62,0.6); box-shadow: 0 0 12px rgba(242,178,62,0.1); }
.dosing-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dosing-icon {
  font-size: 22px;
}
.dosing-chem {
  font-weight: 700;
  font-size: 13px;
  color: var(--tx);
}
.dosing-action {
  font-size: 11px;
  color: var(--tx2);
}
.dosing-amount {
  font-size: 18px;
  font-weight: 900;
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.dosing-reason {
  font-size: 11.5px;
  color: var(--tx2);
  line-height: 1.4;
}

/* Modals */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
.modal-overlay[hidden] {
  display: none !important;
}
.modal-card {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 14px;
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 32px);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  box-sizing: border-box;
}
.modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
}
.modal-close {
  background: none;
  border: 0;
  color: var(--tx3);
  font-size: 24px;
  cursor: pointer;
  padding: 2px 8px;
  line-height: 1;
  border-radius: 6px;
}
.modal-close:hover {
  color: var(--tx);
  background: rgba(255, 255, 255, 0.08);
}
.modal-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-body::-webkit-scrollbar {
  width: 6px;
}
.modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
.modal-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--tx2);
  line-height: 1.5;
}
.voice-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.btn-mic {
  background: var(--card2);
  border: 1px solid var(--line2);
  color: var(--tx);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-mic:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.btn-mic.recording {
  border-color: var(--red);
  background: rgba(240, 74, 92, 0.15);
  color: var(--red);
}
.recording-indicator {
  font-size: 12px;
  color: var(--red);
  font-weight: 700;
  animation: blink 1.2s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Quick Log Topbar & FAB */
.tb-log-btn {
  background: var(--blue, #0090ff);
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, background 0.15s;
}
.tb-log-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.fab-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.fab-main {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--blue, #0090ff);
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(0, 144, 255, 0.45);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
}
.fab-main:hover { transform: scale(1.08); }
.fab-main.open { transform: rotate(45deg); background: var(--red, #f04a5c); }
.fab-menu {
  display: none;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  animation: fadeIn 0.15s ease-out;
}
.fab-menu.show { display: flex; }
.fab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--line2);
  padding: 8px 14px;
  border-radius: 30px;
  color: var(--tx);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  transition: transform 0.15s, border-color 0.15s;
}
.fab-item:hover { transform: translateX(-4px); border-color: var(--cyan, #2fd8c9); }

/* Modal Mode Switch */
.modal-mode-toggle {
  display: flex;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
  margin-bottom: 6px;
}
.modal-mode-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--tx3);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.modal-mode-btn.active {
  background: var(--card);
  color: var(--tx);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Taylor pH Swatches */
.ph-swatches {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.ph-swatch {
  flex: 1;
  min-width: 44px;
  height: 38px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: var(--db-numeral, monospace);
  font-size: 12px;
  font-weight: 900;
  color: #111;
  text-shadow: 0 0 1px rgba(255,255,255,0.6);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.ph-swatch:hover { transform: translateY(-2px); }
.ph-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--blue, #0090ff), 0 4px 10px rgba(0,0,0,0.5);
  transform: scale(1.05);
}

/* FC Drop Counter & Pills */
.fc-pills {
  display: flex;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.fc-pill {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11.5px;
  font-family: var(--db-numeral, monospace);
  font-weight: 700;
  color: var(--tx2);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fc-pill:hover, .fc-pill.selected {
  background: rgba(0,144,255,0.15);
  color: var(--cyan, #2fd8c9);
  border-color: var(--cyan, #2fd8c9);
}

/* Stepper Input */
.stepper-wrap {
  display: flex;
  align-items: center;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.stepper-btn {
  background: none;
  border: none;
  color: var(--tx2);
  font-size: 16px;
  font-weight: 900;
  width: 36px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepper-btn:hover { background: rgba(255,255,255,0.06); color: var(--tx); }
.stepper-wrap .modal-input {
  border: none;
  background: none;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  padding: 6px;
}

/* CC Status Indicator */
.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 4px;
}
.cc-badge.g { background: rgba(59,208,123,0.12); color: var(--green, #3bd07b); }
.cc-badge.r { background: rgba(240,74,92,0.15); color: var(--red, #f04a5c); }

/* Live Voice Extraction Tags */
.voice-parse-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.voice-param-chip {
  background: rgba(47,216,201,0.12);
  border: 1px solid rgba(47,216,201,0.3);
  color: var(--cyan, #2fd8c9);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Toast Notifications */
.pool-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--card);
  border: 1px solid var(--line2);
  color: var(--tx);
  padding: 10px 18px;
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  font-size: 12.5px;
  font-weight: 700;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pool-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.modal-input {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  outline: none;
}
.modal-input:focus {
  border-color: var(--blue);
}
.modal-select {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  color: var(--tx);
  font-family: inherit;
  font-size: 13px;
  outline: none;
}
.modal-select:focus {
  border-color: var(--blue);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-label {
  font-size: 12px;
  color: var(--tx2);
  font-weight: 700;
}
.file-dropzone {
  border: 2px dashed var(--line2);
  border-radius: 8px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--card2);
  transition: border-color 0.2s;
}
.file-dropzone:hover {
  border-color: var(--blue);
}
.file-dropzone p {
  margin: 6px 0 2px;
  font-weight: 700;
  font-size: 13px;
  color: var(--tx);
}
.file-dropzone small {
  color: var(--tx3);
  font-size: 11px;
}
.img-preview {
  max-width: 100%;
  max-height: 180px;
  border-radius: 6px;
  margin-top: 10px;
  object-fit: contain;
}
.modal-status {
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  display: none;
}
.modal-status.show { display: block; }
.modal-status.success { background: rgba(59,208,123,0.15); color: var(--green); border: 1px solid rgba(59,208,123,0.3); }
.modal-status.error { background: rgba(240,74,92,0.15); color: var(--red); border: 1px solid rgba(240,74,92,0.3); }
.modal-status.info { background: rgba(0,144,255,0.15); color: var(--blue); border: 1px solid rgba(0,144,255,0.3); }

.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: var(--card);
}

/* Log Test form */
.log-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx3);
  margin: 2px 0 -4px;
}
.log-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 12px;
}
.field-hint {
  font-size: 10.5px;
  color: var(--tx3);
}

/* Loading skeleton — shown until boot() replaces it with real data,
   so the homepage never looks blank/broken during the initial fetch. */
.skeleton-tile, .skeleton-row {
  position: relative;
  overflow: hidden;
  background: var(--card2);
}
.skeleton-tile { border-radius: 10px; height: 78px; border: 1px solid var(--line2); }
.skeleton-row { height: 38px; border-bottom: 1px solid var(--line); }
.skeleton-tile::after, .skeleton-row::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.loading-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green), var(--cyan));
  background-size: 200% 100%;
  animation: loading-bar-sweep 1.1s ease-in-out infinite;
  z-index: 1000;
  transition: opacity .25s ease;
}
.loading-bar.done { opacity: 0; pointer-events: none; }
@keyframes loading-bar-sweep {
  0% { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion:reduce){
  .skeleton-tile::after, .skeleton-row::after, .loading-bar{ animation: none; }
}

/* Supply Locker: stock-edit form in the inventory inspector pane */
.page-inventory .stock-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.page-inventory .stock-form .form-group{margin-bottom:10px}
.page-inventory .stock-save{background:linear-gradient(180deg,var(--accent-a, #7FE9F5),var(--accent-b, #0EA5B7) 90%);color:#04222B;border:0;padding:9px 16px;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer}
.page-inventory .stock-save:hover{filter:brightness(1.06)}
.page-inventory .stock-save:disabled{opacity:.6;cursor:default}
.page-inventory .stock-saved{margin-left:10px;font-size:12px;color:var(--green);font-weight:700}

/* ---------- Action Plan: dosing + due/overdue tasks merged into one checklist ---------- */
.page-action-plan .main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.page-action-plan .ap-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px}
.page-action-plan .ap-header h1{margin:0;font-size:17px;font-weight:900}
.page-action-plan .ap-sub{color:var(--tx2);font-size:12.5px;margin-top:3px}
.page-action-plan .print{background:var(--card2);border:1px solid var(--line2);color:var(--blue);border-radius:6px;padding:8px 14px;font-size:12.5px;cursor:pointer}
.page-action-plan .print:hover{border-color:var(--blue)}

.page-action-plan .ap-clear{padding:48px 20px;text-align:center}
.page-action-plan .ap-clear .em{font-size:34px;margin-bottom:8px}
.page-action-plan .ap-clear .t{font-size:14px;font-weight:700;color:var(--tx)}
.page-action-plan .ap-clear .s{font-size:12.5px;color:var(--tx3);margin-top:4px}

.page-action-plan .ap-sect{padding:0}
.page-action-plan .ap-sect-h{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;font-size:13px;font-weight:700;border-bottom:1px solid var(--line)}
.page-action-plan .ap-sect-h .ct{font-weight:400;color:var(--tx3);font-size:12px}
.page-action-plan .dosing-cards-grid{grid-template-columns:1fr}
.page-action-plan .ap-check{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--tx2);cursor:pointer;margin-top:2px}
.page-action-plan .ap-check input{cursor:pointer}
.page-action-plan .dosing-card.done{opacity:.5}
.page-action-plan .dosing-card.done .dosing-chem{text-decoration:line-through}

.page-action-plan .ap-task{border-bottom:1px solid var(--line)}
.page-action-plan .ap-task:last-child{border-bottom:0}
.page-action-plan .ap-task-row{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer}
.page-action-plan .ap-task-row:hover{background:var(--card2)}
.page-action-plan .ap-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.page-action-plan .ap-dot.r{background:var(--red)}
.page-action-plan .ap-dot.a{background:var(--amber)}
.page-action-plan .ap-task-name{font-size:13px;font-weight:600}
.page-action-plan .ap-task-meta{font-size:11.5px;color:var(--tx3);margin-top:2px}
.page-action-plan .ap-task-label{font-size:11.5px;font-weight:700;white-space:nowrap}
.page-action-plan .ap-task-label.r{color:var(--red)}
.page-action-plan .ap-task-label.a{color:var(--amber)}
.page-action-plan .ap-chev{color:var(--tx3);font-size:14px;transition:transform .15s}
.page-action-plan .ap-task.open .ap-chev{transform:rotate(90deg)}
.page-action-plan .ap-task-body{display:none;padding:0 16px 16px 37px}
.page-action-plan .ap-task.open .ap-task-body{display:block}
.page-action-plan .ap-task-body .why{color:var(--tx2);font-size:12.5px;line-height:1.5;margin:0 0 10px}
.page-action-plan .ap-task-body .warn{background:var(--red-d);border:1px solid rgba(251,113,133,.35);border-radius:6px;padding:9px 11px;color:#FFE1E5;font-size:12px;line-height:1.5;margin:0 0 10px}
.page-action-plan .ap-task-body .warn b{color:var(--red)}
.page-action-plan .ap-task-body .kit{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.page-action-plan .ap-task-body .kit span{background:var(--card2);border:1px solid var(--line);border-radius:4px;padding:4px 8px;font-size:11.5px;color:var(--tx2)}
.page-action-plan ol.ap-steps{margin:0 0 12px;padding:0;list-style:none;counter-reset:s}
.page-action-plan ol.ap-steps li{counter-increment:s;position:relative;padding:0 0 12px 28px;line-height:1.5;color:var(--tx2);font-size:12.5px}
.page-action-plan ol.ap-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--card2);border:1px solid var(--line2);color:var(--tx);font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.page-action-plan .ap-task-actions{display:flex;gap:8px;margin-top:2px}
.page-action-plan .ap-btn{border-radius:6px;padding:8px 12px;font-size:12px;cursor:pointer;border:1px solid var(--line2);background:transparent;color:var(--blue)}
.page-action-plan .ap-btn:hover{background:rgba(0,144,255,.08);border-color:var(--blue)}
.page-action-plan .ap-btn.primary{background:linear-gradient(180deg,var(--accent-a, #7FE9F5),var(--accent-b, #0EA5B7) 90%);border-color:var(--accent-b);color:#04222B;font-weight:700}
.page-action-plan .ap-btn.primary:hover{filter:brightness(1.06)}

@media print{
  .page-action-plan{background:#fff;color:#000}
  .page-action-plan .topbar,.page-action-plan .rail,.page-action-plan .print{display:none!important}
  .page-action-plan .body{padding:0}
  .page-action-plan .card{background:#fff;border:0;border-radius:0;box-shadow:none!important}
  .page-action-plan .ap-header{padding:0 0 14px}
  .page-action-plan .ap-header h1,.page-action-plan .ap-task-name,.page-action-plan .dosing-chem{color:#000}
  .page-action-plan .ap-sub,.page-action-plan .why,.page-action-plan .dosing-reason,.page-action-plan .dosing-action,.page-action-plan .ap-task-meta,.page-action-plan .ap-sect-h .ct{color:#333}
  .page-action-plan .ap-sect-h{border-color:#999}
  .page-action-plan .ap-task{border-color:#ccc}
  .page-action-plan .dosing-card{border:1px solid #999;box-shadow:none!important}
  .page-action-plan .ap-chev,.page-action-plan .ap-task-actions,.page-action-plan .ap-check{display:none!important}
  .page-action-plan .ap-task-body{display:block!important}
  .page-action-plan ol.ap-steps li::before{background:#eee;border-color:#999;color:#000}
}

/* Recent doses: expected vs. observed effect cards */
.page-water .dose-card{padding:10px 0;border-bottom:1px solid var(--line)}
.page-water .dose-card:last-child{border-bottom:0}
.page-water .dose-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px}
.page-water .dose-when{font-size:11.5px;color:var(--tx3);font-weight:700}
.page-water .dose-status{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap}
.page-water .dose-status.confirmed{background:var(--green-d);color:var(--green)}
.page-water .dose-status.pending{background:var(--amber-d);color:var(--amber)}
.page-water .dose-status.none{background:var(--card2);color:var(--tx3)}
.page-water .dose-what{font-size:13px;color:var(--tx);margin-bottom:4px}
.page-water .dose-what b{font-weight:700}
.page-water .dose-line{font-size:12px;color:var(--tx2);margin-bottom:2px;line-height:1.5}
.page-water .dose-line b{color:var(--tx)}
.page-water .dose-followup{font-size:12px;color:var(--tx2);margin-top:3px}
.page-water .dose-note{font-size:11.5px;color:var(--tx3);margin-top:4px;line-height:1.45}

/* ============================================================
   Dashboard page — Apple Health–style tokens, light + dark via
   prefers-color-scheme, scoped under .page-dashboard so they don't
   leak into the other pages' --bg/--card/etc (those stay dark-only
   by design). Values (ring score, chip numbers, gauge positions,
   feed items) are all computed in dashboard.js — nothing here is a
   hardcoded demo number.
   ============================================================ */
body{
  --db-bg:#F4FBFC; --db-card:#FFFFFF; --db-card-2:#EAF6F4; --db-border:rgba(5,20,30,0.08);
  --db-card-shadow:0 2px 8px rgba(5,20,30,0.04), 0 1px 2px rgba(5,20,30,0.02);
  --db-ring-track:rgba(5,20,30,0.08);
  --db-blue:#0EA5B7; --db-teal:#0EA5B7; --db-coral:#DC2626; --db-purple:#0EA5B7;
  --db-teal-dim:rgba(14,165,183,0.12);
  --db-green:#0E9F6E; --db-green-dim:rgba(14,159,110,0.12);
  --db-amber:#B4790E; --db-amber-dim:rgba(180,121,14,0.12);
  --db-gold:#B4790E;
  --db-red:#DC2626; --db-red-dim:rgba(220,38,38,0.12);
  --db-text:#05141E; --db-text-dim:rgba(5,20,30,0.62); --db-text-faint:rgba(5,20,30,0.42);
  /* Fraunces is the brand display/numeral face (matches forgottenpools.com);
     falls back to a period-appropriate serif if the webfont hasn't loaded yet. */
  --db-numeral: "Fraunces", "Iowan Old Style", "Palatino Linotype", serif;
  --apple-ring-move:#DC2626;
  --apple-ring-move-end:#DC2626;
  --apple-ring-move-track:rgba(220,38,38,0.12);
  --apple-ring-exercise:#0E9F6E;
  --apple-ring-exercise-end:#0E9F6E;
  --apple-ring-exercise-track:rgba(14,159,110,0.12);
  --apple-ring-stand:#7FE9F5;
  --apple-ring-stand-end:#0EA5B7;
  --apple-ring-stand-track:rgba(14,165,183,0.12);
  --apple-ring-symbol-color:#FFFFFF;
  /* Remap the shared/global tokens (used by every page's own CSS, every
     modal, the login screen, household table, and chip tooltips) to the
     same light/dark values. This re-themes all shared chrome and every
     page's existing dark-only rules in one place, app-wide. */
  --bg:var(--db-bg); --tx:var(--db-text); --tx2:var(--db-text-dim); --tx3:var(--db-text-faint);
  --card:var(--db-card); --card2:var(--db-card-2); --line:var(--db-border); --line2:var(--db-border);
  --blue:var(--db-blue); --green:var(--db-green); --amber:var(--db-amber); --red:var(--db-red); --cyan:var(--db-teal);
}
@media (prefers-color-scheme:dark){
  body{
    --db-bg:#05141E; --db-card:#0F2530; --db-card-2:#16303C; --db-border:rgba(234,246,249,0.09);
    --db-card-shadow:none;
    --db-ring-track:rgba(234,246,249,0.10);
    --db-coral:#FB7185; --db-red:#FB7185; --db-red-dim:rgba(251,113,133,0.16);
    --db-teal-dim:rgba(14,165,183,0.18); --db-green-dim:rgba(52,211,153,0.16); --db-amber-dim:rgba(242,184,75,0.16);
    --db-text:#EAF6F9; --db-text-dim:rgba(234,246,249,0.62); --db-text-faint:rgba(234,246,249,0.38);
    --apple-ring-move:#FB7185;
    --apple-ring-move-end:#FB7185;
    --apple-ring-move-track:rgba(251,113,133,0.16);
    --apple-ring-exercise:#34D399;
    --apple-ring-exercise-end:#34D399;
    --apple-ring-exercise-track:rgba(52,211,153,0.16);
    --apple-ring-stand:#7FE9F5;
    --apple-ring-stand-end:#0EA5B7;
    --apple-ring-stand-track:rgba(127,233,245,0.16);
    --apple-ring-symbol-color:#04222B;
  }
}
body.theme-dark{
  --db-bg:#05141E; --db-card:#0F2530; --db-card-2:#16303C; --db-border:rgba(234,246,249,0.09);
  --db-card-shadow:none;
  --db-ring-track:rgba(234,246,249,0.10);
  --db-coral:#FB7185; --db-red:#FB7185; --db-red-dim:rgba(251,113,133,0.16);
  --db-teal-dim:rgba(14,165,183,0.18); --db-green-dim:rgba(52,211,153,0.16); --db-amber-dim:rgba(242,184,75,0.16);
  --db-text:#EAF6F9; --db-text-dim:rgba(234,246,249,0.62); --db-text-faint:rgba(234,246,249,0.38);
  --apple-ring-move:#FB7185;
  --apple-ring-move-end:#FB7185;
  --apple-ring-move-track:rgba(251,113,133,0.16);
  --apple-ring-exercise:#34D399;
  --apple-ring-exercise-end:#34D399;
  --apple-ring-exercise-track:rgba(52,211,153,0.16);
  --apple-ring-stand:#7FE9F5;
  --apple-ring-stand-end:#0EA5B7;
  --apple-ring-stand-track:rgba(127,233,245,0.16);
  --apple-ring-symbol-color:#04222B;
}
body{background:var(--db-bg)}
.page-dashboard .main{flex:1;display:flex;justify-content:center;min-width:0;padding:2px 0 24px}
.page-dashboard .wrap{
  width:100%;max-width:560px;
  padding-top:max(6px, env(safe-area-inset-top));
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}
.page-dashboard .wrap,
.page-dashboard .wrap *{box-sizing:border-box}
.page-dashboard .wrap{color:var(--db-text);font-family:var(--f)}

.db-hdr{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding:0 2px}
.db-hdr h1{font-size:19px;font-weight:700;margin:0;letter-spacing:-0.01em;color:var(--db-text)}
.db-hdr .db-date{font-size:13px;color:var(--db-text-dim)}

/* Topbar + rail — Apple Health treatment. Both are shared shell.js markup
   rendered on every page, so these overrides apply app-wide. */
body .topbar{
  background:var(--db-card);border-bottom:1px solid var(--db-border);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
}
body .tb-site{color:var(--db-text-dim)}
body #pool-selector{background:var(--db-card-2);color:var(--db-text);border-color:var(--db-border)}
body #pool-selector option{background:var(--db-card);color:var(--db-text)}
body .tb-btn-icon{color:var(--db-text-dim)}
body .tb-btn-icon:hover{background:var(--db-border)}
body .hdr-link-btn{background:var(--db-card-2);color:var(--db-text-dim);border-color:var(--db-border)}
body .hdr-link-btn:hover{background:var(--db-border);color:var(--db-text);border-color:var(--db-blue)}
body .tb-log-btn{background:var(--db-blue);border-radius:999px}
body .tb-log-btn:hover{background:var(--db-blue);opacity:0.85}
body .user-badge{background:var(--db-card-2);border-color:var(--db-border);color:var(--db-text)}
body .user-badge .role-tag.admin{background:var(--db-green-dim);color:var(--db-green)}
body .btn-logout{color:var(--db-text-faint)}
body .btn-logout:hover{color:var(--db-red);background:var(--db-red-dim)}

body .rail{background:var(--db-card-2);border-right:1px solid var(--db-border)}
body .rail-item{color:var(--db-text-faint);border-left-color:transparent}
body .rail-item:hover{color:var(--db-text)}
/* Selection is shown by a ring around the colored icon square (below),
   not by tinting the whole row blue — each category keeps its own color. */
body .rail-item[aria-selected="true"]{color:var(--db-text);border-left-color:transparent;background:none}
body .rail-tooltip{background:var(--db-card);border-color:var(--db-border);color:var(--db-text);box-shadow:var(--db-card-shadow)}

/* Colored-square category icons, iPadOS Settings/Health style */
body .rail-icon-bg{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;transition:box-shadow 0.15s ease,transform 0.15s ease}
body .rail-icon-bg svg{width:16px;height:16px;stroke:#fff;color:#fff}
body .rail-item[aria-selected="true"] .rail-icon-bg{box-shadow:0 0 0 2px var(--db-card-2),0 0 0 4px currentColor;transform:scale(1.06)}
body .rail-icon-bg.cat-blue{background:var(--db-blue);color:var(--db-blue)}
body .rail-icon-bg.cat-teal{background:var(--db-teal);color:var(--db-teal)}
body .rail-icon-bg.cat-green{background:var(--db-green);color:var(--db-green)}
body .rail-icon-bg.cat-amber{background:var(--db-amber);color:var(--db-amber)}
body .rail-icon-bg.cat-purple{background:var(--db-purple);color:var(--db-purple)}
body .rail-icon-bg.cat-coral{background:var(--db-coral);color:var(--db-coral)}
body .rail-icon-bg.cat-gray{background:var(--db-text-faint);color:var(--db-text-faint)}

body .fab-main{background:var(--db-blue);box-shadow:0 6px 20px rgba(0,122,255,0.35)}
body .fab-main.open{background:var(--db-red)}
body .fab-item{background:var(--db-card);border-color:var(--db-border);color:var(--db-text);box-shadow:var(--db-card-shadow)}
body .fab-item:hover{border-color:var(--db-blue)}

/* .cta/.cta.sec have no base rule outside .page-water, so modal action
   buttons (Save/Cancel/Sign In/etc.) were unstyled on every other page. */
body .cta{background:linear-gradient(180deg,var(--accent-a, #7FE9F5),var(--accent-b, #0EA5B7) 90%);color:#04222B;border:0;padding:9px 18px;border-radius:999px;font-weight:700;font-size:12.5px;cursor:pointer}
body .cta:hover{filter:brightness(1.06)}
body .cta.sec{background:var(--db-card-2);color:var(--db-text);border:1px solid var(--db-border)}
body .cta.sec:hover{background:var(--db-border);opacity:1}

/* Hardcoded near-black backgrounds that weren't wired to the shared tokens. */
body.page-dashboard .chem-adjust-guide{background:var(--db-card-2);border-color:var(--db-border)}
body.page-dashboard .chem-reading-box{background:var(--db-card-2)}

/* hero card */
.db-hero{
  background:var(--db-card);
  box-shadow:var(--db-card-shadow);
  border:1px solid var(--db-border);border-radius:20px;padding:20px;
  display:flex;flex-direction:column;gap:16px;
  transition:background-color 0.2s ease;
}
.db-hero-title{font-family:var(--db-numeral);font-size:21px;font-weight:700;color:var(--db-text);letter-spacing:-0.2px}
.db-hero-row{display:flex;align-items:center;gap:20px}
/* Apple Fitness Activity-style concentric rings — Move (pH), Exercise (TA), Stand (FC) */
.db-rings{position:relative;width:144px;flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.db-rings svg{width:144px;height:144px;display:block;overflow:visible}
.db-ring-caption{margin:0;font-size:10.5px;line-height:1.4;text-align:center;color:var(--db-text-faint);max-width:150px}
.db-ring-caption b{color:var(--db-text-dim);font-weight:700}
.apple-ring-track.track-move{stroke:var(--apple-ring-move-track, rgba(250,17,79,0.18))}
.apple-ring-track.track-exercise{stroke:var(--apple-ring-exercise-track, rgba(161,255,0,0.18))}
.apple-ring-track.track-stand{stroke:var(--apple-ring-stand-track, rgba(0,240,255,0.18))}
.apple-ring-fill{transition:stroke-dasharray 900ms cubic-bezier(.16,1,.3,1)}
.apple-ring-symbol-badge{filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25))}

.db-hero-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.db-ring-readout{display:flex;flex-direction:column;gap:8px}
.db-ring-row{display:flex;align-items:center;gap:10px}
.db-ring-dot{width:10px;height:10px;border-radius:50%;flex:none}
.db-ring-row-body{flex:1;min-width:0}
.db-ring-row-label{font-size:11.5px;color:var(--db-text-dim)}
.db-ring-row-val{font-family:var(--db-numeral);font-size:16px;font-weight:800;color:var(--db-text);line-height:1.2}
.db-ring-row-target{font-size:11px;color:var(--db-text-faint);white-space:nowrap}

.db-tier{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  padding:4px 10px;border-radius:999px}
.db-tier .db-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.db-tier .db-tier-score{font-weight:400;opacity:.8}
.db-tier.r{background:var(--db-red-dim);color:var(--db-red)}
.db-tier.a{background:var(--db-amber-dim);color:var(--db-amber)}
.db-tier.g{background:var(--db-green-dim);color:var(--db-green)}
.db-tier.has-detail{cursor:pointer}
.db-tier-caret{font-size:11px;opacity:.7;margin-left:1px}
.db-cap-note{font-size:12.5px;color:var(--db-text-dim);line-height:1.4;margin:0}
.db-cap-note b{color:var(--db-text);font-weight:600}
.db-streak{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--db-text-dim)}
.db-streak b{color:var(--db-teal);font-family:var(--db-numeral)}

/* Tier pill popover — "the other info below" (cap note, stale-reading note,
   testing streak), tucked away until hovered/clicked so the hero card reads
   clean by default. Same hover-preview/click-to-pin pattern as the Water
   tab's system status pill. */
.db-tier-wrap{position:relative;display:inline-block}
.db-tier-detail{
  position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:min(320px,80vw);
  background:var(--db-card-2);border:1px solid var(--db-border);border-radius:12px;
  padding:12px 14px;box-shadow:0 14px 36px rgba(0,0,0,.35);
  display:none;flex-direction:column;gap:8px;
}
.db-tier-detail.show{display:flex}
.db-tier-detail .db-cap-note,
.db-tier-detail .db-streak{margin:0}

/* daily loop */
.db-loop{margin-top:12px;background:var(--db-card);box-shadow:var(--db-card-shadow);border:1px solid var(--db-border);border-radius:16px;padding:14px 16px}
.db-loop-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.db-loop-top span{font-size:13px;font-weight:600;color:var(--db-text)}
.db-loop-top .db-count{font-family:var(--db-numeral);font-size:13px;color:var(--db-teal)}
.db-loop-track{height:8px;border-radius:999px;background:var(--db-border);overflow:hidden}
.db-loop-fill{height:100%;width:0%;border-radius:999px;background:var(--db-teal);transition:width 500ms ease}

/* shock/CC banner — separate from the score per spec, not folded into the ring */
.db-shock{margin-top:12px;background:var(--db-red-dim);border:1px solid rgba(255,69,58,0.4);
  border-radius:14px;padding:12px 14px;font-size:12.5px;color:var(--db-text);line-height:1.4}
.db-shock b{color:var(--db-red)}

/* Plaster Health (LSI) now lives as a Favorites tile — see .apple-fav-tile.static below. */

/* Progress bar & section labels */
.db-section-label{font-size:12px;font-weight:700;color:var(--db-text-dim);text-transform:uppercase;
  letter-spacing:.06em;margin:22px 2px 8px}
.db-progress-badge{font-size:10.5px;font-weight:700;color:var(--db-teal,#2fd8c9);background:var(--db-teal-dim,rgba(47,216,201,0.12));padding:2px 8px;border-radius:999px}
.db-progress-track{height:6px;border-radius:999px;background:var(--db-border);overflow:hidden;margin:0 2px 8px}
.db-progress-bar{height:100%;border-radius:999px;background:var(--db-teal,#2fd8c9);transition:width .4s ease}
.db-wheel-wrap{position:relative;width:100%;overflow:hidden;margin:4px 0 10px;perspective:1000px;-webkit-perspective:1000px}
.db-strip{display:flex;gap:14px;overflow-x:scroll;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:none;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;padding:16px 14% 20px;scroll-padding:0 14%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.db-strip::-webkit-scrollbar{display:none}
/* Vitals-card style: plain card, zero colored borders/glow — status lives
   only on the small dot + value/sub-text color, per the Apple Health spec. */
.db-chip{flex:0 0 74vw;max-width:280px;background:var(--db-card);box-shadow:var(--db-card-shadow);border:1px solid var(--db-border);border-radius:14px;padding:14px 16px;position:relative;overflow:visible;scroll-snap-align:center;scroll-snap-stop:always;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-origin:center center;will-change:transform,opacity;transition:box-shadow 0.2s ease;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* Hovering/focusing a chip gives it a transform (see the desktop-grid rule
   below), which creates its own stacking context and would otherwise trap
   the open tooltip's z-index behind a later sibling card. Promoting the
   whole card's context above its siblings fixes that. */
.db-chip:hover,.db-chip:focus-visible{z-index:5}

.db-chip-row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.db-chip-name{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--db-text-dim)}
.db-chip-dot{width:8px;height:8px;border-radius:50%;flex:none}
.db-chip-dot.g{background:var(--db-green)}
.db-chip-dot.a{background:var(--db-amber)}
.db-chip-dot.r{background:var(--db-red)}
.db-chip-dot.resort{background:var(--db-blue)}
.db-chip-dot.m{background:var(--db-text-faint)}
.db-chip-meta{font-size:11px;color:var(--db-text-faint)}

.db-chip-row2{display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.db-chip-value{font-family:var(--db-numeral);font-size:28px;font-weight:700;line-height:1;color:var(--db-text)}
.db-chip-unit{font-size:12px;font-weight:500;color:var(--db-text-dim);margin-left:3px}
.db-chip-sub{font-size:11px;font-weight:600;margin-top:8px}
.db-chip-sub.g{color:var(--db-green)}
.db-chip-sub.a{color:var(--db-amber)}
.db-chip-sub.r{color:var(--db-red)}

.db-chip-capsule{position:relative;width:10px;height:46px;border-radius:999px;background:var(--db-border);flex:none}
.db-chip-capsule-zone{position:absolute;left:0;right:0;border-radius:999px;background:var(--db-teal-dim)}
.db-chip-capsule-zone.outer{background:rgba(48,176,199,0.08)}
.db-chip-capsule-marker{position:absolute;left:50%;width:14px;height:14px;border-radius:50%;
  border:2.5px solid var(--db-card);box-shadow:0 1px 3px rgba(0,0,0,0.25);transform:translate(-50%,50%)}
.db-chip-capsule-marker.r{background:var(--db-red)}
.db-chip-capsule-marker.a{background:var(--db-amber)}
.db-chip-capsule-marker.g{background:var(--db-green)}
.db-chip-nodata{font-size:20px;color:var(--db-text-faint);padding:4px 0 8px}

/* Chemical Chip Hover Tooltips & Detail Modal */
.db-chip-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  z-index: 50;
  min-width: 250px;
  max-width: 300px;
  background: var(--card2, #14181F);
  border: 1px solid var(--line2, #2c3545);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--f, 'Lato', sans-serif);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tx2, #9AA0A6);
  text-align: left;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.65);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.db-chip-tip .tip-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.db-chip-tip .tip-header strong {
  color: var(--tx, #fff);
  font-size: 12px;
}
.db-chip-tip .tip-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.db-chip-tip .tip-pill.g { background: rgba(59, 208, 123, 0.15); color: var(--green, #3BD07B); }
.db-chip-tip .tip-pill.a { background: rgba(242, 178, 62, 0.15); color: var(--amber, #F2B23E); }
.db-chip-tip .tip-pill.r { background: rgba(240, 74, 92, 0.15); color: var(--red, #F04A5C); }
.db-chip-tip .tip-pill.resort { background: rgba(57, 255, 176, 0.15); color: var(--resort, #39FFB0); }

.db-chip-tip .tip-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}
.db-chip-tip .tip-row span:first-child { color: var(--tx3, #6E7178); }
.db-chip-tip .tip-row.resort-row { margin-bottom: 4px; }
.db-chip-tip .tip-row.resort-row span:last-child { color: var(--resort, #39FFB0); font-weight: 700; }
.db-chip-tip .why {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--tx3, #6E7178);
  font-style: italic;
  font-size: 10.5px;
}
.db-chip-tip .tip-hint {
  margin-top: 6px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cyan, #4FC3F7);
  font-size: 10px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .db-chip:hover .db-chip-tip,
  .db-chip:focus-visible .db-chip-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Chemical Detail Modal styling */
.chem-modal-card {
  max-width: 480px;
  width: 100%;
}
.chem-reading-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line2, #2c3545);
  border-radius: 10px;
  padding: 12px 14px;
}
.chem-reading-box.g { border-color: rgba(59, 208, 123, 0.4); background: rgba(59, 208, 123, 0.06); }
.chem-reading-box.a { border-color: rgba(242, 178, 62, 0.4); background: rgba(242, 178, 62, 0.06); }
.chem-reading-box.r { border-color: rgba(240, 74, 92, 0.4); background: rgba(240, 74, 92, 0.06); }
.chem-reading-box.resort { border-color: rgba(57, 255, 176, 0.5); background: rgba(57, 255, 176, 0.08); box-shadow: 0 0 16px rgba(57, 255, 176, 0.12); }

.chem-reading-label {
  font-size: 10.5px;
  color: var(--tx3, #6E7178);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.chem-reading-val {
  font-family: var(--db-numeral, monospace);
  font-size: 22px;
  font-weight: 700;
  color: var(--tx, #fff);
  margin-top: 1px;
}
.chem-reading-val small {
  font-size: 12px;
  font-weight: 400;
  color: var(--tx2, #9AA0A6);
}
.chem-reading-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.chem-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.chem-status-pill.g { background: rgba(59, 208, 123, 0.18); color: var(--green, #3BD07B); }
.chem-status-pill.a { background: rgba(242, 178, 62, 0.18); color: var(--amber, #F2B23E); }
.chem-status-pill.r { background: rgba(240, 74, 92, 0.18); color: var(--red, #F04A5C); }
.chem-status-pill.resort { background: rgba(57, 255, 176, 0.2); color: var(--resort, #39FFB0); box-shadow: 0 0 8px rgba(57, 255, 176, 0.4); }
.chem-reading-src {
  font-size: 10px;
  color: var(--tx3, #6E7178);
}

.chem-targets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chem-target-card {
  background: var(--card2, #14181F);
  border: 1px solid var(--line2, #2c3545);
  border-radius: 8px;
  padding: 10px 12px;
}
.chem-target-card.resort {
  border-color: rgba(57, 255, 176, 0.35);
  background: rgba(57, 255, 176, 0.04);
}
.chem-target-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--tx3, #6E7178);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chem-target-card.resort .chem-target-label {
  color: var(--resort, #39FFB0);
}
.chem-target-val {
  font-family: var(--db-numeral, monospace);
  font-size: 15px;
  font-weight: 700;
  color: var(--tx, #fff);
  margin: 4px 0 2px;
}
.chem-target-card.resort .chem-target-val {
  color: var(--resort, #39FFB0);
}
.chem-target-sub {
  font-size: 9.5px;
  color: var(--tx3, #6E7178);
}

.chem-why-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: 8px;
  padding: 10px 12px;
}
.chem-section-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tx2, #9AA0A6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.chem-why-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tx2, #9AA0A6);
}

.chem-action-box {
  background: rgba(79, 195, 247, 0.07);
  border: 1px solid rgba(79, 195, 247, 0.25);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--cyan, #4FC3F7);
}
.chem-action-box strong {
  color: var(--tx, #fff);
}

.chem-lsi-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line2, #2c3545);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--tx2, #9AA0A6);
}

/* Chemical Adjustment & Treatment Guide Box */
.chem-adjust-guide {
  background: rgba(14, 18, 24, 0.95);
  border: 1px solid var(--line2, #2c3545);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chem-adjust-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.chem-adjust-guide-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyan, #4FC3F7);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chem-tag-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.chem-tag-badge.alert {
  background: rgba(240, 74, 92, 0.2);
  color: var(--red, #F04A5C);
  border: 1px solid rgba(240, 74, 92, 0.4);
}
.chem-tag-badge.ok {
  background: rgba(59, 208, 123, 0.2);
  color: var(--green, #3BD07B);
  border: 1px solid rgba(59, 208, 123, 0.4);
}
.chem-tag-badge.info {
  background: rgba(79, 195, 247, 0.15);
  color: var(--cyan, #4FC3F7);
  border: 1px solid rgba(79, 195, 247, 0.3);
}

.chem-active-adjustment {
  background: linear-gradient(135deg, rgba(240, 74, 92, 0.1) 0%, rgba(242, 178, 62, 0.06) 100%);
  border: 1px solid rgba(242, 178, 62, 0.4);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chem-adjust-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chem-adjust-icon-box {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(242, 178, 62, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.chem-adjust-needed-title {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--amber, #F2B23E);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.chem-adjust-amount-badge {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}
.chem-adjust-detail-list {
  font-size: 11px;
  line-height: 1.45;
  color: var(--tx2, #9AA0A6);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chem-adjust-detail-list strong {
  color: var(--tx, #fff);
}

.chem-balanced-notice {
  background: rgba(59, 208, 123, 0.08);
  border: 1px solid rgba(59, 208, 123, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--tx2, #9AA0A6);
  display: flex;
  align-items: center;
  gap: 8px;
}
.chem-balanced-notice strong {
  color: var(--green, #3BD07B);
}

.chem-ref-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chem-ref-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--tx3, #6E7178);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chem-ref-title small {
  text-transform: none;
  font-weight: 400;
  color: var(--cyan, #4FC3F7);
}
.chem-ref-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.chem-ref-col {
  background: var(--card2, #14181F);
  border: 1px solid var(--line, #2c3545);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}
.chem-ref-col-hdr {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line, #2c3545);
  margin-bottom: 2px;
}
.chem-ref-col-hdr.raise { color: var(--green, #3BD07B); }
.chem-ref-col-hdr.lower { color: var(--cyan, #4FC3F7); }
.chem-ref-line {
  color: var(--tx3, #6E7178);
  line-height: 1.35;
}
.chem-ref-line strong {
  color: var(--tx2, #9AA0A6);
}
.chem-name-val {
  color: var(--tx, #fff);
  font-weight: 600;
}
.chem-ref-desc {
  font-size: 10px;
  color: var(--tx3, #6E7178);
  margin-top: 2px;
  line-height: 1.35;
}

@media (max-width: 600px) {
  .modal-overlay {
    padding: 10px;
  }
  .modal-card {
    max-height: calc(100dvh - 20px);
    max-height: calc(100vh - 20px);
    border-radius: 12px;
  }
  .modal-header {
    padding: 11px 14px;
  }
  .modal-header h3 {
    font-size: 15px;
  }
  .modal-body {
    padding: 12px 14px;
    gap: 10px;
  }
  .modal-footer {
    padding: 10px 14px;
  }
  .chem-targets-grid {
    gap: 6px;
  }
  .chem-target-card {
    padding: 6px 8px;
  }
  .chem-target-val {
    font-size: 13.5px;
  }
  .chem-reading-box {
    padding: 10px 12px;
  }
  .chem-reading-val {
    font-size: 18px;
  }
  .chem-adjust-guide {
    padding: 10px;
    gap: 8px;
  }
  .chem-adjust-amount-badge {
    font-size: 12px;
  }
  .chem-ref-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .chem-ref-col {
    padding: 6px 8px;
    font-size: 10.5px;
  }
  .chem-ref-desc {
    font-size: 9.5px;
  }
}

/* ============================================================
   PHONE-WIDTH SHELL — bottom tab bar replaces the permanent sidebar.
   The sidebar itself isn't duplicated: at this width it becomes a
   bottom sheet (slides up over a backdrop when "More" is tapped),
   so all of its existing nav/role-visibility logic keeps working
   unchanged — only its CSS position/transform changes.
   ============================================================ */
.mobile-tabbar{display:none}
.mobile-sheet-backdrop{display:none}
@media (max-width:600px){
  .apple-sidebar{
    position:fixed; left:0; right:0; bottom:0; top:auto;
    width:100%; height:auto; max-height:80vh;
    border-right:0; border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;
    transform:translateY(110%);
    transition:transform .25s cubic-bezier(.16,1,.3,1);
    z-index:70; padding-bottom:max(16px, env(safe-area-inset-bottom));
  }
  .apple-sidebar.mobile-open{transform:translateY(0)}
  .apple-sidebar.collapsed{width:100%;flex:none;padding:16px 12px}
  .apple-sidebar.collapsed .sidebar-section-title,
  .apple-sidebar.collapsed .nav-label,
  .apple-sidebar.collapsed .sidebar-header-title{display:flex}
  .sidebar-toggle-btn{display:none}

  .mobile-sheet-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.45);
    z-index:65; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .mobile-sheet-backdrop:not([hidden]){opacity:1; pointer-events:auto}

  .mobile-tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--bar); border-top:1px solid var(--line);
    backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px);
    padding:6px 4px max(6px, env(safe-area-inset-bottom));
  }
  .mtab-item{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:0; color:var(--tx3); padding:6px 2px; font-size:10.5px;
    cursor:pointer;
  }
  .mtab-item svg{width:22px;height:22px}
  .mtab-item.active{color:var(--blue)}

  .body{padding-bottom:70px}
  .fab-container{bottom:76px}

  .tb-site{padding:0 6px 0 4px; gap:6px}
  #pool-selector{max-width:150px; font-size:11.5px; padding:4px 6px}
  .hdr-link-btn{padding:5px 7px; font-size:11px}
  .user-badge{padding:4px 6px; font-size:11px}
}

/* unified feed */
.db-feed{display:flex;flex-direction:column;gap:8px}
.db-item{display:flex;align-items:center;gap:12px;background:var(--db-card);box-shadow:var(--db-card-shadow);border:1px solid var(--db-border);
  border-radius:14px;padding:12px 12px;border-left-width:3px;text-align:left;width:100%;font:inherit;cursor:default}
a.db-item, button.db-item{cursor:pointer}
.db-item.dose{border-left-color:var(--db-teal)}
.db-item.task{border-left-color:var(--accent-b, #0EA5B7)}
.db-item.overdue{border-left-color:var(--db-red)}
.db-item.done{opacity:.5}
.db-item.done .db-item-title{text-decoration:line-through}
.db-icon{flex:none;width:32px;height:32px;border-radius:9px;background:var(--db-border);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.db-item-body{flex:1;min-width:0}
.db-item-title{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--db-text)}
.db-item-sub{font-size:11.5px;color:var(--db-text-dim);margin-top:1px}
.db-item-tag{flex:none;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap}
.db-item-tag.overdue{background:var(--db-red-dim);color:var(--db-red)}
.db-item-tag.today{background:var(--db-amber-dim);color:var(--db-amber)}
.db-check{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;cursor:pointer;padding:0}
.db-check .db-box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--db-text-faint)}
.db-item.done .db-check .db-box{background:var(--db-teal);border-color:var(--db-teal)}
.db-empty{background:var(--db-card);border:1px solid var(--db-border);border-radius:14px;padding:20px;
  text-align:center;color:var(--db-text-dim);font-size:13px}

.page-dashboard .db-footer{margin-top:26px;padding:0 4px;font-size:11px;color:var(--db-text-faint);line-height:1.5}

.page-dashboard :focus-visible{outline:2px solid var(--db-teal);outline-offset:2px}

@media (min-width:640px) and (max-width:1023px){
  .page-dashboard .wrap{max-width:820px}
  .db-loop{margin-top:0}
  .db-strip{padding:16px 8% 20px;scroll-padding:0 8%;gap:16px}
  .db-chip{flex:0 0 42vw;max-width:320px}
}
@media (min-width:1024px){
  .page-dashboard .wrap{max-width:860px}
  .db-loop{margin-top:0}
  .db-wheel-wrap{overflow:visible;perspective:none;-webkit-perspective:none}
  .db-strip{display:flex;flex-wrap:wrap;overflow:visible;padding:0;margin:0;gap:12px;scroll-snap-type:none;transform:none}
  .db-chip{flex:none;width:calc(33.333% - 8px);max-width:none;transform:none !important;opacity:1 !important;transition:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease}
  .db-chip:hover{transform:translateY(-2px) !important;border-color:var(--line2, #3b4252)}
}
@media (prefers-reduced-motion: reduce){
  .db-ring-fill{transition:none}
  .db-loop-fill{transition:none}
}

/* ---------------- Enhanced Tooltips, PWA & Settings ---------------- */
.chart-tooltip {
  position: absolute;
  background: rgba(14, 18, 24, 0.95);
  border: 1px solid var(--line2, #2c3545);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--tx, #fff);
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transform: translate(-50%, -100%);
  white-space: nowrap;
  transition: opacity 0.1s ease;
}

.offline-pill {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--danger);
  color: #04222B;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  z-index: 9999;
  letter-spacing: 0.5px;
  animation: pulse 2s infinite;
}

.tb-btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0.8;
  transition: opacity 0.2s, background 0.2s;
}
.tb-btn-icon:hover { opacity: 1; background: rgba(255,255,255,0.08); }

.hdr-actions-top {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hdr-link-btn {
  font-size: 11px;
  color: var(--tx2, #94a3b8);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line, #1e293b);
  border-radius: 6px;
  padding: 4px 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.hdr-link-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--tx, #fff);
  border-color: var(--cyan, #38bdf8);
}

.settings-section {
  background: var(--card2, rgba(255,255,255,0.02));
  border: 1px solid var(--line, rgba(255,255,255,0.06));
  border-radius: 8px;
  padding: 12px 14px;
}

.weather-banner.alert-hurricane {
  border-color: rgba(255, 85, 85, 0.4);
  background: linear-gradient(135deg, rgba(255,85,85,0.12) 0%, rgba(20,24,33,0.95) 100%);
}

/* ---------- Authentication & Household Management ---------- */
.user-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--tx);
}
.user-badge .role-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(79, 195, 247, 0.15);
  color: var(--cyan);
}
.user-badge .role-tag.admin {
  background: rgba(59, 208, 123, 0.15);
  color: var(--green);
}
.btn-logout {
  background: none;
  border: none;
  color: var(--tx3);
  cursor: pointer;
  padding: 2px 4px;
  font-size: 11px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.btn-logout:hover {
  color: var(--red);
  background: rgba(240, 74, 92, 0.1);
}

.household-badge {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  padding: 4px 8px;
  background: rgba(0, 144, 255, 0.1);
  border: 1px solid rgba(0, 144, 255, 0.3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 16, 0.96);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}
.login-overlay[hidden],
.login-overlay.hidden {
  display: none !important;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.login-brand h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: var(--tx);
}
.login-brand p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--tx2);
}

.household-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.household-table th {
  text-align: left;
  padding: 8px 10px;
  color: var(--tx3);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
}
.household-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--tx);
}
.household-table tr:last-child td {
  border-bottom: none;
}