/* Reusable pieces: eyebrow, buttons, cards, stat tiles, tables, badges, messages. */

.eyebrow {
  display: block;
  color: var(--color-accent-ink);
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

/* Buttons (Creatio): pills, Montserrat semibold. Primary: the orange fill. Secondary: white with a line that turns
   navy. Danger: the red fill, for the last confirmation only. A link-like action stays text, blue. */
.btn-primary,
.btn-secondary,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--button-height);
  padding: 0 var(--button-pad);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: var(--text-label-md);
  line-height: var(--leading-label-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

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

.btn-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
  text-decoration: none;
}

.btn-primary:active {
  background: var(--color-accent-press);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border-hover);
}

.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}

.btn-danger {
  background: var(--color-error);
  color: var(--color-on-accent);
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-on-error-bg);
}

/* In a table row a button is the compact pill: rows stay dense */
.table :is(.btn-primary, .btn-secondary, .btn-danger) {
  min-height: var(--button-height-compact);
  padding: 0 var(--button-pad-compact);
  font-size: var(--text-body-sm);
}

/* Small text action: "+ Add", "Edit", "Delete" in lists */
.btn-link {
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 2px var(--space-xs);
  color: var(--color-cobalt);
  font-family: var(--font-heading);
  font-size: var(--text-label-sm);
  font-weight: 600;
  cursor: pointer;
}

.btn-link:hover {
  color: var(--color-cobalt-hover);
  text-decoration: underline;
}

/* Dialogs and forms */
.dialog {
  width: min(440px, calc(100vw - 2 * var(--space-md)));
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  color: var(--color-text-body);
}

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

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--color-primary);
  font-size: var(--text-label-sm);
  line-height: var(--leading-label-sm);
  font-weight: 600;
}

.field input,
.field select,
.field textarea {
  min-height: var(--control-height);
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  color: var(--color-text-body);
  font-size: var(--text-body-md);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.field input:hover:not(:read-only),
.field select:hover,
.field textarea:hover:not(:read-only) {
  border-color: var(--color-border-strong);
}

/* Focus: the line goes navy inside a light orange ring */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.field input[type="checkbox"],
.field input[type="radio"],
.field input[type="range"],
.field input[type="color"] {
  min-height: 0;
  accent-color: var(--color-accent);
}

.field input[type="range"] {
  padding: 0;
  border: 0;
}

.field textarea {
  font-family: inherit;
  resize: vertical;
}

/* A read-only process field shows its value without looking editable */
.field input:read-only {
  background: var(--color-canvas);
  color: var(--color-text-body);
}

/* A yes/no field: the box beside its label */
.field.is-check {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
}

.field-required {
  color: var(--color-error);
}

/* One choice of several (New process → Kind): a radio before each, its explanation under its name. */
.kind-choice {
  margin: 0;
  padding: 0;
  border: 0;
  gap: var(--space-xs);
}

.kind-choice legend {
  padding: 0;
  margin-bottom: var(--space-xs);
}

.kind-choice label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-sm);
  align-items: baseline;
  color: var(--color-text);
  font-size: var(--text-body-sm);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.kind-choice label .form-text {
  grid-column: 2;
  font-weight: 400;
}

.field.kind-choice input {
  padding: 0;
}

/* Process form fields (task page); the drag-and-drop layout will replace this default grid */
/* <bpm-page>: the page folder's HTML in its standard structure. A section's columns come from
   data-columns, an item's width from data-span; a narrow screen stacks everything. Page authors add
   their own rules in page.css (starting with .bpm-page-root). */
bpm-page {
  display: block;
}

.bpm-page-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.bpm-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bpm-section-title {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-label-md);
  font-weight: 600;
}

.bpm-section.is-collapsible > .bpm-section-title {
  cursor: pointer;
}

.bpm-section.is-collapsible > .bpm-section-title::before {
  content: "▾ ";
  color: var(--color-text-muted);
}

.bpm-section.is-folded > .bpm-section-title::before {
  content: "▸ ";
}

.bpm-section.is-folded > .bpm-grid {
  display: none;
}

.bpm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

[data-columns="2"] > .bpm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-columns="3"] > .bpm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-columns="4"] > .bpm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.bpm-grid > [data-span="2"] { grid-column: span 2; }
.bpm-grid > [data-span="3"] { grid-column: span 3; }
.bpm-grid > [data-span="4"] { grid-column: span 4; }

.bpm-text {
  margin: 0;
  align-self: center;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.bpm-divider {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 720px) {
  .bpm-grid,
  [data-columns] > .bpm-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bpm-grid > * {
    grid-column: auto !important;
  }
}

/* "Start new process" on Home: one row per process the caller may start */
.start-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.start-list a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 600;
}

.start-list a:hover {
  background: var(--color-canvas);
}

.form-text {
  color: var(--color-text-body);
}

.form-error {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  background: var(--color-error-bg);
  color: var(--color-on-error-bg);
  font-size: var(--text-body-sm);
  font-weight: 600;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* A card's header (Linear): no fill, a line under it, its title Montserrat semibold */
.card > header {
  padding: 14px var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-surface);
  color: var(--color-text);
}

.card > header h2,
.card > header h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Stat tiles (Monday): a white card with a bar in its state's colour on top, the number big and navy */
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 18px var(--space-lg) var(--space-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--space-xs);
  background: var(--stat-bar, var(--stat-color, var(--color-primary)));
}

.stat[data-tone="pending"]   { --stat-color: var(--status-pending); --stat-bar: var(--status-pending-dot); }
.stat[data-tone="running"]   { --stat-color: var(--status-running); }
.stat[data-tone="completed"] { --stat-color: var(--status-completed); --stat-bar: var(--status-completed-dot); }

.stat-label {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Tables */
.table {
  width: 100%;
}

.table th,
.table td {
  padding: 11px var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  vertical-align: middle;
}

/* Quiet headers (Linear, Attio): no fill, small Montserrat capitals */
.table th {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* A number column (request number): digits line up, never wraps. */
.table .num {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

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

.table tbody tr:hover td {
  background: var(--color-tint-hover);
}

/* A table that opens its card: the tinted head follows the card's rounded corners. */
.card > .table:first-child thead tr:first-child th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.card > .table:first-child thead tr:first-child th:last-child {
  border-top-right-radius: var(--radius-lg);
}

/* A row that holds a link opens it on click anywhere (openRowLink in dom.ts). */
.table tbody tr:has(a) {
  cursor: pointer;
}

.table td:first-child {
  font-weight: 600;
  color: var(--color-text);
}

.is-overdue {
  color: var(--status-overdue);
  font-weight: 700;
}

/* Status pill (bpm-status custom element): a dot and the word, on its state's tint */
bpm-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--pill-height);
  padding: 0 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  line-height: var(--leading-label-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--status-cancelled);
  background: var(--status-cancelled-bg);
}

bpm-status::before {
  content: "";
  flex: none;
  width: var(--pill-dot);
  height: var(--pill-dot);
  border-radius: var(--radius-full);
  background: var(--status-dot, currentColor);
}

bpm-status[data-status="running"]   { color: var(--status-running);   background: var(--status-running-bg); }
bpm-status[data-status="pending"]   { color: var(--status-pending);   background: var(--status-pending-bg); --status-dot: var(--status-pending-dot); }
bpm-status[data-status="overdue"]   { color: var(--status-overdue);   background: var(--status-overdue-bg); }
bpm-status[data-status="completed"] { color: var(--status-completed); background: var(--status-completed-bg); --status-dot: var(--status-completed-dot); }
bpm-status[data-status="cancelled"] { color: var(--status-cancelled); background: var(--status-cancelled-bg); }

/* Search form: words take the room, the filters sit beside them and wrap on a narrow screen */
.search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.search-form .search-words {
  flex: 1 1 280px;
}

.pager {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
}

.pager [hidden] {
  display: none;
}

/* Code that does not run as saved (<bpm-code-state>): a full-width strip above the toolbar */
.code-pending {
  display: block;
  margin: 0;
  padding: var(--space-sm) var(--space-lg);
  background: var(--status-pending-bg);
  border-bottom: 1px solid var(--status-pending);
  color: var(--status-pending);
  font-size: var(--text-body-sm);
  font-weight: 600;
}

.code-pending[hidden] {
  display: none;
}

.code-pending.is-done {
  background: var(--status-completed-bg);
  border-bottom-color: var(--status-completed);
  color: var(--status-completed);
}

.code-pending.is-error {
  background: var(--color-error-bg);
  border-bottom-color: var(--color-error);
  color: var(--color-on-error-bg);
}

/* Messages */
.empty {
  padding: var(--space-lg);
  color: var(--color-text-muted);
  text-align: center;
}

/* A person's status as a dot on their initials (withStatus() in dom.ts; Sally, 2026-10-28): green available, red busy,
   amber away; offline: no dot. The status is in the title too. */
.avatar[data-status] {
  position: relative;
}

.avatar[data-status]::after,
.user-menu-dot {
  width: var(--presence-dot-size);
  height: var(--presence-dot-size);
  border-radius: var(--radius-full);
  background: var(--presence-available);
}

.avatar[data-status]::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  border: 2px solid var(--color-surface);
}

.avatar[data-status="Busy"]::after,
.user-menu-dot[data-status="Busy"] {
  background: var(--presence-busy);
}

.avatar[data-status="Away"]::after,
.user-menu-dot[data-status="Away"] {
  background: var(--presence-away);
}

/* A person shown as their initials (avatar() in dom.ts); the full name is the title. Nobody: a muted dash. */
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: var(--radius-full);
  background: var(--avatar-tone-bg, var(--avatar-bg));
  color: var(--avatar-tone, var(--color-cobalt));
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  line-height: 1;
}

/* Each person in one of six colours, the same everywhere (avatar() in dom.ts picks it from their id) */
.avatar[data-tone="1"] { --avatar-tone: var(--avatar-1); --avatar-tone-bg: var(--avatar-1-bg); }
.avatar[data-tone="2"] { --avatar-tone: var(--avatar-2); --avatar-tone-bg: var(--avatar-2-bg); }
.avatar[data-tone="3"] { --avatar-tone: var(--avatar-3); --avatar-tone-bg: var(--avatar-3-bg); }
.avatar[data-tone="4"] { --avatar-tone: var(--avatar-4); --avatar-tone-bg: var(--avatar-4-bg); }
.avatar[data-tone="5"] { --avatar-tone: var(--avatar-5); --avatar-tone-bg: var(--avatar-5-bg); }
.avatar[data-tone="6"] { --avatar-tone: var(--avatar-6); --avatar-tone-bg: var(--avatar-6-bg); }

.avatar.is-nobody {
  background: var(--color-canvas);
  color: var(--color-text-muted);
}

/* The person's own picture over their initials (user decision 2026-10-29): the initials stay for a screen reader. */
.avatar.has-photo {
  background-color: var(--avatar-bg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: transparent;
}

.error {
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  background: var(--color-error-bg);
  color: var(--color-on-error-bg);
  font-weight: 600;
}

/* ---- A designer's side panel that folds away where it is (<bpm-side-panel>; Sally, 2026-10-04) ---
   A small navy round button sits on the panel's inner border at the top, half on the panel, half on the page
   (it never reaches the headings: the panel's padding is wider). Folded, the panel is gone; only its
   border and the same button stay, the arrow turned back. */
bpm-side-panel {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 0;
  width: var(--org-side-width);
  background: var(--color-surface);
}

bpm-side-panel[side="left"] {
  border-right: 1px solid var(--color-border);
}

bpm-side-panel[side="right"] {
  border-left: 1px solid var(--color-border);
}

bpm-side-panel > :not(.side-toggle) {
  flex: 1;
  min-width: 0;
}

bpm-side-panel.is-collapsed {
  width: 0;
}

bpm-side-panel.is-collapsed > :not(.side-toggle) {
  display: none;
}

.side-toggle {
  position: absolute;
  top: var(--space-md);
  display: grid;
  place-items: center;
  width: var(--side-toggle-size);
  height: var(--side-toggle-size);
  padding: 0;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  box-shadow: var(--shadow-2);
  color: var(--color-on-primary);
  font: inherit;
  font-size: var(--text-body-lg);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

bpm-side-panel[side="right"] > .side-toggle {
  left: calc(var(--side-toggle-size) / -2);
}

bpm-side-panel[side="left"] > .side-toggle {
  right: calc(var(--side-toggle-size) / -2);
}

/* Folded at the screen's edge: the button moves wholly onto the page, so none of it is cut off. */
bpm-side-panel[side="right"].is-collapsed > .side-toggle {
  left: calc(-1 * (var(--side-toggle-size) + var(--space-xs)));
}

bpm-side-panel[side="left"].is-collapsed > .side-toggle {
  right: calc(-1 * (var(--side-toggle-size) + var(--space-xs)));
}

.side-toggle:hover,
.side-toggle:focus-visible {
  background: var(--color-cobalt);
}

.side-toggle:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* ---- Shared by the full-height screens (organization, designer) ------------------------- */

/* "Saving…" / "Saved" beside a toolbar */
.save-status {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Zoom buttons for a <bpm-zoom-view> */
.zoom-group {
  display: inline-flex;
}

.zoom-group button {
  min-width: 30px;
  height: 30px;
  margin-left: -1px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border-hover);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-label-sm);
  font-weight: 600;
  cursor: pointer;
}

.zoom-group button:first-child {
  margin-left: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}

.zoom-group button:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.zoom-group button:hover {
  position: relative;
  border-color: var(--color-primary);
}

#zoom-level {
  min-width: 52px;
}

/* The scrolling, pannable area of a <bpm-zoom-view> */
.zoom-surface {
  display: block;
  flex: 1;
  min-height: 0;
  overflow: auto;
  cursor: grab;
}

.zoom-surface.is-panning {
  cursor: grabbing;
  user-select: none;
}

/* Right-click menu (its entries appear when they apply) */
.context-menu {
  position: fixed;
  z-index: 10;
  min-width: 160px;
  padding: var(--space-xs) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

.context-menu[hidden] {
  display: none;
}

.context-menu button {
  display: block;
  width: 100%;
  padding: var(--space-xs) var(--space-md);
  background: none;
  border: 0;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-label-md);
  text-align: left;
  cursor: pointer;
}

.context-menu button[hidden] {
  display: none;
}

.context-menu button:hover,
.context-menu button:focus-visible {
  background: var(--color-canvas);
  outline: none;
}

.context-menu hr {
  margin: var(--space-xs) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* <bpm-assignee-picker>: the rule line, the chosen targets as rows, the search box and the
   grouped matches. Badges use the organization screen's colour code. */
bpm-assignee-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--color-text);
  font-size: var(--text-body-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.picker-summary {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.picker-summary.is-empty {
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-md);
  font-style: italic;
  text-align: center;
}

/* The chosen rows share one set of columns (subgrid): the badge column is as wide as the widest badge, so a long
   badge ("DEPARTMENT") never runs into the name, and the names still line up */
.picker-chosen {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content) minmax(0, 1fr) auto auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* One row: badge, name, detail, remove */
.picker-row,
.picker-option {
  display: grid;
  /* the badge as wide as it is; the name gets its whole width next; the muted detail takes what is left */
  grid-template-columns: max-content minmax(0, max-content) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 0 0 var(--space-xs);
  min-height: var(--picker-row-height);
}

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

/* A chosen row: badge, name, detail, leave out (–), remove (×) - on the list's columns */
.picker-row {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.picker-row .picker-remove {
  grid-column: 5;
}

.picker-exclude {
  grid-column: 4;
  min-width: var(--picker-row-height);
  height: var(--picker-row-height);
  padding: 0 var(--space-xs);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-label-sm);
  cursor: pointer;
}

.picker-exclude:hover,
.picker-exclude:focus-visible {
  border-color: var(--color-error);
  color: var(--color-error);
  outline: none;
}

/* Left out: the target's people are taken away from the others' */
.picker-row.is-excluded .picker-name {
  color: var(--color-error);
  text-decoration: line-through;
}

.picker-exclude.is-tag {
  display: inline-flex;
  align-items: center;
  background: var(--color-error-bg);
  color: var(--color-error);
  font-weight: 600;
  cursor: default;
}

/* Asking before removing, in the row itself: "Remove Yazilim?" [Remove] [Cancel] */
.picker-row.is-confirming {
  background: var(--color-error-bg);
}

.picker-confirm-text {
  grid-column: 1 / 4;
  overflow: hidden;
  color: var(--color-error);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-confirm-yes,
.picker-confirm-no {
  padding: 0 var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--text-label-sm);
  font-weight: 700;
  cursor: pointer;
}

.picker-confirm-yes {
  grid-column: 4;
  background: var(--color-error);
  color: var(--color-on-primary);
}

.picker-confirm-no {
  grid-column: 5;
  background: none;
  color: var(--color-text-muted);
}

.picker-confirm-no:hover,
.picker-confirm-no:focus-visible {
  border-color: var(--color-border-hover);
  outline: none;
}

.picker-name {
  overflow: hidden;
  color: var(--color-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-detail {
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-remove {
  grid-column: 4;
  width: var(--picker-row-height);
  height: var(--picker-row-height);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-body-lg);
  line-height: 1;
  cursor: pointer;
}

.picker-remove:hover,
.picker-remove:focus-visible {
  background: var(--color-error-bg);
  color: var(--color-error);
  outline: none;
}

/* The type badge */
.assignee-badge {
  justify-self: start;
  padding: 1px var(--space-xs);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.assignee-badge.is-department {
  background: var(--org-department);
  color: var(--org-on-department);
}

.assignee-badge.is-position {
  background: var(--org-position);
  color: var(--org-on-position);
}

.assignee-badge.is-person {
  background: var(--color-surface);
  border-color: var(--color-border-hover);
  color: var(--color-text);
}

.assignee-badge.is-request {
  background: var(--assignee-request-bg);
  color: var(--assignee-request);
}

.picker-search {
  width: 100%;
}

/* The matches, grouped by type */
.picker-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: var(--picker-list-height);
  margin-top: 2px;
  padding: var(--space-xs) 0;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}

.picker-group {
  padding: var(--space-sm) var(--space-sm) 2px;
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.picker-option {
  grid-template-columns: max-content minmax(0, max-content) minmax(0, 1fr);
  padding-right: var(--space-sm);
  cursor: pointer;
}

.picker-option.is-active,
.picker-option:hover {
  background: var(--color-canvas);
}

.picker-option.is-active {
  box-shadow: inset 3px 0 0 var(--color-cobalt);
}

.picker-more {
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* In a dialog (which scrolls its own content) the matches push the buttons down instead of floating */
.dialog .picker-list {
  position: static;
  box-shadow: none;
}

/* <bpm-field>: a computed value (the process code sets it) and a lookup field's choices */
.field.is-computed input {
  background: var(--color-canvas);
  color: var(--color-text);
  font-weight: 600;
}

.field-computed {
  margin-left: var(--space-sm);
  padding: 0 var(--space-xs);
  border-radius: var(--radius);
  background: var(--org-position);
  color: var(--org-on-position);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

bpm-field .field {
  position: relative;
}

.field-choices {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  max-height: var(--picker-list-height);
  margin: 2px 0 0;
  padding: var(--space-xs) 0;
  overflow-y: auto;
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  text-transform: none;
  letter-spacing: 0;
}

.field-choices li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text);
  font-size: var(--text-body-sm);
  font-weight: 400;
  cursor: pointer;
}

.field-choices li:hover {
  background: var(--color-canvas);
}

.field-choice-detail,
.field-choices li.field-choice-none {
  color: var(--color-text-muted);
}

/* A table field: an editable grid of its columns */
.field.is-table {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.table-field {
  overflow-x: auto;
}

.table-editor {
  width: 100%;
  font-size: var(--text-body-sm);
}

.table-editor th,
.table-editor td {
  padding: 2px var(--space-xs);
}

.table-editor td input {
  width: 100%;
  min-width: 80px;
  padding: 4px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font: inherit;
}

.table-editor td input[type="checkbox"] {
  width: auto;
  min-width: 0;
}

.table-editor-actions {
  width: 32px;
}

.table-editor-remove {
  padding: 0 var(--space-xs);
  background: none;
  border: 0;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-body-lg);
  cursor: pointer;
}

.table-editor-remove:hover {
  color: var(--color-error);
}

.field-component-problem {
  margin-left: var(--space-sm);
  color: var(--status-pending);
  font-size: var(--text-label-sm);
  font-weight: 400;
}

/* <bpm-list>: a process page's list of records (the page designer writes it; rows come from a command). */
bpm-list {
  display: block;
  overflow-x: auto;
}

.bpm-list-note {
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}
/* ---- Page pieces (page.html written by the page designer or by hand; styles in page.css) --------- */

.bpm-heading {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-heading-sm);
}

h2.bpm-heading {
  font-size: var(--text-heading-md);
}

.bpm-note {
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--status-running);
  border-radius: var(--radius);
  background: var(--status-running-bg);
  color: var(--color-text-body);
  font-size: var(--text-body-sm);
}

.bpm-note.is-warning { border-left-color: var(--status-pending); background: var(--status-pending-bg); }
.bpm-note.is-success { border-left-color: var(--status-completed); background: var(--status-completed-bg); }
.bpm-note.is-error { border-left-color: var(--status-overdue); background: var(--status-overdue-bg); }

.bpm-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.bpm-link {
  color: var(--color-cobalt);
  font-weight: 600;
}

.bpm-spacer { height: var(--space-md); }
.bpm-spacer.is-s { height: var(--space-sm); }
.bpm-spacer.is-l { height: var(--space-xl); }

/* A row: columns side by side inside a section's grid (data-columns, items' data-span) */
.bpm-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}

.bpm-row[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bpm-row[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bpm-row[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bpm-row > [data-span="2"] { grid-column: span 2; }
.bpm-row > [data-span="3"] { grid-column: span 3; }

/* Tabs: <bpm-page> adds the strip; one section is shown at a time */
.bpm-tabs-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.bpm-tabs-strip button {
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.bpm-tabs-strip button[aria-selected="true"] {
  border-bottom-color: var(--color-cobalt);
  color: var(--color-cobalt);
}

.bpm-tabs > [data-bpm-section][hidden] {
  display: none;
}

@media (max-width: 720px) {
  .bpm-row,
  .bpm-row[data-columns] {
    grid-template-columns: minmax(0, 1fr);
  }

  .bpm-row > * {
    grid-column: auto;
  }
}

/* ---- A process's status chip (designers, Design list, Administration → Processes) ---- */
/* A process's status: On design / Active / Stopped (and new changes) */
/* Chips never break inside: when the toolbar is short the process name shortens ("…") instead. */
.design-state {
  flex: none;
  white-space: nowrap;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  font-weight: 600;
}

.design-state.is-ondesign {
  background: var(--status-pending-bg);
  color: var(--status-pending);
}

.design-state.is-changed {
  background: var(--scope-step-bg);
  color: var(--scope-step);
}

.design-state.is-active {
  background: var(--status-completed-bg);
  color: var(--status-completed);
}

.design-state.is-passive {
  background: var(--color-canvas);
  border: 1px solid var(--color-border-hover);
  color: var(--color-text-muted);
}

/* ---- Process settings (<bpm-process-settings>: Design list, Administration → Processes) ---- */
.settings-dialog {
  width: min(560px, calc(100vw - 2 * var(--space-lg)));
}

.settings-head h3 {
  margin: 0;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.settings-note {
  margin: 0;
}

/* The version new requests start on: the answer, as a card */
.version-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border-hover);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.version-card p {
  margin: 0;
}

.version-card.is-active {
  border-left-color: var(--status-completed);
}

.version-card.is-passive {
  border-left-color: var(--color-text-muted);
  background: var(--color-canvas);
}

.version-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

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

.version-changed {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  background: var(--scope-step-bg);
  color: var(--scope-step);
  font-size: var(--text-body-sm);
}

.version-stop {
  align-self: flex-end;
  color: var(--color-error);
}

.version-chip {
  flex: none;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-canvas);
  border: 1px solid var(--color-border-hover);
  font-size: var(--text-label-sm);
  font-weight: 700;
}

.version-chip.is-active {
  background: var(--status-completed-bg);
  border-color: var(--status-completed);
  color: var(--status-completed);
}

.version-chip.is-passive {
  color: var(--color-text-muted);
}

/* Every version, newest first */
.version-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.version-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.version-row .version-meta {
  flex: 1;
  min-width: 0;
}

.version-active.is-passive {
  color: var(--color-text-muted);
}

.version-active {
  color: var(--status-completed);
  font-size: var(--text-label-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* A confirmation in place, under what was clicked */
.confirm-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-tint);
  border: 1px solid var(--color-border-hover);
  font-size: var(--text-body-sm);
}

.confirm-bar p {
  margin: 0;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* A segmented switch (Linear): <bpm-design-tabs> (Flow | Pages of one process), a project's pages and the views. A quiet
   rounded track; the view you are on is a white pill in it, the others one click away. */
.design-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-tint);
}

.design-tabs a {
  padding: 5px 14px;
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: var(--text-body-sm);
  line-height: var(--leading-label-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition);
}

.design-tabs a:hover {
  background: var(--color-tint-hover);
  color: var(--color-primary);
  text-decoration: none;
}

.design-tabs a.is-active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--color-border);
  cursor: default;
}

/* ---- A process's identity (<bpm-process-id>, task and flow pages; Sally, 2026-10-04) ----
   One control with the header's buttons, as tall as they are: segments in one frame - the process's number (named),
   and on the task page the way to its flow. What the number is for is the tooltip. (No version - user decision
   2026-10-29.) */
.page-header-side {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.process-group {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}

/* Nothing to show yet (the start form): no empty frame. */
.process-group:not(:has(> :not([hidden]))) {
  display: none;
}

bpm-process-id {
  display: flex;
}

bpm-process-id[hidden] {
  display: none;
}

.process-id-cell {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: 9px var(--space-md);
}

.process-group-action {
  border-left: 1px solid var(--color-border-hover);
}

.process-id-label {
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.process-id-value {
  color: var(--color-primary);
  font-size: var(--text-label-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.process-group-action {
  display: flex;
  align-items: center;
  padding: 9px var(--space-md);
  color: var(--color-primary);
  font-size: var(--text-label-md);
  font-weight: 700;
  text-decoration: none;
}

.process-group-action:hover {
  background: var(--color-canvas);
  text-decoration: none;
}

.process-group-action[hidden] {
  display: none;
}

/* ---- Forms: two fields side by side (dates) ---- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ---- Home: delegations running now ---- */
.delegation-notes {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  list-style: none;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--status-running);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--text-body-sm);
}

/* ---- Administration lists: secondary text, what needs attention, who waits ---- */
.admin-muted {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.admin-muted.is-overdue {
  color: var(--status-overdue);
}

.admin-note {
  margin: 0;
  color: var(--scope-step);
  font-size: var(--text-body-sm);
}

.admin-note.is-error {
  color: var(--color-error);
}

.admin-waiting + .admin-waiting {
  margin-top: var(--space-sm);
}

.admin-waiting > strong {
  margin-right: var(--space-sm);
}

.admin-waiting > .admin-muted {
  display: inline;
}

.admin-people {
  margin: 0;
  font-size: var(--text-body-sm);
}

/* ---- Administration → Process monitor (Sally, 2026-10-04) ----
   By status (a segmented switch), then what needs attention (chips quiet at 0, loud otherwise), then how many.
   Rows in trouble carry a stripe on the left; why a step is stuck sits in a small red box. */
.monitor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
}

.monitor-count-badge {
  margin-left: var(--space-xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

.monitor-attention {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.monitor-attention > span:last-child {
  display: flex;
  gap: var(--space-sm);
}

.monitor-attention-label {
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monitor-chip {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-label-md);
  font-weight: 600;
  text-decoration: none;
}

.monitor-chip:hover {
  text-decoration: none;
  border-color: var(--color-border-hover);
}

.monitor-chip.is-stuck.has-some {
  border-color: var(--color-error);
  background: var(--color-error-bg);
  color: var(--color-error);
}

.monitor-chip.is-active {
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.monitor-take {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-label-md);
}

.monitor-count {
  margin: 0 0 var(--space-sm);
}

bpm-process-list tr.is-stuck td:first-child {
  box-shadow: inset 4px 0 0 var(--color-error);
}

.monitor-number {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.monitor-problem {
  margin: var(--space-xs) 0 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  background: var(--color-error-bg);
  color: var(--color-error);
  font-size: var(--text-body-sm);
}

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

.monitor-cancel:hover {
  color: var(--color-error);
}

/* ---- A process's step history: a second, quieter line under a cell (who can act now, when) ---- */
.history-note {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.history-note.is-error {
  color: var(--color-error);
}

/* Process monitor's filters: one process and/or a person, in one row above the views */
.monitor-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
}

.monitor-filters .field {
  min-width: 200px;
}

.monitor-person {
  flex: 1;
}

.monitor-filter-actions {
  display: flex;
  gap: var(--space-sm);
}

.monitor-filter-actions .btn-secondary:disabled {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  opacity: 0.6;
  cursor: default;
}

/* ---- Who can act on a waiting step (<bpm-step-delegations>: task page, Process monitor's settings) ---- */
bpm-step-delegations {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

bpm-step-delegations.card-pad {
  padding: var(--space-md) var(--space-lg);
}

.step-people-name {
  color: var(--color-text);
}

.step-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-person {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-tint);
}

.step-person.is-delegated {
  border-color: var(--status-running);
}

.step-person-name {
  font-weight: 600;
}

.step-person > .history-note {
  display: inline;
}

.step-person-tag {
  padding: 0 var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.step-person-tag.is-delegated {
  background: var(--status-running-bg);
  color: var(--status-running);
}

/* The designer's step timer (Sally, 2026-10-07): one sentence - "If nobody acts within [h] h [min] min, take
   [action]" - quick times under it, "Remove timer" last */
.timer-setting {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-tint);
}

.timer-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}

.timer-time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.timer-time input {
  width: 3.75rem;
}

.timer-sentence select {
  flex: 1 1 9rem;
  min-width: 0;
}

.timer-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.timer-presets button {
  padding: 0 var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-label-sm);
  cursor: pointer;
}

.timer-presets button:hover,
.timer-presets button:focus-visible {
  border-color: var(--flow-condition);
  color: var(--flow-condition);
}

.timer-add,
.timer-remove {
  justify-self: start;
}

/* Administration → Audit log (Sally, 2026-10-07): one card per save - when, who; its rows with a kind badge, the
   name, what happened; the changed fields as a small "old → new" list */
.audit-intro {
  max-width: 72ch;
  margin-top: 0;
}

.audit-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm) var(--space-md);
}

.audit-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.audit-person {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.audit-take {
  margin-left: auto;
}

.audit-list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-change {
  padding: var(--space-sm) var(--space-md);
}

.audit-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.audit-time {
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.audit-actor {
  font-weight: 600;
}

.audit-rows {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.audit-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
}

/* A sign-in event: where it came from (address · browser), small under it. */
.audit-from {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  overflow-wrap: anywhere;
}

.audit-kind {
  padding: 0 var(--space-xs);
  border-radius: var(--radius);
  background: var(--color-tint);
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

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

.audit-row.is-added .audit-op {
  color: var(--status-completed);
}

.audit-row.is-deleted .audit-op {
  color: var(--color-error);
}

.audit-fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0 var(--space-sm);
  margin: var(--space-xs) 0 0 var(--space-md);
  font-size: var(--text-label-sm);
}

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

.audit-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.audit-old {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* The start step's scheduled starts: one row each - the phrase, when it runs next, × (asks first) */
.schedule-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule-list:empty {
  display: none;
}

.schedule-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.schedule-item.is-stopped {
  border-color: var(--color-error);
}

.schedule-item > :not(.picker-remove) {
  grid-column: 1;
}

.schedule-item > .picker-remove {
  grid-column: 2;
  grid-row: 1;
}

.schedule-problem {
  color: var(--color-error);
}

.schedule-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.step-people-add {
  display: grid;
  gap: var(--space-xs);
}

/* Process monitor's settings: one block per waiting step; cancelling apart, on the left */
.settings-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.settings-step + .settings-step {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* A window's close button, top right of its header (the header is the positioning box) */
.settings-head {
  position: relative;
  padding-right: var(--space-xl);
}

.dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-heading-sm);
  line-height: 1;
  cursor: pointer;
}

.dialog-close:hover,
.dialog-close:focus-visible {
  background: var(--color-tint-hover);
  color: var(--color-text);
}

/* What cannot be undone sits apart, framed in red, its button naming exactly what it does */
.danger-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid var(--color-error);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-error) var(--tint-soft), var(--color-surface));
}

.danger-zone h4 {
  margin: 0;
  color: var(--color-error);
}

.danger-zone p {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--text-body-sm);
}

.btn-danger-outline {
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border: 1.5px solid var(--color-error);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-error);
  font: inherit;
  font-size: var(--text-label-md);
  font-weight: 700;
  cursor: pointer;
}

.btn-danger-outline:hover,
.btn-danger-outline:focus-visible {
  background: var(--color-error);
  color: var(--color-on-accent);
}

bpm-process-list {
  display: flex;
  flex-direction: column;
}

/* ---- Administration → Permissions (Sally, 2026-10-04): who has each permission (left), the chosen one (right) ---- */
.perm-layout {
  display: grid;
  grid-template-columns: minmax(280px, 2fr) minmax(340px, 3fr);
  gap: var(--space-lg);
  align-items: start;
}

.perm-list {
  padding: var(--space-md);
}

#rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* One menu section (Processes, Search, Administration), its groups inside */
.perm-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.perm-menu > .perm-group-title {
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.perm-menu .perm-group .perm-group-title {
  color: var(--color-text);
  font-size: var(--text-label-md);
  letter-spacing: 0;
  text-transform: none;
}

.perm-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.perm-group-title {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.perm-group > .history-note {
  margin: 0 0 var(--space-xs);
}

/* A permission and who has it */
.perm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.perm-row:hover {
  background: var(--color-tint-hover);
}

.perm-row.is-chosen {
  border-color: var(--color-primary);
  box-shadow: inset 4px 0 0 var(--color-primary);
}

.perm-row-name {
  font-weight: 600;
}

.perm-chip {
  flex: none;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  font-weight: 600;
  white-space: nowrap;
}

.perm-chip.is-everyone {
  background: var(--status-completed-bg);
  color: var(--status-completed);
}

.perm-chip.is-allowed {
  background: var(--status-running-bg);
  color: var(--status-running);
}

.perm-chip.is-admins {
  background: var(--color-canvas);
  color: var(--color-text-muted);
}

.perm-chip.is-general {
  border: 1px dashed var(--color-border-hover);
  color: var(--color-text-muted);
  font-style: italic;
}

/* The chosen permission */
.perm-rule {
  padding: var(--space-md) var(--space-lg);
}

#rule-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* The process's name, and "Check a person" on its right */
.perm-rule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-sm);
}

.perm-rule-head h2 {
  margin: 0;
}

/* Both answers for the chosen person, side by side */
.perm-verdicts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin: 0;
}

.perm-verdicts[hidden] {
  display: none;
}

/* One question per section: who can start it, who can edit it */
.perm-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.perm-section[hidden] {
  display: none;
}

.perm-section h3 {
  margin: 0;
  font-size: var(--text-label-md);
}

.perm-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* Who can edit it: given rarely, folded to one quiet line until opened */
.perm-edit {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.perm-edit > summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.perm-edit > summary h3 {
  display: inline;
  color: var(--color-text-muted);
}

.perm-edit[open] > summary h3 {
  color: var(--color-text);
}

.perm-edit-summary {
  font-size: var(--text-label-sm);
}

.perm-edit .perm-section-head p {
  margin: 0;
}

/* Under the start list: the way to change it */
.perm-start-edit {
  align-self: flex-start;
}

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

.perm-general {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius);
  background: var(--color-tint);
}

.perm-general p {
  margin: 0;
}

/* The list, compact: one box, one line per entry (green edge allowed, red edge left out), adding as its last row */
.perm-who {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: visible;
}

.perm-exceptions {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.perm-exception {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  border-left: 3px solid var(--status-completed);
}

.perm-exception.is-deny {
  border-left-color: var(--color-error);
}

.perm-exception-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.perm-exception-name strong {
  font-weight: 600;
}

.perm-exception-name .history-note {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allowed / Left out: a chip that flips */
.perm-toggle {
  flex: none;
  margin-left: auto;
  padding: 0 var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font: inherit;
  font-size: var(--text-label-sm);
  font-weight: 700;
  cursor: pointer;
}

.perm-toggle.is-allow {
  background: var(--status-completed-bg);
  color: var(--status-completed);
}

.perm-toggle.is-deny {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.perm-toggle:hover:not(:disabled),
.perm-toggle:focus-visible {
  border-color: currentColor;
  outline: none;
}

.perm-toggle:disabled {
  cursor: default;
}

.perm-exception .step-person-remove {
  opacity: 0.5;
}

.perm-exception:hover .step-person-remove,
.perm-exception .step-person-remove:focus-visible {
  opacity: 1;
}

.perm-none {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}


/* Who can start it: the start step's list, read here, changed in the start step */
.perm-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.perm-box[hidden] {
  display: none;
}

.perm-box .perm-exception .history-note {
  margin-left: auto;
}

/* The organization's colour code: navy department, cobalt position, plain person */
.perm-level {
  flex: none;
  padding: 0 var(--space-xs);
  border-radius: var(--radius);
  font-size: var(--text-label-sm);
  font-weight: 700;
}

.perm-level.is-department {
  background: var(--org-department);
  color: var(--org-on-department);
}

.perm-level.is-position {
  background: var(--org-position);
  color: var(--org-on-position);
}

.perm-level.is-user {
  border: 1px solid var(--color-border-hover);
  color: var(--color-text-muted);
}

/* Adding in one step: type, pick */
.perm-add {
  position: relative;
}

.perm-add[hidden] {
  display: none;
}

.perm-add input {
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.perm-results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}

.perm-result {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  cursor: pointer;
}

.perm-result:hover {
  background: var(--color-tint-hover);
}

.perm-result > .history-note {
  display: inline;
}

.perm-result-empty {
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-text-muted);
}

/* Check a person: quiet, beside the process's name */
.perm-check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.perm-verdict {
  padding: 0 var(--space-sm);
  border-radius: var(--radius-full);
  font-size: var(--text-label-sm);
  font-weight: 700;
}

.perm-verdict.is-yes {
  background: var(--status-completed-bg);
  color: var(--status-completed);
}

.perm-verdict.is-no {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.perm-verdicts > .history-note {
  margin: 0;
}

/* ---- List pages of the processes' data (data.html) and <bpm-tree> -------------------------------------------- */
.data-search {
  margin-left: auto;
  min-width: 220px;
}

.data-card {
  padding: 0;
  overflow-x: auto;
}

/* Many columns (a stock report): every column fits the page, so the cells are as tight as they can be (user,
   2026-10-09: space is precious). Headings and text (a name) wrap; codes, numbers and the buttons never do. */
.tree-table th,
.tree-table td {
  padding: calc(var(--space-xs) / 2) var(--space-xs);
}

.tree-table th {
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  vertical-align: bottom;
}

.tree-table .tree-num {
  width: auto;
  white-space: nowrap;
}

/* A row opens in place: its first cell is indented by its depth, with ▸ / ▾ before it. */
.tree-table .tree-first {
  padding-left: calc(var(--space-xs) + var(--tree-depth, 0) * var(--space-md));
  white-space: nowrap;
}

.tree-toggle,
.tree-leaf {
  display: inline-block;
  width: 14px;
  margin-right: calc(var(--space-xs) / 2);
  text-align: center;
}

.tree-toggle {
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
}

.tree-toggle:hover,
.tree-toggle:focus-visible,
.tree-openable:hover .tree-toggle {
  color: var(--color-cobalt);
}

/* A row that opens: a click anywhere on it opens it (tree.ts) */
.tree-openable {
  cursor: pointer;
}

.tree-table .tree-num {
  text-align: right;
}

.tree-table tr[data-depth]:not([data-depth="0"]) td {
  background: var(--color-tint);
}

/* ---- Menu groups (Design → Menu groups; a process's group in its settings) -------------------------------------- */
.groups-list {
  display: grid;
  gap: var(--space-xs);
}

.groups-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.groups-row input {
  flex: 1;
}

.groups-count {
  min-width: 90px;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.groups-move:disabled,
.groups-row .table-editor-remove:disabled {
  opacity: 0.35;
  cursor: default;
}

.groups-add {
  display: flex;
  align-items: flex-end;
  gap: var(--space-sm);
}

.groups-add .field {
  flex: 1;
}

.settings-group {
  width: 100%;
}

/* ---- Files (images) in a form, and as a list's thumbnail -------------------------------------------------------- */
.files-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-xs) 0;
  padding: 0;
  list-style: none;
}

.files-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: 112px;
}

.files-item img {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: contain;
  background: var(--color-tint);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.files-item.is-main img {
  border-color: var(--color-cobalt);
}

.files-main {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: 0 var(--space-xs);
  border-radius: var(--radius);
  background: var(--color-cobalt);
  color: var(--color-text-inverse);
  font-size: var(--text-label-sm);
}

.files-tools {
  display: flex;
  justify-content: space-between;
}

.files-tool {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  min-width: 28px;
}

.files-tool:hover:not(:disabled) {
  color: var(--color-cobalt);
  border-color: var(--color-border-hover);
}

.files-tool:disabled {
  opacity: 0.35;
  cursor: default;
}

.files-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  padding: var(--space-xs);
  overflow-wrap: anywhere;
  text-align: center;
  background: var(--color-tint);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.files-empty {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.tree-thumb img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: var(--color-tint);
  border-radius: var(--radius);
}

/* A tree in a page (a report): as wide as the page, scrolling sideways inside it when its columns are more. */
bpm-tree {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

/* A list row's buttons: start a process from the row (Count, Order, Make…). The column stays at the right edge
   while the table scrolls sideways, so the buttons are always in reach. Their colour is the design's: a page's CSS sets
   --row-action (and --row-action-ink, the text) on the tree or on one button (.tree-link[data-action="Sell"]). */
.tree-links,
.tree-links-head {
  position: sticky;
  right: 0;
  background: var(--color-surface);
  box-shadow: -1px 0 0 var(--color-border);
}

.tree-table tr[data-depth]:not([data-depth="0"]) td.tree-links {
  background: var(--color-tint);
}

.tree-links {
  white-space: nowrap;
  text-align: right;
}

.tree-link {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 0 var(--space-sm);
  border: 1px solid var(--row-action, var(--color-cobalt));
  border-radius: var(--radius);
  background: var(--row-action, var(--color-cobalt));
  color: var(--row-action-ink, var(--color-on-primary));
  font-size: var(--text-label-sm);
  font-weight: 600;
  line-height: 1.6;
}

.tree-link:first-child {
  margin-left: 0;
}

/* Under the pointer: the same colour, darker. */
.tree-link:hover,
.tree-link:focus-visible {
  border-color: color-mix(in srgb, var(--row-action, var(--color-cobalt)) 80%, var(--color-primary));
  background: color-mix(in srgb, var(--row-action, var(--color-cobalt)) 80%, var(--color-primary));
  color: var(--row-action-ink, var(--color-on-primary));
  text-decoration: none;
}

/* ---- Reports: a list's downloads, the Report mark in the Design list ------------------------------------------------ */
.bpm-downloads {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin: var(--space-xs) 0;
}

.report-chip {
  margin-left: var(--space-sm);
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  font-weight: 600;
}

/* <bpm-diagram>: a tree drawn top-down in a zoomable box (Sally, 2026-10-09). Its own drawing - not the organization
   chart's - so its look changes on its own (--diagram-* tokens). The top node dark, a node with children on a band, a
   leaf plain; each line enters its child from the top; siblings with nothing under them hang in one column. */
bpm-diagram {
  display: block;
  min-width: 0;
}

.diagram-zoom {
  margin-bottom: var(--space-xs);
}

.diagram-zoom button[data-zoom="reset"] {
  min-width: 52px;
}

.diagram-view {
  height: var(--diagram-height);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-canvas);
}

.diagram-tree,
.diagram-children,
.diagram-column {
  margin: 0;
  padding: 0;
  list-style: none;
}

.diagram-tree {
  display: flex;
  justify-content: center;
  width: max-content;
  padding: var(--space-md);
}

.diagram-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Side by side: a line down from the parent, a bar across, a line down into each child. */
.diagram-children {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: var(--diagram-line-gap);
}

.diagram-children::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: var(--diagram-line-gap);
  border-left: var(--diagram-line);
}

.diagram-children > .diagram-item {
  padding: var(--diagram-line-gap) var(--space-xs) 0;
}

.diagram-children > .diagram-item::before,
.diagram-children > .diagram-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: var(--diagram-line-gap);
  border-top: var(--diagram-line);
}

.diagram-children > .diagram-item::after {
  right: auto;
  left: 50%;
  border-left: var(--diagram-line);
}

.diagram-children > .diagram-item:only-child {
  padding-top: 0;
}

.diagram-children > .diagram-item:only-child::before,
.diagram-children > .diagram-item:only-child::after {
  display: none;
}

.diagram-children > .diagram-item:first-child::before,
.diagram-children > .diagram-item:last-child::after {
  border: 0;
}

.diagram-children > .diagram-item:last-child::before {
  border-right: var(--diagram-line);
}

/* One column: a line runs down through the gaps into the top of each child. */
.diagram-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.diagram-column > .diagram-item {
  padding-top: var(--diagram-line-gap);
}

.diagram-column > .diagram-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: var(--diagram-line-gap);
  border-left: var(--diagram-line);
}

.diagram-node {
  display: flex;
  flex-direction: column;
  width: var(--diagram-card-width);
  overflow: hidden;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}

.diagram-node.is-group {
  border-top: 3px solid var(--diagram-group);
}

.diagram-node.is-root {
  border: 1px solid var(--diagram-root);
  border-top: 6px solid var(--diagram-root);
}

a.diagram-node:hover,
a.diagram-node:focus-visible {
  border-color: var(--color-cobalt);
  text-decoration: none;
}

/* The image slot: the same height with or without an image, so the cards line up; the image is never cropped. */
.diagram-picture {
  position: relative;
  height: var(--diagram-picture-height);
  background: var(--color-canvas);
}

.diagram-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.diagram-badge {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  padding: 0 var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-cobalt);
  color: var(--color-on-primary);
  font-size: var(--text-label-sm);
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.diagram-title {
  padding: var(--space-xs) var(--space-sm) 0;
  font-size: var(--text-label-sm);
}

.diagram-text {
  display: -webkit-box;
  overflow: hidden;
  padding: 0 var(--space-sm) var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* A node's numbers (the stock): label left, value right; a zero one muted, Total strong and set apart by a line. */
.diagram-facts {
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-label-sm);
  line-height: 1.4;
}

.diagram-fact {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

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

.diagram-fact dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.diagram-fact.is-muted dd {
  color: var(--color-text-muted);
}

.diagram-fact.is-strong {
  margin-top: 2px;
  padding-top: 2px;
  border-top: 1px solid var(--color-border);
  font-weight: 700;
}

.diagram-fact.is-strong dt {
  color: var(--color-text);
}

.diagram-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

/* ---- <bpm-process-family>: a process among the processes that started each other (Sally, 2026-10-12) ----
   An indented list read from the top: parents, this process (tinted), the sub-processes under it. The indent
   and the word at the row's start both say what a row is; the number opens the process. */
bpm-process-family {
  display: block;
}

.family {
  list-style: none;
  margin: 0;
  padding: var(--space-sm) var(--space-lg) var(--space-md);
}

.family-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  padding-left: calc(var(--space-sm) + var(--family-depth, 0) * var(--space-lg));
  border-radius: var(--radius);
  color: var(--color-text-body);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.family-row.is-current {
  background: var(--color-tint);
  color: var(--color-text);
  font-weight: 600;
}

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

.family-role {
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.family-row.is-current .family-role {
  color: var(--color-cobalt);
}

.family-number {
  color: var(--color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

a.family-number {
  color: var(--color-cobalt);
}

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

/* Mentions (the chat and the work tracker): "@Name" in a text, and the "@" list over a writing box (MentionPicker;
   its box's container is positioned). */
.mention {
  padding: 0 2px;
  border-radius: var(--radius);
  background: var(--chat-mention-bg);
  color: var(--chat-mention);
  font-weight: 600;
}

.mention.is-me {
  background: var(--chat-mention-me-bg);
  color: var(--chat-mention-me);
}

/* "@": the people to mention, over the box. */
.mention-menu {
  position: absolute;
  bottom: 100%;
  left: var(--space-lg);
  z-index: 10;
  width: var(--mention-menu-width);
  max-width: calc(100% - 2 * var(--space-lg));
  margin: 0 0 var(--space-xs);
  padding: var(--space-xs) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  list-style: none;
}

.mention-option {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
}

.mention-option[aria-selected="true"],
.mention-option:hover {
  background: var(--chat-active-bg);
}

.mention-option-name {
  color: var(--color-text);
  font-size: var(--text-body-sm);
  font-weight: 600;
}

.mention-option-detail {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Notifications (Sally, 2026-10-27; not a page of their own): the panel the user menu's Notifications row opens under the
   person's picture at the top right (2026-10-31), over any page - one row a notification (who, what happened, on which ticket, the start of the text, when; the
   ones since the last look tinted with an edge) - and the notes a new one leaves in the screen's corner. */
.notice-panel {
  position: fixed;
  top: calc((var(--topbar-height) + var(--user-menu-size)) / 2 + var(--space-xs));
  right: var(--space-md);
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--notice-width);
  max-width: calc(100vw - 2 * var(--space-md));
  max-height: calc(100vh - (var(--topbar-height) + var(--user-menu-size)) / 2 - var(--space-xs) - var(--space-md));
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
}

.notice-panel[hidden],
.notice-list[hidden] {
  display: none;
}

.notice-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.notice-head h2 {
  margin: 0;
  font-size: var(--text-heading-sm);
}

.notice-close {
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: var(--text-heading-sm);
  line-height: 1;
  cursor: pointer;
}

.notice-panel > .btn-link {
  align-self: flex-start;
  margin: var(--space-sm) var(--space-md) 0;
}

.notice-problem {
  margin: var(--space-sm) var(--space-md) 0;
  color: var(--color-error);
  font-size: var(--text-body-sm);
}

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

.notice + .notice {
  border-top: 1px solid var(--color-border);
}

.notice-link,
.notice-toast-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-sm) var(--space-md);
  align-items: start;
  padding: var(--space-md);
  color: inherit;
  text-decoration: none;
}

.notice-link:hover {
  background: var(--color-tint);
}

.notice-link:focus-visible,
.notice-toast-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -2px;
}

.notice.is-unread .notice-link {
  background: var(--notice-unread-bg);
  box-shadow: inset 3px 0 0 var(--notice-unread-edge);
}

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

.notice-body p {
  margin: 0;
}

.notice-title {
  color: var(--color-text);
  font-size: var(--text-body-sm);
}

.notice.is-unread .notice-title {
  font-weight: 600;
}

.notice-ticket {
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.notice-body .notice-text {
  margin-top: var(--space-xs);
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-label-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notice-when {
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  white-space: nowrap;
}

.notice-empty {
  margin: 0;
  padding: var(--space-lg) var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.notice-more {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  text-align: center;
}

.notice-more:has(> [hidden]) {
  display: none;
}

.notice-toasts {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: var(--notice-toast-width);
  max-width: calc(100vw - 2 * var(--space-md));
}

.notice-toast {
  display: flex;
  align-items: flex-start;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--notice-unread-edge);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}

.notice-toast-link {
  flex: 1;
  grid-template-columns: auto 1fr;
  min-width: 0;
}

.notice-toast .notice-close {
  padding: var(--space-sm);
}

@media (max-width: 768px) {
  .notice-panel {
    left: var(--space-sm);
    right: var(--space-sm);
    width: auto;
    max-width: none;
  }
}

/* ---- The signed-in person, top right on every page (<bpm-user-menu>; Sally, 2026-10-27) ----
   A round button with their initials; its panel: who they are, then what is theirs to do. The pages' top bars leave it
   room (--user-menu-reserve). */
bpm-user-menu {
  position: fixed;
  top: calc((var(--topbar-height) - var(--user-menu-size)) / 2);
  right: var(--space-md);
  z-index: 40;
}

.user-menu-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--user-menu-size);
  height: var(--user-menu-size);
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

.user-menu-button:hover,
.user-menu-button[aria-expanded="true"] {
  border-color: var(--color-cobalt);
}

.user-menu-button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* The notifications' count on the picture (Sally, 2026-10-31): the menu's red count at its top right, ringed in white so
   it stands off the picture; the status's dot stays at the bottom right. */
.user-menu-button > .nav-badge {
  position: absolute;
  top: calc(-1 * var(--space-xs));
  right: calc(-1 * var(--space-xs));
  margin: 0;
  box-shadow: 0 0 0 2px var(--color-surface);
}

.user-menu-button .avatar,
.avatar.is-large {
  width: calc(var(--user-menu-size) - 6px);
  height: calc(var(--user-menu-size) - 6px);
  font-size: var(--text-label-sm);
}

.user-menu-panel {
  position: absolute;
  top: calc(100% + var(--space-xs));
  right: 0;
  display: flex;
  flex-direction: column;
  width: var(--user-menu-width);
  max-width: calc(100vw - 2 * var(--space-md));
  padding-bottom: var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-modal);
}

.user-menu-who {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
}

/* Who they are is the way to their Profile (user decision 2026-10-29). */
.user-menu-who:hover,
.user-menu-who:focus-visible {
  background: var(--color-canvas);
}

.user-menu-who:focus-visible {
  outline: var(--focus-outline);
  outline-offset: -2px;
}

.user-menu-profile {
  margin-top: var(--space-xs);
  color: var(--color-cobalt);
  font-size: var(--text-label-sm);
  font-weight: 600;
}

.user-menu-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

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

.user-menu-email,
.user-menu-place {
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  overflow-wrap: anywhere;
}

/* The administrator's badge (the user menu, the Profile): the organization chart's yellow mark. */
.admin-badge {
  align-self: flex-start;
  margin-top: var(--space-xs);
  padding: 1px var(--space-sm);
  border: 1px solid var(--org-admin-edge);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--org-admin) 30%, var(--color-surface));
  color: var(--color-text);
  font-size: var(--text-eyebrow);
  font-weight: 700;
}

.user-menu-item {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  background: none;
  color: var(--color-text-body);
  font: inherit;
  font-size: var(--text-body-sm);
  text-align: left;
  cursor: pointer;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: var(--color-canvas);
  color: var(--color-text);
  outline: none;
  text-decoration: none;
}

/* Notifications, the panel's first row: the bell, the word, the count at its end (or "All caught up"). */
.user-menu-notices {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 600;
}

.user-menu-icon {
  flex: none;
  width: var(--nav-icon);
  height: var(--nav-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--notice-bell);
}

.user-menu-quiet {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  font-weight: 400;
}

.user-menu-line {
  width: 100%;
  margin: var(--space-xs) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* Two-step sign-in's setup: the code to scan, the key to type, the recovery codes to keep. */
.user-qr {
  align-self: center;
  width: var(--user-qr-size);
  height: var(--user-qr-size);
  image-rendering: pixelated;
}

.user-key {
  align-self: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  background: var(--color-canvas);
  color: var(--color-text);
  font-size: var(--text-body-sm);
  letter-spacing: 0.06em;
  user-select: all;
}

.user-codes {
  margin: 0;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl);
  columns: 2;
  border-radius: var(--radius);
  background: var(--color-canvas);
  color: var(--color-text);
  font-size: var(--text-body-sm);
  letter-spacing: 0.04em;
  user-select: all;
}

/* The user menu's status choices: a dot, the name, the chosen one marked. */
.user-menu-status {
  display: flex;
  flex-direction: column;
}

.user-menu-choice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.user-menu-dot {
  flex: none;
}

.user-menu-choice[aria-checked="true"] {
  color: var(--color-text);
  font-weight: 700;
}

.user-menu-choice[aria-checked="true"]::after {
  content: "✓";
  margin-left: auto;
  color: var(--color-cobalt);
}

/* ---- Profile (profile.html; user decision 2026-10-29, Sally): on the left who they are with their picture, on the
   right their settings, a card each; one column on a narrow screen. ---- */
.profile-layout {
  display: grid;
  grid-template-columns: var(--profile-side) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}

/* Who they are: a light band, the picture over it, the facts centred under it. */
.profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-lg) var(--space-lg);
  overflow: hidden;
  text-align: center;
}

.profile-band {
  align-self: stretch;
  height: var(--profile-band);
  margin: 0 calc(-1 * var(--space-lg));
  background: linear-gradient(135deg, var(--color-tint) 0%, color-mix(in srgb, var(--color-cobalt) 18%, var(--color-surface)) 100%);
}

/* An image may be dropped on the picture: a dashed cobalt ring says it will be taken. */
.profile-avatar {
  margin-top: calc(-1 * var(--profile-picture-size) / 2);
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-full);
  outline: 2px dashed transparent;
  outline-offset: 4px;
}

.profile-avatar.is-drop {
  outline-color: var(--color-cobalt);
}

.profile-avatar .avatar {
  width: var(--profile-picture-size);
  height: var(--profile-picture-size);
  border: 4px solid var(--color-surface);
  box-shadow: var(--shadow-1);
  font-size: var(--text-heading-md);
}

.profile-name {
  margin: 0;
  font-size: var(--text-heading-md);
  line-height: var(--leading-heading-md);
  overflow-wrap: anywhere;
}

.profile-line {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  overflow-wrap: anywhere;
}

.profile-identity .admin-badge {
  align-self: center;
}

.profile-picture-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.profile-button {
  padding: 7px var(--space-md);
  font-size: var(--text-label-sm);
  white-space: nowrap;
}

.profile-note {
  align-self: stretch;
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  line-height: var(--leading-label-sm);
}

.profile-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.profile-header-line {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

/* A setting: its icon, what it is (with its state) and a line about it, its button. */
.profile-setting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.profile-setting + .profile-setting {
  border-top: 1px solid var(--color-border);
}

.profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--profile-icon);
  height: var(--profile-icon);
  border-radius: var(--radius-lg);
  background: var(--color-tint);
  color: var(--color-cobalt);
}

.profile-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-setting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.profile-setting-text > strong {
  color: var(--color-text);
}

.profile-setting-text > span {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

/* Two-step sign-in On / Off: a word on a tone, as the statuses are. */
.profile-state {
  margin-left: var(--space-sm);
  padding: 1px var(--space-sm);
  border-radius: var(--radius);
  color: var(--status-cancelled);
  background: var(--status-cancelled-bg);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.profile-state[data-on="true"] {
  color: var(--status-completed);
  background: var(--status-completed-bg);
}

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

@media (max-width: 560px) {
  .profile-setting {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .profile-setting .profile-button {
    grid-column: 2;
    justify-self: start;
  }
}

/* Everyone, and a department with its sub-departments, in a permission rule (0054) */
.perm-level.is-everyone,
.perm-level.is-departmenttree {
  background: var(--org-department);
  color: var(--org-on-department);
}

/* A project's three rules (Sally, 2026-10-30): each section in its colour - see blue, work teal, administer indigo -
   as on the project's Settings */
.perm-edit[data-code^="project."] {
  --tone: var(--org-tone-1);
  border-left: 4px solid var(--tone);
  padding-left: var(--space-md);
}

.perm-edit[data-code="project.work"]  { --tone: var(--org-tone-6); }
.perm-edit[data-code="project.admin"] { --tone: var(--org-tone-7); }

.perm-edit[data-code^="project."] > summary h3 {
  color: var(--tone);
}

/* A project's code as a badge (the project bar, the Permissions list) */
.project-code {
  flex: none;
  padding: 2px var(--space-sm);
  border-radius: var(--radius);
  background: var(--color-accent-ink);
  color: var(--color-on-accent);
  font-family: var(--font-heading);
  font-size: var(--text-label-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.perm-row .project-code {
  font-size: var(--text-eyebrow);
}

/* The start form opened from a ticket: which ticket the process will keep */
.origin-note {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border-left: var(--space-xs) solid var(--org-tone-6);
  border-radius: var(--radius);
  background: var(--org-tone-6-bg);
  color: var(--color-text);
  font-size: var(--text-body-sm);
}

/* The server's address is missing or not where the page is open (address-notice.ts): a strip at the foot of the page,
   on the sign-in page and for administrators; it stays until it is hidden or the address is put right. */
.address-notice {
  position: fixed;
  left: 50%;
  bottom: var(--space-md);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: min(var(--address-notice-width), calc(100% - 2 * var(--space-md)));
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--address-notice);
  border-radius: var(--radius-lg);
  background: var(--address-notice-bg);
  color: var(--address-notice);
  box-shadow: var(--shadow-2);
  transform: translateX(-50%);
}
.address-notice p {
  flex: 1;
  margin: 0;
}
.address-notice-close {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 1.25em;
  line-height: 1;
  cursor: pointer;
}