/* ==========================================================================
   PD Discovery — the design system's app components, as CSS.

   `PD Discovery.dc.html` in the Claude Design project composes React
   components (Table, FilterBar, Banner, Callout, EmptyState, DescriptionList,
   AuditLog, Drawer, Input, Select) whose styling lives in inline `style`
   objects. This dashboard is Jinja + HTMX, not React, so each of those is
   translated here into one class — same tokens, same measurements, same
   structure — rather than re-derived by eye. Where a number below looks
   arbitrary it came from the component source; keep it that way, and re-read
   the component rather than nudging a value when something looks off.

   Loaded after shell.css, which owns the shell chrome and the Health page.
   ========================================================================== */

/* ==========================  Small type helpers  ========================= */
.ds-eyebrow {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.ds-mono { font-family: var(--font-mono); }
.ds-num { font-variant-numeric: tabular-nums; }
.ds-muted { color: var(--text-muted); }
.ds-secondary { color: var(--text-secondary); }
.ds-sm { font-size: var(--app-text-sm); }
.ds-xs { font-size: var(--app-text-xs); }
.ds-strong { font-weight: var(--fw-semibold); }
.ds-nowrap { white-space: nowrap; }
.ds-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Icons are inlined as <svg> so they inherit currentColor (see icons.py). */
.ds-icon { width: 18px; height: 18px; flex: none; }
.ds-icon--13 { width: 13px; height: 13px; }
.ds-icon--16 { width: 16px; height: 16px; }
.ds-icon--20 { width: 20px; height: 20px; }
.ds-icon--24 { width: 24px; height: 24px; }
.ds-icon--28 { width: 28px; height: 28px; }

/* ==========================  Page header extras  ========================= */
.ds-crumb {
  display: inline-block;
  margin-bottom: 8px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--app-text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-accent);
  cursor: pointer;
  text-decoration: none;
}
.ds-crumb:hover { text-decoration: underline; }

/* ==========================  Layout grids  =============================== */
/* The design's three recurring column splits, named for what they hold rather
   than for their ratio, so a template reads as intent. */
.ds-grid-detail {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.ds-grid-halves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.ds-grid-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}
.ds-grid-rail--narrow { grid-template-columns: minmax(0, 1fr) 300px; }
.ds-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ds-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-actions--end { justify-content: flex-end; }
.ds-scroll-x { overflow-x: auto; }

/* ==========================  Chips  ===================================== */
/* The `chip()` helper in the design file: 11px semibold, pill, tinted. */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  background: var(--warm-200);
  color: var(--warm-600);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.ds-chip--ok      { background: var(--land-t1);   color: var(--warm-black); }
.ds-chip--warn    { background: var(--sand-t1);   color: var(--warm-black); }
.ds-chip--bad     { background: var(--soft-peach); color: var(--ember-s2); }
.ds-chip--ember   { background: var(--soft-peach); color: var(--ember-s1); }
.ds-chip--strong  { background: var(--ember-s1);  color: var(--white); }

/* The register's score pill: ember tint at or above the shortlist threshold,
   neutral below it, so the eye finds the shortlist without reading numbers. */
.ds-score {
  font-size: 12px;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--warm-200);
  color: var(--warm-600);
  white-space: nowrap;
}
.ds-score--strong { background: var(--soft-peach); color: var(--ember-s1); }
.ds-score--none { background: transparent; color: var(--text-muted); }

/* ==========================  Table  ===================================== */
/* components/data/Table.jsx. The wrapper owns the border and the radius; the
   table itself is borderless so a panel can host it with `--flush`. */
.ds-table {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ds-table--flush { border: 0; border-radius: 0; }
.ds-table-scroll { overflow-x: auto; }
.ds-tbl { width: 100%; border-collapse: collapse; }
.ds-tbl th {
  text-align: left;
  padding: 0 16px;
  height: var(--row-h-sm);
  font-size: var(--app-text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.ds-tbl td {
  padding: 10px 16px;
  min-height: var(--row-h);
  font-size: var(--app-text);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.ds-tbl tr:last-child td { border-bottom: 0; }
.ds-tbl .is-right { text-align: right; font-variant-numeric: tabular-nums; }
.ds-tbl tbody tr:hover { background: var(--app-hover); }
.ds-tbl-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  font: inherit;
  text-decoration: none;
}
.ds-tbl-sort:hover { color: var(--text-primary); text-decoration: none; }
.ds-tbl-sort .ds-icon { width: 12px; height: 12px; color: var(--warm-400); }
.ds-tbl-sort.is-active .ds-icon { color: var(--ember-s1); }
.is-right .ds-tbl-sort { justify-content: flex-end; }
.ds-tbl-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--app-text);
}
/* Two lines in one cell: name over key. The design's `twoLine()` helper. */
.ds-two-line { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ds-two-line > :first-child { font-weight: var(--fw-medium); }
.ds-two-line > :last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ==========================  Filter bar  ================================ */
/* components/data/FilterBar.jsx, with native controls in place of the React
   dropdowns: the filters are a GET form, so a <select> both submits and stays
   keyboard-reachable without any JS at all. */
.ds-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ds-search { position: relative; display: inline-flex; align-items: center; }
.ds-search .ds-icon {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.ds-search input {
  width: 260px;
  height: var(--control-h);
  padding: 0 12px 0 34px;
  font: inherit;
  font-size: var(--app-text);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--app-radius);
  outline: none;
}
.ds-search input:focus { border-color: var(--ember); box-shadow: var(--shadow-focus); }

.ds-facet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 12px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  border-radius: var(--app-radius);
  font-size: var(--app-text);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.ds-facet select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0 2px 0 0;
  outline: none;
  cursor: pointer;
  max-width: 190px;
}
.ds-facet .ds-icon { width: 14px; height: 14px; color: var(--text-muted); }
/* An engaged facet tints ember, the way the component's `active` branch does. */
.ds-facet.is-active {
  border-color: var(--ember);
  background: var(--app-active);
  font-weight: var(--fw-semibold);
}
.ds-facet.is-active .ds-icon { color: var(--ember-s1); }
.ds-facet--num select, .ds-facet input { width: 58px; }
.ds-facet input {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.ds-filters-clear {
  border: 0;
  background: none;
  padding: 0 4px;
  font: inherit;
  font-size: var(--app-text-sm);
  font-weight: var(--fw-semibold);
  color: var(--ember-s1);
  cursor: pointer;
  text-decoration: none;
}
.ds-filters-count {
  margin-left: auto;
  font-size: var(--app-text-sm);
  color: var(--text-muted);
}

/* ==========================  Pagination  ================================ */
.ds-pager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
}
.ds-pager-label { font-size: var(--app-text-xs); color: var(--text-muted); }
.ds-pager-pages { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.ds-pager-page {
  min-width: 30px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  border-radius: var(--app-radius-sm);
  padding: 5px 9px;
  font: inherit;
  font-size: var(--app-text-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ds-pager-page:hover { border-color: var(--ember); color: var(--ember-s1); text-decoration: none; }
.ds-pager-page.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-ember);
}
.ds-pager-page.is-current:hover { color: var(--text-on-ember); }

/* ==========================  Banner / Callout  ========================== */
/* components/feedback/Banner.jsx — page-level, louder than a callout. */
.ds-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface-muted);
  color: var(--text-primary);
  border-radius: var(--app-radius);
  border-left: 3px solid var(--sea-s1);
}
.ds-banner > .ds-icon { flex: none; color: var(--sea-s1); }
.ds-banner-body { flex: 1; min-width: 0; }
.ds-banner-title { font-size: var(--app-text); font-weight: var(--fw-semibold); }
.ds-banner-text {
  font-size: var(--app-text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  margin-top: 1px;
}
.ds-banner > .ds-actions { flex: none; }
.ds-banner--warning  { background: var(--sand-t1);   border-left-color: var(--sand-s1); }
.ds-banner--warning  > .ds-icon { color: var(--sand-s1); }
.ds-banner--positive { background: var(--land-t1);   border-left-color: var(--land-s1); }
.ds-banner--positive > .ds-icon { color: var(--land-s1); }
.ds-banner--ember    { background: var(--soft-peach); border-left-color: var(--ember); }
.ds-banner--ember    > .ds-icon { color: var(--ember); }
.ds-banner--critical { background: var(--soft-peach); border-left-color: var(--critical); }
.ds-banner--critical > .ds-icon { color: var(--critical); }
/* On a tinted banner the body text is warm-black at 1 step down, not the
   neutral secondary — the component picks per tone. */
.ds-banner--warning .ds-banner-text,
.ds-banner--positive .ds-banner-text,
.ds-banner--ember .ds-banner-text,
.ds-banner--critical .ds-banner-text { color: var(--warm-black-t1); }

/* components/feedback/Callout.jsx — inline, 4px rule, roomier padding. */
.ds-callout {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: var(--surface-muted);
  border-left: 4px solid var(--sea-s1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.ds-callout > .ds-icon { flex: none; margin-top: 1px; color: var(--sea-s1); }
.ds-callout-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds-callout-title { font-size: var(--text-body); font-weight: var(--fw-semibold); }
.ds-callout-text {
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}
.ds-callout-text p { margin: 0; }
.ds-callout-text p + p { margin-top: 6px; }
.ds-callout--warning  { background: var(--sand-t1);    border-left-color: var(--sand-s1); }
.ds-callout--warning  > .ds-icon { color: var(--sand-s1); }
.ds-callout--positive { background: var(--land-t1);    border-left-color: var(--land-s1); }
.ds-callout--positive > .ds-icon { color: var(--land-s1); }
.ds-callout--ember    { background: var(--soft-peach); border-left-color: var(--ember); }
.ds-callout--ember    > .ds-icon { color: var(--ember); }
.ds-callout ul { margin: 4px 0 0; padding-left: 18px; }

/* ==========================  Empty state  =============================== */
/* components/data/EmptyState.jsx */
.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 32px;
}
.ds-empty--compact { padding: 32px 24px; }
.ds-empty-badge {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: var(--soft-peach);
  color: var(--ember-s1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.ds-empty--compact .ds-empty-badge { width: 48px; height: 48px; }
.ds-empty-title {
  margin: 0;
  font-size: var(--app-text-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.ds-empty-note {
  margin: 6px 0 0;
  font-size: var(--app-text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  max-width: 40ch;
}

/* ==========================  Description list  ========================== */
/* components/data/DescriptionList.jsx, layout "rows". */
.ds-dl { margin: 0; display: flex; flex-direction: column; }
.ds-dl-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ds-dl-row:last-child { border-bottom: 0; }
.ds-dl dt { flex: none; width: 42%; font-size: var(--app-text-sm); color: var(--text-muted); }
.ds-dl dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: var(--app-text);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-align: right;
  overflow-wrap: anywhere;
}

/* ==========================  Audit log  ================================= */
/* components/data/AuditLog.jsx: a dot per entry, dotted rail between them. */
.ds-audit { display: flex; flex-direction: column; }
.ds-audit-entry { display: flex; gap: 12px; }
.ds-audit-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 24px;
}
.ds-audit-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--warm-400);
  border: 2px solid var(--surface-card);
  box-shadow: 0 0 0 1px var(--border-subtle);
  margin-top: 4px;
  flex: none;
}
.ds-audit-entry--positive .ds-audit-dot { background: var(--land-s1); }
.ds-audit-entry--warning  .ds-audit-dot { background: var(--sand-s1); }
.ds-audit-entry--critical .ds-audit-dot { background: var(--critical); }
.ds-audit-entry--ember    .ds-audit-dot { background: var(--ember); }
.ds-audit-line {
  width: 0;
  flex: 1;
  min-height: 18px;
  border-left: 2px dotted var(--warm-300);
  margin: 3px 0;
}
.ds-audit-body { padding-bottom: 14px; flex: 1; min-width: 0; }
.ds-audit-entry:last-child .ds-audit-body { padding-bottom: 0; }
.ds-audit-what {
  font-size: var(--app-text);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}
.ds-audit-what strong { font-weight: var(--fw-semibold); }
.ds-audit-target { font-weight: var(--fw-semibold); color: var(--ember-s1); }
.ds-audit-when { font-size: var(--app-text-xs); color: var(--text-muted); margin-top: 2px; }

/* ==========================  Forms  ===================================== */
/* components/forms/{Input,Select,Textarea}.jsx */
.ds-form { display: flex; flex-direction: column; gap: 14px; }
.ds-form-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ds-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 16px;
  align-items: start;
}
.ds-form-grid--wide { grid-column: 1 / -1; }

.ds-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ds-field > span,
.ds-field > label {
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.ds-field-hint { font-size: var(--text-footnote); color: var(--text-muted); font-weight: var(--fw-regular); }
.ds-field input,
.ds-field select,
.ds-field textarea {
  font: inherit;
  font-size: var(--text-body);
  color: var(--text-primary);
  padding: 10px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.ds-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d4750' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
.ds-field textarea { resize: vertical; min-height: 88px; line-height: var(--leading-snug); }
.ds-field--mono input, .ds-field--mono textarea { font-family: var(--font-mono); font-size: var(--app-text-sm); }
.ds-field input:focus,
.ds-field select:focus,
.ds-field textarea:focus { border-color: var(--ember); box-shadow: var(--shadow-focus); }
.ds-field input[disabled], .ds-field select[disabled] { background: var(--surface-muted); cursor: not-allowed; }
.ds-field--error input, .ds-field--error textarea { border-color: var(--critical); }
.ds-field--sm input, .ds-field--sm select { padding: 6px 10px; font-size: var(--app-text); }
.ds-field--w-narrow { max-width: 120px; }
.ds-field--w-key { max-width: 180px; }
.ds-field--w-name { max-width: 240px; }
.ds-field--w-text { max-width: 360px; flex: 1 1 260px; }

.ds-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--app-text);
  color: var(--text-primary);
}
.ds-check input { width: 16px; height: 16px; accent-color: var(--ember); cursor: pointer; }
.ds-checks { display: flex; flex-wrap: wrap; gap: 16px; }
.ds-fieldset { border: 0; margin: 0; padding: 0; }
.ds-legend {
  padding: 0;
  font-size: var(--app-text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: 10px;
}

/* ==========================  Code surfaces  ============================= */
.ds-pre {
  margin: 0;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--app-radius-sm);
  padding: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
  overflow: auto;
  max-height: 260px;
  white-space: pre-wrap;
}
.ds-pre--dark {
  background: var(--warm-black);
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.92);
  padding: 18px;
  max-height: 300px;
}
.ds-pre--tall { max-height: 340px; }

/* The run log, as the design draws it: a dark console, one line per row, the
   timestamp dimmed and the message carrying the level colour. `logline-*` keep
   their names — the run-log fragment is polled by HTMX and asserted on. */
.ds-console {
  background: var(--warm-black);
  padding: 16px 18px;
  max-height: 340px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ds-logline {
  display: flex;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
}
.ds-logline-at { flex: none; color: rgba(255, 255, 255, 0.45); }
/* `background: none` is load-bearing: these two class names predate the redesign
   and Tailwind's app.css still defines them with a light `bg-amber-50` /
   `bg-red-50`, which on a warm-black console is a light band behind light text. */
.logline-warn { background: none; color: var(--sand); }
.logline-error { background: none; color: var(--ember); font-weight: var(--fw-semibold); }
.ds-console .ds-console-note { font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.45); }

/* ==========================  Phase timings  ============================= */
.ds-phase {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--border-subtle);
}
.ds-phase:first-child { border-top: 0; }
.ds-phase-name {
  font-family: var(--font-mono);
  font-size: var(--app-text-sm);
  color: var(--text-secondary);
  flex: none;
  width: 96px;
}
.ds-phase-track { flex: 1; height: 6px; background: var(--warm-200); }
.ds-phase-fill { display: block; height: 6px; background: var(--ember); }
.ds-phase-value {
  flex: none;
  font-size: var(--app-text-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* ==========================  Shape evidence  ============================ */
.ds-shape {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.ds-shape-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ds-shape-rows { display: flex; flex-direction: column; gap: 5px; }
.ds-shape-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--app-text-sm);
}
.ds-shape-row > :first-child {
  font-family: var(--font-mono);
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-shape-row > :last-child {
  margin-left: auto;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

/* ==========================  Item errors  =============================== */
.ds-err {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ds-err:last-child { border-bottom: 0; }
.ds-err-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-err-stage {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ember-s2);
}
.ds-err-ref { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.ds-err-what { font-size: var(--app-text); color: var(--text-primary); }
.ds-err-detail { font-size: var(--app-text-xs); color: var(--text-muted); }
.ds-err-detail pre { margin: 4px 0 0; }

/* ==========================  Register rows  ============================= */
/* A CSS grid rather than a <table>: each row expands into a two-column panel,
   and a row-plus-detail pair inside one <tr> is markup nobody enjoys. */
.ds-reg { --reg-cols: minmax(240px, 1fr) 110px 132px 96px 108px 118px 40px; }
.ds-reg-grid {
  display: grid;
  grid-template-columns: var(--reg-cols);
  min-width: 934px;
  gap: 12px;
}
.ds-reg-head {
  padding: 9px 18px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.ds-reg-row-wrap { border-bottom: 1px solid var(--border-subtle); }
.ds-reg-row {
  align-items: center;
  padding: 10px 18px;
  min-height: var(--row-h);
  cursor: pointer;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
}
.ds-reg-row:hover { background: var(--app-hover); }
.ds-reg-title { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ds-reg-title > :first-child {
  font-size: var(--app-text);
  font-weight: var(--fw-medium);
  line-height: 1.35;
}
.ds-reg-title > :last-child { font-size: 11px; color: var(--text-muted); }
.ds-reg-source { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.ds-reg-cell { font-size: var(--app-text-sm); color: var(--text-secondary); }
.ds-reg-deadline { font-size: var(--app-text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ds-reg-deadline--soon { color: var(--ember-s2); }
.ds-reg-scores { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ds-reg-chevron {
  display: flex;
  justify-content: flex-end;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
.ds-reg-detail {
  padding: 4px 18px 18px;
  background: var(--surface-muted);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
  min-width: 934px;
}
.ds-reg-detail > div { padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ds-reg-detail p { margin: 0; font-size: var(--app-text); line-height: 1.55; color: var(--text-secondary); }
.ds-reg-detail-actions { align-items: flex-start; }

/* ==========================  Score history  ============================= */
.ds-hist-grid {
  display: grid;
  grid-template-columns: 150px 150px 70px 96px minmax(180px, 1fr) 190px;
  min-width: 880px;
  gap: 12px;
}
.ds-hist-head {
  padding: 9px 18px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.ds-hist-row {
  align-items: start;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--app-text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}
.ds-hist-row:last-child { border-bottom: 0; }
.ds-hist-row.is-current { background: var(--land-t1); }
.ds-hist-score { font-size: var(--app-text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.ds-hist-by { font-size: var(--app-text-xs); color: var(--text-muted); }

/* ==========================  Big score  ================================= */
.ds-bigscore { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 12px; }
.ds-bigscore-value {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  font-size: 40px;
  line-height: 1;
}
.ds-bigscore-of { font-size: var(--app-text-sm); color: var(--text-muted); }

/* ==========================  Overlap matrix  ============================ */
.ds-matrix { display: inline-flex; flex-direction: column; min-width: 100%; }
.ds-matrix-row {
  display: grid;
  grid-template-columns: 150px repeat(var(--matrix-cols, 6), minmax(74px, 1fr));
  gap: 3px;
}
.ds-matrix-row + .ds-matrix-row { margin-top: 3px; }
.ds-matrix-corner { padding: 6px 8px; }
.ds-matrix-colhead {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 4px;
  text-align: center;
}
.ds-matrix-rowhead {
  font-family: var(--font-mono);
  font-size: var(--app-text-sm);
  color: var(--text-primary);
  padding: 8px;
  background: var(--surface-muted);
}
.ds-matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  font-size: var(--app-text-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--surface-card);
  color: var(--text-muted);
}
/* Four heat steps, ember at the top. The bucket boundaries live in
   services/overlap.py so the same numbers back the retirement suggestion. */
.ds-heat--hot  { background: var(--ember);      color: var(--text-on-ember); }
.ds-heat--warm { background: var(--soft-peach); color: var(--text-primary); }
.ds-heat--mild { background: var(--warm-100);   color: var(--text-primary); }
.ds-heat--cold { background: var(--surface-card); color: var(--text-muted); }
.ds-heat--self { background: var(--warm-200);   color: var(--warm-500); }
.ds-heat--unknown { background: var(--surface-muted); color: var(--text-muted); }

/* ==========================  Accordion  ================================= */
.ds-acc { border-bottom: 1px solid var(--border-subtle); }
.ds-acc:last-child { border-bottom: 0; }
.ds-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: none;
  padding: 12px 18px;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.ds-acc-head:hover { background: var(--app-hover); }
.ds-acc-name { font-family: var(--font-mono); font-size: var(--app-text); font-weight: var(--fw-semibold); }
.ds-acc-summary { font-size: var(--app-text-xs); color: var(--text-muted); }
.ds-acc-chevron { margin-left: auto; font-size: 11px; font-weight: var(--fw-semibold); color: var(--text-accent); }
.ds-acc-body { padding: 0 18px 16px; }

/* ==========================  Summary strip  ============================= */
.ds-strip {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}
.ds-strip-item { display: flex; flex-direction: column; gap: 2px; }
.ds-strip-value { font-size: var(--app-text); font-weight: var(--fw-semibold); }
.ds-strip-rule { width: 1px; align-self: stretch; background: var(--border-subtle); }
.ds-strip-note {
  margin: 0;
  flex: 1 1 280px;
  min-width: 240px;
  font-size: var(--app-text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}
.ds-strip-flag {
  font-size: var(--app-text-xs);
  font-weight: var(--fw-semibold);
  color: var(--white);
  background: var(--ember-s1);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

/* ==========================  Settings rows  ============================= */
.ds-set-grid {
  display: grid;
  grid-template-columns: 272px 200px minmax(200px, 1fr) 188px;
  min-width: 900px;
  gap: 16px;
  align-items: start;
  padding: 12px 18px;
}
.ds-set-row { border-bottom: 1px solid var(--border-subtle); }
.ds-set-row:last-child { border-bottom: 0; }
.ds-set-row.is-editing { background: var(--surface-muted); }
.ds-set-key { display: flex; flex-direction: column; gap: 4px; padding-top: 3px; min-width: 0; }
.ds-set-key-name {
  font-family: var(--font-mono);
  font-size: var(--app-text-sm);
  font-weight: var(--fw-medium);
  word-break: break-all;
}
.ds-set-marker { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); }
.ds-set-marker-dot { width: 6px; height: 6px; border-radius: 1px; background: var(--warm-300); flex: none; }
.ds-set-marker--changed .ds-set-marker-dot { background: var(--ember); }
.ds-set-value { display: flex; align-items: center; gap: 8px; padding-top: 1px; flex-wrap: wrap; }
.ds-set-shown {
  font-size: var(--app-text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--app-radius-sm);
  padding: 4px 10px;
  min-width: 54px;
  text-align: center;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ds-set-unit { font-size: 11px; color: var(--text-muted); }
.ds-set-input {
  width: 116px;
  font: inherit;
  font-size: var(--app-text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--ember);
  border-radius: var(--app-radius-sm);
  padding: 4px 8px;
  outline: none;
  box-shadow: var(--shadow-focus);
}
.ds-set-input--json {
  width: 100%;
  min-width: 180px;
  min-height: 76px;
  font-family: var(--font-mono);
  font-size: var(--app-text-sm);
  font-weight: var(--fw-regular);
  text-align: left;
  resize: vertical;
}
.ds-set-about { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ds-set-desc { font-size: var(--app-text-sm); color: var(--text-secondary); line-height: 1.45; }
.ds-set-effect { font-size: var(--app-text-xs); color: var(--ember-s2); line-height: 1.45; }
.ds-set-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.ds-set-changed { font-size: var(--app-text-xs); color: var(--text-muted); text-align: right; }
.ds-set-error { font-size: var(--app-text-xs); color: var(--critical); text-align: right; }
.ds-set-reset {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: var(--app-text-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ds-set-reset:hover { color: var(--ember-s1); }
.ds-btn--ghost {
  border: 0;
  background: none;
  padding: 5px 4px;
  font: inherit;
  font-size: var(--app-text-xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  cursor: pointer;
  height: auto;
}
.ds-btn--ghost:hover { background: none; color: var(--text-primary); text-decoration: underline; }

.ds-hist-audit {
  display: grid;
  grid-template-columns: 170px 268px minmax(160px, 1fr) 170px;
  min-width: 860px;
  gap: 16px;
  align-items: baseline;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.ds-hist-audit:last-child { border-bottom: 0; }

/* ==========================  Vocabulary terms  ========================== */
.ds-terms { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ds-term {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-muted);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 3px 4px 3px 10px;
  font-size: var(--app-text-sm);
}
.ds-term-lang { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.ds-term-drop {
  border: 0;
  background: none;
  padding: 0 5px;
  font: inherit;
  line-height: 1;
  color: var(--ember-s2);
  cursor: pointer;
}
.ds-term-drop:hover { color: var(--ember); }
.ds-cluster-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ds-cluster-key { font-family: var(--font-mono); font-weight: var(--fw-semibold); }
.ds-cluster-end { margin-left: auto; }

/* ==========================  Narrow viewports  ========================== */
/* Same posture as the shell: wide evidence tables keep their min-width behind a
   horizontal scroll; what collapses is the page furniture. */
@media (max-width: 1180px) {
  .ds-grid-detail,
  .ds-grid-halves,
  .ds-grid-rail,
  .ds-grid-rail--narrow { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ds-search input { width: 100%; min-width: 180px; }
  .ds-filters-count { margin-left: 0; }
  .ds-strip-rule { display: none; }
}

/* ==========================  Login screen  ============================== */
/* One centred card on the app background — no brand panel, no tagline. The
   only brand mark is the wordmark above the title, set in the display face. */
.ds-loginscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--app-bg);
}
.ds-login-card {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--app-radius);
  box-shadow: var(--shadow-sm);
}
.ds-login-head { display: flex; flex-direction: column; gap: 4px; }
.ds-login-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  font-size: 15px;
  line-height: 1;
  color: var(--text-accent);
  margin-bottom: 12px;
}
.ds-login-title {
  margin: 0;
  font-size: var(--text-display-s);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.ds-login-sub { margin: 0; font-size: var(--app-text); color: var(--text-secondary); }
.ds-login-form { display: flex; flex-direction: column; gap: 18px; }
.ds-login-form .ds-btn { width: 100%; }
.ds-login-foot {
  margin: 0;
  font-size: var(--app-text-sm);
  color: var(--text-muted);
  text-align: center;
}
.ds-login-error {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--app-radius);
  background: var(--soft-peach);
  border-left: 3px solid var(--critical);
  font-size: var(--app-text-sm);
  color: var(--warm-black);
}

@media (max-width: 480px) {
  .ds-loginscreen { padding: 24px 16px; }
  .ds-login-card { padding: 28px 24px; }
}

/* ---- Prose blocks on record detail ------------------------------------- */
.ds-scope {
  margin: 0;
  font-size: var(--app-text);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  white-space: pre-wrap;
}
.ds-assessment {
  margin: 0 0 14px;
  font-size: var(--app-text);
  line-height: 1.55;
  color: var(--text-secondary);
}
.ds-audit-detail {
  font-size: var(--app-text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
  margin-top: 2px;
}
.ds-result-slot:not(:empty) { margin-top: 12px; }

/* ---- Status marker in a table cell ------------------------------------- */
/* The square is the brand's mark; the label carries the same information in
   words, so the state does not depend on colour alone. */
.ds-status { display: inline-flex; align-items: center; gap: 7px; }
.ds-status-label { font-size: var(--app-text); font-weight: var(--fw-medium); }
.ds-status-label--failing { color: var(--ember-s2); }
.ds-status-label--stale { color: var(--text-primary); }
.ds-status-label--fetching { color: var(--text-secondary); }
.ds-status-label--paused { color: var(--text-muted); }

/* A label that only a screen reader needs: the visible column heading already
   names the field, and repeating it in the row would be noise. */
.ds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* Chips that are also buttons (the Users page role and state toggles). */
button.ds-chip { border: 1px dashed var(--border-default); cursor: pointer; font: inherit; font-size: 11px; font-weight: var(--fw-semibold); }
button.ds-chip:hover { border-color: var(--ember); color: var(--ember-s1); }
.ds-facet-dash { color: var(--text-muted); }
.ds-facet--num input { width: 46px; text-align: center; }
.ds-facet--num input::placeholder { color: var(--warm-400); }
.ds-actions.ds-nowrap { flex-wrap: nowrap; }

/* The sortable header's control. A <button> so it is keyboard-reachable; the
   arrow tints ember while this is the active column (table-sort.js toggles it). */
.ds-tbl th[data-sort] { padding: 0; }
.ds-tbl-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: var(--row-h-sm);
  padding: 0 16px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  text-align: left;
}
.ds-tbl-sort:hover { color: var(--text-primary); }
.is-right .ds-tbl-sort { justify-content: flex-end; }

/* ==========================  Modal  ===================================== */
/* Not a design-system component: the system has no dialog, and the schedule
   builder needed one. Built on the native <dialog> so Esc, the focus trap and
   the backdrop are the browser's, and dressed as a Panel (the surface, radius,
   border and shadow below are Panel.jsx's) so it reads as one of ours. */
.ds-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: min(86vh, 760px);
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ds-modal::backdrop { background: rgba(35, 5, 32, 0.42); }
.ds-modal-head,
.ds-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}
.ds-modal-head { border-bottom: 1px solid var(--border-subtle); }
.ds-modal-foot {
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-muted);
}
.ds-modal-body {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  overflow-y: auto;
  /* The head and foot stay put; only the body scrolls, so "Use this schedule" is
     never below the fold on a short window. */
  max-height: calc(min(86vh, 760px) - 124px);
}

/* The two numbered halves of the dialog: choose a frequency, then read what it
   came to. A rule between them rather than a card each — they are one task. */
.ds-modal-step { padding: 18px 0; }
.ds-modal-step + .ds-modal-step { border-top: 1px solid var(--border-subtle); }
.ds-modal-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-text);
  font-size: var(--app-text);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.ds-modal-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  color: var(--ember-s1);
  font-size: 11px;
  font-weight: var(--fw-semibold);
}
.ds-modal-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
/* The builder hides the controls that do not apply to the chosen frequency. `.ds-field`
   sets display:flex, which outranks the UA's [hidden] rule, so say it again here. */
.ds-modal [hidden] { display: none; }
.ds-modal-row > .ds-field { flex: 0 1 200px; }
.ds-modal-days {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  border: 0;
  padding: 0;
  margin: 0;
  flex: 1 0 100%;
}
.ds-modal-days legend { padding: 0; margin-right: 4px; float: left; }
.ds-modal-step > .ds-field-hint { display: block; margin: 16px 0 8px; }

/* The examples are one row of buttons, expression over meaning, so the list reads
   as a set of choices rather than as prose with links in it. */
.ds-modal-examples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px;
}
.ds-modal-example {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font: inherit;
  font-size: var(--app-text-sm);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.ds-modal-example:hover { border-color: var(--ember); background: var(--surface-tint); }

/* The expression and its reading, together: the box is the thing that gets saved,
   and the line under it is the server's account of what it will do. */
.ds-modal-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.ds-modal-cron-field { gap: 0; }
input.ds-modal-cron {
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
}
#cron-builder-preview { margin: 0; line-height: var(--leading-snug); }

/* The syntax reference is folded away: it is what you need on the day you write an
   expression by hand, and noise on every other day. */
.ds-modal-ref { margin-top: 14px; }
.ds-modal-ref > summary {
  font-size: var(--app-text-sm);
  color: var(--text-link);
  cursor: pointer;
}
.ds-modal-ref-body { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ds-modal-fields {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2px 16px;
}
.ds-modal-fields li { font-size: var(--app-text-xs); color: var(--text-secondary); }
.ds-modal-ref-body .ds-field-hint { margin: 0; }

/* ==========================  Sources editor  ============================ */
/* The saved cron expression, shown rather than typed: the builder dialog is the
   only thing that writes it, so this reads as a stated fact with an Edit next to
   it — not as an input someone half-changed and left. */
.ds-schedule {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-muted);
}
.ds-schedule-read { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.ds-schedule-cron {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.ds-schedule-gloss { margin: 0; line-height: var(--leading-snug); }
.ds-schedule .ds-btn { flex: none; }
/* One block of fields under another inside the same panel. */
.ds-stack-top { margin-top: 14px; }

/* Checkboxes that carry a line of explanation. Two columns on a wide panel, since
   four stacked one-line descriptions read as a list of unrelated warnings. */
.ds-checks--described {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 16px;
}
.ds-check--described { align-items: flex-start; gap: 10px; }
.ds-check--described input { margin-top: 2px; }
.ds-check--described > span { display: flex; flex-direction: column; gap: 1px; }
.ds-check-name { font-family: var(--font-mono); font-size: var(--app-text-sm); }

/* The single Save for the whole form, on its own line under the last panel: the
   panels above are sections of one row, not separate things to save. */
.ds-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================  MCP page  ================================== */
/* A snippet with a copy button in its corner. The button overlays the <pre>
   rather than sitting beside it: the snippets are wide (a URL plus a header) and
   a side-by-side layout would either wrap the command or shrink the button to
   nothing on a laptop screen. */
.ds-copy { position: relative; }
.ds-copy > .ds-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}
/* Numbered prerequisites. Sized like body prose, not like a list of labels:
   each step is a sentence or two. */
.ds-steps {
  margin: 0;
  padding-left: 20px;
  font-size: var(--app-text-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}
.ds-steps li + li { margin-top: 10px; }
/* name + one-line summary, one tool per row. */
.ds-tool-list { list-style: none; margin: 0; padding: 0; }
.ds-tool-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ds-tool-list li:last-child { border-bottom: 0; }
.ds-tool-list code { display: block; margin-bottom: 2px; }