/* =============================================================================
   EXCHANGE CHROME
   What every Exchange page shares on top of hub.css: the width, the header
   with its section links, and the small pieces each page leans on.

   hub.css is the Hub's design system and is copied in whole, unedited, so it
   can be replaced with the Hub's next version without merging. Anything the
   Exchange adds lives here instead. Until October this sat inside
   index.html; it moved when Onboarding became the second page, because two
   copies of a header drift apart.
   ============================================================================= */
:root{
  /* Wider than the Hub on purpose. The Hub is phone-first, used at a church
     hall with a baby on one arm; this is a desk tool on a big screen, so it
     takes the room. 1400 is the reading limit rather than the screen's: past
     it, a row's name and its figure sit too far apart to connect. */
  --body-w:1400px;
}

.hubhead__in{gap:12px}
.hubhead__left{display:flex;align-items:center;gap:26px;min-width:0}
.hubhead__name{display:flex;align-items:center;gap:12px;min-width:0}
.hubhead__name .rule{width:1px;height:24px;background:var(--hairline);flex:0 0 1px}
.hubhead__name b{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.015em;line-height:1}
@media (max-width:560px){ .hubhead__name .rule, .hubhead__name b{display:none} }

/* The sections. Plain words, the current one underlined: there are two,
   soon three, and a tab bar would be furniture for that. */
.xnav{display:flex;align-items:center;gap:2px}
.xnav a{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:var(--r-small);
  font-size:14px;font-weight:500;color:var(--ink-label);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.xnav a:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.xnav a[aria-current="page"]{color:var(--ink)}
.xnav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;background:var(--ink)}
.xnav a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:700px){ .xnav a{padding:0 8px;font-size:13.5px} .hubhead__left{gap:12px} }

.ohead__acct{display:flex;align-items:center;gap:12px;text-align:right}
.ohead__acct .linkbtn{margin-left:4px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.linkbtn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}

.omsg{padding:14px 16px;border-radius:var(--r-card);border:1px solid var(--hairline);background:var(--white);font-size:14px;line-height:1.6;margin-top:16px}
.omsg.bad{background:var(--bad-bg);border-color:transparent;color:var(--bad-ink)}
.omsg.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.omsg ul{margin:6px 0 0;padding-left:18px}

/* Loading: the same boxes as the live layout, so nothing jumps. */
.sk{background:linear-gradient(90deg,var(--quiet) 25%,#fff 50%,var(--quiet) 75%);background-size:1200px 100%;
  animation:mc-shimmer 1.25s linear infinite;border-radius:var(--r-tile)}
.skeleton{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

footer.ofoot{margin:36px 0 48px;display:flex;gap:14px;justify-content:center;align-items:center;font-size:12.5px;color:var(--ink-label);flex-wrap:wrap}