/* A simple, readable stylesheet. Change the one accent color to re-skin the page. */
:root {
  /* ===== COLOR PALETTE ===== */
  --ink:    #1a1a1a;
  --muted:  #666666;
  --accent: #b16f24;   /* <- change this one color */
  --rule:   #e3e3e3;
  --bg:     #ffffff;

  --accent2:      hsl(0, 81%, 69%);
  --accent-soft:  rgba(66, 16, 3, 0.08);
  --accent2-soft: rgba(169, 61, 47, 0.14);
  --highlight:    rgba(255, 0, 0, 0.38);
  --warn-bg:      #fdf6e3;
  --warn-border:  #e2c778;
  --warn-text:    #6b5416;

  /* ===== TYPOGRAPHY TOKENS ===== */
  /* Adjust these three lines to instantly re-skin the fonts across the entire document */
  --font-body:     "Helvetica Neue", Arial, sans-serif;
  --font-headings: "Playfair Display", Georgia, serif;
  --font-ui:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: transparent;
}

body {
  margin: 0;
  background: transparent; /* Essential: prevents body from painting white over the backdrop */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative; /* Establishes stacking context for body::before */
}

/* Full-screen blurred manuscript backdrop */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1; /* Sits safely between the empty body background and your text */
  
  /* Fallback color: if the image fails to load, this warm parchment tone will show */
  background-color: #f2ede2; 
  
  /* Try both paths depending on where your CSS file lives:
     If style.css is in the root: "assets/manuscript-bg.png"
     If style.css is in a folder (e.g. css/style.css): "../assets/manuscript-bg.png" */
  background-image: url("../assets/manuscript-bg.png"); 
  background-size: cover;
  background-position: center center;
  filter: blur(8px) saturate(0.6) brightness(1.15) sepia(0.15);
  transform: scale(1.05); /* Eliminates white edges caused by the blur filter */
}

/* Widened main content panel with parchment-white card styling */
main { 
  max-width: 1050px; /* Widened layout */
  margin: 2rem auto; 
  padding: 2.5rem 3rem 4rem; 
  background: rgba(255, 255, 255, 0.95); /* Semi-transparent white so text is perfectly readable */
  border-radius: 8px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
}
/* ===== HERO: soft manuscript backdrop behind the title only ===== */
.hero {
  position: relative;
  width: 100%;
  padding: 1.5rem 0 2rem;
}
.hero::before, .hero::after {
  display: none; /* Disables the old localized backdrop filters */
}
.hero header { 
  position: relative; 
  z-index: 1; 
  max-width: 1050px; /* Matches our new layout width */
  margin: 0 auto; 
}
.hero header p.subtitle {
  max-width: 100%;
}

header { border-bottom: 2px solid var(--accent); padding-bottom: 1rem; }
h1 { font-family: var(--font-headings); font-size: 2rem; margin: 0 0 .25rem; color: var(--accent); }
h2 { font-family: var(--font-headings); font-size: 1.25rem; margin-top: 2.5rem; border-bottom: 1px solid var(--rule); padding-bottom: .25rem; }
.subtitle { font-size: 1.1rem; color: var(--muted); margin: .25rem 0 0; }
.byline { color: var(--muted); font-size: .95rem; }

/* With this: */
p, li { max-width: 100%; }
a { color: var(--accent); }

figure { margin: 1.5rem 0; text-align: center; }
img { max-width: 100%; height: auto; border: 1px solid var(--rule); }
figcaption { color: var(--muted); font-size: .9rem; margin-top: .5rem; }

table { border-collapse: collapse; width: 100%; font-size: .95rem; font-family: var(--font-ui); }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--rule); }
thead th { border-bottom: 2px solid var(--accent); }

footer { margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--rule);
         color: var(--muted); font-size: .9rem; }

/* ===== Sample-data banner ===== */
.sample-banner {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center; gap: .75rem;
  background: var(--warn-bg); border-bottom: 1px solid var(--warn-border);
  color: var(--warn-text); font-family: var(--font-ui); font-weight: 500; font-size: .85rem; line-height: 1.4;
  padding: .55rem 2.5rem .55rem 1rem; text-align: center;
}
.sample-banner code { background: rgba(0,0,0,.06); padding: .05rem .3rem; }
.sample-banner button {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--warn-text); font-size: 1.3rem;
  line-height: 1; cursor: pointer; padding: .25rem .5rem;
}
.sample-banner button:hover { opacity: .7; }
.sample-banner.is-dismissed { display: none; }

/* ===== Tabs ===== */
.tabs {
  display: flex; gap: 1.5rem; margin-top: 2.5rem; border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-weight: 600; font-size: .95rem; line-height: 1;
  color: var(--muted); padding: 0 0 .8rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.tab-panel { padding-top: 1.75rem; }
.tab-intro { color: var(--muted); font-size: .97rem; max-width: 68ch; }
.tab-panel h3 { font-family: var(--font-headings); font-size: 1.05rem; margin-top: 2.75rem; border-bottom: 1px solid var(--rule); padding-bottom: .25rem; }
.placeholder-note {
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text);
  padding: .6rem .9rem; margin-top: 1rem; max-width: none;
}
.placeholder-note strong { color: var(--warn-text); }

/* ===== Compare grid (bigram/trigram + rhyme tabs) ===== */
.comparison-block { margin-top: 2rem; }
.comparison-block:first-child { margin-top: 1.25rem; }
.comparison-block + .comparison-block {
  border-top: 1px solid var(--rule); padding-top: 1.75rem;
}
.comparison-heading {
  font-family: var(--font-headings); font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--ink); margin: 0 0 .25rem;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.comparison-score {
  font-family: var(--font-ui); font-weight: 500; font-size: .8rem; line-height: 1; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.compare-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.25rem;
  font-family: var(--font-ui);
}
.compare-col h4 {
  margin: 0 0 .6rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600;
}
.term-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule); }
.term-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: none; border: none; border-bottom: 1px solid var(--rule); cursor: pointer;
  padding: .55rem .75rem; text-align: left; font-family: var(--font-body); font-weight: 400; font-size: .92rem; line-height: 1.3; color: var(--ink);
}
.term-list li:last-child .term-btn { border-bottom: none; }
.term-btn:hover { background: var(--accent-soft); }
.term-btn.is-active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.term-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.term-btn .term-word { font-weight: 600; }
.term-btn .term-meta {
  flex-shrink: 0; display: flex; gap: .4rem; align-items: center;
  font-family: var(--font-ui); font-size: .72rem; color: var(--muted);
}
.term-tag {
  border: 1px solid var(--rule); padding: .05rem .35rem; text-transform: uppercase; letter-spacing: .03em;
}
.term-score { font-variant-numeric: tabular-nums; }

/* ===== Context panel (shared by all three tabs) ===== */
.context-panel {
  margin-top: 1.25rem; border: 1px solid var(--rule); background: #fbfaf8;
  padding: 1.1rem 1.25rem 1.3rem;
}
.context-placeholder { color: var(--muted); font-size: .92rem; margin: 0; }
.context-panel h4 { margin: 0 0 1rem; font-family: var(--font-headings); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.context-col h5 {
  margin: 0 0 .5rem; font-family: var(--font-ui); font-weight: 600; font-size: .78rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.context-lines {
  margin: 0 0 1rem; padding-left: 2.4em; color: var(--muted); font-size: .95rem;
}
.context-lines li { padding: .1rem 0; }
.context-lines li.match-line { color: var(--ink); font-weight: 600; }
.context-lines mark { background: var(--highlight); color: var(--ink); padding: 0 .1em; }
.occurrence-count { color: var(--muted); font-size: .8rem; margin: -0.5rem 0 .75rem; font-family: var(--font-ui); }

/* ===== Calibration chart (ngrams + rhymes tabs) ===== */
#ngrams-calibration-chart svg, #rhymes-calibration-chart svg { width: 100%; height: auto; }
.calibration-dot { fill: var(--muted); opacity: .55; }
.calibration-dot:hover { opacity: 1; }
.calibration-marker-line { stroke-width: 1.5; }
.calibration-axis { stroke: var(--rule); stroke-width: 1; }
.calibration-label { font-family: var(--font-ui); font-weight: 400; font-size: 11px; line-height: 1; fill: var(--muted); }
.calibration-legend {
  display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .6rem;
  font-family: var(--font-ui); font-weight: 500; font-size: .82rem; line-height: 1; color: var(--ink);
}
.calibration-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.calibration-legend i { width: .7rem; height: .7rem; display: inline-block; border-radius: 1px; }

/* ===== Embedding scatter (contrastive tab) ===== */
.embedding-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 1.5rem; margin-top: 1.25rem; align-items: start; }
#embedding-plot { border: 1px solid var(--rule); background: #fbfaf8; padding: .75rem; }
#embedding-plot svg { width: 100%; height: auto; display: block; }
.embed-point { cursor: pointer; stroke: #fff; stroke-width: 1; }
.embed-point.doc-known { fill: var(--accent); }
.embed-point.doc-questioned { fill: var(--accent2); }
.embed-point:hover { stroke: var(--ink); }
.embed-point.is-selected { stroke: var(--ink); stroke-width: 2; r: 6; }
.embed-axis-label { font-family: var(--font-ui); font-weight: 400; font-size: 11px; line-height: 1; fill: var(--muted); }
.embed-legend {
  display: flex; gap: 1.25rem; margin-bottom: .75rem; font-family: var(--font-ui); font-weight: 500; font-size: .82rem; line-height: 1;
}
.embed-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.embed-legend i { width: .7rem; height: .7rem; display: inline-block; }
.embed-legend .doc-known i { background: var(--accent); }
.embed-legend .doc-questioned i { background: var(--accent2); }
.context-panel .context-lines.single { padding-left: 2.4em; }

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .compare-grid, .context-grid, .embedding-layout { grid-template-columns: 1fr; }
  .hero { padding: 2.5rem 1.25rem 1.5rem; }
  h1 { font-size: 1.6rem; }
  .tabs { gap: 1rem; overflow-x: auto; }
}