/* ═══════════════════════════════════════════════════════════════
   BRICK TRACKER — HUD v2 "INSTRUMENT"
   ───────────────────────────────────────────────────────────────
   Governing rule:  THE INTERFACE IS JARVIS. THE OBJECTS ARE LEGO.

     Jarvis layer  thin, glowing, precise. Grid ground, hairline
                   frames, corner brackets, connector rails, tick
                   marks, mono micro-labels, scan sweep. Drawn in
                   WHITE at low alpha. This is the intelligence.

     LEGO layer    chunky, physical, tactile. Only things you touch
                   or that stand for a real set: brick buttons, nav
                   plate tabs, the brand mark, gauge studs. YELLOW.

   Palette is deliberately the landing page's: yellow, red, white,
   LEGO black. No new brand colour. The Jarvis read comes from
   weight, structure and motion, not from hue.

   Same class contract as hud.css — swap the stylesheet, not the
   markup. .stud-cap is re-rendered as a corner bracket rather than
   a yellow circle, so every existing card becomes an instrument
   frame without touching a line of HTML.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --yellow:    #F5C100;
  --yellow-lt: #FFD740;
  --yellow-dk: #C49900;
  --red:       #DA0921;
  --red-dk:    #A80718;
  --red-lt:    #FF3B54;
  --green:     #1A7A3C;
  --green-lt:  #2FA555;
  --orange:    #F58A00;
  --black:     #050505;
  --white:     #FFFFFF;

  /* Machine layer — white at graded alpha. Nothing else draws here. */
  --m-100: rgba(255,255,255,0.92);
  --m-70:  rgba(255,255,255,0.62);
  --m-45:  rgba(255,255,255,0.40);
  --m-25:  rgba(255,255,255,0.22);
  --m-12:  rgba(255,255,255,0.11);
  --m-06:  rgba(255,255,255,0.055);
  --m-03:  rgba(255,255,255,0.028);

  --grey:     var(--m-45);
  --grey-mid: var(--m-70);
  --grey-dim: var(--m-25);

  --rail: 1px solid var(--m-12);
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--black); }
body {
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
  padding: 0 22px 40px;
  position: relative;
  /* Technical grid ground. The baseplate texture is gone — studs are
     for objects now, not for the room they sit in. */
  background-image:
    linear-gradient(var(--m-03) 1px, transparent 1px),
    linear-gradient(90deg, var(--m-03) 1px, transparent 1px),
    radial-gradient(ellipse 120% 70% at 50% -10%, rgba(245,193,0,0.055), transparent 62%);
  background-size: 46px 46px, 46px 46px, 100% 100%;
  background-attachment: fixed;
}
@media (max-width: 600px) { body { padding: 0 12px 30px; } }

/* Slow scan sweep — the room is being read, continuously. */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background: linear-gradient(180deg,
    transparent 0%, rgba(255,255,255,0.028) 46%,
    rgba(245,193,0,0.05) 50%, rgba(255,255,255,0.028) 54%, transparent 100%);
  background-size: 100% 260px;
  background-repeat: no-repeat;
  animation: sweep 9s linear infinite;
}
@keyframes sweep { from { background-position: 0 -280px; } to { background-position: 0 110vh; } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; opacity: 0.4; } }

/* ── PREVIEW BADGE ─────────────────────────────────────────── */
.preview-badge {
  position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%);
  z-index: 500;
  background: rgba(218,9,33,0.12);
  border: 1px solid rgba(218,9,33,0.5);
  color: #FF6478;
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: 2px; padding: 4px 12px; border-radius: 3px;
  text-transform: uppercase;
}

/* ── TOP NAV — plate tabs stay LEGO, the rail around them is machine ── */
.top-nav {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 18px;
  padding: 18px 8px 14px;
  max-width: 1180px; margin: 0 auto;
}
.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.logo-mark {
  width: 32px; height: 32px; background: var(--red); border-radius: 5px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 14px rgba(218,9,33,0.35);
}
.logo-stud { background: var(--yellow); border-radius: 50%; }
.logo-wordmark {
  font-family: 'Bebas Neue', sans-serif; font-size: 21px;
  letter-spacing: 2.6px; color: var(--white);
}

.nav-tabs { display: flex; gap: 8px; margin-left: 16px; list-style: none; }
.nav-tab {
  position: relative; display: block; text-decoration: none;
  padding: 8px 17px 7px;
  background: var(--yellow); color: var(--black);
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.5px; border-radius: 5px;
  box-shadow: 0 3px 0 var(--yellow-dk);
  transition: transform 0.14s, box-shadow 0.14s;
}
.nav-tab::before, .nav-tab::after {
  content: ''; position: absolute; top: 3px;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(0,0,0,0.18);
}
.nav-tab::before { left: 6px; } .nav-tab::after { right: 6px; }
.nav-tab:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--yellow-dk); }
.nav-tab.active { background: var(--yellow-lt); box-shadow: 0 3px 0 var(--yellow-dk), 0 0 18px rgba(245,193,0,0.4); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.signin-btn {
  padding: 8px 17px 7px; background: transparent; color: var(--m-70);
  border: 1px solid var(--m-25); border-radius: 5px; text-decoration: none;
  font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; transition: color 0.2s, border-color 0.2s;
}
.signin-btn:hover { color: var(--yellow); border-color: rgba(245,193,0,0.5); }

/* ── TECHNIC BEAM → machine rail with end caps ─────────────── */
.technic-beam {
  position: relative; z-index: 10;
  max-width: 1180px; margin: 0 auto 4px;
  height: 1px; background: var(--m-12);
}
.technic-beam::before, .technic-beam::after {
  content: ''; position: absolute; top: -2px;
  width: 5px; height: 5px; background: var(--yellow); border-radius: 50%;
  box-shadow: 0 0 8px rgba(245,193,0,0.8);
}
.technic-beam::before { left: 0; } .technic-beam::after { right: 0; }

/* ── HERO BAND ─────────────────────────────────────────────── */
.hero-band {
  position: relative; z-index: 10;
  max-width: 1180px; margin: 0 auto;
  padding: 26px 8px 20px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.hero-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: 3px; color: var(--white); line-height: 1;
  position: relative; padding-left: 16px;
}
/* Leading tick — machine layer marking the start of a readout */
.hero-title::before {
  content: ''; position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 3px; background: var(--yellow); box-shadow: 0 0 12px rgba(245,193,0,0.7);
}
.hero-title::after { content: none; }

.hero-scanning {
  display: flex; align-items: center; gap: 9px;
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 2px; color: var(--m-45); text-transform: uppercase;
}
.scanning-dot {
  width: 6px; height: 6px; background: var(--yellow); border-radius: 50%;
  box-shadow: 0 0 9px rgba(245,193,0,0.85);
  animation: scanPulse 1.7s ease-in-out infinite;
}
@keyframes scanPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .scanning-dot { animation: none; } }

/* ── CARD → instrument frame ───────────────────────────────── */
.hud-card {
  position: relative; z-index: 10;
  background: linear-gradient(180deg, var(--m-03), rgba(255,255,255,0.012));
  border: var(--rail);
  border-radius: 4px;
  padding: 22px 24px;
  backdrop-filter: blur(2px);
}
@media (max-width: 600px) { .hud-card { padding: 18px 16px; } }

/* .stud-cap keeps its markup but renders as a corner bracket.
   Studs are reserved for objects; frames get brackets. */
.stud-cap {
  position: absolute; width: 11px; height: 11px;
  border: 0 solid rgba(245,193,0,0.55);
  background: none; border-radius: 0; pointer-events: none;
}
.stud-cap.tl { top: -1px; left: -1px;  border-width: 2px 0 0 2px; }
.stud-cap.tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.stud-cap.bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; }
.stud-cap.br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Card header: mono eyebrow + hairline rail running to the edge */
.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.card-title {
  font-family: 'DM Mono', monospace; font-size: 10px;
  letter-spacing: 2.6px; color: var(--yellow);
  text-transform: uppercase; white-space: nowrap;
}
.card-header::after { content: ''; flex: 1; height: 1px; background: var(--m-12); }
.card-header .card-link {
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: 1.6px; color: var(--m-45);
  text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.card-header .card-link:hover { color: var(--yellow); }

/* ── TELEMETRY — the connective tissue that was missing ────── */
.telemetry {
  display: flex; align-items: center; gap: 0;
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 1.6px; color: var(--m-25);
  text-transform: uppercase; flex-wrap: wrap;
}
.telemetry > span { position: relative; padding: 0 13px; white-space: nowrap; }
.telemetry > span:first-child { padding-left: 0; }
.telemetry > span + span::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 1px; height: 9px; margin-top: -4.5px; background: var(--m-12);
}
.telemetry b { color: var(--m-70); font-weight: 500; }

/* Tick rail — a measured edge, drawn wherever a module needs grounding */
.tick-rail {
  height: 7px; position: relative;
  background-image: linear-gradient(90deg, var(--m-12) 1px, transparent 1px);
  background-size: 11px 100%;
  opacity: 0.85;
}

/* ── LEGO BRICK BUTTONS — the loudest object on the page ─────
   Built as a moulded brick, not a rectangle with nubs:
     · four studs (1x4) drawn as shaded cylinders, tucked under the
       brick's top edge so there is no visible seam
     · top-face highlight + side shading so it reads injection-moulded
     · a hard colour block underneath = the brick's actual thickness
     · a contact shadow beneath that = it is sitting ON the page
   Pressing it compresses the thickness instead of just nudging it.
   No wordmark on the studs — trademark rule. */

.brick-btn {
  --brick:      var(--red);
  --brick-lit:  #FF3348;
  --brick-top:  #F0203A;
  --brick-dark: var(--red-dk);
  --brick-glow: rgba(218,9,33,0.22);

  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 8px;                 /* room for the studs */
  padding: 15px 28px 14px;
  border: none; cursor: pointer;
  color: var(--white);
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  font-size: 13.5px; letter-spacing: 1.4px; text-transform: uppercase;
  text-decoration: none;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--brick-top) 0%, var(--brick) 46%, var(--brick) 100%);
  box-shadow:
    inset 0  1.5px 0 rgba(255,255,255,0.30),   /* moulded top edge      */
    inset  2px 0 0 rgba(255,255,255,0.07),     /* left wall catches light*/
    inset -2px 0 0 rgba(0,0,0,0.16),           /* right wall in shade    */
    inset 0 -3px 0 rgba(0,0,0,0.20),           /* bottom inner shade     */
    0 5px 0 var(--brick-dark),                 /* the brick's thickness  */
    0 8px 14px rgba(0,0,0,0.55),               /* contact shadow         */
    0 0 26px var(--brick-glow);
  transition: transform 0.10s ease, box-shadow 0.10s ease;
}

/* Studs: shaded cylinders. The bottom of each gradient matches the
   brick's top face, so they merge into it instead of floating above. */
.brick-btn .brick-studs {
  position: absolute; top: -7px; left: 13px; right: 13px; height: 11px;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none;
}
.brick-btn .brick-studs span {
  position: relative;
  width: 17px; height: 11px;
  /* Elliptical top, straight sides, flat base into the brick. */
  border-radius: 50% 50% 6% 6% / 68% 68% 8% 8%;
  /* Horizontal ramp = the cylinder's curved wall catching light on the
     left and falling into shade on the right. Vertical ramp lands on the
     brick's own top-face colour so the join is seamless. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(90deg, var(--brick-lit) 0%, var(--brick) 42%,
                           var(--brick) 62%, var(--brick-dark) 100%);
  background-color: var(--brick);
}
/* The flat elliptical cap on top of the cylinder */
.brick-btn .brick-studs span::before {
  content: ''; position: absolute;
  top: 0.5px; left: 1.5px; right: 1.5px; height: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brick-lit), var(--brick));
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.5);
}
/* Contact shadow the stud casts onto the brick face */
.brick-btn .brick-studs span::after {
  content: ''; position: absolute;
  left: 1px; right: -1px; bottom: -2px; height: 3px;
  border-radius: 50%;
  background: rgba(0,0,0,0.30);
  filter: blur(1.5px);
  z-index: -1;
}

.brick-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.34),
    inset  2px 0 0 rgba(255,255,255,0.08),
    inset -2px 0 0 rgba(0,0,0,0.16),
    inset 0 -3px 0 rgba(0,0,0,0.20),
    0 6px 0 var(--brick-dark),
    0 10px 18px rgba(0,0,0,0.6),
    0 0 34px var(--brick-glow);
}
/* Pressed: the brick compresses onto the plate. */
.brick-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.22),
    inset  2px 0 0 rgba(255,255,255,0.05),
    inset -2px 0 0 rgba(0,0,0,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.24),
    0 1px 0 var(--brick-dark),
    0 2px 5px rgba(0,0,0,0.5),
    0 0 18px var(--brick-glow);
}

.brick-btn.brick-yellow {
  --brick:      var(--yellow);
  --brick-lit:  #FFE479;
  --brick-top:  var(--yellow-lt);
  --brick-dark: var(--yellow-dk);
  --brick-glow: rgba(245,193,0,0.24);
  color: var(--black);
}
/* Yellow plastic bounces more light than red, so lift the cap highlight. */
.brick-btn.brick-yellow .brick-studs span::before {
  box-shadow: inset 0 0.5px 0 rgba(255,255,255,0.7);
}
.brick-btn.brick-yellow .brick-studs span::after { background: rgba(0,0,0,0.22); }

@media (prefers-reduced-motion: reduce) {
  .brick-btn { transition: none; }
}

/* ── SELL WINDOW → readout strip, not a box ────────────────── */
.sell-window {
  border: none; border-left: 2px solid var(--m-25);
  background: var(--m-03);
  border-radius: 0 3px 3px 0; padding: 12px 16px;
}
.sell-window.state-sell-now  { border-left-color: var(--green-lt); }
.sell-window.state-hold      { border-left-color: var(--yellow); }
.sell-window.state-too-early { border-left-color: var(--orange); }
.sell-window-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sell-window-label {
  font-family: 'DM Mono', monospace; font-size: 9px;
  letter-spacing: 2px; color: var(--m-45); text-transform: uppercase;
}
.sell-window-state {
  font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 1.8px;
}
.sell-window-state.sell-now  { color: var(--green-lt); }
.sell-window-state.hold      { color: var(--yellow); }
.sell-window-state.too-early { color: var(--orange); }
.sell-window-target {
  font-family: 'Bebas Neue', sans-serif; font-size: 20px;
  letter-spacing: 1px; color: var(--white);
}
.sell-window-catalyst {
  font-family: 'DM Sans', sans-serif; font-size: 12.5px;
  color: var(--m-45); line-height: 1.5; margin-top: 3px; text-transform: none;
}

/* ── RICK'S TAKE — the one warm register, deliberately analogue ── */
.rick-card {
  position: relative; z-index: 10;
  background: linear-gradient(140deg, #2A1C10 0%, #1A120A 60%, #140E07 100%);
  border: 1px solid rgba(196,153,0,0.28);
  border-radius: 4px; padding: 22px 24px;
}
.rick-card .stud-cap { border-color: rgba(255,179,0,0.5); }
.rick-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.rick-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: #C9A227; border: 2px solid rgba(255,179,0,0.45);
  box-shadow: 0 0 18px rgba(255,179,0,0.2);
}
.rick-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 8.5px;
  letter-spacing: 2.4px; color: rgba(255,220,150,0.55); text-transform: uppercase;
}
.rick-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 21px;
  letter-spacing: 2.4px; color: #FFD98A;
}
.rick-body {
  font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.62;
  color: rgba(255,240,214,0.86); max-width: 68ch;
}

/* ── BOTTOM SCAN STRIP ─────────────────────────────────────── */
.scan-strip {
  position: relative; z-index: 10;
  max-width: 1180px; margin: 30px auto 0;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 8px; border-top: var(--rail);
  font-family: 'DM Mono', monospace; font-size: 9.5px;
  letter-spacing: 1.8px; color: var(--m-25); text-transform: uppercase;
}
.scan-left { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.scan-bar { flex: 1; height: 3px; background: var(--m-06); border-radius: 2px; overflow: hidden; min-width: 60px; }
.scan-bar-fill {
  height: 100%; width: 34%;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  animation: scanSlide 3.4s ease-in-out infinite;
}
@keyframes scanSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(390%); } }
@media (prefers-reduced-motion: reduce) { .scan-bar-fill { animation: none; } }
.scan-right { white-space: nowrap; }

@media (max-width: 900px) {
  .nav-tabs { display: none; }
  body { padding: 0 12px 30px; }
}