/* /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.

   Six bands stacked: the bar, one navy hero, three claims, the integration detail, the two
   figures, 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 one thing on this page that is not set in Exo 2: an id, a thumbprint, a header name, a
       request line. Declared once here rather than spelled out at each of the four places that
       want it — and as a custom property rather than a class, because a custom property inherits
       through the DOM and therefore reaches inside the two figure components, which this file's
       scoped selectors cannot. */
    --tb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- 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] {
    /* The `flex: 1` that used to be here is on `.surfaces` now — it belongs to whichever band is
       the last one above the credit, so that on a screen taller than the page the footer is at
       the bottom rather than floating under the content. */
    /* 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 two detail bands, and the measure they share ---------------------------------- */

/* The same 72rem the hero and the claims are set in. On its own element rather than on the
   sections, because these two bands are full-bleed fields with a centred column inside them —
   which is also what keeps them clear of the flex-item trap the claims grid documents above: the
   `auto` margin is on this box, not on the band that is a flex child of `.front-door`. */
.band-inner[b-f2sx3e1suv] {
    max-width: 72rem;
    margin-inline: auto;
}

/* No orange rule above either of these. The device on this page is the three bars above the
   claims — one selector, three headings, both counted by BrandAssetTests — and a fourth and fifth
   drawn here would be the shape the brand doc warns about in markup, one level up: a device that
   quietly becomes five. These two bands are told apart by their field instead, grey against
   white. */
.integrate h2[b-f2sx3e1suv],
.surfaces h2[b-f2sx3e1suv] {
    margin: 0;
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--mud-palette-primary, #000f29);
}

.band-lede[b-f2sx3e1suv] {
    margin: 1rem 0 0;
    max-width: 46rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--mud-palette-text-secondary, #474747);
}

/* ---- the integration band -------------------------------------------------------------- */

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

.snippet-lead[b-f2sx3e1suv] {
    margin: 2.25rem 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-primary, #000f29);
}

/* Navy, and the page's third use of that field. A monospace block belongs on it: what is in
   there is wire text rather than prose, and it should read as a terminal.

   `overflow-x` rather than wrapping, and this is the one rule here that is not taste. A request
   line folded across two visual lines is a different request line, and somebody will copy the
   fold. Better a box that scrolls on a narrow screen than a snippet that lies on one. */
.snippet[b-f2sx3e1suv] {
    margin: 0;
    padding: 1.25rem 1.4rem;
    border-radius: 6px;
    background: var(--mud-palette-primary, #000f29);
    overflow-x: auto;
}

.snippet code[b-f2sx3e1suv] {
    font-family: var(--tb-mono);
    font-size: 0.8125rem;
    line-height: 1.75;
    white-space: pre;
    color: rgb(255 255 255 / 88%);
}

/* Label above value, not beside it. A two-column grid sized for "Transport" crops
   "Autenticação", and this is the band where every label is one word in one language and one and
   a half in the other. Each dt/dd pair is wrapped in a div — which a <dl> permits — so that the
   pair is one grid item instead of two flowing independently across the tracks. */
.spec[b-f2sx3e1suv] {
    margin: 2.5rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.75rem 2rem;
}

.spec dt[b-f2sx3e1suv] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary, #474747);
}

.spec dd[b-f2sx3e1suv] {
    margin: 0.45rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary, #212529);
}

/* Wire text inside prose: a header name, a media type, an error envelope. Tinted rather than
   boxed in navy, because these sit inside a sentence and a filled chip mid-line reads as a
   button. */
.spec code[b-f2sx3e1suv] {
    font-family: var(--tb-mono);
    font-size: 0.875em;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    background: rgb(0 0 0 / 6%);
}

/* ---- the two figures ------------------------------------------------------------------- */

.surfaces[b-f2sx3e1suv] {
    /* The band above the credit, so this is where the page's spare height goes. */
    flex: 1;
    background: var(--mud-palette-background, #ffffff);
    padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 5vw, 4.5rem);
}

.shot-frame[b-f2sx3e1suv] {
    margin: 2.5rem 0 0;
}

/* The same trade the snippet makes, for the same reason. A drawing of a 960px window has a width
   below which its 8.5-unit labels are not labels any more — on a 375px phone they land at four
   pixels — and shrinking a screenshot until it is a texture is worse than asking for a swipe. So
   the drawing keeps a floor and this box scrolls under it. 48rem is where the smallest label in
   either figure comes back to about 9px. */
.shot-scroll[b-f2sx3e1suv] {
    overflow-x: auto;
}

/* `::deep`, and it has to be: the drawing is a child component, so the build does not stamp this
   component's scope attribute onto anything inside it and a plain `.shot` selector here would
   match nothing. The frame is in this file, which is what gives the selector something scoped to
   hang off. */
.shot-frame[b-f2sx3e1suv]  svg {
    display: block;
    width: 100%;
    height: auto;
    /* The floor `.shot-scroll` scrolls under. Above this width `width: 100%` wins and the drawing
       fills the measure. */
    min-width: 48rem;
    /* The drawings carry no font of their own: a figure of a TrustBridge surface is set in the
       typeface every TrustBridge surface is set in, and this is the one declaration that says
       so. Written here rather than as a presentation attribute on each <svg>, so the page's
       typography lives in the page's stylesheet and the components stay structure and strings. */
    font-family: var(--mud-typography-default-family, "Exo 2", Helvetica, Arial, sans-serif);
    border: 1px solid var(--mud-palette-lines-default, rgb(0 0 0 / 12%));
    border-radius: 6px;
    /* The drawing opens with a navy band that runs to its own edge, so without this the corners
       the border rounds are still filled square. */
    overflow: hidden;
    box-shadow: 0 2px 12px rgb(0 0 0 / 8%);
    background: var(--mud-palette-surface, #ffffff);
}

/* The cells a drawing sets in monospace — a session id, a thumbprint, a masked CPF, a date — so
   two rows' digits line up under each other the way the real grid's columns do. */
.shot-frame[b-f2sx3e1suv]  .mono {
    font-family: var(--tb-mono);
}

.shot-frame figcaption[b-f2sx3e1suv] {
    margin-top: 0.9rem;
    max-width: 46rem;
    font-size: 0.875rem;
    line-height: 1.6;
    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;
}