/* ═══════════════════════════════════════════════════════════
   CODED NATURE — Critical Journal · 3D graph app shell
   Depends on coded-nature/tokens.css + components.css
   ═══════════════════════════════════════════════════════════ */

html, body { height: 100%; }
body { overflow: hidden; background: var(--bg); }

.app {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(260px, 320px) 1fr minmax(300px, 380px);
    grid-template-areas:
        "top top top"
        "left graph right";
    height: 100vh;
    height: 100svh;
}

/* ── Topbar ─────────────────────────────────────────────── */
.j-top {
    grid-area: top;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
    padding: var(--s5) var(--s7);
    background: var(--bg-overlay);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--ink-06);
    z-index: 20;
}
.j-brand { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
.j-back { flex-shrink: 0; }
.j-brand .brand-mark {
    width: 24px; height: 24px; border-radius: var(--r-round);
    background: var(--accent); position: relative; flex-shrink: 0;
    box-shadow: 0 0 0 4px var(--accent-12);
    transition: border-radius var(--t-med) var(--snap);
}
.j-brand .brand-mark::after { content:''; position:absolute; inset:7px; border-radius: var(--r-round); background: var(--bg-elevated); }
.j-brand:hover .brand-mark { border-radius: var(--r-technical); }
.j-brand span.bn { font-family: var(--font-data); font-size: var(--size-small); letter-spacing: var(--ls-wide); text-transform: uppercase; font-weight: 500; }
.j-title { text-align: center; }
.j-title .eyebrow { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent); display:block; }
.j-title strong { font-weight: 400; font-size: var(--size-body); color: var(--ink); }
.j-actions { display: flex; gap: var(--s3); align-items: center; }
@media (max-width: 1100px) { .j-title { display: none; } }

/* ── Panels (left + right) ──────────────────────────────── */
.j-left, .j-right {
    overflow-y: auto;
    background: var(--bg);
    padding: var(--s7) var(--s6);
    display: flex; flex-direction: column; gap: var(--s7);
}
.j-left { grid-area: left; border-right: 1px solid var(--ink-06); }
.j-right { grid-area: right; border-left: 1px solid var(--ink-06); background: var(--bg-elevated); }

.p-block { display: flex; flex-direction: column; gap: var(--s4); }
.p-block .label {
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-25);
}
.intro-block { gap: var(--s4); }
.intro-block h1 { font-size: 1.45rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.2; }
.intro-block .eyebrow { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent); }
.intro-block p { font-size: var(--size-small); line-height: 1.65; color: var(--ink-60); }

.search {
    width: 100%; font-family: var(--font-body); font-size: var(--size-body);
    padding: var(--s3) var(--s5); background: var(--bg-elevated);
    border: 1px solid var(--ink-06); border-radius: var(--r-surface);
    color: var(--ink); outline: none; transition: all var(--t-med) var(--fluid);
}
.search::placeholder { color: var(--ink-25); }
.search:focus { border-radius: var(--r-technical); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-12); }

/* segmented control */
.segmented { display: inline-flex; gap: var(--s1); background: var(--ink-06); border-radius: var(--r-surface); padding: var(--s1); }
.segment {
    flex: 1; font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-tight); text-transform: uppercase;
    padding: var(--s2) var(--s4); border-radius: 12px; border: none;
    background: transparent; color: var(--ink-25); cursor: pointer;
    transition: all var(--t-med) var(--fluid);
}
.segment:hover { color: var(--ink); }
.segment.active { background: var(--bg-elevated); color: var(--ink); box-shadow: var(--shadow-sm); }

/* chips */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-tight); padding: var(--s2) var(--s3);
    border-radius: var(--r-surface); border: 1px solid var(--ink-12);
    background: var(--bg-elevated); color: var(--ink-60); cursor: pointer;
    transition: all var(--t-med) var(--fluid); -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-radius: var(--r-technical); border-color: var(--ink); color: var(--ink); }
.chip.active { border-radius: var(--r-technical); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* timeline slider */
input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
    background: var(--ink-12); border-radius: var(--r-surface); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
    border-radius: var(--r-round); background: var(--accent); cursor: pointer;
    border: 2px solid var(--bg-elevated); box-shadow: var(--shadow-sm);
    transition: border-radius var(--t-fast);
}
input[type="range"]:active::-webkit-slider-thumb { border-radius: var(--r-technical); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: var(--r-round); background: var(--accent); cursor: pointer; border: 2px solid var(--bg-elevated); }
.timeline-labels { display: flex; justify-content: space-between; font-family: var(--font-data); font-size: var(--size-micro); color: var(--ink-25); margin-top: var(--s3); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); border-top: 1px solid var(--ink-06); padding-top: var(--s6); margin-top: auto; }
.stats > div { display: flex; flex-direction: column; gap: var(--s2); }
.stats span { font-family: var(--font-data); font-size: 1.5rem; color: var(--ink); line-height: 1; }
.stats small { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-25); }

/* ── Graph area ─────────────────────────────────────────── */
.j-graph { grid-area: graph; position: relative; background: var(--bg); overflow: hidden; }
.graph3d { position: absolute; inset: 0; }
.graph3d canvas { display: block; }

.g-overlay { position: absolute; z-index: 5; pointer-events: none; }
.g-overlay.tl { top: var(--s6); left: var(--s6); display: flex; gap: var(--s2); flex-wrap: wrap; }
.g-overlay.bl { bottom: var(--s6); left: var(--s6); display: flex; gap: var(--s4); flex-wrap: wrap; }
.hint {
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--ink-25);
    background: var(--bg-overlay); border: 1px solid var(--ink-06);
    padding: var(--s1) var(--s3); border-radius: var(--r-surface);
    backdrop-filter: blur(8px);
}
.legend { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--ink-60); }
.legend span { display: inline-flex; align-items: center; gap: var(--s2); background: var(--bg-overlay); border: 1px solid var(--ink-06); padding: var(--s1) var(--s3); border-radius: var(--r-surface); backdrop-filter: blur(8px); }
.node-dot { width: 9px; height: 9px; display: inline-block; border-radius: var(--r-round); }
.node-dot.done { background: #1A1A1E; }
.node-dot.progress { background: var(--accent); }
.node-dot.open { border: 2px solid var(--accent); background: transparent; }

.loading-state, .fallback-state {
    position: absolute; inset: 0; z-index: 8;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4);
    background: var(--bg); text-align: center; padding: var(--s7);
}
.loading-state .orb { width: 40px; height: 40px; border-radius: var(--r-round); background: var(--accent); animation: breathe 1.4s var(--fluid) infinite; }
@keyframes breathe { 0%,100% { transform: scale(0.7); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } }
.loading-state p, .fallback-state p { font-family: var(--font-data); font-size: var(--size-small); letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--ink-25); }
.fallback-state .eyebrow { color: var(--neg); }
.fallback-state h2 { font-size: var(--size-heading); font-weight: 400; color: var(--ink); max-width: 420px; text-transform: none; font-family: var(--font-body); letter-spacing: 0; }
.fallback-state p:last-child { max-width: 420px; text-transform: none; font-family: var(--font-body); letter-spacing: 0; font-size: var(--size-small); color: var(--ink-60); }
.hidden { display: none !important; }

/* ── Detail panel ───────────────────────────────────────── */
.j-right .empty { display: flex; flex-direction: column; gap: var(--s4); }
.j-right .empty .eyebrow { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-25); }
.j-right .empty h2 { font-size: var(--size-heading); font-weight: 400; }
.j-right .empty p { font-size: var(--size-small); line-height: 1.55; }

.entry-header { padding-bottom: var(--s6); border-bottom: 1px solid var(--ink-06); }
.entry-header .eyebrow { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--s3); }
.entry-header h2 { font-size: 1.4rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: var(--s5); }
.entry-meta { display: flex; flex-wrap: wrap; gap: var(--s2); }
.entry-meta .tag {
    font-family: var(--font-data); font-size: var(--size-micro);
    letter-spacing: var(--ls-tight); padding: var(--s1) var(--s3);
    border-radius: var(--r-surface); border: 1px solid var(--ink-12); color: var(--ink-60);
}
.entry-meta .tag--status { border-color: var(--accent-25); color: var(--accent); background: var(--accent-06); }
.panel-section { padding: var(--s6) 0; border-bottom: 1px solid var(--ink-06); }
.panel-section h4 { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-25); margin-bottom: var(--s4); }
.panel-section p { font-size: var(--size-small); line-height: 1.7; color: var(--ink); }
.connections { display: flex; flex-direction: column; gap: var(--s3); }
.connection-button {
    display: flex; flex-direction: column; gap: var(--s1); text-align: left;
    padding: var(--s4) var(--s5); background: var(--bg); border: 1px solid var(--ink-06);
    border-radius: var(--r-surface); cursor: pointer; transition: all var(--t-med) var(--fluid);
}
.connection-button:hover { border-radius: var(--r-technical); border-color: var(--accent-25); background: var(--accent-06); transform: translateX(3px); }
.connection-button strong { font-size: var(--size-small); color: var(--ink); font-weight: 500; }
.connection-button small { font-family: var(--font-data); font-size: var(--size-micro); letter-spacing: var(--ls-tight); text-transform: uppercase; color: var(--ink-25); }

/* ── Mobile fallback ────────────────────────────────────── */
.j-mobile-note { display: none; }
@media (max-width: 920px) {
    .app { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "top" "left" "graph"; height: auto; min-height: 100svh; }
    body { overflow: auto; }
    .j-right { display: none; }
    .j-left { border-right: none; border-bottom: 1px solid var(--ink-06); }
    .j-graph { min-height: 70svh; }
}