/* ============================================================================
   ZONE 2026 — shared design system for My Zone (me.html) + Leader Admin
   (leader-admin.html). Loaded AFTER styles.css so it wins the cascade.
   Scoped to `body.zone-2026-page` so nothing else on the site is touched.

   Goals (per product brief):
     • Simplify — flatten nested frames (card-in-card-in-card → one clean card)
     • Clean UI — generous, consistent spacing + radius + typography
     • Big 2026 buttons — large, rounded, bold, smooth press/hover
     • Smooth app feel — sticky pill tab bar, soft transitions, native rhythm
     • One standard powering BOTH zone pages

   IMPORTANT: This file only restyles. Every element id, data-* attribute,
   form name, and the existing render/bind/activateTab wiring is preserved by
   the JS — we never rename anything here, we only change how it looks.
   ============================================================================ */

body.zone-2026-page {
  /* Local design tokens (fall back to global theme tokens). */
  --z-radius:     20px;
  --z-radius-sm:  13px;
  --z-radius-lg:  26px;
  --z-pad:        clamp(16px, 2.2vw, 26px);
  --z-pad-sm:     clamp(12px, 1.6vw, 18px);
  --z-gap:        clamp(14px, 2vw, 20px);
  --z-line:       color-mix(in srgb, var(--ink, #1f2933) 12%, transparent);
  --z-card:       var(--surface, #ffffff);
  --z-card-2:     color-mix(in srgb, var(--surface, #fff) 60%, transparent);
  --z-ink:        var(--ink, #1f2933);
  --z-muted:      color-mix(in srgb, var(--ink, #1f2933) 60%, transparent);
  --z-accent:     var(--cyan, #2a8aac);
  --z-accent-2:   var(--gold, #d7b65f);
  --z-shadow:     0 10px 30px rgba(8, 14, 24, 0.08);
  --z-shadow-lg:  0 22px 60px rgba(8, 14, 24, 0.16);
}
:root[data-theme="dark"] body.zone-2026-page {
  --z-line:    rgba(255, 255, 255, 0.10);
  --z-card:    color-mix(in srgb, var(--surface-strong, #0f1a2a) 92%, transparent);
  --z-card-2:  rgba(255, 255, 255, 0.03);
  --z-ink:     #eef3fa;
  --z-muted:   rgba(228, 234, 243, 0.62);
  --z-shadow:    0 12px 34px rgba(2, 8, 18, 0.45);
  --z-shadow-lg: 0 26px 70px rgba(2, 8, 18, 0.6);
}

/* ── Page shell ──────────────────────────────────────────────────────── */
body.zone-2026-page .page-main {
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--z-accent) 7%, transparent), transparent 60%),
    radial-gradient(1000px 520px at -10% 0%, color-mix(in srgb, var(--z-accent-2) 7%, transparent), transparent 55%);
}
body.zone-2026-page .page-main > .wide-section {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 28px);
}

/* ── Page header ─────────────────────────────────────────────────────── */
body.zone-2026-page .section-title-row {
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
body.zone-2026-page .section-title-row h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 4px;
}
body.zone-2026-page .section-title-row > div > p {
  color: var(--z-muted);
  font-size: 0.95rem;
  margin: 0;
}
body.zone-2026-page .section-title-row .row-actions { gap: 10px; }

/* ════════════════════════════════════════════════════════════════════════
   FLATTEN THE LAYOUT
   My Zone ships a 2-column sidebar grid; collapse it to one clean column with
   a horizontal sticky pill tab bar on top. Leader Admin is already top-tabs.
   ════════════════════════════════════════════════════════════════════════ */
body.zone-2026-page .zone-sidebar-layout {
  display: block;        /* was: grid (sidebar | content) */
  margin-top: 18px;
}
body.zone-2026-page .zone-sidebar {
  position: static;      /* was: sticky column */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
/* Identity card → slim horizontal strip (was a chunky boxed card) */
body.zone-2026-page .zone-sidebar-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 12px 16px;
  border-radius: var(--z-radius);
  border: 1px solid var(--z-line);
  background: var(--z-card);
  box-shadow: var(--z-shadow);
}
body.zone-2026-page .zone-sidebar-card strong { font-size: 1rem; }
body.zone-2026-page .zone-sidebar-card small  { color: var(--z-muted); }
body.zone-2026-page .zone-sidebar-avatar-wrap { flex-shrink: 0; }
body.zone-2026-page .zone-sidebar-rank-label { margin-left: auto; }

/* ── Sticky pill tab bar — shared by both pages ──────────────────────── */
body.zone-2026-page .zone-sidebar-tabs,
body.zone-2026-page .zone-tabs,
body.zone-2026-page .rabbi-console-tabs {
  position: sticky;
  top: calc(var(--header-h, 64px) + 8px);
  z-index: 30;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;            /* every tab stays visible; wraps to a 2nd row if needed */
  align-items: center;
  gap: 6px;
  margin: 0 0 clamp(16px, 2.4vw, 24px);
  padding: 8px;
  border-radius: var(--z-radius);
  background: color-mix(in srgb, var(--z-card) 86%, transparent);
  border: 1px solid var(--z-line);
  box-shadow: var(--z-shadow);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

body.zone-2026-page .zone-sidebar-tabs button,
body.zone-2026-page .zone-tabs button,
body.zone-2026-page .rabbi-console-tabs button {
  flex: 0 1 auto;
  width: auto !important;     /* override the old vertical-sidebar width:100% */
  display: inline-flex;
  align-items: center;
  justify-content: center !important;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--z-muted);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 220ms cubic-bezier(0.16,1,0.3,1);
}
body.zone-2026-page .zone-sidebar-tabs button:hover,
body.zone-2026-page .zone-tabs button:hover,
body.zone-2026-page .rabbi-console-tabs button:hover {
  color: var(--z-ink);
  background: color-mix(in srgb, var(--z-ink) 7%, transparent);
}
body.zone-2026-page .zone-sidebar-tabs button.active,
body.zone-2026-page .zone-tabs button.active,
body.zone-2026-page .rabbi-console-tabs button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--z-accent), color-mix(in srgb, var(--z-accent) 55%, var(--z-accent-2)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--z-accent) 38%, transparent);
}
/* Leader Admin tab links (anchors styled as tabs) + draft count chip */
body.zone-2026-page .rabbi-console-tabs .admin-tab-link {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 42px; padding: 0 18px; border-radius: 999px;
  background: transparent; color: var(--z-muted); font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
body.zone-2026-page .rabbi-console-tabs .tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 800;
  background: var(--z-accent-2); color: #1f1605;
}

/* ════════════════════════════════════════════════════════════════════════
   PANELS + CARDS — flatten nested frames
   The panel itself is a clean canvas (no heavy frame). Inside it, the FIRST
   level of card carries one soft frame; deeper wrappers go frameless so we
   never get box-in-box-in-box.
   ════════════════════════════════════════════════════════════════════════ */
body.zone-2026-page .zone-panel,
body.zone-2026-page .rabbi-admin-content > section,
body.zone-2026-page [data-tab-panel] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: grid;
  gap: var(--z-gap);
}
/* CRITICAL: the tab system shows ONE panel at a time via the `hidden`
   attribute (My Zone) or the `.hidden` class (Leader Admin). The display:grid
   above must never override that, or every panel would render at once. */
body.zone-2026-page .zone-panel[hidden],
body.zone-2026-page [data-zone-panel][hidden],
body.zone-2026-page [data-tab-panel].hidden,
body.zone-2026-page [data-tab-panel][hidden] {
  display: none !important;
}

/* First-level cards: the single clean frame */
body.zone-2026-page .zone-card,
body.zone-2026-page .account-panel-card,
body.zone-2026-page .homepage-preferences-card,
body.zone-2026-page .rabbi-admin-card,
body.zone-2026-page .admin-row,
body.zone-2026-page .chat-admin-card,
body.zone-2026-page .rabbi-admin-session,
body.zone-2026-page .daily-dashboard-card,
body.zone-2026-page .notification-card,
body.zone-2026-page .zone-message-list > article,
body.zone-2026-page .office-grid > section,
body.zone-2026-page .tzedakah-zone-grid > article,
body.zone-2026-page .award-card,
body.zone-2026-page .share-admin-grid > * {
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius);
  background: var(--z-card);
  box-shadow: var(--z-shadow);
  padding: var(--z-pad);
}

/* Deeper / nested wrappers → frameless so nesting visually disappears */
body.zone-2026-page .zone-card .zone-card,
body.zone-2026-page .zone-card .account-panel-card,
body.zone-2026-page .rabbi-admin-card .rabbi-admin-card,
body.zone-2026-page .rabbi-admin-card .form-section,
body.zone-2026-page .homepage-preferences-card .pref-form-group,
body.zone-2026-page .homepage-preferences-card .pref-meta-row,
body.zone-2026-page .account-panel-card .account-subcard,
body.zone-2026-page .zone-card .zone-subcard {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Section heading inside a card */
body.zone-2026-page .form-section-title,
body.zone-2026-page .inbox-section-header,
body.zone-2026-page .zone-card > h2,
body.zone-2026-page .zone-card > h3 {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--z-ink);
}
body.zone-2026-page .orthodox-note { color: var(--z-muted); }

/* A subtle divider between stacked sub-sections inside one card */
body.zone-2026-page .inbox-section-divider {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--z-line);
}

/* ── Secondary sub-tabs inside a panel (Office, Account, …) ─────────── */
body.zone-2026-page .office-subtabs,
body.zone-2026-page .account-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
body.zone-2026-page .account-subpanel[hidden] { display: none !important; }
body.zone-2026-page .account-subpanel { display: grid; gap: var(--z-gap); }
body.zone-2026-page .office-subtabs button,
body.zone-2026-page .account-subtabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--z-line);
  border-radius: 14px;
  background: var(--z-card-2);
  color: var(--z-ink);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease;
}
body.zone-2026-page .office-subtabs button:hover { transform: translateY(-1px); }
body.zone-2026-page .office-subtabs button.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--z-accent), color-mix(in srgb, var(--z-accent) 55%, var(--z-accent-2)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--z-accent) 36%, transparent);
}
body.zone-2026-page .office-subtab-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 900;
  background: var(--danger-strong, #e0566f); color: #fff;
}
body.zone-2026-page .office-subtabs button.active .office-subtab-badge { background: rgba(255,255,255,0.28); }
body.zone-2026-page .office-subtab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 900;
  background: color-mix(in srgb, var(--z-ink) 12%, transparent); color: var(--z-ink);
}
body.zone-2026-page .office-subtabs button.active .office-subtab-count { background: rgba(255,255,255,0.28); color: #fff; }
body.zone-2026-page .office-subpanel[hidden] { display: none !important; }
body.zone-2026-page .office-subpanel { display: grid; gap: var(--z-gap); }
/* The office "grid" wrappers are gone now — each section is its own subpanel */
body.zone-2026-page .office-column { min-width: 0; }

/* ── Stat / summary grids → flat tiles ───────────────────────────────── */
body.zone-2026-page .inbox-stat-grid,
body.zone-2026-page .pay-stats-row,
body.zone-2026-page .awards-xp-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
body.zone-2026-page .inbox-stat-card,
body.zone-2026-page .pay-stat {
  border: 1px solid var(--z-line);
  border-radius: var(--z-radius-sm);
  background: var(--z-card-2);
  padding: 14px 16px;
  box-shadow: none;
}
body.zone-2026-page .inbox-stat-card strong,
body.zone-2026-page .pay-stat strong { font-size: 1.5rem; font-weight: 900; }

/* ════════════════════════════════════════════════════════════════════════
   BIG 2026 BUTTONS — large, rounded, bold, smooth
   ════════════════════════════════════════════════════════════════════════ */
body.zone-2026-page .primary-button,
body.zone-2026-page .ghost-button,
body.zone-2026-page button.primary-button,
body.zone-2026-page button.ghost-button {
  min-height: 50px;
  padding: 0 26px;
  border-radius: 15px;
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms ease, filter 180ms ease, background 180ms ease;
}
body.zone-2026-page .primary-button {
  background: linear-gradient(135deg, var(--z-accent), color-mix(in srgb, var(--z-accent) 60%, var(--z-accent-2)));
  border: 0;
  color: #fff !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--z-accent) 38%, transparent);
}
body.zone-2026-page .primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--z-accent) 46%, transparent);
  filter: brightness(1.04);
}
body.zone-2026-page .primary-button:active { transform: translateY(0) scale(0.985); }
body.zone-2026-page .ghost-button {
  background: color-mix(in srgb, var(--z-ink) 5%, transparent);
  border: 1px solid var(--z-line);
  color: var(--z-ink) !important;
}
body.zone-2026-page .ghost-button:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--z-ink) 9%, transparent);
  box-shadow: var(--z-shadow);
}
body.zone-2026-page .ghost-button:active { transform: translateY(0) scale(0.985); }
body.zone-2026-page .ghost-button.danger-button,
body.zone-2026-page .danger-button {
  color: var(--danger-strong, #e0566f) !important;
  border-color: color-mix(in srgb, #e0566f 40%, transparent);
  background: color-mix(in srgb, #e0566f 8%, transparent);
}

/* Smaller "link" actions stay light */
body.zone-2026-page .link-button {
  font-weight: 700;
  color: var(--z-accent);
}
/* Row of actions wraps nicely + stays roomy */
body.zone-2026-page .row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════════════
   FORMS — modern, roomy inputs
   ════════════════════════════════════════════════════════════════════════ */
body.zone-2026-page .admin-form,
body.zone-2026-page form.account-profile-form,
body.zone-2026-page form.homepage-preferences-form {
  display: grid;
  gap: 16px;
}
body.zone-2026-page label { font-weight: 700; color: var(--z-ink); }
body.zone-2026-page input[type="text"],
body.zone-2026-page input[type="email"],
body.zone-2026-page input[type="url"],
body.zone-2026-page input[type="number"],
body.zone-2026-page input[type="date"],
body.zone-2026-page input[type="time"],
body.zone-2026-page input[type="datetime-local"],
body.zone-2026-page input[type="search"],
body.zone-2026-page select,
body.zone-2026-page textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  border-radius: var(--z-radius-sm);
  border: 1.5px solid var(--z-line);
  background: var(--z-card-2);
  color: var(--z-ink);
  font-size: 0.95rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
body.zone-2026-page textarea { min-height: 110px; padding: 13px 15px; line-height: 1.5; resize: vertical; }
body.zone-2026-page input:focus,
body.zone-2026-page select:focus,
body.zone-2026-page textarea:focus {
  outline: none;
  border-color: var(--z-accent);
  background: var(--z-card);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--z-accent) 18%, transparent);
}
body.zone-2026-page .field-hint,
body.zone-2026-page .form-note { color: var(--z-muted); font-size: 0.8rem; font-weight: 500; }

/* Pills / chips / segmented filters → rounded, tappable */
body.zone-2026-page .filter-pill,
body.zone-2026-page .topic-chip-wrap,
body.zone-2026-page .pref-explore-chips > * {
  border-radius: 999px;
}
body.zone-2026-page .segmented-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
}
body.zone-2026-page .filter-pill {
  border: 1.5px solid var(--z-line);
  padding: 9px 15px;
  background: var(--z-card-2);
  transition: border-color 150ms ease, background 150ms ease, transform 200ms cubic-bezier(0.16,1,0.3,1);
}
body.zone-2026-page .filter-pill:hover { transform: translateY(-1px); }
body.zone-2026-page .filter-pill:has(input:checked) {
  border-color: var(--z-accent);
  background: color-mix(in srgb, var(--z-accent) 14%, transparent);
}

/* ── Lists (messages, library, notifications) ────────────────────────── */
body.zone-2026-page .zone-card-list,
body.zone-2026-page .zone-message-list,
body.zone-2026-page .compact-rabbi-list,
body.zone-2026-page .shelf-grid {
  display: grid;
  gap: 12px;
}
body.zone-2026-page .notification-card.unread {
  border-left: 4px solid var(--z-accent);
}

/* Pulse a conversation when deep-linked from a message notification (?c=) */
body.zone-2026-page .zone-convo-pulse {
  animation: zoneConvoPulse 2.4s ease-out 1;
  border-color: var(--z-accent) !important;
}
@keyframes zoneConvoPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--z-accent) 55%, transparent); }
  40%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--z-accent) 22%, transparent); }
  100% { box-shadow: var(--z-shadow); }
}

/* Empty states feel calm + centered */
body.zone-2026-page .empty-state,
body.zone-2026-page .zone-empty {
  text-align: center;
  padding: clamp(24px, 5vw, 48px);
  border: 1px dashed var(--z-line);
  border-radius: var(--z-radius);
  background: var(--z-card-2);
  color: var(--z-muted);
}

/* ── Modals (tzedakah, legal, AI polish) get the soft 2026 frame ─────── */
body.zone-2026-page .modal-card,
body.zone-2026-page .tzedakah-modal-card,
body.zone-2026-page [role="dialog"] > .modal-inner {
  border-radius: var(--z-radius-lg);
  box-shadow: var(--z-shadow-lg);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body.zone-2026-page .section-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  body.zone-2026-page .section-title-row .row-actions { width: 100%; }
  body.zone-2026-page .section-title-row .row-actions .primary-button,
  body.zone-2026-page .section-title-row .row-actions .ghost-button { flex: 1; }
  body.zone-2026-page .zone-sidebar-tabs button,
  body.zone-2026-page .zone-tabs button,
  body.zone-2026-page .rabbi-console-tabs button { padding: 0 14px; min-height: 40px; font-size: 0.86rem; }
  body.zone-2026-page .primary-button,
  body.zone-2026-page .ghost-button { min-height: 48px; width: 100%; }
  body.zone-2026-page .row-actions .link-button { width: auto; }
}