:root, :root[data-theme="dark"]{
  --bg:#0a0c0f; --panel:#171b21; --panel2:#1d222a; --border:#2a3038;
  --text:#e6e9ef; --muted:#8b93a1; --accent:#5b8def; --accent2:#3ecf8e;
  --warn:#e0a83e; --bad:#e35d5d; --gap-bg:#000000; --input-bg:#1d222a;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 8px 30px rgba(0,0,0,.45);
}
/* Settings > Font. Each stack falls back to its generic family (sans-serif/monospace) if the
   CDN-loaded webfont in index.html didn't load, so font choice never breaks the app. */
:root, :root[data-font="ibmplex"]{ --ui-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
:root[data-font="sourcesans"]{ --ui-font: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
:root[data-font="comicmono"]{ --ui-font: 'Comic Mono', var(--mono); }
:root[data-font="iosevka"]{ --ui-font: 'Iosevka', var(--mono); }
:root[data-font="jetbrains"]{ --ui-font: 'JetBrains Mono', var(--mono); }
:root[data-theme="light"]{
  --bg:#f4f5f7; --panel:#ffffff; --panel2:#eef0f3; --border:#d7dbe0;
  --text:#1a1d23; --muted:#5b6470; --accent:#2f6fed; --accent2:#199a63;
  --warn:#b4780a; --bad:#c73e3e; --gap-bg:#000000; --input-bg:#ffffff;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 8px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box;}
html{font-size:15px;} /* base bumped ~15% from 13px */
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: var(--ui-font);
  font-size:1rem;
  font-variant-numeric: tabular-nums;
}
header{
  padding:16px 20px; border-bottom:1px solid var(--border); background:var(--panel);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; position:sticky; top:0; z-index:60;
}
header h1{font-size:1.3rem; margin:0; font-weight:600; letter-spacing:.2px;}
header .brand-mark{color:var(--accent); flex:0 0 auto;}
header .sub{color:var(--muted); font-size:.85rem;}
.nav-tabs{display:flex; gap:6px; margin-left:12px;}
.nav-tabs button{
  background:transparent; border:1px solid transparent; color:var(--muted);
  padding:7px 13px; border-radius:7px; font-size:.95rem; cursor:pointer; font-weight:500;
}
.nav-tabs button.active{background:var(--panel2); color:var(--text); border-color:var(--border);}
.toolbar{display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin-left:auto;}
button, select, input[type=text], input[type=number]{
  background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:7px; padding:7px 11px; font-size:.92rem; font-family:inherit;
}
button{cursor:pointer; transition:background .15s;}
button:hover{background:color-mix(in srgb, var(--panel2) 80%, var(--text) 10%);}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
button.primary:hover{filter:brightness(1.1);}
button.ghost{background:transparent;}
button.icon-btn{padding:7px 10px; font-size:1.05rem; line-height:1;}
button:disabled{opacity:.4; cursor:not-allowed;}
.dropzone{
  border:2px dashed var(--border); border-radius:12px; padding:64px 22px; text-align:center;
  color:var(--muted); margin:44px auto; max-width:680px; cursor:pointer;
}
.dropzone.drag{border-color:var(--accent); color:var(--text); background:var(--panel2);}
.dropzone input{display:none;}
#importGate{padding:22px;}
#importOptions{
  display:none; max-width:680px; margin:0 auto; background:var(--panel); border:1px solid var(--border);
  border-radius:11px; padding:20px 22px;
}
#importOptions h3{margin-top:0; font-size:1.05rem;}
#importOptions label{display:flex; align-items:center; gap:9px; margin:9px 0; font-size:.95rem;}
.row-inline{display:flex; gap:18px; flex-wrap:wrap; margin:11px 0;}
#sheetPickRow{display:none;}
main.page{padding:18px; display:none;}
main.page.active{display:block;}
/* Main grid tab: table spans the full viewport width, edge-to-edge, no surrounding box. */
#mainArea.page{padding:0;}
.tablewrap{overflow:auto; max-height:80vh; background:var(--panel); position:relative;}
table.gridtbl{border-collapse:separate; border-spacing:0; table-layout:fixed;}
table.gridtbl th, table.gridtbl td{
  border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:4px 6px; vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:0; /* forces table-layout:fixed to respect col widths */
}
/* Only the column-name header row freezes on vertical scroll; the scale/float-int/sign/transform
   rows below it scroll away with the body, per spec ("freeze columnname, not transform"). */
table.gridtbl thead tr.rowname-th th{position:sticky; top:0; background:var(--panel2); z-index:5;}
table.gridtbl thead tr.rowname-th th:first-child,
table.gridtbl tbody tr td:first-child,
table.gridtbl tfoot tr td:first-child{
  position:sticky; left:0; background:var(--panel2); z-index:4; font-weight:600; color:var(--muted);
}
/* The frozen corner cell (#rowLabelTh) needs a z-index that actually beats
   every scrolled tbody row's sticky-left first cell, which shares the same
   z-index:4 as the shared rule above. A bare `.gridtbl thead th:first-child`
   class rule here used to try to bump it to 6, but the more specific
   `.gridtbl thead tr.rowname-th th:first-child` rule above (which also sets
   z-index:4) wins the cascade regardless of source order, so the corner
   cell and the tbody's sticky-left cells ended up tied at z-index:4 -- ties
   are broken by DOM order, and tbody comes after thead, so a scrolled-into-
   place data row would render its row-label cell ON TOP of the frozen
   corner, replacing the visible "Row Name" text with whatever row happened
   to be passing underneath. An ID selector always outranks any number of
   classes, so this fixes it without needing !important. */
#rowLabelTh{ z-index:10; }
.colhead-name{position:relative;}
.colhead-name input{width:calc(100% - 14px); font-weight:600; overflow:hidden; text-overflow:ellipsis;}
.resize-handle{
  position:absolute; top:0; right:0; width:8px; height:100%; cursor:col-resize; z-index:8;
  user-select:none; touch-action:none;
}
.resize-handle:hover, .resize-handle.active{background:var(--accent);}
.basic-suite{font-family:var(--mono); font-size:.78rem; color:var(--muted); line-height:1.55;}
.basic-suite b{color:var(--text);}
.basic-suite .flag-yes{color:var(--accent2);}
.basic-suite .flag-no{color:var(--bad);}
.typesel select{width:100%;}
.type-interval-preview{font-family:var(--mono); font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; margin-top:3px;}
.xform-row select{width:100%; margin-bottom:5px; display:block;}
.xform-row button{width:100%;}
.xform-lambda-note{font-family:var(--mono); font-size:.7rem; color:var(--accent2); display:block; margin:2px 0;}
td.datacell{font-family:var(--mono); font-size:.87rem; color:var(--text);}
tr.rowname-th th, tr.colmeta-row th, tr.type-row th, tr.xform-row th{background:var(--panel2);}
tr.gap-row td, tr.gap-row th{background:var(--gap-bg) !important; height:14px; padding:0; border-color:var(--gap-bg);}
tfoot td{font-family:var(--mono); font-size:.82rem;}
tfoot tr:nth-child(odd) td{background:color-mix(in srgb, var(--panel) 92%, var(--muted) 8%);}
tfoot tr td:not(:first-child){color:var(--text);}
/* A plain var(--accent) background with white text measured 3.23:1 in dark theme
   (fails WCAG AA's 4.5:1 for this font size) -- darkened 20% toward black here,
   which lands at ~4.8:1 in dark theme and stays comfortably above 4.5:1 in light
   theme too, without touching --accent itself (used all over the rest of the UI). */
tfoot tr.section-header-row td{
  background:color-mix(in srgb, var(--accent) 80%, black) !important; color:#fff !important; font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.4px; padding:5px 9px;
}
.stat-btn-cell button{width:100%;}
.section-label{
  font-weight:700; color:var(--accent); font-size:.76rem; text-transform:uppercase; letter-spacing:.5px;
}
.derived-badge{font-size:.65rem; background:color-mix(in srgb, var(--accent) 25%, var(--panel2)); color:var(--accent); padding:1px 6px; border-radius:5px; margin-left:5px;}
.rowlabel-cell input{width:100%; background:transparent; border:none; color:var(--muted); font-family:var(--mono); font-size:.8rem; padding:0;}
.rowlabel-cell input:focus{background:var(--input-bg); color:var(--text); outline:1px solid var(--accent); border-radius:4px;}
.pill{display:inline-block; padding:1px 7px; border-radius:11px; font-size:.68rem; background:color-mix(in srgb, var(--accent) 25%, var(--panel2)); color:var(--accent);}
#modalOverlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:100;
  align-items:center; justify-content:center;
}
#modalBox{
  background:var(--panel); border:1px solid var(--border); border-radius:11px; padding:22px;
  max-width:96vw; max-height:90vh; overflow:auto; min-width:600px; box-shadow:var(--shadow);
}
#modalBox h2{margin-top:0; font-size:1.1rem;}
#modalBox table{border-collapse:collapse; width:100%; font-size:.85rem;}
#modalBox th, #modalBox td{border:1px solid var(--border); padding:6px 9px; text-align:right; font-family:var(--mono);}
#modalBox th:first-child, #modalBox td:first-child{text-align:left; font-family:inherit;}
#modalBox th.sortable{cursor:pointer; user-select:none;}
#modalBox th.sortable:hover{color:var(--accent);}
#modalBox th.sort-active{color:var(--accent);}
#modalBox tr.dist-row{cursor:pointer;}
#modalBox tr.dist-row:hover td{background:color-mix(in srgb, var(--accent) 12%, var(--panel));}
#modalBox tr.param-row td{text-align:left; background:color-mix(in srgb, var(--accent) 8%, var(--panel)); font-style:italic;}
.modal-close{float:right;}
.note{color:var(--muted); font-size:.78rem; margin-top:9px; line-height:1.55;}
.spinner{display:inline-block; width:12px; height:12px; border:2px solid var(--muted); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; margin-right:7px;}
@keyframes spin{to{transform:rotate(360deg);}}
a.textlink{color:var(--accent); cursor:pointer; text-decoration:underline;}
.small-muted{color:var(--muted); font-size:.75rem;}
.rowcount-bar{display:flex; align-items:center; gap:9px; margin-top:9px; padding:0 18px 4px 18px; font-size:.85rem; color:var(--muted);}
.rowcount-bar input{width:90px;}

/* Settings panel */
.settings-panel{
  display:none; position:absolute; top:56px; right:20px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:16px; z-index:70; box-shadow:var(--shadow); min-width:220px;
}
.settings-panel.open{display:block;}
.settings-panel h3{margin:0 0 12px 0; font-size:1rem;}
.theme-toggle{display:flex; gap:8px;}
.theme-toggle button{flex:1;}
.theme-toggle button.active{background:var(--accent); color:#fff; border-color:var(--accent);}

/* Transform workbench */
.wb-layout{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap;}
.wb-col-picker{margin-bottom:16px;}
.wb-info-card{
  background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px;
  min-width:260px; max-width:340px;
}
.wb-info-card dl{margin:0; font-size:.85rem;}
.wb-info-card dt{color:var(--muted); margin-top:6px;}
.wb-info-card dt:first-child{margin-top:8px;}
.wb-info-card dd{margin:2px 0 0 0; font-family:var(--mono);}
.wb-intro{font-size:1.2rem; line-height:1.5; margin:0 0 16px 0; color:var(--text); max-width:900px;}
.wb-hist-wrap{max-width:33vw; max-height:33vh; min-width:280px; min-height:180px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px;}
.wb-steps{flex:1; min-width:380px; display:flex; flex-direction:column; gap:12px;}
.wb-step{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px;}
.wb-step h4{margin:0 0 10px 0; font-size:.95rem; display:flex; align-items:center; gap:8px;}
.wb-step h4 .step-num{
  display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--accent); color:#fff; font-size:.72rem; font-weight:700;
}
.wb-step-body{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end;}
.wb-field{display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--muted);}
.wb-field input, .wb-field select{width:130px;}
.wb-field.wide input, .wb-field.wide select{width:220px;}
.wb-toggle-row{display:flex; align-items:center; gap:8px; font-size:.85rem; margin-bottom:8px;}
.wb-preview-bar{display:flex; gap:18px; font-size:.8rem; color:var(--muted); margin-top:10px; flex-wrap:wrap;}
.wb-preview-bar b{color:var(--text);}
.wb-send-bar{display:flex; justify-content:flex-end; gap:10px; margin-top:6px;}

/* ---- Aggregation tab ---- */
.agg-card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:18px; max-width:1200px; margin-bottom:16px;}
.agg-card h3{margin-top:0; font-size:1rem;}
.agg-row{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; margin-bottom:10px;}
.agg-field{display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--muted);}
.agg-field select, .agg-field input{width:170px;}
.agg-field.narrow select, .agg-field.narrow input{width:80px;}
.agg-field.wide select, .agg-field.wide input{width:260px;}

/* ---- Log tab ---- */
.log-table{width:100%; border-collapse:collapse; font-size:.85rem;}
.log-table th, .log-table td{border-bottom:1px solid var(--border); padding:6px 10px; text-align:left;}
.log-table td:first-child{font-family:var(--mono); color:var(--muted); white-space:nowrap;}

/* ---- Compare tab ---- */
.cmp-toolbar{display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; margin-bottom:16px;}
.cmp-heatmap-config{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px; min-width:0; width:100%; box-sizing:border-box;}
.cmp-heatmap-config h4{margin:0 0 10px 0; font-size:.9rem;}
/* flex-wrap + min-width:0 on the number inputs let this row wrap onto a second line
   on narrow/small screens instead of overflowing the surrounding heatmap-config box. */
.cmp-color-row{display:flex; gap:8px; align-items:center; margin-bottom:8px; font-size:.82rem; flex-wrap:wrap;}
.cmp-color-row label{width:60px; color:var(--muted); flex:0 0 auto;}
.cmp-color-row input[type=color]{width:36px; height:26px; padding:2px; border:1px solid var(--border); border-radius:5px; background:var(--panel2); flex:0 0 auto;}
.cmp-color-row input[type=number]{width:70px; max-width:100%; min-width:0; box-sizing:border-box; flex:0 1 70px;}
.cmp-mode-toggle{display:flex; gap:6px; margin-bottom:10px;}
.cmp-mode-toggle button{flex:1; font-size:.78rem; padding:5px 8px;}
.cmp-mode-toggle button.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.cmp-forced-btn{padding:10px 16px; align-self:flex-start;}
.cmp-forced-btn.active{background:var(--warn); border-color:var(--warn); color:#1a1300; font-weight:700;}
.cmp-types{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.cmp-type-btn{padding:7px 13px; border-radius:20px; font-size:.82rem;}
.cmp-type-btn.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.cmp-matrix-wrap{overflow:auto; max-height:75vh; border:1px solid var(--border); border-radius:9px;}
table.cmp-matrix{border-collapse:collapse; font-size:.78rem;}
table.cmp-matrix th, table.cmp-matrix td{border:1px solid var(--border); padding:6px 9px; text-align:center; white-space:nowrap;}
table.cmp-matrix th{background:var(--panel2); position:sticky; top:0; z-index:2;}
table.cmp-matrix th.cmp-rowhead{position:sticky; left:0; z-index:3; text-align:left;}
table.cmp-matrix td.cmp-diag{background:repeating-linear-gradient(45deg, var(--panel2), var(--panel2) 4px, var(--border) 4px, var(--border) 5px);}
table.cmp-matrix td.cmp-empty{background:var(--panel);}
table.cmp-matrix td.cmp-cell{cursor:default; color:#111; font-weight:600;}
table.cmp-matrix th.cmp-colhead-clickable{cursor:pointer;}
table.cmp-matrix th.cmp-colhead-clickable:hover{color:var(--accent);}

/* ---- Header row cell sizing fix: name/scale/floatInt/sign/xform rows should
   match data-row height/width exactly. Kill the double padding (th padding +
   input/select/button's own padding) and any curved corners. ---- */
tr.rowname-th th, tr.colmeta-row th, tr.type-row th, tr.xform-row th{
  padding:0;
}
tr.rowname-th th input,
tr.type-row th select,
tr.xform-row th select,
tr.xform-row th input,
tr.xform-row th button{
  border-radius:0;
  margin:0;
  padding:4px 6px;
  width:100%;
  box-sizing:border-box;
  display:block;
  border:none;
  border-bottom:1px solid var(--border);
}
tr.xform-row th select{ border-bottom:1px solid var(--border); margin-bottom:0; }
tr.xform-row th button{ border-radius:0; border-bottom:none; }
/* Scale/Float-Integer/Sign dropdowns: the <th> cell already has its own border,
   so the select's own focus/default outline is redundant visual noise. Suppress
   just the outline (not the border-bottom above) and keep the native arrow. */
tr.type-row th select{ outline:none; appearance:auto; -webkit-appearance:menulist; }
tr.type-row th select:focus{ outline:none; }
/* Apply-> button: the arrow glyph must render even if the user has picked a
   symbol-sparse UI font (Comic Mono / Iosevka / JetBrains Mono in Settings),
   so it gets its own guaranteed-coverage font stack regardless of --ui-font. */
.arrow-glyph{ font-family:-apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Symbols", sans-serif; }

/* ---- Hide/show toggle for Scale / Float-Integer / Sign / Transform header rows ---- */
#rowLabelTh{ padding:4px 6px; }
.rowlabel-corner{ display:flex; flex-direction:column; gap:3px; }
.rowlabel-text{ font-weight:600; }
.meta-toggle-btn{
  display:block; width:100%; font-size:.68rem; padding:2px 4px;
  background:var(--panel2); border:1px solid var(--border); border-radius:4px; color:var(--muted);
}
.meta-toggle-btn:hover{ color:var(--text); }
table.gridtbl.meta-collapsed tr.type-row,
table.gridtbl.meta-collapsed tr.xform-row{ display:none; }
.colhead-name input{ width:100%; }
tr.type-row th .small-muted{ display:block; padding:7px 9px; }
tr.type-row th .type-interval-preview{ padding:0 9px 5px 9px; margin-top:0; }

/* ---- Column meta row: derived badge + drag-to-reorder zone + duplicate/delete ----
   The dup/del buttons used to be ~19x18px and ~15x21px with only 5px between them --
   below the WCAG 2.5.8 24x24 minimum touch-target size/spacing. Row height and gap
   bumped just enough (22px->26px, 5px->8px) to fit real 24x24 hit areas without
   meaningfully undoing the grid's overall compactness. */
tr.colmeta-row th{ height:26px; cursor:grab; user-select:none; }
tr.colmeta-row th:active{ cursor:grabbing; }
.colmeta-cell{ display:flex; align-items:center; justify-content:flex-end; gap:8px; height:100%; padding:0 12px 0 6px; box-sizing:border-box; }
.colmeta-cell .derived-badge{ margin-right:auto; margin-left:0; }
.colmeta-dup, .colmeta-del{
  border:none; background:transparent; font-size:.85rem; line-height:1; cursor:pointer;
  border-radius:4px; display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; box-sizing:border-box; flex:0 0 auto;
}
.colmeta-dup{ color:var(--accent2); }
.colmeta-del{ color:var(--bad); font-weight:700; font-size:1rem; }
.colmeta-dup:hover{ background:color-mix(in srgb, var(--accent2) 20%, transparent); }
.colmeta-del:hover{ background:color-mix(in srgb, var(--bad) 20%, transparent); }

/* ---- New tabs shared: column picker + scatter canvas + results table ---- */
.colpicker{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:14px;}
.colpicker h4{margin:0 0 8px 0; font-size:.9rem;}
.colpicker-list{display:flex; flex-wrap:wrap; gap:10px; max-height:140px; overflow:auto; margin-bottom:8px;}
.colpicker-list label{display:flex; align-items:center; gap:5px; font-size:.82rem; background:var(--panel2); border:1px solid var(--border); border-radius:6px; padding:4px 9px;}
.colpicker-actions{display:flex; gap:8px;}
.colpicker-actions button{font-size:.78rem; padding:4px 10px;}
.method-row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px;}
.method-field{display:flex; flex-direction:column; gap:4px; font-size:.82rem; color:var(--muted);}
.method-field select, .method-field input{width:160px;}
.scatter-wrap{width:100%; max-width:900px; height:520px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px; margin-bottom:14px;}
.result-table{width:100%; border-collapse:collapse; font-size:.83rem; margin-bottom:16px;}
.result-table th, .result-table td{border:1px solid var(--border); padding:6px 10px; text-align:left;}
.result-table th{background:var(--panel2);}
.metric-cards{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.metric-card{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 16px; min-width:150px;}
.metric-card .mc-label{font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.4px;}
.metric-card .mc-value{font-size:1.2rem; font-weight:700; margin-top:3px;}

/* ---- Compare tab: left 25% sidebar / right 75% main layout ---- */
.cmp-layout{display:flex; gap:22px; align-items:flex-start;}
.cmp-sidebar{flex:0 0 25%; min-width:250px; max-width:360px; display:flex; flex-direction:column; gap:14px; position:sticky; top:74px;}
.cmp-main{flex:1; min-width:0;}
.cmp-method-list{display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto; padding-right:4px;}
.cmp-method-list .cmp-type-btn{width:100%; text-align:left; border-radius:8px;}
.cmp-param-panel{background:var(--panel); border:1px dashed var(--warn); border-radius:10px; padding:12px 14px; min-height:52px;}
.cmp-param-panel h5{margin:0 0 8px 0; font-size:.8rem; color:var(--warn); text-transform:uppercase; letter-spacing:.4px;}
.cmp-param-row{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:.82rem;}
.cmp-param-row label{color:var(--muted); min-width:70px;}
.cmp-param-control{
  background:color-mix(in srgb, var(--warn) 16%, var(--panel2)); border:1px solid var(--warn); color:var(--text);
  border-radius:6px; padding:5px 9px; width:90px;
}
.cmp-desc-note{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 16px; margin-bottom:12px; font-size:.82rem; color:var(--text); line-height:1.6;}
.cmp-desc-note .cmp-desc-title{font-weight:700; color:var(--accent); display:block; margin-bottom:4px;}

/* ---- 1D Plot / 2D Plot tabs: responsive grid of small chart panels ---- */
.plot-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px;}
.plot-panel{background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:12px 14px;}
.plot-panel h4{margin:0 0 8px 0; font-size:.85rem; color:var(--accent);}
.plot-panel canvas{width:100%; height:230px; display:block; background:var(--panel2); border-radius:6px;}
.plot-panel .note{margin-top:8px; margin-bottom:0;}

/* ---- About tab ---- */
.about-hero{margin-bottom:18px;}
.about-hero h2{margin:0 0 6px 0; font-size:1.6rem;}
.about-tagline{margin:0; color:var(--muted); font-size:1.1rem;}
.about-meta{
  display:flex; flex-direction:column; gap:6px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px; margin-bottom:22px; max-width:640px; font-size:.9rem;
}
.about-meta-label{display:inline-block; min-width:120px; color:var(--muted);}
.about-section{margin-bottom:26px; max-width:900px;}
.about-section h3{margin:0 0 10px 0; font-size:1.1rem;}
.about-section p{line-height:1.6; margin:0 0 12px 0;}
.about-table-wrap{overflow-x:auto; margin-bottom:10px;}
.about-table{width:100%; border-collapse:collapse; font-size:.85rem; min-width:480px;}
.about-table th, .about-table td{border:1px solid var(--border); padding:8px 12px; text-align:left;}
.about-table th{background:var(--panel2);}
.about-table th:nth-child(2), .about-table th:nth-child(3),
.about-table td:nth-child(2), .about-table td:nth-child(3){text-align:center; white-space:nowrap;}
.about-tick{color:var(--accent2); font-weight:700;}
.about-cross{color:var(--muted);}
.about-partial{color:var(--warn); font-weight:700;}
.about-knowledge-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; margin-top:14px;
}
.about-knowledge-box{
  background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:10px 12px; cursor:default;
}
.about-knowledge-name{font-weight:700; color:var(--accent); font-size:.85rem;}
.about-knowledge-example{
  font-size:.75rem; color:var(--muted); margin-top:5px; line-height:1.4;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .18s ease, opacity .18s ease;
}
.about-knowledge-box:hover .about-knowledge-example, .about-knowledge-box:focus-within .about-knowledge-example{
  max-height:120px; opacity:1;
}
.about-pipeline{display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;}
.about-pipeline-box{
  flex:1 1 220px; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px 16px;
}
.about-pipeline-title{font-weight:700; color:var(--accent); font-size:.9rem; margin-bottom:8px;}
.about-pipeline-desc{font-size:.82rem; color:var(--muted); line-height:1.55;}
.about-pipeline-arrow{
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--muted);
  font-family:-apple-system, "Segoe UI", Roboto, Arial, "Noto Sans Symbols", sans-serif;
  flex:0 0 auto; padding:0 4px;
}