/* ═══════════════════════════════════════════════════════════════════════════
   DOCS  (`dc-*`)  —  the public feature + command reference
   ═══════════════════════════════════════════════════════════════════════════

   Same visual language as the landing page (`lp-*`, css/landing-v3.css): Geist,
   the #070B18 ground, the same inks, the same one blue for actions. It is a
   separate sheet rather than an extension of that one because the two pages
   share no layout at all — the landing page is a composition, this is a long
   document with a rail down the side.

   ⚠️ `dc-*` here is DOCS. The landing page's Discord-message mocks use `lp-dc-*`
   for "Discord chrome" — different thing, and they never meet, but check the
   prefix before you move a rule between the two files.

   No design-system `var()`. Literal values, like landing-v3.css — the `--r-*` /
   `--action*` families are prose in DESIGN_SYSTEM.md and resolve to nothing.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.dc-body {
    margin: 0;
    background: #070B18;
    color: #b3b8c2;
    font: 400 16px/1.6 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: #9fb0f2; text-decoration: none; }
a:hover { color: #c4cdf8; }
button, input { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid rgba(147, 180, 255, .75); outline-offset: 2px; border-radius: 6px; }

.dc-skip {
    position: fixed; left: 12px; top: -60px; z-index: 90;
    padding: 10px 16px; border-radius: 9px;
    background: #12151f; border: 1px solid rgba(255, 255, 255, .16);
    color: #f2f3f5; font: 600 13px 'Geist', system-ui;
    transition: top .16s cubic-bezier(.4, 0, .2, 1);
}
.dc-skip:focus { top: 12px; color: #f2f3f5; }

/* ── Chrome ──────────────────────────────────────────────────────────────── */

.dc-nav {
    position: sticky; top: 0; z-index: 20;
    height: 68px;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background: rgba(7, 11, 24, .86);
    backdrop-filter: blur(12px);
}
.dc-nav-in {
    height: 100%; max-width: 1360px; margin: 0 auto; padding: 0 40px;
    display: flex; align-items: center; gap: 34px;
}
.dc-nav-links { display: flex; align-items: center; gap: 26px; white-space: nowrap; font: 400 13.5px 'Geist', system-ui; }
.dc-nav-links a { color: #8b8f97; }
.dc-nav-links a:hover { color: #e6e8ea; }
.dc-nav-links a[aria-current="page"] { color: #f2f3f5; }
.dc-nav-spacer { flex: 1; }

.dc-cta {
    display: inline-flex; align-items: center; gap: 9px;
    height: 36px; padding: 0 16px; border-radius: 9px;
    background: #3b82f6; color: #fff; font: 600 13px 'Geist', system-ui;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 6px 14px -6px rgba(59, 130, 246, .5),
                inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: background-color .16s cubic-bezier(.4, 0, .2, 1);
}
.dc-cta:hover { background: #2563eb; color: #fff; }
.dc-cta img { display: block; flex: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.dc-hero {
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    background:
        radial-gradient(closest-side at 78% -10%, rgba(124, 140, 236, .14), rgba(124, 140, 236, 0)),
        linear-gradient(180deg, #0A0F26, #070B18);
}
.dc-hero-in { max-width: 1360px; margin: 0 auto; padding: 72px 40px 56px; }
.dc-hero h1 {
    margin: 0; max-width: 18ch;
    font: 600 clamp(32px, 4vw, 52px)/1.08 'Geist', system-ui;
    letter-spacing: -.042em; color: #f2f3f5; text-wrap: balance;
}
.dc-hero p {
    margin: 20px 0 0; max-width: 62ch;
    font: 400 16.5px/1.6 'Geist', system-ui; color: #b3b8c2; text-wrap: pretty;
}
.dc-hero strong { color: #e6e8ea; font-weight: 600; }

/* ── The tally ────────────────────────────────────────────────────────────
   Three facts about what exists, then — on its own line, in quieter ink —
   what does not yet. The split is the point: in one sentence "36 features …
   2 more" reads as 36 that already contains the 2, which makes the honest
   number look inflated. Separated, 36 is the headline and +2 is an aside. */
/* ⚠️ Scoped under `.dc-hero` deliberately. `.dc-hero p` is (0,1,1) and would
   otherwise beat a bare `.dc-tally` at (0,1,0) — silently reimposing its
   16.5px font and `max-width: 62ch` on both rows, which squeezes the tally
   into a wrap it was not designed for. Caught only by reading the computed
   style in the real page; the rule looked correct in isolation. */
.dc-hero .dc-tally {
    margin: 22px 0 0; max-width: none;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
    font: 400 15px/1.5 'Geist', system-ui; color: #8b8f97;
}
.dc-hero .dc-tally span { display: inline-flex; align-items: baseline; gap: 7px; }
.dc-hero .dc-tally strong {
    font: 600 25px/1 'Geist', system-ui; letter-spacing: -.03em; color: #f2f3f5;
    font-variant-numeric: tabular-nums;
}
.dc-hero .dc-tally-soon {
    margin: 11px 0 0; max-width: 62ch;
    font: 400 14px/1.55 'Geist', system-ui; color: #6b7078;
}
.dc-hero .dc-tally-soon em { font-style: normal; color: #8b8f97; }

@media (max-width: 620px) {
    .dc-hero .dc-tally { gap: 6px 18px; }
    .dc-hero .dc-tally strong { font-size: 21px; }
}

.dc-search-wrap {
    margin-top: 30px; max-width: 520px;
    display: flex; align-items: center; gap: 11px;
    height: 52px; padding: 0 16px; border-radius: 13px;
    background: rgba(10, 12, 16, .6); border: 1px solid rgba(255, 255, 255, .09);
    color: #6b7078;
    transition: border-color .16s cubic-bezier(.4, 0, .2, 1);
}
.dc-search-wrap:focus-within { border-color: rgba(255, 255, 255, .2); }
.dc-search-wrap svg { flex: none; }
.dc-search-wrap input {
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    color: #f2f3f5; font: 400 14.5px 'Geist', system-ui;
}
.dc-search-wrap input::placeholder { color: #6b7078; }
.dc-search-wrap input::-webkit-search-cancel-button { filter: invert(.5); }
.dc-search-wrap kbd {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .09);
    font: 400 11px 'Geist Mono', ui-monospace, monospace; color: #5b5f67;
}
.dc-search-note {
    margin: 12px 0 0; font: 400 13px 'Geist', system-ui; color: #7b8088;
    font-variant-numeric: tabular-nums;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.dc-cols {
    max-width: 1360px; margin: 0 auto; padding: 0 40px 96px;
    display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px;
    align-items: start;
}
.dc-side { position: sticky; top: 92px; }
.dc-side-in {
    display: flex; flex-direction: column; gap: 2px;
    max-height: calc(100vh - 120px); overflow-y: auto;
    padding: 24px 0 24px; scrollbar-width: thin;
}
.dc-side-cap {
    padding: 18px 10px 8px;
    font: 700 9.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .14em; color: #5b5f67;
}
.dc-side-cap:first-child { padding-top: 0; }
.dc-side-in a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px;
    font: 500 13px 'Geist', system-ui; color: #8b8f97;
    transition: background-color .14s cubic-bezier(.4, 0, .2, 1), color .14s cubic-bezier(.4, 0, .2, 1);
}
.dc-side-in a:hover { background: rgba(255, 255, 255, .045); color: #e6e8ea; }
.dc-side-in a.is-here { background: rgba(167, 139, 250, .12); color: #f2f3f5; }
.dc-side-in a span {
    margin-left: auto;
    font: 500 11px 'Geist Mono', ui-monospace, monospace;
    color: #5b5f67; font-variant-numeric: tabular-nums;
}

.dc-content { min-width: 0; padding-top: 44px; }

.dc-lede { margin: 0 0 34px; }
.dc-lede:not(:first-child) {
    margin-top: 84px; padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.dc-h1 {
    margin: 0; font: 600 clamp(26px, 2.6vw, 34px)/1.1 'Geist', system-ui;
    letter-spacing: -.04em; color: #f2f3f5;
}
.dc-lede p {
    margin: 14px 0 0; max-width: 68ch;
    font: 400 15px/1.65 'Geist', system-ui; color: #9aa0aa; text-wrap: pretty;
}
.dc-lede code {
    padding: 1px 5px; border-radius: 5px;
    background: rgba(255, 255, 255, .06);
    font: 500 13px 'Geist Mono', ui-monospace, monospace; color: #c8cbd1;
}

.dc-group { margin-top: 46px; }
.dc-group-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.dc-group-head h2 {
    margin: 0; font: 600 19px 'Geist', system-ui;
    letter-spacing: -.024em; color: #f2f3f5;
}
.dc-group-head p { margin: 0; flex: 1 1 260px; font: 400 13.5px 'Geist', system-ui; color: #7b8088; }
.dc-count {
    font: 500 11.5px 'Geist Mono', ui-monospace, monospace; color: #5b5f67;
    font-variant-numeric: tabular-nums;
}

/* ── Features ────────────────────────────────────────────────────────────── */

.dc-feat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.dc-feat {
    padding: 20px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(26, 28, 33, .8), rgba(18, 20, 24, .76));
    border: 1px solid rgba(255, 255, 255, .07);
    transition: border-color .18s cubic-bezier(.4, 0, .2, 1);
}
.dc-feat:hover { border-color: rgba(255, 255, 255, .14); }
.dc-feat-head { display: flex; align-items: center; gap: 10px; }
.dc-feat-head h3 {
    margin: 0; font: 600 15.5px 'Geist', system-ui;
    letter-spacing: -.018em; color: #f2f3f5;
}
.dc-tier {
    flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
    border-radius: 999px; background: rgba(167, 139, 250, .15);
    font: 700 8.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .09em; color: #c4b5fd; white-space: nowrap;
}
.dc-feat-line { margin: 10px 0 0; font: 500 14px/1.45 'Geist', system-ui; color: #c8cbd1; text-wrap: pretty; }
.dc-feat-body { margin: 8px 0 0; font: 400 13.5px/1.6 'Geist', system-ui; color: #8b8f97; text-wrap: pretty; }
.dc-feat-list { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dc-feat-list li {
    position: relative; padding-left: 15px;
    font: 400 13px/1.5 'Geist', system-ui; color: #9aa0aa; text-wrap: pretty;
}
.dc-feat-list li::before {
    content: ''; position: absolute; left: 3px; top: 8px;
    width: 4px; height: 4px; border-radius: 50%; background: rgba(167, 139, 250, .7);
}
.dc-feat-meta {
    margin-top: 15px; padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .055);
    font: 400 12px 'Geist', system-ui; color: #6b7078;
}
.dc-feat-meta span { color: #3d434d; }

/* ── Coming soon ──────────────────────────────────────────────────────────
   Two catalogue entries describe features that are not built. They still get
   a card, because a reference should say what is planned — but the card has
   to be legible as a plan at a glance, not on the third line.

   Deliberately NOT amber and NOT red: unbuilt is not a warning and not a
   fault, it is simply a different state, so it reads as a dashed outline and
   quieter ink rather than an alert. The card is also not dimmed with opacity —
   the copy still has to be readable, and a half-faded card reads as broken. */
.dc-feat.is-soon {
    background: none;
    border-style: dashed;
    border-color: rgba(255, 255, 255, .10);
}
.dc-feat.is-soon:hover { border-color: rgba(255, 255, 255, .17); }
.dc-feat.is-soon .dc-feat-head h3 { color: #c8cbd1; }

.dc-soon {
    flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
    border-radius: 999px; background: rgba(255, 255, 255, .05);
    border: 1px dashed rgba(255, 255, 255, .16);
    font: 700 8.5px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .09em; text-transform: uppercase; color: #8b8f97; white-space: nowrap;
}

/* ── Commands ────────────────────────────────────────────────────────────── */

.dc-cmd-list { display: flex; flex-direction: column; gap: 8px; }
.dc-cmd {
    padding: 15px 17px; border-radius: 12px;
    background: rgba(255, 255, 255, .022);
    border: 1px solid rgba(255, 255, 255, .06);
    transition: background-color .16s cubic-bezier(.4, 0, .2, 1), border-color .16s cubic-bezier(.4, 0, .2, 1);
}
.dc-cmd:hover { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .11); }
.dc-cmd:target { border-color: rgba(167, 139, 250, .5); }
.dc-cmd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-cmd-name {
    font: 500 14px 'Geist Mono', ui-monospace, monospace;
    color: #c9b6ee; letter-spacing: -.01em;
}
.dc-perm, .dc-opt {
    display: inline-flex; align-items: center; height: 18px; padding: 0 7px;
    border-radius: 999px; font: 500 10.5px 'Geist', system-ui; white-space: nowrap;
}
.dc-perm { background: rgba(245, 158, 11, .12); color: #e8b562; }
.dc-opt { background: rgba(255, 255, 255, .05); color: #7b8088; }
.dc-cmd-desc { margin: 8px 0 0; font: 400 13.5px/1.55 'Geist', system-ui; color: #9aa0aa; text-wrap: pretty; }

.dc-args { margin: 12px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 16px; }
.dc-args dt { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dc-args dt code { font: 500 12px 'Geist Mono', ui-monospace, monospace; color: #c8cbd1; }
.dc-arg-type { font: 400 11px 'Geist', system-ui; color: #5b5f67; }
.dc-req { font: 600 9.5px 'Geist Mono', ui-monospace, monospace; letter-spacing: .06em; color: #7b8088; }
.dc-args dd { margin: 0; font: 400 12.5px/1.45 'Geist', system-ui; color: #7b8088; }

.dc-subs { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .055); }
.dc-subs-cap {
    display: block; margin-bottom: 8px;
    font: 700 9px 'Geist Mono', ui-monospace, monospace;
    letter-spacing: .14em; color: #5b5f67;
}
.dc-sub { display: flex; align-items: baseline; gap: 12px; padding: 4px 0; flex-wrap: wrap; }
.dc-sub code { flex: none; font: 500 12.5px 'Geist Mono', ui-monospace, monospace; color: #9fb0f2; }
.dc-sub span { flex: 1 1 220px; font: 400 12.5px/1.45 'Geist', system-ui; color: #7b8088; }

.dc-empty {
    margin: 40px 0 0; padding: 22px;
    border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .12);
    font: 400 14px/1.6 'Geist', system-ui; color: #8b8f97; text-wrap: pretty;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.dc-foot { border-top: 1px solid rgba(255, 255, 255, .05); background: #070B18; }
.dc-foot-in {
    max-width: 1360px; margin: 0 auto; padding: 34px 40px 40px;
    display: flex; align-items: center; gap: 20px 34px; flex-wrap: wrap;
}
.dc-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.dc-foot nav a { font: 400 13px 'Geist', system-ui; color: #7b8088; }
.dc-foot nav a:hover { color: #c8cbd1; }
.dc-foot-note { margin-left: auto; font: 400 12px 'Geist', system-ui; color: #5b5f67; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
    .dc-cols { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 72px; }
    /* The rail becomes a scrolling strip under the hero — sticky beside nothing
       is just a column of links the content has to flow around. */
    .dc-side { position: static; }
    .dc-side-in {
        flex-direction: row; align-items: center; gap: 6px;
        max-height: none; overflow-x: auto; overflow-y: visible;
        padding: 18px 0; margin: 0 -40px; padding-left: 40px; padding-right: 40px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }
    .dc-side-in a { flex: none; }
    .dc-side-cap { padding: 0 6px 0 0; }
    .dc-side-cap:not(:first-child) { padding-left: 14px; }
}

@media (max-width: 900px) {
    .dc-nav-links { display: none; }
    .dc-nav-in, .dc-hero-in, .dc-cols, .dc-foot-in { padding-left: 24px; padding-right: 24px; }
    .dc-side-in { margin: 0 -24px; padding-left: 24px; padding-right: 24px; }
    .dc-hero-in { padding-top: 52px; padding-bottom: 40px; }
}

@media (max-width: 620px) {
    .dc-nav-in, .dc-hero-in, .dc-cols, .dc-foot-in { padding-left: 18px; padding-right: 18px; }
    .dc-side-in { margin: 0 -18px; padding-left: 18px; padding-right: 18px; }
    .dc-feat-grid { grid-template-columns: minmax(0, 1fr); }
    /* Two columns of definition list is one column of squeezed text at this size. */
    .dc-args { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .dc-args dd { margin-bottom: 8px; }
    .dc-foot-note { margin-left: 0; }
}