/* Learning owns the viewport; secondary navigation returns on the parent page. */
.app-shell.in-reader { display: flex; flex-direction: column; padding-bottom: 0; }
.in-reader > .main-column { flex: 1; min-height: 0; height: auto; overflow: hidden; }
.in-reader .reader-page { flex: 1; min-height: 0; overflow: hidden; }
.in-reader .focus-toolbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  flex: 0 0 56px; min-height: 56px; padding: 6px 16px; gap: 8px;
  border-bottom: 1px solid var(--line); background: var(--canvas);
  position: relative; z-index: 12;
}
.reader-exit { display: inline-flex; align-items: center; justify-self: start; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--green); white-space: nowrap; }
.reader-exit svg { width: 20px; height: 20px; }
.reader-progress { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.reader-tools { display: flex; align-items: center; justify-self: end; gap: 6px; }
.reader-reference { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 10px; border: 1px solid #ceb66e; border-radius: 8px; background: #f3e6ba; color: #6b501c; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.reader-reference svg { width: 17px; height: 17px; }
.reader-reference:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.reader-reference:active { background: #e9d89f; }
[data-theme="night"] .reader-reference { background: #403720; color: #f3d98e; border-color: #8e783e; }
[data-theme="night"] .reader-reference:active { background: #51452a; }
.reader-options { position: relative; justify-self: end; }
.reader-options > summary { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 66px; min-height: 44px; padding: 0 8px; cursor: pointer; list-style: none; color: var(--green); font-size: 13px; }
.reader-options > summary::-webkit-details-marker { display: none; }
.reader-options > summary svg { width: 19px; height: 19px; }
.reader-options > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-radius: 6px; }
.reader-options[open] > summary { background: var(--surface); border-radius: 6px; }
.reader-options-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(280px, calc(100vw - 32px)); max-height: calc(100dvh - 90px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); overflow-y: auto; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px #14251c22; }
.reader-option-section { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; }
.reader-option-section > strong { font-size: 13px; white-space: nowrap; }
.reader-options .order-switch button { min-height: 44px; min-width: 52px; }
.reader-options .sequence-nav { gap: 4px; }
.reader-options .sequence-nav .icon-button { min-width: 44px; min-height: 44px; }
.reader-options .sequence-nav > span { min-width: 52px; font-size: 12px; }
.reader-setting { min-height: 44px; width: 100%; justify-content: flex-start; font-size: 14px; }
.in-reader .reader-scroll { flex: 1; min-height: 0; overflow: auto; padding: 12px clamp(12px, 3vw, 28px) 20px; scrollbar-gutter: auto; }
.in-reader .reader-workspace { max-width: 1100px; }
.in-reader .mark-bar { position: relative; bottom: auto; padding: 8px max(16px, calc((100% - 1100px) / 2)); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); box-shadow: none; }
.in-reader .reading-mode-bar .result-bar-heading,
.in-reader .reading-mode-note,
.in-reader .consolidation-stage .result-bar-heading,
.in-reader .group-result-bar .result-bar-heading,
.in-reader .group-stage-progress p,
.in-reader .consolidation-stage .group-stage-progress,
.in-reader .impression-stage .result-bar-heading > span,
.in-reader .result-bar .undo-last { display: none; }
.in-reader .reading-mode-bar .consolidation-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; width: 100%; max-width: 680px; margin: auto; }
.in-reader .reading-mode-bar .button { width: 100%; min-width: 0; justify-content: center; gap: 10px; white-space: nowrap; }
.in-reader .reading-mode-bar .reading-previous { border: 1px solid var(--green); color: var(--green); background: var(--surface); }
.in-reader .reading-mode-bar .reading-previous:disabled { color: var(--muted); border-color: var(--line); opacity: .5; cursor: default; }
.in-reader .group-result-bar.consolidation-stage .continue-lesson { width: 100%; max-width: 420px; }
.in-reader .group-result-main { justify-content: center; gap: 16px; }
.in-reader .group-stage-progress b { font-size: 21px; line-height: 1.3; }
.in-reader .group-stage-progress small { font-size: 12px; }
.in-reader .group-result-bar .reveal-answer { min-height: 44px; min-width: 140px; padding: 8px 12px; font-size: 13px; }
.in-reader .continue-lesson, .in-reader .reading-mode-bar .button { min-height: 48px; padding: 10px 22px; font-size: 16px; }
.in-reader .impression-stage .result-bar-heading { margin-bottom: 7px; }
.in-reader .impression-stage .result-bar-heading > strong { font-size: 13px; }
.in-reader .result-bar .mark-button { min-height: 64px; padding: 8px 12px; justify-content: center; flex-direction: row; gap: 8px; }
.in-reader .result-bar .mark-button small { display: none; }
.in-reader .result-bar .mark-button b { font-size: 18px; }
.in-reader .result-bar .mark-button > svg:first-child { width: 20px; height: 20px; }
.in-reader .group-study-card:not(.group-assessment) > .group-study-heading h1,
.in-reader .group-study-card:not(.group-assessment) > .group-study-heading p,
.in-reader .near-lesson > .group-study-heading h1,
.in-reader .near-lesson > .group-study-heading p,
.in-reader .reading-card-foot > span { display: none; }
.in-reader .group-study-heading { align-items: center; margin-bottom: 20px; }
.in-reader .group-study-heading .method-badge { margin: 0; }
.in-reader .reading-card-foot { justify-content: flex-end; }
body:has(.in-reader) #notice { bottom: calc(114px + env(safe-area-inset-bottom, 0px)); }

@media (max-width: 760px) {
  .in-reader .reading-mode-bar .consolidation-actions { gap: 8px; }
  .in-reader .reading-mode-bar .button { padding-inline: 10px; gap: 6px; }
  .in-reader .focus-toolbar { padding-inline: 12px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .reader-progress { justify-self: center; }
  .reader-tools { gap: 4px; }
  .reader-options > summary { min-width: 44px; padding: 0; }
  .reader-options > summary > span { display: none; }
  .in-reader .reading-card, .in-reader .group-study-card, .in-reader .near-lesson { padding: 20px 16px; }
  .in-reader .group-study-heading { gap: 8px; margin-bottom: 18px; }
  .in-reader .group-study-heading h1 { font-size: 21px; margin: 10px 0 6px; }
  .in-reader .group-study-heading p { font-size: 13px; }
  .in-reader .impression-receipt { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; }
  .in-reader .impression-receipt .status-badge { font-size: 11px; padding: 4px 6px; }
  .in-reader .correct-impression { font-size: 12px; min-height: 44px; }
  .in-reader .consolidation-stage .consolidation-actions { gap: 8px; }
  .in-reader .consolidation-stage .continue-lesson { flex-shrink: 0; }
  .in-reader .recall-cover { min-height: 200px; padding: 22px 8px; }
  .in-reader .word-head .recall-toggle:disabled { display: none; }
}
@media (max-width: 365px) {
  .in-reader .focus-toolbar { padding-inline: 10px; }
  .reader-exit { font-size: 13px; }
  .reader-progress { font-size: 12px; }
  .reader-reference { padding-inline: 8px; }
  .reader-reference svg { display: none; }
  .in-reader .result-bar .mark-button { gap: 4px; padding-inline: 5px; }
  .in-reader .result-bar .mark-button b { font-size: 16px; }
}