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