/* data-input.css — LAT-1720 / LAT-1739 / LAT-1736. Shared styling for the
 * data-input component so every surface renders byte-identically.
 *
 * THEME TOKENS (LAT-1739). All accents flow through --di-* custom properties.
 * The default theme is the tier green #059669 — free tools are the
 * explore/PAYG tier per platform-intel/docs/website/COLOR_HIERARCHY.intel.md.
 * Account surfaces (create/run-analysis) mount with config.theme:'brand',
 * which adds .di-th-brand and flips the accent to the brand orange #C65000.
 * Never hard-code an accent below — add a token. */

.di {
  --di-accent: #059669;        /* tier green — explore/free surfaces */
  --di-accent-deep: #047857;   /* hover / pressed */
  --di-accent-soft: #ecfdf5;   /* tint ground */
  display: flex; flex-direction: column; gap: 12px; width: 100%;
}
.di.di-th-brand {
  --di-accent: #C65000;        /* brand orange — account surfaces */
  --di-accent-deep: #a34200;
  --di-accent-soft: #fff7ed;
}

/* ── LAT-2239: the breadcrumb trail — done stages become clickable crumbs ── */
.di-crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; color: #64748b; }
.di-crumb { display: inline-flex; align-items: center; gap: 5px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 20px; padding: 3px 11px; font: inherit;
  font-size: 12.5px; font-weight: 500; color: #334155; cursor: pointer; }
.di-crumb:hover { border-color: var(--di-accent); color: #0f172a; }
.di-crumb:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 2px; }
.di-crumb.now { border-color: var(--di-accent); background: var(--di-accent-soft);
  color: #0f172a; font-weight: 600; cursor: default; }
.di-crumb-tick { color: #1a7f4b; font-weight: 700; }
.di-crumb-sep, .di-crumb-ahead { color: #94a3b8; }

/* LAT-2239: the doors are source CARDS on their own stage (was an underline
   tab strip). Same .di-tab class so hosts and e2es keep addressing them. */
.di-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.di-tab {
  appearance: none; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px;
  padding: 16px 12px; font: inherit; text-align: center; color: #334155; cursor: pointer;
  transition: border-color .12s;
}
.di-tab:hover { border-color: var(--di-accent); }
.di-tab:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 2px; }
.di-tab.on { border-color: var(--di-accent); background: var(--di-accent-soft); }
.di-tab .di-tab-ic { display: block; font-size: 21px; line-height: 1.2; }
.di-tab b { display: block; font-size: 14px; color: #0f172a; margin-top: 5px; }
.di-tab .di-tab-sub { display: block; font-size: 12px; color: #64748b; margin-top: 1px; }
.di-tab-gated::after { content: " 🔒"; font-size: 11px; }

.di-panel { min-height: 96px; }

.di-drop {
  border: 1.5px dashed #cbd5e1; border-radius: 12px; padding: 26px 18px; text-align: center;
  background: #f8fafc; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.di-drop.over { border-color: var(--di-accent); background: var(--di-accent-soft); }
.di-drop:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 2px; }
.di-drop-icon { font-size: 26px; }
.di-drop strong { color: #0f172a; font-size: 15px; }
.di-drop span { color: #64748b; font-size: 13px; }

.di-link { display: flex; flex-direction: column; gap: 8px; }
.di-link label { font-size: 13px; color: #475569; font-weight: 600; }
.di-link-row { display: flex; gap: 8px; }
.di-link-row input {
  flex: 1; font: inherit; font-size: 14px; padding: 9px 11px;
  border: 1px solid #cbd5e1; border-radius: 8px;
}
.di-link-row input:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 1px; border-color: var(--di-accent); }

.di-cta {
  appearance: none; border: 0; border-radius: 8px; background: var(--di-accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; cursor: pointer;
}
.di-cta:hover { background: var(--di-accent-deep); }
.di-cta:disabled { opacity: .6; cursor: default; }
.di-cta:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 2px; }

.di-wall {
  text-align: center; padding: 22px 18px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 12px; display: flex; flex-direction: column;
  gap: 8px; align-items: center;
}
.di-wall-icon { font-size: 30px; }
.di-wall h4 { margin: 0; color: #0f172a; font-size: 16px; }
.di-wall p { margin: 0; color: #64748b; font-size: 13.5px; max-width: 44ch; }
.di-wall .di-cta { margin-top: 6px; }

.di-result { display: none; }
.di-busy { display: flex; align-items: center; gap: 10px; color: #475569; font-size: 14px; padding: 8px 2px; }
.di-spin {
  width: 15px; height: 15px; border: 2px solid #cbd5e1; border-top-color: var(--di-accent);
  border-radius: 50%; animation: di-rot .7s linear infinite; flex: none;
}
@keyframes di-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .di-spin { animation: none; } }

/* (.di-picked retired in LAT-2239 — the check-stage header carries the name) */

/* ── LAT-2239: Excel-style sheet tabs, attached to the grid's top edge ────── */
.di-check-head { padding: 2px 2px 0; }
.di-check-h { margin: 0 0 2px; font-size: 16px; color: #0f172a; }
.di-check-sub { font-size: 13px; color: #64748b; }
.di-check-sub b { color: #0f172a; }

.di-stabs { display: flex; gap: 2px; align-items: flex-end; padding-left: 8px;
  margin-top: 4px; overflow-x: auto; }
.di-stab {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  color: #64748b; background: #f8fafc; border: 1px solid #e2e8f0; border-bottom: none;
  border-radius: 8px 8px 0 0; padding: 7px 14px 6px; white-space: nowrap; flex: none;
}
.di-stab:hover { color: #0f172a; }
.di-stab:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 2px; }
.di-stab.on { background: #fff; color: #0f172a; border-color: var(--di-accent);
  border-bottom: 2px solid #fff; margin-bottom: -1px; position: relative; z-index: 4; }
.di-stab .di-dim { font-size: 11px; font-weight: 400; color: #94a3b8; font-variant-numeric: tabular-nums; margin-left: 4px; }
.di-stab .di-thin { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #b45309; margin-left: 4px; }
.di-grid-wrap.tabbed { border-radius: 0 10px 10px 10px; margin-top: 0; }

.di-prev { margin-top: 4px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.di-prev-scroll { overflow-x: auto; }
.di-prev table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.di-prev th, .di-prev td { border: 1px solid #eef2f6; padding: 5px 9px; text-align: left; white-space: nowrap; color: #334155; }
.di-prev th { background: #f8fafc; color: #64748b; font-weight: 600; position: sticky; top: 0; }
.di-prev-foot { padding: 7px 11px; background: #f8fafc; border-top: 1px solid #e2e8f0; font-size: 12.5px; color: #64748b; }

.di-go { align-self: flex-start; margin: 4px 0 12px; }   /* LAT-1904: sits above the grid */
.di-note { color: #64748b; font-size: 13px; }
.di-err { color: #b91c1c; font-size: 13.5px; padding: 4px 0; }

/* connector states (LAT-1720/1736) — the list is identical across surfaces; the
 * provider's ConnectorState decides which state renders. */
.di-conn-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; margin: 2px 0 8px; }
.di-conn-list { display: flex; flex-direction: column; gap: 6px; }
.di-conn {
  appearance: none; cursor: pointer; font: inherit; text-align: left; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
}
.di-conn:hover, .di-conn.sel { border-color: var(--di-accent); background: var(--di-accent-soft); }
.di-conn-ic { font-size: 18px; flex: none; }
.di-conn-nm { flex: 1; font-size: 14px; color: #0f172a; font-weight: 600; min-width: 0; }
.di-conn-nm .di-conn-st { display: block; font-size: 12px; color: var(--di-accent); font-weight: 600; margin-top: 1px; }
.di-conn-cta { font-size: 13px; color: var(--di-accent); font-weight: 600; }
.di-conn-manage { display: inline-block; margin-top: 8px; font-size: 12.5px; color: #64748b; }
.di-conn-manage:hover { color: var(--di-accent); }

/* the connector pull card (LAT-1736 — ported from create-analysis LAT-1291) */
.di-pull { border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; padding: 14px 15px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.di-pull h5 { margin: 0 0 2px; font-size: 14px; color: #0f172a; }
.di-pull label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.di-sel {
  font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid #cbd5e1;
  border-radius: 8px; background: #fff; color: #334155; max-width: 100%;
}
.di-sel:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 1px; border-color: var(--di-accent); }
.di-pull .di-cta { align-self: flex-start; margin-top: 4px; }

/* "more sources on the way" chips (LAT-1736 — ported from create-analysis) */
.di-conn-soon { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e2e8f0; }
.di-conn-soon h6 { margin: 0 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; font-weight: 600; }
.di-conn-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.di-conn-chip { font-size: 12px; color: #64748b; background: #f1f5f9; border-radius: 999px; padding: 4px 10px; }

/* the Open door (LAT-1736 — ported from the LAT-1232 dataset panel) */
.di-open-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.di-open-head h4 { margin: 0; font-size: 14px; color: #0f172a; }
.di-open-count { font-weight: 400; color: #94a3b8; font-size: 13px; }
.di-clear { background: none; border: 0; font: inherit; font-size: 12.5px; color: var(--di-accent); cursor: pointer; padding: 2px 4px; }
.di-filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 10px; }
.di-search { position: relative; flex: 1 1 180px; display: flex; align-items: center; }
.di-search svg { position: absolute; left: 9px; width: 14px; height: 14px; color: #94a3b8; pointer-events: none; }
.di-search input {
  width: 100%; font: inherit; font-size: 13.5px; padding: 8px 10px 8px 29px;
  border: 1px solid #cbd5e1; border-radius: 8px;
}
.di-search input:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 1px; border-color: var(--di-accent); }
.di-ds-list { display: flex; flex-direction: column; gap: 6px; }
.di-ds {
  appearance: none; cursor: pointer; font: inherit; text-align: left; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
}
.di-ds:hover { border-color: var(--di-accent); background: var(--di-accent-soft); }
.di-ds.di-unusable { opacity: .62; } /* LAT-1931: was inline style="opacity:.62" (unusable dataset, LAT-1397) */
.di-ds-nm { flex: 1; min-width: 0; font-size: 14px; color: #0f172a; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-ds-meta { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.di-more {
  appearance: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--di-accent);
  background: none; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 12px;
  cursor: pointer; margin-top: 8px; align-self: center;
}
.di-more:hover { border-color: var(--di-accent); background: var(--di-accent-soft); }

/* the Paste door (LAT-1736 — ported from create-analysis's v2-upaste) */
.di-paste { display: flex; flex-direction: column; gap: 8px; }
.di-paste textarea {
  width: 100%; min-height: 110px; border: 1.5px solid #e2e8f0; border-radius: 11px;
  padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: #334155; resize: vertical; box-sizing: border-box;
}
.di-paste textarea:focus { outline: none; border-color: var(--di-accent); box-shadow: 0 0 0 3px var(--di-accent-soft); }
.di-paste-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.di-paste-foot span { font-size: 12px; color: #94a3b8; }

/* ── LAT-1720 v2: bigger preview + subset/range selection ──────────────────── */
.di-panel { min-height: 130px; }
.di-drop { padding: 34px 18px; }
.di-result { margin-top: 4px; }

/* LAT-2239: the Read scope row — first-class, never behind a toggle */
.di-scope { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 10px 0 2px; }
.di-scope-lbl { font-size: 13px; font-weight: 600; color: #0f172a; }
.di-scope label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px;
  color: #334155; cursor: pointer; }
.di-scope input[type="radio"] { accent-color: var(--di-accent); width: 15px; height: 15px; margin: 0; }
.di-scope-cap { font-size: 12px; color: #64748b; margin-top: 2px; }
.di-scope-cap b { color: #0f172a; }
.di-range { font-family: ui-monospace, Menlo, monospace; font-size: 13px; width: 11ch; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 6px; text-transform: uppercase; }
.di-range:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 1px; border-color: var(--di-accent); }
.di-range.bad { border-color: #b45309; background: #fffbeb; }
.di-range:disabled { background: #f8fafc; color: #94a3b8; }

/* LAT-2239: the sticky CTA bar — "Use this data" stays on screen while the
   grid scrolls (LAT-1904's point, kept without inverting the page order) */
.di-ctabar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 12px;
  justify-content: flex-end; align-items: center; padding: 12px 0 10px; margin-top: 4px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 40%); }
.di-ctanote { font-size: 12.5px; color: #64748b; margin-right: auto; }
.di-ctabar .di-go { font-size: 15px; padding: 11px 26px; box-shadow: 0 4px 14px rgba(15,23,42,.16); }

/* the coordinate grid — bigger, scrollable, spreadsheet-style.
 * NOTE the selection highlight is deliberately theme-INDEPENDENT amber — it is
 * the spreadsheet-select convention, not an accent (operator-approved on the
 * free tools; keep identical on both themes). */
.di-grid-wrap { max-height: 460px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 10px; margin-top: 2px; }
table.di-grid { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 100%; }
table.di-grid th, table.di-grid td { border: 1px solid #eef2f6; padding: 7px 12px; text-align: left; white-space: nowrap; }
/* LAT-1805 — the <tbody> is VIRTUALIZED (renderGridBody), so row height must be
   FIXED and must match ROW_H in data-input.js. If these two drift, the spacer
   rows lie about scrollHeight and the row under the cursor stops matching the
   row that gets selected — the off-by-one class LAT-1720 already paid for. */
table.di-grid tbody tr[data-r] { height: 31px; }
table.di-grid tbody tr[data-r] th, table.di-grid tbody tr[data-r] td {
  height: 31px; box-sizing: border-box; overflow: hidden;
}
/* Spacers stand in for the rows not currently materialised. They carry no
   cells, so they must never take a border or padding. */
table.di-grid tr.di-spacer { padding: 0; border: 0; }
table.di-grid tr.di-spacer td, table.di-grid tr.di-spacer th { padding: 0; border: 0; }
table.di-grid td { color: #334155; background: #fff; }
table.di-grid .di-colh, table.di-grid .di-rowh, table.di-grid .di-corner { background: #f1f5f9; color: #94a3b8; text-align: center; font-weight: 500; position: sticky; }
table.di-grid thead .di-colh { top: 0; z-index: 2; }
table.di-grid .di-hdr { background: #f8fafc; color: #0f172a; font-weight: 600; position: sticky; top: 27px; z-index: 1; }
table.di-grid .di-rowh { left: 0; z-index: 1; min-width: 34px; }
table.di-grid .di-corner { left: 0; top: 0; z-index: 3; }
/* the header row (row 1) — visually distinct, still selectable */
table.di-grid .di-hdrrow td { background: #f8fafc; color: #0f172a; font-weight: 600; }
/* slicing mode. NOTE `slicing` sits on .di-grid-wrap (the scroll container), NOT
   on the table — targeting `table.di-grid.slicing` never matched, which is why
   the selection applied in the DOM but never highlighted. */
/* LAT-2239: the drag is always armed, so the affordance is always on */
.di-grid-wrap tbody td { cursor: cell; }
.di-grid-wrap.slicing td { cursor: cell; user-select: none; }
.di-grid-wrap.slicing td.in { background: #fde9cf !important; color: #0f172a; }
.di-grid-wrap.slicing td.e-t { box-shadow: inset 0 2px 0 #b45309; }
.di-grid-wrap.slicing td.e-b { box-shadow: inset 0 -2px 0 #b45309; }
.di-grid-wrap.slicing td.e-l { border-left: 2px solid #b45309; }
.di-grid-wrap.slicing td.e-r { border-right: 2px solid #b45309; }
.di-grid-wrap.slicing .di-hdrrow td.in { background: #f6dcb8 !important; }

/* ── LAT-1806: the row-cap panel ────────────────────────────────────────────
   Sits ABOVE the subset switch: "how much of this file gets analysed" is the
   first decision, and one of its options leads into the subset control below.

   HIERARCHY MATTERS HERE. The first cut gave the flag and the SELECTED option
   the same --di-accent-soft ground, so the whole panel rendered as one flat
   tinted block with nothing to read first — it looked unstyled even though every
   rule applied. The flag is now a STATEMENT (accent rule on the left, no card),
   and the options are the only cards, so statement -> choices reads top-down.

   Accents flow through --di-accent per this file's rule, so the panel is green
   on free surfaces and orange on account ones with no second implementation.
   --di-stop is SEMANTIC and deliberately not the accent: a tool refusing a
   sample must not read as ordinary branded emphasis. */
.di { --di-stop: #9f2d26; --di-stop-soft: #fdf0ef; }

/* text-align:left is NOT redundant. The free tool mounts this inside
   `#step-drop { text-align: center }`, which centred every short line while
   leaving wrapped ones looking left-aligned — so option titles sat in the middle
   and their own subtitles did not. A control that reads differently depending on
   which surface hosts it is the drift this shared module exists to prevent. */
.di-cap { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 2px;
  text-align: left; }
.di-cap b, .di-cap strong, .di-cap span, .di-cap a { text-align: left; }

/* the statement */
.di-cap-flag { display: flex; gap: 10px; align-items: flex-start;
  padding: 2px 0 2px 12px; border-left: 3px solid var(--di-accent); }
.di-cap-flag.stop { border-left-color: var(--di-stop); }
.di-cap-ic { display: none; }                    /* the rule carries the signal */
.di-cap-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.di-cap-tx strong { font-size: 14px; color: #0f172a; font-weight: 650; line-height: 1.35; }
.di-cap-tx span { font-size: 12.5px; color: #64748b; line-height: 1.45; }
.di-cap-flag.stop .di-cap-tx strong { color: var(--di-stop); }

/* the choices — the only cards in the panel */
.di-cap-opts { display: flex; flex-direction: column; gap: 6px; }
.di-cap-opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px;
  border: 1px solid #e2e8f0; border-radius: 9px; background: #fff; cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s; }
.di-cap-opt:hover { border-color: #cbd5e1; background: #fcfdfe; }
.di-cap-opt.on { border-color: var(--di-accent); background: var(--di-accent-soft);
  box-shadow: inset 0 0 0 1px var(--di-accent); }
.di-cap-opt.off { opacity: .45; cursor: not-allowed; background: #f8fafc; }
.di-cap-opt.off:hover { border-color: #e2e8f0; background: #f8fafc; }
.di-cap-opt:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 2px; }
.di-cap-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 2px;
  border: 1.5px solid #cbd5e1; background: #fff; }
.di-cap-opt.on .di-cap-dot { border-color: var(--di-accent); border-width: 4px; }
.di-cap-otx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.di-cap-otx b { font-size: 13px; font-weight: 620; color: #0f172a; line-height: 1.35; }
.di-cap-otx span { font-size: 12px; color: #64748b; line-height: 1.4; }
/* what will actually be analysed — the feedback the choice previously lacked */
.di-cap-effect { font-size: 12px; color: #475569; padding: 7px 10px;
  background: #f8fafc; border: 1px solid #eef2f6; border-radius: 7px; }
.di-cap-effect b { color: #0f172a; font-variant-numeric: tabular-nums; }
/* rows past a "first N" boundary, when it falls inside the loaded window */
table.di-grid tbody tr[data-cut] td { color: #cbd5e1; text-decoration: line-through; }
table.di-grid tbody tr[data-cut] .di-rowh { color: #cbd5e1; }
.di-cap-up { font-size: 12px; color: #64748b; padding-left: 15px; }
.di-cap-up a { color: var(--di-accent); text-decoration: none; font-weight: 600; }
.di-cap-up a:hover { color: var(--di-accent-deep); text-decoration: underline; }

/* LAT-1720: subset tutorial callout — appears when subsetting is first enabled */
.di-tut { position: relative; margin: 10px 0 4px; padding: 12px 34px 12px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; font-size: 13px; color: #7c2d12; }
.di-tut-h { font-weight: 700; margin-bottom: 6px; color: #9a3412; }
.di-tut-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.di-tut-list li { line-height: 1.45; }
.di-tut code { font-family: ui-monospace, Menlo, monospace; font-size: 0.92em; background: #ffedd5; padding: 1px 5px; border-radius: 4px; color: #9a3412; }
.di-tut-eg { margin-top: 8px; font-size: 12.5px; color: #9a3412; }
.di-tut-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 20px; line-height: 1; color: #c2660e; cursor: pointer; padding: 2px 6px; }
.di-tut-x:hover { color: #7c2d12; }

/* LAT-1898 — the optional describe-your-data note; LAT-2239 moved it to its
   own context stage after "Use this data" and made it a textarea */
.di-desc-label { display:block; margin:14px 0 4px; font-size:13px; font-weight:600; color:var(--di-text,#1a1a1a); }
.di-desc-label span { font-weight:400; color:#6b7280; }
.di-desc { display:block; width:100%; max-width:560px; padding:9px 12px; margin:0 0 12px;
  border:1px solid #d1d5db; border-radius:8px; font-size:14px; font-family:inherit;
  resize:vertical; min-height:70px; }
.di-desc:focus { outline:none; border-color:var(--di-accent); box-shadow:0 0 0 3px var(--di-accent-soft); }

/* ── LAT-2125: the header question, in the preview ──────────────────────────
   A warning-toned panel (amber, distinct from the accent) that raises exactly
   one question the true grid poses: row 1 is data — what are the columns? */
.di-hdrflag {
  border: 1px solid #f5c97a; border-left: 4px solid #d98a1a;
  background: #fffaf0; border-radius: 8px; padding: 14px 16px; margin: 12px 0;
  box-shadow: 0 1px 3px rgba(122, 75, 6, .08);
}
/* LAT-2187 rework: the naming grid IS the banner now (one state), so the
   panel keeps the amber attention tone throughout — it is a question that
   wants an answer, not a settled step. The grid caps at ~3 rows and scrolls
   so a 52-column workbook doesn't swallow the page. */
.di-hdrflag.naming { border-left-color: #d98a1a; background: #fffaf0; }
.di-hdrflag-h { font-weight: 700; font-size: 15px; color: #7a4b06; margin-bottom: 4px; }
.di-hdrflag.naming .di-hdrflag-h { color: #7a4b06; }
.di-hdrflag.naming .di-namegrid { max-height: 178px; overflow-y: auto;
  padding: 2px; scrollbar-width: thin; }
.di-hdrflag-p { font-size: 13px; color: #4a3a1e; line-height: 1.5; }
.di-hdrflag-p code { font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: #fff2d6; padding: 1px 4px; border-radius: 3px; }
.di-hdrflag-acts { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.di-hdr-btn {
  appearance: none; border: 1px solid #d8dee6; border-radius: 7px; background: #fff;
  color: #0f172a; font-size: 12.5px; font-weight: 550; padding: 7px 12px; cursor: pointer;
}
.di-hdr-btn:hover { border-color: #94a3b8; }
.di-hdr-btn:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 2px; }
.di-hdr-btn.pri { background: var(--di-accent); border-color: var(--di-accent); color: #fff; }
.di-hdr-btn.pri:hover { background: var(--di-accent-deep); }
.di-hdr-btn[disabled] { opacity: .6; cursor: default; }
/* LAT-3542 — the 7 advisory dataset-shape findings. Deliberately calmer than
   .di-hdrflag (amber/warning): these never need an answer, so a quieter,
   neutral-blue "for your information" tone keeps them from competing
   visually with an actual header decision above. */
.di-advisory { border: 1px solid #dbe4f3; border-left: 4px solid #6b8fc4;
  background: #f4f7fc; border-radius: 8px; padding: 12px 14px; margin: 12px 0; }
.di-adv-item { font-size: 13.5px; line-height: 1.5; color: #33415c; }
.di-adv-item + .di-adv-item { margin-top: 8px; }
.di-adv-more { margin-top: 8px; }
.di-adv-more summary { font-size: 12.5px; color: #5b6f94; cursor: pointer; }
.di-adv-more .di-adv-item { margin-top: 8px; }

.di-namegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin: 10px 0 2px; }
.di-namecell { display: flex; flex-direction: column; gap: 3px; }
.di-namecol { font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  letter-spacing: .06em; color: #64748b; text-transform: uppercase; }
.di-nameinput {
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 8px; font-size: 13px;
  color: #0f172a; background: #fff; width: 100%; box-sizing: border-box;
}
.di-nameinput:focus-visible { outline: 2px solid var(--di-accent); outline-offset: 1px; border-color: var(--di-accent); }

/* LAT-2464: the tap-to-accept description suggestion (describe stage). A chip
   the user takes and edits, never a silent prefill - the box is the LAT-1898
   human-signal channel. */
.di-suggest { margin: 8px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.di-suggest-lab { font-size: 12px; color: var(--di-muted, #64748b); font-weight: 600; white-space: nowrap; }
.di-suggest-chip { font: inherit; font-size: 13px; text-align: left; color: inherit; background: var(--di-soft, #f8fafc); border: 1px dashed var(--di-line, #cbd5e1); border-radius: 8px; padding: 7px 11px; cursor: pointer; line-height: 1.45; max-width: 100%; }
.di-suggest-chip:hover { border-style: solid; border-color: var(--di-accent, #C65000); }
.di-suggest-chip:focus-visible { outline: 2px solid var(--di-accent, #C65000); outline-offset: 2px; }

/* LAT-3714: layout:'surface', the one-screen source step (Option B,
   operator 2026-08-27; was /analyze-dataset's own .az-src-grid). Upload owns
   the left, every other door is live in the right rail. Default in free mode.
   Accents flow through the --di-* tokens, so free stays green, brand orange. */
.di-surface { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .di-surface { grid-template-columns: 1fr; } }
.di-surface-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.di-example { text-align: center; }
.di-example-btn { background: none; border: none; padding: 4px 2px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--di-accent-deep, #C65000); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.di-example-btn:hover { color: var(--di-accent, #C65000); }
.di-example-btn:focus-visible { outline: 2px solid var(--di-accent, #C65000); outline-offset: 2px; border-radius: 4px; }
.di-surface-drop { min-height: 220px; justify-content: center; gap: 6px; }
.di-surface-drop strong { color: #0f172a; font-size: 16px; }
.di-surface-drop span { color: #64748b; font-size: 13px; }
.di-surface-drop:hover { border-color: var(--di-accent); background: var(--di-accent-soft); }
.di-surface-sub { color: #94a3b8 !important; font-size: 12px !important; }
.di-rail { display: flex; flex-direction: column; gap: 14px; justify-content: center; text-align: left; min-width: 0; }
.di-rail-item { display: flex; flex-direction: column; gap: 7px; }
.di-rail-item label { font-size: 12.5px; color: #475569; font-weight: 600; text-align: left; }
.di-rail-item select, .di-rail-row input {
  width: 100%; font: inherit; font-size: 13.5px; padding: 9px 11px;
  border: 1px solid #cbd5e1; border-radius: 8px; color: #334155; background: #fff; box-sizing: border-box; }
.di-rail-row { display: flex; gap: 6px; }
.di-rail-row input { flex: 1; min-width: 0; }
.di-rail-item select:focus-visible, .di-rail-row input:focus-visible {
  outline: 2px solid var(--di-accent); outline-offset: 1px; border-color: var(--di-accent); }
.di-rail-go, .di-rail-btn {
  border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font: inherit;
  font-size: 13.5px; font-weight: 600; padding: 9px 13px; cursor: pointer; text-align: left; }
.di-rail-go { background: var(--di-accent); border-color: var(--di-accent); color: #fff; text-align: center; }
.di-rail-go:hover { background: var(--di-accent-deep); }
.di-rail-btn:hover { border-color: var(--di-accent); color: var(--di-accent-deep); }
.di-restart { margin-top: 2px; }
.di-restart-btn { background: none; border: none; padding: 4px 0; font: inherit; font-size: 13px;
  color: #64748b; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.di-restart-btn:hover { color: #0f172a; }

/* LAT-3726 (LAT-3721): a BLOCKING finding, e.g. shape.not_tabular. Sits above
   every other question in the check stage; "Use this data" is disabled until it
   is answered. Red-toned on purpose: it is the one banner that stops the flow. */
.di-block { border-left: 4px solid #b91c1c; background: #fef6f6; border-radius: 0 10px 10px 0;
  padding: 14px 16px; text-align: left; }
.di-block-h { font-weight: 700; color: #1f2937; font-size: 15px; margin-bottom: 4px; }
.di-block-p { color: #4b5563; font-size: 13.5px; line-height: 1.5; margin-bottom: 10px; }
.di-block-btn { border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font: inherit;
  font-size: 13.5px; font-weight: 600; padding: 8px 13px; cursor: pointer; margin: 0 8px 6px 0; }
.di-block-btn.pri { background: var(--di-accent); border-color: var(--di-accent); color: #fff; }
.di-block-btn.pri:hover { background: var(--di-accent-deep); }
.di-block-btn:disabled { opacity: .6; cursor: default; }
.di-try { min-height: 44px; padding-left: 18px; padding-right: 18px; }  /* LAT-4077: the exit from an unreadable upload; a phone tap target */
.di-go:disabled { opacity: .45; cursor: not-allowed; }