/*
 * Tempra design tokens: the one place values live (TEMPRA-8). Take 2 of the design (TEMPRA-53,
 * design/handoff/layout-take-2) set structure and type: neutral greys, a serif for concept bodies,
 * a type scale, radii and one soft shadow. Take 3 (TEMPRA-106, design/handoff/layout-take-3) set
 * the frame's sizes, squarer corners and the one colour allowed before the palette: a small warm
 * dot for an agent's recent change. Take 4 (TEMPRA-113, design/handoff/layout-take-4) set the top
 * bar, the wider sidebar and the panel, and gave the dot a second, pulsing state. The palette
 * (TEMPRA-1) changes values here and both the app and the site follow. Light and dark come from
 * the system through light-dark(), or from the account's theme on the root (data-theme).
 */
:root {
  color-scheme: light dark;

  /* Color: surfaces */
  --tempra-color-bg: light-dark(#ffffff, #1b1b1d); /* the page, panels, pills */
  --tempra-color-ground: light-dark(#f3f3f1, #121214); /* the page under them, inset fills */
  --tempra-color-hover: light-dark(#e9e9e6, #222225);
  --tempra-color-selected: light-dark(#e1e1dd, #2a2a2e);
  --tempra-color-selection: light-dark(#dededa, #3a3a3d);

  /* Color: text, in three steps. Text people read is text or muted, at least 4.5:1 on every
     surface in light and dark (TEMPRA-132; design/contrast.test.ts). Faint is under that: icons,
     rules and disabled controls only, never words. */
  --tempra-color-text: light-dark(#1a1a1b, #ececea);
  --tempra-color-muted: light-dark(#616165, #9a9a9e);
  --tempra-color-faint: light-dark(#a3a3a7, #68686c);

  /* Color: lines */
  --tempra-color-border: light-dark(#e8e8e4, #2a2a2d);
  --tempra-color-border-strong: light-dark(#d2d2ce, #3c3c40);

  /* Focus (TEMPRA-132): a 2px ring in the text colour on every control focused by keyboard
     (:focus-visible), until the palette (TEMPRA-1) designs its own */
  --tempra-focus-ring: 2px solid var(--tempra-color-text);
  --tempra-focus-offset: 2px;

  /* Color: the change dot (the only colour before the palette) */
  --tempra-color-agent: light-dark(#e8722a, #f0884a);

  /* Color: a dimmed page behind a sheet or a full-screen view */
  --tempra-color-scrim: light-dark(rgb(20 20 22 / 0.2), rgb(0 0 0 / 0.5));

  /* Color: the dark frame an attachment is shown on (take 4, board 28), and a mark on it */
  --tempra-color-frame: light-dark(#0e0e0f, #0a0a0b);
  --tempra-color-frame-ink: light-dark(#8a8a8e, #8a8a8e);

  /* Color: links are text, underlined in running text (no colour until the palette) */
  --tempra-color-link: var(--tempra-color-text);
  --tempra-color-link-visited: var(--tempra-color-text);
  --tempra-color-code-bg: var(--tempra-color-ground);

  /* Elevation */
  --tempra-shadow:
    0 1px 2px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.4)),
    0 6px 24px light-dark(rgb(0 0 0 / 0.04), rgb(0 0 0 / 0.35));

  /* Type (TEMPRA-108): the serif is the document; everything else is the app's sans.
     body: all of the app and the site (chrome, view titles, the byline, comments, public pages).
     reader: a concept's own text only (its title, description and .prose body).
     mono: code, fences, the Markdown view, paths and hashes. */
  --tempra-font-body:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Helvetica, sans-serif;
  --tempra-font-reader:
    "Iowan Old Style", "Palatino Linotype", Charter, Georgia, "Times New Roman", serif;
  --tempra-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --tempra-font-size: 14px; /* the app's base text */
  --tempra-measure: 680px; /* the reader's column, with its padding */
  --tempra-measure-reader: 34em; /* concept text: about 66 characters of the reader's serif */

  /* Type scale: the only pixel sizes in the CSS (inside .prose, sizes are em of the reading size) */
  --tempra-text-initial: 9px; /* an avatar's initials */
  --tempra-text-label: 11px; /* uppercase labels, marks */
  --tempra-text-meta: 12px; /* timestamps, crumbs, small print */
  --tempra-text-ui: 13px; /* controls, panels, the tree, comments */
  --tempra-text-name: 15px; /* a library's name, dialog heads, the wordmark */
  --tempra-text-reader: 17px; /* a concept's body and description, the landing page's lede */
  --tempra-text-h2: 22px; /* an attachment's name */
  --tempra-text-page: 28px; /* a view's title (h1); a concept's title on a phone */
  --tempra-text-title: 36px; /* a concept's title */

  /* Weights: three */
  --tempra-weight-regular: 400; /* text */
  --tempra-weight-medium: 500; /* names in rows, a concept's title, the body's h1 and h2 */
  --tempra-weight-strong: 600; /* the sans's headings, section labels, the wordmark */

  /* Leading: three */
  --tempra-leading-tight: 1.2; /* titles and headings */
  --tempra-line-height: 1.5; /* the app's text */
  --tempra-leading-reader: 1.65; /* reading */

  /* Space */
  --tempra-space-1: 0.25rem;
  --tempra-space-2: 0.5rem;
  --tempra-space-3: 1rem;
  --tempra-space-4: 2rem;
  --tempra-gutter: 8px; /* the frame's gutter */
  --tempra-page-pad: 40px; /* a page's side padding in its column */

  /* The frame (take 4): a top bar across the window, the sidebar, one panel beside a concept.
     The breakpoints are 1100px (the panel overlays the page) and 900px (the phone layout); a
     media query cannot read a token, so they are written where they are used. */
  --tempra-topbar: 60px; /* the top bar */
  --tempra-sidebar: 264px; /* the sidebar's width */
  --tempra-panel: 360px; /* a concept's panel (Comments, History, Properties) */
  --tempra-bar: 52px; /* the phone's top bar */
  --tempra-drawer: min(82vw, 360px); /* the phone's drawer: about four fifths of the screen */
  --tempra-sheet: 67dvh; /* a panel as the phone's bottom sheet: about two thirds of the screen */
  --tempra-row: 30px; /* a sidebar row */
  --tempra-touch: 44px; /* the least touch target on a phone */
  --tempra-avatar: 22px;
  --tempra-avatar-small: 20px;
  --tempra-dot: 6px; /* an agent's change, a reader's unverified state */

  /* A concept's columns (take 4): the text, centred; on the right its contents, or a panel */
  --tempra-column-text: 620px;
  --tempra-contents: 200px;
  --tempra-page-width: 760px; /* home, Activity, a folder, the Inbox */

  /* Shape: squarer than take 2 */
  --tempra-radius: 5px; /* code */
  --tempra-radius-mark: 3px;
  --tempra-radius-row: 7px; /* sidebar rows, inputs */
  --tempra-radius-box: 10px; /* cards, list boxes, threads */
  --tempra-radius-card: 10px; /* the public pages' sheet, dialogs */
  --tempra-radius-tile: 6px; /* the library's initial */
  --tempra-radius-pill: 999px;

  /* Motion: the pulse of the change dot while an agent writes */
  --tempra-pulse: 1.6s;
}

/* The account's theme (take 4): the shell puts it on the root; the tokens above follow. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Element defaults for every page of the app and the site; values come from tokens.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--tempra-space-3);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-font-size);
  line-height: var(--tempra-line-height);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--tempra-color-selection);
}

h1 {
  margin: 0 0 var(--tempra-space-3);
  font-size: var(--tempra-text-page);
  font-weight: var(--tempra-weight-medium);
  line-height: var(--tempra-leading-tight);
  letter-spacing: -0.02em;
}

h2 {
  margin: var(--tempra-space-4) 0 var(--tempra-space-2);
  font-size: var(--tempra-font-size);
  font-weight: var(--tempra-weight-strong);
}

h3 {
  font-size: var(--tempra-text-ui);
  font-weight: var(--tempra-weight-strong);
}

a {
  color: var(--tempra-color-link);
  text-decoration: underline;
  text-decoration-color: var(--tempra-color-border-strong);
  text-underline-offset: 2px;
}

a:visited {
  color: var(--tempra-color-link-visited);
}

a:hover {
  text-decoration-color: currentcolor;
}

/* Focus (TEMPRA-132): the ring, 2px in the text colour, on every control reached by keyboard. */
:focus-visible {
  outline: var(--tempra-focus-ring);
  outline-offset: var(--tempra-focus-offset);
}

/* A text field has the same ring, close to its edge. */
input:not([type="checkbox"], [type="radio"], [type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--tempra-focus-ring);
  outline-offset: 1px;
}

code,
pre,
kbd,
samp {
  font-family: var(--tempra-font-mono);
}

code {
  font-size: 0.92em;
}

/* A block of code or a command never widens the page: it scrolls on its own. */
pre {
  max-width: 100%;
  overflow-x: auto;
}

kbd {
  padding: 1px 7px;
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-ground);
  color: var(--tempra-color-muted);
  font-family: inherit;
  font-size: var(--tempra-text-label);
}

hr {
  border: 0;
  border-top: 1px solid var(--tempra-color-border);
}

/* Controls: pills. A plain button is outlined; .primary is the one solid action; .ghost is text.
   A link that acts as a button (Review, Back to current) takes .button and looks the same. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button,
a.button {
  padding: 5px 12px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-bg);
  font-size: var(--tempra-text-ui);
  white-space: nowrap;
  cursor: pointer;
}

a.button {
  display: inline-block;
  color: var(--tempra-color-text);
  line-height: var(--tempra-line-height);
  text-decoration: none;
}

button:hover:not(:disabled),
a.button:hover {
  background: var(--tempra-color-hover);
  color: var(--tempra-color-text);
}

button:disabled {
  cursor: default;
  opacity: 0.5;
}

button.primary,
a.button.primary {
  border-color: var(--tempra-color-text);
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
  font-weight: var(--tempra-weight-medium);
}

button.primary:hover:not(:disabled),
a.button.primary:hover {
  background: var(--tempra-color-text);
  opacity: 0.85;
}

/* A text-only button: a link's look, a button's job. */
button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--tempra-color-muted);
}

input:not([type="checkbox"], [type="radio"], [type="file"]),
select,
textarea {
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid var(--tempra-color-border-strong);
  border-radius: var(--tempra-radius-row);
  background: var(--tempra-color-bg);
  font-size: var(--tempra-text-ui);
}

textarea {
  line-height: var(--tempra-line-height);
}

fieldset {
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
}

/* A form as a column: a label over each field, choices on their own lines, actions last. */
form.stack fieldset {
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

form.stack legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: var(--tempra-weight-medium);
}

.field {
  display: block;
  margin: 10px 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.field input,
.field select {
  display: block;
  width: 100%;
  max-width: 22rem;
  margin-top: 4px;
  color: var(--tempra-color-text);
  font-size: var(--tempra-font-size);
}

.choice {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0;
}

.indent {
  margin: 2px 0 6px 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: var(--tempra-space-1) var(--tempra-space-2);
  text-align: left;
  vertical-align: top;
}

img {
  max-width: 100%;
}

details > summary {
  cursor: pointer;
}

/* Text roles used across pages. */
.muted {
  color: var(--tempra-color-muted);
}

/* Faint is for icons and separators, never words (under 4.5:1; TEMPRA-132). */
.faint {
  color: var(--tempra-color-faint);
}

::placeholder {
  color: var(--tempra-color-muted);
  opacity: 1;
}

/* Who acted (AgentName, TEMPRA-131): the name, then whom an agent acts for, quieter. */
.agent-name > b {
  color: var(--tempra-color-text);
  font-weight: var(--tempra-weight-medium);
}

.agent-for {
  color: var(--tempra-color-muted);
}

.small {
  font-size: var(--tempra-text-meta);
}

/* A form field's hint under it: what it becomes and the format it takes. */
.field-hint {
  display: block;
  margin-top: var(--tempra-space-1);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.warn {
  font-weight: var(--tempra-weight-medium);
}

/* An uppercase label over a group (SOURCES, LINKED FROM). */
.label {
  margin: 0 0 var(--tempra-space-2);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  font-weight: var(--tempra-weight-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A message about the page (saved, an error, a version in the past). */
.notice {
  margin: var(--tempra-space-2) 0;
  padding: 10px 12px;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  font-size: var(--tempra-text-ui);
}

.chip {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid transparent;
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-ground);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  white-space: nowrap;
}

/* Something to act on: in the text colour (no colour until the palette). */
.chip.warn,
.chip.bad {
  color: var(--tempra-color-text);
}

/* Text for screen readers only: what a symbol (a mark, an icon) means. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * How a rendered concept reads (tempra-dev: app/reader, Reading typography): the body of a
 * concept, in the app now and wherever concepts are shown later (the site, inline MCP Apps views).
 * Scoped to .prose. A serif at 17px, about 66 characters to the line, spacing in em so the rhythm
 * scales with the text. Greys, type, spacing and rules only until the palette (TEMPRA-1).
 */
.prose {
  max-width: var(--tempra-measure-reader);
  color: var(--tempra-color-text);
  font-family: var(--tempra-font-reader);
  font-size: var(--tempra-text-reader);
  line-height: var(--tempra-leading-reader);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures;
  /* Figures that sit in running text; tables and markers switch to lining, tabular ones. */
  font-variant-numeric: oldstyle-nums proportional-nums;
  /* Quotes and stops hang into the margin where the browser can (Safari). */
  hanging-punctuation: first allow-end;
  /* A long URL or identifier wraps rather than pushing the column wider; words never break. */
  overflow-wrap: break-word;
  hyphens: manual;
  text-size-adjust: 100%;
}

.prose > :first-child,
.prose > [hidden]:first-child + * {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

/* Vertical rhythm: one step between blocks, in em. */
.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose .table {
  margin: 0 0 1.1em;
}

/* No line ends on a lone short word; headings are balanced across their lines. */
.prose p,
.prose li,
.prose blockquote {
  text-wrap: pretty;
}

.prose strong {
  font-weight: var(--tempra-weight-strong);
}

.prose s {
  color: var(--tempra-color-muted);
}

/* Headings: more space above than below, so each sits with what it introduces. */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin: 1.9em 0 0.5em;
  font-family: var(--tempra-font-reader);
  font-variant-numeric: lining-nums proportional-nums;
  line-height: var(--tempra-leading-tight);
  letter-spacing: -0.005em;
  text-wrap: balance;
  break-after: avoid;
  /* Clear of the cluster when a contents link scrolls to it. */
  scroll-margin-top: 72px;
}

.prose h1 {
  font-size: 1.65em;
  font-weight: var(--tempra-weight-medium);
  letter-spacing: -0.012em;
}

.prose h2 {
  font-size: 1.35em;
  font-weight: var(--tempra-weight-medium);
  letter-spacing: -0.01em;
}

.prose h3 {
  font-size: 1.12em;
  font-weight: var(--tempra-weight-strong);
}

.prose h4,
.prose h5,
.prose h6 {
  margin-top: 1.6em;
  font-size: 1em;
  font-weight: var(--tempra-weight-strong);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
}

.prose h5,
.prose h6 {
  color: var(--tempra-color-muted);
}

/* A heading straight after another needs less room. */
.prose :is(h1, h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) {
  margin-top: 0.7em;
}

/* Links: text-coloured, a thin underline at partial strength that firms up on hover. */
.prose a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-skip-ink: auto;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

/* A link the reader would not follow (an unsafe scheme) reads as text. */
.prose a:not([href]) {
  text-decoration: none;
}

.prose a.broken {
  color: var(--tempra-color-muted);
  text-decoration-line: line-through;
  text-decoration-color: currentColor;
}

/* Lists: muted markers, figures that line up; tight lists close, loose ones like paragraphs. */
.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li {
  margin: 0.2em 0;
}

.prose li::marker {
  color: var(--tempra-color-muted);
  font-variant-numeric: lining-nums tabular-nums;
}

.prose li > p {
  margin: 0;
}

.prose li > :is(ul, ol) {
  margin: 0.2em 0 0;
}

.prose :is(ul, ol).loose > li {
  margin: 0.55em 0;
}

.prose :is(ul, ol).loose > li > p + * {
  margin-top: 0.55em;
}

.prose .tasks {
  padding-left: 0.1em;
  list-style: none;
}

.prose li.task {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.55em;
  align-items: baseline;
}

.prose li.task > :not(input) {
  grid-column: 2;
}

.prose li.task > input {
  margin: 0;
  accent-color: var(--tempra-color-text);
}

/* Blockquotes upright: long italic passages read slowly. */
.prose blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 0 0 0 1.1em;
  border-left: 2px solid var(--tempra-color-border-strong);
  color: var(--tempra-color-muted);
}

.prose blockquote > :last-child {
  margin-bottom: 0;
}

/* Code: the mono a step down, no ligatures; inline on the code grey, blocks scroll sideways. */
.prose code {
  padding: 0.1em 0.35em;
  border-radius: var(--tempra-radius);
  background: var(--tempra-color-code-bg);
  font-family: var(--tempra-font-mono);
  font-size: 0.86em;
  font-variant-ligatures: none;
  font-variant-numeric: normal;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.prose pre {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 14px 18px;
  border-radius: var(--tempra-radius-row);
  background: var(--tempra-color-code-bg);
  font-family: var(--tempra-font-mono);
  font-size: 0.8em;
  font-variant-ligatures: none;
  line-height: var(--tempra-line-height);
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
}

.prose pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
}

/* The fence's language, quietly above the code (generated content: not part of the text). */
.prose pre[data-lang] {
  padding-top: 32px;
}

.prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  left: 18px;
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-text-label);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* What the reader shows as its markdown (raw HTML, reference links): quieter than code. */
.prose pre.raw,
.prose code.raw {
  color: var(--tempra-color-muted);
}

/*
 * Tables: real tables in their own scroll container, so a wide one scrolls sideways (on a phone
 * too) instead of breaking words. A table fills the column in a hairline box, with a light header
 * row on the ground grey and rules between rows, none between columns (take 3, Figures).
 */
.prose .table {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tempra-font-body);
  font-size: 0.82em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: var(--tempra-line-height);
}

.prose th,
.prose td {
  padding: 0.6em 0.9em;
  border: 0;
  border-bottom: 1px solid var(--tempra-color-border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: pretty;
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose th {
  background: var(--tempra-color-ground);
  font-weight: var(--tempra-weight-medium);
  vertical-align: bottom;
}

.prose td code,
.prose th code {
  background: none;
  padding: 0;
}

.prose [data-align="center"] {
  text-align: center;
}

.prose [data-align="right"] {
  text-align: right;
}

.prose hr {
  margin: 2.2em 0;
  border: 0;
  border-top: 1px solid var(--tempra-color-border);
}

/* An image in running text stays in the line, no taller than the column is wide. */
.prose img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

.prose .image-dropped,
.prose .image-broken {
  color: var(--tempra-color-muted);
  font-style: italic;
}

.prose .image-broken {
  padding: 0 0.3em;
  border: 1px dashed var(--tempra-color-border-strong);
  border-radius: var(--tempra-radius);
}

/*
 * Figures (take 3, Figures): an image alone in its paragraph, or a diagram, with a caption
 * beneath: "Figure n." a step darker, then the image's title or alt text, in the UI face.
 */
.prose figure {
  margin: 1.6em 0;
}

.prose figure.figure > p {
  margin: 0;
}

.prose .figure-media {
  display: block;
}

.prose .figure-media img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--tempra-radius-box);
}

/* The image is the button that enlarges it: no button look, a focus ring when reached by keys. */
.prose .figure-open {
  display: block;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--tempra-radius-box);
  background: none;
  cursor: zoom-in;
}

.prose .figure-open:hover:not(:disabled) {
  background: none;
}

.prose .figure-open:focus-visible {
  outline: var(--tempra-focus-ring);
  outline-offset: 3px;
}

.prose figcaption {
  margin-top: 8px;
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-text-meta);
  line-height: var(--tempra-line-height);
  text-wrap: pretty;
  user-select: none;
}

.prose .figure-number {
  color: var(--tempra-color-text);
  font-weight: var(--tempra-weight-medium);
}

/* An image that can't be shown: a dashed box where it would be, saying so, its path and alt. */
.figure-broken {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 12rem;
  padding: 24px;
  border: 1px dashed var(--tempra-color-border-strong);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-text-meta);
  font-style: normal;
  line-height: var(--tempra-line-height);
  text-align: center;
  overflow-wrap: anywhere;
}

.figure-broken svg {
  margin-bottom: 4px;
  color: var(--tempra-color-faint);
}

.figure-broken .figure-broken-title {
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
}

/* Footnote markers: a source's number, small and muted, joined to its word. */
.prose sup.fnref {
  margin-left: 0.08em;
  color: var(--tempra-color-muted);
  font-size: 0.68em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 0;
  vertical-align: super;
  white-space: nowrap;
}

.prose sup.fnref a {
  padding: 0 0.12em;
  color: inherit;
  text-decoration: none;
}

.prose sup.fnref a:hover {
  text-decoration: underline;
}

/* Changes in the text (review mode, a version chosen in History): insertions underlined on a
   grey ground, deletions struck through in grey; the changed block's rule is concept.css's. */
.prose ins.diff-added {
  background: var(--tempra-color-ground);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.prose del.diff-removed {
  color: var(--tempra-color-muted);
  text-decoration: line-through;
}

/*
 * What sits around a concept body in the reader (tempra-dev: app/reader): the hover cards and the
 * selection toolbar (popovers in the top layer, placed by the app through --float-x and
 * --float-y), comment highlights (the CSS Custom Highlight API), the threads in the Comments
 * panel and the stored Markdown view. Lines and greys only (no colour until TEMPRA-1).
 */

/* A popover: placed at the coordinates the app gives it, never where the browser centres one. */
.floating {
  position: fixed;
  inset: auto;
  top: var(--float-y, 0);
  left: var(--float-x, 0);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: visible;
}

/* Hover cards over footnote markers and links. */
.tooltip {
  max-width: 22rem;
  padding: 8px 12px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  color: var(--tempra-color-text);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-line-height);
  text-wrap: pretty;
}

.tooltip p {
  margin: 0;
}

.tooltip p + p {
  margin-top: 0.4em;
}

/*
 * Comments (TEMPRA-13). A thread's quote is underlined in the body (dotted); the one whose thread
 * is open in the Comments panel is filled grey and underlined solid; a comment being written
 * fills its text with the selection grey. Drawn as
 * highlights, so the body's DOM never changes for them.
 */
::highlight(tempra-comment) {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

::highlight(tempra-comment-active) {
  background-color: var(--tempra-color-hover);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

::highlight(tempra-comment-draft) {
  background-color: var(--tempra-color-selected);
}

/* The selection toolbar: a pill above the selected text. */
.selection-tools > div {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  font-family: var(--tempra-font-body);
}

.selection-tools button {
  padding: 4px 12px;
  border: 0;
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
  font-size: var(--tempra-text-meta);
  font-weight: var(--tempra-weight-medium);
}

.selection-tools button:hover:not(:disabled) {
  background: var(--tempra-color-text);
  opacity: 0.85;
}

/* A footnote's own text in the Sources section and a marker's card. */
.note > p {
  margin: 0;
}

.note > p + * {
  margin-top: 0.4em;
}

/*
 * Diagrams (tempra-dev: app/diagrams): Pele's SVG themed through its custom properties, greys only
 * until the palette (TEMPRA-1), so dark mode follows the tokens. Colours an author sets in the
 * diagram are content and stay. In the body it sits in a quiet frame (take 3, Figures) with Source
 * and Enlarge in its corner, and scrolls sideways when it cannot shrink to the column; the
 * full-screen view draws it again with the same theme.
 */
.prose figure.diagram,
.lightbox {
  --pele-bg: var(--tempra-color-bg);
  --pele-fg: var(--tempra-color-text);
  --pele-muted: var(--tempra-color-muted);
  --pele-line: var(--tempra-color-muted);
  --pele-surface: var(--tempra-color-ground);
  --pele-surface-alt: var(--tempra-color-hover);
  --pele-border: var(--tempra-color-border-strong);
  --pele-accent: var(--tempra-color-text);
  --pele-font: var(--tempra-font-body);
  --pele-font-mono: var(--tempra-font-mono);
  --pele-radius: var(--tempra-radius-row);
  --pele-series-1: var(--tempra-color-text);
  --pele-series-2: var(--tempra-color-muted);
  --pele-series-3: var(--tempra-color-faint);
  --pele-series-4: var(--tempra-color-border-strong);
  --pele-series-5: var(--tempra-color-selection);
  --pele-series-6: var(--tempra-color-selected);
  --pele-series-7: var(--tempra-color-hover);
  --pele-series-8: var(--tempra-color-ground);
}

.prose figure.diagram {
  margin: 1.6em 0;
}

.prose .diagram-frame {
  position: relative;
  padding: 40px 20px 20px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
}

.prose .diagram-svg {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-text-ui);
}

.prose .diagram-svg svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.prose .diagram-frame pre.diagram-source {
  margin: 0;
}

/* Source and Enlarge: small grey pills in the frame's corner. */
.prose .figure-tools {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 2px;
  font-family: var(--tempra-font-body);
}

.prose .figure-tools button {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 10px;
  border: 0;
  background: var(--tempra-color-ground);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  line-height: 1;
}

.prose .figure-tools button:hover:not(:disabled),
.prose .figure-tools button[aria-pressed="true"] {
  background: var(--tempra-color-hover);
  color: var(--tempra-color-text);
}

.prose .figure-tools .figure-enlarge {
  padding: 0;
}

.prose figure.diagram.failed pre {
  margin: 0;
}

.prose .diagram-notice {
  margin: 6px 0 0;
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-text-meta);
}

/* On a touch screen the corner controls are full-size targets. */
@media (pointer: coarse) {
  .prose .diagram-frame {
    padding-top: 60px;
  }

  .prose .figure-tools {
    top: 6px;
    right: 6px;
  }

  .prose .figure-tools button {
    min-width: var(--tempra-touch);
    height: var(--tempra-touch);
    font-size: var(--tempra-text-meta);
  }
}

/*
 * The full-screen view of a figure (take 3, Lightbox): a modal dialog over the app on the ground
 * colour. A header (where, "Figure n of m", Open original and Download as pills, close), the
 * figure as large as fits between previous and next, and beneath it the caption and a quiet line.
 */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--tempra-color-ground);
  color: var(--tempra-color-text);
  font-family: var(--tempra-font-body);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-line-height);
  overflow: hidden;
}

.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.lightbox::backdrop {
  background: var(--tempra-color-ground);
}

.lightbox-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 16px 20px;
}

.lightbox-where {
  color: var(--tempra-color-muted);
}

.lightbox-where::after {
  content: "·";
  margin-left: 12px;
  color: var(--tempra-color-faint);
}

.lightbox-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.lightbox-actions a {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
  text-decoration: none;
  white-space: nowrap;
}

.lightbox-actions a:hover {
  background: var(--tempra-color-hover);
}

.lightbox-round {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
}

.lightbox-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 0;
  padding: 0 20px;
}

.lightbox-stage .lightbox-prev,
.lightbox-stage .lightbox-next {
  width: var(--tempra-touch);
  height: var(--tempra-touch);
}

.lightbox-prev {
  grid-column: 1;
}

.lightbox-figure {
  display: grid;
  grid-column: 2;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.lightbox-next {
  grid-column: 3;
}

.lightbox-figure > img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--tempra-radius-card);
  box-shadow: var(--tempra-shadow);
}

.lightbox-figure > .figure-broken {
  width: min(100%, 32rem);
}

.lightbox-diagram {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 24px;
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  font-size: var(--tempra-text-ui);
}

.lightbox-diagram svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lightbox-source {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
  font-family: var(--tempra-font-mono);
  font-size: var(--tempra-text-ui);
}

.lightbox-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 20px 26px;
  text-align: center;
}

.lightbox-caption {
  max-width: var(--tempra-measure);
  margin: 0;
  font-size: var(--tempra-text-name);
  text-wrap: pretty;
}

.lightbox-facts {
  max-width: var(--tempra-measure);
  margin: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  overflow-wrap: anywhere;
}

.lightbox-facts > span + span::before {
  content: " · ";
}

/* A phone: smaller gutters, 44px targets, no keyboard hint. */
@media (max-width: 600px) {
  .lightbox-head {
    padding: 8px 12px;
  }

  .lightbox-where {
    display: none;
  }

  .lightbox-actions a {
    min-height: var(--tempra-touch);
    padding: 0 14px;
  }

  .lightbox-round {
    width: var(--tempra-touch);
    height: var(--tempra-touch);
  }

  .lightbox-stage {
    gap: 4px;
    padding: 0 4px;
  }

  .lightbox-foot {
    padding: 12px 16px 20px;
  }

  .lightbox-hint {
    display: none;
  }
}

/*
 * The app's frame (TEMPRA-19; take 2 in TEMPRA-53, take 3 in TEMPRA-106, take 4 in TEMPRA-113;
 * tempra-dev: app/workspace). A docs-site layout: a top bar across the window, split at the
 * sidebar's edge (the mark, the library switcher and search over the sidebar; the crumbs, the
 * page's tools, the bell and the avatar over the page), a navigation sidebar with a hairline on
 * its right, and the page as a flat column: no ground, no sheet. The sidebar can be hidden; under
 * 900px it is a drawer behind a top bar. Library settings and the account's pages use the same
 * frame with a sidebar of their own. A concept's own layout is in concept.css; the person's views
 * (home, Activity, a folder) in views.css.
 */
body:has(> #root),
body.ground {
  padding: 0;
  background: var(--tempra-color-bg);
}

/* ---------- Shared pieces: menus, the avatar, icon buttons ---------- */

/* A menu: a button that opens a card of links below it. */
.menu {
  position: relative;
}

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--tempra-color-muted);
}

.menu-button .caret {
  display: inline-flex;
  color: var(--tempra-color-faint);
}

.menu-list {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 13rem;
  max-height: 70vh;
  overflow: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  list-style: none;
  font-size: var(--tempra-text-ui);
}

.menu-list.start {
  left: 0;
}

.menu-list.end {
  right: 0;
}

/* A menu at the foot of the sidebar opens upwards. */
.menu-list.up {
  top: auto;
  bottom: calc(100% + 6px);
}

.menu-list a,
.menu-list button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--tempra-radius-row);
  background: none;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
  text-align: left;
  text-decoration: none;
}

.menu-list a:hover,
.menu-list button:hover:not(:disabled),
.menu-list a[aria-current="page"] {
  background: var(--tempra-color-hover);
}

.menu-list .menu-note {
  padding: 6px 10px 2px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-list hr {
  width: 100%;
  margin: 4px 0;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tempra-color-selected);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-initial);
  font-weight: var(--tempra-weight-strong);
}

/* A round button holding one 16px glyph. */
.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tempra-color-muted);
}

.icon-button[aria-pressed="true"],
.icon-button[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
}

.icon-button svg {
  display: block;
}

.icon-button:hover:not(:disabled) {
  color: var(--tempra-color-text);
}

/* A button with a glyph and a short word or count beside it (the comments toggle). */
.icon-button.with-count {
  gap: 6px;
  width: auto;
  padding: 0 10px;
  border-radius: var(--tempra-radius-row);
  font-size: var(--tempra-text-meta);
  font-variant-numeric: tabular-nums;
}

.icon-button.with-count[aria-pressed="true"],
.icon-button.with-count[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--tempra-color-selected);
  color: var(--tempra-color-text);
}

/* The change dot (the one colour): solid for changed since the person looked, pulsing (.live)
   for an agent writing now. */
.change-dot {
  display: inline-block;
  width: var(--tempra-dot);
  height: var(--tempra-dot);
  border-radius: 50%;
  background: var(--tempra-color-agent);
  vertical-align: middle;
}

/* Someone's initials in a small round mark: a person on a light fill, an agent on ink. */
.avatar-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--tempra-avatar);
  height: var(--tempra-avatar);
  border-radius: 50%;
  background: var(--tempra-color-selected);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-initial);
  font-weight: var(--tempra-weight-strong);
  line-height: 1;
}

.avatar-mark.agent {
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
}

/* A dialog (a concept's properties, its agent notes, all its versions): a card in the top layer. */
.dialog {
  width: min(32rem, calc(100vw - 32px));
  max-height: min(80dvh, 44rem);
  padding: 0;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  color: var(--tempra-color-text);
}

.dialog.wide {
  width: min(40rem, calc(100vw - 32px));
}

.dialog::backdrop {
  background: var(--tempra-color-scrim);
}

.dialog-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 6px 18px;
  background: var(--tempra-color-bg);
}

.dialog-head h2 {
  margin: 0;
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
}

.dialog-body {
  padding: 4px 18px 18px;
  font-size: var(--tempra-text-ui);
}

/* A confirmation: what happens, then the action and Cancel. */
.confirm-body p {
  margin: 0 0 var(--tempra-space-2);
}

/* ---------- A page's column: the account's pages, settings, the library's tools ---------- */

/* One centred column; the frame's top bar and sidebar are around it. */
.page-column,
.page {
  width: 100%;
  max-width: var(--tempra-page-width);
  margin: 0 auto;
  padding: 72px var(--tempra-page-pad) 96px;
}

.page-column.wide {
  max-width: 960px;
}

/* The New pill: an outlined pill with a plus. */
.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
}

.page-foot {
  margin: 32px 0 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.page-foot a {
  color: inherit;
}

/* The library list (take 4, board 01): cards under Yours and Shared with you. Each card has a
   quiet cover (the library's tile; an agent's latest change at the right), then its name, what
   is for the person there, its description and one line of facts. */
.lib-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 var(--tempra-space-4);
  padding: 0;
  list-style: none;
}

.lib-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  color: var(--tempra-color-text);
  text-decoration: none;
  overflow: hidden;
}

.lib-card:visited {
  color: var(--tempra-color-text);
}

.lib-card:hover {
  border-color: var(--tempra-color-border-strong);
}

.lib-card-cover {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 112px;
  padding: 16px;
  background: var(--tempra-color-ground);
}

.lib-card-cover .lib-tile {
  width: 28px;
  height: 28px;
}

.lib-card-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.lib-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
}

.lib-card-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-medium);
}

.lib-card-for {
  flex: none;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-weight: var(--tempra-weight-regular);
}

.lib-card-desc {
  margin: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.lib-card-meta {
  margin: 4px 0 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

/* A section of the list (Yours, Shared with you). */
.lib-section-title {
  margin: 0 0 12px;
  font-size: var(--tempra-text-reader);
  font-weight: var(--tempra-weight-strong);
}

/* ---------- The workspace: the top bar, the sidebar, the page ---------- */

.workspace {
  display: grid;
  grid-template-columns: var(--tempra-sidebar) minmax(0, 1fr);
  grid-template-rows: var(--tempra-topbar) minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
  height: 100dvh;
}

.workspace.sidebar-hidden {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "topbar"
    "main";
}

/* The top bar: across the whole window, a hairline under it, split at the sidebar's edge. */
.ws-topbar {
  grid-area: topbar;
  display: grid;
  grid-template-columns: var(--tempra-sidebar) minmax(0, 1fr);
  min-width: 0;
  border-bottom: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
}

.sidebar-hidden .ws-topbar {
  grid-template-columns: auto minmax(0, 1fr);
}

/* Over the sidebar: the mark, the library switcher (or the frame's name), search. */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px 0 16px;
  border-right: 1px solid var(--tempra-color-border);
}

.topbar-brand .lib-tile {
  width: 28px;
  height: 28px;
}

/* A hairline between the mark and the name. */
.topbar-brand .brand-sep {
  width: 1px;
  height: 20px;
  margin: 0 2px;
  background: var(--tempra-color-border);
}

/* The frame's name where there is no library to switch: Tempra, Settings, Library settings. */
.topbar-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-name:visited {
  color: var(--tempra-color-text);
}

/* The library switcher: the library's name and a chevron, in a quiet pill. */
.lib-switch {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--tempra-radius-row);
  background: transparent;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
  text-align: left;
}

.lib-switch:hover:not(:disabled),
.lib-switch[aria-expanded="true"] {
  background: var(--tempra-color-hover);
}

.lib-switch .lib-name {
  flex: 1;
  min-width: 0;
}

.lib-switch svg {
  flex: none;
  color: var(--tempra-color-faint);
}

/* The round search button, at the brand's right. */
.search-button {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--tempra-color-border);
  border-radius: 50%;
  background: var(--tempra-color-bg);
}

/* Over the page: the way back to the sidebar when it is hidden, the crumbs, then the page's
   tools, the bell and the avatar. */
.topbar-page {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 16px 0 20px;
}

.topbar-crumbs {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* The page's tools (a concept's Comments, Copy page and ⋯), from the page itself. */
.topbar-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.topbar-tools:empty {
  display: none;
}

.topbar-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

/* The crumbs in the top bar: the folders, then the page, in the app's text size. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-font-size);
}

.crumbs a {
  color: inherit;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--tempra-color-text);
}

.crumbs .here {
  color: var(--tempra-color-text);
  font-weight: var(--tempra-weight-medium);
}

/* A control in the top bar that reads as a pill: Comments n, Copy page. */
.topbar-tools .icon-button.with-count,
.tool-pill {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
}

.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar-tools .icon-button:not(.with-count),
.topbar-end .icon-button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--tempra-color-border);
  border-radius: 50%;
  color: var(--tempra-color-text);
}

.topbar-tools .icon-button.with-count[aria-pressed="true"],
.topbar-tools .icon-button.with-count[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--tempra-color-selected);
  color: var(--tempra-color-text);
}

/* The bell: the Inbox and its unread count as a small badge on the button's corner. */
.bell .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
  font-size: var(--tempra-text-initial);
  font-weight: var(--tempra-weight-strong);
  line-height: 1;
}

/* The bell's popover: the latest few items, Mark all read above, Open inbox below. */
.bell-pop {
  width: min(360px, calc(100vw - 32px));
  padding: 0;
}

.bell-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--tempra-color-border);
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
}

.bell-pop-head button {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
  font-weight: var(--tempra-weight-regular);
}

.bell-pop-head button:hover:not(:disabled) {
  color: var(--tempra-color-text);
}

.menu-list .bell-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--tempra-color-border);
  border-radius: 0;
}

.bell-item .lib-tile {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  font-size: var(--tempra-text-label);
}

.bell-item-what {
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
}

.bell-item-what strong {
  font-weight: var(--tempra-weight-medium);
}

/* The Inbox row's detail line, under the page's title (F-14). */
.bell-item-detail {
  display: block;
  color: var(--tempra-color-muted);
}

.bell-item-where {
  grid-column: 2;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.bell-item .unread-dot {
  grid-column: 3;
  grid-row: span 2;
  align-self: center;
  width: var(--tempra-dot);
  height: var(--tempra-dot);
  border-radius: 50%;
  background: var(--tempra-color-text);
}

.menu-list .bell-foot {
  padding: 10px 16px;
  border-radius: 0;
  color: var(--tempra-color-muted);
  text-align: center;
}

.menu-list .bell-empty {
  padding: 24px 16px;
  color: var(--tempra-color-muted);
  text-align: center;
}

.menu-list .bell-empty button {
  width: auto;
  margin-left: var(--tempra-space-1);
}

/* Live updates stopped, quietly (F-19): a word before search and the bell; empty, nothing. */
.feed-status {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

.feed-status:empty {
  display: none;
}

/* The avatar's menu: who, then the pages, the theme, sign out, each with its glyph. */
.menu-list.account {
  min-width: 15rem;
}

.menu-list .menu-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
  color: var(--tempra-color-text);
}

.menu-person .avatar-mark {
  width: 32px;
  height: 32px;
  font-size: var(--tempra-text-label);
}

.menu-person-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--tempra-leading-tight);
}

.menu-person-names .email {
  overflow-wrap: anywhere;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.menu-list a.menu-item,
.menu-list button.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu-item svg {
  flex: none;
  color: var(--tempra-color-muted);
}

/* The theme row: its name, then System, Light, Dark as one small segmented control. */
.menu-list .menu-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  font-size: var(--tempra-text-ui);
}

.menu-theme svg {
  flex: none;
  color: var(--tempra-color-muted);
}

.menu-theme .segmented {
  margin-left: auto;
}

.menu-theme .segmented button {
  padding: 2px 8px;
  font-size: var(--tempra-text-meta);
}

/* The library switcher's menu: libraries as rows with their tile and, when shared, the role. */
.menu-list.libraries {
  min-width: 17rem;
}

.menu-list a.menu-lib {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 0 10px;
  align-items: center;
  padding: 6px 10px;
}

.menu-lib .lib-tile {
  grid-row: span 2;
  width: 20px;
  height: 20px;
  font-size: var(--tempra-text-label);
}

.menu-lib .menu-lib-role {
  grid-column: 2;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.menu-lib .menu-lib-check {
  grid-column: 3;
  grid-row: span 2;
  display: inline-flex;
  color: var(--tempra-color-muted);
}

/* The sidebar: a hairline on its right; the views, a rule, the files (which scroll), and
   Settings at its foot. A settings frame holds a way back and its tabs instead. */
.ws-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  padding: 12px 10px;
  border-right: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
  font-size: var(--tempra-text-ui);
}

.ws-sidebar[hidden] {
  display: none;
}

.sidebar-rule {
  margin: 10px 8px;
}

.sidebar-label {
  margin: 14px 10px 4px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: 16px;
}

.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}

/* The way back at the top of a settings sidebar: "‹ Back to tempra-dev". */
.nav-row.back {
  margin-bottom: 14px;
  color: var(--tempra-color-muted);
}

.nav-row.back:hover {
  color: var(--tempra-color-text);
}

/* A library in the account's sidebar: its tile, its name, what is for the person there. */
.nav-row .lib-tile {
  width: 20px;
  height: 20px;
  font-size: var(--tempra-text-label);
}

.nav-row .lib-tile.shared {
  border-radius: 50%;
  background: var(--tempra-color-muted);
}

/* The page: the frame's scroller. Its width, not the window's, decides a concept's columns
   (container queries on `page`, in concept.css), so hiding the
   sidebar widens the reading layout. */
.ws-main {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow: hidden auto;
  background: var(--tempra-color-bg);
  container: page / inline-size;
}

/* Showing the hidden sidebar: a quiet glyph at the left of the crumbs. */
.show-sidebar {
  flex: none;
  color: var(--tempra-color-muted);
}

/* The change dot's second state (take 4): pulsing while an agent writes. */
.change-dot.live {
  background: var(--tempra-color-agent);
  animation: tempra-pulse var(--tempra-pulse) ease-in-out infinite;
}

@keyframes tempra-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .change-dot.live {
    animation: none;
  }
}

.lib-tile,
.wordmark-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--tempra-radius-tile);
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
}

.lib-name {
  overflow: hidden;
  font-weight: var(--tempra-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A row in the sidebar: a glyph, a name, a count or mark at the end. */
.nav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tempra-row);
  padding: 4px 10px;
  border: 0;
  border-radius: var(--tempra-radius-row);
  background: transparent;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
  text-align: left;
  text-decoration: none;
}

.nav-row:visited {
  color: var(--tempra-color-text);
}

.nav-row:hover,
.nav-row:hover:not(:disabled) {
  background: var(--tempra-color-hover);
  color: var(--tempra-color-text);
}

.nav-row[aria-current="page"],
.nav-row[aria-current="location"] {
  background: var(--tempra-color-selected);
  font-weight: var(--tempra-weight-medium);
}

.nav-row svg {
  flex: none;
}

.nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-count {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-variant-numeric: tabular-nums;
}

.nav-row.person {
  padding-left: 8px;
}

.nav-row.person .avatar-mark {
  margin-right: 0;
}

/* The tree: nested lists, one row per folder or file, indented a step a level. A folder's row is
   its chevron (a button that opens and closes it, turning), its name (a link to its folder view)
   and its count of concepts; a page's or a file's row is a link, a file's with a small icon. */
.tree,
.tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tree ul {
  padding-left: 12px;
}

.tree li {
  margin: 0;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tempra-row);
  margin-bottom: 1px;
  padding: 0 10px 0 4px;
  border-radius: var(--tempra-radius-row);
  font-size: var(--tempra-text-ui);
  white-space: nowrap;
}

.tree-row:hover {
  background: var(--tempra-color-hover);
}

.tree-chevron {
  flex: none;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 16px;
  padding: 0;
  border: 0;
  border-radius: var(--tempra-radius-row);
  background: none;
  color: var(--tempra-color-faint);
  cursor: pointer;
}

.tree-chevron:hover {
  color: var(--tempra-color-text);
}

.tree-chevron svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}

.tree-chevron[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .tree-chevron svg {
    transition: none;
  }
}

.tree-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-count {
  flex: none;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  font-variant-numeric: tabular-nums;
}

.tree-row > a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--tempra-color-muted);
  text-decoration: none;
  text-overflow: ellipsis;
}

.tree-row:has(> [aria-current="page"]) {
  background: var(--tempra-color-selected);
}

.tree-row.dir > a {
  color: var(--tempra-color-text);
}

.tree-row > a[aria-current="page"] {
  color: var(--tempra-color-text);
  font-weight: var(--tempra-weight-medium);
}

.tree-leaf {
  flex: none;
  display: flex;
  justify-content: center;
  width: 16px;
  color: var(--tempra-color-faint);
}

/* Marks: an agent's change (a dot), open comments (a count), a clock (stale) or an hourglass
   (stale soon). */
.tree-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  font-variant-numeric: tabular-nums;
}

.tree-note {
  padding: 4px 10px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

/* ---------- The quick switcher ---------- */

.switcher {
  width: min(36rem, 90vw);
  padding: 12px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  color: var(--tempra-color-text);
}

.switcher::backdrop {
  background: var(--tempra-color-scrim);
}

.switcher-head input {
  width: 100%;
  border-radius: var(--tempra-radius-pill);
}

.switcher [role="listbox"] {
  margin-top: var(--tempra-space-2);
}

.switcher [role="option"] {
  padding: 6px 10px;
  border-radius: var(--tempra-radius-row);
  cursor: pointer;
}

.switcher [role="option"][aria-selected="true"] {
  background: var(--tempra-color-selected);
}

/* Searching…, No results, or that search did not answer (F-12); empty, it takes no room. */
.switcher-status {
  margin: var(--tempra-space-2) 10px 0;
}

.switcher-status:empty {
  display: none;
}

/* ---------- A phone: a top bar, the sidebar as a drawer (take 4, boards 33 to 36) ---------- */

/* The phone's pieces of the top bar (the menu button, where the person is, search), of the
   drawer (its head, its search field, the Inbox row at its foot) and the dimmed page behind it
   show only here. */
.ws-menu,
.ws-topbar-place,
.phone-search,
.drawer-head,
.drawer-search,
.ws-scrim,
.phone-only {
  display: none;
}

@media (max-width: 900px) {
  .workspace,
  .workspace.sidebar-hidden {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--tempra-bar) minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "main";
  }

  /* The bar: the menu button, where the person is, then on a concept Comments n and ⋯, on
     other pages search and the bell; the avatar last. */
  .ws-topbar,
  .sidebar-hidden .ws-topbar {
    display: flex;
    align-items: center;
    padding: 0 12px 0 6px;
  }

  .topbar-brand,
  .topbar-crumbs,
  .show-sidebar,
  .has-tools .topbar-end .bell,
  .has-tools .phone-search {
    display: none;
  }

  .topbar-page {
    flex: 1;
    gap: 8px;
    padding: 0;
  }

  /* The way to everything else, in ink so it reads as the bar's first control. */
  .ws-menu {
    display: inline-flex;
    flex: none;
    color: var(--tempra-color-text);
  }

  .phone-search {
    display: inline-flex;
  }

  .nav-row.phone-only {
    display: flex;
  }

  /* Where the person is: the library on its home, a page by its name, a concept by its title. */
  .ws-topbar-place {
    display: block;
    flex: 1;
    min-width: 0;
    padding: 0 4px;
    overflow: hidden;
    color: var(--tempra-color-text);
    font-size: var(--tempra-text-name);
    font-weight: var(--tempra-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The bar's controls keep their desktop shape; each answers a 44px touch around it. */
  .topbar-page .icon-button::after,
  .topbar-page .avatar::after {
    content: "";
    position: absolute;
    inset: min(0px, calc((100% - var(--tempra-touch)) / 2));
  }

  .topbar-page .avatar {
    position: relative;
    width: 36px;
    height: 36px;
  }

  /* The drawer (board 34): about four fifths of the screen, over the top bar, the page dimmed
     behind it. At its head the mark, the switcher and ×; then search, Home, Activity, a rule,
     the tree; Settings and the Inbox at its foot. */
  .ws-scrim {
    position: fixed;
    inset: 0;
    z-index: 7;
    display: block;
    background: var(--tempra-color-scrim);
  }

  .ws-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 8;
    display: none;
    width: var(--tempra-drawer);
    padding: 0 12px 8px;
    border-right: 1px solid var(--tempra-color-border);
    background: var(--tempra-color-bg);
    box-shadow: var(--tempra-shadow);
  }

  .ws-sidebar.open {
    display: flex;
  }

  .ws-sidebar:focus {
    outline: none;
  }

  .drawer-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: var(--tempra-topbar);
    margin: 0 -12px 12px;
    padding: 0 8px 0 16px;
    border-bottom: 1px solid var(--tempra-color-border);
  }

  .drawer-head .brand-sep {
    width: 1px;
    height: 20px;
    margin: 0 2px;
    background: var(--tempra-color-border);
  }

  /* Search is the field below; the head ends with ×. */
  .drawer-head .search-button {
    display: none;
  }

  .drawer-close {
    flex: none;
    color: var(--tempra-color-text);
  }

  /* Search, as a field at the drawer's top: it opens the quick switcher. */
  .drawer-search {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    min-height: var(--tempra-touch);
    margin-bottom: 12px;
    padding: 0 16px;
    border: 1px solid var(--tempra-color-border);
    border-radius: var(--tempra-radius-pill);
    background: var(--tempra-color-bg);
    color: var(--tempra-color-muted);
    font-size: var(--tempra-text-name);
    text-align: left;
  }

  .drawer-search span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ws-sidebar .nav-row,
  .ws-sidebar .tree-row {
    font-size: var(--tempra-text-name);
  }

  .ws-sidebar .sidebar-foot {
    margin: 0 -12px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--tempra-color-border);
  }

  /* Touch targets: every row and control at least 44px tall. */
  .nav-row,
  .tree-row,
  .lib-switch {
    min-height: var(--tempra-touch);
  }

  .icon-button.touch {
    width: var(--tempra-touch);
    height: var(--tempra-touch);
  }

  .page-column,
  .page {
    padding: 32px 16px 72px;
  }
}

/* ---------- Page pieces: lists, tables, forms ---------- */

.new-library {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -12px 0 24px;
  padding: 12px 18px;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  font-size: var(--tempra-text-ui);
}

.new-library .notice {
  flex-basis: 100%;
  margin: 0;
}

/* A command or URL to copy (the connect pages): an inset that wraps rather than widening the page. */
.page pre,
.page-column pre {
  margin: 0 0 var(--tempra-space-3);
  padding: 10px 14px;
  border-radius: var(--tempra-radius-row);
  background: var(--tempra-color-ground);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-line-height);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.page-column pre,
.page-column pre.src {
  background: var(--tempra-color-ground);
}

/* Dates and short facts in a table keep to one line. */
table.list td.when,
table.list .nowrap {
  white-space: nowrap;
}

.table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--tempra-space-3);
}

table.list {
  width: 100%;
  font-size: var(--tempra-text-ui);
}

table.list th {
  padding: 6px 10px;
  border-bottom: 1px solid var(--tempra-color-border);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  font-weight: var(--tempra-weight-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

table.list td {
  padding: 10px;
  border-bottom: 1px solid var(--tempra-color-border);
}

table.list td.name a {
  font-weight: var(--tempra-weight-medium);
}

/* A setting on one line: its name, then its control (the Account page's theme). */
.field-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* A group of related controls on a page (a form, a list with its actions). */
.panel-box {
  margin: 0 0 var(--tempra-space-4);
  padding: 16px 18px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
}

.panel-box > h2:first-child {
  margin-top: 0;
}

form.inline,
form.filters,
form.token {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The ledger's filters: small labels, inset fields, no box. */
form.filters {
  margin: 0 0 var(--tempra-space-3);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

form.filters label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

form.filters input {
  padding: 4px 10px;
  border: 0;
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-ground);
  color: var(--tempra-color-text);
}

form.filters input[type="text"] {
  width: 9rem;
}

form.filters button {
  padding: 4px 12px;
  font-size: var(--tempra-text-meta);
}

form.token {
  align-items: flex-start;
  flex-direction: column;
}

pre.src {
  overflow-x: auto;
  padding: 12px 14px;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  font-size: var(--tempra-text-meta);
  line-height: var(--tempra-line-height);
}

ul.events {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-line-height);
}

/* ---------- Notifications (TEMPRA-72, TEMPRA-73): mentions (the Inbox is inbox.css) ---------- */

/* The comment box with its @ suggestions under it. */
.mention-box {
  position: relative;
}

.mention-list [aria-selected="true"] {
  background: var(--tempra-color-hover);
}

/*
 * A concept's page (take 4, TEMPRA-114; tempra-dev: app/reader, decisions/one-panel-from-the-top-
 * bar): the text (title, description, byline, body, sources) centred in its column, and on the
 * right its contents, or one panel in their place (Comments, History, Properties). The page's
 * width decides what fits (container queries on `page`, the page's scroller): under 1100px the
 * contents hide (On this page under the byline), and a panel takes their column down to 960px
 * and overlays the page below that; on a phone (900px and under, the window's call) a panel is
 * a sheet from the bottom.
 */

.concept-grid {
  display: grid;
  grid-template-columns: [text] minmax(0, 1fr) [side] var(--tempra-contents);
  min-height: 100%;
}

.concept.panel-open .concept-grid {
  grid-template-columns: [text] minmax(0, 1fr) [side] var(--tempra-panel);
}

.concept .doc {
  grid-row: 1;
  grid-column: text;
  justify-self: center;
  width: 100%;
  max-width: calc(var(--tempra-column-text) + 2 * var(--tempra-page-pad));
  min-width: 0;
  padding: 40px var(--tempra-page-pad) 140px;
}

/* The Markdown view is wider than the text: the file's lines are long. */
.concept.markdown-on .doc {
  max-width: calc(var(--tempra-measure) + 2 * var(--tempra-page-pad) + 200px);
}

.concept-side {
  grid-row: 1;
  grid-column: side;
  min-width: 0;
}

/* The contents: the page's headings in small grey type, nested, kept in view; the section in
   view marked with a rule. No heading over them. */
.concept-contents {
  position: sticky;
  top: 0;
  max-height: calc(100dvh - var(--tempra-topbar));
  overflow: auto;
  padding: 48px 24px 24px 0;
}

.toc {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--tempra-color-border);
  list-style: none;
  font-size: var(--tempra-text-meta);
  line-height: var(--tempra-line-height);
}

.toc a {
  display: block;
  margin-left: -1px;
  padding: 4px 0 4px 14px;
  border-left: 1px solid transparent;
  color: var(--tempra-color-muted);
  text-decoration: none;
}

.toc .sub a {
  padding-left: 26px;
}

.toc a:hover {
  color: var(--tempra-color-text);
}

.toc a[aria-current="location"] {
  border-left-color: var(--tempra-color-text);
  color: var(--tempra-color-text);
}

/* "On this page" under the byline, for when the contents have no column. */
.toc-inline {
  display: none;
  margin-top: 20px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  font-size: var(--tempra-text-ui);
}

/* Closed by default: "On this page" and a chevron, turned while open (board 33). */
.toc-inline summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding: 0 16px;
  color: var(--tempra-color-text);
  list-style: none;
  cursor: pointer;
}

.toc-inline summary::-webkit-details-marker {
  display: none;
}

.toc-inline summary svg {
  color: var(--tempra-color-faint);
  transition: transform 0.15s ease;
}

.toc-inline[open] summary svg {
  transform: rotate(180deg);
}

.toc-inline .toc {
  margin: 0 16px 12px;
}

/* ---------- A panel: in the contents' column, its title, a count and × ---------- */

.concept-panel {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--tempra-topbar));
  border-left: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
  font-size: var(--tempra-text-ui);
}

.panel-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 12px 0 20px;
  border-bottom: 1px solid var(--tempra-color-border);
}

.panel-head h2 {
  margin: 0;
  font-size: var(--tempra-text-ui);
  font-weight: var(--tempra-weight-strong);
}

.panel-head .count {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.panel-head .icon-button {
  margin-left: auto;
}

.panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px 20px 32px;
}

.panel-section {
  margin-top: 24px;
}

.panel-section .label {
  margin: 0 0 8px;
}

.panel-section .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.verification {
  padding: 12px 14px;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
}

.verification-state {
  margin: 0;
}

/* Where a crumb notes what is exceptional (stale, a status that is not stable). */
.crumb-flag {
  color: var(--tempra-color-muted);
}

.crumb-flag::before {
  content: "·";
  margin-right: 6px;
}

.doc-head {
  margin-bottom: 32px;
}

.doc-title {
  margin: 0 0 12px;
  font-family: var(--tempra-font-reader);
  font-size: var(--tempra-text-title);
  font-weight: var(--tempra-weight-medium);
  line-height: var(--tempra-leading-tight);
  letter-spacing: -0.01em;
}

.doc-tagline {
  margin: 0;
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-reader);
  font-size: var(--tempra-text-reader);
  line-height: var(--tempra-line-height);
}

/* ---------- The byline: who wrote this version, for whom, when; or who is editing now ---------- */

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 20px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.byline-sep {
  color: var(--tempra-color-faint);
}

.byline-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tempra-color-text);
}

/* ---------- History: the versions, newest first ---------- */

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

.versions a.version {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--tempra-radius-row);
  color: var(--tempra-color-text);
  text-decoration: none;
}

.versions a.version:hover {
  background: var(--tempra-color-hover);
}

.versions a.version.chosen {
  background: var(--tempra-color-selected);
}

.version-n {
  color: var(--tempra-color-muted);
  font-variant-numeric: tabular-nums;
}

.version-what {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.version-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.version-who {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.older-versions {
  margin-top: 12px;
  padding-left: 10px;
  font-size: var(--tempra-text-meta);
  text-decoration: underline;
}

/* ---------- Review mode, and the changes since a version chosen in History ---------- */

.review-bar {
  position: sticky;
  top: 12px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 32px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
  font-size: var(--tempra-text-ui);
}

.review-what {
  flex: 1 1 16rem;
  min-width: 0;
}

.review-what .version-n {
  margin-right: 6px;
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.verify-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.verify-form input {
  flex: 1 1 10rem;
  min-width: 0;
}

/* The changes in the text (take 4, board 22): a hairline warm rule left of each changed block,
   insertions underlined on a grey ground, deletions struck through in grey (prose.css). */
.concept
  .prose
  > :is(p, ul, ol, blockquote, pre, h2, h3, h4, h5, h6, .table):has(
    ins.diff-added,
    del.diff-removed
  ) {
  margin-left: -16px;
  padding-left: 15px;
  border-left: 1px solid var(--tempra-color-agent);
}

/* ---------- The end of the body: sources ---------- */

.doc-sources {
  max-width: var(--tempra-measure-reader);
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--tempra-color-border);
}

.doc-sources h2 {
  margin: 0 0 12px;
  font-size: var(--tempra-text-ui);
  font-weight: var(--tempra-weight-strong);
}

.doc-sources h3 {
  margin: 20px 0 8px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-weight: var(--tempra-weight-medium);
}

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

.sources li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-line-height);
}

.sources li:target {
  background: var(--tempra-color-ground);
}

.sources .num {
  color: var(--tempra-color-muted);
  font-variant-numeric: tabular-nums;
}

.sources .meta {
  display: block;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.sources a {
  color: var(--tempra-color-text);
}

/* ---------- The Markdown view: the stored file, with line numbers ---------- */

.raw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.raw-head .pill-button svg {
  display: block;
}

.raw-path {
  flex: 1;
  min-width: 0;
  color: var(--tempra-color-muted);
  overflow-wrap: anywhere;
}

.raw-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  font-family: var(--tempra-font-mono);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-line-height);
}

.raw-lines {
  display: flex;
  flex-direction: column;
  padding: 16px 10px 16px 14px;
  color: var(--tempra-color-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}

.raw-file pre {
  margin: 0;
  padding: 16px 18px 16px 6px;
  overflow-x: auto;
  background: none;
  font: inherit;
  white-space: pre;
}

/* ---------- Properties: the facts, links, agent notes ---------- */

.facts {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  margin: 0;
  font-size: var(--tempra-text-ui);
}

.facts > div {
  display: contents;
}

.facts dt,
.facts dd {
  padding: 9px 0;
  border-bottom: 1px solid var(--tempra-color-border);
  line-height: var(--tempra-line-height);
}

.facts dt {
  color: var(--tempra-color-muted);
}

.facts dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.facts pre {
  margin: 0;
  white-space: pre-wrap;
}

.linked {
  margin: 0;
  padding-left: 18px;
}

.linked li,
.notes-list li {
  margin-bottom: 8px;
  font-size: var(--tempra-text-meta);
}

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

/* ---------- What fits: the page's width decides ---------- */

/* No room beside the text: the contents move under the byline, and a panel overlays the page. */
@container page (width < 1100px) {
  .concept-grid,
  .concept.panel-open .concept-grid {
    grid-template-columns: [text] minmax(0, 1fr);
  }

  /* Its column is gone: what it holds is hidden (the contents) or fixed (a panel). */
  .concept-side {
    display: contents;
  }

  .concept-contents {
    display: none;
  }

  .toc-inline {
    display: block;
  }

  .concept-panel {
    position: fixed;
    top: var(--tempra-topbar);
    right: 0;
    bottom: 0;
    z-index: 5;
    width: min(var(--tempra-panel), 100vw);
    height: auto;
    box-shadow: var(--tempra-shadow);
  }
}

/* Room for the text and a panel, not the contents as well (a laptop of about 1280px with the
   sidebar shown): an open panel takes a column again and the text moves over for it, so nothing
   (On this page included) runs under it. Narrower than this, it overlays. */
@container page (960px <= width < 1100px) {
  .concept.panel-open .concept-grid {
    grid-template-columns: [text] minmax(0, 1fr) [side] var(--tempra-panel);
  }

  .concept.panel-open .concept-side {
    display: block;
  }

  .concept.panel-open .concept-panel {
    position: sticky;
    top: 0;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: auto;
    height: calc(100dvh - var(--tempra-topbar));
    box-shadow: none;
  }
}

/* The crumbs under the phone's top bar (board 33): the concept's folders and what is exceptional,
   over the title. Elsewhere the top bar holds them. */
.doc-crumbs {
  display: none;
}

/* A phone (take 4, boards 33 and 35): one column with a 16px gutter, "On this page" as a closed
   disclosure under the byline, and a panel as a sheet from the bottom, the page dimmed behind. */
@media (max-width: 900px) {
  .concept .doc {
    padding: 16px 16px 96px;
  }

  .doc-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--tempra-color-muted);
    font-size: var(--tempra-text-ui);
  }

  .doc-crumbs:empty {
    display: none;
  }

  .doc-crumbs a {
    color: inherit;
    text-decoration: none;
  }

  .doc-title {
    font-size: var(--tempra-text-page);
  }

  /* On a phone the top bar has Comments and ⋯; Copy page heads ⋯ (TEMPRA-118). */
  .topbar-tools .copy-page {
    display: none;
  }

  .toc-inline summary {
    min-height: var(--tempra-touch);
    font-size: var(--tempra-text-name);
  }

  .toc-inline .toc a {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .concept-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 7;
    width: auto;
    height: var(--tempra-sheet);
    border-top: 1px solid var(--tempra-color-border);
    border-left: 0;
    border-radius: var(--tempra-radius-card) var(--tempra-radius-card) 0 0;
    /* The page dimmed behind the sheet, the top bar too; taps still reach the page (a quote). */
    box-shadow: 0 0 0 100vmax var(--tempra-color-scrim);
  }

  .panel-head {
    position: relative;
    min-height: 64px;
    padding: 12px 8px 0 20px;
    touch-action: none;
  }

  .panel-head h2 {
    font-size: var(--tempra-text-name);
  }

  /* The drag handle, centred at the sheet's top edge. */
  .panel-grip {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: var(--tempra-radius-pill);
    background: var(--tempra-color-border-strong);
    transform: translateX(-50%);
  }

  .panel-body {
    padding: 16px 16px 24px;
    overscroll-behavior: contain;
  }
}

/* The handle is the phone sheet's alone. */
@media (min-width: 901px) {
  .panel-grip {
    display: none;
  }
}

/*
 * Comments on a concept (take 4, TEMPRA-114; tempra-dev: app/comments): the threads in the
 * Comments panel (its frame is concept.css's), Open and Resolved n, a draft at the top while one
 * is written, the active thread as a card, the others compact (their quote, then who, the first
 * words, when). Lines and greys only: no colour.
 */

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comments-list .segmented {
  align-self: flex-start;
  margin-bottom: 6px;
}

.new-thread {
  align-self: flex-start;
  padding-left: 8px;
  font-size: var(--tempra-text-meta);
}

/* A compact thread: its quote, then one line: who, the first words, when. */
.thread.collapsed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: transparent;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  text-align: left;
}

.thread-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.thread.collapsed .thread-quote {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.thread.collapsed:hover:not(:disabled) {
  background: var(--tempra-color-hover);
}

.thread.collapsed .avatar-mark {
  width: var(--tempra-avatar-small);
  height: var(--tempra-avatar-small);
  font-size: var(--tempra-text-initial);
}

.thread.collapsed strong {
  flex: none;
  color: var(--tempra-color-text);
  font-weight: var(--tempra-weight-medium);
}

.thread-words {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-replies {
  flex: none;
  color: var(--tempra-color-muted);
  font-variant-numeric: tabular-nums;
}

.thread.collapsed time {
  flex: none;
  color: var(--tempra-color-muted);
}

/* A resolved thread reads quieter: muted text, never faded below AA (TEMPRA-132). */
.thread.resolved,
.thread.resolved strong {
  color: var(--tempra-color-muted);
}

/* The active thread (and a new comment): a card with the comments, a reply, Resolve. */
.thread.open {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
}

.said-by {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--tempra-text-meta);
}

.said-by strong {
  font-weight: var(--tempra-weight-medium);
}

.said-by time,
.said-change {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.said-change {
  margin: 0;
}

.comment {
  margin: 4px 0 0 calc(var(--tempra-avatar) + 8px);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-line-height);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.quote {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--tempra-color-border-strong);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-style: italic;
  line-height: var(--tempra-line-height);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.quote a {
  color: inherit;
  text-decoration: none;
}

/* The reply field, a pill until it has words; the composer's field, a box. */
.reply-form,
.comment-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reply-form textarea,
.comment-form textarea {
  display: block;
  width: 100%;
  border: 0;
  background: var(--tempra-color-ground);
  font-size: var(--tempra-text-meta);
}

.reply-form textarea {
  height: 2rem;
  min-height: 0;
  padding: 5px 12px;
  border-radius: var(--tempra-radius-pill);
  resize: none;
}

.reply-form textarea:focus,
.reply-form textarea:not(:placeholder-shown) {
  height: 4rem;
  border-radius: var(--tempra-radius-box);
}

.comment-form textarea {
  min-height: 4rem;
  padding: 8px 10px;
  border-radius: var(--tempra-radius-row);
  resize: vertical;
}

.reply-form .actions,
.comment-form .actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
}

.reply-form button,
.comment-form button {
  padding: 4px 12px;
  font-size: var(--tempra-text-meta);
}

/* The active thread's card is drawn in ink, as its quote's highlight is filled. */
section.thread.open {
  border-color: var(--tempra-color-text);
}

/* On a phone, a compact thread is a touch target. */
@media (max-width: 900px) {
  .thread.collapsed {
    min-height: var(--tempra-touch);
  }
}

/*
 * The person's views of a library (take 3, TEMPRA-106; take 4, TEMPRA-115 and 117; tempra-dev:
 * app/home, app/activity, app/workspace): the library's home, Activity,
 * a folder, an attachment and Not found. Quiet pages in one column: a header, then sections of rows.
 */

/* ---------- Shared: a page's header and its sections ---------- */

/* The header: the title (a concept title's look) and a quiet line, a link at the right. */
.view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tempra-space-2) var(--tempra-space-3);
  margin-bottom: var(--tempra-space-4);
}

.view-head-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--tempra-space-1);
  min-width: 0;
}

/* A view is the app, not a document: its title is the app's sans, sized as an h1 (TEMPRA-108). */
.view-title {
  margin: 0;
  font-size: var(--tempra-text-page);
  font-weight: var(--tempra-weight-strong);
  line-height: var(--tempra-leading-tight);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.view-meta {
  margin: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

/* Every event, filtered over what is loaded: says how much, over the table. */
.events-scope {
  margin-bottom: var(--tempra-space-2);
}

/* A library's description under its name on the home (TEMPRA-102, take 4). */
.view-lede {
  margin: var(--tempra-space-1) 0 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-reader);
  line-height: var(--tempra-line-height);
}

/* A link beside a header or a section's heading: "The full ledger", "All 5", "Activity". */
.view-aside {
  margin-left: auto;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

.view-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tempra-space-1) var(--tempra-space-2);
  margin-bottom: var(--tempra-space-2);
}

.view-section-title {
  margin: 0;
  font-size: var(--tempra-text-ui);
  font-weight: var(--tempra-weight-strong);
}

.view-empty {
  margin: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.view-more {
  margin: var(--tempra-space-3) 0 0;
}

/* Filters: pills in a row that wraps. */
.view-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-2);
  margin-bottom: var(--tempra-space-4);
  font-size: var(--tempra-text-meta);
}

.view-filters button,
.view-filters select {
  font-size: var(--tempra-text-meta);
}

/* A segmented control: buttons in one grey pill, the chosen one white. */
.segmented {
  display: flex;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 2px;
  border: 0;
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-ground);
}

.segmented button {
  border-color: transparent;
  background: transparent;
  color: var(--tempra-color-muted);
}

.segmented button[aria-pressed="true"],
.segmented button[aria-pressed="true"]:hover:not(:disabled) {
  border-color: var(--tempra-color-border);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
}

/* A choice as an outlined pill (a native select, so it works by keyboard and on a phone). */
.pill-select {
  border-color: var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  color: var(--tempra-color-muted);
  cursor: pointer;
}

@media (max-width: 900px) {
  .view-filters button,
  .view-filters select {
    min-height: var(--tempra-touch);
  }

  .segmented button {
    min-height: calc(var(--tempra-touch) - 4px);
  }
}

/* ---------- Home (take 4, TEMPRA-117) ---------- */

.home-section {
  margin-top: var(--tempra-space-4);
}

.home-who a,
.home-since a {
  color: var(--tempra-color-text);
}

/* Since you last looked (TEMPRA-121): one quiet line under the header's. */
.home-since {
  margin-top: var(--tempra-space-1);
}

/* A part of the home that could not load says so, quietly (H-7). */
.home-failed {
  color: var(--tempra-color-muted);
}

.home-failed button {
  margin-left: var(--tempra-space-1);
}

/* Recently changed: a row per page, the title, then where, who and when. */
.home-recent {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-recent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--tempra-space-3);
  padding: var(--tempra-space-1) 0;
}

.home-recent-title {
  min-width: 0;
  color: var(--tempra-color-text);
  font-weight: var(--tempra-weight-medium);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.home-recent-title:hover {
  text-decoration: underline;
}

.home-recent-meta {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

/* For you here: up to three cards in a row, each one link. */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--tempra-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-card {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-1);
  height: 100%;
  padding: var(--tempra-space-3);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
  color: var(--tempra-color-text);
  text-decoration: none;
}

.home-card:hover {
  border-color: var(--tempra-color-border-strong);
  background: var(--tempra-color-hover);
}

.home-card-kind {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.home-card-title {
  font-weight: var(--tempra-weight-medium);
  overflow-wrap: anywhere;
}

.home-card-detail {
  overflow: hidden;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sections: rows, the name (and its description when folders carry one), the count and the dot. */
.home-sections {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-section-row {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-3);
  min-height: var(--tempra-touch);
  padding: var(--tempra-space-2) 0;
  color: var(--tempra-color-text);
  text-decoration: none;
}

.home-section-row:hover .home-section-name {
  text-decoration: underline;
}

.home-section-name {
  flex: 1;
  min-width: 0;
  font-weight: var(--tempra-weight-medium);
  overflow-wrap: anywhere;
}

.home-section-end {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-2);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-variant-numeric: tabular-nums;
}

/* The dot's place is kept when there is none, so the counts line up. */
.home-section-dot {
  display: inline-flex;
  width: var(--tempra-dot);
}

/* The foot: the agents' housekeeping, quiet. */
.home-foot {
  margin: var(--tempra-space-4) 0 0;
  font-size: var(--tempra-text-ui);
}

.home-foot a {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-1);
  color: var(--tempra-color-muted);
  text-decoration: none;
}

.home-foot a:hover {
  color: var(--tempra-color-text);
}

/* An empty library (board 31): one box with the steps and the waiting line, Import below. */
.empty-library {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-3);
  padding: var(--tempra-space-4);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
}

.empty-steps {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.empty-steps > li {
  display: grid;
  grid-template-columns: var(--tempra-avatar) minmax(0, 1fr);
  gap: var(--tempra-space-2) var(--tempra-space-3);
  align-items: baseline;
  counter-increment: step;
}

.empty-steps > li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: var(--tempra-avatar);
  height: var(--tempra-avatar);
  border: 1px solid var(--tempra-color-border-strong);
  border-radius: 50%;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.empty-steps > li > * {
  grid-column: 2;
}

.empty-steps > li > :first-child {
  grid-row: 1;
}

/* A value to copy: the mono on a grey ground, the copy button at its end. */
.copy-field {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-2);
  padding: var(--tempra-space-1) var(--tempra-space-1) var(--tempra-space-1) var(--tempra-space-3);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-row);
  background: var(--tempra-color-ground);
}

.copy-field code {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  background: none;
  font-size: var(--tempra-text-ui);
}

.empty-wait {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-2);
  margin: 0;
  padding: var(--tempra-space-3);
  border: 1px dashed var(--tempra-color-border-strong);
  border-radius: var(--tempra-radius-row);
  color: var(--tempra-color-muted);
}

.empty-more {
  margin: var(--tempra-space-3) 0 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

@media (max-width: 900px) {
  .empty-library {
    padding: var(--tempra-space-3);
  }
}

/* ---------- Activity ---------- */

.activity-day {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-1);
  margin-bottom: var(--tempra-space-4);
}

/* An entry: who, what they did, when; new ones carry the solid dot at the right (take 4). */
.entry {
  display: grid;
  grid-template-columns: var(--tempra-avatar) minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 10px;
  border-radius: var(--tempra-radius-box);
  font-size: var(--tempra-text-ui);
}

/* On Activity's Summary, entries are rows with hairlines between them, no fill. */
.activity-day .entry {
  border-bottom: 1px solid var(--tempra-color-border);
  border-radius: 0;
}

/* Where the new entries end (TEMPRA-121): the label, then a rule under the last new entry. */
.entry-divider {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--tempra-space-2);
  padding: var(--tempra-space-2) 10px 0;
  border-bottom: 1px solid var(--tempra-color-border-strong);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.entry-divider > span {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-2);
  padding-bottom: var(--tempra-space-1);
}

.entry > .avatar-mark {
  margin-top: 1px;
}

.entry-body {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-1);
  min-width: 0;
}

.entry-line {
  margin: 0;
  font-size: var(--tempra-font-size);
  overflow-wrap: anywhere;
}

.entry-words,
.entry-more {
  color: var(--tempra-color-muted);
}

.entry-words {
  font-size: var(--tempra-text-meta);
}

/* The request's note, quoted. */
.entry-note {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-font-size);
  overflow-wrap: anywhere;
}

/* The concepts it touched: what happened, the title, the words changed. */
.entry-touched {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--tempra-space-1) 0 0;
  padding: 0;
  list-style: none;
}

.entry-touched li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  min-width: 0;
}

.entry-what {
  flex: none;
  width: 52px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
}

.entry-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--tempra-space-2);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

/* Activity's controls (take 4, TEMPRA-115): the view switch and the filters, Download at the
   right end of the row. */
.activity-filters select {
  max-width: 14rem;
}

a.activity-download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: var(--tempra-text-meta);
}

/* The text filter: an outlined pill with a search glyph inside it. */
.activity-find {
  display: flex;
  flex: 1 1 14rem;
  align-items: center;
  gap: 6px;
  max-width: 24rem;
  padding: 0 12px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  color: var(--tempra-color-muted);
}

.activity-find:focus-within {
  outline: var(--tempra-focus-ring);
  outline-offset: 1px;
}

.activity-find input:not([type="checkbox"], [type="radio"], [type="file"]) {
  flex: 1;
  min-width: 0;
  padding: 5px 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-meta);
}

/* The live entry: an agent writing now, the pulsing dot and "now" at the right. */
.entry.live {
  align-items: center;
}

.entry-now {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* Every event: the ledger as a quiet table, hairlines between rows, the path in the mono. */
.events-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--tempra-text-ui);
}

.events-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--tempra-color-border);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-weight: var(--tempra-weight-regular);
  text-align: left;
  white-space: nowrap;
}

.events-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--tempra-color-border);
  vertical-align: baseline;
}

.events-seq,
.events-when,
.events-kind {
  color: var(--tempra-color-muted);
  white-space: nowrap;
}

.events-seq {
  font-family: var(--tempra-font-mono);
  font-size: var(--tempra-text-meta);
}

/* The dot sits in the seq column's left gutter, so the numbers line up with or without it. */
.events-seq .change-dot {
  margin: 0 8px 0 -14px;
}

.events-table td.events-seq {
  padding-left: 22px;
}

.events-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.events-path {
  overflow-wrap: anywhere;
}

.events-path a {
  text-decoration: none;
}

.events-path a:hover code {
  text-decoration: underline;
}

.events-path code {
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

.events-note,
.events-aside {
  margin-left: 10px;
  color: var(--tempra-color-muted);
}

.events-aside {
  font-size: var(--tempra-text-meta);
}

@media (max-width: 900px) {
  .entry {
    gap: 10px;
    padding: 12px 8px;
  }
}

/* ---------- A folder (take 4, TEMPRA-117) ---------- */

.folder {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-3);
}

.folder-empty,
.folder-foot {
  margin: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.folder-foot {
  margin-top: var(--tempra-space-3);
}

.folder-foot a {
  color: var(--tempra-color-muted);
}

/* Rows with no rules: subfolders first, then concepts, title over its description. */
.folder-list {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.folder-row {
  display: flex;
  align-items: flex-start;
  gap: var(--tempra-space-3);
  padding: var(--tempra-space-2) 0;
  color: var(--tempra-color-text);
  text-decoration: none;
}

.folder-row:hover .folder-title {
  text-decoration: underline;
}

.folder-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.folder-title {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-2);
  font-weight: var(--tempra-weight-medium);
  overflow-wrap: anywhere;
}

.folder-sub {
  align-items: center;
}

.folder-sub .folder-title {
  flex: 1;
  min-width: 0;
}

.folder-sub .folder-title svg,
.folder-file .folder-title svg {
  flex: none;
  color: var(--tempra-color-muted);
}

.folder-desc {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.folder-count,
.folder-live {
  flex: none;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

.folder-dot {
  display: inline-flex;
  flex: none;
}

@media (max-width: 900px) {
  .folder-live {
    display: none;
  }
}

/* ---------- An attachment (board 28) ---------- */

/* The file large on a dark frame; beside it its name, actions and facts. */
.attachment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
  gap: var(--tempra-space-4);
  align-items: start;
}

.attachment > .notice {
  grid-column: 1 / -1;
}

.attachment-frame {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: var(--tempra-space-4);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-frame);
  color: var(--tempra-color-frame-ink);
}

.attachment-frame img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

.attachment-icon {
  display: grid;
  place-items: center;
}

.attachment-side {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-3);
  min-width: 0;
}

.attachment-name {
  margin: 0;
  font-size: var(--tempra-text-h2);
  font-weight: var(--tempra-weight-strong);
  line-height: var(--tempra-leading-tight);
  overflow-wrap: anywhere;
}

.attachment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-2);
  margin: 0;
}

.attachment-actions .button {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-1);
}

/* Type, Size, Added, Used in: label and value in two columns between hairlines. */
.attachment-facts {
  margin: 0;
  border-top: 1px solid var(--tempra-color-border);
}

.attachment-facts > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--tempra-space-2);
  padding: var(--tempra-space-2) 0;
  border-bottom: 1px solid var(--tempra-color-border);
}

.attachment-facts dt {
  color: var(--tempra-color-muted);
}

.attachment-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.attachment-used {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1100px) {
  .attachment {
    grid-template-columns: minmax(0, 1fr);
  }

  .attachment-frame {
    min-height: 14rem;
    padding: var(--tempra-space-3);
  }
}

/* ---------- Not found (board 32) ---------- */

.not-found {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-3);
}

/* Where it went, in a box with Open at the end. */
.not-found-fate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tempra-space-2) var(--tempra-space-3);
  margin: 0;
  padding: var(--tempra-space-3);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
  color: var(--tempra-color-muted);
}

.not-found-fate code {
  color: var(--tempra-color-text);
  overflow-wrap: anywhere;
}

.not-found-fate a {
  color: var(--tempra-color-text);
}

.not-found-ways {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-2);
  margin: 0;
}

.not-found-ways button {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-1);
}

/* ---------- The Inbox (take 4, boards 02 and 13; TEMPRA-116) ---------- */

/*
 * One list, newest first, between hairline rules: an unread dot in the gutter, the library, kind
 * and time on a quiet line, the title, the detail line and a quote, and the row's actions on the
 * right. Lines and greys only.
 */

.inbox-filters .inbox-mark {
  margin-left: auto;
  color: var(--tempra-color-muted);
}

.inbox-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tempra-color-border);
  list-style: none;
}

.inbox-row {
  display: grid;
  grid-template-columns: var(--tempra-space-4) minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 var(--tempra-space-2);
  padding: var(--tempra-space-3) 0;
  border-bottom: 1px solid var(--tempra-color-border);
}

.inbox-dot {
  justify-self: center;
  width: var(--tempra-dot);
  height: var(--tempra-dot);
  margin-top: calc(var(--tempra-text-meta) * 0.6);
  border-radius: 50%;
}

.inbox-row.unread .inbox-dot {
  background: var(--tempra-color-text);
}

.inbox-main {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-1);
  min-width: 0;
}

.inbox-main p {
  margin: 0;
}

.inbox-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-2);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.inbox-meta .lib-tile {
  width: 18px;
  height: 18px;
  font-size: var(--tempra-text-label);
}

.inbox-title a {
  color: var(--tempra-color-text);
  font-weight: var(--tempra-weight-medium);
  text-decoration: none;
}

.inbox-title a:hover {
  text-decoration: underline;
}

.inbox-detail {
  color: var(--tempra-color-muted);
}

.inbox-quote {
  margin: var(--tempra-space-1) 0 0;
  padding: 0 0 0 var(--tempra-space-3);
  border-left: 2px solid var(--tempra-color-border);
  color: var(--tempra-color-muted);
}

.inbox-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--tempra-space-2);
}

@media (max-width: 900px) {
  .inbox-row {
    grid-template-columns: var(--tempra-space-4) minmax(0, 1fr);
  }

  .inbox-actions {
    grid-column: 2;
    justify-content: flex-start;
    margin-top: var(--tempra-space-2);
  }

  .inbox-actions .button,
  .inbox-actions button {
    min-height: var(--tempra-touch);
  }
}

/* ---------- An invitation (take 4, board 30; TEMPRA-135) ---------- */

/* Who invited and when, the library as a card, the access offered, Accept and Decline. */
.invitations {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.invitation {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-3);
  max-width: 32rem;
}

.invitation p {
  margin: 0;
}

.invitation-from {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-2);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.invitation-card {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-3);
  padding: var(--tempra-space-3);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
}

.invitation-card .lib-tile {
  width: 36px;
  height: 36px;
}

.invitation-library {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.invitation-library span {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.invitation-access {
  display: flex;
  justify-content: space-between;
  gap: var(--tempra-space-3);
  font-size: var(--tempra-text-ui);
}

.invitation-access span {
  color: var(--tempra-color-muted);
}

/*
 * The public pages (TEMPRA-110): the landing page (site/, tempra.dev) and the app's server pages
 * (sign-in, app consent, the email-change link, error pages). Take 3's look without the
 * workspace: the ground, the wordmark, the page as one sheet with a hairline edge, a quiet foot.
 * Nothing here needs a script.
 */

/* The wordmark: the tile with the initial, as the sidebar's library switcher draws it, and the
   name. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
  text-decoration: none;
}

.wordmark:visited,
.wordmark:hover {
  color: var(--tempra-color-text);
}

/* The frame: a column on the ground, the sheet in the middle of it. */
.public {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100dvh;
  padding: 0 16px var(--tempra-space-4);
}

.public-head,
.public-foot,
.public-sheet {
  width: 100%;
  max-width: var(--tempra-page-width);
}

.public-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tempra-bar);
  padding: 8px 4px;
}

.public-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--tempra-text-ui);
}

.public-nav a:not(.button) {
  color: var(--tempra-color-muted);
  text-decoration: none;
}

.public-nav a:not(.button):hover {
  color: var(--tempra-color-text);
}

.public-sheet {
  padding: 48px var(--tempra-page-pad) 56px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-bg);
}

/* A form or a message (the server pages): a narrower column, the wordmark and foot with it. */
.public.narrow .public-head,
.public.narrow .public-foot,
.public.narrow .public-sheet {
  max-width: 560px;
}

.public-sheet > :first-child {
  margin-top: 0;
}

.public-sheet > :last-child {
  margin-bottom: 0;
}

.public-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 16px 4px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.public-foot a {
  color: inherit;
  text-decoration: none;
}

.public-foot a:hover {
  color: var(--tempra-color-text);
}

/* ---------- The landing page ---------- */

.public-sheet section + section {
  margin-top: 56px;
}

.lede {
  max-width: 34em;
  margin: 12px 0 24px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-reader);
  line-height: var(--tempra-line-height);
}

.public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* What Tempra does: short cards between hairlines, two to a row where there is room. */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.features li {
  padding: 16px 18px;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
}

.features h3 {
  margin: 0 0 4px;
  font-size: var(--tempra-text-ui);
  font-weight: var(--tempra-weight-strong);
}

.features p {
  margin: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-line-height);
}

/* Steps: numbered in the faint grey, one to a line. */
.steps {
  margin: 16px 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--tempra-color-border);
  counter-increment: step;
}

.steps li:last-child {
  border-bottom: 1px solid var(--tempra-color-border);
}

.steps li::before {
  content: counter(step);
  min-width: 1.25rem;
  color: var(--tempra-color-muted);
  font-variant-numeric: tabular-nums;
}

/* Terms and privacy: plain text at a comfortable measure. */
.legal {
  max-width: 38em;
}

.legal li + li {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .public {
    padding: 0 var(--tempra-gutter) var(--tempra-space-3);
  }

  .public-sheet {
    padding: 28px 20px 36px;
  }

  .public-nav a:not(.button) {
    display: inline-flex;
    align-items: center;
    min-height: var(--tempra-touch);
  }
}