/*
 * ════════════════════════════════════════════════════════════════
 *  FUTUREBRAINING — SHARED DESIGN SYSTEM
 *  brand.css · v1.0 · 20 March 2026
 * ════════════════════════════════════════════════════════════════
 */

:root {
  --color-dark: #231B3B;
  --color-purple: #483778;
  --color-light-purple: #6F658C;
  --color-grey-purple: #C7C1D9;
  --color-pink: #FF7FE8;
  --color-yellow: #DEFF00;
  --color-cyan: #72FFFF;
  --color-blue-purple: #8052FE;

  --color-red: #E8443A;
  --color-amber: #E8922A;
  --color-green: #22C55E;

  --tint-red-bg: rgba(232, 68, 58, 0.04);
  --tint-red-border: rgba(232, 68, 58, 0.18);
  --tint-amber-bg: rgba(232, 146, 42, 0.05);
  --tint-amber-border: rgba(232, 146, 42, 0.20);
  --tint-green-bg: rgba(34, 197, 94, 0.04);
  --tint-green-border: rgba(34, 197, 94, 0.18);

  --subblock-green-bg: rgba(34, 197, 94, 0.09);
  --subblock-green-border: rgba(34, 197, 94, 0.20);
  --subblock-red-bg: rgba(232, 68, 58, 0.08);
  --subblock-red-border: rgba(232, 68, 58, 0.18);
  --subblock-purple-bg: rgba(72, 55, 120, 0.08);
  --subblock-purple-border: rgba(72, 55, 120, 0.18);

  --font: 'Poppins', sans-serif;
  --tight: -0.027em;
  --report-max-width: 780px;
  --card-radius: 14px;
  --card-padding: 30px 32px;
  --page-bg: #F4F2F9;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--page-bg);
  color: var(--color-dark);
  min-height: 100vh;
  line-height: 1.4;
}

.report-outer {
  max-width: var(--report-max-width);
  margin: 0 auto;
  padding: 28px 24px 100px;
}

.logo {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--tight);
  color: white;
  text-decoration: none;
}

.logo .ai { color: var(--color-pink); }

.logo .tm {
  color: rgba(255,255,255,0.3);
  font-size: 9px;
  vertical-align: super;
  font-weight: 400;
}

.logo.dark { color: var(--color-purple); }
.logo.dark .ai { color: var(--color-pink); }
.logo.dark .tm { color: var(--color-light-purple); }

.btn-ghost {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.2);
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
  text-decoration: none;
}

.btn-ghost:hover { color: white; border-color: rgba(255,255,255,0.45); }

.btn-pink {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-dark);
  background: var(--color-pink);
  border: none;
  padding: 7px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.14s;
  white-space: nowrap;
  text-decoration: none;
}

.btn-pink:hover { background: #FF60E0; }

.btn-cta {
  display: inline-block;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-dark);
  background: var(--color-pink);
  border: none;
  cursor: pointer;
  padding: 14px 32px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.14s;
}

.btn-cta:hover { background: #FF60E0; transform: translateY(-1px); }

.btn-outline {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-light-purple);
  background: white;
  border: 1.5px solid var(--color-grey-purple);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.14s;
  text-decoration: none;
}

.btn-outline:hover { border-color: var(--color-purple); color: var(--color-purple); }

.hero-banner {
  background: var(--color-dark);
  position: relative;
  overflow: hidden;
}

.hero-banner::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(255,127,232,0.18) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-banner::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(128,82,254,0.14) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.hero-nav-actions { display: flex; gap: 10px; }

.hero-body {
  position: relative;
  z-index: 2;
  max-width: var(--report-max-width);
  margin: 0 auto;
  padding: 44px 40px 52px;
}

.hero-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-pink);
  margin-bottom: 18px;
}

.hero-name {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: var(--tight);
  color: white;
  line-height: 1.05;
  margin-bottom: 10px;
}

.hero-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 32px;
  line-height: 1.5;
}

.hero-sub strong { color: rgba(255,255,255,0.7); font-weight: 500; }

.hero-values { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-end; }
.hero-value-group { display: flex; flex-direction: column; gap: 3px; }

.hero-value-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.hero-value-word {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: var(--tight);
  line-height: 1;
}

.hero-value-word.red { color: var(--color-red); }
.hero-value-word.amber { color: var(--color-amber); }
.hero-value-word.green { color: var(--color-green); }
.hero-value-word.muted { color: rgba(255,255,255,0.4); }

.section-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-light-purple);
  margin-bottom: 3px;
}

.section-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: var(--tight);
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: 5px;
}

.section-defn {
  font-size: 13px;
  color: var(--color-light-purple);
  margin-bottom: 22px;
  line-height: 1.55;
  font-style: italic;
}

.card {
  background: white;
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin-bottom: 8px;
  border: 1px solid rgba(199,193,217,0.5);
}

.card.tint-red { background: var(--tint-red-bg); border-color: var(--tint-red-border); }
.card.tint-amber { background: var(--tint-amber-bg); border-color: var(--tint-amber-border); }
.card.tint-green { background: var(--tint-green-bg); border-color: var(--tint-green-border); }

.card-dark {
  background: var(--color-dark);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  margin-bottom: 8px;
}

.card-dark .section-eyebrow { color: rgba(255,255,255,0.3); }
.card-dark .section-title { color: white; }
.card-dark .section-defn { color: rgba(255,255,255,0.35); }

.value-word {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: var(--tight);
  line-height: 1;
  margin-bottom: 4px;
}

.value-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.value-word.red, .value-sub.red { color: var(--color-red); }
.value-word.amber, .value-sub.amber { color: var(--color-amber); }
.value-word.green, .value-sub.green { color: var(--color-green); }
.value-word.muted, .value-sub.muted { color: var(--color-light-purple); }

.cap-bars { display: flex; flex-direction: column; gap: 13px; margin-bottom: 20px; }
.cap-bar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.cap-bar-name { font-size: 13px; font-weight: 600; color: var(--color-dark); }

.cap-bar-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
}

.cap-bar-tag.strong { background: rgba(34,197,94,0.12); color: var(--color-green); }
.cap-bar-tag.bottleneck { background: rgba(232,146,42,0.14); color: var(--color-amber); }
.cap-bar-tag.bottleneck.low { background: rgba(232,68,58,0.12); color: var(--color-red); }

.cap-bar-track { background: rgba(199,193,217,0.35); border-radius: 5px; height: 8px; overflow: hidden; }
.cap-bar-fill { height: 100%; border-radius: 5px; }
.cap-bar-fill.strong { background: var(--color-green); }
.cap-bar-fill.bottleneck { background: var(--color-amber); }
.cap-bar-fill.bottleneck.low { background: var(--color-red); }

.readiness-note {
  font-size: 12.5px;
  color: var(--color-light-purple);
  margin-bottom: 22px;
  line-height: 1.5;
}

.curiosity-signal {
  background: linear-gradient(135deg, #1a1030, #2a1f45);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.curiosity-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-cyan);
  box-shadow: 0 0 8px var(--color-cyan);
  flex-shrink: 0;
  margin-top: 4px;
}

.curiosity-signal-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 4px;
}

.curiosity-signal-text { font-size: 13px; color: rgba(255,255,255,0.75); line-height: 1.55; }

.work-shape-track {
  height: 10px;
  border-radius: 6px;
  display: flex;
  overflow: hidden;
  margin-bottom: 1px;
}

.ws-under { background: var(--color-red); }
.ws-moving { background: var(--color-amber); }
.ws-human { background: var(--color-green); }

.work-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: rgba(199,193,217,0.4);
  border-radius: 10px;
  overflow: hidden;
}

.work-col { padding: 16px 14px; }
.work-col.under { background: rgba(232,68,58,0.07); }
.work-col.moving { background: rgba(232,146,42,0.07); }
.work-col.human { background: rgba(34,197,94,0.07); }
.work-col:first-child { border-radius: 10px 0 0 10px; }
.work-col:last-child { border-radius: 0 10px 10px 0; }

.work-col-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.work-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.work-col-dot.under { background: var(--color-red); }
.work-col-dot.moving { background: var(--color-amber); }
.work-col-dot.human { background: var(--color-green); }

.work-col-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.work-col-label.under { color: var(--color-red); }
.work-col-label.moving { color: var(--color-amber); }
.work-col-label.human { color: var(--color-green); }

.work-col-pct {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: var(--tight);
  margin-bottom: 12px;
}

.work-col-pct.under { color: var(--color-red); }
.work-col-pct.moving { color: var(--color-amber); }
.work-col-pct.human { color: var(--color-green); }

.work-col-tasks { display: flex; flex-direction: column; gap: 5px; }

.work-task {
  font-size: 12px;
  color: var(--color-dark);
  line-height: 1.4;
  padding: 6px 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 6px;
}

.level-description { font-size: 15px; color: var(--color-dark); line-height: 1.75; margin-bottom: 20px; }
.level-subs { display: flex; flex-direction: column; gap: 8px; }

.level-sub { border-radius: 10px; padding: 14px 18px; }
.level-sub.how { background: var(--subblock-green-bg); border: 1px solid var(--subblock-green-border); }
.level-sub.risk { background: var(--subblock-red-bg); border: 1px solid var(--subblock-red-border); }
.level-sub.next { background: var(--subblock-purple-bg); border: 1px solid var(--subblock-purple-border); }

.level-sub-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.level-sub.how .level-sub-label { color: var(--color-green); }
.level-sub.risk .level-sub-label { color: var(--color-red); }
.level-sub.next .level-sub-label { color: var(--color-purple); }

.level-sub-text { font-size: 13.5px; color: var(--color-dark); line-height: 1.6; }
.level-sub.next .level-sub-text { color: var(--color-purple); font-weight: 500; }

.occ-narrative { font-size: 15px; color: var(--color-dark); line-height: 1.75; }
.insight-body { font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.8; }
.action-body { font-size: 15px; color: rgba(255,255,255,0.8); line-height: 1.75; margin-bottom: 20px; }

.reflection-box {
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 18px 20px;
  border-left: 3px solid var(--color-yellow);
}

.reflection-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-yellow);
  margin-bottom: 8px;
}

.reflection-text { font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.65; font-style: italic; }
.cta-tagline { font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 22px; line-height: 1.65; }
.cta-list { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 9px; }
.cta-list li { display: flex; gap: 10px; font-size: 14px; color: rgba(255,255,255,0.75); line-height: 1.5; }
.cta-list li::before { content: '→'; color: var(--color-pink); font-weight: 700; flex-shrink: 0; }

.preview-banner {
  background: var(--color-yellow);
  color: var(--color-dark);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 7px 24px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 300;
}

.text-red { color: var(--color-red); }
.text-amber { color: var(--color-amber); }
.text-green { color: var(--color-green); }
.text-muted { color: var(--color-light-purple); }
.text-pink { color: var(--color-pink); }
.text-white { color: white; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

@media print {
  @page {
    size: A4;
    margin: 12mm 11mm 14mm;
  }

  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;

  .preview-banner,
  .hero-nav-actions,
  .card-cta,
  .site-shell > header.hero-banner,
  .site-main,
  .footer,
  .starter-report-btn,
  #edit-report,
  #save-report-edits,
  #back-to-site,
  #print-report {
    display: none !important;
  }

  .print-hide {
    display: none !important;
  }

  html,
  body {
    background: white !important;
  }

  body {
    font-size: 11pt;
    color: #1f1b2e;
  }

  .site-shell {
    padding-bottom: 0 !important;
  }

  .report-page {
    display: block !important;
    margin-top: 0 !important;
    background: white !important;
  }

  .report-page.hidden {
    display: block !important;
  }

  .report-outer {
    max-width: none !important;
    width: 100% !important;
    padding: 6mm 0 0 !important;
  }

  .hero-banner {
    background: white !important;
    border-bottom: 1px solid rgba(35, 27, 59, 0.16);
    margin-bottom: 5mm !important;
  }

  .hero-banner::before,
  .hero-banner::after { display: none; }

  .hero-nav {
    padding: 0 0 4mm !important;
    border-bottom: none !important;
    display: block !important;
  }

  .hero-body {
    max-width: none !important;
    padding: 0 0 2mm !important;
  }

  .hero-name { color: var(--color-dark) !important; }
  .hero-sub { color: var(--color-light-purple) !important; }
  .hero-eyebrow { color: var(--color-purple) !important; }
  .logo { color: var(--color-dark) !important; }
  .logo .ai { color: var(--color-pink) !important; }
  .hero-value-label { color: var(--color-light-purple) !important; }
  .hero-value-word {
    font-size: 15pt !important;
  }

  .hero-values {
    gap: 14mm !important;
  }

  .value-word.red, .value-sub.red { color: var(--color-red) !important; }
  .value-word.amber, .value-sub.amber { color: var(--color-amber) !important; }
  .value-word.green, .value-sub.green { color: var(--color-green) !important; }
  .value-word.muted, .value-sub.muted { color: var(--color-light-purple) !important; }

  .card,
  .card-dark {
    background: white !important;
    color: var(--color-dark) !important;
    border: 1px solid rgba(199, 193, 217, 0.55) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 4mm !important;
    padding: 5.5mm 5.5mm !important;
  }

  .card.tint-red,
  .card.tint-amber,
  .card.tint-green {
    background: #fbfbfd !important;
    border-color: rgba(199, 193, 217, 0.55) !important;
  }

  .card-dark .section-eyebrow,
  .card-dark .section-title,
  .card-dark .section-defn,
  .card-dark .insight-body,
  .card-dark .action-body,
  .card-dark .reflection-text,
  .card-dark .cta-tagline,
  .card-dark .cta-list li {
    color: var(--color-dark) !important;
  }

  .section-title {
    font-size: 14pt !important;
    line-height: 1.2 !important;
  }

  .section-eyebrow,
  .hero-eyebrow {
    font-size: 8pt !important;
    margin-bottom: 2mm !important;
  }

  .section-defn,
  .occ-narrative,
  .insight-body,
  .action-body,
  .result-copy,
  .microcopy {
    color: #4e4567 !important;
    line-height: 1.55 !important;
    font-size: 10.5pt !important;
  }

  .work-shape-track,
  .impact-shape-track {
    border: 1px solid rgba(199, 193, 217, 0.6) !important;
  }

  .work-col,
  .friction-card,
  .offer-card,
  .mini-card,
  .detail-card,
  .impact-shape-card {
    background: white !important;
    border: 1px solid rgba(199, 193, 217, 0.55) !important;
    box-shadow: none !important;
  }

  .work-col.under,
  .work-col.moving,
  .work-col.human {
    background: white !important;
  }

  .work-task {
    background: #f7f5fb !important;
    border: 1px solid rgba(199, 193, 217, 0.55) !important;
    color: var(--color-dark) !important;
  }

  .impact-segment {
    color: white !important;
    font-size: 9pt !important;
  }

  .logo {
    font-size: 12pt !important;
  }
}

@media (max-width: 860px) {
  .hero-nav,
  .hero-body,
  .report-outer { padding-left: 20px; padding-right: 20px; }

  .hero-name { font-size: 40px; }

  .work-cols { grid-template-columns: 1fr; }
}