/* ---------------------------------------------------------------------------
   Peltify — the suggestion deck's own surfaces, 2026-08-26.

   THIS FILE OWNS THREE THINGS AND NOTHING ELSE:

     the gate        the taste-check questions that now come BEFORE the picks
     the loader      the staged indicator that advances on real events only
     the reasoning   "Because you have X and Y", what it adds, and the overlap

   It is loaded after `dashboard.css` and before `scan.css`, so the handful of
   rules here that restate something in `app.css` win by order rather than by
   specificity or `!important`. Nothing in `app.css` was deleted: the card's
   frame, its columns, its artwork and its verdict buttons are all still that
   file's, and only the right-hand column's contents changed.
   --------------------------------------------------------------------------- */

/* ------------------------------------------------------------- the gate --- */

.sq-strip.is-gate {
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--violet-wash), transparent 62%),
    var(--white);
  box-shadow: var(--shadow-sm);
}
.sq-strip.is-gate .sq-h {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 13px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--spine);
}
.sq-strip.is-gate .sq-h svg { flex: none; }

.sq-basis {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-faint);
}

.sq-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.sq-skip { font-size: 12.5px; }
.sq-count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* ----------------------------------------------------------- the loader --- */

.sg-loading {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 160% at 0% 50%, var(--violet-wash), transparent 60%),
    var(--white);
}
.sg-loading-body { min-width: 0; flex: 1 1 auto; }
.sg-loading-h {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* THE ORBIT. It measures nothing and is not allowed to look as though it does
   — no arc that fills, no bar that grows. It says "still working", which is
   the only thing about the remaining time this page actually knows. */
.sg-orb {
  position: relative;
  flex: none;
  width: 74px;
  height: 74px;
}
.sg-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--violet);
  opacity: 0.24;
  animation: sg-orb-pulse 2600ms var(--soft, ease) infinite;
}
.sg-orb-ring.is-2 { inset: 9px;  animation-delay: 320ms; opacity: 0.32; }
.sg-orb-ring.is-3 { inset: 18px; animation-delay: 640ms; opacity: 0.4; }
.sg-orb-core {
  position: absolute;
  inset: 29px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 6px var(--violet-wash);
  animation: sg-orb-core 1600ms ease-in-out infinite;
}
@keyframes sg-orb-pulse {
  0%   { transform: scale(0.94); opacity: 0.16; }
  45%  { transform: scale(1.05); opacity: 0.46; }
  100% { transform: scale(0.94); opacity: 0.16; }
}
@keyframes sg-orb-core {
  0%, 100% { transform: scale(0.86); }
  50%      { transform: scale(1.08); }
}

.sg-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.sg-stage {
  display: grid;
  grid-template-columns: 18px minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.sg-stage-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.sg-stage-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}
.sg-stage-note {
  font-size: 11.5px;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sg-stage[data-state="now"] .sg-stage-dot {
  border-color: var(--violet);
  box-shadow: 0 0 0 0 var(--violet-wash-strong);
  animation: sg-stage-now 1500ms ease-out infinite;
}
.sg-stage[data-state="now"] .sg-stage-label { color: var(--ink); }
.sg-stage[data-state="done"] .sg-stage-dot {
  background: var(--violet);
  border-color: var(--violet);
}
.sg-stage[data-state="done"] .sg-stage-label { color: var(--ink-soft); }
@keyframes sg-stage-now {
  0%   { box-shadow: 0 0 0 0 var(--violet-wash-strong); }
  70%  { box-shadow: 0 0 0 7px rgba(139, 31, 209, 0); }
  100% { box-shadow: 0 0 0 0 rgba(139, 31, 209, 0); }
}

@media (max-width: 560px) {
  .sg-loading { gap: 16px; padding: 20px 16px; }
  .sg-orb { width: 56px; height: 56px; }
  .sg-orb-core { inset: 22px; }
  .sg-stage { grid-template-columns: 18px minmax(0, 1fr); }
  .sg-stage-note { grid-column: 2; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-orb-ring, .sg-orb-core, .sg-stage[data-state="now"] .sg-stage-dot {
    animation: none;
  }
}

/* -------------------------------------------------------- the reasoning --- */

/* app.css already makes this column a flex stack; only the rhythm changes,
   because three blocks need more air between them than five lines did. */
.sg-col-why { gap: 15px; }

/* "Because you have Slowdive and Souvlaki." The one sentence that answers the
   only question this card has to answer, set larger than anything else in the
   column because it is the most reliable thing in it. */
.sg-because-line {
  margin: 0;
  font-size: 18px;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.sg-because-lead { color: var(--ink-soft); font-weight: 700; }
.sg-because-line.is-hunch {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}
.sg-because-line.is-hunch .sg-because-lead { color: var(--coral-dark); font-weight: 800; }

.sg-cite {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--spine);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--violet-wash-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--fast) var(--ease);
}
.sg-cite:hover { text-decoration-color: var(--violet); }

/* WHAT IT ADDS. The model's own sentence, alone in a box that looks unlike
   every other box on the card, because it is the one part nothing verified. */
.sg-adds {
  padding: 13px 15px 14px;
  border-radius: var(--r-md);
  border: 1px dashed rgba(139, 31, 209, 0.34);
  background: var(--violet-wash);
}
.sg-adds-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--spine);
}
.sg-adds-h .prov { margin-left: auto; }
.sg-adds-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}

/* THE OVERLAP. Two real counts and a bar whose length is their ratio. */
.sg-ov {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: 13px 15px 14px;
}
.sg-ov-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 10px;
}
.sg-ov-n {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--spine);
  line-height: 1;
}
.sg-ov-n small { font-size: 12px; font-weight: 700; color: var(--ink-faint); }
.sg-ov-cap { font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.sg-ov-meter {
  grid-column: 1 / -1;
  margin-top: 9px;
  height: 5px;
  border-radius: var(--r-box);
  background: var(--paper-deep);
  overflow: hidden;
}
.sg-ov-fill {
  display: block;
  height: 100%;
  border-radius: var(--r-box);
  background: linear-gradient(90deg, var(--violet), var(--sg-vivid, var(--spine)));
  transform-origin: left center;
  animation: sg-ov-grow 620ms var(--soft, ease) both;
}
@keyframes sg-ov-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.sg-ov-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.sg-ov-h {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sg-ov-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sg-ov-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-faint);
}
.sg-ov-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-ov-item b { margin-left: auto; font-size: 11.5px; color: var(--ink-faint); }
.sg-ov-item.is-shared { color: var(--ink); font-weight: 700; }
.sg-ov-item.is-shared b { color: var(--spine); }
.sg-ov-item.is-shared svg { flex: none; color: var(--violet); }
.sg-ov-empty, .sg-ov-none {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
}

@media (max-width: 560px) {
  .sg-because-line { font-size: 16px; }
  .sg-ov-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ------------------------------------------------------------- open on --- */

.sg-where-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 2px;
}
.sg-where {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.sg-where:hover { border-color: var(--violet); color: var(--spine); }

/* app.css still carries `.sg-where { margin-left: auto }` from when this was
   one bare violet link pushed to the end of a line, and two more specific
   rules at `.sg-col-why .sg-where`. A row of pills is not one link at the end
   of a line, so the pill is restated here against the ROW — more specific than
   the bare rule, and matching wherever the row is put — rather than reached
   for with `!important`. */
.sg-where-row .sg-where {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
}
.sg-where-row .sg-where:hover {
  border-color: var(--violet);
  color: var(--spine);
  text-decoration: none;
}

.sg-creator-open, .mc-by-open {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}
.sg-creator-open:hover, .mc-by-open:hover { color: var(--spine); }

/* -------------------------------------------- shaped by, and the record --- */

.sg-shaped {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.sg-shaped svg { flex: none; color: var(--violet); }
.sg-shaped b { color: var(--ink-soft); }

.sg-built { margin-top: 12px; }
.sg-built-s {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.sg-built-s::-webkit-details-marker { display: none; }
.sg-built-s::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(-45deg);
  transition: transform var(--fast) var(--ease);
}
.sg-built[open] .sg-built-s::before { transform: rotate(45deg); }
.sg-built-n {
  margin-left: auto;
  padding: 2px 9px;
  border-radius: var(--r-box);
  background: var(--coral-wash);
  color: var(--coral-dark);
  font-size: 11px;
  font-weight: 800;
}
.sg-built-n.is-clean { background: var(--paper-deep); color: var(--ink-faint); }
.sg-built-body {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--paper);
}
.sg-built-body .run-prov.is-warn { color: var(--warn); }

.sg-drops { margin-top: 4px; }
.sg-drops-h { margin: 0 0 7px; font-size: 12px; color: var(--ink-soft); }
.sg-drops-h b { color: var(--ink); }
.sg-drops-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  max-height: 190px;
  overflow-y: auto;
}
.sg-drop { font-size: 11.5px; line-height: 1.45; color: var(--ink-faint); }
.sg-drop-name {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
}
.sg-drop-name:hover { color: var(--spine); text-decoration: underline; }

/* ===========================================================================
   THE STACK — 2026-08-27, revised the same day.

   Nick first: "The keep, not for me, all those options should be UNDER the
   card like a tinder profile. I want it to have a swipe animation when
   pressing keep, not for me." Then, after seeing it: "the album cover is TOO
   big. Plus I can see the cards UNDERNEATH… there's no indication of the left
   or right not for me / keep anymore. It also doesn't allow me to select
   elements because it's gonna drag… abandon the swipe idea, since I want users
   to be able to copy and paste. I still want to keep the left right swipe
   ANIMATION."

   So, in order:

     THE CARD IS TWO COLUMNS AGAIN.   app.css owns `.sg-split` and `.sg-col-*`
                                      and is used as-is; this file only caps
                                      the cover and re-tunes the type.
     NOTHING SHOWS FROM UNDERNEATH.   Only the top card is rendered at all.
     THERE IS NO DRAG.                No pointer handlers, `user-select: text`,
                                      and the buttons carry the direction.
     THE FLIGHT STAYS.                `--sg-lean` is now written by `__fly()`
                                      instead of by a pointermove, so the stamp
                                      says what the card is doing while it does
                                      it rather than what a pull would do.
   =========================================================================== */

.sg-stack {
  position: relative;
  /* Every card occupies the SAME grid cell, so the stack is as tall as the
     tallest of them and the page does not jump as cards leave. */
  display: grid;
  isolation: isolate;
  /* A card in flight is translated 720px sideways. A transform does not change
     layout but it DOES create scrollable overflow, which on a phone is the
     whole shell sliding sideways — the exact defect the overflow probe exists
     to catch. Clipped here, with enough margin that the resting card's shadow
     is not cut off. */
  overflow: clip;
  overflow-clip-margin: 28px;
}
.sg-swipe {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  transform-origin: 50% 90%;
  will-change: transform;
  /* THE POINT OF REMOVING THE DRAG. A card that followed the pointer had to
     swallow every press inside it; now a synopsis can be selected and copied,
     which is what Nick asked for. Stated rather than inherited, because the
     card used to be a drag handle and a drag handle is not selectable. */
  user-select: text;
  -webkit-user-select: text;
}
.sg-top-card {
  z-index: 2;
  outline: none;
}
/* The card takes focus so the arrow keys can reach it, so it has to SHOW that
   it has focus — that ring is the only thing telling you the keys will land. */
.sg-top-card:focus-visible .sg-card {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px var(--violet-wash-strong), var(--raise);
}
.sg-top-card.is-gone { pointer-events: none; }

/* THE NEXT CARD RISES IN, rather than having been visible underneath the whole
   time. It is a new node each repaint, so this runs once per card and only
   after the one before it has actually left.

   ON THE CARD, NOT ON THE WRAPPER. A filled animation outranks an inline
   style, so a `transform` keyframe on `.sg-top-card` would permanently beat
   the inline transform `__fly()` writes and no card would ever leave again. */
.sg-stack .sg-top-card > .sg-card {
  animation: sg-rise-in 300ms var(--soft, ease) both;
}
@keyframes sg-rise-in {
  from { opacity: 0; transform: translateY(16px) scale(0.972); }
  to   { opacity: 1; transform: none; }
}

.sg-card.sg-one {
  border-radius: var(--r-xl);
  box-shadow: var(--raise);
}

/* =============================================== the viewer and its arrows ==
   Nick, 2026-08-27 (night): "I also want to be able to scroll between all
   suggestions, giving my rating afterwards… buttons I can swipe between the
   options."

   So the card sits between two arrows. They are the same call the left and
   right arrow KEYS make, and the same call a dot underneath makes, so there is
   one motion in this surface with three ways to reach it. They disable at the
   ends rather than wrapping: a deck with an end should feel like it has one,
   and a Next that quietly returned to the first pick would make "3 of 3" false.
   =========================================================================== */
.sg-viewer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.sg-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-soft);
  box-shadow: var(--lift);
  cursor: pointer;
  transition: transform 180ms var(--bounce), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sg-arrow-g { font-size: 15px; line-height: 1; }
.sg-arrow:hover { border-color: var(--violet); color: var(--spine); transform: scale(1.06); }
.sg-arrow:active { transform: scale(0.94); }
.sg-arrow:disabled {
  opacity: 0.32; cursor: default; box-shadow: none;
  transform: none; border-color: var(--line-soft);
}
.sg-arrow:disabled:hover { transform: none; border-color: var(--line-soft); color: var(--ink-soft); }

/* ============================================ what was said about this pick ==
   A verdict no longer takes the card away, so the card is where the verdict
   has to be readable. Otherwise scrolling back through five picks shows five
   identical cards and no record of what was decided about any of them.

   It sits over the top edge of the card, in the colour that verdict wears on
   the button and on its dot — one meaning, one colour, three places. */
.sg-said {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px 5px 9px;
  border-radius: var(--r-box);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--white);
  background: var(--ink);
  box-shadow: var(--lift);
  animation: sg-said-in 320ms var(--bounce, ease) both;
}
.sg-said[data-v="keep"], .sg-said[data-v="pelt"] { background: var(--ok, #1f9d55); }
.sg-said[data-v="no"] { background: var(--coral-dark); }
.sg-said[data-v="seen"] { background: var(--spine); }
.sg-said-m { font-size: 13px; line-height: 1; }
@keyframes sg-said-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
/* The card is the positioning context for the mark. */
.sg-card.sg-one { position: relative; }

/* THE CARD COMES BACK.  A verdict throws it out of frame in the direction of
   the decision — the swipe animation Nick asked twice to keep — and then it
   returns to its slot, because it is still the pick you are looking at. This
   is that return, and it runs for exactly one paint. */
.sg-swipe.is-back > .sg-card { animation: sg-back-in 380ms var(--bounce, ease) both; }
@keyframes sg-back-in {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
/* The gate's question card is still poster-first and single column, so the
   band it uses keeps the shape round three gave it. */
.sg-card.sg-one.sg-qcard .sg-hero { aspect-ratio: 3 / 2; }
.sg-card.sg-one .sg-body {
  padding: 18px 20px 20px;
  gap: 13px;
}
.sg-card.sg-one .sg-titles { display: grid; gap: 2px; }

/* --------------------------------------------- the cover, at a sane size ---
   Nick: "the album cover is TOO big." app.css lets the poster run the full
   width of its own column, which on a wide screen is a cover the size of the
   reasoning next to it. It is capped here instead — 220px, which is about the
   size of a record sleeve on a shelf, and the height follows the artwork's own
   proportions rather than being forced to a band. The blurred backdrop behind
   it is unchanged: it is still made of this work's own pixels.

   The cap is also what keeps the shell from sliding sideways. A replaced
   element with only PERCENTAGE limits still reports its full intrinsic width
   as its minimum contribution; a definite `max-width` is what makes the
   minimum small. */
.sg-card.sg-one .sg-col-work .sg-hero {
  aspect-ratio: auto;
  min-height: 236px;
  padding: 26px 20px;
  border-radius: var(--r-art);
}
.sg-card.sg-one .sg-col-work .sg-art {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 250px;
  border-radius: var(--r-art);
  box-shadow: 0 16px 38px rgba(20, 10, 26, 0.4), 0 2px 6px rgba(20, 10, 26, 0.22);
}
.sg-card.sg-one .sg-col-work .sg-art-none {
  width: 150px;
  height: 190px;
}

.sg-card.sg-one .sg-col-work { gap: 13px; padding-bottom: 20px; }
.sg-card.sg-one .sg-col-work .sg-title { font-size: 24px; margin: 4px 0 2px; }
.sg-card.sg-one .sg-col-work .sg-fact p { font-size: 14.5px; line-height: 1.58; }
.sg-card.sg-one .sg-col-why { gap: 13px; padding: 22px 24px 22px; }

/* THE DEEP-CUT LINE. One fact about where the pick came from, said once. */
.sg-deep {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--spine);
}
.sg-deep svg { flex: none; }

/* The reasoning is the whole right-hand column now, so it needs no rule to
   separate it from what is above it — there is nothing above it. */
.sg-why-block {
  display: grid;
  gap: 13px;
}
.sg-why-block .sg-because-line { font-size: 17px; }
.sg-why-block .sg-adds { padding: 12px 14px 13px; }
.sg-why-block .sg-adds-body { font-size: 13.5px; line-height: 1.5; }
.sg-why-block .sg-ov { padding: 12px 14px 13px; }
.sg-why-block .sg-ov-n { font-size: 20px; }

/* A verdict that did not save puts the card back, and says so at the top of
   the reasoning column — where the eye already is after pressing a button. */
.sg-returned {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: var(--coral-wash);
  color: var(--coral-dark);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
}
.sg-returned svg { flex: none; margin-top: 1px; }

/* --------------------------------------------------------- the stamps --- */

/* WHAT THE CARD IS DOING, IN A WORD, WHILE IT DOES IT. These used to fade in
   with a drag; `--sg-lean` is now set by `__fly()` at the moment the card
   leaves, so the stamp is the flight's own caption rather than a prediction
   about a gesture. The words are still the buttons' words — one vocabulary for
   one action. */
.sg-stamp {
  position: absolute;
  top: 20px;
  z-index: 3;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 3px solid currentColor;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.sg-stamp.is-keep {
  left: 20px;
  color: var(--ok, #1f9d55);
  transform: rotate(-13deg);
  opacity: max(0, var(--sg-lean, 0));
  transition: opacity 140ms var(--ease);
}
.sg-stamp.is-no {
  right: 20px;
  color: var(--coral-dark);
  transform: rotate(13deg);
  opacity: max(0, calc(var(--sg-lean, 0) * -1));
  transition: opacity 140ms var(--ease);
}
.sg-stamp.is-seen {
  left: 50%;
  top: auto;
  bottom: 24px;
  transform: translateX(-50%) rotate(-3deg);
  color: var(--spine);
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.sg-top-card.is-down .sg-stamp.is-seen { opacity: 1; }

/* ------------------------------------------------------- the controls --- */

/* ------------------------------------------------------- the controls ---
   A RATING, NOT A TURN OF THE PAGE.  2026-08-27 (night).

   These used to be the only way a card went anywhere, so each carried the
   arrow key that sent it. The arrows now MOVE THROUGH the deck — Nick: "buttons
   I can swipe between the options" — so the direction cues have come off these
   buttons and gone onto the two arrows either side of the card, where they are
   true. What these carry instead is whether they are the answer already on
   this pick, so pressing one twice is visibly a no-op and pressing another is
   visibly changing your mind. */
.sg-controls {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
  margin-top: 20px;
}
.sg-act {
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--ink-soft);
  font: inherit;
}
.sg-act-glyph {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--raise);
  transition: transform 180ms var(--bounce), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.sg-act-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* THE ANSWER ALREADY ON THIS PICK. Filled rather than outlined, in the colour
   that verdict wears everywhere else on the card — it is a state, not a hover,
   so it survives the pointer leaving. */
.sg-act.is-on .sg-act-glyph { border-width: 2px; box-shadow: none; }
.sg-act.is-on .sg-act-label { color: var(--ink); }
.sg-act-no.is-on .sg-act-glyph {
  border-color: var(--coral-dark); color: var(--coral-dark);
  background: color-mix(in srgb, var(--coral) 12%, var(--white));
}
.sg-act-no.is-on .sg-act-label { color: var(--coral-dark); }
.sg-act-keep.is-on .sg-act-glyph {
  border-color: var(--ok, #1f9d55); color: var(--ok, #1f9d55);
  background: color-mix(in srgb, var(--ok, #1f9d55) 12%, var(--white));
}
.sg-act-keep.is-on .sg-act-label { color: var(--ok, #1f9d55); }
.sg-act-seen.is-on .sg-act-glyph,
.sg-act-pelt.is-on .sg-act-glyph {
  border-color: var(--violet); color: var(--spine); background: var(--violet-wash);
}
.sg-act-seen.is-on .sg-act-label,
.sg-act-pelt.is-on .sg-act-label { color: var(--spine); }
.sg-act.is-small .sg-act-glyph { width: 44px; height: 44px; }
.sg-act.is-small .sg-act-label { font-size: 11px; color: var(--ink-faint); }
.sg-act:hover .sg-act-glyph { transform: translateY(-2px) scale(1.05); }
.sg-act:active .sg-act-glyph { transform: scale(0.93); }
.sg-act:disabled { opacity: 0.4; cursor: default; }
.sg-act:disabled:hover .sg-act-glyph { transform: none; }

.sg-act-no:hover .sg-act-glyph { border-color: var(--coral-dark); color: var(--coral-dark); }
.sg-act-no:hover .sg-act-label { color: var(--coral-dark); }
.sg-act-keep:hover .sg-act-glyph { border-color: var(--ok, #1f9d55); color: var(--ok, #1f9d55); }
.sg-act-keep:hover .sg-act-label { color: var(--ok, #1f9d55); }
.sg-act-seen:hover .sg-act-glyph,
.sg-act-pelt:hover .sg-act-glyph { border-color: var(--violet); color: var(--spine); }
/* Pelt is a share, not a third opinion, so it sits apart from the three that
   are all answers to the same question — and the extra distance is what keeps
   Keep reading as the button on the RIGHT. */
.sg-act-pelt { margin-left: 20px; }

.sg-done {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  text-align: center;
}
.sg-done-h {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ============================================ the gate, as the same stack === */

/* Nick, on the row of dashed tiles this replaced: "Image is tiny, title /
   artist is not layed out nicely. Yes or no button / skip doesn't feel
   intuitive. Works well though." So one question at a time, at the size of a
   pick, with the question set over three lines and two full-width answers. */
.sq-strip.is-gate .sg-stack { margin-top: 4px; }

.sg-qcard .sg-body { gap: 4px; }
.sq-lead {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sq-title {
  margin: 2px 0 0;
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.sq-title .sq-name {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.sq-title .sq-name:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.sq-by {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
.sq-strip.is-gate .sq-basis { margin-top: 9px; }

.sg-controls.is-ask {
  gap: 12px;
  align-items: stretch;
}
.sg-controls.is-ask .sq-yes,
.sg-controls.is-ask .sq-no {
  flex: 1 1 0;
  max-width: 240px;
  padding: 14px 18px;
  border-radius: var(--r-box);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms var(--bounce), filter var(--fast) var(--ease);
}
.sg-controls.is-ask .sq-yes:hover,
.sg-controls.is-ask .sq-no:hover { transform: translateY(-1px); }
.sg-controls.is-ask .sq-yes:active,
.sg-controls.is-ask .sq-no:active { transform: scale(0.97); }

/* The progress count: a dot per card and the words, because a dot alone does
   not say how many are left and a number alone does not show the shape of it.

   ON THE DECK EVERY DOT IS A BUTTON (2026-08-27, night), so five picks deep you
   can go straight back to the second one. On the gate they are the same shape
   and are not pressable — a question you have not reached is not a place to
   jump to — which is why the element is a button either way and only the deck's
   carry a handler. */
.sg-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.sg-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: background var(--fast) var(--ease), width var(--fast) var(--ease);
}
.sg-dot.is-now { width: 22px; border-radius: var(--r-box); background: var(--violet); }
.sg-dot.is-done { background: var(--violet-wash-strong); }
/* A DOT REMEMBERS WHAT WAS SAID, in the same three colours the card uses. */
.sg-dot[data-said="keep"], .sg-dot[data-said="pelt"] { background: var(--ok, #1f9d55); }
.sg-dot[data-said="no"] { background: var(--coral-dark); }
.sg-dot[data-said="seen"] { background: var(--spine); }
.sg-dot.is-now[data-said] { background: var(--violet); }
.sg-dot:hover { outline: 2px solid var(--violet-wash-strong); outline-offset: 2px; }
.sg-dots-n {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.sq-strip.is-gate .sq-foot {
  justify-content: center;
  border-top: 0;
  margin-top: 6px;
  padding-top: 6px;
}
.sq-strip.is-gate .sq-skip { margin: 0 auto; }

@media (max-width: 860px) {
  /* app.css stacks the columns here, work first, because the artwork is what
     you recognise. The band then runs the full width, so the cover is capped
     shorter rather than being allowed to fill it. */
  .sg-card.sg-one .sg-col-work .sg-hero { min-height: 200px; padding: 22px 18px; }
  .sg-card.sg-one .sg-col-work .sg-art { max-width: 190px; max-height: 210px; }
  .sg-card.sg-one .sg-col-why { padding: 18px 20px 20px; }
}

@media (max-width: 700px) {
  /* app.css shortens the gate's band on a narrow screen rather than cropping
     the poster; the stack's own rule has to say so too, or it wins by
     specificity and the band stays 3:2. */
  .sg-card.sg-one.sg-qcard .sg-hero { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .sg-viewer { gap: 6px; }
  .sg-arrow { width: 38px; height: 38px; }
  .sg-controls { gap: 16px; }
  .sg-act-glyph { width: 52px; height: 52px; }
  .sg-act.is-small .sg-act-glyph { width: 40px; height: 40px; }
  .sg-act-label { font-size: 11px; }
  .sg-card.sg-one .sg-col-work .sg-title { font-size: 21px; }
  .sq-title { font-size: 23px; }
}

/* Four labelled buttons in one row is the widest thing on a phone. They shrink
   rather than wrap, because wrapping would put Keep underneath Not for me and
   the left/right cue is the whole point of the row. */
@media (max-width: 420px) {
  .sg-controls { gap: 11px; }
  .sg-act-glyph { width: 46px; height: 46px; }
  .sg-act.is-small .sg-act-glyph { width: 36px; height: 36px; }
  .sg-act-label { font-size: 10px; gap: 3px; }
  .sg-act.is-small .sg-act-label { font-size: 9.5px; }
  .sg-act-pelt { margin-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .sg-swipe, .sg-act-glyph, .sg-arrow { transition: none !important; }
  .sg-stack .sg-top-card > .sg-card,
  .sg-swipe.is-back > .sg-card,
  .sg-said { animation: none; }
}

/* ================================================ the media card, playlists === */

/* Nick's screenshot, 2026-08-27: opening his own "Liked Songs" produced "No
   public catalogue knows this one… Broken?". It was asking Wikipedia about a
   list he made himself. A playlist is never looked up now — it is drawn from
   what Peltify actually read inside it. */
.mc-head.is-local .mc-art { background: var(--paper-deep); }

.mc-inside { margin-top: 4px; }
.mc-inside-h {
  margin: 0 0 9px;
  font-size: 12px;
  color: var(--ink-soft);
}
.mc-inside-h b { color: var(--ink); }
.mc-inside-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  max-height: 280px;
  overflow-y: auto;
}
.mc-inside-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.4;
}
.mc-inside-row:last-child { border-bottom: 0; }
/* 22.2 — each piece carries a thumb: its cover, else the platform's mark. */
.mc-inside-row { align-items: center; }
.mc-inside-art {
  flex: none; width: 28px; height: 28px; margin-right: 6px; border-radius: 4px; overflow: hidden;
  display: grid; place-items: center; background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.mc-inside-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A mark, not a cover: small and centred, whatever size the art box is. */
.mc-art.is-blank.has-mark .mc-art-none { opacity: .85; }
.mc-art.is-blank.has-mark .mc-art-none svg,
.mc-art.is-blank.has-mark .mc-art-none img { width: 64px !important; height: 64px !important; max-width: 64px; }
.mc-inside-name {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.mc-inside-name:hover { color: var(--spine); text-decoration: underline; }
.mc-inside-by { color: var(--ink-faint); }

/* ===========================================================================
   THE COMPACT CARD — 2026-08-28.
   Nick: "left side image and metadata. Description short and sweet … TWO
   COLUMNS. LEFT SIDE is metadata / description / genres, RIGHT SIDE is info
   WHY. I want the 'in this work' card to be above the written description.
   Sized down a bit with NO overflow." And the deck behind it "JUST LIKE THE
   HERO, where you can see its little bottom, and it fades the further down".
   =========================================================================== */
.sg-card, .sg-card.sg-one {
  border-radius: var(--r-box);
  border: 1px solid var(--line-strong);
  box-shadow: none;
  max-height: none;
  padding: 18px 20px 14px;
}
.sg-work-head { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.sg-work-head .sg-hero, .sg-work-head .sg-art, .sg-work-head .sg-art-none {
  width: 128px; height: auto; max-height: 176px; flex: none;
  border-radius: var(--r-art); overflow: hidden;
}
.sg-work-head .sg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-meta { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sg-kind {
  align-self: flex-start;
  padding: 3px 8px; border-radius: var(--r-box);
  background: var(--violet-wash); color: var(--violet);
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.sg-title { margin: 0; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -0.02em; }
.sg-title .sg-title-open { display: inline; text-align: left; }
.sg-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-tag {
  padding: 3px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-box);
  background: var(--white); font-size: 12px; font-weight: 600; color: var(--ink);
}
.sg-fact { margin-top: 12px; }
.sg-fact p { margin: 0; font-family: var(--font-serif); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
/* Unverified ([3B-1]): the check was refused; amber, because nothing is known
   to be wrong. */
.sg-unverified p { font-family: var(--font-sans); font-size: 12.5px;
                   color: var(--warn); display: inline-flex;
                   align-items: flex-start; gap: 5px; }
.sg-fact.is-cut p:first-child { cursor: help; }
.sg-fact .sg-prov { margin-top: 4px; font-family: var(--font-sans); font-size: 11.5px; color: var(--ink-faint); }
.sg-col-why { gap: 10px; }
.sg-ov, .sg-adds {
  border-radius: var(--r-box); padding: 11px 13px 12px;
}
.sg-ov { border: 1px solid var(--line-strong); background: var(--white); }
.sg-adds { border: 1px dashed var(--violet); background: var(--violet-wash); }
.sg-ov-h, .sg-adds-h {
  margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.sg-adds-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--violet); }
.sg-adds-body { display: flex; flex-direction: column; gap: 6px; }
.sg-adds-line { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.sg-because-line { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.sg-full { margin-top: 6px; }
.sg-full-s {
  cursor: pointer; font-size: 12px; font-weight: 700; color: var(--violet);
  list-style: none; display: inline-flex; align-items: center; gap: 4px;
}
.sg-full-s::-webkit-details-marker { display: none; }
.sg-full-s::after { content: "▾"; font-size: 11px; }
.sg-full[open] .sg-full-s::after { content: "▴"; }
.sg-full-b { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* THE ACTIONS — one row, in line, text buttons (the concept's bottom rule). */
.sg-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
}
.sg-act {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: var(--r-box);
  color: var(--ink-soft);
}
.sg-act:hover { background: var(--paper-deep, var(--paper)); color: var(--ink); }
.sg-act .sg-act-glyph { width: auto; height: auto; border: 0; background: none; box-shadow: none; }
.sg-act-keep, .sg-act-keep .sg-act-label { color: var(--violet); }
.sg-act-label { font-size: 13px; }

/* THE DECK BEHIND, hero-style: blank panels offset down and dimmer. */
.sg-stack { display: grid; overflow: visible; padding-bottom: 20px; }
.sg-behind {
  grid-area: 1 / 1; align-self: stretch;
  border: 1px solid var(--line-strong); border-radius: var(--r-box);
  background: var(--white); pointer-events: none;
  z-index: 0;
}
.sg-behind[data-depth="1"] { transform: translateY(10px) scale(0.975); opacity: 0.7; z-index: 1; }
.sg-behind[data-depth="2"] { transform: translateY(20px) scale(0.95); opacity: 0.4; }
.sg-swipe, .sg-top-card { z-index: 2; }

/* ONE QUIET LINE: shaped by · N of M today · More · Rebuild. */
.sg-shaped, .sg-quota, .sg-built {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 10px 0 0; padding: 0; border: 0; background: none;
  font-size: 11.5px; color: var(--ink-faint);
}
.sg-arrow, .sg-arrow-g .sg-arrow {
  width: 30px; height: 30px; border-radius: var(--r-box); box-shadow: none;
}
.sg-dots { margin-top: 8px; gap: 5px; }
.sg-dot { border-radius: 1px; }

@media (max-width: 720px) {
  .sg-work-head { flex-direction: row; }
  .sg-work-head .sg-hero, .sg-work-head .sg-art, .sg-work-head .sg-art-none { width: 96px; }
  .sg-controls { flex-wrap: wrap; justify-content: center; }
}

/* ONE QUIET LINE UNDER THE DECK (2026-08-28). The count, More/Rebuild and the
   day's allowance used to be three stacked lines ABOVE the card; they are one
   muted row under it now, and the card is the first thing on the board. */
.sg-deck { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.sg-deck > .sg-deck-body { flex: 1 1 100%; order: 1; }
.sg-deck > .carousel-head {
  order: 2; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  margin: 0; padding: 0; border: 0;
  font-size: 11.5px; color: var(--ink-faint);
}
.sg-deck > .carousel-head .carousel-count { font-variant-numeric: tabular-nums; }
.sg-deck > .carousel-head .carousel-navs { display: inline-flex; gap: 4px; }
.sg-deck > .carousel-head .btn-clear {
  height: 24px; padding: 0 8px; font-size: 11.5px; border-radius: var(--r-box);
}
.sg-deck > .sg-quota { order: 3; flex: 1 1 auto; margin: 0; }
.sg-deck > .sg-quota b { color: var(--ink-soft); }
.sg-deck > .sg-shaped, .sg-deck > .sg-built { order: 4; margin: 0; }
.sg-dots-n { display: none; }
.sg-deck-body { display: flex; flex-direction: column; gap: 0; }
.sg-viewer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.sg-dots { margin-top: 10px; }
/* A cover is shown whole, never cropped to the sleeve. */
.sg-work-head .sg-art img, .sg-work-head .sg-hero img { object-fit: contain; height: auto; }
.sg-work-head .sg-art, .sg-work-head .sg-hero { height: auto; max-height: none; background: transparent; }

/* [SUGG-15] a loose match says how it was matched — amber, like unverified. */
.sg-loose { font-family: var(--font-sans); font-size: 12.5px; color: var(--warn);
            display: inline-flex; align-items: flex-start; gap: 5px; margin: 0 0 6px; }