/* The site's front page (index.html): the results page's styles (styles.css)
   and these, for its own views: the home page, the baselines' and the
   integrations' pages, the coverage's census and how it works. */

#view { min-width: 0; }

.small { font-size: 13px; }

/* The home page: two lines across the content's width, a table of the
   types, a line per integration. */
.intro { margin: 0.8rem 0 1rem; max-width: 75rem; }
.intro .big { font-size: 1.1rem; line-height: 1.45; margin: 0 0 0.4rem; text-wrap: pretty; }
.intro .lede { max-width: none; }
.results h2.home-h { margin: 1.2rem 0 0.4rem; font-size: 1.05rem; }
/* each best baseline with tddlog's speed-up over it, an item of its own */
table.home-t td.best { white-space: normal; }
.board .chips { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; }
.board .chip { white-space: nowrap; }
table.home-t .chip .x { margin-left: 0.35rem; font-variant-numeric: tabular-nums; font-weight: 600; }
table.home-t .chip .x.none { font-weight: 400; color: var(--muted); font-size: 0.9em; }
ul.home-int { margin: 0.2rem 0 0.6rem; padding-left: 1.2rem; }
ul.home-int li { margin: 0.15rem 0; }
table.baselines-t td.about { white-space: normal; min-width: 16rem; }

/* A comparison's cells, grouped under each side's name. */
.versus { display: flex; flex-wrap: wrap; gap: 0.4rem 2.2rem; margin: 0.6rem 0; }
.versus .side { display: flex; flex-direction: column; }
.versus .who { min-height: 1.2em; font-size: 12px; font-weight: 600; line-height: 1.2; border-bottom: 1px solid var(--line); padding-bottom: 0.15rem; }
.versus .side:first-child .who { border-color: transparent; }
.versus .cells { margin: 0.25rem 0 0; gap: 0.4rem 1.2rem; }

.way .cells { gap: 0.3rem 1.2rem; }
.way .cell b { font-size: 1rem; }
a.tool { white-space: nowrap; }
a.tool i.sw { margin-right: 0.4rem; vertical-align: middle; }

/* A baseline's page: a row of tabs, each a view of its own, the one on
   show underlined, under them its panel; on a phone the row scrolls. */
nav.tabs { display: flex; flex-wrap: wrap; gap: 0 1.4rem; margin: 1rem 0 0; box-shadow: inset 0 -1px 0 var(--line); font-size: 14px; }
nav.tabs a { flex: none; padding: 0.35rem 0 0.45rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
nav.tabs a:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--line); }
nav.tabs a[aria-current] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
nav.tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
nav.tabs .n { margin-left: 0.35rem; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
nav.tabs + .panel { margin-top: 0.6rem; border-top: 0; }
.panel { margin-top: 1rem; padding-top: 0.1rem; border-top: 1px solid var(--line); scroll-margin-top: 0.5rem; }
.panel > h3 { margin-top: 0.6rem; }
.panel.split > h3 { font-size: 1.05rem; }
.results h3.every { margin-top: 2.2rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
tr.vs th { font-weight: 700; }
.fams { font-size: 13px; color: var(--muted); }
.fams p { margin: 0.4rem 0 0; }
.fams details summary { cursor: pointer; color: var(--accent-ink); }
/* A baseline's translated instances by family (translatedTable): a
   family's name wraps; the folded row's names are on hover. */
table.fams-tr tbody th { min-width: 10rem; max-width: 24rem; white-space: normal; }
table.fams-tr tbody th[title] { cursor: help; text-decoration: underline dotted color-mix(in oklab, var(--muted) 60%, transparent); text-underline-offset: 3px; }
details.beyond summary { cursor: pointer; font-size: 14px; }
ul.insts { columns: 16rem; margin: 0.4rem 0 0.8rem; font-size: 13px; }

/* Coverage: the classes and each source's census. */
dl.classes { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.3rem 1rem; max-width: 90ch; font-size: 14px; }
dl.classes dt, dl.classes dd { margin: 0; }
/* A census source counted in words: its programs and what tddlog runs, labelled as the counts are. */
dl.classes.words { margin: 0.3rem 0 0.5rem; font-size: 13px; }
dl.classes.words dt { color: var(--muted); }
details.reasons { margin: 0.5rem 0 0.8rem; font-size: 14px; }
details.reasons summary { cursor: pointer; }
details.reasons summary .cls { margin-left: 0.3rem; }
details.reasons dl { margin-top: 0.5rem; }
/* The methods table: a fact a row, under the group it is in; its facts wrap. */
table.board.methods { max-width: 100ch; }
table.board.methods tbody th { vertical-align: top; font-weight: 600; }
table.board.methods td { white-space: normal; }
table.board.methods tr.group th { padding-top: 0.9rem; color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
.cls { display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px; font-size: 12px; white-space: nowrap; background: var(--code); border: 1px solid var(--line); }
.cls-not-yet { background: var(--accent-fill); border-color: var(--accent); }
.cls-impossible { background: var(--amber-fill); border-color: var(--amber); }
.census { margin: 0.4rem 0 0.8rem; }
.census p { max-width: 75rem; margin-bottom: 0.2rem; }
.census details summary { cursor: pointer; font-size: 13px; color: var(--accent-ink); }
table.census-t td.about { white-space: normal; min-width: 14rem; max-width: 40ch; vertical-align: top; }
table.census-t td { vertical-align: top; }

/* How it works: the walkthroughs in a row of tabs, the stages a strip of
   one line, each a link to its step, the step on show marked. Each kind
   has a colour of the logo's: the walkthroughs gold, the stages blue, a
   tab tinted and the one on show solid; the buttons (the playground, back
   and next) are outlined in the blue and fill on hover. */
.results p.lede.one { margin-bottom: 0.4rem; }
nav.walks { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.6rem; font-size: 14px; }
nav.walks a { padding: 0.15rem 0.7rem; border: 1px solid var(--gold-line); border-radius: 999px; background: var(--gold-fill); color: var(--ink); text-decoration: none; }
nav.walks a:hover { border-color: var(--logo-gold); box-shadow: inset 0 0 0 1px var(--logo-gold); }
nav.walks a[aria-current] { border-color: var(--gold-line); background: var(--logo-gold); color: #1d1f21; font-weight: 600; }
.pipe { margin: 0.5rem 0; overflow-x: auto; }
ol.pipeline { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line)); border-radius: 6px; overflow: hidden; width: max-content; min-width: 100%; background: var(--accent-fill); }
ol.pipeline li { flex: 1 0 auto; }
ol.pipeline li + li { border-left: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line)); }
ol.pipeline a { display: block; padding: 0.3rem 0.65rem; color: var(--accent-ink); font-size: 13px; font-weight: 500; text-align: center; text-decoration: none; white-space: nowrap; }
ol.pipeline a:hover { background: color-mix(in oklab, var(--accent) 22%, var(--card)); }
ol.pipeline a[aria-current] { background: var(--logo-blue); color: #fff; font-weight: 700; }
.walk-head .lede { margin: 0.4rem 0 0.2rem; }
.walk-head p.run { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.8rem; margin: 0 0 0.3rem; }
.walk-head p.run code { overflow-wrap: anywhere; }
.results .step h3 { margin: 0.8rem 0 0.3rem; }
.step h3 .muted { margin-left: 0.4rem; font-weight: 400; }
.step > p { max-width: 80ch; }
/* a term of the guide's, linked where a step first uses it: the text's colour, underlined in dots */
.step a.term { color: inherit; text-decoration: underline dotted; text-underline-offset: 0.15em; }
.step a.term:hover { color: var(--accent-ink); text-decoration-style: solid; }
.step pre.src { max-height: 26rem; overflow: auto; font-size: 12.5px; }
.step-nav { display: flex; justify-content: space-between; max-width: 80ch; }
a.try-btn, .step-nav a {
  display: inline-block;
  padding: 0.1rem 0.7rem;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--card);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
a.try-btn:hover, .step-nav a:hover { background: var(--accent); border-color: var(--accent); color: var(--card); }
nav.walks a:focus-visible, a.try-btn:focus-visible, .step-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* inside the strip, which clips what is outside its cells */
ol.pipeline a:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }

/* On a phone: the sentence smaller, and the walkthroughs one line that
   scrolls, as the stages do. */
@media (max-width: 52rem) {
  .intro .big { font-size: 1.05rem; }
  nav.walks { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.2rem; }
  nav.walks a { flex: none; white-space: nowrap; }
}

/* Why it is fast: the three gains in a row, a times sign between them, each
   in its own colour (tddlog's teal, the logo's blue, the accent); then the
   optimizations, each a card of two columns under a rule: what it does, its
   effect and its links on the left, what shows it on the right. */
.gains { display: flex; align-items: stretch; gap: 0.7rem; max-width: 52rem; margin: 0.7rem 0 0.3rem; }
.gain { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; padding: 0.6rem 0.8rem;
  border: 1px solid var(--g); border-radius: 8px; background: color-mix(in oklab, var(--g) 9%, var(--card)); text-align: center; }
.gain.mine { --g: var(--s-tddlog); }
.gain.lib { --g: var(--logo-blue); }
.gain.tdd { --g: var(--accent); }
.gain b { font-size: 1.1rem; font-weight: 650; }
.gain a { color: var(--ink); text-decoration-color: var(--g); text-underline-offset: 0.18em; }
.gain span { color: var(--muted); font-size: 13px; line-height: 1.3; text-wrap: balance; }
.gains .times { align-self: center; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.opt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0.4rem 1.8rem; align-items: start; max-width: 75rem;
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.results .opt h3 { margin: 0 0 0.3rem; }
.opt h3 .k { display: inline-block; min-width: 1.5em; margin-right: 0.5rem; border-radius: 999px; background: var(--logo-blue); color: #fff;
  font-size: 0.85em; font-variant-numeric: tabular-nums; line-height: 1.5; text-align: center; }
.results .opt .say p { margin: 0.3rem 0; max-width: 62ch; }
.opt .cells { margin: 0.5rem 0; }
.results .opt p.credit, .results .opt p.links { font-size: 13px; }
.opt p.credit { color: var(--muted); }
.opt p.links { display: flex; flex-wrap: wrap; gap: 0.15rem 1.1rem; }
.opt .show { min-width: 0; }
.results .opt .show p.cap { margin: 0 0 0.2rem; color: var(--muted); font-size: 12px; }
.opt .show > * + p.cap { margin-top: 0.6rem; }
.opt .show pre { margin: 0; max-height: none; }
.opt .show .tscroll { max-height: none; }
.opt .show table.board { width: 100%; }
.opt .show table.board th, .opt .show table.board td { white-space: normal; vertical-align: top; }
.opt .show table.board thead th { position: static; }
.opt .show .tscroll + .tscroll, .opt .show pre + .tscroll, .opt .show .tscroll + pre { margin-top: 0.6rem; }
.gain a:focus-visible, .opt a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* On a phone: the gains one under the other, and a card's two columns too. */
@media (max-width: 52rem) {
  .gains { flex-direction: column; gap: 0.25rem; }
  .gain { flex: none; }
  .opt { grid-template-columns: minmax(0, 1fr); }
}