/* Mobile card view. Book data and canonical node IDs are shared with the canvas. */
.mobile-reader {
  --mobile-level-color: #b84c42;
  width: 100%; height: 100%; min-height: 0; min-width: 0;
  display: flex; flex-direction: column; color: var(--ink, #292d29);
}
.mobile-reader-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1px 2px 0; flex: 0 0 auto; }
.mobile-level { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.mobile-level::before { content: ''; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--mobile-level-color); }
.mobile-sibling-count { color: #777b70; font-size: 12px; font-variant-numeric: tabular-nums; }
.mobile-reader-path { margin: 5px 2px 10px; color: #777b70; font-size: 10px; line-height: 1.6; flex: 0 0 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.mobile-reading-card { border: 2px solid var(--mobile-level-color); border-radius: 13px; background: #fffefb; box-shadow: 0 6px 22px #27322004; flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y pinch-zoom; outline-offset: 3px; }
.mobile-reading-card:focus-visible { outline: 2px solid var(--mobile-level-color); }
.mobile-card-scroll { padding: 23px 23px 27px; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d3d4c9 transparent; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; overflow-wrap: anywhere; }
.mobile-card-kicker { color: #777b70; font-size: 10px; letter-spacing: .6px; margin: 0 0 16px; font-variant-numeric: tabular-nums; }
.mobile-card-title { font: 500 25px/1.5 var(--serif, serif); letter-spacing: .3px; margin: 0 0 20px; text-wrap: pretty; }
.mobile-card-author { font-size: 12px; color: #6c7167; margin: -9px 0 23px; }
.mobile-card-chapters { color: #777b70; font-size: 11px; margin: -7px 0 18px; }
.mobile-card-summary, .mobile-card-paragraph { font: 17px/1.95 var(--serif, serif); margin: 0 0 20px; letter-spacing: .1px; }
.mobile-card-summary { color: #4f594f; }
.mobile-card-paragraph { color: #30382f; }
.mobile-card-summary + .mobile-card-paragraph { padding-top: 21px; border-top: 1px solid #e8e7dd; }
.mobile-card-descend { margin: 28px 0 0; color: #777b70; font-size: 11px; text-align: center; }
.mobile-reader-footer { flex: 0 0 auto; padding-top: 8px; }
.mobile-scroll-hint { font-size: 10px; line-height: 1.5; color: #777b70; text-align: center; margin: 0 0 4px; min-height: 15px; }
.mobile-reader-controls { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; }
.mobile-reader-controls button { min-height: 44px; border-radius: 8px; border: 1px solid transparent; padding: 7px 3px; color: #4c594b; font-size: 12px; touch-action: manipulation; }
.mobile-reader-controls button:hover:not(:disabled), .mobile-reader-controls button:focus-visible { background: #eaece3; border-color: #d7dcce; }
.mobile-reader-controls button:disabled { color: #8b8e83; opacity: .45; cursor: default; }
.mobile-reader-controls .mobile-nav-enter:not(:disabled) { background: #e9ede3; border-color: #dbe2d2; }
.mobile-gesture-help { text-align: center; font-size: 9px; line-height: 1.5; color: #777b70; margin: 4px 0 0; }
.mobile-card-sources { border-top: 1px solid #e4e5dc; margin-top: 26px; padding-top: 19px; }
.mobile-card-sources h3, .mobile-card-prerequisites h3 { font: 500 12px/1.7 var(--sans, sans-serif); color: #687361; margin: 0 0 15px; }
.mobile-card-sources blockquote { margin: 14px 0 9px; padding: 0 0 0 13px; border-left: 2px solid #d4dcce; color: #6c7564; font: 14px/1.8 var(--serif, serif); }
.mobile-reader .mobile-source-link { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; min-height: 48px; padding: 10px 12px; margin: 10px 0; border: 1px solid #dbe2d2; border-radius: 7px; color: #40583e; background: #f4f6ef; text-align: left; font-size: 12px; }
.mobile-source-link span { color: #78816f; font-size: 10px; flex-shrink: 0; }
.mobile-card-prerequisites { margin: 22px 0; background: #f3f3eb; border-radius: 7px; padding: 16px; }
.mobile-card-prerequisites button { display: block; text-align: left; min-height: 44px; padding: 7px 0; color: #4f6648; font-size: 12px; }
.mobile-card-prerequisites p { font-size: 12px; }
.mobile-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mobile-card-actions button { min-height: 46px; border: 1px solid #d9dfd0; border-radius: 7px; padding: 9px 13px; color: #4e6349; font-size: 12px; }
.mobile-card-actions button[aria-pressed='true'] { background: #e8eee0; }
.mobile-coverage-details { margin: 22px 0 12px; font-size: 11px; color: #74786b; }
.mobile-coverage-details summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
.mobile-coverage-details p { line-height: 1.8; margin: 7px 0; }
.mobile-coverage-warning { padding: 12px; background: #f5eee0; color: #7b6040; font-size: 12px; border-radius: 6px; }
.mobile-reader-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 360px) {
  .mobile-card-scroll { padding: 19px 18px 24px; }
  .mobile-card-title { font-size: 23px; }
  .mobile-card-summary, .mobile-card-paragraph { font-size: 16px; }
  .mobile-gesture-help { font-size: 8px; }
}
@media (max-height: 620px) {
  .mobile-reader-path { -webkit-line-clamp: 1; margin-bottom: 7px; }
  .mobile-card-scroll { padding-top: 17px; }
  .mobile-reader-footer { padding-top: 5px; }
  .mobile-gesture-help { margin-top: 1px; }
}