/*
  The Nervus System — Concepts (concepts.html), in the Knowledge workspace.
  Loaded after jarvis-design-system.css and jarvis-components.css, before
  jarvis-shell.css. Two views: the concepts you have (cards, with a
  first-run card when there are none) and one concept with everything in
  it, grouped by kind, each row saying why it is there.
*/

html, body { background: var(--db-bg); color: var(--db-text); font-family: var(--font-body); }

.cx-page {
  max-width: 1180px; margin: 0 auto;
  padding: var(--space-6) var(--space-8) var(--space-12);
  min-height: calc(100vh - var(--jx-shell-h, 52px));
  box-sizing: border-box;
}
.cx-page * { box-sizing: border-box; }
.cx-loading { padding: var(--space-10) 0; color: var(--db-text-muted); font-size: 13.5px; }

/* ---------- Page head ---------- */
.cx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.cx-head p { margin: 6px 0 0; max-width: 620px; color: var(--db-text-muted); font-size: 13.5px; line-height: 1.55; }
.cx-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cx-aliases { margin-top: 6px; color: var(--db-text-faint); font-size: 12px; }

/* ---------- Concept cards ---------- */
.cx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.cx-card {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: var(--space-5); background: var(--db-surface);
  border: 1px solid var(--db-border); border-radius: var(--db-radius);
  color: var(--db-text); text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.cx-card:hover { border-color: var(--db-border-strong); box-shadow: var(--shadow-md); }
.cx-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.cx-card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.15; color: var(--db-text); overflow-wrap: anywhere; }
.cx-card p { margin: 0; color: var(--db-text-muted); font-size: 13px; line-height: 1.5; }
.cx-counts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--n-150); color: var(--db-text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cx-counts b { color: var(--db-text); font-weight: 650; }
.cx-counts .cx-none { color: var(--db-text-faint); }

/* ---------- First run ---------- */
.cx-start {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8);
  padding: var(--space-8); background: var(--db-surface);
  border: 1px solid var(--db-border); border-radius: var(--db-radius-lg);
}
.cx-start h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.12; }
.cx-start p { margin: var(--space-3) 0 0; color: var(--db-text-muted); font-size: 14px; line-height: 1.6; }
.cx-start form { display: grid; gap: var(--space-3); align-content: start; }
.cx-start label { font-size: 12px; font-weight: 650; color: var(--n-600); }
.cx-examples { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-examples button { border: 1px dashed var(--db-border-strong); background: var(--n-50); color: var(--n-600); border-radius: var(--db-radius-full); padding: 3px 10px; font: 600 12px var(--font-body); cursor: pointer; }
.cx-examples button:hover { border-color: var(--db-primary); color: var(--db-primary); }
.cx-test { margin-top: var(--space-4) !important; padding-left: var(--space-3); border-left: 3px solid var(--db-accent); color: var(--db-text) !important; font-weight: 600; font-size: 13.5px !important; }

.cx-input, .cx-textarea, .cx-select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--db-border); border-radius: var(--db-radius-sm);
  background: var(--db-surface); color: var(--db-text); font: 13.5px var(--font-body);
}
.cx-textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.cx-input:focus, .cx-textarea:focus, .cx-select:focus { outline: none; border-color: var(--db-primary); box-shadow: 0 0 0 3px var(--db-primary-soft); }
.cx-field { display: grid; gap: 6px; }
.cx-field + .cx-field { margin-top: var(--space-4); }
.cx-field label { font-size: 12px; font-weight: 650; color: var(--n-600); }
.cx-hint { color: var(--db-text-faint); font-size: 12px; line-height: 1.5; }
.cx-error { color: var(--db-danger); font-size: 12.5px; }
.cx-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

/* ---------- One concept ---------- */
.cx-section { margin-top: var(--space-6); }
.cx-section-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }
.cx-section-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; }
.cx-section-head span { color: var(--db-text-faint); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cx-rows { background: var(--db-surface); border: 1px solid var(--db-border); border-radius: var(--db-radius); overflow: hidden; }
.cx-row { display: flex; align-items: center; gap: var(--space-3); padding: 10px 14px; border-bottom: 1px solid var(--n-150); min-width: 0; }
.cx-row:last-child { border-bottom: 0; }
.cx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-row-main a { color: var(--db-text); font-weight: 600; font-size: 13.5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-row-main > span:first-child { color: var(--db-text); font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-row-main a:hover { color: var(--db-primary); text-decoration: underline; }
.cx-row-meta { color: var(--db-text-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.cx-kind {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; background: var(--db-primary-soft); color: var(--db-primary);
}
.cx-kind svg { width: 16px; height: 16px; }

.cx-suggested { border: 1px dashed var(--db-warning); background: var(--db-warning-soft); border-radius: var(--db-radius); padding: var(--space-4); }
.cx-suggested .cx-rows { border-color: color-mix(in srgb, var(--db-warning) 35%, var(--db-border)); }
.cx-suggested-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.cx-suggested-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 19px; color: var(--db-warning-hover); }
.cx-suggested-head p { margin: 0; color: var(--n-600); font-size: 12.5px; }

.cx-empty { margin-top: var(--space-6); }

.cx-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--space-3); color: var(--db-text-muted); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.cx-back:hover { color: var(--db-primary); }

/* ---------- Hub: Ask, what stands, still open, changed, history, people ---------- */
.cx-section-head h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 17px; }
.cx-ask {
  display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6);
  padding: 6px 6px 6px 14px; background: var(--db-surface); border: 1px solid var(--db-border); border-radius: var(--db-radius);
}
.cx-ask:focus-within { border-color: var(--db-primary); box-shadow: 0 0 0 3px var(--db-primary-soft); }
.cx-ask-icon { color: var(--db-accent); font-size: 14px; }
.cx-ask-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--db-text); font: 14px var(--font-body); padding: 6px 0; }
.cx-suggested + .cx-hub { margin-top: var(--space-6); }

.cx-hub { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.cx-hub-main, .cx-hub-side { display: grid; gap: var(--space-5); min-width: 0; }
.cx-hub-section { background: var(--db-surface); border: 1px solid var(--db-border); border-radius: var(--db-radius); padding: var(--space-4) var(--space-5); min-width: 0; }
.cx-hub-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.cx-hub-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.2; }
.cx-hub-head > span { color: var(--db-text-faint); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cx-hub-head .cx-period { margin-left: auto; }
.cx-hub-empty { margin: 0; color: var(--db-text-muted); font-size: 13px; line-height: 1.5; }
.cx-sub { margin: var(--space-4) 0 var(--space-2); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--db-text-faint); }
.cx-sub:first-child { margin-top: 0; }
.cx-period { height: 28px; padding: 0 8px; border: 1px solid var(--db-border); border-radius: var(--db-radius-sm); background: var(--db-surface); color: var(--db-text); font: 12.5px var(--font-body); }

.cx-items { list-style: none; margin: 0; padding: 0; }
.cx-item { padding: 10px 0; border-top: 1px solid var(--n-150); min-width: 0; }
.cx-item:first-child { border-top: 0; padding-top: 2px; }
.cx-item-text { font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--db-text); overflow-wrap: anywhere; }
.cx-item-text a { color: inherit; text-decoration: none; }
.cx-item-text a:hover { color: var(--db-primary); text-decoration: underline; }
.cx-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; color: var(--db-text-muted); font-size: 12px; line-height: 1.4; }
.cx-item-meta a { color: var(--db-text-muted); text-decoration: underline; text-decoration-color: var(--db-border-strong); text-underline-offset: 2px; }
.cx-item-meta a:hover { color: var(--db-primary); text-decoration-color: currentColor; }
.cx-soft { color: var(--db-text-faint); }
.cx-late { color: var(--db-danger); font-weight: 600; }
.cx-trust { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: var(--db-radius-full); font-size: 11px; font-weight: 600; }
.cx-trust.is-fact { background: var(--db-accent-soft); color: color-mix(in srgb, var(--db-accent) 70%, #1f2937); }
.cx-trust.is-derived { background: var(--db-primary-soft); color: var(--db-primary); }
.cx-trust.is-inferred { background: var(--n-100); color: var(--n-600); }
.cx-quote { margin: 6px 0 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--db-border-strong); color: var(--n-600); font-size: 12.5px; font-style: italic; line-height: 1.5; overflow-wrap: anywhere; }
.cx-item-note { margin-top: 6px; font-size: 12.5px; color: var(--n-700); }
.cx-item-note.is-warn { color: var(--db-warning-hover); }

.cx-events { list-style: none; margin: 0; padding: 0; }
.cx-event { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--n-150); font-size: 13px; line-height: 1.45; }
.cx-event:first-child, .cx-month + .cx-event { border-top: 0; }
.cx-event-day { color: var(--db-text-faint); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 1px; }
.cx-event-main { min-width: 0; overflow-wrap: anywhere; }
.cx-month { padding: var(--space-3) 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--db-text-faint); }
.cx-month:first-child { padding-top: 0; }
.cx-hub-section .jbtn { margin-top: var(--space-2); }
.cx-hub-section .cx-hint { margin: var(--space-3) 0 0; }

.cx-people { list-style: none; margin: 0; padding: 0; }
.cx-person { display: flex; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--n-150); min-width: 0; }
.cx-person:first-child { border-top: 0; padding-top: 0; }
.cx-avatar { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--db-primary-soft); color: var(--db-primary); font-size: 11px; font-weight: 700; }
.cx-person-name { font-weight: 600; font-size: 13.5px; }
.cx-waiting { margin-top: 3px; color: var(--n-600); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.cx-contains { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--db-text-muted); }
.cx-contains a { color: var(--db-text); font-weight: 600; text-decoration: none; }
.cx-contains a:hover { color: var(--db-primary); text-decoration: underline; }
.cx-everything { margin-top: var(--space-8); scroll-margin-top: calc(var(--jx-shell-h, 52px) + 16px); }
.cx-everything .cx-section { margin-top: var(--space-4); }

/* ---------- Drawer contents ---------- */
.cx-cand { display: flex; align-items: center; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--n-150); }
.cx-cand:last-child { border-bottom: 0; }
.cx-cand .cx-row-main span:first-child { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-cand-list { margin-top: var(--space-3); }
.cx-warn { padding: var(--space-3) var(--space-4); border-radius: var(--db-radius-sm); background: var(--db-danger-soft); color: var(--n-800); font-size: 13px; line-height: 1.5; }
.cx-note { padding: var(--space-3) var(--space-4); border-radius: var(--db-radius-sm); background: var(--n-100); color: var(--n-700); font-size: 13px; line-height: 1.5; }
.cx-note + .cx-note { margin-top: var(--space-2); }

.jdrawer[hidden] { display: flex; visibility: hidden; }
.jdrawer.active { visibility: visible; }

@media (max-width: 1024px) { .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx-hub { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .cx-page { padding: var(--space-5) var(--space-4) var(--space-10); }
  .cx-grid { grid-template-columns: minmax(0, 1fr); }
  .cx-start { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); gap: var(--space-5); }
  .cx-row { flex-wrap: wrap; }
  .cx-row-actions { width: 100%; padding-left: 42px; }
  .cx-hub-section { padding: var(--space-4); }
  .cx-hub-head { flex-wrap: wrap; }
  .cx-event { grid-template-columns: 52px minmax(0, 1fr); }
  .cx-ask-input::placeholder { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .cx-card { transition: none; } }

/* ---------- Phase 3: quick check, offers, quiet concepts ---------- */
.cx-check-banner {
  display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 10px 14px;
  border: 1px dashed var(--db-warning); border-radius: var(--db-radius); background: var(--db-warning-soft);
  color: var(--n-800); font-size: 13.5px; text-decoration: none;
}
.cx-check-banner:hover { border-style: solid; }
.cx-check-banner > span:nth-child(2) { flex: 1; }
.cx-check-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--db-warning); flex: 0 0 auto; }
.cx-quiet { margin-top: var(--space-8); }
.cx-quiet summary { cursor: pointer; font-family: var(--font-display); font-size: 19px; color: var(--db-text-muted); list-style: revert; }
.cx-quiet summary span { font-family: var(--font-body); font-size: 12px; font-weight: 650; color: var(--db-text-faint); margin-left: 6px; }
.cx-quiet .cx-hint { margin: var(--space-2) 0 var(--space-4); }
.cx-quiet .cx-card { opacity: .8; }
.cx-offers { list-style: none; margin: 0; padding: 0; }
.cx-offer { padding: var(--space-4) 0; border-top: 1px solid var(--n-150); }
.cx-offer:first-child { border-top: 0; padding-top: 0; }
.cx-offer-q { font-size: 15px; }
.cx-offer-sources { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--n-700); }
.cx-offer-sources a { color: inherit; }
.cx-offer-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.cx-offer-name { display: grid; gap: 4px; font-size: 11.5px; font-weight: 650; color: var(--n-600); }
.cx-offer-name .cx-input { width: 220px; max-width: 100%; padding: 6px 10px; }

/* What's new: since the person last opened the concept */
.cx-new-chip { margin-left: auto; }
.cx-card-new { margin: 2px 0 6px; font-size: 12px; color: var(--db-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-news { margin-bottom: var(--space-5, 20px); padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--db-accent) 40%, var(--db-border)); border-left: 3px solid var(--db-accent); border-radius: var(--db-radius, 10px); background: var(--db-surface); }
.cx-news.is-quiet { border-color: var(--db-border); border-left-color: var(--db-border-strong); }
.cx-news-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.cx-news-head h2 { margin: 0; font-size: 15px; font-weight: 650; }
.cx-news-since { color: var(--db-text-muted); font-size: 12px; }
.cx-news-tiles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cx-news-tile { padding: 4px 10px; border-radius: 999px; background: var(--db-accent-soft); color: var(--db-text); font-size: 12px; }
.cx-news-tile b { font-variant-numeric: tabular-nums; }