/* Cogaine forge stylesheet (wave-forge-ui-1). Source of truth: design/forge-mockups — the Nocturne design system (styles.css) + the cogaine app layer (cogaine-app.css) + the two mockups' structural styles, distilled into real classes. Dark is the base theme; `.theme-light` on derives the light theme from the same OKLCH ramps (the mockups' exact recipe). No external fonts, no CDN: Inter is used when locally installed, system-ui otherwise. */ :root { --color-bg: #161826; --color-surface: #232532; --color-text: #e9e9ed; --color-accent: #9184d9; --color-accent-2: #a7a1db; --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent); --color-neutral-100: #f3f5fe; --color-neutral-200: #e4e7f5; --color-neutral-300: #cfd3e5; --color-neutral-400: #b2b6ca; --color-neutral-500: #9397ab; --color-neutral-600: #75798c; --color-neutral-700: #595d6c; --color-neutral-800: #3f424d; --color-neutral-900: #292b31; --color-accent-100: #f5f4ff; --color-accent-200: #e7e5fe; --color-accent-300: #d2cefd; --color-accent-400: #b5abfc; --color-accent-500: #968ae0; --color-accent-600: #796cbf; --color-accent-700: #5d5294; --color-accent-800: #423a6a; --color-accent-900: #2b2741; --font-heading: "Inter", system-ui, sans-serif; --font-heading-weight: 500; --font-body: "Inter", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --space-1: 2.8px; --space-2: 5.6px; --space-3: 8.4px; --space-4: 11.2px; --space-6: 16.8px; --space-8: 22.4px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --shadow-sm: 0 0 0 1px #3f424d; --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55); --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65); /* app-layer semantic aliases (cogaine-app.css) */ --ink-1: var(--color-text); --ink-2: var(--color-neutral-300); --ink-3: var(--color-neutral-500); --ink-4: var(--color-neutral-600); --line-1: var(--color-neutral-800); --line-2: var(--color-neutral-700); --fill-1: var(--color-surface); --fill-2: var(--color-neutral-900); --fill-hover: color-mix(in srgb, var(--color-text) 5%, transparent); --acc-ink: var(--color-accent-300); --acc-line: var(--color-accent-800); --acc-fill: color-mix(in srgb, var(--color-accent) 12%, transparent); --avatar-a: linear-gradient(140deg, var(--color-accent-700), var(--color-neutral-800)); --avatar-b: linear-gradient(140deg, var(--color-neutral-600), var(--color-neutral-800)); --avatar-ink: var(--color-accent-100); /* Nocturne's signature fading rule, as a reusable background value. */ --rule-fade: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent); --rule-fade-v: linear-gradient(to bottom, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent); } /* Light theme — every value derived from the system's own ramps (cogaine-app.css), never invented. */ .theme-light { --color-bg: var(--color-neutral-200); --color-surface: var(--color-neutral-100); --color-text: var(--color-neutral-900); --color-divider: color-mix(in srgb, #292b31 20%, transparent); --ink-2: var(--color-neutral-800); --ink-3: var(--color-neutral-600); --ink-4: var(--color-neutral-500); --line-1: var(--color-neutral-300); --line-2: var(--color-neutral-400); --fill-2: color-mix(in srgb, var(--color-neutral-400) 28%, transparent); --acc-ink: var(--color-accent-700); --acc-line: var(--color-accent-400); --acc-fill: color-mix(in srgb, var(--color-accent) 16%, transparent); --avatar-a: linear-gradient(140deg, var(--color-accent-500), var(--color-accent-700)); --avatar-b: linear-gradient(140deg, var(--color-neutral-500), var(--color-neutral-700)); --shadow-sm: 0 0 0 1px var(--color-neutral-300); --shadow-md: 0 0 0 1px var(--color-neutral-300), 0 6px 18px rgba(41, 43, 49, 0.12); --shadow-lg: 0 0 0 1px var(--color-neutral-400), 0 16px 40px rgba(41, 43, 49, 0.18); } .theme-light .tag-neutral { background: var(--color-neutral-300); color: var(--color-neutral-900); } .theme-light .tag-accent { background: var(--color-accent-200); color: var(--color-accent-800); } /* ── base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; } /* Owner report 2026-08-10 (live-forge visual QA): reserve the vertical scrollbar gutter permanently so short→long page navigation doesn't shift centered content when the scrollbar appears. Vertical-axis gutter only — wide content keeps scrolling inside its own overflow-x containers, never the page. */ html { scrollbar-gutter: stable; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h2 { font-size: 32px; } h3 { font-size: 25px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } code { font-family: var(--font-mono); } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } @keyframes cgpulse { 0%, 100% { opacity: .3 } 50% { opacity: 1 } } /* ── components (Nocturne) ────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { color: var(--color-accent); border-color: var(--color-accent); } .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } .btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); } .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .elev-sm { box-shadow: var(--shadow-sm); } .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); } .tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } .tag-fail { border: 1px solid var(--acc-line); color: var(--acc-ink); background: var(--acc-fill); } .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 1px solid transparent; } .table td { padding: var(--space-2); border-bottom: 1px solid transparent; } .table thead tr { background: var(--rule-fade) no-repeat bottom / 100% 1px; } .table tbody tr { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px, color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; } .table tbody tr:hover { background: linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent), color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%, linear-gradient(to right, transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px, color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; } /* ── icons ────────────────────────────────────────────────────────── */ .ic { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: -3px; } .ic-s { width: 12px; height: 12px; vertical-align: -2px; } /* ── shell ────────────────────────────────────────────────────────── */ .cg-shell { max-width: min(1840px, 100%); margin: 0 auto; min-height: 100vh; border-inline: 1px solid var(--color-divider); } .cg-hdr { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-6); background: var(--rule-fade) no-repeat bottom / 100% 1px, color-mix(in srgb, var(--color-bg) 88%, transparent); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); } .cg-hdr-id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .cg-logo { width: 22px; height: 22px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--color-accent); box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 40%, transparent) inset; } .cg-logo-s { width: 16px; height: 16px; border-radius: 3px; box-shadow: 0 0 9px color-mix(in srgb, var(--color-accent) 40%, transparent) inset; } .cg-brand { font-family: var(--font-heading); font-weight: 500; font-size: 16px; letter-spacing: -.01em; color: inherit; text-decoration: none; } .cg-sep { opacity: .35; } .cg-repopath { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; } .cg-spacer { flex: 1; } .cg-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--avatar-a); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--avatar-ink); } .cg-avatar-s { width: 16px; height: 16px; font-size: 8px; font-weight: 400; } .cg-avatar-m { width: 22px; height: 22px; font-size: 9px; font-weight: 400; } .cg-avatar-b { background: var(--avatar-b); color: var(--color-neutral-100); } /* instance bar (44px, index/auth chrome) */ .cg-ibar { display: flex; align-items: center; gap: var(--space-4); height: 44px; padding: 0 var(--space-6); background: var(--rule-fade) no-repeat bottom / 100% 1px, color-mix(in srgb, var(--color-bg) 90%, transparent); position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); } .cg-ibar-host { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); text-decoration: none; white-space: nowrap; } .cg-ibar-host:hover { color: var(--color-accent); } .cg-chip { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--ink-3); } /* ── layout: sidenav + main (+ rail on trunk at >=1400px) ─────────── */ .cg-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); align-items: start; } .cg-nav { display: flex; position: sticky; top: 53px; flex-direction: column; gap: 2px; padding: var(--space-4) var(--space-3) 72px; background: var(--rule-fade-v) no-repeat right / 1px 100%, var(--color-bg); } .cg-navlink { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-md); text-decoration: none; font-size: 13.5px; color: var(--ink-2); } .cg-navlink:hover { background: var(--fill-hover); } .cg-navlink.on { background: var(--acc-fill); color: var(--color-accent); box-shadow: inset 2px 0 0 var(--color-accent); } .cg-nav-foot { margin-top: var(--space-8); padding: 0 10px; font-size: 11px; line-height: 1.5; color: var(--ink-4); } .cg-topnav { display: none; gap: 2px; padding: var(--space-2) var(--space-4); overflow-x: auto; background: var(--rule-fade) no-repeat bottom / 100% 1px, var(--color-bg); position: sticky; top: 53px; z-index: 25; } .cg-topnav a { flex: none; padding: 5px 10px; border-radius: var(--radius-md); text-decoration: none; font-size: 12.5px; white-space: nowrap; color: var(--ink-2); } .cg-topnav a.on { background: var(--acc-fill); color: var(--color-accent); } .cg-main { min-width: 0; padding: var(--space-6) var(--space-6) 96px; } .cg-rail { display: none; } @media (max-width: 1039px) { .cg-layout { grid-template-columns: 1fr; } .cg-nav { display: none; } .cg-topnav { display: flex; } } @media (min-width: 1400px) { .cg-layout.has-rail { grid-template-columns: 208px minmax(0, 1fr) 320px; } .cg-layout.has-rail .cg-rail { display: flex; position: sticky; top: 53px; flex-direction: column; gap: var(--space-6); padding: var(--space-6) var(--space-6) var(--space-6) var(--space-4); background: var(--rule-fade-v) no-repeat left / 1px 100%, var(--color-bg); } } /* ── kickers + section rules ──────────────────────────────────────── */ .cg-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; } .cg-rule-b { background: var(--rule-fade) no-repeat bottom / 100% 1px; } .cg-rule-t { background: linear-gradient(to right, var(--color-divider), transparent) no-repeat top / 100% 1px; } /* ── trunk: health strip ──────────────────────────────────────────── */ .cg-health { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-8); padding-bottom: var(--space-4); margin-bottom: var(--space-6); background: linear-gradient(to right, var(--color-divider), var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px; } .cg-rev-big { font-family: var(--font-mono); font-size: 26px; line-height: 1; color: var(--acc-ink); } .cg-health-line { display: flex; align-items: center; gap: 8px; font-size: 13px; } .cg-health-mono { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); } .cg-health-act { margin-left: auto; } .cg-syncgood { flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px; } .cg-syncgood .sub { font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: var(--ink-4); } /* ── trunk: integration stream ────────────────────────────────────── */ .cg-stream { position: relative; padding-left: 28px; } .cg-stream::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(to bottom, transparent, var(--line-1) 24px, var(--line-1) calc(100% - 24px), transparent); } .cg-row { position: relative; padding: var(--space-3); margin-left: calc(var(--space-3) * -1); border-radius: var(--radius-md); } .cg-row:hover { background: var(--fill-hover); } .cg-row::before { content: ""; position: absolute; left: -18px; top: 20px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-4); box-shadow: 0 0 0 3px var(--color-bg); } .cg-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .cg-rev { font-family: var(--font-mono); font-size: 15px; color: var(--acc-ink); width: 44px; flex: none; } .cg-title { font-size: 14.5px; color: var(--ink-1); } .cg-when { margin-left: auto; font-size: 12px; color: var(--ink-4); white-space: nowrap; } .cg-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 7px; padding-left: 56px; font-size: 12px; color: var(--ink-3); } .cg-who { display: flex; align-items: center; gap: 6px; } .cg-oid { font-family: var(--font-mono); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--ink-2); } .cg-chg { font-family: var(--font-mono); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px dashed var(--line-1); color: var(--ink-4); cursor: copy; } .cg-chg:hover { border-color: var(--color-accent); color: var(--acc-ink); } /* provenance badges (D17) */ .cg-agent { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--acc-line); background: var(--acc-fill); color: var(--acc-ink); } .cg-agent .sponsor { opacity: .7; } .cg-signoff { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line-2); color: var(--ink-2); } .cg-assist { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-4); } /* ── projects index ───────────────────────────────────────────────── */ .cg-index { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-6) 96px; } .cg-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); } .cg-statstrip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: 9px var(--space-4); margin-bottom: var(--space-6); border-radius: var(--radius-md); background: var(--fill-1); font-size: 12px; color: var(--ink-3); } .cg-statstrip .n { font-family: var(--font-mono); color: var(--ink-2); } .cg-group { display: flex; align-items: baseline; gap: 10px; padding-bottom: 7px; margin: var(--space-6) 0 var(--space-2); background: var(--rule-fade) no-repeat bottom / 100% 1px; } .cg-group:first-of-type { margin-top: 0; } .cg-group .note { font-size: 11.5px; color: var(--ink-4); } .cg-proj { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; padding: var(--space-3); margin-inline: calc(var(--space-3) * -1); border-radius: var(--radius-md); text-decoration: none; color: inherit; } .cg-proj:hover { background: var(--fill-hover); } .cg-proj-name { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .cg-proj-name .nm { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-1); } .cg-proj-desc { font-size: 12px; color: var(--ink-3); margin-top: 3px; } .cg-proj-meta { display: grid; grid-template-columns: 46px 92px 78px; align-items: center; gap: var(--space-4); } .cg-proj-meta .rev { font-family: var(--font-mono); font-size: 13px; color: var(--acc-ink); } .cg-proj-meta .size { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-align: right; } @media (max-width: 1179px) { .cg-proj { grid-template-columns: minmax(0, 1fr); } .cg-proj-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); } } /* honest placeholder panels (mockup hold-back discipline) */ .cg-hold { margin-top: var(--space-8); padding: var(--space-4); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line-1); max-width: 660px; } .cg-hold .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-ink); margin-bottom: 7px; } .cg-hold .t { font-family: var(--font-heading); font-size: 15px; margin-bottom: 6px; } .cg-hold p { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin: 0; } /* ── transparency log ─────────────────────────────────────────────── */ .cg-tlog-wrap { overflow-x: auto; } .cg-tlog { min-width: 900px; } .cg-leaf { font-family: var(--font-mono); color: var(--acc-ink); } .cg-leaf.old { color: var(--ink-3); } .cg-csig { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--acc-ink); } .cg-csig.off { color: var(--ink-3); } .cg-redacted { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radius-sm); border: 1px dashed var(--acc-line); color: var(--acc-ink); font-size: 12px; } .cg-chain { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); margin-top: 5px; } .cg-verify { display: inline-flex; align-items: center; gap: 8px; padding: 3px 9px; border-radius: var(--radius-sm); background: var(--fill-2); } .cg-verify code { font-size: 11.5px; color: var(--acc-ink); white-space: nowrap; user-select: all; } /* ── sign-in ──────────────────────────────────────────────────────── */ .cg-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: stretch; } .cg-auth-main { display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) var(--space-8) var(--space-8) 10%; min-width: 0; } .cg-auth-host { font-family: var(--font-mono); font-size: 12.5px; color: var(--acc-ink); margin-bottom: 10px; } .cg-auth-form { max-width: 340px; } .cg-auth-note { font-size: 11.5px; color: var(--ink-4); margin-top: var(--space-6); line-height: 1.6; } .cg-auth-err { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--acc-line); background: var(--acc-fill); font-size: 12.5px; color: var(--acc-ink); } .cg-auth-aside { display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-8); background: var(--rule-fade-v) no-repeat left / 1px 100%; } .cg-auth-aside .item { font-size: 13px; color: var(--ink-2); line-height: 1.6; max-width: 34ch; margin-bottom: var(--space-4); } .cg-auth-aside .why { font-size: 11.5px; color: var(--ink-4); margin-top: var(--space-2); line-height: 1.6; max-width: 34ch; } @media (max-width: 1179px) { .cg-auth { grid-template-columns: minmax(0, 1fr); } .cg-auth-aside { display: none; } } /* ── misc ─────────────────────────────────────────────────────────── */ .cg-mono { font-family: var(--font-mono); } .cg-dim { color: var(--ink-4); } .cg-mid { color: var(--ink-3); } .cg-live { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); animation: cgpulse 1.8s ease-in-out infinite; } /* ── tickets board (wave-board) ───────────────────────────────────── */ .cg-boardhdr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); } .cg-newticket { margin-left: auto; position: relative; } .cg-newticket summary { list-style: none; cursor: pointer; } .cg-newticket summary::-webkit-details-marker { display: none; } .cg-newticket form { position: absolute; right: 0; z-index: 30; margin-top: 8px; width: min(360px, 90vw); padding: var(--space-4); border-radius: var(--radius-md); background: var(--fill-1); box-shadow: 0 0 0 1px var(--line-1), var(--shadow-lg, 0 12px 32px rgba(0,0,0,.35)); } .cg-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: var(--space-3); margin-bottom: var(--space-3); } .cg-chip { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: var(--radius-md); border: 0; background: transparent; color: var(--ink-3); cursor: pointer; } .cg-chip:hover { background: var(--fill-2); } .cg-chip.on { background: var(--fill-2); color: var(--ink-1); } .cg-memfilter { width: 150px; font-size: 12.5px; margin-left: auto; } .cg-boardwrap { overflow-x: auto; padding-bottom: var(--space-3); } .cg-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--space-4); min-width: 1000px; align-items: start; } .cg-colhead { display: flex; align-items: center; gap: 8px; padding: 0 var(--space-2) 9px; margin-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } .cg-colcount { margin-left: auto; color: var(--ink-4); } .cg-colbody { display: flex; flex-direction: column; gap: var(--space-2); min-height: 60px; } .cg-card { display: flex; gap: 9px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--fill-1); box-shadow: var(--shadow-sm); cursor: grab; } .cg-card:hover { box-shadow: 0 0 0 1px var(--acc-line); } .cg-card.dragging { opacity: .5; } .cg-card-grip { color: var(--ink-4); flex: none; margin-top: 1px; } .cg-card-body { min-width: 0; flex: 1; } .cg-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; } .cg-card-id { font-size: 10.5px; color: var(--ink-4); } .cg-card-cc { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--ink-4); margin-left: auto; } .cg-card-title { display: block; font-size: 13px; line-height: 1.45; margin-bottom: 9px; color: var(--ink-1); text-decoration: none; } .cg-card-title:hover { color: var(--color-accent); } .cg-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .cg-chg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: var(--radius-sm); border: 1px dashed var(--line-1); font-size: 10.5px; color: var(--ink-3); } .cg-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; } .cg-card-ago { margin-left: auto; font-size: 10.5px; color: var(--ink-4); } .cg-unassigned { font-size: 11px; color: var(--ink-4); } .cg-dropnote { display: none; align-items: center; justify-content: center; height: 44px; border-radius: var(--radius-md); border: 1px dashed var(--line-1); font-size: 11px; color: var(--ink-4); } .cg-board.dragging .cg-dropnote { display: flex; } .cg-col.dragover .cg-dropnote { border-color: var(--color-accent); color: var(--acc-ink); } .cg-boardfoot { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); padding-top: var(--space-4); } .cg-boardfoot > div { flex: 1; min-width: 260px; max-width: 460px; } .cg-boardfoot .t { font-family: var(--font-heading); font-size: 15px; margin-bottom: 6px; } .cg-boardfoot p { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin: 0 0 10px; } .cg-teach { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line-1); max-width: 620px; margin-bottom: var(--space-6); } .cg-teach .t { font-family: var(--font-heading); font-size: 17px; } .cg-teach p { font-size: 12.5px; color: var(--ink-3); line-height: 1.65; margin: 0; max-width: 56ch; } .cg-cmd { font-size: 11.5px; padding: 4px 9px; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--acc-ink); overflow-wrap: anywhere; } .cg-cmdrow { display: flex; align-items: center; gap: 10px; margin-top: var(--space-4); flex-wrap: wrap; font-size: 11.5px; } /* ── ticket detail (wave-board) ───────────────────────────────────── */ .cg-tdhdr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: var(--space-3); } .cg-back { font-size: 12px; color: var(--ink-3); text-decoration: none; } .cg-back:hover { color: var(--color-accent); } .cg-idchip { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--ink-2); } .cg-tdtitle { margin: 0 0 var(--space-6); max-width: 40ch; } .cg-conflict { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--acc-line); font-size: 12.5px; color: var(--ink-2); margin-bottom: var(--space-4); max-width: 68ch; } .cg-tdgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-8); align-items: start; } @media (max-width: 980px) { .cg-tdgrid { grid-template-columns: minmax(0, 1fr); } } .cg-tdmain { min-width: 0; } .cg-tdrail { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } .cg-tdrail h6 { color: var(--ink-3); margin: 0 0 var(--space-3); } .cg-tdrail .cg-rule-t { padding-top: var(--space-4); } .cg-sechdr { display: flex; align-items: center; gap: 10px; margin: var(--space-8) 0 var(--space-4); } .cg-sechdr h6 { margin: 0; color: var(--ink-3); } .cg-sechdr .cg-dim { font-size: 11.5px; } .cg-attested { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--acc-ink); } .cg-comment { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } .cg-comment-hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; } .cg-comment-hd .cg-dim { font-size: 11.5px; } .cg-comment-body { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); max-width: 64ch; } .cg-comment.agent .cg-comment-body { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--acc-line); } .cg-commentform { margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .cg-commentform textarea { border: none; background: transparent; padding-left: 0; width: 100%; resize: vertical; } .cg-commentform-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .cg-commentform-foot .btn { margin-left: auto; } .cg-timeline { position: relative; padding-left: 22px; } .cg-timeline::before { content: ""; position: absolute; left: 3px; top: 6px; bottom: 6px; width: 1px; background: var(--line-1); } .cg-tl-row { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 13px; color: var(--ink-2); } .cg-tl-dot { position: absolute; left: -22px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); box-shadow: 0 0 0 3px var(--color-bg); } .cg-tl-row.agent .cg-tl-dot { border: 1px solid var(--color-accent); background: var(--color-bg); } .cg-tl-dot.hollow { border: 1px dashed var(--line-2); background: transparent; } .cg-tl-text { min-width: 0; } .cg-tl-actor { color: var(--ink-1); } .cg-tl-row.agent .cg-tl-actor { color: var(--acc-ink); } .cg-tl-ago { margin-left: auto; font-size: 11px; color: var(--ink-4); } .cg-seg { display: flex; flex-wrap: wrap; gap: 4px; } .cg-seg-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: var(--radius-md); background: var(--fill-2); color: var(--ink-2); cursor: pointer; } .cg-seg-opt:has(input:checked) { box-shadow: 0 0 0 1px var(--acc-line); color: var(--ink-1); } .cg-seg-opt input { accent-color: var(--color-accent); } .cg-labelrm { display: inline-flex; } .cg-labelrm .tag button { font: inherit; border: 0; background: transparent; color: var(--ink-4); cursor: pointer; padding: 0 0 0 4px; } .cg-labelrm .tag button:hover { color: var(--color-accent); } .cg-linklist { display: flex; flex-direction: column; gap: 9px; } .cg-linkrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); } /* ── markdown body (wave-board) ───────────────────────────────────── */ .cg-md { max-width: 68ch; font-size: 14px; line-height: 1.7; color: var(--ink-2); } .cg-md p { margin: 0 0 var(--space-4); } .cg-md h4, .cg-md h5, .cg-md h6 { margin: var(--space-4) 0 var(--space-3); color: var(--ink-1); } .cg-md ul { margin: 0 0 var(--space-4); padding-left: 20px; } .cg-md li { margin-bottom: 5px; } .cg-md code { font-family: var(--font-mono); font-size: 12.5px; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--fill-2); } .cg-md-code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--line-1); color: var(--ink-3); margin: 0 0 var(--space-4); overflow-x: auto; } .cg-md-code code { background: transparent; padding: 0; } /* ── memory browser (wave-board) ──────────────────────────────────── */ .cg-intro { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; max-width: 82ch; margin: 0 0 var(--space-4); } .cg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); font-size: 11px; color: var(--ink-4); } .cg-legend-item { display: flex; align-items: center; gap: 6px; } .cg-sw { width: 9px; height: 9px; flex: none; display: inline-block; } .cg-sw-fresh { background: var(--ink-2); } .cg-sw-stale { background: var(--color-accent); box-shadow: 0 0 8px var(--acc-line); } .cg-sw-unanchored { border: 1px solid var(--line-2); } .cg-sw-unknown { border: 1px dashed var(--line-2); } .cg-sw-nopos { height: 1px; margin-top: 4px; background: var(--ink-4); } .cg-memgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); align-items: start; } .cg-memcard { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--fill-1); box-shadow: var(--shadow-sm); } .cg-memcard.stale { box-shadow: 0 0 0 1px var(--acc-line); } .cg-memcard-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .cg-memid { font-size: 10.5px; color: var(--ink-4); text-decoration: none; } .cg-memid:hover { color: var(--ink-2); } .cg-memtitle { font-size: 14.5px; line-height: 1.45; color: var(--ink-1); } .cg-scope { font-size: 11px; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--ink-3); } .cg-memcard-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); flex-wrap: wrap; } .cg-memcard-foot .cg-dim { margin-left: auto; font-size: 11px; } .cg-memstale { display: flex; align-items: flex-start; gap: 9px; padding-top: 10px; border-top: 1px solid var(--color-divider); } .cg-memstale .cg-sw { margin-top: 3px; } .cg-stale-name { font-size: 11.5px; color: var(--ink-2); } .cg-memcard.stale .cg-stale-name { color: var(--acc-ink); } .cg-stale-line { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; overflow-wrap: anywhere; } .cg-stalebox { display: inline-flex; align-items: flex-start; gap: 10px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line-1); margin-bottom: var(--space-6); } .cg-stalebox.stale { box-shadow: 0 0 0 1px var(--acc-line); } .cg-stalebox .cg-sw { margin-top: 4px; } .cg-verifybox { padding: var(--space-4); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--acc-line); } .cg-verifybox .t { font-size: 13px; color: var(--ink-1); margin-bottom: 6px; } .cg-verifybox p { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin: 0 0 var(--space-3); } .cg-envelope { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); } .cg-envelope .r { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); padding: 9px var(--space-3); background: var(--fill-1); } .cg-envelope .r + .r { box-shadow: inset 0 1px 0 var(--color-divider); } .cg-envelope .r > span:first-child { font-size: 11px; color: var(--ink-4); } .cg-envelope .r > span:last-child { font-size: 11.5px; color: var(--ink-2); overflow-wrap: anywhere; } /* wave-xtickets: cross-repo chips, attachments, references */ .cg-origin-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: var(--radius-sm); border: 1px solid var(--acc-line); font-size: 10.5px; color: var(--acc-ink); white-space: nowrap; } .cg-attachlist { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-5); } .cg-attachrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-sm); background: var(--fill-1); font-size: 12px; flex-wrap: wrap; } .cg-attachname { color: var(--ink-1); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; } .cg-attachname:hover { text-decoration: underline; } .cg-attachrow .cg-mono { margin-left: auto; font-size: 11px; } .cg-xrefrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; } .cg-xrefrow a { color: var(--ink-1); text-decoration: none; } .cg-xrefrow a:hover { text-decoration: underline; } /* wave-forge-screens: files browser, changes, locks, runners, admin */ .cg-pulse { width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); animation: cgpulse 1.4s ease-in-out infinite; display: inline-block; } .cg-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; margin-bottom: var(--space-4); } .cg-crumbs a { color: var(--ink-2); text-decoration: none; } .cg-crumbs a:hover { color: var(--color-accent); } .cg-crumbs .sep { color: var(--ink-4); } .cg-crumbs .cur { color: var(--ink-1); } .cg-tablewrap { overflow-x: auto; } .cg-filetable { min-width: 720px; } .cg-filelink { color: var(--ink-1); text-decoration: none; font-size: 12.5px; } .cg-filelink:hover { color: var(--color-accent); } .cg-lockpill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 20px; font-size: 11px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; } .cg-lockpill.lease { border-color: var(--acc-line); background: var(--acc-fill); color: var(--acc-ink); } .cg-locktable { min-width: 880px; } .cg-blob { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; } .cg-blobhead { display: flex; align-items: center; gap: 10px; padding: 9px var(--space-4); background: var(--fill-1); flex-wrap: wrap; } .cg-blobdl { margin-left: auto; font-size: 12px; text-decoration: none; } .cg-blobpre { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-bg); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; overflow-x: auto; white-space: pre; color: var(--ink-2); } .cg-blobnote { padding: var(--space-3) var(--space-4); background: var(--fill-1); box-shadow: inset 0 1px 0 var(--color-divider); font-size: 12px; color: var(--ink-3); line-height: 1.6; } .cg-blobfoot { padding: 7px var(--space-4); background: var(--fill-1); box-shadow: inset 0 1px 0 var(--color-divider); font-size: 11px; } .cg-binbody { padding: var(--space-6) var(--space-4); background: var(--color-bg); } .cg-binbody .t { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink-1); margin-bottom: 7px; } .cg-binbody p { font-size: 12px; color: var(--ink-3); line-height: 1.6; margin: 0; max-width: 68ch; } .cg-joblist { display: flex; flex-direction: column; gap: 2px; } .cg-jobrow { padding: var(--space-3); border-radius: var(--radius-md); } .cg-jobrow:hover { background: var(--fill-hover); } .cg-jobrow-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cg-jobrow-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; padding-left: 2px; font-size: 12px; color: var(--ink-3); } .cg-jobmsg { font-size: 13.5px; color: var(--ink-1); text-decoration: none; } a.cg-jobmsg:hover { color: var(--color-accent); } .cg-privnote { display: flex; align-items: flex-start; gap: 10px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--fill-1); margin-bottom: var(--space-6); max-width: 78ch; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; } .cg-privnote .ic { margin-top: 2px; color: var(--acc-ink); } .cg-fleetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); } .cg-fleetcard { padding: var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .cg-fleetcard .hd { display: flex; align-items: center; gap: 8px; } .cg-fleetcard .nm { font-size: 13.5px; } .cg-fleetcard .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; } .cg-stackrail { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: var(--space-6); flex-wrap: wrap; } .cg-stackrail a { color: var(--ink-2); text-decoration: none; } .cg-stackrail a:hover { color: var(--color-accent); } .cg-stackrail .here { color: var(--acc-ink); font-size: 15px; } .cg-stackrail .sep { color: var(--ink-4); } .cg-ckptlist { display: flex; flex-direction: column; gap: 5px; } .cg-ckptrow { display: flex; align-items: baseline; gap: 12px; font-size: 12px; flex-wrap: wrap; } .cg-ckptrow .when { color: var(--ink-4); font-size: 11px; flex: none; width: 74px; } .cg-ckptrow .oid { color: var(--ink-2); font-size: 11.5px; flex: none; } .cg-ckptrow .msg { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; } .cg-ckptrow .who { margin-left: auto; font-size: 11.5px; } .cg-gatesteps { font-size: 12px; } .cg-gatesteps td.bad { color: var(--acc-ink); } .cg-gatemeta { font-size: 11px; color: var(--ink-3); line-height: 1.7; margin-top: 10px; } .cg-quotalist { display: flex; flex-direction: column; gap: var(--space-4); max-width: 560px; } .cg-quotarow .hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .cg-quotarow .nm { font-size: 12.5px; } .cg-quotarow .val { margin-left: auto; font-size: 11.5px; color: var(--ink-2); } .cg-quotarow .bar { height: 5px; border-radius: 2px; background: var(--line-1); overflow: hidden; } .cg-quotarow .bar span { display: block; height: 100%; background: var(--color-accent); } .cg-auditlist { display: flex; flex-direction: column; gap: 4px; } .cg-auditrow { display: flex; align-items: baseline; gap: 12px; font-size: 12px; padding: 5px 0; } .cg-auditrow .when { color: var(--ink-4); font-size: 11px; flex: none; width: 92px; } .cg-auditrow .txt { color: var(--ink-2); font-size: 11.5px; overflow-wrap: anywhere; } .cg-obliterate { padding: var(--space-4); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--acc-line); } .cg-obliterate .t { font-size: 13.5px; margin-bottom: 5px; } .cg-obliterate p { font-size: 12px; color: var(--ink-3); line-height: 1.6; max-width: 72ch; margin: 0 0 var(--space-2); } .cg-eventlog { max-height: 460px; overflow-y: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .table tr.off { opacity: .5; } /* ── reading surfaces (wave-docsmcp): /docs + the repo wiki ───────── */ .cg-docs { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-8); max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-6) 96px; align-items: start; } @media (max-width: 860px) { .cg-docs { grid-template-columns: minmax(0, 1fr); } } .cg-docnav { display: flex; flex-direction: column; gap: var(--space-2); position: sticky; top: 16px; font-size: 12.5px; } .cg-docnav-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13.5px; color: var(--ink-1); } .cg-docnav-head a { color: var(--ink-1); text-decoration: none; } .cg-docnav-head a:hover { color: var(--color-accent); } .cg-docnav-note { padding: 7px 9px; border-radius: var(--radius-md); background: var(--acc-fill); font-size: 11.5px; line-height: 1.5; margin-bottom: var(--space-3); } .cg-docnav-note .r { display: flex; align-items: center; gap: 6px; color: var(--acc-ink); } .cg-docnav-note .d { color: var(--ink-3); margin-top: 3px; } .cg-docnav-kicker { padding: 4px 9px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); } .cg-docnav-grp { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--space-3); } .cg-docnav-link { display: block; padding: 4px 9px; border-radius: var(--radius-sm); text-decoration: none; font-size: 12.5px; color: var(--ink-3); } .cg-docnav-link:hover { background: var(--fill-hover); color: var(--ink-1); } .cg-docnav-link.on { color: var(--color-accent); background: var(--acc-fill); box-shadow: inset 2px 0 0 var(--color-accent); } .cg-docmain { min-width: 0; max-width: 66ch; } .cg-doccrumb { display: flex; align-items: center; gap: 9px; margin-bottom: var(--space-4); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); } .cg-doccrumb a { color: var(--ink-4); text-decoration: none; } .cg-doccrumb a:hover { color: var(--ink-1); } .cg-doccrumb .on { color: var(--acc-ink); } .cg-doccrumb .sep { color: var(--ink-4); } .cg-doc { font-size: 15px; color: var(--ink-2); } .cg-doc h1 { margin: 0 0 var(--space-4); font-size: 34px; line-height: 1.15; letter-spacing: -.02em; font-weight: 500; color: var(--ink-1); } .cg-doc h2 { display: flex; align-items: baseline; gap: 9px; margin: var(--space-8) 0 var(--space-3); font-size: 22px; line-height: 1.25; letter-spacing: -.015em; font-weight: 500; color: var(--ink-1); } .cg-doc h3 { display: flex; align-items: baseline; gap: 9px; margin: var(--space-6) 0 var(--space-2); font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--ink-1); } .cg-doc h4 { margin: var(--space-4) 0 var(--space-2); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); } .cg-doc p { margin: 0 0 var(--space-4); line-height: 1.75; } .cg-doc ul, .cg-doc ol { margin: 0 0 var(--space-4); padding-left: 20px; line-height: 1.75; } .cg-doc li { margin-bottom: 6px; } .cg-doc code { font-family: var(--font-mono); font-size: 13px; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--fill-2); color: var(--ink-1); } .cg-doc a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 2px; } .cg-doc blockquote { margin: 0 0 var(--space-4); padding: var(--space-2) 0 var(--space-2) var(--space-4); box-shadow: inset 2px 0 0 var(--acc-line); font-size: 14.5px; line-height: 1.7; color: var(--ink-3); } .cg-doc-code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--line-1); margin: 0 0 var(--space-4); overflow-x: auto; color: var(--ink-2); } .cg-doc-tablewrap { overflow-x: auto; margin: 0 0 var(--space-4); } .cg-doc-tablewrap .table { font-size: 13.5px; } .cg-anchor { font-family: var(--font-mono); font-size: 12px; color: var(--ink-4); text-decoration: none; opacity: 0; transition: opacity .12s ease; } .cg-doc h2:hover .cg-anchor, .cg-doc h3:hover .cg-anchor, .cg-anchor:focus-visible { opacity: 1; } .cg-tocgrp { margin-bottom: var(--space-6); } .cg-tochead { display: flex; align-items: baseline; gap: 10px; padding-bottom: 9px; margin-bottom: var(--space-2); background: var(--rule-fade) no-repeat bottom / 100% 1px; } .cg-tochead .k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-ink); } .cg-tochead .n { font-size: 11px; color: var(--ink-4); } .cg-tocrow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--space-4); padding: 9px var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: inherit; } .cg-tocrow:hover { background: var(--fill-hover); } .cg-tocrow .t { font-size: 13.5px; color: var(--ink-1); min-width: 0; overflow-wrap: break-word; overflow: hidden; } .cg-tocrow .d { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; min-width: 0; overflow-wrap: anywhere; } .cg-docfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); padding-top: var(--space-3); background: var(--rule-fade) no-repeat top / 100% 1px; font-size: 12px; color: var(--ink-4); } .cg-docfoot a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 2px; } .cg-wiki { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--space-8); align-items: start; } @media (max-width: 860px) { .cg-wiki { grid-template-columns: minmax(0, 1fr); } } .cg-wikinav { display: flex; flex-direction: column; gap: var(--space-2); position: sticky; top: 16px; } .cg-wikifilter { font-size: 12.5px; } .cg-wikicount { font-size: 11px; color: var(--ink-4); margin: 4px 0 var(--space-2); } .cg-wikigrp { display: flex; flex-direction: column; gap: 1px; margin-bottom: var(--space-3); } .cg-wikinomatch { font-size: 12px; color: var(--ink-4); padding: 4px 9px; line-height: 1.55; } .cg-wikihow { padding: var(--space-3); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line-1); display: flex; flex-direction: column; gap: 8px; } .cg-wikihow .d { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; } .cg-wikihist { display: inline-flex; align-items: center; gap: 5px; color: var(--acc-ink); text-decoration: underline; text-underline-offset: 2px; } /* ── changed paths + diffs (forge-history wave, ticket #131) ──────── Every value derives from the system's own ramps (both themes follow automatically): additions carry the accent tint, deletions recede into the neutral ramp — the two-hue law of the design system. */ .cg-difflist { display: flex; flex-direction: column; gap: var(--space-3); } .cg-difffile { border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--line-1); background: var(--fill-1); } .cg-difffile > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: 8px var(--space-4); cursor: pointer; list-style: none; min-width: 0; } .cg-difffile > summary::-webkit-details-marker { display: none; } .cg-difffile > summary::before { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-4); border-bottom: 1.5px solid var(--ink-4); transform: rotate(-45deg); transition: transform .12s ease; margin-left: 2px; } .cg-difffile[open] > summary::before { transform: rotate(45deg); } .cg-difffile > summary:hover { background: var(--fill-hover); border-radius: var(--radius-md); } .cg-diffst { flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; } .cg-diffst.add { color: var(--acc-ink); box-shadow: 0 0 0 1px var(--acc-line); background: var(--acc-fill); } .cg-diffst.chg { color: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2); background: var(--fill-2); } .cg-diffst.del { color: var(--ink-3); box-shadow: 0 0 0 1px var(--line-1); } .cg-diffpath { font-size: 12.5px; color: var(--ink-1); min-width: 0; overflow-wrap: anywhere; } .cg-diffsizes { margin-left: auto; font-size: 11px; white-space: nowrap; } .cg-diffpre { margin: 0; padding: var(--space-3) var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; border-top: 1px solid var(--line-1); } .cg-diffpre .l { display: block; padding: 0 6px; } .cg-diffpre .l.a { background: color-mix(in srgb, var(--color-accent) 11%, transparent); } .cg-diffpre .l.d { background: color-mix(in srgb, var(--color-neutral-500) 15%, transparent); color: var(--ink-3); } .cg-diffpre .l.h { color: var(--ink-4); } .cg-diffnote { font-size: 11.5px; color: var(--ink-4); line-height: 1.6; padding: 7px var(--space-4); border-top: 1px solid var(--line-1); } .cg-diffnote code { font-size: 11px; color: var(--ink-3); }