/* ============================================================
   Stylometric Comparison — project stylesheet
   ------------------------------------------------------------
   Consumes the design tokens defined in tokens.css. Layout
   primitives, component styling, and project-specific patterns
   live here. To restyle the whole tool, edit tokens.css first.
   ============================================================ */


/* ============================================================
   Layout containers
   ============================================================ */

.container {
  max-width: var(--container-base);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-20);
}

.container.wide { max-width: var(--container-wide); }
.container.glossary-page { max-width: 1000px; }


/* ============================================================
   Header / page top
   ============================================================ */

header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-10);
}

h1 {
  font-size: clamp(2.25rem, 4vw, var(--text-4xl));
  margin: 0 0 var(--space-3);
}

p.lede {
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: var(--space-3) 0 0;
  max-width: 65ch;
}

.muted { color: var(--muted); font-size: var(--text-sm); }
.warn  { color: var(--status-error-fg); font-weight: 600; }


/* ============================================================
   Top navigation (within report / glossary headers)
   ============================================================ */

.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}
.topnav a {
  color: var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast);
}
.topnav a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
form.inline { display: inline; margin: 0; }


/* ============================================================
   Errors panel (above form on validation failure)
   ============================================================ */

.errors {
  background: var(--status-error-bg);
  color: var(--status-error-fg);
  border: 1px solid var(--status-error-fg);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}
.errors p { margin: var(--space-1) 0; }


/* ============================================================
   Form layout
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-5);
}

label { display: block; }

.label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-2);
  color: var(--ink);
}

.panel { display: flex; flex-direction: column; }
.panel textarea { flex: 1; }
.panel.single { margin-bottom: var(--space-5); }

textarea, input[type=text] {
  width: 100%;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  resize: vertical;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea:focus, input[type=text]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(44, 74, 58, 0.12);
}

.topic { margin: var(--space-4) 0 var(--space-8); }


/* -- File upload area inside .panel ---------------------------- */

.upload {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sage-soft);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}
.upload .file-label {
  font-weight: 600;
  color: var(--accent);
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.upload input[type=file] {
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.upload input[type=file]::file-selector-button {
  font-family: inherit;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--accent);
  cursor: pointer;
  margin-right: var(--space-3);
  transition: background var(--t-fast), color var(--t-fast);
}
.upload input[type=file]::file-selector-button:hover {
  background: var(--accent);
  color: var(--paper);
}
.upload .file-help { flex-basis: 100%; font-size: var(--text-xs); color: var(--muted); }


/* ============================================================
   Buttons — pill-shaped
   ============================================================ */

.actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

button {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--space-8);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--accent);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
button:hover {
  background: var(--surface-sage-soft);
}
button.primary {
  background: var(--accent);
  color: var(--paper);
}
button.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
button.secondary:hover {
  background: var(--surface-sage-soft);
  border-color: var(--accent);
}
button.small {
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-5);
}


/* ============================================================
   Comparative summary section (report.html)
   ============================================================ */

.summary {
  background: var(--surface-slate-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8) var(--space-6);
  margin: var(--space-6) 0 var(--space-12);
}
.summary h2 {
  margin-top: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.tallies {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: var(--space-3) 0 var(--space-5);
}
.tally {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border: 1px solid transparent;
}
.tally-strong-match  { background: var(--status-good-bg);    color: var(--status-good-fg);    border-color: var(--status-good-fg); }
.tally-partial-match { background: var(--status-warn-bg);    color: var(--status-warn-fg);    border-color: var(--status-warn-fg); }
.tally-no-match      { background: var(--status-error-bg);   color: var(--status-error-fg);   border-color: var(--status-error-fg); }
.tally-indeterminate { background: var(--status-neutral-bg); color: var(--status-neutral-fg); border-color: var(--status-neutral-fg); }


/* -- Comparison table ---------------------------------------- */

table.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--text-sm);
  margin-bottom: var(--space-5);
}
table.compare th, table.compare td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  text-align: left;
}
table.compare tbody tr:last-child td { border-bottom: none; }
table.compare th {
  background: var(--bg);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
table.compare td.feat { font-weight: 600; white-space: nowrap; }
table.compare td.expl { color: var(--muted); font-size: var(--text-sm); }


/* -- Rating chip ---------------------------------------------- */

.rating {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.rating-strong-match  { background: var(--status-good-bg);    color: var(--status-good-fg); }
.rating-partial-match { background: var(--status-warn-bg);    color: var(--status-warn-fg); }
.rating-no-match      { background: var(--status-error-bg);   color: var(--status-error-fg); }
.rating-indeterminate { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }


/* -- Narrative blockquote ------------------------------------- */

p.narrative {
  background: var(--paper);
  border-left: 3px solid var(--accent);
  padding: var(--space-4) var(--space-5);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--ink);
  border-radius: 0 var(--radius) var(--radius) 0;
}


/* ============================================================
   Per-text profile cards
   ============================================================ */

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}
.profile {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
}
.profile.single {
  max-width: 880px;
  margin: 0 auto var(--space-12);
}
.profile h2 {
  margin-top: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.profile h3 {
  margin: var(--space-6) 0 var(--space-2);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.profile ul {
  padding-left: var(--space-5);
  margin: var(--space-2) 0 var(--space-5);
}
.profile ul.sub {
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
}
.profile ul.meta {
  list-style: none;
  padding-left: 0;
}
.profile li { margin-bottom: var(--space-2); }
.profile code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--surface-taupe-soft);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}

details {
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
}
details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
details > * { margin-top: var(--space-2); }

.bucket {
  display: inline-block;
  margin-right: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted);
}


/* ============================================================
   Glossary tooltips (inline-term definitions)
   ============================================================ */

.gloss {
  border-bottom: 1px dotted var(--accent);
  cursor: help;
  position: relative;
}
.gloss:focus { outline: none; }
.gloss::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  text-transform: none;
  letter-spacing: var(--tracking-base);
  line-height: var(--leading-snug);
  white-space: normal;
  width: max-content;
  max-width: 320px;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
  z-index: 100;
  box-shadow: var(--shadow);
}
.gloss::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ink);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-fast);
  pointer-events: none;
  z-index: 100;
}
.gloss:hover::after, .gloss:focus::after,
.gloss:hover::before, .gloss:focus::before {
  visibility: visible;
  opacity: 1;
}


/* ============================================================
   AI-Writing-Signs section
   ============================================================ */

.ai-signs {
  background: var(--surface-blush-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8);
  margin: var(--space-6) 0 var(--space-12);
}
.ai-signs h2 {
  margin-top: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.ai-signs .ai-disclaimer {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: var(--space-2) 0 var(--space-5);
  max-width: 70ch;
}
.ai-signs .ai-headline {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  margin: var(--space-3) 0 var(--space-5);
}
.ai-signs .ai-headline strong { color: var(--accent); font-weight: 600; }

.ai-signs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.ai-metric {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.ai-metric h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  text-transform: none;
  letter-spacing: var(--tracking-base);
  font-weight: 600;
}
.ai-metric h4 .rate {
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--ink);
  background: var(--surface-taupe-soft);
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: var(--tracking-base);
}
.ai-metric h4 .rate.zero {
  color: var(--muted-2);
  background: transparent;
}
.ai-metric h4 a.wiki-link {
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: none;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.ai-metric h4 a.wiki-link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.ai-metric ul {
  padding-left: var(--space-4);
  margin: var(--space-2) 0;
  font-size: var(--text-sm);
}
.ai-metric .ai-example {
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-blush-soft);
  border-left: 2px solid var(--accent-soft);
  font-size: var(--text-sm);
  font-style: italic;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* ============================================================
   Glossary page
   ============================================================ */

.glossary-page h2 {
  font-size: var(--text-2xl);
  margin: var(--space-12) 0 var(--space-5);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule-strong);
}
.glossary-page h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  margin: var(--space-5) 0 var(--space-2);
  color: var(--ink);
  text-transform: none;
  letter-spacing: var(--tracking-base);
}
.glossary-page .entry {
  margin: var(--space-5) 0 var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--rule);
}
.glossary-page .entry:last-child { border-bottom: none; }
.glossary-page .entry > p:first-of-type { margin-top: 0; }

.gloss-toc {
  background: var(--surface-slate-soft);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-6) 0 var(--space-12);
  font-size: var(--text-sm);
  columns: 2;
  column-gap: var(--space-8);
}
.gloss-toc ol {
  padding-left: var(--space-5);
  margin: 0;
  font-weight: 500;
}
.gloss-toc ol ol {
  font-size: var(--text-sm);
  font-weight: 400;
  margin: var(--space-1) 0 var(--space-2);
  color: var(--muted);
}
.gloss-toc a {
  color: var(--ink);
  text-decoration: none;
  transition: color var(--t-fast);
}
.gloss-toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Example block (single example) */
.example {
  background: var(--paper);
  border-left: 3px solid var(--accent-soft);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-3) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.example .ex-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  margin: 0 0 var(--space-2);
}
.example p { margin: var(--space-2) 0; }
.example p.muted { font-size: var(--text-sm); font-style: italic; }

/* Side-by-side comparison cards */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-3) 0;
}
.compare-grid.three { grid-template-columns: repeat(3, 1fr); }
.compare-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.compare-card h4 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.compare-card p.ex {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--ink);
}
.compare-card p.muted {
  font-size: var(--text-xs);
  margin: var(--space-2) 0 0;
  font-style: italic;
}

ul.cat-list {
  padding-left: var(--space-5);
  margin: var(--space-3) 0;
}
ul.cat-list li {
  margin-bottom: var(--space-3);
  font-size: var(--text-base);
}

.rating-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-3) 0;
}
.rating-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-5);
}
.rating-card .rating { margin-bottom: var(--space-2); display: inline-block; }
.rating-card p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }


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

footer {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
  text-align: center;
}
footer p.muted { max-width: 60ch; margin: 0 auto; }


/* ============================================================
   Deep Scan (localhost-only) — profile + details
   ============================================================ */

.local-badge {
  display: inline-block;
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
  border: 1px solid var(--status-warn-fg);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-bottom: var(--space-3);
}

.local-note {
  font-size: var(--text-sm);
  color: var(--muted);
  background: var(--surface-taupe-soft);
  border-left: 3px solid var(--status-warn-fg);
  padding: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* -- Summary stat grid -- */

.ds-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: var(--space-4) 0;
}
.ds-stat {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ds-stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  color: var(--muted);
}
.ds-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
}
.ds-stat-sub {
  font-size: var(--text-xs);
  color: var(--muted-2);
}

.ds-density {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid;
  width: max-content;
}
.ds-density-low        { background: var(--status-good-bg);    color: var(--status-good-fg);    border-color: var(--status-good-fg); }
.ds-density-moderate   { background: var(--status-warn-bg);    color: var(--status-warn-fg);    border-color: var(--status-warn-fg); }
.ds-density-high       { background: var(--status-error-bg);   color: var(--status-error-fg);   border-color: var(--status-error-fg); }
.ds-density-very_high  { background: var(--ink);               color: var(--paper);             border-color: var(--ink); }

.ds-density-inline {
  font-weight: 600;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
}

/* -- Marker bar chart -- */

.ds-bars { margin: var(--space-12) 0; }
.ds-bars h2 {
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-4);
}

.ds-bar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ds-bar-row {
  display: grid;
  grid-template-columns: 220px 1fr 100px;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--rule);
  font-size: var(--text-sm);
}
.ds-bar-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-bar-label a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.ds-bar-label a:hover {
  color: var(--accent);
  text-decoration: underline;
}
.ds-bar-tier {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
  color: var(--muted);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-taupe-soft);
  width: max-content;
}
.ds-bar-tier-new      { background: var(--surface-sage-soft);  color: var(--accent); }
.ds-bar-tier-existing { background: var(--surface-slate-soft); color: var(--muted); }

.ds-bar-track {
  background: var(--rule);
  border-radius: var(--radius-pill);
  height: 10px;
  overflow: hidden;
  position: relative;
}
.ds-bar-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width var(--t-base);
}
.ds-bar-count {
  text-align: right;
  font-size: var(--text-sm);
  font-family: var(--font-mono);
}

/* -- Export bar -- */

.ds-export {
  background: var(--surface-sage-soft);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-8);
  margin-top: var(--space-12);
}
.ds-export h2 {
  margin-top: 0;
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

/* -- Topnav button styled as link (for "Back to profile" form button) -- */

.topnav button.topnav-link {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--ink);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.topnav button.topnav-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* -- Details page per-metric layout -- */

.ds-detail-summary {
  background: var(--surface-blush-soft);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
}
.ds-summary-row strong { font-weight: 600; }

.ds-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.ds-metric-detail {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-8);
}
.ds-metric-detail h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--text-xl);
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.ds-metric-desc {
  color: var(--muted);
  font-size: var(--text-sm);
  font-style: italic;
  margin: 0 0 var(--space-3);
}
.ds-metric-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
}
.ds-metric-meta li { margin: 0; }
.ds-metric-notes {
  background: var(--surface-taupe-soft);
  border-left: 3px solid var(--status-warn-fg);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  margin: var(--space-3) 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ds-metric-hits h4, .ds-metric-examples h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
  margin: var(--space-4) 0 var(--space-2);
}
.ds-metric-detailsblock {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}
.ds-metric-detailsblock summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .container { padding: var(--space-10) var(--space-4) var(--space-16); }
  .grid, .profile-grid, .ai-signs-grid,
  .compare-grid, .compare-grid.three, .rating-grid,
  .ds-summary-grid {
    grid-template-columns: 1fr;
  }
  .ds-bar-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .ds-bar-count { text-align: left; }
  .gloss-toc { columns: 1; }
  table.compare { font-size: var(--text-xs); }
  table.compare th, table.compare td { padding: var(--space-2) var(--space-3); }
}