/* SMCON26 "I'll be there" poster generator (widget smcon-poster). */
.head-row+.smp{margin-top:40px}
.smp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:start}
.smp-form{display:grid;gap:18px;min-width:0}
.smp-form .h3{margin:0}
.smp-intro{margin:-6px 0 4px;color:var(--ink-2)}
.smp-photo{position:relative}
.smp-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.smp .field label.smp-pick{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;cursor:pointer;font:700 14px var(--f-text);letter-spacing:0;text-transform:none;color:var(--ink);border-style:dashed}
.smp-pick svg{width:22px;height:22px;flex:none}
.smp-file:focus-visible+.smp-pick{outline:3px solid var(--volt);outline-offset:3px}
.smp-photo.bad .smp-pick{border-color:var(--err)}
.smp .field label.check{font:500 14px/1.45 var(--f-text);letter-spacing:0;text-transform:none;color:var(--ink-2)}
.smp .field.bad .check input{outline:2px solid var(--err);outline-offset:2px}
.smp-opts{display:flex;flex-wrap:wrap;gap:8px}
.smp-opts button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:8px 16px 8px 10px;border-radius:999px;border:1.5px solid var(--rule-2);background:var(--surface);color:var(--ink);font:600 14px var(--f-text);cursor:pointer;transition:border-color 150ms ease,box-shadow 150ms ease}
.smp-opts button:hover{border-color:var(--ink-3)}
.smp-opts button[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 3px rgba(168,230,43,.6)}
.smp-opts button:focus-visible{outline:3px solid var(--volt);outline-offset:2px}
.smp-opts i{width:24px;height:24px;border-radius:50%;flex:none;border:1px solid var(--rule-2);overflow:hidden}
.smp-ratio{display:block;width:12px;border:2px solid currentColor;border-radius:3px;flex:none;margin-left:6px}
.smp-ratio-square{height:12px}.smp-ratio-portrait{height:15px}.smp-ratio-story{height:21px}
.smp-hp{position:absolute!important;left:-9999px;width:1px;height:1px}
.smp-go{justify-self:start}
.smp-go[disabled]{opacity:.6;cursor:wait}
.smp-msg{margin:0;min-height:1.4em;font-weight:600;color:var(--ink-2)}
.smp-msg.ok{color:var(--elephant)}
.smp-msg.bad{color:var(--err)}
.smp-note{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:13px;color:var(--ink-3)}
.smp-note svg{width:16px;height:16px;flex:none;margin-top:2px}
.smp-stage{position:sticky;top:calc(var(--hdr,66px) + 24px);display:grid;gap:16px;justify-items:center;min-width:0;padding:clamp(16px,3vw,32px);border-radius:var(--r-xl,40px);background:var(--mint-2)}
.smp-canvas{display:flex;justify-content:center;width:100%;min-width:0}
.smp-canvas canvas{display:block;width:auto;height:auto;max-width:100%;max-height:min(72vh,760px);border-radius:18px;box-shadow:0 30px 60px -24px rgba(0,0,0,.5);touch-action:pan-y}
.smp-canvas canvas.has-photo{cursor:grab;touch-action:none}
.smp-canvas canvas.dragging{cursor:grabbing}
.smp-tools{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;width:100%}
.smp-zoom{display:flex;align-items:center;gap:10px;font:700 10.5px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.smp-zoom input{width:min(180px,40vw);accent-color:var(--elephant)}
.smp-zoom input:disabled{opacity:.4}
.smp-hint{margin:0;font-size:13px;color:var(--ink-3)}
.smp-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.smp [hidden]{display:none!important}
@media (max-width:900px){
  .smp-grid{grid-template-columns:minmax(0,1fr)}
  .smp-stage{position:static;scroll-margin-top:calc(var(--hdr,66px) + 12px)}
  .smp-canvas canvas{max-height:64vh}
}
@media (max-width:480px){
  .smp-opts button{padding:8px 12px 8px 8px;font-size:13px}
  .smp-actions .btn{width:100%;justify-content:center}
}