/* Crystal Ladder Filter page (crystal-ladder-filter.html); everything else is tokens.css/style.css */
.xplot{width:100%;height:auto;display:block;background:var(--color-surface-sunk);border-radius:6px}
.xplot text{font:11px var(--font-mono);fill:var(--color-muted)}.xplot .at{fill:var(--color-ink);font-size:12px}
.xplot .gr{stroke:var(--color-rule)}.xplot .m3{stroke:var(--color-muted);stroke-dasharray:2 4}
.xplot .s21{fill:none;stroke:var(--color-accent);stroke-width:2.2}.xplot .s11{fill:none;stroke:var(--color-signal);stroke-width:1.8;stroke-dasharray:7 4}
.xplot .lb{fill:var(--color-accent)}.xplot .l2{fill:var(--color-signal)}
.cream{background:var(--color-surface);border:1px solid var(--color-edge);border-radius:var(--radius);padding:var(--s2)}
.cream .hint{color:var(--color-muted)}
/* schematic: LC Filter Designer .schem styles from style.css (theme colours); xsch only adds the size rule */
.xsch{width:100%;height:auto;display:block}
.ro.r2{grid-template-columns:1fr 1fr}.xro{grid-template-columns:repeat(4,minmax(0,1fr))}
.spread{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--fs-sm);margin:var(--s2) 0}.spread .bts{display:flex;gap:var(--s2);flex-wrap:wrap}
.okpill{font:var(--fs-xs) var(--font-mono);border:1px solid var(--color-signal);color:var(--color-signal);border-radius:999px;padding:1px 8px}
.btn.sm{padding:4px 10px;font-size:var(--fs-sm)}
.xl .fcard label{display:block;margin:var(--s2) 0 var(--s1);font-size:var(--fs-sm)}
.xl .seg.r3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;border-radius:var(--radius);margin:0 0 var(--s2)}.xl .seg.r3>label{justify-content:center;border-radius:var(--radius);margin:0;min-width:0}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.cgrid{display:grid;grid-template-columns:minmax(400px,1fr) minmax(0,1.6fr);gap:var(--s4);align-items:start}
/* LC Filter Designer widths: container fills .wrap like .lfd; Beginner input cards keep the .lfd .pane 640px cap, results fill */
.xl[data-mode="beginner"] :is(#xmeasure,#xfilter){max-width:640px}.wnav{display:flex;justify-content:space-between;margin-top:var(--s3)}
.plain{font-size:var(--fs-md);margin-bottom:var(--s3)}
.field.cf{padding:4px 8px;font-size:var(--fs-sm);width:9.5em;text-align:right}
/* bench log + parts: cards everywhere, real table for the bench log on wide screens */
.tw.stack .parts tr{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.tw.stack .parts td{white-space:normal;align-items:center}.tw.stack .parts td::before{flex:none}
.tw.stack .parts tr.sel td:first-child::after{content:" ✓ matched";color:var(--color-signal);font:var(--fs-xs) var(--font-mono)}
@media(min-width:1001px){.benchlog .wide .xlog{display:table;width:100%}.benchlog .wide .xlog thead{display:table-header-group}.benchlog .wide .xlog tbody{display:table-row-group}.benchlog .wide .xlog tr{display:table-row}.benchlog .wide .xlog td,.benchlog .wide .xlog td:first-child{display:table-cell;text-align:left;padding:4px 8px;border-bottom:1px solid var(--color-rule);font-size:var(--fs-sm)}.benchlog .wide .xlog td::before{content:none}.benchlog .wide .xlog th{text-align:left;font-size:var(--fs-xs);color:var(--color-muted);padding:4px 8px;font-weight:400}.benchlog .wide .xlog tr.sel td:first-child::after{content:" ✓"}}
@media(max-width:1000px){.cgrid,.row3{grid-template-columns:minmax(0,1fr)}.xro{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones: one-column segs/cards, schematic scrolls inside the cream box */
@media(max-width:600px){.xl .seg.r3{grid-template-columns:minmax(0,1fr)}.tw.stack .parts tr{grid-template-columns:minmax(0,1fr)}
.cream .sw{overflow-x:auto}.cream .xsch{min-width:520px}
.xl .wnav .btn{flex:1}.xl .wnav{gap:var(--s2)}.field.cf{width:8.5em}}
.xl .xsch text{font-size:17px}
/* desktop: schematic spans both columns (bench log above, Parts below in the output column); narrow: fixed-width svg in the .sw scroller so text stays >= 11px */
@media(min-width:1001px){.xl[data-mode="expert"] #xschc{grid-column:1/-1}.xl[data-mode="expert"] #xpartsc{grid-column:2}}
@media(max-width:1000px){.xl #xschc .sw{overflow-x:auto}.xl #xschc .sw svg{min-width:840px}}
.xplot.pm{display:none}
.pane .xro{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:600px){.xplot.pd{display:none}.xplot.pm{display:block}.tw.stack .parts td{min-width:0}.field.cf{width:100%;max-width:8em;min-width:0}}
@media(max-width:600px){.tw.stack .xlog td:has(input.cf){display:grid;grid-template-columns:minmax(0,1fr);text-align:left;gap:2px}.tw.stack .xlog .field.cf{max-width:none;width:100%}}

/* terminations */
fieldset.term{border:1px solid var(--color-rule);border-radius:var(--radius);padding:var(--s2) var(--s3);margin:0 0 var(--s3);min-width:0}
fieldset.term legend{font-weight:700;font-size:var(--fs-sm);padding:0 4px}
.tstat{font:var(--fs-xs) var(--font-mono);margin:var(--s2) 0 0;color:var(--color-muted)}.tstat-eq{color:var(--color-signal)}
.ro dd small{display:block;font-size:var(--fs-xs);color:var(--color-muted);text-shadow:none}
.xro dd{font-size:var(--fs-md)}
.tstat-warn{color:var(--color-warn)}
.term .ferr{font-size:var(--fs-xs);color:var(--color-warn);margin:var(--s2) 0 0}
.term .field[aria-invalid="true"]{border-color:var(--color-warn);border-width:2px}
.chk{display:flex!important;gap:var(--s2);align-items:flex-start;font-size:var(--fs-sm);margin:var(--s2) 0 0!important}.chk input{margin-top:3px}
.ro .mt-warn{outline:1.5px solid var(--color-warn)}.ro .mt-warn small{color:var(--color-warn)}
.ro .mt-refuse{outline:2px solid var(--color-warn);background:color-mix(in srgb,var(--color-warn) 12%,var(--color-surface-sunk))}.ro .mt-refuse dd{color:var(--color-warn);text-shadow:none}.ro .mt-refuse small{color:var(--color-ink)}
.xl .err{color:var(--color-warn);border:var(--border-w) solid var(--color-warn);border-radius:var(--radius);padding:var(--s2) var(--s3);font-size:var(--fs-sm)}

/* modes and steps */
.xl[data-mode="beginner"] .xonly,.xl[data-mode="expert"] .bonly,.xl[data-mode="expert"] .steps,.xl[data-mode="expert"] .chips{display:none}
.xl[data-vals="per"] .xsame,.xl[data-vals="same"] .xper{display:none}
@media(min-width:601px){.xl[data-mode="beginner"] #xconst{grid-template-columns:repeat(2,minmax(0,1fr))}}
.xl[data-mode="beginner"][data-step="1"] :is(#xlbench,#xfilter,#xro,#xerr,.xres),.xl[data-mode="beginner"][data-step="2"] :is(#xmeasure,#xfilter,#xro,#xerr,.xres),.xl[data-mode="beginner"][data-step="3"] :is(#xmeasure,#xlbench,#xro,.xres),.xl[data-mode="beginner"][data-step="4"] :is(#xmeasure,#xlbench,#xfilter){display:none}
.xl[data-mode="beginner"]:not([data-step="4"]) #xtofilter,.xl[data-mode="beginner"][data-step="4"] #xnext{display:none}
.xl[data-mode="beginner"] .cgrid{display:flex;flex-direction:column;gap:0}.xl[data-mode="beginner"] .pane,.xl[data-mode="beginner"] .rcol{display:contents}
.xl[data-mode="beginner"] #xchips{order:1}.xl[data-mode="beginner"] #xplain{order:2}.xl[data-mode="beginner"] #xro{order:3}.xl[data-mode="beginner"] #xerr{order:4}.xl[data-mode="beginner"] #xresp{order:5}.xl[data-mode="beginner"] #xschc{order:6}.xl[data-mode="beginner"] #xpartsc{order:7}
.xl.xnores .xres{display:none!important}
.xl .rcol>.fcard+.fcard,.xl .pane>*+*{margin-top:var(--s3)}
.okpill.warn{border-color:var(--color-warn);color:var(--color-warn)}
.xdel{border:0;background:none;color:var(--color-muted);cursor:pointer;font:inherit;padding:0 4px;min-width:24px;min-height:24px}
.xl .field[aria-invalid="true"]{border-color:var(--color-warn);border-width:2px}
.xl .ferr{font-size:var(--fs-xs);color:var(--color-warn);margin:var(--s1) 0 0}
.xl .ro{margin:var(--s3) 0}
.xl .fcard .seg.r3>label{display:flex;align-items:center;justify-content:center;text-align:center;margin:0}
.chk[hidden]{display:none!important}
.xl .fcard,.xl .cream,.xl .ro{min-width:0}
.xl[data-mode="beginner"] .cgrid{align-items:stretch}
@media(max-width:600px){.xl .wnav{flex-wrap:wrap}.xl .wnav .btn{min-width:0}}
@media(max-width:360px){.xl .steps{gap:4px}.xl .steps button{padding:6px 4px}}
.xl .hint.warn{color:var(--color-warn)}
/* phones: the site-wide no-lane rule (style.css, feedback-panel.css) applies; these only lay the cards out in one column */
@media(max-width:600px){
.xl .fcard [data-fab-clear],.xl .fcard .row2>div,.xl .fcard .row3>div,.xl .fcard .ro,.xl .fcard .steps,.xl .fcard .chips{padding-right:0}
.xl .xro,.xl .ro.r2{grid-template-columns:minmax(0,1fr)}
.xl .fcard fieldset.term{padding-left:var(--s2);padding-right:var(--s2)}
.xl .seg.r3{display:flex;flex-direction:column}.xl .seg.r3>label{flex:none;width:auto}
.xl #xlparts tr{grid-template-columns:repeat(2,minmax(0,1fr))}.xl #xlparts td:first-child,.xl #xlparts td[data-l=Role],.xl #xlparts td[data-l=Note]{grid-column:1/-1}.xl #xlparts td[data-l=Note]{order:9}
.xl .tw.stack .xlog tr{grid-template-columns:repeat(2,minmax(0,1fr))}.xl .tw.stack .xlog td:first-child{grid-column:1/-1}
}
/* GD re-check of 7cc521f: one column below 401px, labels on their own line, fields full width; cards add no right padding of their own */
@media(max-width:600px){.xl .fcard :is(div:not(.unit),p,dl,dt,dd,table,thead,tbody,tr,td,th,ul,ol,li,label:not(.seg label)){padding-right:0}}
@media(max-width:400px){
.xl .benchlog tr,.xl .tw.stack .parts tr,.xl .ro,.xl #xlparts tr,.xl .tw.stack .xlog tr{grid-template-columns:1fr}
.xl .benchlog td::before,.xl .tw.stack .parts td::before{display:block}
.xl .benchlog .field,.xl .row2 .field,.xl .row3 .field{width:100%;min-width:0}
.xl .row2,.xl .row3{grid-template-columns:1fr}
}
/* GD compact parts rows at <=400px (gd-xtal/mock1.css): ref + exact on row 1, E12, role and note as small muted lines */
@media(max-width:400px){
.xl #xlparts tr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:0;padding:6px 0}
.xl #xlparts td{display:block;padding:0;min-width:0;text-align:left;white-space:normal}
.xl #xlparts td::before{display:none}
.xl #xlparts td:first-child{grid-column:1;grid-row:1;font-weight:700}
.xl #xlparts td[data-l=Exact]{grid-column:2;grid-row:1;text-align:right;white-space:nowrap}
.xl #xlparts td:is([data-l=Role],[data-l=E12],[data-l=Note]){grid-column:1/-1;font-size:var(--fs-xs);color:var(--color-muted)}
.xl #xlparts td[data-l=E12]{grid-row:2}.xl #xlparts td[data-l=E12]::before{display:inline;content:"E12 "}
.xl #xlparts td[data-l=Role]{grid-row:3}.xl #xlparts td[data-l=Note]{grid-row:4}
.xl fieldset.term select,.xl #xcomp,.xl #xvals{font-size:var(--fs-xs);padding-left:var(--s2);padding-right:var(--s1)}
}
.xl #xlparts .nw{white-space:nowrap}  /* a value or note item never breaks inside itself (GD re-check of 7cc521f) */
@media(max-width:600px){.xl .tw.stack .parts td{flex-wrap:wrap;column-gap:.25em}.xl .tw.stack .parts td::before{flex-basis:100%}}

/* live cursor (plot-cursor.js, shared with the LC Filter Designer; .plot .xh/.xv/.xd and .xread come from style.css) */
#xplotw{border-radius:6px;touch-action:pan-y;cursor:crosshair}#xplotw:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}