/* motorcalculator/style.css — page-specific styles, kept to the site's tokens.
   Loaded after assets/tokens.css + base.css + modern.css.

   Single-screen cockpit layout: the input rail sits on the left, the headline
   numbers + tabbed views (curves / 3D surface / point lookup / notes) on the
   right — the whole tool fits one screen with no scrolling. */

/* ---- frame ----
   The grid row is as tall as the input rail; the results column flexes so the
   chart card's bottom edge always lines up with the rail's last card. */
.main-grid {
    display: grid;
    grid-template-columns: 484px minmax(0, 1fr);
    gap: 10px;
}
.results { display: flex; flex-direction: column; min-width: 0; }

/* ---- left rail: denser rows than the suite default ---- */
.rail .form-group { margin-bottom: 8px; }
.rail .form-group:last-child { margin-bottom: 0; }
.rail .form-group-title { padding: 4px 12px; }
.rail .form-row { padding: 4px 12px; min-height: 34px; gap: 8px; }
.rail .form-label { min-width: 108px; padding-top: 5px; }
.rail .form-right { min-width: 0; grid-template-columns: 1fr 160px; column-gap: 8px; }
.rail .form-hint { width: auto; min-width: 0; }
.rail input[type="number"],
.rail select { width: 160px; height: 26px; padding: 3px 7px; font-size: 12.5px; }
.rail select { font-size: 12px; padding: 3px 4px; }
.form-row.no-line { border-bottom: none; }

/* ---- Motor presets: load select + save/delete, stored by the site worker ---- */
.preset-block { border-bottom: 1px solid var(--border); }
.preset-row { display: flex; align-items: center; gap: 6px; }
.preset-row[hidden] { display: none; }
.preset-row .form-label { min-width: 108px; flex-shrink: 0; padding-top: 0; }
.rail .preset-row select { width: auto; flex: 1; min-width: 0; }
.preset-row input[type="text"] {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 26px;
    padding: 3px 7px;
    font-size: 12.5px;
}
.preset-row button {
    height: 26px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.preset-status {
    padding: 0 12px 6px;
    font-family: var(--font-m);
    font-size: 10px;
    letter-spacing: 0.4px;
    color: var(--muted2);
}
.preset-status.ok { color: var(--ok); }
.preset-status.err { color: var(--err); }
.preset-status[hidden] { display: none; }

/* Collapsible prose — long explanations fold away until wanted */
details.form-details { border-top: 1px solid var(--border); }
details.form-details summary {
    padding: 4px 12px;
    font-family: var(--font-m);
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: var(--muted2);
    cursor: pointer;
    user-select: none;
}
details.form-details summary:hover { color: var(--accent); }
details.form-details[open] summary { color: var(--muted); }
details.form-details .form-description {
    border-top: 1px solid var(--border);
    border-bottom: none;
}

/* ---- Warning strip — sanity-range hints, never blocks computation ---- */
.warn-strip {
    display: none;
    border: 1px solid var(--warn);
    background: var(--card);
    color: var(--warn);
    font-family: var(--font-m);
    font-size: 11px;
    line-height: 1.6;
    padding: 7px 12px;
    margin-bottom: 8px;
}
.warn-strip.err { border-color: var(--err); color: var(--err); }

/* ---- Headline numbers + the constants the model actually uses ---- */
.stat-tile {
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}
.stat-combined {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 6px 0 0;
    margin-bottom: 8px;
}
.stat-cell { padding: 0 14px 6px; min-width: 0; }
.stat-cell + .stat-cell { border-left: 1px solid var(--border); }
.stat-label {
    font-family: var(--font-m);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muted);
}
.stat-value {
    font-family: var(--font-m);
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    margin-top: 2px;
    white-space: nowrap;
}
.stat-value .unit { font-size: 12px; font-weight: 400; color: var(--muted); }
.stat-sub {
    font-family: var(--font-m);
    font-size: 10px;
    line-height: 1.35;
    color: var(--muted2);
    margin-top: 2px;
}
.stat-sub.limit { color: var(--warn); }
.derived-strip {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 16px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
    padding: 5px 14px 6px;
    font-family: var(--font-m);
    font-size: 10.5px;
    letter-spacing: 0.4px;
    color: var(--muted2);
}
.derived-strip .d-lead {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--accent);
}
.derived-strip b { color: var(--text); font-weight: 600; margin-left: 3px; }

/* ---- Tab strip (suite .nav-strip / .nav-tab) with the reset control docked ---- */
.results .nav-strip { display: flex; align-items: stretch; margin-bottom: 8px; }
.results .nav-strip .spacer { flex: 1; }
.nav-strip #btnReset {
    border: none;
    border-left: 1px solid var(--border);
    background: transparent;
    box-shadow: none;
    color: var(--muted2);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0 12px;
    white-space: nowrap;
}
.nav-strip #btnReset:hover {
    color: var(--accent);
    background: transparent;
    transform: none;
    box-shadow: none;
}
.nav-strip #btnReset::before { width: 13px; height: 13px; flex: 0 0 13px; }

/* Tab pages fill the rest of the column; the chart cards stretch to the
   bottom of the rail and the canvases size themselves to the space.
   contain:size stops the canvas height feeding back into the row height —
   the rail alone decides how tall the row is. */
.tab-pages { flex: 1 1 0; min-height: 420px; contain: size; }
.tab-pages .form-group { margin-bottom: 0; }
#tab-curves.active, #tab-kvdroop.active, #tab-surface.active { height: 100%; }
#tab-curves .form-group, #tab-kvdroop .form-group, #tab-surface .form-group {
    height: 100%;
    display: flex;
    flex-direction: column;
}
#tab-curves .chart-wrap, #tab-kvdroop .chart-wrap, #tab-surface .chart-wrap { flex: 1 1 auto; min-height: 0; }

/* ---- Charts ---- */
.chart-wrap { position: relative; padding: 6px 12px 8px; }
.chart-wrap canvas { display: block; width: 100%; cursor: crosshair; }
#ch3d { cursor: grab; touch-action: none; }
#ch3d:active { cursor: grabbing; }
/* extra series colours for the combined chart — theme-aware */
:root { --s-torque: #58a6e8; --s-current: #b58ae8; --s-eff: #45c49a; }
[data-theme="light"] { --s-torque: #1e66b8; --s-current: #7a3fc4; --s-eff: #0d8a63; }
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 14px;
    padding: 6px 12px 0;
    font-family: var(--font-m);
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: var(--muted);
}
.legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    vertical-align: -1px;
}
.chart-tip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: var(--card2);
    border: 1px solid var(--border2);
    box-shadow: var(--shadow);
    font-family: var(--font-m);
    font-size: 11px;
    line-height: 1.5;
    color: var(--text);
    padding: 5px 9px;
    white-space: pre;
    z-index: 5;
}

/* ---- Point lookup: two dense readout columns ---- */
.lookup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
}
.lk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 12px;
    border-bottom: 1px solid var(--border);
    min-height: 36px;
}
.lk-row:last-child { border-bottom: none; }
.lk-main { min-width: 0; }
.lk-name { font-size: 12px; color: var(--muted); line-height: 1.25; }
.lk-hint {
    font-family: var(--font-m);
    font-size: 9.5px;
    letter-spacing: 0.3px;
    color: var(--muted2);
    line-height: 1.25;
    margin-top: 1px;
}
.lk-val {
    font-family: var(--font-m);
    font-size: 12px;
    color: var(--text);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}
.lk-val.hero { color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: 0.4px; }
.lk-val.wrap { white-space: normal; max-width: 58%; }   /* the hint wraps first, not the number */
.lk-row input[type="number"] { width: 150px; height: 26px; padding: 3px 7px; font-size: 12.5px; flex-shrink: 0; }

/* ---- Notes ---- */
.note-title {
    padding: 7px 12px 4px;
    font-family: var(--font-m);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted);
}
#tab-notes .form-description:last-child { border-bottom: none; }

/* ---- Small screens: rail stacks above the views, page scrolls ---- */
@media (max-width: 1020px) {
    .main-grid { grid-template-columns: 1fr; }
    .tab-pages { min-height: 0; flex: none; contain: none; }
    #tab-curves.active, #tab-kvdroop.active, #tab-surface.active { height: auto; }
    #tab-curves .form-group, #tab-kvdroop .form-group, #tab-surface .form-group { height: auto; }
}
@media (max-width: 700px) {
    .lookup-grid { grid-template-columns: 1fr; }
    .stat-combined { grid-template-columns: 1fr; }
    .stat-cell { padding: 5px 14px; }
    .stat-cell + .stat-cell { border-left: none; border-top: 1px solid var(--border); }
}