/* ============================================================================
   Nibvine UI — unified component layer
   ----------------------------------------------------------------------------
   Built entirely on the theme tokens in themes.css so every component works in
   all four themes (light / dark / gray / pixel).

   Three typographic registers, because the product has three:
     serif  (Fraunces)        — what a person thinks
     sans   (Manrope)         — the interface they think in
     mono   (JetBrains Mono)  — what the machine receives

   The recurring structural device is the BRANCH RAIL: a hairline with node
   dots, mirroring the note tree that the whole product is built around. It is
   used wherever content actually has hierarchy or sequence — never as decor.
   ========================================================================== */

:root {
    --nbv-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --nbv-font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --nbv-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Branch / agent signal colour — the "living structure" counterpart to the
       steel-blue interface accent. */
    --nbv-branch: #3f7a5b;
    --nbv-branch-soft: rgba(63, 122, 91, 0.12);
    --nbv-branch-line: rgba(63, 122, 91, 0.32);

    --nbv-warn: #9a6414;
    --nbv-warn-soft: rgba(154, 100, 20, 0.12);
    --nbv-danger: #a33a3a;
    --nbv-danger-soft: rgba(163, 58, 58, 0.12);

    /* Machine surface: always dark, in every theme. The point is that it looks
       like a different medium from the page around it. */
    --nbv-machine-bg: #101821;
    --nbv-machine-bg-soft: #17222e;
    --nbv-machine-fg: #dbe6f0;
    --nbv-machine-dim: #7e93a8;
    --nbv-machine-line: rgba(219, 230, 240, 0.14);

    /* RGB triplets so legacy templates can keep their own alpha values while
       still following the active theme. */
    --nbv-paper-rgb: 255, 255, 255;
    --nbv-accent-rgb: 41, 94, 168;
    --nbv-shadow-rgb: 24, 33, 43;

    --nbv-rule: var(--border-color);
    --nbv-radius-sm: 0.5rem;
    --nbv-radius: 0.9rem;
    --nbv-radius-lg: 1.4rem;

    --nbv-measure: 68ch;
}

[data-theme="dark"] {
    --nbv-branch: #7cc39c;
    --nbv-branch-soft: rgba(124, 195, 156, 0.14);
    --nbv-branch-line: rgba(124, 195, 156, 0.3);
    --nbv-warn: #e2b463;
    --nbv-warn-soft: rgba(226, 180, 99, 0.14);
    --nbv-danger: #f08d8d;
    --nbv-danger-soft: rgba(240, 141, 141, 0.14);
    --nbv-machine-bg: #0a121a;
    --nbv-machine-bg-soft: #101b26;
    --nbv-paper-rgb: 26, 37, 50;
    --nbv-accent-rgb: 125, 177, 255;
    --nbv-shadow-rgb: 0, 0, 0;
}

[data-theme="gray"] {
    --nbv-branch: #4c7358;
    --nbv-branch-soft: rgba(76, 115, 88, 0.12);
    --nbv-branch-line: rgba(76, 115, 88, 0.3);
    --nbv-paper-rgb: 252, 252, 250;
    --nbv-accent-rgb: 63, 110, 165;
    --nbv-shadow-rgb: 36, 38, 35;
}

/* --------------------------------------------------------------------------
   1. Page scaffolding
   -------------------------------------------------------------------------- */

.nbv-page {
    font-family: var(--nbv-font-ui);
    color: var(--text-primary);
}

.nbv-section {
    margin-top: clamp(3.5rem, 8vw, 6.5rem);
}

.nbv-section:first-child {
    margin-top: 0;
}

.nbv-section-head {
    max-width: var(--nbv-measure);
}

.nbv-h1,
.nbv-h2,
.nbv-h3 {
    font-family: var(--nbv-font-display);
    font-weight: 700;
    letter-spacing: -0.035em;
    color: var(--text-primary);
    text-wrap: balance;
}

.nbv-h1 {
    font-size: clamp(2.6rem, 6.2vw, 4.4rem);
    line-height: 0.98;
}

.nbv-h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    line-height: 1.06;
}

.nbv-h3 {
    font-size: clamp(1.18rem, 1.9vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.nbv-lede {
    margin-top: 1.1rem;
    max-width: 46rem;
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    line-height: 1.65;
    color: var(--text-secondary);
}

.nbv-note {
    color: var(--text-tertiary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.nbv-mono {
    font-family: var(--nbv-font-mono);
    font-size: 0.86em;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   2. Branch rail — the signature structural device
   -------------------------------------------------------------------------- */

.nbv-rail {
    position: relative;
    margin: 0;
    padding: 0 0 0 2.1rem;
    list-style: none;
}

.nbv-rail::before {
    content: "";
    position: absolute;
    left: 0.42rem;
    top: 0.55rem;
    bottom: 0.55rem;
    width: 1px;
    background: linear-gradient(
        180deg,
        var(--nbv-branch-line),
        var(--nbv-branch-line) 82%,
        transparent
    );
}

.nbv-rail > li,
.nbv-rail > .nbv-rail-item {
    position: relative;
    padding: 0 0 1.7rem;
}

.nbv-rail > li:last-child,
.nbv-rail > .nbv-rail-item:last-child {
    padding-bottom: 0;
}

.nbv-rail > li::before,
.nbv-rail > .nbv-rail-item::before {
    content: "";
    position: absolute;
    left: -1.79rem;
    top: 0.5rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--bg-primary);
    box-shadow: 0 0 0 1.5px var(--nbv-branch);
}

.nbv-rail > li::after,
.nbv-rail > .nbv-rail-item::after {
    content: "";
    position: absolute;
    left: -1.24rem;
    top: 0.775rem;
    width: 1.1rem;
    height: 1px;
    background: var(--nbv-branch-line);
}

.nbv-rail-title {
    font-family: var(--nbv-font-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.nbv-rail-body {
    margin-top: 0.4rem;
    max-width: 40rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

/* Compact rail used inside cards and sidebars */
.nbv-rail.is-compact {
    padding-left: 1.5rem;
}

.nbv-rail.is-compact::before {
    left: 0.3rem;
}

.nbv-rail.is-compact > li {
    padding-bottom: 0.75rem;
}

.nbv-rail.is-compact > li::before {
    left: -1.32rem;
    top: 0.42rem;
    width: 0.42rem;
    height: 0.42rem;
}

.nbv-rail.is-compact > li::after {
    left: -0.9rem;
    top: 0.63rem;
    width: 0.72rem;
}

/* --------------------------------------------------------------------------
   3. Surfaces
   -------------------------------------------------------------------------- */

.nbv-card {
    padding: 1.5rem;
    border: 1px solid var(--nbv-rule);
    border-radius: var(--nbv-radius-lg);
    background: var(--card-bg);
}

.nbv-card.is-quiet {
    background: var(--surface-muted);
}

.nbv-card.is-flat {
    border-radius: var(--nbv-radius);
    background: transparent;
}

.nbv-card-title {
    font-family: var(--nbv-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--text-primary);
}

.nbv-card-body {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    line-height: 1.62;
    font-size: 0.95rem;
}

.nbv-panel {
    border: 1px solid var(--nbv-rule);
    border-radius: var(--nbv-radius-lg);
    background: var(--card-bg);
    overflow: hidden;
}

.nbv-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--nbv-rule);
    background: var(--surface-muted);
}

.nbv-panel-body {
    padding: 1.25rem;
}

.nbv-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 720px) {
    .nbv-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nbv-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nbv-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1040px) {
    .nbv-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.nbv-divider {
    height: 1px;
    margin: 2rem 0;
    background: var(--nbv-rule);
    border: 0;
}

/* --------------------------------------------------------------------------
   4. Machine surface — code, payloads, terminal
   -------------------------------------------------------------------------- */

.nbv-machine {
    border-radius: var(--nbv-radius);
    background: var(--nbv-machine-bg);
    color: var(--nbv-machine-fg);
    font-family: var(--nbv-font-mono);
    font-size: 0.82rem;
    line-height: 1.75;
    overflow: hidden;
    border: 1px solid var(--nbv-machine-line);
}

.nbv-machine-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.95rem;
    border-bottom: 1px solid var(--nbv-machine-line);
    background: var(--nbv-machine-bg-soft);
    color: var(--nbv-machine-dim);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

.nbv-machine-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--nbv-branch);
    flex: none;
}

.nbv-machine pre,
.nbv-machine .nbv-machine-body {
    margin: 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    white-space: pre;
    tab-size: 2;
}

.nbv-machine .k { color: #8fb8e8; }
.nbv-machine .s { color: #9dd6b0; }
.nbv-machine .n { color: #e0c088; }
.nbv-machine .c { color: var(--nbv-machine-dim); font-style: italic; }
.nbv-machine .p { color: #6f8398; }

.nbv-inline-code {
    padding: 0.12em 0.42em;
    border-radius: 0.35rem;
    border: 1px solid var(--nbv-rule);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: var(--nbv-font-mono);
    font-size: 0.84em;
}

.nbv-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--nbv-machine-line);
    border-radius: 999px;
    background: transparent;
    color: var(--nbv-machine-dim);
    font-family: var(--nbv-font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.nbv-copy:hover {
    color: var(--nbv-machine-fg);
    border-color: var(--nbv-machine-fg);
}

/* --------------------------------------------------------------------------
   5. Controls
   -------------------------------------------------------------------------- */

.nbv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.78rem 1.25rem;
    border: 1px solid var(--nbv-rule);
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-primary) !important;
    font-family: var(--nbv-font-ui);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.nbv-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary) !important;
}

.nbv-btn--primary {
    border-color: transparent;
    background: var(--accent-color);
    color: #fff !important;
}

.nbv-btn--primary:hover {
    background: var(--accent-hover);
    color: #fff !important;
}

[data-theme="dark"] .nbv-btn--primary {
    color: #0d1620 !important;
}

[data-theme="dark"] .nbv-btn--primary:hover {
    color: #0d1620 !important;
}

.nbv-btn--branch {
    border-color: transparent;
    background: var(--nbv-branch);
    color: #fff !important;
}

[data-theme="dark"] .nbv-btn--branch {
    color: #0d1620 !important;
}

.nbv-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary) !important;
}

.nbv-btn--ghost:hover {
    background: var(--bg-tertiary);
}

.nbv-btn--danger {
    border-color: transparent;
    background: var(--nbv-danger);
    color: #fff !important;
}

.nbv-btn--sm {
    padding: 0.5rem 0.85rem;
    font-size: 0.84rem;
}

.nbv-btn--lg {
    padding: 0.95rem 1.6rem;
    font-size: 1rem;
}

.nbv-btn[disabled],
.nbv-btn.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.nbv-field {
    display: block;
    margin-bottom: 1.05rem;
}

.nbv-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
}

.nbv-help {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-tertiary);
    line-height: 1.5;
}

.nbv-error {
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--nbv-danger);
}

.nbv-input,
.nbv-field input[type="text"],
.nbv-field input[type="email"],
.nbv-field input[type="url"],
.nbv-field input[type="number"],
.nbv-field input[type="password"],
.nbv-field input[type="date"],
.nbv-field textarea,
.nbv-field select {
    width: 100%;
    padding: 0.72rem 0.95rem;
    border: 1px solid var(--nbv-rule);
    border-radius: var(--nbv-radius-sm);
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: var(--nbv-font-ui);
    font-size: 0.95rem;
    line-height: 1.5;
}

.nbv-input:focus,
.nbv-field input:focus,
.nbv-field textarea:focus,
.nbv-field select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.nbv-input::placeholder,
.nbv-field textarea::placeholder {
    color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   6. Meta bits: badges, scopes, methods, kbd
   -------------------------------------------------------------------------- */

.nbv-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.nbv-badge.is-accent { background: var(--accent-soft); color: var(--accent-color); }
.nbv-badge.is-branch { background: var(--nbv-branch-soft); color: var(--nbv-branch); }
.nbv-badge.is-warn { background: var(--nbv-warn-soft); color: var(--nbv-warn); }
.nbv-badge.is-danger { background: var(--nbv-danger-soft); color: var(--nbv-danger); }

.nbv-scope {
    display: inline-block;
    padding: 0.16rem 0.5rem;
    border: 1px solid var(--nbv-branch-line);
    border-radius: 0.35rem;
    background: var(--nbv-branch-soft);
    color: var(--nbv-branch);
    font-family: var(--nbv-font-mono);
    font-size: 0.74rem;
    white-space: nowrap;
}

.nbv-method {
    display: inline-block;
    min-width: 4.1rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    font-family: var(--nbv-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
    color: #fff;
}

.nbv-method.get { background: #2f6db0; }
.nbv-method.post { background: #3f7a5b; }
.nbv-method.put,
.nbv-method.patch { background: #98701d; }
.nbv-method.delete { background: #a33a3a; }

kbd.nbv-key {
    display: inline-block;
    padding: 0.14rem 0.42rem;
    border: 1px solid var(--nbv-rule);
    border-bottom-width: 2px;
    border-radius: 0.35rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-family: var(--nbv-font-mono);
    font-size: 0.74rem;
}

/* --------------------------------------------------------------------------
   7. Tables
   -------------------------------------------------------------------------- */

.nbv-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--nbv-rule);
    border-radius: var(--nbv-radius);
}

.nbv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.nbv-table th {
    padding: 0.7rem 0.95rem;
    border-bottom: 1px solid var(--nbv-rule);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.nbv-table td {
    padding: 0.72rem 0.95rem;
    border-bottom: 1px solid var(--nbv-rule);
    color: var(--text-primary);
    vertical-align: top;
}

.nbv-table tr:last-child td {
    border-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Long-form prose (legal, about, docs)
   -------------------------------------------------------------------------- */

.nbv-prose {
    max-width: var(--nbv-measure);
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.72;
}

.nbv-prose > * + * {
    margin-top: 1rem;
}

.nbv-prose h2 {
    margin-top: 2.6rem;
    font-family: var(--nbv-font-display);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--text-primary);
    scroll-margin-top: 6rem;
}

.nbv-prose h3 {
    margin-top: 1.8rem;
    font-family: var(--nbv-font-ui);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    scroll-margin-top: 6rem;
}

.nbv-prose ul,
.nbv-prose ol {
    padding-left: 1.35rem;
}

.nbv-prose ul { list-style: disc; }
.nbv-prose ol { list-style: decimal; }

.nbv-prose li + li {
    margin-top: 0.4rem;
}

.nbv-prose a {
    color: var(--accent-color);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.nbv-prose strong {
    color: var(--text-primary);
    font-weight: 700;
}

.nbv-prose code {
    padding: 0.12em 0.4em;
    border-radius: 0.32rem;
    background: var(--bg-tertiary);
    font-family: var(--nbv-font-mono);
    font-size: 0.85em;
}

.nbv-prose blockquote {
    padding-left: 1rem;
    border-left: 2px solid var(--nbv-branch-line);
    color: var(--text-tertiary);
}

.nbv-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.nbv-prose th,
.nbv-prose td {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--nbv-rule);
    text-align: left;
}

.nbv-prose th {
    background: var(--surface-muted);
    color: var(--text-primary);
}

/* Document layout: sticky table of contents beside the prose */
.nbv-doc {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 960px) {
    .nbv-doc {
        grid-template-columns: minmax(0, 1fr) 15rem;
    }

    .nbv-doc-aside {
        position: sticky;
        top: 6.5rem;
        order: 2;
    }
}

.nbv-toc a {
    display: block;
    padding: 0.28rem 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
    text-decoration: none;
}

.nbv-toc a:hover,
.nbv-toc a.is-active {
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   9. Page header used across app screens
   -------------------------------------------------------------------------- */

.nbv-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.8rem;
    border-bottom: 1px solid var(--nbv-rule);
}

.nbv-pagehead-title {
    font-family: var(--nbv-font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    color: var(--text-primary);
}

.nbv-pagehead-sub {
    margin-top: 0.4rem;
    max-width: 44rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.nbv-pagehead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.nbv-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.7rem;
    font-size: 0.82rem;
    color: var(--text-tertiary);
}

.nbv-crumbs a {
    color: var(--text-tertiary);
    text-decoration: none;
}

.nbv-crumbs a:hover {
    color: var(--accent-color);
}

.nbv-crumbs span[aria-hidden] {
    opacity: 0.5;
}

/* Empty states are an invitation to act, not an apology. */
.nbv-empty {
    padding: 3rem 1.5rem;
    border: 1px dashed var(--nbv-rule);
    border-radius: var(--nbv-radius-lg);
    text-align: center;
}

.nbv-empty-title {
    font-family: var(--nbv-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.nbv-empty-body {
    margin: 0.5rem auto 1.2rem;
    max-width: 32rem;
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Reference blocks for the API / MCP documentation
   -------------------------------------------------------------------------- */

.nbv-endpoint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.72rem 0.95rem;
    border-bottom: 1px solid var(--nbv-rule);
}

.nbv-endpoint:last-child {
    border-bottom: 0;
}

.nbv-endpoint-path {
    font-family: var(--nbv-font-mono);
    font-size: 0.84rem;
    color: var(--text-primary);
    word-break: break-all;
}

.nbv-endpoint-desc {
    flex: 1 1 16rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.nbv-tool {
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--nbv-rule);
    border-radius: var(--nbv-radius);
    background: var(--card-bg);
}

.nbv-tool-name {
    font-family: var(--nbv-font-mono);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-all;
}

.nbv-tool-desc {
    margin-top: 0.4rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
}

.nbv-tool-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.65rem;
}

/* --------------------------------------------------------------------------
   11. Accessibility + motion
   -------------------------------------------------------------------------- */

.nbv-page :is(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: 0.35rem;
}

.nbv-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.7rem 1rem;
    border-radius: 0 0 var(--nbv-radius) 0;
    background: var(--accent-color);
    color: #fff;
    font-weight: 700;
}

.nbv-skip:focus {
    left: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   12. Legacy repair
   -------------------------------------------------------------------------- */
/* Many older templates hardcode Tailwind v2 greys, which break the dark and
   gray themes. Map the handful that actually appear onto theme tokens so every
   screen stays readable without rewriting each template's markup. */

[data-theme="dark"] .bg-white,
[data-theme="gray"] .bg-white {
    background-color: var(--card-bg) !important;
}

[data-theme="dark"] :is(.bg-gray-50, .bg-gray-100),
[data-theme="gray"] :is(.bg-gray-50, .bg-gray-100) {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] :is(.text-gray-900, .text-gray-800, .text-black),
[data-theme="gray"] :is(.text-gray-900, .text-gray-800, .text-black) {
    color: var(--text-primary) !important;
}

[data-theme="dark"] :is(.text-gray-700, .text-gray-600),
[data-theme="gray"] :is(.text-gray-700, .text-gray-600) {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] :is(.text-gray-500, .text-gray-400),
[data-theme="gray"] :is(.text-gray-500, .text-gray-400) {
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] :is(.border-gray-100, .border-gray-200, .border-gray-300),
[data-theme="gray"] :is(.border-gray-100, .border-gray-200, .border-gray-300) {
    border-color: var(--border-color) !important;
}

/* --------------------------------------------------------------------------
   13. Sitemap footer
   -------------------------------------------------------------------------- */

.app-footer-map {
    display: grid;
    gap: 2rem 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .app-footer-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .app-footer-map { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
}

.app-footer-intro {
    max-width: 26rem;
}

.app-footer-brand {
    font-family: var(--nbv-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.app-footer-copy {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.6;
}

.app-footer-cta {
    display: inline-block;
    margin-top: 0.9rem;
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-soft);
    padding-bottom: 0.1rem;
}

.app-footer-cta:hover {
    border-bottom-color: var(--accent-color);
}

.app-footer-heading {
    margin-bottom: 0.55rem;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.app-footer-col a {
    display: block;
    padding: 0.22rem 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.5;
    text-decoration: none;
}

.app-footer-col a:hover {
    color: var(--accent-color);
}

.app-footer-bottom a {
    color: var(--text-tertiary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.app-footer-bottom a:hover {
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   14. Note tree preview
   The product's own data structure, drawn honestly: indentation guides and
   elbow connectors, the same shape the app renders.
   -------------------------------------------------------------------------- */

.nbv-tree {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    line-height: 1.5;
}

.nbv-tree ul {
    margin: 0;
    padding: 0 0 0 1.05rem;
    list-style: none;
    position: relative;
}

.nbv-tree ul::before {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 0;
    bottom: 0.72rem;
    width: 1px;
    background: var(--nbv-branch-line);
}

.nbv-tree li {
    position: relative;
    padding: 0.24rem 0;
}

.nbv-tree ul > li::before {
    content: "";
    position: absolute;
    left: -0.77rem;
    top: 0.95rem;
    width: 0.62rem;
    height: 1px;
    background: var(--nbv-branch-line);
}

.nbv-tree-node {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    max-width: 100%;
}

.nbv-tree-label {
    color: var(--text-primary);
    font-weight: 600;
}

.nbv-tree-root > .nbv-tree-node .nbv-tree-label {
    font-family: var(--nbv-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.nbv-tree-meta {
    color: var(--text-tertiary);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
}

.nbv-tree-tag {
    padding: 0.05rem 0.4rem;
    border-radius: 0.3rem;
    background: var(--nbv-branch-soft);
    color: var(--nbv-branch);
    font-family: var(--nbv-font-mono);
    font-size: 0.68rem;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15. Ambient wash
   themes.css paints a fixed gradient band behind the page. Clipping it at a
   hard edge leaves a visible seam across every long page, so fade it out.
   -------------------------------------------------------------------------- */

body::before {
    height: 34rem;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
}

/* --------------------------------------------------------------------------
   16. Shell adjustments
   -------------------------------------------------------------------------- */

.app-container,
.app-main {
    width: min(1280px, calc(100% - 2rem));
}

.app-nav-frame {
    gap: 0.75rem;
}

.app-nav-brand-mark {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
}

.app-nav-brand-name {
    font-size: 1.24rem;
}

.app-nav-brand-subtitle {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav-link {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

.app-auth-link {
    padding: 0.62rem 0.9rem;
    white-space: nowrap;
}

.app-nav-search {
    width: min(14rem, 100%);
}

.app-nav-search input {
    padding: 0.65rem 2.4rem 0.65rem 0.9rem;
}

/* --------------------------------------------------------------------------
   17. Legacy Tailwind harmonisation
   Several screens predate the design system and are built from Tailwind v2
   utilities with hard-coded greys, indigo accents and drop shadows. Rather
   than rewriting that markup, map the utilities that carry visual identity
   onto the theme so those screens read as part of the same product.
   -------------------------------------------------------------------------- */

.nbv-page .bg-white,
.nbv-page .bg-white\/80,
.nbv-page .bg-white\/90 {
    background-color: var(--card-bg) !important;
}

.nbv-page :is(.bg-gray-50, .bg-gray-100, .bg-slate-50) {
    background-color: var(--surface-muted) !important;
}

.nbv-page :is(.text-gray-900, .text-gray-800, .text-black) { color: var(--text-primary) !important; }
.nbv-page :is(.text-gray-700, .text-gray-600) { color: var(--text-secondary) !important; }
.nbv-page :is(.text-gray-500, .text-gray-400) { color: var(--text-tertiary) !important; }

.nbv-page :is(.border, .border-gray-100, .border-gray-200, .border-gray-300, .border-blue-100, .border-indigo-100) {
    border-color: var(--border-color) !important;
}

/* Drop shadows read as a different era; a hairline does the same job. */
.nbv-page :is(.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl) {
    box-shadow: none !important;
    border: 1px solid var(--border-color);
}

.nbv-page :is(.rounded, .rounded-md, .rounded-lg) { border-radius: var(--nbv-radius-sm) !important; }
.nbv-page :is(.rounded-xl, .rounded-2xl) { border-radius: var(--nbv-radius) !important; }
.nbv-page .rounded-3xl { border-radius: var(--nbv-radius-lg) !important; }

/* Indigo/blue accents -> the theme accent, so one colour leads on every page. */
.nbv-page :is(.bg-indigo-600, .bg-indigo-500, .bg-blue-600, .bg-blue-500, .bg-slate-900) {
    background-color: var(--accent-color) !important;
    color: #fff !important;
}

.nbv-page :is(.hover\:bg-indigo-700:hover, .hover\:bg-indigo-500:hover, .hover\:bg-blue-700:hover, .hover\:bg-slate-800:hover) {
    background-color: var(--accent-hover) !important;
}

.nbv-page :is(.text-indigo-600, .text-indigo-700, .text-indigo-500, .text-blue-600, .text-blue-700) {
    color: var(--accent-color) !important;
}

.nbv-page :is(.bg-indigo-50, .bg-blue-50, .bg-blue-50\/40) {
    background-color: var(--accent-soft) !important;
}

.nbv-page :is(.bg-green-50, .bg-emerald-50) { background-color: var(--nbv-branch-soft) !important; }
.nbv-page :is(.text-green-800, .text-green-700, .text-emerald-700) { color: var(--nbv-branch) !important; }
.nbv-page :is(.bg-yellow-50, .bg-amber-50, .bg-orange-50) { background-color: var(--nbv-warn-soft) !important; }
.nbv-page :is(.text-yellow-800, .text-amber-800, .text-orange-800) { color: var(--nbv-warn) !important; }
.nbv-page :is(.bg-red-50, .bg-rose-50) { background-color: var(--nbv-danger-soft) !important; }
.nbv-page :is(.text-red-800, .text-red-600, .text-rose-600) { color: var(--nbv-danger) !important; }
.nbv-page :is(.bg-red-600, .bg-rose-600) { background-color: var(--nbv-danger) !important; color: #fff !important; }
.nbv-page :is(.bg-gray-500, .bg-gray-200) { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; }

/* Headings inside legacy screens pick up the display face. Colour is left
   alone: some of these headings sit on deliberately dark hero panels. */
.nbv-page :is(h1, h2, h3):not([class*="nbv-"]):not(.branch-panel-title) {
    font-family: var(--nbv-font-display);
    letter-spacing: -0.028em;
}

/* Panels that opt into a dark treatment keep light text throughout. */
.nbv-page .text-white,
.nbv-page .text-white :is(h1, h2, h3, p, span, li, dt, dd) {
    color: #f1f5f9;
}

/* Inputs and selects, wherever they come from. */
.nbv-page :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"],
              input[type="password"], input[type="date"], input[type="datetime-local"],
              input[type="search"], textarea, select) {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Hide the wordmark tagline once the nav gets busy rather than truncating it. */
@media (max-width: 1320px) {
    .app-nav-brand-subtitle { display: none; }
}

/* Accents that sit on dark panels stay light. */
.nbv-page :is(.text-emerald-300, .text-emerald-200, .text-blue-100, .text-blue-200, .text-indigo-200) {
    color: var(--nbv-branch) !important;
}

.nbv-page .text-white :is(.text-emerald-300, .text-emerald-200, .text-blue-100, .text-blue-200, .text-indigo-200) {
    color: #9dd6b0 !important;
}

/* --------------------------------------------------------------------------
   18. Utilities the loaded Tailwind build does not ship
   Several screens were written against a newer Tailwind than the CDN build in
   base.html, so their `slate-*` and `sky-*` utilities silently did nothing —
   which left white text on white panels. Define the ones actually used, mapped
   onto the theme so they behave in every theme.
   -------------------------------------------------------------------------- */

.nbv-page :is(.bg-slate-950, .bg-slate-900, .bg-slate-800) {
    background-color: var(--nbv-machine-bg) !important;
    color: var(--nbv-machine-fg);
}

.nbv-page :is(.bg-slate-100) { background-color: var(--bg-tertiary) !important; }
.nbv-page :is(.bg-slate-50) { background-color: var(--surface-muted) !important; }

.nbv-page :is(.text-slate-900, .text-slate-800) { color: var(--text-primary); }
.nbv-page :is(.text-slate-700, .text-slate-600) { color: var(--text-secondary); }
.nbv-page :is(.text-slate-500, .text-slate-400) { color: var(--text-tertiary); }
.nbv-page :is(.text-slate-300, .text-slate-200) { color: var(--nbv-machine-dim); }

.nbv-page :is(.border-slate-200, .border-slate-300) { border-color: var(--border-color); }
.nbv-page .ring-slate-900 { --tw-ring-color: var(--text-primary); }

.nbv-page :is(.text-sky-700, .text-sky-600) { color: var(--accent-color); }
.nbv-page .border-sky-500 { border-color: var(--accent-color); }
.nbv-page .bg-sky-500 { background-color: var(--accent-color) !important; color: #fff; }

/* Text on a deliberately dark panel wins over the slate text mappings. */
.nbv-page :is(.bg-slate-950, .bg-slate-900, .bg-slate-800) :is(.text-slate-900, .text-slate-800) {
    color: var(--nbv-machine-fg);
}

/* --------------------------------------------------------------------------
   19. Small screens
   Wide content scrolls inside its own container; the page itself never does.
   -------------------------------------------------------------------------- */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.nbv-machine,
.nbv-table-wrap,
.md-content pre {
    max-width: 100%;
}

@media (max-width: 640px) {
    .app-container,
    .app-main {
        width: calc(100% - 1.5rem);
    }

    .nbv-machine {
        font-size: 0.76rem;
    }

    .nbv-pagehead {
        align-items: flex-start;
    }

    .nbv-pagehead-actions .nbv-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   20. Pixel theme
   pixel-theme.css defines its own `--px-*` palette but never remapped the base
   tokens, so anything built on the design system rendered with light-theme
   colours on the pixel theme's dark ground. Map them here.
   -------------------------------------------------------------------------- */

[data-theme="pixel"] {
    --bg-primary: #0f1b2d;
    --bg-secondary: #162544;
    --bg-tertiary: #1d3461;
    --surface-muted: rgba(22, 37, 68, 0.92);
    --text-primary: #f5ead0;
    --text-secondary: #e8dcc0;
    --text-tertiary: #b8a88a;
    --border-color: #1a1a3e;
    --accent-color: #e2a842;
    --accent-hover: #f0c866;
    --accent-soft: rgba(226, 168, 66, 0.16);
    --card-bg: rgba(29, 52, 97, 0.9);
    --input-bg: rgba(15, 27, 45, 0.9);

    --nbv-branch: #4ecdc4;
    --nbv-branch-soft: rgba(78, 205, 196, 0.16);
    --nbv-branch-line: rgba(78, 205, 196, 0.34);
    --nbv-warn: #f0c866;
    --nbv-warn-soft: rgba(240, 200, 102, 0.16);
    --nbv-danger: #e07a7a;
    --nbv-danger-soft: rgba(224, 122, 122, 0.16);

    --nbv-machine-bg: #0a0e1a;
    --nbv-machine-bg-soft: #121a34;
    --nbv-machine-fg: #f5ead0;
    --nbv-machine-dim: #b8a88a;
    --nbv-machine-line: rgba(226, 168, 66, 0.24);

    --nbv-paper-rgb: 29, 52, 97;
    --nbv-accent-rgb: 226, 168, 66;
    --nbv-shadow-rgb: 5, 5, 18;
}

[data-theme="pixel"] .nbv-btn--primary,
[data-theme="pixel"] .nbv-btn--branch {
    color: #0f1b2d !important;
}