/* ==========================================================================
   Air Market - v11 mobile density layer, FOUNDATION
   V11-MOBILE-DENSITY-SPEC.md section 3 ("Approach") and section 4.5.

   WHAT THIS LAYER IS FOR, AND HOW IT DIFFERS FROM v9.

   v9 made the store FIT a phone: nothing overflows, nothing is unreachable,
   nothing is under 44px. It never asked what a phone screen should SHOW, and
   its own spec said so (V9-MOBILE-SPEC.md section 5: "This is the responsive
   pass, not a mobile redesign"). The measured result is a page that is
   correct and empty: 641px of a 812px first viewport spent on one listing's
   identity block, the ratings/quality/security strip below the fold, and a
   Discover page 24,932px tall because every list section stacks full
   art-bearing cards single file.

   v11 is the density pass. It is the same delivery pattern one layer up:
   sheets loaded LAST, every rule inside `@media (max-width: 720px)` or
   `@media (max-width: 480px)`, so at >= 861px this whole layer is provably
   inert and the v6 byte-identity bar (V6-SPEC.md section 17, amendment A1)
   still holds without re-auditing it.

   THE ONE THING TO KNOW BEFORE EDITING ANY v11 SHEET.

   v11 loads after v9, which loads after v6, which loads after v0-v5. Source
   order breaks ties, so a v11 rule beats a v9 rule beats a v2 rule ONLY at
   equal specificity. Every surface v11 reshapes was authored in store-v2.css
   behind the five-version prefix

     :root:is([data-ui="v2"],[data-ui="v3"],[data-ui="v4"],[data-ui="v5"])

   which is specificity (0,4,0) on its own. An unprefixed `.a-card` rule here
   is (0,1,0) and loses to it silently, at every width, with no error. That is
   not hypothetical: it is the exact failure v9's own build recorded
   (V9-MOBILE-SPEC.md section 7, deviation 2) after a tap-target task appeared
   to do nothing. So: MATCH THE PREFIX OF THE RULE YOU ARE OVERRIDING. Where
   the original is unscoped (store.css's `.detail-head`, `.stats-bar`), stay
   unscoped and let source order do its job.

   The second inherited lesson from that deviation: an inline `style=` on the
   element cannot be beaten by any external rule without `!important`, which
   this repo forbids. app.js writes inline width/height on every icon
   (iconArt, app.js:739). The two techniques that work without a specificity
   fight are already proven in store-v9-detail.css and both are used again
   here: `max-width`/`max-height` (a different property, so the used width is
   min(width, max-width) whoever supplied which half) to SHRINK a box, and
   `transform: scale()` (a different property again, and it takes the inline
   font-size of a `.glyph-center` with it) to resize an icon's paint. Only
   max-* can shrink layout; transform cannot grow a box, so anywhere v11 needs
   a BIGGER icon than app.js asked for, the parent supplies the box and the
   transform supplies the paint. See store-v11-rows.css section 2.

   SHEETS IN THIS LAYER, in load order:

     store-v11-density.css    this file: tokens, and nothing that paints
     store-v11-detail.css     spec 4.1, the listing ident band
     store-v11-rows.css       spec 4.4, the row presentation primitive
     store-v11-editorial.css  spec 4.2, Discover hero and strips
     store-v11-type.css       spec 4.5, the type and rhythm ramp

   store-v11-type.css is LAST on purpose. It is the only sheet that sets bare
   font sizes across surfaces the other three also touch, so it has to be able
   to win a tie against them; anywhere it must not win, it does not name the
   selector at all.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS.

   Declared on :root with NO media query, which looks like it contradicts this
   layer's "every rule inside a media query" contract and does not: a custom
   property that nothing reads changes no computed style on any element. The
   byte-identity bar measures computed styles of painted properties; an unread
   --v11-* declaration is inert by construction. Every CONSUMER of these tokens
   is inside a media query, in the four sheets listed above. This is the same
   arrangement store-v9-mobile.css uses for its own breakpoint documentation,
   and it is what makes the 480px tuning pass a token flip rather than a second
   set of re-declarations.

   Two numbers earn their own note:

   --v11-band-icon at 96px is Apple's, measured off apps.apple.com at 375x812
   on 2026-08-15 (a ~96px icon LEFT of the title, not above it). v9 shrank the
   same icon to 72px because it was stacked ALONE on its own line, where the
   only question was how much vertical space to spend. Beside the title it is
   free: the band's height is set by the text column, so a bigger icon costs
   nothing until it exceeds three lines of type.

   --v11-row-icon at 56px is the row-list icon. It is smaller than Apple's
   ~60px chart-row icon by four pixels for one reason: it is scaled up from
   the 34px icon appCard already renders (app.js:868), and 56/34 keeps that
   scale under 1.65. Past there the gradient glyph's own inline font-size
   starts to read as blurred on the raster-icon listings.
   -------------------------------------------------------------------------- */
:root {
  /* Listing ident band (spec 4.1). */
  --v11-band-icon: 96px;
  --v11-band-gap: 14px;

  /* Row presentation (spec 4.4). The gap is 8px rather than the 12px a row
     this size would normally take, and the icon buys its extra 4px back with
     a margin of its own (store-v11-rows.css section 2). The reason is
     arithmetic rather than taste: a ranked row spends 16px on the rank, 56px
     on the icon, 44px on the Stack chip and 54px on Get, so at a uniform 12px
     gap the name and tagline were measured with 89px to live in and every
     listing name truncated. Four gaps at 8px hand 16px of that back, which is
     the difference between "Meeting Note..." and "Meeting Notes Pro". */
  --v11-row-icon: 56px;
  --v11-row-gap: 8px;
  --v11-row-rank: 16px;
  --v11-row-pad: 10px;

  /* Type ramp (spec 4.5). AC3 caps these at 22 / 18 / 26; they ship one step
     under each cap because the measured complaint is loudness, and a cap met
     exactly is a cap with no room in it. */
  --v11-t-detail-h1: 20px;
  --v11-t-section-h2: 17px;
  --v11-t-hero-h1: 26px;
  --v11-t-hero-h1-sm: 24px;

  /* Vertical rhythm. Section gaps step down about a quarter at <= 720px; the
     ramp reads this rather than each sheet inventing its own margin. */
  --v11-section-gap: 26px;
}