/* The look of the UI (ADR-0031).

   The palette, type, spacing and the look of the top bar, cards, buttons,
   fields and tables are adapted from the console of pblumer/atlas
   (api/web/app.css, AGPL-3.0-only, the same license as this project; see
   THIRD_PARTY_NOTICES.md), so the two products look alike. atlas has a light
   theme only; the dark values in dark.css are this project's own, kept
   because the UI followed the system's dark mode before (ADR-0070). No font files: the system
   typeface keeps the page within its content-security policy (ADR-0014). */

:root {
  /* A calm, airy palette: a light grey page, white surfaces, soft
     borders and one accent (ADR-0065). */
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #e6e8ec;
  --border-strong: #d2d6dd;
  --text: #111827;
  --muted: #6b7280;
  --accent: #0b5cff;
  --accent-hover: #0a4ad1;
  --accent-soft: #edf2ff;
  --accent-ink: #ffffff; /* text on an accent fill */
  --danger: #c0392b;
  --danger-hover: #a5322a;
  --danger-soft: #fdecea;
  --success: #1a7f37;
  --success-soft: #e9f6ec;
  --warning: #9a6700;
  --warning-soft: #fff6e0;
  --row-hover: #f8f9fb;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --topbar-h: 56px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.05);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  color-scheme: light dark;
}


* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 14px/1.5 var(--font-sans);
  color: var(--text);
  background: var(--bg);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 600; }
h1 { font-size: 20px; margin: 0 0 12px; }
h2 { font-size: 15px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 0 0 8px; }
code, pre { font-family: var(--font-mono); font-size: 13px; }
code { word-break: break-all; }

.muted { color: var(--muted); }
.error { color: var(--danger); }
.notice {
  padding: 10px 12px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 6px 6px 0;
}

/* ---------- Top bar ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--topbar-h);
  display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; color: var(--text); }
.brand img { display: block; height: 25px; width: auto; } /* the logo (docs/brand), one line, as wide as the former two-line one */
.brand:hover { text-decoration: none; }
#nav { display: flex; align-items: center; gap: 2px 4px; flex-wrap: wrap; flex: 1; }
#nav > a, #nav > button.link {
  display: inline-flex; align-items: center; min-height: var(--topbar-h);
  padding: 0 10px; color: var(--muted); font-weight: 500;
  border-bottom: 2px solid transparent;
}
#nav > a:hover, #nav > button.link:hover { color: var(--text); text-decoration: none; }
#nav .search { margin: 0 8px; flex: 0 1 18rem; }
#nav .search input { width: 100%; padding: 5px 10px; }

/* ---------- Module switcher (as in the atlas console) ---------- */
.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin: 0 -6px 0 -8px; padding: 0;
  border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--bg); color: var(--text); border-color: transparent; }
.icon-btn.grid { color: var(--text); }
/* Home, back and forward, beside the nine dots. */
.history-nav { display: inline-flex; align-items: center; gap: 2px; }
.history-nav[hidden] { display: none; }
.history-nav .icon-btn { margin: 0; color: var(--text); }
.history-nav .icon-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
#scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: 30; }
#drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 31;
  background: var(--surface); border-right: 1px solid var(--border);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column;
}
.drawer-head {
  display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-head .icon-btn { margin: 0 0 0 -8px; }
#drawer-apps { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
#drawer-apps a { display: flex; align-items: center; padding: 10px 12px; border-radius: 6px; color: var(--text); font-weight: 500; }
#drawer-apps a:hover { background: var(--bg); text-decoration: none; }
#drawer-apps a.active { background: var(--accent-soft); color: var(--accent); }

/* ---------- Content ---------- */
/* The whole width of the window: a page tree, the text and the side column
   need it side by side. */
main { padding: 22px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px; margin: 0 0 18px;
}
.card:has(> table) { overflow-x: auto; }
.narrow { max-width: 24rem; margin: 3rem auto; }

/* ---------- Buttons ---------- */
button, .button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; margin: 2px 6px 2px 0;
  border: 1px solid var(--accent); border-radius: 6px;
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
button.danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
button.link {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--accent); font-weight: inherit;
}
button.link:hover { background: none; text-decoration: underline; }

/* ---------- Fields ---------- */
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.65; font-style: italic; }
select { cursor: pointer; }
textarea { width: 100%; resize: vertical; }
.field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.field > span { font-size: 12px; color: var(--muted); }
form.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input.title { font-size: 20px; font-weight: 600; flex: 1; min-width: 12rem; }

/* ---------- Tables ---------- */
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--border); }
thead th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--bg); padding: 8px 12px; }
tbody tr:hover { background: var(--row-hover); }
table.props th { width: 12rem; font-weight: 500; color: var(--muted); }
table.history td { font-size: 13px; }

.list { padding-left: 1.2rem; }

/* ---------- Rich-text editor (ADR-0032) ---------- */
.pm-wrap { border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); }
.pm-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pm-toolbar {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
  padding: 6px; border-bottom: 1px solid var(--border); background: var(--bg);
  border-radius: 6px 6px 0 0;
}
.pm-toolbar button {
  margin: 0; padding: 4px 10px; font-size: 12px; border-radius: 5px;
  background: var(--surface); color: var(--text); border-color: var(--border-strong);
}
.pm-toolbar button:hover { background: var(--bg); }
.pm-toolbar select, .pm-toolbar input { padding: 4px 8px; font-size: 12px; }
/* While a text is edited, its toolbar stays just below the top bar as the
   text scrolls, however long it is (ADR-0149). The top bar's height is
   measured, as it wraps to two rows on narrow screens. */
#body.editing .pm-wrap > .pm-toolbar { position: sticky; top: var(--top-offset, var(--topbar-h)); z-index: 15; }
/* The headings of a text differ at a glance: by size, weight and space
   above them, the first level also by a rule below it (ADR-0149). The
   levels 1 to 3 are h2 to h4, as h1 is the item's title. */
.pm-editor h2, .pm-editor h3, .pm-editor h4 { line-height: 1.3; letter-spacing: -0.01em; }
.pm-editor .ProseMirror > h2 { font-size: 1.75em; font-weight: 700; margin: 22px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.pm-editor .ProseMirror > h3 { font-size: 1.4em; font-weight: 650; margin: 18px 0 8px; }
.pm-editor .ProseMirror > h4 { font-size: 1.15em; font-weight: 600; margin: 14px 0 6px; color: var(--muted); }
.pm-editor .ProseMirror > :first-child { margin-top: 0; }
.pm-editor .ProseMirror { min-height: 6rem; padding: 12px 16px; outline: none; white-space: pre-wrap; word-wrap: break-word; font-variant-ligatures: none; counter-reset: ordered; }
.pm-editor .ProseMirror > * { margin: 6px 0; }
.pm-editor .ProseMirror > :not(.pm-ordered) { counter-reset: ordered; }
.pm-bullet { padding-left: 1.4rem; position: relative; }
.pm-bullet::before { content: "•"; position: absolute; left: 0.4rem; }
.pm-ordered { padding-left: 1.8rem; position: relative; counter-increment: ordered; }
.pm-ordered::before { content: counter(ordered) "."; position: absolute; left: 0.2rem; }
.pm-editor blockquote { border-left: 3px solid var(--border-strong); padding-left: 12px; color: var(--muted); }
.pm-editor pre { background: var(--bg); padding: 8px 12px; border-radius: 6px; overflow-x: auto; }
.pm-unsupported { border: 1px dashed var(--danger); border-radius: 6px; }
.pm-embed { padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: 6px; background: var(--bg); }
.pm-embed.ProseMirror-selectednode { outline: 2px solid var(--accent); }
/* An embedded item shown whole (ADR-0106): its heading, then its content,
   set off by a line, read-only. */
.pm-embed-title { font-weight: 600; }
.pm-embed-body { margin-top: 6px; padding-left: 12px; border-left: 3px solid var(--accent-soft); }
.pm-embed-body:empty { display: none; }
.pm-embed-meta, .pm-embed-note { margin: 0 0 4px; font-size: 13px; }
.pm-embed-props { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 0 0 6px; font-size: 13px; }
.pm-embed-props dt { color: var(--muted); }
.pm-embed-props dd { margin: 0; overflow-wrap: anywhere; }
.pm-embed-content .pm-wrap, .pm-embed-content .pm-editor, .pm-embed-content .pm-editor .ProseMirror { min-height: 0 !important; padding: 0; border: 0; background: none; box-shadow: none; }
.pm-embed { cursor: default; }
.pm-mention { background: var(--accent-soft); color: var(--accent); border-radius: 4px; padding: 0 3px; }
.ProseMirror-hideselection *::selection { background: transparent; }

.hit-words { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.hit-missing { opacity: 0.6; }
.search-page { display: flex; gap: 8px; max-width: 40rem; margin: 8px 0 12px; }
.search-page input { flex: 1; }
.search-to-query { margin: 0 0 12px; font-size: 13px; }

/* The query view (ADR-0136): the query is code, written in a field of its own. */
.query-form { max-width: 48rem; margin: 8px 0 12px; }
.query-text { font-family: var(--font-mono); font-size: 14px; }
.query-form .actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 0; }
.query-help { max-width: 48rem; margin: 0 0 12px; }
.query-help summary { cursor: pointer; }
.query-fields { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.query-field { font-family: var(--font-mono); font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: none; cursor: pointer; }
.query-examples button { font-family: var(--font-mono); font-size: 13px; text-align: left; }

.footer { padding: 8px 22px 22px; font-size: 11px; color: var(--muted); }
.footer:empty { display: none; }

/* ---------- Board (ADR-0036) ---------- */
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.board-column {
  flex: 0 0 260px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; min-height: 120px;
}
.board-column.drop { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.board-column h2 { display: flex; justify-content: space-between; margin-bottom: 10px; }
.board-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.card-item {
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; cursor: grab;
}
.card-title { margin: 2px 0 4px; overflow-wrap: anywhere; }
/* A kanban's board with the details of a card beside it, and its settings
   (ADR-0076). */
.kanban-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.kanban-layout:has(.kanban-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.kanban-detail {
  position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px;
}
.kanban-detail-head { display: flex; justify-content: space-between; align-items: center; }
.kanban-detail-head button { font-size: 20px; line-height: 1; }
.kanban-detail h2 { margin: 4px 0 8px; overflow-wrap: anywhere; }
.kanban-detail .props { width: 100%; }
.kanban-detail .props input, .kanban-detail .props select, .kanban-detail .props textarea { width: 100%; }
.kanban-detail-body { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; }
.card-item.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.card-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card-key { font-size: 11px; color: var(--muted); }
.board-column.own-column { border-style: dashed; }
.kanban-columns-edit { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.kanban-columns-edit li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kanban-columns-edit input { width: 14rem; }
/* The columns of a board of cards, a kanban's or a view's (ADR-0139),
   share the width and reach down to the longest, so every column is a
   drop zone of its own; its head holds what it is, how many cards it
   holds, a new card and folding it away (ADR-0132). */
.kanban-board .board { align-items: stretch; }
.kanban-board .board-column { flex: 1 1 250px; min-width: 220px; max-width: 400px; min-height: 320px; padding: 10px;
  display: flex; flex-direction: column; position: relative; }
.kanban-board .board-cards { flex: 1; }
.column-head { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; min-height: 28px; }
.column-head h2 { display: block; margin: 0; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.column-count { flex: none; min-width: 22px; padding: 0 7px; border-radius: 6px; background: var(--border); color: var(--muted);
  font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; }
.column-head button.link { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px;
  margin: 0; padding: 0; border-radius: 6px; color: var(--muted); }
.column-head button.link:hover { background: var(--row-hover); color: var(--text); text-decoration: none; }
.column-head button.link svg { width: 16px; height: 16px; }
.column-head .column-add svg { width: 18px; height: 18px; }
.column-head button.column-add, .column-head button.column-fold { margin-left: auto; }
.column-head button.column-add + button.column-fold { margin-left: 0; }
.column-fold svg { transition: transform .12s; }
.kanban-board .board-column.folded { flex: 0 0 44px; min-width: 44px; padding: 8px 4px; }
.board-column.folded .column-head { flex-direction: column; margin: 0; gap: 10px; }
.board-column.folded .column-head button.column-fold { order: -1; margin: 0; }
.board-column.folded .column-head h2 { writing-mode: vertical-rl; white-space: nowrap; overflow: visible; }
.board-column.folded .column-fold svg { transform: rotate(180deg); }
.board-column.folded .column-add, .board-column.folded .board-cards, .board-column.folded .card-new { display: none; }
.card-new { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.card-new input { width: 100%; }
.card-new button { align-self: flex-start; margin: 0; min-height: 30px; padding: 4px 12px; font-size: 13px; }

/* A kanban card (ADR-0132): the title first, the fields as chips, at the
   foot its key, what is behind it and the faces of its people. */
.kanban-board .card-item.kanban-card { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; }
.kanban-board .kanban-card .card-title { margin: 0; font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.card-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 0 7px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-2); color: var(--text); font-size: 12px; line-height: 20px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-chip svg { width: 12px; height: 12px; flex: none; }
.card-chip-name { color: var(--muted); }
/* Said by a screen reader, not shown: a chip's field name. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.card-chip.card-label { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.card-chip.late { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.card-chip.near { border-color: color-mix(in srgb, var(--warning) 30%, transparent); background: var(--warning-soft); color: var(--warning); font-weight: 600; }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 24px; font-size: 12px; color: var(--muted); }
/* Positioned, so the text only screen readers hear stays inside the
   board's scrolling instead of widening the page. */
.card-sign { position: relative; display: inline-flex; align-items: center; gap: 3px; }
.card-sign svg { width: 14px; height: 14px; }
.card-sign.complete { color: var(--success); }
.card-people { display: inline-flex; margin-left: auto; }
.card-person + .card-person { margin-left: -6px; }
.card-person .avatar { box-shadow: 0 0 0 2px var(--surface); }

/* Package B of the kanban (ADR-0134). Tones colour a card by a value of
   its own; mixed into the surface they suit light and dark alike. */
.tone-blue { --tone: #2f6fde; }
.tone-green { --tone: #1f9d55; }
.tone-yellow { --tone: #d4a106; }
.tone-orange { --tone: #e8710a; }
.tone-red { --tone: #d93636; }
.tone-purple { --tone: #8a4fd8; }
.tone-teal { --tone: #0f9b9b; }
.tone-gray { --tone: #7a8394; }
.kanban-board .card-item.kanban-card.toned { background: color-mix(in srgb, var(--tone) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--tone) 45%, var(--border)); }
.tone-swatch { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--tone, var(--muted)); }
.kanban-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; }
.kanban-legend .legend-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; margin: 0; padding: 2px 10px; font-weight: 500; font-size: 13px;
  border-color: color-mix(in srgb, var(--tone) 45%, var(--border)); background: color-mix(in srgb, var(--tone) 10%, var(--surface)); }
/* A column's count against its limit: full in the warning tone, over in
   the danger tone. */
.kanban-legend .legend-chip[aria-pressed=true] { box-shadow: 0 0 0 2px var(--tone); font-weight: 700; }
.column-count.full { background: var(--warning-soft); color: var(--warning); }
.column-count.over { background: var(--danger-soft); color: var(--danger); }
/* Finished cards by the day they were finished; the older ones wait until
   asked for, unless a filter looks for them. */
.card-day { list-style: none; margin: 6px 2px 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.card-day:first-child { margin-top: 0; }
.kanban-board .board:not(.filtering) .board-column:not(.expanded) .card-more, .kanban-board .board.filtering .card-show-all,
.kanban-board .board-column.expanded .card-show-all { display: none; }
.card-show-all { list-style: none; text-align: center; font-size: 13px; }
.kanban-columns-edit .column-limit { width: 6.5rem; }

/* Swimlanes (ADR-0137): one grid, the column heads once above the lanes,
   a cell per column in each lane. The template of the columns is set by
   the view, folded columns narrow. */
.kanban-board .board.board-lanes { display: grid; gap: 8px 14px; align-items: stretch; }
.board-lanes .lane-col-head { padding: 0 10px; min-width: 0; }
.board-lanes .lane-col-head .column-head { margin: 0; }
.board-lanes .lane-col-head.folded .column-head { flex-direction: column; gap: 10px; }
.board-lanes .lane-col-head.folded h2 { writing-mode: vertical-rl; white-space: nowrap; overflow: visible; }
.board-lanes .lane-col-head.folded .column-fold svg { transform: rotate(180deg); }
.board-lanes .lane-col-head.folded .column-fold { order: -1; margin: 0; }
.board-lanes .lane-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 8px;
  border-top: 1px solid var(--border); }
.board-lanes .lane-head h3 { margin: 0; font-size: 14px; }
.board-lanes .lane-head .lane-fold { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0;
  padding: 0; border-radius: 6px; color: var(--muted); }
.board-lanes .lane-head .lane-fold svg { width: 16px; height: 16px; transition: transform .12s; }
.board-lanes .lane-head.lane-folded .lane-fold svg { transform: rotate(-90deg); }
.kanban-board .board-lanes .board-column.lane-cell { min-width: 0; max-width: none; min-height: 90px; padding: 8px; }
.kanban-board .board-lanes .board-column.lane-cell.folded { padding: 8px 4px; }
.kanban-board .board-lanes .lane-cell.lane-folded { display: none; }
.lane-cell .cell-add { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0; padding: 0; border-radius: 6px; color: var(--muted); opacity: 0; }
.lane-cell .cell-add svg { width: 16px; height: 16px; }
.lane-cell:hover .cell-add, .lane-cell:focus-within .cell-add, .lane-cell .cell-add:focus { opacity: 1; }
@media (hover: none) { .lane-cell .cell-add { opacity: 1; } }
.lane-cell .board-cards { padding-top: 18px; }
.lane-cell.folded .cell-add { display: none; }
.card-chip.card-waiting svg { width: 12px; height: 12px; }
.kanban-tones { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.kanban-tone { display: flex; align-items: center; gap: 8px; }
.kanban-tone span:nth-child(2) { min-width: 8rem; }

/* The settings of a kanban, behind one button (ADR-0132). */
.kanban-settings-open { display: inline-flex; align-items: center; gap: 6px; }
.kanban-settings-open svg { width: 16px; height: 16px; }
dialog.kanban-settings { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; padding: 20px 22px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: inherit; box-shadow: var(--shadow-lg); }
dialog.kanban-settings::backdrop { background: rgba(20, 22, 26, .45); }
.kanban-settings-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kanban-settings-head h2 { margin: 0; }
.kanban-settings-head button { font-size: 22px; line-height: 1; }
.kanban-settings h3 { margin: 18px 0 6px; font-size: 14px; }
.kanban-settings .field input { width: 100%; }
.kanban-settings-remove { margin-top: 18px; padding-top: 4px; border-top: 1px solid var(--border); }

/* On a narrow screen the details of a card cover the board, rather than
   following it far below. */
@media (max-width: 900px) {
  .kanban-layout:has(.kanban-detail:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .kanban-detail:not([hidden]) { position: fixed; inset: 0; z-index: 40; max-height: none; border-radius: 0; }
}

/* ---------- Governance (ADR-0040) ---------- */
input.days { width: 6rem; padding: 4px 8px; }

/* ---------- Link check (ADR-0039) ---------- */
td.href { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; }

/* ---------- Comments (ADR-0035) ---------- */
.comments { list-style: none; padding: 0; margin: 0 0 12px; }
.comment { padding: 10px 0; border-bottom: 1px solid var(--border); }
.comment-text { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form textarea { display: block; }
/* Inline comments (ADR-0047): the passage in the body and its thread. */
.comment-anchor { background: color-mix(in srgb, #f5b400 28%, transparent); border-bottom: 2px solid #f5b400; cursor: pointer; }
.comment-anchor.comment-focus, .thread.comment-focus { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Personal notes (ADR-0107): marked apart from comments, by a dotted
   line in a calm blue, seen only by their maker. */
.note-anchor { border-bottom: 2px dotted #3b6fd8; background: color-mix(in srgb, #3b6fd8 10%, transparent); cursor: pointer; }
.note-anchor.note-focus, .note.note-focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.notes-list .note { border-top: 1px solid var(--border); padding-top: 8px; }
.notes-list .note:first-child { border-top: 0; padding-top: 0; }
.note-quote { margin: 0 0 4px; padding: 2px 10px; border-left: 3px solid #3b6fd8; color: var(--muted); overflow-wrap: anywhere; }
.note-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-private { font-size: 12px; margin: 0 0 8px; }
dialog.note-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; }
dialog.note-dialog::backdrop { background: rgba(20, 22, 26, .45); }
.note-form { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.note-form textarea { width: 100%; }
.note-form p { margin: 0; }
.threads { list-style: none; padding: 0; margin: 0 0 12px; }
.thread { border-bottom: 1px solid var(--border); padding: 4px 0 8px; }
.thread .comment { border-bottom: 0; }
.replies { margin-left: 24px; border-left: 2px solid var(--border); padding-left: 12px; }
.comment-quote { margin: 8px 0 0; padding: 2px 10px; border-left: 3px solid #f5b400; color: var(--muted); overflow-wrap: anywhere; }
.comment-quote .link { text-align: left; color: inherit; }
.thread-tools { margin: 0; }
.resolved-threads summary { cursor: pointer; color: var(--muted); margin: 8px 0; }

/* ---------- Search (ADR-0033) ---------- */
.hits li { margin-bottom: 12px; }
.hits .snippet { margin: 4px 0 0; color: var(--muted); white-space: pre-wrap; }

/* ---------- Live editing (ADR-0010) ---------- */
.pm-locked { background: color-mix(in srgb, var(--muted) 12%, transparent); border-radius: 4px; }
.pm-holder { font-size: 12px; color: var(--muted); user-select: none; margin-top: 8px; }
.live-presence, .live-status { margin: 4px 0; font-size: 13px; }

/* The page tree (ADR-0041): a sidebar beside a space's views on wide
   screens, a block that folds away above them on narrow ones. */
.with-tree { display: grid; grid-template-columns: clamp(220px, 16vw, 320px) minmax(0, 1fr); gap: 24px; align-items: start; }
.tree-box {
  position: sticky; top: 12px; max-height: calc(100vh - var(--topbar-h) - 24px); overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px;
}
.tree-box > summary { font-weight: 600; cursor: pointer; padding: 2px 4px 6px; }
ul.tree, ul.tree ul { list-style: none; margin: 0; padding: 0; }
ul.tree ul { padding-left: 14px; }
.tree-row { display: flex; align-items: center; gap: 2px; border-radius: 4px; }
.tree-row:hover { background: var(--row-hover); }
.tree-row a { flex: 1; min-width: 0; padding: 3px 4px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-row a.current { font-weight: 600; background: var(--accent-soft); border-radius: 4px; }
.tree-toggle {
  flex: none; justify-content: center; width: 20px; height: 20px; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  color: var(--muted); font-size: 12px; line-height: 20px; text-align: center; cursor: pointer;
}
span.tree-toggle { cursor: default; }
.tree-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.tree-row.drop-into { background: var(--accent-soft); }
@media (max-width: 800px) {
  .with-tree { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tree-box { position: static; max-height: none; }
}
.tree-toggle:hover { background: none; color: var(--text); }

/* Block kinds of ADR-0042. */
.pm-task { display: flex; align-items: baseline; gap: 6px; margin: 2px 0; }
.pm-task-box { flex: none; }
.pm-task-box input { margin: 0; }
.pm-task-text { flex: 1; min-width: 0; }
.pm-task[data-checked="true"] .pm-task-text { color: var(--muted); text-decoration: line-through; }
.pm-panel {
  --tone: var(--accent); --tone-soft: var(--accent-soft);
  margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--tone); border-radius: 4px; background: var(--tone-soft);
}
.pm-panel[data-tone="note"] { --tone: #8250df; --tone-soft: #f3eefc; }
.pm-panel[data-tone="warning"] { --tone: #bf8700; --tone-soft: #fff8e1; }
.pm-panel[data-tone="tip"] { --tone: #1a7f37; --tone-soft: #e9f6ec; }
.pm-panel[data-tone="error"] { --tone: var(--danger); --tone-soft: var(--danger-soft); }
/* Consecutive panels of one tone read as one box. */
.pm-panel[data-tone="info"] + .pm-panel[data-tone="info"],
.pm-panel[data-tone="note"] + .pm-panel[data-tone="note"],
.pm-panel[data-tone="warning"] + .pm-panel[data-tone="warning"],
.pm-panel[data-tone="tip"] + .pm-panel[data-tone="tip"],
.pm-panel[data-tone="error"] + .pm-panel[data-tone="error"] { margin-top: -8px; border-top-left-radius: 0; border-top-right-radius: 0; }
.pm-table { margin: 8px 0; overflow-x: auto; }
.pm-table table { border-collapse: collapse; min-width: 50%; }
.pm-table th, .pm-table td { border: 1px solid var(--border-strong); padding: 4px 8px; text-align: left; vertical-align: top; }
.pm-table th { background: var(--bg); font-weight: 600; }
.pm-table input { width: 100%; min-width: 6em; border: 0; padding: 2px; background: transparent; font: inherit; color: inherit; }
.pm-table-tools button.link { margin-right: 10px; font-size: 12px; }
.pm-toc, .pm-figures, .pm-tables, .pm-children { margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.pm-box-title { margin: 0 0 4px; font-weight: 600; }
.pm-toc ul, .pm-figures ul, .pm-tables ul, .pm-children ul { margin: 0; padding-left: 18px; }
.pm-toc button.link, .pm-figures button.link, .pm-tables button.link { padding: 0; margin: 0; font-weight: normal; }
.pm-toc-2 { margin-left: 14px; }
.pm-toc-3 { margin-left: 28px; }
.pm-table.ProseMirror-selectednode, .pm-toc.ProseMirror-selectednode, .pm-figures.ProseMirror-selectednode, .pm-tables.ProseMirror-selectednode, .pm-children.ProseMirror-selectednode { outline: 2px solid var(--accent); }

/* Comparing versions of a body (ADR-0043). */
.diff { font-family: var(--font-mono); font-size: 13px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.diff-row { padding: 2px 10px; white-space: pre-wrap; word-break: break-word; }
.diff-row::before { display: inline-block; width: 1.2em; color: var(--muted); }
.diff-same { color: var(--muted); }
.diff-same::before { content: " "; }
.diff-add { background: #e6f4ea; }
.diff-add::before { content: "+"; }
.diff-del { background: var(--danger-soft); text-decoration: line-through; }
.diff-del::before { content: "−"; }
.diff-change::before { content: "~"; }
.diff ins { background: #c7ebd1; text-decoration: none; }
.diff del { background: #f6c9c4; }

/* Labels (ADR-0044). */
.labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.label {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px; border-radius: 999px;
  background: var(--accent-soft); font-size: 12px; line-height: 20px;
}
.label a { color: var(--accent); }
.label-remove {
  margin: 0; padding: 0 2px; min-width: 0; border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer;
}
.label-remove:hover { background: none; color: var(--danger); }
.label-count { color: var(--muted); font-size: 12px; }
.label-add { display: inline-flex; margin: 0; }
.label-add input { padding: 2px 8px; font-size: 12px; border-radius: 999px; }
.label-add { align-items: center; gap: 4px; flex-wrap: wrap; }
.label-add .label-add-button { margin: 0; padding: 0 9px; min-height: 0; line-height: 22px; font-size: 14px; border-radius: 999px; }
.label-add .status:empty, .label-status:empty { display: none; }
.label-status, .label-add .status { flex-basis: 100%; }

/* Attachments and images (ADR-0045). */
ul.attachments { list-style: none; padding: 0; margin: 0 0 8px; }
li.attachment { padding: 4px 0; border-bottom: 1px solid var(--border); }
li.attachment button.link { margin-left: 8px; }
label.upload { display: inline-flex; align-items: center; gap: 8px; }
.pm-image { margin: 10px 0; text-align: center; }
.pm-image img { max-width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--border); }
.pm-image figcaption { margin-top: 4px; color: var(--muted); font-size: 13px; }
.pm-image figcaption input { width: 60%; text-align: center; border: 0; border-bottom: 1px dashed var(--border-strong); background: transparent; color: inherit; font: inherit; }
.pm-image.ProseMirror-selectednode img { outline: 2px solid var(--accent); }

/* BPMN diagrams (ADR-0129): drawn light in either scheme, as drawings
   are. The canvas pans and zooms; the bpmn.io watermark at its bottom
   right stays clear of everything here. */
.pm-diagram { margin: 12px 0; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); overflow: hidden; background: var(--surface); }
.pm-diagram.ProseMirror-selectednode { outline: 2px solid var(--accent); }
.pm-diagram-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pm-diagram-info { font-weight: 600; }
.pm-diagram-ops { color: var(--muted); }
.pm-diagram-ops.error { color: var(--danger); }
.pm-diagram-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pm-diagram-tools .check { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.pm-diagram-canvas { position: relative; height: 420px; background: #fff; color: #222; }
.pm-diagram-error { margin: 6px 10px; }
.pm-diagram-error:empty { display: none; }
.pm-diagram figcaption { padding: 6px 10px; color: var(--muted); font-size: 13px; text-align: center; border-top: 1px solid var(--border); }
.pm-diagram figcaption[hidden] { display: none; }
.pm-diagram figcaption input { width: 60%; text-align: center; border: 0; border-bottom: 1px dashed var(--border-strong); background: transparent; color: inherit; font: inherit; }
/* The counts of the operations view, read past to present: passed (grey),
   waiting (green), held by an incident (red), as atlas shows them. */
.pm-ops-badges { display: inline-flex; gap: 3px; align-items: center; pointer-events: none; }
.pm-ops-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font: 700 12px/20px system-ui, sans-serif; text-align: center; color: #fff; background: #2e7d32; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.pm-ops-passed { background: #6b7280; }
.pm-ops-incidents { background: #c62828; }
/* The description of a process (ADR-0143): its tasks and decisions below
   the diagram or in its place. A title shows its element in the diagram,
   which is then marked; an element clicked there flashes its entry. */
.pm-diagram-canvas[hidden] + .pm-diagram-error + .pm-diagram-doc { border-top: 0; }
.pm-diagram-doc { padding: 8px 14px 12px; border-top: 1px solid var(--border); font-size: 14px; }
.pm-doc-process { margin: 6px 0 2px; }
.pm-doc-text, .pm-doc-note { margin: 2px 0 0; white-space: pre-line; }
.pm-doc-note { color: var(--muted); font-style: italic; }
.pm-doc-steps { margin: 6px 0 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 8px; }
.pm-doc-step { padding: 2px 6px; border-radius: 4px; scroll-margin: 80px; }
.pm-doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.pm-doc-title { font-weight: 600; text-align: left; }
.pm-doc-kind { color: var(--muted); font-size: 13px; }
.pm-doc-ops .pm-ops-badges { vertical-align: middle; }
.pm-doc-paths { margin: 4px 0 0; padding-left: 1.2em; list-style: none; }
.pm-doc-paths li::before { content: "› "; color: var(--muted); }
@keyframes pm-doc-flash { from { background: var(--accent-soft); } to { background: transparent; } }
.pm-doc-flash { animation: pm-doc-flash 1.6s ease-out; }
.pm-doc-lit:not(.djs-connection) .djs-visual > :nth-child(1) { stroke: #1565c0 !important; stroke-width: 4px !important; }
dialog.bpmn-modeler .bpmn-modeler-canvas { flex: 1; position: relative; background: #fff; color: #222; }
/* Processes in a drawing (ADR-0142): the newest version of a process of
   an engine lies over its saved picture, inside the picture's border. The
   picture shows through until it is drawn. The region neither pans nor
   zooms: clicks reach the picture, except the bar's and the watermark's. */
.pm-live { position: absolute; inset: 1px; pointer-events: none; }
.pm-live-region { position: absolute; display: block; overflow: hidden; }
.pm-live-region.pm-live-drawn { background: #fff; color: #222; }
.pm-live-canvas { position: absolute; inset: 0; display: block; }
.pm-live-region:not(.pm-live-drawn) .pm-live-canvas { visibility: hidden; }
/* Over a drawing the watermark is drawn at the process's scale (ADR-0142),
   about the region's corner, so its distance from the corner shrinks with
   it. bpmn-js places it 15px from the corner; its code is unchanged. */
.pm-live-canvas .bjs-powered-by { pointer-events: auto; transform: scale(var(--pm-mark, 1)); transform-origin: calc(100% + 15px) calc(100% + 15px); }
/* The bar is small, as a region may be: the switch of the operations and,
   while pointed at or when the process cannot be shown, what it says. */
.pm-live-bar { position: absolute; left: 3px; top: 3px; right: 3px; display: flex; gap: 4px; align-items: center; font-size: 11px; line-height: 16px; text-align: left; }
.pm-live-ops, .pm-live-state { pointer-events: auto; }
/* Every measure is its own, so neither the UI's nor a theme's button style
   makes the switch larger than a small region allows. At rest it is a
   faint sign; pointed at or focused, it shows and names itself. On, the
   sign is green. */
.pm-live .pm-live-bar .pm-live-ops { display: inline-flex; align-items: center; gap: 3px; margin: 0; min-height: 0; height: 16px;
  padding: 0 3px; font: 600 10px/14px system-ui, sans-serif; border-radius: 999px; border: 1px solid rgb(0 0 0 / 12%);
  background: rgb(255 255 255 / 80%); color: #6b7280; text-decoration: none; box-shadow: none; cursor: pointer; opacity: .55; }
.pm-live .pm-live-bar .pm-live-ops[aria-pressed="true"] { color: #2e7d32; border-color: rgb(46 125 50 / 35%); opacity: .8; }
.pm-live .pm-live-bar .pm-live-ops svg { flex: none; }
.pm-live-ops-label { display: none; }
.pm-live .pm-live-bar .pm-live-ops:hover, .pm-live .pm-live-bar .pm-live-ops:focus-visible { opacity: 1; }
.pm-live-ops:hover .pm-live-ops-label, .pm-live-ops:focus-visible .pm-live-ops-label { display: inline; }
.pm-live-state { display: none; min-width: 0; padding: 0 6px; border-radius: 4px; background: rgb(255 255 255 / 92%); color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-live-region:hover .pm-live-state:not(:empty), .pm-live-region:focus-within .pm-live-state:not(:empty), .pm-live-failed .pm-live-state { display: block; }
.pm-live-state.error { color: #c62828; }
/* bpmn-js lays a model out here, out of sight, to draw its picture. */
.bpmn-snapshot { position: fixed; left: -10000px; top: 0; width: 1200px; height: 900px; }
dialog.drawing.bpmn-pick { width: min(640px, calc(100vw - 32px)); height: auto; max-height: calc(100vh - 32px); }
dialog.drawing.bpmn-pick .drawing-bar button { margin-left: auto; }
dialog.drawing.bpmn-settings .drawing-bar button + button { margin-left: 0; }
.pm-diagram-view-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); }
.bpmn-pick-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.bpmn-processes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bpmn-processes button { text-align: left; }
/* Forms and decisions of engines (ADR-0144), drawn light in either scheme
   as diagrams are. A form takes the height it needs; a decision's table or
   expression too, scrolling sideways, and its requirements graph the
   height of a diagram. */
.pm-form-canvas { background: #fff; color: #222; padding: 4px 8px; }
/* The fields of a form below it or alone, and a start form's button with
   what it says (ADR-0148). */
.pm-form-canvas[hidden] + .pm-form-doc { border-top: 0; }
.pm-form-fields .pm-form-group { margin-top: 4px; }
.pm-start-after { padding: 8px 14px 12px; border-top: 1px solid var(--border); }
.pm-start-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.pm-start-actions p { margin: 0; }
.pm-start-send[hidden] { display: none; }
.pm-start-hint { flex-basis: 100%; font-size: 13px; }
.pm-start-done { margin: 8px 0; font-weight: 600; }
.pm-start-canvas > a, .pm-start-canvas > button { margin-right: 12px; }
.pm-start-paste { display: flex; gap: 6px; }
.pm-start-paste input { flex: 1; min-width: 0; }
.pm-prefill-rows { display: flex; flex-direction: column; gap: 8px; }
.pm-prefill-actions { display: flex; justify-content: flex-end; }
.pm-dmn-canvas { position: relative; background: #fff; color: #222; overflow-x: auto; min-height: 80px; }
.pm-dmn-canvas.pm-dmn-graph { height: 420px; overflow: hidden; }
.pm-dmn-views { max-width: 260px; }
/* The head names the model, so dmn-js's own box of its name and ID, which
   would lie over the graph, is left out. */
.pm-dmn-canvas .dmn-definitions { display: none; }
/* dmn-js places its watermark, and the notice the watermark opens, with
   style attributes, which the content security policy drops. These rules
   put both where dmn-js would; below a table or an expression there is
   room for the watermark, so that it covers none of it. */
.pm-dmn-canvas .bjs-powered-by { position: absolute; bottom: 15px; right: 15px; z-index: 100; }
.pm-dmn-canvas .bjs-powered-by svg { vertical-align: middle; }
.pm-dmn-canvas .dmn-decision-table-container, .pm-dmn-canvas .dmn-literal-expression-container, .pm-dmn-canvas .dmn-boxed-expression-container { padding-bottom: 48px; }
.bjs-powered-by-lightbox { z-index: 1001; position: fixed; inset: 0; }
.bjs-powered-by-lightbox .backdrop { width: 100%; height: 100%; background: rgb(40 40 40 / 20%); }
.bjs-powered-by-lightbox .notice { position: absolute; left: 50%; top: 40%; transform: translate(-50%); width: 260px; padding: 10px; display: flex; line-height: 1.3;
  background: #fff; color: #222; box-shadow: 0 1px 4px rgb(0 0 0 / 30%); font: 14px Helvetica, Arial, sans-serif; }
.bjs-powered-by-lightbox .notice > a:first-child { margin: 15px 20px 15px 10px; align-self: center; }
/* Architecture sketches of releases (ADR-0146), drawn light in either
   scheme as diagrams are and scaled to the text column; a click opens the
   picture on its own in a new tab. */
.pm-arch-canvas { background: #fff; color: #222; }
.pm-arch-open { display: block; cursor: zoom-in; }
.pm-arch-img { display: block; width: 100%; height: auto; }
.arch-layers { margin: 0; padding: 6px 10px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm, 6px); }
.arch-layers legend { padding: 0 4px; font-size: 12px; color: var(--muted); }
.arch-layer-list { display: flex; flex-wrap: wrap; gap: 0 16px; }
.arch-layer-list label.check { margin: 4px 0; }
@media (max-width: 640px) {
  .pm-diagram-canvas, .pm-dmn-canvas.pm-dmn-graph { height: 300px; }
}

/* Watching and notifications (ADR-0046). */
#nav > a.unread { color: var(--accent); font-weight: 600; }
/* The notification bell and its count. */
#nav > a.bell { position: relative; display: inline-flex; align-items: center; padding: 6px 8px; }
#nav > a.bell .count { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
ul.notifications { list-style: none; padding: 0; margin: 0 0 10px; }
ul.notifications li { padding: 6px 0; border-bottom: 1px solid var(--border); }
ul.notifications li.unread { font-weight: 600; }
ul.notifications li.unread::before { content: "● "; color: var(--accent); }
button.secondary { background: var(--surface); color: var(--accent); }
button.secondary:hover { background: var(--accent-soft); color: var(--accent); }

/* Creating and finding actions (discoverability): a view's heading with
   its main actions, role badges, the tree's "new page" link. */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.page-head h1, .page-head form { margin: 0; }
.page-head .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
a.button { display: inline-block; }
.badge { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.8em; }
.card.empty { text-align: left; }
.notice-card { border-left: 4px solid var(--accent); }
label.check { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
#nav-new { white-space: nowrap; }
details.card > summary { cursor: pointer; font-weight: 600; }
/* Copyable settings (the MCP page). */
.copyable { display: flex; gap: 8px; align-items: flex-start; }
.copyable .snippet { flex: 1; margin: 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.85em; white-space: pre-wrap; overflow-wrap: anywhere; }
.tools li { margin: 4px 0; }
/* Administration: a table of contents, members of groups. */
.admin-toc { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; }
.member { display: inline-flex; align-items: center; gap: 2px; margin-right: 10px; }
.card h3 { margin: 16px 0 8px; }
/* The task inbox (ADR-0049). */
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 8px 0 12px; }
.tabs .tab { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; }
.tabs .tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tabs select { margin-left: auto; }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.task-actions { white-space: nowrap; }
.task-labels { display: flex; flex-wrap: wrap; gap: 4px; }
.task-labels .chip { font-size: 12px; }
a.kanban-chip { text-decoration: none; border: 1px solid var(--accent); }
/* The task list with its label filter at the right (ADR-0049). */
.tasks-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.tasks-layout:has(.tasks-filter) { grid-template-columns: minmax(0, 1fr) 220px; }
.tasks-layout #tasks { overflow-x: auto; }
.tasks-filter { position: sticky; top: 12px; }
.tasks-filter h2 { margin-top: 0; }
.tasks-label-list { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; }
.tasks-label-list label.check { margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .tasks-layout:has(.tasks-filter) { grid-template-columns: minmax(0, 1fr); }
  .tasks-filter { position: static; }
}
/* Protecting an item for people and groups (ADR-0078). */
.access-edit summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.access-modes label.check { margin: 4px 0; }
.access-entries { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.access-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.access-entry label.check { margin: 0; font-size: 12px; }
.actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
#relations form.inline input { width: auto; }
/* On a phone the navigation takes its own row below the logo, the search
   a full line of it. */
@media (max-width: 640px) {
  #nav { flex-basis: 100%; padding-bottom: 6px; }
  #nav .search { flex: 1 1 100%; margin: 0 0 4px; }
  #nav > a, #nav > button.link { min-height: 40px; }
}
/* The account menu and profile pictures (ADR-0050). */
.account { position: relative; }
/* The language and the light or dark look (ADR-0095). */
.look-toggles { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
#nav > .search ~ .look-toggles { margin-left: 0; }
.lang-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lang-toggle button { min-height: 28px; padding: 0 8px; border: none; border-radius: 0; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.lang-toggle button + button { border-left: 1px solid var(--border); }
.lang-toggle button:hover { background: var(--bg); color: var(--text); }
.lang-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.theme-toggle { margin: 0; color: var(--text); }
.account-button { display: inline-flex; align-items: center; padding: 2px; border-radius: 50%; background: none; border: 2px solid transparent; }
.account-button:hover, .account-button[aria-expanded="true"] { background: none; border-color: var(--accent); }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-32 { width: 32px; height: 32px; font-size: 13px; }
.avatar-40 { width: 40px; height: 40px; font-size: 15px; }
.avatar-64 { width: 64px; height: 64px; font-size: 24px; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 230px; padding: 6px 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; }
.menu [role=menuitem] { display: block; width: 100%; padding: 8px 14px; text-align: left; color: var(--text); background: none; border: 0; border-radius: 0; font: inherit; }
.menu [role=menuitem]:hover, .menu [role=menuitem]:focus { background: var(--accent-soft); color: var(--accent); text-decoration: none; outline: none; }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.avatar-row { display: flex; gap: 16px; align-items: center; }
/* The bell and the account sit at the right end of the header, so the
   account menu opens inward on every width. */
#nav > #nav-notifications { margin-left: auto; }
.menu { max-width: calc(100vw - 32px); }
/* Initials where there is no picture, drawn from an attribute so they are
   no part of the name's text; faces beside comments and history. */
.avatar[data-initials]::before { content: attr(data-initials); }
.avatar-20 { width: 20px; height: 20px; font-size: 9px; }
.avatar-24 { width: 24px; height: 24px; font-size: 10px; }
.comment-head, .who { display: inline-flex; align-items: center; gap: 6px; }
/* Watching an item or a space: a black bell, filled while one watches,
   outlined while one does not (ADR-0046). */
button.watch-bell { display: inline-flex; align-items: center; justify-content: center; padding: 6px; min-width: 36px; min-height: 36px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); }
button.watch-bell:hover { background: var(--row-hover); color: var(--text); border-color: var(--border-strong); }
button.watch-bell svg { width: 20px; height: 20px; }
/* An item: its text, read or edited in place, and a column of what
   belongs to it (ADR-0051). */
.item-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 440px); gap: 20px; align-items: start; }
.item-main { min-width: 0; }
.item-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.side-card > h2, .item-side > section > h2 { font-size: 15px; margin: 0 0 8px; }
.item-side > section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 0; }
.item-side table { width: 100%; font-size: 13px; }
.item-side table.history td { padding: 4px 6px; overflow-wrap: anywhere; }
.item-side .props th { width: 35%; }
.item-side .props input, .item-side .props select { max-width: 100%; }
#body.reading .pm-editor .ProseMirror { min-height: 0; }
/* While editing, the text is an empty sheet in the proportions of A4
   (1 : 1.414), however little it holds (ADR-0095). */
#body.editing .pm-editor { container-type: inline-size; }
#body.editing .pm-editor .ProseMirror { min-height: calc(100cqi * 1.414); }
#body.editing { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.item-title { display: inline-flex; align-items: center; gap: 8px; }
.item-title .lock { color: #a15c00; }
/* The access bar: an open lock on calm green while everyone in the space may
   read; a closed lock on amber when access is narrowed. */
#access.access-open { border-color: #b7dfc3; background: #f1faf3; }
#access.access-open .access-bar { color: #1d6b34; }
#access.access-restricted { border-color: #f0bf73; background: #fff5e6; }
#access.access-restricted .access-bar { color: #8a4b00; }
.access-bar { display: flex; align-items: center; gap: 8px; }
@media (max-width: 1100px) {
  .item-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Fields in the side column (ADR-0102): the name above, the value and its button
   beside each other, so nothing reaches past the card. */
.item-side .props, .item-side .props tbody { display: block; }
.item-side .props tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.item-side .props th { grid-column: 1 / -1; width: auto; padding: 0; font-weight: 500; color: var(--muted); }
.item-side .props td { padding: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.item-side .props td input, .item-side .props td select { width: 100%; }
.item-side .props td:last-child button:not(.link) { padding: 6px 10px; font-size: 13px; }
.item-side .upload { display: flex; flex-direction: column; gap: 4px; }
.item-side .upload input { max-width: 100%; }
.item-side form.inline { flex-wrap: wrap; }
/* The corporate design's settings (ADR-0052). */
.brand-logo { display: block; height: 28px; width: auto; max-width: 220px; object-fit: contain; }
.design-assets { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 8px 0 16px; }
.design-asset { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); }
.design-preview { max-width: 100%; max-height: 80px; object-fit: contain; align-self: flex-start; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.design-preview-dark { background: repeating-conic-gradient(#1d2430 0 25%, #10151d 0 50%) 0 0 / 12px 12px; } /* the logo for dark mode, on dark */
.design-colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; }
.design-colour input[type=color] { width: 44px; height: 32px; padding: 0; border: 1px solid var(--border); }
textarea.code { font-family: var(--font-mono); font-size: 13px; }

/* The drawing editor (ADR-0053): a dialog almost as large as the window,
   with the drawing page in a frame. */
dialog.drawing { width: calc(100vw - 32px); height: calc(100vh - 32px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--border); border-radius: 8px; display: flex; flex-direction: column; background: var(--surface); color: inherit; }
dialog.drawing:not([open]) { display: none; }
dialog.drawing::backdrop { background: rgba(20, 22, 26, .45); }
.drawing-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.drawing-bar .error { margin-left: auto; }
.drawing-bar .error:empty + button { margin-left: auto; }
.drawing-frame { flex: 1; width: 100%; border: 0; }
.pm-redraw { font-size: 13px; }

/* The album (ADR-0054): a grid of pictures with their items. */
.album-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.album-filters input[type=search] { flex: 1 1 240px; }
.album-grid { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.album-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.album-card figure { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.album-card img { width: 100%; height: 140px; object-fit: contain; background: #fff; border-radius: 4px; }
.album-card figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.album-name { font-weight: 600; overflow-wrap: anywhere; }
.album-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Folders, tools and picture labels (ADR-0090). */
/* A file's versions as a stack (ADR-0103): the newest in front, up to two
   older ones offset behind it, half hidden. The front fans them out into
   a row of their own below the stack. */
.album-stack-top { position: relative; display: block; width: 100%; height: 164px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.album-stack-top img { position: absolute; top: 0; left: 0; width: calc(100% - 24px); height: 140px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 4px; transition: transform .18s ease; }
.album-stack-top .album-behind-1 { transform: translate(12px, 12px); }
.album-stack-top .album-behind-2 { transform: translate(24px, 24px); }
.album-stack-top .album-behind { opacity: .85; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
@media (prefers-reduced-motion: reduce) { .album-stack-top img { transition: none; } }
.album-stack-top .album-front { box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.album-stack-top:hover .album-behind-1, .album-stack-top:focus-visible .album-behind-1 { transform: translate(16px, 12px) rotate(2deg); }
.album-stack-top:hover .album-behind-2, .album-stack-top:focus-visible .album-behind-2 { transform: translate(30px, 22px) rotate(4deg); }
.album-stack-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.album-stack-count { position: absolute; top: 6px; right: 30px; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 600; text-align: center; }
.album-stack.fanned { border-color: var(--accent); }
.album-fan { grid-column: 1 / -1; background: var(--accent-soft); border-radius: 8px; padding: 4px 12px; }
.album-fan > .album-grid { margin: 8px 0; }
.album-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.album-when { font-size: 12px; }
/* Cleaning up a picture's older versions (ADR-0104): the limits, then
   every version with what becomes of it. */
.album-stack > .album-retention { align-self: flex-start; font-size: 13px; padding: 4px 10px; }
.album-card > .album-copy { align-self: flex-start; font-size: 13px; padding: 4px 10px; }
.album-own-rule { background: #fff5e6 !important; color: #8a4b00 !important; }
dialog.retention-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; }
dialog.retention-dialog::backdrop { background: rgba(20, 22, 26, .45); }
dialog.retention-dialog .drawing-bar button { margin-left: auto; }
.retention-body { padding: 12px 16px 16px; overflow: auto; max-height: calc(100vh - 130px); display: flex; flex-direction: column; gap: 10px; }
.retention-body > p { margin: 0; }
.retention-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; }
.retention-fields input { max-width: 10rem; }
.retention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.retention-version { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.retention-version img { width: 64px; height: 44px; object-fit: contain; background: #fff; border-radius: 4px; }
.retention-version.remove { border-color: #f0b4b4; background: #fff4f4; }
.retention-version.remove img { opacity: .55; }
.retention-version.remove .retention-state { background: #fde2e2; color: #a12020; }
.retention-version.used .retention-state { background: #fff5e6; color: #8a4b00; }
#album-retention .retention-fields { margin-bottom: 8px; }
.album-trail { margin: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.album-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.album-new-folder { display: flex; gap: 8px; flex: 1 1 100%; }
.album-folders { list-style: none; margin: 8px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.album-folder { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-align: left; overflow-wrap: anywhere; }
.album-folder-icon { flex: none; position: relative; width: 26px; height: 18px; margin-top: 4px; background: var(--accent); border-radius: 2px 3px 3px 3px; opacity: .8; }
.album-folder-icon::before { content: ""; position: absolute; top: -4px; left: 0; width: 11px; height: 5px; background: inherit; border-radius: 2px 2px 0 0; }
.album-labels { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.album-labels-input { flex: 1 1 100%; font-size: 13px; }
.album-label { cursor: pointer; }
.album-used { font-size: 12px; margin: 0; }
.album-card .chip { align-self: flex-start; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
dialog.album-dialog { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; }
dialog.album-dialog::backdrop { background: rgba(20, 22, 26, .45); }
.album-dialog-body { padding: 12px; overflow: auto; max-height: calc(100vh - 130px); }
.album-dialog .drawing-bar button { margin-left: auto; }

/* Contrast warnings of the corporate design (ADR-0052). */
.notice.warning { background: var(--danger-soft); border-color: var(--danger); }
#design-contrast ul { margin: 6px 0; padding-left: 0; list-style: none; }
#design-contrast li { margin: 4px 0; }
.design-pair { display: inline-block; min-width: 2.4em; padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px; font-weight: 600; text-align: center; }
.att-origin .chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); }
.pm-take-over { font-size: 13px; }

/* Image sizes (ADR-0056): the frame takes the width, the corner handle
   resizes while editing. */
.pm-image-frame { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.pm-image-frame img, .pm-image-frame video { display: block; margin: 0 auto; }
/* A video plays in the text (ADR-0097). */
.pm-image video { max-width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--border); background: #000; }
.pm-resize { display: none; position: absolute; right: -6px; bottom: -6px; width: 14px; height: 14px; border-radius: 3px; background: var(--accent); border: 2px solid var(--surface); cursor: nwse-resize; touch-action: none; }
.pm-image.pm-sizable:hover .pm-resize, .pm-image.pm-sizable.ProseMirror-selectednode .pm-resize { display: block; }
.pm-image-size { font-size: 13px; padding: 2px 4px; }

/* Column filters of the task list. */
#tasks tr.filters td { padding: 4px 6px; background: var(--row-hover); }
#tasks tr.filters input, #tasks tr.filters select { width: 100%; min-width: 6em; font-size: 13px; padding: 3px 6px; box-sizing: border-box; }
.tasks-foot { display: flex; gap: 12px; align-items: baseline; }

/* An "i" that explains a column or heading. The selectors outweigh the
   general button style, whose fill and padding would hide the letter. */
.info-tip { position: relative; display: inline-block; vertical-align: middle; margin-left: 2px; }
.info-tip button.info-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-width: 0; padding: 0; margin: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--muted); font: italic 700 12px/1 Georgia, "Times New Roman", serif; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; }
.info-tip button.info-btn:hover, .info-tip button.info-btn[aria-expanded=true] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.info-pop { position: absolute; z-index: 30; top: 24px; left: -8px; width: min(380px, calc(100vw - 48px)); padding: 10px 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); font-size: 13px; font-weight: 400; font-style: normal; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0; }
.info-pop p { margin: 0 0 6px; }
.info-pop p:last-child { margin-bottom: 0; }
.info-pop ul { margin: 0 0 6px; padding-left: 18px; }
.info-pop li { margin: 2px 0; }
th:last-child .info-pop, th:nth-last-child(2) .info-pop { left: auto; right: -8px; }

/* Open governance findings (ADR-0057): an amber dot on the bell, and the
   list on the notifications page. */
#nav > a.bell.findings::after { content: ""; position: absolute; bottom: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #e8a317; border: 2px solid var(--surface); }
#my-findings .chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #fff4e5; color: #8a5300; }
#my-findings h2 a { font-size: 13px; font-weight: 400; margin-left: 8px; }
.notifications li.governance { border-left: 3px solid #e8a317; padding-left: 8px; }

/* Data protection review (ADR-0058). */
section.hold { margin: 8px 0 12px; }
section.hold ul { margin: 6px 0; padding-left: 18px; }
section.hold .chip, #governance .chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #fff4e5; color: #8a5300; }
.hold-release { display: flex; flex-direction: column; gap: 6px; max-width: 640px; margin-top: 8px; }
.hold-release button { align-self: flex-start; }
.regulation { border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 10px 0; background: var(--surface); }
.regulation h3 { margin: 0 0 6px; }
.regulation-form { display: flex; flex-direction: column; gap: 6px; }
#governance tr.held td { background: #fff8ec; }

/* The fuller editor (ADR-0059): grouped toolbar, pressed states,
   alignment, divider, highlight and floated pictures. */
.pm-toolbar .pm-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--border); }
.pm-toolbar .pm-group:last-of-type { border-right: 0; }
.pm-toolbar button[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.pm-toolbar button:disabled { opacity: .4; }
.pm-toolbar mark { padding: 0 2px; }
.pm-ico { display: inline-flex; flex-direction: column; gap: 2px; width: 14px; vertical-align: middle; }
.pm-ico i { display: block; height: 2px; background: currentColor; border-radius: 1px; }
.pm-ico i:nth-child(odd) { width: 100%; }
.pm-ico i:nth-child(even) { width: 64%; }
.pm-ico-center { align-items: center; }
.pm-ico-right { align-items: flex-end; }
.pm-ico-justify i:nth-child(even) { width: 100%; }
.pm-align-center { text-align: center; }
.pm-align-right { text-align: right; }
.pm-align-justify { text-align: justify; hyphens: auto; }
.pm-editor hr.pm-divider { border: 0; border-top: 1px solid var(--border-strong); margin: 14px 0; }
.pm-editor hr.pm-divider.ProseMirror-selectednode { border-top-color: var(--accent); }
.pm-editor mark { background: #fff1a8; color: inherit; padding: 0 1px; border-radius: 2px; }
.pm-editor .ProseMirror::after { content: ""; display: block; clear: both; }
.pm-image.pm-image-left { float: left; margin: 4px 18px 8px 0; text-align: left; }
.pm-image.pm-image-right { float: right; margin: 4px 0 8px 18px; text-align: right; }
.pm-image.pm-image-left figcaption, .pm-image.pm-image-right figcaption { text-align: inherit; }
.pm-image-align { font-size: 13px; padding: 2px 4px; }
@media (max-width: 640px) { .pm-image.pm-image-left, .pm-image.pm-image-right { float: none; width: auto !important; margin: 10px 0; } }

/* The start page: a welcome, quick access and the spaces as tiles. */
.welcome { display: flex; align-items: center; gap: 24px; padding: 28px 32px; margin-bottom: 18px; border-radius: 14px;
  background: linear-gradient(120deg, var(--surface) 0%, var(--accent-soft) 100%); border: 1px solid var(--border); }
.welcome-text { flex: 1; min-width: 0; }
.welcome h1 { margin: 0 0 8px; font-size: 28px; }
.welcome-lead { margin: 0 0 16px; font-size: 15px; color: var(--muted); max-width: 62ch; }
.welcome-art { flex: none; width: min(360px, 34vw); height: auto; }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 22px; }
.my-notes li { display: flex; flex-direction: column; gap: 4px; }
.my-notes li > p { margin: 0; }
.my-note-quote { margin: 0; padding: 2px 0 2px 10px; border-left: 3px solid #3b6fd8; color: var(--muted); font-style: italic; }
.my-note-text { white-space: pre-wrap; }
.home-tile, .space-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.home-tile:hover, .space-tile:hover { border-color: var(--accent); text-decoration: none; }
/* The symbol and colour of a tile's module on the start page's station. */
.module-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--module); margin-bottom: 6px; flex: none; align-self: flex-start; box-shadow: 0 2px 6px color-mix(in srgb, var(--module) 35%, transparent); }
.module-icon .module-ink { fill: var(--module-ink, var(--module)); }
.module-icon .module-stroke { stroke: var(--module-ink, var(--module)); }
.module-tasks { --module: #14b8a6; }
.module-conversations { --module: #0b5cff; }
.module-pictures { --module: #f59e0b; }
.module-protection { --module: #7c5cff; }
.module-starmap { --module: #0ea5e9; }
.module-page { --module: linear-gradient(135deg, #0b5cff, #7c5cff); --module-ink: #3f5cf0; background: linear-gradient(135deg, #0b5cff, #7c5cff); box-shadow: 0 2px 6px rgba(63, 92, 240, .35); }
.home-tile .chip { align-self: flex-start; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #fff4e5; color: #8a5300; }
.space-tiles { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.space-key { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.space-tile .badge { align-self: flex-start; }
.first-steps ol { margin: 6px 0 0; padding-left: 20px; }
@media (max-width: 720px) { .welcome { flex-direction: column-reverse; padding: 20px; } .welcome-art { width: 70%; } }
.welcome .button:not(.primary) { background: var(--surface); color: var(--accent); }
.welcome .button:not(.primary):hover { background: var(--accent-soft); }

/* Kanbans (ADR-0060). */
.kanban-tools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 6px 0 12px; }
.kanban-tools .inline-form { display: flex; gap: 6px; align-items: center; }
.kanban-tools .inline-form input { min-width: 16rem; }
#new-kanban .form-row { display: flex; flex-wrap: wrap; gap: 10px; }
#new-kanban .form-row .field { flex: 1 1 200px; }
/* The kanbans page (ADR-0110): boards by label on the left, the kanbans
   in the middle, a new kanban on the right; on narrow screens the
   kanbans come first. */
.kanbans-layout { display: grid; grid-template-columns: clamp(200px, 15vw, 260px) minmax(0, 1fr) clamp(260px, 20vw, 340px);
  grid-template-areas: "labels main new"; gap: 20px; align-items: start; }
.kanbans-labels { grid-area: labels; position: sticky; top: 12px; }
.kanbans-main { grid-area: main; min-width: 0; }
.kanbans-main > p.muted:first-child { margin-top: 0; }
.kanbans-new { grid-area: new; }
.kanbans-new #new-kanban { margin: 0; }
.kanbans-new #new-kanban h2 { margin-top: 0; font-size: 15px; }
.kanbans-new #new-kanban .form-row { flex-direction: column; }
.kanbans-new #new-kanban .form-row .field { flex: none; }
/* A select is as wide as its longest option; a room with a long name
   must not push the fields past the narrow column. */
.kanbans-new, .kanbans-new #new-kanban .field, .kanbans-new #new-kanban .field > :is(input, select) { min-width: 0; max-width: 100%; }
.kanbans-layout:not(:has(.kanbans-labels)) { grid-template-columns: minmax(0, 1fr) clamp(260px, 20vw, 340px); grid-template-areas: "main new"; }
.kanbans-layout:not(:has(.kanbans-new)) { grid-template-columns: clamp(200px, 15vw, 260px) minmax(0, 1fr); grid-template-areas: "labels main"; }
.kanbans-layout:not(:has(.kanbans-labels)):not(:has(.kanbans-new)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
.kanbans-labels ul.label-boards { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 8px 0 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.kanbans-labels ul.label-boards li { padding: 4px 6px; border-radius: var(--radius-sm); }
.kanbans-labels ul.label-boards li:hover { background: var(--row-hover); }
.kanbans-labels .filter-bar { flex-wrap: wrap; }
.kanbans-labels .filter-text { width: 100%; }
@media (max-width: 1100px) {
  .kanbans-layout, .kanbans-layout:not(:has(.kanbans-labels)), .kanbans-layout:not(:has(.kanbans-new)) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "new" "labels"; }
  .kanbans-labels { position: static; }
}

/* Account requests (ADR-0061): a dot on the account button while requests
   wait for an administrator, and the way to ask on the sign-in page. */
.account-button.pending { position: relative; }
.account-button.pending::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
#login-card .login-more { margin-top: 16px; font-size: 14px; }
#account-requests td { vertical-align: top; }
#account-requests td:last-child { white-space: nowrap; }
/* An info note may hold an example of several lines. */
.info-pop p { white-space: pre-line; }

/* Spaces on the start page (ADR-0062): tiles or a list, each with the
   space's icon or, without one, its key. */
.segmented { display: inline-flex; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.segmented .segment { border: 0; border-radius: 0; background: var(--surface); color: var(--text); padding: 4px 12px; font-size: 13px; }
.segmented .segment[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink, #fff); }
.space-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* Every tile is the same size, with or without an icon: the head keeps
   the icon's height, and every row of tiles is as tall as the tallest. */
.space-tiles { grid-auto-rows: 1fr; }
.space-tiles > li { display: flex; }
.space-tiles .space-tile { flex: 1; }
.space-tiles .space-tile-head { min-height: 48px; }
.space-tiles .space-tile .badge { margin-top: auto; }
/* A star marks a space as one's favourite (ADR-0145): in a tile's lower
   right corner, beside the role, and in the first column of the list. */
.space-tiles > li { position: relative; }
.favourite-star { border: 0; background: transparent; padding: 2px 6px; min-height: 0; font-size: 20px; line-height: 1;
  color: var(--muted); cursor: pointer; border-radius: 6px; }
.favourite-star:hover, .favourite-star[aria-pressed="true"] { color: var(--accent); }
.favourite-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.space-tiles .favourite-star { position: absolute; right: 10px; bottom: 10px; }
.space-list .favourite-col { width: 2.5em; text-align: center; }
.space-icon { flex: none; border-radius: 8px; object-fit: contain; background: var(--surface); }
.space-icon-24 { width: 24px; height: 24px; border-radius: 5px; }
.space-icon-48 { width: 48px; height: 48px; }
.space-icon-64 { width: 64px; height: 64px; }
.space-icon-key { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); background: var(--bg); border: 1px solid var(--border); }
.space-icon-24.space-icon-key { font-size: 9px; }
.space-icon-48.space-icon-key { font-size: 14px; }
.space-icon-64.space-icon-key { font-size: 18px; }
.space-list { width: 100%; margin-bottom: 22px; }
.space-list .space-link { display: inline-flex; align-items: center; gap: 8px; }

/* The calendar button of a date field sits left, before the date. Only
   Chromium-based browsers let a page move it; elsewhere it stays where
   the browser puts it. */
input[type="date"] { position: relative; padding-left: 34px; }
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 10px; margin: 0; cursor: pointer; }

/* The comment overview (ADR-0063). */
.comment-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comment-entry { display: flex; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.comment-entry.resolved { opacity: .75; }
.comment-entry-main { flex: 1; min-width: 0; }
.comment-entry-head { font-size: 14px; }
.comment-entry .comment-text { margin: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-quote { margin: 6px 0; padding: 2px 10px; border-left: 3px solid var(--border-strong); color: var(--muted, #6b7280); font-size: 13px; }
.comment-entry-why { display: flex; flex-wrap: wrap; gap: 6px; }
.comment-entry-why .chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
.comment-entry-why .why-mentions { border-color: var(--accent); color: var(--accent); }

/* Message delivery (ADR-0064): the outcome per channel. */
.delivery-results { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; }
.delivery-results li.ok strong { color: #1a7f37; }
.delivery-results li.failed strong { color: #b42318; }
.copyable { display: block; margin-top: 6px; padding: 6px 8px; overflow-wrap: anywhere; user-select: all; background: var(--bg); border-radius: 6px; }

/* ==========================================================================
   The uniform system (ADR-0065). Every view has the same frame: a crumb
   line, a heading with its lead and its actions on the right, then cards.
   Buttons have three weights: primary (the one main action, filled),
   secondary (outlined, the default) and link. Everything else follows the
   tokens above. Later rules here win over the older ones above.
   ========================================================================== */

body { font-size: 14.5px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1 { font-size: 26px; line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 6px; }
h2 { font-size: 16px; line-height: 1.35; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
/* The layout starts at the left edge, not in the middle (ADR-0099). */
main { padding: 28px clamp(16px, 3vw, 40px) 40px; max-width: 1680px; margin: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- The frame of a view ---------- */
.crumbs, main p:has(> a[href="#/"]:first-child) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  margin: 0 0 10px; font-size: 13px; color: var(--muted);
}
.crumbs a, main p:has(> a[href="#/"]:first-child) a { color: var(--muted); }
.crumbs a:hover, main p:has(> a[href="#/"]:first-child) a:hover { color: var(--accent); }
/* A heading directly in a view, and the paragraph after it as its lead. */
#app > h1 { margin-bottom: 6px; }
#app > h1 + p.muted, #app > h1 + p, .page-lead { margin: 0 0 22px; max-width: 72ch; color: var(--muted); font-size: 15px; }
#app > h1:last-of-type:not(:has(+ p)) { margin-bottom: 20px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 20px; }
.page-head + p.muted { margin-top: -12px; margin-bottom: 22px; }
.page-head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.page-head .actions button, .page-head .actions .button { margin: 0; }

/* ---------- Surfaces ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--space-5); margin: 0 0 var(--space-4);
}
.card > h2:first-child, .card > summary + h2, .card > header > h2 { margin-top: 0; }
.card h3:first-child { margin-top: 0; }
details.card > summary { list-style: none; display: flex; align-items: center; gap: 8px; font-size: 15px; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.card[open] > summary::before { transform: rotate(90deg); }
details.card[open] > summary { margin-bottom: 14px; }
.side-card, .item-side > section { border-radius: var(--radius); padding: var(--space-4) 18px; box-shadow: var(--shadow); }
.notice { border-radius: var(--radius-sm); border-left-width: 3px; padding: 12px 14px; }
.notice-card { border-left: 4px solid var(--accent); }
/* The sign-in card and other single cards stand in the middle of the
   window (ADR-0099): their view holds nothing else, so the column gives
   up its maximum width for them. */
.narrow { max-width: 26rem; margin: 8vh auto; }
main:has(> .narrow) { max-width: none; }
.narrow.card { padding: 32px; box-shadow: var(--shadow-lg); }

/* ---------- Buttons ---------- */
button, .button {
  min-height: 36px; padding: 7px 14px; margin: 2px 6px 2px 0;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; line-height: 1.2;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.04);
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s;
}
button:hover, .button:hover { background: var(--row-hover); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
button.primary, .button.primary, button[type=submit]:not(.link):not(.secondary):not(.danger) {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
button.primary:hover, .button.primary:hover, button[type=submit]:not(.link):not(.secondary):not(.danger):hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink);
}
button.secondary, .button.secondary { background: var(--surface); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-strong)); }
button.secondary:hover, .button.secondary:hover { background: var(--accent-soft); color: var(--accent); }
button.danger, .button.danger { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--border-strong)); }
button.danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
button.link, button.link:hover { min-height: 0; box-shadow: none; font-weight: 500; }
button:disabled, button:disabled:hover { opacity: .55; cursor: not-allowed; }

/* ---------- Fields ---------- */
input, select, textarea {
  min-height: 38px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
input[type=checkbox], input[type=radio] { min-height: 0; width: 16px; height: 16px; accent-color: var(--accent); }
input[type=color] { padding: 2px; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border-strong)); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus); }
input::placeholder, textarea::placeholder { font-style: normal; opacity: .7; }
.field { gap: 6px; margin: 0 0 14px; }
.field > span { font-size: 13px; font-weight: 500; color: var(--text); }
form > button[type=submit] { margin-top: 4px; }
input.title { min-height: 44px; font-size: 24px; font-weight: 650; letter-spacing: -0.01em; border-color: transparent; background: transparent; padding: 4px 8px; margin-left: -8px; }
input.title:hover { border-color: var(--border); background: var(--surface); }
input.title:focus { background: var(--surface); }

/* ---------- Tables ---------- */
table { border-collapse: separate; border-spacing: 0; }
th, td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
thead th, table:not(.props) > tr:first-child > th {
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-2); padding: 10px 14px;
}
tbody tr, table > tr { transition: background-color .1s; }
tbody tr:hover, table > tr:hover { background: var(--row-hover); }
tr:last-child > td { border-bottom: 0; }
/* A table standing in a view, not in a card, gets the card's frame. */
main table:not(.card table, .side-card table, .item-side table, .pm-editor table, .props, .board table, .menu table) {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
#tasks { overflow-x: auto; }

/* ---------- Tabs: one line under the heading ---------- */
.tabs { gap: 2px; margin: 0 0 20px; padding: 0; border-bottom: 1px solid var(--border); }
.tabs .tab {
  margin-bottom: -1px; padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--muted); font-weight: 500; background: none;
}
.tabs .tab:hover { color: var(--text); text-decoration: none; }
.tabs .tab.active { background: none; color: var(--accent); border-color: var(--accent); font-weight: 600; }

/* ---------- Chips and badges ---------- */
.badge, .chip, .label { border-radius: 999px; font-size: 12px; line-height: 20px; padding: 0 9px; font-weight: 500; }
.badge { background: var(--accent-soft); color: var(--accent); }

/* ---------- Top bar ---------- */
.top { min-height: var(--topbar-h); padding: 0 clamp(12px, 2vw, 24px); gap: 6px 14px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); }
#nav .search { flex: 0 1 26rem; }
#nav .search input { min-height: 36px; padding: 6px 14px 6px 36px; border-radius: 999px; background: var(--bg) no-repeat 12px center / 16px 16px;
  background-image: url("icons/search.svg");
  border-color: transparent; }
#nav .search input:focus { background-color: var(--surface); border-color: var(--accent); }
#nav-new { min-height: 36px; border-radius: 999px; padding: 6px 16px; }
.icon-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); }

/* ---------- The module drawer, with an icon per module ---------- */
#drawer { width: 280px; box-shadow: var(--shadow-lg); border-right: 0; }
.drawer-head { height: var(--topbar-h); }
#drawer-apps { padding: 12px; gap: 2px; }
#drawer-apps a { gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); }
#drawer-apps a svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
#drawer-apps a.active svg { color: var(--accent); }

/* ---------- Tiles ---------- */
.home-tile, .space-tile { border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); transition: border-color .12s, box-shadow .12s, transform .12s; }
.home-tile:hover, .space-tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.welcome { border-radius: 16px; }

/* ---------- Administration: contents on the left ---------- */
.admin-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.admin-layout .admin-toc {
  position: sticky; top: calc(var(--topbar-h) + 16px); display: flex; flex-direction: column; gap: 2px; margin: 0;
  padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.admin-layout .admin-toc button.link { display: block; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); text-align: left; color: var(--text); }
.admin-layout .admin-toc button.link:hover { background: var(--row-hover); text-decoration: none; }
.admin-layout .admin-toc button.link.current { background: var(--accent-soft); color: var(--accent); }
.admin-layout section.card { scroll-margin-top: calc(var(--topbar-h) + 16px); }
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
  .admin-layout .admin-toc { position: static; flex-direction: row; flex-wrap: wrap; }
  .admin-layout .admin-toc button.link { width: auto; }
}

/* ---------- Item properties save as they change ---------- */
.item-side .props td .saved { color: var(--success); font-size: 13px; }
.item-side .props td .saving { color: var(--muted); font-size: 13px; }

/* ---------- Lists ---------- */
ul.notifications li, .comment, li.attachment, .thread { padding: 10px 0; }
.comment-entry, .home-tile, .space-tile, .board-column, .tree-box { border-color: var(--border); }
.board-column { border-radius: var(--radius); background: var(--surface-2); }
.card-item { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 10px 12px; }
.tree-box { border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.tree-row a { padding: 5px 6px; border-radius: 6px; }
.tree-row a.current { color: var(--accent); }
.footer { text-align: left; padding: 8px clamp(16px, 3vw, 40px) 28px; }

/* ---------- Details ---------- */
.pm-toolbar button { min-height: 30px; padding: 4px 9px; box-shadow: none; border-radius: 6px; font-weight: 600; }
.pm-toolbar select, .pm-toolbar input { min-height: 30px; }
.pm-wrap { border-radius: var(--radius); }
.pm-toolbar { border-radius: var(--radius) var(--radius) 0 0; padding: 8px; gap: 6px; }
input[type=file] { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 13px; color: var(--muted); }
input[type=file]::file-selector-button {
  margin-right: 10px; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--row-hover); }
/* Forms in cards keep a readable width; code fields and tables use it all. */
.card .field:not(:has(textarea.code)) { max-width: 640px; }
.card form.inline .field { max-width: none; }
.item-side .props th { font-size: 12px; font-weight: 500; color: var(--muted); }
.item-side .props td .error { font-size: 13px; }
button.info-btn { min-height: 0; box-shadow: none; margin: 0 0 0 4px; }
.tree-toggle, .label-remove, button.segment { min-height: 0; box-shadow: none; }
.admin-sections { min-width: 0; }
.admin-sections .card { overflow-x: auto; }

/* The sign-in page (ADR-0030, ADR-0061, ADR-0064): single sign-on first,
   then username and password, then the two ways of help. */
#login-card h1 { margin-bottom: 4px; }
.login-lead { margin: 0 0 20px; }
.login-sso { display: flex; justify-content: center; width: 100%; margin: 0; min-height: 42px; }
.login-sso svg { width: 18px; height: 18px; }
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; color: var(--muted); font-size: 13px; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
#login .field input { width: 100%; }
.login-submit { width: 100%; justify-content: center; min-height: 42px; margin: 6px 0 0; }
.login-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; }
/* The administration's overview of the sign-in page. */
.setup-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.setup-list li { display: grid; grid-template-columns: 10px minmax(0, 14rem) minmax(0, 1fr); align-items: baseline; gap: 4px 10px; }
.setup-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); align-self: center; }
.setup-list li.on .setup-dot { background: var(--success); }
.setup-list li.off .setup-dot { background: var(--warning); }
.info-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent); font: italic 700 0.8em/1 Georgia, serif; flex: none; }
.info-button { background: none; border: 0; padding: 0 2px; cursor: pointer; line-height: 1; vertical-align: -0.15em; font-size: inherit; }
.info-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 50%; }
.env-help { margin: 0 0 18px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.env-help summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.env-help h4 { margin: 14px 0 4px; }
.env-vars { padding-left: 18px; }
.env-vars li { margin: 4px 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .setup-list li { grid-template-columns: 10px minmax(0, 1fr); } .setup-list li > .muted { grid-column: 2; } }
/* The start page: a larger picture, and the installed version in a corner. */
.welcome { position: relative; overflow: hidden; }
.welcome-art { width: min(440px, 38vw); }
/* The design's own picture (ADR-0095): any shape, never taller than the product's. */
.welcome-art.welcome-own { max-height: 320px; object-fit: contain; border-radius: var(--radius, 12px); }
.home-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 14px; min-height: 1.6em; }
.home-stat { text-decoration: none; color: var(--muted); }
.home-stat strong { font-size: 22px; color: var(--text); font-variant-numeric: tabular-nums; }
.home-stat:hover strong { color: var(--accent); }
.welcome-version { position: absolute; right: 16px; bottom: 12px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 75%, transparent); border: 1px solid var(--border); }
@media (max-width: 720px) { .welcome-art { width: 86%; } .welcome-version { position: static; align-self: flex-start; } }
/* Sign-in with Microsoft or Google (ADR-0066): neutral buttons with the
   provider's mark, as their sign-in guidelines ask. */
.login-sso-list { display: flex; flex-direction: column; gap: 10px; }
.login-sso { justify-content: center; gap: 10px; background: var(--surface); color: var(--text); border-color: var(--border-strong); font-weight: 600; }
.login-sso:hover { background: var(--row-hover); color: var(--text); }
.login-sso svg { width: 18px; height: 18px; flex: none; }
a.button.login-sso { display: flex; gap: 10px; }
/* Copying and moving a page (ADR-0067). */
.relocate-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.relocate-form h3 { margin-top: 0; }
.relocate-form select, .relocate-form input:not([type=checkbox]) { width: 100%; }

/* The consent page's choice of access (ADR-0068). */
#oauth-access { display: grid; gap: 8px; margin: 16px 0; padding: 0; border: 0; }
#oauth-access legend { margin-bottom: 8px; padding: 0; font-weight: 600; }

/* Export (ADR-0071): a small menu on a page, and its printed form, which
   is the page as PDF without the surroundings. */
.export-menu { position: relative; display: inline-block; }
.export-menu > summary { list-style: none; cursor: pointer; }
.export-menu > summary::-webkit-details-marker { display: none; }
.export-list { position: absolute; right: 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; min-width: 15rem; margin-top: 6px;
  padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.export-list a, .export-list button.link { display: block; padding: 6px 10px; border-radius: 6px; text-align: left; color: var(--text); text-decoration: none; }
.export-list a:hover, .export-list button.link:hover { background: var(--row-hover); }
@media print {
  :root { color-scheme: light; }
  body { background: #fff !important; }
  header.top, #drawer, #footer, .with-tree > :first-child, .crumbs, .page-head .actions, .status, .item-side > :not(#details),
  #details .actions-row, #details button, .pm-menu, .comment-mark-gutter { display: none !important; }
  .with-tree, .with-tree-main, .item-layout { display: block !important; margin: 0 !important; padding: 0 !important; }
  /* The details lead the printed page, above the text (ADR-0102). */
  .item-layout { display: flex !important; flex-direction: column-reverse; }
  .side-card, .item-main { border: none !important; box-shadow: none !important; background: none !important; }
  a { color: inherit; text-decoration: underline; }
  table, figure, .pm-image, pre { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}

/* The relevance of a search hit (ADR-0072). */
.stars { display: inline-flex; margin-right: 8px; font-size: 14px; letter-spacing: 1px; cursor: help; vertical-align: 1px; }
.stars-on { color: #e3a008; }
.stars-off { color: var(--border-strong); }
/* The frame a page's printable form loads in, to print it (ADR-0071). */
.export-frame { position: fixed; right: 0; bottom: 0; width: 1px; height: 1px; border: 0; opacity: 0; }
.export-handbook:empty { display: none; }
.export-handbook { display: contents; }

/* Account requests among an administrator's open work (ADR-0061). */
a.requests-notice { display: block; margin: 0 0 18px; color: inherit; text-decoration: none; }
a.requests-notice:hover { border-color: var(--accent); }
.requests-card { margin: 0 0 18px; border-left: 3px solid var(--warning); }
.requests-card h2 { margin-top: 0; }

/* Catalogs (ADR-0074): where a mirrored item is kept, and web addresses. */
.notice.origin { margin: 0 0 14px; }
.prop-link { margin-left: 6px; white-space: nowrap; }
.catalog-run { margin: 6px 0; }
.catalog-run summary { cursor: pointer; }
.catalog-problems { font-size: 13px; }
.connector-editor { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 4px; }
/* What a connector writes: its type and the mapping of the source's values to the type's fields (ADR-0127). */
.connector-target { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px 8px; margin: 12px 0; max-width: 760px; }
.connector-target legend { font-weight: 600; padding: 0 6px; }
.connector-fields select { min-width: 14em; }
.format-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 12px; max-height: 22rem; overflow: auto; margin-bottom: 12px; }

/* ---------- Mentions in comments (ADR-0084) ---------- */
.mention-box { position: relative; }
.mention-box textarea { width: 100%; }
.mention-list { position: absolute; left: 0; top: 100%; z-index: 15; min-width: 12rem; margin: 2px 0 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.mention-list[hidden] { display: none; }
.mention-list button { display: block; width: 100%; padding: 4px 8px; text-align: left; }
.mention-list button:hover, .mention-list button:focus { background: var(--bg); }

/* ---------- Ready-made themes to choose from (ADR-0085) ---------- */
.design-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.design-themes legend { font-weight: 600; margin-bottom: 8px; }
.theme-choice { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); cursor: pointer; }
.theme-choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.theme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.theme-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-choice .muted { font-size: 12px; }
.theme-choice .theme-notice { font-size: 12px; padding: 4px 8px; border-left: 3px solid var(--warning); background: var(--warning-soft); color: var(--text); }
.theme-preview { display: flex; height: 28px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 4px; }
.theme-preview span { flex: 1; }
.theme-preview span:first-child { flex: 2; }

/* ---------- Kanban pictures and boards by label (ADR-0087) ---------- */
.kanban-title { display: flex; align-items: center; gap: 12px; }
.kanban-title h1 { margin: 0; }
.board-section + .board-section { margin-top: 18px; }
.board-section > h2 { margin: 0 0 8px; font-size: 15px; }
/* The view of a board that keeps nothing: its space, the colour and the
   lanes, in one row above it (ADR-0139). */
.board-view { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 14px; }
.board-view .field { flex: 1 1 150px; max-width: 240px; min-width: 0; margin-bottom: 10px; }
.board-view select { width: 100%; }

/* ---------- An item's status, at the top of its details (ADR-0132) ----------
   The state is a badge; what can be done with it are ordinary buttons. */
.state-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.state-label { font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.state-now { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 13px; line-height: 20px; }
.state-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.state-now.finished { background: var(--success-soft); color: var(--success); }
.state-moves { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.state-moves button.state-move { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; margin: 0; padding: 4px 10px; font-size: 13px; }
.state-move-to { color: var(--muted); font-weight: 500; }
.state-moves button.state-move.finished { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border-strong)); }
.state-moves button.state-move.finished:hover { background: var(--success-soft); color: var(--success); }

/* ---------- Protected passages (ADR-0088) ---------- */
.pm-secret { border-radius: 3px; cursor: pointer; }
.pm-secret.secret-readable { background: color-mix(in srgb, var(--warning) 14%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--warning) 60%, transparent); }
.pm-secret.secret-veiled { background: var(--text); color: var(--text); padding: 0 3px; user-select: none; }
.pm-secret.secret-veiled:hover, .pm-secret.secret-veiled:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.secret-list .secret-entry { padding: 10px 0; }
.secret-entry.secret-focus { background: var(--accent-soft); border-radius: var(--radius-sm); }
.secret-chip-readable { background: var(--warning-soft); color: var(--warning); }
.secret-chip-veiled { background: var(--text); color: var(--surface); }
.secret-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.protect-passage blockquote { margin: 0 0 8px; }

/* ---------- Uniform rules for every view (ADR-0091) ---------- */

/* Colour carries meaning: the accent marks what can be pressed, red what
   destroys, amber what warns. A notice that only informs is neutral, so it
   never reads as an error where the accent is red. */
.notice { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); }
.notice.warning { background: var(--warning-soft); border-left-color: var(--warning); }
.notice.success { background: var(--success-soft); border-left-color: var(--success); }

/* Destructive actions are red, as a button or, in rows and lists, as text. */
button.link.danger, button.link.danger:hover { color: var(--danger); background: none; border-color: transparent; }

/* An empty list or section says so the same way everywhere; standing in a
   view rather than in a card, it gets a quiet frame of its own. */
p.empty { margin: 0 0 18px; color: var(--muted); }
main > p.empty, .with-tree-main > p.empty, main section:not(.card, .side-card) > p.empty {
  padding: 14px 18px; background: var(--surface); border: 1px dashed var(--border-strong); border-radius: var(--radius);
}

/* Rhythm: a heading after a table, card, list or empty state keeps its
   distance; the next section never sticks to the one before. */
main :is(table, .card, p.empty, ul, ol, .tasks-layout) + :is(h2, h3) { margin-top: var(--space-5); }

/* A view's other views: a row of quiet tabs under its heading. */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.subnav a { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 500; font-size: 13px; }
.subnav a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* File fields: a button and the chosen names in the page's language. */
.file-picker { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; cursor: pointer; max-width: 100%; }
.file-picker input[type=file] { position: absolute; inset: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-picker .file-button { margin: 0; pointer-events: none; }
.file-picker:hover .file-button { background: var(--accent-soft); }
.file-picker:focus-within .file-button { box-shadow: var(--focus); }
.file-names { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }

/* One height for every control: the label field of an item is a field
   like the others, its button a button like the others. */
.label-add input { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: var(--radius-sm); }
.label-add .label-add-button { min-height: 36px; min-width: 36px; justify-content: center; padding: 0 10px; border-radius: var(--radius-sm); font-size: 16px; line-height: 1; }

/* Tables: the title keeps room to read; short values do not wrap. */
#tasks td:nth-child(2) { min-width: 12rem; }
#tasks td:nth-child(3) .chip, .task-labels .chip { white-space: nowrap; }
#tasks thead select { min-width: 6.5rem; }
.tasks-filter select { width: 100%; max-width: 100%; }

/* Album: a picture's label field stays inside its card. */
.album-labels-input { width: 100%; min-width: 0; }
.album-card { min-width: 0; }

/* Phones: the logo has room above it; fields stack under their labels;
   rows of a list wrap instead of running off the screen. */
@media (max-width: 640px) {
  .top { padding-top: 8px; }
  .brand img { height: 21px; }
  main { padding: 16px; }
  .card { padding: 16px; }
  .admin-sections table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .admin-sections table td { border: 0; padding: 2px 0; }
}

/* Touch: everything pressable is at least 40 px high (WCAG 2.5.8 asks
   24 px; 40 is what a finger hits reliably). */
@media (pointer: coarse) {
  button, .button, select, input:not([type=checkbox], [type=radio]) { min-height: 40px; }
  button.link { min-height: 32px; padding-top: 6px; padding-bottom: 6px; }
}

/* Notifications: each list in a card, as every other view's sections. */
main ul.notifications, main #my-findings, main ul#watches {
  margin: 0 0 18px; padding: 6px 20px; list-style: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
main #my-findings { padding: 16px 20px; }
main #my-findings ul.notifications { margin: 0; padding: 0; border: 0; box-shadow: none; }
main ul.notifications > li + li { border-top: 1px solid var(--border); }
main ul#watches { columns: 2 18rem; column-gap: 28px; padding: 12px 20px; }
main ul#watches li { padding: 4px 0; break-inside: avoid; }

/* Label suggestions under the search at the top (ADR-0092). */
#nav .search { position: relative; }
.suggest-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.suggest-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 4px 10px;
  border-radius: 6px; cursor: pointer; }
.suggest-option:hover, .suggest-option[aria-selected=true] { background: var(--accent-soft); }
.suggest-option .muted { font-size: 12px; flex: none; }
.suggest-group { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.suggest-item { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-key { color: var(--accent); font-weight: 600; }

/* Editing the text is offered in its reading bar, beside commenting and
   protecting, at the bar's height. */
.pm-readbar { align-items: center; }
.pm-toolbar .pm-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.pm-readbar .button { min-height: 30px; margin: 0; padding: 4px 12px; font-size: 13px; line-height: 20px; align-self: center; }
/* An item without a text keeps the bar on its own, framed like a text's. */
#body.no-body .pm-readbar { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }

/* Writing aids of the editor (ADR-0096): the link dialog, the item search,
   the bubble on a link and the "@" list. */
dialog.pm-dialog { width: min(520px, calc(100vw - 32px)); padding: 20px 22px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: inherit; box-shadow: var(--shadow-lg); }
dialog.pm-dialog::backdrop { background: rgba(20, 22, 26, .45); }
dialog.pm-dialog h2 { margin: 0 0 14px; font-size: 18px; }
dialog.pm-dialog .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
dialog.pm-dialog input { width: 100%; }
dialog.pm-dialog .error:empty { display: none; }
.pm-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.pm-dialog-actions .danger { margin-right: auto; }
.pm-results { list-style: none; margin: 0 0 4px; padding: 0; max-height: 240px; overflow: auto; }
.pm-results:empty { display: none; }
.pm-results li.muted { padding: 6px 10px; }
.pm-result { display: block; width: 100%; min-height: 36px; padding: 6px 10px; margin: 0; border: none; border-radius: 8px;
  background: transparent; color: inherit; text-align: left; font-weight: 400; box-shadow: none; }
.pm-result:hover, .pm-result:focus { background: var(--accent-soft); }
.pm-result .muted { font-size: 12px; }
.pm-bubble, .pm-at { position: fixed; z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); }
.pm-bubble { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 13px; max-width: min(460px, calc(100vw - 16px)); }
.pm-bubble[hidden], .pm-at[hidden] { display: none; }
.pm-bubble-href { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pm-bubble button { min-height: 0; padding: 2px 4px; font-size: 13px; }
.pm-at { list-style: none; margin: 0; padding: 4px; min-width: 16rem; max-width: min(360px, calc(100vw - 16px)); max-height: 320px; overflow: auto; }
.pm-at-group { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pm-at-option { display: flex; align-items: baseline; gap: 8px; min-height: 32px; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.pm-at-option .muted { font-size: 12px; }
.pm-at-option:hover, .pm-at-option[aria-selected=true] { background: var(--accent-soft); }
.pm-at-none { padding: 6px 10px; }

/* The filter of a list (ADR-0098): one bar above every list. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 10px; }
.filter-bar[hidden] { display: none; }
.filter-bar .filter-text { flex: 0 1 18rem; min-width: 10rem; }
.filter-bar .filter-choice { flex: 0 1 auto; max-width: 14rem; }
.filter-bar .filter-count { margin-left: auto; font-size: 13px; }
.filter-bar .filter-reset { font-size: 13px; }
.filter-empty[hidden] { display: none; }
/* A file of the design reports its own failures (ADR-0095). */
.design-asset-status:empty { display: none; }
.design-asset-status { flex-basis: 100%; }

/* ---------- The top bar on every width (ADR-0100) ----------
   One row while everything fits. Below 900 px two fixed rows: the bar's
   controls on the first, the search with New on the second, instead of
   wrapping wherever an element happens to end. */
.top { flex-wrap: nowrap; }
#nav { flex-wrap: nowrap; min-width: 0; }
#nav .search { flex: 1 1 26rem; min-width: 8rem; max-width: 34rem; }
@media (max-width: 900px) {
  .top { flex-wrap: wrap; row-gap: 0; padding-bottom: 8px; }
  #nav { display: contents; }
  #nav .search { order: 10; flex: 1 1 calc(100% - 130px); max-width: none; margin: 0; }
  #nav-new { order: 11; }
  #nav > .bell { margin-left: auto; }
  #nav > .bell ~ .look-toggles { margin-left: 0; }
  .top > .look-toggles, #nav > .look-toggles:first-child { margin-left: auto; }
}
@media (max-width: 480px) {
  .top { gap: 4px 6px; }
  #nav-back, #nav-forward { display: none; }
  .brand img { height: 20px; }
}
/* The logo leads home as well, so on a phone the home button gives way. */
@media (max-width: 420px) {
  #nav-home { display: none; }
  .brand img { height: 17px; }
}

/* The language switch is its letters alone (ADR-0100): no frame, the
   current language marked by colour and weight. */
.lang-toggle { border: none; border-radius: 0; overflow: visible; gap: 2px; }
.lang-toggle button, .lang-toggle button + button { border: none; background: none; padding: 0 4px; min-width: 0; color: var(--muted); }
.lang-toggle button:hover { background: none; color: var(--text); }
.lang-toggle button[aria-pressed="true"] { background: none; color: var(--accent); font-weight: 700; }

/* Folding the page tree and an item's side column away (ADR-0100). */
.tree-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: sticky; top: 12px; }
.tree-col > .tree-box { position: static; }
.col-toggle { margin: 0; width: 32px; height: 32px; color: var(--muted); border: 1px solid var(--border); background: var(--surface); }
.col-toggle:hover { color: var(--text); }
.col-toggle-tree { align-self: flex-end; }
.col-toggle-side { align-self: flex-start; }
html.tree-folded .with-tree { grid-template-columns: 32px minmax(0, 1fr); }
html.tree-folded .tree-col > :not(.col-toggle) { display: none; }
html.side-folded .item-layout { grid-template-columns: minmax(0, 1fr) 32px; }
html.side-folded .item-side > :not(.col-toggle) { display: none; }
/* Where the columns stand one above the other, nothing is folded. */
@media (max-width: 800px) {
  .col-toggle-tree { display: none; }
  html.tree-folded .with-tree { grid-template-columns: minmax(0, 1fr); }
  html.tree-folded .tree-col > :not(.col-toggle) { display: revert; }
  .tree-col { position: static; }
}
@media (max-width: 1100px) {
  .col-toggle-side { display: none; }
  html.side-folded .item-layout { grid-template-columns: minmax(0, 1fr); }
  html.side-folded .item-side > :not(.col-toggle) { display: revert; }
}
@media (max-width: 340px) {
  .top { padding-left: 8px; padding-right: 8px; gap: 4px 2px; }
  .lang-toggle button { padding: 0 2px; }
  .look-toggles { gap: 0; }
  .account-button { padding: 0; }
  .brand img { height: 15px; }
}

/* Reading mode (ADR-0101): the content alone, with a way back. */
.reading-toggle { margin: 0; color: var(--text); }
.reading-exit { display: none; }
html.reading-mode header.top, html.reading-mode .tree-col, html.reading-mode .item-side, html.reading-mode #footer, html.reading-mode .col-toggle { display: none !important; }
html.reading-mode .with-tree, html.reading-mode .item-layout { grid-template-columns: minmax(0, 1fr) !important; }
html.reading-mode main { max-width: 1100px; }
html.reading-mode .reading-exit { display: inline-flex; position: fixed; top: 10px; right: 12px; z-index: 30; min-height: 32px; padding: 4px 12px;
  font-size: 13px; opacity: .55; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text); box-shadow: var(--shadow); }
html.reading-mode .reading-exit:hover, html.reading-mode .reading-exit:focus { opacity: 1; }
@media print { .reading-exit { display: none !important; } }
/* On a phone the screen is the content already; the button gives way. */
@media (max-width: 480px) { .reading-toggle { display: none; } }

/* ---------- Tasks in a text (ADR-0114) ---------- */
.pm-tasklist { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.pm-tasklist .tasklist-table { width: 100%; margin: 6px 0 0; }
.pm-tasklist .tasklist-table th button.sort { font-weight: 600; color: inherit; }
.pm-tasklist .tasklist-table th[aria-sort="ascending"] button.sort::after { content: " ▲"; font-size: 10px; }
.pm-tasklist .tasklist-table th[aria-sort="descending"] button.sort::after { content: " ▼"; font-size: 10px; }
.newtask-display { border: 0; padding: 0; margin: 8px 0; display: flex; gap: 16px; flex-wrap: wrap; }
.newtask-display legend { font-weight: 600; margin-bottom: 4px; }

/* ---------- Who edits now (ADR-0115) ---------- */
.live-editors { display: inline-flex; align-items: center; }
.live-editors[hidden] { display: none; }
.live-editor { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.live-editor + .live-editor { margin-left: -6px; }

/* ---------- Narrow screens (ADR-0116) ---------- */
/* A key such as PLAT-12 is one word: it does not break at its hyphen. */
a.key, .card-key, td.key { white-space: nowrap; }
/* The title being edited takes the head's width, not more. */
form#title { flex: 1 1 auto; min-width: 0; }
input.title { width: 100%; min-width: 0; }
/* The drawing editor fills the screen where the screen is small, so its
   Cancel and Save stay in sight; 100dvh is the height one sees, not the
   one behind the browser's bars. */
dialog.drawing { height: calc(100dvh - 32px); }
dialog.note-dialog { max-height: calc(100dvh - 32px); overflow: auto; }
/* A table in a text keeps readable columns and scrolls sideways, with a
   shadow at the edge that has more. */
.pm-table th, .pm-table td { min-width: 7rem; max-width: 22rem; overflow-wrap: anywhere; }
.pm-table th { overflow-wrap: normal; hyphens: auto; }
.pm-table, .pm-tasklist .tasklist-box .filtered, .table-scroll {
  background: linear-gradient(to right, var(--surface) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), transparent) left / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), transparent) right / 10px 100% no-repeat scroll;
}
.pm-table input { min-width: 7rem; }
@media (max-width: 640px) {
  dialog.drawing { inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  dialog.note-dialog { width: calc(100vw - 16px); }
  .item-side table.history td { overflow-wrap: normal; white-space: nowrap; }
  .item-side table.history td:last-child { white-space: normal; min-width: 8rem; }
  /* The export menu opens as a sheet at the bottom, where it fits. */
  .export-list { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; min-width: 0; margin: 0; max-height: 70dvh; overflow: auto; }
  .pm-tasklist { padding: 8px 10px; }
}
/* A table wider than the screen scrolls inside its frame instead of
   widening the page. */
@media (max-width: 900px) {
  main table:not(.props) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  main table:not(.props) th, main table:not(.props) td { overflow-wrap: normal; }
}
/* Forms of one line wrap their button under the field where the line is
   too short. */
.kanban-tools .inline-form { flex-wrap: wrap; }
.kanban-tools .inline-form input, .kanban-tools .inline-form select { min-width: 0; flex: 1 1 12rem; }
.search-page { flex-wrap: wrap; }
.search-page input { min-width: 0; flex: 1 1 10rem; }

/* How full the storage is (ADR-0150): a bar in the level's colour. */
.storage-level { margin: 0 0 8px; }
/* Every signed-in person learns that nothing new is made (ADR-0163). */
.storage-banner { padding: 6px 16px; font-size: 0.9rem; text-align: center; background: var(--warning-soft); color: var(--text); border-bottom: 1px solid var(--warning); }
.storage-banner.storage-full { background: var(--danger-soft); border-bottom-color: var(--danger); }
[data-paused] { opacity: 0.55; cursor: not-allowed; }
.storage-notice { display: block; margin: 0 0 14px; }
.storage-notice.storage-critical, .storage-notice.storage-full { border-left-color: var(--danger); }
.storage-level.storage-warning strong { color: #a15c00; }
.storage-level.storage-critical strong, .storage-level.storage-full strong { color: var(--danger); }
.storage-bar { height: 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; margin: 0 0 12px; }
.storage-bar-used { display: block; height: 100%; background: var(--accent); }
.storage-bar-used.storage-warning { background: #d98e04; }
.storage-bar-used.storage-critical, .storage-bar-used.storage-full { background: var(--danger); }
#storage-parts td.num, #storage-parts th.num { text-align: right; white-space: nowrap; }
#storage-thresholds .form-row { display: flex; flex-wrap: wrap; gap: 10px; }
#storage-thresholds .form-row .field { flex: 1 1 140px; }
#storage-thresholds button + button { margin-left: 8px; }

/* ---------- Starmap (ADR-0157) ----------
   The graph of a room as SVG. Every colour is a token of the look, so the
   map reads in the light, dark and cockpit looks; shape and outline tell
   the kinds apart, line styles the edges, so colour is never alone. */
.starmap-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 10px; }
.starmap-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.starmap-filter legend { padding: 0 4px; font-size: 13px; color: var(--muted); }
.starmap-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }
.starmap-stage { position: relative; }
.starmap-canvas { display: block; width: 100%; height: 72vh; min-height: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: grab; touch-action: none; user-select: none; }
.starmap-canvas:active { cursor: grabbing; }
.starmap-panel { position: absolute; top: 12px; right: 12px; width: min(300px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; box-shadow: var(--shadow-lg); }
.starmap-panel-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.starmap-panel-head h2 { overflow-wrap: anywhere; }
.starmap-panel-head button { font-size: 18px; line-height: 1; }
.starmap-facts { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 12px; font-size: 13px; }
.starmap-facts dt { color: var(--muted); }
.starmap-facts dd { margin: 0; overflow-wrap: anywhere; }
.starmap-legend { margin-top: 12px; }
.starmap-legend ul { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; }
.starmap-legend li { display: inline-flex; align-items: center; gap: 6px; }
.star-swatch { width: 22px; height: 22px; overflow: visible; }
.star-swatch.wide { width: 40px; height: 10px; }
.star-node { --tone: var(--accent); cursor: pointer; outline: none; }
.star-node.tone-1 { --tone: var(--success); }
.star-node.tone-2 { --tone: var(--warning); }
.star-node.tone-3 { --tone: var(--danger); }
.star-node.tone-4 { --tone: var(--text); }
.star-node.tone-5 { --tone: var(--accent-hover); }
.star-shape { fill: color-mix(in srgb, var(--tone) 16%, var(--surface)); stroke: var(--tone); stroke-width: 2; }
.star-node.kind-picture .star-shape { fill: var(--surface-2); stroke: var(--text); stroke-width: 1.5; }
.star-node.kind-label .star-shape { fill: var(--accent-soft); stroke: var(--muted); stroke-width: 1.5; }
.star-node.outside .star-shape { stroke-dasharray: 4 3; fill: var(--surface); }
.star-caption { fill: var(--text); font-size: 11px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.star-node.kind-label .star-caption { font-style: italic; }
.star-node:hover .star-shape, .star-node:focus-visible .star-shape { stroke-width: 3.5; }
.star-node:focus-visible .star-shape { stroke: var(--accent); }
.star-node.match .star-shape { stroke: var(--accent); stroke-width: 4; }
.star-node.match .star-caption { font-weight: 600; }
.star-node.focused .star-shape { stroke: var(--accent); stroke-width: 5; }
.star-node.dim, .star-link.dim { opacity: 0.25; }
/* The live map (ADR-0158): a node held by the pointer, the separated
   node at the end of the drill path, the neighbourhood the pointer or the
   keyboard lights, and the captions that fade with the zoom. */
.star-node, .star-link, .star-caption, .star-edge-label { transition: opacity 0.18s ease; }
.star-node.dragging { cursor: grabbing; }
.star-node.root .star-shape { stroke: var(--accent); stroke-width: 4.5; fill: var(--accent-soft); }
.star-node.hover .star-shape { stroke-width: 4; }
.star-link.lit .star-edge { stroke: var(--accent); stroke-width: 2.4; }
.starmap-canvas.hovering .star-node:not(.lit), .starmap-canvas.hovering .star-link:not(.lit) { opacity: 0.18; }
.starmap-canvas.hovering .star-node.lit, .starmap-canvas.hovering .star-link.lit { opacity: 1; }
.starmap-canvas.hovering .star-node.lit .star-caption { font-weight: 600; }
.starmap-canvas.zoom-far .star-node:not(.lit, .focused, .match, .root) .star-caption,
.starmap-canvas.zoom-mid .star-node:not(.kind-item, .lit, .focused, .match, .root) .star-caption,
.starmap-canvas:is(.zoom-far, .zoom-mid) .star-link:not(.lit) .star-edge-label { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .star-node, .star-link, .star-caption, .star-edge-label { transition: none; }
}
.starmap-depth { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.starmap-trail ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; }
.starmap-trail li + li::before { content: "›"; margin: 0 8px; color: var(--muted); }
.starmap-crumb.here { font-weight: 600; }
.starmap-panel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The panel shows the page itself, clipped until "Read more" (ADR-0157). */
@media (min-width: 1100px) { .starmap-panel { width: min(420px, calc(100% - 24px)); } }
.starmap-panel:focus { outline: none; }
.starmap-panel:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 2px; }
.starmap-facts-line { margin: 0 0 10px; font-size: 13px; overflow-wrap: anywhere; }
.starmap-preview-box { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.starmap-preview-body { overflow-wrap: anywhere; }
.starmap-preview-body.clipped { max-height: 18em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
.starmap-preview-body img { max-width: 100%; height: auto; }
.starmap-more { margin-top: 6px; }
.starmap-picture figure { margin: 0 0 8px; }
.starmap-picture img { display: block; max-width: 100%; max-height: 50vh; height: auto; border-radius: var(--radius-sm); }
.starmap-label-items h3 { font-size: 14px; margin: 0 0 6px; }
@media (max-width: 640px) {
  .starmap-panel { position: fixed; inset: auto 0 0 0; width: 100%; max-height: 70dvh; border-radius: var(--radius) var(--radius) 0 0; z-index: 30; }
}
.star-edge { stroke: var(--border-strong); stroke-width: 1.4; fill: none; }
.star-edge.edge-parent { stroke: var(--muted); stroke-width: 2; }
.star-edge.edge-relation { stroke: var(--accent); stroke-width: 1.6; }
.star-edge.edge-mentions { stroke: var(--accent); stroke-dasharray: 6 4; }
.star-edge.edge-embeds { stroke: var(--accent); stroke-dasharray: 1.5 3; stroke-linecap: round; stroke-width: 2; }
.star-edge.edge-picture { stroke: var(--border-strong); stroke-width: 1; }
.star-edge.edge-copy { stroke: var(--warning); stroke-dasharray: 10 3 2 3; stroke-width: 1.6; }
.star-edge.edge-label { stroke: var(--muted); stroke-dasharray: 1 3; stroke-width: 1; }
.star-edge-label { fill: var(--muted); font-size: 10px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; pointer-events: none; }
.star-marker path { fill: var(--accent); }
.star-marker.arrow-copy path { fill: var(--warning); }
/* The impact view (ADR-0159): the start bold, a ring that fades with the
   distance, the edges the walk followed bold, the others faint. */
.star-ring { fill: none; stroke: var(--accent); stroke-width: 3; pointer-events: none; }
.star-node.dist-0 .star-ring { stroke-width: 5; }
.star-node.dist-1 .star-ring { opacity: 0.85; }
.star-node.dist-2 .star-ring { opacity: 0.65; stroke-dasharray: 8 3; }
.star-node.dist-3 .star-ring { opacity: 0.5; stroke-dasharray: 5 3; }
.star-node.dist-4 .star-ring { opacity: 0.38; stroke-dasharray: 3 3; }
.star-node.dist-5 .star-ring, .star-node.dist-far .star-ring { opacity: 0.28; stroke-dasharray: 1.5 3; }
.star-node.impact-start .star-shape { stroke: var(--accent); stroke-width: 5; fill: var(--accent-soft); }
.impact-mode .star-link:not(.walk) { opacity: 0.45; }
.star-link.walk .star-edge { stroke-width: 2.6; }
.starmap-direction { display: inline-flex; gap: 0; }
.starmap-direction button { border-radius: 0; }
.starmap-direction button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.starmap-direction button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.starmap-direction button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.starmap-impact { margin-top: 12px; }
.starmap-impact h2 { font-size: 16px; margin: 0 0 6px; }
.starmap-impact-list { margin: 8px 0 0; padding-left: 22px; font-size: 14px; }
.starmap-impact-list li { margin: 2px 0; }
.starmap-impact-list li > .muted { margin-left: 8px; font-size: 13px; }

/* ===== Cockpit — a personal, gamified look (ADR-0156, after atlas ADR-0509) ====
   A third look beside light and dark, chosen on the account page and kept in
   the browser, never selected by the system. It rides the dark look: the dark
   stylesheet is on, and this block answers its palette tokens in a deep-space,
   cyan-HUD key (it outranks dark.css's :root by specificity, not by order).
   The backdrop is decorative only: fixed, inert, behind the content. All
   motion stops under prefers-reduced-motion; the static palette stays. */
:root[data-look="cockpit"] {
  --bg: #060a12;
  --surface: #0c1622;
  --surface-2: #0f1b29;
  --border: #16344a;
  --border-strong: #24506b;
  --text: #d7eef3;
  --muted: #7ba3ac;
  --accent: #31e1e6;
  --accent-hover: color-mix(in srgb, #31e1e6 82%, #ffffff);
  --accent-soft: color-mix(in srgb, #31e1e6 18%, #0c1622);
  --accent-ink: #052226;
  --danger: #ff6b6b;
  --danger-soft: #2a1317;
  --success: #39d98a;
  --success-soft: color-mix(in srgb, #39d98a 14%, #0c1622);
  --warning: #ffb648;
  --warning-soft: #2a2110;
  --row-hover: #102030;
  --shadow: 0 0 0 1px rgba(49, 225, 230, 0.08), 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 26px rgba(49, 225, 230, 0.06);
  --shadow-lg: 0 0 0 1px rgba(49, 225, 230, 0.12), 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 32px rgba(49, 225, 230, 0.08);
  color-scheme: dark;
}
/* Deep space: a radial nebula over near-black. */
:root[data-look="cockpit"] body {
  background:
    radial-gradient(1200px 680px at 78% -10%, rgba(49, 225, 230, 0.10), transparent 60%),
    radial-gradient(900px 600px at 12% 108%, rgba(90, 120, 255, 0.10), transparent 60%),
    radial-gradient(100% 100% at 50% 40%, #0a1424 0%, #060a12 70%, #03060d 100%);
  background-attachment: fixed;
}
/* A drifting starfield. */
:root[data-look="cockpit"] body::before {
  content: "";
  position: fixed;
  inset: -300px 0 0 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 40px 60px, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1.4px 1.4px at 160px 140px, rgba(185, 245, 255, 0.8), transparent),
    radial-gradient(1px 1px at 240px 40px, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 90px 220px, rgba(255, 255, 255, 0.6), transparent);
  background-size: 300px 300px, 300px 300px, 180px 180px, 180px 180px;
  opacity: 0.9;
  animation: cockpit-stars 140s linear infinite;
}
/* Faint scanlines and a glow from the top: a thin, static instrument overlay. */
:root[data-look="cockpit"] body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(49, 225, 230, 0.11), transparent 140px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);
  opacity: 0.6;
  mix-blend-mode: overlay;
}
/* The content above the two backdrop layers. */
:root[data-look="cockpit"] main,
:root[data-look="cockpit"] .footer { position: relative; z-index: 1; }
/* Glass header with a cyan hairline. */
:root[data-look="cockpit"] .top {
  background: linear-gradient(180deg, rgba(12, 22, 34, 0.92), rgba(6, 10, 18, 0.86));
  border-bottom-color: rgba(49, 225, 230, 0.35);
  box-shadow: 0 1px 0 rgba(49, 225, 230, 0.15), 0 6px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}
/* The logo's planet glows like a reactor. */
:root[data-look="cockpit"] .brand img { animation: cockpit-reactor 3.4s ease-in-out infinite; }
/* Glowing actions, tiles and module symbols. */
:root[data-look="cockpit"] :is(button.primary, .button.primary, button[type=submit]:not(.link):not(.secondary):not(.danger)) { box-shadow: 0 0 16px rgba(49, 225, 230, 0.42); }
:root[data-look="cockpit"] :is(button.primary, .button.primary, button[type=submit]:not(.link):not(.secondary):not(.danger)):hover { box-shadow: 0 0 24px rgba(49, 225, 230, 0.62); }
:root[data-look="cockpit"] :is(.home-tile, .space-tile, .card):hover { border-color: rgba(49, 225, 230, 0.35); }
:root[data-look="cockpit"] .module-icon { box-shadow: 0 0 14px color-mix(in srgb, var(--module, #31e1e6) 55%, transparent); }
:root[data-look="cockpit"] .welcome { border-color: rgba(49, 225, 230, 0.25); }
/* An online light on one's own avatar, and telemetry lights on the counts. */
:root[data-look="cockpit"] .account-button { position: relative; }
:root[data-look="cockpit"] .account-button::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 2px var(--surface), 0 0 8px var(--success);
  animation: cockpit-blink 2.2s ease-in-out infinite;
  pointer-events: none;
}
:root[data-look="cockpit"] .home-stat { position: relative; padding-left: 14px; }
:root[data-look="cockpit"] .home-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(49, 225, 230, 0.8);
  animation: cockpit-blink 1.8s ease-in-out infinite;
}
@keyframes cockpit-stars { from { transform: translateY(0); } to { transform: translateY(300px); } }
@keyframes cockpit-reactor {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(49, 225, 230, 0.45)); }
  50% { filter: drop-shadow(0 0 9px rgba(49, 225, 230, 0.9)); }
}
@keyframes cockpit-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-look="cockpit"] body::before,
  :root[data-look="cockpit"] .brand img,
  :root[data-look="cockpit"] .account-button::after,
  :root[data-look="cockpit"] .home-stat::before { animation: none; }
}
/* ===== end cockpit ========================================================== */
/* Protected blocks (ADR-0160): a reader sees them marked at the side; one
   who may not read them sees one dark bar with who decides. */
.pm-block-secret { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warning) 70%, transparent); background: color-mix(in srgb, var(--warning) 7%, transparent); padding-left: 10px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pm-veiled { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--text) 25%, transparent); cursor: pointer; }
.pm-veiled:hover, .pm-veiled:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.pm-veiled-bar { flex: 0 0 auto; min-width: 9em; padding: 0 6px; border-radius: 3px; background: var(--text); color: var(--text); user-select: none; letter-spacing: 1px; }
.pm-veiled-text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.protect-choices { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.protect-blocks { margin: 0 0 8px; padding-left: 18px; }

/* Access requests: the dialog (ADR-0161) and the task (ADR-0162). */
.access-dialog .access-what { margin-top: 0; }
.access-request-card .actions-row { margin-bottom: 0; }
.secret-ask-task, .secret-own-task { overflow-wrap: anywhere; }
.pm-veiled .secret-request-block.secret-waiting { font-style: italic; }