/* My data — role lanes + enriched file cards.
   Layers on top of the existing .whse-grid / .whse-tile system (home.css).
   Colour comes ONLY from design-system semantic tokens (etl-design-system.css)
   so both light and dark themes follow automatically — no per-component dark
   overrides (the documented "bug class"). See file-storage-ux-spec.md §2f. */

/* When laned, the grid becomes a vertical stack of lane sections; each lane
   keeps its own tile sub-grid. */
.whse-grid.md-laned {
  display: block;
  margin-top: 8px;
}

/* --- Folder strip (folders demoted to a secondary row above the lanes) --- */
.md-folder-strip {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin: 4px 0 20px;
  /* Uniform, compact tiles: a tile that grows taller (e.g. a connected-repo
     folder with its status chip) must NOT stretch every sibling in its row.
     Grid's default align-items:stretch made the whole row match the tallest
     tile, breaking the uniform grid. Pin tiles to the row start so each keeps
     its own compact height. Grounded: uniform/predictable layout lowers
     cognitive load & speeds scanning — 100 Things Every Designer Needs to Know
     About People (#10 consistency reduces cognitive load; #6 predictable
     layouts increase speed & comfort; #2 recognition by pattern). */
  align-items: start;
}

/* A connected-repo folder is a live, controllable source (branch switcher,
   auto-refresh mode, real-time webhook expander). It stays the SAME compact,
   uniform ~116px tile as every plain folder — a single tiny corner badge is
   the only affordance; ALL controls live in an on-demand anchored popover
   (see openRepoPopover in my_data_lanes.js), never inline on the tile.
   Grounded: uniform/predictable tiles lower cognitive load & speed scanning —
   100 Things Every Designer Needs to Know About People (#10 consistency
   reduces cognitive load, #6 predictable layouts, #2 recognition by pattern;
   Gestalt similarity). The controls surface via a lightweight popover, not a
   blocking overlay (MECLABS: navigation without pop-ups/modals). Tokens only
   → light/dark safe. No full-width, no order, no min-height override: the
   repo tile is visually identical to its peers. */
.whse-tile--folder.md-folder--repo { /* intentionally no layout override */ }

/* PREMIUM "kept up to date" highlight — only when the repo is connected & in
   sync (md-repo--ok; never while erroring or indexing). A gold accent border +
   faint gold wash + soft glow marks this folder as a special, continuously
   live source that mirrors the remote — recognizable at a glance WITHOUT
   changing the compact tile size. rgba(gold) works over either theme's
   --surface, so both modes stay legible (no white-card bug). */
.whse-tile--folder.md-folder--repo.md-repo--ok {
  border-color: #d4af37;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, .10), transparent 62%),
    var(--surface, #fff);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .38),
              0 2px 10px rgba(212, 175, 55, .16);
}
.whse-tile--folder.md-folder--repo.md-repo--ok:hover {
  border-color: #c99a2e;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .55),
              0 4px 16px rgba(212, 175, 55, .24);
}
html[data-theme="dark"] .whse-tile--folder.md-folder--repo.md-repo--ok {
  border-color: #b8862b;
  background:
    linear-gradient(180deg, rgba(212, 175, 55, .16), transparent 60%),
    var(--surface, #121821);
}
/* Premium gold badge for the up-to-date state (overrides the muted default). */
.md-repo-badge--ok {
  color: #8a6d1f;
  background: rgba(212, 175, 55, .16);
  border-color: rgba(212, 175, 55, .55);
}
.md-repo-badge--ok .md-repo-badge-ico { opacity: 1; }
.md-repo-badge--ok:hover { border-color: #c99a2e; }
html[data-theme="dark"] .md-repo-badge--ok {
  color: #e8c968;
  background: rgba(212, 175, 55, .20);
  border-color: rgba(212, 175, 55, .5);
}

/* Tiny corner badge — the ONLY thing the repo puts on the tile. Absolutely
   positioned inside the (position:relative) tile so it never changes the tile
   height. Click opens the controls popover. */
.md-repo-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  max-width: calc(100% - 16px);
  min-height: 20px; padding: 2px 7px;
  border: 1px solid var(--line, #e3e8ee); border-radius: 999px;
  background: var(--surface-2, #f5f7fb); color: var(--muted, var(--ink-500, #5f7189));
  font: 600 10.5px/1 var(--font-ui, system-ui, sans-serif);
  cursor: pointer;
}
.md-repo-badge:hover { border-color: var(--brand, #4338ca); }
.md-repo-badge:focus-visible { outline: 2px solid var(--brand, #4338ca); outline-offset: 1px; }
.md-repo-badge-ico { opacity: .8; }
.md-repo-badge-branch {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 84px;
}
.md-repo-badge--busy { color: var(--brand-600, #4338ca); background: var(--brand-50, #eef1ff); }
.md-repo-badge--error {
  color: var(--danger-600, #b42318);
  background: var(--danger-50, #fef2f2); border-color: var(--danger-600, #b42318);
}
html[data-theme="dark"] .md-repo-badge--error {
  color: #fca5a5; background: rgba(180, 35, 24, .22); border-color: rgba(180, 35, 24, .5);
}
html[data-theme="dark"] .md-repo-badge--busy {
  color: var(--brand-200, #c7d2fe); background: rgba(67, 56, 202, .22);
}

/* Controls popover — position:fixed, mounted on <body>, anchored near the
   badge. Tokens only so both themes work (no white-card-in-dark bug). */
.md-repo-pop {
  position: fixed; z-index: 3000; width: 300px; max-width: calc(100vw - 24px);
  padding: 12px; border: 1px solid var(--line, #e3e8ee);
  border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #1a2332);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
  display: flex; flex-direction: column; gap: 10px;
}
html[data-theme="dark"] .md-repo-pop { box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
.md-repo-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.md-repo-pop-title {
  font: 700 11px/1 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted, var(--ink-500, #5f7189));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-repo-pop-close {
  flex: 0 0 auto; border: none; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--muted, var(--ink-500, #5f7189));
  padding: 2px 5px; border-radius: 6px;
}
.md-repo-pop-close:hover { background: var(--surface-2, #f5f7fb); color: var(--ink, #1a2332); }
.md-repo-pop-sync { margin: 0; font-size: 12px; line-height: 1.4; color: var(--muted, var(--ink-500, #5f7189)); }
.md-repo-pop-err {
  margin: 0; font-size: 12px; line-height: 1.45; color: var(--danger-600, #b42318);
  background: var(--surface-2, #f5f7fb); border-left: 3px solid var(--danger-600, #b42318);
  border-radius: 6px; padding: 8px; word-break: break-word;
}
html[data-theme="dark"] .md-repo-pop-err { color: #fca5a5; }
.md-repo-pop-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.md-repo-pop-btn {
  min-height: 30px; padding: 5px 12px; border-radius: 7px;
  font: 600 12px var(--font-ui, system-ui, sans-serif); cursor: pointer;
  border: 1px solid var(--line, #e3e8ee); background: var(--surface, #fff); color: var(--ink, #1a2332);
}
.md-repo-pop-btn:hover { background: var(--surface-2, #f5f7fb); }
.md-repo-pop-btn--danger { color: var(--danger-600, #b42318); border-color: var(--danger-300, #f3b4ad); }
.md-repo-pop-btn--danger:hover { background: var(--danger-50, #fef2f2); }
html[data-theme="dark"] .md-repo-pop-btn--danger:hover { background: rgba(180, 35, 24, .18); }
.md-repo-pop .md-rt-details { margin-top: 0; }

/* --- Lane section ------------------------------------------------------- */
.md-lane { margin: 0 0 22px; }
.md-lane:last-child { margin-bottom: 4px; }

.md-lane-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 2px 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line, #e3e8ee);
  cursor: pointer; user-select: none;
}
.md-lane-caret {
  font-size: 11px; color: var(--ink-500, #5f7189);
  transition: transform .15s ease; width: 10px; display: inline-block;
}
.md-lane.is-collapsed .md-lane-caret { transform: rotate(-90deg); }
.md-lane-title {
  font: 600 12.5px/1 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-900, #1a1f36);
}
.md-lane-count {
  font: 600 11.5px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-500, #5f7189);
}
.md-lane-hint {
  margin-left: auto; font: 12px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-500, #5f7189);
}
.md-lane-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
}
.md-lane.is-collapsed .md-lane-grid { display: none; }
.md-lane.is-collapsed .md-lane-head { margin-bottom: 0; }

/* --- Role chip on a card ------------------------------------------------ */
.md-role-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--radius-sm, 4px);
  font: 600 10px/1.4 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .02em; text-transform: uppercase;
  border: 1px solid transparent; white-space: nowrap;
  vertical-align: middle;
}
.md-role-chip .md-role-dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  opacity: .9;
}
/* Uploaded — neutral (a file brought in as-is) */
.md-role-uploaded {
  color: var(--ink-700, #425466);
  background: var(--surface-2, #f6f9fc);
  border-color: var(--line, #e3e8ee);
}
/* Prepped — brand indigo ("we made this") */
.md-role-prepped {
  color: var(--brand-500, #1f4fd6);
  background: var(--brand-50, #eef2ff);
  border-color: color-mix(in srgb, var(--brand-500, #1f4fd6) 30%, transparent);
}
/* Live source — info/teal (a live connected table) */
.md-role-source {
  color: var(--info-text, #1e40af);
  background: var(--info-bg, #dbeafe);
  border-color: var(--info-border, rgba(30,64,175,.18));
}
/* Document — warn/amber (reference material you ask about) */
.md-role-document {
  color: var(--warn-text, #b45309);
  background: var(--warn-bg, #fff7ed);
  border-color: var(--warn-border, rgba(180,83,9,.30));
}

/* The chip sits under the name; give the name row a touch more room. */
.whse-tile .md-chip-row { margin-top: 6px; }

/* --- Video processing/ready badge (T8) ----------------------------------
   Same compact footprint as .md-role-chip above — sits inline in the SAME
   chip row, so the tile never grows (prior regression here: don't repeat
   it). Three states: processing (spinner), error (⚠, click for message),
   ready (▶ video). */
.md-video-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--radius-sm, 4px);
  font: 600 10px/1.4 var(--font-ui, system-ui, sans-serif);
  border: 1px solid transparent; white-space: nowrap;
  vertical-align: middle; margin-left: 5px;
}
.md-video-badge-spin { width: 9px; height: 9px; border-width: 2px; }
.md-video-badge--processing {
  color: var(--brand-600, #4338ca);
  background: var(--brand-50, #eef2ff);
  border-color: color-mix(in srgb, var(--brand-500, #1f4fd6) 30%, transparent);
}
.md-video-badge--error {
  color: var(--danger-600, #b42318);
  background: var(--danger-50, #fef2f2);
  border-color: var(--danger-600, #b42318);
  cursor: pointer; font-family: inherit;
}
.md-video-badge--error:hover { filter: brightness(1.05); }
.md-video-badge--ready {
  color: var(--good, #059669);
  background: rgba(5, 150, 105, .12);
  border-color: rgba(5, 150, 105, .3);
}
html[data-theme="dark"] .md-video-badge--processing {
  color: var(--brand-200, #c7d2fe); background: rgba(67, 56, 202, .22);
}
html[data-theme="dark"] .md-video-badge--error {
  color: #fca5a5; background: rgba(180, 35, 24, .22);
}
html[data-theme="dark"] .md-video-badge--ready {
  color: #34d399; background: rgba(5, 150, 105, .20);
}

/* Left accent rail per role so a lane's cards read as a set even out of
   context (role-expressiveness — survives grayscale via the chip label too). */
.whse-tile.md-role-card { border-left-width: 3px; }
.whse-tile.md-role-card--uploaded { border-left-color: var(--line-strong, #c1c9d2); }
.whse-tile.md-role-card--prepped  { border-left-color: var(--brand-500, #1f4fd6); }
.whse-tile.md-role-card--source   { border-left-color: var(--info-text, #1e40af); }
.whse-tile.md-role-card--document { border-left-color: var(--warn-text, #b45309); }

/* --- Rows-first shape line --------------------------------------------- */
.whse-tile .md-shape { font-variant-numeric: tabular-nums; }
.whse-tile .md-shape-rows { font-weight: 600; color: var(--ink-700, #425466); }

/* --- Lineage line (Prepped only): "Made from X via Y" ------------------- */
.md-lineage {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--line, #e3e8ee);
  font: 11px/1.35 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-500, #5f7189);
}
.md-lineage-arrow { color: var(--brand-500, #1f4fd6); font-weight: 700; }
.md-lineage b { color: var(--ink-700, #425466); font-weight: 600; }
.md-lineage .md-via { color: var(--brand-500, #1f4fd6); font-weight: 600; }

/* --- Empty state: one dominant drop-zone -------------------------------- */
.md-empty {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px;
  margin: 24px auto; padding: 48px 28px; max-width: 520px;
  border: 2px dashed var(--line-strong, #c1c9d2);
  border-radius: var(--radius-xl, 12px);
  background: var(--surface-2, #f6f9fc);
  transition: border-color .15s ease, background .15s ease;
}
.md-empty.is-drop-hover {
  border-color: var(--brand-500, #1f4fd6);
  background: var(--brand-50, #eef2ff);
}
.md-empty-ico {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50, #eef2ff); color: var(--brand-500, #1f4fd6);
}
.md-empty-title {
  font: 600 17px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-900, #1a1f36);
}
.md-empty-sub {
  font: 13px/1.5 var(--font-ui, system-ui, sans-serif);
  color: var(--ink-500, #5f7189); max-width: 360px;
}
.md-empty-browse {
  margin-top: 2px;
  padding: 9px 20px; border-radius: var(--radius-md, 6px);
  border: 0; cursor: pointer;
  font: 600 13px var(--font-ui, system-ui, sans-serif); color: #fff;
  background: linear-gradient(180deg, #2858e0, var(--brand-500, #1f4fd6));
}
.md-empty-browse:hover { filter: brightness(1.05); }
.md-empty-next {
  font: 12.5px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-500, #5f7189);
}
.md-empty-next a {
  color: var(--brand-500, #1f4fd6); font-weight: 600; text-decoration: none;
}
.md-empty-next a:hover { text-decoration: underline; }

/* --- First-upload confirmation toast ("N rows added to Uploaded") ------- */
.md-added-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 4000;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--radius-lg, 8px);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e3e8ee);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
  font: 13px var(--font-ui, system-ui, sans-serif);
  color: var(--ink-900, #1a1f36);
  animation: md-toast-in .2s ease;
}
.md-added-toast .md-added-check {
  color: var(--brand-500, #1f4fd6); font-weight: 700;
}
.md-added-toast b { color: var(--ink-900, #1a1f36); }
@keyframes md-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── Readiness outline: green = ready to ask about, red = still indexing ── */
.whse-tile--file.md-ready {
  border-color: var(--success, #047857);
  border-left-color: var(--success, #047857);
}
.whse-tile--file.md-indexing {
  border-color: var(--danger, #b91c1c);
  border-left-color: var(--danger, #b91c1c);
}
html[data-theme="dark"] .whse-tile--file.md-ready { border-color: #34d399; border-left-color: #34d399; }
html[data-theme="dark"] .whse-tile--file.md-indexing { border-color: #f87171; border-left-color: #f87171; }

/* ── "My data" loading spinner (shown in #wh_grid while the fetch is in flight;
      replaced by the file grid on success, or an inline Retry on failure) ── */
.wh-loading {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; min-height: 220px; padding: 40px 20px;
  color: var(--ink-500, #64748b); font: 500 13.5px var(--font-ui, system-ui);
}
.wh-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--brand-100, #dbe6ff);
  border-top-color: var(--brand-500, #2563eb);
  animation: ask-spin .7s linear infinite;
}
.wh-loading--err { color: var(--error, #b91c1c); }
.wh-loading--err .buttons { margin-top: 4px; }

/* ── 📁 Files ⇄ 🗺️ Map view switch (ask-render draws the map innards) ───── */
.md-viewbar {
  grid-column: 1 / -1;
  display: flex; gap: 6px;
  margin-bottom: 12px;
}
.md-viewbtn {
  font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 999px;
  border: 1px solid var(--border, rgba(127,127,127,.35));
  background: transparent; color: inherit; cursor: pointer;
}
.md-viewbtn.md-addai { margin-left: auto; color: var(--accent-text, #1f4fd6); border-color: var(--accent-text, #1f4fd6); }
.md-viewbtn.md-addai:hover { background: var(--accent-text, #1f4fd6); color: #fff; }
.md-viewbtn.on {
  background: var(--brand-500, #2563eb);
  border-color: var(--brand-500, #2563eb);
  color: #fff;
}
.md-mapview {
  grid-column: 1 / -1;
  display: none;
  border: 1px solid var(--border, rgba(127,127,127,.25));
  border-radius: 12px;
  padding: 12px 16px;
  background: var(--surface-1, transparent);
}
.md-map-loading {
  font-size: 12.5px; opacity: .75; padding: 28px 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.md-map-loading::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  border: 3px solid rgba(37, 99, 235, .2); border-top-color: #2563eb;
  animation: mdmapspin .8s linear infinite;
}
@keyframes mdmapspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .md-map-loading::before { animation: none; } }
/* Map mode: the map replaces the tiles/lanes (bar stays). */
.md-viewing-map .md-mapview { display: block; }
.md-viewing-map .md-lane,
.md-viewing-map .whse-tile,
.md-viewing-map .md-empty,
.md-viewing-map .whse-empty { display: none !important; }

/* Transcription progress bar inside the compact video badge (reuses the
   .md-repo-progress base; just constrain its width so it fits the badge row). */
.md-video-badge { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.md-video-progress { width: 72px; min-width: 72px; height: 4px; margin-left: 2px; }