/* c0g — editorial theme.
   Warm paper, ink type, hairline rules, mono meta labels, single muted blue accent.
   Replaces the previous dark gradient/rounded-card UI. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  color-scheme: light;

  /* ---------- ink on paper ---------- */
  --paper:    #FAFAF7;
  --paper-2:  #F2F1EB;          /* very subtle inset for code blocks */
  --ink:      #111111;
  --ink-2:    #2a2a2a;
  --muted:    #5a5a57;
  --rule:     #111111;
  --hair:     rgba(17, 17, 17, 0.14);
  --accent:        oklch(0.55 0.14 255);
  --accent-soft:   oklch(0.55 0.14 255 / 0.10);
  --good:     oklch(0.52 0.12 150);
  --warn:     oklch(0.52 0.16  30);

  /* ---------- type ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ---------- layout ---------- */
  --measure:    68ch;
  --gutter:     clamp(20px, 4vw, 96px);
  --rail-pad-y: clamp(14px, 1.6vw, 22px);
  --content-width: 1080px;
  --chat-width:    1040px;

  /* legacy aliases (kept so old report HTML still reads sensible values) */
  --bg:       var(--paper);
  --bg-2:     var(--paper);
  --panel:    var(--paper);
  --panel-2:  var(--paper);
  --panel-3:  var(--paper);
  --border:   var(--hair);
  --border-2: var(--hair);
  --text:     var(--ink);
  --button:   var(--ink);
  --shadow:      none;
  --nav-shadow:  none;
  --radius:      0px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { padding-top: 0 !important; }   /* override report-wrapper inheritance */

/* ---------- typographic primitives ---------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -0.022em; line-height: 1.1; }
h3 { font-size: clamp(20px, 1.6vw, 24px); font-weight: 700; letter-spacing: -0.012em; line-height: 1.2; }
h4 { font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }

p { margin: 0 0 1em; max-width: var(--measure); color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 200ms ease;
}
a:hover { text-decoration-thickness: 2px; }

small, .muted {
  color: var(--muted) !important;
  font-size: 14px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  padding: 1px 5px;
  border-radius: 0;
}
pre {
  font-family: var(--font-mono);
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  padding: 18px 20px;
  border: 1px solid var(--hair) !important;
  border-radius: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- mono meta / eyebrow labels ---------- */
.eyebrow,
.meta,
.hint,
.status,
.c0g-links,
.c0g-brand,
.brand {
  font-family: var(--font-mono);
}

.eyebrow,
.meta {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  line-height: 1;
}

/* ---------- top rail (publication header) ---------- */
.c0g-nav,
.chat-page header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: var(--rail-pad-y) var(--gutter);
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: none;
  box-shadow: none;
}

.c0g-brand,
.brand {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.c0g-links {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.c0g-links a {
  color: var(--muted) !important;
  text-decoration: none;
  margin: 0 0 0 14px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.c0g-links a:hover { color: var(--ink) !important; border-bottom-color: var(--ink); }
.c0g-links a.active {
  color: var(--ink) !important;
  font-weight: 500;
  border-bottom-color: var(--ink);
}
.c0g-links .sep { margin: 0 4px; opacity: 0.4; }

/* ---------- main column ---------- */
body.c0g-page > main {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(48px, 6vw, 96px);
}

body.c0g-page > main > h1 {
  margin-bottom: 0.4em;
}
body.c0g-page > main > h1 + p,
body.c0g-page > main > h1 + .muted {
  font-size: 18px;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-bottom: 2.4em;
}

section {
  margin-bottom: clamp(36px, 5vw, 64px);
  background: transparent !important;
  color: inherit !important;
  border: 0;
}
section > h2 {
  border: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 0.8em;
  position: relative;
  padding-top: 18px;
  border-top: 1px solid var(--rule) !important;
}
section > h2::before {
  content: attr(data-eyebrow);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin-bottom: 14px;
  line-height: 1;
}

/* ---------- bullets & numbered lists ---------- */
main ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}
main ul li {
  position: relative;
  padding-left: 24px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  min-width: 0;
  word-break: normal;
  overflow-wrap: anywhere;
}
main ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--ink);
  border-radius: 0;
}
main ul li strong { color: var(--ink); font-weight: 600; }
main ul li em { font-style: italic; color: var(--muted); }

/* ---------- tables ---------- */
table {
  border-collapse: collapse;
  width: 100%;
  background: transparent !important;
  font-size: 16px;
}
thead tr { border-bottom: 1px solid var(--rule); }
tbody tr { border-bottom: 1px solid var(--hair); }
th {
  background: transparent !important;
  color: var(--ink) !important;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 22px 14px 0;
  border: 0 !important;
}
td {
  background: transparent !important;
  color: var(--ink-2) !important;
  vertical-align: top;
  padding: 18px 22px 18px 0;
  border: 0 !important;
  font-size: 16px;
  line-height: 1.5;
}
td strong { color: var(--ink); font-weight: 600; }

/* ---------- card: hairline rectangle, no shadow, no radius ---------- */
.card {
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 28px 32px;
  margin-bottom: 20px;
  box-shadow: none !important;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.card p { font-size: 16px; line-height: 1.55; }
.card ul { margin-top: 8px; }

/* ---------- forms ---------- */
input, select, textarea {
  font: inherit;
  font-family: var(--font-sans);
  background: transparent;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 0;
  width: 100%;
  outline: none;
  transition: border-color 200ms ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus { border-bottom-width: 2px; padding-bottom: 11px; }

textarea {
  min-height: 78px;
  max-height: 34dvh;
  resize: vertical;
  border: 1px solid var(--ink);
  padding: 14px 16px;
  line-height: 1.5;
}

/* ---------- button: outlined, mono, inverts on hover ---------- */
button {
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
button:hover { background: var(--ink); color: var(--paper); }
button.secondary { border-color: var(--muted); color: var(--muted); }
button.secondary:hover { background: var(--muted); color: var(--paper); }

/* ====================================================================
   CHAT PAGE
   Single column, generous gutters, ink type on paper.
   No bubbles. Speakers are named in mono labels above each turn.
   ==================================================================== */

body.chat-page {
  background: var(--paper) !important;
}

body.chat-page .app {
  max-width: var(--chat-width);
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  gap: 0;
}

.chat-page header {
  padding: var(--rail-pad-y) 0;
}

.chat-page .status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.chat-page .status a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 14px;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 200ms ease, border-color 200ms ease;
}
.chat-page .status a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.chat-page .status .sep { opacity: 0.4; margin-left: 14px; }

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);   /* offline → warm warn dot */
  margin-right: 4px;
}
.dot.on { background: var(--good); }

#messages {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 0 140px;
}

.msg {
  background: transparent !important;
  box-shadow: none !important;
  border: 0;
  border-radius: 0 !important;
  padding: 0;
  max-width: 78%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-2);
  align-self: flex-start;
}
.msg .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
  opacity: 1;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.msg .meta::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ink);
  display: inline-block;
  align-self: center;
}
.msg.user {
  color: var(--ink);
  align-self: flex-end;
  text-align: right;
}
.msg.user .meta {
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.msg.user .meta::before { background: var(--accent); }
.msg.assistant { color: var(--ink-2); }
.msg.system {
  color: var(--muted);
  font-style: italic;
  font-size: 15px;
}
.msg em { color: var(--muted); }
.msg code { font-size: 0.92em; }

/* composer rail at the foot */
.composer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  backdrop-filter: none;
  border-top: 1px solid var(--rule);
}
.composer-inner {
  max-width: var(--chat-width);
  margin: 0 auto;
  padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom));
  display: grid;
  gap: 10px;
}
.composer textarea {
  border: 0;
  padding: 8px 0;
  min-height: 44px;
  font-size: 17px;
  line-height: 1.5;
  background: transparent;
}
.composer textarea:focus { border: 0; padding: 8px 0; }
.row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}
.hint {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  line-height: 1.5;
}
.hint b { color: var(--ink); font-weight: 500; }

/* ====================================================================
   AUTH PAGES — login / setup
   ==================================================================== */
body.auth-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--paper) !important;
}
.auth-card {
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 56px 48px 44px;
  width: min(92vw, 460px);
  box-shadow: none;
}
.auth-card h1 {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 4px;
}
.auth-card h1::before {
  content: "AUTH / SINGLE USER";
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 18px;
}
.auth-card .hint {
  margin-bottom: 26px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.auth-card input {
  width: 100%;
  margin: 14px 0 0;
}
.auth-card button {
  width: 100%;
  margin-top: 28px;
  padding: 14px 22px;
}
.err {
  color: var(--warn);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 14px 0 0;
}

/* ====================================================================
   REPORTS INDEX
   ==================================================================== */
.report-list {
  list-style: none !important;
  padding: 0;
  margin: 0;
  display: block !important;
  border-top: 1px solid var(--rule);
}
.report-list-item {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: baseline;
  gap: 24px;
  padding: 22px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
  border-radius: 0 !important;
}
.report-list-item::before { content: none !important; }
.report-list-item a {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 200ms ease, color 200ms ease;
}
.report-list-item a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.report-list-item .muted {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}

/* ====================================================================
   REPORT WRAPPER (the synced ward-round / project-register HTML)
   The reports inline their own CSS, so we override aggressively.
   ==================================================================== */
body.report-html-page,
body.markdown-report-page {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-sans) !important;
}
body.report-html-page > header:not(.c0g-nav),
body.markdown-report-page > header:not(.c0g-nav) {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: clamp(28px, 4vw, 48px) var(--gutter) !important;
}
body.report-html-page > header:not(.c0g-nav) h1,
body.markdown-report-page > header:not(.c0g-nav) h1 {
  color: var(--ink) !important;
  font-size: clamp(32px, 5vw, 60px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
body.report-html-page > header:not(.c0g-nav) h1::before {
  content: "REPORT / SYNCED FROM HOME COG";
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 14px;
}
body.report-html-page > header:not(.c0g-nav) > div:not(.c0g-brand):not(.c0g-links),
body.markdown-report-page > header:not(.c0g-nav) > div:not(.c0g-brand):not(.c0g-links) {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
body.report-html-page > main,
body.markdown-report-page > main {
  background: var(--paper) !important;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(48px, 6vw, 96px);
}
body.report-html-page section h2 {
  border-left: 0 !important;
  padding-left: 0 !important;
  border-top: 1px solid var(--rule) !important;
  padding-top: 24px !important;
  margin-top: 48px !important;
  font-size: clamp(26px, 3vw, 38px);
}

.markdown-report {
  white-space: pre-wrap;
  line-height: 1.6;
  padding: 24px 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  background: transparent !important;
  border: 0;
}

/* health pills inside synced reports — turn them into editorial tags */
.report-html-page td:nth-child(3),
.report-html-page td:nth-child(6) {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* graph-report layout passthrough (legacy dark-mode markup) */
.layout {
  height: calc(100vh - 64px) !important;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
}
.layout > main.main {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.layout .main svg, svg#graph { width: 100% !important; height: 100% !important; }

/* ====================================================================
   CAPABILITIES MAP — body.capabilities-map-page
   ==================================================================== */
.capabilities-map-page .stat-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 48px;
}
.capabilities-map-page .stat-rail .stat {
  padding: 22px 18px 22px 0;
  border-right: 1px solid var(--hair);
}
.capabilities-map-page .stat-rail .stat:last-child { border-right: 0; }
.capabilities-map-page .stat-rail .stat .n {
  font-family: var(--font-sans);
  font-size: 38px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--ink); display: block; margin-bottom: 10px;
}
.capabilities-map-page .stat-rail .stat .l {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}

.capabilities-map-page .map-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; border-top: 1px solid var(--rule);
}
.capabilities-map-page .map-section {
  border-bottom: 1px solid var(--hair);
  padding: 28px 32px 32px 0;
}
.capabilities-map-page .map-section:nth-child(odd) {
  border-right: 1px solid var(--hair); padding-right: 32px;
}
.capabilities-map-page .map-section:nth-child(even) { padding-left: 32px; }
.capabilities-map-page .map-section h2 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.012em; margin: 0 0 4px;
  border: 0 !important; padding: 0 !important;
}
.capabilities-map-page .map-section h2::before {
  content: attr(data-eyebrow);
  display: block; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 400; margin-bottom: 10px;
}
.capabilities-map-page .map-section .count {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 18px;
}

.capabilities-map-page .item {
  padding: 16px 0; border-top: 1px solid var(--hair);
}
.capabilities-map-page .item:first-of-type { border-top: 0; padding-top: 4px; }
.capabilities-map-page .item-head {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 14px; margin-bottom: 6px;
}
.capabilities-map-page .item-head strong {
  font-size: 16px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--ink);
}
.capabilities-map-page .item-head .type {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.capabilities-map-page .item .summary {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-2); margin: 0 0 8px;
}
.capabilities-map-page .item .mini {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--muted); margin-top: 6px;
}

.capabilities-map-page .pills {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px;
}
.capabilities-map-page .pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.capabilities-map-page .pill::before {
  content: ""; width: 6px; height: 6px;
  background: var(--muted); display: inline-block;
}
.capabilities-map-page .pill.active { color: var(--accent); }
.capabilities-map-page .pill.active::before { background: var(--accent); }
.capabilities-map-page .pill.recent::before { background: var(--good); }
.capabilities-map-page .pill.task { color: var(--warn); }
.capabilities-map-page .pill.task::before { background: var(--warn); }
.capabilities-map-page .pill.overdue::before { background: var(--warn); }

.capabilities-map-page .toolbar {
  display: flex; gap: 22px; margin: 0 0 36px;
  padding-bottom: 22px; border-bottom: 1px solid var(--hair);
}
.capabilities-map-page .toolbar a {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink); padding-bottom: 3px;
}
.capabilities-map-page .toolbar a.muted-link {
  color: var(--muted); border-bottom-color: var(--hair);
}
.capabilities-map-page .toolbar a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ====================================================================
   CAPABILITIES GRAPH — body.capabilities-graph-page
   ==================================================================== */
.capabilities-graph-page > header { padding-bottom: 18px !important; }

.capabilities-graph-page .graph-shell {
  display: grid; grid-template-columns: 360px 1fr;
  height: calc(100vh - 180px); min-height: 720px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.capabilities-graph-page .graph-side {
  border-right: 1px solid var(--rule);
  padding: 28px 28px 28px var(--gutter);
  overflow: auto; background: var(--paper);
}
.capabilities-graph-page .graph-main {
  position: relative; background: var(--paper); overflow: hidden;
}
.capabilities-graph-page .graph-side h2 {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.012em; margin: 0 0 4px;
  border: 0 !important; padding: 0 !important;
}
.capabilities-graph-page .graph-side h2::before {
  content: "01 / NETWORK";
  display: block; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 400; margin-bottom: 10px;
}
.capabilities-graph-page .graph-side .lede {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2); margin: 6px 0 26px;
}

.capabilities-graph-page .controls {
  display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px;
}
.capabilities-graph-page .controls label {
  display: block; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}
.capabilities-graph-page .controls input,
.capabilities-graph-page .controls select {
  font-family: var(--font-sans); font-size: 14px;
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--ink);
  border-radius: 0; padding: 8px 0; width: 100%;
}
.capabilities-graph-page .controls input:focus,
.capabilities-graph-page .controls select:focus {
  border-bottom-width: 2px; padding-bottom: 7px; outline: none;
}

.capabilities-graph-page .legend {
  border-top: 1px solid var(--hair);
  padding-top: 18px; margin-bottom: 24px;
}
.capabilities-graph-page .legend-title {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.capabilities-graph-page .legend-row {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 10px; align-items: center; padding: 5px 0;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2);
}
.capabilities-graph-page .legend-row .swatch {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--ink);
}
.capabilities-graph-page .legend-row .swatch.sq { border-radius: 0; }
.capabilities-graph-page .legend-row .count { color: var(--muted); }

.capabilities-graph-page .detail-card {
  border: 1px solid var(--ink);
  padding: 22px 22px 24px; margin-top: 4px;
}
.capabilities-graph-page .detail-card .eyebrow {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.capabilities-graph-page .detail-card h3 {
  font-size: 20px; font-weight: 700;
  letter-spacing: -0.012em; margin: 0 0 6px;
}
.capabilities-graph-page .detail-card .meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 14px;
}
.capabilities-graph-page .detail-card .summary {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2); margin-bottom: 14px;
}
.capabilities-graph-page .detail-card .pillrow {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px;
}
.capabilities-graph-page .detail-card .pillrow .pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.capabilities-graph-page .detail-card .pillrow .pill::before {
  content: ""; width: 6px; height: 6px;
  background: var(--muted); display: inline-block;
}
.capabilities-graph-page .pill.active { color: var(--accent); }
.capabilities-graph-page .pill.active::before { background: var(--accent); }
.capabilities-graph-page .pill.recent::before { background: var(--good); }
.capabilities-graph-page .pill.task { color: var(--warn); }
.capabilities-graph-page .pill.task::before { background: var(--warn); }

.capabilities-graph-page .neighbors-title {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  margin: 18px 0 10px; padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.capabilities-graph-page .neighbors {
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  display: block !important;
}
.capabilities-graph-page .neighbors li {
  padding: 8px 0 !important; padding-left: 0 !important;
  border-bottom: 1px solid var(--hair);
  font-size: 13px; color: var(--ink-2); line-height: 1.4;
}
.capabilities-graph-page .neighbors li::before { content: none !important; }
.capabilities-graph-page .neighbors li strong { color: var(--ink); font-weight: 600; }
.capabilities-graph-page .neighbors li .edge {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  display: block; margin-top: 2px;
}

.capabilities-graph-page svg#graph {
  width: 100%; height: 100%; display: block; background: var(--paper);
}
.capabilities-graph-page .node-label {
  font-family: var(--font-mono);
  font-size: 10px; fill: var(--ink);
  paint-order: stroke;
  stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round;
  pointer-events: none; letter-spacing: 0.04em;
}
.capabilities-graph-page .link {
  stroke: var(--ink); stroke-opacity: 0.18;
}
.capabilities-graph-page .node circle,
.capabilities-graph-page .node rect {
  transition: stroke-width 160ms ease;
}
.capabilities-graph-page .node:hover circle,
.capabilities-graph-page .node:hover rect {
  stroke: var(--accent); stroke-width: 2.5px;
}

.capabilities-graph-page .footer-rail {
  position: absolute; bottom: 16px; right: 18px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
  background: var(--paper); border: 1px solid var(--hair);
  padding: 6px 10px;
}
.capabilities-graph-page .stat-strip {
  position: absolute; top: 16px; left: 18px;
  display: flex; gap: 28px;
  background: var(--paper); border: 1px solid var(--hair);
  padding: 10px 18px;
}
.capabilities-graph-page .stat-strip .s {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; color: var(--muted);
}
.capabilities-graph-page .stat-strip .s strong {
  color: var(--ink); font-weight: 700;
  margin-right: 6px; font-size: 13px; letter-spacing: 0;
}

/* ====================================================================
   Footer rail (added by topnav_html())
   ==================================================================== */
.c0g-footer {
  border-top: 1px solid var(--hair);
  padding: 18px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ====================================================================
   Mobile (≤640px) — hairline rails stay; padding collapses.
   ==================================================================== */
@media (max-width: 640px) {
  :root { --gutter: 20px; }

  html, body { font-size: 16px; }

  .c0g-nav,
  .chat-page header {
    padding: 14px var(--gutter);
    flex-wrap: wrap;
  }
  .c0g-links, .chat-page .status { width: 100%; text-align: left; margin-top: 4px; }
  .c0g-links a, .chat-page .status a { margin: 0 12px 0 0; }
  .c0g-links a:first-child, .chat-page .status a:first-child { margin-left: 0; }

  body.c0g-page > main { padding: 24px var(--gutter) 64px; }

  .auth-card { padding: 36px 24px 28px; }
  .auth-card h1 { font-size: 44px; }

  .card { padding: 22px 22px; }

  table { font-size: 14px; }
  th { font-size: 11px; padding-right: 14px; }
  td { padding: 14px 14px 14px 0; font-size: 14px; }

  .composer-inner { padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
  .hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .msg { font-size: 15px; line-height: 1.4; }

  body.report-html-page > header:not(.c0g-nav) h1,
  body.markdown-report-page > header:not(.c0g-nav) h1 { font-size: 30px !important; }
}