/* ==========================================================================
   Commands page — v3 dark docs layer (loads after styles.css, home.css, v3.css)
   ========================================================================== */

body.docs3 { background: var(--void); color: var(--paper); }
.docs-wrap { background: transparent; color: var(--paper); border-top: 1px solid var(--rule); }
.docs3 .page-hero { background: transparent; padding-top: clamp(72px, 9vw, 120px); }
.docs3 .page-hero::before { display: none; }
.docs3 .page-hero h1 { letter-spacing: -0.05em; }
.docs3 .page-hero .one-cmd { background: rgba(0, 0, 0, .35); border-color: var(--rule-2); box-shadow: 0 0 40px -10px rgba(60, 193, 199, .35); }
.docs3 .page-hero .lead { color: var(--dim-2); }
.docs3 .eyebrow { color: var(--teal-bright); }

.docs3 .docs { max-width: 1240px; }
.docs3 .toc ul { border-left-color: var(--rule-2); }
.docs3 .toc h5 { color: var(--dim); }
.docs3 .toc a { color: var(--dim-2); }
.docs3 .toc a:hover { color: var(--paper); }
.docs3 .toc a.is-active { color: var(--teal-bright); border-left-color: var(--teal-bright); }

.docs3 .doc-section + .doc-section { border-top-color: var(--rule); }
.docs3 .doc-section > h2 { color: var(--paper); }
.docs3 .doc-section > .lead { color: var(--dim-2); }
.docs3 .inline-code { background: rgba(27, 154, 160, .12); color: var(--teal-bright); }

.docs3 .cmd-group h3 { color: var(--teal-bright); }
.docs3 .cmd-group h3::after { background: var(--rule-2); }
.docs3 .cmd-list { background: var(--void-2); border-color: var(--rule-2); }
.docs3 .cmd { border-top-color: var(--rule); }
.docs3 .cmd:hover { background: rgba(255, 255, 255, .025); }
.docs3 .cmd p { color: var(--dim-2); }
.docs3 .cmd .names code { background: rgba(27, 154, 160, .14); color: var(--teal-bright); }
.docs3 .cmd .names code .arg { color: var(--dim); }
.docs3 .cmd.hero-cmd { background: linear-gradient(90deg, rgba(27, 154, 160, .18), rgba(27, 154, 160, .04)); border-color: rgba(60, 193, 199, .4); box-shadow: 0 0 40px -12px rgba(60, 193, 199, .45); }
.docs3 .cmd.hero-cmd:hover { background: linear-gradient(90deg, rgba(27, 154, 160, .22), rgba(27, 154, 160, .06)); }
.docs3 .cmd.hero-cmd .names code { background: rgba(60, 193, 199, .22); }
.docs3 .cmd.hero-cmd p { color: var(--paper); }
.docs3 .cmd.hero-cmd p span { color: var(--dim-2); }

.docs3 .table { background: var(--void-2); border-color: var(--rule-2); }
.docs3 .table th { background: rgba(255, 255, 255, .03); color: var(--dim); border-bottom-color: var(--rule-2); }
.docs3 .table td { color: var(--dim-2); border-bottom-color: var(--rule); }
.docs3 .table td:first-child { color: var(--paper); }
.docs3 .table td code { background: rgba(255, 255, 255, .05); border-color: var(--rule-2); color: var(--teal-bright); }

.docs3 .preset { background: var(--void-2); border-color: var(--rule-2); }
.docs3 .preset.def { border-color: var(--teal-bright); box-shadow: 0 0 0 3px rgba(60, 193, 199, .14), 0 0 40px -10px rgba(60, 193, 199, .4); }
.docs3 .preset h3 { color: var(--paper); }
.docs3 .preset .badge { background: rgba(60, 193, 199, .16); color: var(--teal-bright); }
.docs3 .preset dt { color: var(--dim); }
.docs3 .preset dd { color: var(--dim-2); }
.docs3 .preset dd code { color: var(--teal-bright); }
.docs3 .callout { background: rgba(27, 154, 160, .1); border-color: rgba(60, 193, 199, .3); color: var(--teal-bright); }
.docs3 .tree { background: #070a10; border: 1px solid var(--rule-2); color: var(--dim-2); }
.docs3 .tree-note { color: var(--paper); }

.docs3 .finale { background: transparent; border-top: 1px solid var(--rule); }
.docs3 .finale h2 { font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; letter-spacing: -0.03em; }
.docs3 .footer { background: var(--void); }
.docs3 .claude { color: #d97757; }