/* ===== editor =====
 * ScreenEditor (frontend/js/screens/editor.js) — palette · canvas · inspector.
 * Appended block: two other strands write this file, so nothing above this
 * comment is touched or reordered here.
 *
 * Four new tokens, each with its dark counterpart in the block directly below
 * (guidelines §2.2 iron rule — an undefined token silently paints its light
 * fallback and nothing errors, the pixels are just wrong).
 */
:root {
  --scr-ed-canvas: #fbfbfd;   /* the canvas ground, a shade under the page   */
  --scr-ed-dot: #d7dae3;      /* the 8px grid dot                            */
  --scr-ed-panel: #f7f8fb;    /* palette + inspector chrome                  */
  --scr-ed-widget: #ffffff;   /* a placed widget's card                      */
}
html[data-theme="dark"] {
  --scr-ed-canvas: #10141d;
  --scr-ed-dot: #2a3148;
  --scr-ed-panel: #151a25;
  --scr-ed-widget: #181d29;
}

.scr-ed { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 0; }

/* toolbar — tools, then a divider, then the one primary (guidelines §3.3) */
.scr-ed__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.scr-ed__bar-left, .scr-ed__bar-right {
  display: flex; align-items: center; gap: var(--sp-2);
}
.scr-ed__count { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.scr-ed__hint { font-size: 12px; color: var(--text-muted); }
.scr-ed__divider {
  width: 1px; height: 22px; background: var(--border); display: inline-block;
}

/* refused save — the reasons, named per widget */
.scr-ed__errors {
  border: 1px solid var(--danger); border-radius: var(--radius-sm);
  background: var(--bg-card); padding: var(--sp-3) var(--sp-4);
}
.scr-ed__errors-title {
  margin: 0 0 var(--sp-2); font-size: 13px; font-weight: 600; color: var(--danger);
}
.scr-ed__errors-list { margin: 0; padding-left: var(--sp-4); }
.scr-ed__errors-list li { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }

/* three panels */
.scr-ed__body {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px;
  gap: var(--sp-3); align-items: stretch; min-height: 520px;
}

/* ── palette ─────────────────────────────────────────────────────────── */
.scr-ed__palette {
  background: var(--scr-ed-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-2);
  overflow: auto; max-height: 72vh;
}
.scr-ed-pal__group { margin-bottom: var(--sp-4); }
.scr-ed-pal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2) var(--sp-2) 0;
}
.scr-ed-pal__title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--text-secondary);
}
.scr-ed-pal__count {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  font-family: var(--mono);
}
.scr-ed-pal__hint {
  margin: 2px var(--sp-2) var(--sp-2); font-size: 11px; color: var(--text-muted);
}
.scr-ed-pal__item {
  padding: var(--sp-2); border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: grab; user-select: none;
  transition: var(--transition);
}
.scr-ed-pal__item:hover { background: var(--accent-soft); border-color: var(--accent); }
.scr-ed-pal__item:active { cursor: grabbing; }
.scr-ed-pal__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.scr-ed-pal__row { display: flex; align-items: center; gap: var(--sp-2); }
/* §8: --text-disabled is for disabled controls and placeholders only. A grip
   is a live drag affordance, so it sits at the chrome floor instead. */
.scr-ed-pal__grip { color: var(--text-muted); font-size: 12px; }
.scr-ed-pal__label {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  flex: 1; min-width: 0;
}
.scr-ed-pal__kind {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  padding: 1px 5px; border-radius: 3px;
}
.scr-ed-pal__desc {
  margin: 3px 0 0 20px; font-size: 11px; color: var(--text-muted); line-height: 1.45;
}

/* ── canvas ──────────────────────────────────────────────────────────── */
.scr-ed__canvas-wrap { min-width: 0; overflow: auto; }
.scr-ed__canvas {
  position: relative; min-height: 520px; min-width: 640px;
  background-color: var(--scr-ed-canvas);
  background-image: radial-gradient(var(--scr-ed-dot) 1px, transparent 1px);
  background-size: 8px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.scr-ed__canvas.is-dragging { border-color: var(--accent); border-style: dashed; }
.scr-ed__empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-5); text-align: center; pointer-events: none;
}
.scr-ed__empty-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.scr-ed__empty-hint { margin: 0; font-size: 12px; color: var(--text-muted); max-width: 42ch; }

.scr-ed-w {
  position: absolute; box-sizing: border-box; overflow: hidden;
  background: var(--scr-ed-widget); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.scr-ed-w.is-selected {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.scr-ed-w__handle {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-2); cursor: grab; user-select: none;
  border-bottom: 1px solid var(--border-light);
}
.scr-ed-w__handle:active { cursor: grabbing; }
.scr-ed-w__grip { color: var(--text-muted); font-size: 11px; }
.scr-ed-w__title {
  font-size: 12px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scr-ed-w__body { padding: var(--sp-2); }
/* 11px, not 10px: §2.3 lists 30/21/16/14/13/12/11 and nothing under it.
   --text-secondary, not --text-muted. Muted WAS 4.33:1 on the dark card; it is
   now 5.48:1 and AA-clean on its own, so this is a tier choice, not a dodge. The
   kind IS the widget's identity on the canvas, so it must clear AA. */
.scr-ed-w__kind {
  font-family: var(--mono); font-size: 11px; color: var(--text-secondary);
}
.scr-ed-w__warn { margin: var(--sp-1) 0 0; font-size: 11px; color: var(--danger); }

/* ── inspector ───────────────────────────────────────────────────────── */
.scr-ed__inspector {
  background: var(--scr-ed-panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-3);
  overflow: auto; max-height: 72vh;
}
.scr-ed-insp__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: var(--sp-2); margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.scr-ed-insp__label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.scr-ed-insp__kind {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  padding: 1px 5px; border-radius: 3px;
}
.scr-ed-insp__note, .scr-ed-insp__empty-hint {
  margin: 0; font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.scr-ed-insp__empty { padding: var(--sp-5) var(--sp-2); text-align: center; }
.scr-ed-insp__empty-title {
  margin: 0 0 var(--sp-2); font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.scr-ed-insp__form { display: flex; flex-direction: column; gap: var(--sp-3); }
.scr-ed-insp__pos {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--sp-4); padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.scr-ed-insp__pos-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.scr-ed-insp__pos-val { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }

/* one field — persistent label above the control (guidelines §5.7) */
.scr-ed-f { display: flex; flex-direction: column; gap: 4px; }
.scr-ed-f__label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.scr-ed-f__hint { margin: 0; font-size: 11px; color: var(--text-muted); }
.scr-ed-f__input, .scr-ed-f__area {
  width: 100%; box-sizing: border-box; min-height: 34px;
  padding: 6px var(--sp-2); font-family: var(--font); font-size: 13px;
  color: var(--text-primary); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.scr-ed-f__area { min-height: 72px; resize: vertical; }
.scr-ed-f__json { font-family: var(--mono); font-size: 12px; }
.scr-ed-f__input:focus, .scr-ed-f__area:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.scr-ed-f__check { width: 16px; height: 16px; accent-color: var(--accent); }
.scr-ed-f__cols, .scr-ed-f__acts { display: flex; flex-direction: column; gap: var(--sp-2); }
.scr-ed-f__col, .scr-ed-f__act { display: flex; align-items: center; gap: var(--sp-1); }
.scr-ed-f__col.is-invalid .scr-ed-f__input:first-child,
.scr-ed-f__bind.is-invalid .scr-ed-f__input { border-color: var(--danger); }
.scr-ed-f__bind { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.scr-ed-f__method {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--text-secondary); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 3px; padding: 2px 6px;
}
.scr-ed-f__bind .scr-ed-f__input { flex: 1; min-width: 140px; }

/* narrow viewports — the panels stack rather than the page scrolling sideways */
@media (max-width: 1100px) {
  .scr-ed__body { grid-template-columns: 220px minmax(0, 1fr); }
  .scr-ed__inspector { grid-column: 1 / -1; max-height: none; }
}
@media (max-width: 700px) {
  .scr-ed__body { grid-template-columns: minmax(0, 1fr); }
  .scr-ed__palette { max-height: 240px; }
  .scr-ed__canvas { min-width: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════
 * Screens — the card grid, its previews and the add wizard.
 * OWNED BY THE SURFACE STRAND (screens-screen.js). Appended block: another
 * strand writes the rest of this file, so nothing above this banner is edited.
 *
 * Guidelines §5.4 cards · §5.5 card-grid pages · §5.6 badges · §5.7 forms.
 * Every token declared here has a dark counterpart in the same block (the iron
 * rule, §2.2) — an undefined token silently paints its light fallback.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  --scr-thumb-bg: #f2f4f8;
  --scr-thumb-ink: #6b7280;
  --scr-thumb-mark: #d3d8e2;
  --scr-mini-bg: #e8ecf5;
  --scr-mini-tile: #b9c4dc;
  --scr-mini-accent: #8fa4cc;
  /* 300px, not 260: the footer's four named actions (Open · Edit · Duplicate ·
     Delete) sit on one line at this width. Narrower and Delete wraps alone,
     which reads as a second, separate row of controls. */
  --scr-card-min: 300px;
}
html[data-theme="dark"] {
  --scr-thumb-bg: #1d2333;
  --scr-thumb-ink: #a8adbd;
  --scr-thumb-mark: #2f3852;
  --scr-mini-bg: #222a3d;
  --scr-mini-tile: #39435f;
  --scr-mini-accent: #4a5878;
  --scr-card-min: 300px;
}

/* ── summary tiles (§5.5): a card grid opens on counts ─────────────────── */
.scr-tiles {
  display: flex; flex-wrap: wrap; gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-4, 16px);
}
.scr-tile {
  background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px); box-shadow: var(--shadow-sm);
  padding: var(--sp-3, 12px) var(--sp-4, 16px); min-width: 108px;
}
.scr-tile-n {
  display: block; font-size: 21px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-primary, #172033);
}
.scr-tile-l {
  display: block; font-size: 11px; color: var(--text-muted, #6b7280);
}

.scr-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px);
  margin-bottom: var(--sp-4, 16px);
}

/* ── the grid ─────────────────────────────────────────────────────────────
 * C7: minmax(min(100%, …)) — at 375px the track collapses to the viewport
 * instead of forcing a 260px column plus padding past the body width. Every
 * card is min-width:0 so a long title wraps rather than widening its track.  */
.scr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--scr-card-min)), 1fr));
  gap: var(--sp-4, 16px);
  align-items: stretch;
}
.scr-card, .scr-add-card { min-width: 0; max-width: 100%; }

.scr-card {
  display: flex; flex-direction: column;
  background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* §5.4 hover honesty: the card as a whole is NOT clickable (its controls are),
   so it must not animate on hover — a hover that does nothing is a lie. */

/* ── the preview, which IS the card's background ──────────────────────── */
.scr-card-thumb {
  position: relative; height: 116px; background: var(--scr-thumb-bg);
  border-bottom: 1px solid var(--border-light, #eef0f3);
  display: flex; align-items: center; justify-content: center;
}
.scr-thumb-shot {
  width: 100%; height: 100%;
  background-size: cover; background-position: top center; background-repeat: no-repeat;
}
/* placeholder: hatched, muted, and captioned. It must read as "nothing to show
   yet", never as a small picture of a screen (C3). */
.scr-card-thumb[data-thumb-kind="placeholder"] { background: var(--scr-thumb-bg); }
.scr-thumb-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-1, 4px); padding: var(--sp-3, 12px); text-align: center;
  width: 100%; height: 100%;
  background-image: repeating-linear-gradient(
    45deg, transparent 0 7px, var(--scr-thumb-mark) 7px 8px);
}
.scr-thumb-mark { font-size: 20px; color: var(--scr-thumb-mark); line-height: 1; }
.scr-thumb-note {
  font-size: 11px; line-height: 1.4; color: var(--scr-thumb-ink);
  overflow-wrap: anywhere;
}
/* Provenance, said on the card as well as in the accessible name (see
   buildThumb): soft grey bars ARE the universal skeleton-loader look, so a
   spec miniature needs to say it is a diagram and a capture needs to say it is
   real. The placeholder needs no tag — it carries its whole sentence. */
.scr-thumb-tag {
  position: absolute; right: 6px; bottom: 6px;
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
  color: var(--scr-thumb-ink); background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e5e7eb);
}
/* live: a miniature of the SPEC — one mark per widget, sized by what it is. */
.scr-mini {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px;
  width: 100%; height: 100%; padding: var(--sp-3, 12px);
  background: var(--scr-mini-bg);
}
.scr-mini-tile {
  display: block; height: 12px; flex: 1 1 44%; border-radius: 3px;
  background: var(--scr-mini-tile);
}
.scr-mini-tile--grid { flex-basis: 100%; height: 34px; }
.scr-mini-tile--kpi { flex-basis: 26%; height: 18px; }
.scr-mini-tile--action { flex-basis: 32%; height: 10px; background: var(--scr-mini-accent); }
.scr-mini-tile--markdown { flex-basis: 100%; height: 8px; }

/* ── card body ────────────────────────────────────────────────────────── */
.scr-card-body {
  padding: var(--sp-4, 16px); display: flex; flex-direction: column;
  gap: var(--sp-2, 8px); flex: 1;
}
.scr-card-head {
  display: flex; align-items: flex-start; gap: var(--sp-2, 8px);
}
.scr-card-title {
  margin: 0; flex: 1; min-width: 0;
  font-size: var(--fs-item, 16px); font-weight: var(--fw-item, 600);
  overflow-wrap: anywhere;
}
.scr-card-desc {
  margin: 0; font-size: 12px; color: var(--text-secondary, #4b5563);
  line-height: 1.5; overflow-wrap: anywhere;
}
.scr-card-meta {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: 3px var(--sp-3, 12px); font-size: 12px;
  color: var(--text-secondary, #4b5563);
}
.scr-card-meta dt { color: var(--text-muted, #6b7280); }
.scr-card-meta dd { margin: 0; overflow-wrap: anywhere; }
/* Footer actions line up across cards of different content heights (§5.4). */
.scr-card-foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px);
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-top: 1px solid var(--border-light, #eef0f3);
}
.scr-card-preview {
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  border-top: 1px solid var(--border-light, #eef0f3);
}

/* ── the add tile ─────────────────────────────────────────────────────── */
.scr-add-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2, 8px); min-height: 180px; cursor: pointer;
  background: transparent; color: var(--text-secondary, #4b5563);
  border: 1px dashed var(--border, #e5e7eb); border-radius: var(--radius, 14px);
  font-family: inherit; font-size: 13px; font-weight: 600;
  transition: var(--transition, .28s);
}
.scr-add-card:hover { border-color: var(--accent, #3566e0); color: var(--accent, #3566e0); }
.scr-add-mark { font-size: 22px; line-height: 1; }

/* ── the wizard ───────────────────────────────────────────────────────── */
.scr-wizard {
  background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 14px); box-shadow: var(--shadow-sm);
  padding: var(--sp-4, 16px); margin-bottom: var(--sp-4, 16px);
}
.scr-wizard-head {
  display: flex; align-items: center; gap: var(--sp-2, 8px);
  margin-bottom: var(--sp-3, 12px);
}
.scr-wizard-title {
  flex: 1; font-size: var(--fs-item, 16px); font-weight: var(--fw-item, 600);
}
.scr-steps {
  display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px);
  list-style: none; margin: 0 0 var(--sp-4, 16px); padding: 0;
}
.scr-step {
  font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-muted, #6b7280);
  padding: 4px 10px; border-radius: 999px; background: var(--bg-page, #f7f8fa);
}
.scr-step.is-done { color: var(--text-secondary, #4b5563); }
.scr-step.is-current {
  color: #fff; background: var(--accent-fill, #3566e0);
}
.scr-wizard-foot {
  display: flex; flex-wrap: wrap; gap: var(--sp-2, 8px);
  margin-top: var(--sp-4, 16px);
}
.scr-field { margin-bottom: var(--sp-4, 16px); }
.scr-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary, #4b5563); margin-bottom: var(--sp-1, 4px);
}
.scr-input {
  width: 100%; max-width: 100%; box-sizing: border-box;
  min-height: 34px; padding: 8px 11px; font-size: 13px; font-family: inherit;
  background: var(--bg-card, #fff); color: var(--text-primary, #172033);
  border: 1px solid var(--border, #e5e7eb); border-radius: var(--radius-sm, 9px);
}
.scr-input:focus {
  outline: none; border-color: var(--accent, #3566e0);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(65, 128, 242, .09));
}
.scr-help {
  margin: var(--sp-1, 4px) 0 0; font-size: 12px; color: var(--text-muted, #6b7280);
  line-height: 1.5;
}
.scr-notice {
  margin: 0 0 var(--sp-3, 12px); font-size: 12.5px; line-height: 1.5;
  color: var(--text-secondary, #4b5563);
  background: var(--bg-page, #f7f8fa); border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius-sm, 9px); padding: var(--sp-3, 12px);
}
.scr-fielderr {
  margin: var(--sp-2, 8px) 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--danger, #c1153a);
}
.scr-checklist { display: flex; flex-direction: column; gap: var(--sp-1, 4px); }
.scr-checkrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3, 12px);
  padding: 6px 0; border-bottom: 1px solid var(--border-light, #eef0f3);
}
.scr-checkname { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.scr-checkopt {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-secondary, #4b5563);
}
.scr-trace { margin-top: var(--sp-3, 12px); font-size: 13px; }
.scr-trace summary { cursor: pointer; color: var(--text-secondary, #4b5563); }
.scr-trace-steps {
  margin: var(--sp-2, 8px) 0 0; padding-left: 18px;
  font-size: 12.5px; color: var(--text-secondary, #4b5563); line-height: 1.6;
}
.scr-blocked {
  padding: var(--sp-5, 24px); border-radius: var(--radius, 14px);
  background: var(--bg-card, #fff); border: 1px solid var(--border, #e5e7eb);
  color: var(--text-secondary, #4b5563);
}
.scr-skel {
  height: 96px; margin-bottom: var(--sp-3, 12px);
  border-radius: var(--radius, 14px); background: var(--scr-thumb-bg);
}

/* Screen-reader-only. The preview's provenance is meaning, not decoration. */
.scr-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* C7: one column below the narrowest card track, and the footer's four
   actions wrap instead of pushing the card wider than the viewport. */
@media (max-width: 420px) {
  .scr-grid { grid-template-columns: 1fr; }
  .scr-tiles { gap: var(--sp-2, 8px); }
  .scr-tile { flex: 1 1 auto; min-width: 88px; }
}

/* ===== widgets =====
 * ScreenWidgets (frontend/js/screens/widgets.js) — the 34 catalog kinds.
 * APPENDED block: other strands write this file, so nothing above this comment
 * is touched or reordered here.
 *
 * NO new tokens. Every value below comes off the existing scale
 * (--sp-1…6, --radius, --radius-sm, --border, --bg-card, --bg-page,
 * --text-*, --accent, --accent-soft, --danger, --shadow-*, --transition), so
 * dark mode follows for free and R5's "no token referenced that is never
 * defined" scan has nothing new to find. The four alert tones and the chip
 * tones repeat the §5.6 badge pairs verbatim — a fixed background WITH its
 * fixed ink, which is how badges already survive both themes.
 *
 * Buttons are never styled here: §5.1 says one button vocabulary, and every
 * button this module emits already carries its u-btn class.
 */

/* ── the widget box ─────────────────────────────────────────────────────── */
.scr-w { min-width: 0; }
.scr-canvas { position: relative; min-height: 320px; }
.scr-w--placed { box-sizing: border-box; overflow: auto; }

.scr-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.scr-buttonrow { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }

/* Screen-reader name for an icon-only control.
 * NAMESPACED (`scr-w-`): the surface strand declares .scr-sr / .scr-field /
 * .scr-label / .scr-input / .scr-step earlier in this same file with different
 * values, and being appended last meant these copies silently won for the
 * surface's own wizard. One class, one owner. */
.scr-w-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.scr-icon { font-family: var(--mono); line-height: 1; }

/* ── fields (§10 forms: one label, one helper, one validation voice) ────── */
.scr-w-field { margin-bottom: var(--sp-3); min-width: 0; }
.scr-w-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: var(--sp-1);
}
.scr-req { color: var(--danger); }
/* §5.7: 34px min height, --bg-card surface, explicit --text-primary ink (a bare
   control inherits UA black and vanishes in dark), accent focus + 3px ring.
   This class carries ALL of it — no control here borrows .sf-field, which is
   the Foundry prompt TEXTAREA (92px tall) and loads after this file. */
.scr-w-input {
  width: 100%; max-width: 420px; box-sizing: border-box;
  min-height: 34px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-primary);
  font-family: var(--font); font-size: 13px; transition: var(--transition);
}
.scr-w-input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.scr-select { max-width: 260px; }

.scr-check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; }
.scr-check-l { color: var(--text-primary); }
.scr-checkgroup {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3); margin: 0 0 var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.scr-checkgroup--row { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); }
.scr-toggles { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }

.scr-autocomplete { position: relative; }
.scr-suggest {
  list-style: none; margin: 0; padding: var(--sp-1); max-width: 420px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); box-shadow: var(--shadow-sm);
  max-height: 200px; overflow-y: auto;
}
.scr-suggest-i { padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.scr-suggest-i:hover { background: var(--accent-soft); }

/* ── table (§5.3 anatomy; wide content scrolls in its OWN box, never the page)
 * `.scr-table`, NOT `.scr-grid`: the surface strand's card grid earlier in this
 * file already owns `.scr-grid` (display:grid), and one selector cannot be two
 * components. Appended last, the table block used to win `border-collapse` and
 * lose `display`, so every table in every custom screen laid out as a grid —
 * thead and tbody as sibling grid items, no column alignment, no dividers. */
.scr-gridwrap {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); overflow: auto; max-width: 100%; max-height: 62vh;
}
/* separate + zero spacing, not collapse: a collapsed table drops the borders
   of a position:sticky header, and it is what `#content-area table` in
   design-review.css already imposes app-wide — stating it here means the
   same table draws the same outside that id scope (editor canvas, thumbs). */
.scr-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
/* §5.3: sticky AND opaque — a transparent header breaks on scroll (Figma #8). */
.scr-table th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-card);
  text-align: left; padding: 8px 12px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
.scr-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); }
.scr-table tbody tr:last-child td { border-bottom: 0; }
/* §5.3 row hover — the same --accent-soft the sibling table already uses. */
.scr-table tbody tr:hover td { background: var(--accent-soft); }
.scr-table .num, .scr-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* A value the source could not resolve is stated, not left blank — and it is
   MEANING, so --text-secondary rather than the muted tier (which WAS a 4.33:1
   floor here and is now 5.48:1) (§8, and the same
   call design-review.css already made for table.cs-grid td.cs-unresolved). */
/* Qualified by the table: `.scr-table td` sets --text-primary at (0,1,1), so a
   bare `.scr-unresolved` at (0,1,0) LOST and the cell painted as if it had
   resolved. The same trap design-review.css avoids with `td.cs-unresolved`. */
.scr-table td.scr-unresolved, .scr-unresolved { color: var(--text-secondary); font-style: italic; }
.scr-table td.scr-empty-cell, .scr-empty-cell {
  color: var(--text-secondary); text-align: center; padding: var(--sp-5) var(--sp-3);
}

.scr-sectionhead { margin-bottom: var(--sp-3); }
.scr-sectionhead-t { font-size: var(--fs-item); font-weight: 600; margin: 0 0 var(--sp-1); }
.scr-gridhost { min-width: 0; }
.scr-scan { margin-bottom: var(--sp-3); }

/* ── chips, alerts, cards ───────────────────────────────────────────────── */
.scr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #f1f2f4; color: #374151;
}
.scr-chip--info    { background: #dbeafe; color: #1e40af; }
.scr-chip--success { background: #d1fae5; color: #065f46; }
.scr-chip--warning { background: #fef3c7; color: #92400e; }
.scr-chip--danger  { background: #fee2e2; color: #991b1b; }

.scr-alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  margin-bottom: var(--sp-3); background: #dbeafe; color: #1e40af;
}
.scr-alert--success { background: #d1fae5; color: #065f46; }
.scr-alert--warning { background: #fef3c7; color: #92400e; }
.scr-alert--error   { background: #fee2e2; color: #991b1b; }
.scr-alert-body { flex: 1; min-width: 0; }
.scr-alert-t { margin: 0 0 2px; font-weight: 600; font-size: 13px; }
.scr-alert-m { margin: 0; font-size: 13px; line-height: 1.45; }

.scr-cardw {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-3); overflow: hidden;
}
.scr-cardw-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light); }
.scr-cardw-t { margin: 0; font-size: var(--fs-item); font-weight: 600; }
.scr-cardw-body { padding: var(--sp-4); font-size: var(--fs-body); }

/* ── dialog, drawer ─────────────────────────────────────────────────────── */
.scr-dialog {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-card); box-shadow: var(--shadow-lg);
  max-width: 560px; margin-top: var(--sp-3); overflow: hidden;
}
.scr-dialog-head { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light); }
.scr-dialog-t { margin: 0; font-size: var(--fs-item); font-weight: 600; }
.scr-dialog-body { padding: var(--sp-4); }
.scr-dialog-foot {
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-light);
  display: flex; justify-content: flex-end; gap: var(--sp-2);
}
.scr-drawer {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow-md);
  margin-top: var(--sp-3); max-width: 380px; overflow: hidden;
}
.scr-drawer--left, .scr-drawer--right { max-width: 380px; }
.scr-drawer--top, .scr-drawer--bottom { max-width: none; }
.scr-drawer-head {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.scr-drawer-body { padding: var(--sp-4); font-size: var(--fs-body); }

/* ── tabs (§5.4 — ONE tab style; the underline, nothing new) ────────────── */
.scr-tabs { margin-bottom: var(--sp-3); }
.scr-tabbar { display: flex; gap: var(--sp-4); border-bottom: 1px solid var(--border); }
.scr-tab {
  background: none; border: 0; padding: 8px 2px; cursor: pointer;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  color: var(--text-secondary); border-bottom: 2px solid transparent;
  transition: var(--transition);
}
.scr-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.scr-tabpanels { padding-top: var(--sp-3); font-size: var(--fs-body); }

/* ── stepper ────────────────────────────────────────────────────────────── */
.scr-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); }
.scr-stepper--horizontal { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.scr-stepper--vertical { flex-direction: column; }
/* .scr-stepper-step, not .scr-step: the surface strand's wizard rail owns
   .scr-step (a pill) earlier in this file. --text-secondary, not --text-muted:
   a pending step's label names the step, which is meaning. */
.scr-stepper-step {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  flex: 1 1 0; min-width: 120px; padding: var(--sp-2) var(--sp-3);
  border-top: 3px solid var(--border); color: var(--text-secondary); font-size: 13px;
}
.scr-stepper-step.is-active { border-top-color: var(--accent); color: var(--text-primary); }
.scr-stepper-step.is-done { border-top-color: var(--accent-soft); color: var(--text-secondary); }
.scr-step-n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
  background: var(--bg-page); border: 1px solid var(--border);
  font-size: 11px; font-weight: 700; text-align: center; line-height: 19px;
}
.scr-stepper-step.is-active .scr-step-n { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.scr-step-b { display: flex; flex-direction: column; min-width: 0; }
.scr-step-l { font-weight: 600; }
.scr-stepbody {
  padding: var(--sp-4) 0; border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light); margin-bottom: var(--sp-3);
}

/* ── image, upload, action bar, filters ─────────────────────────────────── */
.scr-imagew { margin-bottom: var(--sp-3); }
.scr-image { max-width: 100%; border-radius: var(--radius-sm); display: block; }
.scr-image-ph {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: var(--sp-5); text-align: center; color: var(--text-secondary); font-size: 12px;
}
.scr-upload { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.scr-actionbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-card); margin-bottom: var(--sp-3);
}
.scr-actionbar-n { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.scr-menu {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); box-shadow: var(--shadow-md);
}
.scr-filterpanel {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); margin-bottom: var(--sp-3);
}
.scr-filterpanel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light);
}
.scr-filtersections { padding: var(--sp-3) var(--sp-4); }
.scr-filtersection { margin-bottom: var(--sp-3); }
.scr-managecols {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4); background: var(--bg-card); margin-bottom: var(--sp-3);
}
.scr-managecols-list { display: flex; flex-direction: column; gap: var(--sp-2); }

/* ── the confirm block — one shape for every final step ─────────────────── */
.scr-confirm {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-page); padding: var(--sp-4); margin-top: var(--sp-3);
}
.scr-confirm-title { margin: 0 0 var(--sp-1); font-size: var(--fs-item); font-weight: 600; }
.scr-confirm .scr-row { margin-top: var(--sp-3); justify-content: flex-end; }

/* ── the 6 compounds ────────────────────────────────────────────────────── */
.scr-src { display: flex; flex-direction: column; gap: var(--sp-3); }

.scr-sidebar { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.scr-sidebar-left { min-width: 0; }
.scr-sidebar-results { margin-top: var(--sp-3); }
.scr-sidebar-detail {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: var(--sp-4); min-width: 0;
}
.scr-resultlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.scr-resultbtn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 13px; color: var(--text-primary);
  transition: var(--transition);
}
.scr-resultbtn:hover { background: var(--accent-soft); }
.scr-detail-head { margin-bottom: var(--sp-3); }
.scr-detail-fields {
  margin: 0 0 var(--sp-3); display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: var(--sp-1) var(--sp-3);
}
.scr-detail-k { font-size: 11px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-secondary); }
.scr-detail-v { margin: 0; font-size: 13px; color: var(--text-primary); }

.scr-gridform { display: flex; flex-direction: column; gap: var(--sp-3); }
.scr-filterrow { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.scr-filterrow .scr-w-field { margin-bottom: 0; }

.scr-barcodeform { display: flex; flex-direction: column; gap: var(--sp-3); }
.scr-dims { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.scr-dims .scr-w-field { margin-bottom: 0; }
.scr-dims .scr-w-input { max-width: 140px; }

.scr-deploystepper { display: flex; flex-direction: column; gap: var(--sp-2); }
.scr-routingflow { display: flex; flex-direction: column; gap: var(--sp-3); }
.scr-routingform {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); padding: var(--sp-4);
}

/* ── narrow viewports: panels stack, tables scroll in their own box ─────── */
@media (max-width: 760px) {
  .scr-sidebar { grid-template-columns: minmax(0, 1fr); }
  .scr-dims .scr-w-input { max-width: none; }
  .scr-stepper-step { min-width: 0; flex-basis: 100%; }
  .scr-canvas { position: static; }
  .scr-w--placed { position: static !important; width: auto !important; height: auto !important; }
}

/* ===== the add-card is a card, not a pill =====
 * design-review.css §13.1 pills every `#content-area button`, which is right
 * for the seven button kinds and wrong for this one: the add slot is a
 * card-shaped drop target sitting in a grid of cards, and a 999px radius drew
 * it as a circle beside a rectangle. data-no-norm does not help — that opts out
 * of the runtime classifier, and this is the stylesheet's own blanket rule.
 * Matched at the same id scope so it wins on specificity rather than
 * !important, and scoped to this one class so no other button is affected.
 */
#content-area .scr-add-card { border-radius: var(--radius, 14px); }