/* Home — the formats: three phones, each playing a real rendered post inside the
   hero's TikTok screen, with the format rail at their right. At 820px and below the
   row becomes one phone, the three app icons sit above it and the rail stays beside
   it (design "A1 · Expanding rail", 2026-09-15, then: icons only and on top, the real
   TikTok layout, and a rail without a box).

   Everything under .fmt is built by assets/js/formats.js from window.FORMATS,
   so none of it appears in index.html. That is the same reason no unused-CSS
   tool may be pointed at this file.

   The phone IS the hero's: .phone and .phone__* come from home-hero.css (TikTok's
   chrome, measured off a real capture), so the page has one phone, not two versions
   of it. This file only adds what a format post needs on top of it: frames that
   stop at the tab bar, photo-mode dots, the rail and the app icons. */

.formats__note { margin: 14px auto 0; font-size: 13.5px; color: var(--ink-50); max-width: 60ch; }
/* The same disclosure, under the button, for the one-phone layout (see the 820px block). */
.formats__note--foot { display: none; }

/* ── Stage ──────────────────────────────────────────────────── */

.fmt {
  display: grid; grid-template-columns: minmax(0, 856px) 200px; grid-template-areas: "posts rail";
  gap: 56px; justify-content: center; align-items: start;
}
.fmt__tabs { grid-area: rail; }
.fmt__panels { grid-area: posts; min-width: 0; }
.fmt__picker { grid-area: apps; display: none; }

/* ── Rail ───────────────────────────────────────────────────── */

/* No box around it: the phones already draw a bezel each, and a bordered track
   beside them was one outline too many. The chosen format is the ink pill; the rest
   are plain labels. formats.js sets min-height to the phone's height, so the rail
   and the phone share a top and a bottom edge and the labels share out the rest. */
.fmt__tabs { display: flex; flex-direction: column; gap: 2px; }
.fmt__tab {
  flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: none;
  color: var(--ink-70); font-size: 15px; font-weight: 700; line-height: 1.25; text-align: left;
  transition: background .3s ease-out, color .3s ease-out, opacity .3s ease-out;
}
/* The chosen format opens to carry its own description, so it never floats apart
   from the control that picked it. */
.fmt__tab.is-on { flex: none; padding: 14px 18px 15px; background: var(--ink); color: var(--cream); }
.fmt__tab.is-on:hover { opacity: 1; }
.fmt__tabBlurb { display: none; margin-top: 5px; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--on-ink); }
.fmt__tab.is-on .fmt__tabBlurb { display: block; }

/* ── Posts ──────────────────────────────────────────────────── */

.fmt__panel[hidden] { display: none; }
.fmt__panel:focus-visible { outline-offset: 10px; border-radius: 16px; }

.fmt__phones {
  display: grid; grid-template-columns: repeat(3, minmax(0, 264px));
  justify-content: center; gap: clamp(16px, 2.6vw, 32px);
}
/* --phone-w is the hero's own width knob for .phone. */
.fmt__post { margin: 0; min-width: 0; --phone-w: 264px; }

/* The post plays in the feed area, from the top of the screen down to TikTok's tab
   bar, the way a real one does; cover crops a sliver off each side, not the caption.
   The selectors carry .fmt__screen to outrank home-hero.css's `.phone__screen img`. */
.fmt__screen .fmt__frame, .fmt__screen .fmt__video {
  position: absolute; left: 0; top: 0; display: block;
  width: 100%; height: calc(100% - 84 * var(--u)); object-fit: cover;
}
.fmt__screen .fmt__frame { opacity: 0; transition: opacity .5s ease; cursor: pointer; }
.fmt__screen .fmt__frame.is-on { opacity: 1; }
/* The chrome is a picture of an app, not controls: taps fall through it to the
   screen, which steps the post. */
.fmt__chrome { position: absolute; inset: 0; pointer-events: none; }

/* Photo-mode dots, one per frame, where TikTok draws them: centred under the caption,
   just above the tab bar. A video post has none. */
.fmt__dots {
  position: absolute; left: 50%; bottom: calc(90 * var(--u)); transform: translateX(-50%);
  display: flex; gap: calc(5 * var(--u)); pointer-events: none;
}
.fmt__dots i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.45); transition: background .3s ease; }
.fmt__dots i.is-on { background: #fff; }

/* The app behind the post, the hero's app card without its arrow. */
.fmt__app { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
/* An outline, not an inset shadow: an inset shadow paints under an image's pixels
   and vanishes, and App Store artwork on pure white needs the edge. */
.fmt__icon {
  width: 40px; height: 40px; flex: none; border-radius: 10px;
  object-fit: cover; background: var(--line);
  outline: 1px solid var(--line); outline-offset: -1px;
}
.fmt__text { display: grid; gap: 2px; min-width: 0; }
.fmt__name { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fmt__sub {
  font-style: normal; font-size: 13px; line-height: 1.3; color: var(--ink-50);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}

/* ── App icons (one-phone layout only) ──────────────────────── */

/* The chosen app in full colour with an ink ring (a white gap, then the ring, so it
   reads against any artwork); the others grey and faded. */
.fmt__pickset { display: flex; justify-content: center; gap: 16px; }
.fmt__pickset[hidden] { display: none; }
.fmt__pick {
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--line); opacity: .4; filter: grayscale(1);
  transition: opacity .3s ease-out, filter .3s ease-out, box-shadow .3s ease-out;
}
.fmt__pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmt__pick:hover { opacity: .6; }
.fmt__pick.is-on, .fmt__pick.is-on:hover {
  opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px var(--ink);
}

/* ── Taking one phone over ──────────────────────────────────── */

/* A visitor takes a phone over by hovering it, by tapping it or by tabbing into it, and
   formats.js stops the clock for as long as they have it — so the picture they stopped
   on is the one they keep. The arrows and the gestures are the phone's own
   (assets/js/takeover.js, .phone__arrow in home-hero.css, shared with the hero); what
   belongs to THIS section is the row of three, where taking one is also a way of saying
   never mind the other two. */
@media (min-width: 821px) {
  /* Only where there are neighbours to dim and room to grow into: below this a tab shows
     one phone, and the row is narrow enough that a phone growing would touch its
     margins. */
  .fmt__post { transition: opacity .3s ease-out; }
  .fmt__post .phone { transition: transform .3s ease-out; }
  .fmt__phones.is-dim .fmt__post { opacity: .4; }
  .fmt__phones.is-dim .fmt__post.is-hot { opacity: 1; }
  .fmt__post.is-hot .phone { transform: scale(1.04); }
}

.fmt__more { margin: clamp(30px, 3.4vw, 46px) 0 0; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .fmt__screen .fmt__frame, .fmt__dots i, .fmt__tab, .fmt__pick,
  .fmt__post, .fmt__post .phone { transition: none; }
  /* The dimming stays — with the arrows (home-hero.css) it is the only way through a
     post that never advances on its own — but nothing moves to show it. */
  .fmt__post.is-hot .phone { transform: none; }
}

/* ── Breakpoints ─────────────────────────────────────────────── */

@media (max-width: 980px) {
  .fmt { grid-template-columns: minmax(0, 1fr) 176px; gap: 24px; }
  .fmt__tab { padding-inline: 14px; font-size: 14px; }
  .fmt__tab.is-on { padding: 12px 14px 13px; }
  .fmt__tabBlurb { font-size: 13px; }
}
/* One phone, the app icons above it, the rail beside it. Three phones next to a rail
   get too small to read below about 820px, so this starts well above the phone
   breakpoint; formats.js reads the same query. The TikTok screen is taller than the
   rail at every width from 360px up, so formats.js can always stretch the rail to
   meet the phone's bottom edge. */
@media (max-width: 820px) {
  .formats .section__head { margin-bottom: var(--m-head); }
  .formats__note--head { display: none; }
  .formats__note--foot { display: block; margin: 14px auto 0; max-width: 36ch; font-size: 13px; line-height: 1.5; text-align: center; }

  .fmt {
    grid-template-columns: minmax(0, 264px) 108px; grid-template-areas: "apps apps" "posts rail";
    column-gap: 12px; row-gap: 22px;
  }
  .fmt__picker { display: block; }

  .fmt__tabs { gap: 0; }
  .fmt__tab { padding: 0 10px; border-radius: 18px; font-size: 13px; }
  .fmt__tab.is-on { padding: 9px 10px 10px; font-size: var(--m-small); }
  .fmt__tabBlurb { margin-top: 4px; font-size: var(--m-caption); line-height: 1.4; }

  .fmt__phones { display: block; }
  .fmt__post:not(.is-current) { display: none; }
  .fmt__post .phone { box-shadow: 0 16px 34px -22px rgba(25,27,30,.5); }
  /* The icons above name the app, so the card under the phone goes. */
  .fmt__app { display: none; }
}
/* Phones (design C, home-proof.css): the rail turns into a row of chips above the
   phone, the app icons move under it, and the button goes, since the sticky bar
   carries it. formats.js still sizes the rail to the phone's height with an inline
   min-height, which a row of chips has no use for: hence the !important. The row is a
   sideways scroller, so position: relative and overflow-y: hidden for the reasons in
   base.css .feats. */
@media (max-width: 720px) {
  .fmt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rail" "posts" "apps"; row-gap: 20px; }
  .fmt__tabs {
    position: relative; flex-direction: row; gap: 8px; min-height: 0 !important;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1); padding: 2px var(--gut);
  }
  .fmt__tabs::-webkit-scrollbar { display: none; }
  .fmt__tab, .fmt__tab.is-on {
    flex: none; flex-direction: row; align-items: center; min-height: 40px; padding: 0 16px;
    border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: var(--m-small);
  }
  .fmt__tab.is-on { border-color: var(--ink); background: var(--ink); color: var(--cream); }
  .fmt__tab.is-on .fmt__tabBlurb { display: none; }
  /* Still a block, as at 820px: .phone centres itself with margin-inline: auto, and a
     flex row here would shrink the figure to its content and resolve the phone's
     min(100%, …) width against nothing, collapsing it to zero. */
  .fmt__post { --phone-w: 240px; }
  .fmt__pickset { gap: 14px; }
  .fmt__pick { width: 44px; height: 44px; border-radius: 12px; }
  /* The ring's inner gap takes the grey band's colour, not the page's white. */
  .fmt__pick.is-on, .fmt__pick.is-on:hover { box-shadow: 0 0 0 2px var(--cream-2), 0 0 0 4px var(--ink); }
  .fmt__more { display: none; }
  .formats__note--foot { margin-top: 16px; }
}