/* /Components/App.razor.rz.scp.css */
/* How the faulted-circuit notice looks. The element itself is hidden inline in App.razor and is
   unhidden by the framework, so nothing here decides whether it shows — only what it looks like
   when it does. Borrowing MudBlazor's palette variables, as the login page does, so the notice
   belongs to the same console as everything under it. */
#blazor-error-ui[b-vjkdl71rbi] {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 2000;
    padding: 0.85rem 1.25rem;
    background: var(--mud-palette-error, #b71c1c);
    color: var(--mud-palette-error-text, #ffffff);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 35%);
    font-family: var(--mud-default-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 0.875rem;
    line-height: 1.5;
}

#blazor-error-ui a.reload[b-vjkdl71rbi] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* The front door's own look: Lacuna's light chrome rather than the console's navy one, which is
   what the site itself does between its white pages and its navy section blocks. Written against
   the palette variables the theme provider emits, so it cannot drift from the console's colours
   — there is one palette and this is a second way of arranging it, not a second theme.

   Four bands stacked: the bar, one navy hero, three claims, the credit. The page scrolls, and
   everything in it is left-aligned inside a centred measure — which is most of what separates a
   product's front door from a splash screen. */

.front-door[b-f2sx3e1suv] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-background, #ffffff);
    color: var(--mud-palette-text-primary, #212529);
    font-family: var(--mud-typography-default-family, "Exo 2", Helvetica, Arial, sans-serif);
}

/* ---- the bar ---------------------------------------------------------------------------- */

.bar[b-f2sx3e1suv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem clamp(1.25rem, 5vw, 4.5rem);
    border-bottom: 1px solid var(--mud-palette-lines-default, rgb(0 0 0 / 10%));
}

.bar-brand[b-f2sx3e1suv] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* The wordmark, and no rule under it. It sits in the bar rather than over the page because the
   heading below is a sentence — see Landing.razor's remarks and Docs/agents/brand.md. Both
   weight classes come from the global brand stylesheet; this only sets the size and the colour. */
.name[b-f2sx3e1suv] {
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--mud-palette-primary, #000f29);
}

.bar-ways[b-f2sx3e1suv] {
    display: flex;
    align-items: center;
    gap: 0.5rem 1.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.bar-link[b-f2sx3e1suv],
.bar-lang[b-f2sx3e1suv] {
    padding-block: 0.25rem;
    border-bottom: 2px solid transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-text-secondary, #474747);
    transition: color 120ms ease, border-color 120ms ease;
}

.bar-link:hover[b-f2sx3e1suv],
.bar-lang:hover[b-f2sx3e1suv] {
    color: var(--mud-palette-primary, #000f29);
    border-bottom-color: var(--mud-palette-secondary, #e94e24);
}

/* The language switcher reads as a link like the one beside it, with the rule already there so
   that a word in another language is not mistaken for a heading. The dotted underline is what
   marks it as a switch rather than another destination on this site. */
.bar-lang[b-f2sx3e1suv] {
    border-bottom-style: dotted;
    border-bottom-color: var(--mud-palette-lines-default, rgb(0 0 0 / 30%));
}

.bar-cta[b-f2sx3e1suv] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 6px; /* the site's own button radius */
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--mud-palette-primary-contrast-text, #ffffff);
    background: var(--mud-palette-primary, #000f29);
    transition: background-color 120ms ease;
}

.bar-cta:hover[b-f2sx3e1suv] {
    background: var(--mud-palette-primary-lighten, #1b2740);
}

/* ---- the hero -------------------------------------------------------------------------- */

.hero[b-f2sx3e1suv] {
    background: var(--mud-palette-primary, #000f29);
    color: #ffffff;
    padding: clamp(3rem, 9vw, 6.5rem) clamp(1.25rem, 5vw, 4.5rem);
}

.hero-inner[b-f2sx3e1suv] {
    max-width: 72rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.hero-copy[b-f2sx3e1suv] {
    flex: 1 1 34rem;
    min-width: 0;
}

/* The one place the brand orange carries text, and it is allowed here: uppercase tracked
   small-caps at 600 is not body text, and the eyebrow is decorative rather than load-bearing —
   the sentence below it says the same thing.

   The lighter step of the orange rather than the base, and only because the field is navy:
   #E94E24 measures about 4.1:1 there, which is fine for a graphic and thin for even a tracked
   eyebrow. SecondaryLighten is already in the palette, so this costs no second orange — which
   is the thing TrustBridgeTheme.Orange's remarks refuse. */
.eyebrow[b-f2sx3e1suv] {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mud-palette-secondary-lighten, #f0714f);
}

.hero h1[b-f2sx3e1suv] {
    margin: 0;
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.hero .lede[b-f2sx3e1suv] {
    margin: 1.5rem 0 0;
    max-width: 40rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: rgb(255 255 255 / 78%);
}

.hero-ways[b-f2sx3e1suv] {
    margin-top: 2.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.way-in[b-f2sx3e1suv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}

/* White on navy, not orange on navy. Orange is the brand's call-to-action colour and the palette
   carries it, but dark ink on it measures 3.98:1 and white on it 3.76:1 — both under the 4.5:1 a
   16px label needs. The orange still leads the eye here, from the eyebrow, the claims' rules and
   the arrows; the site spends it as punctuation too. */
.way-in.primary[b-f2sx3e1suv] {
    background: #ffffff;
    color: var(--mud-palette-primary, #000f29);
}

.way-in.primary:hover[b-f2sx3e1suv] {
    background: rgb(255 255 255 / 88%);
}

.way-in.ghost[b-f2sx3e1suv] {
    color: #ffffff;
    border-color: rgb(255 255 255 / 38%);
}

.way-in.ghost:hover[b-f2sx3e1suv] {
    border-color: var(--mud-palette-secondary-lighten, #f0714f);
}

/* Focus rings: the lighter orange on the navy band, the base orange on the white ones. Both are
   UI components rather than text, where 3:1 is the threshold. */
.way-in:focus-visible[b-f2sx3e1suv] {
    outline: 2px solid var(--mud-palette-secondary-lighten, #f0714f);
    outline-offset: 3px;
}

.bar-link:focus-visible[b-f2sx3e1suv],
.bar-lang:focus-visible[b-f2sx3e1suv],
.bar-cta:focus-visible[b-f2sx3e1suv],
.credit a:focus-visible[b-f2sx3e1suv] {
    outline: 2px solid var(--mud-palette-secondary, #e94e24);
    outline-offset: 3px;
    border-radius: 4px;
}

.arrow[b-f2sx3e1suv] {
    color: var(--mud-palette-secondary, #e94e24);
    font-weight: 700;
}

/* On a filled control the arrow takes the label's colour: the orange on navy or on white at this
   size is a 3.76:1 glyph inside a 19:1 word, which reads as a rendering fault rather than as an
   accent. */
.way-in.primary .arrow[b-f2sx3e1suv],
.bar-cta .arrow[b-f2sx3e1suv] {
    color: inherit;
}

.hero-mark[b-f2sx3e1suv] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    /* Clear space is the height of the tower's head, 4 of the 64 units — 11px at this size. */
    padding: 0.75rem;
}

/* Below this the copy needs the whole band, and a 176px mark beside a wrapped headline reads as
   a collision. Dropped rather than shrunk: 24px is the two-leg mark's floor and anything between
   looks like an accident. */
@media (max-width: 62rem) {
    .hero-mark[b-f2sx3e1suv] {
        display: none;
    }
}

/* ---- the claims ------------------------------------------------------------------------ */

.claims[b-f2sx3e1suv] {
    flex: 1;
    /* Not optional, and not obvious: this band is a flex item of .front-door, and an `auto`
       margin in the cross axis switches `align-self: stretch` off. Without a definite width the
       grid is then sized to fit-content — the sum of its three 17rem track minimums, 920px — so
       auto-fit never collapses and the whole page scrolls sideways on a phone. `min-width: 0`
       does not fix it, because the box is not shrinking, it is growing. Every other band here is
       a block, which is why this is the only one that needs it. */
    width: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: clamp(2rem, 5vw, 4rem);
    max-width: 72rem;
    margin-inline: auto;
    padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4.5rem);
}

/* The orange rule, and the three of them are where the device went when the wordmark moved into
   the bar. A graphic rather than text, so the 3:1 threshold applies and the base orange passes.
   Drawn here rather than in markup: an <hr> per claim is the shape that quietly becomes four. */
.claim h2[b-f2sx3e1suv] {
    margin: 0;
    padding-top: 1rem;
    border-top: 3px solid var(--mud-palette-secondary, #e94e24);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--mud-palette-primary, #000f29);
}

.claim p[b-f2sx3e1suv] {
    margin: 0.75rem 0 0;
    font-size: 0.9688rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary, #474747);
}

/* ---- the credit ------------------------------------------------------------------------ */

.credit[b-f2sx3e1suv] {
    background: var(--mud-palette-background-gray, #f2f2f2);
    border-top: 1px solid var(--mud-palette-lines-default, rgb(0 0 0 / 8%));
    padding: 1.75rem clamp(1.25rem, 5vw, 4.5rem);
}

.credit a[b-f2sx3e1suv] {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    color: var(--mud-palette-text-secondary, #474747);
    font-size: 0.8125rem;
}

.credit a:hover span[b-f2sx3e1suv] {
    text-decoration: underline;
}

.credit img[b-f2sx3e1suv] {
    /* The wordmark is 635x193 and ships at its own colours — Lacuna's navy and orange — so it is
       never recoloured here. */
    height: auto;
    max-width: 7rem;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* The login page is statically rendered, so its inputs are plain HTML rather than MudBlazor's
   own (which bind on the circuit and render no `name` attribute). These borrow MudBlazor's
   palette variables so the form still looks like the rest of the console in either theme. */
.field[b-0mft2k12vt] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.field:focus[b-0mft2k12vt] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* /Components/Pages/SecondFactor.razor.rz.scp.css */
/* Statically rendered, so its inputs are plain HTML rather than MudBlazor's own (which bind on
   the circuit and render no `name` attribute). Borrowed from Login.razor.css rather than shared:
   scoped component styles are per component by design, and a shared stylesheet for two rules
   would be a third file to keep in step with the palette. */
.field[b-eu6abuvlfl] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.field:focus[b-eu6abuvlfl] {
    outline: none;
    border-color: var(--mud-palette-primary);
}
/* /Components/Pages/SecondFactorEnrollment.razor.rz.scp.css */
/* See SecondFactor.razor.css: plain inputs on a statically rendered page, styled from
   MudBlazor's own palette variables so the form belongs to the console in either theme. */
.field[b-sw5n4k83ef] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 4px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
}

.field:focus[b-sw5n4k83ef] {
    outline: none;
    border-color: var(--mud-palette-primary);
}

/* The QR code sits on white and is centred. White is not themeable here and that is deliberate:
   the light modules and the quiet zone are part of the symbol, and a scanner reading a dark-on-dark
   QR code reads nothing. */
.tb-qr[b-sw5n4k83ef] {
    display: flex;
    justify-content: center;
    padding: 12px;
    background: #ffffff;
    border-radius: 4px;
}

/* A secret somebody has to read character by character, or copy without picking up a stray space.
   Selectable on purpose - the whole point of showing it as text is that it can be transcribed. */
.tb-secret[b-sw5n4k83ef] {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    user-select: all;
}

/* The setup address runs long and must wrap rather than push the page sideways. */
.tb-secret-wrap[b-sw5n4k83ef] {
    display: block;
    overflow-wrap: anywhere;
    letter-spacing: normal;
    font-size: 0.8rem;
}

/* Ten codes, two columns where there is room, and no bullets: they are values to copy rather than
   a list to read. */
.tb-recovery-codes[b-sw5n4k83ef] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}