/*
 * Slidestory board: the score under the overview, the groups of slides, the tiles, and the download menu.
 */

/* ---------- the score: a map of the deck and what Slidestory found ---------- */
.ov-score { position: relative; display: grid; gap: 18px; padding-top: 24px; border-top: 1px solid var(--line); }
.sc-top { display: grid; gap: 4px; }
.sc-sum { font: 700 clamp(22px, 2.7vw, 32px)/1.15 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.sc-sub { font-size: 15.5px; color: var(--ink-2); text-wrap: pretty; max-width: 66ch; }
.dm { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-s { flex: 1 1 0; min-width: 28px; max-width: 76px; height: 42px; display: grid; place-items: center; border-radius: 11px; border: 1.5px solid transparent; font: 700 13.5px/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; background: transparent; color: var(--muted);
  transition: background-color .5s var(--ease), color .4s, border-color .4s, transform .25s var(--ease); animation: rise .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms + 200ms); }
.dm-s[data-c="redraw"] { background: var(--accent); color: var(--accent-ink); }
.dm-s[data-c="works"] { background: var(--ok-bg); color: var(--ok-fg); }
.dm-s[data-c="left"] { background: var(--na-bg); color: var(--na-fg); }
.dm-s[data-c="error"] { background: var(--bad-bg); color: var(--bad-fg); }
.dm-s[data-c="pending"] { border: 1.5px dashed var(--line-2); }
.dm-s[data-c="off"] { border: 1.5px solid var(--line); color: var(--muted); opacity: .7; }
.dm-s[data-run="1"] { animation: rise .5s var(--ease) both, mapPulse 1.2s ease-in-out infinite; }
@keyframes mapPulse { 50% { background-color: var(--accent-soft); } }
@media (hover: hover) and (pointer: fine) { .dm-s:hover { transform: translateY(-3px); } }
.dm-s:active { transform: scale(.94); }
.sc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.dm-l { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.dm-l li { display: inline-flex; align-items: center; gap: 8px; }
.dm-l i { width: 11px; height: 11px; border-radius: 4px; background: var(--na); flex: none; }
.dm-l li[data-c="redraw"] i { background: var(--accent); } .dm-l li[data-c="works"] i { background: var(--ok); }
.dm-l li[data-c="off"] i { background: transparent; border: 1.5px solid var(--line-2); }
.dm-l li[data-c="error"] i { background: var(--bad); } .dm-l li[data-c="pending"] i { background: transparent; border: 1.5px dashed var(--muted); }
.dm-l b { font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 999px; background: var(--sunk); color: var(--ink); }
.sc-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-use { font-size: 15px; padding: 12px 20px; }
.sc-use.cta { background: var(--mark); color: var(--mark-ink); }
.sc-use.ghost { padding: 11px 18px; }

/* ---------- the two sections: the main story, then your slides ---------- */
.ms { display: grid; gap: 18px; scroll-margin-top: 80px; }
.ms.sl { margin-top: clamp(26px, 4vw, 48px); }
.ms-t { font: 800 clamp(30px, 4vw, 46px)/1.05 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.ms-pic { --gc: var(--mark); display: grid; gap: 14px; margin-top: 8px; }
.sl-score { padding: clamp(18px, 2.6vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); }
.sl-score:empty { display: none; }
.sl-score .ov-score { padding-top: 0; border-top: 0; }

/* ---------- groups ---------- */
.bd-groups { display: grid; gap: clamp(30px, 4.4vw, 52px); margin-top: 10px; }
.bg { --gc: var(--na); display: grid; gap: 16px; }
.bg[data-g="redraw"] { --gc: var(--accent); } .bg[data-g="works"] { --gc: var(--ok); } .bg[data-g="attn"] { --gc: var(--bad); } .bg[data-g="all"] { --gc: var(--mark); } .bg[data-g="off"] { --gc: var(--line-2); }
.bg.in { animation: bgIn .7s var(--ease) both; }
@keyframes bgIn { from { opacity: 0; transform: translateY(14px); } }
.bg-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.bg-t { display: inline-flex; align-items: center; gap: 11px; font: 700 clamp(21px, 2.4vw, 28px)/1.15 var(--display); letter-spacing: -.022em; }
.bg-t::before { content: ""; width: 13px; height: 13px; border-radius: 5px; background: var(--gc); flex: none; }
.bg-c { font-size: 14px; font-weight: 600; color: var(--muted); }
.bg-s { flex-basis: 100%; font-size: 15px; color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2vw, 22px); align-items: stretch; }

/* ---------- tiles ---------- */
.tl { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); scroll-margin-top: 80px; transition: border-color .3s, box-shadow .35s var(--ease); }
.tl[data-has="1"] { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent), var(--shadow-soft); }
.tl[data-status="error"] { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); }
.tl.flash { animation: tlFlash 1.6s ease-out; }
@keyframes tlFlash { 0%, 30% { box-shadow: 0 0 0 5px var(--mark), var(--shadow-soft); } }
.tl-art { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 19px 19px 0 0; overflow: hidden; background: var(--sunk); cursor: zoom-in; color: inherit; }
.tl-art:disabled { cursor: default; }
.tl[data-view="new"] .tl-art { background: #fff; }
.tl-main { position: absolute; inset: 0; display: block; transition: opacity .4s, filter .4s; }
.tl-main svg, .tl-main img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tl[data-status="queued"] .tl-main { opacity: .5; filter: saturate(.5); }
.tl[data-status="running"] .tl-main { opacity: .62; filter: saturate(.7); }
.tl[data-c="left"] .tl-main, .tl[data-c="off"] .tl-main, .tl[data-c="stopped"] .tl-main, .tl[data-c="error"] .tl-main { opacity: .55; filter: grayscale(.5); }
.tl-scan { display: none; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 32%, color-mix(in srgb, var(--mark) 62%, transparent) 50%, transparent 68%); animation: scan 1.7s ease-in-out infinite; }
.tl[data-status="running"] .tl-scan { display: block; }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tl-orig { position: absolute; inset: 0; display: block; background: #fff; opacity: 0; transition: opacity .28s var(--ease); pointer-events: none; }
.tl-orig img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tl[data-view="old"] .tl-orig { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tl:not(.tl-story):hover { border-color: var(--line-2); box-shadow: 0 2px 4px rgba(14, 21, 48, .06), 0 30px 54px -28px rgba(14, 21, 48, .42); }
  .tl:has(.tl-thumb:hover) .tl-orig { opacity: 1; }
}
.tl-pill { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1 var(--sans); padding: 6px 11px 6px 9px; border-radius: 999px; background: var(--sunk); color: var(--ink-2); }
.tl-pill[data-k="pick"] { background: var(--mark); color: var(--mark-ink); }
.tl-pill[data-k="mine"] { background: var(--accent); color: var(--accent-ink); }
.tl-pill[data-k="ok"] { background: var(--ok-bg); color: var(--ok-fg); }
.tl-pill[data-k="bad"] { background: var(--bad-bg); color: var(--bad-fg); }
.tl-pill:not(:has(.tg-i)) { padding-left: 11px; }
.tg-i { display: grid; place-items: center; }
.tg-i svg { width: 13px; height: 13px; stroke-width: 3; }
.tl[data-c="redraw"] .tg-i svg { stroke-width: 0; }
.tl-foot { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 18px; min-width: 0; }
.tl-pick { padding: 10px 16px; font-size: 14px; }
.tl:not(.tl-story) .tl-foot > .tl-acts { margin-top: auto; padding-top: 8px; }
.tl-opts { padding: 10px 15px; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-n { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--sunk); font: 700 13px/1 var(--sans); font-variant-numeric: tabular-nums; }
.tl-role { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tl-now { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; }
.tl-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line-2); border-radius: 7px; background: #fff; box-shadow: 0 4px 10px -4px rgba(14, 21, 48, .35); transition: transform .3s var(--ease); cursor: zoom-in; }
.tl-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (hover: hover) and (pointer: fine) { .tl-thumb:hover { transform: scale(1.06) rotate(-1.5deg); } }
.tl-why { font: 600 16px/1.32 var(--display); letter-spacing: -.01em; text-wrap: pretty; }
.tl-why.err { font: 500 14.5px/1.4 var(--sans); color: var(--bad-fg); }
.tl-sub { font-size: 14.5px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tl[data-view="new"] .tl-sub::before { content: "Instead"; display: inline-block; margin-right: 8px; font: 700 12px/1 var(--sans); color: var(--accent); vertical-align: 1px; }
.tl-foot > .ghost { align-self: flex-start; }
.tl-foot .skel { height: 12px; width: 70%; }

/* a result arriving: the picture develops, the slide from your deck drops in, a ring blooms */
.tl.dev .tl-main { animation: develop .85s var(--ease) both; }
.tl.dev .tl-thumb { animation: dropIn .65s .3s var(--ease) both; }
.tl.dev .tl-pill { animation: popin .5s .4s var(--ease) both; }
.tl.dev::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; animation: tlRing 1.3s .1s ease-out both; }
@keyframes develop { from { opacity: 0; transform: scale(1.05); filter: blur(10px) saturate(.2); } }
@keyframes dropIn { from { opacity: 0; transform: translateY(16px) rotate(-9deg) scale(.88); } }
@keyframes tlRing { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mark) 90%, transparent); } to { box-shadow: 0 0 0 18px transparent; } }

/* the whole deck in one picture */
.tl-story { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto; align-items: stretch; border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)), var(--surface) 60%); }
.tl-story .tl-art { align-self: center; border-radius: 19px 0 0 19px; background: #fff; }
.tl-story .tl-foot { justify-content: center; gap: 12px; padding: clamp(18px, 3vw, 34px); }
.tl-kick { display: flex; align-items: center; gap: 9px; font: 700 15px/1.2 var(--display); color: var(--accent); }
.tl-kick .tg-i svg { width: 20px; height: 20px; stroke-width: 0; fill: currentColor; }
.tl-story .tl-why { font-size: clamp(20px, 2.3vw, 28px); line-height: 1.2; letter-spacing: -.02em; }
.tl-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- the intake choices: audience box and which slides ---------- */
#audience-other { margin-top: 2px; }
.pk { display: grid; gap: 12px; }
.pk-one { font-size: 15px; color: var(--ink-2); }
.pk-modes { display: grid; gap: 4px; }
.field .pk-row { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 15.5px; font-weight: 500; color: var(--ink); cursor: pointer; }
.pk-row input, .pk-s input { accent-color: var(--accent); }
.pk-row input { width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; }
.pk-panel { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--paper); }
.pk-bar { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; }
.pk-sum { margin-right: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 4px; margin: -4px; overscroll-behavior: contain; }
.pk-s { position: relative; display: block; cursor: pointer; }
.pk-s input { position: absolute; z-index: 1; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pk-t { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: #fff; border: 2px solid var(--line-2); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.pk-t img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .62; transition: opacity .2s; }
.pk-t b { position: absolute; left: 4px; bottom: 4px; min-width: 20px; padding: 3px 6px; border-radius: 6px; background: rgba(14, 21, 48, .86); color: #fff; font: 700 11.5px/1 var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.pk-ck { position: absolute; right: 4px; top: 4px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-2); background: rgba(255, 255, 255, .92); color: transparent; transition: background .2s, color .2s, border-color .2s; }
.pk-ck svg { width: 12px; height: 12px; stroke-width: 3.2; }
.pk-s input:checked + .pk-t { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 26%, transparent); }
.pk-s input:checked + .pk-t img { opacity: 1; }
.pk-s input:checked + .pk-t .pk-ck { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pk-s input:focus-visible + .pk-t { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pk-s:hover .pk-t { transform: translateY(-2px); } }
.pk-note { font-size: 13px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }

/* ---------- the download menu ---------- */
.xm { position: fixed; z-index: 120; width: min(340px, calc(100vw - 16px)); display: grid; gap: 4px; padding: 10px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -16px rgba(5, 8, 22, .6); animation: xmIn .22s var(--ease) both; transform-origin: 100% 0; }
.xm[data-pos="above"] { transform-origin: 100% 100%; }
.xm.out { opacity: 0; transition: opacity .12s; pointer-events: none; }
@keyframes xmIn { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.xm[data-pos="above"] { --xm-y: 6px; }
.xm-t { font: 700 15px/1.2 var(--display); padding: 6px 8px 2px; }
.xm-n { font-size: 13px; color: var(--muted); padding: 0 8px 4px; }
.xm-o { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.35; color: var(--ink-2); padding: 6px 8px 8px; cursor: pointer; }
.xm-o input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.xm-i { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; transition: background .15s; }
.xm-i:hover, .xm-i:focus-visible { background: var(--sunk); }
.xm.busy .xm-i:not(.on) { opacity: .5; pointer-events: none; }
.xm-ic { flex: none; width: 46px; height: 34px; display: grid; place-items: center; border-radius: 9px; font: 800 12px/1 var(--sans); letter-spacing: .02em; color: #fff; background: #5A6587; }
.xm-ic[data-f="png"] { background: #2742E6; } .xm-ic[data-f="svg"] { background: #7A4FE0; } .xm-ic[data-f="pdf"] { background: #D8453C; } .xm-ic[data-f="pptx"] { background: #D58A0C; }
.xm-tx { display: grid; gap: 2px; min-width: 0; }
.xm-tx b { font-size: 14.5px; }
.xm-tx small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.xm-i.ok small { color: var(--ok); font-weight: 600; } .xm-i.bad small { color: var(--bad); font-weight: 600; }
.xm-i.on small { animation: pulse 1.2s ease-in-out infinite; }
.gal .xm { --surface: #121936; --ink: #EEF1FC; --ink-2: #C9D1EE; --muted: #98A4CC; --line-2: #36417A; --sunk: #1B2552; --ok: #4ECB8A; --bad: #F0736B; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .tl-story { grid-template-columns: minmax(0, 1fr); }
  .tl-acts > .ghost, .tl-acts > .pick { flex: 1 1 auto; justify-content: center; }
  .tl-story .tl-art { border-radius: 19px 19px 0 0; }
  .dm-s { height: 38px; min-width: 24px; }
  .sc-acts { width: 100%; } .sc-acts > * { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-s, .dm-s[data-run="1"], .bg.in, .tl.dev .tl-main, .tl.dev .tl-thumb, .tl.dev .tl-pill, .tl.dev::after, .tl.flash, .tl-scan, .xm { animation: none; }
  }