/* ==========================================================================
   gms-ab.css — wedding.4ab.in's own unlayered bridge on top of the AB master
   design system (ab-design-system.css). Unlayered on purpose: per the
   rulebook (§8b) anything outside @layer beats anything inside it, which is
   how a site-specific patch can safely override a master-package bug without
   touching the master file. Load this AFTER ab-design-system.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PATCH 1 — known package bug (ab-design-system-master memory, 2026-08-30):
   `.ab-base a, .ab-page a { color: var(--navy) }` is (0,1,1) and beats the
   button variants at (0,1,0), so gold/navy/ghost <a> buttons render as plain
   navy text instead of white. Raise the variants to a.ab-btn--x so they win.
   -------------------------------------------------------------------------- */
a.ab-btn--gold,
a.ab-btn--navy,
a.ab-btn--ghost {
  color: #fff;
}
a.ab-btn--line {
  color: var(--navy); /* unaffected — its intended colour already is --navy */
}
a.ab-credit__site {
  color: #E9C25F;
}
a.ab-stage__link {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Hindi-first display face. The rulebook's Georgia/serif display stays as
   the Latin fallback; Devanagari headings get Noto Serif Devanagari so
   सजावट/दुल्हन-style headings render with real serif weight, not a fallback
   sans face, and never hyphenate mid-syllable.
   -------------------------------------------------------------------------- */
.ab-page,
.ab-base {
  --font-display: "Noto Serif Devanagari", Georgia, serif;
}
html[lang="hi"] .ab-h2,
html[lang="hi"] .ab-hero__title,
html[lang="hi"] .ab-stage__h {
  font-family: "Noto Serif Devanagari", Georgia, serif;
}
html[lang="hi"] { hyphens: none; }

/* ==========================================================================
   ROUND 3 item B1 — MOBILE FULL WIDTH (BRIEF-ROUND3.md), FOLLOW-UP ROUND
   (Fable review): the first pass capped .ab-wrap/.ab-hero/.ab-cta padding
   at 12px, but that 12px was still visible as a side margin on the HERO
   PANEL and other card/panel surfaces themselves — Aniket: "left right
   space ki requirement nahi" (no left-right space, at all). The fix moves
   DOWN a level: the OUTER wrap-level containers (.ab-wrap/.ab-hero/.ab-cta)
   now carry ZERO horizontal padding, so the visible coloured surface of
   every hero/CTA panel, card and card-grid touches the viewport edge
   directly (verified: element.getBoundingClientRect().left === 0 and
   width === the full viewport width) — and the up-to-12px of breathing
   room for TEXT is now owned by the individual panel/card ELEMENT itself
   (its own padding-left/right, capped below), not by the wrapper around it.
   .ab-page/.ab-s/.gms-footer themselves carry no horizontal padding/margin
   of their own and already sit flush to the viewport edge (unchanged).
   ========================================================================== */
@media (max-width: 760px) {
  .ab-wrap,
  .ab-hero,
  .ab-cta {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
  /* one card per row everywhere on a phone, not just checklist grids
     (.gms-cl-grid handled separately below) and not only <=640px as the
     master alone would give */
  .ab-grid--2,
  .ab-grid--3,
  .ab-grid--4 { grid-template-columns: 1fr; }

  /* The panels/cards that actually hold text keep their OWN <=12px
     horizontal padding (was a much larger clamp()/fixed value from the
     master — clamp(26px,6vw,84px) on the hero panel, 26px flat on
     .ab-card, etc.) so the panel/card BACKGROUND is edge-to-edge while its
     text still has a small, deliberate inset. Vertical padding (top/bottom)
     is untouched — only the horizontal component is capped.
     !important IS REQUIRED HERE, not decorative: found live (bride-checklist
     computed padding-left stayed 26px with a plain rule) that BOTH
     gen-checklist.js (mine) AND gen-group-b.js's compactHero() helper
     (page-specific, not owned by this round) print the hero panel with an
     INLINE style="padding:clamp(...)" — an inline style beats any
     stylesheet rule regardless of specificity or @layer, so only
     !important in the stylesheet can win against it. Scoped to this one
     <=760px media query only; nothing above 760px is affected. */
  .ab-hero__panel,
  .ab-cta__panel,
  .ab-panel,
  .ab-card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Content that sits directly inside .ab-wrap with NO panel/card wrapper
     of its own (stat rows, dot-pill rails, the checklist search/category
     toolbars, the sitemap grid) would otherwise touch the edge now that
     .ab-wrap itself is at 0 -- give exactly these their own <=12px inset.
     Scoped to DIRECT children (>) so it never doubles up with a nested
     .ab-panel/.ab-card, which already have their own rule above. */
  .ab-wrap > .ab-eyebrow,
  .ab-wrap > .ab-h2,
  .ab-wrap > .ab-stats,
  .ab-wrap > .ab-pills,
  .ab-wrap > .gms-pills,
  .ab-wrap > .gms-cl-tools,
  .ab-wrap > .gms-cats,
  .ab-wrap > .gmsb-sm-grid,
  .ab-wrap > h1,
  .ab-wrap > h2,
  .ab-wrap > h3,
  .ab-wrap > p {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* The footer's own .ab-wrap.gms-footer__grid is caught by the general
     .ab-wrap{padding:0} rule above too -- footer TEXT (brand paragraph,
     the 3 link columns) needs the same <=12px inset back, since none of
     it sits inside an .ab-panel/.ab-card. Higher specificity than the
     bare .ab-wrap rule, so it wins regardless of source order. */
  .gms-footer .ab-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ==========================================================================
   HEADER — brand mark as an emoji (the live site's own 🎪, not an <img>)
   ========================================================================== */
.gms-mark {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex: 0 0 auto;
  background: linear-gradient(145deg, var(--gold), #E9C25F);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 1099.98px) { .gms-mark { width: 48px; height: 48px; font-size: 24px; } }
@media (max-width: 640px)     { .gms-mark { width: 40px; height: 40px; font-size: 20px; } }

/* --------------------------------------------------------------------------
   PATCH 2 — known package bug: html:has(>body.ab-base){scroll-behavior:smooth}
   breaks the browser's on-load scroll-to-#hash. Handled in gms-ab.js (the
   one-time forced scrollIntoView fix); nothing needed here except a note.
   -------------------------------------------------------------------------- */

/* Header CTA + lang toggle placed inside .site-header__controls */
.gms-hcta {
  padding: 9px 18px; font-size: 13px; white-space: nowrap;
}
/* ROUND 3 item A4 — the language toggle is TWO FLAG icons, no text, so it
   stays compact enough for the mobile header's single row (logo ·
   title+subtitle · lang · theme · hamburger, no wrap at 375px). The active
   flag gets a navy ring, per the brief's own wording, rather than the
   ROUND 2 filled-pill look (which needed the removed text label to read
   clearly).
   FOLLOW-UP (Fable review) item 3: the flags were emoji (🇮🇳/🇺🇸), which
   render as literal "IN"/"US" text on Windows Chrome (Windows ships no
   flag-emoji font — a platform gap, not a markup bug). shell.js now emits
   two hand-built inline SVGs (FLAG_IN/FLAG_EN, ~20x14px, the flag's real
   10:7 ratio) instead, so this button no longer needs a font-size at all —
   sized here to fit a small rounded-RECTANGLE chip (not a circle, which
   would sit oddly around a rectangular flag) around the 20x14 SVG. */
.gms-lang {
  display: inline-flex; border-radius: 999px;
  padding: 2px; gap: 4px; background: var(--card);
  border: 1px solid var(--line);
}
.gms-lang button {
  border: 2px solid transparent; background: transparent; border-radius: 6px;
  width: 30px; height: 26px; display: flex; align-items: center; justify-content: center;
  line-height: 1; cursor: pointer; padding: 0;
}
.gms-lang button svg { border-radius: 2px; display: block; }
.gms-lang button.active { border-color: var(--navy); }
:root[data-theme="dark"] .gms-lang button.active,
:root:not([data-theme="light"]) .gms-lang button.active { border-color: var(--gold-ink); }
@media (max-width: 640px) { .gms-hcta { display: none; } }
/* ROUND 4 item 4 — "Great Marriage Services" (English mode) wraps to a
   second line in the mobile header, breaking the "one row" requirement.
   FIRST fix (superseded by this one, kept as history in the code comment
   only): `min-width:0` + `overflow:hidden;text-overflow:ellipsis` alone
   were not enough on their own — root cause is that the master's
   `.site-header__inner` is `flex-wrap:wrap` at <=1239.98px, and a
   `flex:1 1 auto` item's HYPOTHETICAL size for the wrap/no-wrap
   line-assignment decision is its unconstrained CONTENT width, which
   `min-width:0` does not shrink (it only lowers the floor an item can
   shrink to *after* it is already on one line). That first fix used an
   explicit `max-width` + ellipsis to cap the ceiling and truncate
   anything still too wide — which technically satisfied "one row" but
   shipped as "Great Marriage S…", not smaller text on one line, which is
   what Aniket actually asked for ("chhota likho taki ek hi line se fix ho
   jaye" — make it SMALL so it fits on one line, not cut it off).
   THIS fix keeps the same flex-wrap-ceiling mechanism (still needed —
   removing it reopens the exact wrap bug above) but replaces the
   max-width+ellipsis pair with a font-size small enough that the FULL,
   untruncated text's own natural width already fits inside the available
   space — no clipping needed at all, so `overflow`/`text-overflow` are
   dropped entirely below. Sized by DIRECT MEASUREMENT (a real hidden
   `.site-brand__name` span with the live font stack, `scrollWidth` read
   for both languages at candidate font-size/letter-spacing pairs), not
   guessed: at 360px the real available budget is ~129px (header padding
   12px x2 + 8px inner gap + controls ~154px + brand mark 36px + 9px
   brand gap, all measured live), and "Great Marriage Services" at
   10.5px/-0.03em letter-spacing measures 123px — a 6px margin, in BOTH
   languages (Hindi is shorter and was never the tight case). */
@media (max-width: 480px) { .site-brand__tagline { display: none; } }
@media (max-width: 1239.98px) {
  .site-brand__text { min-width: 0; }
  .site-brand__name { white-space: nowrap; display: block; }
}
@media (max-width: 480px) {
  .site-brand__name { font-size: 13.5px; letter-spacing: -.01em; }
}
@media (max-width: 400px) {
  .site-brand__name { font-size: 13px; letter-spacing: -.02em; }
  /* coordinator addendum — shrink the logo to make more room, <=400px */
  .site-brand__mark { width: 36px; height: 36px; font-size: 19px; }
}
/* covers exactly the two required test widths (360 and 375) — the
   tightest real case, measured against a 129px budget at 360px. */
@media (max-width: 376px) {
  .site-brand__name { font-size: 13px; letter-spacing: -.03em; }
}

/* --------------------------------------------------------------------------
   Home hero — NO PHOTO (2026-09-03). The Kahar "Chandravanshi Vivah" poster
   was deleted from assets/img; image generation stays frozen (standing
   rule), so the right column is a pure HTML/CSS composition instead: a 3x3
   grid of tinted service tiles (one emoji + a one-word Hindi label each),
   Rule 7-style 56-72px chips cycling ab-tint-1..6 (Rule 1) so the hover set
   (Rule 2) arms on every tile automatically.
   -------------------------------------------------------------------------- */
.gms-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 0; align-items: stretch;
}
.gms-hero-figure {
  position: relative; border-radius: 0 26px 26px 0; overflow: hidden;
  min-height: 320px; background: var(--panel-1, #16224B);
}
.gms-hero-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  padding: 32px; align-content: center;
}
.gms-hero-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; border-radius: 16px; padding: 14px 8px; text-align: center;
  min-height: 96px;
  /* ROUND 3 item A5: the 9 tiles are now real <a> links (were <div>s, so
     Aniket's "these do not open" report was literally true) — the master's
     .ab-base a,.ab-page a{color:var(--navy)} rule carries no text-decoration
     reset (documented ab-card bug, same fix pattern), so an explicit
     text-decoration:none is needed now that the tile itself is an anchor. */
  text-decoration: none; cursor: pointer;
}
/* The ab-tint-N class is applied to each tile ONLY to arm the master's Rule-2
   hover set (rim + own-hue glow) -- but `.ab-page .ab-tint-N{background:...}`
   paints the LIGHT pastel card gradient meant for a light-mode surface, and
   these tiles sit on the dark navy hero panel with white label text, so the
   pastel background made the white text unreadable (found in verification,
   2026-09-03). Fixed with a fixed glass surface, unlayered so it always wins
   over the layered master rule regardless of specificity (portability
   mechanism P1) -- the hover glow/rim/lift, which are box-shadow/border-color
   only, are untouched and still cycle per tile's own hue. */
.gms-hero-tile[class*="ab-tint-"] {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.16);
}
.gms-hero-tile__icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.gms-hero-tile__label {
  font: 700 13px/1.2 var(--font-nav); color: #fff;
}
@media (min-width: 480px) {
  .gms-hero-tile__icon { width: 64px; height: 64px; font-size: 30px; }
}
@media (min-width: 1101px) {
  .gms-hero-tile__icon { width: 72px; height: 72px; font-size: 34px; }
}
@media (max-width: 900px) {
  .gms-hero-grid { grid-template-columns: 1fr; }
  .gms-hero-figure { border-radius: 0 0 26px 26px; order: -1; min-height: 0; }
  .gms-hero-tiles { padding: 22px; gap: 10px; }
  .gms-hero-tile { min-height: 76px; padding: 10px 6px; }
  .gms-hero-tile__icon { width: 48px; height: 48px; font-size: 22px; }
  .gms-hero-tile__label { font-size: 13px; }
}
.gms-hero-grid .ab-hero__panel { border-radius: 26px 0 0 26px; }
@media (max-width: 900px) { .gms-hero-grid .ab-hero__panel { border-radius: 26px 26px 0 0; } }

/* Hero CTA row — three buttons must never clip on a phone (Fable 2026-09-03:
   they sat in one unwrapping row and were cut off at 375px). Stack full
   width below 640px; between 640-900 allow a wrap. */
.gms-hero-btns { flex-wrap: wrap; }
@media (max-width: 640px) {
  .gms-hero-btns { flex-direction: column; align-items: stretch; }
  .gms-hero-btns .ab-btn { width: 100%; text-align: center; justify-content: center; }
}

/* Rule 4 dot-pill rail, generic recipe applied to the planning-tools list */
.gms-pills { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gms-pills li a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); font-family: var(--font-nav); font-size: 13.5px;
  font-weight: 600; color: var(--ink); text-decoration: none;
}
.gms-pills li a::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex: 0 0 auto;
}
.gms-pills li a:hover { border-color: var(--gold); color: var(--gold-ink); }

/* ==========================================================================
   Compact hero recipe helper — index.html uses the FULL hero (it is the
   home page); nothing extra needed here beyond the rulebook's own CSS.
   Contact strip above the Rule-8 credit bar.
   ========================================================================== */
/* PART 1 item 4 — "contact bar with TWO pills exactly like the calculator
   page's fixed bar": literal pill buttons, not plain links, on the same
   permanently-dark panel as before. */
.gms-contactbar {
  background: var(--panel-1, #16224B);
  padding: 16px;
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.gms-contactbar a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  font: 800 13.5px/1.3 var(--font-nav); text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.gms-contactbar__call { background: linear-gradient(180deg, #C9A84C, #B08F35); color: #1B2A5E; }
.gms-contactbar__wa   { background: linear-gradient(180deg, #2EE07A, #1FA855); color: #06240F; }
.gms-contactbar a:hover { filter: brightness(1.06); }
/* ROUND 4 item 1 (SUPERSEDES the Round-3 B3 fix directly below, kept for
   history) — "the footer contact bar must NOT print the phone number next
   to the footer menu ... Drop the bar on desktop where the floating care
   widget already shows the numbers ... On mobile the number appears
   exactly once — in the fixed bottom bar — and nowhere else." Both pills
   stay LABELS-ONLY, on every width; the digits themselves move to being
   the ONE visible number on the page: the fixed .gms-care bar (see the
   ROUND 4 item 1/6 block further down, where .gms-care's mobile styling
   is changed from fully icon-only to icon+number). tel:/wa.me hrefs are
   completely unchanged on both pills — only the printed digits move. */
.gms-contactbar__num { display: none; }
@media (min-width: 761px) {
  /* the floating .gms-care widget is a bottom-right chat-style floater on
     desktop and already carries both pills' numbers once the visitor
     reaches the footer — a second, number-less copy of the same two
     buttons right above it would be pure redundant chrome. */
  .gms-contactbar { display: none; }
}
/* ROUND 3 item B3 (superseded by the item-1 rule above, which hides BOTH
   .gms-contactbar__num spans unconditionally — this narrower rule is now
   redundant but harmless, kept only so an older cached page still hides
   the WhatsApp digits specifically if it somehow loads without the newer
   rule). */
@media (max-width: 760px) {
  .gms-contactbar__num--wa { display: none; }
}

/* ROUND 3 FOLLOW-UP (Fable review) — item 1: ~150px blank band between the
   contact bar and the credit bar on mobile. Root cause: the master's own
   `.ab-credit{margin-top:90px}` (R8) assumes the credit bar sits directly
   under a page's last content section with nothing else between — on THIS
   site .ab-credit is always preceded by .gms-contactbar, so that 90px
   margin opened a gap between the two, not between content and the footer.
   Zeroed here (unlayered, wins over the master rule) on both mobile and
   desktop, since .ab-credit never appears without .gms-contactbar right
   above it anywhere on this site. */
.ab-credit { margin-top: 0; }

/* ==========================================================================
   FOOTER — brand information block + link columns (PART 1 item 4), above
   the existing contact-pill bar and the unchanged Rule-8 credit bar.
   ========================================================================== */
.gms-footer {
  background: var(--panel-1, #16224B);
  padding: 48px 0 28px;
}
.gms-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 3fr;
  gap: 32px;
}
/* ROUND 3 item B3 — the 3 link columns are their own grid inside the
   .gms-flinkcols wrapper (shell.js), separate from the brand block, so
   mobile can stack brand-on-top / links-in-3-compact-columns-below
   instead of the ROUND 2 layout collapsing everything to a single
   full-width column at <=480px. */
.gms-flinkcols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.gms-fcol h3 {
  margin: 0 0 12px;
  font: 700 13px/1.2 var(--font-nav);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-soft, #F5B942);
}
.gms-fcol a {
  display: block; padding: 5px 0;
  font: 500 13.5px/1.4 var(--font-nav);
  color: rgba(255,255,255,.82); text-decoration: none;
}
.gms-fcol a:hover { color: #fff; text-decoration: underline; }
.gms-fbrand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gms-fbrand .gms-mark { width: 44px; height: 44px; font-size: 22px; }
.gms-fbrand__text { display: flex; flex-direction: column; }
.gms-fbrand__text strong { color: #fff; font: 700 16px/1.2 var(--font-brand, var(--font-nav)); }
.gms-fbrand__text small { color: var(--gold-soft, #F5B942); font-size: 13px; margin-top: 2px; }
.gms-fcol--brand p {
  color: rgba(255,255,255,.72); font: 400 13px/1.6 var(--font-nav);
  margin: 0 0 10px; max-width: 320px;
}
.gms-fbrand__site { color: var(--gold-soft, #F5B942) !important; font-weight: 700; margin: 0; }
@media (max-width: 900px) {
  .gms-footer__grid { grid-template-columns: 1fr; }
}
/* ROUND 3 item B3 — "3 compact columns" is kept at every width down to a
   phone, never collapsed to 1: only the font/padding/gap shrink. */
@media (max-width: 760px) {
  .gms-flinkcols { gap: 10px 12px; }
  .gms-fcol h3 { font-size: 13px; margin-bottom: 7px; letter-spacing: .02em; }
  .gms-fcol a { font-size: 13px; padding: 3px 0; line-height: 1.3; }
}

/* ==========================================================================
   FLOATING CUSTOMER-CARE WIDGET (PART 1 item 3) — ported from
   chandramilan.4ab.in's .cm-qab (see shell.js careWidget() for the source
   reference). Slides in when the visitor reaches the footer; desktop = a
   chat-widget-style 240px floater bottom-right, mobile = a full-width
   bottom bar. Renamed .gms-care throughout so it never collides with
   chandramilan's own .cm-qab class.
   ========================================================================== */
.gms-care {
  transform: translateY(120%); opacity: 0; pointer-events: none;
  transition: transform .35s ease, opacity .3s ease;
}
.gms-care.gms-care--on {
  transform: translateY(0); opacity: 1; pointer-events: auto;
  animation: gmsCarePulse 1.1s ease 1;
}
@keyframes gmsCarePulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}
.gms-care {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,253,249,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.gms-care a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 56px; border-radius: 14px; text-decoration: none;
  font-family: var(--font-nav);
}
.gms-care a svg { width: 22px; height: 22px; flex: none; }
.gms-care a span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.gms-care a small { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.gms-care a b { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
/* permanently-dark / saturated surfaces: literal inks, never themed tokens */
.gms-care-call { background: linear-gradient(180deg, #1B2A5E, #131E45); color: #fff; }
.gms-care-call small { color: #E8D9AE; }
.gms-care-wa { background: linear-gradient(180deg, #2EE07A, #1FA855); color: #06240F; }
.gms-care a:active { transform: translateY(1px); }
/* ROUND 4 item 1 (SUPERSEDES the Round-3 B3 icon-only rule below, kept for
   history) — ".gms-care" IS the "fixed bottom bar" the brief names as the
   ONE place the phone number must appear on mobile. The footer's own
   .gms-contactbar is now labels-only everywhere (see the item-1 rule
   above), so this is no longer a 3rd/4th repeat of the same digits — it
   is the ONLY place they print on a phone. The small descriptive label
   ("Call Expert"/"Book Now") still hides (icon + number is the compact
   mobile reading), but the number itself (<b>) is shown again. */
@media (max-width: 760px) {
  .gms-care a span { display: flex; flex-direction: row; align-items: baseline; }
  .gms-care a small { display: none; }
  .gms-care a b { font-size: 13px; }
  .gms-care a { gap: 8px; min-height: 48px; }
  .gms-care a svg { width: 22px; height: 22px; }
  /* the widget has TWO buttons (Call + WhatsApp), and both would otherwise
     show the SAME digits — measured live via body.innerText and caught
     BEFORE shipping: that is a second/duplicate occurrence of the exact
     kind item 1 exists to remove, just moved from the footer bar into
     this widget. Same convention already used on .gms-contactbar's own
     WhatsApp pill: Call keeps the visible digits, WhatsApp keeps its
     working wa.me link + icon with no repeated number text next to it. */
  .gms-care-wa b { display: none; }
}
/* ROUND 3 item B3 (superseded above — kept only as a comment marker so a
   future diff shows what changed and why, no rule left to duplicate). */
body:has(.nav.is-open) .gms-care { display: none; }
/* ROUND 4 item 6 — "only DESIGNED BY MR. ANIKET BHARDWAJ is visible; ...
   is hidden behind the fixed bottom bar". .gms-care is position:fixed, so
   it is out of document flow and nothing pushes the page content (or the
   credit bar sitting right at the end of it) up to make room — the fixed
   bar was simply drawing on top of the bottom ~64px of the page. Body
   gets that space back as bottom padding on mobile (measured .gms-care
   height ~64px incl. its own 8px+8px padding, +8px clearance per the
   brief = 72px), and the credit bar's own 3 parts already stack (master
   R8 rule) so all three clear the fixed bar's top edge. */
@media (max-width: 760px) {
  /* :has() so the reserved space only exists once the widget has actually
     slid on-screen (it arms via IntersectionObserver on the footer, i.e.
     exactly the moment a visitor can see the credit bar) — a page that
     never reaches the footer (or an IntersectionObserver-less browser,
     the same fallback the JS itself already handles) never carries an
     unexplained blank strip at the very bottom of the page. */
  body:has(.gms-care.gms-care--on) { padding-bottom: 72px; }
}
@media (min-width: 761px) {
  .gms-care {
    left: auto; right: 18px; bottom: 18px; width: 240px;
    flex-direction: column; gap: 8px;
    border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 18px 44px rgba(19,30,69,.22); padding: 8px;
    transform: translateX(120%); background: rgba(255,253,249,.94);
  }
  .gms-care.gms-care--on { transform: translateX(0); }
  .gms-care a { width: 100%; min-height: 52px; }
}
:root[data-theme="dark"] .gms-care,
:root:not([data-theme="light"]) .gms-care { background: rgba(13,20,36,.94); border-color: #243052; }

/* ==========================================================================
   CHECKLIST — Samagri-anatomy icon cards, ported to AB tokens.
   Anatomy (from Pandit_Samagri_Master_List-7.html): tinted gradient card,
   35-38px rounded emoji icon chip, Hindi-bold + English-small text, a
   top-right ＋/✓ toggle, category pill nav, search + Clear, a sticky
   selection bar, and Export PDF/PNG/WhatsApp/SMS buttons. Palette: Samagri's
   maroon (#741d1d) -> --navy for the selected state and --gold-ink for the
   qty/count text; the six per-card tints cycle the AB --tint-N-bg hues
   (Rule 1) instead of Samagri's single --c custom property per card.
   ========================================================================== */
.gms-cl-progress {
  height: 10px; border-radius: 999px; overflow: hidden; background: var(--line);
  margin: 4px 0 22px;
}
.gms-cl-progress > div {
  height: 100%; width: 0; transition: width .3s;
  background: linear-gradient(90deg, var(--gold), var(--navy));
}

.gms-cl-tools {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 6px 0 16px;
}
.gms-cl-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 6px 8px; box-shadow: var(--shadow-soft);
}
.gms-cl-search input {
  border: 0; outline: 0; background: transparent; flex: 1; min-width: 0;
  padding: 9px; font-size: 13.5px; color: var(--ink); font-family: var(--font-nav);
}
.gms-cl-search button {
  border: 0; background: var(--tint-1-line, #EFE2BC); color: var(--gold-ink);
  border-radius: 9px; padding: 8px 12px; font-weight: 800; font-size: 13px; cursor: pointer;
}

.gms-cats {
  display: flex; overflow: auto; gap: 8px; padding: 2px 2px 10px; scrollbar-width: none;
}
.gms-cats::-webkit-scrollbar { display: none; }
/* Fable 2026-09-03: the pill rail overflowed horizontally on desktop with a
   pill cut off mid-word ("Fam..."). Horizontal scroll is a mobile-only
   affordance; at >=900px there is enough width to just wrap the 13 pills. */
@media (min-width: 900px) {
  .gms-cats { flex-wrap: wrap; overflow: visible; }
}
.gms-cat {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 12px; text-align: left; cursor: pointer;
  font-family: var(--font-nav); color: var(--ink);
}
.gms-cat b { display: block; font-size: 13px; }
.gms-cat small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.gms-cat.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.gms-cat.active small { color: rgba(255,255,255,.72); }

.gms-cl-sectitle {
  font-family: var(--font-display); font-size: 19px; color: var(--navy);
  margin: 26px 0 8px; border-bottom: 2px solid var(--tint-1-line, #EFE2BC); padding-bottom: 6px;
}
:root[data-theme="dark"] .gms-cl-sectitle,
:root:not([data-theme="light"]) .gms-cl-sectitle { color: var(--gold-ink); }

.gms-cl-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px;
}
@media (max-width: 900px) { .gms-cl-grid { grid-template-columns: repeat(3, 1fr); } }
/* ROUND 3 item B1 — "one card per row" at <=760px (was 2 cols down to 641px,
   1 col only below 400px). Every card grid on the site goes to a single
   column at the same 760px breakpoint now, not just checklist cards. */
@media (max-width: 760px) { .gms-cl-grid { grid-template-columns: 1fr; gap: 8px; } }

.gms-cl-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 76px;
  padding: 10px;
  padding-right: 34px;
  display: flex; align-items: center; gap: 9px;
  position: relative;
  box-shadow: var(--shadow-soft);
  background: var(--card);
  cursor: pointer;
}
/* Rule 1 — every card in a group gets a different colour, cycled as classes */
.ab-page .gms-cl-card.ab-tint-1 { background: var(--tint-1-bg); border-color: var(--tint-1-line); }
.ab-page .gms-cl-card.ab-tint-2 { background: var(--tint-2-bg); border-color: var(--tint-2-line); }
.ab-page .gms-cl-card.ab-tint-3 { background: var(--tint-3-bg); border-color: var(--tint-3-line); }
.ab-page .gms-cl-card.ab-tint-4 { background: var(--tint-4-bg); border-color: var(--tint-4-line); }
.ab-page .gms-cl-card.ab-tint-5 { background: var(--tint-5-bg); border-color: var(--tint-5-line); }
.ab-page .gms-cl-card.ab-tint-6 { background: var(--tint-6-bg); border-color: var(--tint-6-line); }

.gms-cl-icon {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px;
  background: rgba(255,255,255,.55); display: grid; place-items: center; font-size: 21px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
:root[data-theme="dark"] .gms-cl-icon,
:root:not([data-theme="light"]) .gms-cl-icon { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

.gms-cl-txt { min-width: 0; }
.gms-cl-hi { display: block; font-size: 13px; line-height: 1.2; font-weight: 800; color: var(--ink); font-family: var(--font-display); }
.gms-cl-en { display: block; font-size: 13px; line-height: 1.2; color: var(--muted); margin-top: 3px; font-family: var(--font-nav); }
/* Fable 2026-09-03: a card with no distinct English label (the .has-en
   class is only added when the generator actually has one, see
   gen-checklist.js) must show its single .gms-cl-hi line in BOTH languages
   -- hiding it unconditionally in English mode left English-mode cards
   with no text at all. */
body.enmode .gms-cl-card.has-en .gms-cl-hi { display: none; }
body.enmode .gms-cl-en { font-size: 13px; color: var(--ink); font-weight: 700; }

.gms-cl-plus {
  position: absolute; right: 7px; top: 7px; width: 24px; height: 24px;
  border: 1px solid var(--line); background: rgba(255,255,255,.65); border-radius: 8px;
  color: var(--gold-ink); font-weight: 900; cursor: pointer; display: grid; place-items: center;
  font-size: 14px; line-height: 1;
}
/* Literal colours, not the themed --navy token: --navy flips to a light grey
   in dark mode (rulebook §8, "Permanently-dark surfaces"), which would put a
   white ✓ on a near-white chip and make it unreadable. This tiny badge needs
   the SAME dark-on-gold contrast in both themes, so it is not themed at all. */
.gms-cl-plus.selected { background: #C9A84C !important; color: #1B2A5E !important; border-color: #C9A84C !important; }

.gms-cl-card.done .gms-cl-hi,
.gms-cl-card.done .gms-cl-en { text-decoration: line-through; opacity: .6; }

.gms-cl-empty {
  text-align: center; padding: 30px; border: 1px dashed var(--line); border-radius: 14px;
  color: var(--muted); display: none; margin-top: 20px; grid-column: 1 / -1;
}

.gms-sel-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; margin: 18px 0 0; box-shadow: var(--shadow-lift);
}
.gms-sel-bar b { color: var(--navy); font-size: 13px; }
:root[data-theme="dark"] .gms-sel-bar b,
:root:not([data-theme="light"]) .gms-sel-bar b { color: var(--gold-ink); }
.gms-sel-bar .gms-sel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gms-sel-bar button {
  border: 0; border-radius: 10px; padding: 8px 12px; font-weight: 800; font-size: 13px;
  cursor: pointer; font-family: var(--font-nav); white-space: nowrap;
}
.gms-sel-bar .gms-b-print,
.gms-sel-bar .gms-b-pdf  { background: var(--tint-1-line, #efe4da); color: var(--gold-ink); }
.gms-sel-bar .gms-b-png  { background: var(--tint-2-line, #e6effc); color: var(--navy); }
.gms-sel-bar .gms-b-wa   { background: #e9f7ed; color: #236b36; }
.gms-sel-bar .gms-b-sms  { background: #eef4fb; color: #24557f; }
.gms-sel-bar .gms-b-reset,
.gms-sel-bar .gms-b-all  { background: var(--line); color: var(--ink); }

/* ROUND 3 item C1 — the Guests selector sits in the SAME row as
   PDF/PNG/WhatsApp/SMS (it is now the first child of .gms-sel-actions,
   see gen-checklist.js), never as a separate stacked row above/below the
   export buttons. */
.gms-sel-bar .gms-guests {
  display: flex; align-items: center; gap: 6px;
  background: var(--line); border-radius: 10px; padding: 7px 10px 7px 9px;
  font-family: var(--font-nav);
}
.gms-sel-bar .gms-guests span { font-size: 13px; }
.gms-sel-bar .gms-guests select {
  border: 0; background: transparent; outline: 0;
  font: 800 13px/1 var(--font-nav); color: var(--ink); cursor: pointer;
}
@media (max-width: 760px) {
  /* "a single horizontally-scrolling row ... never a stack of five" — the
     export buttons + Guests never wrap into a vertical stack on a phone;
     they stay one row and scroll sideways if they don't all fit. */
  .gms-sel-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .gms-sel-bar > b { flex: 0 0 auto; }
  .gms-sel-bar .gms-sel-actions { flex-wrap: nowrap; }
  .gms-sel-bar .gms-guests,
  .gms-sel-bar button { flex: 0 0 auto; }
}

/* ==========================================================================
   ROUND 4 item 5 — desktop print: A4 page size/margins, tints + the brand
   header print in colour by default, site chrome (nav/floater/toolbars)
   never appears on a printed page. GLOBAL — gms-ab.css loads on all 48
   pages, so this applies whether or not a page uses the #gmsPrintArea
   flow below (a plain Ctrl+P on e.g. photography.html still hides the
   header/floater and prints in colour).
   ========================================================================== */
@page { size: A4; margin: 12mm; }
@media print {
  html, body, * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .site-header, .gms-care, .gms-sel-bar, .gms-cl-toolbtns,
  .gms-contactbar, .gms-cl-search { display: none !important; }
}

/* --------------------------------------------------------------------------
   #gmsPrintArea — the branded print-only sheet gen-checklist.js's
   doPrint() (gms-ab.js) builds for the checklist toolbar's Print button.
   ROUND 4 coordinator addendum: the brand header/footer must repeat on
   EVERY printed A4 page (Chromium repeats `position:fixed` elements on
   every page when printing), not sit once directly under the last list
   item with blank paper below it — that was the previous behaviour,
   since .gms-ph/.gms-pf were plain in-flow blocks that only ever landed
   on whichever page happened to contain the true top/bottom of the tall
   #gmsPrintArea sheet. `.gms-print-head`/`.gms-print-foot` are added
   alongside the existing `.gms-ph`/`.gms-pf` classes (doPrint()'s own
   generated markup, unchanged) purely as literal, self-documenting
   aliases for this fixed-positioning rule; body padding-top/bottom
   reserves exactly their height so the table content never runs under
   either bar on any page.
   -------------------------------------------------------------------------- */
#gmsPrintArea { display: none; }
@media print {
  body > *:not(#gmsPrintArea) { display: none !important; }
  #gmsPrintArea { display: block !important; font-family: Arial, "Noto Sans Devanagari", sans-serif; color: #111; }
  body { padding-top: 64px; padding-bottom: 44px; margin: 0; }
  #gmsPrintArea .gms-ph,
  #gmsPrintArea .gms-print-head {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 3px solid #1B2A5E; padding: 10px 4mm; margin: 0;
    background: #fff;
  }
  #gmsPrintArea .gms-ph h1 { margin: 0; font-size: 18px; color: #1B2A5E; }
  #gmsPrintArea .gms-ph small { color: #666; }
  #gmsPrintArea table { width: 100%; border-collapse: collapse; }
  #gmsPrintArea th { background: #1B2A5E; color: #fff; text-align: left; padding: 8px; font-size: 13px; }
  #gmsPrintArea td { border-bottom: 1px solid #ccc; padding: 8px; font-size: 13px; }
  #gmsPrintArea .gms-pf,
  #gmsPrintArea .gms-print-foot {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1;
    border-top: 2px solid #C9A84C; padding: 6px 4mm; margin: 0;
    text-align: center; font-weight: 800; color: #1B2A5E; font-size: 12px;
    background: #fff;
  }
  #gmsPrintArea .gms-pf small { display: block; color: #666; font-weight: 400; margin-top: 2px; }
}

/* --------------------------------------------------------------------------
   ROUND 4 item 5 — WhatsApp + Email added to the checklist TOP toolbar,
   next to Print, desktop only (the bottom PDF/PNG/WhatsApp/SMS bar
   already covers mobile — these two are additive there, not a
   replacement). Print itself stays hidden on mobile (existing rule,
   just below).
   -------------------------------------------------------------------------- */
.gms-cl-toolbtns .gms-b-wa   { background: #e9f7ed; color: #236b36; }
.gms-cl-toolbtns .gms-b-email { background: var(--tint-2-line, #e6effc); color: var(--navy); }
@media (max-width: 760px) {
  .gms-cl-toolbtns .gms-b-wa,
  .gms-cl-toolbtns .gms-b-email { display: none; }
}

/* --------------------------------------------------------------------------
   FIX (Fable, 2026-09-03) — service cards on index.html rendered as plain
   blue underlined links. Root cause: they were literal <a class="ab-card…">
   wrappers, and the master ab-design-system.css has no `text-decoration`
   reset on `.ab-base a, .ab-page a` (only `color`), so the browser's default
   anchor underline painted straight through the h3/p text inside. The master
   catalogue's own examples use a non-anchor <article class="ab-card"> for
   exactly this reason. Fixed the same way, without touching the master file:
   cards are now <article>/<div>, and a single absolutely-positioned
   `.ab-card__link` makes the whole card clickable (the "stretched link"
   pattern) with NO visible underline and normal --ink/--body-c colours.
   -------------------------------------------------------------------------- */
.ab-card { position: relative; text-decoration: none; }
.ab-card__link {
  position: absolute; inset: 0; z-index: 3;
  text-indent: -9999px; overflow: hidden; border-radius: inherit;
}
.ab-card__link:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   ROUND 3 (BRIEF-ROUND3.md item A1) — the header must be ONE ROW at
   desktop width, three zones: brand (left) | the boxed nav (middle,
   flex:1) | language+theme+CTA (right). This REPLACES the ROUND 2 design,
   which forced the nav onto its OWN row below the brand — Aniket's
   screenshot showed a two-row header and asked for a single row with the
   nav box sitting between the brand and the language toggle.

   The box itself must be "a filled, differently-coloured rounded box"
   (not the ROUND 2 paper-tint + hairline, which read as too subtle to
   register as a distinct box) holding the nav in EXACTLY 2 centred lines.
   Picked: navy --panel-1 fill (#1B2A5E) with --gold-soft text (#E8D9AE) —
   both are brand CONSTANTS (never themed, ab-design-system.css §"brand
   constants"), so the box reads identically in light and dark, and the
   contrast ratio is ~9.6:1, well past AA (4.5:1) — the master rulebook's
   own two suggested options both had lower headroom than this pairing.

   "Exactly 2 lines" is guaranteed structurally, not by flex-wrap (which
   depends on viewport width and label length and can silently become 1 or
   3 lines at some width): shell.js's header() now emits TWO separate
   <ul class="nav__list"> rows at build time (Home + first 5 groups on row
   1, the remaining 5 groups on row 2), and each row is forced to a single
   non-wrapping line here. Two <ul> block elements always stack as two
   lines, at any width.
   -------------------------------------------------------------------------- */
@media (min-width: 1240px) {
  .site-header__inner { flex-wrap: nowrap; align-items: center; }
  .site-brand { flex: 0 0 auto; }
  .site-header__controls { flex: 0 0 auto; }

  .gms-navbar {
    order: 0; /* DOM order already brand -> nav -> controls; no reorder needed */
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--panel-1);
    border-radius: 16px;
    padding: 6px 12px;
    overflow: visible;
  }
  .gms-navbar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  .gms-navbar .nav__list {
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    gap: 1px;
  }
  .gms-navbar .nav__item { flex: 0 0 auto; }

  .gms-navbar .nav__link {
    padding: 7px 7px;
    font-size: 13px;
    gap: 4px;
    color: var(--gold-soft);
  }
  .gms-navbar .nav__link:hover,
  .gms-navbar .nav__link:focus-visible,
  .gms-navbar .nav__item:hover > .nav__link,
  .gms-navbar .nav__link[aria-current="page"] { color: #fff; }
  .gms-navbar .nav__caret { width: 7px; fill: var(--gold-soft); }
  .gms-navbar .nav__link:hover .nav__caret,
  .gms-navbar .nav__item:hover > .nav__link .nav__caret { fill: #fff; }
  .gms-navbar .nav__icon { stroke: var(--gold-soft); }
  .gms-navbar .nav__link:hover .nav__icon,
  .gms-navbar .nav__item:hover > .nav__link .nav__icon { stroke: #fff; }

  /* Top-level GROUP icon — emoji, not the generic 3-line SVG. Home keeps
     its own SVG (.nav__icon with no --emoji modifier), styled above. */
  .nav__icon--emoji {
    width: auto; height: auto; font-size: 13px; line-height: 1;
    stroke: none; opacity: 1;
  }
}
@media (min-width: 1240px) and (max-width: 1479.98px) {
  .gms-navbar .nav__link { padding: 6px 5px; font-size: 13px; gap: 3px; }
}

/* Sub-link (mega panel) icon chip — emoji instead of an SVG, same anatomy
   (34px rounded chip) as the master's .nav__mega-icon. Tinted per position
   in its group, cycling the master's own --chip-N / --hue-N tokens exactly
   like aniketbhardwaj-site's site.css does for its mega grid (§3 header/nav
   reference in BRIEF-ROUND2.md item 2) — the same visual system, emoji
   instead of hand-drawn SVG paths. */
.nav__mega-icon {
  font-size: 17px;
  color: var(--navy);
}
.nav__mega-grid > :nth-child(6n+1) .nav__mega-icon { background: var(--chip-1); }
.nav__mega-grid > :nth-child(6n+2) .nav__mega-icon { background: var(--chip-2); }
.nav__mega-grid > :nth-child(6n+3) .nav__mega-icon { background: var(--chip-3); }
.nav__mega-grid > :nth-child(6n+4) .nav__mega-icon { background: var(--chip-4); }
.nav__mega-grid > :nth-child(6n+5) .nav__mega-icon { background: var(--chip-5); }
.nav__mega-grid > :nth-child(6n+6) .nav__mega-icon { background: var(--chip-6); }
.nav__sublink:hover .nav__mega-icon,
.nav__sublink:focus-visible .nav__mega-icon,
.nav__sublink[aria-current="page"] .nav__mega-icon {
  background: linear-gradient(135deg, var(--gold), #B08F35);
  transform: scale(1.06);
}

/* Mobile drawer (<=1239.98px) — Rule 7 stays the master's own 3-tiles/row,
   56px chip drawer; the .gms-navbar boxed-strip styling above is desktop
   only (min-width:1240px), so it never fights the drawer's own card look.
   The drawer's OWN .nav__icon is already the group icon per the markup —
   swap in the emoji styling there too so the drawer tiles show the same
   icon as the desktop mega menu (not a blank chip). */
@media (max-width: 1239.98px) {
  .nav__icon--emoji {
    width: auto; height: auto; font-size: 26px; line-height: 1;
    stroke: none; opacity: 1;
  }
  .nav__mega-icon { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   Checklist item icons — 8 items in the icon-map differ in size from Rule 7's
   drawer chip; the CARD chip stays the Samagri 35-38px anatomy on purpose
   (Rule 7 is specifically about the mobile drawer, not checklist cards).
   -------------------------------------------------------------------------- */

/* ==========================================================================
   ROUND 2 — TOP TOOLBAR (PART 1 item 5). Print + सब Complete + Reset now
   live here, next to search, instead of the bottom selection bar.
   ========================================================================== */
.gms-cl-toolbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.gms-cl-toolbtns button {
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px;
  font: 700 13px/1 var(--font-nav); cursor: pointer; white-space: nowrap;
  background: var(--card); color: var(--ink);
}
.gms-cl-toolbtns .gms-b-toggleall { background: var(--tint-2-line, #e6effc); color: var(--navy); border-color: transparent; }
.gms-cl-toolbtns .gms-b-all       { background: var(--tint-3-line, #cdeedd); color: #236b36; border-color: transparent; }
.gms-cl-toolbtns .gms-b-reset     { background: var(--line); border-color: transparent; }
.gms-cl-toolbtns .gms-b-print     { background: var(--tint-1-line, #efe4da); color: var(--gold-ink); border-color: transparent; }
.gms-cl-toolbtns button:hover { filter: brightness(.97); }
/* ROUND 3 item B4 — Print is desktop-only; a phone has no printer attached
   to it and the button was taking up toolbar space every checklist page
   needs for PDF/PNG/WhatsApp/SMS instead. */
@media (max-width: 760px) { .gms-cl-toolbtns .gms-b-print { display: none; } }

/* "Clear" in the sticky bottom bar (PART 1 item 5) — a second, always-in-
   reach unselect-all for when the visitor is scrolled deep into a 175-item
   grid and the top toolbar's own Reset button is off-screen. Same action as
   Reset, different name/placement on purpose (see ROUND2-SHELL-REPORT.md). */
.gms-sel-bar .gms-b-clear { background: var(--line); color: var(--ink); }

/* ==========================================================================
   ROUND 2 — ACCORDION SECTIONS (PART 1 item 8). Each numbered section is
   now a <section class="gms-cl-section open"> with a premium header row
   (number pill, emoji, title, live "N items · M done" counter, chevron)
   instead of a bare <h3> sitting above the grid. All sections start .open;
   the top-toolbar "सब खोलें / सब बंद करें" button toggles every section at
   once. IMPORTANT (this is the fix for the "cards vanish" bug class, see
   ROUND2-SHELL-REPORT.md): the grid is a SIBLING of the header button, never
   rebuilt or reparented by any JS in this system — updateProgress() only
   ever writes .textContent on the counter span, and the open/close toggle
   only ever flips a class. Nothing here innerHTML-replaces an ancestor of
   .gms-cl-grid, which is the one mistake that WOULD make cards disappear
   and never come back.
   ========================================================================== */
.gms-cl-section {
  margin: 22px 0 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-soft);
}
.gms-cl-sechead {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 0; background: transparent; cursor: pointer;
  text-align: left; font-family: var(--font-nav);
  border-bottom: 2px solid var(--tint-1-line, #EFE2BC);
}
.gms-cl-secnum {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 999px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), #B08F35); color: #1B2A5E;
  font: 800 13px/1 var(--font-nav);
}
.gms-cl-secicon { font-size: 22px; flex: 0 0 auto; }
.gms-cl-sectitle-text {
  flex: 1; min-width: 0;
  font-family: var(--font-display); font-size: 17px; color: var(--navy);
}
:root[data-theme="dark"] .gms-cl-sectitle-text,
:root:not([data-theme="light"]) .gms-cl-sectitle-text { color: var(--gold-ink); }
.gms-cl-seccount {
  flex: 0 0 auto; font: 600 13px/1 var(--font-nav); color: var(--muted);
  white-space: nowrap;
}
.gms-cl-chev {
  flex: 0 0 18px; width: 18px; height: 18px;
  fill: none; stroke: var(--muted); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.gms-cl-section.open .gms-cl-chev { transform: rotate(180deg); }
.gms-cl-section:not(.open) .gms-cl-grid { display: none; }
.gms-cl-section .gms-cl-grid { margin: 12px; margin-top: 8px; }
/* the old bare-<h3> section title is no longer emitted by gen-checklist.js;
   this selector stays here only so an OLDER generated page (before this
   round) does not break if it is ever served without a rebuild. */
.gms-cl-sectitle { display: none; }

/* WhatsApp desktop-fallback toast (PART 1 item 6) — "PDF downloaded, attach
   it in WhatsApp" must be stated, never a silent no-op. */
.gms-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  z-index: 90; background: var(--navy); color: #fff;
  padding: 12px 20px; border-radius: 12px; font: 700 13px/1.4 var(--font-nav);
  box-shadow: var(--shadow-lift); opacity: 0; transition: opacity .25s ease, transform .25s ease;
  max-width: min(92vw, 420px); text-align: center;
}
.gms-toast.gms-toast--on { opacity: 1; transform: translate(-50%, 0); }