/* The look of the machine, rather than the look of a forge that hosted it.

   This was a reconstruction of linux.org as it stood in 2005: a brown
   masthead, cream boxes, a white well. That was chosen when the desktop it
   advertised was Windows 98 chrome, and the two matched. The desktop moved to
   Frutiger Aero in Aperture's colours at 1.3.0 and the site did not, so for
   three releases the marketing and the product disagreed about what this
   thing looks like.

   Every colour below comes out of `src/gfx/theme.rs` rather than being picked
   here, and that file states the rule the palette follows: **the surfaces the
   machine speaks through are warm, and the room it sits in is cool.** So the
   accent, the section bars and the links are Aperture's orange, and the
   navigation, the footer and the ground under the page are deep water. The
   accent was already here -- #F28C1E was the hover colour -- and what changed
   is everything around it.

   Dark mode follows `prefers-color-scheme` and there is no toggle. A toggle
   needs somewhere to remember the choice, and the footer of every page on
   this site says there are no cookies, no analytics and no telemetry of any
   kind. That sentence is worth more than a control the operating system
   already provides. */

:root {
  /* Light. The page is a document; the chrome around it is the desktop. */
  --ground:     #C9DAE3;
  --page:       #FFFFFF;
  --panel:      #EFF3F5;   /* theme::FACE */
  --panel-2:    #E2EEF4;   /* theme::MENU_GUTTER */
  --edge:       #A3B4BC;   /* theme::EDGE */
  --edge-2:     #8FB2C2;   /* theme::MENU_EDGE */
  --well-edge:  #6E9EB4;   /* theme::WELL_EDGE */
  --ink:        #14303D;
  --ink-dim:    #566C77;
  --ink-faint:  #768890;   /* theme::TEXT_DIM */
  --link:       #9A500C;   /* theme::APERTURE_DEEP */
  --link-hot:   #F28C1E;   /* theme::APERTURE */
  --accent:     #F28C1E;
  --chrome:     #0E3E56;   /* theme::GLASS  -- the tab strip */
  --chrome-2:   #072A3C;   /* theme::TRAY   -- the footer */
  --chrome-ink: #DCEEF6;
  --chrome-dim: #9FC4D4;
  --chrome-hot: #FFD8A6;
  --code-bg:    #F2F6F8;
  --shadow:     0 3px 5px rgba(7, 42, 60, .16);
  --round:      7px;
  --round-sm:   4px;

  /* The caption bar, and the one place this deviates from theme.rs on
     purpose. `TITLE_ON` runs #FFDEAC down to #F4A536 with a hard break at the
     halfway row, and white on it measures 2.8:1 -- fine on a title bar
     carrying four words at double scale, and not fine on a web page where the
     same bar carries a heading at body size. So the site takes the same
     *construction* an octave down: the identical seven-stop shape, the same
     hard gloss break at 50%, the same upturn at the foot, built around
     APERTURE_DEEP instead of APERTURE. White clears 4.6:1 at the lightest
     stop. The catchlight along the top row is theme::CAP_EDGE, which is the
     single pixel `chrome()` draws at r.y and is most of why the bar reads as
     lit rather than filled. */
  --cap: linear-gradient(180deg,
      #B4600A 0%, #B05D08 3.1%, #A85A08 47.1%,
      #A25507 50.2%, #8E4708 50.6%, #96500C 96.5%, #A85A0C 100%);
  --cap-edge: #FFE0BC;

  /* The taskbar. theme::GLASS_STOPS is an alpha ramp of GLASS over the
     wallpaper, and there is no wallpaper here for it to be glass against, so
     what is borrowed is the shape rather than the arithmetic: bright at the
     top, a hard step at the halfway row, and a darker lower half. */
  --glass: linear-gradient(180deg,
      rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .11) 47%,
      rgba(255, 255, 255, .06) 50.2%, rgba(0, 0, 0, .10) 50.6%,
      rgba(0, 0, 0, .03) 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:     #061F2C;
    --page:       #0D3A50;
    --panel:      #12475F;
    --panel-2:    #0F415A;
    --edge:       #2C5D76;
    --edge-2:     #35697F;
    --well-edge:  #4A87A0;
    --ink:        #E4F1F7;
    --ink-dim:    #A6C3D0;
    --ink-faint:  #8AA8B6;
    --link:       #F5A748;
    --link-hot:   #FFE0BC;   /* theme::CAP_EDGE */
    --chrome:     #072A3C;
    --chrome-2:   #04202E;
    --code-bg:    #0A3346;
    --shadow:     0 3px 6px rgba(0, 0, 0, .45);
  }
}

/* ---------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

body {
  background: var(--ground);
  color: var(--ink);
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", Tahoma, Verdana,
               Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

a { color: var(--link); }
a:hover { color: var(--link-hot); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The page as a card on a ground, which is the one structural change here.
   Capped so the masthead and the sidebar stop stretching on a wide display;
   the prose has its own 48em cap further down and never needed this. The
   original stylesheet argued against a fixed 850px, and it was right -- that
   is a strip of text between two fields of grey. 1560 is the width at which
   the three-column layout stops growing, not the width of the text. */
#page {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  background: var(--page);
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------ masthead --- */

/* The mark is laid over the band rather than sitting in it, so the band's
   height is the padding stated here and swapping the artwork for a taller
   file moves nothing below it. The tagline stays in flow, because wrapping to
   two lines on a narrow screen is the one thing that should still push the
   band taller. */
#masthead {
  position: relative;
  background: linear-gradient(180deg, var(--page) 0%, var(--panel) 100%);
  border-bottom: 1px solid var(--edge);
  padding: 68px 18px 12px;
}
#masthead .mark {
  position: absolute;
  left: 18px;
  top: 14px;
  line-height: 0;
  text-decoration: none;
}
#masthead img {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
}
#masthead .sub {
  display: block;
  color: var(--ink-dim);
  font-size: 13px;
}

/* The wordmark is black line art on transparent, drawn for a light ground.
   In dark mode it would be black on near-black, so it is inverted rather than
   redrawn -- for pure black on transparent that is exactly a white version of
   the same file, and it cannot fall out of step with the artwork the way a
   second exported PNG would. */
@media (prefers-color-scheme: dark) {
  #masthead img { filter: invert(1); }
}

/* ------------------------------------------------------------ tab strip --- */

/* The navigation is the taskbar. Deep water with a gloss break at the halfway
   row, the active tab drawn in the page's own colour so the strip reads as
   the top edge of the page rather than as a control floating above it. */
#tabs {
  background-color: var(--chrome);
  background-image: var(--glass);
  border-bottom: 1px solid var(--chrome-2);
  padding: 6px 18px 0;
}
#tabs ul { margin: 0; padding: 0; list-style: none; }
#tabs li { display: inline-block; }
#tabs a {
  display: inline-block;
  padding: 4px 12px;
  margin-right: 2px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 0;
  border-radius: var(--round-sm) var(--round-sm) 0 0;
  background: rgba(255, 255, 255, .08);
  color: var(--chrome-ink);
  text-decoration: none;
  font-size: 12px;
}
#tabs a:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}
#tabs li.on a {
  position: relative;
  top: 1px;
  background: var(--page);
  border-color: var(--chrome-2);
  color: var(--ink);
  font-weight: bold;
}
#tabs li.on a:hover { color: var(--ink); }

/* --------------------------------------------------------------- layout --- */

#body { overflow: hidden; padding: 16px 18px 26px; }
#sidebar { float: left; width: 216px; }
#content { margin-left: 236px; }

.crumbs { font-size: 13px; color: var(--ink-dim); margin-bottom: 8px; }
.crumbs a { color: var(--ink-dim); }
.crumbs a:hover { color: var(--link-hot); }

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

h1 {
  font-size: 27px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--accent);
}
h2 {
  font-size: 19px;
  font-weight: 600;
  text-wrap: balance;
  margin: 22px 0 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--edge);
}
h3 { font-size: 16px; font-weight: 600; margin: 16px 0 5px; }

p { margin: 8px 0; }
ul, ol { margin: 8px 0; padding-left: 22px; }
li { margin: 3px 0; }

/* The page fills the screen; the prose does not. At 1560px an uncapped
   paragraph runs past 150 characters a line and the eye loses its place on
   the way back to the left margin. Capped here rather than by narrowing the
   column, so tables, code and screenshots still get the full width. */
#main > p,
#main > ul,
#main > ol,
#main > dl,
#main > .note { max-width: 48em; }

/* --------------------------------------------------------- section bars --- */

/* A heading that carries the caption bar. Distinct from h2, which the wiki
   articles use and which keeps its quieter rule. */
h2.sect,
.box .t {
  background: var(--cap);
  box-shadow: inset 0 1px 0 var(--cap-edge);
  color: #fff;
  font-weight: bold;
  border: 0;
  border-radius: var(--round) var(--round) 0 0;
}
h2.sect {
  font-size: 14px;
  padding: 5px 10px;
  margin: 22px 0 0;
}
h2.sect:first-child { margin-top: 0; }
/* The "all downloads" link a section bar carries on its right. White and
   underlined rather than tinted: the bar is already dark enough that white
   only just clears 4.6:1 on its lightest stop, and every warm tint that still
   reads as a link against orange lands under 3.5:1. So the underline does the
   work the hue cannot, which is what an underline is for. */
h2.sect a {
  color: #fff;
  text-decoration: underline;
  font-weight: normal;
  font-size: 12px;
  float: right;
}
h2.sect a:hover { color: var(--cap-edge); }

/* The block under a barred heading, so the bar and its contents read as one
   panel rather than a heading floating above loose text. */
.sect + table.forge, .sect + .panel, .sect + .scroll { margin-top: 0; }
.panel {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-top: 0;
  border-radius: 0 0 var(--round) var(--round);
  padding: 10px 12px;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel > p, .panel > ul, .panel > ol, .panel > dl { max-width: 48em; }

/* ------------------------------------------------------------- sidebar --- */

.box { margin-bottom: 10px; }
.box .t { font-size: 12px; padding: 4px 8px; }
.box .bd {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-top: 0;
  border-radius: 0 0 var(--round) var(--round);
  padding: 7px 9px;
  font-size: 12px;
}
.box .bd ul {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: square;
}
.box li { margin: 2px 0; }
.box a { text-decoration: none; }
.box a:hover { text-decoration: underline; }
.box .bd table.facts + ul {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--edge);
}

table.facts { border-collapse: collapse; width: 100%; font-size: 12px; }
table.facts td { padding: 2px 0; vertical-align: top; }
table.facts td:first-child {
  color: var(--ink-dim);
  padding-right: 8px;
  width: 42%;
}

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

table.data, table.dl, table.forge {
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}
table.dl, table.forge { width: 100%; }
table.forge { margin: 0 0 4px; }

table.data th, table.data td,
table.dl th, table.dl td,
table.forge th, table.forge td {
  border: 1px solid var(--edge);
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}
table.data th, table.dl th, table.forge th {
  background: var(--panel-2);
  font-weight: 600;
}
td.size { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.forge tr:hover td { background: var(--panel); }

/* Wide tables scroll inside themselves rather than widening the page. The
   download table has five columns and one of them is prose. */
.scroll { overflow-x: auto; }

.listing { border-collapse: collapse; width: 100%; font-size: 13px; }
.listing th {
  border-bottom: 1px solid var(--well-edge);
  text-align: left;
  padding: 3px 8px 3px 0;
}
.listing td {
  padding: 3px 8px 3px 0;
  border-bottom: 1px solid var(--edge);
}

/* ----------------------------------------------------------------- news --- */

/* Date first, because on a project page the question is always how recently
   anything happened. */
.news { margin: 0 0 14px; }
.news .nh { font-weight: bold; font-size: 15px; }
.news .nd {
  display: inline-block;
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-radius: var(--round-sm);
  color: var(--ink-dim);
  font-size: 12px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  margin-right: 7px;
}
.news p { margin: 4px 0; max-width: 48em; }
.news .nl { font-size: 12px; color: var(--ink-dim); }

/* ------------------------------------------------------------ code, notes -- */

code {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  background: var(--code-bg);
  border: 1px solid var(--edge);
  border-radius: var(--round-sm);
  padding: 0 4px;
  font-size: 13px;
}
pre {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  background: var(--code-bg);
  border: 1px solid var(--edge);
  border-radius: var(--round-sm);
  padding: 9px 11px;
  overflow-x: auto;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.45;
}
pre code { background: none; border: 0; padding: 0; }

.note {
  background: var(--panel-2);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--accent);
  border-radius: var(--round-sm);
  padding: 8px 11px;
  margin: 12px 0;
}

/* ------------------------------------------------------------ pictures --- */

.shot { margin: 14px 0; }
.shot img {
  display: block;
  border: 1px solid var(--edge);
  border-radius: var(--round-sm);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 1280px;
  height: auto;
}
.shot .cap { font-size: 13px; color: var(--ink-dim); margin-top: 6px; max-width: 62em; }

/* Borrowed diagrams, floated the way a wiki floats a thumbnail. Width is
   fixed rather than a percentage because these sit beside prose that is
   itself capped at 48em: a figure that grew with the viewport would swallow
   the column it is supposed to annotate. Diagrams keep a white plate behind
   them in both themes -- most were drawn for a white page and several have
   transparent backgrounds, so on any other colour the linework disappears. */
figure.fig {
  float: right;
  width: 320px;
  margin: 4px 0 12px 18px;
  border: 1px solid var(--edge);
  border-radius: var(--round-sm);
  background: var(--panel);
  padding: 7px;
  font-size: 12px;
  line-height: 1.5;
}
figure.fig img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border-radius: 2px;
}
figure.fig figcaption { color: var(--ink-dim); margin-top: 6px; }
figure.fig .credit {
  display: block;
  color: var(--ink-faint);
  margin-top: 4px;
  font-size: 11px;
}
figure.fig .credit a { color: var(--ink-faint); }

/* A figure wider than the text it interrupts, for the two diagrams that are
   unreadable at 320px. */
figure.fig.wide { float: none; width: auto; max-width: 48em; margin: 14px 0; }

/* ---------------------------------------------------------------- misc --- */

.wikilist { list-style: square; }
.wikilist span { color: var(--ink-dim); }
/* The list ran the article name straight into its description with nothing
   between them -- "GLaDOS OSWhat the system is". A colour change alone is not
   a separator when both halves are the same size and sit on one line. */
.wikilist span::before { content: " \2014 "; color: var(--ink-faint); }

.seealso {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px solid var(--edge);
}
dl.faq dt { font-weight: bold; margin-top: 10px; }
dl.faq dd { margin: 3px 0 0 20px; }

/* A line of qualifying text under a table -- the checksum note, mostly. Small
   enough to read as an aside and not so small it reads as a disclaimer. */
p.small { font-size: 12px; color: var(--ink-dim); margin: 4px 0 0; max-width: 48em; }
.muted { color: var(--ink-faint); }

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

/* The other half of the chrome. The strip at the top and the band at the foot
   are the same deep water, so the document sits between them the way a window
   sits between a title bar and a taskbar. */
#footer {
  clear: both;
  background: var(--chrome-2);
  color: var(--chrome-dim);
  border-top: 1px solid var(--chrome-2);
  padding: 12px 18px;
  font-size: 12px;
}
#footer p { margin: 4px 0; }
#footer a { color: var(--link-hot); }
#footer a:hover { color: #fff; }
#footer code {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: var(--chrome-ink);
}

/* -------------------------------------------------------------- buttons --- */

/* The wallet page's controls. A push button, built the way theme::BTN builds
   one: a ramp that exists to catch the top edge rather than to be looked at,
   nearly flat by the foot. */
button.wbtn, #step2 button, #step3 button {
  font: inherit;
  font-size: 13px;
  padding: 5px 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--panel) 40%, var(--panel-2) 100%);
  color: var(--ink);
  border: 1px solid var(--well-edge);
  border-radius: var(--round-sm);
  box-shadow: 0 1px 2px rgba(7, 42, 60, .14);
  cursor: pointer;
  margin-right: 6px;
}
button.wbtn:hover, #step2 button:hover, #step3 button:hover {
  background: var(--cap);
  box-shadow: inset 0 1px 0 var(--cap-edge);
  border-color: var(--accent);
  color: #fff;
}
#danger { border-color: var(--accent); }

/* Parked off-screen until focused, and it has to come back on focus or it is
   decoration: a skip link nobody can see is one nobody can use, which is
   worse than not having one because the markup claims otherwise. */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 0;
  top: 0;
  z-index: 100;
  padding: 8px 14px;
  background: var(--page);
  color: var(--link);
  border: 2px solid var(--accent);
  text-decoration: none;
}

/* ------------------------------------------------------------- routes --- */

/* Three ways to run this, and the download page has to answer "which one is
   me?" before it answers anything else. The rewrite was prompted by people
   asking how to try it *without* giving up a laptop, and the old page led
   with `dd` -- so the virtual machine route is first, and the one that
   overwrites a disk is last.

   A grid rather than three headings, because the choice is a comparison: the
   reader wants to see the cost of each next to the others, and three sections
   stacked down the page hide two of them below the fold. */
.routes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 18px;
}
.route {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--round);
  padding: 11px 13px 13px;
  display: flex;
  flex-direction: column;
}
.route h3 { margin: 0 0 3px; font-size: 15px; }
.route h3 a { text-decoration: none; }
.route .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--link);
  margin-bottom: 5px;
}
.route p { margin: 0 0 8px; font-size: 13px; color: var(--ink-dim); }
.route .cost {
  margin-top: auto;
  font-size: 12px;
  color: var(--ink-faint);
  border-top: 1px solid var(--edge);
  padding-top: 7px;
}

/* -------------------------------------------------------------- steps --- */

/* A procedure, as distinct from a list of points. The counter is drawn rather
   than left to the list marker because these steps carry code blocks and
   notes under them, so the number has to stay legible beside an item several
   lines tall -- a default marker sits on the first line and is lost. */
ol.steps { list-style: none; padding-left: 0; counter-reset: step; margin: 10px 0; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  margin: 0 0 13px;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  background: var(--cap);
  box-shadow: inset 0 1px 0 var(--cap-edge);
  border-radius: 50%;
}
ol.steps > li > :first-child { margin-top: 0; }
ol.steps > li > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------- image specs --- */

/* One block per downloadable image. The table above it is for comparing at a
   glance; this is for the reader who has narrowed to one and wants to know
   what they are about to spend twenty minutes downloading. */
.imgspec { margin: 0 0 16px; }
.imgspec:last-child { margin-bottom: 0; }
.imgspec h3 { margin: 0 0 6px; font-size: 15px; }
.imgspec .file {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 13px;
  word-break: break-all;
}
.imgspec dl { margin: 7px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; }
.imgspec dt { color: var(--ink-faint); font-size: 12px; }
.imgspec dd { margin: 0; font-size: 13px; }

/* --------------------------------------------------------------- keys --- */

/* Firmware boot-menu keys, which are a per-vendor fact and not a standard.
   Rendered as a plain definition row rather than a table because it is two
   columns of four words and a table draws more furniture than content. */
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 3px 16px; margin: 9px 0; font-size: 13px; }
.keys dt { color: var(--ink-faint); }
.keys dd { margin: 0; }
.keys kbd {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 12px;
  background: var(--code-bg);
  border: 1px solid var(--edge);
  border-bottom-width: 2px;
  border-radius: var(--round-sm);
  padding: 0 5px;
}

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

@media (max-width: 45rem) {
  /* Content before the column. The sidebar is five boxes of categorisation,
     and in source order it sits above the page, so a phone reader scrolled
     the whole of it before reaching what they came for. Flex is used only to
     reorder: the floats inside are inert in a flex container, which is what
     the narrow layout already wanted. */
  #body { display: flex; flex-direction: column; padding: 12px 10px 20px; }
  #content { order: 1; margin-left: 0; }
  #sidebar { order: 2; float: none; width: auto; }
  figure.fig { float: none; width: auto; margin-left: 0; margin-right: 0; }
  #masthead { padding: 52px 10px 10px; }
  #masthead .mark { left: 10px; top: 10px; }
  #masthead img { height: 34px; }
  #tabs { padding: 6px 10px 0; }
  #tabs a { padding: 4px 9px; }
  #footer { padding-left: 10px; padding-right: 10px; }
  #page { box-shadow: none; }
  h1 { font-size: 23px; }
  /* Three cards at a third of 375px is 105px of column, which fits no
     sentence. One per row, in the order they are ranked. */
  .routes { grid-template-columns: 1fr; }
  .imgspec dl, .keys { grid-template-columns: 1fr; gap: 1px 0; }
  .imgspec dt, .keys dt { margin-top: 5px; }
}

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