/* dock.nexagenlabs.com
   One stylesheet, no framework, no build step. Modelled on lab.nexagenlabs.com,
   which inlines the same rules per page; they are shared here instead so that a
   change to the type scale does not have to be made five times.

   Readers arrive by typing an address off a printed page, often on a phone.
   Everything below is sized so that a printed URL stays legible at 320px wide
   and no table forces the page itself to scroll sideways. */

:root { color-scheme: light dark; }

/* One column width on every page. 34rem is about 70 characters per line at the
   16px base size -- measured in the browser, not guessed -- which sits in the
   65-75 that reads comfortably. The previous 42rem measured 87.

   max-width alone does not centre anything; the auto side margins do. They are
   written out rather than folded into a `margin` shorthand so that adding a
   vertical margin later cannot silently drop them. */
body {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 1.1rem 4rem;
  font: 1rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.1rem; margin: 2.2rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.6rem 0 .4rem; }

.sub { margin: 0 0 1.6rem; }
.note { opacity: .8; }

a { color: inherit; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .875em;
}

/* Printed addresses and shell commands must never be broken across a line in a
   way that hides a character, so they wrap only at a boundary that survives
   being retyped. */
code, .url code { overflow-wrap: break-word; }

pre {
  overflow-x: auto;
  padding: .8rem 1rem;
  border: 1px solid currentColor;
  font-size: .875rem;
  line-height: 1.5;
}
pre code { font-size: 1em; }

.start {
  border: 1px solid currentColor;
  padding: .8rem 1rem;
  margin: 1.5rem 0 0;
}
.start p { margin: 0; }

ul { padding-left: 1.2rem; }
li { margin: .25rem 0; }

ul.chapters { list-style: none; padding: 0; margin: 0; }
ul.chapters li { margin: 0 0 1.15rem; }
.name { font-weight: 600; }
.url { display: block; margin-top: .15rem; opacity: .75; }

/* Tables scroll inside their own box rather than widening the page. */
.scroll { overflow-x: auto; }

/* A table that scrolls sideways gives no sign that it does, and on a phone the
   cut-off column is simply invisible. These four backgrounds are the standard
   pure-CSS answer: two covers painted in the page colour and anchored to the
   scrolling content (background-attachment: local), and two shadows anchored to
   the box (scroll). Unscrolled, each cover sits on top of its shadow and hides
   it; scroll, and the cover slides away to reveal the shadow on that side. So
   the shadow appears only on an edge with content beyond it, with no JavaScript
   and no scroll listener.

   Canvas and CanvasText are the system colours the UA already uses for this
   page, so the covers keep matching the background and the shadows stay visible
   under `color-scheme: light dark` without either being written down twice.
   Declared after overflow-x, so a browser that cannot parse color-mix drops
   only the shadows and keeps the scrolling. */
.scroll {
  background:
    linear-gradient(to right, Canvas 30%, rgb(0 0 0 / 0)) left center,
    linear-gradient(to left, Canvas 30%, rgb(0 0 0 / 0)) right center,
    radial-gradient(farthest-side at 0 50%,
      color-mix(in srgb, CanvasText 22%, transparent), rgb(0 0 0 / 0)) left center,
    radial-gradient(farthest-side at 100% 50%,
      color-mix(in srgb, CanvasText 22%, transparent), rgb(0 0 0 / 0)) right center;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, 0.85rem 100%, 0.85rem 100%;
  background-attachment: local, local, scroll, scroll;
}

/* A six-column table does not fit a prose column. Where the viewport has the
   room, let the table's box extend past the text on both sides; below that it
   stays within the column and scrolls inside itself, which is what .scroll is
   for either way. 58rem is comfortably above the 46rem the widened box needs,
   so the box can never reach the edge of the viewport. */
@media (min-width: 58rem) {
  .scroll {
    margin-left: -6rem;
    margin-right: -6rem;
  }
}
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td {
  border: 1px solid currentColor;
  padding: .45rem .6rem;
  text-align: left;
  vertical-align: top;
}
th { font-weight: 600; }
td.empty { text-align: center; opacity: .75; padding: 1.2rem .6rem; }
/* The "checked" column holds a date and should not wrap mid-date. */
td.date, th.date { white-space: nowrap; }

.hub { margin: 1.6rem 0; font-size: 1.05rem; }

footer { margin-top: 3rem; font-size: .9rem; opacity: .8; }