/* The "Now" workspace.

   Rows are 64px because they are read and hit while walking, and the name is
   19px because a name is the thing being looked for. On a wide screen the
   cards flow into columns rather than stretching: a stretched card is a phone
   card that got bigger, which is the failure mode this whole exercise exists
   to avoid. */

.day-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.day-head h1 { margin: 0; }

/* Two task views, one control. Segmented rather than tabs so it reads as a
   choice between equals. */
.view-switch {
  display: inline-flex; background: var(--c-surface-2);
  border-radius: var(--radius-pill); padding: 3px;
}
.view-switch-item {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--t-body); font-weight: 700;
  color: var(--c-ink-muted); text-decoration: none;
}
.view-switch-item.is-current { background: var(--c-surface); color: var(--c-ink); box-shadow: var(--shadow); }

.day-chips {
  display: flex; gap: var(--space-2); overflow-x: auto;
  margin-bottom: var(--space-4); padding-bottom: var(--space-1);
  scrollbar-width: thin;
}
.day-chip {
  flex: 0 0 auto; display: grid; place-items: center; gap: 0;
  min-width: 4.5rem; min-height: var(--tap-lg);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-surface); color: var(--c-ink); text-decoration: none;
}
.day-chip-dow { font-size: var(--t-meta); color: var(--c-ink-muted); text-transform: uppercase; font-weight: 700; }
.day-chip-date { font-size: var(--t-body); font-weight: 700; }
.day-chip.is-current { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-surface); }
.day-chip.is-current .day-chip-dow { color: var(--c-surface); }

.now-note {
  background: var(--c-warn-soft); color: var(--c-warn);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  font-size: var(--t-body); font-weight: 700; margin-bottom: var(--space-4);
}

.now-card h2 {
  display: flex; align-items: baseline; gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.now-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--c-ink); color: var(--c-surface);
  font-size: var(--t-body); font-weight: 700;
  font-family: var(--font-numeric); font-variant-numeric: tabular-nums;
}

/* ---- A resource and its actions ---------------------------------------- */
.res-row { border-top: 1px solid var(--c-line); }
.res-row:first-of-type { border-top: 0; }
.res-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: 64px; padding: var(--space-2) 0;
  cursor: pointer; list-style: none;
}
.res-summary::-webkit-details-marker { display: none; }
.res-summary::after {
  content: "›"; margin-left: auto; font-size: var(--t-section);
  color: var(--c-ink-muted); transition: transform var(--brand-transition);
}
.res-row[open] .res-summary::after { transform: rotate(90deg); }
.res-name { font-size: var(--t-card); font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.res-summary:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.res-actions { padding: 0 0 var(--space-4); display: grid; gap: var(--space-3); }
.quick-block { display: grid; gap: var(--space-2); margin: 0; }
.quick-block p { margin: 0; }
.quick-block-lengths { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.quick-block-lengths .button { flex: 1 1 5rem; }

/* ---- A meeting --------------------------------------------------------- */
.meeting-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--space-3);
  min-height: 64px; padding: var(--space-2) 0;
  border-top: 1px solid var(--c-line);
  color: inherit; text-decoration: none;
}
.meeting-row:first-of-type { border-top: 0; }
.meeting-row:hover { background: var(--c-surface-2); }
.meeting-time { font-size: var(--t-card); font-weight: 700; }
.meeting-who { display: grid; min-width: 0; }
.meeting-who strong { font-size: var(--t-body); overflow-wrap: anywhere; }
.meeting-who small { font-size: var(--t-meta); color: var(--c-ink-muted); overflow-wrap: anywhere; }
.meeting-table {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap-sm); padding: 0 var(--space-3);
  border-radius: var(--radius-sm); background: var(--c-booked-soft); color: var(--c-booked);
  font-size: var(--t-body); font-weight: 700;
}

/* ---- Wider screens ----------------------------------------------------
   Columns, not stretched cards. Two at tablet width, three once there is
   room for a planning-sized workspace. */
@media (min-width: 48rem) {
  .now-card { break-inside: avoid; }
  .operations-main:has(.now-card) { column-gap: var(--space-4); }
  .now-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
}
@media (min-width: 75rem) {
  .now-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- One person's own day ---------------------------------------------
   The table number is the largest thing on the card, because it is the only
   part somebody acts on: everything else is context for a meeting they are
   already walking to. */
.emp-meeting {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3);
  align-items: baseline; padding: var(--space-2) 0;
  border-top: 1px solid var(--c-line);
}
.emp-meeting:first-of-type { border-top: 0; }
.emp-when { margin: 0; font-size: var(--t-card); font-weight: 700; }
.emp-table {
  grid-row: 1 / span 2; grid-column: 2; align-self: center; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-lg); min-height: var(--tap);
  padding: 0 var(--space-3); border-radius: var(--radius);
  background: var(--c-booked-soft); color: var(--c-booked);
  font-size: var(--t-section); font-weight: 700;
}
.emp-who { margin: 0; font-size: var(--t-body); overflow-wrap: anywhere; }
.emp-what { margin: 0; grid-column: 1 / -1; }
.emp-meeting.is-big .emp-when { font-size: var(--t-page); }
.emp-meeting.is-big .emp-table { font-size: var(--t-page); min-height: var(--tap-lg); }
.emp-meeting.is-big .emp-who { font-size: var(--t-card); font-weight: 700; }

/* An offer is a decision with a deadline, so it sits above the day and its
   action is full width. */
.offer-card { border-left: 5px solid var(--c-warn); }
.offer { padding: var(--space-2) 0; border-top: 1px solid var(--c-line); }
.offer:first-of-type { border-top: 0; }
.offer-when { margin: 0; font-size: var(--t-card); font-weight: 700; }
.offer-actions { margin-top: var(--space-3); }

/* ---- Agent's own meetings ---------------------------------------------- */
.agent-lead { margin-bottom: var(--space-5); }
.agent-meeting {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3);
  align-items: baseline; padding: var(--space-3) 0;
  border-top: 1px solid var(--c-line);
}
.agent-meeting:first-of-type { border-top: 0; }
.agent-meeting.is-next { background: var(--c-accent-soft); border-radius: var(--radius); padding-inline: var(--space-3); }
.agent-when { margin: 0; font-size: var(--t-card); font-weight: 700; }
.agent-who { margin: 0; font-size: var(--t-body); font-weight: 700; overflow-wrap: anywhere; }
.agent-what { margin: 0; grid-column: 2; }
.agent-actions { grid-column: 1 / -1; margin-top: var(--space-2); }

@media (min-width: 48rem) {
  .emp-meeting, .agent-meeting { grid-template-columns: 9rem 1fr auto; }
  .emp-what, .agent-what { grid-column: 2; }
  .agent-actions { grid-column: 3; margin-top: 0; }
}

.offer-decision { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }