/* ============================================================
   README CLEW — Design system v1.5
   ============================================================ */

:root {
  /* Surfaces */
  --paper:        #F5F0E0;
  --paper-warm:   #EDE5C6;
  --paper-deep:   #E2D9B5;
  --paper-inset:  rgba(0, 0, 0, 0.03);

  /* Text */
  --ink:          #18180F;
  --ink-soft:     #3A3628;
  --ink-faded:    #6B6455;

  /* Accent */
  --gold:         #B8872C;
  --gold-text:    #7A5C18;   /* darker bronze — 5.4:1 on --paper, WCAG AA */
  --gold-mid:     rgba(184, 135, 44, 0.25);
  --gold-light:   rgba(184, 135, 44, 0.10);

  /* Brand */
  --blue:         #1A3380;
  --blue-mid:     #2244A0;
  --blue-deep:    #101F55;

  /* Buckets */
  --teal:         #00787D;
  --teal-light:   rgba(0, 120, 125, 0.08);
  --amber:        #C97800;
  --amber-text:   #8B5500;   /* 5.3:1 on --paper, WCAG AA */
  --amber-light:  rgba(201, 120, 0, 0.08);
  --oxblood:      #8B1F3F;
  --oxblood-light:rgba(139, 31, 63, 0.08);
  --slate:        #4A5568;
  --slate-light:  rgba(74, 85, 104, 0.06);

  /* Strokes */
  --rule:         rgba(24, 24, 15, 0.10);
  --rule-gold:    rgba(184, 135, 44, 0.30);
  --border:       rgba(24, 24, 15, 0.18);

  /* Spacing — 8px baseline */
  --xs:  4px;
  --sm:  8px;
  --md:  16px;
  --lg:  24px;
  --xl:  40px;
  --2xl: 64px;
  --3xl: 96px;
}

/* ============================================================
   Reset + base
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* ============================================================
   CHANGE 2 — Faint blue circuit texture
   Single-color SVG pattern at ~5% opacity; ink-on-paper WCAG AA unaffected.
   ============================================================ */

body {
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PHBhdGggZD0iTTAgMjAgSDIwIFYwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjYsNTEsMTI4LC4wNSkiIHN0cm9rZS13aWR0aD0iLjc1Ii8+PHBhdGggZD0iTTYwIDQwIEg0MCBWNjAiIGZpbGw9Im5vbmUiIHN0cm9rZT0icmdiYSgyNiw1MSwxMjgsLjA1KSIgc3Ryb2tlLXdpZHRoPSIuNzUiLz48bGluZSB4MT0iMjAiIHkxPSIyMCIgeDI9IjQwIiB5Mj0iMjAiIHN0cm9rZT0icmdiYSgyNiw1MSwxMjgsLjA1KSIgc3Ryb2tlLXdpZHRoPSIuNzUiLz48bGluZSB4MT0iNDAiIHkxPSIyMCIgeDI9IjQwIiB5Mj0iNDAiIHN0cm9rZT0icmdiYSgyNiw1MSwxMjgsLjA1KSIgc3Ryb2tlLXdpZHRoPSIuNzUiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIyIiBmaWxsPSJyZ2JhKDI2LDUxLDEyOCwuMDYpIi8+PGNpcmNsZSBjeD0iNDAiIGN5PSI0MCIgcj0iMiIgZmlsbD0icmdiYSgyNiw1MSwxMjgsLjA2KSIvPjxjaXJjbGUgY3g9IjQwIiBjeT0iMjAiIHI9IjEuNSIgZmlsbD0icmdiYSgyNiw1MSwxMjgsLjA2KSIvPjxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIxIiBmaWxsPSJyZ2JhKDI2LDUxLDEyOCwuMDQpIi8+PGNpcmNsZSBjeD0iNjAiIGN5PSI2MCIgcj0iMSIgZmlsbD0icmdiYSgyNiw1MSwxMjgsLjA0KSIvPjwvc3ZnPg==");
  background-size: 60px 60px;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
}

/* ============================================================
   App shell
   ============================================================ */

#app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--lg);
  position: relative;
  /* No background override — body circuit texture shows through the full page surface */
}

@media (min-width: 700px) {
  #app {
    padding: 0 var(--2xl);
    /* 12px all-around so the outer outline rule never clips the viewport edge */
    margin: 12px;
  }
}

@media (min-width: 1128px) {
  #app {
    margin: 12px auto;
    max-width: 1440px;
  }
}

/* ============================================================
   CHANGE 1 — Page border chrome (desktop only)
   Inner hairline (border) + 8px gap + outer hairline (outline).
   Corner fleurons via ::before / ::after on #app and .page-frame.
   ============================================================ */

@media (min-width: 700px) {
  #app {
    border: 1px solid var(--rule-gold);
    outline: 1px solid var(--rule-gold);
    outline-offset: 8px;
  }

  /* ❦ at top-left and bottom-right */
  #app::before,
  #app::after {
    position: absolute;
    font-family: 'EB Garamond', serif;
    font-size: 0.88rem;
    color: var(--gold);
    line-height: 1;
    background: var(--paper);
    padding: 0 3px;
    z-index: 2;
  }
  #app::before { content: '❦'; top: -0.58em; left: -0.58em; }
  #app::after  { content: '❦'; bottom: -0.58em; right: -0.58em; }

  /* ❧ at top-right and bottom-left via .page-frame pseudo-elements */
  .page-frame {
    display: block;
    position: absolute;
    inset: -1px;
    pointer-events: none;
    z-index: 2;
  }
  .page-frame::before,
  .page-frame::after {
    position: absolute;
    font-family: 'EB Garamond', serif;
    font-size: 0.88rem;
    color: var(--gold);
    line-height: 1;
    background: var(--paper);
    padding: 0 3px;
  }
  .page-frame::before { content: '❧'; top: -0.58em; right: -0.58em; }
  .page-frame::after  { content: '❧'; bottom: -0.58em; left: -0.58em; }
}

@media (max-width: 699px) {
  .page-frame { display: none; }
  #app { border: 1px solid var(--rule-gold); }
}

/* ============================================================
   Accessibility
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   State machine
   ============================================================ */

.state { display: none; }
.state.active {
  display: block;
  animation: state-fadein 0.28s ease forwards;
}

@keyframes state-fadein {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Wordmark — shared
   ============================================================ */

.wordmark {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 800;
  font-size: 3.6rem;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: lowercase;
}

.wordmark .dot { color: var(--gold); }

.wordmark--sm {
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

@media (min-width: 700px) {
  .wordmark     { font-size: 4.5rem; }
  .wordmark--sm { font-size: 1.75rem; }
}

.tagline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* ============================================================
   LANDING — two-column hero
   ============================================================ */

.landing-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--xl);
  padding: var(--xl) 0 var(--lg);
}

@media (min-width: 900px) {
  .landing-hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--2xl);
    padding: var(--2xl) 0 var(--xl);
  }
}

/* Artwork always above / to the left of the form at every viewport */
.hero-artwork { order: 1; }
.hero-lead    { order: 2; }

.hero-artwork {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover-artwork {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  border: 1px solid var(--rule-gold);
  box-shadow: 0 6px 32px rgba(24, 24, 15, 0.14), 0 2px 6px rgba(24, 24, 15, 0.08);
}

.hero-lead {
  display: flex;
  flex-direction: column;
  gap: var(--md);
}

.form-footer {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
}

.wordmark-block { margin-bottom: var(--xs); }

.lede {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 46ch;
}

.lede em { font-style: italic; }

@media (min-width: 900px) {
  .lede { font-size: 1.3rem; }
}

/* ============================================================
   Scan form
   ============================================================ */

.scan-form {
  display: flex;
  flex-direction: column;
  gap: var(--sm);
}

@media (min-width: 480px) {
  .scan-form {
    flex-direction: row;
    align-items: stretch;
  }
}

.input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: white;
  border: 1.5px solid var(--border);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 51, 128, 0.12);
}

.scan-form input[type="url"] {
  flex: 1;
  min-width: 0;
  padding: 14px 14px 14px 16px;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.88rem;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.scan-form input[type="url"]::placeholder {
  color: var(--ink-faded);
  opacity: 0.45;
  font-style: italic;
}

.scan-form button {
  padding: 0 var(--xl);
  background: var(--blue);
  color: var(--paper);
  border: 1.5px solid var(--blue);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  min-height: 50px;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.scan-form button:hover {
  background: var(--blue-mid);
  border-color: var(--blue-mid);
}

.scan-form button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.scan-form button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.input-error {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  color: var(--oxblood);
  min-height: 1.2em;
  letter-spacing: 0.02em;
}

/* ============================================================
   Ornamental dividers
   ============================================================ */

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--md);
  margin: var(--xl) 0;
}

.rule::before,
.rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-gold);
}

.fleuron {
  font-family: 'EB Garamond', serif;
  font-size: 1.3rem;
  color: var(--gold);
  line-height: 1;
}

/* ============================================================
   Colophon
   ============================================================ */

.colophon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--xl) var(--2xl);
  margin-bottom: var(--xl);
}

@media (max-width: 600px) {
  .colophon { grid-template-columns: 1fr; gap: var(--xl); }
}

.colophon-header {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: var(--md);
}

.colophon-col:last-child .colophon-header { color: var(--ink-faded); }

.colophon-col p {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* Bullet items — every <p> that isn't the header gets a gold mid-dot */
.colophon-col p:not(.colophon-header) {
  padding-left: 1.2em;
  position: relative;
  margin-top: 8px;
}

.colophon-col p:not(.colophon-header)::before {
  content: '·';
  position: absolute;
  left: 0.1em;
  top: 0;
  color: var(--gold);
  font-size: 1.1em;
  line-height: 1.75;
}

/* ============================================================
   Example cards (landing page)
   ============================================================ */

.example-cards {
  margin: var(--lg) 0 var(--md);
}

.example-cards-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: var(--lg);
}

.example-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--md);
}

@media (max-width: 600px) {
  .example-cards-grid { grid-template-columns: 1fr; }
}

.example-card {
  background: var(--paper-inset);
  border-left: 3px solid var(--rule);
  padding: var(--md) var(--lg);
  display: flex;
  gap: var(--sm);
  align-items: flex-start;
}

.example-card--verified     { border-left-color: var(--teal); }
.example-card--unverifiable { border-left-color: var(--slate); }
.example-card--missing      { border-left-color: var(--amber); }
.example-card--contradicted { border-left-color: var(--oxblood); }

.example-card-symbol {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.45;
  flex-shrink: 0;
}

.example-card--verified     .example-card-symbol { color: var(--teal); }
.example-card--unverifiable .example-card-symbol { color: var(--slate); }
.example-card--missing      .example-card-symbol { color: var(--amber); }
.example-card--contradicted .example-card-symbol { color: var(--oxblood); }

.example-card-body {
  flex: 1;
  min-width: 0;
}

.example-card-readme {
  font-family: 'EB Garamond', serif;
  font-size: 1.08rem;
  line-height: 1.5;
  margin-bottom: 8px;
}

.example-card-lead {
  color: var(--ink-faded);
  font-style: italic;
}

.example-card-quote {
  color: var(--ink);
}

.example-card-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.example-card-code code {
  color: var(--blue);
  font-size: inherit;
}

.example-card-verdict {
  color: var(--ink-faded);
}

.example-card-file {
  display: inline-block;
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--ink-faded);
  border-bottom: 1px solid var(--rule-gold);
  letter-spacing: 0.03em;
}

/* ============================================================
   Loading state
   ============================================================ */

.loading-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  gap: var(--2xl);
  text-align: center;
}

.loading-wordmark { opacity: 0.6; }

.loading-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md);
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid var(--gold-mid);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.loading-sub {
  font-family: 'EB Garamond', serif;
  font-size: 1.05rem;
  color: var(--ink-faded);
  font-style: italic;
}

.verifier-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: var(--lg);
  width: 260px;
  text-align: left;
}

.verifier-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faded);
  transition: color 0.35s ease;
}

.vr-symbol {
  width: 1ch;
  flex-shrink: 0;
  text-align: center;
  transition: color 0.35s ease;
}

.vr-name {
  flex: 1;
  min-width: 0;
}

.vr-status {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--ink-faded);
  white-space: nowrap;
}

/* pending — barely visible */
.verifier-row[data-state="pending"] {
  opacity: 0.3;
}

/* checking — pulsing */
.verifier-row[data-state="checking"] {
  opacity: 1;
  color: var(--ink-soft);
  animation: vr-pulse 1.4s ease-in-out infinite;
}

@keyframes vr-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}

/* done — full colour per verifier, no pulse */
.verifier-row[data-state="done"] {
  opacity: 1;
  animation: none;
}

.verifier-row[data-verifier="dependencies"][data-state="done"] { color: var(--teal); }
.verifier-row[data-verifier="commands"][data-state="done"]     { color: var(--amber-text); }
.verifier-row[data-verifier="envvars"][data-state="done"]      { color: var(--blue); }
.verifier-row[data-verifier="references"][data-state="done"]   { color: var(--slate); }
.verifier-row[data-verifier="coverage"][data-state="done"]     { color: var(--gold); }

/* ============================================================
   Results — top bar
   ============================================================ */

.results-home-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.results-home-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.results-topbar {
  display: flex;
  align-items: center;
  padding: var(--lg) 0 var(--md);
  border-bottom: 1px solid var(--rule-gold);
  margin-bottom: var(--lg);
}

.results-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faded);
  margin-bottom: var(--lg);
}

.results-meta strong {
  color: var(--ink-soft);
  font-weight: 500;
}

/* ============================================================
   Stats bar — reduced weight, supports the narrative
   ============================================================ */

.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: var(--xl);
  border-top: 1px solid var(--rule-gold);
  border-bottom: 1px solid var(--rule-gold);
}

@media (max-width: 480px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--md) var(--md) var(--sm);
  gap: 3px;
  background: transparent;
  text-align: center;
}

.stat-count {
  font-family: 'EB Garamond', serif;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-symbol {
  font-size: 0.75rem;
  font-family: 'IBM Plex Mono', monospace;
}

.stat-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.stat-verified     .stat-count { color: var(--teal); }
.stat-unverifiable .stat-count { color: var(--slate); }
.stat-missing      .stat-count { color: var(--amber-text); }
.stat-contradicted .stat-count { color: var(--oxblood); }
.stat-contradicted.stat--zero  .stat-count { color: var(--teal); }

.stat-verified   .stat-symbol,
.stat-verified   .stat-label,
.stat-unverifiable .stat-symbol,
.stat-unverifiable .stat-label,
.stat-missing    .stat-symbol,
.stat-missing    .stat-label,
.stat-contradicted .stat-symbol,
.stat-contradicted .stat-label { color: var(--ink-soft); }

/* ============================================================
   CHANGE 4 — Ornamented bucket separators
   Each bucket has a unique ornament character above its heading.
   ============================================================ */

.bucket {
  margin-bottom: var(--lg);
  padding-left: var(--lg);
  border-left: 3px solid var(--rule);
}

.bucket--verified   { border-color: var(--teal); }
.bucket--unverifiable { border-color: var(--slate); }
.bucket--missing    { border-color: var(--amber); }
.bucket--contradicted { border-color: var(--oxblood); }

/* Ornamental separator row above each bucket heading */
.bucket-sep {
  display: flex;
  align-items: center;
  gap: var(--sm);
  margin-bottom: var(--lg);
  margin-top: var(--xl);
}

.bucket-sep-line {
  flex: 1;
  height: 1px;
  background: var(--rule-gold);
}

.bucket-sep-char {
  font-family: 'EB Garamond', serif;
  font-size: 1.25rem;
  line-height: 1;
}

.bucket--verified   .bucket-sep-char { color: var(--teal); }
.bucket--unverifiable .bucket-sep-char { color: var(--slate); }
.bucket--missing    .bucket-sep-char { color: var(--amber); }
.bucket--contradicted .bucket-sep-char { color: var(--oxblood); }

/* Bucket heading */
.bucket-heading {
  display: flex;
  align-items: baseline;
  gap: var(--md);
  font-family: 'EB Garamond', serif;
  font-weight: 600;
  font-size: 1.55rem;
  margin-bottom: var(--md);
  line-height: 1.2;
}

.bucket-symbol {
  font-size: 0.9rem;
  font-family: 'IBM Plex Mono', monospace;
  flex-shrink: 0;
}

.verified-symbol     { color: var(--teal); }
.unverifiable-symbol { color: var(--slate); }
.missing-symbol      { color: var(--amber-text); }
.contradicted-symbol { color: var(--oxblood); }

.bucket-label { text-transform: lowercase; }

.verified-label     { color: var(--teal); }
.unverifiable-label { color: var(--slate); }
.missing-label      { color: var(--amber-text); }
.contradicted-label { color: var(--oxblood); }

.bucket-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--ink-faded);
  margin-left: auto;
  flex-shrink: 0;
}

.bucket-empty {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  color: var(--ink-faded);
  font-size: 0.95rem;
  padding: var(--md) 0;
}

/* ============================================================
   CHANGE 3 — Sentence-form findings, two-column (README | CODE)
   ============================================================ */

.finding {
  display: grid;
  grid-template-columns: 1fr 28px 1fr;
  padding: var(--md) 0;
  border-bottom: 1px solid var(--rule);
  align-items: stretch;
  gap: 0;
}

.finding:last-child { border-bottom: none; }

/* Column label (README / CODE) */
.finding-col-label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faded);
  margin-bottom: var(--xs);
}

/* README column */
.finding-readme {
  padding-right: var(--md);
}

.finding-readme-body {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.finding-lead {
  color: var(--ink-faded);
  font-style: italic;
}

.finding-quote-span {
  color: var(--ink);
  font-style: normal;
}

/* Center divider: vertical hairline + symbol */
.finding-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}

.finding-divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule-gold);
  transform: translateX(-50%);
}

.finding-symbol {
  position: relative;
  z-index: 1;
  background: var(--paper);
  padding: 2px 1px;
  font-size: 1.1rem;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1;
}

/* CODE column */
.finding-code {
  padding-left: var(--md);
  display: flex;
  flex-direction: column;
}

.finding-code-body {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  flex: 1;
}

.finding-code-body code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.88em;
  background: var(--paper-warm);
  padding: 1px 5px;
  color: var(--ink);
  word-break: break-all;
}

/* Category tag — bottom-right of CODE column */
.finding-category {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faded);
  text-align: right;
  margin-top: var(--xs);
  align-self: flex-end;
}

/* Mobile: single column, symbol at top-left, horizontal divider */
@media (max-width: 699px) {
  .finding {
    display: block;
    position: relative;
    padding-left: 28px;
  }

  .finding-readme {
    padding-right: 0;
    margin-bottom: var(--sm);
  }

  .finding-divider {
    height: 1px;
    margin: var(--sm) 0;
  }

  .finding-divider::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    transform: none;
  }

  .finding-symbol {
    position: absolute;
    top: var(--md);
    left: 0;
    background: transparent;
    padding: 0;
  }

  .finding-code {
    padding-left: 0;
    margin-top: var(--sm);
  }

  .finding-category {
    text-align: left;
    margin-top: var(--xs);
  }
}

/* ============================================================
   Within-bucket visual weight hierarchy
   High-weight: dependencies + envvars (high-signal substance findings)
   Low-weight:  references + commands  (confirmation/utility findings)
   In contradicted bucket: all findings are high-weight.
   ============================================================ */

.finding--high-weight {
  padding: calc(var(--md) * 1.5) 0;
}

.finding--high-weight .finding-readme-body,
.finding--high-weight .finding-code-body {
  font-size: 1.05rem;
}

.finding--high-weight .finding-quote-span {
  font-weight: 500;
}

.finding--low-weight {
  padding: calc(var(--md) * 0.75) 0;
}

.finding--low-weight .finding-readme-body,
.finding--low-weight .finding-code-body {
  font-size: 0.95rem;
}

/* ============================================================
   Scan notes — read line at headline weight
   ============================================================ */

.scan-notes-read {
  font-family: 'EB Garamond', serif;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.55;
  max-width: 56ch;
  margin-top: var(--xl);
  margin-bottom: var(--2xl);
}

@media (min-width: 700px) {
  .scan-notes-read { font-size: 1.5rem; }
}

.scan-notes-read::first-letter {
  font-family: 'EB Garamond', serif;
  font-size: 3.5em;
  font-weight: 400;
  color: var(--gold);
  float: left;
  line-height: 0.85;
  margin-right: 0.06em;
  margin-top: 0.04em;
}

/* ============================================================
   Bucket context lines at editorial subhead weight
   ============================================================ */

.bucket-context {
  font-family: 'EB Garamond', serif;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-top: var(--md);
  margin-bottom: var(--md);
}

/* ============================================================
   Scan again
   ============================================================ */

.scan-again-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--md);
  padding: var(--xl) 0 var(--2xl);
}

.scan-actions-primary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md);
  justify-content: center;
}

.scan-actions-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm);
  justify-content: center;
  padding-top: var(--sm);
  border-top: 1px solid var(--rule);
  width: 100%;
}

.scan-again-btn {
  padding: 13px 28px;
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  text-transform: lowercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  min-height: 44px;
  transition: background 0.15s, color 0.15s;
}

.scan-btn--secondary {
  padding: 8px 16px;
  font-size: 0.78rem;
  min-height: 36px;
  border-color: var(--rule-gold);
  color: var(--ink-soft);
}

.scan-btn--secondary:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--paper) !important;
}

/* Tooltip — appears above any button with data-tooltip */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
  white-space: nowrap;
  padding: 5px 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
}
[data-tooltip]:hover::after {
  opacity: 1;
}

/* ============================================================
   Recent repos
   ============================================================ */

.recent-repos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm);
  margin-top: var(--md);
}

.recent-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  white-space: nowrap;
}

.try-repos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sm);
  margin-top: var(--md);
}

.try-chip {
  padding: 3px 10px;
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.try-chip:hover {
  background: var(--blue);
  color: var(--paper);
}

.try-chip:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.recent-chip {
  padding: 3px 10px;
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid var(--gold-text);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.recent-chip:hover {
  background: var(--gold-text);
  color: var(--paper);
  border-color: var(--gold-text);
}

.recent-chip:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
}

.scan-again-btn:hover {
  background: var(--blue);
  color: var(--paper);
}

/* ============================================================
   Finding view-in-repo link
   ============================================================ */

.finding-view-link {
  display: inline-block;
  margin-top: var(--sm);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-faded);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-gold);
  letter-spacing: 0.03em;
  transition: color 0.12s, border-color 0.12s;
}

.finding-view-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ============================================================
   Category subheadings within buckets
   ============================================================ */

.bucket-category-subhead {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faded);
  padding: var(--md) 0 var(--xs);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sm);
  margin-top: var(--lg);
}

.bucket-category-subhead:first-child {
  margin-top: 0;
}

/* ============================================================
   Badge section
   ============================================================ */

.badge-section {
  border-top: 1px solid var(--rule-gold);
  padding: var(--xl) 0 var(--2xl);
  text-align: center;
}

.badge-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faded);
  margin-bottom: var(--md);
}

.badge-preview-img {
  display: block;
  margin: 0 auto var(--md);
  height: 20px;
  image-rendering: crisp-edges;
}

.badge-copy-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--md);
  flex-wrap: wrap;
}

.badge-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75rem;
  color: var(--ink-soft);
  background: var(--paper-inset);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  word-break: break-all;
  text-align: left;
  max-width: 420px;
}

/* ============================================================
   Print / Save as PDF
   ============================================================ */

@media print {
  .scan-again-block,
  .recent-repos,
  #state-landing,
  #state-loading,
  #state-results footer { display: none !important; }

  body,
  .page-wrap,
  .state,
  .state.active {
    background: #fff !important;
    background-image: none !important;
  }

  .stats-bar {
    border-top: 1px solid #bbb !important;
    border-bottom: 1px solid #bbb !important;
  }

  .stat-item { background: transparent !important; }

  .bucket { break-inside: avoid; page-break-inside: avoid; }
  .finding { break-inside: avoid; page-break-inside: avoid; }

  .scan-notes-read::first-letter { font-size: 2em; }

  * { transition: none !important; animation: none !important; }
}

.scan-again-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ============================================================
   Footer
   ============================================================ */

footer {
  margin-top: var(--2xl);
  padding: var(--lg) 0 var(--xl);
  border-top: 1px solid var(--rule-gold);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--blue);
  text-align: center;
  line-height: 1.9;
}