/* ---- Theme variables ---- */
:root, html[data-theme="dark"], html[data-theme="system"] {
  --bg:#14171c; --panel:#1c2129; --panel2:#232a34; --ink:#e7ecf2; --muted:#8b97a7;
  --line:#313a47; --accent:#4aa8ff; --accent2:#37c98b; --warn:#ffb84a; --bad:#ff5d5d;
  --btnink:#04121f; --shadow:rgba(0,0,0,.3);
}
html[data-theme="light"] {
  --bg:#f4f6fa; --panel:#ffffff; --panel2:#eef1f6; --ink:#1a1f27; --muted:#5c6675;
  --line:#d6dbe4; --accent:#1d6fe0; --accent2:#12995f; --warn:#b5751a; --bad:#d23b3b;
  --btnink:#ffffff; --shadow:rgba(20,30,50,.08);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg:#f4f6fa; --panel:#ffffff; --panel2:#eef1f6; --ink:#1a1f27; --muted:#5c6675;
    --line:#d6dbe4; --accent:#1d6fe0; --accent2:#12995f; --warn:#b5751a; --bad:#d23b3b;
    --btnink:#ffffff; --shadow:rgba(20,30,50,.08);
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.9rem 1.2rem;background:var(--panel);border-bottom:1px solid var(--line)}
h1{font-size:1.25rem;margin:0}
h1 .sub{font-size:.8rem;color:var(--muted);font-weight:400;margin-left:.5rem}
h2{font-size:1.1rem;margin:0 0 .3rem;color:var(--accent)}
h3{font-size:.95rem;margin:.2rem 0 .4rem}
.toolbar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
/* Settings gear: match the toolbar text buttons' height exactly, then square it up (rather than
   the smaller/wider .iconbtn padding used for compact icon buttons elsewhere, e.g. card trashcans). */
#settingsBtn{height:2.43rem;width:2.43rem;padding:0;flex:0 0 auto}
.status{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:.15rem .5rem}
.status.file{color:var(--accent2);border-color:var(--accent2)}
.status.stale{color:#e8a13a;border-color:#e8a13a}

/* tabs */
nav.tabs{display:flex;gap:.4rem;max-width:960px;margin:0 auto;padding:.8rem 1.2rem 0}
.tab-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;flex:1;
  background:var(--panel2);color:var(--muted);border:1px solid var(--line);
  border-bottom:0;border-radius:10px 10px 0 0;padding:.7rem 1rem;font:inherit;cursor:pointer;text-align:left}
.tab-btn .tt{font-size:1.05rem;font-weight:700}
.tab-btn .ts{font-size:.8rem;color:var(--muted);font-weight:400;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;gap:.4rem}
/* selected-item subtitle: leading maker icon / colour swatch (centred across the two lines) + text block */
.tab-btn .ts .favicon{width:22px;height:22px;margin-right:0;vertical-align:0;flex:0 0 auto}
.tab-btn .ts .tabsw{width:22px;height:22px;border-radius:4px;border:1px solid var(--line);flex:0 0 auto}
.tab-btn .ts .tstext{min-width:0;display:flex;flex-direction:column}
.tab-btn .ts .tsname,.tab-btn .ts .tssub{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-btn .ts .tssub{font-size:.72rem;line-height:1.25}
.tab-btn.active{background:var(--panel);color:var(--accent)}
.tab-btn.active .ts{color:var(--ink)}
.tab-btn:disabled{opacity:.5;cursor:not-allowed}
.no-ic{margin-right:.3rem;font-size:.85em}

/* filament filter bar + view toggle */
.filscope{display:flex;align-items:center;gap:.4rem;margin:.6rem 0 .2rem;font-size:.85rem}
.filscope select{font-size:.85rem}
.filbar{display:flex;justify-content:space-between;align-items:flex-end;gap:.6rem;flex-wrap:wrap;margin:.3rem 0 .2rem}
.filters{display:flex;gap:.4rem;flex-wrap:wrap}
.filters select{font-size:.85rem}
.viewtoggle{display:flex;gap:.25rem}
.viewtoggle button{padding:.35rem .7rem;font-size:.85rem}
.viewtoggle button.active{background:var(--accent);color:var(--btnink);border-color:var(--accent)}
.pinnotice{margin-top:.5rem}
.pin-ic{margin-right:.3rem;font-size:.85em}

/* filament color swatches */
.fcard{overflow:hidden;cursor:pointer}
.fcard .actions{cursor:default}
.fcard .colorband{height:10px;margin:-.7rem -.8rem .55rem;border-bottom:1px solid var(--line)}
.colorband.nocolor,.colorsq.nocolor{background:repeating-linear-gradient(45deg,var(--panel2),var(--panel2) 4px,var(--line) 4px,var(--line) 8px)}
.flist{display:flex;flex-direction:column;gap:.3rem;margin:.5rem 0}
.frow{display:flex;align-items:center;gap:.6rem;background:var(--panel2);border:1px solid var(--line);
  border-radius:7px;padding:.4rem .6rem;cursor:pointer}
.frow .actions{cursor:default}
.frow.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.frow .colorsq{width:18px;height:18px;border-radius:4px;border:1px solid var(--line);flex:0 0 auto}
.frow .fname{flex:1;font-size:.9rem}
.frow .actions{display:flex;gap:.4rem;align-items:stretch;margin-top:0}
/* list-view action buttons were falling back to the base (larger) button size — match card view */
.frow .actions button{padding:.3rem .6rem;font-size:.82rem}
.frow .actions button.iconbtn{padding:.3rem .45rem}
main{max-width:960px;margin:0 auto;padding:0 1.2rem 3rem}
.tab{display:none;background:var(--panel);border:1px solid var(--line);border-radius:0 10px 10px 10px;
  padding:1rem 1.1rem;margin-top:0}
.tab.active{display:block}
.subsec{border-top:1px solid var(--line);padding-top:.8rem;margin-top:.9rem}
nav.subtabs{display:flex;gap:.3rem;margin:1rem 0 0}
.subtab-btn{background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-bottom:0;
  border-radius:8px 8px 0 0;padding:.45rem .9rem;font:inherit;font-weight:600;cursor:pointer}
.subtab-btn.active{background:var(--panel);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.subtab{display:none;border:1px solid var(--line);border-radius:0 8px 8px 8px;padding:.9rem 1rem;margin-bottom:.3rem}
.subtab.active{display:block}
.subsec:first-of-type{border-top:0;margin-top:.4rem;padding-top:0}

.hint{color:var(--muted);font-size:.85rem;margin:.2rem 0 .8rem}
.legend-note{display:flex;flex-direction:column;gap:.35rem}
.legend-row{display:flex;align-items:flex-start;gap:.5rem}
.legend-btn{pointer-events:none;cursor:default;padding:.15rem .55rem;font-size:.78rem;flex:0 0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem}
.field{display:flex;flex-direction:column;gap:.2rem}
.field.newrow{grid-column-start:1}
.field label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.towercard{border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;margin:.6rem 0}
.towerwarn{background:color-mix(in srgb,var(--warn) 15%,transparent);border:1px solid var(--warn);
  border-radius:6px;padding:.5rem .7rem;color:var(--warn);font-size:.85rem;margin:0 0 .6rem}
.towerstats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.towerstat{background:var(--panel2);border-radius:6px;padding:.4rem .6rem;display:flex;flex-direction:column;gap:.15rem}
.towerstat span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.towerstat strong{font-size:1rem}
.towerviz{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.towerviz svg{flex:0 0 auto}
.towerformula{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem;background:var(--panel2);
  border-radius:6px;padding:.5rem .7rem;margin:0;align-self:center}
#basicBestPA[readonly]{opacity:.75}
.row{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.6rem}
.grid + .row{margin-top:1rem}
.grid + .checkline{margin-top:.8rem}
.row label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--muted)}
label.blocklabel{display:block;color:var(--muted);font-size:.82rem;margin:.6rem 0 .3rem}
label.checkline{display:flex;flex-direction:row;align-items:center;gap:.45rem;font-size:.85rem;color:var(--ink);margin:.5rem 0}
input,select,textarea{background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:.4rem .5rem;font:inherit}
input[type=number]{width:9rem}
input[type=checkbox]{width:auto}
select:disabled,input:disabled{opacity:.45;cursor:not-allowed}
.row label:has(select:disabled),.row label:has(input:disabled){opacity:.7}
textarea{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85rem}
button{background:var(--accent);color:var(--btnink);border:0;border-radius:6px;
  padding:.45rem .8rem;font:inherit;font-weight:600;cursor:pointer}
button.secondary,header button,.tab-btn{font-weight:500}
button.secondary,header button{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
button.danger{background:transparent;color:var(--bad);border:1px solid var(--bad)}
/* "planned" = the same orange as the planned badge on the filament screen */
button.warn{background:transparent;color:var(--warn);border:1px solid var(--warn)}
/* no tests yet at the current filament-tab Scope — always shown, just inert */
button.muted{background:transparent;color:var(--muted);border:1px solid var(--muted);cursor:default}
button.muted:hover{filter:none}
button:hover{filter:brightness(1.08)}
.custom-in{margin-top:.25rem}
.radlabel{font-size:.8rem;color:var(--muted);align-self:center}
.row label.radio{flex-direction:row;align-items:center;gap:.35rem;color:var(--ink);font-size:.85rem}
.unit-radios{border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem .55rem;margin:0;display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.unit-radios legend{font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);padding:0 .3rem}
.unit-radios label{flex-direction:row;align-items:center;gap:.35rem;color:var(--ink);font-size:.85rem;cursor:pointer}
.unit-radios input{margin:0}
.help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1px solid var(--muted);color:var(--muted);font-size:10px;font-weight:700;
  line-height:1;cursor:help;text-transform:none;vertical-align:middle}
.help:hover,.help:focus{border-color:var(--accent);color:var(--accent);outline:none}
details{border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;margin-top:.9rem}
summary{cursor:pointer;font-weight:600;color:var(--accent)}
details[open] summary{margin-bottom:.7rem}

/* cards (printers / filaments / in-progress) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem;margin:.5rem 0}
/* icon-only buttons (e.g. the trashcan Remove) — square-ish, glyph centred */
.iconbtn{padding:.3rem .45rem;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.card .actions button.iconbtn{padding:.3rem .45rem}
/* card grids: uniform width. Printer action row (Select/Edit/trash) fits on one line; filament
   action row (Select/Edit/Clone[/PA][/Iron]/trash) can now run to 6 buttons, so it wraps instead
   of forcing one line and overflowing the card. */
#printerList{grid-template-columns:repeat(auto-fill,310px);justify-content:start}
#filamentList.cards{grid-template-columns:repeat(auto-fill,350px);justify-content:start}
#printerList .actions{flex-wrap:nowrap}
#printerList .actions button,#filamentList.cards .actions button{white-space:nowrap}
#printerList .card,#nozzleList .card{cursor:pointer}
#printerList .card .actions,#nozzleList .card .actions,#printerList .card select{cursor:default}
.card{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:.7rem .8rem;
  display:flex;flex-direction:column;gap:.35rem}
.card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card .title{font-weight:600}
.card .meta{font-size:.8rem;color:var(--muted);line-height:1.35}
.card .actions{display:flex;gap:.4rem;margin-top:.3rem;flex-wrap:wrap}
.card .actions button{padding:.3rem .6rem;font-size:.82rem}
.badge{display:inline-block;border-radius:4px;padding:.05rem .4rem;font-size:.75rem;margin-right:.3rem}
.badge.ok{background:rgba(55,201,139,.15);color:var(--accent2)}
.badge.warn{background:rgba(255,184,74,.15);color:var(--warn)}
.badge.bad{background:rgba(255,93,93,.15);color:var(--bad)}
.badge.info{background:rgba(74,168,255,.15);color:var(--accent)}
.badge.muted{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.context{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;font-size:.9rem}
#maxFlowConfirm.confirmed{background:var(--accent2);border-color:var(--accent2);color:#fff}

table{width:100%;border-collapse:collapse;margin:.3rem 0 .6rem}
th,td{border:1px solid var(--line);padding:.35rem .4rem;text-align:left;font-size:.9rem}
th{background:var(--panel2);color:var(--muted);font-weight:600}
td input{width:100%}
tr.outlier td{background:rgba(255,93,93,.14)}
tr.group-start td{border-top:2px solid var(--accent)}
.out{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:.6rem .7rem;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;white-space:pre-wrap;margin:.5rem 0}
pre.out{margin:.5rem 0}
#plot{width:100%;height:auto;background:var(--panel2);border:1px solid var(--line);border-radius:8px;margin:.6rem 0}
/* before any work is done, don't show empty output boxes — just the button */
.out:empty,#plot:empty{display:none}
.copybtn{background:transparent;border:0;cursor:pointer;color:var(--accent);font-size:1rem;padding:0 .2rem;position:relative;font-family:inherit}
.copybtn:hover{filter:brightness(1.25)}
.copybtn.copied::after{content:"copied to clipboard";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  margin-left:.4rem;background:var(--panel);border:1px solid var(--accent2);color:var(--accent2);border-radius:5px;
  padding:.08rem .4rem;font-size:.7rem;white-space:nowrap;font-family:system-ui,sans-serif}

/* mode gating */
#tab-test[data-mode="basic"] .advanced-only{display:none}
#tab-test[data-mode="advanced"] .basic-only{display:none}

footer{max-width:960px;margin:0 auto;padding:1rem 1.2rem;color:var(--muted);font-size:.82rem;
  display:flex;gap:1rem;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line)}
footer a{color:var(--accent)}
.muted{color:var(--muted)}

/* danger modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
/* Can be shown on top of another already-open modal (e.g. the ironing picker) — needs to win
   regardless of DOM order. */
#runInProgressModal{z-index:70}
.modal[hidden]{display:none}
.modal-box{background:var(--panel);border:2px solid var(--bad);border-radius:12px;max-width:460px;padding:1.2rem 1.3rem;
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
.modal-box h3{color:var(--bad);font-size:1.15rem;margin:0 0 .5rem}
.modal-box p{font-size:.9rem;margin:.2rem 0 1rem}
.modal-actions{display:flex;flex-direction:column;gap:.5rem}
.modal-actions button{width:100%;text-align:left}
.modal-box.plain{border-color:var(--line)}
.modal-box.plain h3{color:var(--accent)}
.modal-box.wide{max-width:min(900px,95vw);width:100%}
#settingsModal .modal-box{display:flex;flex-direction:column;gap:.7rem}
.settings-row{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}
.settings-row select{width:100%}
.settings-example{margin:0}
.settings-subtitle{margin:.6rem 0 0;font-size:.9rem;color:var(--ink)}
#settingsModal > .settings-subtitle + p.hint{margin-top:0}
.settings-danger-zone{margin-top:.4rem;padding-top:.7rem;border-top:1px solid var(--line)}
.settings-danger-zone button{width:100%}
/* results modal: fixed title bar (top) + scrollable body + fixed button bar (bottom) */
.results-box{max-width:min(720px,95vw);width:100%;max-height:88vh;text-align:left;padding:0;overflow:hidden;display:flex;flex-direction:column}
/* PA/Ironing Test modals: wider than the plain results box (many side-by-side row fields) */
.test-modal-box{max-width:min(860px,95vw)}
/* Their header also carries a printer/nozzle/filament context card (kept out of the scrolling
   body so it's always visible) — stack title-row + card vertically, scoped to these two modals
   only so the saved-results modals' title-row + run-picker header keeps its side-by-side layout. */
.test-modal-box .results-head{flex-direction:column;align-items:stretch;gap:.6rem}
.test-modal-box .results-head-row{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.results-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;flex-wrap:wrap;
  flex:0 0 auto;padding:1rem 1.3rem .7rem;border-bottom:1px solid var(--line);background:var(--panel)}
.results-title{display:flex;align-items:flex-start;gap:.6rem;min-width:0}
.results-title>div{display:flex;flex-direction:column;justify-content:center}
.results-title h2{margin:0;line-height:1.2}
.results-head .colorsq{width:26px;height:26px;border-radius:5px;border:1px solid var(--line);flex:0 0 auto}
/* Saved-results modal title: printer/nozzle (with maker icon) on one row, filament (with color
   swatch) on the next — built with the same icon+two-line tabSel() helper the nav tabs use. */
.results-title-stacked{flex-direction:column;align-items:stretch;gap:.3rem}
/* .ts-row divs are also direct children of .results-title, so without these explicit overrides
   they'd inherit .results-title>div's flex-direction:column/justify-content:center (meant for the
   old single-title wrapper) and stack+center instead of sitting in a row. */
.results-title-stacked .ts-row{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:.5rem;min-width:0}
.results-title-stacked .favicon{width:22px;height:22px;margin-right:0;flex:0 0 auto}
.results-title-stacked .tstext{min-width:0;display:flex;flex-direction:column}
.results-title-stacked .tsname{font-weight:700;font-size:.95rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results-title-stacked .tssub{font-size:.78rem;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results-body{flex:1 1 auto;overflow:auto;padding:.4rem 1.3rem .8rem}
.results-foot{display:flex;gap:.4rem;flex-wrap:wrap;align-items:stretch;
  flex:0 0 auto;margin-top:0;padding:.75rem 1.3rem;border-top:1px solid var(--line);background:var(--panel)}
.results-foot #resultsClose{margin-left:auto}
/* collapsible sections: heading + right-side disclosure triangle (▶ collapsed, ▼ open) */
details.rsec{border-bottom:1px solid var(--line)}
details.rsec>summary{list-style:none;cursor:pointer;color:var(--accent);font-size:.92rem;font-weight:600;
  padding:.55rem 0;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
details.rsec>summary::-webkit-details-marker{display:none}
details.rsec>summary::after{content:"";flex:0 0 auto;width:0;height:0;
  border-left:5px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .12s}
details.rsec[open]>summary::after{transform:rotate(90deg)}
details.rsec>*:not(summary){padding:0 0 .7rem}
.results-box h3.rsec-static{margin-top:1rem}
.results-box h3{color:var(--accent);font-size:.92rem;margin:1rem 0 .3rem;border-bottom:1px solid var(--line);padding-bottom:.2rem}
.results-dl{display:grid;grid-template-columns:auto 1fr;gap:.15rem .8rem;margin:0;font-size:.85rem}
.results-dl dt{color:var(--muted)}
.results-dl dd{margin:0}
/* plain text block (not an input): no border/box, just monospaced wrapped text; copy icon is on the label */
.results-box .resultblock{background:none;border:0;border-radius:0;padding:.1rem 0 .3rem;margin:.15rem 0 .4rem;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.45;
  white-space:pre-wrap;word-break:break-word;overflow:visible;color:var(--ink)}
/* ironing results picker: a schematic row(flow) x column(speed) grid of clickable pads, drawn
   to scale from the run's actual pad diameter + gap so on-screen spacing matches the real print */
.ironpicker-box{width:100%;max-width:min(92vw,760px)}
.ironpicker-body{padding:.5rem .8rem}
/* The picker should never scroll — JS (fitIronPickerSvg) sizes the SVG down to whatever space
   is actually available (viewport height minus this modal's own header/footer), so there's
   nothing left to overflow. overflow:visible here means even a rounding error spills over
   quietly instead of popping a scrollbar. */
.ironpicker-box .results-body{overflow:visible}
.ironpicker-gridwrap{overflow:visible}
.ironpicker-grid{display:block}
.ironpicker-svg{display:block}
.ironcell{cursor:pointer}
.ironcell circle{fill:var(--panel2);stroke:var(--line);stroke-width:.6;transition:fill .08s}
.ironcell:hover circle{fill:var(--accent2);stroke:var(--accent2)}
.ironcell.named circle{fill:var(--accent);stroke:var(--accent)}
.ironcell.named:hover circle{filter:brightness(1.12)}
/* stays lit while its naming popover is open, even once the mouse moves away to use the popover */
.ironcell.active circle{fill:var(--accent2);stroke:var(--accent2)}
.ironcell-label{fill:#04101f;font-weight:700;pointer-events:none}
.ironaxis{fill:var(--muted)}
/* floating naming popover: JS positions it on the opposite half of the grid from the clicked
   pad (so the pad stays visible while naming), sized to its own content, and free to render
   outside the picker modal's box — it isn't a child of it */
.ironname-panel{position:fixed;z-index:60;width:max-content;max-width:340px;
  background:var(--panel);border:1px solid var(--accent);border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,.55);padding:.7rem .8rem}
.ironname-panel .row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem}
/* Other's radio + textbox are grouped so they wrap together as one unit if the row runs out of
   room — the textbox never lands on its own line disconnected from the option it belongs to */
.ironname-panel .otherwrap{display:flex;align-items:center;gap:.35rem}
.ironname-panel input[type=text]{width:130px}
.ironname-panel input[type=text]:disabled{opacity:.45;cursor:not-allowed}
.ironname-panel .actions{margin-top:.3rem}
.pmhead{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
#patternSvgWrap{overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:8px;margin:.5rem 0}
#patternSvg{width:100%;height:auto;max-height:58vh;display:block}
/* Basic — Pattern's inline picker: same .paline/.zig/.bgfill/.labtext/.tabfill classes as the
   Advanced modal's picker (reused as-is), just a much smaller frame — there's only one block
   here, not a grid to compare against a physical print, so the modal's large scale isn't needed. */
#patternResultSvgWrap{overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:8px;margin:.5rem 0;max-width:320px}
#patternResultSvg{width:100%;height:auto;max-height:260px;display:block}
/* Basic — Line's inline picker: same shared classes, but Line's own geometry is naturally wide
   (rows side by side) rather than tall like Pattern's chevron block, so the frame is wide-not-tall. */
#lineResultSvgWrap{overflow:hidden;background:var(--bg);border:1px solid var(--line);border-radius:8px;margin:.5rem 0;max-width:480px}
#lineResultSvg{width:100%;height:auto;max-height:200px;display:block}
.paline{cursor:pointer}
.paline .zig{stroke:#808080;stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}
.paline .hit{stroke:transparent;stroke-width:6;vector-effect:non-scaling-stroke}
.paline:hover .zig{stroke:var(--accent2);stroke-width:2.4}
.paline.sel .zig{stroke:var(--accent2);stroke-width:2.8}
.bgfill{stroke:var(--accent);stroke-width:0.62;stroke-linecap:square}
.labtext{stroke:var(--ink);stroke-width:.7;vector-effect:non-scaling-stroke;stroke-linecap:round}
.betabar{background:#b45309;color:#fff;text-align:center;padding:.45rem .8rem;font-weight:700;font-size:.82rem;letter-spacing:.01em}
.favicon{width:15px;height:15px;border-radius:3px;vertical-align:-2px;margin-right:.4rem;object-fit:contain}
.planline{margin-top:.6rem;color:var(--accent2);font-weight:600;font-size:.85rem}
.tabfill{fill:var(--accent);opacity:.9}
.sframe{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.sbar{fill:var(--accent)}
.snum{fill:var(--ink);font-size:12px;font-weight:600;font-family:ui-monospace,Menlo,monospace}
.paline .plabel{fill:var(--accent);font-size:11px;font-family:ui-monospace,monospace}
.paline:hover .plabel{fill:var(--accent2)}
.paline.sel .plabel{fill:var(--accent2);font-weight:700}
/* Read-only picker (viewing a saved run): fixed highlighting only — no hover feedback on lines
   you can't actually select, and no pointer cursor implying they're clickable. */
#patternModal.readonly .paline{cursor:default}
#patternModal.readonly .paline:hover .zig{stroke:#808080;stroke-width:1.5}
#patternModal.readonly .paline:hover .plabel{fill:var(--accent)}
.pacell{display:flex;gap:.3rem;align-items:center}
.pacell input{flex:1}
.iconbtn{padding:.15rem .45rem;font-size:.95rem;line-height:1}
.edgewarn{color:#e8a13a;cursor:help;font-size:.95rem;line-height:1;flex:0 0 auto}
.edgewarn[hidden]{display:none}
.outlierwarn{color:#e05a5a;cursor:help;font-size:.8rem;line-height:1;flex:0 0 auto}
.outlierwarn[hidden]{display:none}