/* ==========================================================================
   today.css — the dashboard as her morning, not as a stack of cards.

   Layout only, in the palette the rest of the app already uses. Two columns
   on a wide screen: the run down the left, the state of the operation on the
   right. Below 1100px it becomes one column, run first — the right rail is
   context, and context waits.
   ========================================================================== */

.today {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  gap: var(--space-5);
  /* Both columns take the height of the taller one, so the page ends on one
     line rather than on two that are nearly - and therefore visibly - level. */
  align-items: stretch;
}

.today__run,
.today__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* The shorter column's last block takes up the difference. */
.today__run > :last-child,
.today__rail > :last-child { flex: 1 1 auto; }

/* --- The band across the top: the one sentence she reads first ------------ */

.today-band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.today-band__figure {
  font-family: var(--font-mono);
  font-size: 40px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.today-band__of { color: var(--color-text-faint); font-size: var(--text-sm); }
.today-band__text { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 52ch; }
.today-band__spacer { flex: 1 1 auto; }

/* --- Channel files: four tiles, not four full-width rows ------------------ */

.file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.file-tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon head"
    "icon count"
    "note note"
    "act  act";
  column-gap: var(--space-3);
  row-gap: 2px;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Nothing to send is a state, not a failure: say so quietly. */
.file-tile--empty { background: var(--color-surface-sunken); }

.file-tile__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.file-tile__head { grid-area: head; display: flex; align-items: baseline; gap: var(--space-2); }
.file-tile__name { font-weight: 600; font-size: var(--text-sm); }
.file-tile__tool { color: var(--color-text-faint); font-size: var(--text-xs); }

.file-tile__count {
  grid-area: count;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.file-tile__n {
  font-family: var(--font-mono);
  font-size: 26px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.file-tile__unit { font-size: var(--text-xs); color: var(--color-text-muted); }

.file-tile__note {
  grid-area: note;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  min-height: 1em;
}

.file-tile__act {
  grid-area: act;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* --- Replies: the most important rows in the app -------------------------- */

.reply-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
}

.reply-row:first-child { border-top: 0; }

.reply-row__who { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.reply-row__name { font-weight: 600; }

.reply-row__said {
  margin-top: 2px;
  color: var(--color-text);
  font-size: var(--text-sm);
  /* A quoted line, held to a readable measure rather than the card width. */
  max-width: 68ch;
}

/* When it arrived belongs next to who it is, not on a line of its own. */
.reply-row__when { font-size: var(--text-xs); color: var(--color-text-faint); }
.reply-row__act { display: flex; align-items: center; gap: var(--space-2); }

/* --- The right rail ------------------------------------------------------- */

.rail-block {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.rail-block__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.rail-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

.rail-figure__n {
  font-family: var(--font-mono);
  font-size: 24px;
  line-height: 1.1;
  font-weight: 600;
}

.rail-figure__label { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.rail-figure--muted .rail-figure__n { color: var(--color-text-faint); }

/* One bar, four parts: the whole contact position in a single line. */
.rail-bar {
  display: flex;
  height: 6px;
  margin-top: var(--space-4);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-sunken);
}

.rail-bar__part { height: 100%; }
.rail-bar__part--eligible { background: var(--color-primary); }
.rail-bar__part--locked { background: var(--color-border-strong); }
.rail-bar__part--held { background: var(--color-info); opacity: 0.55; }
.rail-bar__part--stopped { background: var(--color-danger); opacity: 0.55; }

.rail-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.rail-legend__key { display: inline-flex; align-items: center; gap: 6px; }
.rail-legend__dot { width: 8px; height: 8px; border-radius: 50%; }

/* The feed at the foot of the rail. A dot per kind, because "touched" and
   "replied" mean opposite things and the eye should not have to read to
   tell them apart. */
.rail-event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.rail-event:first-of-type { border-top: 0; }
.rail-event__dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--color-border-strong); }
.rail-event__dot--reply { background: var(--color-primary); }
.rail-event__dot--touch { background: var(--color-info); }
.rail-event__what { font-size: var(--text-sm); line-height: 1.35; }
.rail-event__when { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 1px; }

/* One waiting queue per line: the number first, because the number is the
   question she is asking. */
.rail-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
}

.rail-line:first-of-type { border-top: 0; }
.rail-line:hover .rail-line__label { color: var(--color-text); }
.rail-line__n { font-family: var(--font-mono); font-size: 18px; font-weight: 600; min-width: 2ch; }
.rail-line__n--zero { color: var(--color-text-faint); }
.rail-line__label { font-size: var(--text-sm); color: var(--color-text-muted); }

/* A badge in a grid cell stretches to the column; hold it to its own width. */
.rail-stage > .badge { justify-self: start; }

/* Stage list: only the rungs that hold somebody. */
.rail-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.rail-stage:first-of-type { border-top: 0; }
.rail-stage__n { font-family: var(--font-mono); font-weight: 600; }
.rail-stage__rest { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }

@media (max-width: 1100px) {
  .today { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .file-grid { grid-template-columns: minmax(0, 1fr); }
  .reply-row { grid-template-columns: auto minmax(0, 1fr); }
  .reply-row__act { grid-column: 2; }
}