/* ===== 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 {
  /* Wide enough for a four-deep tree; drag the handle to change it. */
  --sidebar-w: 300px;

  /* Every control on the browse toolbar is exactly this tall. Set the height
     and drop vertical padding rather than trying to make paddings agree. */
  --control-h: 36px;
  --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; }

.header-home {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.header-home:hover .wordmark { color: var(--accent); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text-muted); cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
.icon-btn[aria-pressed="false"] { color: var(--accent); }
/* 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;
}

#app.sidebar-hidden #sidebar,
#app.sidebar-hidden #sidebar-resizer { display: none; }

/* Drag to resize, double-click to reset. Four pixels wide with a wider
   invisible grab area, so it is easy to hit without drawing attention. */
#sidebar-resizer {
  width: 4px;
  flex-shrink: 0;
  cursor: col-resize;
  background: var(--sidebar-bg);
  position: relative;
}
#sidebar-resizer::after {
  content: '';
  position: absolute; inset: 0 -3px;
}
#sidebar-resizer:hover { background: var(--sidebar-active-border); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing #sidebar-resizer { background: var(--sidebar-active-border); }

.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 hierarchy
   Four levels deep in a 300px column only reads if the levels look different
   from each other. Sections are mono eyebrows, groups are the only sans-serif
   rows at full strength, sub-groups drop back to mono, and documents are the
   lightest thing on screen. Indentation is carried by .tree-children, which
   also draws the guide rule that ties a branch together. */

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

.tree-children {
  margin-left: 17px;
  padding-left: 1px;
  border-left: 1px solid rgba(255, 255, 255, 0.10);
}
/* The outermost level sits flush — a guide rule against the panel edge would
   just be a second border. */
.tree-children-root {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

.tree-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-section-header,
.tree-group-header,
.tree-sub-header,
.tree-doc {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.tree-section-header .chevron,
.tree-group-header .chevron,
.tree-sub-header .chevron {
  font-size: 8px;
  flex-shrink: 0;
  width: 8px;
  opacity: 0.7;
  transition: transform 0.15s;
}
.tree-section-header.open .chevron,
.tree-group-header.open .chevron,
.tree-sub-header.open .chevron { transform: rotate(90deg); }

/* Level 1 — section eyebrow */
.tree-section-header {
  padding: 14px 10px 6px;
  color: var(--sidebar-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.tree-section-header:hover { color: var(--sidebar-text); }

/* Level 2 — the only full-strength rows in the tree */
.tree-group { margin-bottom: 1px; }

.tree-group-header {
  padding: 6px 8px 6px 10px;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 600;
}
.tree-group-header:hover { background: var(--sidebar-hover); }

/* Level 3 — mono again, so it cannot be mistaken for a document */
.tree-sub-header {
  padding: 5px 8px 5px 9px;
  color: var(--sidebar-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tree-sub-header:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }

/* Level 4 — documents, the lightest rows on screen */
.tree-doc {
  padding: 4px 8px 4px 11px;
  color: rgba(240, 234, 223, 0.72);
  font-size: 12.5px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  line-height: 1.45;
}
.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);
  font-weight: 500;
}
.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;
}

.tree-group-header .count,
.tree-sub-header .count {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--sidebar-muted);
  font-weight: 500;
}

/* Jump straight to a level's browse page. Hidden until the row is hovered so
   the resting tree stays quiet. */
.tree-goto {
  display: none;
  align-items: center;
  flex-shrink: 0;
  margin-left: 4px;
  color: var(--sidebar-muted);
}
.tree-group-header:hover .tree-goto,
.tree-sub-header:hover .tree-goto { display: inline-flex; }
.tree-goto:hover { color: var(--sidebar-active-border); }

/* 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 */
/* ===== Content pane ===== */
#content {
  flex: 1;
  overflow-y: auto;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

/* ===== Home ===== */

#home-view, #browse-view { flex: 1; }

.home-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 32px 64px;
}

.home-eyebrow { color: var(--text-muted); font-size: 10px; margin-bottom: 12px; }

.home-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.home-sub {
  margin-top: 12px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
}

.home-roles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }

.home-search { margin: 32px 0 36px; }
.home-search input {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s;
}
.home-search input::placeholder { color: var(--text-faint); }
.home-search input:focus { border-color: var(--accent); }

/* Section cards. One card language across the site — this is the grid from the
   public landing page, on the docs app's surfaces. */
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  border: 1px solid var(--border-strong);
  background: var(--border);
  gap: 1px;
}

.section-card {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 26px 24px 28px;
  background: var(--surface);
  border-top: 3px solid transparent;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.section-card:hover { background: var(--surface-sunken); border-top-color: var(--ia-yellow); }

.section-card-icon { color: var(--accent); line-height: 0; margin-bottom: 4px; }
.section-card-title { font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1.1; }
.section-card-blurb { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.section-card-count {
  margin-top: 8px; padding-top: 12px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}

.section-card-alt { background: var(--bg); }
.section-card-alt:hover { background: var(--surface-sunken); }

.home-recent { margin-top: 44px; }

/* ===== Browse ===== */

.browse-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px 32px 64px;
}

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--text-muted);
}
.crumbs a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--text-muted); text-decoration: none;
}
.crumbs a:hover { color: var(--accent); }
.crumbs a:hover span { text-decoration: underline; }
.crumbs a .icon { flex-shrink: 0; }
.crumb-sep { opacity: 0.45; }

.browse-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: 12px;
}
.browse-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
}
.browse-count {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--text-muted);
}
.browse-blurb {
  margin-top: 8px; max-width: 68ch;
  font-size: 14.5px; line-height: 1.6; color: var(--text-muted);
}

/* Toolbar */
.browse-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 24px 0 8px;
  padding: 12px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

#browse-filter {
  flex: 1 1 240px;
  min-width: 180px;
  height: var(--control-h);
  padding: 0 12px;
  font-family: inherit; font-size: 13px; color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s;
}
#browse-filter::placeholder { color: var(--text-faint); }
#browse-filter:focus { border-color: var(--accent); }

.facet { position: relative; flex-shrink: 0; }
.facet > summary {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--control-h);
  padding: 0 11px;
  list-style: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s, color 0.15s;
}
.facet > summary::-webkit-details-marker { display: none; }
.facet > summary:hover { border-color: var(--border-strong); color: var(--text); }
.facet[open] > summary { border-color: var(--accent); color: var(--accent); }
/* Floated off the button's corner rather than sitting inside the summary:
   in flow it changed the control's width every time a filter was picked,
   which shoved the whole toolbar sideways. */
.facet-count {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--accent); color: var(--accent-text);
  font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  border: 1px solid var(--surface);
  border-radius: var(--radius);
  pointer-events: none;
}

.facet-menu {
  position: absolute; top: calc(100% + 3px); left: 0; z-index: 20;
  min-width: 210px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.facet-options { max-height: 260px; overflow-y: auto; padding: 5px; }

/* What is currently picked, pinned above the scroll area so a long tag list
   never hides your own selection. The options list keeps them too, ticked and
   in place, so removing one here does not reshuffle the list below. */
.facet-picked {
  display: flex; flex-direction: column; gap: 7px;
  padding: 8px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.facet-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }

.facet-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 6px 3px 8px;
  font-family: inherit; font-size: 11.5px; color: var(--ia-charcoal);
  background: var(--chip-blue);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.facet-chip:hover { border-color: var(--bad); background: var(--bad-bg); }
.facet-chip-x { font-size: 13px; line-height: 1; opacity: 0.55; }
.facet-chip:hover .facet-chip-x { opacity: 1; color: var(--bad); }

.facet-clear {
  align-self: flex-start;
  padding: 0;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--accent);
  background: none; border: none;
  cursor: pointer;
}
.facet-clear:hover { text-decoration: underline; }

.facet-search {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-family: inherit; font-size: 12.5px; color: var(--text);
  background: var(--surface);
  border: none; border-bottom: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
}
.facet-search::placeholder { color: var(--text-faint); }
.facet-search:focus { border-bottom-color: var(--accent); }
.facet-option {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; cursor: pointer;
  font-size: 12.5px; color: var(--text);
}
.facet-option:hover { background: var(--bg); }
.facet-option input { accent-color: var(--accent); cursor: pointer; }

/* Card detail toggles: one segmented control of icons, so what a card shows is
   a single place on the toolbar rather than three competing text buttons. */
.browse-toggles {
  display: inline-flex;
  flex-shrink: 0;
  height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.browse-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px;
  height: 100%;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.browse-toggle:first-child { border-left: none; }
.browse-toggle:hover { background: var(--bg); color: var(--text); }
.browse-toggle.on {
  background: var(--ia-yellow);
  color: var(--ia-charcoal);
}

/* The body control has three positions rather than two, so it cannot just be
   on or off: names-only reads as suppressed, the default description sits
   neutral like an untouched toggle, and only the extra summary lights up. */
.browse-toggle.body-none { color: var(--text-faint); background: var(--surface-sunken); }
.browse-toggle.body-none:hover { color: var(--text-muted); background: var(--bg); }
.browse-toggle.body-description { color: var(--text-muted); }
.browse-toggle.body-full { background: var(--ia-yellow); color: var(--ia-charcoal); }

.browse-clear {
  flex-shrink: 0;
  margin-left: auto;
  height: var(--control-h);
  padding: 0 11px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.browse-clear:hover { border-color: var(--border-strong); color: var(--text); }

/* Groups */
.browse-group { margin-top: 30px; }
.browse-group:first-child { margin-top: 22px; }

.browse-group-label {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track-label);
  color: var(--text);
}
.browse-group-label::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--border);
}
.browse-group-count {
  order: 3;
  font-weight: 500;
  color: var(--text-muted);
}

/* Document cards — one per line, description-forward */
.card-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
}

.doc-card {
  display: block;
  padding: 14px 18px 15px;
  border-top: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: var(--surface);
  color: inherit; text-decoration: none;
  transition: background 0.12s var(--ease), border-color 0.12s var(--ease);
}
.doc-card:first-child { border-top: none; }
.doc-card:hover { background: var(--surface-sunken); border-left-color: var(--ia-yellow); }

.doc-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.doc-card-icon { color: var(--accent); line-height: 0; }
.doc-card-name { font-size: 15px; font-weight: 600; color: var(--text); }

/* The lookup key, under the readable title. Worth showing: it is what you pass
   to get_skill / get_instructions and what other documents reference. */
.doc-card-key {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-faint);
}

.doc-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-size: 13.5px; line-height: 1.55; color: var(--text-muted);
}

/* The summary is the long routing text; only 42 of 158 documents carry one, so
   it reads as a quieter aside under the description rather than a second
   paragraph competing with it. */
.doc-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted);
}

/* Recency, top-right. The absolute date is in the title attribute. */
.doc-card-when {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Labelled badge rows — "Tags: …" / "Access: …" */
.card-meta-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  margin-top: 8px;
}
.card-meta-label {
  flex-shrink: 0;
  min-width: 46px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-faint);
}
.card-meta-badges { display: flex; flex-wrap: wrap; gap: 4px; }

.role-badge { font-weight: 600; }
.badge-public     { background: var(--ok-bg);  color: var(--ok); }
.badge-admin-only { background: var(--bad-bg); color: var(--bad); }

/* Access states in the simulator's breakdown table, where access is still
   rendered as prose rather than badges. */
.access-admin  { color: var(--bad); font-weight: 600; }
.access-public { color: var(--ok); font-weight: 600; }

/* A folder card leads somewhere rather than being a leaf, so it leans on the
   blue accent instead of the yellow edge the documents use. */
.doc-card-folder .doc-card-name { font-family: var(--font-display); font-weight: 400; font-size: 21px; }
.doc-card-folder:hover { border-left-color: var(--accent); }

.browse-empty {
  padding: 32px 0;
  font-size: 14px; color: var(--text-muted);
}
.browse-empty a { color: var(--accent); }

/* Narrow windows: the cards and grid already reflow, the head needs help. */
@media (max-width: 720px) {
  .home-inner, .browse-inner { padding-left: 20px; padding-right: 20px; }
  .browse-clear { margin-left: 0; }
}

#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);
}