/* ============================================================================
   panel.css — the right-hand scroll-driven dashboard (#panel) only.
   Owner: PANEL agent. Nothing outside #panel is styled here.

   Every token is referenced with a literal fallback so the panel still renders
   correctly if tokens.css is late, missing, or reordered.
   Mono everywhere, uppercase small labels, letter-spacing on the small stuff.
   Text colour never goes below --fg-dim (#9AA0A8 = 6.9:1 on --bg). --fg-faint
   is used for hairlines and unlit graphics only, never for text.
   ========================================================================= */

#panel {
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  padding: 76px 0 24px;          /* 56px sticky masthead + breathing room */
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  grid-template-areas:
    "date     date"
    "chart    chart"
    "caps     donut"
    "pop      pop"
    "metrics  metrics"
    "scale    scale";
  align-content: start;
  gap: 18px 14px;

  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);
  font-size: 11px;
  line-height: 1.45;
  color: var(--fg, #E8E6E3);
  -webkit-font-smoothing: antialiased;
}

/* The donor hides the panel on narrow screens; the essay stands alone there. */
@media (max-width: 1099px) {
  #panel { display: none; }
}

/* --- date chip ----------------------------------------------------------- */

#panel-date {
  grid-area: date;
  justify-self: start;
  padding: 4px 9px 3px;
  border: 1px solid var(--line, #2A2E35);
  border-radius: var(--radius, 6px);
  background: var(--bg-raised, #1B1D21);
  color: var(--fg, #E8E6E3);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- two-line chart ------------------------------------------------------ */

#panel-chart {
  grid-area: chart;
  display: block;
  width: 100%;
  height: 150px;
  margin-top: -4px;
  overflow: visible;
}

.gp-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gp-ghost {
  fill: none;
  stroke-width: 1.5;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
  opacity: 0.7;
}
.gp-a      { stroke: var(--accent, #6FD3A0); }
.gp-s      { stroke: var(--fg-dim, #9AA0A8); }
.gp-a.gp-ghost { stroke: var(--accent-dim, #2F6B4F); }
.gp-s.gp-ghost { stroke: var(--fg-faint, #5F656D); }

.gp-head        { stroke: var(--bg, #141518); stroke-width: 2.5; }
.gp-head-a      { fill: var(--accent, #6FD3A0); }
.gp-head-s      { fill: var(--fg-dim, #9AA0A8); }

.gp-tick   { stroke: var(--line, #2A2E35); stroke-width: 1; }
.gp-base   { stroke: var(--line, #2A2E35); stroke-width: 1; }

/* The page colour is stroked behind the glyphs so a line passing under a
   caption is knocked out instead of running through the letterforms. */
.gp-label,
.gp-axis {
  paint-order: stroke fill;
  stroke: var(--bg, #141518);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.gp-label {
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.gp-label-a { fill: var(--accent, #6FD3A0); }
.gp-label-s { fill: var(--fg-dim, #9AA0A8); }
.gp-axis {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  fill: var(--fg-dim, #9AA0A8);
}

/* --- capability rows ----------------------------------------------------- */

#panel-caps {
  grid-area: caps;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.cap {
  display: grid;
  grid-template-columns: 16px 68px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  min-height: 18px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim, #9AA0A8);
}

.cap-icon {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--fg-dim, #9AA0A8);
}
.cap-icon path,
.cap-icon circle,
.cap-icon rect {
  fill: none;
  stroke: currentColor;         /* inline SVG only — an <img> would render blank */
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cap-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cap-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line, #2A2E35);
  overflow: hidden;
}
.cap-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--fg-dim, #9AA0A8);
}
.cap-val {
  text-align: right;
  font-size: 9.5px;
  color: var(--fg-dim, #9AA0A8);
  font-variant-numeric: tabular-nums;
}

/* --- donut --------------------------------------------------------------- */

#panel-donut {
  grid-area: donut;
  align-self: center;
  justify-self: center;
  width: 104px;
  height: 104px;
}
#panel-donut svg { display: block; width: 100%; height: 100%; }

.donut-seg { stroke: var(--bg, #141518); stroke-width: 1.25; }
.donut-seg[data-seg="0"] { fill: var(--accent, #6FD3A0); }
.donut-seg[data-seg="1"] { fill: var(--fg-dim, #9AA0A8); }
.donut-seg[data-seg="2"] { fill: var(--line, #2A2E35); }

.donut-label {
  font-size: 9px;
  letter-spacing: 0.1em;
  fill: var(--fg-dim, #9AA0A8);
  text-anchor: middle;
}
.donut-share {
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--fg, #E8E6E3);
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

/* --- population line ----------------------------------------------------- */

#panel-pop {
  grid-area: pop;
  /* one line of copy plus the dot row, reserved up front so the block does not
     move when panel.js appends the dots */
  min-height: 34px;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--fg-dim, #9AA0A8);
}
#panel-pop .pop-n {
  color: var(--fg, #E8E6E3);
  font-variant-numeric: tabular-nums;
}
.pop-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 7px;
  min-height: 5px;
}
.pop-dot {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--accent-dim, #2F6B4F);
}
.pop-dot:last-child { background: var(--accent, #6FD3A0); }

/* --- metrics ------------------------------------------------------------- */

#panel-metrics {
  grid-area: metrics;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px 12px;
  padding-top: 15px;
  border-top: 1px solid var(--line, #2A2E35);
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.metric .k {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim, #9AA0A8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric .v {
  font-size: 13px;
  line-height: 1.1;
  color: var(--fg, #E8E6E3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- currently exists / emerging / science fiction ------------------------ */

#panel-scale {
  grid-area: scale;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
  padding-top: 15px;
  border-top: 1px solid var(--line, #2A2E35);
}
.scale-band {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 34px;
  min-width: 0;
}
.band-label {
  font-size: 9.5px;
  letter-spacing: 0.07em;
  color: var(--fg-dim, #9AA0A8);
  white-space: nowrap;
}
.scale-band[data-band="emerging"] .band-label { color: var(--accent, #6FD3A0); text-align: center; }
.scale-band[data-band="scifi"]    .band-label { text-align: right; }

.band-ticks { display: flex; flex-wrap: wrap; gap: 2px; }
.scale-band[data-band="emerging"] .band-ticks { justify-content: center; }
.scale-band[data-band="scifi"]    .band-ticks { justify-content: flex-end; }

.tick {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--bg-raised, #1B1D21);
  box-shadow: inset 0 0 0 1px var(--line, #2A2E35);
  transition: background-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow      380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.scale-band[data-band="exists"]   .tick.on { background: var(--fg-dim, #9AA0A8); box-shadow: none; }
.scale-band[data-band="emerging"] .tick.on { background: var(--accent, #6FD3A0); box-shadow: none; }
.scale-band[data-band="scifi"]    .tick.on { background: var(--blob, #F2F0EC); box-shadow: none; }

/* --- motion preference --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tick { transition: none; }
}