/* ============================================================================
   assets/hs-struck.css — the back office, struck in metal.

   5 Sep 2026. The rooms were one dark card, one gold hairline and one thin-line
   icon, seven times over — functional, and indistinguishable from every other
   dark dashboard. The emails already had a visual language nobody else in the
   industry has (poured gold, hallmarks, assay meters, Molten/Hot/Warm/Cool).
   This file brings that language into the rooms, as ONE layer over the
   existing pages, so a room keeps its own layout and gains:

     · grain and a forge glow  — black metal is not flat black
     · a poured seam           — a hairline that has just been struck
     · struck marks            — each room's own illustration (.hs-mark)
     · metal by meaning        — a card's edge says what it is for
     · poured buttons          — with a press that depresses

   Every colour is a tenant token (assets/tenant.css). molten / copper /
   silver were added to the record alongside gold, so a second tenant can
   pour different metal. Motion stops for prefers-reduced-motion.
   ========================================================================== */
:root{
  --hs-pour:linear-gradient(145deg,#FBF0D4 0%,var(--hs-brand) 46%,var(--hs-accent) 100%);
  --hs-pour-line:linear-gradient(90deg,var(--hs-accent) 0%,#FBF0D4 42%,var(--hs-brand) 68%,var(--hs-accent) 100%);
  --hs-edge-copper:linear-gradient(180deg,#F0B08A,var(--hs-copper) 60%,#8A5535);
  --hs-edge-silver:linear-gradient(180deg,#F2F5F8,var(--hs-silver) 60%,#7F8A94);
  --hs-edge-gold:linear-gradient(180deg,#FBF0D4,var(--hs-brand) 60%,var(--hs-accent));
  --hs-edge-molten:linear-gradient(180deg,#FFC39A,var(--hs-molten) 60%,#B0431A);
  --hs-edge-platinum:linear-gradient(180deg,#FFFFFF,#E6E9EE 60%,#AEB6BF);
}

/* ── the surface ─────────────────────────────────────────────────────── */
body.hs-struck{position:relative}
body.hs-struck::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 .86 0 0 0 0 .6 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* 30 Sep 2026: the glow was a 900px box (140vw on phones) centred on the page, so
   it hung past both edges. A phone widens its layout to contain that — 469px
   instead of 390 on an iPhone 13 — and then shrinks the whole page to fit, so
   every room rendered about 17% small, text included. The box now spans the page
   exactly and the same-sized glow is painted as its background, centred: the
   part you could see is identical, and nothing pokes past the edge. */
body.hs-struck::after{content:"";position:absolute;left:0;right:0;top:-140px;height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(232,200,120,.16),rgba(255,122,61,.06) 55%,transparent 75%) center top/900px 520px no-repeat}
body.hs-struck > *:not(.hs-skip){position:relative;z-index:1}
body.hs-struck > nav.hs-mnav{z-index:30}
@media(max-width:480px){body.hs-struck::after{background-size:140vw 520px}}

/* ── the poured seam ─────────────────────────────────────────────────── */
.hs-seam{height:2px;background:var(--hs-pour-line);background-size:200% 100%;animation:hs-pour 9s linear infinite;opacity:.9;border-radius:1px}
body.hs-struck header.top,body.hs-struck header.lede{border-bottom:0!important;position:relative}
body.hs-struck header.top::after,body.hs-struck header.lede::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--hs-pour-line);background-size:200% 100%;animation:hs-pour 9s linear infinite;opacity:.9}
@keyframes hs-pour{from{background-position:0 0}to{background-position:200% 0}}

/* ── the struck marks ────────────────────────────────────────────────── */
.hs-mark,body.hs-struck .hallmark{width:64px;height:64px;flex:0 0 auto;color:inherit;
  filter:drop-shadow(0 6px 16px rgba(232,200,120,.28))}
.hs-mark svg,body.hs-struck .hallmark svg{width:100%;height:100%;display:block}
.hs-head{display:flex;gap:18px;align-items:center}

/* ── metal by meaning: a card's edge ─────────────────────────────────── */
body.hs-struck .card{position:relative;overflow:hidden}
body.hs-struck .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hs-edge-gold);opacity:.85}
body.hs-struck .card.copper::before{background:var(--hs-edge-copper)}
body.hs-struck .card.silver::before{background:var(--hs-edge-silver)}
body.hs-struck .card.platinum::before{background:var(--hs-edge-platinum)}
body.hs-struck .card.molten::before{background:var(--hs-edge-molten);box-shadow:0 0 18px rgba(255,122,61,.35)}
body.hs-struck .card.needs::before{background:var(--hs-edge-molten);box-shadow:0 0 14px rgba(255,122,61,.28)}

/* ── heat ─────────────────────────────────────────────────────────────── */
body.hs-struck .pin.hot,body.hs-struck .dna-band.fire{background:rgba(255,122,61,.14);color:var(--hs-molten);box-shadow:0 0 12px rgba(255,122,61,.28)}
body.hs-struck .dna-band.hot{background:rgba(208,138,94,.16);color:#F0B08A}
body.hs-struck .pin.cool,body.hs-struck .dna-band.cool{color:var(--hs-silver);background:rgba(185,196,206,.1)}
body.hs-struck .dna li{border-left:3px solid var(--hs-brand)}
body.hs-struck .dna li.b-fire{border-left-color:var(--hs-molten);box-shadow:-6px 0 18px -8px rgba(255,122,61,.5)}
body.hs-struck .dna li.b-hot{border-left-color:var(--hs-copper)}
body.hs-struck .dna li.b-cool{border-left-color:var(--hs-silver)}

/* ── figures are poured too ──────────────────────────────────────────── */
body.hs-struck .fig .n{background:var(--hs-pour);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ── poured buttons ──────────────────────────────────────────────────── */
body.hs-struck a.cta:not(.quiet):not(.ghost),body.hs-struck button.cta:not(.quiet):not(.ghost),body.hs-struck .btn-gold,body.hs-struck .btn.primary{
  background:var(--hs-brand);background-image:var(--hs-pour);color:var(--hs-on-brand);border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.18),0 4px 14px rgba(232,200,120,.22);transition:transform .12s,box-shadow .12s}
body.hs-struck a.cta:not(.quiet):not(.ghost):hover,body.hs-struck button.cta:not(.quiet):not(.ghost):hover,body.hs-struck .btn-gold:hover{background-image:var(--hs-pour);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.18),0 8px 22px rgba(232,200,120,.32)}
body.hs-struck a.cta:not(.quiet):not(.ghost):active,body.hs-struck button.cta:not(.quiet):not(.ghost):active,body.hs-struck .btn-gold:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}

@media(prefers-reduced-motion:reduce){.hs-seam,body.hs-struck header.top::after{animation:none!important}}