/* Hydration Tap — page-hydration. Soft aqua / mineral blue on misty white,
   charcoal-navy type, hairlines and radii matched to the rest of Habitually U. */
#page-hydration{ background:#fff !important; font-family:'Nunito',system-ui,sans-serif; }
#page-hydration *{ box-sizing:border-box; }
.hyd-wrap{ max-width:1180px; margin:0 auto; padding:0 20px 80px; }

/* tokens */
#page-hydration{
  --hy-navy:#243447; --hy-navy2:#31465F; --hy-ink:#2D2D2D; --hy-mute:#5A6472; --hy-faint:#8A93A0;
  --hy-line:rgba(18,33,58,.10); --hy-line2:rgba(18,33,58,.2);
  --hy-aqua:#E8F2F2; --hy-aqua2:#D6E8E7; --hy-blue:#EDF3F7; --hy-mist:#FAFCFC; --hy-glass:#A9C6C4; --hy-deep:#5C8582;
}

/* banner */
.hyd-banner{ background:linear-gradient(135deg,#F4FAFA 0%,#EDF3F7 100%); border-bottom:1px solid var(--hy-line); }
.hyd-banner-in{ max-width:1180px; margin:0 auto; padding:26px 20px 24px; display:grid;
  grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center; }
.hyd-eb{ font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px;
  color:var(--hy-deep) !important; -webkit-text-fill-color:var(--hy-deep) !important; }
.hyd-h1{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(1.7rem,3.2vw,2.4rem);
  line-height:1.1; margin:0 0 8px; color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-lede{ margin:0 0 16px; font-size:.98rem; line-height:1.6; max-width:60ch;
  color:var(--hy-mute) !important; -webkit-text-fill-color:var(--hy-mute) !important; }
.hyd-acts{ display:flex; flex-wrap:wrap; gap:10px; }
.hyd-btn{ cursor:pointer; font-family:inherit; font-size:.87rem; font-weight:800; border-radius:999px;
  padding:11px 20px; border:1px solid var(--hy-line2); background:#fff; min-height:44px;
  color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; transition:.16s; }
.hyd-btn:hover{ background:var(--hy-aqua); border-color:var(--hy-glass); }
.hyd-btn.is-primary{ background:var(--hy-navy); border-color:var(--hy-navy);
  color:#fff !important; -webkit-text-fill-color:#fff !important; }
.hyd-btn.is-primary:hover{ background:var(--hy-navy2); border-color:var(--hy-navy2); }
.hyd-btn.is-sm{ padding:8px 14px; font-size:.79rem; min-height:38px; }
.hyd-btn:focus-visible,.hyd-chip:focus-visible,.hyd-tab:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; }
.hyd-ring{ display:grid; place-items:center; }

/* section shell */
.hyd-sec{ margin-top:34px; }
.hyd-sec-h{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:4px; }
.hyd-h2{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.3rem; margin:0;
  color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-sub{ margin:2px 0 16px; font-size:.88rem; line-height:1.6; max-width:74ch;
  color:var(--hy-mute) !important; -webkit-text-fill-color:var(--hy-mute) !important; }
.hyd-card{ background:#fff; border:1px solid var(--hy-line); border-radius:20px; padding:20px; }
.hyd-card.is-tint{ background:var(--hy-mist); }
.hyd-grid{ display:grid; gap:16px; }
.hyd-g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.hyd-g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hyd-g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* progress */
.hyd-prog-top{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hyd-vessel{ position:relative; flex:none; width:96px; height:150px; border-radius:14px 14px 26px 26px;
  border:2.5px solid var(--hy-glass); background:#fff; overflow:hidden; }
.hyd-vessel-fill{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(180deg,#BFDDDB,#9EC6C3); transition:height .5s ease; }
.hyd-vessel-txt{ position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:1.05rem;
  color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-big{ font-size:1.9rem; font-weight:800; line-height:1.1; color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-big small{ font-size:.95rem; font-weight:700; color:var(--hy-mute) !important; -webkit-text-fill-color:var(--hy-mute) !important; }
.hyd-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin-top:14px; }
.hyd-stat-k{ font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hy-deep) !important; -webkit-text-fill-color:var(--hy-deep) !important; }
.hyd-stat-v{ font-size:.94rem; font-weight:700; color:var(--hy-ink) !important; -webkit-text-fill-color:var(--hy-ink) !important; }
.hyd-bar{ height:10px; border-radius:999px; background:var(--hy-aqua2); overflow:hidden; margin-top:14px; }
.hyd-bar > span{ display:block; height:100%; background:var(--hy-deep); border-radius:999px; transition:width .4s ease; }

/* status */
.hyd-status-badge{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:7px 15px;
  font-size:.78rem; font-weight:800; background:var(--hy-aqua); border:1px solid var(--hy-glass);
  color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-status-badge i{ width:9px; height:9px; border-radius:50%; background:var(--hy-deep); font-style:normal; }

/* chips / quick add */
.hyd-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.hyd-chip{ cursor:pointer; font-family:inherit; font-size:.83rem; font-weight:700; border-radius:999px;
  padding:9px 15px; min-height:42px; border:1px solid var(--hy-line); background:var(--hy-mist);
  color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; transition:.15s; }
.hyd-chip:hover{ background:var(--hy-aqua); border-color:var(--hy-glass); }
.hyd-chip.is-on{ background:var(--hy-navy); border-color:var(--hy-navy); color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* timeline */
.hyd-tl{ display:grid; gap:12px; }
.hyd-tl-block{ border:1px solid var(--hy-line); border-radius:16px; padding:14px 16px; background:var(--hy-mist); }
.hyd-tl-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.hyd-tl-name{ font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hy-deep) !important; -webkit-text-fill-color:var(--hy-deep) !important; }
.hyd-tl-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px dashed var(--hy-line); font-size:.88rem; }
.hyd-tl-row:first-of-type{ border-top:0; }
.hyd-tl-time{ flex:none; width:74px; font-weight:700; color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-tl-name2{ flex:1; min-width:0; color:var(--hy-ink) !important; -webkit-text-fill-color:var(--hy-ink) !important; }
.hyd-tl-ml{ flex:none; font-weight:800; color:var(--hy-deep) !important; -webkit-text-fill-color:var(--hy-deep) !important; }
.hyd-tl-x{ flex:none; cursor:pointer; border:0; background:none; font-family:inherit; font-size:.78rem;
  color:var(--hy-faint) !important; -webkit-text-fill-color:var(--hy-faint) !important; text-decoration:underline; padding:4px; min-height:32px; }
.hyd-empty{ font-size:.85rem; font-style:italic; color:var(--hy-faint) !important; -webkit-text-fill-color:var(--hy-faint) !important; }

/* tabs */
.hyd-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.hyd-tab{ cursor:pointer; font-family:inherit; font-size:.82rem; font-weight:700; border-radius:999px; padding:8px 16px;
  min-height:40px; border:1px solid var(--hy-line); background:#fff;
  color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-tab.is-on{ background:var(--hy-navy); border-color:var(--hy-navy); color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* forms */
.hyd-fld{ margin-bottom:14px; }
.hyd-lbl{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px;
  color:var(--hy-deep) !important; -webkit-text-fill-color:var(--hy-deep) !important; }
.hyd-in,.hyd-sel,.hyd-ta{ width:100%; border:1.5px solid var(--hy-line); border-radius:13px; padding:11px 14px;
  font-family:inherit; font-size:.92rem; background:var(--hy-mist); color:var(--hy-navy); min-height:44px; }
.hyd-in:focus,.hyd-sel:focus,.hyd-ta:focus{ outline:none; border-color:var(--hy-glass); background:#fff; }
.hyd-ta{ min-height:78px; resize:vertical; }
.hyd-err{ margin:6px 0 0; font-size:.8rem; font-weight:700; color:#A4453A !important; -webkit-text-fill-color:#A4453A !important; }
.hyd-check{ display:flex; align-items:center; gap:9px; font-size:.86rem; margin-bottom:9px;
  color:var(--hy-mute) !important; -webkit-text-fill-color:var(--hy-mute) !important; }
.hyd-check input{ width:18px; height:18px; accent-color:var(--hy-deep); }
.hyd-note{ font-size:.8rem; line-height:1.6; margin:10px 0 0;
  color:var(--hy-faint) !important; -webkit-text-fill-color:var(--hy-faint) !important; }
.hyd-safety{ margin-top:12px; border:1px dashed var(--hy-glass); border-radius:14px; padding:12px 15px;
  background:var(--hy-aqua); font-size:.82rem; line-height:1.6;
  color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }

/* list rows */
.hyd-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--hy-line);
  border-radius:16px; padding:13px 16px; background:#fff; }
.hyd-row + .hyd-row{ margin-top:10px; }
.hyd-row-b{ flex:1 1 220px; min-width:0; }
.hyd-row-t{ font-size:.94rem; font-weight:800; color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-row-d{ font-size:.82rem; margin-top:2px; color:var(--hy-mute) !important; -webkit-text-fill-color:var(--hy-mute) !important; }
.hyd-row-acts{ display:flex; gap:7px; flex-wrap:wrap; }
.hyd-pill{ display:inline-block; border-radius:999px; padding:3px 10px; font-size:.66rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; background:var(--hy-aqua);
  color:var(--hy-deep) !important; -webkit-text-fill-color:var(--hy-deep) !important; }
.hyd-pill.is-warn{ background:#FBF0DC; color:#8A6A2F !important; -webkit-text-fill-color:#8A6A2F !important; }
.hyd-pill.is-off{ background:#F1F3F5; color:#7A828C !important; -webkit-text-fill-color:#7A828C !important; }

/* mini bar chart */
.hyd-chart{ display:flex; align-items:flex-end; gap:8px; height:120px; margin:8px 0 10px; }
.hyd-chart-col{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px; height:100%; }
.hyd-chart-bar{ width:100%; max-width:44px; border-radius:7px 7px 3px 3px; background:var(--hy-glass); min-height:4px; }
.hyd-chart-bar.is-goal{ background:var(--hy-deep); }
.hyd-chart-x{ font-size:.66rem; font-weight:700; color:var(--hy-faint) !important; -webkit-text-fill-color:var(--hy-faint) !important; }

/* sheet */
.hyd-sheet-bg{ position:fixed; inset:0; background:rgba(20,30,40,.44); z-index:200000; display:flex;
  align-items:center; justify-content:center; padding:20px; }
.hyd-sheet{ background:#fff; border-radius:24px; width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  padding:24px; box-shadow:0 30px 80px rgba(20,30,40,.3); }
.hyd-sheet-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; }
.hyd-sheet-x{ cursor:pointer; border:1px solid var(--hy-line); background:#fff; border-radius:50%;
  width:38px; height:38px; font-size:1.1rem; line-height:1; flex:none;
  color:var(--hy-navy) !important; -webkit-text-fill-color:var(--hy-navy) !important; }
.hyd-sheet-foot{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }

/* collapsible */
.hyd-fold > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:2px 0; }
.hyd-fold > summary::-webkit-details-marker{ display:none; }
.hyd-fold > summary::after{ content:"+"; font-size:1.2rem; font-weight:800; color:var(--hy-deep); }
.hyd-fold[open] > summary::after{ content:"\2212"; }
.hyd-fold[open] > summary{ margin-bottom:12px; }

/* sticky mobile log button */
.hyd-sticky{ display:none; }

@media (max-width:1024px){
  .hyd-g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hyd-g3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px){
  .hyd-banner-in{ grid-template-columns:minmax(0,1fr); }
  .hyd-g2,.hyd-g3,.hyd-g4{ grid-template-columns:minmax(0,1fr); }
  .hyd-wrap{ padding-bottom:96px; }
  .hyd-sheet{ max-width:none; border-radius:22px 22px 0 0; align-self:flex-end; max-height:92vh; }
  .hyd-sheet-bg{ padding:0; align-items:flex-end; }
  .hyd-sticky{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:1200; padding:10px 16px 14px;
    background:rgba(255,255,255,.96); border-top:1px solid var(--hy-line); backdrop-filter:blur(6px); }
  .hyd-sticky .hyd-btn{ width:100%; }
  .hyd-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:400px){
  .hyd-tl-row{ flex-wrap:wrap; }
  .hyd-tl-time{ width:auto; }
  .hyd-tl-name2{ flex:1 1 100%; order:3; }
  .hyd-tl-x{ order:4; margin-left:auto; }
  .hyd-row{ padding:12px 13px; }
  .hyd-tl-block{ padding:12px 13px; }
}
@media (prefers-reduced-motion:reduce){
  #page-hydration *{ transition:none !important; }
}