/* ============================================================
   Subnomic Docs — shared styles
   Loaded by every page under /docs/. Tailwind (CDN) + the inline
   tailwind.config still live per-page; everything reusable is here.
   Palette: bg #0b0c0e · surface #16181d · line #23262d · ink #e7e9ee
            muted #9aa1ad · accent #ff4d00 · accent-2 #fa7d2c · cyan #3bd6c6
   ============================================================ */

:root { color-scheme: dark; }
html { background: #0b0c0e; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
[v-cloak] { display: none; }
::selection { background: rgba(255, 77, 0, .35); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- backdrop decoration (shared with the marketing pages) --- */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.glow-orb {
  background: radial-gradient(circle at center, rgba(255,77,0,.32), transparent 60%);
  filter: blur(20px);
}
.gradient-text {
  background: linear-gradient(135deg, #e7e9ee 0%, #fa7d2c 55%, #ff4d00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- mobile-menu fade (Vue transition) --- */
.fade-enter-active, .fade-leave-active { transition: opacity .2s ease, transform .2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(-4px); }

/* ============================================================
   Prose — article typography (same scale as the blog template)
   ============================================================ */
.prose h1 { font-size: 1.9rem; font-weight: 800; color: #e7e9ee; letter-spacing: -0.02em; line-height: 1.15; }
.prose h2 { font-size: 1.35rem; font-weight: 700; color: #e7e9ee; margin-top: 2.5rem; letter-spacing: -0.01em; }
.prose h3 { font-size: 1.05rem; font-weight: 600; color: #e7e9ee; margin-top: 1.75rem; }
.prose p { color: #c4c9d2; margin-top: 1rem; line-height: 1.8; }
.prose ul, .prose ol { margin-top: 1rem; padding-left: 1.25rem; color: #c4c9d2; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: .5rem; line-height: 1.7; }
.prose a { color: #fa7d2c; text-decoration: none; }
.prose a:hover { color: #ff4d00; }
.prose strong { color: #e7e9ee; font-weight: 600; }
.prose em { color: #c4c9d2; }
.prose blockquote { margin-top: 1.5rem; border-left: 3px solid #ff4d00; padding: .25rem 0 .25rem 1.25rem; color: #9aa1ad; font-style: italic; }
.prose pre { margin-top: 1.25rem; overflow-x: auto; border-radius: .75rem; border: 1px solid #23262d; background: #16181d; padding: 1.1rem 1.25rem; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .82rem; line-height: 1.65; color: #e7e9ee; white-space: pre; }
.prose code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .85em; color: #3bd6c6; background: rgba(59,214,198,.1); padding: .1rem .35rem; border-radius: .35rem; }
.prose pre code { color: inherit; background: none; padding: 0; }
.prose kbd { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .78em; color: #e7e9ee; background: rgba(255,255,255,.08); border: 1px solid #23262d; border-radius: .35rem; padding: .05rem .35rem; }

/* ============================================================
   Doc component primitives (mapped from the app's Tailwind classes)
   ============================================================ */

/* Callouts — blue→cyan (info), amber→accent-orange (warn) */
.callout {
  margin-top: 1.1rem;
  border-radius: .6rem;
  padding: .65rem .85rem;
  font-size: .82rem;
  line-height: 1.6;
}
.callout strong { color: #e7e9ee; }
.callout code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .85em; background: rgba(255,255,255,.06); border-radius: .3rem; padding: .05rem .3rem; }
.callout-info { border: 1px solid rgba(59,214,198,.25); background: rgba(59,214,198,.06); color: #c8e9e3; }
.callout-info code { color: #3bd6c6; }
.callout-warn { border: 1px solid rgba(250,125,44,.3); background: rgba(250,125,44,.08); color: #f3cda9; }
.callout-warn code { color: #fab27a; }

/* Action badges — used inside guardrail recipe cards */
.badge { display: inline-block; border-radius: .3rem; padding: .1rem .45rem; font-size: .65rem; font-weight: 600; line-height: 1.4; letter-spacing: .01em; }
.badge-deny { background: rgba(244,63,94,.15); color: #fda4af; }
.badge-warn { background: rgba(250,125,44,.15); color: #fab27a; }
.badge-allow { background: rgba(59,214,198,.15); color: #7fe3d7; }

/* Permission pills */
.perms { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.perm {
  display: inline-block;
  background: rgba(255,255,255,.05);
  border: 1px solid #23262d;
  border-radius: .375rem;
  padding: .12rem .5rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: .72rem;
  color: #9aa1ad;
}

/* Guardrail recipe cards */
.recipes { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.recipe { border: 1px solid #23262d; background: rgba(255,255,255,.02); border-radius: .55rem; padding: .7rem .8rem; }
.recipe-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.recipe-pattern { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .76rem; color: #e7e9ee; }
.recipe p { color: #9aa1ad; font-size: .78rem; margin: 0; line-height: 1.55; }
.recipe p code { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .85em; color: #3bd6c6; }

/* ============================================================
   Docs chrome (navbar/sidebar/footer injected by docs.js)
   ============================================================ */

/* Left sidebar */
.docs-side-group { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: #6b7280; font-weight: 600; padding: 0 .5rem; margin: 0 0 .4rem; }
.docs-side-group + .docs-side-group, .doc-link + .docs-side-group { margin-top: 1.1rem; }
.doc-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-radius: .5rem;
  padding: .4rem .55rem;
  font-size: .82rem;
  color: #9aa1ad;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.doc-link:hover { color: #e7e9ee; background: rgba(255,255,255,.04); }
.doc-link[aria-current="page"] { color: #fa7d2c; background: rgba(255,77,0,.09); font-weight: 500; }
.doc-link svg { flex: 0 0 auto; opacity: .9; }