/* The TikTok slideshow maker (/tiktok-slideshow-maker) on the free tools' sheet (tool.css, B · Pennant): the desk's slide
   editor (./r/slide-editor.css) on the sheet, and beside it what comes out: the count, Download and the pennant. Until
   the editor loads, the slide's place holds the two ways in, set as the editor sets its own (its sizes, T-678's: as tall
   as the window allows on a desktop, 270 × 480 on a phone), so nothing moves when it arrives. */
.maker {
  grid-template-columns: minmax(0, 1fr) 300px; gap: 0;
  /* The editor's own shadow under a slide (slide-editor.css --se-proof), for the sample in its place. */
  --proof: 0 0 0 .5px rgba(60, 10, 4, .18), 0 1px 2px rgba(60, 10, 4, .06), 0 18px 40px -16px rgba(60, 10, 4, .34);
}
:root[data-theme="dark"] .maker { --proof: 0 0 0 .5px rgba(255, 220, 200, .16), 0 18px 40px -16px rgba(0, 0, 0, .7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .maker { --proof: 0 0 0 .5px rgba(255, 220, 200, .16), 0 18px 40px -16px rgba(0, 0, 0, .7); } }
.work { min-width: 0; padding-right: 32px; }

/* Before the editor: the two ways in where its toolbar goes, a sample slideshow (three slides the renderer drew, see
   site/tools/slideshow-sample.mjs) where its slide and strip go. */
.start { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.start[hidden], .editor-root[hidden] { display: none; }
.ways { display: flex; align-items: flex-end; justify-content: center; gap: 12px; min-height: 100px; }
.way {
  min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--well); color: var(--ink);
  font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity .15s ease-out;
}
.way.primary { background: var(--ink); color: var(--sheet); }
.way:hover { opacity: .88; }
.slot {
  width: calc(clamp(400px, 100vh - 392px, 640px) * 9 / 16); max-width: 100%; aspect-ratio: 9 / 16; margin: 0;
  border-radius: 16px; background: var(--well); box-shadow: var(--proof); transition: box-shadow .15s ease-out;
}
.slot img, .samples img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.tool.drop .slot { box-shadow: var(--proof), 0 0 0 3px var(--sheet), 0 0 0 5px var(--ink); }
.samples { display: flex; gap: 8px; padding: 8px 6px 6px; }
.samples button { width: 44px; height: 78px; padding: 0; border: 0; border-radius: 7px; background: var(--well); cursor: pointer; }
.samples button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--ink); }
.hint { margin: 0; color: var(--muted); font-size: 14.5px; text-align: center; }
.say { margin: 16px auto 0; max-width: 420px; color: var(--bad); font-size: 14.5px; line-height: 1.45; text-align: center; text-wrap: pretty; }
.say[hidden] { display: none; }

/* What comes out: beside the editor, behind a hairline, staying in view while the slides are long. */
.out { align-self: stretch; padding-left: 32px; border-left: 1px solid var(--hair); }
.out-in { position: sticky; top: 32px; display: flex; flex-direction: column; }
.out h2 { margin: 0; font-weight: 700; font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
.out .numbers { margin: 8px 0 24px; font-variant-numeric: tabular-nums; }
.save {
  height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--ink); color: var(--sheet);
  font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity .15s ease-out;
}
.save:hover:not(:disabled) { opacity: .88; }
.save:disabled { background: var(--well); color: var(--muted); cursor: default; }
.save[aria-busy="true"] { opacity: .6; cursor: progress; }
.out .cta { margin-top: 12px; }

@media (max-width: 1119px) {
  .maker { grid-template-columns: 1fr; gap: 32px; }
  .work { padding-right: 0; }
  .out { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
  .out-in { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 12px; }
  .out .numbers { margin: 4px 0 0; grid-column: 1; }
  .out h2 { grid-column: 1; }
  .save { grid-row: 1 / 3; grid-column: 2; }
  .out .cta { grid-row: 1 / 3; grid-column: 3; margin: 0; }
}
/* A phone (the editor's own break): the slide first at 270 × 480, its tools under it; then the slides out, stacked. */
@media (max-width: 650px) {
  .start { gap: 14px; }
  .slot { order: 1; width: 270px; }
  .ways { order: 2; min-height: 0; }
  .samples { order: 3; }
  .out-in { display: flex; align-items: stretch; }
  .out .numbers { margin: 4px 0 20px; }
  .save { height: 54px; }
  .out .cta { width: 100%; height: 54px; margin-top: 12px; }
}