/* ===========================================================
 * Quiz App Info Site - shared styles
 * Based on old Snap-02 style (proven document tone).
 * No external dependencies.
 * =========================================================== */

@font-face {
  font-family: 'AppIcons';
  src: url('/info/public/app-icons.ttf?v=19') format('truetype');
  font-display: block;
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: 'AppIcons';
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  vertical-align: -2px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 1.05em;
}

.icon-alert-triangle::before { content: '\EA06'; }
.icon-check::before          { content: '\EA5E'; }
.icon-chevron-down::before   { content: '\EA5F'; }
.icon-chevron-right::before  { content: '\EA61'; }
.icon-chevron-up::before     { content: '\EA62'; }
.icon-copy::before           { content: '\EA7A'; }
.icon-copyright::before      { content: '\EA7B'; }
.icon-download::before       { content: '\EA96'; }
.icon-external-link::before  { content: '\EA99'; }
.icon-home::before           { content: '\EAC1'; }
.icon-info::before           { content: '\EAC5'; }
.icon-refresh::before        { content: '\EB13'; }
.icon-trash::before          { content: '\EB41'; }
.icon-x::before              { content: '\EB55'; }
.icon-tools::before          { content: '\EBCA'; }
.icon-history::before        { content: '\EBEA'; }
.icon-menu::before           { content: '\EC42'; }
.icon-help::before           { content: '\F91D'; }

:root {
  --primary: #1DB954;
  --primary-light: #1ED760;
  --primary-bg: rgba(29, 185, 84, 0.08);
  --primary-border: rgba(29, 185, 84, 0.4);
  --text: #1f2328;
  --text-muted: #6a7280;
  --bg: #ffffff;
  --bg-alt: #f7f8fa;
  --border: #e1e4e8;
  --code-bg: #f3f4f6;
  --warning-bg: #fff7e6;
  --warning-border: #f5b75a;

  --max-width: 760px;
  --gap: 16px;

  /* Two pages put a list beside the article: the help contents and the
     changelog versions. The track and the width the page grows by to make
     room for it are one definition, so they cannot drift apart and start
     eating into the article. */
  --sidebar-track: 200px;
  --sidebar-gap: 32px;

}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #e6e6e6;
    --text-muted: #9ba3af;
    --bg: #16181d;
    --bg-alt: #1e2127;
    --border: #2d3138;
    --code-bg: #1e2127;
    --warning-bg: #2a2316;
    --warning-border: #d49b3a;
  }
}

* { box-sizing: border-box; }

html, body {
  /* Drawer sits off-screen with translateX(100%); clip the overflow
     so the drawer can't trigger horizontal scrollbar. `clip` is used
     instead of `hidden` because `hidden` creates a scroll container
     that breaks `position: sticky` for descendants (header / TOC). */
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
}

/* ---------- Scrollbars ----------
   Hidden everywhere, on the page and in every panel that scrolls inside it
   (drawer, sheet, search results, sticky sidebars, wide code blocks). The app
   shows none either, and the difference between the two was visible at the
   edge of every screen. On a phone a bar down the side of a drawer costs
   width that the content needs; on a desktop the page still scrolls by wheel,
   keyboard, touch and drag -- only the bar is gone.
   Scrolling containers therefore have to be obvious from their content: a cut
   off row, or a list that clearly continues. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

body {
  /* Distance from the top of the viewport that clears the sticky header, used
     by both sticky sidebars and by the anchor scroll margin.
     Declared here, not on :root, and that matters: a custom property resolves
     the var() inside it against the element it is declared on, and Layout
     measures the header onto `body`. On :root it would have frozen at the
     fallback and stopped following the header. */
  --header-offset: calc(var(--info-header-height, 59px) + 12px);
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}

/* Font size presets: <html data-fs="..."> applied by i18n module */
:root[data-fs="small"]  body { font-size: 14px; }
:root[data-fs="medium"] body { font-size: 16px; }
:root[data-fs="large"]  body { font-size: 18px; }

/* Settings page */
.settings-page .lead {
  margin-bottom: 24px;
}
.settings-list {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
}
.settings-row {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 16px;
}
.settings-row-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-row-title {
  font-weight: 600;
  color: var(--text);
}
.settings-row-subtitle {
  font-size: 0.85em;
  color: var(--text-muted);
}
.settings-divider {
  height: 1px;
  background: var(--border);
  margin: 0 20px;
}
.settings-select {
  font-family: inherit;
  font-size: 0.95em;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  min-width: 140px;
  cursor: pointer;
}
.settings-select:focus {
  outline: none;
  border-color: var(--primary);
}
.settings-note {
  margin-top: 16px;
  font-size: 0.85em;
  color: var(--text-muted);
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Full width, not the article column. The app's header is a bar across the
   whole window with its title hard against the left edge; centring this row on
   a 760px column left the brand floating in the middle of a wide screen, and
   the two sites looked unrelated side by side. The article below stays at its
   reading width -- that is what the app does too. */
.site-header .inner {
  width: 100%;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header .brand {
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  font-size: 1.1em;
  border-bottom: none;
}

.site-header .brand:hover {
  border-bottom: none;
}

/* ---------- Header search ----------
   Replaces the horizontal nav that used to sit here. Closed it is one icon
   next to the menu button; open it takes the rest of the header row. A field
   parked in the header at all times reads as the page's main input, which it
   is not, and a narrow field with a wider panel under it left a step between
   the two. Both are anchored to the right edge.
   Results appear in a panel directly under the field instead of a modal, so
   the page being read stays visible while the list narrows. */

.header-search {
  position: relative;
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* Takes the rest of the row, up to the width of the article it searches: the
   header runs the full width of the window, and a field stretched across all
   of it would put its panel far wider than any chapter title needs. */
.header-search.open {
  flex: 1 1 auto;
  max-width: var(--max-width);
}

/* Same box as .hamburger-btn so the two icons read as one control group. */
.header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
}

.header-search-toggle:hover { border-color: var(--text-muted); }
.header-search-toggle:focus { outline: none; }

.header-search-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.header-search-icon {
  position: absolute;
  left: 9px;
  display: inline-flex;
  color: var(--text-muted);
  pointer-events: none;
}

.header-search-input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  /* Left padding clears the icon; right padding clears the clear button. */
  padding: 0 30px 0 32px;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: inherit;
  font-size: 0.9em;
}

.header-search-input::placeholder { color: var(--text-muted); }
.header-search-input:hover { border-color: var(--text-muted); }

.header-search-input:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg);
}

.header-search-clear {
  position: absolute;
  right: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
}

.header-search-clear:hover { color: var(--text); }

/* Pinned to both edges of the field, so it is the width of the field whatever
   that width happens to be. Nothing to line up by hand, and nothing sticking
   out on either side. */
.header-search-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(70vh, 460px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  /* Above page content, below the drawer and its overlay. */
  z-index: 40;
}

.header-search-list {
  margin: 0;
  padding: 4px;
  list-style: none;
}

.header-search-option > a {
  display: block;
  padding: 7px 9px;
  border-radius: 4px;
  border-bottom: none;
  color: var(--text);
  text-decoration: none;
}

.header-search-option > a:hover { border-bottom: none; }

/* The row is highlighted from the keyboard as well as the pointer, so the
   state lives on the row rather than on :hover alone. */
.header-search-option.active > a {
  background: var(--primary-bg);
}

.header-search-option-page {
  display: block;
  font-size: 0.78em;
  color: var(--text-muted);
}

.header-search-option-title {
  display: block;
  font-size: 0.94em;
  font-weight: 600;
  color: var(--primary);
}

.header-search-option-excerpt {
  display: block;
  font-size: 0.82em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-search-more,
.header-search-retry {
  margin: 0 4px 6px;
  padding: 5px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
}

.header-search-more:hover,
.header-search-retry:hover { color: var(--primary); border-color: var(--primary); }

.header-search-note {
  padding: 12px;
  font-size: 0.86em;
  color: var(--text-muted);
}

.header-search-note-title {
  margin: 0 0 4px;
  color: var(--text);
  font-weight: 600;
}

.header-search-note p { margin: 0 0 6px; }

.header-search-quick {
  padding: 8px;
}

.header-search-quick-title {
  margin: 0 0 4px;
  padding: 0 5px;
  font-size: 0.78em;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.header-search-quick ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-search-quick a {
  display: block;
  padding: 7px 9px;
  border-radius: 4px;
  border-bottom: none;
  color: var(--text);
  font-size: 0.9em;
  text-decoration: none;
}

.header-search-quick a:hover {
  background: var(--primary-bg);
  border-bottom: none;
  color: var(--primary);
}

/* ---------- Main ---------- */
.main-content {
  flex: 1;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

/* The article keeps the same reading width on every page. A page with a
   sidebar grows by the sidebar instead of taking it out of the text, which is
   what used to happen: the guides, the pages with the most to read, ended up
   with the narrowest column on the site, and a wide screen showed a thin strip
   of text with empty space either side. */
/* Keyed on the page, not on the sidebar inside it: the guide's contents are
   rendered when the guide data arrives, so keying on those made the column
   change width a moment after the page opened. The page's own class is there
   from the first frame. */
.main-content:has(.help-page),
.main-content:has(.changelog-page) {
  max-width: calc(var(--max-width) + var(--sidebar-track) + var(--sidebar-gap));
}

/* Mirror of Snap-01 setting_app_screen.dart footer: two columns,
   small muted text, slight letter-spacing, version + changelog link
   on the left, free-to-use notice right-aligned. */
.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85em;
  padding: 16px 20px;
}
/* Full width, matching the header: both are page chrome, and a centred footer
   under a full-width header reads as a mistake. */
.site-footer .inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  letter-spacing: 0.3px;
}
.site-footer .footer-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0.85;
}
.site-footer .footer-changelog a {
  color: var(--primary);
  text-decoration: underline;
  border-bottom: none;
}
.site-footer .footer-changelog a:hover {
  border-bottom: none;
}
.site-footer .footer-right {
  margin-left: auto;
  text-align: right;
  line-height: 1.6;
  opacity: 0.85;
}

@media (max-width: 480px) {
  .site-footer .inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .site-footer .footer-right {
    margin-left: 0;
    text-align: left;
  }
}

/* ---------- Headings ---------- */

h1 {
  font-size: 1.8em;
  margin: 0 0 8px;
  color: var(--text);
}

h2 {
  font-size: 1.4em;
  margin: 32px 0 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--text);
}

h2:first-of-type { border-top: none; padding-top: 0; }

h3 {
  font-size: 1.15em;
  margin: 20px 0 8px;
  color: var(--text);
}

.lead {
  color: var(--text-muted);
  font-size: 1.05em;
  margin: 0 0 24px;
}

/* ---------- Links ---------- */

a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

a:hover {
  border-bottom-color: var(--primary);
}

/* ---------- Cards (index page) ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--gap);
  margin: 24px 0;
}

.card {
  display: block;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s, transform 0.15s;
}

.card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  border-bottom-color: var(--primary);
}

.card h3 {
  margin: 0 0 6px;
  font-size: 1.05em;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.card h3 .icon {
  font-size: 1.1em;
}

.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92em;
}

/* ---------- Help sub-nav ---------- */

.help-sub-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95em;
}

.help-sub-nav a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color 0.15s, border-color 0.15s;
}

.help-sub-nav a:hover {
  color: var(--primary);
}

.help-sub-nav a.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ---------- Download cards (used in help) ---------- */

.download-card {
  display: block;
  max-width: 420px;
  padding: 14px 18px;
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.download-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.download-card .title {
  display: block;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 4px;
  font-size: 1.02em;
}

.download-card .desc {
  display: block;
  color: var(--text-muted);
  font-size: 0.9em;
}

/* ---------- Accordion (used in help) ---------- */

.md-accordion {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  overflow: hidden;
}

.md-accordion[open] {
  background: var(--bg);
}

.md-accordion summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 500;
  color: var(--text);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-accordion summary::-webkit-details-marker { display: none; }

.md-accordion summary::before {
  content: '\EA61';
  font-family: 'AppIcons';
  font-size: 0.85em;
  color: var(--text-muted);
  transition: transform 0.15s;
  line-height: 1;
}

.md-accordion[open] summary::before {
  transform: rotate(90deg);
}

.md-accordion summary:hover {
  color: var(--primary);
}

.md-accordion[open] summary {
  border-bottom: 1px solid var(--border);
}

.md-accordion pre {
  margin: 0;
  border: none;
  border-radius: 0;
  max-height: 60vh;
  overflow-y: auto;
  font-size: 0.82em;
  line-height: 1.55;
}

/* ---------- Note / Warn boxes ---------- */
/* Green-bordered container. The first <strong> in the first <p> acts as
   a title: shown on its own line with an icon, then the body follows. */

.note,
.warn,
.placeholder-note {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  background: transparent;
}

.placeholder-note { color: var(--text-muted); font-size: 0.92em; }

.note p:first-child,
.warn p:first-child,
.placeholder-note p:first-child { margin-top: 0; }

.note p:last-child,
.warn p:last-child,
.placeholder-note p:last-child { margin-bottom: 0; }

/* Title row — explicit class so multiple titles in one box work,
   and a mid-paragraph <strong> never gets mistaken for a title. */
.callout-title {
  margin: 0 0 8px;
  position: relative;
  padding-left: 24px;
  color: var(--primary);
  font-weight: 600;
}

/* Same indent as .markdown-body lists, for the boxes written in the view
   rather than fetched as Markdown. */
.note ul,
.warn ul {
  padding-left: 22px;
}

.note li,
.warn li { margin: 3px 0; }

.note .callout-title + p,
.note .callout-title + ul,
.warn .callout-title + p,
.warn .callout-title + ul { margin-top: 0; }

.note p + .callout-title,
.warn p + .callout-title,
.note ul + .callout-title,
.warn ul + .callout-title { margin-top: 14px; }

.callout-title::before {
  font-family: 'AppIcons';
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--primary);
  font-size: 1em;
}

.note .callout-title::before { content: '\EAC5'; }
.warn .callout-title::before { content: '\EA06'; }

/* ---------- Code ---------- */

code {
  font-family: "Consolas", "Menlo", "Courier New", monospace;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.92em;
}

pre {
  background: var(--code-bg);
  padding: 14px 16px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.5;
  border: 1px solid var(--border);
}

pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}

/* ---------- Tables ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.95em;
}

th, td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--bg-alt);
  font-weight: 600;
}

/* ---------- Badges (mode labels etc) ---------- */

.badge {
  display: inline-block;
  height: 22px;
  padding: 0 8px;
  font-size: 0.78em;
  font-weight: 600;
  line-height: 22px;
  border-radius: 4px;
  vertical-align: middle;
  border: 1px solid;
}

.badge.endless {
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
}

.badge.exam {
  color: #6b21a8;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
}

.badge.review {
  color: var(--primary);
  background: var(--primary-bg);
  border-color: var(--primary-border);
}

.badge .icon {
  font-size: 0.92em;
  vertical-align: -1px;
  margin-right: 3px;
  opacity: 0.95;
}

/* ---------- Checker page ---------- */

.checker-page .lead {
  margin-bottom: 20px;
}

/* Segmented control (replaces pill-shaped radio toggles) */
.format-toggle {
  display: inline-flex;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}

.format-toggle label {
  padding: 6px 14px;
  font-size: 0.88em;
  cursor: pointer;
  user-select: none;
  color: var(--text-muted);
  background: var(--bg);
  border-right: 1px solid var(--border);
  transition: background 0.1s, color 0.1s;
  line-height: 1.4;
}

.format-toggle label:last-child {
  border-right: none;
}

.format-toggle label:hover {
  color: var(--text);
  background: var(--bg-alt);
}

.format-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.format-toggle label:has(input:checked) {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}

.input-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.input-hint {
  font-size: 0.88em;
  color: var(--text-muted);
}

.input-hint strong {
  color: var(--primary);
  font-weight: 600;
}

.input-area {
  width: 100%;
  min-height: 260px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font-family: "Consolas", "Menlo", "Courier New", monospace;
  font-size: 0.88em;
  line-height: 1.55;
  resize: vertical;
}

.input-area:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-bg);
}

.action-row {
  display: flex;
  gap: 8px;
  margin: 12px 0 24px;
  flex-wrap: wrap;
}

.btn {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-light, #1ED760);
  border-color: var(--primary-light, #1ED760);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.btn .icon {
  font-size: 1em;
  opacity: 0.9;
}

/* Result block — flatten the colored summary, rely on left rule + text */
.result-summary {
  padding: 10px 14px;
  border-radius: 4px;
  margin: 16px 0 8px;
  font-size: 0.95em;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.result-summary .icon { font-size: 1.05em; }

.result-summary.ok    { border-left: 3px solid var(--primary);         color: var(--primary); }
.result-summary.warn  { border-left: 3px solid var(--warning-border);  color: var(--warning-border); }
.result-summary.error { border-left: 3px solid #d92e2e;                color: #d92e2e; }

.issue-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg);
}

.issue {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.issue:last-child { border-bottom: none; }

.issue .icon {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  font-size: 1em;
  line-height: 1.55;
}

.issue.error .icon { color: #d92e2e; }
.issue.warn  .icon { color: var(--warning-border); }
.issue.info  .icon { color: var(--text-muted); }

.issue .body { flex-grow: 1; min-width: 0; }

.issue .where {
  display: inline-block;
  padding: 1px 7px;
  background: var(--bg-alt);
  border-radius: 3px;
  font-size: 0.8em;
  color: var(--text-muted);
  font-family: "Consolas", "Menlo", monospace;
}

/* Issues are grouped by kind: the message leads, the places it occurs follow. */
.issue-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.issue-count {
  flex-shrink: 0;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.issue-where-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.issue .msg { font-size: 0.93em; }

.issue .hint {
  display: block;
  font-size: 0.84em;
  color: var(--text-muted);
  margin-top: 3px;
}

.fixed-output {
  margin-top: 28px;
}

.fixed-output h2 {
  margin-bottom: 4px;
}

.fixed-output pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 8px 0 0;
  max-height: 50vh;
  overflow-y: auto;
  font-size: 0.84em;
  line-height: 1.55;
}

/* ---------- Changelog page ---------- */

.changelog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

.changelog-toolbar h1 {
  margin: 0;
}

.version-picker {
  position: relative;
}

.version-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 0.92em;
  cursor: pointer;
  line-height: 1.3;
  transition: border-color 0.12s, background 0.12s;
}
.version-picker-btn:hover { border-color: var(--primary); }
.version-picker-btn.open  { border-color: var(--primary); background: var(--bg-alt); }
.version-picker-btn:focus { outline: none; }
.version-picker-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.version-picker-current {
  font-weight: 600;
  color: var(--primary);
  font-family: "Consolas", "Menlo", monospace;
}
.version-picker-date {
  color: var(--text-muted);
  font-size: 0.86em;
  font-family: "Consolas", "Menlo", monospace;
}
.version-picker-caret {
  opacity: 0.6;
  font-size: 0.85em;
  transition: transform 0.15s;
}
.version-picker-btn.open .version-picker-caret { transform: rotate(180deg); }

.version-picker-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  padding: 4px 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10),
              0 4px 8px rgba(0, 0, 0, 0.04);
  z-index: 30;
  display: flex;
  flex-direction: column;
}

.version-picker-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92em;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.version-picker-menu a:hover {
  background: var(--bg-alt);
  color: var(--primary);
}
.version-picker-menu a.active {
  background: var(--primary-bg);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}

.version-picker-menu-version {
  font-family: "Consolas", "Menlo", monospace;
  font-weight: 600;
}
.version-picker-menu-date {
  color: var(--text-muted);
  font-size: 0.8em;
  font-family: "Consolas", "Menlo", monospace;
}

.changelog-status {
  color: var(--text-muted);
  font-size: 0.9em;
  margin: 0;
  padding: 8px 0;
}

.changelog-error {
  color: #d92e2e;
}

.markdown-body { min-width: 0; }

.markdown-body h2 {
  scroll-margin-top: var(--header-offset);
}

/* When inject_date has put dates into the h2: title on the left, the date
   block stacked at its top right. */
.markdown-body h2:has(.version-h2-dates) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.markdown-body h2 .version-h2-title {
  flex: 0 0 auto;
}
/* The date block stacks: elapsed time above, exact dates below, flush right. */
.markdown-body h2 .version-h2-dates {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
  font-weight: normal;
  letter-spacing: 0.02em;
}
.markdown-body h2 .version-relative {
  display: inline-block;
  padding: 1px 10px;
  background: var(--primary-bg);
  color: var(--primary);
  border-radius: 999px;
  font-size: 0.55em;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.7;
}
.markdown-body h2 .version-detail-line {
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.48em;
  color: var(--text-muted);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .changelog-toolbar {
    align-items: flex-start;
  }
  .version-picker {
    width: 100%;
  }
  .version-picker-btn {
    width: 100%;
    justify-content: space-between;
  }
  .version-picker-menu {
    left: 0;
    right: 0;
  }
}

/* ---------- Sidebar (PC) + dedicated drawer (mobile) ---------- */

.changelog-title,
.help-page-title {
  margin: 0 0 16px;
  flex-shrink: 0;
}

/* Changelog page flows like a normal document -- body length drives
   page height, no inner scroller. Sidebar is sticky like the help
   TOC. Same vertical rhythm as the help pages. */
.changelog-page {
  /* No height / display:flex hack. Page scrolls naturally. */
}

.changelog-layout {
  display: grid;
  /* Sidebar on the RIGHT, matching the help page TOC layout.
     HTML order is sidebar first then content; `order: 2` on the
     sidebar flips them visually without changing markup. */
  grid-template-columns: minmax(0, 1fr) var(--sidebar-track);
  gap: var(--sidebar-gap);
  align-items: stretch;
}

.changelog-sidebar {
  order: 2;
  border: none;
  border-left: 1px solid rgba(127, 127, 127, 0.18);
  background: transparent;
  border-radius: 0;
  padding: 0 0 0 8px;
}

/* Inner sticky wrapper: pinned to top of viewport while scrolling,
   matches `.help-toc-sticky`. Outer aside stretches full height so
   its border-left runs the entire length of the article. */
.changelog-sidebar-sticky {
  position: sticky;
  top: var(--header-offset);
  max-height: calc(100vh - var(--header-offset) - 20px);
  overflow-y: auto;
}

.changelog-version-list {
  display: flex;
  flex-direction: column;
}

.changelog-version-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  font-size: 0.95em;
}

/* Version and date on one row: version plus badge left, date right. */
.changelog-version-item-row,
.version-drawer-item-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  width: 100%;
}
.changelog-version-item-left,
.version-drawer-item-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.changelog-version-item-date,
.version-drawer-item-date {
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.78em;
  color: var(--text-muted);
  white-space: nowrap;
  text-align: right;
}
.changelog-version-item.active .changelog-version-item-date,
.version-drawer-item.active .version-drawer-item-date {
  color: var(--primary);
  opacity: 0.85;
}

/* "updated" gets a smaller second line only when it differs from "created". */
.changelog-version-item-updated,
.version-drawer-item-updated {
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.72em;
  color: var(--text-muted);
  text-align: right;
  letter-spacing: 0.02em;
}
.changelog-version-item:hover {
  background: var(--bg);
  color: var(--primary);
}
.changelog-version-item.active {
  background: var(--primary-bg);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}
.changelog-version-item-version {
  font-family: "Consolas", "Menlo", monospace;
  font-weight: 600;
  font-size: 1em;
}

.changelog-content {
  min-width: 0;
  /* No independent scroller -- page scrolls naturally with the body. */
}

/* Version and badge on the same line. */
.changelog-version-item-version-row,
.version-drawer-item-version-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* "Latest" badge, shared by the sidebar and the sheet. */
.changelog-latest-badge {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.7em;
  font-weight: 600;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo",
               -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--primary);
  border-radius: 999px;
  line-height: 1.5;
  white-space: nowrap;
}

/* ---------- Mobile FAB + side sheet ----------
   One floating button and one sheet, shared by the two pages that have a long
   list to navigate: the changelog picks a version, the help page picks a
   chapter (.help-toc-fab / .help-toc-sheet add only what differs). The
   `version-` prefix is the name it was born with, not a restriction.
   Both are hidden above 760px, where each page shows its list as a sidebar. */

.version-fab {
  display: none;
}

.version-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 60;
}
.version-drawer-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.version-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 320px);
  background: var(--bg);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.22s ease-out;
  z-index: 70;
  display: flex;
  flex-direction: column;
}
.version-drawer.open {
  transform: translateX(0);
}

.version-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.version-drawer-title {
  font-weight: 600;
  color: var(--text);
}
.version-drawer-close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.version-drawer-close:hover {
  background: var(--bg-alt);
  color: var(--text);
}

.version-drawer-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
}
.version-drawer-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px;
  color: var(--text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
.version-drawer-item:hover {
  background: var(--bg-alt);
}
.version-drawer-item.active {
  background: var(--primary-bg);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 600;
}
.version-drawer-item-version {
  font-family: "Consolas", "Menlo", monospace;
  font-weight: 600;
  font-size: 1.02em;
}

@media (max-width: 760px) {
  /* Single-column on mobile: sidebar hidden, content full width,
     FAB + drawer take over for version switching. */
  .changelog-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .changelog-sidebar {
    display: none;
  }

  /* Floating action button at bottom-right */
  .version-fab {
    position: fixed;
    right: 14px;
    bottom: calc(18px + var(--fab-bottom-lift, 0px));
    z-index: 55;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 12px;
    border: none;
    /* Square-ish, like every other control on the site (.back-to-top uses the
       same radius). A pill was the odd one out. */
    border-radius: 8px;
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-size: 0.95em;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18),
                0 2px 4px rgba(0, 0, 0, 0.08);
    max-width: calc(100vw - 28px);
  }
  .version-fab:active { transform: translateY(1px); }

  /* The page's own FAB owns the bottom-right corner, so back-to-top stacks
     above it. They were landing on top of each other once the reader had
     scrolled far enough for both to be there. */
  .app-shell:has(.version-fab) .back-to-top {
    bottom: calc(64px + var(--fab-bottom-lift, 0px));
  }

  .version-fab-icon {
    font-size: 1.1em;
  }
  .version-fab-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
  }
  .version-fab-current {
    font-family: "Consolas", "Menlo", monospace;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16ch;
  }
  .version-fab-date {
    font-family: "Consolas", "Menlo", monospace;
    font-size: 0.78em;
    opacity: 0.85;
  }
}

/* pulldown-cmark output — table-heavy, plus headings, code, lists */
.markdown-body h1 {
  font-size: 1.5em;
  margin: 0 0 4px;
  padding-bottom: 0;
  border-bottom: none;
}

.markdown-body h2 {
  font-size: 1.2em;
  margin: 28px 0 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.markdown-body h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 20px;
}

.markdown-body h3 {
  font-size: 1.05em;
  margin: 18px 0 8px;
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 0.9em;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: block;
  overflow-x: auto;
}

.markdown-body th,
.markdown-body td {
  padding: 7px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.markdown-body tr:last-child td {
  border-bottom: none;
}

.markdown-body th {
  background: var(--bg-alt);
  font-weight: 600;
  font-size: 0.85em;
  white-space: nowrap;
}

.markdown-body code {
  font-family: "Consolas", "Menlo", monospace;
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.88em;
}

.markdown-body pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 12px 0;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.55;
}

.markdown-body pre code {
  background: transparent;
  padding: 0;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 22px;
}

.markdown-body li { margin: 3px 0; }

.markdown-body blockquote {
  margin: 12px 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--border);
  color: var(--text-muted);
}

.markdown-body a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}

.markdown-body a:hover {
  border-bottom-color: var(--primary);
}

/* ---------- Credits page ---------- */

.manual-credits {
  margin: 8px 0 16px;
  padding-left: 22px;
}

.manual-credits li {
  margin: 6px 0;
  line-height: 1.65;
}

.manual-credits strong {
  font-weight: 600;
}

.hint-text {
  font-size: 0.92em;
  color: var(--text-muted);
}

/* cargo-about generated block — per-crate license accordion */
.cargo-about-summary {
  color: var(--text-muted);
  font-size: 0.92em;
  margin: 8px 0 16px;
}

.license-overview-heading,
.license-list-heading {
  font-size: 1em;
  font-weight: 600;
  margin: 20px 0 10px;
  color: var(--text);
}

.license-overview {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.license-overview li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.83em;
  background: var(--bg);
}

.license-overview .license-name {
  font-family: "Consolas", "Menlo", monospace;
  font-weight: 600;
  color: var(--text);
}

.license-overview .license-count {
  color: var(--text-muted);
  font-size: 0.92em;
}

.license-crate-list {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.license-crate {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.license-crate:last-child { border-bottom: none; }

.license-crate[open] {
  background: var(--bg-alt);
}

.license-crate summary {
  cursor: pointer;
  padding: 9px 12px;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  user-select: none;
}

.license-crate summary::-webkit-details-marker { display: none; }

.license-crate summary::before {
  content: '\EA61';
  font-family: 'AppIcons';
  font-size: 0.78em;
  color: var(--text-muted);
  transition: transform 0.15s;
  margin-right: 2px;
}

.license-crate[open] summary::before { transform: rotate(90deg); }

.license-crate-name {
  font-weight: 600;
  font-family: "Consolas", "Menlo", monospace;
  color: var(--text);
}

.license-crate-version {
  color: var(--text-muted);
  font-family: "Consolas", "Menlo", monospace;
  font-size: 0.85em;
}

.license-crate-spdx {
  margin-left: auto;
  padding: 1px 7px;
  font-size: 0.74em;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  white-space: nowrap;
}

.license-crate[open] .license-crate-spdx {
  background: var(--bg);
}

.license-crate-meta {
  padding: 0 12px 8px;
  font-size: 0.83em;
}

.license-crate-meta a {
  color: var(--primary);
  word-break: break-all;
}

.license-crate-text {
  margin: 0;
  padding: 12px 14px;
  background: var(--code-bg);
  border-top: 1px solid var(--border);
  font-size: 0.78em;
  line-height: 1.55;
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "Consolas", "Menlo", monospace;
  color: var(--text);
}

/* ---------- Site menu (drawer) ----------
   The only navigation, at every width: six destinations plus a help
   submenu stopped fitting on one header row, and a drawer holds them
   without shrinking anything. Everything is namespaced .hamburger-*.
   These were written inside a max-width:760px block back when a
   horizontal nav took over on wider screens; they now apply
   unconditionally. */

/* No auto margin here: .header-search carries the one that pushes this pair
   to the right edge. Two auto margins in the row would share the free space
   and leave a gap between the search icon and this button. */
.hamburger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
}
.hamburger-btn:hover { border-color: var(--text-muted); }
.hamburger-btn.open {
  background: var(--bg-alt);
  border-color: var(--primary);
  color: var(--primary);
}
.hamburger-btn:focus { outline: none; }
.hamburger-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Overlay always in DOM; CSS opacity gates visibility so it fades
   instead of popping. pointer-events:none when invisible. */
.hamburger-overlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s;
}
.app-shell.mounted .hamburger-overlay {
  transition: opacity 0.18s ease-out;
}
.hamburger-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer always in DOM, parked off-screen. No transition until
   .app-shell is .mounted (avoids the first-paint flash). */
.hamburger-drawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 88vw;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0s;
  overflow-y: auto;
}
.app-shell.mounted .hamburger-drawer {
  transition: transform 0.22s ease-out;
}
.hamburger-drawer.open {
  transform: translateX(0);
  box-shadow: -14px 0 32px rgba(0, 0, 0, 0.18);
}

.hamburger-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.hamburger-drawer-title {
  font-size: 0.88em;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.hamburger-close {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hamburger-close:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.hamburger-nav {
  display: flex;
  flex-direction: column;
  padding: 6px 0 16px;
  gap: 0;
}

.hamburger-link,
.hamburger-group-toggle,
.hamburger-sublink {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95em;
  border-left: 3px solid transparent;
  background: transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.hamburger-link.active,
.hamburger-group-toggle.active,
.hamburger-sublink.active {
  color: var(--primary);
  border-left-color: var(--primary);
  background: var(--bg-alt);
  font-weight: 600;
}

/* Each row is signposted the way the app signposts the same destination, from
   the same icon font. A fixed-width slot so the labels line up in a column
   whatever glyph is in front of them, and quiet until the row is the page you
   are on. */
.hamburger-link > .icon,
.hamburger-group-toggle > .icon,
.hamburger-sublink > .icon {
  flex: 0 0 18px;
  text-align: center;
  color: var(--text-muted);
}

.hamburger-link.active > .icon,
.hamburger-group-toggle.active > .icon,
.hamburger-sublink.active > .icon {
  color: var(--primary);
}

.hamburger-link:hover,
.hamburger-group-toggle:hover,
.hamburger-sublink:hover {
  background: var(--bg-alt);
}

/* The caret is pushed to the far edge rather than the row being spread out:
   with an icon in front of the label, space-between would have put gaps
   between all three. */
.hamburger-caret {
  margin-left: auto;
  opacity: 0.55;
  transition: transform 0.15s;
}
.hamburger-group.expanded .hamburger-caret {
  transform: rotate(180deg);
}

/* The chapters have to read as a block that belongs to the group above them.
   This was var(--bg-alt), which is two per cent off the background it sits on:
   at that distance the open group had no edges at all. A neutral overlay
   instead of a colour, so one declaration is right in both themes, and the row
   you are on goes back to the plain background so it lifts out of the block. */
.hamburger-sublist {
  display: flex;
  flex-direction: column;
  background: rgba(127, 127, 127, 0.13);
  box-shadow: inset 0 1px 0 rgba(127, 127, 127, 0.18),
              inset 0 -1px 0 rgba(127, 127, 127, 0.18);
}
.hamburger-sublink {
  padding: 9px 18px 9px 30px;
  font-size: 0.88em;
  color: var(--text);
}
/* Deeper than the block it sits in, not lighter: the shared hover above uses
   --bg-alt, which inside this block would lift a row towards the colour the
   current row uses and read as if it were selected. Stays above the .active
   rule so hovering the current row leaves it alone. */
.hamburger-sublink:hover {
  background: rgba(127, 127, 127, 0.22);
}
.hamburger-sublink.active {
  background: var(--bg);
}

.hamburger-applink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 14px 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.92em;
}
.hamburger-applink:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-bg);
}
.hamburger-applink .icon { opacity: 0.85; }

/* ---------- Standing sidebar ----------
   Above the breakpoint the menu stops hiding behind a button and stands open
   to the left of the article, which is the shape the app has: header across
   the top, menu down the left, article and footer in the column beside it.

   The footer lives in that column, so the sidebar runs past it to the bottom
   of the screen rather than stopping above it.

   Deliberately after the .hamburger-* rules: the overrides that take the menu
   button and the drawer out of the layout are single-class selectors, so they
   win on order, not weight.
   The breakpoint is mirrored by SIDEBAR_BREAKPOINT in layout.rs, which closes
   an open drawer when the window grows past it. Change both together. */

.site-body {
  display: flex;
  /* The column has to stretch, or `flex: 1` on the article stops pushing the
     footer to the bottom of a short page. The sidebar opts out by setting its
     own height below. */
  align-items: stretch;
  flex: 1;
}

.site-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Without this the column refuses to shrink below the article's intrinsic
     width and a wide table pushes the sidebar off the screen. */
  min-width: 0;
}

.site-sidebar {
  display: none;
}

@media (min-width: 1200px) {
  .site-sidebar {
    display: block;
    flex: 0 0 280px;
    position: sticky;
    /* Measured live by Layout, so the sidebar follows a header that changes
       height with the font size setting. */
    top: var(--info-header-height, 59px);
    height: calc(100vh - var(--info-header-height, 59px));
    overflow-y: auto;
    border-right: 1px solid var(--border);
    background: var(--bg);
  }

  .site-sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0 24px;
  }

  /* What the sidebar replaces. */
  .hamburger-btn,
  .hamburger-overlay,
  .hamburger-drawer {
    display: none;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
  .site-header .inner { padding: 10px 16px; }
  .main-content { padding: 16px 16px 60px; }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.25em; }
}

/* ===========================================================
 * Help redesign — chrome shared across the 5 help pages.
 * Adds: 2-column layout (main + right sticky TOC), Diataxis chip,
 * step-card numbered procedure, next-steps cards, extra callouts.
 * =========================================================== */

/* ---------- Layout: article + right-hand contents ----------
   Two columns whenever there is room for them, and not conditional on the
   contents having arrived: the guide is fetched, so a grid that only became
   two columns once the list existed made the article change width a moment
   after the page opened. The empty track while it loads costs nothing.
   The border-line stretches the full grid height; only the inner
   `.help-toc-sticky` is sticky, so the line continues past the viewport while
   the link list stays glued. */
.help-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-track);
  gap: var(--sidebar-gap);
  align-items: stretch;
}
.help-main { min-width: 0; }

.help-toc {
  border-left: 1px solid var(--border);
  padding: 0 0 0 16px;
}
/* PC: hide the <summary>, force the body visible regardless of the
   <details> open state so the TOC always renders.
   Mobile rules below override both to enable the accordion. */
.help-toc > summary,
.help-toc-summary {
  display: none;
}
.help-toc-summary::-webkit-details-marker { display: none; }

/* Modern browsers (Baseline 2025-09) hide a closed <details>'s content via
   `content-visibility: hidden` on the ::details-content pseudo, not via
   `display: none` on its children -- so forcing `.help-toc-sticky { display:
   block }` alone no longer reveals it and the PC TOC vanished. Re-show it by
   overriding content-visibility. Older browsers ignore this pseudo and rely on
   the display override above, so this is backward-compatible. On mobile the
   desktop TOC is hidden and a separate inline accordion is used, so this
   override is harmless there. */
.help-toc::details-content {
  /* Make the generated wrapper transparent in the box tree. This restores the
     pre-2025 structure where the sticky TOC nav was a direct child of the
     full-height (grid-stretched) .help-toc, so it can follow the scroll again.
     Also removes the wrapper's content-visibility hiding, so the PC TOC stays
     visible (replaces the earlier `content-visibility: visible` fix). Browsers
     new enough to ship ::details-content (2025) all support display:contents
     (Baseline 2020), and older ones ignore this pseudo and use the display
     override above -- backward-compatible either way. */
  display: contents;
}

.help-toc-sticky {
  display: block;
  position: sticky;
  top: var(--header-offset);
  max-height: calc(100vh - var(--header-offset) - 20px);
  overflow-y: auto;
}

.help-toc-label {
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.help-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.help-toc li { margin: 0; }

.help-toc a {
  display: block;
  padding: 4px 0 4px 10px;
  margin-left: -12px;
  color: var(--text-muted);
  font-size: 0.88em;
  line-height: 1.4;
  text-decoration: none;
  border-bottom: none;
  border-left: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.help-toc a:hover { color: var(--text); }
.help-toc a.active {
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 500;
}
.help-toc a.toc-h3 {
  padding-left: 22px;
  font-size: 0.83em;
}

.help-main :is(h2, h3)[id] {
  scroll-margin-top: var(--header-offset);
}

/* ---------- h3 separator (turn flat h3/p chains into segments) ----
   Each top-level h3 inside the help body gets a hairline divider so
   pages like settings (h3 + 1 short paragraph repeated) read as
   discrete items instead of one wall of text. The very first h3 is
   excluded so the page doesn't start with a stray line. */
.help-main > h3 {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 24px;
}
.help-main > h3:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 14px;
}

/* ---------- Step card (numbered procedure) ---------- */
.step-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0 24px;
  counter-reset: step;
  list-style: none;
  padding: 0;
}

.step-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}

.step-card-num {
  counter-increment: step;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 700;
  font-size: 0.92em;
  font-family: "Consolas", "Menlo", monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 2px;
}
.step-card-num::before { content: counter(step); }

.step-card-body { min-width: 0; }
.step-card-body > h3 {
  margin: 0 0 6px;
  font-size: 1.02em;
  line-height: 1.4;
}
.step-card-body > p { margin: 6px 0; }
.step-card-body > p:first-of-type { margin-top: 0; }
.step-card-body > p:last-child { margin-bottom: 0; }
.step-card-body > ul { margin: 6px 0 0; padding-left: 22px; }
.step-card-body > pre { margin-top: 8px; }

/* ---------- Prereq strip ---------- */
.prereq {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-left: 3px solid var(--text-muted);
  background: var(--bg-alt);
  border-radius: 0 4px 4px 0;
  font-size: 0.9em;
  color: var(--text-muted);
}
.prereq-label {
  display: inline-block;
  font-weight: 600;
  color: var(--text);
  margin-right: 8px;
}
.prereq a { color: var(--primary); }

/* ---------- Next steps (footer card grid) ---------- */
.next-steps {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.next-steps-label {
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.next-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.next-step-card {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.next-step-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
  border-bottom-color: var(--primary);
}
.next-step-card .next-step-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--primary);
  font-size: 0.95em;
  margin-bottom: 3px;
}
.next-step-card .next-step-desc {
  color: var(--text-muted);
  font-size: 0.85em;
  line-height: 1.5;
}

/* ---------- Extra callouts: tip / kbd / important ----------
   Use the same border + .callout-title pattern as .note / .warn. */
.tip,
.kbd-box,
.important {
  margin: 16px 0;
  padding: 14px 16px;
  border: 1px solid var(--primary);
  border-radius: 4px;
  background: transparent;
}
.tip p:first-child, .kbd-box p:first-child, .important p:first-child { margin-top: 0; }
.tip p:last-child,  .kbd-box p:last-child,  .important p:last-child  { margin-bottom: 0; }
.tip .callout-title::before       { content: '\EA51'; }
.kbd-box .callout-title::before   { content: '\EAC7'; }
.important .callout-title::before { content: '\EAA6'; }

/* ---------- Extra icon class mappings (Snap-01 parity) ----------
   These complement the existing .icon-* set defined near the top
   of this file. Adding here keeps the help icons in one place. */
.icon-infinity::before          { content: '\EB69'; }
.icon-clipboard-check::before   { content: '\EA6C'; }
.icon-rotate::before            { content: '\EBB5'; }
.icon-bulb::before              { content: '\EA51'; }
.icon-clock::before             { content: '\EA70'; }
.icon-settings::before          { content: '\EB20'; }
.icon-file-description::before  { content: '\F028'; }
.icon-list-numbers::before      { content: '\EF11'; }
.icon-list-details::before      { content: '\EF40'; }
.icon-key::before               { content: '\EAC7'; }
.icon-palette::before           { content: '\EB01'; }
.icon-typography::before        { content: '\EBC5'; }
.icon-upload::before            { content: '\EB47'; }
.icon-filter::before            { content: '\EAA5'; }
.icon-flag::before              { content: '\EAA6'; }
.icon-help-circle::before       { content: '\F91D'; }
.icon-book::before              { content: '\F028'; }

/* Narrow: no room for a second column, so the contents move to the floating
   button (.help-toc-fab) and the article takes the width. */
@media (max-width: 760px) {
  .help-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .help-toc { display: none; }
}

@media (max-width: 600px) {
  .step-card {
    grid-template-columns: 30px 1fr;
    gap: 10px;
    padding: 12px 12px;
  }
  .step-card-num {
    width: 24px;
    height: 24px;
    font-size: 0.86em;
  }
}

/* ===========================================================
 * Credits & Licenses page
 *
 * Modeled after Apple / Microsoft / Adobe's third-party notices
 * pages: a flat, linear list of every bundled OSS material, each
 * with its full license text inline. No accordions, no tabs, no
 * separate page. Visually quiet: this is a reference / legal
 * document, not a marketing surface.
 * =========================================================== */

.credits-page .lead {
  margin-bottom: 32px;
}

/* One bundled material entry (font / icon / hand-curated dep). */
.ack-entry {
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--border);
}

.ack-entry-name {
  margin: 0 0 4px;
  font-size: 1.1em;
  color: var(--text);
}
.ack-entry-name a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: none;
}
.ack-entry-name a:hover {
  border-bottom: 1px solid var(--primary);
}

.ack-entry-copyright {
  margin: 0 0 2px;
  font-size: 0.92em;
  color: var(--text);
}

.ack-entry-license-label {
  margin: 0 0 10px;
  font-size: 0.85em;
  color: var(--text-muted);
  font-style: italic;
}

.ack-entry-license-text {
  margin: 0;
  padding: 12px 14px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: "Consolas", "Menlo", "Courier New", monospace;
  font-size: 0.78em;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* Auto-generated dependency bundles (cargo-about HTML and the
   Flutter pub-cache scrape). Just a section header + the embedded
   HTML inline. Inherits .license-crate / .license-overview rules
   defined further up in this file. */
.ack-deps-h {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 1.1em;
}

.ack-deps-block {
  margin: 0 0 24px;
}

/* ===========================================================
 * Terms of use
 * The body is Markdown fetched at runtime, so the wording can be
 * revised by replacing a file instead of rebuilding. Only the
 * frame is styled here; headings come from .markdown-body.
 * Same register as the credits page: a quiet legal document, no
 * decoration, and no width of its own so it lines up with every
 * other page.
 * =========================================================== */

.terms-page .lead {
  margin-bottom: 28px;
}

/* First paragraph of the fetched document is its revision date. */
.terms-body > p:first-child {
  margin-top: 0;
  color: var(--text-muted);
  font-size: 0.9em;
}

.terms-status {
  color: var(--text-muted);
}

/* ---------- Back-to-top floating button ----------
   Lives in Layout, visible on every page once the user has scrolled
   past ~400px. `position: fixed` so it sits independent of page
   layout. Stacks above any page-specific FAB on mobile. */
.back-to-top {
  position: fixed;
  right: 20px;
  /* `--fab-bottom-lift` is updated by Layout's scroll listener so the
     button lifts above the footer when the footer is in view (instead
     of disappearing). Default value 0 keeps the button at 20px. */
  bottom: calc(20px + var(--fab-bottom-lift, 0px));
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  padding: 0;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10),
              0 2px 4px rgba(0, 0, 0, 0.04);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out,
              border-color 0.12s, color 0.12s, background 0.12s;
  z-index: 50;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-bg);
}
.back-to-top:focus { outline: none; }
.back-to-top:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  /* Reserve room for the version picker at bottom: 18px.
     Inline help overrides this; footer avoidance still applies. */
  .back-to-top { bottom: calc(72px + var(--fab-bottom-lift, 0px)); }
}