/* ==========================================================================
   Mobile Doc Library — 2-up tile grid for the Library tab.
   CSS-gated to mobile viewport (max-width: 767px).
   ========================================================================== */

@media (max-width: 767px) {

  /* meticulous-tailoring-canvas S1 (2026-05-10) — Iron-Law class fix for
     Issue #1 (Documentation/Library tabs do not fit, "Library" heading clipped).
     mobile-doc-library-view.js mounts .mdl-wrap into #view-documentation but
     only hides 3 sub-elements; the desktop .view-header (📚 Documentation +
     subtitle), .ep-section-header (search + Refresh), and .docs-layout (with
     its calc-height reserving most of the viewport) remained visible, pushing
     .mdl-wrap down + leaking the dark green strip Joe saw. CSS-layer hide
     mirrors the canonical mobile-stories-list pattern and is race-free. */
  #view-documentation > .view-header,
  #view-documentation > .ep-section-header,
  #view-documentation > .docs-library-toggle-row,
  #view-documentation > .docs-layout {
    display: none !important;
  }

  .mdl-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* realizing-mobile-chrome-contract S3 D2 (2026-05-14): top-anchor flush.
       Library main panel sits flush against the bottom edge of the chrome
       header band — .main-content is fixed below --mobile-top-bar-total-
       height (which already eats safe-area-inset-top via .top-nav), so
       .mdl-wrap owes the chrome band zero discretionary padding. Pre-S3
       padding-top was 8px (binary-hatching-pearl D4, 2026-05-09); pre-that
       14px. Iron-Law-driven to zero per Universal Modal Chrome Contract
       (cell 22 of Per-Cell Audit Matrix).
       Prior context retained: L/R floor removed (env safe-area only) per
       the binary-hatching-pearl Iron-Law class fix. Bottom keeps 80px
       TabBar reserve. closing-realization-gate S2 D5 (2026-05-13 PM):
       teal → espresso #2d1f15 per Joe-approved Library-distinct-palette
       lock (rule #7). closing-realization-gate S3 D1 (2026-05-13 PM):
       defensive viewport anchor against the recurring "Library shifted
       right + clipped left + right white strip" symptom — explicit
       `width: 100%; max-width: 100%; margin: 0; box-sizing: border-box`
       pins .mdl-wrap to the inner-content box of `.main-content` (which
       is itself position:fixed left/right:0 per mobile.css:626-637). */
    padding: 0 env(safe-area-inset-right, 0px) calc(80px + env(safe-area-inset-bottom, 0px))
             env(safe-area-inset-left, 0px);
    background: #2d1f15;
    min-height: 100%;
    color: #e0e0e8;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }

  /* meticulous-tailoring-canvas S1 (2026-05-10) — Issue #1 ".ibrary" clip:
     .mdl-wrap correctly de-floors L/R per binary-hatching-pearl D2, but
     content placed flush at L=0 with a 22px Playfair Display heading visibly
     clips the "L". Inner content rows get 16px L/R breathing room (the grid
     keeps full-bleed since tiles benefit from edge-to-edge). This is content
     padding, not wrapper-floor — Iron-Law D2 still satisfied. */
  .mdl-header,
  .mdl-search-row,
  .mdl-status {
    padding-left: 16px;
    padding-right: 16px;
  }

  .mdl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    /* realizing-mobile-chrome-contract S3 D2 (2026-05-14): notch double-count
       removed. .main-content is fixed at top:--mobile-top-bar-total-height,
       which already includes env(safe-area-inset-top) via .top-nav's height
       (mobile.css:626-658). env() values are device-keyed not position-keyed,
       so applying safe-area-inset-top here added the notch a second time
       inside a viewport rect already below the notch — visible as a ~47-59px
       gap below the chrome band on iPhone Pro. Removed for flush anchor. */
    /* mending-iphone-debut S3 D2 (#4b safety net, 2026-05-15) — header is
       width:100% with overflow guard so a future label/affordance regrowth
       can never push the wrap rightward past the viewport (the structural
       cause of the body left-shift race Joe saw at 8:06). Paired with the
       chip toggle's flex-shrink:1 / min-width:0 above so the toggle yields
       first under contention rather than overflowing the line. */
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .mdl-title {
    margin: 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: #e0e0e8;
    /* Title yields after the toggle. Truncates with ellipsis if ever
       contended (Library is short enough to never hit). */
    /* …and it did hit (Greg G-151, FergiPhone 2026-10-24): once the Bundle button joined this row the title
       read "Libr…". The band above already says "Library · User · 19 docs", so the row's own title is kept for
       screen readers only and the toggle + Bundle get the line. */
    position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); clip-path: inset(50%);
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* mending-iphone-debut S3 D1 (#4a + #4b root cause, 2026-05-15) — chip
     toggle narrowed so the .mdl-header line never overflows the iPhone Pro
     viewport. The pre-S3 chip toggle (font-size:13px / padding:8px 14px /
     min-height:36px / labels "User"+"Technical"+"Biography") produced a
     line that exceeded 361px usable width on iPhone Pro, inducing the
     intermittent body left-shift Joe saw at 8:06 (#4b). Iron-Law root
     cause: chip-row overflow is the structural cause of the body anchor
     race. Eliminating the overflow eliminates the race.

     Defenses (a) flex-shrink/min-width so the toggle yields rather than
     pushes if labels ever grow back; (b) the labels themselves are short
     ("User"+"Tech"+"Bio" via data-full-label fallback in JS for a11y);
     (c) tighter padding + font keep the line under viewport at all
     supported iPhone widths. */
  .mdl-lib-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid #1a5252;
    border-radius: 22px;
    padding: 2px;
    flex-shrink: 1;
    min-width: 0;
  }

  .mdl-lib-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: #a8b0b8;
    font-size: 12px;
    font-weight: 600;
    padding: 7px 12px;
    /* F-S4-5 (proving-mobile-promises, 2026-09-17): measured 48×34 on FergiPhone —
       a 44×44 box centred on the button is not hittable as the button. The tab
       bar already carries the 44 px floor (mobile-tab-bar.css, S3); the library
       switcher gets the same floor. */
    min-height: 44px;
    min-width: 44px;      /* "Biography" measured 43×44 on FergiPhone (fixloop-final-2) */
    border-radius: 22px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
  }

  .mdl-lib-btn-active {
    background: #6DD4D4;
    color: #0a2e2e;
  }

  .mdl-search-row {
    display: flex;
  }

  .mdl-search-input {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    background: #0f3636;
    border: 1px solid #1a5252;
    border-radius: 12px;
    color: #e0e0e8;
    font-size: 16px;
    line-height: 1.3;
    padding: 12px 14px;
    min-height: 44px;
  }

  .mdl-search-input::placeholder { color: #6f7d85; }
  .mdl-search-input:focus {
    outline: none;
    border-color: #6DD4D4;
    box-shadow: 0 0 0 2px rgba(109, 212, 212, 0.25);
  }

  .mdl-status {
    color: #a8b0b8;
    font-size: 12px;
    letter-spacing: 0.02em;
  }
  /* binary-hatching-pearl D4 (2026-05-09): collapse the status row when empty
     so the tile grid sits flush against the search row instead of an empty
     16px reserve pushing the first tile below the fold. The view-side JS
     toggles .mdl-status visibility; the prior 16px floor was a leak. */
  .mdl-status:empty {
    display: none;
  }

  /* ── Bundle download banner — harvesting-meta-archive S4, Cluster 1 ── */
  .mdl-bundle-banner[hidden] { display: none; }
  .mdl-bundle-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #1f3a52 0%, #243d4f 100%);
    border: 1px solid #2a4a60;
    border-radius: 10px;
    color: #d4dde6;
  }
  .mdl-bundle-text { flex: 1; min-width: 0; }
  .mdl-bundle-title {
    font-size: 13px;
    font-weight: 600;
    color: #e7eef5;
    margin-bottom: 2px;
  }
  .mdl-bundle-desc {
    font-size: 11px;
    color: #a8b0b8;
    line-height: 1.35;
  }
  .mdl-bundle-btn {
    flex-shrink: 0;
    padding: 7px 12px;
    background: #6DD4D4;
    color: #0c1822;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .mdl-bundle-btn:active { background: #54bfbf; }

  /* ── Grid: 2-up at ≥390px, 1-up below (SE = 375px). ── */
  /* closing-realization-gate S3 D1 (2026-05-13 PM): `min-width: 0` prevents
     grid items (tiles) from forcing the grid container to overflow its
     parent's box. Without this, long unbreakable strings inside a tile
     (e.g., a doc filename with no whitespace) could push the grid past the
     .mdl-wrap right edge, producing the "right white strip + content
     clipped left" shift signature Joe reported. With min-width:0 +
     overflow-wrap: anywhere on tile titles (already in .mdl-tile-title via
     CSS clamp), the grid stays within bounds at all viewport widths. */
  .mdl-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-width: 0;
    width: 100%;
  }

  @media (min-width: 390px) {
    .mdl-grid { grid-template-columns: 1fr 1fr; }
  }

  /* Tile — sweeping-unifying-canopy S4 D4-B (Issue #15, 2026-05-11): the tile
     is now a container DIV; the prose region is a .mdl-tile-body button
     (tap → Read), and the action row is below it. Both regions share the
     amber-ribbon container styling. */
  .mdl-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    background: #0f3636;
    border: 1px solid #1a5252;
    border-top: 3px solid #e8a040; /* warm-amber accent ribbon */
    border-radius: 12px;
    padding: 14px 14px 12px;
    min-height: 168px;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.12s ease;
  }

  .mdl-tile-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
    width: 100%;
  }

  .mdl-tile-body:active { transform: scale(0.98); }

  .mdl-tile-cat-row {
    display: flex;
    align-items: center;
    min-height: 18px;
  }

  .mdl-cat-chip {
    background: rgba(232, 160, 64, 0.15);
    color: #f0c270;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 999px;
    line-height: 1.2;
  }

  .mdl-tile-title {
    margin: 4px 0 0;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #e0e0e8;
  }

  .mdl-tile-desc {
    margin: 0;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    color: #a8b0b8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* mending-iphone-debut S6 (#6, 2026-05-15) — backend FTS5 snippet line.
     Renders below description (or replaces it visually for matched docs).
     Smaller than description, slightly indented + tinted to read as
     "match preview from inside the doc." <mark> highlight wrappers carry
     the matched-term styling. */
  .mdl-tile-snippet {
    margin: 4px 0 0;
    padding: 6px 8px;
    border-left: 2px solid #8a6240;
    background: rgba(45, 31, 21, 0.45);
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #c9b89e;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    white-space: normal;
  }

  .mdl-tile-snippet mark {
    background: #d4a44e;
    color: #1a1208;
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
  }

  .mdl-tile-meta {
    margin-top: auto;
    padding-top: 6px;
    color: #7d8a92;
    font-size: 11px;
  }

  /* sweeping-unifying-canopy S4 D4-B (Issue #15, 2026-05-11) — three-action
     footer row: Download · Print · Read aloud (or 'No audio' disabled).
     Buttons wrap at narrow widths so 1-up tiles on SE keep all three
     reachable. Icons sit above labels at narrow widths and inline at
     wider widths via the .mdl-tile-action-icon / .mdl-tile-action-label
     pair. */
  .mdl-tile-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    border-top: 1px solid #1a5252;
    padding-top: 8px;
    flex-wrap: wrap;
  }

  .mdl-tile-action {
    flex: 1 1 auto;
    /* F-S4-5 (fix-loop 2026-09-17): every tile action measured 165×36 / 83×36 /
       76×36 on FergiPhone — 51 controls under the 44 px effective-target floor. */
    min-height: 44px;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 7px 10px;
    /* Greg G-013 (2026-09-18): a `min-height: 36px` sat HERE, below the 44 px
       line above, and won — so F-S4-5's fix shipped in 1.1.232 and every tile
       action still measured 165×36 / 83×36 / 76×36 on FergiPhone
       (greg-l1-iphone-6, documentation/C6). The later declaration is gone;
       44 px is the floor. */
    border-radius: 999px;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s ease, transform 0.12s ease;
    white-space: nowrap;
  }

  .mdl-tile-action:active {
    transform: scale(0.96);
  }

  .mdl-tile-action-icon {
    font-size: 13px;
    line-height: 1;
  }

  .mdl-tile-action-label {
    font-size: 12px;
    font-weight: 600;
  }

  /* Download — primary egress affordance per Closed Privacy Invariant.
     Teal accent matches the .mdl-bundle-btn header download. */
  .mdl-tile-download {
    background: rgba(109, 212, 212, 0.14);
    color: #6DD4D4;
    border-color: rgba(109, 212, 212, 0.30);
  }
  .mdl-tile-download:active {
    background: rgba(109, 212, 212, 0.22);
  }

  /* Print — secondary egress (paper). Warm-amber to match the tile ribbon. */
  .mdl-tile-print {
    background: rgba(232, 160, 64, 0.14);
    color: #f0c270;
    border-color: rgba(232, 160, 64, 0.30);
  }
  .mdl-tile-print:active {
    background: rgba(232, 160, 64, 0.22);
  }

  /* Read aloud — audio TTS surface; pink accent for warmth distinct from
     egress affordances. mending-iphone-debut S5 (#8c) — Read↔Stop affordance
     bound to NarratedSurface. The button shows ▶ Read in idle state and ■
     Stop while playing/loading; a thicker border + glow indicates the active
     state so the user can find the playing card at a glance even if they've
     scrolled to a different doc in the grid. */
  .mdl-tile-listen {
    background: rgba(232, 160, 184, 0.14);
    color: #E8A0B8;
    border-color: rgba(232, 160, 184, 0.30);
  }
  .mdl-tile-listen:active {
    background: rgba(232, 160, 184, 0.22);
  }
  .mdl-tile-listen-active,
  .mdl-tile-listen[data-narrated-surface-state="playing"],
  .mdl-tile-listen[data-narrated-surface-state="loading"] {
    background: rgba(232, 160, 184, 0.32);
    color: #fff;
    border-color: #E8A0B8;
    box-shadow: 0 0 0 2px rgba(232, 160, 184, 0.22);
  }
  /* Loading sub-state: subtle pulse so the user sees a beat between tap and
     audible playback. iOS Safari can take 200-600ms on cold-fetch a /static/
     mp3; the pulse keeps the affordance honest. */
  @keyframes mdlListenPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
  }
  .mdl-tile-listen[data-narrated-surface-state="loading"] {
    animation: mdlListenPulse 0.9s ease-in-out infinite;
  }

  /* No-audio disabled state — same geometry as Read aloud but muted. */
  .mdl-tile-listen-na {
    background: rgba(120, 130, 140, 0.10);
    color: #6f7d85;
    border-color: rgba(120, 130, 140, 0.22);
    cursor: not-allowed;
  }

  /* Legacy 'Read' tag retained for any external callers still rendering
     the prior 2-action layout — superseded by .mdl-tile-body click target. */
  .mdl-tile-read {
    background: rgba(109, 212, 212, 0.12);
    color: #6DD4D4;
  }
}

/* F-S4-5 (proving-mobile-promises, 2026-09-17): the bundle download link measured
   135×32 on FergiPhone. Same 44 px effective-target floor as every other control
   on the phone; inline-flex so the taller box still centres its label. */
.mdl-bundle-btn,
.mdl-bundle-header-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}