/* Documentation page: two-column reading layout on the landing's palette; mockups reuse styles.css. */
.docs-page .nav { position: sticky; }
.docs-nav-actions { display: flex; align-items: center; gap: 8px; }
.docs { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; align-items: start; padding: 40px 0 80px; }
.docs-side { position: sticky; top: calc(var(--nav-h) + 20px); }
.docs-toc { border: 1px solid rgba(148, 163, 184, .14); border-radius: 14px; background: rgba(17, 17, 19, .7); padding: 6px 4px; }
.docs-toc summary { list-style: none; cursor: default; padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.docs-toc summary::-webkit-details-marker { display: none; }
.docs-toc summary::after { display: none; }
.docs-toc ol { list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: 1px; }
.docs-toc a { display: block; padding: 7px 12px; border-radius: 9px; color: #d4d4d8; font-size: 14px; font-weight: 600; line-height: 1.3; }
.docs-toc a:hover { background: rgba(63, 63, 70, .45); color: #fff; }
.docs-toc a.is-active { background: rgba(37, 99, 235, .22); color: #eff6ff; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, .35); }
.docs-body { min-width: 0; max-width: 780px; line-height: 1.7; }
.docs-kicker { color: #93c5fd; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.docs-body h1 { margin: 8px 0 14px; font-size: clamp(30px, 4.6vw, 44px); letter-spacing: -.035em; }
.docs-intro { color: #d4d4d8; font-size: 1.08rem; }
.docs-updated { margin-top: 10px; color: var(--muted-2); font-size: 13px; }
.docs .doc-section { margin-top: 48px; padding: 0; }
.doc-section h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.025em; margin-bottom: 14px; }
.doc-section p, .doc-section li, .doc-section td { color: #c7cad1; font-size: 15.5px; }
.doc-section p { margin: 10px 0; }
.doc-section ul, .doc-section ol { padding-left: 1.25em; display: grid; gap: 7px; margin: 12px 0; }
.doc-section strong { color: #fafafa; }
.doc-section em { color: #e4e4e7; }
.doc-section a { color: #93c5fd; text-decoration: underline; text-underline-offset: 3px; }
.doc-section code { font-size: .9em; padding: 1px 6px; border-radius: 6px; background: rgba(39, 39, 42, .8); border: 1px solid #3f3f46; color: #dbeafe; }
.doc-section table { width: 100%; min-width: 0; border-collapse: collapse; margin: 14px 0; font-size: 14.5px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.doc-section th, .doc-section td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-section thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: rgba(24, 24, 27, .7); }
.doc-section tbody tr:last-child td { border-bottom: 0; }
.doc-section td:first-child { white-space: nowrap; }
.doc-mock { margin: 20px 0; }
.doc-section .doc-mock :is(p, li, td, th, small, span, b, em, strong) { font-size: inherit; color: inherit; margin: 0; }
.doc-section .doc-mock :is(ul, ol) { margin: 0; padding: 0; gap: 0; list-style: none; }
.doc-section .doc-mock .pv ul { gap: 7px; } .doc-section .doc-mock .cn ul { gap: 6px; }
.doc-section .doc-mock .demo-log { gap: 8px; }
.doc-section .doc-mock a { text-decoration: none; color: inherit; }
.doc-section .doc-mock .tool code, .doc-section .doc-mock .mc-node code, .doc-section .doc-mock .fm code { background: transparent; border: 0; padding: 0; font-size: inherit; }
.doc-mock .how-art { border: 1px solid var(--line); border-radius: var(--r-lg); }
.doc-mock .tool-art { margin: 0; padding: 14px; font-size: 12.5px; }
.doc-mock .fm { padding: 10px; }
.doc-mock .hero-visual { max-width: 640px; }
.doc-mock .demo-stage { gap: 10px; }
.doc-art .mc-manager { border-color: rgba(139, 92, 246, .6); box-shadow: 0 0 0 1px rgba(139, 92, 246, .25), 0 10px 30px rgba(76, 29, 149, .35); }
/* terminal and terminal-node mocks */
.doc-term { border: 1px solid #3f3f46; border-radius: 12px; background: #09090b; box-shadow: 0 10px 30px #0008; overflow: hidden; }
.doc-term pre { margin: 0; padding: 12px 14px; color: #e4e4e7; font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-term .p { color: #93c5fd; font-weight: 700; }
.doc-term .c { color: #71717a; }
.doc-term .cur { display: inline-block; width: 7px; height: 13px; background: #e4e4e7; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
.doc-term-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #18181b; border-bottom: 1px solid #27272a; font-size: 12px; color: var(--muted); }
.doc-term-bar i { width: 10px; height: 10px; border-radius: 999px; background: #3f3f46; }
.doc-term-bar span { margin-left: 6px; }
.doc-term-node .node-title { border-radius: 11px 11px 0 0; }
.docs-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 960px) {
  .docs { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; }
  .docs-side { position: static; }
  .docs-toc summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
  .docs-toc summary::after { display: grid; }
  .docs-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .docs-toc ol { grid-template-columns: 1fr; }
  .docs-nav-actions .btn-primary { display: none; }
  .doc-mobile { grid-template-columns: 1fr; }
  .doc-phone { max-width: 220px; }
  .doc-section table, .doc-section tbody, .doc-section tr, .doc-section td { display: block; width: 100%; box-sizing: border-box; }
  .doc-section thead { display: none; }
  .doc-section tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .doc-section tr:last-child { border-bottom: 0; }
  .doc-section td { padding: 2px 0; border: 0; white-space: normal; }
  .doc-section td:first-child { padding-bottom: 4px; color: #fafafa; white-space: normal; }
  .doc-section td code { white-space: normal; overflow-wrap: anywhere; }
  .doc-section td[data-label]::before { content: attr(data-label) ': '; color: var(--muted); }
  .doc-section td[data-label] { display: inline-block; width: auto; padding-right: 14px; }
}

/* Note demo: an agent node cabled to a NoteNode replica; note-color-* variables mirror the app. */
.nd-stage { position: relative; container-type: inline-size; container-name: nd; padding: 22px 22px 58px; border: 1px solid rgba(148, 163, 184, .22); border-radius: var(--r-xl); background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .16), transparent 40%), #07080b; overflow: hidden; }
.nd-stage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(129, 129, 138, .5) 1px, transparent 1.2px); background-size: 20px 20px; opacity: .5; pointer-events: none; }
.nd-canvas { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) 60px minmax(0, 1fr); align-items: stretch; }
.nd-agent, .nd-note { min-width: 0; display: grid; grid-template-rows: 34px minmax(0, 1fr); border: 1px solid #3f3f46; border-radius: 12px; background: #09090b; box-shadow: 0 10px 30px #0008; overflow: hidden; }
.nd-agent { border-color: rgba(96, 165, 250, .76); box-shadow: 0 14px 40px rgba(0, 0, 0, .52), 0 0 0 1px rgba(96, 165, 250, .22); }
.nd-log { display: grid; align-content: start; gap: 8px; padding: 12px; min-height: 250px; max-height: 300px; overflow: auto; scrollbar-width: thin; }
.nd-log [data-nd-step]:not(.is-on) { display: none; }
.nd-log [data-nd-step].is-on { animation: step-in .35s ease; }
.nd-agent .chat-status::before { background: #60a5fa; }
.is-done .nd-agent .chat-status::before { background: #86efac; }
.nd-agent .st-idle { display: none; } .is-done .nd-agent .st-busy { display: none; } .is-done .nd-agent .st-idle { display: inline; }
.nd-edge { align-self: center; width: 100%; height: 20px; }
.nd-edge-path { fill: none; stroke: url(#nd-edge); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; animation: cv-flow 1.4s linear infinite; }
.nd-edge-glow { fill: none; stroke: url(#nd-edge); stroke-width: 7; opacity: .22; filter: blur(3px); vector-effect: non-scaling-stroke; }
.nd-edge-tip { fill: #facc15; filter: drop-shadow(0 0 4px rgba(250, 204, 21, .8)); }
/* NoteNode replica */
.note-node { --note-bg: #172117; --note-bg-strong: #23351f; --note-border: #a3e635; --note-ink: #ecfccb; --note-muted: #bef264; --note-shadow: rgba(132, 204, 22, .2); border-color: color-mix(in srgb, var(--note-border) 55%, #3f3f46); box-shadow: 0 10px 30px #0008, 0 0 24px var(--note-shadow); transition: box-shadow .3s ease, border-color .3s ease; }
.note-node.is-flash { border-color: var(--note-border); box-shadow: 0 10px 30px #0008, 0 0 0 1px var(--note-border), 0 0 34px var(--note-shadow); }
.note-title { padding: 0 6px 0 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--note-bg-strong) 88%, var(--note-border)), var(--note-bg-strong)); border-bottom-color: color-mix(in srgb, var(--note-border) 40%, #27272a); color: var(--note-ink); }
.note-title-actions { gap: 4px; }
.note-mode-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid color-mix(in srgb, var(--note-border) 34%, transparent); border-radius: 999px; background: rgba(0, 0, 0, .24); }
.note-mode-toggle b { height: 20px; padding: 1px 7px; border-radius: 999px; color: var(--note-muted); font-size: 10.5px; font-weight: 800; line-height: 18px; }
.note-mode-toggle b.on { background: color-mix(in srgb, var(--note-bg) 70%, var(--note-border)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--note-border) 56%, #334155); color: var(--note-ink); }
.note-color-trigger { display: inline-block; width: 22px; height: 22px; border-radius: 999px; background: #a3e635; box-shadow: inset 0 1px rgba(255, 255, 255, .55), 0 0 9px #a3e635; }
.note-body-shell { min-height: 0; background: var(--note-bg); }
.note-preview { padding: 12px 14px; color: var(--note-ink); font-size: 13px; line-height: 1.5; }
.doc-section .doc-mock .note-preview p { margin: 0 0 6px; color: var(--note-ink); }
.doc-section .doc-mock .nd-tasks { list-style: none; padding-left: 1.45em; margin: .35em 0; gap: 0; }
.doc-section .doc-mock .nd-tasks li { margin: .3em 0; position: relative; color: var(--note-ink); transition: background .3s ease; }
.nd-tasks input[type='checkbox'] { width: 13px; height: 13px; margin: 0 .35em 0 -1.25em; padding: 0; vertical-align: -2px; accent-color: var(--note-border); pointer-events: none; }
.nd-tasks li.is-ticked { background: color-mix(in srgb, var(--note-border) 14%, transparent); border-radius: 6px; }
.nd-by { margin-left: 8px; color: var(--note-muted); font-size: 11px; font-style: normal; opacity: 0; transition: opacity .3s ease; }
.nd-by.is-on { opacity: 1; }
.nd-typed { border-right: 1.5px solid var(--note-ink); padding-right: 1px; animation: blink 1.1s steps(2) infinite; }
.is-done .nd-typed { border-right-color: transparent; animation: none; }
.nd-replay { top: auto; bottom: 14px; left: 14px; }
@container nd (max-width: 640px) {
  .nd-canvas { grid-template-columns: minmax(0, 1fr); }
  .nd-edge { width: 20px; height: 40px; justify-self: center; transform: rotate(90deg); }
  .nd-log { min-height: 0; max-height: 260px; }
}

/* Mobile cockpit: a phone running the real cockpit layout, next to the Mobile devices dialog. */
.doc-mock-mobile { container-type: inline-size; container-name: mb; }
.mb-stage { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 22px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(circle at 30% 0%, rgba(37, 99, 235, .16), transparent 45%), #07080b; overflow: hidden; }
.mb-phone { position: relative; justify-self: center; width: 100%; max-width: 250px; aspect-ratio: 9 / 19; padding: 10px; border: 1px solid rgba(148, 163, 184, .35); border-radius: 36px; background: #0b0d14; box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .08), inset 0 0 0 2px #1c1f2a; }
.mb-island { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 64px; height: 16px; border-radius: 999px; background: #000; z-index: 2; }
.mb-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; border-radius: 28px; overflow: hidden; background: #070a12; color: #e4e4e7; font-size: 10px; }
.mb-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 34px 12px 8px; border-bottom: 1px solid #27272a; }
.mb-header > div { display: grid; }
.mb-header strong { color: #fafafa; font-size: 13px; }
.mb-header span { color: #a1a1aa; font-size: 9px; }
.mb-select { padding: 4px 8px; border: 1px solid #3f3f46; border-radius: 8px; background: #18181b; color: #d4d4d8; font-size: 9px; white-space: nowrap; }
.mb-page { padding: 12px 10px; overflow: hidden; }
.mb-page h1 { margin: 0; color: #fafafa; font-size: 17px; letter-spacing: -.03em; }
.mb-sub { margin: 3px 0 10px; color: #a1a1aa; font-size: 9px; line-height: 1.4; }
.mb-list { display: grid; gap: 6px; }
.mb-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid #30303a; border-radius: 11px; background: #12141d; }
.mb-item div { min-width: 0; display: grid; gap: 1px; }
.mb-item strong { overflow: hidden; color: #f4f4f5; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.mb-item small { overflow: hidden; color: #a1a1aa; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.mb-item em { color: #c4b5fd; font-size: 8px; font-style: normal; }
.mb-status, .mb-note { width: 8px; height: 8px; border-radius: 999px; background: #71717a; }
.mb-status.idle { background: #4ade80; } .mb-status.busy { background: #60a5fa; } .mb-status.attention { background: #fb7185; box-shadow: 0 0 8px #fb7185; }
.mb-note { background: #a3e635; }
.mb-pin { border-style: dashed; color: #a1a1aa; } .mb-pin > span { color: #93c5fd; font-weight: 800; text-align: center; } .mb-pin strong { color: #a1a1aa; font-weight: 600; }
.mb-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px 8px 14px; border-top: 1px solid #27272a; background: rgba(9, 9, 11, .98); }
.mb-nav b { position: relative; padding: 7px 4px; border-radius: 8px; color: #a1a1aa; font-size: 9.5px; font-weight: 700; text-align: center; }
.mb-nav .mb-plus { justify-self: center; align-self: center; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 999px; background: #2563eb; color: #fff; font-size: 17px; font-weight: 600; line-height: 1; }
.mb-nav b.on { background: rgba(37, 99, 235, .22); color: #eff6ff; }
.mb-nav b i { position: absolute; top: 2px; right: 8px; min-width: 12px; height: 12px; padding: 0 3px; border-radius: 999px; background: #f43f5e; color: #fff; font-size: 8px; font-style: normal; line-height: 12px; }
.mb-dialog { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 18px; background: #11131c; color: #e4e4e7; box-shadow: 0 28px 100px rgba(0, 0, 0, .7); font-size: 12px; }
.mb-dialog > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mb-dialog > header > div { display: grid; gap: 2px; }
.mb-dialog > header strong { font-size: 16px; }
.mb-dialog > header span { color: #a1a1aa; font-size: 12px; }
.mb-dialog > header i { color: #a1a1aa; font-style: normal; font-size: 20px; line-height: 1; }
.mb-pairing { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid rgba(139, 92, 246, .35); border-radius: 14px; background: rgba(76, 29, 149, .14); }
.mb-qr { box-sizing: border-box; width: 120px; height: 120px; padding: 9px; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.mb-qr svg { display: block; width: 100%; height: 100%; }
.mb-pairing-copy { display: grid; gap: 6px; min-width: 0; }
.mb-pairing-copy small { color: #a1a1aa; font-size: 11px; }
.mb-pairing-copy strong { color: #fafafa; font: 700 26px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.mb-pairing-copy p { margin: 0; color: #d4d4d8; font-size: 12px; }
.mb-pairing-copy b, .mb-devices article b { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border: 1px solid rgba(148, 163, 184, .32); border-radius: 9px; background: #20232f; color: #f4f4f5; font-size: 11px; font-weight: 750; white-space: nowrap; }
.mb-pairing-copy > div b { border-color: rgba(139, 92, 246, .72); background: linear-gradient(135deg, #6d28d9, #4f46e5); color: #fff; }
.mb-devices { display: grid; }
.mb-devices h3 { margin: 0 0 4px; color: #c4b5fd; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.mb-devices article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 4px; border-top: 1px solid rgba(148, 163, 184, .16); }
.mb-devices article > div { display: grid; gap: 2px; min-width: 0; }
.mb-devices article strong { font-size: 13px; }
.mb-devices article span { color: #a1a1aa; font-size: 11px; }
.mb-devices .mb-actions { display: flex; gap: 6px; }
.mb-devices b.ok { border-color: rgba(248, 113, 113, .42); background: rgba(127, 29, 29, .4); color: #fecaca; }
.mb-devices b.approve { border-color: rgba(74, 222, 128, .5); background: rgba(20, 83, 45, .72); color: #bbf7d0; }
@container mb (max-width: 640px) {
  .mb-stage { grid-template-columns: 1fr; }
  .mb-pairing { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .mb-pairing-copy { justify-items: center; }
}
/* The note demo's nodes are grids too: give them an explicit column so the tool cards and the
   title bar shrink with the node instead of being cut by overflow:hidden (as in the canvas demo). */
.nd-agent, .nd-note { grid-template-columns: minmax(0, 1fr); }
.nd-log > * { min-width: 0; }
.nd-agent .node-title-copy { min-width: 0; overflow: hidden; }
.nd-agent .chat-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-agent .node-name { flex: none; }

/* Previews dialog replica (mirrors the app's Previews dialog and its Make public confirmation) */
.doc-mock-previews { container-type: inline-size; container-name: pw; }
.pw { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(circle at 50% 0%, rgba(37, 99, 235, .14), transparent 45%), #07080b; overflow: hidden; font-size: 12.5px; }
.pw-dialog, .pw-confirm { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 16px; background: #11131c; box-shadow: 0 24px 80px rgba(0, 0, 0, .65); color: #e4e4e7; min-width: 0; }
.pw-dialog > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pw-dialog > header > div { display: grid; gap: 2px; }
.pw-dialog > header b { font-size: 17px; letter-spacing: -.02em; }
.pw-dialog > header span { color: #a1a1aa; font-size: 12px; }
.pw-dialog > header i { color: #a1a1aa; font-style: normal; font-size: 18px; line-height: 1; }
.doc-section .doc-mock .pw-kicker { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 6px 0 0; }
.pw-kicker b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #e4e4e7; }
.pw-kicker span { color: #71717a; font-size: 11.5px; }
.pw-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 12px; background: #0d0f17; }
.pw-info { display: grid; gap: 3px; min-width: 0; }
.pw-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #fafafa; }
.pw-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; font-style: normal; }
.pw-badge::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pw-private { background: rgba(76, 29, 149, .35); color: #c4b5fd; }
.pw-running { background: rgba(20, 83, 45, .5); color: #86efac; }
.doc-section .doc-mock .pw-info code, .doc-section .doc-mock .pw-confirm code { background: transparent; border: 0; padding: 0; color: #93c5fd; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; }
.pw-info code span { color: #60a5fa; }
.pw-info small { color: #a1a1aa; font-size: 11px; }
.pw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pw-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border: 1px solid rgba(148, 163, 184, .32); border-radius: 9px; background: #1a1c27; color: #f4f4f5; font-size: 12px; font-weight: 700; white-space: nowrap; }
.pw-open, .pw-primary { border-color: rgba(139, 92, 246, .72); background: linear-gradient(135deg, #6d28d9, #4f46e5); color: #fff; }
.pw-remove { border-color: rgba(248, 113, 113, .42); background: rgba(127, 29, 29, .25); color: #fecaca; }
.pw-warn { border-color: rgba(251, 146, 60, .6); background: #c2410c; color: #fff7ed; }
.pw-switch { display: inline-flex; padding: 2px; border: 1px solid rgba(148, 163, 184, .32); border-radius: 9px; background: #0b0d14; }
.pw-switch b { padding: 4px 10px; border-radius: 7px; color: #a1a1aa; font-size: 12px; font-weight: 700; }
.pw-switch b.on { background: #2b2350; color: #f4f4f5; }
.pw-form { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid rgba(148, 163, 184, .2); border-radius: 12px; background: #0d0f17; }
.pw-form label { display: grid; gap: 4px; min-width: 0; color: #a1a1aa; font-size: 11px; }
.pw-input { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid rgba(148, 163, 184, .3); border-radius: 9px; background: #181a24; }
.pw-input i { color: #71717a; font-style: normal; font-size: 12.5px; }
.pw-input em { color: #71717a; font: 11px ui-monospace, Menlo, monospace; white-space: nowrap; }
.pw-confirm { border-color: rgba(251, 191, 36, .4); }
.pw-confirm > b { font-size: 16px; letter-spacing: -.02em; }
.doc-section .doc-mock .pw-confirm p { margin: 0; color: #d4d4d8; font-size: 12.5px; }
.pw-confirm code { display: block; padding: 8px 10px; border: 1px solid #27272a; border-radius: 8px; background: #0b0d14; color: #e4e4e7 !important; }
.pw-confirm > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
@container pw (max-width: 760px) {
  .pw { grid-template-columns: 1fr; }
  .pw-form { grid-template-columns: 1fr; }
  .pw-form .pw-btn { justify-self: start; }
}

/* Docs tables: a rounded container, a clear header, quiet zebra rows; the credit prices on tabular figures.
   Phones stack each row as a small card (the price table labels each value from data-label). */
.doc-section table { border-collapse: separate; border-spacing: 0; border-color: rgba(148, 163, 184, .16); border-radius: 16px; background: linear-gradient(180deg, rgba(20, 22, 30, .9), rgba(11, 12, 17, .85)); }
.doc-section thead th { padding: 12px 14px; background: rgba(24, 26, 34, .95); color: #c4c4cc; font-size: 11px; font-weight: 750; letter-spacing: .09em; border-bottom: 1px solid rgba(148, 163, 184, .18); }
.doc-section tbody td { padding: 12px 14px; border-bottom: 1px solid rgba(148, 163, 184, .08); line-height: 1.55; }
.doc-section tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .02); }
.doc-section tbody tr:hover td { background: rgba(96, 165, 250, .045); }
.doc-section td:first-child { color: #f4f4f5; font-weight: 600; }
.doc-prices td[data-label] { text-align: right; font-variant-numeric: tabular-nums; color: #e4e4e7; white-space: nowrap; }
.doc-prices thead th:not(:first-child) { text-align: right; }
.doc-prices td:first-child code { margin-left: 4px; font-size: .78em; }
/* The sidebar scrolls on its own when the page is shorter than the table of contents. */
.docs-side { max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; overscroll-behavior: contain; border-radius: 14px; }
.nd-log { scrollbar-color: #62677a transparent; }
@media (max-width: 960px) { .docs-side { max-height: none; overflow: visible; } }
@media (max-width: 560px) {
  .doc-section table { border: 0; background: none; }
  .doc-section tbody { display: grid; gap: 10px; }
  .doc-section tr, .doc-section tr:last-child { padding: 12px 14px; border: 1px solid rgba(148, 163, 184, .16); border-radius: 14px; background: linear-gradient(180deg, rgba(20, 22, 30, .9), rgba(11, 12, 17, .85)); }
  .doc-section tbody tr:nth-child(even) td, .doc-section tbody tr:hover td { background: none; }
  .doc-prices tr { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .doc-prices td:first-child { padding-bottom: 6px; }
  .doc-prices td[data-label] { display: flex !important; justify-content: space-between; gap: 8px; text-align: right; }
  .doc-prices td[data-label]::before { content: attr(data-label); color: var(--muted); font-weight: 600; font-size: 12.5px; text-align: left; }
}