/* create.css
 * Creations (AI-ONLINE-FEATURES-PLAN.md, Phase 17): slides, one-pagers,
 * posters, infographics, cards and workbooks.
 *
 * A page is drawn at its true size (a slide is 1280 x 720) and scaled with a
 * transform by whatever shows it, so the screen, a PNG and a PDF lay out
 * identically. Colours and fonts come from the creation's own theme as custom
 * properties, never from the app's light or dark mode: a page keeps the look
 * it will be printed or shared with.
 */

.ts-create-page {
  --ts-create-body: system-ui, sans-serif;
  --ts-create-heading-font: var(--ts-create-body);
  --ts-create-heading: #102a43;
  --ts-create-text: #1f2933;
  --ts-create-accent: #1d4ed8;
  --ts-create-bg: #ffffff;

  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  transform-origin: top left;
  background: var(--ts-create-bg);
  color: var(--ts-create-text);
  font-family: var(--ts-create-body);
  padding: 56px 64px;
  line-height: 1.45;
}

.ts-create-body {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.ts-create-centre { justify-content: center; text-align: center; }

.ts-create-page h1,
.ts-create-page h2,
.ts-create-page h3 {
  font-family: var(--ts-create-heading-font);
  color: var(--ts-create-heading);
  margin: 0;
  line-height: 1.15;
}

.ts-create-title { font-size: calc(40px * var(--ts-create-scale, 1)); }
.ts-create-title-big { font-size: calc(64px * var(--ts-create-scale, 1)); }
.ts-create-subhead { font-size: calc(28px * var(--ts-create-scale, 1)); margin: 0; opacity: 0.85; }
.ts-create-cta { font-size: calc(30px * var(--ts-create-scale, 1)); font-weight: 700; color: var(--ts-create-accent); margin-top: auto; }

.ts-create-bullets { margin: 0; padding-left: 1.2em; font-size: calc(26px * var(--ts-create-scale, 1)); display: flex; flex-direction: column; gap: 0.45em; }
.ts-create-bullets-big { font-size: calc(34px * var(--ts-create-scale, 1)); }
.ts-create-bullets li { margin: 0; }

.ts-create-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; min-height: 0; }
.ts-create-column h3 { font-size: calc(26px * var(--ts-create-scale, 1)); margin-bottom: 0.4em; }
.ts-create-column .ts-create-bullets { font-size: calc(22px * var(--ts-create-scale, 1)); }

.ts-create-quote { margin: 0; font-size: calc(34px * var(--ts-create-scale, 1)); font-style: italic; }
.ts-create-quote cite { display: block; margin-top: 0.6em; font-size: calc(22px * var(--ts-create-scale, 1)); font-style: normal; opacity: 0.8; }

.ts-create-bignumber { font-size: calc(96px * var(--ts-create-scale, 1)); font-weight: 800; color: var(--ts-create-accent); margin: 0; line-height: 1; }

.ts-create-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; min-height: 0; align-items: center; }
.ts-create-split-text { min-width: 0; }

.ts-create-picture { display: flex; flex-direction: column; gap: 0.4em; align-items: center; justify-content: center; min-height: 0; }
.ts-create-picture img { max-width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; }
.ts-create-picture-empty {
  border: 2px dashed color-mix(in srgb, var(--ts-create-text) 35%, transparent);
  border-radius: 8px;
  padding: 2em;
  font-size: calc(18px * var(--ts-create-scale, 1));
  opacity: 0.75;
}
.ts-create-credit { font-size: calc(14px * var(--ts-create-scale, 1)); margin: 0; opacity: 0.8; text-align: center; }

.ts-create-card { justify-content: center; gap: 0.8em; }
.ts-create-cardtext { font-size: calc(30px * var(--ts-create-scale, 1)); margin: 0; }

.ts-create-facts { display: flex; flex-wrap: wrap; gap: 0.8em; margin: 0.4em 0; }
.ts-create-facts p {
  margin: 0;
  font-size: calc(18px * var(--ts-create-scale, 1));
  font-weight: 700;
  background: color-mix(in srgb, var(--ts-create-accent) 12%, transparent);
  color: var(--ts-create-heading);
  padding: 0.4em 0.8em;
  border-radius: 999px;
}
.ts-create-flow { display: flex; flex-direction: column; gap: 1em; font-size: calc(18px * var(--ts-create-scale, 1)); min-height: 0; }
.ts-create-flow h2 { font-size: calc(24px * var(--ts-create-scale, 1)); }
.ts-create-flow .ts-create-bullets { font-size: calc(18px * var(--ts-create-scale, 1)); }

.ts-create-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1em; }
.ts-create-stat { text-align: center; }
.ts-create-stat .ts-create-bignumber { font-size: calc(56px * var(--ts-create-scale, 1)); }
.ts-create-stat p:last-child { font-size: calc(16px * var(--ts-create-scale, 1)); margin: 0.2em 0 0; }
.ts-create-steps { font-size: calc(18px * var(--ts-create-scale, 1)); padding-left: 1.2em; display: flex; flex-direction: column; gap: 0.4em; }

/* ---- workbook ---- */
.ts-create-activity { break-inside: avoid; margin-bottom: 1.6em; font-size: calc(16px * var(--ts-create-scale, 1)); }
.ts-create-instructions { font-weight: 700; margin: 0 0 0.6em; color: var(--ts-create-heading); }
.ts-create-questions { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 0.9em; }
.ts-create-questions p { margin: 0 0 0.3em; }
.ts-create-lines { display: flex; flex-direction: column; gap: 0.75em; }
.ts-create-line { border-bottom: 1px solid color-mix(in srgb, var(--ts-create-text) 45%, transparent); height: 1.1em; }
.ts-create-checklist, .ts-create-ratings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6em; }
.ts-create-checklist li, .ts-create-ratings li { display: flex; align-items: center; gap: 0.6em; }
.ts-create-tickbox { width: 1.1em; height: 1.1em; border: 2px solid var(--ts-create-text); border-radius: 3px; flex: none; }
.ts-create-rating-text { flex: 1; }
.ts-create-scale { display: flex; gap: 0.3em; }
.ts-create-rating-box {
  width: 1.6em; height: 1.6em; border: 1px solid var(--ts-create-text); border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.85em;
}
.ts-create-matching { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; }
.ts-create-matching ol { margin: 0; display: flex; flex-direction: column; gap: 0.6em; }
.ts-create-matching-right { list-style: upper-alpha; }
.ts-create-answers .ts-create-tickbox { display: none; }

.ts-create-logo { position: absolute; right: 40px; bottom: 28px; max-height: 44px; max-width: 160px; }
.ts-create-footer { position: absolute; left: 64px; bottom: 28px; margin: 0; font-size: calc(14px * var(--ts-create-scale, 1)); opacity: 0.75; }

/* ---- "check this": on screen only, never in an export ---- */
.ts-create-unverified { position: relative; }
.ts-create-check {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: middle;
  background: #fde68a;
  color: #7c2d12;
}

/* ---- the editor ---- */
.ts-create-frame { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; min-height: 320px; }
.ts-create-pages { display: flex; flex-direction: column; gap: 0.3rem; max-height: 60vh; overflow-y: auto; }
.ts-create-pageitem { text-align: left; font-size: 0.85rem; padding: 0.45rem 0.6rem; border-radius: 6px; }
.ts-create-pageitem-on { outline: 2px solid var(--accent, #8ab4ff); }
.ts-create-stage {
  position: relative;
  overflow: auto;
  min-height: var(--ts-create-scaled-height, 320px);
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 12px;
}
.ts-create-tools { flex-wrap: wrap; align-items: center; }
.ts-create-warn { color: #fbbf24; }
.ts-create-page [contenteditable] { outline: none; }
.ts-create-page [contenteditable]:focus { box-shadow: 0 0 0 2px var(--ts-create-accent); border-radius: 3px; }

body.light-mode .ts-create-stage { background: rgba(0, 0, 0, 0.08); }

@media print {
  .ts-create-page { break-after: page; transform: none !important; }
  .ts-create-check { display: none; }
}