/*
 * Plot Builder: tool-specific styles.
 *
 * The plot area, its preview and the style panel are the shared figure
 * component (src/tools/figure.css), the script is the shared Python panel
 * (src/tools/python-panel.css), and the tabs, fields, buttons and cards are
 * the shared components in src/tailwind/input.css. What is here is the
 * workspace, laid out as the Curve Fitter's: the inputs as three tabs in a
 * rail on the left, the figure and its script on the right, divided by
 * hairlines within one card. Everything reads the design tokens, so it
 * follows the theme without .dark twins.
 */

.stk-pagehead { margin-bottom: 1.25rem; }

/* ---------------------------------------------------------------------------
   The workspace
   ---------------------------------------------------------------------------
   From 1024 px: the rail on the left, pinned under the site header with its
   own scroll, and the plot above the script on the right. Narrower, the plot
   comes first and stays in view while the inputs scroll under it (when the
   screen is tall enough for both), then the inputs, then the script. The
   rail and the plot share .pb-top so that the pinned plot lets go before the
   script. Nothing here may clip its children: an ancestor with overflow
   hidden would stop the rail and the plot from sticking.
   --pb-head (the site header's height) and --pb-plot-h (the plot's) are kept
   up to date by the page script.
--------------------------------------------------------------------------- */
.pb-ws {
  --pb-head: 81px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--stk-surface);
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-radius-xl);
  box-shadow: var(--stk-shadow-sm);
}
.pb-top { display: flex; flex-direction: column; min-width: 0; }
.pb-plot { order: -1; min-width: 0; background: var(--stk-surface); border-radius: var(--stk-radius-xl) var(--stk-radius-xl) 0 0; }
.pb-rail { min-width: 0; border-top: 1px solid var(--stk-border); }
.pb-python { min-width: 0; border-top: 1px solid var(--stk-border); }

@media (max-width: 1023.98px) and (min-height: 600px) {
  .pb-plot {
    position: sticky;
    top: var(--pb-head);
    z-index: 20;
    border-bottom: 1px solid var(--stk-border);
    box-shadow: 0 10px 18px -16px rgba(15, 23, 42, .45);
  }
  .pb-rail { border-top: 0; }
  /* A field brought into view by the keyboard lands below the pinned plot, not under it. */
  .pb-rail :is(input, select, button, summary, textarea) { scroll-margin-top: calc(var(--pb-head) + var(--pb-plot-h, 0px) + .5rem); }
  .pb-plot .fg-stage { margin-bottom: .75rem; }
  .pb-plot .fg-notes { display: none; }
}

@media (min-width: 1024px) {
  .pb-ws {
    display: grid;
    grid-template-columns: minmax(0, 23.5rem) minmax(0, 1fr);
    grid-template-areas: "rail plot" "rail python";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .pb-top { display: contents; }
  .pb-rail {
    grid-area: rail;
    position: sticky;
    top: var(--pb-head);
    max-height: calc(100vh - var(--pb-head));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 0;
    border-right: 1px solid var(--stk-border);
    scrollbar-width: thin;
    scrollbar-color: var(--stk-border-strong) transparent;
  }
  /* The divider runs the height of the taller side: the rail's edge and the outputs' edge overlap. */
  .pb-plot { grid-area: plot; order: 0; border-radius: 0 var(--stk-radius-xl) 0 0; }
  .pb-python { grid-area: python; border-top: 1px solid var(--stk-border); }
  .pb-plot, .pb-python { margin-left: -1px; border-left: 1px solid var(--stk-border); }
}
@media (min-width: 1280px) {
  .pb-ws { grid-template-columns: minmax(0, 25.5rem) minmax(0, 1fr); }
}

/* The Python panel is a section of the workspace here, not a card of its own. */
.pb-python .pyp { border: 0; border-radius: 0 0 var(--stk-radius-xl) var(--stk-radius-xl); box-shadow: none; background: transparent; }
.pb-python .pyp-body { max-height: 30rem; }
@media (min-width: 1024px) {
  .pb-python .pyp { border-radius: 0 0 var(--stk-radius-xl) 0; }
}

/* ---------------------------------------------------------------------------
   The rail: tabs and their panes
--------------------------------------------------------------------------- */
.pb-tabs { position: sticky; top: 0; z-index: 3; padding: 0 .5rem; background: var(--stk-surface); border-radius: var(--stk-radius-xl) var(--stk-radius-xl) 0 0; }
.pb-tabs .pb-tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; height: 2.9rem; }
.pb-tab .stk-stepn { width: 1.3rem; height: 1.3rem; font-size: .6875rem; }
.pb-tab-icon { font-size: .8rem; }
.pb-tab-info { min-width: 1.25rem; padding: .05rem .4rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; color: var(--stk-fg-3); background: var(--stk-surface-2); box-shadow: inset 0 0 0 1px var(--stk-border); }
.pb-tab-info:empty { display: none; }
.pb-tab:focus-visible { outline: 2px solid var(--stk-accent); outline-offset: -3px; border-radius: var(--stk-radius); }
@media (max-width: 1023.98px) {
  .pb-tabs { position: static; border-radius: 0; }
}

.pb-pane { display: flex; flex-direction: column; gap: .95rem; padding: 1rem; min-width: 0; }
.pb-pane[hidden] { display: none; }
.pb-pane:focus { outline: none; }
.pb-pane-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.pb-pane-lede { margin: 0; font-size: .8125rem; color: var(--stk-fg-3); }
.pb-pane-empty { margin: 0; padding: 1rem; font-size: .8125rem; line-height: 1.5; color: var(--stk-fg-3); background: var(--stk-surface-2); border: 1.5px dashed var(--stk-border-strong); border-radius: var(--stk-radius-lg); }
.pb-pane-empty[hidden] { display: none; }
.pb-pane-style { padding: .75rem; }
.pb-h-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pb-drop { cursor: pointer; }
.pb-drop.is-over { border-color: var(--stk-accent); background: var(--stk-accent-soft); }

/* Loaded files */
.pb-files { display: flex; flex-direction: column; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pb-files:empty { display: none; }
.pb-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .6rem;
  padding: .45rem .4rem .45rem .7rem;
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-radius);
  background: var(--stk-surface-2);
  font-size: .8125rem;
  min-width: 0;
}
.pb-file > i { color: var(--stk-accent-text); }
.pb-file-t { display: flex; flex-direction: column; min-width: 0; }
.pb-file-name { font-weight: 600; color: var(--stk-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-file-meta { color: var(--stk-fg-3); font-size: .75rem; }
.pb-file-warn { grid-column: 2 / -1; margin: .3rem 0 0; font-size: .75rem; line-height: 1.45; color: var(--stk-warn); }

/* Series cards */
.pb-cards { display: flex; flex-direction: column; gap: .75rem; }
.pb-cards:empty { display: none; }
.pb-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .75rem;
  border: 1px solid var(--stk-border);
  border-radius: var(--stk-radius-lg);
  background: var(--stk-surface-2);
  min-width: 0;
}
.pb-card-h { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pb-card-h .stk-input { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.pb-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
}
.pb-chip > span { display: block; width: 1rem; height: 1rem; border-radius: 4px; background: var(--pb-c, var(--stk-fg-faint)); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .15); }
.pb-chip:hover { border-color: var(--stk-accent); }
.pb-chip:focus-visible { outline: 2px solid var(--stk-accent); outline-offset: 2px; }
.pb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; min-width: 0; }
.pb-grid2 > [hidden] { display: none; }
.pb-card .stk-field { min-width: 0; }
.pb-card .stk-seg { width: 100%; }
.pb-card .stk-seg > button { flex: 1 1 0; min-width: 0; padding: 0 .4rem; }
.pb-card-hint { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--stk-fg-3); }
.pb-check { align-self: end; }
.pb-wide { grid-column: 1 / -1; }
.pb-check .stk-check { font-size: .8125rem; }
.pb-card-note { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--stk-warn); }
.pb-card-note:empty { display: none; }

/* Layout: the grid of panels, shared axes, gaps, letters and insets */
.pb-layout { margin-bottom: .75rem; }
.pb-layout[hidden] { display: none; }
.pb-layout > summary { display: flex; align-items: baseline; gap: .5rem; }
.pb-layout-t { font-weight: 600; }
.pb-layout-sum { color: var(--stk-fg-3); font-size: .75rem; font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-layout .stk-field { min-width: 0; }
.pb-insets-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pb-insets { display: flex; flex-direction: column; gap: .6rem; }
.pb-insets:empty { display: none; }
.pb-inset { display: flex; flex-direction: column; gap: .6rem; padding: .6rem; border: 1px solid var(--stk-border); border-radius: var(--stk-radius); background: var(--stk-surface-2); min-width: 0; }
.pb-inset-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; font-size: .8125rem; }

/* ---------------------------------------------------------------------------
   The plot
--------------------------------------------------------------------------- */
.pb-plot .fg-figure { cursor: crosshair; }
.pb-hint { margin: -.5rem 1rem .9rem; font-size: .75rem; line-height: 1.45; color: var(--stk-fg-muted); }
.pb-hint[hidden] { display: none; }
@media (hover: none), (max-width: 1023.98px) {
  .pb-hint { display: none; }
}
.fg-size .pb-scale { color: var(--stk-fg-muted); }
@media (max-width: 639.98px) {
  .fg-size .pb-scale { display: none; }
}

/* The rectangle dragged across the plot, and the value under the pointer. */
.pb-zoom {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border: 1px solid var(--stk-accent);
  background: color-mix(in srgb, var(--stk-accent) 12%, transparent);
}
.pb-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  padding: .3rem .5rem;
  border-radius: var(--stk-radius);
  background: var(--stk-fg);
  color: var(--stk-surface);
  font-size: .75rem;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow: var(--stk-shadow);
  transform: translate(-50%, calc(-100% - 10px));
}
.pb-tip b { font-weight: 650; }
.pb-tip[hidden] { display: none; }

/* More examples: a button that opens a list beside it, one entry for each
   kind of chart, each with a line that says what it shows. */
.pb-examples { position: relative; display: inline-flex; }
.pb-examples-caret { font-size: .7em; transition: transform .15s ease; }
.pb-examples > [aria-expanded="true"] .pb-examples-caret { transform: rotate(180deg); }
.pb-examples-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + .4rem);
  right: 0;
  width: min(23rem, calc(100vw - 2rem));
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: .6rem;
  border: 1px solid var(--stk-border-strong);
  border-radius: var(--stk-radius-lg);
  background: var(--stk-surface);
  box-shadow: var(--stk-shadow);
  text-align: left;
}
.pb-examples-panel[hidden] { display: none; }
.pb-examples-hint { margin: .15rem .35rem .5rem; font-size: .75rem; line-height: 1.45; color: var(--stk-fg-muted); }
.pb-examples-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.pb-examples-list[hidden], .pb-examples-confirm[hidden] { display: none; }
.pb-example {
  display: block;
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid transparent;
  border-radius: var(--stk-radius);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pb-example:hover, .pb-example:focus-visible { background: var(--stk-surface-2); border-color: var(--stk-border); }
.pb-example:focus-visible { outline: 2px solid var(--stk-accent); outline-offset: 1px; }
.pb-example-name { display: block; font-size: .875rem; font-weight: 600; color: var(--stk-fg); }
.pb-example-text { display: block; margin-top: .1rem; font-size: .75rem; line-height: 1.4; color: var(--stk-fg-muted); }
.pb-examples-confirm { padding: .35rem; }
.pb-examples-confirm > p { margin: 0 0 .6rem; font-size: .8125rem; line-height: 1.5; color: var(--stk-fg); }
.pb-examples-confirm-b { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Where the buttons stand under the page's title, on the left, the list opens
   from the left end of their row. */
@media (max-width: 1023.98px) {
  .pb-actions { position: relative; }
  .pb-examples { position: static; }
  .pb-examples-panel { left: 0; right: auto; width: min(23rem, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pb-examples-caret { transition: none; }
}