/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* ===== Theme tokens =====
   Palette and type come from /brand.css (the shared iamota brand tokens).
   Everything below maps those onto this app's surfaces. Do not hardcode
   brand colours here — add a mapping instead, so the landing page and the
   docs app cannot drift apart. */

:root {
  --sidebar-w: 260px;
  --header-h: 52px;

  /* Foundational surfaces: beige ground, white content, charcoal chrome. */
  --bg: var(--ia-beige);
  --surface: var(--ia-white);
  --surface-sunken: var(--ia-gray-light);
  --border: rgba(34, 34, 34, 0.16);
  --border-strong: rgba(34, 34, 34, 0.42);

  /* Charcoal sidebar with beige text — a combination the guidelines call for
     explicitly. Yellow marks the active row. */
  --sidebar-bg: var(--ia-charcoal);
  --sidebar-lift: #2C2C2C;
  --sidebar-text: var(--ia-beige);
  --sidebar-muted: rgba(240, 234, 223, 0.58);
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --sidebar-active: rgba(255, 255, 255, 0.13);
  --sidebar-active-border: var(--ia-yellow);

  --text: var(--ia-charcoal);
  --text-muted: var(--ia-gray-dark);
  --text-faint: var(--ia-gray-mid);
  --accent: var(--ia-blue);
  --accent-hover: #2A2AD9;
  --accent-text: var(--ia-white);

  /* Code surfaces sit on charcoal with beige text. */
  --code-bg: var(--ia-charcoal);
  --code-text: var(--ia-beige);

  /* Chip tints. Restrained on purpose: the brand palette has no rainbow, and
     every chip is labelled with text, so colour never carries the meaning on
     its own. Charcoal text throughout keeps all of them legible. */
  --chip-blue:    #E6E6FF;
  --chip-yellow:  #FFFCCC;
  --chip-beige:   var(--ia-beige);
  --chip-neutral: var(--ia-gray-light);
  --chip-slate:   #E4E6EA;
  --chip-text:    var(--ia-charcoal);

  /* Square corners are a brand rule; kept as tokens so the intent is legible
     rather than looking like someone forgot to round things. */
  --radius: 0;
  --radius-sm: 0;

  --font: var(--font-sans);
  --font-display: var(--font-serif);
}

html, body {
  height: 100%;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

/* ===== Loading & Error screens ===== */
#loading, #error-screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--text-muted);
}

.loading-logo { width: 48px; height: 48px; opacity: 0.7; }

.loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--radius);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#error-screen a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
#error-screen a:hover { text-decoration: underline; }

/* ===== App shell ===== */
#app { display: flex; flex-direction: column; height: 100vh; }

/* ===== Header ===== */
#header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  flex-shrink: 0;
  z-index: 10;
}

.header-left { display: flex; align-items: center; gap: 10px; }
/* Wide lockup, not the square icon — height-constrained, width auto. */
.logo { height: 20px; width: auto; }
.wordmark { font-size: 15px; font-weight: 600; color: var(--text); }

.header-right { display: flex; align-items: center; }

/* User widget */
.user-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 6px 8px; border-radius: var(--radius);
  color: var(--text);
  transition: background 0.15s;
}
.user-btn:hover { background: var(--bg); }

.avatar {
  width: 32px; height: 32px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.user-name { font-size: 13px; font-weight: 500; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { font-size: 10px; color: var(--text-muted); }

/* User dropdown */
.user-dropdown {
  position: absolute; right: 12px; top: calc(var(--header-h) + 4px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 220px; z-index: 100; overflow: hidden;
}
.user-dropdown-info {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
}
.user-dropdown-email { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.roles-list { display: flex; flex-wrap: wrap; gap: 4px; }
.user-dropdown-action {
  display: block; width: 100%; padding: 10px 16px; font-size: 13px; color: var(--text);
  text-decoration: none; text-align: left; background: none; border: none; border-top: 1px solid var(--border);
  font-family: inherit; cursor: pointer;
}
.user-dropdown-action:first-of-type { border-top: none; }
.user-dropdown-action:hover { background: var(--bg); }
.user-dropdown-action:disabled { cursor: default; opacity: 0.6; }

/* ===== Layout ===== */
#layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ===== Sidebar ===== */
#sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.search-wrap {
  padding: 10px 10px 8px;
  flex-shrink: 0;
}

#search-input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
#search-input::placeholder { color: var(--sidebar-muted); }
#search-input:focus {
  border-color: var(--sidebar-active-border);
  background: rgba(255,255,255,0.12);
}
#search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Tree */
#tree {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 8px;
}

#tree::-webkit-scrollbar { width: 4px; }
#tree::-webkit-scrollbar-track { background: transparent; }
#tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: var(--radius); }

.tree-section { margin-bottom: 4px; }

.tree-section-header {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  color: var(--sidebar-muted);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  cursor: pointer; user-select: none;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tree-section-header:hover { color: var(--sidebar-text); }
.tree-section-header .chevron { font-size: 9px; transition: transform 0.15s; }
.tree-section-header.open .chevron { transform: rotate(90deg); }

.tree-group { margin-bottom: 2px; }

.tree-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 20px;
  color: var(--sidebar-text);
  font-size: 12px; font-weight: 500;
  cursor: pointer; user-select: none;
  border-radius: var(--radius);
  transition: background 0.1s;
}
.tree-group-header:hover { background: var(--sidebar-hover); }
.tree-group-header .chevron { font-size: 9px; transition: transform 0.15s; }
.tree-group-header.open .chevron { transform: rotate(90deg); }
.tree-group-header .count { margin-left: auto; font-size: 11px; color: var(--sidebar-muted); }

.tree-sub-header {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 32px;
  color: var(--sidebar-muted);
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; user-select: none;
  transition: background 0.1s;
}
.tree-sub-header:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.tree-sub-header .chevron { font-size: 9px; transition: transform 0.15s; }
.tree-sub-header.open .chevron { transform: rotate(90deg); }
.tree-sub-header .count { margin-left: auto; font-size: 11px; }

.tree-doc {
  display: flex; align-items: center; gap: 0;
  padding: 4px 10px 4px 42px;
  color: var(--sidebar-muted);
  font-size: 12.5px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  line-height: 1.4;
}
.tree-doc:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.tree-doc.active {
  background: var(--sidebar-active);
  color: var(--ia-white);
  border-left-color: var(--sidebar-active-border);
}
.tree-doc.draft { font-style: italic; }
.tree-doc .draft-badge {
  margin-left: auto;
  font-size: 9px; font-weight: 600;
  background: rgba(255, 243, 10, 0.22); color: var(--ia-yellow);
  padding: 1px 4px; border-radius: var(--radius);
  flex-shrink: 0;
}

/* Search results */
.tree-empty {
  padding: 20px 14px;
  font-size: 12px;
  color: var(--sidebar-muted);
  line-height: 1.6;
  text-align: center;
}

.search-result {
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.1s;
}
.search-result:hover { background: var(--sidebar-hover); }
.search-result.active { background: var(--sidebar-active); }
.search-result-name { color: var(--sidebar-text); font-size: 12.5px; font-weight: 500; }
.search-result-meta { color: var(--sidebar-muted); font-size: 11px; margin-top: 1px; }
.search-result-desc { color: var(--sidebar-muted); font-size: 11.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { padding: 20px 12px; text-align: center; color: var(--sidebar-muted); font-size: 12px; }

/* Filters */
#filters {
  padding: 10px 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group { display: flex; flex-direction: column; gap: 4px; }
.filter-group label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sidebar-muted); }

.filter-group select {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: 12px;
  padding: 5px 8px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a8499' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.filter-group select:focus { border-color: var(--sidebar-active-border); }

/* Tag multi-select dropdown */
#filter-tags { position: relative; }

.tag-select-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: 12px;
  padding: 5px 8px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}
.tag-select-btn:hover, .tag-select-btn.open { border-color: var(--sidebar-active-border); }
.tag-select-btn .chevron { font-size: 9px; color: var(--sidebar-muted); }

.tag-select-dropdown {
  position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
  background: var(--sidebar-lift);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.35);
  z-index: 50;
  overflow: hidden;
}

.tag-select-header {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.tag-select-search {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: 12px;
  padding: 4px 7px;
  outline: none;
}
.tag-select-search::placeholder { color: var(--sidebar-muted); }
.tag-select-search:focus { border-color: var(--sidebar-active-border); }

.tag-clear-btn {
  background: none; border: none; cursor: pointer;
  color: var(--sidebar-muted); font-size: 11px; padding: 2px 4px;
  white-space: nowrap; flex-shrink: 0;
}
.tag-clear-btn:hover { color: var(--bad); }

.tag-select-list {
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}
.tag-select-list::-webkit-scrollbar { width: 3px; }
.tag-select-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: var(--radius); }

.tag-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px; color: var(--sidebar-text);
  transition: background 0.1s;
}
.tag-option:hover { background: var(--sidebar-hover); }
.tag-option input[type=checkbox] {
  accent-color: var(--sidebar-active-border);
  flex-shrink: 0; width: 13px; height: 13px; cursor: pointer;
}

.tag-no-results {
  padding: 10px; font-size: 11px; color: var(--sidebar-muted); text-align: center;
}

/* ===== Content pane ===== */
#content {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

#empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}

#doc-view { display: flex; flex-direction: column; min-height: 100%; }

/* Doc header */
#doc-header {
  padding: 20px 32px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.doc-breadcrumb {
  font-size: 12px; color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 5px;
}
.doc-breadcrumb span { opacity: 0.5; }

.doc-title-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}

.doc-title {
  font-size: 20px; font-weight: 700; color: var(--text);
  word-break: break-word;
}

/* Doc action buttons (view toggle, copy, edit) */
.doc-actions {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.view-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: none; border: none; border-right: 1px solid var(--border);
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.view-btn:last-child { border-right: none; }
.view-btn:hover { background: var(--bg); color: var(--text); }
.view-btn.active { background: var(--bg); color: var(--accent); }

.action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: none; color: var(--text-muted);
  font-size: 12px; font-weight: 500;
  cursor: pointer; text-decoration: none; flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  line-height: 1;
}
.action-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--info-bg); }
.action-btn svg { flex-shrink: 0; }

/* Copy button states */
.copy-btn .icon-copied       { display: none; }
.copy-btn .btn-label-copied  { display: none; }
.copy-btn.copied .icon-default     { display: none; }
.copy-btn.copied .icon-copied      { display: inline; }
.copy-btn.copied .btn-label-default { display: none; }
.copy-btn.copied .btn-label-copied  { display: inline; }
.copy-btn.copied { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }

/* Raw markdown view */
.raw-markdown {
  margin: 0; padding: 20px 24px;
  background: var(--code-bg); border-radius: var(--radius);
  overflow-x: auto; line-height: 1.65;
}
.raw-markdown code {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--code-text); background: none; padding: 0; border-radius: var(--radius);
  white-space: pre-wrap; word-break: break-word;
}

.doc-meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-bottom: 14px;
}

/* Badges / chips */
.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: var(--radius);
  white-space: nowrap;
}
.badge-type-skill       { background: var(--chip-blue);    color: var(--chip-text); }
.badge-type-agent       { background: var(--chip-slate);   color: var(--chip-text); }
.badge-type-instruction { background: var(--chip-yellow);  color: var(--chip-text); }
.badge-type-template    { background: var(--chip-beige);   color: var(--chip-text); }
.badge-type-project     { background: var(--chip-neutral); color: var(--chip-text); border: 1px solid var(--border-strong); }

.badge-status-active { background: var(--ok-bg);   color: var(--ok); }
.badge-status-draft  { background: var(--warn-bg); color: var(--warn); }

.badge-dept { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

.tag-badge {
  font-size: 11px; padding: 2px 7px; border-radius: var(--radius);
  background: var(--surface-sunken); color: var(--text-muted);
  white-space: nowrap;
}

.meta-label { font-size: 11px; color: var(--text-muted); }
.meta-divider { color: var(--border); font-size: 12px; }

.access-rule { font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); }
.access-rule .role-and { font-weight: 600; color: var(--text); }
.access-rule .role-or  { color: var(--text-muted); }

/* Type-specific meta blocks */
.doc-extra {
  margin: 0 32px 0;
  padding: 12px 16px;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12.5px;
}
.doc-extra-row { display: flex; align-items: flex-start; gap: 8px; }
.doc-extra-label { color: var(--text-muted); font-weight: 500; white-space: nowrap; min-width: 80px; }
.doc-extra-value { color: var(--text); word-break: break-all; }
.doc-extra-value code {
  background: var(--chip-slate); padding: 1px 5px; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px;
}
.tools-list { display: flex; flex-direction: column; gap: 3px; }
.tool-name {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--chip-slate); color: var(--text-muted);
  padding: 1px 5px; border-radius: var(--radius);
  display: inline-block;
}

/* Markdown body */
#doc-body {
  padding: 24px 32px 48px;
  flex: 1;
  line-height: 1.7;
  max-width: 860px;
}

/* ===== Frontmatter block ===== */
.fm-block {
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 12.5px;
}

.fm-block .fm-table {
  width: 100%; border-collapse: collapse;
  margin: 0; font-size: 12.5px; /* override markdown-body table margin */
}

.fm-block .fm-table th,
.fm-block .fm-table td {
  border: none;
  border-bottom: 1px solid var(--border); /* override markdown-body all-sides border */
}
.fm-block .fm-table tr:last-child th,
.fm-block .fm-table tr:last-child td { border-bottom: none; }

.fm-block .fm-table th {
  width: 140px; min-width: 120px;
  padding: 7px 12px;
  background: var(--bg);
  font-weight: 600; font-size: 11.5px;
  color: var(--text-muted);
  text-align: left; vertical-align: top;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
}

.fm-block .fm-table td {
  padding: 7px 12px;
  color: var(--text);
  vertical-align: top;
  word-break: break-word;
  line-height: 1.5;
}

.fm-chip {
  display: inline-block;
  background: var(--surface-sunken); color: var(--text-muted);
  font-size: 11px; padding: 1px 7px;
  border-radius: var(--radius); margin: 1px 3px 1px 0;
}

.fm-code {
  background: var(--surface-sunken); color: var(--accent);
  font-family: var(--font-mono); font-size: 11.5px;
  padding: 1px 5px; border-radius: var(--radius);
}

.fm-empty { color: var(--text-muted); }

/* ===== Markdown styles ===== */
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-weight: 700; color: var(--text); margin: 1.5em 0 0.5em; line-height: 1.3;
}
.markdown-body h1 { font-size: 22px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.markdown-body h2 { font-size: 17px; }
.markdown-body h3 { font-size: 15px; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 14px; }

.markdown-body p { margin: 0.75em 0; }
.markdown-body a { color: var(--accent); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }

.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0.75em 0; }
.markdown-body li { margin: 0.25em 0; }

.markdown-body code {
  background: var(--surface-sunken); color: var(--accent);
  font-family: var(--font-mono); font-size: 12.5px;
  padding: 1px 5px; border-radius: var(--radius);
}
.markdown-body pre {
  background: var(--code-bg); color: var(--code-text);
  border-radius: var(--radius); padding: 14px 16px;
  overflow-x: auto; margin: 1em 0;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
}
.markdown-body pre code { background: none; color: inherit; padding: 0; border-radius: var(--radius); }

.markdown-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 12px; margin: 1em 0;
  color: var(--text-muted);
}

.markdown-body table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 13px; }
.markdown-body th { background: var(--bg); font-weight: 600; text-align: left; }
.markdown-body th, .markdown-body td { padding: 7px 12px; border: 1px solid var(--border); }
.markdown-body tr:nth-child(even) td { background: var(--surface-sunken); }

.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }

.markdown-body img { max-width: 100%; border-radius: var(--radius); }

/* Role chips (user widget) */
.role-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 2px 7px; border-radius: var(--radius);
  white-space: nowrap;
}

/* ===== Context Simulator ===== */

/* The simulator's controls need more room than the doc tree does, so the
   sidebar widens when that mode is active. */
#app.sim-mode { --sidebar-w: 316px; }

.mode-switch {
  display: flex;
  gap: 2px;
  margin: 10px 10px 2px;
  padding: 2px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius);
  flex-shrink: 0;
}
.mode-btn {
  flex: 1;
  padding: 5px 8px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--sidebar-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-btn:hover { color: var(--sidebar-text); }
.mode-btn.active { background: var(--sidebar-active); color: var(--ia-white); }

#browse-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
#browse-pane[hidden] { display: none !important; }

#sim-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
#sim-pane[hidden] { display: none !important; }

#sim-controls {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sim-group {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sim-group:last-child { border-bottom: none; }

.sim-group-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-muted);
  margin-bottom: 6px;
}
details.sim-group > summary.sim-group-label {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
details.sim-group > summary::-webkit-details-marker { display: none; }
details.sim-group > summary.sim-group-label::before {
  content: '\25B8';
  font-size: 9px;
  transition: transform 0.15s;
}
details.sim-group[open] > summary.sim-group-label::before { transform: rotate(90deg); }
details.sim-group > summary.sim-group-label:hover { color: var(--sidebar-text); }

#sim-pane select {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 8px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%237a8499' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
#sim-pane select:focus { border-color: var(--sidebar-active-border); }

.sim-checks {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sim-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: 12px;
  cursor: pointer;
}
.sim-check:hover { background: var(--sidebar-hover); }
.sim-check input { accent-color: var(--sidebar-active-border); cursor: pointer; margin: 0; }
.sim-check-label { flex: 1; font-family: var(--font-mono); font-size: 11.5px; }

/* A role the signed-in user doesn't hold: still selectable, but files gated on
   it alone won't come back, so the simulation is approximate. */
.sim-check.outside .sim-check-label { color: var(--sidebar-muted); }
.sim-outside-flag { color: var(--ia-yellow); font-size: 10px; }

/* A slug or type typed in by hand rather than found in the index. */
.sim-check.extra .sim-check-label { font-style: italic; }

.sim-count {
  font-size: 10px;
  color: var(--sidebar-muted);
  font-variant-numeric: tabular-nums;
}

/* Tool picker — the first decision on the panel, so it reads as a heading
   rather than one control among many. */
.sim-group-tool { padding-bottom: 10px; }
.sim-group-tool select {
  font-family: var(--font-mono);
  font-size: 11.5px;
}

/* Per-tool argument controls, drawn from the param descriptors the server
   sends in /simulator/options. */
.sim-args {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sim-arg { display: block; }
.sim-arg-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--sidebar-text);
  margin-bottom: 4px;
}
.sim-arg-req { color: var(--ia-yellow); margin-left: 2px; }
.sim-arg input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 8px;
  outline: none;
}
.sim-arg input:focus { border-color: var(--sidebar-active-border); }
.sim-arg input::placeholder { color: var(--sidebar-muted); font-family: var(--font); }
.sim-arg .sim-note { margin-top: 4px; }

.sim-add {
  width: 100%;
  margin-top: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 5px 8px;
  outline: none;
}
.sim-add:focus { border-style: solid; border-color: var(--sidebar-active-border); }
.sim-add::placeholder { color: var(--sidebar-muted); font-family: var(--font); }

#sim-pane .sim-note {
  font-size: 11px;
  line-height: 1.45;
  color: var(--sidebar-muted);
  margin-top: 6px;
}
#sim-pane .sim-note code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--sidebar-text);
}
.sim-note-warn { color: var(--ia-yellow) !important; }

#sim-json {
  width: 100%;
  background: var(--code-bg);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: var(--code-text);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  padding: 8px;
  outline: none;
  resize: vertical;
}
#sim-json:focus { border-color: var(--sidebar-active-border); }

.sim-json-actions { display: flex; gap: 6px; margin-top: 6px; }
.sim-json-actions button {
  flex: 1;
  padding: 5px 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.sim-json-actions button:hover { background: rgba(255,255,255,0.14); }

#sim-footer {
  flex-shrink: 0;
  padding: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
#sim-run-btn {
  width: 100%;
  padding: 8px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  color: var(--ia-white);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
#sim-run-btn:hover { background: var(--accent-hover); }
#sim-ceiling {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--sidebar-muted);
}
#sim-ceiling strong { color: var(--sidebar-text); }

/* ----- Simulator output pane ----- */

#sim-view { display: flex; flex-direction: column; min-height: 100%; }

#sim-header {
  padding: 20px 32px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sim-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.sim-client-chip {
  font-size: 11px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  white-space: nowrap;
}

.sim-banner {
  font-size: 12.5px;
  line-height: 1.55;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.sim-banner code { font-family: var(--font-mono); font-size: 11.5px; }
.sim-banner-ok   { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.sim-banner-warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.sim-banner details { margin-top: 6px; }
.sim-banner summary { cursor: pointer; font-weight: 600; }
.sim-banner ul { margin: 6px 0 0 18px; }

.sim-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sim-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 86px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sim-stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sim-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

#sim-output {
  flex: 1;
  padding: 0;
  transition: opacity 0.15s;
}
#sim-output.is-stale { opacity: 0.45; }
#sim-output > .markdown-body { padding: 24px 32px 48px; max-width: 860px; line-height: 1.7; }
#sim-output > .raw-markdown { margin: 20px 32px 48px; }

.sim-breakdown { padding: 24px 32px 48px; max-width: 1000px; }
.sim-breakdown h2 {
  font-size: 14px;
  font-weight: 700;
  margin: 24px 0 8px;
}
.sim-breakdown h2:first-child { margin-top: 0; }
.sim-breakdown .sim-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.sim-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.sim-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sim-table tr:hover td { background: var(--bg); }
.sim-table td code { font-family: var(--font-mono); font-size: 11.5px; }
.sim-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-table .bar-cell { width: 30%; min-width: 90px; }
.sim-table .bar {
  display: block;
  height: 6px;
  min-width: 2px;
  background: var(--accent);
  border-radius: var(--radius);
  opacity: 0.75;
}

.sim-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}
.sim-tag-full { background: var(--info-bg); border-color: var(--accent); color: var(--accent); }

/* ===== Simulator: context-window gauge ===== */

.sim-meter {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.sim-gauge {
  --gauge: var(--ok);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.sim-gauge.gauge-good { --gauge: var(--ok); }
.sim-gauge.gauge-warn { --gauge: var(--warn); }
.sim-gauge.gauge-bad  { --gauge: var(--bad); }

.sim-gauge svg { flex: none; display: block; }

.gauge-track {
  fill: none;
  stroke: var(--border);
  stroke-width: 13;
  stroke-linecap: round;
}
.gauge-value {
  fill: none;
  stroke: var(--gauge);
  stroke-width: 13;
  stroke-linecap: round;
  transition: stroke-dasharray 0.35s ease, stroke 0.35s ease;
}
.gauge-tick { stroke: var(--text-muted); stroke-width: 1; opacity: 0.45; }
.gauge-tick-label { font-size: 8.5px; fill: var(--text-muted); font-family: var(--font); }

.gauge-value-label {
  font-size: 26px;
  font-weight: 650;
  fill: var(--text);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
.gauge-sub-label { font-size: 9.5px; fill: var(--text-muted); font-family: var(--font); letter-spacing: 0.04em; }

.sim-gauge-meta { max-width: 260px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.gauge-band {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gauge);
}

#sim-window {
  font-family: var(--font);
  font-size: 11.5px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px 6px;
  cursor: pointer;
}

.gauge-note { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

/* ===== Simulator: rendered payload with provenance margins ===== */

.sim-sections { padding: 20px 32px 64px; max-width: 1120px; }

.sim-section {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.sim-section:first-child { border-top: none; padding-top: 4px; }

.sim-margin {
  position: sticky;
  top: 12px;
  align-self: start;
  border-right: 1px solid var(--border);
  padding-right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.sim-margin-share { display: flex; align-items: baseline; gap: 6px; }
.sim-margin-share .share-pct {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sim-margin-share .share-tokens { font-size: 11px; }

.sim-margin-bar {
  height: 4px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sim-margin-bar span { display: block; height: 100%; border-radius: var(--radius); background: var(--ia-gray-mid); }
.sim-margin-bar.bar-good span { background: var(--ok); }
.sim-margin-bar.bar-warn span { background: var(--ia-yellow); }
.sim-margin-bar.bar-bad  span { background: var(--bad); }

.sim-margin-note { line-height: 1.5; }

.sim-margin-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.sim-margin-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--text-muted);
  white-space: nowrap;
}
.sim-margin-badge.badge-project      { background: var(--chip-blue); color: var(--chip-text); }
.sim-margin-badge.badge-workspace-type { background: var(--chip-beige); color: var(--chip-text); }
.sim-margin-badge.badge-client       { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); }
.sim-margin-badge.badge-arg          { background: var(--chip-yellow); color: var(--chip-text); }

.sim-margin-files { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; }

.sim-margin-file {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text-muted);
}
.sim-margin-file:hover { background: var(--bg); color: var(--accent); }
.sim-margin-file .file-name { font-family: var(--font-mono); font-size: 11px; word-break: break-word; }
.sim-margin-file .file-meta { font-size: 10px; opacity: 0.8; }

.sim-margin-more > summary {
  cursor: pointer;
  padding: 3px 0;
  font-size: 10.5px;
  color: var(--text-muted);
}
.sim-margin-more > summary:hover { color: var(--accent); }

.sim-margin-empty { font-style: italic; opacity: 0.75; }

.sim-section-body { line-height: 1.7; min-width: 0; }
.sim-section-body > h2:first-child { margin-top: 0; }

@media (max-width: 1080px) {
  .sim-section { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sim-margin {
    position: static;
    border-right: none;
    border-left: 2px solid var(--border);
    padding: 0 0 0 12px;
  }
}

/* Native dropdown popups render on the OS surface, not the sidebar, so the
   sidebar's low-contrast text colour reads as "disabled" there. Force a dark
   popup and full-strength option text. */
.filter-group select,
#sim-pane select {
  color-scheme: dark;
}
.filter-group select option,
.filter-group select optgroup,
#sim-pane select option,
#sim-pane select optgroup {
  background: var(--sidebar-bg);
  color: var(--ia-beige);
}
#sim-pane select optgroup,
.filter-group select optgroup {
  color: var(--sidebar-muted);
  font-style: normal;
}

/* ==========================================================================
   Brand typography layer
   Appended last so it wins over the base rules above without needing them
   rewritten. Instrument Serif carries display text, Instrument Sans carries
   copy, Roboto Mono carries labels, nav and buttons (uppercase, 2px tracking)
   — the same hierarchy the landing page uses.
   ========================================================================== */

/* Display: the document title and markdown headings. Regular weight only —
   the guidelines rule out bold and uppercase for the serif. */
.doc-title,
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.doc-title { font-size: 34px; line-height: 1.12; }
.markdown-body h1 { font-size: 28px; }
.markdown-body h2 { font-size: 22px; }
.markdown-body h3 { font-size: 19px; }

/* Wordmark next to the logo reads as a label, not a heading. */
.wordmark {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

/* Labels, nav and controls in the mono voice. */
.tree-group-header,
.mode-btn,
.badge,
.tag-badge,
.section-label,
.sim-margin-badge,
.action-btn,
.copy-btn {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}

.badge, .tag-badge, .sim-margin-badge { font-size: 10px; font-weight: 600; }
.tree-group-header { font-size: 10.5px; }
.mode-btn, .action-btn, .copy-btn { font-size: 11px; font-weight: 600; }

/* Draft badges are set in mono already; keep them from inheriting the
   uppercase tracking twice over. */
.tree-doc .draft-badge { letter-spacing: 1px; }

/* Yellow is the active/selected marker throughout, so give it a consistent
   fine rule rather than a filled block. */
.mode-btn.active {
  border-bottom: 2px solid var(--ia-yellow);
}