/*
 * Book Club responsive continuity — 2026-11-03.
 * Load after the existing page, identity, mobile, and cookie styles.
 * This layer changes presentation only. Native menus, reader size settings,
 * dialog state, hidden panels, media playback, and all destinations stay intact.
 * Do not inject this file into protected historical reference archives.
 */

:root {
  --responsive-gutter: clamp(1rem, 3vw, 1.5rem);
  --responsive-focus: var(--wcs-wine, var(--wine, #742a43));
}

@media screen {
  /* Expose layout errors rather than masking them at the document edge.
     The intentionally contained flipbook canvas keeps its own overflow rule.
     No !important here: an application's explicit modal scroll lock wins. */
  html { overflow-x: visible; }
  body:not(.flipbook-body) { overflow-x: visible; }

  :where(main, section, article, aside, form, fieldset, nav, header, footer) {
    min-inline-size: 0;
  }
  :where(p, li, dt, dd, figcaption, label, legend, summary, th, td) {
    overflow-wrap: anywhere;
  }
  :where(a, button) { overflow-wrap: anywhere; }
  :where(input, select, textarea, fieldset) {
    box-sizing: border-box;
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  legend { max-inline-size: 100%; white-space: normal; }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--responsive-focus);
    outline-offset: 3px;
  }
  :is(.night, .evening) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: var(--wcs-gold, var(--gold, #d6b779));
  }

  /* JS adds only a containing div (or reuses an existing scroll container).
     The original table, caption, th/td elements, classes and listeners remain. */
  .responsive-table-scroll {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-padding-inline: .5rem;
    scroll-margin-block: 1rem;
  }
  .responsive-table-scroll > table {
    display: table !important;
    table-layout: auto;
    inline-size: 100%;
    max-inline-size: none !important;
    overflow: visible !important;
  }
  .responsive-table-scroll > table caption {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: start;
  }

  /* A WCS story figure is one original image with a separate caption, not
     the unrelated three-frame book montage styled by book-experience.css. */
  .wcs figure.book-visual-story {
    display: block;
    grid-template-columns: none;
    grid-template-rows: none;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  .wcs figure.book-visual-story > img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none;
    aspect-ratio: auto;
    object-fit: contain;
  }
  .wcs figure.book-visual-story > figcaption {
    position: static;
    width: auto;
    max-width: 100%;
    margin-block-start: .75rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 1024px) {
  html, body { min-width: 0; }
  body { box-sizing: border-box; }

  /* Legible identity at phone and tablet widths. The 7px/11px identity rules
     remain in their source files; this later layer supplies a readable floor. */
  body > header :is(.brand, .blog-brand, .resource-brand, .course-brand, .club-brand,
    .group-brand, .wordmark, .wcs-brand, .reader-brand) {
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
  }
  body > header :is(.brand, .group-brand, .club-brand, .resource-brand) strong,
  body > header :is(.blog-brand, .wcs-brand),
  .book-club-reader-wordmark .book-club-reader-name strong {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    letter-spacing: .025em !important;
  }
  body > header :is(.brand, .group-brand, .club-brand, .resource-brand, .wordmark) small,
  .book-club-reader-wordmark .book-club-reader-name small {
    font-size: .6875rem !important;
    line-height: 1.3 !important;
    letter-spacing: .08em !important;
  }
  .book-club-reader-wordmark { max-inline-size: 100%; }
  .book-club-reader-wordmark .book-club-reader-mark {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  :is(body > header, body > nav.book-nav, header.reader-header):not(:has(h1, h2)) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    height: auto;
  }
  :is(body > header, body > nav.book-nav, header.reader-header):not(:has(h1, h2))
    :is(nav a, nav button, nav summary),
  .book-nav > a,
  .flipbook-body .reader-header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: .875rem !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    padding-block: .625rem;
  }
  :is(.menu, .menu-button, .header-button, .book-listen-launch, .filter-button,
    .library-filter-buttons button, .resource-filters button, .button, .group-button) {
    min-height: 44px;
    max-inline-size: 100%;
    font-size: .875rem;
    line-height: 1.35;
  }
  :is(.menu, .menu-button, .quote-arrow, .modal-close, .dialog-close,
    .book-listen-close, .reader-toolbar button, .toolbar button, .tools button) {
    min-width: 44px;
    min-height: 44px;
  }
  :where(button, summary, [role="button"]) { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
    min-height: 44px;
    font-size: 16px !important;
  }
  input:is([type="checkbox"], [type="radio"]) {
    min-height: 0 !important;
    min-width: 0;
    flex-shrink: 0;
  }
  label:has(> input:is([type="checkbox"], [type="radio"])) { min-height: 44px; }

  /* Intrinsic text, not fixed minimum tracks, determines whether these
     repeated cards can fit. Existing desktop compositions are unchanged. */
  :is(.book-grid, .post-grid, .related-grid, .portal-library-grid, .title-directory,
    .resource-grid, .download-grid, .catalogue-grid, .package-grid, .path-grid,
    .update-grid, .formation-grid, .community-grid, .experience-grid, .room-grid,
    .part-grid, .atlas-grid, .field-pair, .form-pair) > * {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  :is(.book-card, .title-card, .catalogue-card, .resource-card, .post-card,
    .formation-card, .community-card, .queue-card) :is(a, p, h2, h3, dd) {
    overflow-wrap: anywhere;
  }
  :is(.reader-layout, .reader-body, .reader-shell, .reading-page, .reader-content,
    .reader-prose, .chapter, .layout, .article-body, .daily-body) {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  body:has(> .site-header > .menu-button) .hero-art .orbit {
    max-inline-size: 100%;
    block-size: auto;
    max-block-size: none;
    aspect-ratio: 1;
  }
  :is(.tools, .toolbar, .reader-toolbar, .reader-tools, .chapter-actions,
    .book-listen-controls, .narration-controls) > * { min-inline-size: 0; }
  :is(.reader-tools, .chapter-actions, .book-listen-controls, .narration-controls) {
    flex-wrap: wrap;
  }
  :is(.chapter-arrows, .reader-navigation) > a {
    max-inline-size: 100%;
    min-height: 44px;
    overflow-wrap: anywhere;
  }
  .responsive-table-scroll > table {
    min-width: var(--responsive-table-min, 34rem) !important;
    min-inline-size: var(--responsive-table-min, 34rem) !important;
  }
  :is(pre, .files a, .file-list a, .card a, .record-list, .formation-record) {
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }
  pre { white-space: pre-wrap; }
}

@media screen and (min-width: 901px) {
  /* The homepage's native menu begins at 900px. Its complete desktop link
     set keeps its own scroll box at tablet and desktop widths. */
  body > header:not(:has(h1, h2)) > nav {
    min-inline-size: 0;
    max-inline-size: 100%;
    flex: 1 1 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding-block: .25rem;
  }
  body > header:not(:has(h1, h2)) > nav > * {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  body > header:not(:has(h1, h2)):not(:has(> .menu, > .menu-button)) > nav
    :is(a, button):not([hidden]):not([aria-hidden="true"]) {
    display: inline-flex !important;
    align-items: center;
  }
}

@media screen and (max-width: 900px) {
  /* Leave native menu visibility to its existing click/expanded-state code.
     Headers without a menu keep every link in one scrollable navigation row. */
  body > header:not(:has(h1, h2)):not(:has(> .menu, > .menu-button)) {
    flex-wrap: wrap;
    gap: .5rem !important;
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right)) !important;
    padding-block: max(.5rem, env(safe-area-inset-top)) .5rem !important;
  }
  body > header:not(:has(h1, h2)):not(:has(> .menu, > .menu-button)) > nav,
  .blog-header > nav,
  .book-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 100%;
    order: 3;
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    gap: .75rem !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-padding-inline: .35rem;
    padding: .25rem .2rem !important;
  }
  body > header:not(:has(h1, h2)):not(:has(> .menu, > .menu-button)) > nav > *,
  .book-nav > * {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none;
    white-space: nowrap !important;
  }
  body > header:not(:has(h1, h2)):not(:has(> .menu, > .menu-button)) > nav
    :is(a, button):not([hidden]):not([aria-hidden="true"]) {
    display: inline-flex !important;
    align-items: center;
  }
  .blog-header .blog-brand {
    flex: 0 1 auto;
    text-align: start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .blog-header nav a {
    flex: 0 0 auto;
    width: auto !important;
    white-space: nowrap !important;
    padding-inline: .65rem;
  }
  .site-header:has(> .menu-button) > nav,
  body > header:has(> .menu) > nav {
    top: 100%;
    max-height: calc(100dvh - 5.5rem - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior-block: contain;
  }
  .site-header:has(> .menu-button) > nav a,
  body > header:has(> .menu) > nav a {
    min-height: 44px;
    white-space: normal;
  }

  /* Tool rows scroll inside their own box and retain their original actions. */
  .top:has(> .tools) { flex-direction: row !important; position: relative; }
  .top > .tools {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    gap: .4rem;
    padding-block: .25rem;
    scrollbar-width: thin;
  }
  .top > .tools > * { flex: 0 0 auto; }
  .book-header, .club-header { position: relative; }
  .book-header ~ main .reader-toolbar, .club-tabs { top: 0; }
  .club-tabs { max-inline-size: 100%; min-inline-size: 0; }
  .community-top > div {
    display: flex !important;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    padding-block: .25rem;
    gap: .6rem;
  }
  .community-top > div .group-button {
    flex: 0 0 auto;
    width: auto !important;
    white-space: nowrap;
  }

  /* Native dialogs retain their open/closed state and close handlers. dvh
     follows the mobile browser chrome; vh is the older-browser fallback. */
  dialog {
    box-sizing: border-box;
    max-width: calc(100vw - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right))) !important;
    max-height: calc(100vh - 2rem) !important;
    max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)) - max(1rem, env(safe-area-inset-bottom))) !important;
    margin: auto !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    scroll-padding-block: 3.75rem 1rem;
  }
  :is(dialog, .searchbox, .reader-panel, .panel) :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
  }
  .searchbox { max-height: calc(100dvh - 7rem); overflow: auto; }
  .reader-dialog .reader-toolbar {
    flex-wrap: wrap;
    align-items: center;
    padding-right: 3.75rem;
  }
  .reader-dialog .reader-toolbar > div { flex-wrap: wrap; }
  .reader-dialog .reader-footer { flex-wrap: wrap; }
  .book-listen-head { position: sticky; top: 0; z-index: 2; }
  .book-listen-close { flex: 0 0 44px; }
  .book-listen-actions { min-width: 0; }
  .book-listen-actions button { white-space: normal; line-height: 1.4; }
}

@media screen and (max-width: 760px) {
  :is(.hero-copy, .hero-copy-block, .writing-space, .shelf-current, .catalogue-card,
    .package-card, .article-body, .daily-reading, .portal-panel, .group-shell) {
    min-width: 0;
    max-width: 100%;
  }
  :is(.path-grid, .update-grid, .package-grid, .form-pair, .field-pair,
    .wcs .part-grid, .wcs .resource-grid, .wcs .atlas-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .library-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .library-filter-buttons button { flex: 1 1 7rem; font-size: .875rem; padding: .65rem; }
  .quote-stage { grid-template-columns:44px minmax(0, 1fr) 44px !important; gap: .4rem; }
  .quote-arrow { width: 44px; height: 44px; }
  .quote-dots { flex-wrap: wrap; }
  .quote-dot {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border: 0;
    padding: 21px 11px;
    background-clip: content-box;
  }
  .writing-topline { flex-wrap: wrap; gap: .5rem; }
  .chapter .practice { margin-inline: 0 !important; max-inline-size: 100%; }
  :is(.reader-nav, .turn-controls) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .6rem;
  }
  .reader-nav > p, .turn-controls > span { grid-column: 1 / -1; grid-row: 1; }
  :is(.reader-nav, .turn-controls) > button {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    min-height: 44px;
    white-space: normal;
    font-size: .875rem;
    line-height: 1.4;
  }
  .reader-shell .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-shell .controls button { font-size: .875rem; min-height: 44px; }
  .toc, .reader-shell aside nav { min-inline-size: 0; }
  .toc a, .reader-shell aside nav a { min-height: 44px; font-size: .875rem; }
  .reader-shell aside nav a { display: flex; align-items: center; }

  .messages-brand strong { font-size: .875rem !important; line-height: 1.2 !important; }
  .messages-brand small { font-size: .6875rem; letter-spacing: .04em; }
  .messages-header-actions button { min-width: 44px; font-size: .875rem; letter-spacing: normal; }
  .messages-header-actions { min-width: 0; gap: .35rem; }
  .message { grid-template-columns: 34px minmax(0, 1fr); }
  .message > div { min-width: 0; }
  .mobile-portal-nav a { font-size: .8125rem; line-height: 1.25; min-height: 44px; }
  .mobile-cta { min-height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-cta a { font-size: .8125rem; padding-inline: .5rem; text-align: center; }
  body:has(.mobile-cta) { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body:has(.mobile-portal-nav) { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  .wcs-wrap { width: calc(100% - 2rem); min-width: 0; }
  .wcs h1 { overflow-wrap: anywhere; }
  .wcs .reader-prose { min-width: 0; }
  .wcs .reader-prose :is(h2, h3) { overflow-wrap: anywhere; }
  .wcs .reader-tools label { flex-wrap: wrap; max-width: 100%; }
  .wcs .reader-tools select { max-width: 100%; }
  .wcs .reader-navigation > a { flex: 1 1 14rem; }
  .wcs fieldset { min-width: 0; padding: 1rem; }
  .wcs legend { max-width: 100%; }
  .wcs :is(.confirm, fieldset label) { min-height: 44px; }
  .wcs :is(.confirm, fieldset label) > input { flex: 0 0 20px; min-height: 20px !important; }
  .wcs :is(.callout, .progress-panel, .title-learning-bridge) { padding-inline: 1rem; }
  .wcs .source-table { font-size: 1rem; }
  .wcs .source-table :is(th, td) { padding: .8rem; }
  .wcs .module > summary { padding-inline: .4rem; }
  .wcs .module-status { margin-inline-start: .25rem; white-space: normal; }
}

@media screen and (max-width: 430px) {
  /* Existing checkbox labels, native select menus and text-size controls keep
     their behavior. No viewport zoom restriction or font-size ceiling is added. */
  :is(.button, .group-button, .header-button) { white-space: normal; }
  :is(.book-listen-grid, .book-listen-actions, .directory-counts, .form-pair, .field-pair) {
    grid-template-columns: minmax(0, 1fr);
  }
  .book-club-reader-wordmark { gap: .5rem !important; }
  .book-club-reader-wordmark .book-club-reader-name strong { font-size: .9375rem !important; }
  .wcs .chapter-list a { gap: .65rem; align-items: flex-start; }
  .wcs .chapter-list span { width: 1.6rem; }
  .flipbook-body .reader-header nav { max-width: 100%; overflow-x: auto; }
  .flipbook-body .reader-header nav a { font-size: .875rem !important; }
  .flipbook-body .reader-controls button { min-width: 44px; min-height: 44px; }
}

@media screen and (max-height: 520px) and (orientation: landscape) {
  .site-header:has(> .menu-button) > nav,
  body > header:has(> .menu) > nav { max-height: calc(100dvh - 4.5rem); }
  dialog { max-height: calc(100dvh - 1rem) !important; }
  .flipbook-body .reader-controls button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.responsive-table-scroll, .book-nav, .club-tabs, .formation-tabs,
    .reader-toolbar, .tools, .wcs) { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: CanvasText;
  }
  .responsive-table-scroll[data-responsive-overflow="true"] { border: 1px solid CanvasText; }
}

@media print {
  .responsive-table-scroll { display: contents; overflow: visible; }
  .responsive-table-scroll > table { display: table; min-width: 0; max-width: 100%; }
}