/* ── Mobile report fixes ──────────────────────────────────────────────────────
   Loaded LAST (after styles / styles-report / styles-competitor / site-shell) so
   these phone-only overrides win without touching the desktop rules. Everything
   here is gated behind a max-width media query, so desktop is untouched.

   Scope: the report pages. The shell, cards and grids already stack correctly on
   a phone; this file targets the few report surfaces that still overflowed or
   crammed at ~390px - mainly the data tables and the head-to-head matchup cards.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Kill the reserved scrollbar gutter on phones ─────────────────────────────
   styles.css sets `html{scrollbar-gutter:stable}` so the desktop layout never
   shifts when a classic scrollbar appears/disappears. On a phone scrollbars are
   overlay (zero width), so that "stable" gutter reserves a permanent ~15px strip
   of dead space down the RIGHT edge that nothing ever fills: the body shrinks to
   ~375px inside a 390px screen, and because .report-frame centres itself in that
   narrowed body every card ends up ~16px from the left but ~31px from the right.
   That asymmetric right-hand band reads as "a line down the right side" with the
   cards pushed off-centre. There's no layout shift to guard against on a touch
   screen, so drop the gutter and let the body fill the full viewport width, which
   re-centres the frame symmetrically. Keyed on `pointer:coarse` (touch devices,
   which is exactly the set that uses overlay scrollbars) rather than a width, so
   a touch tablet wider than 780px is covered too while every mouse-driven desktop
   keeps its anti-shift gutter. */
@media (pointer:coarse){
  html{scrollbar-gutter:auto}
}

/* ── Width-based safety net + horizontal lock ─────────────────────────────────
   The `pointer:coarse` rule above only fires on devices that report a coarse
   pointer. Some phone in-app browsers and "desktop site" modes don't, so the
   reserved gutter survived there and left the same ~15px dead band down the
   RIGHT edge (the "white gap on the right"). Catch every narrow viewport by
   WIDTH too, so the gutter is dropped on any phone-sized screen regardless of
   how the pointer is reported.

   Then hard-lock horizontal overflow: nothing should ever be wider than the
   phone viewport, so clip any stray overflow at the root. `overflow-x:clip`
   (not `hidden`) stops the sideways pan WITHOUT creating a scroll container, so
   the sticky site-header and the report tables' own `overflow-x:auto` wrappers
   keep working. This both makes the page fit and locks it from sliding sideways. */
@media (max-width:780px){
  html{scrollbar-gutter:auto;overflow-x:clip}
  body{overflow-x:clip;max-width:100%}
}

/* ── Headline stat boxes (Reels / Top / Avg / Reach) on phones ────────────────
   These four describe the account; they're a summary, not the report's content.
   On a phone they rendered as a chunky 2x2 grid of big white cards that dominated
   the top of the page and pushed the actual report down. Collapse them into a
   tight single row of four small stats so they read as a quiet profile summary
   that hugs the identity line, freeing the space below for the report itself. */
/* The phone-only stat strip rides in the sidebar band beside the avatar (see the
   .report-side-stats block in _shell.html); hidden on desktop, where the stats
   live beside the account name instead. */
.report-side-stats{display:none}
@media(max-width:600px){
  /* Make the stacked top band a row so the four stats fill the gap to the right
     of the avatar; the handle + sub-tabs wrap onto their own full-width rows. */
  .report-sidebar{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:10px}
  .report-side-avatar{width:46px;height:46px;font-size:1.05rem;margin:0;flex:0 0 auto}
  .report-side-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
    flex:1 1 0;min-width:0}
  .report-side-stats .stat-box{padding:7px 3px;border-radius:9px;
    border:1px solid #ECE2F6;background:#fff;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center}
  .report-side-stats .stat-box .val{font-size:.98rem;font-weight:700;line-height:1.15;color:var(--text)}
  .report-side-stats .stat-box .lbl{font-size:.55rem;line-height:1.12;margin-top:2px;
    text-transform:uppercase;letter-spacing:.02em;color:#8A739E}
  .report-side-id{flex:1 1 100%;margin:0}
  .report-subtabs{flex:1 1 100%}
  /* The in-content stat band is now shown in the top band on a phone; hide the
     duplicate here so it doesn't render twice. */
  .report-top-identity .report-stats-band{display:none}
}

/* ── Consolidate the account identity into the stacked top band on phone/tablet ─
   On desktop the follower count + report-generated date live in the identity line
   on the right (.report-top-identity); these sidebar copies are hidden there. */
.report-side-id-followers,.report-side-id-generated{display:none}

/* At <=780px the sidebar folds into a stacked top band that already carries the
   handle above the sub-tab nav, so the account-name heading + follower/date meta
   that repeat under that nav (.report-top-identity) are redundant. Drop them, and
   lift the follower count up to ride right-aligned on the handle's own row, with
   the generated date just beneath - one tidy identity block above the tabs. */
@media(max-width:780px){
  .report-top-identity .pname,
  .report-top-identity .report-id-meta{display:none}
  .report-side-id-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .report-side-id-handle{flex:1 1 auto;min-width:0;margin-top:0;word-break:break-word;
    font-size:.95rem;font-weight:600;color:var(--text)}
  .report-side-id-followers{display:block;flex:0 0 auto;white-space:nowrap;
    font-size:.82rem;font-weight:600;color:var(--accent)}
  .report-side-id-generated{display:block;font-size:.7rem;color:var(--muted);margin-top:3px}
}
@media(max-width:600px){
  /* On a phone the four stat boxes already ride in the band, so .report-top-identity
     is now fully empty - remove it so it leaves no gap above the act tabs. */
  .report-top-identity{display:none}
}

/* ── Card padding ─────────────────────────────────────────────────────────────
   Every report section sits in a .card with 28px padding. On a phone that eats
   56px of horizontal room (out of ~343px), leaving inner content only ~259px and
   crushing tight rows (e.g. the top-reels thumb + hook + "view reel" pill, where
   the hook text collapsed to one character per line). Trim the padding on a phone
   so every card gets ~24px more usable width. */
@media(max-width:560px){
  .card{padding:16px 14px}
}

/* ── Drop the Time-window dropdown across the Analyse act on phones ────────────
   Every Analyse card (Benchmarks, Content Mix, Music, Length, Themes, Top
   Topics, Posting, Formats, Reels) carries its own copy of the same dropdown -
   harmless on desktop, but on a phone, where the act is read one card after
   another, it stacks into a column of identical controls that reads as clutter.
   Hide them all on the Analyse act (act_key "today", which includes the Reels
   page); the window defaults to All time and stays re-scopable on desktop. Hide
   the control itself everywhere in the act (intro-line card heads keep their lead
   line; the Benchmarks copy rides on the Growth Velocity row), and collapse the
   solo heads (which hold nothing but the dropdown) so they leave no empty band.
   The Growth Velocity <select> (#velocity-window, not .report-window) stays. */
@media(max-width:600px){
  .report-frame-act-today .report-window{display:none}
  .report-frame-act-today .card-window-head--solo{display:none}
}

/* ── Competitor "top reels" hook rows ─────────────────────────────────────────
   Each rival reel is a row: cover thumb, then the hook text with a "view reel"
   pill pinned to its right (.comp-reel-hook--row, a space-between flex). In a
   narrow card the fixed-width pill leaves almost nothing for the text, which then
   wraps one letter per line. Let the row wrap so the pill drops onto its own line
   under the full-width hook text. */
@media(max-width:560px){
  .comp-reel-hook--row{flex-wrap:wrap}
  .comp-reel-hook--row .comp-reel-hook-text{flex:1 1 100%}
}

/* ── Sub-tab pill row on phones: 4-column grid, three lines, deterministic ─────
   On a phone the left sub-tab rail collapses to a pill row. Tuning a wrapping
   content-sized row to a fixed line count is a losing game because the labels
   vary so much (Compare alone runs "Gaps" -> "Opportunities" -> "Content
   Strategy"). A 4-column grid makes the line count deterministic instead: every
   act has 10-11 sub-tabs, so ceil(N / 4) = 3 rows, always - exactly three lines
   on Analyse, Compare and Dominate. Cells are equal width (1fr) so the pills are
   uniform; a long label WRAPS inside its own cell (white-space:normal +
   break-word) rather than overflowing, and a shared min-height keeps a two-line
   label ("Content Strategy") the same height as a one-line one ("Gaps"). The
   last row's spare cell simply stays empty - no stretching, no overflow. */
@media(max-width:600px){
  .report-subtabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .report-subtab{box-sizing:border-box;min-width:0;min-height:38px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    padding:4px 4px;font-size:.62rem;line-height:1.1;letter-spacing:0;
    white-space:normal;overflow-wrap:break-word;word-break:break-word}
}

/* ── Reel pill site-wide: Instagram icon + arrow instead of "view reel" ───────
   The site-standard purple CTA pill ships the text "view reel ↗" at every reel
   link. We now render EVERY such pill as a compact icon-only chip at ALL widths
   (desktop included, not just phones): keep the coloured chip and the ↗ arrow, but
   swap the words for a small Instagram glyph on the left. One identical reel link
   everywhere. font-size:0 hides the shipped text run (!important so the per-context
   size overrides - length table, best-window, etc. - can't re-show it); ::before
   paints the white IG glyph, ::after re-adds the ↗. Covers EVERY reel link across
   the whole site (Analyse / Compare / Dominate and every sub-tab) that ships the
   words "view reel" / "see why" / "Listen": the standard purple pills (a.reel-pill,
   Content Mix a.mix-view-cta), the Music Plan Listen pill (a.music-plan-listen),
   the bespoke per-context classes (Compare hashtag/gap/strategy/topic CTAs,
   posts-page post-view-reel) and every inline-styled "view reel"/"see why" anchor
   carrying the .reel-icon-m marker (best-day peak examples, the by-type best-reel
   cell, the competitor best-format row, and the works/underperforms rows - the red
   "see why" pill keeps its red chip via .ireel-pill-open.red so it still reads as
   underperforming, just as an icon). NOT applied to the ireel-pill-open variants
   whose words carry meaning ("see your best reel", "see your top reel from this
   window") - an icon would lose that, so those keep their full text. */
  a.reel-pill, a.mix-view-cta, a.cst-reel, a.hash-view-reel, a.cgap-view-reel,
  a.strategy-topic-cta, a.account-topic-cta, a.post-view-reel, a.music-plan-listen,
  a.reel-icon-m{font-size:0!important;gap:0;padding:5px 11px;
    display:inline-flex!important;align-items:center}
  a.reel-pill::before, a.mix-view-cta::before, a.cst-reel::before, a.hash-view-reel::before,
  a.cgap-view-reel::before, a.strategy-topic-cta::before, a.account-topic-cta::before,
  a.post-view-reel::before, a.music-plan-listen::before, a.reel-icon-m::before{content:"";width:13px;height:13px;flex:0 0 auto;
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='2'%20y='2'%20width='20'%20height='20'%20rx='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Ccircle%20cx='17.5'%20cy='6.5'%20r='1.2'%20fill='%23fff'%20stroke='none'/%3E%3C/svg%3E") center/contain no-repeat}
  a.reel-pill::after, a.mix-view-cta::after, a.cst-reel::after, a.hash-view-reel::after,
  a.cgap-view-reel::after, a.strategy-topic-cta::after, a.account-topic-cta::after,
  a.post-view-reel::after, a.music-plan-listen::after, a.reel-icon-m::after{content:"\2197";font-size:12px;font-weight:600;line-height:1;
    margin-left:4px}

/* ── Act nav (Analyse / Compare / Dominate) on phones ─────────────────────────
   The three acts are the report's primary navigation: Analyse (your account),
   Compare (competitors) and Dominate (playbook). On desktop they're a joined
   segmented pill with a sliding highlight, but on a phone that reads as a passive
   label strip - there's no hover, so people don't realise the other two are
   tappable and never reach two-thirds of the report. Reshape them into three
   distinct, obviously-tappable buttons: the current act is a solid purple button,
   the other two are outlined "ghost" buttons that clearly invite a tap. Also a
   touch shorter than the segmented bar. */
@media(max-width:560px){
  .report-acts{margin-bottom:8px}
  .report-acts-inner{background:transparent;border:none;border-radius:0;padding:0;gap:7px}
  /* Inactive acts are FILLED soft-purple buttons (not outlined "ghost" buttons):
     on a touch screen there's no hover to reveal interactivity, so a solid fill
     is what reads as "tap me". */
  .report-act{flex:1 1 0;padding:9px 4px;border-radius:10px;
    border:1px solid #CBB6EA;background:#EEE4F9;color:#4A2D7A;box-shadow:none}
  .report-act-title{font-size:.74rem;letter-spacing:.04em}
  /* Current act: a solid deep-purple button so it clearly reads as the one you're
     on, while the two lighter filled buttons read as the other places to go. */
  .report-act.active{background:#542C9E;border-color:#542C9E;color:#fff;box-shadow:none}
  .report-act.active .report-act-title{color:#fff}
  /* The desktop swipe floater can't track separated buttons; the instant
     active-state stands in for it on a phone. */
  .report-act-floater{display:none}
}

/* ── Head-to-Head / Content DNA matchup cards ─────────────────────────────────
   Desktop lays each matchup out as "you | VS | rival" side by side
   (.dna-card-grid: 1fr auto 1fr). Two cover thumbs + their stats never fit a
   phone column, so the two sides cram together and the stat text overlaps the
   thumbnails. Below 560px stack the card into one column: you on top, the VS
   chip as a slim horizontal divider, then the rival - each side gets the full
   width so the thumb sits beside its own readable stats. */
@media(max-width:560px){
  .dna-card-grid{grid-template-columns:1fr;gap:10px}
  /* The VS gutter becomes a horizontal rule between the stacked sides. */
  .dna-vs{padding:2px 0}
  .dna-vs::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px}
  /* Give each side room: the cover thumb + its stats read as one row. */
  .dna-side{gap:14px}
  .dna-thumb{width:72px;height:96px}
}

/* ── How You Stack Up: drop the comparison bars on a phone ─────────────────────
   Each metric row pairs a "You" bar and a competitor bar on a shared scale. On a
   phone the track is too narrow to read as a length comparison, so the bars carry
   no meaning - drop the tracks and keep just each side's label + value (and the
   magnitude word in the head still says who's ahead). The pair collapses to
   label-left / value-right so the two numbers still line up. */
@media(max-width:560px){
  .mi-su-track{display:none}
  .mi-su-pair{grid-template-columns:1fr auto;gap:10px}
}

/* ── Pattern tables (Format / Hook / Trigger / CTA performance) ───────────────
   Four small tables that, at desktop padding, run ~30px past a 390px screen, so
   the "view reel" pill in the last column gets clipped at the right edge. Tighten
   the horizontal cell padding on a phone so all four columns - including the pill
   - sit inside the viewport with no awkward sliver of horizontal scroll. */
@media(max-width:430px){
  .pattern-table{font-size:.8rem}
  .pattern-table th,.pattern-table td{padding-left:5px;padding-right:5px}
  /* Shrink the AVG VIEWS bar on a phone so the first column gets enough room for
     its label to sit on whole words ("Educational") instead of breaking mid-word
     ("Educati onal"). The bar is still a clear relative-length comparison; the
     numeric value beside it carries the precise figure. !important caps the
     inline per-row width the renderer sets. */
  .pattern-table .bar{max-width:44px!important}
  .pattern-table .bar-wrap{gap:6px}
}

/* ── Wide data tables that legitimately scroll horizontally ───────────────────
   .reels-table (11 cols), .comp-table (11 cols) are genuinely wider than a phone
   and live inside an overflow-x:auto wrapper, so horizontal scroll is the right
   pattern. Tighten cell padding on a phone so the reader scrolls less far, and
   make the scroll affordance obvious. */
@media(max-width:560px){
  .reels-table th,.reels-table td{padding-left:7px;padding-right:7px}
  .comp-table th,.comp-table td{padding-left:5px;padding-right:5px}
  /* A persistent thin scrollbar hints the table scrolls sideways (without it the
     reader can miss the hidden columns entirely). */
  .reels-table-wrap,.comp-table-wrap{scrollbar-width:thin}
  /* Content Themes is a 7-column table (now wrapped in a scroll container). Its
     fixed 12%-wide columns cram into an unreadable jumble on a phone, so give it
     a readable floor width and let it scroll sideways like the other wide tables
     rather than overlap headers and bars. */
  #category-table{min-width:620px}
}

/* ── Content Mix: stacked cards on a phone ────────────────────────────────────
   The Content Mix table is 8 columns wide. Horizontal scroll on a phone hid
   most of it behind a sliver of viewport, so below 560px each bucket row becomes
   a self-contained card: the bucket badge is the card header, every other cell
   stacks as a "Label  value" row (the label comes from the cell's data-label, so
   the now-hidden <thead> is no longer needed), and the "view reel" pill sits
   full-width at the foot. No sideways scroll, every figure visible. */
@media(max-width:560px){
  /* min-width:0 lets the table shrink to fit, so the wrapper's overflow-x:auto
     never triggers a scrollbar (no override needed there, which keeps the shared
     .content-mix-table-wrap scroll intact for the Content Themes table). */
  .content-mix-table{min-width:0;width:100%;font-size:.9rem}
  .content-mix-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .content-mix-table tbody,.content-mix-table tr,.content-mix-table td{display:block;width:auto}
  .content-mix-table tr{
    border:1px solid #ECE2F6;border-radius:12px;background:#fff;
    padding:6px 14px 12px;margin:0 0 12px;
  }
  .content-mix-table tr.is-winner{border-color:#C4A4E8;box-shadow:none}
  /* The reel count is already shown in the % mix confidence chip ("Proven 20
     reels"), so the standalone Reels row would just duplicate it on a phone. */
  .content-mix-table td[data-label="Reels"]{display:none}
  .content-mix-table td{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;
    padding:9px 0;border-bottom:1px solid #F4EEFA;text-align:right;
  }
  /* Left-hand label drawn from data-label. */
  .content-mix-table td[data-label]::before{
    content:attr(data-label);
    text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
    color:#7B5E9A;font-weight:700;flex:0 0 auto;
  }
  /* Bucket badge = card header: full width, no label, no divider. */
  .content-mix-table td.mix-cell-bucket{
    justify-content:flex-start;padding:4px 0 10px;border-bottom:1px solid #EFE6F8;
    margin-bottom:2px;
  }
  /* "view reel" pill = card footer: full-width tappable target, no divider. */
  .content-mix-table td.mix-cell-cta{
    justify-content:center;padding:12px 0 2px;border-bottom:0;
  }
  .content-mix-table td.mix-cell-cta .mix-view-cta{width:100%;justify-content:center}
  /* The % bar and avg-views figure already right-align inside their flex cell. */
  .content-mix-table .mix-pct{justify-content:flex-end}
  .content-mix-table .mix-pct-bar{max-width:70px}
  .content-mix-table .mix-views{justify-content:flex-end}
  .content-mix-table .mix-views strong{min-width:0}
  /* Confidence chip drops below the % figure rather than crowding the row. */
  .content-mix-table .mix-conf{width:100%;text-align:right;margin-top:4px}
}

/* ── Reel-length table column balance ─────────────────────────────────────────
   The Reel Length table is fixed-layout; on desktop the two numeric columns take
   11% each, which on a phone is too narrow for their headers ("Reels"/"Share"
   clip to "REE"/"SHA"). It lives in a wrapper that also holds other blocks, so it
   can't scroll on its own; instead rebalance the columns on a phone - pull width
   from Length + Avg views so the numeric headers fit on one line - and tighten
   the cell padding. */
@media(max-width:430px){
  .length-table th,.length-table td{padding-left:5px;padding-right:5px}
  .length-table th:nth-child(1),.length-table td:nth-child(1){width:26%}
  .length-table th:nth-child(2),.length-table td:nth-child(2),
  .length-table th:nth-child(3),.length-table td:nth-child(3){width:15%}
  .length-table th:nth-child(4),.length-table td:nth-child(4){width:25%}
  .length-table th:nth-child(5),.length-table td:nth-child(5){width:19%}
}

/* ── Head-to-Head metric row top: stack on a phone (Compare > Head to Head) ────
   Desktop lays the row header as a 3-column grid "metric | delta chip | verdict"
   (.h2h-row-top: 1fr auto 1fr). At ~320px the fixed-width centre chip plus the
   nowrap verdict pill ("Close this gap") can't share one line with the metric
   name: the metric column gets crushed to a 3-line sliver ("Reels / per / month")
   and the verdict pill is pushed clean off the card's right edge (the card clips
   it via overflow:hidden, so it vanishes entirely). Re-lay it as two rows: the
   metric name and verdict pill share the top line (name left, pill right), and
   the delta chip drops onto its own full-width line below. Now nothing clips and
   the metric reads on one line. */
@media(max-width:560px){
  .h2h-row-top{grid-template-columns:1fr auto;
    grid-template-areas:"metric verd" "delta delta";gap:6px 8px}
  .h2h-metric{grid-area:metric}
  .h2h-row-top .h2h-verd{grid-area:verd}
  .h2h-delta{grid-area:delta;justify-self:start;margin:2px 0 0}
}

/* ── Competitor card badges + nested padding on a phone ───────────────────────
   The strategy / DNA / top-reels cards label each pattern with a pill (.badge,
   shipped white-space:nowrap so it never breaks mid-phrase on desktop). A long
   label like "General / Showcase" is then wider than a ~190px phone card, so the
   card (overflow:hidden) clips the badge text and the avg-views line beside it.
   Let badges wrap inside a competitor card on a phone.

   The competitor cards also nest deeply (card > comp-detail-card > comp-sec >
   ...), and each level's desktop padding stacks up to eat ~70px of a 320px
   screen, crushing the innermost content. Trim the section padding on a phone so
   that inner content (tables, badge rows) gets the width back. */
@media(max-width:560px){
  .comp-detail-card .badge,.comp-strat-table .badge{white-space:normal}
  .comp-sec{padding-left:11px;padding-right:11px}
  /* Trim the Content Strategy bands' side padding so the tables get width back. */
  .sa-band,.cf-band,.ct-band{padding-left:13px;padding-right:13px}
  /* The content-formula table (Format / Theme / Hook / Trigger / CTA) is auto-layout,
     so the value column's min-content (badge + number + the view-reel pill) can
     force it past the card. Fix the layout and narrow the key column so the value
     cell keeps the width and wraps inside the card. */
  .cf-table{table-layout:fixed}
  .cf-table td.cf-key{width:62px}
  .cf-row1,.cf-row2{flex-wrap:wrap}
  .cf-cell .badge{word-break:break-word}
  /* The Priority Action "Model this reel" text block carries min-width:200px so
     it sits beside the reel thumb on desktop. On a ~196px phone card that min
     can't be met and the block spills past the card edge; the thumb already
     wraps below it on a phone, so let the text shrink to fit. */
  .prio-model-text{min-width:0}
}

/* ── Top Performing Hashtags grid on a phone (Posting > Hashtag Strategy) ──────
   The right-hand Hashtag column ships a 2-up grid of chips (tag on the left, its
   "avg views (×count) +lift%" on the right). At a phone width each ~165px column
   can't hold a longer tag plus its value on one line, so the chips crammed and
   the value text bled off the card's right edge. Drop to a single column so every
   chip gets the full card width (tag and value sit comfortably on one row). The
   cluster chip is already full-width, so it's unaffected. */
@media(max-width:560px){
  .hash-grid{grid-template-columns:1fr}
}

/* ── Opportunity reel rows (Compare > Untapped) on a phone ─────────────────────
   Each row is "thumb | hook | meta" (.ma-row, a flex row). The meta column
   (views stacked over the view-reel pill) is flex-shrink:0, so in a ~164px phone
   row it holds its ~75px and the thumb takes 34px, squeezing the hook to ~25px:
   the 2-line clamp then shows barely two characters. Let the row wrap and drop
   the meta onto its own line (views + pill side by side, right-aligned) so the
   hook gets the full row width and reads properly. */
@media(max-width:560px){
  .ma-row{flex-wrap:wrap}
  .ma-row-meta{flex:1 1 100%;flex-direction:row;align-items:center;
    justify-content:flex-end;gap:10px;margin-top:2px}
}

/* ── Month-of-Posts intro line on a phone (Dominate > Month of Posts) ──────────
   The intro is a flex row: calendar blurb on the left, a nowrap "Personalised to
   your data" badge on the right. The badge never shrinks, so on a ~290px phone it
   holds ~180px and squeezes the blurb into a one-word-per-line sliver with a big
   empty band beside the badge. Stack the row on a phone: badge on top, blurb full
   width below. */
@media(max-width:560px){
  .post-plan-intro{flex-direction:column-reverse;align-items:flex-start;gap:8px}
}

/* ── Content Gap comparison table (Compare > Gaps) on a phone ──────────────────
   Each gap card holds a 3-column table (Metric | You | Them). The metric column
   carries a hardcoded width:180px (desktop) and the table is auto-layout, so its
   natural width (~215px) blows past the deeply-nested ~150px phone card and the
   Them column plus the You values fall off the right edge, hidden by the wrap's
   overflow:hidden. Trim the card padding, switch the table to a fixed layout
   keyed to a third/third/third split and break long values so all three columns
   wrap inside the card with nothing clipped. */
@media(max-width:560px){
  .cgap-card{padding-left:11px;padding-right:11px}
  .cgap-scroll{padding-right:0}
  .cgap-table{table-layout:fixed}
  .cgap-label{width:34%}
  .cgap-table th,.cgap-table td{padding:7px 6px}
  /* Values wrap (long ones like "Statement / Directive"). Shrink the header type
     and kill the wide letter-spacing so "Metric" fits the narrow column whole
     (no "METRI C" break) while a long competitor handle still wraps to two lines
     rather than clipping its tail off the card. */
  .cgap-table td{font-size:12px;word-break:break-word}
  .cgap-table th{font-size:9.5px;letter-spacing:.02em;word-break:break-word}
}

/* ── Home page: fit the hero + search panel on one phone screen ────────────────
   On desktop the hero and the search panel are generously padded with large
   type and 70px-tall fields. Stacked on a phone that runs the headline, kicker,
   prompt, lead line, field, button and trust ticks well past a single viewport,
   so the Analyse button + trust ticks sit below the fold and the page has to be
   scrolled to act. Tighten every vertical gap on the home page (padding, type,
   field heights, margins) so the whole call-to-action fits above the fold. The
   footer still sits below it, which is the normal place for it. */
@media(max-width:620px){
  /* Hero: smaller padding + headline so it takes a band, not a third of the screen. */
  .hero{padding:22px 20px 20px}
  .hero h1{font-size:1.65rem;margin-bottom:8px}
  .hero-sub{font-size:.9rem}
  /* Drop the home page's generous vertical centring padding right down so the
     search panel rides up close under the hero. */
  body.home-page .page-wrap{padding-top:18px;padding-bottom:18px}
  /* Search panel: trim padding and collapse the gaps between its rows. */
  .search-panel{padding:20px 18px 18px}
  .search-kicker{margin-bottom:7px}
  .search-title{font-size:1.3rem;margin-bottom:8px}
  .search-lead{font-size:.88rem;margin-bottom:14px;line-height:1.45}
  /* Field + button: shorter than the 70px desktop targets but still a comfortable
     tap size, with a tighter gap between the stacked input and button. */
  .search-box{gap:10px}
  .handle-field{height:56px}
  .search-box input{font-size:17px}
  .analyse-inline{height:52px;font-size:18px}
  /* Trust ticks: pull them up under the button on one tight row. */
  .search-trust{margin-top:12px;gap:6px 16px}
  /* Footer: drop the big top margin so it doesn't add a tall empty band. */
  .site-footer{margin-top:28px}
}

/* ── Report card layout fixes on phones ───────────────────────────────────────
   Dense report cards that read fine on desktop crowd or bleed past the card edge
   on a narrow phone. These keep the same components but make every card line up
   neatly within the screen. */
@media(max-width:560px){
  /* Reach Boosters (Dominate): the three cards differ only in their middle stat
     strip (which reflects each lever's real data). Make the HEAD identical on
     every card by dropping the state badge onto its own line under the title,
     so the icon + title row lines up the same way across all three. */
  .lever-head{flex-wrap:wrap;row-gap:8px}
  /* Force the badge onto its own line with a zero-height flex break, then let it
     size to its own text (indented 45px to line up under the title). The old
     flex-basis:100% plus a 45px left margin summed to 100%+45px and bled the pill
     past the card's right edge (flex-shrink:0 left it unable to give the margin
     back). */
  .lever-head::after{content:"";order:2;flex-basis:100%;height:0}
  .lever-badge{order:3;margin-left:45px}

  /* Works / Underperforms + Seasonal best/worst rows: stack each reel's
     Insight / Data / Action breakdown into a single column so the labels sit
     above their text instead of fighting the body for width on a narrow screen
     (the old two-column grid is what crowded the wording). */
  .ireel-breakdown .three-layer,
  .three-layer{grid-template-columns:1fr;gap:1px 0}
  .three-layer .tl-label{padding-top:7px}
  .three-layer .tl-label:first-child{padding-top:0}
  /* Keep the thumbnail / hook / views+icon columns from crowding each other. */
  .ireel-row{column-gap:9px}
  .ireel-meta{gap:4px}
  /* The date line carries a nowrap "older - Xy ago" age chip on historical
     example reels (e.g. the Seasonal tab's January window). On a phone that
     nowrap string overran its middle column and printed straight over the
     right-aligned "views" value. Let the date line wrap so the age chip drops
     onto its own line instead of colliding with the views; clip any remainder
     so nothing can bleed into the meta column. */
  .ireel-main{overflow:hidden}
  .ireel-date{white-space:normal}

  /* Compare > Competitor Music tables: a 4-5 column table can't fit a phone, so
     reshape each row into a stacked card. The header is dropped; every cell
     becomes its own "label: value" line (the label comes from each td's
     data-label), with the Account / Track name as the card's title row. Reads
     cleanly top-to-bottom instead of a cramped, bleeding grid. */
  .audio-tracks-table{display:block;font-size:.86rem}
  .audio-tracks-table thead{display:none}
  .audio-tracks-table tbody,
  .audio-tracks-table tr,
  .audio-tracks-table td{display:block;width:100%}
  .audio-tracks-table tr{
    border:1px solid var(--border);border-radius:10px;
    padding:4px 13px;margin-bottom:10px;
  }
  .audio-tracks-table td{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:8px 0;border-bottom:1px solid #F4ECFB;text-align:right;
    overflow-wrap:break-word;word-break:break-word;
  }
  .audio-tracks-table td:last-child{border-bottom:0}
  .audio-tracks-table td::before{
    content:attr(data-label);flex:0 0 auto;text-align:left;
    font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:#7B5E9A;
  }
  /* First cell (Account / Track name) reads as the card title: full width, no
     label, its own divider under it. */
  .audio-tracks-table td:first-child{
    display:block;text-align:left;font-size:.96rem;
    padding:9px 0 10px;border-bottom:1px solid var(--border);
  }
  .audio-tracks-table td:first-child::before{display:none}
  .audio-tracks-table .comp-audio-you{margin-left:6px}

  /* Dominate > Music Plan: the avg-views meta + Listen pill share one
     right-pinned aside group (see .music-plan-track-aside), so the pill stays at
     the right edge and the views line up even when the group wraps to its own
     line. No per-element margin juggling needed here. */

  /* Reach Boosters (Dominate): on a narrow card the avg-views comparison bars
     and adoption text crowd and bleed past the edge. Trim the card padding, give
     the bar label its own line above each bar (so it isn't squeezed into a fixed
     106px column), and let every text run wrap inside the card. */
  .lever-item{padding:15px 14px}
  .lever-title{min-width:0;overflow-wrap:break-word}
  .lever-insight,.lever-action,.lever-adopt-text{overflow-wrap:break-word;word-break:break-word}
  .lever-bar-row{grid-template-columns:1fr auto;gap:4px 10px}
  .lever-bar-label{grid-column:1 / -1;text-align:left;white-space:normal;overflow:visible}
  .lever-bar-cap{margin-left:0}

  /* Seasonal tab: on a narrow screen the window header (period on the left, the
     reel-count / avg-views status on the right) was forced onto one line, so the
     two runs of text overlapped. Stack the header into its own column - period on
     top, the status row beneath - and let every long status sentence wrap instead
     of being pinned to one nowrap line. */
  .seasonal-row > div:first-child{
    flex-direction:column;align-items:flex-start!important;
    justify-content:flex-start;gap:6px;
  }
  .seasonal-row > div:first-child > div{flex-wrap:wrap}
  .sr-period{font-weight:600}
  .sr-cnt,.sr-untapped,.sr-low-coverage{white-space:normal}
  /* Group head: let the long "Worked / From last time you posted..." label wrap
     above its count chip rather than colliding with it. */
  .sr-group-head{align-items:flex-start}
  .iexample-label{white-space:normal;line-height:1.35}
  /* Action box: the 1.75 line-height let the inline reel pill ride over the lines
     around it on a phone. Tighten it and trim the padding. */
  .seasonal-action{line-height:1.6;padding:14px 14px}

  /* Monthly lens banner (Dominate > Month of Posts AND Dominate > Future): drop
     the two nested dark-purple accent rules on the left - the outer banner's
     border-left and the inner never-repeat note's border-left - so on a phone the
     box reads clean without the doubled vertical lines. */
  .lens-banner{border-left:1px solid #E4D8F4}
  .lens-track-note{border-left:0;border-radius:8px}
}

/* ── Tablet (601-780px): single-column content grids ──────────────────────────
   The left sub-tab rail folds into a top band at <=780px (see site-shell.css),
   so from 601-780px (iPad portrait ~768px) the content column is already full
   width, yet the phone fixes (<=560/600px) haven't kicked in. That left the
   Analyse two-column grids sitting side by side in a now-narrow column, cramming
   the pattern tables and clipping the reel pill in the last column. Drop them to
   one column at <=780 so each table/column gets the full tablet width and reads
   cleanly. (The base rules already collapse these at <=640; this just lifts the
   trigger up to the layout-collapse breakpoint so tablets are covered too.) */
@media(max-width:780px){
  .patterns-grid{grid-template-columns:1fr}
  .ci-grid{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* ── Month-of-Posts / Future post cards on a phone ────────────────────────────
   The white .post-card nests two levels inside the page card, so its desktop
   20px padding stacks on the outer card padding and squeezes the recipe/idea
   text on a narrow phone. Trim it (matching the .card phone padding) so the
   inner content keeps its width. */
@media(max-width:560px){
  .post-card{padding:16px 14px}
}