/*
 * College Admissions Data pages (eduavenues.com/college-admissions-data, EDU-1787).
 * Layered on the SAT/ACT tools stylesheet, which carries the site chrome, PageHero, section
 * headings, tables, buttons and FAQ. This file only adds what these pages need: wider data
 * sections, the checker heading, the rate chart and the notes list. Tokens from tokens.css.
 */

/* Data sections hold tables, so they use the full content width, not the reading measure. */
.sat-wrap:not(.sat-wrap-wide) > section.cad-wide {
  max-width: 960px;
}

.cad-wide > p {
  max-width: 720px;
}

.cad-tool-heading {
  margin-bottom: 32px;
}

/* ---------- Tables ---------- */

.cad-table td {
  white-space: nowrap;
}

.cad-caption {
  max-width: 720px;
  margin: 32px 0 -12px;
  color: var(--ea-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cad-table td:first-child a {
  font-weight: 600;
}

.cad-table-narrow {
  max-width: 420px;
}

.cad-table caption a {
  font-weight: 500;
}

.cad-na {
  color: var(--ea-faint);
}

/* ---------- Chart ---------- */

.cad-chart {
  position: relative;
  margin: 32px 0 8px;
}

.cad-chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cad-chart-narrow {
  display: none !important;
}

.cad-grid {
  stroke: var(--ea-line);
  stroke-width: 1;
}

.cad-grid.is-base {
  stroke: var(--ea-field);
}

.cad-axis {
  fill: var(--ea-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.cad-line {
  fill: none;
  stroke: var(--ea-navy);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.cad-dot {
  fill: var(--ea-navy);
  stroke: var(--ea-white);
  stroke-width: 2;
}

.cad-label {
  fill: var(--ea-ink);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cad-chart figcaption {
  margin-top: 12px;
  color: var(--ea-muted);
  font-size: 13px;
}

/* ---------- Interactive chart ---------- */

.cad-chart-block {
  margin-top: 32px;
}

.cad-series {
  margin-bottom: 16px;
}

.cad-series button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 44px;
  padding: 8px 18px;
  line-height: 1.25;
}

.cad-lock-note {
  color: var(--ea-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.cad-chart-block.is-unlocked .cad-lock-note {
  display: none;
}

.cad-series button[data-locked] .cad-series-name {
  color: var(--ea-text);
}

.cad-test-toggle {
  margin-bottom: 16px;
}

.cad-test-toggle button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 13px;
}

.cad-plot {
  position: relative;
  cursor: crosshair;
  touch-action: pan-y;
}

.cad-plot:focus {
  outline: none;
}

.cad-plot:focus-visible {
  outline: 2px solid var(--ea-navy);
  outline-offset: 4px;
}

.cad-chart-live {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.cad-line.is-context {
  stroke: var(--ea-faint);
  stroke-width: 1.5;
}

.cad-band {
  fill: var(--ea-navy);
  fill-opacity: 0.14;
  stroke: none;
}

.cad-band-edge {
  fill: none;
  stroke: var(--ea-navy);
  stroke-width: 1.5;
}

.cad-cursor {
  stroke: var(--ea-field);
  stroke-width: 1;
}

.cad-dot.is-active {
  fill: var(--ea-navy);
  stroke: var(--ea-white);
  stroke-width: 2;
}

.cad-tip {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: min(260px, 100%);
  padding: 8px 12px;
  border: 1px solid var(--ea-line);
  background: var(--ea-white);
  color: var(--ea-text);
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.cad-tip strong {
  color: var(--ea-ink);
  font-weight: 600;
}

/* ---------- Latest-year snapshot ---------- */

.cad-intel {
  margin: 20px 0 0;
}

.cad-snapshot dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  justify-content: space-between;
}

.cad-figure {
  color: var(--ea-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
}

.cad-cite {
  color: var(--ea-muted);
  font-size: 13px;
}

.cad-cite a {
  font-weight: 500;
}

/* ---------- Unlock and the gated history ---------- */

.cad-unlock-form {
  display: flex;
  gap: 12px;
  max-width: 560px;
  margin-top: 24px;
}

.cad-unlock-form .sat-input {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 400;
}

.cad-unlock.is-unlocked > .sat-fine {
  display: none;
}

.cad-history {
  margin-top: 8px;
}

.cad-gated-table {
  padding-top: 48px;
}

.cad-gated-table h3 {
  margin-bottom: 0;
}

.cad-gated-table .cad-caption {
  margin-top: 8px;
}

.cad-table-notes {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ea-muted);
  font-size: 13px;
  line-height: 1.55;
}

.cad-table-notes li + li {
  margin-top: 6px;
}

/* ---------- Notes and sources ---------- */

.cad-notes {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ea-line);
}

.cad-notes li {
  padding: 14px 0;
  border-bottom: 1px solid var(--ea-line);
}

.cad-src-meta {
  color: var(--ea-muted);
  font-size: 13px;
}

@media (max-width: 640px) {
  .cad-chart-wide {
    display: none !important;
  }

  .cad-chart-narrow {
    display: block !important;
  }

  .cad-table {
    font-size: 13px;
  }

  .cad-table thead th {
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .cad-table td,
  .cad-table thead th {
    padding-right: 6px;
  }

  .cad-table td:last-child,
  .cad-table thead th:last-child {
    padding-right: 0;
  }

  .cad-table-narrow {
    max-width: none;
  }

  /* Tables may use 8px of each side gutter on phones (16px left to the screen edge). */
  .cad-wide .sat-table-wrap {
    margin-right: -8px;
    margin-left: -8px;
    padding: 0 8px;
  }

  .cad-unlock-form {
    flex-direction: column;
  }

  /* Four series: a 2 x 2 joined grid on phones, every cell at least 44px tall. */
  .cad-series {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .cad-series button {
    padding: 8px 6px;
    border-bottom: 1px solid var(--ea-field);
    font-size: 13px;
  }

  .cad-series button:nth-child(2n) {
    border-right: 0;
  }

  .cad-series button:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  /* The GPA table has six columns: same compact treatment as the SAT table. */
  .cad-table-gpa {
    font-size: 12px;
  }

  .cad-table-gpa thead th {
    font-size: 10px;
    letter-spacing: 0;
  }

  .cad-table-gpa td,
  .cad-table-gpa thead th {
    padding-right: 3px;
  }

  /* Five columns of score ranges: one step smaller so the table fits a 360px screen. */
  .cad-table-sat {
    font-size: 12px;
    letter-spacing: -0.01em;
  }

  .cad-table-sat thead th {
    font-size: 10px;
    letter-spacing: 0;
  }

  .cad-table-sat td,
  .cad-table-sat thead th {
    padding-right: 3px;
  }
}