/* The Inbox: one column of sections, each a list of cards on the page. The
   card itself is styled beside its module; this sheet carries the page, the
   message card, and the two-column anatomy every decision card takes here.

   One column, not two: a decision is read, not compared, and a pair of them
   side by side halved the width the thing being decided had to explain
   itself in. */
.universe-app-root .inbox-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  width: 100%;
  max-width: 1100px;
}
.universe-app-root .inbox-sections > .band-section {
  min-width: 0;
  margin: 0;
}

/* A decision card is two regions: the ask on the left, what it rests on and
   how to settle it on the right. The side column is a fixed width because
   what sits in it — thumbnails, reviewer requirements, buttons — has a
   natural size, while the ask takes whatever is left. */
.universe-app-root .inbox-sections .review-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 10px 20px;
  padding: 18px 20px;
  box-shadow: none;
}
.universe-app-root .inbox-sections .review-card > * {
  min-width: 0;
  grid-column: 1 / -1;
}
.universe-app-root .inbox-sections .review-main {
  grid-column: 1;
  min-width: 0;
}
.universe-app-root .inbox-sections .review-side {
  display: flex;
  grid-column: 2;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.universe-app-root .inbox-sections .review-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.025em;
}
.universe-app-root .inbox-sections .review-kind {
  margin-bottom: 10px;
  color: var(--yoke-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}
.universe-app-root .inbox-sections .review-context {
  margin-top: 10px;
  color: var(--yoke-muted);
  font-size: 12px;
  line-height: 1.4;
}
.universe-app-root .inbox-sections .review-effect,
.universe-app-root .inbox-sections .review-question {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}
/* The outcome and reason read as prose without diagnostic field labels. */
.universe-app-root .inbox-sections .review-qa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
  font-size: 14px;
  line-height: 1.4;
}
.universe-app-root .inbox-sections .review-qa p {
  margin: 0;
  font-size: 14px;
}
/* Compact tiles use the shared cropped frame; the full-size viewer is one
   press away. */
.universe-app-root .inbox-sections .review-evidence {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
}
/* Two tiles sit across the 260px column. */
.universe-app-root .inbox-sections .review-shot {
  width: 122px;
  flex: 0 1 122px;
}
.universe-app-root .inbox-sections .review-shot-caption {
  padding: 6px 0;
  font-size: 12px;
}
.universe-app-root .inbox-sections .review-foot {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.universe-app-root .inbox-sections .review-who {
  width: 100%;
  color: var(--yoke-muted);
  font-weight: 400;
}
/* Carried work is a divider under the ask, not a second panel inside the
   card: a nested white box inside a card reads as a card inside a card. */
.universe-app-root .inbox-sections .approval-carried {
  margin-top: 4px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--yoke-border);
  border-radius: 0;
  background: transparent;
}
.universe-app-root .release-member-rest[hidden] {
  display: none;
}
.universe-app-root .release-member-rest {
  display: grid;
  gap: 8px;
}

@media (max-width: 850px) {
  .universe-app-root .inbox-sections .review-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .universe-app-root .inbox-sections .review-main,
  .universe-app-root .inbox-sections .review-side {
    grid-column: 1;
  }
  .universe-app-root .inbox-sections .review-evidence,
  .universe-app-root .inbox-sections .review-foot {
    justify-content: flex-start;
    text-align: left;
  }
}
.universe-app-root .inbox-sections .band-section[hidden] {
  display: none;
}
/* Message on the left, who sent it on the right: the attribution keeps a
   column of its own so a long body wraps inside its own half instead of
   pushing the sender down the card. */
.universe-app-root .inbox-message {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 24%);
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--yoke-border);
  border-radius: 12px;
  background: var(--yoke-surface);
}
.universe-app-root .inbox-message-sender {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.universe-app-root .inbox-message + .inbox-message {
  margin-top: 10px;
}
.universe-app-root .inbox-message-main {
  min-width: 0;
  flex: 1 1 auto;
}
.universe-app-root .inbox-message-body {
  color: var(--yoke-ink);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.universe-app-root .inbox-message-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  color: var(--yoke-muted);
  font-size: 12px;
  font-weight: 500;
}

/* At phone width the two columns stack; attribution starts at the left
   edge like every other wrapped fact. */
@media (max-width: 440px) {
  .universe-app-root .inbox-message {
    grid-template-columns: minmax(0, 1fr);
  }
}
.universe-app-root .inbox-read {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--yoke-accent-weak);
  color: var(--yoke-accent);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.universe-app-root .inbox-read:disabled {
  cursor: default;
  opacity: .45;
}
.universe-app-root .inbox-empty {
  margin: 0;
  padding: 11px 13px;
  border: 1px dashed var(--yoke-border);
  border-radius: var(--yoke-radius);
  color: var(--yoke-muted);
  font-size: 12px;
}
.universe-app-root .inbox-row-error {
  margin: 0;
  font-size: 11.5px;
}

/* An informational notice reads quieter than a message someone sent: it
   leads with which of the two delivery events it is, and its meta line says
   it reports rather than naming a sender to answer. */
.universe-app-root .inbox-message.is-notice {
  border-left: 2px solid var(--yoke-border);
}
.universe-app-root .inbox-notice-kind {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--yoke-muted);
  margin-bottom: 3px;
}