/*
 * kW → Amps calculator — the bits the shared cc- system in ../bs7671/suite.css
 * does not already cover: the Simple/Advanced switch, preset chips, the
 * candidate-ladder table and the chart panels.
 *
 * Everything binds to the site's custom properties, never a literal colour —
 * the page has three themes and the charts read the same tokens at runtime.
 */

.kw-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.kw-head {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
  padding: .75rem .9rem; border-bottom: 1px solid var(--border); background: var(--bg-elevated);
}

/* Simple / Advanced */
.kw-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-surface); }
.kw-seg button { border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: .87rem; padding: .4rem .95rem; cursor: pointer; transition: background var(--transition), color var(--transition); }
.kw-seg button + button { border-left: 1px solid var(--border); }
.kw-seg button.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.kw-seg button:hover:not(.is-on) { color: var(--text-primary); background: var(--bg-elevated); }

.kw-body { display: grid; grid-template-columns: 300px 1fr; }
.kw-form { padding: 1rem .9rem; border-right: 1px solid var(--border); display: grid; gap: .7rem; align-content: start; }
.kw-out  { padding: 1rem .9rem; display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
@media (max-width: 860px) {
  .kw-body { grid-template-columns: 1fr; }
  .kw-form { border-right: 0; border-bottom: 1px solid var(--border); }
}

.kw-sep { border: 0; border-top: 1px solid var(--border); margin: .3rem 0 .1rem; }
.kw-sep__label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.kw-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.kw-range { width: 100%; accent-color: var(--accent); margin-top: -.35rem; }

/* preset chips — square bordered, not pills */
.kw-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.kw-chip {
  border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-muted);
  border-radius: var(--radius); padding: .28rem .55rem; font: inherit; font-size: .78rem; cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.kw-chip:hover { border-color: var(--accent); color: var(--text-primary); }

/* The Load control is a <label> wrapping a hidden file input. A <button> takes
   its line-height from the UA stylesheet, a <label> inherits the body's (1.6),
   so the label came out visibly taller than its neighbours. Normalise BOTH
   rather than nudging one — this file only loads on this page, so no other
   calculator's toolbar is touched. */
.cc-toolbar { align-items: center; }
.cc-toolbar .cc-btn,
label.cc-btn { display: inline-flex; align-items: center; line-height: 1.2; }
/* style.css styles <label> globally for the site's forms — display:block,
   margin-bottom:0.5rem, font-weight:500, text-align:start. A flex item is
   centred INCLUDING its margins, so that 8px bottom margin lifted the Load
   control 4px above its neighbours and stretched the toolbar. Reset the four
   properties the global rule sets, so it matches the <button>s exactly. */
.cc-toolbar label.cc-btn { margin: 0; font-weight: 400; text-align: center; }

.kw-note { font-size: .85rem; color: var(--text-muted); margin: 0; }
.kw-note--tight { margin-top: .4rem; }
.kw-note strong { color: var(--text-primary); font-weight: 600; }
.kw-warn { color: var(--accent-warm); }
.kw-bad { color: var(--danger); }
.kw-link { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* chart panels */
.kw-panel { display: grid; gap: .5rem; min-width: 0; }
.kw-panel__head { display: flex; gap: .6rem; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.kw-panel__title { font-size: .9rem; font-weight: 600; margin: 0; }
.kw-panel__note { font-size: .8rem; color: var(--text-muted); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.kw-panel__box { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-primary); padding: .6rem; overflow-x: auto; }
.kw-panel__box svg { display: block; max-width: 100%; height: auto; }

/* candidate ladder — a real table, so it reads correctly to a screen reader */
.kw-lad { width: 100%; border-collapse: collapse; font-size: .82rem; }
.kw-lad__cap { caption-side: bottom; text-align: left; font-size: .78rem; color: var(--text-muted); padding-top: .5rem; }
.kw-lad th { text-align: left; font-weight: 500; font-size: .75rem; color: var(--text-muted); padding: .3rem .5rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.kw-lad td { padding: .32rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.kw-lad tbody th { font-weight: 400; color: var(--text-primary); font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.kw-lad tr:last-child td, .kw-lad tr:last-child th { border-bottom: 0; }
.kw-lad tr.is-chosen { background: rgba(var(--accent-rgb), .1); }
.kw-lad tr.is-chosen th { box-shadow: inset 3px 0 0 var(--accent); }
.kw-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }

.kw-bar { position: relative; height: 9px; min-width: 60px; background: var(--bg-elevated); border-radius: 2px; overflow: hidden; }
.kw-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; }
.kw-bar__fill.is-ok { background: var(--success); }
.kw-bar__fill.is-no { background: var(--danger); }
.kw-tick { font-weight: 600; }
.kw-tick.is-ok { color: var(--success); }
.kw-tick.is-no { color: var(--danger); }

.kw-more { border-top: 1px solid var(--border); padding-top: .6rem; }
.kw-more summary { font-size: .82rem; color: var(--text-muted); cursor: pointer; list-style: none; }
.kw-more summary::-webkit-details-marker { display: none; }
.kw-more summary::before { content: '▸ '; color: var(--accent); }
.kw-more[open] summary::before { content: '▾ '; }
.kw-more__body { padding-top: .7rem; display: grid; gap: 1.1rem; }

.kw-verify { margin: 1rem 0 0; padding-left: 1.1rem; font-size: .8rem; color: var(--text-muted); }
.kw-verify li { margin-bottom: .25rem; }

/* quick-reference table (server-rendered, so it is indexable) */
.kw-ref { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 1rem; }
.kw-ref caption { caption-side: bottom; text-align: left; font-size: .82rem; color: var(--text-muted); padding-top: .6rem; }
.kw-ref th, .kw-ref td { padding: .4rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }
.kw-ref thead th { font-size: .78rem; color: var(--text-muted); font-weight: 500; }
.kw-ref td { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* screen-reader-only live region */
.kw-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) { .kw-seg button, .kw-chip { transition: none; } }