/* ============================================================
   DTS Membership Dashboard — layout & components
   Built on dts-tokens.css + dts-components.css.
   Goals: readable hierarchy, restrained gradients, one consistent
   dark surface system, and a hairline border that follows the chip
   cut on every corner (the clip-path/border problem is solved with
   a 1px inset fill layer, see .chip-border).
   ============================================================ */

:root {
  /* Local surface system (layered on the brand tokens) */
  --page-bg: #101309;
  --surface-1: #181c14;          /* panels */
  --surface-2: #20271d;          /* nested rows / chips inside panels */
  --surface-hover: #273023;
  --line: rgba(248, 248, 248, 0.12);
  --line-strong: rgba(248, 248, 248, 0.20);
  --line-accent: rgba(178, 255, 0, 0.55);

  --text-1: var(--dts-white);
  --text-2: rgba(248, 248, 248, 0.68);
  --text-3: rgba(248, 248, 248, 0.46);

  /* Chip polygons (reused by the chip-border helper) */
  --chip-sm: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
  --chip-md: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  --chip-lg: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body.dts-root {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(52% 44% at 100% 0%, rgba(156, 196, 138, 0.10), transparent 62%),
    var(--page-bg);
  color: var(--text-1);
  font-family: var(--dts-font);
}

/* one very faint acid glow, far corner — the only decorative blur */
.ambient {
  position: fixed;
  bottom: -12rem;
  left: -10rem;
  width: 30rem;
  height: 30rem;
  border-radius: 999px;
  background: rgba(178, 255, 0, 0.10);
  filter: blur(130px);
  pointer-events: none;
  z-index: 0;
}

.shell {
  position: relative;
  z-index: 1;
  padding-top: var(--dts-space-32);
  padding-bottom: var(--dts-space-64);
}

/* ----------------------------------------------------------------
   Chip-border helper
   The element background paints the 1px hairline; ::before is the
   real fill, inset by 1px and clipped with the same chip, so the
   border is visible along the diagonal cut too.
   ---------------------------------------------------------------- */
.chip-border {
  position: relative;
  isolation: isolate;
  --_chip: var(--cb-chip, var(--chip-md));
  clip-path: var(--_chip);
  background: var(--cb-line, var(--line));
}

.chip-border::before {
  content: "";
  position: absolute;
  inset: var(--cb-w, 1px);
  clip-path: var(--_chip);
  background: var(--cb-fill, var(--surface-1));
  z-index: -1;
  transition: background var(--dts-motion-base) var(--dts-ease);
}

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */
.hero {
  --cb-chip: var(--chip-lg);
  --cb-fill: linear-gradient(135deg, #1d2417 0%, #13160f 72%);
  --cb-line: var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--dts-space-32);
  padding: clamp(24px, 3.4vw, 40px);
  margin-bottom: var(--dts-space-40);
}

.hero-copy {
  max-width: 46rem;
}

.eyebrow {
  margin: 0 0 var(--dts-space-12);
  color: var(--dts-green);
}

.hero-title {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 92px);
  font-weight: var(--dts-weight-black);
  letter-spacing: var(--dts-track-tight);
  line-height: 0.92;
  color: var(--text-1);
}

/* green -> acid: both stops are readable on the dark hero */
.hero-accent {
  background: linear-gradient(96deg, var(--dts-green) 0%, var(--dts-accent) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: var(--dts-space-20) 0 0;
  max-width: 40rem;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--dts-space-16);
  flex-shrink: 0;
}

.hero-buttons {
  display: flex;
  gap: var(--dts-space-12);
}

.dts-btn-ghost-light {
  background: transparent;
  color: var(--text-1);
  border: 1.5px solid var(--line-strong);
}

.dts-btn-ghost-light:hover {
  border-color: var(--text-1);
}

.generated-at {
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: var(--dts-track-snug);
}

/* ----------------------------------------------------------------
   Status / loading message
   ---------------------------------------------------------------- */
.status-message {
  --cb-fill: var(--surface-1);
  margin-bottom: var(--dts-space-24);
  padding: 14px 18px;
  color: var(--text-2);
  font-size: 14px;
}

.status-message.is-error {
  --cb-fill: #2a1b1b;
  --cb-line: rgba(255, 120, 120, 0.5);
  color: #ffd9d9;
}

.is-hidden {
  display: none !important;
}

/* ----------------------------------------------------------------
   Section scaffold
   ---------------------------------------------------------------- */
.section {
  margin-bottom: var(--dts-space-40);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--dts-space-20);
}

.section-kicker {
  margin: 0;
  color: var(--dts-green);
}

.section-title {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: var(--dts-weight-bold);
  letter-spacing: var(--dts-track-snug);
  line-height: 1.04;
  color: var(--text-1);
}

/* ----------------------------------------------------------------
   Primary KPIs
   ---------------------------------------------------------------- */
.kpi-primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dts-space-16);
  margin-bottom: var(--dts-space-16);
}

.kpi-card {
  --cb-fill: var(--surface-1);
  padding: var(--dts-space-24);
  display: flex;
  flex-direction: column;
  gap: var(--dts-space-12);
  min-height: 150px;
}

.kpi-card.is-accent {
  --cb-fill: linear-gradient(150deg, #20290f 0%, var(--surface-1) 70%);
  --cb-line: var(--line-accent);
}

.kpi-label {
  margin: 0;
  color: var(--text-3);
  font-size: var(--dts-text-label);
  font-weight: var(--dts-weight-medium);
  letter-spacing: var(--dts-track-wide);
  text-transform: uppercase;
}

.kpi-value {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: var(--dts-weight-bold);
  letter-spacing: var(--dts-track-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  white-space: nowrap;
}

.kpi-card.is-accent .kpi-value {
  color: var(--dts-accent);
}

.kpi-meta {
  margin: 0;
  margin-top: auto;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.4;
}

/* Secondary stat strip */
.kpi-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--dts-space-12);
}

.stat {
  --cb-chip: var(--chip-sm);
  --cb-fill: var(--surface-1);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: var(--dts-weight-bold);
  letter-spacing: var(--dts-track-snug);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-1);
}

.stat-label {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: var(--dts-track-wide);
  text-transform: uppercase;
}

.stat.is-flag .stat-value {
  color: var(--dts-accent);
}

/* ----------------------------------------------------------------
   Panels (charts + lists)
   ---------------------------------------------------------------- */
.chart-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--dts-space-16);
}

.chart-grid-expiring {
  grid-template-columns: 0.85fr 1.15fr;
}

.list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dts-space-16);
}

.panel {
  --cb-fill: var(--surface-1);
  padding: var(--dts-space-24);
}

.panel-head {
  margin-bottom: var(--dts-space-20);
}

.panel-kicker {
  margin: 0 0 6px;
  color: var(--dts-green);
}

.panel-title {
  margin: 0;
  font-size: 19px;
  font-weight: var(--dts-weight-bold);
  letter-spacing: var(--dts-track-snug);
  color: var(--text-1);
}

/* ----------------------------------------------------------------
   Pipeline funnel
   ---------------------------------------------------------------- */
.funnel {
  display: flex;
  flex-direction: column;
  gap: var(--dts-space-20);
}

.funnel-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--dts-space-16);
}

.funnel-stage {
  font-size: 15px;
  font-weight: var(--dts-weight-bold);
  letter-spacing: var(--dts-track-snug);
  color: var(--text-1);
}

.funnel-amount {
  font-size: 16px;
  font-weight: var(--dts-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--dts-track-snug);
  color: var(--dts-green);
}

.funnel-row.is-goal .funnel-amount {
  color: var(--dts-accent);
}

.funnel-track {
  height: 18px;
  background: rgba(248, 248, 248, 0.06);
  clip-path: var(--chip-sm);
  overflow: hidden;
}

.funnel-fill {
  height: 100%;
  min-width: 3%;
  background: linear-gradient(90deg, var(--dts-green-deep) 0%, var(--dts-green) 100%);
  clip-path: var(--chip-sm);
  transition: width var(--dts-motion-slow) var(--dts-ease);
}

.funnel-row.is-goal .funnel-fill {
  background: linear-gradient(90deg, var(--dts-green) 0%, var(--dts-accent) 100%);
}

.funnel-sub {
  font-size: 13px;
  color: var(--text-3);
}

/* ----------------------------------------------------------------
   Donut + legend
   ---------------------------------------------------------------- */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: var(--dts-space-24);
}

.donut-canvas {
  position: relative;
  width: 168px;
  height: 168px;
  flex-shrink: 0;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.donut-center-value {
  font-size: 34px;
  font-weight: var(--dts-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--dts-track-tight);
  color: var(--text-1);
}

.donut-center-label {
  font-size: 11px;
  letter-spacing: var(--dts-track-wide);
  text-transform: uppercase;
  color: var(--text-3);
}

.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.legend li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-label {
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend-value {
  color: var(--text-1);
  font-weight: var(--dts-weight-bold);
  font-variant-numeric: tabular-nums;
}

/* Chart canvas container for the bar chart */
.bar-canvas {
  position: relative;
  height: 260px;
}

.bar-canvas-short {
  height: 150px;
}

.bar-canvas-tall {
  height: 340px;
}

/* Fee-tier legend */
.tier-legend {
  list-style: none;
  margin: var(--dts-space-20) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 24px;
}

.tier-legend li {
  display: grid;
  grid-template-columns: 12px auto 1fr;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
}

.tier-legend .legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  transform: translateY(1px);
}

.tier-legend .tier-name {
  color: var(--text-1);
  font-weight: var(--dts-weight-bold);
  letter-spacing: var(--dts-track-snug);
}

.tier-legend .tier-meta {
  color: var(--text-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Revenue-runoff summary figures */
.runoff-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dts-space-32);
  margin-bottom: var(--dts-space-20);
}

.runoff-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.runoff-stat-value {
  font-size: 26px;
  font-weight: var(--dts-weight-bold);
  letter-spacing: var(--dts-track-tight);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-1);
}

.runoff-stat.is-risk .runoff-stat-value {
  color: var(--dts-accent);
}

.runoff-stat-label {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: var(--dts-track-wide);
  text-transform: uppercase;
}

/* ----------------------------------------------------------------
   Row lists (pipeline / expiring / review)
   ---------------------------------------------------------------- */
.row-list {
  display: flex;
  flex-direction: column;
  gap: var(--dts-space-12);
}

.row-list-scroll {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
}

.row-list-scroll::-webkit-scrollbar {
  width: 6px;
}
.row-list-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}

.row-item {
  --cb-chip: var(--chip-sm);
  --cb-fill: var(--surface-2);
  padding: 14px 16px;
}

.row-item:hover {
  --cb-fill: var(--surface-hover);
  --cb-line: var(--line-strong);
}

.row-item-head {
  display: flex;
  justify-content: space-between;
  gap: var(--dts-space-16);
  align-items: baseline;
}

.row-item-head a {
  color: var(--text-1);
  text-decoration: none;
  font-weight: var(--dts-weight-bold);
  letter-spacing: var(--dts-track-snug);
  font-size: 15px;
}

.row-item-head a:hover {
  color: var(--dts-accent);
}

.row-amount {
  color: var(--dts-green);
  font-weight: var(--dts-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--dts-track-snug);
  white-space: nowrap;
}

.row-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Pills — green-only palette; acid reserved for true urgency */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--dts-radius-tag);
  font-size: 11px;
  font-weight: var(--dts-weight-medium);
  letter-spacing: var(--dts-track-snug);
  text-transform: uppercase;
  color: var(--text-2);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}

.pill.is-date {
  border-style: dashed;
  color: var(--text-3);
}

.pill.is-soft-accent {
  color: var(--dts-green);
  border-color: rgba(156, 196, 138, 0.5);
}

.pill.is-ok {
  color: var(--dts-green);
  border-color: rgba(156, 196, 138, 0.45);
}

.pill.is-warning {
  background: var(--dts-green);
  color: var(--dts-black);
  border-color: var(--dts-green);
}

.pill.is-danger {
  background: var(--dts-accent);
  color: var(--dts-black);
  border-color: var(--dts-accent);
  font-weight: var(--dts-weight-bold);
}

.empty-state {
  --cb-chip: var(--chip-sm);
  --cb-fill: var(--surface-1);
  --cb-line: rgba(248, 248, 248, 0.16);
  padding: var(--dts-space-20);
  color: var(--text-3);
  font-size: 14px;
  border-style: dashed;
}

/* note line for data-quality / context callouts */
.panel-note {
  margin: var(--dts-space-16) 0 0;
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.page-foot {
  display: flex;
  align-items: center;
  gap: var(--dts-space-16);
  padding-top: var(--dts-space-24);
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 13px;
}

.foot-mark {
  font-weight: var(--dts-weight-black);
  letter-spacing: var(--dts-track-tight);
  color: var(--text-1);
}

.foot-arrow {
  color: var(--dts-accent);
}

/* ----------------------------------------------------------------
   Token gate (kept light — the one intentional light surface)
   ---------------------------------------------------------------- */
.token-gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 19, 9, 0.82);
  backdrop-filter: blur(10px);
  z-index: 40;
}

.token-gate.is-hidden {
  display: none;
}

.token-card {
  width: min(460px, calc(100vw - 32px));
  padding: 32px;
  background: var(--dts-white);
  color: var(--dts-black);
  clip-path: var(--chip-md);
}

.token-card .eyebrow {
  color: var(--dts-green-deep);
}

.token-copy {
  margin-top: var(--dts-space-12);
  color: rgba(29, 32, 28, 0.68);
  line-height: 1.5;
}

.token-label {
  display: block;
  margin-top: var(--dts-space-16);
  margin-bottom: var(--dts-space-8);
  color: rgba(29, 32, 28, 0.8);
  font-weight: var(--dts-weight-medium);
}

.action-button-wide {
  width: 100%;
  justify-content: center;
  margin-top: var(--dts-space-16);
}

.token-error {
  min-height: 1.2rem;
  margin-top: var(--dts-space-12);
  color: #b00020;
  font-size: 14px;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {
  .chart-grid,
  .chart-grid-expiring {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 880px) {
  .kpi-primary {
    grid-template-columns: 1fr;
  }

  .list-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions {
    align-items: flex-start;
    width: 100%;
  }

  .donut-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .donut-canvas {
    align-self: center;
  }
}

@media (max-width: 520px) {
  .row-item-head {
    flex-direction: column;
    gap: 4px;
  }
}