/* wire-comms.css — comms-side extensions to the Wire vocabulary.
 *
 * The canonical Wire CSS is published from gruel-design-system at
 *   static.bfc.lol/bfc/v1.0.15/v1/components/wire.css
 * and locks the chat-window configuration: .wire grid, .rail/.stream,
 * .msg/.is-fellow/.sys, .composer, .wire-pip, etc.
 *
 * comms needs a few patterns the gds Wire artboards don't cover yet
 * (join affordances, mentions row, empty states in the rail, voice
 * axis carrying into the rail roll). They sit here until a second
 * consumer would justify extracting them back to gds.
 *
 * Consumes --soc-* tokens; load AFTER wire.css and navy.css. */

/* Rail extensions — subsection labels and empty state. */
.wire .rail-subhead {
  font-family: "Libre Caslon Text", "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--soc-muted);
  margin: 8px 16px 4px;
  padding: 0;
}

.wire .rail-empty {
  margin: 4px 16px;
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--soc-muted);
}

/* Mentions row — gilt @ instead of #. Borrows the channel row shape. */
.wire .channel.is-mentions .channel-hash {
  color: var(--soc-accent);
}

/* Unjoined channels — same row shape, dimmed name, "+" affordance in the
   slot the count would occupy on a joined channel. */
.wire .channel.is-unjoined {
  cursor: default;
}
.wire .channel.is-unjoined .channel-name {
  color: var(--soc-muted);
  font-style: italic;
}
.wire .channel-join-form {
  margin: 0;
  margin-left: auto;
}
.wire .channel-join {
  background: transparent;
  border: 1px solid var(--soc-rule);
  color: var(--soc-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  line-height: 1;
  padding: 1px 6px;
  cursor: pointer;
  border-radius: 2px;
}
.wire .channel-join:hover {
  border-color: var(--soc-accent);
  color: var(--soc-accent);
}

/* Voice axis carrying into the rail roll.
 * The default .peer-row body is Plex Sans. Fellow rows in the roll mark
 * with the Society voice (italic Caslon name); Adjunct rows mark with
 * working type (Plex Mono cypher). The wire-pip leads either way.  */
.wire .peer-row.is-fellow .peer-name-rail {
  font-family: "Libre Caslon Text", "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--soc-structural);
}
.wire .peer-row.is-adjunct .peer-name-rail {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--soc-text);
}
.wire .peer-row.is-adjunct .peer-meta-rail {
  font-style: italic;
}

/* htmx host divs in the rail wrap the actual <section class="rail-section">
 * payload. display:contents lets those sections flow as direct flex children
 * of .rail (so margin-top:auto on .actions still anchors to the rail's
 * bottom). Scoped tightly to the four hosts — .actions is also a div and
 * MUST keep its block layout. */
.wire .rail #sidebar-mentions,
.wire .rail #sidebar-dms,
.wire .rail #sidebar-channels,
.wire .rail #sidebar-members { display: contents; }

/* Society header/colophon layout extensions used by comms's shell.html. */
.society-header .society-imprint-aside {
  display: flex;
  align-items: center;
  gap: 14px;
}

.society-header .sidebar-toggle {
  background: transparent;
  border: 1px solid var(--soc-rule);
  color: var(--soc-text);
  font-size: 14px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
  display: none;
}
@media (max-width: 720px) {
  .society-header .sidebar-toggle { display: inline-flex; }
  .wire { grid-template-columns: 1fr; }
  .wire .rail { display: none; }
  .wire.is-rail-open .rail { display: flex; position: fixed; inset: 0 30% 0 0; z-index: 30; background: var(--soc-bg-elev); overflow-y: auto; }
}

.society-header .viewer-dropdown-wrap {
  position: relative;
}
.society-header .viewer-dropdown-btn {
  background: transparent;
  border: 1px solid var(--soc-rule);
  color: var(--soc-text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.society-header .viewer-dropdown-btn .viewer-caret {
  font-size: 9px;
  color: var(--soc-muted);
}
.society-header .viewer-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  background: var(--soc-card);
  border: 1px solid var(--soc-rule);
  padding: 10px 12px;
  z-index: 40;
}
.society-header .viewer-dropdown[hidden] { display: none; }
.society-header .viewer-dropdown form { margin: 0; }
.society-header .viewer-dropdown .logout-btn {
  background: transparent;
  border: 0;
  color: var(--soc-text);
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 13px;
  padding: 2px 0;
  cursor: pointer;
  border-bottom: 1px dotted var(--soc-rule);
}
.society-header .viewer-dropdown .logout-btn:hover {
  color: var(--soc-accent);
  border-bottom-color: var(--soc-accent);
}

/* Colophon mode toggle — Day / Night, lives in the right slot. */
.society-colophon .society-colophon-aside { display: flex; align-items: center; }
.soc-mode-toggle {
  background: transparent;
  border: 1px solid var(--soc-rule);
  color: var(--soc-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.soc-mode-toggle:hover { border-color: var(--soc-accent); color: var(--soc-accent); }
.soc-mode-toggle .mode-sep { color: var(--soc-rule); }
.soc-mode-toggle .mode-label-day,
.soc-mode-toggle .mode-label-night { opacity: 0.55; }
.soc-mode-toggle:not(.is-night) .mode-label-day { color: var(--soc-text); opacity: 1; }
.soc-mode-toggle.is-night .mode-label-night { color: var(--soc-accent); opacity: 1; }

/* Body framing for the shell. The .wire grid handles the chat window;
 * the page itself just needs background + typography defaults. */
body.wire-page {
  margin: 0;
  background: var(--soc-bg);
  color: var(--soc-text);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────────────────────────────
 * Society-styled admin forms — rendered into the .stream slot when the
 * Fellow visits Mint invite / Reset member token / Set up adjunct /
 * Rotate token from the rail actions. Same form vocabulary comms's
 * admin templates use (.fragment-pane, .form, .field, .radio-group,
 * .cta-row, .btn--primary), restyled in the Society register.
 * ──────────────────────────────────────────────────────────────────── */
.wire .stream .fragment-pane {
  padding: 22px 28px 32px;
  color: var(--soc-text);
  max-width: 580px;
}

.wire .stream .fragment-pane h2 {
  font-family: "Libre Caslon Text", "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--soc-structural);
  letter-spacing: -0.005em;
  margin: 0 0 4px;
}

.wire .stream .fragment-pane h2 .crumb {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soc-accent);
  margin-left: 8px;
  vertical-align: middle;
}

.wire .stream .fragment-pane .form { margin-top: 18px; }

.wire .stream .fragment-pane .field {
  margin: 0 0 16px;
  display: block;
}

.wire .stream .fragment-pane .field > label {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soc-accent);
  margin: 0 0 6px;
}

.wire .stream .fragment-pane .kbd-hint {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--soc-muted);
  margin-left: 4px;
}

.wire .stream .fragment-pane input[type="text"],
.wire .stream .fragment-pane input[type="password"],
.wire .stream .fragment-pane input[type="email"],
.wire .stream .fragment-pane input[type="date"],
.wire .stream .fragment-pane select,
.wire .stream .fragment-pane textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--soc-rule);
  padding: 6px 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 14px;
  color: var(--soc-text);
  outline: none;
}
.wire .stream .fragment-pane input::placeholder,
.wire .stream .fragment-pane textarea::placeholder {
  color: var(--soc-muted);
  font-style: italic;
}
.wire .stream .fragment-pane input:focus,
.wire .stream .fragment-pane select:focus,
.wire .stream .fragment-pane textarea:focus {
  border-bottom-color: var(--soc-accent);
}
.wire .stream .fragment-pane input[readonly] { color: var(--soc-text-soft); }
.wire .stream .fragment-pane textarea { resize: vertical; min-height: 60px; }

.wire .stream .fragment-pane .radio-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: "IBM Plex Sans", sans-serif;
}
.wire .stream .fragment-pane .radio-group label {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--soc-text);
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  cursor: pointer;
}
.wire .stream .fragment-pane .radio-group input[type="radio"],
.wire .stream .fragment-pane .radio-group input[type="checkbox"] {
  accent-color: var(--soc-accent);
  width: auto;
}

.wire .stream .fragment-pane .cta-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--soc-rule);
}
.wire .stream .fragment-pane .cta-row__cancel {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--soc-muted);
}

.wire .stream .fragment-pane .btn,
.wire .stream .fragment-pane button[type="submit"] {
  background: var(--soc-accent);
  color: var(--soc-bg);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 0;
  padding: 8px 18px;
  cursor: pointer;
  border-radius: 0;
}
.wire .stream .fragment-pane .btn--primary { background: var(--soc-accent); color: var(--soc-bg); }
.wire .stream .fragment-pane .btn:hover { background: var(--soc-structural); }

.wire .stream .fragment-pane .error {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  color: #b85050;
  padding: 8px 12px;
  border-left: 2px solid #b85050;
  background: var(--soc-bg-elev);
  margin: 0 0 14px;
}
.is-navy .wire .stream .fragment-pane .error { color: #e08080; border-left-color: #e08080; }

.wire .stream .fragment-pane code {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  background: var(--soc-bg-elev);
  border: 1px solid var(--soc-rule-soft);
  padding: 0 4px;
  border-radius: 2px;
  color: var(--soc-structural);
}

.wire .stream .fragment-pane .divider {
  border: 0;
  border-top: 1px solid var(--soc-rule);
  margin: 20px 0;
}

.wire .stream .fragment-pane .hint,
.wire .stream .fragment-pane p {
  font-size: 13px;
  color: var(--soc-text-soft);
  line-height: 1.55;
  margin: 0 0 10px;
}

/* In-stream banners — short-notice rules for the admin fragments
   (mint-invite confirmation, rotate-token warning, reset-token results).
   Match the Society despatch-banner posture: left-rule + glyph + body
   text. Three intent variants. */
.wire .stream .fragment-pane .banner {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 3px solid;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  background: var(--soc-bg-elev);
}
.wire .stream .fragment-pane .banner__icon {
  font-family: "Libre Caslon Text", serif;
  font-size: 14px;
  color: inherit;
}
.wire .stream .fragment-pane .banner__body {
  color: var(--soc-text);
}
.wire .stream .fragment-pane .banner__body code { padding: 0 3px; }
.wire .stream .fragment-pane .banner--success { border-left-color: #406640; }
.wire .stream .fragment-pane .banner--warning,
.wire .stream .fragment-pane .banner--warn { border-left-color: var(--soc-accent); }
.wire .stream .fragment-pane .banner--danger { border-left-color: #b85050; }
.is-navy .wire .stream .fragment-pane .banner--success { border-left-color: #6a9a6a; }
.is-navy .wire .stream .fragment-pane .banner--danger { border-left-color: #d44a4a; }

/* In-stream credential block — token / invite-URL reveal with copy
   affordance. Used by mint_invite_complete and rotate_token results
   rendered into the .stream pane. */
.wire .stream .fragment-pane .credential {
  margin: 0 0 18px;
  padding: 12px 14px;
  background: var(--soc-bg-elev);
  border: 1px solid var(--soc-rule);
}
.wire .stream .fragment-pane .credential__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soc-muted);
}
.wire .stream .fragment-pane .credential__shown-once {
  color: var(--soc-accent);
}
.wire .stream .fragment-pane .credential__value {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12.5px;
  color: var(--soc-text);
  word-break: break-all;
  padding: 4px 0 8px;
  border-bottom: 1px dashed var(--soc-rule-soft);
  margin-bottom: 8px;
  user-select: all;
}
.wire .stream .fragment-pane .credential__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wire .stream .fragment-pane .credential__copy {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soc-bg);
  background: var(--soc-structural);
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 0;
}
.wire .stream .fragment-pane .credential__copy:hover { background: var(--soc-accent); color: var(--soc-bg); }
.wire .stream .fragment-pane .credential__copy.is-copied { background: #406640; color: #f4eedc; }
.wire .stream .fragment-pane .credential__hint {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 11px;
  color: var(--soc-muted);
}

/* Two-column row for paired credentials (invite-url + raw token). */
.wire .stream .fragment-pane .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 640px) {
  .wire .stream .fragment-pane .split { grid-template-columns: 1fr; }
}

/* In-stream snippet block (setup_agent's mcp.json sample). Matches the
   despatch-snippet posture so the visual register is consistent. */
.wire .stream .fragment-pane .snippet-wrap {
  position: relative;
  margin: 8px 0 12px;
}
.wire .stream .fragment-pane .snippet {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  background: #0f1226;
  color: #e8e3d3;
  padding: 12px 14px;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  border: 1px solid #1a1f3c;
}
.wire .stream .fragment-pane .snippet-wrap .credential__copy {
  position: absolute;
  top: 6px;
  right: 6px;
}

.wire .stream .fragment-pane .section {
  margin: 18px 0;
  padding-top: 14px;
  border-top: 1px solid var(--soc-rule);
}
.wire .stream .fragment-pane .section h3 {
  font-family: "Libre Caslon Text", serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--soc-text);
}
.wire .stream .fragment-pane .section__intro {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px;
  color: var(--soc-text-soft);
  margin: 0 0 12px;
  line-height: 1.55;
}

.wire .stream .fragment-pane .alt {
  margin: 10px 0 0;
  font-family: "Libre Caslon Text", serif;
}
.wire .stream .fragment-pane .alt summary {
  cursor: pointer;
  font-style: italic;
  color: var(--soc-muted);
  font-size: 12px;
}

/* The Roll — /ui/members rendered into the .stream. Mirrors the rail
   Direct section's vocabulary so the user-list visual register stays
   consistent across rail-and-stream surfaces. Fellow / Adjunct
   subsections, peer-row layout, monospace cypher, gilt active pip. */
.wire .stream .roll {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px 24px;
}
.wire .stream .roll-subhead {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--soc-accent);
  margin: 14px 0 6px;
  padding: 0;
}
.wire .stream .roll-subhead:first-child { margin-top: 0; }
.wire .stream .roll-empty {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  color: var(--soc-muted);
  padding: 12px 0;
}
.wire .stream .roll .peer-row {
  display: grid;
  grid-template-columns: 18px 14px 1fr auto;
  align-items: baseline;
  gap: 6px;
  padding: 8px 10px;
  text-decoration: none;
  color: var(--soc-text);
  border-bottom: 1px solid var(--soc-rule-soft);
}
.wire .stream .roll .peer-row:hover { background: var(--soc-bg-elev); }
.wire .stream .roll .peer-row .peer-at {
  color: var(--soc-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
}
.wire .stream .roll .peer-row.is-fellow .peer-name-rail {
  font-family: "Libre Caslon Text", "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}
.wire .stream .roll .peer-row.is-adjunct .peer-name-rail {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.wire .stream .roll .peer-row .peer-meta-rail {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  color: var(--soc-muted);
  letter-spacing: 0.02em;
}

/* Member-detail surface (/ui/members/{name}). Stream-shaped header,
   small caslon-italic Fellow tag, dl of fields, single primary action. */
.wire .stream .member-detail {
  padding: 16px 20px 24px;
}
.wire .stream .stream-channel.is-adjunct .at,
.wire .stream .stream-channel.is-adjunct {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.wire .stream .member-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0 0 22px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
}
.wire .stream .member-dl dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soc-muted);
  padding-top: 3px;
}
.wire .stream .member-dl dd {
  margin: 0;
  color: var(--soc-text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.wire .stream .member-actions {
  padding-top: 14px;
  border-top: 1px solid var(--soc-rule);
}
.wire .stream .member-action {
  display: inline-block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soc-bg);
  background: var(--soc-structural);
  padding: 9px 16px;
  text-decoration: none;
}
.wire .stream .member-action:hover { background: var(--soc-accent); }

/* Pre-auth (Cable form) page framing — cream stationery surface that the
   gds cable-form.css component lives on. Used by login / redeem / setup /
   no-invite. The cable-day artboard inlines body color/family; we lift that
   into a reusable .cable-page class so the four templates stay free of
   embedded <style> blocks. */
body.cable-page {
  background: #f4eedc;
  color: #2a2540;
  font-family: "Libre Caslon Text", "Source Serif 4", Georgia, serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.cable-page.is-navy {
  background: #0f1226;
  color: #e8e3d3;
}

/* Comms-side additions to the despatch — copy slots the gds artboard
   doesn't carry (error notice, explanatory prose) and host-context line
   in the dateline. */
.despatch-error {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 3px solid #b00020;
  background: rgba(176, 0, 32, 0.07);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px;
  color: #7a0017;
  line-height: 1.45;
}

body.cable-page.is-navy .despatch-error {
  background: rgba(255, 120, 120, 0.08);
  color: #f0c4c4;
  border-left-color: #d44a4a;
}

.despatch-prose {
  margin: 0 0 20px;
  font-family: "Libre Caslon Text", serif;
  font-size: 14px;
  line-height: 1.55;
  color: #3a3550;
}

.despatch-prose a {
  color: #1a1f3c;
  text-decoration: none;
  border-bottom: 1px dotted rgba(26, 31, 60, 0.4);
}
.despatch-prose a:hover { border-bottom-style: solid; }

body.cable-page.is-navy .despatch-prose {
  color: #d8d2c2;
}

body.cable-page.is-navy .despatch-prose a {
  color: #e8d4a4;
  border-bottom-color: rgba(232, 212, 164, 0.4);
}

.dateline-host {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: #b88a2c;
}

/* Read-only cable line — show the value, drop the focus underline cue. */
.cable-line.is-readonly {
  border-bottom-style: dotted;
}
.cable-line.is-readonly .cable-input {
  color: #6a6862;
  cursor: default;
}

/* Despatch-banner — short notice with a left-rule + glyph. Used on the
   credential-reveal pages (redeem_complete, token_rotated) to flag the
   registration succeeded and the token must be saved. Two variants:
   .is-success (verdant rule), .is-warn (gilt rule). */
.despatch-banner {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 3px solid;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
.despatch-banner__glyph {
  font-family: "Libre Caslon Text", serif;
  font-size: 14px;
  line-height: 1.4;
}
.despatch-banner.is-success {
  background: rgba(64, 102, 64, 0.06);
  border-left-color: #406640;
  color: #2a3f2a;
}
.despatch-banner.is-warn {
  background: rgba(184, 138, 44, 0.07);
  border-left-color: #b88a2c;
  color: #6a4a10;
}
body.cable-page.is-navy .despatch-banner.is-success {
  background: rgba(120, 200, 120, 0.06);
  color: #c4dfc4;
  border-left-color: #6a9a6a;
}
body.cable-page.is-navy .despatch-banner.is-warn {
  background: rgba(220, 180, 100, 0.07);
  color: #e8d4a4;
  border-left-color: #d4a85a;
}

/* Token-reveal block — the credential as a transcript line.
   Token sits in a monospace block with a dashed left guide; copy button
   below. SHOWN ONCE pin on the right. */
.despatch-credential {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: rgba(26, 31, 60, 0.04);
  border: 1px solid #d8cfb6;
}
.despatch-credential__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.despatch-credential__label {
  color: #6a6862;
}
.despatch-credential__shown-once {
  color: #b88a2c;
}
.despatch-credential__value {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  color: #1a1f3c;
  word-break: break-all;
  padding: 6px 0 10px;
  border-bottom: 1px dashed #d8cfb6;
  margin-bottom: 10px;
  user-select: all;
}
.despatch-credential__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.despatch-credential__copy {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f4eedc;
  background: #1a1f3c;
  border: none;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.despatch-credential__copy:hover { background: #2a2f4c; }
.despatch-credential__copy.is-copied { background: #406640; }
.despatch-credential__hint {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 11px;
  color: #6a6862;
}
body.cable-page.is-navy .despatch-credential {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(232, 227, 211, 0.18);
}
body.cable-page.is-navy .despatch-credential__value {
  color: #f4eedc;
  border-bottom-color: rgba(232, 227, 211, 0.18);
}
body.cable-page.is-navy .despatch-credential__copy {
  background: #b88a2c;
  color: #0f1226;
}
body.cable-page.is-navy .despatch-credential__copy:hover { background: #d4a85a; }

/* Despatch section — for the MCP-config snippet block on redeem_complete
   (agent path). Heading + intro + a snippet box with a copy affordance. */
.despatch-section {
  margin: 22px 0 18px;
  padding-top: 18px;
  border-top: 1px solid #d8cfb6;
}
.despatch-section h3 {
  font-family: "Libre Caslon Text", serif;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
  color: #1a1f3c;
}
.despatch-section__intro {
  margin: 0 0 12px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: #3a3550;
}
.despatch-snippet {
  position: relative;
  background: #0f1226;
  color: #e8e3d3;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  padding: 12px 14px;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
  border: 1px solid #1a1f3c;
}
.despatch-snippet-wrap {
  position: relative;
}
.despatch-snippet-wrap .despatch-credential__copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 5px 10px;
  font-size: 9.5px;
}
body.cable-page.is-navy .despatch-section {
  border-top-color: rgba(232, 227, 211, 0.18);
}
body.cable-page.is-navy .despatch-section h3 { color: #f4eedc; }
body.cable-page.is-navy .despatch-section__intro { color: #d8d2c2; }

.despatch-alt {
  margin: 12px 0 0;
  font-family: "Libre Caslon Text", serif;
  font-size: 12px;
}
.despatch-alt summary {
  cursor: pointer;
  font-style: italic;
  color: #6a6862;
}

/* Wider despatch for credential-reveal — accommodates the MCP snippet
   without forcing horizontal scrolling on common widths. */
.despatch.is-wide {
  max-width: 640px;
}

/* CTA row at the foot of the despatch — used on credential-reveal pages
   to lead the visitor back to the dashboard once they've saved their key. */
.despatch-cta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.despatch-cta__primary {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #f4eedc;
  background: #1a1f3c;
  text-decoration: none;
  padding: 11px 18px;
  transition: background 0.15s ease;
}
.despatch-cta__primary:hover { background: #2a2f4c; }
.despatch-cta__hint {
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-size: 11.5px;
  color: #6a6862;
}
body.cable-page.is-navy .despatch-cta__primary {
  background: #b88a2c;
  color: #0f1226;
}
body.cable-page.is-navy .despatch-cta__primary:hover { background: #d4a85a; }