/* summary.css: chrome for the Experiment Summary, the campaign in date order.

   Same Observatory rules as everything else, with one constraint that shaped
   the whole layout. Orange and green are data colours in this interface: they
   mean the stripped twin and the independently written control, and they are
   never spent on a control or a label. That rules out the usual timeline habit
   of giving every category its own hue. Instead a category is told apart by
   the word on its chip and by three colours that already carry meaning here:
   red for a defect in the measuring apparatus, amber for something that went
   wrong operationally, and the corona blue for everything else, filled where
   an operator took a decision and outlined where the campaign learned
   something. The rest of the separation is done with space and rhythm.

   The reading problem this page has is that eighty-seven entries look alike at
   a glance. Four devices keep one entry distinct from the next: a date block in
   the left gutter that prints the day large and the month and year small, so
   the eye lands on a date before it lands on prose; a node on the rule whose
   fill says how much the entry mattered; a figures panel with its own ground
   and its own rule per line, so a number is never buried inside a sentence;
   and a month band that breaks the stream every time the calendar turns. */

/* ---------------- drift banner ---------------- */
/* This page summarises a file that is maintained by hand, so it says on its
   own face whether it is level with the notebook it summarises. */
.tl-drift {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin-bottom: 14px; padding: 10px 14px;
  border: 1px solid var(--hairline); border-left-width: 3px;
  border-radius: var(--radius); background: var(--panel);
  font: 12.5px/1.55 var(--sans); color: var(--ink-2);
}
.tl-drift b { color: var(--ink); font-weight: 500; }
.tl-drift.is-level { border-left-color: var(--corona); }
.tl-drift.is-behind { border-left-color: var(--warn); background: var(--warn-dim); }
.tl-drift.is-broken { border-left-color: var(--bad); background: var(--bad-dim); }
.tl-drift-what {
  font: 500 10px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------------- controls ---------------- */
#tl-controls { align-items: flex-end; }
.tl-search { flex: 1 1 320px; min-width: 220px; }
.tl-search input { width: 100%; }
#tl-kinds { max-width: none; margin: 0 0 10px; }
#tl-count { margin: 0 0 14px; }

/* A kind chip carries its own count, so the row doubles as a census of what
   kind of thing this campaign has actually recorded. */
.tl-kind-chip .tl-n {
  margin-left: 6px; opacity: 0.65; font-variant-numeric: tabular-nums;
}

/* ---------------- layout ---------------- */
.tl-layout {
  display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 26px;
  align-items: start;
}
@media (max-width: 1000px) {
  .tl-layout { grid-template-columns: 1fr; gap: 8px; }
}

/* The month spine. On a wide screen it is a sticky index down the left; on a
   narrow one it becomes a horizontal strip above the stream, because a sticky
   column that eats a third of the width is worse than no index at all. */
.tl-spine {
  position: sticky; top: 14px; display: flex; flex-direction: column; gap: 1px;
  max-height: calc(100vh - 40px); overflow: auto;
  border-left: 1px solid var(--hairline); padding-left: 2px;
}
.tl-spine-year {
  padding: 12px 8px 4px; font: 500 10px/1.4 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.tl-spine-year:first-child { padding-top: 2px; }
.tl-spine-link {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
  padding: 5px 8px; border-radius: 4px; border: 0; background: none;
  font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.02em;
  color: var(--ink-2); cursor: pointer; text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tl-spine-link:hover { background: var(--panel-2); color: var(--ink); }
.tl-spine-link.is-current { background: var(--panel-2); color: var(--corona-2); }
.tl-spine-link b { font-weight: 500; }
.tl-spine-link span {
  font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
@media (max-width: 1000px) {
  .tl-spine {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 4px;
    border-left: 0; border-bottom: 1px solid var(--hairline);
    padding: 0 0 10px; margin-bottom: 12px; max-height: none;
  }
  .tl-spine-year { padding: 5px 8px; }
  .tl-spine-link { border: 1px solid var(--hairline); }
}

/* ---------------- the stream ---------------- */
.tl-stream { min-width: 0; }

/* Every time the calendar turns a month, the stream breaks. Without this the
   page is one undifferentiated column and a reader loses their place. */
.tl-month {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 12px;
  margin: 26px 0 12px; padding: 8px 0 7px;
  background: linear-gradient(to bottom, var(--sky-0) 60%, rgba(var(--well-rgb), 0));
  border-bottom: 1px solid var(--hairline-2);
}
.tl-month:first-child { margin-top: 0; }
.tl-month h2 {
  margin: 0; font: 400 20px/1.15 var(--serif); letter-spacing: -0.012em;
  color: var(--ink); font-variation-settings: "opsz" 32;
}
.tl-month span {
  font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* One entry. The gutter holds the date and the rule; the card holds the rest. */
.tl-entry {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 20px;
  position: relative;
}
.tl-entry::before {
  content: ""; position: absolute; left: 83px; top: 0; bottom: 0;
  width: 1px; background: var(--hairline);
}
.tl-entry:last-child::before { bottom: auto; height: 34px; }

.tl-date {
  position: relative; padding: 18px 0 0; text-align: right;
}
.tl-date-day {
  display: block; font: 500 26px/1 var(--mono); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.tl-date-month {
  display: block; margin-top: 3px; font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.tl-date-year {
  display: block; margin-top: 1px; font: 400 10.5px/1.3 var(--mono);
  letter-spacing: 0.08em; color: var(--ink-3);
}
.tl-date-part {
  display: block; margin-top: 6px; font: 400 10.5px/1.35 var(--sans);
  color: var(--ink-3); text-wrap: balance;
}
/* A repeated date is printed once and then withheld, so a day carrying five
   entries reads as one day rather than as five identical stamps. */
.tl-entry.is-same-day .tl-date-day,
.tl-entry.is-same-day .tl-date-month,
.tl-entry.is-same-day .tl-date-year { visibility: hidden; }

/* The node on the rule. Its fill is the weight: a landmark is solid and
   glowing, a major entry is solid, a routine one is hollow. */
.tl-node {
  position: absolute; right: -21px; top: 25px; width: 9px; height: 9px;
  border-radius: 50%; border: 1.5px solid var(--corona);
  background: var(--sky-0); box-sizing: border-box;
}
.tl-entry.w-major .tl-node { background: var(--corona); }
.tl-entry.w-landmark .tl-node {
  width: 13px; height: 13px; right: -23px; top: 23px;
  background: var(--corona-2); border-color: var(--corona-2);
  box-shadow: 0 0 0 3px rgba(var(--corona-rgb), 0.18), 0 0 14px var(--corona-glow-2);
}
.tl-entry.k-defect .tl-node { border-color: var(--bad); }
.tl-entry.k-defect.w-major .tl-node { background: var(--bad); }
.tl-entry.k-defect.w-landmark .tl-node {
  background: var(--bad); border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(var(--bad-solid-rgb), 0.2), 0 0 14px rgba(var(--bad-rgb), 0.5);
}
.tl-entry.k-incident .tl-node { border-color: var(--warn); }
.tl-entry.k-incident.w-major .tl-node { background: var(--warn); }
.tl-entry.k-incident.w-landmark .tl-node {
  background: var(--warn); border-color: var(--warn);
  box-shadow: 0 0 0 3px rgba(var(--warn-solid-rgb), 0.18), 0 0 14px rgba(var(--warn-rgb), 0.5);
}

.tl-card {
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--panel); padding: 14px 18px 15px;
  margin: 10px 0 12px; min-width: 0;
  transition: border-color var(--t-fast) var(--ease);
}
.tl-card:hover { border-color: var(--hairline-2); }
.tl-entry.w-landmark .tl-card {
  background: linear-gradient(to right, rgba(var(--corona-rgb), 0.07), var(--panel) 46%);
  border-color: var(--hairline-2);
}
.tl-entry.w-routine .tl-card { background: var(--panel-glass); }

.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 7px; }
.tl-kind {
  font: 500 10px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 4px; padding: 2px 8px; white-space: nowrap;
  border: 1px solid var(--hairline-2); color: var(--ink-2);
}
.tl-kind.k-finding { color: var(--corona-2); border-color: var(--corona); }
.tl-kind.k-defect { color: var(--bad); border-color: rgba(var(--bad-rgb), 0.5); background: var(--bad-dim); }
.tl-kind.k-incident { color: var(--warn); border-color: rgba(var(--warn-rgb), 0.5); background: var(--warn-dim); }
.tl-kind.k-ruling { color: var(--accent-ink); background: var(--btn); border-color: var(--btn); }
.tl-weight {
  font: 500 10px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
}
.tl-entry.w-landmark .tl-weight { color: var(--corona-2); }

.tl-title {
  margin: 0 0 4px; font: 400 17.5px/1.32 var(--serif); letter-spacing: -0.01em;
  color: var(--ink); text-wrap: pretty; font-variation-settings: "opsz" 24;
}
.tl-entry.w-landmark .tl-title { font-size: 19px; }

/* The figures panel. This is the surface a reader scans for a number, so it
   never shares a paragraph with prose and never wraps two figures onto one
   line. Each figure is a complete phrase in the source file, which is what
   lets it be printed alone without a caption to explain it. */
.tl-figures {
  margin: 10px 0 0; padding: 9px 0 9px 12px;
  border-left: 2px solid var(--corona); background: var(--well);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.tl-figures li {
  list-style: none; margin: 0; padding: 3px 12px 3px 0;
  font: 12.5px/1.5 var(--mono); color: var(--corona-2);
  font-variant-numeric: tabular-nums; text-wrap: pretty;
}
.tl-figures li + li { border-top: 1px solid rgba(var(--hair-rgb), 0.1); }
.tl-figures ul { margin: 0; padding: 0; }
.tl-figures-label {
  display: block; margin-bottom: 2px; font: 500 9.5px/1.4 var(--mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}

.tl-body { margin-top: 12px; }
.tl-body p {
  margin: 0 0 11px; color: var(--ink-2); font: 13.5px/1.68 var(--sans);
  text-wrap: pretty;
}
.tl-body p:last-child { margin-bottom: 0; }
.tl-body b { color: var(--ink); font-weight: 500; }
.tl-body code { font-size: 12.5px; }

.tl-more {
  margin-top: 10px; padding: 3px 10px; font-size: 11.5px;
}
.tl-foot {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--hairline);
}
.tl-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tl-tag {
  border: 0; background: none; padding: 1px 6px; border-radius: 3px;
  font: 400 11px/1.5 var(--mono); letter-spacing: 0.02em; color: var(--ink-3);
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--hairline);
}
.tl-tag:hover { color: var(--corona-2); box-shadow: inset 0 0 0 1px var(--corona); }
.tl-source {
  margin-left: auto; font: 400 11px/1.5 var(--sans); color: var(--ink-3);
  text-align: right; min-width: 0;
}
.tl-source code { font-size: 11px; }

/* search hits, marked rather than recoloured so the palette stays honest */
.tl-hit { background: rgba(var(--corona-rgb), 0.28); color: var(--ink); border-radius: 2px; }

.tl-empty {
  padding: 30px 0; color: var(--ink-3); font: 13px/1.6 var(--sans);
}

/* ---------------- the reference block at the foot ---------------- */
.tl-about {
  margin-top: 26px; border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); background: var(--panel); padding: 12px 18px;
}
.tl-about > summary {
  cursor: pointer; font: 500 11px/1.5 var(--mono); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--corona-2); list-style: none;
}
.tl-about > summary::-webkit-details-marker { display: none; }
.tl-about > summary::before { content: "+ "; }
.tl-about[open] > summary::before { content: "- "; }
.tl-about-body { margin-top: 12px; color: var(--ink-2); font: 13px/1.68 var(--sans); }
.tl-about-body h1, .tl-about-body h2 {
  margin: 18px 0 7px; font-family: var(--serif); font-weight: 500;
  font-size: 16px; color: var(--ink); letter-spacing: 0;
}
.tl-about-body > :first-child { margin-top: 0; }
.tl-about-body p { margin: 0 0 11px; text-wrap: pretty; }
.tl-about-body b { color: var(--ink); font-weight: 500; }
.tl-about-body table { border-collapse: collapse; width: 100%; margin: 0 0 14px; }
.tl-about-body th, .tl-about-body td {
  text-align: left; padding: 5px 10px 5px 0; vertical-align: top;
  border-bottom: 1px solid var(--hairline); font-size: 12.5px;
}
.tl-about-body th { color: var(--ink-3); font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------------- the six-phase chronology (LP-8) ---------------- */
.tl-phases-wrap {
  margin: 18px 0 22px; border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); background: var(--panel); padding: 14px 18px 16px;
}
.tl-phases-title {
  margin: 0 0 4px; font-family: var(--serif); font-weight: 500; font-size: 16px;
  color: var(--ink); letter-spacing: 0;
}
.tl-phases {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px; margin-top: 10px;
}
@media (max-width: 900px) {
  .tl-phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tl-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tl-phase-card {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--panel-2); padding: 9px 10px; cursor: pointer;
  font: inherit; color: inherit; transition: border-color 0.15s, background 0.15s;
}
.tl-phase-card:hover { border-color: var(--corona); }
.tl-phase-card.is-on {
  border-color: var(--corona-2); background: rgba(var(--corona-rgb), 0.12);
}
.tl-phase-card.is-unclassified.is-on { border-color: var(--warn, #b45309); }
.tl-phase-card-title { font: 500 12px/1.35 var(--sans); color: var(--ink); }
.tl-phase-card-range { font: 400 10.5px/1.4 var(--mono); color: var(--ink-3); letter-spacing: 0.02em; }
.tl-phase-card-count { font: 400 11px/1.4 var(--sans); color: var(--ink-2); }
.tl-phase-detail {
  margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 12px;
}
.tl-phase-card-detail h3 {
  margin: 0 0 3px; font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--ink);
}
.tl-phase-range { margin: 0 0 10px; font: 400 11.5px/1.5 var(--mono); color: var(--ink-3); }
.tl-phase-fields { margin: 0; display: grid; gap: 10px; }
.tl-phase-fields dt {
  font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--corona-2);
}
.tl-phase-fields dd { margin: 3px 0 0; font: 13px/1.6 var(--sans); color: var(--ink-2); }
.tl-phase-card-detail.is-unclassified p { font: 13px/1.6 var(--sans); color: var(--ink-2); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .tl-spine-link, .tl-card { transition: none; }
  .tl-phase-card { transition: none; }
}