:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 2px;
}

.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: 100%;
  color: var(--ui-text);
  background: var(--ui-bg);
  border-bottom: 1px solid #000;
  font: 500 .875rem/1.3 var(--reader-font-ui);
}

.toolbar-inner {
  width: min(calc(100% - 2rem), 1040px);
  min-width: 0;
  margin-inline: auto;
  padding: .55rem 0 .65rem;
}

.toolbar-head,
.toolbar-actions,
.toolbar-controls,
.control,
.check-control,
.view-switch,
.timeline-meta {
  display: flex;
  min-width: 0;
  align-items: center;
}

.toolbar-head { justify-content: space-between; gap: .65rem; }
.toolbar-title { flex: 0 1 auto; overflow-wrap: anywhere; }
.toolbar-actions { flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.toolbar-controls { flex-wrap: wrap; gap: .55rem; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid var(--ui-border); }
.toolbar-controls[data-collapsed="true"] { display: none; }
.panel-actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.control { flex: 1 1 13rem; gap: .4rem; }
.control span { flex: 0 0 auto; }
.control select { flex: 1 1 auto; min-width: 0; padding: .38rem .5rem; }
.check-control { flex: 0 1 auto; gap: .4rem; }

.source-filter {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.source-filter legend {
  margin-bottom: .35rem;
  color: var(--ui-muted);
  font-size: .76rem;
  font-weight: 700;
}

.source-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  min-width: 0;
}

.source-toggle {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 2.5rem;
  align-items: center;
  cursor: pointer;
}

.source-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.source-toggle span {
  display: inline-flex;
  min-width: 0;
  min-height: 2.5rem;
  align-items: center;
  gap: .35rem;
  padding: .42rem .65rem;
  overflow-wrap: anywhere;
  color: var(--ui-muted);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
}

.source-toggle small { font-size: .7em; font-variant-numeric: tabular-nums; }
.source-toggle input:checked + span { color: #111; background: var(--ui-accent); border-color: var(--ui-accent); font-weight: 700; }
.source-toggle input:focus-visible + span { outline: 3px solid var(--ui-focus); outline-offset: 2px; }

.toolbar button,
.toolbar select {
  min-height: 2.5rem;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: 4px;
}

.toolbar button { padding: .35rem .65rem; cursor: pointer; }
.toolbar select { padding-inline: .45rem; }
.toolbar button[aria-pressed="true"] { color: #111; background: var(--ui-accent); border-color: var(--ui-accent); font-weight: 700; }
.view-switch { gap: .2rem; }
.filter-toggle { display: inline-flex; align-items: center; }
.visible-count { margin-left: auto; white-space: nowrap; color: var(--ui-muted); }

.timeline-navigator {
  min-width: 0;
  margin-top: .35rem;
  padding-top: .45rem;
  border-top: 1px solid var(--ui-border);
}

.timeline-meta { justify-content: space-between; gap: .5rem; color: var(--ui-muted); font-size: .76rem; }
.timeline-readout { color: var(--ui-text); font-weight: 700; text-transform: capitalize; }
.timeline-track { position: relative; width: 100%; min-width: 0; height: 2.2rem; margin-top: .15rem; }
.timeline-density {
  position: absolute;
  inset: .45rem 0 .65rem;
  display: grid;
  align-items: end;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
}
.timeline-density span { display: block; min-width: 0; background: rgba(155, 201, 239, .42); }
.timeline-range {
  position: absolute;
  inset: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  cursor: ew-resize;
  background: transparent;
}
.timeline-years { position: relative; height: .9rem; overflow: hidden; color: var(--ui-muted); font-size: .65rem; }
.timeline-years span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.timeline-years span.first { transform: none; }
.timeline-years span.last { transform: translateX(-100%); }

.reader-settings {
  width: min(calc(100% - 2rem), 430px);
  max-width: 430px;
  max-height: min(88vh, 760px);
  margin: auto;
  padding: 0;
  color: var(--reader-text);
  background: var(--reader-surface);
  border: 1px solid var(--reader-border);
  border-radius: 12px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .35);
  font: 500 .92rem/1.4 var(--reader-font-ui);
  overflow: hidden;
}

.reader-settings::backdrop { background: rgba(0, 0, 0, .56); }
.settings-shell { width: 100%; max-width: 100%; max-height: min(88vh, 760px); overflow-y: auto; overscroll-behavior: contain; }
.settings-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  color: var(--reader-text);
  background: var(--reader-surface);
  border-bottom: 1px solid var(--reader-border);
}
.settings-header h2 { margin: 0; font-size: 1.1rem; }
.settings-close { min-width: 2.3rem; min-height: 2.3rem; cursor: pointer; border: 1px solid var(--reader-border); border-radius: 999px; color: var(--reader-text); background: var(--reader-debug-bg); }
.settings-content { padding: 1rem; }
.settings-group { min-width: 0; margin: 0 0 1.2rem; padding: 0; border: 0; }
.settings-group legend,
.settings-label { display: block; margin-bottom: .55rem; color: var(--reader-muted); font-weight: 700; }
.size-stepper { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; align-items: center; }
.size-stepper button { min-height: 2.8rem; cursor: pointer; color: var(--reader-text); background: var(--reader-debug-bg); border: 1px solid var(--reader-border); border-radius: 7px; font-weight: 700; }
.size-output { min-width: 3.7rem; text-align: center; font-variant-numeric: tabular-nums; }
.segmented,
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented label,
.theme-option {
  min-width: 0;
  padding: .58rem .45rem;
  color: var(--reader-text);
  background: var(--reader-debug-bg);
  border: 1px solid var(--reader-border);
  border-radius: 7px;
  text-align: center;
}
.segmented label { cursor: pointer; }
.segmented label:has(input:checked),
.theme-option[aria-pressed="true"] { border-color: var(--reader-link); box-shadow: inset 0 0 0 1px var(--reader-link); font-weight: 700; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option { cursor: pointer; overflow-wrap: anywhere; }
.settings-note { margin: .45rem 0 0; color: var(--reader-muted); font-size: .78rem; }
.advanced-settings { margin: .3rem 0 1.2rem; border-top: 1px solid var(--reader-border); border-bottom: 1px solid var(--reader-border); }
.advanced-settings summary { padding: .85rem 0; cursor: pointer; font-weight: 700; }
.advanced-grid { display: grid; gap: .85rem; padding-bottom: 1rem; }
.advanced-grid label { display: grid; gap: .35rem; min-width: 0; }
.advanced-grid select,
.advanced-grid input[type="range"] { width: 100%; min-width: 0; }
.advanced-grid select { min-height: 2.5rem; padding: .35rem .5rem; color: var(--reader-text); background: var(--reader-surface); border: 1px solid var(--reader-border); border-radius: 6px; }
.reset-settings { width: 100%; min-height: 2.7rem; cursor: pointer; color: var(--reader-text); background: transparent; border: 1px solid var(--reader-border); border-radius: 7px; }

@media (max-width: 700px) {
  .toolbar-inner { width: calc(100% - 1rem); padding-block: .4rem .5rem; }
  .toolbar-controls { align-items: stretch; }
  .toolbar button { min-height: 2.75rem; padding: .5rem .7rem; }
  .panel-actions > button,
  .panel-actions .view-switch { flex: 1 1 auto; }
  .source-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-toggle,
  .source-toggle span { width: 100%; min-height: 2.75rem; }
  .source-toggle span { justify-content: space-between; border-radius: 7px; }
  .check-control { flex: 1 1 auto; }
  .visible-count { margin-left: 0; align-self: center; }
  .timeline-years { font-size: .62rem; }
  .reader-settings { width: 100%; max-width: 100%; max-height: 90vh; margin: auto 0 0; border-radius: 14px 14px 0 0; }
  .settings-shell { max-height: 90vh; }
}

@media (max-width: 430px) {
  .toolbar-head { align-items: stretch; }
  .toolbar-title { display: none; }
  .toolbar-actions { flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolbar-actions button { width: 100%; min-width: 0; white-space: normal; }
  .panel-actions .view-switch { flex: 1 1 100%; }
  .view-switch button { flex: 1 1 0; }
  .timeline-meta .timeline-endpoints { display: none; }
}

@media (max-width: 360px) {
  .toolbar-title { white-space: normal; }
  .toolbar-inner { width: calc(100% - .75rem); }
  .toolbar-actions { gap: .25rem; }
  .toolbar button { padding-inline: .48rem; }
  .theme-grid { grid-template-columns: 1fr; }
}