/* =============================================================
   CABOO · SNAP CREATOR  (supplement)
   Frame from site.css, components from dashboard.css + shared wizard styles.
   This file only adds what the Snap dashboard draws: the centered
   document hero, the dropzone with the coral under-glow, file rows, the
   capsule preview (provenance pills, quality drawer), and sticker side cards.
   ============================================================= */

/* -------------------------------------------------------------
   Snap type scale — a compact, self-consistent scale for reading
   and UI surfaces (panels, cards, lists). Modular, ratio ≈1.2
   (minor third), 16px base, tightening slightly at the small end
   the way dense UI wants. This is DISTINCT from the marketing
   --fs-display/--fs-sechead tiers in tokens.css, which are hero
   sizes and too loud inside a card. Inside Snap panels, pick a
   step here — never a raw px and never a marketing display tier.

     --st-title  22  panel / capsule title        (weight 800 display)
     --st-lead   18  standfirst / summary          (weight 400)
     --st-body   16  reading body                  (weight 400)
     --st-ui     15  dense UI rows, fact text
     --st-meta   13  captions, roles, secondary
     --st-label  11  mono eyebrow labels (uppercase, tracked)
   ------------------------------------------------------------- */
:root {
  --st-title: 1.375rem;
  --st-lead:  1.125rem;
  --st-body:  1rem;
  --st-ui:    0.9375rem;
  --st-meta:  0.8125rem;
  --st-label: 0.6875rem;
  --st-title-lh: 1.18;
  --st-lead-lh:  1.5;
  --st-body-lh:  1.55;
  --st-ui-lh:    1.45;
  --warn: #c98a1e;
  --warn-ink: #8a621b;
  --warn-tint: #fbf1de;
  --warn-border: #ecdcc0;
}

[hidden] { display: none !important; }

.snap-wrap { max-width: 1040px; }

/* ---- centered hero ---- */
.snap-head { margin: clamp(20px, 4.5vh, 56px) 0 clamp(24px, 4vh, 40px); text-align: center; }
.snap-kicker { margin-bottom: 10px; }
.snap-tiles { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin: 0 0 18px; }
.snap-title {
  margin: 0 auto;
  max-width: 21ch;
  font-family: var(--font-display-black);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.06;
  letter-spacing: var(--tracking-display, -.03em);
  color: #8f8b85;
  /* debossed letterpress, matching the legacy wizard title. Without
     this the light --head-mute grey reads as broken/unstyled text. */
  filter: url(#h1-inner);
  text-wrap: balance;
  outline: none;
}
.snap-title em { font-style: normal; color: var(--espresso); }
.snap-lead {
  margin: 18px auto 0;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--body);
}
/* once work exists, the headline glides to working scale and the garnish folds away */
.snap-title { transition: font-size .45s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
.snap-tiles, .snap-lead { transition: opacity .3s var(--ease), transform .35s var(--ease), max-height .4s var(--ease), margin .4s var(--ease); }
.snap-tiles { max-height: 90px; }
.snap-lead { max-height: 140px; overflow: hidden; }
body:not([data-snap-stage="fresh"]) .snap-title { font-size: clamp(1.75rem, 1.42rem + 1.48vw, 2.75rem); }
/* the provider tiles stay visible in every stage — only the lead folds away */
body:not([data-snap-stage="fresh"]) .snap-lead { opacity: 0; transform: scale(.96); max-height: 0; margin: 0; pointer-events: none; }
/* returning management surfaces drop the marketing hero entirely */
body[data-snap-stage="portfolio"] .snap-head,
body[data-snap-stage="manage"] .snap-head,
body.is-snap-manage .snap-head { display: none; }

.snap-body { max-width: 880px; margin: 0 auto; }

/* CSP-safe defaults for the Snap sticker preview. */
.fdc-qr__sticker--snap-default { --fdc-qr-bg: #fff; }
.fdc-qr__img svg { width: 100% !important; height: 100% !important; display: block; }

/* ---- upload shell ---- */
.snap-shell {
  border-radius: var(--r-card, 22px);
  padding: clamp(18px, 2.6vw, 28px);
  gap: 16px;
}
.snap-progress { margin: 0; }
.snap-progress > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--coral-1), var(--coral-2)); transition: width .7s var(--ease); }

/* ---- dropzone ---- */
.snap-drop {
  position: relative;
  border: 1.5px dashed var(--rule);
  border-radius: 16px;
  background: var(--surface);
  padding: clamp(28px, 6vw, 64px) clamp(18px, 4vw, 40px);
  text-align: center;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.snap-drop::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  pointer-events: none;
  background: radial-gradient(72% 120% at 50% 118%, rgba(248, 131, 107, .38), rgba(242, 94, 64, .10) 55%, transparent 78%);
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.snap-drop[data-state="drag"] { border-color: var(--coral-2); background: var(--pro-tint, #fef2f0); box-shadow: 0 0 0 3px rgba(242, 94, 64, .12); }
.snap-drop[data-state="drag"]::after { opacity: 1; }
.snap-drop[data-state="error"] { border-color: rgba(216, 73, 44, .45); }
.snap-drop[data-state="error"]::after { opacity: .25; }
.snap-drop__st { display: none; position: relative; z-index: 1; }
.snap-drop[data-state="idle"] .snap-drop__st[data-st="idle"],
.snap-drop[data-state="drag"] .snap-drop__st[data-st="drag"],
.snap-drop[data-state="error"] .snap-drop__st[data-st="error"] { display: grid; justify-items: center; gap: 6px; animation: snap-fade .28s var(--ease) both; }
@keyframes snap-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.snap-drop__cloud { width: clamp(44px, 6vw, 61px); height: auto; margin-bottom: 6px; transition: transform var(--dur) var(--ease); }
.snap-drop__cloud--lift { transform: scale(1.06); }
.snap-drop__t {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
  letter-spacing: -.02em;
  color: var(--espresso);
}
.snap-drop__t--err { color: var(--coral-ink); font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem); }
.snap-drop__sub { margin: 0; font-size: var(--st-body); color: var(--body); }
.snap-drop__errlines { display: grid; gap: 4px; font-size: var(--st-meta); color: var(--ink-2); max-width: 52ch; }
.snap-drop__cta { margin-top: 16px; }
.snap-drop__cta.cta { margin-top: 16px; }

/* ---- ledger rows: each document tells its story in place ---- */
.snap-files { display: grid; gap: 8px; }
.snap-row { border-radius: 14px; background: rgba(26, 22, 19, .04); overflow: hidden; transition: background-color .3s var(--ease); }
.snap-row--in { animation: snap-row-in .38s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)) backwards; animation-delay: var(--d, 0ms); }
@keyframes snap-row-in { from { opacity: 0; transform: translateY(7px) scale(.995); } to { opacity: 1; transform: none; } }
.snap-row--failed { background: rgba(242, 94, 64, .08); }
.snap-row--settle { animation: snap-settle .7s var(--ease); }
@keyframes snap-settle { 0% { background-color: rgba(26, 22, 19, .04); } 35% { background-color: var(--ok-tint, #eceee9); } 100% { background-color: rgba(26, 22, 19, .04); } }
/* status swaps cross-fade rather than cut */
.snap-file__caption.snap-swap, .snap-file__aside.snap-swap { animation: snap-fade .24s var(--ease) both; }
.snap-file {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.snap-row__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: rgba(26, 22, 19, .07); transition: opacity .35s var(--ease); }
.snap-row__bar.snap-bar--done { opacity: 0; }

.snap-row__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--coral-1), var(--coral-2)); transition: width .5s var(--ease); }
.snap-file__caption { font-size: var(--st-meta); color: var(--ink-3); display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.snap-file__caption .fdc-spinner { width: 12px; height: 12px; flex: 0 0 auto; }
.snap-file__caption b { color: var(--espresso); font-weight: 650; }
.snap-file__caption .snap-mono { font-family: var(--font-mono); font-size: var(--st-meta); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-file__err { color: var(--coral-3, #9f2f1d); }
.snap-file__note { color: var(--ok-ink, #4f6a39); }
/* parked (incoherent) source: reason under the name, badge + override actions wrap on the right */
.snap-row--parked .snap-file { align-items: flex-start; }
.snap-row--parked .snap-file__meta { padding-top: 3px; }
.snap-row--parked .snap-file__aside { flex-wrap: wrap; justify-content: flex-end; max-width: 60%; row-gap: 8px; }
.snap-act { border: 1px solid var(--rule); background: #fff; border-radius: 10px; padding: 8px 13px; font: 600 var(--st-meta)/1 var(--font-body); color: var(--ink-2); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur) var(--ease); white-space: nowrap; }
.snap-act:hover { color: var(--ink); }
.snap-act:active { background: var(--canvas); }
.snap-act--primary { background: linear-gradient(180deg, var(--coral-1), var(--coral-2)); border: 0; color: #fff; box-shadow: var(--shadow-btn); }
.snap-act--primary:hover { color: #fff; }
.snap-act[aria-expanded="true"] { background: var(--espresso); border-color: var(--espresso); color: #f5f0eb; }
.snap-act--source { height: 34px; padding: 0 11px; border-radius: 10px; font-size: var(--st-label); }
/* detail opens as a height glide (grid-rows 0fr -> 1fr), collapse is a quick fold */
.snap-row__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
.snap-row__detail.open { grid-template-rows: 1fr; }
.snap-row__detail-inner { overflow: hidden; min-height: 0; padding: 4px 16px 18px; }
.snap-row__detail:not(.open) .snap-row__detail-inner { visibility: hidden; padding-top: 0; padding-bottom: 0; }

/* singleton detail panels (parked hidden, relocated into the open row) */
.snap-panels[hidden] { display: none; }
.snap-panel { display: grid; gap: 14px; padding: 14px; border-radius: 13px; background: #fff; box-shadow: var(--dash-shadow-sm, 0 1px 2px rgba(26, 22, 19, .06)); }
.snap-panel__actions { display: flex; gap: 10px; }
.snap-panel__toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.snap-panel__side { padding: 12px 14px; border-radius: 12px; background: rgba(26, 22, 19, .04); }
.cta--sm { margin: 0; padding: 9px 16px; border-radius: 11px; font-size: var(--st-meta); }
.snap-panel__toolbar { align-items: center; }
.snap-toolbar__sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--rule); }

/* the second surface: a link for bios and DMs, distinct from the physical sticker */
.snap-link { display: grid; gap: 10px; padding: 14px 16px; border-radius: 13px; background: linear-gradient(180deg, var(--pro-tint, #fef2f0), #fff); border: 1px solid rgba(242, 94, 64, .18); }
.snap-link__head { display: grid; gap: 3px; }
.snap-link__head .fdc-muted { font-size: var(--st-meta); }
.snap-link__row { display: flex; align-items: center; gap: 10px; }
.snap-link__url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--st-meta); color: var(--espresso); background: #fff; border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-link__row .cta { margin: 0; white-space: nowrap; }
.snap-link__uses { display: flex; gap: 14px; }
.snap-link__use { border: 0; background: none; padding: 0; font: 600 var(--st-meta)/1 var(--font-body); color: var(--coral-ink); cursor: pointer; }
.snap-link__use:hover { text-decoration: underline; }
.snap-panel .fdc-qr__plate { padding: clamp(12px, 2vw, 20px); }
.snap-file__icon { width: 33px; height: 44px; flex: 0 0 auto; }
.snap-file__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.snap-file__meta { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: left; }
.snap-file__name { font-weight: 650; color: var(--ink); font-size: var(--st-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-file__size { font-size: var(--st-meta); color: var(--ink-3); }
.snap-file__aside { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--st-meta); }
/* the one indigo in the system, scoped: extracted character count (per mock) */
.snap-file__chars { color: #5b4fc0; font-weight: 550; }
.snap-file__chip { padding: 3px 9px; border-radius: 999px; font-size: var(--st-label); font-weight: 600; background: rgba(26, 22, 19, .06); color: var(--ink-2); }
.snap-file__chip--ok { background: var(--ok-tint, #eceee9); color: var(--ok-ink, #4f6a39); }
.snap-file__chip--warn { background: var(--warn-tint); color: var(--warn-ink); }
.snap-file__chip--err { background: rgba(242, 94, 64, .13); color: var(--coral-3, #9f2f1d); }
.snap-file__remove { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 4px; border-radius: 8px; display: inline-grid; place-items: center; width: 26px; height: 26px; }
.snap-file__remove svg { width: 15px; height: 15px; display: block; }
.snap-file__remove:hover { background: rgba(26, 22, 19, .06); color: var(--ink); }
/* Start over — reset the whole ledger; shown only when rows exist. */
/* card-foot meta: the TTL whisper and Start over share one quiet row under
   the dropzone instead of dangling like a pseudo-footer */
.snap-cardmeta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.snap-cardmeta .snap-whisper { margin: 0; text-align: left; }
.snap-cardmeta .snap-startover { display: inline-block; margin: 0; }
.snap-startover { display: block; margin: 14px auto 0; padding: 7px 15px; border: 0; background: none; font-family: var(--font-body); font-size: var(--st-meta, .8125rem); font-weight: 600; color: var(--ink-3); cursor: pointer; border-radius: 999px; transition: color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease); }
.snap-startover:hover { color: var(--coral-ink); background: rgba(26, 22, 19, .045); }
.snap-startover:active { transform: translateY(1px); }
.snap-startover[hidden] { display: none; }
.snap-file .fdc-spinner { width: 14px; height: 14px; }

/* ---- identity / email row ---- */
.snap-identity { display: grid; gap: 8px; border-radius: 12px; }
@keyframes snap-identity-pulse { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 3px rgba(242, 94, 64, .22); } }
.snap-identity--pulse { animation: snap-identity-pulse .7s var(--ease) 2; }
@media (prefers-reduced-motion: reduce) { .snap-identity--pulse { animation: none; } }
.snap-identity__label { display: block; }
.snap-identity__row { display: flex; gap: 10px; align-items: stretch; }
.snap-identity__row .fdc-in--box { flex: 1; min-width: 0; }
.snap-build-btn.fdc-submit { margin-top: 0; white-space: nowrap; }

/* ---- building skeleton ---- */
.snap-skel { display: grid; gap: 10px; margin-top: 14px; }
.snap-skel span {
  display: block;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(26, 22, 19, .05) 40%, rgba(26, 22, 19, .1) 50%, rgba(26, 22, 19, .05) 60%) 0 0 / 220% 100%;
  animation: snap-shimmer 1.4s linear infinite;
}
@keyframes snap-shimmer { to { background-position: -120% 0; } }

/* ---- preview capsule ----
   One calm reading surface. Hierarchy is carried by the type scale
   above (title → summary → facts → meta), not by boxes and shadows. */
.snap-capsule-card { gap: clamp(18px, 2.4vw, 24px); }

/* title row */
.snap-cap__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.snap-cap__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--st-title); line-height: var(--st-title-lh); letter-spacing: -.02em; color: var(--espresso); flex: 1; min-width: 0; }
.snap-cap__meta { display: inline-flex; gap: 8px; align-items: center; }
.snap-doctype { font-family: var(--font-mono); font-size: var(--st-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 4px 9px; border-radius: 999px; background: rgba(26, 22, 19, .05); }
.snap-risk { font-family: var(--font-mono); font-size: var(--st-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--coral-ink); border: 1px solid rgba(216, 73, 44, .5); border-radius: 999px; padding: 4px 9px; }

/* summary — a quiet standfirst, not a second headline */
.snap-summary { margin: 0; max-width: 64ch; font-size: var(--st-lead); line-height: var(--st-lead-lh); color: var(--ink-2); }
.snap-summary:empty { display: none; }

/* a labelled block: eyebrow + content, reused for facts and behavior */
.snap-block { display: grid; gap: 9px; }
.snap-block__label { font-family: var(--font-mono); font-size: var(--st-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* facts — ONE grounded list with hairline rows, not a stack of cards.
   Positive facts read at full strength; declared gaps ("not stated")
   recede so the eye lands on what the document actually says. */
.snap-facts { display: grid; border: 1px solid var(--rule-soft, rgba(26, 22, 19, .1)); border-radius: 14px; background: #fff; overflow: hidden; }
.snap-fact { display: flex; align-items: baseline; gap: 14px; padding: 12px 15px; }
.snap-fact + .snap-fact { border-top: 1px solid var(--rowline, #f1efea); }
.snap-fact__t { flex: 1; min-width: 0; font-size: var(--st-ui); line-height: var(--st-ui-lh); color: var(--ink-2); }
.snap-fact--mute .snap-fact__t { color: var(--ink-3); }
/* provenance tags — small, quiet, right-aligned, provenance grammar */
.snap-prov { flex: 0 0 auto; align-self: flex-start; margin-top: 1px; font-family: var(--font-mono); font-size: var(--st-label); font-weight: 500; letter-spacing: .02em; padding: 3px 8px; border-radius: 999px; background: #f4f1ec; color: #6b665e; white-space: nowrap; }
.snap-prov--calc { background: #e6f2ea; color: #2f7d52; }
.snap-prov--edge { background: var(--warn-tint); color: var(--warn-ink); }
.snap-prov--sim { background: #eceafb; color: #5b4fc0; }
.snap-prov--mute { background: transparent; color: var(--ink-3); padding-left: 0; padding-right: 0; }

/* behavior — how the assistant opens; a soft quote block */
.snap-behavior { display: grid; gap: 8px; padding: 14px 16px; border-radius: 13px; background: rgba(26, 22, 19, .035); border-left: 2px solid rgba(216, 73, 44, .35); }
.snap-behavior__greeting { margin: 0; font-style: italic; color: var(--espresso); font-size: var(--st-body); line-height: var(--st-body-lh); }
.snap-behavior__role { margin: 0; font-family: var(--font-mono); font-size: var(--st-meta); letter-spacing: .04em; color: var(--ink-3); }

/* footer — modes note + rebuild, one aligned row over a hairline */
.snap-cap__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 15px; border-top: 1px solid var(--rowline, #f1efea); }
.snap-cap__foot .snap-modesline { flex: 1; min-width: 0; }
.snap-cap__foot .snap-rebuild { margin-left: auto; }
.snap-modesline { margin: 0; font-size: var(--st-meta); line-height: 1.5; color: var(--ink-3); }
.snap-modesline b { color: var(--ink-2); font-weight: 600; }

/* ---- capability ladder: the hero ----
   One meter that climbs as the Snap earns capability. Subsumes coverage,
   sources, and budget into a single 5-rung story; `missing[]` from the scorer
   becomes the one-tap climb chips. Renders verbatim from the capability object;
   the UI invents no rungs and writes no labels. */
.snap-ladder { display: grid; gap: 13px; }
.snap-ladder__rail { display: grid; grid-template-columns: repeat(5, 1fr); align-items: start; }
.snap-rung { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.snap-rung__line { position: absolute; top: 6px; right: 50%; width: 100%; height: 2px; background: var(--rowline, #ece8e1); z-index: 0; }
.snap-rung:first-child .snap-rung__line { display: none; }
.snap-rung__dot { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 2px rgba(26, 22, 19, .16); transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
.snap-rung__label { font-family: var(--font-mono); font-size: var(--st-label); letter-spacing: .01em; color: var(--ink-3); text-align: center; line-height: 1.25; }
.snap-rung.is-reached .snap-rung__line { background: var(--coral-2); }
.snap-rung.is-reached .snap-rung__dot { background: var(--coral-2); box-shadow: inset 0 0 0 2px var(--coral-2); }
.snap-rung.is-current .snap-rung__dot { transform: scale(1.5); background: var(--coral-2); box-shadow: 0 0 0 4px var(--coral-tint, #fbe9e3); }
.snap-rung.is-current .snap-rung__label { color: var(--coral-ink); font-weight: 600; }
/* verdict line */
.snap-ladder__now { margin: 0; display: flex; align-items: baseline; gap: 9px; font-size: var(--st-body); color: var(--ink-2); }
.snap-ladder__tier { font-family: var(--font-display); font-weight: 800; font-size: var(--st-lead); letter-spacing: -.01em; color: var(--espresso); }
.snap-ladder__score { font-family: var(--font-mono); font-size: var(--st-meta); color: var(--ink-3); }
/* climb */
.snap-ladder__climb { display: grid; gap: 9px; }
.snap-climb { display: flex; flex-wrap: wrap; gap: 8px; }
.snap-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font-family: var(--font-body); font-size: var(--st-meta); font-weight: 600; color: var(--espresso); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease); text-align: left; }
.snap-chip:hover { border-color: var(--coral-2); }
.snap-chip:active { transform: translateY(1px); }
.snap-chip--upgrade { border: 0; color: #fff; background: linear-gradient(180deg, var(--coral-1), var(--coral-2)); box-shadow: var(--shadow-btn); }
.snap-chip--upgrade:hover { filter: brightness(.97); }
/* compact ladder on the collapsed ledger row */
.snap-caplabel { color: var(--coral-ink); font-weight: 700; }
/* OCR lane badge on a source read by image OCR (Phase 2) — neutral, subtle */
.snap-ocr { display: inline-block; font-family: var(--font-mono); font-size: var(--st-label); font-weight: 600; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px; background: rgba(26, 22, 19, .06); color: var(--ink-2); vertical-align: 1px; }
.snap-capnext { color: var(--ink-3); }
/* inline escalation field (set_escalation climb) */
.snap-esc { display: flex; gap: 8px; align-items: center; max-width: 420px; }
.snap-esc__in { flex: 1; min-width: 0; padding: 9px 13px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--rule); background: var(--canvas); font-size: var(--st-meta); }
.snap-esc .cta--sm { margin: 0; flex: 0 0 auto; }
/* the read/sources detail, folded under the ladder */
.snap-ladder__detail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.snap-ladder__read { margin: 0; font-size: var(--st-meta); color: var(--ink-3); }
.snap-ladder__read b { color: var(--ink-2); font-weight: 600; }
.snap-ladder__read.is-thin { color: var(--warn-ink); }
@media (prefers-reduced-motion: reduce) { .snap-rung__dot { transition: none; } }

/* ---- pipeline: the capsule as a 4-stage story ----
   Read → Understood → Enhanced → Created. Each stage is a Solar icon on a
   connecting rail, then labelled content. Shows exactly what Snap parsed,
   comprehended, added, and generated — honestly (a thin/corrupted read reads
   thin here instead of hiding behind a score). */
.snap-pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 2.4vw, 26px); }
.snap-stage { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; position: relative; }
/* the rail joining one icon to the next */
.snap-stage::before { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: calc(-1 * clamp(20px, 2.4vw, 26px)); width: 1.5px; background: var(--rowline, #efece6); }
.snap-stage:last-child::before { display: none; }
.snap-stage[hidden] { display: none; }
.snap-stage__icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 999px; background: var(--coral-tint, #fbe9e3); color: var(--coral-ink); position: relative; z-index: 1; }
.snap-stage__icon::after { content: ""; width: 17px; height: 17px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.snap-stage--read     .snap-stage__icon { --icon: url(/w/assets/img/snap/icons/scanner-2-linear.svg); }
.snap-stage--understood .snap-stage__icon { --icon: url(/w/assets/img/snap/icons/notebook-linear.svg); }
.snap-stage--enhanced .snap-stage__icon { --icon: url(/w/assets/img/snap/icons/magic-stick-3-linear.svg); }
.snap-stage--created  .snap-stage__icon { --icon: url(/w/assets/img/snap/icons/documents-linear.svg); }
.snap-stage__body { min-width: 0; display: grid; gap: 10px; padding-top: 4px; }
.snap-stage__body > .snap-block__label { margin-bottom: -1px; }

/* Read — coverage meter + coherence honesty */
.snap-coverage { display: grid; gap: 7px; }
.snap-coverage__meter { height: 6px; border-radius: 99px; background: rgba(26, 22, 19, .08); overflow: hidden; }
.snap-coverage__meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--coral-1), var(--coral-2)); transition: width .6s var(--ease); }
.snap-coverage__cap { margin: 0; font-size: var(--st-meta); line-height: 1.5; color: var(--ink-3); }
.snap-coverage__cap b { color: var(--ink-2); font-weight: 600; }
.snap-stage--read.is-thin .snap-coverage__meter span { background: var(--warn); }
.snap-coh { margin: 0; font-size: var(--st-meta); line-height: 1.4; color: var(--warn-ink); display: none; }
.snap-stage--read.is-thin .snap-coh { display: block; }
/* budget nudge — the upgrade trigger straight off the central budget object */
.snap-budget-note { margin: 0; font-size: var(--st-meta); line-height: 1.5; color: var(--ink-3); }
.snap-budget-note b { color: var(--ink-2); font-weight: 600; }
.snap-budget-note .snap-whisper__link { font-size: inherit; }
/* source chips — one per document stacked behind the QR */
.snap-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.snap-source { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 11px; border-radius: 999px; background: rgba(26, 22, 19, .05); font-size: var(--st-meta); color: var(--ink-2); }
.snap-source__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.snap-source__meta { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--st-label); letter-spacing: .02em; color: var(--ink-3); }

/* Created — named artifacts (no download, by design) */
.snap-created { margin: 0; font-size: var(--st-ui); line-height: var(--st-ui-lh); color: var(--ink-2); }
.snap-created b { color: var(--espresso); font-weight: 600; }

/* ---- quality drawer ---- */
.snap-quality { border: 1px solid var(--rule-soft); border-radius: 13px; overflow: hidden; }
.snap-quality--blocking { border-color: rgba(216, 73, 44, .4); }
.snap-quality__strip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border: 0; background: none; font-family: var(--font-body); font-size: var(--st-meta); color: var(--ink-2); cursor: pointer; text-align: left; }
.snap-quality__score { font-family: var(--font-mono); font-weight: 600; color: var(--espresso); }
.snap-quality__label { flex: 1; min-width: 0; }
.snap-quality__chev { color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.snap-quality__strip[aria-expanded="true"] .snap-quality__chev { transform: rotate(180deg); }
.snap-quality--shake { animation: snap-shake .3s var(--ease); }
@keyframes snap-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } }
.snap-quality__list { display: grid; gap: 2px; padding: 4px 8px 10px; }
.snap-check { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 9px; font-size: var(--st-meta); color: var(--ink-2); }
.snap-check__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 99px; margin-top: 6px; background: var(--ok, #5d7544); }
.snap-check--warn .snap-check__dot { background: var(--warn); }
.snap-check--fail .snap-check__dot { background: var(--coral-ink); }
.snap-check b { color: var(--ink); font-weight: 600; }

.snap-actions { display: flex; align-items: center; gap: 12px; }
.snap-actions .fdc-submit { margin-top: clamp(16px, 3vh, 24px); }
.snap-rebuild { align-self: end; margin-top: clamp(16px, 3vh, 24px); }
.snap-whisper { margin: 10px 0 0; font-size: var(--st-meta); color: var(--ink-3); }

/* ---- sticker extras ---- */
.snap-copylink { margin-left: 8px; border: 0; background: none; font-family: var(--font-body); font-size: var(--st-meta); font-weight: 650; color: var(--coral-ink); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.snap-copylink:hover { background: rgba(242, 94, 64, .1); }
.snap-expiry { font-size: var(--st-meta); color: var(--ink-3); }
.snap-sidecard { padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px); }
.snap-sidecard__row { display: flex; align-items: center; gap: 14px; }
.snap-sidecard__meta { flex: 1; min-width: 0; display: grid; gap: 2px; }
.snap-sidecard__meta strong { color: var(--espresso); }
.snap-keep-btn.cta { white-space: nowrap; }
.snap-next-btn { width: 100%; }

.snap-whisper__link { border: 0; background: none; padding: 0; font-family: var(--font-body); font-size: var(--st-meta); font-weight: 650; color: var(--coral-ink); cursor: pointer; }
.snap-whisper__link:hover { text-decoration: underline; }

/* ---- paywall extras ---- */
.snap-pro-card { margin-top: 12px; opacity: .82; }
.snap-soon { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: var(--st-label); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--pro-tint, #fef2f0); color: var(--coral-ink); vertical-align: 2px; }
.fdc-paywall + .snap-pro-card { margin-top: 14px; }

/* ---- manage gate + expired sticker ---- */
.snap-manage-gate { text-align: center; justify-items: center; display: grid; gap: 12px; padding: clamp(28px, 5vw, 48px); }
.snap-manage-gate .fdc-build__phase { justify-content: center; }
.snap-managehint { margin: 0; max-width: 48ch; color: var(--body); font-size: var(--st-body); line-height: 1.55; }
.snap-manage-gate .snap-identity__row { width: 100%; max-width: 520px; }
.snap-expired-chip { display: inline-block; padding: 4px 11px; border-radius: 999px; background: var(--espresso); color: #f5f0eb; font-size: var(--st-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fdc-qr[data-snap-expired="true"] .fdc-qr__sticker { filter: grayscale(.9) contrast(.92); opacity: .8; }
.snap-actions--sticker { flex-wrap: wrap; }
.snap-actions--sticker .fdc-submit { flex: 1; min-width: 220px; }

/* ---- QR customizer (v2: chips + swatches, no system controls) ---- */
.snap-cz { display: grid; gap: 16px; }
.snap-cz:not([hidden]) { animation: snap-rise .3s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
.snap-quality__list:not([hidden]) { animation: snap-rise .26s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)); }
@keyframes snap-rise { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.snap-cz__group { display: grid; gap: 8px; }
.snap-cz__split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.snap-words { display: flex; flex-wrap: wrap; gap: 8px; }
.snap-word {
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--dash-shadow-sm, 0 1px 2px rgba(26, 22, 19, .06));
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--font-plakat, var(--font-display));
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: #2d0505;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.snap-word b { color: var(--coral-2); }
.snap-word:hover { transform: translateY(-1px); }
.snap-word[aria-checked="true"] { border-color: var(--coral-2); }
.snap-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.snap-dot {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 2px #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.snap-dot:hover { transform: scale(1.12); }
.snap-dot[aria-checked="true"] { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--coral-2); }
.snap-dot--custom { background: conic-gradient(#f8836b, #e8c547, #7fb069, #6a9fd8, #9b72cb, #f8836b); position: relative; }
.snap-dot--custom::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 14px/1 var(--font-body); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.snap-marks { display: inline-flex; gap: 0; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; background: #fff; }
.snap-markpill { border: 0; background: none; padding: 8px 13px; font: 600 var(--st-meta)/1 var(--font-body); color: var(--ink-3); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.snap-markpill[aria-checked="true"] { background: var(--espresso); color: #f5f0eb; }
.snap-cz__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.snap-cz__actions .cta { margin: 0 0 0 auto; }
.snap-cz__hex { font-family: var(--font-mono); font-size: var(--st-label); color: var(--ink-3); letter-spacing: .04em; }
@keyframes snap-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.012); } 100% { transform: scale(1); } }
.fdc-qr__sticker.snap-pulse { animation: snap-pulse .32s var(--ease); }

.snap-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.snap-preset { display: grid; justify-items: center; gap: 6px; padding: 10px 8px; border: 2px solid transparent; border-radius: 13px; background: #fff; cursor: pointer; font-family: var(--font-body); box-shadow: var(--dash-shadow-sm, 0 1px 2px rgba(26, 22, 19, .06)); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.snap-preset:hover { transform: translateY(-1px); }
.snap-preset[aria-checked="true"] { border-color: var(--coral-2); }
.snap-preset__thumb { width: 64px; height: 64px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; }
.snap-preset__thumb svg, .snap-preset__thumb canvas { width: 100%; height: 100%; display: block; }
.snap-preset__name { font-size: var(--st-label); font-weight: 600; color: var(--ink-2); }
.snap-c-note { margin: 0; }
.fdc-custom-actions .cta { margin-top: 0; }

/* ---- motion polish ---- */
/* entrance stagger via nth-child so it survives CSP (style-src-attr 'none'
   drops the inline --d that innerHTML would otherwise carry) */
.snap-fact { animation: snap-pop .4s var(--ease) backwards; }
.snap-fact:nth-child(1) { animation-delay: 0ms; }
.snap-fact:nth-child(2) { animation-delay: 45ms; }
.snap-fact:nth-child(3) { animation-delay: 90ms; }
.snap-fact:nth-child(4) { animation-delay: 135ms; }
.snap-fact:nth-child(5) { animation-delay: 180ms; }
.snap-fact:nth-child(6) { animation-delay: 225ms; }
.snap-fact:nth-child(7) { animation-delay: 270ms; }
.snap-fact:nth-child(n+8) { animation-delay: 315ms; }
@keyframes snap-pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.fdc-qr__img.snap-qr-in { animation: snap-qr-in .24s var(--ease) both; }
@keyframes snap-qr-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.snap-drop[data-state="idle"] { cursor: pointer; }

/* ---- 429 countdown / status refinements ---- */
.fdc-create-status[data-snap-status] b { font-family: var(--font-mono); font-weight: 600; }

/* "Already live" recognition card — a warm glass panel (matches .snap-pubcard),
   not the red status box. The status wrapper is neutralized so the card is the
   surface; buttons reuse .snap-act / .snap-act--primary. */
.fdc-create-status:has(.snap-dupe) { background: none; padding: 0; max-width: min(100%, 640px); }
.snap-dupe { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; width: 100%;
  padding: 18px 20px; border: 1px solid var(--hair, #eceae6); border-radius: var(--r-card, 22px);
  background: radial-gradient(140% 120% at 0% 0%, #faf7f2 0%, #f4f1ea 70%, #f0ede6 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 14px 34px -26px rgba(26, 22, 19, .2);
  animation: snap-rise .3s var(--ease-out-quint, cubic-bezier(.22, 1, .36, 1)) both; }
.snap-dupe__body { flex: 1 1 240px; min-width: 0; }
.snap-dupe__title { font-family: var(--font-body); font-weight: 700; font-size: var(--st-title, 1rem); letter-spacing: -.01em; color: var(--espresso, #2b1912); }
.snap-dupe__sub { margin-top: 4px; font-size: var(--st-ui, .875rem); line-height: 1.45; color: var(--ink-2, #6f675d); }
.snap-dupe__meta { margin-top: 10px; font-size: var(--st-meta, .78rem); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.snap-dupe__meta b { font-family: var(--font-mono); font-weight: 600; color: var(--espresso, #2b1912); }
.snap-dupe__actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
@media (max-width: 520px) {
  .snap-dupe__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .snap-dupe__actions .snap-act { width: 100%; white-space: normal; text-align: center; justify-content: center; }
}

/* "Update the live QR" — the commit for staged edits. Coral primary, sized to
   sit beside .snap-kgbtn in the manage header. Republish rebinds, same code. */
.snap-updateqr { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, var(--coral-1), var(--coral-2)); color: #fff; font: 650 var(--st-body, .9rem)/1 var(--font-body);
  box-shadow: var(--shadow-btn); cursor: pointer; transition: transform .12s var(--ease), filter .16s var(--ease); }
.snap-updateqr:hover { filter: brightness(1.03); }
.snap-updateqr:active { transform: scale(.985); }
.snap-updateqr:disabled { opacity: .6; cursor: default; }
/* One-shot entrance the moment edits stage: rises in, then a single soft coral
   ring expands and fades so the commit affordance announces itself. Applied by
   JS only on the transition into staged (not on every header re-render). */
.snap-updateqr--enter { animation: snap-updateqr-enter .52s var(--ease-out-quint, cubic-bezier(.22, 1, .36, 1)) both; }
@keyframes snap-updateqr-enter {
  0% { opacity: 0; transform: translateY(-6px) scale(.96); box-shadow: var(--shadow-btn), 0 0 0 0 rgba(242, 94, 64, .34); }
  55% { opacity: 1; transform: none; box-shadow: var(--shadow-btn), 0 0 0 5px rgba(242, 94, 64, .18); }
  100% { opacity: 1; transform: none; box-shadow: var(--shadow-btn), 0 0 0 0 rgba(242, 94, 64, 0); }
}

.snap-reqid { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: var(--st-label); opacity: .7; user-select: all; }

/* ---- empty deep-link card ---- */
.snap-empty { display: grid; justify-items: center; gap: 10px; padding: clamp(28px, 5vw, 48px); text-align: center; }
.snap-empty p { margin: 0; color: var(--body); }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .snap-identity__row { flex-direction: column; }
  .snap-cz__split { grid-template-columns: 1fr; }
  .snap-actions { flex-wrap: wrap; }
  .snap-sidecard__row { flex-wrap: wrap; }
  .snap-file__aside { flex-basis: 100%; justify-content: flex-end; }
}

/* Mobile polish stays scoped to the two real Snap surfaces. The public
   creator keeps the same hero/dropzone composition, but removes empty-shell
   space so Upload is present in the first viewport. The signed-in portfolio
   keeps text labels because its links do not carry standalone icons. */
@media (max-width: 760px) {
  body[data-snap-stage="fresh"] .public-nav {
    margin-bottom: 16px;
  }
  body[data-snap-stage="fresh"] .public-nav__rail {
    gap: 10px;
    padding: 10px 0 14px;
  }
  body[data-snap-stage="fresh"] .snap-head {
    margin-top: 12px;
    margin-bottom: 18px;
  }
  body[data-snap-stage="fresh"] .snap-frame {
    padding: 14px 12px;
  }
  body[data-snap-stage="fresh"] .snap-shell {
    min-height: 0;
    padding: 0;
    gap: 0;
  }
  body[data-snap-stage="fresh"] .snap-drop {
    margin-top: 0;
    padding: 20px 16px;
  }
  body[data-snap-stage="fresh"] .snap-drop__cloud {
    width: 44px;
    margin-bottom: 2px;
  }
  body[data-snap-stage="fresh"] .snap-drop__sub {
    display: none;
  }
  body[data-snap-stage="fresh"] .snap-drop__cta,
  body.dash:has(.snaps-banner) .top__util .upill,
  body.dash:has(.snaps-banner) .snaptabs__item,
  body.dash:has(.snaps-banner) .snaprow__more,
  body.dash:has(.snaps-banner) .snaprow__act .snap-act {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  body.dash:has(.snaps-banner) .top__util .upill__lab {
    display: inline;
  }
  body.dash:has(.snaps-banner) .top__util > .upill {
    padding-inline: 12px;
  }
  body.dash:has(.snaps-banner) .top__util > .upill[href="/snap"] .upill__lab,
  body.dash:has(.snaps-banner) .top__util > .upill[href="/app/snaps"] .upill__lab {
    font-size: 0;
  }
  body.dash:has(.snaps-banner) .top__util > .upill[href="/snap"] .upill__lab::after,
  body.dash:has(.snaps-banner) .top__util > .upill[href="/app/snaps"] .upill__lab::after {
    font-size: var(--st-meta, .8125rem);
  }
  body.dash:has(.snaps-banner) .top__util > .upill[href="/snap"] .upill__lab::after {
    content: "New";
  }
  body.dash:has(.snaps-banner) .top__util > .upill[href="/app/snaps"] .upill__lab::after {
    content: "Snaps";
  }
}

/* Press feedback — every actionable control dips on click. Without this the
   primary .cta / pills had no :active state and clicks felt unresponsive. */
.snap-markpill, .snap-word, .snap-dot, .snap-whisper__link {
  transition: transform .12s var(--ease), filter .12s var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cta:active:not(:disabled),
.cta--sm:active:not(:disabled),
.ibtn:active:not([disabled]),
.snap-markpill:active,
.snap-preset:active,
.snap-word:active,
.snap-build-btn:active,
.fdc-submit:active:not(:disabled) { transform: translateY(1px) scale(.985); filter: brightness(.96); }
.snap-whisper__link:active { transform: translateY(1px); opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  .snap-skel span { animation: none; background-position: 50% 0; }
  .snap-drop__st[data-st] { animation: none; }
  .snap-drop__cloud, .snap-quality__chev, .snap-preset, .snap-word, .snap-dot,
  .snap-title, .snap-tiles, .snap-lead, .snap-row, .snap-row__detail, .snap-row__bar { transition: none; }
  .snap-quality--shake, .snap-fact, .fdc-qr__img.snap-qr-in, .fdc-qr__sticker.snap-pulse,
  .snap-row--in, .snap-row--settle, .snap-file__caption.snap-swap, .snap-file__aside.snap-swap,
  .snap-cz:not([hidden]), .snap-quality__list:not([hidden]),
  .snap-dupe, .snap-updateqr--enter { animation: none; }
  .cta:active, .cta--sm:active, .ibtn:active, .snap-markpill:active, .snap-preset:active,
  .snap-word:active, .snap-build-btn:active, .fdc-submit:active, .snap-whisper__link:active { transform: none; }
}

/* ============================================================
   PROCESSING CONSOLE (2026-07-03 redesign, spec:
   docs/snap-processing-console-spec-2026-07-03.md)
   One snap = the panel. Sources = rows. Header band carries the
   live phase, the phase spine, the resting character quota and
   available actions. Reference: web/pages/snap-console-harness.html
   ============================================================ */

/* header band — top zone of the shell, only once there is work */
.snap-chead { display: none; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; margin-bottom: 18px; flex-wrap: wrap; }
body[data-snap-stage="work"] .snap-chead { display: flex; }
/* flex:1 + min-width:0 so a long title truncates instead of pushing the
   controls off (or overflowing entirely when the control cluster is empty) */
/* flex-basis 280px is the wrap trigger, not a hard width: when the title block
   and the controls can no longer share a line, the controls drop to their own
   row instead of crushing the title to two characters. Width-independent, so it
   holds at every container size rather than at one breakpoint. */
.snap-chead__id { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 280px; }
.snap-appicon { flex: 0 0 auto; width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--coral-1), var(--coral-2)); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(242, 94, 64, .55); position: relative; overflow: hidden; }
.snap-appicon svg { width: 26px; height: 26px; }
.snap-chead[data-working] .snap-appicon { animation: snap-icon-breathe 2.6s var(--ease) infinite; }
.snap-chead[data-working] .snap-appicon::after { content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .5) 50%, transparent 64%);
  transform: translateX(-130%); animation: snap-icon-glint 2.6s var(--ease) infinite; }
@keyframes snap-icon-breathe {
  0%, 100% { box-shadow: 0 8px 18px -8px rgba(242, 94, 64, .55), 0 0 0 0 rgba(242, 94, 64, 0); }
  46% { box-shadow: 0 8px 18px -8px rgba(242, 94, 64, .55), 0 0 0 5px rgba(242, 94, 64, .16); }
}
@keyframes snap-icon-glint { 0% { transform: translateX(-130%); } 62%, 100% { transform: translateX(130%); } }
.snap-chead__txt { min-width: 0; flex: 1 1 auto; }
.snap-chead__t { font-weight: 700; font-size: var(--st-title); line-height: 1.15; color: var(--espresso, #2b1912);
  letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* subtitle truncates to one line too (long LLM titles were wrapping to 5) */
.snap-chead__s { font-size: var(--st-ui); color: var(--ink-3); margin-top: 3px; display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The controls size to their content and never wrap: with flex:1 1 auto they
   claimed half the band, pushed Publish onto a second row, and squeezed the
   title into an ellipsis ("Ready to Pu…") while whitespace sat to their left.
   The title block takes whatever is left, and truncates only when genuinely out
   of room. Wrapping returns on narrow screens, where it is the right answer. */
.snap-chead__ctrl { display: flex; align-items: center; justify-content: flex-end; gap: 14px; flex: 0 0 auto; flex-wrap: nowrap; }

.snap-chead__s[data-working]:not([data-staging]) {
  background-image: linear-gradient(100deg, var(--ink-3) 34%, var(--espresso, #2b1912) 50%, var(--ink-3) 66%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: snap-phase-sweep 2.6s linear infinite;
}
@keyframes snap-phase-sweep { from { background-position: 130% 0; } to { background-position: -130% 0; } }

.snap-w { display: inline-block; animation: snap-word-in .34s var(--ease) both; }
@keyframes snap-word-in {
  from { opacity: 0; filter: blur(6px); transform: translateY(3px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

.snap-spine { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.snap-spine[hidden] { display: none; }
.snap-spine__n { display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--rule); position: relative; overflow: hidden;
  transition: background .3s var(--ease), width .3s var(--ease); }
.snap-spine__n[data-st="done"] { background: var(--coral-2, #f25e40); opacity: .38; }
.snap-spine__n[data-st="now"] { width: 40px; background: rgba(242, 94, 64, .2); }
.snap-spine__n[data-st="now"]::after { content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: var(--coral-2, #f25e40);
  transform: translateX(-100%); animation: snap-spine-run 1.5s var(--ease) infinite; }
.snap-spine[data-mode="open"] .snap-spine__n { width: 66px; }
@keyframes snap-spine-run {
  0% { transform: translateX(-100%); }
  55% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* Character count is a resting quota, never an animated progress indicator. */
.snap-meter { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 17px;
  background: #fff; border: 1px solid var(--rule); border-radius: 12px; font-size: var(--st-ui);
  color: var(--ink-3); white-space: nowrap; }
.snap-meter b { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.snap-meter[data-over="1"] b { color: var(--coral-ink); }

/* Publish status-lamp — icon encodes aggregate state */
.snap-publish { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 20px;
  border: 0; border-radius: 12px; font: 700 var(--st-body)/1 var(--font-body); color: #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--coral-1), var(--coral-2));
  box-shadow: 0 8px 18px -10px rgba(242, 94, 64, .7); transition: opacity .18s var(--ease), transform .12s var(--ease); }
.snap-publish:active { transform: translateY(1px); }
.snap-publish__cap { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, .2); }
.snap-publish__cap svg { width: 16px; height: 16px; }
.snap-publish[hidden] { display: none; }
.snap-publish[data-mode="publishing"] { cursor: progress; position: relative; overflow: hidden; }
.snap-publish[data-mode="publishing"] .snap-publish__cap { width: 40px; }
.snap-publish[data-mode="publishing"] .snap-publish__cap .snap-spine__n { width: 26px; background: rgba(255, 255, 255, .3); }
.snap-publish[data-mode="publishing"] .snap-publish__cap .snap-spine__n::after { background: #fff; }
.snap-publish[data-mode="publishing"]::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .28) 50%, transparent 62%);
  transform: translateX(-130%); animation: snap-icon-glint 2.6s var(--ease) infinite; }
.snap-publish[data-mode="blocked"] { opacity: .9; cursor: not-allowed; }
/* verifying: Publish goes dark/inert until the emailed code lands */
.snap-publish[data-mode="verify"] { background: var(--espresso, #2a1611); box-shadow: none; cursor: default; }
.snap-publish[data-mode="verify"] .snap-publish__cap { background: rgba(255, 255, 255, .14); }

/* publish-time email + OTP verification surface (replaces the body) */
/* both stages center in the panel; short, self-contained publish step */
.snap-verify { display: grid; gap: 14px; padding: 18px 2px 8px; justify-items: center; text-align: center; animation: snap-fade .24s var(--ease) both; }
.snap-verify--otp { gap: 18px; }
.snap-verify--otp .snap-otp { justify-content: center; }
.snap-verify--otp .snap-verify__resend { justify-self: center; }
.snap-verify__lab { margin: 0; }
/* email stage: input full-width, Send code sits BELOW it (no fragile in-field
   button that collides with the text/focus ring on long emails or narrow widths) */
.snap-verify__row { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 460px; }
.snap-verify__in { width: 100%; text-align: left; }
.snap-verify__send { width: 100%; }
.snap-otp { display: flex; gap: 12px; }
.snap-otp__box { width: 64px; height: 64px; border: 1px solid var(--rule); border-radius: 16px; background: #fff;
  font: 800 1.9rem/1 var(--font-display, sans-serif); text-align: center; color: var(--espresso, #2b1912);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.snap-otp__box:focus { outline: none; border-color: var(--coral-2); box-shadow: 0 0 0 3px rgba(242, 94, 64, .14); }
.snap-verify__resend { justify-self: start; border: 0; background: none; padding: 4px 0; cursor: pointer;
  font: 600 var(--st-ui)/1 var(--font-body); color: var(--coral-ink); }
.snap-verify__resend:hover { text-decoration: underline; }
@media (max-width: 560px) { .snap-otp__box { width: 52px; height: 56px; } .snap-otp { gap: 8px; } }

/* source row status badges (in the row aside) */
.snap-badge { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 15px 0 7px;
  border-radius: 12px; font-weight: 700; font-size: var(--st-ui); white-space: nowrap; }
.snap-badge__i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; }
.snap-badge__i svg { width: 17px; height: 17px; }
.snap-badge--ready { background: var(--peach, #fadfc6); color: var(--peach-ink, #4a2e1a); }
.snap-badge--ready .snap-badge__i { background: var(--coral-2); color: #fff; }
.snap-badge--err { background: var(--danger-tint, #f7e4e0); color: var(--danger-ink, #8a2f22); }
.snap-badge--err .snap-badge__i { background: transparent; color: var(--danger-ink, #8a2f22); }
.snap-badge--err .snap-badge__i svg { width: 21px; height: 21px; }
.snap-badge--err.snap-badge--shake { animation: snap-shake .3s .04s ease both; }

/* processing status: label over a thin bar, right-aligned */
.snap-proc { display: grid; gap: 6px; justify-items: end; }
.snap-proc__lab { font: 700 var(--st-meta)/1 var(--font-body); color: var(--espresso, #3a3632); display: inline-flex; align-items: center; gap: 7px;
  background-image: linear-gradient(100deg, var(--ink-3) 34%, var(--espresso, #2b1912) 50%, var(--ink-3) 66%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: snap-phase-sweep 2.6s linear infinite; }
.snap-proc__bar { width: 220px; max-width: 42vw; height: 6px; border-radius: 99px; background: var(--track, #e4e2de); overflow: hidden; }
.snap-proc__bar > span { display: block; height: 100%; border-radius: inherit; width: 0;
  background: linear-gradient(90deg, #f59e2e, var(--coral-2)); transition: width .55s var(--ease); }

/* demoted upload: once there is work the big dropzone becomes a compact dashed
   foot row (cloud + "Add More Documents" + hint). Big zone only on empty. */
body[data-snap-stage="work"] .snap-drop { margin-top: 14px; padding: 16px 22px; min-height: 0; }
body[data-snap-stage="work"] .snap-drop::after { opacity: 0; }
body[data-snap-stage="work"] .snap-drop[data-state="idle"] .snap-drop__st[data-st="idle"] {
  grid-template-columns: auto 1fr; grid-template-rows: auto auto; justify-items: start;
  align-items: center; text-align: left; column-gap: 18px; row-gap: 1px; }
body[data-snap-stage="work"] .snap-drop[data-state="idle"] .snap-drop__cloud { grid-column: 1; grid-row: 1 / 3; width: 46px; margin: 0; }
body[data-snap-stage="work"] .snap-drop[data-state="idle"] .snap-drop__t { grid-column: 2; grid-row: 1; font-family: var(--font-display); font-size: var(--st-lead); color: var(--espresso, #3a2417); }
body[data-snap-stage="work"] .snap-drop[data-state="idle"] .snap-drop__sub { grid-column: 2; grid-row: 2; font-size: var(--st-ui); color: var(--ink-3); }
body[data-snap-stage="work"] .snap-drop[data-state="idle"] .snap-drop__cta { display: none; }

/* published-state header actions: Customise / Download / Print (ghost pills) */
.snap-cacts { display: flex; align-items: center; gap: 12px; }
.snap-cact { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px; background: #fff;
  border: 1px solid var(--ctrl); border-radius: 14px; font: 550 var(--st-ui)/1 var(--font-body); color: var(--espresso, #3a2417);
  cursor: pointer; box-shadow: 0 1px 2px rgba(26, 22, 19, .05); transition: background .16s var(--ease); }
.snap-cact:hover { background: #fbfaf9; }
/* icon-only variant (published header, where the Knowledge Graph button takes
   the labeled slot) — square, no text, tooltip + aria-label carry the meaning */
.snap-cact--icon { padding: 0; width: 44px; gap: 0; justify-content: center; }
.snap-cact__i { display: grid; place-items: center; color: var(--espresso, #3a2417); }
.snap-cact__i svg { width: 18px; height: 18px; }

/* published snap cards (multi-panel): each a self-contained card above the builder */
.snap-cards { display: grid; gap: 16px; margin-bottom: 16px; }
.snap-pubcard { background: linear-gradient(180deg, var(--inner-a, #f8f7f4), var(--inner-b, #fbfaf8));
  border: 1px solid var(--hair, #eceae6); border-radius: 24px; padding: 22px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 14px 34px -26px rgba(26,22,19,.2); animation: snap-fade .32s var(--ease) both; }
.snap-pubcard .snap-chead { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; margin: 0; }
/* grey inset zone with the sticker centered as a contained white card (the
   sticker SVG carries its own white bg + rounded corners) */
.snap-pubcard__sticker { display: grid; place-items: center; background: #eae7e1; border: 0;
  border-radius: 20px; padding: 30px; margin-top: 16px; min-height: 180px; }
.snap-pubcard__sticker img { width: 100%; max-width: 520px; height: auto; display: block;
  border-radius: 16px; box-shadow: 0 10px 30px -16px rgba(26, 22, 19, .3); }
.snap-launch { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--hair-2, #f0efec);
  border-radius: 16px; min-height: 60px; padding: 0 20px; margin-top: 14px; }
.snap-launch__i { flex: 0 0 auto; display: grid; place-items: center; color: var(--espresso, #3a2417); }
.snap-launch__i svg { width: 24px; height: 24px; }
.snap-launch__lab { font-weight: 600; font-size: var(--st-lead); color: var(--espresso, #3a2417); }
.snap-launch__val { font-size: var(--st-body); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snap-launch__dot { flex: 1; text-align: center; color: #c9c3bd; }
.snap-launch__copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer;
  font: 600 var(--st-ui)/1 var(--font-body); color: var(--ink-3); transition: color .16s var(--ease); }
.snap-launch__copy:hover { color: var(--ink); }
.snap-launch__copy.is-done { color: var(--coral-ink); }
.snap-launch__ci { display: grid; place-items: center; }
.snap-launch__ci svg { width: 18px; height: 18px; }

/* header "Knowledge Graph" ghost button */
.snap-kgbtn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 17px; background: #fff;
  border: 1px solid var(--ctrl); border-radius: 12px; font: 600 var(--st-body)/1 var(--font-body); color: var(--ink-2);
  cursor: pointer; transition: background .16s var(--ease), color .16s var(--ease); }
.snap-kgbtn:hover { color: var(--ink); }
.snap-kgbtn.is-open { border-color: var(--coral-2); color: var(--coral-ink); background: #fff; }
.snap-kgbtn__i { display: grid; place-items: center; color: var(--ink-3); }
.snap-kgbtn__i svg { width: 18px; height: 18px; }

/* the knowledge-graph preview: two sections of toggleable nodes */
.snap-kg { display: grid; gap: 22px; margin-top: 4px; animation: snap-fade .24s var(--ease) both; }
.snap-kgsec { display: grid; gap: 10px; }
.snap-kgsec__head { display: flex; align-items: center; gap: 11px; padding: 2px 2px 3px; }
.snap-kgsec__i { display: grid; place-items: center; color: var(--ink-2); }
.snap-kgsec__i svg { width: 20px; height: 20px; }
.snap-kgsec__t { flex: 1; margin: 0; font: 600 var(--st-lead)/1.2 var(--font-body); color: var(--espresso, #1e1b18); }
.snap-kgsec__x { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--hair-2); border-radius: 10px;
  background: #fff; color: var(--ink-3); cursor: pointer; transition: color .16s var(--ease), border-color .16s var(--ease); }
.snap-kgsec__x:hover { color: var(--ink); border-color: var(--ink-3); }
.snap-kgsec__x svg { width: 16px; height: 16px; }
/* insights panel (scan analytics) — reachable like the KG panel */
.snap-insights { animation: snap-fade .24s var(--ease) both; }
.snap-inssec { display: grid; gap: 16px; }
.snap-instats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.snap-instat { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--hair-2, #ececeb); border-radius: 14px; padding: 14px 16px; }
.snap-instat__n { font: 800 1.75rem/1 var(--font-display, sans-serif); color: var(--espresso, #2b1912); letter-spacing: -.01em; }
.snap-instat__l { font-size: var(--st-ui); color: var(--ink-2); font-weight: 600; }
.snap-instat__d { font-size: var(--st-label); color: var(--ink-3); margin-top: 2px; }
.snap-insspark { background: #fff; border: 1px solid var(--hair-2, #ececeb); border-radius: 14px; padding: 14px 16px; }
.snap-insspark__lab { font-size: var(--st-label); color: var(--ink-3); margin-bottom: 12px; font-family: var(--font-mono); letter-spacing: .04em; }
.snap-insspark__bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.snap-insbar { flex: 1; min-width: 0; height: var(--h, 0%); min-height: 3px; background: linear-gradient(180deg, var(--coral-1), var(--coral-2)); border-radius: 4px 4px 2px 2px; transition: height .3s var(--ease-out-quint); }
.snap-insbar.is-zero { background: var(--hair, #eceae6); height: 3px; }
.snap-insbreak { display: grid; gap: 8px; }
.snap-insbreak__t { font-size: var(--st-label); color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; }
.snap-insrow { display: flex; align-items: center; gap: 12px; }
.snap-insrow__k { flex: 0 0 92px; font-size: var(--st-ui); color: var(--espresso, #2b1912); }
.snap-insrow__bar { flex: 1; height: 8px; background: var(--hair, #f0efec); border-radius: 99px; overflow: hidden; }
.snap-insrow__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--coral-1), var(--coral-2)); border-radius: 99px; }
.snap-insrow__v { flex: 0 0 auto; font: 700 var(--st-ui)/1 var(--font-mono); color: var(--ink-2); min-width: 28px; text-align: right; }
.snap-insempty { margin: 0; padding: 8px 2px; font-size: var(--st-body); color: var(--ink-3); line-height: 1.5; }
@media (max-width: 560px) { .snap-instats { grid-template-columns: 1fr; } .snap-insrow__k { flex-basis: 76px; } }
@media (prefers-reduced-motion: reduce) { .snap-insights, .snap-insbar { animation: none; transition: none; } }
.snap-kgrow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 18px; background: #fff;
  border: 1px solid #eaeaea; border-radius: 16px; box-shadow: 0 4px 12px -12px rgba(26, 22, 19, .3); }
.snap-kgrow__i { flex: 0 0 auto; display: grid; place-items: center; width: 26px; color: var(--ink-2); }
.snap-kgrow__i svg { width: 22px; height: 22px; }
.snap-kgrow__lab { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: var(--st-body); color: var(--espresso, #1e1b18); }
.snap-kgrow__sub { font-size: var(--st-meta); color: var(--ink-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.snap-kgrow__lock { flex: 0 0 auto; font: 600 var(--st-meta)/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.snap-kgrow__act { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border: 1px solid var(--coral-2); border-radius: 10px; background: #fff; color: var(--coral-ink);
  font: 600 var(--st-meta)/1 var(--font-body); cursor: pointer; transition: background .16s var(--ease); }
.snap-kgrow__act:hover { background: var(--pro-tint, #fef2f0); }
.snap-kgrow.is-locked { opacity: .92; }
.snap-kgrow.is-ghost { border-style: dashed; background: transparent; box-shadow: none; }
.snap-kgrow.is-ghost .snap-kgrow__i, .snap-kgrow.is-ghost .snap-kgrow__lab { opacity: .7; }

/* iOS-style switch */
.snap-tog { position: relative; flex: 0 0 auto; width: 46px; height: 28px; border-radius: 999px; background: #e9e9ea;
  border: 0; padding: 0; cursor: pointer; transition: background .2s var(--ease); }
.snap-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); transition: transform .2s var(--ease); }
.snap-tog[aria-checked="true"] { background: #34c759; }
.snap-tog[aria-checked="true"]::after { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .snap-tog, .snap-tog::after, .snap-kg { animation: none; transition: none; } }

/* ===== 3-surface recessed nest (layout spec 2026-07-03): white frame -> grey panel -> white cards ===== */
.snap-frame { background: #fff; border-radius: 28px; padding: 22px 16px;
  box-shadow: 0 20px 48px -30px rgba(26,22,19,.28), 0 1px 0 rgba(255,255,255,.85) inset; }
/* minmax(0,1fr): the track must be able to shrink below the card's max-content
   (a long unbreakable title), or the whole card stretches wide instead of the
   title truncating */
.snap-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 12px; }
/* light gradients (2026-07-04): warm depth on the grey panels + the dropzone
   glow, instead of flat grey — the surfaces read soft-lit, not dead-flat */
.snap-shell { background: radial-gradient(140% 120% at 100% 0%, #faf7f2 0%, #f2efe9 62%, #efece6 100%); border: 0; border-radius: 20px; padding: 20px; gap: 14px; box-shadow: none; }
.snap-pubcard { background: radial-gradient(140% 120% at 0% 0%, #faf7f2 0%, #f2efe9 62%, #efece6 100%); border: 0; border-radius: 20px; padding: 20px; box-shadow: none; }
.snap-drop { margin: 20px 0 0; background: transparent; border: 1.5px dashed #d3d0cb; }
.snap-drop::after { display: block; opacity: .5; }
.snap-appicon { background: none !important; box-shadow: none; padding: 0; overflow: hidden; }
.snap-appicon img { width: 100%; height: 100%; border-radius: 14px; display: block; object-fit: cover; }
.snap-row { background: #fff; border: 1px solid #ececeb; box-shadow: 0 6px 14px -12px rgba(26,22,19,.3); }
.snap-kgrow, .snap-launch, .snap-pubcard__sticker { border-color: #ececeb; }

/* ===== motion polish (2026-07-03): bar->pill morph + universal micro-layer ===== */
/* the progress bar lives in the status slot and fills from the row's --snap-p */
.snap-proc__bar > span { width: var(--snap-p, 6%); }
/* bar -> pill resolution: the pill springs into the slot the bar just vacated */
.snap-row--resolve .snap-badge--ready { animation: snap-pill-in .46s var(--spring, cubic-bezier(.34,1.56,.64,1)) both; }
@keyframes snap-pill-in { 0% { opacity: 0; transform: translateX(12px) scale(.82); } 55% { opacity: 1; } 100% { transform: none; } }
/* consistent press + focus across every control */
.snap-cact, .snap-kgbtn, .snap-publish, .snap-act, .snap-file__remove, .snap-kgrow__act,
.snap-launch__copy, .snap-cz__x, .snap-kgsec__x { transition: transform .12s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease); }
.snap-cact:active, .snap-kgbtn:active, .snap-act:active, .snap-file__remove:active,
.snap-kgrow__act:active, .snap-launch__copy:active, .snap-kgsec__x:active { transform: translateY(1px) scale(.985); }
.snap-cact:focus-visible, .snap-kgbtn:focus-visible, .snap-publish:focus-visible, .snap-act:focus-visible,
.snap-file__remove:focus-visible, .snap-launch__copy:focus-visible, .snap-tog:focus-visible,
.snap-kgrow__act:focus-visible, .snap-kgsec__x:focus-visible, .snap-cact:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(242, 94, 64, .3); }
/* KG toggle-off dims its row: the exclusion is visible */
.snap-kgrow:has(.snap-tog[aria-checked="false"]) { opacity: .6; }
/* copy success: the icon pops when it flips to "copied" */
.snap-launch__copy.is-done .snap-launch__ci { animation: snap-pop .32s var(--spring, cubic-bezier(.34,1.56,.64,1)); }
@keyframes snap-pop { 0% { transform: scale(.55); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* remove: the row collapses out instead of vanishing, and the meter recounts */
.snap-row--leaving { overflow: hidden; animation: snap-row-out .3s var(--ease) forwards; }
@keyframes snap-row-out { to { opacity: 0; transform: translateX(12px); max-height: 0; margin-top: -8px; padding-top: 0; padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) {
  .snap-row--resolve .snap-badge--ready, .snap-launch__copy.is-done .snap-launch__ci, .snap-row--leaving { animation: none; }
  .snap-row--leaving { display: none; }
}

/* publish -> card metamorphosis: the card materializes at the top of the stack */
.snap-pubcard.is-new { animation: snap-card-in .56s var(--ease) both; }
@keyframes snap-card-in { 0% { opacity: 0; transform: translateY(-18px) scale(.975); } 100% { opacity: 1; transform: none; } }
.snap-pubcard__sticker { position: relative; overflow: hidden; }
.snap-pubcard__sticker img { animation: snap-fade .45s .12s both; }
/* one-time celebratory glint across the fresh sticker, then never again */
.snap-pubcard.is-new .snap-pubcard__sticker::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.55) 50%, transparent 66%);
  transform: translateX(-120%); animation: snap-glint 1s .4s ease both; }
@keyframes snap-glint { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .snap-pubcard.is-new, .snap-pubcard__sticker img, .snap-pubcard.is-new .snap-pubcard__sticker::after { animation: none; } }

@keyframes snap-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .snap-badge--err.snap-badge--shake { animation: none; }
  .snap-chead[data-working] .snap-appicon { animation: none; }
  .snap-chead[data-working] .snap-appicon::after,
  .snap-publish[data-mode="publishing"]::after { animation: none; display: none; }
  .snap-w { animation: none; }
  .snap-proc__lab { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }
  .snap-chead__s[data-working] { animation: none; background-image: none;
    -webkit-text-fill-color: currentColor; color: var(--ink-2); }
  .snap-spine__n[data-st="now"] { background: var(--coral-2, #f25e40); }
  .snap-spine__n[data-st="now"]::after { animation: none; display: none; }
  .snap-spine__n { transition: none; }
}