/* UI surfaces are independent of the selected Agda palette. Keep the book's
   layout, code gutters, typography and interaction geometry in outcrop.css. */
:root {
  --text-bg: #fcfcfd; --text-fg: #252a34; --fg-alt: #596273;
  --primary: #285fa5; --link-color: #7244b7;
  --surface-muted: #f1f3f6; --popup-bg: #fff;
  --ruler: #d4dae3; --input-border: #bdc6d3; --border-subtle: #dce1e9;
  --button-hover: #e9edf3; --on-primary: #fff; --ui-success: #24784f;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --shadow-float: 0 3px 8px rgb(22 34 55 / .06), 0 14px 36px rgb(22 34 55 / .12);
  --shadow-dialog: 0 20px 64px rgb(15 23 42 / .26);
  --code-popup-bg: #fff;
}
:root.theme-dark, html.theme-dark {
  --text-bg: #191d25; --text-fg: #dce2ec; --fg-alt: #acb7c8;
  --primary: #91bced; --link-color: #ba8bea;
  --surface-muted: #222833; --popup-bg: #242b36;
  --ruler: #394352; --input-border: #536176; --border-subtle: #35404f;
  --button-hover: #323d4d; --on-primary: #15273d; --ui-success: #79d0a6;
  --shadow-float: 0 3px 8px rgb(0 0 0 / .16), 0 14px 36px rgb(0 0 0 / .3);
  --shadow-dialog: 0 20px 64px rgb(0 0 0 / .48);
  --code-popup-bg: #1b1e24;
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --text-bg: #191d25; --text-fg: #dce2ec; --fg-alt: #acb7c8;
    --primary: #91bced; --link-color: #ba8bea;
    --surface-muted: #222833; --popup-bg: #242b36;
    --ruler: #394352; --input-border: #536176; --border-subtle: #35404f;
    --button-hover: #323d4d; --on-primary: #15273d; --ui-success: #79d0a6;
    --shadow-float: 0 3px 8px rgb(0 0 0 / .16), 0 14px 36px rgb(0 0 0 / .3);
    --shadow-dialog: 0 20px 64px rgb(0 0 0 / .48);
    --code-popup-bg: #1b1e24;
  }
}

/* Settings occupy the existing top-right control, not another navigation level. */
#theme-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; }
#theme-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
#theme-toggle[aria-expanded="true"] { color: var(--primary); background: var(--button-hover); }
#appearance-panel { position: absolute; z-index: 55; inset-inline-end: .75rem; top: calc(100% + .5rem);
  width: min(23rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - var(--site-header-height, 4rem) - 1rem);
  overflow: auto; overscroll-behavior: contain; padding: .9rem 1.1rem 1.2rem;
  color: var(--text-fg); background: var(--popup-bg); border: 1px solid var(--input-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float); font: .9rem/1.7 var(--sans);
}
.appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.appearance-heading h2 { font: 700 1.05rem/1.4 var(--sans); margin: 0; }
.appearance-close { width: 44px; height: 44px; margin-inline-end: -.5rem; padding: 0;
  border: 0; border-radius: var(--radius-sm); color: var(--fg-alt); background: transparent;
  font: 1.5rem/1 var(--sans); cursor: pointer; }
.appearance-close:hover { background: var(--button-hover); color: var(--text-fg); }
#appearance-panel fieldset { min-width: 0; margin: 1rem 0 0; padding: 0; border: 0; }
#appearance-panel legend { margin-bottom: .65rem; padding: 0; color: var(--fg-alt); font-size: .8rem; }
.appearance-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem;
  padding: .2rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-muted); }
.appearance-modes button { min-height: 44px; padding: .4rem .25rem; font: inherit;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--fg-alt); cursor: pointer; }
.appearance-modes button[aria-pressed="true"] { background: var(--popup-bg); color: var(--primary); border-color: var(--input-border); font-weight: 700; }
.appearance-modes button:hover { color: var(--text-fg); }
.appearance-palette { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .65rem .75rem; margin-bottom: 1.1rem; }
.appearance-palette label { font-size: .85rem; }
.appearance-palette select { width: 100%; min-width: 0; min-height: 44px; padding: .45rem .5rem;
  font: inherit; color: var(--text-fg); background: var(--popup-bg); border: 1px solid var(--input-border); border-radius: var(--radius-sm); cursor: pointer; }
.appearance-preview { grid-column: 1 / -1; padding: .6rem .75rem; overflow-x: auto;
  border: 1px solid var(--code-border); border-radius: var(--radius-sm);
  background: var(--code-bg); color: var(--code-fg); font: .76rem/1.6 var(--mono); white-space: pre; }
.appearance-help { margin: .15rem 0 0; font-size: .8rem; color: var(--fg-alt); }
/* Each preview remains in its labelled mode, independent of the page mode. */
.appearance-preview.theme-light {
  --code-bg: #f3f5f8; --code-fg: #1f2937; --code-border: #d7dde7;
  --code-keyword: #bb3b13; --code-symbol: #86652e; --code-identifier: #0054f4; --code-constructor: #207b1d;
}
.appearance-preview.theme-dark {
  --code-bg: #232936; --code-fg: #e6edf3; --code-border: #3b4658;
  --code-keyword: #ffb454; --code-symbol: #e4c88b; --code-identifier: #7dcfff; --code-constructor: #65d6ad;
}

/* Shared UI rhythm: quiet separators, distinct raised surfaces, touch-safe controls. */
#site-header { border-bottom: 1px solid var(--border-subtle); }
#search-box { min-height: 40px; font-size: 1rem; padding: .45rem .7rem; background: var(--surface-muted); border-radius: var(--radius-md); }
#search-results { top: calc(100% + .5rem); border-radius: var(--radius-md); box-shadow: var(--shadow-float); padding: .35rem; }
#search-results .res { padding: .5rem .6rem; }
#nav-toggle, #nav-close, #toc-collapse { min-width: 44px; min-height: 44px; }
#lang-switch { display: flex; align-items: center; gap: .25rem; }
#lang-switch a, #lang-switch .cur { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .2rem; }
#section-menu { box-shadow: var(--shadow-float); border-radius: var(--radius-md); padding-block: .4rem; }
details.navsec { border-bottom-color: var(--border-subtle); }
main :is(th, td) { border-color: var(--border-subtle); }
main th { background: var(--surface-muted); }
.book-tabs { background: var(--surface-muted); border-color: var(--border-subtle); box-shadow: none; }
.book-tabs a[aria-selected="true"] { background: var(--popup-bg); box-shadow: 0 1px 3px rgb(0 0 0 / .06); }
#reading-explorer { --route-good: var(--ui-success); --route-line: var(--border-subtle); }
.reading-shell, .reading-compact { box-shadow: none; }
.page-scroll button { border-color: var(--input-border); background: var(--popup-bg); }
.term-entry { background: color-mix(in srgb, var(--surface-muted) 40%, var(--text-bg)); border-color: var(--border-subtle); }
.term-entry:hover { transform: none; box-shadow: none; }
.single-line-code-note, .prose-annotation-note { background: var(--surface-muted); }
.single-line-code-note:hover, .single-line-code[data-note] > code:is(:hover, :focus-visible) ~ .single-line-code-note,
.prose-annotation-note.annotation-active { background: color-mix(in srgb, var(--primary) 10%, var(--surface-muted)); box-shadow: none; }
.chapter-review::after { background: var(--popup-bg); border-color: var(--input-border); box-shadow: var(--shadow-float); }
.definition-modal, .ask-ai-dialog { border-color: var(--input-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); }
.definition-modal-header { border-bottom-color: var(--border-subtle); }
.definition-modal-title { color: var(--text-fg); }
.definition-modal-history-button { border-color: var(--input-border); }
.definition-modal-loading-indicator::before { border-color: var(--border-subtle); border-top-color: var(--primary); }
#term-popup, #code-note-toast { box-shadow: var(--shadow-float); border-radius: var(--radius-md); }
.book-diagram { --diagram-frame-border: var(--border-subtle); }
.vector-slots { background: var(--surface-muted); border-color: var(--border-subtle); }
.vector-slots > span + span, .resizing-point { border-color: var(--border-subtle); }
.submodule-fold { background: color-mix(in srgb, var(--surface-muted) 32%, var(--text-bg)); }
.submodule-fold .submodule-fold { background: color-mix(in srgb, var(--surface-muted) 42%, var(--text-bg)); }
.hover-popup { background: var(--code-popup-bg); border-color: var(--code-border); box-shadow: var(--shadow-float); }
.boilerplate-hover-popup { background: var(--code-bg); border-left-color: var(--code-identifier); }
.type-inspector { background: var(--code-bg); }
@media (pointer: coarse) {
  #search-box, .definition-modal-history-button, .definition-modal-close, .definition-modal-jump,
  .ask-ai-close, .ask-ai-button { min-width: 44px; min-height: 44px; }
  .definition-modal-header { gap: .35rem; }
  .appearance-palette select { font-size: 1rem; }
}
@media (max-width: 28rem) {
  #topbar { gap: .25rem; padding-inline: .65rem;
    padding-inline-end: max(.25rem, env(safe-area-inset-right)); }
  #topbar .topbar-spacer { min-width: 0; }
  #brand { font-size: 1.05rem; gap: .3rem; }
  #brand .brand-logo { width: 1.2rem; height: 1.2rem; }
  #lang-switch { margin-inline-start: auto; font-size: .82rem; gap: .1rem; }
  #lang-switch a, #lang-switch .cur { padding-inline: .1rem; }
}
@media (max-width: 23rem) {
  #brand .brand-logo { display: none; }
  #lang-switch { font-size: .78rem; }
}