/* AgentDirective stylesheet, ported from mockups/b2/style.css with Carbon as the only palette.
   Every font is served from /fonts; nothing loads from a third-party host. */

/* ---------- Fonts (latin subset, SIL OFL 1.1, licences beside the files) ---------- */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Serif";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-serif-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2");
}

/* ---------- Palette: Carbon ---------- */

:root {
  --bg: #0e0e0e;
  --side: #090909;
  --s1: #151515;
  --s2: #1a1a1a;
  --s3: #222222;
  --line: #222222;
  --line-2: #2e2e2e;
  --text: #ececec;
  --text-2: #a8a8a8;
  --text-3: #8a8a8a;
  --accent: #c6ef4e;
  --accent-rgb: 198, 239, 78;
  --accent-fill: #c6ef4e;
  --on-accent: #121800;
  --st-open: #d4d4d4;
  --st-prog: #4fd29b;
  --st-block: #f46b6e;
  --st-closed: #8c8c8c;
  --st-conf: #f2913f;
  --st-conf-rgb: 242, 145, 63;
  --intent: #e47cc9;
  --intent-rgb: 228, 124, 201;
  --ok: #4fd29b;
  --bad: #f46b6e;
  --bad-rgb: 244, 107, 110;
  --dots: rgba(236, 236, 236, 0.06);
}

/* Label hues. None of them is blue, cyan, teal, gold or violet. */
:root {
  --lb-bug: 236, 110, 110;
  --lb-feature: 110, 200, 155;
  --lb-sync: 222, 128, 196;
  --lb-auth: 206, 214, 104;
  --lb-mcp: 238, 152, 88;
  --lb-ui: 214, 214, 214;
  --lb-chore: 150, 150, 150;
  --lb-enh: 180, 180, 180;

  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-doc: "IBM Plex Serif", "Iowan Old Style", Charter, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --side-w: 232px;
  --pv-w: clamp(400px, 33vw, 480px);
  --row-h: 30px;
  --r1: 4px;
  --r2: 6px;
  --r3: 10px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 120ms;
  --t-med: 200ms;
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--line-2);

  color-scheme: dark;
}

/* ---------- Base ---------- */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "tnum" 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

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

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}

::selection {
  background: rgba(var(--accent-rgb), 0.28);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

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

.faint {
  color: var(--text-3);
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: var(--r1);
  color: var(--text-3);
  font: 500 10.5px/1 var(--font-mono);
}

.ic {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}

.ic--14 {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.ic--12 {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}

.ic--20 {
  width: 20px;
  height: 20px;
}

/* ---------- App shell and sidebar ---------- */

.app {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  height: 100vh;
}

.side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--side);
  border-right: 1px solid var(--line);
}

.side-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 52px;
  padding: 0 14px;
  color: var(--text);
}

.side-brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.brand-name {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

.brand-host {
  margin-left: auto;
  color: var(--text-3);
  font: 400 10.5px var(--font-mono);
}

.side-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 0 10px 10px;
}

.side-search,
.side-new {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--s1);
  color: var(--text-3);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.side-search:hover,
.side-new:hover {
  border-color: var(--line-2);
  color: var(--text-2);
  text-decoration: none;
}

.side-search span {
  flex: 1;
  text-align: left;
}

.side-new {
  color: var(--text-2);
  padding: 0 7px;
}

.side-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 8px 12px;
  scrollbar-width: thin;
}

.side-group + .side-group {
  margin-top: 14px;
}

.side-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.side-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--r2);
  color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}

.side-link:hover {
  background: var(--s2);
  color: var(--text);
  text-decoration: none;
}

.side-link.is-active {
  background: var(--s3);
  color: var(--text);
}

.side-link.is-active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}

.side-link .ic {
  color: var(--text-3);
}

.side-link.is-active .ic {
  color: var(--text-2);
}

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

.side-count {
  color: var(--text-3);
  font: 400 11px var(--font-mono);
}

.side-count--alert {
  color: var(--st-conf);
}

/* Grows past 18px for keys longer than two letters; a key runs to 10. */
.side-key {
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  flex: none;
  border-radius: var(--r1);
  background: var(--s3);
  color: var(--text-2);
  font: 600 9.5px var(--font-mono);
}

.side-link.is-current-project {
  color: var(--text);
}

.side-link.is-current-project .side-key {
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent);
}

.side-sub {
  position: relative;
  margin: 2px 0 6px;
  padding-left: 17px;
}

.side-sub::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--line-2);
}

.side-sub .side-link {
  height: 26px;
  padding-left: 12px;
}

.side-sub .side-link.is-active::before {
  left: -1px;
}

.side-view-dot {
  width: 6px;
  height: 6px;
  margin: 0 5px;
  flex: none;
  border-radius: 50%;
  background: var(--text-3);
}

/* Save this list: a sidebar link that opens a name field and its button below it. */
.side-save > summary {
  cursor: pointer;
  list-style: none;
}

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

.side-save[open] > summary {
  color: var(--text);
}

.side-save-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  padding: 4px 8px 8px;
}

.side-save-form > .btn {
  height: 34px;
}

/* ---------- Saved views page ---------- */

.views-wrap {
  display: grid;
  gap: 24px;
  max-width: 820px;
  padding: 24px 32px 80px;
}

.views-sec {
  display: grid;
  gap: 10px;
}

.views-h {
  font-size: 14px;
  font-weight: 600;
}

.views-save {
  border-bottom: 0;
}

.views-empty {
  padding: 16px;
  color: var(--text-2);
}

/* One view: its rename form, then Open and Delete. */
.view-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
}

.view-row + .view-row {
  border-top: 1px solid var(--line);
}

.view-row-problem {
  grid-column: 1 / -1;
}

.view-rename {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.view-rename > .btn,
.view-row > .btn,
.view-row > form > .btn {
  height: 34px;
}

/* Phones: every control 40px tall, the forms stacked, Open and Delete side by side under the rename form. */
@media (max-width: 767px) {
  .side-save-form,
  .view-rename {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-save-form > .btn,
  .view-rename > .btn,
  .view-row > .btn,
  .view-row > form > .btn {
    height: 40px;
  }

  .views-wrap {
    gap: 16px;
    padding: 16px 16px 48px;
  }

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

  .view-rename {
    grid-column: 1 / -1;
  }

  .view-row > .btn {
    justify-self: start;
  }
}

.side-foot {
  border-top: 1px solid var(--line);
  padding: 8px;
}

.side-me {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 8px;
  border-radius: var(--r2);
}

.side-me-name {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.side-me-name b {
  display: block;
  font-weight: 500;
}

.side-me-name span {
  color: var(--text-3);
  font-size: 11.5px;
}

/* ---------- Avatars, buttons, small tokens ---------- */

.av {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--s3);
  color: var(--text-2);
  font: 600 9.5px var(--font-ui);
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.av--lg {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.av--agent {
  border-radius: var(--r2);
}

.av--agent .ic {
  width: 14px;
  height: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--s2);
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.btn:hover {
  background: var(--s3);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn .ic {
  color: var(--text-2);
}

.btn--primary {
  border-color: transparent;
  background: var(--accent-fill);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--accent-fill);
  filter: brightness(1.08);
}

.btn--primary .ic {
  color: currentColor;
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
}

.btn--ghost:hover {
  background: var(--s2);
  color: var(--text);
}

.btn--danger {
  color: var(--bad);
}

.btn--sm {
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
}

.btn--lg {
  height: 38px;
  padding: 0 16px;
  font-size: 14px;
}

.btn--icon {
  width: 30px;
  padding: 0;
}

.btn--icon.btn--sm {
  width: 26px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.btn kbd {
  margin-left: 2px;
  border-color: rgba(0, 0, 0, 0.18);
}

.btn--primary kbd {
  color: inherit;
  opacity: 0.7;
  border-color: currentColor;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.tag--human {
  border-style: dashed;
}

.tag--alert {
  border-color: rgba(var(--st-conf-rgb), 0.45);
  color: var(--st-conf);
}

.sess {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r1);
  background: var(--s3);
  color: var(--text-2);
  font: 500 11px var(--font-mono);
  white-space: nowrap;
}

.sess .ic {
  color: var(--text-3);
}

/* Label chips. Modifier names carry the label; the base class never equals a label name. */

.chip {
  --c: var(--lb-chore);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 7px 0 6px;
  border: 1px solid rgba(var(--c), 0.26);
  border-radius: 999px;
  background: rgba(var(--c), 0.09);
  color: rgb(var(--c));
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--c));
}

.chip--bug { --c: var(--lb-bug); }
.chip--feature { --c: var(--lb-feature); }
.chip--sync { --c: var(--lb-sync); }
.chip--auth { --c: var(--lb-auth); }
.chip--mcp { --c: var(--lb-mcp); }
.chip--ui { --c: var(--lb-ui); }
.chip--chore { --c: var(--lb-chore); }
.chip--enh { --c: var(--lb-enh); }

.chip--add {
  border-style: dashed;
  border-color: var(--line-2);
  background: transparent;
  color: var(--text-3);
}

.chip--add::before {
  display: none;
}

/* Label pickers: a chip is a toggle button; unpicked ones go quiet. */
button.chip {
  height: 22px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

button.chip[aria-pressed="false"] {
  border-style: dashed;
  border-color: var(--line-2);
  background: transparent;
  color: var(--text-3);
}

button.chip[aria-pressed="false"]::before {
  background: var(--line-2);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* State: icon plus word. The icon shape differs per state, so color is never the only cue. */

.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.st--open { color: var(--st-open); }
.st--prog { color: var(--st-prog); }
.st--block { color: var(--st-block); }
.st--closed { color: var(--st-closed); }
.st--conf { color: var(--st-conf); }

.st-pill {
  height: 22px;
  padding: 0 9px 0 6px;
  border: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: 12px;
  font-weight: 500;
}

/* Priority: four ascending bars, lit count is urgency (P0 four, P3 one). */

.prio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  white-space: nowrap;
}

.prio-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.prio-bars i {
  width: 3px;
  border-radius: 1px;
  background: var(--line-2);
}

.prio-bars i:nth-child(1) { height: 4px; }
.prio-bars i:nth-child(2) { height: 7px; }
.prio-bars i:nth-child(3) { height: 10px; }
.prio-bars i:nth-child(4) { height: 12px; }

.prio[data-p="3"] .prio-bars i:nth-child(-n + 1),
.prio[data-p="2"] .prio-bars i:nth-child(-n + 2),
.prio[data-p="1"] .prio-bars i:nth-child(-n + 3) {
  background: var(--text-2);
}

.prio[data-p="1"] .prio-bars i:nth-child(-n + 3) {
  background: var(--text);
}

.prio[data-p="0"] {
  color: var(--st-block);
}

.prio[data-p="0"] .prio-bars i {
  background: var(--st-block);
}

.prio[data-p="none"] .prio-bars i {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.prio-label {
  font-size: 12px;
}

/* Claim fuse: remaining claim lifetime before the 24h inactivity release. */

.fuse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  font: 400 11px var(--font-mono);
  white-space: nowrap;
}

.fuse-track {
  position: relative;
  width: 30px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--s3);
}

.fuse-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 2px;
  background: var(--st-prog);
}

.fuse.is-low {
  color: var(--st-conf);
}

.fuse.is-low .fuse-fill {
  background: var(--st-conf);
}

/* Block-level so the track can stretch: an inline-flex fuse has no width to share. */
.fuse--wide {
  display: flex;
  gap: 8px;
}

.fuse--wide .fuse-track {
  flex: 1;
  width: auto;
  height: 5px;
}

/* ---------- Page head, toolbar, menus ---------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.main--scroll {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  height: 52px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-3);
  white-space: nowrap;
}

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

.crumbs .ic {
  color: var(--line-2);
}

.page-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page-title small {
  margin-left: 6px;
  color: var(--text-3);
  font: 400 12px var(--font-mono);
}

.head-spacer {
  flex: 1;
}

.page-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 0;
  height: 44px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
}

.seg {
  display: inline-flex;
  flex: none;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--s1);
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r1);
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn.is-on {
  background: var(--s3);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px var(--line-2);
}

.seg-n {
  color: var(--text-3);
  font: 400 11px var(--font-mono);
}

.filt {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r2);
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  white-space: nowrap;
  list-style: none;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.filt::-webkit-details-marker {
  display: none;
}

.filt:hover {
  border-color: var(--text-3);
  color: var(--text);
}

.filt.is-set {
  border-style: solid;
  background: var(--s2);
  color: var(--text);
}

.filt .ic {
  color: var(--text-3);
}

/* A filter chip's value: cut with an ellipsis past a fixed width; the chip's title carries a set value whole. */
.filt-val {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu {
  position: relative;
}

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

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

.menu-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  max-height: min(420px, 70vh);
  overflow-y: auto;
  padding: 5px;
  border-radius: var(--r3);
  background: var(--s2);
  box-shadow: var(--shadow-pop);
  animation: pop-in var(--t-fast) var(--ease);
}

.menu-pop--right {
  left: auto;
  right: 0;
}

/* A closed menu's popover takes no room, so one near the right edge cannot widen the page. */
.menu:not([open]) > .menu-pop {
  display: none;
}

.menu-sep {
  height: 1px;
  margin: 4px -5px;
  background: var(--line-2);
}

.menu-h {
  padding: 6px 8px 4px;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r1);
  background: transparent;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
}

.menu-item:hover {
  background: var(--s3);
  text-decoration: none;
}

.menu-item .menu-n {
  margin-left: auto;
  color: var(--text-3);
  font: 400 11px var(--font-mono);
}

.menu-check {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: transparent;
}

.menu-item.is-on .menu-check {
  border-color: var(--accent);
  background: var(--accent-fill);
  color: var(--on-accent);
}

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

.search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.search > .ic {
  position: absolute;
  left: 8px;
  color: var(--text-3);
  pointer-events: none;
}

.search input {
  width: 220px;
  min-width: 0;
  height: 28px;
  padding: 0 30px 0 29px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--s1);
  transition: border-color var(--t-fast), width var(--t-med) var(--ease);
}

.search input::placeholder {
  color: var(--text-3);
}

.search input:focus {
  width: 260px;
  border-color: var(--line-2);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35);
}

.search kbd {
  position: absolute;
  right: 6px;
  pointer-events: none;
}

/* The clear link stands where the / hint does; the browser's own clear button only empties the box, so it goes. */
.search input::-webkit-search-cancel-button {
  display: none;
}

.search-clear {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r1);
  color: var(--text-3);
}

.search-clear:hover {
  background: var(--s3);
  color: var(--text);
}

/* The notice's slot on the issue list leaves the notice laid out as if it stood alone (Issues.cshtml). */
.notice-slot {
  display: contents;
}

.notice-slot[hidden] {
  display: none;
}

.notice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-width: 0;
  height: 36px;
  padding: 0 20px;
  border-bottom: 1px solid var(--line);
  background: var(--s1);
  color: var(--text-2);
  white-space: nowrap;
}

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

.notice b {
  color: var(--text);
  font-weight: 500;
}

.notice .ic {
  color: var(--text-3);
}

/* ---------- Issue list with preview ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pv-w);
  flex: 1;
  min-height: 0;
}

.split.is-pv-closed {
  grid-template-columns: minmax(0, 1fr) 0;
}

.list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* The number column is fixed, not auto, because every row is its own grid. 112px holds the longest number a project
   gives out on one line: a 10-character key, the dash and five digits, 16 characters of 11.5px JetBrains Mono at
   0.6em each. */
.list-head,
.list-row {
  display: grid;
  grid-template-columns: 16px 112px minmax(0, 1fr) 24px 76px 34px;
  column-gap: 10px;
  align-items: center;
  padding: 0 16px 0 18px;
}

.split.is-pv-closed .list-head,
.split.is-pv-closed .list-row {
  grid-template-columns: 16px 112px minmax(0, 1fr) 132px 24px 160px 30px 34px;
}

/* Origin and comments only show with the preview closed. These selectors outrank the
   shared ".lr-* { display: flex }" cell rule below, so the row keeps the header's columns. */
.list-row > .lr-origin,
.list-row > .lr-cmts {
  display: none;
}

.split.is-pv-closed .list-row > .lr-origin,
.split.is-pv-closed .list-row > .lr-cmts {
  display: flex;
}

.list-head {
  flex: none;
  height: 30px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.list-head > span {
  display: flex;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.list-head .lh-end {
  justify-content: flex-end;
}

.list-head .lh-origin,
.list-head .lh-cmts {
  display: none;
}

.split.is-pv-closed .list-head .lh-origin,
.split.is-pv-closed .list-head .lh-cmts {
  display: flex;
}

.list-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}

.list-row {
  position: relative;
  height: var(--row-h);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  cursor: default;
  transition: background var(--t-fast);
}

.list-row:hover {
  background: var(--s1);
}

.list-row.is-selected {
  background: rgba(var(--accent-rgb), 0.075);
}

.list-row.is-selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}

.list-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 0;
}

.list-row[hidden] {
  display: none;
}

.lr-state {
  display: flex;
}

.lr-id {
  min-width: 0;
  overflow: hidden;
  color: var(--text-3);
  font: 400 11.5px var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-row.is-selected .lr-id {
  color: var(--text-2);
}

.lr-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

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

/* Labels never take more than half the title cell, and a long one ends in an ellipsis, so the title always shows. */
.lr-chips {
  display: flex;
  flex: 0 1 auto;
  gap: 4px;
  min-width: 0;
  max-width: 50%;
  overflow: hidden;
}

.lr-chips .chip {
  flex: 0 1 auto;
  min-width: 0;
}

.lr-chips .chip::before {
  flex: none;
}

.chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-row[data-state="closed"] .lr-text {
  color: var(--text-2);
}

.lr-flag {
  flex: none;
  color: var(--text-3);
  font-size: 11.5px;
  white-space: nowrap;
}

.lr-flag--human {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 19px;
  padding: 0 6px;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
}

.lr-prio,
.lr-claim,
.lr-sync,
.lr-when,
.lr-origin,
.lr-cmts {
  display: flex;
  align-items: center;
  min-width: 0;
}

.lr-origin {
  gap: 6px;
  color: var(--text-2);
  font-size: 12px;
  white-space: nowrap;
}

.lr-origin span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-origin .ic {
  color: var(--text-3);
}

.lr-cmts {
  gap: 4px;
  color: var(--text-3);
  font: 400 11px var(--font-mono);
}

.lr-claim .claim-none {
  color: var(--text-3);
}

/* The row's number and title are links to the issue's page, drawn as the list's text. */
.lr-id:hover,
.lr-text:hover {
  text-decoration: none;
}

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

.list-row[data-state="closed"] a.lr-text {
  color: var(--text-2);
}

/* The claim's holder shows beside its fuse only while the list has the room the panel would take. */
.lr-claim {
  gap: 8px;
}

.lr-claim-who {
  min-width: 0;
  overflow: hidden;
  color: var(--text-2);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split:not(.is-pv-closed) .lr-claim-who {
  display: none;
}

.lr-sync {
  color: var(--text-3);
}

.lr-sync .is-linked {
  color: var(--text-2);
}

.lr-sync .is-inbound {
  color: var(--text-2);
}

.lr-sync .is-conflict {
  color: var(--st-conf);
}

.lr-when {
  justify-content: flex-end;
  color: var(--text-3);
  font: 400 11px var(--font-mono);
}

.list-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  height: 32px;
  padding: 0 18px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}

.list-foot .head-spacer + span kbd {
  margin: 0 2px;
}

.list-keys kbd {
  margin-right: 2px;
}

.pager {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* The parent filter: a GET form drawn as a filter chip, its number typed in place in the chip's own font, like the
   chips beside it. */
.filt-parent input {
  width: 64px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}

.filt-parent input:focus {
  outline: none;
}

.filt-parent:focus-within {
  border-color: var(--line-2);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35);
}

.filt-parent a {
  display: inline-flex;
  color: var(--text-3);
}

.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 64px 24px;
  color: var(--text-2);
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r3);
  color: var(--text-3);
}

.empty h3 {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.empty p {
  max-width: 340px;
}

/* ---------- Preview pane ---------- */

.pv {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--s1);
}

.split.is-pv-closed .pv {
  display: none;
}

/* The panel's content is swapped whole by htmx; it fills the pane so the body scrolls under the head. */
.pv-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.pv-meta {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pv-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 44px;
  padding: 0 10px 0 18px;
  border-bottom: 1px solid var(--line);
}

.pv-id {
  color: var(--text-2);
  font: 500 12px var(--font-mono);
}

.pv-pos {
  margin: 0 2px;
  color: var(--text-3);
  font: 400 11px var(--font-mono);
  white-space: nowrap;
}

.pv-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px 24px;
  scrollbar-width: thin;
  transition: opacity var(--t-fast);
}

.pv-body.is-entering {
  animation: pv-in var(--t-med) var(--ease);
}

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

.pv-title {
  font: 500 19px/1.3 var(--font-doc);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.pv-by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 6px;
  color: var(--text-3);
  font-size: 12px;
}

.pv-props {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 8px 12px;
  align-items: center;
  margin: 16px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pv-props dt {
  color: var(--text-3);
  font-size: 12px;
}

.pv-props dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}

.pv-sec {
  margin-top: 18px;
}

.pv-sec-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pv-sec-h a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.pv-excerpt {
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.pv-excerpt p + p {
  margin-top: 8px;
}

.pv-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.pv-promote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r2);
  color: var(--text-2);
  font-size: 12.5px;
}

.pv-promote.is-done {
  border-style: solid;
  border-color: rgba(var(--accent-rgb), 0.4);
}

.pv-promote .ic {
  color: var(--text-3);
}

/* The issue page's 288px aside has no room for the button beside the words, so it drops under them. */
.doc-aside .pv-promote {
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 0;
}

.doc-aside .pv-promote form {
  grid-column: 2;
}

.pv-empty {
  display: grid;
  place-content: center;
  height: 100%;
  color: var(--text-3);
  text-align: center;
}

.mini-tl {
  display: grid;
  gap: 1px;
}

.mini-ev {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  color: var(--text-2);
  font-size: 12.5px;
}

.mini-ev b {
  color: var(--text);
  font-weight: 500;
}

.mini-ev .ic {
  align-self: center;
  color: var(--text-3);
}

.mini-ev time {
  color: var(--text-3);
  font: 400 11px var(--font-mono);
}

.mini-ev q {
  quotes: none;
  color: var(--text-2);
}

/* Loading skeleton, shown while htmx would fetch the pane. */

.sk {
  display: grid;
  gap: 10px;
}

.sk i {
  display: block;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--s3) 0%, var(--line-2) 40%, var(--s3) 80%);
  background-size: 300% 100%;
  animation: sk-shine 1.1s linear infinite;
}

.sk i.sk-title {
  height: 18px;
  width: 80%;
}

@keyframes sk-shine {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -50% 0;
  }
}

/* ---------- Operator intent ---------- */

.opi {
  position: relative;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(var(--intent-rgb), 0.28);
  border-radius: var(--r2);
  background:
    repeating-linear-gradient(-45deg, rgba(var(--intent-rgb), 0.045) 0 1px, transparent 1px 7px),
    rgba(var(--intent-rgb), 0.04);
}

.opi::before {
  content: "";
  position: absolute;
  left: -1px;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: var(--r2) 0 0 var(--r2);
  background: var(--intent);
}

.opi-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--intent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.opi-head .opi-scope {
  margin-left: auto;
  color: var(--text-3);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.opi-quote {
  margin: 8px 0 0;
  color: var(--text);
  font: italic 400 15px/1.55 var(--font-doc);
}

.opi-meta {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 12px;
}

.opi--compact {
  padding: 10px 12px 10px 14px;
}

.opi--compact .opi-quote {
  font-size: 13.5px;
}

/* ---------- Issue document ---------- */

.doc-wrap {
  max-width: 1200px;
  padding: 22px 32px 64px;
}

.doc-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--text-3);
}

.doc-num {
  color: var(--text-3);
  font: 400 15px var(--font-mono);
}

.doc-title {
  font: 500 27px/1.25 var(--font-doc);
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.doc-title .doc-num {
  margin-right: 10px;
  vertical-align: 3px;
}

.doc-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 10px;
  color: var(--text-2);
}

.doc-byline .dot-sep {
  color: var(--line-2);
}

.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 36px;
  margin-top: 22px;
  align-items: start;
}

.doc-main {
  min-width: 0;
}

.doc-body {
  padding: 4px 2px 0;
  font-size: 14.5px;
  line-height: 1.7;
}

.doc-body h3 {
  margin: 22px 0 6px;
  color: var(--text);
  font: 600 13px var(--font-ui);
  letter-spacing: 0.01em;
}

.doc-body h3:first-child {
  margin-top: 0;
}

.doc-body p,
.doc-body ol,
.doc-body ul {
  margin: 0 0 10px;
  color: var(--text);
}

.doc-body ol,
.doc-body ul {
  padding-left: 22px;
}

.doc-body li + li {
  margin-top: 3px;
}

/* A task list's checkbox stands in for the bullet. The sanitiser drops Markdig's classes, so the item is found by its box. */
.doc-body li:has(> input[type="checkbox"]) {
  list-style: none;
}

.doc-body li > input[type="checkbox"] {
  margin: 0 6px 0 -20px;
  vertical-align: -2px;
  accent-color: var(--accent-fill);
}

.doc-body code {
  padding: 1px 5px;
  border-radius: var(--r1);
  background: var(--s3);
  font: 400 12.5px var(--font-mono);
}

.doc-body pre {
  margin: 8px 0 12px;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--side);
  font: 400 12.5px/1.6 var(--font-mono);
}

.doc-body pre code {
  padding: 0;
  background: none;
}

.doc-body .tok-c {
  color: var(--text-3);
}

.doc-body .tok-k {
  color: var(--accent);
}

/* Markdown as members type it: every heading level reads like the mockup's h3, and long words, links, tables and
   images stay inside the column on a phone. */

.doc-body,
.doc-title {
  overflow-wrap: anywhere;
}

.doc-num {
  white-space: nowrap;
}

/* A long project name gives way to the issue reference beside it. */
.doc-top .crumbs > a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-body h1,
.doc-body h2,
.doc-body h4,
.doc-body h5,
.doc-body h6 {
  margin: 22px 0 6px;
  color: var(--text);
  font: 600 13px var(--font-ui);
  letter-spacing: 0.01em;
}

.doc-body h1,
.doc-body h2 {
  font-size: 14px;
}

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

.doc-body blockquote {
  margin: 0 0 10px;
  padding-left: 12px;
  border-left: 2px solid var(--line-2);
  color: var(--text-2);
}

.doc-body hr {
  margin: 16px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.doc-body table {
  display: block;
  max-width: 100%;
  margin: 0 0 12px;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 13px;
}

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

.doc-body th {
  background: var(--s1);
  font-weight: 600;
}

.doc-body img {
  max-width: 100%;
}

/* Operator intent rendered from Markdown keeps the quote's italic serif. */
.opi-body {
  margin-top: 8px;
  padding: 0;
  font: italic 400 15px/1.55 var(--font-doc);
}

.doc-section-gap {
  margin-top: 22px;
}

.doc-edited {
  margin-top: 10px;
  color: var(--text-3);
  font-size: 12px;
}

/* Timeline: comments and history in one stream. */

.tl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 34px 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.tl-bar h2 {
  font-size: 13px;
  font-weight: 600;
}

.tl {
  position: relative;
  padding-left: 36px;
}

.tl::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--line-2);
}

.tl-day {
  position: relative;
  margin: 18px 0 6px -36px;
  padding-left: 36px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tl-day::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--line-2);
}

.tl-ev {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 0;
  color: var(--text-2);
  font-size: 12.5px;
}

.tl-ev-dot {
  position: absolute;
  left: -32px;
  top: 5px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-3);
}

.tl-ev b {
  color: var(--text);
  font-weight: 500;
}

.tl-ev s {
  color: var(--text-3);
}

.tl-when {
  color: var(--text-3);
  font: 400 11px var(--font-mono);
  white-space: nowrap;
}

/* After .tl-ev-dot, so an intent entry's dot takes the intent colour. */
.tl-intent {
  color: var(--intent);
}

/* The control is links (it works without script), and a selected segment reads as a button, not a link. */
.tl-bar .seg-btn:hover {
  text-decoration: none;
}

.tl-cmt {
  position: relative;
  margin: 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--s1);
}

.tl-cmt > .av {
  position: absolute;
  left: -36px;
  top: 8px;
  box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 1px var(--line-2);
}

.tl-cmt-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12px;
}

.tl-cmt-head b {
  color: var(--text);
  font-weight: 500;
}

.tl-cmt-head .tl-when {
  margin-left: auto;
}

.tl-cmt-body {
  padding: 10px 14px 12px;
  font-size: 14px;
  line-height: 1.65;
}

.tl-cmt-body p + p,
.tl-cmt-body p + ol,
.tl-cmt-body ol + p {
  margin-top: 8px;
}

.tl-cmt-body ol {
  margin: 0;
  padding-left: 20px;
}

.tl-cmt-body code {
  padding: 1px 5px;
  border-radius: var(--r1);
  background: var(--s3);
  font: 400 12px var(--font-mono);
}

.tl-cmt.is-agent {
  background: var(--bg);
}

/* A comment is rendered Markdown in .doc-body; its last block sits on the card's own padding. */
.tl-cmt-body > :last-child {
  margin-bottom: 0;
}

.tl-cmt-edit textarea {
  display: block;
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  resize: vertical;
  line-height: 1.6;
}

.tl-cmt-edit textarea:focus {
  outline: none;
}

.tl-cmt-edit .gate-error {
  margin: 10px 14px 0;
}

.composer-error {
  margin: 18px 0 0 36px;
}

.tl[data-show="comments"] .tl-ev {
  display: none;
}

.tl[data-show="history"] .tl-cmt {
  display: none;
}

/* The Sessions view: one card per agent session, its claims, then what it wrote. It takes the feed's indent so the cards
   line up with the comments in the other views. */
.sl {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-left: 36px;
}

.sl-entry {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--s1);
}

.sl-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12px;
}

.sl-head b {
  color: var(--text);
  font-weight: 500;
}

.sl-who {
  min-width: 0;
  margin-right: auto;
}

.sl-claims,
.sl-writes {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 14px;
  list-style: none;
}

.sl-claims {
  border-bottom: 1px solid var(--line);
}

.sl-claim {
  display: grid;
  gap: 2px;
  color: var(--text-2);
  font-size: 12.5px;
}

.sl-claim b {
  color: var(--text);
  font-weight: 500;
}

/* The direction is the agent's own words, up to 2000 characters with their line breaks. */
.sl-direction {
  color: var(--text-3);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sl-write {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  color: var(--text-2);
  font-size: 12.5px;
}

.sl-write b {
  color: var(--text);
  font-weight: 500;
}

.sl-write s {
  color: var(--text-3);
}

.sl-when {
  color: var(--text-3);
  font: 400 11px var(--font-mono);
  white-space: nowrap;
}

.sl-none {
  margin: 0;
  padding: 10px 14px;
  color: var(--text-3);
  font-size: 12.5px;
}

.composer {
  position: relative;
  margin: 18px 0 0 36px;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--s1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.composer:focus-within {
  border-color: rgba(var(--accent-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.composer > .av {
  position: absolute;
  left: -36px;
  top: 8px;
}

.composer textarea {
  display: block;
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  resize: vertical;
  line-height: 1.6;
}

.composer textarea:focus {
  outline: none;
}

.composer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 14px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12px;
}

/* Meta column beside the document. */

.doc-aside {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 2px;
}

.meta-sec {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.meta-sec:first-child {
  padding-top: 0;
}

.meta-sec:last-child {
  border-bottom: 0;
}

.meta-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.meta-h button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
}

.meta-h button:hover {
  color: var(--text);
}

.meta-kv {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 6px 10px;
  align-items: center;
  font-size: 12.5px;
}

.meta-kv dt {
  color: var(--text-3);
}

.meta-kv dd {
  min-width: 0;
  margin: 0;
  color: var(--text);
}

.state-select {
  position: relative;
  display: flex;
  align-items: center;
}

.state-select .ic {
  position: absolute;
  left: 9px;
  pointer-events: none;
}

.state-select select {
  width: 100%;
  height: 30px;
  padding: 0 28px 0 31px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--s1);
  appearance: none;
  font-weight: 500;
}

.state-select::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 12px;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg);
  pointer-events: none;
}

/* The issue's own edits: Edit and Close issue in the top row, state, priority and labels in the aside. Each control is
   a form; without script its button posts it, with htmx a change does. */
.doc-top .btn {
  flex: none;
}

.doc-close {
  display: flex;
}

.meta-form {
  display: grid;
  gap: 6px;
}

.meta-set {
  justify-self: start;
}

/* The priority keeps the mockup's bars and word; the select laid over them is invisible, so the picker opens on them. */
.prio-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.prio-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.prio-select:focus-within .prio {
  border-radius: var(--r1);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.label-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

/* A label name runs to 50 characters, so a long one wraps inside the aside instead of leaving it. */
.label-item .chip {
  height: auto;
  min-width: 0;
  min-height: 19px;
  padding-block: 3px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.label-item form {
  display: contents;
}

/* A refused save shows the text someone else saved, set apart from the draft still in the editor below it. */
.edit-stored {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--s1);
}

.opi-head .opi-edit {
  color: var(--text-3);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.intent-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--text-3);
  font-size: 12.5px;
}

.opi-head .opi-edit:hover,
.intent-add:hover {
  color: var(--text);
}

.claim-card {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--s1);
}

.claim-card .meta-kv {
  margin-top: 10px;
}

.claim-who {
  display: flex;
  align-items: center;
  gap: 8px;
}

.claim-who span {
  color: var(--text-2);
  font-size: 12px;
}

/* The holder's names run long (a key name is up to 100 characters), so they wrap inside the aside at 360px. */
.claim-who > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.claim-fuse {
  margin-top: 10px;
}

/* Why the claim was taken, in the agent's words: up to 2000 characters, line breaks kept, wrapping inside the aside. */
.claim-direction {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.rel-list {
  display: grid;
  gap: 2px;
}

.rel-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 26px;
  font-size: 12.5px;
}

.rel-item > span {
  color: var(--text-3);
}

.rel-link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text);
}

.rel-link b {
  flex: none;
  white-space: nowrap;
  color: var(--text-3);
  font: 400 11.5px var(--font-mono);
}

.rel-link em {
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The Relationships heading's Add, a <details> so it works without script; its summary sits where the mockup's button does. */
.rel-sec {
  position: relative;
}

.rel-add > summary {
  position: absolute;
  top: 12px;
  right: 0;
  color: var(--text-3);
  font-size: 11.5px;
  line-height: 13px;
  list-style: none;
  cursor: pointer;
}

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

.rel-add > summary:hover {
  color: var(--text);
}

.rel-form {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.rel-form .input,
.rel-form .select {
  height: 30px;
}

.rel-form .select {
  background-position: calc(100% - 15px) 13px, calc(100% - 10px) 13px;
}

/* A refusal echoes what was typed, which can be one long unbroken token such as a pasted URL. */
.rel-error {
  margin: 0;
  color: var(--bad);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.rel-error b {
  font-weight: 500;
}

.rel-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.rel-row .rel-link {
  flex: 1;
}

.rel-remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
}

.rel-remove:hover {
  background: var(--s2);
  color: var(--text);
}

.pull-hint {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: var(--r2);
  background: var(--side);
  color: var(--text-2);
  font: 400 11.5px/1.5 var(--font-mono);
}

.pull-hint b {
  color: var(--accent);
  font-weight: 400;
}

/* Toggle switch: a real checkbox with a drawn track. */

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch-track {
  position: relative;
  width: 30px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  background: var(--s3);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background var(--t-fast);
}

.switch-track::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-2);
  transition: transform var(--t-med) var(--ease), background var(--t-fast);
}

.switch input:checked + .switch-track {
  background: var(--accent-fill);
  box-shadow: none;
}

.switch input:checked + .switch-track::after {
  background: var(--on-accent);
  transform: translateX(12px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Forms ---------- */

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

.field + .field {
  margin-top: 14px;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
}

.field-label .faint {
  font-weight: 400;
}

.field-help {
  color: var(--text-3);
  font-size: 12px;
}

.input,
.select,
.textarea {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--side);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.textarea {
  height: auto;
  min-height: 160px;
  padding: 10px 12px;
  line-height: 1.6;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-3);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.input.is-error {
  border-color: rgba(var(--bad-rgb), 0.7);
}

.input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(var(--bad-rgb), 0.16);
}

.select {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.check input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent-fill);
}

.radio-list {
  display: grid;
  gap: 6px;
}

.radio-opt {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.radio-opt:hover {
  border-color: var(--line-2);
}

.radio-opt:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.05);
}

.radio-opt input {
  margin: 2px 0 0;
  accent-color: var(--accent-fill);
}

.radio-opt b {
  display: block;
  font-weight: 500;
}

.radio-opt span {
  color: var(--text-2);
  font-size: 12.5px;
}

/* ---------- Conflict resolution ---------- */

.cf-wrap {
  max-width: 1240px;
  padding: 22px 32px 120px;
}

.cf-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.cf-intro p {
  max-width: 680px;
  margin-top: 8px;
  color: var(--text-2);
}

.cf-legend {
  display: flex;
  gap: 14px;
  color: var(--text-3);
  font-size: 12px;
  white-space: nowrap;
}

.cf-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cf-field {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--s1);
  overflow: hidden;
}

.cf-field.is-decided {
  border-color: var(--line);
}

.cf-field.is-open {
  border-color: rgba(var(--st-conf-rgb), 0.45);
}

.cf-field-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.cf-field-head h2 {
  font-size: 13.5px;
  font-weight: 600;
}

.cf-field-head .cf-verdict {
  margin-left: auto;
  color: var(--text-2);
  font-size: 12px;
}

.cf-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
}

.cf-col {
  min-width: 0;
  padding: 12px 16px 14px;
}

.cf-col + .cf-col {
  border-left: 1px solid var(--line);
}

.cf-col--base {
  background: var(--bg);
}

.cf-col-h {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--text-3);
  font-size: 11.5px;
  white-space: nowrap;
}

.cf-col-h b {
  color: var(--text-2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cf-col-h span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cf-val {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.6;
}

.cf-val--title {
  font: 500 15px/1.4 var(--font-doc);
}

.cf-col--base .cf-val {
  color: var(--text-2);
}

.cf-val p + p {
  margin-top: 8px;
}

.cf-val ins {
  border-radius: 2px;
  background: rgba(var(--accent-rgb), 0.16);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  text-decoration: none;
}

.cf-val del {
  border-radius: 2px;
  background: rgba(var(--bad-rgb), 0.12);
  color: var(--text-2);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--bad-rgb), 0.7);
}

.cf-choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.cf-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.cf-choice input {
  position: absolute;
  opacity: 0;
}

.cf-choice::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--line-2);
  border-radius: 50%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.cf-choice:hover {
  color: var(--text);
}

.cf-choice:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.07);
  color: var(--text);
}

.cf-choice:has(input:checked)::before {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2.5px var(--bg), inset 0 0 0 6px var(--accent);
}

.cf-choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.cf-note {
  margin-left: auto;
  color: var(--text-3);
  font-size: 12px;
}

.cf-merge {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
}

.cf-merge[hidden] {
  display: none;
}

.cf-merge .textarea {
  min-height: 120px;
  font-size: 13.5px;
}

.cf-merged {
  margin-top: 26px;
}

.cf-merged h2 {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}

.cf-merged-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cf-merged-item {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  font-size: 12.5px;
}

.cf-merged-item .ic {
  margin-top: 1px;
  color: var(--ok);
}

.cf-merged-item b {
  display: block;
  font-weight: 500;
}

.cf-merged-item span {
  color: var(--text-2);
}

.cf-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  margin-top: -56px;
  padding: 0 32px;
  border-top: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
}

.cf-steps {
  display: flex;
  gap: 5px;
}

.cf-step {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-2);
  transition: background var(--t-med);
}

.cf-step.is-done {
  background: var(--accent);
}

.cf-progress {
  color: var(--text-2);
}

.cf-progress b {
  color: var(--text);
  font-weight: 500;
}

/* ---------- Settings and admin ---------- */

.set-wrap {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 40px;
  max-width: 1160px;
  padding: 24px 32px 80px;
}

.set-nav {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: 1px;
}

.set-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r2);
  color: var(--text-2);
}

.set-nav a:hover {
  background: var(--s2);
  color: var(--text);
  text-decoration: none;
}

.set-nav a.is-active {
  background: var(--s3);
  color: var(--text);
}

/* A page of one section has no section nav, so the section takes the nav's column too. */
.set-wrap--single {
  grid-template-columns: minmax(0, 1fr);
}

.set-sec {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.set-sec:first-child {
  padding-top: 0;
}

.set-sec:last-child {
  border-bottom: 0;
}

/* Wide tables need the full width: the heading sits above instead of beside. */
.set-sec--stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.set-sec--stack .set-sec-h p {
  max-width: 640px;
}

.set-sec-h h2 {
  font-size: 14px;
  font-weight: 600;
}

.set-sec-h p {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.55;
}

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

.set-card {
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--s1);
}

.set-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 52px;
  padding: 10px 16px;
}

.set-row + .set-row {
  border-top: 1px solid var(--line);
}

.set-row b {
  display: block;
  font-weight: 500;
}

.set-row span.muted,
.set-row .set-row-help {
  display: block;
  color: var(--text-2);
  font-size: 12.5px;
}

.conn {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
}

.conn-ico {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r2);
  background: var(--s3);
  color: var(--text-2);
}

.conn-name {
  font-weight: 500;
}

.conn-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
  font-size: 12px;
}

.conn-ok::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.kv-grid > div {
  min-width: 0;
  padding: 10px 16px;
}

.kv-grid > div + div {
  border-left: 1px solid var(--line);
}

.kv-grid dt {
  color: var(--text-3);
  font-size: 11.5px;
}

.kv-grid dd {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
}

/* A table with a min-width scrolls inside its card when the card is narrower, so no column is crushed and nothing spills past the card.
   Each table sets its own floor in --tbl-min; a .tbl--stack table drops it on a phone and lays each row out as a card. */
.tbl-scroll {
  overflow-x: auto;
}

.tbl {
  width: 100%;
  min-width: var(--tbl-min, 0);
  border-collapse: collapse;
  table-layout: fixed;
}

.tbl th {
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
}

.tbl td {
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* The cell's own ellipsis cannot reach text inside a flex row, so the name truncates itself. */
.user-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.user-cell > * {
  flex: none;
}

.user-cell > .user-cell-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tbl tbody tr {
  transition: background var(--t-fast);
}

.tbl tbody tr:hover {
  background: var(--s2);
}

.tbl .t-right {
  text-align: right;
}

.code-cell {
  color: var(--text);
  font: 500 12.5px var(--font-mono);
  letter-spacing: 0.04em;
}

.code-cell.is-spent {
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-color: var(--line-2);
}

.inv-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.inv-st::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.inv-st--live { color: var(--ok); }
.inv-st--used { color: var(--text-2); }
.inv-st--expired { color: var(--st-conf); }
.inv-st--revoked { color: var(--bad); }

.role {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r1);
  background: var(--s3);
  color: var(--text-2);
  font-size: 11.5px;
  font-weight: 500;
}

.role--admin {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

.role--disabled {
  background: rgba(var(--bad-rgb), 0.12);
  color: var(--bad);
}

.keybox {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--r3);
  background: rgba(var(--accent-rgb), 0.05);
}

.keybox-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.keybox-head .ic {
  color: var(--accent);
}

.keybox-head span {
  margin-left: auto;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 400;
}

.secret {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0 6px 0 12px;
  height: 38px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--side);
}

.secret code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font: 500 13px var(--font-mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.endpoints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.endpoint {
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r2);
  background: var(--side);
  font-size: 12px;
}

.endpoint span {
  display: block;
  color: var(--text-3);
  font-size: 11px;
}

/* The whole address stays readable and wraps anywhere, like the Claude Code line: someone may type it, not copy it. */
.endpoint code {
  display: block;
  font: 400 12px var(--font-mono);
  overflow-wrap: anywhere;
}

/* Connect an agent: the endpoint rows, the Claude Code line and the OpenAPI link, a quiet card under any new-key box. A
   new key's box adds its own Claude Code line, with the key, under the key. */
.connect-card {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r3);
}

.connect-h {
  font-weight: 500;
}

.setup {
  margin-top: 8px;
}

.setup-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* The whole command stays readable and wraps anywhere rather than trailing off: someone may type it, not copy it. */
.endpoint .setup-line code {
  flex: 1;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.setup-line .btn {
  flex: none;
}

.connect-doc {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 12px;
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

/* The submit button matches the 34px fields beside it. */
.inline-form > .btn {
  height: 34px;
}

/* One field and its button, with no select between them. */
.inline-form--single {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* A table row's own small form: a select and the button that saves it, side by side at the row's 28px height. */
.row-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.row-form > .select {
  min-width: 0;
  height: 28px;
  background-position: calc(100% - 15px) 12px, calc(100% - 10px) 12px;
}

/* Project settings, General: the name, the read-only key (wide enough for a 10-character key), and Save. */
.project-general {
  display: grid;
  grid-template-columns: minmax(0, 320px) 132px auto;
  gap: 12px;
  align-items: end;
}

.project-general > .btn {
  height: 34px;
}

/* ---------- New issue ---------- */

.new-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 36px;
  max-width: 1160px;
  padding: 24px 32px 80px;
  align-items: start;
}

.title-input {
  width: 100%;
  padding: 4px 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  font: 500 24px/1.3 var(--font-doc);
  letter-spacing: -0.01em;
}

.title-input::placeholder {
  color: var(--text-3);
}

.title-input:focus {
  border-bottom-color: rgba(var(--accent-rgb), 0.6);
  outline: none;
}

.title-input.is-error {
  border-bottom-color: var(--bad);
}

.editor {
  margin-top: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--side);
  overflow: hidden;
}

.editor:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.editor-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  padding: 0 8px;
  border-bottom: 1px solid var(--line);
  background: var(--s1);
}

.editor-tab {
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r1);
  background: transparent;
  color: var(--text-2);
}

.editor-tab.is-on {
  background: var(--s3);
  color: var(--text);
}

.editor-tabs .faint {
  margin-left: auto;
  font-size: 12px;
}

.editor .textarea {
  min-height: 240px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 400 13px/1.65 var(--font-mono);
}

.editor-preview {
  min-height: 240px;
  padding: 14px 16px;
}

.editor-preview[hidden],
.editor .textarea[hidden] {
  display: none;
}

.opi-field {
  margin-top: 18px;
}

.opi-field .opi {
  padding: 12px 14px 14px 16px;
}

.opi-field textarea {
  display: block;
  width: 100%;
  min-height: 70px;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  font: italic 400 15px/1.55 var(--font-doc);
  resize: vertical;
}

.opi-field textarea::placeholder {
  color: var(--text-3);
}

.opi-field textarea:focus {
  outline: none;
}

.form-aside {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 24px;
}

.prio-seg .seg-btn {
  position: relative;
  padding: 0 8px;
  cursor: pointer;
}

.form-note {
  padding: 10px 12px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r2);
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.form-note .check {
  display: flex;
  margin-top: 8px;
}

/* The priority control is a radio group drawn as segmented buttons; the checked radio's label is the lit one. */
.prio-seg .seg-btn:has(input:checked) {
  background: var(--s3);
  color: var(--text);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), inset 0 0 0 1px var(--line-2);
}

.prio-seg .seg-btn:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- Auth (login, signup) ---------- */

.gate {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(460px, 0.85fr);
  min-height: 100vh;
}

.gate-art {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 36px 56px 0;
  border-right: 1px solid var(--line);
  background: var(--side);
}

.gate-art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, var(--dots) 1px, transparent 0) 0 0 / 18px 18px;
  -webkit-mask-image: radial-gradient(120% 90% at 30% 20%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 30% 20%, #000 30%, transparent 85%);
  pointer-events: none;
}

.gate-art > * {
  position: relative;
}

.gate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}

.gate-brand .brand-mark {
  width: 26px;
  height: 26px;
}

.gate-brand b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.gate-brand span {
  color: var(--text-3);
  font: 400 12px var(--font-mono);
}

.gate-statement {
  max-width: 560px;
  margin-top: clamp(48px, 9vh, 104px);
}

.gate-statement h1 {
  font: 400 38px/1.15 var(--font-doc);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.gate-statement h1 em {
  color: var(--accent);
  font-style: italic;
}

.gate-statement p {
  max-width: 500px;
  margin-top: 16px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}

.gate-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 600px;
  margin-top: 28px;
  border-top: 1px solid var(--line-2);
}

.gate-facts div {
  padding: 12px 16px 0 0;
}

.gate-facts div + div {
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.gate-facts b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
}

.gate-facts span {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.45;
}

/* The glimpse: a miniature, inert slice of the issue list and preview. */

.glimpse {
  position: relative;
  flex: 1;
  min-height: 300px;
  margin: 40px -56px 0 0;
}

.glimpse-frame {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 210px;
  height: 380px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-right: 0;
  border-radius: var(--r3) 0 0 0;
  background: var(--bg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  font-size: 11px;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 98%);
  mask-image: linear-gradient(#000 55%, transparent 98%);
}

.gl-side {
  padding: 10px 8px;
  border-right: 1px solid var(--line);
  background: var(--side);
}

.gl-side-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 6px;
  border-radius: 3px;
  color: var(--text-3);
}

.gl-side-row.is-on {
  background: var(--s3);
  color: var(--text);
}

.gl-side-row i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--s3);
}

.gl-side-row.is-on i {
  background: rgba(var(--accent-rgb), 0.5);
}

.gl-list {
  min-width: 0;
}

.gl-row {
  display: grid;
  grid-template-columns: 10px 36px minmax(0, 1fr) 30px;
  gap: 8px;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  white-space: nowrap;
}

.gl-row span:nth-child(2) {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
}

.gl-row span:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.gl-row span:nth-child(4) {
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 10px;
  text-align: right;
}

.gl-row.is-on {
  background: rgba(var(--accent-rgb), 0.08);
  box-shadow: inset 2px 0 0 var(--accent);
}

.gl-row .ic {
  width: 10px;
  height: 10px;
}

.gl-pv {
  padding: 12px;
  border-left: 1px solid var(--line);
  background: var(--s1);
}

.gl-pv h4 {
  font: 500 13px/1.3 var(--font-doc);
}

.gl-pv .opi {
  margin-top: 10px;
  padding: 8px 9px 8px 11px;
}

.gl-pv .opi-quote {
  margin-top: 5px;
  font-size: 11.5px;
}

.gl-pv .opi-head {
  font-size: 9px;
}

.gl-bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--s3);
}

.gl-term {
  position: absolute;
  right: 230px;
  top: 250px;
  width: 300px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--side);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  color: var(--text-2);
  font: 400 11px/1.6 var(--font-mono);
  pointer-events: none;
}

.gl-term b {
  color: var(--accent);
  font-weight: 400;
}

.gl-term span {
  color: var(--text-3);
}

.gate-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 48px clamp(40px, 5vw, 80px);
}

.gate-corner {
  position: absolute;
  top: 20px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gate-form {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.gate-form h2 {
  font: 500 24px/1.25 var(--font-doc);
  letter-spacing: -0.01em;
}

.gate-form .gate-lede {
  margin: 6px 0 24px;
  color: var(--text-2);
}

.gate-form .input {
  height: 38px;
  font-size: 13.5px;
}

.gate-form .btn--lg {
  width: 100%;
  margin-top: 20px;
}

.gate-alt {
  margin-top: 18px;
  color: var(--text-2);
  text-align: center;
}

.gate-aside {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}

.gate-aside .ic {
  margin-top: 1px;
}

.gate-aside code {
  color: var(--text-2);
  font: 400 11.5px var(--font-mono);
}

.gate-error,
.gate-ok {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--bad-rgb), 0.4);
  border-radius: var(--r2);
  background: rgba(var(--bad-rgb), 0.07);
  color: var(--text);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.gate-error .ic,
.gate-ok .ic {
  margin-top: 1px;
  color: var(--bad);
}

.gate-error[hidden] {
  display: none;
}

/* A saved change, said once where it was made (Settings.cshtml): the refusal's box in the success colour. */
.gate-ok {
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 7%, transparent);
}

.gate-ok .ic {
  color: var(--ok);
}

.pw-row {
  position: relative;
}

.pw-row .input {
  padding-right: 64px;
}

.pw-toggle {
  position: absolute;
  right: 4px;
  top: 4px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: var(--r1);
  background: transparent;
  color: var(--text-3);
  font-size: 12px;
}

.pw-toggle:hover {
  background: var(--s2);
  color: var(--text);
}

.pw-meter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.pw-meter i {
  height: 3px;
  border-radius: 2px;
  background: var(--s3);
  transition: background var(--t-med);
}

.pw-meter[data-level="1"] i:nth-child(-n + 1) { background: var(--bad); }
.pw-meter[data-level="2"] i:nth-child(-n + 2) { background: var(--st-conf); }
.pw-meter[data-level="3"] i { background: var(--ok); }

/* Invite code: the first, largest field on signup. */

.invite {
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r3);
  background: var(--s1);
  transition: border-color var(--t-med), background var(--t-med);
}

.invite.is-valid {
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
}

.invite.is-error {
  border-color: rgba(var(--bad-rgb), 0.55);
}

.invite-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
}

.invite-label .ic {
  color: var(--text-3);
}

.invite-label .faint {
  margin-left: auto;
  font-weight: 400;
}

.invite-input {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--side);
  font: 500 20px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.invite-input::placeholder {
  color: var(--line-2);
  letter-spacing: 0.14em;
}

.invite-input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.invite.is-valid .invite-input {
  border-color: color-mix(in srgb, var(--ok) 60%, transparent);
}

.invite.is-error .invite-input {
  border-color: rgba(var(--bad-rgb), 0.7);
}

.invite-status {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.invite-status .ic {
  margin-top: 1px;
}

.invite.is-valid .invite-status .ic {
  color: var(--ok);
}

.invite.is-error .invite-status .ic {
  color: var(--bad);
}

.invite-status b {
  color: var(--text);
  font-weight: 500;
}

.invite-status [data-msg] {
  min-width: 0;
}

.first-run {
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: var(--r3);
  background: rgba(var(--accent-rgb), 0.05);
}

.first-run-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.first-run-head .ic {
  color: var(--accent);
}

.first-run p {
  margin-top: 6px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.55;
}

.mock-states {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 9px;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 11px;
}

.mock-states button {
  height: 22px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 11.5px;
}

.mock-states button[aria-pressed="true"] {
  background: var(--s3);
  color: var(--text);
}

/* ---------- B2 landing ---------- */

.home-wrap {
  max-width: 1120px;
  padding: 36px 40px 80px;
}

.home-hero h1 {
  font: 400 32px/1.2 var(--font-doc);
  letter-spacing: -0.02em;
}

.home-hero p {
  max-width: 720px;
  margin-top: 12px;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.65;
}

.home-h {
  margin: 36px 0 12px;
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.screens {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.screen-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--s1);
  color: var(--text);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease), background var(--t-fast);
}

.screen-card:hover {
  border-color: var(--line-2);
  background: var(--s2);
  text-decoration: none;
  transform: translateY(-1px);
}

.screen-card .conn-ico {
  width: 32px;
  height: 32px;
}

.screen-card b {
  display: block;
  font-weight: 600;
}

.screen-card b span {
  margin-left: 6px;
  color: var(--text-3);
  font: 400 11.5px var(--font-mono);
}

.screen-card p {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
}

.sem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--s1);
}

/* ---------- Wishlist ---------- */

/* New project: what it holds takes the form's whole first row, its two choices side by side. */
.inline-form > .project-kind {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A wishlist's list (Projects/_WishList.cshtml): the wishes in one card under the toolbar. */
.wish-wrap {
  max-width: 1240px;
  padding: 16px 32px 64px;
}

.wish-tbl .wish-title a {
  color: var(--text);
}

.wish-tbl .wish-reason-cell {
  color: var(--text-2);
}

.wish-more {
  margin-top: 8px;
}

.wish-endpoint {
  overflow-wrap: anywhere;
}

/* A wish's status card (Issues/_WishStatus.cshtml), at the top of its page's aside. */
.wish-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* A reason is kept as written, line breaks and all, and a long word breaks rather than widening the aside. */
.wish-reason {
  margin: 8px 0 0;
  color: var(--text-2);
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wish-resolve {
  margin-top: 10px;
}

.wish-resolve .wish-reason-box {
  min-height: 72px;
}

.wish-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wish-report {
  margin-top: 12px;
}

.wish-report dd {
  overflow-wrap: anywhere;
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1360px) {
  .hide-narrow {
    display: none;
  }

  .doc-wrap,
  .cf-wrap,
  .set-wrap,
  .new-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .doc-grid {
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: 28px;
  }

  .set-sec:not(.set-sec--stack) {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
  }

  .search input {
    width: 180px;
  }

  .search input:focus {
    width: 210px;
  }

  .gate-art {
    padding-left: 44px;
    padding-right: 44px;
  }

  .gate-statement h1 {
    font-size: 34px;
  }

  .glimpse {
    margin-right: -44px;
  }
}

/* ---------- Responsive: tablet and phone ----------

   Every page works from 360px up. Three bands, and a new page follows them with the shell classes below rather than
   page-specific breakpoints:
   - Desktop, 1180px and up: the mockup layout. Nothing in this section applies.
   - Tablet, 768px to 1179px: the sidebar stays; the settings nav stacks above its sections; the sign-in art column
     narrows and drops its glimpse.
   - Phone, below 768px: the sidebar is an off-canvas drawer behind the .side-open menu button (wwwroot/js/drawer.js
     toggles .is-side-open on .app); forms stack; tables keep scrolling inside their card (.tbl-scroll); controls are
     at least 40px tall and fields use 16px text so iOS does not zoom; sign-in shows the form alone under the brand.
   The menu button and the scrim exist on every width but only show on a phone. */

.side-open,
.side-scrim {
  display: none;
}

@media (max-width: 1179px) {
  .set-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .set-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
  }

  .keybox-head {
    overflow-wrap: anywhere;
  }

  .gate {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.85fr);
  }

  .gate-art {
    padding: 32px;
  }

  /* The host name drops under the brand when the art column is too narrow for both. */
  .gate-brand {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .gate-statement h1 {
    font-size: 28px;
  }

  .gate-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .gate-facts div {
    padding: 10px 0;
  }

  .gate-facts div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .glimpse {
    display: none;
  }

  /* New issue and issue page: the side column drops into the flow, after what the page is about and before what follows
     it. The main column's own box gives way so its parts can be ordered around the side column: on the form the title
     and body come first and the fields sit above the Create buttons, so they are chosen before it is filed; on the issue
     the state, labels and claim sit between the body and a timeline that can run to dozens of entries. Their own margins
     space the parts, so the grid adds no gap of its own. */
  .new-wrap,
  .doc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .new-main,
  .doc-main {
    display: contents;
  }

  .form-aside,
  .doc-aside {
    position: static;
    order: 1;
    margin-top: 24px;
  }

  .new-main > .form-actions,
  .doc-main > #timeline {
    order: 2;
  }

  /* Issue list: no side panel and no keys; every row links to its issue's page. issues.js leaves the list closed here.
     The closed list's Filed by column and claim holder give their room to the title, so the columns are the open
     list's plus comments. */
  .split .pv,
  .list-keys,
  .split.is-pv-closed .list-head .lh-origin,
  .split.is-pv-closed .list-row > .lr-origin,
  .split.is-pv-closed .lr-claim-who {
    display: none;
  }

  .split.is-pv-closed .list-head,
  .split.is-pv-closed .list-row {
    grid-template-columns: 16px 112px minmax(0, 1fr) 24px 76px 30px 34px;
  }
}

/* Below 1440px the issue list's toolbar no longer fits on one line with a usable search box (the state counts, four
   filters, search and sort need about 1190px; at 1280 the box was squeezed to 68px): search takes the first line to
   itself at full width, the filters wrap below it onto as many lines as they need, and the state counts scroll sideways
   in their own strip. */
@media (max-width: 1439px) {
  .toolbar {
    flex-wrap: wrap;
    row-gap: 8px;
    height: auto;
    padding: 8px 20px;
  }

  .toolbar .search {
    flex: 1 1 100%;
    order: -1;
  }

  .toolbar .search input,
  .toolbar .search input:focus {
    width: 100%;
  }

  .toolbar .seg {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

/* Below 1440px the toolbar wraps (above), so a filter can land anywhere on its line and a popover hung from its chip's
   left edge could run past the right edge of the screen; at 1280 a long claimant's did. The toolbar holds the popovers
   instead: each still opens just under its own chip (with no top, it keeps the place it would have in the flow), but
   lines up with the toolbar's content edge, left for the filters and right for the sort menu, and is never wider than
   that content. An entry too long for it scrolls inside the popover. */
@media (max-width: 1439px) {
  .toolbar {
    position: relative;
  }

  .toolbar .menu {
    position: static;
  }

  .toolbar .menu-pop {
    top: auto;
    left: 20px;
    right: auto;
    max-width: calc(100% - 40px);
    margin-top: 6px;
  }

  .toolbar .menu-pop--right {
    left: auto;
    right: 20px;
  }
}

/* From 1440px the toolbar is one line, so a long set label or claimant would take its room from the search box. The
   free room goes out in order instead, by flex-grow weight: a set label or claimant chip grows from its icon up to its
   whole (capped) value first, then the search box from 180px up to its own width, then the spacer before it. A short
   value still shows whole, a long one is cut with an ellipsis, and the box keeps 180px however long the values are.
   Only when even the chips' icons do not fit does the box shrink, as it did before. */
@media (min-width: 1440px) {
  .toolbar .menu:has(> .filt.is-set > .filt-val) {
    flex: 10000 1 0;
    min-width: 40px;
    max-width: max-content;
  }

  .toolbar .menu:has(> .filt.is-set > .filt-val) > .filt {
    max-width: 100%;
  }

  .toolbar .search {
    flex: 100 1 180px;
    max-width: max-content;
  }
}

/* Between the phone layout and 1280px the title cell is narrow, so the not-promoted flag keeps only its icon and its
   words go to screen readers; the notice above the list says what the icon means. */
@media (min-width: 768px) and (max-width: 1279px) {
  .lr-flag--human .lr-flag-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  /* Shell: one column, with the sidebar as a drawer over it. dvh keeps the bottom of the page above a phone's
     browser toolbar; a browser without it keeps the 100vh above. */
  .app {
    grid-template-columns: minmax(0, 1fr);
    height: 100dvh;
  }

  .side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: min(280px, calc(100vw - 56px));
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
  }

  .app.is-side-open .side {
    visibility: visible;
    transform: none;
    box-shadow: var(--shadow-pop);
    transition: transform var(--t-med) var(--ease);
  }

  .app.is-side-open .side-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.55);
  }

  .side-scroll {
    overscroll-behavior: contain;
  }

  .main {
    position: relative;
  }

  /* The menu button sits in the left end of the page header and scrolls away with it. */
  .side-open {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--r2);
    background: transparent;
    color: var(--text-2);
  }

  .side-open:hover {
    background: var(--s2);
    color: var(--text);
  }

  .page-head {
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 0;
    height: auto;
    min-height: 52px;
    padding: 6px 16px;
  }

  .side-open + .page-head {
    padding-left: 56px;
  }

  /* The first header line is as tall as the menu button, so the title lines up with it. */
  .page-head > .crumbs {
    min-height: 40px;
  }

  .page-head > .muted {
    flex-basis: 100%;
    padding-bottom: 6px;
    font-size: 12px;
  }

  /* Touch targets: 40px or taller. */
  .side-search,
  .side-new {
    height: 40px;
  }

  .side-new {
    justify-content: center;
    min-width: 40px;
  }

  .side-search kbd {
    display: none;
  }

  .side-link,
  .side-sub .side-link {
    height: 40px;
  }

  .side-me {
    height: 52px;
  }

  .btn,
  .btn--sm {
    height: 40px;
  }

  .btn--lg {
    height: 44px;
  }

  .btn--icon,
  .btn--icon.btn--sm {
    width: 40px;
  }

  .set-nav a {
    height: 40px;
  }

  .input,
  .select,
  .textarea {
    font-size: 16px;
  }

  .input,
  .select {
    height: 40px;
  }

  .select {
    background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px;
  }

  .check {
    min-height: 40px;
  }

  /* Settings and admin: one column, forms stacked. */
  .set-wrap {
    gap: 12px;
    padding: 16px 16px 48px;
  }

  .set-sec,
  .set-sec:not(.set-sec--stack) {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .inline-form,
  .inline-form--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .inline-form > .btn {
    height: 40px;
  }

  .project-general {
    grid-template-columns: minmax(0, 1fr);
  }

  .project-general > .btn {
    height: 40px;
  }

  /* Touch-sized like every other select here; the row grows to fit. */
  .row-form > .select {
    height: 40px;
    background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px;
  }

  /* The issue aside's relation form, its Add and its remove buttons, touch-sized like the rest. */
  .rel-form .input,
  .rel-form .select {
    height: 40px;
  }

  .rel-form .select {
    background-position: calc(100% - 15px) 18px, calc(100% - 10px) 18px;
  }

  /* 12 + 13 + 15 is 40px tall, with the text where it sits on desktop; the left padding widens it to a thumb. */
  .rel-add > summary {
    top: 0;
    padding: 12px 0 15px 20px;
  }

  .rel-remove {
    width: 40px;
    height: 40px;
  }

  .keybox-head {
    flex-wrap: wrap;
  }

  .keybox-head span {
    flex-basis: 100%;
    margin-left: 0;
  }

  .secret {
    height: auto;
    min-height: 48px;
    padding: 4px 4px 4px 12px;
  }

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

  /* New issue: touch-sized controls, 16px fields, and the buttons wrap under each other when they must. */
  .new-wrap {
    padding: 16px 16px 48px;
  }

  .title-input {
    font-size: 20px;
  }

  .editor-tab {
    height: 34px;
  }

  .opi-field textarea {
    font-size: 16px;
  }

  .opi-head {
    flex-wrap: wrap;
  }

  .state-select select {
    height: 40px;
    font-size: 16px;
  }

  .state-select::after {
    top: 17px;
  }

  /* Issue edits: the priority, intent links and the top row's buttons are thumb-sized; the buttons wrap under the
     breadcrumb when it needs the room. */
  .prio-select,
  .intent-add,
  .opi-head .opi-edit {
    min-height: 40px;
  }

  .opi-head .opi-edit {
    display: inline-flex;
    align-items: center;
  }

  .prio-select select {
    font-size: 16px;
  }

  .doc-top {
    flex-wrap: wrap;
  }

  .prio-seg {
    display: flex;
  }

  .prio-seg .seg-btn {
    flex: 1;
    justify-content: center;
    height: 40px;
  }

  .form-actions {
    flex-wrap: wrap;
  }

  /* Issue page: the document has no page header, so its top row makes room for the menu button instead. */
  .doc-wrap {
    padding: 6px 16px 48px;
  }

  .side-open + .doc-wrap > .doc-top {
    min-height: 40px;
    padding-left: 40px;
  }

  .doc-title {
    font-size: 22px;
  }

  /* The timeline's control drops below its heading, and a long unbroken title in an entry wraps instead of overflowing. */
  .tl-bar {
    flex-wrap: wrap;
  }

  .tl-ev {
    overflow-wrap: anywhere;
  }

  /* Four segments are wider than a 360px column, so they wrap onto a second line rather than run off the page. */
  .tl-bar .seg {
    flex-wrap: wrap;
    max-width: 100%;
  }

  /* A session card spans the column, and a long key name, session id or title in it wraps instead of overflowing. */
  .sl {
    padding-left: 0;
  }

  .sl-head {
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  .sl-claim,
  .sl-write {
    overflow-wrap: anywhere;
  }

  /* A comment's byline, edited marker, time and Edit button wrap onto a second line rather than leave the card. */
  .tl-cmt-head {
    flex-wrap: wrap;
    height: auto;
    min-height: 36px;
    padding-block: 6px;
    overflow-wrap: anywhere;
  }

  /* Sign-in and signup: the art column shrinks to a brand strip above the form. */
  .gate {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .gate-art {
    padding: 0 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .gate-art > :not(.gate-brand) {
    display: none;
  }

  .gate-brand {
    min-height: 52px;
  }

  .gate-brand span {
    display: none;
  }

  .gate-side {
    justify-content: flex-start;
    padding: 28px 20px 40px;
  }

  .gate-form .input {
    height: 44px;
    font-size: 16px;
  }

  .pw-toggle {
    top: 2px;
    right: 2px;
    height: 40px;
  }

  .gate-alt a {
    display: inline-block;
    padding: 10px 0;
    line-height: 20px;
  }

  /* Issue list: the toolbar wraps from the tablet band down; here the sort menu follows the filters instead of keeping
     to the right edge. */
  .toolbar {
    padding: 8px 16px;
  }

  .toolbar .head-spacer {
    display: none;
  }

  /* The open popovers line up with the phone toolbar's narrower padding. */
  .toolbar .menu-pop {
    left: 16px;
    max-width: calc(100% - 32px);
  }

  .toolbar .menu-pop--right {
    left: auto;
    right: 16px;
  }

  .toolbar .seg-btn,
  .toolbar .filt,
  .menu-item {
    height: 40px;
  }

  /* A hidden sideways scroll cut the last state off with nothing to say it was there; on a phone they wrap instead. */
  .toolbar .seg {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* Members, keys, invites and users: each row is a card of label and value lines, so the row's buttons (Save, Remove,
     Revoke) are on screen instead of past the edge of a table scrolled inside its card. The first cell, the row's name,
     heads the card and the last, its actions, closes it; neither carries a label. */
  .tbl--stack {
    min-width: 0;
    table-layout: auto;
  }

  .tbl--stack colgroup,
  .tbl--stack thead {
    display: none;
  }

  .tbl--stack tbody,
  .tbl--stack tr {
    display: block;
  }

  .tbl--stack tr {
    padding: 8px 14px;
    border-bottom: 1px solid var(--line);
  }

  .tbl--stack tr:last-child {
    border-bottom: 0;
  }

  .tbl--stack td,
  .tbl--stack tr:last-child td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    min-height: 32px;
    padding: 2px 0;
    border-bottom: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tbl--stack td[data-label]::before {
    content: attr(data-label);
    flex: none;
    color: var(--text-3);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .tbl--stack td.t-right:last-child {
    justify-content: flex-end;
    gap: 8px;
  }

  .filt-parent input {
    font-size: 16px;
  }

  /* 16px keeps the phone's browser from zooming in on focus; a phone has no / key to hint at. */
  .toolbar .search input {
    height: 40px;
    padding-right: 40px;
    font-size: 16px;
  }

  .toolbar .search kbd {
    display: none;
  }

  /* The clear link fills the box's right end, a full finger's width; the input's padding keeps text out from under it. */
  .toolbar .search-clear {
    right: 0;
    width: 40px;
    height: 40px;
  }

  .notice {
    flex-wrap: wrap;
    row-gap: 6px;
    height: auto;
    padding: 8px 16px;
    white-space: normal;
  }

  .notice-text {
    overflow: visible;
  }

  /* A row is two lines: its state, number, priority, claim and age, then the whole title, wrapped, with its labels. */
  .list-head,
  .split.is-pv-closed .list-row > .lr-origin {
    display: none;
  }

  .list-row,
  .split.is-pv-closed .list-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    height: auto;
    padding: 10px 16px;
  }

  .lr-title {
    flex-wrap: wrap;
    flex-basis: 100%;
    order: 1;
    gap: 4px 8px;
  }

  .lr-text {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .lr-chips {
    flex-wrap: wrap;
    flex: 0 1 auto;
    max-width: none;
    overflow: visible;
  }

  .lr-when {
    margin-left: auto;
  }

  /* The title has a line of its own here, so the claim holder the tablet band hides comes back. */
  .split.is-pv-closed .lr-claim-who {
    display: inline;
  }

  .list-foot {
    flex-wrap: wrap;
    row-gap: 4px;
    height: auto;
    min-height: 32px;
    padding: 6px 16px;
  }

  .inline-form > .project-kind {
    grid-template-columns: minmax(0, 1fr);
  }

  .wish-wrap {
    padding: 12px 16px 48px;
  }

  /* A wish's card: the reason goes under its label at full width and wraps, where the desktop row clips it. */
  .tbl--stack.wish-tbl td.wish-reason-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* A wish with no reason has no Reason line on its card, rather than a label over nothing. */
  .tbl--stack.wish-tbl td.wish-reason-cell:empty {
    display: none;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .side,
  .app.is-side-open .side {
    transition: none;
  }
}

/* Without JavaScript the menu button cannot open the drawer, so a phone shows the sidebar under the page instead. */
@media (max-width: 767px) and (scripting: none) {
  .app {
    height: auto;
  }

  .side {
    position: static;
    order: 1;
    width: auto;
    visibility: visible;
    transform: none;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .side-open {
    display: none;
  }

  .side-open + .page-head {
    padding-left: 16px;
  }

  .side-open + .doc-wrap > .doc-top {
    padding-left: 0;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sk i {
    animation: none;
    background: var(--s3);
  }
}