.playhq-first-season-panel {
  margin-top: 0.75rem;
}

/* Import-step rows that need no attention: an unchanged row still has to
   be there (its choices are re-posted on confirm) but should not compete
   with the rows that actually changed, which sort above it. */
.playhq-unchanged {
  opacity: 0.72;
}

.playhq-all-unchanged {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
}

.playhq-unchanged-details {
  margin: 0.75rem 0;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
}

.playhq-unchanged-details > summary {
  cursor: pointer;
  padding: 0.35rem 0;
}

/* Global Admin home — aggregate-only operational summary cards. */
.global-admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

.global-admin-summary-card {
  display: grid;
  min-width: 0;
  gap: 0.5rem;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
  background: var(--md-sys-color-surface-container-low);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.global-admin-summary-card:hover {
  /* surface-container sits within 0.3 L* of the retuned page background,
     so this hover state would be invisible against it — these cards sit
     directly on the page. Steps to the next tier down instead. */
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-primary);
  transform: translateY(-1px);
}

.global-admin-summary-card:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 3px;
}

.global-admin-summary-label {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
  font-weight: var(--meta-strong-weight);
  line-height: var(--meta-line-height);
}

.global-admin-summary-value {
  color: var(--md-sys-color-on-surface);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: 1.2;
}

.global-admin-summary-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
}

.global-admin-summary-values div {
  min-width: 0;
}

.global-admin-summary-values dt {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
}

.global-admin-summary-values dd {
  margin: 0.15rem 0 0;
  color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: var(--md-sys-typescale-title-large-weight);
}

.global-admin-summary-detail {
  margin-top: auto;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
  line-height: var(--meta-line-height);
}

/* ==========================================================================
   Work Board — Kanban layout, item modal, create-item dialog (#237)
   ========================================================================== */

/* Priority pill: a new colour family keyed to priority, deliberately not
   a reuse of .status-pill's status-keyed classes (§4 of the #237 spec). */
.priority-pill {
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: var(--md-sys-shape-corner-full);
  border: 1px solid currentColor;
  padding: 0.1rem 0.55rem;
  font-size: var(--meta-size);
  font-weight: var(--meta-strong-weight);
  letter-spacing: var(--meta-tracking);
}

.priority-high {
  color: var(--md-sys-color-error);
}

.priority-medium {
  color: var(--md-extended-color-warning);
}

.priority-low {
  color: var(--md-sys-color-on-surface-variant);
}

/* Nine active-status columns, desktop-first: the row scrolls horizontally
   rather than columns re-flowing vertically on narrow screens (§1). */
.wb-page-heading { align-items: center; }
.wb-board-switch { display: inline-grid; place-items: center; vertical-align: middle; color: var(--md-sys-color-on-surface-variant); }
.wb-board-switch svg { display: block; width: 1.5rem; height: 1.5rem; }
.wb-board-switch:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 3px; border-radius: 50%; }
.wb-page-heading > div:first-child { min-width: 0; }
.wb-heading-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; }
.wb-search-control {
  display: flex;
  flex: 0 0 3rem;
  align-items: center;
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  transition: width 180ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.wb-search-control:not(.is-open) { justify-content: center; }
.wb-search-control.is-open { flex-basis: 17rem; width: 17rem; padding-inline: 0.25rem; }
.wb-search-control:focus-within { background: var(--md-sys-color-surface-container); box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.wb-search-toggle,
.wb-search-clear {
  display: grid;
  flex: 0 0 2.5rem;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.wb-search-icon,
.wb-search-icon svg,
.wb-search-clear svg { display: block; width: 1.5rem; height: 1.5rem; }
.wb-search-input {
  display: none;
  flex: 1 1 auto;
  width: 0;
  min-width: 0;
  height: 2.5rem;
  padding: 0 0.4rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font: inherit;
}
.wb-search-control.is-open .wb-search-input { display: block; }
.wb-search-input::placeholder { color: var(--md-sys-color-on-surface-variant); opacity: 1; }
.wb-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.wb-search-clear { display: none; }
.wb-search-control.has-query .wb-search-clear { display: grid; }
.wb-search-toggle:hover,
.wb-search-clear:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.wb-search-toggle:focus-visible,
.wb-search-clear:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.wb-search-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.wb-search-empty {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container);
}
.wb-search-empty p { margin: 0; }
.wb-search-empty[hidden] { display: none; }
.kanban-card[hidden] { display: none; }
.backlog-list { display: grid; gap: 0.75rem; }
.backlog-item { display: grid; grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, auto) minmax(12rem, 1.5fr) auto; gap: 0.75rem; align-items: center; padding: 1rem; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-low); }
.backlog-item[hidden] { display: none; }
.backlog-item-link { color: inherit; }
.backlog-item-work { color: var(--md-sys-color-on-surface-variant); }
.backlog-empty { padding: 1rem; }
.wb-item-actions button:disabled, .wb-item-actions button[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; filter: saturate(0.35); }
.wb-action-feedback { color: var(--md-sys-color-on-surface-variant); font-size: 0.875rem; }
.wb-resume-dialog { width: min(32rem, calc(100vw - 2rem)); }
.wb-resume-form { display: grid; gap: 1rem; }
.wb-resume-form .form-field { margin: 0; }
.wb-resume-form .form-actions { margin-top: 0; }
.wb-resume-dialog button:disabled { opacity: 0.48; cursor: not-allowed; filter: saturate(0.35); }
@media (max-width: 720px) { .backlog-item { grid-template-columns: 1fr auto; } .backlog-item-work { grid-column: 1 / -1; } }
.wb-page-heading .wb-heading-actions > [data-open-create] { white-space: nowrap; }
.wb-search-empty { color: var(--md-sys-color-on-surface); }
.wb-search-empty button { margin-left: 0.3rem; }

@media (max-width: 720px) {
  .wb-page-heading { flex-wrap: wrap; }
  .wb-heading-actions { gap: 0.35rem; margin-top: 0; }
  .wb-search-control.is-open { width: min(17rem, calc(100vw - 12rem)); flex-basis: min(17rem, calc(100vw - 12rem)); height: 2.75rem; }
  .wb-search-control.is-open .wb-search-input { height: 2.25rem; }
}

.kanban-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  align-items: flex-start;
}

.kanban-column {
  flex: 0 0 26rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.kanban-column.is-empty {
  flex: 0 0 auto;
  width: fit-content;
  max-width: 23rem;
  padding-inline: 0.5rem;
  box-sizing: border-box;
}

.kanban-column-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 0.1rem;
  padding: 0 0.1rem;
  font-size: var(--meta-size);
  font-weight: var(--meta-strong-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--md-sys-color-on-surface-variant);
  width: max-content;
  max-width: 22rem;
  overflow-wrap: anywhere;
}

.kanban-column-heading > span { min-width: 0; }

.kanban-column-count {
  font-weight: 400;
  opacity: 0.75;
}

.kanban-empty {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  contain: inline-size;
  padding: 0.75rem 0.4rem;
  border: 1px dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
}

.wb-image-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin-top: 0.55rem;
}

.wb-image-upload .muted {
  margin: 0;
}

.wb-image-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

#item-modal .wb-image-upload-input,
#create-item-dialog .wb-image-upload-input {
  width: 1px;
  min-height: 1px;
}

.wb-image-upload [data-upload-picker]:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 3px;
}

/* Board cards keep item navigation and dispatch actions as separate controls. */
.kanban-card {
  display: block;
  text-align: left;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: var(--md-sys-color-surface-container-low);
  color: inherit;
  text-decoration: none;
}

.kanban-card.is-blocked,
.kanban-card[data-item-blocked="true"] {
  border: 1px solid color-mix(in srgb, var(--md-sys-color-error) 40%, var(--md-sys-color-outline-variant));
  border-left: 4px solid var(--md-sys-color-error);
  background: color-mix(in srgb, var(--md-sys-color-error-container) 12%, var(--md-sys-color-surface-container-low));
}

.kanban-card .status-pill.status-blocked,
.blocked-count {
  color: var(--md-sys-color-error);
  font-weight: var(--meta-strong-weight);
}

.kanban-card .status-pill.status-blocked {
  white-space: normal;
  overflow-wrap: break-word;
}

.kanban-card:hover,
.kanban-card:focus-within {
  border-color: var(--md-sys-color-primary);
}

.kanban-card.is-blocked:hover,
.kanban-card.is-blocked:focus-within,
.kanban-card[data-item-blocked="true"]:hover,
.kanban-card[data-item-blocked="true"]:focus-within {
  border-color: var(--md-sys-color-error);
}

.kanban-card-link { display: block; color: inherit; text-decoration: none; }
.kanban-card-link:hover .kanban-card-title { color: var(--md-sys-color-primary); text-decoration: underline; }
.kanban-card-link:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 3px; border-radius: var(--md-sys-shape-corner-small); }
.kanban-card-actions { display: flex; gap: 0.45rem; margin-top: 0.75rem; }
.kanban-card-actions form { margin: 0; }
.kanban-card-actions .icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.4rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
}
.kanban-card-actions .sign-off-action { color: var(--md-sys-color-primary); }
.kanban-card-actions .icon-button:hover,
.kanban-card-actions .icon-button:focus-visible { border-color: var(--md-sys-color-primary); }
.kanban-card-actions .icon-button:focus-visible { outline: 3px solid var(--md-sys-color-primary); outline-offset: 2px; }
.kanban-card-actions svg { display: block; }
.wb-card-feedback { margin: 0.65rem 0 0; padding: 0.55rem 0.7rem; border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: var(--meta-size); }
.wb-card-feedback[hidden] { display: none; }

@media (max-width: 640px) {
  .kanban-card-actions { gap: 0.6rem; }
}

.kanban-card-title {
  display: block;
  font-weight: var(--meta-strong-weight);
  overflow-wrap: break-word;
}

.kanban-card-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.kanban-card-flags .status-pill,
.kanban-card-flags .priority-pill {
  flex-shrink: 0;
  white-space: nowrap;
}

/* #282: the card's queue-state marker fills the pill row's outer height as
   a true circle. Scoped to the card flags — the item-view "Queue state"
   panel (.wb-queue-panel) and .wb-item-flags keep their own sizing.
   height:100% + aspect-ratio take the diameter from the row's live cross
   size; the two floors are the status pill's own box (one line-height plus
   its 0.15rem padding and 1px border) and cover what that live size can't
   supply: a marker wrapped onto a line of its own, and the flex line that
   would otherwise reserve only the 1rem min-width under a wider circle. */
.kanban-card-flags .wb-queue-status { align-items: center; min-width: calc(1lh + 0.3rem + 2px); }
.kanban-card-flags .wb-queue-dot { height: 100%; min-height: calc(1lh + 0.3rem + 2px); width: auto; aspect-ratio: 1 / 1; margin-top: 0; flex-shrink: 0; }

.wb-queue-status { position: relative; display: inline-flex; align-items: flex-start; min-width: 1rem; cursor: help; vertical-align: top; }
.wb-queue-dot { display: inline-block; width: 0.7rem; height: 0.7rem; margin-top: 0.18rem; border-radius: 50%; background: #b7791f; box-shadow: 0 0 0 2px color-mix(in srgb, #b7791f 18%, transparent); }
.wb-queue-green .wb-queue-dot { background: #27834a; box-shadow: 0 0 0 2px color-mix(in srgb, #27834a 18%, transparent); }
.wb-queue-red .wb-queue-dot { background: #c0392b; box-shadow: 0 0 0 2px color-mix(in srgb, #c0392b 18%, transparent); }
.wb-queue-tooltip { position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 0.45rem); width: min(22rem, 78vw); padding: 0.65rem 0.75rem; border-radius: 0.4rem; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); font-size: 0.78rem; font-weight: 400; line-height: 1.45; white-space: normal; box-shadow: var(--md-sys-elevation-2); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 0.2rem); transition: opacity 100ms ease, transform 100ms ease, visibility 0s linear 100ms; }
.wb-queue-status:hover .wb-queue-tooltip, .wb-queue-status:focus-visible .wb-queue-tooltip, .wb-queue-status.is-open .wb-queue-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.wb-queue-status.is-dismissed .wb-queue-tooltip { opacity: 0; visibility: hidden; transform: translate(-50%, 0.2rem); transition-delay: 0s; }
.wb-queue-status:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 3px; border-radius: 50%; }
.wb-queue-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wb-queue-panel { display: flex; align-items: flex-start; gap: 0.5rem; }
.wb-queued-feedback { margin: 0.75rem 1.25rem; padding: 0.7rem 0.85rem; border-left: 3px solid var(--md-sys-color-primary); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
/* #306: the applicable queued-workflow message is wrapped so the countdown
   cue and the manual Check status now control can sit beside it. The banner
   look moves onto the wrapper and the message inside it is neutralised, so a
   wrapped and an unwrapped message present exactly as before. */
.wb-status-feedback { margin: 0.75rem 1.25rem; padding: 0.7rem 0.85rem; border-left: 3px solid var(--md-sys-color-primary); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.wb-status-feedback .wb-queued-feedback { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; }
.wb-status-check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem; margin-top: 0.5rem; }
.wb-status-cue { font-size: var(--meta-size); font-variant-numeric: tabular-nums; font-weight: 600; }
.wb-status-cue[hidden] { display: none; }
.wb-status-check-error { font-size: var(--meta-size); }
.wb-status-check-error[hidden] { display: none; }
.wb-status-check-row button { font-size: var(--meta-size); }
/* #298: inline notice in an open item modal whose lifecycle status changed
   while input was in progress — the body stays untouched until the user
   applies the refresh. */
.wb-lifecycle-notice { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 1.25rem 0; padding: 0.8rem 1rem; border: 1px solid var(--md-sys-color-outline-variant); border-left: 0.3rem solid var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container-low); }
.wb-lifecycle-notice p { margin: 0; }
.wb-lifecycle-notice button { flex: 0 0 auto; }
.wb-board-feedback { margin: 0 0 1.25rem; }
.wb-board-feedback[hidden] { display: none; }
.wb-upload-saved { display: block; margin-top: 0.3rem; color: var(--md-sys-color-primary); font-size: var(--meta-size); }
.wb-image-thumbnails { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.65rem; }
.wb-image-entry { display: flex; align-items: center; gap: 0.55rem; max-width: 100%; padding: 0.35rem; border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small); }
.wb-image-entry.is-unresolved { border-color: var(--md-sys-color-error); }
.wb-image-preview { position: relative; flex: 0 0 4rem; width: 4rem; height: 3rem; padding: 0; overflow: hidden; border: 0; border-radius: 0.25rem; background: var(--md-sys-color-surface-container); cursor: pointer; }
.wb-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.wb-image-preview img[hidden] { display: none; }
.wb-image-spinner { position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; margin: -0.5rem; border: 2px solid var(--md-sys-color-outline-variant); border-top-color: var(--md-sys-color-primary); border-radius: 50%; animation: wb-image-spin 0.8s linear infinite; }
@keyframes wb-image-spin { to { transform: rotate(360deg); } }
.wb-image-delete { display: grid; flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; place-items: center; margin-left: 0.2rem; padding: 0; border: 0; border-radius: 50%; color: var(--md-sys-color-on-surface-variant); background: transparent; cursor: pointer; font-size: 1.35rem; line-height: 1; }
.wb-image-delete:hover, .wb-image-delete:focus-visible { color: var(--md-sys-color-error); background: var(--md-sys-color-error-container); }
.wb-image-delete:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
.wb-image-entry-detail [data-image-load-status] { color: var(--md-sys-color-on-surface-variant); }
.wb-image-number { position: absolute; right: 0.15rem; bottom: 0.1rem; min-width: 1.15rem; padding: 0 0.2rem; border-radius: 1rem; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); font-size: 0.75rem; }
.wb-image-entry-detail { display: grid; gap: 0.2rem; min-width: 0; font-size: var(--meta-size); }
.wb-image-unresolved { color: var(--md-sys-color-error); }
.wb-image-preview-dialog { width: min(90vw, 70rem); max-width: none; max-height: 90vh; padding: 0.75rem; border: 0; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-high); }
.wb-image-preview-dialog img { display: block; max-width: 100%; max-height: calc(90vh - 4rem); object-fit: contain; margin: 0.75rem auto 0; }
/* #309: the shell supplies this dialog's top-right × (built at runtime by
   work-board.js), so its action row clears that corner — matching the
   approved artboard's right-aligned Delete / text-Close row. */
.wb-image-preview-dialog > .dialog-close { position: absolute; top: 0.7rem; right: 0.7rem; }
.wb-image-preview-actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding-right: 2.75rem; }
@media (prefers-reduced-motion: reduce) { .wb-image-spinner { animation-duration: 2s; } }

.kanban-card-work {
  display: block;
  margin-top: 0.3rem;
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
}

/* Item modal: the shared item body partial injected by work-board.js. */
.item-modal {
  position: relative;
  width: min(68rem, calc(100vw - 3rem));
  max-height: calc(100vh - 4rem);
  padding: 0;
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-3);
  white-space: normal;
}
.item-modal .wb-item-sections { padding-right: 1.75rem; }

.item-modal::backdrop {
  background: color-mix(in oklch, var(--md-sys-color-scrim) 45%, transparent);
}

.item-modal-close {
  position: static;
  top: auto;
  right: auto;
  border: none;
  background: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
}

.wb-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.wb-item-heading .wb-item-title {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  overflow-wrap: break-word;
  min-width: 0;
}

.wb-item-heading { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.wb-item-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.75rem; }

.wb-item-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0;
}

.wb-item-flags .status-pill,
.wb-item-flags .priority-pill {
  flex-shrink: 0;
  white-space: nowrap;
}

.wb-item-work {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--meta-size);
}

.wb-fast-track {
  flex-shrink: 0;
  margin: 0;
}

/* ==========================================================================
   Work Board — in-place item attribute editing (#267), the round-5 mockup
   ========================================================================== */

/* Every pill in the item's flags row shares one height and vertical
   padding, so an in-pill edit icon never grows its pill (round 5). */
.wb-item-flags .status-pill,
.wb-item-flags .priority-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding-block: 0.1rem;
}

.wb-attribute-hidden {
  display: none !important;
}

.wb-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.wb-item-title .wb-inline-field {
  width: 100%;
}

.wb-item-title .wb-inline-field-title {
  display: flex;
  align-items: center;
}

.wb-attribute-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.wb-attribute {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Quiet at rest, clearer on hover/focus. The pill variant keeps a small
   glyph inside its 2rem pill while a 44px hit overlay carries the
   spec's minimum tap target. */
.wb-inline-edit {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.65rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  opacity: 0.62;
  cursor: pointer;
}

.wb-inline-edit:hover {
  background: color-mix(in oklch, currentColor 10%, transparent);
  opacity: 0.95;
}

.wb-inline-edit:focus-visible {
  opacity: 0.95;
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.wb-inline-edit svg {
  display: block;
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.wb-inline-pill {
  width: 10rem;
  justify-content: space-between;
}

.wb-inline-pill .wb-inline-edit {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.25rem;
  color: inherit;
}

.wb-inline-pill .wb-inline-edit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
}

.wb-attribute-form {
  margin: 0;
}

.wb-attribute-form-title {
  margin: 0 0 0.3rem;
}

.wb-inline-control {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.wb-inline-control input[type="text"],
.wb-inline-control select {
  box-sizing: border-box;
  min-height: 2.75rem;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 0.6rem 0.75rem;
  font: inherit;
}

.wb-inline-control input[type="text"] {
  width: min(30rem, 60vw);
}

.wb-inline-control input[type="text"]:focus-visible,
.wb-inline-control select:focus-visible {
  outline: none;
  border: 2px solid var(--md-sys-color-primary);
  padding: calc(0.6rem - 1px) calc(0.75rem - 1px);
}

.wb-inline-actions {
  display: inline-flex;
  gap: 0.4rem;
}

.wb-inline-actions button {
  min-height: 2.75rem;
}

.wb-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
}

.wb-inline-check label {
  cursor: pointer;
}

.wb-attribute-form .flash-error {
  display: block;
  flex: 1 0 100%;
  margin-top: 0.35rem;
}

.wb-item-sections {
  padding: 1rem 1.25rem 1.25rem;
  overflow-y: auto;
  max-height: calc(100vh - 9rem);
}

.wb-blocker-panel {
  border-left: 4px solid var(--md-sys-color-error);
  background: color-mix(in srgb, var(--md-sys-color-error-container) 14%, var(--md-sys-color-surface-container-low));
}

.wb-blocker-panel h3 {
  color: var(--md-sys-color-error);
  margin-top: 0;
}

.wb-resolve-blocker {
  border-left: 4px solid var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary-container) 10%, var(--md-sys-color-surface-container-low));
}

.wb-resolve-blocker h3 {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.wb-blocker-panel .wb-prose pre,
.wb-blocker-panel .wb-prose code { white-space: pre-wrap; overflow-wrap: anywhere; }

.wb-item-flags .status-pill.status-blocked {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  font-weight: var(--meta-strong-weight);
}

.wb-item-sections .config-panel {
  margin: 0 0 1rem;
}

.wb-item-sections > :last-child {
  margin-bottom: 0;
}

.wb-item-sections details > summary {
  cursor: pointer;
  font-weight: var(--meta-strong-weight);
}

.wb-item-sections details[open] > summary {
  margin-bottom: 0.6rem;
}

.wb-item-sections h3 {
  margin-top: 0;
}

.wb-item-sections h4 {
  margin: 0.75rem 0 0.25rem;
}

.wb-design-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.wb-design-sign-off,
.wb-design-feedback {
  margin-bottom: 1rem;
  padding: 1rem;
  border-left: 0.25rem solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.wb-design-sign-off h3,
.wb-design-feedback h3 {
  margin: 0 0 0.35rem;
}

.wb-design-sign-off p,
.wb-design-feedback p {
  margin: 0;
}

.wb-design-sign-off .form-field,
.wb-design-feedback .form-field {
  max-width: 46rem;
  margin-top: 0.8rem;
}

.wb-design-sign-off textarea,
.wb-design-feedback textarea {
  min-height: 5rem;
}

.wb-design-sign-off .field-hint,
.wb-design-feedback .field-hint {
  margin-top: 0.35rem;
}

.wb-design-sign-off .form-actions,
.wb-design-feedback .form-actions {
  justify-content: flex-start;
  margin-top: 0.8rem;
}

/* Raw work-item text: escaped by Jinja, whitespace preserved — never
   Markdown-rendered, never | safe. */
.wb-prose {
  white-space: normal;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.item-modal .wb-prose img {
  max-width: 100%;
  height: auto;
  cursor: zoom-in;
}
.wb-item-image-dialog {
  position: relative;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  padding: 2.75rem 0.75rem 0.75rem;
  overflow: auto;
  border: 0;
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-high);
  box-shadow: var(--md-sys-elevation-3);
}
.wb-item-image-dialog::backdrop {
  background: color-mix(in oklch, var(--md-sys-color-scrim) 65%, transparent);
}
.wb-item-image-dialog img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 3.5rem);
  max-height: calc(100vh - 4.5rem);
  object-fit: contain;
  margin: 0 auto;
}
.wb-item-image-close {
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.wb-item-image-close:hover { background: var(--md-sys-color-surface-container-highest); }

/* Create-item dialog (#280): same .info-dialog shell, 50% wider than the
   30rem default on desktop while staying viewport-constrained on mobile. */
.create-item-dialog {
  width: min(45rem, calc(100vw - 2rem));
}

/* The Create form uses the dialog's available content width instead of
   .profile-form's 30rem desktop cap (layout.css); its visible fields fill
   that width, while the Fast Track checkbox keeps its natural size (see
   the :not([type="checkbox"], [type="radio"]) exclusion in
   components.css). */
.create-item-dialog .profile-form {
  max-width: none;
}

.create-item-dialog .form-field input:not([type="checkbox"], [type="radio"]),
.create-item-dialog .form-field select,
.create-item-dialog .form-field textarea {
  width: 100%;
}

/* The Create-item closer is the shell's own (#309): `.info-dialog >
   .dialog-close` in components.css anchors it to the corner and
   `.info-dialog h2, .info-dialog h4` clears the heading, so #280's scoped
   copies of those rules are gone. */

@media (max-width: 720px) {
  .kanban-column {
    flex-basis: 20rem;
  }

  .item-modal { width: calc(100vw - 2rem); }
  .wb-item-header { flex-direction: column; gap: 0.5rem; padding: 1rem; }
  .wb-item-actions { order: -1; width: 100%; justify-content: flex-end; }
  .wb-item-actions { gap: 0.35rem; }
  .wb-attribute-form-title .wb-inline-control { width: 100%; }
  .wb-inline-control input[type="text"] { width: min(100%, 22rem); }
  .wb-attribute { max-width: 100%; }
  .wb-lifecycle-notice { align-items: flex-start; flex-direction: column; margin: 0.75rem 0.75rem 0; padding: 0.7rem 0.75rem; }
  .wb-status-feedback { margin: 0.75rem 0.75rem 0; }
  .wb-status-check-row { align-items: flex-start; flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Global Admin AI credentials (#269) — use-case assignment rows, catalogue
   actions, and the Add/Edit/Delete dialogs.
   --------------------------------------------------------------------------- */

/* Same .info-dialog shell, a little wider so name/key/base URL/model stack
   comfortably without wrapping labels. */
.ai-credential-dialog {
  width: min(30rem, calc(100vw - 2rem));
}

/* The Add/Edit/Delete closer, its circular treatment and the heading
   clearance are the shell's (#309): `.info-dialog > .dialog-close` and
   `.info-dialog h2, .info-dialog h4` in components.css cover them. */

.ai-assignment-row + .ai-assignment-row {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.ai-assignment-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.ai-assignment-head h3 {
  margin: 0;
  font-size: var(--md-sys-typescale-title-medium-size, 1.1rem);
}

.ai-assignment-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1rem;
}

.ai-key-mask {
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
}

.ai-credential-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ai-reference-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

.ai-reference-list li {
  margin-bottom: 0.25rem;
}

@media (max-width: 720px) {
  .ai-credential-dialog {
    width: calc(100vw - 2rem);
  }
}

/* #293: breathing room between the Primary/Backup selectors and each
   assignment Save. Scoped to the assignment rows — the shared
   .form-field + .form-actions rule never matches here, and dialog
   .form-actions keep their own spacing. */
.ai-assignment-row .ai-assignment-fields + .form-actions {
  margin-top: 0.85rem;
}

/* #293: Add credential lives in the catalogue heading as a circular
   plus button opening the existing dialog. */
.add-credential {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
  place-items: center;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
}