/*
Location: Support Docs/Product Design/mockups/assets/app.css
Purpose: Shared design system for Baby Notes mockups — BABY VC BRAND (lime #EEFB86 + black + white)
Components: tokens, app shell (sidebar+topbar), insight card, badges, buttons, chips, tables, forms
Used-by: all 9 screen mockups + index.html
Note: MOCKUP ONLY — not the production codebase. Brand sampled from babyvc.co logo.
*/

@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------- tokens (Baby VC brand) ---------- */
:root {
  /* brand */
  --brand:#EEFB86; --brand-2:#E4F46A; --brand-3:#C7D94A; --brand-soft:#F5FCC4; --brand-ink:#2C3406;
  /* neutrals */
  --ink:#14150E; --ink-2:#000000; --bg:#FAFAF7; --surface:#FFFFFF; --surface-2:#F6F7F1;
  --line:#E7E8E0; --line-2:#CFD1C4; --muted:#52544A; --muted-2:#6E7064;
  /* names kept for markup compatibility: primary=black ink, amber=brand lime */
  --primary:#14150E; --primary-2:#000000; --amber:#EEFB86; --amber-soft:#F5FCC4;
  /* functional (confidence etc.) */
  --green:#1A7F37; --green-soft:#DCFCE7; --red:#B91C1C; --red-soft:#FEE2E2;
  --violet:#6D28D9; --violet-soft:#EDE9FE; --teal:#0F766E; --teal-soft:#CCFBF1;
  --radius:10px; --radius-sm:7px; --shadow:0 1px 2px rgba(20,21,14,.06),0 4px 12px rgba(20,21,14,.05);
  --shadow-lg:0 8px 30px rgba(20,21,14,.13);
  --mono:'Fira Code',ui-monospace,monospace; --sans:'Poppins',system-ui,sans-serif;
  --sb:248px; --topbar:60px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body { font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-decoration:none; }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.01em; }
.mono { font-family:var(--mono); }
:focus-visible { outline:2px solid var(--brand-3); outline-offset:2px; border-radius:4px; }

/* ---------- app shell ---------- */
.app { display:grid; grid-template-columns:var(--sb) 1fr; min-height:100vh; }
.sidebar { background:var(--ink-2); color:#C7C9BC; padding:18px 14px; position:sticky; top:0;
  height:100vh; display:flex; flex-direction:column; gap:4px; }
.brand { display:flex; align-items:center; gap:9px; padding:4px 8px 18px; }
.brand img { height:22px; width:auto; }
.brand .b-tag { color:var(--brand); font-family:var(--mono); font-size:13px; font-weight:500;
  border-left:1px solid #2a2a26; padding-left:9px; }
.nav-group { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:#6E7064;
  padding:14px 10px 6px; font-family:var(--mono); }
.nav-item { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:var(--radius-sm);
  color:#C7C9BC; font-size:14px; cursor:pointer; transition:background .18s,color .18s;
  border-left:3px solid transparent; }
.nav-item svg { width:17px; height:17px; flex:none; stroke:currentColor; }
.nav-item:hover { background:#1b1b18; color:#fff; }
.nav-item.active { background:#1f1f1b; color:var(--brand); border-left-color:var(--brand); }
.nav-item .count { margin-left:auto; font-family:var(--mono); font-size:11px; color:#9a9c8e;
  background:#242420; padding:1px 7px; border-radius:20px; }
.nav-item.active .count { background:var(--brand); color:#14150E; }
.sidebar-foot { margin-top:auto; border-top:1px solid #242420; padding-top:12px; display:flex; align-items:center; gap:10px; }
.avatar { width:30px; height:30px; border-radius:50%; background:var(--ink-2); color:var(--brand); display:grid;
  place-items:center; font-size:12px; font-weight:700; font-family:var(--mono); }

/* ---------- topbar ---------- */
.main { display:flex; flex-direction:column; min-width:0; }
.topbar { height:var(--topbar); background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:16px; padding:0 26px; position:sticky; top:0; z-index:20; }
.topbar h1 { font-size:18px; }
.topbar .crumb { font-size:13px; color:var(--muted-2); font-family:var(--mono); }
.search { flex:1; max-width:440px; position:relative; }
.search input { width:100%; height:38px; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:0 12px 0 36px; font-family:var(--sans); font-size:14px; background:var(--surface-2); color:var(--ink); }
.search svg { position:absolute; left:11px; top:10px; width:18px; height:18px; stroke:var(--muted-2); }
.topbar .spacer { flex:1; }
.content { padding:26px; }
.page-head { display:flex; align-items:flex-end; gap:14px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h2 { font-size:22px; }
.page-head p { color:var(--muted); margin:4px 0 0; font-size:14px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:var(--radius-sm);
  font-family:var(--sans); font-size:14px; font-weight:500; border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink); cursor:pointer; transition:background .18s,border-color .18s,box-shadow .18s; }
.btn svg { width:16px; height:16px; stroke:currentColor; }
.btn:hover { background:var(--surface-2); border-color:var(--muted-2); }
.btn-primary { background:var(--ink-2); border-color:var(--ink-2); color:#fff; }
.btn-primary:hover { background:#000; border-color:#000; box-shadow:var(--shadow); }
.btn-cta { background:var(--brand); border-color:var(--brand-3); color:#14150E; font-weight:700; }
.btn-cta:hover { background:var(--brand-2); border-color:var(--brand-3); }
.btn-ghost { border-color:transparent; background:transparent; }
.btn-ghost:hover { background:var(--surface-2); }
.btn-ok { background:var(--green-soft); border-color:#86efac; color:var(--green); }
.btn-ok:hover { background:#bbf7d0; }
.btn-no { background:var(--red-soft); border-color:#fca5a5; color:var(--red); }
.btn-no:hover { background:#fecaca; }
.btn-sm { height:31px; padding:0 11px; font-size:13px; }

/* ---------- badges & chips ---------- */
.badge { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:11px;
  font-weight:500; padding:2px 8px; border-radius:20px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--muted); white-space:nowrap; }
.badge.theme { background:var(--brand-soft); border-color:var(--brand-3); color:var(--brand-ink); }
.badge.tag { background:var(--surface-2); }
.badge.industry { background:var(--teal-soft); border-color:#5eead4; color:var(--teal); }
.badge.dot::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.conf { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; font-weight:600;
  padding:2px 9px; border-radius:20px; }
.conf.high { background:var(--green-soft); color:var(--green); }
.conf.mid  { background:#FEF3C7; color:#92600a; }
.conf.low  { background:var(--red-soft); color:var(--red); }
.pill { font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:6px; background:var(--surface-2);
  border:1px solid var(--line); color:var(--muted); }

/* filter chips */
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.chip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:20px;
  border:1px solid var(--line-2); background:var(--surface); font-size:13px; color:var(--muted); cursor:pointer;
  transition:all .16s; }
.chip:hover { border-color:var(--ink); color:var(--ink); }
.chip.on { background:var(--ink-2); border-color:var(--ink-2); color:#fff; }
.chip.on .x { color:var(--brand); }
.chip .x { font-family:var(--mono); opacity:.7; }
.chip-label { font-size:12px; color:var(--muted-2); font-family:var(--mono); margin-right:2px; }

/* ---------- card surfaces ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.grid { display:grid; gap:16px; }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }

/* ---------- insight card ---------- */
.insight { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 16px 13px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:11px;
  transition:box-shadow .18s,border-color .18s; cursor:pointer; }
.insight:hover { box-shadow:var(--shadow-lg); border-color:var(--line-2); }
.insight .claim { font-size:15px; font-weight:600; line-height:1.35; color:var(--ink); }
.insight .quote { font-size:13.5px; color:#33352a; border-left:3px solid var(--brand-3); padding:2px 0 2px 12px;
  font-style:italic; line-height:1.5; }
.insight .attr { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.insight .attr b { color:var(--ink); font-weight:600; font-style:normal; }
.insight .src { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px;
  color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand-3); padding:2px 8px; border-radius:6px; }
.insight .src:hover { background:var(--brand-2); }
.insight .meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.insight .foot { display:flex; align-items:center; gap:8px; padding-top:9px; border-top:1px solid var(--surface-2);
  margin-top:auto; }
.insight.flagged { border-left:3px solid var(--brand); }

/* ---------- tables ---------- */
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl th { text-align:left; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted-2); padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.tbl td { padding:11px 14px; border-bottom:1px solid var(--line); }
.tbl tr:hover td { background:var(--surface-2); }

/* ---------- forms ---------- */
label.fld { display:block; font-size:13px; font-weight:500; color:var(--ink); margin:0 0 6px; }
label.fld .req { color:var(--brand-3); }
.hint { font-size:12px; color:var(--muted-2); margin-top:5px; }
input.in, select.in, textarea.in { width:100%; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:9px 12px; font-family:var(--sans); font-size:14px; background:var(--surface); color:var(--ink); }
input.in:focus, select.in:focus, textarea.in:focus { border-color:var(--ink); outline:none;
  box-shadow:0 0 0 3px rgba(199,217,74,.45); }
.field { margin-bottom:18px; }

/* dropzone */
.dropzone { border:2px dashed var(--line-2); border-radius:var(--radius); padding:34px; text-align:center;
  background:var(--surface-2); transition:border-color .18s,background .18s; cursor:pointer; }
.dropzone:hover { border-color:var(--brand-3); background:var(--brand-soft); }
.dropzone svg { width:34px; height:34px; stroke:var(--muted-2); }

/* token chips (selected speakers/firms) */
.tokens { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.token { display:inline-flex; align-items:center; gap:8px; background:var(--brand-soft); border:1px solid var(--brand-3);
  border-radius:8px; padding:5px 8px 5px 10px; font-size:13px; }
.token .role { color:var(--muted-2); font-size:11.5px; font-family:var(--mono); }
.token .x { cursor:pointer; color:var(--muted-2); font-family:var(--mono); }

/* stat tiles */
.stat { padding:16px 18px; }
.stat .k { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2); }
.stat .v { font-size:26px; font-weight:600; margin-top:4px; letter-spacing:-.02em; }
.stat .v small { font-size:13px; color:var(--muted-2); font-weight:400; }

/* progress / pipeline */
.steps { display:flex; flex-direction:column; gap:2px; }
.step { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--radius); }
.step .dot { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-family:var(--mono); font-size:12px; border:2px solid var(--line-2); color:var(--muted-2); background:var(--surface); }
.step.done .dot { background:var(--green); border-color:var(--green); color:#fff; }
.step.active .dot { background:var(--ink-2); border-color:var(--ink-2); color:var(--brand); }
.step.active { background:var(--brand-soft); }
.bar { height:6px; background:var(--line); border-radius:6px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--ink-2); border-radius:6px; }
@keyframes spin { to { transform:rotate(360deg); } }
.spinner { width:16px; height:16px; border:2px solid var(--brand-3); border-top-color:var(--ink-2); border-radius:50%;
  animation:spin .8s linear infinite; }

/* misc */
.divider { height:1px; background:var(--line); margin:18px 0; }
.muted { color:var(--muted); } .small { font-size:12.5px; }
.row { display:flex; align-items:center; gap:10px; }
.right { margin-left:auto; }
.tag-list { display:flex; gap:6px; flex-wrap:wrap; }
.mock-note { font-family:var(--mono); font-size:11px; color:var(--brand-ink); background:var(--brand-soft);
  border:1px solid var(--brand-3); border-radius:6px; padding:3px 9px; }

/* ---- file-tree (view-only Explorer-style navigation) ---- */
.tree, .tree ul { list-style:none; margin:0; padding:0; }
.tree ul { margin-left:15px; }
.tree li { position:relative; padding-left:23px; }
.tree li::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line-2); }
.tree li:last-child::before { bottom:auto; height:17px; }            /* last child -> elbow stops short (└) */
.tree li::after { content:""; position:absolute; left:0; top:17px; width:15px; height:1px; background:var(--line-2); }
.tree > li::before, .tree > li::after { display:none; }              /* root nodes have no connector */
.tree .node-row { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:7px; min-height:24px; }
.tree .node-row.is-folder { cursor:pointer; }
.tree .node-row.is-folder:hover { background:var(--surface-2); }
.tree .caret { width:13px; flex:none; display:inline-flex; justify-content:center; color:var(--muted-2);
  font-size:10px; transition:transform .15s; }
.tree li.collapsed > .node-row .caret { transform:rotate(-90deg); }
.tree li.collapsed > ul { display:none; }
.tree .leaf .caret { visibility:hidden; }
.tree .ficon { width:18px; height:16px; flex:none; color:var(--ink-2); }     /* filled black folder */
.tree .fileicon { width:15px; height:15px; flex:none; color:var(--muted-2); }
.tree .label { font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tree .node-row.is-folder .label { font-weight:600; }
.tree .leaf .label { color:var(--muted); }
.tree .kindtag { font-family:var(--mono); font-size:10px; color:var(--muted-2); margin-left:6px;
  border:1px solid var(--line); border-radius:5px; padding:0 5px; flex:none; }
.tree .tcount { font-family:var(--mono); font-size:11px; color:var(--muted-2); margin-left:7px; flex:none; }
.tree .empty { color:var(--muted-2); font-size:12.5px; font-style:italic; }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }
@media (max-width:1024px) { .app { grid-template-columns:1fr; } .sidebar { display:none; }
  .grid.cols-3,.grid.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .grid.cols-2,.grid.cols-3,.grid.cols-4 { grid-template-columns:1fr; } }