/* The portal's own styling, on top of MudBlazor.
   Only what the component library cannot express.

   ⛔ EVERY EDGE HERE IS LOGICAL, NOT PHYSICAL. The portal ships in Arabic, so `border-left` and
   `border-right` are the two properties that would survive MudRTLProvider and put an accent on the
   wrong side in that one language -- a defect nobody who does not read Arabic would ever see.
   `border-inline-start` / `border-inline-end` follow the writing direction, which is what
   MudBlazor's own spacing utilities (`ms-*`/`me-*`, not `ml-*`) already do. Keep it that way: a
   physical edge added here is a silent RTL regression. */

html, body {
    font-family: Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ⚠ THE h1 IS FOCUSED ON EVERY NAVIGATION AND SHOULD NOT SHOW A RING FOR IT. The router's
   FocusOnNavigate moves focus to the page's h1 so that a screen reader announces the new page.
   The h1 carries tabindex="-1", is not a control and cannot be reached with the keyboard, but
   Chrome treats a programmatic focus on a fresh load as focus-visible and draws a heavy outline
   around the headline. Real controls (buttons, links, the language menu) keep their own focus
   ring: this selector matches the h1 and nothing else. */
h1:focus {
    outline: none;
}

.portal-appbar {
    border-block-end: 1px solid #E2E9F7;
}

.portal-brand {
    color: #132A7A;
    font-weight: 700;
}

/* The brand text is a link to the landing page; it keeps looking like the brand, not like a link. */
.portal-brand-link {
    color: inherit;
    text-decoration: none;
}

/* ⚠ MudBlazor's stylesheet says `a:focus-visible { outline: none }` for every anchor, so without
   this the brand link would take keyboard focus with nothing to show for it. A real control keeps a
   visible ring; it is the same blue the portal's buttons use. */
.portal-brand-link:focus-visible {
    outline: 2px solid #1B4FD8;
    outline-offset: 2px;
    border-radius: 4px;
}

.portal-main {
    background-color: #F4F7FE;
    min-height: 100vh;
}

.portal-card {
    border: 1px solid #E2E9F7;
    background-color: #FFFFFF;
}

/* The landing page's column: about sixty characters, left-aligned, whatever the container allows. */
.portal-measure {
    max-inline-size: 60ch;
}

/* The landing page's example wallet card. It is the real card's markup and classes, marked as a
   drawing by a dashed outline (and by the caption under it and aria-hidden on it). The colour is
   darker than the card's own border so that the dash survives on a phone in daylight.
   (Logical properties only: see the note at the top of this file.) */
.portal-card.portal-example {
    border-style: dashed;
    border-color: #7C8DB8;
}

/* The example's "Revoke this wallet…" is text drawn to look like the list's button, and has to
   stay text: no pointer, no hover, no focus ring for something that does nothing. */
.portal-example-action {
    pointer-events: none;
    cursor: default;
    user-select: none;
}