/* Page-level layouts. Component styles live in components.css. */

/* ---------- Home ---------- */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-6); align-items: start; }
.home-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: var(--sp-5); position: sticky; top: var(--sp-4); }
.section-bar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.section-bar h2 { font-size: var(--fs-md); margin: 0 var(--sp-2) 0 0; font-weight: 650; }

.brain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }
.brain-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); color: var(--text); text-decoration: none; transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
.hive a.brain-card { color: var(--text); }
a.brain-card:hover { box-shadow: var(--elev-3); transform: translateY(-1px); }
.brain-card .head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brain-card .icon-tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 16px; flex: none; background: var(--tc, var(--type-0)); }
.brain-card .title { min-width: 0; flex: 1; }
.brain-card .title b { display: block; font-size: 14.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brain-card .title span { font-size: 12px; color: var(--muted); }
.brain-card p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 36px; }
.brain-card .mini { height: 72px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.brain-card .stats { display: flex; gap: var(--sp-4); align-items: center; font-size: 12px; color: var(--muted); }
.brain-card .stats b { color: var(--text); font-size: 13px; }
.brain-card .stats .status { margin-left: auto; }

.onboard { padding: var(--sp-5); background: linear-gradient(160deg, var(--ember-50), var(--surface) 60%); }
.onboard h2 { font-size: var(--fs-md); margin: 6px 0 var(--sp-3); }
.onboard ol { list-style: none; padding: 0; margin: var(--sp-3) 0 var(--sp-4); display: flex; flex-direction: column; gap: 9px; }
.onboard li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.onboard li i { font-size: 17px; color: var(--muted); }
.onboard li.done { color: var(--muted); text-decoration: line-through; }
.onboard li.done i { color: var(--success); }
.onboard li.current { color: var(--text); font-weight: 600; }
.onboard li.current i { color: var(--ember-500); }

/* ---------- Activity feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
/* Activity page: about ten items tall (one item is ~61px), then the list scrolls. */
.feed-scroll { max-height: calc(10 * 61px); overflow-y: auto; overscroll-behavior: contain; }
.feed-foot { margin: 0; padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }
.ev { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); }
.ev:first-child { border-top: 0; }
.ev-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: 14px; background: var(--chip); color: var(--text-2); }
.ev-icon-tool { background: var(--teal-50); color: var(--teal-text); }
.ev-icon-content { background: var(--azure-50); color: var(--azure-text); }
.ev-icon-security { background: var(--sage-50); color: var(--sage-text); }
.ev-text { font-size: 13px; line-height: 1.4; color: var(--text-2); word-break: break-word; }
.ev-text b { color: var(--text); font-weight: 600; }
.ev-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.feed-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }

/* ---------- Graph explorer ---------- */
/* The explorer fills whatever the scroll region leaves (banners, phone chrome). */
.content.flush { display: flex; flex-direction: column; }
.gx { display: grid; grid-template-columns: 260px minmax(0, 1fr); flex: 1; min-height: 520px; position: relative; }
.gx-filters { background: var(--surface); border-right: 1px solid var(--border); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); overflow-y: auto; }
.gx-filters h2 { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--sp-2); display: flex; justify-content: space-between; align-items: center; }
.gx-filters .seg { width: 100%; }
.gx-filters .seg button { flex: 1; justify-content: center; }
.type-filter { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-radius: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.type-filter:hover { background: var(--surface-2); }
.type-filter .n { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.type-filter.is-off { opacity: 0.5; }
.type-filter .type-dot { width: 12px; height: 12px; border-radius: 4px; }

.gx-stage {
  position: relative; min-width: 0; overflow: hidden;
  background: radial-gradient(700px 500px at 50% 45%, rgba(255, 107, 61, 0.1), transparent 70%), var(--ink-900);
}
.gx-canvas { position: absolute; inset: 0; }
.gx-list { position: absolute; inset: 64px var(--sp-4) var(--sp-4); overflow: auto; background: var(--surface); border-radius: var(--r-lg); }
.gx-list .is-selected td { background: var(--accent-soft); }
.link-button { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.link-button:hover { color: var(--accent-text); text-decoration: underline; }
.gx-toolbar { position: absolute; top: var(--sp-4); left: var(--sp-4); right: var(--sp-4); display: flex; gap: var(--sp-2); align-items: flex-start; z-index: 2; flex-wrap: wrap; }
.gx-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.gx-search .search-input { background: rgba(17, 26, 46, 0.92); border-color: rgba(148, 163, 184, 0.25); }
.gx-search .search-input input { color: #fff; }
.gx-search .search-input i, .gx-search kbd { color: var(--ink-muted); }
.gx-search kbd { background: transparent; border-color: rgba(148, 163, 184, 0.3); }
.gx-results { position: absolute; left: 0; right: 0; top: 44px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--elev-3); padding: 4px; max-height: 300px; overflow: auto; }
.search-hit { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; background: none; border-radius: 7px; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.search-hit:hover, .search-hit[aria-selected="true"] { background: var(--accent-soft); }
.search-empty { padding: 8px 10px; }
.gx-tools { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: rgba(17, 26, 46, 0.92); border: 1px solid rgba(148, 163, 184, 0.22); }
.gx-tools button { height: 32px; min-width: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: #B6C0D3; font: inherit; font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.gx-tools button:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.gx-tools button[aria-pressed="true"] { background: rgba(255, 107, 61, 0.2); color: #FFC3AE; }
.gx-tools.vertical { flex-direction: column; }
.gx-zoom { position: absolute; left: var(--sp-4); bottom: var(--sp-4); z-index: 2; }
.gx-stats { position: absolute; left: 76px; bottom: 20px; z-index: 2; display: flex; gap: var(--sp-4); padding: 7px 14px; border-radius: var(--r-pill); background: rgba(17, 26, 46, 0.92); border: 1px solid rgba(148, 163, 184, 0.22); color: var(--ink-muted); font-size: 12px; white-space: nowrap; }
.gx-stats b { color: #fff; }
.gx-minimap { position: absolute; right: var(--sp-4); bottom: var(--sp-4); width: 180px; height: 120px; border-radius: 12px; background: rgba(17, 26, 46, 0.92); border: 1px solid rgba(148, 163, 184, 0.22); z-index: 2; }
.gx-notice { position: absolute; left: 50%; transform: translateX(-50%); top: 64px; z-index: 2; background: var(--honey-50); color: var(--honey-text); border-radius: var(--r-md); padding: 8px 14px; font-size: 12.5px; max-width: 80%; }
.gx-pathbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 3; background: var(--surface); color: var(--text); border-radius: var(--r-md); padding: 8px 14px; font-size: 13px; box-shadow: var(--elev-3); max-width: 80%; }
.gx-empty { position: absolute; inset: 0; display: none; place-items: center; z-index: 1; color: var(--ink-text); }
.gx.is-empty .gx-empty { display: grid; }
.gx-empty .empty h2 { color: #fff; }

.section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: var(--sp-2) 0 0; }
.syn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid transparent; background: none; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left; }
.syn:hover { background: var(--surface-2); border-color: var(--border); }
.syn .rel { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ---------- Prose (rendered markdown) ---------- */
.prose { font-size: var(--fs-base); line-height: 1.7; color: var(--text-2); overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--text); margin: 1.2em 0 0.5em; }
.prose h1 { font-size: 1.5em; } .prose h2 { font-size: 1.3em; } .prose h3 { font-size: 1.12em; } .prose h4 { font-size: 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose blockquote { border-left: 3px solid var(--ember-200); margin: 1em 0; padding: 0.2em 1em; color: var(--muted); }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.92em; }
.prose th, .prose td { border: 1px solid var(--border); padding: 6px 10px; }
.prose img { max-width: 100%; border-radius: var(--r-md); }
.prose a { color: var(--accent-text); }

/* ---------- Neuron reader ---------- */
.reader-split { display: grid; grid-template-columns: 340px minmax(0, 1fr) 320px; min-height: calc(100vh - var(--topbar-h) - 47px); }
.reader-list { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.reader-list .lh { padding: var(--sp-4); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--sp-3); }
.reader-list .items { overflow-y: auto; flex: 1; }
.neuron-row { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; align-items: flex-start; }
.hive a.neuron-row { color: var(--text); }
.neuron-row:hover { background: var(--surface-2); }
.neuron-row[aria-current="page"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--ember-500); }
.neuron-row .type-dot { margin-top: 6px; }
.neuron-row b { font-size: 13.5px; font-weight: 600; display: block; line-height: 1.35; }
.neuron-row small { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.reader-doc { padding: var(--sp-8) 44px; min-width: 0; }
.reader-doc .doc { max-width: 760px; margin: 0; }
.reader-doc h1.doc-title { font-size: var(--fs-3xl); font-weight: 750; letter-spacing: -0.025em; margin: var(--sp-3) 0 var(--sp-2); line-height: 1.2; overflow-wrap: anywhere; }
.reader-doc .byline { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--muted); font-size: 13px; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-5); }
.reader-doc .prose { font-size: var(--fs-md); line-height: 1.75; }
.raw-source { white-space: pre-wrap; font-family: var(--mono); font-size: var(--fs-sm); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.reader-info { background: var(--surface); border-left: 1px solid var(--border); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-5); }
.reader-info .mini-ego { height: 180px; border-radius: var(--r-md); background: var(--ink-900); overflow: hidden; }
.reader-back { display: none; }

/* ---------- Access ---------- */
.access-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }
.matrix th.brain-col { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.matrix td { white-space: nowrap; }
.matrix .principal { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.matrix .principal b { font-weight: 600; }
.matrix .principal small { display: block; color: var(--muted); font-size: 11.5px; }
.matrix tr.is-selected td { background: var(--accent-soft); }
.matrix a.cell-link { text-decoration: none; }
.ptype { font-size: 11px; padding: 1px 7px; border-radius: 5px; background: var(--chip); color: var(--muted); font-weight: 600; }
.explain { position: sticky; top: var(--sp-4); }
.path-steps { list-style: none; margin: 0; padding: 0; }
.path-steps li { display: flex; gap: 10px; padding-bottom: var(--sp-4); position: relative; font-size: 13px; color: var(--text-2); }
.path-steps li::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--border); }
.path-steps li:last-child::before { display: none; }
.path-steps .b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; flex: none; background: var(--chip); color: var(--text-2); }
.path-steps .b.ok { background: var(--teal-50); color: var(--teal-text); }

/* ---------- Connect ---------- */
.connect { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-6); max-width: 1100px; }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stepper li { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); align-items: flex-start; }
.stepper .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; border: 1.5px solid var(--border-strong); color: var(--muted); flex: none; }
.stepper b { font-size: 13.5px; display: block; }
.stepper small { color: var(--muted); font-size: 12px; }
.stepper li.done .n { background: var(--success); border-color: var(--success); color: #fff; }
.stepper li.current { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--elev-2); }
.stepper li.current .n { background: var(--ember-700); border-color: var(--ember-700); color: #fff; }
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); }
.hive a.method-card { color: var(--text); text-decoration: none; display: flex; flex-direction: column; gap: var(--sp-2); }
a.method-card:hover { box-shadow: var(--elev-3); }
.choice-grid { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.choice { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; }
.hive a.choice { color: var(--text); }
.choice[aria-current="true"] { border-color: var(--ember-500); box-shadow: 0 0 0 3px var(--accent-soft); }
.code-block { border-radius: var(--r-lg); background: var(--ink-900); border: 1px solid rgba(255, 255, 255, 0.07); overflow: hidden; }
.code-block .ch { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: var(--ink-muted); font-size: 12px; }
.code-block .ch .btn { margin-left: auto; --bs-btn-bg: rgba(255, 255, 255, 0.06); --bs-btn-border-color: rgba(255, 255, 255, 0.12); --bs-btn-color: #E2E8F0; --bs-btn-hover-bg: rgba(255, 255, 255, 0.12); --bs-btn-hover-color: #fff; }
.code-block pre { margin: 0; border-radius: 0; background: none; white-space: pre-wrap; word-break: break-all; font-size: 13px; line-height: 1.7; }
.verify { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); flex-wrap: wrap; }
.verify .ring { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--muted); font-size: 20px; flex: none; }
.verify[data-state="ok"] .ring { background: var(--success-50); color: var(--success); }
.verify[data-state="waiting"] .ring { background: var(--accent-soft); color: var(--accent-text); }
.verify[data-state="timeout"] .ring { background: var(--warning-50); color: var(--warning); }
.secret-box { font-family: var(--mono); background: var(--honey-50); border: 1px solid var(--honey-500); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); word-break: break-all; }

/* ---------- Admin ---------- */
.admin-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-4); }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; } .span-3 { grid-column: span 3; }
.licence-card {
  padding: var(--sp-6); border: 0; color: var(--ink-text); position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--ink-800), var(--ink-700) 60%, #3A2418);
}
.licence-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 240px; height: 240px; opacity: 0.8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 2l25 14v32L28 62 3 48V16z' fill='none' stroke='%23FF6B3D' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E");
}
.licence-card h2 { color: #fff; font-size: var(--fs-xl); margin: 4px 0; }
.licence-card .eyebrow { color: var(--ember-200); }
.licence-card .muted { color: var(--ink-muted); }
.licence-card .meter { background: rgba(255, 255, 255, 0.1); }
.licence-meters { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-4); position: relative; z-index: 1; }
.licence-meters > div { min-width: 140px; }
.licence-meters b { display: block; color: #fff; font-size: var(--fs-md); margin: 2px 0 6px; }
.health-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border); font-size: 13px; }
.health-row i { color: var(--muted); font-size: 16px; }
.health-row .status { margin-left: auto; }

/* ---------- Account ---------- */
.account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); max-width: 1100px; }
.method { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
.method:first-child { border-top: 0; }
.method img, .method > i { width: 20px; height: 20px; font-size: 18px; color: var(--muted); }

/* ---------- Public (help/setup) ---------- */
/* Same rule as the shell: the header stays put and only .public-scroll scrolls. */
body[data-layout="public"] { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.public-topbar { flex: none; }
.public-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: clip; overscroll-behavior: contain; }
.public-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.product-pill { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--r-pill); }
.public-foot { text-align: center; color: var(--muted); font-size: 12px; padding: var(--sp-6); }
.help-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.help-nav { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.help-nav a { padding: 7px 12px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 13.5px; }
.hive .help-nav a { color: var(--text-2); }
.help-nav a:hover { background: var(--surface); }
.hive .help-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.help-body { padding: var(--sp-6) var(--sp-8); max-width: 860px; }
.help-body .prose { font-size: var(--fs-md); }

/* ---------- Errors ---------- */
.error-page { min-height: 60vh; display: grid; place-items: center; }

/* ---------- Responsive overrides ---------- */
@media (max-width: 1180px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-side { position: static; }
  .gx { grid-template-columns: minmax(0, 1fr); }
  .gx-filters { display: none; }
  .gx-minimap { display: none; }
  .reader-split { grid-template-columns: minmax(0, 1fr) 300px; }
  .reader-list { display: none; }
  .reader-back { display: inline-flex; }
  .reader-doc { padding: var(--sp-6) var(--sp-6); }
  .access-grid { grid-template-columns: 1fr; }
  .explain { position: static; }
  .connect { grid-template-columns: 1fr; }
  .stepper { flex-direction: row; overflow-x: auto; }
  .stepper li { flex: 1 0 auto; }
  .stepper small { display: none; }
  .span-8, .span-4 { grid-column: span 12; }
  .span-3 { grid-column: span 6; }
  .help-layout { grid-template-columns: 1fr; }
  .help-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .reader-split { grid-template-columns: 1fr; }
  .reader-info { border-left: 0; border-top: 1px solid var(--border); }
  .account-grid { grid-template-columns: 1fr; }
  .gx-stats { display: none; }
}
@media (max-width: 640px) {
  .gx { min-height: 420px; }
  .gx-toolbar .gx-tools:not(.keep) { display: none; }
  .gx-zoom { display: none; }
  .reader-doc { padding: var(--sp-5) var(--sp-4); }
  .reader-doc h1.doc-title { font-size: var(--fs-2xl); }
  .brain-card .mini { display: none; }
  .span-3, .span-6 { grid-column: span 12; }
  .help-body { padding: var(--sp-4); }
  .matrix .principal { min-width: 160px; }
}
.panel-narrow { max-width: 460px; }
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
@media (max-width: 1100px) { .overview-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; } }
/* Brain tabs */
.brain-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-4); align-items: stretch; }
/* Neuron types: as tall as the Neurons panel beside it. `contain: size` stops
   the list from setting the row height, so the Neurons panel does; the
   heading stays fixed and only the list scrolls. */
.types-panel { display: flex; flex-direction: column; contain: size; min-height: 240px; }
.types-panel > .panel-head, .types-panel > p { flex: none; }
.types-panel .types-scroll { flex: 1; min-height: 0; overflow-y: auto; margin-top: var(--sp-3); border-top: 1px solid var(--border); }
@media (max-width: 1100px) {
  .brain-grid-2 { grid-template-columns: 1fr; }
  .types-panel { contain: none; }
  .types-panel .types-scroll { max-height: 420px; }
}
.panel-danger { border-color: var(--danger-50); }
.panel-danger .panel-head h2 { color: var(--danger); }

/* Admin configuration forms */
.form-narrow { max-width: 560px; }
.input-narrow { width: 90px; }
.input-code { width: 180px; }
/* Neuron reader */
.reader-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-4); align-items: start; }
@media (max-width: 1100px) { .reader-grid { grid-template-columns: 1fr; } }
.raw-source { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); overflow-x: auto; white-space: pre-wrap; font-size: 13px; }
.crumbs-inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: var(--sp-2); }
.crumbs-inline a { color: var(--muted); text-decoration: none; }
.crumbs-inline a:hover { color: var(--text); }
.crumbs-inline i { font-size: 10px; }

@media (max-width: 900px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .help-nav { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .help-nav a { white-space: nowrap; }
  .help-body { padding: var(--sp-5) var(--sp-4); }
  .help-body pre, .help-body table { max-width: 100%; overflow-x: auto; display: block; }
}

/* One-time credential display (admin service accounts, connect wizard): the value
   and its copy button stay on one line; the label sits above. */
.cred-row { display: flex; flex-direction: column; gap: 4px; }
.cred-field { display: flex; gap: var(--sp-2); align-items: center; }
.cred-field .input { flex: 1 1 auto; min-width: 0; }
.cred-field .btn { flex: none; }