/* Dynamic Photosynthesis Workflow: what the page adds to the suite layer (suite-analysis.css), which supplies the
   tokens, header, toolbar, figure frame, metric cards, checks, controls, data grid, equation and footer. */

/* The figure box before the first figure has the height dynamicFigure() draws at this width: the response panel
   (46% of the width, 220–460 px), the driver panel (15%, 70–150 px), and the legend, gap and time-axis margins of the
   figure's type tier (99 px under 700 px, 112 px from 700 px). */
@supports (width: 1cqi) {
  .figure-mount > .empty { min-height: var(--figure-height, calc(clamp(220px, 46cqi, 460px) + clamp(70px, 15cqi, 150px) + 99px)); }
  @container (min-width: 700px) { .figure-mount > .empty { min-height: var(--figure-height, calc(clamp(220px, 46cqi, 460px) + clamp(70px, 15cqi, 150px) + 112px)); } }
}
.brush-box { position: absolute; z-index: 1; border: 1px solid rgba(29, 67, 110, .55); background: rgba(29, 67, 110, .12); pointer-events: none; }
.figure-mount > svg { cursor: crosshair; }
.dynamic-playback { min-width:0; }
.dynamic-playback:empty { display:none; }

/* Under the figure: the tool's one status line (what the analysis is doing, or why it stopped) and, while a
   brushed window is active, the way back to the full record. */
.figure-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 44px; }
.status-line { min-width: 0; color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.figure-foot .mini-btn { flex: 0 0 auto; }
.checks-fit { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Controls */
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
@container controls (max-width: 340px) { .field-grid { grid-template-columns: minmax(0, 1fr); } }
/* Choices whose option text is long (the analysis window and the detected transitions) take the full width. */
.field-stack { display: grid; gap: 12px; }
.field-action { align-self: end; }
.field-action .btn { width: 100%; }
.facts { color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
select:disabled, input:disabled { opacity: .55; cursor: not-allowed; }

.drop-zone { display: grid; gap: 8px; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; transition: border-color var(--motion-quick) var(--ease-standard), background-color var(--motion-quick) var(--ease-standard); }
.drop-zone.is-dragging { border-color: var(--accent); background: var(--accent-soft); }
.drop-zone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* The file input covers its button, so a click, tap or keyboard press reaches the native picker directly. */
.button-file { position: relative; justify-self: start; cursor: pointer; }
.file-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; font-size: 0; }
.button-file:has(.file-input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .button-file:hover { background-color: var(--accent-soft); border-color: var(--accent); } }

.range-scale { display: flex; justify-content: space-between; gap: 12px; margin-top: -6px; color: var(--muted); font-size: 12px; }

.band-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.band-chip { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-left: 12px; border: 1px solid var(--line-soft); border-radius: 10px; font-size: 13px; }
.band-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.band-text { flex: 1 1 auto; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.band-text b { color: var(--muted); font-weight: 600; }
.band-chip .row-remove { flex: 0 0 44px; margin: 0; }

/* Preview of the loaded table: raw column names and stated units, read-only. */
.preview-panel .data-grid-head { padding-block: 10px; }
.preview-panel .facts { margin-top: 2px; }
.preview-wrap { max-height: 372px; }
.preview-grid { table-layout: auto; }
.preview-grid th, .preview-grid td { padding: 8px 10px; white-space: nowrap; text-align: right; }
.preview-grid th { font-size: 13px; }
.preview-grid th small { font-size: 11px; font-weight: 500; }
.preview-grid td { color: var(--ink); font-size: 13px; }
.preview-grid th:first-child, .preview-grid td:first-child { padding-inline: 10px; text-align: right; }

.preview-dialog { width: min(1180px, calc(100vw - 32px)); max-height: min(86vh, 900px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px #0f1d2e40; overflow: hidden; }
.preview-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.preview-dialog::backdrop { background: rgba(8, 12, 18, .48); }
.preview-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.preview-dialog-wrap { max-height: none; min-height: 0; }

.equation-note a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .equation-note a:hover { text-decoration-thickness: 2px; } }

@media (forced-colors: active) {
  .brush-box { border-color: Highlight; background: transparent; }
  .drop-zone, .band-chip, .preview-dialog { border: 1px solid CanvasText; }
}
@media print {
  .figure-foot .mini-btn, .drop-zone, .preview-panel { display: none !important; }
}

/* Module glyph (suite-analysis.css, "Module glyph", supplies the size, palette, flow, probe fade, rest and reduced-motion
   still): Dynamic's own figure is a light step (the driver) under the induction curve it drives. The probe climbs
   the curve on the suite's nine-second breath, sampled along the curve's arc length with the same ease; the two
   ambient discs at the step breathe like the other modules' ambient figures. */
.module-glyph[data-glyph="dynamic"] { --mg-probe: mg-probe-dynamic; --mg-rest: 22.51px -18.61px; --mg-origin: 14px 52px; }
.module-glyph .mg-driver { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .9; }
.module-glyph[data-glyph="dynamic"] .mg-ambient > * { animation-name: mg-spread; }
@keyframes mg-probe-dynamic { 0% { translate: 0 0; } 3.25% { translate: .02px 0; } 6.5% { translate: .17px 0; } 9.75% { translate: .58px 0; } 13% { translate: 1.38px 0; } 16.25% { translate: 2.7px 0; } 19.5% { translate: 4.67px -.03px; } 22.75% { translate: 7.41px -.13px; } 26% { translate: 11.03px -.57px; } 29.25% { translate: 15.31px -2.39px; } 32.5% { translate: 17.99px -7.51px; } 35.75% { translate: 20.57px -14.18px; } 39% { translate: 24.32px -21.88px; } 42.25% { translate: 30.34px -27.86px; } 45.5% { translate: 36.73px -31.07px; } 48.75% { translate: 42.33px -32.74px; } 52% { translate: 46.96px -33.5px; } 55.25% { translate: 50.59px -33.81px; } 58.5% { translate: 53.33px -33.94px; } 61.75% { translate: 55.3px -33.98px; } 65% { translate: 56.62px -34px; } 68.25% { translate: 57.42px -34px; } 71.5% { translate: 57.83px -34px; } 74.75% { translate: 57.98px -34px; } 78%, 100% { translate: 58px -34px; } }
@media (forced-colors: active) {
  .module-glyph .mg-axis, .module-glyph .mg-driver, .module-glyph .mg-curve { stroke: CanvasText; }
}

/* The comparison workspace is separate from the existing single-response view. */
.dynamic-view-switch { display:flex; flex-wrap:wrap; gap:8px; margin-block: 0 16px; }
.dynamic-view-switch [aria-pressed="true"] { background:var(--accent-soft); border-color:var(--accent); }
.dynamic-comparison { display:grid; gap:16px; min-width:0; }
.dynamic-comparison-intro { display:grid; gap:12px; padding:20px; }
.dynamic-comparison-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.equation-head .equation-pill { margin-left:auto; }
.dynamic-comparison-intro .field { max-width:640px; }
#singleView[hidden], #comparisonView[hidden], #dynamicEquation[hidden] { display:none; }
@media (forced-colors: active) { .dynamic-view-switch [aria-pressed="true"] { border:2px solid Highlight; } }
@media print { .dynamic-view-switch { display:none; } }