/* Phone Selected work (<=767px): brand story rings + full-screen story viewer (result, then situation, task,
   action). Loaded after mobile.css. Phone only: the rings and the viewer stay hidden above 767px and without
   JS (phone-stories.js removes [hidden]), and the desktop list is untouched everywhere else. */
@media (max-width: 767px) {
  /* ---------- the rings in the page ---------- */
  html.pstories-on #work .work__stage { display: none; }
  .pstories:not([hidden]) { display: block; }
  .pstories__eyebrow {
    display: flex; align-items: center; gap: 9px; margin: -8px 0 22px;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel);
  }
  :lang(ar) .pstories__eyebrow { font-family: var(--font-ar); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
  .pstories__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ember-fill); box-shadow: 0 0 0 4px var(--ember-22); }
  .pstories__rings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 6px; }
  .pring:last-child:nth-child(3n + 1) { grid-column: 2; }
  .pring { --ring-brand: var(--brand-reefna); }
  .pring[data-brand="smarthub"] { --ring-brand: var(--brand-smarthub); }
  .pring[data-brand="soccerone"] { --ring-brand: var(--brand-soccerone); }
  .pring[data-brand="najah"] { --ring-brand: var(--brand-najah); }
  .pring[data-brand="sellsza"] { --ring-brand: var(--brand-sellsza); }
  .pring[data-brand="akma"] { --ring-brand: var(--brand-akma); }
  .pring[data-brand="ntflow"] { --ring-brand: var(--brand-ntflow); }
  .pring__btn {
    width: 100%; min-height: 44px; display: flex; flex-direction: column; align-items: center; padding: 4px 2px 6px;
    border-radius: 18px; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .pring__btn:focus-visible { outline-offset: 2px; border-radius: 18px; }
  /* An unseen story wears an ember-to-brand ring; a seen one dims to a thin grey line, like Instagram. */
  .pring__o {
    position: relative; display: block; width: clamp(70px, 20vw, 84px); aspect-ratio: 1; padding: 3px; border-radius: 50%;
    background: conic-gradient(from 210deg, var(--ember-fill), var(--ring-brand) 45%, var(--ember-fill) 72%, var(--ring-brand));
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ring-brand) 70%, transparent);
    transition: transform 0.25s var(--ease-ui), box-shadow 0.4s var(--ease-ui);
  }
  .pring__btn:active .pring__o { transform: scale(0.93); }
  .pring__c {
    display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border-radius: 50%;
    border: 3px solid var(--ink); background: var(--white); background-clip: padding-box;
  }
  .pring.is-seen .pring__o { padding: 1.5px; background: var(--bone-25); box-shadow: none; }
  .pring.is-seen .pring__c { border-width: 4.5px; }
  .pring.is-seen .pring__name { color: var(--bone-80); }
  .pring__c img { width: 70%; height: 70%; object-fit: contain; }
  /* The two all-white marks sit on ink, the rest on white (their own colours). */
  .pring:is([data-brand="sellsza"], [data-brand="akma"]) .pring__c { background: var(--night-ink); }
  .pring:is([data-brand="sellsza"], [data-brand="akma"], [data-brand="najah"]) .pring__c img { width: 80%; }
  .pring[data-brand="soccerone"] .pring__c img { width: 100%; height: 100%; transform: scale(1.18); }
  .pring__n {
    position: absolute; top: -2px; inset-inline-end: -3px; display: grid; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; background: var(--graphite); box-shadow: 0 0 0 1px var(--bone-18);
    font-family: var(--font-mono); font-size: 9px; color: var(--steel); direction: ltr; unicode-bidi: isolate;
  }
  /* Brand names only (owner 2026-10-12): the name is the label; the result waits inside the story. */
  .pring__name {
    margin-block-start: 10px; font-family: var(--font-display); font-weight: 800; font-size: 15px; font-stretch: 88%;
    line-height: 1.12; color: var(--bone); text-wrap: balance; direction: ltr; unicode-bidi: isolate;
  }

  /* ---------- the story viewer: an ink island in both themes, tinted by the brand ---------- */
  html.phone-story-open, html.phone-story-open body { overflow: hidden; }
  .pstory { --brand: var(--brand-reefna); --peek: var(--brand-smarthub); }
  .pstory[data-brand="smarthub"] { --brand: var(--brand-smarthub); }
  .pstory[data-brand="soccerone"] { --brand: var(--brand-soccerone); }
  .pstory[data-brand="najah"] { --brand: var(--brand-najah); }
  .pstory[data-brand="sellsza"] { --brand: var(--brand-sellsza); }
  .pstory[data-brand="akma"] { --brand: var(--brand-akma); }
  .pstory[data-brand="ntflow"] { --brand: var(--brand-ntflow); }
  .pstory__peek[data-brand="soccerone"] { --peek: var(--brand-soccerone); }
  .pstory__peek[data-brand="najah"] { --peek: var(--brand-najah); }
  .pstory__peek[data-brand="sellsza"] { --peek: var(--brand-sellsza); }
  .pstory__peek[data-brand="akma"] { --peek: var(--brand-akma); }
  .pstory__peek[data-brand="ntflow"] { --peek: var(--brand-ntflow); }
  .pstory:not([hidden]) {
    position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; overflow: hidden;
    padding-block: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-bottom) + 12px);
    color: var(--night-bone);
    background:
      radial-gradient(120% 52% at 50% 16%, color-mix(in srgb, var(--brand) 58%, transparent), transparent 74%),
      linear-gradient(180deg, color-mix(in srgb, var(--brand) 26%, var(--night-ink)) 0%, var(--night-ink) 58%, var(--ink-deep) 100%);
    transition: --brand 0.6s var(--ease-ui);
    touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  }
  [data-theme="light"] .pstory:not([hidden]) {
    background:
      radial-gradient(120% 52% at 50% 16%, color-mix(in srgb, var(--brand) 58%, transparent), transparent 74%),
      linear-gradient(180deg, color-mix(in srgb, var(--brand) 26%, var(--night-ink)) 0%, var(--night-ink) 58%);
  }
  .pstory :focus-visible { outline-color: var(--night-ember); }

  .pstory__bars { display: flex; gap: 4px; padding-inline: 10px; }
  .pstory__bars i { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: var(--night-bone-25); }
  .pstory__bars b { display: block; height: 100%; background: var(--night-bone); transform: scaleX(0); transform-origin: left center; }
  [dir="rtl"] .pstory__bars b { transform-origin: right center; }
  .pstory__bars .is-done b { transform: scaleX(1); }

  .pstory__head { display: flex; align-items: center; gap: 10px; padding-block: 8px 0; padding-inline: 14px 4px; }
  .pstory__av {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; overflow: hidden; border-radius: 50%;
    background: var(--white); box-shadow: 0 0 0 2px var(--night-ink), 0 0 0 3.5px var(--brand);
  }
  .pstory__av img { width: 76%; height: 76%; object-fit: contain; }
  .pstory:is([data-brand="sellsza"], [data-brand="akma"]) .pstory__av { background: var(--night-ink); }
  .pstory[data-brand="soccerone"] .pstory__av img { width: 100%; height: 100%; transform: scale(1.18); }
  .pstory__who { min-width: 0; display: flex; flex-direction: column; gap: 3px; line-height: 1.15; }
  .pstory__name { font-family: var(--font-display); font-weight: 700; font-stretch: 94%; font-size: 15px; color: var(--night-bone); }
  [dir="rtl"] .pstory__name { text-align: right; }
  .pstory__meta { overflow: hidden; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-bone-80); white-space: nowrap; text-overflow: ellipsis; }
  :lang(ar) .pstory__meta { font-family: var(--font-ar); font-size: 11px; letter-spacing: 0; }
  .pstory__count { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); }
  .pstory__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--night-bone); cursor: pointer; }
  .pstory__pause { margin-inline-start: auto; }
  .pstory__i-play, .pstory.is-paused .pstory__i-pause { display: none; }
  .pstory.is-paused .pstory__i-play { display: block; }
  @media (prefers-reduced-motion: reduce) {
    /* no clock to pause: the visitor moves the story with taps */
    .pstory__pause { display: none; }
    .pstory__close { margin-inline-start: auto; }
    .pstory__bars .is-now b { transform: scaleX(1); }
  }

  .pstory__stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: clamp(10px, 2.2svh, 20px) 22px 0; }
  .pstory__shot {
    flex: none; width: min(100%, 340px); margin: 0 auto; overflow: hidden; border-radius: 14px; background: var(--night-graphite);
    transform: rotate(-2.5deg);
    box-shadow: 0 0 0 1px var(--night-bone-14), 0 30px 60px -22px var(--shadow-deep), 0 26px 70px -26px color-mix(in srgb, var(--brand) 80%, transparent);
  }
  [dir="rtl"] .pstory__shot { transform: rotate(2.5deg); }
  .pstory__bar { display: flex; align-items: center; gap: 5px; height: 24px; padding-inline: 10px; background: var(--night-graphite-2); direction: ltr; }
  .pstory__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--night-bone-18); }
  .pstory__bar i:first-child { background: var(--brand); }
  .pstory__domain {
    flex: 1; margin-inline-start: 8px; height: 15px; padding-inline: 8px; border-radius: 8px; background: var(--night-bone-06);
    font-family: var(--font-mono); font-size: 8.5px; line-height: 15px; color: var(--night-steel);
  }
  .pstory__shot img { display: block; width: 100%; height: clamp(112px, 25svh, 230px); object-fit: cover; object-position: top center; }

  /* The free height splits around the result, so the beats sit low and never jump between beats. */
  .pstory__res { margin-block: auto; padding-block-start: clamp(14px, 3svh, 28px); }
  /* room for the next-brand tab on the end edge */
  :is(.pstory__res, .pstory__beats) { padding-inline-end: 30px; }
  .pstory__k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
  .pstory__tag {
    display: inline-flex; align-items: center; gap: 6px; height: 22px; padding-inline: 9px; border-radius: 6px;
    background: var(--ember-fill); color: var(--on-ember); font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .pstory__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--on-ember); }
  .pstory__role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-hi); }
  :lang(ar) :is(.pstory__tag, .pstory__role) { font-family: var(--font-ar); font-size: 11.5px; font-weight: 700; letter-spacing: 0; }
  .pstory__fig { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 0; line-height: 0.86; }
  [dir="rtl"] .pstory__fig[dir="ltr"] { justify-content: flex-end; }
  .pstory__cur { font-family: var(--font-display); font-weight: 700; font-stretch: 118%; font-size: clamp(24px, 7.4vw, 30px); color: var(--night-ember); }
  .pstory__big {
    font-family: var(--font-display); font-weight: 800; font-stretch: 82%; font-size: clamp(76px, 26vw, 112px);
    letter-spacing: -0.01em; color: var(--night-bone); text-shadow: 0 0 40px color-mix(in srgb, var(--brand) 60%, transparent);
  }
  .pstory__phrase {
    font-family: var(--font-display); font-weight: 800; font-stretch: 88%; font-size: clamp(30px, 9.6vw, 40px);
    line-height: 1.02; color: var(--night-bone); text-wrap: balance;
  }
  :lang(ar) .pstory__phrase { font-family: var(--font-ar); font-size: clamp(26px, 8vw, 32px); line-height: 1.45; }
  .pstory__note { margin: 6px 0 0; font-family: var(--font-display); font-weight: 600; font-stretch: 112%; font-size: 18px; color: var(--night-bone-80); }
  .pstory__note[dir="ltr"] { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
  [dir="rtl"] .pstory__note[dir="ltr"] { text-align: right; unicode-bidi: isolate; }
  :lang(ar) .pstory__note:not([dir="ltr"]) { font-family: var(--font-ar); font-size: 16px; }

  .pstory__beats { margin-block-start: auto; padding-block: clamp(14px, 3svh, 28px) 4px; }
  .pstory__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .pstory__chips li {
    display: flex; align-items: center; height: 28px; padding-inline: 11px; border-radius: var(--r-pill);
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--night-bone-72); box-shadow: inset 0 0 0 1px var(--night-bone-18);
    transition: background-color 0.3s var(--ease-ui), color 0.3s var(--ease-ui);
  }
  :lang(ar) .pstory__chips li { font-family: var(--font-ar); font-size: 11.5px; letter-spacing: 0; }
  .pstory__chips li.is-done { color: var(--night-bone); background: var(--night-bone-10); box-shadow: none; }
  .pstory__chips li.is-now { color: var(--on-ember); background: var(--ember-fill); box-shadow: none; font-weight: 600; }
  .pstory__text { min-height: 7.5em; margin: 14px 0 0; font-size: clamp(16px, 4.4vw, 18px); line-height: 1.5; color: var(--night-bone); text-wrap: pretty; }
  :lang(ar) .pstory__text { font-size: clamp(15.5px, 4.2vw, 17px); line-height: 1.85; }

  /* Tap thirds: previous on the reading start side, next on the rest (logical insets mirror them in Arabic). */
  .pstory__zone { position: absolute; top: 0; bottom: 0; z-index: 2; width: 33.334%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .pstory__zone--prev { inset-inline-start: 0; }
  .pstory__zone--next { inset-inline-end: 0; width: 66.666%; }
  .pstory__zone:focus-visible { outline-offset: -4px; border-radius: 16px; }

  /* The next brand waits at the edge, in its own colour. */
  .pstory__peek {
    position: absolute; top: 44%; inset-inline-end: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 44px; min-height: 112px; padding: 10px 0; border-start-start-radius: 14px; border-end-start-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--peek) 80%, var(--night-ink)), color-mix(in srgb, var(--peek) 38%, var(--night-ink)));
    box-shadow: -10px 0 30px var(--shadow-deep); color: var(--night-bone); cursor: pointer;
  }
  [dir="rtl"] .pstory__peek { box-shadow: 10px 0 30px var(--shadow-deep); }
  .pstory__peek[hidden] { display: none; }
  .pstory__peek-av { display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: var(--white); }
  .pstory__peek-av img { width: 76%; height: 76%; object-fit: contain; }
  .pstory__peek:is([data-brand="sellsza"], [data-brand="akma"]) .pstory__peek-av { background: var(--night-ink); }
  .pstory__peek[data-brand="soccerone"] .pstory__peek-av img { width: 100%; height: 100%; transform: scale(1.18); }
  .pstory__peek small {
    writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--night-bone); white-space: nowrap;
  }
  :lang(ar) .pstory__peek small { transform: none; font-family: var(--font-ar); font-size: 10px; letter-spacing: 0; }

  /* Short phones (iPhone SE, 375x667): the site, the figure and the beat tighten so every beat still
     ends above the reply bar. */
  @media (max-height: 720px) {
    .pstory__shot img { height: clamp(92px, 17svh, 130px); }
    .pstory__shot { width: min(100%, 300px); }
    .pstory__big { font-size: clamp(60px, 19vw, 80px); }
    .pstory__cur { font-size: 22px; }
    .pstory__note { font-size: 16px; }
    .pstory__res { padding-block-start: 12px; }
    .pstory__beats { padding-block-start: 12px; }
    .pstory__text { min-height: 0; margin-block-start: 10px; font-size: 15.5px; line-height: 1.45; }
    :lang(ar) .pstory__text { font-size: 15px; line-height: 1.7; }
    .pstory__peek { top: 38%; }
  }

  /* The reply bar is the consultation, as in a story reply. */
  .pstory__reply {
    position: relative; z-index: 3; flex: none; display: flex; align-items: center; gap: 10px; height: 52px; margin: 12px 12px 0;
    padding-inline: 18px 6px; border-radius: var(--r-pill); background: var(--night-ink-72);
    box-shadow: inset 0 0 0 1.2px var(--night-bone-25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--night-bone-80); font-size: 14.5px; -webkit-tap-highlight-color: transparent;
  }
  .pstory__ask { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pstory__go {
    flex: none; display: flex; align-items: center; gap: 6px; height: 40px; margin-inline-start: auto; padding-inline: 15px 13px;
    border-radius: var(--r-pill); background: var(--ember-fill); color: var(--on-ember); font-size: 13.5px; font-weight: 600;
  }
  [dir="rtl"] .pstory__go svg { transform: scaleX(-1); }
  :lang(ar) .pstory__reply { font-size: 14px; }
  :lang(ar) .pstory__go { font-weight: 700; }
}