/* ============================================================
   solutions/individuals.html — #tags (bar-individuals-tags.md).
   Structure from feeld.co's "Explore your desires in a judgement-free
   place": a centred two-line hook with two small inline icons, a
   centred phone playing the real app in front, and two full-bleed rows
   of pill tags passing behind the phone that drift in opposite
   directions as the page scrolls (js/iv-tags.js). Adapted to the house
   system: white ground, the page's h2 rank, the homepage #your-way chips
   (lime/pink/blue tints) on round-1-size capsules for the pills, the §3.3 icon ink
   (green-800) for the two icons.

   The phone is the K-12 #in-class phone (css/schools.css .ks-phone):
   dark bezel, pale rim, side buttons, no dynamic island, concentric
   screen radius, a 9:41 status bar, the site's scene toggle below the
   frame. Its status bar is white here because the recording is white.
   ============================================================ */

.iv-tags {
  /* phone ≈ 19% of 1440 (271 × 612px, feeld's 273 × 600); height derives
     from the recording. Sized so nav + 4rem + heading + gap + phone fit a
     1440 × 900 window when the anchor lands (§5.3 padding kept). */
  --ivt-phone-w: 15rem;
  --ivt-fade: 12.5vw;        /* feeld's edge fade: 180px at 1440, the outer pills dim into white */
  --ivt-bezel: var(--sp-4);
  --ivt-bar-h: 2.4rem;
  --ivt-phone-h: calc(2 * var(--ivt-bezel) + var(--ivt-bar-h) + (var(--ivt-phone-w) - 2 * var(--ivt-bezel)) * 1388 / 640);
  --ivt-stage-top: 0px;
  padding-block: var(--sp-40);   /* §5.3 plain section */
  scroll-margin-top: var(--nav-h);
  overflow: clip;            /* rows are wider than the viewport: never a page scroll */
  text-align: center;
  background: var(--_theme---page--background);
}

/* ---- 1. The hook: two lines, two inline icons in the one accent ---- */
.iv-tags__title { margin-inline: auto; color: var(--color--grey-1000); }
.iv-tags__title > span { display: block; }   /* one clause per line */
.iv-tags__nw { white-space: nowrap; }   /* each icon travels with its neighbouring word */
.iv-tags__icon {
  display: inline-block;
  width: 0.72em;             /* DM Sans cap height ≈ 0.7em */
  height: 0.72em;
  vertical-align: -0.02em;   /* sits on the baseline, top at cap height */
  color: var(--color--brand-600);   /* the brand green (button family, §9.5), 3.77:1 on white; stroke 2.4/24 ≈ the 500 stems */
}

/* ---- 2–3. Stage: full-bleed rows behind, the phone in front ---------- */
.iv-tags__stage {
  position: relative;
  margin-top: var(--sp-12);
  /* bottom = the toggle under the frame: its --sp-8 gap + its own
     --sp-20 height (css/site.css .scene__toggle) */
  padding-block: var(--ivt-stage-top) calc(var(--sp-8) + var(--sp-20));
}

.iv-tags__rows {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: calc(var(--ivt-stage-top) + var(--ivt-phone-h) * 0.36);   /* crosses the phone's upper-middle */
  pointer-events: none;
  /* §5: fade to the page at both viewport edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ivt-fade), #000 calc(100% - var(--ivt-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--ivt-fade), #000 calc(100% - var(--ivt-fade)), transparent 100%);
}
.iv-tags__row {
  --ivt-drift: 0px;
  display: flex;
  justify-content: center;
  gap: var(--sp-12);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  /* centred on the viewport (block context: % = the full-bleed width),
     then moved by scroll (js/iv-tags.js) */
  margin-left: 50%;
  transform: translate3d(calc(-50% + var(--ivt-drift)), 0, 0);
  will-change: transform;
}
.iv-tags__row + .iv-tags__row { margin-top: var(--sp-12); }
.iv-tags__pill {
  /* size: round 1 (user ruling) — body-l / 500 capsule, ≈ feeld's 22px
     pill; colour: the homepage #your-way chip tints (below), no border */
  flex: none;
  padding: calc(var(--sp-4) + var(--space-1)) var(--sp-16);   /* 0.6rem: ≈50px tall at 1440 on the §4.1 1.3 line */
  border-radius: var(--radius-full);
  background: var(--_theme---pills--pill-background);
  font-size: var(--fs-body-l);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--_theme---pills--pill-text);
  white-space: nowrap;
}

/* The phone (= .ks-phone) */
.iv-tags__phone {
  --screen-r: calc(var(--radius--2xl) - var(--ivt-bezel));   /* concentric: frame radius − bezel */
  position: relative;
  z-index: 2;
  width: var(--ivt-phone-w);
  margin-inline: auto;
  padding: var(--ivt-bezel);
  border-radius: var(--radius--2xl);
  background: var(--color--grey-1000);
  box-shadow: 0 0 0 0.12rem var(--color--grey-200), var(--shadow--card);   /* rim + the §6 card shadow (no large floor rung) */
  text-align: left;
}
.iv-tags__phone::before,
.iv-tags__phone::after {
  content: '';
  position: absolute;
  width: 0.2rem;
  background: var(--color--grey-1000);
}
.iv-tags__phone::before {   /* action + volume */
  left: -0.3rem;
  top: 16%;
  height: 1.6rem;
  border-radius: var(--radius--xs) 0 0 var(--radius--xs);
  box-shadow: 0 2.8rem 0 0 var(--color--grey-1000), 0 5.6rem 0 0 var(--color--grey-1000);
}
.iv-tags__phone::after {    /* power */
  right: -0.3rem;
  top: 24%;
  height: 4rem;
  border-radius: 0 var(--radius--xs) var(--radius--xs) 0;
}
.iv-tags__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--ivt-bar-h);
  padding-inline: var(--sp-16) var(--sp-12);
  border-radius: var(--screen-r) var(--screen-r) 0 0;
  background: var(--color--white);   /* = the recording's own white */
  font-size: max(var(--fs-label), 11px);
  font-weight: 500;
  color: var(--color--grey-1000);
}
.iv-tags__status { width: 2.6rem; height: auto; }
.iv-tags__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 640 / 1388;
  border-radius: 0 0 var(--screen-r) var(--screen-r);
  background: var(--color--white);
}
.iv-tags__phone .scene__toggle {
  top: calc(100% + var(--sp-8));
  right: 0;
  bottom: auto;
}
.iv-tags__phone:hover .scene__toggle,
.iv-tags__phone .scene__toggle.is-user-paused { --_toggle-reveal: 1; }
.iv-tags__phone:focus-within .scene__toggle { --_toggle-reveal: 1; transition-duration: 0s; }
.iv-tags__phone .scene__toggle:focus-visible { outline: 2px solid var(--color--accent); outline-offset: 3px; }

/* ---- 7. Phones: the hook flows and balances; phone ≥ 220px, centred;
   the rows still run full-bleed behind it ---------------------------- */
@media (max-width: 640px) {
  /* phone ≈ feeld's mobile frame (~195px): 195 at 375, 176 at 320, so
     the strips beside it hold a whole short pill (js/iv-tags.js parks one
     on each side, inside the clear area); a fixed 44px fade; tighter
     capsule sides, same type */
  .iv-tags { --ivt-phone-w: clamp(176px, 52vw, 200px); --ivt-fade: 44px; }
  .iv-tags__title > span { display: inline; }
  .iv-tags__pill { padding-inline: var(--sp-8); }
}
/* the narrowest phones: keep "at your own" whole, so the line breaks as
   "… you love, / at your own / [clock] pace." (layout only, type unchanged) */
@media (max-width: 359px) {
  .iv-tags__phrase { white-space: nowrap; }
  .iv-tags { --ivt-fade: 36px; }   /* 320: the strips are 72px; keep the parked words clear of the fade */
}

/* Reduced motion: js/iv-tags.js applies only the static resting offset,
   no scroll drift. */
@media (prefers-reduced-motion: reduce) {
  .iv-tags__row { will-change: auto; }
}

/* Tints (user ruling, round 2): the homepage #your-way chip palette
   (css/site.css .scatter__card:nth-child(3n+…)) — lime, pink and blue, each
   100 surface on its own 1000 ink (§3.2), set through the pills slots
   (§3.3). The order is varied per row in the markup and offset between
   the two rows. */
.iv-tags__pill[data-tint='lime'] { --_theme---pills--pill-background: var(--color--lime-100); --_theme---pills--pill-text: var(--color--lime-1000); }
.iv-tags__pill[data-tint='pink'] { --_theme---pills--pill-background: var(--color--pink-100); --_theme---pills--pill-text: var(--color--pink-1000); }
.iv-tags__pill[data-tint='blue'] { --_theme---pills--pill-background: var(--color--blue-100); --_theme---pills--pill-text: var(--color--blue-1000); }

/* KO (§4.1.2): Hangul heading leading/tracking, keep-all, and one clause
   per line at every width (each line is short enough to stay whole). */
:lang(ko) .iv-tags__title {
  line-height: var(--lh-heading);
  letter-spacing: var(--kern-heading);
  word-break: keep-all;
}
:lang(ko) .iv-tags__title > span { display: block; }
/* KO's 1.2 heading line makes the two lines ~23px taller at 1440; the
   phone gives that back (260px, 18%) so heading + phone still fit a
   1440 × 900 window on anchor landing. */
@media (min-width: 641px) {
  :lang(ko) .iv-tags { --ivt-phone-w: 14.4rem; }
}