/* =========================================================
   AThetaLife Observatory
   observatory.css
   Version: 2026-08-14b

   MODEL:
   Current Condition
   → Direction
   → Corrective Response
   → Is It Enough?
   → Target Condition
   → Estimated Target Window

   IMPORTANT:
   Condition colors describe condition/status.
   They do NOT represent past, present, or future automatically.

   Red    = serious / severe pressure
   Orange = stabilizing / material pressure remains
   Yellow = approaching target / watch range
   Green  = target / sustainable / stable range
   Gray   = uncertainty / no defensible condition assignment
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {
  --obs-bg: #f7f5ef;
  --obs-surface: #ffffff;

  --obs-ink: #21242a;
  --obs-muted: #61666d;
  --obs-border: #d9ddd8;

  --obs-brass: #9b7433;

  --obs-green: #47764f;
  --obs-yellow: #d8b94d;
  --obs-orange: #d98236;
  --obs-red: #bd4545;

  --obs-blue: #456f8b;
  --obs-gray: #747b80;

  --obs-soft-green: #edf4ed;
  --obs-soft-yellow: #faf6df;
  --obs-soft-orange: #f7efe7;
  --obs-soft-red: #faeaea;
  --obs-soft-blue: #edf3f6;
  --obs-soft-gray: #f1f2f1;

  --obs-max: 1180px;
}


/* =========================================================
   PAGE
   ========================================================= */

body.observatory-page {
  background: var(--obs-bg);
  color: var(--obs-ink);
}

.observatory-main {
  padding-bottom: 72px;
}

.obs-container {
  width: min(var(--obs-max), calc(100% - 36px));
  margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.obs-hero {
  padding: 64px 0 40px;
  text-align: center;
}

.obs-kicker {
  margin: 0 0 10px;
  color: var(--obs-brass);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.obs-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.obs-hero-subtitle {
  max-width: 760px;
  margin: 22px auto 0;
  color: var(--obs-muted);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.65;
}


/* =========================================================
   HORIZON DISPLAY
   ========================================================= */

.obs-horizon-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.obs-horizon-button {
  appearance: none;
  border: 1px solid var(--obs-border);
  background: var(--obs-surface);
  color: var(--obs-ink);
  padding: 10px 18px;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: default;
}

.obs-horizon-button.is-active {
  border-color: var(--obs-brass);
  background: #f3ebdc;
  color: #624716;
}


/* =========================================================
   GENERATIONAL / LIFETIME HORIZON
   ========================================================= */

.obs-horizon {
  margin-top: 12px;
  padding: 30px;
  border: 1px solid var(--obs-border);
  border-radius: 18px;
  background: var(--obs-surface);
}

.obs-section-heading {
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  text-align: center;
}

.obs-section-intro {
  max-width: 760px;
  margin: 0 auto 26px;
  color: var(--obs-muted);
  text-align: center;
  line-height: 1.6;
}

.obs-lifetime-scale {
  position: relative;
  margin: 42px 12px 12px;
  height: 88px;
}

.obs-lifetime-line {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #9b7433 0%,
      #9b7433 22%,
      #47764f 22%,
      #47764f 60%,
      #456f8b 60%,
      #456f8b 100%
    );
}

.obs-year {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.82rem;
  font-weight: 750;
  white-space: nowrap;
}

.obs-year::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 21px;
  width: 2px;
  height: 18px;
  background: var(--obs-ink);
  transform: translateX(-50%);
}

.obs-year-now {
  left: 0;
  transform: none;
}

.obs-year-now::after {
  left: 0;
  transform: none;
}

.obs-year-2046 {
  left: 25%;
}

.obs-year-2066 {
  left: 50%;
}

.obs-year-2086 {
  left: 75%;
}

.obs-year-2106 {
  left: 100%;
  transform: translateX(-100%);
}

.obs-year-2106::after {
  left: 100%;
}

.obs-generation {
  position: absolute;
  top: 53px;
  color: var(--obs-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.obs-generation-you {
  left: 4%;
}

.obs-generation-children {
  left: 39%;
}

.obs-generation-grandchildren {
  right: 3%;
}


/* =========================================================
   FILTERS
   ========================================================= */

.obs-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 46px 0 28px;
}

.obs-filter {
  padding: 9px 15px;
  border: 1px solid var(--obs-border);
  border-radius: 999px;
  background: var(--obs-surface);
  color: var(--obs-muted);
  font-size: 0.88rem;
  font-weight: 750;
}

.obs-filter.is-active {
  background: var(--obs-ink);
  color: #ffffff;
  border-color: var(--obs-ink);
}


/* =========================================================
   CONDITION CARDS
   ========================================================= */

.obs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.obs-card {
  overflow: hidden;
  border: 1px solid var(--obs-border);
  border-radius: 18px;
  background: var(--obs-surface);
  box-shadow: 0 8px 24px rgba(25, 31, 36, 0.05);

  display: flex;
  flex-direction: column;
}

/* =========================================================
   IMPROVING CONDITION CARD

   Green border is reserved for conditions where credible
   evidence indicates that the condition itself is improving.
   ========================================================= */

.obs-card-improving {
  border: 2px solid var(--obs-green);
  box-shadow:
    inset 0 0 0 3px rgba(71, 118, 79, 0.05),
    0 8px 24px rgba(25, 31, 36, 0.05);
}

.obs-card-photo {
  position: relative;
  height: 250px;
  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #e5e0d5,
      #bdc8c3
    );
}

.obs-card-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 17px 17px 0 0;
}

.obs-photo-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #535a5d;
  text-align: center;
  font-weight: 750;
}

.obs-card-body {
  padding: 24px;

  display: flex;
  flex-direction: column;
  flex: 1;
}

.obs-card .obs-life-actions {
  margin-top: auto;
  padding-top: 24px;
  justify-content: flex-start;
}

.obs-location {
  margin: 0 0 8px;
  color: var(--obs-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.obs-card h3 {
  margin: 0 0 14px;
  font-size: 1.55rem;
}

.obs-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 17px;
}

.obs-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.obs-status-worsening {
  background: var(--obs-soft-orange);
  color: #87461f;
}

.obs-status-improving {
  background: var(--obs-soft-green);
  color: #315b39;
}

.obs-status-mixed {
  background: var(--obs-soft-blue);
  color: #31566c;
}

.obs-status-uncertain {
  background: var(--obs-soft-gray);
  color: #555d62;
}

.obs-card-summary {
  margin: 0;
  color: var(--obs-muted);
  line-height: 1.65;
}


/* =========================================================
   CONDITION → RESPONSE → TARGET PATHWAY
   LANDING-PAGE CARD VERSION
   ========================================================= */

.obs-pathway {
  margin-top: 24px;
  padding: 16px 14px 15px;
  border: 1px solid var(--obs-border);
  border-radius: 14px;
  background: #fafafa;
}

.obs-pathway-title {
  margin: 0 0 13px;
  color: var(--obs-ink);
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* ---------- YEAR SCALE ---------- */
===============================================
/* =========================================================
   CARD — 80-YEAR VIEWING HORIZON

   Five dates create four equal 20-year intervals:

   2026 → 2046 → 2066 → 2086 → 2106

   IMPORTANT:
   This dated scale shows the OBSERVATION WINDOW.
   It does not assign the condition stages below to these dates
   unless evidence supports doing so.
   ========================================================= */

.obs-pathway-scale {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;

  margin: 0 0 28px;
  padding: 0 0 14px;
}


/* horizontal timeline */

.obs-pathway-scale::after {
  content: "";
  position: absolute;

  left: 0;
  right: 0;
  bottom: 5px;

  height: 2px;

  background: #aeb3b7;
}


/* each year occupies an equal grid point */

.obs-pathway-year {
  position: relative;

  color: var(--obs-muted);

  font-size: 0.61rem;
  font-weight: 800;

  text-align: center;
  white-space: nowrap;
}


/* first date */

.obs-pathway-year:first-child {
  text-align: left;
}


/* last date */

.obs-pathway-year:last-child {
  text-align: right;
}


/* timeline hash marks */

.obs-pathway-year::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -14px;

  width: 1px;
  height: 10px;

  background: #868c90;

  transform: translateX(-50%);

  z-index: 2;
}


/* anchor first hash exactly at timeline beginning */

.obs-pathway-year:first-child::after {
  left: 0;
  transform: none;
}


/* anchor last hash exactly at timeline end */

.obs-pathway-year:last-child::after {
  left: 100%;
  transform: translateX(-100%);
}

/* ---------- TODAY ---------- */

.obs-pathway-today {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
  font-size: 0.7rem;
  font-weight: 850;
}

.obs-pathway-today-label {
  color: var(--obs-ink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ---------- PATHWAY STAGES ---------- */

.obs-pathway-stages {
  display: grid;
  grid-template-columns:
    minmax(52px, 1fr)
    34px
    minmax(52px, 1fr)
    34px
    minmax(52px, 1fr)
    34px
    minmax(52px, 1fr);
  align-items: center;
  gap: 4px;
  margin-top: 12px;
}


/* ---------- STAGE ---------- */

.obs-pathway-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.obs-pathway-dot {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(33, 36, 42, 0.25);
}

.obs-pathway-stage-text {
  margin-top: 7px;
  color: var(--obs-ink);
  font-size: 0.63rem;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
}


/* ---------- DOT COLORS ---------- */

.obs-dot-red {
  background: var(--obs-red);
}

.obs-dot-orange {
  background: var(--obs-orange);
}

.obs-dot-yellow {
  background: var(--obs-yellow);
}

.obs-dot-green {
  background: var(--obs-green);
}

.obs-dot-gray {
  background: var(--obs-gray);
}


/* =========================================================
   PATHWAY ARROWS

   Arrow color matches the condition stage it is leaving.
   Text labels remain dark/black.
   ========================================================= */

.obs-pathway-arrow {
  position: relative;
  height: 5px;
  border-radius: 999px;
}

.obs-pathway-arrow::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);

  width: 0;
  height: 0;

  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}


/* RED ARROW */

.obs-arrow-red {
  background: var(--obs-red);
}

.obs-arrow-red::after {
  border-left: 8px solid var(--obs-red);
}


/* ORANGE ARROW */

.obs-arrow-orange {
  background: var(--obs-orange);
}

.obs-arrow-orange::after {
  border-left: 8px solid var(--obs-orange);
}


/* YELLOW ARROW */

.obs-arrow-yellow {
  background: var(--obs-yellow);
}

.obs-arrow-yellow::after {
  border-left: 8px solid var(--obs-yellow);
}


/* GREEN ARROW */

.obs-arrow-green {
  background: var(--obs-green);
}

.obs-arrow-green::after {
  border-left: 8px solid var(--obs-green);
}


/* GRAY / UNCERTAIN ARROW */

.obs-arrow-gray {
  height: 0;
  border-top: 3px dashed var(--obs-gray);
  border-radius: 0;
  background: transparent;
}

.obs-arrow-gray::after {
  right: -7px;
  border-left: 8px solid var(--obs-gray);
}


/* =========================================================
   PATHWAY ASSESSMENT GRID
   ========================================================= */

.obs-pathway-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--obs-border);
}

.obs-pathway-summary-item {
  padding: 9px 10px;
  border-radius: 9px;
  background: #ffffff;
}

.obs-pathway-summary-label {
  display: block;
  margin-bottom: 4px;
  color: var(--obs-muted);
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.obs-pathway-summary-value {
  display: block;
  color: var(--obs-ink);
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1.35;
}


/* ---------- TARGET WINDOW ---------- */

.obs-target-window {
  margin-top: 11px;
  padding: 11px 12px;
  border-left: 4px solid var(--obs-brass);
  border-radius: 0 9px 9px 0;
  background: #f7f3eb;
}

.obs-target-window-label {
  display: block;
  margin-bottom: 3px;
  color: #725522;
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.obs-target-window-value {
  display: block;
  color: var(--obs-ink);
  font-size: 0.72rem;
  font-weight: 850;
}


/* ---------- EVIDENCE / UNCERTAINTY NOTE ---------- */

.obs-pathway-note {
  margin: 10px 0 0;
  color: var(--obs-muted);
  font-size: 0.65rem;
  line-height: 1.45;
}


/* =========================================================
   STATUS TEXT COLORS
   ========================================================= */

.obs-condition-green {
  color: #31663b;
}

.obs-condition-yellow {
  color: #806315;
}

.obs-condition-orange {
  color: #9a501e;
}

.obs-condition-red {
  color: #a32f2f;
}

.obs-condition-gray {
  color: #555d62;
}


/* =========================================================
   CARD ACTIONS
   ========================================================= */

.obs-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.obs-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 800;
}

.obs-link-primary {
  background: #2b5bd7;
  color: #ffffff;
}

.obs-link-secondary {
  border: 1px solid var(--obs-border);
  background: #ffffff;
  color: var(--obs-ink);
}


/* =========================================================
   INFORMATION SECTIONS
   ========================================================= */

.obs-info-section {
  margin-top: 48px;
  padding: 34px;
  border: 1px solid var(--obs-border);
  border-radius: 18px;
  background: var(--obs-surface);
}

.obs-info-section h2 {
  margin-top: 0;
}

.obs-info-section p {
  color: var(--obs-muted);
  line-height: 1.7;
}

.obs-evidence-note {
  border-left: 5px solid var(--obs-brass);
}

.obs-life-connection {
  text-align: center;
}

.obs-life-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}


/* =========================================================
   REPORT PAGE
   ========================================================= */

.obs-report-header {
  max-width: 880px;
  margin: 0 auto;
  padding: 62px 0 28px;
}

.obs-report-header h1 {
  margin: 8px 0 16px;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.05;
}

.obs-report-deck {
  color: var(--obs-muted);
  font-size: 1.17rem;
  line-height: 1.7;
}

.obs-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.obs-report-hero {
  max-width: 1000px;
  margin: 0 auto 34px;
}

.obs-report-hero img {
  width: 100%;
  max-height: 600px;
  display: block;
  object-fit: cover;
  border-radius: 18px;
}

.obs-photo-credit {
  margin: 8px 4px 0;
  color: var(--obs-muted);
  font-size: 0.76rem;
}

.obs-report-content {
  max-width: 800px;
  margin: 0 auto;
}

.obs-report-content h2 {
  margin-top: 42px;
  font-size: 1.65rem;
}

.obs-report-content p,
.obs-report-content li {
  color: #41464c;
  line-height: 1.78;
}

.obs-reference-list {
  padding-left: 22px;
}

.obs-reference-list li {
  margin-bottom: 10px;
}


/* =========================================================
   FULL CONDITION vs RESPONSE REPORT SYSTEM
   Existing detailed report visualization retained.
   ========================================================= */

.obs-compare-panel {
  margin: 32px 0;
  padding: 28px;
  border: 1px solid var(--obs-border);
  border-radius: 18px;
  background: var(--obs-surface);
}

.obs-compare-panel h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.obs-compare-intro {
  margin: 0 0 28px;
  color: var(--obs-muted);
  line-height: 1.7;
}


/* ---------- GLANCE ---------- */

.obs-glance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0 34px;
}

.obs-glance-item {
  padding: 18px;
  border: 1px solid var(--obs-border);
  border-radius: 12px;
  background: #fafafa;
}

.obs-glance-label {
  display: block;
  margin-bottom: 7px;
  color: var(--obs-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.obs-glance-value {
  display: block;
  font-size: 1rem;
  font-weight: 850;
}


/* ---------- COMPARISON ---------- */

.obs-comparison {
  margin-top: 26px;
}

.obs-comparison + .obs-comparison {
  margin-top: 42px;
}

.obs-comparison-title {
  margin: 0 0 6px;
  font-size: 1.18rem;
  font-weight: 850;
}

.obs-comparison-subtitle {
  margin: 0 0 20px;
  color: var(--obs-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}


/* =========================================================
   FULL REPORT YEAR SCALE

   2000 → 2106 = 106 years

   2000 =   0%
   2026 =  24.53%
   2046 =  43.40%
   2066 =  62.26%
   2086 =  81.13%
   2106 = 100%
   ========================================================= */

.obs-time-scale {
  position: relative;
  height: 54px;
  margin-left: 128px;
  margin-right: 4px;
}

.obs-time-axis {
  position: absolute;
  top: 27px;
  left: 0;
  right: 0;
  height: 2px;
  background: #aeb3b7;
}

.obs-time-year {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--obs-muted);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.obs-time-year::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 20px;
  width: 1px;
  height: 14px;
  background: #8f9599;
  transform: translateX(-50%);
}

.obs-time-year-start {
  left: 0;
  transform: none;
}

.obs-time-year-start::after {
  left: 0;
  transform: none;
}

.obs-time-year-today {
  left: 24.53%;
  color: var(--obs-ink);
}

.obs-time-year-2046 {
  left: 43.40%;
}

.obs-time-year-2066 {
  left: 62.26%;
}

.obs-time-year-2086 {
  left: 81.13%;
}

.obs-time-year-end {
  left: 100%;
  transform: translateX(-100%);
}

.obs-time-year-end::after {
  left: 100%;
}


/* =========================================================
   TODAY MARKER
   ========================================================= */

.obs-today-line {
  position: absolute;
  left: 24.53%;
  top: 20px;
  bottom: -250px;
  width: 2px;
  background: var(--obs-ink);
  z-index: 5;
  pointer-events: none;
}

.obs-today-label {
  position: absolute;
  top: 37px;
  left: 24.53%;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--obs-ink);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  z-index: 6;
}


/* =========================================================
   FULL REPORT TRACK ROWS
   ========================================================= */

.obs-track-row {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 10px;
  align-items: center;
  margin: 13px 0;
}

.obs-track-label {
  padding-right: 5px;
  color: var(--obs-ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}

.obs-track {
  position: relative;
  min-height: 18px;
}


/* =========================================================
   FULL CONDITION TRACK
   ========================================================= */

.obs-condition-track {
  position: relative;
  height: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7e8;
}

.obs-condition-measured {
  position: absolute;
  left: 0;
  top: 0;
  width: 24.53%;
  height: 16px;
  border-radius: 999px 0 0 999px;

  background:
    linear-gradient(
      90deg,
      var(--obs-yellow) 0%,
      var(--obs-yellow) 25%,
      var(--obs-orange) 58%,
      var(--obs-red) 100%
    );

  z-index: 3;
}

.obs-condition-projected {
  position: absolute;
  left: 24.53%;
  right: 0;
  top: 7px;
  border-top: 3px dashed #7d8387;
  z-index: 2;
}

.obs-uncertainty-zone {
  position: absolute;
  left: 24.53%;
  right: 0;
  top: 1px;
  height: 14px;

  background:
    linear-gradient(
      90deg,
      rgba(125, 131, 135, 0.08),
      rgba(125, 131, 135, 0.28)
    );

  clip-path:
    polygon(
      0 40%,
      100% 0,
      100% 100%,
      0 60%
    );

  z-index: 1;
}


/* =========================================================
   RESPONSE TRACKS
   ========================================================= */

.obs-response-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: #e4e7e5;
}

.obs-response-active {
  position: absolute;
  top: 1px;
  height: 10px;
  border-radius: 999px;
  background: var(--obs-green);
}

.obs-response-conservation {
  left: 12%;
  width: 43%;
}

.obs-response-efficiency {
  left: 16%;
  width: 55%;
}

.obs-response-reuse {
  left: 28%;
  width: 55%;
}

.obs-response-rules {
  left: 30%;
  width: 34%;
}

.obs-response-alternatives {
  left: 34%;
  width: 58%;
}

.obs-response-ecosystem {
  left: 20%;
  width: 61%;
}

.obs-response-active::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -3px;

  width: 0;
  height: 0;

  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 9px solid var(--obs-green);
}


/* =========================================================
   ASSESSMENT
   ========================================================= */

.obs-assessment {
  margin-top: 30px;
  padding: 22px 24px;
  border-left: 5px solid var(--obs-orange);
  border-radius: 0 12px 12px 0;
  background: #faf5ed;
}

.obs-assessment-label {
  margin: 0 0 6px;
  color: #89501f;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.obs-assessment h3 {
  margin: 0 0 8px;
}

.obs-assessment p {
  margin-bottom: 0;
  color: var(--obs-muted);
  line-height: 1.65;
}


/* =========================================================
   TIMELINE LEGEND
   ========================================================= */

.obs-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--obs-border);
  color: var(--obs-muted);
  font-size: 0.75rem;
}

.obs-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.obs-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.obs-legend-yellow {
  background: var(--obs-yellow);
}

.obs-legend-orange {
  background: var(--obs-orange);
}

.obs-legend-red {
  background: var(--obs-red);
}

.obs-legend-green {
  background: var(--obs-green);
}

.obs-legend-projected {
  width: 24px;
  border-top: 3px dashed #7d8387;
}


/* =========================================================
   REPORT INFORMATION BOXES
   ========================================================= */

.obs-report-box {
  margin-top: 32px;
  padding: 26px;
  border: 1px solid var(--obs-border);
  border-radius: 15px;
  background: var(--obs-surface);
}

.obs-report-box h2 {
  margin-top: 0;
}

.obs-report-box h3 {
  margin-top: 24px;
  margin-bottom: 7px;
}

.obs-report-box p {
  color: #41464c;
  line-height: 1.72;
}


/* =========================================================
   WHO IS DOING THE WORK
   ========================================================= */

.obs-actor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.obs-actor {
  padding: 17px;
  border: 1px solid var(--obs-border);
  border-radius: 11px;
  background: #fafafa;
}

.obs-actor strong {
  display: block;
  margin-bottom: 6px;
}

.obs-actor span {
  color: var(--obs-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}


/* =========================================================
   BARRIERS & COMPETING INTERESTS
   ========================================================= */

.obs-barrier-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.obs-barrier {
  padding: 15px;
  border-left: 4px solid #b7bbc0;
  background: #f7f7f6;
}

.obs-barrier strong {
  display: block;
  margin-bottom: 4px;
}


/* =========================================================
   WHAT YOU CAN DO
   ========================================================= */

.obs-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.obs-action-card {
  padding: 20px;
  border: 1px solid var(--obs-border);
  border-radius: 12px;
  background: #fafafa;
}

.obs-action-card h3 {
  margin-top: 0;
}

.obs-action-verified {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--obs-border);
  color: var(--obs-muted);
  font-size: 0.78rem;
  font-weight: 700;
}


/* =========================================================
   EVIDENCE STRENGTH
   ========================================================= */

.obs-evidence-strength {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--obs-soft-blue);
  color: #31566c;
  font-size: 0.78rem;
  font-weight: 800;
}


/* =========================================================
   RESPONSIVE — TABLET / MOBILE
   ========================================================= */

@media (max-width: 760px) {

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

  .obs-hero {
    padding-top: 42px;
  }

  .obs-horizon {
    padding: 23px 16px;
  }

  .obs-lifetime-scale {
    margin-left: 2px;
    margin-right: 2px;
  }

  .obs-generation {
    font-size: 0.68rem;
  }

  .obs-card-photo {
    height: 215px;
  }

  .obs-info-section {
    padding: 25px 20px;
  }

  .obs-glance {
    grid-template-columns: 1fr;
  }

  .obs-time-scale {
    margin-left: 94px;
  }

  .obs-track-row {
    grid-template-columns: 84px 1fr;
  }

  .obs-track-label {
    font-size: 0.67rem;
  }

  .obs-time-year {
    font-size: 0.61rem;
  }

  .obs-time-year-2046,
  .obs-time-year-2086 {
    display: none;
  }

  .obs-actor-grid,
  .obs-barrier-list,
  .obs-action-grid {
    grid-template-columns: 1fr;
  }

  .obs-compare-panel {
    padding: 20px 15px;
  }


  /* ---------- PATHWAY ---------- */

  .obs-pathway {
    padding: 14px 10px;
  }

  .obs-pathway-stages {
    grid-template-columns:
      minmax(45px, 1fr)
      26px
      minmax(45px, 1fr)
      26px
      minmax(45px, 1fr)
      26px
      minmax(45px, 1fr);
    gap: 2px;
  }

  .obs-pathway-stage-text {
    font-size: 0.58rem;
  }

  .obs-pathway-arrow {
    height: 4px;
  }

  .obs-pathway-summary {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 430px) {

  .obs-container {
    width: min(var(--obs-max), calc(100% - 24px));
  }

  .obs-card-body {
    padding: 20px 17px;
  }

  .obs-pathway-scale {
    margin-left: 0;
    margin-right: 0;
  }

  .obs-pathway-year {
    font-size: 0.54rem;
  }

  .obs-pathway-stages {
    grid-template-columns:
      minmax(38px, 1fr)
      20px
      minmax(38px, 1fr)
      20px
      minmax(38px, 1fr)
      20px
      minmax(38px, 1fr);
  }

  .obs-pathway-dot {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }

  .obs-pathway-stage-text {
    font-size: 0.53rem;
  }

  .obs-pathway-arrow::after {
    right: -5px;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 7px;
  }

  .obs-time-scale {
    margin-left: 82px;
  }

  .obs-track-row {
    grid-template-columns: 72px 1fr;
  }

}