/* IPN 1.13 · Header "watch live" play button + the phone header row.
   Shared component — the contest site mirrors it (see /home/claude/dev/R5-SHARED.md):

     <a class="hdr-play" href="<?= live_url() ?>"<?= live_attr() ?> data-live-btn
        aria-label="…watch live…" title="…watch live…">
       <i class="hdr-play__ic" aria-hidden="true"><?= glyph('play') ?></i>
       <span class="hdr-play__t">تماشای زنده</span>
     </a>

   Add .hdr-play--icon (or let the ≤760px rules below do it) for the icon-only round play button with a gentle pulse.
   Phone row order, reading from the right in RTL (left in LTR):
     brand → burger → bell → day/night → language → live play → user menu / sign-in. */

/* ---- the live play button ---------------------------------------------------------------- */
.hdr-play { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 6px; border-radius: 999px;
  background: linear-gradient(120deg, #E11D48 0%, #F43F5E 55%, #FB7185 100%); color: #fff; font-weight: 800; font-size: 13.5px; line-height: 1; white-space: nowrap; text-decoration: none;
  box-shadow: 0 10px 24px -12px rgba(225,29,72,.9); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1), filter .25s; }
html[dir="rtl"] .hdr-play { padding: 0 6px 0 16px; }
.hdr-play:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(225,29,72,1); color: #fff; }
.hdr-play:active { transform: translateY(0); filter: brightness(.95); }
.hdr-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hdr-play__ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.24); font-style: normal; }
.hdr-play__ic .ic { width: 14px; height: 14px; margin-inline-start: 1px; }
.hdr-play__t { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hdr-play__t .plogo { height: 15px; width: auto; }
/* live right now: the button breathes a little brighter */
.hdr-play.is-live { background: linear-gradient(120deg, #BE123C 0%, #E11D48 50%, #F97316 100%); }

/* icon-only round play button — gentle pulse, no bounce */
.hdr-play--icon, .hdr-play--icon:hover { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
html[dir="rtl"] .hdr-play--icon { padding: 0; }
.hdr-play--icon .hdr-play__t { display: none; }
.hdr-play--icon .hdr-play__ic { width: 100%; height: 100%; border-radius: 50%; background: none; }
.hdr-play--icon .hdr-play__ic .ic { width: 17px; height: 17px; }
.hdr-play--icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(244,63,94,.55); animation: hdrPlayPulse 2.8s cubic-bezier(.33,0,.2,1) infinite; }
@keyframes hdrPlayPulse { 0% { box-shadow: 0 0 0 0 rgba(244,63,94,.5); } 65% { box-shadow: 0 0 0 9px rgba(244,63,94,0); } 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0); } }
@media (prefers-reduced-motion: reduce) {
  .hdr-play { transition: none; }
  .hdr-play--icon::after, .hdr__tools .hdr-play::after, .ld-tools .hdr-play::after,
  .portal__tools .hdr-play::after, .ac-top .hdr-play::after { animation: none; }
}

/* the IPN site header already carries a "live" nav item on wide screens — the play button is the phone's stand-in */
@media (min-width: 761px) { .hdr__tools > .hdr-play, .portal__tools > .hdr-play { display: none; } }

/* ---- the avatar cell on the welcome page and the doors page (R6) --------------------------- */
/* Both headers get the same .hdr__me cell as the site header; on wide screens `order` keeps the old look. */
.ld-top > .hdr__me, .portal__top > .hdr__me { display: inline-flex; align-items: center; flex: none; order: 4; }
.ld-brand { order: 1; } .ld-nav { order: 2; } .ld-tools { order: 3; }
.portal__brand { order: 1; } .portal__nav { order: 2; } .portal__tools { order: 3; }

/* ---- the round cross-site button (R6) ------------------------------------------------------ */
/* .hdr__sh is the R4 contest pill; .hdr__sh--round is the round phone form (see /home/claude/dev/R6-SHARED.md).
   Below 1281px the pill already collapses to a 40px circle, so the modifier only has to tune the phone sizes. */
.hdr__sh--round:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- phones: one row that always fits ------------------------------------------------------ */
@media (max-width: 760px) {
  /* IPN site header (themes/classic/layouts/site.php)
     R6 order: the avatar cell is pinned to the very LEFT edge in both directions, every other tool sits on the other side. */
  .hdr__in, .hdr__in:has(.umenu) { gap: 4px; padding-inline: 8px; }   /* beats the laptop ":has(.umenu) { gap: 14px }" rule */
  .hdr__me, .hdr__sh, .hdr__burger, .hdr__logo { flex: none; }        /* nothing in the row may shrink to nothing */
  .hdr__logo { order: 2; }
  .hdr__burger { order: 3; margin-inline-start: 0; }
  .hdr__tools { order: 4; gap: 3px; }
  .hdr__sh { order: 5; }
  html[dir="ltr"] .hdr__me { order: 0; margin-inline-end: 2px; }          /* LTR: first in the row = left edge */
  html[dir="ltr"] .hdr__tools { margin-inline-start: auto; }
  html[dir="rtl"] .hdr__me { order: 9; margin-inline-start: auto; }       /* RTL: last in the row = left edge */
  html[dir="rtl"] .hdr__tools { margin-inline-start: 0; }
  .hdr__tools > .hdr__search { display: none; }                           /* search lives in the drawer on phones */
  .hdr__tools .nt-bell { order: 3; }
  .hdr__tools .hdr__icon[data-mode-toggle] { order: 4; }
  .hdr__tools .hdr__lang { order: 5; display: inline-flex; }              /* 1.12 hid it here; the row keeps it now */
  .hdr__tools .hdr-play { order: 6; }
  .hdr__icon, .hdr__burger { width: 34px; height: 34px; }
  .hdr__icon .ic, .hdr__burger .ic { width: 19px; height: 19px; }
  .hdr .lsw { --lsw-h: 26px; min-width: 54px; }
  .hdr .lsw__l { font-size: 10px; padding: 0 3px; }
  .hdr .lsw__l small { display: none; }
  .hdr__in > .hdr__me .umenu--hdr .umenu__btn, .hdr__in > .hdr__me .me-btn { width: 36px; height: 36px; padding: 0; }
  .hdr__in > .hdr__me .umenu--hdr .umenu__av { width: 30px; height: 30px; }
  .nt-bell--hdr .nt-bell__btn { width: 34px; height: 34px; }
  /* the cross-site button rides in the tool cluster as a round crown */
  .hdr__sh, html[dir="rtl"] .hdr__sh { display: inline-flex; width: 34px; height: 34px; padding: 0 !important; margin-inline-start: 0; justify-content: center; }
  .hdr__sh span { display: none; }
  .hdr__sh-ic { width: 26px; height: 26px; }
  .hdr__sh-ic .ic { width: 14px; height: 14px; }

  /* welcome page, "Landing" style (portal/landing.php) — same R6 rule: avatar at the very left edge */
  .ld-top { gap: 4px; padding: 0 6px 0 8px; }
  html[dir="rtl"] .ld-top { padding: 0 8px 0 6px; }
  html[dir="ltr"] .ld-top > .hdr__me { order: 0; margin-inline-end: 2px; }
  html[dir="ltr"] .ld-tools { margin-inline-start: auto; }
  html[dir="rtl"] .ld-top > .hdr__me { order: 9; margin-inline-start: auto; }
  html[dir="rtl"] .ld-tools, html[dir="rtl"] .ld-nav + .ld-tools { margin-inline-start: 0; }
  /* on a picture the avatar cell is icon-only: the name / "sign in" label would wrap in a 36px cell */
  .ld-top > .hdr__me .me-btn__t, .portal__top > .hdr__me .me-btn__t,
  .ld-top > .hdr__me .umenu__name, .portal__top > .hdr__me .umenu__name,
  .ld-top > .hdr__me .umenu__chev, .portal__top > .hdr__me .umenu__chev { display: none; }
  .ld-top > .hdr__me .me-btn, .portal__top > .hdr__me .me-btn,
  .ld-top > .hdr__me .umenu__btn, .portal__top > .hdr__me .umenu__btn {
    width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .ld-tools { gap: 4px; }
  .ld-tools .nt-bell { order: 3; }
  .ld-tools .hdr__icon[data-mode-toggle] { order: 4; }
  .ld-tools .lsw { order: 5; --lsw-h: 28px; min-width: 62px; }
  .ld-tools .lsw__l { font-size: 10.5px; padding: 0 4px; }
  .ld-tools .hdr-play { order: 6; }
  .ld-tools .umenu, .ld-tools .me-btn { order: 7; }
  .ld-top .umenu__btn { width: 36px; height: 36px; padding: 0; }
  .ld-top .umenu__av { width: 30px; height: 30px; }

  /* welcome page, "Doors" style (themes/classic/portal/index.php) — same R6 rule */
  .portal__top { gap: 4px; }
  .portal__tools { gap: 4px; }
  html[dir="ltr"] .portal__top > .hdr__me { order: 0; margin-inline-end: 2px; }
  html[dir="ltr"] .portal__tools { margin-inline-start: auto; }
  html[dir="rtl"] .portal__top > .hdr__me { order: 9; margin-inline-start: auto; }
  .portal__tools > .portal__onair { display: none; }
  .portal__tools .nt-bell { order: 3; }
  .portal__tools .hdr__icon[data-mode-toggle] { order: 4; }
  .portal__tools .lsw { order: 5; --lsw-h: 28px; min-width: 62px; }
  .portal__tools .lsw__l { font-size: 10.5px; padding: 0 4px; }
  .portal__tools .hdr-play { order: 6; }
  .portal__tools .umenu, .portal__tools .me-btn { order: 7; }

  /* every phone header collapses the live button to the round play icon */
  .hdr__tools .hdr-play, .ld-tools .hdr-play, .portal__tools .hdr-play { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: 50%; }
  .hdr__tools .hdr-play .hdr-play__t, .ld-tools .hdr-play .hdr-play__t, .portal__tools .hdr-play .hdr-play__t { display: none; }
  .hdr__tools .hdr-play .hdr-play__ic, .ld-tools .hdr-play .hdr-play__ic, .portal__tools .hdr-play .hdr-play__ic { width: 100%; height: 100%; border-radius: 50%; background: none; }
  .hdr__tools .hdr-play .hdr-play__ic .ic, .ld-tools .hdr-play .hdr-play__ic .ic, .portal__tools .hdr-play .hdr-play__ic .ic { width: 17px; height: 17px; }
  /* …and it breathes: the same gentle pulse as .hdr-play--icon (no bounce, off under reduced motion) */
  .hdr__tools .hdr-play::after, .ld-tools .hdr-play::after, .portal__tools .hdr-play::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(244,63,94,.55); animation: hdrPlayPulse 2.8s cubic-bezier(.33,0,.2,1) infinite; }
}
@media (max-width: 400px) {
  .hdr .logo, .ld-top .logo, .portal__top .logo { height: 24px; }
  .hdr .logo__box, .hdr .logo__tv { font-size: 18px; }
  .hdr__in { padding-inline: 6px; gap: 2px; }
  .hdr__icon, .hdr__burger { width: 31px; height: 31px; }
  .hdr__icon .ic, .hdr__burger .ic { width: 18px; height: 18px; }
  .hdr__in > .hdr__me .umenu--hdr .umenu__btn, .hdr__in > .hdr__me .me-btn { width: 33px; height: 33px; padding: 0; }
  .hdr__in > .hdr__me .umenu--hdr .umenu__av { width: 28px; height: 28px; }
  .ld-top > .hdr__me .umenu__btn, .portal__top > .hdr__me .umenu__btn, .ld-top > .hdr__me .me-btn, .portal__top > .hdr__me .me-btn { width: 34px; height: 34px; }
  .nt-bell--hdr .nt-bell__btn, .nt-bell .nt-bell__btn { width: 31px; height: 31px; }
  .hdr .lsw, .ld-tools .lsw, .portal__tools .lsw { min-width: 46px; --lsw-h: 24px; }
  .hdr .lsw__l { font-size: 9.5px; padding: 0 2px; }
  .hdr__tools .hdr-play, .ld-tools .hdr-play, .portal__tools .hdr-play { width: 31px; height: 31px; }
  .hdr__tools .hdr-play .hdr-play__ic .ic, .ld-tools .hdr-play .hdr-play__ic .ic, .portal__tools .hdr-play .hdr-play__ic .ic { width: 15px; height: 15px; }
  .hdr__sh, html[dir="rtl"] .hdr__sh { width: 31px; height: 31px; }
  .hdr__sh-ic { width: 24px; height: 24px; }
  .hdr__sh-ic .ic { width: 13px; height: 13px; }
}

/* 1.14 (R6) · reduced motion, last word: the phone pulse rules above live in a later media block than the R5
   @media (prefers-reduced-motion) rule near the top, so they used to win. This block closes that gap. */
@media (prefers-reduced-motion: reduce) {
  .hdr-play, .hdr__sh { transition: none !important; }
  .hdr-play::after, .hdr-play--icon::after, .hdr__tools .hdr-play::after, .ld-tools .hdr-play::after,
  .portal__tools .hdr-play::after, .ac-top .hdr-play::after, .hdr__sh::after, .hdr__sh-ic { animation: none !important; }
}