/* /resistor-color-code/ page styles. Built from /assets/polyatic.css tokens only (no new fonts or theme
   colours). The band colours are data: each comes from resistor-data.json as an SVG fill attribute. */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.rc-head .sub{margin-bottom:1rem}
@media(max-width:520px){.rc-head h1{margin-bottom:0.25rem;font-size:1.625rem}.rc-head .sub{font-size:0.9375rem;margin-bottom:0.625rem}}

.rc-stage{padding:1rem;display:grid;gap:0.625rem;align-content:start}
@media(max-width:520px){.rc-stage{padding:0.75rem}}
.rc-modes{margin-bottom:0}
.rc-modes button{font-size:0.8125rem;padding:0.5rem 0.25rem}
.rc-panel{display:grid;gap:0.625rem;min-width:0}
.rc-panel[hidden]{display:none}
.rc-count{gap:0.375rem}
.rc-count .chip{padding:0.4375rem 0.25rem;flex:1;white-space:nowrap}
.rc-k{margin:0;font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rc-h{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}

/* the drawn resistor */
.rc-res{display:block;width:100%;max-width:34rem;height:auto;margin:0 auto;touch-action:manipulation}
.rc-mini{display:block;width:100%;max-width:16rem;height:auto}
.rc-mini[hidden]{display:none}
.rc-lead{stroke:var(--muted);stroke-width:4;stroke-linecap:round}
.rc-body{fill:var(--surface-2);stroke:var(--line-2);stroke-width:2}
.rc-b{stroke:var(--ink);stroke-opacity:.35;stroke-width:1;cursor:pointer}
.rc-b.empty{stroke-dasharray:4 3;stroke-opacity:.8}
.rc-b.on{stroke:var(--accent);stroke-opacity:1;stroke-width:3}
.rc-mark{fill:var(--accent)}

/* band selectors under the drawing */
.rc-bandlist{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0.375rem}
.rc-bandlist.many{gap:0.25rem}
.rc-bandlist.many .rc-bandbtn{padding-left:0;padding-right:0}
.rc-bandlist.many .rc-bl{font-size:0.6875rem}
@media(min-width:560px){.rc-bandlist.many .rc-bl{font-size:0.75rem}}
.rc-bandbtn{display:grid;justify-items:center;gap:0.125rem;min-width:0;padding:0.375rem 0.25rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink-2);font:inherit;cursor:pointer}
.rc-bandbtn:hover{border-color:var(--ink)}
.rc-bandbtn.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.rc-bandbtn .rc-bn{font-family:var(--mono);font-size:0.6875rem;color:var(--muted);line-height:1}
.rc-bandbtn .rc-sw{width:1rem;height:1rem}
.rc-bl{font-size:0.75rem;font-weight:600;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-sw{width:0.875rem;height:0.875rem;flex:none;vertical-align:-0.125rem}
.rc-sw rect{stroke:var(--ink);stroke-opacity:.4}

/* result */
.rc-readout .val{font-size:1.375rem;padding:0.5rem 0}
@media(max-width:520px){.rc-readout .val{font-size:1.25rem;padding:0.3125rem 0}}
.rc-line{margin:0;font-size:0.9375rem;line-height:1.45;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rc-small{font-size:0.8125rem;color:var(--muted)}
.rc-small:empty{display:none}
.rc-warn{margin:0;padding:0.5rem 0.75rem;border:1px solid var(--warn);border-left-width:0.25rem;border-radius:0.5rem;font-size:0.875rem;line-height:1.45;color:var(--ink)}
.rc-warn.hint{border-color:var(--line-2);border-left-color:var(--warn)}
.rc-err{margin:0;font-size:0.875rem;color:var(--bad);font-weight:600}
.rc-err[hidden]{display:none}

/* colour palette: every button names its colour in text */
.rc-palette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.3125rem}
@media(min-width:560px){.rc-palette{grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr))}}
.rc-col{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:0.25rem;align-items:center;text-align:left;min-width:0;padding:0.3125rem 0.3125rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.rc-col:hover{border-color:var(--ink)}
.rc-col .rc-sw{grid-row:1/3;width:0.75rem;height:1.75rem}
@media(min-width:560px){.rc-col .rc-sw{width:1rem}.rc-col{column-gap:0.375rem;padding:0.3125rem 0.4375rem}}
.rc-cn{font-size:0.78125rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-cm{font-family:var(--mono);font-size:0.6875rem;color:var(--muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-col.na{border-style:dashed}
.rc-col.na .rc-cn{color:var(--muted)}
.rc-col.on{border-color:var(--accent);background:var(--accent-soft)}
.rc-col:focus-visible,.rc-bandbtn:focus-visible,.rc-count .chip:focus-visible,.rc-modes button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* value -> bands */
.rc-inrow{display:grid;grid-template-columns:minmax(0,1fr) 8.5rem;gap:0.625rem;align-items:end}
.rc-inrow .field .head{margin-bottom:0.3125rem}
#val,#smd,#smdval{font-family:var(--mono);font-size:1.0625rem}
.rc-encs{display:grid;gap:0.625rem}
@media(min-width:560px){.rc-encs{grid-template-columns:1fr 1fr}}
.rc-enc{display:grid;gap:0.25rem;min-width:0}
.rc-names{margin:0;font-size:0.875rem;line-height:1.4}
.rc-series{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem}
.rc-series li{padding:0.25rem 0.625rem;border-radius:0.5rem;border:1px solid var(--line-2);font-size:0.8125rem}
.rc-series li.yes{border-color:var(--ok);color:var(--ok);font-weight:600}
.rc-series li.yes::before{content:"✓ "}
.rc-series li.no{color:var(--muted)}
.rc-actions{display:flex;flex-wrap:wrap;gap:0.5rem}
#v-out[hidden]{display:none}
#v-out{display:grid;gap:0.625rem}

/* SMD */
.rc-gap{margin-top:0.5rem}
.rc-codes{border-collapse:collapse;width:100%;font-size:0.875rem}
.rc-codes th,.rc-codes td{padding:0.375rem 0.5rem;border-bottom:1px solid var(--line);text-align:left}
.rc-codes thead th{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rc-code{font-family:var(--mono);font-weight:600;font-size:1rem}
#smd-explain.bad{color:var(--bad);font-weight:600}

/* chart */
.rc-chart{padding:1rem;display:grid;gap:0.625rem;align-content:start}
.rc-charthead{display:flex;justify-content:space-between;align-items:center;gap:0.5rem}
.rc-table{border-collapse:collapse;width:100%;font-size:0.8125rem;font-variant-numeric:tabular-nums}
.rc-table th,.rc-table td{padding:0.3125rem 0.375rem;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.rc-table thead th{font-family:var(--mono);font-size:0.625rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.rc-table tbody th{font-weight:600}
.rc-src{margin:0;font-size:0.8125rem;color:var(--muted);line-height:1.5}
.rc-print-reading{display:none}

/* reference lists in the explainer */
.rc-eia{list-style:none;margin:0.5rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(4.25rem,1fr));gap:0.125rem 0.5rem;font-family:var(--mono);font-size:0.8125rem;font-variant-numeric:tabular-nums}
.rc-eia b{color:var(--accent);font-weight:600}
.rc-eser p{margin:0 0 0.5rem;font-size:0.875rem;line-height:1.55;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

@media(min-width:920px){
  .rc-duo{grid-template-columns:minmax(0,1.25fr) minmax(20rem,.75fr)}
  .rc-stage,.rc-chart{padding:1.25rem}
}

/* print: one page with the reading, the colour chart, the EIA-96 table and the E series */
@media print{
  @page{margin:12mm}
  body{background:#fff;color:#000}
  .skip-link,header.brand,.tool-head .sub,.rc-stage,.related,footer.site,#print,noscript,.explainer>*:not(.rc-ref){display:none!important}
  .wrap{max-width:none;padding:0}
  .tool-head h1{font-size:16pt;margin:0 0 4mm}
  .duo,.rc-duo{display:block}
  .card,.rc-chart{box-shadow:none;border:0;padding:0;position:static}
  .rc-print-reading{display:block;margin:0 0 3mm;font-size:11pt;font-weight:600}
  .rc-charthead{display:none}
  .rc-table{font-size:8.5pt;line-height:1.2}
  .rc-table th,.rc-table td{padding:0.6mm 2mm;border-bottom:0.2mm solid #999}
  .explainer-row{display:block}
  .explainer,.explainer-row .explainer{margin:4mm 0 0;max-width:none}
  .rc-ref h2{font-size:11pt;margin:3mm 0 1mm}
  .rc-ref>p:not(.rc-src){display:none}
  .explainer .rc-eia{grid-template-columns:repeat(12,1fr);gap:0 1mm;margin:1mm 0;padding:0}
  .explainer .rc-eia li{font-size:7.5pt;line-height:1.3;margin:0;padding:0}
  .rc-eia b{color:#000}
  .rc-eser p{font-size:8pt;margin:0 0 1mm;line-height:1.35}
  .rc-src,.explainer .rc-src{font-size:7.5pt;color:#333}
}