/* ==========================================================================
   Work thumbnail · SnapGrid ("From finished job to first post")
   Inline SVG, 1344 x 620 user units, on the portfolio's sunken grey.
   At rest: the loop finished — four photos reviewed, consent on file, the
   reward queued and the post scheduled. Publish is the step standing.
   ========================================================================== */

.sg {
  /* portfolio tokens (css/tokens.css), with their values as a fallback */
  --sg-panel: var(--color-surface-sunken, #E7E9E4);
  --sg-brand: var(--color-client-snapgrid, #4338CA);   /* SnapGrid indigo */
  --sg-focus: var(--color-accent, #E4521F);
  --sg-mono: var(--font-mono, "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace);
  --sg-app: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  position: relative;
  display: block;
  aspect-ratio: 1344 / 620;
  max-width: 100%;
  background: var(--sg-panel);
  border-radius: 2px;
  overflow: hidden;
}

.sg-svg { display: block; width: 100%; height: 100%; }
.sg-svg g, .sg-svg rect, .sg-svg path, .sg-svg circle, .sg-svg text { transform-box: fill-box; }

/* type — colours live on the SVG elements, only the fonts and sizes here */
.sg-mono { font-family: var(--sg-mono); font-weight: 500; letter-spacing: 0.08em; }
.sg-step-t { font-size: 12px; fill: #8A8F96; }
.sg-hd { font-size: 11px; fill: #0F1113; }
.sg-cnt { font-size: 10.5px; fill: #8A8F96; }
.sg-cnt-n { fill: #0F1113; }
.sg-vd { font-size: 9px; }
.sg-cs { font-size: 10px; fill: #15703A; }
.sg-tr { font-size: 10px; fill: #555A62; }
.sg-btn-t { font-size: 10.5px; fill: #F2F3F0; }
.sg-sched-t { font-size: 10.5px; fill: #F2F3F0; }
.sg-ph-t { font-size: 9px; fill: #555A62; }
.sg-ph-s { font-size: 7.5px; fill: #8A8F96; }
.sg-link-t { font-size: 9.5px; fill: #F2F3F0; }
.sg-coin-t { font-size: 12px; fill: #F2F3F0; font-weight: 600; }

/* rest: the loop has run, so Publish is the step standing and everything
   before it is filled. The JS re-plays from the first step. */
.sg-step-fill { transform-origin: left center; }
.sg-step[data-i="5"] .sg-step-t { fill: var(--sg-brand); }

/* things the motion moves; at rest they sit at their finished value */
.sg-shutter, .sg-shutter-r, .sg-striptile, .sg-tile-img, .sg-verdict,
.sg-coin, .sg-link, .sg-tier rect, .sg-post-img { transform-origin: center; }
.sg-upbar { transform-origin: left center; }

/* transient: the link, the queued reward and the upload bar only exist
   mid-play, so at rest they are not drawn at all */
.sg-link, .sg-coin, .sg-upbar, .sg-upbar-t { opacity: 0; }

/* the tier the reward landed on */
.sg-tier[data-i="1"] rect { fill-opacity: 0.10; }
.sg-tier[data-i="1"] circle { fill: var(--sg-brand); stroke: var(--sg-brand); }
.sg-tier[data-i="1"] .sg-tr { fill: #0F1113; }

/* On a panel taller than the graphic's own ratio the SVG letterboxes. It is
   anchored to the bottom (xMidYMax), so that slack collects at the top where
   the client chip sits, instead of the chip landing on the step rail. */

/* Small cards: the graphic is 1344 units wide, so on a phone it draws at about
   a quarter scale. Drop the detail that cannot survive that and size the few
   labels that carry the story so they still read. */
.sg.is-compact .sg-ph-s,
.sg.is-compact .sg-ph-t,
.sg.is-compact .sg-vd,
.sg.is-compact .sg-tr,
.sg.is-compact .sg-cnt,
.sg.is-compact .sg-cs { visibility: hidden; }

.sg.is-compact .sg-step-t { font-size: 22px; letter-spacing: 0.06em; }
.sg.is-compact .sg-hd { font-size: 20px; }
.sg.is-compact .sg-btn-t,
.sg.is-compact .sg-sched-t { font-size: 17px; }
.sg.is-compact .sg-coin-t { font-size: 20px; }

/* the hairline rules and 1px strokes disappear at that scale */
.sg.is-compact .sg-step-track { height: 3px; }
.sg.is-compact .sg-step-fill { height: 5px; y: 54; }

a:focus-visible > .sg { outline: 2px solid var(--sg-focus); outline-offset: 3px; }