/* Spark Web Config Panel — hand-rolled CSS per UI-SPEC.
 * Dark theme only; no framework. ~200 lines.
 *
 * Design tokens follow UI-SPEC §"Spacing Scale", §"Typography", §"Color".
 * Accent (#f59e0b) is RESERVED — only on:
 *   1. switch track when ON
 *   2. primary CTA button background
 *   3. active tab underline
 *   4. focus ring
 * Destructive (#dc2626) only on delete button + error toast left-border.
 */

:root {
  /* Spacing scale (multiples of 4) */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-2xl: 48px;

  /* Typography */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-caption: 13px;
  --fs-body: 15px;
  --fs-heading: 18px;
  --fs-display: 24px;

  /* Color — 60/30/10 split */
  --c-bg: #0e1116;          /* Dominant 60% */
  --c-surface: #1a1f27;     /* Secondary 30% */
  --c-accent: #f59e0b;      /* Accent 10% — reserved */
  --c-destructive: #dc2626;
  --c-text: #e5e7eb;
  --c-muted: #9ca3af;
  --c-border: #2a313c;
  --c-success: #10b981;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: #0e1116;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
}

body {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-md);
}

/* ----- Header ----- */
.page-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-md) 0;
  font-size: var(--fs-display);
  font-weight: 600;
}
.page-header .logo { font-size: var(--fs-display); }
.container-status { font-size: var(--fs-caption); color: var(--c-muted); font-weight: 400; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--sp-xs); }
.dot-ok { background: var(--c-success); }

/* ----- Tabs ----- */
.tab-nav {
  display: flex; gap: var(--sp-sm);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-xl);
  overflow-x: auto;
}
.tab {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--sp-md);
  color: var(--c-text); text-decoration: none;
  font-size: var(--fs-body); font-weight: 600;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab.active { border-bottom-color: #f59e0b; }
.tab-disabled { color: var(--c-muted); cursor: default; pointer-events: none; }
.tab-disabled .muted { font-size: var(--fs-caption); font-weight: 400; margin-left: var(--sp-xs); }

/* ----- Sections ----- */
.section { padding: var(--sp-md) 0 var(--sp-2xl); }
.section-heading {
  font-size: var(--fs-heading); font-weight: 600;
  margin: 0 0 var(--sp-sm) 0;
}
.section-helper {
  font-size: var(--fs-caption); color: var(--c-muted);
  margin: 0 0 var(--sp-lg) 0;
}

/* ----- Toggle row + switch ----- */
.toggle-row {
  display: flex; align-items: center; gap: var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
  min-height: 44px;
}
.toggle-row.toggle-error { border-left: 2px solid var(--c-destructive); }

.toggle-row input[type="checkbox"][role="switch"] {
  appearance: none; -webkit-appearance: none;
  width: 32px; height: 20px;
  background: var(--c-border);
  border-radius: 999px; position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-row input[type="checkbox"][role="switch"]::before {
  content: ""; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-muted);
  top: 3px; left: 3px;
  transition: transform 0.15s, background 0.15s;
}
.toggle-row input[type="checkbox"][role="switch"]:checked { background: #f59e0b; }
.toggle-row input[type="checkbox"][role="switch"]:checked::before {
  transform: translateX(12px); background: var(--c-bg);
}
.toggle-text { display: flex; flex-direction: column; gap: var(--sp-xs); }
.toggle-label { font-size: var(--fs-body); font-weight: 600; }
.toggle-helper { font-size: var(--fs-caption); color: var(--c-muted); margin: 0; }
.toast-inline.error { color: var(--c-destructive); }
.toast-inline.success { color: var(--c-success); }

.spinner { font-size: var(--fs-caption); color: var(--c-muted); margin: 0 0 var(--sp-md) 0; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: block; }
.htmx-request.htmx-indicator { display: block; }

/* ----- Cron table ----- */
.cron-table-wrap { margin: var(--sp-md) 0 var(--sp-xl); }
.cron-table {
  width: 100%; border-collapse: collapse;
  background: var(--c-surface);
  border-radius: 6px; overflow: hidden;
}
.cron-table th, .cron-table td {
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.cron-table th { font-size: var(--fs-body); font-weight: 600; color: var(--c-muted); }
.cron-table tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.cron-table .mono { font-family: var(--font-mono); font-size: var(--fs-body); }
.cron-prompt {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ----- Empty state ----- */
.empty-state {
  text-align: center; padding: var(--sp-lg) 0;
  color: var(--c-muted);
}
.empty-heading { font-size: var(--fs-body); font-weight: 600; color: var(--c-text); margin: 0 0 var(--sp-sm); }
.empty-helper { font-size: var(--fs-caption); margin: 0; }

/* ----- Forms ----- */
.cron-form-section { margin-top: var(--sp-xl); }
.form-heading { font-size: var(--fs-heading); font-weight: 600; margin: 0 0 var(--sp-md); }
.cron-form { display: flex; flex-direction: column; gap: var(--sp-sm); }
.field-label { font-size: var(--fs-body); font-weight: 600; }
.field-helper { font-size: var(--fs-caption); color: var(--c-muted); margin-bottom: var(--sp-sm); }
.cron-form input, .cron-form textarea {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  padding: var(--sp-sm) var(--sp-md);
  font-family: inherit; font-size: var(--fs-body);
  border-radius: 4px;
  min-height: 44px;
}
.cron-form input.mono, .cron-form textarea.mono { font-family: var(--font-mono); }
.cron-form textarea { resize: vertical; min-height: 80px; }

/* ----- Buttons ----- */
.btn-primary {
  background: #f59e0b; color: #0e1116; border: none;
  padding: 0 var(--sp-lg); min-height: 44px;
  font-size: var(--fs-body); font-weight: 600;
  border-radius: 4px; cursor: pointer;
  margin-top: var(--sp-md);
}
.btn-destructive {
  background: transparent; color: var(--c-destructive);
  border: 1px solid transparent;
  padding: var(--sp-xs) var(--sp-sm); cursor: pointer;
  font-size: var(--fs-body);
}
.btn-destructive:hover { background: var(--c-destructive); color: var(--c-text); }

/* ----- Status grid ----- */
.status-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-sm) var(--sp-lg);
  background: var(--c-surface); padding: var(--sp-md); border-radius: 6px;
}
.status-grid dt { font-weight: 600; color: var(--c-muted); }
.status-grid dd { margin: 0; }
.status-grid .mono { font-family: var(--font-mono); font-size: var(--fs-body); }

/* ----- Toast region ----- */
.toast-region {
  position: fixed; bottom: var(--sp-lg); right: var(--sp-lg);
  max-width: 320px;
  padding: var(--sp-md);
  background: var(--c-surface);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  font-size: var(--fs-body);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}
.toast-region.toast-active {
  opacity: 1;
  animation: toastFade 4s ease forwards;
}
.toast-region.toast-error { border-left: 2px solid var(--c-destructive); }
.toast-region.toast-success { border-left: 2px solid var(--c-success); }
@keyframes toastFade { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ----- Focus ring (a11y) ----- */
*:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* ----- Mobile (<600px): cron table → stacked cards ----- */
@media (max-width: 599px) {
  .toast-region { left: var(--sp-md); right: var(--sp-md); top: var(--sp-md); bottom: auto; max-width: none; }
  .cron-table thead { display: none; }
  .cron-table tr { display: block; padding: var(--sp-sm); border-bottom: 1px solid var(--c-border); }
  .cron-table td { display: block; padding: var(--sp-xs) 0; border-bottom: none; }
  .cron-prompt { max-width: 100%; white-space: normal; }
}

/* ----- Desktop (>=600px) — table layout (default already applies) ----- */
@media (min-width: 600px) {
  .cron-table { display: table; }
}

/* ----- Wide (>=960px) — center max-width 720px (already on body) ----- */

/* ===== Phase 13 — Controle tab ===== */
.section-subheading {
  font-size: var(--fs-heading);
  font-weight: 600;
  margin: var(--sp-lg) 0 var(--sp-sm) 0;
}

.section-divider {
  border-top: 1px solid var(--c-border);
  border-bottom: none;
  margin: var(--sp-lg) 0;
}

.fire-button-group {
  display: flex;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.fire-button-form { margin: 0; }

.last-fire-row {
  padding: var(--sp-sm) 0;
  font-size: var(--fs-body);
}
.last-fire-row.fire-error {
  border-left: 2px solid var(--c-destructive);
  padding-left: var(--sp-sm);
}

/* ===== Phase 13 — Config form ===== */
fieldset {
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: var(--sp-md);
  margin-bottom: var(--sp-md);
}
fieldset legend {
  font-size: var(--fs-heading);
  font-weight: 600;
  padding: 0 var(--sp-sm);
}
#config-form input[type="number"],
#config-form input[type="text"] {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  padding: var(--sp-sm) var(--sp-md);
  font-family: inherit;
  font-size: var(--fs-body);
  border-radius: 4px;
  min-height: 44px;
  width: 100%;
  margin-top: var(--sp-xs);
}
#config-form input[aria-invalid="true"] {
  border-color: var(--c-destructive);
}

.form-error {
  color: var(--c-destructive);
  border-left: 2px solid var(--c-destructive);
  padding-left: var(--sp-sm);
  margin-bottom: var(--sp-md);
}

.restart-progress {
  padding: var(--sp-md) 0;
}
.restart-progress .caption {
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

/* ===== Phase 13 — Logs viewer ===== */
.logs-viewer {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: var(--sp-md);
  height: 60vh;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: auto;
  white-space: pre;
}
.log-line { display: block; }
.log-line .ts { color: var(--c-muted); margin-right: var(--sp-sm); }
.log-line .container { margin-right: var(--sp-sm); }
.log-line[data-container="spark"] .container { color: var(--c-success); }
.log-line[data-container="spark-panel"] .container { color: var(--c-accent); }
.log-line .level { margin-right: var(--sp-sm); font-weight: 600; }
.log-line .level-INFO { color: var(--c-muted); }
.log-line .level-WARNING, .log-line .level-WARN { color: #fbbf24; }
.log-line .level-ERROR, .log-line .level-CRITICAL { color: var(--c-destructive); }
.log-line .msg { color: var(--c-text); }

/* CSS filter (toggled via client-side JS): hide-LEVEL on wrapper hides matching log-line */
.logs-viewer-wrap.hide-INFO .log-line[data-level="INFO"] { display: none; }
.logs-viewer-wrap.hide-WARNING .log-line[data-level="WARNING"],
.logs-viewer-wrap.hide-WARNING .log-line[data-level="WARN"] { display: none; }
.logs-viewer-wrap.hide-ERROR .log-line[data-level="ERROR"],
.logs-viewer-wrap.hide-ERROR .log-line[data-level="CRITICAL"] { display: none; }

.log-filters {
  display: flex;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
  align-items: center;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font-size: var(--fs-caption);
  cursor: pointer;
  min-height: 44px;
}
.filter-chip input { margin: 0; }

.btn-secondary {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  padding: 0 var(--sp-md);
  min-height: 44px;
  font-size: var(--fs-caption);
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}
.btn-secondary:hover { background: var(--c-surface); }
.btn-secondary.active { border-color: #f59e0b; color: #f59e0b; }

.sticky-bottom-btn {
  position: absolute;
  bottom: var(--sp-md);
  right: var(--sp-md);
}

.logs-viewer-wrap { position: relative; }
.logs-viewer-error {
  padding: var(--sp-md);
  color: var(--c-muted);
}

/* ---------------------------------------------------------------------------
 * Phase 14 — Sistema dashboards (delta over Phase 12/12.1/13).
 * Only existing tokens; accent (--c-accent) restricted to the cost-sparkline
 * polyline stroke (reservation list exception #7).
 * --------------------------------------------------------------------------- */

.dash-number {
  font-size: var(--fs-display);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.2;
}

.dash-table {
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  margin: var(--sp-md) 0;
  border-collapse: collapse;
}
.dash-table th,
.dash-table td {
  padding: var(--sp-sm) var(--sp-md);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.dash-table th { font-weight: 600; }
.dash-table td.num,
.dash-table th.num { text-align: right; }
.dash-table td.tool-desc {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-muted);
  font-size: var(--fs-caption);
}

.dash-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.dash-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: var(--sp-md);
  text-align: center;
}
.dash-card-num {
  font-size: var(--fs-display);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.2;
}
.dash-card-unit {
  font-size: var(--fs-caption);
  color: var(--c-muted);
  font-weight: 400;
  margin-left: var(--sp-xs);
}
.dash-card-label {
  font-size: var(--fs-caption);
  color: var(--c-muted);
  margin-top: var(--sp-xs);
}
.dash-card-alert.has-conflicts { border-color: var(--c-destructive); }
.dash-card-alert.has-conflicts .dash-card-num { color: var(--c-destructive); }
.dash-alert-helper {
  color: var(--c-destructive);
  font-size: var(--fs-caption);
  margin-top: var(--sp-xs);
}
.dash-stale {
  color: var(--c-muted);
  font-size: var(--fs-caption);
  margin: var(--sp-sm) 0;
}

.bar-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-lg);
}
.bar-row {
  display: grid;
  grid-template-columns: 1fr 100px auto;
  gap: var(--sp-md);
  align-items: center;
  padding: var(--sp-xs) 0;
  font-size: var(--fs-body);
}
.bar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-track {
  background: var(--c-border);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--c-muted);
  border-radius: 4px;
}
.bar-value {
  font-size: var(--fs-caption);
  color: var(--c-muted);
  min-width: 30px;
  text-align: right;
}

.cost-sparkline {
  width: 100%;
  height: 60px;
  margin: var(--sp-md) 0 var(--sp-xs);
  display: block;
}
.sparkline-axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

@media (max-width: 599px) {
  .dash-card-row { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr 60px auto; }
}

/* ===========================================================================
   Phase 15 — Histórico (PANEL-08) + Vault (PANEL-09)
   Source: 15-UI-SPEC.md §CSS additions (LOCKED — copied verbatim).
   Tokens reuse the Phase 12 :root set; no new color tokens introduced.
   =========================================================================== */

/* ===== Phase 15 — Histórico ===== */

.historico-form {
  display: flex;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  align-items: end;
  margin-bottom: var(--sp-lg);
}
.historico-q {
  flex: 1 1 240px;
  min-height: 44px;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text);
  font-size: var(--fs-body);
  font-family: inherit;
}
.historico-date-label {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-caption);
  color: var(--c-muted);
  gap: var(--sp-xs);
}
.historico-date-label input[type="date"] {
  min-height: 44px;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-body);
  color-scheme: dark;
}

.historico-row {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
}
.historico-row-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-xs);
  font-size: var(--fs-caption);
  color: var(--c-muted);
  margin-bottom: var(--sp-xs);
}
.historico-row-sep { color: var(--c-border); }
.historico-row-role.role-user { color: var(--c-text); }
.historico-row-role.role-assistant { color: var(--c-muted); }
.historico-row-snippet {
  margin: 0 0 var(--sp-sm);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.historico-row-snippet mark {
  background: var(--c-surface);  /* subtle — not amber accent */
  color: var(--c-text);
  font-weight: 600;
  padding: 0 var(--sp-xs);
  border-radius: 2px;
}

.historico-context {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: var(--sp-md);
  margin-bottom: var(--sp-sm);
}
.historico-context-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-md);
}
.historico-context-meta .btn-secondary { margin-left: auto; }
.historico-context-msgs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.historico-msg {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: 4px;
}
.historico-msg-role {
  font-size: var(--fs-caption);
  color: var(--c-muted);
  font-weight: 600;
}
.historico-msg-content {
  font-size: var(--fs-body);
  line-height: 1.5;
  white-space: pre-wrap;       /* preserve newlines from raw msg.content */
  word-wrap: break-word;
}
/* Accent use #8 — UI-SPEC §Accent Reservation list growth 7→8.
   border-left is THE accent vector; rgba(245,158,11,0.05) bg is the same
   accent visually subordinate (NOT counted as exception #9). */
.historico-msg-match {
  border-left: 2px solid var(--c-accent);
  background: rgba(245, 158, 11, 0.05);
}

.historico-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-border);
}
.historico-page-indicator {
  font-size: var(--fs-caption);
  color: var(--c-muted);
}
.btn-disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* ===== Phase 15 — Vault ===== */

/* SCOPED override of Phase 12 max-width — only when body has .vault-page;
   other pages keep the 720px constraint. Mobile reverts below. */
body.vault-page { max-width: 1100px; }

.vault-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-lg);
  align-items: start;
}
.vault-tree-pane {
  position: sticky;
  top: var(--sp-md);
  max-height: calc(100vh - var(--sp-2xl));
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: var(--sp-md);
}
.vault-search {
  width: 100%;
  min-height: 36px;
  padding: var(--sp-xs) var(--sp-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text);
  font-family: inherit;
  font-size: var(--fs-caption);
  margin-bottom: var(--sp-md);
}
.vault-tree {
  font-size: var(--fs-caption);
}
.vault-tree-root, .vault-folder-notes {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.vault-folder-notes {
  padding-left: var(--sp-md);
  border-left: 1px dotted var(--c-border);
  margin-left: var(--sp-sm);
}
.vault-folder-details {
  margin-bottom: var(--sp-xs);
}
.vault-folder-summary {
  cursor: pointer;
  padding: var(--sp-xs) 0;
  font-weight: 600;
  color: var(--c-text);
  list-style: none;          /* hide default disclosure triangle (Chrome/Firefox) */
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
}
/* UI-SPEC §Pitfall 9 — Safari uses the legacy webkit pseudo-element for
   the disclosure triangle; list-style:none alone doesn't suppress it. */
.vault-folder-summary::-webkit-details-marker {
  display: none;
}
.vault-folder-summary::before {
  content: "▸";
  display: inline-block;
  color: var(--c-muted);
  transition: transform 0.1s;
  font-size: 10px;
  width: 12px;
}
.vault-folder-details[open] > .vault-folder-summary::before {
  transform: rotate(90deg);
}
.vault-folder-name { flex: 1; }
.vault-folder-count {
  font-size: var(--fs-caption);
  color: var(--c-muted);
  font-weight: 400;
}
.vault-note { padding: 0; margin: 0; }
.vault-note-link {
  display: block;
  padding: var(--sp-xs) var(--sp-sm);
  color: var(--c-text);
  text-decoration: none;
  border-radius: 4px;
  font-size: var(--fs-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vault-note-link:hover {
  background: var(--c-bg);
}
.vault-note-link.vault-note-current {
  background: var(--c-bg);
  font-weight: 600;
}
/* Subtle bg tint — same amber as accent but visually subordinate
   (NOT a 9th accent exception per UI-SPEC §Accent Reservation). */
.vault-note.match-highlight .vault-note-link {
  background: rgba(245, 158, 11, 0.08);
}

.vault-viewer {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: var(--sp-lg);
  min-height: 400px;
}
.vault-viewer-header {
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-md);
  border-bottom: 1px solid var(--c-border);
}
.vault-viewer-title {
  font-size: var(--fs-display);
  font-weight: 600;
  margin: 0 0 var(--sp-sm);
}
.vault-viewer-meta {
  font-size: var(--fs-caption);
  color: var(--c-muted);
  margin: 0;
  display: flex;
  gap: var(--sp-sm);
  align-items: baseline;
}
.vault-row-sep { color: var(--c-border); }
.vault-viewer-empty {
  padding: var(--sp-2xl) 0;
}

/* Markdown body styling — scoped to .markdown-body to avoid leaking
   prose styles into other panel pages (UI-SPEC §D-UI-08). */
.markdown-body {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-text);
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  font-weight: 600;
  margin: var(--sp-lg) 0 var(--sp-sm);
  line-height: 1.3;
}
.markdown-body h1 { font-size: var(--fs-display); }
.markdown-body h2 { font-size: var(--fs-heading); }
.markdown-body h3 { font-size: var(--fs-body); text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); }
.markdown-body p { margin: 0 0 var(--sp-md); }
.markdown-body ul, .markdown-body ol { margin: 0 0 var(--sp-md); padding-left: var(--sp-lg); }
.markdown-body li { margin-bottom: var(--sp-xs); }
.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--c-bg);
  padding: 0 var(--sp-xs);
  border-radius: 2px;
}
.markdown-body pre {
  background: var(--c-bg);
  padding: var(--sp-md);
  border-radius: 4px;
  overflow-x: auto;
}
.markdown-body pre code { background: transparent; padding: 0; }
.markdown-body blockquote {
  border-left: 2px solid var(--c-border);
  padding-left: var(--sp-md);
  color: var(--c-muted);
  margin: 0 0 var(--sp-md);
}
.markdown-body hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-lg) 0;
}
.markdown-body a {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: var(--c-border);
}
.markdown-body a:hover {
  text-decoration-color: var(--c-text);
}

.wikilink {
  color: var(--c-text);
  text-decoration: underline;
  text-decoration-color: var(--c-muted);
  cursor: pointer;
  padding: 0 var(--sp-xs);
  border-radius: 2px;
}
.wikilink:hover {
  background: var(--c-bg);
  text-decoration-color: var(--c-text);
}
.wikilink-orphan {
  color: var(--c-muted);
  font-style: italic;
  text-decoration: underline dotted var(--c-muted);
  cursor: help;
}

/* Mobile fallback — vault stacks vertical */
@media (max-width: 799px) {
  body.vault-page { max-width: 720px; }   /* revert to Phase 12 default on mobile */
  .vault-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-md);
  }
  .vault-tree-pane {
    position: static;
    max-height: 320px;     /* prevent tree dominating screen */
  }
}

/* Historico mobile — form wraps */
@media (max-width: 599px) {
  .historico-form > .historico-q { flex-basis: 100%; }
  .historico-msg { grid-template-columns: 60px 1fr; }
}