/* ==========================================================================
   /homelab/ — public tour, layered on base.css
   ========================================================================== */

.hl-hero{padding:clamp(36px,7vh,76px) 0 clamp(18px,3vh,28px)}
.hl-hero h1{margin:0;font:600 clamp(40px,6.4vw,72px)/1.02 var(--sans);letter-spacing:-.04em;color:rgb(var(--hi))}
.hl-lede{max-width:760px;margin-top:16px;font:400 clamp(16px,1.6vw,18.5px)/1.6 var(--sans);color:rgb(var(--fg))}
.hl-sec{margin-top:clamp(40px,6vh,64px)}
.hl-p{max-width:760px;font:400 16px/1.65 var(--sans);color:rgb(var(--fg))}
.hl-p code{padding:1px 6px;border-radius:5px;font:500 .9em var(--mono);color:rgb(var(--acc));background:rgb(var(--acc) / .08);border:1px solid rgb(var(--acc) / .25)}

/* ---- live -------------------------------------------------------------- */
.hl-live .h2 .src{margin-left:auto;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:999px;
  color:rgb(var(--dim));border:1px solid rgb(var(--dim) / .4)}
.hl-live .h2 .src[data-state="live"]{color:rgb(var(--acc));border-color:rgb(var(--acc) / .55)}
.hl-live .h2 .src[data-state="live"]::before{content:"● "}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:14px;margin-bottom:14px}
.tile{padding:16px 18px;border-radius:12px;background:rgb(var(--bg) / .6);border:1px solid rgb(var(--acc) / .18);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.t-k{font:500 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--acc))}
.t-k::before{content:"// ";color:rgb(var(--dim))}
.t-v{margin-top:8px;font:700 clamp(28px,3.4vw,38px)/1 var(--mono);color:rgb(var(--hi));font-variant-numeric:tabular-nums}
.t-s{margin-top:8px;font:400 12px/1.4 var(--mono);color:rgb(var(--dim))}
.hl-log{display:grid;gap:6px;padding:16px 20px 18px;font:400 13px/1.5 var(--mono);color:rgb(var(--fg));min-height:120px}
.hl-log li{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:baseline}
.hl-log .lv{font-weight:700}
.hl-log .lv.ok{color:rgb(var(--acc))}.hl-log .lv.info{color:rgb(var(--acc2))}.hl-log .lv.warn{color:rgb(var(--warn))}.hl-log .lv.err{color:rgb(var(--err))}
.hl-log time{color:rgb(var(--dim))}
.hl-log li.dim{display:block}
.hl-feed{margin-top:4px}

/* ---- diagram ------------------------------------------------------------ */
.dg-wrap{padding:18px 16px 12px;overflow-x:auto}
.dg{display:block;width:100%;min-width:720px;height:auto}
.dg-n rect{fill:rgb(var(--bg) / .85);stroke:rgb(var(--fg) / .35);stroke-width:1.2}
.dg-big rect,.dg-acc rect{stroke:rgb(var(--acc) / .85);stroke-width:1.6}
.dg-acc rect{fill:rgb(var(--acc) / .08)}
.dg-ext rect{stroke:rgb(var(--dim) / .6);stroke-dasharray:5 4}
.dg-pub rect{stroke:rgb(var(--acc2) / .8);fill:rgb(var(--acc2) / .06)}
.dg-lan rect{stroke:rgb(var(--warn) / .75);fill:rgb(var(--warn) / .05)}
.dg-obs rect{stroke:rgb(var(--acc2) / .55)}
.dg-h{fill:rgb(var(--hi));font:600 16px var(--sans);text-anchor:middle}
.dg-sm{font-size:13.5px}
.dg-s{fill:rgb(var(--dim));font:400 12.5px var(--mono);text-anchor:middle}
.dg-e{fill:none;stroke:rgb(var(--acc) / .75);stroke-width:1.6}
.dg-dash{stroke:rgb(var(--acc2) / .55);stroke-dasharray:5 5}
.dg-ah{fill:rgb(var(--acc))}
.dg-note{font-size:12px}
@media (prefers-reduced-motion:no-preference){
  .dg-e:not(.dg-dash){stroke-dasharray:6 6;animation:flow 1.6s linear infinite}
}
@keyframes flow{to{stroke-dashoffset:-24}}

/* ---- cards -------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:16px}
.hc{padding:18px 20px}
.hc-l{display:grid;gap:10px;font:400 14.5px/1.55 var(--sans);color:rgb(var(--fg))}
.hc-l li{position:relative;padding-left:18px}
.hc-l li::before{content:"›";position:absolute;left:0;top:-1px;color:rgb(var(--acc));font:700 16px var(--mono)}
.hc-l b{color:rgb(var(--hi));font-weight:600}

@media (max-width:720px){
  .hl-log li{grid-template-columns:auto 1fr}
  .hl-log time{display:none}
}