/* Shared app chrome for every page on the editorial design system.
   Loaded alongside each page's own design stylesheet (editorial.css, blog.css,
   ...). Holds only what the static mockups have no equivalent for: flash
   messages and the admin impersonation banner. Design files stay pristine. */

.flash{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border:1px solid var(--line);font-size:.82rem;font-weight:600;background:#fbfaf6}
.flash-success{border-color:var(--green);color:var(--green);background:#edf8f2}
.flash-error{border-color:#c8402f;color:#c8402f;background:#fdf0ee}
.flash a{border-bottom:1px solid currentColor;font-weight:700;white-space:nowrap}
.impersonation-banner{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;background:#e5ff44;color:var(--ink);padding:11px 18px;font:500 .7rem "DM Mono",monospace}
.impersonation-banner form{margin:0}
.impersonation-banner button{background:var(--ink);color:#fff;border:0;padding:7px 12px;font:500 .68rem "DM Mono",monospace;cursor:pointer}
.impersonation-banner button:hover{background:var(--blue)}

/* Hero orbit sizing on small screens. The design shrinks .orbit-one/.orbit-two
   at <=620px, but .orbit-two (440x310, rotated -25deg) still has a ~530px
   bounding box against a 356px container, so the page scrolled sideways ~70px
   on a 390px phone. Sized against the viewport so the rings always fit; they
   are decorative, and the demo card and float tags keep their positions. */
@media(max-width:620px){
  .orbit-one{width:min(300px,72vw);height:min(300px,72vw)}
  .orbit-two{width:min(280px,66vw);height:min(190px,45vw)}
}

/* Directory breadcrumb + table caption. The directory mockups had no breadcrumb
   and no table caption; both are added for crawlability and screen readers. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.breadcrumb{width:var(--container,min(1240px,calc(100% - 48px)));margin:0 auto;padding-top:22px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;font:500 .58rem "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.breadcrumb li{display:flex;align-items:center;gap:8px;color:var(--muted)}
.breadcrumb li+li:before{content:"/";color:var(--line)}
.breadcrumb a{color:var(--blue)}
.breadcrumb a:hover{text-decoration:underline}

/* The `hidden` attribute must actually hide.
   The browser's own [hidden]{display:none} lives in the user-agent stylesheet,
   which loses to ANY author rule that sets display — and the page sheets set it
   constantly (.service-card{display:grid}, .method-panel{...}, form{display:grid}).
   The result each time was JS setting el.hidden = true and nothing happening:
   the service search filtered and counted correctly while every card stayed on
   screen, both fund-wallet gateway panels rendered at once, and the country
   dropdown showed all 159 options after filtering.
   This sheet loads after every page stylesheet, so one rule fixes the whole app.
   !important because a page sheet's class selector otherwise wins on source
   order at equal specificity. */
[hidden]{display:none !important}

/* .flash-stack had no rule at all, so a message ran the full width of the
   content area while the page beneath it was inset — 31px left of the content
   and 62px wider on the deposit page. It now renders inside <main> (see
   partials/editorial-flash.php), so it inherits whatever width that page sets
   and needs no box of its own; only the gap below it. */
.flash-stack{margin:0 0 22px;display:grid;gap:8px}

/* Dismiss button. Flashes are consumed from the session on render, so this only
   needs to remove the node — a reload will not bring it back. */
.flash{position:relative}
.flash .flash-close{
  flex:0 0 auto;width:26px;height:26px;margin-left:auto;
  border:0;background:transparent;color:inherit;
  font-size:1rem;line-height:1;cursor:pointer;opacity:.6;
}
.flash .flash-close:hover{opacity:1}
.flash a{color:inherit;text-decoration:underline;white-space:nowrap}