/* Shared chrome for the knowledge-base visual mockups. Palette mirrors the
   paper site's tokens so an embed drops in without restyling. */
:root {
  --bg: #faf9f5;
  --bg-alt: #f1efe7;
  --surface: #fffefb;
  --text: #1d1c1a;
  --text-2: #5e5b54;
  --muted: #8a857c;
  --border: #e7e3d8;
  --accent: #c45e3b;
  --shadow-lg: 0 18px 40px -16px rgba(60, 40, 20, .22);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
:root[data-theme="dark"] {
  --bg: #211b12;
  --bg-alt: #2b2416;
  --surface: #282115;
  --text: #f3efe6;
  --text-2: #c3bcae;
  --muted: #9a9384;
  --border: #3a3222;
  --accent: #e08a5f;
  --shadow-lg: 0 18px 40px -16px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #211b12; --bg-alt: #2b2416; --surface: #282115;
    --text: #f3efe6; --text-2: #c3bcae; --muted: #9a9384;
    --border: #3a3222; --accent: #e08a5f;
    --shadow-lg: 0 18px 40px -16px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased;
}

/* ---- viz frame ---- */
.viz {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.viz--full { border-radius: 0; border: 0; height: 100vh; }
.viz canvas { display: block; width: 100%; height: 100%; cursor: crosshair; }
.viz--drag canvas { cursor: grab; }
.viz--dragging canvas { cursor: grabbing; }

/* ---- top bar ---- */
.viz-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem .9rem;
  background: linear-gradient(to bottom, var(--surface) 55%, transparent);
}
.viz-title { font-size: .82rem; font-weight: 650; letter-spacing: .01em; color: var(--text); }
.viz-count { font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums; }
.viz-spacer { flex: 1; }

.viz-seg { display: inline-flex; background: var(--bg-alt); border-radius: 9px; padding: 2px; }
.viz-seg button {
  border: 0; background: transparent; color: var(--text-2);
  font: inherit; font-size: .74rem; font-weight: 550; padding: .28rem .6rem;
  border-radius: 7px; cursor: pointer;
}
.viz-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); }

/* ---- legend / filter chips ---- */
.viz-legend { display: flex; gap: .3rem .45rem; flex-wrap: wrap; }
.viz-legend button {
  display: inline-flex; align-items: center; gap: .32rem;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font: inherit; font-size: .72rem; font-weight: 550; padding: .2rem .5rem;
  border-radius: 999px; cursor: pointer; transition: opacity .12s;
}
.viz-legend button i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.viz-legend button[aria-pressed="false"] { opacity: .34; }

/* ---- timeline ---- */
.viz-timeline {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .9rem .8rem;
  background: linear-gradient(to top, var(--surface) 60%, transparent);
}
.viz-play {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; display: grid; place-items: center;
}
.viz-play svg { width: 15px; height: 15px; }
.viz-track { flex: 1; }
.viz-track input { width: 100%; accent-color: var(--accent); }
.viz-gen { font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 96px; }
.viz-gen b { color: var(--text); }

/* ---- tooltip ---- */
.viz-tooltip {
  position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none;
  max-width: 320px; padding: .6rem .7rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 11px; box-shadow: var(--shadow-lg);
  font-size: .78rem; line-height: 1.4;
}
.viz-tooltip .viz-chip { margin-bottom: .35rem; }
.viz-tooltip .tt-meta { margin-top: .4rem; color: var(--muted); font-size: .7rem; }
.viz-chip { display: inline-flex; align-items: center; gap: .32rem; font-size: .7rem; font-weight: 600; color: var(--text-2); }
.viz-chip i { width: 9px; height: 9px; border-radius: 50%; }

/* ---- pinned detail card ---- */
.viz-card {
  position: absolute; z-index: 8; top: 3.6rem; right: .9rem; width: min(340px, 82vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: .95rem 1rem 1rem; font-size: .82rem;
  color: var(--text);   /* re-resolve against the card's own (possibly dark) scope */
}
.viz-card h4 { color: var(--text); }
.viz-card[hidden] { display: none; }
.viz-card h4 { margin: .45rem 0 .3rem; font-size: .95rem; line-height: 1.35; }
.viz-card p { margin: .3rem 0; color: var(--text-2); line-height: 1.5; }
.viz-card .vc-when { border-left: 2px solid var(--border); padding-left: .6rem; font-style: italic; }
.viz-card .vc-meta { display: flex; gap: .5rem 1rem; flex-wrap: wrap; margin-top: .6rem; color: var(--muted); font-size: .72rem; }
.viz-card a { color: var(--accent); font-weight: 600; text-decoration: none; }
.viz-card a:hover { text-decoration: underline; }
.viz-close {
  position: absolute; top: .5rem; right: .5rem; width: 26px; height: 26px;
  border: 0; background: var(--bg-alt); color: var(--text-2); border-radius: 7px; cursor: pointer; font-size: 1rem;
}

.viz-hint {
  position: absolute; z-index: 4; left: .9rem; bottom: 3.4rem;
  font-size: .7rem; color: var(--muted); pointer-events: none;
}

/* ---- "how to read this" info button + panel ---- */
.viz-info-btn {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font: 600 13px var(--font); font-style: italic; cursor: pointer; line-height: 1;
}
.viz-info-btn:hover { color: var(--text); }
.viz-info-panel {
  position: absolute; z-index: 9; top: 3.6rem; left: .9rem; width: min(370px, 86vw);
  max-height: calc(100% - 7rem); overflow-y: auto;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 1rem 1.1rem 1.1rem; font-size: .8rem; line-height: 1.55;
}
.viz-info-panel[hidden] { display: none; }
.viz-info-panel h3 { margin: 0 0 .5rem; font-size: .92rem; }
.viz-info-panel p { margin: .5rem 0; color: var(--text-2); }
.viz-info-panel b { color: var(--text); font-weight: 600; }

/* ---- narrow screens (phone, or the ~stretched embed on one) ---- */
@media (max-width: 640px) {
  /* The legend chips wrapped into 3–4 bar rows and covered a third of the sky.
     Keep row 1 as title · count · info, and push the legend to its own
     full-width second row that scrolls sideways instead of wrapping. */
  .viz-bar { gap: .4rem .6rem; padding: .55rem .7rem .5rem; }
  .viz-title { flex: 1 0 100%; }   /* fixed rows: title / count + info / legend */
  .viz-legend {
    order: 10; flex: 1 0 100%;
    flex-wrap: nowrap; overflow-x: auto;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .viz-legend::-webkit-scrollbar { display: none; }
  .viz-legend button { flex: none; white-space: nowrap; }
  /* Mouse-gesture hint ("scroll to zoom") is wrong for touch and wraps over
     the timeline at this width. */
  .viz-hint { display: none; }
  .viz-gen { min-width: 0; }
}