/*
 * App shell: top header strip, the two drawers (Navigator on the left, control panel on the right),
 * segmented tab controls, empty/loading states.
 * Tokens only (see DESIGN.md). Loaded after chrome.css, wins by order.
 */

/* ===========================================================================
 * From the retired page/panel.css. That sheet was written for a control panel
 * that no longer exists; what survived is the bottom control bar, the More menu,
 * the notes modal, the toggle switch and the volume slider. Everything the later
 * sheets already restyle was dropped, and these rules sit first so chrome.css'
 * successors -- and the rest of this file -- still win by order.
 * =========================================================================== */

.panel-section {
  padding: 20px;
  border-bottom: 1px solid var(--border-secondary);
}
.panel-section:last-child {
  border-bottom: none;
}
.panel-section-title i {
  color: var(--text-accent);
  font-size: 14px;
}
.panel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
}
.toggle-switch-modern {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle-switch-modern input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider-modern {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #374151;
  transition: .3s;
  border-radius: 24px;
}
.slider-modern:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  inset-inline-start: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
input:checked + .slider-modern {
  background-color: var(--text-accent);
}
input:checked + .slider-modern:before {
  transform: translateX(calc(20px * var(--flip)));
}
.media-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.volume-control {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
}
.volume-slider {
  width: 100px;
  height: 4px;
  background: rgba(107, 114, 128, 0.3);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--text-accent);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}
.volume-slider::-webkit-slider-thumb:hover {
  background: var(--text-accent);
  transform: scale(1.1);
}
.volume-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--text-accent);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}
.volume-slider::-moz-range-thumb:hover {
  background: var(--text-accent);
  transform: scale(1.1);
}
body.df-fullscreen-active .fixed {
  display: none !important;
}
body.df-fullscreen-active #toggleUnifiedPanelBtn {
  display: none !important;
}
body.df-fullscreen-active #unifiedPanel {
  display: none !important;
}
#customControlBar {
  z-index: 2147483647 !important;
}
.df-ui {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#customControlBar {
  position: fixed;
  bottom: 0;
  background: var(--bg-secondary);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-primary);
  border-bottom: none;
  display: flex;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto !important;
  visibility: visible !important;
  z-index: 2147483647 !important;
}

/*
 * Centring and the side edges apply at every width except the narrowest phones, where the bar
 * spans the screen: the `max-width: 430px` block in chrome.css owns those properties there.
 */
@media (min-width: 430.02px) {
  #customControlBar {
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    border-left: 1px solid var(--border-primary);
    border-right: 1px solid var(--border-primary);
  }
  #customControlBar.visible,
  #customControlBar.always-shown {
    transform: translateX(-50%) translateY(0) !important;
  }
}
.hover-trigger {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60px;
  z-index: 999998;
  pointer-events: auto !important;
  background: transparent;
}
.custom-ui-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.custom-ui-btn:hover {
  border-color: var(--text-accent);
}
.page-indicator {
  text-align: center;
}
.more-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: none;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: start;
}
.more-menu-item i {
  width: 16px;
  text-align: center;
}
#customMoreMenu.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(0);
}
@media (max-width: 768px) {
  .panel-button {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  .mobile-hide {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .panel-section {
    padding: 16px;
  }
}

body.panel-open #flipbookContainer {
  transition: opacity 0.3s ease;
}
.panel-button.loading {
  opacity: 0.6;
  pointer-events: none;
}
.panel-button.loading i {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-secondary);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.modal-container.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: flex !important;
}
.modal-content {
  /* Opaque: text contrast must not depend on what the blurred page behind happens to show */
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  box-shadow: var(--shadow-primary);
  max-width: 800px;
  max-height: 80vh;
  width: 90vw;
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(20px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-container.open .modal-content {
  transform: scale(1) translateY(0);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border-secondary);
  background: var(--bg-primary);
  border-radius: 16px 16px 0 0;
}
.modal-header h2 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto !important;
  z-index: 1000001 !important;
  position: relative !important;
}
.modal-close:hover {
  background: var(--bg-accent-hover);
  color: var(--text-error);
}
.modal-body {
  padding: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-quote-list {
  padding: 24px;
  overflow-y: auto;
  max-height: 60vh;
}
.modal-quotes-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-secondary);
}
.modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal-header-actions {
  display: flex;
  gap: 8px;
}
.modal-export-btn {
  background: var(--bg-accent);
  border-color: var(--border-accent);
}
.modal-export-btn:hover {
  background: var(--bg-accent-hover);
  border-color: var(--text-accent);
  box-shadow: var(--shadow-accent);
}
.modal-quotes-header h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.quotes-count {
  background: var(--bg-accent);
  color: var(--text-accent);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.no-quotes-modal {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-secondary);
}
.modal-loading i {
  font-size: 32px;
  color: var(--text-accent);
  margin-bottom: 16px;
  animation: spin 1s linear infinite;
}
.modal-loading p {
  font-size: 14px;
  margin: 0;
  color: var(--text-secondary);
}
.no-quotes-modal i {
  font-size: 48px;
  color: var(--text-accent);
  margin-bottom: 16px;
  display: block;
}
.no-quotes-modal h3 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.no-quotes-modal p {
  font-size: 14px;
  margin: 0;
}
.modal-quote-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--bg-tertiary);
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border-secondary);
  transition: all 0.2s ease;
}
.modal-quote-item:hover {
  background: var(--bg-accent);
  border-color: var(--border-accent);
  transform: translateY(-1px);
}
.modal-quote-item:last-child {
  margin-bottom: 0;
}
.modal-quote-content {
  flex: 1;
}
.modal-quote-text {
  display: block;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
  font-style: italic;
  position: relative;
}
.modal-quote-text::before {
  content: '"';
  color: var(--text-accent);
  font-size: 20px;
  font-weight: bold;
  margin-inline-end: 4px;
}
.modal-quote-text::after {
  content: '"';
  color: var(--text-accent);
  font-size: 20px;
  font-weight: bold;
  margin-inline-start: 4px;
}
.modal-quote-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
  align-items: center;
}
.modal-quote-timestamp {
  font-weight: 500;
}
.modal-quote-page {
  background: var(--bg-accent);
  color: var(--text-accent);
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 12px;
}
.modal-quote-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.modal-quote-actions .panel-button {
  width: 32px;
  height: 32px;
  font-size: 12px;
  pointer-events: auto !important;
  z-index: 1000001 !important;
  position: relative !important;
  cursor: pointer !important;
  user-select: none;
}
.modal-quote-actions .panel-button:hover {
  transform: scale(1.1) !important;
  box-shadow: none !important;
}
.modal-quote-actions .panel-button:active {
  transform: scale(0.95) !important;
}
@media (max-width: 768px) {
  .modal-content {
    width: 95vw;
    max-height: 90vh;
    border-radius: 12px;
  }
  .modal-header {
    padding: 20px;
    border-radius: 12px 12px 0 0;
  }
  .modal-quote-list {
    padding: 20px;
  }
  .modal-quote-item {
    flex-direction: column;
    gap: 12px;
  }
  .modal-quote-actions {
    align-self: flex-end;
  }
}

.theme-applied #flipbookContainer {
  background: var(--bg-primary) !important;
}
@media (hover: none) {
  .hover-trigger {
    display: none !important;
  }
}

/* Below 430px the bar spans the screen and is not centre-shifted (chrome.css owns that). */
@media (hover: none) and (min-width: 430.02px) {
  #customControlBar {
    transform: translateX(-50%) translateY(0) !important;
  }
}

/* ======================= end of the retired panel.css ====================== */


:root {
  --shell-header-h: 52px;
  --shell-bar-h: 76px;
  /* Drawer widths per device class. LARGE docks, so the Navigator stays narrow (a page tile plus
     its margins) and the panel gets the extra room its forms need. MEDIUM overlays, so both grow. */
  --nav-drawer-w: 340px;
  --panel-drawer-w: 380px;
  --shell-drawer-w: var(--nav-drawer-w);
  --drawer-pad: 16px;
  /* The section switcher: a vertical rail at desk sizes, a bottom tab bar on phones.
     72px, not 64: "Document" at 11px semibold needs that much room to breathe. */
  --rail-w: 72px;
  --tabbar-h: 56px;
  /* Set by body.dock-left / body.dock-right; the reading area and the bottom bar read them */
  --dock-l: 0px;
  --dock-r: 0px;
  /*
   * Mirror factor for the handful of places a logical property cannot reach: a transform, or a
   * calc() that has to know which way "outwards" points. Everything else uses logical properties.
   */
  --flip: 1;
}

:root[dir="rtl"] { --flip: -1; }

/* Type scale: one clear step between the document title, headings and section labels */
h1 { font-size: 20px; line-height: 1.3; margin: 0; }
h2 { font-size: 16px; line-height: 1.35; }
h3 { font-size: 12px; line-height: 1.4; }

/* Bottom bar separators and the More menu, without utility-class spacing */
.bar-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 26px;
  margin: 0 6px;
  background: var(--border-primary);
}

.more-menu-anchor { position: relative; }

.more-menu {
  position: absolute;
  bottom: 100%;
  inset-inline-end: 0;
  width: 224px;
  margin-bottom: 10px;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  z-index: 1001;
}
.more-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.more-menu-inner { display: flex; flex-direction: column; gap: 3px; padding: 6px; }

.modal-title { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------------ header */

.app-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: var(--shell-header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  z-index: 9600;
  background: transparent;
  pointer-events: none;
}

.app-header > * { pointer-events: auto; }

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 6px;
  border-radius: 10px;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 150ms ease;
}

.app-brand img { width: 22px; height: 22px; display: block; }

.app-brand-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.app-brand-github { font-size: 15px; color: var(--text-secondary); transition: color 150ms ease; }
.app-brand:hover { color: var(--text-accent); }
.app-brand:hover .app-brand-github { color: var(--text-accent); }

.app-doc-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.app-doc-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.header-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease !important;
  transform: none !important;
  box-shadow: none !important;
}

.header-btn:hover,
.header-btn:focus-visible {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
  transform: none !important;
  outline: none;
}

.header-btn[aria-expanded="true"] {
  background: var(--bg-accent) !important;
  border-color: var(--border-accent) !important;
  color: var(--text-accent) !important;
}

.header-btn-quiet { color: var(--text-secondary) !important; opacity: 0.75; }
.header-btn-quiet:hover { opacity: 1; }

/* ------------------------------------------------------------------ drawers */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 180ms ease;
}
.drawer-scrim.visible { opacity: 1; }

.drawer {
  position: fixed;
  top: calc(var(--shell-header-h) + 4px);
  bottom: var(--shell-bar-h);
  width: var(--shell-drawer-w);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Opaque in every theme: --bg-secondary is 94-95% alpha, and the page used to bleed through it */
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.38);
  z-index: 9500;
  transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1), opacity 180ms ease;
}

/*
 * "left" and "right" here name the two drawers, not two sides of the screen: with `dir="rtl"`
 * the Navigator opens from the right and the control panel from the left, which is what the
 * logical properties below do. Only the slide-in transform needs `--flip`.
 */
.drawer-left {
  inset-inline-start: 0;
  border-inline-start: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
  transform: translateX(calc(-102% * var(--flip)));
  opacity: 0;
}

.drawer-right {
  inset-inline-end: 0;
  width: var(--panel-drawer-w);
  border-inline-end: none;
  border-start-start-radius: 14px;
  border-end-start-radius: 14px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  transform: translateX(calc(102% * var(--flip)));
  opacity: 0;
}

.drawer-left.open,
.drawer-right.open {
  transform: translateX(0);
  opacity: 1;
}

/* Head: identity and page count on the left, one close button on the right. Spans the full width
   of the drawer, above both the rail and the content column. Both drawers share this rhythm. */
.drawer-head,
.panel-header {
  flex: 0 0 auto;
  padding: 12px var(--drawer-pad) 12px var(--drawer-pad);
  border-bottom: 1px solid var(--border-secondary);
  background: transparent;
}

.drawer-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
}

.drawer-head-text { min-width: 0; padding-top: 2px; }

.drawer-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.drawer-subtitle {
  margin: 4px 0 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}
.drawer-subtitle-unit { opacity: 0.75; }

/* Below the head: the section switcher and the content column, side by side */
.drawer-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.drawer-col {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.drawer-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.drawer-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-inline-end: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  font-size: 15px;
  cursor: pointer;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}
.drawer-close:hover,
.drawer-close:focus-visible {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  transform: none !important;
  outline: none;
}

/* ------------------------------------------------- section switcher (rail) */

/*
 * One switcher, two orientations. Above 768px it is a vertical icon rail pinned to the drawer's
 * outer edge (the screen edge), so the content column always sits next to the book. Below 768px
 * the same element becomes a bottom tab bar inside the sheet, within thumb reach.
 */
.drawer-switch {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: transparent;
}
.drawer-switch::-webkit-scrollbar { display: none; }

/* The rail hugs the screen edge; the divider separates it from the content column */
.drawer-left .drawer-switch { order: 0; border-inline-end: 1px solid var(--border-secondary); }
.drawer-right .drawer-switch { order: 2; border-inline-start: 1px solid var(--border-secondary); }

.switch-btn {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 1px;
  border-radius: 9px;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-sans);
  cursor: pointer;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

.switch-btn i { font-size: 18px; line-height: 1; }

.switch-label {
  display: block;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switch-btn:hover,
.switch-btn:focus-visible {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  transform: none !important;
  outline: none;
}

/* Active: an accent fill plus a 3px bar on the outer edge. The label keeps --text-primary,
   because the accent alone fails 4.5:1 on the light and nord palettes. */
.switch-btn[aria-selected="true"] {
  background: var(--bg-accent) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
}
.switch-btn[aria-selected="true"]::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--text-accent);
}
.drawer-left .switch-btn[aria-selected="true"]::before { inset-inline-start: -3px; }
.drawer-right .switch-btn[aria-selected="true"]::before { inset-inline-end: -3px; }

/* ------------------------------------------------------- segmented controls */

.segmented {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 11px;
  overflow-x: auto;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }

.seg-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  white-space: nowrap;
  border-radius: 8px;
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}
.seg-btn i { font-size: 13px; opacity: 0.9; }
.seg-btn:hover,
.seg-btn:focus-visible {
  color: var(--text-primary) !important;
  background: var(--bg-primary) !important;
  transform: none !important;
  outline: none;
}
/* Active tab: the label stays --text-primary (the accent alone fails 4.5:1 on the light and
   nord palettes); the accent carries the state through the fill and the border. */
.seg-btn[aria-selected="true"],
.seg-btn.media-mode-active {
  background: var(--bg-accent) !important;
  border-color: var(--text-accent) !important;
  color: var(--text-primary) !important;
  font-weight: 600;
}
.segmented-sm .seg-btn { min-height: 38px; font-size: 13px; }
/* Two settings that turn the whole document over: full 44px targets, however small the label. */
#printRangeSwitch .seg-btn,
#hardCoverSwitch .seg-btn { min-height: 44px; }

/* ------------------------------------------------ buttons, inputs, switches */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.ui-btn i { font-size: 13px; color: var(--text-secondary); transition: color 150ms ease; }
.ui-btn:hover,
.ui-btn:focus-visible { background: var(--bg-tertiary); border-color: var(--border-accent); outline: none; }
.ui-btn:hover i { color: var(--text-accent); }
.ui-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.ui-btn-primary {
  flex: 0 0 auto;
  padding: 0 18px;
  background: var(--bg-accent);
  border-color: var(--border-accent);
  color: var(--text-accent);
  font-weight: 600;
}
.ui-btn-primary i { color: var(--text-accent); }
.ui-btn-primary:hover,
.ui-btn-primary:focus-visible { background: var(--bg-accent-hover); border-color: var(--text-accent); color: var(--text-accent); }

.ui-btn-block { display: flex; width: 100%; justify-content: flex-start; }
.ui-btn-sm { min-height: 38px; padding: 0 11px; font-size: 12.5px; gap: 6px; }

.btn-pair { display: flex; gap: 8px; }
.btn-pair .ui-btn { flex: 1 1 0; min-width: 0; }
.btn-pair-tight { flex: 0 0 auto; }
.btn-pair-tight .ui-btn { flex: 0 0 auto; }

.panel-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13.5px;
  outline: none;
  transition: border-color 150ms ease;
}
.panel-input::placeholder { color: var(--text-secondary); opacity: 0.85; }
.panel-input:focus { border-color: var(--text-accent); }

.input-field { display: flex; align-items: center; gap: 8px; }

.sr-only-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ------------------------------------------------- navigator drawer content */

#navigatorBody .df-sidemenu,
#navigatorBody .df-thumb-container,
#navigatorBody .df-outline-container,
#navigatorBody .df-search-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  z-index: 1 !important;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

#navigatorBody .df-sidemenu.df-sidemenu-visible { display: block !important; }

/* The drawer has one close button; the engine's per-panel close is redundant */
#navigatorBody .df-ui-sidemenu-close { display: none !important; }

#navigatorBody .df-search-wrapper {
  position: absolute;
  inset: 0;
}

#navigatorBody .df-thumb-wrapper,
#navigatorBody .df-outline-wrapper {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 28px;
  text-align: center;
  background: var(--bg-primary);
}

.drawer-empty[hidden] { display: none; }

.drawer-empty i {
  font-size: 22px;
  color: var(--text-secondary);
  opacity: 0.7;
}

.drawer-empty p {
  margin: 0;
  max-width: 30ch;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ----------------------------------------------------- control panel drawer */

#unifiedPanel.panel-container {
  width: var(--panel-drawer-w);
  height: auto;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-primary);
  animation: none !important;
}

/* The document name is the panel's title; it may wrap to two lines */
.panel-doc-name {
  font-size: 15px !important;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px var(--drawer-pad) calc(24px + env(safe-area-inset-bottom)) var(--drawer-pad);
}

.panel-pane { display: block; }
.panel-pane[hidden] { display: none; }

/* Tight inside a group, generous between groups */
.panel-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
}
.panel-group + .panel-group { border-top: 1px solid var(--border-secondary); padding-top: 22px; }
.panel-group:last-child { padding-bottom: 4px; }
.panel-group-flush { gap: 4px; }

.panel-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.panel-group-head .panel-section-title { margin-bottom: 0 !important; }

.panel-section-title {
  margin: 0 0 2px 0 !important;
  font-family: var(--font-sans);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.panel-note {
  margin: -2px 0 2px 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

.panel-row-label {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--text-primary);
}


/* Bottom-bar mode: the value is spelled out next to the switch */
.switch-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.switch-value {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
}
.switch-field:has(input:checked) .switch-value { color: var(--text-primary); }

.panel-footer {
  flex: 0 0 auto;
  padding: 6px var(--drawer-pad) calc(8px + env(safe-area-inset-bottom)) var(--drawer-pad);
  border-top: 1px solid var(--border-secondary);
}

.panel-version-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  transition: color 150ms ease;
}
.panel-version-link i { color: var(--text-accent); }
.panel-version-link:hover { color: var(--text-primary); }
.panel-version-word {
  font-family: var(--font-sans);
  font-size: 12px;
  /* No opacity: --text-secondary is already the quiet ink, and dimming it further fell under
     4.5:1 on the default palette. */
}
.panel-version-link:hover .panel-version-word { text-decoration: underline; text-underline-offset: 3px; }

/* Shortcuts: two columns, key caps on the right */
.shortcut-list { margin: 0; display: flex; flex-direction: column; gap: 2px; }
/* A device with no keyboard has nothing to do with this table */
@media (hover: none) and (pointer: coarse) {
  .panel-group-shortcuts { display: none; }
}
.shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
}
.shortcut dt {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
}
.shortcut dd { margin: 0; display: inline-flex; gap: 4px; }
.shortcut kbd {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1;
  padding: 6px 6px;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
}

/* ------------------------------------------------------------- notes (list) */

.quotes-list { margin-top: 6px; display: flex; flex-direction: column; }

#quoteList .quote-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-secondary);
  border-radius: 0;
}
#quoteList .quote-item:last-child { border-bottom: none; }
#quoteList .quote-content { min-width: 0; flex: 1 1 auto; }

#quoteList .quote-text {
  display: block;
  max-width: none;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  cursor: text;
}
#quoteList .quote-text:hover { overflow: visible; white-space: normal; }

#quoteList .quote-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
}
#quoteList .quote-pdf-info { display: none; }
#quoteList .quote-page-info { color: var(--text-accent); }

#quoteList .quote-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 150ms ease;
}
#quoteList .quote-item:hover .quote-actions,
#quoteList .quote-item:focus-within .quote-actions { opacity: 1; }
@media (hover: none) {
  #quoteList .quote-actions { opacity: 1; }
}
#quoteList .quote-actions button {
  margin: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
#quoteList .quote-actions button:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-primary); }

/* Empty states: an icon and one sentence */
#quoteList:empty::before,
#modalQuoteList:empty::before {
  content: attr(data-empty);
  display: block;
  max-width: 34ch;
  margin: 0 auto;
  padding: 28px 4px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
#quoteList:empty::after {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  margin-top: -18px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 20px;
  color: var(--text-secondary);
  opacity: 0.55;
}
#quoteList .no-quotes::before {
  content: "\f10d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: block;
  margin-bottom: 12px;
  font-size: 20px;
  color: var(--text-secondary);
  opacity: 0.55;
}
#quoteList .no-quotes {
  max-width: 34ch;
  margin: 0 auto;
  padding: 28px 4px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------- media pane */

.media-switch { margin-bottom: 2px; }
.youtube-input-container,
.local-audio-container { display: flex; flex-direction: column; gap: 8px; }
.youtube-input-container.hidden,
.local-audio-container.hidden { display: none; }

.panel-file-label { cursor: pointer; }
.panel-file-label i { color: var(--text-secondary); }

.media-filename {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-filename.hidden { display: none; }

/* The player only exists once something is playing; media.js shows and hides it */
.media-player-container { position: relative; margin-top: 18px; }

.media-player-youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
}
.media-player-youtube iframe { display: block; width: 100%; height: 100%; border: 0; }

.media-close {
  position: absolute;
  top: -10px;
  inset-inline-end: -6px;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-primary) !important;
  color: var(--text-secondary) !important;
  font-size: 12px;
  cursor: pointer;
  transform: none !important;
}
.media-close:hover { color: var(--text-primary) !important; border-color: var(--border-accent) !important; transform: none !important; }
.media-close.hidden { display: none; }

.media-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 12px;
}
.media-card.hidden { display: none; }

.media-transport { display: flex; align-items: center; gap: 12px; }

.media-play-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-accent) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--text-accent) !important;
  cursor: pointer;
  transform: none !important;
  box-shadow: none !important;
}
.media-play-btn:hover { background: var(--bg-accent-hover) !important; transform: none !important; }

.media-progress { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.media-progress input[type="range"] { width: 100%; }
.media-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.media-subrow { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 12px; }
.media-subrow input[type="range"] { flex: 1 1 auto; min-width: 0; }


/* ------------------------------------------------- settings rows, surfaces */

/* The theme row is a quiet row like its neighbours: swatch, current theme, chevron */
.setting-item-clickable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  margin: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.setting-item-clickable:hover,
.setting-item-clickable:focus-visible { background: var(--bg-tertiary); border-color: var(--border-accent); outline: none; }
.setting-item-clickable .item-left {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
  text-align: start;
  font-size: 13.5px;
  font-weight: 500;
}
/* The swatch is drawn by the row: the theme manager rewrites the label element itself */
.setting-item-clickable::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-inline-end: -2px;
  border-radius: 50%;
  background: var(--text-accent);
  border: 1px solid var(--border-accent);
}
.setting-item-clickable .chevron { font-size: 12px; color: var(--text-secondary); opacity: 1; }

/* Browser surfaces: scrollbars, selection and the caret belong to the design too */
.panel-body,
#navigatorBody .df-thumb-wrapper,
#navigatorBody .df-outline-wrapper,
#navigatorBody .df-search-results {
  scrollbar-width: thin;
  scrollbar-color: var(--border-primary) transparent;
}
.panel-body::-webkit-scrollbar,
#navigatorBody .df-thumb-wrapper::-webkit-scrollbar,
#navigatorBody .df-outline-wrapper::-webkit-scrollbar,
#navigatorBody .df-search-results::-webkit-scrollbar { width: 10px; }
.panel-body::-webkit-scrollbar-thumb,
#navigatorBody .df-thumb-wrapper::-webkit-scrollbar-thumb,
#navigatorBody .df-outline-wrapper::-webkit-scrollbar-thumb,
#navigatorBody .df-search-results::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
.panel-body::-webkit-scrollbar-thumb:hover,
#navigatorBody .df-thumb-wrapper::-webkit-scrollbar-thumb:hover,
#navigatorBody .df-outline-wrapper::-webkit-scrollbar-thumb:hover,
#navigatorBody .df-search-results::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); background-clip: content-box; }
.panel-body::-webkit-scrollbar-track,
#navigatorBody .df-thumb-wrapper::-webkit-scrollbar-track,
#navigatorBody .df-outline-wrapper::-webkit-scrollbar-track,
#navigatorBody .df-search-results::-webkit-scrollbar-track { background: transparent; }

.drawer ::selection { background: var(--bg-accent-active); color: var(--text-primary); }
.drawer input { caret-color: var(--text-accent); }


/* Older ID-scoped rules (button.css, input-panel-buttons.css) still target these
   controls; the drawer's own component styles win back here, by order and weight. */
#loadYoutubeBtn.ui-btn-primary,
#addQuoteBtn.ui-btn-primary {
  background: var(--bg-accent);
  border: 1px solid var(--border-accent);
  color: var(--text-accent);
  padding: 0 18px;
}
#loadYoutubeBtn.ui-btn-primary:hover,
#addQuoteBtn.ui-btn-primary:hover { background: var(--bg-accent-hover); border-color: var(--text-accent); }
#addQuoteBtn.ui-btn-primary i { color: var(--text-accent); }
/* The label is CSS-side because the quotes script swaps this button's icon between states */
#addQuoteBtn::after { content: "Add"; }
#addQuoteBtn:has(.fa-save)::after { content: "Update"; }
#addQuoteBtn:has(.fa-spin)::after { content: "Saving"; }

#quoteInput.panel-input { width: auto; margin-inline-end: 0; color: var(--text-primary); }

#closeMediaContainer.media-close:hover {
  background: var(--bg-tertiary) !important;
  transform: none !important;
}

/* --------------------------------------------------- loading / empty states */

.doc-loading {
  /* Quiet by design: the page ground, a hairline of progress under the header, and the document name.
     It only becomes visible after 350 ms, so fast loads never flash it. */
  position: fixed;
  inset: var(--shell-header-h) 0 var(--shell-bar-h) 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  pointer-events: none;
  opacity: 0;
  animation: docLoadingReveal 200ms ease-out 350ms forwards;
}
.doc-loading[hidden] { display: none; }
@keyframes docLoadingReveal { to { opacity: 1; } }

.doc-loading-bar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 2px;
  overflow: hidden;
  background: var(--border-secondary);
}
.doc-loading-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  background: var(--text-accent);
  animation: docLoadingSweep 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes docLoadingSweep {
  from { left: -30%; }
  to { left: 100%; }
}

.doc-loading-text {
  margin: 6px 0 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
}
.doc-loading-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .doc-loading { animation: none; opacity: 1; }
  .doc-loading-bar::after { animation: none; left: 0; width: 100%; opacity: 0.5; }
}

/* ------------------------------------------------------ device classes */

/*
 * LARGE (>=1200px): the drawers dock. They stop being overlays -- no scrim, no modality, both
 * can be open at once -- and the reading area shrinks by their width so the book stays whole
 * and centred in what is left. `--dock-l` / `--dock-r` carry the widths to the stage and the bar.
 */
@media (min-width: 1200px) {
  body.dock-left { --dock-l: var(--nav-drawer-w); }
  body.dock-right { --dock-r: var(--panel-drawer-w); }

  /* `w-full` in the markup would keep the stage 100% of the body, so the margins have to
     take their width from the flow instead: width:auto plus a margin per docked side. */
  body.dock-left #flipbookContainer,
  body.dock-right #flipbookContainer { width: auto; }
  body.dock-left #flipbookContainer { margin-inline-start: var(--dock-l); }
  body.dock-right #flipbookContainer { margin-inline-end: var(--dock-r); }
  /* The margin is not animated: animating it would relayout the WebGL stage on every frame.
     The drawer slides in over the 180ms; the reading area takes its new width at once. */

  /* The bottom bar belongs to the reading area, so it centres in what the drawers leave.
     (It shrink-wraps its contents; a max-width here would clamp the box the transform centres.) */
  #customControlBar { left: calc(50% + var(--flip) * (var(--dock-l) - var(--dock-r)) / 2); }
  /* Two docked drawers leave the bar a narrow strip: it sheds its secondary controls, which
     stay in the More menu, rather than sitting on top of a drawer. */
  body.dock-left.dock-right #customControlBar { gap: 10px; padding: 10px 14px; }

  /* A docked drawer is part of the layout: full height, square inner edge, no lift, no scrim */
  body.dock-left #navigatorDrawer,
  body.dock-right #unifiedPanel {
    top: var(--shell-header-h);
    bottom: 0;
    box-shadow: none;
  }
  body.dock-left #navigatorDrawer { border-radius: 0; border-inline-start: none; border-bottom: none; }
  body.dock-right #unifiedPanel { border-radius: 0; border-inline-end: none; border-bottom: none; }
  .drawer-scrim { display: none; }
}

@media (min-width: 1200px) and (max-width: 1599px) {
  body.dock-left.dock-right #customControlBar .mobile-hide { display: none !important; }
}

/* Narrowest docked case: the separators go too, and the rhythm tightens one step */
@media (min-width: 1200px) and (max-width: 1279px) {
  body.dock-left.dock-right #customControlBar { gap: 6px; padding: 8px 10px; }
  body.dock-left.dock-right #customControlBar .bar-sep { display: none; }
}

/*
 * `mobile-support.js` injects `.mobile-device .panel-container { width: 100vw !important }` when
 * the UA looks like a tablet/phone or the window is <=768px at load, and never takes it back --
 * so an iPad in landscape got a full-width control panel. Above the sheet breakpoint the panel
 * is a drawer; claim its width back.
 */
@media (min-width: 768px) {
  body.mobile-device #unifiedPanel.panel-container {
    width: var(--panel-drawer-w) !important;
    max-width: none !important;
  }
}

/* MEDIUM (768-1199px): still an overlay with a scrim, one step wider, same rail navigation */
@media (min-width: 768px) and (max-width: 1199px) {
  :root { --nav-drawer-w: 380px; --panel-drawer-w: 420px; --drawer-pad: 18px; }
}

/* SMALL (<768px): a full-width sheet whose switcher moves to a bottom tab bar, above the app bar */
@media (max-width: 767px) {
  :root { --nav-drawer-w: 100vw; --panel-drawer-w: 100vw; --drawer-pad: 18px; }

  /* Sheets are opaque: the book must not read through the list you are using */
  .drawer,
  #unifiedPanel.panel-container {
    background: var(--bg-primary);
    inset-inline: 0;
    width: 100vw;
    max-width: none;
    border-radius: 0;
    border-inline: none;
    padding-bottom: 0;
  }

  /* The switcher drops to the bottom of the sheet and turns horizontal */
  .drawer-main { flex-direction: column; }
  .drawer-col { order: 1; flex: 1 1 auto; min-height: 0; }
  .drawer-left .drawer-switch,
  .drawer-right .drawer-switch {
    order: 2;
    flex: 0 0 auto;
    flex-direction: row;
    width: auto;
    min-height: var(--tabbar-h);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    border: none;
    border-top: 1px solid var(--border-secondary);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .drawer-switch .switch-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 64px;
    min-height: 48px;
  }
  .switch-label { font-size: 12px; }
  .drawer-left .switch-btn[aria-selected="true"]::before,
  .drawer-right .switch-btn[aria-selected="true"]::before {
    top: -4px;
    bottom: auto;
    inset-inline: 12px;
    width: auto;
    height: 3px;
  }

  /* A hair of ground between the sheet and the app's bottom bar */
  .drawer { bottom: calc(var(--shell-bar-h) + 6px); }

  .app-doc-title { font-size: 12px; }
  .app-brand-name { display: none; }
  .panel-doc-name { font-size: 16px !important; }
  .panel-body { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .panel-footer { padding-bottom: 8px; }
  /* Touch: the note actions are always there, no hover to reveal them */
  #quoteList .quote-actions { opacity: 1; }
}

@media (max-width: 430px) {
  :root { --shell-bar-h: 66px; --drawer-pad: 16px; }
  .app-header { padding: 0 6px; gap: 6px; }
  .btn-pair { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer,
  .drawer-scrim,
  .modal-container,
  .modal-content { transition: none !important; }
}

/* The panel must never freeze the book behind it on desktop */
body.panel-open { overflow: hidden; }
body.panel-open #flipbookContainer { pointer-events: auto; opacity: 1; }

/* --- Recent documents (Document tab) ------------------------------------------------------ */
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recent-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-bottom: 1px solid var(--border-secondary);
}
.recent-item:last-child { border-bottom: none; }
.recent-open {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.recent-open:hover:not(:disabled) { background: var(--bg-tertiary); }
.recent-open:disabled { cursor: default; }
.recent-open > i { flex: none; width: 18px; text-align: center; font-size: 15px; color: var(--text-secondary); }
.recent-item.is-current .recent-open > i { color: var(--text-accent); }
.recent-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.recent-name {
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-remove {
  flex: none;
  width: 44px;
  min-height: 44px;
  align-self: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms ease, color 150ms ease, background-color 150ms ease;
}
.recent-item:hover .recent-remove,
.recent-item:focus-within .recent-remove,
.recent-remove:focus-visible { opacity: 1; }
.recent-remove:hover { color: var(--text-primary); background: var(--bg-tertiary); }
@media (hover: none) and (pointer: coarse) { .recent-remove { opacity: 1; } }

.panel-group[hidden] { display: none; }

/* ------------------------------------------------------- language and direction */

/*
 * The interface mirrors through logical properties (see DESIGN.md, "Language and direction"):
 * `dir="rtl"` on <html> is enough for the header, the drawers, the rail and the bottom bar to
 * swap sides. What is left here is what a logical property cannot express — a glyph that points
 * at something, and a script that needs its own type.
 */

/* IBM Plex Sans carries no Arabic, so Arabic text falls through to the reader's system face.
   Arabic glyphs are taller than Latin ones at the same size, so the interface gets more leading. */
:root[lang="ar"] {
  --font-sans: 'Segoe UI', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Geeza Pro', Tahoma, sans-serif;
  line-height: 1.7;
}
:root[lang="ar"] .switch-label { line-height: 1.35; }
:root[lang="ar"] .drawer-title,
:root[lang="ar"] h1,
:root[lang="ar"] h2 { line-height: 1.45; }

/*
 * The mono face is for numbers and counters. Arabic prose set in it falls through to a generic
 * monospace with none of the joining a Naskh face gives, so Arabic keeps the interface face and
 * only the number-only elements stay mono.
 */
:root[lang="ar"] .storage-usage,
:root[lang="ar"] .drawer-subtitle,
:root[lang="ar"] .recent-meta,
:root[lang="ar"] #quoteList .quote-meta,
:root[lang="ar"] .panel-version-link { font-family: var(--font-sans); }

/* Numbers and the page counter stay in Western digits and in their own order */
:root[lang="ar"] { font-variant-numeric: normal; }
.drawer-subtitle,
.recent-size,
.quotes-count { unicode-bidi: isolate; }

/*
 * Directional glyphs: an arrow or a chevron points at where it takes you, so it turns over with
 * the interface. Icons that only decorate (the file, the cog, the quote mark) stay as they are.
 */
:root[dir="rtl"] .chevron,
:root[dir="rtl"] #customPrevBtn i,
:root[dir="rtl"] #customNextBtn i,
:root[dir="rtl"] #menuFirstPageBtn i,
:root[dir="rtl"] #menuLastPageBtn i,
:root[dir="rtl"] .df-outline-toggle::before { transform: scaleX(-1); }

/* Toasts belong to the end edge of the screen, like the rest of the interface */
:root[dir="rtl"] .toastify.toastify-right { right: auto; left: 15px; }
:root[dir="rtl"] .toastify.toastify-left { left: auto; right: 15px; }

/* ------------------------------------------------------------- print dialog */

/* The bottom bar pins itself at the maximum z-index, so the dialog sits above it. */
.print-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.45);
}
.print-overlay[hidden] { display: none; }

.print-panel {
  width: 100%;
  max-width: 440px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  box-shadow: var(--shadow-primary);
}

.print-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-secondary);
}
.print-title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.print-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.print-close:hover { background: var(--bg-tertiary); color: var(--text-primary); }

.print-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.print-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.print-field[hidden] { display: none; }
.print-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.print-input {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  font-family: var(--font-mono);
}
.print-input[aria-invalid="true"] { border-color: var(--text-error); }

.print-hint,
.print-summary {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-secondary);
}
.print-summary { font-family: var(--font-mono); }

.print-error,
.print-warning,
.print-progress {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
}
.print-error { color: var(--text-error); }
.print-warning { color: var(--text-warning); }
.print-progress { color: var(--text-secondary); font-family: var(--font-mono); }
.print-error[hidden],
.print-warning[hidden],
.print-progress[hidden] { display: none; }

.print-panel-foot {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-secondary);
}
.print-panel-foot .ui-btn { min-height: 44px; }

@media (max-width: 480px) {
  .print-panel-foot { flex-direction: column-reverse; }
  .print-panel-foot .ui-btn { width: 100%; }
}