/* ============================================================================
   WikiChino — reader layout (three zones)
   Left:   chapter list inside the Wiki.js drawer (chapters.js)
   Centre: chapter head (breadcrumb · title · meta), level bar, article, pager
   Right:  reading rail — "En esta página" + progress + PDF (toc-layout.js,
           pdf-counter.js)
   <960px: bottom bar + sheets (bottom-bar.js) replace the rails.
   Loaded after view-styles.css; tokens come from custom.css.
   ============================================================================ */

:root {
  /* --wc-drawer-w and --wc-rail-w live in custom.css (shared with the editor). */
  --wc-topbar-h: 64px;
  --wc-bar-h: 56px;
}
@media (max-width: 959.98px) {
  :root { --wc-topbar-h: 56px; }
}

/* ── Native chrome replaced by the reader layout ─────────────────────────── */
/* The native side column (TOC, author, shortcuts) is superseded by the rail
   and the chapter head's meta line. */
.v-main .page-col-sd { display: none !important; }
.v-main .page-col-content:not(.is-page-header) {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}
/* Our head carries the title and a readable breadcrumb; hide the native
   page header and the slug breadcrumb bar on those pages. */
html.wc-chapter-head-on .v-main .page-header-section,
html.wc-chapter-head-on .v-main .page-col-content.is-page-header,
html.wc-chapter-head-on .v-main .v-toolbar:has(.breadcrumbs-nav) {
  display: none !important;
}

/* Section headings land below the sticky top bar + level bar. */
.v-main .contents h1,
.v-main .contents h2,
.v-main .contents h3 {
  scroll-margin-top: calc(var(--wc-topbar-h) + 64px);
}

/* ── Chapter head ────────────────────────────────────────────────────────── */
/* The head opens the page, so the article needs no extra top air. */
@media (min-width: 960px) {
  html.wc-chapter-head-on .v-main .page-col-content .contents { padding-top: 1.25rem; }
}
.wc-chapter-head {
  box-sizing: border-box;
  max-width: var(--wc-text-w, none);
  padding: 2rem 3rem 0 1.5rem;
  font-family: var(--wc-font-body);
}
.wc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wc-muted);
}
.wc-breadcrumb li + li::before {
  content: "›";
  margin-right: 4px;
  color: var(--wc-faint);
}
.wc-breadcrumb a {
  color: var(--wc-accent-800);
  text-decoration: none;
}
.wc-breadcrumb a:hover { color: var(--wc-accent); text-decoration: underline; }
.v-application .wc-chapter-title {
  margin: 0;
  font: 600 2.4rem/1.15 var(--wc-font-heading);
  color: var(--wc-text) !important;
}
.wc-chapter-meta {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--wc-muted);
}
.wc-chapter-tag {
  color: var(--wc-accent-800);
  text-decoration: none;
}
.wc-chapter-tag:hover { text-decoration: underline; }

@media (max-width: 959.98px) {
  .wc-chapter-head { padding: 1.25rem 0 0; }
  .v-application .wc-chapter-title { font-size: 1.9rem; }
}

/* ── Level bar (level-filter.js) ─────────────────────────────────────────── */
/* Part of the chapter head, not a toolbar: no box of its own, the article's
   width and left edge, and chips drawn like the level badges in the text. */
.wc-level-bar {
  position: sticky;
  top: var(--wc-topbar-h);
  z-index: 4;
  box-sizing: border-box;
  max-width: var(--wc-text-w, none);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  padding: 8px 3rem 8px 1.5rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  font-family: var(--wc-font-body);
  transition: background var(--wc-ease), border-color var(--wc-ease), box-shadow var(--wc-ease);
}
.wc-level-bar.is-stuck {
  background: color-mix(in oklab, #fff 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom-color: var(--wc-divider);
  box-shadow: 0 6px 12px -10px rgb(32 31 29 / 0.25);
}
.wc-level-bar [hidden] { display: none !important; }
.v-application .wc-level-bar__label {
  flex: 0 0 auto;
  margin: 0;
  line-height: 1;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
}
.wc-level-bar__chips {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.wc-level-bar__chips::-webkit-scrollbar { display: none; }
.wc-level-bar__sep {
  flex: 0 0 1px;
  align-self: stretch;
  margin: 3px 2px;
  background: var(--wc-divider);
}

/* Chips: the in-text badge recipe (3px corners, 11px semibold, level stroke
   and ink). Unselected = outline on the page; selected = the level's tint. */
.wc-level-bar .wc-level-chip {
  flex: 0 0 auto;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid var(--wc-divider);
  background: transparent;
  color: var(--wc-neutral-700);
  font: 600 11.5px/1.35 var(--wc-font-body);
  letter-spacing: 0.04em;
}
.wc-level-bar .wc-level-chip:hover { background: var(--wc-neutral-100); }
.wc-level-bar .wc-level-chip.wc-pill-all.active {
  background: var(--wc-accent-100);
  border-color: var(--wc-accent);
  color: var(--wc-accent-800);
}
.wc-level-chip__n {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.wc-level-chip__n:empty { display: none; }
.wc-level-bar .wc-level-chip.wc-lv-a1:not(.active) { border-color: var(--lv-a1); color: var(--lv-a1i); }
.wc-level-bar .wc-level-chip.wc-lv-a2:not(.active) { border-color: var(--lv-a2); color: var(--lv-a2i); }
.wc-level-bar .wc-level-chip.wc-lv-b1:not(.active) { border-color: var(--lv-b1); color: var(--lv-b1i); }
.wc-level-bar .wc-level-chip.wc-lv-b2:not(.active) { border-color: var(--lv-b2); color: var(--lv-b2i); }
.wc-level-bar .wc-level-chip.wc-lv-h1:not(.active) { border-color: var(--lv-h1); color: var(--lv-h1i); }
.wc-level-bar .wc-level-chip.wc-lv-h2:not(.active) { border-color: var(--lv-h2); color: var(--lv-h2i); }
.wc-level-bar .wc-level-chip.wc-lv-h3:not(.active) { border-color: var(--lv-h3); color: var(--lv-h3i); }
.wc-level-bar .wc-level-chip.wc-lv-h4:not(.active) { border-color: var(--lv-h4); color: var(--lv-h4i); }
.wc-level-bar .wc-level-chip.wc-lv-h5:not(.active) { border-color: var(--lv-h5); color: var(--lv-h5i); }
.wc-level-bar .wc-level-chip.wc-lv-h6:not(.active) { border-color: var(--lv-h6); color: var(--lv-h6i); }
/* While one level is chosen, the others step back. */
.wc-level-bar:has(.wc-level-chip.active:not(.wc-pill-all)) .wc-level-chip:not(.active) { opacity: 0.6; }
.wc-level-bar:has(.wc-level-chip.active:not(.wc-pill-all)) .wc-level-chip:not(.active):hover { opacity: 1; }

.wc-level-bar__combine {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--wc-muted);
  cursor: pointer;
  white-space: nowrap;
}
.wc-level-bar__combine input {
  margin: 0;
  accent-color: var(--wc-accent);
  cursor: pointer;
}
@media (max-width: 959.98px) {
  /* Phones: every level stays visible — chips wrap beside the label instead
     of scrolling out of sight — and the bar scrolls away with the head
     rather than pinning several rows over the text. */
  .wc-level-bar { position: static; padding: 8px 0; flex-wrap: wrap; align-items: flex-start; row-gap: 8px; }
  .v-application .wc-level-bar__label { padding-top: 7px; }
  .wc-level-bar__chips { flex: 1 1 0; flex-wrap: wrap; overflow: visible; row-gap: 6px; }
}

/* ── Reading rail (≥960px) ───────────────────────────────────────────────── */
.wc-reading-rail { display: none; }
@media (min-width: 960px) {
  html.wc-rail-on .v-main {
    padding-right: var(--wc-rail-w) !important;
  }
  html.wc-rail-on.wc-page-index-hidden .v-main {
    padding-right: 0 !important;
  }
  html.wc-rail-on .wc-reading-rail {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: fixed;
    top: var(--wc-topbar-h);
    right: 0;
    bottom: 0;
    z-index: 3;
    box-sizing: border-box;
    width: var(--wc-rail-w);
    /* Title row level with the chapter list's chevron (top bar + 16px). The
       narrow rail keeps 12px sides so the PDF button fits on one line. */
    padding: 16px 12px 24px 12px;
    overflow-y: auto;
    border-left: 1px solid var(--wc-divider);
    background: var(--wc-bg);
    font-family: var(--wc-font-body);
  }
  html.wc-page-index-hidden .wc-reading-rail { display: none !important; }
}
.wc-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}
.v-application .wc-rail__title,
.wc-rail__title {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
}
.wc-progress {
  height: 2px;
  margin: 0 0 12px;
  background: var(--wc-divider);
  border-radius: 1px;
  overflow: hidden;
}
.wc-progress > span {
  display: block;
  width: var(--wc-progress, 0%);
  height: 100%;
  background: var(--wc-accent);
  transition: width 120ms linear;
}
.v-application .wc-toc-list,
.wc-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.wc-toc-list li { margin: 0; }
.wc-toc-list a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid transparent;
  color: var(--wc-muted);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.4;
  transition: color var(--wc-ease), border-color var(--wc-ease);
}
.wc-toc-item--d2 a { padding-left: 24px; font-size: 12.5px; }
.wc-toc-list a:hover { color: var(--wc-text); }
.wc-toc-list a[aria-current] {
  color: var(--wc-accent-800);
  border-left-color: var(--wc-accent);
  font-weight: 600;
}
.wc-rail-toc .wc-toc-list { border-left: 1px solid var(--wc-divider); }
.wc-rail-toc .wc-toc-list a { margin-left: -1px; }
.wc-reading-rail .wc-pdf-host { margin-top: auto; }

/* ── Left zone: drawer as a light chapter rail ───────────────────────────── */
.v-application .v-navigation-drawer.primary {
  background-color: var(--wc-surface) !important;
  border-color: var(--wc-divider) !important;
  border-right: 1px solid var(--wc-divider);
}
.v-application .v-navigation-drawer.primary .v-list-item,
.v-application .v-navigation-drawer.primary .v-list-item .v-icon,
.v-application .v-navigation-drawer.primary .v-list-item__title {
  color: var(--wc-neutral-700) !important;
}
.v-application .v-navigation-drawer.primary .v-list-item:hover {
  background: var(--wc-neutral-100);
}
.v-application .v-navigation-drawer.primary .v-list.primary,
.v-application .v-navigation-drawer.primary .v-list {
  background: transparent !important;
}
.v-application .v-navigation-drawer.primary .v-divider { border-color: var(--wc-divider) !important; }
/* Wiki.js "browse" navigation mode adds a header row (home + Navegación /
   site-tree switch) painted with Vuetify's own blue: give it the rail's
   light ground, neutral buttons, and room for the collapse chevron. */
.v-application .v-navigation-drawer.primary .blue,
.v-application .v-navigation-drawer.primary .blue.darken-3 {
  background-color: transparent !important;
  border-color: var(--wc-divider) !important;
}
.v-application .v-navigation-drawer.primary .v-navigation-drawer__content .pa-3.d-flex {
  padding-right: 52px !important;
  border-bottom: 1px solid var(--wc-divider);
}
.v-application .v-navigation-drawer.primary .v-btn.theme--dark:not(.v-btn--icon) {
  background-color: var(--wc-surface) !important;
  border: 1px solid var(--wc-divider);
  color: var(--wc-neutral-700) !important;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0;
}
.v-application .v-navigation-drawer.primary .v-btn.theme--dark:not(.v-btn--icon) .v-icon { color: inherit !important; }
.v-application .v-navigation-drawer.primary .v-btn.theme--dark:not(.v-btn--icon):hover {
  border-color: var(--wc-accent);
  color: var(--wc-accent-800) !important;
}
/* The drawer's custom scrollbar keeps Vuetify's primary blue otherwise. */
.v-application .v-navigation-drawer.primary .__bar-is-vertical {
  background: var(--wc-neutral-300) !important;
}
.v-application .v-navigation-drawer.primary .v-list-item__title { font-size: 13.5px !important; }
.v-application .v-navigation-drawer.primary .v-list-item { min-height: 38px; }

/* Public site links stay above the chapter list and its in-place organiser.
   The native browser can contain fixtures/private pages for an administrator;
   replace it only after a valid authoritative API document has mounted.
   Errors restore the native menu; no loading-state selector hides it. */
.wc-site-links-ready > .v-list,
.wc-site-links-ready > .pa-3.d-flex { display: none !important; }
.wc-site-links { padding: 8px 0; font-family: var(--wc-font-body); }
.wc-site-links__link {
  display: block;
  padding: 9px 16px;
  color: var(--wc-neutral-700) !important;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
}
.wc-site-links__link:hover { background: var(--wc-neutral-100); }
.wc-site-links__link:focus-visible { outline: 2px solid var(--wc-accent-800); outline-offset: -2px; }
.wc-site-links__link[aria-current="page"] { background: var(--wc-neutral-100); color: var(--wc-accent-800) !important; font-weight: 600; }

.wc-chapters {
  padding: 8px 0 32px;
  border-top: 1px solid var(--wc-divider);
  font-family: var(--wc-font-body);
}
/* The reader owns its scrolling, so its footer never travels with the list.
   Keep the Vue scroll view bounded only while the reader is mounted; the
   in-place organiser retains its existing scrolling and sticky save actions. */
.v-application .v-navigation-drawer.primary:has(#wc-chapters) { max-height: 100dvh; }
.v-application .v-navigation-drawer.primary:has(#wc-chapters) .v-navigation-drawer__content,
.v-application .v-navigation-drawer.primary:has(#wc-chapters) .__panel { overflow: hidden !important; }
.v-application .v-navigation-drawer.primary:has(#wc-chapters) .__view { height: 100% !important; }
.v-application .v-navigation-drawer.primary :has(> #wc-chapters) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.v-application .v-navigation-drawer.primary :has(> #wc-chapters) > :not(#wc-chapters) { flex: 0 0 auto; }
.v-application .v-navigation-drawer.primary #wc-chapters {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.wc-chapters__content {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 8px 0 24px;
}
.wc-chapters__footer {
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--wc-divider);
  background: var(--wc-surface);
}
.v-application .wc-chapters__footer > .wc-chapters__organise {
  width: 100%;
  max-width: 100%;
  min-height: 40px;
  margin: 0;
}
.wc-chapters__title {
  margin: 14px 16px 6px;
  font: 600 1.15rem/1.2 var(--wc-font-heading);
}
.wc-chapters__title a { color: var(--wc-text); text-decoration: none; }
.wc-chapters__title a:hover { color: var(--wc-accent-800); }
.wc-chapters__group-label {
  margin: 14px 16px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
}
.v-application .wc-chapters__list { margin: 0; padding: 0; list-style: none; }
.wc-chapters__list li { margin: 0; }
.wc-chapters__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 16px 6px 14px;
  border-left: 2px solid transparent;
  color: var(--wc-neutral-700) !important;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.35;
}
.wc-chapters__link:hover { background: var(--wc-neutral-100); color: var(--wc-text) !important; }
.wc-chapters__zh {
  flex: 0 0 auto;
  font-family: var(--wc-font-zh);
  font-size: 13px;
  color: var(--wc-faint);
}
.wc-chapters__link[aria-current="page"] {
  border-left-color: var(--wc-accent);
  background: var(--wc-accent-100);
  color: var(--wc-accent-800) !important;
  font-weight: 600;
}
.wc-chapters__link[aria-current="page"] .wc-chapters__zh { color: var(--wc-accent-700); }

/* From 960px the chapter list is narrower than Vuetify's 256px drawer. From
   1264px the open drawer pushes the text, so the main area's left padding
   follows the same width. */
@media (min-width: 960px) {
  .v-application .v-navigation-drawer.primary { width: var(--wc-drawer-w) !important; }
}
@media (min-width: 1264px) {
  html.wc-drawer-open .v-main { padding-left: var(--wc-drawer-w) !important; }
}

/* 960–1263px: the drawer overlays the text instead of pushing it, so the
   reading column keeps its measure next to the rail. */
@media (min-width: 960px) and (max-width: 1263.98px) {
  html.wc-rail-on .v-main { padding-left: 0 !important; }
  html.wc-rail-on .v-navigation-drawer.primary { z-index: 6; }
  /* Shadow only while shown, so no strip lingers at the edge when closed. */
  html.wc-rail-on .v-navigation-drawer.primary.v-navigation-drawer--open { box-shadow: var(--wc-shadow-lg); }
}

/* ── Panel toggles on the panel edges (navigation-controls.js) ────────────
   One small round chevron per panel, always in the same corner: inside the
   panel while it is open (pointing the way it collapses), at the matching
   corner of the text area while it is closed (pointing the way it opens).
   Hidden below 960px (bottom bar). */
.wc-edge-toggle {
  position: fixed;
  top: calc(var(--wc-topbar-h) + 16px);
  z-index: 8;
  display: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wc-divider);
  border-radius: 50%;
  background: var(--wc-surface);
  color: var(--wc-neutral-700);
  cursor: pointer;
  transition: color var(--wc-ease), border-color var(--wc-ease), background var(--wc-ease), left var(--wc-ease), right var(--wc-ease);
}
.wc-edge-toggle:hover { color: var(--wc-accent-800); border-color: var(--wc-accent); background: var(--wc-accent-100); }
.wc-edge-toggle:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 2px; }
.wc-edge-toggle[hidden] { display: none !important; }
.wc-edge-toggle__chevron { flex: 0 0 auto; }
/* The label names the control for assistive tech; the tooltip shows it. */
.wc-edge-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 960px) {
  .wc-edge-toggle { display: inline-flex; }
  #wc-site-nav-toggle[aria-expanded="true"] { left: calc(var(--wc-drawer-w) - 28px - 12px); }
  #wc-site-nav-toggle[aria-expanded="false"] { left: 12px; }
  /* Open rail: the toggle is in the title row (in flow, not fixed). */
  .wc-rail__head #wc-page-index-toggle { position: static; flex: 0 0 auto; }
  #wc-page-index-toggle[aria-expanded="false"] { right: 12px; }
  .wc-edge-toggle[aria-expanded="false"] { box-shadow: var(--wc-shadow-sm); }
  .wc-edge-toggle[aria-expanded="false"] .wc-edge-toggle__chevron { transform: rotate(180deg); }

  /* Keep the text area clear of a closed panel's chevron. The overlay range
     keeps the room open even while the drawer is shown, so text never moves. */
  html:not(.wc-drawer-open) .v-main > .v-main__wrap > .container { padding-left: 52px !important; }
}
@media (min-width: 960px) and (max-width: 1263.98px) {
  html.wc-rail-on .v-main > .v-main__wrap > .container { padding-left: 52px !important; }
  html.wc-page-index-hidden .v-main > .v-main__wrap > .container { padding-right: 52px !important; }
}

/* The reading column (head · level bar · article · pager) fills the space
   left between the chapter list and the rail, whatever the drawer state:
   open beside the text from 1264px, collapsed, or an overlay between 960 and
   1263px (an overlay never moves the text). When the reader caps the width
   (Ancho del texto), the capped column is centred in that space. */
@media (min-width: 960px) {
  html.wc-rail-on .v-main .page-col-content .contents,
  html.wc-rail-on .wc-chapter-head,
  html.wc-rail-on .wc-level-bar,
  html.wc-rail-on .wc-chapter-pager {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Previous / next chapter ─────────────────────────────────────────────── */
.wc-chapter-pager {
  box-sizing: border-box;
  max-width: var(--wc-text-w, none);
  display: flex;
  gap: 12px;
  margin: 3rem 0 2rem;
  padding: 0 3rem 0 1.5rem;
  font-family: var(--wc-font-body);
}
.wc-chapter-pager__link {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--wc-divider);
  border-radius: var(--wc-radius-lg);
  background: var(--wc-surface);
  text-decoration: none;
  transition: border-color var(--wc-ease), background var(--wc-ease);
}
.wc-chapter-pager__link--next { text-align: right; margin-left: auto; }
.wc-chapter-pager__link:hover { border-color: var(--wc-accent); background: var(--wc-accent-100); }
.wc-chapter-pager__kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
}
.wc-chapter-pager__title {
  font: 600 1.15rem/1.25 var(--wc-font-heading);
  color: var(--wc-text);
}
@media (max-width: 959.98px) {
  .wc-chapter-pager { padding: 0; flex-direction: column; }
  .wc-chapter-pager__link--next { margin-left: 0; }
}

/* The edit FAB sits left of the rail instead of over the PDF card; the
   header hamburger already opens the chapter list, so Wiki.js's floating
   nav button goes. */
@media (min-width: 960px) {
  html.wc-rail-on .v-btn--fixed.v-btn--left.v-btn--bottom { display: none !important; }
  html.wc-rail-on:not(.wc-page-index-hidden) .v-speed-dial--fixed.v-speed-dial--right {
    right: calc(var(--wc-rail-w) + 16px) !important;
  }
}
.wc-reading-rail .wc-pdf-host { padding: 12px 10px !important; }
.wc-reading-rail .wc-pdf-save-btn {
  padding: 7px 8px;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* ── Mobile bottom bar + sheets (<960px) ─────────────────────────────────── */
.wc-bottom-bar { display: none; }
@media (max-width: 959.98px) {
  html.wc-bottom-bar-on .wc-bottom-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    height: calc(var(--wc-bar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: color-mix(in oklab, var(--wc-surface) 96%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--wc-divider);
  }
  /* The drawer footer sits above the persistent navigation bar, which stays
     available for closing the drawer and guarding pending organiser edits. */
  html.wc-bottom-bar-on .v-navigation-drawer.primary {
    height: calc(100dvh - var(--wc-bar-h) - env(safe-area-inset-bottom, 0px)) !important;
  }
  html.wc-bottom-bar-on .v-main { padding-bottom: calc(var(--wc-bar-h) + 16px) !important; }
  /* The bar replaces Wiki.js's floating nav button; the edit FAB lifts
     above it. */
  html.wc-bottom-bar-on .v-btn--fixed.v-btn--left.v-btn--bottom {
    display: none !important;
  }
  html.wc-bottom-bar-on .v-speed-dial--fixed.v-speed-dial--bottom {
    bottom: calc(var(--wc-bar-h) + 16px) !important;
  }
}
.wc-bottom-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--wc-neutral-700);
  font: 500 11px/1.2 var(--wc-font-body);
  cursor: pointer;
}
.wc-bottom-bar__btn:hover,
.wc-bottom-bar__btn[aria-expanded="true"] { color: var(--wc-accent-800); }
.wc-bottom-bar__btn:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: -4px; }
.wc-bottom-bar__btn:disabled { opacity: 0.4; cursor: default; }

.wc-sheet { position: fixed; inset: 0; z-index: 40; }
.wc-sheet__scrim { position: absolute; inset: 0; background: rgb(32 31 29 / 0.32); }
.wc-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 78vh;
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  background: var(--wc-bg);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--wc-shadow-lg);
  font-family: var(--wc-font-body);
  animation: wc-sheet-in 180ms ease-out;
}
.wc-sheet__panel:focus { outline: none; }
@keyframes wc-sheet-in { from { transform: translateY(24px); opacity: 0; } }
.wc-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 8px 20px;
}
.wc-sheet__title {
  margin: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
}
.wc-sheet__close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--wc-muted);
  font-size: 16px;
  cursor: pointer;
}
.wc-sheet__close:hover { background: var(--wc-neutral-100); }
.wc-sheet .wc-progress { margin: 0 20px 8px; }
.wc-sheet__body { overflow-y: auto; padding: 0 12px 16px 8px; }
.wc-sheet .wc-toc-list a { padding-top: 9px; padding-bottom: 9px; font-size: 14.5px; }
@media (prefers-reduced-motion: reduce) {
  .wc-sheet__panel { animation: none; }
  .wc-progress > span { transition: none; }
}

/* ── Print: none of the reader chrome belongs on paper ──────────────────── */
@media print {
  .wc-reading-rail,
  #wc-chapters,
  #wc-site-links,
  .wc-breadcrumb,
  .wc-level-bar,
  .wc-chapter-pager,
  .wc-bottom-bar,
  .wc-sheet,
  #wc-right-panel {
    display: none !important;
  }
  /* Beat the screen rules for the rails and the bottom bar. */
  html.wc-rail-on .v-main,
  html.wc-bottom-bar-on .v-main,
  .v-main { padding: 0 !important; }
}