/* ══════════════════════════════════════════════════════════════════════
   BULK & BANTER — industrial theme
   Loaded via brand.cssUrl, appended after the base build's <style> block
   on every page (hub + all 85 programme files) — see src/worker.ts.

   Scoping discipline: this file loads EVERYWHERE, not just the hub. Every
   rule below is scoped under .hero, .wrap, #sfx-aurora, #sns-idbar, or
   [data-section="house-footer"] — all verified against the 85 programme
   files to have zero name collisions. Do NOT add a bare-class or bare-tag
   rule (e.g. .stat{}, .tag{}, .pin{}, footer{}) without checking it isn't
   also used, with different meaning, inside a programme file — several of
   these exact class names ARE reused there (.stat, .sectitle, .pin, .tag,
   #toast among them). The programmes' own bespoke palettes are deliberately
   untouched by design (see brand-leak-audit-programmes.md, fix L) — this
   stylesheet must not undo that by accident.
   ══════════════════════════════════════════════════════════════════════ */

/* ── type: condensed, heavy, uppercase. No web-font import — see note ──
   No @font-face/Google Fonts import here on purpose: it's one more
   render-blocking or layout-shifting request, and the site's Lighthouse
   score is already flagged (separate, pending conversation). Condensed
   *look* comes from tight letter-spacing + uppercase + heavy weight on a
   system stack that includes real condensed faces where the OS has them,
   falling back gracefully everywhere else rather than silently doing
   nothing. If a true condensed display face is wanted later, that's a
   self-hosted WOFF2 to add deliberately, not a default here. */
:root{
  --industrial-font: "Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
}

/* ── aurora: kill it — the brief asks for hard edges, not drifting mesh ── */
#sfx-aurora{ display:none; }

/* ── body: flat, no ambient glow gradient ──
   Same specificity as the base body{} rule, later in the cascade (this
   file is appended after the base <style> block) — wins without !important. */
body{
  background: var(--bg);
}

/* ── hero: logo frame — hard edge, steel/red frame, no glow ── */
.hero .logowrap{
  border-radius: 2px;
  padding: 3px;
  background: linear-gradient(135deg, #2b2b2e 0%, #101012 55%, var(--pink) 100%);
  box-shadow: none;
}
.hero .logoframe{
  border-radius: 0;
}
.hero .logo{
  border-radius: 0;
}
/* kill the animated glass-sweep shine — content:none removes a ::after
   entirely, cheaper and more reliable than trying to zero out its
   animation/background piecemeal */
.hero .logoframe::after{
  content: none;
}
/* vignette (::before) stays — it's a dark inset shadow, not a glow, reads
   as depth rather than softness and doesn't fight the industrial direction */

/* sparks: soft floating glow dots are the opposite of the brief — kill
   the whole effect rather than trying to reshape 14 randomly-positioned
   circles into something hard-edged */
.hero .sparks{
  display: none;
}

/* wordmark: condensed, uppercase, heavy, chrome sweep. This is the one
   deliberate exception to "flat and industrial everywhere" — the hero
   wordmark is the sole animated/glowing element on the page. Everything
   else in this file stays hard-edged and static; do not let glow creep
   back onto .logoframe/.sparks/.roastbar etc. under cover of this rule. */
.hero .word{
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: -1px;
  font-weight: 900;
}

.hero .word .a,
.hero .word .b{
  background-repeat: no-repeat;
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* no text-shadow: with a transparent fill the shadow casts from the
     glyph shape behind the clip, which reads as a blur, not a glow. The
     ember edge lives in the gradient's own dark stops below instead. */
  animation: bbChrome 5s ease-in-out infinite;
}

.hero .word .a{
  /* red-tinted steel; dark stops are ember-red (#4a0f0f), not neutral
     grey/black, so the "shadow" side of the chrome reads warm */
  background-image: linear-gradient(100deg,
    #4a0f0f 0%, #a83232 22%, #ffe3e3 38%, #ff8080 46%,
    #a83232 60%, #4a0f0f 80%, #4a0f0f 100%);
}

.hero .word .b{
  /* blue-tinted steel; dark stops stay cool so the palette split against
     .a still reads at a glance rather than both sides converging on red */
  background-image: linear-gradient(100deg,
    #0a1230 0%, #3b5bd9 22%, #eef2ff 38%, #6b8bff 46%,
    #3b5bd9 60%, #0a1230 80%, #0a1230 100%);
  animation-delay: .4s; /* a/b don't sweep in lockstep */
}

.hero .word .amp{
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,.5);
}

.hero .word::after{
  content: none;
}

/* single-direction sweep + dwell: highlight crosses in the first ~30% of
   the cycle, holds through the rest, then snaps back at the loop point —
   invisible because both ends sit on the gradient's flat dark stop. */
@keyframes bbChrome{
  0%   { background-position: 130% 0; }
  30%  { background-position: -30% 0; }
  100% { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce){
  .hero .word .a,
  .hero .word .b{
    animation: none;
    background-position: 35% 0; /* highlight band parked on the letterforms — must be legible on its own, not just match the animated resting frame (which sits on the flat dark stop and is unreadable without the sweep) */
  }
}

.hero .tag{
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.hero .tag2{
  font-family: var(--industrial-font);
}
.hero .trust{
  font-family: var(--industrial-font);
  letter-spacing: .3px;
}

/* ── section headings ── */
.wrap .sectitle{
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
}
.wrap .sectitle .n{
  border-radius: 0;
}

/* ── stat tiles: flatten — hard border, no card elevation ── */
.wrap .stat{
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
}
.wrap .stat b{
  font-family: var(--industrial-font);
  font-weight: 900;
}

/* ── roast bar → hazard/warning panel ──
   Base version: animated rainbow gradient border, soft glow shadow.
   Industrial version: static hazard-stripe frame (same visual language
   the Shredder programme file already uses for its own hazard strip —
   borrowing a pattern that already exists in this codebase rather than
   inventing a new one), hard inner border, no animation, no glow. */
.wrap .roastbar{
  border-radius: 2px;
  padding: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--gold) 0 14px,
    #0a0a0a 14px 28px
  );
  background-size: auto;
  animation: none;
  box-shadow: none;
}
.wrap .roastinner{
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--card);
}
.wrap .roastlbl{
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--pink);
}
.wrap .roastbtn{
  border-radius: 0;
  background: var(--pink);
  box-shadow: none;
  animation: none;
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid var(--pinkhot);
}

/* ── search ── */
.wrap .searchwrap input,
.wrap #q{
  border-radius: 0;
}
.wrap #q:focus{
  box-shadow: none;
  border-color: var(--pink);
}

/* ── filter chips: square, not pill ── */
.wrap .fchip{
  border-radius: 2px;
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ── continue bar ── */
.wrap .contbar{
  border-radius: 0;
  border: 1px solid var(--line);
}

/* ── programme cards: hard edge, border instead of shadow ── */
.wrap .ccard{
  border-radius: 2px;
}
.wrap .ccard-in{
  border-radius: 0;
  border: 1px solid var(--line);
}
.wrap .ccard:hover{
  transform: none;
}
.wrap .ccard-name{
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* ── version pills, badges ── */
.wrap .vpill{
  border-radius: 2px;
}
.wrap .warnpill{
  border-radius: 2px;
}
.wrap .pin{
  border-radius: 2px;
}
.wrap .flag{
  border-radius: 2px;
}

/* ── empty state, shop CTA, footer ── */
.wrap .none{
  border-radius: 0;
  border: 1px solid var(--line);
}
.wrap .shopall{
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: .5px;
}
[data-section="house-footer"]{
  font-family: var(--industrial-font);
  letter-spacing: .3px;
}

/* ── #sns-idbar: the programme-page identity strip ──
   Base version left-aligns logo+name. Centred here per request — this is
   why the strip's CSS had to move ahead of this stylesheet in document
   order (see identityBarCss/identityBarHtml in worker.ts): without that
   fix this rule would silently lose to the strip's own baseline styles. */
#sns-idbar{
  justify-content: center;
  border-radius: 0;
  border-bottom: 2px solid var(--pink);
  box-shadow: none;
  font-family: var(--industrial-font);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#sns-idbar img{
  border-radius: 0;
}