/* =========================================================================
   RVS Ganesh Festival — stylesheet
   Fraunces (display) + Work Sans (body/UI). Light, festive, fast.
   ========================================================================= */

:root{
  --cream:#FFFBF3;
  --card:#FFFFFF;
  --ink:#2B1710;
  --muted:#7A6255;
  --hair:#EFE4D4;
  --gold:#E8A33D;
  --gold-deep:#C8860B;
  --red:#8C1225;
  --red-deep:#4A0E12;
  --green:#2E7D5B;
  --amber:#B4740E;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 10px 28px -14px rgba(74,14,18,.22);
  --shadow-lg:0 22px 48px -18px rgba(74,14,18,.30);
  --max:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans','Noto Sans Devanagari',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img{max-width:100%; display:block;}
a{color:inherit;}
button{font-family:inherit;}

h1,h2,h3{
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif;
  font-weight:600;
  /* 1.18 was tight enough that Devanagari matras (the marks above and below
     the letters) collided between wrapped lines in Marathi. */
  line-height:1.28;
  text-wrap:balance;
  margin:0 0 .4em;
}
h1{font-size:clamp(28px,5vw,42px);}
h2{font-size:clamp(22px,3.4vw,28px);}
h3{font-size:18px;}
p{margin:0 0 1em; color:var(--ink);}
.muted{color:var(--muted);}

.container{max-width:var(--max); margin:0 auto; padding:0 20px;}
/* Vertical only — pages use class="section container" on ONE element, and the
   `padding:52px 0` shorthand used to silently wipe out .container's 20px side
   padding, letting text run edge-to-edge on phones. */
.section{padding-top:52px; padding-bottom:52px;}
.section-head{max-width:60ch; margin:0 0 28px;}
.eyebrow{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin:0 0 10px;
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--hair);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;}
.brand-mark{width:42px; height:42px; flex-shrink:0; object-fit:contain;}
.brand-text{line-height:1.1;}
.brand-text .short{font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif; font-weight:700; font-size:18px;}
/* Desktop has no room for it beside seven links; the mobile rule below
   brings it back once those links are behind the hamburger. */
.brand-text .full{display:none;}
.nav-links{display:flex; gap:2px; flex-wrap:nowrap; align-items:center;}
.nav-link{
  padding:8px 11px; border-radius:999px; font-size:14px; font-weight:500;
  white-space:nowrap;
  text-decoration:none; color:var(--ink); cursor:pointer; border:none; background:none;
}
.nav-link:hover{background:var(--hair);}
.nav-link.active{background:var(--red); color:#fff;}
.lang-switch{display:flex; border:1.5px solid var(--hair); border-radius:999px; padding:3px; gap:2px; background:#fff; flex-shrink:0;}
.lang-btn{
  border:none; background:none; cursor:pointer; padding:6px 13px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--muted); white-space:nowrap;
}
.lang-btn.active{background:var(--red); color:#fff;}
.lang-switch-mobile{display:none;}

.nav-toggle{display:none;}

@media (max-width:980px){
  .nav-links{
    position:fixed; inset:60px 0 0 0; background:var(--cream);
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; padding:12px 20px;
    display:none; gap:2px; overflow-y:auto;
  }
  .nav-links.open{display:flex;}
  .nav-link{padding:14px 12px; text-align:left; font-size:16px;}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:9px; border:1px solid var(--hair);
    background:#fff; cursor:pointer; font-size:18px; flex-shrink:0;
  }
  .lang-switch-desktop{display:none;}
  .lang-switch-mobile{
    display:flex; width:100%; margin-top:10px; padding:4px;
  }
  .lang-switch-mobile .lang-btn{flex:1; text-align:center; padding:12px 8px;}
  .brand-text .short{font-size:16px;}
  .brand-text .full{
    display:block; max-width:190px; font-size:9.5px; line-height:1.2;
    color:var(--muted); margin-top:1px;
  }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-size:15px; font-weight:600;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform:scale(.98);}
/* Ganesha artwork on the primary CTAs. Sized a little taller than the cap
   height so the figure reads at a glance without inflating the button. */
.btn-icon{
  width:26px; height:26px; object-fit:contain; flex:0 0 auto;
  margin:-6px 0; display:block;
}
.btn-sm .btn-icon{width:20px; height:20px; margin:-4px 0;}
/* White disc behind Google's G, so the mark keeps its own colours on the
   dark red button instead of the blue disappearing into it. */
.btn .g-mark{
  display:inline-grid; place-items:center; flex:0 0 auto;
  width:24px; height:24px; border-radius:50%; background:#fff;
  margin:-3px 2px -3px -6px;
}
.btn .g-mark svg{display:block;}
.btn-primary{background:var(--red); color:#fff; box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--red-deep);}
.btn-gold{background:linear-gradient(135deg,#FFD866,#E8A33D); color:var(--red-deep);}
.btn-outline{background:#fff; color:var(--ink); border-color:var(--hair);}
.btn-outline:hover{border-color:var(--gold-deep);}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
.btn-sm{padding:8px 14px; font-size:13px;}

/* ---------- Hero ---------- */
.hero{padding:0 0 20px;}

/* Full-bleed banner. The artwork keeps Ganesha in the left third and leaves
   the right side soft and open, so the copy sits on the right on desktop —
   nothing is ever laid over the deity's face. The photo itself stays at full
   opacity; legibility comes from a gradient scrim that only darkens the
   text side, so the image reads vivid rather than washed out. */
.hero-banner{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(440px, 62vh, 660px);
  display:flex; align-items:center;
  background:var(--red-deep);
}
.hero-banner::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('assets/hero-ganesha.jpg') no-repeat;
  background-size:cover;
  background-position:18% center;
  /* Starts a touch oversized and eases back to 1 as you scroll past, so it
     never scales below full-bleed and exposes the band behind it.
     Origin matches background-position so Ganesha stays put while it scales. */
  transform:scale(var(--hero-scale, 1.08));
  transform-origin:18% center;
  will-change:transform;
}
.hero-banner::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(42,8,12,0)   0%,
      rgba(42,8,12,.10) 34%,
      rgba(42,8,12,.62) 55%,
      rgba(42,8,12,.80) 74%,
      rgba(42,8,12,.84) 100%);
}

.hero-copy{
  width:100%; text-align:left;
  margin-left:auto; margin-right:auto;
  padding-top:56px; padding-bottom:56px;
}
/* Push the copy into the open right-hand half of the artwork. */
.hero-copy > *{max-width:30rem; margin-left:auto; margin-right:0;}

.hero-copy .eyebrow{color:#F6C97A;}
.hero-copy h1{color:#fff; margin-bottom:14px; text-shadow:0 2px 18px rgba(30,4,8,.55);}
.hero-copy p.lead{
  /* Same 30rem column as the eyebrow, heading, dates and buttons — a wider
     measure here made the paragraph jut out to the left of everything else. */
  max-width:30rem; margin:0 0 20px auto; font-size:16.5px; line-height:1.65;
  color:rgba(255,248,236,.92); text-shadow:0 1px 10px rgba(30,4,8,.5);
}
/* The <p> stays a block so it keeps the hero column's alignment; the chip
   itself is the inline pill, so its width tracks the text. */
/* Festival dates. Deliberately NOT pill-shaped: a rounded pill next to the
   CTAs reads as a third button and flattens the call-to-action hierarchy.
   A low-contrast glass panel with small-caps labels reads as information —
   the buttons keep the pill shape and solid fill to themselves. */
.hero-dates{margin-bottom:26px;}
.hero-dates-panel{
  display:inline-flex; flex-wrap:wrap; align-items:stretch;
  padding:12px 6px; border-radius:12px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
}
.hero-date{display:flex; flex-direction:column; gap:3px; padding:0 18px;}
.hero-date + .hero-date{border-left:1px solid rgba(251,217,138,.20);}
.hero-date-label{
  font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(251,217,138,.82); line-height:1.4;
}
.hero-date-value{
  font-size:15px; font-weight:600; color:#fff; line-height:1.35;
  text-shadow:0 1px 8px rgba(30,4,8,.45);
}
/* Stacked on narrow phones, so the divider moves from the side to the top. */
@media (max-width:430px){
  .hero-dates-panel{flex-direction:column; padding:12px 4px;}
  .hero-date + .hero-date{
    border-left:0; border-top:1px solid rgba(251,217,138,.20);
    margin-top:10px; padding-top:10px;
  }
}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start;}

/* Outline button on a dark photo needs to be light, not white-on-white. */
.btn-ghost{
  background:rgba(255,255,255,.10); color:#fff;
  border:1px solid rgba(255,255,255,.55); backdrop-filter:blur(3px);
}
.btn-ghost:hover{background:rgba(255,255,255,.20); border-color:#fff;}

/* Below ~900px the artwork can't hold both the deity and a text column, so
   the copy centres and the scrim becomes vertical: the top stays clear so
   Ganesha is visible, the bottom carries the text. */
@media (max-width:900px){
  .hero-banner{min-height:auto; align-items:flex-end;}
  /* On a narrow portrait viewport "cover" scales to the height, so only a
     thin vertical slice of this 16:9 artwork is visible. Ganesha's centre
     sits at roughly 27% across, so anchor there — 50% lands on empty bokeh. */
  .hero-banner::before{background-position:27% 24%;}
  .hero-banner::after{
    background:linear-gradient(180deg,
      rgba(42,8,12,.10)  0%,
      rgba(42,8,12,.16) 22%,
      rgba(42,8,12,.60) 40%,
      rgba(42,8,12,.86) 62%,
      rgba(42,8,12,.92) 100%);
  }
  /* Reserve a band of clear image above the copy so the text starts below
     the face rather than across it. Scales with the viewport width. */
  .hero-copy{text-align:center; padding-top:max(250px, 62vw); padding-bottom:40px;}
  .hero-copy > *{margin-left:auto; margin-right:auto;}
  .hero-copy p.lead{margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
}
@media (max-width:520px){
  .hero-copy p.lead{font-size:15.5px; line-height:1.6;}
  .hero-copy h1{margin-bottom:10px;}
  .hero-actions .btn{width:100%;}
}
@media (prefers-reduced-motion:no-preference){
  .hero-banner::before{transition:background-position .6s ease;}
}

/* ---------- Slider ---------- */
.slider{
  position:relative; max-width:820px; margin:0 auto; padding:0;
}
.slider-frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:16/9; background:var(--hair);
  max-height:380px; margin:0 auto;
}
.slider-track{display:flex; height:100%; transition:transform .5s cubic-bezier(.3,.7,.2,1);}
.slider-slide{min-width:100%; height:100%; position:relative; overflow:hidden;}

/* Festival photos arrive in wildly different shapes — portrait idol shots,
   landscape group photos, ultra-wide crowd shots. "contain" keeps every one
   whole (no cropped heads), and a blurred copy of the same photo fills the
   leftover space so the frame still reads as one solid block. */
.slider-photo{
  position:relative; z-index:1;
  width:100%; height:100%; object-fit:contain; object-position:center;
}
.slider-backdrop{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(26px) saturate(1.25) brightness(.62);
  transform:scale(1.15);   /* hides the soft edge the blur leaves behind */
}
/* Opt-in per image: fill the frame edge to edge, cropping as needed. */
.slider-slide.fill .slider-photo{object-fit:cover;}
.slider-slide.fill .slider-backdrop{display:none;}

@media (max-width:640px){
  .slider-frame{aspect-ratio:3/2; max-height:260px;}
  .slider-backdrop{filter:blur(18px) saturate(1.25) brightness(.62);}
}
.slider-caption{
  position:absolute; left:0; right:0; bottom:0; padding:18px 22px;
  background:linear-gradient(0deg,rgba(74,14,18,.75),transparent);
  color:#fff; font-size:14px; font-weight:600;
}
.slider-dots{display:flex; gap:8px; justify-content:center; margin-top:14px;}
.slider-dot{width:8px; height:8px; border-radius:50%; background:var(--hair); border:none; cursor:pointer; padding:0;}
.slider-dot.active{background:var(--red);}
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px;
  border-radius:50%; border:none; background:rgba(255,255,255,.85); cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.slider-prev{left:12px;} .slider-next{right:12px;}

/* ---------- Cards / grid ---------- */
.grid{display:grid; gap:28px;}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.card{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .2s ease;
}
.card-link{cursor:pointer; text-decoration:none; display:block;}
.card-link:hover,
.card-link:focus-visible{
  transform:translateY(-6px) scale(1.025);
  box-shadow:var(--shadow-lg);
  border-color:var(--gold-deep);
  outline:none;
}
.card-link:active{transform:translateY(-2px) scale(1.01);}

/* Honour the OS "reduce motion" setting for both the hover lift and the
   scroll-linked scaling above. */
@media (prefers-reduced-motion:reduce){
  .card{transition:border-color .2s ease;}
  .card-link:hover,
  .card-link:focus-visible{transform:none;}
  .hero-banner::before,
  .mid-feature::before{transform:none; transition:none;}
}

/* ---------- Feedback wall ---------- */
.fb-form{margin-bottom:34px; padding:24px 22px;}
.fb-form h3{margin:0 0 18px;}
.fb-form textarea{resize:vertical; min-height:96px;}
.fb-note{
  font-size:13px; color:var(--muted); margin:0 0 18px;
  padding-left:11px; border-left:3px solid var(--gold);
}

/* Signed-out state: the card asks for a sign-in instead of showing fields. */
.fb-signin p{max-width:56ch; margin:0 0 18px; font-size:14px; line-height:1.65;}

/* Signed-in state: whose name is about to appear on the wall. */
.fb-as{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--cream); border:1px solid var(--hair); border-radius:var(--radius);
  padding:10px 14px; margin-bottom:20px;
}
.fb-as-pic{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:1px solid var(--hair); background:#fff; object-fit:cover;
}
.fb-as-letter{
  display:grid; place-items:center;
  font:700 17px/1 inherit; color:var(--red); background:#fff;
}
.fb-as-txt{display:flex; flex-direction:column; min-width:0; line-height:1.3;}
.fb-as-label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
.fb-as-txt strong{font-size:15px; color:var(--ink);}
.fb-as-mail{font-size:12px; color:var(--muted); overflow-wrap:anywhere;}
.fb-switch{
  margin-left:auto; border:0; background:none; padding:0; cursor:pointer;
  font:600 12.5px/1.3 inherit; color:var(--gold-deep); text-decoration:underline;
  text-underline-offset:3px;
}
.fb-switch:hover,.fb-switch:focus-visible{color:var(--red); outline:none;}

/* Notification opt-in. Sits above the lookup result because the tap has to be
   somewhere a resident will actually see it. */
.notify-card{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--cream); border:1px solid var(--hair); border-left:3px solid var(--gold);
  border-radius:var(--radius); padding:14px 16px; margin-bottom:16px;
}
.notify-card.is-on{border-left-color:#1baf7a;}
.notify-txt{display:flex; flex-direction:column; gap:3px; min-width:180px; flex:1 1 240px;}
.notify-txt strong{font-size:15px; color:var(--ink);}
.notify-txt span{font-size:13px; color:var(--muted); line-height:1.5;}
.notify-card .btn{flex:none;}
.notify-msg{
  margin:0; flex:1 1 100%; font-size:12.5px; line-height:1.55; color:var(--muted);
}
.notify-card.is-on .notify-msg{flex:1 1 auto; color:#0f7a54; font-weight:600;}
.notify-msg:empty{display:none;}
.notify-install{flex-direction:column; align-items:stretch; gap:10px;}
/* .notify-txt carries flex:1 1 240px for the horizontal card; left alone in a
   column it grows vertically and opens a gap above the steps. */
.notify-install .notify-txt{flex:0 0 auto;}
.notify-steps{
  margin:2px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px;
  font-size:13px; line-height:1.5; color:var(--ink);
}
.notify-steps li{padding-left:2px;}

/* Notification how-to. Collapsed by default so it never competes with the
   lookup form, which is what people actually come here for. */
/* Broadcast audience picker. Each option states its own reach, because
   "Everyone" and "Committee only" are not recoverable from each other once
   a message has gone out. */
.aud-opt{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  border:1px solid var(--hair); border-radius:12px; background:#fff;
  padding:11px 13px; margin-bottom:9px; font-weight:400;
}
.aud-opt:hover{border-color:var(--gold-deep);}
.aud-opt input{margin-top:3px; flex:none; accent-color:var(--red);}
.aud-opt span{display:flex; flex-direction:column; gap:2px; min-width:0;}
.aud-opt strong{font-size:14.5px; color:var(--ink);}
.aud-opt em{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.45;}
.aud-tag{
  background:var(--cream); border:1px solid var(--gold); border-radius:999px;
  padding:2px 9px; font-size:11px; font-weight:700; color:var(--gold-deep);
}

.notify-help{
  border:1px solid var(--hair); border-left:3px solid var(--gold);
  border-radius:var(--radius); background:var(--cream);
  /* Clear of the Search button above and the lookup result below, so the
     panel reads as its own thing rather than part of the form. */
  margin:26px 0 6px; overflow:hidden;
}
.notify-help > summary{
  display:flex; gap:12px; align-items:flex-start; cursor:pointer;
  padding:14px 16px; list-style:none;
}
.notify-help > summary::-webkit-details-marker{display:none;}
.notify-help > summary::after{
  content:'+'; margin-left:auto; flex:none;
  font:600 19px/1 inherit; color:var(--gold-deep);
}
.notify-help[open] > summary::after{content:'\2212';}
.notify-help > summary:hover{background:rgba(232,163,61,.07);}
.notify-help > summary > span:last-of-type{display:flex; flex-direction:column; gap:3px; min-width:0;}
.notify-help summary strong{font-size:15px; color:var(--ink);}
.notify-help summary em{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.5;}
.nhelp-bell{font-size:17px; line-height:1.4; flex:none;}
.nhelp-body{
  display:grid; gap:18px; padding:2px 16px 0;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.nhelp-plat h4{
  margin:0 0 7px; font-size:12px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gold-deep);
}
.nhelp-plat ol{
  margin:0; padding-left:19px; display:flex; flex-direction:column; gap:5px;
  font-size:13px; line-height:1.55; color:var(--ink);
}
.nhelp-note-inline{margin:0 0 6px; font-size:12.5px; color:var(--muted);}
.nhelp-foot{
  margin:16px 0 0; padding:11px 16px; font-size:12.5px; line-height:1.55;
  color:var(--muted); border-top:1px solid var(--hair); background:#fff;
}

.fb-wall-title{margin:0 0 16px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.fb-wall-title .muted{font-size:13.5px; font-weight:500;}

.fb-list{list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.fb-item{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
  border-left:3px solid var(--gold); box-shadow:var(--shadow);
  padding:16px 18px; display:flex; flex-direction:column; gap:10px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.fb-item:hover{transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(43,23,16,.55);}
/* The card body is the control that opens the full message, so it is a real
   button rather than a click handler on a div. */
.fb-open{
  display:flex; flex-direction:column; gap:10px; width:100%;
  border:0; background:none; margin:0; padding:0;
  font:inherit; color:inherit; text-align:start; cursor:pointer;
}
.fb-open:focus-visible{outline:2px solid var(--gold-deep); outline-offset:5px; border-radius:6px;}
.fb-msg{
  margin:0; font-size:15px; line-height:1.6; color:var(--ink);
  /* Posts are public and unmoderated, so a pasted URL or a very long word
     must wrap rather than stretch the card. */
  overflow-wrap:anywhere; white-space:pre-wrap;
  /* Clamp long posts to keep the grid even. The browser adds the ellipsis;
     the whole message is read in the spotlight. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden;
}
.fb-meta{
  margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted);
}
.fb-actions{display:flex; justify-content:flex-end;}
.fb-who{font-weight:700; color:var(--ink);}
.fb-flat{
  background:var(--cream); border:1px solid var(--hair); border-radius:999px;
  padding:2px 9px; font-weight:600;
}
.fb-when{margin-left:auto;}
.fb-del{
  border:1px solid var(--hair); background:#fff; color:var(--red);
  border-radius:999px; padding:3px 11px; font:700 11.5px/1 inherit; cursor:pointer;
}
.fb-del:hover,.fb-del:focus-visible{border-color:var(--red); background:#FFF3F4; outline:none;}

/* Reading a full message: same scrim and zoom as the committee spotlight,
   but the text needs a solid card behind it to stay readable. */
.fb-spot-panel{
  position:relative; width:100%; max-width:560px;
  /* visible, not auto: the close button sits outside this box, and auto on
     one axis makes the other auto too, which would crop it. */
  overflow:visible; margin:auto;
}
.fb-spot-card{
  background:var(--card); border-radius:var(--radius);
  border-left:3px solid var(--gold);
  box-shadow:0 26px 64px -22px rgba(0,0,0,.75);
  padding:26px 26px 20px; display:flex; flex-direction:column; gap:18px;
}
.fb-spot-msg{
  margin:0; font-size:16.5px; line-height:1.75; color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere;
}

/* ---------- Programme schedule ---------- */
.schedule{display:flex; flex-direction:column; gap:12px; margin-bottom:36px;}
.sched-day{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
  box-shadow:var(--shadow); border-left:4px solid var(--gold-deep);
  display:grid; grid-template-columns:minmax(180px,220px) 1fr; gap:6px 24px;
  padding:16px 20px;
  transition:box-shadow .28s ease, border-left-color .28s ease, transform .28s cubic-bezier(.2,.7,.3,1);
}
/* Scoped to .is-in so the hover transform can't fight the reveal transform. */
.sched-day.is-in:hover{
  transform:translateX(4px); box-shadow:var(--shadow-lg); border-left-color:var(--red);
}
.sched-day.is-in:hover .sd-wing{background:var(--red); color:#fff; border-color:var(--red);}
.sd-wing{transition:background .28s ease, color .28s ease, border-color .28s ease;}

/* Scroll reveal. The hidden state only ever applies once JS has added
   .reveal, so a render without it is still fully visible. */
.reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.reveal.is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal, .reveal.is-in{opacity:1; transform:none; transition:none;}
  .sched-day, .sched-day.is-in:hover{transition:none; transform:none;}
}
.sched-date{display:flex; flex-direction:column; align-items:flex-start; gap:7px;}
.sd-when{font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif; font-size:16.5px; font-weight:600;}
.sd-wing{
  font-size:11.5px; font-weight:700; letter-spacing:.04em;
  background:#FFF3F4; color:var(--red); border:1px solid rgba(140,18,37,.18);
  padding:3px 10px; border-radius:999px; white-space:nowrap;
}
.sched-events{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.sched-events li{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
}
.sched-events li + li{border-top:1px dashed var(--hair); padding-top:8px;}
.se-title{font-weight:600; font-size:15px;}
.se-time{font-size:13.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;}

.notices{
  background:#FFF7E6; border:1px solid var(--hair); border-left:4px solid var(--gold-deep);
  border-radius:var(--radius); padding:20px 22px;
}
.notices h3{font-size:17px; margin:0 0 12px;}
.notices ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px;}
.notices li{font-size:14.5px; line-height:1.6; color:var(--ink);}
.notice-sub{list-style:disc; margin:7px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:4px;}
.notice-sub li{font-size:14px; color:var(--muted);}

@media (max-width:640px){
  .sched-day{grid-template-columns:1fr; gap:12px; padding:15px 17px;}
  .sched-date{flex-direction:row; align-items:center; justify-content:space-between; width:100%;}
}

/* ---------- Program cards ---------- */
.program-card{border-left:4px solid var(--gold-deep);}
.program-meta{font-size:13px; color:var(--gold-deep); font-weight:600; margin-bottom:6px;}

/* ---------- Committee ---------- */
.committee-card{text-align:center;}
.committee-photo{
  width:104px; height:104px; border-radius:50%; margin:0 auto 12px; object-fit:cover;
  background:linear-gradient(135deg,#FFD866,#E8A33D); display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif; font-weight:700; color:var(--red-deep);
  /* Committee names are Devanagari — line-height:1.1 with overflow:hidden was
     clipping the top matra of names like "श्री" inside the circle. */
  padding:0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.35;
}
.committee-role{color:var(--gold-deep); font-size:13px; font-weight:600;}

/* Cards are real buttons now, so they need the card's own look back and a
   cue that they open something. */
.committee-card{
  text-align:center; width:100%; font:inherit; color:inherit; cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .2s ease;
}
.committee-card:hover,
.committee-card:focus-visible{
  transform:translateY(-5px); box-shadow:var(--shadow-lg);
  border-color:var(--gold-deep); outline:none;
}
.committee-card:active{transform:translateY(-1px);}

/* ---------- Member spotlight ---------- */
/* Matches the receipt lightbox: the portrait sits straight on the dark scrim
   with no card behind it, so nothing competes with the photo. */
.overlay.spot-overlay{
  align-items:center; padding:20px; background:rgba(30,12,8,.82);
  overflow-y:auto;
}
.spot-panel{
  position:relative; background:none; box-shadow:none; padding:0;
  width:100%; max-width:380px; text-align:center;
  /* visible, not auto: the controls sit outside this box and auto on one axis
     makes the other auto too, which cropped them. Scrolling moves to the
     overlay; margin:auto keeps it centred without flex clipping the top. */
  overflow:visible; margin:auto;
}
.spot-photo{
  width:200px; height:200px; border-radius:50%; margin:0 auto 20px; object-fit:cover;
  border:5px solid var(--gold); box-shadow:0 16px 44px -14px rgba(0,0,0,.7);
}
.spot-initial{
  background:linear-gradient(135deg,#FFD866,#E8A33D);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif; font-weight:700;
  color:var(--red-deep); line-height:1.3; padding:0 10px;
  white-space:nowrap; overflow:hidden;
}
/* Text now sits on the dark scrim, so it takes the light end of the palette. */
.spot-name{font-size:23px; margin:0 0 6px; color:#fff; text-shadow:0 2px 14px rgba(20,6,4,.6);}
.spot-role{color:#FBD98A; font-weight:600; font-size:15px; margin:0;}
.spot-count{font-size:12.5px; color:rgba(255,248,236,.72); margin:14px 0 0; font-variant-numeric:tabular-nums;}
.overlay.spot-overlay .spot-close,
.spot-nav{
  background:rgba(255,255,255,.13); color:#fff;
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  box-shadow:none;
}
.overlay.spot-overlay .spot-close:hover,
.overlay.spot-overlay .spot-close:focus-visible,
.spot-nav:hover,
.spot-nav:focus-visible{
  background:rgba(255,255,255,.26); border-color:#fff; color:#fff; outline:none;
}
.spot-close{position:absolute; top:-10px; right:-10px; margin:0;}
/* On these overlays the button is a child of the overlay itself, which is the
   scroll container, so it is pinned to the viewport and never scrolls with a
   long message or a tall photo. */
.overlay.spot-overlay > .spot-close{
  position:fixed; top:14px; right:14px; margin:0; z-index:6;
}
/* Holds whatever the spotlight is showing. It reproduces the centring the
   panel used to get as a direct flex child of the overlay. */
.spot-stage{display:flex; justify-content:center; width:100%; margin:auto;}
.spot-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.spot-prev{left:-22px;} .spot-next{right:-22px;}
@media (max-width:560px){
  .spot-photo{width:158px; height:158px;}
  .spot-prev{left:0;} .spot-next{right:0;}
  .spot-close{top:0; right:0;}
}
@media (prefers-reduced-motion:reduce){
  .committee-card{transition:none;}
  .committee-card:hover,.committee-card:focus-visible{transform:none;}
}

/* ---------- Forms ---------- */
.field{margin-bottom:18px;}
/* Wing dropdown and flat number sit on one line; they stack on narrow phones. */
.field-row{display:flex; gap:12px; align-items:flex-start;}
.field-row .field{flex:1 1 auto; margin-bottom:18px;}
.field-row .field-wing{flex:0 0 116px;}
@media (max-width:400px){
  .field-row{flex-wrap:wrap;}
  .field-row .field-wing{flex:1 1 100%;}
}
/* Restored: a bad index-slice edit dropped these, which put every label
   inline with its input and made every error message permanently visible. */
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px;}
.field .hint{font-size:12.5px; color:var(--muted); margin-top:5px;}
.field .error{font-size:12.5px; color:var(--red); margin-top:5px; display:none;}
.field.invalid .error{display:block;}
.field.invalid input{border-color:var(--red);}

input[type=text], input[type=tel], input[type=number], input[type=email],
input[type=date], select, textarea{
  width:100%; padding:13px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--hair);
  font-size:15.5px; font-family:inherit; background:#fff; color:var(--ink);
  /* One height for every control: select carries extra native chrome and sat
     taller than the text inputs beside it. */
  min-height:52px;
}
textarea{min-height:0; padding:13px 14px;}

/* ---------- Date picker ----------
   Custom because the native date popup is browser-drawn and unstylable. */
.datepicker{position:relative;}
.dp-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:52px; padding:13px 14px; border-radius:var(--radius-sm);
  border:1.5px solid var(--hair); background:#fff; color:var(--ink);
  font-family:inherit; font-size:15.5px; font-weight:500; cursor:pointer; text-align:left;
  transition:border-color .15s ease;
}
.dp-trigger:hover{border-color:var(--gold-deep);}
.dp-trigger.open{border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(232,163,61,.18);}
.dp-value{font-variant-numeric:tabular-nums;}
.dp-value.placeholder{color:var(--muted); font-weight:400;}
.dp-cal{color:var(--gold-deep); flex:none;}

/* Rendered in flow, not absolutely: .dialog scrolls and would clip a popup. */
.dp-pop{
  margin-top:10px; background:#fff; border:1px solid var(--hair);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 14px 10px;
  animation:dpIn .16s ease-out;
}
@keyframes dpIn{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }
.dp-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
.dp-month{
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif;
  font-size:16px; font-weight:600; text-transform:capitalize;
}
.dp-nav{
  width:34px; height:34px; flex:none; border-radius:50%; border:1px solid var(--hair);
  background:#fff; color:var(--ink); font-size:19px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
  min-height:0; padding:0;
}
.dp-nav:hover{background:var(--cream); border-color:var(--gold-deep);}
.dp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
.dp-dow span{
  text-align:center; font-size:11px; font-weight:700; letter-spacing:.04em;
  color:var(--muted); padding-bottom:6px; text-transform:uppercase;
}
.dp-day{
  /* Fixed square centred in its column: aspect-ratio on a 1fr column made
     each day a wide ellipse rather than a circle. */
  width:38px; height:38px; margin:1px auto; min-height:0; padding:0;
  border:none; background:none; cursor:pointer; border-radius:50%;
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
  transition:background .12s ease, color .12s ease;
}
.dp-day:hover{background:var(--cream);}
.dp-day.outside{color:var(--hair); font-weight:500;}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--gold);}
.dp-day.selected{background:var(--red); color:#fff;}
.dp-day.selected:hover{background:var(--red-deep);}
.dp-foot{display:flex; justify-content:flex-end; margin-top:8px; padding-top:8px; border-top:1px solid var(--hair);}
.dp-today{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:700; color:var(--gold-deep); padding:6px 10px; border-radius:8px;
  min-height:0;
}
.dp-today:hover{background:var(--cream);}
.field.invalid .dp-trigger{border-color:var(--red);}

select{
  width:100%; padding:12px 14px; border:1px solid var(--hair); border-radius:var(--radius-sm);
  font:inherit; font-size:15px; color:var(--ink); background:#fff; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A6255' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  padding-right:34px;
}
.field.invalid select{border-color:var(--red);}

/* Cash / UPI choice on the payment step. */
.pay-choice{display:flex; gap:10px; flex-wrap:wrap;}
.pay-option{
  flex:1 1 140px; display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:12px 16px; border:1px solid var(--hair); border-radius:var(--radius-sm);
  background:#fff; font-weight:600; font-size:14.5px;
  transition:border-color .15s ease, background .15s ease;
}
.pay-option:hover{border-color:var(--gold-deep);}
.pay-option input{accent-color:var(--red); width:17px; height:17px; margin:0;}
.pay-option:has(input:checked){border-color:var(--red); background:#FFF3F4;}
.field.invalid .pay-option{border-color:var(--red);}
/* One age box per child, wrapping on narrow screens. */
.kid-ages{display:flex; flex-wrap:wrap; gap:10px;}
.kid-age{display:flex; flex-direction:column; gap:4px; flex:0 0 84px;}
.kid-age span{font-size:11.5px; font-weight:600; color:var(--muted);}
.kid-age input{min-height:46px; padding:10px 12px; text-align:center; font-variant-numeric:tabular-nums;}
.field.invalid .kid-age input{border-color:var(--red);}

/* Explains why a young child gets no coupon. Warm, not a warning. */
.kid-note{
  background:#FFF7E6; border:1px solid var(--hair); border-left:3px solid var(--gold-deep);
  border-radius:var(--radius-sm); padding:12px 14px; font-size:13.5px;
  line-height:1.6; color:var(--ink); margin:0 0 18px;
}
.totals-line{display:flex; flex-wrap:wrap; gap:6px 20px; margin:0;}

.cash-note{
  background:#FFF7E6; border:1px solid var(--hair); border-left:3px solid var(--gold-deep);
  border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; margin-bottom:18px;
}

/* Review list on the final step. */
.review-list{margin:0 0 20px; padding:14px 16px; background:var(--cream); border:1px solid var(--hair); border-radius:var(--radius-sm);}
.review-row{display:flex; gap:12px; justify-content:space-between; padding:5px 0;}
.review-row + .review-row{border-top:1px solid var(--hair);}
.review-row dt{font-size:13px; color:var(--muted); font-weight:600;}
.review-row dd{margin:0; font-size:14px; font-weight:600; text-align:right; overflow-wrap:anywhere;}

/* ---------- Search & filter bar ---------- */
.search-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px;}
.search-field{flex:1 1 260px; min-width:200px; position:relative;}
.search-input{
  width:100%; min-height:46px; padding:11px 14px 11px 38px;
  border:1.5px solid var(--hair); border-radius:999px; background:#fff;
  font-family:inherit; font-size:14.5px; color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237A6255' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:14px center;
}
.search-input::-webkit-search-cancel-button{cursor:pointer;}
.filter-select{
  flex:0 1 auto; width:auto; min-width:150px; min-height:46px;
  padding:11px 36px 11px 14px; border-radius:999px; border:1.5px solid var(--hair);
  font-size:14px;
}
.result-count{font-size:13px; color:var(--muted); margin:0 0 12px;}

/* ---------- Image lightbox ----------
   Proof and receipt images open here instead of a new tab, so an admin keeps
   their place in the table. */
.overlay.img-overlay{align-items:center; padding:20px; background:rgba(30,12,8,.82);}
.img-frame{
  position:relative; width:100%; max-width:860px; max-height:92vh;
  display:flex; flex-direction:column; gap:10px;
}
.img-stage{
  flex:1; min-height:220px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border-radius:var(--radius); overflow:hidden;
}
.img-stage img{max-width:100%; max-height:78vh; object-fit:contain; border-radius:var(--radius);}
.img-err{color:#fff; font-size:14.5px; padding:28px; text-align:center;}
.img-close{
  position:absolute; top:-6px; right:-6px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:var(--ink); font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
}
.img-close:hover{background:var(--cream); color:var(--red);}
.img-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.img-nav:hover{background:#fff;}
.img-prev{left:-8px;} .img-next{right:-8px;}
.img-bar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  color:rgba(255,255,255,.85); font-size:13px;
}
.img-tab{color:#FBD98A; font-weight:600; text-decoration:none; font-size:13px;}
.img-tab:hover{text-decoration:underline;}
.img-overlay .spinner{border-color:rgba(255,255,255,.25); border-top-color:#fff;}
@media (max-width:640px){
  .img-close{top:4px; right:4px;}
  .img-prev{left:2px;} .img-next{right:2px;}
}

/* ---------- Expenses ---------- */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:20px;}
.nowrap{white-space:nowrap;}
.row-sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
/* Category identity in the ledger: neutral text with a colour dot that matches
   the spend bar, rather than a tinted pill. Keeps text on ink tokens. */
.cat-tag{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink);}
.cat-dot{width:9px; height:9px; border-radius:3px; flex:none;}
/* Overspend reads instantly, without relying on the number alone. */
.num-negative{color:var(--red);}
.num-due{color:var(--amber);}

.breakdown{
  background:var(--card); border:1px solid var(--hair); border-radius:var(--radius);
  padding:18px 20px 16px; margin-bottom:24px;
}
.breakdown-title{font-size:14px; margin:0 0 14px; color:var(--muted); font-weight:700;}

/* One stacked bar for the whole spend. Segments are flex-grown by amount, so
   widths are exact proportions; a 2px surface gap separates adjacent fills. */
.spend-bar{
  display:flex; gap:2px; height:22px; border-radius:6px; overflow:hidden;
  background:var(--hair); margin-bottom:16px;
}
.spend-seg{
  min-width:4px; border-radius:2px; cursor:default;
  transition:opacity .15s ease, transform .15s ease;
}
.spend-seg:first-child{border-radius:6px 2px 2px 6px;}
.spend-seg:last-child{border-radius:2px 6px 6px 2px;}
.spend-seg:only-child{border-radius:6px;}
/* Dim the rest while one is hovered, so the pair stands out. */
.bd-hovering .spend-seg{opacity:.32;}
.bd-hovering .spend-seg.bd-active{opacity:1;}

.spend-legend{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px;}
.spend-item{
  display:grid; grid-template-columns:12px 1fr auto 44px; align-items:center; gap:10px;
  padding:7px 8px; border-radius:7px; transition:background .15s ease;
}
.spend-item.bd-active{background:var(--cream);}
.sp-chip{width:12px; height:12px; border-radius:3px; flex:none;}
/* Text keeps ink tokens; the chip beside it carries the identity. */
.sp-name{font-size:13.5px; font-weight:600; color:var(--ink);}
.sp-amt{font-size:13.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums;}
.sp-pct{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; text-align:right;}

@media (max-width:460px){
  .spend-item{grid-template-columns:12px 1fr auto; }
  .sp-pct{display:none;}
}

/* Partial-payment amount grid + the computed balance line. */
.amount-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:460px){.amount-grid{grid-template-columns:1fr;}}
.due-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  background:var(--cream); border:1px solid var(--hair); border-left:3px solid var(--amber);
  border-radius:var(--radius-sm); padding:11px 14px; margin-bottom:18px;
}
.due-line .lbl{font-size:13.5px; font-weight:600; color:var(--muted);}
.due-line .val{font-size:17px; font-weight:700; color:var(--amber); font-variant-numeric:tabular-nums;}

/* Attached receipt list. */
.file-list{display:flex; flex-direction:column; gap:7px; margin-top:9px;}
.file-chip{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  background:var(--cream); border:1px solid var(--hair); border-radius:var(--radius-sm);
  padding:8px 12px; font-size:13.5px;
}
.file-chip .fname{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.file-chip button{
  border:none; background:none; cursor:pointer; color:var(--red);
  font-size:12.5px; font-weight:700; padding:2px 6px; flex:none;
}
.badge-partial{background:#FDECC8; color:var(--amber);}
input:focus, textarea:focus, button:focus-visible{
  outline:2.5px solid var(--gold); outline-offset:1px; border-color:var(--gold-deep);
}
.stepper-row{display:flex; gap:10px;}
.qty{display:flex; align-items:center; border:1.5px solid var(--hair); border-radius:999px; overflow:hidden;}
.qty button{width:40px; height:40px; border:none; background:#fff; font-size:18px; cursor:pointer;}
.qty button:hover{background:var(--hair);}
.qty span{width:36px; text-align:center; font-weight:600; font-variant-numeric:tabular-nums;}

/* ---------- Stepper dialog ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(43,23,16,.55); z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
  /* iOS resolves fixed/inset and vh against the LAYOUT viewport (URL bar
     hidden), which is taller than what you can actually see. dvh tracks the
     visible area, so the dialog stops overflowing off the top behind the
     browser chrome. vh first as the fallback for browsers without dvh. */
  height:100vh;
  height:100dvh;
}
@media (min-width:640px){ .overlay{align-items:center; padding:20px;} }
/* The dialog is split into a header row that holds this button and a scroll
   pane below it (see addDialogClose), so the button is simply out of the
   scrolling flow: it cannot ride up with the content, and content cannot
   pass underneath it. */
.dialog-close{
  position:sticky; top:0; z-index:4;
  display:block; margin:-8px -6px 2px auto;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hair); background:#fff; color:var(--muted);
  font-size:25px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px -4px rgba(74,14,18,.3);
  transition:color .15s ease, border-color .15s ease;
}
.dialog-close:hover,
.dialog-close:focus-visible{color:var(--red); border-color:var(--red); outline:none;}

.dialog{
  background:var(--cream); width:100%; max-width:520px; overflow-y:auto;
  max-height:92vh;
  max-height:92dvh;
  border-radius:20px 20px 0 0; box-shadow:var(--shadow-lg); padding:26px 22px 28px;
  animation:slideUp .25s ease-out;
}
/* Applied once addDialogClose has wrapped the content: the dialog itself
   stops scrolling and becomes a column of [close button][scroll pane]. */
.dialog-framed{
  display:flex; flex-direction:column;
  padding:0; overflow:hidden;
}
.dialog-framed > .dialog-close{
  position:static; flex:0 0 auto; align-self:flex-end;
  margin:12px 14px 0 auto;
}
.dialog-framed > .dialog-scroll{
  /* min-height:0 so the pane can shrink below its content and actually
     scroll, rather than pushing the dialog past its max-height. */
  flex:1 1 auto; min-height:0; overflow-y:auto;
  padding:4px 22px 28px;
}
@media (min-width:640px){ .dialog{border-radius:18px;} }
@keyframes slideUp{ from{transform:translateY(24px); opacity:0;} to{transform:none; opacity:1;} }
.step-dots{display:flex; gap:6px; margin-bottom:18px;}
.step-dots span{height:4px; flex:1; border-radius:99px; background:var(--hair);}
.step-dots span.done{background:var(--red);}
.step-dots span.now{background:var(--gold-deep);}

.jai-ganesh{
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif; font-weight:700; font-size:22px; color:var(--red);
  text-align:center; margin-bottom:4px;
}
.success-sub{text-align:center; color:var(--muted); margin-bottom:22px; font-size:14.5px;}

.coupon-list{display:flex; flex-direction:column; gap:10px; margin:18px 0;}
.coupon-mini{
  border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:linear-gradient(135deg,#FFFDF6 0%,#FFD866 45%,#FF9A3D 75%,#D62839 100%);
  color:var(--red-deep); font-weight:700; box-shadow:var(--shadow);
}
.coupon-mini .cno{font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif; font-size:20px; font-variant-numeric:tabular-nums;}
.coupon-mini .clabel{font-size:12px; font-weight:600; opacity:.85;}

.footer-admin{margin:10px 0 0;}
.footer-admin a{font-size:12.5px; color:var(--muted); text-decoration:none; opacity:.75;}
.footer-admin a:hover{opacity:1; text-decoration:underline;}

/* ---------- Digital food coupons ---------- */
.count-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px;
  padding:0 8px; border-radius:999px; background:var(--red); color:#fff;
  font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1;
}

/* Row preview: a small fanned stack of cards + the number range. */
.coupon-peek{
  display:inline-flex; align-items:center; gap:12px; padding:6px 10px 6px 6px;
  border:1px solid var(--hair); border-radius:999px; background:#fff; cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.coupon-peek:hover{border-color:var(--gold-deep); box-shadow:var(--shadow); transform:translateY(-1px);}
/* Wide enough that the fanned-out cards on hover never reach the number text. */
.coupon-stack{position:relative; width:50px; height:26px; flex-shrink:0;}
.cs-card{
  position:absolute; top:0; left:0; width:26px; height:26px; border-radius:5px;
  background:linear-gradient(135deg,#FFFDF6 0%,#FFD866 45%,#FF9A3D 75%,#D62839 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transform:translateX(calc(var(--k) * 5px)) rotate(calc((var(--k) - 1) * 4deg));
  transition:transform .22s cubic-bezier(.34,1.4,.64,1);
}
.coupon-peek:hover .cs-card{
  transform:translateX(calc(var(--k) * 11px)) rotate(calc((var(--k) - 1) * 11deg)) translateY(-2px);
}
.coupon-range{font-variant-numeric:tabular-nums; white-space:nowrap;}

/* Full coupon card shown in the modal — mirrors the printed coupon. */
.coupon-full-list{display:flex; flex-direction:column; gap:12px;}
/* A real cloakroom ticket: two notches punched at the perforation line, a
   raised edge, and a shadow that sits it above the page. The notches are
   circles painted in the colour of whatever is behind the ticket, half on and
   half off the card, so they read as holes rather than dots. --ticket-bg must
   therefore match the surface the coupon is laid on. */
/* ---------------------------------------------------------------------------
   Food coupon, built to the printed ticket: chamfered corners, a punched
   perforation, a warm gradient that deepens toward the number, and faint
   Ganesha and sunburst watermarks.

   Everything is sized in cqw (a share of the ticket's own width) so the whole
   thing scales as one piece instead of reflowing, with a px floor on each
   value so text stays readable on a narrow phone. --ticket-bg must match the
   surface behind the card: the notches are painted in it, not cut out.
   --------------------------------------------------------------------------- */
.coupon-full-list{container-type:inline-size;}

.ticket{
  --ticket-bg:var(--cream);
  --ch:2.6cqw;          /* corner chamfer */
  --notch:1.7cqw;       /* radius of the punched bite */
  --rim:#D9A441;
  position:relative; color:var(--red-deep);
  background:var(--rim);
  clip-path:polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch),
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
  filter:drop-shadow(0 2px 3px rgba(74,14,18,.34)) drop-shadow(0 14px 24px rgba(74,14,18,.34));
  animation:couponIn .42s cubic-bezier(.22,1,.36,1) backwards;
  animation-delay:calc(var(--i) * 70ms);
  transition:transform .18s ease;
}
.ticket:hover{transform:translateY(-3px);}
@keyframes couponIn{
  from{opacity:0; transform:translateY(16px) scale(.96);}
  to{opacity:1; transform:none;}
}

/* The face sits inside the rim, chamfered to match, and carries the gradient.
   Insetting a second clipped layer is what draws a border that actually
   follows the cut corners; a real border would be sliced off at each chamfer. */
.tk-face{
  position:relative; overflow:hidden;
  margin:0.16cqw;
  clip-path:polygon(
    var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch),
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch));
  background:
    /* the darker wedge in the lower left corner */
    linear-gradient(40deg, rgba(224,120,40,.38) 0 9%, transparent 26%),
    /* light through most of the card, saturating only toward the number */
    linear-gradient(158deg,
      #FFFEFC 0%, #FFFCF5 24%, #FFF5E2 44%,
      #FEE5BA 60%, #F9C579 76%, #F3A544 90%, #EE9331 100%);
  padding:2.6cqw 3cqw;
}

/* Rays behind the number only. Unmasked, a conic gradient reaches every
   corner and the whole ticket looks striped. */
.tk-face::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-conic-gradient(from 202deg at 85% 74%,
    rgba(206,98,20,.17) 0 1.5deg, transparent 1.5deg 4.4deg);
  -webkit-mask-image:radial-gradient(circle at 85% 74%, #000 0%, rgba(0,0,0,.35) 26%, transparent 46%);
  mask-image:radial-gradient(circle at 85% 74%, #000 0%, rgba(0,0,0,.35) 26%, transparent 46%);
}

.tk-wm-ganesha{
  position:absolute; top:-2cqw; right:1.5cqw; width:15cqw; height:auto;
  opacity:.13; pointer-events:none; mix-blend-mode:multiply;
}

/* ---- upper half ---- */
.tk-top{display:flex; align-items:flex-start; gap:2.2cqw;}
.tk-logo{width:max(42px,9cqw); height:max(42px,9cqw); object-fit:contain; flex:none;}
.tk-rule{width:1px; align-self:stretch; background:rgba(120,40,10,.34); flex:none;}
.tk-org{display:flex; flex-direction:column; min-width:0; gap:.35cqw;}
.tk-society{
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif;
  font-size:max(12.5px,2.55cqw); font-weight:700; line-height:1.18;
}
.tk-addr{font-size:max(8.5px,1.5cqw); line-height:1.35; opacity:.82; overflow-wrap:anywhere;}
.tk-fest{display:flex; align-items:center; gap:1.1cqw; margin-top:.5cqw;}
.tk-fest-icon{width:max(15px,3cqw); height:max(15px,3cqw); object-fit:contain; opacity:.85;}
.tk-fest-txt{
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif;
  font-size:max(12px,2.3cqw); font-weight:700; color:#DE6A1E; line-height:1.2;
}
.tk-flourish{
  flex:1; height:1px; min-width:2cqw; max-width:9cqw;
  background:linear-gradient(to right,rgba(222,106,30,.75),rgba(222,106,30,0));
}

/* ---- the perforation, with a bite punched out of each edge ---- */
.tk-perf{
  position:relative; height:1px; margin:2.1cqw -3cqw;
  background:repeating-linear-gradient(to right,
    rgba(74,14,18,.55) 0 2px, transparent 2px 7px);
}
.tk-perf::before,.tk-perf::after{
  content:''; position:absolute; top:50%;
  width:calc(var(--notch) * 2); height:calc(var(--notch) * 2);
  border-radius:50%; background:var(--ticket-bg);
  box-shadow:inset 0 -1px 2px rgba(120,40,10,.4);
  transform:translateY(-50%);
}
.tk-perf::before{left:calc(var(--notch) * -1);}
.tk-perf::after{right:calc(var(--notch) * -1);}

/* ---- lower half ---- */
.tk-bottom{display:flex; align-items:center; gap:2cqw;}
.tk-left{display:flex; flex-direction:column; min-width:0; flex:1;}
.tk-label{
  display:flex; align-items:center; gap:1.1cqw;
  font-size:max(9px,1.55cqw); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:.7cqw; border-bottom:1px solid rgba(120,40,10,.3); align-self:flex-start;
}
.tk-cutlery{width:max(14px,2.8cqw); height:max(14px,2.8cqw); color:#C8860B; flex:none;}
.tk-name{
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif;
  font-size:max(19px,4cqw); font-weight:700; line-height:1.12; margin-top:1cqw;
  overflow-wrap:anywhere;
}
.tk-flat{
  align-self:flex-start; margin-top:1.1cqw;
  display:inline-flex; align-items:center; gap:1.1cqw;
  background:linear-gradient(180deg,#E4791F,#C85A12);
  color:#FFF6E6; border-radius:999px;
  padding:.5cqw 2.2cqw;
  font-size:max(12px,2.1cqw); font-weight:700; letter-spacing:.06em;
  box-shadow:0 1px 2px rgba(120,40,10,.4), inset 0 1px 0 rgba(255,255,255,.3);
}
.tk-flat i{width:max(4px,.7cqw); height:max(4px,.7cqw); background:#FFE9C4; transform:rotate(45deg); flex:none;}

.tk-vrule{
  width:1px; flex:none; height:62%; align-self:center;
  background:repeating-linear-gradient(to bottom,rgba(120,40,10,.5) 0 3px,transparent 3px 8px);
}
.tk-ornament{
  font-size:max(13px,2.6cqw); color:rgba(184,110,18,.9); flex:none; line-height:1;
  margin:0 -.6cqw;
}

.tk-no{display:flex; align-items:baseline; gap:1.1cqw; flex:none; margin-left:auto;}
.tk-no-lbl{
  font-size:max(11px,2cqw); font-weight:700;
  padding-bottom:.5cqw; border-bottom:1px solid rgba(120,40,10,.45);
}
.tk-no strong{
  font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif;
  font-size:max(30px,6.6cqw); font-weight:700; line-height:.9;
  font-variant-numeric:tabular-nums;
}

/* Without container query support every cqw collapses to 0 and only the px
   floors survive, which still renders a correct, if less proportional, ticket.
   These few values have no floor, so they need explicit fallbacks. */
@supports not (container-type: inline-size){
  .ticket{--ch:11px; --notch:10px;}
  .tk-face{padding:14px 16px;}
  .tk-perf{margin:11px -16px;}
  .tk-top{gap:10px;}
  .tk-bottom{gap:10px;}
  .tk-flat{padding:3px 12px;}
}

.coupon-mini-logo{width:28px; height:28px; object-fit:contain; flex-shrink:0;}
.footer-details{max-width:760px; margin:6px auto 0; font-size:11px; line-height:1.4;}
.admin-legal{margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.4; max-width:70ch;}

.qr-box{
  background:#fff; border:1.5px solid var(--hair); border-radius:14px; padding:18px;
  display:flex; flex-direction:column; align-items:center; gap:10px; margin:16px 0;
}
.qr-box #qrcode{padding:6px; background:#fff;}
.upi-id{
  font-weight:700; font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif; font-size:16px; letter-spacing:.02em;
  background:var(--hair); padding:6px 14px; border-radius:999px; display:inline-flex; gap:8px; align-items:center;
}
.copy-btn{border:none; background:none; cursor:pointer; font-size:14px; color:var(--gold-deep); font-weight:700;}
/* Saving the QR is a secondary action next to paying with it, so it reads as
   a quiet link rather than competing with the buttons at the foot of the step. */
.qr-save{
  border:1px solid var(--hair); background:#fff; color:var(--gold-deep);
  border-radius:999px; padding:6px 15px; cursor:pointer;
  font:700 12.5px/1 inherit; display:inline-flex; align-items:center; gap:6px;
}
.qr-save::before{content:'\2193'; font-size:14px;}
.qr-save:hover,.qr-save:focus-visible{border-color:var(--gold-deep); background:var(--cream); outline:none;}
.qr-save-hint{margin:0; font-size:11.5px; color:var(--muted); text-align:center; max-width:30ch; line-height:1.45;}

.upload-drop{
  border:2px dashed var(--hair); border-radius:14px; padding:26px 16px; text-align:center;
  cursor:pointer; color:var(--muted); font-size:14px;
}
.upload-drop.has-file{border-color:var(--green); color:var(--green); font-weight:600;}
.upload-drop input{display:none;}
.preview-thumb{max-height:160px; border-radius:10px; margin:12px auto 0; box-shadow:var(--shadow);}

.upi-qr-img{width:100%; max-width:220px; height:auto; display:block; border-radius:8px;}
.dialog-actions{display:flex; gap:10px; margin-top:22px;}
.dialog-actions .btn{flex:1;}
.action-menu{position:relative; display:inline-flex;}
.action-menu-trigger{
  width:36px; height:36px; border:1px solid var(--hair); border-radius:50%; background:#fff;
  color:var(--ink); cursor:pointer; font-size:24px; line-height:1; padding:0 0 5px;
}
.action-menu-trigger:hover,.action-menu-trigger:focus-visible{border-color:var(--red); color:var(--red); outline:none;}
/* Fixed, not absolute: .table-wrap has overflow-x:auto, which also clips
   vertically, so an absolutely-positioned panel gets cut off on the lower
   rows. Placed from the trigger's viewport rect by openActionMenu(). */
.action-menu-panel{
  position:fixed; z-index:60; display:none; min-width:190px; padding:6px;
  background:#fff; border:1px solid var(--hair); border-radius:8px; box-shadow:var(--shadow);
}
.action-menu-panel.open{display:flex; flex-direction:column; gap:2px;}
.action-menu-item{border:0; background:none; border-radius:5px; color:var(--ink); cursor:pointer; font:inherit; font-size:13px; padding:9px 11px; text-align:left; white-space:nowrap;}
.action-menu-item:hover,.action-menu-item:focus-visible{background:var(--cream); outline:none;}
.action-menu-item.action-menu-danger{color:var(--red);}

/* ---------- Badges ---------- */
.badge-status{
  display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  font-size:12px; font-weight:700;
}
.badge-pending{background:#FDECC8; color:var(--amber);}

/* Rows open a detail view, so they have to look and behave like controls. */
.row-clickable{cursor:pointer; transition:background .12s ease;}
.row-clickable:hover{background:var(--cream);}
.row-clickable:focus-visible{outline:2px solid var(--gold-deep); outline-offset:-2px;}

.detail-view{margin:0; display:flex; flex-direction:column; gap:1px; background:var(--hair);
  border:1px solid var(--hair); border-radius:12px; overflow:hidden;}
.dv-row{display:flex; gap:14px; background:#fff; padding:11px 14px; align-items:baseline;}
.dv-row dt{
  flex:0 0 38%; max-width:190px; margin:0;
  font-size:12.5px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.05em;
}
.dv-row dd{margin:0; flex:1; min-width:0; font-size:14.5px; color:var(--ink); overflow-wrap:anywhere;}
@media (max-width:520px){
  .dv-row{flex-direction:column; gap:3px;}
  .dv-row dt{flex:none; max-width:none;}
}
.badge-verified{background:#DCF3E8; color:var(--green);}
.badge-redeemed{background:#E4E1FB; color:#5B3EC9;}
/* Payment method is not a status — cash and online are both settled money. */
/* The globe and the word are one label; letting them wrap in a narrow column
   split them across two lines. */
.badge-method{background:#DCF3E8; color:var(--green); white-space:nowrap;}

/* Change Log: keep long emails and stacked detail lines from bloating rows. */
.log-actor{font-size:12.5px; overflow-wrap:anywhere; max-width:22ch;}
.log-details{font-size:12.5px; line-height:1.5; max-width:34ch; overflow-wrap:anywhere;}

/* Admin's free-text note, shown under the family name in the submissions table. */
.row-note{
  margin-top:4px; font-size:12px; line-height:1.35; color:var(--muted); font-weight:500;
  max-width:30ch; overflow-wrap:anywhere;
}

/* ---------- Admin ---------- */
.admin-tabs{display:flex; gap:4px; border-bottom:1px solid var(--hair); margin-bottom:24px; overflow-x:auto;}
.admin-tab{
  padding:11px 16px; border:none; background:none; cursor:pointer; font-weight:600; font-size:14px;
  color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap;
}
.admin-tab.active{color:var(--red); border-color:var(--red);}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; margin-bottom:26px;}
/* The public 3-up stats: on narrow screens two cards sit side by side and the
   headline total takes the full width below, instead of an orphaned 2+1. */
.stat-row-3{margin-bottom:0;}
@media (max-width:560px){
  .stat-row-3{grid-template-columns:1fr 1fr;}
  .stat-row-3 .stat-card:last-child{grid-column:1 / -1;}
}
.stat-card{background:#fff; border:1px solid var(--hair); border-radius:var(--radius-sm); padding:16px 18px;}
.admin-split{display:grid; grid-template-columns:minmax(280px, 420px) 1fr; gap:22px; align-items:start;}
.broadcast-form{padding:18px;}
.compact-title{font-size:18px; margin:0 0 12px;}
.broadcast-item{background:#fff; border:1px solid var(--hair); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:10px;}
.broadcast-item-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px;}
.broadcast-item p{margin:0 0 8px; overflow-wrap:anywhere;}
@media (max-width:760px){
  .admin-split{grid-template-columns:1fr;}
}

/* ---------- Mid-page feature band ----------
   The gold Ganesha motif is drawn on solid black, so the band is black too
   and the artwork sits on it seamlessly at full strength. Content is lifted
   above it and recoloured for the dark ground. */
.mid-feature{
  position:relative; isolation:isolate; overflow:hidden;
  /* Grey-into-black gradient: the left side where the copy sits gets a soft
     light-grey-to-grey wash, settling to pure black by ~46% — before the
     motif starts — so its black ground still meets the band seamlessly.
     The greys stay dark enough for the white text to hold contrast. */
  background:linear-gradient(90deg,
    #6E6E6E 0%,
    #565656 10%,
    #3A3A3A 22%,
    #1F1F1F 34%,
    #000     46%,
    #000    100%);
  padding-top:64px; padding-bottom:64px;
  min-height:420px; display:flex; align-items:center;
  margin-bottom:44px;
}
/* The motif sits in the right half, mirroring the hero's composition, so the
   stat cards never land on the deity. Its own ground is solid black, which is
   the band colour there, so it needs no fading to blend in. */
.mid-feature::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('assets/ganesha-motif.jpg') no-repeat;
  background-position:78% center;
  background-size:auto 104%;
  /* Grows from .92 to 1.08 as the band scrolls into view. The origin matches
     background-position, which also keeps the motif's left edge clear of the
     grey gradient at every scale. */
  transform:scale(var(--motif-scale, 1));
  transform-origin:78% center;
  will-change:transform;
}
/* Softens the right edge of the motif into the band. The left is left alone
   so the grey gradient above shows through. */
.mid-feature::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(270deg, #000 0%, rgba(0,0,0,0) 16%);
}
.mid-feature .container{width:100%;}
.mid-feature .section-head h2{color:#fff;}
.mid-feature .section-head p{color:rgba(255,248,236,.78);}
/* Keep the copy and cards clear of the artwork on wide screens. */
.mid-feature .section-head,
.mid-feature .stat-row{max-width:600px;}
.mid-feature .stat-row-3{grid-template-columns:repeat(3,1fr);}
/* Glass rather than a near-solid panel: the motif and the grey wash read
   through the cards, and a blur keeps the numbers legible over both. */
.mid-feature .stat-card{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  backdrop-filter:blur(12px) saturate(1.15);
  -webkit-backdrop-filter:blur(12px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 28px -18px rgba(0,0,0,.8);
}
.mid-feature .stat-card .num{color:#FBD98A;}
.mid-feature .stat-card .lbl{color:rgba(255,248,236,.72);}
.mid-feature .spinner{border-color:rgba(255,255,255,.25); border-top-color:var(--gold);}

/* Below ~860px there is no room for a side-by-side split: the motif centres
   behind the band and the scrim darkens the middle so the cards stay legible. */
@media (max-width:860px){
  .mid-feature{
    min-height:auto; padding-top:56px; padding-bottom:56px; margin-bottom:36px;
    /* Narrow screens put the motif in the centre, so the grey runs top-down
       instead of left-right and clears out before the artwork. */
    /* No grey here. The motif is centred on narrow screens and its own ground
       is solid black, so any grey wash either sits behind it as a visible
       seam or reads as an odd grey bar across the top. Plain black is the
       honest answer at this width; the grey is a desktop-only composition. */
    background:#000;
  }
  .mid-feature::before{background-position:center center; background-size:auto 92%; opacity:.8;}
  .mid-feature::after{
    background:radial-gradient(closest-side at 50% 50%, rgba(0,0,0,.26) 32%, rgba(0,0,0,.84) 90%);
  }
  .mid-feature .section-head,
  .mid-feature .stat-row{max-width:none;}
}
@media (max-width:640px){
  .mid-feature .stat-row-3{grid-template-columns:1fr 1fr;}
  .mid-feature .stat-row-3 .stat-card:last-child{grid-column:1 / -1;}
}
.stat-card .num{font-family:'Fraunces','Noto Serif Devanagari',Georgia,serif; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums;}
.stat-card .lbl{font-size:12.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.stat-card .lbl-sub{font-size:10.5px; font-weight:500; letter-spacing:.02em; opacity:.75; text-transform:none;}

.table-wrap{overflow-x:auto; border:1px solid var(--hair); border-radius:var(--radius-sm); background:#fff;}
table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:760px;}
th{
  text-align:left; padding:11px 14px; background:var(--hair); font-size:12px; text-transform:uppercase;
  letter-spacing:.03em; color:var(--muted); font-weight:700; position:sticky; top:0;
}
td{padding:11px 14px; border-top:1px solid var(--hair); vertical-align:middle;}
.amt{font-variant-numeric:tabular-nums; font-weight:600;}
.thumb-link{color:var(--gold-deep); font-weight:600; text-decoration:none; font-size:13px;}

.lookup-box{max-width:420px;}
.lookup-result{margin-top:26px;}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  background:var(--red-deep); color:#fff; padding:12px 20px; border-radius:999px;
  font-size:14px; font-weight:600; box-shadow:var(--shadow-lg); z-index:200;
  opacity:0; transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--hair); padding:34px 0 44px; text-align:center; color:var(--muted); font-size:13.5px;}

/* ---------- Misc ---------- */
.spinner{
  width:22px; height:22px; border-radius:50%; border:3px solid var(--hair); border-top-color:var(--red);
  animation:spin .7s linear infinite; margin:0 auto;
}
@keyframes spin{to{transform:rotate(360deg);}}
.center{text-align:center;}
.empty-state{padding:40px 20px; text-align:center; color:var(--muted);}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}