/* CIC Mailboxes — surface stylesheet.
 *
 * CONSUMES tokens, owns no palette. shell-tokens.css is the single vocabulary
 * (--ink, --muted, --line, --accent, --surface-subtle, --control-surface,
 * --of-good, --of-bad, --of-paper-soft) and styles.css supplies the page's
 * background and <main> padding. The module contributes ONE accent alias and
 * nothing else.
 *
 * The taskbar's --bar-* tokens are NOT forked here. The bar is styled entirely
 * by shell-bar-skin.css from those tokens; a surface that redefines one makes
 * its own page's bar disagree with every other page's, which is exactly the
 * drift the token file was created to end.
 *
 * Everything below is layout and rhythm for the mailbox cards.
 */

:root { --mb-accent: var(--accent-cic, var(--accent)); }

.mb-main { width: min(78rem, 100%); margin: auto; }

.mb-heading h1 { margin: .15rem 0 .35rem; font-size: clamp(1.4rem, 3.4vw, 2.2rem); line-height: 1.1; }
.mb-heading .lede { max-width: 58rem; margin: 0; color: var(--muted); line-height: 1.55; }

/* The trust boundary. Deliberately given the loudest border on the page and
   placed ABOVE the addresses: a reader who copies an address must have passed
   this on the way. */
.mb-trust {
  margin: 1.1rem 0 .9rem;
  padding: .85rem 1rem;
  border: 1px solid var(--of-bad);
  border-inline-start: .3rem solid var(--of-bad);
  border-radius: .3rem;
  background: var(--surface-subtle);
}
.mb-trust h2 { margin: 0 0 .4rem; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.mb-trust p { margin: 0 0 .5rem; line-height: 1.5; font-size: .84rem; }
.mb-trust p:last-child { margin-bottom: 0; }
.mb-trust code { font-size: .76rem; }
.mb-trust-scope { color: var(--muted); }

.mb-origin { margin: 0 0 1rem; color: var(--muted); font-size: .78rem; }
.mb-origin code { color: var(--ink); }

.mb-list { display: grid; gap: 1rem; }
.mb-loading, .mb-error { color: var(--muted); }
.mb-error { color: var(--of-bad); }

.mb-card {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: .35rem;
  background: var(--surface-subtle);
}
.mb-card-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .75rem;
  margin-bottom: .7rem;
}
/* A flex item defaults to min-width:auto, so it refuses to shrink below its
 * content and pushes the card wider than the viewport. Measured at 390px:
 * the card was 530 wide, overflowing the document by 171px, with .mb-titles
 * min-width 14rem = 224px and the URL unable to give. The min-width is a
 * layout PREFERENCE for wide screens, so it is expressed as a basis that can
 * still shrink rather than a floor that cannot. */
.mb-titles { flex: 1 1 14rem; min-width: 0; }
.mb-kicker {
  margin: 0; color: var(--mb-accent);
  font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.mb-card h2 { margin: .05rem 0 .2rem; font-size: 1.15rem; }
.mb-subtitle { margin: 0; color: var(--muted); font-size: .82rem; }

/* --- live status -----------------------------------------------------------
   "answering" and "holds N" are two separate facts and are shown as two
   separate things. An endpoint that answers perfectly and holds nothing is the
   normal state of a mailbox nobody has posted to; a single green dot would
   report that identically to a broken one. */
.mb-status { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .74rem; }
.mb-pill {
  padding: .16rem .45rem; border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.mb-pill-up { border-color: var(--of-good); color: var(--of-good); }
.mb-pill-down { border-color: var(--of-bad); color: var(--of-bad); }
.mb-pill-checking { color: var(--muted); }
.mb-count b, .mb-facet b { font-variant-numeric: tabular-nums; }
.mb-count { white-space: nowrap; }
.mb-facets { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--muted); }
.mb-status-detail { color: var(--muted); }

/* --- the address, which is the thing the page exists to publish ------------ */
.mb-address {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: 0 0 .7rem; padding: .5rem .6rem;
  border: 1px solid var(--line);
  border-radius: .25rem;
  background: var(--control-surface);
}
.mb-method {
  padding: .12rem .4rem; border-radius: .2rem;
  background: var(--mb-accent); color: #fff;
  font-size: .64rem; font-weight: 900; letter-spacing: .06em;
}
.mb-method-sm { font-size: .58rem; opacity: .85; }
.mb-url { font-size: .92rem; font-weight: 700; word-break: break-all; }
.mb-copy {
  margin-inline-start: auto;
  padding: .2rem .5rem; border: 1px solid var(--line); border-radius: .2rem;
  background: transparent; color: inherit; font: inherit; font-size: .7rem; cursor: pointer;
}
.mb-copy:hover { background: var(--accent-subtle); }
.mb-copy:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 1px; }

.mb-purpose { margin: 0 0 .8rem; line-height: 1.55; font-size: .86rem; }

.mb-block { margin: 0 0 .8rem; }
.mb-block h4 {
  margin: 0 0 .3rem; color: var(--muted);
  font-size: .62rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.mb-types, .mb-reads { margin: 0; padding-left: 1.1rem; font-size: .8rem; line-height: 1.7; }
.mb-reads { list-style: none; padding-left: 0; }
.mb-reads li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.mb-reads code { word-break: break-all; }

.mb-changes { margin: 0; font-size: .82rem; }
.mb-changes dt { margin-top: .35rem; font-weight: 700; }
.mb-changes dt:first-child { margin-top: 0; }
.mb-means { color: var(--muted); font-weight: 400; font-style: italic; }
.mb-changes dd { margin: .1rem 0 0 1.1rem; color: var(--muted); line-height: 1.5; }

/* Examples are long and must scroll inside their own box: the page body must
   never scroll sideways. */
.mb-pre {
  margin: 0; padding: .6rem .7rem;
  border: 1px solid var(--line); border-radius: .25rem;
  background: var(--of-paper-soft);
  font-size: .76rem; line-height: 1.5;
  overflow-x: auto; white-space: pre;
}
.mb-pre-inline { white-space: pre-wrap; word-break: break-word; }

.mb-tablewrap { overflow-x: auto; }
.mb-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.mb-table th, .mb-table td { padding: .3rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.mb-table th { color: var(--muted); font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; }
.mb-table td { font-variant-numeric: tabular-nums; }
.mb-empty { margin: 0 0 .8rem; color: var(--muted); font-size: .8rem; font-style: italic; }

.mb-card-foot {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  margin-top: .9rem; padding-top: .6rem;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: .7rem;
}

.mb-auth, .mb-footnote {
  padding: .9rem 1.1rem;
  border: 1px solid var(--line); border-radius: .35rem;
  background: var(--surface-subtle);
}
.mb-footnote { margin-top: 1rem; }
.mb-auth h2, .mb-footnote h2 { margin: 0 0 .45rem; font-size: .95rem; }
.mb-auth p, .mb-footnote p, .mb-footnote li { line-height: 1.55; font-size: .84rem; }
.mb-auth p { margin: 0 0 .5rem; }
.mb-auth-note { color: var(--muted); margin-bottom: 0; }
.mb-footnote ol { padding-left: 1.2rem; }
.mb-footnote li { margin: .35rem 0; }

@media (width <= 46rem) {
  .mb-card-head { flex-direction: column; }
  .mb-copy { margin-inline-start: 0; }
  .mb-url { font-size: .8rem; }
}

/* Nothing inside a card may establish a width floor: the card is the width the
 * viewport allows, and long unbreakable content wraps instead of pushing. */
.mb-card, .mb-card-head, .mb-status, .mb-facets, .mb-address, .mb-copy-wrap,
/* .mb-tablewrap already declared overflow-x:auto and still could not contain
 * its table: a scroll container that cannot shrink grows to fit its content
 * instead of scrolling it. Same cause as the card, one level in. */
.mb-tablewrap { min-width: 0; }
.mb-address, .mb-url, .mb-purpose { overflow-wrap: anywhere; }