/* Scaling Calculator (templates/tools/scaling.html, issue #210).
   The chart itself is styled by plot-engine.css; this file covers the
   forms (one grid: a label column and two field columns, shared by the
   points, the mechanics and the check point), the result tiles and the
   page's own spacing. */

/* The page: no sidebar (the forms want the width), roomier stations, and
   plain inputs and lists at exactly the value field's height. */
.sc-page .rail-body { grid-template-columns: 1fr; }
.sc-page .station { margin-bottom: 2rem; }
.sc-page .rail-col .station:last-child { margin-bottom: 0; }
.sc-page .value-field-input, .sc-page .sc-select { line-height: 1.25; }
.sc-plans .upgrade-prompt { margin: 0; }

/* Mode tabs: a row above the first station. On a phone they take the
   full width, in equal segments. */
.sc-mode-station { margin-bottom: 1rem !important; }
.sc-mode-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.sc-mode-lead { font-size: var(--text-sm); font-weight: 500; color: var(--fg-secondary); }
.sc-modes button { padding: 6px 14px; }
@media (max-width: 640px) {
    .sc-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 100%; }
    .sc-modes button { padding: 6px 4px; }
}

/* Two columns per station: inputs and chart, check point and results. */
.sc-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 900px) {
    .sc-cols { grid-template-columns: minmax(0, 1fr); }
}
.sc-results-card { border-color: rgba(251,191,36,0.15); }

/* Segmented switch: Linear | Rotary (Current | Voltage for analog) */
.sc-seg {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-input);
}
.sc-seg button {
    font: 500 var(--text-sm) var(--font-body);
    color: var(--fg-muted);
    background: transparent;
    border: 0;
    padding: 4px 10px;
    cursor: pointer;
}
.sc-seg button + button { border-left: 1px solid var(--border); }
.sc-seg button[aria-checked="true"] { background: var(--accent-subtle); color: var(--accent-text); }
.sc-seg button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.sc-seg[hidden] { display: none; }

/* Forms: a fixed label column and two field columns, so every field on
   the page sits in one of the same two columns. Groups with column
   headers hide each field's own label (kept for screen readers); the
   mechanics rows show it above the field. */
.sc-card { container-type: inline-size; }
.sc-form {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    align-items: center;
}
.sc-form + .sc-form { margin-top: 0.875rem; }
.sc-th {
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
    align-self: end;
}
.sc-rl { font-size: var(--text-sm); font-weight: 500; color: var(--fg-secondary); white-space: nowrap; }
.sc-slot { min-width: 0; }
.sc-slot--wide { grid-column: 2 / -1; }
.sc-form .value-field, .sc-form .sc-field { position: relative; }
.sc-form:not(.sc-form--labelled) .value-field > label,
.sc-form:not(.sc-form--labelled) .sc-field > label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* With the field labels on show, the row label lines up with the boxes:
   the label above a box is about 1.5rem, the box 2.5rem. */
.sc-form--labelled .sc-rl { align-self: start; padding-top: 2.05rem; }
.sc-form--labelled .sc-slot { align-self: start; }
/* An output in the form: a value where an input would be. */
.sc-out {
    display: flex;
    align-items: center;
    min-height: calc(2.5rem + 2px);
    padding: 0 0.75rem;
    font: 500 var(--text-base) var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    transition: opacity 0.15s;
}
.sc-out--quiet { font: var(--text-sm) var(--font-body); color: var(--fg-muted); }
.sc-dev { margin: 4px 0 0; min-height: 1.2em; font: var(--text-xs) var(--font-mono); color: var(--fg-muted); }
.has-measured .sc-dev { color: var(--accent-text); }

/* The slider spans both field columns under the Check row. */
.sc-range { display: block; width: 100%; margin: 0; accent-color: var(--accent-text); }
.sc-range:disabled { opacity: 0.45; }
.sc-adopt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sc-adopt-lead { font-size: var(--text-sm); color: var(--fg-secondary); margin-right: 0.25rem; }

/* Groups: a title with a tag saying whether the group is the line or the
   comparison, then its form. A grid, so a mode can put the mechanics
   first without the script caring about DOM order. */
.sc-groups { display: grid; gap: 1rem; margin-top: 1rem; }
.sc-groups--theory-first .sc-group[data-group="theory"] { order: -1; }
.sc-group-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.625rem;
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
}
.sc-group.is-line .sc-group-title { color: var(--accent-text); }
.sc-badge {
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fg-muted);
}
.sc-badge:empty { display: none; }
.sc-group.is-line .sc-badge { color: var(--accent-text); }
.sc-group.is-compared .value-field-input,
.sc-group.is-compared .sc-plain { color: var(--fg-secondary); }

/* Cells: one input each, shown for the active variant */
.sc-cell { min-width: 0; }
.sc-cell .value-field { margin-bottom: 0; }
.sc-cell[hidden] { display: none; }

/* Plain inputs (counts, ratios, the value unit) and lists are not a
   value_field include, but they sit in the same grid and look the same. */
.sc-field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--fg-secondary);
    margin-bottom: 4px;
}
.sc-field-inner {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    overflow: hidden;
    transition: all 0.2s cubic-bezier(.16,1,.3,1);
}
.sc-field-inner:hover { border-color: var(--border-hover); }
.sc-field-inner:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.sc-field-inner .sc-plain { flex: 1; min-width: 0; }
.sc-select {
    flex: 1;
    min-width: 0;
    height: 2.5rem;
    padding: 0 0.75rem;
    font: 1rem var(--font-mono);
    color: var(--fg);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.sc-select:focus { outline: none; }
.sc-unit-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0 0.5rem;
    border-left: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
    color: var(--fg-muted);
    font: 500 var(--text-sm) var(--font-mono);
    white-space: nowrap;
}
[data-theme="light"] .sc-unit-cell { background: rgba(0,0,0,0.03); }
.sc-cell.is-bad .value-field-inner,
.sc-cell.is-bad .sc-field-inner {
    border-color: var(--error-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--error-text) 16%, transparent);
}

/* Raw range presets for the analog input */
.sc-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.sc-presets button, .sc-btn {
    font: 500 var(--text-sm) var(--font-body);
    color: var(--fg-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    cursor: pointer;
}
.sc-presets button:hover, .sc-btn:hover:not(:disabled) { color: var(--fg); border-color: var(--border-hover); }
.sc-presets button:focus-visible, .sc-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.sc-btn:disabled { color: var(--fg-muted); cursor: not-allowed; opacity: 0.55; }

/* Narrow (a phone, not the half-width card on a laptop): the row label
   goes on its own line above the two columns. */
@container (max-width: 439px) {
    .sc-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sc-th--lead, .sc-rl--quiet { display: none; }
    .sc-rl, .sc-form--labelled .sc-rl { grid-column: 1 / -1; margin-top: 0.25rem; padding-top: 0; }
    .sc-slot--wide { grid-column: 1 / -1; }
}

/* The plot, beside the inputs: a little shorter than the engine's default
   so the two read as one row. Its height is reserved so nothing below
   moves when the script builds it (toolbar + stage + band strip + hint). */
.sc-page .plot-stage { height: clamp(380px, 48vh, 520px); }
.sc-plot { min-height: calc(clamp(380px, 48vh, 520px) + 106px); }
@media (max-width: 640px) {
    .sc-page .plot-stage { height: 420px; }
    .sc-plot { min-height: 526px; }
}

/* Results: one tile per derived number */
.sc-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
/* An odd last tile stretches over the empty cells of its row. */
.sc-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container (min-width: 620px) {
    .sc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sc-tile:last-child:nth-child(odd) { grid-column: auto; }
    .sc-tile:last-child:nth-child(3n + 2) { grid-column: span 2; }
}
@container (min-width: 900px) {
    .sc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sc-tile:last-child:nth-child(3n + 2) { grid-column: auto; }
    .sc-tile:last-child:nth-child(4n + 2) { grid-column: span 3; }
    .sc-tile:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
.sc-tile { background: var(--bg-card); padding: 10px 12px; display: grid; gap: 2px; align-content: start; min-width: 0; }
.sc-tile-k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-muted); }
.sc-tile-v { display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; min-width: 0; }
.sc-tile-v b { font: 500 var(--text-lg, 1.125rem) var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); overflow-wrap: anywhere; }
.sc-tile-u { font: var(--text-sm) var(--font-mono); color: var(--fg-muted); }
.sc-tile-c { font-size: var(--text-xs); color: var(--fg-muted); }
.sc-tile--accent .sc-tile-v b { color: var(--accent-text); }
.sc-notes { margin-top: 0.75rem; display: grid; gap: 4px; font-size: var(--text-sm); color: var(--fg-secondary); }
.sc-notes p { margin: 0; }
.sc-notes b { font-weight: 500; color: var(--fg); }
/* Waiting for an answer: the numbers on screen are no longer current. */
.sc-tile-v b { transition: opacity 0.15s; }
#sc-results.is-pending .sc-tile-v b { opacity: 0.45; }

/* How it works */
.sc-explain { font-size: var(--text-sm); color: var(--fg-secondary); line-height: 1.7; }
.sc-explain code { color: var(--fg); white-space: nowrap; }
.sc-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.625rem;
    margin: 0.75rem 0;
}
.sc-case {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    align-content: start;
}
.sc-case h3 { margin: 0; font-size: var(--text-base); color: var(--fg); }
.sc-case p { margin: 0; line-height: 1.5; }
.sc-case-when { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); }
.sc-link {
    font: inherit;
    color: var(--link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sc-case .sc-link { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .sc-tile-v b, .sc-out { transition: none; }
}