/*
 * The shared skin of the root pages: the home page, "The price of a move",
 * and the year pages.
 *
 * The two sections this site is made of look nothing like each other. The
 * games are a reconstruction of the web of 2005-2009 -- #66cc99 behind
 * #ffff99 cards, Arial, no rounded corners -- and the real thing from that
 * era sat on this same domain until the day this file was written. The chip
 * catalogue is a dark terminal: #0b0d0e, a monospace stack, CRT scanlines,
 * a boot screen.
 *
 * The root does not try to reconcile them, because they cannot be
 * reconciled and a third contemporary style would only turn both of them
 * into exhibits. It does two things instead.
 *
 * First, it keeps the green. Twenty years of this domain were #66cc99, and
 * the visitor who has seen either section has seen it: the games use it now
 * and the 2005 site used it then. It is the one thing here that is not a
 * costume.
 *
 * Second, every number on these pages is set in the catalogue's monospace
 * stack -- the same one, quoted deliberately from its --mono. Prose is
 * Arial, like the games; figures are mono, like the chips. So the two
 * sections meet inside a sentence rather than side by side, and the
 * entrance cards at the bottom carry each section's own palette as a
 * swatch, so the colour tells you where you are about to land.
 */

:root {
  --green: #66cc99;
  --green-dark: #339966;
  --card: #ffff99;
  --card-hover: #ffffbb;
  --edge: #999966;
  --ink: #333333;
  --ink-soft: #776644;
  --on-green: #f0fff0;
  --on-green-soft: #e0f5e8;
  --link: #225588;

  /* quoted verbatim from cpu_history/styles.css --mono: the point is that
     it is the same stack, not a similar one */
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;
  --sans: Arial, Helvetica, sans-serif;

  /* the catalogue's own colours, used only inside its swatch */
  --term-bg: #0b0d0e;
  --term-fg: #d7d7d3;
  --term-acc: #7fffa6;
  --term-dim: #8a8f8c;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--green);
  font-family: var(--sans);
  color: var(--ink);
}

#page {
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 12px 40px 12px;
}

/* ---------- headings ---------- */

#siteTitle {
  text-align: center;
  font-size: 34px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 0 var(--green-dark);
  margin: 14px 0 4px 0;
}
#siteTitle a { color: inherit; text-decoration: none; }

#siteSub {
  text-align: center;
  font-size: 15px;
  color: var(--on-green);
  margin: 0 0 20px 0;
}

/* A section heading sits on the green, not on a card: the cards are the
   content and a heading inside one would read as part of it. */
.sectionTitle {
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1px 1px 0 var(--green-dark);
  margin: 30px 0 4px 0;
}
.sectionSub {
  font-size: 13px;
  color: var(--on-green-soft);
  margin: 0 0 12px 0;
}

/* ---------- the card, the one shape this site has ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--edge);
  padding: 14px 16px;
  margin: 0 0 12px 0;
}
a.card { display: block; text-decoration: none; color: var(--ink); }
a.card:hover { background: var(--card-hover); }

.card p { margin: 0 0 10px 0; line-height: 1.55; }
.card p:last-child { margin-bottom: 0; }
.card a { color: var(--link); }

/* ---------- numbers ---------- */

/* Everything countable on these pages goes through .num. It is the whole
   visual argument of the root: prose in the games' Arial, figures in the
   catalogue's mono. */
.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.big {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.1;
}

/* a source, set small underneath the thing it backs. The rule this site
   works by is that a fact without one does not go in. */
.src {
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 8px 0 0 0;
}
.src a { color: var(--ink-soft); }

/* ---------- the live score strip ---------- */

#scoreStrip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 6px 0;
}
#globalScore {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--edge);
  padding: 5px 10px;
  font-size: 14px;
  font-weight: bold;
  font-family: var(--mono);
  color: var(--ink);
  text-decoration: none;
}
#globalScore:hover { background: var(--card-hover); }
#globalScore .more {
  font-weight: normal;
  color: var(--ink-soft);
  margin-left: 6px;
}
#scoreStrip .quick a {
  color: var(--on-green);
  text-decoration: none;
  margin-right: 12px;
  font-size: 13px;
}
#scoreStrip .quick a:hover { text-decoration: underline; }

/* ---------- tables ---------- */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid rgba(153, 153, 102, 0.4);
  vertical-align: baseline;
}
.tbl th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: bold;
  border-bottom: 1px solid var(--edge);
}
.tbl tr:last-child td { border-bottom: none; }
.tbl td.n, .tbl th.n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A table is the one thing on this site that must be allowed to scroll
   sideways on its own rather than push the page around it. */
.scroller { overflow-x: auto; }

/* ---------- the bar, powers of ten ---------- */

/* matches.html, solved.html and limits.html all reached for the same
   picture independently: a row of bars whose length is a power of ten.
   Reusing it here is the point -- the root is not introducing a device,
   it is joining one already in use on both sides.  */
.bars { margin: 4px 0 0 0; }
/* Three columns rather than a value floated off the end of the bar: the
   longest bar here is also the one with the longest label under it
   ("~2,200: 1,920 CPUs + 280 GPUs"), so anything anchored to the end of
   the fill runs off the card exactly when the bar is at full width. */
.barRow {
  display: grid;
  grid-template-columns: minmax(90px, 30%) 1fr minmax(80px, max-content);
  gap: 4px 10px;
  align-items: center;
  margin: 0 0 6px 0;
  font-size: 13px;
}
.barRow .lab { line-height: 1.3; }
.barRow .track { height: 16px; background: rgba(0, 0, 0, 0.06); }
.barRow .fill { height: 100%; }
.barRow.m .fill { background: #4a6ea9; }
.barRow.h .fill { background: #b03a2a; }
.barRow .val {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-soft);
}
/* a zero-power bar still has to be visible, or the first row reads as
   missing data rather than as "one processor" */
.barRow .fill { min-width: 3px; }

/* ---------- the two entrances, each in its own palette ---------- */

#doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.door {
  display: block;
  padding: 16px 18px;
  text-decoration: none;
  border: 1px solid var(--edge);
}
.door .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}
.door .name { font-size: 22px; font-weight: bold; margin: 0 0 6px 0; }
.door .desc { font-size: 13px; line-height: 1.5; margin: 0 0 10px 0; }
.door .figs {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* the games: their own yellow on their own green */
.door.games { background: var(--card); color: var(--ink); }
.door.games:hover { background: var(--card-hover); }
.door.games .kicker { color: var(--ink-soft); }
.door.games .figs { color: var(--ink-soft); }

/* the catalogue: its own terminal, quoted exactly */
.door.chips {
  background: var(--term-bg);
  color: var(--term-fg);
  border-color: #2a3034;
  font-family: var(--mono);
}
.door.chips:hover { background: #101314; }
.door.chips .kicker { color: var(--term-acc); }
.door.chips .name { color: var(--term-fg); }
.door.chips .desc { color: var(--term-dim); }
.door.chips .figs { color: var(--term-acc); }

/* ---------- two-up rows ---------- */

.pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

/* ---------- the year strip ---------- */

#years { display: flex; flex-wrap: wrap; gap: 6px; }
#years a {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--edge);
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}
#years a:hover { background: var(--card-hover); }

/* ---------- footer ---------- */

#footer {
  margin-top: 34px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 12px;
  line-height: 1.6;
  color: var(--on-green-soft);
}
#footer a { color: #ffffff; }

/* ---------- the year pages ---------- */

/* The year pages are generated files and carry both languages in the html
   at once, because the whole reason the section exists is that a crawler
   can read them. One class on <html>, set inline before the body is
   parsed, decides which half is shown. With JavaScript off neither is
   hidden: two languages one after the other is verbose, but it is never
   the wrong one. */
html.yvc-ru .lang-en,
html.yvc-en .lang-ru { display: none; }

/* The line above a card's heading: a date and which side took it. Mono,
   because it is mostly a date, and the same small caps as .door .kicker --
   the shape is already on the front page and does not need a second one. */
.kick {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px 0;
}

.card h3 {
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 6px 0;
  color: #333311;
}

/* ---------- back link on the inner root pages ---------- */

.back {
  display: inline-block;
  margin: 8px 0 0 0;
  font-size: 13px;
  color: var(--on-green);
  text-decoration: none;
}
.back:hover { text-decoration: underline; }

/* ---------- narrow screens ---------- */

@media (max-width: 620px) {
  #siteTitle { font-size: 27px; }
  .big { font-size: 22px; }
  /* label on one line, bar and value under it: at this width the three
     columns leave the bar about forty pixels of travel, which is not a
     chart any more */
  .barRow { grid-template-columns: 1fr max-content; }
  .barRow .lab { grid-column: 1 / -1; }
  .barRow .track { height: 14px; }
}