/* ===========================================
   Control plane: the Inbox, Home's NEEDS YOU line and the nav badge (M1-08)
   Rendered inside today's layout; tokens from base/variables.css.
   =========================================== */

/* Header: title, then the Mine/All and kind filters. */

.page-header.inbox-page__header {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.inbox-page__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.inbox-seg {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}

.inbox-seg__link {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.inbox-seg__link + .inbox-seg__link {
  border-left: 1px solid var(--color-border);
}

.inbox-seg__link:hover,
.inbox-seg__link:focus-visible {
  background: var(--color-surface-hover);
}

/* The current filter: the emphasis text colour keeps AA contrast on the
   tinted surface in both themes (violet text on it falls short in dark),
   and the inset bar marks it without relying on colour alone. */
.inbox-seg__link[aria-current] {
  background: var(--color-primary-surface);
  color: var(--color-text-emphasis);
  font-weight: var(--font-semibold);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.inbox-page__note {
  margin-bottom: var(--spacing-md);
}

/* The list beside the selected item on wide screens, above it otherwise. */

.inbox-page__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr);
  gap: var(--spacing-lg);
  align-items: start;
}

/* Nothing listed, so no detail pane beside the list. */
.inbox-page__layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.card.inbox-list:hover,
.card.inbox-detail:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.card.inbox-list:hover::before,
.card.inbox-detail:hover::before {
  opacity: 0;
}

.inbox-list {
  min-width: 0;
  overflow: hidden;
}

.inbox-list__empty,
.inbox-list__others {
  padding: var(--spacing-lg) var(--spacing-xl);
}

.inbox-list__others {
  border-top: 1px solid var(--color-border-subtle);
}

.inbox-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inbox-rows li + li .inbox-row {
  border-top: 1px solid var(--color-border-subtle);
}

.inbox-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "kind agent age"
    "title title title"
    "ref ref ref";
  gap: var(--spacing-xs) var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
  color: var(--color-text);
  font-size: var(--text-sm);
  text-decoration: none;
}

.inbox-row > .inbox-kind {
  grid-area: kind;
}

.inbox-row:hover,
.inbox-row:focus-visible {
  background: var(--color-surface-hover);
}

.inbox-row[aria-current="true"] {
  background: var(--color-primary-surface);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.inbox-row__agent,
.inbox-row__ref,
.inbox-row__age,
.inbox-row__assignee {
  color: var(--color-text-muted);
}

.inbox-row__agent {
  grid-area: agent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-row__title {
  grid-area: title;
  font-weight: var(--font-medium);
  overflow-wrap: anywhere;
}

.inbox-row__assignee {
  display: block;
  font-weight: var(--font-normal);
  font-size: var(--text-xs);
}

.inbox-row__ref,
.inbox-row__age {
  font-size: var(--text-xs);
}

.inbox-row__ref {
  grid-area: ref;
  overflow-wrap: anywhere;
}

.inbox-row__age {
  grid-area: age;
  white-space: nowrap;
}

/* Kind badges keep body-coloured text with a coloured dot, so the label has
   AA contrast in both themes and colour is not the only signal. */
.badge.inbox-kind {
  color: var(--color-text);
  justify-self: start;
}

.badge.inbox-kind::before {
  content: "";
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-text-subtle);
}

.badge.inbox-kind--answer::before {
  background: var(--color-primary);
}

.badge.inbox-kind--review::before {
  background: var(--color-success);
}

.badge.inbox-kind--fix::before {
  background: var(--color-warning);
}

/* The selected item */

.inbox-detail {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.inbox-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.inbox-detail__kind {
  margin: 0;
}

.inbox-detail__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text-emphasis);
  overflow-wrap: anywhere;
}

.inbox-facts,
.inbox-not-yet {
  margin: 0;
  padding-left: var(--spacing-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  overflow-wrap: anywhere;
}

.inbox-facts a {
  color: var(--color-primary);
  text-decoration: underline;
}

.inbox-not-yet {
  color: var(--color-text-muted);
}

.inbox-detail__actions {
  align-items: center;
}

.inbox-detail__form {
  display: inline-flex;
  margin: 0;
}

/* A held email or reply (spec PR 2b): its text exactly as received or as it
   would be sent, escaped, wrapped and scrollable, never rendered markup. */

.inbox-email {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.inbox-email__label {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
}

.inbox-email__text {
  margin: 0;
  max-height: 24rem;
  overflow: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.inbox-detail__meta {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

/* Home: NEEDS YOU line and each card's count */

.card.needs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl);
}

.card.needs-bar:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.card.needs-bar:hover::before {
  opacity: 0;
}

.needs-bar__counts {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.control-home__note kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0 var(--spacing-xs);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text);
}

.roster-card__needs {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-left: auto;
  padding: 0 var(--spacing-sm);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  text-decoration: none;
}

.roster-card__needs::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: var(--radius-full);
  background: var(--color-warning);
}

.roster-card__needs:hover,
.roster-card__needs:focus-visible {
  border-color: var(--color-border-hover);
  text-decoration: underline;
}

/* Nav: the Inbox's count of the member's own open items */

.nav__badge {
  margin-left: auto;
  min-width: 1.25rem;
  padding: 0 var(--spacing-xs);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1.25rem;
  text-align: center;
}

/* The g i hint is for keyboards: hidden on phones and touch-only screens. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .control-home__note--shortcut {
    display: none;
  }
}

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

@media (max-width: 640px) {
  .inbox-row {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .inbox-list__empty,
  .inbox-list__others,
  .inbox-detail,
  .card.needs-bar {
    padding: var(--spacing-lg);
  }
}