/*
 * Collab: the one stylesheet (served at /static/styles.css; DESIGN.md describes the system).
 *
 * The world: cool green-gray paper, deep board-green ink for actions and the top bar, and one
 * highlighter that marks what waits on you (--mark). Nothing else wears the highlighter.
 * Tokens first (both themes), then base elements, then the page shell, then components in the
 * order of web/components/. Mobile first; wider layouts in min-width queries.
 */

/* ── Fonts ─────────────────────────────────────────────────────────────
 * Atkinson Hyperlegible Next and Mono (SIL OFL 1.1), self-hosted from @fontsource-variable/* by
 * assets.mjs. Chosen because people read and retype codes here (invite codes, project IDs, links):
 * the family is drawn so I, l and 1, and O and 0, never look alike. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-wght-normal.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: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.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: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-wght-italic.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: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-next-latin-ext-wght-italic.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: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-mono-latin-wght-normal.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: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/static/fonts/atkinson-hyperlegible-mono-latin-ext-wght-normal.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;
}

/* Fallbacks with Atkinson's metrics, so nothing moves when the font arrives. Its average width
 * matches Arial's; Menlo is about 5% narrower than the Mono. */
@font-face {
  font-family: "Atkinson Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  ascent-override: 98.4%;
  descent-override: 31.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Atkinson Mono Fallback";
  src: local("Menlo"), local("DejaVu Sans Mono");
  size-adjust: 105%;
  ascent-override: 93.7%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}

/* ── Tokens ────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  /* Paper: cool green-gray neutrals, one temperature. */
  --bg: oklch(0.972 0.005 170);
  --surface: oklch(0.993 0.003 170);
  --surface-2: oklch(0.948 0.008 170);
  --surface-raised: var(--surface);
  --text: oklch(0.24 0.022 175);
  --text-muted: oklch(0.47 0.02 175);
  --border: oklch(0.885 0.009 170);
  --border-strong: oklch(0.62 0.016 175);

  /* Board green: actions, links, the top bar. */
  --action: oklch(0.42 0.075 163);
  --action-hover: oklch(0.36 0.07 163);
  --on-action: oklch(0.985 0.004 165);
  --link: var(--action);
  --shell: oklch(0.31 0.05 166);
  --shell-hover: oklch(0.37 0.055 166);
  --on-shell: oklch(0.97 0.008 165);
  --focus-content: var(--action);
  --focus-shell: oklch(0.85 0.09 160);
  --focus: var(--focus-content);

  /* The highlighter: only for what waits on the viewer (and text selection). */
  --mark: oklch(0.925 0.165 104);
  --mark-wash: oklch(0.965 0.07 104);
  --on-mark: oklch(0.22 0.02 140);
  /* Secondary text and lines on the wash: a darker shade of its own hue, never gray (6.4:1). */
  --on-wash-muted: oklch(0.46 0.07 104);
  /* The outline of inputs, secondary buttons and copy boxes on the wash, in its hue (3.6:1). */
  --on-wash-line: oklch(0.6 0.05 104);

  /* States. Success shares the board green; danger and warning are used only where they mean it. */
  --success: var(--action);
  --success-wash: oklch(0.958 0.03 160);
  --success-line: oklch(0.85 0.05 160);
  --danger: oklch(0.51 0.17 27);
  --danger-wash: oklch(0.965 0.025 27);
  --danger-line: oklch(0.85 0.06 27);
  --danger-solid: oklch(0.51 0.17 27);
  --danger-solid-hover: oklch(0.45 0.16 27);
  --on-danger: oklch(0.985 0.005 27);
  --warning: oklch(0.53 0.12 58);
  --warning-wash: oklch(0.968 0.032 75);
  --warning-line: oklch(0.86 0.06 75);

  /* Tokens for people (the agent's square is drawn in line only). */
  --person: oklch(0.885 0.02 170);

  /* Depth: shadows tinted to the paper, light from above. */
  --shadow-card: 0 1px 2px oklch(0.3 0.03 170 / 0.06), 0 6px 20px -8px oklch(0.3 0.03 170 / 0.14);
  --shadow-menu: 0 2px 4px oklch(0.3 0.03 170 / 0.07), 0 14px 36px -10px oklch(0.3 0.03 170 / 0.26);

  /* Type: one family; a fixed scale at about 1.2. Atkinson's x-height is small, so body is 17px. */
  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", "Atkinson Mono Fallback", ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;

  /* Space on a 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape: inputs and buttons 8px, cards and menus 12px, labels 6px; people round, agents square. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Motion: state changes only. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;

  /* Layers. */
  --z-dropdown: 200;
  --z-skip: 300;

  /* Layout. */
  --page-max: 72rem;
  --narrow-max: 30rem;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Slate: green-black, each raised surface a step lighter. */
    --bg: oklch(0.185 0.012 170);
    --surface: oklch(0.22 0.014 170);
    --surface-2: oklch(0.255 0.016 170);
    --surface-raised: oklch(0.255 0.016 170);
    --text: oklch(0.94 0.008 165);
    --text-muted: oklch(0.75 0.016 168);
    --border: oklch(0.32 0.016 170);
    --border-strong: oklch(0.55 0.02 170);

    --action: oklch(0.8 0.1 160);
    --action-hover: oklch(0.86 0.09 160);
    --on-action: oklch(0.2 0.03 168);
    --link: oklch(0.82 0.09 160);
    --shell: oklch(0.25 0.04 166);
    --shell-hover: oklch(0.31 0.045 166);
    --on-shell: oklch(0.95 0.01 165);
    --focus-content: oklch(0.8 0.1 160);
    --focus-shell: oklch(0.8 0.1 160);

    --mark: oklch(0.9 0.155 103);
    --mark-wash: oklch(0.33 0.062 104);
    --on-wash-muted: oklch(0.8 0.075 104);
    --on-wash-line: oklch(0.63 0.055 104);

    --success-wash: oklch(0.28 0.04 160);
    --success-line: oklch(0.42 0.06 160);
    --danger: oklch(0.76 0.13 25);
    --danger-wash: oklch(0.28 0.05 25);
    --danger-line: oklch(0.42 0.08 25);
    --danger-solid: oklch(0.7 0.15 25);
    --danger-solid-hover: oklch(0.76 0.13 25);
    --on-danger: oklch(0.18 0.03 25);
    --warning: oklch(0.8 0.12 70);
    --warning-wash: oklch(0.29 0.05 70);
    --warning-line: oklch(0.42 0.07 70);

    --person: oklch(0.36 0.02 170);

    --shadow-card: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px -10px oklch(0 0 0 / 0.5);
    --shadow-menu: 0 2px 6px oklch(0 0 0 / 0.35), 0 16px 40px -10px oklch(0 0 0 / 0.6);
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}

/* ── Base ──────────────────────────────────────────────────────────── */

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

[hidden] {
  display: none !important;
}

html {
  font-family: var(--font-sans);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--border-strong) transparent;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.55;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--mark);
  color: var(--on-mark);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.2;
  text-wrap: balance;
}

p,
li,
dd {
  overflow-wrap: break-word;
  text-wrap: pretty;
}

strong,
b {
  font-weight: 650;
}

a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

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

code,
kbd,
samp {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

input,
textarea {
  caret-color: var(--action);
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

/* Text helpers. */

.muted {
  color: var(--text-muted);
}

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

.prose {
  max-width: 65ch;
}

.nowrap {
  white-space: nowrap;
}

.stack-sm > * + * {
  margin-top: var(--space-2);
}

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

/* ── Page shell ────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-skip);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-menu);
  font-weight: 600;
  transform: translateY(-200%);
}

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

.topbar {
  --focus: var(--focus-shell);
  background: var(--shell);
  color: var(--on-shell);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--page-max);
  min-height: 60px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: -6px;
  padding: 0 6px;
  border-radius: var(--radius-md);
  color: var(--on-shell);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 15px;
}

.topbar-nav {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.topbar-nav > :last-child {
  margin-left: auto;
}

/* Signed in, a hairline sets the projects apart from the wordmark: "Collab | Login rewrite". */
.topbar-nav:has(.account-menu)::before {
  content: "";
  flex: none;
  width: 1px;
  height: 20px;
  margin: 0 var(--space-1) 0 2px;
  background: color-mix(in oklab, var(--on-shell) 28%, transparent);
}

.topbar-link,
.topbar-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  color: var(--on-shell);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.topbar-link:hover,
.topbar-button:hover,
.menu[open] > .topbar-button {
  background: var(--shell-hover);
}

.topbar-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.topbar .avatar-person {
  background: var(--on-shell);
  color: var(--shell);
  border-color: transparent;
}

.switcher-name,
.account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.switcher-name {
  max-width: 11rem;
}

/* A long project name shortens to fit beside the account menu, which never shrinks. */
.switcher > summary {
  max-width: 100%;
}

.account-menu {
  flex: none;
}

@media (max-width: 359px) {
  /* On the smallest phones the mark stands alone; the link keeps its name for screen readers. */
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.account-name {
  max-width: 12rem;
}

@media (max-width: 559px) {
  /* The circle carries the account on phones; the name stays for screen readers. */
  .account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 640px) {
  .switcher-name {
    max-width: 18rem;
  }
}

/* Menus: <details>, so they open without scripts; ui.js closes them on Escape or a click outside. */

.menu {
  position: relative;
  min-width: 0;
}

.menu > summary {
  list-style: none;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu-caret {
  opacity: 0.8;
}

@media (prefers-reduced-motion: no-preference) {
  .menu-caret {
    transition: transform var(--dur-base) var(--ease-out);
  }
}

.menu[open] .menu-caret {
  transform: rotate(180deg);
}

.menu-panel {
  --focus: var(--focus-content);
  position: absolute;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  width: max-content;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 2 * var(--gutter)));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-menu);
}

.switcher .menu-panel {
  left: 0;
}

.account-menu .menu-panel {
  right: 0;
}

.menu-heading {
  padding: 8px 10px 6px;
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.menu-heading strong {
  color: var(--text);
}

.menu-list {
  padding: 0;
  list-style: none;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.menu-item:hover {
  background: var(--surface-2);
}

.menu-item > .icon {
  color: var(--text-muted);
}

.menu-item > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-item[aria-current="page"] {
  background: var(--surface-2);
  font-weight: 650;
}

.menu-item > .menu-check {
  color: var(--action);
}

.menu-divider {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

@media (pointer: coarse) {
  .menu-item {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .menu[open] > .menu-panel {
    animation: menu-in var(--dur-base) var(--ease-out);
  }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* The page. */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-8);
}

.page-narrow {
  max-width: calc(var(--narrow-max) + 2 * var(--gutter));
  padding-top: var(--space-6);
}

@media (min-width: 640px) {
  .page {
    padding-top: var(--space-7);
  }

  .page-narrow {
    padding-top: var(--space-8);
  }
}

.page > * + * {
  margin-top: var(--space-5);
}

/* A page that refreshes itself starts with its hidden poll marker; it takes no room. */
.page > [hidden]:first-child + * {
  margin-top: 0;
}

.page-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-header-text {
  flex: 1 1 22rem;
  min-width: 0;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.page-lead {
  max-width: 60ch;
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.page-lead strong {
  color: var(--text);
}

.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 479px) {
  /* Several actions fill their rows on a phone rather than leaving one button on a line of its own. */
  .page-header-actions:has(> :nth-child(2)) {
    flex: 1 1 100%;
  }

  .page-header-actions:has(> :nth-child(2)) > :is(.button, .button-form),
  .page-header-actions:has(> :nth-child(2)) > .button-form > .button {
    flex: 1 1 auto;
  }

  /* Three or more: the main action takes the first row, the others share the next. */
  .page-header-actions:has(> :nth-child(3)) > .button-primary {
    flex-basis: 100%;
  }
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: calc(-1 * var(--space-3)) 0 var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

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

/* Under a signed-out sheet: the ways to the other front doors. */
.sheet-foot {
  padding: 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.sheet-foot > * + * {
  margin-top: var(--space-2);
}

/* ── Sections and cards ────────────────────────────────────────────── */

.section {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.page > .section {
  margin-top: var(--space-6);
}

.page-header + .section,
.section:first-child {
  padding-top: var(--space-5);
}

.section-head {
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: 1.3;
}

.section-text {
  max-width: 60ch;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.section-actions {
  margin-top: var(--space-3);
}

@media (min-width: 640px) {
  /* Beside the heading on wider screens, at the end of its line; under it on phones. */
  .section:not(.section-split) > .section-head:has(> .section-actions) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-4);
  }

  .section:not(.section-split) > .section-head > .section-actions {
    grid-row: 1;
    grid-column: 2;
    margin-top: 0;
  }
}

.section-body > * + * {
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .section-split {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    column-gap: var(--space-7);
  }

  .section-split .section-head {
    margin-bottom: 0;
  }

  .section-split .section-body {
    max-width: 40rem;
  }
}

.card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.card > * + * {
  margin-top: var(--space-5);
}

@media (min-width: 640px) {
  .card {
    padding: var(--space-6);
  }
}

/* ── Buttons ───────────────────────────────────────────────────────── */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.button > .icon {
  margin-left: -2px;
}

.button:active:not(:disabled) {
  transform: translateY(1px);
}

.button-primary {
  background: var(--action);
  color: var(--on-action);
}

.button-primary:hover {
  background: var(--action-hover);
}

.button-secondary {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

.button-secondary:hover {
  border-color: var(--text-muted);
  background: var(--surface-2);
}

.button-quiet {
  padding: 0 10px;
  background: transparent;
  color: var(--link);
}

.button-quiet:hover {
  background: var(--surface-2);
}

.button-danger {
  background: var(--danger-solid);
  color: var(--on-danger);
}

.button-danger:hover {
  background: var(--danger-solid-hover);
}

.button-sm {
  min-height: 36px;
  padding: 0 12px;
  font-size: var(--text-sm);
}

@media (pointer: coarse) {
  .button-sm {
    min-height: 44px;
  }
}

.button-block {
  width: 100%;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Busy: the label stays, a ring turns before it (passkey.ts and <Button loading>). */
.button[aria-busy="true"] {
  cursor: progress;
  opacity: 1;
}

.button[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.button[aria-busy="true"] > .icon {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .button[aria-busy="true"]::before {
    animation: spin 0.8s linear infinite;
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* A row of buttons under a form; stacked full width on narrow phones. */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

@media (max-width: 479px) {
  .actions > .button:not(.button-quiet) {
    flex: 1 1 100%;
  }
}

/* A quiet button that starts a line lines its label up with the column, not its padding and border. */
.actions > .button-quiet:first-child,
.sheet-actions > .button-form > .button-quiet {
  margin-inline-start: -11px;
}

/* ── Forms ─────────────────────────────────────────────────────────── */

.form {
  display: grid;
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-label {
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.35;
}

.field-hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--danger);
  font-size: var(--text-sm);
  font-weight: 600;
}

.field-error > .icon {
  margin-top: 1px;
}

.field-inline {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.field-inline > .field-label {
  font-weight: 400;
  font-size: var(--text-md);
}

.field-row > .field-inline > .field-label {
  min-width: 2.75rem;
}

.field-inline > .field-hint,
.field-inline > .field-error {
  grid-column: 2;
}

.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.field-row-fill > .field {
  flex: 1 1 14rem;
}

/* A one-field form in a row: the field and its button side by side, wrapping on phones. */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.inline-form > .field {
  flex: 1 1 16rem;
  max-width: 24rem;
}

/* With its label above: the label, input, hint and error take the first column, and the button sits
 * beside the input itself rather than beside the whole field; under it on phones. */
.inline-form:has(> .field:not(.field-inline)) {
  display: grid;
  grid-template-columns: minmax(0, 24rem) auto;
  justify-content: start;
  align-items: center;
  gap: 6px var(--space-3);
}

.inline-form > .field:not(.field-inline) {
  display: contents;
}

.inline-form > .field:not(.field-inline) > * {
  grid-column: 1;
}

.inline-form > .field:not(.field-inline) > .field-label {
  grid-row: 1;
}

.inline-form > .field:not(.field-inline) > .input {
  grid-row: 2;
}

.inline-form > .field:not(.field-inline) + .button {
  grid-row: 2;
  grid-column: 2;
}

@media (max-width: 559px) {
  .inline-form:has(> .field:not(.field-inline)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .inline-form > .field:not(.field-inline) + .button {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
    margin-top: 6px;
  }
}

.fieldset > legend {
  margin-bottom: 6px;
}

.input {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.input:hover {
  border-color: var(--text-muted);
}

.input:focus {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.input[aria-invalid="true"] {
  border-color: var(--danger);
}

.input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.input:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

textarea.input {
  min-height: 7rem;
  resize: vertical;
}

input[type="time"].input {
  width: auto;
  min-width: 8.5rem;
}

input[type="number"].input {
  width: 8rem;
}

.input-code {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.select {
  position: relative;
  display: block;
}

.select > select {
  padding-right: 40px;
  appearance: none;
  cursor: pointer;
}

.select-caret {
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--text-muted);
  pointer-events: none;
  translate: 0 -50%;
}

.check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
}

.check > input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--action);
  cursor: pointer;
}

.check-hint {
  grid-column: 2;
  margin-top: -2px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Notices ───────────────────────────────────────────────────────── */

.notice {
  --notice-bg: var(--surface-2);
  --notice-line: var(--border);
  --notice-icon: var(--text-muted);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--notice-line);
  border-radius: var(--radius-md);
  background: var(--notice-bg);
  color: var(--text);
}

.notice-icon {
  margin-top: 2px;
  color: var(--notice-icon);
}

.notice-error {
  --notice-bg: var(--danger-wash);
  --notice-line: var(--danger-line);
  --notice-icon: var(--danger);
}

.notice-success {
  --notice-bg: var(--success-wash);
  --notice-line: var(--success-line);
  --notice-icon: var(--success);
}

.notice-warning {
  --notice-bg: var(--warning-wash);
  --notice-line: var(--warning-line);
  --notice-icon: var(--warning);
}

.notice-title {
  font-weight: 650;
}

.notice-body > * + * {
  margin-top: 6px;
}

/* ── Status, level and the "Needs you" marker ──────────────────────── */

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
}

/* The signature: what waits on you is highlighted. */
.status-you {
  padding: 2px 8px 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--mark);
  color: var(--on-mark);
  font-weight: 650;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.status-progress,
.status-ready,
.status-todo {
  color: var(--text);
}

.status-progress > .status-icon,
.status-ready > .status-icon,
.status-done > .status-icon {
  color: var(--action);
}

.status-todo > .status-icon,
.status-open,
.status-waiting,
.status-done,
.status-cancelled {
  color: var(--text-muted);
}

.status-stalled {
  color: var(--warning);
}

.status-overdue {
  color: var(--danger);
}

.status-marker {
  font-size: var(--text-xs);
}

.level {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
}

.level-steps {
  display: inline-flex;
  gap: 3px;
}

.level-step {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--text-muted);
  border-radius: 2px;
}

.level-step-on {
  border-color: var(--text);
  background: var(--text);
}

/* ── Tokens for people and agents ──────────────────────────────────── */

.avatar {
  --size: 36px;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: var(--person);
  color: var(--text);
  font-size: calc(var(--size) * 0.38);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

.avatar-agent {
  border-color: var(--text-muted);
  border-radius: 26%;
  background: transparent;
}

/* Where a to-do's token would be while nobody has it: an empty slot. */
.avatar-empty {
  border: 1.5px dashed var(--border-strong);
  background: transparent;
}

.avatar-sm {
  --size: 28px;
}

.avatar-lg {
  --size: 52px;
}

/* ── Lists ─────────────────────────────────────────────────────────── */

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

.row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "lead main actions";
  align-items: center;
  column-gap: var(--space-3);
  min-height: 44px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.row:first-child {
  border-top-color: transparent;
}

.row:not(:has(> .row-lead)) {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main actions";
}

/* A row holding more than a title and its meta (a note, a small form) keeps its actions at the top. */
.row:has(> .row-main > :nth-child(3)) {
  align-items: start;
}

.row-lead {
  grid-area: lead;
  align-self: start;
}

.row-main {
  grid-area: main;
  min-width: 0;
}

.row-main > * + * {
  margin-top: 4px;
}

.row-main > form {
  margin-top: var(--space-3);
}

.row-title {
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.row-link {
  color: var(--text);
  text-decoration: none;
}

.row-link:hover {
  text-decoration: underline;
}

/* A row that opens a page is a target from edge to edge (51px or taller), not just its title's
 * line: the link stretches over the row, and the focus ring goes around the row. ::before, not
 * ::after: Chromium stops balancing the title's last line (text-wrap: pretty) when an absolutely
 * positioned box follows the text. */
.row-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

.row-link:focus-visible {
  outline: none;
}

.row-link:focus-visible::before {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* The row's own controls stay above the stretched link. Positioned without a z-index, they paint
 * after it (they come later in the row) and make no stacking context, so a menu opened from a row
 * still overlaps the rows below it. A control in the lead comes before the link, so it needs one. */
.row-actions,
.row-main > form,
.row-main :is(a, button, summary, input, select, textarea, label):not(.row-link) {
  position: relative;
}

.row-lead :is(a, button, summary, input, select, textarea, label) {
  position: relative;
  z-index: 1;
}

.row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.row-icon {
  margin-top: 1px;
  color: var(--text-muted);
}

.row-note {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.row-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* A row that waits on you: on the highlighter wash, set off from the rules around it. Its muted
 * text, icons and agent outlines take the wash's own olive, not the paper's gray. */
.row-you {
  padding-inline: 14px;
  border-top-color: transparent;
  border-radius: var(--radius-md);
  background: var(--mark-wash);
  --text-muted: var(--on-wash-muted);
  --border-strong: var(--on-wash-line);
}

.row-you + .row {
  border-top-color: transparent;
}

.row-you + .row-you {
  margin-top: 6px;
}

@media (max-width: 639px) {
  .row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "lead main" ". actions";
  }

  .row:not(:has(> .row-lead)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "actions";
  }

  .row-actions {
    justify-content: flex-start;
  }

  .row-actions:not(:empty) {
    margin-top: var(--space-3);
  }
}

/* ── Empty states ──────────────────────────────────────────────────── */

.empty {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.empty-icon {
  margin-top: 1px;
}

.empty-title {
  color: var(--text);
  font-weight: 650;
}

.empty-action {
  margin-top: var(--space-3);
}

/* ── Tabs ──────────────────────────────────────────────────────────── */

.tabs {
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.tabs-list {
  display: flex;
  gap: var(--space-1);
  padding: 0;
  list-style: none;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.tab:hover,
.tab[aria-current="page"] {
  color: var(--text);
}

.tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: -1px;
  left: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.tab-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ── Copy boxes ────────────────────────────────────────────────────── */

.copy {
  display: grid;
  gap: 6px;
}

.copy-label {
  font-size: var(--text-sm);
  font-weight: 650;
}

.copy-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.copy-value {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-md);
  line-height: 1.5;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}

.copy-button {
  min-height: 46px;
}

.copy-hint {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 479px) {
  .copy-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── Details lists ─────────────────────────────────────────────────── */

.details-row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: var(--space-4);
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.details-row:first-child {
  border-top: 0;
}

.details dt {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

@media (max-width: 479px) {
  .details-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ── Skeletons ─────────────────────────────────────────────────────── */

.skeleton-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.skeleton-row:first-of-type {
  border-top: 0;
}

.skeleton-token {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
}

.skeleton-lines {
  display: grid;
  flex: 1;
  gap: 8px;
}

.skeleton-line {
  height: 12px;
  border-radius: 4px;
  background: var(--surface-2);
}

.skeleton-line-short {
  width: 40%;
}

@media (prefers-reduced-motion: no-preference) {
  .skeleton-token,
  .skeleton-line {
    animation: skeleton-pulse 1.6s ease-in-out infinite;
  }
}

@keyframes skeleton-pulse {
  50% {
    opacity: 0.5;
  }
}

/* ── Page parts ────────────────────────────────────────────────────── */

/* The passkey sentence under a form that creates one. */
.passkey-note {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* The invitation on the sign-up page: it waits on you, so it is highlighted. */
.invite {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--mark-wash);
  /* Muted text and control outlines on the wash are the wash's own olive, not the paper's gray. */
  --text-muted: var(--on-wash-muted);
  --border-strong: var(--on-wash-line);
}

.invite-from {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.invite-from strong {
  color: var(--text);
}

.invite-project {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* What a connecting app may do, on the consent page. */
.can-list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.can-list > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
}

.can-list .icon {
  margin-top: 3px;
  color: var(--action);
}

.app-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.app-id > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.app-id .verified {
  color: var(--action);
}

.app-id .unverified {
  color: var(--warning);
}

/* ── Project pages ─────────────────────────────────────────────────── */

/* A button that posts on its own (PostButton): its form takes no room of its own. */
.button-form {
  display: inline-flex;
}

@media (max-width: 479px) {
  .actions > .button-form,
  .actions > .button-form > .button {
    flex: 1 1 100%;
  }
}

/* What a list says while it's empty, when an empty state would be too much. */
.quiet-text {
  max-width: 60ch;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.plain-list {
  padding: 0;
  list-style: none;
}

.plain-list > li + li {
  margin-top: 4px;
}

.block-title {
  font-size: var(--text-md);
  font-weight: 650;
  line-height: 1.35;
}

/* Who wrote the text above it. */
.byline {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Two short sections side by side on wide screens: Waiting on others, Since your last visit. */
.page > .section-pair {
  margin-top: var(--space-6);
}

.section-pair {
  display: grid;
  gap: var(--space-6) var(--space-7);
}

@media (min-width: 900px) {
  .section-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.section-pair > .section {
  padding-top: var(--space-6);
}

/* A change in "Since your last visit" is a sentence, not a title. */
.row-title .change {
  font-weight: 400;
}

/* The brief beside its status block. */
.brief-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .brief-grid {
    grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
    align-items: start;
    column-gap: var(--space-7);
  }
}

/* "My agents can do" beside "I need to do". */
.todo-columns {
  display: grid;
  gap: var(--space-5) var(--space-7);
}

@media (min-width: 900px) {
  .todo-columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.column-title {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 650;
}

/* A status line under a page's title. */
.status-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

/* A block that waits on the viewer (an offer to answer, a review to settle, work to pick up): it is
 * their turn, so it sits on the highlighter wash, and its muted text takes the wash's own olive. */
.turn {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--mark-wash);
  --text-muted: var(--on-wash-muted);
  --border-strong: var(--on-wash-line);
}

.turn > .status {
  justify-self: start;
}

@media (min-width: 640px) {
  .turn {
    padding: var(--space-5);
  }
}

.review-forms {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .review-forms {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-6);
  }
}

/* The to-do page: what you can do, then its facts, then its text; on wide screens the facts sit in a
 * column beside the other two. */
.page > .todo-layout {
  margin-top: var(--space-6);
}

.todo-layout {
  display: grid;
  grid-template-areas: "actions" "aside" "main";
  row-gap: var(--space-6);
}

.todo-actions {
  grid-area: actions;
  min-width: 0;
}

.todo-actions:empty {
  display: none;
}

.todo-main {
  grid-area: main;
  min-width: 0;
}

.todo-aside {
  grid-area: aside;
  min-width: 0;
}

.todo-main > .section + .section {
  margin-top: var(--space-6);
}

@media (min-width: 1024px) {
  .todo-layout {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "actions aside" "main aside";
    align-items: start;
    column-gap: var(--space-7);
  }
}

.todo-aside .details-row {
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
}

.history {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.history > li {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-3);
}

.history time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 479px) {
  .history > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* Small forms that open in place (Save a note, Hand off, Ask a person): native <details>. */
.disclosures {
  display: grid;
  gap: var(--space-2);
}

.disclosure {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.disclosure-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

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

.disclosure-summary:hover {
  background: var(--surface-2);
}

.disclosure-caret {
  color: var(--text-muted);
}

.disclosure[open] .disclosure-caret {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .disclosure-caret {
    transition: transform var(--dur-base) var(--ease-out);
  }
}

.disclosure-body {
  padding: var(--space-2) var(--space-4) var(--space-4);
}

/* A disclosure inside a row: a quiet link-like control, its form under it. */
.disclosure-quiet {
  border: 0;
  background: none;
}

.disclosure-quiet > .disclosure-summary {
  display: inline-flex;
  min-height: 36px;
  padding: 0;
  color: var(--link);
  font-size: var(--text-sm);
}

.disclosure-quiet > .disclosure-summary:hover {
  background: none;
  text-decoration: underline;
}

.disclosure-quiet > .disclosure-body {
  padding: var(--space-2) 0 0;
}

@media (pointer: coarse) {
  .disclosure-quiet > .disclosure-summary {
    min-height: 44px;
  }
}

/* Attachments, deliverables and proof: links with their domain and who added them; files with their text. */
.work-items {
  padding: 0;
  list-style: none;
}

.work-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.work-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.work-icon {
  margin-top: 3px;
  color: var(--text-muted);
}

.work-body {
  min-width: 0;
}

.work-link {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.work-file {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.work-meta {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.file-text {
  max-height: 32rem;
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.file-plain {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.note-block > * + * {
  margin-top: var(--space-2);
}

/* Written text (cleaned-up Markdown from people and agents). Its headings start at h3. */
.md > * + * {
  margin-top: 0.75em;
}

.md h3,
.md h4,
.md h5,
.md h6 {
  margin-top: 1.25em;
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.35;
}

.md h4,
.md h5,
.md h6 {
  font-size: var(--text-sm);
}

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

.md ul,
.md ol {
  padding-left: 1.4em;
}

.md li + li {
  margin-top: 0.25em;
}

.md code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-2);
}

.md pre {
  padding: var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--text-sm);
}

.md pre code {
  padding: 0;
  background: none;
}

.md blockquote {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-strong);
  color: var(--text-muted);
}

.md hr {
  border: 0;
  border-top: 1px solid var(--border);
}

.md table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.md th,
.md td {
  padding: 6px 10px;
  border: 1px solid var(--border);
  text-align: left;
}

/* The domain after each link, so the reader sees where it goes. */
.md .domain {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* A rendered preview of a change: the document as it would be. */
.preview {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.diff {
  margin: 0;
  padding: var(--space-2) 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.diff > span {
  display: block;
  min-height: 1.5em;
  padding: 0 var(--space-3);
}

.diff-add {
  background: var(--success-wash);
}

.diff-del {
  background: var(--danger-wash);
}

/* Where unchanged lines are left out between the changes: a quiet band that says so. */
.diff > .diff-gap {
  margin: var(--space-1) 0;
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: 1.85;
}

/* The invitation's sentence beside the inviter's circle. */
.invite-text {
  font-size: var(--text-lg);
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.check-list {
  display: grid;
}

/* A long list of choices (Depends on, in a project with many open to-dos) scrolls in a box of its own. */
.check-list:has(> :nth-child(9)) {
  max-height: 22rem;
  padding: var(--space-1) var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

/* A short answer or note: as tall as its rows, not the kit's tall default. */
textarea.input[rows="2"],
textarea.input[rows="3"] {
  min-height: 0;
}

/* A page that is one form (add or edit a to-do) keeps to a readable width. */
.form-page {
  max-width: 40rem;
}

/* Under a sheet's main form: the lesser actions (cancel a question, change who decides). */
.sheet-actions {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

/* ── Reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  .button:active:not(:disabled) {
    transform: none;
  }
}