/* ===========================================================================
   Shared wedding site styles — design tokens lifted from the seating plan so
   every page feels like the same paper-and-plum invitation.
   ========================================================================= */
:root{
  --paper:#f5eee1; --paper2:#efe6d5; --card:#fffdf8; --ink:#39303a; --muted:#8c7f78;
  --plum:#6b4768; --plum-deep:#4a2f48; --gold:#b18a4e; --gold-soft:#d9c39a;
  --line:#ded0bd; --line2:#e9ded0;
  --t-ok:#cfe3c2; --t-ok-line:#8aa877;
  --t-full:#9ccb8c; --t-full-line:#6f9d62;
  --t-over:#e3a3a3; --t-over-line:#bf6a6a;
  --t-canc:#ddd5c8; --t-canc-line:#b6ab99;
  --t-music:#b8e0b8; --t-music-line:#5a9e5a;
  --t-groom:#c6d9f0; --t-groom-line:#6996c8;
  --t-bride:#f0c6d9; --t-bride-line:#c86996;
  --round:#d2e6c6; --round-line:#8aa877;
  --shadow:0 1px 2px rgba(60,40,40,.06),0 18px 40px -20px rgba(74,47,72,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
/* always reserve the scrollbar so the page width is identical on every page —
   no horizontal shift when a tall page (or late-rendered content) adds the
   vertical scrollbar after first paint. scrollbar-gutter is the modern,
   reliable reservation; overflow-y:scroll is the fallback for older engines. */
html{overflow-y:scroll;scrollbar-gutter:stable}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--ink); background:var(--paper);
  background-image:
    radial-gradient(1200px 700px at 18% -10%, #fdf8ee 0%, rgba(253,248,238,0) 60%),
    radial-gradient(900px 600px at 110% 120%, #efe1c9 0%, rgba(239,225,201,0) 55%);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.wrap{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:26px clamp(14px,3vw,34px) 60px}

/* ---------- top navigation ---------------------------------------------- */
.nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;max-width:1500px;margin:0 auto;padding:18px clamp(14px,3vw,34px) 0}
.nav .home{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav .home .mono{font-family:"Fraunces",serif;font-style:italic;font-size:22px;color:var(--plum-deep)}
.nav .links{display:flex;align-items:center;gap:2px;flex-wrap:nowrap;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav .links::-webkit-scrollbar{display:none}
.nav a.link,.nav button.link{font-family:inherit;font-size:13px;font-weight:600;color:var(--plum-deep);
  white-space:nowrap;flex:none;
  text-decoration:none;background:transparent;border:1px solid transparent;border-radius:11px;
  padding:8px 11px;cursor:pointer;transition:background .15s,border-color .15s}
.nav #authSlot{display:inline-flex;align-items:center;justify-content:flex-end;order:5;margin-left:10px;min-width:38px}
.nav a.link:hover,.nav button.link:hover{background:var(--card);border-color:var(--line)}
.nav a.link.active{background:var(--plum);color:#fff}
.nav .lang{border:1px solid var(--line);background:var(--card);min-width:42px;text-align:center}
.nav .links .nav-tab{display:none}   /* desktop uses the tab bar; the mobile sheet shows these instead */
/* hamburger (hidden on desktop; shown on mobile via the media query below) */
.nav-burger{display:none;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:40px;height:38px;padding:0;border:1px solid var(--line);background:var(--card);border-radius:11px;cursor:pointer}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--plum-deep);transition:transform .2s,opacity .2s}
.nav.nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.nav-open .nav-burger span:nth-child(2){opacity:0}
.nav.nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* hidden on desktop so they don't disturb the inline nav layout */
.nav-backdrop{display:none}
.nav-lang{display:none}

/* ---------- buttons (shared) -------------------------------------------- */
button.btn,a.btn{font-family:inherit;font-size:13px;font-weight:600;color:var(--plum-deep);
  background:var(--card);border:1px solid var(--line);border-radius:11px;padding:9px 13px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  transition:transform .12s ease, box-shadow .15s ease, border-color .15s; box-shadow:0 1px 0 rgba(0,0,0,.02)}
button.btn:hover,a.btn:hover{transform:translateY(-1px);border-color:var(--gold-soft);box-shadow:var(--shadow)}
button.btn.solid,a.btn.solid{background:var(--plum);color:#fff;border-color:var(--plum)}
button.btn.ghost,a.btn.ghost{background:transparent}
button.btn:disabled{opacity:.5;cursor:default;transform:none}

/* ---------- generic cards / inputs -------------------------------------- */
.pc{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],select{font-family:inherit;font-size:14px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;width:100%}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(177,138,78,.15)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:none;background:#fff;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:7px 12px;cursor:pointer}
.seg button.on{background:var(--plum);color:#fff}
.mini{font-size:12px;color:var(--muted)}

/* ===========================================================================
   Landing page
   ========================================================================= */
/* sizes track the smaller of viewport width/height so the landing fits a
   desktop screen without a vertical scrollbar (and stays elegant on mobile) */
.hero{position:relative;z-index:1;text-align:center;max-width:920px;margin:0 auto;
  padding:clamp(12px,2.4vh,34px) clamp(16px,4vw,34px) clamp(16px,2.2vh,24px)}
/* floral corner decoration */
.hero > :not(.hero-decor){position:relative;z-index:1}
.hero-decor{position:absolute;z-index:0;pointer-events:none;width:clamp(110px,17vw,210px);height:auto;opacity:.9}
.hero-decor.decor-tl{top:0;left:0;transform:rotate(180deg)}
.hero-decor.decor-br{bottom:0;right:0}
@media (max-width:680px){ .hero-decor{width:clamp(80px,26vw,140px);opacity:.65} }
.hero .kicker{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:600}
.hero .names{font-family:"Fraunces",serif;font-weight:500;color:var(--plum-deep);
  font-size:clamp(38px,min(8.4vw,9vh),86px);line-height:.92;margin:.1em 0 0;letter-spacing:-.01em}
.hero .names .amp{display:block;font-style:italic;color:var(--plum);font-size:.42em;margin:.12em 0;letter-spacing:.04em}
.hero .date{margin-top:clamp(8px,1.4vh,14px);font-size:clamp(15px,2.4vw,20px);color:var(--muted);letter-spacing:.04em}
.hero .divider{width:64px;height:1px;background:var(--gold-soft);margin:clamp(12px,1.8vh,20px) auto}

.countdown{display:flex;justify-content:center;gap:clamp(10px,3vw,30px);margin:8px auto 0;flex-wrap:wrap}
.countdown .unit{min-width:74px}
.countdown .num{font-family:"Fraunces",serif;font-size:clamp(28px,min(5vw,6vh),46px);color:var(--plum);line-height:1}
.countdown .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.countdown .cd-title{flex-basis:100%;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}

/* same content width as the panels / wishboard below, so everything lines up */
.infocards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;max-width:620px;margin:clamp(14px,2.2vh,24px) auto 0}
.infocards .infocard{flex:1 1 100%}
.infocard{padding:16px 18px;text-align:center}
.infocard .ic-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.infocard .ic-main{font-family:"Fraunces",serif;font-size:19px;color:var(--plum-deep);margin-top:5px;line-height:1.15}
.infocard .ic-sub{font-size:13px;color:var(--muted);margin-top:4px}
.infocard a.btn,.infocard button.btn{margin-top:11px}

/* centered modal (directions chooser, etc.) */
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(57,48,58,.45);padding:20px}
.modal[hidden]{display:none}
.modal-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:22px;display:flex;flex-direction:column;gap:10px;min-width:min(280px,90vw);max-width:90vw}
.modal-card .modal-title{font-family:"Fraunces",serif;font-size:20px;color:var(--plum-deep);text-align:center;margin-bottom:4px}
.modal-card .btn{justify-content:center}
.modal-card select{width:100%}
.modal-card .field{width:100%;text-align:left}
.modal-card .field label{display:block;margin-bottom:4px}
.modal-card .err{color:#bf6a6a;font-size:13px;min-height:16px;width:100%;text-align:left}
.modal-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0;z-index:2;transition:background .15s,color .15s}
.modal-x:hover{background:var(--line2);color:var(--plum-deep)}
/* small text-link actions inside the sign-in card (forgot / back) */
.auth-link{align-self:center;background:none;border:none;color:var(--plum);font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;text-decoration:underline;padding:2px 4px}
.auth-link:hover{color:var(--plum-deep)}
/* On phones, anchor modals to the top and let the overlay scroll, so the
   on-screen keyboard can't cover the inputs or the submit button. */
@media (max-width:640px){
  .modal{align-items:flex-start;overflow-y:auto;padding:14px 14px 28px}
  .modal-card{width:100%}
  /* a chooser with no text inputs is nicer as a bottom sheet (easy to reach) */
  #dirModal{align-items:flex-end;padding:0}
  #dirModal .modal-card{width:100%;max-width:none;border-radius:20px 20px 0 0;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:sheetUp .25s ease}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
}

/* sign-in / avatar (nav) */
.signin-link{border:1px solid var(--plum)!important;background:var(--plum)!important;color:#fff!important}
.avatar-wrap{position:relative;display:inline-block}
.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--plum);background:var(--plum);color:#fff;
  font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:14px;cursor:pointer;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;padding:0;line-height:1}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* read-only guest details in the profile modal */
.profile-details{width:100%;border:1px solid var(--line2);border-radius:10px;padding:2px 12px;margin:2px 0}
.pd-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;border-top:1px solid var(--line2)}
.pd-row:first-child{border-top:none}
.pd-l{color:var(--muted)}
.pd-v{color:var(--ink);font-weight:600;text-align:right;word-break:break-word}
.avatar.avatar-lg{width:72px;height:72px;font-size:24px;border:none}
/* fixed (not absolute) so the dropdown isn't clipped by the nav's overflow-x:auto;
   JS sets top/right on open. The mobile sheet overrides this back to static. */
.avatar-menu{position:fixed;z-index:90;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;min-width:150px}
.avatar-menu[hidden]{display:none}
.avatar-menu button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--plum-deep);
  text-align:left;padding:9px 12px;border-radius:8px;cursor:pointer}
.avatar-menu button:hover{background:var(--paper2)}
/* "Dil" row carries the EN/AZ toggle indicator on its right */
.avatar-menu .menu-lang{display:flex;align-items:center;justify-content:space-between;gap:12px}
.avatar-menu .lang-ind{font-size:12px;font-weight:700;color:var(--plum);border:1px solid var(--line);
  border-radius:999px;padding:2px 9px;background:var(--paper2);letter-spacing:.02em}
/* signed in → language lives in the menu, so drop the standalone top-bar toggle */
html.guest-auth .nav .links .lang{display:none}
html.guest-auth .nav .nav-lang{display:none}
/* Placeholder avatar shown until auth.js mounts the real one, so the nav slot
   doesn't flash empty (or swap from the EN/AZ toggle) on each page load. */
html.guest-auth .nav #authSlot:empty::before{content:"";display:inline-block;width:38px;height:38px;
  border-radius:50%;background:var(--plum);border:1px solid var(--plum)}

/* main-page tabbed guest section */
/* Single non-wrapping row: centered when it fits, swipe-scrollable when it
   doesn't (fit-content + margin auto keeps it centered without clipping). */
.home-tabs{display:flex;flex-wrap:nowrap;gap:6px;width:fit-content;max-width:100%;margin:8px auto 22px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.home-tabs::-webkit-scrollbar{display:none}
.home-tabs button{flex:none;white-space:nowrap;border:1px solid var(--line);background:var(--card);font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--plum-deep);padding:7px 13px;border-radius:999px;cursor:pointer;
  transition:background .15s,border-color .15s}
.home-tabs button:hover{border-color:var(--gold-soft)}
.home-tabs button.on{background:var(--plum);color:#fff;border-color:var(--plum)}
.home-panel{max-width:620px;margin:0 auto}
.home-panel[hidden]{display:none}
.home-panels{position:relative;z-index:1;padding:0 clamp(14px,3vw,34px) 30px}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.home-footer{text-align:center;color:var(--muted);font-size:13px;padding:40px 16px 10px;font-style:italic;
  font-family:"Fraunces",serif;position:relative;z-index:1}

/* ===========================================================================
   Admin panel
   ========================================================================= */
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.admin-head h1{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(28px,4vw,42px);
  color:var(--plum-deep);margin:.1em 0 0}
.admin-head .kicker{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}

.login-box{max-width:380px;margin:8vh auto 0;padding:28px}
.login-box h2{font-family:"Fraunces",serif;font-weight:500;color:var(--plum-deep);margin:0 0 4px}
.login-box .field{margin-top:14px}
.login-box label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.login-box .err{color:#bf6a6a;font-size:13px;margin-top:12px;min-height:18px}
.login-box .btn{width:100%;justify-content:center;margin-top:18px;padding:11px}

/* onboarding invitation card */
.invite-card{position:relative;overflow:hidden;margin:-28px;padding:34px 28px 30px}
.invite-card .hero-decor{position:absolute;z-index:0;pointer-events:none;width:clamp(96px,22vw,150px);height:auto;opacity:.85}
.invite-card .decor-tl{top:0;left:0;transform:rotate(180deg)}
.invite-card .decor-br{bottom:0;right:0}
.invite-body{position:relative;z-index:1}
.invite-greet{margin:14px 0 0;color:var(--plum-deep);font-weight:600;font-size:15px}
.invite-lead{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.invite-names{font-family:"Fraunces",serif;font-weight:500;color:var(--plum-deep);
  font-size:clamp(30px,8vw,46px);line-height:1.05;margin:12px 0 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.invite-names .amp{color:var(--gold);font-size:.62em;font-style:italic;margin:2px 0}
.invite-rule{display:flex;align-items:center;justify-content:center;margin:14px 0;color:var(--gold)}
.invite-rule::before,.invite-rule::after{content:"";height:1px;width:54px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.invite-rule span{margin:0 12px;font-size:13px;opacity:.8}
.invite-when{color:var(--plum-deep);font-weight:600;font-size:15px}
.invite-venue{margin:6px 0 0;color:var(--ink);font-size:14px;line-height:1.5}
.invite-venue .vaddr{color:var(--muted);font-size:12.5px}
.invite-attend{font-weight:600;color:var(--plum-deep);margin:20px 0 10px}
.invite-sign{margin:18px 0 0;font-family:"Fraunces",serif;font-style:italic;color:var(--muted);font-size:14px}

.tabs{display:inline-flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px}
.tabs button{border:none;background:#fff;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--muted);padding:9px 18px;cursor:pointer}
.tabs button.on{background:var(--plum);color:#fff}

.toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar-row .grow{flex:1;min-width:180px}
.bulk-edit{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 4px;border-left:1px solid var(--line2);border-right:1px solid var(--line2)}
.bulk-edit select{width:auto;min-width:110px}
.bulk-edit #bulkValue .lblpick>summary{min-width:120px}
.statline{font-size:13px;color:var(--muted)}

table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
table.grid th.sortable{cursor:pointer;user-select:none}
table.grid th.sortable:hover{color:var(--plum)}
table.grid th .sort-ind{color:var(--plum);font-weight:700;letter-spacing:0}
table.grid td{padding:8px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.grid tr:last-child td{border-bottom:none}
table.grid input,table.grid select{padding:6px 8px}
table.grid input.name{min-width:160px}
/* clickable guest name → opens the detail card */
table.grid button.name{min-width:160px;width:100%;text-align:left;background:none;border:none;
  font:inherit;color:var(--ink);cursor:pointer;padding:6px 8px;border-radius:8px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
table.grid button.name:hover{background:var(--paper2);color:var(--plum-deep)}
/* registered guests (have created a sign-in) stand out in green */
table.grid input.name.reg,table.grid button.name.reg{color:#2e7d32;font-weight:600}
.guest-mini .gm-nm.reg{color:#2e7d32}
table.grid .fullcell{font-size:13px;color:var(--muted);white-space:nowrap}
/* auto-fit: size columns to their content (table scrolls inside .scroll) */
table.grid.fit{width:auto;min-width:100%}
table.grid.fit th,table.grid.fit td{white-space:nowrap}
table.grid.fit select,table.grid.fit input{width:auto}
/* size text inputs to their value so each column auto-fits its widest cell
   (field-sizing where supported; width:auto above is the graceful fallback) */
table.grid.fit input[type=text]{min-width:110px;max-width:260px;field-sizing:content}
table.grid input.num{width:70px;text-align:center}
table.grid .right{text-align:right}
.tag{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--line)}
.tag.ok{background:#eef6e7;color:#5f7f4d;border-color:#cfe3c2}
.tag.full{background:#e2f0da;color:#4f7a40}
.tag.over{background:#f7e3e3;color:#b3504f;border-color:#e3a3a3}
.tag.canc{background:#efe9df;color:#8a7f6d}
.tag.music{background:#e3eef5;color:#4f7a93;border-color:#bcd6e6}
.icon-btn{border:none;background:none;cursor:pointer;font-size:15px;line-height:1;padding:4px 7px;border-radius:7px;color:var(--plum-deep)}
.icon-btn:hover{background:var(--paper2)}
.icon-btn.danger{color:#bf6a6a}
.icon-btn.danger:hover{background:#f7e3e3}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--card)}
/* guests: compact tappable list on mobile (full editable table on desktop) */
.guests-mobile{display:none}
.guest-mini{display:flex;align-items:center;gap:8px;width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px 8px 14px;margin-bottom:8px}
.guest-mini .gm-open{flex:1 1 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0;
  background:none;border:none;text-align:left;cursor:pointer;font:inherit;padding:4px 0}
.guest-mini .gm-actions{display:flex;gap:2px;flex:0 0 auto}
.guest-mini .gm-actions .icon-btn{font-size:16px}
/* guest filter bar (Side tickboxes + multi-select dropdowns) */
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 14px}
.filter-side{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:7px 12px}
.filter-side .mini{color:var(--muted);font-weight:600}
.mf-item{display:flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap;cursor:pointer;padding:3px 0}
.mfilter{position:relative}
.mfilter-btn.on{border-color:var(--plum);color:var(--plum-deep)}
.mfilter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;
  background:var(--plum);color:#fff;font-size:11px;font-weight:700;padding:0 5px;margin:0 2px}
.mfilter-panel{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:210px;max-height:320px;overflow:auto;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px 12px}
.mfilter-panel[hidden]{display:none}
.mf-actions{display:flex;justify-content:flex-end;border-bottom:1px solid var(--line2);margin-bottom:6px;padding-bottom:5px}
.mf-clear{background:none;border:none;color:var(--plum);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.mf-empty{color:var(--muted);font-size:13px;padding:4px 0}
@media (max-width:640px){ .mfilter,.mfilter .btn{width:auto}
  /* anchor the panel to the viewport so it can't spill off either edge */
  .mfilter-panel{position:fixed;left:8px;right:8px;width:auto;min-width:0;max-height:60vh} }
.guest-mini:active{background:var(--paper2)}
.guest-mini .gm-main{display:flex;flex-direction:column;gap:2px;min-width:0}   /* min-width:0 → text wraps, never overflows */
.guest-mini .gm-nm{font-weight:600;color:var(--ink)}
.guest-mini .gm-sub{font-size:12px;color:var(--muted);line-height:1.3}
.guest-mini .gm-tb{font-size:14px;font-weight:600;color:var(--plum-deep);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto}
.guest-mini .gm-sel{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:var(--plum)}
.guest-mini.selected{background:var(--paper2);box-shadow:inset 3px 0 0 var(--plum)}
.guest-mini .gm-pill{font-size:11px;font-weight:600;color:var(--gold);margin-left:6px}
/* cascading relationship picker (category → specific) */
.rel-cell{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.rel-cell select{min-width:96px}
.rel-cell .rel-more,.rel-cell .rel-less{flex:0 0 auto;padding:6px 11px;font-weight:700;line-height:1}
.rel-cell .rel-free{min-width:150px;flex:1 1 150px}
/* override .modal-card .field label{display:block} so box + text sit inline */
.modal-card .field label.closefriend-row,.closefriend-row{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:400;margin:8px 0 0;cursor:pointer;width:auto}
.closefriend-row input{flex:0 0 auto;margin:0}
.closefriend-row span{font-size:13px}
/* "Whose?" picker — highlight when an ambiguous link still needs a choice */
.rel-via-need select{border-color:#d99a2b;background:#fbf3e2}
.rel-via-flag{color:#9a6b15;font-weight:600}
/* labels multi-select (a guest can have several) */
.lblpick{position:relative;display:inline-block;max-width:100%}
.lblpick>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  min-width:120px;max-width:240px;padding:5px 8px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.lblpick>summary::-webkit-details-marker{display:none}
.lblpick[open]>summary{border-color:var(--plum)}
.lp-chosen{display:flex;flex-wrap:wrap;gap:5px;flex:1 1 auto;min-width:0}
.lp-none{color:var(--muted);font-size:13px;white-space:nowrap}
.lp-toggle{flex:0 0 auto;color:var(--muted);transition:transform .15s}
.lblpick[open] .lp-toggle{transform:rotate(180deg)}
.lblpick-panel{position:absolute;z-index:20;top:calc(100% + 6px);left:0;min-width:210px;max-width:300px;max-height:300px;overflow:auto;
  display:flex;flex-wrap:wrap;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:10px 12px}
/* pill-shaped, colour-coded label chips */
.lblpill{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:12px;font-weight:600;line-height:1;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  background:hsl(var(--lh),60%,92%);color:hsl(var(--lh),45%,30%);border:1px solid hsl(var(--lh),50%,78%)}
.lblpill .lp-ic{font-weight:700;font-size:13px;opacity:.8}
.lblpill.on:hover{background:hsl(var(--lh),60%,86%)}
.lblpill.add{background:transparent;color:hsl(var(--lh),40%,38%);border-style:dashed}
.lblpill.add:hover{background:hsl(var(--lh),60%,93%);border-style:solid}
.gd-grid .lblpick,.gd-grid .lblpick>summary{width:100%;max-width:none}
/* relationship tree (collapsible diagram) */
.tree-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.tree-toolbar #treeSearch{max-width:220px}
.tree-toolbar select{width:auto;min-width:120px}
.tree-toolbar .btn{margin-left:auto}
.tree-toolbar #treeCollapse{margin-left:0}
.tree-mode{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;white-space:nowrap}
/* Power-BI-style drill-down */
.drill-bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 14px;font-size:13px}
.drill-crumb{background:none;border:none;font:inherit;color:var(--plum);cursor:pointer;padding:2px 4px;border-radius:6px}
.drill-crumb:hover{background:var(--paper2);text-decoration:underline}
.drill-crumb.cur{color:var(--plum-deep);font-weight:700;cursor:default}
.drill-sep{color:var(--muted)}
/* org-chart layout (boxes + connector lines), one level at a time */
.orgchart{overflow-x:auto;padding:6px 4px 24px;text-align:center}
.orgchart ul{display:flex;justify-content:center;padding-top:22px;position:relative;margin:0;list-style:none}
.orgchart>ul{padding-top:0}
.orgchart li{list-style:none;position:relative;padding:22px 12px 0}
.orgchart li::before,.orgchart li::after{content:"";position:absolute;top:0;right:50%;border-top:2px solid var(--line);width:50%;height:22px}
.orgchart li::after{right:auto;left:50%;border-left:2px solid var(--line)}
.orgchart li:only-child::before,.orgchart li:only-child::after{display:none}
.orgchart li:only-child{padding-top:22px}
.orgchart>ul>li:only-child{padding-top:0}
.orgchart li:first-child::before,.orgchart li:last-child::after{border:0 none}
.orgchart li:last-child::before{border-right:2px solid var(--line);border-radius:0 7px 0 0}
.orgchart li:first-child::after{border-radius:7px 0 0 0}
.orgchart ul ul::before{content:"";position:absolute;top:0;left:50%;border-left:2px solid var(--line);width:0;height:22px}
.org-node{display:inline-flex;flex-direction:column;align-items:center;gap:2px;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:10px 16px;font:inherit;min-width:92px;vertical-align:top}
button.org-node{cursor:pointer;transition:transform .12s,border-color .12s}
button.org-node:hover{transform:translateY(-2px);border-color:var(--gold-soft)}
.org-node .on-ic{font-size:22px;line-height:1}
.org-node .on-label{font-weight:600;color:var(--plum-deep);font-size:14px;white-space:nowrap}
.org-node.reg .on-label{color:#2e7d32}
.org-node .on-rel{font-size:11px;color:var(--muted);white-space:nowrap}
.org-node .on-count{position:absolute;top:-9px;right:-9px;font-size:11px;font-weight:700;color:#fff;background:var(--plum);border-radius:9px;padding:1px 7px}
.org-root{background:var(--paper2);border-color:var(--gold-soft)}
.org-subject{background:var(--plum);border-color:var(--plum)}
.org-subject .on-label{color:#fff}
/* a couple shares one line, joined by a short link; children hang below both */
.org-couple{display:inline-flex;align-items:center;gap:6px}
.org-link{width:12px;height:2px;background:var(--gold-soft);flex:0 0 auto}
/* genealogical layout: subject in the middle, ancestors grow upward */
.geneal{display:flex;flex-direction:column;align-items:center}
.org-up ul{padding-top:0;padding-bottom:22px}
.org-up>ul{padding-bottom:0}
.org-up li{padding:0 12px 22px}
.org-up>ul>li{padding-bottom:0}
.org-up li::before,.org-up li::after{top:auto;bottom:0;border-top:0;border-bottom:2px solid var(--line)}
.org-up li:last-child::before{border-radius:0 0 7px 0}
.org-up li:first-child::after{border-radius:0 0 0 7px}
.org-up ul ul::before{top:auto;bottom:0}
/* zoom + pan viewport */
.org-zoom-ctrl{margin-left:auto;display:inline-flex;gap:4px}
.org-zoom-ctrl .btn{padding:2px 10px;font-size:15px;line-height:1.2}
.org-zoom-wrap{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:12px;background:var(--paper2);cursor:grab}
.org-zoom-wrap.grabbing{cursor:grabbing}
.org-zoom-wrap.grabbing *{user-select:none}
.org-zoom{transform-origin:top center;transition:transform .08s ease-out;display:inline-block;min-width:100%;padding:8px}
.tree, .tree ul{list-style:none;margin:0;padding:0}
.tree ul{margin-left:16px;padding-left:14px;border-left:2px solid var(--line)}
.tree li{position:relative;padding:2px 0}
.tree details > summary{cursor:pointer;list-style:none;font-weight:600;color:var(--plum-deep);padding:5px 8px;border-radius:9px}
.tree details > summary::-webkit-details-marker{display:none}
.tree details > summary::before{content:"▸";display:inline-block;width:1em;color:var(--muted)}
.tree details[open] > summary::before{content:"▾"}
.tree details > summary:hover{background:var(--paper2)}
.tree .tree-count{font-size:11px;font-weight:700;color:#fff;background:var(--plum);border-radius:9px;padding:0 7px;margin-left:4px}
.tree .tree-guest{padding-left:4px}
.tree .tree-g{background:none;border:none;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;padding:3px 8px;border-radius:8px}
.tree .tree-g:hover{background:var(--paper2);color:var(--plum-deep)}
.tree .tree-g.reg{color:#2e7d32;font-weight:600}
/* colour-coded Status select (icon carried in the option text) */
select.status-sel{font-weight:600}
select.status-sel.st0{color:#6a6a6a;border-color:var(--line);background:#f3f1ec}
select.status-sel.st1{color:#2f6fb0;border-color:#9cc3ea;background:#eaf3fb}
select.status-sel.st2{color:#2e7d32;border-color:#a8d6ab;background:#ecf7ed}
select.status-sel.st3{color:#9a6b15;border-color:#e3c98a;background:#fbf3e2}
select.status-sel.st4{color:#b23b3b;border-color:#e3a3a3;background:#fbeded}
select.status-sel.st5{color:#5b3fa8;border-color:#c4b2f0;background:#f2eeff}
/* per-guest audit trail (in the details card) */
.audit-line{font-size:12px;color:var(--muted);padding:3px 0;line-height:1.4}
.audit-line .audit-when{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
/* guest details card: compact 2-column layout so it fits without scrolling */
#guestDetailModal .modal-card,#guestAddModal .modal-card{padding:16px;gap:8px;max-height:94vh}
.gd-grid{display:grid;grid-template-columns:1fr;gap:8px 12px}
@media(min-width:480px){ .gd-grid{grid-template-columns:1fr 1fr} }
@media(min-width:680px){ .gd-grid{grid-template-columns:repeat(3,1fr)} }
.gd-grid .field{margin:0;min-width:0}
.gd-grid .field.full{grid-column:1 / -1}
.gd-grid .field label{margin-bottom:2px;font-size:11px}
.gd-grid input,.gd-grid select{width:100%;padding:6px 8px}
.gd-grid .rel-cell{width:100%}
.gd-grid .rel-cell select{flex:1 1 120px;min-width:0}
/* full-name editor: Full name + live English preview side by side, with
   separate Name/Surname boxes appearing automatically on a 2nd space */
.gd-name{display:flex;flex-direction:column;gap:8px}
.gd-name-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){ .gd-name-row{grid-template-columns:1fr} }
.gd-name-col{display:flex;flex-direction:column;min-width:0}
.gd-name-col > label{margin-bottom:2px;font-size:11px}
.gd-name-col input{width:100%}
.gd-en-col .gd-fullen,.gd-en-col .gd-fullaz{font-size:13px;color:var(--muted);background:var(--paper)}
.gd-en-col .gd-fullaz{cursor:default;border-style:dashed}
.gd-en-col .gd-fullaz:focus{outline:none;border-color:var(--line);box-shadow:none}
.gd-sep-hint{color:#bf6a6a}
.phone-field{display:flex;gap:6px;width:100%}
.phone-field .phone-cc{flex:0 0 auto;width:auto;min-width:92px;padding:6px 6px}
.phone-field .phone-num{flex:1;min-width:0}
.gd-notes{margin-top:6px;border-top:1px solid var(--line2);padding-top:8px}
.gd-notes > summary{font-size:13px;font-weight:600;color:var(--plum-deep);cursor:pointer;padding:3px 0;list-style:none}
.gd-notes > summary::-webkit-details-marker{display:none}
.gd-notes > summary::before{content:"▸ ";color:var(--muted)}
.gd-notes[open] > summary::before{content:"▾ ";color:var(--muted)}
/* linked-guests box */
.gd-links .gd-link-list{list-style:none;margin:6px 0;padding:0}
.gd-link-item{display:flex;align-items:center;gap:6px;padding:2px 0}
.gd-link-item .tree-g{background:none;border:none;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;padding:3px 6px;border-radius:7px}
.gd-link-item .tree-g:hover{background:var(--paper2);color:var(--plum-deep)}
.gd-link-item .tree-g.reg{color:#2e7d32;font-weight:600}
.gd-unlink{margin-left:auto;background:none;border:none;color:#bf6a6a;cursor:pointer;font-size:13px;padding:2px 6px;border-radius:6px}
.gd-unlink:hover{background:#fbeded}
.gd-link-add{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.gd-link-add .gd-link-guest{flex:1 1 140px;min-width:0}
.gd-link-add .gd-link-rel{flex:0 0 auto;width:auto;min-width:110px}
.gd-notes .gd-grid{margin-top:8px}
.rel-cell .rel-add{padding:6px 12px;font-size:13px}
.gd-history{margin-top:2px}
.gd-history summary{font-size:12px;font-weight:600;color:var(--plum-deep);cursor:pointer;padding:2px 0;list-style:none}
.gd-history summary::-webkit-details-marker{display:none}
.gd-history summary::before{content:"▸ "}
.gd-history[open] summary::before{content:"▾ "}
.gd-history-body{max-height:20vh;overflow:auto;margin-top:2px}
.addrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px;padding:14px;
  background:var(--paper2);border:1px solid var(--line2);border-radius:14px}
.addrow .grow{flex:1;min-width:160px}
.empty{color:var(--muted);font-size:13px;font-style:italic;padding:18px;text-align:center}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:50;
  background:var(--plum-deep);color:#fff;font-size:13px;font-weight:600;padding:10px 18px;border-radius:999px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.cloud-badge{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}

/* network manager (tree) */
.net-node{display:flex;gap:8px;align-items:center;margin:6px 0}
.net-node .net-twig{color:var(--muted);width:14px;text-align:center;flex:0 0 auto}
.net-node .net-name{flex:0 1 240px;min-width:120px}
.net-node .net-add{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:30px;cursor:pointer;
  font-weight:700;color:var(--plum-deep);font-family:inherit;flex:0 0 auto}
.net-node .net-add:hover{border-color:var(--gold-soft)}

/* role-based visibility: guests don't see editing tools, admins don't see guest prompts */
body.guest-mode .admin-only{display:none !important}
body:not(.guest-mode) .guest-only{display:none !important}
body.guest-mode svg.plan .tnode{cursor:default}

/* ===========================================================================
   Guest area
   ========================================================================= */
.guest-head{text-align:center;margin:6px auto 26px;max-width:680px}
.guest-head .kicker{display:none}   /* page title shows once (the purple h1) */
.guest-head h1{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(30px,5vw,46px);
  color:var(--plum-deep);margin:.12em 0 0}
.guest-head .who{color:var(--muted);margin-top:8px;font-size:14px}
.guest-head .who a{color:var(--plum);cursor:pointer;text-decoration:underline}

.guest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:980px;margin:0 auto}
@media (max-width:760px){.guest-grid{grid-template-columns:1fr}}
.gcard .body{padding:14px 18px 18px}
.gcard h2{font-family:"Fraunces",serif;font-weight:500;font-size:20px;color:var(--plum-deep);margin:0;padding:16px 18px 0}
.gcard .desc{font-size:13px;color:var(--muted);padding:2px 18px 0}
textarea{font-family:inherit;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:10px;width:100%;min-height:80px;resize:vertical}
textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(177,138,78,.15)}
.field-row{display:flex;gap:8px;margin-top:10px}
.note{font-size:13px;font-weight:600;color:#5f7f4d;margin-top:8px;min-height:18px}

.table-result{background:var(--paper2);border:1px solid var(--line2);border-radius:12px;padding:14px 16px;margin-top:12px}
.table-result .big{font-family:"Fraunces",serif;font-size:30px;color:var(--plum);line-height:1}
.table-result .pname{font-weight:600;color:var(--ink)}
.table-result .meta{font-size:13px;color:var(--muted);margin-top:4px}
.table-result .tr-actions{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap;margin-top:10px}
.table-result .tr-actions .btn{margin-top:0;padding:9px 11px;flex:1 1 0;min-width:0;justify-content:center;text-align:center}
/* tighten the space between the "Here's your table" hint and the result card */
.find-card .body{padding-top:6px}
.find-card .table-result{margin-top:6px}

/* author line above the wish / report form */
.wish-as{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.wish-as.signed{color:var(--plum);font-weight:600}
/* Wishboard page — two columns on desktop: board on the left, write form on
   the right; stacks on mobile with the form first. */
.wb-layout{display:grid;grid-template-columns:1fr;gap:18px;max-width:1040px;margin:0 auto}
@media (min-width:861px){
  .wb-layout{grid-template-columns:1.5fr 1fr;align-items:start}
  .wb-board{order:-1}                 /* board to the left, form stays on the right */
  .wb-form .pc{position:sticky;top:18px}
}
.wb-board .wishlist{max-height:none}  /* let the board grow; the page scrolls */
.wishlist{list-style:none;margin:4px 0 0;padding:0;max-height:360px;overflow:auto}
.wishlist li{background:var(--paper2);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;margin-bottom:8px}
.wishlist li.empty{background:none;border:none;padding:8px 0}
.wishlist .wmsg{font-size:14px;color:var(--ink);font-style:italic;font-family:"Fraunces",serif}
.wishlist .wmeta{font-size:12px;color:var(--muted);margin-top:4px}
.wteam{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;border:1px solid var(--line)}
.wteam-bride{background:#f7e7f0;color:#9c4a78;border-color:#eccbdd}
.wteam-groom{background:#e9eef6;color:#46618c;border-color:#cdd9ea}

/* ===========================================================================
   Gift / donate page
   ========================================================================= */
.bank-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;border-top:1px solid var(--line2)}
.bank-row:first-child{border-top:none}
.bank-row .bk-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:0 0 130px}
.bank-row .bk-val{flex:1;min-width:0;font-size:15px;color:var(--ink);font-weight:600;word-break:break-word}
.bank-row .copy{flex:0 0 auto}
.copy{border:1px solid var(--line);background:#fff;border-radius:8px;font-family:inherit;font-size:12px;
  font-weight:600;color:var(--plum-deep);padding:6px 10px;cursor:pointer}
.copy:hover{border-color:var(--gold-soft)}
.bank-note{font-size:13px;color:var(--muted);margin-top:12px;font-style:italic}
.preset-btns{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.preset-btns button{border:1px solid var(--line);background:#fff;border-radius:999px;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--plum-deep);padding:7px 14px;cursor:pointer}
.preset-btns button:hover,.preset-btns button.on{background:var(--plum);color:#fff;border-color:var(--plum)}
.amount-row{display:flex;align-items:center;gap:8px}
.amount-row .cur{font-weight:600;color:var(--muted)}
.thanks-box{text-align:center;padding:26px 18px}
.thanks-box .big{font-family:"Fraunces",serif;font-size:24px;color:var(--plum);line-height:1.2}

/* ===========================================================================
   Gallery page
   ========================================================================= */
.album-embed{max-width:1100px;margin:0 auto 20px;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.album-embed iframe{display:block;width:100%;border:0}

/* live photo wall */
.wall{max-width:1100px;margin:0 auto 26px}
.wall-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;flex-wrap:wrap}
.wall-count{color:var(--muted)}
.wall-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* justified "Google Photos" rows: layoutWall() in gallery.html sets each
   cell's px width/height from its aspect ratio, so rows fill the width and
   photos keep their proportions (no cropping). */
.wall-grid{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:640px){ .wall-grid{gap:4px} }
.wall-cell{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);
  box-shadow:var(--shadow);background:var(--paper2)}
.wall-cell img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .25s}
.wall-cell:hover img{transform:scale(1.03)}
/* selection mode */
.wall-grid.selecting .wall-cell.selectable{cursor:pointer}
.wall-grid.selecting .wall-cell.selectable img{cursor:pointer}
.wall-grid.selecting .wall-cell:not(.selectable){opacity:.4}
.wall-cell.sel{outline:3px solid var(--plum);outline-offset:-3px}
.wall-check{position:absolute;top:8px;left:8px;width:24px;height:24px;border-radius:50%;z-index:2;
  background:rgba(255,255,255,.85);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.wall-check.on{background:var(--plum);border-color:var(--plum)}
.wall-check.on::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.btn.danger{background:#bf6a6a;border-color:#bf6a6a;color:#fff}
.btn.danger:hover{background:#a85a5a;border-color:#a85a5a}
.btn:disabled{opacity:.5;cursor:default}
.wall-cell .by{position:absolute;left:0;right:0;bottom:0;font-size:11px;color:#fff;padding:14px 8px 5px;
  background:linear-gradient(transparent,rgba(0,0,0,.55));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.wall-cell .del{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:none;
  background:rgba(255,255,255,.9);color:#bf6a6a;cursor:pointer;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.wall-empty{text-align:center;color:var(--muted);font-style:italic;padding:30px 0}
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(15,10,15,.94);display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
.lb-btn{position:fixed;border:none;background:rgba(255,255,255,.92);color:var(--plum-deep);cursor:pointer;z-index:121;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.35);transition:background .15s}
.lb-btn:hover{background:#fff}
.lb-close{top:14px;right:16px;width:44px;height:44px;border-radius:50%;font-size:19px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:30px;padding-bottom:4px}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-cap{position:fixed;left:0;right:0;bottom:18px;text-align:center;color:#fff;font-size:14px;
  text-shadow:0 1px 5px rgba(0,0,0,.7);pointer-events:none;padding:0 70px}
@media (max-width:640px){ .lb-prev,.lb-next{width:44px;height:44px;font-size:25px} .lb-prev{left:8px} .lb-next{right:8px} }
.gallery-cta{text-align:center;margin:0 auto 26px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;max-width:980px;margin:0 auto}
.gallery-grid a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  aspect-ratio:1/1;background:var(--paper2)}
.gallery-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.gallery-grid a:hover img{transform:scale(1.05)}

/* ===========================================================================
   Menu page
   ========================================================================= */
.menu-card{max-width:640px;margin:0 auto;padding:8px clamp(12px,4vw,30px) 14px}
.menu-card .crest{text-align:center;font-family:"Fraunces",serif;font-size:13px;letter-spacing:.34em;
  color:var(--gold);font-weight:600;padding-top:18px}
.menu-card h2{text-align:center;font-family:"Fraunces",serif;font-weight:500;font-style:italic;
  font-size:clamp(22px,4vw,30px);color:var(--plum-deep);margin:.3em 0 .1em}
.menu-rule{width:54px;height:1px;background:var(--gold-soft);margin:14px auto 22px}
.menu-list{list-style:none;margin:0;padding:0}
.menu-item{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:baseline;
  padding:13px 4px;border-top:1px dashed var(--line)}
.menu-item:first-child{border-top:none}
.menu-item .m-name{font-family:"Fraunces",serif;font-size:18px;color:var(--ink)}
.menu-item .m-time{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--gold);white-space:nowrap}
.menu-item .m-note{grid-column:1/2;font-size:13px;color:var(--muted);font-style:italic;margin-top:2px}

/* ===========================================================================
   Singleboard
   ========================================================================= */
/* two columns: profiles on the left, "add your profile" on the right */
.single-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start;max-width:1040px;margin:0 auto}
.single-layout .single-form{margin:0;position:sticky;top:16px}
@media (max-width:820px){ .single-layout{grid-template-columns:1fr} .single-layout .single-form{position:static;order:-1} }
/* profiles stacked one on top of another */
.single-grid{display:flex;flex-direction:column;gap:12px;margin-top:14px}
/* live "posting as…" preview on the form */
.self-preview{background:var(--paper2);border:1px dashed var(--line);border-radius:14px;padding:12px;margin-bottom:14px}
.self-preview .single-card{box-shadow:none}
/* filter / sort bar above the profiles */
.board-filters{display:flex;gap:8px;margin:10px 0 4px}
.board-filters select{flex:1;min-width:0}
/* on phones the preview sticks to the top while you fill the form */
@media (max-width:820px){
  .self-preview{position:sticky;top:8px;z-index:5}
}
.single-card .sc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;
  padding-top:10px;border-top:1px solid var(--line2)}
.age-preview{background:var(--paper2);border:1px solid var(--line2);border-radius:8px;padding:7px 11px;color:var(--ink)}
.single-card .sc-loc{font-size:12.5px;color:var(--muted);margin-top:5px}
.single-card .sc-when{font-size:11.5px;color:var(--muted)}
.single-card .sc-actions{display:inline-flex;gap:8px;flex-wrap:wrap}
/* networkboard card extras */
.single-card .nc-role{font-size:14px;color:var(--ink);font-weight:600;margin-top:3px}
.single-card .nc-field{font-size:13px;color:var(--gold);margin-top:2px}
.single-card .nc-edu{font-size:12.5px;color:var(--muted);margin-top:3px}
.single-card .nc-link{margin-left:8px;color:var(--plum);font-weight:600;white-space:nowrap}
.single-card .sc-msg{padding:7px 14px;font-size:13px}
.single-card .sc-foot:empty{display:none}
.single-card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px}
.single-card .sc-top{display:flex;align-items:center;gap:10px}
.single-card .sc-id{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sc-avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--plum);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.sc-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.single-card .sc-name{font-family:"Fraunces",serif;font-size:19px;color:var(--plum-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.single-card .sc-age{font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap}
.single-card .sc-about{font-size:14px;color:var(--ink);margin-top:8px;white-space:pre-wrap;word-break:break-word}
.single-card .sc-contact{margin-top:12px;padding-top:10px;border-top:1px solid var(--line2);font-size:13px}
.single-card .sc-contact .lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:11px;display:block;margin-bottom:2px}
.single-card .sc-contact a,.single-card .sc-contact span{color:var(--plum);font-weight:600;word-break:break-word}
.single-card.anon .sc-name{font-style:italic;color:var(--muted)}
.checkrow{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--ink);cursor:pointer}
.checkrow input{width:auto}
.privacy-note{font-size:12px;color:var(--muted);font-style:italic;margin-top:8px}
/* WhatsApp "report via" button + separator */
.or-sep{text-align:center;color:var(--muted);font-size:12px;margin:12px 0;position:relative}
.wa-btn{background:#25d366;border-color:#25d366;color:#fff;display:inline-flex;align-items:center}
.wa-btn:hover{background:#1ebe5b;border-color:#1ebe5b}
.wa-btn svg{flex:0 0 auto}
/* Gift: wish preview shown before posting to the wishboard */
.wish-preview{background:var(--paper2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px;
  white-space:pre-wrap;word-break:break-word;color:var(--ink);min-height:20px}
.wish-preview.muted{color:var(--muted);font-style:italic}
/* Gift bank-details disclaimer */
.bank-disclaimer{margin-top:14px;padding-top:12px;border-top:1px solid var(--line2);
  font-size:12.5px;color:var(--muted);font-style:italic;line-height:1.5}

/* registration gate (singleboard) */
.board-gate{position:relative;min-height:300px}
/* locked (haven't posted): keep it compact so the prompt sits right after the
   form instead of stretching down a tall blurred placeholder */
.board-gate.locked{min-height:0}
.board-gate.locked .gate-overlay{position:static;padding:0;margin-top:12px}
.board-gate.locked .gate-content{display:none}
.gate-content.blurred{filter:blur(6px);pointer-events:none;user-select:none;opacity:.85}
.gate-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;z-index:6}
.gate-overlay[hidden]{display:none}
.gate-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:26px 24px;text-align:center;display:flex;flex-direction:column;gap:14px;max-width:360px;width:90%}
.gate-card .gate-title{font-family:"Fraunces",serif;font-size:20px;color:var(--plum-deep);line-height:1.25}
.gate-card .btn{justify-content:center}
/* skeleton placeholder cards shown (blurred) behind the lock message */
.single-card.skel{pointer-events:none}
.single-card.skel .sk{border-radius:6px;margin:9px 0;
  background:linear-gradient(90deg,var(--line2),var(--paper2),var(--line2))}
.single-card.skel .sk-name{height:18px;width:55%;margin-top:2px}
.single-card.skel .sk-line{height:12px;width:88%}
.single-card.skel .sk-line.short{width:46%}

/* ===========================================================================
   Mobile tweaks
   ========================================================================= */
@media (max-width:640px){
  .wrap{padding-left:12px;padding-right:12px}
  .guests-scroll{display:none}        /* hide the wide guest table … */
  .guests-mobile{display:block}       /* … and show the compact tappable list */
  /* admin tabs: wrap onto multiple rows instead of scrolling sideways */
  .tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;
    border:none;border-radius:0;overflow:visible;background:none}
  .tabs button{border:1px solid var(--line);border-radius:10px;background:#fff;
    white-space:normal;text-align:center;line-height:1.2;padding:11px 10px}
  .tabs button.on{border-color:var(--plum)}
  .admin-head h1{font-size:24px}
  .toolbar-row .grow{min-width:140px}
  /* data tables become stacked cards (one row = one card) — no sideways scroll */
  .scroll{max-height:none;overflow:visible;border:none;border-radius:0;background:none}
  table.grid,table.grid tbody{display:block;width:100%;min-width:0}
  table.grid thead{display:none}
  table.grid tr{display:block;background:var(--card);border:1px solid var(--line);
    border-radius:12px;padding:4px 12px;margin-bottom:10px}
  table.grid td{display:flex;justify-content:space-between;align-items:center;gap:12px;
    padding:8px 0;border-bottom:1px solid var(--line2);white-space:normal;text-align:right}
  table.grid tr td:last-child{border-bottom:none}
  table.grid td[data-label]::before{content:attr(data-label);flex:0 0 40%;text-align:left;
    font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600}
  table.grid td.right{justify-content:flex-end}
  table.grid td.right::before{content:none}
  table.grid td.empty{display:block;text-align:center;color:var(--muted)}
  table.grid td input,table.grid td select{width:auto;max-width:58%}
  table.grid.fit td,table.grid.fit th{white-space:normal}
  table.grid.fit input[type=text],table.grid input.name,table.grid button.name{min-width:0}
  .nav{padding-top:12px;gap:10px}
  .nav .links{gap:3px}
  .nav a.link,.nav button.link{font-size:12px;padding:7px 9px}
  .nav .lang{min-width:0}
}

/* Inputs are 16px on mobile so iOS doesn't auto-zoom the page when they focus. */
@media (max-width:820px){
  input[type=text],input[type=number],input[type=password],input[type=email],input[type=tel],select,textarea{font-size:16px}
}

/* Mobile nav: a floating pill toggle (bottom-centre) opens a bottom sheet that
   slides up — best practice for carrying several links without crowding mobile. */
@media (max-width:820px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}   /* clear the floating toggle */
  .nav.nav-open{z-index:100}                /* lift the whole nav layer above page content */

  /* floating pill toggle (☰ → ✕) — iOS "liquid glass" */
  .nav-burger{display:inline-flex;position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
    width:46px;height:46px;padding:0;gap:4px;border-radius:50%;
    background:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 10px 26px -8px rgba(60,40,60,.42), inset 0 1px 0 rgba(255,255,255,.8);z-index:92}
  .nav-burger span{width:16px;background:var(--plum-deep)}

  /* language toggle stays on the top bar (top-right); hide the in-sheet copy */
  .nav .nav-lang{display:inline-flex;margin-left:auto;
    background:rgba(255,255,255,.42);
    -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
  .nav .links .lang{display:none}

  /* dimmed + blurred backdrop */
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(40,30,42,.22);z-index:88;
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .nav.nav-open .nav-backdrop{opacity:1;visibility:visible}

  /* bottom sheet — frosted glass panel; height fits content (capped), slides up */
  .nav .links{position:fixed;left:10px;right:10px;bottom:calc(80px + env(safe-area-inset-bottom,0px));top:auto;z-index:90;
    flex-direction:column;align-items:stretch;gap:4px;max-height:64vh;overflow-y:auto;
    background:rgba(255,253,248,.6);
    -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);border-radius:22px;
    box-shadow:0 24px 60px -16px rgba(60,40,60,.45), inset 0 1px 0 rgba(255,255,255,.65);padding:10px;
    transform:translateY(120%);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .25s,visibility .32s}
  .nav.nav-open .links{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  .nav .links a.link,.nav .links button.link{width:100%;text-align:left;font-size:15px;padding:13px 14px;border-radius:14px;border-color:transparent}
  .nav .links a.link:hover,.nav .links button.link:hover,.nav .links a.link:active{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.7)}
  /* section tabs live inside the sheet on mobile; the on-page tab grid is hidden */
  .nav-admin .links .nav-tab{display:block}
  .nav-admin .links .nav-tab.on{background:var(--plum);color:#fff}
  .tabs{display:none}   /* the section tabs moved into the hamburger sheet */
  .nav .links .lang{width:100%;text-align:left;min-width:0}
  .nav #authSlot{margin-left:0;width:100%}
  /* In the sheet, show the profile menu inline (Profile / Language / Sign out)
     instead of a dropdown; the avatar circle is hidden. When signed in the
     top-bar language twin is hidden, so the in-sheet "Dil" carries the toggle. */
  .nav .links .avatar-wrap{width:100%}
  .nav .links .avatar{display:none}
  .nav .links .avatar-menu,
  .nav .links .avatar-menu[hidden]{display:flex;position:static;flex-direction:column;
    background:none;border:none;box-shadow:none;padding:0;min-width:0}
  .nav .links .avatar-menu button,
  .nav .links #navSignIn{width:100%;text-align:left;font-size:15px;padding:13px 14px;border-radius:14px;
    font-weight:600;color:var(--plum-deep);background:none;border:1px solid transparent;cursor:pointer;font-family:inherit}
  .nav .links .avatar-menu button:hover,
  .nav .links #navSignIn:hover{background:rgba(255,255,255,.6)}
}