/* Space Grotesk is loaded via each page's Google Fonts <link> (not @import,
   which would serialize a render-blocking fetch behind this stylesheet). */

/* Global (both themes): skip-to-content link, visible only when focused */
.skip-link{
    position:absolute; left:-9999px; top:12px; z-index:9999;
    background:var(--ink); color:var(--paper);
    padding:8px 14px; font-family:var(--mono, monospace); font-size:13px;
    text-decoration:none;
}
.skip-link:focus{ left:12px; }

/* Global (both themes): visible keyboard focus that matches each theme */
:focus-visible{
    outline: 2px solid var(--red-pen);
    outline-offset: 3px;
    border-radius: 2px;
}
html[data-theme="terminal"] :focus-visible{
    outline-color: var(--green, #41d27f);
}

/* Global (both themes): brand wordmark beside the logo in Space Grotesk semibold */
.brand .name{
    font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

/* =========================================================================
   ThinkingDBx — TERMINAL / DARK theme (toggle)
   Activates only under html[data-theme="terminal"]. Paper mode = default CSS.
   Loaded site-wide; markup for CRT / boot / palette / toggle is injected by
   terminal.js so pages don't need per-file body edits.
   ========================================================================= */

/* ---- 1. page-level variable swap ---- */
html[data-theme="terminal"]{
    --paper:        #0a0c0b;
    --paper-edge:   #121614;
    --ink:          #d6e0d8;   /* now: phosphor text */
    --ink-soft:     #93a098;
    --ink-faded:    #7d8a81;   /* lifted a step: #5f6b63 failed contrast at 12px on #0a0c0b */
    --red-pen:      #ff6b5e;
    --blue-pen:     #5cc8ff;
    --highlight:    #ffe000;
    --green:        #41d27f;
}
html[data-theme="terminal"],
html[data-theme="terminal"] body{ background:#070908; }
html[data-theme="terminal"] body{
    color: var(--ink);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(65,210,127,0.05) 1px, transparent 1.4px),
        radial-gradient(circle at 11px 17px, rgba(65,210,127,0.035) 1px, transparent 1.2px);
    background-size: 22px 22px, 33px 33px;
    text-shadow: 0 0 1px rgba(65,210,127,0.18);
}
html[data-theme="terminal"] body::before{
    background:
        radial-gradient(ellipse at 50% -10%, rgba(65,210,127,0.06), transparent 55%),
        radial-gradient(ellipse at 50% 120%, rgba(92,200,255,0.05), transparent 60%) !important;
}
html[data-theme="terminal"] a{ color: var(--blue-pen); }
html[data-theme="terminal"] a:hover{ color: var(--green); }
html[data-theme="terminal"] strong{ color:#f3f7f3; }

/* ---- 2. chrome (ink-bg / paper-text) ---- */
html[data-theme="terminal"] .tab{ background:#000; color:var(--green); border:1px solid rgba(65,210,127,0.3); }
html[data-theme="terminal"] .btn{ background:rgba(65,210,127,0.06) !important; border-color:rgba(65,210,127,0.45) !important; color:var(--ink) !important; }
html[data-theme="terminal"] .btn:hover{ background:rgba(65,210,127,0.14) !important; border-color:var(--green) !important; }
html[data-theme="terminal"] .btn.ghost{ background:transparent !important; }
html[data-theme="terminal"] .caret,
html[data-theme="terminal"] .h1 .caret{ background:var(--green); box-shadow:0 0 8px rgba(65,210,127,0.6); }
html[data-theme="terminal"] .label,
html[data-theme="terminal"] .label::before{ color:var(--green) !important; }
html[data-theme="terminal"] .topnav a[aria-current="page"]{ border-bottom-color:var(--green); color:var(--ink); }
html[data-theme="terminal"] .topnav a.launch{ color:var(--green); }

/* ---- 3. dark surfaces: keep dark with light text (they used background:var(--ink)) ---- */
html[data-theme="terminal"] .code,
html[data-theme="terminal"] .ls-term,
html[data-theme="terminal"] .agent-demo,
html[data-theme="terminal"] .agent-config,
html[data-theme="terminal"] .ascii,
html[data-theme="terminal"] .sticky-cta,
html[data-theme="terminal"] .byline .avatar,
html[data-theme="terminal"] .stack .chip.core,
html[data-theme="terminal"] .chips .ch.emp,
html[data-theme="terminal"] .routing .r .tag,
html[data-theme="terminal"] .resources .icon,
html[data-theme="terminal"] .paper-embed .act:hover{
    background:#12171a !important;             /* lifted surface so it shows on the dark page */
    border-color:rgba(65,210,127,0.22);
    /* inset ring delineates the card even when its offset shadow is invisible on dark */
    box-shadow: inset 0 0 0 1px rgba(65,210,127,0.22) !important;
}
/* light text on the small dark chips/badges that used color:var(--paper) */
html[data-theme="terminal"] .sticky-cta,
html[data-theme="terminal"] .stack .chip.core,
html[data-theme="terminal"] .chips .ch.emp,
html[data-theme="terminal"] .routing .r .tag,
html[data-theme="terminal"] .byline .avatar,
html[data-theme="terminal"] .resources .icon,
html[data-theme="terminal"] .paper-embed .act:hover{ color:#eaf2ea !important; }

/* ---- 4. doodles, scroll pen, black-box logo, widened column + one-line hero ---- */
/* hero glow only — heading SIZE stays per-page so it matches paper mode.
   (index's one-line hero + 880 column is scoped inside index.html itself) */
html[data-theme="terminal"] .h1{ text-shadow:0 0 8px rgba(65,210,127,0.18); }
/* highlighted words: same half-height marker band as paper mode, but
   translucent so the light phosphor text stays legible on top of it */
html[data-theme="terminal"] .h1 .hl,
html[data-theme="terminal"] .hl{
    background-image: linear-gradient(180deg, transparent 55%, rgba(255,224,0,0.4) 55%, rgba(255,224,0,0.4) 92%, transparent 92%);
    padding: 0 2px;
}
html[data-theme="terminal"] .margin-doodles svg{ stroke:#9fb0a6; }
html[data-theme="terminal"] .margin-doodles .accent{ stroke:var(--red-pen); }
html[data-theme="terminal"] .margin-doodles .blue{ stroke:var(--blue-pen); }
html[data-theme="terminal"] .scroll-pen{ background:linear-gradient(var(--green),var(--blue-pen)); opacity:.5; }
html[data-theme="terminal"] .brand svg rect{ fill:#000 !important; stroke:#fff !important; stroke-width:2.5 !important; }
html[data-theme="terminal"] .brand svg g{ stroke:#fff !important; }
html[data-theme="terminal"] .brand .name{ color:#f3f7f3; }
/* section legend (studio right rail): rail line + dots use dark rgba that
   vanishes on the dark screen — recolor so they're visible */
html[data-theme="terminal"] .legend::before{ background:rgba(65,210,127,0.28); }
html[data-theme="terminal"] .legend a::before{ background:#0a0c0b; border-color:rgba(65,210,127,0.55); }
html[data-theme="terminal"] .legend a:hover::before,
html[data-theme="terminal"] .legend a.active::before{ border-color:var(--green); background:var(--green); }

/* ---- 5. CRT scanlines (injected #tdbx-crt) ----
   Static, no blend-mode and no per-frame animation: a blended/animated
   full-screen overlay forces a recomposite every frame and makes the page
   progressively laggy. Plain painted scanlines composite once = free. */
#tdbx-crt{ display:none; }
html[data-theme="terminal"] #tdbx-crt{
    display:block; position:fixed; inset:0; z-index:9000; pointer-events:none;
    background: repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 3px);
    opacity:.3;   /* keep the CRT feel without eating contrast on small text */
}

/* ---- 6. boot overlay disabled ---- */
html.tdbx-booting::before{ display:none; }
html.tdbx-booting body{ overflow:unset; }
#tdbx-boot{ display:none !important; }

/* ---- 7. command palette (injected #tdbx-cmdk) ---- */
#tdbx-cmdk{ position:fixed; inset:0; z-index:9600; display:none;
    align-items:flex-start; justify-content:center;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(3px); padding-top:14vh; }
#tdbx-cmdk.open{ display:flex; }
#tdbx-cmdk .box{ width:min(560px,92vw); background:#0c0f0e;
    border:1px solid rgba(65,210,127,0.35); border-radius:10px; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,0.6); font-family:'JetBrains Mono', monospace; }
#tdbx-cmdk .in{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(65,210,127,0.18); }
#tdbx-cmdk .in .p{ color:#41d27f; font-weight:700; }
#tdbx-cmdk input{ flex:1; background:transparent; border:none; outline:none; color:#d6e0d8; font-family:'JetBrains Mono', monospace; font-size:14px; }
#tdbx-cmdk ul{ list-style:none; margin:0; padding:6px; max-height:46vh; overflow-y:auto; }
#tdbx-cmdk li{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:7px; font-size:13px; color:#93a098; cursor:pointer; }
#tdbx-cmdk li .ic{ color:#41d27f; width:16px; text-align:center; }
#tdbx-cmdk li .sub{ margin-left:auto; color:#5f6b63; font-size:11px; }
#tdbx-cmdk li[aria-selected="true"]{ background:rgba(65,210,127,0.12); color:#d6e0d8; }
#tdbx-cmdk .foot{ padding:8px 14px; border-top:1px solid rgba(65,210,127,0.12); font-size:10.5px; color:#5f6b63; display:flex; gap:14px; }

/* ---- 8. theme toggle (injected #tdbx-theme into .topnav) ---- */
#tdbx-theme{ display:inline-flex; align-items:center; gap:0; border:1px solid currentColor;
    border-radius:6px; overflow:hidden; opacity:.85; font-family:'JetBrains Mono', monospace;
    font-size:11px; line-height:1; cursor:pointer; }
#tdbx-theme button{ background:transparent; border:none; cursor:pointer; padding:5px 9px;
    font:inherit; color:inherit; letter-spacing:.3px; }
#tdbx-theme button.on{ background:var(--ink); color:var(--paper); }
html[data-theme="terminal"] #tdbx-theme{ color:var(--green); border-color:rgba(65,210,127,.5); }
html[data-theme="terminal"] #tdbx-theme button.on{ background:var(--green); color:#06120b; }

@media (prefers-reduced-motion: reduce){
    html[data-theme="terminal"] #tdbx-crt{ animation:none; }
    html[data-theme="terminal"] #tdbx-crt::after{ display:none; }
    html.tdbx-booting::before{ display:none; }
    #tdbx-boot{ display:none !important; }
}