/* The Inbox: three disclosure sections in the Overview's shape, each a list
   of grey cards on the white page. The card itself is styled beside its
   module; this sheet carries the page, the message card, and the details
   vocabulary a card's long form is built from. */
.universe-app-root .inbox-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.universe-app-root .inbox-sections .overview-section[hidden] {
  display: none;
}
.universe-app-root .inbox-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--yoke-border);
  border-radius: 10px;
  background: var(--yoke-surface);
}
.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: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.universe-app-root .inbox-message-meta {
  margin-top: 3px;
  color: var(--yoke-muted);
  font-size: 12px;
}
.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;
}

/* The details vocabulary: why asked, what a yes does, and the titled blocks
   a release's contents or a branch's diff are listed in. */
.universe-app-root .gate-what-label {
  display: block;
  color: var(--yoke-muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.universe-app-root :is(.gate-what-copy, .gate-verdict-reason) {
  color: var(--yoke-ink);
  font-size: 12px;
  line-height: 1.5;
}
.universe-app-root .gate-what {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.universe-app-root .gate-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid var(--yoke-border);
  border-radius: 8px;
  background: var(--yoke-bg);
}
.universe-app-root .gate-details[open] > .gate-block + .gate-block {
  margin-top: 8px;
}
.universe-app-root .gate-block-head {
  color: var(--yoke-ink);
  font-size: 11.5px;
  font-weight: 600;
}
.universe-app-root .gate-block-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 8px;
}
.universe-app-root .gate-block-code {
  flex: 0 0 auto;
  color: var(--yoke-ink);
  font-family: var(--yoke-font-mono);
  font-size: 11px;
}
.universe-app-root :is(.gate-block-copy, .gate-block-more) {
  color: var(--yoke-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.universe-app-root .gate-block-copy {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.universe-app-root .gate-verdict-reason {
  font-style: italic;
}
.universe-app-root .gate-why {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.universe-app-root .gate-why-copy {
  margin: 0;
  color: var(--yoke-muted);
  font-size: 11.5px;
  line-height: 1.5;
}
.universe-app-root .gate-why-copy:first-of-type {
  color: var(--yoke-ink);
}