@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;600;700;900&display=swap');

:root {
  --gd-dark-blue: #040066;
  --gd-dark-blue-digital: #03004D;
  --gd-light-blue: #00d4ff;
  --gd-blue: #0000ff;
  --grey-50: #f7f8f9;
  --grey-100: #e5e5e5;
  --grey-300: #c7c7c7;
  --grey-700: #4c4c4c;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --font: "Noto Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--grey-50);
}

.gd-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Hero / Brand Stage ---------- */
/* Per the manual's own "Layout Principle > Brand Stage" pages (C11-C13,
   including "Brand Stage: Landscape Formats" - the exact shape of this
   hero), the brand stage is specified as a plain flat G+D Dark Blue block
   with just the logo, no Key Visual required. (The Key Visual sphere+ring
   is a distinct, separate brand element - report covers, image overlays -
   not a mandated part of the brand stage.) Earlier attempts here tried to
   hand-replicate the Key Visual's gradient sphere in CSS; pixel-sampling
   the manual's own PDF showed its "soft edge" is actually built from raster
   alpha-mask layers (an Illustrator opacity-mask export), not a formula a
   CSS radial-gradient can reproduce exactly - so this reverts to the
   manual's own simpler, correct-as-specified flat treatment instead. */
.gd-hero {
  position: relative;
  background: var(--gd-dark-blue);
  padding: 40px 24px 56px;
}

.gd-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}

.gd-wordmark {
  display: block;
  height: 28px;
  width: auto;
  margin-bottom: 28px;
}

.gd-hero-title {
  color: #fff;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  max-width: 720px;
  margin: 0 0 14px;
}
.gd-hero-subtitle {
  color: #cfe6ff;
  font-size: 15px;
  line-height: 1.6;
  max-width: 620px;
  margin: 0;
}

/* ---------- Main content ---------- */
.gd-main {
  max-width: 1180px;
  width: 100%;
  margin: -28px auto 0;
  padding: 0 24px 48px;
  position: relative;
  z-index: 2;
  flex: 1;
}

.filter-bar {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 15px 0 rgba(17, 12, 46, 0.12);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 20px;
}
.filter-control {
  min-width: 200px;
  flex: 1 1 200px;
}
/* Vertical & role comparison tab reads from a Kaleido-precomputed per-vertical
   dataset, not the live filtered df, so the top filter bar can't affect it -
   dimmed + cursor:not-allowed + title tooltip (set by toggle_filter_bar in
   callbacks.py) makes that clear on hover instead of visitors wondering why
   nothing happens when they filter. */
.filter-bar--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.filter-bar--disabled .filter-control,
.filter-bar--disabled #filter-reset {
  pointer-events: none;
}
.filter-control label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.gd-button-ghost {
  background: transparent;
  border: 1px solid var(--grey-300);
  color: var(--gd-dark-blue);
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  border-radius: 6px;
  padding: 9px 16px;
  cursor: pointer;
  height: 38px;
}
.gd-button-ghost:hover { border-color: var(--gd-dark-blue); background: var(--grey-50); }

/* ---------- KPI row ---------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.kpi-tile {
  background: var(--gd-dark-blue);
  border-radius: 10px;
  padding: 18px 20px;
  color: #fff;
}
.kpi-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.kpi-label { font-size: 12px; color: #b9c6ff; margin-top: 6px; }
/* Two-tile rows (e.g. vertical profile) get half-width tiles instead of the
   4-column layout sized for the main dashboard's 4 KPI tiles — the "Most
   over-indexed trait" card needs real width since it holds a full sentence,
   not a single number. */
.kpi-row--halves { grid-template-columns: repeat(2, 1fr); }

/* ---------- Tabs ---------- */
.gd-tabs .tab-container {
  border-bottom: none !important;
  background: var(--grey-50);
  border: 1px solid var(--grey-100);
  border-radius: 10px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 20px;
}
.gd-tab {
  font-family: var(--font) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--gd-dark-blue) !important;
  background: #fff !important;
  border: 2px solid var(--grey-300) !important;
  border-radius: 7px !important;
  padding: 9px 18px !important;
  margin-right: 0 !important;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Hover only changes the border/shadow, never the background or text color -
   an unselected tab's background stays white and its text stays dark blue in
   every state, so hover can never land on a background close enough to the
   text color to wash it out (the earlier translucent dark-blue overlay did,
   since it shared the same hue as the text it sat under). The accent here is
   the brand's Light Blue, a color that never appears as tab text, so there's
   no hue it could ever blend into. */
.gd-tab:hover {
  background: #fff !important;
  border-color: var(--gd-light-blue) !important;
  color: var(--gd-dark-blue) !important;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.35);
}
.gd-tab--selected {
  color: #fff !important;
  background: var(--gd-dark-blue) !important;
  border-color: var(--gd-dark-blue) !important;
  box-shadow: 0 4px 10px rgba(4, 0, 102, 0.25);
}
.gd-tab--selected:hover {
  background: var(--gd-dark-blue) !important;
  border-color: var(--gd-light-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(4, 0, 102, 0.25), 0 0 0 2px rgba(0, 212, 255, 0.35);
}

/* Both tab panels stay mounted (see toggle_tab_panels in callbacks.py) so the
   shared filter bar/KPI row can sit above them without living inside either
   tab's own dcc.Tabs content slot; visibility toggles via this class. */
.tab-panel--hidden {
  display: none;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 860px) {
  .chart-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.chart-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--grey-100);
  padding: 18px 20px 8px;
  /* Grid items default to min-width:auto, which floors their size at their
     content's natural width - and Plotly's default figure width (700px,
     used before the dcc.Graph's config={"responsive": True} resize observer
     ever fires) is wider than a 2-up grid column at most viewport widths.
     Without this, that 700px floor drags the whole grid track wider than
     the column has room for, overflowing the page horizontally instead of
     letting the chart shrink to fit (most visible on C13, whose longer
     y-axis labels made the card wide enough to push past the viewport
     edge). min-width:0 lets the card - and the Plotly graph inside it -
     actually shrink to the grid column's width. */
  min-width: 0;
}
.chart-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; color: var(--text-primary); }
.chart-subtitle { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; line-height: 1.4; }

/* ---------- Vertical comparison tab ---------- */
.vc-note { margin-top: 16px; margin-bottom: 4px; }
.chart-grid--single { grid-template-columns: 1fr; }
.kpi-value--text { font-size: 15px; line-height: 1.3; }

/* Every tab groups its charts into named sections ("Demographics", "Provider
   selection", "Top challenges", ...) that used to be plain bold text with no
   dividers, reading as one undifferentiated block - a top rule + accent bar
   + label styling makes each grouping's boundary obvious at a glance,
   including the first section right under the tab bar/KPI tiles.
   .vc-section-title is shared by every tab's section headers (see
   _section_children in layout.py), so this applies uniformly across all of
   them, not just the Vertical & role comparison tab. */
.vc-section-title {
  margin: 48px 0 18px;
  padding-top: 22px;
  border-top: 1px solid var(--grey-100);
  position: relative;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gd-dark-blue);
}
.vc-section-title::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--gd-light-blue);
}

/* ---------- Key Survey Findings CTA row ---------- */
.cta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 860px) {
  .cta-row { grid-template-columns: 1fr; }
}
.cta-box {
  border-radius: 10px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.cta-title { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: #fff; }
.cta-text { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); margin: 0 0 16px; flex-grow: 1; }
.cta-button {
  align-self: flex-start;
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  color: #fff !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.cta-button:hover { border-color: #fff !important; background: rgba(255, 255, 255, 0.12) !important; }
.cta-box--report { background: var(--gd-dark-blue); }
.cta-box--kaleido { background: var(--gd-dark-blue-digital); }
.cta-box--gd { background: #1a1a4d; }

/* ---------- Dropdown brand touch-up ---------- */
.gd-dropdown .Select-control,
.gd-dropdown .select-control { border-radius: 6px; }
.gd-dropdown .VirtualizedSelectFocusedOption,
.gd-dropdown .Select--single > .Select-control .Select-value,
.gd-dropdown .Select.is-focused > .Select-control { border-color: var(--gd-dark-blue) !important; }

/* ---------- Hero topline / guide button ---------- */
.gd-hero-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.gd-hero-topline .gd-wordmark { margin-bottom: 0; }
.gd-button-ghost--light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}
.gd-button-ghost--light:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---------- User guide modal ---------- */
.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(11, 11, 11, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.guide-overlay--hidden { display: none; }
.lead-gate-hp {
  /* display:none (not just off-screen) so autofill/password-manager engines
     - which fill any input they can see regardless of position, but skip
     display:none ones - don't trip this on real visitors. Trades off some
     robustness against sophisticated bots for not blocking real users. */
  display: none;
}
.guide-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 760px;
  width: 100%;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}
.guide-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--grey-100);
}
.guide-modal-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--gd-dark-blue); }
.guide-close-btn {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
}
.guide-close-btn:hover { color: var(--gd-dark-blue); }
.guide-modal-body { padding: 20px 24px 28px; overflow-y: auto; }
.guide-lead { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 20px; }
.guide-section { margin-bottom: 22px; }
.guide-section-title { font-size: 15px; font-weight: 700; color: var(--gd-dark-blue); margin: 0 0 6px; }
.guide-section-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 10px; }
.guide-chart-list { display: flex; flex-direction: column; gap: 4px; }
.guide-chart { font-size: 13px; line-height: 1.5; }
.guide-chart-title { font-weight: 700; color: var(--text-primary); }
.guide-chart-desc { color: var(--text-secondary); }

/* ---------- Lead gate ---------- */
.lead-gate-overlay { align-items: center; z-index: 200; }
.lead-gate-modal { max-width: 480px; }
.lead-gate-body { padding: 32px 28px; text-align: center; }
.lead-gate-title { font-size: 19px; font-weight: 700; margin: 0 0 8px; color: var(--gd-dark-blue); }
.lead-gate-subtitle { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 20px; }
.lead-gate-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  padding: 12px 14px;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  margin-bottom: 8px;
}
.lead-gate-input:focus { outline: none; border-color: var(--gd-dark-blue); }
.lead-gate-dropdown { text-align: left; margin-bottom: 8px; }
.lead-gate-error { font-size: 12px; color: #c0271e; min-height: 16px; margin-bottom: 8px; text-align: left; }
.lead-gate-submit {
  width: 100%;
  background: var(--gd-dark-blue) !important;
  color: #fff !important;
  border-color: var(--gd-dark-blue) !important;
  height: 42px;
  margin-bottom: 0;
}
.lead-gate-submit:hover { background: var(--gd-dark-blue-digital) !important; }

/* Modal is now opened on-demand (from the "Get the report" CTA) rather than
   forced, so it needs its own close affordance - positioned over the modal
   corner since neither the form nor success view has a header bar. */
.lead-gate-modal { position: relative; }
.lead-gate-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
.lead-gate-view--hidden { display: none; }
.lead-gate-success-ctas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 28px 28px;
}
@media (max-width: 480px) {
  .lead-gate-success-ctas { grid-template-columns: 1fr; }
}
/* Success view's CTA boxes reuse .cta-box, but sized down for the modal
   rather than the full-width dashboard row. */
.lead-gate-success-ctas .cta-box { padding: 16px 16px 14px; }
.lead-gate-success-ctas .cta-title { font-size: 13px; }
.lead-gate-success-ctas .cta-text { font-size: 12px; margin-bottom: 12px; }
.lead-gate-success-ctas .cta-button { font-size: 12px; padding: 7px 12px; height: auto; }

/* ---------- Footer ---------- */
.gd-footer {
  background: var(--gd-dark-blue);
  color: #cfe6ff;
  text-align: center;
  padding: 22px 16px;
  font-size: 12px;
}
.gd-footer p { margin: 2px 0; }
.gd-footer-note { color: #8fa7e0; }