/* ============================================================ */
/* Software Atelier — the software-engineering showcase          */
/* Six living product mock-UIs (music, OTT, commerce, logistics, */
/* CRM, social) inside a cinematic browser frame.                */
/*                                                               */
/* Used in two arrangements:                                     */
/*   .sw-shell        gallery (tab rail + stage), index.html and */
/*                    software.html                              */
/*   .sw-stage--solo  a single always-running demo embedded on   */
/*                    the dedicated domain pages                 */
/* The mock markup itself lives in partials/sw/*.html and is     */
/* stitched in server-side (SSI), so both arrangements share it. */
/*                                                               */
/* Theme-aware: every chrome/app surface uses the --base/--t-*   */
/* tokens so the mock apps flip cleanly between dark and light.  */
/* Driven by js/software-showcase.js (tabs, autoplay, tickers).  */
/* ============================================================ */

.sw-atelier {
  position: relative;
}

/* soft aurora behind the stage, echoing .mxd-aistack__glow */
.sw-atelier__glow {
  position: absolute;
  inset: -12% -8%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 48% at 78% 18%, rgba(var(--accent-rgb), 0.12), transparent 70%),
    radial-gradient(40% 46% at 12% 86%, rgba(var(--additional-rgb), 0.12), transparent 72%);
  filter: blur(24px);
  opacity: 0.9;
  animation: sw-aurora 20s ease-in-out infinite alternate;
}

@keyframes sw-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

.sw-atelier > * { position: relative; z-index: 1; }

/* The demos are click-driven UI chrome, not copy — rapid/double
   clicks must not smear text selection across them. */
.sw-rail,
.sw-stage,
.sw-caption-rail {
  -webkit-user-select: none;
  user-select: none;
}

/* ------------------------------------------------------------ */
/* Shell: tab rail + stage column                                */
/* ------------------------------------------------------------ */
.sw-shell {
  display: grid;
  grid-template-columns: minmax(25rem, 31rem) minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
}

.sw-stagecol {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}

/* ---- tab rail ---- */
.sw-rail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
}

.sw-tab {
  position: relative;
  /* desktop: the six tabs share the rail height so the rail always
     lines up exactly with the stage + caption column beside it */
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon name index"
    "icon hint index";
  column-gap: 1.4rem;
  row-gap: 0.3rem;
  align-content: center;
  align-items: center;
  width: 100%;
  padding: 1.4rem 1.8rem 1.6rem;
  border: 1px solid var(--st-muted);
  border-radius: 1.8rem;
  background-color: var(--base-tint);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.4s ease,
              background-color 0.4s ease,
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.no-touch .sw-tab:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  transform: translateY(-2px);
}

.sw-tab.is-active {
  border-color: rgba(var(--accent-rgb), 0.45);
  background-image: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.09),
    rgba(var(--accent-rgb), 0.02) 55%,
    rgba(var(--additional-rgb), 0.07));
}

.sw-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sw-tab__icon {
  grid-area: icon;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 1.2rem;
  background-color: rgba(var(--accent-rgb), 0.08);
  color: var(--t-muted);
  font-size: 2.2rem;
  transition: color 0.35s ease, background-color 0.35s ease;
}

.sw-tab.is-active .sw-tab__icon {
  color: var(--accent);
  background-color: rgba(var(--accent-rgb), 0.14);
}

.sw-tab__name {
  grid-area: name;
  font-family: var(--_font-accent);
  font-size: 1.7rem;
  font-weight: var(--fw-medium);
  line-height: 1.2;
  color: var(--t-bright);
}

.sw-tab__hint {
  grid-area: hint;
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--t-muted);
}

.sw-tab__index {
  grid-area: index;
  align-self: start;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--t-muted-extra);
  font-variant-numeric: tabular-nums;
}

/* autoplay progress hairline along the bottom edge of the active tab */
.sw-tab__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.3rem;
  background-color: rgba(var(--accent-rgb), 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sw-tab.is-active .sw-tab__progress { opacity: 1; }

.sw-tab__progress i {
  display: block;
  height: 100%;
  width: 100%;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ------------------------------------------------------------ */
/* Stage: browser chrome + screen                                */
/* ------------------------------------------------------------ */
.sw-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background-color: var(--base-tint);
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),
    0 24px 60px -28px rgba(0, 0, 0, 0.45);
}

.sw-chrome {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.2rem 1.8rem;
  border-bottom: 1px solid var(--st-muted);
  background-color: var(--base-tint);
}

.sw-chrome__dots {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.sw-chrome__dots i {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--st-muted);
}

.sw-chrome__dots i:nth-child(1) { background-color: #f16a5d; }
.sw-chrome__dots i:nth-child(2) { background-color: #f5bf4f; }
.sw-chrome__dots i:nth-child(3) { background-color: #62c554; }

.sw-chrome__url {
  flex: 1;
  min-width: 0;
  max-width: 34rem;
  margin-inline: auto;
  padding: 0.55rem 1.6rem;
  border-radius: 100px;
  background-color: var(--base);
  border: 1px solid var(--st-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.2rem;
  color: var(--t-muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-chrome__live {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.sw-chrome__live i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: #62c554;
  box-shadow: 0 0 0 0 rgba(98, 197, 84, 0.5);
  animation: sw-live 2.2s ease-out infinite;
}

@keyframes sw-live {
  0%       { box-shadow: 0 0 0 0 rgba(98, 197, 84, 0.5); }
  70%,100% { box-shadow: 0 0 0 8px rgba(98, 197, 84, 0); }
}

/* deep-link to the dedicated domain page, styled as a chrome control */
.sw-chrome__open {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  border: 1px solid var(--st-muted);
  color: var(--t-muted);
  font-size: 1.5rem;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.no-touch .sw-chrome__open:hover {
  color: var(--t-bright);
  border-color: rgba(var(--accent-rgb), 0.5);
  background-color: rgba(var(--accent-rgb), 0.1);
}

.sw-screen {
  position: relative;
  flex: 1;
  /* tall enough for the tallest composed mock at every width; the
     per-app layouts below flex to absorb the rest */
  min-height: clamp(44rem, 50vw, 56rem);
  background-color: var(--base);
}

/* panel crossfade */
.sw-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.4rem) scale(0.99);
  transition: opacity 0.55s var(--_animbezier),
              transform 0.55s var(--_animbezier),
              visibility 0s linear 0.55s;
  pointer-events: none;
  overflow: hidden;
}

.sw-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.08s, 0.08s, 0s;
  pointer-events: auto;
}

/* ---- solo stage (dedicated domain pages) ---- */
.sw-stage--solo {
  flex: none;
}

.sw-stage--solo .sw-screen {
  min-height: clamp(42rem, 46vw, 56rem);
}

/* ------------------------------------------------------------ */
/* Caption rail: per-platform engineering specs + deep link      */
/* ------------------------------------------------------------ */
.sw-caption-rail {
  position: relative;
  display: grid;
}

.sw-caption {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--st-muted);
  border-radius: 1.6rem;
  background-color: var(--base-tint);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6rem);
  transition: opacity 0.45s var(--_animbezier),
              transform 0.45s var(--_animbezier),
              visibility 0s linear 0.45s;
  pointer-events: none;
}

.sw-caption.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.1s, 0.1s, 0s;
  pointer-events: auto;
}

.sw-caption__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  min-width: 0;
}

.sw-spec {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.2rem;
  border-radius: 100px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  background-color: rgba(var(--accent-rgb), 0.05);
  font-size: 1.2rem;
  color: var(--t-muted);
  white-space: nowrap;
}

.sw-spec i {
  color: var(--accent);
  font-size: 1.4rem;
}

/* the per-platform CTA (labelled per practice, e.g. "Explore
   logistics"): a solid accent pill with a breathing halo, a sheen
   sweep and the arrow set in its own coin */
.sw-caption__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  padding: 0.6rem 0.7rem 0.6rem 1.8rem;
  border-radius: 100px;
  border: 1px solid transparent;
  background-color: var(--accent);
  overflow: hidden;
  font-family: var(--_font-accent);
  font-size: 1.35rem;
  font-weight: var(--fw-semibold);
  color: var(--base);
  white-space: nowrap;
  animation: sw-cta-halo 3.4s ease-out infinite;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

@keyframes sw-cta-halo {
  0%       { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.22); }
  60%,100% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); }
}

/* sheen that sweeps across on hover */
.sw-caption__link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(105deg,
    transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s ease;
}

.sw-caption__link i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: rgba(var(--base-rgb), 0.16);
  color: var(--base);
  font-size: 1.3rem;
  transition: transform 0.3s ease, background-color 0.3s ease,
              color 0.3s ease;
}

.no-touch .sw-caption__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.8rem 2.4rem rgba(var(--accent-rgb), 0.35);
}

.no-touch .sw-caption__link:hover::before { left: 120%; }

.no-touch .sw-caption__link:hover i {
  transform: translateX(0.3rem);
  background-color: var(--base);
  color: var(--accent);
}

/* ------------------------------------------------------------ */
/* Stack ribbon: the technologies marquee                        */
/* ------------------------------------------------------------ */
.sw-stackline {
  position: relative;
  margin-top: clamp(2.4rem, 3vw, 4rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.sw-stackline__track {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: max-content;
  animation: sw-stackline 46s linear infinite;
}

.sw-stackline:hover .sw-stackline__track { animation-play-state: paused; }

@keyframes sw-stackline {
  to { transform: translateX(-50%); }
}

.sw-token {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.5rem;
  margin-right: 1rem;
  border: 1px solid var(--st-muted);
  border-radius: 100px;
  background-color: var(--base-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem;
  color: var(--t-muted);
  white-space: nowrap;
}

.sw-token i {
  color: var(--accent);
  font-size: 1.4rem;
}

.sw-token--head {
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--t-bright);
  font-family: var(--_font-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 1.15rem;
}

/* ------------------------------------------------------------ */
/* Shared mock-UI primitives                                     */
/* ------------------------------------------------------------ */
.sw-skel {
  display: block;
  height: 0.8rem;
  border-radius: 100px;
  background-color: var(--st-muted);
}

.sw-skel--bright { background-color: var(--t-muted-extra); }
.sw-skel.w20 { width: 20%; }
.sw-skel.w30 { width: 30%; }
.sw-skel.w40 { width: 40%; }
.sw-skel.w50 { width: 50%; }
.sw-skel.w60 { width: 60%; }
.sw-skel.w70 { width: 70%; }
.sw-skel.w80 { width: 80%; }

.sw-app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--_font-default);
}

/* generic pill/kpi chip inside the mock apps */
.sw-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--st-muted);
  border-radius: 1.4rem;
  background-color: var(--base-tint);
  min-width: 0;
}

.sw-kpi b {
  font-family: var(--_font-accent);
  font-size: 1.9rem;
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sw-kpi span {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-muted);
  white-space: nowrap;
}

/* shared soft blink for presence dots, stock alerts, container yards */
@keyframes sw-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* number blip: the driver pops this on a value that just moved */
.sw-flash { animation: sw-flash 0.8s ease; }

@keyframes sw-flash {
  0% {
    color: var(--accent);
    text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.55);
  }
}

/* ---- hands-on affordances shared by the mocks ----
   Everything a driver wires to a click gets a cursor and a gentle
   hover; washes stay clipped to each component's own radius. */

/* music: queue rows, transport and seek respond */
.swm-row { cursor: pointer; }

.no-touch .swm-row:not(.is-now):hover {
  background-color: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.16);
}

.swm-play,
.swm-heart,
.swm-bar .ph-skip-back,
.swm-bar .ph-skip-forward {
  cursor: pointer;
  transition: transform 0.25s ease, color 0.3s ease;
}

.no-touch .swm-play:hover { transform: scale(1.1); }
.swm-play:active { transform: scale(0.92); }
.no-touch .swm-heart:hover { transform: scale(1.15); }

.no-touch .swm-bar .ph-skip-back:hover,
.no-touch .swm-bar .ph-skip-forward:hover {
  color: var(--t-bright);
  transform: scale(1.12);
}

.swm-seek { cursor: pointer; }

/* pausing the player freezes the disc, the EQ and the pulse */
.sw-app--music.is-paused :is(.swm-disc, .swm-eq i, .swm-play) {
  animation-play-state: paused;
}

/* shop: cards add to cart, hearts and filters respond */
.sws-card {
  cursor: pointer;
  transition: transform 0.35s var(--_animbezier);
}

.no-touch .sws-card:hover { transform: translateY(-0.3rem); }

.sws-wish {
  cursor: pointer;
  transition: transform 0.25s ease, color 0.3s ease, background-color 0.3s ease;
}

.no-touch .sws-wish:hover { transform: scale(1.12); }

.sws-wish.is-loved {
  color: #ef6a88;
  background-color: rgba(214, 69, 92, 0.3);
}

.sws-filter {
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.no-touch .sws-filter:not(.is-on):hover {
  color: var(--t-bright);
  border-color: var(--t-muted-extra);
}

.sws-buy { cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.no-touch .sws-buy:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.6rem 1.8rem rgba(var(--accent-rgb), 0.3);
}
.sws-buy:active { transform: scale(0.96); }

/* crm: any open deal can be promoted by hand */
.swc-col:not(.swc-col--won) .swc-card { cursor: pointer; }

.no-touch .swc-col:not(.swc-col--won) .swc-card:hover:not(.is-out):not(.is-in) {
  border-color: rgba(var(--accent-rgb), 0.4);
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 2rem -0.8rem rgba(0, 0, 0, 0.5);
}

/* social: likes and story rings respond */
.swf-act { cursor: pointer; transition: color 0.3s ease; }
.no-touch .swf-act:hover { color: var(--t-bright); }

.swf-act--like.is-liked,
.swf-act--like.is-liked i { color: #ef6a88; }

.swf-story { cursor: pointer; transition: transform 0.3s ease; }
.no-touch .swf-story:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------ */
/* 01 · Music streaming — "aurora.fm"                            */
/* ------------------------------------------------------------ */
.sw-app--music {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "side main"
    "bar  bar";
}

.swm-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  padding: 2.2rem 1.8rem;
  border-right: 1px solid var(--st-muted);
  min-height: 0;
  overflow: hidden;
}

.swm-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--_font-accent);
  font-size: 1.6rem;
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  margin-bottom: 0.6rem;
}

.swm-logo i {
  color: var(--accent);
  font-size: 1.9rem;
}

.swm-side .sw-skel { margin-top: 0.9rem; flex-shrink: 0; }

/* sidebar navigation + named playlists */
.swm-nav {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex-shrink: 0;
}

.swm-nav span {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.25rem;
  color: var(--t-muted);
  white-space: nowrap;
}

.swm-nav span i { font-size: 1.6rem; }

.swm-nav span.is-on { color: var(--t-bright); }
.swm-nav span.is-on i { color: var(--accent); }

.swm-side__label {
  margin-top: 0.4rem;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-muted-extra);
  flex-shrink: 0;
}

.swm-lists {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex-shrink: 0;
}

.swm-lists span {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.2rem;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swm-lists i {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  flex-shrink: 0;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.55), rgba(var(--additional-rgb), 0.55));
}

.swm-lists span:nth-child(2) i { background: linear-gradient(135deg, #3f8fb0, #43297f); }
.swm-lists span:nth-child(3) i { background: linear-gradient(135deg, #e58f6f, #a1443b); }
.swm-lists span:nth-child(4) i { background: linear-gradient(135deg, #74d29a, #2f7a54); }

.swm-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  padding: 2.2rem 2.4rem;
  min-width: 0;
  min-height: 0;
}

.swm-hero {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  flex-shrink: 0;
}

/* spinning vinyl */
.swm-disc {
  position: relative;
  flex-shrink: 0;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--base-tint) 0 18%, transparent 18.5%),
    repeating-radial-gradient(circle at center,
      rgba(var(--accent-rgb), 0.28) 0 2px, transparent 2px 6px),
    conic-gradient(from 40deg,
      rgba(var(--accent-rgb), 0.85),
      rgba(var(--additional-rgb), 0.75),
      rgba(var(--accent-rgb), 0.85));
  animation: swm-spin 7s linear infinite;
}

.swm-disc::after {
  content: "";
  position: absolute;
  inset: 42%;
  border-radius: 50%;
  background-color: var(--base);
  border: 1px solid var(--st-muted);
}

@keyframes swm-spin { to { transform: rotate(360deg); } }

.swm-meta {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.swm-tag {
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.swm-title {
  font-family: var(--_font-accent);
  font-size: clamp(2rem, 2vw, 2.6rem);
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swm-artist {
  font-size: 1.3rem;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* live listener count, pinned to the right of the hero */
.swm-live {
  align-self: flex-start;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  font-size: 1.1rem;
  color: var(--t-muted);
  white-space: nowrap;
}

.swm-live b {
  color: var(--t-bright);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.swm-live i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: #62c554;
  animation: sw-live 2.2s ease-out infinite;
}

/* hero lockup swap on track change (class popped by the driver) */
.swm-meta.is-swap { animation: swm-swap 0.6s var(--_animbezier); }

@keyframes swm-swap {
  from { opacity: 0; transform: translateY(0.8rem); }
  to   { opacity: 1; transform: none; }
}

/* equalizer */
.swm-eq {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 2.2rem;
  margin-top: 0.5rem;
}

.swm-eq i {
  width: 0.4rem;
  border-radius: 100px;
  background-color: var(--accent);
  animation: swm-eq 1.05s ease-in-out infinite;
}

.swm-eq i:nth-child(1) { animation-delay: -0.15s; }
.swm-eq i:nth-child(2) { animation-delay: -0.62s; }
.swm-eq i:nth-child(3) { animation-delay: -0.34s; }
.swm-eq i:nth-child(4) { animation-delay: -0.85s; }
.swm-eq i:nth-child(5) { animation-delay: -0.48s; }
.swm-eq i:nth-child(6) { animation-delay: -0.98s; }
.swm-eq i:nth-child(7) { animation-delay: -0.22s; }

@keyframes swm-eq {
  0%, 100% { height: 0.5rem; opacity: 0.6; }
  50%      { height: 2.2rem; opacity: 1; }
}

/* queue rows: fill whatever height is left, fade out at the bottom
   instead of clipping a row mid-way */
.swm-queue {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

.swm-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  padding: 0.9rem 1.2rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  flex-shrink: 0;
  transition: border-color 0.5s ease, background-color 0.5s ease;
}

/* the driver moves this class as the playlist advances */
.swm-row.is-now {
  border-color: rgba(var(--accent-rgb), 0.3);
  background-color: rgba(var(--accent-rgb), 0.06);
}

.swm-row__dot {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.7rem;
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.55), rgba(var(--additional-rgb), 0.55));
}

.swm-row__dot--2 { background: linear-gradient(135deg, #3f8fb0, #43297f); }
.swm-row__dot--3 { background: linear-gradient(135deg, #e58f6f, #a1443b); }
.swm-row__dot--4 { background: linear-gradient(135deg, #74d29a, #2f7a54); }
.swm-row__dot--5 { background: linear-gradient(135deg, #f5bf4f, #d98324); }

.swm-row__song {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.swm-row__song b {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--t-bright);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swm-row__song span {
  font-size: 1.05rem;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swm-row time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  color: var(--t-muted-extra);
}

/* transport bar */
.swm-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.4rem 2.4rem;
  border-top: 1px solid var(--st-muted);
  background-color: var(--base-tint);
}

.swm-bar .ph-fill,
.swm-bar .ph {
  font-size: 1.8rem;
  color: var(--t-muted);
}

.swm-bar .swm-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background-color: var(--accent);
  flex-shrink: 0;
}

.swm-bar .swm-play i {
  color: var(--base);
  font-size: 1.6rem;
}

/* soft breathing halo on the play control */
.swm-bar .swm-play {
  animation: swm-play-pulse 3.2s ease-in-out infinite;
}

@keyframes swm-play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0); }
}

/* secondary transport controls, heart and volume */
.swm-bar .swm-side-ctl {
  font-size: 1.4rem;
  color: var(--t-muted-extra);
}

.swm-bar .swm-heart {
  font-size: 1.6rem;
  color: var(--t-muted);
  transition: color 0.35s ease;
}

.swm-heart.is-loved { color: #ef6a88; }

.swm-heart.is-pop {
  animation: swf-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swm-vol {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.swm-bar .swm-vol > i { font-size: 1.5rem; }

.swm-vol span {
  position: relative;
  width: 5.2rem;
  height: 0.35rem;
  border-radius: 100px;
  background-color: var(--st-muted);
  overflow: hidden;
}

.swm-vol span i {
  position: absolute;
  inset: 0;
  width: 68%;
  border-radius: inherit;
  background-color: var(--t-muted);
}

.swm-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}

.swm-seek {
  position: relative;
  flex: 1;
  height: 0.4rem;
  border-radius: 100px;
  background-color: var(--st-muted);
  overflow: hidden;
}

.swm-seek i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--accent);
  transform: scaleX(0.35);
  transform-origin: left center;
}

/* ------------------------------------------------------------ */
/* 02 · Movie streaming — "nova.plus"                            */
/* A Netflix-grade browse surface: profile gate, rotating        */
/* billboard, and drifting rows of titles and recommendations.   */
/* ------------------------------------------------------------ */
.sw-app--ott { padding: 0; }

/* ---- "Who's watching?" profile gate (shown by the driver) ---- */
.swo-profiles {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  background-color: rgba(var(--base-rgb), 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

.sw-app--ott.is-intro .swo-profiles {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.swo-profiles__title {
  font-family: var(--_font-accent);
  font-size: 2rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
}

.swo-profiles__row {
  display: flex;
  gap: 2rem;
}

.swo-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.2rem;
  color: var(--t-muted);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.35s ease;
}

.swo-profile__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 1.1rem;
  font-style: normal;
}

.swo-profile__tile--a { background: linear-gradient(135deg, #7b5cd6, #43297f); }
.swo-profile__tile--b { background: linear-gradient(135deg, #3f8fb0, #1f5570); }
.swo-profile__tile--k { background: linear-gradient(135deg, #f5bf4f, #d98324); }

.swo-profile__tile--k b {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #14101f;
}

.swo-profile__tile--add {
  border: 1px dashed var(--t-muted-extra);
  color: var(--t-muted);
  font-size: 2.4rem;
  font-weight: 300;
}

.swo-profile.is-chosen {
  transform: scale(1.12);
  color: var(--t-bright);
}

.swo-profile.is-chosen .swo-profile__tile {
  box-shadow: 0 0 0 2px var(--t-bright), 0 10px 30px -8px rgba(0, 0, 0, 0.6);
}

/* ---- browse UI (fades in after the gate) ---- */
.swo-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 0.6s ease, transform 0.6s var(--_animbezier);
}

.sw-app--ott.is-intro .swo-ui {
  opacity: 0;
  transform: scale(0.985);
}

.swo-top {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 1.6rem 2.4rem 1.2rem;
  flex-shrink: 0;
}

.swo-logo {
  font-family: var(--_font-accent);
  font-size: 1.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  color: var(--t-bright);
}

.swo-logo em {
  font-style: normal;
  color: var(--accent);
}

.swo-nav {
  display: flex;
  gap: 1.6rem;
  font-size: 1.25rem;
  color: var(--t-muted);
}

.swo-nav b {
  color: var(--t-bright);
  font-weight: 600;
}

/* search + notifications cluster */
.swo-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 1.7rem;
  color: var(--t-muted);
}

.swo-icons + .swo-user { margin-left: 0; }

.swo-bell {
  position: relative;
  display: flex;
}

.swo-bell b {
  position: absolute;
  top: -0.1rem;
  right: -0.2rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: #d6455c;
  animation: swo-bell 2.6s ease-out infinite;
}

@keyframes swo-bell {
  0%       { box-shadow: 0 0 0 0 rgba(214, 69, 92, 0.45); }
  70%,100% { box-shadow: 0 0 0 6px rgba(214, 69, 92, 0); }
}

.swo-user {
  margin-left: auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.7rem;
  flex-shrink: 0;
  transition: background 0.4s ease;
}

.swo-user--a { background: linear-gradient(135deg, #7b5cd6, #43297f); }
.swo-user--b { background: linear-gradient(135deg, #3f8fb0, #1f5570); }
.swo-user--k { background: linear-gradient(135deg, #f5bf4f, #d98324); }

/* ---- rotating billboard ---- */
.swo-billboard {
  position: relative;
  margin: 0.2rem 2.4rem 0;
  border-radius: 1.6rem;
  overflow: hidden;
  /* sized by the lockup content — a fixed shrinkable basis used to
     clip the rank chip off the top on shorter stages */
  flex: 0 0 auto;
  min-height: 12.5rem;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--st-muted);
}

.swo-art {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: 160% 160%;
  animation: swo-drift 12s ease-in-out infinite alternate;
  transition: opacity 0.8s ease;
}

.swo-art.is-active { opacity: 1; }

.swo-art--a {
  background-image:
    radial-gradient(90% 130% at 85% 0%, rgba(159, 139, 231, 0.65), transparent 60%),
    radial-gradient(70% 110% at 10% 100%, rgba(221, 241, 96, 0.28), transparent 55%),
    linear-gradient(115deg, #1b1633, #2c1a4d 55%, #131022);
}

.swo-art--b {
  background-image:
    radial-gradient(85% 125% at 80% 5%, rgba(64, 178, 178, 0.55), transparent 60%),
    radial-gradient(70% 110% at 12% 95%, rgba(221, 241, 96, 0.18), transparent 55%),
    linear-gradient(115deg, #0d2530, #123a44 55%, #0a1a20);
}

.swo-art--c {
  background-image:
    radial-gradient(90% 130% at 82% 0%, rgba(214, 96, 64, 0.5), transparent 60%),
    radial-gradient(70% 110% at 10% 100%, rgba(159, 139, 231, 0.22), transparent 55%),
    linear-gradient(115deg, #2a1114, #4a1c22 55%, #1a0c0e);
}

@keyframes swo-drift {
  0%   { background-position: 0% 30%; }
  100% { background-position: 100% 70%; }
}

/* scan sheen across the key art */
.swo-art::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255, 255, 255, 0.08) 50%, transparent 58%);
  animation: swo-sheen 6.5s ease-in-out infinite;
}

@keyframes swo-sheen {
  0%, 55% { transform: translateX(-60%); }
  100%    { transform: translateX(60%); }
}

.swo-lockup {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.6rem 2.4rem 1.8rem;
  background: linear-gradient(to top, rgba(10, 8, 20, 0.75), transparent);
  width: 100%;
}

/* trending laurel, follows the billboard rotation */
.swo-rank {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  background-color: rgba(214, 69, 92, 0.85);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.swo-rank i { font-size: 1.2rem; }

.swo-badge {
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.swo-title {
  font-family: var(--_font-accent);
  font-size: clamp(2.1rem, 2.2vw, 3rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1;
}

.swo-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.65);
}

.swo-sub b { color: #7ee081; font-weight: 600; }

/* maturity-rating chip */
.swo-sub em {
  font-style: normal;
  margin-left: 0.2rem;
  padding: 0.12rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.4rem;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
}

.swo-actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
}

.swo-actions b {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.6rem;
  border-radius: 100px;
  font-size: 1.25rem;
  font-weight: 600;
}

.swo-play {
  background-color: #fff;
  color: #14101f;
  animation: swo-pulse 3s ease-in-out infinite;
}

@keyframes swo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

.swo-more {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* billboard pager dots */
.swo-pager {
  position: absolute;
  right: 1.6rem;
  bottom: 1.4rem;
  display: flex;
  gap: 0.5rem;
}

.swo-pager i {
  width: 1.4rem;
  height: 0.3rem;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.28);
  transition: background-color 0.4s ease, width 0.4s ease;
}

.swo-pager i.is-on {
  width: 2.2rem;
  background-color: #fff;
}

/* ---- content rows: a living catalogue ---- */
.swo-rows {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* fixed-depth fade at the panel foot: whatever row peeks past the
     stage melts out, but fully-visible rows are never dimmed (a %
     fade used to swallow half the continue-watching row) */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.2rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3.2rem), transparent);
}

.swo-rowlabel {
  padding: 1.2rem 2.4rem 0.6rem;
  font-family: var(--_font-accent);
  font-size: 1.35rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
  flex-shrink: 0;
}

.swo-rowlabel em {
  font-style: normal;
  color: var(--accent);
}

.swo-row {
  overflow: hidden;
  flex-shrink: 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.swo-row__track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  padding: 0 2.4rem;
  animation: swo-scroll 55s linear infinite;
}

.swo-row__track--reverse { animation: swo-scroll-r 48s linear infinite; }
.swo-row__track--slow    { animation-duration: 70s; }

.swo-row:hover .swo-row__track { animation-play-state: paused; }

@keyframes swo-scroll   { to   { transform: translateX(-50%); } }
@keyframes swo-scroll-r { from { transform: translateX(-50%); } to { transform: none; } }

/* ---- posters ---- */
.swo-poster {
  position: relative;
  flex: 0 0 10.8rem;
  height: 13.4rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--st-muted);
}

.swo-poster--p1  { background: linear-gradient(160deg, #472b66, #191126); }
.swo-poster--p2  { background: linear-gradient(160deg, #6e3a52, #241019); }
.swo-poster--p3  { background: linear-gradient(160deg, #14424b, #0d1a20); }
.swo-poster--p4  { background: linear-gradient(160deg, #23345c, #0e1322); }
.swo-poster--p5  { background: linear-gradient(160deg, #5c3a24, #1e130c); }
.swo-poster--p6  { background: linear-gradient(160deg, #2d4a2a, #101c0f); }
.swo-poster--p7  { background: linear-gradient(160deg, #635a1e, #211d0a); }
.swo-poster--p8  { background: linear-gradient(160deg, #5b2440, #200d17); }
.swo-poster--p9  { background: linear-gradient(160deg, #1e4f5e, #0a1b21); }
.swo-poster--p10 { background: linear-gradient(160deg, #4a5a2a, #161c0d); }

/* Top-10 ranking numeral */
.swo-poster b {
  position: absolute;
  bottom: -1.2rem;
  left: 0.2rem;
  font-family: var(--_font-accent);
  font-size: 5.8rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.75);
}

/* title + genre lockup at the foot of each poster */
.swo-poster__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 2.2rem 0.8rem 0.7rem;
  background: linear-gradient(to top, rgba(8, 6, 14, 0.88), transparent);
}

.swo-row--top10 .swo-poster__meta { padding-left: 2.6rem; }

.swo-poster__meta em {
  font-style: normal;
  font-family: var(--_font-accent);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swo-poster__meta i {
  font-style: normal;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swo-poster__flag {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  background-color: #d6455c;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.swo-poster__match {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.4rem;
  background-color: rgba(10, 20, 12, 0.72);
  color: #7ee081;
  font-size: 0.92rem;
  font-weight: 700;
}

/* ---- continue-watching cards ---- */
.swo-cw {
  position: relative;
  flex: 0 0 18rem;
  height: 9.2rem;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--st-muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.swo-cw--c1 { background: linear-gradient(120deg, #232c4e, #101426); }
.swo-cw--c2 { background: linear-gradient(120deg, #14424b, #0a1d22); }
.swo-cw--c3 { background: linear-gradient(120deg, #3a2a63, #171126); }
.swo-cw--c4 { background: linear-gradient(120deg, #4e2440, #1c0d17); }

.swo-cw__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  margin-bottom: 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(10, 8, 16, 0.45);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.4rem;
}

.swo-cw__meta {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.swo-cw__meta em {
  font-style: normal;
  font-family: var(--_font-accent);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swo-cw__meta i {
  font-style: normal;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.6);
}

.swo-cw__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.35rem;
  background-color: rgba(255, 255, 255, 0.22);
}

.swo-cw__bar i {
  display: block;
  height: 100%;
  background-color: #d6455c;
}

/* ---- hover life: posters and cards invite the click ---- */
.swo-poster,
.swo-cw {
  cursor: pointer;
  transition: border-color 0.35s ease, filter 0.35s ease;
}

.no-touch .swo-poster:hover,
.no-touch .swo-cw:hover {
  border-color: rgba(255, 255, 255, 0.42);
  filter: brightness(1.16);
}

/* a play coin surfaces over a hovered poster (pure CSS glyph) */
.swo-poster::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: 3rem;
  height: 3rem;
  margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background-color: rgba(10, 8, 16, 0.6);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swo-poster::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  margin: -0.5rem 0 0 -0.28rem;
  border-left: 0.85rem solid #fff;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.no-touch .swo-poster:hover::before,
.no-touch .swo-poster:hover::after {
  opacity: 1;
  transform: none;
}

.swo-cw__play { transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }

.no-touch .swo-cw:hover .swo-cw__play {
  transform: scale(1.14);
  background-color: rgba(214, 69, 92, 0.9);
  border-color: transparent;
}

.swo-actions b {
  cursor: pointer;
  transition: transform 0.25s ease, background-color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease;
}

.no-touch .swo-play:hover { transform: translateY(-1px) scale(1.03); }
.swo-play:active { transform: scale(0.96); }
.no-touch .swo-more:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background-color: rgba(255, 255, 255, 0.1);
}

.swo-nav span { cursor: pointer; transition: color 0.3s ease; }
.no-touch .swo-nav span:hover { color: var(--t-bright); }

.swo-profile { cursor: pointer; }
.no-touch .swo-profile:hover {
  transform: translateY(-0.3rem);
  color: var(--t-bright);
}

/* ---- cinema player overlay (opened on any Play click) ---- */
.swo-player {
  position: absolute;
  inset: 0;
  z-index: 4; /* over the browse UI and the profile gate */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #05040a;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
  transition: opacity 0.5s ease, transform 0.5s var(--_animbezier),
              visibility 0s linear 0.5s;
}

.sw-app--ott.is-cinema .swo-player {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* the "footage": letterboxed drifting key-art scenes + beam + grain */
.swo-player__stage {
  position: absolute;
  inset: 6.5% 0;
  overflow: hidden;
  background-color: #000;
  transition: filter 0.35s ease;
}

.swo-player.is-buffering .swo-player__stage { filter: brightness(0.5); }

.swo-scene {
  position: absolute;
  inset: -8%;
  opacity: 0;
  animation: swo-scenecycle 21s linear infinite;
}

.swo-scene--1 {
  background-image:
    radial-gradient(80% 110% at 72% 18%, rgba(64, 178, 178, 0.5), transparent 60%),
    radial-gradient(70% 100% at 14% 86%, rgba(240, 140, 62, 0.34), transparent 55%),
    linear-gradient(118deg, #0a1420, #16303a 55%, #081018);
}

.swo-scene--2 {
  animation-delay: 7s;
  background-image:
    radial-gradient(85% 120% at 78% 26%, rgba(159, 139, 231, 0.5), transparent 60%),
    radial-gradient(65% 95% at 18% 90%, rgba(214, 69, 92, 0.26), transparent 55%),
    linear-gradient(118deg, #140f26, #241645 55%, #0e0a1c);
}

.swo-scene--3 {
  animation-delay: 14s;
  background-image:
    radial-gradient(80% 115% at 26% 22%, rgba(214, 96, 64, 0.42), transparent 60%),
    radial-gradient(70% 100% at 80% 84%, rgba(245, 191, 79, 0.28), transparent 55%),
    linear-gradient(118deg, #1c0d0e, #35141a 55%, #120809);
}

/* each scene owns a third of the loop, with slow Ken Burns drift */
@keyframes swo-scenecycle {
  0%        { opacity: 0; transform: scale(1.02); }
  6%        { opacity: 1; }
  33.3%     { opacity: 1; }
  39%, 100% { opacity: 0; transform: scale(1.17); }
}

.swo-player__beam {
  position: absolute;
  inset: -30%;
  background: linear-gradient(115deg,
    transparent 44%, rgba(255, 255, 255, 0.05) 50%, transparent 56%);
  animation: swo-beam 9s ease-in-out infinite alternate;
}

@keyframes swo-beam {
  from { transform: translateX(-22%); }
  to   { transform: translateX(22%); }
}

.swo-player__grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1.4px);
  background-size: 3px 3px;
  animation: swo-grain 0.4s steps(2) infinite;
}

@keyframes swo-grain {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(1px, -1px); }
  100% { transform: translate(-1px, 1px); }
}

/* the player pauses as one organism */
.swo-player.is-paused :is(.swo-scene, .swo-player__beam, .swo-player__grain) {
  animation-play-state: paused;
}

/* buffering beat */
.swo-player__spin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.swo-player.is-buffering .swo-player__spin { opacity: 1; }

.swo-player__spin i {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: #fff;
  animation: swo-spin 0.9s linear infinite;
}

@keyframes swo-spin { to { transform: rotate(360deg); } }

/* centre badge while paused */
.swo-player__paused {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background-color: rgba(10, 8, 16, 0.55);
  color: #fff;
  font-size: 2rem;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.swo-player.is-paused .swo-player__paused {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* top rail: back + title lockup + cast */
.swo-player__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.5rem 1.8rem 2.6rem;
  background: linear-gradient(to bottom, rgba(5, 4, 10, 0.82), transparent);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.swo-player__back,
.swo-player__cast {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.25s ease;
}

.no-touch .swo-player__back:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: scale(1.07);
}

.swo-player__cast { margin-left: auto; color: rgba(255, 255, 255, 0.6); }
.no-touch .swo-player__cast:hover { color: #fff; background-color: rgba(255, 255, 255, 0.15); }

.swo-player__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.swo-player__head b {
  font-family: var(--_font-accent);
  font-size: 1.45rem;
  font-weight: var(--fw-semibold);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swo-player__head span {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* skip-intro pill */
.swo-skipintro {
  position: absolute;
  right: 1.8rem;
  bottom: 9.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  background-color: rgba(10, 8, 16, 0.6);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6rem);
  transition: opacity 0.35s ease, transform 0.35s ease,
              background-color 0.25s ease, color 0.25s ease,
              visibility 0s linear 0.35s;
}

.swo-player.has-intro .swo-skipintro {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.no-touch .swo-skipintro:hover {
  background-color: #fff;
  border-color: #fff;
  color: #14101f;
}

/* transport: timeline + control row */
.swo-player__ctl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 3.2rem 1.8rem 1.5rem;
  background: linear-gradient(to top, rgba(5, 4, 10, 0.88), transparent);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.swo-timeline {
  position: relative;
  height: 0.4rem;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.16);
  cursor: pointer;
}

/* generous invisible hit area for scrubbing */
.swo-timeline::before {
  content: "";
  position: absolute;
  inset: -0.8rem 0;
}

.swo-timeline__buf {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  border-radius: inherit;
  background-color: rgba(255, 255, 255, 0.24);
  transition: width 0.8s ease;
}

.swo-timeline__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  border-radius: inherit;
  background-color: #d6455c;
  transition: width 0.25s linear;
}

.swo-timeline__knob {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 1.2rem;
  height: 1.2rem;
  margin: -0.6rem 0 0 -0.6rem;
  border-radius: 50%;
  background-color: #d6455c;
  box-shadow: 0 0 0 4px rgba(214, 69, 92, 0.25);
  transition: left 0.25s linear, transform 0.25s ease;
}

.no-touch .swo-timeline:hover .swo-timeline__knob { transform: scale(1.3); }

.swo-player__row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: #fff;
}

.swo-player__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  font-size: 1.8rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.no-touch .swo-player__btn:hover {
  background-color: rgba(255, 255, 255, 0.12);
  transform: scale(1.08);
}

.swo-player__btn:active { transform: scale(0.9); }

.swo-player__btn--pp {
  background-color: #fff;
  color: #14101f;
  font-size: 1.7rem;
}

.no-touch .swo-player__btn--pp:hover { background-color: #fff; }

.swo-player__btn--dim { color: rgba(255, 255, 255, 0.6); font-size: 1.6rem; }

.swo-player__vol {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.75);
}

.swo-player__vol > span {
  width: 5rem;
  height: 0.35rem;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.swo-player__vol > span i {
  display: block;
  width: 72%;
  height: 100%;
  border-radius: inherit;
  background-color: #fff;
}

.swo-player__time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.swo-player__time b { color: #fff; font-weight: 600; }

.swo-player__spacer { flex: 1; }

.swo-player__chip {
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.75);
}

.swo-player__chip--hd {
  border-color: rgba(159, 139, 231, 0.6);
  color: #b7a5ee;
}

/* controls sleep while the film plays; any pointer wakes them */
.swo-player.is-idle { cursor: none; }

.swo-player.is-idle .swo-player__top {
  opacity: 0;
  transform: translateY(-0.7rem);
  pointer-events: none;
}

.swo-player.is-idle .swo-player__ctl {
  opacity: 0;
  transform: translateY(0.7rem);
  pointer-events: none;
}

/* ------------------------------------------------------------ */
/* 03 · E-commerce — "maison.shop"                               */
/* ------------------------------------------------------------ */
.sw-app--shop {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}

.sws-top {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: 1.8rem 2.4rem 1.2rem;
}

.sws-logo {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.9rem;
  color: var(--t-bright);
}

.sws-search {
  flex: 1;
  max-width: 22rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  height: 2.8rem;
  padding: 0 1.4rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  font-size: 1.15rem;
  color: var(--t-muted-extra);
  white-space: nowrap;
  overflow: hidden;
}

.sws-search i {
  font-size: 1.4rem;
  color: var(--t-muted);
  flex-shrink: 0;
}

/* live "viewing now" social proof */
.sws-eyes {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  font-size: 1.1rem;
  color: var(--t-muted);
  white-space: nowrap;
}

.sws-eyes i {
  font-size: 1.3rem;
  color: var(--accent);
  animation: sw-blink 3.4s ease-in-out infinite;
}

.sws-eyes b {
  color: var(--t-bright);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sws-cart {
  position: relative;
  margin-left: auto;
  font-size: 2rem;
  color: var(--t-bright);
}

.sws-cart b {
  position: absolute;
  top: -0.7rem;
  right: -0.9rem;
  min-width: 1.7rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  border-radius: 100px;
  background-color: var(--accent);
  color: var(--base);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.7rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sws-cart b.is-bump { transform: scale(1.45); }

.sws-filters {
  display: flex;
  gap: 0.8rem;
  padding: 0.4rem 2.4rem 1.4rem;
  flex-wrap: wrap;
}

.sws-filter {
  padding: 0.5rem 1.3rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  font-size: 1.15rem;
  color: var(--t-muted);
}

.sws-filter.is-on {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--t-bright);
  background-color: rgba(var(--accent-rgb), 0.08);
}

/* product tiles fill the row they're given (no fixed aspect ratio),
   so the grid always fits the screen height exactly */
.sws-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  padding: 0 2.4rem;
  min-height: 0;
}

.sws-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
  min-height: 0;
}

.sws-card__img {
  position: relative;
  flex: 1;
  min-height: 9rem;
  border-radius: 1.2rem;
  border: 1px solid var(--st-muted);
  overflow: hidden;
}

.sws-card:nth-child(1) .sws-card__img { background: linear-gradient(150deg, #cdb9a5, #8e7a66); }
.sws-card:nth-child(2) .sws-card__img { background: linear-gradient(150deg, #9aa8b5, #5c6a78); }
.sws-card:nth-child(3) .sws-card__img { background: linear-gradient(150deg, #b5a4c4, #71618a); }
.sws-card:nth-child(4) .sws-card__img { background: linear-gradient(150deg, #a9bfa4, #64785f); }

/* slow shimmer sweep over product tiles */
.sws-card__img::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(100deg,
    transparent 44%, rgba(255, 255, 255, 0.16) 50%, transparent 56%);
  animation: sws-shimmer 5.5s ease-in-out infinite;
}

.sws-card:nth-child(2) .sws-card__img::after { animation-delay: 1.3s; }
.sws-card:nth-child(3) .sws-card__img::after { animation-delay: 2.6s; }
.sws-card:nth-child(4) .sws-card__img::after { animation-delay: 3.9s; }

@keyframes sws-shimmer {
  0%, 60% { transform: translateX(-65%); }
  100%    { transform: translateX(65%); }
}

/* wishlist heart over the product image (popped by the driver) */
.sws-wish {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background-color: rgba(12, 10, 16, 0.35);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  transition: color 0.35s ease;
}

.sws-wish.is-pop { color: #ef6a88; }

.sws-wish.is-pop i {
  animation: swf-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* low-stock urgency chip */
.sws-stock {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  border-radius: 100px;
  background-color: rgba(22, 15, 5, 0.6);
  color: #f5bf4f;
  font-size: 0.98rem;
  font-weight: 600;
  white-space: nowrap;
}

.sws-stock i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background-color: #f5bf4f;
  animation: sw-blink 1.8s ease-in-out infinite;
}

/* name + rating lockup */
.sws-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
}

.sws-card__meta em {
  font-style: normal;
  font-family: var(--_font-accent);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sws-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.sws-stars i {
  color: #f5bf4f;
  font-size: 1.15rem;
}

.sws-card__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--_font-accent);
  font-size: 1.25rem;
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.sws-card__note {
  font-family: var(--_font-default);
  font-size: 1.02rem;
  color: var(--t-muted-extra);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "added to cart" flash */
.sws-card__added {
  position: absolute;
  top: 0.9rem;
  left: 50%;
  transform: translate(-50%, -0.6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  background-color: var(--accent);
  color: var(--base);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  z-index: 1;
}

.sws-card.is-added .sws-card__added {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* complimentary-gift progress, tracks the subtotal via the driver */
.sws-ship {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding: 0 2.4rem;
}

.sws-ship__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.1rem;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.4s ease;
}

.sws-ship__label i {
  font-size: 1.4rem;
  color: var(--accent);
  flex-shrink: 0;
}

.sws-ship__bar {
  position: relative;
  height: 0.4rem;
  border-radius: 100px;
  background-color: var(--st-muted);
  overflow: hidden;
}

.sws-ship__bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    var(--accent), rgba(var(--additional-rgb), 0.9));
  transform: scaleX(0.83);
  transform-origin: left center;
  transition: transform 0.8s var(--_animbezier);
}

.sws-ship.is-full .sws-ship__label,
.sws-ship.is-full .sws-ship__label i { color: #62c554; }

.sws-checkout {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-top: 1.4rem;
  padding: 1.3rem 2.4rem;
  border-top: 1px solid var(--st-muted);
  background-color: var(--base-tint);
}

.sws-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  font-size: 1.05rem;
  color: var(--t-muted-extra);
  white-space: nowrap;
}

.sws-secure i {
  font-size: 1.3rem;
  color: #62c554;
}

.sws-secure + .sws-buy { margin-left: 0; }

.sws-checkout span {
  font-size: 1.2rem;
  color: var(--t-muted);
}

.sws-checkout b {
  font-family: var(--_font-accent);
  font-size: 1.5rem;
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
}

.sws-checkout .sws-buy {
  margin-left: auto;
  padding: 0.7rem 1.7rem;
  border-radius: 100px;
  background-color: var(--base-opp);
  color: var(--t-opp-bright);
  font-size: 1.2rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ------------------------------------------------------------ */
/* 04 · Logistics — "meridian.ops"                               */
/* Control tower: routes + colour-coded vehicles live in an SVG  */
/* stretched to the panel (preserveAspectRatio="none"); hubs,    */
/* port, labels and pulses live in an HTML overlay positioned    */
/* in %, so icons and rings never distort. Both layers share     */
/* the same 800x420 coordinate space.                            */
/* ------------------------------------------------------------ */
.sw-app--logi {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "kpi  map"
    "feed feed";
}

.swl-kpis {
  grid-area: kpi;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem 1.4rem;
  border-right: 1px solid var(--st-muted);
  overflow: hidden;
  min-height: 0;
}

.swl-kpis .sw-kpi { padding: 1.1rem 1.3rem; }
.swl-kpis .sw-kpi b { font-size: 1.7rem; }

.swl-kpis .sw-kpi b em {
  font-style: normal;
  font-size: 1.2rem;
  color: #62c554;
}

/* route-optimiser card */
.swl-opt {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.3rem 1.4rem;
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 1.4rem;
  background-color: rgba(var(--accent-rgb), 0.05);
}

.swl-opt__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--_font-accent);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
}

.swl-opt__head i {
  color: var(--accent);
  font-size: 1.5rem;
}

.swl-opt__row {
  font-size: 1.05rem;
  color: var(--t-muted);
}

.swl-opt__bar {
  height: 0.4rem;
  border-radius: 100px;
  background-color: rgba(var(--accent-rgb), 0.15);
  overflow: hidden;
}

.swl-opt__bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background-color: var(--accent);
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: transform 0.9s ease;
}

.swl-opt__save {
  font-size: 1.05rem;
  color: var(--t-muted);
}

.swl-opt__save b {
  color: #62c554;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* fleet mini-strip */
.swl-fleet {
  display: flex;
  gap: 0.6rem;
}

.swl-fleet span {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--st-muted);
  border-radius: 1rem;
  background-color: var(--base-tint);
  font-size: 1.1rem;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}

.swl-fleet i {
  color: var(--accent);
  font-size: 1.4rem;
}

/* ---- the map ---- */
.swl-map {
  grid-area: map;
  position: relative;
  overflow: hidden;
  min-height: 14rem;
  background-image:
    radial-gradient(rgba(var(--accent-rgb), 0.16) 1px, transparent 1.5px);
  background-size: 2.2rem 2.2rem;
}

/* slow radar sweep across the control-tower map */
.swl-sweep {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0 80%,
    rgba(var(--accent-rgb), 0.05) 92%,
    rgba(var(--accent-rgb), 0.12) 99.5%,
    transparent 100%);
  animation: swl-sweep 10s linear infinite;
}

@keyframes swl-sweep {
  to { transform: rotate(360deg); }
}

.swl-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- terrain: water, coastline, city blocks, runway, streets ---- */
.swl-water { fill: rgba(111, 178, 229, 0.07); }

.swl-coast {
  fill: none;
  stroke: rgba(111, 178, 229, 0.3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.swl-blocks rect { fill: rgba(131, 131, 131, 0.14); }

.swl-runway__strip {
  fill: none;
  stroke: rgba(131, 131, 131, 0.25);
  stroke-width: 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.swl-runway__mark {
  fill: none;
  stroke: rgba(131, 131, 131, 0.5);
  stroke-width: 1;
  stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}

.swl-streets path {
  fill: none;
  stroke: var(--st-muted);
  stroke-width: 1;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}

/* ---- cased roads, like real map cartography (casing + fill) ----
   Widths hold under the panel stretch because the geometry paths in
   <defs> carry vector-effect="non-scaling-stroke" (presentation
   attributes travel into the <use> shadow copies; CSS can't reach
   them, but inherited stroke properties can). */
.swl-road__case {
  fill: none;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swl-road__fill {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.swl-road__case--art { stroke-width: 4.8; }
.swl-road__fill--art { stroke-width: 2.4; stroke: rgba(255, 255, 255, 0.11); }
.swl-road__case--ring { stroke-width: 4.2; }
.swl-road__fill--ring { stroke-width: 1.8; stroke: rgba(255, 255, 255, 0.09); }

/* ---- NH-48 congestion: the 30-46% stretch of R1, traced as its
   own polyline in the partial (dash-offset positioning drifts once
   the SVG is stretched) and pulsing like live traffic ---- */
.swl-jam,
.swl-jamglow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.swl-jam {
  stroke: #f08c3e;
  stroke-width: 3.2;
  animation: swl-jam 2.2s ease-in-out infinite;
}

.swl-jamglow {
  stroke: rgba(240, 140, 62, 0.28);
  stroke-width: 8;
  animation: swl-jam 2.2s ease-in-out infinite reverse;
}

@keyframes swl-jam {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---- directions-style routes: case + line + chevron flow ---- */
.swl-dir__case {
  fill: none;
  stroke: rgba(var(--accent-rgb), 0.2);
  stroke-width: 6.5;
  stroke-linecap: round;
}

.swl-dir__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  /* one dash the length of the path — lets the route draw itself in */
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: swl-draw 1.6s var(--_animbezier) both;
}

.swl-dir__chev {
  fill: none;
  stroke: rgba(var(--base-rgb), 0.55);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 0.9 2.5;
  animation: swl-chev 1.5s linear infinite;
}

@keyframes swl-draw { from { stroke-dashoffset: 100; } }
@keyframes swl-chev { to { stroke-dashoffset: -3.4; } }

/* staggered draw-in on load */
.swl-dir--r1b .swl-dir__line { animation-delay: 0.2s; }
.swl-dir--r2  .swl-dir__line { animation-delay: 0.55s; }
.swl-dir--r3  .swl-dir__line { animation-delay: 0.9s; }

/* R2 (hub -> port) rides the additional hue, a notch thinner */
.swl-dir--r2 .swl-dir__case { stroke: rgba(var(--additional-rgb), 0.14); stroke-width: 5; }
.swl-dir--r2 .swl-dir__line { stroke: rgba(var(--additional-rgb), 0.85); stroke-width: 2.4; }
.swl-dir--r2 .swl-dir__chev { stroke-width: 2.4; }

/* R3 last-mile ring: lighter line, longer chevrons (short path) */
.swl-dir--r3 .swl-dir__line { stroke: rgba(var(--accent-rgb), 0.5); stroke-width: 2; }
.swl-dir--r3 .swl-dir__chev {
  stroke-width: 2;
  stroke-dasharray: 1.8 5;
  animation: swl-chev-far 2.2s linear infinite;
}

@keyframes swl-chev-far { to { stroke-dashoffset: -6.8; } }

/* the optimiser crossfades plan R1 for its shorter variant R1b;
   the abandoned corridor stays as a faint ghost under the jam */
.swl-dir--r1,
.swl-dir--r1b { transition: opacity 0.7s ease; }
.swl-dir--r1b { opacity: 0; }
.swl-map.is-reroute .swl-dir--r1  { opacity: 0.15; }
.swl-map.is-reroute .swl-dir--r1b { opacity: 1; }

/* ---- sea + air lanes ---- */
.swl-lane { fill: none; stroke-linecap: round; }

.swl-lane--sea {
  stroke: rgba(245, 191, 79, 0.55);
  stroke-width: 1.6;
  stroke-dasharray: 0.5 2.3;
  animation: swl-lane 3s linear infinite;
}

.swl-lane--air {
  stroke: rgba(111, 178, 229, 0.55);
  stroke-width: 1.4;
  stroke-dasharray: 1 1.8;
  animation: swl-lane 2.2s linear infinite;
}

@keyframes swl-lane { to { stroke-dashoffset: -2.8; } }

/* ---- delivery stops: check off as the van sweeps past ----
   delays match the van's 8s loop (stops at ~27%, ~55%, ~78%) */
.swl-stop {
  fill: var(--base-tint);
  stroke: rgba(var(--accent-rgb), 0.75);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.swl-stop--s1 { animation: swl-stop 8s linear infinite 2.2s; }
.swl-stop--s2 { animation: swl-stop 8s linear infinite 4.4s; }
.swl-stop--s3 { animation: swl-stop 8s linear infinite 6.2s; }
.swl-stop--s4 { animation: swl-stop 8s linear infinite 0.8s; }

@keyframes swl-stop {
  0%        { fill: #62c554; stroke: #62c554; r: 5; }
  8%        { fill: #62c554; stroke: #62c554; r: 3.2; }
  30%       { fill: #62c554; stroke: #62c554; }
  45%, 100% { fill: var(--base-tint); stroke: rgba(var(--accent-rgb), 0.75); }
}

/* vehicles: colour-coded dots with a soft glow (legend, top right) */
.swl-veh__glow { opacity: 0.16; }

.swl-veh--truck .swl-veh__dot,
.swl-veh--truck .swl-veh__glow { fill: var(--accent); }
.swl-veh--van .swl-veh__dot,
.swl-veh--van .swl-veh__glow { fill: var(--t-bright); }
.swl-veh--ship .swl-veh__dot,
.swl-veh--ship .swl-veh__glow { fill: #f5bf4f; }
.swl-veh--air .swl-veh__dot,
.swl-veh--air .swl-veh__glow { fill: #6fb2e5; }

/* comet trails: ghosts running the same path a beat behind */
.swl-trail { opacity: 0.28; }
.swl-trail--2 { opacity: 0.13; }
.swl-trail--truck { fill: var(--accent); }
.swl-trail--van   { fill: var(--t-bright); }
.swl-trail--ship  { fill: #f5bf4f; }
.swl-trail--air   { fill: #6fb2e5; }

.swl-vehset--r1b { visibility: hidden; }
.swl-map.is-reroute .swl-vehset--r1  { visibility: hidden; }
.swl-map.is-reroute .swl-vehset--r1b { visibility: visible; }

/* ---- infrastructure overlay (never distorts) ---- */
.swl-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.swl-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.swl-marker__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background-color: var(--base-tint);
  color: var(--accent);
  font-size: 1.5rem;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.07);
}

.swl-marker__icon--pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1px solid rgba(var(--accent-rgb), 0.5);
  animation: swl-ring 2.6s ease-out infinite;
}

@keyframes swl-ring {
  0%   { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

.swl-marker__label {
  padding: 0.25rem 0.8rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  color: var(--t-muted);
  white-space: nowrap;
}

/* stacked cargo containers at the port; cell 4 is the crane bay —
   a fresh box "lands" there on every cycle */
.swl-yard {
  display: grid;
  grid-template-columns: repeat(4, 1rem);
  gap: 2px;
}

.swl-yard i {
  height: 0.55rem;
  border-radius: 1px;
  animation: sw-blink 3.2s ease-in-out infinite;
}

.swl-yard i:nth-child(2) { animation-delay: 0.6s; }
.swl-yard i:nth-child(3) { animation-delay: 1.4s; }
.swl-yard i:nth-child(5) { animation-delay: 0.9s; }
.swl-yard i:nth-child(6) { animation-delay: 2.7s; }
.swl-yard i:nth-child(7) { animation-delay: 1.8s; }
.swl-yard i:nth-child(8) { animation-delay: 0.3s; }

.swl-yard i:nth-child(1) { background-color: rgba(var(--accent-rgb), 0.55); }
.swl-yard i:nth-child(2) { background-color: rgba(245, 191, 79, 0.6); }
.swl-yard i:nth-child(3) { background-color: rgba(var(--additional-rgb), 0.55); }
.swl-yard i:nth-child(4) { background-color: rgba(111, 178, 229, 0.5); animation: swl-load 5.6s ease-in-out infinite; }
.swl-yard i:nth-child(5) { background-color: rgba(var(--accent-rgb), 0.35); }
.swl-yard i:nth-child(6) { background-color: rgba(245, 191, 79, 0.38); }
.swl-yard i:nth-child(7) { background-color: rgba(var(--additional-rgb), 0.4); }
.swl-yard i:nth-child(8) { background-color: rgba(111, 178, 229, 0.35); }

@keyframes swl-load {
  0%, 12%   { transform: translateY(-0.5rem); opacity: 0; }
  24%, 100% { transform: none; opacity: 1; }
}

/* dashed geofence slowly turning around the City DC */
.swl-geo {
  position: absolute;
  left: 50%;
  top: 1.4rem;
  width: 8rem;
  height: 8rem;
  margin: -4rem 0 0 -4rem;
  border: 1px dashed rgba(var(--accent-rgb), 0.3);
  border-radius: 50%;
  animation: swl-geo 40s linear infinite;
}

@keyframes swl-geo { to { transform: rotate(360deg); } }

/* congestion flag pinned to the NH-48 window */
.swl-flag {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  border: 1px solid rgba(240, 140, 62, 0.45);
  background-color: var(--base-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  color: #f0a05a;
  white-space: nowrap;
  animation: swl-flag 2.6s ease-out infinite;
}

.swl-flag i { font-size: 1.2rem; }

@keyframes swl-flag {
  0%       { box-shadow: 0 0 0 0 rgba(240, 140, 62, 0.3); }
  70%,100% { box-shadow: 0 0 0 7px rgba(240, 140, 62, 0); }
}

/* live telemetry tag; the driver glues it to the lead truck */
.swl-track {
  position: absolute;
  transform: translate(-50%, -50%);
}

.swl-track__tag {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  padding: 0.3rem 0.9rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  background-color: var(--base-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  color: var(--t-bright);
  white-space: nowrap;
  box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.35);
}

.swl-track__tag b {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.swl-track__tag::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -0.4rem;
  border: 0.4rem solid transparent;
  border-top-color: rgba(var(--accent-rgb), 0.45);
}

/* rotating network advisory, bottom-left (mirrors the legend) */
.swl-advisory {
  position: absolute;
  left: 1.4rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  font-size: 1rem;
  color: var(--t-muted);
  white-space: nowrap;
  max-width: calc(100% - 2.8rem);
  overflow: hidden;
}

.swl-advisory i {
  flex-shrink: 0;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background-color: #f0a05a;
  animation: swl-adv 2.2s ease-out infinite;
}

@keyframes swl-adv {
  0%       { box-shadow: 0 0 0 0 rgba(240, 140, 62, 0.4); }
  70%,100% { box-shadow: 0 0 0 5px rgba(240, 140, 62, 0); }
}

.swl-advisory span.is-swap { animation: swl-swap 0.5s ease; }

@keyframes swl-swap {
  from { opacity: 0; transform: translateY(0.4rem); }
}

/* mode legend */
.swl-legend {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  display: flex;
  gap: 1.1rem;
  padding: 0.5rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  font-size: 1rem;
  color: var(--t-muted);
}

.swl-legend span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.swl-legend__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}

.swl-legend__dot--road { background-color: var(--accent); }
.swl-legend__dot--rail { background-color: #e07ab8; }
.swl-legend__dot--air  { background-color: #6fb2e5; }
.swl-legend__dot--sea  { background-color: #f5bf4f; }

/* optimiser toast, popped by the driver on each cycle */
.swl-chip {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translate(-50%, -0.8rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1.3rem;
  border-radius: 100px;
  background-color: var(--accent);
  color: var(--base);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease,
              transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swl-chip i { font-size: 1.3rem; }
.swl-chip b { font-variant-numeric: tabular-nums; }

.swl-chip.is-pop {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* fixed row height × 3 = the feed shows exactly three rows,
   evenly spaced, with no partially clipped fourth row */
.swl-feed {
  grid-area: feed;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  max-height: calc(3 * 4.2rem);
  overflow: hidden;
}

.swl-feedrow {
  flex-shrink: 0; /* hold the 4.2rem row height — the queue clips, never squeezes */
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.6rem;
  height: 4.2rem;
  padding: 0 2.4rem;
  border-bottom: 1px solid var(--st-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.15rem;
  color: var(--t-muted);
  transition: opacity 0.4s ease;
}

/* transport-mode icon leading each manifest row */
.swl-mode {
  display: flex;
  justify-content: center;
  width: 1.9rem;
  color: var(--t-muted);
  font-size: 1.4rem;
}

/* ETA and status settle into tidy right-hand columns */
.swl-eta-cell {
  text-align: right;
  white-space: nowrap;
}

/* the consignment description truncates rather than colliding with
   the status pill (b + span = the description cell) */
.swl-feedrow > b + span {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swl-feedrow.is-leaving { opacity: 0; }

.swl-feedrow b {
  color: var(--t-bright);
  font-weight: 600;
  white-space: nowrap;
}

.swl-status {
  justify-self: end;
  min-width: 8.8rem;
  padding: 0.3rem 1rem;
  border-radius: 100px;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.swl-status--ok    { background: rgba(98, 197, 84, 0.14);  color: #62c554; }
.swl-status--move  { background: rgba(var(--accent-rgb), 0.12); color: var(--accent); }
.swl-status--hold  { background: rgba(245, 191, 79, 0.14); color: #f5bf4f; }

/* ---- freight railway: grey rail with tie dashes, rose train ---- */
.swl-rail__base {
  fill: none;
  stroke: rgba(196, 200, 214, 0.28);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.swl-rail__hatch {
  fill: none;
  stroke: rgba(var(--base-rgb), 0.85);
  stroke-width: 1.2;
  stroke-dasharray: 1.1 1.6;
}

.swl-train__loco { fill: #e07ab8; }
.swl-train__car  { fill: rgba(224, 122, 184, 0.5); }

/* moderate slow-traffic band on the A2 arterial (amber, like a
   live traffic layer under the congestion orange) */
.swl-slow {
  fill: none;
  stroke: #f5bf4f;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  animation: swl-jam 3.4s ease-in-out infinite;
}

/* ---- highway shields, like map cartography ---- */
.swl-shield {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 0.18rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  background-color: var(--base-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--t-muted);
  opacity: 0.85;
  white-space: nowrap;
}

.swl-shield--minor {
  border-color: transparent;
  background-color: rgba(var(--base-rgb), 0.55);
  opacity: 0.7;
}

/* ---- directions-style ETA card above the live corridor ---- */
.swl-eta {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 1.1rem 0.5rem;
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: 1rem 1rem 1rem 0.2rem;
  background-color: var(--base-tint);
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.swl-eta::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 100%;
  border: 0.45rem solid transparent;
  border-left-color: rgba(var(--accent-rgb), 0.42);
  border-top-color: rgba(var(--accent-rgb), 0.42);
}

.swl-eta__head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.swl-eta__head i {
  align-self: center;
  color: var(--accent);
  font-size: 1.15rem;
}

.swl-eta__head b {
  font-family: var(--_font-accent);
  font-size: 1.3rem;
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
}

.swl-eta__head em {
  font-style: normal;
  font-size: 0.98rem;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
}

.swl-eta__note {
  font-size: 0.92rem;
  color: #7ee081;
}

.swl-eta.is-swap { animation: swl-swap 0.5s ease; }

/* ---- port gantry crane: trolley rides the jib, the cable drops a
   container into the yard on every cycle ---- */
.swl-crane {
  position: absolute;
  transform: translate(-50%, -100%);
  width: 3.4rem;
  height: 3rem;
}

.swl-crane__jib {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0.42);
}

.swl-crane__mast {
  position: absolute;
  right: 0.5rem;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0.3);
}

.swl-crane__trolley {
  position: absolute;
  top: -1px;
  left: 0.1rem;
  width: 0.55rem;
  height: 0.35rem;
  border-radius: 1px;
  background-color: rgba(var(--accent-rgb), 0.9);
  animation: swl-trolley 8s ease-in-out infinite;
}

.swl-crane__cable {
  position: absolute;
  top: 0.3rem;
  left: 50%;
  width: 1px;
  height: 2.1rem;
  background-color: rgba(255, 255, 255, 0.38);
  transform: scaleY(0.12);
  transform-origin: top center;
  animation: swl-cable 8s ease-in-out infinite;
}

.swl-crane__box {
  position: absolute;
  top: 0.3rem;
  left: 50%;
  width: 0.62rem;
  height: 0.4rem;
  margin-left: -0.31rem;
  border-radius: 1px;
  background-color: #f5bf4f;
  opacity: 0;
  animation: swl-cranebox 8s ease-in-out infinite;
}

/* pick at the ship side (left), carry, place in the yard (right) */
@keyframes swl-trolley {
  0%, 26%   { transform: translateX(0); }
  38%, 64%  { transform: translateX(2.1rem); }
  76%, 100% { transform: translateX(0); }
}

@keyframes swl-cable {
  0%        { transform: scaleY(0.12); }
  10%, 16%  { transform: scaleY(1); }
  26%, 40%  { transform: scaleY(0.12); }
  50%, 56%  { transform: scaleY(1); }
  66%, 100% { transform: scaleY(0.12); }
}

@keyframes swl-cranebox {
  0%, 11%   { opacity: 0; transform: translateY(1.95rem); }
  13%, 16%  { opacity: 1; transform: translateY(1.95rem); }
  26%, 44%  { opacity: 1; transform: translateY(0.28rem); }
  54%       { opacity: 1; transform: translateY(1.95rem); }
  56%, 100% { opacity: 0; transform: translateY(1.95rem); }
}

/* ---- container ship waiting at the berth, bobbing on the tide ---- */
.swl-ship {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: swl-bob 5.5s ease-in-out infinite;
}

.swl-ship__stack {
  display: flex;
  gap: 1px;
  margin-bottom: 1px;
}

.swl-ship__stack b {
  width: 0.5rem;
  height: 0.34rem;
  border-radius: 1px;
}

.swl-ship__stack b:nth-child(1) { background-color: rgba(var(--accent-rgb), 0.7); }
.swl-ship__stack b:nth-child(2) { background-color: rgba(245, 191, 79, 0.75); }
.swl-ship__stack b:nth-child(3) { background-color: rgba(var(--additional-rgb), 0.7); }

.swl-ship__hull {
  width: 2.5rem;
  height: 0.55rem;
  background-color: rgba(111, 178, 229, 0.55);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}

@keyframes swl-bob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-1.6deg); }
  50%      { transform: translate(-50%, -44%) rotate(1.6deg); }
}

/* ---- map furniture: compass + scale, bottom-right (a compact
   row so it clears the port marker's label) ---- */
.swl-mapkit {
  position: absolute;
  right: 1.2rem;
  bottom: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  opacity: 0.8;
}

.swl-compass {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--st-muted);
  border-radius: 50%;
  background-color: var(--base-tint);
}

.swl-compass b {
  margin-top: 0.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--t-muted);
}

.swl-compass i {
  position: absolute;
  bottom: 0.24rem;
  left: 50%;
  margin-left: -0.22rem;
  border: 0.22rem solid transparent;
  border-bottom: 0.52rem solid rgba(var(--accent-rgb), 0.8);
}

.swl-scale {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--t-muted);
}

.swl-scale i {
  width: 3rem;
  height: 0.4rem;
  border: 1px solid var(--t-muted-extra);
  border-top: 0;
}

/* ---- interactive spotlight: hovering a manifest row or a legend
   mode dims every lane except the one it names ---- */
.swl-map svg :is(.swl-dir, .swl-lane, .swl-vehset, .swl-jam, .swl-jamglow,
                 .swl-slow, .swl-railway, .swl-stops) {
  transition: opacity 0.45s ease;
}

.swl-map.is-spot svg :is(.swl-dir--r1, .swl-dir--r2, .swl-dir--r3, .swl-lane,
                         .swl-vehset, .swl-jam, .swl-jamglow, .swl-slow,
                         .swl-railway, .swl-stops) {
  opacity: 0.08;
}

/* the jam/slow bands pulse their own opacity — the animation would
   outrank the dim, so it pauses while another lane is spotted */
.swl-map.is-spot:not(.spot-r1) svg :is(.swl-jam, .swl-jamglow) { animation: none; }
.swl-map.is-spot svg .swl-slow { animation: none; }

/* R1b idles at opacity 0; keep it dark unless R1 is both spotted
   and rerouted (these outrank the base is-reroute crossfade) */
.swl-map.is-spot svg .swl-dir--r1b { opacity: 0; }
.swl-map.is-spot.spot-r1:not(.is-reroute) svg .swl-dir--r1 { opacity: 1; }
.swl-map.is-spot.spot-r1.is-reroute svg .swl-dir--r1b { opacity: 1; }
.swl-map.is-spot.spot-r1 svg :is(.swl-jam, .swl-jamglow,
  .swl-vehset--r1, .swl-vehset--r1b) { opacity: 1; }
.swl-map.is-spot.spot-r2 svg :is(.swl-dir--r2, .swl-vehset--r2) { opacity: 1; }
.swl-map.is-spot.spot-r3 svg :is(.swl-dir--r3, .swl-vehset--r3, .swl-stops) { opacity: 1; }
.swl-map.is-spot.spot-sea svg :is(.swl-lane--sea, .swl-vehset--sea) { opacity: 1; }
.swl-map.is-spot.spot-air svg :is(.swl-lane--air, .swl-vehset--air) { opacity: 1; }
.swl-map.is-spot.spot-rail svg :is(.swl-railway, .swl-train) { opacity: 1; }

/* the R1 paraphernalia follows its route out of the spotlight */
.swl-flag, .swl-track, .swl-eta { transition: opacity 0.45s ease; }
.swl-map.is-spot:not(.spot-r1) :is(.swl-flag, .swl-track, .swl-eta) { opacity: 0.12; }

/* manifest rows invite the hover */
.swl-feedrow[data-swl-route] { cursor: pointer; }

.no-touch .swl-feedrow[data-swl-route]:hover,
.swl-feedrow.is-spotting {
  background-color: rgba(var(--accent-rgb), 0.06);
}

.swl-feedrow.is-spotting b,
.swl-feedrow.is-spotting .swl-mode { color: var(--accent); }

/* legend modes are hoverable filters */
.swl-legend span[data-swl-mode] {
  pointer-events: auto;
  cursor: pointer;
  transition: color 0.25s ease;
}

.no-touch .swl-legend span[data-swl-mode]:hover { color: var(--t-bright); }

/* the optimiser card runs a pass on demand */
.swl-opt {
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.no-touch .swl-opt:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.06);
  transform: translateY(-1px);
}

.swl-opt:active { transform: scale(0.985); }

.swl-opt__zap {
  margin-left: auto;
  color: var(--accent);
  font-size: 1.2rem;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swl-opt.is-run .swl-opt__zap {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ */
/* 05 · CRM — "ledger.crm"                                       */
/* ------------------------------------------------------------ */
.sw-app--crm {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.swc-top {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 2.4rem 1.4rem;
}

.swc-title {
  font-family: var(--_font-accent);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
}

/* forecast chip with a self-drawing sparkline */
.swc-forecast {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 1.3rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  white-space: nowrap;
}

.swc-forecast span {
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.swc-forecast b {
  font-family: var(--_font-accent);
  font-size: 1.3rem;
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
}

.swc-spark {
  width: 5.2rem;
  height: 1.8rem;
  overflow: visible;
  flex-shrink: 0;
}

.swc-spark polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 90;
  animation: swc-spark 7s ease-in-out infinite;
}

@keyframes swc-spark {
  0%       { stroke-dashoffset: 90; opacity: 0; }
  8%       { opacity: 1; }
  45%, 85% { stroke-dashoffset: 0; opacity: 1; }
  100%     { stroke-dashoffset: 0; opacity: 0; }
}

.swc-total {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}

.swc-total span {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.swc-total b {
  font-family: var(--_font-accent);
  font-size: 1.9rem;
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  font-variant-numeric: tabular-nums;
}

/* the board fades at the bottom edge rather than clipping a card */
.swc-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.4rem;
  padding: 0 2.4rem 2rem;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, #000 86%, transparent);
}

.swc-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--st-muted);
  border-radius: 1.4rem;
  background-color: var(--base-tint);
  min-height: 0;
  overflow: hidden;
}

.swc-col__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.2rem 0.4rem 0.8rem;
  font-size: 1.2rem;
  color: var(--t-muted);
  flex-shrink: 0;
}

/* live per-stage subtotal, re-tallied by the driver on every move */
.swc-col__head u {
  margin-left: auto;
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  color: var(--t-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.swc-col__head i {
  font-style: normal;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.5rem;
  border-radius: 100px;
  background-color: rgba(var(--accent-rgb), 0.1);
  color: var(--t-bright);
  font-size: 1.05rem;
  line-height: 2.1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.swc-col--won .swc-col__head { color: #62c554; }

.swc-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.2rem;
  border: 1px solid var(--st-muted);
  border-radius: 1.1rem;
  background-color: var(--base);
  flex-shrink: 0;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.swc-card.is-out { opacity: 0; transform: translateX(1.6rem) scale(0.96); }
.swc-card.is-in  { animation: swc-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes swc-in {
  from { opacity: 0; transform: translateX(-1.6rem) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.swc-card__head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.swc-card__head .sw-skel { flex: 1; max-width: 45%; }

/* account monogram, hue-keyed per company */
.swc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg,
    rgba(var(--accent-rgb), 0.7), rgba(var(--additional-rgb), 0.7));
}

.swc-avatar--a { background: linear-gradient(135deg, #7b5cd6, #43297f); }
.swc-avatar--b { background: linear-gradient(135deg, #3f8fb0, #1f5570); }
.swc-avatar--c { background: linear-gradient(135deg, #d98324, #8a4d0f); }
.swc-avatar--d { background: linear-gradient(135deg, #4a7d43, #2a4a26); }
.swc-avatar--e { background: linear-gradient(135deg, #b0567a, #6e2c47); }
.swc-avatar--f { background: linear-gradient(135deg, #8a8f3c, #55591f); }
.swc-avatar--g { background: linear-gradient(135deg, #52639c, #2c3866); }
.swc-avatar--h { background: linear-gradient(135deg, #3c8f7c, #1f5a4c); }

/* hot-deal flame, breathing */
.swc-card__hot {
  flex-shrink: 0;
  color: #f08c3e;
  font-size: 1.2rem;
  animation: swc-hot 2s ease-in-out infinite;
}

@keyframes swc-hot {
  0%, 100% { opacity: 0.65; transform: scale(0.94); }
  50%      { opacity: 1; transform: scale(1.08); }
}

/* segment · engagement line */
.swc-card__line {
  font-size: 1.02rem;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* owner + next step + days-in-stage */
.swc-card__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.swc-owner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.swc-owner--p { background: linear-gradient(135deg, #9f8be7, #5b4a9e); }
.swc-owner--r { background: linear-gradient(135deg, #56a8a0, #2d6660); }
.swc-owner--a { background: linear-gradient(135deg, #c98a4b, #85552a); }

.swc-card__next {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.22rem 0.75rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  font-size: 0.95rem;
  color: var(--t-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swc-card__next i {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.05rem;
}

.swc-card__age {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  color: var(--t-muted-extra);
  white-space: nowrap;
}

.swc-card__name {
  flex: 1;
  min-width: 0;
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--t-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swc-card__value {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.1rem;
  color: var(--t-bright);
  white-space: nowrap;
}

/* win-probability meter at the foot of each deal card */
.swc-prob {
  height: 0.35rem;
  border-radius: 100px;
  background-color: var(--st-muted);
  overflow: hidden;
}

.swc-prob i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(var(--accent-rgb), 0.6), var(--accent));
}

.swc-prob--won i { background: #62c554; }

/* stage-conversion footer, anchored to the column foot */
.swc-col__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.8rem 0.4rem 0.2rem;
  flex-shrink: 0;
}

.swc-col__foot > span:last-child {
  font-size: 0.98rem;
  color: var(--t-muted-extra);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swc-col__bar {
  display: block;
  height: 0.3rem;
  border-radius: 100px;
  background-color: var(--st-muted);
  overflow: hidden;
}

.swc-col__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: rgba(var(--accent-rgb), 0.55);
}

.swc-col__bar--won i { background-color: rgba(98, 197, 84, 0.7); }

/* a deal landing in closed-won flashes green once */
.swc-card.is-won { animation: swc-won 1.2s ease; }

@keyframes swc-won {
  0%  { box-shadow: 0 0 0 0 rgba(98, 197, 84, 0.45); border-color: rgba(98, 197, 84, 0.7); }
  100%{ box-shadow: 0 0 0 12px rgba(98, 197, 84, 0); }
}

/* assistant insight toast, popped by the driver over the board */
.swc-ai {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  transform: translate(-50%, 0.8rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: calc(100% - 3.6rem);
  padding: 0.8rem 1.5rem;
  border-radius: 100px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background-color: var(--base-tint);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
  font-size: 1.15rem;
  color: var(--t-bright);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease,
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.swc-ai span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.swc-ai > i {
  color: var(--accent);
  font-size: 1.4rem;
  flex-shrink: 0;
  animation: sw-blink 2.4s ease-in-out infinite;
}

.swc-ai.is-pop {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ------------------------------------------------------------ */
/* 06 · Social — "orbit.social"                                  */
/* ------------------------------------------------------------ */
.sw-app--social {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
}

.swf-main {
  position: relative; /* anchors the video-call PiP */
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ---- stories rail ---- */
.swf-stories {
  display: flex;
  gap: 1.8rem;
  padding: 1.6rem 2.4rem 0.4rem;
  flex-shrink: 0;
  overflow: hidden;
}

.swf-story {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  color: var(--t-muted);
  white-space: nowrap;
}

.swf-story__ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  height: 4.6rem;
  padding: 0.3rem;
  border-radius: 50%;
  background: conic-gradient(from 20deg,
    var(--accent), rgba(var(--additional-rgb), 0.9), var(--accent));
}

.swf-story__ring .swf-avatar {
  width: 100%;
  height: 100%;
  border: 2px solid var(--base);
}

.swf-story.is-seen .swf-story__ring { background: var(--st-muted); }
.swf-story.is-seen { color: var(--t-muted-extra); }

.swf-story.is-live .swf-story__ring {
  background: conic-gradient(from 20deg, #d6455c, #f5bf4f, #d6455c);
}

.swf-story.is-live .swf-story__ring::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(214, 69, 92, 0.6);
  animation: swl-ring 2.4s ease-out infinite;
}

.swf-story em {
  position: absolute;
  top: 3.9rem;
  font-style: normal;
  padding: 0.1rem 0.6rem;
  border-radius: 0.5rem;
  border: 2px solid var(--base);
  background-color: #d6455c;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.swf-feed {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  flex: 1;
  padding: 1.4rem 2.4rem 2rem;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

.swf-post {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--st-muted);
  border-radius: 1.4rem;
  background-color: var(--base-tint);
  flex-shrink: 0;
  transition: transform 0.35s ease, border-color 0.35s ease,
              box-shadow 0.35s ease;
}

.no-touch .swf-post:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.22);
}

.swf-post.is-new { animation: swf-in 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes swf-in {
  from { opacity: 0; transform: translateY(-1.4rem) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.swf-post__head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.swf-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.swf-avatar--a { background: linear-gradient(135deg, #e58f6f, #a1443b); }
.swf-avatar--b { background: linear-gradient(135deg, #6fb2e5, #3b5aa1); }
.swf-avatar--c { background: linear-gradient(135deg, #a56fe5, #5f3ba1); }
.swf-avatar--d { background: linear-gradient(135deg, #74d29a, #2f7a54); }
.swf-avatar--e { background: linear-gradient(135deg, #e56fb4, #a13b6e); }
.swf-avatar--f { background: linear-gradient(135deg, #6fd8e5, #2f7a8a); }

.swf-post__who {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
}

.swf-post__who b {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--t-bright);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swf-post__who > span {
  font-size: 1.05rem;
  color: var(--t-muted-extra);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swf-post__media {
  height: 7.4rem;
  border-radius: 1rem;
  border: 1px solid var(--st-muted);
}

.swf-post__media--a { background: linear-gradient(120deg, #2e4a63, #182635); }
.swf-post__media--b { background: linear-gradient(120deg, #5a3e63, #2a1c30); }

.swf-post__actions {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-size: 1.2rem;
  color: var(--t-muted);
}

.swf-act {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-variant-numeric: tabular-nums;
}

.swf-act i { font-size: 1.5rem; }

.swf-act.is-pop i {
  color: #ef6a88;
  animation: swf-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes swf-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* two hearts float off a liked post (is-pop is held ~0.9s by the driver) */
.swf-act--like.is-pop::before,
.swf-act--like.is-pop::after {
  content: "\2665";
  position: absolute;
  left: 0.3rem;
  top: -0.3rem;
  font-size: 1.05rem;
  color: #ef6a88;
  pointer-events: none;
  animation: swf-float 0.85s ease-out forwards;
}

.swf-act--like.is-pop::after {
  left: 1.1rem;
  font-size: 0.85rem;
  animation-delay: 0.12s;
  animation-duration: 0.95s;
}

@keyframes swf-float {
  0%   { opacity: 0; transform: none; }
  20%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-0.7rem, -2.8rem) scale(1.4); }
}

/* "someone is typing" ribbon inside a post (cycled by the driver) */
.swf-typing {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.swf-typing.is-on { opacity: 1; }

.swf-typing i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--t-muted);
  animation: swf-typing 1.2s ease-in-out infinite;
}

.swf-typing i:nth-child(2) { animation-delay: 0.15s; }
.swf-typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes swf-typing {
  0%, 60%, 100% { transform: none; opacity: 0.5; }
  30%           { transform: translateY(-0.3rem); opacity: 1; }
}

.swf-typing em {
  margin-left: 0.5rem;
  font-style: normal;
  font-size: 1.02rem;
  color: var(--t-muted-extra);
}

.swf-aside {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2rem 1.8rem;
  border-left: 1px solid var(--st-muted);
  overflow: hidden;
}

/* community counter, ticked upward by the driver */
.swf-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--st-muted);
  border-radius: 1.2rem;
  background-color: var(--base-tint);
}

.swf-kpi b {
  font-family: var(--_font-accent);
  font-size: 1.8rem;
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.swf-kpi span {
  font-size: 1.02rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
}

/* online-now presence stack */
.swf-online {
  display: flex;
  align-items: center;
}

.swf-onav {
  position: relative;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.swf-onav + .swf-onav { margin-left: -0.8rem; }

.swf-onav .swf-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--base);
}

.swf-onav b {
  position: absolute;
  right: -0.1rem;
  bottom: -0.1rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #62c554;
  border: 2px solid var(--base);
  animation: sw-blink 2.6s ease-in-out infinite;
}

.swf-onav:nth-child(2) b { animation-delay: 0.9s; }
.swf-onav:nth-child(3) b { animation-delay: 1.7s; }

.swf-onav--more {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--st-muted);
  background-color: var(--base-tint);
  font-size: 1.02rem;
  color: var(--t-muted);
}

.swf-aside__label {
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.swf-trend {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.swf-trend b {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--t-bright);
}

.swf-trend span {
  font-size: 1.1rem;
  color: var(--t-muted-extra);
  font-variant-numeric: tabular-nums;
}

/* ---- clip post: a reel that plays itself (and on tap) ---- */
.swf-clip {
  position: relative;
  display: block;
  height: 7.4rem;
  border-radius: 1rem;
  border: 1px solid var(--st-muted);
  overflow: hidden;
  cursor: pointer;
}

.swf-clip__scene {
  position: absolute;
  inset: -8%;
  background-image:
    radial-gradient(75% 110% at 76% 20%, rgba(64, 178, 178, 0.45), transparent 60%),
    radial-gradient(60% 95% at 16% 88%, rgba(159, 139, 231, 0.35), transparent 55%),
    linear-gradient(120deg, #2e4a63, #182635);
  transform: scale(1.04);
  transition: transform 0.6s ease;
}

.swf-clip.is-playing .swf-clip__scene {
  animation: swf-camdrift 9s ease-in-out infinite alternate;
}

@keyframes swf-camdrift {
  from { transform: translate3d(-2%, 0, 0) scale(1.06); }
  to   { transform: translate3d(2%, -2%, 0) scale(1.14); }
}

.swf-clip__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 1.4rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.35s ease, transform 0.35s ease,
              background-color 0.3s ease;
}

.no-touch .swf-clip:hover .swf-clip__play {
  transform: translate(-50%, -50%) scale(1.12);
  background: rgba(0, 0, 0, 0.65);
}

.swf-clip.is-playing .swf-clip__play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.5);
}

.swf-clip__views,
.swf-clip__len {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.7rem;
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.swf-clip__views { left: 0.8rem; top: 0.7rem; }
.swf-clip__len { right: 0.8rem; bottom: 0.9rem; }

.swf-clip__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.35rem;
  background: rgba(255, 255, 255, 0.16);
}

.swf-clip__bar b {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
}

.swf-clip.is-playing .swf-clip__bar b {
  animation: swf-clipfill 14s linear forwards;
}

@keyframes swf-clipfill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ---- poll post: takes one vote ---- */
.swf-poll {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.swf-poll__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--st-muted);
  border-radius: 0.9rem;
  overflow: hidden;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--t-muted);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.no-touch .swf-poll__opt:hover { border-color: rgba(var(--accent-rgb), 0.45); }

.swf-poll__opt i {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(var(--accent-rgb), 0.13);
  transition: width 0.6s var(--_animbezier);
}

.swf-poll__opt em,
.swf-poll__opt b {
  position: relative;
  font-style: normal;
}

.swf-poll__opt b { font-variant-numeric: tabular-nums; }

.swf-poll__opt.is-lead { color: var(--t-bright); }

.swf-poll__opt.is-mine {
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--t-bright);
}

.swf-poll__opt.is-mine b::after { content: " \2713"; color: var(--accent); }

.swf-poll__meta {
  font-size: 1rem;
  color: var(--t-muted-extra);
  font-variant-numeric: tabular-nums;
}

/* ---- group video call PiP (expands to .swf-callx) ---- */
.swf-call {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 3;
  width: 19rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 12, 18, 0.82);
  box-shadow: 0 1.6rem 4rem rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  transition: transform 0.4s var(--_animbezier), opacity 0.4s ease,
              border-color 0.35s ease;
}

.no-touch .swf-call:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.swf-call.is-ended,
.sw-app--social.is-call-open .swf-call {
  opacity: 0;
  transform: translateY(1.2rem) scale(0.9);
  pointer-events: none;
}

.swf-call.is-back { animation: swf-in 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

.swf-call__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.72);
}

.swf-call__head b {
  margin-left: auto;
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.swf-call__rec {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #d6455c;
  flex-shrink: 0;
  animation: sw-blink 1.8s ease-in-out infinite;
}

.swf-call__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

/* participant "camera" tiles — shared by the PiP and the overlay */
.swf-tile {
  position: relative;
  height: 4.6rem;
  border-radius: 0.9rem;
  overflow: hidden;
  transition: box-shadow 0.35s ease;
}

.swf-tile--b {
  background:
    radial-gradient(90% 120% at 70% 18%, rgba(255, 255, 255, 0.18), transparent 55%),
    linear-gradient(135deg, #3c5f86, #22344f);
}

.swf-tile--c {
  background:
    radial-gradient(90% 120% at 30% 20%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(135deg, #6a4a90, #3a2853);
}

.swf-tile--d {
  background:
    radial-gradient(90% 120% at 65% 80%, rgba(255, 255, 255, 0.14), transparent 55%),
    linear-gradient(135deg, #3f7a58, #24462f);
}

.swf-tile--you {
  background:
    radial-gradient(90% 120% at 50% 15%, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(135deg, #8a5a3c, #4f3222);
}

.swf-tile.is-talking {
  box-shadow: inset 0 0 0 2px var(--accent),
              0 0 1.4rem rgba(var(--accent-rgb), 0.35);
}

.swf-tile > b {
  position: absolute;
  left: 0.5rem;
  bottom: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.85rem;
  font-weight: 500;
}

/* mic-slash: always on Dev, on You only while muted */
.swf-tile > i {
  position: absolute;
  right: 0.4rem;
  top: 0.4rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ef8a9d;
  font-size: 0.9rem;
}

.swf-tile--d > i,
.swf-tile.is-muted > i { display: flex; }

.swf-call__ctl {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
}

.swf-call__ctl > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 1.3rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.no-touch .swf-call__ctl > i:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.swf-call__ctl > .swf-call__end { background: #d6455c; }
.no-touch .swf-call__ctl > .swf-call__end:hover { background: #e05a70; }

/* ---- aside "Live now" card ---- */
.swf-livecard {
  position: relative;
  display: block;
  height: 7rem;
  border-radius: 1.2rem;
  border: 1px solid var(--st-muted);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.35s ease, border-color 0.35s ease;
}

.no-touch .swf-livecard:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 69, 92, 0.55);
}

.swf-livecard__scene {
  position: absolute;
  inset: -8%;
  background-image:
    radial-gradient(80% 110% at 72% 18%, rgba(214, 96, 64, 0.5), transparent 60%),
    radial-gradient(65% 95% at 18% 86%, rgba(159, 139, 231, 0.35), transparent 55%),
    linear-gradient(120deg, #241430, #10202e);
  animation: swf-camdrift 12s ease-in-out infinite alternate;
}

.swf-livecard > em {
  position: absolute;
  left: 0.8rem;
  top: 0.7rem;
  padding: 0.15rem 0.6rem;
  border-radius: 0.5rem;
  background: #d6455c;
  color: #fff;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.swf-livecard__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.4rem 0.9rem 0.7rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}

.swf-livecard__meta b {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.swf-livecard__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.swf-livecard__meta u { text-decoration: none; }

/* ---- live-stream overlay ---- */
.swf-live {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #08070d;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
  transition: opacity 0.5s ease, transform 0.5s var(--_animbezier),
              visibility 0s linear 0.5s;
}

.sw-app--social.is-live-open .swf-live {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* the "stream": two drifting key-art scenes crossfade */
.swf-scene {
  position: absolute;
  inset: -8%;
  opacity: 0;
  animation: swf-scenecycle 18s linear infinite;
}

.swf-scene--1 {
  background-image:
    radial-gradient(80% 110% at 72% 18%, rgba(214, 96, 64, 0.5), transparent 60%),
    radial-gradient(70% 100% at 14% 86%, rgba(159, 139, 231, 0.35), transparent 55%),
    linear-gradient(118deg, #1c1030, #2c1a45 55%, #0e0a1c);
}

.swf-scene--2 {
  animation-delay: 9s;
  background-image:
    radial-gradient(85% 120% at 26% 24%, rgba(64, 178, 178, 0.45), transparent 60%),
    radial-gradient(65% 95% at 80% 88%, rgba(214, 69, 92, 0.3), transparent 55%),
    linear-gradient(118deg, #0a1420, #163040 55%, #081018);
}

@keyframes swf-scenecycle {
  0%        { opacity: 0; transform: scale(1.02); }
  7%        { opacity: 1; }
  50%       { opacity: 1; }
  57%, 100% { opacity: 0; transform: scale(1.16); }
}

.swf-live__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.6rem 2rem;
  background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
}

.swf-live__who {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.swf-live__who b {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.15;
}

.swf-live__who span {
  color: rgba(255, 255, 255, 0.65);
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swf-live__badge {
  padding: 0.2rem 0.7rem;
  border-radius: 0.5rem;
  background: #d6455c;
  color: #fff;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  animation: sw-blink 2.4s ease-in-out infinite;
}

.swf-live__eyes {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  border-radius: 1.2rem;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.swf-live__follow {
  margin-left: auto;
  padding: 0.5rem 1.3rem;
  border-radius: 1.6rem;
  background: var(--accent);
  color: var(--base);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
              box-shadow 0.3s ease, transform 0.3s ease;
}

.no-touch .swf-live__follow:hover { transform: translateY(-1px); }

.swf-live__follow.is-on {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
}

.swf-live__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.no-touch .swf-live__close:hover { background: rgba(255, 255, 255, 0.18); }

/* floating hearts column */
.swf-live__hearts {
  position: absolute;
  right: 1.6rem;
  bottom: 7rem;
  top: 32%;
  width: 6rem;
  z-index: 2;
  pointer-events: none;
}

.swf-heart {
  position: absolute;
  bottom: 0;
  left: 50%;
  color: #ef6a88;
  font-size: 1.6rem;
  opacity: 0;
  animation: swf-rise 2.6s ease-out forwards;
}

.swf-heart--b { color: #f5bf4f; }
.swf-heart--c { color: #fff; }

@keyframes swf-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  12%  { opacity: 0.95; }
  55%  { transform: translate(1.2rem, -8rem) scale(1.05); }
  100% { opacity: 0; transform: translate(-1.4rem, -16rem) scale(1.25); }
}

/* live chat, newest at the bottom, fading up */
.swf-live__chat {
  position: absolute;
  left: 2rem;
  bottom: 7rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: min(30rem, 62%);
  -webkit-mask-image: linear-gradient(to top, #000 68%, transparent);
  mask-image: linear-gradient(to top, #000 68%, transparent);
}

.swf-msg {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.swf-msg.is-in { animation: swf-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

.swf-msg b { font-weight: 600; flex-shrink: 0; }
.swf-msg em { font-style: normal; min-width: 0; }
.swf-msg .is-a { color: #f0a58a; }
.swf-msg .is-b { color: #8ec4f0; }
.swf-msg .is-c { color: #c09df0; }
.swf-msg .is-d { color: #93e0b4; }
.swf-msg .is-e { color: #f09dc8; }
.swf-msg .is-f { color: #8fe2ef; }

.swf-live__bar {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem 2rem 1.6rem;
}

.swf-live__input {
  flex: 1;
  padding: 0.85rem 1.4rem;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.45);
  font-size: 1.1rem;
}

.swf-live__bar > i {
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.7rem;
}

.swf-live__heart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef6a88, #d6455c);
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
  transition: transform 0.25s var(--_animbezier);
}

.no-touch .swf-live__heart:hover { transform: scale(1.1); }
.swf-live__heart:active { transform: scale(0.9); }

/* ---- expanded video-call overlay ---- */
.swf-callx {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  background: rgba(9, 8, 14, 0.99);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.035);
  transition: opacity 0.5s ease, transform 0.5s var(--_animbezier),
              visibility 0s linear 0.5s;
}

.sw-app--social.is-call-open .swf-callx {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.swf-callx__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
}

.swf-callx__top > b { color: #fff; font-weight: 600; font-size: 1.2rem; }
.swf-callx__top > span[data-swf-calltime] { font-variant-numeric: tabular-nums; }

.swf-callx__rec {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.8rem;
  border-radius: 0.6rem;
  background: rgba(214, 69, 92, 0.16);
  color: #ef8a9d;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.swf-callx__rec i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #d6455c;
  animation: sw-blink 1.8s ease-in-out infinite;
}

.swf-callx__min {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.no-touch .swf-callx__min:hover { background: rgba(255, 255, 255, 0.18); }

.swf-callx__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.swf-cxtile {
  position: relative;
  border-radius: 1.2rem;
  overflow: hidden;
  transition: box-shadow 0.35s ease;
}

.swf-cxtile.is-talking {
  box-shadow: inset 0 0 0 2px var(--accent),
              0 0 2rem rgba(var(--accent-rgb), 0.3);
}

/* slow "camera" sheen so each feed feels alive */
.swf-cxtile__cam {
  position: absolute;
  inset: -10%;
  background: radial-gradient(60% 80% at 50% 30%,
    rgba(255, 255, 255, 0.14), transparent 60%);
  animation: swf-camdrift 10s ease-in-out infinite alternate;
}

.swf-cxtile:nth-child(2) .swf-cxtile__cam { animation-delay: -3s; }
.swf-cxtile:nth-child(3) .swf-cxtile__cam { animation-delay: -6s; }
.swf-cxtile:nth-child(4) .swf-cxtile__cam { animation-delay: -8s; }

.swf-cxtile > b {
  position: absolute;
  left: 0.9rem;
  bottom: 0.8rem;
  padding: 0.25rem 0.8rem;
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 500;
}

/* speaking waveform, lit while is-talking */
.swf-cxtile__eq {
  position: absolute;
  right: 0.9rem;
  bottom: 0.9rem;
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: 1.3rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.swf-cxtile.is-talking .swf-cxtile__eq { opacity: 1; }

.swf-cxtile__eq i {
  width: 0.35rem;
  border-radius: 0.2rem;
  background: var(--accent);
  animation: swf-eq 0.9s ease-in-out infinite;
}

.swf-cxtile__eq i:nth-child(1) { height: 0.7rem; }
.swf-cxtile__eq i:nth-child(2) { height: 1.2rem; animation-delay: 0.18s; }
.swf-cxtile__eq i:nth-child(3) { height: 0.9rem; animation-delay: 0.36s; }

@keyframes swf-eq {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1); }
}

/* mic-slash chip: always on Dev, on You only while muted */
.swf-cxtile > u {
  position: absolute;
  right: 0.8rem;
  top: 0.8rem;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #ef8a9d;
  font-size: 1.2rem;
  text-decoration: none;
}

.swf-cxtile.swf-tile--d > u,
.swf-cxtile.is-muted > u { display: flex; }
.swf-cxtile.is-muted .swf-cxtile__eq { opacity: 0; }

/* auto-captions ribbon */
.swf-callx__cc {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 92%;
  padding: 0.6rem 1.4rem;
  border-radius: 0.9rem;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
}

.swf-callx__cc i { color: rgba(255, 255, 255, 0.55); font-size: 1.4rem; }

.swf-callx__cc em {
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swf-callx__cc em.is-swap { animation: swf-in 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

.swf-callx__ctl {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 0.2rem;
}

.swf-cbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease,
              transform 0.3s ease;
}

.no-touch .swf-cbtn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.swf-cbtn.is-off { background: #fff; color: #16161c; }

.swf-cbtn--end { width: 6rem; border-radius: 2rem; background: #d6455c; }
.no-touch .swf-cbtn--end:hover { background: #e05a70; }

/* ------------------------------------------------------------ */
/* CTA row                                                       */
/* ------------------------------------------------------------ */
.sw-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 3.2rem;
}

/* ------------------------------------------------------------ */
/* Responsive                                                    */
/* ------------------------------------------------------------ */
@media only screen and (max-width: 1199px) {
  .sw-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  /* rail becomes a horizontal snap strip above the stage */
  .sw-rail {
    flex-direction: row;
    gap: 0.9rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.6rem;
    margin-inline: -0.2rem;
    padding-inline: 0.2rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .sw-rail::-webkit-scrollbar { display: none; }

  .sw-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    grid-template-columns: auto auto;
    grid-template-areas: "icon name";
    padding: 1.1rem 1.6rem 1.3rem;
    border-radius: 1.4rem;
    column-gap: 1rem;
  }

  .sw-tab__hint,
  .sw-tab__index { display: none; }

  .sw-tab__icon {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.7rem;
    border-radius: 0.9rem;
  }

  .sw-tab__name {
    font-size: 1.45rem;
    white-space: nowrap;
  }

  .sw-screen,
  .sw-stage--solo .sw-screen { min-height: clamp(46rem, 60vw, 56rem); }

  /* ott: the rank laurel is desktop garnish; compact the billboard and
     rows so both hero rows always sit fully inside the stage */
  .swo-rank { display: none; }
  .swo-lockup { padding: 1.4rem 2rem 1.6rem; }
  .swo-rowlabel { padding: 1rem 2rem 0.5rem; }
  .swo-row__track { padding: 0 2rem; }
  .swo-poster { flex: 0 0 8.8rem; height: 10.6rem; }
  .swo-poster b { font-size: 4.8rem; bottom: -1.1rem; }
  .swo-cw { flex: 0 0 15rem; height: 7.2rem; }

  /* social: the call PiP steps back a size */
  .swf-call { width: 17rem; }
  .swf-tile { height: 4.2rem; }
}

@media only screen and (max-width: 767px) {
  .sw-screen,
  .sw-stage--solo .sw-screen { min-height: 46rem; }

  .sw-chrome { gap: 1rem; padding: 1.1rem 1.4rem; }
  .sw-chrome__live span { display: none; }
  .sw-chrome__url { max-width: none; }

  .sw-caption { padding: 1.1rem 1.3rem; }
  .sw-caption__specs { gap: 0.6rem; }
  .sw-spec { font-size: 1.1rem; padding: 0.5rem 1rem; }
  /* the third spec is a bonus — give the row back to the first two
     and the explore link on narrow phones */
  .sw-spec:nth-child(3) { display: none; }

  /* music: drop the sidebar, stack hero */
  .sw-app--music {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "bar";
  }
  .swm-side { display: none; }
  .swm-disc { width: 7.4rem; height: 7.4rem; }
  .swm-hero { gap: 1.6rem; }
  .swm-main { padding: 2rem; }
  .swm-bar  { padding: 1.3rem 2rem; gap: 1.2rem; }
  .swm-vol, .swm-bar .swm-side-ctl { display: none; }

  /* ott */
  .swo-nav { display: none; }
  .swo-top { padding: 1.4rem 1.8rem 1rem; }
  .swo-billboard { margin: 0.2rem 1.8rem 0; min-height: 11rem; }
  .swo-lockup { padding: 1.4rem 1.8rem; }
  .swo-rowlabel { padding: 1.1rem 1.8rem 0.5rem; }
  .swo-row__track { padding: 0 1.8rem; gap: 1rem; }
  .swo-poster { flex-basis: 8rem; height: 11rem; }
  .swo-poster b { font-size: 4.8rem; }
  .swo-row--top10 .swo-poster__meta { padding-left: 2.5rem; }
  .swo-cw { flex-basis: 14rem; height: 7.4rem; }
  .swo-profiles__row { gap: 1.4rem; }
  .swo-profile__tile { width: 4.6rem; height: 4.6rem; }

  /* cinema player: tighter chrome on phones */
  .swo-player__top { padding: 1.2rem 1.4rem 2.2rem; }
  .swo-player__ctl { padding: 2.6rem 1.4rem 1.2rem; gap: 0.9rem; }
  .swo-player__vol > span { width: 3.6rem; }
  .swo-player__chip { display: none; }
  .swo-player__btn--dim { display: none; }
  .swo-skipintro { right: 1.4rem; bottom: 8.4rem; padding: 0.6rem 1.2rem; font-size: 1.05rem; }

  /* shop: two columns */
  .sws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 1.8rem; }
  .sws-card:nth-child(n+3) { display: none; }
  .sws-top, .sws-filters { padding-left: 1.8rem; padding-right: 1.8rem; }
  .sws-checkout { padding: 1.2rem 1.8rem; }
  .sws-ship { padding: 0 1.8rem; margin-top: 1.2rem; }
  .sws-secure { display: none; }
  .sws-secure + .sws-buy { margin-left: auto; }
  .sws-card__note { display: none; }

  /* logistics: KPIs become a top strip */
  .sw-app--logi {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kpi"
      "map"
      "feed";
  }
  .swl-kpis {
    flex-direction: row;
    gap: 1rem;
    padding: 1.4rem 1.8rem;
    border-right: 0;
    border-bottom: 1px solid var(--st-muted);
  }
  .swl-kpis .sw-kpi { flex: 1; padding: 1rem 1.2rem; }
  .swl-kpis .sw-kpi b { font-size: 1.5rem; }
  .swl-kpis .sw-kpi span { font-size: 0.95rem; }
  /* the optimiser card and fleet strip are desktop garnish */
  .swl-opt, .swl-fleet { display: none; }
  .swl-marker__label { display: none; }
  .swl-legend { top: 0.9rem; right: 1rem; padding: 0.4rem 0.9rem; gap: 0.8rem; }
  .swl-marker__icon { width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
  .swl-geo { width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; top: 1.2rem; }
  .swl-flag { padding: 0.3rem 0.8rem; font-size: 0.9rem; }
  .swl-advisory { left: 1rem; bottom: 1rem; padding: 0.4rem 0.9rem; max-width: calc(100% - 2rem); }
  .swl-feed { max-height: calc(3 * 4rem); }
  .swl-feedrow { height: 4rem; padding: 0 1.8rem; gap: 1.2rem; }
  .swl-feedrow .swl-eta-cell { display: none; }
  /* cartography garnish steps back on the short phone map */
  .swl-shield, .swl-mapkit, .swl-crane { display: none; }
  .swl-eta { padding: 0.45rem 0.9rem 0.4rem; }
  .swl-eta__note { display: none; }
  .swl-status { min-width: 8rem; }

  /* crm: two columns, hide the middle stage */
  .swc-board { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 1.8rem 1.8rem; }
  .swc-col--mid { display: none; }
  .swc-top { padding: 1.6rem 1.8rem 1.2rem; }
  .swc-forecast { display: none; }
  .swc-total { margin-left: auto; }
  .swc-ai { font-size: 1.05rem; bottom: 1.4rem; }

  /* social: hide trends aside */
  .sw-app--social { grid-template-columns: minmax(0, 1fr); }
  .swf-aside { display: none; }
  .swf-stories { padding: 1.4rem 1.8rem 0.4rem; gap: 1.4rem; }
  .swf-feed { padding: 1.2rem 1.8rem 1.8rem; }
  .swf-call { width: 15.4rem; right: 1.2rem; bottom: 1.2rem; padding: 0.9rem 1rem 1rem; }
  .swf-tile { height: 3.8rem; }
  .swf-call__ctl > i { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; }
  .swf-live__top { padding: 1.3rem 1.6rem; }
  .swf-live__who span { display: none; }
  .swf-live__chat { left: 1.6rem; bottom: 6.4rem; width: min(26rem, 68%); }
  .swf-live__hearts { right: 1.2rem; bottom: 6.4rem; }
  .swf-live__bar { padding: 1rem 1.6rem 1.4rem; }
  .swf-callx { padding: 1.3rem 1.4rem; gap: 1rem; }
  .swf-callx__grid { gap: 0.7rem; }
  .swf-cbtn { width: 3.3rem; height: 3.3rem; font-size: 1.4rem; }
  .swf-cbtn--end { width: 5.2rem; }
}

/* small phones: keep the KPI strip and transport bar breathable */
@media only screen and (max-width: 430px) {
  .swl-kpis .sw-kpi:nth-child(3) { display: none; }
  .swl-legend { display: none; }
  .swl-mode { display: none; }
  /* the mode icon leaves the grid — re-declare the surviving columns
     (id · description · status) or the pill lands mid-sentence */
  .swl-feedrow { grid-template-columns: auto minmax(0, 1fr) auto; }
  .swl-yard { display: none; }
  .swl-flag { display: none; }
  .swl-track { display: none; }
  .swl-advisory { display: none; }
  .swl-geo { display: none; }
  .swl-eta { display: none; }
  .swl-ship { display: none; }
  .swm-bar .ph-skip-back { display: none; }
  .swm-live { display: none; }
  .sw-chrome__open { width: 2.7rem; height: 2.7rem; }
  .sws-filters .sws-filter:nth-child(n+4) { display: none; }
  .swc-card__next { display: none; }
  .swc-col__head u { display: none; }
  /* names beat numbers on a 2-up board this narrow */
  .swc-card__value { display: none; }
  .swc-avatar { width: 2rem; height: 2rem; font-size: 0.8rem; }
  .sws-eyes { display: none; }
  .sws-stars { display: none; }
  .swf-story:nth-child(n+5) { display: none; }
  .swf-clip__views { display: none; }
  .swf-poll__meta { display: none; }
  .swf-callx__cc { max-width: 100%; }
  .swo-player__vol { display: none; }
  .swo-player__cast { display: none; }
}

/* ------------------------------------------------------------ */
/* Reduced motion: freeze the theatre, keep the content          */
/* ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sw-atelier__glow,
  .sw-chrome__live i,
  .sw-caption__link,
  .sw-stackline__track,
  .swm-disc,
  .swm-eq i,
  .swm-live i,
  .swm-bar .swm-play,
  .swo-art,
  .swo-art::after,
  .swo-row__track,
  .swo-play,
  .swo-bell b,
  .swo-scene,
  .swo-player__beam,
  .swo-player__grain,
  .swo-player__spin i,
  .sws-card__img::after,
  .sws-eyes i,
  .sws-stock i,
  .swl-jam,
  .swl-jamglow,
  .swl-slow,
  .swl-dir__line,
  .swl-dir__chev,
  .swl-lane,
  .swl-stop,
  .swl-geo,
  .swl-flag,
  .swl-advisory i,
  .swl-marker__icon--pulse::after,
  .swl-sweep,
  .swl-yard i,
  .swl-crane__trolley,
  .swl-crane__cable,
  .swl-crane__box,
  .swl-ship,
  .swl-eta,
  .swc-spark polyline,
  .swc-card__hot,
  .swc-ai > i,
  .swf-act.is-pop i,
  .swf-act--like.is-pop::before,
  .swf-act--like.is-pop::after,
  .swf-story__ring::after,
  .swf-typing i,
  .swf-onav b,
  .swf-scene,
  .swf-heart,
  .swf-clip__scene,
  .swf-clip__bar b,
  .swf-livecard__scene,
  .swf-live__badge,
  .swf-call__rec,
  .swf-callx__rec i,
  .swf-cxtile__cam,
  .swf-cxtile__eq i {
    animation: none !important;
  }

  .sw-panel,
  .sw-caption {
    transition: none;
  }

  /* the profile gate never opens without its driver; keep it inert */
  .swo-profiles { display: none; }

  /* SMIL vehicles keep moving regardless of CSS — hide them instead,
     along with their trails and the JS-driven telemetry tag */
  .swl-vehset { display: none; }
  .swl-track { display: none; }

  .swm-eq i { height: 1.4rem; }
}