/*
 * Inter (rsms.me/inter, SIL Open Font License 1.1, design/fonts/OFL.txt), self-hosted: the
 * variable font with weight and optical-size axes, so one family gives the display cut at large
 * sizes and the text cut at reading sizes (tempra-dev decisions/one-face.md). From
 * @fontsource-variable/inter 5.3.0, split by script; a browser fetches only the subsets a page
 * uses (unicode-range). The app's build points the URLs at hashed copies the Worker serves.
 */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-cyrillic-ext-opsz-normal.e3a8d2d7497a.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-cyrillic-opsz-normal.e1dea13a93c6.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-greek-ext-opsz-normal.e0f32d9ee75a.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-greek-opsz-normal.93c5ac80e25c.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-vietnamese-opsz-normal.935ab355938e.woff2") format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-latin-ext-opsz-normal.5e6d4fe9d9f4.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-latin-opsz-normal.2c295d99e26d.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-cyrillic-ext-opsz-italic.4ee1c3b9f5a9.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-cyrillic-opsz-italic.cd3d9beabd6f.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-greek-ext-opsz-italic.f21ed36275ab.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-greek-opsz-italic.94fd1ce2533a.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-vietnamese-opsz-italic.d102ea2c86a5.woff2") format("woff2");
  unicode-range:
    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-latin-ext-opsz-italic.cd92c8740f77.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/_design/inter-latin-opsz-italic.c58f9d530baa.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Tempra design tokens: the one place values live (TEMPRA-8). Two tiers: the palette's
 * primitives (--tempra-white, --tempra-grey-warm-*, --tempra-grey-cool-*, --tempra-orange-* and
 * the chart hues), raw values that only this file reads, and the roles every stylesheet uses, each
 * named --tempra-<group>-<name>: color, focus, font, text (sizes), weight, leading, measure, space,
 * size, radius, motion, shadow. A colour role is light-dark() over two primitives. Take 2 of the
 * design (TEMPRA-53, design/handoff/layout-take-2) set structure and type: neutral greys, a type
 * scale, radii and one soft shadow. Take 3
 * (TEMPRA-106) set the frame's sizes and squarer corners, and take 4 (TEMPRA-113,
 * design/handoff/layout-take-4) the top bar, the wider sidebar and the panel. The one colour before
 * the palette is the agent's: the change dot that pulses while an agent writes, and its ink. The
 * palette (TEMPRA-1) changes values here and both the app and the site follow. Light and dark come
 * from the system through light-dark(), or from the account's theme on the root (data-theme).
 *
 * What stays literal in the CSS: 1px (hairlines, and the 1px between rows), 2px rules and
 * underlines (a quote's rule, the active comment), 50% for a circle, 0, unitless flex and grid
 * factors, em inside .prose (its rhythm scales with the reading size), and a component's own
 * one-off dimension, commented where it is used. Breakpoints too: a media or container query
 * cannot read a token.
 */
:root {
  color-scheme: light dark;

  /* Palette: the primitives (TEMPRA-251), one tier below the colours. Raw values with
     no role, each named by its family and its OKLCH lightness x1000, as the space scale is named by
     its px: --tempra-grey-warm-964 is #f3f3f1 at L 0.964. Only the colour tokens below read them;
     a stylesheet never does (design.test.ts), so a theme or the palette (TEMPRA-1) changes which
     primitive a role points at, here, and nothing else. Two greys: warm (hue about 107) for the
     light scheme's surfaces and lines, cool (hue 286) for ink and the dark scheme's surfaces. Each
     value the colours used is kept exactly, near twins included (cool-287 and cool-286, cool-601
     and cool-594); folding them into a ramp is the palette's call. */
  --tempra-white: #ffffff;

  /* Palette: warm greys */
  --tempra-grey-warm-964: #f3f3f1;
  --tempra-grey-warm-951: #efefeb;
  --tempra-grey-warm-943: #ececea;
  --tempra-grey-warm-933: #e9e9e6;
  --tempra-grey-warm-930: #e8e8e4;
  --tempra-grey-warm-909: #e1e1dd;
  --tempra-grey-warm-899: #dededa;
  --tempra-grey-warm-893: #dcdcd6;
  --tempra-grey-warm-863: #d2d2ce;

  /* Palette: cool greys */
  --tempra-grey-cool-717: #a3a3a7;
  --tempra-grey-cool-687: #9a9a9e;
  --tempra-grey-cool-635: #8a8a8e;
  --tempra-grey-cool-601: #808084;
  --tempra-grey-cool-594: #7e7e82;
  --tempra-grey-cool-519: #68686c;
  --tempra-grey-cool-494: #616165;
  --tempra-grey-cool-358: #3c3c40;
  --tempra-grey-cool-350: #3a3a3d;
  --tempra-grey-cool-342: #38383c;
  --tempra-grey-cool-287: #2a2a2e;
  --tempra-grey-cool-286: #2a2a2d;
  --tempra-grey-cool-253: #222225;
  --tempra-grey-cool-223: #1b1b1d;
  --tempra-grey-cool-218: #1a1a1b;
  --tempra-grey-cool-183: #121214;
  --tempra-grey-cool-164: #0e0e0f;
  --tempra-grey-cool-145: #0a0a0b;

  /* Palette: orange, the agent's (and the chart's second series) */
  --tempra-orange-728: #f0884a;
  --tempra-orange-680: #e8722a;
  --tempra-orange-671: #eb6834;
  --tempra-orange-622: #d95926;
  --tempra-orange-509: #9e4a1a;

  /* Palette: the chart series' other hues (TEMPRA-217), a light and a dark step each */
  --tempra-blue-622: #3987e5;
  --tempra-blue-575: #2a78d6;
  --tempra-aqua-669: #1baf7a;
  --tempra-aqua-621: #199e70;
  --tempra-yellow-764: #eda100;
  --tempra-yellow-670: #c98500;
  --tempra-magenta-716: #e87ba4;
  --tempra-magenta-622: #d55181;
  --tempra-green-529: #008300;
  --tempra-violet-670: #9085e9;
  --tempra-violet-527: #6250d6;
  --tempra-red-669: #e66767;
  --tempra-red-623: #e34948;

  /* Color: surfaces */
  --tempra-color-bg: light-dark(
    var(--tempra-white),
    var(--tempra-grey-cool-223)
  ); /* the page, panels, pills */
  --tempra-color-ground: light-dark(
    var(--tempra-grey-warm-964),
    var(--tempra-grey-cool-183)
  ); /* the page under them, inset fills */
  --tempra-color-hover: light-dark(var(--tempra-grey-warm-933), var(--tempra-grey-cool-253));
  --tempra-color-selected: light-dark(var(--tempra-grey-warm-909), var(--tempra-grey-cool-287));
  --tempra-color-selection: light-dark(var(--tempra-grey-warm-899), var(--tempra-grey-cool-350));

  /* Color: text, in three steps. Text people read is text or muted, at least 4.5:1 on every
     surface in light and dark (TEMPRA-132; design/contrast.test.ts). Faint is under that: icons,
     rules and disabled controls only, never words. */
  --tempra-color-text: light-dark(var(--tempra-grey-cool-218), var(--tempra-grey-warm-943));
  --tempra-color-muted: light-dark(var(--tempra-grey-cool-494), var(--tempra-grey-cool-687));
  --tempra-color-faint: light-dark(var(--tempra-grey-cool-717), var(--tempra-grey-cool-519));

  /* Color: lines */
  --tempra-color-border: light-dark(var(--tempra-grey-warm-930), var(--tempra-grey-cool-286));
  --tempra-color-border-strong: light-dark(
    var(--tempra-grey-warm-863),
    var(--tempra-grey-cool-358)
  );

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

  /* Color: the agent's (the only colour before the palette): the change dot, pulsing while an
     agent writes now (take 4), and Tempra's own agent's round mark */
  --tempra-color-agent: light-dark(var(--tempra-orange-680), var(--tempra-orange-728));
  /* The same colour deep enough to sit in words (TEMPRA-219): the highlight that moves across
     the name of a file an agent is at now, and its static mark under reduced motion. At least
     4.5:1 on every surface, as text is (design/contrast.test.ts). */
  --tempra-color-agent-ink: light-dark(var(--tempra-orange-509), var(--tempra-orange-728));
  /* A letter on the agent colour: Tempra's own agent's round mark (TEMPRA-223). Dark in both
     schemes, at least 4.5:1 on the colour (design/contrast.test.ts). */
  --tempra-color-on-agent: light-dark(var(--tempra-grey-cool-218), var(--tempra-grey-cool-218));

  /* Color: commented text in a concept's body (TEMPRA-223), greys only: an open thread's quote on
     a soft fill over a solid mid-grey underline, the thread in focus on a deeper fill with an ink
     underline. Text keeps at least 4.5:1 on both fills, and the underline 3:1 on the soft fill
     and the page (design/contrast.test.ts). */
  --tempra-color-comment: light-dark(var(--tempra-grey-warm-951), var(--tempra-grey-cool-287));
  --tempra-color-comment-active: light-dark(
    var(--tempra-grey-warm-893),
    var(--tempra-grey-cool-342)
  );
  --tempra-color-comment-line: light-dark(var(--tempra-grey-cool-594), var(--tempra-grey-cool-601));

  /* Color: chart series (TEMPRA-217). The agreed exception to "no colour until the palette"
     besides the agent's, for a Vega-Lite chart's series and categories only: greys cannot tell
     two lines apart. Axes, grid and text stay grey. Eight hues in a fixed order, each stepped for
     its scheme, checked against the page (--tempra-color-bg) with the dataviz validator: adjacent
     pairs apart under protanopia and deuteranopia, every pair apart to normal vision; three light
     steps sit under 3:1 on white, so a chart keeps its legend (design/contrast.test.ts). The
     palette (TEMPRA-1) may replace them. */
  --tempra-color-chart-1: light-dark(var(--tempra-blue-575), var(--tempra-blue-622)); /* blue */
  --tempra-color-chart-2: light-dark(
    var(--tempra-orange-671),
    var(--tempra-orange-622)
  ); /* orange */
  --tempra-color-chart-3: light-dark(var(--tempra-aqua-669), var(--tempra-aqua-621)); /* aqua */
  --tempra-color-chart-4: light-dark(
    var(--tempra-yellow-764),
    var(--tempra-yellow-670)
  ); /* yellow */
  --tempra-color-chart-5: light-dark(
    var(--tempra-magenta-716),
    var(--tempra-magenta-622)
  ); /* magenta */
  --tempra-color-chart-6: light-dark(var(--tempra-green-529), var(--tempra-green-529)); /* green */
  --tempra-color-chart-7: light-dark(
    var(--tempra-violet-527),
    var(--tempra-violet-670)
  ); /* violet */
  --tempra-color-chart-8: light-dark(var(--tempra-red-623), var(--tempra-red-669)); /* red */

  /* Color: a dimmed page behind an overlaid panel, the phone's drawer or sheet, or a dialog */
  --tempra-color-scrim: light-dark(rgb(20 20 22 / 0.2), rgb(0 0 0 / 0.5));

  /* Color: the dark frame an attachment is shown on (take 4, board 28), and a mark on it */
  --tempra-color-frame: light-dark(var(--tempra-grey-cool-164), var(--tempra-grey-cool-145));
  --tempra-color-frame-ink: light-dark(var(--tempra-grey-cool-635), var(--tempra-grey-cool-635));

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

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

  /* Type (TEMPRA-108; Inter since 2026-10-23, tempra-dev decisions/one-face.md): one family, Inter
     (fonts.css), in two roles, and the mono for code. The variable font's optical-size axis is the
     pairing: the display cut for titles, the text cut for everything read at reading sizes.
     display: titles and large headings (h1, a view's title, a page's title, the body's h1 and h2,
       an attachment's name, a compose dialog's name), at the display optical size.
     text: everything else (chrome, labels, the byline, a page's body, comments, public pages).
     mono: code, fences, the Markdown view, paths and hashes.
     The system faces after Inter cover what it has no glyphs for. */
  --tempra-font-text:
    "Inter", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Helvetica, sans-serif;
  --tempra-font-display: var(--tempra-font-text);
  --tempra-font-display-settings: "opsz" 32; /* Inter's display cut, at any size it is used */
  --tempra-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

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

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

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

  /* Tracking */
  --tempra-tracking-label: 0.04em; /* uppercase labels */
  --tempra-tracking-title: -0.02em; /* h1 and a view's title */
  --tempra-tracking-doc: -0.01em; /* a concept's title */

  /* Lines: a link's underline sits this far under the text (inside .prose, in em) */
  --tempra-line-offset: 2px;

  /* Measure */
  --tempra-measure: 680px; /* the reader's column, with its padding: diagrams, captions */
  --tempra-measure-reader: 34em; /* concept text: about 66 characters at the reading size */

  /* Space: one scale in rem, so spacing grows with the reader's chosen text size, named by its
     size in px at the default 16px root (take 2 to take 4 used every step below; the palette
     round may thin it). Only these appear as padding, margin, gap and offsets. */
  --tempra-space-02: 0.125rem;
  --tempra-space-04: 0.25rem;
  --tempra-space-06: 0.375rem;
  --tempra-space-08: 0.5rem;
  --tempra-space-10: 0.625rem;
  --tempra-space-12: 0.75rem;
  --tempra-space-14: 0.875rem;
  --tempra-space-16: 1rem;
  --tempra-space-18: 1.125rem;
  --tempra-space-20: 1.25rem;
  --tempra-space-24: 1.5rem;
  --tempra-space-28: 1.75rem;
  --tempra-space-32: 2rem;
  --tempra-space-40: 2.5rem;
  --tempra-space-48: 3rem;
  --tempra-space-56: 3.5rem;
  --tempra-space-72: 4.5rem;
  --tempra-space-96: 6rem;
  --tempra-space-gutter: var(--tempra-space-08); /* the frame's gutter */
  --tempra-space-page: var(--tempra-space-40); /* a page's side padding in its column */
  --tempra-space-figure: var(--tempra-space-12); /* between a group's images */
  /* Inside a control: a button's, a field's and a chip's padding (their 1px border makes up the
     rest of a 30px pill at the UI size) */
  --tempra-space-button: 5px 12px;
  --tempra-space-field: 5px 10px;
  --tempra-space-chip: 1px 7px;

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

  /* Size: a concept's columns (take 4): the text, centred; on the right its contents, or a panel */
  --tempra-size-column-text: 620px;
  --tempra-size-contents: 200px;
  --tempra-size-figure-wide: 960px; /* a wide figure (`layout=wide`), past the text's measure */
  --tempra-size-page: 760px; /* home, Activity, Settings, the account's pages */
  --tempra-size-page-wide: 960px; /* a page column that holds a table (the account's Agents) */

  /* Size: controls and marks */
  --tempra-size-control: 36px; /* the top bar's round buttons and pills */
  --tempra-size-control-small: 30px; /* a round icon button elsewhere */
  --tempra-size-control-mini: 24px; /* a figure's corner tools, a comment mark */
  --tempra-size-icon: 16px; /* a glyph's box: the tree's chevron and file icon */
  --tempra-size-icon-small: 12px; /* the tree's chevron itself */
  --tempra-size-avatar: 22px; /* someone's round mark */
  --tempra-size-avatar-small: 20px; /* in a compact thread */
  --tempra-size-avatar-menu: 26px; /* the avatar button that opens the account menu */
  --tempra-size-avatar-large: 32px; /* at the head of the account menu */
  --tempra-size-tile: 24px; /* a library's initial */
  --tempra-size-tile-small: 20px; /* in a row: the sidebar, a menu, the bell */
  --tempra-size-tile-large: 28px; /* the Tempra mark, a library card's cover */
  --tempra-size-badge: 16px; /* the bell's count */
  --tempra-size-dot: 6px; /* an agent's change, the agent replying */
  --tempra-size-fab: 56px; /* a page's actions, floating */

  /* Size: cards and dialogs */
  --tempra-size-dialog: 32rem;
  --tempra-size-dialog-wide: 40rem; /* a wide or compose dialog */
  --tempra-size-media: 32rem; /* audio, a PDF's card and a broken figure in the full-screen view and on an attachment's page */
  --tempra-size-menu: 13rem; /* a menu's least width */
  --tempra-size-popover: 360px; /* the bell's panel */
  --tempra-size-card: 240px; /* a library card's least width, the page's actions menu */
  --tempra-size-tooltip: 22rem; /* a hover card */
  --tempra-size-field: 22rem; /* a form field's widest */

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

  /* Motion */
  --tempra-motion-quick: 0.15s; /* a chevron or a + turning */
  --tempra-motion-pulse: 1.6s; /* the change dot's pulse while an agent writes */
  --tempra-motion-shimmer: 2s; /* one pass of the shimmer over a name an agent is at now (TEMPRA-219) */
}

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

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

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

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

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

h1 {
  font-family: var(--tempra-font-display);
  font-variation-settings: var(--tempra-font-display-settings);
  margin: 0 0 var(--tempra-space-16);
  font-size: var(--tempra-text-page);
  font-weight: var(--tempra-weight-medium);
  line-height: var(--tempra-leading-tight);
  letter-spacing: var(--tempra-tracking-title);
}

h2 {
  margin: var(--tempra-space-32) 0 var(--tempra-space-08);
  font-size: var(--tempra-text-base);
  font-weight: var(--tempra-weight-strong);
}

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

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

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

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

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

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

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

code {
  font-size: var(--tempra-text-code);
}

/* 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: var(--tempra-space-chip);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-ground);
  color: var(--tempra-color-muted);
  font-family: inherit;
  font-size: var(--tempra-text-label);
}

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

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

button,
a.button {
  padding: var(--tempra-space-button);
  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-leading-base);
  text-decoration: none;
}

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

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

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

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

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

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

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

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 var(--tempra-space-20);
  padding: 0;
  border: 0;
}

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

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

.field input,
.field select {
  display: block;
  width: 100%;
  max-width: var(--tempra-size-field);
  margin-top: var(--tempra-space-04);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-base);
}

.choice {
  display: flex;
  align-items: baseline;
  gap: var(--tempra-space-08);
  margin: var(--tempra-space-04) 0;
}

.indent {
  margin: var(--tempra-space-02) 0 var(--tempra-space-06) var(--tempra-space-24);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-08);
  margin-top: var(--tempra-space-08);
}

table {
  border-collapse: collapse;
}

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

img {
  max-width: 100%;
}

/* An image whose size is known, until it loads: a quiet grey box at that size (TEMPRA-162). */
img.image-loading {
  background: var(--tempra-color-ground);
}

details > summary {
  cursor: pointer;
}

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

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

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

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

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

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

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

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

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

.chip {
  display: inline-block;
  padding: var(--tempra-space-chip);
  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 and in the page panel MCP `show` draws in a chat. Scoped to .prose. Inter's
 * text cut at the reading size (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-text);
  font-size: var(--tempra-text-reader);
  line-height: var(--tempra-leading-reader);
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-ligatures: common-ligatures;
  /* Lining figures in running text; tables and markers switch to tabular ones. */
  font-variant-numeric: lining-nums proportional-nums;
  /* Quotes and stops hang into the margin where the browser can (Safari). */
  hanging-punctuation: first allow-end;
  /* A long URL or identifier wraps rather than pushing the column wider; words never break. */
  overflow-wrap: break-word;
  hyphens: manual;
  text-size-adjust: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.prose li {
  margin: 0.2em 0;
}

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

.prose li > p {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

/* Code: the mono a step down, no ligatures; inline on the code grey, blocks scroll sideways. */
.prose code {
  padding: 0.1em 0.35em;
  border-radius: var(--tempra-radius-code);
  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: var(--tempra-space-14) var(--tempra-space-18);
  border-radius: var(--tempra-radius-row);
  background: var(--tempra-color-code-bg);
  font-family: var(--tempra-font-mono);
  font-size: 0.8em;
  font-variant-ligatures: none;
  line-height: var(--tempra-leading-base);
  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: var(--tempra-space-32);
}

.prose pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: var(--tempra-space-10);
  left: var(--tempra-space-18);
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-text);
  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-text);
  font-size: 0.82em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: var(--tempra-leading-base);
}

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

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

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

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

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

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

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

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

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

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

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

/*
 * Video, audio and PDF figures (TEMPRA-164; tempra-dev: app/media, How people see). A video
 * spans the column (its controls need the room), its stored width and height giving its shape,
 * with Enlarge in its corner;
 * audio is its controls across the text's column; a PDF is a card: a hairline box with its icon,
 * name, type and size, Open and Download as pills.
 */
.prose .figure-video {
  position: relative;
}

.prose .figure-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
}

.prose .figure-media audio {
  display: block;
  width: 100%;
}

.figure-pdf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-12) var(--tempra-space-16);
  padding: var(--tempra-space-16) var(--tempra-space-18);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
  font-family: var(--tempra-font-text);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-leading-base);
}

.figure-pdf > svg {
  flex: none;
  color: var(--tempra-color-faint);
}

.figure-pdf-about {
  display: flex;
  flex: 1 1 12rem; /* one-off: a PDF card's name, before its actions wrap */
  flex-direction: column;
  min-width: 0;
}

.figure-pdf-name {
  font-weight: var(--tempra-weight-medium);
  overflow-wrap: anywhere;
}

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

.figure-pdf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-08);
}

.figure-pdf-actions a.button {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-06);
  text-decoration: none;
}

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

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

.prose .figure-open:focus-visible {
  outline: var(--tempra-focus-ring);
  outline-offset: 3px; /* one-off: clear of the image's edge */
}

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

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

/* An external image's site, a quiet line under the caption (TEMPRA-163). */
.prose .figure-source {
  display: block;
  color: var(--tempra-color-muted);
}

/*
 * Figure markup (TEMPRA-161; tempra-dev: app/media, Figure markup). Width: `--figure-width`, set on
 * the figure through the CSSOM, caps its images (max-width only, so an image is never drawn wider
 * than its own pixels). Placement, on a concept's page: wide and full reach past the text,
 * centred on the text's column (the page's width, 100cqi of `page`, less --concept-side; the
 * text is --doc-max wide at most with --doc-pad each side, concept.css), never past its padding;
 * wide stops at --tempra-figure-wide. Elsewhere they keep the text's width.
 */
.prose figure.figure-sized:not(.figure-group) .figure-media,
.prose figure.figure-sized:not(.figure-group) .figure-broken {
  max-width: min(100%, var(--figure-width));
}

.prose figure.figure-group.figure-sized .figure-row {
  max-width: min(100%, var(--figure-width));
}

.concept .prose figure.figure-wide {
  --figure-reach: min(var(--tempra-size-figure-wide), var(--figure-column) - 2 * var(--doc-pad));
}

.concept .prose figure.figure-full {
  --figure-reach: calc(var(--figure-column) - 2 * var(--doc-pad));
}

@container page (width >= 0px) {
  .concept .prose figure:is(.figure-wide, .figure-full) {
    --figure-column: calc(100cqi - var(--concept-side));
    --figure-w: max(100%, var(--figure-reach));
    width: var(--figure-w);
    max-width: none;
    margin-left: calc(
      (min(var(--figure-column), var(--doc-max)) - var(--figure-w)) /
      2 -
      var(--doc-pad)
    );
  }
}

/* A frame for screenshots whose edges vanish on the page: a hairline, nothing more. */
.prose figure.figure-framed .figure-media img {
  border: 1px solid var(--tempra-color-border);
}

/* A group: its images side by side in equal columns, each with its title under it; stacked on a
   phone. The newlines between them are text (they count) and are not drawn. */
.prose .figure-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tempra-space-figure);
  align-items: start;
}

.prose .figure-n-3 .figure-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.prose .figure-n-4 .figure-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.prose .figure-gap {
  display: none;
}

.prose .figure-cell {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-06);
  min-width: 0;
}

.prose .figure-label {
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-text);
  font-size: var(--tempra-text-meta);
  line-height: var(--tempra-leading-base);
  user-select: none;
}

@media (max-width: 900px) {
  .prose .figure-row,
  .prose .figure-n-3 .figure-row,
  .prose .figure-n-4 .figure-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A directive the reader does not draw: its opening and closing lines, quiet, as markdown. */
.prose .directive > .raw-fence {
  margin: 0.4em 0;
  font-size: var(--tempra-text-meta);
}

/* 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: var(--tempra-space-04);
  min-height: 12rem; /* one-off: a broken image's box */
  padding: var(--tempra-space-24);
  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-text);
  font-size: var(--tempra-text-meta);
  font-style: normal;
  line-height: var(--tempra-leading-base);
  text-align: center;
  overflow-wrap: anywhere;
}

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

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

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

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

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

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

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

/*
 * What sits around a concept body in the reader (tempra-dev: app/reader): the hover cards and the
 * selection toolbar (popovers in the top layer, placed by the app through --float-x and
 * --float-y), comment highlights (the CSS Custom Highlight API), diagrams and the full-screen
 * view of a figure. The threads are comments.css's, the Markdown view concept.css's. 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: var(--tempra-size-tooltip);
  padding: var(--tempra-space-08) var(--tempra-space-12);
  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-text);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-leading-base);
  text-wrap: pretty;
}

.tooltip p {
  margin: 0;
}

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

/*
 * Comments (TEMPRA-13, TEMPRA-223). An open thread's quote sits on a soft grey fill over a solid
 * mid-grey underline, so it reads as marked at a glance in light and dark (a 1px dotted underline
 * in the text colour read as nothing, and the hover grey as the page); the one whose thread is
 * active in the Comments panel takes a deeper fill and a 2px underline in ink; 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) {
  background-color: var(--tempra-color-comment);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--tempra-color-comment-line);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

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

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

/* The selection toolbar: a pill above the selected text. */
.selection-tools > div {
  display: flex;
  gap: var(--tempra-space-02);
  padding: 3px; /* one-off: the pill's inset around its buttons */
  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-text);
}

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

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

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

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

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

/* The font is set here, on the figure's container, not on the svg: an SVG fence's text with no
   font-family of its own inherits the reader's Inter, and an author's font-family on the root or
   on a text element still wins (TEMPRA-216). */
.prose .diagram-svg {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-family: var(--tempra-font-text);
  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: var(--tempra-space-08);
  right: var(--tempra-space-08);
  display: flex;
  gap: var(--tempra-space-02);
  font-family: var(--tempra-font-text);
}

.prose .figure-tools button {
  display: inline-grid;
  place-items: center;
  min-width: var(--tempra-size-control-mini);
  height: var(--tempra-size-control-mini);
  padding: 0 var(--tempra-space-10);
  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: var(--tempra-space-06) 0 0;
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-text);
  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; /* one-off: room for the 44px tools above the diagram */
  }

  .prose .figure-tools {
    top: var(--tempra-space-06);
    right: var(--tempra-space-06);
  }

  .prose .figure-tools button {
    min-width: var(--tempra-size-touch);
    height: var(--tempra-size-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-text);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-leading-base);
  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: var(--tempra-space-08) var(--tempra-space-12);
  padding: var(--tempra-space-16) var(--tempra-space-20);
}

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

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

.lightbox-actions {
  display: flex;
  gap: var(--tempra-space-06);
  margin-left: auto;
}

.lightbox-actions a {
  display: inline-flex;
  align-items: center;
  padding: var(--tempra-space-06) var(--tempra-space-14);
  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; /* one-off: the full-screen view's close */
  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: var(--tempra-space-16);
  min-height: 0;
  padding: 0 var(--tempra-space-20);
}

.lightbox-stage .lightbox-prev,
.lightbox-stage .lightbox-next {
  width: var(--tempra-size-touch);
  height: var(--tempra-size-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;
}

/* Its natural size within the stage (the width and height attributes only give its candidates'
   proportions; nothing is beside it to move). */
.lightbox-figure > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--tempra-radius-card);
  box-shadow: var(--tempra-shadow);
}

/* A video plays as large as fits; audio and a PDF's card sit in the middle (TEMPRA-164). */
.lightbox-figure > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightbox-figure > audio {
  width: min(100%, var(--tempra-size-media));
}

.lightbox-figure > .figure-pdf {
  width: min(100%, var(--tempra-size-media));
  box-shadow: var(--tempra-shadow);
}

.lightbox-figure > .figure-broken {
  width: min(100%, var(--tempra-size-media));
}

.lightbox-diagram {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: var(--tempra-space-24);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
  font-family: var(--tempra-font-text);
  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: var(--tempra-space-16) var(--tempra-space-18);
  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: var(--tempra-space-04);
  padding: var(--tempra-space-18) var(--tempra-space-20) 26px; /* one-off: the caption's foot */
  text-align: center;
}

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

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

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

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

  .lightbox-where {
    display: none;
  }

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

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

  .lightbox-stage {
    gap: var(--tempra-space-04);
    padding: 0 var(--tempra-space-04);
  }

  .lightbox-foot {
    padding: var(--tempra-space-12) var(--tempra-space-16) var(--tempra-space-20);
  }

  .lightbox-hint {
    display: none;
  }
}

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

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

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

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-06);
  padding: var(--tempra-space-04) var(--tempra-space-08);
  border: 0;
  background: transparent;
  color: var(--tempra-color-muted);
}

.menu-list {
  position: absolute;
  top: calc(100% + var(--tempra-space-06));
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: var(--tempra-size-menu);
  max-height: 70vh; /* a long menu scrolls within the window */
  overflow: auto;
  margin: 0;
  padding: var(--tempra-space-06);
  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% + var(--tempra-space-06));
}

.menu-list a,
.menu-list button {
  display: block;
  width: 100%;
  padding: var(--tempra-space-06) var(--tempra-space-10);
  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: var(--tempra-space-06) var(--tempra-space-10) var(--tempra-space-02);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  letter-spacing: var(--tempra-tracking-label);
  text-transform: uppercase;
}

.menu-list hr {
  width: 100%;
  margin: var(--tempra-space-04) 0;
}

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

/* A round button holding one 16px glyph. */
.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tempra-size-control-small);
  height: var(--tempra-size-control-small);
  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);
}

/* The change dot (the one colour): pulsing (.live) for an agent writing now; solid beside an
   empty library's last write. Nothing marks what changed since the person looked (TEMPRA-173). */
.change-dot {
  display: inline-block;
  width: var(--tempra-size-dot);
  height: var(--tempra-size-dot);
  border-radius: 50%;
  background: var(--tempra-color-agent);
  vertical-align: middle;
}

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

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

/* Tempra's own agent, @tempra (TEMPRA-223): its letter on the agent colour, the one place the
   colour fills a mark; other agents stay on ink. */
.avatar-mark.agent.tempra {
  background: var(--tempra-color-agent);
  color: var(--tempra-color-on-agent);
}

/* A dialog (a confirmation, a compose dialog, a new token's secret): a card in the top layer. */
.dialog {
  width: min(var(--tempra-size-dialog), calc(100vw - var(--tempra-space-32)));
  max-height: min(80dvh, 44rem); /* one-off: a tall dialog scrolls */
  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(var(--tempra-size-dialog-wide), calc(100vw - var(--tempra-space-32)));
}

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

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

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

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

/* A compose dialog (New library; after Linear's new issue): anchored high over the page, not
   centred. Its head names where the new thing goes and what it is ("@ann › New library"); its
   body is the form's own fields without boxes (a large name, then a description); then a row of
   small fields as pills, and the action at the foot. */
.dialog.compose {
  width: min(var(--tempra-size-dialog-wide), calc(100vw - var(--tempra-space-32)));
  margin: 12dvh auto auto; /* one-off: anchored high, as Linear's */
}

.compose-form {
  display: flex;
  flex-direction: column;
}

.compose-head {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-06);
  padding: var(--tempra-space-12) var(--tempra-space-12) 0 var(--tempra-space-16);
  color: var(--tempra-color-faint);
}

.compose-head h2 {
  flex: 1;
  margin: 0;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
  font-weight: var(--tempra-weight-regular);
}

.compose-context {
  padding: 3px var(--tempra-space-10); /* one-off: a pill a little smaller than a button */
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
  font-weight: var(--tempra-weight-medium);
}

.compose-body {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-08);
  padding: var(--tempra-space-20) var(--tempra-space-18) var(--tempra-space-08);
}

.compose-body .compose-title,
.compose-body .compose-text {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.compose-body .compose-title {
  font-family: var(--tempra-font-display);
  font-variation-settings: var(--tempra-font-display-settings);
  font-size: var(--tempra-text-h2);
  font-weight: var(--tempra-weight-medium);
  line-height: var(--tempra-leading-tight);
}

.compose-body .compose-text {
  min-height: 4lh;
  field-sizing: content;
  max-height: 40dvh; /* one-off: a long description scrolls */
  resize: none;
  font-size: var(--tempra-text-base);
}

.compose-body ::placeholder {
  color: var(--tempra-color-muted);
}

/* The main fields have no box, so no ring either: the caret is where the focus is, in a dialog
   that holds the focus (the one exception to TEMPRA-132's ring on every field). */
.compose-body .compose-title:focus-visible,
.compose-body .compose-text:focus-visible {
  outline: none;
}

.compose-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-08);
  padding: var(--tempra-space-08) var(--tempra-space-18) var(--tempra-space-12);
}

/* A small field as a pill: its label, then the field without a box of its own. */
.compose-field {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 var(--tempra-space-04) 0 var(--tempra-space-12);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.compose-field:focus-within {
  outline: var(--tempra-focus-ring);
  outline-offset: var(--tempra-focus-offset-field);
}

.compose-field input:not([type="checkbox"], [type="radio"], [type="file"]),
.compose-field select {
  width: 18ch;
  min-width: 0;
  padding: 5px var(--tempra-space-08) 5px 1px; /* a field's height (--tempra-space-field), flush with its label */
  border: 0;
  background: transparent;
  outline: none;
}

/* A pill's label, a space, its field ("Library notes"); a prefix of the value itself ("ann/" before a
   library's address) runs straight into it. */
.compose-field > span:not(.compose-prefix) + input,
.compose-field > span:not(.compose-prefix) + select {
  margin-left: var(--tempra-space-06);
}

.compose-field select {
  width: auto;
  cursor: pointer;
}

.compose-field input[type="date"] {
  width: auto;
}

/* A line under the name: what it is for. */
.compose-body .compose-hint {
  margin: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.compose-form > .notice {
  margin: 0 var(--tempra-space-18) var(--tempra-space-12);
}

.compose-foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--tempra-space-08);
  padding: var(--tempra-space-12) var(--tempra-space-16);
  border-top: 1px solid var(--tempra-color-border);
}

@media (max-width: 900px) {
  .dialog.compose {
    margin-top: var(--tempra-space-16);
  }
}

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

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

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

.page-column.wide {
  max-width: var(--tempra-size-page-wide);
}

/* A pill with a glyph before its words (Back to page). */
.pill-button,
a.button.pill-button {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-06);
  padding: var(--tempra-space-06) var(--tempra-space-12) var(--tempra-space-06)
    var(--tempra-space-08);
}

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

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

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

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

.lib-card-cover {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tempra-space-08);
  min-height: 112px; /* one-off: the card's cover */
  padding: var(--tempra-space-16);
  background: var(--tempra-color-ground);
}

.lib-card-cover .lib-tile {
  width: var(--tempra-size-tile-large);
  height: var(--tempra-size-tile-large);
}

.lib-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-04);
  padding: var(--tempra-space-14) var(--tempra-space-16) var(--tempra-space-16);
}

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

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

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

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

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

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

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

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

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

/* A page with no sidebar (the library list, TEMPRA-189): the mark, Tempra and search stand on
   their own, with no rule after them. */
.bare .topbar-brand {
  border-right: 0;
}

/* Over the sidebar, as Linear's docs have it (TEMPRA-145): the Tempra mark, the library's name
   (its home) with ⌄ for the switcher, and the round search button. */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-08);
  min-width: 0;
  padding: 0 var(--tempra-space-12) 0 var(--tempra-space-16);
  border-right: 1px solid var(--tempra-color-border);
}

.brand-mark {
  width: var(--tempra-size-tile-large);
  height: var(--tempra-size-tile-large);
  text-decoration: none;
}

/* A hairline between the mark and the library's name. */
.brand-sep {
  flex: none;
  width: 1px;
  height: 20px; /* one-off: shorter than the mark */
  margin: 0 var(--tempra-space-02);
  background: var(--tempra-color-border);
}

.brand-name {
  min-width: 0;
  overflow: hidden;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* The switcher's ⌄, right beside the name. */
.lib-switch {
  flex: none;
  width: var(--tempra-size-tile-large); /* as tall as the mark beside it */
  height: var(--tempra-size-tile-large);
  margin-left: calc(-1 * var(--tempra-space-04));
  color: var(--tempra-color-muted);
}

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

/* The round search button, at the bar's end over the sidebar. */
.search-button {
  flex: none;
  width: var(--tempra-size-control);
  height: var(--tempra-size-control);
  margin-left: auto;
  border: 1px solid var(--tempra-color-border);
  border-radius: 50%;
  background: var(--tempra-color-bg);
}

/* Over the page: the way back to the sidebar when it is hidden, the page's path, then its tools,
   the bell and the avatar (TEMPRA-145). */
.topbar-page {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-08);
  min-width: 0;
  padding: 0 var(--tempra-space-16) 0 var(--tempra-space-20);
}

.topbar-path {
  display: flex;
  flex: 1;
  min-width: 0;
}

/* The page's own path, while the bar names the page being moved to (TEMPRA-194). */
.topbar-path[hidden] {
  display: none;
}

/* A concept's path: its folders, words not links, then its title (TEMPRA-145). */
.topbar-crumbs {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-name);
  white-space: nowrap;
}

.topbar-crumbs .crumb {
  flex: none;
}

.topbar-crumbs .crumb + .crumb::before {
  content: "/";
  margin: 0 var(--tempra-space-08);
  color: var(--tempra-color-faint);
}

.topbar-crumbs .crumb[aria-current="page"] {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--tempra-color-text);
  text-overflow: ellipsis;
}

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

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

.topbar-end {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--tempra-space-06);
}

/* A control in the top bar that reads as a pill (New library). */
.tool-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-08);
  height: var(--tempra-size-control);
  padding: 0 var(--tempra-space-14);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
}

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

/* The bell: how many notifications wait, as a small badge on its corner. */
.bell .badge {
  position: absolute;
  top: calc(-1 * var(--tempra-space-04));
  right: calc(-1 * var(--tempra-space-04));
  display: grid;
  place-items: center;
  min-width: var(--tempra-size-badge);
  height: var(--tempra-size-badge);
  padding: 0 var(--tempra-space-04);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
  font-size: var(--tempra-text-initial);
  font-weight: var(--tempra-weight-strong);
  line-height: 1;
}

/*
 * The bell's panel, the person's notifications (TEMPRA-189): "Notifications" over what waits, each
 * item a row (the library's tile, the page and the detail line, then the library and when; an
 * invitation's Accept and Decline under them), "n more" when there are more. Rules and greys only.
 */
.bell-pop {
  width: min(var(--tempra-size-popover), calc(100vw - var(--tempra-space-32)));
  padding: 0;
  gap: 0;
}

.menu-list .bell-head {
  margin: 0;
  padding: var(--tempra-space-12) var(--tempra-space-16) var(--tempra-space-10);
  border-bottom: 1px solid var(--tempra-color-border);
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
}

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

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

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

.bell-item-detail {
  display: block;
  color: var(--tempra-color-muted);
}

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

.menu-list .bell-empty,
.menu-list .bell-more {
  margin: 0;
  padding: var(--tempra-space-24) var(--tempra-space-16);
  color: var(--tempra-color-muted);
  text-align: center;
}

.menu-list .bell-more {
  padding: var(--tempra-space-10) var(--tempra-space-16);
  border-bottom: 1px solid var(--tempra-color-border);
  font-size: var(--tempra-text-meta);
}

.bell-item-actions {
  display: flex;
  grid-column: 2;
  gap: var(--tempra-space-08);
  margin-top: var(--tempra-space-06);
}

/* The invitation's answers are the base pills, not the menu's rows. */
.menu-list .bell-item-actions button {
  width: auto;
  padding: var(--tempra-space-button);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-bg);
}

.menu-list .bell-item-actions button.primary,
.menu-list .bell-item-actions button.primary:hover:not(:disabled) {
  border-color: var(--tempra-color-text);
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
  font-weight: var(--tempra-weight-medium);
}

.menu-list .bell-error {
  margin: 0;
  padding: var(--tempra-space-10) var(--tempra-space-16);
  color: var(--tempra-color-text);
}

/* On a phone the bell sits near the edge: its panel spans the screen under the bar. */
@media (max-width: 900px) {
  .bell-pop {
    position: fixed;
    top: calc(var(--tempra-size-topbar-phone) + var(--tempra-space-04));
    right: var(--tempra-space-16);
    left: var(--tempra-space-16);
    width: auto;
  }
}

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

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

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

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

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

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

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

.menu-list a.menu-item,
.menu-list button.menu-item {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-10);
}

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

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

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

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

.menu-theme .segmented button {
  padding: var(--tempra-space-02) var(--tempra-space-08);
  font-size: var(--tempra-text-meta);
}

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

.menu-list a.menu-lib {
  display: grid;
  grid-template-columns: var(--tempra-size-tile-small) minmax(0, 1fr) auto;
  gap: 0 var(--tempra-space-10);
  align-items: center;
  padding: var(--tempra-space-06) var(--tempra-space-10);
}

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

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

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

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

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

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

/* The tree's scroll. Its last 40px fade into the sidebar, as Linear's docs do over their foot
   (TEMPRA-149): rows run out under the rule rather than being cut by it. A mask, so nothing is
   drawn over the rows; and as much padding at the end as the fade is tall, so it only ever covers
   rows that can scroll up out of it, and the last one rests clear of it (TEMPRA-132: no words
   left faded). */
.sidebar-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-bottom: var(--tempra-space-40);
  mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - var(--tempra-space-40)),
    transparent
  ); /* a mask's alpha, not a colour */
}

/* The library's tools, fixed under the tree (TEMPRA-145): Activity, Settings. */
.sidebar-foot {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--tempra-space-02);
  margin: 0 calc(-1 * var(--tempra-space-10));
  padding: var(--tempra-space-08) var(--tempra-space-10) 0;
  border-top: 1px solid var(--tempra-color-border);
}

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

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

/* A library in the account's sidebar (or the switcher's row): its tile, its name. */
.nav-row .lib-tile,
.lib-switch .lib-tile {
  width: var(--tempra-size-tile-small);
  height: var(--tempra-size-tile-small);
  font-size: var(--tempra-text-label);
}

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

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

/* Showing the hidden sidebar: a quiet glyph at the top bar's left, over the page. */
.show-sidebar {
  flex: none;
  color: var(--tempra-color-muted);
}

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

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

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

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

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

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

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

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

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

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

.nav-row svg {
  flex: none;
}

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

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

.tree ul {
  padding-left: var(--tempra-space-12);
}

.tree li {
  margin: 0;
}

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

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

/* The whole row takes a click or a tap (P-2, TEMPRA-133): a file's link, or a folder's button,
   reaches over the row. */
.tree-row {
  position: relative;
}

.tree-row > a::after,
.tree-row > .tree-name::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* A folder's chevron: drawn beside its name, the row's button takes the click (TEMPRA-138). */
.tree-chevron {
  flex: none;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: var(--tempra-size-icon);
  color: var(--tempra-color-faint);
}

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

.tree-chevron svg {
  width: var(--tempra-size-icon-small);
  height: var(--tempra-size-icon-small);
  transition: transform var(--tempra-motion-quick) ease;
}

.tree-row.open .tree-chevron svg {
  transform: rotate(90deg);
}

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

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

/* A folder's row is one button: it opens and closes the folder, and is never the current row. */
button.tree-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tempra-color-text);
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.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: var(--tempra-weight-medium);
}

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

/* Marks: open comments (a count), a clock (stale) or an hourglass (stale soon); a closed folder
   rolls up those inside it. The tree marks no change (TEMPRA-173). */
.tree-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
  font-variant-numeric: tabular-nums;
}

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

/* Agents' presence (TEMPRA-219): a page an agent is reading or writing now, or a closed folder
   holding one (an open folder leaves it to its rows). The whole cue, with no words beside it (a
   hover names the agent): a band of the agent's ink moves through the name's letters, as a
   status line shimmers while a tool runs, and nothing else about the row changes. The ink is the
   name's own fill (background-clip), so nothing lies over or behind the words; text and the ink
   are both at least 4.5:1 on every surface (design/contrast.test.ts), so the name reads at
   every point of the sweep. */
.tree-row.presence > a,
.tree-row.presence > .tree-name {
  background-image: linear-gradient(
    100deg,
    currentcolor 0 25%,
    var(--tempra-color-agent-ink) 40% 60%,
    currentcolor 75% 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tempra-shimmer var(--tempra-motion-shimmer) linear infinite;
}

@keyframes tempra-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: 0 0;
  }
}

/* Without motion the name stays still in the agent's ink. In forced colours, plain. */
@media (prefers-reduced-motion: reduce) {
  .tree-row.presence > a,
  .tree-row.presence > .tree-name {
    background: none;
    -webkit-text-fill-color: var(--tempra-color-agent-ink);
    animation: none;
  }
}

@media (forced-colors: active) {
  .tree-row.presence > a,
  .tree-row.presence > .tree-name {
    background-image: none;
    -webkit-text-fill-color: currentcolor;
    animation: none;
  }
}

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

.switcher {
  width: min(36rem, 90vw); /* one-off: the quick switcher */
  padding: var(--tempra-space-12);
  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-08);
}

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

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

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

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

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

/* The phone's pieces of the top bar (the menu button, the mark and the library), the drawer's
   head and the dimmed page behind it show only here. */
.ws-menu,
.ws-topbar-place,
.drawer-head,
.ws-scrim {
  display: none;
}

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

  /* The bar: the menu button, the mark and the library's name, then a page's tools (a concept's
     ⋯; its actions float at the bottom right, TEMPRA-172) and the bell; the avatar last. Search
     and the switcher are the drawer's head's, as on the desktop the bar's over the sidebar
     (TEMPRA-145). */
  .ws-topbar,
  .sidebar-hidden .ws-topbar {
    display: flex;
    align-items: center;
    padding: 0 var(--tempra-space-12) 0 var(--tempra-space-06);
  }

  .topbar-brand,
  .topbar-path,
  .show-sidebar {
    display: none;
  }

  /* With no drawer, the bar keeps the desktop's mark, Tempra and search. */
  .bare .topbar-brand {
    display: flex;
    flex: 1;
    padding: 0 0 0 var(--tempra-space-10);
  }

  .bare .ws-topbar-place {
    display: none;
  }

  .bare .topbar-page {
    flex: none;
  }

  .topbar-page {
    flex: 1;
    gap: var(--tempra-space-08);
    padding: 0;
  }

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

  /* The mark and the library's name, where the desktop has them (TEMPRA-145); the page's own
     title names the page (TEMPRA-140). The drawer's head starts the same way (TEMPRA-141). */
  .ws-topbar-place {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--tempra-space-08);
    min-width: 0;
    padding: 0 var(--tempra-space-04);
  }

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

  .topbar-page .avatar {
    position: relative;
    width: var(--tempra-size-control);
    height: var(--tempra-size-control);
  }

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

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

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

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

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

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

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

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

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

  .drawer-head .lib-switch,
  .drawer-head .search-button {
    position: relative;
  }

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

  .page-column {
    padding: var(--tempra-space-32) var(--tempra-space-16) var(--tempra-space-72);
  }
}

/* ---------- A floating action (TEMPRA-148) ---------- */

/* A page's one making action on a phone (New library), floating at the screen's bottom right
   over the page, in place of its pill in the top bar. In the page, so the drawer dims it and
   makes it inert with the rest; under the drawer's scrim. The desktop keeps the bar's pill. */
.fab {
  display: none;
}

@media (max-width: 900px) {
  .topbar-tools .bar-new {
    display: none;
  }

  .fab {
    position: fixed;
    right: max(var(--tempra-space-16), env(safe-area-inset-right));
    bottom: max(var(--tempra-space-16), env(safe-area-inset-bottom));
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: var(--tempra-space-08);
    min-height: var(--tempra-size-touch);
    padding: 0 var(--tempra-space-20);
    box-shadow: var(--tempra-shadow);
  }
}

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

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

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

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

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

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

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

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

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

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

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

/* A form whose fields stack, each at its own width (Members' invite). */
form.token {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--tempra-space-08);
}

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

/* ---------- Mentions in the comment boxes (TEMPRA-73) ---------- */

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

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

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

/* The right column is the panel's width whether it holds the contents or a panel, so opening a
   panel takes the contents' space and never moves the text (C-17). */
/* --concept-side is the right column's width in each layout below, so a wide or full figure
   (prose.css, TEMPRA-161) knows the text's column: the page's width (100cqi of `page`) less it. */
.concept {
  --concept-side: var(--tempra-size-panel);
}

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

/* The Markdown view has no contents (its headings lead nowhere there): the file takes the room. */
.concept.markdown-on:not(.panel-open) {
  --concept-side: 0px;
}

.concept.markdown-on:not(.panel-open) .concept-grid {
  grid-template-columns: [text] minmax(0, 1fr);
}

/* The text, centred in its column, --doc-max wide at most (padding included), --doc-pad from its
   edges; a wide or full figure reads both. */
.concept .doc {
  --doc-pad: var(--tempra-space-page);
  --doc-max: calc(var(--tempra-size-column-text) + 2 * var(--tempra-space-page));
  grid-row: 1;
  grid-column: text;
  justify-self: center;
  width: 100%;
  max-width: var(--doc-max);
  min-width: 0;
  padding: var(--tempra-space-40) var(--doc-pad) 140px; /* one-off: room under the text for the page's actions */
}

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

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

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

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

.toc a {
  display: block;
  margin-left: -1px; /* over the list's hairline */
  padding: var(--tempra-space-04) 0 var(--tempra-space-04) var(--tempra-space-14);
  border-left: 1px solid transparent;
  color: var(--tempra-color-muted);
  text-decoration: none;
}

.toc .sub a {
  padding-left: 26px; /* one-off: a level in from the 14px above */
}

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

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

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

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

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

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

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

.toc-inline .toc {
  margin: 0 var(--tempra-space-16) var(--tempra-space-12);
}

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

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

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

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

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

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

.panel-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--tempra-space-16) var(--tempra-space-20) var(--tempra-space-32);
}

.panel-section {
  margin-top: var(--tempra-space-24);
}

.panel-section .label {
  margin: 0 0 var(--tempra-space-08);
}

.panel-section .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-08);
  margin: var(--tempra-space-10) 0 0;
}

/* Check: Mark as checked, or how much changed since someone checked and Show changes. */
.check {
  padding: var(--tempra-space-12) var(--tempra-space-14);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
}

.check-state {
  margin: 0;
}

.check .actions:first-child {
  margin-top: 0;
}

.doc-head {
  margin-bottom: var(--tempra-space-32);
}

.doc-title {
  font-family: var(--tempra-font-display);
  font-variation-settings: var(--tempra-font-display-settings);
  margin: 0 0 var(--tempra-space-12);
  font-size: var(--tempra-text-title);
  font-weight: var(--tempra-weight-medium);
  line-height: var(--tempra-leading-tight);
  letter-spacing: var(--tempra-tracking-doc);
}

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

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

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

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

/* What is exceptional about the page, at the byline's end: "Draft", "Stale" (TEMPRA-139). */
.byline-pills {
  display: inline-flex;
  gap: var(--tempra-space-06);
}

/* Whether a person checked the page: one quiet line under the byline, only when someone has. */
.doc-checked {
  margin: var(--tempra-space-08) 0 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

.doc-checked a {
  color: inherit;
}

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

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

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

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

.versions a.version {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr); /* one-off: the version's number */
  gap: var(--tempra-space-08);
  padding: var(--tempra-space-08) var(--tempra-space-10);
  border-radius: var(--tempra-radius-row);
  color: var(--tempra-color-text);
  text-decoration: none;
}

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

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

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

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

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

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

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

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

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

.review-what {
  flex: 1 1 16rem; /* one-off: what the bar says, before it wraps */
  min-width: 0;
}

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

.review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-08) var(--tempra-space-12);
}

.verify-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-06);
}

.verify-form input {
  flex: 1 1 10rem; /* one-off: the note's field, before it wraps */
  min-width: 0;
}

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

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

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

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

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

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

.sources li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr); /* one-off: the source's number */
  gap: var(--tempra-space-06);
  margin-bottom: var(--tempra-space-10);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-leading-base);
}

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

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

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

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

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

.raw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-08) var(--tempra-space-12);
  margin-bottom: var(--tempra-space-16);
}

/* Wrap lines, pressed while long lines wrap. */
.raw-head button[aria-pressed="true"],
.raw-head button[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--tempra-color-selected);
}

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

/* The file in a pre, a line per span; the numbers are CSS counters in the gutter, so they are
   never selected or copied, and stay on their line when long lines wrap (Wrap lines). */
.raw-file {
  margin: 0;
  padding: var(--tempra-space-16) var(--tempra-space-18) var(--tempra-space-16)
    calc(var(--raw-gutter) + var(--tempra-space-16));
  overflow-x: auto;
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-ground);
  font-family: var(--tempra-font-mono);
  font-size: var(--tempra-text-ui);
  line-height: var(--tempra-leading-base);
  white-space: pre;
  counter-reset: line;
  --raw-gutter: 4ch;
}

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

.raw-line {
  position: relative;
  counter-increment: line;
}

.raw-line::before {
  content: counter(line);
  position: absolute;
  left: calc(-1 * var(--raw-gutter) - var(--tempra-space-12));
  width: var(--raw-gutter);
  color: var(--tempra-color-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}

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

.facts {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr); /* one-off: the facts' names */
  margin: 0;
  font-size: var(--tempra-text-ui);
}

.facts > div {
  display: contents;
}

.facts dt,
.facts dd {
  padding: 9px 0; /* one-off: a fact's row */
  border-bottom: 1px solid var(--tempra-color-border);
  line-height: var(--tempra-leading-base);
}

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

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

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

.linked {
  margin: 0;
  padding-left: var(--tempra-space-18);
}

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

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

/* No room beside the text: the contents move under the byline, and a panel overlays the page. */
@container page (width < 1100px) {
  .concept {
    --concept-side: 0px;
  }

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

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

  .concept-contents {
    display: none;
  }

  .toc-inline {
    display: block;
  }

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

/* Room for the text and the contents, not a panel's width as well (a laptop window, about 964
   to 1364px with the sidebar shown; TEMPRA-150): the contents keep a column of their own, the
   contents' width and a gutter, as Linear's docs do, and the page's padding tightens a little. An
   open panel still takes the column from 960px and overlays below that (the rules around this),
   and the text moves over for it. */
@container page (700px <= width < 1100px) {
  .concept:not(.panel-open):not(.markdown-on) {
    --concept-side: calc(var(--tempra-size-contents) + var(--tempra-space-24));
  }

  .concept:not(.panel-open):not(.markdown-on) .concept-grid {
    grid-template-columns: [text] minmax(0, 1fr) [side] calc(
        var(--tempra-size-contents) +
        var(--tempra-space-24)
      );
  }

  .concept:not(.panel-open):not(.markdown-on) .concept-side {
    display: block;
  }

  .concept:not(.panel-open) .concept-contents {
    display: block;
    padding-right: var(--tempra-space-24);
  }

  .concept:not(.panel-open):not(.markdown-on) .toc-inline {
    display: none;
  }

  .concept .doc {
    --doc-pad: var(--tempra-space-32);
  }
}

/* What an overlaid panel dims: the page, the top bar and the sidebar, which are inert while it
   is open (TEMPRA-133). The app draws it only then; a tap on it closes the panel. */
.panel-scrim {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: var(--tempra-color-scrim);
}

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

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

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

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

/* The page's folders above its title, only where the tree is out of sight (TEMPRA-139): with the
   sidebar hidden here, and on a phone below. */
.doc-crumbs {
  display: none;
  flex-wrap: wrap;
  gap: var(--tempra-space-06);
  margin-bottom: var(--tempra-space-12);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
}

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

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

  .doc-crumbs {
    display: flex;
  }

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

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

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

  .toc-inline .toc a {
    padding-top: var(--tempra-space-08);
    padding-bottom: var(--tempra-space-08);
  }

  .concept-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 7;
    width: auto;
    height: var(--tempra-size-sheet);
    border-top: 1px solid var(--tempra-color-border);
    border-left: 0;
    border-radius: var(--tempra-radius-card) var(--tempra-radius-card) 0 0;
    box-shadow: none;
  }

  /* The page dimmed behind the sheet, the top bar too (.panel-scrim). */
  .panel-scrim {
    z-index: 6;
  }

  .panel-head {
    position: relative;
    min-height: var(--tempra-size-panel-head-phone);
    padding: var(--tempra-space-12) var(--tempra-space-08) 0 var(--tempra-space-20);
    touch-action: none;
  }

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

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

  .panel-body {
    padding: var(--tempra-space-16) var(--tempra-space-16) var(--tempra-space-24);
    overscroll-behavior: contain;
  }
}

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

/* ---------- A page's actions (TEMPRA-172; tempra-dev: decisions/a-pages-actions-float) ---------- */

/* One round + at the page's bottom right, in ink, the one raised thing on a flat page; its menu
   opens upward (Comment, Check). Aside while a panel is open (the app sets `hidden`). In the
   page, so an overlaid panel or the phone's drawer dims it with the rest; under their scrims. */
.page-actions {
  position: fixed;
  right: max(var(--tempra-space-28), env(safe-area-inset-right));
  bottom: max(var(--tempra-space-28), env(safe-area-inset-bottom));
  z-index: 3;
}

.page-actions[hidden] {
  display: none;
}

.page-fab {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tempra-size-fab);
  height: var(--tempra-size-fab);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
  box-shadow: var(--tempra-shadow);
}

.page-fab:hover:not(:disabled) {
  background: var(--tempra-color-text);
  color: var(--tempra-color-bg);
}

.page-fab svg {
  transition: transform var(--tempra-motion-quick) ease;
}

/* Open, the + turns into × over its menu. */
.page-fab[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

/* Something waits in the menu (open comments, changes since the check): a small ringed dot on
   the button's corner. Greys only. */
.page-fab-dot {
  position: absolute;
  top: var(--tempra-space-02);
  right: var(--tempra-space-02);
  width: 12px; /* one-off: the ringed dot */
  height: 12px;
  box-sizing: border-box;
  border: 2px solid var(--tempra-color-text);
  border-radius: 50%;
  background: var(--tempra-color-bg);
}

.page-actions-list {
  min-width: 240px; /* one-off: Review changes and its count on one line */
}

.menu-list .menu-count {
  margin-left: auto;
  padding-left: var(--tempra-space-12);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

/* Who checked the page, when there is nothing to do about it. */
.menu-list .menu-line {
  margin: 0;
  padding: var(--tempra-space-06) var(--tempra-space-10);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

@media (max-width: 900px) {
  .page-actions {
    right: max(var(--tempra-space-16), env(safe-area-inset-right));
    bottom: max(var(--tempra-space-24), env(safe-area-inset-bottom));
  }
}

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

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-10);
}

.comments-list .segmented {
  align-self: flex-start;
  margin-bottom: var(--tempra-space-06);
}

/* "Comment on the page…": a box at the top of the list that opens a comment on the whole page
   (TEMPRA-172), with "Or select text to comment on it" under it. */
.new-thread-box {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-06);
  margin-bottom: var(--tempra-space-04);
}

.new-thread-box p {
  margin: 0;
}

.new-thread {
  width: 100%;
  min-height: var(--tempra-size-touch);
  padding: var(--tempra-space-10) var(--tempra-space-12);
  border: 1px solid var(--tempra-color-border-strong);
  border-radius: var(--tempra-radius-box);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-ui);
  text-align: left;
}

.new-thread:hover:not(:disabled) {
  border-color: var(--tempra-color-text);
  color: var(--tempra-color-text);
}

/* A thread whose quote is gone from the body, and a request (TEMPRA-222, left for people's
   agents): said in words, as a small outlined label. */
.thread-outdated,
.thread-request {
  align-self: flex-start;
  padding: 0 var(--tempra-space-08);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-style: normal;
  line-height: var(--tempra-leading-base);
}

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

.thread-meta {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-08);
  width: 100%;
  min-width: 0;
}

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

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

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

.thread.collapsed .agent-name {
  flex: none;
  max-width: 60%;
  overflow: hidden;
  color: var(--tempra-color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread.collapsed .agent-name b,
.said-by .agent-name b {
  font-weight: var(--tempra-weight-medium);
}

.thread.collapsed .agent-for,
.said-by .agent-for {
  color: var(--tempra-color-muted);
}

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

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

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

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

/* The active thread (and a new comment): a card with the comments, a reply, Resolve. */
.thread.open {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-10);
  padding: var(--tempra-space-12);
  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: var(--tempra-space-08);
  font-size: var(--tempra-text-meta);
}

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

.said-change {
  margin: 0;
}

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

.quote {
  margin: 0;
  padding-left: var(--tempra-space-10);
  border-left: 2px solid var(--tempra-color-border-strong);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
  font-style: italic;
  line-height: var(--tempra-leading-base);
  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: var(--tempra-space-08);
}

.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; /* one-off: a pill one line tall */
  min-height: 0;
  padding: var(--tempra-space-button);
  border-radius: var(--tempra-radius-pill);
  resize: none;
}

.reply-form textarea:focus,
.reply-form textarea:not(:placeholder-shown) {
  height: 4rem; /* one-off: room for a few lines once it has words */
  border-radius: var(--tempra-radius-box);
}

.comment-form textarea {
  min-height: 4rem; /* as a reply's field with words */
  padding: var(--tempra-space-08) var(--tempra-space-10);
  border-radius: var(--tempra-radius-row);
  resize: vertical;
}

.reply-form .actions,
.comment-form .actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--tempra-space-06);
  margin: 0;
}

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

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

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

/* The library's agent working on a reply in this thread (TEMPRA-222): one quiet grey line with a
   grey dot that breathes; no colour. */
.thread-replying {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-08);
  margin: 0;
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.thread-replying::before {
  content: "";
  flex: none;
  width: var(--tempra-size-dot);
  height: var(--tempra-size-dot);
  border-radius: 50%;
  background: var(--tempra-color-faint);
  animation: tempra-pulse var(--tempra-motion-pulse) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .thread-replying::before {
    animation: none;
  }
}

/* A mark beside each block of a concept's body that holds open threads (TEMPRA-223): the comment
   glyph and the count in muted grey, in the right gutter by the block's first line, or under the
   block's end where there is no gutter (a phone). A layer over the body, outside its text, placed
   by the app through --mark-x and --mark-y. Greys and lines only. */
.body:has(> .comment-marks) {
  position: relative;
}

.comment-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.comment-mark {
  position: absolute;
  top: var(--mark-y, 0);
  left: var(--mark-x, 0);
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-04);
  height: var(--tempra-size-control-mini);
  padding: 0 var(--tempra-space-06);
  border: 1px solid var(--tempra-color-border-strong);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-muted);
  font-family: var(--tempra-font-text);
  font-size: var(--tempra-text-meta);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* Beside the block's first line, centred on the reading leading. */
.comment-mark:not(.end) {
  margin-top: calc(
    (var(--tempra-text-reader) * var(--tempra-leading-reader) - var(--tempra-size-control-mini)) /
    2
  );
}

/* No gutter: under the block's last line, its right edge at the block's. */
.comment-mark.end {
  transform: translate(-100%, -2px); /* one-off: a nudge up onto the line's descenders */
}

.comment-mark:hover {
  border-color: var(--tempra-color-text);
  color: var(--tempra-color-text);
}

/* On a phone, a touch target on the 44px area around it. */
@media (max-width: 900px) {
  .comment-mark::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--tempra-space-10));
  }
}

/* A link in a comment's text: a page or a URL it names. */
.comment a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--tempra-line-offset);
  overflow-wrap: anywhere;
}

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

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

/* The header: the title and a quiet line under it; a page's own controls at the right. */
.view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tempra-space-08) var(--tempra-space-16);
  margin-bottom: var(--tempra-space-32);
}

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

/* A view's title: the display face, sized as an h1 (TEMPRA-108). */
.view-title {
  font-family: var(--tempra-font-display);
  font-variation-settings: var(--tempra-font-display-settings);
  margin: 0;
  font-size: var(--tempra-text-page);
  font-weight: var(--tempra-weight-strong);
  line-height: var(--tempra-leading-tight);
  letter-spacing: var(--tempra-tracking-title);
  overflow-wrap: anywhere;
}

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

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

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

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

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

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

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

/* Filters: pills in a row that wraps. */
.view-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tempra-space-08);
  margin-bottom: var(--tempra-space-32);
  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: var(--tempra-space-02);
  min-width: 0;
  margin: 0;
  padding: var(--tempra-space-02);
  border: 0;
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-ground);
}

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

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

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

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

  .segmented button {
    min-height: calc(
      var(--tempra-size-touch) -
      2 *
      var(--tempra-space-02)
    ); /* less the pill's padding */
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* An entry: who, what they did, when; the live one carries the pulsing dot at the right. */
.entry {
  display: grid;
  grid-template-columns: var(--tempra-size-avatar) minmax(0, 1fr) auto;
  gap: var(--tempra-space-12);
  padding: var(--tempra-space-12) var(--tempra-space-10);
  border-radius: var(--tempra-radius-box);
  font-size: var(--tempra-text-ui);
}

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

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

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

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

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

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

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

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

.entry-touched li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--tempra-space-10);
  min-width: 0;
}

.entry-what {
  flex: none;
  width: 52px; /* one-off: the verb column (Edited, Moved) */
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-label);
}

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

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

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

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

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

.activity-find input:not([type="checkbox"], [type="radio"], [type="file"]) {
  flex: 1;
  min-width: 0;
  padding: 5px 0; /* a field's height inside the pill (--tempra-space-field) */
  border: 0;
  outline: 0;
  background: none;
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-meta);
}

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

.entry-now {
  flex-direction: row;
  align-items: center;
  gap: var(--tempra-space-06);
}

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

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

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

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

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

/* The dot sits in the seq column's left gutter, so the numbers line up with or without it. */
.events-seq .change-dot {
  margin: 0 var(--tempra-space-08) 0 calc(-1 * var(--tempra-space-14));
}

.events-table td.events-seq {
  padding-left: 22px; /* one-off: a gutter for the live dot */
}

.events-person {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-08);
  white-space: nowrap;
}

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

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

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

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

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

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

@media (max-width: 900px) {
  .entry {
    gap: var(--tempra-space-10);
    padding: var(--tempra-space-12) var(--tempra-space-08);
  }
}

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

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

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

.attachment-frame {
  display: grid;
  place-items: center;
  min-height: 24rem; /* one-off: the frame before the file loads */
  padding: var(--tempra-space-32);
  border-radius: var(--tempra-radius-card);
  background: var(--tempra-color-frame);
  color: var(--tempra-color-frame-ink);
}

/* Its box from the stored width and height before it loads (TEMPRA-162); within 70vh, drawn
   contained in it. */
.attachment-frame img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 70vh; /* the file within the window */
  object-fit: contain;
}

/* A video plays in place, as large as the image would be; audio is its controls across the frame
   (TEMPRA-164). */
.attachment-frame video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh; /* the file within the window */
  object-fit: contain;
}

.attachment-frame audio {
  display: block;
  width: min(100%, var(--tempra-size-media));
}

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

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

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

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

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

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

.attachment-facts > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr); /* one-off: the facts' names */
  gap: var(--tempra-space-08);
  padding: var(--tempra-space-08) 0;
  border-bottom: 1px solid var(--tempra-color-border);
}

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

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

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

.attachment-used > li + li {
  margin-top: var(--tempra-space-04);
}

/* The name and, under it, what the file shows (TEMPRA-170). */
.attachment-head {
  display: flex;
  flex-direction: column;
  gap: var(--tempra-space-04);
}

.attachment-description {
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

/* Under a page in Used in: the figure it appears as, and its caption. */
.attachment-figure {
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

/* File history: every version as a row between hairlines, under the image and the facts. */
.attachment-history {
  grid-column: 1 / -1;
  min-width: 0;
}

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

.attachment-history li {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) 10rem auto; /* one-off: when, who, size, Download */
  gap: var(--tempra-space-04) var(--tempra-space-16);
  align-items: baseline;
  padding: var(--tempra-space-08) 0;
  border-bottom: 1px solid var(--tempra-color-border);
}

.attachment-version-when {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tempra-space-04) var(--tempra-space-08);
}

.attachment-version-who {
  min-width: 0;
  overflow-wrap: anywhere;
}

.attachment-version-download {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-04);
  white-space: nowrap;
}

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

  .attachment-frame {
    min-height: 14rem; /* one-off: the frame, narrower */
    padding: var(--tempra-space-16);
  }
}

/* A phone: each version stacks, when and who above its size and Download. */
@media (max-width: 900px) {
  .attachment-history li {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .attachment-version-who {
    grid-column: 1 / -1;
  }

  .attachment-version-download {
    min-height: var(--tempra-size-touch);
  }
}

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

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

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

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

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

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

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

/* ---------- Settings: one page of sections, a hairline between them ---------- */

/* Each section under its own heading (General, Members, …), ruled off from the one before;
   the section's own headings (Invite, Export, …) are h3s under it. */
.settings-section {
  margin-top: var(--tempra-space-32);
  padding-top: var(--tempra-space-32);
  border-top: 1px solid var(--tempra-color-border);
  scroll-margin-top: var(--tempra-space-32);
}

.view-head + .settings-section {
  margin-top: 0;
}

.settings-section > h2 {
  margin: 0 0 var(--tempra-space-16);
  font-size: var(--tempra-text-reader);
  font-weight: var(--tempra-weight-strong);
  line-height: var(--tempra-leading-tight);
}

.settings-section h3 {
  margin: var(--tempra-space-16) 0 var(--tempra-space-08);
}

/* The home's Comments panel (TEMPRA-222): the threads on the library itself, opened from the
   page's actions. The home has no side column, so where a concept's panel would sit beside the
   text it overlays the page's right edge instead (narrower, and on a phone, concept.css's rules
   already make it an overlay and the sheet). */
@container page (width >= 1100px) {
  .home-panel .concept-panel {
    position: fixed;
    top: var(--tempra-size-topbar);
    right: 0;
    bottom: 0;
    z-index: 5;
    width: var(--tempra-size-panel);
    height: auto;
    box-shadow: var(--tempra-shadow);
  }
}

/*
 * The public pages (TEMPRA-110; flat since TEMPRA-126): the landing page (site/, tempra.dev) and
 * the app's server pages (sign-in, app consent, the email-change link, error pages). Flat like the
 * app's take 4 (tempra-dev decisions/take4-review-answers.md, answer 9): a bar with the wordmark
 * over a hairline, the page as a plain column on the page's background (no sheet on a ground),
 * and a quiet foot over a hairline. Nothing here needs a script.
 *
 * Markup: body.public (.narrow for a form or a message) > a.skip-link, header.public-head,
 * main#main.public-main, footer.public-foot > nav > ul.
 */

/* The wordmark: the tile with the initial, as the app's top bar draws it, and the name. It links
   to tempra.dev. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--tempra-space-10);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-name);
  font-weight: var(--tempra-weight-strong);
  text-decoration: none;
}

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

/* The frame: three bands across the window, their content in one centred column. */
.public {
  --public-width: var(--tempra-size-page);
  --public-inline: max(var(--tempra-space-16), (100% - var(--public-width)) / 2);

  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 0;
  background: var(--tempra-color-bg);
}

/* A form or a message (the server pages): a narrower column. */
.public.narrow {
  --public-width: 560px; /* one-off: the public pages' reading column */
}

/* Skip to the page's content: out of sight until the keyboard reaches it. */
.skip-link {
  position: absolute;
  top: var(--tempra-space-08);
  left: var(--tempra-space-08);
  z-index: 1;
  padding: var(--tempra-space-button);
  border: 1px solid var(--tempra-color-border);
  border-radius: var(--tempra-radius-pill);
  background: var(--tempra-color-bg);
  color: var(--tempra-color-text);
  font-size: var(--tempra-text-ui);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--tempra-space-16)));
}

.skip-link:focus-visible {
  transform: none;
}

.public-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tempra-space-12);
  min-height: var(--tempra-size-topbar);
  padding: var(--tempra-space-08) var(--public-inline);
  border-bottom: 1px solid var(--tempra-color-border);
}

.public-nav {
  display: flex;
  align-items: center;
  gap: var(--tempra-space-16);
  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-main {
  flex: 1;
  padding: var(--tempra-space-48) var(--public-inline) 64px; /* one-off: room above the foot */
}

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

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

.public-foot {
  padding: var(--tempra-space-16) var(--public-inline);
  border-top: 1px solid var(--tempra-color-border);
  color: var(--tempra-color-muted);
  font-size: var(--tempra-text-meta);
}

.public-foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-04) var(--tempra-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

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

.public-main section + section {
  margin-top: var(--tempra-space-56);
}

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

.public-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tempra-space-08);
}

/* What Tempra does: a list 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: 0 var(--tempra-space-32);
  margin: var(--tempra-space-16) 0 0;
  padding: 0;
  border-bottom: 1px solid var(--tempra-color-border);
  list-style: none;
}

.features li {
  padding: var(--tempra-space-16) 0;
  border-top: 1px solid var(--tempra-color-border);
}

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

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

/* Steps: numbered in the muted grey, one to a line. */
.steps {
  margin: var(--tempra-space-16) 0 var(--tempra-space-24);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

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

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

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

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

.legal li + li {
  margin-top: var(--tempra-space-08);
}

@media (max-width: 640px) {
  .public-main {
    padding-top: var(--tempra-space-28);
    padding-bottom: var(--tempra-space-40);
  }

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