/* Health screen. Everything here lives inside #healthRoot and borrows the app's
   cards, stats, chips, pills and modal; only the pieces the design system has
   no class for are defined below. Tokens only, so both themes work.

   The sub tabs carry .ntabs and .htabs together: the look is the Nutrition
   screen's on purpose, so the two screens read as one app, and the rules are
   repeated here so Health still looks right on its own. */

/* ----------------------------------------------------------- sub tabs */
.htabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.htabs button{
  padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);
  font:800 11px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--mute);transition:.16s;
}
.htabs button:hover{color:var(--ink);border-color:var(--hot)}
.htabs button.on{color:var(--hot);border-color:var(--hot);background:var(--panel)}
.htabs button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

.hstrip{margin-bottom:14px}
.hstrip:empty{display:none}
#hPanel .card{margin-bottom:14px}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:900px){.hgrid{grid-template-columns:1fr}}

/* ------------------------------------------------------- forms + inputs */
.hlab{display:grid;gap:5px;font:800 10px/1.2 var(--mono);letter-spacing:1.1px;text-transform:uppercase;color:var(--mute)}
.hlab em{font-style:normal;color:var(--dim)}
.hlab input,.hlab select{
  width:100%;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--panel2);color:var(--ink);font:600 14px/1.2 var(--sans);
}
.hlab input:focus,.hlab select:focus{outline:2px solid var(--hot);outline-offset:1px}
.hlab input::placeholder{color:var(--dim)}
.hform{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.hform .wide{grid-column:1/-1}
.hactions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}

/* ------------------------------------------------- the one to five picks
   One tap each, and big enough to hit on a phone without aiming. */
.hscale{margin-bottom:18px}
.hscale:last-child{margin-bottom:0}
.hscale-h b{display:block;font:800 14px/1.3 var(--mono);color:var(--ink)}
.hscale-h small{display:block;margin-top:2px;font-size:12px;color:var(--mute)}
.hpick{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.hpick button{
  min-height:52px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);
  color:var(--mute);font:800 18px/1 var(--mono);transition:.14s;
}
.hpick button:hover{border-color:var(--hot);color:var(--ink)}
.hpick button.on{border-color:var(--hot);color:var(--hot);background:rgba(255,90,31,.14)}
.hpick button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.hends{display:flex;justify-content:space-between;margin-top:7px;font:700 10px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--dim)}

.hmoods{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.hmood{min-height:40px;padding:0 14px;color:var(--mute);transition:.14s}
.hmood:hover{border-color:var(--hot);color:var(--ink)}
.hmood.on{border-color:var(--hot);color:var(--hot);background:rgba(255,90,31,.14)}

.hsaved{margin-top:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel2)}
.hsaved b{display:block;font:800 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--hot);margin-bottom:7px}
.hsaved p{font-size:13px;line-height:1.6;color:var(--ink)}

/* ----------------------------------------------------- lists of entries */
.hrows{display:grid;gap:8px}
.hrow{
  width:100%;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;text-align:left;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--panel2);transition:.14s;
}
.hrow:hover{border-color:var(--hot);transform:translateX(3px)}
.hrow-d b{display:block;font:800 13px/1.2 var(--mono);color:var(--ink);white-space:nowrap}
.hrow-d small{display:block;margin-top:4px;font:700 10px/1 var(--mono);color:var(--mute);white-space:nowrap}
.hrow-t{min-width:0;font-size:12.5px;line-height:1.5;color:var(--mute);overflow-wrap:anywhere}
.hline{
  display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;
  padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);
}
.hline b{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hline span{font:800 13px/1 var(--mono);color:var(--hot);white-space:nowrap}
.hline small{font:700 10px/1 var(--mono);color:var(--mute);white-space:nowrap}
/* the small take-it-off button on a chip */
.hx{margin-left:7px;padding:0 2px;color:var(--mute);font:800 13px/1 var(--mono)}
.hx:hover{color:var(--bad)}

/* ------------------------------------------------------------- charts */
.hchart{width:100%;height:auto;display:block;margin-top:4px}
.hlegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font:700 11px/1 var(--mono);color:var(--mute)}
.hlegend span{display:inline-flex;align-items:center;gap:6px}
.hlegend i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* -------------------------------------------------------- training load */
.hread{font-size:14px;line-height:1.65;color:var(--ink);margin-bottom:10px}
.hread:last-child{margin-bottom:0}
/* No pixel min-width anywhere in here. The app shell sizes its main column to
   the content's min-content width, so one wide row would push every Health
   screen past the viewport on a phone. The row stacks instead. */
.hdays{display:grid;gap:6px}
.hday{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) repeat(3,minmax(0,.6fr));
  gap:10px;align-items:center;padding:9px 12px;border-radius:11px;border:1px solid var(--line);background:var(--panel2);
  font-size:12.5px;color:var(--mute);
}
@media(max-width:720px){
  .hday{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"d d d" "t t t" "f s e";row-gap:10px}
  .hd-day{grid-area:d}.hd-train{grid-area:t}.hd-f{grid-area:f}.hd-s{grid-area:s}.hd-e{grid-area:e}
  .hday.hhead{display:none}
  /* The header row is gone at this width, so each dot says what it is. */
  .hd-f::before,.hd-s::before,.hd-e::before{
    display:block;margin-bottom:6px;font:700 9px/1 var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--dim);
  }
  .hd-f::before{content:"Fatigue"}
  .hd-s::before{content:"Soreness"}
  .hd-e::before{content:"Energy"}
}
.hday b{font:800 12.5px/1.2 var(--mono);color:var(--ink)}
.hday.hhead{background:transparent;border-color:transparent;padding-bottom:0;
  font:700 9px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--dim)}
.hdot{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
  font:800 13px/1 var(--mono);color:var(--c,var(--hot));border:1px solid var(--c,var(--hot));
  background:var(--panel);
}
.hnil{font:700 10px/1 var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--dim)}

/* ------------------------------------------------------- the plain line */
.hplain{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--mute)}
.card .hplain{margin-top:12px}