/* invite.css — page layer for /invitation-maker/. The shell (header, controls,
   buttons, explainer, footer) is /assets/polyatic.css; this file adds the
   cutting-mat stage with the card lying on it, the design swatches, the link panel
   and the full-screen guest view a shared link opens. The card is its own colours
   in both themes: it is an object on the mat. */
@font-face{font-family:"INV Classic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/classic.woff2) format("woff2")}
@font-face{font-family:"INV Script";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/handwritten.woff2) format("woff2")}

.iv-noscript{margin:1rem;padding:.875rem 1rem;border:1px solid var(--line);border-left:.25rem solid var(--accent);border-radius:.625rem;background:var(--surface)}
.iv-head h1{margin-bottom:.25rem}
.iv-head .sub{margin-bottom:.875rem}

/* ---------- the stage ---------- */
.duo.iv-duo>.pane-result{position:static}
.iv-stage{background:radial-gradient(120% 80% at 50% 0%,rgba(255,196,120,.16),transparent 60%),linear-gradient(180deg,var(--mat),var(--mat-2));
  color:var(--mat-ink);border-radius:var(--r);padding:.75rem .75rem 1rem;box-shadow:var(--shadow);min-width:0}
.iv-stage-h{font-family:var(--mono);font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--mat-muted);margin:0 0 .5rem;text-align:center}
.iv-stage .iv-view{max-width:16rem;margin:0 auto .625rem}
.iv-stage .iv-view button{padding:.375rem .5rem;font-size:.8125rem}
.iv-paper{margin:0 auto;line-height:0;max-width:min(100%,19rem)}
.iv-paper.is-sheet{max-width:min(100%,36rem)}
.iv-paper.is-sheet.is-portrait{max-width:min(100%,24rem)}
.iv-paper canvas{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,.1),0 18px 40px -16px rgba(0,0,0,.6)}
.iv-summary{margin:.625rem 0;text-align:center;font-size:.875rem;color:var(--mat-ink)}
.iv-dl{display:flex;flex-wrap:wrap;gap:.5rem;max-width:30rem;margin:0 auto}
.iv-dl .btn{flex:1 1 9rem}
.iv-dl .iv-linkbtn{flex-basis:100%}
.iv-dl .btn:disabled{opacity:.6;cursor:progress}
.iv-stage .btn.ghost{color:var(--mat-ink);border-color:rgba(255,255,255,.4);background:transparent}
.iv-msg{margin:.5rem auto 0;max-width:30rem;text-align:center;font-size:.8125rem;color:var(--mat-ink)}
.iv-msg:empty{display:none}
.iv-link{max-width:30rem;margin:.75rem auto 0;padding:.75rem;border:1px solid rgba(255,255,255,.25);border-radius:.625rem;background:rgba(0,0,0,.18)}
.iv-link[hidden]{display:none}
.iv-link .k{display:block;font-size:.8125rem;margin-bottom:.25rem;color:var(--mat-ink)}
.iv-link input{width:100%;font-family:var(--mono);font-size:.75rem}
.iv-link-acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.iv-link-acts .btn{flex:1 1 8rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}
.iv-link-acts .btn[hidden]{display:none}
.iv-limits{margin:.625rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--mat-ink)}

/* ---------- the form ---------- */
.iv-form-h{margin:0 0 .75rem;font-size:1.1875rem}
.iv-hint{margin:.375rem 0 0;font-size:.8125rem;color:var(--muted);line-height:1.45}
.iv-hint:empty{display:none}
.iv-form textarea{resize:vertical;line-height:1.45}
.iv-form .modes button small{display:block;font-weight:500;font-size:.6875rem;opacity:.8}
.iv-form .controls .modes{margin-bottom:0}
.iv-form .head .v{font-size:.75rem;color:var(--muted)}
.iv-occ{flex-wrap:wrap}
.iv-two,.iv-three{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem}
.iv-three>.field:first-child{grid-column:1/-1}
.iv-two .field,.iv-three .field{margin:0;min-width:0}
.iv-two input,.iv-three input{width:100%;min-width:0}
.iv-photo{display:flex;flex-wrap:wrap;gap:.5rem}
.iv-photo .btn[hidden]{display:none}
.iv-file{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;cursor:pointer}
.iv-file input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.iv-file:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.iv-designs{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr));gap:.375rem}
.iv-design{display:flex;align-items:center;gap:.4rem;padding:.4375rem .5rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface-2);color:var(--ink);font:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;min-width:0;text-align:left}
.iv-design:hover{border-color:var(--muted)}
.iv-design.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.iv-design:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.iv-sw{flex:none;width:1.125rem;height:1.125rem;border-radius:50%;border:1px solid rgba(0,0,0,.18)}
.iv-d-confetti .iv-sw{background:radial-gradient(circle at 30% 30%,#ef476f 0 18%,transparent 20%),radial-gradient(circle at 70% 60%,#06d6a0 0 18%,transparent 20%),radial-gradient(circle at 40% 75%,#118ab2 0 14%,transparent 16%),#fffaf0}
.iv-d-bunting .iv-sw{background:conic-gradient(from 150deg at 50% 0%,#e76f51 0 20deg,#e9c46a 0 40deg,#2a9d8f 0 60deg,#f3f7fa 0)}
.iv-d-sunshine .iv-sw{background:repeating-conic-gradient(#ffcf56 0 15deg,#ffdb7a 0 30deg)}
.iv-d-blacktie .iv-sw{background:#15171d;box-shadow:inset 0 0 0 2px #c9a45c}
.iv-d-evergreen .iv-sw{background:radial-gradient(circle at 50% 40%,#c8102e 0 16%,transparent 18%),#1e4b38}
.iv-d-snowfall .iv-sw{background:radial-gradient(circle at 30% 30%,#fff 0 9%,transparent 11%),radial-gradient(circle at 65% 55%,#fff 0 7%,transparent 9%),linear-gradient(#1c2b4d,#33497a)}
.iv-d-supper .iv-sw{background:radial-gradient(ellipse 40% 55% at 50% 60%,#b5532f 0 60%,transparent 64%),#f7efe3}
.iv-d-watercolour .iv-sw{background:radial-gradient(circle at 30% 30%,rgba(240,160,130,.8),transparent 60%),radial-gradient(circle at 70% 70%,rgba(150,185,140,.8),transparent 60%),#fffdf9}
.iv-d-simple .iv-sw{background:linear-gradient(#0f766e 0 22%,#fff 22% 78%,#0f766e 78%)}
.iv-d-ink .iv-sw{background:#fff;border:1.5px dashed #000}
.iv-d-harvest .iv-sw{background:radial-gradient(ellipse 32% 22% at 32% 38%,#b8461f 0 90%,transparent 100%),radial-gradient(ellipse 30% 20% at 66% 60%,#dfa12f 0 90%,transparent 100%),#fbf1e1}
.iv-d-pumpkin-night .iv-sw{background:radial-gradient(circle at 72% 30%,#f7e8b5 0 16%,transparent 18%),radial-gradient(ellipse 26% 18% at 32% 78%,#f58f2a 0 90%,transparent 100%),linear-gradient(#15112a,#3b2a5c)}
.iv-d-friendly-ghosts .iv-sw{background:radial-gradient(circle at 30% 34%,#3d3452 0 5%,transparent 6%),radial-gradient(circle at 46% 34%,#3d3452 0 5%,transparent 6%),radial-gradient(ellipse 26% 32% at 38% 42%,#fff 0 90%,transparent 100%),radial-gradient(circle at 74% 76%,#ff8fab 0 11%,transparent 13%),#f1e8fb}
.iv-d-knit .iv-sw{background:linear-gradient(#c62f36 0 18%,transparent 18% 82%,#c62f36 82%),repeating-linear-gradient(90deg,#2c7a4f 0 3px,#f7eedc 3px 6px)}
.iv-potluck{border-top:1px solid var(--line);padding-top:.875rem}
.iv-potluck h3{margin:0 0 .375rem;font-size:1rem}
.iv-pot-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;margin:.5rem 0 .25rem}
.iv-pot-counts .field{margin:0;min-width:0}
.iv-pot-counts input{width:100%;min-width:0}
.iv-potluck .iv-dl{margin-top:.5rem}
.iv-how{border-top:1px solid var(--line);padding-top:.875rem}
.iv-how h3{margin:0 0 .375rem;font-size:1rem}
.iv-how ol{margin:0;padding-left:1.25rem;font-size:.875rem;line-height:1.5;color:var(--muted)}

@media(min-width:920px){
  .duo.iv-duo{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:none}
  .duo.iv-duo>.pane-result,.duo.iv-duo>.pane-main{grid-area:auto}
  .iv-stage{position:sticky;top:1rem}
  .iv-paper{max-width:24rem}
}
@media(max-width:330px){.iv-two,.iv-three{grid-template-columns:minmax(0,1fr)}.iv-pot-counts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- the guest view (a shared link), full screen ---------- */
.iv-guest{position:fixed;inset:0;z-index:50;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--guest-bg,#1e4b38);color:var(--guest-ink,#fff)}
.iv-guest[hidden]{display:none}
.iv-guest-in{min-height:100%;max-width:30rem;margin:0 auto;padding:max(.75rem,env(safe-area-inset-top)) .875rem max(1.25rem,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.875rem}
.iv-guest-card{display:block;width:100%;max-width:min(100%,calc((100svh - 9.5rem) * 5 / 7));height:auto;margin:0 auto;border-radius:6px;box-shadow:0 20px 50px -18px rgba(0,0,0,.65)}
.iv-guest-acts{display:flex;flex-wrap:wrap;gap:.5rem}
.iv-guest-acts .btn{flex:1 1 10rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;min-height:3rem;font-size:1rem}
.iv-guest-acts .btn[hidden]{display:none}
.iv-guest .btn.ghost{color:inherit;border-color:currentColor;background:transparent}
.iv-guest-facts{margin:0;padding:.75rem .875rem;border-radius:.625rem;background:rgba(255,255,255,.1);display:grid;grid-template-columns:auto minmax(0,1fr);gap:.375rem .75rem;font-size:.9375rem;line-height:1.4}
.iv-guest-facts dt{font-weight:700;opacity:.8}
.iv-guest-facts dd{margin:0;overflow-wrap:anywhere}
.iv-guest-msg{margin:0;font-size:.875rem;text-align:center}
.iv-guest-msg:empty{display:none}
.iv-guest-note{margin:0;font-size:.8125rem;line-height:1.45;opacity:.85;text-align:center}
.iv-guest-own{margin:0;text-align:center;font-size:.875rem}
.iv-guest a{color:inherit}
.iv-guest-on{overflow:hidden}
.iv-wording select{margin-bottom:.375rem}
.iv-all{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;color:var(--muted);cursor:pointer;min-height:2rem}
.iv-all input{margin:0;accent-color:var(--accent)}