/* MOBILE LAYER — post-object
   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. */

@media (max-width: 700px) {

/* [1 — the display name painted on top of the handle and pushed the verified
   badge into it. `.post__name` is `flex: none`, so inside a `.post__nameline`
   that is itself `flex: 0 1 auto; min-width: 0` the name refused to give up a
   pixel: on the first feed post the name line's box ended at x=182 while the
   name's own box ran to 189 and the badge sat at 195→211, i.e. entirely
   outside its container and 23px deep inside the handle's box (188→272). Post
   2 was the same shape, badge 196→212 inside a handle starting at 203. The
   ellipsis was declared on the name and could never fire, because a flex item
   that cannot shrink never overflows its own box — it overflows its parent's.
   The name is the elastic part of an identity line; the badge and the handle
   are fixed atoms. Say so, and the ellipsis has something to do. */
html .post__nameline > .post__name { flex: 0 1 auto; min-width: 0; }
html .post__nameline > svg { flex: none; }

/* [2 — the action row walked off the right of the screen. `.actions` is a flex
   row at `justify-content: space-between` with a 16px gap and `width: 100%`
   of a 302px column; the six affordances measure 285.6px of ink, so the four
   gaps demand 64px that do not exist and every item after the first is pushed
   past the box. On /bookmarks the row's own box ended at 366 while its last
   child, the share pair, ran to 398 — 8px beyond the 390px viewport, with the
   share glyph physically cut off at the screen edge; on a post with wider
   counts it ran to 414. /notifications only escaped it because that view caps
   `.notif__post .actions` at 420px, which treats the symptom on one route.
   The gap is a minimum, not a reservation: `space-between` already
   distributes whatever is left, so a row that is exactly as wide as its
   content still spaces itself and never overflows. The items become
   shrinkable too, so a future count that is genuinely too wide truncates
   inside the column instead of leaving it. */
html .post .actions:not(.actions--detail) { gap: 0; }
html .post .actions:not(.actions--detail) > .act { flex: 0 1 auto; min-width: auto; }
html .post .actions:not(.actions--detail) > .actions__tail { flex: none; }
html .post .actions:not(.actions--detail) .act__count { min-width: 0; overflow: hidden; }

/* [3 — not one control on the feed reached the 44x44 minimum: 120 `.act`
   buttons (34px tall), 20 `.post__more` (32x32), 20 `.post__name`, 20
   `.post__handle` (22px outer), 9 `.rt-link` (19px), 3 `.collapse__more`
   (22px outer), 2 `.composer__tool` (34x34). The optics of that row are the
   product of four rounds of review and are not up for renegotiation, so
   nothing here resizes a glyph or a pill: the hit box grows and the ink stays
   where it is. Two mechanisms, both already in the codebase — `padding-block`
   cancelled by a negative `margin-block` (app.css does this for the header
   links at 8px; this is the same trick at 44), and a transparent `::after`
   where the element's own box cannot grow without moving something.

   Where two expanded boxes would collide, only the axis with room grows. The
   collisions on this screen, measured: the action row sits 4px under 'Show
   more' and 14px above the next post's header, so it grows 4 up and 6 down;
   the bookmark and share glyphs are drawn edge to edge (ink boxes 298→332 and
   332→366), so their hit boxes can only meet at 332 and grow outwards.

   Result on the feed: every one of the 232 controls above is 44 on the block
   axis. On the inline axis the bookmark button stays at 34 and a counted
   action in the narrow reply column can sit at 38, both because the ink beside
   them leaves nothing to take. Nothing overlaps anything. */

/* Header identity links: 22px outer, 44px box, layout byte-identical. The 22
   new pixels are split 13 above and 9 below rather than evenly, because the
   room above and below the header row is not even: 13px is exactly the
   distance to the previous card's action row (its hit box ends at y=507, this
   one's outer box starts at 520), and taking more would put two buttons on
   top of each other. The 9 below spend the 4.5px of leading over the first
   body line and 4.5px more — the only residue in this file, and it only bites
   on a post whose first line opens with a link, where the link's own box
   paints later and takes the tap. A 44px box cannot fit in 39.5px of room;
   this is the least harmful place to put the difference.

   Not on the detail header: there the name and the handle are stacked on two
   lines 1px apart, so a 44px box on the name lands on the handle. Two
   controls that share a 23px column have no axis with room. */
html .post__head > .post__handle,
html .post:not(.post--detail) .post__nameline > .post__name {
  padding-block: 13px 9px; margin-block: -13px -9px;
}

/* The overflow control is a 32px square in a 40px slot with room on three
   sides — the handle can never reach x=344 and the column's right padding is
   16px, so 6px in every direction is free. */
html .post .post__more { position: relative; }
html .post .post__more::after { content: ''; position: absolute; inset: -6px; }

/* Action buttons. 34px of ink, 44px of target: 4px up (that is all there is
   under 'Show more' at y=483 when the row's own top is 487) and 6px down (the
   next post's header box starts 14px below). */
html .post .actions:not(.actions--detail) .act { padding-block: 4px 6px; margin-block: -4px -6px; }

/* The first affordance in the row can only grow left, into the avatar rail —
   which is 44px wide and, at the height of the action row, carries nothing but
   the 2px thread line. 16px of it is enough that reply clears 44 even in the
   narrow reply column, where the box measures a bare 30. */
html .post .actions:not(.actions--detail) > .act:first-child::after {
  content: ''; position: absolute; inset: 0 0 0 -16px;
}
/* Share is the last object on the line; the 16px of column padding to its
   right is dead space, so it takes 10 of it and reaches 44. Bookmark cannot:
   its neighbour's ink starts where its own ends, and an overlapping hit box
   is worse than a small one. It keeps 34 wide, 44 tall. */
html .post .actions:not(.actions--detail) .actions__tail > .act:last-child::after {
  content: ''; position: absolute; inset: 0 -10px 0 0;
}
/* Detail row: five 38x38 buttons spread across the whole column on a 86px
   pitch, so both axes have room and 3px in every direction is enough. */
html .post--detail .actions--detail .act::after {
  content: ''; position: absolute; inset: -3px;
}

/* Inline links in body copy are the one control here that cannot reach 44,
   and the honest answer is to say so rather than to fake it. A link is 19px of
   ink on a 22px line inside a paragraph set at 22px leading: 44 means 11px
   into the line above and 11px into the line below, so two links on
   consecutive lines that share any horizontal run swap taps, and a link on a
   post's first line swallows the author's name. Overlapping targets are worse
   than small ones. It takes its line box — the 1.5px of half-leading on each
   side, which costs nothing and is the whole of what is free — and stops:
   19 -> 22. Vertical padding on an inline box does not touch line layout, so
   no compensating margin is needed. (app.css already exempts inline prose
   links from the header links' hit padding for the same reason.) */
html .rt .rt-link { padding-block: 1.5px; }

/* Composer tray. Two 34px squares 2px apart: the pair can only grow outwards,
   so the first takes the empty column to its left and the second the 170px of
   empty row to its right, and they meet at x=99 without overlapping. */
html .composer__tools .composer__tool { position: relative; }
html .composer__tools .composer__tool::after { content: ''; position: absolute; inset: -5px -1px; }
html .composer__tools .composer__tool:first-child::after { left: -10px; }
html .composer__tools .composer__tool:last-child::after { right: -9px; }

/* [4 — the ALT chip measured 33 x 18.5 CSS. It is a caption, so it keeps its
   type and its scrim; it gets a 28px visual box (the round-5 note that it is
   "not a headline" is about its ink, not its target) and a 44px hit box from
   a transparent extension that stays inside the tile's own 10px inset. */
html .media .media__alt {
  display: inline-flex; align-items: center;
  min-height: 28px;
}
html .media .media__alt::after { content: ''; position: absolute; inset: -8px -5px; }

/* [5 — 'Show more' is the primary action on a truncated card and it measured
   72.5 x 10.5 CSS of ink in a 30px box whose hit area is one 22px line box. It
   becomes 44, and every one of the 14 new pixels goes upward into the
   paragraph it belongs to: below it there are only 4px before the action row,
   whose own hit box now starts at y=483, which is exactly where this one ends.
   The 16px gap above the line is optical and does not move — the padding that
   grows the box is cancelled by the margin that holds the line in place, so
   the ink stays at y=457 and the action row stays at y=487. */
html .collapse .collapse__more {
  display: inline-flex; align-items: center;
  padding-block: 18px 4px;
  margin-block: calc(var(--s-6) - 14px) -4px;
}

/* [6 — the detail body was still set at the desktop hero size, 20px on a 28px
   line, in a 358px column. That is a 29-character measure — half of the 45-75
   the line is supposed to carry, and the post ran 27 lines because of it. The
   step between the focal post and its replies is what the 20px was buying;
   at this width 17/24 against the thread's 15/22 still buys it. */
html .post--detail .rt--lg { font-size: var(--t-17); line-height: var(--lh-17); }

/* [7 — the handle truncated to 8 of 13 characters ('@casa_da_anilha' clipped by
   22px) while the row it sits in carried 24px of nothing between the stamp
   and the overflow button: an 8px spacer holding its own `min-width`, the two
   6px gaps that flank it, and the button's own 4px lead-in. A spacer exists
   to absorb what is left over, not to reserve a share of it. It keeps its
   `flex-grow` — that is what parks the button on the right edge when the row
   is short — and gives up everything else, and the handle stops shrinking so
   the elastic part of the line is the display name (see 1). The name line
   keeps a 6ch floor so a very long handle cannot erase it. */
html .post__head > .post__spacer { min-width: 0; margin-inline: calc(var(--s-3) * -1); }
html .post__head .post__more { margin-left: 0; }
html .post__head > .post__handle { flex-shrink: 0; }
html .post__head > .post__nameline { min-width: 6ch; }

/* [8 — the metrics strip wrapped and left '185 Bookmarks' alone on a second
   line while 86.9px of the first sat empty, because the row was gapped at
   24px on both axes: three counters cost 222px of ink and 48px of gap, and
   the fourth needed 127 of the 136 that were left. The gap between two pairs
   was also only 5px larger than the gap inside one, so the row read as eight
   loose words rather than four counts. 8px between pairs, 4px inside one —
   the same 4px the stamp line above binds its own separators with — puts all
   four counters on one line with 7.4px to spare. The row gap stays at zero so
   that a post that does carry a quote count wraps onto the next line of the
   same rhythm instead of opening a 46px hole. */
html .post--detail .post__metrics { flex-wrap: wrap; column-gap: var(--s-4); row-gap: 0; }
html .post--detail .post__metric { gap: var(--s-2); }

/* [9 — `.diarychip__meta` carries the `truncate` class but is `display: flex`,
   and `text-overflow` has nothing to do on a flex container: the ellipsis
   never rendered and the last run was sliced through a letterform instead
   ('Humboldt' as 'Humbolc'). Measured on the profile timeline: the title
   directly above ends in a real ellipsis at x=652 device px while the meta
   under it is cut through the stem of a 'd'. The container clips; the last
   run in it is the thing that has to ellipsise, so it is the one that gets
   the shrinkable box. */
html .diarychip .diarychip__meta { min-width: 0; }
html .diarychip .diarychip__meta > :last-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}

}

/* Appended after review of the shipped result.
   [1 continued — the fix above made the ellipsis fire, but on the wrong run.
   At 390px the feed rendered "The Stone ..." beside a complete
   "@casa_da_anilha", and "Dan Whitco..." beside a complete "@seu_juvenal": the
   line was giving its last pixels to the string the reader needs least. A
   handle is recoverable from the avatar, the name and the whole rest of the
   card; a truncated display name is the one thing on the row that cannot be
   inferred. Both runs stay shrinkable — the name must still be able to give
   way to a badge that has nowhere else to go — but the handle now shrinks
   eight times as fast, so it is what disappears first, and the name keeps a
   10ch floor so an extreme handle can never erase the person. */
@media (max-width: 700px) {
  html .post__head > .post__nameline { flex-shrink: 1; }
  html .post__nameline > .post__name { min-width: 8ch; }
  /* Shrink is weighted by basis x factor, so the factor has to be large enough
     that the two runs are not simply sharing the deficit: at 8 the name still
     lost 6.6px of a 49px deficit at 360px and rendered "The Stone Ban…". At 40
     the handle absorbs 97% of it and the name only gives way once the handle
     has hit its own 6ch floor, which is the order the reader needs. */
  html .post__head > .post__handle {
    flex: 0 40 auto; min-width: 6ch;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* Appended after review of the shipped result.
   [2 continued — `gap: 0` stopped the row overflowing at 390, but the items
   were left at `min-width: auto`, which for a flex item means its min-CONTENT
   size, so the declared `overflow: hidden` on the counts could never fire. At
   320px on /topic the tail still measured 274→342 against a 292px column and
   the share glyph was again off the screen. `min-width: 0` is what lets a
   count give ground; the 34px hit box inside it is still `flex: none`, so no
   glyph moves and only the digits are ever at risk. */
@media (max-width: 700px) {
  html .post .actions:not(.actions--detail) > .act { min-width: 0; }
}

/* And below 360px the digits alone are not enough: five counts plus six 34px
   glyphs need 292px and the column has 264. One count has to go, and it is the
   view count — it is the only number in the row that is not a thing anyone did
   deliberately, and its icon still carries the fact that the post has reach.
   The count comes back the moment there is room for it. */
@media (max-width: 360px) {
  html .post .actions:not(.actions--detail) .act--views .act__count { display: none; }
}