forme.css

/*
 * Forme — the locked-up type every Plausible Venture is printed from.
 *
 * A forme is the assembled type and blocks, clamped in a chase, that a press takes its impression
 * from. Every sheet off it is the same shape; what changes is the ink. That is the arrangement
 * here: this file is the shape, and a venture supplies one colour and its own content.
 *
 * ## The five decisions this file is
 *
 * **Paper and ink, not a UI kit.** One near-white and one near-black, four greys between them, and
 * that is the entire neutral range. There are no elevation levels, no surface tints and no
 * shadows — depth is a hairline, or it is nothing. A page built from this reads as a printed
 * document rather than as a stack of cards, and printed documents are what people trust with
 * dense information.
 *
 * **One spot colour, and it means one thing.** A venture sets `--spot` and nothing else about
 * colour. It marks the live value: the thing being made, the number that moved, the control under
 * the pointer. It is never decoration, never a heading, never a button that does not act. The
 * moment a second meaning is put on it the page stops being readable at a glance, which is the
 * only advantage this palette has.
 *
 * **Everything is mono, and small.** Two families: `--mono` for reading and `--tech` for labels.
 * Interfaces made of numbers should be set in a face where the numbers line up, so
 * `font-variant-numeric: tabular-nums` is on `body` rather than sprinkled about. Body text sits
 * around 0.79rem and labels around 0.66rem — smaller than a web app and about right for a
 * specimen sheet, which is what these pages are.
 *
 * **The work takes the width; the numbers live in a rail.** `.sheet` is that split, and it is the
 * single most load-bearing thing here. The thing being made is never in a modal, never behind a
 * tab, and never smaller than the controls that change it.
 *
 * **The interface explains itself.** `.note`, `.axis__note` and `.lens` exist because a control
 * whose effect you cannot predict is a control you move at random. Prose is not an afterthought
 * bolted to the bottom of these pages; it is half the product.
 *
 * ## What a venture must supply
 *
 *   :root { --spot: #1d6b5b; --spot-lit: #2f9d83; --spot-wash: rgba(29, 107, 91, 0.09); }
 *   @media (prefers-color-scheme: dark) {
 *     :root:not([data-theme='light']) { --spot: #4fbfa3; --spot-lit: #7fd9c2; --spot-wash: rgba(79, 191, 163, 0.11); }
 *   }
 *   :root[data-theme='dark'] { --spot: #4fbfa3; --spot-lit: #7fd9c2; --spot-wash: rgba(79, 191, 163, 0.11); }
 *
 * (The third block only matters if the venture offers a theme toggle. See the tokens below.)
 *
 * Pick a colour that belongs to the subject rather than to a palette: verdigris for a type
 * foundry, because that is what a copper matrix goes when it oxidises; ferric oxide for a sound
 * foundry, because that is the coating on magnetic tape. Then check it twice — it must clear 4.5:1
 * on `--paper` in light and on `--paper` in dark, and those are two different colours.
 */

/* ---------------------------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --paper: #efefec;
  --paper-sunk: #e6e6e2;
  --paper-lift: #f7f7f5;
  --ink: #16181a;
  --rule: #c9c9c3;
  --rule-soft: #dcdcd6;
  --muted: #6e7276;

  /* The venture's own. These are a fallback so an unstyled page is legible rather than invisible;
     override all three. */
  --spot: #a4441c;
  --spot-lit: #c25526;
  --spot-wash: rgba(164, 68, 28, 0.1);

  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tech: 'Martian Mono', 'DM Mono', ui-monospace, monospace;

  --rail: 22rem;
  --gutter: clamp(1rem, 3vw, 2.75rem);
}

/*
 * Dark, in the two places it has to be said.
 *
 * The media query is guarded with `:not([data-theme='light'])` and the attribute rule repeats the
 * values, which is the standard three-block shape: the system preference decides by default, and an
 * explicit `data-theme` on the root wins in *both* directions. Without the guard a venture's
 * "always light" switch would be silently ignored by anybody whose system is dark.
 *
 * A venture that wants no toggle can ignore this entirely and set nothing.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #121312;
    --paper-sunk: #0d0e0d;
    --paper-lift: #1a1c1a;
    --ink: #e8e8e3;
    --rule: #313330;
    --rule-soft: #232522;
    --muted: #868a85;

    --spot: #e0803f;
    --spot-lit: #f09a5c;
    --spot-wash: rgba(224, 128, 63, 0.13);
  }
}

:root[data-theme='dark'] {
  --paper: #121312;
  --paper-sunk: #0d0e0d;
  --paper-lift: #1a1c1a;
  --ink: #e8e8e3;
  --rule: #313330;
  --rule-soft: #232522;
  --muted: #868a85;

  --spot: #e0803f;
  --spot-lit: #f09a5c;
  --spot-wash: rgba(224, 128, 63, 0.13);
}

@font-face {
  font-family: 'Martian Mono';
  src: url('./fonts/martian-mono.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('./fonts/dm-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('./fonts/dm-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* ---------------------------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.55;
  /* On `body` rather than per-component: every one of these pages is mostly numbers, and a column
     of figures that does not line up is a column you cannot compare down. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--spot);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

:focus-visible {
  outline: 2px solid var(--spot);
  outline-offset: 2px;
}

.hidden {
  display: none !important;
}

/* Anything wide — a table, a grid, a diagram — scrolls inside this and not on the page. A document
   that slides sideways on a phone reads as broken. */
.scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.skip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  background: var(--paper);
  padding: 0.6rem 1rem;
  /* Clipped rather than parked at -9999px: an off-screen box is still a box, and on a narrow
     screen it is one more thing that can widen the document. */
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip:focus {
  clip-path: none;
}

/* ---------------------------------------------------------------------------------------------
   Masthead
   --------------------------------------------------------------------------------------------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.6rem 1.35rem;
  flex-wrap: wrap;
  padding: 0.7rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px);
}

.bar__name {
  margin: 0;
  font-family: var(--tech);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.bar__what {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.bar__spacer {
  flex: 1 1 auto;
}

/* A segmented switch between whole rooms of an app. Two or three, never more — past that it is a
   navigation problem and not a switch. */
.rooms {
  display: flex;
  border: 1px solid var(--rule);
}

.rooms button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.34rem 0.95rem;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--muted);
}
.rooms button + button {
  border-left: 1px solid var(--rule);
}
.rooms button[aria-selected='true'] {
  background: var(--ink);
  color: var(--paper);
}

/*
 * A status chip for something the page cannot guarantee — audio that needs a gesture, a device
 * that may be refused, a connection that may drop.
 *
 * Give it a `min-width` if its label changes: a chip that resizes on the first press shifts
 * whatever sits beside it out from under the pointer that pressed it, and the click lands
 * somewhere else. That has happened, and it looks like nothing happening at all.
 */
.state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 0.28rem 0.6rem;
  cursor: pointer;
  background: transparent;
}
.state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.state[data-state='ready'],
.state[data-state='blocked'],
.state[data-state='refused'] {
  color: var(--spot);
  border-color: color-mix(in srgb, var(--spot) 45%, var(--rule));
}

/* A full-width notice under the masthead. For the honest kind: what is wrong and what to check. */
.hush {
  margin: 0;
  padding: 0.55rem var(--gutter) 0.6rem;
  background: var(--spot-wash);
  border-bottom: 1px solid var(--spot);
  color: var(--ink);
  font-size: 0.75rem;
  line-height: 1.55;
}

/* ---------------------------------------------------------------------------------------------
   The sheet: work on the left, numbers in the rail
   --------------------------------------------------------------------------------------------- */

.sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  align-items: start;
}

.work {
  min-width: 0;
  padding: 0 0 5rem;
  border-right: 1px solid var(--rule);
}

.console {
  position: sticky;
  top: 3.1rem;
  max-height: calc(100vh - 3.1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 4rem;
}

@media (max-width: 60rem) {
  .sheet {
    grid-template-columns: minmax(0, 1fr);
  }
  .work {
    border-right: 0;
    padding-bottom: 1rem;
  }
  .console {
    position: static;
    max-height: none;
    border-top: 1px solid var(--rule);
  }
}

/** A section of the work column. */
.block {
  padding: 1.15rem var(--gutter) 1.4rem;
  border-bottom: 1px solid var(--rule-soft);
}

/** A section of the rail. */
.panel {
  padding: 1rem var(--gutter) 1.15rem;
  border-bottom: 1px solid var(--rule-soft);
}

/*
 * Every section is titled the same way: a small hard label, and beside it a quiet line saying what
 * the section is for. The hint is not decoration — it is where the thing gets explained, and a
 * heading without one is usually a heading nobody needed.
 */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0 0 0.75rem;
  font-family: var(--tech);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow__hint {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------------------------
   The stage — whatever is being made
   --------------------------------------------------------------------------------------------- */

.stage {
  position: relative;
  background: var(--paper-sunk);
  border-bottom: 1px solid var(--rule);
}

.stage__id {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem var(--gutter) 0.1rem;
}

.stage__name {
  font-family: var(--tech);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.stage__tag {
  font-size: 0.72rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage__canvas {
  display: block;
  width: 100%;
  height: clamp(8.5rem, 21vh, 13rem);
}

.stage__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem var(--gutter) 0.5rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.7rem;
  color: var(--muted);
}

/* A row of measured facts: `label 12.4 ms`. Build it as `<span>label<b>value</b></span>`. */
.readout {
  display: flex;
  gap: 0.35rem 1.1rem;
  flex-wrap: wrap;
  /* Both of these, and neither is optional. A flex item defaults to a min-width of its own
     max-content, so a long readout pushes the whole document wider than the screen and every phone
     gets a page that slides sideways. */
  min-width: 0;
  flex: 1 1 auto;
}

.readout span {
  display: inline-flex;
  gap: 0.4rem;
}
.readout b {
  font-weight: 500;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------------------------- */

.solid,
.ghost {
  appearance: none;
  cursor: pointer;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ghost:hover {
  border-color: var(--ink);
}

/** The one action a panel is for. At most one per panel, or none of them read as primary. */
.solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  width: 100%;
  font-weight: 500;
}
.solid:hover {
  background: var(--spot);
  border-color: var(--spot);
}

.solid[disabled],
.ghost[disabled] {
  opacity: 0.42;
  cursor: default;
}

.ghost--wide {
  width: 100%;
}
.ghost--tiny {
  padding: 0.16rem 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}

.icon {
  appearance: none;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  line-height: 1;
  padding: 0;
  flex: 0 0 auto;
}
.icon:hover {
  color: var(--spot);
  border-color: var(--spot);
}

.row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.row > * {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------------------------
   Pickers — a closed set of named choices
   --------------------------------------------------------------------------------------------- */

/*
 * Use this where the options have identities worth naming, and a slider where they do not. A
 * picker with a one-line tag on each row teaches the whole set at a glance; a dropdown hides it,
 * and radio buttons make it look like a form.
 */
.picks {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.pick {
  appearance: none;
  border: 0;
  text-align: left;
  background: var(--paper);
  color: inherit;
  cursor: pointer;
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  transition: background 0.12s;
}
.pick:hover {
  background: var(--paper-lift);
}
.pick[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}
.pick[aria-pressed='true'] .pick__tag {
  color: color-mix(in srgb, var(--paper) 62%, transparent);
}

.pick__name {
  font-family: var(--tech);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.pick__tag {
  font-size: 0.68rem;
  color: var(--muted);
  flex: 1 1 auto;
  text-align: right;
}

/* ---------------------------------------------------------------------------------------------
   Controls
   --------------------------------------------------------------------------------------------- */

/*
 * A hairline track and a square thumb. No rounded pill, no fill to the left of the handle, no
 * shadow. It reads as an instrument rather than as a form control, and at this size a pill would
 * be the loudest thing on the page.
 */
input[type='range'] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 1.15rem;
  background: transparent;
  margin: 0.15rem 0 0;
  display: block;
  cursor: ew-resize;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--rule);
}
input[type='range']::-moz-range-track {
  height: 1px;
  background: var(--rule);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 3px;
  height: 0.85rem;
  margin-top: -0.42rem;
  background: var(--spot);
  border: 0;
  border-radius: 0;
}
input[type='range']::-moz-range-thumb {
  width: 3px;
  height: 0.85rem;
  background: var(--spot);
  border: 0;
  border-radius: 0;
}
input[type='range']:disabled::-webkit-slider-thumb {
  background: var(--rule);
}
input[type='range']:disabled::-moz-range-thumb {
  background: var(--rule);
}

/** One named, numbered control. The value is the only coloured thing in the row. */
.axis {
  padding: 0.45rem 0 0.75rem;
  border-bottom: 1px dotted var(--rule-soft);
}
.axis:last-child {
  border-bottom: 0;
}

.axis__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
}

.axis__label {
  font-size: 0.76rem;
}

.axis__value {
  font-size: 0.72rem;
  color: var(--spot);
  font-weight: 500;
}

/* Words at each end of the track. They do more than a number: they say what the axis is *for*. */
.axis__ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.1rem;
}

.axis__note {
  margin: 0.4rem 0 0.1rem;
  font-size: 0.71rem;
  line-height: 1.55;
  color: var(--muted);
}

.axis--lit .axis__label {
  color: var(--spot);
}

/*
 * The lens.
 *
 * Eight controls with a paragraph under each is four screens of rail before anybody reaches the
 * button they came for, and a paragraph already read three times is worse than no paragraph. One
 * pane at the top of the panel says what the control under the pointer does. Its height is
 * reserved rather than fitted, so nothing below it moves when the text changes.
 *
 * Drive it with `createLens()` from the JavaScript side of this package.
 */
.lens {
  min-height: 6.2em;
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rule-soft);
  background: var(--paper-lift);
  font-size: 0.71rem;
  line-height: 1.55;
  color: var(--muted);
}
.lens b {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.72rem;
  margin-bottom: 0.12rem;
}
.lens--idle b {
  color: var(--muted);
}

/** A compact labelled slider for a dense editor: label, track, value, on one line. */
.mini {
  display: grid;
  grid-template-columns: 4.6rem 1fr 3.4rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.16rem 0;
}
.mini__label {
  font-size: 0.68rem;
  color: var(--muted);
}
.mini__value {
  font-size: 0.68rem;
  text-align: right;
  color: var(--spot);
}
.mini input[type='range'] {
  height: 0.9rem;
  margin: 0;
}
/* A stage that is not in the chain at all. The thumb would otherwise read as "turned down". */
.mini input.mini--off {
  opacity: 0.3;
}
.mini__label--optional {
  cursor: pointer;
  text-decoration: underline dotted var(--rule);
  text-underline-offset: 0.2em;
}
.mini__label--optional:hover {
  color: var(--spot);
  text-decoration-color: var(--spot);
}

/* ---------------------------------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------------------------------- */

.field {
  display: block;
  margin-bottom: 0.6rem;
}
.field__label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.2rem;
}
.field__input,
select.field__input {
  width: 100%;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  padding: 0.4rem 0.55rem;
  font-size: 0.8rem;
}

.toggle {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.74rem;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.toggle input {
  accent-color: var(--spot);
  margin: 0;
}

/* ---------------------------------------------------------------------------------------------
   Words
   --------------------------------------------------------------------------------------------- */

/** A caption. One or two sentences under the thing it is about. */
.note {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.62;
  max-width: 62ch;
}

/** Real prose — the colophon, the argument, the part that says how it is made. */
.prose {
  max-width: 66ch;
}
.prose p {
  margin: 0 0 0.85rem;
  font-size: 0.79rem;
  line-height: 1.68;
}
.prose p:last-child {
  margin-bottom: 0;
}
.prose strong {
  font-weight: 500;
  color: var(--spot);
}

/*
 * Two columns once there is room for two measures. A single 66-character column in an
 * eleven-hundred-pixel field reads as a page that failed to fill rather than as a chosen measure,
 * and a colophon is exactly the kind of text a specimen sheet has always set in columns.
 */
@media (min-width: 80rem) {
  .prose {
    max-width: none;
    columns: 2;
    column-gap: clamp(1.75rem, 3.5vw, 3.5rem);
  }
  .prose p {
    break-inside: avoid;
  }
}

/** A numbered argument. `<li><b>01</b><span>…</span></li>`. */
.rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.7rem;
  max-width: 78ch;
}
.rules li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.62;
}
.rules b {
  font-family: var(--tech);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--spot);
  padding-top: 0.12rem;
}

/** A line under an action: what just happened, or what will. */
.status {
  font-size: 0.71rem;
  color: var(--muted);
  margin: 0.55rem 0 0;
  min-height: 1.2em;
}
.status--busy {
  color: var(--spot);
}

/*
 * A verdict box: run the real validator and show what it said.
 *
 * The most valuable thing on either venture that uses it. A tool that tells you your input is
 * wrong *before* you commit to it is a different product from one that fails afterwards, and
 * showing the check passing is most of what makes the failing case believable.
 */
.check {
  border: 1px solid var(--rule);
  padding: 0.55rem 0.7rem;
  font-size: 0.73rem;
  line-height: 1.5;
  background: var(--paper-lift);
}
.check--ok {
  color: var(--muted);
}
.check--bad {
  border-color: var(--spot);
  background: var(--spot-wash);
}
.check ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}
.check li {
  margin-bottom: 0.2rem;
}
.check code {
  color: var(--spot);
}

/** Source you can take away. Give it a copy button; nobody wants to select this by hand. */
.code {
  margin: 0;
  padding: 0.75rem 0.85rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  font-size: 0.72rem;
  line-height: 1.55;
  overflow-x: auto;
  max-height: 22rem;
  white-space: pre;
  tab-size: 2;
}