/* today screen styles. Brand tokens and base components live in /styles.css; follow ../DESIGN.md.
   Only tokens here: no new colors. Spacing on the 4/8px scale (--space-*). */

#today-view .td { display: grid; gap: var(--space-4); }
#today-view .td > .banner { margin: 0; }

/* Five numbers: UI.metric tiles (number, label, sub: the landing stat card, as on every screen).
   The gold edge (.attention) marks the single most urgent tile; other warn/danger tiles carry a
   small corner dot, explained by their sub line. The edged tile needs no dot as well. */
#today-view .td-metrics { margin: 0; gap: var(--space-3); }
#today-view .metric-tile { position: relative; display: flex; flex-direction: column; padding: var(--space-4) var(--space-5); }
#today-view .metric-tile.attention { padding-left: calc(var(--space-5) - 3px); }
#today-view .metric-tile .metric-sub { line-height: 1.45; }
#today-view .metric-tile[data-tone]::after { content: none; position: absolute; top: var(--space-4); right: var(--space-4); width: 8px; height: 8px; border-radius: 50%; box-shadow: var(--status-dot-ring); }
#today-view .metric-tile[data-tone=warn]::after { content: ''; background: var(--status-warn-dot); }
#today-view .metric-tile[data-tone=danger]::after { content: ''; background: var(--status-danger-dot); }
#today-view .metric-tile.attention::after { content: none; }

/* This week: a quiet strip, not a card. */
#today-view .td-week { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); margin: 0; padding: var(--space-3) var(--space-5); background: var(--surface-sunken); border: 1px solid var(--border-hair); border-radius: var(--radius-md); box-shadow: none; font-size: var(--fs-small); color: var(--text-2); }
#today-view .td-week .td-week-label { font: 700 var(--fs-micro)/1.3 var(--font-heading); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--accent); }
#today-view .td-week b { margin-right: var(--space-1); font: 700 var(--fs-h3)/1 var(--font-heading); color: var(--text); font-variant-numeric: tabular-nums; }
#today-view .td-week .td-week-note { margin-left: auto; font-size: var(--fs-small); color: var(--text-2); }

/* Queues: three tidy cards with list rows. */
#today-view .td-queues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
#today-view .td-queue { margin: 0; display: flex; flex-direction: column; padding: var(--space-5) var(--space-6); }
#today-view .td-queue .panel-title { margin-bottom: var(--space-3); }
#today-view .td-note { margin: calc(var(--space-2) * -1) 0 var(--space-2); font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }
#today-view .td-list { list-style: none; margin: 0; padding: 0; }
#today-view .td-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border-hair); font-size: var(--fs-body); line-height: 1.45; color: var(--text); }
#today-view .td-row:first-child { border-top: 0; }
#today-view .td-row-text { min-width: 0; overflow-wrap: anywhere; }
#today-view .td-row-text small { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--text-2); }
#today-view .td-row button { flex: none; }

/* Mailboxes: compact grid of white pills, problems first. */
#today-view .td-mailboxes { margin: 0; padding: var(--space-5) var(--space-6); }
#today-view .td-mailboxes .panel-title { margin-bottom: var(--space-4); }
#today-view .td-count { margin-left: var(--space-2); font: 500 var(--fs-small)/1 var(--font-body); color: var(--text-2); font-variant-numeric: tabular-nums; }
#today-view .td-mbx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-2); }
#today-view .td-mbx { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; padding: 6px var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); }
#today-view .td-mbx-addr { display: flex; align-items: baseline; min-width: 0; font-size: var(--fs-small); }
#today-view .td-mbx .pill { flex: 0 1 auto; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: transparent; color: var(--text); font-weight: 500; font-size: var(--fs-small); }
#today-view .td-mbx-domain { flex: 0 10 auto; min-width: 2.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
#today-view .td-mbx .pill::before { display: inline-block; margin-right: var(--space-2); vertical-align: 0; }
#today-view .td-mbx-state { flex: none; font-size: var(--fs-caption); color: var(--text-2); }
#today-view .td-mailboxes .empty-state { padding: var(--space-6) var(--space-4); }

@media (max-width: 1150px) {
  #today-view .td-queues { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #today-view .td-queues > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  #today-view .td-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #today-view .td-metrics > :first-child { grid-column: 1 / -1; }
  #today-view .td-queues { grid-template-columns: 1fr; }
  #today-view .td-queue, #today-view .td-mailboxes { padding: var(--space-4); }
  #today-view .td-week { gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); }
  #today-view .td-week .td-week-note { margin-left: 0; flex-basis: 100%; }
  #today-view .td-mbx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  #today-view .td-metrics { grid-template-columns: 1fr; }
}