/* Matches the docs site. Fonts are local, so the page contacts nothing but this site. */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("fonts/jetbrains-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("fonts/jetbrains-mono-latin-700.woff2") format("woff2"); }

:root { color-scheme: dark; --bg: #0e0e0e; --panel: #161616; --raised: #1c1c1c; --line: #2a2a2a; --line-strong: #444444; --text: #d4d4d4; --muted: #8f8f8f; --bright: #e6e6e6; --warn: #b0831f; }

html, body.bg-slate-300 { background: var(--bg); color: var(--text); font: 16px/1.7 Inter, sans-serif; }
#app { max-width: 78rem; margin: 0 auto; padding: 3rem 1rem 4rem; }
#app > * + * { margin-top: 1.25rem; }

#app .bg-gray-50, #app .bg-white, #app .bg-gray-200 { background: var(--panel); color: var(--text); }
#app .border, #app .border-b, #app .border-t, #app .border-gray-300, #app .border-gray-500 { border-color: var(--line); }
#app .shadow { box-shadow: none; }
#app .rounded, #app .rounded-lg { border-radius: 4px; }
#app .text-gray-900 { color: var(--text); }
#app .text-gray-500 { color: var(--muted); }
#app .text-blue-500 { color: var(--bright); text-decoration: underline; text-underline-offset: 3px; }
#app .bg-blue-600 { background: var(--bright); }
#app .bg-red-100 { background: #2a1616; color: #e6b8b8; }

#app .border-b.px-2 { padding: .7rem 1rem; font: 700 .85rem "JetBrains Mono", monospace; color: var(--bright); }
#app .p-3 { padding: 1rem; }

#app select, #app input { background: var(--raised); color: var(--text); border-color: var(--line); }
#app select:focus, #app input:focus { border-color: var(--muted); --tw-ring-color: transparent; }

#app button { background: var(--raised); color: var(--bright); border: 1px solid var(--line-strong); border-radius: 4px; padding: .35rem .8rem; font: 400 .85rem "JetBrains Mono", monospace; }
#app button:hover { border-color: var(--muted); background: #242424; }
#app button:disabled { opacity: .5; }

#site-header { background: none; border: 0; padding: 0; }
#site-header h1 { margin: 0 0 .5rem; font: 700 1.75rem/1.3 "JetBrains Mono", monospace; color: var(--bright); }
#site-header p { margin: 0; color: var(--muted); }
#site-header nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: 2rem; font: 400 .8rem "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
#site-header nav a { color: #a8a8a8; text-decoration: none; }
#site-header nav a:hover { color: var(--bright); }

#notice { border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: 4px; padding: 1rem; font-size: .9rem; }
#notice div:first-child { font-weight: 600; color: var(--bright); }

#layout { display: grid; grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
#col-left > * + * { margin-top: 1.25rem; }
#site-header p, #notice { max-width: 46rem; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.panel-title { padding: .7rem 1rem; border-bottom: 1px solid var(--line); font: 700 .85rem "JetBrains Mono", monospace; color: var(--bright); }
.tab-bar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
#app .tab-bar button { background: none; border: 0; color: var(--muted); padding: .3rem .6rem; }
#app .tab-bar button:hover { color: var(--bright); background: none; }
#app .tab-bar button.active { color: var(--bright); background: var(--raised); }
.tab-body > .border-b:first-child { display: none; }
#app .tab-body > .border-b, #app .tab-body > .border-t, #app .tab-body > .px-2 { padding: .7rem 1rem; }

#monitor { position: sticky; top: 1rem; display: flex; flex-direction: column; height: calc(100vh - 2rem); min-height: 24rem; background: #0a0a0a; border: 1px solid var(--line); border-radius: 4px; }
.monitor-head { display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem; border-bottom: 1px solid var(--line); font: 700 .85rem "JetBrains Mono", monospace; color: var(--bright); }
.monitor-log { flex: 1; overflow-y: auto; padding: 1rem; font: 400 .8rem/1.6 "JetBrains Mono", monospace; color: var(--text); overflow-wrap: anywhere; }
.monitor-empty { color: var(--muted); }

@media (max-width: 960px) {
  #layout { grid-template-columns: minmax(0, 1fr); }
  #monitor { position: static; height: 20rem; }
}