:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202124;
  background: #f6f7f9;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.muted { color: #6b7280; font-size: 0.9rem; }
.error { color: #b42318; margin-top: .75rem; }
.danger { color: #b42318; }
.primary { font-weight: 650; }

#app {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

#sidebar {
  background: #1f2937;
  color: white;
  padding: 18px;
  overflow-y: auto;
}

.brand { font-size: 1.2rem; font-weight: 700; margin-bottom: 14px; }
#user-box { font-size: .9rem; margin-bottom: 12px; }
.sidebar-actions { display: flex; gap: 8px; margin-bottom: 10px; }
#page-list { display: flex; flex-direction: column; gap: 2px; }
.page-link { color: white; text-decoration: none; padding: 7px 8px; border-radius: 5px; }
.page-link:hover, .page-link.active { background: #374151; }

#main { min-width: 0; padding: 28px; }
.card { max-width: 440px; margin: 12vh auto 0; padding: 28px; background: white; border: 1px solid #dfe3e8; border-radius: 10px; }
.card label { display: grid; gap: 6px; margin: 14px 0; }
.card input { padding: 9px 10px; }

.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-header h1 { margin: 0; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar button, .sidebar-actions button, .user-form button { padding: 7px 10px; }

.markdown-body {
  background: white;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  padding: 28px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.markdown-body img { max-width: 100%; height: auto; }
.markdown-body pre { overflow: auto; padding: 12px; background: #f3f4f6; border-radius: 6px; }
.markdown-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.markdown-body table { border-collapse: collapse; }
.markdown-body th, .markdown-body td { border: 1px solid #d1d5db; padding: 6px 9px; }

.editor-heading { display: grid; gap: 5px; flex: 1; }
.title-input, #edit-summary { padding: 9px 10px; }
#editor-slug-info { min-height: 1.3em; padding-left: 2px; }
.title-input { font-size: 1.25rem; font-weight: 650; }

.editor-shell .EasyMDEContainer {
  width: 100%;
}

.EasyMDEContainer .editor-toolbar {
  border-color: #cfd5dc;
  background: white;
  padding: 6px;
}

.EasyMDEContainer .editor-toolbar button.rw-mde-button {
  width: auto;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: .82rem;
  line-height: 30px;
  color: #374151;
}

.EasyMDEContainer .editor-toolbar button.rw-mde-button:hover,
.EasyMDEContainer .editor-toolbar button.rw-mde-button.active {
  background: #e5e7eb;
}

.EasyMDEContainer .editor-toolbar button.rw-mde-button svg {
  width: 17px;
  height: 17px;
  vertical-align: middle;
  stroke-width: 1.9;
  pointer-events: none;
}

.EasyMDEContainer .editor-toolbar button.rw-mde-bold {
  font-weight: 750;
}

.EasyMDEContainer .editor-toolbar button.rw-mde-italic {
  font-style: italic;
}

.EasyMDEContainer .editor-toolbar button.rw-mde-strikethrough {
  text-decoration: line-through;
}

.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .CodeMirror-scroll,
.EasyMDEContainer .editor-preview-side {
  min-height: 520px;
}

.EasyMDEContainer .CodeMirror {
  border-color: #cfd5dc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.55;
}

.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  line-height: 1.6;
}

.EasyMDEContainer .editor-preview-side.markdown-body {
  border-radius: 0;
}

.EasyMDEContainer .editor-statusbar {
  padding-right: 4px;
  color: #6b7280;
}

.EasyMDEContainer.dragging {
  outline: 3px dashed #64748b;
  outline-offset: 5px;
}

.preview-pane {
  overflow: auto;
}

.save-row { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
#edit-summary { flex: 1; }

.history-row, .user-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #dfe3e8;
}
.history-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.user-row { grid-template-columns: 1fr 1.1fr 1.3fr 110px 70px 1fr 140px; }
.user-row input, .user-row select { padding: 6px 7px; }
.user-form { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr 120px auto; gap: 8px; margin-bottom: 20px; }
.settings-view { max-width: 760px; }
.settings-form { display: grid; gap: 14px; padding: 22px; }
.settings-form label:not(.checkbox-label) { display: grid; gap: 5px; font-weight: 600; }
.settings-form input { padding: 8px 10px; font: inherit; }
.settings-form fieldset { display: grid; gap: 12px; margin: 6px 0; padding: 16px; border: 1px solid #dfe3e8; }
.settings-form legend { font-weight: 700; padding: 0 6px; }
.settings-form .checkbox-label { display: flex; gap: 8px; align-items: center; }
.settings-form .checkbox-label input { width: auto; }
.settings-actions { display: flex; gap: 12px; align-items: center; }
#diff-target { margin-top: 24px; background: white; }

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  #sidebar { min-height: auto; }
  .user-form, .user-row { grid-template-columns: 1fr; }
}


/* Document styling follows the restrained layout of Racket's Scribble manuals:
   light navigation, readable measure, compact headings, and code-oriented text. */
:root {
  --wiki-text: #202020;
  --wiki-muted: #666;
  --wiki-link: #3b4f91;
  --wiki-border: #d8d8d8;
  --wiki-sidebar: #f1f1f1;
  --wiki-code-bg: #f4f4f4;
  --wiki-font-size: 16px;
  --wiki-line-height: 1.55;
  --wiki-h1-size: 2rem;
  --wiki-h2-size: 1.5rem;
  --wiki-h3-size: 1.25rem;
  --wiki-h4-size: 1.08rem;
}

body {
  color: var(--wiki-text);
  background: white;
}

#app {
  grid-template-columns: 300px minmax(0, 1fr);
}

#sidebar {
  background: var(--wiki-sidebar);
  color: var(--wiki-text);
  border-right: 1px solid var(--wiki-border);
  padding: 18px 16px 28px;
}

.brand {
  display: block;
  color: #111;
  font-size: 1.18rem;
  margin-bottom: 14px;
  text-align: center;
  text-decoration: none;
}

.brand:hover {
  text-decoration: underline;
}

.sidebar-icon-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -2px 0 14px;
}

.sidebar-icon-link {
  position: relative;
  display: grid;
  width: 38px;
  height: 32px;
  place-items: center;
  color: var(--wiki-link);
  text-decoration: none;
}

.sidebar-icon-link + .sidebar-icon-link {
  border-left: 1px solid #c8cbd0;
}

.sidebar-icon-link:hover,
.sidebar-icon-link:focus-visible {
  background: #fff;
  color: #24356f;
  outline: 0;
}

.sidebar-icon-link svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.8;
}

#user-box,
#sidebar .muted {
  color: var(--wiki-muted);
}

.sidebar-actions button {
  background: #fff;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 3px;
}

.sidebar-section {
  margin-top: 20px;
}

.sidebar-heading {
  margin: 0 6px 7px;
  color: #555;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#page-list,
.toc-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.page-link,
.toc-link {
  color: var(--wiki-link);
  text-decoration: none;
  border-radius: 3px;
}

.page-link {
  padding: 5px 7px;
}

.page-link:hover,
.page-link.active,
.toc-link:hover {
  background: #e2e2e2;
  color: #1e2f6d;
}

.toc-link {
  padding: 3px 7px;
  font-size: .9rem;
  line-height: 1.3;
}

.toc-level-2 { padding-left: 18px; }
.toc-level-3 { padding-left: 30px; font-size: .86rem; }
.toc-level-4 { padding-left: 42px; font-size: .83rem; }
.toc-empty {
  padding: 3px 7px;
  color: #888;
  font-size: .86rem;
  font-style: italic;
}


.toc-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.toc-row .toc-link {
  min-width: 0;
  flex: 1 1 auto;
}

.toc-edit-link {
  flex: 0 0 auto;
  padding: 2px 5px;
  color: #777;
  text-decoration: none;
  font-size: .78rem;
  line-height: 1;
}

.toc-edit-link:hover {
  color: var(--wiki-link);
}

.editor-template-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
}

.editor-template-row label {
  color: var(--wiki-muted);
}

#template-select {
  min-width: 180px;
  max-width: 360px;
  padding: 4px 6px;
}

.pages-section {
  padding-top: 12px;
  border-top: 1px solid #d7d7d7;
}

#main {
  padding: 30px 42px 60px;
}

#page-view,
#not-found-view,
#history-view,
#admin-view {
  max-width: 1040px;
}

.markdown-body,
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--wiki-font-size);
  line-height: var(--wiki-line-height);
  color: var(--wiki-text);
}

.markdown-body {
  background: white;
  border: 0;
  border-radius: 0;
  padding: 0;
  max-width: 900px;
}

.page-cmap-connections {
  box-sizing: border-box;
  max-width: 900px;
  margin-top: 2rem;
  padding: 14px 16px;
  border: 1px solid #c8d8c3;
  border-radius: 7px;
  background: #f5faf3;
}

.page-cmap-connections h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.page-cmap-concept-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr);
  gap: 12px 18px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #d9e5d5;
}

.page-cmap-concept-row:first-child { border-top: 0; }

.page-cmap-concept-description {
  display: grid;
  gap: 2px;
}

.page-cmap-concept-description .muted { font-size: .82rem; }

.page-cmap-concept-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page-cmap-concept-maps a {
  padding: 4px 8px;
  border: 1px solid #96b48d;
  border-radius: 999px;
  background: #fff;
  color: #315f2b;
  font-size: .86rem;
  text-decoration: none;
}

.page-cmap-concept-maps a:hover,
.page-cmap-concept-maps a:focus-visible {
  background: #e6f3e2;
  text-decoration: underline;
}

@media (max-width: 680px) {
  .page-cmap-concept-row { grid-template-columns: 1fr; }
}

.markdown-body h1,
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview-side h1 {
  font-size: var(--wiki-h1-size);
  line-height: 1.18;
  margin: 1.15em 0 .45em;
}

.markdown-body h2,
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview-side h2 {
  font-size: var(--wiki-h2-size);
  line-height: 1.22;
  margin: 1.25em 0 .45em;
}

.markdown-body h3,
.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview-side h3 {
  font-size: var(--wiki-h3-size);
  line-height: 1.25;
  margin: 1.2em 0 .4em;
}

.markdown-body h4,
.EasyMDEContainer .editor-preview h4,
.EasyMDEContainer .editor-preview-side h4 {
  font-size: var(--wiki-h4-size);
  line-height: 1.3;
  margin: 1.1em 0 .35em;
}

.markdown-body h5,
.markdown-body h6,
.EasyMDEContainer .editor-preview h5,
.EasyMDEContainer .editor-preview h6,
.EasyMDEContainer .editor-preview-side h5,
.EasyMDEContainer .editor-preview-side h6 {
  font-size: 1rem;
}

.markdown-body a,
.EasyMDEContainer .editor-preview a,
.EasyMDEContainer .editor-preview-side a {
  color: var(--wiki-link);
}

.markdown-body pre,
.EasyMDEContainer .editor-preview pre,
.EasyMDEContainer .editor-preview-side pre {
  padding: 10px 12px;
  background: var(--wiki-code-bg);
  border: 1px solid #e1e1e1;
  border-radius: 2px;
}

.markdown-body code,
.EasyMDEContainer .editor-preview code,
.EasyMDEContainer .editor-preview-side code {
  font-family: "DejaVu Sans Mono", Consolas, "Liberation Mono", monospace;
  font-size: .94em;
}

.rw-mermaid {
  margin: 1.25em 0;
  overflow-x: auto;
  text-align: center;
}

.rw-mermaid svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

pre.rw-mermaid-error {
  border-color: #b42318;
  background: #fff4f2;
}

pre.rw-mermaid-error::before {
  display: block;
  margin-bottom: .6em;
  color: #b42318;
  content: "Mermaid diagram could not be rendered";
  font-family: system-ui, sans-serif;
  font-weight: 600;
}

.markdown-body blockquote,
.EasyMDEContainer .editor-preview blockquote,
.EasyMDEContainer .editor-preview-side blockquote {
  margin-left: 0;
  padding-left: 1em;
  border-left: 3px solid #bbb;
  color: #555;
}

/*
 * The source editor deliberately uses a slightly smaller, tighter monospace
 * body than the rendered document. Monospace text is wider than proportional
 * document text; keeping it at the same 16px size made the source wrap much
 * earlier and therefore consume far more vertical space. Headings keep the
 * same scale as their rendered counterparts.
 */
.EasyMDEContainer .CodeMirror {
  font-family: "DejaVu Sans Mono", Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.38;
}

.EasyMDEContainer .CodeMirror pre.CodeMirror-line,
.EasyMDEContainer .CodeMirror pre.CodeMirror-line-like {
  line-height: 1.38;
}

.EasyMDEContainer .CodeMirror .cm-header-1 { font-size: var(--wiki-h1-size); line-height: 1.18; }
.EasyMDEContainer .CodeMirror .cm-header-2 { font-size: var(--wiki-h2-size); line-height: 1.22; }
.EasyMDEContainer .CodeMirror .cm-header-3 { font-size: var(--wiki-h3-size); line-height: 1.25; }
.EasyMDEContainer .CodeMirror .cm-header-4 { font-size: var(--wiki-h4-size); line-height: 1.3; }
.EasyMDEContainer .CodeMirror .cm-header-5,
.EasyMDEContainer .CodeMirror .cm-header-6 { font-size: 1rem; line-height: var(--wiki-line-height); }

.EasyMDEContainer .editor-toolbar button {
  width: 30px;
  min-width: 30px;
  padding: 0;
  color: #333;
}

@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  #sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--wiki-border);
  }
  #main { padding: 22px 18px 50px; }
}

.breadcrumbs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem;
  max-width: 1040px;
  margin: 0 0 22px;
  color: var(--wiki-muted);
  font-size: .86rem;
}

.breadcrumbs a {
  color: var(--wiki-link);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumb-label {
  color: #777;
  font-size: .82rem;
}

.breadcrumb-separator {
  color: #999;
}

.breadcrumb-current {
  color: #444;
}

.page-details {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  max-width: 900px;
  margin-top: 38px;
  padding-top: 10px;
  border-top: 1px solid #e2e2e2;
  color: #777;
  font-size: .78rem;
  line-height: 1.45;
}

.page-tag {
  color: #555;
}

.editor-metadata-row {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.4fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

#editor-tags,
#edit-summary {
  min-width: 0;
  padding: 9px 10px;
}

@media (max-width: 900px) {
  .editor-metadata-row {
    grid-template-columns: 1fr;
  }
}


.wiki-search {
  margin-top: 16px;
}

.wiki-search input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid #c6c6c6;
  border-radius: 3px;
  background: white;
  color: var(--wiki-text);
  font: inherit;
}

#search-view {
  max-width: 900px;
}

.search-results {
  margin-top: 24px;
}

.search-result {
  padding: 0 0 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e2e2e2;
}

.search-result h2 {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 5px;
  font-size: 1.08rem;
}

.search-result-type {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid #b7c0ca;
  border-radius: 999px;
  background: #f3f5f7;
  color: #536273;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.35;
}

.search-result[data-result-type="cmap"] .search-result-type {
  border-color: #86a77c;
  background: #edf7e8;
  color: #35672c;
}

.special-page-heading {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.special-page-row[data-result-type="cmap"] .search-result-type {
  border-color: #86a77c;
  background: #edf7e8;
  color: #35672c;
}

.search-result h2 a {
  color: var(--wiki-link);
  text-decoration: none;
}

.search-result h2 a:hover {
  text-decoration: underline;
}

.search-result p {
  margin: 0;
  line-height: 1.5;
  color: #444;
}

.search-result mark {
  background: #fff1a8;
  padding: 0 .08em;
}


/* Long-document editing ---------------------------------------------------
   In editor mode the chrome stays in place while the source and preview
   become the scrollable regions. This keeps breadcrumbs, title/actions,
   EasyMDE toolbar and the page TOC available throughout a long document. */

#sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.toc-section {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
}

#toc-list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.pages-section {
  flex: 0 0 auto;
  max-height: 34vh;
  overflow-y: auto;
}

body.editor-mode {
  overflow: hidden;
}

body.editor-mode #app {
  height: 100vh;
  min-height: 0;
}

body.editor-mode #main {
  display: grid;
  height: 100vh;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  padding-bottom: 18px;
}

body.editor-mode #breadcrumbs {
  position: relative;
  z-index: 30;
  margin-bottom: 10px;
  padding: 3px 0 7px;
  background: white;
}

body.editor-mode #editor-view:not(.hidden) {
  display: grid;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

body.editor-mode #editor-view .page-header {
  position: relative;
  z-index: 29;
  margin-bottom: 10px;
  padding-bottom: 9px;
  background: white;
  border-bottom: 1px solid var(--wiki-border);
}

body.editor-mode .editor-shell .EasyMDEContainer {
  --editor-toolbar-height: 43px;
  --editor-status-height: 25px;
  position: relative;
  display: grid;
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

body.editor-mode .EasyMDEContainer .editor-toolbar {
  position: relative;
  z-index: 25;
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
  background: white;
}

body.editor-mode .EasyMDEContainer .CodeMirror {
  grid-column: 1;
  grid-row: 2;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden;
}

body.editor-mode .EasyMDEContainer .CodeMirror-scroll {
  min-height: 0 !important;
  height: 100%;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.editor-mode .EasyMDEContainer .editor-statusbar {
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: var(--editor-status-height);
  background: white;
}

/* EasyMDE fullscreen needs to respect the wiki's editor chrome instead of
   anchoring against the browser viewport with no offset. Keep the toolbar and
   status bar pinned at the edges while the editor fills the remaining space. */
body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen,
body.editor-mode .EasyMDEContainer .editor-statusbar.fullscreen {
  position: fixed !important;
  left: 0;
  right: 0;
  z-index: 130;
}

body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen {
  top: 0;
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 0;
  background: white;
}

body.editor-mode .EasyMDEContainer .editor-statusbar.fullscreen {
  bottom: 0;
  min-height: 28px;
  border-top: 1px solid #cfd5dc;
  background: white;
}

body.editor-mode .EasyMDEContainer .CodeMirror-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0;
  border: 0;
  border-radius: 0;
  z-index: 120;
}

body.editor-mode .EasyMDEContainer:has(.editor-toolbar.fullscreen) .CodeMirror-fullscreen.CodeMirror-sided {
  top: 50px !important;
  right: auto !important;
  bottom: 0 !important;
  width: 50% !important;
}

body.editor-mode .EasyMDEContainer:has(.editor-toolbar.fullscreen) .editor-preview-side.editor-preview-active-side {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 0;
  left: auto;
  width: 50%;
  height: auto;
  z-index: 125;
  overflow-y: auto;
}

body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen::before,
body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen::after {
  display: none;
}

/* EasyMDE normally positions the side preview against the viewport. In the
   wiki it belongs to the editor work area, so it gets its own independent
   scroll region beside CodeMirror instead. */
body.editor-mode .EasyMDEContainer .editor-preview-side {
  position: static;
  grid-column: 2;
  grid-row: 2;
  z-index: 20;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border-top: 0;
}

body.editor-mode .EasyMDEContainer .CodeMirror-sided {
  width: 100% !important;
}

body.editor-mode .editor-metadata-row {
  position: relative;
  z-index: 29;
  margin-top: 8px;
  padding-top: 8px;
  background: white;
  border-top: 1px solid var(--wiki-border);
}

@media (max-width: 900px) {
  #sidebar {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
  }

  .toc-section,
  #toc-list,
  .pages-section {
    max-height: none;
    overflow: visible;
  }

  body.editor-mode {
    overflow: auto;
  }

  body.editor-mode #app,
  body.editor-mode #main {
    display: block;
    height: auto;
    overflow: visible;
  }

  body.editor-mode #editor-view:not(.hidden),
  body.editor-mode .editor-shell .EasyMDEContainer {
    display: block;
    height: auto;
    overflow: visible;
  }

  body.editor-mode .EasyMDEContainer .CodeMirror,
  body.editor-mode .EasyMDEContainer .CodeMirror-scroll {
    min-height: 520px !important;
    height: auto !important;
  }
}

/* Todo and connection status -------------------------------------------- */
.connection-status {
  position: fixed;
  z-index: 2000;
  top: 12px;
  right: 14px;
  padding: 7px 11px;
  border: 1px solid;
  border-radius: 4px;
  background: white;
  font-size: .86rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.connection-status.offline {
  color: #8b1f1f;
  border-color: #d9a0a0;
  background: #fff1f1;
}

.connection-status.online {
  color: #286b3d;
  border-color: #9dcaaa;
  background: #f1fbf4;
}

.wiki-todo {
  display: inline-block;
  padding: .08em .38em;
  border: 1px solid #c9aa58;
  border-radius: 3px;
  background: #fff8dc;
  color: #5d4700;
}

.todo-items {
  max-width: 900px;
}

.todo-item {
  display: grid;
  grid-template-columns: minmax(160px, 260px) 1fr auto;
  gap: 10px 18px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid #e2e2e2;
}

.todo-item > a {
  color: var(--wiki-link);
  font-weight: 600;
  text-decoration: none;
}

.todo-item > a:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .todo-item {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* Top navigation -------------------------------------------------------- */
.top-chrome {
  position: sticky;
  z-index: 120;
  top: 0;
  margin: -8px 0 20px;
  padding: 0 0 10px;
  background: white;
  border-bottom: 1px solid #ededed;
}

.account-bar {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: .5rem;
  min-height: 1.35rem;
  margin-bottom: 4px;
  font-size: .82rem;
  line-height: 1.35;
}

.account-bar a,
.page-action-links a,
.admin-menu a,
.sidebar-primary-link {
  color: var(--wiki-link);
  text-decoration: none;
}

.account-bar a:hover,
.page-action-links a:hover,
.admin-menu a:hover,
.sidebar-primary-link:hover {
  text-decoration: underline;
}

.navigation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: baseline;
}

.navigation-row .breadcrumbs {
  max-width: none;
  margin: 0;
}

.page-action-links {
  display: flex;
  justify-content: flex-end;
  gap: .65rem;
  white-space: nowrap;
  font-size: .86rem;
  line-height: 1.35;
}

.sidebar-primary-link {
  display: block;
  margin: -4px 0 8px;
  padding: 2px 0;
  font-size: .9rem;
}

.admin-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .65rem;
  font-size: 1rem;
}

#user-admin-view {
  max-width: 1040px;
}

/* Wiki image layout extensions. Width itself remains a sanitized inline
   style generated by wiki.js; these fixed classes only control placement. */
.markdown-body img.wiki-image-left,
.EasyMDEContainer .editor-preview img.wiki-image-left,
.EasyMDEContainer .editor-preview-side img.wiki-image-left {
  display: block;
  margin-left: 0;
  margin-right: auto;
}

.markdown-body img.wiki-image-center,
.EasyMDEContainer .editor-preview img.wiki-image-center,
.EasyMDEContainer .editor-preview-side img.wiki-image-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.markdown-body img.wiki-image-right,
.EasyMDEContainer .editor-preview img.wiki-image-right,
.EasyMDEContainer .editor-preview-side img.wiki-image-right {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

.markdown-body img.wiki-image-float-left,
.EasyMDEContainer .editor-preview img.wiki-image-float-left,
.EasyMDEContainer .editor-preview-side img.wiki-image-float-left {
  float: left;
  margin: .2rem 1rem .75rem 0;
}

.markdown-body img.wiki-image-float-right,
.EasyMDEContainer .editor-preview img.wiki-image-float-right,
.EasyMDEContainer .editor-preview-side img.wiki-image-float-right {
  float: right;
  margin: .2rem 0 .75rem 1rem;
}

@media (max-width: 900px) {
  .top-chrome {
    position: static;
    margin-top: 0;
  }

  .account-bar {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .navigation-row {
    grid-template-columns: 1fr;
    gap: .35rem;
  }

  .page-action-links {
    justify-content: flex-start;
  }
}

/* 0.2.12 navigation polish --------------------------------------------- */
.account-separator {
  color: #999;
}

/* Account and page actions are navigation, not push buttons. Keep them on
   the same visual scale as the breadcrumb. */
.account-bar,
.page-action-links {
  font-size: .86rem;
}

.top-chrome {
  top: 0;
}

/* Keep the page navigation available while reading long documents too. */
@media (max-width: 900px) {
  .top-chrome {
    position: sticky;
    top: 0;
    z-index: 120;
    background: white;
  }
}



/* Sticky-anchor correction ---------------------------------------------- */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  scroll-margin-top: 82px;
}


/* Recent changes and bookmark overview pages. */
.special-page-list,
.bookmarks-list {
  max-width: 920px;
}

.special-page-row,
.bookmark-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--wiki-border);
}

.special-page-row a,
.bookmark-row a,
.bookmark-section-actions a {
  color: var(--wiki-link);
  text-decoration: none;
}

.special-page-row a:hover,
.bookmark-row a:hover,
.bookmark-section-actions a:hover {
  text-decoration: underline;
}

.special-page-meta,
.bookmark-section-actions {
  color: var(--wiki-muted);
  font-size: .86rem;
  white-space: nowrap;
}

.bookmark-section {
  margin: 1.4rem 0 1.8rem;
}

.bookmark-section h2 {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
}

/* Linked todo markers --------------------------------------------------- */
.wiki-todo {
  text-decoration: none;
}

.wiki-todo:hover {
  text-decoration: underline;
}

.todo-item-target {
  background: #fff3a3;
  outline: 2px solid #e1c75a;
  outline-offset: 2px;
}

/* 0.2.23: source-mode and section editing */
.EasyMDEContainer.raw-markdown .CodeMirror .cm-header-1,
.EasyMDEContainer.raw-markdown .CodeMirror .cm-header-2,
.EasyMDEContainer.raw-markdown .CodeMirror .cm-header-3,
.EasyMDEContainer.raw-markdown .CodeMirror .cm-header-4,
.EasyMDEContainer.raw-markdown .CodeMirror .cm-header-5,
.EasyMDEContainer.raw-markdown .CodeMirror .cm-header-6,
.EasyMDEContainer.raw-markdown .CodeMirror .cm-strong,
.EasyMDEContainer.raw-markdown .CodeMirror .cm-em {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: normal !important;
  font-style: normal !important;
}

.EasyMDEContainer .CodeMirror .section-edit-highlight {
  background: #fff3a3;
}

.wiki-auto-link {
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.orphaned-uploads-list {
  display: grid;
  gap: 12px;
}

.archived-cmaps-list {
  display: grid;
  gap: 12px;
}

.archived-cmap-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--wiki-border);
}

.archived-cmap-row .muted {
  grid-column: 1;
}

.archived-cmap-row button {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.orphaned-upload-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--wiki-border);
}

.orphaned-upload-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.orphaned-upload-uses {
  margin: 4px 0 0 18px;
  padding: 0;
}

.orphaned-upload-uses {
  margin: 4px 0 0 18px;
  padding: 0;
}

/* Namespace is page metadata; keep it compact beside the title editor. */
.editor-namespace-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .3rem 0;
  font-size: .9rem;
}
.editor-namespace-row input {
  max-width: 18rem;
}
.namespace-heading {
  margin: 1rem 0 .35rem;
  font-size: 1rem;
  font-weight: 600;
}


/* Rename and alias administration */
.rename-form { max-width: 48rem; }
.rename-form label { display: block; margin: 0 0 1rem; }
.rename-form input { display: block; width: 100%; margin-top: .3rem; }
.admin-version { margin: 0 0 1rem; }
.alias-row { padding: .75rem 0; border-bottom: 1px solid #d9d9d9; }
.alias-row .alias-address { font-family: monospace; }
.alias-references { margin: .35rem 0 0 1.25rem; }

.alias-summary { margin-top: .35rem; }
.alias-history { color: #666; }
.alias-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.alias-actions button { font: inherit; }