/* APE visual refresh: additive overrides only.
   Pass 1: Cambria editorial typography while preserving sans-serif UI controls.
   Pass 2: official Dartmouth digital palette refinement.
   Pass 3: official D-Pine secondary mark, separate from the project photo logo.
   Pass 4: restrained surface, texture, shadow, and spacing refinement.
   Pass 5: mobile matrix-table legibility without changing table content or structure.
   Pass 6: keep first-column decision labels intact on one line on mobile.
   Pass 8: keep executive decision labels intact at all viewport widths. */

:root {
  --ape-serif: Cambria, "Times New Roman", Times, serif;
  --ape-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --ape-rich-forest: #0d1e1c;
  --ape-snow: #ffffff;
  --ape-gray-1: #f7f7f7;
  --ape-gray-2: #e2e2e2;
  --ape-gray-3: #707070;
  --ape-river-navy: #003c73;
  --ape-spring: #c4dd88;
  --ape-summer-yellow: #f5dc69;
  --ape-bonfire-red: #9d162e;

  /* Re-map legacy site tokens to the approved Dartmouth digital palette. */
  --pine: var(--ape-rich-forest);
  --gold: var(--ape-summer-yellow);
  --cream: var(--ape-snow);
  --ink: var(--ape-rich-forest);
  --muted: var(--ape-gray-3);
  --line: var(--ape-gray-2);
  --risk: var(--ape-bonfire-red);
  --focus: var(--river);

  /* Lighter institutional depth in place of oversized application shadows. */
  --shadow: 0 14px 38px rgba(13, 30, 28, 0.10);
  --soft-shadow: 0 6px 18px rgba(13, 30, 28, 0.07);
}

body {
  font-family: var(--ape-serif);
  background-color: var(--ape-gray-1);
  background-image:
    radial-gradient(circle at 8% 0%, rgba(0, 105, 62, 0.09), transparent 27rem),
    radial-gradient(circle at 1px 1px, rgba(13, 30, 28, 0.018) 1px, transparent 1.15px),
    linear-gradient(180deg, var(--ape-snow) 0%, var(--ape-gray-1) 55%, var(--ape-snow) 100%);
  background-size: auto, 18px 18px, auto;
}

h1,
h2,
h3,
.brand strong,
.lead,
.lede {
  font-family: var(--ape-serif);
}

h1 {
  letter-spacing: -0.025em;
}

h2 {
  letter-spacing: -0.018em;
}

nav,
.utility-nav,
.eyebrow,
.tag,
.button,
button,
input,
select,
textarea,
table,
.analysis-controls,
.analysis-stat,
.status-pill,
.command-strip,
.dash-card span {
  font-family: var(--ape-sans);
}

.hero::before {
  background: linear-gradient(90deg, var(--dartmouth-green), var(--forest), var(--ape-spring));
}

.hero-executive {
  background: linear-gradient(135deg, var(--ape-rich-forest), var(--dartmouth-green));
}

.hero-executive .lead {
  color: var(--ape-gray-1);
}

.hero-executive .eyebrow,
.dash-card.dark span {
  color: var(--ape-spring);
}

.dash-card:not(.dark) span {
  color: var(--dartmouth-green);
}

.button.secondary {
  background: var(--ape-gray-1);
  color: var(--forest);
}

/*
  Official Dartmouth D-Pine color-combination artwork:
  https://communications.dartmouth.edu/sites/communications/files/2024-07/d-pine-color-combinations.jpg
  The top-left approved white-on-Dartmouth-Green treatment is selected without
  recoloring, filters, distortion, or a custom lockup. The project photo logo
  remains the primary mark at left; this institutional mark remains separate.
*/
.site-header {
  padding-right: clamp(8rem, 10vw, 9rem);
}

.site-header::after {
  content: "";
  position: absolute;
  top: .72rem;
  right: 1rem;
  width: 112px;
  height: 63px;
  background-image: url("https://communications.dartmouth.edu/sites/communications/files/2024-07/d-pine-color-combinations.jpg");
  background-repeat: no-repeat;
  background-size: 200% 400%;
  background-position: left top;
  pointer-events: none;
}

/* Editorial surfaces: quieter corners, shallower depth, clearer section rhythm. */
.hero,
.panel {
  border-radius: 1.08rem;
  border-color: rgba(18, 49, 43, 0.11);
}

.panel {
  margin-top: 1.3rem;
}

.section-title {
  margin-bottom: 1.4rem;
}

.card,
.evidence-card,
.step,
.risk-card {
  border-radius: .88rem;
  border-color: rgba(18, 49, 43, 0.11);
  box-shadow: 0 3px 12px rgba(13, 30, 28, 0.04);
}

.card:hover,
.evidence-card:hover,
.risk-card:hover {
  border-color: rgba(0, 105, 62, 0.24);
  box-shadow: 0 8px 22px rgba(13, 30, 28, 0.07);
  transform: translateY(-1px);
}

.dash-card {
  border-radius: .92rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.highlight-panel {
  background: linear-gradient(135deg, var(--ape-snow), rgba(196, 221, 136, 0.16));
}

.patient-first {
  background: linear-gradient(135deg, var(--ape-snow), rgba(226, 226, 226, 0.45));
}

.hero-command {
  background: linear-gradient(135deg, var(--ape-snow), var(--ape-gray-1));
}

.boundary-note {
  background: rgba(245, 220, 105, 0.16);
}

.button,
.journey-nav a,
.command-strip a {
  box-shadow: var(--soft-shadow);
}

/* Home page cleanup: remove two redundant empty presentation panels while
   retaining their DOM hooks so existing app.js population logic is untouched. */
#metrics,
#competencies {
  display: none;
}

/* Executive Brief decision labels are identifiers, not prose. Keep the
   ordinal and label together at every viewport width. */
#decisions .matrix-table th:first-child,
#decisions .matrix-table td:first-child {
  min-width: 10.5rem;
  width: 10.5rem;
  white-space: nowrap;
  font-size: .94rem;
}

@media (max-width: 700px) {
  /*
    Tables remain true tables and horizontally scrollable on small screens.
    Give them enough intrinsic width that the first column does not collapse
    into tall word stacks such as "Representation" and "Measurement".
  */
  .matrix-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .matrix-table table {
    min-width: 820px;
  }

  .matrix-table th,
  .matrix-table td {
    padding: .78rem .82rem;
    vertical-align: top;
  }

  .matrix-table th:first-child,
  .matrix-table td:first-child {
    min-width: 10.5rem;
    width: 10.5rem;
    white-space: nowrap;
  }
}

@media (max-width: 560px) {
  .site-header {
    padding-right: 7rem;
  }

  .site-header::after {
    top: .6rem;
    width: 96px;
    height: 54px;
  }

  .hero,
  .panel {
    border-radius: .9rem;
  }
}