/* Utility */
.text-muted { color: var(--pico-muted-color); }
.btn-sm { font-size: 0.85em; padding: 0.2em 0.6em; }
.inline-form { margin: 0; }

/* Nomolith base layout */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* Nav */
nav ul li a { font-weight: bold; }

/* Search snippets */
.snippet { color: var(--pico-muted-color); font-size: 0.9em; }

/* Publication badge */
.pub-badge { font-size: 0.75em; background: var(--pico-secondary-background); padding: 0.15em 0.5em; border-radius: 4px; }

/* Coverage matrix */
.coverage-table { overflow-x: auto; }
.coverage-table table { min-width: 52rem; }
.coverage-group th { background: var(--pico-card-sectioning-background-color); }
.coverage-status { display: inline-flex; align-items: center; gap: 0.3em; font-weight: bold; }
.coverage-status svg { width: 1em; height: 1em; }
.coverage-complete { background: color-mix(in srgb, var(--pico-ins-color) 16%, transparent); color: var(--pico-ins-color); }
.coverage-partial { background: var(--pico-mark-background-color); color: var(--pico-mark-color); }

/* Search results layout: main results + wiki sidebar side by side */
.search-layout { display: flex; gap: 2rem; align-items: flex-start; }
.search-main { flex: 1; min-width: 0; }

/* Wiki search lane — kept visually separate from authoritative results
   (synthesized overviews, never ranked alongside the sources they summarize) */
.wiki-lane { flex: 0 0 420px; margin-top: 0; }
.wiki-lane-label { margin-bottom: 0.5rem; font-weight: bold; }
.wiki-lane-tag { font-size: 0.7em; font-weight: normal; color: var(--pico-muted-color); text-transform: uppercase; letter-spacing: 0.03em; margin-left: 0.5em; }

@media (max-width: 768px) {
  .search-layout { flex-direction: column; }
  .wiki-lane { flex: 1 1 auto; width: 100%; }
}

/* Light theme overrides for WCAG 2.1 AA compliance.
   Use element+attribute selectors (specificity 0,1,1) to beat PicoCSS
   violet's :root defaults (specificity 0,1,0). */
[data-theme="light"] .pub-badge { background: #dde2ea; } /* #373c44 text → 8.53:1 */
html[data-theme="light"] { --pico-muted-color: #757575; } /* on #fff → 4.61:1 */

/* Document body */
.doc-content { max-width: 80ch; }

/* Footnotes block — h2#footnotes is the top cap, div.footnote is the body */
.doc-content h2#footnotes {
    margin-bottom: 0;
    padding: 0.6em 1em 0.5em;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--pico-card-sectioning-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}
.doc-content div.footnote {
    margin-top: 0;
    padding: 0.75em 1em 0.85em;
    font-size: 0.875em;
    background: var(--pico-card-sectioning-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0 0 6px 6px;
}
.doc-content div.footnote hr { display: none; }
.doc-content div.footnote ol { margin: 0; padding-left: 1.5em; }
.doc-content div.footnote li { margin-bottom: 0.4em; }
.doc-content div.footnote li p { margin: 0; }


/* SSO tenant display on profile page */
.entra-org { display: inline-flex; align-items: center; gap: 0.35em; }
.entra-org-icon { width: 0.9em; height: 0.9em; flex-shrink: 0; }

/* Admin-audience banner on help pages */
.admin-audience-banner { display: flex; align-items: flex-start; gap: 0.65em; margin: 1.5rem 0 1.75rem; padding: 0.75em 1.25em; border-left: 4px solid var(--pico-primary); background: var(--pico-card-sectioning-background-color); border-radius: 0 6px 6px 0; font-size: 0.9em; color: var(--pico-color); max-width: 80ch; }
.admin-banner-icon { display: block; flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: 0.2em; color: var(--pico-primary); }
.admin-banner-label { font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pico-primary); margin-bottom: 0.2em; }
/* AI-generated LLM-wiki notice banner */
.llm-wiki-banner { display: flex; align-items: flex-start; gap: 0.65em; margin: 1.5rem 0 1.75rem; padding: 0.75em 1.25em; border-left: 4px solid var(--pico-primary); background: var(--pico-card-sectioning-background-color); border-radius: 0 6px 6px 0; font-size: 0.9em; color: var(--pico-color); max-width: 80ch; }
.llm-wiki-banner-icon { display: block; flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: 0.2em; color: var(--pico-primary); }
.llm-wiki-banner-label { font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pico-primary); margin-bottom: 0.2em; }
.llm-wiki-banner-meta { margin-top: 0.5em; font-size: 0.85em; color: var(--pico-muted-color); }
.doc-content pre { overflow-x: auto; }

/* License list */
ul.license-list { padding-left: 1.5em; }
ul.license-list li { list-style: none; margin-bottom: 0.4em; }

/* Inline mark */
mark { background: var(--pico-mark-background-color); padding: 0 0.15em; }

/* API key flash */
.flash-key { font-family: monospace; background: var(--pico-code-background-color); padding: 0.2em 0.5em; border-radius: 4px; word-break: break-all; }

/* Footer */
body > footer { padding-bottom: 0; margin-bottom: 0; }
#footer-grass { display: block; width: 100%; image-rendering: pixelated; }

/* Nav brand */
.nav-brand { font-size: 1.4rem; }
.nav-brand a:hover { text-decoration: none; }

/* Module picker */
.module-form { display: inline; }
.module-form select { margin: 0; padding: 0.2em 0.5em; font-size: 0.85em; }

/* Flash messages */
.flash-error { border-left: 4px solid var(--pico-del-color); }

/* Lore modal */
#lore-unlocked-by { font-style: italic; padding: 0 1rem; }

/* Profile — API keys */
.api-key-revoked { opacity: 0.5; }

/* Profile — theme picker */
.theme-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.theme-row { display: flex; align-items: center; gap: 0.6rem; }
.theme-radio { margin: 0; flex-shrink: 0; }
.theme-label { width: 7rem; margin: 0; cursor: pointer; }
.theme-swatches { display: flex; gap: 0.4rem; flex-shrink: 0; }
.theme-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); flex-shrink: 0; }

/* Profile — model preferences */
.info-banner { border-left: 4px solid var(--pico-primary); margin: 0.5rem 0; padding: 0.5rem 1rem; }
.reembed-msg { margin-bottom: 0.4em; }
.model-option { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.4em; }
.model-purpose { margin-bottom: 1rem; }
.model-purpose > strong { display: block; margin-bottom: 0.3em; }
.model-price { font-size: 0.8em; color: var(--pico-muted-color); margin-left: 0.25em; }

/* Profile — lore reset */
.lore-reset-form { margin-top: 0.5rem; }

/* Constitution doc */
.constitution-annotation { display: none; border-left: 3px solid var(--pico-primary); padding: 0.5em 1em; margin: 0.75em 0; background: color-mix(in srgb, var(--pico-primary) 6%, transparent); font-size: 0.9em; color: var(--pico-muted-color); }
body.annotations-visible div.constitution-annotation { display: block; }
body.annotations-visible span.constitution-annotation { display: inline; }
/* #annotation-toggle inherits sizing from .doc-action-btn (set in the template) so it matches the Official Source button. */

/* Login page */
#login-form { max-width: 400px; margin: 4rem auto; }

/* OAuth authorization page */
#oauth-form { max-width: 420px; margin: 4rem auto; }
.oauth-error { color: var(--pico-color-red-500); }
.btn-row { display: flex; gap: 1rem; }

/* External-link icon (opens in new tab) */
.ext-link::after {
  content: '';
  display: inline-block;
  width: 0.65em;
  height: 0.65em;
  margin-left: 0.25em;
  vertical-align: middle;
  opacity: 0.75;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1A.5.5 0 001 1.5v7a.5.5 0 00.5.5h7a.5.5 0 00.5-.5V6H8v2H2V2h2V1H1.5zM5 1l1.5 1.5L4 5l1 1 2.5-2.5L9 5V1H5z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1A.5.5 0 001 1.5v7a.5.5 0 00.5.5h7a.5.5 0 00.5-.5V6H8v2H2V2h2V1H1.5zM5 1l1.5 1.5L4 5l1 1 2.5-2.5L9 5V1H5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Search rocket animation */
@keyframes nl-rocket-move {
  from { left: -3.5em; }
  to   { left: 115%; }
}
@keyframes nl-rocket-fade {
  0%, 4%  { opacity: 0; }
  7%      { opacity: 1; }
  83%     { opacity: 1; }
  92%     { opacity: 0; }
  100%    { opacity: 0; }
}
.nl-rocket-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--pico-border-radius);
  margin-bottom: var(--pico-spacing, 1rem);
}
.nl-rocket-wrap > fieldset[role="group"] { margin-bottom: 0; }
.nl-rocket-track {
  display: none;
  position: absolute;
  top: 0; bottom: 0;
  left: -3.5em;
  width: 3em;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1;
  will-change: left;
}
.nl-rocket-track span { transform: rotate(45deg); display: flex; align-items: center; }
.nl-rocket-icon { color: hsl(38, 100%, 62%); display: block; }
.nl-rocket-wrap.is-searching .nl-rocket-track {
  display: flex;
  animation:
    nl-rocket-move 2s cubic-bezier(0.4, 0, 1, 0.95) infinite,
    nl-rocket-fade 2s linear infinite;
}

/* Search page */
.cl-warning { color: var(--pico-muted-color); }
.pub-badge-cl { color: var(--pico-secondary-inverse); }
.result-meta { color: var(--pico-muted-color); font-size: 0.85em; }

/* Browse pages — inline item links and metadata */
.item-link { font-size: 0.8em; margin-left: 0.5em; }
.item-link-zotero { text-decoration: line-through; }
.item-meta { margin-left: 0.5em; color: var(--pico-muted-color); }

/* Doc page — action buttons in h1 */
.doc-action-btn { font-size: 0.55em; vertical-align: middle; margin-left: 0.5em; }
.doc-action-btn-zotero { text-decoration: line-through; }

/* Doc-page flag badges (countries, US states, IGOs) */
[class^="flag-"], [class*=" flag-"] { display: inline-flex; align-items: center; vertical-align: middle; }
[class^="flag-"]::before, [class*=" flag-"]::before {
  content: '';
  display: inline-block;
  width: 1.2em;
  height: 0.85em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.5em;
  transform: translateY(-0.05em);
}
.flag-us::before    { background-image: url('/static/img/flags/us.svg'); }
.flag-un::before    { background-image: url('/static/img/flags/un.svg'); }
/* US state flags: static/img/flags-us-states/flag-us-{2-letter abbreviation}.svg  e.g. flag-us-ca.svg, flag-us-de.svg */
.flag-us-ca::before { background-image: url('/static/img/flags-us-states/flag-us-ca.svg'); }
.flag-us-de::before { background-image: url('/static/img/flags-us-states/flag-us-de.svg'); }
.flag-us-ut::before { background-image: url('/static/img/flags-us-states/flag-us-ut.svg'); }
.flag-us-nd::before { background-image: url('/static/img/flags-us-states/flag-us-nd.svg'); }
.flag-us-fl::before { background-image: url('/static/img/flags-us-states/flag-us-fl.svg'); }


/* Doc page — FR correction/amendment notice */
.fr-correction-notice { border-left: 4px solid #f59e0b; background: color-mix(in srgb, #f59e0b 8%, transparent); padding: 0.6rem 1rem; margin: 0.75rem 0; border-radius: 0 var(--pico-border-radius) var(--pico-border-radius) 0; }

/* Doc page — embedded PDF */
.pdf-embed { width: 100%; height: 80vh; }

/* CRS report */
.crs-report .TOC { background: var(--pico-card-sectioning-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
.crs-report .TOC h1 { font-size: 1rem; margin-bottom: 0.5rem; }
.crs-report ul { list-style: disc; }
.crs-report .TOC ul { list-style: none; padding-left: 0; }
.crs-report .TOC li.TOC1 { padding-left: 0; }
.crs-report .TOC li.TOC2 { padding-left: 1.5rem; }
.crs-report .TOC li.TOC3 { padding-left: 3rem; }
.crs-report .ReportSummary { border-left: 4px solid var(--pico-primary); padding: 0.75rem 1rem; margin-bottom: 1.5rem; background: color-mix(in srgb, var(--pico-primary) 6%, transparent); }
.crs-report .Footnotes { border-top: 1px solid var(--pico-muted-border-color); margin-top: 2rem; padding-top: 1rem; font-size: 0.85em; }
.crs-report .Hyperlink { color: inherit; }

/* Stats page — File Count */
.chart-row { display: flex; gap: 24px; flex-wrap: wrap; margin: 8px 0 24px; }
#file-histogram { width: 700px; height: 280px; }
#doc-treemap { width: 700px; height: 350px; }

/* Stats page — Pipeline History */
#pipeline-history { width: 100%; max-width: 1424px; height: 320px; }

/* Stats page — Dependency Graph */
#pipeline-graph { width: 100%; height: 420px; }
.graph-legend { display: flex; gap: 24px; flex-wrap: wrap; margin: 6px 0 20px; font-size: 12px; color: var(--pico-muted-color); }
.graph-legend svg { vertical-align: middle; margin-right: 4px; }
.graph-legend-sep { margin-left: 8px; border-left: 1px solid #444; padding-left: 12px; }

/* Stats page — Waterfall */
#pipeline-waterfall { width: 100%; height: 520px; }

/* Codex */
.codex-layout { display: flex; gap: 1.5rem; align-items: flex-start; min-height: 70vh; }
.codex-sidebar { width: 28%; flex-shrink: 0; }
.codex-content { flex: 1; min-width: 0; }
ul.codex-category-tabs { list-style: none; padding: 0; margin: 0 0 1.25rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
ul.codex-category-tabs li { margin: 0; list-style: none; }
ul.codex-category-tabs a, ul.codex-category-tabs span { display: inline-block; padding: 0.25em 0.75em; border-radius: 4px; font-size: 0.85em; font-weight: bold; text-decoration: none; border: 1px solid var(--pico-muted-border-color); color: var(--pico-color); }
ul.codex-category-tabs a:hover { background: var(--pico-secondary-background); }
ul.codex-category-tabs .active { background: var(--pico-primary-background); color: var(--pico-primary-inverse); border-color: var(--pico-primary); }
.codex-entry-list { list-style: none; padding: 0; margin: 0; }
.codex-entry-list li { margin: 0; }
.codex-entry-list a, .codex-entry-list .locked { display: block; padding: 0.4em 0.6em; border-radius: 4px; text-decoration: none; font-size: 0.9em; line-height: 1.4; }
.codex-entry-list a { color: var(--pico-color); }
.codex-entry-list a:hover { background: var(--pico-secondary-background); }
.codex-entry-list a.selected { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
.codex-entry-list .locked { color: var(--pico-muted-color); cursor: default; font-style: italic; }
.codex-placeholder { color: var(--pico-muted-color); font-style: italic; padding: 2rem 0; }
.codex-entry-title { margin-bottom: 0.25rem; }

/* Index — lore opt-in banner */
#lore-mode-decide { border: 1px solid var(--pico-form-element-active-border-color); }

/* Index — search input */
.search-input { caret-color: var(--pico-primary); caret-shape: block; }
/* PicoCSS zeroes border-radius on inputs inside [role=group], making the focus box-shadow rectangular.
   Override just the left corners to match the group's border-radius so the glow rounds correctly.
   Also suppress the browser's native outline, which becomes visible once the box-shadow aligns. */
fieldset[role="group"] .search-input:not([type=submit]):not([type=button]) {
    border-top-left-radius: var(--pico-border-radius);
    border-bottom-left-radius: var(--pico-border-radius);
}
fieldset[role="group"] .search-input:focus { outline: none; }
/* Suppress PicoCSS's focus-with-input box-shadow on the group — it uses the unfocused border color (gray),
   which shows as a gray ring now that the input's pink glow no longer masks it. The border color
   change (gray→active) is sufficient focus indication. */
fieldset[role="group"]:has(.search-input:focus) { --pico-group-box-shadow: none; }

/* Login — SSO (Microsoft Entra ID) */
.ms-signin-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #ffffff;
  color: #5e5e5e;
  border: 1px solid #8c8c8c;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.ms-signin-btn:hover {
  background: #f3f2f1;
  color: #323130;
  border-color: #323130;
  text-decoration: none;
}
.sso-hint {
  font-size: 0.85em;
  color: var(--pico-muted-color, #888);
  margin-top: 0.25rem;
}

/* Index — publications grid */
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 1rem; }
.pub-grid article { position: relative; min-height: 4rem; }
.pub-description { color: var(--pico-muted-color); }
.pub-count { position: absolute; bottom: 0.5rem; right: 0.75rem; font-size: 0.7rem; color: var(--pico-muted-color); }

/* Agents — chat UI (#384) */
.agent-experimental-warning { display: flex; align-items: flex-start; gap: 0.65em; margin: 0 0 1.25rem; padding: 0.75em 1.25em; border-left: 4px solid var(--pico-del-color); background: color-mix(in srgb, var(--pico-del-color) 8%, transparent); border-radius: 0 6px 6px 0; font-size: 0.9em; color: var(--pico-color); max-width: 80ch; }
.agent-experimental-warning-icon { display: block; flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: 0.2em; color: var(--pico-del-color); }
.agent-experimental-warning-label { font-size: 0.75em; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pico-del-color); margin-bottom: 0.2em; }
.agent-chat { display: flex; flex-direction: column; gap: 1rem; }
.agent-messages {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 16rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
}
.agent-message { max-width: 80%; padding: 0.5em 0.8em; border-radius: 8px; white-space: pre-wrap; }
.agent-message-user {
  align-self: flex-end;
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}
.agent-message-agent { align-self: flex-start; background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); }
.agent-message-error { align-self: flex-start; border-left: 4px solid var(--pico-del-color); color: var(--pico-del-color); }
/* Bonus haiku (#637): a quiet, centred poem, not another chat bubble. The
   line breaks are load-bearing, hence pre-line. */
.agent-haiku {
  align-self: center;
  max-width: 80%;
  margin: 0.4rem 0;
  padding: 0.6em 1.2em;
  border-left: 2px solid var(--pico-muted-border-color);
  border-right: 2px solid var(--pico-muted-border-color);
  font-style: italic;
  text-align: center;
  white-space: pre-line;
  color: var(--pico-muted-color);
}
.agent-thinking, .agent-tool-call {
  align-self: flex-start;
  font-size: 0.85em;
  font-style: italic;
  color: var(--pico-muted-color);
}
.agent-tool-call { font-style: normal; font-family: var(--pico-font-family-monospace, monospace); }
.agent-thinking > summary { cursor: pointer; list-style: none; }
.agent-thinking > summary::-webkit-details-marker { display: none; }
.agent-thinking > summary::after { display: none; }  /* suppress Pico's own chevron */
.agent-thinking-head { display: inline-flex; align-items: center; gap: 0.4em; }
.agent-thinking-head svg { width: 1em; height: 1em; }
.agent-thinking-chevron { transition: transform 0.15s ease; }
.agent-thinking[open] .agent-thinking-chevron { transform: rotate(90deg); }
.agent-thinking-body { margin-top: 0.4em; padding-left: 1.2em; white-space: pre-wrap; font-style: normal; }
.agent-thinking-progress { display: block; height: 0.3rem; margin: 0.3em 0 0; max-width: 12rem; }
.agent-chat-form fieldset[role="group"] { margin: 0; }
.agent-status {
  font-size: 0.85em;
  color: var(--pico-muted-color);
  text-align: left;
  min-height: 1.2em;
}
.agent-cost { font-variant-numeric: tabular-nums; }
.agent-chat-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.agent-notify-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85em;
  color: var(--pico-muted-color);
  margin: 0;
  cursor: pointer;
}
.agent-notify-toggle input[type="checkbox"] { margin: 0; }

/* Feedback form + dialog (#596) */
.feedback-meta { display: block; margin-top: 0.5rem; color: var(--pico-muted-color); }
.feedback-form { max-width: 40rem; }
.feedback-status { margin: 0 0 var(--pico-block-spacing-vertical); font-size: 0.9em; color: var(--pico-muted-color); }
.feedback-status-error { color: var(--pico-del-color); }
#feedback-modal footer { display: flex; gap: 1rem; justify-content: flex-end; }