/* Work tracking (projects and their tickets): the project bar every project page shares, the chips of a ticket,
   the board, the backlog and the ticket page. Linked by the project pages only. Values come from tokens.css. */

/* ---- The project bar (<bpm-project-tabs>): which project, its pages, its main action ---- */
bpm-project-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}

.project-name {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  margin-right: auto;
}

.project-name h1 {
  margin: 0;
  font-size: var(--text-heading-md);
  line-height: var(--leading-heading-md);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- A ticket's chips (Jira's colours): its status (the category's colour, a dot and the word), its type (a coloured
   square by its kind), its key, the ticket it is under ---- */
.ticket-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--pill-height);
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--ticket-todo-bg);
  color: var(--ticket-todo);
  font: inherit;
  font-family: var(--font-heading);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  --ticket-dot: var(--ticket-todo-dot);
}

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

.ticket-status[data-category="InProgress"] {
  background: var(--ticket-progress-bg);
  color: var(--ticket-progress);
  --ticket-dot: var(--ticket-progress);
}

.ticket-status[data-category="Done"] {
  background: var(--ticket-done-bg);
  color: var(--ticket-done);
  --ticket-dot: var(--ticket-done-dot);
}

.ticket-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-body);
  font-size: var(--text-label-sm);
  font-weight: 600;
  white-space: nowrap;
  --ticket-type: var(--ticket-standard);
}

/* The type's square: a standard ticket blue ✓, a sub-task teal ↳, an epic violet ⚡ */
.ticket-type::before {
  content: "✓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ticket-type-mark);
  height: var(--ticket-type-mark);
  border-radius: var(--radius-sm);
  background: var(--ticket-type);
  color: var(--color-on-primary);
  font-size: var(--ticket-type-glyph);
  font-weight: 700;
  line-height: 1;
}

.ticket-type[data-kind="SubTask"] {
  --ticket-type: var(--ticket-subtask);
}

.ticket-type[data-kind="SubTask"]::before {
  content: "↳";
}

.ticket-type[data-kind="Epic"] {
  color: var(--ticket-epic);
  --ticket-type: var(--ticket-epic);
}

.ticket-type[data-kind="Epic"]::before {
  content: "⚡";
}

.ticket-key {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-label-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ticket-parent {
  align-self: flex-start;
  max-width: 100%;
  padding: 1px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--ticket-epic-bg);
  color: var(--ticket-epic);
  font-size: var(--text-label-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A ticket's story points and its priority, on a card and in a row */
.ticket-points {
  flex: none;
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-tint-hover);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-label-sm);
  font-weight: 700;
  text-align: center;
}

/* The priority: three bars and its name in its level's colour (PriorityLevel: 1 red ... 5 grey) */
.ticket-priority {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--space-sm) 0 6px;
  border-radius: var(--radius-full);
  background: var(--priority-bg, var(--color-tint));
  color: var(--priority, var(--color-text-muted));
  font-size: var(--text-label-sm);
  line-height: var(--pill-height);
  font-weight: 600;
  white-space: nowrap;
}

.ticket-priority::before {
  content: "";
  flex: none;
  width: var(--priority-mark);
  height: var(--priority-mark);
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 2px 40% no-repeat,
    linear-gradient(currentColor, currentColor) 50% 100% / 2px 70% no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 2px 100% no-repeat;
}

.ticket-priority[data-level="1"] { --priority: var(--priority-1); --priority-bg: var(--priority-1-bg); }
.ticket-priority[data-level="2"] { --priority: var(--priority-2); --priority-bg: var(--priority-2-bg); }
.ticket-priority[data-level="3"] { --priority: var(--priority-3); --priority-bg: var(--priority-3-bg); }
.ticket-priority[data-level="4"] { --priority: var(--priority-4); --priority-bg: var(--priority-4-bg); }
.ticket-priority[data-level="5"] { --priority: var(--priority-5); --priority-bg: var(--priority-5-bg); }

/* ---- Board: the page is as tall as the screen; the columns scroll inside it ---- */
body[data-screen="board"] .content {
  height: 100vh;
}

body[data-screen="board"] .page {
  flex: 1;
  min-height: 0;
  max-width: none;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
  gap: var(--space-md);
}

.board-warning {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--ticket-warning);
  border-radius: var(--radius);
  background: var(--ticket-warning-bg);
  color: var(--color-text);
  font-size: var(--text-body-sm);
}

.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  color: var(--color-text-body);
  font-size: var(--text-body-sm);
}

.board-toolbar input[type="search"],
.board-toolbar select {
  min-height: var(--button-height);
  padding: 6px 12px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.board-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.board-toolbar .save-status {
  margin-left: auto;
}

/* The people on the board: a click shows only that person's cards */
.board-people {
  display: flex;
  gap: var(--space-xs);
}

.board-people button {
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
}

.board-people button[aria-pressed="true"] .avatar {
  background: var(--color-cobalt);
  color: var(--color-on-primary);
}

.board {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
}

/* A column (Pipefy): a quiet lane with a line in its category's colour on top; its name in that colour with a dot,
   its count in a small pill */
.board-column {
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--board-column-width);
  min-height: 0;
  border: 1px solid var(--color-border);
  border-top: var(--board-column-edge) solid var(--column-color);
  border-radius: var(--radius-lg);
  background: var(--board-column-bg);
  --column-color: var(--ticket-todo-dot);
  --column-ink: var(--ticket-todo);
}

.board-column[data-category="InProgress"] {
  --column-color: var(--ticket-progress);
  --column-ink: var(--ticket-progress);
}

.board-column[data-category="Done"] {
  --column-color: var(--ticket-done-dot);
  --column-ink: var(--ticket-done);
}

.board-column > header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md) var(--space-xs);
  color: var(--column-ink);
  font-family: var(--font-heading);
  font-size: var(--text-label-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.board-column-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-column-name::before {
  content: "";
  flex: none;
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--column-color);
}

.board-count {
  flex: none;
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 700;
  line-height: var(--chat-badge-size);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* While a card is dragged: the columns it may go to say in their heading what dropping there does; the others fade.
   The hint is always laid out and only hidden, and the heading never wraps: nothing moves when a drag starts (a
   browser ends a drag whose card is no longer under the pointer). */
.board-drop-hint {
  flex: 0 100 auto;
  min-width: 0;
  margin-left: auto;
  padding: 0 var(--space-sm);
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  visibility: hidden;
}

.board-column.is-drop-target {
  border-color: var(--color-accent);
  outline: 2px dashed var(--color-accent);
  outline-offset: -2px;
}

.board-column.is-drop-target .board-drop-hint {
  visibility: visible;
}

.board.is-dragging .board-column:not(.is-drop-target) {
  opacity: 0.45;
}

.board-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: var(--space-xl);
  margin: 0;
  padding: var(--space-sm);
  overflow-y: auto;
  list-style: none;
}

.board-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 12px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--ticket-todo-dot);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--transition);
}

.board-card[data-category="InProgress"] {
  border-left-color: var(--ticket-progress);
}

.board-card[data-category="Done"] {
  border-left-color: var(--ticket-done-dot);
}

.board-card[draggable="true"] {
  cursor: grab;
}

.board-card:hover {
  box-shadow: var(--shadow-2);
}

.board-card[hidden] {
  display: none;
}

.board-card.is-dragging {
  opacity: 0.45;
}

/* Where the dragged card will land: a bar above or below the card under the pointer */
.board-card.is-drop-before {
  box-shadow: 0 -3px 0 var(--color-cobalt);
}

.board-card.is-drop-after {
  box-shadow: 0 3px 0 var(--color-cobalt);
}

.board-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  font-weight: 600;
}

.board-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--space-sm);
}

.board-card-foot .avatar {
  margin-left: auto;
}

.board-card[data-category="Done"] .ticket-key {
  text-decoration: line-through;
}

.board-add {
  align-self: flex-start;
  margin: 0 var(--space-sm) var(--space-sm);
}

/* The running sprint, over the board: which one, when it ends, what it is for */
.sprint-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--ticket-progress);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-body-sm);
}

.sprint-goal {
  flex: 1;
  min-width: 0;
  color: var(--color-text-body);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sprint-strip .btn-secondary,
.backlog-actions .btn-secondary {
  min-height: var(--button-height-compact);
  padding: 0 var(--button-pad-compact);
}

/* ---- Backlog: a section for each open sprint, then the tickets planned nowhere; rows are dragged ---- */
.backlog {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.backlog-section > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-tint);
  cursor: pointer;
  list-style: none;
}

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

.backlog-section > summary::before {
  content: "▸";
  width: 1em;
  color: var(--color-text-muted);
}

.backlog-section[open] > summary {
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.backlog-section[open] > summary::before {
  content: "▾";
}

.backlog-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  min-width: 0;
  margin-right: auto;
}

.backlog-heading strong {
  color: var(--color-text);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

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

.backlog-meta.is-overdue {
  color: var(--status-overdue);
  font-weight: 600;
}

.backlog-running {
  padding: 1px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--ticket-progress);
  color: var(--color-on-primary);
  font-size: var(--text-label-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A sprint's tickets by where they stand (to do, in progress, done), then its points */
.backlog-sums,
.backlog-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.backlog-actions {
  gap: var(--space-sm);
}

.backlog-more {
  font-size: var(--text-body-md);
  line-height: 1;
}

.backlog-goal {
  margin: 0;
  padding: var(--space-sm) var(--space-md) 0;
  color: var(--color-text-body);
  font-size: var(--text-body-sm);
  font-style: italic;
}

.backlog-section > .confirm-bar {
  margin: var(--space-sm) var(--space-md) 0;
}

.backlog-rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-xs) 0;
  list-style: none;
}

.backlog-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-md);
  font-size: var(--text-body-sm);
}

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

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

.backlog-row[draggable="true"] {
  cursor: grab;
}

.backlog-row.is-dragging {
  opacity: 0.45;
}

/* Where the dragged ticket will land: a bar above or below the row under the pointer */
.backlog-row.is-drop-before {
  box-shadow: inset 0 3px 0 var(--color-cobalt);
}

.backlog-row.is-drop-after {
  box-shadow: inset 0 -3px 0 var(--color-cobalt);
}

.backlog-row .ticket-type {
  flex: none;
  width: var(--backlog-type-width);
  overflow: hidden;
  text-overflow: ellipsis;
}

.backlog-row .ticket-key {
  flex: none;
  width: var(--backlog-key-width);
}

.backlog-row-title {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backlog-row[data-category="Done"] .backlog-row-title {
  color: var(--color-text-muted);
  text-decoration: line-through;
}

.backlog-row .ticket-parent {
  flex: none;
  align-self: center;
  max-width: var(--backlog-chip-width);
}

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

.backlog-section.is-drop-target {
  outline: 2px dashed var(--color-accent);
  outline-offset: -2px;
}

.backlog-add {
  margin: 0 var(--space-md) var(--space-sm);
}

/* The sprint window's shortcuts for its end day */
.sprint-weeks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

/* ---- Projects list and the New project / Create ticket windows ---- */
.dialog.is-wide {
  width: min(var(--dialog-width-ticket), calc(100vw - 2 * var(--space-md)));
}

.type-checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  color: var(--color-text);
  font-size: var(--text-body-md);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.type-checks label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.field-hint {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Ticket page ---- */
.ticket-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.ticket-crumbs .ticket-watch {
  margin-left: auto;
}

.ticket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ticket-side-width);
  align-items: start;
  gap: var(--space-lg);
}

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

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

.ticket-title {
  margin: 0;
  padding: 2px var(--space-xs);
  margin-left: calc(-1 * var(--space-xs));
  border-radius: var(--radius);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  overflow-wrap: anywhere;
}

.ticket-title[data-editable] {
  cursor: text;
}

.ticket-title[data-editable]:hover,
.ticket-title[data-editable]:focus-visible {
  background: var(--color-tint-hover);
}

.ticket-title-input {
  width: 100%;
  padding: 2px var(--space-xs);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  font-weight: 700;
}

.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.ticket-actions .btn-secondary {
  padding: 5px var(--space-md);
}

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

.ticket-section > h2 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.ticket-section > h2 .ticket-note,
.ticket-section > h2 .btn-link,
.ticket-section > h2 .design-tabs {
  margin-left: auto;
}

.ticket-note {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
  font-weight: 400;
}

.ticket-description {
  margin: 0;
  color: var(--color-text-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ticket-description.is-empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.ticket-editor {
  position: relative; /* the "@" list opens over the box */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ticket-editor .mention-menu,
.ticket-comment-form .mention-menu {
  left: 0;
  max-width: 100%;
}

.ticket-editor textarea,
.ticket-comment-form textarea {
  width: 100%;
  min-height: 96px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}

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

.ticket-file {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  width: var(--ticket-thumb-size);
  font-size: var(--text-label-sm);
}

.ticket-file img {
  width: var(--ticket-thumb-size);
  height: var(--ticket-thumb-size);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  object-fit: cover;
}

.ticket-file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-file button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  line-height: 1;
}

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

.ticket-list > li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.ticket-list > li:last-child {
  border-bottom: 0;
}

.ticket-child {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body-sm);
}

.ticket-child a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-add-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.ticket-comment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
}

.ticket-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.ticket-comment-head strong {
  color: var(--color-text);
}

.ticket-comment-head .btn-link:first-of-type {
  margin-left: auto;
}

.ticket-comment-body {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The comment a notification opened the page at. */
.ticket-comment.is-highlighted {
  background: var(--notice-unread-bg);
  box-shadow: inset 3px 0 0 var(--notice-unread-edge);
}

.ticket-comment-form {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
}

.ticket-history-line {
  color: var(--color-text-body);
  font-size: var(--text-body-sm);
}

.ticket-history-line strong {
  color: var(--color-text);
}

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

/* Details: the ticket's fields; each is a control that saves when it changes */
/* Beside the ticket: Details, then Time tracking */
.ticket-side {
  position: sticky;
  top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.ticket-details {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  margin: 0;
  padding: var(--space-md) var(--space-lg);
}

.ticket-details dt {
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ticket-details dd {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-body-sm);
}

.ticket-details select,
.ticket-details input {
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

/* When it was opened and last changed: under the fields, apart */
.ticket-times {
  border-top: 1px solid var(--color-border);
}

button.ticket-status {
  cursor: pointer;
}

button.ticket-status:disabled {
  cursor: default;
}

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

  .ticket-side {
    position: static;
  }
}

/* ---- Tickets: a project's tickets as a table (user decision 2026-10-30, Jira's list; Sally: Linear's quiet table with
   room to breathe). The toolbar is the board's; the table sits in a white card; each row carries its status's colour as
   a strip on its left (to do grey, in progress blue, done green); a heading sorts; status and assignee change in place ---- */
body[data-screen="tickets"] .page {
  display: grid;
  gap: var(--space-md);
  align-content: start;
}

.tickets-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.tickets-total {
  padding: 2px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-cobalt-soft);
  color: var(--color-cobalt);
  font-family: var(--font-heading);
  font-size: var(--text-label-sm);
  font-weight: 700;
}

.tickets-count label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.tickets-count select {
  padding: 4px 10px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font: inherit;
}

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

.tickets-table th button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.tickets-table th button:hover,
.tickets-table th[aria-sort] button {
  color: var(--color-cobalt);
}

.tickets-table th[aria-sort="ascending"] button::after {
  content: " ▲";
}

.tickets-table th[aria-sort="descending"] button::after {
  content: " ▼";
}

.tickets-table td {
  padding-top: 14px;
  padding-bottom: 14px;
}

.tickets-table tbody tr {
  cursor: pointer;
}

.tickets-table td:not(:first-child) {
  white-space: nowrap;
}

/* The row's status colour, a strip on its left edge */
.tickets-table tbody td:first-child {
  box-shadow: inset 3px 0 0 var(--ticket-todo-dot);
}

.tickets-table tbody tr[data-category="InProgress"] td:first-child {
  box-shadow: inset 3px 0 0 var(--ticket-progress);
}

.tickets-table tbody tr[data-category="Done"] td:first-child {
  box-shadow: inset 3px 0 0 var(--ticket-done-dot);
}

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

/* The Tickets list keeps a title readable and scrolls sideways instead; Home's My tickets and Search wrap it. */
.tickets-table .tickets-ticket {
  min-width: 20rem;
}

.tickets-title {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.tickets-title:hover {
  color: var(--color-cobalt);
}

.tickets-table tr[data-category="Done"] .tickets-title {
  color: var(--color-text-muted);
  font-weight: 400;
}

.tickets-table button.ticket-status {
  cursor: pointer;
}

.tickets-table button.ticket-status::after {
  content: "▾";
  font-size: var(--text-label-sm);
}

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

.tickets-owner {
  max-width: 13rem;
  min-height: var(--pill-height);
  padding: 0 var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background: var(--color-tint);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}

.tickets-owner:hover,
.tickets-owner:focus {
  border-color: var(--color-border-hover);
  background: var(--color-surface);
}

#tickets-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-md);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

#tickets-empty p {
  margin: 0;
}

/* ---- Project settings (Sally, 2026-10-30): one airy page, a card per part, each with its own Save and its own colour -
   a 4 px band on top (Monday's tiles) from the organization's tones: General blue, Access indigo, Ticket types violet,
   Workflow teal, Board green. General and Access side by side when there is room ---- */
.settings {
  display: grid;
  gap: var(--space-lg);
  max-width: 72rem;
}

.settings-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--space-lg);
  align-items: start;
}

.settings-stack {
  display: grid;
  gap: var(--space-lg);
}

.settings-saving {
  display: block;
  min-height: 1.25em;
}

.settings-card {
  --tone: var(--org-tone-1);
  --tone-bg: var(--org-tone-1-bg);
  position: relative;
  overflow: hidden;
}

/* A card's colour (the settings cards, the ticket page's sections): a band on top and a dot before its title */
:is(.settings-card, .ticket-section)[data-tone="indigo"] { --tone: var(--org-tone-7); --tone-bg: var(--org-tone-7-bg); }
:is(.settings-card, .ticket-section)[data-tone="violet"] { --tone: var(--org-tone-3); --tone-bg: var(--org-tone-3-bg); }
:is(.settings-card, .ticket-section)[data-tone="teal"]   { --tone: var(--org-tone-6); --tone-bg: var(--org-tone-6-bg); }
:is(.settings-card, .ticket-section)[data-tone="green"]  { --tone: var(--org-tone-4); --tone-bg: var(--org-tone-4-bg); }
:is(.settings-card, .ticket-section)[data-tone="amber"]  { --tone: var(--org-tone-2); --tone-bg: var(--org-tone-2-bg); }
:is(.settings-card, .ticket-section)[data-tone="sky"]    { --tone: var(--org-tone-8); --tone-bg: var(--org-tone-8-bg); }
:is(.settings-card, .ticket-section)[data-tone="magenta"] { --tone: var(--org-tone-5); --tone-bg: var(--org-tone-5-bg); }

.settings-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--space-xs);
  background: var(--tone);
}

.settings-card > header {
  padding-top: var(--space-lg);
}

.settings-card > header h2 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
}

/* The card's colour, as a dot before its title */
.settings-card > header h2::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--tone);
}

.settings-card > header p {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.settings-body {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
}

.settings-body h3 {
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-body-sm);
}

.settings-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-md);
}

.settings-wide {
  grid-column: 1 / -1;
}

.settings-code {
  max-width: 9rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.card-actions .btn-link:first-child {
  margin-right: auto;
}

/* A small rounded label: "Default", "This project's", "2 tickets" */
.settings-chip {
  padding: 1px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--color-tint);
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
  font-weight: 600;
  white-space: nowrap;
}

.settings-chip.is-own {
  background: var(--tone-bg);
  color: var(--tone);
}

/* Access: three tiles, each in its own tone (see, work, administer) */
.settings-access {
  display: grid;
  gap: var(--space-sm);
}

.settings-access-tile {
  --tone: var(--org-tone-1);
  --tone-bg: var(--org-tone-1-bg);
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--tone);
  border-radius: var(--radius-md);
  background: var(--tone-bg);
  color: var(--color-text-body);
  font-size: var(--text-body-sm);
}

.settings-access-tile[data-code="project.work"]  { --tone: var(--org-tone-6); --tone-bg: var(--org-tone-6-bg); }
.settings-access-tile[data-code="project.admin"] { --tone: var(--org-tone-7); --tone-bg: var(--org-tone-7-bg); }

.settings-access-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.settings-access-head strong {
  color: var(--tone);
}

.settings-access-tile .settings-chip.is-own {
  background: var(--color-surface);
}

/* Ticket types: small cards to tick; a chosen one takes the card's tint */
.settings-types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.settings-type {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
}

.settings-type:hover {
  border-color: var(--tone);
}

.settings-type:has(input:checked) {
  border-color: var(--tone);
  background: var(--tone-bg);
}

.settings-type input {
  accent-color: var(--tone);
}

/* The board: lanes left to right (the hidden statuses first), each with the statuses it shows */
.settings-lanes {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-xs);
}

.settings-lane {
  display: flex;
  flex: 0 0 13rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 3px solid var(--tone);
  border-radius: var(--radius-lg);
  background: var(--color-tint);
}

.settings-lane.is-hidden {
  border-top: 3px dashed var(--color-border-hover);
  background: var(--color-surface);
  outline: 1px dashed var(--color-border-hover);
  outline-offset: -1px;
}

.settings-lane-name {
  color: var(--color-text-muted);
  font-size: var(--text-body-sm);
}

.settings-lane-head {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
}

.settings-lane-head input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

.settings-placing {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.settings-place {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.settings-place select {
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-body-sm);
  cursor: pointer;
}

/* ---- The workflow editor (a project's own copy, or a template; Sally 2026-10-30): the start status and the name on
   top, then the statuses as coloured pills and the moves read "From → To", each part in a soft box ---- */
bpm-workflow-editor {
  display: grid;
  gap: var(--space-md);
}

.workflow-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.workflow-name {
  min-width: 16rem;
}

.workflow-box {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-tint);
}

.workflow-box h3 {
  margin: 0;
  font-size: var(--text-body-sm);
}

.workflow-box .form-text {
  margin: 0;
}

.workflow-statuses {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.workflow-statuses select {
  min-height: var(--pill-height);
  padding: 0 var(--space-sm);
  border: 1px dashed var(--color-border-hover);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-cobalt);
  font: inherit;
  font-size: var(--text-body-sm);
  cursor: pointer;
}

.workflow-count {
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-weight: 700;
}

.workflow-remove {
  padding: 0 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.workflow-moves {
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.workflow-moves td {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

/* The small controls of a row (a move, a column's name): the fields' line and corners, one size down */
.workflow-moves input,
.workflow-moves select {
  width: 100%;
}

.workflow-moves input,
.workflow-moves select,
.settings-lane-head input {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-body);
  font: inherit;
  font-size: var(--text-body-sm);
}

.workflow-moves input:focus-visible,
.workflow-moves select:focus-visible,
.settings-lane-head input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* "Any status": the from-everywhere moves read lighter */
.workflow-moves tr[data-any="true"] td:first-child select {
  border-style: dashed;
  color: var(--color-text-muted);
}

.workflow-arrow {
  color: var(--org-tone-6);
  font-size: var(--text-heading-sm);
  font-weight: 700;
}

/* ---- Administration → Work tracking (Sally, 2026-10-30): each list a card in its tone, its rows soft tiles with the
   name, the detail, what uses it and the order buttons; a status row carries its category's colour on its left ---- */
.definition-list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.definition-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--tone);
  border-radius: var(--radius-md);
  background: var(--color-tint);
}

.definition-row[data-category="ToDo"]       { border-left-color: var(--ticket-todo-dot); }
.definition-row[data-category="InProgress"] { border-left-color: var(--ticket-progress); }
.definition-row[data-category="Done"]       { border-left-color: var(--ticket-done-dot); }

.definition-row input,
.definition-row select,
.template-new input {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-body);
  font: inherit;
  font-size: var(--text-body-sm);
}

.definition-row > input:first-child {
  flex: 1 1 10rem;
  font-weight: 600;
}

.definition-row input:focus-visible,
.definition-row select:focus-visible,
.template-new input:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

.definition-choices {
  flex: 1 0 100%;
}

.template {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--tone);
  border-radius: var(--radius-lg);
}

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

.template-head strong {
  color: var(--tone);
  font-family: var(--font-heading);
}

.template-new {
  justify-content: flex-start;
}

.template-new input {
  min-width: 16rem;
}

/* ---- The ticket page: links, processes, labels, watchers, time (Sally, 2026-10-30) ---------------------------- */

.ticket-section[data-tone] {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--space-md) + var(--space-xs));
}

.ticket-section[data-tone]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--space-xs);
  background: var(--tone);
}

.ticket-section[data-tone] > h2::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--tone);
}

/* A short form on one line under a section's list: link a ticket, start a process */
.ticket-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius);
  background: var(--tone-bg, var(--color-tint));
}

.ticket-inline-form select,
.ticket-inline-form input {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}

.ticket-inline-form input {
  flex: 1 1 12rem;
}

.ticket-link,
.ticket-process {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.ticket-link a,
.ticket-process-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-link-phrase {
  flex: none;
  min-width: 7rem;
  color: var(--tone, var(--color-text-muted));
  font-size: var(--text-label-sm);
  font-weight: 600;
}

.ticket-remove {
  flex: none;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  padding: 0 var(--space-xs);
  font: inherit;
  cursor: pointer;
}

.ticket-remove:hover {
  background: var(--color-tint-hover);
  color: var(--color-text);
}

/* Chips in Details: labels and watchers, then the box that adds one */
.ticket-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.ticket-details .ticket-chips input,
.ticket-details .ticket-chips select {
  width: auto;
  flex: 1 1 8rem;
}

.ticket-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 1px var(--space-sm);
  border-radius: var(--radius-full);
  background: var(--ticket-label-bg);
  color: var(--ticket-label);
  font-size: var(--text-label-sm);
  font-weight: 600;
  line-height: var(--leading-label-sm);
  white-space: nowrap;
}

.tickets-ticket .ticket-label {
  flex: none;
}

.ticket-label button,
.ticket-person button,
.settings-field-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 2px;
  font: inherit;
  cursor: pointer;
  opacity: 0.7;
}

.ticket-label button:hover,
.ticket-person button:hover,
.settings-field-chip button:hover {
  opacity: 1;
}

.ticket-person {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 1px var(--space-xs) 1px 1px;
  border-radius: var(--radius-full);
  background: var(--color-tint);
  font-size: var(--text-label-sm);
}

/* Watch: lit while the person watches */
.ticket-watch[aria-pressed="true"] {
  border-color: var(--org-tone-8);
  background: var(--org-tone-8-bg);
  color: var(--org-tone-8);
}

.ticket-time {
  border-top: var(--space-xs) solid var(--ticket-time-done);
}

.ticket-time-body {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}

.ticket-time-body .ticket-details {
  padding: 0;
}

.ticket-time-bar {
  height: var(--ticket-time-bar);
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--ticket-time-track);
}

.ticket-time-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ticket-time-done);
}

.ticket-time-bar > span.is-over {
  background: var(--ticket-time-over);
}

.ticket-log-form {
  display: grid;
  gap: var(--space-sm);
}

/* Settings: a type's custom fields */
.settings-type-fields {
  display: grid;
  gap: var(--space-sm);
}

.settings-type-row {
  display: grid;
  grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  background: var(--tone-bg);
}

.settings-field-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 2px var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-body-sm);
}

.settings-field-chip label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-label-sm);
}

.settings-type-row select {
  padding: 4px 8px;
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-body-sm);
}