/*
V7-HEADER
Title:     Viridians Dashboard — Page Styles
Filename:  viridians-dashboard.css
Path:      /assets/css/viridians/viridians-dashboard.css
Version:   v1.1.1
Issued:    2026-04-07
Updated:   2026-05-21
Author:    Buktika Webdesk (Binka)
Purpose:   Boardroom Clean + ceremonial elevation styles for Viridians Page Five.
           Status elevation ceremony (incl. Authority Letter CTA), Mishpacha
           status badge, locked heading, assigned Fellow section, commitment
           summary strip, what-happens-next numbered grid, Restoration
           Collective section, and platform exit navigation.
           Tone: resolution. The decision has been made. Execution is underway.
Changelog:
  v1.1.0  2026-05-21  Added .vdb-authority-letter / .vdb-authority-btn /
                      .vdb-authority-note styles. Added .vdb-fellow /
                      .vdb-fellow-inner / .vdb-fellow-avatar /
                      .vdb-fellow-copy styles.
Body class: page-viridians-dashboard
License:   © Buktika, 2026. All rights reserved.
*/

/* 0) Header and dependency notes */

/*
  Depends on: /assets/css/global.css, /assets/css/themes.css.
  No hero. No MapLibre. Boardroom Clean continues from Page 4.
  This file owns all base surface rules for .page-viridians-dashboard.
*/

/* 1) Page variable binding */

.page-viridians-dashboard {
  --page-bg:            var(--sdx-color-viridians-bg);
  --page-primary:       var(--sdx-color-purple-deep);
  --page-secondary:     var(--sdx-color-teal-deep);
  --page-accent:        var(--sdx-color-mama-amber);
  --page-depth:         var(--sdx-color-stem-olive);
  --page-dark-base:     var(--sdx-color-viridians-dark-base);
  --page-dark-surface:  var(--sdx-color-viridians-dark-surface);
  --vdb-status-dot:     var(--sdx-color-stem-olive);
}

/* 2) Base page surfaces */

.page-viridians-dashboard {
  background-color: var(--page-bg);
  color: var(--fg);
}

/* 3) Hero */

/* none — Boardroom Clean: no hero */

/* 4) Typography overrides */

/* none */

/* 5) Sections and alternation */

/* Status elevation ceremony */

.page-viridians-dashboard .vdb-ceremony {
  padding: 4rem 0 2.5rem;
  text-align: center;
  max-width: 44rem;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
  place-items: center;
}

.page-viridians-dashboard .vdb-ceremony-heading {
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  line-height: 1.3;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--fg);
}

.page-viridians-dashboard .vdb-ceremony-sub {
  margin: 0;
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.65;
  max-width: 36rem;
}

/* Mishpacha status badge — flat tint, no gradient, no shadow, no pointer */

.page-viridians-dashboard .vdb-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999rem;
  background: color-mix(in srgb, var(--page-depth) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--page-depth) 32%, transparent);
}

.page-viridians-dashboard .vdb-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999rem;
  background: var(--vdb-status-dot);
  flex-shrink: 0;
}

.page-viridians-dashboard .vdb-status-label {
  font-size: var(--small);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--page-depth);
}

/* Authority Letter — primary post-commitment action in ceremony */

.page-viridians-dashboard .vdb-authority-letter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.page-viridians-dashboard .vdb-authority-btn {
  min-width: 16rem;
  justify-content: center;
  text-align: center;
}

.page-viridians-dashboard .vdb-authority-note {
  margin: 0;
  font-size: var(--small);
  color: var(--muted);
  line-height: 1.55;
  max-width: 30rem;
  text-align: center;
}

/* Assigned Fellow section */

.page-viridians-dashboard .vdb-fellow {
  padding: 2rem 0 1.75rem;
  border-top: 1px solid var(--border);
}

.page-viridians-dashboard .vdb-fellow-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 32rem;
}

.page-viridians-dashboard .vdb-fellow-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999rem;
  background: color-mix(in srgb, var(--page-depth) 20%, var(--card));
  border: 2px solid color-mix(in srgb, var(--page-depth) 28%, var(--border) 72%);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.page-viridians-dashboard .vdb-fellow-copy {
  display: grid;
  gap: 0.15rem;
}

.page-viridians-dashboard .vdb-fellow-label {
  margin: 0;
  font-size: var(--small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.page-viridians-dashboard .vdb-fellow-name {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.page-viridians-dashboard .vdb-fellow-role {
  margin: 0;
  font-size: 0.875rem;
  color: var(--page-depth);
  font-weight: 600;
}

.page-viridians-dashboard .vdb-fellow-note {
  margin: 0;
  font-size: var(--small);
  color: var(--muted);
}

/* Commitment summary strip */

.page-viridians-dashboard .vdb-summary-strip {
  margin: 0 0 2.5rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--page-primary) 5%, var(--card));
  border: 1px solid color-mix(in srgb, var(--page-primary) 18%, var(--border) 82%);
}

.page-viridians-dashboard .vdb-summary-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: var(--small);
}

.page-viridians-dashboard .vdb-summary-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.page-viridians-dashboard .vdb-summary-path {
  font-weight: 700;
  color: var(--page-primary);
}

.page-viridians-dashboard .vdb-summary-divider {
  color: var(--border);
  user-select: none;
}

.page-viridians-dashboard .vdb-summary-trigger {
  font-weight: 600;
  color: var(--fg);
}

.page-viridians-dashboard .vdb-summary-meta {
  color: var(--muted);
}

/* Section title */

.page-viridians-dashboard .vdb-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem;
  color: var(--fg);
}

/* What happens next section */

.page-viridians-dashboard .vdb-next {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--border);
}

/* Restoration Collective section */

.page-viridians-dashboard .vdb-collective {
  padding: 2.5rem 0 2rem;
  border-top: 1px solid var(--border);
}

.page-viridians-dashboard .vdb-collective-inner {
  max-width: 44rem;
}

.page-viridians-dashboard .vdb-collective-inner h2 {
  margin-bottom: 0.75rem;
  font-size: 1.15rem;
}

.page-viridians-dashboard .vdb-collective-inner p {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.page-viridians-dashboard .vdb-collective-pillars {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-viridians-dashboard .vdb-pillar-divider {
  color: var(--border);
  user-select: none;
}

/* Exit navigation */

.page-viridians-dashboard .vdb-nav-out {
  padding: 2rem 0 3.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-top: 1px solid var(--border);
}

/* 6) Cards and tiles */

/* What-happens-next three-column grid */

.page-viridians-dashboard .vdb-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.page-viridians-dashboard .vdb-next-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: grid;
  gap: 0.75rem;
  align-content: start;
  border-top: 0.2rem solid var(--page-depth);
}

.page-viridians-dashboard .vdb-next-number {
  font-family: var(--headline-font);
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--page-depth) 30%, transparent);
}

.page-viridians-dashboard .vdb-next-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.4;
}

.page-viridians-dashboard .vdb-next-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

/* 7) Buttons and CTAs */

.page-viridians-dashboard .vdb-pillar-link {
  font-size: var(--small);
  font-weight: 700;
  color: var(--page-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.page-viridians-dashboard .vdb-pillar-link:hover {
  color: color-mix(in srgb, var(--page-primary) 72%, var(--fg));
  text-decoration: underline;
}

.page-viridians-dashboard .vdb-nav-link {
  font-size: var(--small);
  font-weight: 700;
  color: var(--page-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.page-viridians-dashboard .vdb-nav-link:hover {
  text-decoration: underline;
}

.page-viridians-dashboard .vdb-nav-link--muted {
  color: var(--muted);
  font-weight: 600;
}

.page-viridians-dashboard .vdb-nav-link--muted:hover {
  color: var(--fg);
}

/* 8) Page modules */

/* none */

/* 9) Media queries */

@media (max-width: 62rem) {
  .page-viridians-dashboard .vdb-next-grid {
    grid-template-columns: 1fr;
  }

  .page-viridians-dashboard .vdb-ceremony {
    text-align: left;
    place-items: start;
    padding: 2.5rem 0 2rem;
  }

  .page-viridians-dashboard .vdb-ceremony-sub {
    max-width: 100%;
  }

  .page-viridians-dashboard .vdb-authority-letter {
    align-items: flex-start;
  }

  .page-viridians-dashboard .vdb-authority-note {
    text-align: left;
  }

  .page-viridians-dashboard .vdb-authority-btn {
    min-width: 0;
    width: 100%;
  }

  .page-viridians-dashboard .vdb-nav-out {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }
}

@media (max-width: 36rem) {
  .page-viridians-dashboard .vdb-fellow-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }
}

/* 10) Dark mode */

[data-theme="dark"] .page-viridians-dashboard {
  background: var(--page-dark-base);
  color: var(--fg);
}

[data-theme="dark"] .page-viridians-dashboard .vdb-status-badge {
  background: color-mix(in srgb, var(--page-depth) 10%, transparent);
  border-color: color-mix(in srgb, var(--page-depth) 24%, transparent);
}

[data-theme="dark"] .page-viridians-dashboard .vdb-status-label {
  color: color-mix(in srgb, var(--page-depth) 80%, white);
}

[data-theme="dark"] .page-viridians-dashboard .vdb-summary-strip {
  background: color-mix(in srgb, var(--page-primary) 7%, transparent);
  border-color: color-mix(in srgb, var(--page-primary) 24%, transparent);
}

[data-theme="dark"] .page-viridians-dashboard .vdb-summary-path {
  color: var(--page-accent);
}

[data-theme="dark"] .page-viridians-dashboard .vdb-pillar-link {
  color: var(--page-accent);
}

[data-theme="dark"] .page-viridians-dashboard .vdb-nav-link:not(.vdb-nav-link--muted) {
  color: var(--page-accent);
}

[data-theme="dark"] .page-viridians-dashboard .vdb-fellow-avatar {
  background-color: color-mix(in srgb, var(--page-depth) 16%, transparent);
  border-color: color-mix(in srgb, var(--page-depth) 24%, transparent);
}

[data-theme="dark"] .page-viridians-dashboard .vdb-fellow-role {
  color: color-mix(in srgb, var(--page-depth) 80%, white);
}