/* --- Today ---------------------------------------------------------------- */

/* The briefing spans the width because it is the one thing on the page that is
   read rather than scanned; the two columns below it are the day and what the
   day is carrying. */

.today {
  display: flex;
  flex-direction: column;
  gap: var(--shell);
}

.td-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: var(--shell);
  align-items: start;
}

.td-side {
  display: flex;
  flex-direction: column;
  gap: var(--shell);
  min-width: 0;
}

/* --- the briefing --------------------------------------------------------- */

/* The header is the plain one every other card has. It was tinted for a while,
   to mark the card nobody here wrote — but a colored bar at the top of the page
   is the loudest thing on it, and what is in the card was never the part that
   needed pointing at. */

/* One column, full width of the card, no measure. Columns were the answer to a
   card that was allowed to be far wider than its text; capping the board at
   1440 answered it at the source, and two columns in a card that size means
   reading down and back up for four sentences. */
.td-brief-body {
  padding: 16px 18px 20px;
}

/* The headline is about the whole message, so it sits above both columns
   rather than becoming the top of the first one. */
.td-brief-head {
  margin-bottom: 12px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: balance;
}

/* The briefing is rendered markdown now, so this sets the size and everything
   below it in base.css is relative to that. */
.td-brief-body { font-size: 13.5px; }

/* A briefing from an earlier day is still worth showing — it says the
   assistant stopped, which is information — but it is not this morning's, and
   the header carries the date that proves it. */
.td-brief.is-stale .td-brief-body { opacity: .6; }

.td-brief-none {
  padding: 2px 0 4px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--faint);
}

/* --- the lists ------------------------------------------------------------ */

.td-list { padding: 4px 0 8px; }

/* Capped, and only in the narrow column: a long record of a good day may not
   push the two cards under it off the screen. The main column is the day
   itself and is allowed to run as long as the day does. */
.td-side .td-list {
  max-height: 42vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.td-list .empty { padding: 20px 16px; }

.td-task {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 7px 14px;
  margin: 0 6px;
  border-radius: var(--r-md);
}

.td-task:hover { background: var(--hover); }
.td-task:has(input:focus-visible) { background: var(--hover); }

/* The row is top-aligned, so the box lines up with the first line of the title
   rather than with the block as a whole. */
.td-task .tick { margin-top: 3px; }

.td-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.td-title {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}

.td-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.td-when {
  font-size: 11px;
  color: var(--muted);
}

.td-due {
  font-size: 11px;
  color: var(--muted);
}

.td-due.is-late { color: var(--danger); font-weight: 500; }



.td-task.done .td-title {
  color: var(--read);
  text-decoration: line-through;
  text-decoration-color: var(--faint);
}

.td-task.done .chip {
  color: var(--read);
  background: var(--read-bg);
}

.td-task.done .td-when { color: var(--faint); }

/* Only when there is something in it. An empty card headed in red would be
   alarming about nothing. */
.td-card.is-alert .card-head .head-ico { color: var(--danger); }

.td-card.is-alert .card-head .tally {
  color: var(--danger);
  border-color: var(--danger);
  background: var(--danger-bg);
}

@media (max-width: 980px) {
  .td-cols { grid-template-columns: minmax(0, 1fr); }
  .td-side .td-list { max-height: none; }
}