/* Score-card stories (see stories.js): straight cards in an endless row, panel look. */
.st-host { height: auto !important; display: block !important; }
.st-host > :not(.st-row) { display: none !important; }
.st-row { width: 100vw; margin-inline: calc(50% - 50vw); padding: 14px 0 26px; overflow-x: clip; overflow-y: visible; direction: ltr; }
.st-track { display: flex; align-items: stretch; gap: clamp(14px, 1.6vw, 24px); width: max-content; will-change: transform; }
.st-card { --tone: #750FD0; position: relative; flex: none; width: clamp(280px, 26vw, 380px); min-height: clamp(280px, 22vw, 320px);
  display: flex; flex-direction: column; gap: 14px; padding: 24px 26px 22px; border-radius: 28px; overflow: hidden;
  background: var(--tone); color: #fff; direction: rtl; box-shadow: 0 22px 44px rgba(20, 0, 40, .3); }
.st-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.st-ribbon path { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 64; stroke-linecap: round; }
.st-card > :not(.st-ribbon) { position: relative; }

.st-score { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 6px;
  border-radius: 16px; background: rgb(94, 234, 212); color: rgb(22, 22, 22); border: 2px solid rgb(22, 22, 22);
  border-bottom-width: 5px; font: 400 clamp(30px, 2.6vw, 40px)/1 Lalezar, sans-serif; }
.st-score i { font-style: normal; font-size: .6em; }
.st-score b:first-child { opacity: .45; font-size: .78em; }
.st-score em { font: 400 .5em/1 Lalezar, sans-serif; font-style: normal; padding: 6px 9px 4px; border-radius: 10px;
  background: rgb(22, 22, 22); color: rgb(94, 234, 212); margin-inline-start: 4px; }
.st-score--next { font-size: clamp(24px, 2vw, 30px); }
.st-score--next b:first-child { opacity: 1; font-size: 1em; }

.st-quote { margin: 0; flex: 1; font: 400 clamp(15px, 1.2vw, 18px)/1.65 "Readex Pro", sans-serif; }
.st-card footer { display: grid; gap: 4px; }
.st-card strong { font: 400 clamp(20px, 1.6vw, 24px)/1.1 Lalezar, sans-serif; }
.st-card footer span { font: 500 13px/1.4 "Readex Pro", sans-serif; color: rgb(166, 245, 232); }

.st-card--next { background: rgb(94, 234, 212); color: rgb(22, 22, 22); }
.st-card--next .st-ribbon path { stroke: rgba(255, 255, 255, .35); }
.st-card--next .st-score { background: #fff; }
.st-card--next footer span { color: rgb(53, 13, 88); }