/* Developer kit pages (documentation and simulator). Uses the panel's tokens from app.css. */
body.kit { min-height: 100vh; }
.kit-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 24px; background: rgba(11, 13, 16, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.kit-brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 700; }
.kit-brand img { height: 26px; }
.kit-brand span { padding-left: 12px; border-left: 1px solid var(--line2); color: var(--muted); font-weight: 600; }
.kit-top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.kit-top nav a { padding: 8px 12px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-weight: 600; }
.kit-top nav a:hover { color: var(--text); background: var(--panel2); }
.kit-top nav a[aria-current] { color: var(--text); background: var(--panel2); }

/* Simulator */
.sim { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; gap: 20px; padding: 20px 24px; align-items: start; }
.sim-edit, .sim-prev { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sim-prev { position: sticky; top: 76px; }
.sim-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sim-bar select { width: auto; flex: 1 1 180px; }
#simCode { height: 58vh; min-height: 320px; padding: 14px; resize: vertical; font: 13px/1.55 ui-monospace, "JetBrains Mono", Consolas, monospace; tab-size: 2; white-space: pre; }
.sim-checks ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.sim-checks li { padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); font-size: 13px; }
.sim-checks li code { margin-right: 6px; color: var(--text); font-weight: 600; }
.sim-checks li.bad { border-color: rgba(255, 92, 92, .45); }
.sim-checks li.bad::before { content: "Erro · "; color: #ff6b6b; font-weight: 700; }
.sim-checks li.warn::before { content: "Aviso · "; color: #f5a524; font-weight: 700; }
.sim-ok, .sim-err { padding: 10px 12px; border-radius: var(--r-sm); font-size: 13px; }
.sim-ok { background: var(--accent-soft); color: var(--accent); }
.sim-err { background: rgba(255, 92, 92, .1); color: #ff8a8a; }
@media (max-width: 960px) { .sim { grid-template-columns: minmax(0, 1fr); padding: 16px; } .sim-prev { position: static; order: -1; } #simCode { height: 44vh; } }

/* Documentation */
.doc { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 40px; justify-content: center; padding: 32px 24px 80px; }
.doc-toc { position: sticky; top: 84px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.doc-toc a { padding: 6px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 13px; }
.doc-toc a:hover { color: var(--text); background: var(--panel2); }
.doc h1 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -.02em; }
.doc .lead { font-size: 16px; color: var(--muted); margin: 0 0 20px; max-width: 62ch; }
.doc h2 { font-size: 22px; margin: 48px 0 10px; padding-top: 8px; scroll-margin-top: 80px; }
.doc h3 { font-size: 15px; margin: 24px 0 6px; }
.doc p, .doc li { color: #c9ced6; max-width: 70ch; }
.doc code { font: 12.5px ui-monospace, "JetBrains Mono", Consolas, monospace; background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--text); }
.doc pre { margin: 12px 0; padding: 16px; overflow: auto; border-radius: var(--r-sm); background: var(--bg2); border: 1px solid var(--line); font: 12.5px/1.6 ui-monospace, "JetBrains Mono", Consolas, monospace; }
.doc pre code { background: none; border: 0; padding: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.doc th { color: var(--muted); font-weight: 600; }
.doc td:first-child { white-space: nowrap; }
.doc .doc-cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; }
.doc .note { padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 14px 0; }
.doc .steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 10px; }
.doc .steps li { counter-increment: s; position: relative; padding: 12px 14px 12px 48px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg2); }
.doc .steps li::before { content: counter(s); position: absolute; left: 14px; top: 12px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 12px; }
@media (max-width: 860px) { .doc { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 16px 60px; } .doc-toc { position: static; flex-direction: row; flex-wrap: wrap; } .doc td:first-child { white-space: normal; } .doc table { display: block; overflow-x: auto; } }
.sim-bar label.btn { margin: 0; }
.doc article { min-width: 0; }
@media (max-width: 600px) { .kit-top { padding: 10px 16px; } .kit-top nav a { padding: 6px 8px; font-size: 13px; } }