/* threads.css — styles for the /threads/ Sankey page.
   Design doc: docs/plans/2026-05-17-threads-sankey-design.md */

.threads-page {
  background: var(--color-paper);
}

.threads-title {
  font-family: var(--font-display, "Fraunces", serif);
}

.threads-dek {
  font-family: var(--font-serif-alt, "Newsreader", serif);
}

/* --- diagram plate ------------------------------------------------------ */

.threads-diagram-frame {
  position: relative;
  overflow: hidden;
}

.threads-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-serif-alt, "Newsreader", serif);
}

/* --- nodes & labels ----------------------------------------------------- */

.threads-node {
  fill: var(--color-ink);
  shape-rendering: crispEdges;
}

.threads-label {
  font-size: 0.85rem;
  font-weight: 400;
  fill: var(--color-ink-soft);
  pointer-events: all;
  cursor: pointer;
  transition: opacity 180ms ease-out, font-weight 180ms ease-out, fill 180ms ease-out;
}

.threads-label.is-anchor {
  font-weight: 500;
  fill: var(--color-ink);
}

.threads-label.is-inactive { opacity: 0.25; }
.threads-label.is-active   { font-weight: 600; fill: var(--color-ink); opacity: 1; }

/* --- era band gutter labels --------------------------------------------- */

.threads-era-label {
  font-family: var(--font-display, "Fraunces", serif);
  font-variant: all-small-caps;
  font-size: 0.78rem;
  letter-spacing: .1em;
  font-weight: 500;
  fill: var(--color-muted);
}

.threads-era-rule {
  stroke: var(--color-muted);
  stroke-width: 1;
  opacity: 0.5;
}

/* Each era-rule and era-label is tinted with that era's color so the
   diagonal of the diagram is keyed to the period palette below it. */
.threads-era-rule.era-colonial       { stroke: var(--color-era-colonial); opacity: 0.7; }
.threads-era-rule.era-early_republic { stroke: var(--color-era-early-republic); opacity: 0.7; }
.threads-era-rule.era-antebellum     { stroke: var(--color-era-antebellum); opacity: 0.7; }
.threads-era-rule.era-civil_war      { stroke: var(--color-era-civil-war); opacity: 0.7; }
.threads-era-rule.era-reconstruction { stroke: var(--color-era-reconstruction); opacity: 0.7; }
.threads-era-rule.era-jim_crow       { stroke: var(--color-era-jim-crow); opacity: 0.7; }
.threads-era-rule.era-mid_century    { stroke: var(--color-era-mid-century); opacity: 0.7; }
.threads-era-rule.era-modern         { stroke: var(--color-era-modern); opacity: 0.7; }

.threads-era-label.era-colonial       { fill: var(--color-era-colonial); }
.threads-era-label.era-early_republic { fill: var(--color-era-early-republic); }
.threads-era-label.era-antebellum     { fill: var(--color-era-antebellum); }
.threads-era-label.era-civil_war      { fill: var(--color-era-civil-war); }
.threads-era-label.era-reconstruction { fill: var(--color-era-reconstruction); }
.threads-era-label.era-jim_crow       { fill: var(--color-era-jim-crow); }
.threads-era-label.era-mid_century    { fill: var(--color-era-mid-century); }
.threads-era-label.era-modern         { fill: var(--color-era-modern); }

/* --- flows (Task 4) ----------------------------------------------------- */

.threads-flow-layer { mix-blend-mode: multiply; }

.threads-flow {
  fill: none;
  stroke-linecap: round;
  /* Mode B — hidden by default; .is-active reveals on entity/place hover. */
  opacity: 0;
  transition: opacity 220ms ease-out, stroke-width 220ms ease-out;
}

.threads-flow.is-inactive { opacity: 0; }
.threads-flow.is-active   { opacity: 1; }

.threads-flow.era-colonial       { stroke: var(--color-era-colonial); }
.threads-flow.era-early_republic { stroke: var(--color-era-early-republic); }
.threads-flow.era-antebellum     { stroke: var(--color-era-antebellum); }
.threads-flow.era-civil_war      { stroke: var(--color-era-civil-war); }
.threads-flow.era-reconstruction { stroke: var(--color-era-reconstruction); }
.threads-flow.era-jim_crow       { stroke: var(--color-era-jim-crow); }
.threads-flow.era-mid_century    { stroke: var(--color-era-mid-century); }
.threads-flow.era-modern         { stroke: var(--color-era-modern); }

/* --- reading key (footer) ----------------------------------------------- */

.threads-key { list-style: none; padding: 0; margin: 0; }
.threads-key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display, "Fraunces", serif);
  font-variant: all-small-caps;
  font-size: 0.72rem;
  letter-spacing: .08em;
  color: var(--color-ink-soft);
}
.threads-key-item::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.8;
}
.threads-key-item.era-colonial       { color: var(--color-era-colonial); }
.threads-key-item.era-early_republic { color: var(--color-era-early-republic); }
.threads-key-item.era-antebellum     { color: var(--color-era-antebellum); }
.threads-key-item.era-civil_war      { color: var(--color-era-civil-war); }
.threads-key-item.era-reconstruction { color: var(--color-era-reconstruction); }
.threads-key-item.era-jim_crow       { color: var(--color-era-jim-crow); }
.threads-key-item.era-mid_century    { color: var(--color-era-mid-century); }
.threads-key-item.era-modern         { color: var(--color-era-modern); }

/* --- tooltip (Task 5) --------------------------------------------------- */

.threads-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  padding: 0.6rem 0.8rem;
  font-family: var(--font-serif-alt, "Newsreader", serif);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-ink);
  max-width: 32ch;
  box-shadow: 0 4px 16px -8px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 120ms ease-out;
  z-index: 10;
}
.threads-tooltip.is-visible { opacity: 1; }
.threads-tooltip .ttl-role   { font-variant: all-small-caps; letter-spacing: .06em; color: var(--color-muted); font-size: 0.72rem; }
.threads-tooltip .ttl-period { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-ink-soft); margin-top: 0.2rem; }
.threads-tooltip .ttl-main   { margin-top: 0.2rem; }
.threads-tooltip .ttl-fact   { margin-top: 0.4rem; color: var(--color-ink-soft); font-style: italic; }

/* --- mobile fallback (Task 6) ------------------------------------------- */

@media (max-width: 767px) {
  .threads-svg { display: none; }
  .threads-list { display: block; }
}
@media (min-width: 768px) {
  .threads-list { display: none; }
}

/* --- mobile list view (Task 6.1) ---------------------------------------- */

.threads-list {
  padding: 1rem 0.25rem;
}

.threads-list-era {
  border-left: 3px solid var(--era-color, var(--color-rule));
  padding-left: 1rem;
  margin: 0 0 2rem;
}
.threads-list-era.era-colonial       { --era-color: var(--color-era-colonial); }
.threads-list-era.era-early_republic { --era-color: var(--color-era-early-republic); }
.threads-list-era.era-antebellum     { --era-color: var(--color-era-antebellum); }
.threads-list-era.era-civil_war      { --era-color: var(--color-era-civil-war); }
.threads-list-era.era-reconstruction { --era-color: var(--color-era-reconstruction); }
.threads-list-era.era-jim_crow       { --era-color: var(--color-era-jim-crow); }
.threads-list-era.era-mid_century    { --era-color: var(--color-era-mid-century); }
.threads-list-era.era-modern         { --era-color: var(--color-era-modern); }

.threads-list-era-title {
  font-family: var(--font-display, "Fraunces", serif);
  font-variant: all-small-caps;
  font-size: 0.85rem;
  letter-spacing: .1em;
  color: var(--era-color, var(--color-muted));
  margin: 0 0 0.8rem;
  font-weight: 500;
}

.threads-list-entities {
  list-style: none;
  padding: 0;
  margin: 0;
}

.threads-list-entity {
  margin: 0.6rem 0 1.2rem;
}

.threads-list-entity .entity-name {
  font-family: var(--font-display, "Fraunces", serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-ink);
  line-height: 1.2;
}
.threads-list-entity .entity-name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease-out;
}
.threads-list-entity .entity-name a:hover {
  border-bottom-color: var(--era-color, var(--color-ink-soft));
}

.threads-list-entity .entity-flows {
  margin: 0.3rem 0 0;
  padding: 0 0 0 1rem;
  list-style: none;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
}
.threads-list-entity .entity-flows li {
  padding: 0.12rem 0;
}
.threads-list-entity .entity-flows a {
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-rule);
}
.threads-list-entity .entity-flows a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--era-color, var(--color-ink-soft));
}
.threads-list-entity .entity-flows .role {
  font-variant: all-small-caps;
  letter-spacing: .06em;
  color: var(--color-muted);
  font-size: 0.72rem;
  margin-left: 0.4rem;
}