/*
 * 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. No colour on purpose; 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: 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: 10px; /* the frame's gutter */

  /* Shape */
  --tempra-radius: 5px; /* code */
  --tempra-radius-mark: 3px;
  --tempra-radius-row: 8px; /* tree rows, inputs */
  --tempra-radius-box: 12px; /* cards, list rows */
  --tempra-radius-card: 16px; /* the sheet, panels */
  --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 a ghost; .primary is the one solid action. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

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

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

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) {
  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. Rules between rows, none between columns; the header is told
 * apart by a rule in the text colour, not by weight (a first column is often bold already).
 */
.prose .table {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.prose table {
  border-collapse: collapse;
  font-size: 0.88em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.5;
}

.prose th,
.prose td {
  padding: 0.55em 1.25em 0.55em 0;
  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 th:last-child,
.prose td:last-child {
  padding-right: 0;
}

.prose th {
  border-bottom-color: var(--tempra-color-text);
  font-weight: 600;
  vertical-align: bottom;
}

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

.prose img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.6em 0;
  border-radius: var(--tempra-radius-row);
}

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

/* 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; solid when its thread
 * is the one in focus); 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) {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  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 Contents & sources panel. */
.note > p {
  margin: 0;
}

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

/* Threads, in the Comments panel. */
.threads {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.thread {
  padding: 4px 2px;
  border-radius: var(--tempra-radius-row);
}

.thread.active {
  outline: 1px solid var(--tempra-color-border-strong);
  outline-offset: 4px;
}

.thread-by {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--tempra-text-meta);
}

.thread-by strong {
  font-weight: 500;
}

.thread-by time,
.thread-by .faint {
  color: var(--tempra-color-faint);
}

/* A reply sits a step in from the thread's first comment. */
.thread .reply {
  padding-left: 12px;
}

.quote {
  margin: 0 0 10px;
  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;
}

.comment {
  margin: 2px 0 10px;
  font-size: var(--tempra-text-ui);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The composer: a pill until it is used, then a card with the quote, the text and the actions. */
.comment-form textarea,
.reply-form textarea {
  display: block;
  width: 100%;
  min-height: 2.25rem;
  border: 0;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  resize: vertical;
}

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

.comment-form textarea {
  min-height: 4rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.comment-form textarea:focus-visible {
  outline: none;
}

.comment-form.idle {
  padding: 0;
  background: none;
}

.comment-form.idle textarea {
  min-height: 0;
  height: 2.25rem;
  padding: 8px 14px;
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-ground);
  resize: none;
}

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

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

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

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

/* The concept as stored (the Markdown view): the file's own text, exactly as an agent reads it. */
.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;
}

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

/*
 * The app's frame (TEMPRA-19, take 2 in TEMPRA-53). A soft ground; on it the header, the sidebar
 * (no box) and the open file as a floating sheet; the concept's context as one panel at a time,
 * a card beside the sheet, opened from a control cluster that hovers over the sheet's top right.
 * Account pages sit on the same ground in a centred column. Under 1100px the panel overlays the
 * sheet; under 900px the sidebar becomes a drawer.
 */
body:has(> #root),
body.ground {
  padding: 0;
  background: var(--tempra-color-ground);
}

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

.brand {
  color: var(--tempra-color-text);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

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

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

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

/* A dot on a glyph: open comments exist. */
.icon-button .dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--tempra-color-bg);
  border-radius: 50%;
  background: currentcolor;
}

/* ---------- 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,
.ws-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 ---------- */

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

.workspace.has-panel {
  grid-template-columns: 232px minmax(0, 1fr) 320px;
  grid-template-areas:
    "header header header"
    "sidebar main panel";
}

.ws-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 6px 0 10px;
}

.ws-files {
  display: none;
}

/* The sidebar sits on the ground: the search pill, the tree (which scrolls), the views. */
.ws-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 8px 4px 0;
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
  padding: 6px 8px 6px 12px;
  box-shadow: var(--tempra-shadow);
  color: var(--tempra-color-faint);
  text-align: left;
}

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

.search-pill span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* The tree: nested lists, one 30px row per folder or file, indented 14px a level. A folder's row
   is a button that opens and closes it (a chevron turns); a file's row is a link. */
.tree,
.tree ul,
.ws-views {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.tree li {
  margin: 0;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-bottom: 2px;
  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);
  font-weight: 500;
  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-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-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 in the last minutes, ∗ changed since the last visit, open comments,
   a clock (stale) or an hourglass (stale soon). */
.tree-mark {
  flex: none;
  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);
}

.ws-views {
  margin-top: 20px;
}

.ws-views a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  margin-bottom: 2px;
  padding: 0 10px 0 28px;
  border-radius: var(--tempra-radius-row);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
  text-decoration: none;
}

.ws-views a:hover {
  background: var(--tempra-color-hover);
}

.ws-views a[aria-current="page"] {
  background: var(--tempra-color-selected);
  color: var(--tempra-color-text);
  font-weight: 500;
}

.ws-views .count {
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-label);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* The sheet: the open file on its own card, scrolling inside. */
.ws-main {
  grid-area: main;
  position: relative;
  min-width: 0;
  overflow: hidden auto;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
}

/* A library view or folder in the sheet: a wider column than a concept's. */
.sheet-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px clamp(16px, 5%, 40px) 96px;
}

/* The library's root: no document open, the sheet blank. */
.empty {
  min-height: 50vh;
}

/* A concept in the sheet: the reader's column. */
.doc {
  max-width: var(--tempra-measure);
  margin: 0 auto;
  padding: 56px clamp(16px, 5%, 40px) 140px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
  color: var(--tempra-color-faint);
  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-muted);
}

.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 control cluster: a pill that hovers at the sheet's top right while it scrolls. */
.cluster {
  position: sticky;
  top: 12px;
  z-index: 3;
  display: flex;
  gap: 2px;
  width: max-content;
  margin: 12px 12px -50px auto;
  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);
}

.cluster-sep {
  align-self: center;
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: var(--tempra-color-border);
}

/* A newer version exists: the glyph pulses until it is opened. */
@keyframes tempra-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.new-version {
  position: relative;
}

.new-version .icon-button {
  color: var(--tempra-color-text);
}

.new-version .icon-button svg {
  animation: tempra-pulse 1.6s ease-in-out infinite;
}

.new-version .icon-button[aria-expanded="true"] svg {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .new-version .icon-button svg {
    animation: none;
  }
}

/* A short note inside a menu (the new version's who and why). */
.menu-list p {
  margin: 4px 10px 6px;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  line-height: 1.45;
}

/* The panel: one card beside the sheet, its own scroll. */
.ws-panel {
  grid-area: panel;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  font-size: var(--tempra-text-ui);
}

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

.panel-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  background: var(--tempra-color-bg);
}

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

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

.panel-head .spacer {
  flex: 1;
}

.panel-close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tempra-color-faint);
  font-size: 14px;
  line-height: 1;
}

.panel-close:hover:not(:disabled) {
  color: var(--tempra-color-text);
}

.panel-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 16px 16px;
}

.panel-body section > :last-child {
  margin-bottom: 0;
}

.panel-body ul,
.panel-body ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--tempra-color-faint);
  font-size: var(--tempra-text-meta);
}

.panel-foot a {
  color: inherit;
}

/* A one-line state with a dot (verified, unverified). */
.state-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--tempra-text-meta);
  color: var(--tempra-color-muted);
}

.state-line::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1px solid var(--tempra-color-text);
  border-radius: 50%;
  transform: translateY(-1px);
}

.state-line.on::before {
  background: var(--tempra-color-text);
}

/* Name and value pairs (the Review panel's facts, the Properties panel). */
.facts {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 6px 10px;
  margin: 0;
  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 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

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

/* A card in a panel (a work item, the verify form). */
.inset {
  padding: 10px 12px;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  font-size: var(--tempra-text-meta);
  line-height: 1.45;
}

.inset .chip {
  background: var(--tempra-color-bg);
}

.inset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

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

/* Contents: a rule down the left, the section in view marked. */
.toc a {
  display: block;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--tempra-color-border);
  color: var(--tempra-color-muted);
  text-decoration: none;
}

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

.toc .depth-1 a {
  padding-left: 22px;
}

.toc .depth-2 a {
  padding-left: 34px;
}

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

.sources .num {
  color: var(--tempra-color-faint);
}

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

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

.linked li {
  margin-bottom: 4px;
  font-size: var(--tempra-text-meta);
}

/* History rows: seq, what and who, when. */
.history li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px 2px;
  border-top: 1px solid var(--tempra-color-border);
  font-size: var(--tempra-text-meta);
  line-height: 1.4;
}

.history li > span {
  min-width: 0;
}

.history .seq {
  color: var(--tempra-color-muted);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.history .verify .seq {
  font-weight: 600;
}

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

.history .who {
  color: var(--tempra-color-muted);
}

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

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

.history .when a {
  color: inherit;
}

/* ---------- 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: light-dark(rgb(20 20 22 / 0.2), rgb(0 0 0 / 0.5));
}

.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 ---------- */

/* Under 1100px the panel overlays the sheet, below the cluster so the cluster stays in reach. */
@media (max-width: 1100px) {
  .workspace.has-panel {
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "sidebar main";
  }

  .ws-panel {
    position: fixed;
    top: 112px;
    right: var(--tempra-gutter);
    bottom: var(--tempra-gutter);
    z-index: 5;
    width: min(320px, calc(100vw - 20px));
  }
}

/* Under 900px the sidebar is a drawer behind the Files button. */
@media (max-width: 900px) {
  .workspace,
  .workspace.has-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main";
  }

  .ws-files {
    display: inline-flex;
  }

  .ws-sidebar {
    position: fixed;
    top: 48px;
    bottom: var(--tempra-gutter);
    left: var(--tempra-gutter);
    z-index: 6;
    display: none;
    width: min(280px, calc(100vw - 20px));
    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;
  }

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