/* ============================================================================
   flowRS app shell: the page around an exported app, and the parts of the kit the
   server draws its own way. Tokens only (styles/tokens.css): no colour is spelled here.
   ============================================================================ */

html,
body.frs-body {
  margin: 0;
  background: var(--fr-bg);
  color: var(--fr-text);
}
.frs-page { display: flex; flex-direction: column; }
/* In an MCP host's frame: as tall as the content (the host sizes the frame from it). */
.fr-runonly.frs-embedded { min-height: 0; }

/* The bar: the app's name, what its program is doing, the skin switch. */
.frs-bar {
  border-bottom: 1px solid var(--fr-border);
  background: var(--fr-surface-1);
  font-family: var(--fr-font-ui);
  font-size: var(--fr-fs-sm);
}
.frs-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fr-space-2) var(--fr-space-4);
  max-width: 1328px;
  margin: 0 auto;
  padding: var(--fr-space-3) var(--fr-space-6);
}
.frs-name { margin: 0; font-weight: var(--fr-fw-strong); color: var(--fr-text); overflow-wrap: anywhere; }
.frs-status { margin: 0; flex: 1; min-width: 0; color: var(--fr-text-2); font-variant-numeric: tabular-nums; }
.frs-skin { text-decoration: none; }
.frs-skin:focus-visible { outline: 2px solid var(--fr-focus); outline-offset: 2px; }

/* ---- Charts drawn on the server --------------------------------------------
   The plot is a grid: a gutter for the y labels (its width a class, from the longest
   label), the marks stretched to the plot with the markers over them in px, the x labels
   under them. */
.frs-plot {
  display: grid;
  /* Room for the top tick's label, centred on the plot's top edge. */
  padding-top: var(--fr-space-2);
  grid-template-columns: var(--frs-gutter) minmax(0, 1fr);
  grid-template-rows: 220px 24px;
  container-type: inline-size;
}
.frs-gutter-s { --frs-gutter: 36px; }
.frs-gutter-m { --frs-gutter: 52px; }
.frs-gutter-l { --frs-gutter: 72px; }
.frs-gutter-xl { --frs-gutter: 96px; }
.frs-yaxis,
.frs-marks,
.frs-points,
.frs-xaxis { display: block; width: 100%; height: 100%; overflow: visible; }
.frs-yaxis { grid-column: 1; grid-row: 1; }
/* The markers share the marks' cell: no viewBox, so a circle is round in px, its centre a
   percentage of the same box the marks stretch to. */
.frs-marks,
.frs-points { grid-column: 2; grid-row: 1; }
.frs-corner { grid-column: 1; grid-row: 2; }
.frs-xaxis { grid-column: 2; grid-row: 2; }
/* Over the marks, but only the dots themselves take the pointer (their tooltips): the
   overlay's empty box lets it through to the hit areas under it. */
.frs-points { pointer-events: none; }
.frs-dot { stroke: var(--fr-surface-1); stroke-width: 1; pointer-events: visiblePainted; }

/* The x axis's narrow ticks (the plan's `narrow` set) take over in a plot narrower than the
   full set fits: chart.rs works that width out from the labels and names it by a class. A
   container query, so a narrow card on a wide screen swaps as a phone does. */
.frs-ticks-narrow { display: none; }
@container (max-width: 239.98px) {
  .frs-narrow-240 .frs-ticks-full { display: none; }
  .frs-narrow-240 .frs-ticks-narrow { display: block; }
}
@container (max-width: 319.98px) {
  .frs-narrow-320 .frs-ticks-full { display: none; }
  .frs-narrow-320 .frs-ticks-narrow { display: block; }
}
@container (max-width: 399.98px) {
  .frs-narrow-400 .frs-ticks-full { display: none; }
  .frs-narrow-400 .frs-ticks-narrow { display: block; }
}
@container (max-width: 479.98px) {
  .frs-narrow-480 .frs-ticks-full { display: none; }
  .frs-narrow-480 .frs-ticks-narrow { display: block; }
}
@container (max-width: 559.98px) {
  .frs-narrow-560 .frs-ticks-full { display: none; }
  .frs-narrow-560 .frs-ticks-narrow { display: block; }
}
@container (max-width: 639.98px) {
  .frs-narrow-640 .frs-ticks-full { display: none; }
  .frs-narrow-640 .frs-ticks-narrow { display: block; }
}
@container (max-width: 719.98px) {
  .frs-narrow-720 .frs-ticks-full { display: none; }
  .frs-narrow-720 .frs-ticks-narrow { display: block; }
}
@container (max-width: 799.98px) {
  .frs-narrow-800 .frs-ticks-full { display: none; }
  .frs-narrow-800 .frs-ticks-narrow { display: block; }
}
@container (max-width: 959.98px) {
  .frs-narrow-960 .frs-ticks-full { display: none; }
  .frs-narrow-960 .frs-ticks-narrow { display: block; }
}
@container (max-width: 1199.98px) {
  .frs-narrow-1200 .frs-ticks-full { display: none; }
  .frs-narrow-1200 .frs-ticks-narrow { display: block; }
}

/* A sparkline's last point: a circle in px laid over the stretched line, so it is round at
   any width. */
.frs-spark-marks {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.frs-spark-end { fill: var(--fr-accent); }
.fr-tone-mark-accent .frs-spark-end { fill: var(--fr-accent); }

/* A lamp whose verdict is neither pass nor fail (a clear fault lamp's "neutral"): the
   plain lamp, its word in the secondary ink. */
.fr-led-verdict.fr-verdict-none .fr-led-word { color: var(--fr-text-2); }
/* A verdict not yet measured, or neither pass nor fail: the badge's own quiet look. */
.fr-badge.fr-tone-neutral { background: var(--fr-layer-pressed); color: var(--fr-text-2); }

/* A meter's track and fill, drawn as SVG so no style attribute moves the bar. */
.frs-meter { display: block; width: 100%; height: 8px; border-radius: var(--fr-radius-full); }
.frs-meter-track { fill: var(--fr-layer-track); }
.frs-meter-fill { fill: var(--fr-accent); }
.fr-tone-mark-good .frs-meter-fill { fill: var(--fr-good); }
.fr-tone-mark-warn .frs-meter-fill { fill: var(--fr-warn); }
.fr-tone-mark-crit .frs-meter-fill { fill: var(--fr-crit); }
.fr-tone-mark-info .frs-meter-fill { fill: var(--fr-info); }
.frs-meter-target { stroke: var(--fr-text); stroke-width: 2; }
.frs-meter-vertical .frs-meter { width: 16px; height: 120px; }

/* A long table scrolls inside its card. */
.frs-table-cap { max-height: 420px; }
.fr-chart-data .frs-table-cap { max-height: 240px; }

/* A control as the exported program has it: its value, fixed. */
.frs-fixed-value {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  min-height: 40px;
  height: auto;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* An app's own drawing (Svg): inks by meaning. */
.frs-ink-text { fill: var(--fr-text); stroke: var(--fr-text); }
.frs-ink-accent { fill: var(--fr-accent); stroke: var(--fr-accent); }
.frs-ink-good { fill: var(--fr-good); stroke: var(--fr-good); }
.frs-ink-warn { fill: var(--fr-warn); stroke: var(--fr-warn); }
.frs-ink-crit { fill: var(--fr-crit); stroke: var(--fr-crit); }
.frs-ink-info { fill: var(--fr-info); stroke: var(--fr-info); }
.frs-stroke { fill: none; }
text.frs-ink-text,
text.frs-ink-accent,
text.frs-ink-good,
text.frs-ink-warn,
text.frs-ink-crit,
text.frs-ink-info { stroke: none; }
.frs-svg-text { font-family: var(--fr-font-ui); font-size: var(--fr-fs-sm); }
.frs-svg-small { font-family: var(--fr-font-ui); font-size: var(--fr-fs-xs); }

@media (max-width: 479px) {
  .frs-bar-inner { padding: var(--fr-space-3) var(--fr-space-4); }
  .frs-plot { grid-template-rows: 180px 24px; }
}

/* ---- Live controls --------------------------------------------------------
   A control the program takes while it runs is the kit's own (slider, number field,
   switch, select); the slider's fill is an SVG rectangle whose width the page's script
   sets as an attribute, so no style attribute is ever written. */
.frs-track { display: block; width: 100%; }
.frs-slider-fill { fill: var(--fr-accent); }