/* ═══════════════════════════════════════════════════════════════════════════
   HERE — the foundation
   The house style for hereandmore. Descended from spotlight's system
   (spotlight/assets/spotlight.html), proven on the halo card, generalised here.

   Rules that are not negotiable:
     · Every text tier is MEASURED against its surface, never chosen by eye.
     · Only transform/opacity/background animate. Never height, width, margin.
     · Press feedback on every pressable. Hover gated behind a real pointer.
     · Numbers are mono + tabular so a ticking value never nudges its neighbours.
     · A value that updates every second is never transitioned.
     · Nothing may depend on a CSS feature without an @supports fallback.

   Contrast, measured on --bg2 #0e0e10 (WCAG AA body 4.5:1, UI/large 3:1):
     --ink 15.46 · --t2 9.57 · --t3 4.78 · --t4 4.23
     --iris 8.42 · --glow 9.84 · --ok 10.18 · --warn 9.02 · --bad 5.91
     button label 9.14–11.28 across its gradient · primary label 13.38–16.03
   ═══════════════════════════════════════════════════════════════════════════ */

.h-scope{
  /* ── surface ─────────────────────────────────────────────────────────── */
  --bg:#0a0a0b;            /* page */
  --bg2:#0e0e10;           /* card */
  --bg3:#131315;           /* raised: menus, sheets, toasts */

  /* ── ink · four tiers, and that is all ───────────────────────────────── */
  --ink:#e8e6e1;                        /* primary text, numbers that matter */
  --t2:rgba(232,230,225,.78);           /* secondary text */
  --t3:rgba(232,230,225,.52);           /* supporting data — the floor for DATA */
  --t4:rgba(232,230,225,.48);           /* labels and decoration ONLY */

  /* ── line ────────────────────────────────────────────────────────────── */
  --line:rgba(255,255,255,.10);         /* 1.28:1 — a divider below this vanishes */
  --line-hi:rgba(255,255,255,.16);      /* section rules */

  /* ── meaning ─────────────────────────────────────────────────────────── */
  --iris:#a9a2f5;   /* yours · focus · active */
  --glow:#c4b8a0;   /* warm · links · value */
  --ok:#5fd37a;     /* live · succeeded */
  --warn:#f0c26a;   /* attention, not failure */
  --bad:#ff6b6b;    /* failed · destructive */
  --grid:rgba(255,255,255,.028);

  /* ── type ────────────────────────────────────────────────────────────── */
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"SF Pro Text",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --fs-kicker:9.5px; --fs-meta:11px; --fs-btn:11.5px; --fs-body:13px;
  --fs-body-lg:14px; --fs-title:15px; --fs-display:28px;
  /* tracking is size-specific: tighten large, LOOSEN small */
  --tr-display:-.03em; --tr-title:-.015em; --tr-body:-.01em;
  --tr-meta:.012em; --tr-kicker:.13em;

  /* ── space · 4px rhythm ──────────────────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --r-sm:7px; --r-md:12px; --r-lg:16px; --r-xl:18px; --r-pill:999px;

  /* ── motion ──────────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,1,.36,1);     /* everything entering or settling */
  --ease-io:cubic-bezier(.77,0,.175,1); /* on-screen movement */
  --micro:160ms;                        /* hover, tone changes */
  --meso:280ms;                         /* arrival, disclosure */
  --press:120ms;                        /* the tactile one */

  /* ── controls ────────────────────────────────────────────────────────── */
  --btn-h:26px; --btn-h-lg:32px; --btn-pad:9px;
  --btn-face:linear-gradient(180deg,rgba(242,241,238,.14),rgba(242,241,238,.06));
  --btn-face-hi:linear-gradient(180deg,rgba(242,241,238,.20),rgba(242,241,238,.10));
  --btn-face-lo:linear-gradient(180deg,rgba(242,241,238,.24),rgba(242,241,238,.14));
  --btn-edge:rgba(255,255,255,.16);
  --btn-lip:inset 0 1px 0 rgba(255,255,255,.10);
  --btn-ink:rgba(232,230,225,.92);
  --pri-face:linear-gradient(180deg,#f9f8f6,#e6e4de);
  --pri-face-hi:linear-gradient(180deg,#fffefc,#eeece6);
  --pri-ink:#1c1c1e;

  /* ── the spine · one grid every row in a card shares ─────────────────── */
  --spine:18px minmax(0,1fr) 74px 58px 28px auto;
  --gut:16px;
}

/* ─────────────────────────────────────────────────────────────────────────
   PAGE
   ───────────────────────────────────────────────────────────────────────── */
.h-page{
  background:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    radial-gradient(900px 500px at 12% -10%,rgba(169,162,245,.07),transparent 55%),
    radial-gradient(700px 400px at 100% 0%,rgba(196,184,160,.05),transparent 50%),
    var(--bg);
  background-size:24px 24px,24px 24px,auto,auto,auto;
  color:var(--ink);font:var(--fs-body)/1.45 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:rgba(169,162,245,.32);color:#fff}

/* ─────────────────────────────────────────────────────────────────────────
   MOTION · declared once, reused everywhere
   ───────────────────────────────────────────────────────────────────────── */
@keyframes h-mat{from{opacity:0;transform:scale(.985) translateY(4px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes h-ring{0%{transform:scale(.62);opacity:.5}70%{opacity:0}100%{transform:scale(1.5);opacity:0}}
@keyframes h-breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.045);opacity:1}}
@keyframes h-rise{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes h-spin{to{transform:rotate(360deg)}}
@keyframes h-shimmer{to{background-position:200% 0}}
@keyframes h-shake{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(2px)}
  50%{transform:translateX(-2px)}}

/* ─────────────────────────────────────────────────────────────────────────
   CARD
   ───────────────────────────────────────────────────────────────────────── */
.h-card{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;animation:h-mat var(--meso) var(--ease) both;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent 120px),
    radial-gradient(420px 260px at 8% -8%,rgba(169,162,245,.16),transparent 62%),
    linear-gradient(180deg,transparent 60%,rgba(0,0,0,.28)),
    var(--bg2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 50px -28px rgba(0,0,0,.9)}
.h-card.flat{background:var(--bg2);box-shadow:none}

/* ─────────────────────────────────────────────────────────────────────────
   TEXT ROLES
   ───────────────────────────────────────────────────────────────────────── */
.h-k{font:600 var(--fs-kicker)/1 var(--mono);letter-spacing:var(--tr-kicker);
  text-transform:uppercase;color:var(--t4);white-space:nowrap}
.h-meta{font:500 var(--fs-meta)/1 var(--mono);color:var(--t3);letter-spacing:var(--tr-meta);
  font-variant-numeric:tabular-nums}
.h-say{font:400 12px/1.55 var(--sans);color:var(--t3);max-width:46em}
.h-num{font:500 12px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;
  letter-spacing:.008em}
.h-title{font:500 var(--fs-title)/1.2 var(--sans);letter-spacing:var(--tr-title);color:var(--ink)}
.h-display{font:500 var(--fs-display)/1.05 var(--sans);letter-spacing:var(--tr-display);
  font-variant-numeric:tabular-nums;color:var(--ink)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .h-display.lit{background:linear-gradient(180deg,#fff,rgba(232,230,225,.74));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
}

/* ─────────────────────────────────────────────────────────────────────────
   BUTTON
   ───────────────────────────────────────────────────────────────────────── */
.h-btn{appearance:none;-webkit-tap-highlight-color:transparent;height:var(--btn-h);
  padding:0 var(--btn-pad);border-radius:var(--r-sm);border:1px solid var(--btn-edge);
  background:var(--btn-face);box-shadow:var(--btn-lip);color:var(--btn-ink);
  font:500 var(--fs-btn)/1 var(--sans);cursor:pointer;flex:none;letter-spacing:-.005em;
  white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  transition:background var(--micro) var(--ease),transform var(--press) var(--ease),
    box-shadow var(--micro) var(--ease),opacity var(--micro) var(--ease)}
.h-btn:has(.gl){padding-left:calc(var(--btn-pad) - 1px)}
.h-btn .gl{font-size:10px;opacity:.72}
@media (hover:hover) and (pointer:fine){.h-btn:hover{background:var(--btn-face-hi)}}
.h-btn:active{background:var(--btn-face-lo);transform:scale(.97);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.h-btn.lg{height:var(--btn-h-lg);padding:0 12px;font-size:12.5px}
.h-btn.pri{background:var(--pri-face);color:var(--pri-ink);border-color:rgba(0,0,0,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(0,0,0,.35)}
.h-btn.pri .gl{opacity:.55}
@media (hover:hover) and (pointer:fine){.h-btn.pri:hover{background:var(--pri-face-hi)}}
.h-btn.pri:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.28)}
.h-btn.bad{color:#ffd9d9;border-color:rgba(255,107,107,.42);
  background:linear-gradient(180deg,rgba(255,107,107,.20),rgba(255,107,107,.09))}
@media (hover:hover) and (pointer:fine){
  .h-btn.bad:hover{background:linear-gradient(180deg,rgba(255,107,107,.28),rgba(255,107,107,.14))}}
.h-btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--t2)}
@media (hover:hover) and (pointer:fine){.h-btn.ghost:hover{background:rgba(242,241,238,.08)}}
/* disabled is a STATE, never a removed button — the shape must persist */
.h-btn[disabled],.h-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed;
  filter:saturate(.5);pointer-events:none}
/* busy: the label stays, a ring spins beside it — never swap the label out */
.h-btn[data-busy] .gl{animation:h-spin .8s linear infinite}
.h-btn[data-busy]{pointer-events:none;opacity:.8}

.h-seg{display:inline-flex;align-items:stretch;border:1px solid var(--btn-edge);
  border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--btn-lip);flex:none;isolation:isolate}
.h-seg .h-btn{border:0;border-radius:0;box-shadow:none}
.h-seg .h-btn+.h-btn{box-shadow:inset 1px 0 0 rgba(0,0,0,.35),inset 2px 0 0 rgba(255,255,255,.07)}
.h-seg .h-btn.pri{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.h-seg .h-btn:focus-visible{z-index:1}

/* one focus treatment for everything focusable */
.h-btn:focus-visible,.h-row.act:focus-visible,.h-sum:focus-visible,.h-input:focus-visible,
.h-menu-item:focus-visible,.h-close:focus-visible{outline:2px solid var(--iris);outline-offset:-2px}

/* ─────────────────────────────────────────────────────────────────────────
   CHIP · KBD · PULSE · MARK
   ───────────────────────────────────────────────────────────────────────── */
.h-chip{display:inline-flex;align-items:center;gap:5px;font:500 var(--fs-meta)/1 var(--mono);
  color:var(--t2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;
  letter-spacing:var(--tr-meta);font-variant-numeric:tabular-nums;white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}
.h-chip .lb{color:var(--t4);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase}
.h-chip.ok{color:var(--ok);border-color:rgba(95,211,122,.34);
  background:linear-gradient(180deg,rgba(95,211,122,.12),rgba(95,211,122,.03))}
.h-chip.warn{color:var(--warn);border-color:rgba(240,194,106,.34);
  background:linear-gradient(180deg,rgba(240,194,106,.12),rgba(240,194,106,.03))}
.h-chip.bad{color:var(--bad);border-color:rgba(255,107,107,.36);
  background:linear-gradient(180deg,rgba(255,107,107,.12),rgba(255,107,107,.03))}
.h-chip.iris{color:var(--iris);border-color:rgba(169,162,245,.36);
  background:linear-gradient(180deg,rgba(169,162,245,.12),rgba(169,162,245,.03))}

kbd.h-key{font:500 var(--fs-meta)/1 var(--mono);color:var(--t3);cursor:default;
  border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:5px 7px;white-space:nowrap;
  letter-spacing:var(--tr-meta);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}

.h-pulse{position:relative;width:7px;height:7px;flex:none;display:inline-block}
.h-pulse .dot{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c9f5d4,var(--ok) 60%);
  box-shadow:0 0 9px rgba(95,211,122,.85)}
.h-pulse .rng{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(95,211,122,.55);
  animation:h-ring 2.8s var(--ease) infinite}
.h-pulse.warn .dot{background:radial-gradient(circle at 35% 30%,#ffe6b4,var(--warn) 60%);
  box-shadow:0 0 9px rgba(240,194,106,.8)}
.h-pulse.bad .dot{background:radial-gradient(circle at 35% 30%,#ffc9c9,var(--bad) 60%);
  box-shadow:0 0 9px rgba(255,107,107,.8)}
.h-pulse.idle .dot{background:rgba(232,230,225,.32);box-shadow:none}
.h-pulse.idle .rng{display:none}

.h-mark{position:relative;width:20px;height:20px;flex:none;transform:translateY(-.5px);
  display:inline-block}
.h-mark .core{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--iris);
  box-shadow:0 0 13px rgba(169,162,245,.4);animation:h-breathe 5.6s var(--ease) infinite}
@supports ((-webkit-mask:radial-gradient(#000,#000)) or (mask:radial-gradient(#000,#000))){
  .h-mark .core{border:0;
    background:conic-gradient(from 210deg,var(--iris),var(--glow) 40%,var(--iris) 72%,rgba(169,162,245,.35));
    -webkit-mask:radial-gradient(circle,transparent 6.2px,#000 6.9px);
    mask:radial-gradient(circle,transparent 6.2px,#000 6.9px)}
}
.h-mark .rng{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(169,162,245,.38);
  animation:h-ring 4.4s var(--ease) infinite}
.h-mark .rng:nth-of-type(2){animation-delay:1.5s}
.h-mark .rng:nth-of-type(3){animation-delay:3s}
.h-mark .spec{position:absolute;top:12%;left:20%;width:34%;height:26%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.9),transparent 70%);filter:blur(1px)}

/* ─────────────────────────────────────────────────────────────────────────
   ROWS ON THE SPINE
   ───────────────────────────────────────────────────────────────────────── */
.h-band{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-5) var(--gut) var(--sp-2)}
.h-rows{display:grid;position:relative}
.h-rows::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hi) 12%,var(--line-hi) 88%,transparent)}
.h-row{position:relative;display:grid;grid-template-columns:var(--spine);align-items:center;
  gap:0 12px;padding:var(--sp-2) var(--gut);min-height:50px;
  animation:h-mat var(--meso) var(--ease) both;transition:background var(--micro) var(--ease)}
.h-row+.h-row::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);
  height:1px;background:linear-gradient(90deg,transparent,var(--line) 8%,var(--line) 92%,transparent)}
.h-rows .h-row:nth-child(2){animation-delay:36ms}
.h-rows .h-row:nth-child(3){animation-delay:72ms}
.h-row.on{background:linear-gradient(90deg,rgba(95,211,122,.075),rgba(95,211,122,.02) 32%,transparent 62%)}
.h-row.on::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(95,211,122,.9),transparent)}
.h-row.bad{background:linear-gradient(90deg,rgba(255,107,107,.09),rgba(255,107,107,.02) 32%,transparent 62%)}
.h-row.bad::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,transparent,rgba(255,107,107,.9),transparent)}
@media (hover:hover) and (pointer:fine){
  .h-row:hover{background:linear-gradient(90deg,rgba(242,241,238,.06),rgba(242,241,238,.02) 60%,transparent)}
  .h-row.on:hover{background:
    linear-gradient(90deg,rgba(95,211,122,.115),rgba(95,211,122,.035) 32%,transparent 62%),
    linear-gradient(90deg,rgba(242,241,238,.05),transparent 60%)}
}
.h-row.act{cursor:pointer;-webkit-tap-highlight-color:transparent;appearance:none;border:0;
  color:var(--ink);text-align:left;font:inherit;width:100%;background:transparent}
.h-row.act:active{background:linear-gradient(90deg,rgba(242,241,238,.11),rgba(242,241,238,.04) 60%,transparent)}
.h-g{grid-column:1;display:flex;align-items:center}
.h-g .caret{font-style:normal;color:var(--iris);font-size:10px;display:inline-block;
  transition:transform 200ms var(--ease)}
.h-who{grid-column:2;min-width:0;display:flex;flex-direction:column;gap:6px;padding:var(--sp-2) 0}
.h-who .nm{font:500 var(--fs-body)/1.25 var(--sans);letter-spacing:var(--tr-body);color:var(--ink)}
.h-specs{display:flex;gap:5px;min-width:0}
.h-specs .sp{font:500 var(--fs-meta)/1 var(--mono);color:var(--t3);border:1px solid var(--line);
  border-radius:6px;padding:4px 7px;letter-spacing:var(--tr-meta);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.h-time{grid-column:3;text-align:right}
.h-val{grid-column:4;text-align:right}
.h-unit{grid-column:5}
.h-time,.h-unit{font:500 var(--fs-meta)/1 var(--mono);color:var(--t3);
  letter-spacing:var(--tr-meta);font-variant-numeric:tabular-nums;white-space:nowrap}
.h-val{font:500 12px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;letter-spacing:.008em}
.h-acts{grid-column:6;display:flex;align-items:center;gap:6px;justify-content:flex-end;flex:none}

.h-more{position:relative}
.h-more::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-hi) 12%,var(--line-hi) 88%,transparent)}
.h-sum{display:flex;align-items:center;gap:12px;padding:var(--sp-3) var(--gut);min-height:44px;
  cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;
  transition:background var(--micro) var(--ease)}
.h-sum::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){
  .h-sum:hover{background:linear-gradient(90deg,rgba(242,241,238,.06),transparent 60%)}}
.h-more[open] .h-sum .caret{transform:rotate(90deg)}

/* ─────────────────────────────────────────────────────────────────────────
   METERS
   ───────────────────────────────────────────────────────────────────────── */
.h-bar{position:relative;height:4px;border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(255,255,255,.05))}
.h-bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  background:linear-gradient(90deg,var(--iris),var(--glow));box-shadow:0 0 10px rgba(169,162,245,.45)}
.h-bar.warn .fill{background:linear-gradient(90deg,var(--warn),#ffe0a3);
  box-shadow:0 0 10px rgba(240,194,106,.45)}
.h-bar.bad .fill{background:linear-gradient(90deg,var(--bad),#ffa8a8);
  box-shadow:0 0 10px rgba(255,107,107,.45)}
/* indeterminate: a travelling sheen, transform-only */
.h-bar.busy .fill{width:34%;animation:h-slide 1.2s var(--ease-io) infinite}
@keyframes h-slide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

/* ─────────────────────────────────────────────────────────────────────────
   FEEDBACK · toast · banner · inline
   Rank: toast = transient and dismissible · banner = persistent condition ·
   inline = attached to the thing that is wrong.
   ───────────────────────────────────────────────────────────────────────── */
.h-toasts{position:fixed;left:50%;bottom:calc(var(--sp-6) + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);display:grid;gap:var(--sp-2);z-index:60;width:min(420px,calc(100vw - 32px))}
.h-toast{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;
  gap:var(--sp-3);padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--line-hi);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),var(--bg3);
  box-shadow:0 16px 40px -20px rgba(0,0,0,.95),var(--btn-lip);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:h-rise var(--meso) var(--ease) both}
.h-toast .ic{width:16px;height:16px;display:grid;place-items:center;font-size:10px;
  border-radius:50%;margin-top:1px;color:var(--bg);background:var(--t2)}
.h-toast .tx{min-width:0}
.h-toast .tx b{display:block;font:500 var(--fs-body)/1.3 var(--sans);color:var(--ink);
  letter-spacing:var(--tr-body)}
.h-toast .tx span{display:block;margin-top:3px;font:400 12px/1.45 var(--sans);color:var(--t3)}
.h-toast .tx code{font:500 11px/1 var(--mono);color:var(--glow);letter-spacing:var(--tr-meta)}
.h-toast.ok .ic{background:var(--ok)}
.h-toast.warn .ic{background:var(--warn)}
.h-toast.bad .ic{background:var(--bad);color:#2a0d0d}
.h-toast.iris .ic{background:var(--iris)}
.h-toast .h-close{appearance:none;background:transparent;border:0;color:var(--t4);cursor:pointer;
  font:500 13px/1 var(--sans);padding:3px 4px;border-radius:5px;
  transition:color var(--micro) var(--ease),background var(--micro) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .h-toast .h-close:hover{color:var(--ink);background:rgba(242,241,238,.08)}}
.h-toast .h-acts{grid-column:2/-1;margin-top:9px;justify-content:flex-start}
/* a toast that is leaving reverses its own arrival */
.h-toast[data-leaving]{animation:h-rise var(--micro) var(--ease) reverse both}

.h-banner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--sp-3);
  align-items:center;padding:11px var(--gut);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.h-banner .tx{font:400 12.5px/1.45 var(--sans);color:var(--t2);min-width:0}
.h-banner .tx b{color:var(--ink);font-weight:600}
.h-banner.warn{background:linear-gradient(90deg,rgba(240,194,106,.10),rgba(240,194,106,.02) 60%,transparent);
  border-color:rgba(240,194,106,.24)}
.h-banner.bad{background:linear-gradient(90deg,rgba(255,107,107,.11),rgba(255,107,107,.03) 60%,transparent);
  border-color:rgba(255,107,107,.26)}
.h-banner.iris{background:linear-gradient(90deg,rgba(169,162,245,.11),rgba(169,162,245,.03) 60%,transparent);
  border-color:rgba(169,162,245,.26)}

.h-inline{display:flex;align-items:flex-start;gap:7px;margin-top:7px;
  font:400 11.5px/1.45 var(--sans);color:var(--bad)}
.h-inline .ic{flex:none;margin-top:1px;font-size:10px}
.h-inline.warn{color:var(--warn)}
.h-inline.ok{color:var(--ok)}

/* ─────────────────────────────────────────────────────────────────────────
   INPUT
   ───────────────────────────────────────────────────────────────────────── */
.h-field{display:grid;gap:6px}
.h-field>label{font:600 var(--fs-kicker)/1 var(--mono);letter-spacing:var(--tr-kicker);
  text-transform:uppercase;color:var(--t4)}
.h-input{appearance:none;width:100%;height:var(--btn-h-lg);padding:0 11px;border-radius:var(--r-sm);
  border:1px solid var(--btn-edge);background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(255,255,255,.03));
  color:var(--ink);font:400 12.5px/1 var(--sans);
  transition:border-color var(--micro) var(--ease),background var(--micro) var(--ease)}
.h-input::placeholder{color:var(--t4)}
.h-input:hover{border-color:rgba(255,255,255,.24)}
.h-input[aria-invalid="true"]{border-color:rgba(255,107,107,.6);
  background:linear-gradient(180deg,rgba(255,107,107,.10),rgba(255,107,107,.02));
  animation:h-shake 320ms var(--ease) 1}
.h-input[disabled]{opacity:.45;cursor:not-allowed}

/* ─────────────────────────────────────────────────────────────────────────
   EMPTY · ERROR · LOADING
   An empty state offers the next act. An error state says what happened,
   what it cost, and what to do — never just "something went wrong".
   ───────────────────────────────────────────────────────────────────────── */
.h-state{display:grid;justify-items:center;text-align:center;gap:var(--sp-3);
  padding:var(--sp-6) var(--gut);animation:h-mat var(--meso) var(--ease) both}
.h-state .em{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-hi);color:var(--t3);font-size:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.h-state.bad .em{border-color:rgba(255,107,107,.32);color:var(--bad);
  background:linear-gradient(180deg,rgba(255,107,107,.10),transparent)}
.h-state .hd{font:500 var(--fs-body-lg)/1.3 var(--sans);color:var(--ink);letter-spacing:var(--tr-body)}
.h-state .sub{font:400 12.5px/1.5 var(--sans);color:var(--t3);max-width:34em}
.h-state .h-acts{justify-content:center;margin-top:2px}
.h-state code{font:500 11px/1 var(--mono);color:var(--glow)}

.h-skel{border-radius:6px;background:
  linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.09) 37%,rgba(255,255,255,.04) 63%);
  background-size:200% 100%;animation:h-shimmer 1.4s linear infinite}
.h-skel.line{height:11px}
.h-skel.title{height:14px}
.h-spin{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);
  border-top-color:var(--iris);animation:h-spin .8s linear infinite;display:inline-block}

/* ─────────────────────────────────────────────────────────────────────────
   OVERLAYS · menu · sheet · tooltip
   ───────────────────────────────────────────────────────────────────────── */
.h-menu{min-width:190px;padding:5px;border-radius:var(--r-md);border:1px solid var(--line-hi);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),var(--bg3);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.95),var(--btn-lip);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:h-mat var(--micro) var(--ease) both}
.h-menu-item{display:flex;align-items:center;gap:9px;width:100%;appearance:none;border:0;
  background:transparent;color:var(--t2);cursor:pointer;text-align:left;
  font:400 12.5px/1 var(--sans);padding:9px 10px;border-radius:6px;
  transition:background var(--micro) var(--ease),color var(--micro) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .h-menu-item:hover{background:rgba(242,241,238,.08);color:var(--ink)}}
.h-menu-item[aria-checked="true"]{color:var(--ink)}
.h-menu-item[aria-checked="true"]::after{content:"✓";margin-left:auto;color:var(--iris);font-size:11px}
.h-menu-sep{height:1px;margin:5px 4px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

.h-sheet{border-radius:var(--r-lg);border:1px solid var(--line-hi);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 140px),var(--bg3);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);animation:h-rise var(--meso) var(--ease) both}
.h-sheet header{padding:var(--sp-4) var(--gut) var(--sp-3);display:flex;align-items:center;gap:10px}
.h-sheet .body{padding:0 var(--gut) var(--sp-4)}
.h-sheet footer{display:flex;gap:7px;justify-content:flex-end;padding:var(--sp-3) var(--gut) var(--sp-4);
  position:relative}
.h-sheet footer::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

.h-tip{font:500 var(--fs-meta)/1.35 var(--mono);color:var(--t2);letter-spacing:var(--tr-meta);
  padding:6px 8px;border-radius:6px;border:1px solid var(--line-hi);background:var(--bg3);
  box-shadow:0 10px 26px -14px rgba(0,0,0,.9);max-width:240px}

/* ─────────────────────────────────────────────────────────────────────────
   UTILITY
   ───────────────────────────────────────────────────────────────────────── */
.h-scroll{overflow:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 18px),transparent);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 18px),transparent)}
.h-rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.h-rule.hi{background:linear-gradient(90deg,transparent,var(--line-hi) 12%,var(--line-hi) 88%,transparent)}
.h-tnum{font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE · CONTRAST · MOTION
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:560px){
  .h-row{grid-template-columns:18px minmax(0,1fr);row-gap:var(--sp-2);padding-bottom:var(--sp-3)}
  .h-who,.h-acts{grid-column:2}
  .h-specs .sp.opt{display:none}
  .h-time,.h-val,.h-unit{display:none}
  .h-acts{justify-content:flex-start}
  .h-toasts{width:calc(100vw - 24px)}
}
@media (prefers-contrast:more){
  .h-scope{--t2:rgba(232,230,225,.92);--t3:rgba(232,230,225,.72);--t4:rgba(232,230,225,.64);
    --line:rgba(255,255,255,.20);--line-hi:rgba(255,255,255,.30);--btn-edge:rgba(255,255,255,.34)}
}
@media (prefers-reduced-motion:reduce){
  .h-card,.h-row,.h-toast,.h-sheet,.h-menu,.h-state{animation:none}
  .h-mark .core{animation:h-breathe 9s var(--ease) infinite}
  .h-mark .rng,.h-pulse .rng{animation:none;opacity:0}
  .h-skel{animation:none;background:rgba(255,255,255,.06)}
  .h-bar.busy .fill{animation:none;width:100%;opacity:.5}
  .h-g .caret,.h-spin{transition:none}
  .h-spin{animation:h-spin 2.4s linear infinite}
  .h-input[aria-invalid="true"]{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATE HOOKS
   Hover, press and focus cannot be photographed. These classes force the real
   declarations so every state is reviewable side by side in the gallery — and
   so a screenshot of the matrix is a truthful record. They carry no styling of
   their own; each one mirrors exactly what the pseudo-class does.
   ═══════════════════════════════════════════════════════════════════════════ */
.h-btn.is-hover{background:var(--btn-face-hi)}
.h-btn.pri.is-hover{background:var(--pri-face-hi)}
.h-btn.bad.is-hover{background:linear-gradient(180deg,rgba(255,107,107,.28),rgba(255,107,107,.14))}
.h-btn.ghost.is-hover{background:rgba(242,241,238,.08)}
.h-btn.is-active{background:var(--btn-face-lo);transform:scale(.97);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.h-btn.pri.is-active{box-shadow:inset 0 1px 3px rgba(0,0,0,.28)}
.h-btn.is-focus,.h-row.is-focus,.h-input.is-focus,.h-menu-item.is-focus{
  outline:2px solid var(--iris);outline-offset:-2px}
.h-row.is-hover{background:linear-gradient(90deg,rgba(242,241,238,.06),rgba(242,241,238,.02) 60%,transparent)}
.h-row.on.is-hover{background:
  linear-gradient(90deg,rgba(95,211,122,.115),rgba(95,211,122,.035) 32%,transparent 62%),
  linear-gradient(90deg,rgba(242,241,238,.05),transparent 60%)}
.h-row.act.is-active{background:linear-gradient(90deg,rgba(242,241,238,.11),rgba(242,241,238,.04) 60%,transparent)}
.h-input.is-hover{border-color:rgba(255,255,255,.24)}
.h-menu-item.is-hover{background:rgba(242,241,238,.08);color:var(--ink)}
.h-sum.is-hover{background:linear-gradient(90deg,rgba(242,241,238,.06),transparent 60%)}
.h-close.is-hover{color:var(--ink);background:rgba(242,241,238,.08)}

/* ═══════════════════════════════════════════════════════════════════════════
   LIVING GLYPHS
   The halo glyph is not drawn in CSS — it IS the stored HERE mark
   (/assets/here-orb.js), and thinking IS the orbs engine
   (/assets/thinking-orbs.js, MIT © Jakub Antalik, vendored via spotlight).
   here-glyph.js mounts both from data-attributes.

   A glyph in motion is never a still frame. Both engines pause off-screen and
   on hidden tabs and honour prefers-reduced-motion — so the mark is live
   whenever it is visible, and still only when stillness was asked for.
   ═══════════════════════════════════════════════════════════════════════════ */
.h-glyph{position:relative;display:inline-block;width:22px;height:22px;flex:none;
  vertical-align:middle}
.h-glyph canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the mark is never missing: a CSS ring holds the place until the engine draws */
.h-glyph::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--iris);opacity:.6;box-shadow:0 0 12px rgba(169,162,245,.35);
  animation:h-breathe 5.6s var(--ease) infinite;transition:opacity var(--micro) var(--ease)}
.h-glyph.mounted::before{opacity:0}
.h-glyph.sm{width:18px;height:18px}
.h-glyph.lg{width:44px;height:44px}
.h-glyph.xl{width:96px;height:96px}

/* THE HAT — igni wears the halo whenever igni is speaking to you unprompted */
.h-glyph.halo::after{content:"";position:absolute;left:6%;right:6%;top:-28%;height:36%;
  border-radius:50%;border:1.5px solid var(--glow);
  box-shadow:0 0 11px rgba(196,184,160,.55),inset 0 0 7px rgba(196,184,160,.28);
  transform:perspective(60px) rotateX(58deg);transform-origin:50% 100%;
  animation:h-halo 3.6s var(--ease) infinite}
@keyframes h-halo{
  0%,100%{transform:perspective(60px) rotateX(58deg) scale(1);opacity:.82}
  50%{transform:perspective(60px) rotateX(58deg) scale(1.07);opacity:1}}

/* thinking orbs — the library's own 20 / 64 sizes */
.h-think{position:relative;display:inline-block;width:20px;height:20px;flex:none;
  vertical-align:middle}
.h-think.lg{width:64px;height:64px}
.h-think canvas{display:block}

/* a notification FROM igni: the mark with its hat, in place of a flat icon dot */
.h-toast.igni .ic{background:none;box-shadow:none;width:22px;height:22px;margin-top:0;
  padding:0}
.h-toast.igni .tx b{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .h-glyph::before{animation:h-breathe 9s var(--ease) infinite}
  .h-glyph.halo::after{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ORB — the estate's glyph, spotlight's recipe (#pet), generalised.
   A radial gradient with an offset highlight, a glow of its own colour, and a
   slow breathe. Legible from 14px to 96px; no canvas, no mount, no blob.
   ═══════════════════════════════════════════════════════════════════════════ */
.h-orb{position:relative;display:inline-block;width:20px;height:20px;flex:none;
  border-radius:50%;border:0;padding:0;vertical-align:middle;
  background:radial-gradient(circle at 35% 32%,#cfcbf9,var(--iris) 58%,#5b53b8);
  box-shadow:0 0 14px rgba(169,162,245,.45);
  animation:h-orb-breathe 4s ease-in-out infinite}
@keyframes h-orb-breathe{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.06);filter:brightness(1.12)}}
.h-orb.igni{background:radial-gradient(circle at 35% 32%,#8ff0a5,var(--ok) 60%,#2c8a4b);
  box-shadow:0 0 16px rgba(95,211,122,.45)}
.h-orb.glow{background:radial-gradient(circle at 35% 32%,#efe7d6,var(--glow) 60%,#7c705a);
  box-shadow:0 0 14px rgba(196,184,160,.42)}
.h-orb.sm{width:15px;height:15px}
.h-orb.lg{width:34px;height:34px}
.h-orb.xl{width:44px;height:44px}
/* the hat — a halo above the orb, always live */
.h-orb.halo::after{content:"";position:absolute;left:2%;right:2%;top:-30%;height:38%;
  border-radius:50%;border:1.5px solid var(--glow);
  box-shadow:0 0 10px rgba(196,184,160,.5);
  transform:perspective(60px) rotateX(58deg);transform-origin:50% 100%;
  animation:h-halo 3.6s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){
  .h-orb{animation:h-orb-breathe 9s ease-in-out infinite}
  .h-orb.halo::after{animation:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD COMPOSITION — the parts a card is built from. These lived only in the
   mock; without them a card renders as unstyled boxes with the right words in
   them, which is exactly how a design "looks fundamentally different".
   ═══════════════════════════════════════════════════════════════════════════ */
.h-head{position:relative;padding:var(--sp-5) var(--gut) var(--sp-4)}
.h-brow{display:flex;align-items:center;gap:var(--sp-3);min-height:32px;position:relative}
.h-big{display:flex;align-items:baseline;gap:var(--sp-2);margin-top:var(--sp-4)}
.h-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-4)}

/* the workspace switcher */
.h-ws{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:30px;
  padding:0 11px;border-radius:var(--r-sm);border:1px solid var(--btn-edge);
  background:var(--btn-face);box-shadow:var(--btn-lip);color:var(--btn-ink);cursor:pointer;
  white-space:nowrap;flex:none;font:500 12px/1 var(--sans);letter-spacing:-.005em;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--micro) var(--ease),transform var(--press) var(--ease)}
@media (hover:hover) and (pointer:fine){.h-ws:hover{background:var(--btn-face-hi)}}
.h-ws:active{background:var(--btn-face-lo);transform:scale(.97)}
.h-ws b{font-weight:600;color:var(--ink)}
.h-ws .cv{color:var(--t4);font-size:10px}

/* an information band — top hairline, quiet type */
.h-info{position:relative;padding:var(--sp-4) var(--gut)}
.h-info::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}

/* the spend week — a day with no spend is a baseline tick, never a small bar */
.h-spend{display:flex;align-items:flex-end;gap:5px;height:40px;margin-top:var(--sp-3);
  position:relative}
.h-spend::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}
.h-spend .bar{flex:1;min-height:6px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#e5dcc8,var(--glow) 35%,rgba(196,184,160,.18));
  box-shadow:0 0 12px rgba(196,184,160,.25)}
.h-spend .nil{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.11)}
.h-days{display:flex;gap:5px;margin-top:7px}
.h-days span{flex:1;text-align:center;font:500 var(--fs-kicker)/1 var(--mono);color:var(--t4);
  letter-spacing:.06em}
.h-days span.now{color:var(--t2)}

.h-foot{position:relative;display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;
  padding:var(--sp-3) var(--gut) var(--sp-4)}
.h-foot::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}

/* ── specs WRAP; they never ellipsise into "8…" ─────────────────────────── */
.h-specs{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.h-specs .sp{overflow:visible;text-overflow:clip;flex:0 0 auto}

/* ── the card responds to ITS OWN width, not the window's ────────────────
   A 1200px window can hold a 380px card — keying layout to the viewport is
   how a design collapses inside a chat column. ───────────────────────────── */
.h-card{container-type:inline-size;container-name:hcard}
@container hcard (max-width:400px){
  /* two rows: the machine, then its numbers and verb on ONE line.
     Every number needs its OWN column — stacking them in one cell overlaps the text. */
  .h-row{grid-template-columns:18px minmax(0,1fr) auto auto auto;align-items:center;
    row-gap:6px;padding-bottom:var(--sp-3)}
  .h-who{grid-column:2/-1;grid-row:1}
  .h-time{grid-column:2;grid-row:2;justify-self:start}
  .h-val{grid-column:3;grid-row:2;text-align:right}
  .h-unit{grid-column:4;grid-row:2}
  .h-acts{grid-column:5;grid-row:2;justify-self:end}
  .h-specs .sp.opt{display:none}
}
}
@container hcard (max-width:400px){
  .h-chips .h-chip:nth-child(n+4){display:none}
  .h-big b{font-size:24px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE LIVING MARK — the Tutte-relaxed geodesic lattice, coloured by its
   Euler-Lagrange tension field. A HERO mark: its glow is drawn in absolute
   pixels, so it only reads at ~200px+. Anything smaller wants .h-orb.
     <span class="h-graph"><span data-here-graph></span><img class="fire" …></span>
   ═══════════════════════════════════════════════════════════════════════════ */
.h-graph{position:relative;display:inline-block;width:220px;height:220px;flex:none}
.h-graph canvas,.h-graph [data-here-graph]{position:absolute;inset:0;width:100%;height:100%}
.h-graph .fire{position:absolute;inset:0;margin:auto;width:25%;height:auto;z-index:2}
.h-graph.sm{width:170px;height:170px}
.h-graph.xl{width:300px;height:300px}
@media (max-width:520px){.h-graph{width:170px;height:170px}}

.h-scope{color:var(--ink);font:var(--fs-body)/1.45 var(--sans)}
.h-scope .cbtn{margin:0}