/* Detox Command — teal/cream. Calm surfaces, one accent, hairline borders. */
:root{
  --cream:#FAF7F2; --cream2:#F2EDE4; --white:#fff;
  --teal:#0F4C5C; --teal2:#0A3A48; --sage:#5B8A7A; --sage-light:#E8F0ED;
  --sage-mid:#B8D4CB; --ink:#1A1E1D; --muted:#6B7875; --light:#9BAAA5;
  --line:#E0DAD0; --line2:#C8C0B4;
  --green:#0e8345; --amber:#b45309; --red:#c0392b;
  --r:9px; --rc:13px;
  --shadow:0 1px 2px rgba(15,76,92,.04), 0 1px 3px rgba(15,76,92,.05);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  letter-spacing:-.011em;font-size:14px;line-height:1.55}
a{color:inherit;text-decoration:none}
.shell{display:flex;min-height:100vh}

.sidebar{width:222px;flex:0 0 222px;background:var(--teal);padding:22px 0;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{color:#fff;font-size:16px;font-weight:600;padding:0 20px 4px}
.brand span{color:var(--sage-mid);font-style:italic}
.brand-sub{color:rgba(255,255,255,.4);font-size:11px;padding:0 20px 20px;
  letter-spacing:.08em;text-transform:uppercase}
.navsec{color:rgba(255,255,255,.35);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 20px 6px}
.nav a{display:flex;justify-content:space-between;align-items:center;
  color:rgba(255,255,255,.72);padding:8px 20px;font-size:13.5px;transition:.15s}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav a.on{background:rgba(255,255,255,.12);color:#fff;
  box-shadow:inset 3px 0 0 var(--sage-mid)}
.nav .ct{background:rgba(255,255,255,.16);color:#fff;border-radius:20px;
  padding:1px 8px;font-size:11px;font-variant-numeric:tabular-nums}

.main{flex:1;padding:26px 32px 60px;max-width:1220px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;margin-bottom:20px;flex-wrap:wrap}
h1{font-size:22px;font-weight:600;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:13px;margin-top:3px}
h2{font-size:15px;font-weight:600;margin-bottom:12px}

.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--rc);
  padding:20px;box-shadow:var(--shadow);margin-bottom:18px}
.split{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
@media(max-width:940px){.split{grid-template-columns:1fr}.sidebar{display:none}}

.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:820px){.kpi-grid{grid-template-columns:1fr 1fr}}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:var(--rc);
  padding:16px 18px;box-shadow:var(--shadow)}
.kpi .n{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--teal)}
.kpi .l{color:var(--muted);font-size:12px;margin-top:2px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--muted);font-weight:500;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;
  border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--cream2)}
.num{font-variant-numeric:tabular-nums;text-align:right}

.btn{display:inline-block;background:var(--teal);color:#fff;border:1px solid var(--teal);
  padding:7px 14px;border-radius:var(--r);font-size:13px;font-weight:500;
  cursor:pointer;transition:.15s;font-family:inherit}
.btn:hover{background:var(--teal2)}
.btn.ghost{background:transparent;color:var(--teal);border-color:var(--line2)}
.btn.ghost:hover{background:var(--sage-light)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.danger{background:var(--red);border-color:var(--red)}
.btn:disabled{opacity:.4;cursor:not-allowed}

.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;
  font-weight:500;background:var(--sage-light);color:var(--teal)}
.pill.warn{background:#fdf0dc;color:var(--amber)}
.pill.bad{background:#fdeceb;color:var(--red)}
.pill.good{background:#e6f4ec;color:var(--green)}
.pill.mute{background:var(--cream2);color:var(--muted)}

.flash{padding:11px 15px;border-radius:var(--r);margin-bottom:14px;font-size:13.5px}
.flash.ok{background:#e6f4ec;color:#0b5f34;border:1px solid #bfe3cf}
.flash.err{background:#fdeceb;color:#8f2018;border:1px solid #f5c6c2}

.banner{background:#fdf0dc;border:1px solid #f0d9ae;color:#7a4d09;
  padding:12px 15px;border-radius:var(--r);margin-bottom:16px;font-size:13px}
.banner b{display:block;margin-bottom:2px}

input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line2);border-radius:var(--r);
  font-family:inherit;font-size:13.5px;background:var(--white);color:var(--ink)}
textarea{min-height:80px;resize:vertical}
label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px;margin-top:11px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.inline{display:inline}
.muted{color:var(--muted)}
.small{font-size:12px}
.right{text-align:right}
.stack{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.act{border-left:2px solid var(--sage-mid);padding:8px 0 8px 12px;margin-bottom:10px}
.act .meta{color:var(--light);font-size:11.5px}


/* ---- filter chips ----
   flex-wrap:nowrap is deliberate. Twelve stage chips will not fit every window,
   and a filter bar that reflows onto a second line makes the page jump as counts
   change. It scrolls sideways instead — the row height never changes. */
.filterbar{ display:flex; align-items:center; gap:4px; margin-bottom:10px;
  flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; }
.filterbar::-webkit-scrollbar{ height:5px; }
.filterbar::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:3px; }
.filterbar::-webkit-scrollbar-track{ background:transparent; }
.filterbar > *{ flex:0 0 auto; }
.filterbar.sub-bar{ margin-bottom:16px; padding-bottom:14px;
  border-bottom:1px solid var(--line); }
.fl{ font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--light); margin-right:2px; }
.chip{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  padding:4px 8px; border:1px solid var(--line); border-radius:6px;
  background:var(--white); color:var(--muted); font-size:11.5px; line-height:1.35;
  transition:.14s; }
.chip:hover{ border-color:var(--sage-mid); color:var(--ink); }
.chip b{ font-weight:600; font-variant-numeric:tabular-nums; color:var(--teal);
  font-size:11px; }
.chip.on{ background:var(--teal); border-color:var(--teal); color:#fff; }
.chip.on b{ color:var(--sage-mid); }
.chip.zero{ opacity:.5; }
.chip.zero b{ color:var(--light-muted); }
.chip.sm{ padding:3px 7px; font-size:11px; }

/* ---- size tier badge ---- */
.tier{ display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:5px; font-size:11px; font-weight:700;
  background:var(--cream2); color:var(--muted); }
.tier-a{ background:var(--teal); color:#fff; }
.tier-b{ background:var(--sage-mid); color:var(--teal); }
.tier-c{ background:var(--cream2); color:var(--light); }

.tnum{ font-variant-numeric:tabular-nums; }
.empty{ color:var(--muted); text-align:center; padding:34px 16px; font-size:14px; }
.empty a{ color:var(--teal); font-weight:500; }
.pager{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding-top:14px; margin-top:4px; border-top:1px solid var(--line); }
.page-head .sub a{ color:var(--teal); }

.pill.green{ background:#e6f4ec; color:var(--green); }

/* ---- pipeline board (kanban) ---- */
.board{ display:flex; gap:12px; align-items:flex-start;
  overflow-x:auto; overflow-y:hidden; padding-bottom:10px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.board::-webkit-scrollbar{ height:6px; }
.board::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:3px; }
.board .col{ flex:0 0 220px; background:var(--cream2); border:1px solid var(--line);
  border-radius:var(--rc); padding:10px; transition:.14s; }
.board .col.drop-target{ background:var(--sage-light); border-color:var(--sage-mid); }
.board .col h3{ font-size:12.5px; font-weight:600; color:var(--teal);
  margin-bottom:8px; padding:0 2px; overflow:hidden; }
.board .col h3 .count{ display:inline-block; background:var(--white); color:var(--muted);
  border-radius:20px; padding:1px 8px; font-size:11px;
  font-variant-numeric:tabular-nums; margin-left:6px; }
.board .card-link{ display:block; margin-bottom:8px; }
.board .card{ background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:10px 12px;
  transition:.14s; cursor:grab; }
.board .card:hover{ border-color:var(--sage-mid); }
.board .card.dragging{ opacity:.4; }
.board .card-top{ display:flex; justify-content:space-between; gap:6px; }
.board .biz{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.35; }
.board .who{ color:var(--muted); font-size:11.5px; margin-top:4px; }
.board .empty-slot{ border:1px dashed var(--line2); border-radius:var(--r); }

/* ---- company brain: knowledge base (collections + documents) ---- */
.icon{ width:20px; height:20px; flex:0 0 auto; }
.icon-sm{ width:16px; height:16px; }
.brain-back{ display:inline-flex; color:var(--muted); margin-right:6px; vertical-align:-3px; }
.brain-back:hover{ color:var(--teal); }
.brain-search input{ font-size:15px; padding:11px 14px 11px 38px; }
.brain-search-row{ position:relative; display:flex; align-items:center; }
.brain-search-row .icon{ position:absolute; left:12px; pointer-events:none; }

/* Collection cards -- the grid Jacob asked for, modelled on a help-desk KB. */
.brain-collections{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px; }
.coll-card{ display:block; background:var(--white); border:1px solid var(--line);
  border-radius:var(--rc); padding:18px; box-shadow:var(--shadow); transition:.15s; }
.coll-card:hover{ border-color:var(--sage-mid); transform:translateY(-1px); }
.coll-icon{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:9px; background:var(--sage-light);
  color:var(--teal); margin-bottom:10px; }
.coll-name{ font-weight:600; font-size:14.5px; margin-bottom:4px; }
.coll-desc{ line-height:1.5; margin-bottom:10px; }
.coll-count{ color:var(--sage); font-weight:500; }

/* Search results -- reuses .k-item (also used standalone as a search hit
   card), styled as a link since results navigate to the source collection. */
.k-item{ border:1px solid var(--line); border-radius:var(--r); padding:12px 14px;
  margin-bottom:8px; background:var(--white); display:block; }
.k-item.hidden{ display:none; }
.k-item.search-result:hover{ border-color:var(--sage-mid); background:var(--cream2); }
.k-item .k-title{ font-weight:600; font-size:13.5px; margin-bottom:4px; color:var(--ink); }
.k-item .k-body{ font-size:13px; color:var(--ink); line-height:1.55; margin-top:4px; }
.k-item .k-body p{ margin:0 0 8px 0; }
.k-item .k-body p:last-child{ margin-bottom:0; }
.k-item .k-body ul{ margin:0 0 8px 0; padding-left:18px; }
.k-item .k-body a{ color:var(--teal); }

/* Article view -- inside a single collection: filename as heading, summary,
   then the full body. */
.brain-article{ background:var(--white); border:1px solid var(--line);
  border-radius:var(--rc); padding:22px 24px; box-shadow:var(--shadow); margin-bottom:16px; }
.article-title{ font-size:17px; font-weight:600; margin-bottom:6px; scroll-margin-top:16px; }
.article-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.article-summary{ font-size:13.5px; color:var(--muted); line-height:1.6;
  padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.article-summary p{ margin:0 0 8px 0; }
.article-summary p:last-child{ margin-bottom:0; }
.article-body{ font-size:13.5px; color:var(--ink); line-height:1.65; }
.article-body p{ margin:0 0 12px 0; }
.article-body p:last-child{ margin-bottom:0; }
.article-body ul{ margin:0 0 12px 0; padding-left:20px; }
.article-body a{ color:var(--teal); }