/* account-insights.css — layout only; all colour/theme rules live in site.css */
.vr-insights-shell,
.vr-insights-page-shell {
  display: grid;
  gap: 1.25rem;
}

.vr-insights-hero,
.vr-insights-page-top {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .9fr);
  align-items: stretch;
}

.vr-insights-hero-card,
.vr-insights-score-hero,
.vr-insights-page-panel,
.vr-insights-page-card,
.vr-insights-card {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--vr-border);
  color: var(--vr-text);
}

.vr-insights-hero-card,
.vr-insights-score-hero,
.vr-insights-page-panel {
  padding: 1.35rem;
  background:
    linear-gradient(180deg, rgba(108,99,255,.16), rgba(0,196,179,.08)),
    var(--vr-card);
  box-shadow: 0 18px 40px rgba(2, 6, 23, .22);
}


.vr-insights-hero-card h1,
.vr-insights-score-hero h2,
.vr-insights-card h2,
.vr-insights-page-card h2,
.vr-insights-page-panel h2 {
  margin: 0 0 .45rem;
  color: var(--vr-text);
}

.vr-insights-hero-card p,
.vr-insights-score-hero p,
.vr-insights-card p,
.vr-insights-page-card p,
.vr-insights-page-panel p {
  margin: 0;
  color: var(--vr-text);
}

.vr-insights-kpis,
.vr-insights-mini-grid,
.vr-insights-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-top: 1rem;
}

.vr-insights-kpi,
.vr-insights-mini-card,
.vr-insights-summary-card {
  background: color-mix(in srgb, var(--vr-bg-soft) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--vr-border) 72%, transparent);
  border-radius: 18px;
  padding: .95rem 1rem;
  min-height: 100%;
}

.vr-insights-kpi-label,
.vr-insights-mini-label,
.vr-insights-summary-label {
  display: block;
  font-size: .82rem;
  color: var(--vr-muted);
  margin-bottom: .35rem;
}

.vr-insights-kpi-value,
.vr-insights-mini-value,
.vr-insights-summary-value {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--vr-text);
}

.vr-insights-actions,
.vr-insights-inline-actions,
.vr-insights-card-actions,
.vr-insights-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}

.vr-insights-score-ring {
  width: 112px;
  height: 112px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--vr-accent) var(--score-angle, 0deg), color-mix(in srgb, var(--vr-accent) 18%, transparent) 0deg);
  margin-bottom: 1rem;
}

.vr-insights-score-ring-inner {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--vr-bg-soft);
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--vr-border) 70%, transparent);
}

.vr-insights-score-ring-inner strong {
  display: block;
  font-size: 1.35rem;
}

.vr-insights-grid,
.vr-insights-page-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.vr-insights-page-grid--two {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
}

.vr-insights-card,
.vr-insights-page-card {
  min-height: 100%;
  padding: 1.2rem;
  background: var(--vr-card);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .16);
  display: grid;
  gap: .95rem;
}


.vr-insights-card--span-2 {
  grid-column: span 2;
}

.vr-insights-card-top,
.vr-insights-page-head,
.vr-insights-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
}

.vr-insights-page-head,
.vr-insights-section-head {
  flex-direction: column;
}

.vr-insights-card-top small,
.vr-insights-page-head small,
.vr-insights-section-head small {
  display: block;
  margin-top: .25rem;
  color: var(--vr-muted);
}

.vr-insights-badge-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* =============================================================
   INSIGHTS BADGE — base
   ============================================================= */
.vr-insights-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .28rem .72rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1.5px solid;
  white-space: nowrap;
}

/* ---- Locked: solid indigo body, bright border — both themes ---- */
.vr-insights-badge--locked {
  background: linear-gradient(135deg, #2d1f7a 0%, #1e1b4b 100%);
  border-color: rgba(129,140,248,.95);
  color: #c7d2fe;
  box-shadow: 0 0 14px rgba(108,99,255,.40), inset 0 1px 0 rgba(255,255,255,.12);
}


/* ---- Coming Soon: solid amber/gold body — both themes ---- */
.vr-insights-badge--future {
  background: linear-gradient(135deg, #78350f 0%, #451a03 100%);
  border-color: rgba(251,191,36,.95);
  color: #fde68a;
  box-shadow: 0 0 14px rgba(245,158,11,.35), inset 0 1px 0 rgba(255,255,255,.10);
}


/* ---- Live: solid teal body — both themes ---- */
.vr-insights-badge--live {
  background: linear-gradient(135deg, #065f46 0%, #022c22 100%);
  border-color: rgba(52,211,153,.95);
  color: #6ee7b7;
  box-shadow: 0 0 14px rgba(0,196,179,.32), inset 0 1px 0 rgba(255,255,255,.10);
}



.vr-insights-stat-list,
.vr-insights-breakdown,
.vr-insights-opportunities,
.vr-insights-jobs,
.vr-insights-art-grid,
.vr-insights-link-list,
.vr-insights-list,
.vr-insights-list-tight,
.vr-insights-timeline,
.vr-insights-readiness-list {
  display: grid;
  gap: .7rem;
}

.vr-insights-stat,
.vr-insights-breakdown-item,
.vr-insights-opportunity,
.vr-insights-job,
.vr-insights-art-item,
.vr-insights-link,
.vr-insights-list-item,
.vr-insights-readiness-item,
.vr-insights-table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border-radius: 18px;
  padding: .9rem 1rem;
  background: color-mix(in srgb, var(--vr-bg-soft) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--vr-border) 74%, transparent);
}

.vr-insights-art-item,
.vr-insights-job,
.vr-insights-link,
.vr-insights-table-row {
  align-items: stretch;
}

.vr-insights-art-thumb {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  background: color-mix(in srgb, var(--vr-bg-soft) 78%, transparent);
  flex: 0 0 72px;
}

.vr-insights-art-meta,
.vr-insights-job-meta,
.vr-insights-link-copy,
.vr-insights-opportunity-copy,
.vr-insights-list-copy,
.vr-insights-table-copy,
.vr-insights-readiness-copy {
  display: grid;
  gap: .18rem;
  flex: 1;
  min-width: 0;
}

.vr-insights-muted {
  color: var(--vr-muted);
}

.vr-insights-strong {
  font-weight: 700;
}

.vr-insights-progress {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vr-accent) 14%, var(--vr-bg-soft));
  overflow: hidden;
}

.vr-insights-progress > span {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  background: linear-gradient(90deg, var(--vr-accent), #00c4b3);
}

.vr-insights-empty {
  border: 1px dashed color-mix(in srgb, var(--vr-border) 72%, transparent);
  background: color-mix(in srgb, var(--vr-bg-soft) 86%, transparent);
  border-radius: 18px;
  padding: 1rem;
  color: var(--vr-muted);
}

.vr-insights-page-headline {
  display: grid;
  gap: .35rem;
}

.vr-insights-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.vr-insights-subnav a {
  text-decoration: none;
}

.vr-insights-subnav a[data-active="true"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--vr-accent) 20%, var(--vr-bg-soft)), color-mix(in srgb, var(--vr-accent) 12%, var(--vr-bg-soft)));
  border-color: color-mix(in srgb, var(--vr-accent) 45%, var(--vr-border));
  color: var(--vr-text);
}

.vr-insights-link {
  text-decoration: none;
  color: inherit;
}

.vr-insights-link:hover,
.vr-insights-table-row:hover {
  border-color: color-mix(in srgb, var(--vr-accent) 42%, var(--vr-border));
}

/* =============================================================
   INSIGHTS PILL (inline data tones)
   ============================================================= */
.vr-insights-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .28rem .72rem;
  font-size: .76rem;
  font-weight: 700;
  border: 1.5px solid;
  white-space: nowrap;
}

.vr-insights-pill[data-tone="success"] {
  color: #6ee7b7;
  background: linear-gradient(135deg, #065f46, #022c22);
  border-color: rgba(52,211,153,.88);
}

.vr-insights-pill[data-tone="warning"] {
  color: #fde68a;
  background: linear-gradient(135deg, #78350f, #451a03);
  border-color: rgba(251,191,36,.88);
}

.vr-insights-pill[data-tone="info"] {
  color: #c7d2fe;
  background: linear-gradient(135deg, #2d1f7a, #1e1b4b);
  border-color: rgba(129,140,248,.88);
}

.vr-insights-pill[data-tone="muted"] {
  color: var(--vr-muted);
  background: color-mix(in srgb, var(--vr-bg-soft) 85%, transparent);
  border-color: color-mix(in srgb, var(--vr-border) 72%, transparent);
}


.vr-insights-callout {
  border-radius: 20px;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--vr-accent) 28%, var(--vr-border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--vr-accent) 18%, transparent), color-mix(in srgb, var(--vr-bg-soft) 90%, transparent));
}

.vr-insights-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  color: var(--vr-muted);
  font-size: .9rem;
}

.vr-insights-stat strong,
.vr-insights-breakdown-item strong,
.vr-insights-opportunity strong,
.vr-insights-job strong,
.vr-insights-art-meta strong,
.vr-insights-link strong,
.vr-insights-list-item strong,
.vr-insights-summary-card strong,
.vr-insights-mini-card strong,
.vr-insights-table-row strong,
.vr-insights-readiness-item strong {
  color: var(--vr-text);
}

.vr-insights-table {
  display: grid;
  gap: .7rem;
}

.vr-insights-table-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 120px 120px 130px;
  gap: .75rem;
  color: var(--vr-muted);
  font-size: .82rem;
  padding: 0 .2rem;
}

.vr-insights-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 120px 120px 130px;
}

.vr-insights-table-row > div,
.vr-insights-table-head > div {
  min-width: 0;
}

.vr-insights-table-copy strong,
.vr-insights-table-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.vr-insights-readiness-score {
  font-size: 2rem;
  font-weight: 800;
}

.vr-insights-note-grid {
  display: grid;
  gap: .85rem;
}

@media (max-width: 1100px) {
  .vr-insights-grid,
  .vr-insights-kpis,
  .vr-insights-mini-grid,
  .vr-insights-summary-grid,
  .vr-insights-page-grid,
  .vr-insights-page-grid--two,
  .vr-insights-hero,
  .vr-insights-page-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vr-insights-card--span-2,
  .vr-insights-page-grid > *,
  .vr-insights-page-grid--two > * {
    grid-column: auto;
  }

  .vr-insights-table-head,
  .vr-insights-table-row {
    grid-template-columns: minmax(0, 1.4fr) 100px 100px 120px;
  }
}

@media (max-width: 780px) {
  .vr-insights-grid,
  .vr-insights-kpis,
  .vr-insights-mini-grid,
  .vr-insights-summary-grid,
  .vr-insights-page-grid,
  .vr-insights-page-grid--two,
  .vr-insights-hero,
  .vr-insights-page-top {
    grid-template-columns: 1fr;
  }

  .vr-insights-score-ring {
    width: 96px;
    height: 96px;
  }

  .vr-insights-score-ring-inner {
    width: 74px;
    height: 74px;
  }

  .vr-insights-table-head {
    display: none;
  }

  .vr-insights-table-row {
    grid-template-columns: 1fr;
  }
}


.vr-insights-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  flex-wrap: wrap;
}

.vr-insights-viewbar-copy {
  display: grid;
  gap: .2rem;
}

.vr-insights-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--vr-border) 74%, transparent);
  background: color-mix(in srgb, var(--vr-bg-soft) 86%, transparent);
}

.vr-insights-toggle-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: .62rem .95rem;
  background: transparent;
  color: var(--vr-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.vr-insights-toggle-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--vr-accent) 18%, var(--vr-bg-soft)), color-mix(in srgb, var(--vr-accent) 10%, var(--vr-bg-soft)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vr-accent) 40%, var(--vr-border));
}

body[data-insights-view="charts"] .vr-insights-cards-view { display: none; }
body[data-insights-view="cards"] .vr-insights-charts-view { display: none; }

.vr-insights-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.vr-insights-chart-card {
  min-height: 100%;
  padding: 1.2rem;
  background: var(--vr-card);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .16);
  display: grid;
  gap: .95rem;
  border-radius: 24px;
  border: 1px solid var(--vr-border);
}


.vr-insights-chart-card--span-2 { grid-column: span 2; }

.vr-insights-chart-title {
  margin: 0;
  color: var(--vr-text);
}

.vr-insights-chart-note {
  margin: 0;
  color: var(--vr-muted);
}

.vr-insights-chart-bars,
.vr-insights-chart-list,
.vr-insights-chart-kpis {
  display: grid;
  gap: .85rem;
}

.vr-insights-chart-row {
  display: grid;
  gap: .4rem;
}

.vr-insights-chart-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--vr-text);
  font-weight: 600;
}

.vr-insights-chart-row-top span:last-child {
  color: var(--vr-muted);
  font-weight: 700;
}

.vr-insights-chart-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--vr-accent) 14%, var(--vr-bg-soft));
}

.vr-insights-chart-fill {
  display: block;
  height: 100%;
  width: var(--value, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--vr-accent), #00c4b3);
}

.vr-insights-chart-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border-radius: 18px;
  padding: .9rem 1rem;
  background: color-mix(in srgb, var(--vr-bg-soft) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--vr-border) 74%, transparent);
}

.vr-insights-chart-kpi strong { color: var(--vr-text); }
.vr-insights-chart-kpi span { color: var(--vr-muted); }

.vr-insights-chart-donut-wrap {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.vr-insights-chart-donut {
  width: 132px;
  height: 132px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--vr-accent) var(--score-angle, 0deg), color-mix(in srgb, var(--vr-accent) 18%, transparent) 0deg);
}

.vr-insights-chart-donut-inner {
  width: 94px;
  height: 94px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--vr-bg-soft);
  border: 1px solid color-mix(in srgb, var(--vr-border) 70%, transparent);
}

.vr-insights-chart-donut-inner strong {
  display: block;
  font-size: 1.35rem;
  color: var(--vr-text);
}

.vr-insights-chart-donut-inner span,
.vr-insights-chart-summary,
.vr-insights-chart-list-item span {
  color: var(--vr-muted);
}

.vr-insights-chart-summary strong,
.vr-insights-chart-list-item strong {
  color: var(--vr-text);
}

.vr-insights-chart-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  border-radius: 18px;
  padding: .9rem 1rem;
  background: color-mix(in srgb, var(--vr-bg-soft) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--vr-border) 74%, transparent);
}

.vr-insights-chart-list-item > div {
  display: grid;
  gap: .18rem;
}

@media (max-width: 1100px) {
  .vr-insights-chart-grid {
    grid-template-columns: 1fr;
  }

  .vr-insights-chart-card--span-2 {
    grid-column: auto;
  }
}

@media (max-width: 780px) {
  .vr-insights-viewbar {
    align-items: stretch;
  }

  .vr-insights-toggle {
    width: 100%;
    justify-content: space-between;
  }

  .vr-insights-toggle-btn {
    flex: 1;
    text-align: center;
  }

  .vr-insights-chart-donut {
    width: 110px;
    height: 110px;
  }

  .vr-insights-chart-donut-inner {
    width: 78px;
    height: 78px;
  }
}

.vr-insights-upgrade-banner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border-radius: 22px;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--vr-border) 72%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--vr-bg-soft) 94%, transparent), color-mix(in srgb, var(--vr-bg-soft) 84%, transparent));
}

.vr-insights-upgrade-copy {
  display: grid;
  gap: .24rem;
}

.vr-insights-page-card--locked {
  border-style: dashed;
}

.vr-insights-card[data-lock-state="live"] {
  border-color: color-mix(in srgb, var(--vr-accent) 35%, var(--vr-border));
}

.vr-insights-card[data-lock-state="locked"] {
  opacity: .96;
}

body[data-insights-locked="true"] .vr-insights-charts-view {
  display: none !important;
}

@media (max-width: 780px) {
  .vr-insights-upgrade-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}