/* health area styles. Shared tokens and card classes live in styles.css; everything here is prefixed hl- */
.hl-ic{flex:none;display:block}
.hl-head h1{margin-top:2px}
.hl-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.hl-back,.hl-coach{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:999px;font-size:14px;text-decoration:none;
  color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.hl-back:hover,.hl-coach:hover{color:var(--ink)}
.hl-coach{position:relative;color:var(--ink);background:color-mix(in srgb,var(--rose) 16%,transparent);border-color:color-mix(in srgb,var(--rose) 38%,transparent)}
.hl-dot{position:absolute;top:2px;inset-inline-end:2px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px var(--bg)}
.hl-back:focus-visible,.hl-coach:focus-visible,.hl-tile:focus-visible,.hl-wide:focus-visible,.hl-row:focus-visible,.hl-plan:focus-visible,.hl-cd:focus-visible,.hl-btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

/* tiles */
.hl-tile{--c:var(--violet);display:flex;flex-direction:column;gap:6px;min-height:128px;text-decoration:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.hl-tile b{font-size:18px}
.hl-ti{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 20%,transparent);margin-bottom:6px}
.hl-soon{cursor:default;opacity:.62}
.hl-badge{align-self:flex-start;font-size:12px;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted)}
.hl-soonchip{font:inherit;font-size:12px;cursor:default;opacity:.7}
.hl-wide{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer;width:100%}
.hl-wide>span:nth-child(2){flex:1;display:flex;flex-direction:column}
.hl-wide b{font-size:17px}
.hl-wide .hl-ti{margin:0}
.hl-go b,.hl-go .note{color:inherit}
.hl-ptile{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.hl-ptile small{font-size:14px;color:var(--muted);font-weight:500}
.hl-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.hl-actions .btn,.hl-inrow .btn,.hl-setform .btn,.hl-empty .btn,.hl-btn,.hl-soft,.hl-big{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;min-height:44px}
.hl-soft{background:rgba(255,255,255,.07);border:1px solid var(--edge);color:var(--ink)}
.hl-soft.on{background:color-mix(in srgb,var(--amber) 20%,transparent);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.hl-soft.danger,.linkbtn.danger{color:var(--rose)}
.hl-big{min-height:52px;font-size:16px;padding:12px 22px}
.hl-big small{display:block;font-weight:400}
.hl-big>span{display:flex;flex-direction:column;align-items:flex-start}
.hl-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:16px}
.hl-actions.start{justify-content:flex-start}
.hl-empty{display:flex;flex-direction:column;gap:10px}
.hl-empty-act{display:flex;gap:10px;flex-wrap:wrap}
.hl-ok{color:var(--lime)!important}
.hl-banner{display:flex;align-items:center;gap:12px;border-radius:22px;text-decoration:none;color:var(--ink);background:color-mix(in srgb,var(--teal) 18%,rgba(20,23,40,.7));border:1px solid color-mix(in srgb,var(--teal) 45%,transparent)}
.hl-banner>span:nth-child(2){flex:1}

/* forms on the page (same look as the sheets) */
.hl-form{display:flex;flex-direction:column;gap:14px}
.hl-form .fld,.hl-quick .fld,#hlPortion .fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.hl-form label,.hl-form legend,#hlPortion label{font-size:13px;color:var(--muted)}
.hl-form input,.hl-form textarea,.hl-form select,#hlPortion input,.hl-search input,.hl-inrow input,.hl-setform input,.hl-brow input{font:inherit;font-size:16px;color:var(--ink);width:100%;padding:10px 12px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--edge);min-height:44px}
.hl-form input.num,#hlPortion input.num,.hl-inrow input.num,.hl-setform input.num,.hl-brow input.num{font-family:var(--f-num);direction:ltr;text-align:right}
.hl-form textarea{resize:vertical;line-height:1.5}
.hl-form input:focus,.hl-form textarea:focus,#hlPortion input:focus,.hl-search input:focus,.hl-inrow input:focus,.hl-setform input:focus,.hl-brow input:focus{outline:2px solid var(--teal);outline-offset:0;border-color:transparent}
.hl-form fieldset{margin:0;padding:12px;border:1px solid var(--edge);border-radius:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.hl-form legend{padding:0 6px;font-weight:700;color:var(--ink);font-size:15px}
.hl-form .hint{font-size:12px;color:var(--dim)}
.hl-form .fld.bad input{border-color:var(--rose);outline:1px solid var(--rose)}
.hl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.hl-msg{margin:0;min-height:1.2em;font-size:14px;color:var(--rose)}
.hl-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 20px;margin:0}
.hl-dl div{padding:10px 0;border-bottom:1px solid var(--edge)}
.hl-dl dt{font-size:13px;color:var(--muted)}
.hl-dl dd{margin:2px 0 0;white-space:pre-wrap}
.hl-seg{display:flex;flex-wrap:wrap;gap:8px}
.hl-seg label,.hl-days label,.hl-ctypes label{position:relative;cursor:pointer}
.hl-seg input,.hl-days input,.hl-ctypes input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.hl-seg span,.hl-days span,.hl-ctypes span{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:999px;font-size:14px;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.hl-seg input:checked+span,.hl-days input:checked+span,.hl-ctypes input:checked+span{color:var(--ink);background:color-mix(in srgb,var(--teal) 22%,transparent);border-color:color-mix(in srgb,var(--teal) 50%,transparent)}
.hl-seg input:focus-visible+span,.hl-days input:focus-visible+span,.hl-ctypes input:focus-visible+span{outline:2px solid var(--violet);outline-offset:2px}
.hl-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.hl-days label{display:flex}
.hl-days span{justify-content:center;padding:6px 0;width:100%}
.hl-ctypes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.hl-ctypes span{width:100%;min-height:48px;border-radius:14px}
.hl-inrow{display:flex;gap:8px;align-items:center}
.hl-inrow .btn{flex:none}
.hl-dup{font-size:13px;color:var(--amber)}
.hl-nboxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}

/* metric screen */
.hl-top .big small{font-size:20px;font-weight:500}
.hl-delta{display:inline-flex;align-items:center;gap:2px;font-family:var(--f-num);direction:ltr}
.solid .hl-delta.good{font-weight:700}
.hl-quick h2{font-size:15px}

/* calendar */
.hl-cal{direction:rtl}
.hl-calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hl-nav{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;cursor:pointer;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.hl-nav:disabled{opacity:.3;cursor:default}
.hl-cgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.hl-dn{text-align:center;font-size:12px;color:var(--dim);padding-bottom:4px}
.hl-cd{font:inherit;min-height:46px;padding:4px 0;border-radius:10px;border:1px solid transparent;background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.1}
.hl-cd b{font-family:var(--f-num);font-weight:500;font-size:13px}
.hl-cd span{font-size:10px;color:var(--teal);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hl-cd.has{background:color-mix(in srgb,var(--teal) 12%,transparent)}
.hl-cd.today{border-color:color-mix(in srgb,var(--violet) 70%,transparent)}
.hl-cd:disabled{opacity:.3;cursor:default}
.hl-cd.pad{background:none;cursor:default}

/* charts */
.hl-chart .grid{stroke:rgba(255,255,255,.08)}
.hl-chart .ln{fill:none;stroke:var(--rose);stroke-width:2.2;stroke-linejoin:round}
.hl-chart .pt{fill:var(--rose)}
.hl-chart .goal{stroke:var(--lime);stroke-width:1;stroke-dasharray:3 3}
.hl-chart .goalc{fill:none;stroke:var(--lime);stroke-width:1.5}
.hl-chart .gl{fill:var(--lime)}
.hl-chart .bar{fill:color-mix(in srgb,var(--teal) 40%,transparent)}
.hl-chart .bar-hit{fill:var(--teal)}

/* nutrition */
.hl-macros{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hl-mac{padding:12px;border-radius:14px;background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 28%,transparent);display:flex;flex-direction:column;gap:4px}
.hl-mac b{font-size:22px}
.hl-mac small{font-size:13px;color:var(--muted);font-weight:400}
.hl-mac .progress{margin:4px 0 0}
.hl-mac.over{border-color:var(--rose)}
.hl-over{color:var(--rose)}
.hl-log li{align-items:center}
.hl-search{display:flex;align-items:center;gap:8px;color:var(--muted)}
.hl-search input{flex:1}
.hl-namefield{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--edge);text-decoration:none;color:var(--ink)}
.hl-list li[hidden],.hl-group[hidden]{display:none}
.hl-row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 4px;border-bottom:1px solid var(--edge);color:var(--ink);text-decoration:none;font:inherit;width:100%;background:none;border-width:0 0 1px;cursor:pointer;text-align:start}
.hl-row>span{font-size:13px;color:var(--muted)}
.hl-group h3{font-size:14px;color:var(--muted);margin:14px 0 2px}
.hl-mgroup>h3{margin:18px 0 0}
.hl-grams input{max-width:180px;font-size:22px!important}
.hl-live4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.hl-box{padding:12px;border-radius:14px;background:rgba(255,255,255,.06);display:flex;flex-direction:column}
.hl-box b{font-size:20px}
.hl-video{position:relative;border-radius:16px;overflow:hidden;background:#000;aspect-ratio:4/3;max-width:520px}
.hl-video video{width:100%;height:100%;object-fit:cover;display:block}
.hl-aim{position:absolute;inset:30% 12%;border:2px solid rgba(255,255,255,.7);border-radius:12px}
.hl-scanbox{display:flex;flex-direction:column;gap:8px}
#hlManualBc{margin-top:14px;max-width:520px}
#hlScanRes{margin-top:12px}

/* workouts */
.hl-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.hl-plan{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:16px;text-decoration:none;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.hl-plan.today{border-color:color-mix(in srgb,var(--teal) 55%,transparent);background:color-mix(in srgb,var(--teal) 12%,transparent)}
.hl-plan .chip{align-self:flex-start;margin-top:6px}
.hl-exlist{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:10px}
.hl-exlist li{display:flex;flex-direction:column}
.hl-exlist a{color:var(--ink)}
.hl-hday{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--edge)}
.hl-brows{display:flex;flex-direction:column;gap:8px}
.hl-brow{display:grid;grid-template-columns:1fr 90px 90px auto;gap:8px;align-items:end;padding:10px;border-radius:14px;background:rgba(255,255,255,.035)}
.hl-brow label{display:flex;flex-direction:column;gap:3px;font-size:12px}
.hl-brow b{align-self:center}
.hl-rbtn{display:flex;gap:4px}
.hl-rbtn .iconbtn,.hl-sheet .iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;cursor:pointer;color:var(--muted);background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.hl-pick{max-height:50dvh;overflow:auto}
.hl-livehead{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap}
.hl-liveex h2 small{font-family:var(--f-num)}
.hl-setform{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end;margin-top:8px}
.hl-setform label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.hl-sets{margin:12px 0 0;padding-inline-start:22px}
.hl-sets li{display:flex;justify-content:space-between;align-items:center;padding:3px 0}
.hl-goalbtn{display:flex;align-items:center;gap:12px;width:100%;font:inherit;color:var(--ink);background:none;border:0;cursor:pointer;text-align:start;padding:0}
.hl-goalbtn>span{display:flex;flex-direction:column}
.hl-mapbox{padding:0}
#hlMap{height:min(48dvh,420px);width:100%;direction:ltr;border-radius:22px}
.hl-cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hl-cstats div{display:flex;flex-direction:column}
.hl-cstats b{font-size:28px;font-weight:700}
.hl-view{display:flex;align-items:baseline;gap:10px}
.hl-view .big{margin:0}

@media (max-width:1100px){
  main>.hl-tile.s4{grid-column:span 6}
}
@media (max-width:560px){
  .hl-tile{min-height:112px}
  .hl-tile b{font-size:16px}
  .hl-macros,.hl-live4,.hl-cstats{grid-template-columns:repeat(2,1fr)}
  .hl-brow{grid-template-columns:1fr 1fr}
  .hl-brow b{grid-column:1/-1}
  .hl-rbtn{grid-column:1/-1;justify-content:flex-end}
  .hl-setform{grid-template-columns:1fr 1fr}
  .hl-setform .btn{grid-column:1/-1}
  .hl-coach span{font-size:13px}
}

/* shopping list, guideline points */
.hl-shop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--edge)}
.hl-shop label{display:flex;align-items:center;gap:12px;min-height:44px;flex:1;cursor:pointer}
.hl-shop input{width:22px;height:22px;accent-color:var(--teal);flex:none}
.hl-shop.done span{text-decoration:line-through;color:var(--dim)}
.hl-notes{margin:0 0 14px;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px}
.hl-notes li{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#hlProdRes{margin-top:10px}
.hl-sheet .hl-list .hl-row{border-bottom:1px solid var(--edge)}
.hl-ptile .macro b,.hl-ptile h2{color:var(--ink)}