/* 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;
}

.di-tabs { display: flex; gap: 0; border-bottom: 1px solid #e2e8f0; }
.di-tab {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 14px; font: inherit; font-size: 14px; color: #64748b; cursor: pointer;
}
.di-tab:hover { color: #0f172a; }
.di-tab.on { color: var(--di-accent); border-bottom-color: var(--di-accent); font-weight: 600; }
.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 { font-size: 14px; color: #0f172a; padding: 2px; }
.di-picked b { font-weight: 600; }

.di-sheets { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; }
.di-sheets-lbl { font-size: 13px; color: #475569; margin-bottom: 8px; }
.di-sheets-lbl b { color: #0f172a; }
.di-sheets-row { display: flex; gap: 6px; flex-wrap: wrap; }
.di-sheet {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; padding: 6px 11px;
  border: 1px solid #cbd5e1; border-radius: 6px; background: #fff; color: #475569;
  display: inline-flex; align-items: center; gap: 6px;
}
.di-sheet:hover { border-color: #94a3b8; color: #0f172a; }
.di-sheet.on { background: var(--di-accent); border-color: var(--di-accent); color: #fff; font-weight: 600; }
.di-sheet .di-dim { font-size: 11px; opacity: .8; font-variant-numeric: tabular-nums; }
.di-sheet .di-thin { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #b45309; }
.di-sheet.on .di-thin { color: #fde68a; }

.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-top: 2px; }
.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-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; }

/* subset toggle row */
.di-subset { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 6px; }
.di-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: #334155; }
.di-switch input { position: absolute; opacity: 0; pointer-events: none; }
.di-track { width: 36px; height: 20px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; flex: none; }
.di-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.di-switch input:checked + .di-track { background: var(--di-accent); }
.di-switch input:checked + .di-track::after { transform: translateX(16px); }
.di-switch input:focus-visible + .di-track { outline: 2px solid var(--di-accent); outline-offset: 2px; }
.di-rangefield { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.di-rangefield label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #94a3b8; }
.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-subset[data-on="false"] .di-rangefield { opacity: .45; pointer-events: none; }

/* 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. */
.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; }