/* Air Market - v6 creator surfaces (W4).  Paired JS: assets/js/v6/creator.js.
   Every rule is scoped under :root[data-v6="on"] - see store-v6-core.css for the
   layer-flag contract. Tokens only, cursors via var(--cur-*), no hardcoded hex,
   no U+2014.

   Two looks share one route (#/creator/:handle):
     .v6-storefront  claimed OR seeded - the showcase: head, featured hero, work
                     tabs, recommends shelf, way of work, channels strip
     .v6-index       neither - name, count, the claim note, the grid, rating
   The storefront is a campaign landing page reached from a phone (V6-SPEC.md
   §14, restated by specs/020-creator-showcase: it is reached from a bio link, so
   narrow IS the primary viewport). Its narrow-width layout is therefore real,
   not an afterthought: the banner shrinks, the meta stacks, the tabs become a
   horizontal scroller, the featured hero stacks with a full-width CTA, the
   channel chips drop their labels to an icon row, and the recommends shelf
   becomes one column. */

/* ------------------------------------------------------------------ shared */

:root[data-v6="on"] .v6-creator { padding-bottom: var(--space-48); }

:root[data-v6="on"] .v6-creator .card-grid { margin-top: var(--space-16); }

/* Aggregate rating always prints its denominator; the star is the only glyph.
   It is never teal - teal is the verified mark and nothing else. */
:root[data-v6="on"] .v6-agg-rating {
  margin: var(--space-16) 0 0;
  color: var(--text-2);
  font-size: 14px;
}

/* ------------------------------------------------------------- storefront */

:root[data-v6="on"] .v6-storefront { max-width: 980px; margin: 0 auto; }

/* Banner: a creator-supplied image or, when none, the wash below - built from
   the colours of their own listings, never a photograph or a screenshot we
   picked for them. A creator with nothing published keeps the flat tint. */
:root[data-v6="on"] .v6-sf-banner {
  position: relative;
  height: 168px;
  border-radius: var(--card-r);
  background: var(--card-surface);
  border: 1px solid var(--hair);
  overflow: hidden;
}
:root[data-v6="on"] .v6-sf-banner img { width: 100%; height: 100%; object-fit: cover; }

/* THE FALLBACK COVER (2026-08-26). With no uploaded banner the box used to be an
   empty tinted rectangle with a hairline round it, which reads as an image that
   failed to load - and on a seeded page, where nobody has uploaded anything,
   that empty box was the only state anyone ever saw.

   It is now the mesh wash every profile page worth copying falls back to
   (Substack, Patreon, Uxcel, Posh, Relevance AI - checked on Mobbin), with one
   difference: the three blobs are coloured by the creator's OWN listing
   gradients, handed in as --cv-1..3 by coverWash() in creator.js. So it is
   quiet, it is theirs, and there is no invented photograph or tiled screenshot
   anywhere in it.

   Kept deliberately pale. This band sits directly above the real cards, and the
   moment it competes with them it has stopped being a backdrop. */
:root[data-v6="on"] .v6-sf-cover {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: var(--card-surface);
  background-image:
    radial-gradient(108% 128% at 12% 14%, color-mix(in oklab, var(--cv-1) 42%, transparent), transparent 62%),
    radial-gradient(94% 116% at 84% 4%, color-mix(in oklab, var(--cv-2) 34%, transparent), transparent 60%),
    radial-gradient(126% 132% at 58% 118%, color-mix(in oklab, var(--cv-3) 30%, transparent), transparent 66%);
}

/* One flat highlight along the top edge so the band reads as lit rather than
   printed, the same trick the card art uses. */
:root[data-v6="on"] .v6-sf-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), transparent 42%);
  pointer-events: none;
}

:root[data-v6="on"] .v6-sf-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  margin: calc(-1 * var(--space-40)) var(--space-24) 0;
  position: relative;
}

/* Avatar overlaps the banner, framed against the content background. */
:root[data-v6="on"] .v6-sf-av.avatar {
  width: 88px;
  height: 88px;
  font-size: 30px;
  flex: none;
  border: 3px solid var(--content-bg);
  box-shadow: var(--shadow-sm);
}

:root[data-v6="on"] .v6-sf-meta { flex: 1; padding-top: var(--space-48); min-width: 0; }

:root[data-v6="on"] .v6-sf-nameline {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
:root[data-v6="on"] .v6-sf-name { font-size: 24px; font-weight: 800; margin: 0; }
:root[data-v6="on"] .v6-sf-handle { color: var(--text-3); font-size: 14px; margin: 2px 0 0; }
:root[data-v6="on"] .v6-sf-bio { color: var(--text); font-size: 15px; margin: var(--space-8) 0 0; max-width: 60ch; }

/* The headline (020 S1) sits where the bio used to and is deliberately one step
   up from it in weight: it is the line a visitor reads before deciding whether
   to read anything else. The bio it replaced is not gone, it is in the About
   tab, where a paragraph belongs. */
:root[data-v6="on"] .v6-sf-headline {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  margin: var(--space-8) 0 0;
  max-width: 52ch;
}

/* The verified mark: exactly three states, and one of them (community) renders
   nothing at all - it never reaches this stylesheet. Teal is the verified
   colour and is used nowhere else. Official is a distinct claim, so a distinct
   (non-teal) colour. */
:root[data-v6="on"] .v6-sf-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
:root[data-v6="on"] .v6-sf-mark--verified { color: var(--air-teal); }
:root[data-v6="on"] .v6-sf-mark--official { color: var(--link); }

:root[data-v6="on"] .v6-sf-links {
  margin: var(--space-8) 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-8);
  font-size: 14px;
}
:root[data-v6="on"] .v6-sf-links a { color: var(--link); cursor: var(--cur-pointer); }
:root[data-v6="on"] .v6-sf-links .sep { color: var(--hair); }

/* Channel chips (020 S1). A chip is a link with the platform's own mark on it;
   an unrecognized host stays the plain text link beside them, which is why this
   row holds both shapes at once. The chip is neutral - it is a way to reach the
   creator elsewhere, not a claim about them - so nothing here is teal, and the
   mark takes the text colour rather than a brand colour we do not own. */
:root[data-v6="on"] .v6-ch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--space-12) 5px var(--space-8);
  border: 1px solid var(--hair);
  border-radius: var(--radius-full);
  background: var(--card-surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: var(--cur-pointer);
}
:root[data-v6="on"] .v6-sf-links .v6-ch { color: var(--text-2); }
:root[data-v6="on"] .v6-ch:hover,
:root[data-v6="on"] .v6-ch:focus-visible { border-color: var(--color-border-strong); color: var(--text); }
:root[data-v6="on"] .v6-ch svg { width: 16px; height: 16px; flex: none; fill: currentColor; }

:root[data-v6="on"] .v6-sf-counts {
  margin: var(--space-12) 0 0;
  color: var(--text-2);
  font-size: 14px;
}

/* Follow and Share, one pair, one weight. Share is not the louder of the two: it
   copies a link, which is a small thing, and the page's own emphasis belongs to
   the creator's work. */
:root[data-v6="on"] .v6-sf-actions {
  flex: none;
  align-self: flex-start;
  margin-top: var(--space-48);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Follow is a plain secondary button. It is emphatically NOT teal (that would
   read as a verified mark) and carries no follower count - v6 invents none. */
:root[data-v6="on"] .v6-sf-follow {
  flex: none;
  padding: 7px 18px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--content-bg);
  color: var(--text);
  font: 600 14px/1 var(--font);
  cursor: var(--cur-pointer);
}
:root[data-v6="on"] .v6-sf-follow.is-following {
  background: var(--pill);
  border-color: var(--pill);
  color: var(--text-2);
}

/* Share sits beside Follow in the same weight and, like Follow, is not teal. */
:root[data-v6="on"] .v6-sf-share {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px var(--space-16);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--content-bg);
  color: var(--text);
  font: 600 14px/1 var(--font);
  cursor: var(--cur-pointer);
}
:root[data-v6="on"] .v6-sf-share:hover { background: var(--pill); }
:root[data-v6="on"] .v6-sf-share svg { width: 18px; height: 18px; fill: currentColor; }

/* The featured hero (020 S2). The campaign pin used to be a 64px icon in a row -
   a directory entry wearing an eyebrow - and .v6-sf-pin* went with it. This is
   the shareable unit now: cover media beside the creator's own words, at the
   size of a thing somebody would screenshot. The CTA inside it is the unchanged
   v5 split button, styled by store-v5.css, and nothing here touches it. */
:root[data-v6="on"] .v6-ft {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-24);
  margin: var(--space-32) var(--space-24) 0;
  padding: var(--space-20);
  border: 1px solid var(--hair);
  border-radius: var(--card-r);
  background: var(--card-surface);
}
:root[data-v6="on"] .v6-ft-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--pill);
}
:root[data-v6="on"] .v6-ft-media img,
:root[data-v6="on"] .v6-ft-media svg,
:root[data-v6="on"] .v6-ft-media .art-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
:root[data-v6="on"] .v6-ft-video { width: 100%; height: 100%; cursor: var(--cur-pointer); }
:root[data-v6="on"] .v6-ft-body { min-width: 0; }
:root[data-v6="on"] .v6-ft-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
}
:root[data-v6="on"] .v6-ft-name { font-size: 22px; font-weight: 800; margin: var(--space-4) 0 0; }
:root[data-v6="on"] .v6-ft-sub { color: var(--text-2); font-size: 15px; margin: var(--space-4) 0 0; }
/* The pinned copy is the creator talking, so it is set as a quote: indented off
   a hairline rule, no quotation marks drawn for them, no colour of ours. */
:root[data-v6="on"] .v6-ft-quote {
  margin: var(--space-12) 0 0;
  padding-left: var(--space-12);
  border-left: 2px solid var(--hair);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  font-style: italic;
  max-width: 46ch;
}
:root[data-v6="on"] .v6-ft-cta { margin-top: var(--space-16); }

:root[data-v6="on"] .v6-sf-tabs-wrap { margin: var(--space-32) var(--space-24) 0; }
:root[data-v6="on"] .v6-sf-tabs-wrap .card-grid { margin-top: var(--space-16); }

/* Way of work (020 S5): the About tab is now long-form authored text rendered
   from a markdown subset, so it needs the type rules a page of prose needs. The
   subset stops at h3 - the page's h1 is the creator's name - and carries no
   images, so there is nothing here for a figure. */
:root[data-v6="on"] .v6-sf-about { max-width: 60ch; color: var(--text); font-size: 15px; line-height: 1.6; }
:root[data-v6="on"] .v6-sf-about p { margin: 0 0 var(--space-12); }
:root[data-v6="on"] .v6-sf-about .v6-sf-links { font-size: 15px; }
:root[data-v6="on"] .v6-sf-about-bio { color: var(--text); font-size: 16px; }
:root[data-v6="on"] .v6-sf-about h3 {
  font-size: 15px;
  font-weight: 700;
  margin: var(--space-20) 0 var(--space-8);
}
:root[data-v6="on"] .v6-sf-about ul,
:root[data-v6="on"] .v6-sf-about ol { margin: 0 0 var(--space-12); padding-left: var(--space-20); }
:root[data-v6="on"] .v6-sf-about li { margin: 0 0 var(--space-4); }
:root[data-v6="on"] .v6-sf-about a { color: var(--link); cursor: var(--cur-pointer); }
:root[data-v6="on"] .v6-sf-since { color: var(--text-3); font-size: 14px; }

/* ------------------------------------------------------- S4 recommends shelf */

/* The creator's curation of other people's work. IT MUST NOT LOOK LIKE US
   TALKING: no teal (that is the verified colour), no mark, no badge, no tinted
   panel. The only new ink on the page is a hairline and a quote, because the
   note under each card is a person's sentence and it should read like one. */
:root[data-v6="on"] .v6-recs { margin: var(--space-40) var(--space-24) 0; }
:root[data-v6="on"] .v6-recs-intro {
  color: var(--text-2);
  font-size: 15px;
  margin: var(--space-4) 0 0;
  max-width: 60ch;
}
:root[data-v6="on"] .v6-recs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-20);
  margin-top: var(--space-16);
}
:root[data-v6="on"] .v6-recs-item { min-width: 0; display: flex; flex-direction: column; }
:root[data-v6="on"] .v6-recs-note {
  margin: var(--space-8) 0 0;
  padding-left: var(--space-12);
  border-left: 2px solid var(--hair);
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}
:root[data-v6="on"] .v6-recs-note cite {
  display: block;
  margin-top: var(--space-4);
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}
:root[data-v6="on"] .v6-recs-note cite::before { content: "- "; }

/* ------------------------------------------------------- S6 channels footer */

/* The claim, as the last thing on the page (2026-08-26). It replaces the "Find
   <name> elsewhere" strip that used to sit here repeating the head's channel
   chips: one copy of a link row is the row, two is a page repeating itself. The
   claim is addressed to one reader and gets the position that suits a line only
   one reader will act on - after the work, above nothing. Rule, whitespace, no
   box. */
:root[data-v6="on"] .v6-claim-foot {
  margin: var(--space-40) var(--space-24) 0;
  padding-top: var(--space-20);
  border-top: 1px solid var(--hair);
}
:root[data-v6="on"] .v6-claim-foot .v6-claim-fine { margin: 0; }

/* Index tier: the same foot, inside that tier's own padded column. */
:root[data-v6="on"] .v6-index .v6-claim-foot { margin-left: 0; margin-right: 0; }

/* -------------------------------------------------------------- index tier */

:root[data-v6="on"] .v6-index { max-width: 980px; margin: 0 auto; padding: var(--space-24); }
:root[data-v6="on"] .v6-index-name { font-size: 26px; font-weight: 800; margin: 0; }
:root[data-v6="on"] .v6-index-count { color: var(--text-2); font-size: 15px; margin: var(--space-4) 0 0; }

/* The identity header (redesign 2026-08-23): the storefront's head shape
   without the banner. The avatar is the creator's real fetched branding
   (assets/js/creator-media.js, provenance in the manifest) or initials -
   never synthesized art. */
:root[data-v6="on"] .v6-index-head {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-8);
}
:root[data-v6="on"] .v6-index-av.avatar {
  border: 1px solid var(--hair);
  box-shadow: none;
}
:root[data-v6="on"] .v6-index-meta { padding-top: 0; }
:root[data-v6="on"] .v6-index-meta .v6-agg-rating { margin-top: var(--space-4); }
:root[data-v6="on"] .v6-index-listings { margin-top: var(--space-32); }

/* The bordered claim panel (.v6-claim-note / -i / -body / -btn) lived here. Both
   pages that rendered it - the unclaimed creator page and the listing page - say
   the same sentence as fine print now (.v6-claim-fine, below), so the box and
   its pill button are gone rather than kept warm for nobody. */

/* The claim, as fine print (2026-08-23). It was a bordered strip with a pill
   button; a line addressed to one person - the creator - should not outweigh
   the work of the page. Muted, one size below the meta line, sitting inside the
   identity block, with the claim itself an inline link that only firms up on
   hover. Emphasis is earned with type and whitespace, never a box (house rule
   2026-07-30). */
:root[data-v6="on"] .v6-claim-fine {
  margin: var(--space-8) 0 0;
  max-width: 68ch;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}
:root[data-v6="on"] .v6-claim-link {
  color: var(--text-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--hair);
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: var(--cur-pointer);
}
:root[data-v6="on"] .v6-claim-link:hover,
:root[data-v6="on"] .v6-claim-link:focus-visible {
  color: var(--text);
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------- #/creators index */

:root[data-v6="on"] .v6-dir { max-width: 1080px; margin: 0 auto; padding: var(--space-24); }
:root[data-v6="on"] .v6-dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-12);
  margin: var(--space-16) 0 var(--space-32);
}

/* Creator chips - the shared V6.card.creator renderer (core.js owns the markup,
   store-v6-core.css was committed empty, so the presentation lives here on the
   surface that first needs it). */
:root[data-v6="on"] .v6-card-creator {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--hair);
  border-radius: var(--card-r);
  background: var(--card-surface);
  color: var(--text);
  cursor: var(--cur-pointer);
  text-decoration: none;
}
:root[data-v6="on"] .v6-card-creator:hover { border-color: var(--color-border-strong); }
:root[data-v6="on"] .v6-card-av.avatar { flex: none; }
:root[data-v6="on"] .v6-card-who { font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root[data-v6="on"] .v6-card-mark { font-size: 12px; font-weight: 700; white-space: nowrap; }
:root[data-v6="on"] .v6-card-mark--verified { color: var(--air-teal); }
:root[data-v6="on"] .v6-card-mark--official { color: var(--link); }
:root[data-v6="on"] .v6-card-n { margin-left: auto; color: var(--text-3); font-size: 13px; white-space: nowrap; }

/* The work-collage card (redesign 2026-08-23, V6.card.creator's opts.covers
   variant). The cover strip is the creator's own listing art - the same
   shotSVG/media the listing cards draw - so the card shows their actual work.
   A creator with no listings gets the plain tinted strip (is-empty), never
   synthesized art. */
/* Doubled class on purpose: store-v6-collection.css also styles
   .v6-card-creator (its inline chip) and loads after this file, so the
   variant needs to win on specificity, not on source order. */
:root[data-v6="on"] .v6-card-creator.v6-card-creator--covers {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  font-weight: 400;
}
:root[data-v6="on"] .v6-card-covers {
  display: flex;
  gap: 2px;
  height: 76px;
  background: var(--pill);
}
:root[data-v6="on"] .v6-card-cover {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  display: block;
  position: relative;
}
:root[data-v6="on"] .v6-card-cover .art-fill,
:root[data-v6="on"] .v6-card-cover img,
:root[data-v6="on"] .v6-card-cover svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
:root[data-v6="on"] .v6-card-crow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0 var(--space-12) var(--space-12);
}
:root[data-v6="on"] .v6-card-creator--covers .v6-card-av {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  margin-top: -14px;
  border: 2px solid var(--card-surface);
  background: var(--card-surface);
  position: relative;
}
:root[data-v6="on"] .v6-card-creator--covers .v6-card-av.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
:root[data-v6="on"] .v6-card-cmeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--space-8);
}
:root[data-v6="on"] .v6-card-creator--covers .v6-card-who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
:root[data-v6="on"] .v6-card-creator--covers .v6-card-n {
  margin-left: 0;
  font-size: 12px;
  margin-top: 1px;
}

/* --------------------------------------------------------- listing hero line */

/* The v6 creator line gains an avatar when the creator is claimed; the badges
   are the shipped ones so the line reads the same under v0-v5 (where this
   markup never renders - the hook returns "" and app.js's original .dev line
   shows instead). */
:root[data-v6="on"] .dev .dev-av.avatar { margin-right: 6px; vertical-align: middle; }

/* ------------------------------------------------------------- narrow width */

@media (max-width: 720px) {
  :root[data-v6="on"] .v6-sf-banner { height: 108px; }
  /* Meta stacks under the avatar; Follow and Share drop below the name. */
  :root[data-v6="on"] .v6-sf-head { flex-direction: column; gap: var(--space-8); margin-top: calc(-1 * var(--space-32)); }
  :root[data-v6="on"] .v6-sf-av.avatar { width: 68px; height: 68px; font-size: 24px; }
  :root[data-v6="on"] .v6-sf-meta { padding-top: 0; }
  /* Tabs become a horizontal scroller rather than wrapping. */
  :root[data-v6="on"] .v6-sf-tabs-wrap [role="tablist"] {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  :root[data-v6="on"] .v6-sf-tabs-wrap [role="tab"] { white-space: nowrap; }
  /* The featured hero stacks - media over copy - and its CTA goes full width.
     This is the shape the page is USUALLY read in: it is reached from a bio link
     on a phone, so the stacked hero is the design and the two-column one is the
     variant that gets the extra room. */
  :root[data-v6="on"] .v6-ft { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); padding: var(--space-16); }
  :root[data-v6="on"] .v6-ft-name { font-size: 20px; }
  :root[data-v6="on"] .v6-ft-cta .cta-split { width: 100%; }
  :root[data-v6="on"] .v6-ft-cta .cta-primary { flex: 1; justify-content: center; }
  /* Channel chips KEEP THEIR WORDS at narrow widths (2026-08-26). They used to
     collapse to bare icons here because the foot of the page repeated them in
     full; that strip is gone, so hiding the labels now would leave a phone
     reader with a row of unlabelled glyphs and no second chance at them. The row
     wraps instead - it is allowed to be two lines. */
  :root[data-v6="on"] .v6-sf-head .v6-ch { padding: 5px 9px; font-size: 12px; }
  /* One recommendation per row: the note under each card is the content, and two
     narrow columns cut a sentence into a column of syllables. */
  :root[data-v6="on"] .v6-recs-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
  :root[data-v6="on"] .v6-sf-tabs-wrap,
  :root[data-v6="on"] .v6-ft,
  :root[data-v6="on"] .v6-recs,
  :root[data-v6="on"] .v6-claim-foot { margin-left: var(--space-16); margin-right: var(--space-16); }
  :root[data-v6="on"] .v6-sf-head { margin-left: var(--space-16); margin-right: var(--space-16); }
  /* Follow and Share keep their row rather than stacking; two small buttons fit. */
  :root[data-v6="on"] .v6-sf-actions { margin-top: var(--space-4); }
  /* Index tier: the identity header keeps its row shape but shrinks with the
     storefront avatar; the claim strip's button wraps under the sentence. */
  :root[data-v6="on"] .v6-index-head { gap: var(--space-12); }
  :root[data-v6="on"] .v6-index-name { font-size: 22px; }
}