/* styles.css
   Layout: fixed top bar, blue icon rail on the left, navy breadcrumb band, then one
   scrolling content column. Spacing uses a 4px scale; every gap comes from a token.
   Light theme only, to match the product screens this prototype is based on. */

/* ---------- 1. Tokens ---------- */
:root {
  --font: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 28px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --bg: #ffffff;
  --wash: #f5f7fa;
  --hover: #eef3f9;
  --fg: #16202e;
  --muted: #566376;
  --line: #d5dae2;
  --line-strong: #aab3c0;
  --control: #7c8798;

  --navy: #1f2e5a;
  --rail-a: #2a66a6;
  --rail-b: #4c9fe0;
  --brand: #3bb8b0;

  --link: #225f9f;
  --link-on-navy: #7cc8f3;
  --primary: #2567a8;
  --primary-hover: #1d5690;
  --primary-fg: #ffffff;

  --info-bg: #e5eefa;
  --ok: #256f2a;
  --ok-bg: #e3f2d9;
  --bad: #b42a2a;
  --bad-hover: #962020;
  --bad-bg: #fbe6e6;
  --neutral-bg: #eceff3;
  --disabled: #9aa3af;
  --disabled-bg: #f1f3f6;

  --overlay: rgba(22, 32, 46, 0.5);
  --toast-bg: #16202e;
  --toast-fg: #ffffff;
  --shadow: 0 8px 28px rgba(22, 32, 46, 0.18);

  --radius: 4px;
  --radius-lg: 8px;
  --control-h: 36px;
  --field-h: 40px;
  --rail: 56px;
  --content-max: 1360px;
  --panel-w: 360px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--text-md);
  line-height: 1.5;
}
body.has-modal { overflow: hidden; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl, dd, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
h1 { font-size: var(--text-2xl); line-height: 1.2; font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; }
h2 { font-size: var(--text-xl); line-height: 1.3; font-weight: 700; }
h3, .h3 { font-size: var(--text-lg); line-height: 1.4; font-weight: 700; }
[tabindex="-1"]:focus { outline: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, button[aria-disabled="true"] { cursor: not-allowed; }
a { color: var(--link); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius); }
.icon { display: block; flex: none; }
.mono { font-family: var(--mono); font-size: var(--text-sm); }
.muted { color: var(--muted); }
.grow { flex: 1 1 auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- 3. App shell ---------- */
.app {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100%;
}
.top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.skiplink {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 40;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-fg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-4)));
}
.skiplink:focus { transform: none; }
.top__logo { width: var(--rail); display: flex; justify-content: center; color: var(--brand); flex: none; }
.top__search { position: relative; flex: 1 1 200px; max-width: 520px; min-width: 0; }
.top__icons { margin-left: auto; display: flex; gap: var(--space-1); }

.rail {
  background: linear-gradient(180deg, var(--rail-a), var(--rail-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-4);
}
.rail__btn { background: none; border: 0; color: #ffffff; padding: var(--space-2); border-radius: var(--radius); display: inline-flex; }
.rail__btn:hover { background: rgba(255, 255, 255, 0.18); }
.rail__btn:focus-visible { outline-color: #ffffff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.crumbsbar {
  background: var(--navy);
  color: #ffffff;
  padding: var(--space-2) var(--space-6);
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}
.crumbs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}
.navbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
  background: transparent;
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.navbtn:hover, .navbtn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); }
.navbtn:focus-visible { outline-color: #ffffff; }
.workspace { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; }
.crumbs a { color: var(--link-on-navy); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs a:focus-visible { outline-color: #ffffff; }
.crumbs__sep { display: inline-flex; opacity: 0.7; }
.content {
  flex: 1 1 0;
  container: content / inline-size;
  max-width: var(--content-max);
  padding: var(--space-5) var(--space-6) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

/* ---------- 4. Page header ---------- */
.pagehead { display: flex; flex-direction: column; gap: var(--space-3); }
.backlink {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 0;
  padding: 0;
  color: var(--link);
  font-weight: 600;
}
.backlink:hover { text-decoration: underline; }
.pagehead__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.pagehead__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.pagehead__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.pagehead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--muted); }
.pagehead__meta > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.lead { max-width: 65ch; color: var(--muted); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--link);
  font-weight: 600;
  white-space: nowrap;
}
.btn:hover { background: var(--info-bg); }
.btn--primary { background: var(--primary); color: var(--primary-fg); }
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--danger { background: var(--bad); border-color: var(--bad); color: #ffffff; }
.btn--danger:hover { background: var(--bad-hover); border-color: var(--bad-hover); }
.btn--quiet { border-color: transparent; }
.btn:disabled, .btn:disabled:hover,
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { background: var(--disabled-bg); border-color: var(--line); color: var(--disabled); }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--link);
}
.iconbtn:hover { background: var(--info-bg); }
.iconbtn--plain { color: var(--fg); }
.iconbtn--plain:hover { background: var(--wash); }
.iconbtn--danger:hover { background: var(--bad-bg); color: var(--bad); }
.iconbtn:disabled, .iconbtn:disabled:hover,
.iconbtn[aria-disabled="true"], .iconbtn[aria-disabled="true"]:hover { color: var(--disabled); background: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--link); font-weight: 600; text-align: left; }
.linkbtn:hover { text-decoration: underline; }

/* ---------- 6. Badges and pills ---------- */
.badge, .pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  padding: 5px var(--space-2);
}
.badge { border-radius: var(--radius); }
.pill { border-radius: 999px; }
.tone-info { background: var(--info-bg); color: var(--link); }
.tone-ok { background: var(--ok-bg); color: var(--ok); }
.tone-bad { background: var(--bad-bg); color: var(--bad); }
.tone-neutral { background: var(--neutral-bg); color: var(--muted); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  color: var(--fg);
  font-weight: 500;
}
.chip .icon { color: var(--primary); }

/* ---------- 7. Cards and definition lists ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); }
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.card__head { display: flex; align-items: center; gap: var(--space-3); }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-5); }
.dl dt { color: var(--muted); }
.dl dd { overflow-wrap: anywhere; min-width: 0; }
.dl dd.dl__inline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }

/* ---------- 8. Sections, toolbars and filters ---------- */
.section { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.section__titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.section__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.toolbar__label { font-weight: 600; }
.toolbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.toolbar__search { display: flex; gap: var(--space-2); flex: 1 1 260px; max-width: 460px; margin-left: auto; min-width: 0; }
.inline-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-sm); }

.control {
  height: var(--control-h);
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 0 var(--space-3);
  max-width: 100%;
  min-width: 0;
}
.control:hover { border-color: var(--fg); }
select.control, select.input {
  appearance: none;
  padding-right: var(--space-6);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2316202e' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
}
.control.is-active { border-color: var(--primary); background-color: var(--info-bg); font-weight: 600; }
.searchbox { position: relative; flex: 1 1 auto; min-width: 0; }
.searchbox .icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); }
.searchbox .control { width: 100%; padding-left: 36px; }
.control::placeholder, .input::placeholder { color: var(--muted); opacity: 1; }

.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tab {
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--control);
  border-radius: 999px;
  background: var(--bg);
}
.tab:hover { background: var(--hover); }
.tab[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: #ffffff; font-weight: 600; }

/* ---------- 9. Tables ---------- */
/* position: relative keeps visually hidden header text inside the scroll box, so it can't widen the page. */
.tablewrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.tablewrap:focus-visible { border-radius: var(--radius-lg); }
.table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.table th {
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
  background: var(--wash);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
  vertical-align: middle;
}
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child > td { border-bottom: 0; }
.table tbody tr.row:hover > td { background: var(--hover); }
.table .cell-tight { width: 1%; padding-right: 0; white-space: nowrap; }
.table .cell-nowrap { white-space: nowrap; }
.table .cell-empty { text-align: center; color: var(--muted); padding: var(--space-6) var(--space-4); }
.table--rules { min-width: 1040px; }
.table--rules th, .table--rules td { padding-inline: var(--space-3); }
.table--rules th { white-space: normal; }
.table--rules th:nth-child(2) { min-width: 220px; }
.table--rules td:nth-child(6) { white-space: nowrap; }
.table--rules .sortbtn { text-align: left; }
.table--jobs { min-width: 920px; }
.table--mine { min-width: 800px; }
.table--mine th, .table--mine td { padding-inline: var(--space-3); }
.table--mine th:first-child { min-width: 230px; }
.table--hist { min-width: 720px; }
.table--samples { min-width: 380px; }

.sortbtn { display: inline-flex; align-items: center; gap: var(--space-1); background: none; border: 0; padding: 0; font-weight: 600; }
.sortbtn .icon { color: var(--muted); }
.sortbtn:hover .icon, th[aria-sort="ascending"] .icon, th[aria-sort="descending"] .icon { color: var(--link); }

.stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stack__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-weight: 600; }
.stack__sub { color: var(--muted); font-size: var(--text-sm); }
.idcell { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.autoflag { display: inline-flex; color: var(--link); background: var(--info-bg); border-radius: var(--radius); padding: 3px; }
.rowactions { display: flex; gap: var(--space-1); }
.result-fail { color: var(--bad); }
.result-pass { color: var(--ok); }

tr.subrow > td { background: var(--wash); padding: var(--space-4); }
.subpanel { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.subpanel .tablewrap { background: var(--bg); }
.table tbody tr.row.is-new > td { background: var(--info-bg); }
.emptybox--fill { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); }
.emptybox--fill strong { color: var(--fg); }
.emptybox { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--muted); text-align: center; padding: var(--space-5) var(--space-4); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); color: var(--muted); font-size: var(--text-sm); }
.pager__per { display: inline-flex; align-items: center; gap: var(--space-2); }
.pager__per .control { height: 32px; color: var(--fg); }
.pager__pages { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); }
.pagebtn {
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--fg);
}
.pagebtn:hover:not([aria-disabled="true"]) { background: var(--info-bg); }
.pagebtn[aria-current="page"] { background: var(--primary); color: var(--primary-fg); font-weight: 600; }
.pagebtn[aria-disabled="true"] { color: var(--disabled); }

/* ---------- 10. Forms ---------- */
.formlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: var(--space-5); align-items: start; }
.formcard { border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; min-width: 0; }
.formsection { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); border-bottom: 1px solid var(--line); }
.formsection__head { display: flex; flex-direction: column; gap: var(--space-1); }
.formsection__head p { color: var(--muted); font-size: var(--text-sm); }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4) var(--space-5); align-items: start; }
.formgrid--nested { grid-column: 1 / -1; }
.formactions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-5); }
.formnote { color: var(--muted); font-size: var(--text-sm); }

.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__labelrow { display: flex; align-items: baseline; gap: var(--space-2); }
.field__label { font-weight: 600; }
.field__opt { font-weight: 400; color: var(--muted); }
.field__count { margin-left: auto; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.field__hint { color: var(--muted); font-size: var(--text-sm); }
.field__note:empty { display: none; }
.field__err { display: flex; align-items: flex-start; gap: var(--space-1); color: var(--bad); font-size: var(--text-sm); font-weight: 600; }
.field__err .icon { margin-top: 2px; }

.input {
  width: 100%;
  height: var(--field-h);
  border: 1px solid var(--control);
  border-radius: var(--radius);
  background-color: var(--bg);
  padding: 0 var(--space-3);
  min-width: 0;
}
textarea.input { height: auto; min-height: 72px; padding: var(--space-2) var(--space-3); resize: vertical; line-height: 1.5; }
.input:hover { border-color: var(--fg); }
.input:focus-visible { outline-offset: 0; border-color: var(--primary); }
.input:disabled { background-color: var(--disabled-bg); border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.is-invalid .input { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.affix { position: relative; }
.affix .input { padding-right: var(--space-6); }
.affix__unit { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }

.segmented { display: inline-flex; border: 1px solid var(--control); border-radius: var(--radius); overflow: hidden; align-self: flex-start; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: flex; align-items: center; height: calc(var(--field-h) - 2px); padding: 0 var(--space-4); }
.segmented label + label span { border-left: 1px solid var(--control); }
.segmented input:checked + span { background: var(--info-bg); color: var(--link); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: -2px; }
.check { display: flex; align-items: flex-start; gap: var(--space-2); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); flex: none; }
.check__text { display: flex; flex-direction: column; gap: 2px; }

.summary { position: sticky; top: var(--space-4); background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.summary__sentence { font-size: var(--text-lg); line-height: 1.5; }
.summary__sentence b { font-weight: 600; }

/* ---------- 11. Modal ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal {
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 560px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.modal--wide { max-width: 760px; }
.modal__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.modal__head h2 { min-width: 0; overflow-wrap: anywhere; }
.modal__head .iconbtn { margin-left: auto; }
.modal__body { padding: var(--space-5); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-5); min-height: 0; }
.modal__body .formsection { padding: 0; border: 0; }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }

/* ---------- 12. Dataset preview panel ----------
   Slides over the page by default. On wide screens it docks beside the pages that
   have room for it (dataset details, add rule), and beside every page at 1760px+. */
.dspanel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  width: min(var(--panel-w), 100%);
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.is-panel-open .dspanel { display: block; min-width: 0; max-width: 100%; }
.dspanel__body > * { min-width: 0; max-width: 100%; flex: none; }
.dspanel__body {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-5);
  padding-top: calc(var(--space-5) + env(safe-area-inset-top, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.panelscrim { display: none; position: fixed; inset: 0; z-index: 14; background: var(--overlay); }
.is-panel-open .panelscrim { display: block; }
.dspanel__head { display: flex; align-items: flex-start; gap: var(--space-3); }
.dspanel__head .iconbtn { margin-left: auto; }
.dspanel__title { font-size: var(--text-lg); overflow-wrap: anywhere; }
.dspanel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.dspanel .dl { grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); }
.eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.ellist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ellist__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.ellist__item:last-child { border-bottom: 0; }
.ellist__item.is-selected { background: var(--info-bg); }
.ellist__main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.ellist__name { font-weight: 600; overflow-wrap: anywhere; }
.ellist__count, .ellist__sample { color: var(--muted); font-size: var(--text-sm); }
.ellist__count { text-align: right; white-space: nowrap; }
.ellist__sample { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ellist__item .linkbtn { font-size: var(--text-sm); justify-self: end; }
.table--records th, .table--records td { padding: var(--space-2) var(--space-3); white-space: nowrap; }
.nullval { color: var(--bad); font-style: italic; }
@media (min-width: 1100px) {
  .workspace--dock .dspanel { position: static; flex: 0 0 var(--panel-w); width: auto; box-shadow: none; z-index: auto; }
  .workspace--dock .dspanel__body { position: sticky; top: 0; height: auto; max-height: 100vh; max-height: 100dvh; padding-top: var(--space-5); }
  .workspace--dock .panelscrim { display: none; }
}
@media (min-width: 1760px) {
  .dspanel { position: static; flex: 0 0 var(--panel-w); width: auto; box-shadow: none; z-index: auto; }
  .dspanel__body { position: sticky; top: 0; height: auto; max-height: 100vh; max-height: 100dvh; padding-top: var(--space-5); }
  .is-panel-open .panelscrim { display: none; }
}

/* ---------- 12b. Summary strip ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.stat { background: var(--bg); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.stat__label { color: var(--muted); font-size: var(--text-sm); }
.stat__value { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
@container content (max-width: 720px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 13. Toast and footer ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: calc(100% - 2 * var(--space-4));
  background: var(--toast-bg);
  color: var(--toast-fg);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.toast__close { background: none; border: 0; color: inherit; padding: var(--space-1); border-radius: var(--radius); display: inline-flex; opacity: 0.8; }
.toast__close:hover { opacity: 1; }
.toast__close:focus-visible { outline-color: #ffffff; }
.protonote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-4); color: var(--muted); font-size: var(--text-sm); }

/* ---------- 14. Responsive and motion ---------- */
@container content (max-width: 900px) {
  .formlayout { grid-template-columns: minmax(0, 1fr); }
  .summary { position: static; order: -1; }
}
@media (max-width: 640px) {
  :root { --rail: 44px; --text-2xl: 22px; }
  .crumbsbar { padding-inline: var(--space-4); }
  .content { padding: var(--space-4) var(--space-4) var(--space-6); gap: var(--space-5); }
  .top__icons .is-optional { display: none; }
  .pagehead__actions, .section__actions { margin-left: 0; }
  .toolbar__search { margin-left: 0; max-width: none; flex-basis: 100%; }
  .pager__pages { margin-left: 0; }
  .dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .dl dd { margin-bottom: var(--space-2); }
  .card, .formsection { padding: var(--space-4); }
}
/* Windows high contrast drops backgrounds and shadows, so selected states and overlay edges need system colors. */
@media (forced-colors: active) {
  .tab[aria-pressed="true"], .pagebtn[aria-current="page"], .segmented input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .tab[aria-pressed="true"]:focus-visible, .pagebtn[aria-current="page"]:focus-visible { outline-color: CanvasText; }
  .segmented input:checked:focus-visible + span { outline-color: HighlightText; }
  .btn[aria-disabled="true"], .iconbtn[aria-disabled="true"], .pagebtn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  .modal, .toast, .skiplink { border: 1px solid CanvasText; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .spin { animation: spin 1s linear infinite; }
}