/*
 * Slidestory cards: a slide and its options, picking, the floating dock, and the small-screen rules for them.
 */

#example { display: grid; gap: 18px; }
.sxlist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.sx { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: clamp(16px, 2.6vw, 28px); scroll-margin-top: 6px; box-shadow: var(--shadow-soft); animation: rise .6s var(--ease) both; }
.sx.story { 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) 55%); }
.sx-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sx-head .num.star { width: 34px; height: 34px; color: var(--accent); }
.sx-head .num.star svg { width: 100%; height: 100%; }
.story-t { font: 700 clamp(21px, 2.6vw, 28px)/1.15 var(--display); letter-spacing: -.02em; }
.sx-head .gist { flex: 1 1 260px; min-width: 0; color: var(--ink-2); font-size: 15.5px; text-wrap: pretty; }
.sx.story > .gist { color: var(--ink-2); font-size: 15.5px; margin-top: -8px; }
.rolechip { position: relative; font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 5px 11px 5px 25px; border-radius: 999px; background: var(--sunk); }
.rolechip::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--rc, var(--na)); }
.sx-status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sx[data-status="running"] .sx-status::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: rot .8s linear infinite; }
.sx[data-status="done"] .sx-status { color: var(--accent); }
.sx[data-status="queued"] .sx-head .gist { opacity: .75; }
.sx-orig { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 18px; align-items: start; }
.sx-orig .thumb { border-radius: 6px; overflow: hidden; background: #fff; box-shadow: var(--shadow-frame); }
.sx-orig .thumb img, .sx-orig .thumb svg { display: block; width: 100%; height: auto; }
.says-box { display: grid; gap: 10px; align-content: start; animation: rise .5s var(--ease) both; }
.facts-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.facts-chips li { font-size: 13.5px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); }
.story > .sx-body, .story .sx-head { position: relative; }
.sx-msg { display: grid; gap: 12px; justify-items: start; padding: 4px 0; }

/* pick, icon button, ghost button */
.pick { display: inline-flex; align-items: center; gap: 0; font: 600 14px/1 var(--sans); padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s, color .2s, gap .25s var(--ease), transform .2s var(--ease); }
.pick:hover { border-color: var(--ink); }
.pick:active { transform: scale(.96); }
.pick .ck { width: 0; height: 16px; overflow: hidden; display: grid; place-items: center; transition: width .25s var(--ease); }
.pick .ck svg { width: 16px; height: 16px; stroke-width: 3; flex: none; }
.pick[aria-pressed="true"] { gap: 8px; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pick[aria-pressed="true"] .ck { width: 16px; }
.pick.big { padding: 13px 22px; font-size: 15px; }
.ib { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s, border-color .2s; }
.ib:hover { border-color: var(--ink); background: var(--sunk); }
.ib:disabled { opacity: .5; cursor: progress; }
.ib svg { width: 18px; height: 18px; }
.ghost svg { width: 16px; height: 16px; }
.drawing { font-weight: 600; color: var(--muted); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.bst { position: fixed; z-index: 95; width: 8px; height: 8px; border-radius: 50%; pointer-events: none; animation: bst .75s var(--ease) forwards; }
@keyframes bst { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }

/* dock */
.dock { gap: 12px; }
.dock:not([data-run="1"]) .spin, .dock:not([data-run="1"]) .dt, .dock:not([data-run="1"]) .dstop { display: none; }
.dock:not([data-run="1"]) { padding-left: 20px; }
#dock-picks { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
#dock-picks:empty { display: none; }
.dgo { border: 0; background: var(--mark); color: var(--mark-ink); font: 700 14px/1 var(--sans); padding: 11px 18px; border-radius: 999px; cursor: pointer; transition: transform .2s var(--ease); }
.dgo:hover:not(:disabled) { transform: translateY(-1px); }
.dgo:disabled { opacity: .6; cursor: progress; }
.dock[data-run="1"] #dock-picks:not(:empty) { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); }

/* small screens */
@media (max-width: 820px) {
  .ov-top { grid-template-columns: minmax(0, 1fr); }
  .ov-count { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; }
}
@media (max-width: 640px) {
  .sx-orig { grid-template-columns: minmax(0, 1fr); }
  .sx { border-radius: 20px; }
  .dock { max-width: calc(100% - 16px); flex-wrap: wrap; justify-content: center; border-radius: 22px; padding: 8px 12px; }
}