/* S9 · From subscription to ready content (#how) — THE FEED homepage, design.md Part III.
   "Edit timeline" (FINAL-SPEC §4 S9). Three layers:
   1. base (every width, static): a vertical timeline — a rail at the inline
      start, a yellow numeral badge on it per step, a card per step;
   2. ≥900: the clips sit side by side on a horizontal tl-track under a tl-ruler;
   3. ≥900 + motion (html.js-motion): M3 — the full-bleed section is 220svh,
      its stage sticks under the nav, a preview monitor shows the active tl-clip and
      the tl-ph scrubs the tl-track with the scroll driver's --p.
   Below 900 with motion, the tl-ph steps down the rail as each tl-clip enters. */

/* ── 1. base: vertical timeline ─────────────────────────────────────────── */
.how__head {
  display: grid;
  gap: var(--s-3);
  margin-block-end: var(--s-7);
}
.how__h2 {
  max-inline-size: 16ch;
}
.how__h2:lang(ar),
.page-home:lang(ar) .how__h2 {
  max-inline-size: none;
}
.how-mon,
.tl-ruler,
.tl-ph,
.tl-render {
  display: none;
}
.tl {
  position: relative;
}
.tl-lane {
  position: relative;
}
/* the rail the badges sit on */
.tl-lane::before {
  content: "";
  position: absolute;
  inset-block: 24px var(--rail-end, 24px);
  inset-inline-start: 22px;
  inline-size: 4px;
  border-radius: var(--r-pill);
  background: var(--line);
}
.tl-track {
  position: relative;
  display: grid;
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tl-clip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text thumb";
  align-items: start;
  gap: var(--s-4);
  margin-inline-start: 64px;
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: var(--sh-1);
}
:root[data-theme="dark"] .tl-clip {
  background: var(--surface-2);
}
.tl-clip__num {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: -64px;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--r-sm);
  background: var(--yellow);
  color: var(--on-yellow);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: 1.5rem;
  line-height: 1;
}
.tl-clip__thumb {
  grid-area: thumb;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}
:root[data-theme="dark"] .tl-clip__thumb {
  background: var(--bg);
}
.how-ico {
  inline-size: 26px;
  block-size: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tl-clip__text {
  grid-area: text;
  display: grid;
  gap: var(--s-2);
  min-inline-size: 0;
}
.tl-clip__title {
  padding-block-start: var(--s-1);
}
.tl-clip__alt {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: 1.45;
  text-align: start;
}
.tl-clip__alt:lang(ar) {
  font-family: var(--font-ar-text);
  font-size: 1rem;
  line-height: 1.6;
}
.tl-clip__desc {
  margin: 0;
  color: var(--ink-soft);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.page-home:lang(ar) .tl-clip__desc {
  font-family: var(--font-ar-text);
  font-size: var(--fs-ar-body);
  line-height: 1.8;
}
.tl-clip__wave {
  display: none;
}

/* phones: the icon tile shares only the title row; the other-language line and
   the description run the card's full width (no narrow column beside the icon) */
@media (max-width: 599.98px) {
  .tl-clip {
    grid-template-areas:
      "title thumb"
      "alt alt"
      "desc desc";
    row-gap: var(--s-2);
  }
  .tl-clip__text {
    display: contents;
  }
  .tl-clip__title {
    grid-area: title;
    align-self: center;
    min-inline-size: 0;
  }
  .tl-clip__alt {
    grid-area: alt;
  }
  .tl-clip__desc {
    grid-area: desc;
  }
}
/* the smallest phones: a slimmer card frame + icon so the longest one-word
   title line ("RECEIVE") never splits mid-word beside the icon */
@media (max-width: 399.98px) {
  .tl-clip {
    padding: var(--s-4);
    column-gap: var(--s-3);
  }
  .tl-clip__thumb {
    inline-size: 40px;
    block-size: 40px;
  }
}

/* ── <900 with motion: the tl-ph steps down the rail ─────────────────── */
@media (max-width: 899.98px) {
  .js-motion .tl-render {
    display: block;
    position: absolute;
    z-index: 1;
    inset-block-start: 24px;
    inset-inline-start: 22px;
    inline-size: 4px;
    block-size: calc(100% - 24px - var(--rail-end, 24px));
    border-radius: var(--r-pill);
    background: var(--yellow);
    transform-origin: 50% 0;
    transform: scaleY(var(--fill, 0));
    transition: transform 500ms var(--ease-out);
  }
  .js-motion .tl-ph {
    display: block;
    position: absolute;
    z-index: 2;
    inset-block-start: 0;
    /* from the badge's inline-start to the card: nothing ever enters the gutter */
    inset-inline-start: 0;
    inline-size: 64px;
    block-size: 0;
    pointer-events: none;
    transform: translateY(var(--ph-y, 0px));
    transition: transform 500ms var(--ease-out);
  }
  .js-motion .tl-ph__line {
    position: absolute;
    /* starts tucked under the badge, so only the badge→card link shows */
    inset-inline: 40px 0;
    inset-block-start: -1.5px;
    block-size: 3px;
    border-radius: var(--r-pill);
    background: var(--yellow);
    box-shadow: 0 0 0 1px var(--slab);
  }
  .js-motion .tl-ph__head {
    position: absolute;
    inset-block-start: -7px;
    /* in the 16px gap between the badge and the card, pointing at the card */
    inset-inline-start: 50px;
    inline-size: 12px;
    block-size: 14px;
    background: var(--slab);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .js-motion .tl-ph__head:dir(rtl) {
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }
  .js-motion .tl-clip__num {
    z-index: 3;
    transition:
      transform var(--d-sm) var(--ease-pop) 220ms,
      opacity var(--d-xs) linear 220ms;
  }
  .js-motion .tl-clip:not(.in) .tl-clip__num {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* ── 2. ≥900: a horizontal tl-track under a tl-ruler ──────────────────────────── */
@media (min-width: 900px) {
  .how__head {
    margin-block-end: var(--s-8);
  }
  .tl-ruler {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    block-size: 30px;
    margin-block-end: var(--s-2);
    padding-block-end: 10px;
    color: var(--ink-muted);
    /* minor ticks every 1s of 15 (1/15 of the tl-track), major at each tl-clip */
    background:
      linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat,
      repeating-linear-gradient(
          to right,
          var(--ink-muted) 0 1px,
          transparent 1px calc(100% / 3)
        )
        0 100% / 100% 10px no-repeat,
      repeating-linear-gradient(
          to right,
          var(--line) 0 1px,
          transparent 1px calc(100% / 15)
        )
        0 100% / 100% 6px no-repeat;
  }
  .tl-ruler__tc {
    font-family: var(--font-ui);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    padding-inline-start: 6px;
  }
  .tl-ruler__tc:last-child {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-end: 0;
    padding-inline-start: 0;
  }
  .tl-lane {
    padding-block-start: var(--s-4);
  }
  .tl-lane::before {
    inset-block: 0 auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: 4px;
  }
  .tl-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .tl-clip {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "num thumb"
      "text text"
      "wave wave";
    gap: var(--s-4);
    margin-inline-start: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: none;
  }
  .tl-clip__num {
    position: static;
    grid-area: num;
    inline-size: 44px;
    block-size: 44px;
  }
  .tl-clip__thumb {
    justify-self: end;
    inline-size: 44px;
    block-size: 44px;
  }
}
@media (min-width: 1280px) {
  .tl-clip {
    padding: var(--s-6);
  }
  /* a static waveform strip under each tl-clip — the "audio" lane */
  .tl-clip__wave {
    grid-area: wave;
    display: block;
    block-size: 22px;
    border-radius: var(--r-xs);
    background: repeating-linear-gradient(
      to right,
      var(--line) 0 3px,
      transparent 3px 6px
    );
    clip-path: polygon(
      0 40%,
      6% 20%,
      12% 55%,
      19% 10%,
      27% 45%,
      34% 25%,
      41% 60%,
      48% 0,
      55% 35%,
      63% 15%,
      70% 50%,
      78% 30%,
      85% 5%,
      92% 40%,
      100% 25%,
      100% 100%,
      0 100%
    );
  }
}

/* ── 3. ≥900 + motion: M3, the pinned edit timeline ─────────────────────── */
@media (min-width: 900px) {
  .js-motion .how {
    padding-block: 0;
    block-size: 220svh;
  }
  .js-motion .how__stage {
    position: sticky;
    inset-block-start: var(--nav-h, 64px);
    block-size: calc(100svh - var(--nav-h, 64px));
    padding-block: var(--s-6);
    box-sizing: border-box;
  }
  .js-motion .how__wrap {
    display: grid;
    block-size: 100%;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "head how-mon"
      "time time";
    column-gap: clamp(24px, 3vw, 56px);
    row-gap: var(--s-6);
  }
  .js-motion .how__head {
    grid-area: head;
    align-self: center;
    margin: 0;
  }
  .js-motion .tl {
    grid-area: time;
  }

  /* the preview monitor */
  .js-motion .how-mon {
    grid-area: how-mon;
    display: grid;
    place-items: center;
    min-block-size: 0;
    container-type: size;
  }
  .js-motion .how-mon__screen {
    position: relative;
    container-type: inline-size;
    inline-size: min(100cqi, 640px, 100cqh * 16 / 9);
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface-2);
    box-shadow: var(--sh-1);
  }
  .how-mon__corner {
    position: absolute;
    inline-size: 4cqi;
    block-size: 4cqi;
    border: 0 solid var(--ink-muted);
    opacity: 0.6;
  }
  .how-mon__corner--a {
    inset-block-start: 9cqi;
    inset-inline-start: 4cqi;
    border-block-start-width: 2px;
    border-inline-start-width: 2px;
  }
  .how-mon__corner--b {
    inset-block-start: 9cqi;
    inset-inline-end: 4cqi;
    border-block-start-width: 2px;
    border-inline-end-width: 2px;
  }
  .how-mon__corner--c {
    inset-block-end: 4cqi;
    inset-inline-start: 4cqi;
    border-block-end-width: 2px;
    border-inline-start-width: 2px;
  }
  .how-mon__corner--d {
    inset-block-end: 4cqi;
    inset-inline-end: 4cqi;
    border-block-end-width: 2px;
    border-inline-end-width: 2px;
  }
  .how-mon__bar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    block-size: 7cqi;
    padding-inline: 4cqi;
    border-block-end: 1px solid var(--line);
    color: var(--ink-muted);
  }
  .how-mon__bar .ui {
    font-size: max(11px, 1.9cqi);
  }
  .how-mon__rec {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
  }
  .how-mon__dot {
    inline-size: 0.7em;
    block-size: 0.7em;
    border-radius: 50%;
    background: var(--red);
  }
  .how-mon__slide {
    position: absolute;
    inset: 7cqi 0 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 5cqi;
    padding-inline: 10cqi;
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--d-xs) linear,
      transform 0s linear var(--d-xs);
  }
  .how[data-active="1"] .how-mon__slide[data-step="1"],
  .how[data-active="2"] .how-mon__slide[data-step="2"],
  .how[data-active="3"] .how-mon__slide[data-step="3"] {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--d-sm) var(--ease-out) 80ms,
      transform var(--d-sm) var(--ease-out) 80ms;
  }
  /* the big numeral on a yellow slab (the brand's diagonal) */
  .how-mon__num {
    position: relative;
    isolation: isolate;
    padding: 1cqi 3.2cqi;
    color: var(--on-yellow);
    font-family: var(--font-display);
    font-weight: 900;
    font-stretch: 125%;
    font-size: 17cqi;
    line-height: 1;
    letter-spacing: -0.03em;
  }
  .how-mon__num::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--yellow);
    clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  }
  .how-mon__body {
    display: grid;
    gap: 1.6cqi;
    justify-items: start;
  }
  .how-mon__ico {
    color: var(--ink);
  }
  .how-mon__ico .how-ico {
    inline-size: 7cqi;
    block-size: 7cqi;
  }
  .how-mon__title {
    font-family: var(--font-display);
    font-weight: 860;
    font-stretch: 120%;
    font-size: 6.4cqi;
    line-height: 0.96;
    text-transform: uppercase;
    color: var(--ink);
  }
  .page-home:lang(ar) .how-mon__title {
    font-family: var(--font-ar-display);
    font-weight: 800;
    font-stretch: normal;
    font-size: 6.2cqi;
    line-height: 1.3;
    text-transform: none;
  }
  .how-mon__desc {
    max-inline-size: 30ch;
    font-family: var(--font-text);
    font-size: max(13px, 2.5cqi);
    line-height: 1.45;
    color: var(--ink-soft);
  }
  .page-home:lang(ar) .how-mon__desc {
    font-family: var(--font-ar-text);
    font-size: max(14px, 2.7cqi);
    line-height: 1.7;
  }
  /* step 3's payoff: a real poster pops out of the corner, checked */
  .how-mon__poster {
    position: absolute;
    z-index: 2;
    inset-block-end: -3cqi;
    inset-inline-end: -2.5cqi;
    display: grid;
    /* the chip hangs from the poster's outer (inline-end) edge and grows
       inward, so a longer Arabic label never runs past the monitor */
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    inline-size: 12cqi;
    opacity: 0;
    transform: scale(0.6) rotate(calc(6deg * var(--dir)));
    transform-origin: 100% 100%;
    transition:
      opacity var(--d-xs) linear,
      transform var(--d-xs) var(--ease-in);
  }
  .how-mon__poster:dir(rtl) {
    transform-origin: 0 100%;
  }
  .how[data-active="3"] .how-mon__poster {
    opacity: 1;
    transform: rotate(calc(4deg * var(--dir)));
    transition:
      opacity 200ms linear 200ms,
      transform 360ms var(--ease-pop) 200ms;
  }
  .how-mon__poster img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border: 0.6cqi solid var(--slab);
    border-radius: 1.6cqi;
    background: var(--slab);
    box-shadow: var(--sh-2);
  }
  .how-mon__chk {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin-block-start: -1.4em;
    padding: 0.35em 0.7em;
    border-radius: var(--r-pill);
    background: var(--yellow);
    color: var(--on-yellow);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: max(10px, 1.6cqi);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: var(--sh-1);
  }
  .page-home:lang(ar) .how-mon__chk {
    font-family: var(--font-ar-text);
    letter-spacing: 0;
    text-transform: none;
  }
  .how-mon__chk svg {
    inline-size: 1.2em;
    block-size: 1.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* the rendered bar fills behind the tl-ph */
  .js-motion .tl-render {
    display: block;
    position: absolute;
    z-index: 1;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 4px;
    border-radius: var(--r-pill);
    background: var(--yellow);
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
  }
  .js-motion .tl-render:dir(rtl) {
    transform-origin: 100% 50%;
  }
  /* the tl-ph: a full-width box that slides by --p of its own width, its
     head + line drawn on its inline-start edge */
  .js-motion .tl-ph {
    display: block;
    position: absolute;
    z-index: 4;
    inset-block: -40px 0;
    inset-inline-start: 0;
    inline-size: 100%;
    pointer-events: none;
    transform: translateX(calc(var(--p, 0) * 100% * var(--dir)));
  }
  .js-motion .tl-ph__line {
    position: absolute;
    inset-block-start: 12px;
    block-size: 38px;
    inset-inline-start: -1.5px;
    inline-size: 3px;
    border-radius: var(--r-pill);
    background: var(--yellow);
    box-shadow: 0 0 0 1px var(--slab);
  }
  .js-motion .tl-ph__head {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: -8px;
    inline-size: 16px;
    block-size: 18px;
    background: var(--slab);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  }
  .js-motion .tl-ph__head::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    background: var(--yellow);
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
  }

  /* clips: waiting → active (under the tl-ph) → rendered (passed) */
  .js-motion .tl-clip::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--yellow);
    border-radius: calc(var(--r-sm) + 2px);
    opacity: 0;
    transition: opacity var(--d-xs) linear;
    pointer-events: none;
  }
  .js-motion .tl-clip.is-active::after {
    opacity: 1;
  }
  .js-motion .tl-clip__thumb {
    transition: clip-path 400ms var(--ease-wipe);
  }
  .js-motion
    .how.is-pin
    .tl-clip:not(.is-active):not(.is-done)
    .tl-clip__thumb {
    clip-path: inset(0 100% 0 0);
  }
  .js-motion
    .how.is-pin
    .tl-clip:not(.is-active):not(.is-done)
    .tl-clip__thumb:dir(rtl) {
    clip-path: inset(0 0 0 100%);
  }
  .js-motion .how.is-pin .tl-clip.in:not(.is-active):not(.is-done) {
    opacity: 0.62;
  }
}
@media (min-width: 1280px) {
  .js-motion .how-mon__screen {
    inline-size: min(100cqi, 760px, 100cqh * 16 / 9);
  }
}
/* 900–1279: the monitor touches the page gutter, so the poster stays inside it */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .how-mon__poster {
    inset-block-end: 2cqi;
    inset-inline-end: 2cqi;
  }
}

/* pinned: the headline sizes to its column (the longest EN word must fit) */
@media (min-width: 900px) {
  .js-motion .how__head {
    container-type: inline-size;
  }
  .js-motion .how__h2 {
    font-size: min(var(--fs-h2), 9.4cqi);
    max-inline-size: none;
  }
  .page-home:lang(ar) .js-motion .how__h2,
  .js-motion .page-home:lang(ar) .how__h2 {
    font-size: min(var(--fs-ar-h2), 12cqi);
  }
  .tl-ruler__tc {
    padding-inline-start: 14px;
  }
}
@media (min-width: 900px) {
  /* the playhead parks on 00:15 at the end — keep the label clear of it */
  .tl-ruler__tc:last-child {
    padding-inline-end: 14px;
  }
}

/* pinned on a short stage (laptops, 2560×900, 4K zoom): the head row is a size
   container, so the headline also caps to the row's HEIGHT (cqh is in the
   head's own — already zoomed — units, never the viewport's) and never runs
   into the ruler; the monitor drops its small print when it gets small. */
@media (min-width: 900px) {
  .js-motion .how__head {
    container-type: size;
    align-self: stretch;
    align-content: center;
    min-block-size: 0;
  }
  .js-motion .how__h2 {
    font-size: min(var(--fs-h2), 9.4cqi, 16cqh);
  }
  .js-motion .page-home:lang(ar) .how__h2 {
    font-size: min(var(--fs-ar-h2), 12cqi, 15cqh);
  }
  /* the echo shrinks with the head column too (~0.58x the H2's cap), so a
     narrow column can never invert the hierarchy */
  .js-motion .how__echo {
    font-size: min(var(--fs-echo), 8cqh, 5.5cqi);
  }
  .js-motion .page-home:lang(ar) .how__echo {
    font-size: min(var(--fs-ar-echo), 8cqh, 7cqi);
  }
  @container (max-width: 520px) {
    .how-mon__desc {
      display: none;
    }
  }
}
/* very short or very wide stages: the clips go compact (drop the decorative
   waveform + the other-language line) so the monitor and headline keep room */
@media (min-width: 900px) {
  .js-motion .how__stage {
    container: how-stage / size;
  }
  @container how-stage (max-height: 720px) or (min-aspect-ratio: 2 / 1) {
    .tl-clip {
      gap: var(--s-2) var(--s-4);
      padding: var(--s-4) var(--s-5);
    }
    .tl-clip__wave,
    .tl-clip__alt {
      display: none;
    }
  }
}