/* "Live model" slider panels (.method-model[data-model]) and the sliding
   numbers inside them, used on the case pages (grab-holdings.html,
   ai-energy-nexus.html). The script is js/live-model.js. Colors are theme
   tokens from css/theme.css, so both themes work. */

/* -- live micro-model widgets (Card A / Card B) -- */
.method-model { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--rule-strong); }
.method-model-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.method-model-label { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.method-model-reset { padding: 0; border: 0; background: none; color: var(--muted); font-family: var(--mono); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.method-model-reset:hover, .method-model-reset:focus-visible { color: var(--coral); }
.method-model-slider { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.method-model-slider > span:first-child { flex: none; color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }
.method-model-slider input[type="range"] { flex: 1; accent-color: var(--coral); }
.method-model-value { flex: none; min-width: 46px; color: var(--ink); font-family: var(--mono); font-size: 12px; text-align: right; }
.method-model-bar { display: flex; overflow: hidden; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); margin-bottom: 8px; }
/* transition, not Motion's animate() -- see js/live-model.js */
.method-model-bar-risky { height: 100%; background: var(--blue); transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1); }
.method-model-bar-buffer { height: 100%; background: var(--gold); transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1); }
.method-model-legend { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }
.method-model-legend b { color: var(--ink); font-weight: 500; }
.method-model-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--blue); }
.method-model-dot.is-buffer { background: var(--gold); }
.method-model-output { display: flex; gap: 20px; }
.method-model-figure { display: flex; flex-direction: column; gap: 3px; }
.method-model-figure-label { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.method-model-caption { margin: 9px 0 0; color: var(--muted); font-size: 12px; font-style: italic; line-height: 1.5; }

/* On the navy homepage cards and on the case pages, the panel is a light
   card with its own border, like .model-chart, so none of its colors need a
   dark-background variant. */
.project-card .method-model,
.case-results .method-model {
  margin: 22px 0 0;
  padding: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 1px 2px var(--shadow-1), 0 8px 24px var(--shadow-2);
  color: var(--ink);
}

/* -- sliding number: static chars pass through, digits roll in a 0-9 reel -- */
.sliding-number { display: inline-flex; color: var(--blue-text); font-family: var(--mono); font-size: 17px; letter-spacing: -0.01em; line-height: 1; }
.sn-digit { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
/* transition, not Motion's animate() -- see js/live-model.js */
.sn-digit-strip { display: flex; flex-direction: column; will-change: transform; transition: transform 380ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.sn-digit-strip span { display: block; height: 1em; text-align: center; }
.sn-static { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .sn-digit-strip,
  .method-model-bar-risky,
  .method-model-bar-buffer { transition: none !important; }
}