/* ---------------------------------------------------------------
   Paper page: Look Ahead, Do Not Overwrite (DOSE)
   Builds on ../css/style.css and its day / night tokens.
   --------------------------------------------------------------- */

:root{
  /* chart series: CL alone, CL + TTA, DOSE (checked for contrast and colour-blind separation) */
  --s1: #8c8a86;
  --s2: var(--accent-warm);
  --s3: var(--accent);
  --plate: #ffffff;
  --plate-filter: none;
}
html[data-theme="night"]{
  --s1: #7a7668;
  --plate: #ece7da;
  --plate-filter: brightness(.94);
}

/* ---------- hero ---------- */
.paper-hero{
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.25rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem);
}
.paper-hero h1{
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.04;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.paper-hero .subtitle{
  display: block;
  margin-top: .7rem;
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-soft);
}

.authors{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .2rem 1.4rem;
  font-size: 1.12rem;
}
.authors a{
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.authors a:hover{ text-decoration-color: var(--accent-warm); }
.affiliation{
  margin: .3rem 0 1.5rem;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-faint);
}

.pill--soon{
  cursor: default;
  color: var(--ink-faint);
  border-style: dashed;
}
.pill--soon:hover{ border-color: var(--rule); transform: none; }

.tldr{ margin: 2rem 0 0; max-width: 62ch; }

/* ---------- text ---------- */
.prose{ max-width: 68ch; }
.prose p{ margin: 0 0 1rem; color: var(--ink-soft); }
.prose p:last-child{ margin-bottom: 0; }
.prose strong{ color: var(--ink); font-weight: 500; }

section > h2{ text-wrap: balance; }

/* ---------- figures ---------- */
.plate{
  margin: 0 0 2rem;
}
.plate img{
  display: block;
  width: 100%;
  height: auto;
  background: var(--plate);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: clamp(.5rem, 1.5vw, 1rem);
  box-shadow: 2px 2px 0 var(--shadow);
  filter: var(--plate-filter);
}
.plate figcaption{
  margin-top: .7rem;
  font-size: .92rem;
  color: var(--ink-faint);
  max-width: 70ch;
}
.plate figcaption strong{ color: var(--ink-soft); font-weight: 500; }
.plate--wide{ margin-top: 1.8rem; }

/* ---------- three phases ---------- */
.phases{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  counter-reset: phase;
}
.phases li{
  counter-increment: phase;
  border: 1px solid var(--rule);
  background: var(--card-bg);
  border-radius: 6px;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 2px 2px 0 var(--shadow);
}
.phase-name{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--serif-display);
  font-size: 1.15rem;
  font-weight: 500;
}
.phase-name::before{
  content: counter(phase);
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent);
}
.phase-name--warm::before{ color: var(--accent-warm); }
.phases p{ margin: .5rem 0 0; font-size: .96rem; color: var(--ink-soft); }

/* ---------- tables ---------- */
.table-wrap{
  overflow-x: auto;
  margin: 1.8rem 0 0;
}
.numbers{
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-variant-numeric: tabular-nums;
}
.table-caption{
  margin: .7rem 0 0;
  font-size: .9rem;
  color: var(--ink-faint);
  max-width: 80ch;
}
.numbers th, .numbers td{
  padding: .5rem .8rem;
  text-align: right;
  border-bottom: 1px solid var(--rule);
}
.numbers thead th{
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-faint);
  vertical-align: bottom;
}
.numbers thead th[colspan]{ text-align: center; border-bottom: 1px solid var(--ink-faint); }
.numbers tbody th{
  text-align: left;
  font-weight: 400;
  white-space: nowrap;
}
.numbers td{ font-family: var(--mono); font-size: .92rem; }
.numbers td.down{ color: var(--accent-warm); }
.numbers tr.ours th{ font-family: var(--serif-display); font-weight: 600; }
.numbers tr.ours td{ font-weight: 500; color: var(--accent); }
.numbers tr:last-child th, .numbers tr:last-child td{ border-bottom-color: var(--ink-faint); }

.table-note{
  margin: .9rem 0 0;
  font-size: .95rem;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* ---------- method ---------- */
.steps{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem 1.6rem;
}
.steps p{ margin: .35rem 0 0; font-size: .96rem; color: var(--ink-soft); }
.step-label{
  font-family: var(--mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7d5f8a;
  padding-bottom: .25rem;
  border-bottom: 2px solid currentColor;
}
html[data-theme="night"] .step-label{ color: #c4a6d1; }
.step-label--warm, html[data-theme="night"] .step-label--warm{ color: var(--accent-warm); }
.step-label--cool, html[data-theme="night"] .step-label--cool{ color: var(--accent); }

.equation{
  margin: 2rem 0 0;
  padding: 1.1rem 1.3rem;
  border-left: 2px solid var(--accent);
  background: var(--card-bg);
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
  font-size: 1.05rem;
}
.eq-op{ font-family: var(--mono); color: var(--ink-faint); }
.eq-warm{ color: var(--accent-warm); }
.eq-cool{ color: var(--accent); }

.chips{
  list-style: none;
  margin: 1.8rem 0 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.chips li{
  font-family: var(--mono);
  font-size: .78rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .3rem .75rem;
  color: var(--ink-soft);
}

/* ---------- results ---------- */
.stats{
  list-style: none;
  margin: 0 0 2.4rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.stats li{
  border-top: 2px solid var(--accent);
  padding-top: .8rem;
}
.stat-value{
  display: block;
  font-family: var(--serif-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-of{ font-size: .5em; color: var(--ink-faint); margin-left: .1em; }
.stat-label{
  display: block;
  margin-top: .5rem;
  font-size: .92rem;
  color: var(--ink-soft);
}

.chart-figure{ margin: 0; }
.chart-title{
  font-family: var(--mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-faint);
  margin-bottom: .6rem;
}
.legend{
  list-style: none;
  margin: 0 0 .8rem; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  font-size: .92rem;
  color: var(--ink-soft);
}
.legend li{ display: flex; align-items: center; gap: .45rem; }
.swatch{ width: .8rem; height: .8rem; border-radius: 2px; display: inline-block; }
.swatch.s1{ background: var(--s1); }
.swatch.s2{ background: var(--s2); }
.swatch.s3{ background: var(--s3); }

.chart{ position: relative; }
.chart svg{ display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid line{ stroke: var(--rule); stroke-width: 1; }
.chart .grid line.base{ stroke: var(--ink-faint); }
.chart .axis text{
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-faint);
}
.chart .group-label{
  font-family: var(--mono);
  font-size: 12px;
  fill: var(--ink-soft);
}
.chart .group-sub{
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-faint);
}
.chart .value-label{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--ink);
}
.chart .bar.s1{ fill: var(--s1); }
.chart .bar.s2{ fill: var(--s2); }
.chart .bar.s3{ fill: var(--s3); }
.chart .bar{ transition: opacity .15s ease; }
.chart .hit{ fill: transparent; cursor: default; outline: none; }
.chart.is-hover .bar{ opacity: .45; }
.chart.is-hover .bar.is-active{ opacity: 1; }

.chart-tip{
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .45rem .65rem;
  font-size: .85rem;
  box-shadow: 2px 2px 0 var(--shadow);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 10px));
  transition: opacity .12s ease;
}
.chart-tip.is-on{ opacity: 1; }
.chart-tip .tip-group{
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-faint);
}
.chart-tip .tip-value{ font-family: var(--mono); font-weight: 500; }

#results .prose{ margin-top: 1.8rem; }

/* ---------- BibTeX ---------- */
.bib{ position: relative; }
.bib pre{
  margin: 0;
  padding: 1.2rem 1.3rem;
  overflow-x: auto;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.bib-copy{
  position: absolute;
  top: .7rem; right: .7rem;
  overflow: hidden;
  padding: .3rem .7rem;
  font-size: .74rem;
}
.bib-copy.is-copied .pill-copied{ transform: translateY(0); }

/* ---------- focus ---------- */
a:focus-visible, button:focus-visible, .chart .hit:focus-visible{
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

/* ---------- responsive ---------- */
@media (max-width: 760px){
  .phases, .steps, .stats{ grid-template-columns: 1fr; }
  .bib-copy{ position: relative; top: auto; right: auto; margin-bottom: .6rem; }
}