/* ============================================================================
   DIRECTIVES - the downward rail.

   One card per instruction, one row per task. The rows are the point of the
   screen, so the card chrome stays quiet and priority is carried on a single
   edge rather than by colouring the whole card: forty urgent cards in a list
   where everything is red is a list where nothing is urgent.
   ========================================================================= */

.dv-board { display: grid; gap: var(--s-5); }

.dv-card { border-left: 3px solid var(--c-border); }
.dv-card[data-priority="urgent"] { border-left-color: var(--c-danger); }
.dv-card[data-priority="high"]   { border-left-color: var(--c-warn); }

.dv-head { display: flex; align-items: flex-start; gap: var(--s-4); }
.dv-title {
  font-family: var(--t-display);
  font-size: var(--t-lg);
  font-weight: var(--t-bold);
  letter-spacing: var(--t-track-tight);
  line-height: var(--t-snug);
}
.dv-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
  font-size: var(--t-sm);
}
.dv-body { margin-top: var(--s-3); color: var(--c-text-2); max-width: 70ch; }

/* The recording is evidence, so it stays reachable and never in the way. A
   details element is the whole of that: shut by default, one click open, and
   it keeps working with no javascript at all. */
.dv-transcript { margin-top: var(--s-3); }
.dv-transcript summary {
  cursor: pointer; color: var(--c-text-2);
  font-size: var(--t-sm); padding: var(--s-2) 0;
}
.dv-transcript p {
  margin-top: var(--s-2); padding: var(--s-4);
  border-left: 2px solid var(--c-border);
  background: var(--c-surface-2);
  border-radius: var(--r-sm);
  color: var(--c-text-2);
  font-size: var(--t-sm); line-height: var(--t-body);
  max-width: 72ch;
}

.dv-actions { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-1); }
.dv-action {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  min-height: 44px;
}
.dv-action:hover { background: var(--c-hover); }
/* A task nobody holds yet is not work, it is a proposal, and it should not
   read with the same weight as something somebody has actually been given. */
.dv-action[data-state="proposed"] { opacity: 0.86; }
.dv-action[data-state="done"] .dv-action-title {
  text-decoration: line-through;
  color: var(--c-text-3);
}
.dv-action-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dv-action-title { line-height: var(--t-snug); }
/* --c-text-2, not the .faint utility's --c-text-3. At this size the quietest
   tier measures 4.27:1 against the 4.5:1 floor, and these two carry the
   information the row is actually about: who holds the task, and how long it
   is meant to take. */
.dv-suggest, .dv-who {
  display: inline-flex; align-items: center; gap: var(--s-2);
  white-space: nowrap; font-size: var(--t-sm);
  color: var(--c-text-2);
}

/* ------------------------------------------------------------- the composer */

.dv-compose-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.dv-status { font-size: var(--t-sm); min-height: 1.2em; }

.dv-draft { display: grid; gap: var(--s-2); }
/* Title takes the slack, minutes are as wide as four digits need, and the
   delete button is last so the eye never travels back left to find the row it
   is already on. */
.dv-draft-row {
  display: grid;
  grid-template-columns: 1fr 88px auto;
  gap: var(--s-2);
  align-items: center;
}
.dv-draft-title, .dv-draft-min { min-height: 40px; }
.dv-draft-min { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .dv-head { flex-direction: column; }
  .dv-action { flex-wrap: wrap; }
}