/* ==========================================================================
   The board kind's stylesheet (eoz5 M1.T7) — minimal and provisional.

   The owner has not chosen the board's design direction (ticket 90 stage 1), so nothing here is a design: it keeps the
   pages readable and accessible (WCAG 2.2 AA: text and non-text contrast, visible focus, 24 px targets, checked by
   tests/Board/Ui/BoardStylesheetContrastTest) with the browser's own
   colours and fonts and the core bundle's NEUTRAL DEFAULT TOKENS, copied by value from
   gophery/symfony-core-bundle assets/styles/tokens.css (the board has no Tailwind build to import them; the chosen
   direction replaces this file with a DESIGN.md and its tokens). It also styles the few class names the bundle's
   components draw (field, field-label, field-error, sr-only), which a Tailwind build would otherwise provide.
   ========================================================================== */
:root {
  --primary: #1d4ed8;
  --border: #d1d5db;
  --state-err-fg: #b91c1c;
  /* A form field's boundary is a control, not a seam: WCAG 2.2 1.4.11 asks 3:1 against white, which the bundle's seam
     colour --border (1.47:1) does not reach. Not a bundle token: an accessibility floor, #6b7280 = 4.83:1
     (tests/Board/Ui/BoardStylesheetContrastTest). */
  --border-input: #6b7280;
  --s2: .5rem;
  --s4: 1rem;
  --s6: 1.5rem;
  --s8: 2rem;
  --section-gap: 1.5rem;
  --label-gap: .5rem;
  --h-control: 2.25rem;
  --focus-ring-width: 2px;
}

body.board {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

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

.board-skip {
  position: absolute;
  left: var(--s4);
  top: -10rem;
}

.board-skip:focus {
  top: var(--s4);
}

.board-header,
.board-main {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--s4);
}

.board-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  border-bottom: 1px solid var(--border);
}

.board-sign-out {
  margin: 0;
}

.board-sign-out button {
  background: transparent;
  color: var(--primary);
}

.board-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-header a,
.board-main a {
  color: var(--primary);
}

.board-header a[aria-current="page"] {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.board-login {
  display: grid;
  gap: var(--s4);
  max-width: 24rem;
}

.field {
  display: grid;
  gap: var(--label-gap);
}

.field-label {
  font-weight: 700;
}

.field input {
  min-height: var(--h-control);
  padding: 0 var(--s2);
  border: 1px solid var(--border-input);
  font: inherit;
}

.field input[aria-invalid="true"] {
  border-color: var(--state-err-fg);
}

.field-error {
  color: var(--state-err-fg);
}

button {
  min-height: var(--h-control);
  padding: 0 var(--s6);
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  justify-self: start;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: var(--focus-ring-width) solid var(--primary);
  outline-offset: 2px;
}

/* ==========================================================================
   The task page (plan task D2): the tokens and rules of ui/board/DESIGN.md for the report tab. The bundle's components
   arrive here with utility class names no build provides, so each is styled through the class this page passes to it
   (`task-label`, `task-meta`, `task-tabs`, `task-facts-list`) or through its place in the page.
   Type scale 30 / 22 / 17 / 15 px; touch targets at least 44 px; no line of text within 8 px of a rule.
   This bridge is permanent. The bundle's token roles and utility classes take effect only through a Tailwind build
   that imports `gophery-core.css`, and the board has none. The bundle allows a project to copy its utilities by hand
   instead (`assets/styles/tokens.css`), so the board draws the components with its own selectors: the page names the
   classes the bundle's Badge, Tabs, DefinitionList, StateChoiceGroup and DataTable emit, and keeps its palette in the
   page-scoped `--task-*` rules.
   ========================================================================== */
.board-main:has(> :is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page)) {
  max-width: 85rem;
}

.board-crumb {
  margin: 0 0 var(--s2);
  color: var(--task-muted);
  font-size: 15px;
}

.board-crumb a {
  color: var(--task-muted);
  text-decoration: none;
}

.board-crumb a:hover {
  text-decoration: underline;
}

body.board:has(:is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page)) {
  background: var(--task-page);
}

.board-main:has(> :is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page)) h1 {
  margin: 0 0 var(--s4);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.25;
}

.board-heading-mark {
  margin-right: var(--s2);
  color: var(--task-muted);
  font-size: 17px;
  font-weight: 600;
}

.board-main:has(> :is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page)),
body.board:has(:is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page)) {
  --task-page: #f6f7f8;
  --task-surface: #ffffff;
  --task-text: #1f2328;
  --task-muted: #555e68;
  --task-hairline: #dde1e5;
  --task-accent: #0054a5;
  --task-accent-hover: #004080;
  --task-accent-soft: #e7f0fb;
  --task-accent-line: #b9cfea;
  --task-rail: #eef0f2;
  --task-info: #eef1f4;
  --task-code: #f0f2f4;
  --task-ok-bg: #e9f5ec;
  --task-ok-text: #1b5e2e;
  --task-control-line: #8c959f;
  --task-control-hover: #6e7781;
  --task-placeholder: #67707a;
  --task-pill-hover: #39404a;
  --task-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

:is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page) {
  color: var(--task-text);
  font-size: 17px;
  line-height: 1.55;
}

:is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page) a {
  color: var(--task-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.task-stepline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) .75rem;
  margin-bottom: var(--s4);
  color: var(--task-muted);
  font-size: 15px;
}

.task-stepline b,
.task-stepline > span:nth-child(2) {
  color: var(--task-text);
}

.task-route {
  flex-basis: 100%;
}

.task-route summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--task-accent);
  cursor: pointer;
}

.task-route summary:hover {
  text-decoration: underline;
}

.task-route .task-route-close,
.task-route[open] .task-route-open {
  display: none;
}

.task-route[open] .task-route-close {
  display: inline;
}

.task-route-scroll {
  overflow-x: auto;
  padding: var(--s2) 0;
}

.task-route ol {
  display: flex;
  gap: var(--s2);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.task-route li {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.task-route svg {
  width: 16px;
  height: 16px;
  color: #1b5e2e;
}

.task-route-sep {
  color: var(--task-muted);
}

.task-step-current {
  color: var(--task-accent);
  font-weight: 600;
}

.task-wait {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-bottom: var(--s4);
  padding: var(--s4) 1.5rem;
  border: 1px solid var(--task-accent-line);
  border-radius: 10px;
  background: var(--task-accent-soft);
}

.task-wait strong {
  color: var(--task-accent);
  font-size: 17px;
  font-weight: 600;
}

.task-wait p {
  flex: 1 1 18rem;
  margin: 0;
  max-width: 70ch;
}

.task-wait a,
.task-wait a:hover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  border-radius: 8px;
  background: var(--task-accent);
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.task-wait a:hover {
  background: var(--task-accent-hover);
}

.task-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s2);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--task-hairline);
}

.task-tabs a {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--s2);
  white-space: nowrap;
  min-height: 44px;
  padding: 0 .75rem;
  border-bottom: 3px solid transparent;
  color: var(--task-muted);
  text-decoration: none;
}

.task-tabs a:hover {
  color: var(--task-text);
  background: var(--task-page);
}

.task-tabs a[aria-current="page"] {
  border-bottom-color: var(--task-accent);
  color: var(--task-text);
  font-weight: 600;
}

.task-tabs a:last-child {
  margin-left: auto;
}

/* The count on a tab waits for the person (open questions), so it is the one blue pill of the page. */
.task-tabs a > span {
  min-width: 1.5rem;
  padding: 0 var(--s2);
  border-radius: 999px;
  background: var(--task-accent);
  color: #ffffff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.task-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: start;
}

@media (min-width: 1180px) {
  .task-body {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

.task-card {
  padding: 0 2rem 1rem;
  border-radius: 12px;
  background: var(--task-surface);
  box-shadow: 0 1px 2px rgba(31, 35, 40, 0.06), 0 4px 16px -8px rgba(31, 35, 40, 0.12);
}

.ecosystem-topics {
  display: grid;
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ecosystem-topic {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
}

.ecosystem-title {
  font-weight: 600;
  line-height: 1.4;
}

.ecosystem-progress {
  color: var(--task-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.task-side {
  display: grid;
  gap: 1.5rem;
}

.task-brief {
  padding: 0 1.25rem 1rem;
}

.task-brief h2 {
  margin: 0 -1.25rem 1rem;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--task-hairline);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.task-step section {
  padding-bottom: 1.5rem;
}

.task-step section + section {
  border-top: 1px solid var(--task-hairline);
  padding-top: 1.5rem;
}

.task-step h2 {
  margin: 1.5rem 0 .75rem;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.task-step section + section h2 {
  margin-top: 0;
}

.task-count {
  margin-left: var(--s2);
  color: var(--task-muted);
  font-size: 15px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.task-meta,
.task-facts-list {
  display: grid;
  gap: 1px;
  margin: 0 0 var(--s4);
  border-radius: 8px;
  background: var(--task-hairline);
  overflow: hidden;
}

.task-meta {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.task-meta > div,
.task-facts-list > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .75rem;
  background: var(--task-surface);
}

.task-meta dt,
.task-facts-list dt {
  color: var(--task-muted);
  font-size: 15px;
  font-weight: 600;
}

.task-meta dd,
.task-facts-list dd {
  margin: 0;
}

.task-facts-list {
  grid-template-columns: minmax(0, 1fr);
  border-radius: 0;
  background: transparent;
  gap: 0;
}

.task-facts-list > div + div {
  border-top: 1px solid var(--task-hairline);
}

.task-facts-list > div {
  padding-left: 0;
  padding-right: 0;
}

.task-page blockquote {
  max-width: 70ch;
  margin: var(--s4) 0;
  padding: 0 0 0 var(--s4);
  border-left: 1px solid var(--task-muted);
  font-size: 17px;
}

.task-thread {
  max-width: 70ch;
  margin: 0;
  padding-left: 1.25rem;
}

.task-prose p {
  max-width: 70ch;
  margin: 0 0 .75rem;
}

.task-hint {
  max-width: 70ch;
  margin: 0;
  color: var(--task-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* The label of the bundle's Badge: a rectangle with a dot, not a pill; the words wrap, so a sentence is read whole.
   Amber (warn) belongs to the symptom verdict alone (DESIGN.md, The Amber Is A Verdict Rule). */
.task-label {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--s2);
  max-width: 100%;
  padding: 2px var(--s2);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.task-label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 999px;
  background: currentColor;
}

.task-label > span {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.task-label.bg-state-neut-bg {
  background: #eef1f4;
  color: #1f2328;
}

.task-label.bg-state-ok-bg {
  background: #e9f5ec;
  color: #1b5e2e;
}

.task-label.bg-state-warn-bg {
  background: #fff3dc;
  color: #6b3d00;
}

.task-label.bg-state-err-bg {
  background: #fde8e6;
  color: #8a1c12;
}

.task-mini {
  display: grid;
  gap: var(--s2);
  margin: 0 -0.75rem;
  padding: 0;
  list-style: none;
}

.task-mini-item {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-height: 44px;
  padding: .75rem 0.75rem;
  border-radius: 8px;
  color: var(--task-text);
  text-decoration: none;
}

:is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page) a.task-mini-item {
  color: var(--task-text);
  text-decoration: none;
}

:is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page) a.task-mini-item:hover {
  background: var(--task-page);
}

:is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page) a.task-mini-item:hover b {
  text-decoration: underline;
}

.task-mini-kind,
.task-mini-note {
  color: var(--task-muted);
  font-size: 15px;
  line-height: 1.5;
}

.task-mini-item b {
  font-weight: 600;
}

@media (max-width: 760px) {
  .board-main:has(> :is(.task-page, .now-page, .task-list-page, .how-page, .ecosystem-page, .admin-page)) h1 {
    font-size: 24px;
  }

  .task-card {
    padding: 0 var(--s4) .75rem;
  }

  .task-tabs a:last-child {
    margin-left: 0;
  }
}

/* ==========================================================================
   The task page's other tabs (plan task D3): the conversation, the preview, the history, the technical details. The
   bundle's ChatBubble, Textarea, Input, Label and Button draw utility classes the board does not build, so the page
   styles the classes it passes them and the ones they carry (`chat-msg`, `chat-bubble`, `sr-only`).
   Same reason as the bridge above.
   ========================================================================== */
.task-page [hidden] {
  display: none !important;
}

.task-btn,
.task-mini-btn,
.task-chip,
.task-control,
.task-newmsg {
  box-sizing: border-box;
}

.task-page :focus-visible {
  outline: 3px solid var(--task-accent);
  outline-offset: 2px;
}

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

.task-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: .75rem 1.25rem;
  border: 1px solid var(--task-accent);
  border-radius: 8px;
  background: var(--task-accent);
  color: #ffffff;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.task-btn:hover {
  border-color: var(--task-accent-hover);
  background: var(--task-accent-hover);
}

.task-btn-secondary {
  background: var(--task-surface);
  color: var(--task-accent);
}

.task-btn-secondary:hover {
  border-color: var(--task-accent);
  background: var(--task-accent-soft);
}

.task-page a.task-btn,
.task-page a.task-btn:hover {
  color: #ffffff;
  text-decoration: none;
}

.task-page a.task-btn-secondary,
.task-page a.task-btn-secondary:hover {
  color: var(--task-accent);
}

.task-page .field-label {
  font-size: 15px;
  font-weight: 600;
}

.task-control {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--task-control-line);
  border-radius: 8px;
  background: var(--task-surface);
  color: var(--task-text);
  font: inherit;
  font-size: 17px;
  line-height: 1.5;
}

.task-control:hover {
  border-color: var(--task-control-hover);
}

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

.task-control::placeholder {
  color: var(--task-placeholder);
  opacity: 1;
}

textarea.task-control {
  min-height: 44px;
  max-height: 16rem;
  field-sizing: content;
  resize: vertical;
}

.task-mono {
  font-family: var(--task-mono);
  font-size: 15px;
}

.task-pill {
  padding: 0 var(--s2);
  border-radius: 999px;
  background: var(--task-accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.task-tag {
  padding: 2px var(--s2);
  border-radius: 4px;
  background: var(--task-info);
  color: var(--task-text);
  font-size: 15px;
  font-weight: 600;
}

.task-mini-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px .75rem;
  border: 1px solid var(--task-accent);
  border-radius: 6px;
  background: var(--task-surface);
  color: var(--task-accent);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.task-mini-btn:hover {
  background: var(--task-accent-soft);
}

.task-mini-btn svg {
  width: 16px;
  height: 16px;
}

.task-lead {
  max-width: 70ch;
  margin: 0 0 .75rem;
}

.task-part h3 {
  margin: 0 0 .75rem;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.task-part + .task-part {
  border-top: 1px solid var(--task-hairline);
  padding-top: 1.5rem;
}

.task-step .task-part {
  padding-bottom: 1.5rem;
}

/* The decision: the bundle's state-choice group (GopheryCore:StateChoiceGroup). The board builds no Tailwind, so the
   group's utility classes draw nothing; the page styles its structure: a fieldset of options, each a radio, a label
   (title and effect) and an optional panel that shows only under the checked radio, without script. */
.task-decision fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.task-decision legend {
  float: left;
  width: 100%;
  margin: 0 0 .75rem;
  padding: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

/* The legend floats so that it sits inside the fieldset's box; the option after it starts on its own line. */
.task-decision legend + * {
  clear: both;
}

.task-decision fieldset > div {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: .75rem;
  margin-top: var(--s2);
  padding: .75rem var(--s4);
  border: 1px solid var(--task-hairline);
  border-radius: 8px;
}

.task-decision fieldset > div:has(input:checked) {
  border-color: var(--task-accent);
  box-shadow: inset 0 0 0 1px var(--task-accent);
}

.task-decision fieldset > div:has(input:focus-visible) {
  outline: 3px solid var(--task-accent);
  outline-offset: 2px;
}

.task-decision input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  accent-color: var(--task-accent);
}

.task-decision input[type="radio"]:focus-visible {
  outline: 0;
}

/* The label's box stretches over the whole option, so the option is one touch target of at least 44 px. */
.task-decision label {
  display: block;
  cursor: pointer;
}

.task-decision label::after {
  content: "";
  position: absolute;
  inset: 0;
}

.task-decision label > span:first-child {
  display: block;
  font-weight: 600;
}

.task-decision label > span + span {
  display: block;
  margin-top: 2px;
  color: var(--task-muted);
  font-size: 15px;
}

.task-decision [data-state-choice-panel] {
  position: relative;
  z-index: 1;
  display: none;
  grid-column: 2;
  gap: .75rem;
  margin-top: var(--s4);
}

.task-decision input[type="radio"]:checked ~ [data-state-choice-panel] {
  display: grid;
}

.task-decision .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: var(--s4);
}

.task-decision .form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: var(--s4) -2rem -1rem;
  padding: var(--s4) 2rem;
  border-top: 1px solid var(--task-hairline);
  border-radius: 0 0 12px 12px;
  background: var(--task-surface);
  box-shadow: 0 -10px 18px -14px rgba(31, 35, 40, 0.35);
}

/* The conversation window: a header, the stream of bubbles, a composer. On the tab it is the page's tile; in the
   decision it is part of the tile around it (no second shadow, no second border). */
.task-chat.task-card {
  display: flex;
  flex-direction: column;
  min-height: 620px;
  padding: 0;
  overflow: hidden;
}

.task-chat-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding: .75rem 2rem;
  border-bottom: 1px solid var(--task-hairline);
}

.task-chat-head h2,
.task-chat-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.task-chat-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--task-info);
  color: var(--task-muted);
}

.task-chat-icon svg {
  width: 18px;
  height: 18px;
}

.task-page a.task-chat-questions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.task-page a.task-chat-questions:hover {
  text-decoration: underline;
}

.task-chat-stream {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--s4);
  max-height: 560px;
  padding: 2rem;
  overflow-y: auto;
}

.task-page .chat-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 4px;
  max-width: min(88%, 47.5rem);
}

.task-page .chat-msg--me {
  align-items: flex-end;
  align-self: flex-end;
}

.task-page .chat-bubble {
  display: grid;
  gap: var(--s2);
  padding: .75rem var(--s4);
  border-radius: 12px;
  font-size: 17px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.task-page .chat-bubble p {
  margin: 0;
}

.task-page .chat-msg--them .chat-bubble {
  border-bottom-left-radius: 4px;
  background: var(--task-rail);
  color: var(--task-text);
}

.task-page .chat-msg--me .chat-bubble {
  border-bottom-right-radius: 4px;
  background: var(--task-accent);
  color: #ffffff;
}

.task-page .chat-msg--them .chat-bubble:has(.task-chat-tag) {
  border: 1px solid var(--task-accent-line);
  background: var(--task-surface);
}

.task-chat-tag {
  color: var(--task-accent);
  font-size: 15px;
  font-weight: 600;
}

.task-page .chat-msg__meta {
  padding: 0 4px;
  color: var(--task-muted);
  font-size: 15px;
}

.task-newmsg {
  position: sticky;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 1rem;
  border: 0;
  border-radius: 999px;
  background: var(--task-text);
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.task-newmsg:hover {
  background: var(--task-pill-hover);
}

.task-newmsg svg {
  width: 16px;
  height: 16px;
}

.task-chat-composer {
  display: grid;
  gap: var(--s2);
  padding: .75rem 2rem 1.5rem;
  border-top: 1px solid var(--task-hairline);
}

.task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.task-chip {
  min-height: 44px;
  padding: 4px .75rem;
  border: 1px solid var(--task-control-line);
  border-radius: 999px;
  background: var(--task-surface);
  color: var(--task-text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.task-chip:hover {
  border-color: var(--task-accent);
  color: var(--task-accent);
}

.task-chat-field {
  display: flex;
  align-items: flex-end;
  gap: var(--s2);
}

.task-chat-field .task-control {
  flex: 1;
}

.task-step .task-chat-inline {
  padding-bottom: 0;
}

.task-chat-inline .task-chat-head {
  padding-right: 0;
  padding-left: 0;
}

.task-chat-inline .task-chat-stream {
  max-height: none;
  padding: var(--s4) 0;
}

.task-chat-inline .task-chat-composer {
  padding: .75rem 0 var(--s4);
}

.task-chat-inline textarea.task-control {
  min-height: 96px;
}

/* The preview: the address, the test account, the steps of checking, the decision as a choice of state. */
.task-preview-open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-bottom: var(--s4);
}

.task-address {
  color: var(--task-muted);
  font-family: var(--task-mono);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.task-login {
  display: grid;
  gap: .75rem;
  margin-bottom: 1.5rem;
  padding: var(--s4) 1.5rem;
  border: 1px solid var(--task-hairline);
  border-radius: 10px;
  background: var(--task-page);
}

.task-login-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
}

.task-login-head h3 {
  margin: 0;
}

.task-login-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
}

.task-login-row .field-label {
  color: var(--task-muted);
  font-weight: 400;
}

.task-login-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.task-copied {
  min-width: 5.5rem;
  color: var(--task-ok-text);
  font-size: 15px;
}

.task-check-steps {
  display: grid;
  gap: 4px;
  max-width: 70ch;
  margin: 0;
  padding-left: 1.25rem;
}

.task-attach {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.task-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.task-attach:has(.task-file-input:focus-visible) .task-mini-btn {
  outline: 3px solid var(--task-accent);
  outline-offset: 2px;
}

.task-files {
  display: contents;
}

.task-file {
  padding: 4px var(--s2);
  border: 1px solid var(--task-hairline);
  border-radius: 6px;
  background: var(--task-page);
  font-size: 15px;
}

.task-accepted {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-bottom: var(--s4);
  padding: .75rem 1.5rem;
  border-radius: 10px;
  background: var(--task-ok-bg);
  color: var(--task-ok-text);
}

.task-accepted p {
  flex: 1 1 18rem;
  margin: 0;
  font-weight: 600;
}

/* The history and the technical details. */
.task-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-timeline li {
  display: grid;
  grid-template-columns: 150px 150px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s4);
  padding: .75rem 0;
  border-top: 1px solid var(--task-hairline);
}

.task-timeline li:first-child {
  border-top: 0;
}

.task-timeline time,
.task-who {
  color: var(--task-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.task-timeline p {
  max-width: 70ch;
  margin: 0;
}

.task-more {
  margin: var(--s4) 0 0;
  padding: .75rem 0 var(--s2);
  border-top: 1px solid var(--task-hairline);
  font-size: 15px;
}

.task-page a.task-action-link {
  text-decoration: none;
}

.task-page a.task-action-link:hover {
  text-decoration: underline;
}

/* The bundle's read-only data table (GopheryCore:DataTable): the frame scrolls sideways inside itself, never the page.
   The component's own utility classes are not built here, so the table is styled by its elements and by the few classes
   it emits for a figure column (`text-right`, `tabular-nums`) and an empty cell (`text-text-muted`). */
:is(.task-checks, .task-runs) {
  max-width: 100%;
  overflow-x: auto;
}

:is(.task-checks, .task-runs) table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: left;
}

:is(.task-checks, .task-runs) :is(th, td) {
  padding: .75rem .75rem .75rem 0;
  border-bottom: 1px solid var(--task-hairline);
  overflow-wrap: anywhere;
  vertical-align: top;
}

:is(.task-checks, .task-runs) thead th {
  color: var(--task-muted);
  font-weight: 600;
  vertical-align: bottom;
}

:is(.task-checks, .task-runs) tbody th {
  font-weight: 600;
}

:is(.task-checks, .task-runs) tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

:is(.task-checks, .task-runs) .text-right {
  text-align: right;
}

:is(.task-checks, .task-runs) .tabular-nums {
  font-variant-numeric: tabular-nums;
}

:is(.task-checks, .task-runs) .text-text-muted {
  color: var(--task-muted);
}

.task-page code,
.task-code {
  font-family: var(--task-mono);
  font-size: 14px;
}

.task-code {
  max-width: 100%;
  margin: 0;
  padding: .75rem var(--s4);
  overflow-x: auto;
  border-radius: 8px;
  background: var(--task-code);
  line-height: 1.6;
  white-space: pre;
}

@media (max-width: 760px) {
  .task-chat-head,
  .task-chat-composer {
    padding-right: var(--s4);
    padding-left: var(--s4);
  }

  .task-chat-stream {
    max-height: none;
    padding: var(--s4);
  }

  .task-chat.task-card {
    min-height: 0;
  }

  .task-timeline li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .task-login-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  body.board:has(.task-decision .form-actions-sticky) {
    padding-bottom: 96px;
  }

  .task-decision .form-actions-sticky {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    margin: 0;
    padding: .75rem var(--s4) calc(.75rem + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .task-btn,
  .task-decision fieldset > div {
    transition: background-color .15s ease-out, border-color .15s ease-out;
  }
}

/* ==========================================================================
   The owner's Teraz (plan task D5): the two groups of what waits for the person and the quiet column. It shares the
   page ground, the tile (`task-card`), the band (`task-wait`), the side list (`task-mini*`) and the link system of the
   task page; only the rows and the folded line are its own.
   Same reason as the bridges above.
   ========================================================================== */
.now-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 4rem;
  align-items: start;
}

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

.now-main,
.now-side {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
}

.now-list > header,
.now-quiet > summary {
  margin: 0 -2rem;
  padding: .75rem 2rem;
}

.now-list > header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) .75rem;
  border-bottom: 1px solid var(--task-hairline);
}

.now-list h2,
.now-quiet > summary b {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.now-meta {
  color: var(--task-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.now-list > p {
  margin: 0;
}

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

.now-rows > li + li {
  border-top: 1px solid var(--task-hairline);
}

.now-page a.now-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 128px;
  gap: var(--s4);
  align-items: baseline;
  margin: 0 -2rem;
  padding: var(--s4) 2rem;
  border-radius: 8px;
  color: var(--task-text);
  text-decoration: none;
}

.now-page a.now-row:hover {
  background: var(--task-page);
}

.now-page a.now-row:hover b {
  text-decoration: underline;
}

.now-id,
.now-since {
  color: var(--task-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.now-text {
  display: grid;
  gap: 6px;
}

.now-text b {
  font-weight: 600;
  line-height: 1.4;
}

.now-do {
  color: var(--task-muted);
  font-size: 15px;
  line-height: 1.5;
}

.now-since {
  display: grid;
  text-align: right;
}

.now-list > p.now-more {
  margin-top: var(--s2);
  padding: .75rem 0 var(--s2);
  border-top: 1px solid var(--task-hairline);
  font-size: 15px;
}

.now-page .task-action-link {
  text-decoration: none;
}

.now-page .task-action-link:hover {
  text-decoration: underline;
}

.now-deploy {
  display: grid;
  gap: .75rem;
  padding-top: var(--s4);
  max-width: 70ch;
}

.now-deploy p {
  margin: 0;
}

.now-eta {
  font-size: 17px;
  font-weight: 600;
}

.now-hint {
  color: var(--task-muted);
  font-size: 15px;
}

.now-side .task-card {
  padding: 0 1.25rem 1rem;
}

.now-side .now-list > header,
.now-side .now-quiet > summary {
  margin: 0 -1.25rem;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

.now-side .now-list > header {
  /* the first tile's heading keeps its rule; the folded one has none until it opens */
  margin-bottom: 0;
}

.now-quiet > summary {
  display: grid;
  gap: 4px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}

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

.now-quiet[open] > summary {
  border-bottom: 1px solid var(--task-hairline);
}

.now-toggle {
  color: var(--task-accent);
  font-size: 15px;
}

.now-quiet > summary:hover .now-toggle {
  text-decoration: underline;
}

.now-quiet[open] .now-when-closed,
.now-quiet:not([open]) .now-when-open {
  display: none;
}

.now-quiet > .task-mini {
  margin-top: var(--s4);
}

@media (max-width: 760px) {
  .now-list > header,
  .now-quiet > summary {
    margin: 0 calc(-1 * var(--s4));
    padding-right: var(--s4);
    padding-left: var(--s4);
  }

  .now-side .now-list > header,
  .now-side .now-quiet > summary {
    margin: 0 -1.25rem;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .now-page a.now-row {
    grid-template-columns: 56px minmax(0, 1fr);
    margin: 0 calc(-1 * var(--s4));
    padding: var(--s4);
  }

  .now-since {
    grid-column: 2;
    text-align: left;
  }
}

.task-list-page { display: grid; gap: 32px; }
.task-list-group > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 -32px; padding: 12px 32px; border-bottom: 1px solid var(--task-hairline); }
.task-list-group h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.task-list-page a.task-list-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 128px; align-items: baseline; gap: 16px; margin: 0 -32px; padding: 16px 32px; border-radius: 8px; color: var(--task-text); text-decoration: none; }
.task-list-page a.task-list-row:hover { background: var(--task-page); }
.task-list-page a.task-list-row:hover b { text-decoration: underline; }
.task-list-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.task-list-obstacle { margin: 8px 0 0; font-size: 15px; }
.task-list-obstacle dt { color: var(--task-muted); }
.task-list-obstacle dd { margin: 0; }
@media (max-width: 760px) {
  .task-list-group > header { margin: 0 -16px; padding: 12px 16px; }
  .task-list-page a.task-list-row { grid-template-columns: 1fr; gap: 8px; margin: 0 -16px; padding: 16px; }
}
.task-list-bucket h3 { margin: 16px 0 0; font-size: 15px; font-weight: 600; color: var(--task-muted); }
.task-list-more { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--task-hairline); font-size: 15px; }
.task-list-more a { display: inline-flex; align-items: center; min-height: 44px; }
.task-list-views { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 15px; }
.task-list-views a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 8px; text-decoration: none; }
.task-list-views a[aria-current=page] { background: var(--task-accent-soft); font-weight: 600; }
.task-list-empty { margin: 16px 0 0; color: var(--task-muted); }

.release-row { padding-top: 16px; overflow-wrap: anywhere; }
.release-row + .release-row { margin-top: 16px; border-top: 1px solid var(--task-hairline); }
.release-row h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.release-row p { margin: 0 0 12px; max-width: 70ch; }
.release-manifest summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.release-facts { display: grid; gap: 16px; margin: 16px 0; font-size: 15px; }
.release-facts dt { font-weight: 600; }
.release-facts dd { margin: 4px 0 0; }
.release-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.release-actions a { display: inline-flex; align-items: center; min-height: 44px; }
.release-page.is-loading { opacity: .55; }

/* The how-it-works map (ticket 40). Rows come from the workflow definition; your moves are the blue ones. */
.how-page { display: grid; gap: 24px; }
.how-lead, .how-hint { max-width: 80ch; margin: 0; }
.how-hint, .how-page .k, .how-page .no { color: var(--task-muted); font-size: 15px; }
.how-page h2 { margin: 0 0 16px; font-size: 22px; font-weight: 600; line-height: 1.3; }
.how-page h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.how-page .moves, .how-page .roles { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.how-page .mv, .how-page .role {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--task-hairline);
  border-radius: 12px;
  background: var(--task-surface);
}
.how-page .mv { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.how-page .mv.you { background: var(--task-accent-soft); border-color: var(--task-accent-line); }
.how-page .ft { margin: 0 0 8px; font-weight: 600; }
.how-page .why, .how-page .role p { margin: 0; }
.how-page .who { display: grid; gap: 4px; justify-items: end; }
.how-page .roles { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.how-page a.task-btn, .how-page a.task-btn:hover { color: #ffffff; text-decoration: none; }
@media (max-width: 760px) {
  .how-page .mv { grid-template-columns: 1fr; }
  .how-page .who { justify-items: start; }
}

/* ==========================================================================
   The administration console (plan task D11 / ticket 42, the accepted mock-up of round 4.15): the users with their
   roles, the tokens, the project configuration. It shares the page ground, the tile and the link system of the task
   page; the rows are its own.
   Same reason as the bridges above.
   ========================================================================== */
.admin-page { display: grid; gap: 32px; }
.admin-tile > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 0 -32px; padding: 12px 32px; border-bottom: 1px solid var(--task-hairline); }
.admin-tile h2 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; }
.admin-rows { margin: 0; padding: 0; list-style: none; }
.admin-rows > li + li { border-top: 1px solid var(--task-hairline); }
.admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 12px 0; }
.admin-row-text { display: grid; gap: 2px; }
.admin-row-text b { font-weight: 600; line-height: 1.4; }
.admin-row-note, .admin-roles { color: var(--task-muted); font-size: 15px; line-height: 1.5; }
.admin-row-side { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: flex-end; }
.admin-page .task-page-code,
.admin-page code { font-family: var(--task-mono); font-size: 14px; }
.admin-page .task-code { max-width: 100%; margin: 0; padding: 12px 16px; overflow-x: auto; border-radius: 8px; background: var(--task-code); line-height: 1.6; white-space: pre; }
.admin-page p { max-width: 70ch; margin: 0 0 8px; }
.admin-page .task-hint { margin: 0; }
.admin-token-group { display: grid; gap: 4px; margin: 0 0 8px; padding: 8px 0; }
.admin-token-group + .admin-token-group { border-top: 1px solid var(--task-hairline); }
.admin-token-group > b { font-weight: 600; }
.admin-token-rows { margin: 0; padding: 0; list-style: none; }
.admin-token-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 4px 0; }
.admin-token-mask { color: var(--task-text); }
.admin-token-note, .admin-token-empty { color: var(--task-muted); font-size: 15px; }
.admin-project-rows { margin: 0; padding: 0; list-style: none; }
.admin-project { padding: 8px 0; }
.admin-project + .admin-project { border-top: 1px solid var(--task-hairline); }
.admin-project-empty { margin: 8px 0 0; color: var(--task-muted); }
@media (max-width: 760px) {
  .admin-tile > header { margin: 0 -16px; padding: 12px 16px; }
}