/* ==========================================================================
   PHINS Unified Theme — chrome layer
   --------------------------------------------------------------------------
   Shared design language introduced with the landing/auth redesign:
   deep-navy glass chrome, the shield-and-fin emblem, Space Grotesk display
   type and gold accents.

   This stylesheet is loaded AFTER each page's own <style> block and only
   restyles the shared chrome (header, brand, nav, splash, accents), so page
   content, layout and behavior remain untouched.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --phins-navy: #060d1f;
  --phins-ink: #eaf1ff;
  --phins-gold: #e3bf6f;
  --phins-gold-strong: #f7e2a0;
  --phins-line: rgba(127, 178, 255, 0.16);
}

/* ===== Header chrome ===== */
.phins-header,
.admin-header {
  background:
    radial-gradient(700px 180px at 85% -60%, rgba(21, 68, 155, 0.5), transparent 70%),
    rgba(6, 13, 31, 0.96) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--phins-line) !important;
  box-shadow: 0 8px 30px rgba(2, 8, 23, 0.35) !important;
}

/* ===== Brand ===== */
.phins-logo-icon,
.admin-header .logo-icon {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.phins-logo-icon img {
  filter: drop-shadow(0 4px 14px rgba(79, 216, 255, 0.3));
}
.phins-logo-text,
.admin-header .logo-text {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  background: linear-gradient(180deg, #ffffff 0%, #b7d3ff 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ===== Navigation ===== */
.phins-nav a {
  color: rgba(234, 241, 255, 0.85) !important;
}
.phins-nav a:hover {
  background: rgba(127, 178, 255, 0.14) !important;
  color: #ffffff !important;
}
.phins-nav a.active {
  background: linear-gradient(135deg, var(--phins-gold-strong) 0%, var(--phins-gold) 100%) !important;
  color: #071022 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(227, 191, 111, 0.35) !important;
}

/* ===== Mobile drawer — navy glass tiles, no 135deg stripe bleed =====
   Admin (and other #mobile-nav hosts) previously painted a bright
   #0d47a1→#1565c0 diagonal on the open drawer. Semi-transparent link
   chips then showed that hatch as "strips///" across every row. The
   drawer is now the same deep-navy glass as the header; inactive rows
   are opaque navy tiles; the gold active state is a vertical wash so
   a full-width mobile chip does not read as a left-to-right stripe. */
@media screen and (max-width: 1024px) {
  /* backdrop-filter on the header creates a containing block; keep
     overflow visible so the open drawer and Assessments chooser are
     not clipped on iOS/Android (portrait or landscape). */
  .phins-header,
  .admin-header {
    overflow: visible !important;
  }

  #mobile-nav.phins-nav,
  .phins-nav#mobile-nav {
    background:
      radial-gradient(720px 220px at 88% -36%, rgba(21, 68, 155, 0.48), transparent 70%),
      #060d1f !important;
    border-top: 1px solid var(--phins-line) !important;
    box-shadow: 0 18px 40px rgba(2, 8, 23, 0.55) !important;
    padding: 10px 12px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 6px !important;
    top: 60px !important;
    /* Header chrome uses backdrop-filter, which makes the header the
       containing block for position:fixed descendants. Pinning bottom:0
       then computes height as (header − 60px) ≈ 0, so the ☰ toggle adds
       .open but the drawer is invisible. Size from content + a viewport
       cap instead. */
    bottom: auto !important;
    height: auto !important;
    max-height: calc(100vh - 60px) !important;
    max-height: calc(100dvh - 60px) !important;
    max-height: calc(100svh - 60px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    align-items: stretch !important;
  }

  #mobile-nav.phins-nav a,
  .phins-nav#mobile-nav a {
    background: rgba(16, 31, 63, 0.96) !important;
    border: 1px solid var(--phins-line) !important;
    color: var(--phins-ink) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    -webkit-text-fill-color: var(--phins-ink) !important;
    background-clip: padding-box !important;
    -webkit-background-clip: padding-box !important;
    border-radius: 12px !important;
    white-space: normal !important;
    min-height: 44px;
    box-sizing: border-box;
  }

  #mobile-nav.phins-nav a:hover,
  .phins-nav#mobile-nav a:hover {
    background: rgba(127, 178, 255, 0.16) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  #mobile-nav.phins-nav a.active,
  .phins-nav#mobile-nav a.active {
    background: var(--phins-gold) !important;
    color: #071022 !important;
    -webkit-text-fill-color: #071022 !important;
    border-color: rgba(247, 226, 160, 0.7) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 6px 18px rgba(227, 191, 111, 0.32) !important;
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  }

  #mobile-nav .assessments-nav,
  #mobile-nav [data-assessments-nav] {
    display: flex !important;
    width: 100% !important;
    max-width: 100%;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    min-width: 0;
  }
  /* Visible before assessments-nav.js mounts so the drawer never
     drops a hole between Media and Cyber Security. */
  #mobile-nav [data-assessments-nav]:not([data-assessments-ready]) {
    justify-content: center;
    padding: 14px 16px;
    min-height: 44px;
    border-radius: 12px;
    background: rgba(16, 31, 63, 0.96);
    border: 1px solid var(--phins-line);
    color: var(--phins-ink);
    font-weight: 600;
    letter-spacing: 0.04em;
    box-sizing: border-box;
  }
  #mobile-nav .assessments-nav-toggle {
    width: 100%;
    justify-content: center;
    padding: 14px 16px !important;
    min-height: 44px;
    border-radius: 12px !important;
    background: rgba(16, 31, 63, 0.96) !important;
    border: 1px solid var(--phins-line) !important;
    color: var(--phins-ink) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-nav .assessments-nav-toggle.active,
  #mobile-nav .assessments-nav.open .assessments-nav-toggle {
    background: var(--phins-gold) !important;
    color: #071022 !important;
  }
  /* Keep the chooser in-flow inside the scrollable drawer. An absolute
     panel is clipped by overflow-y:auto and sits under iOS/Android
     browser chrome — the reported "Assessments does not appear". */
  #mobile-nav .assessments-nav-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    margin-top: 8px;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    box-sizing: border-box;
  }
  #mobile-nav .assessments-nav-item {
    white-space: normal !important;
    text-align: start !important;
    min-height: 44px;
    -webkit-text-fill-color: var(--phins-ink) !important;
  }
  #mobile-nav .assessments-nav-item-label,
  #mobile-nav .assessments-nav-item-hint {
    white-space: normal !important;
  }

  /* Clipped gradient fills dither as diagonal "///" hatch on small
     mobile glyphs. Use the brand ice ink as a solid fill instead. */
  .phins-logo-text,
  .admin-header .logo-text {
    display: inline-block !important;
    letter-spacing: 0.14em !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--phins-ink) !important;
    color: var(--phins-ink) !important;
    text-shadow: 0 0 18px rgba(127, 178, 255, 0.28);
  }

  .mobile-menu-btn {
    background: rgba(127, 178, 255, 0.12) !important;
    border: 1px solid var(--phins-line) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
  }
}

/* Short landscape (iOS/Android phones rotated): two-column chips so
   Assessments stays on-screen, then expand to full width when open. */
@media screen and (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  #mobile-nav.phins-nav.open,
  .phins-nav#mobile-nav.open {
    flex-flow: row wrap !important;
    align-items: stretch !important;
    padding: 6px 10px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 4px !important;
    top: 48px !important;
    max-height: calc(100vh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    max-height: calc(100svh - 48px - env(safe-area-inset-bottom, 0px)) !important;
  }
  #mobile-nav.phins-nav a,
  .phins-nav#mobile-nav a,
  #mobile-nav .assessments-nav-toggle {
    padding: 8px 10px !important;
    font-size: 0.92rem !important;
    min-height: 40px;
  }
  #mobile-nav.phins-nav > a,
  #mobile-nav > a {
    flex: 1 1 calc(50% - 4px);
    width: auto !important;
    max-width: calc(50% - 4px);
  }
  /* Only the host is a drawer flex item — the inner wrap keeps filling it,
     otherwise the closed toggle shrinks to half of a half-column. */
  #mobile-nav [data-assessments-nav] {
    flex: 1 1 calc(50% - 4px);
    width: auto !important;
    max-width: calc(50% - 4px);
  }
  #mobile-nav [data-assessments-nav]:has(.assessments-nav.open) {
    flex: 1 1 100%;
    width: 100% !important;
    max-width: 100%;
  }
  #mobile-nav .assessments-nav-item-hint {
    font-size: 0.66rem;
  }
}

/* Logout becomes a quiet gold outline pill */
.btn-logout,
.phins-nav .btn-logout,
.phins-nav a.btn-logout,
.phins-utility .btn-logout {
  background: transparent !important;
  border: 1px solid rgba(227, 191, 111, 0.65) !important;
  color: var(--phins-gold) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn-logout:hover,
.phins-nav .btn-logout:hover,
.phins-nav a.btn-logout:hover,
.phins-utility .btn-logout:hover {
  background: rgba(227, 191, 111, 0.16) !important;
  color: var(--phins-gold-strong) !important;
}

/* ===== Splash screens ===== */
#splash-screen {
  background: var(--phins-navy) !important;
}
#splash-screen .splash-logo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 44px rgba(79, 216, 255, 0.28));
}
#splash-screen .splash-text {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5em !important;
  padding-left: 0.5em;
}
#splash-screen .splash-tagline {
  color: var(--phins-gold) !important;
  letter-spacing: 0.42em !important;
  padding-left: 0.42em;
  text-transform: uppercase;
}

/* ===== Shared accents ===== */
::selection {
  background: rgba(227, 191, 111, 0.35);
}

/* ==========================================================================
   AI assistant chrome — complementary navy/gold
   --------------------------------------------------------------------------
   The floating voice quick-actions pill and panel are injected at runtime by
   ui-clarity.js with a purple gradient. On themed pages, restyle them to the
   deep-navy glass + gold accent language (complementary to the spectrum
   tiles). !important is required to beat the runtime-injected stylesheet.
   ========================================================================== */

#phins-vqa-bar #phins-vqa-toggle {
  background: rgba(9, 17, 38, 0.95) !important;
  border: 1px solid rgba(227, 191, 111, 0.65) !important;
  color: var(--phins-gold) !important;
  box-shadow: 0 10px 28px rgba(2, 8, 23, 0.4) !important;
}
#phins-vqa-panel {
  background:
    radial-gradient(520px 180px at 88% -40%, rgba(123, 97, 255, 0.38), transparent 65%),
    radial-gradient(420px 160px at 6% 120%, rgba(21, 68, 155, 0.5), transparent 70%),
    rgba(9, 17, 38, 0.97) !important;
  border: 1px solid var(--phins-line) !important;
  box-shadow: 0 14px 36px rgba(2, 8, 23, 0.45) !important;
}
#phins-vqa-panel .phins-vqa-ask {
  background: linear-gradient(135deg, var(--phins-gold-strong) 0%, var(--phins-gold) 100%) !important;
  color: #071022 !important;
}

/* ==========================================================================
   Overview spectrum tiles
   --------------------------------------------------------------------------
   Opt-in layer for the dashboard "overview" area (admin.html and
   dashboard.html). Applies the landing-page design language to the stat
   tiles and hero action cards: deep-navy glass surfaces, a spectrum of
   accent hues across the row, Space Grotesk numerals, Inter labels, no
   emoji icons, compact spacing.

   Enable by adding .phins-spectrum-stats to a .dashboard-stats grid and
   .phins-spectrum-actions to a .dashboard-actions grid.
   ========================================================================== */

/* --- Spectrum hue ramp (cycles across tiles, left to right) --- */
.phins-spectrum-stats > *:nth-child(12n + 1),
.phins-spectrum-actions > *:nth-child(12n + 1) { --tile-accent: #4fd8ff; }
.phins-spectrum-stats > *:nth-child(12n + 2),
.phins-spectrum-actions > *:nth-child(12n + 2) { --tile-accent: #64b5ff; }
.phins-spectrum-stats > *:nth-child(12n + 3),
.phins-spectrum-actions > *:nth-child(12n + 3) { --tile-accent: #7fb2ff; }
.phins-spectrum-stats > *:nth-child(12n + 4),
.phins-spectrum-actions > *:nth-child(12n + 4) { --tile-accent: #9d8cff; }
.phins-spectrum-stats > *:nth-child(12n + 5),
.phins-spectrum-actions > *:nth-child(12n + 5) { --tile-accent: #c58cf2; }
.phins-spectrum-stats > *:nth-child(12n + 6),
.phins-spectrum-actions > *:nth-child(12n + 6) { --tile-accent: #f18fc1; }
.phins-spectrum-stats > *:nth-child(12n + 7),
.phins-spectrum-actions > *:nth-child(12n + 7) { --tile-accent: #ff9e8a; }
.phins-spectrum-stats > *:nth-child(12n + 8),
.phins-spectrum-actions > *:nth-child(12n + 8) { --tile-accent: #ffbe76; }
.phins-spectrum-stats > *:nth-child(12n + 9),
.phins-spectrum-actions > *:nth-child(12n + 9) { --tile-accent: #e3bf6f; }
.phins-spectrum-stats > *:nth-child(12n + 10),
.phins-spectrum-actions > *:nth-child(12n + 10) { --tile-accent: #b9d977; }
.phins-spectrum-stats > *:nth-child(12n + 11),
.phins-spectrum-actions > *:nth-child(12n + 11) { --tile-accent: #6fe0b8; }
.phins-spectrum-stats > *:nth-child(12n + 12),
.phins-spectrum-actions > *:nth-child(12n + 12) { --tile-accent: #58d6de; }

/* --- Stat tiles --- */
.dashboard-stats.phins-spectrum-stats {
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}

/* 12-cell variant (admin overview: 11 tiles + one double-width tile) so the
   grid always resolves to full, proportionally aligned rows. */
.dashboard-stats.phins-spectrum-stats.phins-stats-grid-12 {
  grid-template-columns: repeat(6, 1fr) !important;
}
.phins-stats-grid-12 .phins-stat-wide {
  grid-column: span 2;
}
@media screen and (max-width: 1180px) {
  .dashboard-stats.phins-spectrum-stats.phins-stats-grid-12 {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .phins-stats-grid-12 .phins-stat-wide {
    grid-column: span 2;
  }
}
@media screen and (max-width: 768px) {
  .dashboard-stats.phins-spectrum-stats.phins-stats-grid-12 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .phins-stats-grid-12 .phins-stat-wide {
    grid-column: span 2;
  }
}
.phins-spectrum-stats .stat-box {
  position: relative;
  overflow: hidden;
  display: block;
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(21, 68, 155, 0.38), transparent 62%),
    rgba(7, 15, 34, 0.96) !important;
  border: 1px solid var(--phins-line) !important;
  border-left-width: 1px !important;
  border-left-color: var(--phins-line) !important;
  border-radius: 12px !important;
  padding: 12px 14px 11px !important;
  text-align: left !important;
  color: var(--phins-ink) !important;
  box-shadow: 0 4px 18px rgba(2, 8, 23, 0.28) !important;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.phins-spectrum-stats .stat-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tile-accent, #7fb2ff) 0%, transparent 88%);
  opacity: 0.9;
}
.phins-spectrum-stats .stat-box:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(127, 178, 255, 0.4) !important;
  box-shadow: 0 10px 26px rgba(2, 8, 23, 0.42) !important;
}
.phins-spectrum-stats .stat-icon {
  display: none !important;
}
.phins-spectrum-stats .stat-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif !important;
  font-size: 1.42rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  margin: 0 0 3px 0 !important;
}
.phins-spectrum-stats .stat-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.64rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgba(234, 241, 255, 0.6) !important;
  margin: 0 !important;
}
.phins-spectrum-stats .stat-change {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  color: var(--tile-accent, #7fb2ff) !important;
  margin-top: 5px !important;
}

/* --- Hero action cards (customer dashboard) --- */
/* Fixed 3-column grid: the six cards always resolve to two full rows. */
.dashboard-actions.phins-spectrum-actions {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 22px !important;
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
  .dashboard-actions.phins-spectrum-actions {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.phins-spectrum-actions .action-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(130% 110% at 100% 0%, rgba(21, 68, 155, 0.38), transparent 62%),
    rgba(7, 15, 34, 0.96) !important;
  border: 1px solid var(--phins-line) !important;
  border-radius: 14px !important;
  padding: 15px 18px 14px !important;
  text-align: left !important;
  color: var(--phins-ink) !important;
  box-shadow: 0 4px 18px rgba(2, 8, 23, 0.28) !important;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.phins-spectrum-actions .action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--tile-accent, #7fb2ff) 0%, transparent 88%);
  opacity: 0.9;
}
.phins-spectrum-actions .action-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(127, 178, 255, 0.4) !important;
  box-shadow: 0 10px 26px rgba(2, 8, 23, 0.42) !important;
}
.phins-spectrum-actions .action-card .stat-icon {
  display: none !important;
}
.phins-spectrum-actions .action-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.phins-spectrum-actions .action-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(234, 241, 255, 0.6);
}
.phins-spectrum-actions .action-card-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--tile-accent, #7fb2ff);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.phins-spectrum-actions .action-card-value {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 4px 0;
}
.phins-spectrum-actions .action-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  color: rgba(234, 241, 255, 0.55);
}

@media screen and (max-width: 768px) {
  .dashboard-stats.phins-spectrum-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .dashboard-actions.phins-spectrum-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ==========================================================================
   Assessments route chooser (nav dropdown)
   --------------------------------------------------------------------------
   Deep-navy glass + gold accents (PR #433 language). Mounted by
   assessments-nav.js into [data-assessments-nav] hosts.
   ========================================================================== */

.assessments-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.assessments-nav-toggle {
  appearance: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: rgba(234, 241, 255, 0.85) !important;
  background: transparent;
  padding: 6px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.assessments-nav-toggle:hover {
  background: rgba(127, 178, 255, 0.14) !important;
  color: #ffffff !important;
}
.assessments-nav-toggle.active,
.assessments-nav.open .assessments-nav-toggle {
  background: linear-gradient(135deg, var(--phins-gold-strong) 0%, var(--phins-gold) 100%) !important;
  color: #071022 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(227, 191, 111, 0.35) !important;
}
.assessments-nav-caret {
  font-size: 0.7em;
  opacity: 0.85;
}
.assessments-nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 280px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: min(70vh, 420px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1200;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--phins-line);
  background:
    radial-gradient(420px 140px at 90% -30%, rgba(21, 68, 155, 0.55), transparent 70%),
    rgba(6, 13, 31, 0.98);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 16px 40px rgba(2, 8, 23, 0.5);
  box-sizing: border-box;
}
.assessments-nav--drop-up .assessments-nav-menu {
  top: auto;
  bottom: calc(100% + 8px);
}
.assessments-nav--align-end .assessments-nav-menu {
  left: auto;
  right: 0;
}
.assessments-nav-item {
  display: block;
  text-decoration: none !important;
  color: var(--phins-ink) !important;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 2px;
  transition: background 0.15s ease;
}
.assessments-nav-item:hover {
  background: rgba(127, 178, 255, 0.12) !important;
}
.assessments-nav-item.is-active {
  background: rgba(227, 191, 111, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(227, 191, 111, 0.45);
}
.assessments-nav-item-label {
  display: block;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: #ffffff;
}
.assessments-nav-item-hint {
  display: block;
  margin-top: 2px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: rgba(234, 241, 255, 0.55);
}
@media screen and (max-width: 720px) {
  .assessments-nav-menu {
    left: auto;
    right: 0;
    min-width: min(260px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}