/* ============================================================================
   Document hub + Template library  —  public/static/venture-documents.css
   ----------------------------------------------------------------------------
   Replaces the inline-styled markup that app.js emitted for the venture
   Documents tab. Everything is scoped under .vdh so it cannot leak into the
   rest of the admin app.

   Why this exists (the defect, stated plainly):
     * The hub header was a #0f172a → #1e293b navy slab with saturated view
       pills floating on it, so a white document card below it read as a
       different product.
     * The Template Library band was a second, heavier gradient
       (#1e293b → #2563eb) directly under the navy slab — two competing
       headers stacked on one screen.
     * Every upload category painted a 5px full-bleed colour bar across its
       cards from a saturated palette (#ec4899 pink for Investor Materials
       bleeding into the row beside it), so colour carried no meaning and
       the highest-contrast thing on the page was decoration.
     * The library only showed templates that already had a saved document,
       so a venture that had started nothing saw an almost empty grid.

   Design rules applied (they are the ones the admin already follows):
     * One accent (--vd-brand) reserved for the single primary action.
     * Paper surfaces, hairline borders, radius 10/12px. No gradients.
     * Colour appears only where it means status (review state, saved/not).
     * Type carries the hierarchy: 15/13/12.5/11.5px, weight 800/700/500.
     * Focus-visible rings, reduced-motion honoured, no reliance on colour
       alone (every status also has an icon and a word).
   ========================================================================== */

.vdh {
  --vd-brand:       #2563eb;
  --vd-brand-dark:  #1d4ed8;
  --vd-brand-soft:  #eff6ff;
  --vd-text:        #0f172a;
  --vd-muted:       #64748b;
  --vd-faint:       #94a3b8;
  --vd-line:        #e2e8f0;
  --vd-line-soft:   #f1f5f9;
  --vd-surface:     #ffffff;
  --vd-surface-alt: #f8fafc;
  --vd-ok:          #047857;
  --vd-ok-soft:     #ecfdf5;
  --vd-warn:        #b45309;
  --vd-warn-soft:   #fffbeb;
  --vd-bad:         #b91c1c;
  --vd-bad-soft:    #fef2f2;
  --vd-r-sm: 6px; --vd-r-md: 10px; --vd-r-lg: 12px;
  color: var(--vd-text);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the hub -- */
.vdh-hub {
  background: var(--vd-surface);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: clamp(640px, 74vh, 940px);
}

.vdh-hub-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--vd-line);
  background: var(--vd-surface);
  flex: none;
}
.vdh-hub-title {
  display: flex; align-items: flex-start; gap: 12px;
  justify-content: space-between; flex-wrap: wrap;
}
.vdh-hub-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--vd-surface-alt); border: 1px solid var(--vd-line);
  display: grid; place-items: center;
  color: var(--vd-muted); font-size: 14px;
}
.vdh-hub-name {
  margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.25;
}
.vdh-hub-sub {
  margin: 3px 0 0; font-size: 11.5px; color: var(--vd-muted); line-height: 1.5;
}
.vdh-hub-sub b { color: var(--vd-text); font-weight: 700; }

.vdh-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 8px; border: 1px solid var(--vd-line);
  background: var(--vd-surface); color: var(--vd-text);
  font-size: 12.5px; font-weight: 700; cursor: pointer; line-height: 1.2;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.vdh-btn:hover { background: var(--vd-surface-alt); border-color: #cbd5e1; }
.vdh-btn-primary {
  background: var(--vd-brand); border-color: var(--vd-brand); color: #fff;
}
.vdh-btn-primary:hover { background: var(--vd-brand-dark); border-color: var(--vd-brand-dark); }

/* view pills + review counters, on paper not on a slab */
.vdh-hub-tools {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 14px;
}
.vdh-pill {
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--vd-line);
  background: var(--vd-surface); color: var(--vd-muted);
  font-size: 11.5px; font-weight: 700; cursor: pointer; line-height: 1.4;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.vdh-pill:hover { background: var(--vd-surface-alt); color: var(--vd-text); }
.vdh-pill[aria-pressed="true"] {
  background: var(--vd-text); border-color: var(--vd-text); color: #fff;
}
.vdh-tool-sep {
  width: 1px; height: 18px; background: var(--vd-line); margin: 0 4px;
}
.vdh-stat {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--vd-muted);
}
.vdh-stat i { font-size: 10px; }
.vdh-stat b { color: var(--vd-text); font-weight: 700; }

.vdh-hub-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 22px;
  background: var(--vd-surface-alt);
}
.vdh-hub-body::-webkit-scrollbar { width: 10px; }
.vdh-hub-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* ------------------------------------------------------- a group of files -- */
.vdh-group { margin-bottom: 22px; }
.vdh-group:last-child { margin-bottom: 0; }
.vdh-group-head {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px;
}
.vdh-group-head h4 {
  margin: 0; font-size: 12.5px; font-weight: 800; color: var(--vd-text);
  letter-spacing: -.005em;
}
.vdh-count {
  background: #eef2f7; color: var(--vd-muted);
  font-size: 10.5px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
}
.vdh-group-ico {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--vd-surface); border: 1px solid var(--vd-line);
  display: grid; place-items: center; color: var(--vd-muted); font-size: 11px;
}

/* ------------------------------------------------------------- file cards -- */
.vdh-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.vdh-file {
  display: flex; flex-direction: column;
  background: var(--vd-surface);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-md);
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.vdh-file:hover { border-color: #cbd5e1; box-shadow: 0 2px 10px rgba(15, 23, 42, .07); }
.vdh-file-main { padding: 12px 13px 10px; flex: 1; cursor: pointer; }
.vdh-file-row { display: flex; align-items: flex-start; gap: 10px; }
.vdh-file-ico {
  width: 30px; height: 30px; border-radius: 7px; flex: none;
  background: var(--vd-surface-alt); border: 1px solid var(--vd-line);
  display: grid; place-items: center; color: var(--vd-muted); font-size: 13px;
}
.vdh-file-name {
  font-size: 12.5px; font-weight: 700; color: var(--vd-text); line-height: 1.4;
  overflow-wrap: anywhere;
}
.vdh-file-sub { font-size: 10.5px; color: var(--vd-faint); margin-top: 2px; }
.vdh-file-desc {
  font-size: 11px; color: var(--vd-muted); line-height: 1.45; margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vdh-file-note {
  font-size: 11px; color: var(--vd-muted); line-height: 1.45; margin-top: 5px;
  font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.vdh-file-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 7px 9px; border-top: 1px solid var(--vd-line-soft);
  background: var(--vd-surface-alt);
}

/* status chip — colour + icon + word, so it never relies on colour alone */
.vdh-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; line-height: 1.6;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--vd-line);
  background: var(--vd-surface); color: var(--vd-muted);
  cursor: pointer; white-space: nowrap;
}
.vdh-chip i { font-size: 8.5px; }
.vdh-chip.ok   { background: var(--vd-ok-soft);   border-color: #a7f3d0; color: var(--vd-ok); }
.vdh-chip.warn { background: var(--vd-warn-soft); border-color: #fde68a; color: var(--vd-warn); }
.vdh-chip.bad  { background: var(--vd-bad-soft);  border-color: #fecaca; color: var(--vd-bad); }

.vdh-ico-btn {
  width: 24px; height: 24px; border-radius: var(--vd-r-sm);
  border: 1px solid var(--vd-line); background: var(--vd-surface);
  color: var(--vd-muted); font-size: 10.5px; cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.vdh-ico-btn:hover { background: var(--vd-surface); border-color: #cbd5e1; color: var(--vd-text); }
.vdh-ico-btn.danger:hover { background: var(--vd-bad-soft); border-color: #fecaca; color: var(--vd-bad); }
.vdh-ico-set { display: inline-flex; gap: 4px; }

/* --------------------------------------------------------- empty states --- */
.vdh-empty {
  border: 1px dashed #cbd5e1; border-radius: var(--vd-r-md);
  background: var(--vd-surface); padding: 30px 20px; text-align: center;
}
.vdh-empty-ico {
  width: 46px; height: 46px; border-radius: 12px; margin: 0 auto 12px;
  background: var(--vd-surface-alt); border: 1px solid var(--vd-line);
  display: grid; place-items: center; color: var(--vd-faint); font-size: 18px;
}
.vdh-empty-title { font-size: 13px; font-weight: 700; color: var(--vd-text); }
.vdh-empty-note { font-size: 11.5px; color: var(--vd-muted); margin-top: 4px; }
.vdh-empty .vdh-btn { margin-top: 14px; }

/* ==========================================================================
   TEMPLATE LIBRARY — the artifact layout: a plain head, a search field with
   filter pills on one line, stage group headings, and rich cards.
   ========================================================================== */
.vdh-lib {
  background: var(--vd-surface);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-lg);
  overflow: hidden;
  margin-top: 20px;
}

.vdh-lib-head {
  padding: 16px 20px 15px;
  border-bottom: 1px solid var(--vd-line);
  background: var(--vd-surface);
}
.vdh-lib-name {
  margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.25;
}
.vdh-lib-sub {
  margin: 4px 0 0; font-size: 11.5px; color: var(--vd-muted);
  line-height: 1.55; max-width: 74ch;
}

.vdh-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
}
.vdh-search-wrap { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 380px; }
.vdh-search-wrap i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--vd-faint); pointer-events: none;
}
.vdh-search {
  width: 100%; box-sizing: border-box;
  padding: 8px 11px 8px 30px;
  border: 1px solid var(--vd-line); border-radius: 8px;
  background: var(--vd-surface); color: var(--vd-text);
  font-size: 12px; font-family: inherit; line-height: 1.4;
}
.vdh-search::placeholder { color: var(--vd-faint); }
.vdh-search:focus { outline: none; border-color: #bfdbfe; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

.vdh-lib-body { padding: 18px 20px 22px; background: var(--vd-surface); }
.vdh-lib-group { margin-bottom: 26px; }
.vdh-lib-group:last-child { margin-bottom: 0; }
.vdh-lib-group[hidden] { display: none; }

.vdh-lib-group-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 11px; padding-bottom: 8px;
  border-bottom: 1px solid var(--vd-line-soft);
}
.vdh-lib-group-head h4 {
  margin: 0; font-size: 13px; font-weight: 800; color: var(--vd-text);
  letter-spacing: -.005em;
}
.vdh-lib-group-head span { font-size: 11px; color: var(--vd-faint); font-weight: 600; }
.vdh-lib-group-head .vdh-count { margin-left: auto; }

/* --- the card ------------------------------------------------------------ */
.vdh-card {
  display: flex; flex-direction: column;
  background: var(--vd-surface);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-md);
  padding: 12px 13px 11px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.vdh-card:hover { border-color: #cbd5e1; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.vdh-card[hidden] { display: none; }
.vdh-card.is-started { border-color: #bfdbfe; }

.vdh-card-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
}
.vdh-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .01em;
  color: #334155; background: var(--vd-surface-alt);
  border: 1px solid var(--vd-line);
  border-radius: 5px; padding: 1px 6px; line-height: 1.7;
}
.vdh-kind {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; color: var(--vd-faint);
  white-space: nowrap;
}
.vdh-kind i { font-size: 10px; }

.vdh-card-name {
  margin: 0 0 5px; font-size: 12.5px; font-weight: 800;
  color: var(--vd-text); line-height: 1.35;
  letter-spacing: -.005em;
}
.vdh-card-desc {
  margin: 0; font-size: 11.5px; color: var(--vd-muted); line-height: 1.5;
  flex: 1;
}
.vdh-card-meta {
  margin-top: 9px; font-size: 10.5px; color: var(--vd-muted); line-height: 1.6;
}
.vdh-card-meta + .vdh-card-meta { margin-top: 2px; }
.vdh-card-meta b { color: var(--vd-text); font-weight: 700; }
.vdh-card-actions {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 11px;
}
.vdh-card-actions .vdh-btn { padding: 6px 12px; font-size: 11.5px; }

.vdh-create {
  padding: 6px 12px; border-radius: 7px;
  border: 1px solid var(--vd-line); background: var(--vd-surface);
  color: var(--vd-text); font-size: 11.5px; font-weight: 700;
  cursor: pointer; line-height: 1.3;
  transition: background .14s ease, border-color .14s ease;
}
.vdh-create:hover { background: var(--vd-surface-alt); border-color: #cbd5e1; }

.vdh-lib-empty {
  text-align: center; padding: 40px 20px; color: var(--vd-muted);
  font-size: 12.5px;
}
.vdh-lib-empty[hidden] { display: none; }

/* --- focus + motion ------------------------------------------------------ */
.vdh button:focus-visible,
.vdh input:focus-visible {
  outline: 2px solid var(--vd-brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .vdh * { transition: none !important; }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 720px) {
  .vdh-hub { height: auto; max-height: none; }
  .vdh-hub-body { overflow: visible; padding: 14px; }
  .vdh-grid { grid-template-columns: 1fr; }
  .vdh-lib-body { padding: 14px; }
  .vdh-search-wrap { max-width: none; }
}