/*
 * Figures: the plot area every plotting page shares (mountFigure in
 * js/figure-plot.js), the preview it draws, and the panel that styles it.
 *
 * The panel is built from the shared components in src/tailwind/input.css
 * (stk-disclosure, stk-field, stk-input, stk-select, stk-seg, stk-check,
 * stk-range, stk-btn, stk-hint), so it takes the site's accent and both
 * themes from the tokens. What is here is its layout: a two-column grid
 * that fits a side column of about 400 px and a 390 px phone, inputs with a
 * unit beside them, and the colour fields; the plot area's header, stage and
 * notes, as the Curve Fitter first had them; and the style drawer for pages
 * with no place of their own for the panel. The preview is the figure drawn
 * at its true size and scaled to fit, so the stage only frames it.
 */

/* ---------------------------------------------------------------------------
   Plot area
   ---------------------------------------------------------------------------
   A header (title, the size of the saved figure, the page's switches, Style,
   PDF, PNG, SVG), the stage, and the notes on what the preview cannot show.
   .fg-card gives it a card of its own; inside a page's panel it has none.
--------------------------------------------------------------------------- */
.fg { display: block; min-width: 0; }
.fg-card {
  background: var(--stk-surface);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-radius-xl);
  box-shadow: var(--stk-shadow-sm);
}
.fg-h { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; padding: .8rem 1rem; }
.fg-t { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .9375rem; font-weight: 650; letter-spacing: -.005em; color: var(--stk-fg); }
.fg-size { font-size: .75rem; font-weight: 500; color: var(--stk-fg-muted); }
.fg-size:empty { display: none; }
/* Beside the size when the figure is saved with no background. */
.fg-clear[hidden] { display: none; }
.fg-clear-sw {
  width: .7rem;
  height: .7rem;
  border-radius: 2px;
  background: #fff conic-gradient(#aeb6c2 25%, transparent 0 50%, #aeb6c2 0 75%, transparent 0) 0 0 / .35rem .35rem;
  box-shadow: inset 0 0 0 1px var(--stk-border-strong);
}
.fg-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.fg-export { display: inline-flex; gap: .3rem; }

/* A quick switch: a checkbox that reads as a small toggle button. */
.fg-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 1.875rem;
  padding: 0 .55rem;
  border-radius: var(--stk-radius);
  font-size: .75rem;
  font-weight: 600;
  color: var(--stk-fg-2);
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 0 0 1px var(--stk-border);
}
.fg-toggle[hidden] { display: none; }
.fg-toggle input { width: .9rem; height: .9rem; margin: 0; accent-color: var(--stk-accent); cursor: pointer; }
.fg-toggle:has(input:checked) { color: var(--stk-accent-text); background: var(--stk-accent-soft); box-shadow: inset 0 0 0 1px var(--stk-accent-soft-border); }
.fg-toggle:has(input:focus-visible) { outline: 2px solid var(--stk-accent); outline-offset: 2px; }

/* Before there is anything to draw, the stage says what will appear; once a
   figure is drawn, the stage is as tall as the figure. */
.fg-stage { position: relative; margin: 0 1rem 1rem; min-height: 18rem; }
.fg-stage.is-drawn { min-height: 0; }
.fg-figure { position: relative; width: 100%; min-width: 0; overflow: hidden; }
.fg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 18rem;
  padding: 1.5rem;
  text-align: center;
  border: 1.5px dashed var(--stk-border-strong);
  border-radius: var(--stk-radius-lg);
  background: var(--stk-surface-2);
}
.fg-empty[hidden] { display: none; }
.fg-empty > i { font-size: 1.6rem; color: var(--stk-fg-faint); margin-bottom: .35rem; }
.fg-empty-title { font-size: .95rem; font-weight: 600; color: var(--stk-fg-2); margin: 0; }
.fg-empty-text { font-size: .8125rem; color: var(--stk-fg-3); margin: 0 0 .5rem; max-width: 26rem; }
.fg-notes {
  margin: 0 1rem 1rem;
  padding: .5rem .7rem;
  border-radius: var(--stk-radius);
  background: var(--stk-surface-2);
  border: 1px solid var(--stk-border);
  font-size: .75rem;
  line-height: 1.45;
  color: var(--stk-fg-3);
}
.fg-notes[hidden] { display: none; }
.fg-notes p { margin: 0; }
.fg-notes p + p { margin-top: .25rem; }
.fg-py-missing { margin: 0; padding: .75rem 1rem; font-size: .8125rem; color: var(--stk-fg-muted); }
@media (min-width: 1024px) {
  .fg-stage { min-height: 22rem; }
  .fg-empty { min-height: 22rem; }
}

/* The style drawer: beside the page, so the figure stays in view while it
   changes; a sheet from the bottom on a phone. It moves only when opened. */
.fg-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 80;
  width: min(25rem, 100vw);
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  display: none;
  flex-direction: column;
  border: 0;
  border-left: 1px solid var(--stk-border);
  background: var(--stk-surface);
  color: var(--stk-fg);
  box-shadow: var(--stk-shadow-lg);
}
.fg-drawer[open] { display: flex; }
/* On the left, for a page whose figure is on the right. */
.fg-drawer.fg-drawer-left { inset: 0 auto 0 0; border-left: 0; border-right: 1px solid var(--stk-border); }
.fg-drawer-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .75rem .7rem 1rem;
  border-bottom: 1px solid var(--stk-border);
}
.fg-drawer-t { margin: 0; font-size: .9375rem; font-weight: 650; color: var(--stk-fg); }
.fg-drawer-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .75rem; }
@media (max-width: 639.98px) {
  .fg-drawer, .fg-drawer.fg-drawer-left {
    inset: auto 0 0 0;
    width: 100vw;
    height: min(75vh, 40rem);
    height: min(75dvh, 40rem);
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--stk-border);
    border-radius: var(--stk-radius-xl) var(--stk-radius-xl) 0 0;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .fg-drawer[open] { animation: fg-drawer-in 160ms ease-out; }
  .fg-drawer.fg-drawer-left[open] { animation-name: fg-drawer-in-left; }
  @keyframes fg-drawer-in { from { transform: translateX(1.25rem); opacity: 0; } }
  @keyframes fg-drawer-in-left { from { transform: translateX(-1.25rem); opacity: 0; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 639.98px) {
  .fg-drawer[open], .fg-drawer.fg-drawer-left[open] { animation-name: fg-sheet-in; }
  @keyframes fg-sheet-in { from { transform: translateY(1.25rem); opacity: 0; } }
}

/* ---------------------------------------------------------------------------
   Preview
   ---------------------------------------------------------------------------
   The figure keeps its own background (it is the page that will be saved),
   so in both themes it sits on the panel as a sheet with a hairline edge,
   drawn inside it (the stage clips anything outside) and in the figure's
   scaled space, hence the division.
--------------------------------------------------------------------------- */
.fp-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.fp-figure {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
.fp-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 calc(1px / var(--fp-scale, 1)) var(--stk-border-strong);
  pointer-events: none;
}
/* A transparent figure over checks, never saved: light ones under dark ink,
   dark ones under light ink, each 8 screen pixels whatever the scale. */
.fp-stage.fp-clear .fp-figure {
  --fp-check: #e4e8ee;
  background: #ffffff conic-gradient(var(--fp-check) 25%, transparent 0 50%, var(--fp-check) 0 75%, transparent 0) 0 0 / calc(16px / var(--fp-scale, 1)) calc(16px / var(--fp-scale, 1));
}
.fp-stage.fp-clear-dark .fp-figure { --fp-check: #1c2740; background-color: #0f172a; }

/* ---------------------------------------------------------------------------
   Panel
--------------------------------------------------------------------------- */
.fp-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.fp-top {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}
.fp-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.fp-reset { margin-right: -0.5rem; }
.fp-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.fp-presets > .stk-btn { min-width: 0; padding: 0 0.4rem; }
.fp-presets-t {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--stk-fg-3);
}

/* Background: four swatches in a row, each a little plot on its ground,
   with what the choice asks next below them. */
.fp-bg {
  min-width: 0;
  margin: 0 0 .15rem;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fp-bg-t {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--stk-fg-3);
}
.fp-bg-row {
  clear: both;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
.fp-bg-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  cursor: pointer;
  user-select: none;
}
/* The radio stays in the page for the keyboard and screen readers; the swatch shows it. */
.fp-bg-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.fp-bg-sw {
  --fp-bg-dot: #1f5c96;
  --fp-bg-line: #e8590c;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--stk-border-strong);
  border-radius: var(--stk-radius);
  background: #ffffff;
  color: #1a1a1a;
}
.fp-bg-sw svg { width: 74%; height: auto; overflow: visible; fill: none; }
.fp-bg-axes { stroke: currentColor; stroke-width: 1.4; }
.fp-bg-line { stroke: var(--fp-bg-line); stroke-width: 1.8; stroke-linecap: round; }
.fp-bg-dot { fill: var(--fp-bg-dot); }
.fp-bg-dark .fp-bg-sw,
.fp-bg[data-ink="light"] .fp-bg-transparent .fp-bg-sw {
  --fp-bg-dot: #4a8fd4;
  --fp-bg-line: #e0622a;
  background-color: #0f172a;
  color: #e2e8f0;
}
.fp-bg-transparent .fp-bg-sw {
  --fp-check: #d5dbe3;
  background-image: conic-gradient(var(--fp-check) 25%, transparent 0 50%, var(--fp-check) 0 75%, transparent 0);
  background-size: 10px 10px;
}
.fp-bg[data-ink="light"] .fp-bg-transparent .fp-bg-sw { --fp-check: #26324a; }
/* Custom: every colour until chosen, then the colours chosen. */
.fp-bg-custom .fp-bg-sw { background: conic-gradient(from 210deg, #fde0d3, #fbefc4, #d6efd9, #cfe2f6, #e4d9f6, #fde0d3); }
.fp-bg-custom:has(.fp-bg-input:checked) .fp-bg-sw { background: var(--fp-bg-own, #ffffff); color: var(--fp-bg-own-ink, #1a1a1a); }
.fp-bg-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 500;
  color: var(--stk-fg-2);
}
.fp-bg-opt:hover .fp-bg-sw { border-color: var(--stk-fg-3); }
.fp-bg-opt:has(.fp-bg-input:checked) .fp-bg-sw { border-color: var(--stk-accent); box-shadow: 0 0 0 1px var(--stk-accent); }
.fp-bg-opt:has(.fp-bg-input:checked) .fp-bg-name { color: var(--stk-accent-text); font-weight: 650; }
/* A tick on the chosen one, so it does not rest on colour alone. */
.fp-bg-opt:has(.fp-bg-input:checked)::after {
  content: "";
  position: absolute;
  top: -.3rem;
  right: -.3rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--stk-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .75rem no-repeat;
  box-shadow: 0 0 0 2px var(--stk-surface);
}
.fp-bg-input:focus-visible + .fp-bg-sw { outline: 2px solid var(--stk-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .fp-bg-sw { transition: border-color 120ms, box-shadow 120ms, transform 120ms; }
  .fp-bg-opt:hover .fp-bg-sw { transform: translateY(-1px); }
}
.fp-bg-more {
  min-width: 0;
  margin: 0;
  padding: .6rem .7rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-radius);
  background: var(--stk-surface-2);
}
.fp-bg-more[hidden] { display: none; }
.fp-bg-more .stk-hint { color: var(--stk-fg-3); }
.fp-bg-more-t {
  float: left;
  width: 100%;
  margin: 0 0 .1rem;
  padding: 0;
  font-size: .72rem;
  font-weight: 600;
  color: var(--stk-fg-3);
}
.fp-bg-more-t + * { clear: both; }
.fp-ink { align-items: flex-start; font-size: .8125rem; line-height: 1.35; }
.fp-ink input { margin-top: .1rem; flex: 0 0 auto; }
.fp-ink-use { color: var(--stk-fg-3); }
.fp-bg-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .25rem; }
.fp-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--stk-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.fp-link:focus-visible { outline: 2px solid var(--stk-accent); outline-offset: 2px; border-radius: 2px; }

/* Group heading: title on the left, a one-line state before the chevron. */
.fp-group > summary { gap: 0.75rem; }
.fp-group-t { flex: 0 0 auto; }
.fp-sum {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--stk-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.fp-span { grid-column: 1 / -1; }
.fp-field { min-width: 0; }
.fp-hint, .fp-note { margin: 0; }

.fp-sub {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--stk-fg-3);
}

.fp-axis, .fp-errorbars, .fp-band, .fp-series {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.fp-series[hidden] { display: none; }
.fp-axis-switch { width: 100%; }
.fp-axis-switch > button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-seg > button { padding: 0 0.5rem; }

.fp-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.1rem;
}
.fp-check {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* A number with its unit (pt, in, %) joined to it. */
.fp-unit {
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.fp-unit > input {
  flex: 1 1 auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.fp-unit > span {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  font-size: 0.72rem;
  color: var(--stk-fg-3);
  background: var(--stk-surface-2);
  border: 1px solid var(--stk-border-strong);
  border-left: 0;
  border-radius: 0 var(--stk-radius) var(--stk-radius) 0;
  white-space: nowrap;
}

.fp-inline {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
}
.fp-inline > * { flex: 1 1 0; min-width: 0; }

/* Colour: the browser's picker as a swatch, and the hex code to type. */
.fp-colour {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.fp-colour > .stk-input { flex: 1 1 auto; min-width: 0; }
.fp-swatch {
  flex: 0 0 auto;
  width: var(--stk-control-h-sm);
  height: var(--stk-control-h-sm);
  padding: 0;
  border: 1px solid var(--stk-border-strong);
  border-radius: var(--stk-radius);
  background: var(--stk-surface);
  cursor: pointer;
}
.fp-swatch::-webkit-color-swatch-wrapper { padding: 3px; }
.fp-swatch::-webkit-color-swatch { border: 0; border-radius: calc(var(--stk-radius) - 3px); }
.fp-swatch::-moz-color-swatch { border: 0; border-radius: 4px; }
.fp-swatch:focus-visible { outline: 2px solid var(--stk-accent); outline-offset: 2px; }

.fp-range {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--stk-control-h-sm);
  min-width: 0;
}
.fp-range > input { flex: 1 1 auto; min-width: 0; }
.fp-range-value {
  flex: 0 0 2.5rem;
  text-align: right;
  font-size: 0.75rem;
  color: var(--stk-fg-2);
  font-variant-numeric: tabular-nums;
}