/* Portal work board — /work-board/. Internal tool for Richard and Marco;
   page CSS only, on design-system components and tokens.

   Phone first: the three status columns stack as sections; from 768px
   (Bootstrap's md, already in use) they stand side by side. */

/* The panel's content shares the page header's 18px inset. Inside the task
   and form pages the header sits within the wrapper, so it gives up its own
   horizontal padding and the wrapper's applies once. */
.work-board-main {
  padding: 0 var(--space-4h) var(--space-4h);
}

.work-board-main > .page-header--panel {
  padding-left: 0;
  padding-right: 0;
}

.work-board-unlock,
.work-board-panel > .portal-message {
  margin: var(--space-4h);
}

.work-board-unlock {
  max-width: 420px;
}

.work-board-field {
  margin-bottom: var(--space-4);
}

.work-board-field .flow-form-input {
  width: 100%;
}

.work-board-error {
  margin: 0 0 var(--space-2);
  color: var(--text-error);
  font-weight: var(--font-weight-semibold);
}

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

/* Four segments ("Unassigned" among them) cannot share one row on a phone —
   at 320 the component's equal-width segments clip their words — so below
   420px of the toolbar's own width they become two rows of two. The toolbar
   is already a CSS container (the component's own narrow rules use it). */
@container (max-width: 420px) {
  .work-board-toolbar .portal-segmented {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .work-board-toolbar .portal-segment + .portal-segment {
    border-left: 0;
  }

  .work-board-toolbar .portal-segment:nth-of-type(2n) {
    border-left: 1px solid var(--border-primary);
  }

  .work-board-toolbar .portal-segment:nth-of-type(n + 3) {
    border-top: 1px solid var(--border-primary);
  }
}

.work-board-count-row {
  align-items: baseline;
}

.work-board-checked {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-xs-body-size);
  line-height: var(--type-xs-body-line);
}

.work-board-columns {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .work-board-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.work-board-column {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.work-board-column__title {
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--font-weight-semibold);
}

.work-board-column__count {
  color: var(--text-secondary);
  font-weight: var(--font-weight-regular);
}

.work-board-column__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.work-board-column__empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
}

/* One task. The whole card is the link (the title's ::after stretches over
   it, as the stacked row does); the status select sits above that layer. */
.work-board-card {
  position: relative;
  background: var(--n-0);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3h);
}

.work-board-card:hover,
.work-board-card:focus-within {
  box-shadow: var(--shadow-app-default-subtle);
}

.work-board-card:hover::after,
.work-board-card:focus-within::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--primary-accent);
  border-radius: inherit;
  pointer-events: none;
}

.work-board-card__title {
  display: inline-block;
  padding: var(--space-1) 0;
  margin: calc(-1 * var(--space-1)) 0 0;
  color: var(--link-active);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-underline-offset: 2px;
}

.work-board-card__title:visited {
  color: var(--link-active);
}

.work-board-card__title::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.work-board-card:hover .work-board-card__title,
.work-board-card__title:hover,
.work-board-card__title:focus-visible {
  color: var(--link-active);
  text-decoration: underline;
}

.work-board-card__summary {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
}

.work-board-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2h) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
}

.work-board-card__sep {
  color: var(--text-secondary);
}

.work-board-card__date {
  white-space: nowrap;
}

/* The move control: quiet, but a real 44px thumb target above the stretched
   link. The flow-form-select-wrap draws the system chevron at 16px from the
   right edge; the select's own padding keeps the words clear of it. */
.work-board-card__move {
  position: relative;
  z-index: 2;
  display: block;
  margin: var(--space-2h) 0 0;
}

.work-board-card__move-wrap {
  display: block;
}

.work-board-card__move-select {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: var(--space-1) var(--space-7) var(--space-1) var(--space-2);
  background: var(--n-0);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
}

.work-board-card__move-select:hover {
  border-color: var(--primary-accent);
  background: var(--input-bg-hover);
}

.work-board-card__move-select:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 1px;
}

@media (min-width: 768px) {
  .work-board-card__move-wrap {
    width: fit-content;
    min-width: 148px;
  }
}

/* The small initials disc beside a name — reinforcement, never the only
   sign: the name is always written out next to it. */
.work-board-assignee {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1h);
  max-width: 100%;
}

.work-board-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  background: var(--primary-bg);
  border: 1px solid var(--n-80);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--type-xs-body-size);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.work-board-assignee__name--none {
  font-style: italic;
}

/* Filtered to one status: the surviving column stands alone at a readable
   width instead of a third of the grid. */
.work-board-columns.is-filtered {
  grid-template-columns: minmax(0, 1fr);
  max-width: 680px;
}

/* ---- a task -------------------------------------------------------------- */

.work-board-back {
  margin: var(--space-4) 0 0;
}

.work-board-back a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1h);
  min-height: 44px;
  color: var(--link-active);
  text-underline-offset: 2px;
}

.work-board-back .material-symbols-outlined {
  font-size: 18px;
}

/* The back link already holds the top of the page open. */
.work-board-task-head {
  padding-top: var(--space-2);
}

.work-board-meta {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-3);
}

@media (min-width: 641px) {
  .work-board-meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 640px;
  }
}

.work-board-meta__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1h);
}

.work-board-meta__label {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
  font-weight: var(--font-weight-semibold);
}

.work-board-meta__item .flow-form-select-wrap,
.work-board-meta__item .flow-form-select {
  width: 100%;
}

.work-board-dates {
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
}

.work-board-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-2);
}

.work-board-section-title {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--type-lg-body-size);
  line-height: var(--type-lg-body-line);
  font-weight: var(--font-weight-semibold);
}

/* Free text keeps its paragraph breaks without allowing markup. */
.work-board-details {
  margin: 0 0 var(--space-6);
  white-space: pre-line;
  max-width: 72ch;
}

.work-board-details-empty,
.work-board-notes-empty {
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
}

/* Edit in place: the same field stack the add form uses, capped at form
   width, closed again by Save or Cancel. */
.work-board-edit {
  max-width: var(--max-w-form);
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.work-board-edit .work-board-section-title {
  margin-bottom: var(--space-4);
}

/* ---- images --------------------------------------------------------------- */

.work-board-images-head {
  margin-top: var(--space-6);
}

/* Keyboard focus lands on the hidden file input; the button it lives in
   shows the ring. */
.work-board-upload {
  position: relative;
}

.work-board-upload:focus-within {
  outline: 3px solid var(--focus-outline);
  outline-offset: 1px;
}

.work-board-images {
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.work-board-image {
  max-width: 100%;
}

.work-board-image.is-expanded {
  flex-basis: 100%;
}

.work-board-image__toggle {
  display: block;
  padding: 0;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  background: var(--n-0);
  cursor: zoom-in;
  overflow: hidden;
}

.work-board-image.is-expanded .work-board-image__toggle {
  cursor: zoom-out;
}

.work-board-image__toggle:hover {
  border-color: var(--primary-accent);
}

.work-board-image__toggle:focus-visible {
  outline: 3px solid var(--focus-outline);
  outline-offset: 1px;
}

.work-board-image__img {
  display: block;
  max-width: 240px;
  max-height: 160px;
  object-fit: cover;
}

.work-board-image.is-expanded .work-board-image__img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
}

.work-board-image__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: var(--type-xs-body-size);
  line-height: var(--type-xs-body-line);
}

.work-board-images-empty {
  margin: 0 0 var(--space-6);
  color: var(--text-secondary);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
}

.work-board-notes-title {
  margin-top: var(--space-6);
  margin-bottom: var(--space-1);
}

.work-board-notes-lead {
  margin: 0 0 var(--space-4);
  color: var(--text-secondary);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
}

.work-board-note-form {
  max-width: var(--max-w-form);
  margin-bottom: var(--space-6);
}

.work-board-note-author {
  margin: 0 0 var(--space-4);
  border: 0;
  padding: 0;
}

.work-board-author-options {
  display: flex;
  gap: var(--space-6);
}

.work-board-note-textarea {
  resize: vertical;
}

.work-board-notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.work-board-note {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}

.work-board-note__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-1);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--type-sm-body-size);
  line-height: var(--type-sm-body-line);
}

.work-board-note__time {
  color: var(--text-secondary);
  font-weight: var(--font-weight-regular);
}

.work-board-note__text {
  margin: 0;
  white-space: pre-line;
  max-width: 72ch;
}

/* ---- the add / edit form -------------------------------------------------- */

.work-board-form {
  max-width: var(--max-w-form);
}

.work-board-form-errors {
  margin-bottom: var(--space-4);
}

@media (min-width: 641px) {
  .work-board-field-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

.work-board-details-textarea {
  resize: vertical;
}

.work-board-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}