/* ============================================================================
   Bazoom Backlink Analyzer — redesigned funnel skin
   Ported from the Claude Design "Bazoom Backlink Analyzer.dc.html" prototype.
   The panels themselves are mostly inline-styled in the Blade partials (to keep
   fidelity with the design); this file holds the brand tokens, fonts, keyframes,
   and the step-machine visibility rules the funnel JS drives.
   ========================================================================== */

:root {
  --bz-bg: #1E2B39;
  --bz-panel: #16212E;
  --bz-panel-2: #1B2836;
  --bz-input: #0F1822;
  --bz-green: #00E284;
  --bz-green-ink: #06231A;
  --bz-red: #F26D6D;
  --bz-text: #FFFFFF;
  --bz-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --bz-sans: Inter, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bz-bg); }
body {
  font-family: var(--bz-sans);
  color: var(--bz-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--bz-green); }
a:hover { opacity: 0.8; }
::placeholder { color: rgba(255,255,255,0.35); }

@keyframes bzspin { to { transform: rotate(360deg); } }
@keyframes bzblink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes bzfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.bz-spin { animation: bzspin 0.8s linear infinite; }
.bz-blink { animation: bzblink 1s step-end infinite; }
.bz-fade { animation: bzfade 0.3s ease; }

/* ---- Step machine: only the active panel is shown ---- */
[data-panel] { display: none; }
#analyzer[data-step="landing"]  [data-panel="landing"],
#analyzer[data-step="scanning"] [data-panel="scanning"],
#analyzer[data-step="gate"]     [data-panel="gate"],
#analyzer[data-step="unknown"]  [data-panel="unknown"],
#analyzer[data-step="results"]  [data-panel="results"] { display: block; }

/* ---- Report gate (prospects only) ----------------------------------------
   The full report is rendered but every part of it is blurred — hero, table and
   the whole lower report at one radius — under the gate overlay, which carries
   the dim itself. analyzer.js unlocks by dropping data-report-gate off the
   results section, which lifts blur, dim and card in one go.

   The blur is deliberately identical across all three regions: mixing radii
   (3.5px hero / 7px body) or dimming only part of the stage made the boundaries
   read as seams rather than as one gated surface.

   The card is a viewport-centred fixed overlay, not a block parked level with
   the table: the report is thousands of pixels tall and the table starts a full
   laptop screen below the fold, so an in-flow card left a 13" visitor looking at
   a blurred page with no visible way through it. Fixed means it is on screen the
   moment the report is, and stays there however far they scroll. It also makes
   the card a real modal — it covers the viewport, so nothing behind it can be
   clicked, which is why the nav's Log in / Get started are blurred out with it.

   Stacking: .bz-rg-table / .bz-rg-rest each get a stacking context from their
   own filter and paint at the z-index:auto level, so the fixed card (60) clears
   them and the nav both. Neither .bz-rg-stage nor .bz-rg-wrap may take a
   z-index of its own, and neither may take a filter — a filtered ancestor would
   become the card's containing block and its position:fixed would stop tracking
   the viewport. */
.bz-rg-stage, .bz-rg-wrap { position: relative; }
.bz-rg-card { display: none; }

/* Blurring a full-bleed region can push a few pixels past the client width.
   body already has overflow-x:hidden (which propagates to the viewport, so no
   scrollbar appears), but this stops the overhang counting as document overflow
   at all. `clip` rather than `hidden` — hidden would force the other axis to
   `auto` and turn the section into a scroll container. Scoped to the gated state
   so it is gone, along with the filters, the moment we unlock. */
[data-report-gate="1"] { overflow-x: clip; }

[data-report-gate="1"] .bz-rg-wrap { display: grid; }
[data-report-gate="1"] .bz-rg-wrap > * { grid-area: 1 / 1; }
[data-report-gate="1"] .bz-rg-hero,
[data-report-gate="1"] .bz-rg-table,
[data-report-gate="1"] .bz-rg-rest {
  filter: blur(9px);
  pointer-events: none;
  user-select: none;
}

/* The capture card, as a viewport overlay. overflow-y:auto + margin:auto on the
   inner (rather than align-items:center) so that on a short viewport the card
   scrolls instead of having its top cropped past the reach of the scrollbar. */
[data-report-gate="1"] .bz-rg-card {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: 24px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(8,17,22,0.70);
}
/* The no-gaps card sits on a heavier dim — there is nothing behind it worth
   reading, and the extra weight keeps the amber status line off a busy ground. */
[data-report-gate="1"] .bz-rg-card--empty { background: rgba(8,17,22,0.75); }
[data-report-gate="1"] .bz-rg-card-inner { margin: auto; }

/* ---------------------------------------------------------------------------
   THE GATE CARD (.bz-eg-*) — the design's 2a (gaps found) and 2d (no gaps).
   Kept in CSS rather than inline on the Blade, unlike the rest of the report:
   this component needs focus, hover, placeholder and breakpoint states, and an
   inline style attribute can express none of them.
   Manrope + JetBrains Mono are loaded (non-blocking) in dashboard.blade.php and
   used ONLY here; the report behind the card is Inter and is blurred anyway.
   -------------------------------------------------------------------------- */
.bz-eg {
  width: 620px;
  max-width: 100%;
  background: #0d1a22;
  border: 1px solid rgba(0,226,122,0.28);
  border-radius: 16px;
  padding: 36px 38px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  font-family: Manrope, Inter, system-ui, -apple-system, sans-serif;
}
/* Neutral border on the fallback: an empty scan is not a success state. */
.bz-eg--empty { width: 600px; border-color: #2a3d45; }

/* One vertical rhythm for the card and for the form inside it, so the form's
   fields sit in the same stack as the copy above them. */
.bz-eg-body { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.bz-eg--empty .bz-eg-body { gap: 22px; }
/* display:flex above beats the UA sheet's [hidden]{display:none} on specificity,
   so the no-gaps confirmation would render underneath the form it replaces. */
.bz-eg-body[hidden] { display: none; }

.bz-eg-status {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #00E27A;
}
.bz-eg-status--warn { color: #ffb03a; }

.bz-eg-h {
  margin: 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #ffffff;
  text-wrap: balance;
}
.bz-eg--empty .bz-eg-h { font-size: 32px; line-height: 1.15; }

.bz-eg-sub { margin: 0; font-size: 15px; line-height: 1.6; color: #96a9af; }
.bz-eg-sub strong { color: #e8f1ef; font-weight: 700; }

.bz-eg-names { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* min-width:0 is load-bearing: a grid item defaults to min-width:auto and an
   input's min-content width is its default size="20", so without it the second
   column refuses to shrink and overflows the card. */
.bz-eg-input {
  min-width: 0;
  width: 100%;
  background: #0a151b;
  border: 1px solid #233b45;
  border-radius: 10px;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 15px;
  color: #e8f1ef;
  outline: none;
}
.bz-eg-input::placeholder { color: #5b6b73; }
.bz-eg-input:focus { border-color: #00E27A; }
/* Set by analyzer.js on the field that failed validation. */
.bz-eg-input.is-bad { border-color: #ff6b6b; }

.bz-eg-consent {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: 14px; line-height: 1.5; color: #8ba0a6;
}
.bz-eg-consent input {
  flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #00E27A;
}

.bz-eg-btn {
  background: #00E27A; color: #07130d;
  border: none; border-radius: 10px; padding: 17px;
  font-family: inherit; font-size: 17px; font-weight: 800;
  cursor: pointer; transition: background 120ms ease;
}
.bz-eg-btn:hover { background: #3ff29b; }
.bz-eg-btn[disabled] { opacity: 0.75; cursor: default; }

/* Hidden until analyzer.js puts a message in it — it must not open a 20px gap
   in the stack while empty, which an always-rendered flex child would. */
.bz-eg-error { display: none; margin: -6px 0 0; font-size: 13px; color: #ff6b6b; }
.bz-eg-error.is-shown { display: block; }

.bz-eg-alt {
  align-self: center; font-size: 14px; color: #7d9198;
  text-decoration: none; transition: color 120ms ease;
}
.bz-eg-alt:hover { color: #e8f1ef; opacity: 1; }

.bz-eg-foot {
  margin: 0; text-align: center;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: #61757c;
}

@media (max-width: 640px) {
  .bz-eg, .bz-eg--empty { width: 100%; padding: 28px 20px; }
  .bz-eg-h { font-size: 28px; }
  .bz-eg--empty .bz-eg-h { font-size: 26px; }
  .bz-eg-names { grid-template-columns: 1fr; }
  .bz-eg-input { padding: 15px 16px; min-height: 48px; }
  .bz-eg-btn { min-height: 48px; font-size: 16px; }
}

/* Nav: the overlay swallows every click, so Log in / Get started are dead while
   the gate is up — blur them to the same values as the report so they read that
   way. Keyed off the gated results panel via :has() so it lifts with the gate
   (analyzer.js drops the attribute); the data-step guard keeps the nav sharp
   while the scan terminal is still running, where the results panel exists in
   the DOM but is display:none. Browsers without :has() just keep a sharp nav —
   the overlay still blocks the clicks. */
#analyzer[data-step="results"]:has([data-panel="results"][data-report-gate="1"]) .bz-nav-actions {
  filter: blur(7px);
  opacity: 0.75;
  pointer-events: none;
  user-select: none;
}

/* Buttons reset to the design's look-and-feel by inline style; this is a base. */
button { font-family: var(--bz-sans); }

/* Responsive: collapse the two-column grids the results panel uses. */
@media (max-width: 860px) {
  .bz-grid-2, .bz-grid-3 { grid-template-columns: 1fr !important; }
  .bz-hero-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================================
   Mobile refinements. The panels are inline-styled for design fidelity, so
   inline styles win on specificity — these overrides use !important on the
   handful of semantic classes added to the Blade partials. One block per tier.
   ========================================================================== */

/* Tablet & phone: pull in the big desktop outer paddings and scale the display
   headings down so they stop overflowing the viewport. */
@media (max-width: 720px) {
  .bz-nav     { padding: 18px 20px 12px !important; }
  .bz-landing { padding: 0 20px 120px !important; }
  .bz-results { padding: 28px 20px 72px !important; }
  .bz-scan    { padding: 44px 20px 72px !important; }
  .bz-gate    { padding: 40px 20px 72px !important; }

  .bz-hero-h1    { font-size: 40px !important; }
  .bz-hero-sub   { font-size: 17px !important; }
  .bz-results-h2 { font-size: 40px !important; }
  .bz-scan-h2    { font-size: 26px !important; }
  .bz-gate-h2    { font-size: 28px !important; }

  /* Landing search box: stack the input over a full-width button. */
  .bz-landing-form   { flex-direction: column !important; gap: 8px !important; }
  .bz-landing-submit { width: 100%; padding: 15px 24px !important; }

  /* Result tables scroll sideways instead of crushing their columns. */
  .bz-rank     { overflow-x: auto !important; }
  .bz-rank-row { min-width: 560px; }
  .bz-rec-row  { min-width: 560px; }
}

/* Phones: final tightening pass on the largest headings and dense boxes. */
@media (max-width: 460px) {
  .bz-nav       { padding: 16px 16px 10px !important; }
  .bz-hero-h1    { font-size: 32px !important; }
  .bz-hero-sub   { font-size: 16px !important; }
  .bz-results-h2 { font-size: 33px !important; }
  .bz-gate-h2    { font-size: 24px !important; }
  .bz-scan-h2    { font-size: 23px !important; }

  .bz-gate-form { padding: 20px !important; }
  .bz-rg-card-inner { padding: 20px !important; }
  .bz-scan-term { padding: 16px 15px !important; font-size: 13px !important; }

  /* Blur-gate email capture: stack input + button on the narrowest screens. */
  #mm-gate-fields > div:first-child { flex-direction: column !important; }

  /* Lead gate: First/Last name go one per row rather than two ~110px columns. */
  #gate-form > div:first-child { grid-template-columns: 1fr !important; }
}

/* Report-gate card: the email + submit row sits side by side on desktop and
   stacks once there isn't room for both, well before the phone breakpoint. */
@media (max-width: 620px) {
  .bz-rg-emailrow { flex-direction: column !important; }
  .bz-rg-emailrow > button { width: 100%; padding: 15px !important; }
  .bz-rg-foot { justify-content: center !important; text-align: center; }
}

/* ============================================================================
   CUSTOMER REPORT — open list, row selection, floating shortlist panel.
   Only rendered when $isCustomer (arrived via bazoom.com's ?run=). No red.
   ========================================================================== */

/* Sticky select / add columns: they stay pinned while the competitor grid
   scrolls sideways. The row background is an opaque var so the pinned cells
   cover the scrolled content beneath them; selection/hover just change the var. */
/* Opaque equivalents of the "regular" table (rgba(255,255,255,.0x) over #1E2B39),
   so the pinned sticky cells cover scrolled content yet read identically to the
   translucent prospect matrix. Base = the plain 0.03 panel; selected = green 0.09. */
.mmc-row { --mmc-bg: #25313F; background: var(--mmc-bg); }
.mmc-row:hover { --mmc-bg: #2F3A48; }
.mmc-row.mmc-selected { --mmc-bg: #224145; }
.mmc-head { --mmc-bg: #25313F; }
.mmc-sticky-l { position: sticky; left: 0; z-index: 2; background: var(--mmc-bg); }
.mmc-sticky-r { position: sticky; right: 0; z-index: 2; background: var(--mmc-bg); }
.mmc-hidden { display: none !important; }

/* Selection controls (shared by the matrix and the recommended-links rows). */
.mmc-check-cell { display: flex; align-items: center; }
.mmc-box {
  width: 19px; height: 19px; border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.28); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mmc-add-cell { display: flex; align-items: center; justify-content: flex-end; }
.mmc-add-label {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.45); white-space: nowrap;
}
.mmc-selected .mmc-box { background: #00E284; border-color: #00E284; }
.mmc-selected .mmc-box::after { content: "✓"; color: #1E2B39; font-size: 12px; font-weight: 800; line-height: 1; }
.mmc-selected .mmc-add-label { color: #00E284; }
/* Recommended rows carry an inline highlight background — override when selected. */
.bz-rec-row.mmc-selected { background: rgba(0,226,132,0.09) !important; }

/* Footer buttons. */
.mmc-loadmore {
  background: transparent; color: #FFFFFF; border: 1px solid rgba(255,255,255,0.22);
  font-family: Inter, system-ui, -apple-system, sans-serif; font-weight: 600; font-size: 13px;
  padding: 9px 16px; border-radius: 9px; cursor: pointer;
}
.mmc-loadmore:hover { background: rgba(255,255,255,0.06); }
.mmc-platform {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,226,132,0.14); border: 1px solid rgba(0,226,132,0.4); color: #00E284;
  font-family: Inter, system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 13px;
  padding: 9px 18px; border-radius: 999px; text-decoration: none;
}
.mmc-platform:hover { background: rgba(0,226,132,0.22); }

/* Floating shortlist panel. */
#bz-shortlist {
  position: fixed; bottom: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px);
  width: min(320px, 100vw - 28px); background: #131C25;
  border: 1px solid rgba(0,226,132,0.3); border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.45); z-index: 90; overflow: hidden;
  font-family: Inter, system-ui, -apple-system, sans-serif;
}
#bz-shortlist[hidden] { display: none; }
.bz-sl-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.bz-sl-title { font-weight: 700; font-size: 14.5px; color: #FFFFFF; }
.bz-sl-clear { background: transparent; border: none; color: rgba(255,255,255,0.5); font-size: 12.5px; cursor: pointer; font-family: inherit; }
.bz-sl-clear:hover { color: #FFFFFF; }
.bz-sl-body { max-height: 224px; overflow-y: auto; padding: 6px 0; }
.bz-sl-row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.bz-sl-dom { font-size: 13px; color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.bz-sl-dr { font-size: 12px; color: rgba(255,255,255,0.38); flex-shrink: 0; }
.bz-sl-x { background: transparent; border: none; color: rgba(255,255,255,0.4); cursor: pointer; font-size: 14px; flex-shrink: 0; line-height: 1; }
.bz-sl-x:hover { color: #FFFFFF; }
.bz-sl-foot { padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.bz-sl-note { font-size: 12px; color: rgba(255,255,255,0.5); margin: 0 0 10px; line-height: 1.4; }
.bz-sl-cta { display: block; text-align: center; background: #00E284; color: #1E2B39; font-weight: 700; font-size: 14px; padding: 11px; border-radius: 9px; text-decoration: none; }
.bz-sl-cta:hover { background: #16f193; }