/* 
========================================================================
AI DESIGN SYSTEM GUIDE: NODEDIFF
========================================================================
INSTRUCTIONS FOR AI AGENTS:
When building or updating pages for this application, you MUST strictly adhere to the following design system. Do NOT introduce new HEX codes, RGB values, or external font families.

1. TYPOGRAPHY:
   - Base Font (Body, paragraphs, UI elements): 'Plus Jakarta Sans', system-ui, sans-serif
   - Headings Font (h1, h2, h3, titles): 'Lora', serif
   - Code/Monospace Font: 'JetBrains Mono', 'SF Mono', Consolas, monospace

2. COLOR PALETTE:
   - Primary Background (Page Bg): #FEFCF4 (Warm off-white)
   - Primary Accent (Brand Color): #6B21A8 (Deep Purple)
   - Primary Text (Black/Dark): #111111
   - Secondary Text (Gray): #4B5563
   - Borders/Dividers: #D1D5DB
   - Callout/Fix Box Background: #FCF4FE (Very light pinkish-purple)

3. COMPONENT RULES:
   - All text should use `var(--text)` on `var(--bg)` background.
   - All primary buttons or prominent links should use `var(--purple)`.
   - Structural boxes (like warnings or fixes) should use `var(--fix-bg)` to stand out softly.

Use the CSS variables defined in the :root block below for ALL styling.
========================================================================
*/

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }/* ── Design Tokens ─────────────────────────────────────────────── */

:root {
  --bg: #FEFCF4;
  --bg-alt: #EDE6FF;
  --purple: #6B21A8;
  --text: #111111;
  --gray: #4B5563;
  --border: #D1D5DB;
  --fix-bg: #FCF4FE;
  --code-bg: #111111; /* Black background for code */
  --code-text: #FFFFFF; /* Pure white text for code */
  --badge-bg: #1A1A1A;
  --badge-text: #FAF9F6;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-headings: 'Lora', serif;
  --mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  counter-reset: section; /* Establishes auto-numbering */
}

/* ── Typography & Rhythm (Fix #1 & #2) ─────────────────────────── */
h1, h2, h3, h4, h5, h6, .section-title, .report-header h1 {
  font-family: var(--font-headings);
}
p, .narrative { 
  margin-bottom: 20px; 
}
.text-gray { 
  color: var(--gray); 
}

/* ── Layout ────────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

.toc {
  position: sticky;
  top: 0;
  width: 240px;
  min-width: 240px;
  height: 100vh;
  overflow: hidden;
  padding: 24px 20px 0 24px;
  border-right: 1px solid rgba(0,0,0,0.05);
  background: var(--bg-alt);
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.toc::-webkit-scrollbar {
  display: none;
}
.toc a {
  display: block;
  font-size: 14px;
  color: var(--gray);
  text-decoration: none;
  padding: 6px 0;
  line-height: 1.4;
  transition: color 0.15s;
}
.toc a:hover, .toc a.active { color: var(--purple); font-weight: 600; }

.main-content {
  flex: 1;
  max-width: 800px; /* Slightly wider for better table layout */
  min-width: 0; /* Add this: properly stops flex children from overflowing the screen */
  margin: 0 auto;
  padding: 48px 40px 120px;
}

/* Right-side spacing placeholder */
.right-spacer {
  width: 240px;
  min-width: 240px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .toc { display: none; }
  .right-spacer { display: none; }
  .main-content { padding: 32px 20px 80px; }
}

/* ── Top Nav (Auth) ────────────────────────────────────────────── */
.top-nav {
  display: flex;
  justify-content: flex-end;
  padding: 20px 40px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
.btn-signin {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--purple);
  background: transparent;
  border: 1px solid var(--purple);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-signin:hover {
  background: var(--purple);
  color: #fff;
}

/* ── Input Screen ──────────────────────────────────────────────── */
.input-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 20px;
}
.input-screen h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: 8px;
}
.input-screen p {
  color: var(--gray);
  margin-bottom: 36px;
}
.input-group {
  width: 100%;
  margin-bottom: 20px;
}
.input-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.input-group input, .input-group select {
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  font-family: var(--font);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.input-group input:focus, .input-group select:focus { border-color: var(--purple); }

.btn-primary {
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font);
  color: #fff;
  background: var(--purple);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 12px;
  transition: opacity 0.15s;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.upload-link {
  margin-top: 20px;
  font-size: 14px;
  color: var(--gray);
}
.upload-link a {
  color: var(--purple);
  cursor: pointer;
  text-decoration: underline;
}

.loading-msg {
  margin-top: 24px;
  font-size: 14px;
  color: var(--gray);
  text-align: center;
}
.error-msg {
  margin-top: 16px;
  font-size: 14px;
  color: #991B1B;
  background: #FEF2F2;
  padding: 10px 14px;
  border-radius: 4px;
}

/* ── Report Header ─────────────────────────────────────────────── */
.report-header {
  margin-bottom: 48px;
}
.report-header h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: 12px;
}
.report-header .meta-line {
  font-size: 14px;
  color: var(--gray);
  line-height: 1.6;
}

/* ── Sections ──────────────────────────────────────────────────── */
.section {
  padding-top: 48px;
  padding-bottom: 24px;
  border-top: 1px solid var(--border);
}
.section:first-of-type { border-top: none; padding-top: 0; }
.section-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: 24px;
}

/* Auto-numbering via pseudo-element (Fix #4) */
.section-title::before {
  counter-increment: section;
  content: counter(section) ". ";
}

/* ── Score Bar ─────────────────────────────────────────────────── */
.score-display { margin-bottom: 24px; }
.score-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.score-number span { font-size: 24px; color: var(--gray); font-weight: 400; }
.score-bar-track {
  width: 100%;
  height: 12px;
  background: #E5E5E5;
  border-radius: 4px;
  margin-top: 12px;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  background: #6B7280;
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* ── Tables ────────────────────────────────────────────────────── */
.table-wrap { 
  margin: 32px 0 0; /* Creates distinct space above tables */
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
  word-break: break-word;
}
.data-table th, .data-table td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
.data-table th {
  font-weight: 500;
  background: #F3F4F6;
}
.data-table td { color: var(--text); }
.table-caption {
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  color: var(--gray);
  margin-top: 8px;
  margin-bottom: 32px; /* Creates spacing below tables */
}

/* ── Category Bars ─────────────────────────────────────────────── */
.cat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
.cat-label { width: 150px; flex-shrink: 0; font-weight: 400; }
.cat-bar-wrap {
  flex: 1;
  height: 10px;
  background: #E5E5E5;
  border-radius: 4px;
  position: relative;
}
.cat-bar-fill {
  height: 100%;
  background: #6B7280;
  border-radius: 4px;
}
.cat-bar-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: #1F2937;
  border-radius: 1px;
}
.cat-score { width: 60px; text-align: right; flex-shrink: 0; color: var(--gray); }
.cat-legend {
  font-size: 13px;
  color: var(--gray);
  margin-top: 12px;
  margin-bottom: 24px;
}

/* ── Heading Tree ──────────────────────────────────────────────── */
.heading-tree { 
  font-family: var(--mono); 
  font-size: 14px; 
  line-height: 1.8; 
  margin: 32px 0; 
  padding: 16px 20px;
  background: #F3F4F6;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.heading-tree .ht-row { display: flex; gap: 8px; }
.heading-tree .ht-level { color: var(--purple); font-weight: 400; width: 28px; flex-shrink: 0; }
.heading-tree .ht-text { color: var(--text); }

/* ── Fix Boxes ─────────────────────────────────────────────────── */
.fix-box {
  background: var(--fix-bg);
  border-radius: 4px;
  padding: 16px 20px; /* Uniform padding, no hacks */
  margin: 32px 0;
}
.fix-box-header {
  font-size: 14px;
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px; /* Space below header */
}
.fix-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
  padding: 8px 0;
}
.fix-line + .fix-line { border-top: 1px solid rgba(0,0,0,0.05); }
.fix-text { flex: 1; }
.fix-instruction {
  line-height: 1.6;
  padding: 8px 0 4px;
  color: var(--text);
}

.code-block {
  background: var(--code-bg);
  color: var(--code-text); /* This makes the font white! */
  border-radius: 4px;
  padding: 56px 16px 16px; /* Protects text from the copy button */
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 12px 0;
  position: relative;
}

.copy-btn {
  position: absolute;
  top: 12px; /* Moved down slightly */
  right: 12px; /* Moved inward slightly */
  font-size: 13px;
  font-weight: 400;
  font-family: var(--font);
  background: #333333; /* Dark grey button sits nicely on black code block */
  color: #ffffff;
  border: 1px solid #555555;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.15s;
}
.copy-btn:hover { background: #555555; }

/* ── Badges ────────────────────────────────────────────────────── */
.badge {
  display: inline;
  font-size: 13px;
  font-weight: 400;
  font-family: var(--font);
  color: var(--gray);
  white-space: nowrap;
}

/* ── Opportunities ─────────────────────────────────────────────── */
.opp-item { margin-bottom: 24px; }
.opp-title { font-weight: 400; font-size: 15px; margin-bottom: 4px; }
.opp-adoption { color: var(--gray); margin-bottom: 4px; }
.opp-commentary { font-size: 15px; margin-top: 4px; }

/* ── All Fixes (Section 15) ────────────────────────────────────── */
.fixes-group-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  margin-top: 20px;
  }
.fixes-group-title:first-child { margin-top: 0; }

/* ── Compact Comparison Grid (crawlers, per-competitor tables) ── */

.compact-grid th, .compact-grid td { padding: 6px 8px; text-align: center; }
.compact-grid td:first-child, .compact-grid th:first-child { text-align: left; font-weight: 400; width: 22%; }
.compact-grid th { line-height: 1.2; word-wrap: break-word; }

/* ── EEAT Signal Lists ────────────────────────────────────────── */
.signal-list { list-style: none; padding: 0; margin: 16px 0; }
.signal-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.signal-item + .signal-item { border-top: 1px solid rgba(0,0,0,0.05); }
.signal-icon { flex-shrink: 0; font-size: 14px; line-height: 1.5; }

/* ── Score Method Note ────────────────────────────────────────── */
.score-method { font-size: 13px; color: var(--gray); margin-top: 16px; line-height: 1.5; }

/* ── Mismatch Banner ─────────────────────────────────────────── */
.mismatch-banner {
  background: #FEF2F2;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 36px;
}
.mismatch-banner .mismatch-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.mismatch-banner p {
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.6;
}
.mismatch-banner p:last-child { margin-bottom: 0; }

/* ── Compatible Banner ──────────────────────────────────────── */
.compatible-banner {
  background: #FFFBEB;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 36px;
}
.compatible-banner .compatible-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.compatible-banner p {
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.6;
}
.compatible-banner p:last-child { margin-bottom: 0; }

/* ── Blueprint Section ─────────────────────────────────────── */
.blueprint-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* ── Utility ───────────────────────────────────────────────── */
.hidden { display: none; }