/* /research/late-growing/: the walk figure, the explorer and the chart.
   Parity colours follow the paper's figures (blue even, orange odd), stepped
   per theme and checked for colour-blind separation. */
:root {
  --lg-even: #5e8fdc;
  --lg-odd: #cc7722;
}
:root[data-theme="light"] {
  --lg-even: #265caa;
  --lg-odd: #c26100;
}

.lg-page .lede { font-size: var(--text-lg); }
.lg-page .chips { margin-top: var(--space-xs); }

/* ---------- figures ---------- */
.lg-fig { margin: var(--space-m) 0; }
.lg-fig figcaption { margin-top: var(--space-2xs); font-size: var(--text-md); color: var(--text-muted); max-width: 70ch; }
.lg-walk-fig { max-width: 26rem; }
.lg-walk-fig svg, .lg-big svg, .lg-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.lg-svg .ground { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 4; }
.lg-svg .tick { stroke: var(--line-strong); stroke-width: 1; }
.lg-svg .path { fill: none; stroke: var(--viz-strong); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lg-svg .path.even { stroke: var(--lg-even); }
.lg-svg .path.odd { stroke: var(--lg-odd); }
.lg-svg .ghost { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.lg-svg .dot { fill: var(--bg); stroke: var(--viz-strong); stroke-width: 2; }
.lg-svg .lbl { font-family: var(--font-mono); font-size: 11px; fill: var(--text); }
.lg-svg .lbl.up { fill: var(--viz-pass); }
.lg-svg .lbl.down { fill: var(--viz-fail); }
.lg-svg .ax { font-family: var(--font-body); font-size: 11px; fill: var(--text-muted); }
.lg-svg .lg-star { font-size: 14px; fill: var(--viz-gold); }
.lg-svg .lg-slot { fill: var(--viz-gold); opacity: .16; }

/* ---------- explorer ---------- */
.lg-count { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lg-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-muted); }
.lg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lg-dot.even { background: var(--lg-even); }
.lg-dot.odd { background: var(--lg-odd); margin-left: var(--space-2xs); }

.lg-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-m); align-items: start; }
.lg-grid-wrap { max-height: 30rem; overflow-y: auto; overscroll-behavior: contain; border: var(--hairline) solid var(--line); }
.lg-grid { display: block; width: 100%; cursor: pointer; touch-action: manipulation; }
.lg-grid:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: calc(-1 * var(--focus-width)); }

.lg-big { border: var(--hairline) solid var(--line); padding: var(--space-xs); }
.lg-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-xs); margin: var(--space-xs) 0 0; font-size: var(--text-sm); }
.lg-facts dt { color: var(--text-muted); }
.lg-facts dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.lg-facts .sgn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: var(--text-sm); }

.lg-build { margin-top: var(--space-s); padding-top: var(--space-xs); border-top: var(--hairline) solid var(--line); }
.lg-build-head { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2xs); }
.lg-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-steps button {
  font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums;
  min-width: 44px; min-height: 44px; padding: 0 8px; cursor: pointer;
  color: var(--label); background: none; border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lg-steps button:hover:not(:disabled) { border-color: var(--control); background: var(--wash); }
.lg-steps button:disabled { color: var(--text-muted); opacity: .4; cursor: default; }
.lg-steps button.used { visibility: hidden; }
.lg-build-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.lg-build-row .btn { min-height: 40px; padding: 6px var(--space-xs); font-size: var(--text-sm); }
.lg-build-out { font-size: var(--text-sm); color: var(--viz-gold-text); }

.lg-total { margin: var(--space-s) 0 0; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.lg-total strong { color: var(--viz-gold-text); font-weight: var(--weight-strong); }

.lg-fallback { display: none; }
.lg-explorer.lg-nojs .lg-body, .lg-explorer.lg-nojs .sim-controls, .lg-explorer.lg-nojs .lg-total { display: none; }
.lg-explorer.lg-nojs .lg-fallback { display: block; }

/* ---------- numbers ---------- */
.lg-table-wrap { overflow-x: auto; }
.lg-table td:not(:first-child), .lg-table th:not(:first-child) { text-align: right; }
.lg-table td:last-child { word-break: normal; }
.lg-chart-fig { max-width: 34rem; }
.lg-chart { position: relative; }
.lg-chart .line { fill: none; stroke: var(--viz-teal); stroke-width: 2; stroke-linejoin: round; }
.lg-chart .pt { fill: var(--viz-teal); stroke: var(--bg); stroke-width: 2; }
.lg-chart .pt.on { fill: var(--viz-gold); }
.lg-chart .grid { stroke: var(--line); stroke-width: 1; }
.lg-chart .one { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 4; }
.lg-chart .hit { fill: transparent; cursor: crosshair; }
.lg-tip {
  position: absolute; pointer-events: none; transform: translate(-50%, -100%); margin-top: -10px;
  padding: 4px 8px; font-size: var(--text-xs); white-space: nowrap; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--bg-raised); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-s);
}

@media (max-width: 760px) {
  .lg-body { grid-template-columns: 1fr; }
  .lg-grid-wrap { max-height: 22rem; }
  .lg-legend { margin-left: 0; }
}

/* ---------- the ornament (arXiv:2610.35779, Table 4) ---------- */
.lg-orn-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-m); align-items: start; }
.lg-orn-walks { min-width: 0; }
.lg-orn-grid { display: block; max-width: 100%; }
.lg-orn-out { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--text-muted); overflow-wrap: anywhere; }
.lg-orn-out strong { color: var(--viz-gold-text); font-weight: var(--weight-strong); }
.lg-orn-table-wrap { overflow-x: auto; position: sticky; top: 5rem; }
.lg-orn-table { border-collapse: separate; border-spacing: 2px; font-variant-numeric: tabular-nums; }
.lg-orn-table th { font-family: var(--font-mono); font-size: 10px; font-weight: normal; color: var(--text-muted); padding: 0; text-align: center; }
.lg-orn-table tbody th { text-align: right; padding-right: 6px; white-space: nowrap; }
.lg-orn-table td { padding: 0; }
.lg-orn-table button {
  display: block; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; line-height: 18px; color: var(--bg);
}
.lg-orn-table button.pos { background: var(--lg-even); }
.lg-orn-table button.neg { background: var(--lg-odd); }
.lg-orn-table button.full { box-shadow: inset 0 0 0 2px var(--bg); }
.lg-orn-table button.row { opacity: .8; }
.lg-orn-table button.sel { outline: 2px solid var(--viz-gold); outline-offset: 1px; }
.lg-orn-table button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 1px; }
.lg-orn.lg-nojs .lg-orn-body { display: none; }
.lg-orn:not(.lg-nojs) .lg-fallback { display: none; }
.lg-orn.lg-nojs .lg-fallback { display: block; }

@media (max-width: 1000px) {
  .lg-orn-body { grid-template-columns: 1fr; }
  .lg-orn-table-wrap { order: -1; position: static; }
}