/* create.css — Create-a-gift page: two-column form + live preview, then ticket. */

.create-main{padding:24px 28px 88px}
.create-head{max-width:var(--maxw);margin:0 auto;padding:24px 0 8px}
.create-head h1{margin-bottom:12px}
.create-head .lede{max-width:52ch}

.create-grid{
  max-width:var(--maxw);margin:40px auto 0;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;
}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
.form-card h2{margin-bottom:20px;font-size:26px}

/* live gift preview */
.gift-preview{position:sticky;top:96px}
.gift-card{
  position:relative;background:var(--ink);color:var(--cream);border-radius:var(--radius);
  padding:36px 32px;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:var(--shadow);overflow:hidden;
}
.gift-card .gc-top{display:flex;justify-content:space-between;align-items:flex-start}
.gift-card .gc-brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:16px;color:rgba(250,245,236,.8)}
.gift-card .gc-brand .gc-logo{width:19px;height:19px;flex:none;color:var(--orange-bright)}
.gift-card .gc-btc{
  font-family:var(--mono);font-size:15px;color:var(--orange-bright);
  background:rgba(255,128,0,.15);border-radius:999px;padding:4px 12px;
  /* keep clear of the decorative ribbon (right:28px, 24px wide) + bow (right:20px, 40px) */
  margin-right:56px;white-space:nowrap;
}
.gift-card .gc-amount{font-family:var(--serif);font-size:clamp(34px,4vw,46px);font-weight:600;color:var(--paper);margin:20px 0 6px}
.gift-card .gc-amount .unit{font-size:20px;color:rgba(250,245,236,.6)}
/* Sats echo, shown only when the gifter typed BTC or USD — sats are what actually
   gets locked, so they are always surfaced. */
.gift-card .gc-sats{font-family:var(--mono);font-size:14px;color:rgba(250,245,236,.62);margin:-2px 0 8px}
.gift-card .gc-sats[hidden]{display:none}
.gift-card .gc-msg{font-size:16px;color:rgba(250,245,236,.82);font-style:italic;max-width:30ch}
.gift-card .gc-ribbon{
  position:absolute;top:0;right:28px;width:24px;height:100%;background:var(--orange);
}
.gift-card .gc-bow{
  position:absolute;top:-6px;right:20px;width:40px;height:40px;border-radius:50%;
  background:var(--gold);
}
.gift-card .gc-foot{
  display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(250,245,236,.55);
  /* clear the decorative ribbon (right:28px, 24px wide) — without this the right-hand
     label ("Timelocked") runs underneath it and is clipped. Matches .gc-btc's 56px. */
  padding-right:24px;
}
.gift-preview .pv-hint{margin-top:16px;text-align:center}

/* ticket result */
.ticket{
  max-width:var(--maxw);margin:0 auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px;box-shadow:var(--shadow);
}
.ticket h2{margin-bottom:8px}
.ticket .lede{margin-bottom:24px}
.qr{background:#fff;display:inline-block;padding:12px;border:1px solid var(--line);border-radius:12px}
.qr canvas{display:block}
.ticket dl{margin:28px 0}
.ticket dt{font-weight:600;font-size:14px;margin-top:18px;color:var(--ink-soft)}
.ticket dt:first-child{margin-top:0}
.ticket dd{margin-top:4px}
.dd-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.mono.secret{cursor:pointer;background:var(--cream);border-radius:8px;padding:10px 14px;display:inline-block;word-break:break-all}
.mono.secret.revealed{background:var(--orange-soft)}
/* secretField renders a real <button> so the reveal is keyboard-operable (WCAG
   2.1.1 / 4.1.2). Neutralise ONLY the UA button chrome — font-family, font-size,
   background and padding keep coming from .mono and .mono.secret, so the look is
   unchanged. Do not add `font: inherit` here: at this specificity it would beat
   .mono{font-family,font-size} in tokens.css and break the mono type. */
button.mono.secret{border:0;text-align:left;cursor:pointer}
.advanced{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
.advanced summary{cursor:pointer;font-weight:600;color:var(--ink-soft)}

/* network warning */
#mainnet-warning{margin:0 0 20px}

/* "testnet4 lives in geek mode" pointer under the network toggle.
   --orange-ink (#B05700) = 4.91:1 on --paper; --orange-deep would be 3.89:1 and fail AA at 14px. */
.net-adv{margin-top:10px}
.net-adv a{color:var(--orange-ink);text-decoration:underline;text-underline-offset:2px}
.net-adv a:hover{color:var(--orange-deep)}

/* ---------- Printable greeting card (quarter-fold, print only) ---------- */