/* =============== BOARD =============== */

.board {
  display: grid;
  grid-template-columns:
    var(--space-medium)
    repeat(5, minmax(0, 1fr))
    var(--space-medium);
  direction: rtl;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  transition: opacity 500ms ease-in;
}

.board.is-refreshing {
  opacity: 0;
  transition: opacity 250ms ease-out;
}

/* .board-edge occupies var(--space-medium) side spacing */

.board-edge,
.column {
  direction: ltr;
}

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

.column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.column-header {
  display: flex;
  align-items: center;
  margin: 0;
  padding: var(--space-large);
  padding-bottom: var(--space-medium);
  font-size: var(--header-size);
  font-weight: bold;
  overflow-wrap: anywhere;
}

.column-header.is-ideas    { color: var(--palette-accent-4); }
.column-header.is-backlog  { color: var(--palette-accent-3); }
.column-header.is-todo     { color: var(--palette-accent-2); }
.column-header.is-progress { color: var(--palette-accent-1); }
.column-header.is-done     { color: var(--palette-accent-0); }

.column-scroll {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
  min-height: 0;
  padding: var(--space-medium);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.column-add {
  padding: var(--space-medium);
  padding-bottom: var(--space-large);
}

/* Removes vertical padding from an empty scroll area */
.column-scroll:empty {
  padding: 0 var(--space-medium);
}

/* --------------- card --------------- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: var(--space-medium);
  /* Keeps an empty card at least as tall as the close button */
  min-height: calc(var(--control-size) * var(--line-height) + var(--space-small) * 2);
  padding: var(--space-medium);
  background-color: var(--card-bg);
  border-radius: var(--radius-card);
  outline: var(--outline-size) solid transparent;
  outline-offset: var(--outline-size);
  transition: outline-color 250ms ease;
}

.card-title,
.card-body {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
}

.card-title {
  color: var(--text-primary);
  font-size: var(--title-size);
  font-weight: bold;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.card-body {
  color: var(--text-muted);
  font-size: var(--body-size);
  -webkit-line-clamp: 8;
  line-clamp: 8;
}

/* Shows placeholders in empty fields */
.card-title:empty::before { content: "Add title";       color: var(--text-disabled); }
.card-body:empty::before  { content: "Add description"; color: var(--text-disabled); }

/* Hides empty fields outside edit mode */
.card:not(.is-editing) .card-title:empty,
.card:not(.is-editing) .card-body:empty {
  display: none;
}

/* Highlights the selected card in edit mode */
.card.is-editing {
  outline-color: var(--outline-selected);
}

/* Expands card fields in edit mode */
.card.is-editing .card-title,
.card.is-editing .card-body {
  display: block;
  overflow: visible;
  cursor: text;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

/* Removes browser outline from editable fields */
.card.is-editing .card-title:focus,
.card.is-editing .card-body:focus {
  outline: 0;
}

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

.card-button-close {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--icon-quiet);
  opacity: 0;
}

.button-add {
  width: 100%;
}

.card:hover .card-button-close {
  opacity: 1;
}

/* Hides the close button while editing or typing */
.board.has-editing-card .card:not(.is-editing) .card-button-close,
.card.is-close-button-hidden .card-button-close {
  opacity: 0;
  pointer-events: none;
}

/* --------------- placeholder --------------- */

.placeholder-card {
  padding: var(--space-large);
  background-color: var(--placeholder-bg);
  border-radius: var(--radius-card);
}