/* VersoML design system ("The Architectural Ledger") for the learn wiki.
   Canonical spec: docs/DESIGN.md. Sibling implementations:
   platform/app/src/app/globals.css and marketing/src/index.css.

   How this file works: OtterWiki loads custom.css last, after otterwiki.css
   has re-applied the Halfmoon 1.1.1 variables build, so the :root block below
   re-points the framework tokens wholesale and the later sections override the
   handful of rules OtterWiki hardcodes (navbar, sidebar, tables, code,
   blockquotes, mark, search highlights). Halfmoon sets the html font-size to
   62.5%, so 1rem = 10px (0.6rem = 6px, 0.8rem = 8px).

   Icon note: OtterWiki's own chrome ships FontAwesome glyphs, which cannot be
   swapped without forking templates, so they stay and are recolored through
   currentColor only. Everything authored here (dark mode toggle, flags,
   wordmark) is inline SVG in the Phosphor stroke language, per the repo's
   one-icon-set rule. */

/* ---------------------------------------------------------------------------
   Tokens. VersoML palette first, then the Halfmoon re-points (light --lm-*
   and dark --dm-* live together on :root, dark mode is a body class).
   ------------------------------------------------------------------------ */
:root {
  --vml-primary: #99462a;
  --vml-primary-hover: #b85a38;
  --vml-primary-dark: #7a2f15;
  --vml-primary-container: #d97757;
  --vml-primary-fixed: #ffdbd0;
  --vml-primary-fixed-dim: #ffb59e;
  --vml-secondary: #545f73;
  --vml-secondary-fixed-dim: #bcc7de;
  --vml-on-surface: #111c2d;
  --vml-on-surface-variant: #55433d;
  --vml-surface: #f9f9ff;
  --vml-container-lowest: #ffffff;
  --vml-container-low: #f0f3ff;
  --vml-container: #e7eeff;
  --vml-container-high: #dee8ff;
  --vml-container-highest: #d8e3fb;
  --vml-dark-surface: #121418;
  --vml-dark-on-surface: #ecf1ff;
  --vml-dark-on-surface-variant: #dbc1b9;
  --vml-dark-container-lowest: #0d0f12;
  --vml-dark-container-low: #1a1d22;
  --vml-dark-container: #1e2126;
  --vml-dark-container-high: #292c31;
  --vml-dark-container-highest: #34373c;
  /* Ghost borders: outline-variant at low opacity, the only sanctioned line */
  --vml-ghost-border: rgba(219, 193, 185, 0.4);
  --vml-dark-ghost-border: rgba(120, 110, 105, 0.4);
  --vml-gradient: linear-gradient(90deg, #d97757, #99462a);
  --vml-shadow-ambient: 0 20px 40px rgba(17, 28, 45, 0.06);
  --vml-dark-shadow-ambient: 0 20px 40px rgba(0, 0, 0, 0.4);
  --vml-font-body: "Inter", system-ui, sans-serif;
  --vml-font-label: "IBM Plex Mono", ui-monospace, monospace;

  /* Brand hue: terracotta replaces Halfmoon's stock blue. Hover brightens,
     never dims. Focus rings become flat 2px rings (zero blur, so no glow)
     to keep keyboard focus visible. */
  --primary-color: var(--vml-primary);
  --primary-color-light: var(--vml-primary-hover);
  --primary-color-dark: var(--vml-primary-dark);
  --primary-color-very-light: var(--vml-primary-fixed);
  --primary-color-very-dark: #541400;
  --primary-box-shadow-color: rgba(153, 70, 42, 0.3);
  --primary-box-shadow-color-darker: rgba(153, 70, 42, 0.45);

  /* Base surfaces and text (never pure black) */
  --lm-base-body-bg-color: var(--vml-surface);
  --lm-base-text-color: var(--vml-on-surface);
  --lm-base-text-color-light: var(--vml-on-surface-variant);
  --dm-base-body-bg-color: var(--vml-dark-surface);
  --dm-base-text-color: var(--vml-dark-on-surface);
  --dm-base-text-color-light: var(--vml-dark-on-surface-variant);

  /* Links carry the One Signal accent. Dark mode reroutes to the lighter
     fixed tint for legibility, matching .dark .text-primary in the app. */
  --lm-link-text-color: var(--vml-primary);
  --lm-link-text-color-hover: var(--vml-primary-hover);
  --dm-link-text-color: var(--vml-primary-fixed-dim);
  --dm-link-text-color-hover: var(--vml-primary-fixed);

  /* Buttons: flat at rest (drop the 0.2rem ledge), tonal hover, ghost border */
  --lm-button-bg-color: var(--vml-container-lowest);
  --lm-button-bg-color-hover: var(--vml-container-low);
  --lm-button-bg-color-focus: var(--vml-container-low);
  --lm-button-border-color: var(--vml-ghost-border);
  --lm-button-border-color-hover: var(--vml-ghost-border);
  --lm-button-box-shadow: none;
  --lm-button-box-shadow-hover: none;
  --dm-button-bg-color: var(--vml-dark-container);
  --dm-button-bg-color-hover: var(--vml-dark-container-high);
  --dm-button-bg-color-focus: var(--vml-dark-container-high);
  --dm-button-border-color: var(--vml-dark-ghost-border);
  --dm-button-border-color-hover: var(--vml-dark-ghost-border);
  --dm-button-box-shadow: none;
  --dm-button-box-shadow-hover: none;

  /* Primary button: the sanctioned gradient fill, solid brighter hover */
  --lm-button-primary-bg-image: var(--vml-gradient);
  --lm-button-primary-bg-image-hover: none;
  --lm-button-primary-bg-color-hover: var(--vml-primary-hover);
  --lm-button-primary-bg-image-focus: none;
  --lm-button-primary-bg-color-focus: var(--vml-primary-hover);
  --lm-button-primary-border-color: transparent;
  --lm-button-primary-border-color-hover: transparent;
  --dm-button-primary-bg-image: var(--vml-gradient);
  --dm-button-primary-bg-image-hover: none;
  --dm-button-primary-bg-color-hover: var(--vml-primary-hover);
  --dm-button-primary-bg-image-focus: none;
  --dm-button-primary-bg-color-focus: var(--vml-primary-hover);
  --dm-button-primary-border-color: transparent;
  --dm-button-primary-border-color-hover: transparent;

  /* Inputs: tonal fill, no border, 2px terracotta bottom line on focus
     (the DESIGN.md input focus treatment, no glow) */
  --lm-input-bg-color: var(--vml-container-low);
  --lm-input-bg-color-hover: var(--vml-container);
  --lm-input-bg-color-focus: var(--vml-container-lowest);
  --lm-input-border-color: transparent;
  --lm-input-border-color-hover: transparent;
  --lm-input-border-color-focus: transparent;
  --lm-input-box-shadow-focus: inset 0 -0.2rem 0 0 var(--vml-primary);
  --lm-input-placeholder-text-color: var(--vml-on-surface-variant);
  --dm-input-bg-color: var(--vml-dark-container);
  --dm-input-bg-color-hover: var(--vml-dark-container-high);
  --dm-input-bg-color-focus: var(--vml-dark-container-lowest);
  --dm-input-border-color: transparent;
  --dm-input-border-color-hover: transparent;
  --dm-input-border-color-focus: transparent;
  --dm-input-box-shadow-focus: inset 0 -0.2rem 0 0 var(--vml-primary-fixed-dim);
  --dm-input-placeholder-text-color: var(--vml-dark-on-surface-variant);

  /* Chrome: navbar and sidebar sit one tonal step below the page, no line */
  --lm-navbar-bg-color: var(--vml-container-low);
  --lm-navbar-border-color: transparent;
  --lm-navbar-brand-text-color: var(--vml-on-surface);
  --lm-navbar-brand-text-color-hover: var(--vml-on-surface);
  --dm-navbar-bg-color: var(--vml-dark-container-low);
  --dm-navbar-border-color: transparent;
  --dm-navbar-brand-text-color: var(--vml-dark-on-surface);
  --dm-navbar-brand-text-color-hover: var(--vml-dark-on-surface);
  --lm-sidebar-bg-color: var(--vml-container-low);
  --lm-sidebar-border-color: transparent;
  --dm-sidebar-bg-color: var(--vml-dark-container-low);
  --dm-sidebar-border-color: transparent;

  /* Sidebar shortcuts (Home, A-Z index) and TOC links */
  --lm-sidebar-link-text-color: var(--vml-on-surface-variant);
  --lm-sidebar-link-text-color-hover: var(--vml-on-surface);
  --lm-sidebar-link-bg-color: transparent;
  --lm-sidebar-link-bg-color-hover: var(--vml-container);
  --lm-sidebar-link-text-color-active: var(--vml-primary);
  --lm-sidebar-link-text-color-active-hover: var(--vml-primary);
  --lm-sidebar-link-bg-color-active: transparent;
  --lm-sidebar-link-bg-color-active-hover: var(--vml-container);
  --dm-sidebar-link-text-color: var(--vml-dark-on-surface-variant);
  --dm-sidebar-link-text-color-hover: var(--vml-dark-on-surface);
  --dm-sidebar-link-bg-color: transparent;
  --dm-sidebar-link-bg-color-hover: var(--vml-dark-container);
  --dm-sidebar-link-text-color-active: var(--vml-primary-fixed-dim);
  --dm-sidebar-link-text-color-active-hover: var(--vml-primary-fixed-dim);
  --dm-sidebar-link-bg-color-active: transparent;
  --dm-sidebar-link-bg-color-active-hover: var(--vml-dark-container);

  /* Dropdowns and toasts float: ambient shadow is theirs alone */
  --lm-dropdown-menu-bg-color: var(--vml-container-lowest);
  --lm-dropdown-menu-border-color: var(--vml-ghost-border);
  --lm-dropdown-menu-box-shadow: var(--vml-shadow-ambient);
  --lm-dropdown-divider-bg-color: var(--vml-ghost-border);
  --dm-dropdown-menu-bg-color: var(--vml-dark-container-high);
  --dm-dropdown-menu-border-color: var(--vml-dark-ghost-border);
  --dm-dropdown-menu-box-shadow: var(--vml-dark-shadow-ambient);
  --dm-dropdown-divider-bg-color: var(--vml-dark-ghost-border);
  --lm-alert-bg-color: var(--vml-container-lowest);
  --lm-alert-border-color: var(--vml-ghost-border);
  --dm-alert-bg-color: var(--vml-dark-container-high);
  --dm-alert-border-color: var(--vml-dark-ghost-border);

  /* Data tables (changelog, history): ghost hairlines, tonal stripes */
  --lm-table-border-color: var(--vml-ghost-border);
  --lm-table-striped-bg-color: var(--vml-container-low);
  --lm-table-hoverable-bg-color-hover: var(--vml-container);
  --dm-table-border-color: var(--vml-dark-ghost-border);
  --dm-table-striped-bg-color: var(--vml-dark-container-low);
  --dm-table-hoverable-bg-color-hover: var(--vml-dark-container);

  /* Code containers (OtterWiki hardcodes most of these, overridden below) */
  --lm-code-bg-color: var(--vml-container);
  --lm-code-text-color: var(--vml-on-surface);
  --dm-code-bg-color: var(--vml-dark-container);
  --dm-code-text-color: var(--vml-dark-on-surface);

  /* Corners: 6px buttons and inputs, 8px cards, 12px pills (status tags only) */
  --base-border-radius: 0.6rem;
  --card-border-radius: 0.8rem;
  --alert-border-radius: 0.8rem;
  --code-border-radius: 0.6rem;
  --collapse-header-border-radius: 0.6rem;
  --badge-border-radius: 1.2rem;
}

/* ---------------------------------------------------------------------------
   Base and typography. Inter carries all hierarchy through weight and size,
   IBM Plex Mono is reserved for labels and raw data (the Raw-Data Rule).
   Code keeps a true monospace stack: lesson code relies on alignment.
   ------------------------------------------------------------------------ */
body {
  font-family: var(--vml-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page h1,
.page h2,
.page h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page h4,
.page h5,
.page h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page p,
.page li {
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Navbar: one tonal step below the page, flat ghost action buttons.
   Tonal rather than glass: content never scrolls behind the fixed navbar
   here, so a translucent blur panel would be decorative (prohibited).
   ------------------------------------------------------------------------ */
.navbar {
  background: var(--vml-container-low);
  border-bottom: 0;
}

.dark-mode .navbar {
  background: var(--vml-dark-container-low);
}

#toggle-sidebar-btn {
  background-color: transparent;
}

.navbar .btn.btn-action {
  background: transparent;
  border-color: transparent;
  color: var(--vml-on-surface);
}

.navbar .btn.btn-action:hover {
  background: var(--vml-container-high);
}

.dark-mode .navbar .btn.btn-action {
  color: var(--vml-dark-on-surface);
}

.dark-mode .navbar .btn.btn-action:hover {
  background: var(--vml-dark-container-high);
}

/* Search input sits on the container-low navbar, so it steps down to the
   lowest container to stay visible */
.navbar .form-control {
  background-color: var(--vml-container-lowest);
}

.dark-mode .navbar .form-control {
  background-color: var(--vml-dark-surface);
}

/* The "/" keyboard hint: a label chip with a ghost border */
.top-search::after {
  font-family: var(--vml-font-label);
  border: 1px solid var(--vml-ghost-border);
  border-radius: 0.6rem;
  color: var(--vml-on-surface-variant);
}

.dark-mode .top-search::after {
  border-color: var(--vml-dark-ghost-border);
  color: var(--vml-dark-on-surface-variant);
}

/* ---------------------------------------------------------------------------
   Sidebar: same tonal layer as the navbar, structure via tone and spacing.
   ------------------------------------------------------------------------ */
.sidebar {
  background: var(--vml-container-low);
  border-right: 0;
}

.dark-mode .sidebar {
  background: var(--vml-dark-container-low);
}

/* Panel titles ("Contents" in the sidebar, "On this page" in the TOC rail):
   label treatment, IBM Plex Mono */
.sidebar .collapse-header,
.extra-nav .collapse-header {
  font-family: var(--vml-font-label);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vml-on-surface-variant);
}

.dark-mode .sidebar .collapse-header,
.dark-mode .extra-nav .collapse-header {
  color: var(--vml-dark-on-surface-variant);
}

/* No-Line Rule: panel headers separate by spacing, not a divider. Same global
   scope as the stock rule in partials/sidebar.css, whose !important this
   counters. */
.collapse-header,
.collapse-header:focus,
.dark-mode .collapse-header,
.dark-mode .collapse-header:focus {
  border-bottom: 0 !important;
}

/* Course menu links: supporting text tone, ink on hover. The active lesson
   gets its terracotta from --lm/dm-link-text-color plus weight. */
.sidebarmenu li {
  color: var(--vml-on-surface-variant);
}

.sidebarmenu a {
  color: var(--vml-on-surface-variant);
}

.sidebarmenu a:hover {
  color: var(--vml-on-surface);
}

.dark-mode .sidebarmenu li {
  color: var(--vml-dark-on-surface-variant);
}

.dark-mode .sidebarmenu a {
  color: var(--vml-dark-on-surface-variant);
}

.dark-mode .sidebarmenu a:hover {
  color: var(--vml-dark-on-surface);
}

.sidebarmenu a[aria-current="page"] {
  font-weight: 600;
}

/* The otter mascot at the sidebar foot does not fit the VersoML brand */
.sidebar-otter {
  display: none;
}

/* ---------------------------------------------------------------------------
   Content: prose, blockquotes, callouts, highlights.
   ------------------------------------------------------------------------ */

/* Blockquotes (and the lesson eyebrow "> Lesson 01 · Course"): the side
   stripe goes, depth is a tonal container */
.page blockquote {
  border-left: 0;
  background-color: var(--vml-container);
  border-radius: 0.8rem;
  padding: 0.4rem 1.6rem;
}

.dark-mode .page blockquote {
  background-color: var(--vml-dark-container);
}

/* Callouts: same tonal treatment, the type reads from the colored header
   (icon + word), colors from the shared status palette */
.quote-alert {
  border-left: 0;
  background-color: var(--vml-container);
  border-radius: 0.8rem;
  padding: 1rem 2rem;
}

.dark-mode .quote-alert {
  background-color: var(--vml-dark-container);
}

/* Note steps down to slate so routine callouts spend none of the terracotta
   budget; Important is the one that earns the accent (One Signal Rule). */
.quote-alert-note .quote-alert-header { color: var(--vml-secondary); }
.quote-alert-tip .quote-alert-header { color: #166544; }
.quote-alert-important .quote-alert-header { color: var(--vml-primary); }
.quote-alert-warning .quote-alert-header { color: #8c4d00; }
.quote-alert-caution .quote-alert-header { color: #ba1a1a; }
.dark-mode .quote-alert-note .quote-alert-header { color: var(--vml-secondary-fixed-dim); }
.dark-mode .quote-alert-tip .quote-alert-header { color: #82dbaa; }
.dark-mode .quote-alert-important .quote-alert-header { color: var(--vml-primary-fixed-dim); }
.dark-mode .quote-alert-warning .quote-alert-header { color: #f5be78; }
.dark-mode .quote-alert-caution .quote-alert-header { color: #ffb4ab; }

/* Collapsible proofs (<details class="proof"> in lesson Markdown): the same
   tonal container as blockquotes, closed by default, the summary line is the
   toggle. Slate summary per the One Signal Rule (routine, not terracotta). */
.page details.proof {
  background-color: var(--vml-container);
  border-radius: 0.8rem;
  padding: 1.2rem 1.6rem;
  margin: 1.6rem 0;
}

.dark-mode .page details.proof {
  background-color: var(--vml-dark-container);
}

.page details.proof > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--vml-secondary);
  user-select: none;
}

.dark-mode .page details.proof > summary {
  color: var(--vml-secondary-fixed-dim);
}

.page details.proof > summary:hover {
  color: var(--vml-on-surface);
}

.dark-mode .page details.proof > summary:hover {
  color: var(--vml-dark-on-surface);
}

.page details.proof[open] > summary {
  margin-bottom: 0.8rem;
}

/* Text highlights: warning-container tones instead of stock yellow.
   !important counters the stock !important. */
mark {
  background-color: #ffddb5 !important;
  color: #2c1700;
}

.dark-mode mark {
  background-color: #5c3600 !important;
  color: #ffddb5;
}

/* Search result highlights use the same warning-container pair */
.text-match,
a span.page-match,
a:hover span.page-match {
  background-color: #ffddb5 !important;
  color: #2c1700;
}

.dark-mode .text-match,
.dark-mode a span.page-match,
.dark-mode a:hover span.page-match {
  background-color: #5c3600 !important;
  color: #ffddb5;
}

/* ---------------------------------------------------------------------------
   Code: cool containers instead of warm grays and the stock blue-slate.
   The font stays a true monospace stack (set upstream), only surfaces change.
   ------------------------------------------------------------------------ */
code,
pre,
.code {
  background-color: var(--vml-container);
  border-radius: 0.6rem;
}

.dark-mode code,
.dark-mode pre,
.dark-mode .code {
  background-color: var(--vml-dark-container);
}

.page pre {
  padding: 1.2rem 1.6rem;
}

/* Line numbers gutter: one tonal step up, no border */
.highlight table > tbody > tr > td.linenos > div.linenodiv > pre {
  background-color: var(--vml-container-high);
  border: 0;
}

.dark-mode .highlight table > tbody > tr > td.linenos > div.linenodiv > pre {
  background-color: var(--vml-dark-container-high);
}

button.copy-to-clipboard {
  background: var(--vml-container-high);
  border: 0;
  border-radius: 0.6rem;
}

.dark-mode button.copy-to-clipboard {
  background: var(--vml-dark-container-high);
}

/* ---------------------------------------------------------------------------
   Content tables: the white 1px grid and black fills become a tonal header
   row and ghost hairlines (the sanctioned Ghost-Border for dense grids).
   ------------------------------------------------------------------------ */
.page table {
  background-color: transparent;
}

.page th {
  background-color: var(--vml-container-high);
}

.dark-mode .page th {
  background-color: var(--vml-dark-container-high);
}

.page table > thead > tr > th,
.page table > thead > tr > td,
.page table > tbody > tr > th,
.page table > tbody > tr > td,
.page table > tfoot > tr > th,
.page table > tfoot > tr > td {
  border-right: 0;
  border-bottom: 1px solid var(--vml-ghost-border);
}

.dark-mode .page table > thead > tr > th,
.dark-mode .page table > thead > tr > td,
.dark-mode .page table > tbody > tr > th,
.dark-mode .page table > tbody > tr > td,
.dark-mode .page table > tfoot > tr > th,
.dark-mode .page table > tfoot > tr > td {
  border-bottom-color: var(--vml-dark-ghost-border);
}

/* ---------------------------------------------------------------------------
   Changelog and history: pagination, commit chips, datetimes.
   ------------------------------------------------------------------------ */
.btn-group .btn-square.active {
  background: var(--vml-primary);
  border-color: transparent;
  color: #ffffff;
}

.dark-mode .btn-group .btn-square.active {
  background: var(--vml-primary);
  color: #ffffff;
}

/* Commit hashes are raw data an engineer copies: IBM Plex Mono chip */
.btn.revision-small {
  font-family: var(--vml-font-label);
  background: var(--vml-container-high);
  border-color: transparent;
}

.dark-mode .btn.revision-small {
  background: var(--vml-dark-container-high);
}

.datetime {
  font-family: var(--vml-font-label);
  font-size: 1.3rem;
}

/* A-Z index letter headers: ghost hairline instead of the stock black line */
.pageindex-header {
  border-bottom: 1px solid var(--vml-ghost-border);
}

.dark-mode .pageindex-header {
  border-bottom: 1px solid var(--vml-dark-ghost-border);
}

/* ---------------------------------------------------------------------------
   Breadcrumbs: supporting tone at rest, terracotta only on hover.
   ------------------------------------------------------------------------ */
.breadcrumb-item a {
  color: var(--vml-on-surface-variant);
}

.breadcrumb-item a:hover {
  color: var(--vml-primary);
}

.dark-mode .breadcrumb-item a {
  color: var(--vml-dark-on-surface-variant);
}

.dark-mode .breadcrumb-item a:hover {
  color: var(--vml-primary-fixed-dim);
}

/* Breadcrumb cleanup. The breadcrumb only echoes the URL path, and language
   lives in that path (/en, /fr) because OtterWiki has no translation feature. */

/* On the two language hubs (/en, /fr) the breadcrumb is redundant: Home already
   redirects there. Hide it so the landing page is not "Home / en". */
body[data-page-path="en"] nav[aria-label="Breadcrumbs"],
body[data-page-path="fr"] nav[aria-label="Breadcrumbs"] {
  display: none;
}

/* On inner pages, drop the leading en/fr crumb. The flag toggle already shows
   the language, so breadcrumbs read "Home / Machine Learning / 01 Introduction". */
.breadcrumb .breadcrumb-item:nth-child(2) {
  display: none;
}

/* ---------------------------------------------------------------------------
   Floating elements (toasts, dropdowns): the only ambient-shadow owners.
   Dropdown shadows come from the tokens above; toasts get theirs here.
   ------------------------------------------------------------------------ */
.sticky-alerts .alert {
  box-shadow: var(--vml-shadow-ambient);
  border-radius: 0.8rem;
}

.dark-mode .sticky-alerts .alert {
  box-shadow: var(--vml-dark-shadow-ambient);
}

/* ---------------------------------------------------------------------------
   Navbar brand: the VersoML wordmark (inline SVG from customBody.html, moved
   in by custom.js). The SITE_NAME text stays in the markup as a no-JS
   fallback; the default otter logo never fits the brand, JS or not.
   ------------------------------------------------------------------------ */
#site_logo[src$="otterhead.png"] {
  display: none;
}

/* !important counters Halfmoon's d-sm-flex utility on the SITE_NAME span */
.navbar-brand.verso-branded > :not(#verso-brand) {
  display: none !important;
}

#verso-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

#verso-brand[hidden] {
  display: none;
}

#verso-brand .verso-mark {
  display: block;
  height: 2.6rem;
  width: 2.6rem;
}

#verso-brand .verso-wordmark {
  display: block;
  height: 1.7rem;
  width: auto;
}

/* Dark mode reroutes the wordmark gradient to the lighter terracotta,
   mirroring .dark .verso-wordmark path in the app and marketing */
.dark-mode #verso-brand .verso-wordmark path {
  fill: var(--vml-primary-fixed-dim);
}

#verso-brand .verso-brand-suffix {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vml-on-surface);
}

.dark-mode #verso-brand .verso-brand-suffix {
  color: var(--vml-dark-on-surface);
}

/* ---------------------------------------------------------------------------
   Global language toggle (flags). Hidden until custom.js positions it (in the
   navbar, or floating as a fallback) to avoid a flash in the wrong place.
   ------------------------------------------------------------------------ */
#lang-toggle {
  display: none;
}

#lang-toggle.ready {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

/* Inline in the top navbar, vertically centered next to the other controls. */
#lang-toggle.in-navbar {
  align-self: center;
  margin-right: 0.6rem;
}

/* Fallback position if the navbar can't be found. */
#lang-toggle.floating {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 1080;
  padding: 0.25rem 0.4rem;
  border-radius: 1.2rem;
  background: var(--vml-container-high);
  box-shadow: var(--vml-shadow-ambient);
}

.dark-mode #lang-toggle.floating {
  background: var(--vml-dark-container-high);
  box-shadow: var(--vml-dark-shadow-ambient);
}

#lang-toggle a {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.32rem;
  border-radius: 0.6rem;
  text-decoration: none;
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: opacity 0.12s ease, filter 0.12s ease;
}

#lang-toggle a:hover {
  opacity: 0.85;
  filter: none;
}

#lang-toggle a.active {
  opacity: 1;
  filter: none;
}

#lang-toggle .flag {
  display: block;
  height: 16px;
  width: auto;
  border-radius: 2px;
  border: 1px solid var(--vml-ghost-border);
}

/* Active language: the terracotta ring is the active-state signal */
#lang-toggle a.active .flag {
  box-shadow: 0 0 0 2px var(--vml-primary);
}

.dark-mode #lang-toggle a.active .flag {
  box-shadow: 0 0 0 2px var(--vml-primary-fixed-dim);
}

@media print {
  #lang-toggle {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Navbar cleanup: strip it to the brand, search, dark mode toggle, and the
   language flags. Hide OtterWiki's three-dot page-tools menu and the
   standalone Edit/Login button. Page tools stay at their URLs (attachments,
   history), login at /-/login, and pages are normally edited from the IDE
   and git anyway.
   ------------------------------------------------------------------------ */
.navbar .dropdown,
.navbar .navbar-content.ml-auto > a.btn[role="button"] {
  display: none;
}

/* Dark mode toggle. Hidden until custom.js moves it into the navbar. Uses the
   default .btn display so the icon centers like the sibling .btn-action
   buttons, rather than flex-aligning left. */
#darkmode-toggle {
  display: none;
}

#darkmode-toggle.ready {
  display: inline-block;
}

#darkmode-toggle svg {
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: text-bottom;
}