/*
 * Digitally Undressed - mobile OS layer (homepage only)
 *
 * Loaded on index.php via $extra_css_2, after main.css and du-redesign.css.
 * Three jobs, all phone-scoped so desktop is untouched:
 *
 *   1. Quick-launch hub on the splash (.mobile-hub) - eight tiles, one
 *      thumb-reach from the hero CTA stack. Hidden above 768px.
 *   2. Window chrome for the minimizable homepage sections that
 *      js/mobile-windows.js builds (.mw-bar / .mw-body / .mw-window).
 *      Without that script none of the mw- classes exist and every rule
 *      here is inert, so the no-JS page renders exactly as today.
 *   3. Mobile layout debris fixes from the 2026-06-12 Playwright element
 *      audit at 390x844 (each fix names its culprit below).
 *
 * Tokens come from du-redesign.css (--du-cream-line, --du-signal,
 * --du-font-mono) and main.css. No new fonts. ASCII only. No em dashes.
 */

/* ============ PILLAR 1: QUICK-LAUNCH HUB ============ */
/* Hidden everywhere by default; phones only below. The hub is a plain
   set of anchors, so it works with JS disabled. */
.mobile-hub { display: none; }

@media (max-width: 768px) {
  .mobile-hub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0 4px;
  }
  .mobile-hub-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-height: 92px;
    padding: 12px 12px 11px;
    border: 1px solid var(--du-cream-line);
    border-radius: 12px;
    background: rgba(10, 13, 16, 0.55);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, border-color 0.2s ease;
  }
  .mobile-hub-tile:active {
    transform: scale(0.97);
    border-color: rgba(0, 245, 212, 0.4);
  }
  .mobile-hub-tile:focus-visible {
    outline: 2px solid var(--du-signal);
    outline-offset: 2px;
  }
  .mobile-hub-icon {
    color: var(--du-signal);
    line-height: 0;
  }
  .mobile-hub-icon svg { width: 22px; height: 22px; display: block; }
  .mobile-hub-label {
    color: var(--du-cream);
    font-family: var(--du-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
  }
  .mobile-hub-hook {
    color: var(--du-cream-dim);
    font-size: 0.74rem;
    line-height: 1.3;
  }
}

/* ============ PILLAR 2: SECTION WINDOW CHROME ============ */
/* js/mobile-windows.js wraps each post-hero homepage section that owns
   an h2 into: <button.mw-bar aria-expanded> + <div.mw-body>. The section
   itself gets .mw-window (+ .mw-min when minimized). Vertical rhythm
   moves from the section's own padding onto .mw-body so a minimized
   window collapses to just its 48px bar. */
@media (max-width: 768px) {
  .du-home > .mw-window {
    /* !important needed: main.css mobile pass sets .excerpt padding
       with !important; the window bar owns the rhythm now. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .du-home > .mw-window > .mw-body { padding: 24px 0 30px; }
  .du-home > .mw-window.mw-min > .mw-body { display: none; }

  .mw-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    background: rgba(245, 233, 211, 0.03);
    border: 0;
    border-top: 1px solid var(--du-cream-line);
    border-bottom: 1px solid rgba(245, 233, 211, 0.08);
    color: var(--du-cream);
    font-family: var(--du-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mw-bar:focus-visible {
    outline: 2px solid var(--du-signal);
    outline-offset: -2px;
  }
  .mw-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Chevron points down on a minimized bar (tap to open). Maximized
     rotates it 180 to point up (tap to close). Plus-style cue comes
     from the bar's leading marker below. */
  .mw-chevron {
    flex: 0 0 auto;
    color: var(--du-signal);
    transition: transform 0.25s ease;
  }
  .mw-window:not(.mw-min) > .mw-bar .mw-chevron { transform: rotate(180deg); }
  .mw-title::before {
    content: '+ ';
    color: var(--du-signal);
  }
  .mw-window:not(.mw-min) > .mw-bar .mw-title::before { content: '- '; }
}

/* ============ PILLAR 3: MOBILE LAYOUT DEBRIS FIXES ============ */

/* 3a. Trust-bar stat grid. main.css mobile pass forces 3 columns, but
   the grid holds FOUR stats (50 / A-F / 10 min / Plain English), so the
   last one rendered as an orphan row next to two empty cells. 2x2 fills
   every cell. Audit: .gem-stat-grid computed "114px 114px 114px" at
   390px wide before this fix. */
@media (max-width: 640px) {
  .trust-bar .gem-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

/* 3b. Launch banner. At 390px the inline ribbon wrapped to a 3-line,
   81px-tall band ("Free with Kindle Unlimited ... Already a subscriber?
   Read the entire book right now at no extra cost. Read Free") that sat
   mid-scroll below the tall hero. Compact it to one in-flow line:
   keep position relative (in flow, never sticky; also the anchor for
   the absolutely positioned .banner-close, which keeps working - the
   js/main.js dismiss animates max-height and padding to 0, and neither
   is pinned here). The font-size:0 trick hides the filler sentence
   (a bare text node CSS cannot select) and re-sizes only the lead
   strong + CTA. */
@media (max-width: 768px) {
  .launch-banner.launch-banner-inline {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 42px 12px 14px;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
  }
  .launch-banner.launch-banner-inline strong,
  .launch-banner.launch-banner-inline .banner-cta {
    font-size: 12px;
    line-height: 1.2;
  }
  .launch-banner.launch-banner-inline .banner-cta { margin-left: 0; }
}

/* 3c. Three Things celebrate card. main.css keeps .three-thing-celebrate
   at opacity:0 (not display:none) until all three items are checked, so
   it reserved a ~217px invisible block inside the three-things section -
   the blank gap flagged by the 390x844 element audit (reason: opacity-0,
   height 217). Remove it from flow until .show; the .show rules in
   main.css restore visibility when the user completes the week. */
@media (max-width: 768px) {
  .three-things .three-thing-celebrate:not(.show) { display: none; }
}

/* Reduced motion: the only animated affordances in this layer are the
   tile press scale and the chevron rotation. Kill both. The window
   toggle itself is a display switch, which never animates. */
@media (prefers-reduced-motion: reduce) {
  .mobile-hub-tile { transition: none; }
  .mobile-hub-tile:active { transform: none; }
  .mw-chevron { transition: none; }
}

/* ============ RENDER PASS: window bar legibility, 2026-08-11 ============
   Rendering fixes only. No label text is shortened or removed.
   ASCII only. No em dashes. */

@media (max-width: 768px) {
  /* R10. Half the section bars were unreadable. The bar painted
     rgba(245,233,211,0.03), which is all but transparent, so each
     bar inherited whatever its own section paints behind it. The
     homepage sections alternate cream and near black, but the bar
     text stayed cream, so every cream section produced cream on
     cream. Measured before: 1.04:1 to 1.15:1 on the cream rows.
     Fix: the bar owns an opaque background of its own, so the
     foreground always pairs with its own background and the bars
     read as one consistent window chrome down the whole page.
     Measured after: #f5e9d3 on #0e1317 = 15.55:1 on every row. */
  .mw-bar {
    background: #0e1317;
    border-top: 1px solid rgba(245, 233, 211, 0.16);
    border-bottom: 1px solid rgba(245, 233, 211, 0.16);
    color: var(--du-cream);
  }

  .mw-bar:hover,
  .mw-bar:active {
    background: #141a1f;
  }

  /* R11. One bar label truncated mid sentence with an ellipsis
     ("SIX FREE TOOLS. NO APP DOWNLOADS. ONE EMAIL..."). The title
     was pinned to a single nowrap line. Let it wrap instead. No
     words are dropped to make it fit. */
  .mw-title {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: 1.35;
    padding: 2px 0;
  }

  .mw-bar {
    align-items: flex-start;
  }

  .mw-chevron {
    margin-top: 2px;
  }
}