/*
 * Reader primitive styles — polymorphic long-form reading.
 * Scoped under .jny-reader. Theme modifiers on the root.
 */

.jny-reader {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  font-family: inherit;
  color: var(--reader-fg, #1a1a1a);
  background: var(--reader-bg, #fafaf0);
}

.jny-reader--theme-light  { --reader-bg: #fafaf0; --reader-fg: #1a1a1a; --reader-toolbar-bg: #eceae0; --reader-toolbar-fg: #333; --reader-accent: #4a6820; }
.jny-reader--theme-sepia  { --reader-bg: #f4ecd8; --reader-fg: #3b2e1f; --reader-toolbar-bg: #e8dfc6; --reader-toolbar-fg: #4a3a24; --reader-accent: #8a5a1c; }
.jny-reader--theme-dark   { --reader-bg: #1a1f2e; --reader-fg: #e4e4e4; --reader-toolbar-bg: #121625; --reader-toolbar-fg: #c6c6c6; --reader-accent: #8fb6ff; }

.jny-reader__toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--reader-toolbar-bg);
  color: var(--reader-toolbar-fg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}

.jny-reader__btn {
  background: transparent;
  color: var(--reader-toolbar-fg);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms;
}
.jny-reader__btn:hover { background: rgba(0, 0, 0, 0.06); }
.jny-reader__btn.is-active { background: var(--reader-accent); color: #fff; border-color: var(--reader-accent); }

.jny-reader__progress {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
}

.jny-reader__scrollport {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.jny-reader__content {
  max-width: 68ch;
  margin: 0 auto;
  padding: 24px 20px 40vh 20px;
}

.jny-reader__content h1,
.jny-reader__content h2,
.jny-reader__content h3,
.jny-reader__content h4 {
  line-height: 1.25;
  margin: 1.4em 0 0.5em;
  font-weight: 700;
}
.jny-reader__content h1 { font-size: 1.6em; }
.jny-reader__content h2 { font-size: 1.35em; }
.jny-reader__content h3 { font-size: 1.15em; }

.jny-reader__content p  { margin: 0 0 1em; }
.jny-reader__content ul { margin: 0 0 1em 1.4em; padding: 0; }
.jny-reader__content li { margin: 0.25em 0; }

.jny-reader__content a {
  color: var(--reader-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.jny-reader__content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
}
.jny-reader--theme-dark .jny-reader__content code { background: rgba(255, 255, 255, 0.08); }

.jny-reader__content pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px 14px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0 0 1em;
}
.jny-reader--theme-dark .jny-reader__content pre { background: rgba(255, 255, 255, 0.06); }

.jny-reader__content pre code { background: transparent; padding: 0; }

.jny-reader__plain {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: inherit;
}

::selection { background: color-mix(in srgb, var(--reader-accent) 35%, transparent); }