/*
 * Reader V2: mobile-first typography, visual hierarchy and readable
 * original-note components. Applied after the legacy shell stylesheet.
 * No remote fonts, external images, trackers or user notes are loaded.
 */
:root {
  --reader-primary: #176d68;
  --reader-ink: #253e3e;
  --reader-muted: #617b77;
  --reader-line: #dfe9e5;
  --reader-paper: #ffffff;
}

body { background: #f3f6f4; color: var(--reader-ink); }
.top-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.98);
  box-shadow: 0 2px 12px rgba(20,70,66,.035);
}
.workspace { gap: 20px; }
.browse-panel { padding-top: 5px; }
.detail-panel { background: #f8faf8; }
.detail-panel article { max-width: 980px; margin-inline: auto; }
.detail-title {
  margin: 14px 0 12px;
  font-size: clamp(24px,2.6vw,34px);
  line-height: 1.4;
  letter-spacing: -.5px;
  color: #233d3d;
  overflow-wrap: anywhere;
}
.detail-category-row { color: var(--reader-primary); font-weight: 700; }
.review-status {
  border-left: 3px solid #c7b483;
  padding: 4px 0 4px 10px;
  margin: 8px 0 16px;
  color: #746c57;
  line-height: 1.7;
}
.video-item {
  transition: background .15s ease, border-color .15s ease;
  line-height: 1.55;
}
.video-item:hover, .video-item.is-active {
  border-color: #8bb7ae;
  background: #f2f8f6;
}
.video-item.is-active {
  box-shadow: inset 3px 0 0 var(--reader-primary);
}
.detail-actions { align-items: center; gap: 12px; }
.reading-tools, .font-tools { display: flex; align-items: center; gap: 8px; }
.font-tools {
  border: 1px solid #d3e2dd;
  border-radius: 10px;
  background: #fff;
  padding: 3px;
}
.font-tools button {
  width: 42px;
  height: 36px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--reader-primary);
  font-weight: 800;
  font-size: 14px;
}
.font-tools button:hover:not(:disabled) { background: #e8f2ef; }
.font-tools button:disabled { opacity: .35; cursor: not-allowed; }

.summary-card, .reading-block, .more-details {
  border: 1px solid var(--reader-line);
  box-shadow: 0 4px 16px rgba(26,66,61,.028);
  border-radius: 18px;
  padding: 24px 26px;
}
.summary-card { margin: 18px 0 14px; }
.summary-card h3 { margin: 12px 0 10px; font-size: 20px; color: #264643; }
.summary-card p {
  font-size: 16px;
  line-height: 1.9;
  color: #425f5b;
  margin: 0;
  overflow-wrap: anywhere;
}
.reading-block { margin: 14px 0; }
.content-heading { align-items: start; margin-bottom: 17px; }
.content-heading h3 { font-size: 19px; line-height: 1.4; color: #264945; }
.content-subtitle {
  font-size: 12px;
  font-weight: 400;
  margin: 5px 0 0;
  line-height: 1.7;
  color: var(--reader-muted);
}
.section-index {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  padding: 0 7px;
  color: #267970;
  font-size: 12px;
  border-radius: 9px;
  background: #eaf3f0;
}

.reader-jump-nav {
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 72px;
  z-index: 11;
  padding: 10px 14px;
  margin: 14px 0 18px;
  background: rgba(255,255,255,.97);
  border: 1px solid #e0e9e6;
  border-radius: 14px;
  box-shadow: 0 3px 14px rgba(30,75,72,.06);
}
.reader-jump-label {
  flex: 0 0 auto;
  color: var(--reader-muted);
  font-size: 12px;
  font-weight: 800;
}
.reader-jump-scroll {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
}
.reader-jump-scroll button {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #f3f7f5;
  color: #3b6b65;
  padding: 10px 12px;
  white-space: nowrap;
}
.reader-jump-scroll button:hover,
.reader-jump-scroll button:focus-visible {
  background: #e8f2ef;
  color: #176861;
  border-color: #acd0c5;
}
#quoteSection,#coreSection,#actionSection,#reflectionSection,
#timecodeSection,#cautionSection { scroll-margin-top: 150px; }

/* Replace preformatted raw Markdown with actual readable paragraphs. */
.markdown-body {
  white-space: normal;
  font-size: var(--note-size,17px);
  line-height: 1.86;
  color: #2e4b49;
  overflow-wrap: anywhere;
  max-width: 74ch;
  letter-spacing: .01em;
}
.markdown-body strong { font-weight: 750; color: #254844; }
.markdown-body code {
  background: #eef3f0;
  padding: 2px 5px;
  border-radius: 5px;
  white-space: break-spaces;
  font-size: .87em;
}
.reader-paragraph { margin: 0 0 16px; }
.reader-paragraph:last-child { margin-bottom: 0; }
.reader-subheading { font-size: 1.04em; line-height: 1.6; margin: 14px 0 9px; }
.reader-blockquote { border-left: 3px solid #89b8af; padding-left: 14px; margin: 12px 0; }
.reader-divider { border: 0; border-top: 1px solid var(--reader-line); margin: 18px 0; }
.reader-callout {
  border-left: 3px solid #8cb8aa;
  border-radius: 0 10px 10px 0;
  padding: 12px 15px;
  margin: 0 0 18px;
  background: #f3f8f6;
  color: #425e57;
  font-size: .85em;
  line-height: 1.75;
}
.reader-callout-title {
  display: block;
  font-size: .88em;
  letter-spacing: .03em;
  margin: 0 0 4px;
  color: #317268;
}
.reader-callout p { margin: 0; }
.reader-callout--warning,
.reader-callout--caution,
.reader-callout--danger { background: #fbf7ef; border-left-color: #c9a05e; }
.reader-callout--warning .reader-callout-title,
.reader-callout--caution .reader-callout-title,
.reader-callout--danger .reader-callout-title { color: #956936; }
.reader-callout--note { background: #f4f5f7; border-left-color: #9caab3; }
.reader-callout--note .reader-callout-title { color: #62737d; }

.reader-list {
  margin: 3px 0 14px;
  padding-left: 1.4em;
  display: grid;
  gap: 10px;
}
.reader-list > li { padding-left: 4px; }
.reader-list > li::marker { color: #65a69a; }
.reader-list .reader-nested { margin: 6px 0 2px; gap: 5px; font-size: .95em; }
.reader-list:last-child { margin-bottom: 0; }
.reader-empty-note {
  color: #84928e;
  font-size: .92em;
  font-style: italic;
}
.reader-checkbox { color: #357c73; }
.reader-timeline {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.reader-time-item {
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  gap: 16px;
  align-items: start;
  border-bottom: 1px solid #edf1ef;
  padding: 12px 3px 14px;
}
.reader-time-item:last-child { border-bottom: 0; }
.reader-quote-item {
  padding: 16px 18px;
  border: 1px solid #e0eae6;
  background: #fcfefd;
  border-radius: 12px;
}
.reader-timecode {
  display: inline-flex;
  width: fit-content;
  white-space: nowrap;
  background: #e7f2ee;
  border: 1px solid #cce5dc;
  color: #236d67;
  border-radius: 8px;
  padding: 5px 9px;
  font-size: .78em;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  letter-spacing: .01em;
}
.reader-time-text { min-width: 0; padding-top: 1px; }
.personal-section { background: #fcfdfc; }
.personal-section .section-help,
.more-details .section-help { line-height: 1.8; }
.more-details { margin: 14px 0; }
.more-details summary {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
  color: #285f5b;
  list-style: none;
  touch-action: manipulation;
}
.more-details summary::-webkit-details-marker { display: none; }
.more-details summary::after {
  content: "⌄";
  margin-left: auto;
  font-size: 22px;
  font-weight: 400;
  color: #65968b;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.more-details[open] summary::after { transform: rotate(180deg); }
.more-details summary small {
  font-size: 12px;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
  color: #78928b;
}
.more-details[open] .markdown-body { margin-top: 18px; }
.more-details .section-help { margin-top: 12px; }
.source-footer { padding: 18px 8px 40px; font-size: 13px; line-height: 1.8; }

@media (max-width: 850px) {
  .top-bar { padding: 12px 14px; }
  .detail-panel { padding: 0 !important; background: transparent; }
  .detail-panel article { padding: 0 2px; }
  .detail-actions { padding: 4px 2px 0; }
  .detail-actions .outline-button { min-height: 42px; }
  .font-tools button { width: 41px; height: 36px; }
  .detail-title { font-size: clamp(24px, 5.6vw, 29px); line-height: 1.45; }
  .summary-card, .reading-block, .more-details {
    padding: 19px 17px;
    border-radius: 15px;
  }
  .summary-card p { font-size: 16px; line-height: 1.85; }
  .reader-jump-nav {
    top: 62px;
    padding: 8px 10px;
    margin: 13px 0;
    gap: 8px;
    border-radius: 12px;
  }
  .reader-jump-label { display: none; }
  .reader-jump-scroll button { font-size: 13px; min-height: 40px; }
  .markdown-body { font-size: var(--note-size,17px); line-height: 1.9; }
  .reader-time-item { grid-template-columns: 1fr; gap: 9px; padding: 11px 1px 15px; }
  .reader-quote-item { padding: 13px 14px; }
  .reader-timecode { font-size: .78em; }
  #quoteSection,#coreSection,#actionSection,#reflectionSection,
  #timecodeSection,#cautionSection { scroll-margin-top: 122px; }
  .more-details summary { font-size: 16px; gap: 8px; }
  .more-details summary small { font-size: 11px; }
  .reader-list { gap: 11px; }
}
@media (max-width: 375px) {
  .detail-actions { flex-wrap: wrap; }
  .reading-tools { margin-left: auto; }
  .more-details summary small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-item, .more-details summary::after { transition: none; }
}

/* Reader V2.1: legibility-first on iPhone, including users who had 17px
   saved from V2. All body copy follows A−/A＋ (18–28px, default 22px). */
.video-item strong { font-size: 17px; line-height: 1.5; }
.video-item small { font-size: 13px; }
.video-item p { font-size: 14px; line-height: 1.7; }
.list-head, .filter-head, .filter-grid label { font-size: 14px; }
.reader-jump-scroll button { font-size: 14px; }
.detail-category-row, .review-status, .section-help,
.content-subtitle, .source-footer { font-size: 14px; line-height: 1.75; }
.summary-card h3 { font-size: 22px; }
.summary-card p {
  font-size: clamp(19px, calc(var(--note-size, 22px) - 1px), 27px);
  line-height: 1.8;
}
.content-heading h3 { font-size: 21px; }
.markdown-body {
  font-size: var(--note-size, 22px);
  line-height: 1.82;
}
.reader-callout { font-size: .89em; }
.reader-callout-title { font-size: .92em; }
.reader-timecode { font-size: .82em; }
.more-details summary { font-size: 19px; }
.more-details summary small { font-size: 13px; }
.reading-tools .outline-button, .back-button { font-size: 14px; }
.font-tools button { width: 47px; height: 42px; font-size: 17px; }

/* Full speech transcript is deliberately separate from the chosen quotes.
   It is decrypted only with the original encrypted library and rendered
   lazily in batches of 100 to protect iPhone browser performance. */
.transcript-section .section-help { margin: 13px 0 0; }
.transcript-notice {
  margin: 13px 0 20px;
  padding: 12px 14px;
  border: 1px solid #dbe8e2;
  background: #f3f8f5;
  border-radius: 10px;
  color: #456862;
  font-size: 15px;
  line-height: 1.75;
}
.transcript-toolbar { display: grid; gap: 9px; margin-bottom: 16px; }
.transcript-toolbar label {
  font-size: 15px;
  font-weight: 700;
  color: #315d58;
}
.transcript-toolbar input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #cadbd5;
  border-radius: 11px;
  background: #fff;
  color: #274845;
  font-size: 17px;
}
.transcript-visible-count { color: #567871; font-size: 14px; }
.transcript-timeline {
  max-width: none;
  font-size: var(--note-size, 22px);
  line-height: 1.75;
  margin-top: 15px;
}
.transcript-line { border-color: #e6ece9; padding-top: 13px; padding-bottom: 16px; }
.transcript-line .reader-time-text { overflow-wrap: anywhere; }
.reader-transcript-empty { list-style: none; color: #6b827d; font-size: 16px; }
.transcript-load-more {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  margin-top: 18px;
  border-radius: 12px;
  border: 1px solid #a6c8bd;
  background: #eaf5f1;
  color: #236b62;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.transcript-load-more:hover { background: #d9eee6; }
.transcript-load-more:focus-visible { outline: 3px solid #368b7e; outline-offset: 2px; }
#transcriptSection { scroll-margin-top: 150px; }

@media (max-width: 850px) {
  .detail-title { font-size: clamp(27px,6vw,32px); }
  .summary-card p { font-size: clamp(19px, calc(var(--note-size, 22px) - 1px), 27px); }
  .content-heading h3 { font-size: 21px; }
  .reader-jump-scroll button { font-size: 14px; min-height: 44px; }
  .markdown-body { font-size: var(--note-size,22px); line-height: 1.82; }
  .more-details summary { font-size: 18px; }
  .more-details summary small { font-size: 12px; }
  .transcript-timeline { font-size: var(--note-size,22px); }
  .transcript-line { gap: 10px; }
  #transcriptSection { scroll-margin-top: 122px; }
}

/* Reader V2.2: true 24px first-read default, independent of v2.1 preferences. */
.detail-panel article { --note-size: 24px; }
.summary-card p { font-size: clamp(20px, calc(var(--note-size, 24px) - 1px), 27px); }
.markdown-body,.transcript-timeline { font-size: var(--note-size,24px); }

/* Reanalysis is a user-initiated handoff, not a silent AI or cloud upload. */
.reanalyze-button {
  min-height: 43px;
  padding: 10px 13px;
  background: #196f66;
  border: 1px solid #196f66;
  color: white;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.reanalyze-button:hover { background: #145c54; }
.reanalyze-button:focus-visible,
.reanalyze-dialog button:focus-visible,
.reanalyze-dialog a:focus-visible,
.reanalyze-dialog input:focus-visible,
.reanalyze-dialog textarea:focus-visible {
  outline: 3px solid #388f82;
  outline-offset: 3px;
}
.reanalyze-dialog {
  width: min(610px,94vw);
  max-width: 610px;
  max-height: 86vh;
  max-height: 86dvh;
  margin: auto;
  padding: 0;
  overflow: auto;
  background: white;
  border: 1px solid #d6e2dd;
  border-radius: 20px;
  box-shadow: 0 26px 85px rgba(18,49,44,.23);
  color: #2a4843;
}
.reanalyze-dialog::backdrop { background: rgba(20,39,38,.58); }
.reanalyze-dialog-inner { padding: 26px 28px; }
.reanalyze-dialog-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  justify-content: space-between;
}
.reanalyze-dialog h2 {
  margin: 7px 0 11px;
  font-size: clamp(22px,4.5vw,28px);
  line-height: 1.4;
}
.reanalyze-close {
  width: 42px;
  height: 42px;
  border: 1px solid #d4dfdb;
  border-radius: 10px;
  background: #f4f7f6;
  color: #365951;
  font-size: 19px;
  flex: none;
}
.reanalyze-video-name {
  background: #f1f7f5;
  border-radius: 11px;
  padding: 11px 13px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.reanalyze-modes { border: 0; padding: 0; margin: 17px 0 16px; }
.reanalyze-modes legend,
.reanalyze-label {
  display: block;
  margin-bottom: 9px;
  font-size: 15px;
  font-weight: 800;
  color: #31584f;
}
.reanalyze-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 8px;
  padding: 12px 13px;
  border: 1px solid #dce7e2;
  border-radius: 12px;
  cursor: pointer;
}
.reanalyze-choice:has(input:checked) {
  border-color: #6eafa2;
  background: #f1f8f4;
}
.reanalyze-choice input { accent-color: #19766c; margin-top: 5px; width: 18px; height: 18px; }
.reanalyze-choice span { display: block; flex: 1; }
.reanalyze-choice strong { display: block; font-size: 16px; }
.reanalyze-choice small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: #5f7772;
}
.reanalyze-dialog textarea {
  width: 100%;
  min-height: 78px;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 11px;
  border: 1px solid #c5d9d0;
  resize: vertical;
  font: inherit;
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
}
.reanalyze-transcript-option { display: flex; gap: 11px; margin: 13px 0 7px; align-items: flex-start; font-size: 15px; line-height: 1.6; }
.reanalyze-transcript-option input { margin-top: 5px; accent-color: #19766c; width: 19px; height: 19px; flex: none; }
.reanalyze-transcript-option input:disabled + span { color: #8e9d98; }
.reanalyze-help { margin: 5px 0 15px; color: #607b73; font-size: 13px; line-height: 1.65; }
.reanalyze-safety {
  border-left: 3px solid #ae9a6e;
  background: #faf7f1;
  color: #665d49;
  padding: 11px 12px;
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.7;
}
.reanalyze-actions { display: grid; gap: 9px; margin-top: 16px; }
.reanalyze-share,.reanalyze-copy,.reanalyze-actions a {
  min-height: 48px;
  border-radius: 11px;
  padding: 12px 15px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
.reanalyze-share { border: 1px solid #19766c; background: #19766c; color: #fff; }
.reanalyze-copy { border: 1px solid #b9d3cb; background: #eaf5f0; color: #266a5d; }
.reanalyze-actions a { display: flex; justify-content: center; align-items: center; color: #285f58; border: 1px solid #d5e4df; background: #fff; }
.reanalyze-status { margin: 13px 0 0; color: #2a7268; font-size: 14px; line-height: 1.75; }
.reanalyze-manual-prompt { margin-top: 12px; font-size: 13px !important; }

@media(max-width:850px) {
  .detail-actions { flex-wrap: wrap; }
  .reading-tools {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .reanalyze-button { flex: 1 1 auto; }
  .reanalyze-dialog-inner { padding: 20px 17px 24px; }
  .markdown-body,.transcript-timeline { font-size: var(--note-size,24px); }
  .summary-card p { font-size: clamp(20px, calc(var(--note-size,24px) - 1px), 27px); }
}