/* ==========================================================
   EON — HOUSE skin, foundation layer (WS-A, 2026-08-06)

   The nine-floor redesign (EON HOUSE, artifact d6ad9394): every
   surface a room of one building, one kinetic signature per room.
   This file ships the FOUNDATION only — the signage voice and the
   shared grammar (plates, lamps, stamps, eyebrows) that the floor
   waves (WS-B..K) adopt surface by surface. Until a floor adopts,
   House renders as Classic dark plus the signage wordmark — that
   is the visible proof the toggle flipped.

   HARD INVARIANT — Classic/Light/Flow must render byte-identical
   with this file loaded: EVERY rule here is scoped under
   [data-theme="house"]. tests/test_theme_house.py parses this file
   and fails on any unscoped selector. Do not add :root, html, body
   or bare-class rules here.

   Tokens: House is a dark-ground skin — it deliberately INHERITS
   the :root dark tokens (the operator's shipped palette). No token
   flip, no light remap; the 2026-07-08 flow lesson (#997: token
   layer flipped, hard-coded surfaces didn't) does not apply.

   Font law (operator, 2026-08-06): Archivo ONLY. Signage voice is
   Archivo 900 at 'wdth' 122 — never a new family.
   ========================================================== */

/* ── 1 · Signage voice — room names, floor numbers, wordmark ── */

[data-theme="house"] .hs-sign,
[data-theme="house"] .brand-name,
[data-theme="house"] .splash-word {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 122;
  letter-spacing: 0.01em;
}

[data-theme="house"] .hs-sign-no {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 122;
  font-size: 0.9em;
  color: var(--accent-text);
  background: var(--accent);
  padding: 0.28em 0.55em 0.22em;
  border-radius: var(--r-sm, 3px);
}

/* ── 2 · Shared grammar the floors adopt (inert until used) ── */

/* mono eyebrow — section voice */
[data-theme="house"] .hs-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
[data-theme="house"] .hs-eyebrow b { color: var(--accent); font-weight: 500; }

/* plate — the "what changed / notes" panel */
[data-theme="house"] .hs-plate {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg, 6px);
  background: var(--bg-elev);
  padding: 16px 18px;
}

/* lamp — live/verdict dot; .ok/.warn/.bad recolor, .live blinks */
[data-theme="house"] .hs-lamp {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
[data-theme="house"] .hs-lamp.ok   { background: var(--ok); }
[data-theme="house"] .hs-lamp.warn { background: var(--warn); }
[data-theme="house"] .hs-lamp.bad  { background: var(--danger); }
[data-theme="house"] .hs-lamp.live { animation: hs-lamp-blink 2.8s ease infinite; }
@keyframes hs-lamp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* stamp — the verdict ceremony (VERIFIED, SCALE, …) */
[data-theme="house"] .hs-stamp {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 122;
  font-size: 0.85em;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--r-sm, 3px);
  padding: 0.3em 0.7em 0.22em;
  transform: rotate(-4deg);
}
[data-theme="house"] .hs-stamp.hs-stamp-in {
  animation: hs-stamp-in 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes hs-stamp-in {
  from { transform: rotate(-4deg) scale(1.6); opacity: 0; }
  to   { transform: rotate(-4deg) scale(1);   opacity: 1; }
}

/* reveal — scroll-entry primitive house_motion.js drives */
[data-theme="house"] .hs-reveal {
  opacity: 0;
  transform: translateY(14px);
}
[data-theme="house"] .hs-reveal.hs-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease var(--hs-d, 0s),
              transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1) var(--hs-d, 0s);
}

/* ── 3 · THE SHOP — floor G's room, shared by both doors ─────
   (HOUSE floor G, the Shutter, WS-C 2026-08-07 → landed 2026-08-29)

   Signing in is the shop opening. The staff PIN door (/login) and the
   owner email door (the SPA's .auth screens) render the SAME room:
   fascia sign, shop window with a roller shutter over it, the pad or
   the form, and a foot bar. That is what "one generation" means — the
   forgot, reset and invite screens stop being bare pages stamped with
   a stale version and join the room they belong to.

   This block lives in house.css rather than either page's stylesheet
   because BOTH doors load this file (index.html and, from floor G,
   login.html). One room, one definition, no drift.

   FLAT LAW: hairlines, squared corners, no glow, no shadow. Numbers in
   var(--mono) + tabular-nums. One accent, spent on the act. */

[data-theme="house"] .hs-shop {
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}

/* the arrival — the room presents itself ONCE, at boot. login.js adds
   .hs-arrive on the first render only; every later render (shared-PIN
   step, retries) rebuilds without it, so the entrance never replays
   mid-act. */
[data-theme="house"] .hs-shop.hs-arrive {
  animation: hs-shop-arrive 0.5s cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes hs-shop-arrive {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* the fascia — the sign over the door */
[data-theme="house"] .hs-fascia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-strong);
}
[data-theme="house"] .hs-fascia-nm {
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
[data-theme="house"] .hs-fascia-nm i {
  font-style: normal;
  color: var(--accent);
}
[data-theme="house"] .hs-fascia-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--line-soft);
  padding: 4px 8px;
}

/* the window — what the shutter is covering */
[data-theme="house"] .hs-window {
  position: relative;
  height: 188px;
  overflow: hidden;
  border-bottom: 1px solid var(--line-strong);
}
[data-theme="house"] .hs-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 0 18px;
  background: var(--bg);
}
[data-theme="house"] .hs-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
[data-theme="house"] .hs-bars i {
  display: block;
  height: 5px;
  background: var(--ink);
}
[data-theme="house"] .hs-bars i:nth-child(1) { width: 44px; }
[data-theme="house"] .hs-bars i:nth-child(2) { width: 30px; background: var(--accent); }
[data-theme="house"] .hs-bars i:nth-child(3) { width: 44px; }

/* the greeting by name — the whole point of the fourth digit. It starts
   narrow (Archivo 'wdth' 75, the counter voice) and settles WIDE into
   the signage voice as the shutter rolls home — the name itself opens
   with the shop. Variable-font axes interpolate; no second family. */
[data-theme="house"] .hs-welcome {
  font-family: var(--display);
  font-weight: 900;
  font-variation-settings: 'wdth' 75;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
}
[data-theme="house"] .hs-signed {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-variation-settings: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0;
}
[data-theme="house"] .hs-shop.hs-open .hs-welcome {
  opacity: 1;
  transform: none;
  font-variation-settings: 'wdth' 122;
  transition: opacity 0.4s ease 0.22s, transform 0.4s ease 0.22s,
              font-variation-settings 0.55s cubic-bezier(0.2, 0.9, 0.2, 1) 0.22s;
}
[data-theme="house"] .hs-shop.hs-open .hs-signed {
  opacity: 1;
  transition: opacity 0.4s ease 0.46s;
}

/* THE SHUTTER — the room's ONE kinetic signature. --hs-lift is written
   by login.js from the PIN digit count and by nothing else: a quarter
   per digit, home on the fourth. No keyframes; the state IS the frame. */
[data-theme="house"] .hs-slats {
  position: absolute;
  inset: 0;
  z-index: 2;
  --hs-lift: 0%;
  transform: translateY(calc(-1 * var(--hs-lift)));
  transition: transform 0.42s cubic-bezier(0.3, 0.8, 0.3, 1);
  border-bottom: 2px solid var(--line-strong);
  background:
    repeating-linear-gradient(180deg,
      var(--bg-card) 0 9px,
      var(--bg) 9px 11px,
      var(--line-strong) 11px 13px);
}
/* refusal: the same travel, taken hard */
[data-theme="house"] .hs-slats.hs-slam {
  transition: transform 0.16s cubic-bezier(0.7, 0, 0.9, 0.4);
}
[data-theme="house"] .hs-coil {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  z-index: 3;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line-strong);
}

/* the pad — everything you touch */
[data-theme="house"] .hs-pad {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-theme="house"] .hs-greet {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-theme="house"] .hs-greet b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
}
[data-theme="house"] .hs-greet span {
  font-size: 13px;
  color: var(--ink-mute);
}
[data-theme="house"] .hs-greet-init {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
[data-theme="house"] .hs-help {
  margin: 0;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}

/* the foot bar — the owner door lives HERE now, not adrift below the card */
[data-theme="house"] .hs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  border-top: 1px solid var(--line-strong);
}
[data-theme="house"] .hs-foot-owner,
[data-theme="house"] .hs-foot-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
[data-theme="house"] .hs-foot-owner { color: var(--ink-mute); }
[data-theme="house"] .hs-foot-owner:hover { color: var(--accent); }
[data-theme="house"] .hs-foot-note { color: var(--ink-mute); }

/* ── 3b · the PIN pad inside the shop (staff door) ───────────
   Same #lg-dots / #lg-pad / .lg-key the classic card uses — the
   mechanics are shared code, only the clothes are new. */

[data-theme="house"] .hs-shop .lg-dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  height: auto;
  margin: 0;
  padding: 2px 0;
}
[data-theme="house"] .hs-shop .lg-dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: transparent;
  transform: none;
}
[data-theme="house"] .hs-shop .lg-dot.on {
  background: var(--accent);
  border-color: var(--accent);
  transform: none;
  animation: hs-dot-pop 0.18s ease;
}
@keyframes hs-dot-pop {
  from { transform: scale(1.45); }
  to   { transform: scale(1); }
}
[data-theme="house"] .hs-shop .lg-dots.bad .lg-dot { border-color: var(--danger); }
[data-theme="house"] .hs-shop .lg-dots.bad .lg-dot.on {
  background: var(--danger);
  border-color: var(--danger);
}
[data-theme="house"] .hs-shop .lg-msg {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  text-align: center;
  color: var(--ink-mute);
}
[data-theme="house"] .hs-shop .lg-msg.err { color: var(--danger); }
[data-theme="house"] .hs-shop .lg-pad {
  gap: 8px;
  max-width: none;
  margin: 0;
}
[data-theme="house"] .hs-shop .lg-key {
  height: 52px;
  border-radius: 0;
  border: 1px solid var(--line-soft);
  background: var(--bg-card);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  color: var(--ink);
  transition: transform 0.08s ease, border-color 0.12s ease;
}
[data-theme="house"] .hs-shop .lg-key:hover { border-color: var(--line-strong); background: var(--bg-card); }
[data-theme="house"] .hs-shop .lg-key:active { transform: scale(0.94); border-color: var(--accent); }
[data-theme="house"] .hs-shop .lg-key-util svg { width: 20px; height: 20px; }

/* shared-PIN disambiguation, kept whole — names only after a correct PIN */
[data-theme="house"] .hs-shop .lg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
[data-theme="house"] .hs-shop .lg-person {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 0;
  padding: 8px 11px;
  border-radius: 0;
  border: 1px solid var(--line-soft);
  background: var(--bg-card);
  animation: none;
  opacity: 1;
  transform: none;
}
[data-theme="house"] .hs-shop .lg-person:hover { border-color: var(--accent); background: var(--bg-card); }
[data-theme="house"] .hs-shop .lg-avatar {
  width: 24px;
  height: 24px;
  font-family: var(--mono);
  font-size: 9px;
  background: var(--bg);
  color: var(--accent);
  box-shadow: none;
  border: 1px solid var(--line-soft);
}
[data-theme="house"] .hs-shop .lg-name { width: auto; font-size: 12.5px; font-weight: 500; }
[data-theme="house"] .hs-shop .lg-role { width: auto; color: var(--ink-mute); }

/* ── 3c · the owner door joins the room ─────────────────────
   One generation: sign-in, forgot, reset and invite all render the
   shop. The aurora and the glass card retire under this skin. */

[data-theme="house"] .hs-auth {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
[data-theme="house"] .hs-shop .auth-form {
  width: 100%;
  max-width: none;
  animation: none;
}
[data-theme="house"] .hs-shop .field { padding: 14px 0 8px; }
[data-theme="house"] .hs-shop .field:focus-within { border-bottom-color: var(--accent); }
[data-theme="house"] .hs-shop .auth-btn {
  margin-top: 20px;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="house"] .hs-shop .auth-btn:hover { transform: none; }
[data-theme="house"] .hs-shop .auth-aux,
[data-theme="house"] .hs-shop .auth-toggle {
  color: var(--ink-mute);
  font-size: 12px;
}
[data-theme="house"] .hs-shop .auth-note {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}
/* the build string, said ONCE and read from the shipped constant */
[data-theme="house"] .hs-foot-build {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* ── 4 · Reduced motion: every house signature goes still ── */

@media (prefers-reduced-motion: reduce) {
  [data-theme="house"] .hs-lamp.live { animation: none; }
  [data-theme="house"] .hs-stamp.hs-stamp-in { animation: none; }
  [data-theme="house"] .hs-reveal,
  [data-theme="house"] .hs-reveal.hs-in { opacity: 1; transform: none; transition: none; }
  /* the shutter still tracks the PIN — it just stops travelling */
  [data-theme="house"] .hs-slats,
  [data-theme="house"] .hs-slats.hs-slam { transition: none; }
  [data-theme="house"] .hs-shop.hs-arrive { animation: none; }
  [data-theme="house"] .hs-shop .lg-dot.on { animation: none; }
  [data-theme="house"] .hs-shop.hs-open .hs-welcome,
  [data-theme="house"] .hs-shop.hs-open .hs-signed { transition: none; }
  [data-theme="house"] .hs-shop .lg-key:active { transform: none; }
}

/* ── Floor 4 · the MER verdict stamp on the home hero ──────────────
   The stamp component above shipped with the foundation and no floor
   called it — the verifier caught that. The home hero's status
   (SCALE / WARN / DANGER / INVESTIGATE) is the operator's daily
   verdict, so it is the stamp's rightful home. Colour still comes
   from the stamp's own accent; semantic status keeps its meaning in
   the word itself, which is how the mockup reads it. */
[data-theme="house"] .mh-hero-stamp {
  align-self: center;
  font-size: 13px;
  letter-spacing: 0.02em;
}