/* Memory Observatory — dark shell aligned to VISUAL_MEMORY_OBSERVATORY_CONCEPT.svg */
:root {
  color-scheme: dark;
  --bg: #101819;
  --bg-mid: #172520;
  --bar: #182a26;
  --panel: #1b2d28;
  --panel-deep: #15231f;
  --field: #101f1c;
  --ink: #f4f1e9;
  --ink-soft: #e1e9e0;
  --muted: #acc2b7;
  --line: #385148;
  --line-strong: #47765d;
  --green: #6abf92;
  --green-deep: #327d6b;
  --green-mid: #3b7256;
  --green-wash: #315d49;
  --injected: #79adfa;
  --injected-wash: #244a69;
  --warn: #e8c27a;
  --danger: #ff9b98;
  --danger-soft: #3a2224;
  --shadow: 0 10px 32px #030d0b59;
  --radius: 16px;
  --radius-sm: 10px;
  --touch: 44px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --left: 300px;
  --right: 289px;
  --bottom: 280px;
  --bar-h: 68px;
  --nav-h: 48px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(980px 520px at 8% -12%, #1b3535 0%, transparent 68%),
    radial-gradient(720px 420px at 92% 8%, #182430 0%, transparent 62%),
    linear-gradient(180deg, var(--bg-mid) 0%, var(--bg) 50%, #0c1210 100%);
  color: var(--ink);
  font: 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

button {
  cursor: pointer;
  font-weight: 600;
  min-height: var(--touch);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 10px 14px;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), filter 0.16s var(--ease), transform 0.16s var(--ease);
}

button:hover:not(:disabled) { filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.42; cursor: not-allowed; }

button.primary {
  background: var(--green-wash);
  border-color: var(--green-deep);
  color: #eefff3;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

input, select, textarea {
  width: 100%;
  min-height: var(--touch);
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--field);
  padding: 8px 12px;
}

textarea {
  min-height: 8rem;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
}

label > span,
.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.obs-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

/* —— Top bar —— */
.obs-top {
  flex: 0 0 var(--bar-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}

.obs-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.obs-mark {
  width: 35px;
  height: 35px;
  border-radius: 12px;
  background: #30614a;
  color: #eaf8ed;
  font: 700 20px/35px var(--font-display);
  text-align: center;
  flex-shrink: 0;
}

.obs-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.obs-brand-text strong {
  font: 500 22px/1.1 var(--font-display);
  color: #f6f4ec;
  letter-spacing: -0.02em;
}

.obs-brand-text span {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #98c8ad;
}

.obs-dyad {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.obs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 10px 4px 14px;
  border-radius: 18px;
  background: #243a32;
  border: 1px solid var(--line-strong);
  color: #d7e6dc;
  font-size: 13px;
}

.obs-pill select {
  width: auto;
  min-width: 7rem;
  min-height: 28px;
  border: 0;
  background: transparent;
  padding: 2px 4px;
}

.obs-pill.turn {
  background: #26352d;
  color: #e7e6df;
  font-variant-numeric: tabular-nums;
}

.obs-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.obs-top-actions a {
  color: #d7e6dc;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.obs-top-actions a:hover { border-color: var(--green); color: var(--ink); }

.langs {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #15231f;
}

.langs button {
  min-width: 40px;
  min-height: 30px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.langs button[aria-pressed="true"] {
  background: var(--green-wash);
  color: #eefff3;
}

/* —— Primary nav —— */
.obs-nav {
  flex: 0 0 var(--nav-h);
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 6px 18px;
  background: #14221e;
  border-bottom: 1px solid var(--line);
}

.obs-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.obs-nav a:hover { color: var(--ink); background: #1b302a; }

.obs-nav a[aria-current="page"] {
  color: #eefff3;
  background: var(--green-mid);
}

/* —— Views —— */
.obs-views {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.obs-view {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: auto;
  padding: 16px 18px 20px;
}

.obs-view.is-active { display: flex; flex-direction: column; gap: 14px; }

.obs-view#view-atlas {
  display: none;
  padding: 14px 14px 10px;
  gap: 12px;
  overflow: hidden;
}

.obs-view#view-atlas.is-active {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  grid-template-columns: var(--left) minmax(0, 1fr) var(--right);
  /* Fixed bottom track so Firefox cannot collapse the timeline under 1fr content. */
  grid-template-rows: auto minmax(0, 1fr) minmax(var(--bottom), var(--bottom));
  grid-template-areas:
    "traces traces traces"
    "explore atlas inspector"
    "timeline timeline timeline";
}

.obs-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 18px;
  min-height: 0;
  overflow: auto;
}

.obs-panel.deep { background: var(--panel-deep); }

.obs-panel h2 {
  margin: 0 0 4px;
  font: 500 22px/1.15 var(--font-display);
  letter-spacing: -0.02em;
}

.obs-panel .lead {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
}

.explore { grid-area: explore; }
.atlas { grid-area: atlas; display: flex; flex-direction: column; overflow: hidden; }
.inspector { grid-area: inspector; }
.production-trace {
  grid-area: traces;
  display: grid;
  grid-template-columns: minmax(140px, auto) minmax(180px, 280px) minmax(180px, 280px) auto;
  grid-template-areas:
    "title creator fan load"
    "list list list list"
    "detail detail detail detail";
  gap: 8px 12px;
  align-items: end;
  background: #143028;
  border: 1px solid #3d8f6e;
  border-radius: var(--radius);
  padding: 10px 12px;
}
.production-trace-title { grid-area: title; align-self: center; }
.production-trace h2 { margin: 0; font-size: 18px; }
.production-trace .lead { margin: 0; }
.production-trace label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.production-trace label:nth-of-type(1) { grid-area: creator; }
.production-trace label:nth-of-type(2) { grid-area: fan; }
.production-trace > button { grid-area: load; align-self: end; }
.production-trace input[name=record] { display: none; }
#production-trace-list {
  grid-area: list;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 72px;
  overflow: auto;
}
#production-trace-list:empty,
#production-trace-detail:empty { display: none; }
#production-trace-detail { grid-area: detail; max-height: 200px; overflow: auto; }
.production-trace pre {
  white-space: pre-wrap;
  max-height: 240px;
  overflow: auto;
}
.timeline-dock {
  grid-area: timeline;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.chip {
  min-height: 30px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: #213b34;
  color: #e6f1eb;
  font-size: 12px;
  font-weight: 600;
}

.chip[aria-pressed="true"] {
  background: var(--green-wash);
  border-color: var(--green-deep);
  color: #eefff3;
}

.layer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layer-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
}

.layer-list input {
  width: 19px;
  height: 19px;
  min-height: 19px;
  accent-color: var(--green);
}

.graph-mode-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 10px;
}

.mode-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 17px;
  background: #243b31;
  border: 1px solid var(--line);
}

.mode-seg button {
  min-height: 34px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #cddcd0;
  font-size: 13px;
  padding: 6px 14px;
}

.mode-seg button[aria-pressed="true"] {
  background: var(--green-mid);
  color: #fff;
}

.graph-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.graph-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 42%, rgba(101, 184, 142, 0.12), transparent 55%),
    #12201c;
  overflow: hidden;
}

#graph-wait {
  position: absolute;
  z-index: 1;
  top: 16px;
  right: 16px;
  bottom: 16px;
  left: min(340px, 48%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 16px;
  text-align: center;
  pointer-events: none;
}

.graph-wait, .graph-empty, .state-empty, .state-loading {
  margin: 0;
  padding: 20px;
  color: var(--muted);
  font-size: 14px;
}

.state-failed { color: var(--danger); }

#saved-graphs {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  max-width: min(320px, 46%);
  max-height: 40%;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: #1b2d28ee;
  border: 1px solid var(--line);
}

#saved-graphs h3 {
  margin: 0 0 8px;
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

#graph-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#graph-list button {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  min-height: 36px;
  padding: 8px 10px;
  background: #15231f;
}

#graph-list button[aria-current="true"] {
  border-color: var(--green);
  background: var(--green-wash);
}

.inspector-badge {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #254d4b;
  color: #d5fff9;
  font-size: 13px;
}

.inspector-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.inspector-section .kicker {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #98b4a7;
}

.inspector-title {
  margin: 0 0 8px;
  font: 500 20px/1.25 var(--font-display);
}

.inspector-meta {
  margin: 0;
  color: #b3c7bb;
  font-size: 12px;
}

.inspector-quote {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--injected);
  background: #12242a;
  color: #d5e8f8;
  font-size: 13px;
}

.inspector-exec {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #c5ddd2;
  white-space: pre-wrap;
}

.timeline-dock .timeline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  flex: 0 0 auto;
}

.timeline-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pane-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.pane-toolbar .lead,
.pane-toolbar .question-lead {
  margin-bottom: 12px;
}

.expand-btn {
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #243b31;
  color: #cddcd0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.expand-btn:hover,
.expand-btn[aria-pressed="true"] {
  background: var(--green-mid);
  color: #fff;
  border-color: transparent;
}

.obs-panel.is-expanded {
  position: fixed !important;
  inset: 12px !important;
  z-index: 80;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  grid-area: unset !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: auto !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.obs-panel.is-expanded .graph-stage {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.obs-panel.atlas.is-expanded {
  overflow: hidden !important;
}

.obs-panel.atlas.is-expanded .pane-head,
.obs-panel.atlas.is-expanded .graph-actions {
  flex: 0 0 auto;
}

.obs-panel.atlas.is-expanded .graph-stage {
  flex: 1 1 auto;
  min-height: 0;
}

.obs-panel.is-expanded.timeline-dock #timeline {
  flex: 1 1 auto;
  max-height: none;
  overflow: auto;
}

body.has-expanded-panel::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(8, 14, 12, 0.72);
}

.obs-panel.is-expanded:fullscreen,
.obs-panel.is-expanded:-webkit-full-screen {
  inset: 0 !important;
  border-radius: 0;
  background: var(--panel-deep, #15241f);
}

.timeline-dock .timeline-head .hint {
  margin: 0;
  font-size: 12px;
}

.timeline-dock h2 { font-size: 18px; margin-bottom: 2px; }

.timeline-dock #timeline-replay {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
}

.timeline-summary {
  flex: 0 1 auto;
  max-height: 48%;
  overflow: auto;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #12201c;
}

.timeline-summary-title {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.timeline-summary-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-summary-line {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.timeline-summary-line.tone-empty { color: var(--muted); font-style: italic; }
.timeline-summary-line.tone-skip { color: #9aa89f; }

.tl-chip {
  display: inline;
  font-weight: 700;
  border-radius: 4px;
  padding: 0 3px;
}

.tl-chip.tone-parents { color: #8fd6b5; background: #1e3d33; }
.tl-chip.tone-child { color: #9ec5ff; background: #1a2f44; }
.tl-chip.tone-save { color: #d8f5c8; background: #243a24; }
.tl-chip.tone-conflict { color: #ffd29a; background: #3a2c18; }
.tl-chip.tone-split { color: #e0c4ff; background: #2d2240; }
.tl-chip.tone-skip { color: #b7c2ba; background: #24302b; }

#timeline {
  list-style: none;
  margin: 0;
  padding: 4px 4px 2px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-height: 5rem;
  min-width: 0;
  align-items: stretch;
}

#timeline li.timeline-item {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #15231f;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}

#timeline li.timeline-item:hover {
  border-color: var(--line-strong);
}

#timeline li.timeline-item.is-active {
  border-color: var(--green);
  box-shadow: 0 0 0 1px var(--green);
}

#timeline .timeline-body {
  color: var(--ink-soft);
  word-break: break-word;
}

#timeline .timeline-message-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--injected);
  word-break: break-all;
}

#timeline .badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #214e49;
  color: #d5fff8;
}

#timeline .badge.reconstructed {
  background: #3a3420;
  color: var(--warn);
}

/* —— Guardar / Recorrido / Chat —— */
.view-scroll {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.pane-head h2 {
  margin: 0 0 6px;
  font: 500 26px/1.15 var(--font-display);
}

.question-lead, .hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

.hint a { color: var(--green); }

.board-grid {
  display: grid;
  gap: 14px;
}

.settings, .names, .studio-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong);
  background: var(--field);
}

.drop input[type="file"] { width: auto; min-height: auto; }

.studio-tools {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.studio-tools h3 {
  margin: 0 0 6px;
  font: 600 14px var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.studio-out, #journal, .chat-block, .recall-trace pre {
  margin: 10px 0 0;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--field);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: auto;
  white-space: pre-wrap;
}

#status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--muted);
}

#status.error { color: var(--danger); }

.walk-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

#walk {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#walk details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-deep);
  padding: 10px 12px;
}

#walk summary {
  cursor: pointer;
  font-weight: 600;
}

.journal-block { margin-top: 18px; }

.chat-mode { max-width: 280px; margin-bottom: 12px; }

#chat-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
  max-height: min(48vh, 420px);
  overflow: auto;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-deep);
}

#chat-log article {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

#chat-log article.you {
  background: var(--green-wash);
  border-color: var(--green-deep);
}

.chat-compose {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.chat-compose textarea { min-height: 64px; }

.chat-label {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Graph vendor overrides for dark shell */
.graph-world { color: var(--ink); }
.graph-edges { opacity: 0.9; }

.graph-stage .graph-chrome {
  top: 10px;
  right: 10px;
  border-color: var(--line);
  background: #1b2d28ee;
}

.graph-stage .graph-chrome-btn {
  color: #cddcd0;
}

.graph-stage .graph-chrome-btn:hover {
  background: #2a4a3d;
  color: #fff;
}

.graph-stage .graph-toggle {
  border-color: #3d4d47;
  color: #a3b0aa;
}

.graph-stage .graph-node.is-collapsed {
  background: #1e322c;
}

/* Models page */
.models-page {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.models-page h1 {
  margin: 0 0 0.35rem;
  font: 500 1.85rem/1.15 var(--font-display);
}

.models-page .lead { margin: 0 0 1.25rem; color: var(--muted); }
.models-page .back {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}

.models-meta { margin: 0 0 1rem; font-size: 0.9rem; color: var(--muted); }

.models-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.models-table th, .models-table td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.models-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--panel-deep);
}

.models-note {
  margin-top: 1.25rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--green);
  background: var(--panel);
  color: var(--ink-soft);
}

.models-error { color: var(--danger); }

/* M09-07 — maintenance before/after side-by-side */
.maint-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.75rem 0;
}
.maint-diff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.maint-diff-col h3 {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.maint-diff-col .walk-pre {
  max-height: 220px;
  overflow: auto;
  font-size: 0.75rem;
}
.timeline-filters {
  margin: 0.35rem 0 0.5rem;
}
@media (max-width: 800px) {
  .maint-diff { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .obs-view#view-atlas.is-active {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(320px, 48vh) auto minmax(200px, auto);
    grid-template-areas:
      "traces"
      "explore"
      "atlas"
      "inspector"
      "timeline";
    overflow: auto;
  }
  :root { --bottom: 220px; }
  .obs-app { max-height: none; overflow: auto; }
  .timeline-dock { overflow: visible; }
  #timeline { min-height: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}