/*
 * Mobile-first layer for the story reading page (`/stories/{slug}`) -- design/wpa-dev.md §11.
 *
 * Loaded only by Stories/Detail.cshtml, the same pattern as book.css/chat.css/browse.css. The
 * page had no dedicated stylesheet before this; site.css's .story/.story__* rules are the desktop
 * layout and stay exactly as they were -- everything below is either unstyled at desktop widths or
 * an explicit @media (max-width: 48rem) override.
 */

/* ---------- sticky compact header ----------
 *
 * Appears once the reader has scrolled past the title, not present at the very top -- the whole
 * point is to maximise initial reading space, so a header that were visible from the first frame
 * would cost exactly the space this is trying to give back. story-mobile.js toggles the visible
 * state and aria-hidden together.
 */
/*
 * Removed per request: on scroll this used to replace .mobile-nav with a compact back/title/progress
 * ribbon. Kept as display:none (rather than deleting the markup/story-mobile.js toggle) so the
 * sentinel logic driving it stays a harmless no-op instead of needing a matching JS change.
 */
.story-mobile-header {
  display: none;
}

.story-mobile-header__back {
  flex: none;
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-lg);
  padding: var(--space-1) var(--space-2);
  margin-inline-start: calc(-1 * var(--space-2));
}

.story-mobile-header__title {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 600;
}

.story-mobile-header__progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--color-border-subtle);
}

.story-mobile-header__progress span {
  display: block;
  block-size: 100%;
  inline-size: 0%;
  background: var(--color-accent-bright);
}

/* ---------- prev/next glass cards ----------
 *
 * The two links at the foot of the story, and on a phone the two halves of the fixed bottom bar.
 * They are the only way onward from the end of a story, so they are built to read as buttons at a
 * glance rather than as the pair of tinted titles they used to be.
 *
 * "Glass" here is three layers over whatever the page is showing through them: a translucent surface
 * fill, a blur behind it, and a one-pixel top highlight that stands in for a lit edge. The canvas is
 * dark (tokens.css is dark-only), so the highlight is white at very low alpha and the depth cue is
 * lightness, not shadow -- shadows barely register on #0d1512, which is the same reason elevation
 * elsewhere in the design system steps up in surface lightness.
 *
 * Everything below is shared by both breakpoints. The mobile section further down changes the
 * layout of these cards, never their material.
 *
 * --nav-glass-* are local to this file: they are not theme decisions the way tokens.css's semantics
 * are, just the three values the three surfaces in this bar (prev, share, next) have to agree on.
 */
.story-nav {
  --nav-glass-fill: color-mix(in oklab, var(--color-surface) 55%, transparent);
  --nav-glass-line: color-mix(in oklab, var(--color-border-strong) 75%, transparent);
  --nav-glass-blur: blur(14px) saturate(140%);
}

.story-nav__link {
  /* isolation + overflow keep the sheen sweep (::before) inside the rounded card and behind the
     content without it escaping into the page's own stacking context. */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--nav-glass-line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.015) 45%,
      rgba(255, 255, 255, 0) 100%),
    var(--nav-glass-fill);
  backdrop-filter: var(--nav-glass-blur);
  -webkit-backdrop-filter: var(--nav-glass-blur);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 12px 28px -20px rgba(0, 0, 0, 0.9);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease;
}

/* Each card's content hugs the edge its arrow points at, so the pair reads as two arrows leaving in
   opposite directions rather than as two centred blocks that happen to face away from each other. */
.story-nav__link--next { justify-content: flex-end; }

/* The arrow disc. Round against the card's rounded rectangle, and the only saturated thing in the
   bar -- it is what the eye lands on, and the label beside it is what confirms the direction. */
.story-nav__arrow {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.15rem;
  block-size: 2.15rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
  background: color-mix(in oklab, var(--color-accent-soft) 60%, transparent);
  color: var(--color-accent-bright);
  font-size: var(--text-base);
  line-height: 1;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    /* Overshoots slightly: the arrow should feel like it is being pulled the way it points, and a
       linear slide of four pixels reads as a rendering glitch rather than as motion. */
    translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.story-nav__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.story-nav__link--next .story-nav__text { text-align: end; }

.story-nav__label {
  font-size: var(--text-xs);
  line-height: 1.2;
  color: var(--color-text-muted);
  transition: color 0.25s ease;
}

.story-nav__title {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  color: var(--color-text);
  /* One line, always: a two-line title would make the two cards different heights. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The sweep. A soft diagonal band of the mint accent crossing the card once per hover, which is the
   one gesture that says "glass" rather than "translucent panel". z-index -1 puts it under the arrow
   and the text, so it lights them from behind instead of washing over them. */
.story-nav__link::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: linear-gradient(105deg,
    transparent 32%,
    color-mix(in oklab, var(--color-accent-bright) 20%, transparent) 48%,
    transparent 64%);
  translate: -160% 0;
  opacity: 0;
  /* Off-hover the band must not slide back across the card -- that would read as a second, backwards
     sweep. It fades out where it stopped, and the position resets only once it is invisible. */
  transition: translate 0s linear 0.3s, opacity 0.3s ease;
}

/* Hover effects only where hovering is real. On a touch screen :hover sticks after a tap, which
   would leave whichever button the reader last pressed lit until they navigated away. */
@media (hover: hover) {
  .story-nav__link:hover {
    border-color: color-mix(in oklab, var(--color-accent) 45%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(0, 0, 0, 0.28),
      0 18px 34px -22px rgba(0, 0, 0, 0.95),
      0 0 0 1px color-mix(in oklab, var(--color-accent) 12%, transparent);
    translate: 0 -2px;
  }

  .story-nav__link:hover::before {
    translate: 160% 0;
    opacity: 1;
    transition: translate 0.8s ease-out, opacity 0.25s ease;
  }

  .story-nav__link:hover .story-nav__arrow {
    background: color-mix(in oklab, var(--color-accent) 32%, transparent);
    border-color: color-mix(in oklab, var(--color-accent-bright) 50%, transparent);
    box-shadow:
      0 0 0 4px color-mix(in oklab, var(--color-accent) 10%, transparent),
      0 0 20px -4px var(--color-accent);
  }

  /* Physical X, not a logical property: `translate` is never flipped by direction: rtl, so each
     arrow has to be told which way its own glyph points. */
  .story-nav__link--prev:hover .story-nav__arrow { translate: 5px 0; }
  .story-nav__link--next:hover .story-nav__arrow { translate: -5px 0; }

  .story-nav__link:hover .story-nav__label { color: var(--color-accent-bright); }
}

/* The press, which is the only feedback a touch reader gets from the two rules above. */
.story-nav__link:active {
  translate: 0 0;
  scale: 0.985;
  transition-duration: 0.08s;
}

.story-nav__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* The placeholder that keeps the remaining link on its own side when there is no story the other
   way -- the dibacha has no previous, story 313 has no next. Empty, so it draws nothing. */
.story-nav__spacer { flex: 1 1 0; }

/* ---------- bottom prev/next bar ----------
 *
 * The same cards, repositioned rather than duplicated: two large thumb-reachable tap targets pinned
 * to the bottom of the viewport instead of links at the end of a long scroll. A visitor above this
 * breakpoint gets exactly the inline pair above.
 */
@media (max-width: 48rem) {
  /* Space for the fixed bar so it never covers the last lines of the story or the sources list. */
  .story { padding-block-end: calc(var(--space-8) + env(safe-area-inset-bottom)); }

  .story-nav {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 45;
    margin: 0;
    border-block-start: 1px solid color-mix(in oklab, var(--color-border-strong) 60%, transparent);
    border-block-end: 0;
    padding: var(--space-3) var(--space-4);
    padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
    /* The bar is glass over the prose scrolling underneath it, so its own fill is thinner than the
       cards' and the blur heavier -- the cards have to stay legible against it. */
    background: color-mix(in oklab, var(--color-canvas) 82%, transparent);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 -12px 30px -24px rgba(0, 0, 0, 0.95);
    gap: var(--space-2);
  }

  /* A hairline of the accent along the bar's top edge, brightest in the middle: it separates the bar
     from the text passing behind it far more cleanly than a solid border can at this transparency. */
  .story-nav::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: -1px;
    block-size: 1px;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in oklab, var(--color-accent-bright) 35%, transparent),
      transparent);
    pointer-events: none;
  }

  /*
   * Icon-only per request: the arrow alone is enough to say "prev"/"next" on a bottom bar two thumbs
   * ever reach for, and the title was the reason this bar needed its text truncated in the first
   * place. Both the eyebrow and the title stay in the DOM and in the accessible name (visually
   * hidden, not display:none), so a screen-reader visitor still hears which way each button goes and
   * which story it leads to -- only the sighted presentation changes.
   */
  .story-nav__link {
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
  }

  .story-nav__link--next { justify-content: center; }

  .story-nav__text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .story-nav__arrow { font-size: var(--text-lg); }
}

/* ---------- inside the story modal ----------
 *
 * /search opens a result in a <dialog> holding this exact article, fetched from /stories/{slug} (see
 * story-modal.js). Every rule in this file therefore applies there too, which is what keeps the modal
 * from drifting into a second, differently-styled rendering of a story -- and is why Search.cshtml
 * loads this stylesheet at all.
 *
 * One premise does not survive the move: the phone layer above assumes the article owns the viewport.
 * In the dialog it owns a scrolling well a few centimetres tall, so a bar pinned to the bottom of the
 * viewport would sit outside the surface it belongs to -- position: fixed resolves against the
 * viewport, and the dialog is in the top layer, so the bar would float over the modal's own chrome
 * rather than sit at the end of the story. Below is that premise withdrawn, and nothing else: the
 * cards keep their glass, their motion and their arrows, and simply go back to being the row at the
 * foot of the prose that they are above the breakpoint.
 */
@media (max-width: 48rem) {
  /* Reserved for a fixed bar that is not here. */
  .story-modal__body .story { padding-block-end: 0; }

  .story-modal__body .story-nav {
    position: static;
    z-index: auto;
    margin-block-start: var(--space-7);
    padding: 0;
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border-subtle);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    gap: var(--space-3);
  }

  /* The accent hairline marks the top edge of a bar. There is no bar. */
  .story-modal__body .story-nav::before { display: none; }

  /* Titles come back with the bar gone: two icon-only buttons work pinned under the reader's thumbs,
     where the bar itself is the context, but at the end of a story they are two arrows and no answer
     to "to what?". */
  .story-modal__body .story-nav__link {
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
  }

  .story-modal__body .story-nav__link--next { justify-content: flex-end; }

  .story-modal__body .story-nav__text {
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    white-space: normal;
  }

  /* And the share control goes back to the copy above the title, which is the one that does not
     assume a bottom bar to sit in the middle of. */
  .story-modal__body .share--inline { display: flex; }
  .story-modal__body .share--nav { display: none; }
}

/* ---------- share menu ----------
 *
 * One control, rendered twice by Detail.cshtml: `--inline` above the title (desktop) and `--nav`
 * inside the fixed prev/next bar (mobile). Exactly one is displayed at any width, so the hidden copy
 * is out of the tab order and out of the accessibility tree rather than merely invisible.
 *
 * Built on <details>, so the open/closed state is the element's own and needs no script. The default
 * disclosure triangle is removed on both engines -- this reads as a button, and a marker beside the
 * share glyph would say "expand" where the glyph already says "send".
 */
.share__details { position: relative; }

/* The same glass material as the prev/next cards above -- on a phone this button sits between them
   and has to look like it belongs to the set, and on desktop the pair of them are the two actions a
   finished story offers, so a matching surface is right in both places. */
.share__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid color-mix(in oklab, var(--color-border-strong) 75%, transparent);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.015) 45%,
      rgba(255, 255, 255, 0) 100%),
    color-mix(in oklab, var(--color-surface) 55%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 12px 28px -20px rgba(0, 0, 0, 0.9);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  /* Both are needed: the modern property, and the WebKit pseudo-element it replaced. */
  list-style: none;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, translate 0.25s ease;
}

.share__trigger::-webkit-details-marker { display: none; }

.share__trigger:hover,
.share__details[open] .share__trigger {
  color: var(--color-accent-bright);
  border-color: color-mix(in oklab, var(--color-accent) 45%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 18px 34px -22px rgba(0, 0, 0, 0.95),
    0 0 0 1px color-mix(in oklab, var(--color-accent) 12%, transparent);
}

/* Only the closed button lifts. An open menu is anchored to the button, and moving the thing the
   sheet hangs off while the sheet is on screen looks like a mis-positioned popover. */
@media (hover: hover) {
  .share__details:not([open]) .share__trigger:hover { translate: 0 -2px; }
}

.share__trigger:active {
  translate: 0 0;
  scale: 0.985;
  transition-duration: 0.08s;
}

.share__icon {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: none;
}

.share__menu {
  position: absolute;
  z-index: 40;
  min-inline-size: 12rem;
  padding: var(--space-2);
  border: 1px solid color-mix(in oklab, var(--color-border-strong) 80%, transparent);
  border-radius: var(--radius-md);
  /* Denser than the button that opens it -- a menu has to be readable over whatever it covers -- but
     the same material, so it reads as the button expanding rather than a different panel arriving. */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%),
    color-mix(in oklab, var(--color-surface-raised) 88%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 40px -18px rgba(0, 0, 0, 0.75);
}

.share__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.share__item:hover {
  background: var(--color-surface);
  color: var(--color-accent-bright);
}

/* Confirmation after a copy, held for a couple of seconds by share.js. */
.share__item--done { color: var(--color-accent-bright); }

.share__item-icon {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  flex: none;
}

.share__item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The inline (desktop) copy sits on its own line above the title, pushed to the far edge: the number
   line and the title itself both start at the reading edge, and putting the button there too would
   have it read as part of the heading rather than as an action beside it. */
.share--inline {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--space-3);
}

.share--inline .share__menu {
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
}

/* Hidden until the mobile layer below turns it on. */
.share--nav { display: none; }

@media (max-width: 48rem) {
  .share--inline { display: none; }

  /* Third item in the bottom bar, sized to its content so prev/next keep splitting the rest. */
  .share--nav {
    display: flex;
    flex: none;
  }

  /* The menu is positioned against .story-nav itself, not the button: the bar is already a fixed
     containing block, and anchoring to it gives a sheet spanning the bar's width instead of a
     narrow dropdown hanging off a centred button, with no centring maths and nothing to clip at
     either screen edge. */
  .share--nav .share__details { position: static; }

  .share--nav .share__menu {
    /* Against the bar's padding box, which spans the viewport -- the bar has no inline borders --
       so this lines the menu's edges up with the prev/next buttons underneath it. */
    inset-inline: var(--space-4);
    inset-block-end: calc(100% + var(--space-3));
    /* Two columns: six entries stacked would be a menu taller than the phone it opens on. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
  }

  /* Matches the prev/next cards flanking it exactly -- same padding, same radius, same glass, and
     icon-only for the same reason they are: three labels do not fit across a phone. The label stays
     in the DOM as the button's accessible name -- visually hidden, exactly as .story-nav__text is. */
  .share--nav .share__trigger {
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-text);
  }

  .share--nav .share__trigger-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The share glyph becomes a disc, so all three buttons in the bar carry the same round accent mark
     at the same size and the middle one does not read as a smaller, lesser control. */
  .share--nav .share__icon {
    box-sizing: border-box;
    inline-size: 2.15rem;
    block-size: 2.15rem;
    padding: 0.42rem;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--color-accent) 30%, transparent);
    background: color-mix(in oklab, var(--color-accent-soft) 60%, transparent);
    color: var(--color-accent-bright);
    transition:
      background-color 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease,
      translate 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* The share mark points up, so it lifts where the arrows slide sideways -- the same "pulled the way
     it points" motion, read against this glyph's own direction. Open counts as active here: the
     button stays lit for as long as its menu is on screen. */
  .share--nav .share__details[open] .share__icon,
  .share--nav .share__trigger:active .share__icon {
    background: color-mix(in oklab, var(--color-accent) 32%, transparent);
    border-color: color-mix(in oklab, var(--color-accent-bright) 50%, transparent);
    box-shadow:
      0 0 0 4px color-mix(in oklab, var(--color-accent) 10%, transparent),
      0 0 20px -4px var(--color-accent);
    translate: 0 -3px;
  }

  /* The menu's links are plain rows, not cards: .story-nav__link is class-scoped so nothing leaks
     into them, but they still need their own padding inside the bar's sheet. */
  .story-nav .share__menu a.share__item {
    justify-content: flex-start;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
  }
}

/* ---------- tap-to-open citations ----------
 *
 * A bottom sheet rather than the hover/focus preview footnotes.js draws on desktop -- there is no
 * touch equivalent for hover. Reuses the <dialog> mechanism the home page's story-summary panel
 * already established (showModal/::backdrop), just shaped as a sheet sliding up from the edge
 * instead of a hinged panel. The marker underneath stays a real anchor to #cite-N regardless.
 */
/* The UA stylesheet already hides a <dialog> without [open] and shows it as a block once open; only
   its position, size and skin are styled here, restricted to mobile, since story-mobile.js never
   calls showModal() above this breakpoint. */
@media (max-width: 48rem) {
  .citation-sheet[open] {
    inset-inline: 0;
    inset-block-end: 0;
    inset-block-start: auto;
    margin: 0;
    inline-size: 100%;
    max-inline-size: 100%;
    max-block-size: 70vh;
    padding: var(--space-5);
    padding-block-end: max(var(--space-5), env(safe-area-inset-bottom));
    border: 0;
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
    background: var(--color-surface-raised);
    color: var(--color-text);
    box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.7);
    animation: citation-sheet-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .citation-sheet::backdrop {
    background: rgba(3, 5, 10, 0.72);
    backdrop-filter: blur(6px);
  }

  @keyframes citation-sheet-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .citation-sheet[open] { animation: none; }
  }
}

.citation-sheet__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.citation-sheet__number {
  color: var(--color-citation);
  font-weight: 700;
  margin: 0 var(--space-6) var(--space-2) 0;
}

.citation-sheet__text {
  color: var(--color-text-secondary);
  line-height: var(--leading-prose);
  margin: 0;
}

/* ---------- reading typography ----------
 *
 * A phone's comfortable character-per-line count is well short of the desktop 60ch measure, and it
 * is read at arm's length rather than monitor distance, so the effective size goes up slightly while
 * the measure comes down -- verse/quotation blocks keep their existing turquoise treatment
 * unchanged, this only touches size and width.
 */
@media (max-width: 48rem) {
  .story { max-inline-size: 38ch; }

  .story__body { font-size: 1.167rem; }
}

/* ---------- verse/quotation box sizing ----------
 *
 * Poem (.verse/.bayt) and Quran/hadith (.quotation) boxes at 80% of their desktop padding, margin
 * and type size per request -- on a phone they were reading as oversized relative to the body prose
 * around them. The turquoise/verse-tint treatment itself is untouched, only size.
 */
@media (max-width: 48rem) {
  .verse {
    padding: calc(var(--space-6) * 0.8) calc(var(--space-5) * 0.8);
    margin-block: calc(var(--space-6) * 0.8);
  }

  .bayt { font-size: calc(var(--text-lg) * 0.8); }

  .quotation {
    font-size: calc(var(--text-quote) * 0.8);
    padding: calc(var(--space-5) * 0.8);
    margin-block: calc(var(--space-6) * 0.8);
  }

  .quotation__translation { font-size: calc(var(--text-base) * 0.8); }
}

/* ---------- reduced motion ----------
 *
 * site.css already zeroes every transition duration site-wide, which leaves the prev/next and share
 * hover states snapping in rather than easing -- no movement, so nothing more is owed there. The
 * sweep is the one effect that is *only* movement: with nothing to travel it would sit as a fixed
 * stripe across the card, so it is dropped outright, and the lift and the arrow's slide go with it.
 * What survives is the colour change, which still says "this is the one you are pointing at".
 *
 * Last in the file on purpose: several of the rules it undoes are inside the mobile layer above and
 * are no more specific than these, so source order is what decides it.
 */
@media (prefers-reduced-motion: reduce) {
  .story-nav__link::before { display: none; }

  .story-nav__link:hover,
  .story-nav__link:active,
  .share__details:not([open]) .share__trigger:hover,
  .share__trigger:active {
    translate: none;
    scale: none;
  }

  /* Both modifiers spelled out rather than the shared .story-nav__link: the rules being undone are
     per-direction, and a selector one class lighter than them would simply lose. */
  .story-nav__link--prev:hover .story-nav__arrow,
  .story-nav__link--next:hover .story-nav__arrow,
  .share--nav .share__details[open] .share__icon,
  .share--nav .share__trigger:active .share__icon {
    translate: none;
  }
}