/*
 * 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. 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().
 */
:root {
  color-scheme: light dark;

  /* Color: surfaces */
  --tempra-color-bg: light-dark(#ffffff, #1b1b1d); /* the sheet, 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 */
  --tempra-color-text: light-dark(#1a1a1b, #ececea);
  --tempra-color-muted: light-dark(#6f6f73, #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);

  /* Color: an agent's recent change (the only colour before the palette), cooling to grey */
  --tempra-color-agent: light-dark(#e8722a, #f0884a);
  --tempra-color-agent-cool: var(--tempra-color-faint);

  /* 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: 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-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;
  --tempra-line-height: 1.5;
  --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 */
  --tempra-text-label: 11px; /* uppercase labels, marks */
  --tempra-text-meta: 12px; /* timestamps, crumbs, small print */
  --tempra-text-ui: 13px; /* controls, panels, the tree */
  --tempra-text-name: 15px; /* a library's name, code in the reader */
  --tempra-text-reader: 17px; /* concept bodies and taglines */
  --tempra-text-h2: 22px;
  --tempra-text-page: 28px; /* a page's heading */
  --tempra-text-title: 36px; /* a concept's title */

  /* 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-sheet-pad: 40px; /* a page's side padding in the sheet */

  /* The frame (take 3) */
  --tempra-sidebar: 248px; /* the sidebar's width, and the phone drawer's */
  --tempra-bar: 52px; /* the sheet's top bar, and the phone's */
  --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: contents on the left, the text, comments on the right */
  --tempra-column-text: 620px;
  --tempra-margin-contents: 180px;
  --tempra-margin-comments: 290px;
  --tempra-margin-gap: 48px;
  --tempra-page-width: 760px; /* home, Needs you, Activity, a folder */

  /* 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 sheet, dialogs */
  --tempra-radius-tile: 6px; /* the library's initial */
  --tempra-radius-pill: 999px;
}

/* 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: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

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

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

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-visible {
  outline: 2px solid var(--tempra-color-text);
  outline-offset: 2px;
}

/* A text field shows focus by its caret and a firmer edge, not the ring. */
input:not([type="checkbox"], [type="radio"], [type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 1px solid var(--tempra-color-border-strong);
  outline-offset: 0;
  border-color: var(--tempra-color-border-strong);
}

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-faint);
  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: 500;
}

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: 1.5;
}

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: 500;
}

.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 {
  color: var(--tempra-color-faint);
}

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

.warn {
  font-weight: 500;
}

/* An uppercase label over a group (SOURCES, LINKED FROM). */
.label {
  margin: 0 0 var(--tempra-space-2);
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-label);
  font-weight: 400;
  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);
}

/* A row of short labels (type, trust tier, status): kept apart, wrapping on narrow screens. */
.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-1) var(--tempra-space-2);
}

.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: 1.65;
  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: 600;
}

.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: 1.25;
  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: 500;
  letter-spacing: -0.012em;
}

.prose h2 {
  font-size: 1.35em;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.prose h3 {
  font-size: 1.12em;
  font-weight: 600;
}

.prose h4,
.prose h5,
.prose h6 {
  margin-top: 1.6em;
  font-size: 1em;
  font-weight: 600;
  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: 1.6;
  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-faint);
  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: 1.5;
}

.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: 500;
  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-faint);
  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: 2px solid var(--tempra-color-text);
  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: 1.5;
  text-wrap: pretty;
  user-select: none;
}

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

/* 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: 1.45;
  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 since human verification, over the text: lines and greys only. */
.prose ins.diff-added {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

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

/* On a phone the column is the screen: a little less leading, the same rhythm. */
@media (max-width: 600px) {
  .prose {
    line-height: 1.6;
  }
}

/*
 * 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: 1.45;
  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 margin is filled grey and underlined solid (take 3); 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: 500;
}

.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: 1.5;
  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-family: var(--tempra-font-reader);
  font-size: var(--tempra-text-name);
  text-wrap: pretty;
}

.lightbox-facts {
  max-width: var(--tempra-measure);
  margin: 0;
  color: var(--tempra-color-faint);
  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). A soft ground and on it
 * two things: the sidebar (no box) and the open page as a full-height sheet with a hairline edge.
 * The sidebar can be hidden; under 900px it is a drawer behind a top bar. Account pages sit on
 * the same ground in a centred column under a header. A concept's own layout (its margins) is in
 * concept.css; the person's views (home, Needs you, Activity, a folder) in views.css.
 */
body:has(> #root),
body.ground {
  padding: 0;
  background: var(--tempra-color-ground);
}

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

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

/* 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-faint);
  font-size: var(--tempra-text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Who is signed in, at the top of the avatar's menu. */
.menu-list .menu-who {
  padding: 6px 10px 4px;
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-meta);
  overflow-wrap: anywhere;
}

.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: 10px;
  font-weight: 600;
}

/* 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);
}

/* An agent's change: a small dot, warm while fresh, grey once it cools (the one colour). */
.change-dot {
  display: inline-block;
  width: var(--tempra-dot);
  height: var(--tempra-dot);
  border-radius: 50%;
  background: var(--tempra-color-agent-cool);
  vertical-align: middle;
}

.change-dot.warm {
  background: var(--tempra-color-agent);
}

/* 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: 9px;
  font-weight: 600;
  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: 600;
}

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

.dialog-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.dialog-foot a {
  color: inherit;
}

/* ---------- Account pages: the ground, a header, a centred column ---------- */

.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 52px;
  margin: 0 10px;
  padding: 0 20px;
}

.app-header .spacer {
  flex: 1;
}

.page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 96px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.page-head h1 {
  margin: 0;
}

/* The New pill: an outlined white pill with a circled plus. */
.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  box-shadow: var(--tempra-shadow);
}

.lib-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lib-list a {
  display: block;
  padding: 16px 18px;
  border-radius: var(--tempra-radius-box);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-name);
  font-weight: 500;
  text-decoration: none;
}

.lib-list a:hover {
  background: var(--tempra-color-hover);
}

.lib-list .owner {
  color: var(--tempra-color-faint);
  font-weight: 400;
}

/* The library's open work from the daily check (TEMPRA-66): one quiet line under its name. */
.lib-list .lib-health {
  display: block;
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-meta);
  font-weight: 400;
}

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

.page-foot a {
  color: inherit;
}

/* ---------- The workspace: the sidebar and the sheet on the ground ---------- */

.workspace {
  display: grid;
  grid-template-columns: var(--tempra-sidebar) minmax(0, 1fr);
  grid-template-areas: "sidebar sheet";
  column-gap: var(--tempra-gutter);
  height: 100dvh;
  padding: var(--tempra-gutter);
}

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

/* The phone's top bar: only under 900px. */
.ws-topbar {
  display: none;
}

/* The sidebar sits on the ground: the library, search, the views, the files (which scroll), and
   the inbox and the person at its foot. */
.ws-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  padding: 8px 6px;
  font-size: var(--tempra-text-ui);
}

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

.sidebar-head {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sidebar-head .menu {
  flex: 1;
  min-width: 0;
}

/* The library switcher: its initial, its name over its owner, a chevron. */
.lib-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--tempra-radius-row);
  background: transparent;
  color: var(--tempra-color-text);
  text-align: left;
}

.lib-switch:hover:not(:disabled) {
  background: var(--tempra-color-hover);
}

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

.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-family: var(--tempra-font-reader);
  font-size: var(--tempra-text-name);
}

.lib-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.lib-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lib-owner {
  overflow: hidden;
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-label);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hiding the sidebar: a quiet glyph beside the switcher, plain until hovered. */
.sidebar-hide {
  flex: none;
  color: var(--tempra-color-faint);
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 2px 8px;
  padding: 7px 10px;
  border: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-ui);
  text-align: left;
}

.search-pill:hover:not(:disabled) {
  background: var(--tempra-color-bg);
  color: var(--tempra-color-muted);
}

.search-pill span {
  flex: 1;
}

.search-pill kbd {
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--tempra-text-label);
}

.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: 500;
}

.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;
}

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

.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 tree: nested lists, one row per folder or file, indented a step a level. A folder's row is
   a button that opens and closes it (a chevron turns) with its count of concepts; a file's row is
   a link. */
.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);
}

button.tree-row {
  width: 100%;
  border: 0;
  background: none;
  color: var(--tempra-color-text);
  font: inherit;
  font-size: var(--tempra-text-ui);
  text-align: left;
}

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

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

.tree-chevron {
  flex: none;
  display: flex;
  width: 16px;
  color: var(--tempra-color-faint);
  transition: transform 0.15s ease;
}

.tree-chevron svg {
  width: 12px;
  height: 12px;
}

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

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

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

.tree-count {
  flex: none;
  color: var(--tempra-color-faint);
  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 > a[aria-current="page"] {
  color: var(--tempra-color-text);
  font-weight: 500;
}

.tree-leaf {
  flex: none;
  width: 16px;
}

/* 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-faint);
  font-size: var(--tempra-text-label);
  font-variant-numeric: tabular-nums;
}

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

/* The sheet: the open page, full height, a hairline edge; the page scrolls inside it. Its width,
   not the window's, decides a concept's columns (container queries in concept.css), so hiding the
   sidebar widens the reading layout. */
.ws-sheet {
  grid-area: sheet;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-bg);
}

.ws-main {
  height: 100%;
  overflow: hidden auto;
  container: sheet / inline-size;
}

/* Showing the hidden sidebar: a glyph at the sheet's top left, over its bar. */
.sheet-toggle {
  position: absolute;
  top: 11px;
  left: 12px;
  z-index: 4;
}

/* The sheet's bar: where the page is on the left, the page's few controls on the right. It stays
   in view while the page scrolls. */
.sheet-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--tempra-bar);
  padding: 0 14px 0 20px;
  background: var(--tempra-color-bg);
}

.sidebar-hidden .sheet-bar {
  padding-left: 52px;
}

.sheet-bar-start {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sheet-bar-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

/* On a phone the bar goes back a step instead of naming the whole path. */
.sheet-back {
  display: none;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

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

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

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

/* A page's column in the sheet: a library view, a folder, settings. */
.sheet-page {
  max-width: var(--tempra-page-width);
  margin: 0 auto;
  padding: 72px var(--tempra-sheet-pad) 96px;
}

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

/* ---------- 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);
}

/* ---------- Narrow screens: a top bar, the sidebar as a drawer ---------- */

@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"
      "sheet";
    padding-top: 0;
  }

  .ws-topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .ws-topbar-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--tempra-color-text);
    font-weight: 600;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ws-sidebar {
    position: fixed;
    top: var(--tempra-bar);
    bottom: var(--tempra-gutter);
    left: var(--tempra-gutter);
    z-index: 6;
    display: none;
    width: min(var(--tempra-sidebar), calc(100vw - 2 * var(--tempra-gutter)));
    padding: 8px;
    border: 1px solid var(--tempra-color-border);
    border-radius: var(--tempra-radius-card);
    background: var(--tempra-color-ground);
    box-shadow: var(--tempra-shadow);
  }

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

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

  .sidebar-hide,
  .sheet-toggle {
    display: none;
  }

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

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

  .sheet-bar .icon-button.with-count {
    width: auto;
  }

  .sheet-bar,
  .sidebar-hidden .sheet-bar {
    padding: 0 6px;
  }

  .sheet-back {
    display: inline-flex;
  }

  .sheet-bar .crumbs {
    display: none;
  }

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

  .page {
    padding-top: 40px;
  }
}

/* ---------- Page pieces: lists, tables, forms, the ledger, diffs ---------- */

.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,
.sheet-page 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: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sheet-page pre,
.sheet-page pre.src,
.sheet-page pre.diff {
  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-faint);
  font-size: var(--tempra-text-label);
  font-weight: 400;
  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: 500;
}

/* 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-faint);
  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,
pre.diff {
  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: 1.55;
}

pre.src.wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

pre.diff .add {
  font-weight: 600;
}

pre.diff .del {
  color: var(--tempra-color-faint);
  text-decoration: line-through;
}

pre.diff .hunk,
pre.diff .meta {
  color: var(--tempra-color-muted);
}

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

.request {
  padding: 12px 0;
  border-top: 1px solid var(--tempra-color-border);
  font-size: var(--tempra-text-ui);
}

.req-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.request .note {
  margin: 4px 0;
  color: var(--tempra-color-muted);
}

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

.op {
  display: inline-block;
  min-width: 3.5em;
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-mono);
  font-size: var(--tempra-text-label);
}

/* ---------- Notifications (TEMPRA-72, TEMPRA-73): counts, the inbox, mentions ---------- */

/* The headers' Inbox link and its unread count: a number, no colour. */
.inbox-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
  text-decoration: none;
}

.inbox-link:hover {
  color: var(--tempra-color-text);
}

.inbox-link .count,
.lib-list .tally {
  color: var(--tempra-color-faint);
  font-variant-numeric: tabular-nums;
}

/* A library's tally in the list: for you, new, open threads. */
.lib-list .tally {
  float: right;
  font-size: var(--tempra-text-ui);
  font-weight: 400;
}

.inbox-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inbox-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 18px;
  border-radius: var(--tempra-radius-box);
}

.inbox-list li:hover {
  background: var(--tempra-color-hover);
}

.inbox-list .what {
  flex: 1 1 20rem;
}

.inbox-list .unread .what a {
  font-weight: 600;
}

.inbox-list .when {
  font-size: var(--tempra-text-meta);
}

.inbox-list .excerpt {
  flex-basis: 100%;
  margin: 0;
  color: var(--tempra-color-muted);
}

/* 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 3, TEMPRA-106; tempra-dev: app/reader): the sheet's bar, a slim review
 * bar while the text shows changes, then three columns: the contents in the left margin, the text
 * (title, description, byline, body, sources), the comments in the right margin. The sheet's width
 * decides what fits (container queries on `sheet`, the sheet's scroller), and it tells the app how
 * comments are shown through `--comments-mode`: in the margin, a sheet over the right side, or a
 * sheet from the bottom.
 */

.concept {
  --comments-mode: margin;
}

.concept-grid {
  display: grid;
  grid-template-columns:
    [contents] minmax(0, 1fr)
    [text] minmax(0, var(--tempra-column-text))
    [rest] minmax(0, 1fr);
  column-gap: var(--tempra-margin-gap);
  padding: 0 var(--tempra-sheet-pad) 140px;
}

/* Comments on: the text moves left to make room for the margin beside it. */
.concept.comments-on .concept-grid {
  grid-template-columns:
    [contents] minmax(0, 1fr)
    [text] minmax(0, var(--tempra-column-text))
    [comments] var(--tempra-margin-comments)
    [rest] minmax(0, 0.5fr);
}

.concept .doc {
  grid-row: 1;
  grid-column: text;
  min-width: 0;
  padding-top: 40px;
}

/* The contents: a short list of headings in small grey type beside the text, kept in view. */
.concept-contents {
  position: sticky;
  top: calc(var(--tempra-bar) + 48px);
  grid-row: 1;
  grid-column: contents;
  justify-self: end;
  align-self: start;
  width: min(100%, var(--tempra-margin-contents));
  margin-top: 220px;
}

.toc {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--tempra-text-meta);
  line-height: 1.4;
}

.toc a {
  display: block;
  padding: 4px 0;
  color: var(--tempra-color-faint);
  text-decoration: none;
}

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

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

/* The Contents item in "…" is for when the margin cannot show them. */
.concept.has-contents .more-contents {
  display: none;
}

/* 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: 500;
  line-height: 1.15;
  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: 1.5;
}

/* ---------- The byline: who wrote this version, its versions, where it stands ---------- */

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--tempra-color-border);
  font-size: var(--tempra-text-ui);
}

.byline-who,
.byline-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Where it stands with the reader keeps to the right, also when the byline wraps. */
.byline-state {
  margin-left: auto;
}

.byline-name strong {
  font-weight: 500;
}

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

/* "6 versions": a quiet grey pill that opens the history menu. */
.byline-versions {
  padding: 2px 8px;
  border: 0;
  border-radius: var(--tempra-radius-mark);
  background: var(--tempra-color-ground);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
}

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

.verification {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tempra-color-muted);
  text-decoration: none;
}

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

/* Verified: a filled mark in ink; anything else: a hollow one. Never a colour. */
.state-mark {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentcolor;
  border-radius: 50%;
}

.state-mark.verified {
  border-color: var(--tempra-color-text);
  background: var(--tempra-color-text);
}

.byline-state .button {
  padding: 3px 12px;
  font-size: var(--tempra-text-ui);
}

/* The history menu under the byline: the last verification, the latest versions, all of them. */
.byline .menu-list {
  min-width: 22rem;
  max-width: min(26rem, calc(100vw - 32px));
}

.history-head {
  padding: 6px 10px 8px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.menu-list a.history-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.menu-list a.history-row.current {
  background: var(--tempra-color-ground);
}

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

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

.history-who {
  font-weight: 500;
}

.history-note {
  overflow: hidden;
  color: var(--tempra-color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-when {
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

.menu-list .history-all {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

/* All versions, in a dialog: one row per event. */
.history {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-top: 1px solid var(--tempra-color-border);
  font-size: var(--tempra-text-ui);
}

.history li.current {
  background: var(--tempra-color-ground);
}

.history li.verify .history-what > a,
.history li.verify .history-what {
  font-weight: 500;
}

.history .history-what {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 8px;
}

.history .history-note {
  flex-basis: 100%;
  white-space: normal;
}

.history .history-when a {
  color: inherit;
}

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

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

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

.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 end of the body: sources, the Markdown view ---------- */

.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: 600;
}

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

.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: 1.45;
}

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

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

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

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

.raw-markdown pre {
  margin: 0 0 var(--tempra-space-2);
  padding: 16px 18px;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  font-size: var(--tempra-text-ui);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Properties and agent notes (dialogs from "…") ---------- */

.facts {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 6px 12px;
  margin: 0 0 var(--tempra-space-3);
  font-size: var(--tempra-text-meta);
}

.facts > div {
  display: contents;
}

.facts dt {
  color: var(--tempra-color-faint);
  font-family: var(--tempra-font-mono);
  font-size: var(--tempra-text-label);
  line-height: 1.6;
}

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

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

.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 sheet's width decides ---------- */

/* No room for the contents beside the text and the comments: they move into "…". */
@container sheet (width < 1280px) {
  .concept.comments-on .concept-contents {
    display: none;
  }

  .concept.comments-on .more-contents {
    display: block;
  }
}

@container sheet (width < 1100px) {
  .concept-contents {
    display: none;
  }

  .concept.has-contents .more-contents {
    display: block;
  }
}

/* No room for a margin: the comments open as a sheet over the right side of the page, and the
   text keeps its column. */
@container sheet (width < 980px) {
  .concept {
    --comments-mode: side;
  }

  .concept.comments-on .concept-grid {
    grid-template-columns:
      [contents] minmax(0, 1fr)
      [text] minmax(0, var(--tempra-column-text))
      [rest] minmax(0, 1fr);
  }
}

/* A phone: one column with a 16px gutter, and comments in a sheet from the bottom. */
@container sheet (width < 640px) {
  .concept {
    --comments-mode: bottom;
  }

  .concept-grid,
  .concept.comments-on .concept-grid {
    grid-template-columns: [text] minmax(0, 1fr);
    padding: 0 16px 96px;
  }

  .concept .doc {
    padding-top: 16px;
  }

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

  .review-bar {
    margin: 0 6px;
  }
}

/*
 * Comments on a concept (take 3, TEMPRA-106; tempra-dev: app/comments). In the margin, each
 * thread sits beside the line its quote is on (the app sets `--slot-y` on each slot, measured and
 * pushed down past the one before); the active one is a card joined to its quote by a hairline,
 * the others one line each. Where there is no margin, the same list is a sheet over the right side
 * of the page, or on a phone a sheet from the bottom. Lines and greys only: no colour.
 */

.concept-comments {
  grid-row: 1;
  grid-column: comments;
  min-width: 0;
  padding-top: 40px;
  font-size: var(--tempra-text-ui);
}

.comments-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

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

.comments-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

/* In the margin, slots are placed by the app; in a sheet they stack. */
.comments-slots {
  position: relative;
  min-height: var(--margin-height, 0);
}

.concept-comments.margin .slot {
  position: absolute;
  top: var(--slot-y, 0);
  right: 0;
  left: 0;
}

.concept-comments:not(.margin) .comments-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The hairline from the active thread's quote to the thread, across the gap. */
.thread-line {
  position: absolute;
  top: calc(var(--line-y, 0) + 0.8em);
  left: calc(-1 * var(--tempra-margin-gap));
  width: calc(var(--tempra-margin-gap) - 8px);
  border-top: 1px solid var(--tempra-color-border-strong);
}

.concept-comments:not(.margin) .thread-line {
  display: none;
}

/* A thread's quote is beside it in the margin; in a sheet it is shown with the thread. */
.concept-comments.margin .thread-quote {
  display: none;
}

/* A collapsed thread: one line, who, the first words, when. */
.thread.collapsed {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tempra-row);
  padding: 4px 8px;
  border: 0;
  border-radius: var(--tempra-radius-row);
  background: transparent;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  text-align: left;
}

.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: 8px;
}

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

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

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

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

.thread.resolved {
  opacity: 0.7;
}

/* 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: 500;
}

.said-by time,
.said-change {
  color: var(--tempra-color-faint);
  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: 1.45;
  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: 1.45;
  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);
}

/* No margin: a sheet over the right side of the page, under the sheet's bar. */
.concept-comments.side,
.concept-comments.bottom {
  position: fixed;
  z-index: 5;
  overflow: auto;
  padding: 12px 14px 20px;
  border: 1px solid var(--tempra-color-border);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
}

.concept-comments.side {
  top: calc(var(--tempra-gutter) + var(--tempra-bar));
  right: calc(var(--tempra-gutter) + 1px);
  bottom: calc(var(--tempra-gutter) + 1px);
  width: min(340px, calc(100vw - 4 * var(--tempra-gutter)));
  border-radius: var(--tempra-radius-card);
}

/* A phone: a sheet from the bottom of the screen. */
.concept-comments.bottom {
  right: 0;
  bottom: 0;
  left: 0;
  max-height: 75dvh;
  border-bottom: 0;
  border-radius: var(--tempra-radius-card) var(--tempra-radius-card) 0 0;
}

.concept-comments.bottom .comments-head {
  position: sticky;
  top: -12px;
  margin: -12px -14px 4px;
  padding: 4px 6px 4px 14px;
  background: var(--tempra-color-bg);
}

.concept-comments.bottom .thread.collapsed {
  min-height: var(--tempra-touch);
}

/*
 * The person's views of a library (take 3, TEMPRA-106; tempra-dev: app/home, app/needs-you,
 * app/activity, app/workspace): the library's home, Needs you, Activity and a folder. Quiet pages
 * in one column: a header, then sections of rows with hairlines between them.
 */

/* ---------- 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;
}

.view-title {
  margin: 0;
  font-family: var(--tempra-font-reader);
  font-size: var(--tempra-text-title);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

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

/* "Live": a small ink dot before the line. */
.view-live {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-2);
}

.view-live::before {
  content: "";
  flex: none;
  width: var(--tempra-dot);
  height: var(--tempra-dot);
  border-radius: 50%;
  background: var(--tempra-color-text);
}

/* 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: 600;
}

.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;
}

/* An outlined pill that stays pressed: ink edge and a grey fill when on. */
.pill-toggle {
  color: var(--tempra-color-muted);
}

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

@media (max-width: 900px) {
  .view-title {
    font-size: var(--tempra-text-page);
  }

  .view-filters button,
  .view-filters select {
    min-height: var(--tempra-touch);
  }

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

/* ---------- Home ---------- */

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

/* Who works here: their marks overlapping, each ringed in the sheet's white. */
.home-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-2);
  margin-top: var(--tempra-space-1);
}

.face-stack {
  display: flex;
}

.face-stack .avatar-mark {
  box-sizing: content-box;
  width: var(--tempra-avatar-small);
  height: var(--tempra-avatar-small);
  border: 2px solid var(--tempra-color-bg);
  font-size: 8px;
}

.face-stack .avatar-mark + .avatar-mark {
  margin-left: -6px;
}

/* Needs you: rows between hairlines, each one link. */
.need-rows {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tempra-color-border);
  list-style: none;
}

.need-rows > li {
  border-bottom: 1px solid var(--tempra-color-border);
}

.need-row {
  display: grid;
  grid-template-columns: var(--tempra-avatar) minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-height: var(--tempra-touch);
  padding: 12px 4px;
  color: var(--tempra-color-text);
  text-decoration: none;
}

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

.need-row svg {
  margin-top: 3px;
}

.need-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.need-when {
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

.home-entries {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-1);
}

/* A phone: no glyphs beside the needs, as on the board; the time stays at the right. */
@media (max-width: 900px) {
  .need-row {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 12px 0;
  }

  .need-row svg {
    display: none;
  }
}

/* ---------- Needs you ---------- */

/* One column: the header, then a section per kind of need. */
.needs {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

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

.needs-section {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-2);
}

.needs-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}

.needs-section-head h2 {
  margin: 0;
  font-size: var(--tempra-text-ui);
}

.needs-count {
  color: var(--tempra-color-faint);
  font-weight: 400;
}

.needs-note {
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-meta);
}

/* A section's rows: one box, hairlines between them. */
.needs-box {
  margin: 0;
  padding: 0;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  list-style: none;
  overflow: hidden;
}

.needs-box > li + li {
  border-top: 1px solid var(--tempra-color-border);
}

.needs-row {
  display: grid;
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
}

/* A thread waiting on a reply: the whole row is the link to it. */
.needs-reply {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  color: var(--tempra-color-text);
  text-decoration: none;
}

.needs-reply:hover {
  background: var(--tempra-color-hover);
}

.needs-reply b {
  font-weight: 500;
}

.needs-verify {
  grid-template-columns: minmax(0, 1fr) minmax(0, 160px) auto;
}

.needs-stale {
  grid-template-columns: minmax(0, 1fr) auto;
}

.needs-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.needs-title {
  color: var(--tempra-color-text);
  font-weight: 500;
  text-decoration: none;
}

.needs-title:hover {
  text-decoration: underline;
}

.needs-meta {
  overflow: hidden;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.needs-for,
.needs-by,
.needs-asked {
  color: var(--tempra-color-muted);
}

.needs-by,
.needs-when,
.needs-asked {
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

.needs-when {
  color: var(--tempra-color-faint);
}

.needs-by {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Review (a link) and Ask an agent (a button): the same outlined pill. */
.needs-more {
  align-self: flex-start;
}

.needs-error {
  margin: 0;
  font-size: var(--tempra-text-meta);
  font-weight: 500;
}

/* The agents' share: one quiet, collapsed line. */
.needs-housekeeping {
  padding: 12px 14px;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.needs-housekeeping p {
  margin: var(--tempra-space-2) 0 0;
}

/* A phone: who and the action go under the title; pills are touch targets. */
@media (max-width: 900px) {
  .needs-verify,
  .needs-stale {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .needs-verify .needs-main,
  .needs-stale .needs-main {
    grid-column: 1 / -1;
  }

  .needs-stale .button,
  .needs-stale button,
  .needs-stale .needs-asked {
    grid-column: 2;
  }

  .needs-reply {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .needs-reply .needs-when {
    grid-column: 2;
  }

  .needs-row .button,
  .needs-row button,
  .needs-more {
    min-height: var(--tempra-touch);
  }
}

/* ---------- 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 on a faint fill with a dot at the right. */
.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);
}

.entry.new {
  background: var(--tempra-color-ground);
}

.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-who {
  font-weight: 500;
}

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

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

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

.entry-titles {
  margin: 0;
  overflow: hidden;
  color: var(--tempra-color-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 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-faint);
  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-faint);
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

/* On the home: smaller marks, no fill, the note in the body's face. */
.entry.compact {
  padding: 6px 0;
  background: none;
}

.entry.compact > .avatar-mark {
  width: var(--tempra-avatar-small);
  height: var(--tempra-avatar-small);
  font-size: 8px;
}

.entry.compact .entry-line {
  font-size: var(--tempra-text-ui);
}

.entry.compact .entry-note {
  font-family: inherit;
  font-size: var(--tempra-text-ui);
}

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

  .entry.compact .entry-note,
  .entry.compact .entry-titles {
    display: none;
  }
}

/* ---------- A folder ---------- */

.folder {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

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

/* Rows between hairlines: subfolders first, then concepts. */
.folder-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tempra-color-border);
  list-style: none;
}

.folder-list > li {
  border-bottom: 1px solid var(--tempra-color-border);
}

.folder-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 170px) 56px;
  align-items: center;
  gap: 20px;
  padding: 13px 6px;
  color: var(--tempra-color-text);
  text-decoration: none;
}

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

.folder-sub {
  grid-template-columns: minmax(0, 1fr) auto;
}

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

.folder-title,
.folder-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.folder-title {
  font-weight: 500;
}

.folder-sub .folder-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

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

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

.folder-by {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-meta);
  white-space: nowrap;
}

.folder-by .avatar-mark {
  width: var(--tempra-avatar-small);
  height: var(--tempra-avatar-small);
  font-size: 8px;
}

.folder-marks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-variant-numeric: tabular-nums;
}

.folder-threads {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Trust as a dot: filled in ink when a person verified the current version, hollow when not. */
.folder-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--tempra-color-muted);
  border-radius: 50%;
  vertical-align: middle;
}

.folder-dot.verified {
  background: var(--tempra-color-muted);
}

/* A phone: who and the marks go on a second line; the controls are touch targets. */
@media (max-width: 900px) {
  .folder-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .folder-row .folder-main {
    grid-column: 1 / -1;
  }

  .folder-sub .folder-main {
    grid-column: auto;
  }
}

/*
 * 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: 600;
  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-sheet-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-faint);
  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: 1.5;
}

.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: 600;
}

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

/* 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-faint);
  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);
  }
}