/* Powder 6: the look of the whole program, the stylesheet of Yappari JS. One window: the stage on the left (Patterns,
   Datasets, Phases, Solve, Log, About, Settings), the side panel on the right (Datasets, Phases, Parameters).
   The canvas plots, the dataset and phase colours read the variables below (js/rietveld/rv_ui.js, RV.theme); the
   JavaScript keeps no colours, fonts or sizes of its own. Variables read by the plots must be plain values (#hex,
   rgb(), rgba(), px): canvas cannot evaluate var() or color-mix().
   The page always carries data-theme="light" or "dark" (the script resolves "follow the system").
   Shared modules drawn in the page read legacy token aliases (--fg-3, --rule-soft, --accent ...):
   the structure report of the Solve tab (js/wyckoff_report.js) and the space-group browser (js/spacegroup_ui.js). */
:root, [data-theme="light"] {
  --paper: #ECEEF0;
  --panel: #FBFCFC;
  --ink: #1B1F23;
  --ink-2: #3F464D;
  --ink-3: #5A636B;
  --rule: #C3C9CE;
  --rule-2: #DDE1E4;
  --blue: #1F5E9C;
  --blue-2: #184B7E;
  --blue-tint: #E1EAF3;
  --on-blue: #FFFFFF;
  --amber: #D4A347;
  --amber-tint: #F4EBD7;
  --ok: #37734C;
  --warn: #8B5D16;
  --err: #B53F3F;
  --plot-bg: #FAFAFA;
  --plot-grid: #DEDEDE;
  --plot-minor: #EFEFEF;
  --plot-axis: #626B73;
  --anchor-active: #946200;
  --anchor-fixed: #68727B;
  --anchor-refinable: #B000B5;
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-code: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  --control-bg: #F1F3F4; --control-border: #77838E; --control-ink: #303030;
  --header-bg: #D4DFEA; --header-rule: #8FA8BE;
  --chrome: #E2E5E8; --selection: #D3E1EF; --selection-ink: #17426B;
  --shadow: rgba(0, 0, 0, 0.14);
  --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px var(--blue);
  --radius: 6px; --radius-sm: 4px; --radius-xs: 3px; --radius-lg: 8px; --radius-pill: 999px;
  /* spacing: every padding, margin and gap is one of these (--inset is the side margin of every panel) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --inset: var(--sp-4);
  --ctl-pad: 5px 12px; --tab-h: 40px;
  --hover: color-mix(in srgb, var(--blue-tint) 60%, transparent);
  /* shadows: a hairline under a control or a plot, a popover or tooltip, a dialog or a menu */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--shadow) 60%, transparent);
  --shadow-pop: 0 6px 20px var(--shadow);
  --shadow-3: 0 16px 48px var(--shadow), 0 2px 6px var(--shadow);
  --focus-soft: 0 0 0 3px color-mix(in srgb, var(--blue) 24%, transparent);
  --mark-bar: inset 3px 0 0 var(--blue);
  --ctl-h: 28px; --ctl-h-sm: 24px; --ctl-h-lg: 32px;
  /* the question-mark help icon: four fifths of a small control, with a type size to match, so it sits on a title line
     without shouting */
  --help-q-h: calc(var(--ctl-h-sm) * .8);
  --help-q-fs: calc(var(--fs-sm) * .85);
  /* type scale: every font size of the stylesheet is one of these */
  --fs-xs: 12px; --fs-sm: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 15px; --fs-h: 17px; --fs-xxl: 20px;
  --switch-thumb: #FFFFFF; --on-err: #FFFFFF; --backdrop: rgba(14, 20, 26, 0.45);
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* plots (canvas) */
  --plot-zoom-fill: rgba(40, 100, 160, 0.09);
  --plot-zoom-line: rgba(40, 100, 160, 0.8);
  --plot-font-size: 12px;     /* tick labels, legend; the margins follow */
  --plot-title-size: 13px;    /* axis titles */
  --plot-marker-size: 3.2px;  /* data points; all markers and lines of the plots scale with these two */
  --plot-line-width: 1.5px;
  --plot-area-opacity: 0.3;
  /* dataset colours, used in turn (add or remove entries, numbered from 1 without gaps) */
  --series-1: #2864A0; --series-2: #A94828; --series-3: #15716A; --series-4: #7D5796;
  --series-5: #885D18; --series-6: #A13E76; --series-7: #526D20; --series-8: #785443;
  --series-9: #965420; --series-10: #54529E; --series-11: #376A80; --series-12: #555555;
  /* phase colours, used in turn: the contribution of each phase and its row of reflection ticks */
  --phase-1: #15716A; --phase-2: #7D5796; --phase-3: #885D18; --phase-4: #A13E76;
  --phase-5: #526D20; --phase-6: #785443; --phase-7: #965420; --phase-8: #54529E;
  /* one dataset on its own: calculated pattern, background and difference */
  --calc-line: #B14949; --bkg-line: #68727B; --diff-line: #555555;
  /* the regions left out of the fit, shaded across the plots */
  --excluded-fill: rgba(70, 70, 70, 0.13);

  /* shared module aliases (structure report, space-group browser) */
  --font-sans: var(--font-ui);
  --font-mono: var(--font-code);
  --bg-app: var(--paper);
  --bg-panel: var(--panel);
  --bg-stage: var(--panel);
  --bg-inset: #F0F2F3;
  --bg-elevated: var(--panel);
  --bg-hover: var(--blue-tint);
  --metal: var(--control-bg);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: #818181;
  --rule-soft: var(--rule-2);
  --rule-strong: #9AA3AA;
  --accent: var(--blue);
  --accent-hover: var(--blue-2);
  --accent-tint: rgba(40, 100, 160, 0.10);
  --accent-ring: rgba(40, 100, 160, 0.28);
  --danger: var(--err);
  --success: var(--ok);
  --warning: var(--warn);
  --shadow-2: var(--shadow-pop);
  --r-1: 3px;
  --r-2: 4px;
  --r-3: 6px;
  color-scheme: light;
}
[data-theme="dark"] {
  --paper: #16181B; --panel: #202327; --ink: #E9ECEF; --ink-2: #C9CED3; --ink-3: #A3AAB1;
  --rule: #3C4247; --rule-2: #2F343A; --blue: #8FB6E0; --blue-2: #B0CCEA; --blue-tint: #26323F; --on-blue: #172431;
  --amber: #D9B56B; --amber-tint: #3E3525; --ok: #9BC6A4; --warn: #DEBB7B; --err: #E5A0A0;
  --plot-bg: #242424; --plot-grid: #3D3D3D; --plot-minor: #303030; --plot-axis: #ABB2BA;
  --anchor-active: #F3CF3E; --anchor-fixed: #ABB2BA; --anchor-refinable: #F06FFF;
  --control-bg: #2B2F34; --control-border: #77838E; --control-ink: #E0E0E0;
  --header-bg: #253444; --header-rule: #536E88;
  --chrome: #1A1D20; --selection: #34475B; --selection-ink: #EAF2FA;
  --shadow: rgba(0, 0, 0, 0.32);
  --focus-ring: 0 0 0 2px var(--panel), 0 0 0 4px var(--blue);
  --plot-zoom-fill: rgba(157, 189, 224, 0.10); --plot-zoom-line: rgba(157, 189, 224, 0.85);
  --series-1: #9DBDE0; --series-2: #EDA17D; --series-3: #80C9BC; --series-4: #BCA5CE;
  --series-5: #D9B56B; --series-6: #E29BC3; --series-7: #B7CC85; --series-8: #D0AD95;
  --series-9: #D9AE8A; --series-10: #ABA9E5; --series-11: #8EC5DD; --series-12: #CCCCCC;
  --phase-1: #80C9BC; --phase-2: #BCA5CE; --phase-3: #D9B56B; --phase-4: #E29BC3;
  --phase-5: #B7CC85; --phase-6: #D0AD95; --phase-7: #D9AE8A; --phase-8: #ABA9E5;
  --calc-line: #DF9696; --bkg-line: #ABB2BA; --diff-line: #C6C6C6;
  --excluded-fill: rgba(180, 180, 180, 0.12);
  --on-err: #16181B;
  --bg-inset: #1B1E21; --fg-4: #888888; --rule-strong: #5C646B;
  --accent-tint: rgba(157, 189, 224, 0.14); --accent-ring: rgba(157, 189, 224, 0.35);
  color-scheme: dark;
}

/* ---------- base: no specificity (:where), so every class below overrides it ---------- */
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--radius); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%;
  background: var(--paper); color: var(--ink); font: var(--fs-md)/1.4 var(--font-ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
input, select, textarea, td, th, dd, .pv, .ps { font-variant-numeric: tabular-nums; }
:where(a) { color: var(--blue); }
:where(code) { font-family: var(--font-code); }
:where(h1, h2, h3) { font-weight: 600; }
:where(button) {
  font: inherit;
  color: var(--control-ink);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  min-height: var(--ctl-h);
  padding: var(--ctl-pad);
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
:where(button:enabled:hover) { border-color: var(--blue); background: var(--blue-tint); }
:where(button:enabled:active) { transform: translateY(1px); }
:where(button:disabled) { opacity: 0.5; cursor: default; }
:where(button:not(.primary):disabled:hover) { border-color: var(--rule); }
button.primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 600; box-shadow: var(--shadow-1); }
button.primary:enabled:hover { background: var(--blue-2); border-color: var(--blue-2); box-shadow: var(--shadow-1); }
button.primary:disabled:hover { background: var(--blue); border-color: var(--blue); }
button.danger { background: var(--err); border-color: var(--err); color: var(--on-err); font-weight: 600; }
button.danger:enabled:hover { background: color-mix(in srgb, var(--err) 88%, var(--ink)); border-color: var(--err); color: var(--on-err); }
button.link { border: 0; background: none; padding: 0; color: var(--blue); text-decoration: underline; }
:where(input:not([type=range], [type=checkbox], [type=radio], [type=color], [type=file]), select, textarea) {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  min-height: var(--ctl-h);
  padding: var(--sp-1) var(--sp-2);
  min-width: 0;
  transition: border-color .12s, box-shadow .12s;
}
:where(input:not([type=range], [type=checkbox], [type=radio], [type=color], [type=file]), select, textarea):focus-visible {
  border-color: var(--blue); box-shadow: var(--focus-soft);
}
:where(input:disabled, select:disabled, textarea:disabled) { background: var(--paper); color: var(--ink-3); }
.atoms input[readonly] { background: var(--paper); color: var(--ink-3); cursor: default; }
:where(input:not([type=checkbox], [type=radio]):enabled:hover, select:enabled:hover, textarea:enabled:hover) { border-color: var(--control-border); }
input.invalid { border-color: var(--err); background: color-mix(in srgb, var(--err) 8%, var(--panel)); }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--blue); width: 14px; height: 14px; margin: 0; }
:where(:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
:where(input, textarea)::placeholder { color: var(--ink-3); opacity: 1; }
textarea.code-area, .sv-form textarea { font-family: var(--font-code); font-size: var(--fs-sm); resize: vertical; }
/* the example rules of a rules box are a suggestion, not content: faint and italic */
textarea.code-area::placeholder, .sv-form textarea::placeholder { font-style: italic; opacity: .55; }
.warn, .sv-warn { color: var(--warn); }
.chk.disabled {color:var(--ink-3);opacity:.55;}
.skip-link {
  position: fixed;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--blue);
  color: var(--on-blue);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top .15s var(--ease);
}
.skip-link:focus { top: 10px; }

/* ---------- header ---------- */
.top { display: flex; align-items: stretch; gap: var(--sp-3); padding: 0 var(--inset); min-width: 0; background: var(--header-bg); border-bottom: 1px solid var(--header-rule); border-top: 0; box-shadow: var(--shadow-1); }
.brand { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-3) 0 var(--sp-1); white-space: nowrap; border: 0; background: transparent; }
.brand .glyph { width: 26px; height: 20px; flex: none; color: var(--blue); }
.brand .mark { color: var(--blue); font-size: var(--fs-h); line-height: 1; font-weight: 650; letter-spacing: 0.01em; }
.tabs { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.tabs button, .calculation-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  padding: 0 var(--sp-4);
  color: var(--ink-2);
  white-space: nowrap;
  font-size: var(--fs-lg);
  letter-spacing: 0.01em;
  min-height: var(--tab-h);
}
.tabs button { position: relative; border-bottom-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.tabs button::before {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: transparent; transition: background-color .15s;
}
.tabs button:enabled:hover { color: var(--ink); border-bottom-color: transparent; background: color-mix(in srgb, var(--ink) 5%, transparent); }
.tabs button:enabled:hover::before { background: var(--rule-strong); }
.tabs button[aria-selected="true"], .tabs button[aria-selected="true"]:enabled:hover {
  background: none; color: var(--ink); border-bottom-color: transparent; font-weight: 650;
}
.tabs button[aria-selected="true"]::before, .tabs button[aria-selected="true"]:enabled:hover::before { background: var(--blue); }
.calculation-tabs button { border-bottom-width: 2px; }
.calculation-tabs button:enabled:hover { color: var(--ink); border-bottom-color: var(--rule); background: none; }
.calculation-tabs button[aria-selected="true"], .calculation-tabs button[aria-selected="true"]:enabled:hover,
.calculation-tabs button[aria-checked="true"], .calculation-tabs button[aria-checked="true"]:enabled:hover {
  background: none; color: var(--ink); border-bottom-color: var(--blue); font-weight: 600;
}
/* a structure solution running in the Solve tab */
.tabs button.running::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%;
  background: var(--amber); vertical-align: 1px; animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; } }
.top .menus { margin-left: auto; align-self: center; display: flex; gap: 0; }
.menu-btn::after { content: ""; display: inline-block; vertical-align: middle; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
.top .menu-btn:enabled:hover, .top .hbtn:enabled:hover { color: var(--ink); border-color: var(--rule); background: none; }
.top .menu-btn[aria-expanded="true"] { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }
.top .menu-btn, .fit-btn, .hbtn {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
  background: none;
  color: var(--ink-2);
  padding: var(--ctl-pad);
  min-height: var(--ctl-h-lg);
  border-radius: var(--radius-sm);
}
.top .hbtn:disabled { opacity: .45; }
.top .fit-btn { background: var(--blue); color: var(--on-blue); border-color: var(--blue); padding: 5px var(--sp-4); min-height: var(--ctl-h-lg); flex-shrink: 0; font-weight: 600; box-shadow: var(--shadow-1); }
.top .fit-btn:enabled:hover { background: var(--blue-2); border-color: var(--blue-2); color: var(--on-blue); }
.top > .hbtn, .top > .fit-btn, .top > .theme-switch, .top > .menus { align-self: center; }

/* ---------- dark-mode switch ---------- */
.theme-switch { align-self: center; display: flex; align-items: center; gap: var(--sp-2); border: 0; background: none; color: var(--ink-2); padding: 6px 2px; }
.theme-switch:enabled:hover { color: var(--ink); background: none; }
.theme-switch .track { position: relative; width: 30px; height: 16px; border-radius: var(--radius-lg); background: var(--rule); transition: background .15s; }
.theme-switch .track i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--switch-thumb); box-shadow: var(--shadow-1); transition: left .15s; }
.theme-switch[aria-checked="true"] .track { background: var(--blue); }
.theme-switch[aria-checked="true"] .track i { left: 16px; }

/* ---------- main layout: a stage on the left, a side panel on the right ---------- */
.work { --side-w: 372px; --side-min: 280px; --side-max: 60%; display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w); min-height: 0; }
.stage {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--paper); border-right: 1px solid var(--rule);
}
.pane { display: none; flex: 1 1 auto; min-height: 0; }
.pane.on { display: flex; flex-direction: column; }

/* ---------- plots ---------- */
.ptools { position: relative; display: flex; align-items: center; gap: var(--sp-2) var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) 44px var(--sp-2) var(--inset); background: var(--paper); border-bottom: 0; }
.ptools > button:not([aria-pressed]) { min-height: 28px; }
.ptools .note { margin-left: auto; color: var(--warn); font-size: var(--fs-sm); }
/* the mouse controls of the plot: a round "i" at the top right of the toolbar, its list on hover or keyboard focus */
.info-tip { position: absolute; top: var(--sp-3); right: var(--inset); }
.info-btn, .cmd-help, .help-q { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-h-sm); height: var(--ctl-h-sm); min-width: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0; border: 1px solid var(--control-border); border-radius: 50%; background: var(--control-bg); color: var(--ink-3); line-height: 1; cursor: help; }
.info-btn { font: italic 700 var(--fs-sm)/1 Georgia, "Times New Roman", serif; }
.cmd-help, .help-q { font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); background: var(--panel); }
/* a "?" inside a line of help text: the round help button, on the text line */
.help-q { vertical-align: middle; margin-left: var(--sp-1); width: var(--help-q-h); height: var(--help-q-h); min-width: var(--help-q-h); min-height: var(--help-q-h); font-size: var(--help-q-fs); }
.info-btn:hover, .info-tip:focus-within .info-btn, .cmd-help:enabled:hover, .help-q:hover, .help-q:focus-visible { color: var(--blue); border-color: var(--blue); background: var(--blue-tint); }
.info-pop, .help-pop {
  z-index: 30;
  width: max-content;
  box-sizing: border-box;
  padding: var(--sp-3);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: left;
}
.info-pop { display: none; position: absolute; top: calc(100% + 6px); right: 0; max-width: min(380px, 80vw); pointer-events: none; }
/* the help of a "?" button (rv_ui.js places it at the button, in the viewport): long help scrolls inside it */
.help-pop { position: fixed; max-width: min(520px, calc(100vw - var(--sp-4))); overflow: auto; overscroll-behavior: contain; }
.help-pop p, .help-pop ul { margin: 0 0 var(--sp-2); }
.help-pop ul { padding-left: var(--sp-4); }
.help-pop > :last-child { margin-bottom: 0; }
.help-pop .hint { color: var(--ink-2); }
.help-pop [data-mono-angle] { cursor: pointer; }
.help-pop [data-mono-angle]:focus-within > td { background: var(--hover); }
.info-tip:hover .info-pop, .info-tip:focus-within .info-pop { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.info-pop b { font-weight: 600; white-space: nowrap; }
.plot-pane { padding: var(--sp-1) var(--inset) var(--inset); gap: var(--sp-2); overflow: auto; }
.plot-host { position: relative; flex: 1 1 0; min-height: 110px; overflow: hidden; background: var(--plot-bg); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-1); }
[data-theme="dark"] .plot-host { box-shadow: none; }
.plot-host.res { flex: 0 0 24%; min-height: 100px; }
.plot-canvas { display: block; cursor: crosshair; }
.plot-tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  white-space: nowrap;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.plot-tip .muted { color: var(--ink-2); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--control-bg); overflow: hidden; flex: none; }
.seg button { border: 0; border-right: 1px solid var(--rule); border-radius: 0; padding: 5px var(--sp-3); background: transparent; min-height: calc(var(--ctl-h) - 2px); }
.seg button:enabled:hover { background: var(--blue-tint); }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"], .seg button[aria-pressed="true"]:enabled:hover { background: var(--blue); color: var(--on-blue); font-weight: 600; }
.tool-sep { width: 1px; align-self: stretch; margin: 2px var(--sp-1); background: var(--rule); }
.tool-gap { flex: 1; }
label.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); cursor: pointer; white-space: nowrap; }

/* ---------- settings, log, about, results, solve, datasets: scrolling panes ---------- */
.settings-pane.on, .log-pane.on, .about-pane.on, .phase-pane.on, .solve-pane.on, .datasets-pane.on { display: block; overflow: auto; background: var(--paper); }
.settings-pane { padding: var(--sp-4) var(--inset) var(--sp-5); }
.settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--sp-4) var(--sp-5); align-items: start; max-width: 1180px; }
.settings .form-grid { grid-template-columns: minmax(0, 1fr) clamp(104px, 40%, 240px); }
.settings fieldset { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: var(--sp-3) 0 0; min-width: 0; }
.settings legend { font-weight: 600; padding: 0 8px 0 0; color: var(--ink); }
.block { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--rule); max-width: 980px; }
.block h2 { font-size: var(--fs-md); margin: 0 0 2px; }
.form-grid { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); align-items: center; }
.form-grid > label { color: var(--ink-2); }
.form-grid > label[title] { cursor: help; }
.form-grid small { display: block; color: var(--ink-3); font-size: var(--fs-sm); margin-top: 2px; }
.form-grid .check-hint { display: flex; align-items: center; gap: var(--sp-3); }
.form-grid .check-hint input { flex: none; }
.form-grid .check-hint small { margin-top: 0; }
.form-grid input:not([type=checkbox], [type=radio]), .form-grid select, .form-grid textarea { width: 100%; }
table.grid { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
table.grid thead th, table.grid th {
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 55%, var(--panel));
}
table.grid td { padding: var(--sp-1) var(--sp-2); border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
table.grid tbody tr:hover > td { background: var(--hover); }
table.grid input:not([type=checkbox], [type=radio]) { width: 100%; min-width: 80px; max-width: 150px; min-height: var(--ctl-h-sm); text-align: right; }
table.grid small { color: var(--ink-3); }
table.grid.compact td, table.grid.compact th { padding: 2px var(--sp-2); }
.limits-table { table-layout: fixed; font-size: var(--fs-sm); }
.limits-table td, .limits-table th { padding: 2px var(--sp-1); overflow: hidden; text-overflow: ellipsis; }
.limits-table td:first-child code { font-size: var(--fs-sm); overflow-wrap: anywhere; }
table.grid.limits-table input:not([type=checkbox], [type=radio]) { min-width: 0; max-width: none; padding: 2px var(--sp-1); font-size: var(--fs-sm); }
/* the panel box: cards, accordions and the bar of the Structure pane */
.solve-fit, .dataset-card, .cf-density, .history-run, .acc { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); }
.buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hint, .note { color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.45; margin: var(--sp-2) 0; }
.note { color: var(--ink-2); margin: 0; }
.hint.err, .sv-err { color: var(--err); }
.log { list-style: none; margin: 0; padding: var(--sp-3) var(--inset) var(--sp-5); font-size: var(--fs-md); }
.log li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--rule-2); }
.log time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.log li.ok span { color: var(--ok); }
.log li.warn, .log li.err { box-shadow: inset 3px 0 0 currentColor; padding-left: var(--sp-3); }
.log li.warn { color: var(--warn); }
.log li.err { color: var(--err); }
.log li.warn span { color: var(--warn); }
.log li.err span { color: var(--err); }
.log li.err time, .log li.warn time { color: var(--ink-3); }
.log li.cmd span { font-family: var(--font-code); color: var(--ink-2); }
.log .restore { padding: 1px 8px; font-size: var(--fs-sm); }
.log li.saved { grid-template-columns: 120px minmax(0, 1fr) auto; }
.log li.saved-head span { font-weight: 600; }
.about { max-width: none; padding: var(--sp-5) clamp(var(--inset), 3vw, 48px) 48px; font-size: var(--fs-lg); line-height: 1.55; }
.about > p, .about > ol, .about > ul { max-width: 110ch; }
.about table.grid { width: 100%; }
.about h1 { font-size: var(--fs-xxl); margin: 0 0 6px; }
.about h1 small { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); }
.about h2 { font-size: var(--fs-lg); margin: 22px 0 6px; }
.about code { font-size: var(--fs-md); background: var(--blue-tint); padding: 1px 4px; }
.about table.grid td:first-child { white-space: nowrap; color: var(--ink-2); }
.about ul, .about ol { padding-left: 22px; }
.about li { margin: 3px 0; }

/* ---------- side panel ---------- */
.side { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--panel); overflow-y: auto; }
.side-grip { position: absolute; z-index: 6; top: 0; bottom: 0; left: 0; width: 7px; cursor: col-resize; touch-action: none; }
.side-grip::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: transparent; transition: background .12s; }
.side-grip:hover::after, .side-grip:focus-visible::after, body.resizing .side-grip::after { background: var(--blue); }
.side-grip:focus-visible { outline: none; box-shadow: none; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing canvas { pointer-events: none; }
.side-h { display: flex; align-items: baseline; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); min-width: 0; background: transparent; }
.side-h .sub { color: var(--ink-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.side-h .sub.strong { color: var(--ink); font-weight: 600; }
.dataset-title-tools { margin-left: auto; align-self: center; }
.fit-selection[open] > summary .dataset-title-tools { display: none; }
.dataset-editor > summary .acc-help { margin-left: 0; }
.dataset-selection-led { flex: none; align-self: center; width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--err); border: 1px solid var(--control-border); }
.dataset-selection-led.selected { background: var(--ok); }
.ds-step { display: inline-flex; flex: none; gap: var(--sp-1); }
.ds-step button { padding: 1px var(--sp-2); font-size: var(--fs-md); line-height: 1.3; min-height: var(--ctl-h-sm); min-width: var(--ctl-h-sm); }
button.mini { padding: 1px var(--sp-2); font-size: var(--fs-sm); min-height: var(--ctl-h-sm); align-self: center; }
.side-h button.mini + button.mini { margin-left: 2px; }
.ds-list { flex: 1 1 auto; overflow: auto; min-height: 0; outline: none; border-top: 1px solid var(--rule-2); }
.dataset-list { list-style: none; margin: 0; padding: 0; }
.ds-list:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.ds { display: flex; align-items: center; gap: var(--sp-2); height: calc(var(--ctl-h) - 2px); padding: 0 var(--sp-3); cursor: default; user-select: none; border-bottom: 1px solid var(--rule-2); }
.ds:hover { background: var(--hover); }
.ds.on { background: var(--selection); color: var(--selection-ink); box-shadow: var(--mark-bar); }
.ds .sw { width: 8px; height: 8px; flex: none; border-radius: var(--radius-xs); background: var(--dataset-color); }
.ds .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds .dataset-name { text-align: left; background: transparent; border-color: transparent; color: inherit; padding: 0 var(--sp-1); min-height: var(--ctl-h-sm); }
.ds.inspected .dataset-name { font-weight: 700; text-decoration: underline; text-underline-offset: var(--sp-1); }
.ds.drop { box-shadow: inset 0 2px 0 var(--blue); }
.ds .rename { flex: 1; padding: 1px 4px; min-height: var(--ctl-h-sm); }
.ds.ph { height: 29px; }
.ds.ph .sw { border-radius: 50%; }
.empty-list { margin: var(--sp-4) var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--rule-strong); border-radius: var(--radius); background: var(--bg-inset); color: var(--ink-2); line-height: 1.5; }
.empty-list p { margin: 0 0 6px; }
.param-list { overflow: auto; padding: 0 var(--sp-3) var(--sp-1); min-height: 0; }
.prow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 46px 58px 16px; align-items: center; gap: var(--sp-1) var(--sp-2); padding: 2px var(--sp-1); margin: 0 calc(-1 * var(--sp-1)); border-radius: var(--radius-sm); }
.prow:hover, .zone-row:hover { background: var(--hover); }
.param-list.global .prow { grid-template-columns: 70px minmax(0, 1fr) 46px 58px 14px 16px; }
.prow .pn, .zone-row .pn { font-weight: 600; font-size: var(--fs-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pv, .prow .anchor-x, .zone-box {
  width: 100%; min-width: 0; min-height: var(--ctl-h-sm); text-align: right; font-variant-numeric: tabular-nums; padding: 3px 6px;
  font-family: var(--font-code); border-color: var(--control-border); background: color-mix(in srgb, var(--paper) 60%, var(--panel));
}
.prow .pv:hover, .prow .anchor-x:hover, .zone-box:hover { border-color: var(--control-border); }
.prow .pv:focus-visible, .prow .anchor-x:focus-visible, .zone-box:focus-visible { border-color: var(--blue); background: var(--panel); }
.zone-row, .zone-head {
  display: grid;
  grid-template-columns: minmax(44px, .8fr) minmax(0, 1fr) minmax(0, 1fr) var(--ctl-h-sm) 36px;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  padding: 2px var(--sp-1);
  margin: 0 calc(-1 * var(--sp-1));
  border-radius: var(--radius-sm);
}
.zone-row.off .pn, .zone-row.off .zone-box { color: var(--ink-3); }
.prow .pr, .zone-row .pr { width: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0; border: 0; background: none; color: var(--ink-3); font-size: var(--fs-xl); line-height: 1; }
.prow .pr:enabled:hover, .zone-row .pr:enabled:hover { background: none; color: var(--err); }
.anchor-head, .zone-head { display: grid; align-items: end; gap: var(--sp-1) var(--sp-2); padding: 0 var(--sp-1); margin: var(--sp-1) calc(-1 * var(--sp-1)) 0; font-size: var(--fs-xs); color: var(--ink-3); }
.anchor-head span:nth-child(2), .anchor-head span:nth-child(3), .zone-head span:nth-child(2), .zone-head span:nth-child(3) { text-align: right; padding-right: 6px; }
.zone-head span:last-child { text-align: center; }
.zone-apply { justify-self: center; }
.anchor-head .hd-pl { display: none; }
.param-list.global .anchor-head .hd-pl { display: block; }
.prow .pu { color: var(--ink-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .ps { color: var(--ink-2); font-size: var(--fs-sm); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .ps.lim { color: var(--warn); }
.prow.fixed .pn, .prow.fixed .pv { color: var(--ink-3); }
.prow.fixed .pv { background: transparent; }
/* the two coordinates of an anchor look the same, refined or not (the tick says which) */
.prow.anchor-row.fixed .pv { color: var(--ink); background: color-mix(in srgb, var(--paper) 60%, var(--panel)); }
.prow .pl { display: inline-flex; align-items: center; justify-content: center; width: var(--ctl-h-sm); height: var(--ctl-h-sm); min-height: var(--ctl-h-sm); padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink-3); }
.prow .pl.local { color: var(--warn); }
/* shared by some of the selected datasets only (a dot), or kept apart in the dataset shown */
.prow .pl.some { position: relative; }
.prow .pl.some::after { content: ''; position: absolute; right: -2px; top: 1px; width: 4px; height: 4px; border-radius: 50%; background: var(--warn); }
.prow .pl.apart { color: var(--blue); }
.prow .pl.own { cursor: default; }
.prow .pl:disabled { cursor: default; opacity: .5; }
.prow.fixed .pl { opacity: 1; }
.prow .pf:indeterminate { accent-color: var(--warn); }
.prow .pf-none { width: 14px; }
.prow.dep .pn { color: var(--ink-3); font-weight: 400; }
.prow.dep .pv { font-style: italic; }
.prow.dep .pu { font-family: var(--font-code); }
.param-stats { padding: var(--sp-1) var(--sp-3) var(--sp-2); }
.param-stats dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; margin: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.param-stats dt { color: var(--ink-2); }
.param-stats dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.param-stats .why { color: var(--ink-3); }
.clone-bar { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--rule); background: var(--bg-inset); }
.clone-bar .sub { flex: 1 0 100%; color: var(--ink-2); font-size: var(--fs-sm); }
.clone-bar button { flex: 1 1 0; }
/* parameters: one group per instrument, phase, peak shape and atom; the header folds it, its box ticks it */
.pgroup { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px solid var(--rule); }
.pgroup:first-child { margin-top: var(--sp-1); }
.pg-tog { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-2); border: 0; background: none; padding: 1px 0; color: var(--ink); text-align: left; }
.pg-tog:enabled:hover { background: none; color: var(--blue); }
.pg-tog::before { content: ""; flex: none; border: 4px solid transparent; border-left: 5px solid currentColor; border-right: 0; transition: transform .12s; }
.pg-tog[aria-expanded="true"]::before { transform: rotate(90deg); }
.pg-tog .sw { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.pg-t { font-weight: 600; white-space: nowrap; }
.pg-s { color: var(--ink-3); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pg-fit { flex: none; }
.pg-fit:indeterminate { accent-color: var(--warn); }
.pg-rows { padding: var(--sp-1) 0; }
/* the Fit panel */
.side .fitbar.on { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: var(--sp-3); overflow: auto; }
.fit-target { margin: 0; padding: 8px 10px; background: var(--bg-inset); border-left: 3px solid var(--blue); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-2); line-height: 1.6; }
.fit-target b { color: var(--ink); }
.fit-target .why-not { color: var(--warn); }
.fit-target .mtag { color: var(--ink-3); font-size: var(--fs-sm); }
.fit-lbl { color: var(--ink-2); }
.fit-mode-hint { margin: -4px 0 0 72px; }
.fit-steps { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.fit-group-heading { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.fit-group-heading .help-q { margin-left: auto; }
.progress { display: flex; align-items: center; gap: 8px; min-height: 14px; }
.progress .track, .busy-track { position: relative; flex: 1; height: 4px; background: var(--rule-2); overflow: hidden; }
.progress i, .busy-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--blue); }
.progress span { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 72px; text-align: right; }
.progress.indet i { width: 30%; animation: indet 1.1s linear infinite; }
@keyframes indet { from { left: -30%; } to { left: 100%; } }

/* ---------- status bar: the command line, the last message, the progress of a fit ---------- */
.status {
  display: grid;
  grid-template-columns: auto minmax(280px, 34%) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-height: 34px;
  padding: var(--sp-1) var(--inset);
  background: var(--chrome);
  border-top: 1px solid var(--rule);
}
.status .progress { width: 220px; }
.cmd { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-3); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 0 var(--sp-2); min-height: calc(var(--ctl-h) - 2px); }
.cmd:focus-within { border-color: var(--blue); box-shadow: var(--focus-soft); }
.cmd span[aria-hidden] { font-family: var(--font-code); color: var(--blue); font-weight: 700; }
.cmd input { flex: 1; min-height: 0; border: 0; border-radius: 0; background: transparent; font: var(--fs-md) var(--font-code); padding: 3px 2px; }
.cmd input:focus, .cmd input:focus-visible { outline: none; box-shadow: none; }
.cmd input::placeholder { font-style: normal; opacity: .6; }
.msg { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.msg:not(:empty)::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.msg.ok { color: var(--ok); }
.msg.ok::before { background: var(--ok); }
.msg.warn { color: var(--warn); }
.msg.warn::before { background: var(--warn); }
.msg.err { color: var(--err); font-weight: 600; }
.msg.err::before { background: var(--err); }

/* ---------- dialogs and menus ---------- */
/* the box of a dialog, a menu and the space-group browser; then their head and their foot */
dialog, .menu-pop, .sg-modal { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.dlg h2, .sg-modal-header { margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-3); background: var(--panel); border-bottom: 1px solid var(--rule); font-size: var(--fs-xl); font-weight: 650; }
.dlg .btns, .sg-modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); background: var(--bg-inset); border-top: 1px solid var(--rule-2); }
dialog { padding: 0; width: min(500px, 94vw); max-height: 90vh; }
dialog[open] { animation: dlg-in .16s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
dialog.wide { width: min(700px, 94vw); }
dialog.xl { width: min(1000px, 96vw); }
dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(2px); }
.dlg .body { padding: var(--sp-3) var(--sp-4) var(--sp-4); overflow: auto; max-height: calc(90vh - 130px); }
.dlg .body p { margin: 0 0 10px; }
.dlg .intro { color: var(--ink-2); }
.dlg .btns .left + :not(.left) { margin-left: auto; }
.dlg .btns button:last-child:not(.left) { background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 600; }
.dlg .btns button.danger { background: var(--err); border-color: var(--err); color: var(--on-err); }
.menu-pop { position: fixed; z-index: 60; min-width: 250px; max-width: 440px; padding: var(--sp-1); animation: dlg-in .12s var(--ease); }
.menu-pop button { display: block; width: 100%; text-align: left; border: 0; border-radius: var(--radius-sm); background: none; padding: var(--sp-2) var(--sp-3); min-height: 0; }
.menu-pop button:hover, .menu-pop button:focus, .menu-pop button:enabled:hover { background: var(--blue-tint); outline: none; }
.menu-pop hr { border: 0; border-top: 1px solid var(--rule-2); margin: var(--sp-1) var(--sp-2); }
.menu-pop button[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.menu-pop button[aria-disabled="true"]:hover { background: none; }
.menu-pop button[aria-disabled="true"]:focus { background: var(--rule-2); }
.drop-hint {
  display: none; position: fixed; inset: 10px; z-index: 80; pointer-events: none;
  align-items: center; justify-content: center; font-size: var(--fs-h); font-weight: 600; color: var(--blue);
  border: 2px dashed var(--blue); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--blue-tint) 85%, transparent); backdrop-filter: blur(3px);
}
body.dropping .drop-hint { display: flex; }

/* ---------- Phases tab ---------- */
.phase-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--inset);
  background: var(--chrome);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule-2);
}
.phase-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--radius-pill); padding: var(--sp-1) var(--sp-3); }
.chip .sw { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip small { color: var(--ink-3); font-size: var(--fs-xs); }
.chip[aria-pressed="true"], .chip[aria-pressed="true"]:enabled:hover { background: var(--blue); border-color: var(--blue); color: var(--on-blue); font-weight: 600; }
.chip[aria-pressed="true"] small { color: inherit; opacity: 0.8; }
.phase-body { padding: var(--sp-3) var(--inset) var(--sp-5); }
/* the editor inside the accordion of the current phase: the accordion (.dataset-card) already gives the side margin */
.phase-accordion .phase-body { padding: 0 0 var(--sp-3); }
.phase-accordion .phase-cols > .pblock:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.phase-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 0 var(--sp-5); }
.pblock { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--rule); min-width: 0; }
.pblock h2 { font-size: var(--fs-md); margin: 0 0 8px; color: var(--ink); }
.pblock h2 .sub { color: var(--ink-3); font-weight: 400; font-size: var(--fs-sm); margin-left: 6px; }
.hkl { display: inline-flex; gap: 4px; }
.form-grid .hkl input { width: 58px; text-align: right; }
.cell-grid { display: grid; grid-template-columns: repeat(3, auto minmax(72px, 1fr) auto); gap: var(--sp-2); align-items: center; max-width: 560px; }
.cell-grid label { color: var(--ink-2); text-align: right; font-weight: 600; }
.cell-grid input { width: 100%; }
.cell-grid .u { color: var(--ink-3); font-size: var(--fs-sm); margin-right: 8px; }
input.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-code); }
input.has-esd { border-bottom-color: var(--ok); }
.cell-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--sp-3); margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.cell-info dt { color: var(--ink-2); }
.cell-info dd { margin: 0; }
.cell-info .why { color: var(--ink-3); }
.table-wrap { overflow-x: auto; }
table.grid.atoms td { padding: 2px var(--sp-1); }
table.grid.atoms th { padding: var(--sp-1); }
table.grid.atoms input:not([type=checkbox]) { min-width: 56px; max-width: none; }
table.grid.atoms input[data-at="label"], table.grid.atoms input[data-at="type"] { text-align: left; width: 76px; min-width: 64px; }
table.grid.atoms input[data-at="x"], table.grid.atoms input[data-at="y"], table.grid.atoms input[data-at="z"] { width: 96px; }
table.grid.atoms input[data-at="occ"], table.grid.atoms input[data-at="B"] { width: 74px; }
input.linked { color: var(--ink-3); background: var(--paper); font-style: italic; }
td.site { white-space: nowrap; color: var(--ink-2); padding-left: 8px; }
td.site .wy { font-weight: 600; color: var(--ink); margin-right: 4px; }
td.site code { font-size: var(--fs-sm); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--sp-1); min-height: var(--ctl-h-sm); min-width: var(--ctl-h-sm); border-color: transparent; background: none; color: var(--ink-3); }
.icon-btn:enabled:hover { color: var(--err); border-color: var(--err); background: none; }
.empty-pane { padding: var(--sp-5) var(--inset); color: var(--ink-2); max-width: 80ch; }
.empty-pane p { margin: 0 0 10px; }
.empty-pane code { background: var(--blue-tint); padding: 1px 4px; }
.phase-control-row { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: var(--sp-2); align-items: center; }
.phase-control-row > input, .phase-control-row > select { min-width: 0; width: 100%; height: var(--ctl-h-lg); box-sizing: border-box; }
.phase-control-row > button { width: 80px; height: var(--ctl-h-lg); padding: var(--sp-1) var(--sp-2); box-sizing: border-box; }
.phase-control-row > input[type=color] { width: 80px; height: var(--ctl-h-lg); padding: 3px; cursor: pointer; }
/* the name row (name, colour, Edit) and the space-group row (symbol, Convert…, Browse…) share their columns */
.phase-sg-row { grid-template-columns:minmax(0,1fr) 80px 80px; }
.ds .icon-btn { flex:none; }
.instrument-profile { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0 var(--sp-2); }
.instrument-profile select {flex:1;min-width:0;}

/* ---------- Results & tables ---------- */
.results { padding: var(--sp-3) var(--inset) var(--sp-5); }
.res-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; position: sticky; top: 0; z-index: 2; background: var(--panel); padding: var(--sp-1) 0 var(--sp-2); border-bottom: 1px solid var(--rule-2); }
.res-head h2 { font-size: var(--fs-xl); margin: 0; }
.res-head .sub { color: var(--ink-3); }
.results .block { max-width: none; margin-top: var(--sp-4); }
.results .block h2 { color: var(--ink); }
.results .block h2 .sub { color: var(--ink-3); font-weight: 400; font-size: var(--fs-sm); margin-left: 6px; }
.results table.grid td, .results table.grid th { white-space: nowrap; }
.results table.grid .why { color: var(--ink-3); }
.res-sub { display: flex; align-items: center; gap: 7px; font-size: var(--fs-md); font-weight: 650; margin: var(--sp-3) 0 var(--sp-1); color: var(--ink-2); }
.res-sub:first-child { margin-top: 2px; }
.sw-inline { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: middle; }
/* the tables of the phases of the datasets and of the sharing in the global fit */
.pm-wrap { max-height: min(56vh, 520px); overflow: auto; border: 1px solid var(--rule-2); border-radius: var(--radius-sm); }
table.grid.pm th, table.grid.pm td { white-space: nowrap; }
table.grid.pm thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); vertical-align: bottom; }
table.grid.pm thead small { display: block; font-weight: 400; }
table.grid.pm td { text-align: center; }
table.grid.pm tbody th { font-weight: 500; border-bottom-color: var(--rule-2); }
table.grid.pm .sub { color: var(--ink-3); font-weight: 400; }
table.grid.pm td.sh-sum { text-align: left; color: var(--ink-2); font-size: var(--fs-sm); white-space: normal; min-width: 170px; }
table.grid.pm tr.on > *, table.grid.pm tr.focus > * { background: var(--blue-tint); }
table.grid.pm tr.on > th:first-child { box-shadow: var(--mark-bar); }
table.grid.pm input:disabled { opacity: .45; }
.pm-h { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.pm-h input { margin: 0 2px 0 0; }

/* ---------- Solve tab & calculation workspaces ---------- */
.calculation-tabs { display: flex; gap: var(--sp-1); padding: 0 var(--inset); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.solve-sticky {
  position: sticky; top: 0; z-index: 10;
  background: var(--chrome); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.solve-sticky .calculation-tabs { position: static; padding-top: 0; background: inherit; }
.solve-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--inset); }
.solve-actions button.primary { order: 5; margin-left: auto; padding-left: 16px; padding-right: 16px; }
.method-instructions,.method-warning { margin: 0; padding: 0 var(--inset) var(--sp-3); }
.method-warning {font-size:var(--fs-sm);}
.method-setup fieldset {margin-top:0;}
.solve-pane .res-head { top: var(--solve-sticky-height, 110px); }
.solve-fit { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-3) 0; padding: var(--sp-4); }
.solve-fit .fit-mode-hint { margin: -4px 0 0; }
.fit-groups { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; }
.fit-groups label { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-sm); cursor: pointer; }
.fit-groups input[type="checkbox"] { margin: 0; flex: none; }
.fit-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.fit-sep { width: 1px; align-self: stretch; background: var(--rule-2); margin: 0 2px; }
.fit-kv { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.fit-kv b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.global-agreement { background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--blue); padding: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); border-radius: var(--radius-xs); }
.global-agreement h3 { margin: 0 0 8px; font-size: var(--fs-md); }
.global-metrics { display: flex; flex-wrap: wrap; gap: 8px 24px; font-variant-numeric: tabular-nums; }
.global-metrics span { color: var(--ink-2); }
.global-metrics b { color: var(--ink); font-weight: 600; margin-left: 5px; }

/* Accordion blocks (<details class="acc">) */
.acc { margin: var(--sp-3) 0; }
.acc > summary { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; user-select: none; border-radius: var(--radius); }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::before { content: ''; flex: none; width: 0; height: 0; margin-right: 2px; border-left: 5px solid var(--ink-3); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transform: translateY(-1px); transition: transform .12s; }
.acc[open] > summary::before { transform: translateY(-1px) rotate(90deg); }
.acc > summary:hover { background: var(--hover); }
.acc > summary .acc-t { font-weight: 600; font-size: var(--fs-lg); color: var(--ink); }
.acc > summary .acc-s { color: var(--ink-3); font-size: var(--fs-sm); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc > summary .acc-s.warn { color: var(--warn); }
/* a question-mark help icon belongs at the right end of the title, on the line of the text rather than on its baseline;
   it is shown in the warning colour while what it explains cannot be used (a formula the program cannot read, a
   density no solid has) */
.acc > summary .acc-help { margin-left: auto; align-self: center; }
.acc > summary .acc-help.sv-warn { color: var(--warn); border-color: var(--warn); }
/* A closed block shows its title and nothing else: its question mark explains what is inside, so it
   appears with the block. A closed accordion is a heading; the icon is part of what it opens. */
.acc:not([open]) > summary .acc-help, .object-group:not([open]) > summary .acc-help { display: none; }
.acc[open] > summary { border-bottom: 1px solid var(--rule-2); border-radius: var(--radius) var(--radius) 0 0; }
.acc > .acc-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); min-width: 0; }
.acc.sub { margin: var(--sp-2) 0; background: var(--paper); }
.acc.sub > summary { padding: var(--sp-2) var(--sp-3); }
.acc.sub > summary .acc-t { font-size: var(--fs-md); }
.acc .results .block:first-child, .acc .acc-body > .block:first-of-type { margin-top: 8px; }
.acc .acc-body > .res-head + .block { margin-top: 12px; }
.solve { padding: 0 0 40px; }
.solve > .hint:first-child { margin: 0 0 10px; font-size: var(--fs-sm); }
.sv-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-height: var(--ctl-h-lg); }
.sv-row + .sv-row { margin-top: 6px; }
.sv-lbl { color: var(--ink-2); white-space: nowrap; }
.sv-row select { max-width: 260px; }
.sv-formula { width: 190px; }
.sv-z { width: 64px; }

.sv-int { margin-top: 6px; }
.sv-int p { margin: 4px 0; }
.sv-int .sub { color: var(--ink-3); font-size: var(--fs-sm); }
.sv-form { max-width: 820px; margin-top: 10px; grid-template-columns: minmax(170px, auto) minmax(0, 1fr); }
.sv-form input.num { max-width: 120px; }
.sv-form select { max-width: 220px; }
.sv-range { display: inline-flex; align-items: center; gap: 6px; }
.sv-form .sv-range input.num { width: 72px; }
.sv-actions { margin: var(--sp-4) 0 var(--sp-2); }
.sv-inline { color: var(--ink-2); margin-left: 10px; }
input.sv-short { width: 64px; }
.sv-prog { max-width: 520px; margin: 4px 0 10px; }
.sv-prog span { min-width: 200px; text-align: left; }
.sv-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 16px; margin: 0; font-variant-numeric: tabular-nums; }
.sv-dl dt { color: var(--ink-2); }
.sv-dl dd { margin: 0; }
.sv-cstat { margin-top: 4px; font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.5; }
.sv-cstat:empty { display: none; }
.sv-spark { display: block; width: 320px; height: 56px; margin: 10px 0 0; }
table.grid tr.best td { background: var(--blue-tint); }
table.grid tr.off td { color: var(--ink-3); }
table.sv-sites td { white-space: nowrap; }
table.sv-sites input.sv-el { width: 64px; min-width: 56px; text-align: left; font-weight: 600; }
table.sgt td { vertical-align: top; }
/* the set chips wrap: the selectors outrank the nowrap of result tables (.results table.grid td) */
table.sgt td.sgt-sets, .results table.grid td.sgt-sets { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; white-space: normal; }
button.sgt-set { padding: 1px 8px; font-size: var(--fs-sm); font-family: var(--font-code); }
.sgt-p { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sgt-p .bar { display: inline-block; width: 80px; height: 6px; margin-right: 8px; vertical-align: middle; background: var(--rule-2); position: relative; overflow: hidden; }
.sgt-p .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); }
.sv-st-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.sv-st-head:empty { display: none; }
.sv-st-head .sub { color: var(--ink-3); }
.sv-struct .wy-plot { height: min(560px, 62vh); background: var(--plot-bg); }
.sv-struct .wy-an { margin-top: 8px; }
.sv-struct .wy-plot-btns button { padding: 1px 8px; }
.sv-struct .wy-an table.wy-tab th { text-transform: none; letter-spacing: 0; font: 600 var(--fs-sm) var(--font-ui); color: var(--ink-2); }
.sv-struct .wy-an h3 { color: var(--blue); }
.cf-density { margin: var(--sp-4) 0; padding: var(--sp-4); }
.cf-density .buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.density-canvas { display: block; width: 100%; height: 440px; border-radius: var(--radius); cursor: grab; }
.density-canvas:active { cursor: grabbing; }

/* ---------- Datasets tab & busy guard ---------- */
.dataset-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--inset);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--chrome);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.fit-selection { margin: var(--sp-3) var(--inset); }
.dataset-card { margin: var(--sp-3) var(--inset); padding: var(--sp-4); }
.dataset-accordion { background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--rule); padding: 0; }
.dataset-editor[open] > summary, .phase-accordion[open] > summary { border-bottom: 0; padding-bottom: var(--sp-1); }
.dataset-editor > .acc-body, .phase-accordion > .acc-body { padding-top: var(--sp-1); }
.dataset-accordion > summary { padding-left: 0; padding-right: 0; }
.dataset-accordion > .acc-body { padding-left: 0; padding-right: 0; }
.dataset-card h1 { font-size: var(--fs-h); margin: 0 0 10px; }
.dataset-card .pblock h2 { font-size: var(--fs-md); font-weight: 600; margin: 0 0 var(--sp-2); }
.dataset-card .buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }
/* the running panel: one place, one look, one Stop for every calculation */
.busy-guard { position: fixed; top: 46px; left: 50%; transform: translateX(-50%); z-index: 50000; width: min(560px, calc(100vw - 32px)); cursor: wait; }
.busy-guard .busy-card { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--rule); border-left: 5px solid var(--blue); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-pop); }
.busy-main { display: flex; align-items: center; gap: 14px; }
.busy-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.busy-label { font-size: var(--fs-xl); line-height: 1.3; }
.busy-detail { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.busy-spin { flex: none; width: 18px; height: 18px; border: 2.5px solid var(--rule-2); border-top-color: var(--blue); border-radius: 50%; animation: busy-spin .9s linear infinite; }
@keyframes busy-spin { to { transform: rotate(360deg); } }
.busy-track { margin-top: var(--sp-3); border-radius: var(--radius-xs); }
.busy-track i { transition: width .2s; }
.busy-track.indet i { width: 30%; transition: none; animation: indet 1.1s linear infinite; }
.stop-btn { flex: none; font-size: var(--fs-lg); padding: 7px 14px; display: inline-flex; align-items: center; gap: 7px; }
.stop-btn kbd { font: 600 var(--fs-xs)/1 inherit; padding: 2px 4px; border: 1px solid rgba(255,255,255,.55); border-radius: var(--radius-xs); }
/* The busy cursor is the only !important besides [hidden]: wait over every control whatever its own cursor rule, pointer on Stop. */
body.busy, body.busy * { cursor: wait !important; }
body.busy .stop-btn, body.busy .stop-btn * { cursor: pointer !important; }

/* ---------- GSAS-II atomic constraints editor (Phases, Solve → Rietveld, dialog) ---------- */
.ac-list td { vertical-align: middle; }
.ac-rel { line-height: 2; }
.ac-rel .ac-term { display: inline-block; margin-right: 18px; white-space: nowrap; }
.ac-rel .ac-term code { font-size: var(--fs-sm); }
table.grid.ac-list input.ac-m { width: 64px; min-width: 0; max-width: 64px; padding: 2px 5px; text-align: right; }
.ac-add { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--rule); border-radius: var(--radius-sm); }
.ac-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ac-add-row label { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; gap: 6px; color: var(--ink-2); }
.ac-add-row input.num { flex: 0 0 72px; width: 72px; min-width: 0; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.ac-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--rule-2); border-radius: var(--radius-pill); cursor: pointer; }
.ac-chip input[type=checkbox] { flex: none; }
.ac-chip small { color: var(--ink-3); }
.ac-chip.off { opacity: .45; cursor: not-allowed; }
.ac-chip .ac-ord { font-size: var(--fs-xs); color: var(--blue); }
.ac-err { margin: 6px 0 0; }
.ac-err:empty { display: none; }
.ac-help { margin-top: 8px; }
.ac-help summary { cursor: pointer; color: var(--ink-2); font-size: var(--fs-sm); }
/* Restraints editor: rules, weights, geometry table and the molecule guide */
.rs-main, .rs-guide-body { display: grid; gap: var(--sp-2); }
.rs-rules { display: grid; gap: var(--sp-1); color: var(--ink-2); }
.rs-rules textarea, .rs-guide-body textarea { width: 100%; }
/* a rules box with its Helper button on the right (Restraints, Wyckoff distance constraints) */
.text-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--sp-2); }
.text-action textarea { width: 100%; }
.rs-set { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.rs-set label { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); }
.rs-set input.num { width: 72px; flex: none; }
.rs-set input[type=checkbox] { flex: none; }
.rs-neighbours { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rs-neighbours label { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rs-shape-help { margin: 0; }
.rs-helper-panel { padding-top: var(--sp-3); }
.rs-collected { margin-top: var(--sp-4); }
.rs-err { margin: 0; }
.rs-err:empty { display: none; }
.rs-err.warn { color: var(--warn); }
.rs-geom td.n { text-align: right; }
.ac-phase + .ac-phase { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--rule-2); }
.ac-phase h3 { font-size: var(--fs-md); margin: 0 0 6px; }
.ac-phase h3 .sub { color: var(--ink-3); font-weight: 400; font-size: var(--fs-sm); margin-left: 6px; }
/* constrained parameters in Parameters: ≡ dependent, H held, • independent, Σ equation term */
.prow.ac-dependent .pv, .prow.ac-held .pv { font-style: italic; color: var(--ink-3); }
.prow.ac-dependent .pn::after, .prow.ac-held .pn::after, .prow.ac-independent .pn::after, .prow.ac-term .pn::after { margin-left: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--blue); }
.prow.ac-dependent .pn::after { content: '≡'; }
.prow.ac-held .pn::after { content: 'H'; color: var(--warn); }
.prow.ac-independent .pn::after { content: '•'; }
.prow.ac-term .pn::after { content: 'Σ'; }
[data-res-part] .block { max-width: none; margin-top: 14px; }
[data-res-part] .block h2 { color: var(--ink); }
[data-res-part] .block h2 .sub { color: var(--ink-3); font-weight: 400; font-size: var(--fs-sm); margin-left: 6px; }
[data-res-part] .res-head { position: static; }

/* ---------- the space-group browser (js/spacegroup_ui.js) ---------- */
.sg-modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: var(--backdrop); backdrop-filter: blur(2px); }
.sg-modal-overlay.open { display: flex; }
.sg-modal { display: flex; flex-direction: column; width: min(880px, 95vw); max-height: 90vh; overflow: hidden; }
.sg-modal-body { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 0; flex: 1; }
.sg-modal-left { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); min-width: 0; border-right: 1px solid var(--rule); overflow: hidden; }
.sg-modal-right { padding: var(--sp-4); overflow-y: auto; min-width: 0; }
.sg-filter-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sg-filter-label { width: 100%; margin: 4px 0 -2px; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 600; }
.sg-chip {
  min-height: 0;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--control-ink);
  font: var(--fs-sm) var(--font-code);
  cursor: pointer;
  user-select: none;
}
.sg-chip:hover:not(.disabled) { background: var(--blue-tint); border-color: var(--blue); }
.sg-chip.active { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.sg-chip.disabled { opacity: 0.35; cursor: not-allowed; }
.sg-search-row { display: grid; grid-template-columns: 1fr 1.7fr; gap: 8px; }
.sg-search-row input { height: 28px; }
.sg-list-wrap { flex: 1; min-height: 220px; overflow-y: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); }
.sg-list-item { display: grid; grid-template-columns: 48px 1fr 110px; gap: var(--sp-2); align-items: baseline; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-md); cursor: pointer; border-bottom: 1px solid var(--rule-2); }
.sg-list-item:last-child { border-bottom: 0; }
.sg-list-item:hover { background: var(--blue-tint); }
.sg-list-item.selected { background: var(--selection); color: var(--selection-ink); box-shadow: var(--mark-bar); }
.sg-list-item .num, .sg-list-item .sys { color: var(--ink-3); }
.sg-list-item .sys { font-size: var(--fs-sm); text-align: right; }
.sg-list-item.selected .num, .sg-list-item.selected .sys { color: var(--selection-ink); }
.sg-list-empty { padding: 24px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }
.sg-explain { font-size: var(--fs-md); line-height: 1.5; }
.sg-explain h3 { margin: 0 0 10px; font-size: var(--fs-md); color: var(--blue); }
.sg-explain-grid { display: grid; grid-template-columns: 110px 1fr; gap: 4px 14px; font-size: var(--fs-sm); }
.sg-explain-grid dt { color: var(--ink-2); padding-top: 1px; }
.sg-explain-grid dd { margin: 0; }
.sg-explain-cond-table { margin-top: 8px; width: 100%; border-collapse: collapse; font: var(--fs-sm) var(--font-code); }
.sg-explain-cond-table th, .sg-explain-cond-table td { text-align: left; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--rule-2); }
.sg-explain-cond-table th { color: var(--ink-2); font: 600 var(--fs-sm) var(--font-ui); }
.sg-explain-empty, .sg-explain-warning { padding: var(--sp-3); border-radius: var(--radius-xs); font-size: var(--fs-sm); line-height: 1.45; border: 1px solid var(--rule); }
.sg-explain-empty { background: var(--paper); color: var(--ink-3); }
.sg-explain-warning { background: var(--amber-tint); color: var(--warn); border-color: var(--amber); }
@media (max-width: 720px) {
  .sg-modal-body { grid-template-columns: 1fr; }
  .sg-modal-left { border-right: 0; border-bottom: 1px solid var(--rule); }
}

/* ---------- object workspace, the two panels (command and results), history ---------- */
.plot-selection { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--inset); border-bottom: 1px solid var(--rule-2); background: var(--panel); }
.plot-selection label, .scope-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); }
.dataset-scope { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2); }
.dataset-scope select, .plot-selection select { max-width: 240px; }
.fit-selection input[type=search] { margin: var(--sp-2) var(--sp-3); min-width: 0; width: calc(100% - 2 * var(--sp-3)); }
.dataset-parameters { display: block; }
.dataset-parameters .param-list { overflow: auto; max-height: none; padding: 0; }
.dataset-parameters .prow, .dataset-parameters .anchor-head, .dataset-parameters .zone-row, .dataset-parameters .zone-head { margin-inline: 0; }
.dataset-parameters .prow, .dataset-parameters .param-list.global .prow { grid-template-columns: minmax(56px,1.1fr) minmax(64px,1.4fr) 34px minmax(40px,.9fr) var(--ctl-h-sm) 18px; gap: var(--sp-1) var(--sp-2); }
.dataset-parameters .pv[readonly] { border-color: transparent; background: var(--paper); cursor: default; }
.dataset-parameters .prow.anchor-row, .dataset-parameters .anchor-head { grid-template-columns: minmax(44px,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.6fr) var(--ctl-h-sm) 18px; }
.dataset-parameters .param-list.global .prow.anchor-row, .dataset-parameters .param-list.global .anchor-head {
  grid-template-columns: minmax(44px,.8fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.6fr) var(--ctl-h-sm) var(--ctl-h-sm) 18px;
}
.cheb-points { margin-top: var(--sp-2); }
.cheb-point-row, .cheb-point-head { display: grid; grid-template-columns: minmax(44px,.7fr) minmax(0,1fr) minmax(0,1fr) var(--ctl-h-sm) var(--ctl-h-sm); gap: var(--sp-1); align-items: center; padding-block: var(--sp-1); }
.cheb-point-head { font-size: var(--fs-xs); color: var(--ink-3); }
.cheb-point-row input { width: 100%; min-width: 0; }
.cheb-point-row input[type=checkbox] { width: auto; justify-self: center; }
.dataset-tabs { display: flex; gap: var(--sp-1); overflow-x: auto; padding: 0 0 var(--sp-2); border-bottom: 1px solid var(--rule); margin-bottom: var(--sp-3); }
.dataset-tabs button {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  border-bottom: 3px solid var(--dataset-color);
  background: var(--panel);
}
.dataset-tabs button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dataset-tabs button[aria-selected="true"] { background: var(--blue-tint); font-weight: 600; box-shadow: inset 0 0 0 1px var(--dataset-color); }
.dataset-tabs .sw { background: var(--dataset-color); flex: none; }
.ds[data-id] { border-left: 3px solid var(--dataset-color); }
.history-pane.on { display: block; overflow: auto; padding: var(--sp-4) var(--inset); background: var(--paper); }
.history-run { margin: var(--sp-3) 0; padding: var(--sp-4); }
.history-run.kept { border-left: 4px solid var(--blue); }
.kept-badge { display: inline-block; padding: 2px 7px; border: 1px solid var(--blue); border-radius: var(--radius-sm); color: var(--blue); font-size: var(--fs-sm); font-weight: 600; }
.history-picker option[data-kept] { font-weight: 600; }
.history-run > summary { display: flex; flex-wrap: wrap; gap: 10px 18px; cursor: pointer; align-items: center; }
.history-run > summary time { color: var(--ink-3); }
.history-run .buttons { margin-top: 12px; }
.convert-preview { margin-top: 10px; max-height: 46vh; overflow: auto; border-top: 1px solid var(--rule-2); padding-top: 8px; }
/* the standard setting of each space group in setting lists; the closed list follows its choice */
option.sg-std, select:has( > option.sg-std:checked) { font-weight: 700; }
select:has( > option.sg-std:checked) option:not(.sg-std) { font-weight: 400; }
.convert-preview .sv-dl { margin: 6px 0; }
.fit-list { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-md); line-height: 1.45; max-height: 220px; overflow: auto; }
.fit-list li { margin: 0; }
.load-error { margin: 0; padding: 12px 16px; background: var(--panel); color: var(--ink); border-bottom: 3px solid var(--err); font-weight: 600; }
.history-detail { margin-top: 14px; }
.history-detail h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.history-detail .object-group .object-group { margin-left: 14px; }
.history-log { max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: var(--fs-sm); margin: 6px 0 0; }
.object-group { padding: 10px 0; border-top: 1px solid var(--rule-2); }
.object-group > summary { cursor: pointer; font-weight: 600; }
/* a question-mark help icon at the right end of an object-group title (Constraints, Restraints, Links, sharing) */
.object-group > summary .acc-help { float: right; margin-left: var(--sp-2); }
.phase-members { display: flex; gap: 6px; flex-wrap: wrap; }
.result-state { padding: var(--sp-3) var(--inset); }
.ac-host { margin-top: var(--sp-2); }
.history-pane button { cursor: pointer; }
.phase-controls fieldset { border: 0; border-top: 1px solid var(--rule); padding: 10px 0; }
.phase-controls .chk { display: inline-flex; gap: 6px; margin: 6px 16px 6px 0; }
/* Independent command and results panels. */
.work.dual-panels { --side-w: 46%; grid-template-columns: var(--side-w) 14px minmax(0,1fr); }
.dual-panels .command-panel { order: 0; overflow: hidden; border-right: 0; min-width: 0; }
.dual-panels .results-panel { order: 2; border-right: 0; min-width: 0; }
.work.dual-panels.panels-swapped { grid-template-columns: minmax(0,1fr) 14px var(--side-w); }
.panels-swapped .command-panel { order: 2; border-right: 0; border-left: 0; }
.panels-swapped .results-panel { order: 0; }
.panel-tabs { flex: none; background: var(--chrome); border-bottom: 1px solid var(--rule); overflow-x: auto; min-height: var(--tab-h); }
.panel-tabs button { padding: 0 var(--sp-3); min-height: var(--tab-h); font-size: var(--fs-md); }
.command-body { display: flex; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.command-body > .pane { min-width: 0; }
.command-body > .pane.on { display: block; overflow: auto; background: var(--paper); }
.command-panel .method-pane, .command-panel .structure-pane { padding: var(--sp-4) var(--inset); }
.command-panel .solve-sticky { position: static; margin: calc(-1 * var(--sp-4)) calc(-1 * var(--inset)) var(--sp-3); }
.command-panel .phase-cols { grid-template-columns: 1fr; }
.dual-panels > .side-grip {
  order: 1;
  position: relative;
  inset: auto;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chrome);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.dual-panels > .side-grip::after { display: none; }
.grip-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 42px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink-3);
  font-size: var(--fs-xxl);
  line-height: 1;
  background: var(--panel);
}
.side-grip:hover .grip-handle, .side-grip:focus-visible .grip-handle, body.resizing .grip-handle {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-tint);
}
.fit-selection .ds-list { max-height: 240px; min-height: 0; }
.fit-results-pane.on { display: block; overflow: auto; background: var(--paper); }
.result-runbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; padding: var(--sp-3) var(--inset); border-bottom: 1px solid var(--rule); background: var(--chrome); }
.result-runbar label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 150px; }
.result-runbar select { width: 100%; min-width: 0; }
.fit-results-pane .result-state { margin: 0; }
.fit-results-pane .calc-layout { padding: 0 var(--inset) var(--sp-4); }
.history-picker { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.history-picker select { flex: 1; min-width: 0; }
.structure-results-pane.on { display: block; overflow: auto; }
.structure-result-tabs { position: sticky; top: 0; z-index: 3; background: var(--chrome); display: flex; flex-wrap: nowrap; gap: var(--sp-1); padding: 0 var(--inset); border-bottom: 1px solid var(--rule); }
.structure-result-body { padding: var(--sp-4) var(--inset); }

/* ---------- narrow windows ---------- */
@media (max-width: 1240px) {
  .top { gap: 12px; }
  .brand .mark { font-size: var(--fs-xl); }
  .settings-btn span, .top .hbtn span { display: none; }
  .tabs button { padding: 0 11px; }
}
@media (max-width: 920px) {
  html, body { height: auto; overflow: auto; }
  body { grid-template-rows: auto auto auto; }
  .top { padding: 0 10px; flex-wrap: wrap; gap: 4px 16px; }
  .top .menus { margin-left: 0; }
  .tabs { order: 5; flex: 1 1 100%; border-top: 1px solid var(--rule-2); }
  .tabs button { min-height: 40px; }
  .work { grid-template-columns: minmax(0, 1fr); }
  .stage { height: 72vh; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ds-list { max-height: 50vh; }
  .side-grip { display: none; }
  .status { grid-template-columns: auto minmax(0, 1fr); }
  .status .msg, .status .progress { grid-column: 1 / -1; width: auto; }
  .sv-form { grid-template-columns: minmax(0, 1fr); }
  .solve-actions button.primary { margin-left: 0; }
  .work.dual-panels, .work.dual-panels.panels-swapped { grid-template-columns: minmax(0,1fr); }
  .dual-panels > .side-grip { display: none; }
  .dual-panels .command-panel { height: 75vh; border-bottom: 1px solid var(--rule); }
  .dual-panels .results-panel { height: 80vh; }
  .dual-panels .panel-tabs { flex: 0 0 auto; order: 0; border-top: 0; }
}
@media (max-width: 560px) {
  .ptools .seg button { padding: 5px 9px; }
  .dataset-toolbar, .solve-actions { padding-left: 12px; padding-right: 12px; }
}

/* ---------- accessibility & print ---------- */
@media (prefers-reduced-motion: reduce) {
  .theme-switch .track, .theme-switch .track i, .tabs button.running::after, .side-grip::after, .pg-tog::before,
  dialog[open], .menu-pop, .skip-link, .tabs button::before, :where(button) { animation: none; transition: none; }
  :where(button:enabled:active) { transform: none; }
  .progress.indet i { animation: none; left: 0; width: 100%; opacity: 0.5; }
  .busy-spin, .busy-track.indet i { animation: none; }
  .busy-track.indet i { width: 100%; opacity: .5; }
}
@media (forced-colors: active) {
  :where(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; }
  .calculation-tabs button[aria-checked="true"], .calculation-tabs button[aria-selected="true"], .structure-result-tabs [aria-selected="true"] { border-bottom: 2px solid Highlight; }
  .tabs button[aria-selected="true"]::before { background: Highlight; }
  .ds.on { outline: 2px solid Highlight; outline-offset: -2px; }
  .plot-host { border-color: CanvasText; }
}
@media print { .top, .status, .side, .side-grip, .ptools { display: none; } html, body { overflow: visible; height: auto; } }