/* Layout ------------------------------- */

:root {
  --page-frame: 20px;
  --gap: 0.75rem;
  --gap-sm: 0.25rem;
  --padding: 0.75rem;
  --panel-inset: var(--padding);
  --topbar-inset: var(--padding);
  --topbar-height: 3.375rem;
  --topbar-btn-size: 2.75rem;
  /* Filter row + reader panel toolbars share one height (taller topbar row wins). */
  --subtoolbar-height: var(--topbar-height);
  --library-topbar-secondary-height: var(--subtoolbar-height);
  --library-chrome-height: calc(var(--topbar-height) + var(--library-topbar-secondary-height));
  --btn-size: 3.5rem;
  --btn-size-sm: 2.75rem;
  --topbar-icon-size: 1.5rem;
  --icon-btn-glyph-size: var(--topbar-icon-size);
  --icon-btn-glyph-size-sm: 1.375rem;
  --toc-width: 18.75rem;
  --toc-inset-inline: 0.625rem;
  --notes-width: 22.5rem;
  --settings-width: 17.5rem;
  --reader-main-search-width: 18rem;
  --book-card-height: 11.875rem;
  --radius: 0.375rem;
  --radius-round: 50%;
  --panel-context-bg: var(--c-light);
  --panel-notes-input-bg: var(--c-lightest);
  --shadow-menu: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
  --library-settings-width: 22.5rem;
  --library-filter-max-width: 28rem;
  --reader-prose-max-width: 42rem;
  --reader-prose-padding: clamp(1rem, 4vw, 1.75rem);
  --z-bar: 30;
  --z-overlay: 999;
  --z-dropdown: 1001;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1500px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
  padding: var(--page-frame);
  box-sizing: border-box;
  background: var(--page-frame-bg);
}

html.is-page-fullscreen {
  --page-frame: 0px;
}

body {
  height: 100%;
  overflow: hidden;
  border: none;
  box-shadow: none;
}

button,
.btn-secondary {
  border-radius: var(--radius-round);
}

input,
select,
textarea {
  border-radius: var(--radius);
  outline: none;
}

input,
select {
  height: 2.375rem;
  max-width: 11.25rem;
  padding: 0 var(--padding);
}

.input-clearable {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.input-clearable>input[type="text"] {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding-right: 2.375rem;
}

.input-clear-btn {
  position: absolute;
  right: 0.125rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-round);
  cursor: pointer;
}

.input-clear-btn[hidden] {
  display: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.u-sr-only {
  position: absolute !important;
  width: 0.0625rem !important;
  height: 0.0625rem !important;
  padding: 0 !important;
  margin: -0.0625rem !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
}

.is-hidden {
  display: none !important;
}

.is-overlay {
  position: fixed !important;
  top: calc(var(--topbar-height) + var(--page-frame)) !important;
  left: var(--page-frame) !important;
  right: var(--page-frame) !important;
  bottom: var(--page-frame) !important;
  height: auto !important;
  z-index: var(--z-overlay) !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  background: var(--bg-chrome);
}

#librus-app:has(#library:not(.is-hidden)) #library-settings.is-overlay {
  top: calc(var(--library-chrome-height) + var(--page-frame)) !important;
  height: auto !important;
}

.is-fullscreen {
  grid-template-rows: 0 1fr;
}

.is-visible {
  display: flex !important;
}

.icon-btn {
  width: var(--btn-size);
  height: var(--btn-size);
  cursor: pointer;
  border: none;
  border-radius: var(--radius-round);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: inherit;
}

.icon-btn-glyph {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

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

.btn-wide {
  width: 100%;
  height: 2.75rem;
  padding: 0 var(--padding);
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app {
  display: grid;
  grid-template-rows: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  box-shadow: none;
}

.view {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

#reader.view {
  grid-template-rows: 1fr;
}

#reader > .reader {
  grid-row: 1;
  min-height: 0;
  height: 100%;
}

.topbar {
  display: flex !important;
  height: var(--topbar-height);
  width: 100%;
  align-items: center;
  padding: 0 var(--padding);
  transition: transform var(--duration-normal) var(--ease-standard);
  position: relative;
  z-index: var(--z-bar);
}

.toolbar {
  display: flex !important;
  height: var(--subtoolbar-height);
  width: 100%;
  align-items: center;
  padding: 0 var(--padding);
  transition: transform var(--duration-normal) var(--ease-standard);
  position: relative;
  z-index: var(--z-bar);
}

#library-topbar.topbar {
  flex-direction: column;
  align-items: stretch;
  height: var(--library-chrome-height);
  padding: 0;
}

.library-topbar-primary {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--topbar-height);
  padding: 0 var(--topbar-inset);
  flex-shrink: 0;
  position: relative;
}

.library-topbar-secondary {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--library-topbar-secondary-height);
  padding: 0 var(--topbar-inset);
  gap: 0;
  flex-shrink: 0;
  position: relative;
}

#library-topbar .icon-btn {
  width: var(--topbar-btn-size);
  height: var(--topbar-btn-size);
  flex-shrink: 0;
}

#library-topbar,
#reader-topbar {
  position: relative;
}

#library-topbar {
  border-bottom: none;
}

/* Chrome rows: gradient between library rows / below reader topbar; toolbars 1px bottom border. */

#library-topbar .library-topbar-secondary,
.reader-toc-toolbar,
#reader-main-toolbar,
.reader-context-toolbar,
.reader-notes-toolbar,
.library-settings-toolbar {
  border-bottom: 1px solid var(--border-color);
  box-shadow: none;
}

/* Library filter row — four-panel accent gradient. */
.library-topbar-secondary::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--topbar-accent-height);
  background: var(--library-filter-gradient);
  pointer-events: none;
  z-index: 3;
}

/* Reader panel toolbars — top border matches panel accent color. */
.reader-toc-toolbar {
  border-top: var(--topbar-accent-height) solid var(--panel-accent-toc);
}

#reader-main-toolbar {
  border-top: var(--topbar-accent-height) solid var(--panel-accent-main);
}

.reader-context-toolbar {
  border-top: var(--topbar-accent-height) solid var(--panel-accent-context);
}

.reader-notes-toolbar {
  border-top: var(--topbar-accent-height) solid var(--panel-accent-notes);
}

.topbar.is-scroll-hidden,
.toolbar.is-scroll-hidden {
  transform: translateY(-100%);
}

.library-topbar-start,
.library-topbar-center,
.library-topbar-end,
.reader-topbar-start,
.reader-topbar-center,
.reader-topbar-end,
.reader-main-toolbar-start,
.reader-context-toolbar-start,
.reader-notes-toolbar-start {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.reader-main-toolbar-end,
.reader-context-toolbar-end,
.library-settings-toolbar-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.library-topbar-start,
.reader-topbar-start,
.reader-main-toolbar-start,
.reader-context-toolbar-start,
.reader-notes-toolbar-start {
  justify-content: flex-start;
}

.library-topbar-center,
.reader-topbar-center {
  justify-content: center;
}

.library-topbar-end,
.reader-topbar-end,
.reader-main-toolbar-end,
.reader-context-toolbar-end,
.library-settings-toolbar-end {
  justify-content: flex-end;
}

.library-topbar-end,
.reader-topbar-end {
  gap: 0.25rem;
}

.reader-context-toolbar {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: visible;
}

.reader-context-toolbar-start {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}

.reader-context-toolbar-end {
  flex: 0 0 auto;
}

.context-split-search {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  flex-shrink: 0;
}

.context-split-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-size);
  padding: 0;
  border: none;
  cursor: pointer;
  background: none;
}

.context-split-search-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.context-split-search-main {
  width: var(--btn-size);
  border-radius: var(--radius) 0 0 var(--radius);
}

.context-split-search-toggle {
  width: 2rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.context-current-selection {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: var(--gap);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-current-selection.is-placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.context-provider-menu {
  position: fixed;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 11.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-menu);
}

.context-provider-menu.is-hidden {
  display: none;
}

.context-provider-option {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  padding: var(--padding) var(--padding);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  background: none;
}

.context-provider-option:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.library-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.icon-btn--badged {
  position: relative;
  overflow: visible;
}

.icon-btn--badged .app-status-led {
  position: absolute;
  top: 0.4375rem;
  right: 0.4375rem;
  z-index: 2;
  pointer-events: none;
}

.status-led {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  background-color: var(--led-green);
  box-shadow: 0 0 0.375rem var(--led-green);
  transition: background-color 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
}

.status-led.updated {
  background-color: var(--led-green);
  box-shadow: 0 0 0.375rem var(--led-green);
}

.status-led.update-available {
  background-color: var(--led-orange);
  box-shadow: 0 0 0.375rem var(--led-orange);
  animation: pulse-slow 2s infinite;
}

.status-led.offline {
  background-color: var(--led-red);
  box-shadow: 0 0 0.375rem var(--led-red);
  animation: pulse-fast 0.5s infinite;
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes pulse-fast {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.1; }
}

.library-topbar-logo {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  border-radius: 0.5rem;
}

.reader-topbar-title {
  min-width: 0;
}

.topbar .icon-btn:disabled {
  opacity: 1;
}

.dropdown-container {
  position: relative;
  display: inline-block;
  height: var(--btn-size);
  z-index: var(--z-dropdown);
}

.dropdown-menu {
  position: absolute;
  top: var(--topbar-height);
  right: var(--padding);
  display: flex;
  flex-direction: column;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-menu);
  border-radius: var(--radius);
  width: var(--settings-width);
  padding: var(--padding);
  gap: var(--gap);
}

.dropdown-menu select {
  width: 100%;
  max-width: 100%;
}

.library-body {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.library-grid-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.library-grid-filter .input-clearable,
.library-grid-filter #library-filter {
  flex: 0 1 var(--library-filter-max-width);
  width: min(100%, var(--library-filter-max-width));
  max-width: var(--library-filter-max-width);
  height: calc(var(--topbar-btn-size) - 0.5rem);
}

.library-grid,
.library-grid-empty {
  grid-row: 1;
  grid-column: 1;
}

.library-grid {
  padding: var(--padding);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--gap);
  overflow-y: auto;
  align-content: start;
}

.library-grid-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding);
}

.library-grid-card {
  position: relative;
  display: block;
  cursor: pointer;
  border: none;
  padding: 0;
}

.library-grid-card:hover {
  transform: translateY(-0.125rem);
}

.library-grid-cover {
  width: 100%;
  aspect-ratio: 6 / 9;
  display: grid;
  place-items: center;
  padding: var(--padding);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.library-grid-cover-title {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  width: 100%;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.library-grid-cover-author {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: stretch;
  width: 100%;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.library-grid-delete {
  position: absolute;
  top: var(--gap-sm);
  right: var(--gap-sm);
  width: var(--btn-size-sm);
  height: var(--btn-size-sm);
  border-radius: 50%;
  opacity: 0;
}

.library-grid-card:hover .library-grid-delete,
.library-grid-card:focus-within .library-grid-delete {
  opacity: 1;
}

.library-settings-toolbar-start {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.library-settings-toolbar-end {
  flex: 0 0 auto;
  gap: 0.25rem;
}

.library-settings-body {
  grid-row: 2;
  padding: var(--padding);
  overflow-y: auto;
}

#library-settings.is-overlay {
  left: auto !important;
  right: 0 !important;
  width: var(--library-settings-width) !important;
  border-left: 1px solid var(--border-color);
  box-shadow: var(--overlay-shadow-start);
}

.library-settings-section {
  margin-bottom: var(--gap);
}

.library-settings-section:last-child {
  margin-bottom: 0;
}

.library-settings-heading {
  margin-bottom: var(--padding);
}

.library-settings-label {
  display: block;
  margin-bottom: var(--gap);
}

.library-settings-input,
.library-settings-section select {
  width: 100%;
  max-width: none;
  height: 2.375rem;
  margin-bottom: var(--padding);
}

.library-settings-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--gap);
  font-size: var(--font-size-md);
  cursor: pointer;
}

.library-settings-check input {
  width: auto;
  height: auto;
  max-width: none;
  margin: 0;
}

.library-settings-hint code {
  padding: 0.0625rem 0.25rem;
  border-radius: var(--radius);
}

.library-settings-collapsible {
  margin-top: var(--gap);
}

.library-settings-collapsible-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--gap);
}

.library-settings-collapsible-summary::before {
  content: '';
  flex-shrink: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  transform: rotate(-45deg);
  transition: transform var(--duration-fast) ease;
}

.library-settings-collapsible[open] .library-settings-collapsible-summary::before {
  transform: rotate(45deg);
}

.library-settings-collapsible-summary::-webkit-details-marker {
  display: none;
}

.library-settings-collapsible-body {
  margin-top: var(--gap);
}

.library-settings-action {
  margin-bottom: var(--gap);
}

.library-settings-action:last-child {
  margin-bottom: 0;
}

.library-settings-hidden-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.library-settings-hidden-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.library-settings-restore-btn {
  width: auto;
  min-width: 5.5rem;
  height: 2rem;
  padding: 0 var(--padding);
}

.library-settings-footer {
  margin-top: var(--gap);
  padding-top: var(--padding);
}

.library-settings-footer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  flex-wrap: wrap;
}

.library-settings-repo {
  word-break: break-all;
  min-width: 0;
}

.library-settings-build {
  flex-shrink: 0;
}

.library-settings-footer-update {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.library-settings-footer-meta {
  justify-content: center;
  gap: var(--gap);
}

.library-settings-update-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  flex-shrink: 0;
  min-width: 0;
}

.library-settings-update-action {
  height: 2.5rem;
}

.reader {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.reader-layout {
  display: grid !important;
  grid-row: 2;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.reader-toc,
.reader-main,
.reader-context,
.reader-notes {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100% !important;
  min-height: 0;
  min-width: 0;
  width: 100% !important;
}

.reader-notes {
  border-right: none;
}

.reader-toc-body,
.reader-notes-body {
  grid-row: 2;
  min-height: 0;
}

.reader-toc-toolbar,
.reader-main-toolbar,
.reader-context-toolbar,
.reader-notes-toolbar,
.library-settings-toolbar {
  padding-inline: var(--panel-inset);
  box-sizing: border-box;
}

.reader-toc-body {
  padding-block: var(--padding);
  padding-inline: var(--panel-inset);
  overflow-y: auto;
}

#reader-toc:not(.is-overlay) .reader-toc-body {
  border-right: 1px solid var(--border-color);
}

.reader-notes-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

#reader-notes:not(.is-overlay) .reader-notes-body {
  border-left: 1px solid var(--border-color);
}

.reader-notes-toolbar {
  padding-block: 0;
  align-items: center;
}

.reader-notes-compose-region {
  flex-shrink: 0;
  padding: var(--gap) var(--panel-inset) var(--panel-inset);
  border-bottom: 1px solid var(--border-color);
}

.reader-notes-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--padding) var(--panel-inset) var(--panel-inset);
}

.reader-main-body {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}

#main-text-viewport {
  flex: 1 1 auto;
  min-height: 100%;
  padding: var(--padding) var(--reader-prose-padding);
  box-sizing: border-box;
}

.reader-context-body {
  grid-row: 2;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative;
}

#reader-context:not(.is-overlay) .reader-context-body {
  border-left: 1px solid var(--border-color);
}

#reader-toc.is-overlay {
  left: 0 !important;
  width: var(--toc-width) !important;
  border-right: 1px solid var(--border-color);
  box-shadow: var(--overlay-shadow-end);
}

#reader-notes.is-overlay {
  right: 0 !important;
  width: var(--notes-width) !important;
  border-left: 1px solid var(--border-color);
  box-shadow: var(--overlay-shadow-start);
}

#reader-context.is-overlay {
  right: 0 !important;
  width: min(100%, 28.75rem) !important;
  border-left: 1px solid var(--border-color);
  box-shadow: var(--overlay-shadow-start);
}

#context-toggle-btn {
  display: none;
}

#context-viewport {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.context-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.context-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  max-width: 14rem;
  padding: var(--padding);
}

.context-loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 0.1875rem solid var(--border-color);
  border-top-color: var(--text-primary);
  border-radius: var(--radius-round);
  animation: context-loading-spin 0.6s linear infinite;
}

@keyframes context-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.context-loading-status {
  margin: 0;
}

.context-loading-elapsed {
  margin: 0;
}

.reader-toc-filter {
  display: flex;
  align-items: center;
  padding: 0;
  flex: 1;
}

.reader-toc-filter input,
.reader-notes-filter input,
.reader-main-search-field input {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.reader-toc-filter .input-clearable,
.reader-notes-filter .input-clearable {
  flex: 1 1 auto;
}

.reader-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reader-toc-item {
  display: block;
  padding: 0.375rem var(--padding);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}

.reader-toc-item--h2 {
  font-weight: 600;
}

.reader-toc-branch {
  margin: 0;
}

.reader-toc-branch-head {
  display: flex;
  align-items: flex-start;
  gap: 0.125rem;
}

.reader-toc-expand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  opacity: 0.72;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.reader-toc-expand:hover {
  opacity: 1;
}

.reader-toc-expand.is-expanded {
  transform: rotate(180deg);
}

.reader-toc-branch-head .reader-toc-item--h2 {
  flex: 1 1 auto;
  min-width: 0;
}

.reader-toc-children {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.625rem;
}

.reader-toc-item--h3 {
  font-size: 0.96875em;
}

.reader-toc-item--h4 {
  font-size: 0.9em;
  padding-left: 0.75rem;
}

.reader-main-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  gap: var(--gap);
}

.reader-main-search-field {
  flex: 0 0 auto;
  width: var(--reader-main-search-width);
  max-width: var(--reader-main-search-width);
  min-width: 0;
}

#reader-search-input {
  width: 100%;
  height: 2.375rem;
  padding: 0 var(--padding);
  min-width: 0;
  max-width: 100%;
}

.reader-main-search-nav {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
}

.reader-main-search-meta {
  display: none;
  align-items: center;
  gap: var(--gap);
  flex-shrink: 0;
}

.reader-main-search-meta.is-visible {
  display: flex;
  margin-left: var(--gap);
}

.reader-main-toolbar-end {
  padding-left: var(--padding);
}

.reader-main-search-counter {
  padding: 0 var(--gap);
  user-select: none;
}

mark.reader-search-hit {
  padding: 0.05em 0.1em;
  margin: 0;
  border: 0;
  border-radius: 0.125rem;
}

mark.reader-search-hit.is-current {
  outline-offset: -0.0625rem;
}

.reader-content {
  max-width: var(--reader-prose-max-width);
  margin-inline: auto;
  width: 100%;
}

.reader-content h3,
.reader-content h4,
.reader-content h5,
.reader-content .md-block,
.reader-content details {
  content-visibility: auto;
  contain-intrinsic-size: auto 30rem;
}

.reader-content h1 {
  margin-bottom: var(--padding);
  padding-bottom: var(--gap);
}

.reader-content h2 {
  margin-top: 2.25rem;
  margin-bottom: var(--padding);
  scroll-margin-top: 1.25rem;
}

.reader-content p {
  margin-bottom: var(--padding);
  hyphens: auto;
}

.reader-content h3 {
  margin-top: 1.75rem;
  margin-bottom: var(--padding);
  scroll-margin-top: 1.25rem;
}

.reader-content h4 {
  margin-top: 1.5rem;
  margin-bottom: var(--padding);
  scroll-margin-top: 1.25rem;
}

.reader-content h5,
.reader-content h6 {
  margin-top: 1.25rem;
  margin-bottom: var(--padding);
  scroll-margin-top: 1.25rem;
}

.reader-content a {
  text-underline-offset: 0.12em;
}

.md-part-break {
  border: none;
  margin: 2rem 0;
}

.md-block {
  margin: var(--padding) 0;
  padding: var(--padding) var(--padding);
  border-left: 0.25rem solid var(--border-color);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.md-block--center,
.md-block--box {
  border-left-width: 0;
  border-radius: var(--radius);
}

.md-block--expand {
  padding: 0;
  border-left-width: 0;
  border-radius: var(--radius);
}

.md-block--expand>summary {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--padding) var(--padding);
  cursor: pointer;
  list-style: none;
}

.md-block-expand-icon {
  flex: 0 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) ease;
  transform: rotate(-90deg);
}

.md-block--expand[open]>summary .md-block-expand-icon {
  transform: rotate(0deg);
}

.md-block-expand-label {
  flex: 1 1 auto;
  min-width: 0;
}

.md-block--expand>summary::-webkit-details-marker {
  display: none;
}

.md-block-body> :last-child {
  margin-bottom: 0;
}

.md-block-list,
.reader-content ol.md-list {
  margin: 0 0 var(--padding);
  padding-left: 1.5rem;
}

.reader-content ol.md-list--alpha {
  list-style-type: lower-alpha;
}

.reader-content img.md-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--padding) auto;
}

.md-footnotes {
  margin-top: 2rem;
  padding-top: var(--padding);
}

.md-footnotes ol {
  margin: 0;
  padding-left: 1.25rem;
}

.reader-notes-filter {
  display: flex;
  align-items: center;
  align-self: stretch;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

#notes-filter-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: calc(var(--topbar-btn-size) - 0.5rem);
  margin: 0;
}

.reader-notes-annotation {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: var(--padding);
}

.reader-notes-meta {
  margin: var(--gap) 0;
}

.reader-notes-hint {
  margin: 0 0 var(--padding);
}

.reader-notes-quote-preview {
  margin: 0 0 var(--padding);
  padding: var(--padding);
}

.reader-notes-quote-preview.is-empty {
  display: none;
}

.reader-notes-empty {
  margin: 0 0 var(--padding);
}

.reader-notes-empty.is-hidden {
  display: none;
}

.reader-notes-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.reader-notes-quote {
  margin: 0 0 var(--padding);
  padding: 0;
  border: none;
}

.reader-notes-body-text {
  margin: 0 0 var(--padding);
}

.reader-notes-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap);
}

.reader-notes-card-actions .icon-btn,
.reader-notes-compose-actions .icon-btn {
  width: var(--btn-size-sm);
  height: var(--btn-size-sm);
  --icon-btn-glyph-size: var(--icon-btn-glyph-size-sm);
}

.reader-notes-compose-actions .icon-btn:disabled {
  opacity: 1;
}

.reader-main-search-nav,
.library-grid-delete,
#reader-main-toolbar .icon-btn {
  --icon-btn-glyph-size: var(--icon-btn-glyph-size-sm);
}

.reader-notes-reply {
  margin-top: var(--padding);
  padding-left: var(--padding);
}

.reader-notes-compose {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.reader-notes-compose-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap);
  margin-top: var(--gap-sm);
}

.reader-notes-body textarea {
  width: 100%;
  min-width: 0;
  min-height: 5.5rem;
  padding: var(--padding);
  margin-bottom: var(--padding);
  max-width: 100%;
  box-sizing: border-box;
  resize: vertical;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  field-sizing: content;
}

.reader-notes-body textarea::placeholder {
  overflow-wrap: anywhere;
}

.reader-notes-body textarea:focus {
  outline: none;
}

.btn-secondary {
  height: 2.75rem;
  padding: 0 var(--padding);
  cursor: pointer;
}

.btn-secondary:disabled,
.btn-wide:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.btn-text {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

@media (min-width: 96rem) {
  .reader-layout {
    grid-template-columns: var(--toc-width) minmax(0, 1fr) minmax(0, 1fr) minmax(0, var(--notes-width));
  }

  #toc-toggle-btn,
  #notes-toggle-btn {
    display: none !important;
  }
}

@media (max-width: 95.9375rem) and (min-width: 75.0625rem) {
  .reader-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, var(--notes-width));
  }

  #reader-toc:not(.is-overlay) {
    display: none !important;
  }

  #notes-toggle-btn {
    display: none !important;
  }
}

@media (max-width: 75rem) {
  .reader.has-reader-overlay .is-overlay {
    z-index: var(--z-overlay);
  }

  #reader-toc.is-overlay {
    left: 0 !important;
    right: auto !important;
    width: min(var(--toc-width), calc(100% - 4.5rem)) !important;
    max-width: calc(100% - 4.5rem);
  }

  #reader-notes.is-overlay {
    left: auto !important;
    right: 0 !important;
    width: min(var(--notes-width), calc(100% - 4.5rem)) !important;
    max-width: calc(100% - 4.5rem);
  }

  #library-settings.is-overlay {
    left: auto !important;
    right: 0 !important;
    width: min(var(--library-settings-width), calc(100% - 4.5rem)) !important;
    max-width: calc(100% - 4.5rem);
  }
}

@media (max-width: 75rem) and (min-width: 48.0625rem) {
  .reader-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  #reader-toc:not(.is-overlay),
  #reader-notes:not(.is-overlay) {
    display: none !important;
  }

  #reader-main-toolbar {
    min-width: 0;
  }

  .reader-main-search-field {
    flex: 1 1 auto;
    width: auto;
    max-width: var(--reader-main-search-width);
  }

  .reader-main-body,
  #main-text-viewport {
    min-width: 0;
  }

  .reader-content {
    max-width: 100%;
  }
}

@media (max-width: 48rem) {
  .reader {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .reader-topbar-start,
  .reader-topbar-end {
    flex: 0 0 auto;
  }

  .reader-topbar-center {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 var(--gap);
  }

  .reader-topbar-title {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  #reader-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-bar) + 1);
    transform: translate3d(0, 0, 0);
    transition: transform var(--duration-chrome) var(--ease-chrome-out);
    will-change: transform;
  }

  .reader.is-topbar-hidden #reader-topbar {
    transform: translate3d(0, -100%, 0);
    pointer-events: none;
    transition-timing-function: var(--ease-chrome-in);
  }

  #reader-main-toolbar {
    position: sticky;
    top: 0;
    z-index: var(--z-bar);
  }

  .reader-layout {
    flex: 1;
    min-height: 0;
    padding-top: var(--topbar-height);
    transition: padding-top var(--duration-chrome) var(--ease-chrome-out);
    grid-template-columns: 1fr;
  }

  .reader.is-topbar-hidden .reader-layout {
    padding-top: 0;
    transition-timing-function: var(--ease-chrome-in);
  }

  #reader-toc:not(.is-overlay),
  #reader-notes:not(.is-overlay),
  #reader-context:not(.is-overlay) {
    display: none !important;
  }

  #context-toggle-btn {
    display: inline-flex !important;
  }

  .reader.has-reader-overlay #reader-topbar {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  #reader-context.is-overlay {
    left: auto !important;
    right: 0 !important;
    width: min(var(--notes-width), calc(100% - 4.5rem)) !important;
    max-width: calc(100% - 4.5rem);
  }
}

@media (max-width: 48rem) {
  .library-grid-card:nth-child(n + 5) {
    content-visibility: auto;
    contain-intrinsic-size: auto 11.875rem;
  }
}

@media (max-width: 32rem) and (orientation: portrait) {
  :root {
    --topbar-height: 3rem;
    --btn-size: 2.75rem;
    --btn-size-sm: 2rem;
    --padding: 1rem;
    --gap: 0.875rem;
  }

  .view,
  .reader {
    height: 100dvh;
    height: 100vh;
  }

  .app {
    width: 100%;
    max-width: 100%;
  }

  .topbar,
  .toolbar {
    padding: 0;
  }

  .library-topbar-center,
  .reader-topbar-center {
    min-width: 0;
  }

  .library-topbar-secondary {
    padding: 0 var(--topbar-inset);
  }

  .library-grid-filter {
    justify-content: stretch;
  }

  #library-filter {
    flex: 1;
    width: auto;
    max-width: none;
  }

  .library-grid {
    padding: var(--padding);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
  }

  .library-grid-delete {
    opacity: 1;
    top: var(--gap);
    right: var(--gap);
  }

  .library-settings-body {
    padding: var(--padding);
  }

  .library-settings-hidden-item {
    flex-direction: column;
    align-items: stretch;
  }

  .library-settings-restore-btn {
    width: 100%;
  }

  #reader-main-toolbar {
    flex-wrap: nowrap;
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    padding: 0 var(--padding);
    gap: 0;
  }

  .reader-main-toolbar-start {
    flex: 1 1 auto;
    min-width: 0;
  }

  .reader-main-toolbar-end {
    flex: 0 0 auto;
    min-width: 0;
  }

  .reader-main-search {
    flex: 1 1 auto;
    min-width: 0;
  }

  .reader-main-search-field {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  #reader-search-input {
    height: 2.25rem;
    padding: 0 var(--padding);
  }

  .reader-main-search-meta.is-visible {
    flex-shrink: 0;
  }

  .reader-main-search-counter {
    padding: 0 var(--gap);
  }

  .reader-main-search-nav {
    width: var(--btn-size-sm);
    height: var(--btn-size-sm);
  }

  #reader-main-toolbar .icon-btn {
    width: var(--btn-size-sm);
    height: var(--btn-size-sm);
  }

  .reader-toc-filter {
    padding: 0 var(--toc-inset-inline);
    min-width: 0;
  }

  .reader-notes-filter {
    padding: 0;
    min-width: 0;
  }

  #toc-filter-input {
    max-width: none;
    flex: 1;
    min-width: 0;
  }

  #notes-filter-input {
    max-width: none;
  }

  .reader-toc-body {
    padding-block: var(--padding);
    padding-inline: var(--toc-inset-inline);
    -webkit-overflow-scrolling: touch;
  }

  .reader-notes-scroll {
    padding: var(--padding);
    -webkit-overflow-scrolling: touch;
  }

  .reader-notes-compose-region {
    padding: var(--padding);
  }

  #main-text-viewport {
    padding: var(--padding) var(--reader-prose-padding);
  }

  .reader-content h1 {
    margin-bottom: var(--padding);
  }

  .reader-content h2 {
    margin-top: 1.75rem;
  }

}

.reader #read-settings-btn {
  display: none !important;
}

.portrait-alert {
  position: fixed;
  inset: var(--page-frame);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  background-color: hsla(0, 0%, 0%, 0.9);
}

.portrait-content {
  background: transparent;
  color: #fff;
  padding: 2rem;
  border-radius: 16px;
  text-align: center;
  max-width: 280px;
}

.device-animation {
  margin-bottom: 1.5rem;
  animation: rotateDevice 4s infinite ease-in-out;
}

.device {
  width: 240px;
  height: 240px;
}

@keyframes rotateDevice {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-90deg);
  }
}

button.dismissable {
  margin: 40px 0;
  padding: 20px;
  background: transparent;
  color: white;
  border: 1px solid white;
}

#context-loading-status,
.context-loading-text,
#context-search-meta,
.reader-search-meta {
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0;
}

.icon-btn .icon-glyph-filled {
  background: none;
}

/* Icons — inline SVG files via <img>. */
.icon {
  display: block;
  flex-shrink: 0;
}

.icon-btn-glyph {
  width: 24px;
  height: 24px;
}

.icon-btn .icon,
.icon-btn-glyph {
  width: var(--icon-btn-glyph-size, 1.5rem);
  height: var(--icon-btn-glyph-size, 1.5rem);
}

.icon--sm {
  width: 1rem;
  height: 1rem;
}

.icon--md {
  width: 1.5rem;
  height: 1.5rem;
}

.icon--lg {
  width: 2.25rem;
  height: 2.25rem;
}

.topbar .icon-btn .icon,
.topbar .icon-btn-glyph,
.topbar .icon-brand-logo {
  width: var(--topbar-icon-size, 1.5rem);
  height: var(--topbar-icon-size, 1.5rem);
}

.icon-brand-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--topbar-icon-size, 1.5rem);
  height: var(--topbar-icon-size, 1.5rem);
  flex-shrink: 0;
}

.icon-brand-logo {
  width: 1.75rem;
  height: 1.75rem;
}

.md-block-expand-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.context-placeholder-icon,
.context-offline-icon {
  width: 3rem;
  height: 3rem;
}

.portrait-content .icon.device {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
}

/* Notes compose slide-up hide - clean, no !important */
.reader-notes.is-compose-hidden .reader-notes-compose-region {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.reader-notes-compose-region {
  transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1), 
              opacity 0.45s ease;
  background: inherit;
}

/* Ensure panel background stays solid */
.reader-notes-body,
.reader-notes-scroll,
.reader-notes .reader-notes-body {
  background: var(--bg-chrome);
}

.update-badge {
  display: none;
}