/* The new Signal page, on trial at /signal/new (public/js/features/signal-next.js).

   The same page as /signal, with the wall of tiles swapped for three ways to read the week. Every surface here is
   one the site already has: the chips of the filter row, the card that opens over the wall, the card's own "Until
   now" and "Now", and the September radar. MC, 12 October, on the first try-out: "looking very ugly... feels very
   ugly". It had been built on a look-alike of the site, with its own pills, boxes and labels. This file only lays
   the site's own parts out; it adds no new look.

   One meaning per gesture on a phone, kept from 4.80: up and down scrolls, sideways is the next or the previous
   signal, a tap opens, a pull down or the back gesture closes. */

.sx { margin-top: 8px; }
.sx > [data-static] { display: none; }

/* The three ways in: the filter row's own chips, without the dimension dot. */
.sx-views { display: flex; gap: 7px; margin: 0 0 16px; }
.sx-view {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px;
  border: 1px solid #e3e3df; border-radius: 999px; background: #fff;
  font: inherit; font-size: 14px; color: #4b4f4a; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.sx-view svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sx-view:hover { border-color: #16171a; color: #16171a; }
.sx-view[aria-selected="true"] { background: #16171a; border-color: #16171a; color: #fff; }
.sx-pane[hidden] { display: none; }

/* ------------------------------------------------------------------ Read: one card at a time

   The cards sit side by side and the browser does the swiping, so a card follows the thumb and keeps its
   momentum. Each is the card that opens over the wall on /signal, at its own height. */
.sx-pager { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none; transition: height .3s cubic-bezier(.16, 1, .3, 1); }
.sx-pager::-webkit-scrollbar { display: none; }
.sx-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; padding-inline: 1px; }
.sx-slide > .story-card { margin: 0; height: auto; border-radius: 18px; border: 1px solid #e6e6e2; }
.sx-slide .deck-loading { border: 1px solid #e6e6e2; }

/* Where you are, and the way on, under the thumb. */
.sx-bar { position: sticky; bottom: 0; z-index: 5; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px;
  margin-top: 10px; padding: 10px 2px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fcfcfbf0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sx-step { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #00000021; border-radius: 50%;
  background: #fff; color: #444; cursor: pointer; }
.sx-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sx-step:hover { border-color: #16171a; color: #16171a; }
.sx-step[disabled] { opacity: .35; cursor: default; }
.sx-where { display: grid; gap: 7px; min-width: 0; }
.sx-track { height: 2px; border-radius: 1px; background: #e6e6e2; overflow: hidden; }
.sx-track i { display: block; height: 100%; background: #3f7fd6; transition: width .3s cubic-bezier(.16, 1, .3, 1); }
.sx-pos { font-size: 12px; letter-spacing: .06em; color: #6a6e67; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Changes: what each move overturned

   The card's own two boxes, one at a time on a tile that flips: "Now" first, a tap for "Until now". */
.sx-changes { display: grid; gap: 12px; }
@media (min-width: 900px) { .sx-changes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-flip { --dc: #9aa79b; display: flex; flex-direction: column; gap: 12px; padding: 15px; border: 1px solid #e6e6e2; border-radius: 12px; background: #fbfbfa; }
.sx-flip .deck-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sx-turn { position: relative; display: grid; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; perspective: 1100px; }
.sx-turn-in { display: grid; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.3, .45, 1); }
.sx-turn[aria-pressed="true"] .sx-turn-in { transform: rotateX(180deg); }
.sx-face { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; padding: 16px 18px; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sx-face.now { background: #edf4ff; }
.sx-face.was { background: #f6f6f3; transform: rotateX(180deg); }
.sx-face span { font-size: 12px; letter-spacing: .01em; text-transform: none; color: #6a6e67; }
.sx-face p { margin: 0; font-size: 17px; line-height: 1.5; color: #16171a; text-wrap: pretty; }
.sx-face.was p { color: #33373a; }
.sx-face small { font-size: 12px; color: #6a6e67; }
.sx-open { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 0 0; border: 0; background: none; color: #33373a;
  font: inherit; font-size: 14px; line-height: 1.45; text-align: left; cursor: pointer; }
.sx-open b { flex: none; font-weight: 500; color: #246ac5; white-space: nowrap; }
.sx-open:hover span { color: #16171a; }

/* ------------------------------------------------------------------ Radar: the September radar, in the page

   Angle is the dimension, distance from the middle is how many days ago, size and colour are strength. A tap on a
   direction lights it and lists its signals underneath; a tap on a dot opens it. */
.sx-radar { color: #f2f2ef; border-radius: 18px; padding: 16px 16px 18px;
  background: radial-gradient(120% 90% at 50% 45%, #1b1c1f 0%, #101113 70%, #0b0c0d 100%); }
.sx-radar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sx-radar-head .eyebrow { margin: 0; font-size: 11px; letter-spacing: .01em; color: #ffffff8c; }
.sx-legend { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #ffffff8c; }
.sx-legend i { width: 9px; height: 9px; border-radius: 50%; }
.sx-scope { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sx-scope svg { display: block; width: 100%; height: auto; max-height: min(70vh, 640px); margin: 4px auto 0; }
/* the dimension names, readable on a phone: the radar is drawn 580 wide and shown about 350 wide there */
.sx-scope .sky-label { cursor: pointer; font-size: 13px; letter-spacing: .08em; }
@media (min-width: 700px) { .sx-scope .sky-label { font-size: 10px; letter-spacing: .12em; } }
.sx-scope .sky-dot.dim circle { opacity: .18; }
.sx-scope .sky-slice { fill: transparent; cursor: pointer; }
.sx-radar-foot { min-height: 54px; display: grid; justify-items: center; text-align: center; }
.sx-radar-name { margin: 0; font-size: clamp(18px, 3vw, 24px); font-weight: 500; letter-spacing: -.01em; }
.sx-radar-name b { font-weight: 500; text-transform: capitalize; }
.sx-radar-sub { margin: 5px 0 0; max-width: 52ch; font-size: 13px; line-height: 1.5; color: #ffffff8c; }
.sx-lit { display: grid; gap: 8px; margin-top: 12px; }
.sx-lit:empty { display: none; }
.sx-lit .deck-tile { min-height: 0; }
.sx-lit .deck-hook { -webkit-line-clamp: unset; display: block; font-size: 15px; line-height: 1.42; }

/* ------------------------------------------------------------------ a card over the page

   The overlay /signal already has, with the cards of the set beside each other inside it. */
.sx-veil { padding: 16px; }
.sx-sheet { display: flex; flex-direction: column; width: min(940px, 100%); height: min(88vh, 1100px); max-height: none; overflow: hidden; background: #fbfbfa; will-change: transform; }
.sx-grab { display: none; }
.sx-sheet-reader { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sx-sheet-reader .sx-pager { flex: 1 1 auto; min-height: 0; align-items: stretch; }
.sx-sheet-reader .sx-slide { height: 100%; overflow-y: auto; overscroll-behavior-y: contain; padding-inline: 0; }
.sx-sheet-reader .sx-slide > .story-card { border: 0; border-radius: 0; }
.sx-sheet-reader .sx-bar { margin-top: 0; padding-inline: 12px; border-top: 1px solid #ececE8; }
.sx-sheet .deck-x { top: 12px; right: 12px; }
/* the close button keeps clear of the card's first line */
.sx-sheet .sgr-head { padding-right: 64px; }
@media (max-width: 700px) {
  .sx-veil { padding: 0; place-items: end stretch; }
  .sx-sheet { width: 100%; height: calc(100svh - 12px - env(safe-area-inset-top, 0px)); border-radius: 18px 18px 0 0; animation: sx-rise .36s cubic-bezier(.16, 1, .3, 1); }
  .sx-grab { display: block; flex: none; height: 18px; touch-action: none; }
  .sx-grab::before { content: ""; display: block; width: 40px; height: 5px; margin: 7px auto 0; border-radius: 3px; background: #d4d4ce; }
  .sx-sheet .deck-x { top: 20px; width: 40px; height: 40px; font-size: 19px; }
  /* Pixel keeps the bottom right corner of the page; the way on sits just inside him */
  .sx-pane > .sx-bar { padding-right: 58px; }
}
@keyframes sx-rise { from { transform: translateY(55%); opacity: .4; } }


@media (prefers-reduced-motion: reduce) {
  .sx-pager, .sx-track i, .sx-turn-in, .sx-view { transition: none; }
  .sx-sheet { animation: none; }
}