/* X.4.h.1 — Studio data-shaping panel ("trainer mode") layout.
 *
 * Page-shell only at this gate: chrome row + knob strip + 2-column
 * main (timeline | training). Knob widgets land in h.2-h.5; timeline
 * derivation in h.6; training-pane content in h.9.
 *
 * Tokens (--studio-*) alias the App2 Tailwind --color-* tokens via
 * diagram.css (loaded alongside on the data page) so the L2 theme
 * cascades through here too.
 */

body.data-page {
  /* The base body rule in diagram.css already sets `display: flex;
   * flex-direction: column; height: 100vh;` so the header pins to the
   * top and the main fills the rest. We just need the main grid. */
}

.data-knobs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--studio-border);
  background: white;
  flex: 0 0 auto;
}

.data-knobs .knob-placeholder {
  font-size: 0.875rem;
  color: var(--studio-muted);
  font-style: italic;
}

.data-knob {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  background: var(--studio-bg);
}

.data-knob-label {
  font-size: 0.875rem;
  color: var(--studio-muted);
  font-weight: 500;
}

.plant-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}

.plant-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* X.4.h.3.window — scenario-window picker. Two date inputs (start +
 * end) joined by an arrow + a "last 90 days" reset chip. Defines the
 * trainer's bounds; the up_to scrubber works inside it. */
.data-knob-window {
  gap: 0.25rem;
}

.window-input {
  font-size: 0.875rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  background: white;
  color: inherit;
}

.window-sep {
  font-size: 0.875rem;
  color: var(--studio-muted);
  padding: 0 0.125rem;
}

.window-reset {
  appearance: none;
  background: white;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: inherit;
}

.window-reset:hover {
  background: var(--studio-bg);
}

/* X.4.h.3 — end_date day-stepper (the "up_to" scrubber within the
 * window). ←/→ are square ghost buttons; date input is a compact
 * picker bounded by min/max to the window; "snap to end" jumps to
 * the right edge. Current value trails as a muted chip. */
.data-knob-end-date {
  gap: 0.25rem;
}

.end-date-step,
.end-date-reset {
  appearance: none;
  background: white;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: inherit;
}

.end-date-step:hover,
.end-date-reset:hover {
  background: var(--studio-bg);
}

.end-date-input {
  font-size: 0.875rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  background: white;
  color: inherit;
}

.end-date-current {
  font-size: 0.75rem;
  color: var(--studio-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 0.25rem;
}

/* X.4.h.4 — random-seed input. Wider input than the date picker
 * since uint32 can be 10 chars; "roll" is the primary action chip
 * (accent border so it pops); "clear" matches the date stepper's
 * "today" reset visual. */
.data-knob-seed {
  gap: 0.25rem;
}

.seed-input {
  font-size: 0.875rem;
  padding: 0.125rem 0.25rem;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  background: white;
  color: inherit;
  width: 9ch;
  font-variant-numeric: tabular-nums;
}

.seed-roll,
.seed-clear {
  appearance: none;
  background: white;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  color: inherit;
}

.seed-roll {
  border-color: var(--studio-accent, var(--studio-border));
}

.seed-roll:hover,
.seed-clear:hover {
  background: var(--studio-bg);
}

.seed-current {
  font-size: 0.75rem;
  color: var(--studio-muted);
  font-variant-numeric: tabular-nums;
  margin-left: 0.25rem;
}

/* X.4.h.5 — scope-selector radio group. Inline-flex with native
 * radios; the cached value is :checked — no special active styling
 * needed because the OS-default checked dot is already visible. */
.data-knob-scope {
  gap: 0.5rem;
}

.scope-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}

.scope-radio input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

/* X.4.h.etl-toggle — etl_hook command + enable/disable strip. The
 * <code> shows the configured cfg.etl_hook command (truncated with
 * ellipsis for narrow widths; full text in the title= tooltip).
 * Disabled state greys the command without erasing it — the toggle
 * skips step 1 of the deploy without losing the cfg knob. */
.data-knob-etl-hook {
  gap: 0.5rem;
  flex-wrap: nowrap;
  min-width: 0;
}

.etl-hook-toggle {
  margin: 0;
  cursor: pointer;
}

.etl-hook-command {
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--studio-bg);
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  padding: 0.0625rem 0.375rem;
  max-width: 32ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.etl-hook-command--disabled {
  color: var(--studio-muted);
  text-decoration: line-through;
  opacity: 0.65;
}

.etl-hook-command--missing {
  color: var(--studio-muted);
  font-style: italic;
}

/* X.4.h.6 — vertical plant-timeline column. Dense full-window view
 * (90 days by default, sourced from seed.DEFAULT_BASELINE_WINDOW_DAYS):
 * one row per day, oldest at top, anchor (= end_date) highlighted +
 * auto-scrolled into view. Per-kind chip colors lift from the L2
 * theme so institution branding flows through. */
.timeline-header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--studio-border);
  flex: 0 0 auto;
}

.timeline-total {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--studio-fg, var(--studio-primary-fg));
}

.timeline-window-note {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--studio-muted);
  margin-left: 0.25rem;
}

.timeline-kinds {
  font-size: 0.75rem;
  color: var(--studio-muted);
  font-variant-numeric: tabular-nums;
}

.timeline-rows {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  /* Allow the rows container to scroll independently within the
   * .data-timeline section's overall overflow. Dense 90-row layout
   * means scroll is the only practical way to see the whole window. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.25rem;  /* breathing room for the scrollbar */
}

.timeline-day {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  background: white;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color 0.1s ease;
  scroll-margin: 1rem;  /* gives scrollIntoView some headroom */
}

.timeline-day:hover {
  background: var(--studio-bg);
  border-color: var(--studio-accent, var(--studio-border));
}

/* Empty days (no plants on a date <= up_to) compact down — date in
 * muted color, no chip slot reserved. Still clickable because the
 * operator may want to scrub up_to to a specific calm day. */
.timeline-day--empty {
  padding: 0.0625rem 0.5rem;
  border-color: transparent;
  color: var(--studio-muted);
}

.timeline-day--empty .timeline-day-date {
  font-weight: 400;
  font-size: 0.8125rem;
}

.timeline-day--empty:hover {
  border-color: var(--studio-border);
  background: var(--studio-bg);
}

/* Future days (date > up_to) — visually identical to empty data
 * days. Earlier iterations dimmed them with dashed-border + opacity
 * to signal "no data here yet", but that made every click reflow
 * ~half the column (past↔future ratio shifts) and the operator's
 * mental model couldn't lock onto anything. Now: future days look
 * exactly like data-side empty days; only the anchor row's accent
 * border moves on click. */
.timeline-day--future {
  padding: 0.0625rem 0.5rem;
  border-color: transparent;
  color: var(--studio-muted);
}

.timeline-day--future .timeline-day-date {
  font-weight: 400;
  font-size: 0.8125rem;
}

.timeline-day--future:hover {
  border-color: var(--studio-border);
  background: var(--studio-bg);
}

/* Anchor row (= end_date) is the visual "you are here". Accent border
 * + tinted background, slightly bolder type, sits proud in the column
 * even when surrounded by empty-day slugs. */
.timeline-day--anchor {
  border-color: var(--color-accent, var(--studio-accent));
  border-width: 2px;
  padding: 0.3125rem 0.4375rem;  /* keep total height ~constant despite +1px border */
  background: color-mix(in srgb, var(--color-accent) 6%, white);
  font-weight: 600;
  position: relative;
}

.timeline-day--anchor::before {
  content: "▶";
  color: var(--color-accent);
  font-size: 0.625rem;
  position: absolute;
  left: -0.875rem;
  top: 50%;
  transform: translateY(-50%);
}

.timeline-day--anchor:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, white);
}

.timeline-day-date {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  min-width: 6.5rem;
}

.timeline-day-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.timeline-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  padding: 0.125rem 0.375rem;
  border-radius: 0.1875rem;
  background: var(--studio-bg);
  color: var(--studio-muted);
  border: 1px solid var(--studio-border);
}

/* Per-kind tints — kept generic / theme-aware. The accent variants
 * use the institution's L2 theme color via --color-accent. */
.timeline-chip--drift {
  background: color-mix(in srgb, var(--color-accent) 12%, white);
  color: var(--color-accent);
  border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.timeline-chip--overdraft,
.timeline-chip--limit_breach {
  background: color-mix(in srgb, var(--color-danger, crimson) 12%, white);
  color: var(--color-danger, crimson);
  border-color: color-mix(in srgb, var(--color-danger, crimson) 25%, transparent);
}

.timeline-chip--stuck_pending,
.timeline-chip--stuck_unbundled {
  background: color-mix(in srgb, var(--color-warning, darkorange) 12%, white);
  color: var(--color-warning, darkorange);
  border-color: color-mix(in srgb, var(--color-warning, darkorange) 25%, transparent);
}

.timeline-chip--supersession {
  background: color-mix(in srgb, var(--color-success, seagreen) 12%, white);
  color: var(--color-success, seagreen);
  border-color: color-mix(in srgb, var(--color-success, seagreen) 25%, transparent);
}

.data-main {
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) minmax(24rem, 1.5fr);
  gap: 1rem;
  padding: 1rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.data-timeline,
.data-training {
  background: white;
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  padding: 1rem;
  overflow-y: auto;
}

/* Timeline section is a vertical flex column so its inner
 * .timeline-rows can claim the remaining height + scroll independently
 * (the dense 90-row layout depends on this). */
.data-timeline {
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* the inner .timeline-rows owns the scroll */
}

.data-empty {
  color: var(--studio-muted);
  font-style: italic;
  margin: 0;
}

/* AA.C.5 — trainer pane (X.4.h.9 placeholder closed). Card list
 * driven off the L1_Invariants.md parser; the same content the
 * AA.C.3 sheet-bottom panels show, restructured as a scroll-through
 * catalogue with deep-links to the App2 dashboard sheets. */
.data-training__heading {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--studio-fg, inherit);
}

.data-training__intro {
  font-size: 0.8125rem;
  color: var(--studio-muted);
  margin: 0 0 0.75rem 0;
}

.data-training__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.data-training__entry {
  border: 1px solid var(--studio-border);
  border-radius: 0.25rem;
  padding: 0.625rem 0.75rem;
  background: var(--studio-bg, white);
}

.data-training__entry-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.data-training__kind {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--studio-border);
  border-radius: 0.1875rem;
  color: var(--studio-muted);
  background: var(--studio-bg, white);
}

.data-training__title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  color: var(--studio-fg, inherit);
}

.data-training__should {
  font-size: 0.8125rem;
  margin: 0 0 0.375rem 0;
  color: var(--studio-fg, inherit);
}

.data-training__action {
  font-size: 0.8125rem;
  margin: 0 0 0.5rem 0;
  color: var(--studio-fg, inherit);
}

.data-training__link {
  font-size: 0.8125rem;
  color: var(--studio-accent, #0066cc);
  text-decoration: none;
}

.data-training__link:hover,
.data-training__link:focus {
  text-decoration: underline;
}