/* ========================================================================
   generator.css: the invitation generator, in the houseofplay.rs look.
   Builds on site.css (tokens, buttons, header) and invitation.css
   (the poster itself).
   ======================================================================== */

body { min-height: 100vh; }

.gen {
  max-width: 1320px; margin: 0 auto;
  padding: calc(var(--header-h) + 34px) var(--gutter) 48px;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 980px) {
  .gen { grid-template-columns: minmax(0, 1fr); }
  .preview { order: -1; }
}

/* ---------- intro ---------- */
.intro .pill {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 8px 16px;
  background: var(--ink); color: var(--mint); font-size: 14px; letter-spacing: .14em;
}
.intro .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.intro h1 { font-size: clamp(52px, 7vw, 84px); line-height: .9; margin: 20px 0 14px; }
.intro h1 em { font-style: normal; color: var(--orange); }
.intro p { font-size: 17px; max-width: 46ch; color: #4a4741; }

/* ---------- steps ---------- */
.editor { display: flex; flex-direction: column; gap: 22px; }
.step {
  background: #fff8ef; border: 3px solid var(--ink); border-radius: 24px; padding: 20px 22px 22px;
  box-shadow: 0 6px 0 var(--ink);
}
.step h2 { display: flex; align-items: center; gap: 12px; font-size: 26px; letter-spacing: .04em; margin-bottom: 16px; }
.step .num {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--orange); border: 3px solid var(--ink);
  display: grid; place-items: center; font-size: 18px;
}
.hint { font-size: 14px; color: #6b6760; margin: 0 0 14px; }
.hint strong { font-family: var(--display); font-weight: 400; color: var(--ink); letter-spacing: .03em; }
.field-lbl { font-size: 14px; letter-spacing: .12em; color: #6b6760; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.grow { flex: 1; min-width: 0; }

/* ---------- inputs ---------- */
.input {
  font-family: var(--display); font-size: 22px; letter-spacing: .03em; color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 10px 14px; min-height: 54px;
  transition: box-shadow .15s;
}
.input::placeholder { color: #b3ada4; }
.input:focus { outline: none; box-shadow: 0 0 0 4px var(--mint); }
select.input { appearance: none; cursor: pointer; padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 1l6 7 6-7' fill='none' stroke='%23262626' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
.w-day { width: 96px; }
.w-age { width: 92px; }
.time { display: inline-flex; align-items: center; gap: 4px; }
.time .colon { font-size: 26px; line-height: 1; }
.w-hm { width: 64px; text-align: center; padding-left: 6px; padding-right: 6px; }
input[type=number].input { -moz-appearance: textfield; }
input[type=number].input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---------- 1 · designs ---------- */
.designs { display: flex; flex-wrap: wrap; gap: 14px; }
.design-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 0; padding: 0; font-family: var(--display); font-size: 15px; letter-spacing: .08em; color: var(--ink);
}
.design-btn .design-icon {
  width: 104px; height: 88px; padding: 12px; border-radius: 18px; border: 3px solid var(--ink); background: #fff;
  display: grid; place-items: center; transition: transform .18s, box-shadow .18s, background .18s;
}
.design-btn .design-icon svg { width: 100%; height: 100%; }
.design-btn:hover .design-icon { transform: translateY(-3px) rotate(-2deg); }
.design-btn.is-active .design-icon { background: var(--ink); box-shadow: 0 5px 0 var(--orange); }
.design-btn:focus-visible { outline: none; }
.design-btn:focus-visible .design-icon { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- 2 · colours ---------- */
.obj-group { margin-bottom: 14px; }
.obj-group h3 { font-size: 13px; letter-spacing: .14em; color: #6b6760; margin-bottom: 8px; }
.objs { display: flex; flex-wrap: wrap; gap: 8px; }
.obj {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--display); font-size: 14px; letter-spacing: .06em; color: var(--ink);
  background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 5px 12px 5px 5px;
  transition: transform .15s, background .15s, color .15s;
}
.obj:hover { transform: translateY(-2px); }
.obj .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); flex: none; }
.obj.is-active { background: var(--ink); color: var(--cream); }
.obj.is-active .sw { border-color: var(--cream); }

.picker {
  background: var(--cream); border: 2.5px dashed var(--ink); border-radius: 18px; padding: 14px 16px; margin: 6px 0 16px;
}
.picker-head { font-size: 14px; letter-spacing: .1em; margin-bottom: 12px; color: #6b6760; }
.picker-head b { font-weight: 400; color: var(--ink); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; padding: 0;
  transition: transform .15s, box-shadow .15s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.is-active { box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px var(--orange); }
.swatch:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.custom { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; letter-spacing: .08em; }
.custom input[type=color] {
  width: 44px; height: 32px; padding: 0; border: 3px solid var(--ink); border-radius: 10px; background: #fff; cursor: pointer;
}
.custom input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.custom input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.custom input[type=color]::-moz-color-swatch { border: 0; border-radius: 6px; }
.custom code { font-family: ui-monospace, monospace; font-size: 14px; color: #6b6760; }
.btn-sm { padding: 10px 16px; font-size: 14px; box-shadow: 0 4px 0 var(--ink); }
.btn-sm.btn-line { box-shadow: none; }
button.btn { font-family: var(--display); cursor: pointer; border: 0; color: var(--ink); }
button.btn.btn-line { border: 3px solid var(--ink); background: transparent; }

/* ---------- 3 · children ---------- */
.children { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.child-row { display: flex; gap: 10px; align-items: center; }
.child-index {
  width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--mint); border: 2.5px solid var(--ink);
  display: grid; place-items: center; font-size: 14px;
}
.icon-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%; border: 3px solid var(--ink); background: #fff;
  font-family: var(--display); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink);
  display: grid; place-items: center; transition: background .15s, transform .15s;
}
.icon-btn:hover:not(:disabled) { background: var(--pink); transform: rotate(-8deg); }
.icon-btn:disabled { opacity: .3; cursor: not-allowed; }
.add-child {
  font-family: var(--display); font-size: 15px; letter-spacing: .06em; color: var(--ink); cursor: pointer;
  background: transparent; border: 2.5px dashed var(--ink); border-radius: 999px; padding: 10px 18px; margin-bottom: 12px;
  transition: background .15s;
}
.add-child:hover:not(:disabled) { background: var(--mint); border-style: solid; }
.add-child:disabled { opacity: .45; cursor: not-allowed; }

.size { border-top: 2px dashed #cfc7bb; padding-top: 14px; }
.size-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.autofit { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: .1em; cursor: pointer; }
.autofit input { width: 20px; height: 20px; accent-color: var(--orange); margin: 0; }
input[type=range] { width: 100%; accent-color: var(--orange); }
input[type=range]:disabled { opacity: .4; }

/* ---------- 5 · actions ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.actions .btn { justify-content: center; }
#download:disabled { background: #d9d2c7; color: #8f897f; box-shadow: 0 6px 0 #b3ada4; cursor: not-allowed; transform: none; }
.status { font-size: 15px; margin-top: 16px; min-height: 1.5em; color: var(--green); }
.status.is-error { color: #b4361b; }
.status.is-todo { color: #6b6760; }

/* ---------- preview ---------- */
/* The box keeps the size it had with roomier padding and a caption below
   the invitation (--old-pad, --old-poster-h); the invitation now fills it. */
.preview {
  --old-pad: clamp(18px, 3vw, 40px);
  --old-poster-h: min(calc(460px * 5339 / 3768), calc(100vh - var(--header-h) - 170px));
  --pad: 35px;
  position: sticky; top: calc(var(--header-h) + 34px);
  background-color: var(--mint);
  background-image: radial-gradient(rgba(38,38,38,.16) 1.6px, transparent 2px);
  background-size: 22px 22px;
  border: 3px solid var(--ink); border-radius: 32px; box-shadow: 0 6px 0 var(--ink);
  padding: var(--pad); display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(var(--old-poster-h) + 2 * var(--old-pad) + 41px);
}
.preview-stage {
  width: 100%; cursor: pointer;
  max-width: calc((var(--old-poster-h) + 2 * var(--old-pad) + 35px - 2 * var(--pad)) * 3768 / 5339);
}
.preview-stage .poster-container { max-width: none; box-shadow: 0 18px 44px rgba(38,38,38,.3); border-radius: 6px; overflow: hidden; }
.preview-stage .is-picked { outline: 3px dashed var(--orange); outline-offset: 2px; }
@media (max-width: 980px) {
  .preview { position: static; --old-poster-h: calc(min(340px, 78vw) * 5339 / 3768); }
}

/* ---------- floating mini preview (small screens only) ---------- */
.mini { display: none; }
@media (max-width: 980px) {
  .mini {
    display: block; position: fixed; z-index: 45; top: calc(var(--header-h) + 6px); right: 12px;
    width: 116px; padding: 7px 7px 5px; cursor: pointer;
    background-color: var(--mint);
    background-image: radial-gradient(rgba(38,38,38,.16) 1.2px, transparent 1.6px);
    background-size: 12px 12px;
    border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink);
    transform-origin: top right;
    opacity: 0; transform: scale(.5) rotate(6deg); pointer-events: none;
    transition: opacity .22s ease, transform .3s cubic-bezier(.3,1.4,.5,1), width .3s cubic-bezier(.3,1.2,.5,1);
  }
  .mini[hidden] { display: none; }
  .mini.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .mini.is-big { width: min(240px, 58vw); }
  .mini:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
  .mini.is-bump { animation: mini-bump .35s ease; }
  .mini-stage .poster-container { width: 100%; max-width: none; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 10px rgba(38,38,38,.25); }
  .mini-label {
    display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 5px;
    font-size: 11px; letter-spacing: .12em;
  }
  .mini-icon { font-size: 13px; transition: transform .3s; }
  .mini.is-big .mini-icon { transform: rotate(180deg); }
}
@keyframes mini-bump { 40% { transform: scale(1.06) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) {
  .mini, .mini-icon { transition: none; }
  .mini.is-bump { animation: none; }
}

/* ---------- footer ---------- */
.gen-footer {
  max-width: 1320px; margin: 0 auto; padding: 22px var(--gutter) 34px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 15px; letter-spacing: .08em;
  border-top: 3px solid var(--ink);
}
.gen-footer a:hover { color: var(--orange); }
.gen-footer a:first-child { margin-right: auto; }

/* off-screen node used to rasterise the poster for PNG export */
#export-root { position: fixed; left: -99999px; top: 0; pointer-events: none; opacity: 0; }

/* ---------- print: the poster only, one A4 page ---------- */
@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: #fff; }
  .site-header, .editor, .gen-footer, .mini { display: none !important; }
  .gen { display: block; padding: 0; max-width: none; }
  .preview { position: static; padding: 0; border: 0; box-shadow: none; background: #fff; display: block; min-height: 0; }
  /* The poster's text is sized in cqi. Firefox's print layout resolves cqi
     against a different width than it paints with, so words overlap and
     get cut off. With the container switched off, cqi falls back to the
     page width, which on A4 with zero margins is exactly the poster's. */
  .preview-stage { max-width: none; width: 210mm; }
  .preview-stage .poster-container { width: 210mm; height: 297mm; max-width: none; box-shadow: none; border-radius: 0; container-type: normal; }
  .preview-stage .is-picked { outline: none; }
  .poster { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}