/* App mode: phones up to 599 px wide and the installed home-screen app
   (the same query as APP_MQ in js/app-mode.js). Everything here sits inside
   that query, so the computer layout never sees it. design/AppMode.dc.html. */

.appbar, .app-only, .cal-back { display: none; }
/* "No connection": a thin line at the top, on every page where the app scripts run. */
.net-banner {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 100;
  max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 999px; background: #18213A; color: #FFFFFF;
  font: 600 13px/1.3 var(--text, sans-serif); text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.net-banner[hidden] { display: none; }

/* The installed app: no rubber-band bounce or pull-to-refresh. */
@media (display-mode: standalone) {
  html, body { overscroll-behavior: none; }
}

@media (max-width: 599px), (display-mode: standalone) {
  .app-only { display: block; }
  /* A tap never leaves a focus frame or a blue flash; the keyboard still gets its frame. */
  :focus:not(:focus-visible) { outline: none; }
  button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
  .appbar[hidden] { display: none; }

  /* The simple pages (My calendars, FAQ, Privacy, Terms, 404...): the same bar, the page scrolls as usual. */
  .page-bar { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); }
  body:has(> .page-bar:not([hidden])) > .site-header { display: none; }
  .cal-back { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -6px; color: var(--t-text); }

  /* ---- the one top bar ------------------------------------------------------ */
  .appbar {
    display: block; flex: 0 0 auto; position: relative; z-index: 5;
    padding: env(safe-area-inset-top) 12px 6px; background: var(--bg);
  }
  .ab-row { display: flex; align-items: center; gap: 4px; min-height: 56px; }
  .ab-back {
    flex: 0 0 44px; width: 44px; height: 44px; margin-left: -4px; padding: 0; border: 0; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; background: transparent; color: inherit;
  }
  .ab-mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
  .ab-title { max-width: 100%; font: 700 17px/1.25 var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ab-sub { font: 500 12px/1.3 var(--text); color: var(--muted); }
  .ab-right { flex: 0 0 auto; min-width: 44px; display: flex; justify-content: flex-end; }
  .ab-right .lp-btn { padding: 0 8px; gap: 2px; }
  .ab-steps { display: flex; gap: 6px; padding: 2px 8px 4px; }
  .ab-steps span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
  .ab-steps span.on { background: var(--accent); }
  .ab-icon { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: transparent; color: inherit; }
  .ab-grid { display: grid; grid-template-columns: repeat(3, 7px); gap: 3px; }
  .ab-grid i { width: 7px; height: 7px; border-radius: 2px; background: currentColor; }

  /* ---- create page: each step is one screen ---------------------------------- */
  .create-page { overflow: hidden; overscroll-behavior: none; }
  /* Each screen is pinned to the visible area: the page itself never scrolls, so Safari's
     bars can't push the top bar under the status bar or cover the bottom buttons. */
  html:has(body.create-page) { overflow: hidden; height: 100%; }
  .create-page #app > section:not([hidden]):not(.center-msg) {
    position: fixed; inset: 0; display: flex; flex-direction: column;
  }
  .create-page .app-header { display: none; }
  .create-page .app-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 16px; gap: 14px; }
  .create-page .bottom-bar { position: static; flex: 0 0 auto; padding: 8px 16px max(10px, env(safe-area-inset-bottom)); }
  .create-page .bottom-bar .note { font-size: 12px; }
  .create-page .btn-lg { min-height: 52px; font-size: 16px; padding: 0 16px; white-space: nowrap; }
  .app-nav { display: flex; gap: 10px; }
  .app-nav > .btn { flex: 1 1 0; min-width: 0; min-height: 52px; font-size: 16px; padding: 0 12px; white-space: nowrap; }
  .app-nav > .btn.is-prev { flex: 0 0 34%; background: #FFFFFF; color: var(--ink); border: 1px solid var(--line); }
  .app-nav-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .app-nav > .btn.is-prev.is-compact { flex: 0 0 auto; padding: 0 16px; }
  /* Doors: "< Back", "All doors", "Door 2 >" */
  .app-nav.is-doors { gap: 8px; }
  .app-nav.is-doors > .btn { padding: 0 10px; }
  .app-nav.is-doors > .btn.is-prev { flex: 0 0 auto; min-width: 64px; }
  .app-nav > .btn.is-grid { flex: 1 1 0; gap: 6px; background: #FFFFFF; color: var(--ink); border: 1px solid var(--line); white-space: normal; line-height: 1.15; font-size: 15px; text-align: center; }
  .app-nav > .btn.is-grid .ab-grid { flex: 0 0 auto; grid-template-columns: repeat(3, 5px); gap: 2px; }
  .app-nav > .btn.is-grid .ab-grid i { width: 5px; height: 5px; border-radius: 1px; }
  @media (max-width: 359px) {
    .app-nav.is-doors { gap: 6px; }
    .app-nav.is-doors > .btn { font-size: 14px; padding: 0 8px; }
    .app-nav.is-doors > .btn.is-prev { min-width: 56px; }
  }
  .app-nav > .btn.is-save { flex: 1 1 auto; white-space: normal; text-align: center; line-height: 1.2; padding: 6px 14px; text-wrap: balance; overflow: visible; text-overflow: clip; }

  /* The title of the calendar and of the album live in the settings screen in app mode. */
  #screen-step1 #title-field, #screen-step1 #album-title-field { display: none !important; }
  #screen-step2 #title-field { display: none; }

  /* Step 1: who it's for */
  #screen-step1 .app-title { font-size: 25px; }
  #screen-step1 .audience { min-height: 0; padding: 10px 12px; }
  #screen-step1 .audience[aria-checked="true"] { padding: 9px 11px; }
  #screen-step1 .audience span { font-size: 12px; }
  #screen-step1 .app-body { gap: 12px; }
  #screen-step1 .audiences { gap: 8px; }
  #screen-step1 .audience b { font-size: 15px; }
  #screen-step1 .audience span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  #screen-step1 .field label, #screen-step1 .field .label { font-size: 13px; }
  #screen-step1 .input, #screen-step1 .tz-button { min-height: 46px; }
  #screen-step1 .app-body > .small { font-size: 12px; }
  /* First door and time zone side by side, like the names */
  #screen-step1 .step1-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
  /* Labels of different lengths: the two fields still line up at the bottom. */
  #screen-step1 .step1-when > .field { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
  #screen-step1 .step1-when .tz-panel { grid-column: 1 / -1; }

  /* Step 2 is two screens: the design, then the doors one at a time. */
  .create-page .step2-layout { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #screen-step2 .step2-main > .field:first-child { display: none; } /* the progress line: the top bar shows the step */
  #screen-step2 #save-btn, #screen-step2 #step2-note { display: none; }
  #screen-step2[data-sub="design"] .door-list,
  #screen-step2[data-sub="design"] #settings,
  #screen-step2[data-sub="design"] #app-door-meta,
  #screen-step2[data-sub="design"] #space-note { display: none; }
  #screen-step2[data-sub="doors"] .picker,
  #screen-step2[data-sub="doors"] #cover-slot,
  #screen-step2[data-sub="doors"] #settings { display: none; }
  #screen-step2 .picker .section-head { display: none; }
  #screen-step2 .pick { width: 68px; gap: 4px; }
  #screen-step2 .pick .mwrap, #screen-step2 .pick .mini { width: 60px; height: 108px; border-radius: 9px; }
  #screen-step2 .pick .nm { font-size: 12px; line-height: 1.25; }
  #screen-step2 .strip { flex: 0 0 auto; padding-top: 6px; padding-bottom: 4px; }
  #screen-step2 .picker-tabs, #screen-step2 .selinfo { flex: 0 0 auto; }
  #screen-step2 .selinfo { text-align: center; }
  #screen-step2 .selinfo .badge-gold, #screen-step2 #free-note { display: none; }
  #screen-step2 .picker { gap: 10px; }
  #screen-step2 .picker-tabs { align-self: flex-start; }
  #preview-slot-mobile .design-preview .note { display: none; }
  /* The big preview takes exactly the room that is left and shows the whole calendar in it. */
  #screen-step2[data-sub="design"] .app-body { overflow: hidden; }
  #screen-step2[data-sub="design"] .step2-main { min-height: 0; }
  #screen-step2[data-sub="design"] .picker { flex: 1 1 auto; min-height: 0; }
  #screen-step2[data-sub="design"]:has(#cover-slot:not(:empty)) .app-body { overflow-y: auto; }
  #preview-slot-mobile { flex: 1 1 auto; min-height: 0; }
  #preview-slot-mobile .design-preview { height: 100%; }
  #preview-slot-mobile .design-preview { display: flex; flex-direction: column; }
  #preview-slot-mobile .design-preview .live { width: 100%; flex: 1 1 0; min-height: 0; overflow: hidden; }

  /* One door per screen */
  .app-door-meta { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; font-size: 14px; color: var(--muted); }
  #screen-step2[data-sub="design"] #app-door-meta { display: none !important; }
  /* The save line belongs to filling the doors: not on "Who it's for" or "Design". */
  #screen-step2[data-sub="design"] #autosave-status { display: none; }
  .app-door-meta .autosave { justify-content: flex-end; margin-left: auto; min-height: 0; font-size: 13px; font-weight: 600; text-align: right; }
  .app-door-meta .autosave.is-offline { flex-basis: 100%; flex-wrap: nowrap; justify-content: space-between; align-items: center; text-align: left; }
  .autosave .autosave-retry { flex: 0 0 auto; min-height: 36px; min-width: 36px; padding: 0; font-size: 20px; line-height: 1; }
  .app-door-meta:has(.autosave.is-offline) { flex-wrap: wrap; }
  #screen-step2[data-sub="doors"] .door-list { flex: 1 1 auto; }
  #screen-step2 .door-editor { border: 0; padding: 0; background: transparent; gap: 12px; }
  #screen-step2 .door-editor-head { display: none; }
  #screen-step2 .door-editor .textarea { min-height: 120px; }
  /* Like the mockup: the idea card without the category row, no extra labels. */
  #screen-step2 .door-editor .ideas .chips { display: none; }
  #screen-step2 .door-editor .ideas { padding: 12px 0; gap: 8px; }
  #screen-step2 .door-editor .ideas .idea-text { min-height: 0; font-size: 15px; }
  #screen-step2 .door-editor > .field > label, #screen-step2 .door-editor > .field > .label { display: none; }

  /* The grid sheet: jump to any door */
  .grid-sheet { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; justify-content: flex-end; }
  .grid-sheet .gs-backdrop { position: absolute; inset: 0; background: rgba(15, 20, 36, 0.35); border: 0; }
  .grid-sheet .gs-panel {
    position: relative; background: #FFFFFF; border-radius: 26px 26px 0 0; max-height: 88vh; overflow-y: auto;
    padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
    box-shadow: 0 -10px 40px rgba(15, 20, 36, 0.2);
  }
  .gs-handle { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: var(--line); }
  .gs-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .gs-head h2 { font: 700 22px/1.2 var(--head); }
  .gs-head p { font-size: 13px; color: var(--muted); }
  .gs-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .gs-grid button {
    min-height: 52px; border-radius: 12px; border: 1px solid var(--line); background: #FFFFFF; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font: 600 16px/1 var(--head);
  }
  .gs-grid button.is-filled { background: var(--accent-soft); border-color: #C9D4F7; }
  .gs-grid button.is-filled svg { color: #1F8A5B; }
  .gs-grid button[aria-current="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
  .gs-grid button[aria-current="true"] svg { color: #FFFFFF; }
  .gs-hint { text-align: center; font-size: 13px; color: var(--muted); }
  .gs-actions { display: flex; flex-direction: column; gap: 8px; }

  /* Step 4: links */
  #screen-links .app-body > .field:first-child svg { display: none; }
  #screen-links .app-title { font-size: 23px; }
  #screen-links .app-body > .field:first-child { gap: 0; }
  #screen-links .bottom-bar .note { line-height: 1.3; }
  #screen-links .app-sub, #screen-links .links-sub, #screen-links .app-body > .small { display: none; }
  #screen-links .bottom-bar.app-only { display: block; }
  /* The addresses themselves are long and not needed on a phone: the buttons copy or share them. */
  #screen-links .link-box, #screen-links .links-card .text-link, #screen-links #copy-view.has-share, #screen-links #copy-edit { display: none; }
  #screen-links .home-hint { font-size: 14px; padding: 10px 12px; }
  #screen-links .links-card { gap: 8px; padding: 14px 16px; }
  #screen-links .links-card h2 { font-size: 17px; }
  #screen-links .links-card .muted { font-size: 14px; }
  #screen-links .app-body { gap: 10px; }
  #screen-links .home-hint { padding: 12px 14px; border-radius: 14px; background: #EAF6EF; color: #1E4D35; text-align: left; }
  #app-settings-btn { display: none; }
  .ab-gear span { font-size: 24px; line-height: 1; }

  /* Calendar settings on their own screen */
  .app-sheet { position: fixed; inset: 0; z-index: 70; background: var(--bg); display: flex; flex-direction: column; }
  .app-sheet .sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }

  /* Short phones (iPhone SE and the like): drop the small print so each step still fits. */
  @media (max-height: 700px) {
    #screen-step1 .audience span, #screen-step1 .app-body > .small { display: none; }
    #screen-step1 .app-title { font-size: 22px; }
    /* The chosen design's name is shown under the strip: the minis go without theirs. */
    #screen-step2 .pick .nm { display: none; }
    #screen-step2 .door-editor .textarea { min-height: 90px; }
    #screen-step2 .door-editor .ideas .idea-text { font-size: 14px; }
    #screen-links .home-hint { font-size: 13px; }
  }

  /* ---- recipient: the whole calendar on one screen ------------------------------ */
  .cal-page:not([hidden]) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; }
  .cal-page .cal-inner { min-height: 0; padding: 0 14px calc(10px + env(safe-area-inset-bottom)); }
  .cal-top { position: relative; padding-top: calc(6px + env(safe-area-inset-top)); min-height: 50px; }
  /* A small Tiny Joys logo on the left: the way to the home page (and to making one). */
  .cal-top .cal-brand { min-width: 44px; justify-content: flex-start; padding-left: 2px; }
  /* Logo only on phones, but the name stays for screen readers (the link needs a name). */
  .cal-top .cal-brand [data-brand] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .cal-app-title {
    display: block; position: absolute; left: 50%; transform: translateX(-50%); max-width: calc(100% - 200px);
    font: 700 17px/1.2 var(--text); color: var(--t-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cal-inner > #extras, .cal-inner > #cal-footer, .cal-top-right > [data-lang-picker] { display: none; }
  /* Without a "⋯" sheet (the example calendar) the picker stays in the top bar. */
  .cal-top-right:has(> #more-btn[hidden]) > [data-lang-picker] { display: inline-flex; }
  .cal-app-title { max-width: calc(100% - 110px); }
  .cal-menu.is-sheet > [data-lang-picker] { align-self: flex-start; margin-bottom: 4px; }
  .cal-menu.is-sheet .lp-btn { color: #1B2440; border-color: #CFC3A2; }
  /* In the sheet the list of languages opens inside it, on the screen, in readable colours. */
  .cal-menu.is-sheet > .lang-picker { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; }
  .cal-menu.is-sheet .lp-menu { position: static; width: 100%; min-width: 0; box-sizing: border-box; margin-top: 8px; box-shadow: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #FFFFFF; border: 1px solid #E1D6B8; color: #1B2440; }
  .cal-menu.is-sheet .lp-menu[hidden] { display: none; }
  .cal-menu.is-sheet .lp-menu button { color: #1B2440; background: transparent; font: 500 16px/1.2 var(--text); }
  .cal-menu.is-sheet .lp-menu button:hover, .cal-menu.is-sheet .lp-menu button:focus-visible { background: #F3ECD8; }
  #calendar.is-app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .is-app .cal-head { padding: 2px 0 8px; align-items: center; text-align: center; gap: 2px; }
  .is-app .cal-title.ttl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .is-app .cal-status { font-size: 13px; }
  .cal-fit { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
  .cal-fit .cal-grid { flex: 1 1 auto; min-height: 0; max-width: none; gap: 8px; grid-auto-rows: minmax(0, 1fr); }
  .cal-fit .cell { height: auto; min-height: 44px; }
  .cal-fit .pscale { width: 100%; }
  .cal-legend { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12px; color: var(--t-muted); }
  .cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
  .cal-legend svg { color: var(--t-accent); }
  .cal-legend[hidden] { display: none; }
  .cal-legend > span { gap: 6px; }
  .lg-mini { position: relative; display: inline-block; flex: 0 0 auto; overflow: visible; pointer-events: none; }
  .lg-mini > span { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: block; }
  .lg-mini .lg-pc { width: auto !important; height: auto !important; padding: 0 !important; margin: 0; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; overflow: visible !important; }
  .lg-mini .lg-pc::before { content: none !important; }
  .lg-mini .lg-pc > * { position: relative !important; }
  .is-app .cal-note { margin-top: 4px; text-align: center; font-size: 12px; }
  #album-banner .album-banner { margin: 4px 0 6px; padding: 10px 12px; gap: 8px; }

  /* The "More" menu as a sheet from the bottom, holding the reminders and the footer too. */
  .cal-menu.is-sheet {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; z-index: 60;
    max-height: 85vh; max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
    border-radius: 24px 24px 0 0; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); gap: 6px;
    --t-text: #1B2440; --t-muted: #4F4838; color: #1B2440;
  }
  .menu-handle { align-self: center; width: 44px; height: 5px; border-radius: 3px; background: #D8CCAA; margin-bottom: 6px; }
  .cal-menu.is-sheet .cal-extras, .cal-menu.is-sheet .cal-footer { margin-top: 10px; padding-top: 0; }

  /* A door on the whole screen */
  .sheet-backdrop.is-app { align-items: stretch; }
  .sheet.is-app {
    max-width: none; max-height: none; height: 100%; margin-top: calc(10px + env(safe-area-inset-top));
    border-top: 0; border-radius: 24px 24px 0 0; padding: 0; gap: 0; overflow: hidden;
  }
  .sheet.is-app .appbar { background: transparent; color: #1B2440; padding-top: 4px; }
  .sheet.is-app .ab-sub { color: #5A5440; }
  .sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 20px 16px; display: flex; flex-direction: column; gap: 14px; }
  .sheet.is-app .sheet-photo img { max-height: 42vh; max-height: 42dvh; }
  .sheet-foot { flex: 0 0 auto; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #E6DBBE; display: flex; flex-direction: column; gap: 6px; }
  .sheet-foot .app-nav .btn { min-height: 52px; background: #FFFFFF; color: #1B2440; border: 1px solid #E1D6B8; }
  .sheet-foot .app-nav .btn:only-child { flex: 0 1 62%; }
  .sheet-foot .sheet-back { width: 100%; min-height: 46px; background: transparent; color: #1B2440; border: 0; font-weight: 600; }
  .sheet-foot .sheet-back:hover { background: rgba(27, 36, 64, 0.06); color: #1B2440; }
  .sheet-foot .app-nav .btn.is-next:only-child { margin-left: auto; }
  .sheet-hint { text-align: center; font-size: 12px; color: #6A6250; }

  /* ---- the album as a book -------------------------------------------------------- */
  .album-page:not([hidden]):has(.album.is-book), .album-overlay:has(.album.is-book) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  .album.is-book { height: 100vh; height: 100dvh; max-width: none; padding: 0 0 calc(8px + env(safe-area-inset-bottom)); gap: 8px; display: flex; flex-direction: column; }
  .album.is-book .appbar { background: transparent; color: #F3F5F8; }
  .album.is-book .ab-sub { color: #C4CCE3; }
  .album.is-book .ab-tools { display: flex; align-items: center; gap: 4px; }
  .album.is-book .ab-tools .lp-btn { padding: 0 6px; gap: 2px; }
  .ab-pdf { position: relative; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #E2C275; background: transparent; color: #E2C275; font: 700 13px/1 var(--head); }
  .ab-pdf::before { content: ""; position: absolute; inset: -5px -2px; }
  .book-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 6px; }
  .book-page { min-height: 100%; display: flex; flex-direction: column; gap: 12px; }
  .book-page .day { flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.07); }
  .book-page .day .dnum { display: none; }
  .book-page .day .body { gap: 12px; }
  .book-page .day .text { font-size: 18px; line-height: 1.5; }
  .book-page .day .ph img { width: auto; max-width: 100%; max-height: 46vh; max-height: 46dvh; object-fit: contain; border-radius: 14px; }
  .book-cover .album-cover { height: 42vh; height: 42dvh; min-height: 220px; }
  .album-strip { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px; scrollbar-width: none; }
  .album-strip::-webkit-scrollbar { display: none; }
  .album-strip button {
    position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid rgba(226, 194, 117, 0.35); background: #1B2A5A; color: #E2C275; font: italic 600 14px/1 var(--head);
  }
  .album-strip button::before { content: ""; position: absolute; inset: -4px -2px; }
  .album-strip button[aria-selected="true"] { border: 2px solid #E2C275; background: #26397A; }
  .book-nav { flex: 0 0 auto; padding: 4px 16px 0; display: flex; flex-direction: column; gap: 6px; }
  .book-nav .abtn { flex: 1 1 0; min-width: 0; min-height: 52px; background: #FFFFFF; color: #1B2440; border: 0; white-space: nowrap; }
  .book-nav .book-prev { flex: 0 0 30%; }
  .book-nav .abtn:disabled { opacity: 0.4; }
  .book-hint { text-align: center; font-size: 12px; color: #C4CCE3; }
}