/* ============================================================
   FEEDS — PHONE LAYOUT (2026-10-17, revamp direction A)
   The user chose direction A from diagnostics/mobile_audit/REPORT.md:
   a slim top bar that slides away while reading, a bottom bar for the four
   channels, a "Home ▾" subject picker in place of the sideways subject row,
   slim story cards (with the lean and media bars), a story page laid out for
   phones, and Explainers as a sideways strip of cards. Every rule here is
   scoped to html.m2 (set by js/mobile-nav.js,
   the on/off switch lives there) AND to phone widths, so desktop and tablet
   are untouched and the whole layout can be switched off in one place.
   Loaded after every other stylesheet; each page's own rules stay put.
   ============================================================ */

/* Built by js/mobile-nav.js on every width, shown only on phones. */
.m2-tabs, .m2-subj, .m2-sheet, .m2-more { display: none; }

/* No zooming (user, 2026-10-18: "remove the option to zoom in on feeds, it
   ruins the display"). Together with the viewport tag on every page and the
   pinch block in js/mobile-nav.js. These two apply whichever phone layout is
   showing, so they are not scoped to html.m2.
   - touch-action: manipulation turns off double-tap-to-zoom.
   - iPhone Safari zooms into any text box or dropdown smaller than 16px when
     it is tapped, and stays zoomed. So on phones every one is at least 16px. */
html { touch-action: manipulation; }
@media (max-width: 680px) {
  html input:not([type="checkbox"]):not([type="radio"]), html select, html textarea { font-size: 16px !important; }
}

@media (max-width: 680px) {

  /* ---------------- page frame ---------------- */
  html.m2 .wrap { padding: 0 16px; }
  html.m2 body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  html.m2 .layout, html.m2 .layout:has(> .xp-rail:not([hidden])) { gap: 10px; padding-top: 14px; }
  html.m2 .feed-col .section-head { margin: 8px 0 2px; }
  html.m2 .xp-rail-head { padding: 0 0 2px; }
  html.m2 .live-shell, html.m2 .dash { padding-top: 22px; }

  /* ---------------- top bar ----------------
     One row: wordmark + search / bell / profile. The channel switcher moves
     to the bottom bar, so its row goes. The bar slides up out of the way
     while the reader scrolls down and comes back on any scroll up
     (header.m2-hide, toggled by js/mobile-nav.js). */
  html.m2 header.nav { transition: transform .22s ease; }
  html.m2 header.nav.m2-hide { transform: translateY(-100%); }
  html.m2 .nav-row1,
  html.m2 .nav.search-open .nav-row1 {
    grid-template-areas: "logo icons";
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0;
    padding: 6px 0;
  }
  html.m2 .nav-row1 .surface-nav,
  html.m2 .nav.search-open .nav-row1 .surface-nav { display: none; }
  html.m2 .nav-row1 .logo { font-size: 36px; }
  html.m2 .icon-btn { width: 44px; height: 44px; }
  html.m2 .nav.search-open .nav-search-pill { width: calc(100vw - 132px); }

  /* ---------------- News: subject picker + region ----------------
     The sideways subject row is gone on phones; "Home ▾" opens a list of
     every subject (the same idea as Industry's "All industries ▾"), and the
     region chip sits beside it, as on Industry and Intelligence. Live has
     its own tab in the bottom bar. */
  html.m2 #catNav { display: none; }
  html.m2 .nav-row2-bar { justify-content: space-between; gap: 10px; padding: 2px 0 10px; }
  html.m2 .region-ctl { padding-bottom: 0; }
  /* The region chip always shows its whole name ("Africa & Middle East" needs
     ~208px at the 16px phone size); when the row is short, the subject or
     industry button beside it gives way and ends in "…" instead. */
  html.m2 .region-ctl .rg-select,
  html.m2 .ind-bar .rg-select { min-height: 40px; max-width: 216px; }
  html.m2 .region-ctl, html.m2 .ind-bar .rg-select-wrap { flex: 0 0 auto; }
  html.m2 .m2-subj { flex: 0 1 auto; }
  html.m2 .m2-subj {
    display: inline-flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px;
    background: var(--charcoal-soft); color: var(--white);
    border: 1px solid var(--charcoal-line); border-radius: 999px;
    padding: 0 16px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  }
  html.m2 .m2-subj[aria-expanded="true"] { border-color: var(--yellow); }
  html.m2 .m2-subj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.m2 .m2-caret {
    width: 0; height: 0; flex: 0 0 auto;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--yellow);
  }
  /* Industry and Intelligence: their picker bar is already phone-shaped. */
  html.m2 .ind-bar { padding: 2px 0 10px; }
  html.m2 .ind-pick { min-height: 40px; }

  /* ---------------- the subject sheet ---------------- */
  html.m2 .m2-sheet { display: block; position: fixed; inset: 0; z-index: 90; }
  html.m2 .m2-sheet[hidden] { display: none; }
  html.m2 .m2-sheet-backdrop { position: absolute; inset: 0; background: rgba(12, 13, 15, .6); }
  html.m2 .m2-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--charcoal); border-top: 1px solid var(--charcoal-line);
    border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 80vh; overflow-y: auto;
    animation: m2-sheet-up .2s ease;
  }
  html.m2 .m2-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--charcoal-line); margin: 0 auto 10px; }
  html.m2 .m2-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
    padding: 0 4px 6px;
  }
  html.m2 .m2-sheet-close {
    width: 44px; height: 44px; margin-right: -10px; background: none; border: 0;
    color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer;
  }
  html.m2 .m2-sheet-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    min-height: 52px; padding: 0 4px; background: none; border: 0;
    border-top: 1px solid var(--charcoal-line);
    color: var(--offwhite); font: inherit; font-size: 17px; font-weight: 500; text-align: left; cursor: pointer;
  }
  html.m2 .m2-sheet-row.on { color: var(--yellow); font-weight: 600; }
  html.m2 .m2-sheet-row svg { width: 20px; height: 20px; }

  /* ---------------- bottom bar ----------------
     Live · News · Industry · Intelligence. (user, 2026-10-17: "great but too
     small", so a 70px bar with 28px icons and 14px labels; body padding-bottom
     above keeps the page's last row clear of it.) */
  html.m2 .m2-tabs {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(30, 31, 34, .97); backdrop-filter: blur(10px);
    border-top: 1px solid var(--charcoal-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.m2 .m2-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    min-height: 70px; padding: 6px 2px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none;
  }
  html.m2 .m2-tab svg { width: 28px; height: 28px; }
  html.m2 .m2-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.m2 .m2-tab.on { color: var(--white); font-weight: 600; }
  html.m2 .m2-tab.on svg { color: var(--yellow); }
  html.m2 .m2-tab .m2-live-dot { fill: var(--live-red); stroke: none; }

  /* ---------------- slim story cards ----------------
     Thumbnail left; topic, headline and outlet · time right; the lean and
     media bars and the source count underneath (laid out further down). The
     full coverage panel lives on the story page (it opens when the card is
     tapped). */
  html.m2 .feed-col .grid > .ro-col > * { margin-bottom: 0; }
  html.m2 .grid .coverage-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 14px 0; background: none; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--charcoal-line);
  }
  html.m2 .grid .coverage-card:hover { transform: none; }
  html.m2 .grid .coverage-card .card-media { display: contents; }
  html.m2 .grid .coverage-card .card-media > img {
    grid-area: media; width: 92px; height: 69px; object-fit: cover;
    border-radius: 8px; align-self: start; background: #1d1e21;
  }
  html.m2 .grid .coverage-card .format-chip {
    grid-area: media; position: static; align-self: start; justify-self: start;
    width: 22px; height: 22px; margin: 4px; border-radius: 6px;
  }
  html.m2 .grid .coverage-card .format-chip svg { width: 12px; height: 12px; }
  html.m2 .grid .coverage-card .src-count-badge {
    grid-area: count; position: static; align-self: center; white-space: nowrap;
    background: none; backdrop-filter: none; padding: 0;
    color: var(--muted); font-size: 12px; font-weight: 500;
  }
  html.m2 .grid .coverage-card .card-top { grid-area: top; padding: 0; gap: 4px; min-width: 0; }
  html.m2 .grid .coverage-card .card-cat { font-size: 12px; }
  html.m2 .grid .coverage-card .card-top h3 {
    font-size: 16px; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  html.m2 .grid .coverage-card .card-dek { display: none; }
  html.m2 .grid .coverage-card .card-foot { font-size: 12.5px; flex-wrap: nowrap; min-width: 0; }
  html.m2 .grid .coverage-card .card-foot > * { flex: none; }
  html.m2 .grid .coverage-card .card-foot .source-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.m2 .grid .coverage-card .card-foot .source-dot { display: none; }
  html.m2 .grid .coverage-card .bias-pill { font-size: 11px; }
  /* (user, 2026-10-17: "include the bias and media bars for all stories")
     Both bars on every card: political lean, then legacy vs new media, each
     with a short label, and the source count to their right. The panel's
     wrappers step aside (display: contents) so the two bars sit in the
     card's own grid. A story none of whose outlets is lean-rated says so in
     the lean row rather than leaving a gap. */
  html.m2 .grid .coverage-card {
    grid-template-areas: "media top top" "media lean count" "media mbar count";
    row-gap: 6px;
  }
  html.m2 .grid .coverage-card .card-top { margin-bottom: 2px; }
  html.m2 .grid .coverage-card .card-coverage,
  html.m2 .grid .coverage-card .comp-panel { display: contents; }
  html.m2 .grid .coverage-card .comp-panel > :not(.db-block),
  html.m2 .grid .coverage-card .db-label,
  html.m2 .grid .coverage-card .li-readout,
  html.m2 .grid .coverage-card .coverage-toggle,
  html.m2 .grid .coverage-card .coverage-panel { display: none; }
  html.m2 .grid .coverage-card .src-count-badge { grid-row: 2 / span 2; }
  html.m2 .grid .coverage-card .db-block {
    grid-area: lean; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center;
    column-gap: 8px; margin: 0; min-width: 0;
  }
  html.m2 .grid .coverage-card .db-block--type { grid-area: mbar; }
  html.m2 .grid .coverage-card .db-block::before { content: "Lean"; font-size: 12px; line-height: 1; color: var(--muted); }
  html.m2 .grid .coverage-card .db-block--type::before { content: "Media"; }
  html.m2 .grid .coverage-card .db-block:not(.db-block--type):not(:has(.sv-bar))::after {
    content: "No rated sources"; font-size: 12px; line-height: 1; color: var(--muted);
  }
  html.m2 .grid .coverage-card .li-ratio { display: block; min-width: 0; margin: 0; }
  html.m2 .grid .coverage-card .sv-bar,
  html.m2 .grid .coverage-card .li-bar { height: 5px; margin: 0; }

  /* ---------------- Explainers: a sideways strip ----------------
     (user, 2026-10-17: "put explainers on a side scroll like it used to be")
     It reads as a strip this time: every explainer is a card, each swipe
     stops on a card edge, and the next card peeks in at the right instead
     of a line of text cut off mid-word. The strip runs to the screen edges. */
  html.m2 .xp-rail .xp-list {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc(100% - 52px); gap: 10px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none;
  }
  html.m2 .xp-rail .xp-list::-webkit-scrollbar { display: none; }
  html.m2 .xp-rail .xp-item {
    scroll-snap-align: start; padding: 10px;
    background: var(--charcoal-soft); border: 1px solid var(--charcoal-line); border-radius: 12px;
  }
  html.m2 .xp-body h4 { font-size: 14.5px; }
  html.m2 .xp-meta { font-size: 12px; }
  html.m2 .xp-story { min-height: 32px; padding: 4px 10px; font-size: 12px; }

  /* the story page's "Show all N sources" button (js/mobile-nav.js) */
  html.m2 .m2-more {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
    margin: 6px 0 4px; background: none; border: 1px solid var(--charcoal-line); border-radius: 999px;
    color: var(--offwhite); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  }

  /* ---------------- story page ----------------
     One column, in reading order: headline and lead report, then the
     coverage breakdown (desktop's right-hand column, which phones used to
     hide), then the sources (five, then "Show all"), then similar stories. */
  html.m2 .sv-topbar { padding: 8px 16px; }
  html.m2 .sv-close { min-height: 40px; }
  html.m2 .sv-layout { display: flex; flex-direction: column; gap: 0; padding: 16px 16px 48px; }
  html.m2 .sv-main { display: contents; }
  html.m2 .sv-header { order: 1; }
  html.m2 .sv-rail-right {
    display: block; order: 2; position: static; max-height: none; overflow: visible; margin-top: 24px;
  }
  html.m2 .sv-sources { order: 3; margin-top: 28px; }
  html.m2 .sv-similar { order: 4; }
  html.m2 .sv-rail-right .sv-lg-wrap { display: none; }
  html.m2 .sv-rail-right .sv-h,
  html.m2 .sv-rail-right .db-label,
  html.m2 .sv-rail-right .cd-base,
  html.m2 .sv-rail-right .cd-updated { font-size: 12px; }
  html.m2 .sv-rail-right .cd-row { font-size: 13px; }
  html.m2 .sv-hero-cta { flex-wrap: wrap; row-gap: 4px; }
  html.m2 .sv-hero-cta > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
  html.m2 .sv-chip { min-height: 36px; padding: 0 14px; font-size: 13px; }
  html.m2 .cov-row { padding: 12px 0; }
  html.m2 .cr-thumb { width: 64px; height: 64px; }
  html.m2 .cr-top { font-size: 12.5px; flex-wrap: wrap; row-gap: 4px; }
  html.m2 .cr-head { font-size: 14.5px; }
  html.m2 .cr-meta { font-size: 12px; }
  html.m2 .cov-row .sub-btn { position: relative; min-height: 34px; margin-left: auto; padding: 0 12px; font-size: 12.5px; }
  html.m2 .cov-row .sub-btn::after { content: ""; position: absolute; inset: -5px -4px; }
  html.m2 .sv-sources:has(.sv-chip.active[data-format="all"]) .sv-list.m2-clip:not(.m2-open) > :nth-child(n+6) { display: none; }
  html.m2 .sv-sources:not(:has(.sv-chip.active[data-format="all"])) .m2-more { display: none; }
  html.m2 .sv-similar .rank-num { display: none; }
  html.m2 .rst-head { font-size: 14.5px; }
  html.m2 .rst-meta { font-size: 12px; }
  html.m2 .bias-bar-label { flex-wrap: wrap; white-space: nowrap; column-gap: 6px; row-gap: 2px; }
}

@keyframes m2-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.m2 header.nav { transition: none; }
  html.m2 .m2-sheet-panel { animation: none; }
}

/* (2026-10-18) Reposts on a phone: the card's count column is narrow, so
   "+N reposted" takes its own line under "N sources"; the story view's
   reposts list follows the sources (same flex order, DOM order after them). */
@media (max-width: 680px) {
  html.m2 .grid .coverage-card .src-reposts { display: block; font-size: 11px; }
  html.m2 .grid .coverage-card .src-reposts-sep { display: none; }
  html.m2 .sv-reposts { order: 3; margin-top: 18px; }
}