/* Shared docs shell for /docs/ and evergreen article pages.
   Tokens come from okami.css. Keep visual contract with docs/index.html. */

body{ margin:0; background:var(--ok-bg-0); }
a{ color:inherit; text-decoration:none; }

.docs{ --ok-glow:0.5; position:relative; min-height:100vh; color:var(--ok-fg); font-family:var(--ok-display);
  -webkit-font-smoothing:antialiased; background:
    radial-gradient(800px 480px at 92% -4%, color-mix(in oklch, var(--ok-magenta) calc(7% * var(--ok-glow)), transparent), transparent 62%),
    radial-gradient(700px 420px at -4% 8%, color-mix(in oklch, var(--ok-cyan) calc(6% * var(--ok-glow)), transparent), transparent 60%),
    var(--ok-bg-0); }
.docs::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--ok-grid) 1px,transparent 1px),linear-gradient(90deg,var(--ok-grid) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%); opacity:.7; }
.docs > *{ position:relative; z-index:1; }

.docs-top{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:18px;
  padding:12px 24px; border-bottom:1px solid var(--ok-line);
  background:color-mix(in srgb, var(--ok-bg-0) 86%, transparent); backdrop-filter:blur(14px); }
.docs-brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.docs-brand img{ height:26px; width:auto; }
.docs-brand .doctag{ font-family:var(--ok-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ok-fg-mute); padding:3px 7px; border:1px solid var(--ok-line); }
.docs-search{ flex:1; max-width:560px; display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--ok-line); background:var(--ok-bg-1); }
.docs-search:focus-within{ border-color:color-mix(in oklch,var(--ok-cyan) 45%,var(--ok-line)); box-shadow:0 0 0 1px color-mix(in oklch,var(--ok-cyan) 35%,transparent); }
.docs-search svg{ width:14px; height:14px; color:var(--ok-fg-mute); flex-shrink:0; }
.docs-search input{ flex:1; background:transparent; border:0; outline:none; color:var(--ok-fg); font-family:var(--ok-mono); font-size:13px; }
.docs-search input::placeholder{ color:var(--ok-fg-dim); }
.docs-search .kbd{ font-family:var(--ok-mono); font-size:10px; letter-spacing:.08em; color:var(--ok-fg-mute); border:1px solid var(--ok-line); padding:2px 6px; }
.docs-top-right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.docs-ghlink{ font-family:var(--ok-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ok-fg-soft); transition:color .15s; }
.docs-ghlink:hover{ color:var(--ok-cyan); }
.lang-pills{ padding:3px; }
.lang-pills .ok-pill{ padding:5px 9px; text-decoration:none; display:inline-flex; }
.lang-pills a.ok-pill:focus-visible{ outline:2px solid var(--ok-cyan); outline-offset:2px; }

.docs-grid{ max-width:1340px; margin:0 auto; display:grid; grid-template-columns:236px minmax(0,1fr) 200px; gap:44px; padding:0 24px; align-items:start; }

.docs-side{ position:sticky; top:73px; max-height:calc(100vh - 73px); overflow-y:auto; padding:34px 0 60px; }
.docs-side-group{ margin-bottom:26px; }
.docs-side-group > .gl{ display:flex; align-items:center; gap:9px; font-family:var(--ok-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ok-fg-mute); margin:0 0 12px 14px; }
.docs-side-group > .gl::before{ content:""; width:14px; height:1px; background:var(--gm,var(--ok-fg-mute)); }
.docs-side-group.gov{ --gm:var(--ok-orange); } .docs-side-group.des{ --gm:var(--ok-cyan); }
.docs-side-group.imp{ --gm:var(--ok-magenta); } .docs-side-group.ops{ --gm:var(--ok-success); }
.docs-side a{ display:block; font-size:13.5px; color:var(--ok-fg-soft); padding:7px 14px; border-left:2px solid transparent; transition:all .15s; }
.docs-side a:hover{ color:var(--ok-fg); background:color-mix(in srgb,var(--ok-bg-2) 60%,transparent); }
.docs-side a.active{ color:var(--ok-fg); font-weight:500; border-left-color:var(--ok-orange);
  background:linear-gradient(90deg, color-mix(in oklch,var(--ok-orange) 14%,transparent), transparent); }
.docs-side a:focus-visible{ outline:2px solid var(--ok-cyan); outline-offset:-2px; }

.docs-main{ padding:34px 0 90px; min-width:0; }
.docs-bc{ font-family:var(--ok-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ok-fg-mute); margin-bottom:26px; }
.docs-bc a{ color:var(--ok-fg-soft); }
.docs-bc a:hover{ color:var(--ok-fg); }
.docs-bc b{ color:var(--ok-accent); font-weight:500; }
.docs-eyebrow{ display:flex; width:fit-content; align-items:center; gap:12px; font-family:var(--ok-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ok-accent); margin-bottom:18px; }
.docs-eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; }
.docs-eyebrow.cy{ color:var(--ok-cyan); } .docs-eyebrow.mg{ color:var(--ok-magenta); }
.docs-h1{ font-family:var(--ok-display); font-weight:500; font-size:clamp(38px,4.6vw,56px); letter-spacing:-.035em; line-height:1; margin:0 0 22px; text-wrap:balance; }
.docs-lead{ font-size:17px; line-height:1.65; color:var(--ok-fg-soft); max-width:64ch; margin:0 0 18px; }
.docs-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.docs-actions .ok-btn:focus-visible{ outline:2px solid var(--ok-cyan); outline-offset:3px; }

.docs-callout{ position:relative; border:1px solid var(--ok-line); background:var(--ok-bg-1); padding:18px 22px 18px 24px; margin:0 0 40px; display:grid; grid-template-columns:24px 1fr; gap:14px; align-items:start; }
.docs-callout::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--ok-cyan); box-shadow:0 0 calc(10px*var(--ok-glow)) var(--ok-cyan); }
.docs-callout .ic{ width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--ok-cyan); color:var(--ok-cyan); font-family:var(--ok-mono); font-size:12px; font-weight:700; font-style:italic; }
.docs-callout b{ display:block; font-family:var(--ok-display); font-weight:500; font-size:15px; margin-bottom:5px; color:var(--ok-fg); }
.docs-callout p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--ok-fg-soft); }

.docs-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 14px; }
.docs-card{ --cc:var(--ok-orange); position:relative; border:1px solid var(--ok-line); background:color-mix(in srgb,var(--ok-bg-1) 70%,transparent); padding:22px 22px 24px; overflow:hidden; transition:all .2s; }
.docs-card::before{ content:""; position:absolute; left:-1px; top:-1px; right:-1px; height:2px; background:var(--cc); box-shadow:0 0 calc(10px*var(--ok-glow)) var(--cc); }
.docs-card.cy{ --cc:var(--ok-cyan); } .docs-card.mg{ --cc:var(--ok-magenta); } .docs-card.gr{ --cc:var(--ok-success); }
.docs-card:hover{ background:var(--ok-bg-2); }
.docs-card h4{ font-family:var(--ok-display); font-weight:500; font-size:17px; margin:0 0 8px; display:flex; align-items:center; gap:9px; }
.docs-card h4 .ar{ color:var(--cc); transition:transform .2s; }
.docs-card:hover h4 .ar{ transform:translateX(4px); }
.docs-card p{ margin:0; font-size:13px; line-height:1.55; color:var(--ok-fg-soft); }
.docs-card:focus-visible{ outline:2px solid var(--ok-cyan); outline-offset:2px; }

.docs-sec{ padding-top:52px; margin-top:8px; }
.docs-h2{ font-family:var(--ok-display); font-weight:500; font-size:clamp(26px,3vw,34px); letter-spacing:-.02em; line-height:1.1; margin:0 0 8px; position:relative; display:inline-block; }
.docs-h2::after{ content:""; position:absolute; left:0; bottom:-9px; height:2px; width:64px; background:linear-gradient(90deg,var(--ok-magenta),transparent); }
.docs-p{ font-size:15px; line-height:1.7; color:var(--ok-fg-soft); max-width:64ch; margin:22px 0 18px; }
.docs-p a, .docs-list a{ color:var(--ok-cyan); text-decoration:underline; text-underline-offset:3px; }
.docs-p a:hover, .docs-list a:hover{ color:var(--ok-fg); }
.docs-p a:focus-visible, .docs-list a:focus-visible{ outline:2px solid var(--ok-cyan); outline-offset:3px; }
.docs-p strong{ color:var(--ok-fg); font-weight:500; }
.docs-p code, .ic-code{ font-family:var(--ok-mono); font-size:.86em; background:var(--ok-bg-2); border:1px solid var(--ok-line); padding:1px 6px; color:var(--ok-cyan); }

.docs-levels{ display:grid; gap:8px; margin:18px 0; }
.docs-level{ display:grid; grid-template-columns:46px 1fr; gap:16px; align-items:baseline; padding:12px 0; border-top:1px solid var(--ok-line); }
.docs-level:first-child{ border-top:0; }
.docs-level .ln{ font-family:var(--ok-display); font-weight:600; font-size:26px; letter-spacing:-.02em; }
.docs-level:nth-child(1) .ln{ color:var(--ok-fg-mute); } .docs-level:nth-child(2) .ln{ color:var(--ok-cyan); }
.docs-level:nth-child(3) .ln{ color:var(--ok-magenta); } .docs-level:nth-child(4) .ln{ color:var(--ok-accent); }
.docs-level .lt{ font-family:var(--ok-display); font-weight:500; font-size:15px; color:var(--ok-fg); }
.docs-level .ld{ font-family:var(--ok-mono); font-size:12px; color:var(--ok-fg-mute); display:block; margin-top:3px; line-height:1.5; }

.docs-compare{ border:1px solid var(--ok-line); margin:18px 0 8px; background:var(--ok-bg-1); }
.docs-compare-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:14px 16px; border-top:1px solid var(--ok-line-soft); }
.docs-compare-row:first-child{ border-top:0; background:var(--ok-bg-2); }
.docs-compare-row .h{ font-family:var(--ok-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ok-fg-mute); }
.docs-compare-row .v{ font-size:14px; line-height:1.5; color:var(--ok-fg-soft); }
.docs-compare-row .v em{ color:var(--ok-fg); font-style:normal; font-weight:500; }

.docs-list{ list-style:none; margin:8px 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; }
.docs-list li{ font-size:14.5px; line-height:1.6; color:var(--ok-fg-soft); padding-left:22px; position:relative; max-width:64ch; }
.docs-list li::before{ content:"\2192"; position:absolute; left:0; color:var(--ok-magenta); font-family:var(--ok-mono); }

.docs-toc{ position:sticky; top:73px; padding:38px 0 60px; font-family:var(--ok-mono); }
.docs-toc .tt{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ok-fg-mute); margin-bottom:16px; }
.docs-toc a{ display:block; font-size:12px; color:var(--ok-fg-mute); padding:6px 0 6px 14px; border-left:1px solid var(--ok-line); transition:all .15s; line-height:1.4; }
.docs-toc a:hover{ color:var(--ok-fg-soft); }
.docs-toc a.active{ color:var(--ok-accent); border-left-color:var(--ok-accent); }
.docs-toc a:focus-visible{ outline:2px solid var(--ok-cyan); outline-offset:2px; }
.docs-toc .edit{ margin-top:22px; padding-top:18px; border-top:1px solid var(--ok-line); }
.docs-toc .edit a{ border-left:0; padding-left:0; color:var(--ok-fg-soft); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.docs-toc .edit a:hover{ color:var(--ok-cyan); }

@media (max-width:1080px){ .docs-grid{ grid-template-columns:210px minmax(0,1fr); } .docs-toc{ display:none; } }
@media (max-width:760px){
  .docs-top{ gap:10px; padding:10px 16px; overflow-x:auto; }
  .docs-brand img{ height:22px; }
  .docs-search{ display:none; }
  .docs-grid{ grid-template-columns:1fr; padding:0 22px; }
  .docs-side{ display:none; }
  .docs-main{ padding-top:28px; }
  .docs-cards{ grid-template-columns:1fr; }
  .docs-compare-row{ grid-template-columns:1fr; gap:6px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .docs-card, .docs-card h4 .ar, .docs-side a, .docs-toc a, .docs-ghlink{ transition:none; }
}