/*
  Bitcoin Canon — Mobile
  Pocket reader. Under 760px. Fast, thumb-safe, calm, readable.
  The mobile experience should feel like a small physical book.
*/

/* — Mobile-only components — hidden on desktop ————— */
/* The container hides all its children automatically */
.mobile-book-app { display: none; }

/* — Mobile nav bar ————————————————————————————— */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: .55rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--c-bg) 96%, transparent);
  border-top: 1px solid var(--c-line);
  backdrop-filter: blur(20px);
  gap: .25rem;
}

.mobile-nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  border: 0;
  border-radius: .65rem;
  background: transparent;
  color: var(--c-dim);
  padding: .45rem .3rem;
  font-size: .6rem;
  font-weight: 600;
  font-family: var(--f-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.mobile-nav button.active {
  color: var(--c-amber-2);
  background: var(--c-amber-bg);
}

.mobile-nav button:hover {
  color: var(--c-muted);
}

/* — Mobile reader dock — sticky book/chapter picker — */
.reader-dock {
  display: none;
}

/* — Mobile overrides ————————————————————————————— */
@media (max-width: 760px) {
  body:not([data-mode="reader"]) #mobileChapterNav {
    display: none !important;
  }

  /* Show the mobile nav bar */
  .mobile-nav {
    display: flex;
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  }

  /* Extra padding at bottom to clear mobile nav */
  body {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Topbar — sticky in all modes except home (where masthead contains the full front door) */
  .masthead {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: color-mix(in srgb, var(--c-bg) 96%, transparent);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-line);
  }

  /* In home mode the masthead IS the page content — sticky would lock scrolling */
  body[data-mode="home"] .masthead,
  body:not([data-mode]) .masthead {
    position: relative;
  }

  .masthead,
  .layout,
  .footer {
    width: 100%;
    margin: 0;
    padding-left: .85rem;
    padding-right: .85rem;
  }

  .topbar {
    padding: .55rem 0;
    border-bottom: 0;
  }

  .brand span:last-child {
    display: inline;
    font-size: .88rem;
    max-width: 9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand-mark {
    width: 1.65rem;
    height: 1.65rem;
    font-size: .6rem;
  }

  /* Hide desktop-only topbar elements */
  .top-nav,
  .top-search,
  #activeSourceLink,
  #readerFocusToggle,
  .block-clock,
  .app-install-button {
    display: none;
  }

  .top-actions { gap: .3rem; }

  .top-actions > button,
  .top-actions > a {
    min-height: 1.7rem;
    padding: .28rem .5rem;
    font-size: .68rem;
  }

  /* ── Front door — visible in home mode only ─────────────── */
  /* All navigation modes hide the hero so content is first thing visible */
  body[data-mode]:not([data-mode="home"]) #top { display: none; }

  /* Compact front door for small screens */
  .canon-front-door { padding: 1.5rem 0 1rem; }
  .canon-front-door h1 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  .scripture-intro {
    font-size: .98rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .front-door-map,
  .edition-note-band { display: none; }
  .canon-shelf { margin-top: 1rem; }
  .shelf-books { grid-template-columns: 1fr 1fr; }

  /* ── Reader chrome — globally hidden on mobile ───────────── */
  /* These are desktop-only or handled per-mode; no mobile route needs them */
  .sidebar,
  .reader-tools,
  .reader-head,
  .reading-controls,
  .canon-preface,
  .canon-bridge,
  .featured-quote { display: none; }

  /* Crumb is redundant — dock and topbar brand provide context */
  .reading-crumb { display: none !important; }

  /* Hide "NEXT CHAPTER" nav above text — only show at chapter end */
  .reader-flow-top { display: none; }

  /* Scroll offset — anchor targets land below sticky masthead + dock */
  html { scroll-padding-top: 6rem; }

  body[data-mode="reader"] .layout {
    width: 100%;
    margin-top: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── Books mode — mobile-first nav, hide desktop library ─ */
  body[data-mode="books"] .contents-frontispiece,
  body[data-mode="books"] .canon-shelf-index,
  body[data-mode="books"] .canon-entry-grid,
  body[data-mode="books"] .testament-grid { display: none; }

  /* Show the mobile book app in books mode */
  body[data-mode="books"] .mobile-book-app { display: block; }

  /* Library home header */
  .mobile-book-home { margin-bottom: 1rem; }
  .mobile-book-home p {
    color: var(--c-amber);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .35rem;
  }
  .mobile-book-home h3 {
    font-family: var(--f-serif);
    font-size: clamp(1.6rem, 8vw, 2.2rem);
    color: var(--c-ink);
    line-height: .95;
    letter-spacing: -.025em;
  }
  .mobile-book-home span {
    display: block;
    color: var(--c-muted);
    font-family: var(--f-serif);
    font-style: italic;
    font-size: .88rem;
    line-height: 1.4;
    margin-top: .5rem;
  }

  /* Continue reading card */
  .mobile-continue-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--c-line-amber);
    border-radius: .85rem;
    background: var(--c-amber-bg);
    margin-bottom: 1rem;
  }
  .mobile-continue-card > div p {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-amber);
    margin-bottom: .18rem;
  }
  .mobile-continue-card > div h4 {
    font-family: var(--f-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-ink);
  }
  .mobile-continue-card > div span {
    color: var(--c-muted);
    font-family: var(--f-serif);
    font-style: italic;
    font-size: .8rem;
  }
  .mobile-continue-card > button {
    flex-shrink: 0;
    border: 1px solid var(--c-line-amber);
    border-radius: 999px;
    background: transparent;
    color: var(--c-amber);
    padding: .42rem .85rem;
    font-size: .74rem;
    font-weight: 600;
    white-space: nowrap;
  }

  /* Shelf cards */
  .mobile-premium-shelves { display: grid; gap: .5rem; }

  .premium-shelf-card {
    display: block;
    width: 100%;
    padding: .85rem;
    border: 1px solid var(--c-line);
    border-radius: .75rem;
    background: transparent;
    text-align: left;
    transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  }
  .premium-shelf-card.is-opening-shelf { border-color: var(--c-line-amber); border-left: 3px solid var(--c-amber); }
  .premium-shelf-card:hover { background: var(--c-amber-bg); border-color: var(--c-line-amber); }

  .shelf-card-topline { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .3rem; }
  .shelf-card-topline b { color: var(--c-amber); font-family: var(--f-mono); font-size: .68rem; font-weight: 700; }
  .shelf-card-topline em { color: var(--c-dim); font-style: normal; font-size: .7rem; }

  .shelf-card-body strong {
    display: block;
    font-family: var(--f-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--c-ink);
  }
  .shelf-card-body small {
    display: block;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: .82rem;
    color: var(--c-muted);
    line-height: 1.35;
    margin-top: .15rem;
  }

  .shelf-card-preview { display: flex; flex-wrap: wrap; margin-top: .4rem; }
  .shelf-card-preview i { font-size: .72rem; color: var(--c-dim); font-style: italic; }
  .shelf-card-preview i + i::before { content: ' · '; font-style: normal; }

  .shelf-card-open {
    display: block;
    margin-top: .42rem;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-amber);
  }

  /* ── Mobile reader dock: slim single-line chapter bar ── */
  body[data-mode="reader"] .reader-dock {
    display: flex;
    align-items: center;
    position: sticky;
    top: 2.88rem;   /* just below masthead */
    z-index: 40;
    height: 2.4rem;
    padding: 0;
    margin: 0 0 .75rem;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    background: rgba(12, 10, 7, .97);
    backdrop-filter: blur(12px);
    box-shadow: none;
    gap: 0;
  }

  body[data-mode="reader"] .reader-dock .reader-dock-title { display: none; }
  body[data-mode="reader"] .reader-dock .reader-dock-actions { display: none; }

  /* Hide the book picker — the brand text already shows context */
  body[data-mode="reader"] .reader-dock [data-open-picker="book"] { display: none; }

  /* Chapter picker — flat, full-width, inline row */
  .reader-picker-button {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    min-width: 0;
    transition: none;
  }

  .reader-picker-button > span {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-amber);
    flex-shrink: 0;
  }

  .reader-picker-button > strong {
    font-family: var(--f-serif);
    font-size: .9rem;
    font-weight: 500;
    color: var(--c-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Hide subtitle ("Jump within book") — clean single line */
  .reader-picker-button > small { display: none; }

  /* ── Passage list — full width, generous vertical rhythm ── */
  body[data-mode="reader"] .passage-list { max-width: none; }

  /* Passage text — comfortable reading size */
  body[data-mode="reader"] .passage-text {
    font-size: calc(1.12rem * var(--reader-scale, 1));
    line-height: 1.78;
  }

  /* ── Strip all pills and chrome per passage card on mobile ── */
  /* No action buttons — reader just reads. Nav is via bottom bar. */
  body[data-mode="reader"] .verse-action-strip { display: none; }
  body[data-mode="reader"] .verse-turner { display: none; }
  body[data-mode="reader"] .concept-chips { display: none; }
  body[data-mode="reader"] .passage-notes { display: none; }
  body[data-mode="reader"] .source-mark { display: none; }

  /* ── Chapter headings — clean and generous ── */
  body[data-mode="reader"] .chapter-heading {
    padding: 1.5rem 0 .65rem;
  }

  body[data-mode="reader"] .chapter-heading h3 {
    font-size: clamp(1.6rem, 9vw, 2.2rem);
  }

  /* Hide the author/source bylines under chapter heading on mobile */
  body[data-mode="reader"] .chapter-byline,
  body[data-mode="reader"] .chapter-source-line,
  body[data-mode="reader"] .chapter-summary { display: none; }

  /* ── Reader flow — single column, clean prev/next ── */
  .reader-flow {
    grid-template-columns: 1fr;
  }

  /* Reader flow buttons — full width, thumb-friendly */
  .reader-flow button {
    padding: 1rem 1.1rem;
  }

  /* Source drawer — full bottom sheet on mobile */
  .source-drawer-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 92vh;
    border-left: 0;
    border-top: 1px solid var(--c-line-strong);
    border-radius: var(--radius-none);
  }

  .record-head {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: 1.35rem 4.7rem 1.15rem 1rem;
  }

  .record-seal {
    width: 2rem;
    height: 2rem;
    font-size: .78rem;
  }

  .record-ref { font-size: 1.65rem; }
  .record-citation,
  .record-provenance,
  .record-apparatus,
  .record-study,
  .source-drawer-actions {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .record-provenance > div {
    grid-template-columns: 1fr;
    gap: .1rem;
    padding: .45rem 0;
  }

  .record-provenance dt { padding-top: 0; }

  .record-actions {
    gap: .6rem .85rem;
  }

  /* Footer — stack on mobile */
  .footer {
    flex-direction: column;
    gap: .5rem;
    font-size: .75rem;
    padding-bottom: 5rem;
  }

  /* ── Mobile shelf + book detail screens ─────────────────── */

  /* Hide desktop-only content inside bookView on mobile */
  body[data-mode="books"] .canon-library-frontispiece { display: none; }

  /* Back button pill */
  .mobile-screen-back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: transparent;
    color: var(--c-muted);
    padding: .32rem .85rem .32rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  /* Screen header — kicker / serif title / italic desc / meta */
  .mobile-screen-title p {
    color: var(--c-amber);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: .28rem;
  }
  .mobile-screen-title h3 {
    font-family: var(--f-serif);
    font-size: clamp(1.7rem, 8vw, 2.3rem);
    line-height: .95;
    letter-spacing: -.025em;
    color: var(--c-ink);
    margin-bottom: .38rem;
  }
  .mobile-screen-title span {
    display: block;
    color: var(--c-muted);
    font-family: var(--f-serif);
    font-style: italic;
    font-size: .9rem;
    line-height: 1.45;
  }
  .mobile-screen-title small {
    display: block;
    color: var(--c-dim);
    font-family: var(--f-mono);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: .45rem;
  }
  .mobile-shelf-title { margin-bottom: 1rem; }
  .mobile-book-title  { margin-bottom: .85rem; }

  /* Preface / about card */
  .mobile-about-book-card {
    border: 1px solid var(--c-line);
    border-radius: .75rem;
    padding: .85rem;
    margin-bottom: .85rem;
  }
  .mobile-about-book-card p {
    color: var(--c-amber);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: .25rem;
  }
  .mobile-about-book-card h4 {
    font-family: var(--f-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--c-ink);
    margin-bottom: .28rem;
  }
  .mobile-about-book-card > span {
    display: block;
    color: var(--c-muted);
    font-family: var(--f-serif);
    font-style: italic;
    font-size: .88rem;
    line-height: 1.5;
  }
  .mobile-about-book-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem .75rem;
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px solid var(--c-line);
  }
  .mobile-about-book-card div { display: block; }
  .mobile-about-book-card dt {
    color: var(--c-dim);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: .1rem;
  }
  .mobile-about-book-card dd {
    color: var(--c-muted);
    font-family: var(--f-serif);
    font-size: .83rem;
    line-height: 1.3;
  }

  /* Book cards stack */
  .mobile-native-book-stack { display: grid; gap: .45rem; }

  .mobile-native-book {
    border: 1px solid var(--c-line);
    border-left: 2px solid var(--c-line-amber);
    border-radius: .75rem;
    overflow: hidden;
  }
  .mobile-native-book.active {
    border-color: var(--c-line-amber);
    border-left: 3px solid var(--c-amber);
    background: var(--c-amber-bg);
  }

  /* Main tap target — badge absolutely placed, text stacked in block */
  .mobile-native-book-main {
    position: relative;
    padding: .75rem .85rem .7rem 3.1rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    min-height: 3.4rem;
  }
  /* Amber circle badge — position: absolute avoids iOS grid bugs */
  .mobile-native-book-main em {
    position: absolute;
    left: .65rem;
    top: .75rem;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid var(--c-line-amber);
    background: var(--c-amber-bg);
    color: var(--c-amber);
    font-size: .55rem;
    font-style: normal;
    font-weight: 700;
    font-family: var(--f-mono);
    letter-spacing: -.01em;
  }
  /* Book title — short identifier, serif, prominent */
  .mobile-native-book-main span {
    display: block;
    font-family: var(--f-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-ink);
    line-height: 1.2;
    margin-bottom: .18rem;
  }
  /* Role / description — secondary, muted italic, 2-line clamp */
  .mobile-native-book-main strong {
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--f-serif);
    font-size: .82rem;
    font-weight: 400;
    font-style: italic;
    color: var(--c-muted);
    line-height: 1.4;
    margin-bottom: .18rem;
  }
  /* Stats — dim mono */
  .mobile-native-book-main small {
    display: block;
    color: var(--c-dim);
    font-family: var(--f-mono);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  /* Read / Chapters / Export action row */
  .mobile-native-book-actions {
    display: flex;
    gap: .4rem;
    padding: .48rem .85rem;
    border-top: 1px solid var(--c-line);
  }
  .mobile-native-book-actions button {
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: transparent;
    color: var(--c-muted);
    padding: .26rem .62rem;
    font-size: .68rem;
    font-weight: 600;
  }
  .mobile-native-book-actions button:first-child {
    border-color: var(--c-line-amber);
    color: var(--c-amber);
  }

  /* Source division card (book detail) */
  .mobile-source-division-card {
    border: 1px solid var(--c-line);
    border-radius: .65rem;
    padding: .7rem .85rem;
    margin-bottom: .65rem;
  }
  .mobile-source-division-card p {
    color: var(--c-dim);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .2rem;
  }
  .mobile-source-division-card strong {
    display: block;
    font-family: var(--f-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-ink);
    margin-bottom: .15rem;
  }
  .mobile-source-division-card span {
    display: block;
    font-family: var(--f-serif);
    font-style: italic;
    font-size: .85rem;
    color: var(--c-muted);
  }

  /* Primary action buttons (book detail) */
  .mobile-book-primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    margin-bottom: .85rem;
  }
  .mobile-book-primary-actions button {
    border: 1px solid var(--c-line);
    border-radius: 999px;
    background: transparent;
    color: var(--c-muted);
    padding: .52rem .75rem;
    font-size: .73rem;
    font-weight: 600;
    text-align: center;
  }
  .mobile-book-primary-actions button:first-child {
    grid-column: 1 / -1;
    background: var(--c-ink);
    border-color: transparent;
    color: var(--c-bg);
  }

  /* Chapter list (book detail) */
  .mobile-chapter-list { margin-top: .25rem; }
  .mobile-chapter-list > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--c-line);
  }
  .mobile-chapter-list > header p {
    color: var(--c-amber);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .mobile-chapter-list > header span {
    color: var(--c-dim);
    font-family: var(--f-serif);
    font-style: italic;
    font-size: .78rem;
  }
  .mobile-chapter-list button {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    align-items: center;
    gap: .55rem;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--c-line);
    background: transparent;
    padding: .62rem 0;
    text-align: left;
  }
  .mobile-chapter-list button em {
    color: var(--c-amber);
    font-family: var(--f-mono);
    font-size: .65rem;
    font-style: normal;
    font-weight: 700;
    text-align: center;
  }
  .mobile-chapter-list button strong {
    color: var(--c-ink);
    font-family: var(--f-serif);
    font-size: .95rem;
    font-weight: 400;
  }
  .mobile-chapter-list button small {
    color: var(--c-dim);
    font-family: var(--f-mono);
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* Satoshi map (creator-books shelf only) */
  .mobile-satoshi-map { margin-bottom: .85rem; }
  .mobile-satoshi-map > p {
    color: var(--c-amber);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-bottom: .45rem;
  }
  .mobile-satoshi-map > div { display: grid; gap: .38rem; }
  .mobile-satoshi-map button {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    border: 1px solid var(--c-line);
    border-radius: .65rem;
    background: transparent;
    padding: .62rem .85rem;
    text-align: left;
    width: 100%;
  }
  .mobile-satoshi-map button strong {
    font-family: var(--f-serif);
    font-size: .95rem;
    color: var(--c-ink);
  }
  .mobile-satoshi-map button span {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: .82rem;
    color: var(--c-muted);
  }
}

/* — Very small screens (iPhone SE etc.) ————————— */
@media (max-width: 380px) {
  body[data-mode="reader"] .passage-text {
    font-size: calc(1.02rem * var(--reader-scale, 1));
  }
}