/* Controls, form elements, switches, disclosures and modals use Pico CSS. */
:root,[data-theme=dark] {
  --pico-font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pico-font-size: 14px;
  --pico-line-height: 1.5;
  --pico-spacing: 1rem;
  --pico-border-radius: 6px;
  --pico-form-element-spacing-vertical: .75rem;
  --pico-form-element-spacing-horizontal: .85rem;
  --pico-background-color: #101512;
  --pico-color: #eef2e9;
  --pico-muted-color: #9eaaa0;
  --pico-primary: #c9ed8b;
  --pico-primary-background: #c9ed8b;
  --pico-primary-border: #c9ed8b;
  --pico-primary-inverse: #192313;
  --pico-primary-hover: #ddffab;
  --pico-primary-hover-background: #ddffab;
  --pico-primary-hover-border: #ddffab;
  --pico-primary-focus: #c9ed8b45;
  --pico-secondary: #bcc8b6;
  --pico-secondary-border: #40503e;
  --pico-secondary-hover: #e3eddd;
  --pico-secondary-hover-border: #718565;
  --pico-form-element-background-color: #111713;
  --pico-form-element-border-color: #607164;
  --pico-form-element-active-border-color: #c9ed8b;
  --pico-form-element-color: #eef2e9;
  --pico-range-border-color: #607164;
  --pico-range-active-border-color: #9eaaa0;
  --pico-range-thumb-color: #c9ed8b;
  --pico-card-background-color: #161e18;
  --bg:#101512; --panel:#151c17; --line:#303b32;
  --ink:#eef2e9; --muted:#9eaaa0; --accent:#c9ed8b; --danger:#f1a28d;
}

body{margin:0;background:var(--bg);color:var(--ink)}
:root[data-theme=light]{--pico-background-color:#f8faf5;--pico-color:#24321f;--pico-muted-color:#4c5f47;--pico-primary:#47721e;--pico-primary-background:#47721e;--pico-primary-border:#47721e;--pico-primary-inverse:#fff;--pico-primary-hover-background:#365c16;--pico-primary-hover-border:#365c16;--pico-primary-hover:#365c16;--pico-secondary:#405b34;--pico-secondary-border:#84957e;--pico-secondary-hover:#253e1d;--pico-form-element-background-color:#fff;--pico-form-element-border-color:#8a9d81;--pico-form-element-color:#24321f;--pico-form-element-active-border-color:#47721e;--pico-card-background-color:#f8faf5;--pico-range-thumb-color:#47721e;--bg:#f8faf5;--panel:#f1f6eb;--line:#c1cdbb;--ink:#24321f;--muted:#4c5f47;--accent:#47721e;--danger:#973c29}
[data-theme=light] .notice{background:#eaf1e3;color:#34492b}
[data-theme=light] .notice.error{background:#fae9e3;color:#7e3021}
[data-theme=light] .chart-wrap,[data-theme=light] .chart-grid figure{background:#f5f8f1}
[data-theme=light] #chart-empty{background:#f5f8f1f2}
[data-theme=light] .field-label,[data-theme=light] .chart-toolbar,[data-theme=light] .bandwidth-row strong,[data-theme=light] .bandwidth-row button,[data-theme=light] .help summary{color:var(--ink)}
[data-theme=light] .standards .captured{background:#e1eed3}
[data-theme=light] .text-button:hover:not(:disabled){color:#274911}
[data-theme=light] .ratio{color:var(--muted)}
[data-theme=light] .reference-line{background:#976022}
[data-theme=light] .data-state.demo{color:#8b5820}
:root[data-theme=light]{--pico-form-element-border-color:#72876a}
[hidden]{display:none!important}
a{color:inherit}
h1,h2,p,figure{margin:0}
h1,h2{font-size:17px;letter-spacing:-.025em;font-weight:600}
p{line-height:1.55}
button,input,select,section{margin-bottom:0}
button{font-weight:550}
button:focus-visible,summary:focus-visible,svg:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
input[type=number],.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.topbar{height:64px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:25px;font-weight:600;letter-spacing:-.05em}
.brand b{font-weight:400;color:var(--accent)}
.brand svg{width:32px;height:32px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
.brand small{font:10px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted);margin-left:10px;border-left:1px solid var(--line);padding-left:18px}
main{max-width:1680px;margin:auto;padding:20px 28px 0}
.workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px;border-bottom:1px solid var(--line);padding:0 0 18px;gap:25px}
.workflow section{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.workflow section>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;min-width:0}
.workflow h2,.workflow .muted{grid-column:2}
.workflow h2{font-size:15px}
.workflow button{font-size:12px;padding:10px 13px;flex-shrink:0}
.workflow .step{grid-row:1/3;align-self:center;font:11px ui-monospace,monospace;color:var(--muted)}
.workflow .complete .step,.workflow .complete h2{color:var(--accent)}
.notice{border-left:2px solid #738a65;padding:10px 14px;color:#bfcbb9;background:#1a231b;font-size:13px;line-height:1.5;margin-bottom:18px}
.notice.error{border-color:var(--danger);color:#fac6b7;background:#2a211d}
.notice .inline-actions{margin-top:12px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px}
.instrument{min-width:0}
.instrument-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.instrument-head h1{min-width:0;overflow-wrap:anywhere}
.workflow .muted{overflow-wrap:anywhere}
.eyebrow{font-size:10px;letter-spacing:.09em;color:var(--muted);font-weight:600}
.data-state{font:11px ui-monospace,monospace;color:var(--muted);text-align:right}
.data-state.live{color:var(--accent)}
.data-state.demo{color:#dfbe83}
.readouts{display:flex;align-items:flex-start;gap:28px;padding:20px 0}
.spectrum-mode #swr{font-size:56px}.spectrum-mode .ratio{font-size:16px}
.metric-list{display:grid;gap:6px;margin:14px 0;font:12px ui-monospace,monospace;overflow-wrap:anywhere}
.more-charts>label,.more-charts>.paired-fields,.more-charts>.inline-actions{margin:14px 0}
.more-charts select{margin:6px 0 0;max-width:360px}
.more-charts p{margin-top:12px}.more-charts button{align-self:end}
.band-item{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.swr-readout{min-width:170px}
.big-value{display:flex;align-items:baseline;gap:10px;line-height:1.1;margin:3px 0 8px}
#swr{font-size:72px;letter-spacing:-.065em;font-weight:450;font-variant-numeric:tabular-nums;color:var(--accent)}
.ratio{font-size:24px;color:#9eaaa0}
.muted{color:var(--muted);font-size:12px}
.secondary-readouts{border-left:1px solid var(--line);padding-left:24px;display:grid;gap:12px;min-width:0;overflow-wrap:anywhere}
.secondary-readouts>div{display:grid;gap:4px}
.secondary-readouts strong{font-family:ui-monospace,monospace;font-size:18px;font-weight:400}
.marker-controls{display:grid;grid-template-columns:1fr 155px auto;gap:16px;align-items:end;margin:0 0 14px}
.marker-controls label{font-size:12px;color:var(--muted);margin:0}
.marker-controls input{display:block;margin:8px 0 0;height:44px}
.marker-controls input[type=range]{padding:0}
.marker-controls button{height:44px;font-size:12px;padding:10px}
#marker-frequency{padding:10px;font-size:13px}
.chart-toolbar{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#d9e4d5;border-top:1px solid var(--line);padding:10px 0;gap:12px}
.legend-line{display:inline-block;width:17px;height:2px;background:var(--accent);vertical-align:middle;margin-right:7px}
.reference-line{background:#dfbe83;margin-left:12px}
.chart-toolbar label{display:flex;align-items:center;gap:7px;color:var(--muted);margin:0}
.chart-toolbar select{font-size:11px;padding:5px 25px 5px 8px;width:78px;background-position:center right 6px}
.chart-wrap{position:relative;background:#121a14}
.chart-wrap svg,.chart-grid svg{display:block;width:100%;height:auto;touch-action:pan-y}
#chart-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:16px;background:#121a14e8}
#chart-empty strong{font-size:18px;font-weight:500;letter-spacing:-.025em}
.inline-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.inline-actions button{font-size:12px;padding:9px 12px}
.text-button{border:0;background:none;padding:4px 0;font-size:12px;color:var(--accent);text-align:left}
.text-button:hover:not(:disabled){background:none;color:#e1ffb7}
.bandwidth-row{display:grid;grid-template-columns:1fr 1fr 1.4fr;padding:18px 0;border-bottom:1px solid var(--line);gap:18px}
.bandwidth-row>div{display:grid;gap:9px;align-content:start}
.bandwidth-row strong,.bandwidth-row button{font:12px ui-monospace,monospace;color:#dce5d7;margin:0;padding:0}
.chart-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:11px;color:var(--muted);padding:15px 0}
.inspector{border-left:1px solid var(--line);padding-left:24px}
.control-section{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.field-label{display:flex;justify-content:space-between;font-size:12px;color:#d4ded0;margin:0 0 8px}
.field-label span{font-size:10px;color:var(--muted)}
#frequency{font-size:22px;padding:12px;margin-bottom:18px;letter-spacing:-.025em}
.paired-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.scan-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.scan-buttons button{padding:11px 6px;font-size:12px}
.stop-button{width:100%;color:var(--accent);margin-top:10px}
.advanced{margin:18px 0 0}
.inspector>.advanced{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
details{font-size:12px}
details summary{cursor:pointer;transition:color .15s}
details summary:hover{color:var(--accent)}
details[open]>summary{margin-bottom:16px}
.advanced label,.library label,dialog label{font-size:12px}
.advanced input,.advanced select,dialog input{margin:7px 0 14px}
.advanced p{margin-top:12px}
.voice-toggle{font-size:12px;margin:0}
.voice-toggle input{margin:0 5px 0 0}
#voice-status{margin-top:10px}
.library select{font-size:12px;margin:7px 0 12px}
.library .inline-actions{margin-bottom:16px}
#measurement-file{font-size:11px;margin:12px 0}
.library #backup-export{display:block;margin-top:12px}
.help{font-size:11px;color:var(--muted);line-height:1.6}
.help summary{color:#cbd6c7}
.help p{margin:12px 0}
.more-charts{border-top:1px solid var(--line);padding:16px 0}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.chart-grid figure{min-width:0;background:#121a14}
.chart-grid figcaption{font-size:13px;padding:12px}
.smith-figure{grid-column:1/-1}
.smith-figure svg{width:min(100%,500px);margin:auto}
.smith-figure p{text-align:center;padding:0 12px 16px;font-size:13px}
#reference-reading{margin:14px 0}
.measurement-info{border-top:1px solid var(--line);padding-top:18px}
.measurement-info p{overflow-wrap:anywhere}
.page-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 25px;margin-top:30px;font-size:11px;color:var(--muted)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:15px}
.dialog-head h2{font-size:22px}
.dialog-head button{background:none;border:none}
dialog .cal-content{width:min(660px,100%);max-height:90vh;padding:28px;border:1px solid #40523b}
dialog article{overflow-y:auto}
dialog[open] article{animation:enter .18s ease-out}
#name-dialog article{width:min(460px,100%);padding:24px}
#name-dialog h2{margin-bottom:16px}
#confirm-dialog article{width:min(460px,100%);padding:24px}
#confirm-dialog p{margin:18px 0 22px;font-size:14px}
.standards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.standards button{text-align:left;display:grid;gap:6px;padding:15px}
.standards span{font:10px ui-monospace,monospace;color:var(--muted)}
.standards strong{font-size:15px;font-weight:500}
.standards .captured{border-color:#7e985f;background:#253021}
.standards .captured span{color:var(--accent)}
.cal-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}
.cal-actions button{font-size:12px}
.import-details{border-top:1px solid var(--line);padding-top:18px;margin-top:20px;font-size:13px}
.import-details p{margin:12px 0}
.file-input input{display:block;width:100%;font-size:12px;margin:8px 0 16px}
.confirm{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--muted);line-height:1.5;margin:12px 0}
.confirm input{margin:4px 0;flex-shrink:0}
@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1200px){.secondary-readouts{flex:1;grid-template-columns:minmax(160px,1.2fr) minmax(110px,.8fr) minmax(140px,1fr);gap:24px;align-self:stretch;align-items:start;align-content:start}.secondary-readouts>div{min-width:0}.secondary-readouts strong{font-size:17px}.secondary-readouts>div:last-child{border-left:1px solid var(--line);padding-left:20px}}
@media(max-width:1150px){.workflow{gap:15px}.workflow section{align-items:start;flex-direction:column}.workspace{grid-template-columns:minmax(0,1fr) 245px;gap:24px}.inspector{padding-left:22px}.readouts{gap:25px}.swr-readout{min-width:175px}.secondary-readouts{padding-left:22px}.secondary-readouts strong{font-size:16px}.marker-controls{grid-template-columns:1fr 145px}.marker-controls button{grid-column:1/-1;justify-self:start}.bandwidth-row{grid-template-columns:1fr 1fr}.band-edges{grid-column:1/-1}.chart-footer{align-items:start;flex-direction:column}}
@media(max-width:760px){.topbar{height:64px;padding:0 18px}.brand small{display:none}main{padding:18px 16px 0}.workflow{gap:10px}.workflow section>div{grid-template-columns:1fr}.workflow .step,.workflow h2,.workflow .muted{grid-column:1;grid-row:auto}.workflow h2{font-size:13px}.workflow .muted{font-size:10px}.workflow button{font-size:11px;padding:8px}.workspace{display:flex;flex-direction:column;gap:26px}.inspector{order:-1;border:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.inspector .control-section:first-child{grid-column:1/-1}.inspector .help{grid-column:1/-1}.control-section{margin-bottom:18px;padding-bottom:18px}.inspector .section-title{margin-bottom:12px}.scan-buttons{margin-top:12px}.readouts{gap:18px;padding:24px 0}.swr-readout{min-width:145px}#swr{font-size:70px}.secondary-readouts{padding-left:18px}.secondary-readouts strong{font-size:14px}.chart-grid{grid-template-columns:1fr}.smith-figure{grid-column:auto}.instrument-head{align-items:start}.data-state{font-size:10px}.marker-controls{gap:12px;grid-template-columns:1fr 130px}.chart-toolbar{font-size:11px}.chart-footer{flex-direction:column;align-items:start}.page-footer{gap:15px}.standards button{padding:10px}.standards strong{font-size:13px}dialog .cal-content{padding:20px}dialog{padding:14px}}
@media(max-width:400px){.workflow button{font-size:10px;padding:7px 6px}.workflow .muted{overflow-wrap:anywhere}.topbar>.muted{font-size:10px}.brand{font-size:23px}.readouts{gap:10px}.swr-readout{min-width:125px}#swr{font-size:61px}.secondary-readouts{padding-left:13px}.secondary-readouts strong{font-size:12px}.inspector{display:block}.marker-controls{grid-template-columns:1fr 120px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Align labels and controls through the shared form grid. */
.paired-fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.paired-fields>label,.inline-actions>label,.more-charts>label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:end;gap:6px;min-width:0;margin:0}
.paired-fields>label>input,.paired-fields>label>select,.inline-actions>label>select,.more-charts>label>select{display:block;grid-column:1/-1;width:100%;max-width:none;height:44px;margin:0}
.paired-fields>button{height:44px;margin:0;align-self:end}
.advanced .paired-fields{margin:14px 0}
.more-charts>.paired-fields{margin:18px 0}
.more-charts>label{margin:14px 0;max-width:360px}
.metric-list>p{margin:0}
.more-charts>label>select{display:block;margin:0}
.inline-actions:has(>label){align-items:end}
.inline-actions:has(>label)>button{height:44px}
.chart-toolbar{flex-wrap:wrap}
#reference-legend{display:inline-flex;gap:10px;flex-wrap:wrap;margin-left:12px}
#reference-legend>span{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.reference-items{display:grid;gap:8px;margin:0 0 16px}
.reference-items>div{display:flex;align-items:center;gap:8px;min-width:0}
.reference-items span{flex:1;overflow-wrap:anywhere;font-size:12px}
.reference-items button{padding:2px 7px;font-size:12px}
#reference-reading{white-space:pre-line}
#peak-results button{text-align:left;font:12px ui-monospace,monospace;padding:9px 12px}
#fixture-panel input[type=file]{display:block;width:100%;font-size:12px;margin:8px 0 14px}
