/* Site health, its own stylesheet: ported 2026-11-11 from the XYZ Storage v4
   build (styles.css, the SITE HEALTH block). Loaded after styles.css and
   mobile.css; every rule is scoped to #health, .modal-hl or an .hl class. */
/* ══ SITE HEALTH (2026-10-22) ═══════════════════════════════════════════
   The operations-console look, in the house tokens: solid cards on hairlines,
   a status as a square mark and a word, stat cards led by a small glyph tile,
   hatched stacked columns, and dense tables with tick bars. Nothing frosted
   (the backdrop blur Indexation uses repainted on every scroll and hover and
   flickered here) and nothing that moves on hover. */
#health .ixpanel,#health .dsheet,.modal.modal-hl,.modal.modal-hl .modal-head{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.modal.modal-hl{background:var(--card) !important}
#health .neg,.modal-hl .neg{color:var(--neg)}
#health .pos,.modal-hl .pos{color:var(--pos)}
.hlmuted{color:var(--faint)}

.hlcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px 18px;margin-top:14px;
  box-shadow:0 1px 2px #241a100a}
.hlcard-h{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 16px}
.hlcard-h h3{margin:0;font-family:var(--sans);font-size:15.5px;font-weight:620;color:var(--ink)}
.hlcard-h > span{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.hlcard-h > :is(.hllegend,.hlctl,.hllink){margin-left:auto}

/* the scores and the spread */
.hlhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px}
.hlspread-p{border-left:1px solid var(--line);padding-left:40px}
.hlscale + .hlscale{margin-top:24px}
.hlscale-h{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.hlscale-h span{font-size:14.5px;font-weight:600;color:var(--ink);min-width:84px}
.hlscale-h b{font-family:var(--display);font-size:46px;font-weight:600;line-height:.9;color:var(--c);font-variant-numeric:tabular-nums}
.hlscale-h em{font-style:normal;font-size:14px;font-weight:600;color:var(--c)}
.hlscale-t{position:relative;display:flex;gap:3px;height:10px}
.hlscale-t i{display:block;border-radius:3px;background:color-mix(in srgb,var(--bc) 18%,transparent)}
.hlscale-t i.on{background:color-mix(in srgb,var(--bc) 50%,transparent)}
.hlscale-m{position:absolute;top:50%;width:4px;height:22px;margin-left:-2px;transform:translateY(-50%);border-radius:2px;background:var(--c);box-shadow:0 0 0 3px var(--card)}
.hlscale-k{display:flex;gap:3px;margin-top:8px}
.hlscale-k span{font-size:13px;color:var(--muted);white-space:nowrap}
.hlscale-k span:nth-child(2){text-align:center}
.hlscale-k span:last-child{text-align:right}
.hlscales3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.hlscales3 .hlscale + .hlscale{margin-top:0}

/* columns: a value over a hatched bar over a label */
#health .hatch{display:block;border-radius:5px;background-color:var(--c);
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.24) 0 2px,transparent 2px 7px)}
.hlcols-chart{display:flex;gap:14px}
.hlcc{all:unset;box-sizing:border-box;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:stretch}
button.hlcc{cursor:pointer}
button.hlcc:hover .hlcc-x b{color:var(--accent)}
button.hlcc:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.hlcc-s{height:var(--plot,200px);display:flex;align-items:flex-end;justify-content:center}
.hlcc-bar{position:relative;width:100%;max-width:62px;display:flex;flex-direction:column;gap:3px}
.hlcc-v{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hlcc-x{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-md);text-align:center;font-size:12.5px;color:var(--muted);line-height:1.35}
.hlcc-x b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.hlspread{--plot:170px;padding-top:24px;gap:8px}
.hlstack{--plot:220px;position:relative;padding:24px 0 0 32px}
.hlstack-g{position:absolute;left:32px;right:0;top:24px;height:var(--plot);pointer-events:none}
.hlstack-g span{position:absolute;left:0;right:0;border-top:1px dashed var(--line-md)}
.hlstack-g span:first-child{border-top-style:solid}
.hlstack-g em{position:absolute;left:-32px;top:-8px;width:24px;text-align:right;font-style:normal;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.hlstack .hlcols-chart{position:relative}
.hllegend{display:flex;gap:16px;flex-wrap:wrap}
.hllegend span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted)}
.hllegend i{width:9px;height:9px;border-radius:2px}

/* stat cards */
.hlstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.hlstat{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;padding:16px 18px 14px;border-radius:16px;
  background:var(--card);border:1px solid var(--line);box-shadow:0 1px 2px #241a100a}
.hlstat:hover{border-color:var(--line-md)}
.hlstat[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.hlstat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hlstat-h{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.hlk-ico{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--c);color:#fff}
.hlk-ico svg{width:15px;height:15px}
.hlstat > b{font-family:var(--display);font-size:34px;font-weight:600;line-height:1.1;color:var(--ink);margin:14px 0 12px;font-variant-numeric:tabular-nums}
.hlstat-f{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.hlstat-f em{font-style:normal;font-weight:600}

/* statuses and ticks */
.hlst{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap}
.hlst i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--c)}
.hlst.sm{font-size:13px;margin-left:10px;color:var(--muted)}
.hlticks{display:inline-flex;gap:2px;height:15px;vertical-align:middle}
.hlticks i{width:3px;border-radius:1px;background:var(--track)}
.hlticks i.on{background:var(--c)}
.hlscore{display:inline-flex;align-items:center;gap:10px}
.hlscore b{min-width:22px;text-align:right;font-weight:650;font-variant-numeric:tabular-nums}

/* tables */
.hltbl{width:100%}
.hltbl th{white-space:nowrap}
.hltbl td{vertical-align:middle;padding-top:12px;padding-bottom:12px}
.hlrow{cursor:pointer}
.hlrow:hover td{background:var(--elevated) !important}
.hlrow:hover .hlt,.hlrow:hover .hlpage code{color:var(--accent)}
.hlrow:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hlidx{width:34px;color:var(--faint);font-size:13.5px;font-variant-numeric:tabular-nums}
.hlt{font-weight:550;color:var(--ink)}
.hltype{width:100px;font-size:14px;color:var(--muted)}
.hlpgs{width:250px;white-space:nowrap}
.hlpgs span{margin-left:12px;font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.hlpgs b{color:var(--ink);font-weight:650}
.hlsev{width:112px}
.hlnf{width:64px}
.hlsort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.hlsort svg{width:10px;height:10px;opacity:.45}
.hlsort:hover,.hlsort.on{color:var(--ink)}
.hlsort.on svg{opacity:1}
.hlpage code,.hltbl code{font-family:var(--mono);font-size:13.5px;color:var(--ink);word-break:normal;overflow-wrap:anywhere}
.hlsub{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.hldesc{display:block;margin-top:5px;font-size:14px;line-height:1.5;color:var(--body);max-width:70ch}
.hlov{width:70px}
.hlov b{font-weight:650;font-size:15px;font-variant-numeric:tabular-nums}
.hlsc-c{width:150px;white-space:nowrap}
.hlworst{width:110px;white-space:nowrap}
.hlpissues .hlsev{width:120px}
.hlnone{color:var(--muted);margin:8px 0 0}
.hlctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hlall,.hllink{all:unset;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent)}
.hlall{display:inline-block;margin-top:14px}
.hlall:hover,.hllink:hover{text-decoration:underline;text-underline-offset:3px}
.hlcols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:14px;margin-top:14px}
.hlcols .hlcard{margin-top:0}
.hlfixed td{font-size:14.5px}
.hlfacts{display:flex;gap:36px;flex-wrap:wrap}
.hlfacts div{display:flex;flex-direction:column}
.hlfacts b{font-family:var(--display);font-size:32px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.hlfacts span{font-size:14px;color:var(--muted)}
.dsh-sub .hlst,.modal-head .hlst{margin-right:2px}
#health .scroll{border:0;background:none;box-shadow:none;padding:0;border-radius:0}

@media (max-width:1100px){
  .hlhero{grid-template-columns:1fr}
  .hlspread-p{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px;margin-top:22px}
  .hlstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hlcols{grid-template-columns:1fr}
  .hltype{display:none}
}
@media (max-width:760px){
  .hlcard{padding:16px 16px 14px;border-radius:14px}
  .hlstats{gap:10px}
  .hlstat{padding:14px 14px 12px;border-radius:14px}
  .hlstat > b{font-size:28px;margin:10px 0}
  .hlstat-f{flex-direction:column;gap:2px}
  .hlscale-h b{font-size:40px}
  .hlscales3{grid-template-columns:1fr;gap:20px}
  .hlspread{--plot:140px;gap:4px}
  .hlspread .hlcc-v{font-size:12px}
  #hl-types .hlstack{overflow-x:auto;padding-left:0}
  #hl-types .hlstack-g{display:none}
  #hl-types .hlcols-chart{min-width:600px;gap:10px}
  .hlcard-h > :is(.hllegend,.hlctl){margin-left:0}
  .hlidx,.hlnf,.hlsc-c .hlticks,.hlpgs .hlticks{display:none}
  .hlpgs{width:auto}.hlpgs span{margin-left:0}
  .hlsc-c{width:auto}
  .hlsev,.hlworst{width:auto}
  .hltbl code{font-size:12.5px}
}
.hlcols{grid-template-columns:1fr}
/* the phone: the issue tables lose their severity column and carry the
   severity's square in front of the title instead */
@media (max-width:760px){
  .hlissues .hlsev{display:none}
  .hlissues td.hlt::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:9px;vertical-align:1px}
  .hlissues .hlpgs{text-align:right}
}
.hlcols{grid-template-columns:minmax(0,1fr)}
.hlcols > .hlcard{min-width:0}
@media (max-width:760px){ .hlpages th.n:not(.hlov),.hlpages td.n:not(.hlov){display:none} }
@media (max-width:760px){ .hlpages .hlsc-c{display:none} .hlpages .hlworst{text-align:right} }