/*
 * Contentstack Canoe site: site audit illustrations. Pairs with /assets/js/site-audit-mock.js.
 * Owner: page-product (WP-C). /product/ uses the tour deck; /docs/site-audit/ uses score and check.
 * Every class is prefixed sa-.
 * Proportions follow renders of the real Site Audit tab: flat cards with 1px borders, 4px radius and no
 * shadows, 24px card padding, uppercase letter-spaced labels, 8px severity dots and pill badges.
 * Colors come from the site tokens, so it follows the dark and light themes. The product's status
 * palette maps to --good (pass, healthy scores), --warn (warnings, middling scores), --bad (action needed,
 * errors and high priority) and --muted (info). Layout follows the
 * element's own width (container queries): compact under 520px, the full layout from 520px.
 * Visual text is 12px or larger. Motion runs only while a part has .is-play; .is-static is the final state.
 */

/* ---------- tokens ---------- */
.sa-mock {
  --sa-canvas: var(--card);
  --sa-line: var(--line);
  --sa-fill: color-mix(in srgb, var(--ink) 4%, var(--sa-canvas));
  --sa-track: color-mix(in srgb, var(--ink) 8%, var(--sa-canvas));
  --sa-good: var(--good);
  --sa-warn: var(--warn);
  --sa-bad: var(--bad);
  --sa-info: var(--muted);
  --sa-accent: var(--accent-text);
  --sa-good-fill: var(--good);
  --sa-warn-fill: var(--warn);
  --sa-bad-fill: var(--bad);
  --sa-ease: cubic-bezier(.2, .7, .2, 1);
  container: sa / inline-size;
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
:root[data-theme="light"] .sa-mock {
  --sa-canvas: #fff;
  /* bars and dots use a brighter fill than the text tokens in light mode */
  --sa-good-fill: #1f9d5c; --sa-warn-fill: #e39a0b; --sa-bad-fill: #d23b30;
}
/* Without JS there is nothing to draw, so the tray is hidden */
html:not(.js) .sa-stage { display: none; }

/* ---------- base ---------- */
.sa, .sa * { box-sizing: border-box; }
.sa :where(p, ul, ol, li, b, em, pre) { margin: 0; padding: 0; font-style: normal; }
.sa-mock .sa li + li { margin-top: 0; } /* beats the .prose list rhythm on docs pages */
.sa :where(ul, ol) { list-style: none; }
/* the tab panel: one flat canvas, sections 24px apart */
.sa { --sa-pad: 16px; position: relative; display: grid; gap: 16px; padding: var(--sa-pad); border: 1px solid var(--sa-line); border-radius: 10px; background: var(--sa-canvas); overflow: hidden; }
.sa-k-score, .sa-k-crawl, .sa-k-check { padding: 0; border: 0; background: none; overflow: visible; }
.sa-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sa-ic-muted { color: var(--muted); }
.sa-n { font-variant-numeric: tabular-nums; }
.sa-card { position: relative; min-width: 0; padding: var(--sa-pad); border: 1px solid var(--sa-line); border-radius: 4px; background: var(--sa-canvas); }
.sa-h { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; letter-spacing: -.01em; }
.sa-lbl { display: block; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; }
@container sa (min-width: 520px) {
  .sa { --sa-pad: 24px; gap: 24px; }
  .sa-h { font-size: 17px; }
}

/* ---------- AI Readiness Score (not a card, as in the product) ---------- */
.sa-hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.sa-when { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.sa-scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sa-score { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; min-width: 0; min-height: 88px; padding: 12px; border: 1px solid var(--sa-line); border-radius: 4px; }
.sa-num { display: flex; align-items: baseline; }
.sa-num b { font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.sa-num small { color: var(--muted); font-size: 13px; font-weight: 500; }
.sa-bar { position: relative; display: block; height: 6px; margin-top: 4px; border-radius: 4px; background: var(--sa-track); overflow: hidden; }
.sa-bar i { position: absolute; inset: 0; border-radius: 4px; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--v, 1)); }
.sa-good { --c: var(--sa-good-fill); }
.sa-warn { --c: var(--sa-warn-fill); }
@container sa (min-width: 520px) {
  .sa-scores { gap: 16px; margin-top: 16px; }
  .sa-score { min-height: 106px; padding: 18px 22px; gap: 8px; }
  .sa-num b { font-size: 32px; }
  .sa-num small { font-size: 15px; }
  .sa-bar { margin-top: 6px; }
}
@container sa (max-width: 379px) {
  .sa-scores { gap: 6px; }
  .sa-score { padding: 10px 9px; }
  .sa-score .sa-lbl { letter-spacing: .02em; }
  .sa-num b { font-size: 22px; }
  .sa-num small { font-size: 12px; }
}

/* ---------- Page Crawl ---------- */
.sa-tiles { display: grid; gap: 8px; margin-top: 16px; }
.sa-tile { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 12px 14px; border: 1px solid var(--sa-line); border-radius: 4px; }
.sa-tv { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.sa-tv b { font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.sa-tv small { margin-left: 4px; color: var(--muted); font-size: 13px; font-weight: 500; }
.sa-tv small.sa-unit { margin-left: 0; }
.sa-slow { color: var(--muted); font-size: 13px; }
.sa-sev { display: flex; flex-wrap: wrap; gap: 2px 11px; color: var(--ink-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.sa-tv > .sa-sev, .sa-tv > .sa-slow { margin-left: auto; }
.sa-sev span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sa-sev i, .sa-band-h i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.sa-e, .sa-band-e { --c: var(--sa-bad-fill); }
.sa-w, .sa-band-w { --c: var(--sa-warn-fill); }
.sa-i, .sa-band-n { --c: var(--sa-info); }
@container sa (min-width: 520px) {
  .sa-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
  .sa-tile { padding: 14px 16px; }
}
/* Issues | Pages segmented control, Issues selected (Export CSV is left out) */
.sa-tools { display: flex; align-items: center; margin-top: 20px; }
.sa-seg { display: inline-flex; gap: 4px; height: 36px; padding: 3px; border: 1px solid var(--sa-line); border-radius: 4px; color: var(--ink-2); font-size: 13px; }
.sa-seg > span { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 3px; }
.sa-seg > span.is-on { color: var(--sa-accent); background: var(--accent-soft); font-weight: 600; }
.sa-seg em { font-weight: 600; color: var(--muted); }
.sa-seg > span.is-on em { color: inherit; font-weight: 500; }
@container sa (min-width: 520px) { .sa-tools { margin-top: 28px; } .sa-seg > span { padding: 0 14px; } }
/* severity bands and issue rows */
.sa-issues { margin-top: 12px; }
.sa-band + .sa-band { margin-top: 16px; }
.sa-band-h { display: flex; align-items: center; gap: 8px; padding: 0 4px 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sa-band-h em { font-weight: 600; letter-spacing: 0; }
.sa-row { border-top: 1px solid var(--sa-line); }
.sa-row-h { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; min-height: 44px; padding: 10px 4px; }
.sa-row-h b { min-width: 0; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.sa-row-h > span { color: var(--muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.sa-chev { color: var(--ink); }
.sa-row.is-open .sa-row-h .sa-chev, .sa-check.is-open .sa-fix-t .sa-chev { transform: rotate(180deg); }
/* open and close (grid rows 0fr to 1fr) */
.sa-coll { display: grid; grid-template-rows: 0fr; }
.sa-coll > div { min-height: 0; overflow: hidden; }
.is-open > .sa-coll, .is-open > .sa-fix > .sa-coll { grid-template-rows: 1fr; }
.sa-why { margin: 2px 0 12px; padding: 14px 16px; border-radius: 4px; background: var(--sa-fill); color: var(--ink); font-size: 13.5px; line-height: 1.6; }
.sa-why b { font-weight: 600; }
.sa-why ul { display: grid; gap: 2px; margin-top: 8px; padding-left: 18px; list-style: disc; }
.sa-why li::marker { color: var(--ink-2); }
/* narrow: a shorter cut (the extra rows are left out, tiles go two by two) */
@container sa (max-width: 519px) {
  .sa-row-extra { display: none; }
  .sa-why { margin-bottom: 10px; padding: 12px 14px; }
  .sa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "p a" "i i"; }
  .sa-tile:nth-child(1) { grid-area: p; } .sa-tile:nth-child(2) { grid-area: i; } .sa-tile:nth-child(3) { grid-area: a; }
}
@container sa (max-width: 379px) {
  .sa { --sa-pad: 12px; }
  .sa-card { padding: 14px; }
}

/* ---------- check cards ---------- */
.sa-check { container: sack / inline-size; }
/* narrow card: status and priority on top (wrapping if they must), title below; wide card: one row, as in the product */
.sa-check-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sa-check-h .sa-ct { order: 3; flex: 1 0 100%; }
.sa-check-h .sa-prio { margin-left: auto; }
@container sack (min-width: 460px) { .sa-check-h .sa-ct { order: 0; flex: 1 1 0%; } }
.sa-ct { min-width: 0; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4; }
.sa-st { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.sa-st-bad { --c: var(--sa-bad); }
.sa-st-warn { --c: var(--sa-warn); }
:root[data-theme="light"] .sa-st-warn { color: color-mix(in srgb, var(--sa-warn) 78%, var(--ink)); }
:root[data-theme="light"] .sa-st-bad { color: color-mix(in srgb, var(--sa-bad) 85%, var(--ink)); }
.sa-st-good { --c: var(--sa-good); }
.sa-st-info { --c: var(--ink-2); background: var(--sa-fill); }
.sa-prio { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border: 1px solid var(--sa-line); border-radius: 4px; color: var(--ink-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.sa-prio .sa-ic { width: 13px; height: 13px; color: var(--sa-bad); }
.sa-sum { margin-top: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.sa-fix { margin-top: 12px; }
.sa-fix-t, .sa-tech, .sa-doc { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.sa-fix-t { color: var(--sa-accent); }
.sa-fix-t .sa-ic:first-child, .sa-tech .sa-ic:first-child { width: 15px; height: 15px; }
.sa-fix-t .sa-chev { color: currentColor; }
.sa-fix-b { padding-top: 12px; color: var(--ink); font-size: 14px; }
.sa-fix-b ol { display: grid; gap: 2px; margin-top: 10px; padding-left: 20px; list-style: decimal; line-height: 1.6; }
.sa-doc { margin-top: 12px; color: var(--sa-accent); }
.sa-tech { display: flex; margin-top: 14px; color: var(--ink-2); }
.sa-tech .sa-chev { color: currentColor; }
/* snippet */
.sa-code { margin-top: 14px; border: 1px solid var(--sa-line); border-radius: 4px; background: var(--sa-fill); overflow: hidden; }
.sa-code-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--sa-line); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.sa-code-h > span:first-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sa-copy { position: relative; display: inline-grid; flex: none; height: 26px; padding: 0 6px; border-radius: 4px; color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.sa-copy > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.sa-copy .sa-ic { width: 13px; height: 13px; }
.sa-copy-b { opacity: 0; color: var(--sa-good); }
.sa-copy.is-copied .sa-copy-a { opacity: 0; }
.sa-copy.is-copied .sa-copy-b { opacity: 1; }
.sa-code pre { padding: 12px 14px; color: var(--ink); font: 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: break-word; }
@container sa (max-width: 519px) {
  .sa-code pre { font-size: 12px; padding: 10px 12px; }
}

/* ---------- tour: the stacked card deck (/product/) ---------- */
/* A tray holds four cards: Score, Issues, Fix (Live AI bot access) and Fix (the canonical snippet). The card in
   front leaves upward and the next one comes forward; the two behind peek out below it, smaller and fainter,
   with their content hidden. The tray height is fixed per breakpoint (600, 560 from 768, 540 from 1024), so the
   page below never moves. The Score / Issues / Fix buttons, the caption and the pause button sit under it. */
.sa-mock[data-sa-mock="tour"] { --peek: 10px; }
.sa-tray {
  --sa-dot: color-mix(in srgb, var(--ink) 5%, transparent);
  position: relative; height: 600px; padding: 12px;
  border: 1px solid var(--line-soft); border-radius: var(--r-frame, 16px);
  background-color: var(--bg-2); background-image: radial-gradient(var(--sa-dot) 1px, transparent 1.2px); background-size: 18px 18px;
}
@media (min-width: 768px) { .sa-tray { height: 560px; padding: 16px; } }
@media (min-width: 1024px) { .sa-tray { height: 540px; padding: 20px; } }
.sa-stack { position: relative; height: 100%; }
.sa-dk {
  container: sa / inline-size;
  position: absolute; inset: 0 0 auto; height: calc(100% - 2 * var(--peek));
  overflow: hidden; border: 1px solid var(--sa-line); border-radius: 10px; background: var(--sa-canvas); box-shadow: var(--shadow);
  transform-origin: 50% 100%;
  transition: transform .6s var(--sa-ease), opacity .45s var(--ease);
}
.sa-dk[data-pos="0"] { z-index: 4; }
.sa-dk[data-pos="1"] { z-index: 3; transform: translateY(var(--peek)) scale(.95); opacity: .75; }
.sa-dk[data-pos="2"] { z-index: 2; transform: translateY(calc(2 * var(--peek))) scale(.9); opacity: .45; }
.sa-dk[data-pos="3"] { z-index: 1; transform: translateY(calc(2 * var(--peek))) scale(.9); opacity: 0; }
.sa-dk.is-out { z-index: 5; transform: translateY(-24px) scale(1.03); opacity: 0; transition-duration: .4s, .26s; }
.sa-dk.no-tr, .sa-dk.no-tr > .sa { transition: none !important; }
/* the card is the canvas: its content sits straight on it, cut off by a short fade at the bottom */
.sa-dk > .sa {
  height: 100%; align-content: start; border: 0; border-radius: 0; background: none;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent);
  transition: opacity .3s var(--ease) .2s;
}
.sa-dk:not([data-pos="0"]):not(.is-out) > .sa { opacity: 0; transition-delay: 0s; }
.sa-dk .sa-card { padding: 0; border: 0; border-radius: 0; background: none; }
.sa-tray.is-still .sa-dk, .sa-tray.is-still .sa-dk > .sa { transition: none; }

/* Score card: the score hero, then the top of the Page Crawl card. Narrow cards stack the three scores and keep
   two tiles (pages crawled, issues found); wide cards use the product's own rows of three. */
.sa-dk-score > .sa { display: block; }
.sa-dk-score .sa-scores { grid-template-columns: minmax(0, 1fr); }
.sa-dk-score .sa-score { min-height: 84px; }
.sa-dk-score .sa-num b { font-size: 28px; }
.sa-dk-crawl { margin-top: 20px; }
.sa-dk-crawl .sa-tiles { margin-top: 12px; }
@container sa (max-width: 519px) {
  .sa-dk-crawl .sa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; }
  .sa-dk-crawl .sa-tile:nth-child(1), .sa-dk-crawl .sa-tile:nth-child(2) { grid-area: auto; }
  .sa-dk-crawl .sa-tile:nth-child(3), .sa-dk-crawl .sa-sev { display: none; }
  .sa-dk-crawl .sa-tv small { display: block; margin: 2px 0 0; }
}
@container sa (min-width: 520px) {
  .sa-dk-score .sa-scores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sa-dk-score .sa-score { min-height: 132px; }
  .sa-dk-score .sa-num b { font-size: 32px; }
  .sa-dk-crawl { margin-top: 28px; }
  .sa-dk-crawl .sa-tiles { margin-top: 16px; }
  .sa-dk-crawl .sa-tile { min-height: 96px; }
}
/* Issues card: the Page Crawl list (its tiles are on the Score card) */
.sa-dk-issues .sa-tiles, .sa-dk-issues .sa-why ul { display: none; }
.sa-dk-issues .sa-tools { margin-top: 16px; }
@container sa (min-width: 520px) { .sa-dk-issues .sa-tools { margin-top: 20px; } }
/* Fix card (Live AI bot access): on wide cards the technical details open under the fix and list each AI bot's
   response, as in the product (BOT USER-AGENT / RESPONSE / RESULT). Narrow cards keep them closed. */
.sa-techw { margin-top: 14px; }
.sa-techw > .sa-tech { display: inline-flex; margin-top: 0; }
.sa-techw.is-open > .sa-coll { grid-template-rows: 1fr; }
.sa-techw.is-open > .sa-tech .sa-chev { transform: rotate(180deg); }
.sa-bots { margin-top: 10px; color: var(--ink); font-size: 13.5px; }
.sa-bots > div > :nth-child(2) { font-variant-numeric: tabular-nums; }
.sa-bots > div { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: 12px; min-height: 32px; padding: 0 8px; border-top: 1px solid var(--sa-line); }
.sa-bots > .sa-bots-h { min-height: 28px; border-top: 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sa-bots b { font-weight: 600; }
.sa-bots .sa-ok { color: var(--sa-good); }
.sa-bots .sa-no { color: var(--sa-bad); }
:root[data-theme="light"] .sa-bots .sa-ok { color: color-mix(in srgb, var(--sa-good) 80%, var(--ink)); }
:root[data-theme="light"] .sa-bots .sa-no { color: color-mix(in srgb, var(--sa-bad) 85%, var(--ink)); }
@container sa (max-width: 519px) {
  .sa-techw > .sa-coll { display: none; }
  .sa-techw.is-open > .sa-tech .sa-chev { transform: none; }
}
/* with the table open, the doc link gives way so the blocked bots stay above the fade */
@container sa (min-width: 520px) {
  .sa-dk-fix .sa-doc { display: none; }
  .sa-dk-fix .sa-bots { margin-top: 8px; }
  .sa-dk-fix .sa-bots > div:not(.sa-bots-h) { min-height: 30px; }
}
/* Snippet card: on narrow cards the snippet title wraps instead of ending in an ellipsis */
.sa-dk .sa-code-h > span:first-child { overflow: visible; white-space: normal; }

/* controls under the tray (site UI, not product UI) */
.sa-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.sa-steps { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.sa-steps button {
  position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 0; border-radius: 7px; background: none; color: var(--muted);
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.sa-steps button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--highlight), var(--shadow-sm); }
@media (hover: hover) { .sa-steps button:hover { color: var(--ink); } }
.sa-ctl.is-auto .sa-steps button[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 1px;
  background: var(--accent); transform-origin: 0 50%; animation: sa-prog var(--sa-dwell, 5s) linear both;
}
.sa-ctl.is-paused .sa-steps button::after { animation-play-state: paused; }
@keyframes sa-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sa-cap { margin: 0 0 0 auto; color: var(--muted); font-size: 13px; line-height: 1.4; }
.sa-toggle {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); color: var(--ink-2); cursor: pointer;
}
.sa-cap + .sa-toggle { margin-left: 0; }
.sa-toggle[hidden] { display: none; }
.sa-toggle .sa-ic { grid-area: 1 / 1; width: 16px; height: 16px; }
.sa-toggle .sa-ic-play { fill: currentColor; }
.sa-toggle.is-playing .sa-ic-play, .sa-toggle:not(.is-playing) .sa-ic-pause { display: none; }
@media (hover: hover) { .sa-toggle:hover { color: var(--ink); background: var(--hover); } }
.sa-steps button:focus-visible, .sa-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 1023px) { .sa-steps button { height: 40px; } .sa-toggle { width: 40px; height: 40px; } }
@media (pointer: coarse) { .sa-steps button { height: 44px; } .sa-toggle { width: 44px; height: 44px; } }
/* narrow: the caption takes its own line under the buttons */
@container sa (max-width: 479px) {
  .sa-cap { order: 3; flex-basis: 100%; margin: 0; text-align: right; }
  .sa-cap + .sa-toggle { margin-left: auto; }
}

/* ---------- motion ---------- */
/* Armed: waiting to come into view (no transitions, so arming is instant).
   Play: everything in the part eases to its final state after its own delay. */
.is-armed.sa-in, .is-armed .sa-in { opacity: 0; transform: translateY(6px); }
.is-armed .sa-bar i { transform: scaleX(0); }
.is-play.sa-in, .is-play .sa-in { opacity: 1; transform: none; transition: opacity .45s var(--ease) var(--d, 0ms), transform .55s var(--sa-ease) var(--d, 0ms); }
.is-play .sa-bar i { transform: scaleX(var(--v, 1)); transition: transform 1.1s var(--sa-ease) calc(var(--d, 0ms) + 120ms); }
.is-play .sa-chev { transition: transform var(--t) var(--ease); }
.is-play .sa-coll { transition: grid-template-rows .5s var(--sa-ease); }
.is-play .sa-copy > span { transition: opacity var(--t-fast) var(--ease); }
.sa.is-static *, .sa.is-static *::before, .sa.is-static *::after { transition: none !important; animation: none !important; }
/* a soft ring where the illustration "clicks" */
.sa-row-h::after, .sa-fix-t::after, .sa-tech::after, .sa-copy::after { content: ""; position: absolute; inset: -4px; border-radius: 6px; box-shadow: 0 0 0 2px var(--accent); opacity: 0; pointer-events: none; }
.is-play .is-tap::after, .is-play.sa-check .is-tap::after { animation: sa-tap .7s var(--ease) both; }
@keyframes sa-tap { 0% { opacity: 0; transform: scale(.96); } 30% { opacity: .8; } 100% { opacity: 0; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
  .sa *, .sa *::before, .sa *::after { transition: none !important; animation: none !important; }
  .sa-dk, .sa-dk > .sa { transition: none !important; }
  .sa-ctl .sa-steps button::after { display: none; }
  .is-armed.sa-in, .is-armed .sa-in { opacity: 1; transform: none; }
  .is-armed .sa-bar i { transform: scaleX(var(--v, 1)); }
}