/* ================================================================
   E112 — Observation Ledger  ·  see BRAND.md
   ================================================================
   Warm archival manila + sepia iron-gall ink. Moss = living/active.
   Iron-oxide "Seal" red = the stamp / recording marks (sparingly).
   Motifs: collection seal, registration marks, ledger ruling, plate
   caption, small-caps column heads. Type: self-hosted Redaction (printed serif).
   ================================================================ */

/* Self-hosted Redaction (SIL OFL 1.1, MCKL) — a serif drawn to look like
   degraded print. No Google Fonts; nothing from the shared default pool. */
@font-face {
  font-family: 'Redaction'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/redaction-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Redaction'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/redaction-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Redaction'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/redaction-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Redaction 35'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/redaction35-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Redaction 35'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/redaction35-700.woff2') format('woff2');
}

:root {
  --paper:        #EAE3D1;   /* manila */
  --surface:      #F5F0E1;   /* leaf */
  --surface-2:    #EDE6D3;   /* inset well */
  --bg-raised:    #EDE6D3;   /* legacy alias */
  --viewport:     #E4DBC2;   /* enclosure floor */

  --ink:          #2B2721;   /* sepia */
  --secondary:    #5B5346;
  --muted:        #8A8070;

  --line:         #D6CDB4;
  --line-2:       #C7BC9E;
  --glass-border: #D6CDB4;   /* legacy alias */
  --glass-hover:  #E3DCC8;

  --accent:       #5A6B2E;   /* moss — living / action */
  --accent-ink:   #3D4A1D;
  --accent-wash:  #E5E6C9;

  --seal:         #8C3B2B;   /* iron-oxide — stamp / recording */
  --seal-wash:    #EDE0D6;

  --r:            4px;
  --r-lg:         7px;

  --font-sans:    'Redaction', Georgia, 'Times New Roman', serif;
  --font-mono:    'Redaction', Georgia, 'Times New Roman', serif;
  --font-display: 'Redaction 35', 'Redaction', Georgia, serif;

  --rail-w:       308px;
  --statusbar-h:  30px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
button, input, select { font: inherit; }
button { cursor: pointer; border: none; background: none; color: inherit; }

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr var(--statusbar-h);
  overflow: hidden;
  background: var(--paper);
}

/* ── Toolbar ────────────────────────────────────────────────── */
.toolbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
  padding: 9px 18px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  z-index: 100;
}

/* Brand lockup: collection seal + wordmark + descriptor */
.brand { display: flex; align-items: center; gap: 11px; }
.seal { flex: none; display: block; }
.brand-lockup { display: flex; flex-direction: column; gap: 1px; }
.brand-line { display: flex; align-items: baseline; gap: 8px; }
.brand-mark {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 1px; color: var(--seal);
}
.brand-div { width: 1px; height: 13px; background: var(--line-2); align-self: center; }
.brand-name {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 500; font-size: 20px; letter-spacing: -.2px; color: var(--ink);
}
.brand-desc {
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--muted);
}

.toolbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tool-div { width: 1px; height: 22px; background: var(--line-2); }

.ctrl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r);
  border: 1px solid var(--line-2); background: var(--surface-2);
  color: var(--secondary); transition: all .15s ease;
}
.ctrl-btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.ctrl-btn.primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
.ctrl-btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.speed-group { display: flex; align-items: center; gap: 9px; }
.speed-label, .ollama-select-row label {
  font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.5px;
}
.speed-value {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent-ink);
  min-width: 34px; text-align: right; font-variant-numeric: tabular-nums;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 90px; height: 3px; background: var(--line-2); border-radius: 2px; outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface); cursor: pointer;
  transition: transform .15s ease;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.18); }

.toggle-control { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--secondary); }
.toggle-control input { display: none; }
.toggle-box {
  position: relative; width: 28px; height: 15px;
  background: var(--line-2); border: 1px solid var(--line-2);
  border-radius: 8px; transition: all .2s ease; flex: none;
}
.toggle-box::after {
  content: ''; position: absolute; top: 1px; left: 1px;
  width: 11px; height: 11px; background: var(--surface); border-radius: 50%; transition: all .2s ease;
}
.toggle-control input:checked + .toggle-box { background: var(--accent); border-color: var(--accent); }
.toggle-control input:checked + .toggle-box::after { transform: translateX(13px); }
.toggle-control input:checked ~ .toggle-text { color: var(--ink); }

.ollama-select-row { display: flex; align-items: center; gap: 10px; }
#ollamaModel {
  -webkit-appearance: none; appearance: none;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; padding: 4px 9px; border-radius: var(--r); outline: none;
}

/* ── Workspace ──────────────────────────────────────────────── */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); overflow: hidden; }

.viewport {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 44%, #EFE7D2 0%, var(--viewport) 60%, #DBD1B4 100%);
}
#simCanvas { display: block; width: 100%; height: 100%; }

/* Registration / crop marks — a scientific plate framing the enclosure */
.plate-frame { position: absolute; inset: 14px; pointer-events: none; }
.plate-frame span { position: absolute; width: 15px; height: 15px; }
.plate-frame span:nth-child(1) { top: 0; left: 0; border-top: 1px solid var(--secondary); border-left: 1px solid var(--secondary); }
.plate-frame span:nth-child(2) { top: 0; right: 0; border-top: 1px solid var(--secondary); border-right: 1px solid var(--secondary); }
.plate-frame span:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid var(--secondary); border-left: 1px solid var(--secondary); }
.plate-frame span:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid var(--secondary); border-right: 1px solid var(--secondary); }

/* Museum-plate caption */
.plate-caption {
  position: absolute; left: 26px; bottom: 22px; pointer-events: none;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted);
}
.plate-accession {
  font-family: var(--font-mono); letter-spacing: 1px; color: var(--seal);
  border: 1px solid var(--seal); padding: 1px 5px; border-radius: 3px; margin-right: 8px;
}

/* ── Right rail — the ledger ────────────────────────────────── */
.rail { background: var(--surface); border-left: 1px solid var(--line-2); overflow-y: auto; display: flex; flex-direction: column; }
.rail-block { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.rail-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.8px;
  color: var(--muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.rail-block.subject { flex: 1; }
.subject-empty { font-size: 12px; line-height: 1.55; color: var(--muted); }
.subject-detail { display: none; flex-direction: column; gap: 17px; }
#inspectorPanel.active .subject-detail { display: flex; }
#inspectorPanel.active .subject-empty { display: none; }
.close-inspector {
  display: none; width: 22px; height: 22px; border-radius: var(--r);
  align-items: center; justify-content: center; color: var(--muted); transition: all .15s ease;
}
.close-inspector:hover { color: var(--ink); background: var(--glass-hover); }
#inspectorPanel.active .close-inspector { display: inline-flex; }

.inspector-header { display: flex; align-items: center; gap: 11px; }
.agent-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--surface); padding: 2px 7px; border-radius: 3px; letter-spacing: .3px;
}
#inspName {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-size: 24px; font-weight: 500; letter-spacing: -.3px; color: var(--ink);
}

.inspector-section { display: flex; flex-direction: column; gap: 9px; }
/* Small-caps column head with a trailing ledger rule */
.section-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted);
}
.section-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.profile-meta-row { display: flex; justify-content: space-between; align-items: center; }
.meta-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.personality-badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--accent-ink);
  border: 1px solid var(--accent); background: var(--accent-wash); padding: 2px 8px; border-radius: 3px; letter-spacing: .3px;
}
.thought-monitor { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; }
.thought-header { font-size: 9px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--muted); }
.thought-text { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--ink); min-height: 34px; word-break: break-word; }
.text-btn {
  width: 100%; height: 33px; margin-top: 2px; border-radius: var(--r); font-weight: 500; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--surface);
}
.text-btn:hover { background: var(--accent-ink); }
.text-btn:disabled { background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); cursor: not-allowed; }

.cognitive-grid { display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 13px; }
.cog-row { display: flex; justify-content: space-between; align-items: center; }
.cog-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; }
.cog-val { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-variant-numeric: tabular-nums; }

.telemetry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.telemetry-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 11px; display: flex; flex-direction: column; gap: 3px; }
.tel-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.tel-val { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart-container { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; display: flex; justify-content: center; }

.memory-log-list { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; max-height: 110px; overflow-y: auto; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.memory-log-list::-webkit-scrollbar { width: 5px; }
.memory-log-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.mem-item { font-family: var(--font-mono); font-size: 10px; line-height: 1.4; color: var(--secondary); padding-bottom: 4px; border-bottom: 1px solid var(--line); word-break: break-word; }
.mem-item:first-child { color: var(--accent-ink); }
.empty-log { color: var(--muted) !important; font-style: italic; text-align: center; border-bottom: none; padding: 10px 0; }

.stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; }
.stat-row + .stat-row { border-top: 1px solid var(--line); }
.stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); }
.stat-value { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Status bar ─────────────────────────────────────────────── */
.statusbar {
  background: var(--surface); border-top: 1px solid var(--line-2);
  padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted);
}
.status-left, .status-right { display: flex; align-items: center; gap: 7px; }
/* Default dot = observation recording (iron-oxide, slow blink) */
.status-indicator { width: 7px; height: 7px; border-radius: 50%; background: var(--seal); transition: background .3s ease; animation: rec 2.4s ease-in-out infinite; }
.status-indicator.paused { background: var(--warn, #B5852A); animation: none; }
.status-indicator.online { background: var(--accent); animation: none; }
@keyframes rec { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.status-sep { color: var(--line-2); }