/* ============================================================================================================
   bazaar-shell.css - the chrome of the two Shubh Bazaar shells (frontend/bazaar.html, frontend/bazaar-business.html) and of what shell.js draws into them.
   Tokens only (--bz-*, and the shared header's own --vh-* inside #vivah-site-header); no hex, no rgb(). Device classes: phone <= 767 | tablet 768-1024 | desktop >= 1025.
   Sections: 1 header actions + sub-header row  2 phone chrome (app bar, tab bar, detail mode)  3 vendor console (sidebar / rail)  4 switcher + sheet lists
             5 stub pages  6 screen index  7 boot placeholder
   ============================================================================================================ */

/* ── 1 · header actions + customer sub-header row ─────────────────────────────────────────────────────────────── */
body > #vh-page-actions { display: none; }                       /* until site-header.js moves it into the bar */
#vivah-site-header #vh-page-actions { display: flex; align-items: center; gap: 8px; }
#vh-page-actions .bz-pa-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 10px;
  border: 1px solid var(--vh-line); border-radius: 999px; background: transparent; color: var(--vh-ivory); font: 600 13px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer; }
#vh-page-actions .bz-pa-btn:hover { border-color: var(--vh-gold); color: var(--vh-gold); }
#vh-page-actions .bz-pa-btn:focus-visible { outline: 3px solid var(--vh-gold); outline-offset: 2px; }
#vh-page-actions .bz-pa-btn svg { flex: none; }
#vh-page-actions .bz-pa-text { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#vh-page-actions .bz-pa-dot { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--vh-gold); border: 2px solid var(--vh-bg); }
@media (max-width: 1240px) { #vh-page-actions .bz-pa-text { display: none; } #vh-page-actions .bz-pa-event { padding: 0; width: 44px; } }
@media (max-width: 767px) { #vh-page-actions .bz-pa-inbox, #vh-page-actions .bz-pa-event { display: none; } }      /* phones: the bottom tabs + app bar carry them */

.vh-subheader-bar #vh-custom-nav.bz-subnav a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; }
.bz-nbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vh-gold); color: var(--bz-on-gold);
  font-size: 11px; font-weight: 700; line-height: 1; }
.bz-nbadge:empty { display: none; }

/* ── 2 · phone chrome ──────────────────────────────────────────────────────────────────────────────────────────── */
.bz-appbar .bz-iconbtn { flex: none; }
.bz-appbar .bz-iconbtn[hidden] { display: none; }
.bz-appbar-title { font-family: var(--bz-font-body); }
.bz-tabbar .bz-tab-label { font-size: var(--bz-fs-caption); }
.bz-tabbar button { font-family: inherit; }
@media (max-width: 767px) {
  .bz-body .vh-subheader-bar { display: none !important; }                                  /* the bottom tabs replace the sub-header row */
  body.bz-detail .bz-tabbar { display: none; }                                              /* detail screens (profile, thread, checkout...) own the bottom edge with their own action bar */
  body.bz-detail { --bz-bottom-chrome: 0px; }
  .bz-appbar { padding-inline: var(--bz-s-1); }
}
@media (min-width: 768px) { .bz-appbar { display: none; } }
.bz-boot { display: flex; flex-direction: column; gap: var(--bz-s-3); padding-top: var(--bz-s-6); }
.bz-boot .bz-skel-line { display: block; height: 18px; max-width: 32rem; }
.bz-boot .bz-skel-line.is-title { height: 32px; max-width: 18rem; }

/* ── 3 · vendor console: 248 px sidebar (desktop) / 72 px rail (tablet) / bottom tabs (phone) ───────────────────── */
.bz-console { min-width: 0; }
.bz-console > main { min-width: 0; }
.bz-sb-top { margin-bottom: var(--bz-s-3); }
.bz-sb-biz { display: flex; align-items: center; gap: var(--bz-s-3); width: 100%; min-height: 56px; padding: var(--bz-s-2) var(--bz-s-3); border: 1px solid var(--bz-line); border-radius: var(--bz-r-card);
  background: var(--bz-paper); color: var(--bz-ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.bz-sb-biz:hover { border-color: var(--bz-primary); }
.bz-sb-biz.is-empty { border-style: dashed; color: var(--bz-primary); }
.bz-sb-av { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bz-gold); color: var(--bz-on-gold); font-weight: 700; font-size: var(--bz-fs-small); }
.bz-sb-biz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bz-sb-biz-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bz-sb-biz-text small { color: var(--bz-ink-2); font-size: var(--bz-fs-caption); }
.bz-plan-badge { flex: none; padding: 2px var(--bz-s-2); border-radius: var(--bz-r-pill); background: var(--bz-gold-tint); color: var(--bz-gold-ink); font-size: var(--bz-fs-caption); font-weight: 700; }
.bz-sb-nav { display: flex; flex-direction: column; gap: var(--bz-s-1); }
.bz-sb-group { margin: 0 0 var(--bz-s-3); }
.bz-sb-title { margin: 0 0 var(--bz-s-1); padding: 0 var(--bz-s-3); color: var(--bz-ink-2); font-size: var(--bz-fs-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
:lang(hi) .bz-sb-title { letter-spacing: 0; text-transform: none; }
.bz-sidebar a.is-on, .bz-sidebar a[aria-current="page"] { background: var(--bz-primary-tint); color: var(--bz-primary); font-weight: 600; }
.bz-sidebar a:focus-visible, .bz-sb-biz:focus-visible { outline: 3px solid var(--bz-focus); outline-offset: 2px; }
.bz-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1024px) {                                     /* the 72 px rail: icons only, every label stays as the accessible name */
  .bz-console { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: stretch; }
  .bz-sidebar { display: block; border-right: 1px solid var(--bz-line); background: var(--bz-paper-raised); }
  .bz-sb-in { position: sticky; top: var(--bz-header-h); max-height: calc(100vh - var(--bz-header-h)); max-height: calc(100dvh - var(--bz-header-h)); overflow-y: auto; padding: var(--bz-s-3) var(--bz-s-2); }
  .bz-sb-biz { justify-content: center; min-height: 52px; padding: var(--bz-s-1); }
  .bz-sb-biz-text, .bz-sb-biz .bz-plan-badge, .bz-sb-biz .bz-icon { display: none; }
  .bz-sidebar a { display: flex; align-items: center; justify-content: center; width: 100%; min-height: var(--bz-tap); padding: 0; border-radius: var(--bz-r-btn); color: var(--bz-ink); text-decoration: none; }
  .bz-sidebar a:hover { background: var(--bz-hover); }
  .bz-sidebar a .bz-nav-label, .bz-sb-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bz-sb-group { padding-bottom: var(--bz-s-2); border-bottom: 1px solid var(--bz-line); }
}
@media (max-width: 767px) { .bz-console { display: block; } }

/* ── 4 · switcher rows and the lists inside the sheets (More, business switcher, event switcher, notifications) ───── */
.bz-switch-list, .bz-note-list { display: flex; flex-direction: column; gap: var(--bz-s-1); margin: 0; padding: 0; list-style: none; }
.bz-switch-row { display: flex; align-items: center; gap: var(--bz-s-3); width: 100%; min-height: var(--bz-tap); padding: var(--bz-s-2) var(--bz-s-3); border: 1px solid var(--bz-line); border-radius: var(--bz-r-btn);
  background: var(--bz-paper-raised); color: var(--bz-ink); text-align: left; font: inherit; cursor: pointer; }
.bz-switch-row:hover { border-color: var(--bz-primary); }
.bz-switch-row.is-on { background: var(--bz-primary-tint); border-color: var(--bz-primary); }
.bz-switch-row:focus-visible { outline: 3px solid var(--bz-focus); outline-offset: 2px; }
.bz-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bz-switch-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.bz-switch-text small { color: var(--bz-ink-2); font-size: var(--bz-fs-small); }
.bz-switch-foot { margin-top: var(--bz-s-4); }
.bz-note { display: flex; gap: var(--bz-s-3); padding: var(--bz-s-3); border: 1px solid var(--bz-line); border-radius: var(--bz-r-btn); color: var(--bz-ink); text-decoration: none; }
.bz-note.is-new { border-color: var(--bz-primary); background: var(--bz-primary-tint); }
.bz-note-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bz-note-text small { color: var(--bz-ink-2); }
.bz-more-biz { margin-bottom: var(--bz-s-4); }
.bz-more-group { margin-bottom: var(--bz-s-4); }
.bz-more-title { margin: 0 0 var(--bz-s-2); font: 600 var(--bz-fs-caption)/1.2 var(--bz-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--bz-ink-2); }
:lang(hi) .bz-more-title { letter-spacing: 0; text-transform: none; }
.bz-more-group ul { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.bz-more-row { display: flex; align-items: center; gap: var(--bz-s-3); min-height: var(--bz-tap); padding: 0 var(--bz-s-1); border-bottom: 1px solid var(--bz-line); color: var(--bz-ink); text-decoration: none; }
.bz-more-row > span { flex: 1; min-width: 0; }
.bz-more-customer { width: 100%; margin-top: var(--bz-s-2); }

/* ── 5 · a not-yet-built screen (BZ.stubPage) ──────────────────────────────────────────────────────────────────── */
.bz-stub .bz-stub-h1 { margin-top: var(--bz-s-3); }
.bz-stub-info { display: grid; grid-template-columns: max-content 1fr; gap: var(--bz-s-1) var(--bz-s-4); max-width: 44rem; margin: var(--bz-s-5) auto 0; padding: var(--bz-s-4); border: 1px solid var(--bz-line); border-radius: var(--bz-r-card); background: var(--bz-paper-sunken); }
.bz-stub-info dt { color: var(--bz-ink-2); font-size: var(--bz-fs-small); }
.bz-stub-info dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .bz-stub-info { grid-template-columns: 1fr; } .bz-stub-info dd { margin-bottom: var(--bz-s-2); } }
.bz-stub-contains { max-width: 44rem; margin: var(--bz-s-4) auto 0; }
.bz-stub-contains summary { min-height: var(--bz-tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.bz-stub-contains ul { display: flex; flex-direction: column; gap: var(--bz-s-2); }
.bz-stub-contains li { padding-bottom: var(--bz-s-2); border-bottom: 1px solid var(--bz-line); font-size: var(--bz-fs-small); }
.bz-stub-contains code, .bz-stub-info code { font-family: var(--bz-font-data); font-size: .9em; }

/* ── 6 · the screen index (/shubh-bazaar/screens) ─────────────────────────────────────────────────────────────── */
.bz-scr-lead { max-width: 46rem; }
.bz-scr-progress { display: flex; align-items: center; gap: var(--bz-s-3); margin: var(--bz-s-4) 0 var(--bz-s-5); }
.bz-scr-bar { flex: 1; max-width: 22rem; height: 8px; border-radius: var(--bz-r-pill); background: var(--bz-paper-sunken); border: 1px solid var(--bz-line); overflow: hidden; }
.bz-scr-bar > i { display: block; height: 100%; background: var(--bz-success); }
.bz-scr-group { margin: 0 0 var(--bz-s-7); }
.bz-scr-table { width: 100%; }
.bz-scr-table th { text-align: left; padding: var(--bz-s-2) var(--bz-s-3); color: var(--bz-ink-2); font-size: var(--bz-fs-small); font-weight: 600; border-bottom: 1px solid var(--bz-line-strong); }
.bz-scr-table td { padding: var(--bz-s-3); border-bottom: 1px solid var(--bz-line); vertical-align: top; }
.bz-scr-table code { font-family: var(--bz-font-data); font-size: .9em; overflow-wrap: anywhere; }
.bz-scr-table .bz-scr-routes { display: flex; flex-direction: column; gap: 2px; }
.bz-scr-status { display: inline-flex; align-items: center; gap: var(--bz-s-1); padding: 2px var(--bz-s-2); border-radius: var(--bz-r-pill); font-size: var(--bz-fs-caption); font-weight: 600; }
.bz-scr-status.is-built { background: var(--bz-success-tint); color: var(--bz-success); }
.bz-scr-status.is-stub { background: var(--bz-warning-tint); color: var(--bz-warning); }
@media (max-width: 760px) {                                      /* cards instead of a wide table: nothing scrolls sideways */
  .bz-scr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bz-scr-table, .bz-scr-table tbody, .bz-scr-table tr, .bz-scr-table td { display: block; width: 100%; }
  .bz-scr-table tr { margin-bottom: var(--bz-s-3); padding: var(--bz-s-3); border: 1px solid var(--bz-line); border-radius: var(--bz-r-card); background: var(--bz-paper-raised); }
  .bz-scr-table td { padding: var(--bz-s-1) 0; border: 0; }
  .bz-scr-table td[data-label]::before { content: attr(data-label); display: block; color: var(--bz-ink-2); font-size: var(--bz-fs-caption); }
}

/* the shared sign-in (#authModal, match-auth.css: z 900) sits ABOVE an open sheet / modal (1000 / 9000) and below the toasts (99999): a session that
   ends while a sheet is open is renewed on top of it, the sheet keeps what was typed (INTEGRATION.md §4.1, kit/ui.js leaves it out of `inert`) */
.bz-body #authModal { z-index: 9500; }            /* more specific than match-auth.css (loaded after this file) */

/* C31 sign-in / onboarding (one login: the shared #authModal does the signing in; this page explains and routes) */
.bz-login { display: flex; justify-content: center; }
.bz-login-card { width: 100%; max-width: 560px; margin: var(--bz-s-6) auto; padding: var(--bz-s-6); border: 1px solid var(--bz-line); border-radius: var(--bz-r-card);
  background: var(--bz-paper-raised); }
.bz-login-emblem { font-size: 34px; line-height: 1; margin: 0; text-align: center; }
.bz-login-card .bz-h1 { text-align: center; margin: 0; }
.bz-login-card .bz-lead { text-align: center; margin: 0; }
.bz-login-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bz-s-2); }
.bz-login-points li { display: flex; gap: var(--bz-s-2); align-items: flex-start; }
.bz-login-actions { justify-content: center; flex-wrap: wrap; gap: var(--bz-s-3); }
.bz-login-langs { border: 0; padding: 0; margin: 0; display: grid; gap: var(--bz-s-2); }
.bz-login-langs .bz-row { gap: var(--bz-s-2); flex-wrap: wrap; }
.bz-login-choices { display: grid; gap: var(--bz-s-3); }
.bz-login-choice { display: flex; align-items: center; gap: var(--bz-s-3); min-height: 64px; padding: var(--bz-s-3) var(--bz-s-4); border: 1px solid var(--bz-line);
  border-radius: var(--bz-r-card); color: inherit; text-decoration: none; background: var(--bz-paper); }
.bz-login-choice:hover, .bz-login-choice:focus-visible { border-color: var(--bz-primary); }
.bz-login-choice > span { flex: 1; display: grid; gap: 2px; }
.bz-login-choice small { color: var(--bz-ink-2); }
@media (max-width: 767px) { .bz-login-card { margin: var(--bz-s-3) 0; padding: var(--bz-s-5) var(--bz-s-4); border: 0; background: transparent; } }

/* ── site footer (6.2.1) — the customer shell's footer: Bazaar links · Shubh Muhrat products · trust & policies (marketplace disclosures one click away) */
.bz-footer { margin-top: var(--bz-s-8); border-top: 1px solid var(--bz-line); background: var(--bz-deep); color: color-mix(in srgb, var(--bz-on-deep) 78%, transparent); font-size: var(--bz-fs-small); }
.bz-footer-in { max-width: 72rem; margin: 0 auto; padding: var(--bz-s-7) var(--bz-s-4) calc(var(--bz-s-6) + var(--bz-bottom-chrome, 0px) + var(--vivah-consent-h, 0px)); }
.bz-footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--bz-s-6); }
.bz-footer-cols nav { display: flex; flex-direction: column; gap: var(--bz-s-1); min-width: 0; }
.bz-footer-h { margin: 0 0 var(--bz-s-2); color: var(--bz-gold); font-size: var(--bz-fs-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bz-footer a { color: color-mix(in srgb, var(--bz-on-deep) 82%, transparent); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.bz-footer a:hover { color: var(--bz-gold); text-decoration: underline; text-underline-offset: .2em; }
.bz-footer a:focus-visible { outline: 2px solid var(--bz-gold); outline-offset: 2px; border-radius: 4px; }
.bz-footer-note { margin: var(--bz-s-5) 0 0; max-width: 46rem; color: color-mix(in srgb, var(--bz-on-deep) 62%, transparent); font-size: var(--bz-fs-caption); line-height: 1.6; }
.bz-footer-note + .bz-footer-note { margin-top: var(--bz-s-2); }
@media (max-width: 767px) { .bz-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bz-s-5); } .bz-footer a { min-height: 40px; } }
@media (max-width: 767px) { body.bz-detail .bz-footer { display: none; } }   /* phone detail screens own the bottom edge with their action bar */