/*
 * The account page (ac-), /account/edit. Mocked in Pencil row y=52500:
 * Default n6WnDk, Validation nLtFt, Saved MJOMN, Role variant BGz26,
 * Danger zone V40p1, Mobile At24F / UK2Za.
 */

.ac {
  --ac-ink: #0B2226;
  --ac-slate: #12292D;
  --ac-teal: #246871;
  --ac-amber: #F29111;
  --ac-mute: #4F6C6F;
  --ac-quiet: #6E8A8D;
  --ac-hint: #5F797C;
  --ac-late: #B7331D;
  --ac-flight: #8A5300;
  --ac-red: #EF5B45;
  --ac-line: #C9DADB;
  --ac-line-soft: #DEE8E8;
  --ac-mist: #EFF4F4;
  --ac-paper: #F1F5F5;
  background: var(--ac-paper);
  min-height: calc(100vh - 60px);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ac-slate);
}

.ac-body { display: flex; flex-direction: column; gap: 22px; max-width: 1440px; margin: 0 auto; padding: 34px 48px 48px; }

.ac-m {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ac-mute);
}
.ac-m--crumb { font-size: 10px; letter-spacing: 2.2px; }
.ac-m--meta { font-size: 10px; letter-spacing: 1.6px; }
.ac-m--tag { font-size: 8.5px; letter-spacing: 1.2px; color: var(--ac-flight); }
.ac-m--quiet { font-size: 8.5px; letter-spacing: 1.2px; color: var(--ac-quiet); }
.ac-m--late { font-size: 9px; letter-spacing: 1px; color: var(--ac-late); }
.ac-m--ink { font-size: 8.5px; letter-spacing: 1.4px; color: #8FB3B6; }

.ac-help { margin: 0; color: var(--ac-mute); font-size: 12px; line-height: 17px; }
.ac-text { margin: 0; color: var(--ac-slate); font-size: 12.5px; line-height: 18px; }
.ac-text--lg { font-size: 13.5px; line-height: 20px; }
.ac-strong { margin: 0; color: var(--ac-slate); font-size: 13.5px; font-weight: 600; }
.ac-h { margin: 0; color: var(--ac-slate); font-family: Archivo, system-ui, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 22px; }
.ac-h--lg { font-size: 24px; letter-spacing: -0.4px; line-height: 30px; }

/* ------------------------------------------------------------------ crumb + head */

.ac-crumb { display: flex; align-items: center; gap: 12px; }
.ac-back { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 1px solid var(--ac-line); border-radius: 3px; background: #fff; color: var(--ac-teal); font-size: 12px; font-weight: 500; }
.ac-back-icon { transform: rotate(180deg); }
.ac-back:hover { border-color: var(--ac-teal); }

.ac-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ac-head--plain { flex-direction: column; align-items: flex-start; gap: 6px; }
.ac-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ac-who-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ac-title { margin: 0; color: var(--ac-slate); font-family: Archivo, system-ui, sans-serif; font-size: 34px; font-weight: 600; letter-spacing: -0.8px; line-height: 37px; }
.ac-lede { margin: 0; color: var(--ac-mute); font-size: 13px; }

.ac-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--ac-ink); color: #fff; font-family: "IBM Plex Mono", monospace; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
.ac-avatar--sm { width: 32px; height: 32px; font-size: 11px; letter-spacing: 0; }

.ac-actions { display: flex; align-items: center; gap: 10px; }
.ac-actions form { margin: 0; }

.ac-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--ac-line);
  border-radius: 4px;
  background: #fff;
  color: var(--ac-teal);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.ac-btn:hover { border-color: var(--ac-teal); }
.ac-btn:focus-visible, .ac-go:focus-visible, .ac-back:focus-visible { outline: 2px solid #6FA9AF; outline-offset: 1px; }
.ac-btn--quiet { color: var(--ac-slate); }
.ac-btn--ink { background: var(--ac-ink); border-color: var(--ac-ink); color: #fff; font-weight: 600; height: 38px; padding: 0 16px; font-size: 13px; }
.ac-btn--ink:hover { background: #123236; }
.ac-btn--fit { align-self: flex-start; }
.ac-inline-form { margin: 0; display: inline-flex; }

/* ------------------------------------------------------------------ notes after a save or a refusal */

.ac-summary { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: #FBE9E4; border-left: 3px solid var(--ac-red); border-radius: 3px; outline: none; }
.ac-summary-title { margin: 0; color: var(--ac-late); font-size: 14px; font-weight: 600; }
.ac-summary-item { display: inline-flex; align-items: center; gap: 8px; color: var(--ac-late); font-size: 13px; text-decoration: none; }
.ac-summary-item:hover { text-decoration: underline; }

.ac-saved { display: flex; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--ac-teal); border-left-width: 4px; border-radius: 3px; }
.ac-saved-icon { color: var(--ac-teal); flex: none; }
.ac-saved-body { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.ac-saved-title { margin: 0; color: var(--ac-slate); font-size: 14.5px; font-weight: 600; }
.ac-saved-note { margin: 0; color: var(--ac-mute); font-size: 12.5px; line-height: 18px; }
.ac-receipt { display: flex; flex-direction: column; }
.ac-receipt-row { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--ac-line-soft); color: var(--ac-quiet); font-size: 12.5px; }
.ac-receipt-k { width: 110px; flex: none; font-size: 9px; letter-spacing: 1.4px; }
.ac-receipt-from { width: 220px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-receipt-to { flex: 1; min-width: 0; }
.ac-receipt-row.is-changed .ac-receipt-from { color: var(--ac-mute); }
.ac-receipt-row.is-changed .ac-receipt-to { color: var(--ac-slate); font-weight: 600; }

/* ------------------------------------------------------------------ columns and panels */

.ac-cols { display: flex; gap: 24px; align-items: flex-start; }
.ac-main { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; }
.ac-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.ac-side { display: flex; flex-direction: column; gap: 20px; width: 400px; flex: none; }

.ac-panel { display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px; background: #fff; border: 1px solid var(--ac-line); border-radius: 4px; }
.ac-panel--side { gap: 14px; padding: 18px 22px 22px; }
.ac-panel--confirm { border-color: var(--ac-slate); }
.ac-panel--leave { border-color: var(--ac-red); border-left-width: 4px; }
.ac-panel--muted { background: var(--ac-paper); border-color: var(--ac-line-soft); }
.ac-panel [hidden] { display: none !important; }
.ac-panel--leave > div { display: flex; flex-direction: column; gap: 16px; }
.ac-panel--leave .ac-btn { align-self: flex-start; }
.ac-panel--leave .ac-token-actions .ac-btn { align-self: auto; }

.ac-row { display: flex; gap: 14px; }
.ac-row > .ac-field { flex: 1; min-width: 0; }

.ac-field { display: flex; flex-direction: column; gap: 6px; }
.ac-label { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0; }
.ac-label-t { color: var(--ac-slate); font-size: 13px; font-weight: 600; }
.ac-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ac-line);
  border-radius: 3px;
  background: #fff;
  color: var(--ac-slate);
  font-family: inherit;
  font-size: 13.5px;
  box-shadow: none;
}
.ac-input::placeholder { color: var(--ac-hint); opacity: 1; }
.ac-input:focus { outline: none; border-color: #6FA9AF; box-shadow: 0 0 0 2px rgba(111, 169, 175, 0.35); }
.ac-field.is-warn .ac-input, .ac-field.is-changed .ac-input { border: 1.5px solid var(--ac-amber); padding: 0 11.5px; }
.ac-field.is-error .ac-input { border: 1.5px solid var(--ac-red); padding: 0 11.5px; }
.ac-error { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ac-late); font-size: 12.5px; line-height: 17px; }
.ac-error .nv-icon { margin-top: 2px; }

.ac-note { display: flex; align-items: flex-start; gap: 6px; margin-top: -8px; font-size: 12.5px; line-height: 17px; }
.ac-note .nv-icon { margin-top: 2px; }
.ac-note--warn { color: var(--ac-flight); }

/* The password rules, checked as you type. */
.ac-rules { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--ac-mist); border-radius: 3px; }
.ac-rule { display: flex; align-items: center; gap: 9px; color: var(--ac-slate); font-size: 12.5px; line-height: 16px; }
.ac-rule-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 1.5px solid var(--ac-quiet); border-radius: 50%; font-size: 9px; font-weight: 700; line-height: 1; }
.ac-rule.is-ok .ac-rule-icon { background: var(--ac-teal); border-color: var(--ac-teal); color: #fff; }
.ac-rule.is-ok .ac-rule-icon::before { content: "✓"; }
.ac-rule.is-bad { color: var(--ac-late); }
.ac-rule.is-bad .ac-rule-icon { background: var(--ac-late); border-color: var(--ac-late); color: #fff; }
.ac-rule.is-bad .ac-rule-icon::before { content: "✕"; }
.ac-rule--info .ac-rule-icon { border-style: dotted; }

.ac-submit { display: flex; align-items: center; gap: 12px; }
.ac-go { flex: none; height: 40px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--ac-amber); color: var(--ac-ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.ac-go:hover { background: #E0840C; }
.ac-submit .ac-help { font-size: 12.5px; line-height: 18px; flex: 1; }

/* ------------------------------------------------------------------ 04 token */

.ac-token-row { display: flex; align-items: center; gap: 10px; }
.ac-token { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; height: 40px; padding: 0 12px; background: var(--ac-mist); border: 1px solid var(--ac-line); border-radius: 3px; color: var(--ac-slate); }
.ac-token-dots { min-width: 0; font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: 1.5px; overflow: hidden; white-space: nowrap; }
.ac-token-sp { flex: 1; }
.ac-setup { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--ac-ink); border-radius: 3px; }
.ac-code { color: #EAF3F3; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; line-height: 18px; white-space: pre-wrap; word-break: break-all; background: none; }
.ac-token-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ac-token-actions .ac-help { flex: 1; min-width: 200px; }

.ac-dialog { margin: auto; width: 520px; max-width: calc(100vw - 32px); padding: 24px 26px; border: 1px solid var(--ac-line); border-radius: 6px; box-shadow: 0 12px 32px rgba(11, 34, 38, 0.25); color: var(--ac-slate); }
.ac-dialog[open] { display: flex; flex-direction: column; gap: 16px; }
.ac-dialog::backdrop { background: rgba(11, 34, 38, 0.45); }
.ac-dialog-h { display: flex; align-items: center; gap: 10px; }
.ac-dialog-h h2 { margin: 0; font-family: Archivo, system-ui, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }
.ac-dialog-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--ac-paper); border-radius: 3px; }
.ac-dialog-list p { display: flex; gap: 8px; margin: 0; font-size: 12px; line-height: 17px; }
.ac-dialog-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ac-dialog-actions .ac-btn { height: 38px; padding: 0 16px; font-size: 13px; }

/* ------------------------------------------------------------------ 05 leaving */

.ac-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ac-steps li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ac-line-soft); }
.ac-steps strong { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.ac-steps p { margin: 0; color: var(--ac-mute); font-size: 12.5px; line-height: 18px; }
.ac-step-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ac-mist); color: var(--ac-teal); }
.ac-ask { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--ac-mist); border-radius: 3px; }
.ac-person { display: flex; align-items: center; gap: 12px; }
.ac-person .ac-avatar { background: var(--ac-ink); }
.ac-person-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; }
.ac-person-text .ac-m { font-size: 9px; letter-spacing: 1.2px; text-transform: none; }
.ac-person .ac-btn { height: 36px; font-size: 13px; }

/* ------------------------------------------------------------------ side */

.ac-role { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--ac-line-soft); border-radius: 3px; background: #fff; }
.ac-role.is-held { background: var(--ac-mist); border-color: var(--ac-slate); }
.ac-role-h { display: flex; align-items: center; gap: 8px; }
.ac-role-mark { width: 12px; height: 12px; flex: none; border: 1.5px solid var(--ac-quiet); border-radius: 3px; }
.ac-role.is-held .ac-role-mark { background: var(--ac-teal); border-color: var(--ac-teal); }
.ac-role-name { color: var(--ac-mute); font-size: 13px; font-weight: 600; }
.ac-role.is-held .ac-role-name { color: var(--ac-slate); }
.ac-who-changes { display: flex; gap: 9px; padding: 12px 14px; background: var(--ac-paper); border-radius: 3px; color: var(--ac-slate); }
.ac-who-changes p { margin: 0; font-size: 12px; line-height: 17px; }
.ac-who-changes .nv-icon { margin-top: 2px; color: var(--ac-mute); }

.ac-figures { display: flex; gap: 22px; flex-wrap: wrap; }
.ac-figures > div { display: flex; flex-direction: column; gap: 5px; }
.ac-v { color: var(--ac-slate); font-family: Archivo, system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -0.4px; }
.ac-v--late { color: var(--ac-late); }
.ac-v--started { color: var(--ac-flight); }
.ac-v--done { color: var(--ac-teal); }
.ac-sprints { display: flex; flex-direction: column; }
.ac-sprint { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ac-line-soft); font-size: 12.5px; }
.ac-sprint > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ac-phone-summary { display: none; }
.ac-panel--tight { gap: 6px; padding: 14px 16px; }
.ac-panel--link { text-decoration: none; }
.ac-saved--token { align-items: center; }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1100px) {
  .ac-cols { flex-direction: column; }
  .ac-side { width: 100%; }
}

@media (max-width: 900px) {
  .ac-body { padding: 22px 20px 26px; gap: 16px; }
  .ac-title { font-size: 26px; line-height: 30px; letter-spacing: -0.6px; }
  .ac-avatar { width: 44px; height: 44px; font-size: 13px; }
  .ac-actions { display: none; }
  .ac-m--meta { font-size: 9px; letter-spacing: 1.2px; }
  .ac-phone-summary { display: flex; flex-direction: column; gap: 10px; }
  .ac-side { display: none; }
  .ac-row { flex-direction: column; }
  .ac-panel { padding: 16px; }
  .ac-submit { flex-direction: column; align-items: stretch; }
  .ac-go { width: 100%; }
  .ac-token-row { flex-direction: column; align-items: stretch; }
  .ac-token .ac-m { display: none; }
  .ac-cols, .ac-main { width: 100%; min-width: 0; }
  .ac-receipt-from { width: 90px; }
  .ac-receipt-k { width: 70px; }
}
/*
 * Auth screen (sign in, password reset).
 *
 * Deliberately single-theme: the split ink/paper ground is the identity, so this
 * screen does not follow the app's `.dark` class. Every colour is explicit.
 */

.auth-screen {
  --auth-ink: #0b2226;
  --auth-teal: #246871;
  --auth-rail: #6fa9af;
  --auth-edge: #2e6e75;
  --auth-amber: #f29111;
  --auth-amber-hover: #da820c;
  --auth-paper: #f1f5f5;
  --auth-slate: #12292d;
  --auth-mute: #4f6c6f;
  --auth-placeholder: #5f797c;
  --auth-line: #c9dadb;
  --auth-line-dark: rgba(255, 255, 255, 0.12);
  --auth-alert: #a32f1d;
  --auth-alert-bg: #f7e7e2;
  --auth-alert-text: #6b3125;
  --auth-info-bg: #e4eeee;
  --auth-panel-text: #eaf3f3;
  --auth-panel-dim: #a8c4c6;
  --auth-node-label: #b9d2d4;

  /* One tone per transition type: forward progress, rejection, cancellation,
     reopening. Each clears 4.5:1 on the ink ground. */
  --auth-tone-go: #f29111;
  --auth-tone-reject: #ef5b45;
  --auth-tone-cancel: #93aaad;
  --auth-tone-reopen: #5cc9d1;

  display: grid;
  grid-template-columns: minmax(0, 820fr) minmax(0, 620fr);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--auth-paper);
  color: var(--auth-slate);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.auth-mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
}

/* The ConOp arc: the one element that crosses the seam between the halves. */
.auth-arc {
  position: absolute;
  left: 20.8%;
  top: 7.5%;
  width: 53.5%;
  height: auto;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.auth-arc path {
  fill: none;
  stroke: var(--auth-amber);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: auth-draw 1.4s 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---------------------------------------------------------------- panel -- */

/* <main> comes first in the DOM so the sign-in task is read and reached first;
   grid placement puts the complementary panel on the left visually. */
.auth-panel {
  grid-column: 1;
  grid-row: 1;
  background: var(--auth-ink);
  color: var(--auth-panel-text);
  padding: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  min-width: 0;
}

.auth-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.auth-lockup-company {
  font-size: 14px;
  font-weight: 500;
  color: #dceaea;
}

.auth-lockup-slash {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #3e6165;
}

.auth-lockup-scope {
  color: var(--auth-rail);
  letter-spacing: 0.18em;
}

.auth-mark {
  width: 36px;
  height: 23px;
  display: block;
  flex: none;
}

.auth-statement {
  max-width: 600px;
}

.auth-eyebrow {
  margin: 0;
  color: var(--auth-amber);
  letter-spacing: 0.24em;
  display: block;
}

.auth-wordmark {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 7.2vw, 104px);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 16px 0;
  color: #fff;
}

/* Scoped to its own class: a `.auth-statement p` descendant selector outranks
   .auth-mono and silently resized/recoloured the eyebrow. */
.auth-statement-lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--auth-panel-dim);
  text-wrap: balance;
}

/* ------------------------------------------------------------ lifecycle -- */

.auth-lifecycle {
  min-width: 0;
  margin: 0;
}

.auth-caption-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.auth-caption-row .auth-caption {
  color: var(--auth-rail);
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.auth-caption-row .auth-rule {
  flex: 1;
  height: 1px;
  background: var(--auth-line-dark);
}

.auth-caption-row .auth-count {
  color: #4e7c81;
  font-size: 10px;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.auth-graph {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.auth-graph-compact {
  display: none;
}

/* The state machine itself. Node/label numbering follows the AASM order:
   1 pending, 2 in_progress, 3 completed, 4 verified, 5 cancelled. */

.auth-edge {
  fill: none;
  stroke: var(--auth-edge);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: auth-draw 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.auth-edge.is-spine { stroke-width: 1.5; animation-delay: 0s; }
.auth-edge.is-reject { animation-delay: 0.25s; }
.auth-edge.is-cancel { animation-delay: 0.4s; }
.auth-edge.is-reopen { animation-delay: 0.55s; }

.auth-head {
  fill: #3e838a;
  opacity: 0;
  animation: auth-appear 0.3s forwards;
}

.auth-head.is-reject { animation-delay: 1s; }
.auth-head.is-cancel { animation-delay: 1.15s; }
.auth-head.is-reopen { animation-delay: 1.3s; }

.auth-edge-label {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  fill: #4e7c81;
  opacity: 0;
  animation: auth-appear 0.4s 1.2s forwards;
}

.auth-node {
  fill: var(--auth-ink);
  stroke: #3e838a;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: auth-pop 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

.auth-node { transition: fill 0.35s; }
.auth-node-1 { animation-delay: 0.3s; }
.auth-node-2 { animation-delay: 0.45s; }
.auth-node-3 { animation-delay: 0.6s; }
.auth-node-4 { animation-delay: 0.75s; }
.auth-node-5 { animation-delay: 0.9s; }

.auth-node-label {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  fill: var(--auth-node-label);
  opacity: 0;
  animation: auth-appear 0.4s forwards;
}

.auth-node-label { transition: fill 0.35s; }
.auth-node-label-1 { animation-delay: 0.4s; }
.auth-node-label-2 { animation-delay: 0.55s; }
.auth-node-label-3 { animation-delay: 0.7s; }
.auth-node-label-4 { animation-delay: 0.85s; }
.auth-node-label-5 { animation-delay: 1s; }

/* Entry: the machine draws itself in once on load. */
@keyframes auth-draw { to { stroke-dashoffset: 0; } }
@keyframes auth-appear { to { opacity: 1; } }
@keyframes auth-pop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

/* The running token, the trail it leaves, and the states it lights.
   The tour is driven by lifecycle_controller.js; these are only the paint
   rules it toggles, so the colours stay in the stylesheet. */

.auth-trail {
  fill: none;
  stroke: var(--tone, var(--auth-tone-go));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: opacity 0.45s;
}

.auth-token-group {
  opacity: 0;
  transition: opacity 0.45s;
}

.auth-token-group.is-running { opacity: 1; }
.auth-token { fill: var(--tone, var(--auth-tone-go)); }
.auth-halo { fill: var(--tone, var(--auth-tone-go)); opacity: 0.2; }

.auth-node.is-lit { fill: var(--tone); stroke-opacity: 0; }
.auth-node-label.is-lit { fill: var(--tone); }

.auth-pulse {
  fill: none;
  stroke: var(--tone, var(--auth-tone-go));
  stroke-width: 1.5;
  opacity: 0;
}

.auth-pulse.is-pulsing { animation: auth-pulse 0.7s ease-out; }

@keyframes auth-pulse {
  from { r: 6; opacity: 0.55; }
  to { r: 22; opacity: 0; }
}

/* ----------------------------------------------------------- form column -- */

.auth-col {
  background: var(--auth-paper);
  padding: 72px 100px;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-width: 0;
  z-index: 1;
}

.auth-form {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  width: 100%;
}

.auth-title {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 10px;
  color: var(--auth-slate);
}

.auth-subtitle {
  margin: 0 0 34px;
  color: var(--auth-mute);
}

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  color: var(--auth-teal);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
}

.auth-back:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- banner -- */

.auth-banner {
  border-radius: 4px;
  padding: 14px 16px;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-banner p { margin: 0; }

.auth-banner--error {
  background: var(--auth-alert-bg);
  border-left: 3px solid var(--auth-alert);
  color: var(--auth-alert-text);
}

.auth-banner--error .auth-banner-kicker { color: var(--auth-alert); }

.auth-banner--info {
  background: var(--auth-info-bg);
  border-left: 3px solid var(--auth-teal);
  color: #26454a;
}

.auth-banner--info .auth-banner-kicker { color: var(--auth-teal); }

.auth-banner-list {
  margin: 0;
  padding-left: 18px;
}

/* ---------------------------------------------------------------- fields -- */

.auth-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.auth-label {
  color: var(--auth-mute);
  display: block;
}

.auth-input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--auth-line);
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  color: var(--auth-slate);
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.auth-input::placeholder { color: var(--auth-placeholder); }

.auth-input:hover:not(:focus):not(:disabled) { border-color: #a9c1c3; }

.auth-input:focus {
  outline: none;
  border-color: var(--auth-teal);
  box-shadow: 0 0 0 1px var(--auth-teal);
}

.auth-input:disabled {
  background: #f6f9f9;
  color: var(--auth-mute);
  cursor: not-allowed;
}

/* Keep the browser's autofill from repainting the field. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-slate);
  box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

.auth-field.is-invalid .auth-input {
  border-color: var(--auth-alert);
}

.auth-field.is-invalid .auth-input:focus {
  box-shadow: 0 0 0 1px var(--auth-alert);
}

.auth-field-message {
  margin: 0;
  font-size: 13px;
  color: var(--auth-alert);
  display: none;
}

.auth-field.is-invalid .auth-field-message { display: block; }

.auth-field-note {
  margin: 0;
  font-size: 13px;
  color: var(--auth-mute);
  display: none;
}

.auth-field-note.is-visible { display: block; }

/* No `font` shorthand here: it would reset the family and size that
   .auth-mono supplies, at equal specificity but later in the cascade. */
.auth-reveal {
  background: none;
  border: 0;
  padding: 2px 4px;
  margin: -2px -4px;
  color: var(--auth-teal);
  cursor: pointer;
  font-weight: 500;
  line-height: 1;
}

.auth-reveal:hover { color: var(--auth-ink); }

/* The in-field eye is a pointer-only duplicate of the labelled SHOW/HIDE
   button, so it stays out of the tab order and out of the a11y tree. */
.auth-input-wrap {
  position: relative;
  display: flex;
}

.auth-input-wrap .auth-input { padding-right: 46px; }

.auth-affix {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--auth-placeholder);
  cursor: pointer;
  transition: color 0.15s;
}

.auth-affix:hover { color: var(--auth-teal); }

.auth-affix .auth-eye-off { display: none; }
.auth-field.is-revealed .auth-affix .auth-eye { display: none; }
.auth-field.is-revealed .auth-affix .auth-eye-off { display: block; }

.auth-reveal:focus-visible {
  outline: 2px solid var(--auth-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------- options -- */

/* Forms without an options row still need the same gap above the button. */
.auth-fields + .auth-submit,
.auth-hint + .auth-submit { margin-top: 30px; }

.auth-hint {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--auth-mute);
}

.auth-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0 30px;
}

.auth-keep {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--auth-slate);
  font-size: 14px;
  cursor: pointer;
}

.auth-keep input {
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  flex: none;
  background: #fff;
  border: 1px solid var(--auth-line);
  border-radius: 3px;
  cursor: pointer;
}

.auth-keep input:checked {
  background: var(--auth-teal);
  border-color: var(--auth-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E");
  background-size: 13px;
  background-position: center;
  background-repeat: no-repeat;
}

.auth-keep input:focus-visible {
  outline: 2px solid var(--auth-teal);
  outline-offset: 2px;
}

.auth-link {
  color: var(--auth-teal);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.auth-link:hover { text-decoration: underline; }

.auth-link:focus-visible {
  outline: 2px solid var(--auth-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- button -- */

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 54px;
  background: var(--auth-amber);
  color: var(--auth-ink);
  border: 0;
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.06s;
}

.auth-submit:hover { background: var(--auth-amber-hover); }
.auth-submit:active { transform: translateY(1px); }

.auth-submit:focus-visible {
  outline: 2px solid var(--auth-ink);
  outline-offset: 3px;
}

.auth-submit svg { flex: none; }

.auth-submit-spinner,
.auth-submit-check { display: none; }

.auth-submit-spinner { transform-origin: center; }

/* Loading: the button keeps its weight, swaps the arrow for a spinner. */
.auth-submit.is-loading {
  cursor: progress;
  pointer-events: none;
}

.auth-submit.is-loading .auth-submit-arrow { display: none; }
.auth-submit.is-loading .auth-submit-spinner {
  display: block;
  animation: auth-spin 0.7s linear infinite;
}

/* Success: held for the moment between a 200 and the redirect landing. */
.auth-submit.is-success {
  pointer-events: none;
  background: var(--auth-amber);
}

.auth-submit.is-success .auth-submit-arrow,
.auth-submit.is-success .auth-submit-spinner { display: none; }
.auth-submit.is-success .auth-submit-check { display: block; }

.auth-submit:disabled {
  background: #e3d3bd;
  color: #7d7566;
  cursor: not-allowed;
}

@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- footer -- */

.auth-foot-wrap {
  position: absolute;
  left: 100px;
  right: 100px;
  bottom: 72px;
}

.auth-foot {
  border-top: 1px solid var(--auth-line);
  padding-top: 12px;
  margin: 0;
  color: var(--auth-mute);
  font-size: 13px;
}

/* Screen-reader-only live region for state announcements. */
.auth-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 900px) {
  .auth-screen {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .auth-panel { grid-column: 1; grid-row: 1; }
  .auth-col { grid-column: 1; grid-row: 2; }

  .auth-arc { display: none; }

  .auth-panel { padding: 40px 28px; gap: 32px; }
  .auth-wordmark { font-size: 56px; margin: 12px 0; }
  .auth-statement p { font-size: 14px; }

  .auth-graph { display: none; }
  .auth-graph-compact { display: block; width: 100%; height: auto; overflow: visible; }
  .auth-caption-row { margin-bottom: 14px; }
  .auth-caption-row .auth-count { display: none; }

  .auth-col { padding: 36px 28px 40px; justify-content: flex-start; }
  .auth-title { font-size: 30px; }

  .auth-foot-wrap { position: static; margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-screen *,
  .auth-screen *::before,
  .auth-screen *::after {
    animation: none !important;
    transition: none !important;
  }

  .auth-arc path,
  .auth-edge { stroke-dashoffset: 0; }

  .auth-head,
  .auth-edge-label,
  .auth-node,
  .auth-node-label { opacity: 1; }

  /* lifecycle_controller.js parks the tour at COMPLETED instead of running it. */

  /* The spinner is the only signal that the form is working; keep it legible
     without rotating it. */
  .auth-submit.is-loading .auth-submit-spinner { display: block; opacity: 0.75; }
}
/*
 * Bug detail (bugs#show).
 *
 * Same palette, type and vocabulary as the sign-in screen and the desk
 * dashboard. Every rule is scoped under `.bugd` so none of it leaks into the
 * Tailwind pages around it.
 *
 * The page is built on one idea: a bug report is evidence plus a claim.
 *  - The claim is Expected against Actual, side by side. They are the one
 *    comparison that matters and the old page rendered them as two rows of an
 *    eighteen-field <dl>, where they could not be read against each other.
 *  - The evidence — route, role, locale, environment, browser, viewport — is a
 *    single spec panel, not seven cells scattered through the same grid as the
 *    prose.
 *
 * Two colour rules worth knowing before editing:
 *
 *  - Bright brand tones (amber #f29111, red #ef5b45) clear 4.5:1 on ink but not
 *    on white — 2.4:1 and 3.4:1. On these light surfaces small text uses
 *    --bugd-late / --bugd-flight instead, which carry the same meaning at ~6:1.
 *    The bright tones stay on accents, meters and dots, which are decorative:
 *    each sits beside the number or the word it encodes.
 *  - The triage band is a light alert surface, not an ink one. Ink is reserved
 *    for live-machine panels (the running timer, the current sprint). A tint
 *    fill separates from the page ground at only 1.07:1, so the 1px border and
 *    the 4px edge do the work — both clear 5:1.
 */

.bugd {
  --bugd-ink: #0b2226;
  --bugd-slate: #12292d;
  --bugd-mute: #4f6c6f;
  --bugd-paper: #f1f5f5;
  --bugd-surface: #fff;
  --bugd-line: #c9dadb;
  --bugd-line-soft: #dee8e8;
  --bugd-tint: #eff4f4;
  --bugd-track: #e7efef;

  --bugd-teal: #246871;
  --bugd-rail: #6fa9af;
  --bugd-amber: #f29111;
  --bugd-reject: #ef5b45;

  /* Text-safe counterparts for white and tinted surfaces. */
  --bugd-late: #b7331d;      /* 5.99:1 on #fff, 5.10:1 on the alert tint */
  --bugd-flight: #8a5300;    /* 6.33:1 on #fff */
  --bugd-chevron: #6e8a8d;   /* 3.70:1 on #fff — a UI control, floor is 3:1 */

  --bugd-late-tint: #fbe9e4;
  --bugd-warn-tint: #fdf1e4;

  --bugd-hover: #eaf2f2;

  /* Horizontal padding mirrors the layout's `px-4`; .bugd-page below mirrors
     `container mx-auto`, so the content box matches every other page while the
     paper ground still runs edge to edge. */
  padding: 32px 16px 48px;
  min-height: calc(100vh - 64px);
  background: var(--bugd-paper);
  color: var(--bugd-slate);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.bugd-page { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-inline: auto; }

/* Tailwind v4 container breakpoints, less the layout's 2rem of px-4. */
@media (min-width: 40rem) { .bugd-page { max-width: 38rem; } }
@media (min-width: 48rem) { .bugd-page { max-width: 46rem; } }
@media (min-width: 64rem) { .bugd-page { max-width: 62rem; } }
@media (min-width: 80rem) { .bugd-page { max-width: 78rem; } }
@media (min-width: 96rem) { .bugd-page { max-width: 94rem; } }

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

.bugd a { color: inherit; text-decoration: none; }
.bugd a:focus-visible,
.bugd button:focus-visible,
.bugd summary:focus-visible,
.bugd textarea:focus-visible {
  outline: 2px solid var(--bugd-amber);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------- micro -- */

.bugd-mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  color: var(--bugd-chevron);
}

.bugd-crumb {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 10px;
  color: var(--bugd-mute);
  margin: 0;
}
.bugd-crumb a:hover { color: var(--bugd-teal); }

/* -------------------------------------------------------------- header -- */

.bugd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.bugd-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }

.bugd-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bugd-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px;
  border-radius: 3px;
  background: var(--bugd-tint);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--bugd-slate);
  white-space: nowrap;
}
.bugd-pill--alarm { background: var(--bugd-late-tint); color: var(--bugd-late); }
.bugd-pill--warn  { background: var(--bugd-warn-tint); color: var(--bugd-flight); }

.bugd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bugd-rail); flex: none; }
.bugd-dot--progress { background: var(--bugd-amber); }
.bugd-dot--done { background: #3e838a; }
.bugd-dot--verified { background: #55959b; }
.bugd-dot--cancelled { background: #93aaad; }
.bugd-dot--alarm { background: var(--bugd-reject); }

/* Severity is a four-step ordinal scale — minor, moderate, major, blocker.
   The old page painted blocker red and the other three the same yellow, so
   three of the four states looked identical. The meter shows the position. */
.bugd-sev { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; border-radius: 3px; background: var(--bugd-warn-tint); }
.bugd-sev--low { background: var(--bugd-tint); }
.bugd-sev--high { background: var(--bugd-late-tint); }
.bugd-sev-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bugd-flight); }
.bugd-sev--low .bugd-sev-label { color: var(--bugd-mute); }
.bugd-sev--high .bugd-sev-label { color: var(--bugd-late); }
.bugd-sev-meter { display: inline-flex; gap: 2px; }
.bugd-sev-seg { width: 7px; height: 9px; border-radius: 1px; background: #e1d7c6; }
.bugd-sev-seg--on { background: var(--bugd-amber); }
.bugd-sev--low .bugd-sev-seg { background: var(--bugd-track); }
.bugd-sev--low .bugd-sev-seg--on { background: var(--bugd-rail); }
.bugd-sev--high .bugd-sev-seg--on { background: var(--bugd-reject); }

.bugd-title {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 29px;
  letter-spacing: -0.024em;
  line-height: 1.18;
  margin: 0;
  color: var(--bugd-slate);
}

.bugd-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bugd-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
  border-radius: 3px; background: var(--bugd-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bugd-teal);
}

.bugd-route {
  display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px;
  border-radius: 3px; background: var(--bugd-paper); border: 1px solid var(--bugd-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; color: var(--bugd-slate); max-width: 100%;
}
.bugd-route span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bugd-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.bugd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 34px; padding: 0 14px; border-radius: 4px;
  border: 1px solid var(--bugd-line); background: var(--bugd-surface);
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--bugd-teal);
  cursor: pointer; white-space: nowrap;
}
.bugd-btn:hover { background: var(--bugd-hover); }
.bugd-btn--primary {
  height: 38px; padding: 0 18px; border-color: var(--bugd-amber);
  background: var(--bugd-amber); color: var(--bugd-ink); font-size: 14px; font-weight: 600;
}
.bugd-btn--primary:hover { background: #dd8410; }
.bugd-btn--danger { color: var(--bugd-late); }
.bugd-btn--small { height: 30px; padding: 0 12px; font-size: 12.5px; }
.bugd-btn form { display: contents; }

/* ---------------------------------------------------------- triage band -- */

.bugd-band {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
  border-radius: 4px;
  background: var(--bugd-late-tint);
  border: 1px solid var(--bugd-late);
  border-left-width: 4px;
  padding: 20px 24px 18px 22px;
}
.bugd-band--calm { background: var(--bugd-tint); border-color: var(--bugd-line); border-left-color: var(--bugd-rail); }

.bugd-band-main { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 11px; }
.bugd-band-eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bugd-mute); }
.bugd-band-head {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: 20px; letter-spacing: -0.015em; line-height: 1.3;
  margin: 0; color: var(--bugd-slate);
}
.bugd-band-side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }

.bugd-evidence-row { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding-top: 2px; }

/* The impossible date pair is shown, not described: the arrow points the wrong
   way round and the verdict sits inside the same box. */
.bugd-datepair {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 7px 11px; border-radius: 3px;
  background: var(--bugd-surface); border: 1px solid var(--bugd-late);
}
.bugd-datechip { display: inline-flex; align-items: center; gap: 7px; }
.bugd-datechip-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bugd-mute); }
.bugd-datechip-v { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--bugd-late); }
.bugd-datepair-div { width: 1px; height: 15px; background: var(--bugd-late); opacity: 0.4; }
.bugd-datepair-verdict { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bugd-late); }

.bugd-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 3px;
  background: var(--bugd-surface); border: 1px solid var(--bugd-line);
}
.bugd-chip-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bugd-mute); }
.bugd-chip-v { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--bugd-slate); }

.bugd-band-note { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bugd-mute); }

/* ------------------------------------------------------------- columns -- */

.bugd-columns { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.bugd-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.bugd-panel {
  background: var(--bugd-surface);
  border: 1px solid var(--bugd-line);
  border-radius: 4px;
  padding: 22px 24px 20px;
  min-width: 0;
}
.bugd-panel--tight { padding: 22px 22px 16px; }

.bugd-panel-head { display: flex; align-items: center; gap: 14px; padding-bottom: 4px; }
.bugd-panel-title {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--bugd-slate); white-space: nowrap;
}
.bugd-rule { flex: 1; min-width: 12px; height: 1px; background: var(--bugd-line); }
.bugd-panel-scope { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bugd-mute); text-align: right; white-space: nowrap; }
.bugd-panel-scope--alarm { color: var(--bugd-late); }

/* --------------------------------------------------------------- claim -- */

.bugd-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.bugd-claim { border-radius: 3px; padding: 14px 16px 14px 15px; border-left: 3px solid var(--bugd-teal); background: var(--bugd-tint); }
.bugd-claim--actual { border-left-color: var(--bugd-reject); background: var(--bugd-late-tint); }
.bugd-claim-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bugd-teal); }
.bugd-claim--actual .bugd-claim-label { color: var(--bugd-reject); }
.bugd-claim-body { margin-top: 9px; font-size: 13.5px; line-height: 1.5; color: var(--bugd-slate); }

/* Markdown coming out of render_markdown, kept quiet inside the panels. */
.bugd-prose { font-size: 13.5px; line-height: 1.55; color: var(--bugd-slate); }
.bugd-prose > :first-child { margin-top: 0; }
.bugd-prose > :last-child { margin-bottom: 0; }
.bugd-prose p { margin: 0 0 10px; }
.bugd-prose ul, .bugd-prose ol { margin: 0 0 10px; padding-left: 20px; }
.bugd-prose li { margin: 3px 0; }
.bugd-prose code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; background: var(--bugd-tint); padding: 1px 5px; border-radius: 3px; }
.bugd-prose pre { background: var(--bugd-tint); border: 1px solid var(--bugd-line-soft); border-radius: 3px; padding: 12px; overflow-x: auto; }
.bugd-prose a { color: var(--bugd-teal); text-decoration: underline; }

/* ------------------------------------------------------------ reproduce -- */

.bugd-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; counter-reset: bugd-step; }
.bugd-step { display: flex; align-items: flex-start; gap: 12px; }
.bugd-step-n {
  counter-increment: bugd-step; flex: none;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bugd-tint);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; color: var(--bugd-teal);
}
.bugd-step-n::before { content: counter(bugd-step); }
.bugd-step-t { font-size: 13.5px; line-height: 1.45; color: var(--bugd-slate); }

.bugd-log {
  margin-top: 14px; padding: 12px 14px; border-radius: 3px;
  background: var(--bugd-tint); border: 1px solid var(--bugd-line-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.5;
  color: var(--bugd-slate); white-space: pre-wrap; overflow-x: auto;
}

/* ------------------------------------------------------------- evidence -- */

.bugd-shots { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.bugd-shot {
  width: 200px; height: 118px; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--bugd-line); background: var(--bugd-paper);
  padding: 0; cursor: pointer; display: block;
}
.bugd-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bugd-shot:hover { border-color: var(--bugd-teal); }

.bugd-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(11, 34, 38, 0.88); padding: 24px; }
.bugd-modal.hidden { display: none; }
.bugd-modal img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.bugd-modal-close { position: absolute; top: 18px; right: 18px; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }

/* ------------------------------------------------------------- activity -- */

.bugd-event { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-top: 1px solid var(--bugd-line-soft); }
.bugd-avatar {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bugd-tint); color: var(--bugd-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px;
}
.bugd-event-body { flex: 1; min-width: 0; font-size: 13.5px; color: var(--bugd-slate); }
.bugd-event-when { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bugd-chevron); white-space: nowrap; }
.bugd-event--quiet .bugd-event-body { color: var(--bugd-mute); }

.bugd-comment { padding: 16px 0; border-top: 1px solid var(--bugd-line-soft); display: flex; gap: 12px; }
.bugd-comment-main { flex: 1; min-width: 0; }
.bugd-comment-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.bugd-comment-who { font-size: 13.5px; font-weight: 500; color: var(--bugd-slate); }

.bugd-composer { padding-top: 16px; border-top: 1px solid var(--bugd-line-soft); display: flex; flex-direction: column; gap: 10px; }
.bugd-composer textarea {
  width: 100%; min-height: 76px; resize: vertical;
  padding: 12px 14px; border-radius: 4px;
  border: 1px solid var(--bugd-line); background: var(--bugd-paper);
  font-family: inherit; font-size: 13.5px; line-height: 1.5; color: var(--bugd-slate);
}
.bugd-composer textarea::placeholder { color: #5f797c; }
.bugd-composer textarea:focus { outline: none; border-color: var(--bugd-teal); box-shadow: 0 0 0 3px rgba(36, 104, 113, 0.12); }
.bugd-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bugd-submit {
  height: 32px; padding: 0 14px; border-radius: 4px; border: 0;
  background: var(--bugd-teal); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.bugd-submit:hover { background: #1d535a; }

/* -------------------------------------------------------------- context -- */

.bugd-spec { display: flex; flex-direction: column; }
.bugd-spec-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--bugd-line-soft); }
.bugd-spec-k { flex: none; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bugd-chevron); padding-top: 2px; }
.bugd-spec-v { flex: 1; min-width: 0; text-align: right; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--bugd-slate); overflow-wrap: anywhere; }
.bugd-spec-v--mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 400; }
.bugd-spec-v--empty { color: var(--bugd-chevron); font-weight: 400; }

/* A route is long and has no natural break point. Right-aligned it wraps
   mid-token and reads as broken, so its row stacks and goes left-aligned. */
.bugd-spec-row--stack { flex-direction: column; align-items: stretch; gap: 5px; }
.bugd-spec-row--stack .bugd-spec-v { text-align: left; }

.bugd-intro { font-size: 12.5px; line-height: 1.45; color: var(--bugd-mute); margin: 0 0 4px; }
.bugd-note { font-size: 12.5px; line-height: 1.45; color: var(--bugd-mute); margin: 12px 0 0; }
.bugd-quote { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--bugd-slate); margin: 12px 0 0; }

.bugd-linkrow { display: flex; align-items: center; gap: 12px; padding: 16px 0 0; border-top: 1px solid var(--bugd-line-soft); }
.bugd-linkrow-accent { flex: none; width: 3px; height: 34px; border-radius: 2px; background: var(--bugd-rail); }
.bugd-linkrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bugd-linkrow-title { font-size: 13.5px; font-weight: 600; color: var(--bugd-slate); }

.bugd-empty { padding: 16px 0 0; border-top: 1px solid var(--bugd-line-soft); font-size: 13px; color: var(--bugd-mute); line-height: 1.45; }

.bugd-icon { flex: none; width: 15px; height: 15px; stroke-width: 2; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1100px) {
  .bugd-columns { grid-template-columns: minmax(0, 1fr); }
  .bugd-compare { grid-template-columns: minmax(0, 1fr); }
  .bugd-title { font-size: 24px; }
  .bugd-band { flex-direction: column; }
  .bugd-band-side { align-items: stretch; width: 100%; }
  .bugd-btn--primary { width: 100%; }
}
/*
 * Reporting a bug (bugs#new, bugs#edit).
 *
 * Same palette and type as the bugs queue, the bug detail and the software
 * pages. Everything is scoped under `.bugf` so none of it leaks into the
 * Tailwind pages around it.
 *
 * Two rules carry most of the design:
 *
 *  - Selection is a class, not a colour. Every chip, tick and toggle is marked
 *    `.is-on` and takes its tone from `data-tone` here in CSS. The controller
 *    used to hold six near-identical handlers, each splicing Tailwind class
 *    names in and out; it now sets one class and lets the stylesheet decide
 *    what that means.
 *  - Severity is an ordinal — minor ‹ moderate ‹ major ‹ blocker — so it is a
 *    four-step meter, the same one the bug detail draws. Four loose pills said
 *    "pick a colour"; a meter says "pick a rung".
 */

.bugf {
  --bugf-ink: #0b2226;
  --bugf-slate: #12292d;
  --bugf-mute: #4f6c6f;
  --bugf-paper: #f1f5f5;
  --bugf-surface: #fff;
  --bugf-line: #c9dadb;
  --bugf-line-soft: #dee8e8;
  --bugf-tint: #eff4f4;
  --bugf-track: #e7efef;
  --bugf-zebra: #f6fafa;

  --bugf-teal: #246871;
  --bugf-rail: #6fa9af;
  --bugf-amber: #f29111;
  --bugf-reject: #ef5b45;
  --bugf-alert: #a32f1d;

  --bugf-late: #b7331d;
  --bugf-flight: #8a5300;
  --bugf-chevron: #6e8a8d;

  --bugf-late-tint: #fbe9e4;
  --bugf-warn-tint: #fdf1e4;
  --bugf-hover: #eaf2f2;
  --bugf-placeholder: #5f797c;

  padding: 32px 16px 48px;
  min-height: calc(100vh - 64px);
  background: var(--bugf-paper);
  color: var(--bugf-slate);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.bugf-page { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-inline: auto; }

/* Tailwind v4 container breakpoints, less the layout's 2rem of px-4. */
@media (min-width: 40rem) { .bugf-page { max-width: 38rem; } }
@media (min-width: 48rem) { .bugf-page { max-width: 46rem; } }
@media (min-width: 64rem) { .bugf-page { max-width: 62rem; } }
@media (min-width: 80rem) { .bugf-page { max-width: 78rem; } }
@media (min-width: 96rem) { .bugf-page { max-width: 94rem; } }

.bugf *, .bugf *::before, .bugf *::after { box-sizing: border-box; }
.bugf a { color: inherit; text-decoration: none; }
.bugf a:focus-visible,
.bugf button:focus-visible,
.bugf select:focus-visible,
.bugf input:focus-visible,
.bugf textarea:focus-visible {
  outline: 2px solid var(--bugf-amber);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ atoms */

.bugf-mono {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--bugf-mute);
}
.bugf-note {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--bugf-chevron);
}
.bugf-note--bad { color: var(--bugf-late); }
.bugf-note--warn { color: var(--bugf-flight); }
.bugf-note--good { color: var(--bugf-teal); }

.bugf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--bugf-line);
  border-radius: 4px;
  background: var(--bugf-surface);
  color: var(--bugf-slate);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.bugf-btn:hover { background: var(--bugf-hover); }
.bugf-btn--go { background: var(--bugf-amber); border-color: var(--bugf-amber); color: var(--bugf-ink); }
.bugf-btn--go:hover { background: #dd8410; border-color: #dd8410; }
.bugf-btn--small { height: 26px; padding: 0 10px; gap: 6px; font-size: 11.5px; border-radius: 3px; font-weight: 500; }
.bugf-btn svg { width: 13px; height: 13px; flex: none; }

/* Crumb and header ------------------------------------------------------ */

.bugf-crumb { display: flex; align-items: center; gap: 12px; }
.bugf-crumb-trail {
  flex: 1 1 0;
  min-width: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--bugf-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bugf-head { display: flex; align-items: flex-start; gap: 32px; }
.bugf-head-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.bugf-title {
  margin: 0;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.08;
  color: var(--bugf-slate);
}
.bugf-sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--bugf-mute); max-width: 76ch; }
.bugf-actions { display: flex; align-items: center; gap: 9px; flex: none; }

/* The form element is one child of .bugf-page, so it has to carry the same
   rhythm itself or the progress panel sits flush against the sections. */
.bugf-form { display: flex; flex-direction: column; gap: 20px; }

/* Progress -------------------------------------------------------------- */

.bugf-progress {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  background: var(--bugf-surface);
  border: 1px solid var(--bugf-line);
  border-radius: 4px;
}
.bugf-progress-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bugf-segs { display: flex; gap: 5px; }
.bugf-seg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bugf-seg-bar { height: 4px; border-radius: 2px; background: var(--bugf-track); transition: background 200ms; }
.bugf-seg.is-done .bugf-seg-bar { background: var(--bugf-teal); }
.bugf-seg.is-now .bugf-seg-bar { background: var(--bugf-amber); }
.bugf-seg-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--bugf-chevron);
}
.bugf-seg.is-done .bugf-seg-label, .bugf-seg.is-now .bugf-seg-label { color: var(--bugf-mute); }
.bugf-progress-right { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex: none; }
.bugf-score {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--bugf-late);
}
.bugf-score[data-band="mid"] { color: var(--bugf-flight); }
.bugf-score[data-band="high"] { color: var(--bugf-teal); }

/* Columns --------------------------------------------------------------- */

.bugf-cols { display: flex; align-items: flex-start; gap: 20px; }
.bugf-col-form { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bugf-rail { width: 420px; flex: none; display: flex; flex-direction: column; gap: 16px; }

/* Sections -------------------------------------------------------------- */

.bugf-section {
  background: var(--bugf-surface);
  border: 1px solid var(--bugf-line);
  border-radius: 6px;
}
.bugf-section[data-open="true"] { border-color: var(--bugf-rail); }
.bugf-section.is-error { border-color: var(--bugf-late); }

.bugf-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 22px;
  cursor: pointer;
  user-select: none;
}
.bugf-sec-head:hover { background: var(--bugf-zebra); }
.bugf-sec-num {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--bugf-tint);
  color: var(--bugf-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
}
.bugf-sec-num svg { width: 12px; height: 12px; }
.bugf-section.is-complete .bugf-sec-num { background: var(--bugf-teal); color: #fff; }
.bugf-section.is-error .bugf-sec-num { background: var(--bugf-late); color: #fff; }
.bugf-sec-title { flex: 1 1 0; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--bugf-slate); }
.bugf-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 10px;
  background: var(--bugf-paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--bugf-chevron);
  white-space: nowrap;
}
.bugf-badge--required { background: var(--bugf-warn-tint); color: var(--bugf-flight); }
.bugf-section.is-error .bugf-badge { background: var(--bugf-late-tint); color: var(--bugf-late); }
.bugf-chev { width: 15px; height: 15px; color: var(--bugf-chevron); flex: none; transition: transform 200ms; }
.bugf-section[data-open="true"] .bugf-chev { transform: rotate(180deg); color: var(--bugf-teal); }

.bugf-sec-body {
  overflow: hidden;
  transition: max-height 300ms, padding 300ms;
  padding: 2px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Fields ---------------------------------------------------------------- */

.bugf-field { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; }
.bugf-row { display: flex; align-items: flex-start; gap: 16px; }
.bugf-row > .bugf-field { flex: 1 1 0; }

.bugf-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--bugf-mute);
}
.bugf-label .req { color: var(--bugf-late); }
.bugf-hint { margin: -4px 0 0; font-size: 12px; line-height: 1.5; color: var(--bugf-chevron); }

.bugf-input,
.bugf-textarea,
.bugf-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bugf-line);
  border-radius: 4px;
  background: var(--bugf-surface);
  color: var(--bugf-slate);
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
}
.bugf-input::placeholder, .bugf-textarea::placeholder { color: var(--bugf-placeholder); }
.bugf-input:focus, .bugf-textarea:focus, .bugf-select:focus {
  outline: none;
  border-color: var(--bugf-teal);
  box-shadow: 0 0 0 3px rgb(36 104 113 / 12%);
}
.bugf-textarea { resize: vertical; min-height: 76px; }
.bugf-textarea--code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  background: var(--bugf-zebra);
  min-height: 64px;
}
.bugf-input--mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }
.bugf-select { cursor: pointer; }
.bugf-input--locked { background: var(--bugf-tint); border-color: var(--bugf-line-soft); color: var(--bugf-mute); }

.bugf-legacy {
  border-color: var(--bugf-flight);
  background: var(--bugf-warn-tint);
}
.bugf-legacy-mark { display: inline-flex; align-items: center; gap: 5px; }

.bugf-inline { display: flex; align-items: center; gap: 10px; width: 100%; }
.bugf-inline > .bugf-input, .bugf-inline > .bugf-select { flex: 1 1 0; min-width: 0; }

/* Choices: chips, ticks, toggles ---------------------------------------- */

.bugf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bugf-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--bugf-line);
  border-radius: 4px;
  background: var(--bugf-surface);
  color: var(--bugf-mute);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.bugf-chip:hover { background: var(--bugf-hover); }
.bugf-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bugf-chevron); flex: none; }
.bugf-chip.is-on {
  border-color: var(--bugf-rail);
  border-width: 1.5px;
  background: var(--bugf-tint);
  color: var(--bugf-slate);
  font-weight: 600;
}
.bugf-chip[data-tone="low"] .dot, .bugf-chip[data-tone="minor"] .dot { background: var(--bugf-rail); }
.bugf-chip[data-tone="medium"] .dot, .bugf-chip[data-tone="moderate"] .dot { background: var(--bugf-amber); }
.bugf-chip[data-tone="high"] .dot, .bugf-chip[data-tone="major"] .dot { background: var(--bugf-reject); }
.bugf-chip[data-tone="critical"] .dot, .bugf-chip[data-tone="blocker"] .dot { background: var(--bugf-alert); }
.bugf-chip.is-on[data-tone="high"], .bugf-chip.is-on[data-tone="critical"] { border-color: var(--bugf-reject); }

/* The severity meter. Ticks fill up to the chosen rung, so the ordinal is
   visible without reading the word beside it — which is still there. */
.bugf-meter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bugf-ticks { display: flex; gap: 3px; }
.bugf-tick {
  width: 26px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--bugf-track);
  cursor: pointer;
}
.bugf-tick:hover { background: var(--bugf-line); }
.bugf-tick.is-on { background: var(--bugf-amber); }
.bugf-ticks[data-level="1"] .bugf-tick.is-on { background: var(--bugf-rail); }
.bugf-ticks[data-level="3"] .bugf-tick.is-on { background: var(--bugf-reject); }
.bugf-ticks[data-level="4"] .bugf-tick.is-on { background: var(--bugf-alert); }
.bugf-meter-word { font-size: 13px; font-weight: 600; color: var(--bugf-slate); min-width: 66px; }
.bugf-meter-word--none { color: var(--bugf-chevron); font-weight: 400; }

/* Steps ----------------------------------------------------------------- */

.bugf-steps { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bugf-step { display: flex; align-items: center; gap: 10px; }
.bugf-step-num {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--bugf-paper);
  color: var(--bugf-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
}
.bugf-step-num--role { background: var(--bugf-tint); color: var(--bugf-teal); }
.bugf-step .bugf-input, .bugf-step .bugf-select { flex: 1 1 0; min-width: 0; padding-block: 7px; }
.bugf-step-drop {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--bugf-mute);
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bugf-step-drop:hover { background: var(--bugf-late-tint); color: var(--bugf-late); }
.bugf-step-lead { font-size: 12.5px; color: var(--bugf-mute); flex: none; }

/* Evidence -------------------------------------------------------------- */

.bugf-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 24px 20px 22px;
  border: 2px dashed var(--bugf-line);
  border-radius: 8px;
  background: var(--bugf-surface);
  cursor: pointer;
  text-align: center;
}
.bugf-drop:hover, .bugf-drop.is-dragging { border-color: var(--bugf-teal); background: var(--bugf-tint); }
.bugf-drop svg { width: 24px; height: 24px; color: var(--bugf-chevron); }
.bugf-drop:hover svg, .bugf-drop.is-dragging svg { color: var(--bugf-teal); }
.bugf-drop-lead { font-size: 13.5px; font-weight: 500; color: var(--bugf-slate); }
.bugf-drop-note { font-size: 12.5px; color: var(--bugf-chevron); max-width: 60ch; }

.bugf-files { display: flex; flex-direction: column; }
.bugf-file {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 0;
  border-top: 1px solid var(--bugf-line-soft);
}
.bugf-file-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background: var(--bugf-tint);
  color: var(--bugf-rail);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.bugf-file-thumb svg { width: 14px; height: 14px; }
.bugf-file-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bugf-file-name { font-size: 12.5px; font-weight: 500; color: var(--bugf-slate); overflow-wrap: anywhere; }
.bugf-file-size { flex: none; }
.bugf-file-drop {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 4px;
  background: var(--bugf-paper);
  color: var(--bugf-mute);
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bugf-file-drop:hover { background: var(--bugf-late-tint); color: var(--bugf-late); }
.bugf-file.is-rejected .bugf-file-thumb { background: var(--bugf-late-tint); color: var(--bugf-late); }
.bugf-file.is-rejected .bugf-file-name { color: var(--bugf-late); }

.bugf-attached { display: flex; flex-wrap: wrap; gap: 12px; }
.bugf-att { width: 128px; display: flex; flex-direction: column; gap: 6px; }
.bugf-att-frame {
  height: 84px;
  border: 1px solid var(--bugf-line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--bugf-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bugf-rail);
}
.bugf-att-frame img { width: 100%; height: 100%; object-fit: cover; }
.bugf-att-name { overflow-wrap: anywhere; }
.bugf-att[data-marked="true"] .bugf-att-frame { border-color: var(--bugf-late); opacity: 0.4; }
.bugf-att[data-marked="true"] .bugf-att-name { color: var(--bugf-late); text-decoration: line-through; }
.bugf-att-btn {
  width: 100%;
  height: 24px;
  border: 1px solid var(--bugf-line);
  border-radius: 3px;
  background: var(--bugf-surface);
  color: var(--bugf-mute);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.bugf-att-btn:hover { background: var(--bugf-hover); }
.bugf-att[data-marked="true"] .bugf-att-btn { color: var(--bugf-teal); }

/* Submit ---------------------------------------------------------------- */

.bugf-submit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: var(--bugf-surface);
  border: 1px solid var(--bugf-line);
  border-radius: 6px;
}
.bugf-submit.is-blocked { background: var(--bugf-late-tint); border-color: var(--bugf-late); }
.bugf-submit-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bugf-submit-lead { font-size: 13px; font-weight: 500; color: var(--bugf-slate); }

.bugf-errors {
  padding: 14px 18px;
  border: 1px solid var(--bugf-late);
  border-left-width: 4px;
  border-radius: 4px;
  background: var(--bugf-late-tint);
  color: var(--bugf-late);
  font-size: 13px;
}
.bugf-errors ul { margin: 6px 0 0; padding-left: 18px; }

/* Rail ------------------------------------------------------------------ */

.bugf-panel {
  background: var(--bugf-surface);
  border: 1px solid var(--bugf-line);
  border-radius: 6px;
  padding: 22px 22px 16px;
}
.bugf-cap { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; flex-wrap: wrap; }
.bugf-cap-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--bugf-slate);
  white-space: nowrap;
}
.bugf-cap-rule { flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--bugf-line); }
.bugf-cap-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--bugf-mute);
}

.bugf-qscore { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.bugf-qscore-fig {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.6px;
  color: var(--bugf-late);
}
.bugf-qscore-fig[data-band="mid"] { color: var(--bugf-flight); }
.bugf-qscore-fig[data-band="high"] { color: var(--bugf-teal); }
.bugf-qscore-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.bugf-qtrack { height: 6px; border-radius: 3px; background: var(--bugf-track); overflow: hidden; }
.bugf-qfill { display: block; height: 100%; border-radius: 3px; background: var(--bugf-reject); transition: width 300ms; }
.bugf-qfill[data-band="mid"] { background: var(--bugf-amber); }
.bugf-qfill[data-band="high"] { background: var(--bugf-rail); }
.bugf-qline { font-size: 12px; color: var(--bugf-mute); }

.bugf-checks { list-style: none; margin: 0; padding: 0; }
.bugf-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  border-top: 1px solid var(--bugf-line-soft);
  font-size: 12.5px;
  color: var(--bugf-slate);
}
.bugf-check-box {
  width: 15px;
  height: 15px;
  border-radius: 8px;
  border: 1px solid var(--bugf-line);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}
.bugf-check-box svg { width: 9px; height: 9px; }
.bugf-check.is-done { color: var(--bugf-mute); }
.bugf-check.is-done .bugf-check-box { background: var(--bugf-teal); border-color: var(--bugf-teal); color: #fff; }
.bugf-check-text { flex: 1 1 0; min-width: 0; }

.bugf-preview-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 14px 13px 12px;
  border: 1px solid var(--bugf-line-soft);
  border-radius: 5px;
  background: var(--bugf-paper);
}
.bugf-preview-top { display: flex; align-items: flex-start; gap: 9px; }
.bugf-preview-accent { width: 3px; align-self: stretch; min-height: 30px; border-radius: 1.5px; background: var(--bugf-chevron); flex: none; }
.bugf-preview-accent[data-level="1"] { background: var(--bugf-rail); }
.bugf-preview-accent[data-level="2"] { background: var(--bugf-amber); }
.bugf-preview-accent[data-level="3"] { background: var(--bugf-reject); }
.bugf-preview-accent[data-level="4"] { background: var(--bugf-alert); }
.bugf-preview-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bugf-preview-title { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--bugf-slate); overflow-wrap: anywhere; }
.bugf-preview-title.is-empty { color: var(--bugf-placeholder); font-style: italic; font-weight: 400; }
.bugf-preview-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.bugf-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--bugf-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--bugf-slate);
  white-space: nowrap;
}
.bugf-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bugf-rail); flex: none; }

.bugf-next { display: flex; flex-direction: column; }
.bugf-next-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; font-size: 12.5px; line-height: 1.55; }
.bugf-next-row + .bugf-next-row { border-top: 1px solid var(--bugf-line-soft); }
.bugf-next-row svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--bugf-teal); }
.bugf-next-row[data-tone="warn"] svg { color: var(--bugf-flight); }

/* ============================================================ responsive */

@media (max-width: 1279px) { .bugf-rail { width: 340px; } }

@media (max-width: 1023px) {
  .bugf-cols { flex-direction: column; align-items: stretch; }
  .bugf-rail { width: 100%; }
}

@media (max-width: 860px) {
  .bugf { padding: 24px 16px 32px; }
  .bugf-title { font-size: 28px; }
  .bugf-head { flex-direction: column; gap: 16px; }
  .bugf-actions { width: 100%; flex-wrap: wrap; }
  .bugf-progress { flex-direction: column; align-items: stretch; gap: 12px; }
  .bugf-progress-right { flex-direction: row; align-items: center; gap: 10px; }
  .bugf-row { flex-direction: column; gap: 18px; }
  .bugf-seg-label { display: none; }
  .bugf-submit { flex-direction: column; align-items: stretch; }
  .bugf-submit .bugf-btn { justify-content: center; }
}

@media (max-width: 640px) {
  .bugf-sec-head { padding: 0 14px; }
  .bugf-sec-body { padding-inline: 14px; }
  .bugf-panel { padding: 18px 16px 14px; }
  .bugf-att { width: calc(50% - 6px); }
}
/*
 * Bugs list (bugs#index).
 *
 * Same palette and type as the sign-in screen, the desk dashboard and the bug
 * detail page. Every rule is scoped under `.bugl` so none of it leaks into the
 * Tailwind pages around it.
 *
 * The page answers "what is in the queue and what needs a decision" before it
 * shows a single row: the queue band carries the open count and its average
 * age, the severity split as one proportional bar, three weeks of opened
 * against closed, and how many bugs have an owner.
 *
 * Two colour rules worth knowing before editing:
 *
 *  - Bright tones (amber #f29111, red #ef5b45) clear 4.5:1 on ink but not on
 *    white. Small text on these light surfaces uses --bugl-late / --bugl-flight
 *    instead, at ~6:1. The bright tones stay on meters, bars and dots, each of
 *    which sits beside the word or number it encodes.
 *  - Severity is an ordinal — minor ‹ moderate ‹ major ‹ blocker — drawn as a
 *    four-tick meter. Painting only "blocker" red collapses four states into
 *    two, which is what the previous list did.
 */

.bugl {
  --bugl-ink: #0b2226;
  --bugl-slate: #12292d;
  --bugl-mute: #4f6c6f;
  --bugl-paper: #f1f5f5;
  --bugl-surface: #fff;
  --bugl-line: #c9dadb;
  --bugl-line-soft: #dee8e8;
  --bugl-tint: #eff4f4;
  --bugl-track: #e7efef;
  --bugl-zebra: #f6fafa;

  --bugl-teal: #246871;
  --bugl-rail: #6fa9af;
  --bugl-amber: #f29111;
  --bugl-reject: #ef5b45;
  --bugl-alert: #a32f1d;
  --bugl-done: #3e838a;
  --bugl-cancel: #93aaad;

  --bugl-late: #b7331d;
  --bugl-flight: #8a5300;
  --bugl-chevron: #6e8a8d;

  --bugl-late-tint: #fbe9e4;
  --bugl-warn-tint: #fdf1e4;
  --bugl-hover: #eaf2f2;

  --bugl-panel-text: #eaf3f3;
  --bugl-panel-dim: #a8c4c6;
  --bugl-panel-quiet: #8fb3b6;

  /* Horizontal padding mirrors the layout's `px-4`; the cap below mirrors
     `container mx-auto`, so the content box is the same width as every other
     page while the paper ground still runs edge to edge. */
  padding: 32px 16px 48px;
  min-height: calc(100vh - 64px);
  background: var(--bugl-paper);
  color: var(--bugl-slate);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.bugl-page { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-inline: auto; }

/* Tailwind v4 container breakpoints, less the layout's 2rem of px-4. */
@media (min-width: 40rem) { .bugl-page { max-width: 38rem; } }
@media (min-width: 48rem) { .bugl-page { max-width: 46rem; } }
@media (min-width: 64rem) { .bugl-page { max-width: 62rem; } }
@media (min-width: 80rem) { .bugl-page { max-width: 78rem; } }
@media (min-width: 96rem) { .bugl-page { max-width: 94rem; } }

.bugl *, .bugl *::before, .bugl *::after { box-sizing: border-box; }
.bugl a { color: inherit; text-decoration: none; }
.bugl a:focus-visible, .bugl button:focus-visible, .bugl select:focus-visible, .bugl input:focus-visible {
  outline: 2px solid var(--bugl-amber);
  outline-offset: 2px;
  border-radius: 3px;
}

.bugl-mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 9px;
  color: var(--bugl-chevron);
}

/* -------------------------------------------------------------- header -- */

.bugl-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.bugl-head-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.bugl-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bugl-mute); margin: 0;
}
.bugl-title {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: 34px; letter-spacing: -0.025em; line-height: 1.1;
  margin: 0; color: var(--bugl-slate);
}
.bugl-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.bugl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 15px; border-radius: 4px;
  border: 1px solid var(--bugl-line); background: var(--bugl-surface);
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--bugl-teal);
  cursor: pointer; white-space: nowrap;
}
.bugl-btn:hover { background: var(--bugl-hover); }
.bugl-btn--primary { border-color: var(--bugl-amber); background: var(--bugl-amber); color: var(--bugl-ink); font-weight: 600; }
.bugl-btn--primary:hover { background: #dd8410; }
.bugl-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.bugl-btn--small { height: 30px; padding: 0 12px; font-size: 12.5px; }

/* ---------------------------------------------------------------- tabs -- */

.bugl-tabs-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--bugl-line); flex-wrap: wrap; }
.bugl-tabs { display: flex; }
.bugl-tab { display: flex; flex-direction: column; gap: 11px; }
.bugl-tab-inner { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 0 20px 11px; }
.bugl-tab-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bugl-mute);
}
.bugl-tab-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--bugl-chevron); }
.bugl-tab-bar { height: 2px; background: transparent; }
.bugl-tab--on .bugl-tab-label { color: var(--bugl-slate); }
.bugl-tab--on .bugl-tab-count { color: var(--bugl-slate); }
.bugl-tab--on .bugl-tab-bar { background: var(--bugl-amber); }
.bugl-tabs-note { padding-bottom: 11px; }

/* --------------------------------------------------------- queue band -- */

.bugl-queue {
  display: flex; align-items: stretch;
  background: var(--bugl-surface); border: 1px solid var(--bugl-line); border-radius: 4px;
  overflow: hidden; min-height: 130px;
}
.bugl-qpanel { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 18px 20px; min-width: 0; }
.bugl-qpanel--open { width: 292px; flex: none; }
.bugl-qpanel--sev { flex: 1; min-width: 260px; }
.bugl-qpanel--intake { width: 300px; flex: none; }
.bugl-qpanel--owned { width: 214px; flex: none; }
.bugl-qrule { width: 1px; background: var(--bugl-line-soft); flex: none; }

.bugl-qlabel {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bugl-mute);
}
.bugl-qfigure { display: flex; align-items: baseline; gap: 7px; }
.bugl-qvalue {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: 38px; line-height: 1; letter-spacing: -0.03em; color: var(--bugl-slate);
}
.bugl-qvalue--alarm { color: var(--bugl-late); }
.bugl-qunit { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--bugl-chevron); }
.bugl-qsub { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bugl-mute); }
.bugl-qsub--alarm { color: var(--bugl-late); }

.bugl-stack { display: flex; gap: 2px; height: 10px; }
.bugl-stack-seg { border-radius: 1.5px; min-width: 3px; }
.bugl-legend { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.bugl-key { display: inline-flex; align-items: center; gap: 5px; }
.bugl-swatch { width: 6px; height: 6px; border-radius: 1px; flex: none; }
.bugl-key-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bugl-mute); }

.bugl-sev--minor { background: var(--bugl-rail); }
.bugl-sev--moderate { background: var(--bugl-amber); }
.bugl-sev--major { background: var(--bugl-reject); }
.bugl-sev--blocker { background: var(--bugl-alert); }
.bugl-sev--unset { background: var(--bugl-cancel); }

.bugl-intake { display: flex; align-items: flex-end; gap: 20px; }
.bugl-intake-chart { display: flex; flex-direction: column; gap: 7px; }
.bugl-intake-bars { display: flex; align-items: flex-end; gap: 18px; height: 52px; }
.bugl-intake-week { display: flex; align-items: flex-end; gap: 3px; }
.bugl-bar { width: 9px; border-radius: 1.5px 1.5px 0 0; min-height: 2px; }
.bugl-bar--opened { background: var(--bugl-rail); }
.bugl-bar--closed { background: var(--bugl-done); }
.bugl-intake-weeks { display: flex; gap: 18px; }
.bugl-intake-weeks span { width: 21px; text-align: center; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; color: var(--bugl-chevron); }
.bugl-intake-keys { display: flex; flex-direction: column; gap: 6px; }

/* --------------------------------------------------------- alert band -- */

.bugl-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; padding: 12px 16px; border-radius: 3px;
  background: var(--bugl-late-tint); border-left: 3px solid var(--bugl-reject);
}
.bugl-alert-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bugl-alert-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bugl-alert-line1 { font-size: 13.5px; font-weight: 500; color: var(--bugl-late); }
.bugl-alert-line2 { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bugl-late); }
.bugl-alert-action { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bugl-late); white-space: nowrap; background: none; border: 0; cursor: pointer; font-family: inherit; }

/* ------------------------------------------------- toolbar / filter bar -- */

.bugl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.bugl-toolbar-left, .bugl-toolbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.bugl-ctrl {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: 4px; border: 1px solid var(--bugl-line); background: var(--bugl-surface);
  font-size: 13px; color: var(--bugl-slate); white-space: nowrap;
}
.bugl-ctrl--on { background: var(--bugl-tint); border-color: var(--bugl-rail); }
.bugl-ctrl-k { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bugl-mute); }
.bugl-ctrl-v { font-weight: 500; }
.bugl-ctrl select {
  border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--bugl-slate); cursor: pointer; padding: 0; appearance: none;
}

.bugl-filters {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 52px; padding: 10px 16px; border-radius: 4px;
  background: var(--bugl-surface); border: 1px solid var(--bugl-line); flex-wrap: wrap;
}
.bugl-facets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bugl-facet {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border-radius: 3px; border: 1px solid var(--bugl-line-soft); background: transparent;
  font-family: inherit; font-size: 13px; color: var(--bugl-slate); cursor: pointer; white-space: nowrap;
}
.bugl-facet--on { background: var(--bugl-tint); border-color: var(--bugl-rail); }
.bugl-summary { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bugl-summary-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bugl-slate); }
.bugl-vrule { width: 1px; height: 16px; background: var(--bugl-line); }

/* ------------------------------------------------------- selection bar -- */

.bugl-selection {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 16px;
  border-radius: 4px; background: var(--bugl-ink); flex-wrap: wrap;
}
.bugl-selection.hidden { display: none; }
.bugl-sel-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bugl-amber); }
.bugl-sel-rule { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.2); }
.bugl-sel-act {
  display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--bugl-panel-text);
}
.bugl-sel-act svg { color: var(--bugl-panel-dim); }
.bugl-sel-spacer { flex: 1; min-width: 8px; }
.bugl-sel-clear { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 500; color: #5cc9d1; }

/* --------------------------------------------------------------- table -- */

.bugl-table { background: var(--bugl-surface); border: 1px solid var(--bugl-line); border-radius: 4px; overflow: hidden; }
.bugl-row { display: flex; align-items: center; min-height: 58px; border-bottom: 1px solid var(--bugl-line-soft); }
.bugl-row:last-child { border-bottom: 0; }
.bugl-row--head { min-height: 38px; background: var(--bugl-tint); border-bottom: 1px solid var(--bugl-line); }
.bugl-row--group { min-height: 34px; background: var(--bugl-zebra); border-top: 1px solid var(--bugl-line-soft); }
.bugl-row--late { box-shadow: inset 3px 0 0 var(--bugl-reject); }
.bugl-row:hover:not(.bugl-row--head):not(.bugl-row--group) { background: var(--bugl-hover); }

/* The row title is the link; its ::after is stretched over the whole row so the
   chevron — and every inch of empty space beside it — opens the bug. The
   checkbox is raised above that overlay so it stays independently clickable. */
.bugl-row { position: relative; }
.bugl-row-title::after { content: ""; position: absolute; inset: 0; }
.bugl-c--select { position: relative; z-index: 1; }
.bugl-row:hover .bugl-chevron { color: var(--bugl-teal); }

.bugl-c { display: flex; align-items: center; padding: 0 12px; min-width: 0; }
.bugl-c--select { width: 36px; flex: none; }
.bugl-c--sev { width: 112px; flex: none; gap: 8px; }
.bugl-c--bug { flex: 1; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding-top: 9px; padding-bottom: 9px; }
.bugl-c--status { width: 108px; flex: none; }
.bugl-c--priority { width: 92px; flex: none; gap: 7px; }
.bugl-c--people {
  width: 150px; flex: none;
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px;
}
.bugl-people-row { display: flex; align-items: center; gap: 6px; }
.bugl-reporter {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bugl-chevron);
  max-width: 126px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bugl-c--dates { width: 176px; flex: none; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.bugl-c--evidence { width: 100px; flex: none; gap: 10px; }
.bugl-c--chevron { width: 26px; flex: none; justify-content: center; padding: 0; }

.bugl-h { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bugl-mute); }
.bugl-group-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bugl-slate); }
.bugl-group-meta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bugl-chevron); }
.bugl-group-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0 14px; }

.bugl-title-row { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.bugl-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 3px;
  background: var(--bugl-tint); flex: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--bugl-teal);
}
.bugl-row-title {
  font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--bugl-slate);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.bugl-row-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bugl-chevron);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* Severity meter: four ticks, filled to the level. */
.bugl-meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; flex: none; }
.bugl-tick { width: 2px; border-radius: 0.5px; background: var(--bugl-track); }
.bugl-tick:nth-child(1) { height: 4px; }
.bugl-tick:nth-child(2) { height: 7px; }
.bugl-tick:nth-child(3) { height: 10px; }
.bugl-tick:nth-child(4) { height: 13px; }
/* Declared after .bugl-tick and doubled up, so the fill beats the track colour
   regardless of where the severity palette sits in this file. */
.bugl-tick.bugl-sev--minor { background: var(--bugl-rail); }
.bugl-tick.bugl-sev--moderate { background: var(--bugl-amber); }
.bugl-tick.bugl-sev--major { background: var(--bugl-reject); }
.bugl-tick.bugl-sev--blocker { background: var(--bugl-alert); }
.bugl-sev-label { font-size: 12.5px; font-weight: 500; }
.bugl-sev-label--minor { color: var(--bugl-mute); }
.bugl-sev-label--moderate { color: var(--bugl-flight); }
.bugl-sev-label--major, .bugl-sev-label--blocker { color: var(--bugl-late); }
.bugl-sev-label--unset { color: var(--bugl-chevron); font-style: italic; }

.bugl-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: 3px; background: var(--bugl-tint); font-size: 12px; color: var(--bugl-slate); white-space: nowrap;
}
.bugl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bugl-rail); flex: none; }
.bugl-dot--in_progress { background: var(--bugl-amber); }
.bugl-dot--completed { background: var(--bugl-done); }
.bugl-dot--verified { background: #55959b; }
.bugl-dot--cancelled { background: var(--bugl-cancel); }
.bugl-dot--critical { background: var(--bugl-reject); }
.bugl-dot--high { background: var(--bugl-amber); }

.bugl-prio { font-size: 12.5px; color: var(--bugl-mute); }
.bugl-prio--critical, .bugl-prio--high { color: var(--bugl-slate); }

.bugl-avatar {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: var(--bugl-tint); color: var(--bugl-teal);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px;
}
.bugl-none { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bugl-chevron); }

.bugl-age { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--bugl-slate); }
.bugl-due { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--bugl-chevron); }
.bugl-due--late { color: var(--bugl-late); }

.bugl-ev { display: inline-flex; align-items: center; gap: 4px; }
.bugl-ev-count { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--bugl-mute); }
.bugl-ev--missing svg, .bugl-ev--missing .bugl-ev-count { color: var(--bugl-flight); }

.bugl-check { width: 15px; height: 15px; accent-color: var(--bugl-teal); cursor: pointer; }

.bugl-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 48px; padding: 8px 14px; background: var(--bugl-tint); border-top: 1px solid var(--bugl-line); flex-wrap: wrap;
}
/* Pagy 6 wraps every item in <span class="page">, and only some of those hold an
   <a>. Box the wrapper and never the anchor — styling both renders linked pages
   as a pill inside a pill, while Prev and the current page (plain spans) get a
   single one. The anchor is then stretched over the whole box with a
   pseudo-element so the hit area matches what you can see. */
.bugl-foot .pagy-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.bugl-foot .pagy-nav .page {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 9px;
  border-radius: 4px; border: 1px solid var(--bugl-line); background: var(--bugl-surface);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--bugl-mute); white-space: nowrap;
}
.bugl-foot .pagy-nav .page > a { color: inherit; text-decoration: none; }
.bugl-foot .pagy-nav .page > a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bugl-foot .pagy-nav .page:has(> a):hover { background: var(--bugl-hover); border-color: var(--bugl-rail); }

.bugl-foot .pagy-nav .page.active {
  background: var(--bugl-slate); border-color: var(--bugl-slate); color: #fff;
}
/* Prev on page one, Next on the last: present for position, not clickable. */
.bugl-foot .pagy-nav .page.disabled {
  color: var(--bugl-chevron); background: transparent;
  border-color: var(--bugl-line-soft); cursor: default;
}
.bugl-foot .pagy-nav .page.gap { border: 0; background: none; min-width: 16px; padding: 0; }

.bugl-empty { padding: 48px 24px; text-align: center; }
.bugl-empty-head { font-family: Archivo, sans-serif; font-weight: 600; font-size: 17px; color: var(--bugl-slate); margin: 0 0 8px; }
.bugl-empty-sub { font-size: 13px; color: var(--bugl-mute); margin: 0 0 14px; }

.bugl-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.bugl-icon { flex: none; }
.bugl-chevron { flex: none; color: var(--bugl-chevron); transition: color .12s; }

/* ---------------------------------------------------------- responsive -- */

/* Columns fall away worst-first as the capped content box narrows. The bug
   itself, its dates and the row link never leave. */
@media (max-width: 1279px) { .bugl-c--evidence { display: none; } }
@media (max-width: 1100px) { .bugl-c--priority { display: none; } }
@media (max-width: 1023px) {
  .bugl-queue { flex-wrap: wrap; }
  .bugl-qrule { display: none; }
  .bugl-qpanel { width: 100%; flex: 1 1 240px; border-bottom: 1px solid var(--bugl-line-soft); }
  .bugl-c--sev { display: none; }
}
@media (max-width: 860px) {
  .bugl-c--status, .bugl-c--people { display: none; }
  .bugl-title { font-size: 26px; }
}
@media (max-width: 640px) {
  .bugl-c--dates { width: 120px; }
  .bugl-tabs { overflow-x: auto; }
}

/* ------------------------------------------- bulk assign panel (in-bar) -- */

.bugl-sel-details { position: relative; }
.bugl-sel-details > summary { list-style: none; cursor: pointer; }
.bugl-sel-details > summary::-webkit-details-marker { display: none; }

.bugl-bulk-form {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30; width: 320px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px; border-radius: 4px;
  background: var(--bugl-surface); border: 1px solid var(--bugl-line);
  box-shadow: 0 8px 24px rgba(11, 34, 38, 0.14);
}
.bugl-bulk-people { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; }
.bugl-bulk-people legend { padding: 0 0 6px; }
.bugl-bulk-person { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--bugl-slate); cursor: pointer; }
.bugl-bulk-lead { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.bugl-bulk-lead.hidden { display: none; }
.bugl-bulk-due { display: flex; flex-direction: column; gap: 6px; }
.bugl-bulk-due input {
  height: 32px; padding: 0 10px; border-radius: 4px;
  border: 1px solid var(--bugl-line); background: var(--bugl-paper);
  font-family: inherit; font-size: 13px; color: var(--bugl-slate);
}
/*
 * Desk dashboard (home#index).
 *
 * Same palette, type and vocabulary as the sign-in screen (auth.css): the ink
 * band is the one anchor, everything else is white surfaces on the paper
 * ground. Every rule is scoped under `.dash` so none of it leaks into the
 * Tailwind pages around it.
 *
 * Two colour rules worth knowing before editing:
 *
 *  - The bright brand tones (amber #f29111, red #ef5b45) clear 4.5:1 on ink but
 *    not on white — 2.4:1 and 3.4:1. On white surfaces small text uses the
 *    --dash-late / --dash-flight variants instead, which carry the same meaning
 *    at 6:1. The bright tones stay on the ink band and on dots and bars, which
 *    are decorative: every one of them sits next to the number or the word it
 *    encodes.
 *  - Volume bars, progress tracks and state dots are aria-hidden. Their value is
 *    always printed as text alongside, so they never carry meaning alone.
 */

.dash {
  --dash-ink: #0b2226;
  --dash-teal: #246871;
  --dash-rail: #6fa9af;
  --dash-edge: #2e6e75;
  --dash-paper: #f1f5f5;
  --dash-slate: #12292d;
  --dash-mute: #4f6c6f;
  --dash-line: #c9dadb;
  --dash-line-soft: #dee8e8;
  --dash-surface: #fff;

  /* One tone per lifecycle meaning, shared with the sign-in screen. */
  --dash-tone-go: #f29111;
  --dash-tone-reject: #ef5b45;
  --dash-tone-cancel: #93aaad;
  --dash-tone-rail: #6fa9af;

  /* Text-safe counterparts for white surfaces. */
  --dash-late: #b7331d;    /* 5.99:1 on #fff, 4.91:1 on the pressed tint */
  --dash-flight: #8a5300;  /* 6.33:1 on #fff */
  --dash-chevron: #6e8a8d; /* 3.70:1 on #fff — a UI control, floor is 3:1 */
  --dash-alert: #a32f1d;

  /* Ink band. */
  --dash-panel-text: #eaf3f3;
  --dash-panel-dim: #a8c4c6;
  --dash-panel-note: #6d9296; /* 4.88:1 on ink */
  --dash-node: #3e838a;
  --dash-node-off: #5f797c;
  --dash-track: #1a3a3f;

  --dash-hover: #eaf2f2;
  --dash-press: #dfebeb;

  /* Horizontal padding mirrors the layout's `px-4`; .dash-page below mirrors
     `container mx-auto`, so the content box lines up with every other page
     while the paper ground still runs edge to edge. */
  padding: 36px 16px 48px;
  min-height: calc(100vh - 64px);
  background: var(--dash-paper);
  color: var(--dash-slate);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.dash-mono {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  font-weight: 400;
}

/* A measurement inside a mono line keeps its own case: "235d", not "235D". */
.dash-unit { text-transform: none; }

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

.dash-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  margin-inline: auto;
}

/* Tailwind v4 container breakpoints, less the layout's 2rem of px-4. */
@media (min-width: 40rem) { .dash-page { max-width: 38rem; } }
@media (min-width: 48rem) { .dash-page { max-width: 46rem; } }
@media (min-width: 64rem) { .dash-page { max-width: 62rem; } }
@media (min-width: 80rem) { .dash-page { max-width: 78rem; } }
@media (min-width: 96rem) { .dash-page { max-width: 94rem; } }

/* ---------------------------------------------------------------- header -- */

.dash-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.dash-eyebrow {
  display: block;
  margin: 0;
  color: var(--dash-mute);
  letter-spacing: 0.24em;
}

.dash-title {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 10px 0 0;
  color: var(--dash-slate);
}

.dash-today {
  color: var(--dash-mute);
  letter-spacing: 0.18em;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- panels -- */

.dash-panel {
  background: var(--dash-surface);
  border: 1px solid var(--dash-line);
  border-radius: 4px;
  padding: 24px 24px 20px;
  min-width: 0;
}

.dash-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 4px;
}

/* The <h2> is set in the mono micro-label, not at heading size: the caption is
   a label on a surface, and the numbers inside it are the loud part. */
.dash-panel-title {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--dash-slate);
  white-space: nowrap;
}

.dash-rule {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--dash-line);
}

.dash-panel-scope {
  color: var(--dash-mute);
  letter-spacing: 0.16em;
  font-size: 9px;
  text-align: right;
}

.dash-panel-scope--alarm { color: var(--dash-late); }

.dash-columns {
  display: grid;
  grid-template-columns: minmax(0, 61fr) minmax(0, 39fr);
  gap: 24px;
  align-items: start;
}

/* ------------------------------------------------------------ flow band -- */

/* The Task lifecycle rail from the sign-in screen, instrumented with counts.
   Deliberately static: the sign-in tour explains the machine to someone who
   hasn't seen it, this one reports where the work actually is. */
.dash-flow {
  margin: 0;
  padding: 30px 32px 34px;
  border-radius: 4px;
  background: var(--dash-ink);
  color: var(--dash-panel-text);
}

.dash-flow-caption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.dash-flow-label {
  color: var(--dash-rail);
  letter-spacing: 0.24em;
  white-space: nowrap;
}

.dash-flow-rule {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.dash-flow-totals {
  color: var(--dash-panel-note);
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.dash-rail {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dash-station {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 44px 30px 0 0;
}

/* The spine: each station draws the segment forward to the next node, so the
   rail stays correct at any width without a fixed-geometry SVG. */
.dash-station::before {
  content: "";
  position: absolute;
  left: 6px;
  right: -6px;
  top: 25px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--dash-node);
}

.dash-station--last::before { display: none; }

.dash-station-node {
  position: absolute;
  left: 0;
  top: 20px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--dash-node);
  background: var(--dash-ink);
}

.dash-station-count {
  display: block;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--dash-panel-text);
}

.dash-station-label {
  display: block;
  margin-top: 7px;
  color: var(--dash-panel-dim);
  letter-spacing: 0.18em;
}

.dash-station-track {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 7px;
  border-radius: 2px;
}

.dash-station-volume {
  display: block;
  height: 4px;
  min-width: 2px;
  border-radius: 2px;
  background: var(--dash-edge);
}

.dash-station-note {
  display: block;
  margin-top: 7px;
  color: var(--dash-panel-note);
  letter-spacing: 0.14em;
  font-size: 9px;
}

/* In progress is the only amber station — where work is actually moving. */
.dash-station--go .dash-station-node {
  background: var(--dash-tone-go);
  border-color: var(--dash-tone-go);
}

.dash-station--go .dash-station-node::after {
  content: "";
  position: absolute;
  inset: -8.5px;
  border-radius: 50%;
  background: rgba(242, 145, 17, 0.2);
}

.dash-station--go .dash-station-count { color: var(--dash-tone-go); }
.dash-station--go .dash-station-volume { background: var(--dash-tone-go); }

.dash-station--completed .dash-station-volume { background: #3e838a; }
.dash-station--verified .dash-station-volume { background: #55959b; }

/* Cancelled hangs off the end of the rail on its own stub: it is a state work
   can reach, not a stage work passes through. */
.dash-station--off {
  flex: 0 0 200px;
  margin-left: 84px;
  padding-right: 0;
}

.dash-station--off::before {
  display: block; /* wins back the segment --last turns off */
  left: auto;
  right: calc(100% + 24px);
  width: 50px;
  background: var(--dash-node-off);
}

.dash-station--off .dash-station-node { border-color: var(--dash-node-off); }
.dash-station--off .dash-station-count { color: var(--dash-tone-cancel); }
.dash-station--off .dash-station-volume { background: var(--dash-tone-cancel); }

/* Nothing tracked yet: the rail still renders, dimmed, and says so. */
.dash-flow--zero .dash-station-count { color: var(--dash-panel-note); }
.dash-flow--zero .dash-station-label { color: var(--dash-panel-note); }
.dash-flow--zero .dash-station-track { display: none; }

/* Nothing is in flight, so nothing is lit: the amber station goes quiet too. */
.dash-flow--zero .dash-station--go .dash-station-node {
  background: var(--dash-ink);
  border-color: var(--dash-node);
}

.dash-flow--zero .dash-station--go .dash-station-node::after { display: none; }

.dash-flow-zero-note {
  margin: 22px 0 0;
  color: var(--dash-panel-note);
  font-size: 14px;
}

/* ------------------------------------------------------------------ rows -- */

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

.dash-list > li { border-bottom: 1px solid var(--dash-line-soft); }

/* A whole row is one link. The chevron marks it as a line that opens a record;
   read-outs (the Signals panel) deliberately have none. */
.dash-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 8px;
  margin: 0 -8px;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.12s;
}

.dash-row:hover { background: var(--dash-hover); }
.dash-row:active { background: var(--dash-press); }

.dash-row:hover .dash-row-title,
.dash-row:hover .dash-chevron { color: var(--dash-teal); }

.dash-row:hover .dash-chevron { transform: translateX(2px); }

/* Focus deliberately does NOT tint: the ring alone marks keyboard position, so
   it stays distinguishable from wherever the pointer happens to be resting. */
.dash-row:focus-visible {
  background: transparent;
  outline: 2px solid var(--dash-teal);
  outline-offset: -1px;
}

.dash-chevron {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--dash-chevron);
  transition: transform 0.12s, color 0.12s;
}

.dash-dot {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--dash-tone-cancel);
  /* A 1px ring in the text-safe tone: the fill keeps the brand colour, the
     ring gives the dot an edge that clears 3:1 on white. */
  box-shadow: 0 0 0 1px var(--dash-chevron);
}

.dash-dot--reject {
  background: var(--dash-tone-reject);
  box-shadow: 0 0 0 1px var(--dash-late);
}

.dash-dot--go {
  background: var(--dash-tone-go);
  box-shadow: 0 0 0 1px var(--dash-flight);
}

.dash-dot--rail {
  background: var(--dash-tone-rail);
  box-shadow: 0 0 0 1px var(--dash-teal);
}

.dash-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dash-row-title {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--dash-slate);
  transition: color 0.12s;
}

.dash-row-meta {
  margin: 0;
  color: var(--dash-mute);
  letter-spacing: 0.12em;
  font-size: 10px;
}

.dash-row-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: none;
  width: 118px;
  padding-top: 2px;
}

.dash-row-delta {
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--dash-mute);
  text-align: right;
}

.dash-row-delta--late { color: var(--dash-late); }
.dash-row-delta--flight { color: var(--dash-flight); }

/* --------------------------------------------------------------- groups -- */

.dash-group {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0 4px;
}

.dash-group-label {
  color: var(--dash-mute);
  letter-spacing: 0.2em;
  font-size: 9px;
  white-space: nowrap;
}

.dash-group-rule {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--dash-line-soft);
}

.dash-group-count {
  color: var(--dash-mute);
  letter-spacing: 0.14em;
  font-size: 9px;
}

/* --------------------------------------------------------------- signals -- */

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

.dash-signal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 0;
  border-bottom: 1px solid var(--dash-line-soft);
}

.dash-signal-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dash-signal-label { font-size: 14px; }

.dash-signal-value {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--dash-teal);
}

/* Healthy data reads teal. The panel is designed for good news too. */
.dash-signal--alarm .dash-signal-value { color: var(--dash-late); }
.dash-signal--watch .dash-signal-value { color: var(--dash-flight); }

.dash-signal-note {
  margin: 0;
  color: var(--dash-mute);
  letter-spacing: 0.12em;
  font-size: 9px;
}

/* --------------------------------------------------------------- footers -- */

.dash-foot { padding-top: 18px; }

.dash-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dash-teal);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.dash-link:hover { text-decoration: underline; }

.dash-link:focus-visible {
  outline: 2px solid var(--dash-teal);
  outline-offset: 3px;
  border-radius: 2px;
  text-decoration: none;
}

.dash-arrow {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform 0.12s;
}

.dash-link:hover .dash-arrow { transform: translateX(2px); }

/* --------------------------------------------------------------- members -- */

.dash-member { align-items: flex-start; }

.dash-member-person {
  flex: none;
  width: 230px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dash-member-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--dash-slate);
  transition: color 0.12s;
}

.dash-member-roles {
  margin: 0;
  color: var(--dash-mute);
  letter-spacing: 0.12em;
  font-size: 9px;
}

.dash-member-task {
  margin: 0;
  font-size: 14px;
  color: var(--dash-slate);
}

.dash-member-task--idle { color: var(--dash-mute); }

.dash-member-count { width: 128px; }

.dash-row:hover .dash-member-name { color: var(--dash-teal); }

/* ------------------------------------------------------------ iterations -- */

.dash-iteration { align-items: center; }

.dash-iteration-name {
  flex: none;
  width: 270px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--dash-slate);
  transition: color 0.12s;
}

.dash-row:hover .dash-iteration-name { color: var(--dash-teal); }

.dash-iteration-software {
  flex: none;
  width: 130px;
  color: var(--dash-mute);
  letter-spacing: 0.14em;
}

.dash-iteration-tasks {
  flex: none;
  width: 92px;
  color: var(--dash-mute);
  letter-spacing: 0.12em;
}

.dash-track {
  flex: 1;
  min-width: 60px;
  height: 5px;
  border-radius: 3px;
  background: #dce6e6;
}

.dash-track-fill {
  display: block;
  height: 5px;
  min-width: 3px;
  border-radius: 3px;
  background: var(--dash-tone-go);
}

.dash-track-fill--late { background: var(--dash-tone-reject); }

.dash-iteration-pct {
  flex: none;
  width: 48px;
  text-align: right;
  color: var(--dash-slate);
  letter-spacing: 0.05em;
  font-size: 11px;
}

.dash-iteration-end {
  flex: none;
  width: 190px;
  text-align: right;
  color: var(--dash-mute);
  letter-spacing: 0.12em;
}

.dash-iteration-end--late { color: var(--dash-late); }

/* ------------------------------------------------------------- team load -- */

.dash-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 4px;
}

.dash-table th,
.dash-table td {
  padding: 13px 0;
  border-bottom: 1px solid var(--dash-line-soft);
  text-align: right;
}

.dash-table thead th {
  padding: 14px 0 10px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--dash-mute);
}

.dash-table th[scope="row"] { text-align: left; }
.dash-table thead th:first-child { text-align: left; }

.dash-table tbody tr { position: relative; transition: background-color 0.12s; }
.dash-table tbody tr:hover { background: var(--dash-hover); }

.dash-cell-name {
  font-size: 14px;
  font-weight: 400;
  color: var(--dash-slate);
}

.dash-cell-num {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dash-slate);
}

.dash-cell-num--late { color: var(--dash-late); }
.dash-cell-num--flight { color: var(--dash-flight); }
.dash-cell-num--mute { color: var(--dash-mute); }

.dash-cell-share {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

/* Numeric columns are sized so the digits line up down the page; the name
   column takes whatever is left. */
.dash-table th:nth-child(2),
.dash-table td:nth-child(2) { width: 120px; }

.dash-table th:nth-child(3),
.dash-table td:nth-child(3) { width: 140px; }

.dash-table th:nth-child(4),
.dash-table td:nth-child(4) { width: 140px; }

.dash-table th:nth-child(5),
.dash-table td:nth-child(5) { width: 190px; }

/* Stretched link: the name is the real link, the ::after makes the whole row a
   hit target. Where `position: relative` on <tr> is not honoured the name stays
   clickable, so nothing is lost. */
.dash-table-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s;
}

.dash-table-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.dash-table tbody tr:hover .dash-table-link,
.dash-table tbody tr:hover .dash-chevron { color: var(--dash-teal); }

.dash-table-link:focus-visible {
  outline: 2px solid var(--dash-teal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------- section states -- */

.dash-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 24px 26px;
}

.dash-state-kicker {
  color: var(--dash-mute);
  letter-spacing: 0.2em;
}

.dash-state--good .dash-state-kicker { color: var(--dash-teal); }
.dash-state--error .dash-state-kicker { color: var(--dash-alert); }

.dash-state-title {
  margin: 0;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--dash-slate);
}

.dash-state-body {
  margin: 0;
  max-width: 62ch;
  color: var(--dash-mute);
  font-size: 14px;
}

/* Teal outline, not amber: retrying a panel is a recovery, not the page's
   primary action. */
.dash-retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--dash-teal);
  border-radius: 4px;
  background: none;
  color: var(--dash-teal);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.dash-retry:hover { background: var(--dash-hover); }

.dash-retry:focus-visible {
  outline: 2px solid var(--dash-teal);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1180px) {
  .dash { padding: 32px 16px 40px; }
  .dash-columns { grid-template-columns: minmax(0, 1fr); }
  .dash-member-person { width: 190px; }
  .dash-iteration-name { width: auto; flex: 1 1 200px; }
  .dash-iteration-end { width: 150px; }
}

@media (max-width: 900px) {
  .dash { padding: 24px 16px 28px; }
  .dash-page { gap: 22px; }

  .dash-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dash-title { font-size: 26px; margin-top: 2px; }
  .dash-panel { padding: 18px 18px 16px; }

  .dash-flow { padding: 18px 20px 20px; }
  .dash-flow-caption { margin-bottom: 12px; }
  .dash-flow-totals { display: none; }

  /* The rail turns on its side: one row per state, the spine becomes the
     vertical connector down the left. */
  .dash-rail { position: relative; flex-direction: column; }

  .dash-rail::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 20px;
    bottom: 20px;
    width: 1.5px;
    background: var(--dash-edge);
  }

  .dash-station {
    display: grid;
    grid-template-columns: 12px 86px minmax(0, 1fr) 46px;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex: none;
    margin: 0;
    padding: 8px 0;
  }

  .dash-station::before { display: none; }

  .dash-station-node {
    position: static;
    order: 1;
    width: 11px;
    height: 11px;
  }

  .dash-station--go .dash-station-node::after { display: none; }

  .dash-station-label {
    order: 2;
    margin: 0;
    font-size: 9px;
    letter-spacing: 0.14em;
  }

  .dash-station-track {
    order: 3;
    margin: 0;
    background: var(--dash-track);
  }

  .dash-flow--zero .dash-station-track { display: block; }

  .dash-station-count {
    order: 4;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: right;
  }

  .dash-station-note { display: none; }

  /* Rows stack: the lateness moves under the meta line rather than off to the
     right, where there is no longer room for it. */
  .dash-row { gap: 11px; padding: 13px 6px; margin: 0 -6px; }
  .dash-row-title { font-size: 14px; }
  .dash-row-meta { font-size: 9px; letter-spacing: 0.11em; }

  /* The right rail stacks: the chevron keeps the title's line so the row still
     reads as one target, and the lateness drops underneath it. */
  .dash-row-aside {
    width: auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 6px;
    padding-top: 4px;
  }

  .dash-row-aside .dash-chevron { order: -1; }

  .dash-member { flex-wrap: wrap; }
  .dash-member-person { width: 100%; }
  .dash-member-count { width: auto; }

  .dash-iteration { flex-wrap: wrap; gap: 6px 14px; }
  .dash-iteration-name { flex: 1 1 100%; }
  .dash-iteration-software,
  .dash-iteration-tasks { width: auto; }
  .dash-track { flex: 1 1 100px; }
  .dash-iteration-end { width: auto; text-align: left; }

  .dash-table thead th:nth-child(4),
  .dash-table tbody td:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dash *,
  .dash *::before,
  .dash *::after {
    animation: none !important;
    transition: none !important;
  }
}
/*
 * Documents (Mediathek): library, document page, upload and bulk upload.
 *
 * Tokens, buttons, the verdict band and captions come from software.css;
 * panels and side rows from my_workspace.css; tabs and selects from
 * iteration_timeline.css; fields and forms from work_items.css. Only the
 * document pieces live here, under dc-.
 */

.dc-tabs { flex-wrap: wrap; row-gap: 8px; }
.dc-tab-fix { margin-left: auto; }
.dc-hidden { margin: -6px 0 0; padding: 8px 14px; border-left: 3px solid var(--sw-amber); background: var(--sw-warn-tint); }

/* Library */
.dc-table { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.dc-row {
  display: grid;
  grid-template-columns: 2.6rem minmax(16rem, 3fr) 7.5rem 9rem minmax(7rem, 1fr) minmax(8rem, 1fr) 11rem;
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 12.5px;
}
.dc-row--head {
  padding-block: 9px;
  border-top: 0;
  background: var(--sw-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.dc-row--in-batch { padding-left: 34px; }
.dc-section-head, .dc-batch-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--sw-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.dc-section-head { background: var(--sw-paper); }
.dc-section-head b, .dc-batch-head b { font-weight: 600; color: var(--sw-slate); }
.dc-section-head span, .dc-batch-head span { color: var(--sw-chevron); }
.dc-batch-head { padding-left: 34px; border-top-color: var(--sw-line-soft); background: var(--sw-surface); box-shadow: inset 3px 0 0 var(--sw-rail); }
.dc-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.7rem;
  border: 1px solid var(--sw-line);
  border-radius: 3px 8px 3px 3px;
  background: var(--sw-paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--sw-mute);
}
.dc-glyph--pdf { color: var(--sw-late); border-color: var(--sw-late-tint); background: var(--sw-late-tint); }
.dc-glyph--markdown, .dc-glyph--text { color: var(--sw-teal); }
.dc-glyph--slides { color: var(--sw-flight); background: var(--sw-warn-tint); }
.dc-main, .dc-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dc-title { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.dc-title:hover { text-decoration: underline; }
.dc-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-flags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dc-actions { display: flex; justify-content: flex-end; gap: 6px; }
.dc-fix { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 3px; background: var(--sw-warn-tint); }
.dc-fix-desc { flex: 1 1 16rem; }

@media (max-width: 1279px) {
  .dc-row { grid-template-columns: 2.6rem minmax(0, 1fr) 7rem minmax(7rem, 1fr) 10rem; }
  .dc-row > :nth-child(4), .dc-row > :nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .dc-row { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 6px 12px; padding: 12px 14px; }
  .dc-row--head { display: none; }
  .dc-row--in-batch { padding-left: 22px; }
  .dc-row > .dc-cat, .dc-row > .dc-links, .dc-row > .dc-flags, .dc-row > .dc-actions { grid-column: 2; }
  .dc-actions { justify-content: flex-start; }
  .dc-fix { grid-column: 1 / -1; }
  .dc-tab-fix { margin-left: 0; }
}

/* Document page */
.dc-detail-title { font-size: 28px; line-height: 1.15; max-width: 60rem; }
.my-cols.dc-cols { grid-template-columns: minmax(0, 1fr) 22rem; }
.dc-preview { overflow: hidden; }
.dc-prose { max-height: 70vh; overflow-y: auto; padding: 16px 22px 20px; }
.dc-prose h1, .dc-prose h2, .dc-prose h3 { font-family: "Archivo", sans-serif; margin: 14px 0 6px; }
.dc-prose table { border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.dc-prose th, .dc-prose td { border: 1px solid var(--sw-line); padding: 4px 8px; text-align: left; }
.dc-pdf { display: block; width: 100%; height: 75vh; border: 0; border-top: 1px solid var(--sw-line-soft); }
.dc-image { padding: 16px; text-align: center; }
.dc-image img { max-width: 100%; max-height: 70vh; }
.dc-card { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.dc-card p { margin: 0; }
.dc-card > div { flex: 1; }
.dc-dead { color: var(--sw-mute); text-decoration: line-through; }
.dc-who-rule { padding: 0 18px 14px; margin: 0; }
@media (max-width: 1023px) {
  .my-cols.dc-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Forms */
.dc-lede { margin: 0; max-width: 46rem; color: var(--sw-mute); font-size: 14px; line-height: 1.5; }
.dc-current { display: flex; align-items: center; gap: 12px; }
.dc-current p { margin: 0; }
.wi-field .dc-drop { padding: 18px 14px; border: 1.5px dashed var(--sw-line); background: var(--sw-paper); }
.dc-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--sw-line); border-radius: 3px; overflow: hidden; }
.dc-kinds .dc-kind { border-top: 1px solid var(--sw-line); border-left: 1px solid var(--sw-line); margin: -1px 0 0 -1px; }
.dc-confidential { align-self: flex-start; margin-right: auto; }
.dc-bulk-rows { display: flex; flex-direction: column; gap: 6px; padding: 12px 20px 16px; }
.dc-bulk-row { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 1.4fr) 10rem 12rem; gap: 8px; align-items: center; }
.dc-bulk-row .sw-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1023px) {
  .dc-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-bulk-row { grid-template-columns: minmax(0, 1fr); }
}
/*
 * Features: list, first run, detail and form.
 *
 * Tokens, buttons, the verdict band and captions come from software.css;
 * panels and side rows from my_workspace.css; tabs and selects from
 * iteration_timeline.css; state dots, the rail, form fields and comments
 * from work_items.css. Only the feature pieces live here.
 */

.ft-lede { margin: 0; max-width: 46rem; color: var(--sw-mute); font-size: 14px; line-height: 1.5; }
.ft-tabs { flex-wrap: wrap; row-gap: 8px; }

/* List */
.ft-table { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.ft-row {
  display: grid;
  grid-template-columns: minmax(16rem, 3fr) 10.5rem 5.5rem minmax(8rem, 1.2fr) 8.5rem 5.5rem 9.5rem;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 12.5px;
}
.ft-row--head {
  padding-block: 9px;
  border-top: 0;
  background: var(--sw-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.ft-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 10px 18px;
  background: var(--sw-paper);
  border-top: 1px solid var(--sw-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.ft-section-head b { font-weight: 600; color: var(--sw-slate); }
.ft-section-head span { color: var(--sw-chevron); }
.ft-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ft-title { font-weight: 500; font-size: 13.5px; line-height: 1.3; }
.ft-title:hover { text-decoration: underline; }
.ft-place, .ft-due { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ft-due { font-size: 11px; }
.ft-move { justify-self: end; }
.ft-hold { font-size: 12px; color: var(--sw-mute); }
.ft-hold--late { color: var(--sw-late); }

/* First run */
.ft-first .my-lede { padding-top: 4px; }
.ft-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ft-step;
}
.ft-steps li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 20px;
  border-right: 1px solid var(--sw-line-soft);
  counter-increment: ft-step;
}
.ft-steps li:last-child { border-right: 0; }
.ft-steps b::before {
  content: counter(ft-step) " · ";
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  color: var(--sw-teal);
}
.ft-steps span { font-size: 12.5px; line-height: 1.45; color: var(--sw-mute); }

/* Detail */
.ft-detail-title { font-size: 28px; line-height: 1.15; max-width: 60rem; }
.wi-rail.ft-rail { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); }
.ft-handoff { border-color: var(--sw-teal); scroll-margin-top: 80px; }
.ft-handoff-note { background: var(--sw-tint); }
.ft-review-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ft-shots { display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 20px; }
.ft-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 5.5rem;
  border: 1px solid var(--sw-line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--sw-paper);
  color: var(--sw-mute);
  font-size: 11px;
}
.ft-shot img { width: 100%; height: 100%; object-fit: cover; }

/* Form */
.ft-files { gap: 8px; }
.ft-fixed { margin: 0; padding: 9px 0; font-weight: 500; font-size: 14px; }
.ft-files input[type="file"] {
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--sw-line);
  border-radius: 3px;
  background: var(--sw-paper);
  font-size: 13px;
  color: var(--sw-mute);
}
.ft-files input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--sw-line);
  border-radius: 3px;
  background: var(--sw-surface);
  font: inherit;
  font-weight: 500;
  color: var(--sw-slate);
  cursor: pointer;
}
.ft-file-list:empty { display: none; }
.ft-attachment { display: flex; flex-direction: column; gap: 4px; width: 8rem; }
.ft-attachment p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-shots .ft-attachment { padding: 0; }

@media (max-width: 1279px) {
  .ft-row { grid-template-columns: minmax(0, 1fr) 10rem minmax(7rem, 1fr) 8rem 9rem; }
  .ft-row > :nth-child(3), .ft-row--head > :nth-child(3), .ft-row > :nth-child(6), .ft-row--head > :nth-child(6) { display: none; }
  .wi-rail.ft-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .ft-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-steps li { border-bottom: 1px solid var(--sw-line-soft); }
}
@media (max-width: 640px) {
  .ft-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .ft-row--head { display: none; }
  .ft-row > .ft-main { grid-column: 1 / -1; }
  .ft-row > :nth-child(4), .ft-row > :nth-child(5) { display: none; }
  .wi-rail.ft-rail { grid-template-columns: minmax(0, 1fr); }
  .ft-steps { grid-template-columns: minmax(0, 1fr); }
  .ft-steps li { border-right: 0; }
}
/*
 * Self-hosted webfonts. Downloaded from Google Fonts and served from
 * app/assets/fonts so the app makes no third-party request on page load.
 *
 * Archivo and IBM Plex are both SIL Open Font License 1.1 — see
 * app/assets/fonts/OFL.txt. Only the latin and latin-ext subsets are
 * shipped, and only the weights the design system actually uses:
 *
 *   Archivo        600, 700   display
 *   IBM Plex Sans  400, 500, 600   body
 *   IBM Plex Mono  400, 500   micro-labels and figures
 *
 * To add a weight, add it here and drop the matching .woff2 alongside.
 */

/* Archivo 600 — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/archivo-600-latin-ext-95b046b07349ee8b7e8bf87c24e991a03da301ff524a4e8ede7747a246d1505c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 600 — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/archivo-600-latin-4e41fe14848225eed128d13b5fdf676531b39510573e663a0378e002c4e05047.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo 700 — latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/archivo-700-latin-ext-95b046b07349ee8b7e8bf87c24e991a03da301ff524a4e8ede7747a246d1505c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Archivo 700 — latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/archivo-700-latin-4e41fe14848225eed128d13b5fdf676531b39510573e663a0378e002c4e05047.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-400-latin-ext-0d3244a86e3abbd13edb34f9fb1a6d1e97893c7186a5ac0caadb1884b7c801d9.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 400 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-400-latin-bf724fb240693409729589ab1cd2fc22a9f9d70492d255e2fcf5631cf294654b.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-500-latin-ext-5a36abc453e5c5931773dd4cd48fea110a45d86c60e8afb6f919d48384128afe.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Mono 500 — latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/ibm-plex-mono-500-latin-da9fca28b8d867e1e314d92d78aa3c813e6b9d76a128d17642c4eaa7c8aedc84.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 400 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/ibm-plex-sans-400-latin-ext-6a0530c874d19f88a394ecf2712e406fd2d32b2eab799aee89d75c64bd9b314d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 400 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/ibm-plex-sans-400-latin-f9b17a13d353a82598dbca726404a3e453e600c85586edc08dcf127b1ba833de.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 500 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/ibm-plex-sans-500-latin-ext-6a0530c874d19f88a394ecf2712e406fd2d32b2eab799aee89d75c64bd9b314d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 500 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/ibm-plex-sans-500-latin-f9b17a13d353a82598dbca726404a3e453e600c85586edc08dcf127b1ba833de.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans 600 — latin-ext */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/ibm-plex-sans-600-latin-ext-6a0530c874d19f88a394ecf2712e406fd2d32b2eab799aee89d75c64bd9b314d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* IBM Plex Sans 600 — latin */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/ibm-plex-sans-600-latin-f9b17a13d353a82598dbca726404a3e453e600c85586edc08dcf127b1ba833de.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
 * Iterations list (iterations#index), timeline (?view=timeline) and close-out
 * (iterations#closeout).
 *
 * The chart grammar — rows, side column, axis, ground, today line, cards —
 * comes from software_gantt.css (.sg-*); the `.sw` tokens and components from
 * software.css. Only what is particular to iterations lives here: lanes of
 * bars, the concurrency strip, and the close-out table.
 *
 * A bar's outline says what its dates and open work say:
 *   ended, work open   --sw-late         upcoming   --sw-rail
 *   running            --sw-amber        closed     solid, no outline
 * The fill is completed plus verified over the tasks not cancelled.
 *
 * This file loads before software_gantt.css, so every rule that adjusts an
 * .sg-* element is scoped under .sw--timeline to win on specificity.
 */

.it-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--sw-line); }
.it-tabs a {
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}
.it-tabs a:hover { color: var(--sw-slate); }
.it-tabs a[aria-current] { border-bottom-color: var(--sw-amber); color: var(--sw-slate); font-weight: 600; }

.it-count { margin-left: 6px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; opacity: 0.75; }
.it-count--bad { color: var(--sw-late); opacity: 1; }
.sw-seg a[aria-current] .it-count--bad { color: #ffb4a6; }

.it-hidden {
  margin: 0;
  padding: 10px 14px;
  border-radius: 4px;
  background: var(--sw-warn-tint);
  color: var(--sw-flight);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.it-hidden a { margin-left: 10px; color: var(--sw-teal); text-decoration: underline; text-transform: none; font-family: "IBM Plex Sans", sans-serif; font-size: 12.5px; letter-spacing: 0; }

/* Concurrency: how many iterations run on each day. */
.sw--timeline .it-concurrency { min-height: 46px; background: var(--sw-tint); border-bottom-color: var(--sw-line); }
.sw--timeline .it-concurrency-side { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-left: 20px; }
.it-conc { position: absolute; top: 6px; bottom: 6px; display: flex; align-items: flex-end; padding: 0 3px; }
.it-conc i { display: block; width: 100%; min-height: 2px; border-radius: 1px 1px 0 0; background: var(--sw-rail); }
.it-conc--today i { background: var(--sw-amber); }

/* Lanes */
.sw--timeline .it-lane { min-height: 60px; }
.sw--timeline .it-lane .sg-side { padding-left: 40px; }
.it-lane-label { font-size: 12px; color: var(--sw-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sw--timeline .it-slot { top: 9px; height: 22px; }
.it-bar {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 4px;
  height: 100%;
  padding: 0;
  border: 1.3px solid var(--sg-verified);
  border-radius: 2px;
  background: var(--sw-surface);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
}
.it-bar:hover { filter: brightness(0.97); }
.it-bar--ended-open { border-color: var(--sw-late); }
.it-bar--running { border-color: var(--sw-amber); }
.it-bar--upcoming { border-color: var(--sw-rail); border-style: dashed; }
.it-bar--closed { border-color: var(--sg-completed); }
.it-done { position: absolute; inset: 0 auto 0 0; background: rgb(85 149 155 / 0.6); }
.it-bar--closed .it-done { background: var(--sg-completed); }

.it-name {
  position: relative;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sw-slate);
}
.it-name--out { position: absolute; top: 3px; left: calc(100% + 2px); padding: 0 4px; background: rgb(255 255 255 / 0.85); }

.it-stats {
  position: absolute;
  top: 27px;
  left: 2px;
  white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.it-stats--ended-open { color: var(--sw-late); }
.it-stats--running { color: var(--sw-flight); }

.it-tail { position: absolute; bottom: 7px; height: 2px; background: rgb(183 51 29 / 0.4); }

.it-key--running { display: inline-block; width: 18px; height: 10px; border: 1.3px solid var(--sw-amber); border-radius: 2px; }
.it-goal { margin: -4px 0 12px; color: var(--sw-mute); font-size: 12.5px; line-height: 1.45; }

/* ------------------------------------------------------------------ list */

.it-section { display: flex; flex-direction: column; gap: 10px; }
.it-list { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.it-row {
  display: grid;
  grid-template-columns: minmax(16rem, 2.4fr) minmax(11rem, 1.2fr) minmax(10rem, 1fr) minmax(9rem, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 14px 18px 14px 16px;
  border-left: 3px solid transparent;
}
.it-row + .it-row { border-top: 1px solid var(--sw-line-soft); }
.it-row:hover { background: var(--sw-zebra); }
.it-row--ended-open { border-left-color: var(--sw-reject); }
.it-row--running { border-left-color: var(--sw-amber); }
.it-row--upcoming { border-left-color: var(--sw-rail); }
.it-row--closed, .it-row--ended-done { border-left-color: var(--sg-completed); }

.it-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.it-row-name { font-weight: 600; font-size: 14px; }
.it-row-name:hover { text-decoration: underline; }
.it-row-goal {
  margin: 2px 0 0;
  color: var(--sw-mute);
  font-size: 12.5px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.it-row-when { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.it-row-state { color: var(--sw-mute); }
.it-row--ended-open .it-row-state { color: var(--sw-late); }
.it-row--running .it-row-state { color: var(--sw-flight); }
.it-row-progress { display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.it-meter { display: block; height: 6px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.it-meter b { display: block; height: 100%; background: var(--sg-verified); }
.it-row-flags { display: flex; flex-wrap: wrap; gap: 6px; }
.it-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.it-inline-form { display: inline; margin: 0; }

@media (max-width: 1023px) {
  .it-row { grid-template-columns: 1fr 1fr; }
  .it-row-main { grid-column: 1 / -1; }
  .it-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .it-row { grid-template-columns: 1fr; gap: 10px; }
}

/* ------------------------------------------------------------- close-out */

.it-co-head { display: flex; flex-direction: column; gap: 10px; }
.it-co-lede { max-width: 54rem; margin: 0; color: var(--sw-mute); font-size: 14.5px; line-height: 1.5; }

.it-co-group { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.it-co-group-head { padding: 14px 18px 14px 16px; border-left: 4px solid var(--sg-completed); }
.it-co-group--sweep .it-co-group-head { border-left-color: var(--sw-amber); }
.it-co-group--replan .it-co-group-head { border-left-color: var(--sw-late); }
.it-co-group-title { margin: 0 0 3px; font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 16px; font-weight: 600; }
.it-co-group-sum { margin: 0; color: var(--sw-mute); font-size: 12.5px; }

.it-co-row {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) 5rem 10rem 6rem 4rem minmax(16rem, 2.2fr);
  gap: 12px;
  align-items: center;
  padding: 10px 18px 10px 20px;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 13px;
}
.it-co-row--head {
  padding-block: 8px;
  background: var(--sw-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}
.it-co-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.it-co-name a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-co-name a:hover { text-decoration: underline; }
.it-co-done { display: flex; align-items: center; gap: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 600; }
.it-co-done i { display: block; width: 52px; height: 6px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.it-co-done b { display: block; height: 100%; background: var(--sg-verified); }
.it-co-wrong { color: var(--sw-late); text-decoration: line-through; }
.it-co-open { color: var(--sw-late); font-weight: 600; }
.it-co-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.it-co-form { display: flex; gap: 8px; margin: 0; }
.it-co-select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--sw-line);
  border-radius: 3px;
  background: var(--sw-surface);
  color: var(--sw-slate);
  font: inherit;
  font-size: 12.5px;
}
.it-co-hint { color: var(--sw-flight); font-size: 12px; text-decoration: underline; }
.it-co-anyway summary { cursor: pointer; color: var(--sw-teal); font-size: 12px; }
.it-co-anyway[open] summary { margin-bottom: 8px; }
.it-co-note { margin: 0; padding: 14px 16px; border-radius: 4px; background: var(--sw-warn-tint); color: var(--sw-flight); font-size: 12.5px; line-height: 1.45; }

@media (max-width: 1023px) {
  .it-co-row { grid-template-columns: 1fr 4rem 4rem; }
  .it-co-row--head span:nth-child(n + 4), .it-co-row > :nth-child(3), .it-co-row > :nth-child(4) { display: none; }
  .it-co-row--head span:nth-child(3) { display: none; }
  .it-co-act { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .sw--timeline .it-lane .sg-side { padding-left: 12px; }
  .sw--timeline .it-lane .sg-track { height: 50px; }
  .sw--timeline .it-concurrency .sg-track { height: 40px; }
  .sw--timeline .it-concurrency-side { padding-left: 12px; flex-direction: row; gap: 10px; }
}
/*
 * Manager assignments: the team overview and one person's schedule.
 *
 * Tokens, buttons and the verdict band come from software.css; panels from
 * my_workspace.css; lanes from software_gantt.css. Only the assignment
 * pieces live here, under ma-.
 */

.my-cols.ma-cols { grid-template-columns: minmax(0, 1fr) 22rem; }
.ma-table { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.ma-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1.6fr) 7.5rem minmax(10rem, 1.6fr) minmax(8rem, 1.2fr) 8rem;
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 12.5px;
}
.ma-row > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ma-row--head { padding-block: 9px; border-top: 0; background: var(--sw-tint); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sw-mute); }
.ma-row--off { opacity: 0.8; }
.ma-section-head { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 10px 18px; background: var(--sw-paper); border-top: 1px solid var(--sw-line); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; }
.ma-section-head b { font-weight: 600; color: var(--sw-slate); }
.ma-section-head span { color: var(--sw-chevron); }
.ma-who a { font-weight: 600; font-size: 13.5px; }
.ma-bar { display: block; height: 8px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.ma-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--sw-late) 0 var(--late, 0%), var(--sw-teal) var(--late, 0%)); }
.ma-bar--empty { opacity: 0.5; }
.ma-move { align-items: flex-end; }
.ma-by { padding: 0 18px 8px; margin: 0; }

@media (max-width: 1023px) {
  .my-cols.ma-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ma-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ma-row--head { display: none; }
  .ma-row > :nth-child(3), .ma-row > :nth-child(4) { grid-column: 1 / -1; }
}

/* Person page */
.ma-move-row { display: grid; grid-template-columns: minmax(14rem, 1.4fr) auto auto; gap: 16px; align-items: end; padding: 12px 20px; border-top: 1px solid var(--sw-line-soft); }
.ma-move-main p { margin: 0 0 3px; font-size: 13px; }
.ma-dates, .ma-hand { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.ma-dates label { display: flex; flex-direction: column; gap: 2px; }
.ma-dates input[type="date"] { width: 9.5rem; }
.ma-keep { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--sw-mute); }
@media (max-width: 1279px) {
  .ma-move-row { grid-template-columns: minmax(0, 1fr); }
}
/*
 * Manager operations: the control room.
 *
 * Tokens, buttons and the verdict band come from software.css; panels and
 * side rows from my_workspace.css. Only the control room pieces live here,
 * under op-.
 */

.op-filter select { min-width: 12rem; }
.my-cols.op-cols { grid-template-columns: minmax(0, 1fr) 24rem; }
.op-queue { scroll-margin-top: 80px; }
.op-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--sw-line-soft); }
.op-main p { margin: 0 0 3px; font-size: 13px; }
.op-more { padding: 6px 20px 14px; margin: 0; }
a.sw-fig { color: inherit; text-decoration: none; }
a.sw-fig:hover b { text-decoration: underline; }
@media (max-width: 1023px) {
  .my-cols.op-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .op-row { grid-template-columns: minmax(0, 1fr); }
}

.op-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 20px; background: var(--sw-paper); border-top: 1px solid var(--sw-line-soft); }
.op-row--tick { grid-template-columns: auto minmax(0, 1fr) auto; }
/*
 * Personal workspace (my#index).
 *
 * Tokens, buttons, the verdict band and captions come from software.css; the
 * tabs, meters and small selects from iteration_timeline.css; ids and the
 * critical tag from software_gantt.css. Only the workspace's own pieces live
 * here: the timer chip, the Now band, the pick list, the sources and the side
 * panels.
 *
 * The Now band is the only ink surface on the page: it is the live thing.
 */

.my-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--sw-line);
  border-radius: 4px;
  background: var(--sw-surface);
  color: var(--sw-mute);
  font-size: 12.5px;
  white-space: nowrap;
}
.my-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-chevron); }
.my-chip b { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--sw-slate); }
.my-chip--live { color: var(--sw-slate); }
.my-chip--stale { color: var(--sw-late); border-color: var(--sw-late); }
.my-chip--stale i { background: var(--sw-reject); }
.my-chip--live i { background: var(--sw-amber); box-shadow: 0 0 0 3px rgb(242 145 17 / 0.25); }

/* Now band */
.my-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 18px 24px;
  border-radius: 4px;
  background: var(--sw-ink);
  color: #fff;
}
.my-now-main { flex: 1 1 28rem; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.my-now-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #a8c4c6;
}
.my-now-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-amber); }
.my-now-eyebrow i.my-live { background: #5cc9d1; }
.my-now-title { font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 19px; font-weight: 600; line-height: 1.3; color: #fff; }
.my-now-title:hover { text-decoration: underline; }
.my-now-meta { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.6px; color: #8fb3b6; }
.my-now-stale { flex: 1 1 18rem; margin: 0; color: #f5836f; font-size: 12.5px; line-height: 1.45; }
.my-now-clock { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 26px; font-weight: 600; }
.my-now-actions { display: flex; gap: 8px; }
.sw .my-btn-on-ink { background: transparent; border-color: rgb(255 255 255 / 0.25); color: #fff; }
.sw .my-btn-on-ink:hover { background: rgb(255 255 255 / 0.08); }

/* Columns */
.my-cols { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 20px; align-items: start; }
.my-main, .my-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.my-panel { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.my-panel--bad { border-left: 3px solid var(--sw-reject); }
.my-caption { padding: 16px 20px 12px; }
.my-lede { margin: 0; padding: 0 20px 12px; font-size: 12px; line-height: 1.45; color: var(--sw-mute); }
.my-panel--bad .my-lede { color: var(--sw-late); }
.my-meta { margin: 0; font-size: 12px; color: var(--sw-mute); }

/* Next picks */
.my-pick { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--sw-line-soft); }
.my-pick-n { font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 22px; font-weight: 600; color: var(--sw-chevron); width: 18px; }
.my-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.my-pick-main p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-pick-title { font-weight: 600; font-size: 13.5px; }
.my-pick-title:hover { text-decoration: underline; }
.my-flag { color: var(--sw-late); font-size: 13px; }

/* Sources */
.my-source {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem 7.5rem auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--sw-line-soft);
}
.my-source-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.my-source-name { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-source-meter { height: 8px; }
.my-source-meter b { background: var(--sw-rail); }
.my-source-meter b.my-bad { background: var(--sw-reject); }
.my-source-count { font-size: 10.5px; font-weight: 600; }

/* Side rows */
.my-side-row { display: flex; flex-direction: column; gap: 3px; padding: 10px 18px; border-top: 1px solid var(--sw-line-soft); }
.my-side-row p { margin: 0; font-size: 12.5px; }
.my-side-row a:hover, .my-link-row a:hover { text-decoration: underline; }
.my-side-row--split { flex-direction: row; justify-content: space-between; align-items: center; font-size: 12.5px; }
.my-link-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 18px 12px; border-top: 1px solid var(--sw-line-soft); }
.my-link-row p { margin: 0; font-size: 12.5px; }
.my-link-form { display: flex; gap: 8px; margin: 0; }
.my-link-form select { flex: 1; min-width: 0; }


@media (max-width: 1023px) {
  .my-cols { grid-template-columns: minmax(0, 1fr); }
  .my-source { grid-template-columns: minmax(0, 1fr) auto; }
  .my-source-meter { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 640px) {
  .my-now { padding: 14px; }
  .my-pick { flex-wrap: wrap; padding: 12px 14px; }
  .my-pick-main { flex-basis: calc(100% - 40px); }
  .my-pick-main p { white-space: normal; }
  .my-source { padding: 12px 14px; }
}

/* ------------------------------------------------------------------ board */

.my-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 4px;
  overflow: hidden;
}
.my-col { border-right: 1px solid var(--sw-line); min-width: 0; }
.my-col:last-child { border-right: 0; }
.my-col-head { padding: 16px 16px 14px; background: var(--sw-tint); border-bottom: 1px solid var(--sw-line); }
.my-col-top { display: flex; align-items: center; justify-content: space-between; }
.my-col-top h2 {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.my-col-top b { font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 20px; }
.my-col--pending .my-col-top b { color: var(--sw-late); }
.my-col--in-progress .my-col-top b { color: var(--sw-flight); }
.my-col-head p { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--sw-mute); }
.my-col-empty { margin: 0; padding: 20px 16px; color: var(--sw-chevron); font-size: 12px; }

.my-group > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--sw-paper);
  border-bottom: 1px solid var(--sw-line-soft);
  cursor: pointer;
  list-style: none;
  font-size: 12px;
}
.my-group > summary::-webkit-details-marker { display: none; }
.my-group > summary svg { color: var(--sw-teal); flex: none; transition: transform 0.15s; }
.my-group[open] > summary svg { transform: rotate(90deg); }
.my-group-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.my-card { display: flex; flex-direction: column; gap: 5px; padding: 10px 16px 10px 28px; border-bottom: 1px solid var(--sw-line-soft); position: relative; }
.my-card--late::before { content: ""; position: absolute; left: 16px; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--sw-reject); }
.my-card-title { margin: 0; font-size: 12.5px; font-weight: 500; line-height: 1.35; }
.my-card-title a:hover { text-decoration: underline; }
.my-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.my-card-meta .my-meta { font-size: 11px; }
.my-card-live { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; text-transform: uppercase; color: var(--sw-flight); }
.my-card-action { margin: 2px 0 0; }

.my-more > summary { padding: 9px 16px 9px 28px; border-bottom: 1px solid var(--sw-line-soft); color: var(--sw-teal); font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.my-more > summary::-webkit-details-marker { display: none; }
.my-more[open] > summary { display: none; }

@media (max-width: 1279px) {
  .my-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-col:nth-child(2) { border-right: 0; }
  .my-col:nth-child(-n + 2) { border-bottom: 1px solid var(--sw-line); }
}
@media (max-width: 640px) {
  .my-board { grid-template-columns: minmax(0, 1fr); }
  .my-col { border-right: 0; border-bottom: 1px solid var(--sw-line); }
}

/* ------------------------------------------------------------------ inbox */

.my-inbox-empty { padding: 26px 22px; }
.my-inbox-empty p { margin: 0 0 6px; color: var(--sw-mute); line-height: 1.5; }
.my-inbox-empty a { color: var(--sw-teal); text-decoration: underline; }
.my-activity { display: flex; align-items: flex-start; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--sw-line-soft); }
.my-activity:first-child { border-top: 0; }
.my-activity-kind {
  flex: none;
  width: 76px;
  padding: 3px 0;
  border-radius: 3px;
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--sw-tint);
  color: var(--sw-teal);
}
.my-activity-kind--comment { background: var(--sw-warn-tint); color: var(--sw-flight); }
.my-activity-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.my-activity-main p { margin: 0; font-size: 13px; }
.my-activity-main a:hover { text-decoration: underline; }
.my-activity-quote { color: var(--sw-mute); font-size: 12.5px; line-height: 1.45; }
.my-activity-at { flex: none; font-size: 10px; color: var(--sw-chevron); }

/* ------------------------------------------------------------------ stats */

.my-stats-lede { display: flex; flex-direction: column; gap: 8px; }
.my-stats-head { max-width: 56rem; margin: 0; font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; }
.my-stats-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; }
.my-stat { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; border-right: 1px solid var(--sw-line); }
.my-stat:last-child { border-right: 0; }
.my-stat b { font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 28px; font-weight: 600; }
.my-stat--bad b { color: var(--sw-late); }
.my-stat small { color: var(--sw-mute); font-size: 12px; }
.my-cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.my-went { display: flex; flex-direction: column; gap: 6px; padding: 8px 20px; }
.my-went-top { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; }
.my-went .it-meter { height: 10px; }
.my-went .it-meter b { background: var(--sw-rail); }
.my-went .it-meter b.my-bad { background: var(--sw-reject); }
.my-lede--warn { padding-top: 10px; color: var(--sw-flight); }
.my-time { display: flex; gap: 32px; padding: 4px 20px 12px; }
.my-time div { display: flex; flex-direction: column; gap: 4px; }
.my-time b { font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 24px; font-weight: 600; }
.my-stats-caption { margin-top: -6px; }

@media (max-width: 1023px) {
  .my-stats-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-stat { border-bottom: 1px solid var(--sw-line); }
  .my-cols--even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .my-activity { flex-wrap: wrap; padding: 12px 14px; }
  .my-activity-at { width: 100%; }
}
/*
 * Global nav (nv-). Mocked in Pencil row y=48000: Desktop states dkdNS,
 * Dropdowns Enqcw, Search S6puS, User menu LS6p9, Tablet & mobile RuCU2,
 * Edge states k6IEDK.
 *
 * One markup for every width: the bar at desktop; at tablet width (≤1180px)
 * the search field folds into a button and the name leaves; below 900px the
 * phone bar, its full sheet and a full-screen search take over.
 */

:root {
  --nv-ink: #0B2226;
  --nv-ink-2: #123236;
  --nv-slate: #12292D;
  --nv-teal: #246871;
  --nv-amber: #F29111;
  --nv-rail: #6FA9AF;
  --nv-mute: #4F6C6F;
  --nv-quiet: #6E8A8D;
  --nv-late: #B7331D;
  --nv-label: #8FB3B6;
  --nv-soft-label: #A8C4C6;
  --nv-edge: #26454A;
  --nv-hint: #6D9296;
  --nv-line: #C9DADB;
  --nv-line-soft: #DEE8E8;
  --nv-hover: #EFF4F4;
  --nv-here: #EAF2F2;
  --nv-sans: "IBM Plex Sans", system-ui, sans-serif;
  --nv-mono: "IBM Plex Mono", ui-monospace, monospace;
  --nv-display: Archivo, system-ui, sans-serif;
}

.nv {
  position: relative;
  z-index: 40;
  font-family: var(--nv-sans);
}

.nv [hidden] { display: none !important; }
:where(.nv) a { text-decoration: none; }
:where(.nv) :where(button) { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.nv-icon { display: block; flex: none; }
html.nv-locked { overflow: hidden; }

/* ------------------------------------------------------------------ bar */

.nv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 48px;
  background: var(--nv-ink);
}

.nv-left { display: flex; align-items: center; gap: 8px; height: 60px; min-width: 0; }

.nv-lockup { display: flex; align-items: center; gap: 10px; padding-right: 18px; }
.nv-mark { display: block; flex: none; }
.nv-wordmark { color: #fff; font-family: var(--nv-display); font-size: 15px; font-weight: 700; letter-spacing: 0.4px; }

.nv-items { display: flex; align-items: center; gap: 8px; height: 60px; margin: 0; padding: 0; list-style: none; }

/* One bar, never two: the current item carries a 2px amber edge on the
   nav's bottom, so it reads as "you are here", not as a button. */
.nv-item { position: relative; display: flex; align-items: center; height: 60px; }
.nv-item.is-current { box-shadow: inset 0 -2px 0 var(--nv-amber); }

.nv-hit {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border-radius: 3px;
  color: var(--nv-label);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.nv-hit:hover,
.nv-hit[aria-expanded="true"] { background: var(--nv-ink-2); color: #fff; }
.nv-hit:focus { outline: none; }
.nv-hit:focus-visible { outline: 2px solid var(--nv-rail); outline-offset: 0; color: #fff; }
.nv-item.is-current .nv-hit { color: #fff; font-weight: 600; }
.nv-item.is-current .nv-hit[aria-expanded="true"] { font-weight: 400; }

.nv-chev { width: 12px; height: 12px; transition: transform 0.15s ease; }
[aria-expanded="true"] > .nv-chev { transform: rotate(180deg); }

.nv-badge {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--nv-amber);
  color: var(--nv-ink);
  font-family: var(--nv-mono);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

/* ------------------------------------------------------------------ micro-labels */

.nv-m {
  font-family: var(--nv-mono);
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--nv-mute);
  white-space: nowrap;
}
.nv-m--strong { font-size: 9px; font-weight: 600; letter-spacing: 1.6px; }
.nv-m--quiet { color: var(--nv-quiet); }
.nv-m--go { color: var(--nv-teal); font-weight: 600; }
a.nv-m--go:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ menus */

.nv-menu-wrap { display: flex; align-items: center; }

.nv-menu {
  position: absolute;
  top: 56px;
  left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: 372px;
  padding-top: 6px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--nv-line);
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(11, 34, 38, 0.2);
}

.nv-group { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px 4px; }

.nv-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 9px 16px;
  color: var(--nv-slate);
  text-align: left;
  border-left: 3px solid transparent;
  padding-left: 13px;
}
.nv-row:hover { background: var(--nv-hover); }
.nv-row:focus { outline: none; }
.nv-row:focus-visible { outline: 2px solid var(--nv-teal); outline-offset: -2px; }
.nv-row.is-current { background: var(--nv-here); border-left-color: var(--nv-teal); }

.nv-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nv-row-title { color: var(--nv-slate); font-size: 14px; font-weight: 600; white-space: nowrap; }
.nv-row-meaning { color: var(--nv-mute); font-size: 12px; line-height: 16px; }

.nv-count { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; }
.nv-n { color: var(--nv-slate); font-family: var(--nv-mono); font-size: 14px; font-weight: 600; }
.nv-n.is-alert, .nv-n--late { color: var(--nv-late); }
.nv-n.is-zero { color: var(--nv-quiet); font-weight: 400; }
.nv-unit { color: var(--nv-mute); font-family: var(--nv-mono); font-size: 8px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }

.nv-divider { height: 1px; background: var(--nv-line-soft); }

.nv-foot { padding: 9px 16px; background: var(--nv-hover); border-top: 1px solid var(--nv-line-soft); }

/* ------------------------------------------------------------------ right side */

.nv-right { display: flex; align-items: center; gap: 12px; }

.nv-search { position: relative; }
.nv-form { display: flex; align-items: center; gap: 6px; margin: 0; }

.nv-field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 270px;
  height: 34px;
  padding: 0 7px 0 12px;
  border: 1px solid var(--nv-edge);
  border-radius: 4px;
  color: var(--nv-label);
  transition: width 0.15s ease, background-color 0.15s ease;
}
.nv-search.is-open .nv-field {
  width: clamp(270px, calc(100vw - 1000px), 440px);
  background: var(--nv-ink-2);
  border: 1.5px solid var(--nv-rail);
  padding: 0 6.5px 0 11.5px;
}

.nv-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--nv-sans);
  font-size: 13px;
  caret-color: var(--nv-amber);
  outline: none;
  box-shadow: none;
}
.nv-input:focus { outline: none; box-shadow: none; }
.nv-input::placeholder { color: var(--nv-hint); opacity: 1; }
.nv-input::-webkit-search-cancel-button { display: none; }

.nv-kbd {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border: 1px solid var(--nv-edge);
  border-radius: 3px;
  color: var(--nv-label);
  font-family: var(--nv-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.nv-cancel { display: none; color: var(--nv-soft-label); font-size: 14px; height: 44px; padding: 0 8px !important; }
.nv-search-button { display: none !important; }

/* The results panel sits on the nav's bottom edge, under the field. */
.nv-panel {
  position: absolute;
  top: 47px;
  right: 0;
  z-index: 50;
  width: 620px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.nv-results {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--nv-line);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 10px 28px rgba(11, 34, 38, 0.15);
  overflow: hidden;
}

.nv-results-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--nv-line-soft); }
.nv-results-head .nv-m { font-size: 9px; }
.nv-results-head .nv-m--strong { color: var(--nv-slate); letter-spacing: 1.2px; white-space: normal; }

.nv-lines { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; }
.nv-line { display: flex; gap: 12px; }
.nv-line-k { flex: none; width: 120px; color: var(--nv-slate); font-family: var(--nv-mono); font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; line-height: 18px; }
.nv-line-t { flex: 1; color: var(--nv-mute); font-size: 12.5px; line-height: 18px; }

.nv-results-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 16px; background: var(--nv-hover); border-top: 1px solid var(--nv-line-soft); }
.nv-results-foot .nv-m { white-space: normal; }
.nv-all-touch { display: none; }

.nv-results .nv-group { padding: 10px 16px 3px; }
.nv-results .nv-group .nv-m--strong { color: var(--nv-mute); }

.nv-hit {
  cursor: pointer;
}

a.nv-hit[role="option"] {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  padding: 8px 16px 8px 13px;
  border-left: 3px solid transparent;
  border-radius: 0;
  color: var(--nv-slate);
  font-size: 13px;
}
a.nv-hit[role="option"]:hover { background: transparent; color: var(--nv-slate); }
a.nv-hit[role="option"].is-active { background: var(--nv-here); border-left-color: var(--nv-teal); }
a.nv-hit[role="option"].is-active .nv-hit-title { font-weight: 600; }

.nv-hit-code { flex: none; width: 78px; font-family: var(--nv-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.4px; color: var(--nv-slate); overflow: hidden; text-overflow: ellipsis; }
.nv-hit-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-hit-meta { flex: none; display: flex; align-items: center; gap: 6px; width: 150px; font-family: var(--nv-mono); font-size: 8.5px; letter-spacing: 0.8px; color: var(--nv-mute); text-transform: uppercase; }
.nv-hit-place { flex: none; width: 70px; font-family: var(--nv-mono); font-size: 8.5px; letter-spacing: 0.8px; color: var(--nv-quiet); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-enter { display: none; flex: none; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--nv-line); border-radius: 3px; font-family: var(--nv-mono); font-size: 10px; color: var(--nv-slate); }
a.nv-hit[role="option"].is-active .nv-enter { display: inline-flex; }
a.nv-hit[role="option"].is-active .nv-hit-meta { width: 130px; }
a.nv-hit[role="option"].is-active .nv-hit-place { width: 66px; }

.nv-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--nv-rail); }
.nv-dot--in_progress { background: var(--nv-amber); }
.nv-dot--completed { background: #3E838A; }
.nv-dot--verified { background: #55959B; }
.nv-dot--cancelled { background: #93AAAD; }

/* ------------------------------------------------------------------ user */

.nv-user-wrap { position: relative; }

.nv-user {
  display: flex !important;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 8px 0 5px !important;
  border-radius: 20px;
  color: var(--nv-label) !important;
}
.nv-user:hover, .nv-user[aria-expanded="true"] { background: var(--nv-ink-2) !important; }
.nv-user:hover .nv-name, .nv-user[aria-expanded="true"] .nv-name { color: #fff; }
.nv-user:focus { outline: none; }
.nv-user:focus-visible { outline: 2px solid var(--nv-rail); }

.nv-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--nv-teal);
  color: #fff;
  font-family: var(--nv-mono);
  font-size: 11px;
  font-weight: 600;
}
.nv-avatar--lg { width: 42px; height: 42px; font-size: 14px; }
.nv-avatar--md { width: 36px; height: 36px; font-size: 12px; }

.nv-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nv-soft-label); font-size: 13px; }

.nv-menu--user { top: 46px; left: auto; right: 0; width: 340px; padding-top: 0; }

.nv-who { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--nv-line-soft); }
.nv-who-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.nv-who-name { color: var(--nv-slate); font-family: var(--nv-display); font-size: 16px; font-weight: 600; line-height: 20px; }
.nv-who-email { color: var(--nv-mute); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }

.nv-roles { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 4px; }
.nv-role { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid var(--nv-line); border-radius: 3px; color: var(--nv-slate); font-family: var(--nv-mono); font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; }

.nv-verify { display: flex; align-items: center; gap: 6px; padding: 4px 16px 8px; color: var(--nv-teal); }
.nv-verify .nv-m { color: var(--nv-teal); }

.nv-row--icon { gap: 12px; }
.nv-row--icon > .nv-icon { color: var(--nv-mute); }
.nv-out-form { margin: 0; display: block; }
.nv-row--out { padding-top: 11px !important; padding-bottom: 11px !important; padding-left: 13px !important; padding-right: 16px !important; border-left: 3px solid transparent !important; }

/* ------------------------------------------------------------------ phone pieces, off at desktop */

.nv-phone, .nv-where { display: none; }

.nv-phone { align-items: center; gap: 2px; }
.nv-phone-button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--nv-soft-label) !important;
}
.nv-badge--float { position: absolute; left: 24px; top: 6px; height: 15px; padding: 0 4px; font-size: 9.5px; }

.nv-where { align-items: center; gap: 8px; height: 34px; padding: 0 20px; background: var(--nv-ink-2); color: var(--nv-label); }
.nv-where .nv-m { color: var(--nv-label); }
.nv-where .nv-m--here { color: #fff; font-weight: 600; }

.nv-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: var(--nv-ink);
  padding-bottom: 24px;
}
.nv-sheet-head { display: flex; align-items: center; justify-content: space-between; flex: none; height: 56px; padding: 0 12px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.nv-sheet-head .nv-wordmark { font-size: 14px; }
.nv-sheet-head .nv-lockup { padding-right: 0; }
.nv-sheet-who { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.nv-sheet-who .nv-m { color: var(--nv-label); font-size: 8px; letter-spacing: 0.8px; white-space: normal; }
.nv-sheet-name { color: #fff; font-family: var(--nv-display); font-size: 15px; font-weight: 600; }
.nv-sheet-group { padding: 12px 20px 4px; }
.nv-sheet-group .nv-m { color: var(--nv-label); }

.nv-sheet-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  padding: 0 20px !important;
  color: #EAF3F3 !important;
  text-align: left;
}
.nv-sheet-row:hover { background: var(--nv-ink-2); }
.nv-sheet-row.is-current { background: var(--nv-ink-2); border-left: 3px solid var(--nv-amber); padding-left: 17px !important; }
.nv-sheet-row.is-current .nv-sheet-label { color: #fff; font-weight: 600; }
.nv-sheet-label { font-size: 15px; }
.nv-sheet-spacer { flex: 1; }
.nv-sheet-row .nv-m { color: var(--nv-label); font-size: 8px; }
.nv-sheet-n { color: var(--nv-soft-label); font-family: var(--nv-mono); font-size: 12px; font-weight: 600; }
.nv-sheet-n.is-alert { color: var(--nv-amber); }
.nv-badge--sheet { height: 17px; padding: 0 6px; }
.nv-sheet-row > .nv-icon { color: var(--nv-label); }
.nv-sheet-account { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.nv-sheet-account .nv-sheet-row { gap: 12px; }

/* ------------------------------------------------------------------ tablet: search and name fold */

@media (max-width: 1180px) {
  .nv-bar { padding: 0 24px; }
  .nv-left { gap: 4px; }
  .nv-items { gap: 4px; }
  .nv-right { gap: 10px; }
  .nv-name { display: none; }
  .nv-user { padding: 0 6px 0 5px !important; gap: 6px; }

  .nv-search { display: none; }
  .nv-search-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--nv-edge) !important;
    border-radius: 4px;
    color: var(--nv-label) !important;
  }
  .nv-search-button:hover { background: var(--nv-ink-2) !important; color: #fff !important; }

  /* Search open: the field takes the row, the items step aside. */
  .nv--searching .nv-items, .nv--searching .nv-user-wrap { display: none; }
  .nv--searching .nv-search-button { display: none !important; }
  .nv--searching .nv-cancel { display: inline-flex; align-items: center; }
  .nv--searching .nv-right { flex: 1; justify-content: flex-end; margin-left: 16px; }
  .nv--searching .nv-search { display: block; flex: 1; }
  .nv--searching .nv-field, .nv--searching .nv-search.is-open .nv-field { width: 100%; }
  .nv--searching .nv-panel { left: 0; right: 0; width: auto; }
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 900px) {
  .nv-bar { height: 56px; padding: 0 12px 0 20px; }
  .nv-left { height: 56px; }
  .nv-items, .nv-right { display: none; }
  .nv-lockup { padding-right: 0; }
  .nv-wordmark { font-size: 14px; }
  .nv-phone, .nv-where { display: flex; }

  /* Search takes the screen: the field and Cancel on ink, results below. */
  .nv--searching .nv-right {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #F1F5F5;
  }
  .nv--searching .nv-search { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .nv--searching .nv-form { flex: none; height: 56px; padding: 0 8px 0 12px; background: var(--nv-ink); }
  .nv--searching .nv-field, .nv--searching .nv-search.is-open .nv-field { flex: 1; width: auto; height: 38px; padding: 0 10px; }
  .nv--searching .nv-input { font-size: 15px; }
  .nv--searching .nv-kbd { display: none; }
  .nv--searching .nv-cancel { display: inline-flex; align-items: center; }
  .nv--searching .nv-panel { position: static; width: 100%; max-height: none; flex: 1; overflow-y: auto; }
  .nv--searching .nv-results { border: 0; border-radius: 0; box-shadow: none; }

  .nv-results .nv-group { padding: 12px 16px 4px; background: var(--nv-hover); }
  a.nv-hit[role="option"] { flex-wrap: wrap; gap: 4px 8px; padding: 10px 16px 10px 13px; border-bottom: 1px solid var(--nv-line-soft); }
  .nv-hit-title { order: -1; flex: 0 0 100%; white-space: normal; font-size: 14px; line-height: 19px; }
  .nv-hit-code, .nv-hit-meta, .nv-hit-place { width: auto; }
  a.nv-hit[role="option"].is-active .nv-hit-meta, a.nv-hit[role="option"].is-active .nv-hit-place { width: auto; }
  .nv-enter { display: none !important; }
  .nv-results-foot .nv-m:first-child { display: none; }
  .nv-all-keys { display: none; }
  .nv-all-touch { display: inline; }
}

/* ------------------------------------------------------------------ /search page */

.nv-page { max-width: 1040px; margin: 0 auto; padding: 34px 48px 48px; font-family: "IBM Plex Sans", system-ui, sans-serif; }
.nv-page-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.nv-page-head .nv-m { font-family: "IBM Plex Mono", monospace; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #4F6C6F; }
.nv-page-title { margin: 0; color: #12292D; font-family: Archivo, system-ui, sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -0.6px; }
.nv-page-form { display: flex; gap: 8px; margin: 0 0 20px; }
.nv-page-field { flex: 1; height: 40px; padding: 0 12px; border: 1px solid #C9DADB; border-radius: 4px; background: #fff; color: #12292D; font-size: 14px; }
.nv-page-field:focus { outline: 2px solid #6FA9AF; outline-offset: 0; }
.nv-page-go { height: 40px; padding: 0 18px; border-radius: 4px; background: #0B2226; color: #fff; font-size: 14px; font-weight: 600; }
.nv-page-results .nv-results { border-radius: 4px; box-shadow: none; }
.nv-page-results .nv-m { font-family: "IBM Plex Mono", monospace; font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #4F6C6F; }
.nv-page-results .nv-m--go { color: #246871; font-weight: 600; }
.nv-page-results [data-nav-search-target="all"] { display: none; }

@media (max-width: 900px) {
  .nv-page { padding: 22px 16px 26px; }
}
/*
 * Requirements: list, detail, form and traceability.
 *
 * Tokens, buttons, the verdict band and captions come from software.css;
 * panels and side rows from my_workspace.css; tabs, meters and selects from
 * iteration_timeline.css. Only the requirement pieces live here.
 *
 * Shared pieces — state dots, the lifecycle rail, form fields, comment and
 * link forms — live in work_items.css.
 */

.rq-lede { margin: 0; max-width: 46rem; color: var(--sw-mute); font-size: 14px; line-height: 1.5; }
.rq-tabs { flex-wrap: wrap; row-gap: 8px; }

/* List */
.rq-table { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.rq-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(16rem, 3fr) 7.5rem minmax(9rem, 1.2fr) 8.5rem 6.5rem 9rem;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--sw-line-soft);
}
.rq-row--head {
  padding-block: 9px;
  border-top: 0;
  background: var(--sw-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.rq-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 10px 18px;
  background: var(--sw-paper);
  border-top: 1px solid var(--sw-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.rq-section-head b { font-weight: 600; color: var(--sw-slate); }
.rq-section-head span { color: var(--sw-chevron); }
.rq-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rq-title { font-weight: 500; font-size: 13.5px; line-height: 1.3; }
.rq-title:hover { text-decoration: underline; }
.rq-code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; color: var(--sw-teal); margin-right: 4px; }
.rq-tasks { display: flex; flex-direction: column; gap: 5px; }
.rq-bar { display: flex; height: 6px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.rq-bar b { display: block; height: 100%; }
.rq-bar--verified { background: var(--wi-verified); }
.rq-bar--completed { background: var(--wi-completed); opacity: 0.6; }
.rq-bar--open { background: transparent; }
.rq-target { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.rq-move { justify-self: end; }
.rq-hold { font-size: 12px; color: var(--sw-mute); }
.rq-hold--late { color: var(--sw-late); }
.rq-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }

/* Detail */
.rq-detail-title { font-size: 28px; line-height: 1.15; max-width: 60rem; }

/* Traceability */
.tr-link { display: grid; grid-template-columns: 14rem minmax(0, 1fr) 9rem; gap: 18px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--sw-line-soft); }
.tr-link-ends { font-size: 13px; }
.tr-link-ends span { color: var(--sw-chevron); margin: 0 4px; }
.tr-link-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tr-col { font-size: 10.5px; color: var(--sw-teal); }
.tr-meter { height: 8px; }
.tr-meter b { background: var(--wi-verified); }
.tr-count { font-size: 11px; font-weight: 600; text-align: right; }
.tr-row { display: grid; grid-template-columns: minmax(0, 2.5fr) 7.5rem 4.5rem 4rem 7rem 7rem; gap: 12px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--sw-line-soft); font-size: 12.5px; }
.tr-row--head { background: var(--sw-tint); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--sw-mute); }
.tr-verdict { font-weight: 600; font-size: 12px; }
.tr-verdict--good { color: var(--sw-teal); }
.tr-verdict--bad { color: var(--sw-late); }
.tr-verdict--warn { color: var(--sw-flight); }
.tr-verdict--quiet { color: var(--sw-chevron); }
.tr-lede { padding-top: 10px; }

@media (max-width: 1279px) {
  .rq-row { grid-template-columns: 5rem minmax(0, 1fr) 7rem 8rem 7.5rem; }
  .rq-row > :nth-child(5), .rq-row--head > :nth-child(5), .rq-row > :nth-child(6), .rq-row--head > :nth-child(6) { display: none; }
}
@media (max-width: 1023px) {
  .tr-link { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tr-count { text-align: left; }
  .tr-row { grid-template-columns: minmax(0, 1fr) 7rem 6rem; }
  .tr-row > :nth-child(3), .tr-row > :nth-child(4), .tr-row--head > :nth-child(3), .tr-row--head > :nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  .rq-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .rq-row--head { display: none; }
  .rq-row > .wi-prio { grid-column: 1 / -1; }
  .rq-row > .rq-main { grid-column: 1 / -1; }
  .rq-row > .rq-tasks { grid-column: 1 / -1; }
  .rq-row > :nth-child(5), .rq-row > :nth-child(6) { display: none; }
}
/*
 * Software portfolio (softwares#index) and software detail (softwares#show).
 *
 * Same palette and type as the desk dashboard, the bugs queue and the bug
 * detail page. Everything is scoped under `.sw` so none of it leaks into the
 * Tailwind pages around it; `.sw--list` and `.sw--detail` carry the few rules
 * that belong to only one of the two.
 *
 * Both pages lead with a verdict rather than a counter. The old list ordered by
 * created_at and painted every status pill green; the old detail opened with
 * six equal tiles, one of which read "None" on every project. Here the list
 * ranks by open work and groups the projects carrying none, and the detail
 * opens with a health band that says in words what the colour says in colour.
 *
 * Colour rules worth knowing before editing:
 *
 *  - Health has four states and each is named beside its colour. The band uses
 *    a white ground with a 4px coloured left edge, so the ground never has to
 *    carry text contrast for a hue that changes.
 *  - The bright tones (amber #f29111, rail #6fa9af, reject #ef5b45) clear 4.5:1
 *    on ink but not on white. On light surfaces small text uses --sw-late
 *    (#b7331d, 5.99:1) and --sw-flight (#8a5300, 6.33:1); the bright tones stay
 *    on bars, meters and dots, each beside the word it encodes.
 */

.sw {
  --sw-ink: #0b2226;
  --sw-slate: #12292d;
  --sw-mute: #4f6c6f;
  --sw-paper: #f1f5f5;
  --sw-surface: #fff;
  --sw-line: #c9dadb;
  --sw-line-soft: #dee8e8;
  --sw-tint: #eff4f4;
  --sw-track: #e7efef;
  --sw-zebra: #f6fafa;

  --sw-teal: #246871;
  --sw-rail: #6fa9af;
  --sw-amber: #f29111;
  --sw-reject: #ef5b45;
  --sw-alert: #a32f1d;

  --sw-late: #b7331d;
  --sw-flight: #8a5300;
  --sw-chevron: #6e8a8d;

  --sw-late-tint: #fbe9e4;
  --sw-warn-tint: #fdf1e4;
  --sw-hover: #eaf2f2;

  /* Horizontal padding mirrors the layout's `px-4`; the caps below mirror
     `container mx-auto`, so the content box matches every other page while the
     paper ground still runs edge to edge. */
  padding: 32px 16px 48px;
  min-height: calc(100vh - 64px);
  background: var(--sw-paper);
  color: var(--sw-slate);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.sw-page { display: flex; flex-direction: column; gap: 20px; width: 100%; margin-inline: auto; }

/* Tailwind v4 container breakpoints, less the layout's 2rem of px-4. */
@media (min-width: 40rem) { .sw-page { max-width: 38rem; } }
@media (min-width: 48rem) { .sw-page { max-width: 46rem; } }
@media (min-width: 64rem) { .sw-page { max-width: 62rem; } }
@media (min-width: 80rem) { .sw-page { max-width: 78rem; } }
@media (min-width: 96rem) { .sw-page { max-width: 94rem; } }

.sw *, .sw *::before, .sw *::after { box-sizing: border-box; }
.sw a { color: inherit; text-decoration: none; }
.sw a:focus-visible,
.sw button:focus-visible,
.sw select:focus-visible,
.sw input:focus-visible,
.sw summary:focus-visible {
  outline: 2px solid var(--sw-amber);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ------------------------------------------------------------------ atoms */

.sw-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-mute);
}

.sw-note {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}
.sw-note--bad { color: var(--sw-late); }
.sw-note--warn { color: var(--sw-flight); }

.sw-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* A caption is the panel's title rule: label, hairline, meta, optional action. */
.sw-caption {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-bottom: 4px;
}
.sw-caption-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--sw-slate);
  white-space: nowrap;
}
.sw-caption-rule { flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--sw-line); }
.sw-caption-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-mute);
  white-space: nowrap;
}

.sw-panel {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 4px;
  padding: 22px 24px 18px;
}

/* Buttons -------------------------------------------------------------- */

.sw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--sw-line);
  border-radius: 4px;
  background: var(--sw-surface);
  color: var(--sw-slate);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.sw-btn:hover { background: var(--sw-hover); }
.sw-btn--go {
  background: var(--sw-amber);
  border-color: var(--sw-amber);
  color: var(--sw-ink);
  font-weight: 600;
}
.sw-btn--go:hover { background: #dd8410; border-color: #dd8410; }
.sw-btn--quiet { color: var(--sw-teal); font-size: 12.5px; }
.sw-btn--small { height: 26px; padding: 0 9px; gap: 6px; font-size: 11.5px; border-radius: 3px; }

.sw-btn svg { width: 13px; height: 13px; flex: none; }

/* Pills ----------------------------------------------------------------- */

.sw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--sw-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sw-slate);
  white-space: nowrap;
}
.sw-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sw-rail);
  flex: none;
}
.sw-pill--bad { background: var(--sw-late-tint); }
.sw-pill--bad::before { background: var(--sw-reject); }
.sw-pill--warn { background: var(--sw-warn-tint); }
.sw-pill--warn::before { background: var(--sw-amber); }
.sw-pill--quiet::before { background: var(--sw-chevron); }

/* Health is carried by the dot; the word beside it always says the same thing. */
.sw-h--needs_attention { --sw-health: var(--sw-late); --sw-health-dot: var(--sw-reject); --sw-health-tint: var(--sw-late-tint); }
.sw-h--at_risk         { --sw-health: var(--sw-flight); --sw-health-dot: var(--sw-amber); --sw-health-tint: var(--sw-warn-tint); }
.sw-h--running         { --sw-health: var(--sw-teal); --sw-health-dot: var(--sw-rail); --sw-health-tint: var(--sw-tint); }
.sw-h--dormant         { --sw-health: var(--sw-chevron); --sw-health-dot: var(--sw-chevron); --sw-health-tint: var(--sw-tint); }

.sw-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--sw-health-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sw-health);
  white-space: nowrap;
}
.sw-health-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sw-health-dot);
  flex: none;
}

/* Crumb ----------------------------------------------------------------- */

.sw-crumb { display: flex; align-items: center; gap: 12px; }
.sw-crumb-trail {
  flex: 1 1 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ================================================================== LIST */

.sw-header { display: flex; align-items: flex-start; gap: 32px; }
.sw-header-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sw-title {
  margin: 0;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.08;
  color: var(--sw-slate);
}
.sw-actions { display: flex; align-items: center; gap: 9px; flex: none; }

/* The distribution bar: open work per project, widest first. It is the only
   place on the page that compares projects to each other rather than to zero. */
.sw-dist { display: flex; flex-direction: column; gap: 7px; padding-top: 6px; max-width: 660px; }
.sw-dist-bar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--sw-track); }
.sw-dist-seg { display: block; height: 100%; min-width: 2px; }
.sw-dist-legend { display: flex; flex-wrap: wrap; gap: 16px; }
.sw-dist-key { display: flex; align-items: center; gap: 6px; }
.sw-dist-key i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sw-dist-key span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}

/* Toolbar --------------------------------------------------------------- */

.sw-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sw-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.sw-seg { display: flex; border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.sw-seg a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 15px;
  background: var(--sw-surface);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.sw-seg a + a { border-left: 1px solid var(--sw-line); }
.sw-seg a:hover { background: var(--sw-hover); }
.sw-seg a[aria-current] { background: var(--sw-slate); color: #fff; }

/* A control is a labelled select that reads as one chip. The select sits on top
   of its own label so the caret and the value stay on the same line. */
.sw-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--sw-rail);
  border-radius: 4px;
  background: var(--sw-tint);
}
.sw-control > span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.sw-control select,
.sw-facet select {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--sw-slate);
  cursor: pointer;
  max-width: 190px;
}

.sw-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  width: 220px;
  padding: 0 12px;
  border: 1px solid var(--sw-line);
  border-radius: 4px;
  background: var(--sw-surface);
}
.sw-search svg { width: 13px; height: 13px; color: var(--sw-chevron); flex: none; }
.sw-search input { flex: 1 1 0; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--sw-slate); }
.sw-search input::placeholder { color: #5f797c; }

.sw-facets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-facet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--sw-line-soft);
  border-radius: 3px;
  background: var(--sw-surface);
}
.sw-facet > span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}
.sw-facet--on { border-color: var(--sw-rail); background: var(--sw-tint); }
.sw-facet-clear { margin-left: 2px; color: var(--sw-teal); font-size: 12.5px; }

/* Table ----------------------------------------------------------------- */

.sw-table { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }

.sw-row { display: flex; align-items: center; min-height: 56px; }

.sw-head {
  display: flex;
  align-items: center;
  min-height: 34px;
  background: var(--sw-tint);
  border-bottom: 1px solid var(--sw-line);
}
.sw-head > * {
  padding: 0 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-mute);
  white-space: nowrap;
}
.sw-head a { display: inline-flex; align-items: center; gap: 5px; }
.sw-head a[aria-sort] { color: var(--sw-slate); }

.sw-c--name { flex: 1 1 0; min-width: 0; padding: 0 14px; }
.sw-c--ver { width: 84px; padding: 0 14px; }
.sw-c--life { width: 126px; padding: 0 14px; }
.sw-c--work { width: 206px; padding: 0 14px; }
.sw-c--bugs { width: 74px; padding: 0 14px; }
.sw-c--iter { width: 126px; padding: 0 14px; }
.sw-c--chev { width: 30px; display: flex; justify-content: center; color: var(--sw-chevron); }
.sw-c--chev svg { width: 14px; height: 14px; }

.sw-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  background: var(--sw-zebra);
  border-block: 1px solid var(--sw-line-soft);
}
.sw-group--bad { background: var(--sw-late-tint); }
.sw-group-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sw-slate);
}
.sw-group-meta { margin-left: auto; }

.sw-item { position: relative; border-bottom: 1px solid var(--sw-line-soft); }
.sw-item:hover { background: var(--sw-zebra); }
/* The whole row is the target; the chevron is the affordance that says so. */
.sw-item .sw-link::after { content: ""; position: absolute; inset: 0; }
.sw-item:hover .sw-c--chev { color: var(--sw-teal); }

.sw-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sw-name b { font-size: 13.5px; font-weight: 600; color: var(--sw-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-life-inline { display: none; }

.sw-ver { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11.5px; color: var(--sw-mute); }

.sw-work { display: flex; align-items: center; gap: 10px; }
.sw-work-track { flex: 1 1 0; height: 6px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.sw-work-fill { display: block; height: 100%; border-radius: 2px; background: var(--sw-health-dot, var(--sw-rail)); }
.sw-work-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; color: var(--sw-slate); min-width: 22px; text-align: right; }
.sw-work-n--zero { color: var(--sw-chevron); }

.sw-iter { display: flex; flex-direction: column; gap: 3px; }
.sw-iter b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12.5px; font-weight: 400; color: var(--sw-slate); }
.sw-iter b.sw-iter--none { color: var(--sw-chevron); }

.sw-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 14px;
  background: var(--sw-tint);
  border-top: 1px solid var(--sw-line);
}
.sw-foot > :last-child { margin-left: auto; }

/* The dormant-projects prompt. Says the finding, then offers the one action. */
.sw-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--sw-line);
  border-left: 4px solid var(--sw-flight);
  border-radius: 4px;
  background: var(--sw-warn-tint);
}
.sw-alert p { flex: 1 1 0; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--sw-slate); }
.sw-alert svg { width: 16px; height: 16px; flex: none; color: var(--sw-flight); }

.sw-empty { padding: 40px 24px; text-align: center; color: var(--sw-mute); font-size: 13px; }

/* ================================================================ DETAIL */

.sw-dhead { display: flex; align-items: flex-start; gap: 32px; }
.sw-dhead-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.sw-dhead-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-dhead-meta {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-mute);
}

/* The New menu. A <details> so it needs no controller; the summary is the
   button and the panel is positioned under it. */
.sw-menu { position: relative; }
.sw-menu > summary { list-style: none; }
.sw-menu > summary::-webkit-details-marker { display: none; }
.sw-menu > summary::marker { content: ""; }
.sw-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  width: 300px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgb(11 34 38 / 14%);
  overflow: hidden;
}
.sw-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--sw-line-soft);
}
.sw-menu-head > :last-child { margin-left: auto; }
.sw-menu-items { display: flex; flex-direction: column; padding: 6px 0 8px; }
.sw-menu-items a { display: flex; align-items: center; gap: 11px; min-height: 32px; padding: 0 14px; font-size: 13px; }
.sw-menu-items a:hover { background: var(--sw-hover); }
.sw-menu-items a > span:first-child { flex: 1 1 0; }
.sw-menu-foot {
  padding: 11px 14px;
  border-top: 1px solid var(--sw-line-soft);
  background: var(--sw-warn-tint);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--sw-slate);
}

/* Health band ----------------------------------------------------------- */

/* White ground, health in the left edge. The eyebrow names the state in words,
   so the colour is a second reading of something already said. */
.sw-health {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 22px 26px 20px 23px;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-left: 4px solid var(--sw-health);
  border-radius: 4px;
}
.sw-health-left { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sw-health-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.sw-health-eyebrow b { color: var(--sw-health); font-weight: 400; }
.sw-health-head { margin: 0; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--sw-slate); max-width: 72ch; }
.sw-health-figs { display: flex; flex-wrap: wrap; gap: 26px; padding-top: 6px; }
.sw-fig { display: flex; flex-direction: column; gap: 5px; }
.sw-fig b {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--sw-slate);
}
.sw-fig--bad b { color: var(--sw-late); }
.sw-fig--warn b { color: var(--sw-flight); }
.sw-fig span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}
.sw-health-right { display: flex; flex-direction: column; gap: 10px; flex: none; }
.sw-health-right .sw-btn { justify-content: center; }

/* Columns --------------------------------------------------------------- */

.sw-cols { display: flex; align-items: flex-start; gap: 20px; }
.sw-col-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sw-col-side { width: 420px; flex: none; display: flex; flex-direction: column; gap: 16px; }
.sw-panel--side { padding: 22px 22px 16px; }

/* Bug flow -------------------------------------------------------------- */

.sw-chart { display: flex; align-items: flex-end; gap: 10px; }
.sw-chart-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sw-chart-pair { display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 92px; }
.sw-chart-bar { display: block; flex: 1 1 0; max-width: 34px; border-radius: 2px 2px 0 0; min-height: 2px; }
.sw-chart-bar--opened { background: var(--sw-amber); }
.sw-chart-bar--closed { background: var(--sw-rail); }
.sw-chart-col > span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sw-chevron);
  text-align: center;
}
.sw-chart-col--now > span { color: var(--sw-amber); }
.sw-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sw-legend-key { display: flex; align-items: center; gap: 6px; }
.sw-legend-key i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.sw-legend-key span {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.sw-legend > :last-child { margin-left: auto; }

/* Rows inside panels ---------------------------------------------------- */

.sw-prow { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--sw-line-soft); }
.sw-prow--stack { flex-direction: column; align-items: stretch; gap: 9px; padding: 15px 0; }
.sw-prow:first-of-type { border-top: 0; }

.sw-sprint-top { display: flex; align-items: baseline; gap: 12px; }
.sw-sprint-top b { font-size: 13.5px; font-weight: 600; color: var(--sw-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-sprint-top .sw-note { white-space: nowrap; }
.sw-sprint-top > :last-child { margin-left: auto; white-space: nowrap; }
.sw-sprint-bar { display: flex; align-items: center; gap: 12px; }
.sw-sprint-track { flex: 1 1 0; height: 6px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.sw-sprint-fill { display: block; height: 100%; border-radius: 2px; background: var(--sw-rail); }
.sw-sprint-fill--late { background: var(--sw-reject); }
.sw-sprint-pct { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; color: var(--sw-slate); }

.sw-split { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--sw-line-soft); }
.sw-split-label { width: 78px; font-size: 13.5px; font-weight: 500; color: var(--sw-slate); }
.sw-split-label--zero { color: var(--sw-chevron); font-weight: 400; }
.sw-split-track { flex: 1 1 0; height: 6px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.sw-split-fill { display: block; height: 100%; border-radius: 2px; background: var(--sw-rail); }
.sw-split-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; color: var(--sw-slate); min-width: 26px; text-align: right; }
.sw-split-n--zero { color: var(--sw-chevron); }
.sw-split-note { width: 240px; text-align: right; }

.sw-bug { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--sw-line-soft); position: relative; }
.sw-bug:hover { background: var(--sw-zebra); }
.sw-bug-accent { width: 3px; align-self: stretch; border-radius: 1.5px; background: var(--sw-rail); flex: none; }
.sw-sev--1 { background: var(--sw-rail); }
.sw-sev--2 { background: var(--sw-amber); }
.sw-sev--3 { background: var(--sw-reject); }
.sw-sev--4 { background: var(--sw-alert); }
.sw-bug-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sw-bug-text b { font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--sw-slate); }
.sw-bug-age { flex: none; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--sw-chevron); padding-top: 2px; }
.sw-bug a::after { content: ""; position: absolute; inset: 0; }

.sw-person { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid var(--sw-line-soft); }
.sw-chip {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--sw-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--sw-teal);
  flex: none;
}
.sw-person-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sw-person-text b { font-size: 13px; font-weight: 500; color: var(--sw-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-person-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--sw-slate); }
.sw-person-load { width: 62px; text-align: right; }
.sw-person-load--busy { color: var(--sw-rail); }

.sw-panel-foot { padding-top: 13px; border-top: 1px solid var(--sw-line-soft); display: flex; align-items: center; gap: 10px; }
.sw-panel-foot > :last-child { margin-left: auto; }
.sw-panel-foot--pair { gap: 18px; }
.sw-panel-foot--pair > :last-child { margin-left: 0; }

/* Bug quality ----------------------------------------------------------- */

.sw-block { display: flex; flex-direction: column; gap: 9px; padding: 14px 0; border-top: 1px solid var(--sw-line-soft); }
.sw-block > .sw-block-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}
.sw-share { display: flex; align-items: center; gap: 11px; }
.sw-share-label { width: 74px; font-size: 13px; color: var(--sw-slate); }
.sw-share-label--none { color: var(--sw-late); }
.sw-share-track { flex: 1 1 0; height: 6px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.sw-share-fill { display: block; height: 100%; border-radius: 2px; background: var(--sw-rail); }
.sw-share-n { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--sw-slate); min-width: 20px; text-align: right; }
.sw-share-n--none { color: var(--sw-late); }

.sw-fact { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--sw-line-soft); }
.sw-fact > :first-child { width: 96px; flex: none; }
.sw-fact-v { flex: 1 1 0; min-width: 0; font-size: 12.5px; font-weight: 500; color: var(--sw-slate); overflow-wrap: anywhere; }
.sw-fact-v--mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.sw-fact-v--none { color: var(--sw-chevron); font-weight: 400; }
.sw-desc { margin: 0 0 4px; font-size: 12.5px; line-height: 1.6; color: var(--sw-mute); }

.sw-quiet { font-size: 12.5px; color: var(--sw-mute); }

/* ============================================================ responsive */

@media (max-width: 1279px) {
  .sw-col-side { width: 340px; }
  .sw-c--ver { display: none; }
  .sw-split-note { width: 160px; }
}

@media (max-width: 1023px) {
  /* Stacked, the columns must stretch: the flex-start alignment that keeps them
     top-aligned side by side would otherwise size them to their content and
     push the page wider than the viewport. */
  .sw-cols { flex-direction: column; align-items: stretch; }
  .sw-col-side { width: 100%; }
  .sw-c--bugs { display: none; }
  .sw-health { flex-direction: column; gap: 18px; }
  .sw-health-right { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 860px) {
  .sw { padding: 24px 16px 32px; }
  .sw-caption-meta { white-space: normal; }
  .sw-title { font-size: 28px; }
  .sw-header, .sw-dhead { flex-direction: column; gap: 16px; }
  .sw-actions { width: 100%; flex-wrap: wrap; }
  .sw-c--iter { display: none; }
  .sw-toolbar-right { margin-left: 0; width: 100%; }
  .sw-search { width: 100%; }
  .sw-split-note { display: none; }
  .sw-person-load { display: none; }
}

@media (max-width: 640px) {
  /* The lifecycle pill moves into the name's note line, which frees the widest
     column on the narrowest screen. */
  .sw-c--life, .sw-group-meta, .sw-foot > :last-child { display: none; }
  .sw-life-inline { display: inline; }
  .sw-c--work { width: 120px; }
  .sw-work-track { display: none; }
  .sw-menu-panel { width: min(300px, calc(100vw - 48px)); }
  .sw-alert { flex-direction: column; align-items: flex-start; }
  .sw-health-figs { gap: 18px; }
}

/* button_to renders a form; inside a menu it has to read as a plain row. */
.sw-menu-items form { margin: 0; }
.sw-menu-item-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--sw-slate);
  text-align: left;
  cursor: pointer;
}
.sw-menu-item-button:hover { background: var(--sw-hover); }
.sw-panel-foot form { margin: 0; }
.sw-panel-foot .sw-btn--quiet { border: 0; padding: 0; height: auto; background: transparent; }
.sw-panel-foot .sw-btn--quiet:hover { background: transparent; text-decoration: underline; }
/*
 * Software Gantt (softwares#gantt).
 *
 * Builds on software.css: the `.sw` tokens, buttons, segmented controls, pills
 * and the health band all come from there. Only the chart is defined here.
 *
 * Colour carries lifecycle, never group membership:
 *   pending      white bar, rail outline
 *   in progress  warn tint, amber outline, amber progress fill
 *   completed    solid #3e838a
 *   verified     solid #55959b
 *   past due     the outline turns --sw-late and a thin line runs to today
 *
 * Positions are percentages of the window (TimelineWindow), so the chart lays
 * out at any width. Below 860px each row stacks its label above its bar.
 */

/* The chart grammar (.sg-*) is shared with the iterations timeline. */
.sw--gantt, .sw--timeline {
  --sg-side: 22rem;
  --sg-row: 36px;
  --sg-completed: #3e838a;
  --sg-verified: #55959b;
}

/* ---------------------------------------------------------------- toolbar */

.sg-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
}
.sg-toolbar-left, .sg-toolbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.sg-control { display: flex; align-items: center; gap: 10px; }
.sg-step { display: flex; align-items: center; gap: 4px; }
.sg-icon-btn { width: 32px; padding: 0; justify-content: center; }
.sg-range {
  margin-left: 10px;
  font-family: Archivo, "IBM Plex Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--sw-slate);
}

.sg-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sw-slate); }
.sg-box {
  width: 15px;
  height: 15px;
  border: 1.2px solid var(--sw-chevron);
  border-radius: 3px;
  background: var(--sw-surface);
}
.sg-toggle[aria-checked="true"] .sg-box {
  background: var(--sw-slate) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat;
  border-color: var(--sw-slate);
}

/* ------------------------------------------------------------------ chart */

.sg-chart {
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 4px;
  overflow: hidden;
}

.sg-row {
  display: grid;
  grid-template-columns: var(--sg-side) minmax(0, 1fr);
  min-height: var(--sg-row);
  border-bottom: 1px solid var(--sw-line-soft);
}
.sg-side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 16px 0 40px;
  border-right: 1px solid var(--sw-line);
}
.sg-track { position: relative; min-width: 0; }

/* Axis */
.sg-axis { min-height: 56px; border-bottom: 1px solid var(--sw-line); }
.sg-side--head { padding: 0 16px 10px 20px; align-items: end; justify-content: space-between; }
.sg-scale { display: flex; }
.sg-week { display: flex; flex-direction: column; border-right: 1px solid var(--sw-line); min-width: 0; }
.sg-week:last-child { border-right: 0; }
.sg-week-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}
.sg-week-label b { color: var(--sw-slate); font-weight: 600; }
.sg-days { display: flex; height: 22px; }
.sg-day {
  flex: 1;
  display: grid;
  place-items: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--sw-mute);
}
.sg-day--weekend { background: var(--sw-paper); color: var(--sw-chevron); }
.sg-day--today { background: var(--sw-amber); color: var(--sw-ink); font-weight: 700; }

/* The ground: weekends, week lines and today, drawn once behind every row. */
.sg-body { position: relative; }
.sg-ground { position: absolute; inset: 0 0 0 var(--sg-side); pointer-events: none; }
.sg-weekend { position: absolute; top: 0; bottom: 0; background: var(--sw-paper); }
.sg-weekline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--sw-line-soft); }
.sg-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--sw-amber); z-index: 1; }
.sg-body > .sg-group, .sg-body > p { position: relative; }

/* Group rows: a sprint, a requirement or a person. */
.sg-group > summary { list-style: none; cursor: pointer; }
.sg-group > summary::-webkit-details-marker { display: none; }
.sg-group-row { min-height: 42px; background: rgb(239 244 244 / 0.82); border-bottom-color: var(--sw-line); }
.sg-group-row .sg-side { padding-left: 14px; }
.sg-group-row:hover { background: var(--sw-hover); }
.sg-group-row svg { color: var(--sw-teal); transition: transform 0.15s; flex: none; }
.sg-group[open] > .sg-group-row svg { transform: rotate(90deg); }
.sg-group-name { flex: 1; min-width: 0; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sg-span {
  position: absolute;
  top: 15px;
  height: 12px;
  border: 1.2px solid var(--sw-teal);
  border-radius: 2px;
  background: var(--sw-surface);
  overflow: hidden;
}
.sg-group--ended .sg-span { border-color: var(--sw-late); }
.sg-group--running .sg-span { border-color: var(--sw-amber); }
.sg-span-done { display: block; height: 100%; background: var(--sg-verified); }

.sg-tally {
  position: absolute;
  top: 14px;
  white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sw-flight);
  background: rgb(239 244 244 / 0.94);
  padding: 1px 4px;
  z-index: 2;
}
.sg-tally--bad { color: var(--sw-late); }

/* Task rows */
.sg-task:hover { background: rgb(234 242 242 / 0.6); }
.sg-id { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9.5px; color: var(--sw-chevron); flex: none; }
.sg-title { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-title:hover { text-decoration: underline; }
.sg-task--done .sg-title { color: var(--sw-mute); }
.sg-crit {
  flex: none;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--sw-late-tint);
  color: var(--sw-late);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.sg-lead {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sw-teal);
  color: #fff;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 8.5px;
  font-weight: 600;
}

/* The slot carries the geometry; the bar inside keeps 2px clear of each edge
   so the bars of neighbouring days never touch. */
.sg-slot { position: absolute; top: 10px; height: 15px; padding: 0 2px; }
.sg-bar {
  display: block;
  width: 100%;
  min-width: 4px;
  height: 100%;
  padding: 0;
  border: 1px solid var(--sw-rail);
  border-radius: 2px;
  background: var(--sw-surface);
  overflow: hidden;
  cursor: pointer;
}
.sg-bar:hover { filter: brightness(0.96); }
.sg-bar--in-progress { background: var(--sw-warn-tint); border-color: var(--sw-amber); }
.sg-bar--completed { background: var(--sg-completed); border-color: var(--sg-completed); }
.sg-bar--verified { background: var(--sg-verified); border-color: var(--sg-verified); }
.sg-bar--late { border-color: var(--sw-late); border-width: 1.4px; }
.sg-bar--cut-left { border-left-style: dashed; }
.sg-bar--cut-right { border-right-style: dashed; }
.sg-progress { display: block; height: 100%; background: var(--sw-rail); }
.sg-bar--in-progress .sg-progress { background: var(--sw-amber); }

.sg-unclosed {
  position: absolute;
  top: 10px;
  width: 15px;
  height: 15px;
  margin-left: -7px;
  display: grid;
  place-items: center;
  border: 1.4px solid var(--sw-flight);
  border-radius: 50%;
  background: var(--sw-surface);
  color: var(--sw-flight);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  z-index: 2;
}

.sg-tail { position: absolute; top: 17px; height: 2px; background: rgb(183 51 29 / 0.55); }
.sg-late-by {
  position: absolute;
  top: 10px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--sw-late);
  background: var(--sw-surface);
  padding: 0 2px;
  z-index: 2;
}

/* A task whose days all fall before the window: say when it was due. */
.sg-before {
  position: absolute;
  top: 10px;
  left: 4px;
  padding: 0 4px;
  background: var(--sw-surface);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--sw-late);
  z-index: 2;
}

/* A task started after its due date: the due date, then the slip to the start. */
.sg-slip { position: absolute; top: 17px; height: 2px; background: var(--sw-flight); opacity: 0.7; }
.sg-due-mark {
  position: absolute;
  top: 12px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  padding: 0;
  border: 0;
  background: var(--sw-slate);
  transform: rotate(45deg);
  cursor: pointer;
}
.sg-start-mark {
  position: absolute;
  top: 12px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--sg-completed);
}

.sg-empty-row { color: var(--sw-mute); }
.sg-none { padding: 22px 20px; color: var(--sw-mute); }
.sg-none a { color: var(--sw-teal); text-decoration: underline; }

/* Load strip (person view, week window) */
.sg-load { min-height: 58px; background: var(--sw-surface); }
.sg-load .sg-side { padding-left: 40px; }
.sg-load-day { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 0 8px; }
.sg-load-day b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; color: var(--sw-slate); }
.sg-load-day i { display: block; height: 7px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.sg-load-day i span { display: block; height: 100%; background: var(--sw-teal); }
.sg-load-day small { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--sw-chevron); }
.sg-load-day--past { opacity: 0.5; }
.sg-load-day--over b, .sg-load-day--over small { color: var(--sw-late); }
.sg-load-day--over i { background: var(--sw-late-tint); }
.sg-load-day--over i span { background: var(--sw-late); }

/* Foot */
.sg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 12px 16px;
  background: var(--sw-tint);
  border-top: 1px solid var(--sw-line);
}
.sg-foot a { color: var(--sw-teal); text-decoration: underline; }
.sg-key { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.sg-key--pending { background: var(--sw-surface); border: 1.2px solid var(--sw-rail); }
.sg-key--in-progress { background: var(--sw-amber); }
.sg-key--completed { background: var(--sg-completed); }
.sg-key--verified { background: var(--sg-verified); }
.sg-key--late { background: var(--sw-surface); border: 1.4px solid var(--sw-late); }
.sg-key--tail { height: 2px; background: rgb(183 51 29 / 0.55); }
.sg-key--today { width: 2px; height: 12px; background: var(--sw-amber); }
.sg-key--unclosed {
  width: 12px;
  height: 12px;
  border: 1.4px solid var(--sw-flight);
  border-radius: 50%;
  color: var(--sw-flight);
  font-size: 8px;
  font-style: normal;
  line-height: 10px;
  text-align: center;
}
.sg-caption { margin-top: -8px; }

/* The task card: a native popover, so it needs no script and closes on Escape. */
/* Preflight zeroes every margin, which undoes the UA's centring of popovers. */
.sg-card {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(360px, calc(100vw - 32px));
  padding: 14px 16px 16px;
  border: 1px solid var(--sw-line);
  border-radius: 4px;
  background: var(--sw-surface);
  color: var(--sw-slate);
  box-shadow: 0 8px 24px rgb(11 34 38 / 0.18);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
}
.sg-card::backdrop { background: rgb(11 34 38 / 0.12); }
.sg-card-title { margin: 6px 0 12px; font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sg-facts { display: grid; grid-template-columns: 64px 1fr; gap: 7px 10px; margin: 0 0 14px; }
.sg-facts dt { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sw-chevron); padding-top: 2px; }
.sg-facts dd { margin: 0; }
.sg-warn { color: var(--sw-flight); }
.sg-bad { color: var(--sw-late); }
.sg-card-actions { display: flex; gap: 8px; }

/* Empty and undated */
.sg-empty-head { font-family: Archivo, "IBM Plex Sans", sans-serif; font-size: 17px; font-weight: 600; margin: 0 0 8px; }
.sg-empty p { max-width: 44rem; color: var(--sw-mute); line-height: 1.5; }
.sg-empty-actions { display: flex; gap: 10px; margin-top: 14px; }
.sg-undated ul { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; }
.sg-undated a { color: var(--sw-teal); }
.sg-undated a:hover { text-decoration: underline; }

/* ----------------------------------------------------------- narrow screens */

@media (max-width: 1023px) {
  .sw--gantt, .sw--timeline { --sg-side: 16rem; }
}

/* On a phone each control stacks its label above its segments, and a long
   segmented control scrolls inside its own box rather than the page. */
@media (max-width: 640px) {
  .sg-toolbar-left { width: 100%; }
  .sg-control { flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
  .sg-control .sw-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sg-control .sw-seg a { flex: none; white-space: nowrap; }
}

@media (max-width: 860px) {
  .sw--gantt, .sw--timeline { --sg-side: 0px; }
  .sg-row { grid-template-columns: minmax(0, 1fr); }
  .sg-side { border-right: 0; padding: 8px 12px 0; }
  .sg-task .sg-track { height: 30px; }
  .sg-group-row .sg-track { height: 44px; }
  .sg-group-row .sg-span { top: 6px; }
  .sg-axis .sg-side--head { display: none; }
  .sg-scale--dense .sg-days { display: none; }
  .sg-scale--dense .sg-week-label { padding: 0 4px; font-size: 8px; }
  .sg-ground { inset: 0; }
  /* Under the bar, right-aligned: the inline placement assumes a wide track. */
  .sg-tally { top: auto; bottom: 4px; left: auto !important; right: 8px !important; }
  .sg-load .sg-side { padding-left: 12px; }
  .sg-load .sg-track { height: 56px; }
  .sg-load-day small { display: none; }
}
/*
 * Tasks: list, detail, form, calendar and gantt.
 *
 * Tokens, buttons, the verdict band and captions come from software.css;
 * panels and side rows from my_workspace.css; tabs and selects from
 * iteration_timeline.css; state dots, fields and forms from work_items.css.
 * Only the task pieces live here, under tk-.
 */

.tk-views { background: var(--sw-surface); }
.tk-tabs { flex-wrap: wrap; row-gap: 8px; }

/* List */
.tk-table { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.tk-row {
  display: grid;
  grid-template-columns: 5.5rem minmax(16rem, 3fr) minmax(8rem, 1fr) 4.5rem 6.5rem minmax(8rem, 1fr) 11rem;
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 12.5px;
}
.tk-row--head {
  padding-block: 9px;
  border-top: 0;
  background: var(--sw-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.tk-row--flagged { box-shadow: inset 3px 0 0 var(--sw-amber); }
.tk-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 10px 18px;
  background: var(--sw-paper);
  border-top: 1px solid var(--sw-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.tk-section-head b { font-weight: 600; color: var(--sw-slate); }
.tk-section-head span { color: var(--sw-chevron); }
.tk-ref { display: flex; flex-direction: column; gap: 3px; }
.tk-kind { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sw-mute); }
.tk-kind--bug { color: var(--sw-late); }
.tk-kind--feat { color: var(--sw-teal); }
.tk-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-title { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.tk-title:hover { text-decoration: underline; }
.tk-who, .tk-due, .tk-progress { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tk-bar { display: block; height: 5px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.tk-bar b { display: block; height: 100%; background: var(--sw-amber); }
.tk-move { justify-self: end; }
.tk-hold { font-size: 12px; color: var(--sw-mute); }
.tk-assign { display: flex; gap: 6px; align-items: center; }
.tk-assign select { max-width: 8rem; }
.tk-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }

/* Detail */
.tk-detail-title { font-size: 28px; line-height: 1.15; max-width: 60rem; }
.tk-backed { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-left: 3px solid var(--sw-teal); }
.tk-backed p { margin: 0; font-size: 13px; }
.wi-rail.tk-rail { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr); }
.tk-warn { margin: -8px 0 0; }
.tk-handoff { border-color: var(--sw-teal); scroll-margin-top: 80px; }
.tk-review-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tk-time { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(0, 1.6fr); gap: 24px; padding: 16px 20px; }
.tk-clock p { margin: 0; }
.tk-clock-value { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 30px; font-weight: 500; letter-spacing: -0.5px; color: var(--sw-slate); margin: 4px 0 10px !important; }
.tk-clock-moves { display: flex; gap: 8px; }
.tk-used { display: flex; flex-direction: column; gap: 8px; }
.tk-used p { margin: 0; font-size: 13px; display: flex; justify-content: space-between; gap: 10px; }
.tk-used-bar { display: flex; height: 10px; border-radius: 2px; overflow: hidden; background: var(--sw-track); }
.tk-used-bar b { display: block; height: 100%; }
.tk-used-est { position: relative; background: var(--sw-track); }
.tk-used-est i { display: block; height: 100%; background: var(--wi-verified); }
.tk-used-over { background: var(--sw-late); }
.tk-correct { padding: 0 20px 14px; }
.tk-correct summary { cursor: pointer; font-size: 13px; }
.tk-correct-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.tk-correct-form label { display: flex; flex-direction: column; gap: 4px; }
.tk-correct-form input[type="number"] { width: 6rem; }
.tk-progress-form { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--sw-line-soft); }
.tk-progress-form label { font-size: 13px; }
.tk-slider { display: flex; align-items: center; gap: 14px; }
.tk-slider input { flex: 1; accent-color: var(--sw-teal); }
.tk-slider output { font-family: "Archivo", sans-serif; font-size: 20px; font-weight: 600; min-width: 3.5rem; text-align: right; }
.tk-progress-save { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

@media (max-width: 1279px) {
  .wi-rail.tk-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-row { grid-template-columns: 5rem minmax(0, 1fr) 7.5rem 6rem 10rem; }
  .tk-row > :nth-child(4), .tk-row > :nth-child(6) { display: none; }
}
@media (max-width: 640px) {
  .wi-rail.tk-rail { grid-template-columns: minmax(0, 1fr); }
  .tk-time { grid-template-columns: minmax(0, 1fr); }
  .tk-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .tk-row--head { display: none; }
  .tk-row > .tk-ref { grid-column: 1 / -1; flex-direction: row; gap: 8px; }
  .tk-row > .tk-main { grid-column: 1 / -1; }
  .tk-row > .tk-who { display: none; }
  .tk-assign select { max-width: 7rem; }
}

.sw--tasks .wi-filters select { max-width: 15rem; }

/* Form */
.tk-lede { margin: 0; max-width: 46rem; color: var(--sw-mute); font-size: 14px; line-height: 1.5; }
.tk-when { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tk-when input[type="date"] { flex: 1 1 10rem; }
.tk-when input[type="time"] { flex: 0 0 7.5rem; }
.tk-when input[type="number"] { width: 6rem; }
.tk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 6px 14px; max-height: 14rem; overflow-y: auto; padding: 4px 0; }
.wi-form .tk-person { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; text-align: left; }
.wi-form .tk-person input { flex: none; margin: 0; }

/* Calendar */
.tk-cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tk-cal-title { margin: 0 0 0 6px; font-family: "Archivo", sans-serif; font-size: 17px; font-weight: 600; }
.tk-cal-finished { margin-left: auto; font-size: 12.5px; }
.tk-week { display: flex; flex-direction: column; gap: 6px; background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; padding: 12px 14px 14px; }
.tk-week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tk-day-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 3px; color: var(--sw-slate); }
.tk-day-head b { font-family: "Archivo", sans-serif; font-size: 20px; }
.tk-day-head small { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; }
.tk-day-head:hover { background: var(--sw-tint); }
.tk-day-head--today { background: var(--sw-warn-tint); box-shadow: inset 0 2px 0 var(--sw-amber); }
.tk-day-head--weekend { opacity: 0.8; }
.tk-bands { padding: 4px 0; border-top: 1px solid var(--sw-line-soft); }
.tk-band { display: flex; gap: 8px; align-items: center; min-width: 0; padding: 5px 10px; border-radius: 3px; background: var(--sw-warn-tint); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.tk-band b { color: var(--sw-flight); }
.tk-band span { color: var(--sw-slate); overflow: hidden; text-overflow: ellipsis; }
.tk-bars { grid-auto-flow: row dense; padding-top: 6px; border-top: 1px solid var(--sw-line-soft); }
.tk-bars-empty { grid-column: 1 / -1; margin: 6px 0; }
.tk-cal-bar { display: flex; align-items: center; gap: 6px; min-width: 0; height: 26px; padding: 0 6px 0 9px; border-radius: 3px; border-left: 3px solid var(--sw-rail); background: var(--sw-tint); color: var(--sw-slate); font-size: 11.5px; }
.tk-cal-bar:hover { background: var(--sw-hover); }
.tk-cal-bar.wi-state--in-progress { border-left-color: var(--sw-amber); background: var(--sw-warn-tint); }
.tk-cal-bar.wi-state--completed, .tk-cal-bar.wi-state--verified, .tk-cal-bar.wi-state--cancelled { opacity: 0.6; }
.tk-cal-bar--late { background: linear-gradient(90deg, var(--sw-tint) 0 var(--tail, 100%), var(--sw-late-tint) var(--tail, 100%)); }
.tk-cal-bar--from-before { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tk-cal-bar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-crit { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8px; color: var(--sw-late); letter-spacing: 0.8px; }
.tk-late-by { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; color: var(--sw-late); white-space: nowrap; }
.tk-initials { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sw-teal); color: #fff; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 7.5px; }
.tk-timed { border-top: 1px solid var(--sw-line-soft); padding-top: 6px; }
.tk-timed-empty { margin: 4px 0; }
.tk-hour-col { display: flex; flex-direction: column; gap: 4px; }
.tk-timed-item { display: flex; gap: 6px; padding: 4px 6px; border-radius: 3px; background: var(--sw-tint); font-size: 11px; color: var(--sw-slate); overflow: hidden; }
.tk-timed-item b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; color: var(--sw-teal); white-space: nowrap; }
.tk-week-count { margin: 4px 0 0; }
.tk-unscheduled { scroll-margin-top: 80px; }
.tk-unsched-by { padding: 0 20px; margin: 0; }
.tk-unsched-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 12px 20px; }
.tk-unsched-card { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--sw-line); border-radius: 3px; color: var(--sw-slate); font-size: 12.5px; }
.tk-unsched-card:hover { border-color: var(--sw-teal); }
.tk-unsched-foot { padding: 0 20px 14px; margin: 0; }
.tk-month { display: flex; flex-direction: column; gap: 4px; background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; padding: 12px 14px; }
.tk-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tk-month-head span { padding: 0 6px; }
.tk-month-bands { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; }
.tk-band-chip { padding: 2px 8px; border-radius: 3px; background: var(--sw-warn-tint); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--sw-flight); }
.tk-month-cell { display: flex; flex-direction: column; gap: 3px; min-height: 5.5rem; min-width: 0; padding: 6px; border: 1px solid var(--sw-line-soft); border-radius: 3px; }
.tk-month-cell--out { opacity: 0.45; }
.tk-month-cell--today { border-color: var(--sw-amber); box-shadow: inset 0 2px 0 var(--sw-amber); }
.tk-month-day { font-family: "Archivo", sans-serif; font-weight: 600; color: var(--sw-slate); }
.tk-month-item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 5px; border-radius: 2px; background: var(--sw-tint); font-size: 11px; color: var(--sw-slate); }
.tk-month-item--late { background: var(--sw-late-tint); color: var(--sw-late); }
.tk-month-more { font-size: 11px; }
.tk-hour-row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 18px; border-top: 1px solid var(--sw-line-soft); font-size: 11px; }

@media (max-width: 1023px) {
  .tk-unsched-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tk-week-grid, .tk-month-grid { grid-template-columns: minmax(0, 1fr); }
  .tk-week-grid > * { grid-column: auto !important; }
  .tk-month-head, .tk-month-cell--out { display: none; }
  .tk-month-cell { min-height: 0; }
  .tk-unsched-cards { grid-template-columns: minmax(0, 1fr); }
  .tk-cal-finished { margin-left: 0; }
}

/* Gantt */
.tk-gantt-section { margin: 0; padding: 10px 0 4px; border-top: 1px solid var(--sw-line); background: var(--sw-paper); }
.tk-gantt-section .sg-side { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase; }
.tk-undated { padding-bottom: 4px; }
/*
 * Test plans and test cases: list, plan page, drafts queue and forms.
 *
 * Tokens, buttons, the verdict band and captions come from software.css;
 * panels and side rows from my_workspace.css; tabs and selects from
 * iteration_timeline.css; state dots, fields and forms from work_items.css.
 * Only the test plan pieces live here.
 */

.tp-lede { margin: 0; max-width: 46rem; color: var(--sw-mute); font-size: 14px; line-height: 1.5; }

/* List */
.tp-filters { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.tp-chips { flex-wrap: wrap; row-gap: 8px; align-items: center; border-bottom: 0; }
.tp-chips .sw-eyebrow { margin-right: 4px; }
.tp-table { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.tp-row {
  display: grid;
  grid-template-columns: minmax(16rem, 2.6fr) minmax(10rem, 1.2fr) minmax(10rem, 1.2fr) minmax(9rem, 1fr) 5rem;
  gap: 16px;
  align-items: center;
  padding: 13px 18px;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 12.5px;
}
.tp-row--head {
  padding-block: 9px;
  border-top: 0;
  background: var(--sw-tint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.tp-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 10px 18px;
  background: var(--sw-paper);
  border-top: 1px solid var(--sw-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.tp-section-head b { font-weight: 600; color: var(--sw-slate); }
.tp-section-head span { color: var(--sw-chevron); }
.tp-main, .tp-cases, .tp-fixes, .tp-runs { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tp-title { font-weight: 500; font-size: 14px; line-height: 1.3; }
.tp-title:hover { text-decoration: underline; }
.tp-fixes b { font-size: 17px; font-weight: 600; }
.tp-bar { display: flex; height: 6px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.tp-bar b { display: block; height: 100%; }
.tp-bar--ready { background: var(--wi-verified); }
.tp-bar--draft { background: var(--sw-flight); opacity: 0.7; }
.tp-bar--retired { background: #93aaad; }
.tp-last { font-size: 11px; color: var(--sw-mute); }
.tp-legend { line-height: 1.7; }

/* Plan page */
.tp-detail-title { font-size: 28px; line-height: 1.15; max-width: 60rem; }
.tp-case-tabs { flex-wrap: wrap; row-gap: 6px; padding: 0 20px; align-items: center; }
.tp-order { margin-left: auto; font-size: 10px; }
.tp-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem 5.5rem auto;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--sw-line-soft);
}
.tp-case--head {
  padding-block: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sw-mute);
}
.tp-case-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tp-case-main p { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.tp-guard { display: flex; flex-direction: column; gap: 3px; font-size: 11px; }
.tp-guard small { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 0.8px; }
.tp-case-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tp-quiet { color: var(--sw-mute); font-size: 12px; }
.tp-mute { color: var(--sw-mute); }
.tp-caption { padding: 10px 20px 14px; line-height: 1.6; }
.tp-big { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.5px; }
.tp-held { color: var(--sw-flight); }

/* Case form */
.tp-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--sw-line); border-radius: 3px; overflow: hidden; }
.tp-kind { position: relative; cursor: pointer; }
.tp-kind + .tp-kind { border-left: 1px solid var(--sw-line); }
.tp-kind input { position: absolute; opacity: 0; }
.tp-kind span { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 10px 12px; }
.tp-kind b { font-size: 13px; font-weight: 500; color: var(--sw-slate); }
.tp-kind small { font-size: 11px; color: var(--sw-mute); line-height: 1.35; }
.tp-kind input:checked + span { background: var(--sw-tint); box-shadow: inset 0 -2px 0 var(--sw-teal); }
.tp-kind input:checked + span b { font-weight: 600; }
.tp-kind input:focus-visible + span { outline: 2px solid var(--sw-teal); outline-offset: -2px; }
.tp-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--sw-line); border-radius: 3px; cursor: pointer; align-self: end; }
.tp-check input { margin-top: 3px; }
.tp-check span { display: flex; flex-direction: column; gap: 2px; }
.tp-check b { font-size: 13px; font-weight: 600; }
.tp-check small { font-size: 11.5px; color: var(--sw-mute); }
.tp-from {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--sw-teal);
}
.tp-side-verbs { display: flex; flex-wrap: wrap; gap: 8px; }

/* Drafts queue */
.tp-born-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: tp-born; }
.tp-born-steps li { display: flex; flex-direction: column; gap: 5px; padding: 14px 18px; border-right: 1px solid var(--sw-line-soft); counter-increment: tp-born; }
.tp-born-steps li:last-child { border-right: 0; }
.tp-born-steps b { font-size: 13px; }
.tp-born-steps b::before { content: counter(tp-born) " · "; font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--sw-teal); }
.tp-born-steps span { font-size: 12px; line-height: 1.45; color: var(--sw-mute); }
.tp-born-now { background: var(--sw-warn-tint); box-shadow: inset 0 2px 0 var(--sw-flight); }
.tp-queue { padding: 0; overflow: hidden; }
.tp-queue .tp-section-head { border-top: 0; }
.tp-queue--reopened .tp-section-head b { color: var(--sw-late); }
.tp-qrow { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 4.5rem auto; gap: 14px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--sw-line-soft); }

@media (max-width: 1279px) {
  .tp-row { grid-template-columns: minmax(0, 2fr) minmax(9rem, 1fr) minmax(9rem, 1fr) 8rem; }
  .tp-row > :nth-child(5) { display: none; }
  .tp-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-kind:nth-child(4) { border-left: 0; }
  .tp-kind:nth-child(n + 4) { border-top: 1px solid var(--sw-line); }
}
@media (max-width: 1023px) {
  .tp-born-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-born-steps li { border-bottom: 1px solid var(--sw-line-soft); }
}
@media (max-width: 640px) {
  .tp-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .tp-row--head { display: none; }
  .tp-row > .tp-main, .tp-row > .tp-cases { grid-column: 1 / -1; }
  .tp-row > .tp-runs { display: none; }
  .tp-case { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .tp-case--head { display: none; }
  .tp-case > .tp-case-main { grid-column: 1 / -1; }
  .tp-case > .wi-state { display: none; }
  .tp-order { margin-left: 0; }
  .tp-kinds { grid-template-columns: minmax(0, 1fr); }
  .tp-kind + .tp-kind { border-left: 0; border-top: 1px solid var(--sw-line); }
  .tp-born-steps { grid-template-columns: minmax(0, 1fr); }
  .tp-born-steps li { border-right: 0; }
  .tp-qrow { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 14px; }
  .tp-qrow > .sg-id, .tp-qrow > .tp-last { display: none; }
  .sw--tp .sw-caption-label { white-space: normal; min-width: 0; }
}
/*
 * Test runs: list, summary, execution and the new-run form.
 *
 * Tables, section heads and chips come from test_plans.css (tp-); state
 * dots, fields and forms from work_items.css. Only the run pieces live here,
 * under rn- (tr- is the requirements traceability page).
 */

/* List */
.rn-row {
  display: grid;
  grid-template-columns: minmax(16rem, 2.4fr) 7rem minmax(10rem, 1.4fr) minmax(8rem, 1fr) 9rem 4.5rem;
  gap: 16px;
  align-items: center;
  padding: 13px 18px;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 12.5px;
}
.rn-row.tp-row--head { border-top: 0; }
.rn-bar { display: flex; height: 7px; border-radius: 2px; background: var(--sw-track); overflow: hidden; }
.rn-bar b { display: block; height: 100%; }
.rn-bar--passed { background: var(--wi-verified); }
.rn-bar--failed { background: var(--sw-late); }
.rn-bar--blocked { background: var(--sw-amber); }
.rn-bar--skipped { background: #93aaad; }
.rn-bar--pending { background: transparent; }
.rn-bar--empty { background: repeating-linear-gradient(45deg, var(--sw-track), var(--sw-track) 4px, transparent 4px, transparent 8px); }

/* Summary */
.rn-fail { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px; border-top: 1px solid var(--sw-line-soft); }
.rn-fail p { margin: 0; font-size: 13px; }
.rn-said { color: var(--sw-slate); font-style: italic; }
.rn-case { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 5.5rem auto; gap: 12px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--sw-line-soft); }
.rn-pos { color: var(--sw-chevron); font-size: 11px; }
.rn-verdict { font-size: 12px; font-weight: 500; color: var(--sw-mute); }
.rn-verdict--passed { color: var(--sw-teal); }
.rn-verdict--failed { color: var(--sw-late); }
.rn-verdict--blocked { color: var(--sw-flight); }

/* Execution */
.rn-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 4px;
  background: var(--sw-ink, #12383c);
  color: #fff;
}
.rn-strip .sw-eyebrow, .rn-strip .sw-note { color: #a9c4c6; }
.rn-strip p { margin: 0; }
.rn-strip-head { font-size: 17px; font-weight: 600; margin: 4px 0 !important; }
.rn-exec { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 20px; align-items: start; }
.rn-list { padding-bottom: 6px; }
.rn-list-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 18px; border-top: 1px solid var(--sw-line-soft); color: var(--sw-slate); font-size: 12.5px; }
.rn-list-item small { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.rn-list-item:hover { background: var(--sw-tint); }
.rn-list-item--now { background: var(--sw-warn-tint); box-shadow: inset 3px 0 0 var(--sw-flight); font-weight: 600; }
.rn-case-panel { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; }
.rn-case-panel > p { margin: 0; }
.rn-case-title { margin: 0 0 6px; font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.4px; }
.rn-record { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--sw-line); }
.rn-verdicts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rn-pick { position: relative; cursor: pointer; }
.rn-pick input { position: absolute; opacity: 0; }
.rn-pick span { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border: 1px solid var(--sw-line); border-radius: 3px; font-size: 14px; font-weight: 500; }
.rn-pick kbd { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; color: var(--sw-mute); }
.rn-pick input:focus-visible + span { outline: 2px solid var(--sw-teal); outline-offset: 1px; }
.rn-pick--passed input:checked + span { border-color: var(--sw-teal); background: var(--sw-tint); }
.rn-pick--failed input:checked + span { border-color: var(--sw-late); background: var(--sw-late-tint); color: var(--sw-late); }
.rn-pick--blocked input:checked + span { border-color: var(--sw-flight); background: var(--sw-warn-tint); }
.rn-pick--skipped input:checked + span { border-color: var(--sw-chevron); background: var(--sw-paper); }
.rn-exec-actions { justify-content: flex-end; }
.rn-strip .sw-btn { background: transparent; border-color: #4f7478; color: #fff; }
.rn-strip .sw-btn:hover { background: rgba(255, 255, 255, 0.08); }
.rn-record .tp-check { align-self: stretch; }
.rn-record input[type="file"] { width: 100%; padding: 10px 12px; border: 1.5px dashed var(--sw-line); border-radius: 3px; background: var(--sw-paper); font-size: 12.5px; color: var(--sw-mute); }
.rn-keys { font-size: 10px; line-height: 1.6; }

/* New run */
.rn-pick-list { display: flex; flex-direction: column; max-height: 18rem; overflow-y: auto; border: 1px solid var(--sw-line); border-radius: 3px; }
.rn-pick-case { display: grid; grid-template-columns: auto 4.5rem minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--sw-line-soft); font-size: 12.5px; cursor: pointer; }
.rn-pick-case:first-child { border-top: 0; }

@media (max-width: 1279px) {
  .rn-row { grid-template-columns: minmax(0, 2fr) 7rem minmax(9rem, 1.2fr) 8rem; }
  .rn-row > :nth-child(5), .rn-row > :nth-child(6) { display: none; }
}
@media (max-width: 1023px) {
  .rn-exec { grid-template-columns: minmax(0, 1fr); }
  .rn-list { order: 2; }
}
@media (max-width: 640px) {
  .rn-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .rn-row.tp-row--head { display: none; }
  .rn-row > .tp-main, .rn-row > .tp-cases { grid-column: 1 / -1; }
  .rn-row > :nth-child(4) { display: none; }
  .rn-case { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 14px; }
  .rn-case > .rn-pos, .rn-case > .rn-verdict { display: none; }
  .rn-verdicts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rn-case-panel { padding: 16px; }
  .rn-pick-case { grid-template-columns: auto minmax(0, 1fr); }
  .rn-pick-case > .sg-id, .rn-pick-case > small { display: none; }
}

.wi-form-actions > .sw-note { align-self: center; }
.sw-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/*
 * People admin: list, person page and form.
 *
 * Tokens, buttons, the verdict band and captions come from software.css;
 * panels and side rows from my_workspace.css; tabs and selects from
 * iteration_timeline.css; fields and forms from work_items.css. Only the
 * people pieces live here, under us-.
 */

.us-tabs { flex-wrap: wrap; row-gap: 8px; }
.us-table { background: var(--sw-surface); border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; }
.us-row {
  display: grid;
  grid-template-columns: minmax(15rem, 2fr) minmax(10rem, 1.3fr) minmax(10rem, 1.3fr) 7rem 9rem 9rem;
  gap: 14px;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid var(--sw-line-soft);
  font-size: 12.5px;
}
.us-row--head { padding-block: 9px; border-top: 0; background: var(--sw-tint); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sw-mute); }
.us-row--off { opacity: 0.8; }
.us-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 10px 18px;
  background: var(--sw-paper);
  border-top: 1px solid var(--sw-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.us-section-head::-webkit-details-marker { display: none; }
.us-section-head b { font-weight: 600; color: var(--sw-slate); }
.us-section-head span { color: var(--sw-chevron); }
.us-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.us-initials { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sw-tint); color: var(--sw-teal); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; font-weight: 600; }
.us-name, .us-roles, .us-work, .us-seen { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.us-name a { font-weight: 600; font-size: 13.5px; }
.us-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-move { justify-self: end; }
.us-roles-foot { padding: 4px 18px 14px; margin: 0; }

@media (max-width: 1279px) {
  .us-row { grid-template-columns: minmax(0, 2fr) minmax(8rem, 1fr) minmax(9rem, 1fr) 9rem; }
  .us-row > :nth-child(4), .us-row > :nth-child(5) { display: none; }
}
@media (max-width: 640px) {
  .us-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; }
  .us-row--head { display: none; }
  .us-row > .us-roles, .us-row > .us-work { grid-column: 1; }
}

/* Person page */
.us-more { padding: 6px 20px 14px; margin: 0; }
.us-handover { border-color: var(--sw-amber); scroll-margin-top: 80px; }
.us-handover .wi-link-form { padding: 4px 20px 16px; }

/* Form */
.us-role-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.us-role { border: 1px solid var(--sw-line); border-radius: 3px; }
.us-role input[type="checkbox"] { position: absolute; opacity: 0; }
.us-role input:checked + span { background: var(--sw-tint); box-shadow: inset 0 -2px 0 var(--sw-teal); }
.us-role--locked { opacity: 0.75; cursor: not-allowed; }
.us-role-error { margin: 0; font-size: 13px; }
@media (max-width: 1023px) { .us-role-cards { grid-template-columns: minmax(0, 1fr); } }
/*
 * Pieces shared by the work-item pages (requirements, features, test plans,
 * test runs): state dots, the lifecycle rail, form fields and errors,
 * segmented radios, fact lists, markdown prose, comment and link forms, and
 * task rows. Tokens come from software.css (.sw).
 *
 * State dots follow one palette everywhere — pending/draft rail, approved
 * teal, in progress amber, completed/delivered completed-teal, verified/
 * accepted verified-teal, cancelled/retired grey — and every state is named
 * in words beside its dot.
 */

.sw { --wi-completed: #3e838a; --wi-verified: #55959b; }

.wi-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }
.wi-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--sw-rail); flex: none; }
.wi-state--approved i { background: var(--sw-teal); }
.wi-state--in-progress i { background: var(--sw-amber); }
.wi-state--delivered i { background: var(--wi-completed); }
.wi-state--accepted i { background: var(--wi-verified); }
.wi-state--completed i { background: var(--wi-completed); }
.wi-state--verified i, .wi-state--ready i { background: var(--wi-verified); }
.wi-state--retired i { background: #93aaad; }
.wi-state--cancelled i { background: #93aaad; }
.wi-state--draft i { background: var(--sw-flight); }
.wi-state--passed i { background: var(--wi-verified); }
.wi-state--failed i { background: var(--sw-late); }
.wi-pill { height: 24px; padding: 0 10px; border-radius: 3px; background: var(--sw-tint); font-weight: 500; font-size: 12.5px; }
.wi-prio { font-size: 12.5px; font-weight: 500; color: var(--sw-mute); }
.wi-prio--high { color: var(--sw-flight); }
.wi-prio--critical { color: var(--sw-late); }
.wi-prio--low { color: var(--sw-chevron); }
.wi-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin: 0; }
.wi-filters label { display: flex; flex-direction: column; gap: 5px; }
.wi-search input { min-width: 14rem; }
.wi-inline-form { display: inline; margin: 0; }
.wi-pages { display: flex; align-items: center; gap: 10px; }
.wi-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.6fr);
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--sw-surface);
  border: 1px solid var(--sw-line);
  border-radius: 4px;
}
.wi-rail li { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border-right: 1px solid var(--sw-line-soft); position: relative; }
.wi-rail li:last-child { border-right: 0; background: var(--sw-paper); }
.wi-rail b { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sw-chevron); }
.wi-rail span { font-size: 12px; color: var(--sw-mute); line-height: 1.4; }
.wi-rail--done b { color: var(--sw-mute); }
.wi-rail--done::after { content: "✓"; position: absolute; top: 10px; right: 12px; color: var(--wi-verified); font-size: 12px; }
.wi-rail--now { background: var(--sw-warn-tint); box-shadow: inset 0 3px 0 var(--sw-amber); }
.wi-rail--now b { color: var(--sw-slate); font-weight: 600; }
.wi-rail--now span { color: var(--sw-slate); }
.wi-waits { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px dashed var(--sw-line); border-radius: 4px; color: var(--sw-mute); font-size: 12.5px; }
.wi-danger { color: var(--sw-late) !important; }
.wi-group-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 20px;
  background: var(--sw-paper);
  border-top: 1px solid var(--sw-line-soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--sw-chevron);
}
.wi-group-head b { color: var(--sw-slate); font-weight: 600; }
.wi-task { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem 6rem; gap: 14px; align-items: center; padding: 11px 20px; border-top: 1px solid var(--sw-line-soft); }
.wi-task-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wi-task-main p { margin: 0; font-size: 13px; font-weight: 500; }
.wi-task-main a:hover { text-decoration: underline; }
.wi-task-due { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.wi-task-status { font-size: 12px; color: var(--sw-mute); }
.wi-link-form { display: flex; gap: 8px; margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--sw-line-soft); }
.wi-link-form select { flex: 1; min-width: 0; }
.wi-link-form--side { padding: 10px 18px 14px; }
.wi-link { color: var(--sw-teal); font-size: 12.5px; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
.wi-link:hover { text-decoration: underline; }
.wi-spec-body { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 18px; }
.wi-prose { font-size: 13.5px; line-height: 1.55; color: var(--sw-slate); }
.wi-prose p { margin: 0 0 8px; }
.wi-prose ul, .wi-prose ol { margin: 0 0 8px; padding-left: 20px; }
.wi-prose ul { list-style: disc; }
.wi-prose ol { list-style: decimal; }
.wi-prose code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }
.wi-prose--quiet { color: var(--sw-mute); }
.wi-lede-flat { padding: 0; }
.wi-lede-top { padding-top: 0; }
.wi-comment { padding: 12px 20px; border-top: 1px solid var(--sw-line-soft); }
.wi-comment-head { margin: 0 0 4px; font-size: 12.5px; }
.wi-comment-form { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--sw-line-soft); }
.wi-comment-form textarea, .wi-field input, .wi-field select, .wi-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--sw-line);
  border-radius: 3px;
  background: var(--sw-surface);
  color: var(--sw-slate);
  font: inherit;
  font-size: 13.5px;
}
.wi-field input[type="checkbox"], .wi-field input[type="radio"] { width: auto; padding: 0; border: 0; }
.wi-comment-form textarea:focus, .wi-field input:focus, .wi-field select:focus, .wi-field textarea:focus { outline: 2px solid var(--sw-amber); outline-offset: 1px; }
.wi-facts { display: grid; grid-template-columns: 7rem 1fr; gap: 8px 12px; margin: 0; padding: 4px 18px 16px; font-size: 12.5px; }
.wi-facts dt { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--sw-mute); padding-top: 2px; }
.wi-facts dd { margin: 0; }
.wi-facts a { color: var(--sw-teal); }
.wi-mine { color: var(--sw-teal); }
.wi-form-cols { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 20px; align-items: start; }
.wi-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.wi-errors { padding: 14px 18px; border-left: 3px solid var(--sw-reject); border-radius: 4px; background: var(--sw-late-tint); color: var(--sw-late); font-size: 13px; }
.wi-errors ul { margin: 6px 0 0; padding-left: 18px; }
.wi-fields { display: flex; flex-direction: column; gap: 16px; padding: 0 20px 20px; }
.wi-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; border: 0; margin: 0; padding: 0; }
.wi-field small { font-size: 11.5px; color: var(--sw-mute); }
.wi-field--error input, .wi-field--error select { border-color: var(--sw-reject); background: var(--sw-late-tint); }
.wi-field--error small { color: var(--sw-late); }
.wi-field-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.wi-segs { display: flex; flex-wrap: wrap; border: 1px solid var(--sw-line); border-radius: 4px; overflow: hidden; width: fit-content; }
.wi-seg { position: relative; }
.wi-seg input { position: absolute; opacity: 0; inset: 0; }
.wi-seg span { display: block; padding: 7px 14px; font-size: 12.5px; color: var(--sw-teal); border-left: 1px solid var(--sw-line); cursor: pointer; }
.wi-seg:first-child span { border-left: 0; }
.wi-seg input:checked + span { background: var(--sw-slate); color: #fff; font-weight: 600; }
.wi-seg input:focus-visible + span { outline: 2px solid var(--sw-amber); outline-offset: -2px; }
.wi-steps { margin: 0; padding: 0 20px 18px 38px; list-style: decimal; font-size: 13px; line-height: 1.6; color: var(--sw-mute); }
.wi-form-actions { display: flex; justify-content: flex-end; gap: 10px; }

@media (max-width: 1279px) {
  .wi-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wi-rail li { border-bottom: 1px solid var(--sw-line-soft); }
}
@media (max-width: 1023px) {
  .wi-form-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wi-rail { grid-template-columns: minmax(0, 1fr); }
  .wi-task { grid-template-columns: minmax(0, 1fr) auto; }
  .wi-task-status { display: none; }
  .wi-field-row { grid-template-columns: minmax(0, 1fr); }
  .wi-filters label, .wi-search input { width: 100%; min-width: 0; }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */