/* Board, card detail and the detail:track slot. Stream F. Tokens only; every
   control is at least 44 px; status is always a word, never colour alone.
   The bd- classes at the top are shared with talks.css (this file loads first). */

/* --- Shared pieces ------------------------------------------------------------- */
.bd-muted { color: var(--muted); }
.bd-small { font-size: .8rem; }
.bd-tone-urgent { color: var(--urgent); font-weight: 600; }
.bd-tone-soon { color: var(--soon); font-weight: 600; }
.bd-tone-late { color: var(--muted); font-style: italic; }

.bd-pill {
  display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 999px; border: 1px solid transparent;
  font-size: .75rem; font-weight: 600; line-height: 1.6; white-space: nowrap;
  background: var(--st-saved-bg); color: var(--st-saved-fg);
}
.bd-st-drafting { background: var(--st-drafting-bg); color: var(--st-drafting-fg); }
.bd-st-submitted { background: var(--st-submitted-bg); color: var(--st-submitted-fg); }
.bd-st-accepted { background: var(--st-accepted-bg); color: var(--st-accepted-fg); }
.bd-st-delivered { background: var(--st-accepted-bg); color: var(--st-accepted-fg); border-color: var(--st-accepted-fg); }
.bd-st-waitlisted { background: var(--st-waitlisted-bg); color: var(--st-waitlisted-fg); }
.bd-st-rejected { background: var(--st-rejected-bg); color: var(--st-rejected-fg); }
.bd-st-withdrawn { background: var(--st-saved-bg); color: var(--st-saved-fg); border: 1px dashed var(--st-saved-fg); }

.bd-btn-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.bd-btn-link:hover { border-color: var(--accent); }
.bd-back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; justify-self: start; }

.bd-warn {
  margin: 0 0 .6em; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--soon);
  background: var(--st-waitlisted-bg); color: var(--st-waitlisted-fg);
}
.bd-quiet { border-color: transparent; background: transparent; color: var(--muted); }
.bd-danger { border: 2px solid var(--urgent); color: var(--urgent); background: var(--surface); font-weight: 600; }
.bd-danger:hover:not(:disabled) { background: var(--urgent); color: var(--surface); border-color: var(--urgent); }

.bd-check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.bd-check input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--accent); }
.bd-check label { flex: 1; min-width: 0; padding: 10px 0; cursor: pointer; overflow-wrap: anywhere; }
.bd-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.bd-radio input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.bd-radio label { padding: 10px 0; cursor: pointer; }
.bd-fieldset { margin: 0 0 .8em; padding: 8px 12px 4px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.bd-fieldset legend { padding: 0 6px; font-weight: 600; font-size: .9rem; }

/* Dialogs (the Move menu, the talk picker, confirmations). */
.bd-dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bd-moves, .bd-picklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bd-move-opt { width: 100%; display: grid; gap: 2px; text-align: left; padding: 8px 12px; height: auto; min-height: 56px; }
.bd-move-opt:hover { background: var(--accent-tint); }
.bd-pick { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.bd-pick-text { display: grid; gap: 2px; overflow-wrap: anywhere; }
.bd-pick-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bd-version-select { width: auto; max-width: 100%; flex: 1 1 140px; }

/* --- Board ---------------------------------------------------------------------------- */
.bd { display: grid; gap: 12px; min-width: 0; }
.bd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.bd-summary { margin: 0; color: var(--muted); font-size: .9rem; flex: 1 1 240px; }

.bd-switcher, .bd-next { display: none; }
.bd-tabs { display: none; }
.bd-tab, .bd-more { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 8px; color: var(--muted); }
.bd-tab[aria-selected="true"], .bd-more[data-active="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent); }
.bd-count {
  display: inline-block; min-width: 1.6em; padding: 0 6px; border-radius: 999px; text-align: center;
  font: 500 .75rem/1.6 var(--font-mono); background: var(--ground); color: var(--text); border: 1px solid var(--line);
}

.bd-cols { display: grid; gap: 12px; align-items: start; }
.bd-col { background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; min-width: 0; }
.bd-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 4px; }
.bd-col-h { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.bd-col-body { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 56px; }
.bd-col[data-collapsed="true"] .bd-col-body { display: none; }
.bd-empty { padding: 10px 6px; font-size: .85rem; }

.bd-card {
  position: relative; display: grid; gap: 4px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; min-width: 0;
}
/* The one place a card can be picked up (wide screens). */
.bd-grip {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 36px; display: grid; place-items: center;
  border-radius: 6px; color: var(--muted); cursor: grab; user-select: none; -webkit-user-select: none; font-size: 1.1rem; line-height: 1;
}
.bd-grip:hover { background: var(--accent-tint); color: var(--accent); }
.bd-grip:active { cursor: grabbing; }
.bd-card .bd-card-title { padding-right: 30px; }
.bd-card:hover { border-color: var(--accent); }
.bd-card p { margin: 0; }
.bd-card-title { font-weight: 600; color: var(--text); text-decoration: none; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; }
.bd-card-title:hover { color: var(--accent); text-decoration: underline; }
.bd-meta { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.bd-talk { font-size: .88rem; overflow-wrap: anywhere; }
.bd-date { font-size: .85rem; }
.bd-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.bd-card-foot .bd-actions { display: flex; gap: 8px; margin-left: auto; }
.bd-maplink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--accent); font-weight: 600; font-size: .85rem; text-decoration: none;
}
.bd-maplink:hover { text-decoration: underline; }
.bd-dragging { opacity: .45; }
.bd-flash { box-shadow: 0 0 0 3px var(--accent); }

/* While a card is dragged, the columns that cannot take it step back and the ones that can are outlined. */
.bd[data-dragging="true"] .bd-col { opacity: .5; }
.bd[data-dragging="true"] .bd-col.bd-drop-ok { opacity: 1; outline: 2px dashed var(--accent); outline-offset: 2px; }
.bd[data-dragging="true"] .bd-col.bd-drop-hot { background: var(--accent-tint); outline-style: solid; }

@media (min-width: 900px) {
  .bd-collapse { min-height: 44px; }
  /* The six columns are one row, in pipeline order, read left to right. The
     sheet is 600 to 920 px wide, so the row scrolls sideways inside itself
     when it must. Waitlisted and Closed are the narrow ones. */
  .bd-cols {
    grid-template-columns: repeat(4, minmax(168px, 1fr)) repeat(2, minmax(132px, .8fr));
    gap: 8px; overflow-x: auto; padding-bottom: 6px;
  }
  /* A long column scrolls inside itself. */
  .bd-col-body { max-height: min(70vh, 640px); overflow-y: auto; padding: 2px; }
}

@media (max-width: 899px) {
  /* A column switcher in one row: Saved, Drafting, Submitted and Accepted, then
     More (Waitlisted and Closed). One column at a time, no sideways scroll. The
     label sits over its count so five fit a 360 px screen. */
  .bd-switcher { display: flex; gap: 4px; }
  .bd-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex: 1 1 0; min-width: 0; }
  .bd-tab-more { display: none; }
  .bd-more { flex: 0 0 56px; }
  .bd-tab, .bd-more { min-height: 44px; flex-direction: column; gap: 0; padding: 2px 1px; font-size: .75rem; line-height: 1.25; text-align: center; }
  .bd-tab-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The move a card most likely makes next, beside Move. Status and Map share
     the first line of the card's foot; the two buttons stay together after them. */
  .bd-next { display: inline-flex; align-items: center; padding: 0 12px; border-color: var(--accent); color: var(--accent); font-weight: 600; font-size: .9rem; }
  .bd-card-foot .bd-maplink { order: 1; }
  .bd-card-foot .bd-actions { order: 2; }
  .bd-cols { display: block; }
  .bd-col { padding: 4px 8px 8px; }
  .bd-col[data-active="false"] { display: none; }
  .bd-col[data-collapsed="true"] .bd-col-body { display: grid; }
  .bd-collapse { display: none; }
  .bd-col-head { display: none; }
  .bd-grip { display: none; }
  .bd-card .bd-card-title { padding-right: 0; }
}

/* --- Card detail ------------------------------------------------------------------------- */
.cd { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; min-width: 0; }
.cd-head { display: grid; gap: 2px; }
.cd-title { margin: 0; font-size: 1.3rem; overflow-wrap: anywhere; }
.cd-title:focus { outline: none; }
.cd-place { margin: 0; }
.cd-statusrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cd-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cd-card h3 { font-size: .95rem; margin: 0 0 .5em; }
.cd-form { display: grid; gap: 10px; }
.cd-field { display: grid; gap: 4px; min-width: 0; }
.cd-pair { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.cd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.cd input[type="date"], .cd input[type="url"], .tr input[type="date"] {
  min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); width: 100%;
}
.cd textarea, .tr textarea { padding: 10px; resize: vertical; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.cd-checklist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; }
.cd-item { display: grid; grid-template-columns: minmax(0, 1fr) 150px 44px; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); }
.cd-item.done label { color: var(--muted); text-decoration: line-through; }
.cd-del { width: 44px; padding: 0; font-size: 1.2rem; }
.cd-add { display: flex; gap: 8px; }
.cd-add input { flex: 1; min-width: 0; }
.cd-history { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.cd-remove { padding-top: 6px; }

@media (max-width: 599px) {
  .cd-pair, .cd-checks { grid-template-columns: 1fr; }
  .cd-item { grid-template-columns: minmax(0, 1fr) 44px; }
  .cd-item .cd-due { grid-column: 1 / -1; grid-row: 2; }
}

/* --- detail:track slot ---------------------------------------------------------------------- */
.tr { display: grid; gap: 10px; min-width: 0; }
.tr h3 { font-size: .95rem; margin: 6px 0 0; }
.tr .tr-h { margin-top: 0; }
.tr-actions, .tr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-actions button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.tr-block { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.tr-label { font-weight: 600; font-size: .9rem; }
.tr-snoozed { margin: 0; }
.tr-subs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tr-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.tr-sub-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 180px; }
.tr-sub-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-sub-talk { overflow-wrap: anywhere; font-weight: 600; font-size: .9rem; }
.tr-sub-actions { display: flex; align-items: center; gap: 6px; }