/* ET Trials Tracker. One stylesheet, no build step, no dependencies.

   Type:      18px body, 19px from 40rem up, 16px floor everywhere.
   Family:    one system sans stack, for everything.
   Measure:   34rem for anything read as prose.
   Contrast:  every text colour sits above 12:1 on its surface, in both modes.
   Accent:    one colour, used for links and for nothing else.
   Colour:    an ordinal blue ramp for the bar, validated light and dark.       */

:root {
  color-scheme: light;
  --surface:     #fcfcfb;
  --surface-2:   #f4f3ef;
  --ink:         #1a1a19;  /* 16.97:1 */
  --ink-2:       #35342f;  /* 12.15:1, captions and metadata only */
  --rule:        #dedcd4;
  --rule-strong: #b9b6ab;
  --accent:      #10325f;  /* 12.45:1, links only */

  /* Ordinal ramp for the four outcomes, strongest evidence to weakest. */
  --seg-1: #184f95;
  --seg-2: #2a78d6;
  --seg-3: #5598e7;
  --seg-4: #86b6ef;
  --seg-1-ink: #ffffff;
  --seg-2-ink: #ffffff;
  --seg-3-ink: #101010;
  --seg-4-ink: #101010;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 34rem;
  --small: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface:     #1a1a19;
    --surface-2:   #232322;
    --ink:         #f2f1ec;  /* 15.40:1 */
    --ink-2:       #e6e4dc;  /* 13.68:1 */
    --rule:        #3d3d39;
    --rule-strong: #5c5b54;
    --accent:      #c9def8;  /* 12.68:1 */

    --seg-1: #9ec5f4;
    --seg-2: #6da7ec;
    --seg-3: #3987e5;
    --seg-4: #184f95;
    --seg-1-ink: #101010;
    --seg-2-ink: #101010;
    --seg-3-ink: #101010;
    --seg-4-ink: #ffffff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface:     #1a1a19;
  --surface-2:   #232322;
  --ink:         #f2f1ec;
  --ink-2:       #e6e4dc;
  --rule:        #3d3d39;
  --rule-strong: #5c5b54;
  --accent:      #c9def8;

  --seg-1: #9ec5f4;
  --seg-2: #6da7ec;
  --seg-3: #3987e5;
  --seg-4: #184f95;
  --seg-1-ink: #101010;
  --seg-2-ink: #101010;
  --seg-3-ink: #101010;
  --seg-4-ink: #ffffff;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.wrap {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 16px;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Glossary term links: same colour as the text, a quiet dotted rule, so they
   read as definitions rather than as navigation. */
a.term {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: var(--rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a.term:hover { text-decoration-color: var(--accent); text-decoration-style: solid; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.skip {
  position: absolute;
  left: 16px;
  top: 8px;
  z-index: 10;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 12px;
  border: 1px solid var(--rule-strong);
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* Header */

.site-header { border-bottom: 1px solid var(--rule); padding: 16px 0 0; }
.wordmark {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.site-header nav { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 8px; }
.site-header nav a {
  display: inline-block;
  padding: 6px 0 10px;
  font-size: var(--small);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a[aria-current="page"] { font-weight: 700; border-bottom-color: var(--ink); }

/* Typography */

main { padding-bottom: 8px; }

h1, h2, h3 { line-height: 1.25; color: var(--ink); font-weight: 700; }
h1 { font-size: 28px; margin: 28px 0 10px; letter-spacing: -0.01em; }
h2 {
  font-size: 22px;
  margin: 40px 0 10px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
h3 { font-size: 19px; margin: 26px 0 6px; }

p, li, dd, dt, h1, h2, h3, caption, figcaption, .strapline { max-width: var(--measure); }
p { margin: 0 0 14px; }

.strapline { color: var(--ink-2); margin-bottom: 22px; }
.finding { font-weight: 600; }
.note { font-size: var(--small); color: var(--ink-2); }

ul, ol { padding-left: 1.2rem; margin: 0 0 14px; }
li { margin: 0 0 6px; }

dl { margin: 0 0 14px; }
dt { font-weight: 700; margin-top: 18px; }
dd { margin: 4px 0 0; }

code { font-family: inherit; background: var(--surface-2); padding: 0 3px; border-radius: 2px; }

dfn { font-style: normal; font-weight: 700; }
abbr { text-decoration: none; }

/* The bar */

.chart { margin: 0 0 20px; max-width: 46rem; }
.chart-title { font-weight: 700; margin: 0 0 2px; }
.chart-sub { font-size: var(--small); color: var(--ink-2); margin: 0 0 12px; }

.bar { display: flex; gap: 2px; margin: 0 0 14px; }
.seg {
  min-width: 2rem;
  flex-basis: 0;
  flex-shrink: 1;
  background: var(--seg-1);
  color: var(--seg-1-ink);
  border-radius: 2px;
  padding: 6px 4px;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}
.seg[data-seg="2"] { background: var(--seg-2); color: var(--seg-2-ink); }
.seg[data-seg="3"] { background: var(--seg-3); color: var(--seg-3-ink); }
.seg[data-seg="4"] { background: var(--seg-4); color: var(--seg-4-ink); }
.seg:first-child { border-radius: 4px 2px 2px 4px; }
.seg:last-child { border-radius: 2px 4px 4px 2px; }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 24px; }
.legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 0 10px;
  align-items: baseline;
  max-width: none;
  margin: 0;
  font-size: var(--small);
}
.legend .swatch {
  width: 12px; height: 12px; border-radius: 2px;
  background: var(--seg-1); transform: translateY(2px);
}
.legend li[data-seg="2"] .swatch { background: var(--seg-2); }
.legend li[data-seg="3"] .swatch { background: var(--seg-3); }
.legend li[data-seg="4"] .swatch { background: var(--seg-4); }
.legend .lab { grid-column: 2; }
.legend .val { grid-column: 2; font-weight: 700; }
.legend .sub { grid-column: 2; color: var(--ink-2); }

/* Controls, built by the script. The page is complete without them. */

.controls:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-end;
  margin: 18px 0 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.controls label { display: block; font-size: var(--small); color: var(--ink-2); margin-bottom: 4px; }
.controls select {
  font-family: inherit;
  font-size: var(--small);
  padding: 6px 8px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  min-width: 12rem;
  max-width: 100%;
}
.controls .count { font-size: var(--small); color: var(--ink-2); margin: 0 0 6px; }

/* Tables */

.table-box { overflow-x: auto; margin: 0 0 14px; }
table { border-collapse: collapse; width: 100%; font-size: var(--small); }
caption { text-align: left; font-size: var(--small); color: var(--ink-2); padding: 0 0 10px; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  position: sticky;
  top: 0;
  background: var(--surface);
}
thead th button.sort {
  font: inherit;
  font-weight: 700;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
thead th button.sort:hover { text-decoration: underline; }
thead th[aria-sort] button.sort { text-decoration: underline; }
thead th[aria-sort="ascending"] button.sort::after { content: " \2191"; }
thead th[aria-sort="descending"] button.sort::after { content: " \2193"; }

td .sub { display: block; color: var(--ink-2); }
.trial-title { display: block; }
.nct { display: block; font-weight: 700; }
.c-num, td.c-num { text-align: right; padding-right: 18px; }

.status { font-weight: 700; display: block; }
.status::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  background: var(--seg-1);
}
.status[data-seg="2"]::before { background: var(--seg-2); }
.status[data-seg="3"]::before { background: var(--seg-3); }
.status[data-seg="4"]::before { background: var(--seg-4); }

.is-out { display: none; }

table.trials { table-layout: fixed; }
.c-trial { width: 16rem; }
.c-date { width: 7rem; }
.c-num { width: 7rem; }
.c-outcome { width: 11rem; }
.c-ref { width: 12rem; }
.c-why { width: 17rem; }
table.columns .c-col { width: 15rem; }

/* Downloads and footer */

.site-footer { border-top: 1px solid var(--rule); margin-top: 40px; padding: 20px 0 40px; }
.site-footer p { margin: 0 0 6px; font-size: var(--small); color: var(--ink-2); }

/* Under 40rem the tables become cards, one row per card. */

@media (max-width: 39.999rem) {
  .table-box { overflow-x: visible; }
  .rt, .rt tbody, .rt tr, .rt td, .rt caption { display: block; width: 100%; }
  .rt thead { display: none; }
  .rt tr {
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 10px 14px 14px;
    margin: 0 0 14px;
  }
  .rt td { border: 0; padding: 8px 0 0; }
  .rt td.c-num { text-align: left; padding-right: 0; }
  .cell-label { display: block; font-size: var(--small); color: var(--ink-2); }
  .cell-value { display: block; }
  table.trials, table.columns { table-layout: auto; min-width: 0; }
}

/* From 40rem up the table is a table again. */

@media (min-width: 40rem) {
  body { font-size: 19px; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  .wrap { padding: 0 28px; }
  .site-header { padding-top: 22px; }
  .wordmark { font-size: 19px; }
  .legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legend li { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .legend .val { grid-column: 3; text-align: right; }
  .legend .sub { grid-column: 2 / -1; }
  .cell-label { display: none; }
  table.trials { min-width: 70rem; }
  table.columns { min-width: 38rem; }
  .controls .count { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}