/* Board & Quill Portal - Booklet Pass 1 surfaces
   Subscription booklet modal (page flip), Mini-Pack card modal, Lesson detail page.
   Visual source of truth: screenshots in Cursor_Booklet_Pass1_Handoff.md
*/

:root {
  --bq-green: #2C5F2E;
  --bq-green-dark: #1f4521;
  --bq-cream: #FBF5E5;
  --bq-peach: #fbeee0;
  --bq-peek: #f0e0c8;
  --bq-coral: #d96748;
  --bq-coral-deep: #c95c40;
  --bq-gold: #C9A24C;
  --bq-gold-soft: #8a7340;
  --bq-ink: #3a342c;
  --bq-muted: #8a8278;
}

/* Modal backdrop + booklet flip container */
.booklet-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
}
.booklet-backdrop.is-open { display: flex; }

.bq-modal-card {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: var(--bq-peach);
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
  overflow: hidden;
  position: relative;
}

.booklet-modal {
  position: relative;
  width: min(452px, calc(100vw - 28px));
  max-width: 100%;
  max-height: calc(100vh - 36px);
  height: min(640px, calc(100vh - 36px));
  font-size: 100%;
  text-align: center;
}

/* Mini-Pack loads only .bq-modal-card (no .booklet-modal wrapper); match subscription shell width. */
#bq-modal-content > .bq-modal-card.bq-minipack-root {
  width: min(452px, calc(100vw - 28px));
  max-width: 100%;
  max-height: min(640px, calc(100vh - 36px));
  height: min(640px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.bq-minipack-root .bq-minipack-header {
  flex-shrink: 0;
}
.bq-minipack-root .bq-minipack-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.booklet-pages-layer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  /* Session 63 fix: reserve horizontal gestures for the page-flip swipe
     handler. Without this, touch browsers claim a sideways drag as a scroll
     and fire pointercancel before pointerup, so the swipe never registers on
     phones (the cover scrolls there; on the roomier tablet it did not, which
     is why swipe worked on tablet but not phone). pan-y keeps vertical
     scrolling of the subject lists working. */
  touch-action: pan-y;
}

.booklet-page.page-1 .bq-modal-card,
.booklet-page.page-2 .bq-modal-card {
  height: 100%;
}

/* Page 2 needs a fixed footer + scrollable subject list */
.booklet-page.page-2 .bq-modal-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Cover page: keep the footer visible at bottom. */
.booklet-page.page-1 .bq-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 16px 18px 16px;
  background: var(--bq-peach);
  z-index: 10;
}
.booklet-page.page-1 .bq-booklet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-bottom: 18px;
}
.booklet-page.page-1 .bq-page-dots {
  margin-bottom: 2px;
}

.booklet-page.page-1 .bq-modal-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.booklet-page {
  grid-area: 1 / 1;
  position: relative;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.booklet-page.page-1 {
  transform: translateX(0);
  z-index: 2;
}

.booklet-page.page-2 {
  transform: translateX(100%);
  z-index: 1;
}

.booklet-modal.flipped .booklet-page.page-1 {
  transform: translateX(-100%);
  z-index: 1;
}

.booklet-modal.flipped .booklet-page.page-2 {
  transform: translateX(0);
  z-index: 2;
}

/* Cover binding stitch (must sit on .bq-modal-card so it paints above the cream fill) */
.booklet-page.page-1 .bq-modal-card::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 16px;
  bottom: 22px;
  width: 0;
  border-left: 1px dashed rgba(120, 80, 50, 0.45);
  pointer-events: none;
  z-index: 2;
}

.bq-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,253,247,0.65);
  color: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  cursor: pointer;
  z-index: 5;
}

/* Booklet common */
.bq-booklet-topstripe {
  height: 6px;
  background: var(--bq-coral);
}

.bq-binding-shadow {
  position: absolute;
  top: 6px;
  left: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, rgba(120,80,50,0.20), rgba(120,80,50,0.0));
  pointer-events: none;
}

.bq-booklet-body {
  padding: 22px 24px 18px 36px;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  touch-action: pan-y;
}

.bq-cover-footer {
  margin-top: auto;
  padding-top: 12px;
  position: relative;
  display: block;
}

.bq-cover-next {
  position: absolute;
  right: 12px;
  bottom: 0;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(90,84,76,0.8);
}
.bq-cover-next a {
  color: inherit;
  text-decoration: none;
}

.bq-eyebrow {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--bq-coral);
}

.bq-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.01em;
  color: var(--bq-coral);
  margin: 6px 0 6px;
}

.bq-status {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--bq-muted);
  margin: 0 0 14px;
}

.bq-note {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.65;
  color: var(--bq-ink);
  margin: 0 0 20px;
  white-space: pre-wrap;
}
.bq-note .heart {
  color: var(--bq-coral);
}

.bq-sign-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}
.bq-signature {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: var(--bq-green);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,253,247,0.55);
}

.bq-wax {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: relative;
  margin: 0 auto;
}
.bq-wax img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: contain;
}

.bq-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px 36px;
  text-align: center;
  flex: 0 0 auto;
}
.bq-page-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.bq-page-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(217,103,72,0.25);
}
.bq-page-dot.is-active {
  background: var(--bq-coral);
}
.bq-hint {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 14px;
  color: rgba(90,84,76,0.8);
}
.bq-hint a {
  color: inherit;
  text-decoration: none;
}

/* Page 2 spread */
.bq-spread {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
}
.bq-peek {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 22px;
  background: var(--bq-peek);
  box-shadow: inset -10px 0 14px rgba(120,80,50,0.12);
}
.bq-peek .bq-booklet-topstripe {
  background: var(--bq-coral-deep);
}
.bq-spread-content {
  margin-left: 22px;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Page 2: ensure the spread column is height-constrained (prevents footer being pushed out). */
.booklet-page.page-2 .bq-spread-content {
  min-height: 0;
}
.bq-spread-stitch {
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 22px;
  border-left: 1px dashed rgba(120,80,50,0.45);
  pointer-events: none;
}
.bq-page2-body {
  padding: 18px 22px 16px 32px;
  text-align: center;
  flex: 1 1 auto;
  min-height: 0;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  touch-action: pan-y;
}

/* Page 2: body is the scroll container; footer is inside and sticky. */
.booklet-page.page-2 .bq-page2-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 12px 18px 0 28px !important;
  box-sizing: border-box;
}

.booklet-page.page-2 .bq-page2-list {
  flex: 1 1 auto;
  min-height: 0;
  padding-bottom: 88px; /* reserve space so last row isn't hidden behind sticky footer */
}
.booklet-page.page-2 .bq-page2-h2 {
  margin: 4px 0 8px !important;
}
.booklet-page.page-2 .bq-subject {
  padding: 7px 0 7px !important;
}
.booklet-page.page-2 .bq-desc {
  margin: 4px 0 6px !important;
  font-size: 14px !important;
}
.booklet-page.page-2 .bq-tier-row {
  gap: 5px !important;
}
.booklet-page.page-2 .bq-tier-btn {
  padding: 3px 7px !important;
}
/* Page 2 only: dots + swipe — fixed strip at bottom of card (flex sibling below scroll) */
.booklet-page.page-2 .bq-footer--page2 {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  padding: 10px 0 14px !important;
  text-align: center;
  background: var(--bq-peach);
  z-index: 30;
  box-shadow: 0 -4px 14px rgba(120, 80, 50, 0.08);
}

/* Page 2: allow footer visibility within the modal card clip. */
.booklet-page.page-2 .bq-spread-content {
  overflow: hidden;
}
.booklet-page.page-2 .bq-footer--page2 .bq-page-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.booklet-page.page-2 .bq-footer--page2 .bq-page-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.3);
}
.booklet-page.page-2 .bq-footer--page2 .bq-page-dot.is-active {
  background: #b8860b;
}
.bq-page2-swipe-hint {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(184, 134, 11, 0.92);
  margin: 0;
}
.bq-page2-swipe-hint a {
  color: inherit;
  text-decoration: none;
}
.bq-page2-eyebrow {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #b87a3a;
  text-transform: uppercase;
}
.bq-page2-h2 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--bq-green);
  margin: 4px 0 8px;
}

.bq-subject {
  padding: 10px 0 10px;
  border-bottom: 1px solid rgba(180,140,60,0.18);
}
.bq-subject:last-child { border-bottom: 0; }
.bq-subject-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.bq-subject-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bq-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bq-gold);
  flex: 0 0 auto;
}
.bq-subject-name {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--bq-ink);
}
.bq-pill {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.bq-pill.all {
  color: var(--bq-green);
  background: rgba(44,95,46,0.10);
}
.bq-pill.base {
  color: var(--bq-gold);
  background: rgba(201,162,76,0.10);
}
.bq-desc {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 15px;
  color: #5a544c;
  line-height: 1.5;
  margin: 6px 0 8px;
  padding-left: 15px;
}

.subject-row a.more-link,
.subject-row button.more-link {
  color: #8a7340;
  font-style: italic;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.subject-row a.more-link:hover,
.subject-row button.more-link:hover {
  color: #C9A24C;
}

/* Page 2: subject description overlay (keeps lesson buttons usable) */
.bq-desc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 50;
}
.bq-desc-overlay-card {
  width: min(360px, calc(100% - 24px));
  max-height: min(420px, calc(100% - 56px));
  overflow: auto;
  background: #FFFDF7;
  border: 1px solid rgba(180,140,60,0.28);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(0,0,0,0.28);
  padding: 16px 16px 52px;
  position: relative;
  text-align: center;
}
.bq-desc-overlay-close {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,253,247,0.85);
  color: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 18px;
  cursor: pointer;
}
.bq-desc-overlay-body {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  color: #5a544c;
  line-height: 1.6;
  padding-top: 14px;
}
.bq-tier-row {
  display: flex;
  gap: 6px;
  padding-left: 15px;
  flex-wrap: wrap;
}
.bq-tier-btn {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 150ms ease;
}
.bq-tier-btn.is-active {
  border: 1px solid rgba(44,95,46,0.5);
  background: rgba(44,95,46,0.05);
  color: var(--bq-green);
  cursor: pointer;
}
.bq-tier-btn.is-active:hover,
.bq-tier-btn.is-active:focus {
  border: 1.5px solid var(--bq-gold);
  background: var(--bq-green);
  color: var(--bq-gold);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(201,162,76,0.25);
}
.bq-tier-btn.is-locked {
  border: 1px dashed rgba(120,100,80,0.4);
  background: rgba(120,100,80,0.04);
  color: rgba(120,100,80,0.55);
  cursor: not-allowed;
}

.bq-upgrade {
  padding-left: 15px;
  margin-top: 8px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--bq-green);
}
.bq-upgrade-copy {
  color: var(--bq-green);
}
.bq-upgrade .premium {
  color: var(--bq-gold);
  font-weight: 700;
}
.bq-upgrade-link {
  display: inline-block;
  margin-top: 4px;
  color: var(--bq-gold);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.bq-fc {
  margin-top: 10px;
  border-radius: 4px;
  border: 1px dashed rgba(201,162,76,0.55);
  background: rgba(201,162,76,0.03);
  padding: 10px 10px;
}
.bq-fc .bq-subject-name { color: #5a4218; }
.bq-opt {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 10px;
  color: var(--bq-gold-soft);
}
.bq-fc a {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 11px;
  color: #5a4218;
  text-decoration: none;
}

/* Mini-Pack card */
.bq-minipack-header {
  background: linear-gradient(180deg, var(--bq-green) 0%, var(--bq-green-dark) 100%);
  padding: 14px 18px 12px 18px;
  color: rgba(255,253,247,0.9);
}
.bq-minipack-header .bq-close {
  border: 1px solid rgba(255,253,247,0.3);
  background: rgba(255,253,247,0.08);
  color: #FFFDF7;
}
.bq-minipack-eyebrow {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: rgba(201,162,76,0.85);
}
.bq-minipack-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--bq-gold);
  margin: 4px 0 4px;
}
.bq-minipack-status {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(255,253,247,0.85);
  margin: 0;
}
.bq-minipack-body {
  padding: 10px 14px 12px;
  text-align: center;
}
.bq-minipack-body .bq-whats {
  text-align: center;
  margin: 0 0 4px;
}
.bq-minipack-body .bq-minipack-subject-name,
.bq-minipack-body .bq-minipack-lr-label {
  text-align: center;
}
/* Teaser copy: subscription booklet truncation (~80 chars); compact line-wrap vs global .bq-desc 15px */
.bq-minipack-body .bq-desc.subject-row,
.bq-minipack-body .bq-desc--empty.subject-row,
.bq-minipack-body .bq-desc--empty {
  padding-left: 0;
  margin: 3px auto 5px;
  max-width: 22em;
  text-align: center;
  font-size: 13px;
  line-height: 1.38;
}
.bq-minipack-body .bq-desc.subject-row {
  font-style: italic;
  color: #5a544c;
}
.bq-minipack-body .bq-desc--empty {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  color: #8a8a8a;
}
.bq-minipack-body .subject-row a.more-link {
  font-size: 13px;
}
.bq-minipack-body .bq-tier-row {
  justify-content: center;
  padding-left: 0;
  gap: 4px;
}
.bq-minipack-body .bq-minipack-lr {
  margin-left: auto;
  margin-right: auto;
  max-width: 22em;
}
.bq-minipack-body .bq-divider {
  margin: 6px 0 8px;
}

.bq-minipack-fc-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.bq-minipack-fc-text {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  color: rgba(255, 253, 247, 0.92);
  text-align: center;
  line-height: 1.35;
  max-width: 22em;
}

/* Compact thumb-only switch (secondary control weight vs account full-width toggle). */
.bq-minipack-header .bq-toggle--minipack-header {
  cursor: pointer;
}
.bq-minipack-header .bq-toggle--minipack-header .bq-toggle-track {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  padding: 0;
  grid-template-columns: unset;
  align-items: unset;
  background: rgba(255, 253, 247, 0.14);
  border: 1px solid rgba(255, 253, 247, 0.28);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.bq-minipack-header .bq-toggle--minipack-header .bq-toggle-thumb {
  position: absolute;
  top: 2px;
  bottom: auto;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0;
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid rgba(255, 253, 247, 0.45);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
  transform: translateX(0);
  z-index: 1;
}
.bq-minipack-header .bq-toggle--minipack-header input:checked + .bq-toggle-track .bq-toggle-thumb {
  background: var(--bq-green);
  border-color: rgba(255, 253, 247, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateX(22px);
}
.bq-minipack-header .bq-toggle--minipack-header input:focus-visible + .bq-toggle-track {
  outline: 2px solid rgba(201, 162, 76, 0.65);
  outline-offset: 2px;
}

.bq-minipack-subject {
  margin-top: 8px;
}
.bq-minipack-subject:first-of-type {
  margin-top: 4px;
}
.bq-minipack-subject-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #3d3d3d;
  margin-bottom: 3px;
  text-align: center;
}

.bq-minipack-lr {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px dashed rgba(201, 162, 76, 0.45);
  background: rgba(201, 162, 76, 0.05);
}
.bq-minipack-lr-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--bq-gold-soft);
  margin-bottom: 3px;
}
.bq-minipack-lr .bq-minipack-lr-pdf-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(201, 162, 76, 0.22);
  min-width: 0;
}

.bq-minipack-pdf-strips {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bq-minipack-pdf-strip {
  display: inline-grid;
  grid-template-columns: minmax(52px, 64px) auto;
  align-items: center;
  gap: 6px 8px;
  text-align: left;
}
.bq-minipack-strip-label {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 8px;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--bq-gold-soft);
  line-height: 1.2;
  justify-self: end;
  padding-right: 2px;
}
.bq-minipack-pdf-strip .bq-tier-row {
  justify-content: flex-start;
}
@media (max-width: 360px) {
  .bq-minipack-pdf-strip {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .bq-minipack-strip-label {
    justify-self: center;
    padding-right: 0;
    margin-bottom: 2px;
  }
  .bq-minipack-pdf-strip .bq-tier-row {
    justify-content: center;
  }
}
.bq-minipack-pdf-row {
  flex-wrap: wrap;
}
.bq-minipack-body .bq-tier-btn.bq-minipack-pdf-btn {
  font-size: 12px;
  padding: 3px 7px;
  line-height: 1.2;
}
.bq-minipack-pdf-btn {
  text-decoration: none;
}

.bq-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,76,0.7), transparent);
  margin: 14px 0 14px;
}
.bq-whats {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--bq-gold-soft);
}

.bq-lr-icon {
  width: 12px;
  height: 12px;
}
.bq-lr-note {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 11px;
  color: #6b6b6b;
  margin: 6px 0 0;
  padding-left: 15px;
}

/* Lesson detail page */
.bq-lesson {
  background: var(--bq-cream);
  min-height: 100vh;
}
.bq-lesson-wrap {
  /* Keep gold frame flush under topbar (no cream gap). */
  padding: 0 0 36px;
}
.bq-back {
  display: inline-block;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--bq-gold);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  margin-bottom: 10px;
}
.bq-lesson-eyebrow {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c25538;
}
.bq-lesson-h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 30px;
  color: var(--bq-green);
  margin: 6px 0 4px;
}
.bq-lesson-sub {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  color: rgba(90,84,76,0.75);
  margin: 0 0 14px;
}

/* Lesson page: match booklet Page 2 footer (dots + swipe back → booklet subjects) */
.bq-lesson-footer {
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(180, 140, 60, 0.22);
}
.bq-lesson-footer-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.bq-lesson-footer-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.3);
}
.bq-lesson-footer-dot.is-active {
  background: #b8860b;
}
.bq-lesson-footer-hint {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.3;
  margin: 0;
}
.bq-lesson-footer-hint a {
  color: rgba(184, 134, 11, 0.92);
  text-decoration: none;
}

.bq-cover {
  background: #FFFDF7;
  border: 1px solid rgba(180,140,60,0.3);
  border-radius: 4px;
  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
  overflow: hidden;
}
.bq-cover-head {
  background: linear-gradient(180deg, var(--bq-green) 0%, var(--bq-green-dark) 100%);
  padding: 14px 16px;
  border-bottom: 2px solid rgba(201,162,76,0.85);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.bq-cover-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--bq-gold);
}
.bq-cover-sub {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 11px;
  color: rgba(255,253,247,0.85);
}
.bq-cover-quill {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(201,162,76,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bq-cover-quill svg { width: 14px; height: 14px; opacity: 0.7; }
.bq-cover-body { padding: 16px; }
.bq-block {
  border-radius: 4px;
  padding: 10px 10px;
  margin-bottom: 10px;
}
.bq-block:last-child { margin-bottom: 0; }
.bq-block .k {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 8px;
  letter-spacing: 0.18em;
  font-weight: 700;
  margin-bottom: 6px;
}
.bq-block .v {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 10px;
}
.bq-hook { background: #f5d4c4; }
.bq-hook .k { color: #c25538; }
.bq-note2 { background: #f5e4c4; }
.bq-note2 .k { color: #8a7340; }
.bq-multi { background: #d4e0f0; }
.bq-multi .k { color: #2a4570; }

.bq-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.bq-open {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  border-radius: 6px;
  background: var(--bq-green);
  color: #FFFDF7;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.bq-dl {
  padding: 14px 16px;
  border-radius: 6px;
  border: 1.5px solid var(--bq-green);
  color: var(--bq-green);
  background: transparent;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 13px;
  text-decoration: none;
}

.bq-mark {
  margin-top: 18px;
}
.bq-mark-h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--bq-green);
  margin: 0 0 10px;
}
.bq-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(180,140,60,0.25);
  border-radius: 4px;
  background: rgba(255,253,247,0.6);
  margin-bottom: 8px;
}
.bq-child label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  flex: 1;
}
.bq-child input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--bq-green);
}
.bq-child .nm {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-size: 14px;
  color: var(--bq-ink);
}
.bq-child .dt {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--bq-gold-soft);
  white-space: nowrap;
}
.bq-add-kid {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--bq-gold);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* ========================================================================
   Top-nav row: page dots + flip links at the top of each booklet page.
   Added to replace the previous bottom-footer pattern which had cross-
   browser visibility issues with sticky-positioned flex children.
   ======================================================================== */
.bq-topnav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0 10px;
  margin-bottom: 4px;
}
.bq-topnav .bq-page-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.bq-topnav .bq-page-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.3);
}
.bq-topnav .bq-page-dot.is-active {
  background: #b8860b;
}
.bq-topnav-links {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(184, 134, 11, 0.92);
  text-align: center;
}
.bq-topnav-links a {
  color: rgba(184, 134, 11, 0.92);
  text-decoration: none;
}
.bq-topnav-sep {
  margin: 0 4px;
  color: rgba(184, 134, 11, 0.55);
}

/* ========================================================================
   Learning Record button + row (page 3).
   Green pill with gold lettering; tighter spacing so all four rows fit
   the visible area without a scrollbar.
   ======================================================================== */
.bq-lr-btn.bq-tier-btn.is-active {
  background: var(--bq-green);
  color: var(--bq-gold);
  border: 1px solid var(--bq-green-dark);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
}
.bq-lr-btn.bq-tier-btn.is-active:hover,
.bq-lr-btn.bq-tier-btn.is-active:focus {
  background: var(--bq-green-dark);
  color: #ffd87a;
  border-color: var(--bq-gold);
  box-shadow: 0 0 0 2px rgba(201,162,76,0.25);
}
.bq-subject.bq-lr {
  padding: 6px 0 6px !important;
}
.bq-subject.bq-lr .bq-subject-name {
  font-size: 18px;
}

/* ========================================================================
   Welcome modals (first-login one-time ceremony).
   Two variants:
     .bq-welcome--subscriber : ornate gold-on-green Boardaquillian welcome
                               (background image: greengold_fancy.png)
     .bq-welcome--minipack   : quieter parchment "Welcome to the table"
                               (decoration is inline SVG, no asset needed)
   Both render inside #bq-modal-content (existing modal backdrop).
   Button-only dismissal: data-bq-welcome-locked="1" on the outer wrapper
   tells booklet.js to skip Escape and click-outside dismissal for these.
   ======================================================================== */

.bq-welcome {
  /* Shared outer container. 2:3 portrait, matching mockup proportions. */
  position: relative;
  width: min(420px, calc(100vw - 28px));
  height: min(630px, calc(100vh - 36px));
  aspect-ratio: 2 / 3;
  max-width: 100%;
  max-height: calc(100vh - 36px);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  font-family: Georgia, 'Times New Roman', serif;
}

.bq-welcome-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ---- Subscriber variant: ornate Boardaquillian welcome ---- */

.bq-welcome-frame--subscriber {
  background-color: var(--bq-green);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.bq-welcome-content--subscriber {
  position: relative;
  height: 100%;
  padding: 14% 12% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bq-welcome-eyebrow--subscriber {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--bq-gold);
  text-transform: uppercase;
  margin-bottom: 18px;
}

.bq-welcome-heading--subscriber {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 34px;
  line-height: 1.15;
  color: #FDFAF5;
  margin-bottom: 16px;
}

.bq-welcome-rule--subscriber {
  width: 60px;
  height: 1px;
  background: var(--bq-gold);
  opacity: 0.7;
  margin: 4px 0 22px;
}

.bq-welcome-lead--subscriber {
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: #F5EFD8;
  margin-bottom: 14px;
}

.bq-welcome-pointer--subscriber {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  /* Slightly desaturated cream so the gold pointer-key reads at full strength
     without needing opacity inheritance gymnastics. */
  color: #D8CFB1;
  margin-bottom: 28px;
  max-width: 240px;
}

.bq-welcome-pointer-key--subscriber {
  color: var(--bq-gold);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.bq-welcome-button--subscriber {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: #FDFAF5;
  border: 1px solid var(--bq-gold);
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 160ms ease, color 160ms ease;
  /* Prevent flex-stretch: button sizes to its content, not parent width. */
  align-self: center;
  width: auto;
  display: inline-block;
}

.bq-welcome-button--subscriber:hover,
.bq-welcome-button--subscriber:focus {
  background: var(--bq-gold);
  color: var(--bq-green);
  outline: none;
}

.bq-welcome-signature--subscriber {
  font-family: 'Caveat', cursive;
  font-size: 18px;
  color: var(--bq-gold);
  margin-top: 24px;
}

/* ---- Mini-Pack variant: parchment Welcome-to-the-table ---- */

.bq-welcome-frame--minipack {
  background-color: var(--bq-cream);
}

.bq-welcome-svg-hatch,
.bq-welcome-svg-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bq-welcome-svg-hatch {
  opacity: 0.55;
}

.bq-welcome-content--minipack {
  position: relative;
  height: 100%;
  padding: 22% 14% 14%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bq-welcome-eyebrow--minipack {
  font-family: 'Lora', Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  /* Desaturated green so the eyebrow whispers; no parent-opacity needed. */
  color: #4a7a4c;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.bq-welcome-heading--minipack {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 38px;
  line-height: 1.1;
  color: var(--bq-green);
  margin-bottom: 28px;
}

.bq-welcome-divider--minipack {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.bq-welcome-divider-line {
  width: 50px;
  height: 1px;
  background: var(--bq-green);
  opacity: 0.5;
}

.bq-welcome-divider-diamond {
  width: 5px;
  height: 5px;
  border: 1px solid var(--bq-green);
  opacity: 0.6;
  transform: rotate(45deg);
}

.bq-welcome-lead--minipack {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--bq-green);
  margin-bottom: 14px;
}

.bq-welcome-pointer--minipack {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  /* Slightly muted green for body whisper; gold pointer-key stays vivid. */
  color: #4a7a4c;
  margin-bottom: 32px;
  max-width: 240px;
}

.bq-welcome-pointer-key--minipack {
  color: var(--bq-gold);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.bq-welcome-button--minipack {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  background: transparent;
  color: var(--bq-green);
  border: 1px solid var(--bq-green);
  padding: 11px 26px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 160ms ease, color 160ms ease;
  /* Prevent flex-stretch: button sizes to its content. */
  align-self: center;
  width: auto;
  display: inline-block;
}

.bq-welcome-button--minipack:hover,
.bq-welcome-button--minipack:focus {
  background: var(--bq-green);
  color: var(--bq-cream);
  outline: none;
}

.bq-welcome-signature--minipack {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  color: var(--bq-green);
  margin-top: 24px;
}

/* ========================================================================
   Session 63 fix: cover-page flip control visibility (revised).
   The cover's "Your lessons →" link was sitting in the scrolling cover body,
   inside a footer whose sticky positioning some browsers (carlee's) do not
   paint, so the link was either below the fold or never rendered. Pin the
   link to the CARD corner with plain absolute positioning, which every
   browser renders reliably. The body and footer drop their own positioning
   so the absolute link resolves against the card, not the scrolling body.
   ======================================================================== */
.booklet-page.page-1 .bq-booklet-body {
  position: static;
}
.booklet-page.page-1 .bq-cover-footer {
  position: static;
}
.booklet-page.page-1 .bq-cover-next {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 20;
  background: var(--bq-peach);
  padding: 4px 11px;
  border-radius: 12px;
  box-shadow: 0 1px 6px rgba(120, 80, 50, 0.18);
}

/* ========================================================================
   Session 63 fix: page 2 + page 3 footers (dots + swipe-back / Learning
   Records links). Same root cause as the cover: these lived in a sticky
   footer inside the scrolling body, which some browsers (carlee's) do not
   paint, so the nav row was invisible. Pin them with absolute positioning
   against .bq-spread-content (which is position:relative and fills the
   visible card), so they stay at the card bottom while the subject list
   scrolls behind them. Absolute is cross-browser reliable; sticky was not.
   The list keeps its padding-bottom reserve so the last row clears the bar.
   ======================================================================== */
.booklet-page.page-2 .bq-footer--page2,
.booklet-page.page-3 .bq-footer--page2 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 0 14px;
  background: var(--bq-peach);
  z-index: 30;
  box-shadow: 0 -4px 14px rgba(120, 80, 50, 0.08);
}
.booklet-page.page-2 .bq-footer--page2 .bq-page-dot,
.booklet-page.page-3 .bq-footer--page2 .bq-page-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(184, 134, 11, 0.3);
}
.booklet-page.page-2 .bq-footer--page2 .bq-page-dot.is-active,
.booklet-page.page-3 .bq-footer--page2 .bq-page-dot.is-active {
  background: #b8860b;
}
.booklet-page.page-3 .bq-page2-list {
  padding-bottom: 88px;
}