/* ==========================================================================
   Srusan — Sirus knowledge base
   Author: Sanjay Sivakumar (github.com/SruSanCyborg)
   ========================================================================== */

.docs-hero { padding-top: 130px; padding-bottom: clamp(40px, 5vw, 70px); border-bottom: 1px solid var(--line); }
.docs-title { margin-top: 28px; font-family: var(--f-display); font-variation-settings: "wdth" 118; font-weight: 800; font-size: clamp(2.8rem, 7.4vw, 8rem); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; }
.docs-lede { margin-top: 24px; max-width: 64ch; color: var(--ink-2); font-size: clamp(15px, 1.2vw, 19px); }
.docs-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.docs-meta span { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 100px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.docs-meta b { color: var(--muted); font-weight: 400; margin-right: 6px; }

.docs-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.docs-side { position: sticky; top: 0; height: 100vh; padding: 92px 0 24px; }
.docs-side-inner { height: 100%; overflow-y: auto; padding-right: 12px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.docs-search { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 42px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-2); margin-bottom: 20px; }
.docs-search:focus-within { border-color: var(--ink-2); }
.docs-search svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.docs-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font: inherit; font-size: 14px; }
.docs-search input::-webkit-search-cancel-button { display: none; }
.docs-search kbd { font-family: var(--f-mono); font-size: 11px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 6px; }
.docs-nav p { margin: 22px 0 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.docs-nav p:first-child { margin-top: 0; }
.docs-nav a { display: block; position: relative; padding: 5px 0 5px 14px; font-size: 14px; color: var(--ink-2); border-left: 1px solid var(--line); transition: color .2s, border-color .2s; }
.docs-nav a:hover { color: var(--ink); }
.docs-nav a.is-current { color: var(--ink); border-left-color: transparent; }
.docs-nav a.is-current::before { content: ""; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 2px; background: var(--grad); }
.docs-nav a.is-hidden, .docs-nav p.is-hidden { display: none; }
.docs-nav mark { background: rgba(34, 195, 230, .2); color: var(--ink); border-radius: 2px; }

/* ---------- Content ---------- */
.docs { min-width: 0; padding: clamp(40px, 5vw, 72px) 0 clamp(80px, 10vw, 140px); max-width: 860px; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.doc-sec { padding-top: 24px; margin-bottom: clamp(48px, 6vw, 80px); scroll-margin-top: 90px; }
.doc-sec.is-hidden { display: none; }
.doc-kicker { display: inline-block; margin-bottom: 14px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.docs h2 { font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; }
.docs h2 .anchor { margin-left: 10px; font-size: .5em; color: var(--muted); opacity: 0; transition: opacity .2s; vertical-align: middle; }
.docs h2:hover .anchor { opacity: 1; }
.docs h3 { font-family: var(--f-body); font-size: 18px; font-weight: 700; color: var(--ink); margin: 36px 0 12px; }
.docs p { margin: 0 0 16px; }
.docs strong, .docs b { color: var(--ink); font-weight: 600; }
.docs em { color: var(--ink); }
.docs a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.docs a:not(.btn):hover { text-decoration-color: var(--cyan); }
.docs ul, .docs ol { margin: 0 0 18px; padding-left: 20px; }
.docs ul { list-style: none; padding-left: 0; }
.docs ul li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.docs ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; background: var(--cyan); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.docs ol { list-style: decimal; }
.docs ol li { margin-bottom: 10px; padding-left: 6px; }
.docs ol li::marker { color: var(--muted); font-family: var(--f-mono); font-size: .85em; }
.docs blockquote { margin: 20px 0; padding: 18px 24px; border-left: 2px solid var(--violet); background: rgba(124, 77, 255, .06); font-family: var(--f-display); font-variation-settings: "wdth" 112; font-weight: 700; font-size: 22px; color: var(--ink); text-transform: uppercase; letter-spacing: -.01em; }
.docs dl { margin: 0 0 18px; }
.docs dt { color: var(--ink); margin-top: 14px; }
.docs dd { margin: 4px 0 0; }
.docs kbd { font-family: var(--f-mono); font-size: 12px; padding: 1px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; color: var(--ink); background: var(--bg-2); white-space: nowrap; }

.docs pre { position: relative; margin: 0 0 20px; padding: 18px 20px; background: var(--term); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; font-family: var(--f-mono); font-size: 13px; line-height: 1.7; color: var(--ink); }
.docs pre code { font-family: inherit; white-space: pre; }
.docs pre.out { color: var(--ink-2); border-style: dashed; }
.docs pre .c { color: #5f6e66; }
.docs pre .copy-code { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center; color: var(--muted); background: var(--term); opacity: 0; transition: opacity .2s, color .2s; }
.docs pre:hover .copy-code, .docs pre .copy-code:focus-visible { opacity: 1; }
.docs pre .copy-code:hover { color: var(--ink); }
.docs pre .copy-code svg { width: 16px; height: 16px; grid-area: 1 / 1; transition: opacity .2s; }
.docs pre .copy-code .ic-done { opacity: 0; color: var(--green); }
.docs pre .copy-code.is-done .ic-copy { opacity: 0; }
.docs pre .copy-code.is-done .ic-done { opacity: 1; }

.docs table { margin: 0 0 22px; font-size: 14px; line-height: 1.55; display: block; overflow-x: auto; }
.docs table tbody, .docs table tr { width: 100%; }
.docs th, .docs td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.docs th { font-family: var(--f-mono); font-weight: 400; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.docs td code { white-space: nowrap; }
.docs td:first-child { color: var(--ink); }
.docs .rules-table td:first-child, .docs .num td:first-child, .docs .num2 td:first-child, .docs .cmd-table td:first-child { white-space: nowrap; }
.docs table.num2 td:nth-child(2) { font-family: var(--f-mono); white-space: nowrap; }
.docs table.num td:not(:first-child) { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.docs .rules-table td:nth-child(3), .docs .cmd-table td:nth-child(3) { min-width: 220px; }
.docs .cmd-table td:nth-child(3) code { white-space: nowrap; display: inline-block; margin: 0 4px 4px 0; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: var(--f-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.tag.t-allow { color: var(--allow); background: rgba(31, 178, 107, .12); }
.tag.t-verify { color: var(--verify); background: rgba(91, 140, 255, .12); }
.tag.t-constrain { color: var(--constrain); background: rgba(255, 176, 32, .12); }
.tag.t-block { color: var(--block); background: rgba(255, 59, 47, .12); }
.sev { font-family: var(--f-mono); font-size: 12px; }
.s-crit { color: var(--block); } .s-high { color: var(--constrain); } .s-med { color: #ffd166; }

.note { margin: 0 0 20px; padding: 16px 20px; border: 1px solid rgba(34, 195, 230, .3); border-radius: 8px; background: rgba(34, 195, 230, .05); font-size: 15px; }
.note.warn { border-color: rgba(255, 176, 32, .35); background: rgba(255, 176, 32, .05); }
.note b:first-child { display: block; margin-bottom: 4px; }

.formula-doc { margin: 0 0 22px; padding: 22px; border-radius: 8px; border: 1px solid transparent; background: linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box; font-family: var(--f-mono); font-size: clamp(14px, 1.4vw, 18px); color: var(--ink); text-align: center; }

.diagram { margin: 8px 0 24px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); overflow-x: auto; }
.diagram svg { width: 100%; min-width: 560px; height: auto; }
.dg-box rect { fill: var(--bg); stroke: var(--line-2); }
.dg-hl rect { stroke: var(--cyan); }
.dg-box text { fill: var(--ink); font-family: var(--f-mono); font-size: 13px; text-anchor: middle; }
.dg-box .dg-sub { fill: var(--muted); font-size: 10.5px; }
.dg-line { stroke: var(--line-2); stroke-width: 1.5; fill: none; }

.principles-list { list-style: none !important; padding: 0 !important; counter-reset: pr; }
.principles-list li { counter-increment: pr; position: relative; padding: 14px 0 14px 48px !important; border-top: 1px solid var(--line); margin: 0 !important; }
.principles-list li::before { content: counter(pr, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-family: var(--f-mono); font-size: 12px; color: var(--cyan); }

.dec-list { display: grid; gap: 0; }
.dec { display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.dec b { font-family: var(--f-mono); font-size: 13px; color: var(--cyan); font-weight: 500; }

.rel { padding: 18px 0; border-top: 1px solid var(--line); }
.rel h3 { margin: 0 0 12px; font-family: var(--f-display); font-variation-settings: "wdth" 112; font-size: 22px; font-weight: 800; }
.rel h3 span { margin-left: 10px; font-family: var(--f-mono); font-size: 12px; font-weight: 400; color: var(--muted); }

.docs details { border-top: 1px solid var(--line); }
.docs details:last-of-type { border-bottom: 1px solid var(--line); }
.docs summary { cursor: pointer; padding: 16px 32px 16px 0; color: var(--ink); font-weight: 600; list-style: none; position: relative; }
.docs summary::-webkit-details-marker { display: none; }
.docs summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform .3s; }
.docs details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.docs details p { padding-bottom: 8px; }
.doc-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.docs-empty { padding: 40px 0; color: var(--muted); }

.docs-toggle { display: none; }

@media (max-width: 1023px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-side { position: fixed; z-index: 98; inset: 0 auto 0 0; width: min(320px, 86vw); padding: 90px 20px 20px; background: var(--bg-2); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .5s var(--ease); }
  .docs-open .docs-side { transform: none; }
  .docs-toggle { display: inline-flex; align-items: center; gap: 10px; position: fixed; z-index: 97; left: 16px; bottom: 16px; padding: 12px 18px; border-radius: 100px; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
  .docs-toggle svg { width: 18px; height: 18px; }
}