/* ============================================================
   Peer-Ring Documentation — design system
   Clawpilot theme tokens (mandatory) + ui-designer component layer
   ============================================================ */

:root {
  color-scheme: light;
  --cp-bg: #f7f4ef;
  --cp-bg-elevated: #fcfbf8;
  --cp-surface: #ffffff;
  --cp-surface-soft: #f5f5f5;
  --cp-border: #dedede;
  --cp-border-strong: #919191;
  --cp-text: #242424;
  --cp-text-muted: #5c5c5c;
  --cp-text-soft: #6f6f6f;
  --cp-accent: #b11f4b;
  --cp-accent-hover: #9a1a41;
  --cp-accent-soft: rgba(177, 31, 75, 0.08);
  --cp-accent-fg: #ffffff;
  --cp-success: #16a34a;
  --cp-danger: #dc2626;
  --cp-warning: #f59e0b;
  --cp-link: #0078d4;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
  --cp-overlay: rgba(255, 255, 255, 0.8);
  --cp-panel: rgba(255, 255, 255, 0.86);
  --cp-panel-strong: rgba(255, 255, 255, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.55);
  --cp-highlight: rgba(177, 31, 75, 0.12);

  /* Per-role accent hues (used sparingly, as tints) */
  --role-cos: #2563eb;
  --role-cos-soft: rgba(37, 99, 235, 0.10);
  --role-sa: #7c3aed;
  --role-sa-soft: rgba(124, 58, 237, 0.10);
  --role-steward: #0d9488;
  --role-steward-soft: rgba(13, 148, 136, 0.10);

  /* Spacing (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;

  --radius-sm: 0.5rem;
  --radius: 0.625rem;
  --radius-lg: 16px;

  --font: "Segoe UI", Aptos, Calibri, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: Consolas, "Courier New", Courier, monospace;

  --card-shadow: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --maxw: 1080px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --cp-bg: #3d3b3a;
  --cp-bg-elevated: #343231;
  --cp-surface: #292929;
  --cp-surface-soft: #2e2e2e;
  --cp-border: #474747;
  --cp-border-strong: #5f5f5f;
  --cp-text: #dedede;
  --cp-text-muted: #919191;
  --cp-text-soft: #b0b0b0;
  --cp-accent: #fd8ea1;
  --cp-accent-hover: #fb7b91;
  --cp-accent-soft: rgba(253, 142, 161, 0.14);
  --cp-accent-fg: #1a1a1a;
  --cp-success: #4ade80;
  --cp-danger: #f87171;
  --cp-warning: #fbbf24;
  --cp-link: #4da6ff;
  --cp-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  --cp-overlay: rgba(41, 41, 41, 0.88);
  --cp-panel: rgba(41, 41, 41, 0.72);
  --cp-panel-strong: rgba(41, 41, 41, 0.96);
  --cp-sheen: rgba(255, 255, 255, 0.04);
  --cp-highlight: rgba(253, 142, 161, 0.12);

  --role-cos: #60a5fa;
  --role-cos-soft: rgba(96, 165, 250, 0.14);
  --role-sa: #c4b5fd;
  --role-sa-soft: rgba(196, 181, 253, 0.14);
  --role-steward: #5eead4;
  --role-steward-soft: rgba(94, 234, 212, 0.14);

  --card-shadow: 0 0 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--cp-bg);
  color: var(--cp-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cp-link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; font-weight: 600; color: var(--cp-text); }
h1 { font-size: 2.25rem; margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; margin: var(--space-12) 0 var(--space-4); }
h3 { font-size: 1.15rem; margin: var(--space-6) 0 var(--space-2); }
p { margin: 0 0 var(--space-4); }
code { font-family: var(--mono); font-size: 0.9em; background: var(--cp-surface-soft);
  padding: 0.1em 0.35em; border-radius: 4px; border: 1px solid var(--cp-border); }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-6); }

/* ---------- skip link / a11y ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--cp-accent);
  color: var(--cp-accent-fg); padding: var(--space-2) var(--space-4); z-index: 100;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; border-radius: 3px; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cp-panel-strong);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cp-border);
}
.nav {
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
}
.brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; margin-right: auto; }
.brand .ring-dot { width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(var(--role-cos), var(--role-sa), var(--role-steward), var(--role-cos)); }
.brand small { display: block; font-weight: 400; font-size: 0.72rem; color: var(--cp-text-muted); }
.nav-links { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.nav-links a {
  color: var(--cp-text-muted); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); font-size: 0.92rem; font-weight: 500;
}
.nav-links a:hover { color: var(--cp-text); background: var(--cp-surface-soft); text-decoration: none; }
.nav-links a.active { color: var(--cp-accent); background: var(--cp-accent-soft); }

.theme-toggle {
  border: 1px solid var(--cp-border); background: var(--cp-surface);
  color: var(--cp-text); border-radius: var(--radius); cursor: pointer;
  width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.05rem;
  transition: background 150ms ease, border-color 150ms ease;
}
.theme-toggle:hover { background: var(--cp-surface-soft); border-color: var(--cp-border-strong); }

/* ---------- hero ---------- */
.hero { padding: var(--space-16) 0 var(--space-12); }
.hero .eyebrow { color: var(--cp-accent); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 0.78rem; margin-bottom: var(--space-3); }
.hero .lede { font-size: 1.2rem; color: var(--cp-text-muted); max-width: 60ch; }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }

/* ---------- pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3); border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; border: 1px solid var(--cp-border);
  background: var(--cp-surface); color: var(--cp-text-muted);
}
.pill.accent { background: var(--cp-accent-soft); color: var(--cp-accent); border-color: transparent; }
.badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; }
.badge.cos { background: var(--role-cos-soft); color: var(--role-cos); }
.badge.sa { background: var(--role-sa-soft); color: var(--role-sa); }
.badge.steward { background: var(--role-steward-soft); color: var(--role-steward); }
.badge.ok { background: rgba(22,163,74,0.12); color: var(--cp-success); }
.badge.warn { background: rgba(245,158,11,0.14); color: var(--cp-warning); }
.badge.danger { background: rgba(220,38,38,0.12); color: var(--cp-danger); }

/* ---------- cards / grid ---------- */
.grid { display: grid; gap: var(--space-5); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--card-shadow); transition: transform 200ms ease, box-shadow 200ms ease;
}
.card.hover:hover { transform: translateY(-3px); box-shadow: var(--cp-shadow); }
.card h3 { margin-top: 0; }
.card .role-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.card .role-emoji { font-size: 1.6rem; }
.card.role-cos { border-top: 3px solid var(--role-cos); }
.card.role-sa { border-top: 3px solid var(--role-sa); }
.card.role-steward { border-top: 3px solid var(--role-steward); }

.muted { color: var(--cp-text-muted); }
.small { font-size: 0.88rem; }
.kicker { color: var(--cp-accent); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- section divider ---------- */
.section { padding: var(--space-8) 0; }
.section + .section { border-top: 1px solid var(--cp-border); }

/* ---------- lists ---------- */
ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { padding: var(--space-2) 0; border-bottom: 1px solid var(--cp-border); }
ul.clean li:last-child { border-bottom: none; }
ul.check { list-style: none; padding: 0; margin: 0; }
ul.check li { position: relative; padding: var(--space-1) 0 var(--space-1) var(--space-6); }
ul.check li::before { content: "✓"; position: absolute; left: 0; color: var(--cp-success); font-weight: 700; }
ul.no li { position: relative; padding: var(--space-1) 0 var(--space-1) var(--space-6); list-style: none; }
ul.no { padding: 0; margin: 0; }
ul.no li::before { content: "✕"; position: absolute; left: 0; color: var(--cp-danger); font-weight: 700; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--cp-border); border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--cp-border); }
th { background: var(--cp-surface-soft); font-weight: 600; color: var(--cp-text); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--cp-accent-soft); }

/* ---------- callouts ---------- */
.callout {
  border-left: 4px solid var(--cp-accent); background: var(--cp-accent-soft);
  padding: var(--space-4) var(--space-5); border-radius: 0 var(--radius) var(--radius) 0;
  margin: var(--space-5) 0;
}
.callout.warn { border-left-color: var(--cp-warning); background: rgba(245,158,11,0.10); }
.callout.ok { border-left-color: var(--cp-success); background: rgba(22,163,74,0.09); }
.callout.danger { border-left-color: var(--cp-danger); background: rgba(220,38,38,0.09); }
.callout.info { border-left-color: var(--cp-link); background: rgba(37,99,235,0.08); }
.callout strong { color: var(--cp-text); }
.callout p:first-child { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* ---------- status tags + definition rows ---------- */
.tag { display: inline-block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.tag.wired { background: rgba(22,163,74,0.14); color: var(--cp-success); }
.tag.partial { background: rgba(245,158,11,0.16); color: var(--cp-warning); }
.tag.gap { background: rgba(220,38,38,0.12); color: var(--cp-danger); }
.tag.planned { background: var(--cp-surface-soft); color: var(--cp-text-muted); border: 1px solid var(--cp-border); }
.tag.bug { background: rgba(220,38,38,0.16); color: var(--cp-danger); }
.tag.discrepancy { background: rgba(245,158,11,0.16); color: var(--cp-warning); }
.tag.question { background: rgba(37,99,235,0.12); color: var(--cp-link); }
.tag.deferred { background: rgba(99,102,241,0.14); color: #6366f1; border: 1px solid rgba(99,102,241,0.35); }
.tag.drift { background: rgba(245,158,11,0.16); color: var(--cp-warning); }
.tag.resolved { background: rgba(22,163,74,0.16); color: var(--cp-success); border: 1px solid rgba(22,163,74,0.35); }
.tag.partial-resolved { background: rgba(22,163,74,0.10); color: var(--cp-success); border: 1px dashed rgba(22,163,74,0.45); }
.tag.archive { background: rgba(120,113,108,0.16); color: #78716c; border: 1px solid rgba(120,113,108,0.40); }
.tag.live { background: var(--cp-accent-soft); color: var(--cp-accent); border: 1px solid var(--cp-accent); }
.tag.blocker { background: rgba(220,38,38,0.22); color: var(--cp-danger); border: 1px solid rgba(220,38,38,0.55); font-weight: 800; }
.tag.major { background: rgba(245,158,11,0.22); color: var(--cp-warning); border: 1px solid rgba(245,158,11,0.50); }
.tag.minor { background: var(--cp-surface-soft); color: var(--cp-text-muted); border: 1px solid var(--cp-border); }

/* Archive ribbon for legacy pages */
.archive-banner {
  background: repeating-linear-gradient(135deg, rgba(120,113,108,0.10) 0 14px, rgba(120,113,108,0.18) 14px 28px);
  border-top: 2px solid #78716c; border-bottom: 2px solid #78716c;
  padding: var(--space-3) 0; color: #57534e; font-size: 0.92rem;
}
.archive-banner strong { color: #1c1917; }
[data-theme="dark"] .archive-banner { color: #d6d3d1; }
[data-theme="dark"] .archive-banner strong { color: #fafaf9; }

/* Triple-column compare grid for plan/docs/live */
.grid.cols-compare { grid-template-columns: 1.1fr 1.1fr 1.1fr; }
.compare-col { display: flex; flex-direction: column; gap: var(--space-3); }
.compare-col header { padding: var(--space-2) var(--space-3); border-radius: var(--cp-radius-sm);
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.compare-col.doc header { background: rgba(37,99,235,0.10); color: var(--cp-link); }
.compare-col.plan header { background: rgba(99,102,241,0.12); color: #6366f1; }
.compare-col.live header { background: var(--cp-accent-soft); color: var(--cp-accent); }

/* Hot-spot finding card */
.finding {
  border: 1px solid var(--cp-border); border-left-width: 4px; border-radius: var(--cp-radius);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
  background: var(--cp-surface);
}
.finding.blocker { border-left-color: var(--cp-danger); }
.finding.major { border-left-color: var(--cp-warning); }
.finding.minor { border-left-color: var(--cp-border-strong); }
.finding h4 { margin: 0 0 var(--space-2); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.finding h4 .fid { font-family: var(--font-mono); font-size: 0.78rem; color: var(--cp-text-muted); }
.finding .meta { font-size: 0.8rem; color: var(--cp-text-muted); margin-bottom: var(--space-2); }
.finding p { margin: var(--space-2) 0; }
.finding p.fix { background: var(--cp-surface-soft); border-radius: var(--cp-radius-sm); padding: var(--space-2) var(--space-3); }
.issue.resolved { border-left-color: var(--cp-success); opacity: 0.95; }

/* ---------- issue punch-list ---------- */
.prio { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--radius); vertical-align: middle;
  border: 1px solid transparent; }
.prio.p0 { background: rgba(220,38,38,0.14); color: var(--cp-danger); border-color: rgba(220,38,38,0.35); }
.prio.p1 { background: rgba(245,158,11,0.16); color: var(--cp-warning); border-color: rgba(245,158,11,0.35); }
.prio.p2 { background: var(--cp-surface-soft); color: var(--cp-text-muted); border-color: var(--cp-border); }
.issue { border: 1px solid var(--cp-border); border-radius: var(--radius-lg); padding: var(--space-5);
  margin: var(--space-4) 0; background: var(--cp-surface); }
.issue > h3 { margin-top: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.issue .iid { font-family: var(--mono); font-size: 0.82rem; color: var(--cp-accent); font-weight: 700; }
.issue.p0 { border-left: 4px solid var(--cp-danger); }
.issue.p1 { border-left: 4px solid var(--cp-warning); }
.issue.p2 { border-left: 4px solid var(--cp-border); }
.path { font-family: var(--mono); font-size: 0.84rem; background: var(--cp-surface-soft);
  border: 1px solid var(--cp-border); border-radius: var(--radius); padding: 2px 7px;
  word-break: break-all; }
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0; }
.deflist dt { font-weight: 600; color: var(--cp-text); }
.deflist dd { margin: 0; color: var(--cp-text-muted); }
@media (max-width: 640px) { .deflist { grid-template-columns: 1fr; gap: 2px var(--space-5); }
  .deflist dd { margin-bottom: var(--space-3); } }

/* ---------- example "rendered output" frames ---------- */
.render-frame {
  border: 1px solid var(--cp-border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--card-shadow); margin: var(--space-5) 0;
}
.render-frame .titlebar {
  background: var(--cp-surface-soft); border-bottom: 1px solid var(--cp-border);
  padding: var(--space-2) var(--space-4); display: flex; align-items: center; gap: var(--space-2);
  font-size: 0.82rem; color: var(--cp-text-muted);
}
.render-frame .dots { display: flex; gap: 6px; margin-right: var(--space-2); }
.render-frame .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--cp-border-strong); opacity: 0.6; }
.render-frame .body { padding: var(--space-5); background: var(--cp-surface); }
.render-frame .body.chat { background: var(--cp-bg-elevated); }

/* Teams-style DM bubble */
.dm {
  background: var(--cp-surface); border: 1px solid var(--cp-border);
  border-radius: 4px 12px 12px 12px; padding: var(--space-4) var(--space-5);
  max-width: 640px; box-shadow: var(--card-shadow);
}
.dm .dm-meta { font-size: 0.78rem; color: var(--cp-text-muted); margin-bottom: var(--space-2); }
.dm h4 { margin: 0 0 var(--space-2); }
.dm h5 { margin: var(--space-4) 0 var(--space-1); font-size: 0.82rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--cp-accent); }
.dm ol, .dm ul { margin: 0 0 var(--space-2); padding-left: 1.2rem; }
.dm li { margin: 2px 0; }

/* JSON / record block */
.record {
  font-family: var(--mono); font-size: 0.82rem; background: var(--cp-bg-elevated);
  border: 1px solid var(--cp-border); border-radius: var(--radius); padding: var(--space-4);
  overflow-x: auto; line-height: 1.5; color: var(--cp-text);
}
.record .k { color: var(--cp-accent); }
.record .s { color: var(--cp-success); }
.record .n { color: var(--cp-link); }
.record .c { color: var(--cp-text-soft); font-style: italic; }

/* lifecycle / status chips */
.flow-states { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; }
.flow-states .st {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius); font-size: 0.82rem;
  border: 1px solid var(--cp-border); background: var(--cp-surface); font-family: var(--mono);
}
.flow-states .arrow { color: var(--cp-text-muted); }
.flow-states .st.gate { border-color: var(--cp-accent); color: var(--cp-accent); background: var(--cp-accent-soft); }
.flow-states .st.final { border-color: var(--cp-success); color: var(--cp-success); background: rgba(22,163,74,0.10); }

/* timeline (day-in-the-life) */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7rem; top: 0; bottom: 0; width: 2px; background: var(--cp-border); }
@media (max-width: 640px){ .timeline::before { left: 4.5rem; } }
.timeline li { position: relative; display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-4);
  padding: var(--space-3) 0; }
@media (max-width: 640px){ .timeline li { grid-template-columns: 4.5rem 1fr; } }
.timeline .t { font-family: var(--mono); font-size: 0.82rem; color: var(--cp-text-muted); text-align: right; padding-right: var(--space-4); }
.timeline .ev { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); position: relative; }
.timeline .ev::before { content: ""; position: absolute; left: -1.35rem; top: 1rem; width: 11px; height: 11px;
  border-radius: 50%; background: var(--cp-accent); border: 2px solid var(--cp-bg); }
@media (max-width: 640px){ .timeline .ev::before { left: -1.1rem; } }

/* SVG diagram wrappers */
.diagram { width: 100%; height: auto; display: block; margin: var(--space-6) 0; }
figure { margin: var(--space-6) 0; }
figcaption { font-size: 0.85rem; color: var(--cp-text-muted); text-align: center; margin-top: var(--space-2); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--cp-border); margin-top: var(--space-16);
  padding: var(--space-8) 0; color: var(--cp-text-muted); font-size: 0.88rem; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }

/* page-local section nav */
.toc { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-6) 0 var(--space-4); }
.toc a { font-size: 0.85rem; padding: var(--space-1) var(--space-3); border-radius: 999px;
  border: 1px solid var(--cp-border); background: var(--cp-surface); color: var(--cp-text-muted); }
.toc a:hover { border-color: var(--cp-accent); color: var(--cp-accent); text-decoration: none; }