/* =====================================================================
   SK Wedding Sites — "Cinematic gold" layer  (v1 · Oct 2026)
   Load AFTER builder.css on: builder.html and the guest page.
   Nothing here changes behaviour; it restyles existing classes only.

   Rule (same as the SK design system):
   - Chrome  = the frame around the work (top bar, rail background, stage,
               headings). Keeps the SK Wedding Sites look: warm black,
               Sinoreta wordmark, mono labels where they are navigation.
   - Glass UI = anything people fill in, tap or pick (fields, toggles,
               choice cards, buttons, panels, the RSVP form). Frosted glass,
               Geist type, gold for the main action and selected states.
   ===================================================================== */
:root{
  --skc-ui:"Geist",-apple-system,system-ui,sans-serif;
  --skc-gold:#D3AC33; --skc-gold-300:#E6C766; --skc-gold-700:#A07F1E;
  --skc-gold-rim:rgba(211,172,51,.45); --skc-gold-wash:rgba(211,172,51,.10); --skc-gold-glow:rgba(211,172,51,.16);
  --skc-on-gold:#1A1410;
  --skc-glass:rgba(255,255,255,.055); --skc-glass-2:rgba(255,255,255,.085); --skc-glass-line:rgba(255,255,255,.11);
  --skc-field:rgba(255,255,255,.055); --skc-field-line:rgba(255,255,255,.15);
  --skc-text-ui:#D9CFC4; --skc-muted:#B8ADA4; --skc-faint:#8F837C;
  --skc-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 44px rgba(0,0,0,.38);
  --skc-gold-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 22px rgba(211,172,51,.22);
}

/* =====================================================================
   1 · BUILDER
   ===================================================================== */
.app :focus-visible{outline:2px solid var(--skc-gold);outline-offset:2px}

/* --- top bar (chrome) --- */
.app .topbar{background:#100D0B;padding:12px 20px;gap:14px}
.app .topbar .turl{background:var(--skc-glass);border-color:var(--skc-glass-line);font-size:12.5px}
/* segmented toggles: glass track, gold selected */
.app .seg-toggle{background:var(--skc-glass);border-color:var(--skc-glass-line);padding:3px}
.app .seg-toggle button{font:500 13.5px var(--skc-ui);letter-spacing:0;text-transform:none;padding:8px 15px;min-height:36px;color:var(--skc-text-ui)}
.app .seg-toggle button:hover{color:#F3ECDD}
.app .seg-toggle button.on{background:rgba(255,255,255,.14);color:#F3ECDD;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}

/* buttons: Geist, sentence case, pill */
.app .btn{font:600 14px var(--skc-ui);letter-spacing:0;text-transform:none;padding:10px 18px;min-height:40px;justify-content:center}
.app .btn.sm{font-size:13.5px;padding:8px 15px;min-height:38px}
.app .btn.gold{background:var(--skc-gold);color:var(--skc-on-gold);box-shadow:var(--skc-gold-shadow)}
.app .btn.gold:hover{background:var(--skc-gold-300);transform:none}
.app .btn.gold:active{background:var(--skc-gold-700)}
.app .btn.ghost{background:var(--skc-glass);border-color:var(--skc-glass-line);color:#F3ECDD}
.app .btn.ghost:hover{background:var(--skc-glass-2);border-color:var(--skc-gold-rim);color:#F3ECDD}

/* --- rail (chrome background, glass controls) --- */
.app .rail{background:#0D0A08}
.app .rail-tabs{padding:12px 12px 12px;gap:4px;border-bottom:1px solid var(--line)}
.app .rail-tab{font:500 13.5px var(--skc-ui);letter-spacing:0;text-transform:none;border-radius:999px;padding:8px 13px;min-height:36px;color:var(--skc-text-ui)}
.app .rail-tab:hover{color:#F3ECDD;background:rgba(255,255,255,.04)}
.app .rail-tab.on{background:var(--skc-gold);color:var(--skc-on-gold);font-weight:600}
.app .rail-expand{width:36px;height:36px;border-radius:999px;background:var(--skc-glass);border-color:var(--skc-glass-line)}
.app .rail-body{padding:18px 16px 60px}

/* accordion sections become glass cards */
.app .acc-sec{background:var(--skc-glass);border-color:var(--skc-glass-line);border-radius:20px;box-shadow:var(--skc-shadow);margin-bottom:12px}
.app .acc-head{padding:16px 18px;min-height:64px}
.app .acc-head:hover{background:rgba(255,255,255,.025)}
.app .acc-t{font:600 16px var(--skc-ui);color:#F3ECDD}
.app .acc-s{font:400 13px var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-muted);margin-top:3px}
.app .acc-chev{color:var(--skc-gold-300)}
.app .acc-body{padding:2px 18px 20px}
.app .acc-lbl{font:500 13px var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-text-ui)}

/* fields */
.app .fld > label,.app .lm .fld label{font:500 13.5px var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-text-ui)}
.app .fld input[type=text],.app .fld input[type=date],.app .fld input[type=time],.app .fld input[type=email],.app .fld input[type=number],.app .fld select,.app .fld textarea,
.app .lm .fld input,.app .ct-fontsel{background:var(--skc-field);border:1px solid var(--skc-field-line);border-radius:14px;padding:12px 14px;min-height:46px;font:400 15.5px var(--skc-ui);color:#F3ECDD;color-scheme:dark;transition:border-color .15s,box-shadow .15s}
.app .fld input:focus,.app .fld select:focus,.app .fld textarea:focus,.app .lm .fld input:focus,.app .ct-fontsel:focus{outline:none;border-color:var(--skc-gold);box-shadow:0 0 0 4px var(--skc-gold-glow)}
.app .fld .hint{font:400 12.5px/1.5 var(--skc-ui);letter-spacing:0;color:var(--skc-faint)}
.app .ct-c{font:500 12.5px var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-text-ui)}
.app .ct-c input{background:var(--skc-field);border-color:var(--skc-field-line);border-radius:12px;height:38px}

/* toggles */
.app .toggle-row{border-top-color:rgba(255,255,255,.06);padding:14px 0}
.app .toggle-row .tl .t{font:500 15px var(--skc-ui)}
.app .toggle-row .tl .d{font:400 12.5px/1.45 var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-muted)}
.app .sw{width:46px;height:28px;background:rgba(255,255,255,.1);border-color:var(--skc-field-line)}
.app .sw::after{top:3px;left:3px;width:20px;height:20px;background:#D9CFC4}
.app .sw.on{background:var(--skc-gold);border-color:var(--skc-gold)}
.app .sw.on::after{transform:translateX(18px);background:var(--skc-on-gold)}

/* choice cards: theme, layout, two-up options, fonts */
.app .theme-card,.app .lay-card,.app .seg2-b,.app .font-opt{background:var(--skc-glass);border-color:var(--skc-glass-line);border-radius:16px}
.app .theme-card:hover,.app .lay-card:hover,.app .seg2-b:hover,.app .font-opt:hover{border-color:rgba(255,255,255,.22)}
.app .theme-card.on,.app .lay-card.on,.app .seg2-b.on,.app .font-opt.on{border-color:var(--skc-gold);background:var(--skc-gold-wash);box-shadow:inset 0 0 0 1px var(--skc-gold)}
.app .theme-card .tc-prev{border-radius:12px;margin:6px 6px 0}
.app .theme-card .tc-name,.app .lay-card .lay-d,.app .seg2-b .s2-d,.app .font-opt .fo-tag{font:400 12.5px/1.4 var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-muted)}
.app .theme-card .tc-name{font-weight:500;color:var(--skc-text-ui)}
.app .theme-card.on .tc-name,.app .lay-card.on .lay-n,.app .seg2-b.on .s2-t{color:var(--skc-gold-300)}
.app .lay-card .lay-n,.app .seg2-b .s2-t{font:600 15px var(--skc-ui)}
.app .lay-card.on .lay-ic{color:var(--skc-gold-300)}

/* pill choices (corners, motion, rsvp mode …) */
.app .seg-b{font:500 13.5px var(--skc-ui);letter-spacing:0;text-transform:none;min-height:38px;padding:8px 14px;border-color:var(--skc-field-line);background:rgba(255,255,255,.04);color:var(--skc-text-ui)}
.app .seg-b.on{background:var(--skc-gold);border-color:var(--skc-gold);color:var(--skc-on-gold);font-weight:600}

/* swatches */
.app .swatch{width:36px;height:36px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.app .swatch.on{border-color:var(--skc-gold);box-shadow:0 0 0 3px var(--skc-gold-glow)}

/* list rows, mini cards, add row */
.app .mini-card{background:var(--skc-glass);border-color:var(--skc-glass-line);border-radius:16px}
.app .mini-card .mc-d{font:400 12.5px var(--skc-ui);letter-spacing:0;color:var(--skc-muted)}
.app .mini-card .mc-x{width:32px;height:32px;background:rgba(255,255,255,.04)}
.app .add-row{font:600 13.5px var(--skc-ui);letter-spacing:0;text-transform:none;border-radius:14px;min-height:46px;border-color:var(--skc-field-line);color:var(--skc-text-ui)}
.app .add-row:hover{border-color:var(--skc-gold);color:var(--skc-gold-300);background:var(--skc-gold-wash)}
.app .pg-row .pg-home,.app .pg-open{font:500 12.5px var(--skc-ui);letter-spacing:0;text-transform:none;border-radius:999px;padding:6px 12px}
.app .pg-open{color:var(--skc-gold-300)}
.app .pg-row .pg-ar{width:28px;height:22px;border-radius:8px}


/* rail sections (Settings, Guests, Guest Book …): no gold mono kickers, readable sizes */
.app .rsec > h3{font:600 16px var(--skc-ui);letter-spacing:0;text-transform:none;color:#F3ECDD;margin-bottom:4px}
.app .rsec h3 .cnt{font:500 12px var(--skc-ui);letter-spacing:0}
.app .rsec > .sub,.app .sub{font:400 14px/1.5 var(--skc-ui);font-style:normal;color:var(--skc-muted)}
.app .rsvp-mode{background:var(--skc-glass);border-color:var(--skc-glass-line);border-radius:16px;padding:14px 16px}
.app .rsvp-mode.on{border-color:var(--skc-gold);background:var(--skc-gold-wash);box-shadow:inset 0 0 0 1px var(--skc-gold)}
.app .rsvp-mode .rm-t{font:600 15px var(--skc-ui);font-style:normal}
.app .rsvp-mode.on .rm-t{color:var(--skc-gold-300)}
.app .rsvp-mode .rm-d{font:400 13px/1.45 var(--skc-ui)}
.app .rsvp-stat,.app .seat-row,.app .na-row,.app .req-row,.app .gb-tile,.app .gb-link,.app .bc-prev{background:var(--skc-glass);border-color:var(--skc-glass-line);border-radius:16px}
.app .req-row{border-color:var(--skc-gold-rim)}
.app .rsvp-stat .l,.app .seat-row .seat-sub,.app .gl-sub,.app .rsvp-row .rv-d,.app .evbreak-row .ebr-d,.app .bc-reach,.app .gb-stat,.app .gb-by,.app .gl-tbl-l,.app .na-row .na-c,.app .bc-prev-l,.app .req-row .req-d,.app .gb-lmeta{font-family:var(--skc-ui);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--skc-muted)}
.app .gl-n,.app .rsvp-row .rv-n,.app .seat-row .seat-n,.app .na-row .na-n,.app .req-row .req-n,.app .evbreak-row .ebr-n{font:500 15px var(--skc-ui)}
.app .rsvp-row .rv-b,.app .gl-ev-chip,.app .soon-tag,.app .gb-badge{font:500 12px var(--skc-ui);letter-spacing:0;text-transform:none;padding:4px 10px}
.app .bc-chip,.app .gb-copy,.app .gb-rotate,.app .gb-acts button,.app .req-a button{font:500 13px var(--skc-ui);letter-spacing:0;text-transform:none;border-radius:999px;min-height:34px}
.app .bc-chip.on{border-color:var(--skc-gold);background:var(--skc-gold-wash);color:var(--skc-gold-300)}
.app .req-yes{background:var(--skc-gold);color:var(--skc-on-gold)}
.app .gl-tbl-in{background:var(--skc-field);border-color:var(--skc-field-line);border-radius:10px;font:400 14px var(--skc-ui)}
.app .gl-empty{font:400 14.5px/1.6 var(--skc-ui);border-radius:16px;border-color:var(--skc-field-line);color:var(--skc-muted)}
.app .seat-bar{background:rgba(255,255,255,.08)}
.app .gb-url{font-size:12.5px}

/* stage (chrome) */
.app .stage-bar{background:#100D0B;padding:10px 16px}
.app .stage-bar .pg{font:500 13.5px var(--skc-ui);letter-spacing:0;text-transform:none;border-radius:999px;padding:7px 13px;color:var(--skc-text-ui)}
.app .stage-bar .pg:hover{background:rgba(255,255,255,.04)}
.app .stage-bar .pg.on{background:rgba(255,255,255,.12);color:#F3ECDD;font-weight:600}
.app .ws-shell{border-radius:22px}

/* overlays on the preview: "Choose hero image", "Crop" */
.hero-pick-btn,.slot-crop-btn{background:rgba(16,13,11,.55)!important;color:#F3ECDD!important;border:1px solid rgba(255,255,255,.22)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:600 13.5px var(--skc-ui)!important;letter-spacing:0!important;text-transform:none!important;border-radius:999px!important;min-height:38px}


/* account chip, save status and sign-in modal (styles injected by sk-account.js; body raises specificity) */
body .sk-acct{font-family:var(--skc-ui)}
body .sk-save{font:400 12.5px var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-faint)}
body .sk-save.on,body .sk-save b{color:var(--skc-gold-300)}
body .sk-chip{font:600 13.5px var(--skc-ui);letter-spacing:0;text-transform:none;min-height:38px;padding:8px 15px;background:var(--skc-glass);border-color:var(--skc-glass-line)}
body .sk-chip:hover{border-color:var(--skc-gold-rim);color:#F3ECDD}
body .sk-menu{background:rgba(30,23,18,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:var(--skc-glass-line);border-radius:18px}
body .sk-menu .em,body .sk-menu button{font:400 13.5px var(--skc-ui);letter-spacing:0}
body .sk-menu button{min-height:40px;border-radius:12px}
body .sk-ov{background:rgba(8,6,5,.7);backdrop-filter:blur(10px)}
body .sk-card{background:rgba(30,23,18,.86);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border-color:var(--skc-glass-line);border-radius:30px;padding:34px 30px 28px;font-family:var(--skc-ui)}
body .sk-card .x{width:40px;height:40px;top:12px;right:12px;border-radius:999px}
body .sk-k{display:none}
body .sk-h{font-family:"Instrument Serif",Georgia,serif;font-size:40px;margin:0 0 8px}
body .sk-sub{font:300 15.5px/1.5 var(--skc-ui);color:var(--skc-text-ui)}
body .sk-f label{font:500 14px var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-text-ui)}
body .sk-f input{background:var(--skc-field);border-color:var(--skc-field-line);border-radius:14px;min-height:50px;font:400 16px var(--skc-ui)}
body .sk-f input:focus{border-color:var(--skc-gold);box-shadow:0 0 0 4px var(--skc-gold-glow)}
body .sk-go{font:600 16px var(--skc-ui);letter-spacing:0;text-transform:none;min-height:52px;box-shadow:var(--skc-gold-shadow)}
body .sk-go:hover{background:var(--skc-gold-300);transform:none}
body .sk-alt,body .sk-msg{font:400 13.5px/1.5 var(--skc-ui)}

/* modal + toast */
.wmodal .ms{background:rgba(8,6,5,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.wmodal .mc{background:rgba(30,23,18,.86);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border-color:var(--skc-glass-line);border-radius:30px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 30px 80px rgba(0,0,0,.6);font-family:var(--skc-ui)}
.wmodal .mx{width:40px;height:40px;background:var(--skc-glass)}
.wtoast{background:var(--skc-gold);border-color:var(--skc-gold);color:var(--skc-on-gold);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.wtoast .ti{color:var(--skc-on-gold)}
.wtoast .tt{font:600 14px var(--skc-ui);letter-spacing:0;text-transform:none}

/* phone: the builder is desktop-only. Hide the app under the notice so the
   page can't scroll sideways, and make the notice match the system. */
@media (max-width:860px){
  html,body{overflow:hidden;width:100%}
  body:not(.b3) .app{visibility:hidden}   /* old shell only; the v3 builder works on phones */
  body #mobileNote{background:#100D0B;gap:0}
  body #mobileNote .mn-k{display:none}
  body #mobileNote h2{font-family:"Instrument Serif",Georgia,serif;font-size:40px}
  body #mobileNote .mn-url{font:500 15px var(--skc-ui);letter-spacing:0;color:#F3ECDD;background:var(--skc-glass);border:1px solid var(--skc-glass-line);border-radius:999px;padding:12px 18px}
  body #mobileNote p{font-family:var(--skc-ui);font-size:16px;font-weight:300;color:var(--skc-text-ui)}
  body #mobileNote .mn-go{font:500 14px var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--skc-muted);min-height:44px;text-decoration:underline;text-underline-offset:3px}
}

/* =====================================================================
   2 · GUEST SITE (every theme)
   The site's look still comes from the theme (--ws-* vars). This layer only
   turns the interactive parts into glass + accent: buttons, the countdown,
   cards, the RSVP form. Light themes get frosted white; dark themes get
   frosted dark. The accent is whatever the couple picked (gold by default).
   ===================================================================== */
.ws{
  --ws-glass:color-mix(in srgb,var(--ws-ink) 5%,transparent);
  --ws-glass-line:color-mix(in srgb,var(--ws-ink) 13%,transparent);
  --ws-field:color-mix(in srgb,var(--ws-ink) 6%,transparent);
  --ws-field-line:color-mix(in srgb,var(--ws-ink) 18%,transparent);
  --ws-panel-r:max(var(--ws-radius),26px);
  --ws-card-r:max(var(--ws-radius),20px);
  --ws-field-r:max(var(--ws-radius),14px);
}
.ws-corners-sharp{--ws-panel-r:2px;--ws-card-r:2px;--ws-field-r:2px}

/* buttons: pill, sentence case, a soft glow in the accent */
.ws .ws-btn{font:600 16px var(--skc-ui);letter-spacing:0;text-transform:none;min-height:52px;padding:0 26px;border-radius:999px;justify-content:center;box-shadow:0 10px 26px color-mix(in srgb,var(--ws-accent) 26%,transparent)}
.ws .ws-btn.ghost{box-shadow:none;background:var(--ws-glass);border-color:var(--ws-glass-line);color:var(--ws-ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ws .ws-btn.ghost:hover{border-color:var(--ws-accent)}
.ws-corners-sharp .ws-btn{border-radius:2px}

/* hero countdown becomes a glass pill */
.ws-hero .h-count{background:color-mix(in srgb,var(--ws-bg) 35%,transparent);border-color:var(--ws-glass-line);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);padding:14px 26px}

/* cards: events, travel, registry */
.ws-event,.ws-cards .ic,.ws-reg .r-card,.ws .cg-ev,.code-guest{background:var(--ws-glass)!important;border-color:var(--ws-glass-line);border-radius:var(--ws-card-r);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent)}
.ws-event .ev-tag,.ws-reg .r-give{border-color:color-mix(in srgb,var(--ws-accent) 45%,transparent);background:color-mix(in srgb,var(--ws-accent) 10%,transparent)}
.ws .cg-ev.going{border-color:var(--ws-accent);background:color-mix(in srgb,var(--ws-accent) 10%,transparent)!important}
.xr-chip,.ws-gtab{background:var(--ws-glass)}

/* the RSVP card */
.ws-rsvp{background:var(--ws-glass)!important;border-color:var(--ws-glass-line);border-radius:var(--ws-panel-r);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),0 24px 60px rgba(0,0,0,.28)}
.ws-rsvp .rf label,.code-guest .rf label,.code-lbl,.cg-req-form label{font:500 14px var(--skc-ui);letter-spacing:0;text-transform:none;color:var(--ws-dim)}
.code-lbl{text-align:left}
.ws-rsvp .rf input,.ws-rsvp .rf select,.ws-rsvp .rf textarea,.code-guest select,.code-guest textarea,.code-in,.cg-req-form input,.ws .cg-ev-count{
  background:var(--ws-field)!important;border:1px solid var(--ws-field-line);border-radius:var(--ws-field-r);min-height:52px;padding:12px 16px;font:400 17px var(--skc-ui);color:var(--ws-ink);transition:border-color .15s,box-shadow .15s}
.code-in{letter-spacing:.16em;text-transform:uppercase;font-weight:500}
.ws-rsvp .rf input:focus,.ws-rsvp .rf select:focus,.ws-rsvp .rf textarea:focus,.code-guest select:focus,.code-guest textarea:focus,.code-in:focus,.cg-req-form input:focus{outline:none;border-color:var(--ws-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--ws-accent) 18%,transparent)}
.code-hint{font:400 14px var(--skc-ui);letter-spacing:0;color:var(--ws-faint)}
.ws-rsvp-soon p{font-family:var(--skc-ui);font-size:17px;font-weight:300}

/* yes / no and per-event choices: pills that fill with the accent */
.ws-signup .su-att button,.ws-rsvp .attend button,.cg-att button,.ws .cg-go button{font:500 15px var(--skc-ui);letter-spacing:0;text-transform:none;min-height:46px;border-radius:999px}
.ws .cg-go{border-color:var(--ws-field-line);background:var(--ws-field)}
.ws-signup .su-att button.on,.ws-rsvp .attend button.on,.cg-att button.on,.ws .cg-go button.on{font-weight:600}
.ws-signup .su-consent{background:var(--ws-field);border-color:var(--ws-field-line);border-radius:var(--ws-field-r)}
.ws-signup .su-consent span{font-family:var(--skc-ui);font-size:13.5px}
.ws-signup .su-consent input{width:20px;height:20px}
.cg-hi,.cd-t{color:var(--ws-ink)}
.cg-allow,.cd-d{font-family:var(--skc-ui);font-size:16px;font-weight:300}
.code-err{border-radius:var(--ws-field-r)}
.ws-rsvp .thanks h3{font-family:var(--ws-display);font-style:var(--ws-h-style)}

/* phones: give the RSVP fields room */
.ws-mobile .ws-rsvp{padding:24px 18px}
@media (max-width:600px){.ws-rsvp{padding:24px 18px}}

/* nav on phones: the open menu becomes a glass sheet */
.ws-mobile .ws-nav .ws-links,.ws-nav .ws-links{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}

@media (prefers-reduced-motion:reduce){.app *,.ws *{transition:none!important}}