/* ═══════════════════════════════════════════════════════════════════════════
   The feedback page.

   Stories, and nothing else on the page. A slider on every screen, and every
   story 9:16 — the shape it was made in:

   · A phone shows one story at a time, the whole screen, with the bar floating
     over it — light and see-through, like a story's own top row.
   · A wider screen shows two side by side, sized so both fit the window whole.

   Arrows sit over the stories; dots sit under them, or over the picture on a phone. Both are drawn by the
   script; without it the slider still swipes and the arrow keys still move it.
   ═══════════════════════════════════════════════════════════════════════════ */

.fb{--fb-gap:0rem;--fb-dots:2.75rem}

/* ── the slider ──────────────────────────────────────────────────────────── */

.fb__slider{position:relative;margin-inline:auto}

/* The list is its own sideways scroller, so the page still scrolls down to the
   footer normally. It follows the page's direction: in Arabic the next story is
   to the left, the way the next page of a book is. */
.fb__list{list-style:none;margin:0;padding:0;
  display:flex;gap:var(--fb-gap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fb__list::-webkit-scrollbar{display:none}
/* While an arrow or a dot is moving it, nothing may stop it on the way. */
.fb__list.is-jumping{scroll-snap-type:none}
.fb__list:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--radius)}

/* One swipe, one story — never a fling past three of them. */
.fb__slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:grid;place-items:center}

/* The frame. Its shape is fixed; what is inside fills it. A picture that is not
   quite 9:16 is cropped to the middle rather than letterboxed, because a story
   with bands above and below reads as a mistake. A clip is contained instead:
   cutting the edge off a video cuts off whatever was said at the edge. */
.fb__story{position:relative;margin:0;aspect-ratio:9/16;overflow:hidden;
  border-radius:var(--radius);background:var(--ink);
  box-shadow:0 1.5rem 3.5rem -1.8rem rgb(25 21 18 / .45)}

.fb__media,.fb__link{display:block;inline-size:100%;block-size:100%}
img.fb__media{object-fit:cover}
video.fb__media{object-fit:contain;background:#000;cursor:pointer}
iframe.fb__media{border:0;background:#000}

.fb__story :focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

/* ── the arrows, over the stories ────────────────────────────────────────── */

.fb__arrow{position:absolute;z-index:2;inset-block-start:50%;translate:0 -50%;
  inline-size:2.9rem;block-size:2.9rem;border-radius:50%;
  display:grid;place-items:center;color:var(--cream);
  background:rgb(25 21 18 / .5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 .6rem 1.4rem -.6rem rgb(0 0 0 / .5);
  transition:background-color .25s var(--ease),opacity .25s var(--ease),scale .25s var(--ease)}
.fb__arrow:hover{background:rgb(25 21 18 / .78)}
.fb__arrow:active{scale:.92}
.fb__arrow:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fb__arrow svg{display:block}

.fb__arrow--prev{inset-inline-start:.9rem}
.fb__arrow--next{inset-inline-end:.9rem}

/* One chevron drawn pointing right; each button turns it toward the side it
   moves to, and Arabic swaps the sides. */
.fb__arrow--prev svg{rotate:180deg}
:dir(rtl) .fb__arrow--prev svg,[dir="rtl"] .fb__arrow--prev svg{rotate:0deg}
:dir(rtl) .fb__arrow--next svg,[dir="rtl"] .fb__arrow--next svg{rotate:180deg}

/* At the first story there is nothing before it. The button fades rather than
   vanishing, so the other arrow does not look like it moved. */
.fb__arrow:disabled{opacity:0;pointer-events:none}

/* ── the dots, under the stories ─────────────────────────────────────────── */

.fb__dots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.45rem;min-block-size:var(--fb-dots);padding-inline:1rem}

.fb__dot{position:relative;inline-size:.55rem;block-size:.55rem;padding:0;border-radius:999px;
  background:rgb(60 26 87 / .22);
  transition:inline-size .3s var(--ease),background-color .3s var(--ease)}
/* A dot is too small to hit with a thumb; the button it sits in is not. */
.fb__dot::before{content:"";position:absolute;inset:-.55rem -.25rem}
.fb__dot:hover{background:rgb(60 26 87 / .45)}
.fb__dot[aria-current="true"]{inline-size:1.6rem;background:var(--plum)}
.fb__dot:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* The class rules above set a display, which would otherwise beat `hidden`. */
.fb__arrow[hidden],.fb__dots[hidden]{display:none}

.fb__empty{padding-block:clamp(3rem,10vw,6rem);padding-inline:1.25rem}

/* ── the way out ─────────────────────────────────────────────────────────────
   Only ever drawn on a phone, where the page is a story app and there is no bar
   to go back from. A disc of the same smoked glass the arrows use, in the top
   corner the writing starts at. */
.fb__back{display:none}
.fb__back .icon{inline-size:1.15rem;block-size:1.15rem}

/* ── a phone: one story, the whole screen ─────────────────────────────────── */

@media(max-width:47.99rem){
  /* A story app, not a page with stories on it: the screen is the story and
     nothing is drawn over it but the way out. The bar, the bottom bar, the
     WhatsApp button and the footer are all taken off this one page — every one
     of them was a strip of furniture across somebody's photograph.

     The page does not scroll either. The slider moves sideways and there is
     nothing under it to reach. */
  body.hf-stories{padding-block:0;overflow:hidden}
  body.hf-stories main{padding-block-start:0}
  .hf-stories .tabbar,.hf-stories .wa,.hf-stories .foot{display:none}

  /* The bar stays, and is barely there: a breath of the page's cream over a
     blur, the way a story app keeps its own top row legible without printing a
     panel across the picture. Its mark goes, because the corner it stands in is
     where the way out is. */
  .hf-stories .bar,.hf-stories .bar.light{
    background:rgb(251 247 241 / .14);color:var(--cream);
    backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
    box-shadow:none}
  .hf-stories .bar .mark{display:none}
  /* The basket comes back to the bar here: the bottom bar it was handed to is
     not drawn on this page. */
  .hf-stories .bar .cartbtn{display:grid}
  .hf-stories .burger,.hf-stories .cartbtn{border-color:rgb(255 255 255 / .45);color:var(--cream)}

  .fb{position:relative}

  /* The one control. In Arabic it sits in the top right — where the writing
     starts, and where a thumb reaching for "back" goes. */
  .fb__back{position:fixed;z-index:70;
    inset-block-start:max(.9rem,env(safe-area-inset-top));inset-inline-start:.9rem;
    display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;border-radius:50%;
    color:var(--cream);background:rgb(25 21 18 / .5);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    box-shadow:0 .6rem 1.4rem -.6rem rgb(0 0 0 / .5)}
  .fb__back:active{scale:.92}
  .fb__back:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

  .fb__arrow{inline-size:2.5rem;block-size:2.5rem}
  .fb__arrow--prev{inset-inline-start:.75rem}
  .fb__arrow--next{inset-inline-end:.75rem}

  /* The dots sit on the picture, at the foot, in white — and only three of
     them: the script keeps a sliding window of three, and the rest are in the
     page but not drawn. */
  .fb__dots{position:absolute;z-index:2;inset-inline:0;
    inset-block-end:max(.9rem,env(safe-area-inset-bottom));min-block-size:0;pointer-events:none}
  .fb__dot{pointer-events:auto;background:rgb(255 255 255 / .5);
    box-shadow:0 0 0 1px rgb(0 0 0 / .08),0 1px 3px rgb(0 0 0 / .3)}
  .fb__dot:hover{background:rgb(255 255 255 / .75)}
  .fb__dot[aria-current="true"]{background:#fff}
  .fb__dot--away{display:none}

  .fb__list{block-size:100svh}
  .fb__slide{block-size:100%;padding:0}

  /* The whole screen is the frame, and the story is shown whole inside it: full
     height always, its own width at that height, centred on the ink. Cropping
     the sides to fill the screen cut the edge off a screenshot of a
     conversation — and the edge of a conversation is where the words are. */
  .fb__story{inline-size:100%;block-size:100%;aspect-ratio:auto;border-radius:0;box-shadow:none}
  img.fb__media,video.fb__media,.fb__link img{object-fit:contain;object-position:center}

}

/* ── wider: two stories ──────────────────────────────────────────────────── */

@media(min-width:48rem){
  .fb{--fb-gap:clamp(.9rem,2vw,1.4rem);
    padding-block:clamp(1.25rem,3vw,2.25rem) clamp(2.5rem,5vw,4rem);
    padding-inline:clamp(1rem,4vw,2.5rem)}

  /* As wide as two 9:16 stories that fit the window's height whole — a story
     taller than the window is a story you cannot see all of. */
  .fb__slider{inline-size:min(100%,calc((100svh - var(--barh) - var(--fb-dots) - 4.5rem) * 9 / 16 * 2 + var(--fb-gap)))}

  .fb__slide{flex-basis:calc((100% - var(--fb-gap)) / 2)}
  .fb__story{inline-size:100%}

  /* A stop is a pair, so only the first story of each pair is a place to stop.
     With every story a snap point, a swipe — and the arrows, and the dots — could
     only ever move one story, because the snap would not let them pass the next.
     An odd last story still gets its own stop, at the end. */
  .fb__slide{scroll-snap-align:none}
  .fb__slide:nth-child(odd),.fb__slide:last-child{scroll-snap-align:start}
  .fb__slide:last-child:nth-child(even){scroll-snap-align:end}

  /* The arrows sit over the outer edge of each outer story. */
  .fb__arrow--prev{inset-inline-start:1rem}
  .fb__arrow--next{inset-inline-end:1rem}
}

@media(prefers-reduced-motion:reduce){
  .fb__list{scroll-behavior:auto}
  .fb__arrow,.fb__dot{transition:none}
}