/* The start page and the docs, the look DESIGN.md calls the datasheet, over styles.css's palette. */

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
}

/* Larger than the table's page: a page to read, not a grid to scan. */
.home {
  --small: 0.875rem;
  max-width: var(--page-width);
  margin: 0 auto;
}

.home pre,
.home code {
  font-family: var(--mono);
  font-size: 0.875rem;
}

.home pre {
  margin: 0;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--head);
  line-height: 1.5;
}

.home pre.output {
  border-top: 0;
  background: var(--bg);
  color: var(--muted);
}

/* Draft only: what still waits for its text. */
.todo {
  text-decoration: underline wavy var(--worse);
}

.head {
  padding: 3rem 0 2rem;
}

.kicker {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home h1 {
  margin: 0.25rem 0 0.75rem;
  color: var(--strong);
  font-family: var(--mono);
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.home h1::before {
  content: none;
}

.version {
  margin-left: 0.75rem;
  color: var(--muted);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0;
}

.lede {
  max-width: 38rem;
  margin: 0 0 1.5rem;
  font-size: 1.25rem;
  line-height: 1.45;
}

.home .install {
  display: inline-block;
  padding: 0.5rem 1rem;
}

/* Generated, so a copy of the command leaves it behind. */
.install code::before {
  content: "$ ";
  color: var(--muted);
}

.claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
}

.home a.claim {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.25rem;
  text-decoration: none;
}

.claim + .claim {
  border-left: 1px solid var(--line);
}

.claim-label {
  color: var(--strong);
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.claim-link {
  margin-top: auto;
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--small);
}

.sec {
  margin-top: 3.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--fg);
}

.sec h2,
.manual h2 {
  margin: 0 0 1.25rem;
  color: var(--strong);
  font-family: var(--mono);
  font-size: var(--small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.num {
  margin-right: 1.5ch;
  color: var(--accent);
}

.prose,
.sec > p,
.manual > p,
.manual > ul,
.manual > ol {
  max-width: 40rem;
}

.prose p:first-child {
  margin-top: 0;
}

.more,
.links {
  font-family: var(--mono);
  font-size: var(--small);
}

.links {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.links li + li {
  margin-top: 0.3rem;
}

.standing h3,
.manual h3 {
  margin: 1.5rem 0 0;
  color: var(--strong);
  font-family: var(--mono);
  font-size: inherit;
  font-weight: 600;
}

.standing:first-child h3 {
  margin-top: 0;
}

.standing .machine {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--small);
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  list-style: none;
  cursor: ew-resize;
  /* A sideways drag scales the chart; an upright swipe still scrolls the page. */
  touch-action: pan-y;
  user-select: none;
}

/* The text lies over the fill, so on a bar shorter than its text it runs on past the fill:
   both fills stay light enough for the text on either. */
.bar {
  position: relative;
  padding: 0.15rem 0.6rem;
  white-space: nowrap;
}

.bar-fill {
  --tone: var(--fill);
  --tone-tip: var(--fill-tip);
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 3px;
  background: var(--tone);
}

.bar--ref .bar-fill {
  --tone: var(--fill-ref);
  --tone-tip: var(--accent);
}

/* A bar longer than the room up to the window's right edge darkens towards the edge and ends
   there in an arrow tip. The darkening follows smoothstep, sampled every 0.5rem: a linear
   ramp's abrupt onset shows a light Mach band just before it starts. */
.bar-fill--cut {
  --tip: 1rem;
  background: linear-gradient(
    to right,
    var(--tone) calc(100% - var(--tip) - 3rem),
    color-mix(in srgb, var(--tone-tip) 7.4%, var(--tone)) calc(100% - var(--tip) - 2.5rem),
    color-mix(in srgb, var(--tone-tip) 25.9%, var(--tone)) calc(100% - var(--tip) - 2rem),
    color-mix(in srgb, var(--tone-tip) 50%, var(--tone)) calc(100% - var(--tip) - 1.5rem),
    color-mix(in srgb, var(--tone-tip) 74.1%, var(--tone)) calc(100% - var(--tip) - 1rem),
    color-mix(in srgb, var(--tone-tip) 92.6%, var(--tone)) calc(100% - var(--tip) - 0.5rem),
    var(--tone-tip) calc(100% - var(--tip))
  );
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
}

/* A halo of the page's background, against which the factor's colours are chosen: legible on any
   fill, a cut bar's dark end included. */
.bar-factor {
  text-shadow:
    1px 0 var(--bg),
    -1px 0 var(--bg),
    0 1px var(--bg),
    0 -1px var(--bg),
    1px 1px var(--bg),
    -1px -1px var(--bg),
    1px -1px var(--bg),
    -1px 1px var(--bg);
}

.bar--ref .bar-text {
  color: var(--strong);
}

.bar-text {
  position: relative;
  display: flex;
  gap: 4ch;
  align-items: baseline;
}

/* --name-width is the longest name of the chart: the factors line up in a column. */
.bar-name {
  min-width: var(--name-width);
}

.bar-version {
  color: var(--muted);
  font-size: var(--small);
}

.code {
  margin-top: 1.25rem;
}

/* Scrolls sideways once the tabs outgrow the column. A scroll container clips whatever sticks out of
   it, so the list, not the tab, reaches 1px into the code box: the selected tab's bottom edge, in the
   code's background, covers the box's top border, and the tab opens into the box. --fade is also the
   scroll padding, so a tab scrolled into view stands clear of the fade. */
.tab-list {
  --fade: 2rem;
  display: flex;
  gap: 0.25rem;
  margin-bottom: -1px;
  overflow-x: auto;
  scroll-padding-inline: var(--fade);
  scrollbar-width: none;
}

/* tabs.js names in data-overflow the sides the list hides tabs on. */
.tab-list:is([data-overflow~="start"], [data-overflow~="end"]) {
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--fade-start, 0px),
    #000 calc(100% - var(--fade-end, 0px)),
    transparent
  );
}

.tab-list[data-overflow~="start"] {
  --fade-start: var(--fade);
}

.tab-list[data-overflow~="end"] {
  --fade-end: var(--fade);
}

/* Positioned, to paint over the code box's top border. */
.tab {
  position: relative;
  flex: none;
  padding: 0.35rem 1rem;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.tab:hover {
  color: var(--accent);
}

/* Inside the tab: the list's overflow clips a ring drawn outside it. */
.tab:focus-visible {
  outline-offset: -2px;
}

.tab[aria-selected="true"] {
  border-color: var(--line);
  border-bottom-color: var(--head);
  background: var(--head);
  color: var(--strong);
}

.home figure {
  min-width: 0;
  margin: 0;
}

.home figcaption {
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spec {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--line);
}

.spec dt,
.spec dd {
  margin: 0;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.spec dt,
.manual th {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.origin {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.photo {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, var(--head) 0 6px, var(--bg) 6px 12px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--small);
}

.home .portrait figcaption {
  margin: 0.4rem 0 0;
  letter-spacing: 0;
  text-transform: none;
}

.foot {
  margin-top: 4rem;
  padding-top: 0.75rem;
  border-top: 3px double var(--line);
}

.soon {
  color: var(--muted);
}

.manual {
  padding-top: 2rem;
}

.manual h2 {
  margin-top: 3.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--fg);
}

.manual h3 {
  margin: 2rem 0 0.5rem;
}

/* The table of contents: each section as its heading looks, its subsections under it. */
.toc {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: var(--small);
}

.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc > ul > li {
  margin-top: 0.75rem;
  color: var(--strong);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.toc li li {
  padding-left: 1.5rem;
  color: var(--fg);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.toc a {
  text-decoration: none;
}

.manual pre {
  margin: 1rem 0;
}

/* A table wider than the screen scrolls on its own, not the page. */
.manual table {
  display: block;
  max-width: 100%;
  margin: 1rem 0;
  overflow-x: auto;
  border-collapse: collapse;
}

.manual th,
.manual td {
  padding: 0.4rem 1.5rem 0.4rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

@media (max-width: 48rem) {
  .home {
    padding-inline: 0.5rem;
  }

  .home h1 {
    font-size: 2.5rem;
  }

  .kicker-sep {
    display: none;
  }

  .kicker-langs {
    display: block;
  }

  .claims,
  .spec {
    grid-template-columns: minmax(0, 1fr);
  }

  .claim + .claim {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .spec dt {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .origin {
    display: flow-root;
  }

  .tab {
    padding-inline: 0.5rem;
  }

  .home .portrait {
    float: left;
    width: 7rem;
    margin: 0 1rem 0.5rem 0;
  }
}