/* ================================================================
   Plotter — Tool-specific styles
   ================================================================
   Extends the textbook foundation (tokens / layout / components) with
   the control rail, formula banner, legend overlay, and status bar
   that the plotter needs. Every value references a token; nothing
   hard-coded. Safe to ship alongside every other textbook page — it
   defines only new classes, never overrides foundation selectors.
   ================================================================ */

/* ── Plotter page body: no Y scrollbar flicker ─────────────────── */
body.plotter-page {
    overflow-x: hidden;
}

/* ── Plotter layout overrides ──────────────────────────────────
   The plotter is a tool, not a strict textbook section: in the
   normal (non-fullscreen) view we keep the textbook pattern
   (sec-main + sec-margin), but the figure lives in a flex-grow
   sec-main so it fills every pixel between the TOC rail and the
   fixed-width margin column on the right. The margin-notes stay
   on the right (as the user expects from the textbook layout);
   only the fullscreen mode hides them.
   ────────────────────────────────────────────────────────────── */
body.plotter-page .content-outer.plotter-outer {
    /* The default layout reserves ~220px left buffer for the fig-info
       panel on wide screens; plotter doesn't use that pattern, so
       restore symmetric padding. */
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
}

body.plotter-page .content-area {
    width: 100%;
    max-width: none;              /* use every pixel available */
    padding: var(--content-padding) 0 var(--area-padding-bottom);
}

/* sec-main expands to fill; sec-margin stays at its textbook width. */
body.plotter-page .sec-row {
    align-items: flex-start;
}
body.plotter-page .sec-row > .sec-main {
    flex: 1 1 0;
    width: auto;
    min-width: 0;                 /* allow shrinking in narrow viewports */
}
body.plotter-page .sec-row > .sec-margin {
    flex: 0 0 var(--margin-width);
    width: var(--margin-width);
}

/* Figure fills the sec-main width (which itself fills the space
   between the TOC rail and the sec-margin). */
body.plotter-page .plotter-figure {
    width: 100%;
    max-width: none;
    margin: 0;
}

/* ── Canvas overlay toolbar (reset + fullscreen) ───────────────────
   Two stacked buttons at the top-right of the canvas. The reset
   button lives to the LEFT of the fullscreen button. Both share the
   existing .expand-btn look (dim-btn background, accent hover) so
   they feel like one toolbar rather than two orphan icons. The
   circular-arrow reset icon (↺) is intentionally different from
   the four-corner fullscreen icon (⛶) so one can't mistake one
   for the other.  */
.reset-btn {
    position: absolute;
    top: 10px;
    right: 48px;                   /* sits to the LEFT of expand-btn */
    background: var(--bg-dim-btn);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: var(--text-expand-btn);
    width: var(--fig-expand-size);
    height: var(--fig-expand-size);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-figure-controls);
    transition: all var(--transition-fast);
    font-family: var(--font-ui);
    line-height: 1;
    padding: 0;
}
.reset-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-dim-btn-hover);
}
/* In plotter fullscreen the reset button keeps its spot; only the
   close-btn moves to the top-right so we nudge the reset-btn left
   a little so they don't collide. */
body.plotter-fullscreen-active .plotter-figure.fullscreen .reset-btn {
    right: calc(48px + var(--fig-expand-size) + 10px);
}
body.plotter-fullscreen-active .plotter-figure.fullscreen .expand-btn {
    /* expand-btn hides in the foundation's fullscreen rule; keep it
       hidden here too (close-btn replaces it). */
    display: none;
}

/* ── Fullscreen mode for the plotter ──────────────────────────────
   When .figure.fullscreen is on AND body has .plotter-fullscreen-active,
   the page text + right margin hide and the control rail (TOC)
   repositions itself as a floating widget (backdrop-blurred, rounded
   card) on the left edge of the fullscreen canvas. Navbar, page
   title, body text, margin notes, and the footer are hidden until
   fullscreen exits.
   ────────────────────────────────────────────────────────────── */
body.plotter-fullscreen-active {
    overflow: hidden;
}
body.plotter-fullscreen-active .navbar,
body.plotter-fullscreen-active .page-header,
body.plotter-fullscreen-active .sec-row > .sec-margin,
body.plotter-fullscreen-active .landing-footer,
body.plotter-fullscreen-active footer {
    display: none !important;
}
/* Hide everything in sec-main EXCEPT the figure (which is fixed-
   positioned anyway while fullscreen is active). */
body.plotter-fullscreen-active .sec-row > .sec-main > :not(.figure) {
    display: none !important;
}
body.plotter-fullscreen-active .content-outer.plotter-outer {
    padding: 0;
    margin: 0;
}

/* Shift the figure content (canvas + status) right so nothing
   renders BEHIND the floating control widget. Widget sits at
   left: 18px, width: var(--toc-width) (220px), so we reserve
   (18 + 220 + 24 gutter = 262px) on the left.
   Also override the clamp(…880px) height from .plotter-figure
   so the fullscreen figure actually fills the whole viewport. */
body.plotter-fullscreen-active .plotter-figure.fullscreen {
    padding-left: calc(var(--toc-width) + 42px);
    height: 100vh !important;
    min-height: 100vh;
}

/* Status bar becomes a centered floating pill above the bottom
   edge. `position: fixed` (not absolute) centers relative to the
   viewport so the Windows taskbar doesn't clip it AND the pill is
   visually centered on the screen, not on the remaining canvas
   area after the widget shift. */
body.plotter-fullscreen-active .plotter-figure.fullscreen .plotter-status {
    position: fixed;
    /* Clear the Windows taskbar (typically 40-48px tall) with a
       comfortable margin; real-browser F11 fullscreen has no
       taskbar but extra bottom gap still reads clean. */
    bottom: 60px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - 80px);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-active);
    padding: 6px 18px;
    background: var(--bg-overlay);
    -webkit-backdrop-filter: blur(var(--blur-overlay));
    backdrop-filter: blur(var(--blur-overlay));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    z-index: calc(var(--z-fullscreen) + 2);
}

/* 2D/3D dim-toggle stays visible in fullscreen at the top, shifted
   to the right of the close button area. Lets the user switch
   between plotters without leaving fullscreen. */
body.plotter-fullscreen-active .plotter-figure.fullscreen .dim-toggle {
    display: flex;
    top: 18px;
    left: auto;
    right: 152px;           /* leaves ~140px for the close-btn pill */
    z-index: calc(var(--z-fullscreen) + 2);
}
/* Slight backdrop on the dim-toggle in fullscreen so it reads
   against the live canvas. */
body.plotter-fullscreen-active .plotter-figure.fullscreen .dim-btn {
    background: var(--bg-overlay);
    -webkit-backdrop-filter: blur(var(--blur-overlay));
    backdrop-filter: blur(var(--blur-overlay));
}
body.plotter-fullscreen-active .plotter-figure.fullscreen .dim-btn.active {
    background: var(--accent);
    color: var(--text-on-accent);
}

/* The foundation's .figure.fullscreen rule moves the .fig-info panel
   to left: 18px top: 54px — exactly where our floating control
   widget sits. The widget IS the info/control surface in plotter
   fullscreen, so hide the foundation panel to prevent its faint
   rectangle from bleeding through behind the widget. */
body.plotter-fullscreen-active .plotter-figure.fullscreen .fig-info {
    display: none !important;
}
/* TOC transforms from fixed sidebar into a floating widget. */
body.plotter-fullscreen-active .toc {
    top: 18px;
    left: 18px;
    bottom: 18px;
    width: var(--toc-width);
    max-height: calc(100vh - 36px);
    background: var(--bg-overlay);
    -webkit-backdrop-filter: blur(var(--blur-overlay));
    backdrop-filter: blur(var(--blur-overlay));
    border: 1px solid var(--border-active);
    border-right: 1px solid var(--border-active);
    border-radius: var(--radius-lg);
    z-index: calc(var(--z-fullscreen) + 1);
    overflow-y: auto;
    padding: 8px 0;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
/* Close button moves to top-right in plotter fullscreen so it doesn't
   collide with the floating control widget on the left. */
body.plotter-fullscreen-active .plotter-figure.fullscreen .close-btn {
    left: auto;
    right: 18px;
}
/* Leave a small gutter on the left of the fullscreen canvas so the
   floating widget doesn't visually steal pixels from the field.
   Value matches the widget width + its 18px offset + 18px gutter. */
body.plotter-fullscreen-active .plotter-figure.fullscreen .fig-canvas-wrap {
    padding-left: 0;
}

/* ── TOC section labels (plotter uses the TOC rail for controls) ─ */
.toc .toc-h3 {
    font-size: var(--text-toc-heading);
    font-weight: var(--font-semibold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    padding: 12px 16px 4px;
    font-family: var(--font-ui);
}

.toc .toc-h3:first-child { padding-top: 0; }

/* ── Plotter-specific control sections inside the TOC sidebar ──── */
.plotter-ctrl {
    padding: 6px 16px 14px;
    font-family: var(--font-ui);
    border-bottom: 1px solid var(--border);
}
.plotter-ctrl:last-child { border-bottom: none; }

.plotter-ctrl h4 {
    font-size: var(--text-toc-heading);
    font-weight: var(--font-semibold);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: 6px;
    font-family: var(--font-ui);
}

.plotter-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.plotter-row label {
    font-family: var(--font-ui);
    color: var(--text-muted);
    flex: 0 0 auto;
    white-space: nowrap;
}
.plotter-row input[type="text"],
.plotter-row select {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    outline: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.plotter-row input[type="text"]:focus,
.plotter-row select:focus {
    border-color: var(--accent);
    background: var(--bg-surface);
}
.plotter-row input[type="text"].error {
    border-color: var(--color-error);
    background: rgba(200, 88, 88, 0.08);
}

.plotter-slider-row {
    margin: 6px 0 4px;
}
.plotter-slider-hd {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-ui);
    margin-bottom: 2px;
}
.plotter-slider-hd .val {
    color: var(--accent-light);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--font-semibold);
}
.plotter-slider-row input[type="range"] {
    width: 100%;
    height: var(--slider-height);
    accent-color: var(--accent);
}

.plotter-toggle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    padding: 3px 0;
    font-family: var(--font-ui);
    cursor: pointer;
    user-select: none;
}
.plotter-toggle-row input[type="checkbox"] {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    accent-color: var(--checkbox-accent);
    cursor: pointer;
}
.plotter-toggle-row .badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9.5px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.plotter-toggle-row .badge-div  { color: #f87171; border-color: rgba(248, 113, 113, 0.35); }
.plotter-toggle-row .badge-rot  { color: #60a5fa; border-color: rgba(96, 165, 250, 0.35); }
.plotter-toggle-row .badge-mag  { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }

/* Buttons in TOC rail */
.plotter-btn-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.plotter-btn {
    flex: 1 1 auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 10px;
    font-family: var(--font-ui);
    font-size: 11px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.plotter-btn:hover {
    border-color: var(--accent);
    color: var(--text-bright);
}
.plotter-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}
.plotter-btn.primary:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
}
.plotter-btn.warning {
    border-color: rgba(200, 88, 88, 0.45);
    color: #e8a0a0;
}
.plotter-btn.warning:hover {
    background: rgba(200, 88, 88, 0.15);
    color: #ffffff;
}

.plotter-error-msg {
    min-height: 14px;
    color: var(--color-error);
    font-size: 11px;
    font-family: var(--font-ui);
    margin: 4px 0 2px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.plotter-error-msg.visible { opacity: 1; }

/* ── Main figure tweaks (full height & no fixed height) ────────── */
.plotter-figure {
    margin: 0;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    height: clamp(520px, 78vh, 880px);
    overflow: hidden;
    background: var(--bg-surface);
    border: 1px solid var(--border);
}
.plotter-figure .fig-canvas-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    cursor: crosshair;
    min-height: 360px;
}
.plotter-figure .fig-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Fullscreen plotter: hide the info panel's left-of-figure layout
   and let the canvas take the entire viewport. */
.plotter-figure.fullscreen {
    position: fixed;
    inset: 0;
    height: 100vh;
    width: 100vw;
    margin: 0;
    border-radius: 0;
    border: none;
    background: var(--bg-fullscreen);
    z-index: var(--z-fullscreen);
    display: flex;
    flex-direction: column;
}
.plotter-figure.fullscreen .fig-canvas-wrap {
    border-radius: 0;
}
.plotter-figure.fullscreen .plotter-formula-banner {
    top: 14px;
}

/* Formula banner (floats over canvas, shows F = (...)) */
.plotter-formula-banner {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-overlay);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    padding: 5px 14px;
    font-family: var(--font-math);
    font-size: 15px;
    color: var(--text-bright);
    z-index: 3;
    backdrop-filter: blur(var(--blur-overlay));
    -webkit-backdrop-filter: blur(var(--blur-overlay));
    pointer-events: none;
    white-space: nowrap;
    max-width: calc(100% - 160px);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legend (overlay on canvas, bottom-right) */
.plotter-legend {
    position: absolute;
    bottom: 46px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    pointer-events: none;
}
.plotter-legend-block {
    background: var(--bg-overlay);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-md);
    padding: 5px 10px 4px;
    min-width: 156px;
    backdrop-filter: blur(var(--blur-overlay));
    -webkit-backdrop-filter: blur(var(--blur-overlay));
}
.plotter-legend-title {
    font-size: 9.5px;
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin-bottom: 3px;
    text-align: center;
    font-family: var(--font-ui);
}
.plotter-legend-bar {
    height: 10px;
    border-radius: 3px;
    margin-bottom: 2px;
}
.plotter-legend-labels {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* Status bar below canvas */
.plotter-status {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 6px 14px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--bg-navbar);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    flex-wrap: wrap;
}
.plotter-status .hl { color: var(--accent-light); }
.plotter-status .sep { color: var(--text-dim); font-size: 9px; }
.plotter-status .spacer { flex: 1; }

.plotter-figure.fullscreen .plotter-status {
    border-radius: 0;
    background: var(--bg-overlay);
    backdrop-filter: blur(var(--blur-overlay));
    -webkit-backdrop-filter: blur(var(--blur-overlay));
    border-top: 1px solid var(--border-active);
}

/* ── Shortcut listings in margin column ────────────────────────── */
.plotter-shortcut-row {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: var(--font-ui);
    margin-bottom: 3px;
}
.plotter-shortcut-row kbd {
    background: var(--bg-surface);
    border: 1px solid var(--border-active);
    border-radius: 3px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-bright);
    min-width: 20px;
    text-align: center;
}

/* Supported functions list */
.plotter-fn-list {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.7;
}
.plotter-fn-list code {
    background: var(--bg-surface);
    padding: 1px 4px;
    border-radius: 3px;
    color: var(--text);
    border: 1px solid var(--border);
    font-size: 10.5px;
}

/* Hide outer page scroll when plotter in fullscreen */
body:has(.plotter-figure.fullscreen) {
    overflow: hidden;
}

/* ── Responsive tweaks for the plotter layout ──────────────────── */
/* The plotter keeps its left control rail down to 860 px; below that
   the sidebar collapses and controls scroll above the figure. */
@media (max-width: 860px) {
    .plotter-figure {
        height: clamp(420px, 60vh, 620px);
    }
    .plotter-legend {
        right: 8px;
        bottom: 40px;
    }
    .plotter-legend-block {
        min-width: 130px;
    }
}