/* IDE shell — Cursor-like layout for nfs.ninja home */

:root {
    --ide-bg: #0d0d0d;
    --ide-panel: #141414;
    --ide-panel-2: #1a1a1a;
    --ide-border: #2a2a2a;
    --ide-text: #d4d4d4;
    --ide-muted: #6e6e6e;
    --ide-accent: #00d4ff;
    --ide-gold: #ffb800;
    /* Footer strip: near body bg (not cyan / not VS Code blue) */
    --ide-status: #101010;
    --ide-status-text: var(--ide-muted);
    --ide-mono: "JetBrains Mono", Menlo, Consolas, Monaco, monospace;
    --ide-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ide-menu-h: 36px;
    --ide-tabs-h: 36px;
    --ide-status-h: 28px;
    --ide-explorer-w: 260px;
    --ide-graph-w: 300px;
    /*
     * Reading type scale (post/page). Source html is 62.5% so 1rem ≈ 10px.
     * Body was incorrectly set to ~1.02rem (~10px); floor is Source-like 1.7rem+.
     */
    --ide-read-body: 1.8rem;       /* ~18px */
    --ide-read-title: 3.2rem;      /* ~32px */
    --ide-read-excerpt: 1.55rem;   /* ~15.5px */
    --ide-read-meta: 1.3rem;       /* ~13px */
    --ide-read-line: 1.7;
    --ide-read-measure: 76rem;     /* ~760px (html 62.5% → 1rem≈10px); comfortable for ~18px body */
}

/*
 * Viewport-locked IDE chrome: left/right rails stay put; only center scrolls.
 * min-height alone lets long articles grow the document and drag the rails.
 */
html:has(body.is-ide-shell) {
    height: 100%;
    overflow: hidden;
}

/* Home: full-viewport IDE, hide Source chrome */
body.is-ide-home {
    background: var(--ide-bg);
    color: var(--ide-text);
    margin: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

body.is-ide-home .gh-viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

body.is-ide-home > .gh-viewport > .gh-navigation,
body.is-ide-home > .gh-viewport > .gh-footer {
    display: none !important;
}

.ide-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: var(--ide-bg);
    color: var(--ide-text);
    font-family: var(--ide-mono);
    font-size: 13px;
    line-height: 1.45;
}

/* Three columns full height under (optional) status: explorer | feed | right rail */
.ide-shell__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.ide-shell__workspace {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden; /* list/read scroll lives in .ide-feed / .ide-workspace-panels */
    background: var(--ide-bg);
}

/* Right column: search on top, graph fills rest — full height of body */
.ide-shell__right {
    flex: 0 0 var(--ide-graph-w);
    width: var(--ide-graph-w);
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--ide-border);
    background: var(--ide-panel);
    align-self: stretch;
}

/* ——— Left rail: brand + explorer + user ——— */
.ide-explorer {
    flex: 0 0 var(--ide-explorer-w);
    width: var(--ide-explorer-w);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ide-border);
    background: var(--ide-panel);
    min-height: 0;
    align-self: stretch;
}

.ide-brand {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 0 0 auto;
    padding: 14px 14px 12px;
    text-decoration: none;
    color: var(--ide-text);
    border-bottom: 1px solid var(--ide-border);
}

.ide-brand:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ide-brand__logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    flex: 0 0 auto;
    display: block;
    margin-top: 1px;
}

.ide-brand__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.ide-brand__name {
    font-family: var(--ide-sans);
    font-size: 14px;
    font-weight: 600;
    color: #f0f0f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-brand__desc {
    font-size: 11px;
    color: var(--ide-muted);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Primary navigation buttons (above tag folders) */
.ide-explorer-nav {
    flex: 0 0 auto;
    padding: 8px 8px 10px;
    border-bottom: 1px solid var(--ide-border);
}

.ide-explorer-nav .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ide-explorer-nav .nav li {
    margin: 0;
}

.ide-explorer-nav .nav a {
    display: block;
    padding: 7px 10px;
    border-radius: 4px;
    border: 1px solid var(--ide-border);
    background: var(--ide-panel-2, #1e1e1e);
    color: var(--ide-text);
    font-family: var(--ide-mono);
    font-size: 12px;
    text-decoration: none;
    line-height: 1.3;
}

.ide-explorer-nav .nav a:hover {
    border-color: var(--ide-accent);
    color: var(--ide-accent);
}

.ide-explorer-nav .nav li.nav-current a,
.ide-explorer-nav .nav a[aria-current="page"],
.ide-shell[data-ide-route="brain"] .ide-explorer-nav .nav-brain a,
.ide-shell[data-ide-route="brain"] .ide-explorer-nav a[data-ide-nav="brain"] {
    border-color: var(--ide-accent);
    color: var(--ide-accent);
    background: rgba(0, 212, 255, 0.08);
}

.ide-explorer__header {
    flex: 0 0 auto;
    padding: 10px 14px 6px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ide-muted);
}

.ide-explorer__tree {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0 0 12px;
    min-height: 0;
}

.ide-explorer__folder {
    margin: 0;
}

.ide-explorer__folder-name {
    list-style: none;
    cursor: pointer;
    padding: 5px 14px;
    color: var(--ide-text);
    user-select: none;
}

.ide-explorer__folder-name::-webkit-details-marker { display: none; }

.ide-explorer__folder-name:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ide-explorer__chev::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--ide-muted);
    transition: transform 0.1s;
}

details[open] > .ide-explorer__folder-name .ide-explorer__chev::before {
    transform: rotate(90deg);
}

.ide-explorer__files {
    list-style: none;
    margin: 0;
    padding: 0 0 4px 0;
}

.ide-explorer__file {
    display: block;
    padding: 3px 14px 3px 28px;
    color: var(--ide-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-explorer__file:hover {
    color: var(--ide-text);
    background: rgba(0, 120, 212, 0.15);
}

.ide-explorer__empty {
    padding: 12px 14px;
    color: var(--ide-muted);
    font-size: 12px;
}

/* Content density heatmap (explorer footer — PRs → published) */
.ide-github {
    flex: 0 0 auto;
    max-height: 32%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ide-border);
    min-height: 0;
    background: var(--ide-panel);
}

.ide-github__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--ide-border);
}

.ide-github__title {
    color: var(--ide-muted);
    font-weight: 600;
}

.ide-github__user {
    color: var(--ide-accent);
    text-decoration: none;
    letter-spacing: 0;
    font-size: 11px;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

.ide-github__user:hover {
    text-decoration: underline;
}

.ide-github__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 8px 10px 10px;
}

.ide-github__density {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ide-github__grid {
    --ide-density-weeks: 13;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(7, 9px);
    grid-auto-columns: 9px;
    gap: 2px;
    width: max-content;
    max-width: 100%;
}

.ide-github__cell {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
}

.ide-github__cell.level-0 { background: rgba(255, 255, 255, 0.06); }
.ide-github__cell.level-1 { background: rgba(46, 160, 67, 0.35); }
.ide-github__cell.level-2 { background: rgba(46, 160, 67, 0.55); }
.ide-github__cell.level-3 { background: rgba(46, 160, 67, 0.78); }
.ide-github__cell.level-4 { background: rgba(57, 211, 83, 0.95); }

.ide-github__legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    color: var(--ide-muted);
    font-family: var(--ide-mono);
}

.ide-github__summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ide-github__scale {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
}

.ide-github__empty {
    margin: 0;
    padding: 4px 0;
    color: var(--ide-muted);
    font-size: 11px;
    font-family: var(--ide-mono);
}

/* Cursor / VS Code–style account strip (lower-left explorer) */
.ide-user {
    flex: 0 0 auto;
    border-top: 1px solid var(--ide-border);
    padding: 8px 8px 10px;
    background: var(--ide-panel);
}

.ide-user__guest {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ide-user__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--ide-text);
    transition: background 0.12s ease;
}

a.ide-user__row:hover {
    background: var(--ide-panel-2, rgba(255, 255, 255, 0.04));
}

a.ide-user__row:focus-visible {
    outline: 1px solid var(--ide-accent, #00d4ff);
    outline-offset: 1px;
}

.ide-user__row--inert {
    cursor: default;
    opacity: 0.9;
}

.ide-user__action {
    display: block;
    margin: 0 8px 0 46px;
    padding: 2px 0 4px;
    font-family: var(--ide-mono);
    font-size: 11px;
    color: var(--ide-accent, #00d4ff);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.ide-user__action:hover {
    text-decoration: underline;
}

.ide-user__action:focus-visible {
    outline: 1px solid var(--ide-accent, #00d4ff);
    outline-offset: 2px;
}

.ide-user__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--ide-panel-2, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--ide-border);
    box-sizing: border-box;
}

/* Single-letter chip: hide rest of name/email via first-letter */
.ide-user__avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    color: var(--ide-text);
    background: linear-gradient(
        145deg,
        rgba(0, 212, 255, 0.22),
        rgba(255, 184, 0, 0.12)
    );
    border-color: rgba(0, 212, 255, 0.25);
}

.ide-user__avatar--initial::first-letter {
    font-family: var(--ide-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.ide-user__avatar--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ide-muted);
}

.ide-user__meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.ide-user__name {
    font-family: var(--ide-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-user__sub {
    font-family: var(--ide-mono);
    font-size: 10px;
    line-height: 1.3;
    color: var(--ide-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-user__chev {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-right: 2px;
    border-right: 1.5px solid var(--ide-muted);
    border-bottom: 1.5px solid var(--ide-muted);
    transform: rotate(-45deg);
    opacity: 0.65;
}

a.ide-user__row:hover .ide-user__chev {
    opacity: 1;
    border-color: var(--ide-accent, #00d4ff);
}

/* ——— Search (right column top) ——— */
.ide-shell__right > .ide-search {
    flex: 0 0 auto;
    padding: 12px;
    border-bottom: 1px solid var(--ide-border);
}

.ide-search__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 8px 10px;
    border: 1px solid var(--ide-border);
    border-radius: 8px;
    background: var(--ide-bg);
    color: var(--ide-muted);
    font: inherit;
    cursor: pointer;
}

.ide-search__btn:hover {
    border-color: #444;
    color: var(--ide-text);
}

.ide-search__placeholder {
    flex: 1;
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-search__kbd {
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid var(--ide-border);
    border-radius: 3px;
    color: var(--ide-muted);
    flex: 0 0 auto;
}

/* ——— Feed (center) ——— */
.ide-feed {
    flex: 1 1 auto;
    overflow: auto;
    background: var(--ide-bg);
    min-height: 0;
}

.ide-feed-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ide-border);
}

.ide-feed-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

.ide-feed-card__index {
    color: var(--ide-muted);
    font-size: 12px;
    padding-top: 4px;
}

.ide-feed-card__title {
    margin: 4px 0;
    font-family: var(--ide-sans);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
}

.ide-feed-card__title a {
    color: #f0f0f0;
    text-decoration: none;
}

.ide-feed-card__title a:hover {
    color: var(--ide-accent);
}

.ide-feed-card__excerpt {
    margin: 4px 0 8px;
    color: var(--ide-muted);
    font-size: 12px;
}

.ide-feed-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ide-feed-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ide-chip {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10px;
    text-decoration: none;
    color: #111;
    background: #4fc3f7;
}

.ide-chip:nth-child(2n) { background: #ffb74d; }
.ide-chip:nth-child(3n) { background: #81c784; }
.ide-chip:nth-child(4n) { background: #ba68c8; }
.ide-chip:nth-child(5n) { background: #4db6ac; }

.ide-feed-card__cat .ide-chip {
    background: transparent;
    color: var(--chip-h, #4fc3f7);
    padding: 0;
    font-size: 11px;
}

.ide-feed-card__cat .ide-chip.has-accent {
    color: var(--chip-h, #4fc3f7);
}

.ide-feed-card__stats {
    display: flex;
    gap: 10px;
    color: var(--ide-muted);
    font-size: 11px;
}

.ide-feed__empty {
    padding: 24px 20px;
    color: var(--ide-muted);
    font-size: 12px;
}

/* ——— Graph (right column below search) ——— */
.ide-graph {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.ide-graph__header {
    flex: 0 0 auto;
    padding: 10px 12px;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ide-muted);
    border-bottom: 1px solid var(--ide-border);
}

.ide-graph__canvas {
    flex: 1 1 auto;
    overflow: auto;
    padding: 12px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.ide-graph__viz {
    flex: 0 0 auto;
    width: 100%;
    min-height: 160px;
}

.ide-graph__svg {
    width: 100%;
    height: auto;
    max-height: 280px;
    display: block;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    touch-action: none;
}

.ide-graph__node-g.is-current circle {
    filter: drop-shadow(0 0 4px rgba(79, 195, 247, 0.7));
}

.ide-graph__legend {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    font-size: 11px;
    color: var(--ide-muted);
}

.ide-graph__legend li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.ide-graph__legend a {
    color: var(--ide-text);
    text-decoration: none;
}

.ide-graph__swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #81c784;
    flex: 0 0 auto;
}

.ide-graph__swatch.is-current { background: #4fc3f7; }
.ide-graph__swatch.is-page {
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9);
}
.ide-graph__legend-section {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ide-graph__node.is-page {
    /* SVG stroke set in JS; keep class for tests */
}

.ide-graph__empty {
    padding: 8px 0;
    color: var(--ide-muted);
    font-size: 12px;
}

.ide-graph__empty--inline {
    padding: 4px 0 0;
    font-size: 11px;
}

.ide-graph__meta {
    color: var(--ide-muted);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 6px !important;
}

.ide-graph__label {
    pointer-events: none;
    user-select: none;
}

/* ——— 8d Brain page: full-center graph ——— */
.ide-shell__workspace--brain {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.ide-graph--brain {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    border: none;
}

.ide-graph--brain .ide-graph__header {
    color: var(--ide-accent, #ffb800);
    letter-spacing: 0.08em;
}

.ide-graph--brain .ide-graph__canvas {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 16px 20px;
}

.ide-graph--brain .ide-graph__viz {
    flex: 1 1 auto;
    min-height: 420px;
    height: 100%;
}

.ide-graph--brain .ide-graph__svg {
    max-height: none;
    height: 100%;
    min-height: 420px;
    background: radial-gradient(ellipse at center, rgba(0, 40, 60, 0.35) 0%, rgba(0, 0, 0, 0.25) 70%);
}

.ide-graph--brain .ide-graph__legend {
    flex: 0 0 auto;
    margin-top: 8px;
    max-height: 28%;
    overflow: auto;
}

/* Optional Brain context strip (right rail; not a second graph) */
.ide-brain-context {
    flex: 0 0 auto;
    margin-top: 12px;
    padding: 12px;
    border-top: 1px solid var(--ide-border);
    font-size: 12px;
    color: var(--ide-muted);
}

.ide-brain-context__title {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ide-text);
    margin-bottom: 6px;
}

.ide-brain-context__hint {
    margin: 0;
    font-size: 11px;
    color: var(--ide-muted);
}

/* Copyright footer (body-near; not IDE status chrome) */
.ide-status,
.ide-status--footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--ide-status-h);
    min-height: var(--ide-status-h);
    padding: 0 14px;
    background: var(--ide-status);
    color: var(--ide-status-text);
    font-family: var(--ide-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    border-top: 1px solid var(--ide-border);
    z-index: 5;
}

.ide-status__copy {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35em 0.5em;
    text-align: center;
    line-height: 1.3;
    color: inherit;
}

.ide-status__mark,
.ide-status__rights {
    color: var(--ide-muted);
}

.ide-status__sep {
    color: var(--ide-border);
    user-select: none;
}

.ide-status__site {
    color: var(--ide-muted);
    text-decoration: none;
}

.ide-status__site:hover {
    color: var(--ide-text);
    text-decoration: underline;
}

.ide-status__site:focus-visible {
    outline: 1px solid var(--ide-accent);
    outline-offset: 2px;
}

/* Reading mode (posts/pages) — keep compact chrome */
body.is-ide-reading {
    background: var(--ide-bg);
    color: var(--ide-text);
}

body.is-ide-reading .gh-navigation,
body.is-ide-reading .gh-footer {
    display: none !important;
}

.ide-reading {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--ide-bg);
    font-family: var(--ide-mono);
}

.ide-reading-top {
    background: var(--ide-panel);
    border-bottom: 1px solid var(--ide-border);
}

.ide-shell__top-row {
    display: flex;
    align-items: center;
    min-height: var(--ide-tabs-h);
    border-bottom: 1px solid var(--ide-border);
    background: var(--ide-panel);
}

.ide-shell__top-row--compact {
    border-bottom: 1px solid var(--ide-border);
}

.ide-menu {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--ide-menu-h);
    padding: 0 12px;
    font-size: 12px;
    border-bottom: 1px solid var(--ide-border);
    background: var(--ide-panel);
}

.ide-menu__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
    text-decoration: none;
}

.ide-menu__logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    display: block;
}

.ide-menu__logo-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--ide-accent);
}

.ide-menu__items {
    display: flex;
    gap: 14px;
}

.ide-menu__items a,
.ide-menu__items span {
    color: var(--ide-text);
    text-decoration: none;
}

.ide-menu__muted { color: var(--ide-muted); }

.ide-menu .ide-search {
    margin-left: auto;
    padding: 0;
}

.ide-menu .ide-search__btn {
    width: auto;
    min-width: 200px;
}

.ide-tabs,
.ide-workspace-tabs {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    overflow-x: auto;
    background: var(--ide-panel-2, #1e1e1e);
    border-bottom: 1px solid var(--ide-border);
}

.ide-workspace-tabs:empty {
    display: none;
}

.ide-shell__workspace--reading {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Single scrollport = .ide-workspace-panels (not this wrapper) */
    overflow: hidden;
    gap: 0;
    padding: 0;
}

.ide-workspace-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    position: relative;
}

.ide-workspace-panel {
    display: none;
    flex-direction: column;
    min-height: 100%;
}

.ide-workspace-panel.is-active {
    display: flex;
}

.ide-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 0 14px;
    height: var(--ide-tabs-h);
    color: var(--ide-muted);
    text-decoration: none;
    border: none;
    border-right: 1px solid var(--ide-border);
    white-space: nowrap;
    font-size: 12px;
    font-family: inherit;
    background: transparent;
    cursor: pointer;
}

.ide-tabs__tab:hover {
    color: var(--ide-text);
    background: var(--ide-panel-2);
}

.ide-tabs__tab.is-active {
    color: var(--ide-text);
    background: var(--ide-bg);
    border-top: 2px solid var(--ide-accent);
}

.ide-tabs__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4fc3f7;
    flex-shrink: 0;
}

.ide-tabs__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    border-radius: 3px;
    color: var(--ide-muted);
    font-size: 14px;
    line-height: 1;
    opacity: 0.7;
}

.ide-tabs__tab:hover .ide-tabs__close,
.ide-tabs__tab.is-active .ide-tabs__close {
    opacity: 1;
}

.ide-tabs__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ide-text);
}

.ide-reading__main {
    flex: 1;
    padding: 32px 24px 48px;
    max-width: 760px;
    margin: 0 auto;
    width: 100%;
    font-family: var(--ide-sans);
    color: var(--ide-text);
}

.ide-reading__main .gh-article-title {
    color: #f5f5f5;
    font-size: var(--ide-read-title);
    line-height: 1.2;
}

.ide-reading__main .gh-content {
    color: #d0d0d0;
    font-size: var(--ide-read-body);
    line-height: var(--ide-read-line);
}

.ide-reading__main .gh-content a {
    color: var(--ide-accent);
}

.ide-reading .ide-status {
    margin-top: auto;
}

/* Multi-route shell: reading workspace + archives */
body.is-ide-shell {
    background: var(--ide-bg);
    color: var(--ide-text);
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    margin: 0;
}

body.is-ide-shell .gh-viewport {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.is-ide-shell .gh-navigation,
body.is-ide-shell .gh-footer {
    display: none !important;
}

.ide-article {
    flex: 1 1 auto;
    padding: 32px 36px 24px;
    max-width: min(var(--ide-read-measure), 100%);
    width: 100%;
    margin: 0 auto;
    font-family: var(--ide-sans);
    font-size: var(--ide-read-body);
    color: var(--ide-text);
    -webkit-font-smoothing: antialiased;
}

/* KaTeX / math (Obsidian $ / $$ via content-markdown + ide-math.js) */
.ide-article .math-inline,
.ide-article .math.math-inline {
    display: inline;
    padding: 0 0.1em;
}

.ide-article .math-display,
.ide-article .math.math-display {
    display: block;
    margin: 1.25em 0;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
    padding: 0.5em 0;
}

.ide-article .katex {
    font-size: 1.05em;
    color: var(--ide-text);
}

.ide-article .katex-display {
    margin: 0.75em 0;
}

.ide-article .katex-error {
    color: #f87171;
}

.ide-article__header {
    margin-bottom: 1.5rem;
}

.ide-article__meta {
    margin: 12px 0;
    color: var(--ide-muted);
    font-size: var(--ide-read-meta);
    font-family: var(--ide-mono);
    line-height: 1.45;
}

.ide-article .gh-article-title {
    color: #f5f5f5;
    font-size: var(--ide-read-title);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0.45rem 0 0.75rem;
}

.ide-article .gh-article-excerpt {
    color: var(--ide-muted);
    font-family: var(--ide-sans);
    font-size: var(--ide-read-excerpt);
    line-height: 1.5;
}

.ide-article .gh-article-tag {
    font-size: var(--ide-read-meta);
}

/* Body: restore Source-scale type (do not use shell chrome 13px rem) */
.ide-article .gh-content {
    color: #d0d0d0;
    font-size: var(--ide-read-body);
    line-height: var(--ide-read-line);
    letter-spacing: -0.01em;
}

.ide-article .gh-content a {
    color: var(--ide-accent);
}

.ide-article .gh-content strong,
.ide-article .gh-content b {
    color: var(--ide-accent);
    font-weight: 600;
}

.ide-article .gh-content h1,
.ide-article .gh-content h2,
.ide-article .gh-content h3,
.ide-article .gh-content h4 {
    color: #eee;
    scroll-margin-top: 1rem;
    line-height: 1.25;
}

.ide-article .gh-content h2 {
    font-size: 1.45em;
    margin-top: 1.6em;
}

.ide-article .gh-content h3 {
    font-size: 1.2em;
    margin-top: 1.35em;
}

.ide-article .gh-content p,
.ide-article .gh-content li {
    font-size: inherit;
    line-height: inherit;
}

.ide-article .gh-content li + li {
    margin-top: 0.35em;
}

/* ——— Inline mono / code ——— */
.ide-article .gh-content code,
.ide-article .gh-content kbd {
    font-family: var(--ide-mono);
    font-size: 0.88em;
    color: #e8c07a;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.18);
    border-radius: 4px;
    padding: 0.12em 0.4em;
}

.ide-article .gh-content kbd {
    color: #c8e6c9;
    border-color: rgba(129, 199, 132, 0.35);
    background: rgba(129, 199, 132, 0.08);
}

/* Fenced blocks: IDE terminal panel look */
.ide-article .gh-content pre,
.ide-article .gh-content pre.ide-code-block {
    margin: 1.25em 0;
    padding: 14px 16px;
    overflow-x: auto;
    font-size: 0.86em;
    line-height: 1.55;
    background: #0b0f12;
    border: 1px solid var(--ide-border);
    border-left: 3px solid var(--ide-accent);
    border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ide-article .gh-content pre code,
.ide-article .gh-content pre code.hljs {
    display: block;
    padding: 0;
    margin: 0;
    font-family: var(--ide-mono);
    font-size: inherit;
    color: #d6deeb;
    background: transparent;
    border: 0;
    border-radius: 0;
    white-space: pre;
    overflow-x: auto;
}

/* highlight.js token colors — dark IDE (cyan / gold accents) */
.ide-article .gh-content .hljs {
    color: #d6deeb;
    background: transparent;
}

.ide-article .gh-content .hljs-comment,
.ide-article .gh-content .hljs-quote {
    color: #6a7a8a;
    font-style: italic;
}

.ide-article .gh-content .hljs-keyword,
.ide-article .gh-content .hljs-selector-tag,
.ide-article .gh-content .hljs-literal,
.ide-article .gh-content .hljs-section,
.ide-article .gh-content .hljs-link {
    color: #c792ea;
}

.ide-article .gh-content .hljs-string,
.ide-article .gh-content .hljs-doctag,
.ide-article .gh-content .hljs-regexp {
    color: #c3e88d;
}

.ide-article .gh-content .hljs-title,
.ide-article .gh-content .hljs-title.function_,
.ide-article .gh-content .hljs-name {
    color: #82aaff;
}

.ide-article .gh-content .hljs-type,
.ide-article .gh-content .hljs-class .hljs-title,
.ide-article .gh-content .hljs-title.class_ {
    color: #ffcb6b;
}

.ide-article .gh-content .hljs-number,
.ide-article .gh-content .hljs-symbol,
.ide-article .gh-content .hljs-bullet {
    color: #f78c6c;
}

.ide-article .gh-content .hljs-built_in,
.ide-article .gh-content .hljs-builtin-name,
.ide-article .gh-content .hljs-attr {
    color: #00d4ff;
}

.ide-article .gh-content .hljs-variable,
.ide-article .gh-content .hljs-template-variable,
.ide-article .gh-content .hljs-params {
    color: #f07178;
}

.ide-article .gh-content .hljs-meta,
.ide-article .gh-content .hljs-meta .hljs-keyword {
    color: #89ddff;
}

.ide-article .gh-content .hljs-addition {
    color: #c3e88d;
    background: rgba(195, 232, 141, 0.08);
}

.ide-article .gh-content .hljs-deletion {
    color: #f07178;
    background: rgba(240, 113, 120, 0.08);
}

.ide-article .gh-content .hljs-emphasis {
    font-style: italic;
}

.ide-article .gh-content .hljs-strong {
    font-weight: 600;
}

/* ——— Tables (GFM / HTML) ——— */
.ide-article .gh-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
    margin: 1.4em 0;
    border: 1px solid var(--ide-border);
    border-radius: 6px;
    background: var(--ide-panel);
    overflow: hidden;
}

.ide-article .gh-content thead {
    background: rgba(0, 212, 255, 0.08);
}

.ide-article .gh-content th {
    font-family: var(--ide-mono);
    font-size: 0.92em;
    font-weight: 600;
    color: var(--ide-accent);
    text-align: left;
    letter-spacing: 0.02em;
    padding: 0.65em 0.9em;
    border-bottom: 1px solid rgba(0, 212, 255, 0.35);
    white-space: nowrap;
}

.ide-article .gh-content td {
    padding: 0.55em 0.9em;
    border-bottom: 1px solid var(--ide-border);
    color: #c8c8c8;
    vertical-align: top;
}

.ide-article .gh-content tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.ide-article .gh-content tbody tr:hover {
    background: rgba(0, 212, 255, 0.05);
}

.ide-article .gh-content tbody tr:last-child td {
    border-bottom: 0;
}

/* Blockquote / hr / lists — slight chrome */
.ide-article .gh-content blockquote {
    margin: 1.35em 0;
    padding: 0.65em 0 0.65em 1em;
    border-left: 3px solid var(--ide-gold);
    background: rgba(255, 184, 0, 0.05);
    color: #c4c4c4;
    font-size: 1.02em;
    line-height: 1.65;
}

.ide-article .gh-content blockquote p {
    margin: 0.35em 0;
}

.ide-article .gh-content hr {
    border: 0;
    border-top: 1px solid var(--ide-border);
    margin: 2em 0;
}

.ide-article .gh-content ul,
.ide-article .gh-content ol {
    padding-left: 1.4em;
}

.ide-article .gh-content li::marker {
    color: var(--ide-accent);
}

/* Mermaid diagrams (client-rendered from language-mermaid fences) */
.ide-mermaid-wrap {
    margin: 1.25rem 0;
    padding: 12px 14px;
    background: var(--ide-panel-2);
    border: 1px solid var(--ide-border);
    border-radius: 6px;
    overflow-x: auto;
}

.ide-mermaid-wrap .mermaid,
.ide-article .gh-content .mermaid {
    display: flex;
    justify-content: center;
    color: var(--ide-text);
}

.ide-mermaid--error {
    color: #f48771;
    white-space: pre-wrap;
    font-family: var(--ide-mono);
    font-size: 12px;
}

/* ToC (right rail, post/page — below knowledge graph) */
.ide-toc {
    flex: 0 1 auto;
    min-height: 80px;
    max-height: 36%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--ide-border);
    overflow: hidden;
}

.ide-toc__header {
    flex: 0 0 auto;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ide-muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--ide-border);
}

.ide-toc__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow: auto;
    flex: 1 1 auto;
}

.ide-toc__item {
    margin: 0;
}

.ide-toc__item--h3 .ide-toc__link {
    padding-left: 22px;
    font-size: 11px;
}

.ide-toc__link {
    display: block;
    padding: 4px 12px;
    color: var(--ide-muted);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ide-toc__link:hover {
    color: var(--ide-text);
    background: var(--ide-panel-2);
}

.ide-toc__empty {
    padding: 8px 12px;
    color: var(--ide-muted);
    font-size: 12px;
    font-family: var(--ide-mono);
}

/* Comments terminal — tail -f comments.log aesthetic */
.ide-terminal {
    flex: 0 0 auto;
    border-top: 1px solid var(--ide-border);
    background: #0a0a0a;
    min-height: 180px;
    max-height: 42vh;
    display: flex;
    flex-direction: column;
    margin-top: auto;
    font-family: var(--ide-mono);
}

.ide-terminal__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 12px;
    font-size: 11px;
    color: var(--ide-muted);
    border-bottom: 1px solid var(--ide-border);
    background: #121212;
}

.ide-terminal__header-title {
    color: #8bc34a;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ide-terminal__header-file {
    color: var(--ide-accent);
}

.ide-terminal__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8px 12px 6px;
    color: #c8c8c8;
    font-size: 12px;
    line-height: 1.45;
}

.ide-terminal__cmd {
    flex: 0 0 auto;
    color: #e0e0e0;
    margin-bottom: 6px;
}

.ide-terminal__cmd::before {
    content: none;
}

.ide-terminal__log {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 72px;
    padding-bottom: 4px;
}

.ide-terminal__line {
    white-space: pre-wrap;
    word-break: break-word;
    font-variant-ligatures: none;
}

.ide-terminal__line--tree {
    white-space: pre;
    font-family: var(--ide-mono);
    letter-spacing: 0;
}

.ide-terminal__line--comment {
    cursor: pointer;
    border-radius: 2px;
}

.ide-terminal__line--comment:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #eee;
}

.ide-terminal__line--comment.is-reply-target {
    background: rgba(0, 212, 255, 0.12);
    outline: 1px solid rgba(0, 212, 255, 0.35);
}

.ide-terminal__signin {
    color: var(--ide-accent);
    text-decoration: underline;
    cursor: pointer;
}

.ide-terminal__signin:hover {
    color: #fff;
}

.ide-terminal__line--muted {
    color: #666;
}

.ide-terminal__line--err {
    color: #ef5350;
}

.ide-terminal__ts {
    color: #607d8b;
}

.ide-terminal__user {
    color: #4fc3f7;
}

.ide-terminal__msg {
    color: #d0d0d0;
}

.ide-terminal__compose {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #1e1e1e;
}

.ide-terminal__compose-label {
    flex: 0 0 auto;
    margin: 0;
}

.ide-terminal__prompt {
    color: #8bc34a;
    font-weight: 600;
}

.ide-terminal__input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #e8e8e8;
    font-family: var(--ide-mono);
    font-size: 12px;
    padding: 2px 0;
    caret-color: #8bc34a;
}

.ide-terminal__input::placeholder {
    color: #555;
}

.ide-terminal__input:disabled {
    opacity: 0.5;
}

.ide-terminal__status {
    flex: 0 0 auto;
    min-height: 1.2em;
    margin-top: 2px;
    font-size: 11px;
    color: #666;
}

/* Archive headers (tag/author) */
.ide-archive-header {
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--ide-border);
    margin-bottom: 8px;
}

.ide-archive-header__kicker {
    margin: 0 0 10px;
    font-family: var(--ide-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ide-accent);
}

.ide-archive-header__row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ide-archive-header__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.ide-archive-header__title {
    margin: 0 0 6px;
    font-size: 1.35rem;
    color: #f0f0f0;
    font-family: var(--ide-sans);
}

.ide-archive-header__title a {
    color: inherit;
    text-decoration: none;
}

.ide-archive-header__title a:hover {
    color: var(--ide-accent);
}

.ide-archive-header__count {
    color: var(--ide-muted);
    font-weight: 400;
    font-size: 0.85em;
}

.ide-archive-header__desc {
    margin: 0;
    color: var(--ide-muted);
    font-size: 0.95rem;
    line-height: 1.45;
}

.ide-archive-header__meta {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ide-muted);
    font-family: var(--ide-mono);
}

.ide-archive-header__image {
    display: block;
    max-width: 100%;
    margin-top: 12px;
    border-radius: 4px;
    border: 1px solid var(--ide-border);
}

/* Feed section label (author list context) */
.ide-feed__label {
    padding: 10px 16px 6px;
    font-family: var(--ide-mono);
    font-size: 12px;
    color: var(--ide-muted);
    border-bottom: 1px solid var(--ide-border);
    margin-bottom: 4px;
}

.ide-feed__label-prefix {
    color: var(--ide-accent);
    margin-right: 4px;
}

/* Pagination */
.ide-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid var(--ide-border);
    font-family: var(--ide-mono);
    font-size: 12px;
}

.ide-pagination__link {
    color: var(--ide-accent);
    text-decoration: none;
}

.ide-pagination__link:hover {
    text-decoration: underline;
}

.ide-pagination__link.is-disabled {
    color: var(--ide-muted);
    pointer-events: none;
}

.ide-pagination__meta {
    color: var(--ide-muted);
}

/* Right rail: search → graph → toc (post/page) */
.ide-shell__right > .ide-graph {
    flex: 1 1 auto;
    min-height: 120px;
    border-bottom: none;
}

/*
 * Mobile shell chrome: full-panel switcher (Explorer | Content | Panel).
 * Desktop: nav hidden. Narrow: one region fills the body; all three are
 * first-class (not a middle-column-only layout with off-canvas drawers).
 */
.ide-mobile-nav {
    display: none;
    flex: 0 0 auto;
    align-items: stretch;
    width: 100%;
    height: var(--ide-mobile-nav-h, 40px);
    border-top: 1px solid var(--ide-border);
    background: var(--ide-panel-2);
    z-index: 40;
}

.ide-mobile-nav__btn {
    flex: 1 1 0;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-right: 1px solid var(--ide-border);
    background: transparent;
    color: var(--ide-muted);
    font: inherit;
    font-size: 12px;
    font-family: var(--ide-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ide-mobile-nav__btn:last-child {
    border-right: none;
}

.ide-mobile-nav__btn:hover,
.ide-mobile-nav__btn:focus-visible {
    color: var(--ide-text);
    background: rgba(255, 255, 255, 0.04);
    outline: none;
}

.ide-mobile-nav__btn.is-active,
.ide-mobile-nav__btn[aria-pressed="true"] {
    color: var(--ide-text);
    background: rgba(0, 120, 212, 0.22);
    box-shadow: inset 0 2px 0 var(--ide-accent);
}

@media (max-width: 960px) {
    :root {
        --ide-mobile-nav-h: 40px;
    }

    .ide-shell {
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .ide-mobile-nav {
        display: flex;
    }

    .ide-shell__body {
        position: relative;
        flex: 1 1 auto;
        flex-direction: row;
        min-height: 0;
        overflow: hidden;
    }

    /* Full-panel regions: only the active view is shown */
    .ide-explorer,
    .ide-shell__workspace,
    .ide-shell__right {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100%;
        flex: none;
        border: none;
        overflow: hidden;
        display: none;
        z-index: 1;
    }

    .ide-explorer {
        flex-direction: column;
    }

    .ide-shell__workspace {
        flex-direction: column;
    }

    .ide-shell__right {
        flex-direction: column;
    }

    .ide-shell[data-ide-mobile-view="explorer"] .ide-explorer,
    .ide-shell:not([data-ide-mobile-view]) .ide-shell__workspace,
    .ide-shell[data-ide-mobile-view="workspace"] .ide-shell__workspace,
    .ide-shell[data-ide-mobile-view="right"] .ide-shell__right {
        display: flex;
        z-index: 2;
    }

    /* Tree can use full drawer height when Explorer is active */
    .ide-explorer__tree {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
    }

    .ide-status__copy {
        font-size: 10px;
        gap: 0.25em 0.4em;
    }
}