/* MOBILE LAYER — discovery
   Every rule below is inside a max-width:700px (or pointer:coarse) query and
   answers a measured defect found reviewing the product on a 390x844 phone.
   Desktop must not be able to see this file. See web/styles/mobile.css for the
   specificity contract. */

/* ======================================================= 1. EXPLORE'S HEADER */
/* The search field and the chip rail under it are the whole navigation of this
   screen, and neither of them was a phone control. */
@media (max-width: 700px) {
  /* [3, the field the chips are measured against] 364x42. Two short of the
     floor is still short, and this is the one control on the screen a reader
     aims at from a standing start. The header grows by exactly those two. */
  html .dx-field { height: 44px; }

  /* [3] Every chip measured 84.4x32 against a 44 floor — the primary navigation
     of Explore, 12 short, in a row whose gaps are 6. The pill keeps its height:
     a 44px lozenge in a scrolling rail reads as a second toolbar, and the row's
     lightness is what says "filter" rather than "button". The target grows past
     the ink instead.

     The rail borrows its 6px back with a negative margin first. `.dx-chips` is
     `overflow-x: auto`, and a scroll port clips hit testing exactly where it
     clips paint — without this the top half of every target is thrown away at
     the port's edge and the measurement does not move. */
  html .dx-chips { padding-top: 6px; margin-top: -6px; }
  html .dx-chip { position: relative; }
  /* Block axis only. The chips sit 6 CSS apart, so the inline axis has 3 to
     give and does not need them: 54 to 96 of measure is already past the floor,
     and two neighbours' targets must not meet. */
  html .dx-chip::after {
    content: ''; position: absolute;
    inset-block: -6px; inset-inline: 0;
  }
}

/* ====================================================== 2. EXPLORE'S SECTIONS */
@media (max-width: 700px) {
  /* [8] explore.css:902 resets every block on this screen to the 12px phone
     gutter. `.dx-sec__foot` is the one selector the reset missed, so "Show all
     12 trends" started its label on 16.5 while the trend row directly above it
     started on 12 — one block out of step, down the whole screen. */
  html .dx-sec__foot { padding-inline: var(--s-5); }

  /* [12] "See all ›" measured 76.5x30: explore.css:172 gives it 4px of block
     padding, 14 under the floor, and the -8px right margin that puts its label
     on the rail edge means there is nothing left to grow outward into. The ink
     and that alignment both stay; the block axis takes the whole 14. Seven each
     way is what the block has — the previous section's footer button ends 14
     above the head this sits in. */
  html .dx-sec__more { position: relative; }
  html .dx-sec__more::after {
    content: ''; position: absolute;
    inset-block: -7px; inset-inline: 0;
  }

  /* [found] The hero's own call to action — the one button on the screen the
     whole card is an argument for — measured 195x40. `.btn--md` is 40 by
     design and that is a desktop number; on this surface it is four short. */
  html .ex-hero__actions .btn { min-height: 44px; }

  /* [found] The people rail's Follow measured 69x34, in a card the reader has
     to reach past a horizontal scroll to get to at all. It shares its row with
     a 44px avatar and nothing else, so the five it needs are free. */
  html .dx-card__top .btn { position: relative; }
  html .dx-card__top .btn::after {
    content: ''; position: absolute;
    inset-block: -5px; inset-inline: 0;
  }

  /* [found] The hero's headline is a link to the topic and measured 178.6x37.
     It is a 31px display run set tighter than its own leading, so the four each
     way are taken back out of that leading: the target reaches 5 CSS into the
     eyebrow's line box above and 4 into the blurb's below, and neither of those
     is a target — the eyebrow is a badge and the blurb is copy. */
  html .ex-hero__title { position: relative; }
  html .ex-hero__title::after {
    content: ''; position: absolute;
    inset-block: -4px; inset-inline: 0;
  }
}

/* ======================================================== 3. THE TREND TABLE */
@media (max-width: 700px) {
  /* [9] `-webkit-line-clamp: 1` (explore.css:450) breaks at word boundaries, so
     six adjacent blurbs on a 166px track stopped at six different x — 193.5 to
     223.5 against a track edge of 225, up to 31.5 CSS of ragged air, in a
     ranked table whose entire promise is that every row ends on the same x. At
     phone measure that promise is worth more than the last whole word, so the
     clip goes back to the layout engine, which puts the ellipsis on the track
     edge in every row. Desktop keeps the clamp: explore.css is not this file's
     to write, and at 300+ of track the word boundary usually lands near enough. */
  html .dx-trend__blurb {
    display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* ========================================================== 4. THE SPARKLINE */
@media (max-width: 700px) {
  /* [7] The plot box is its two labelled gridlines (90/hr at y=256, 40/hr at
     y=351) and the two axis ticks under it, and the series terminates exactly
     on the domain at both ends — but `stroke-linecap: round` paints half a
     stroke past it. Measured: left cap 69.95 against a left axis at 70.95,
     right cap 362 against a right axis at 361. A run that ends on its own
     boundary has nothing to round off; the joins inside it still do, so the
     curve is unchanged everywhere except its two end pixels.

     The endpoint dot stays centred on the "now" axis, straddling it: that is a
     marker for an instant, not ink belonging to a range. */
  html .ex-hero__plot .dx-spark__line { stroke-linecap: butt; }
}

/* ============================================================== 5. A PROFILE */
@media (max-width: 700px) {
  /* [4] The action cluster is the most consequential row a profile has and
     every control in it measured under the floor: "…" and the envelope 36x36,
     "Following"/"Edit profile" 108x36, the sticky bar's copy 108x36. What made
     it worse is profile.css:774 — a max-width:420 block that shrinks the
     desktop's own 40 and 116 down to 36 and 108, at exactly the width where a
     finger replaces a mouse. The ink goes back to what desktop already decided
     was right, and a transparent ::after carries each target the last four. */
  html .pf-iconbtn { position: relative; width: 40px; height: 40px; }
  html .pf-iconbtn::after {
    content: ''; position: absolute; inset: -2px;
    border-radius: inherit;
  }
  html .pf-follow, html .pf-edit {
    height: 40px; min-width: 116px;
    padding-inline: var(--s-7); font-size: var(--t-15);
  }
  html .pf-edit { position: relative; }
  /* Block-only: the cluster's gap is 8, so ±2 leaves 4 CSS between the icon
     buttons' targets and the pill's and no two of them ever meet. */
  html .pf-follow::after, html .pf-edit::after {
    content: ''; position: absolute;
    inset-block: -2px; inset-inline: 0;
  }
  /* The sticky bar's copy stays a step smaller — it shares a 56px bar with the
     back arrow and the name — and takes the whole eight from its target. */
  html .pf-follow--sm {
    height: 36px; min-width: 108px;
    padding-inline: var(--s-6); font-size: var(--t-14);
  }
  html .pf-follow--sm::after { inset-block: -4px; }

  /* [4, the back arrow] 36x36 in a box that profile.css:63 pulls to x=2 with
     margin-left:-11px — deliberately, so the arrow's *stroke* lands on the same
     x as the avatar, the name, the bio and the counts. That alignment is right
     and it stays, which means there is no room on the left: the target grows
     rightward off that edge instead. 44x44 from x=2, centred on the bar's 56,
     ending 4 CSS short of the name. */
  html .pf-top__back { position: relative; }
  html .pf-top__back::after {
    content: ''; position: absolute;
    top: 50%; left: 0; width: 44px; height: 44px;
    transform: translateY(-50%);
  }

  /* [5] "291 Following" and "1,840 Followers" are links — the two destinations
     a profile exists to offer — and they measured 13.5 CSS of ink in a 22 CSS
     line box. Eleven each way is exactly what the block has: the meta line ends
     12 above and the tab strip starts 12 below, so 44 lands with a pixel of
     clearance on each side and nothing on the page moves. Karma is a span, not
     a link, and does not get a target it cannot use. */
  html .pf-count { position: relative; }
  html .pf-count:not(.pf-count--plain)::after {
    content: ''; position: absolute;
    inset-block: -11px; inset-inline: 0;
  }

  /* [found] The bio's URL is the only link on the meta line and measured
     197.5x20. Twelve each way is 44 and lands on the bio's bottom edge above
     and inside `.pf-meta`'s second row below — neither of which is a target, so
     nothing is taken from anything. */
  html .pf-meta__link { position: relative; }
  html .pf-meta__link::after {
    content: ''; position: absolute;
    inset-block: -12px; inset-inline: 0;
  }
}

/* [4, the narrow end] Giving the cluster its four pixels back costs width, and
   there is a width at which it stops fitting. The row is the 96px avatar, a
   12px gap and then 40 + 8 + 40 + 8 + 116 of controls inside a 24px gutter:
   344 CSS is the exact viewport where that comes out even, and below it the
   pill used to push the document 13 CSS sideways. Under 344 the pill gives up
   its floor width and four of its side padding — it keeps all 40 of its height,
   which is the whole point of the block above. */
@media (max-width: 344px) {
  html .pf-follow, html .pf-edit { min-width: 0; padding-inline: var(--s-5); }
}