/* Guest Album: one look, built from Harris & Aqilah's invitation (linen, wine lettering, florals).
   Pages put theme-ha-florals on <html>; the base tokens below are fallbacks. */

:root {
  --midnight: #0a1d49;      /* guest page background */
  --sapphire: #12357f;      /* raised surfaces, light-page buttons */
  --sapphire-2: #1a4499;
  --pearl: #eef2fb;         /* text on dark */
  --mist: #a3b3d9;          /* quiet text on dark */
  --gold: #d6b56e;          /* thread, primary action on dark */
  --gold-deep: #94742f;     /* gold on light backgrounds */
  --ink: #12265a;           /* text on light */
  --ink-soft: #5b6b93;
  --paper: #f4f6fc;
  --line: #dbe2f2;
  --good: #2f7a57;
  --bad: #b23a3a;

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

}

* { box-sizing: border-box; }
html, body { margin: 0; }
html, body { overflow-x: clip; }   /* decorations bleed past the edges; never scroll sideways */
body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wrap { max-width: 520px; margin: 0 auto; padding: 28px 16px 64px; }

/* ---------- light pages: create + admin ---------- */
.brand { display: flex; justify-content: center; margin-bottom: 22px; }

h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -.01em;
  text-align: center;
  margin: 0 0 10px;
}
.sub { text-align: center; color: var(--ink-soft); margin: 0 auto 28px; max-width: 34em; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
  margin-bottom: 16px;
}
.card h2 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 0 0 14px; }

label { display: block; font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
label:first-child { margin-top: 0; }
.hint { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; font-weight: 400; }

input, select, textarea {
  width: 100%;
  font: inherit;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus { outline: 2px solid var(--sapphire-2); outline-offset: -1px; border-color: transparent; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600;
  padding: 12px 18px;
  border: 0; border-radius: 10px;
  background: var(--sapphire); color: var(--pearl);
  cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { background: var(--sapphire-2); }
button.full { width: 100%; margin-top: 22px; }
button.ghost, .btn.ghost { background: transparent; color: var(--sapphire); box-shadow: inset 0 0 0 1px var(--line); }
button.ghost:hover, .btn.ghost:hover { background: #eaf0fb; }
button:disabled { opacity: .6; cursor: wait; }

.msg { font-size: 14px; margin-top: 12px; min-height: 1em; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--good); }

.linkbox {
  display: flex; gap: 8px; align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 6px 6px 12px;
  margin-top: 8px;
}
.linkbox input.link {
  flex: 1; min-width: 0;
  font: 13px ui-monospace, Menlo, Consolas, monospace;
  padding: 4px 0; border: 0; background: transparent; color: var(--ink);
  text-overflow: ellipsis;
}
.linkbox input.link:focus { outline: none; }
.linkbox button { padding: 7px 12px; font-size: 13px; flex-shrink: 0; }

.warn {
  font-size: 13px;
  background: #fbf6e8;
  border: 1px solid #ecdcae;
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 12px;
}

.cover {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--paper) center / cover no-repeat;
  display: grid; place-items: center;
  color: var(--ink-soft); font-size: 14px;
  margin-bottom: 12px;
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stats div + div { border-left: 1px solid var(--line); }
.stats b { display: block; font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; font-variant-numeric: lining-nums; }
.stats span { font-size: 13px; color: var(--ink-soft); }

.muted { color: var(--ink-soft); font-size: 14px; }
.center { text-align: center; }


/* ---------- guest page ----------
   Every colour comes from these variables; a look (body.theme-*) only redefines them
   and adds its own decoration. Default look: sapphire night. */
body.guest {
  --g-bg: var(--midnight);
  --g-text: var(--pearl);
  --g-muted: var(--mist);
  --g-accent: var(--gold);          /* ornaments, occasion line, links */
  --g-names: var(--pearl);
  --g-btn: var(--gold);             /* primary button fill */
  --g-btn-ink: var(--midnight);
  --g-btn-hover: #e2c489;
  --g-surface: rgba(18, 53, 127, .45);
  --g-surface-2: rgba(238, 242, 251, .06);
  --g-line: rgba(214, 181, 110, .35);
  --g-field: rgba(10, 29, 73, .6);
  --g-field-line: rgba(163, 179, 217, .35);
  --g-tile: var(--sapphire);
  --g-progress: var(--gold);
  --g-good: #7ac9a0;
  --g-err: #ffb4b4;
  background: var(--g-bg);
  color: var(--g-text);
}
body.guest .wrap { padding-top: 0; }
.pre, .deco, .names-mono { display: none; }

.hero { position: relative; text-align: center; padding-top: max(18px, env(safe-area-inset-top)); }
.occasion { color: var(--g-accent); font-size: 15px; letter-spacing: .02em; margin: 28px 0 6px; }
.names {
  position: relative;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 13vw, 60px);
  line-height: 1.02;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--g-names);
}
.names span { display: block; position: relative; }
.names .amp { font-style: italic; font-size: .62em; line-height: 1.25; color: var(--g-accent); }
.when { margin: 16px 0 2px; font-size: 16px; color: var(--g-text); }
.where { margin: 0; font-size: 15px; color: var(--g-muted); }

.arch {
  position: relative;
  width: min(200px, 54vw); aspect-ratio: 5 / 6;
  margin: 26px auto 30px;
  border-radius: 999px 999px 14px 14px;
  background: var(--g-tile) center / cover no-repeat;
  outline: 1px solid var(--g-accent);
  outline-offset: 7px;
  display: grid; place-items: center;
  transition: width .5s ease, margin .5s ease;
}
.arch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--g-line); }
.arch.has-photo .monogram { display: none; }
.monogram { font-family: var(--serif); font-size: 56px; font-style: italic; color: var(--g-accent); letter-spacing: .04em; }
.hero.compact .arch { width: min(132px, 36vw); margin: 22px auto 24px; }
.hero.compact .monogram { font-size: 40px; }
.hero.compact .occasion { margin-top: 22px; }
.hero.compact .names { font-size: clamp(38px, 11vw, 50px); }

@media (prefers-reduced-motion: no-preference) {
  .hero.ready .names, .hero.ready .when, .hero.ready .arch { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero.ready .when { animation-delay: .12s; }
  .hero.ready .arch { animation-delay: .22s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

body.guest .panel {
  margin-top: 28px;
  padding: 24px 20px;
  border: 1px solid var(--g-line);
  border-radius: 18px;
  background: var(--g-surface);
  text-align: center;
}
body.guest .panel h2 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 0 6px; color: var(--g-text); text-wrap: balance; }
body.guest .panel p.lead { margin: 0 0 18px; color: var(--g-muted); font-size: 15px; text-wrap: balance; }
body.guest .panel input {
  background: var(--g-field); color: var(--g-text);
  border: 1px solid var(--g-field-line);
  text-align: center; font-size: 17px;
}
body.guest .panel input::placeholder { color: var(--g-muted); opacity: .75; }
body.guest .panel input:focus { outline: 2px solid var(--g-accent); border-color: transparent; }
body.guest .hint { color: var(--g-muted); }
body.guest .msg.err { color: var(--g-err); }

body.guest button { background: var(--g-btn); color: var(--g-btn-ink); }
body.guest button:hover { background: var(--g-btn-hover); }
body.guest :focus-visible { outline-color: var(--g-accent); }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 12px; }
.action { flex-direction: column; gap: 10px; padding: 22px 12px 20px; border-radius: 16px; font-size: 16px; }
body.guest .action.outline { background: transparent; color: var(--g-accent); box-shadow: inset 0 0 0 1px var(--g-accent); }
body.guest .action.outline:hover { background: var(--g-surface-2); }
.action svg, .wide svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
body.guest .wide { width: 100%; padding: 14px; border-radius: 14px; background: var(--g-surface-2); color: var(--g-text); font-weight: 500; }
body.guest .wide:hover { background: var(--g-surface); }
.wide svg { width: 22px; height: 22px; }

.quality-tip { margin: 10px 4px 0; text-align: center; font-size: 13px; line-height: 1.45; color: var(--g-muted); text-wrap: balance; }

.status {
  margin-top: 16px;
  border: 1px solid var(--g-field-line);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--g-surface);
  text-align: left;
}
.status-text { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
#status-main { font-weight: 600; }
#status-sub { font-size: 13px; color: var(--g-muted); }
.bar { height: 4px; background: var(--g-field-line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--g-progress); transition: width .3s; }
.status.waiting { border-color: var(--g-accent); }
.status.done { border-color: var(--g-good); }
.status.done .bar i { background: var(--g-good); }

/* wishes */
body.guest .wish { margin-top: 26px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--g-surface-2); margin-bottom: 14px; }
body.guest .seg-btn { background: transparent; color: var(--g-muted); padding: 10px; border-radius: 9px; font-weight: 600; }
body.guest .seg-btn.on { background: var(--g-btn); color: var(--g-btn-ink); }
body.guest .seg-btn:hover:not(.on) { background: var(--g-surface); }
body.guest .wish textarea {
  width: 100%; font: inherit; font-size: 16px; line-height: 1.5;
  padding: 12px 13px; border-radius: 12px; resize: vertical; min-height: 110px;
  background: var(--g-field); color: var(--g-text); border: 1px solid var(--g-field-line);
}
body.guest .wish textarea::placeholder { color: var(--g-muted); opacity: .75; }
body.guest .wish textarea:focus { outline: 2px solid var(--g-accent); border-color: transparent; }
body.guest .wish button.full { margin-top: 12px; }
body.guest .rec { width: 100%; padding: 18px; border-radius: 14px; gap: 12px; font-size: 16px; }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.rec.live .rec-dot { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec.live .rec-dot { animation: none; } }
#rec-audio { width: 100%; margin-top: 4px; }
.rec-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
body.guest button.soft { background: transparent; color: var(--g-accent); box-shadow: inset 0 0 0 1px var(--g-accent); }
body.guest button.soft:hover { background: var(--g-surface-2); }
body.guest .wish .msg { margin-top: 10px; }
body.guest .wish .msg.ok { color: var(--g-good); }

.who { text-align: center; font-size: 14px; color: var(--g-muted); margin: 18px 0 0; }
.who b { color: var(--g-text); font-weight: 600; }
.link-btn, body.guest .link-btn {
  background: none; padding: 0; border-radius: 0;
  color: var(--g-accent, var(--sapphire)); font-weight: 500; font-size: inherit;
  text-decoration: underline; text-underline-offset: 3px;
}
body.guest .link-btn:hover { background: none; opacity: .85; }

.gallery-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 44px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--g-line);
}
.gallery-head h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0; color: var(--g-text); }
body.guest .muted { color: var(--g-muted); }
body.guest #empty { padding: 28px 16px; border: 1px dashed var(--g-field-line); border-radius: 14px; color: var(--g-muted); }

.privacy-note { margin: -4px 0 14px; font-size: 13px; color: var(--g-muted); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 -13px; }
.tile, body.guest .tile {
  position: relative; display: block;
  aspect-ratio: 1; padding: 0; border-radius: 3px; overflow: hidden;
  background: var(--g-tile);
}
body.guest .tile:hover { background: var(--g-tile); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.play { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(10, 16, 30, .65); }
.play::after { content: ""; position: absolute; left: 10px; top: 7px; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
body.guest #more { margin-top: 18px; background: transparent; color: var(--g-accent); box-shadow: inset 0 0 0 1px var(--g-accent); }

.foot { margin-top: 48px; }

/* ---------- the look: ivory, champagne frame, brown ink ----------
   Palette and type follow the couple's chosen references: ivory paper, champagne-taupe frames,
   brown-black ink, chocolate lace. Flowers (from Harris & Aqilah's invitation) appear sparingly. */
:root {
  --iv-paper: #faf8f4;
  --iv-paper-2: #f2ede5;
  --iv-ink: #241c18;
  --iv-ink-soft: #6f645c;
  --iv-taupe: #b8aa97;
  --iv-taupe-deep: #8c7e6c;
  --iv-brown: #3a2a22;
  --iv-lace: #412a1f;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --caps: "Cormorant Garamond", Georgia, serif;
  --hand: "Caveat", "Segoe Print", cursive;
}
.theme-ha-florals body.guest {
  --g-bg: var(--iv-paper);
  --g-text: var(--iv-ink);
  --g-muted: var(--iv-ink-soft);
  --g-accent: var(--iv-taupe-deep);
  --g-names: var(--iv-ink);
  --g-btn: var(--iv-brown);
  --g-btn-ink: var(--iv-paper);
  --g-btn-hover: #4d3a30;
  --g-surface: rgba(255, 255, 255, .72);
  --g-surface-2: rgba(58, 42, 34, .05);
  --g-line: rgba(140, 126, 108, .38);
  --g-field: #fff;
  --g-field-line: rgba(58, 42, 34, .2);
  --g-tile: #ebe5dc;
  --g-progress: var(--iv-taupe-deep);
  --g-good: #5b7a4a;
  --g-err: #a3262e;
  background: var(--iv-paper);
  font-family: var(--caps);
  font-size: 18px;
}
.theme-ha-florals body.guest button { font-family: var(--caps); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; border-radius: 4px; }
.theme-ha-florals body.guest .link-btn, .theme-ha-florals body.guest .seg-btn { text-transform: none; letter-spacing: .02em; font-size: 16px; }
.theme-ha-florals body.guest .action { font-size: 13.5px; border-radius: 6px; }
.theme-ha-florals body.guest .wide { font-size: 13.5px; border-radius: 6px; }
.theme-ha-florals body.guest .hint, .theme-ha-florals body.guest .quality-tip, .theme-ha-florals body.guest #status-sub { font-size: 15px; }
.theme-ha-florals body.guest input, .theme-ha-florals body.guest textarea { font-family: var(--caps); font-size: 18px; border-radius: 4px; }

/* flowers around the borders: every corner of the first screen and the foot */
.theme-ha-florals .deco { display: none; position: absolute; pointer-events: none; background: center / contain no-repeat; opacity: .94; }
/* side garlands from the invitation, repeated down both edges of the whole page and scrolling with it */
.theme-ha-florals body.guest::before, .theme-ha-florals body.guest::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: min(140px, 36vw); z-index: 0;
  pointer-events: none; background-repeat: repeat-y; background-size: calc(min(140px, 36vw) / .54) auto; opacity: .96;
}
.theme-ha-florals body.guest::before { left: 0; background-image: url("/themes/ha-florals/garland-left-tile.webp"); background-position: right top; }
.theme-ha-florals body.guest::after { right: 0; background-image: url("/themes/ha-florals/garland-right-tile.webp"); background-position: left top; }
.theme-ha-florals body.guest > main { position: relative; z-index: 1; }
.theme-ha-florals .hero .deco.top { display: none; }
.theme-ha-florals .hero > :not(.deco) { position: relative; z-index: 1; }
.theme-ha-florals .hero .deco.bottom { display: block; bottom: -24px; width: min(70px, 18vw); aspect-ratio: 352 / 585; background-image: url("/themes/ha-florals/corner-bottom.webp"); }
.theme-ha-florals .hero .deco.bottom.left { left: 0; }
.theme-ha-florals .hero .deco.bottom.right { right: 0; transform: scaleX(-1); }
.theme-ha-florals .foot .deco.bottom { display: block; bottom: 0; width: min(88px, 23vw); aspect-ratio: 352 / 585; background-image: url("/themes/ha-florals/corner-bottom.webp"); }
.theme-ha-florals .foot .deco.bottom.left { left: 0; }
.theme-ha-florals .foot .deco.bottom.right { right: 0; transform: scaleX(-1); }
.theme-ha-florals .hero { padding-top: 0; }
.theme-ha-florals .pre {
  display: block; margin: 0; padding-top: 74px;
  font-family: var(--caps); font-weight: 500; text-transform: uppercase; letter-spacing: .24em;
  font-size: 13px; color: var(--iv-ink);
}
.theme-ha-florals .occasion { font-family: var(--caps); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; color: var(--iv-ink-soft); margin: 4px 0 0; }
.theme-ha-florals .names { font-family: var(--script); font-weight: 400; font-size: clamp(50px, 15vw, 66px); line-height: 1.05; letter-spacing: 0; margin: 18px 0 4px; color: var(--iv-ink); }
.theme-ha-florals .names .amp { font-style: normal; font-size: .6em; line-height: 1.2; color: var(--iv-taupe-deep); }
.theme-ha-florals .names-mono { display: none; }
.theme-ha-florals .when, .theme-ha-florals .where { font-family: var(--caps); font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--iv-ink); font-variant-numeric: lining-nums; }
.theme-ha-florals .when { font-size: 13px; margin-top: 12px; }
.theme-ha-florals .where { font-size: 12px; margin-top: 4px; color: var(--iv-ink-soft); }
.theme-ha-florals .arch { display: none; }
.theme-ha-florals .arch.has-photo { display: grid; border-radius: 4px; outline: 1px solid var(--iv-taupe); outline-offset: 6px; background-color: var(--iv-paper-2); }
.theme-ha-florals .arch::after { box-shadow: inset 0 0 0 1px rgba(140, 126, 108, .35); }
.theme-ha-florals .hero::after { content: ""; display: block; height: 18px; }
.theme-ha-florals .hero.compact .pre { padding-top: 60px; }
.theme-ha-florals .hero.compact .occasion { margin-top: 4px; }
.theme-ha-florals .hero.compact .names { font-size: clamp(44px, 13vw, 56px); margin-top: 12px; }
.theme-ha-florals body.guest .panel { border-radius: 6px; border-color: var(--g-line); }
.theme-ha-florals body.guest .panel h2 { font-family: var(--script); font-size: 38px; line-height: 1.15; letter-spacing: 0; }
.theme-ha-florals body.guest .wish h2 { font-size: 34px; }
.theme-ha-florals .gallery-head h2 { font-family: var(--script); font-size: 38px; letter-spacing: 0; }
.theme-ha-florals .foot { position: relative; height: 170px; margin-top: 40px; }
.theme-ha-florals .foot-mark {
  display: block; position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  width: 124px; aspect-ratio: 289 / 63;
  background: url("/themes/ha-florals/jazakallah.webp") center / contain no-repeat;
  filter: grayscale(1) sepia(.35) brightness(.55); opacity: .85;
}
.foot-mark { display: none; }

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-head .link-btn { color: var(--sapphire); font-size: 14px; }
.wishes { display: flex; flex-direction: column; gap: 10px; }
.wish-item { padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.wish-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 14px; }
.wish-head time { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }
.wish-body { margin: 0; white-space: pre-wrap; line-height: 1.55; }
.wish-item audio { width: 100%; height: 40px; }

.print-links { display: flex; flex-direction: column; gap: 8px; }
.print-links .btn { justify-content: flex-start; }

/* ---------- create page ---------- */
.theme-ha-florals body.create, .theme-ha-florals body.admin {
  font-variant-numeric: lining-nums;
  --ink: var(--iv-ink); --ink-soft: var(--iv-ink-soft); --line: rgba(140, 126, 108, .3);
  --sapphire: var(--iv-brown); --sapphire-2: #4d3a30; --paper: var(--iv-paper-2);
  background: var(--iv-paper); font-family: var(--caps); font-size: 17px;
}
.theme-ha-florals body.create h1 { font-family: var(--script); font-weight: 400; font-size: 52px; }
.theme-ha-florals body.create .card h2, .theme-ha-florals body.admin .card h2 { font-family: var(--script); font-weight: 400; font-size: 32px; }
.theme-ha-florals body.create .card, .theme-ha-florals body.admin .card { background: #fff; border-color: rgba(140, 126, 108, .3); border-radius: 6px; }
.theme-ha-florals body.create button, .theme-ha-florals body.create .btn,
.theme-ha-florals body.admin button, .theme-ha-florals body.admin .btn { font-family: var(--caps); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 13.5px; border-radius: 4px; }
.theme-ha-florals body.admin .link-btn { text-transform: none; letter-spacing: 0; font-size: 15px; }
.theme-ha-florals body.create input, .theme-ha-florals body.create select, .theme-ha-florals body.create textarea,
.theme-ha-florals body.admin input, .theme-ha-florals body.admin select, .theme-ha-florals body.admin textarea { font-family: var(--caps); font-size: 17px; border-radius: 4px; }
.theme-ha-florals body.admin .linkbox input.link { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* ---------- admin page ---------- */
.admin-hero { position: relative; text-align: center; }
.admin-label { margin: 0 0 6px; font-size: 13px; color: var(--ink-soft); }
.theme-ha-florals body.admin .wrap { padding-top: 0; }
.theme-ha-florals body.admin .admin-hero { padding-top: 70px; margin-bottom: 26px; }
.theme-ha-florals body.admin .admin-hero .deco.top.right {
  display: block; position: absolute; top: -8px; right: -30px; width: min(104px, 27vw); aspect-ratio: 292 / 331;
  background: url("/themes/ha-florals/corner-top.webp") center / contain no-repeat; transform: scaleX(-1);
}
.theme-ha-florals body.admin .admin-hero .deco.top.left {
  display: block; position: absolute; top: -8px; left: -30px; width: min(104px, 27vw); aspect-ratio: 292 / 331;
  background: url("/themes/ha-florals/corner-top.webp") center / contain no-repeat;
}
.theme-ha-florals body.admin .admin-label { font-family: var(--caps); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; color: var(--ink); }
.theme-ha-florals body.admin h1 { font-family: var(--script); font-weight: 400; font-size: clamp(46px, 13vw, 58px); line-height: 1.1; color: var(--ink); padding: 8px 0 4px; margin: 0; }
.theme-ha-florals body.admin .sub { font-family: var(--caps); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); margin-top: 8px; }
.theme-ha-florals body.admin .stats b { font-family: var(--caps); font-weight: 500; font-size: 32px; }
.theme-ha-florals body.admin .cover { background-color: var(--iv-paper-2); }
.theme-ha-florals body.admin button.ghost:hover, .theme-ha-florals body.admin .btn.ghost:hover { background: rgba(58, 42, 34, .05); }

/* ---------- entrance: frame with slot -> instant photo -> lace envelope letter ----------
   Sequenced in guest.js with the Web Animations API; resting styles are each scene's finished state. */
.entrance {
  position: fixed; inset: 0; z-index: 40; overflow-y: auto; overscroll-behavior: contain;
  background: var(--iv-paper); color: var(--iv-ink); font-family: var(--caps);
}
.entrance.leaving { opacity: 0; transform: translateY(-10px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.ent-scene {
  position: relative; min-height: 100%; width: 100%; max-width: 440px; margin: 0 auto;
  padding: max(26px, env(safe-area-inset-top)) 16px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.ent-flower { position: absolute; pointer-events: none; background: center / contain no-repeat; opacity: .94; }
.ent-flower.tl, .ent-flower.tr { top: 0; height: 100%; max-height: 980px; width: auto; aspect-ratio: 162 / 975; background-size: auto 100%; }
.ent-flower.tl { left: 0; background-image: url("/themes/ha-florals/garland-left-tile.webp"); background-position: right top; }
.ent-flower.tr { right: 0; background-image: url("/themes/ha-florals/garland-right-tile.webp"); background-position: left top; }
.ent-scene > :not(.ent-flower) { position: relative; z-index: 1; }
.ent-flower.bl, .ent-flower.br { bottom: 0; width: 88px; z-index: 1; aspect-ratio: 352 / 585; background-image: url("/themes/ha-florals/corner-bottom.webp"); }
.ent-flower.bl { left: 0; }
.ent-flower.br { right: 0; transform: scaleX(-1); }
.entrance { overflow-x: hidden; }
.ent-pre { margin: 0; font-weight: 500; font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--iv-ink); }
.ent-names { margin: 8px 0 18px; font-family: var(--script); font-weight: 400; font-size: clamp(42px, 12.5vw, 54px); line-height: 1.1; color: var(--iv-ink); }

.ent-frame-wrap { position: relative; width: 260px; height: 360px; flex-shrink: 0; }
.ent-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(60, 45, 30, .22)); }
.ent-slot-clip { position: absolute; left: 76px; top: 66px; width: 108px; height: 262px; overflow: hidden; pointer-events: none; }
.ent-photo {
  width: 104px; height: 166px; margin-left: 2px; padding: 8px 8px 0; background: #fbfaf6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 6px 14px rgba(40, 30, 20, .22);
  transform: translateY(-172px); display: flex; flex-direction: column;
}
.ent-photo.out { transform: translateY(8px); }
.ent-photo-img { position: relative; width: 88px; height: 118px; background: #2e2622 center / cover no-repeat; overflow: hidden; }
.ent-photo-img.no-photo { display: grid; place-items: center; background: var(--iv-taupe); }
.ent-photo-img.no-photo::before { content: attr(data-initials); font-family: var(--script); font-size: 34px; color: #fff; }
.ent-chem { position: absolute; inset: 0; opacity: 0; background: radial-gradient(120% 90% at 40% 35%, #6a5848 0%, #3a2f29 55%, #231d1a 100%); }
.ent-photo-date { margin-top: auto; height: 32px; display: grid; place-items: center; font-size: 9.5px; letter-spacing: .14em; color: #7d7062; }


.theme-ha-florals body.guest .ent-knob, .ent-knob {
  position: absolute; left: 116px; top: 287px; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f6f1e8 0%, #c9bcab 45%, #8a7d6c 100%);
  box-shadow: 0 0 0 3px #a29688, 0 0 0 4px #e6ded2, 0 3px 6px rgba(40, 30, 20, .35);
  cursor: pointer;
}
.theme-ha-florals body.guest .ent-knob:hover { background: radial-gradient(circle at 35% 30%, #fffaf2 0%, #d2c6b6 45%, #8a7d6c 100%); }
.ent-knob:focus-visible { outline: 2px solid var(--iv-brown); outline-offset: 6px; }
.theme-ha-florals body.guest .ent-knob.pressed { transform: scale(.88); box-shadow: 0 0 0 3px #a29688, 0 0 0 4px #e6ded2, inset 0 2px 4px rgba(40, 30, 20, .4); }
.theme-ha-florals body.guest .ent-knob.nudge { animation: knob-nudge 1.6s ease-in-out infinite; }
@keyframes knob-nudge { 0%, 100% { box-shadow: 0 0 0 3px #a29688, 0 0 0 4px #e6ded2, 0 3px 6px rgba(40, 30, 20, .35); } 50% { box-shadow: 0 0 0 3px #a29688, 0 0 0 4px #e6ded2, 0 0 0 12px rgba(184, 170, 151, .35); } }
.ent-hint { margin: 22px 0 0; font-weight: 600; font-size: 12.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--iv-ink); }

/* envelope scene: the lace envelope from the reference photo, cut into a back and a front pocket */
.env { --ew: min(340px, calc(100vw - 44px)); position: relative; width: var(--ew); height: calc(var(--ew) * 1.12); flex-shrink: 0; }
.env-back, .env-front { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; display: block; pointer-events: none; user-select: none; }
.env-back { z-index: 1; filter: drop-shadow(0 12px 20px rgba(40, 25, 15, .22)); }
.env-front { z-index: 3; filter: drop-shadow(0 -3px 4px rgba(30, 18, 10, .3)); }
.env-clip { position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: calc(var(--ew) * .034); overflow: hidden; }
.env-letter {
  position: absolute; left: calc(var(--ew) * .149); width: calc(var(--ew) * .73); bottom: calc(var(--ew) * .303);
  padding: 22px 20px calc(var(--ew) * .25); background: #f5f0e7; text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 8px 18px rgba(40, 25, 15, .16);
  font-family: var(--hand); font-weight: 500; font-size: 21px; line-height: 1.38; color: #2a201b;
}
.env-letter p { margin: 0 0 10px; }
.env-letter .l-body { white-space: pre-line; }
.env-letter .l-sign { margin: 16px 0 0; }
.env-letter .l-names { margin: 2px 0 0; font-family: var(--script); font-weight: 400; font-size: 29px; line-height: 1.15; }
.env-letter .w { display: inline; }
.ent-enter-wrap { width: 100%; max-width: 320px; margin-top: 26px; }
body.guest .ent-enter-wrap button.full { margin-top: 0; }
.ent-skip {
  position: fixed; z-index: 41; right: 14px; bottom: max(14px, env(safe-area-inset-bottom));
  background: transparent !important; color: var(--iv-ink-soft) !important; padding: 8px 10px !important;
  font-size: 12px !important; letter-spacing: .2em !important; box-shadow: none !important;
}

/* ---------- viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 50;
  background: #06122e;
  display: flex; align-items: center; justify-content: center;
}
.theme-ha-florals .viewer { background: #1d1613; }
.v-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 60px 0 68px; }
.v-stage img, .v-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
body.guest .v-close, body.guest .v-nav, .v-close, .v-nav {
  position: absolute; z-index: 2;
  background: rgba(6, 10, 20, .6); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  font-size: 28px; line-height: 1; font-weight: 400;
}
.v-close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
body.guest .v-delete, .v-delete {
  position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 14px; border-radius: 22px;
  background: rgba(6, 10, 20, .6); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.v-delete svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.guest .v-delete.armed { background: #b3261e; box-shadow: none; }
body.guest .v-delete:hover { background: rgba(6, 10, 20, .75); }
body.guest .v-delete.armed:hover { background: #c62f26; }
.v-nav { top: 50%; transform: translateY(-50%); }
.v-prev { left: 8px; }
.v-next { right: 8px; }
.v-nav:disabled { opacity: .25; cursor: default; }
.v-caption {
  position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom));
  text-align: center; color: rgba(255, 255, 255, .7); font-size: 14px;
}
.v-caption b { color: #fff; font-weight: 600; }

.toast {
  position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  max-width: 488px; margin: 0 auto;
  background: var(--g-text, var(--ink)); color: var(--g-bg, #fff);
  padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}

.hidden { display: none !important; }

/* garland-friendly readability */
.theme-ha-florals body.guest { --g-surface: #fdfcf9; }
.theme-ha-florals body.guest .hero .pre, .theme-ha-florals body.guest .occasion, .theme-ha-florals body.guest .names,
.theme-ha-florals body.guest .when, .theme-ha-florals body.guest .where, .theme-ha-florals body.guest .gallery-head h2,
.theme-ha-florals body.guest .hint, .theme-ha-florals body.guest .quality-tip, .theme-ha-florals body.guest .who,
.ent-pre, .ent-names, .ent-hint {
  text-shadow: 0 0 3px #faf8f4, 0 0 3px #faf8f4, 0 0 6px #faf8f4, 0 0 10px #faf8f4, 0 0 16px #faf8f4, 0 0 24px #faf8f4;
}
.theme-ha-florals body.guest .occasion { color: #4f453e; }

/* admin + create pages: the same side garlands as the guest page, on the first screen */
.theme-ha-florals body.admin::before, .theme-ha-florals body.admin::after,
.theme-ha-florals body.create::before, .theme-ha-florals body.create::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: min(140px, 36vw); z-index: 0;
  pointer-events: none; background-repeat: repeat-y; background-size: calc(min(140px, 36vw) / .54) auto; opacity: .96;
}
.theme-ha-florals body.admin::before, .theme-ha-florals body.create::before { left: 0; background-image: url("/themes/ha-florals/garland-left-tile.webp"); background-position: right top; }
.theme-ha-florals body.admin::after, .theme-ha-florals body.create::after { right: 0; background-image: url("/themes/ha-florals/garland-right-tile.webp"); background-position: left top; }
.theme-ha-florals body.admin > main, .theme-ha-florals body.create > main { position: relative; z-index: 1; }
.theme-ha-florals body.admin .admin-hero .deco.top { display: none !important; }
.theme-ha-florals body.admin .admin-hero, .theme-ha-florals body.create .wrap > h1, .theme-ha-florals body.create .wrap > .sub,
.theme-ha-florals body.admin .admin-hero * {
  text-shadow: 0 0 3px #faf8f4, 0 0 3px #faf8f4, 0 0 6px #faf8f4, 0 0 10px #faf8f4, 0 0 16px #faf8f4, 0 0 24px #faf8f4;
}
.theme-ha-florals body.admin .admin-hero .sub, .theme-ha-florals body.admin .admin-label { color: #4f453e; }
.theme-ha-florals body.admin .admin-hero { padding-top: 64px; }
.theme-ha-florals body.admin .link, .theme-ha-florals body.create .link { font-family: var(--caps); font-size: 16px; letter-spacing: .01em; }

/* readability over the garlands: every box and every line of small text sits on solid paper */
.theme-ha-florals body.guest .action.outline,
.theme-ha-florals body.admin .ghost, .theme-ha-florals body.create .ghost,
.theme-ha-florals body.admin input.link, .theme-ha-florals body.create input.link { background: #fff; }
.theme-ha-florals body.guest .wide, .theme-ha-florals body.guest .seg { background: #f1ece4; }
.theme-ha-florals body.guest #empty { background: #fff; }
.theme-ha-florals body.guest .quality-tip, .theme-ha-florals body.guest .who, .theme-ha-florals body.guest #status:not(.hidden),
.theme-ha-florals body.guest #privacy-note:not(.hidden) {
  background: #fff; border: 1px solid rgba(140, 126, 108, .3); border-radius: 6px; padding: 10px 14px; text-shadow: none;
}
.theme-ha-florals body.guest .gallery-head {
  background: #fff; border: 1px solid rgba(140, 126, 108, .3); border-radius: 6px; padding: 8px 16px;
}
.theme-ha-florals body.guest .gallery-head h2 { text-shadow: none; }
.theme-ha-florals body.guest #more { background: #fff; }
/* short phones (iPhone SE and similar): smaller envelope so "Enter the album" stays on screen */
@media (max-height: 700px) {
  .env { --ew: min(300px, calc(100vw - 44px)); }
  .env-letter { font-size: 19px; padding-top: 16px; }
  .env-letter .l-names { font-size: 26px; }
  .ent-enter-wrap { margin-top: 18px; }
  .ent-scene { padding-bottom: 24px; }
}
.ent-skip { background: #fdfcf9 !important; border: 1px solid rgba(140, 126, 108, .35) !important; border-radius: 999px !important; padding: 7px 14px !important; color: var(--iv-ink) !important; }

/* admin: photo-booth strip slots */
.strip-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.strip-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.admin .strip-pick, .theme-ha-florals body.admin .strip-pick {
  width: 100%; aspect-ratio: 78 / 56; padding: 0; border-radius: 4px; cursor: pointer;
  background: #f4efe7 center / cover no-repeat; border: 1.5px dashed rgba(140, 126, 108, .55); box-shadow: none;
  color: var(--iv-ink-soft, #6f645c); font-size: 13px; letter-spacing: .04em; text-transform: none;
}
body.admin .strip-pick.has-photo { border: 4px solid #fff; box-shadow: 0 0 0 1px rgba(140, 126, 108, .4), 0 3px 8px rgba(40, 30, 20, .15); }
body.admin .strip-pick.has-photo span { display: none; }
.strip-remove { font-size: 14px; }

/* entrance: photo-booth strip version of the instant photo */
.ent-photo.strip { width: 88px; height: auto; margin-left: 10px; padding: 5px 5px 0; gap: 4px; transform: translateY(-212px); }
.ent-photo.strip .ent-cell { width: 78px; height: 56px; flex: none; }
.ent-photo.strip .ent-photo-date { height: 20px; font-size: 8.5px; letter-spacing: .12em; }

/* admin: photo cropper */
.crop { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(36, 28, 24, .72); }
.crop.hidden { display: none; }
.crop-box { width: min(440px, 100%); background: #fdfcf9; border-radius: 8px; padding: 20px 18px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.crop-box h3 { margin: 0 0 4px; font-family: var(--script, cursive); font-weight: 400; font-size: 30px; color: var(--iv-ink, #241c18); }
.crop-box .hint { margin: 0 0 14px; }
.crop-stage {
  position: relative; width: 100%; overflow: hidden; touch-action: none; cursor: grab; background: #2a221d;
  border: 6px solid #fff; box-shadow: 0 0 0 1px rgba(140, 126, 108, .45), 0 6px 16px rgba(40, 30, 20, .2); border-radius: 2px;
}
.crop-stage:active { cursor: grabbing; }
.crop-stage:focus-visible { outline: 2px solid var(--iv-brown, #3a2a22); outline-offset: 3px; }
.crop-stage img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.crop-zoom-label { display: block; margin: 14px 0 2px; font-size: 14px; }
#crop-zoom { width: 100%; accent-color: var(--iv-brown, #3a2a22); }
.crop-actions { display: flex; gap: 10px; margin-top: 16px; }
.crop-actions button { flex: 1; margin: 0; }
.theme-ha-florals body.admin #crop-zoom, body.admin #crop-zoom { border: 0; padding: 0; background: transparent; box-shadow: none; height: 28px; min-height: 0; }

/* letter in the same plain serif as the rest of the guest page; names stay in script */
.env-letter { font-family: var(--caps); font-weight: 500; font-size: 19px; line-height: 1.45; letter-spacing: 0; }
.env-letter .l-greet, .env-letter .l-sign { font-style: italic; }
@media (max-height: 700px) { .env-letter { font-size: 17.5px; } }

/* footer: brand line in the same serif */
.foot-brand {
  position: absolute; left: 50%; bottom: 26px; width: min(250px, 66vw); transform: translateX(-50%); line-height: 0;
}
.foot-brand svg { width: 100%; height: auto; display: block; }
.foot-brand.admin-brand { position: relative; left: auto; bottom: auto; transform: none; margin: 28px auto 12px; width: min(220px, 60vw); }
.theme-ha-florals body.guest, .theme-ha-florals body.admin, .theme-ha-florals body.create { position: relative; }
.theme-ha-florals .foot .deco.bottom { display: none; }

/* entrance screens: exactly the same repeating garland borders as the guest page */
.ent-flower.tl, .ent-flower.tr { top: 0; bottom: 0; height: auto; max-height: none; aspect-ratio: auto; width: min(140px, 36vw); background-repeat: repeat-y; background-size: calc(min(140px, 36vw) / .54) auto; opacity: .96; }
.ent-flower.bl, .ent-flower.br { display: none; }
.theme-ha-florals .hero .deco.bottom { display: none; }
.theme-ha-florals body.guest .hero .pre { padding-top: 118px; }


/* the Made of Memories mark on the entrance screens */
.ent-brand { width: 140px; margin-top: 18px; line-height: 0; flex-shrink: 0; }
.ent-brand svg { width: 100%; height: auto; display: block; }
@media (max-height: 760px) {
  .ent-brand { width: 112px; margin-top: 10px; }
  .env { --ew: min(280px, calc(100vw - 44px)); }
  .ent-scene { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: 16px; }
  .ent-names { margin-bottom: 12px; }
}

/* ---------- ivory theme: the plain lace look (demo album and other couples) ----------
   Same layout as the florals look, but every piece of the invitation artwork is swapped for an original lace edge. */
.theme-ivory body.guest::before, .theme-ivory body.guest::after,
.theme-ivory body.admin::before, .theme-ivory body.admin::after,
.theme-ivory body.create::before, .theme-ivory body.create::after,
.theme-ivory .ent-flower.tl, .theme-ivory .ent-flower.tr {
  width: 44px; background-image: url("/brand/lace-edge.svg"); background-size: 44px 36px; background-position: left top; background-repeat: repeat-y; opacity: 1;
}
.theme-ivory body.guest::after, .theme-ivory body.admin::after, .theme-ivory body.create::after, .theme-ivory .ent-flower.tr { transform: scaleX(-1); }
.theme-ivory .hero .deco, .theme-ivory .foot .deco, .theme-ivory .ent-flower.bl, .theme-ivory .ent-flower.br, .theme-ivory .admin-hero .deco { display: none !important; }
.theme-ivory body.guest .hero .pre { padding-top: 64px; }

/* demo album note + footer link to the website */
.theme-ha-florals body.guest .demo-note {
  position: relative; z-index: 1; margin: 6px 0 22px; padding: 12px 16px; text-align: center; font-size: 15px; line-height: 1.5;
  background: #fff; border: 1px solid rgba(140, 126, 108, .35); border-radius: 6px; color: var(--iv-ink);
}
.demo-note a { color: inherit; }
.theme-ha-florals .foot { height: 210px; }
.foot-brand a { display: block; color: inherit; text-decoration: none; line-height: 1.3; }
.foot-brand .foot-cta { display: block; margin-top: 10px; font-family: var(--caps); font-size: 15px; letter-spacing: .04em; color: var(--iv-ink-soft); text-align: center; }
.foot-brand a:hover .foot-cta, .foot-brand a:focus-visible .foot-cta { color: var(--iv-ink); text-decoration: underline; text-underline-offset: 3px; }

/* no blue tap flash on phones; keyboard users still get a focus outline */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }