@import '../_content/Earth.WebClient.Components/Earth.WebClient.Components.h5ph64zaca.bundle.scp.css';

/* wwwroot/Pages/MobileApp.razor.rz.scp.css */
/* Layout for the code and the text printed beside it. The QR arrives as an SVG with a
   viewBox and no width or height, so without a cap it sizes itself to whatever container it
   lands in — on a desktop console, the full body width.

   Every var() carries a fallback: this theme defines --rz-card-border but not
   --rz-border-color, and a var() that resolves to nothing takes the whole declaration with it
   rather than falling back to the property's initial value. */

.mobile-app__lead[b-zl1vkeh2ar] {
    max-width: 42rem;
    color: var(--rz-text-secondary-color, inherit);
}

/* Not a warning box. Nothing is wrong — this is the one sentence that stops someone treating
   an address like a secret, so it reads as a statement rather than an alert. */
.mobile-app__notice[b-zl1vkeh2ar] {
    max-width: 42rem;
    margin: 0 0 1rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    border-left: 3px solid var(--rz-info, #2196f3);
    background: rgba(127, 127, 127, 0.12);
}

.mobile-app__field[b-zl1vkeh2ar] {
    max-width: 24rem;
    margin: 1.5rem 0 0.5rem;
}

.mobile-app__hint[b-zl1vkeh2ar] {
    margin: 0.375rem 0 0;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, inherit);
}

/* A cap, not a fixed size: the code stays scannable when the console itself is open on a
   phone. The white ground and padding are the quiet zone — the console is material-dark, and
   a QR flush against that chrome loses the contrast its finder patterns depend on. */
.mobile-app__code[b-zl1vkeh2ar] {
    width: 100%;
    max-width: 16rem;
    margin: 1rem 0;
    padding: 0.5rem;
    border-radius: 8px;
    background: #ffffff;
}

/* ::deep because the SVG arrives as a MarkupString and so carries no scope attribute. */
.mobile-app__code[b-zl1vkeh2ar]  svg {
    display: block;
    width: 100%;
    height: auto;
}

.mobile-app__manual[b-zl1vkeh2ar] {
    max-width: 32rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: var(--rz-card-border, 1px solid rgba(127, 127, 127, 0.35));
    background: var(--rz-base-background-color, transparent);
}

.mobile-app__manual-title[b-zl1vkeh2ar] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.mobile-app__manual-hint[b-zl1vkeh2ar] {
    margin: 0.25rem 0 0.75rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color, inherit);
}

/* Monospace so a hostname read out over the phone keeps O and 0 apart, break-all because an
   Azure hostname will not fit on one line, and user-select:all so a single click takes the
   whole value rather than a drag that stops short of it.

   The colour is set explicitly to beat Bootstrap's `code { color: #d63384 }`. The box tint is
   a translucent grey rather than a --rz-base-N step: in material-dark those steps run light
   (--rz-base-200 is #6c6c6c), so the obvious-looking choice puts a pale slab under pale text. */
.mobile-app__manual-value[b-zl1vkeh2ar] {
    display: block;
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.22);
    color: var(--rz-text-color, inherit);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: break-all;
    user-select: all;
}

.mobile-app__footnote[b-zl1vkeh2ar] {
    max-width: 42rem;
    color: var(--rz-text-secondary-color, inherit);
}

.mobile-app__status[b-zl1vkeh2ar] {
    margin: 0.75rem 0;
    color: var(--rz-text-secondary-color, inherit);
}

.mobile-app__status--error[b-zl1vkeh2ar] {
    color: var(--rz-danger, #f44336);
}