/* ==========================================================================
   Molnify auth surface — /auth/index.jsp and /auth/success.jsp.

   Loaded after commonCSS.jsp, so after Bootstrap 3, style.css,
   style-responsive.min.css, theme/default.css and commonCSS.jsp's own inline
   block. Everything here is scoped to the .mauth root or to a .mauth-* class
   that exists nowhere else, and every property those stylesheets would
   otherwise impose is stated explicitly rather than inherited.

   The .mauth-* control classes carry that prefix because the unprefixed names
   are already taken globally and would leak on properties this file does not
   restate:
     .btn, .btn-primary  Bootstrap and style.css
     .spinner            style.css, the full-page #page-loader spinner:
                         position:absolute at top/left 50% with negative margins
     .mark               Bootstrap, a yellow text highlight with .2em padding
     .note               style.css, a callout with padding and a left border

   Colour, type, space and shape come from tokens.css
   (/assets/bundles/css/tokens.css, published from
   frontend/packages/ui/src/tokens.css by a maven step). The only hard-coded
   colours are the vendor brand fills inside the provider logos.
   ========================================================================== */


/* --- page shell --------------------------------------------------------- */

/* bootstrap.min.css sets html { font-size: 10px }. The design tokens size text in
   rem, which resolves against the root and cannot be rescoped by a descendant, so
   every token step would render at 62.5%. */
:root {
    font-size: 16px;
}

/* style.css sets body { background:#d9e0e7; font-size:12px; font-family:'Open
   Sans' } and commonCSS.jsp sets html,body { height:100% }. */
body.mauth-body {
    background: var(--mui-color-surface-alt);
    -webkit-text-size-adjust: 100%;
}

.mauth {
    position: relative;
    height: 100vh;
    /* Second declaration, not a duplicate: the dynamic viewport keeps the
       bottom sheet clear of a collapsing mobile address bar. */
    height: 100dvh;
    overflow: hidden;
    background: var(--mui-color-surface-alt);

    font-family: var(--mui-font-sans);
    font-size: var(--mui-text-base);
    line-height: var(--mui-line-base);
    color: var(--mui-color-text);

    /* Every backdrop colour below is a --mui-* token mixed toward
       --mui-color-surface-alt by one of these percentages. The mix target is
       itself themed, so the plane recedes toward white in light and toward
       near-black in dark instead of needing a second set of values. */
    --bp-far: 7%;
    --bp-mid: 14%;
    --bp-near: 22%;
    --bp-accent: 30%;

    --bp-line: color-mix(in srgb, var(--mui-color-border-strong) 55%, var(--mui-color-surface-alt));
    --bp-fill: color-mix(in srgb, var(--mui-color-surface) 70%, var(--mui-color-surface-alt));
    --bp-fill-2: color-mix(in srgb, var(--mui-color-surface-hover) 70%, var(--mui-color-surface-alt));

    /* The one custom property outside the --bp-* ramp. No --mui-shadow-* casts
       sideways, and this panel is anchored to the left edge, so its occlusion
       shadow needs a horizontal offset no token can express. */
    --sheet-shadow-ink: color-mix(in srgb, var(--mui-color-heading) 26%, transparent);
}

:root[data-theme="dark"] .mauth {
    /* Dark surfaces compress value differences, so the same visual step needs a
       bigger mix. */
    --bp-far: 11%;
    --bp-mid: 19%;
    --bp-near: 30%;
    --bp-accent: 40%;

    /* Dark surfaces are already near-black, so a shadow mixed from any themed
       surface token would read as a glow. --mui-color-header-bg is the system's
       only untinted black. */
    --sheet-shadow-ink: color-mix(in srgb, var(--mui-color-header-bg) 78%, transparent);
}

/* Bootstrap already sets this globally; restated so the sheet's geometry does
   not depend on a rule in a stylesheet this page does not own. */
.mauth,
.mauth *,
.mauth *::before,
.mauth *::after {
    box-sizing: border-box;
}

/* commonCSS.jsp contains `html, body, #test1, svg { height:100%; width:100% }`,
   which would blow every inline logo up to the full sheet. Reset to the width
   and height each SVG declares on itself. */
.mauth svg {
    width: auto;
    height: auto;
}


/* --- back planes: shared chrome ----------------------------------------- */

.mauth .bp { position: absolute; inset: 0; }
.mauth .bp-topbar {
    position: absolute; left: 0; right: 0; top: 0; height: 54px;
    display: flex; align-items: center; gap: 14px;
    padding: 0 var(--mui-space-5);
    background: color-mix(in srgb, var(--mui-color-header-bg) 34%, var(--mui-color-surface-alt));
}
:root[data-theme="dark"] .mauth .bp-topbar {
    background: color-mix(in srgb, var(--mui-color-header-bg) 55%, var(--mui-color-surface-alt));
}
.mauth .bp-topbar span {
    display: block; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-text-inverse) 34%, transparent);
    height: 9px;
}
.mauth .bp-topbar .bp-brandmark { width: 74px; height: 14px; border-radius: var(--mui-radius-sm); }
.mauth .bp-topbar .n1 { width: 58px; }
.mauth .bp-topbar .n2 { width: 44px; }
.mauth .bp-topbar .n3 { width: 66px; }
.mauth .bp-topbar .n4 { width: 38px; }
.mauth .bp-topbar .bp-avatar { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; }
.mauth .bp-topbar .bp-pill {
    height: 24px; background: none;
    border: 1px solid color-mix(in srgb, var(--mui-color-text-inverse) 26%, transparent);
    border-radius: var(--mui-radius-sm);
}
.mauth .bp-topbar .bp-pill.p1 { width: 88px; }
.mauth .bp-topbar .bp-pill.p2 { width: 58px; }
.mauth .bp-topbar .bp-hgroup {
    display: flex; align-items: center; gap: var(--mui-space-2);
    margin-left: auto; background: none; height: auto;
}
.mauth .bp-topbar .bp-apptitle { width: 78px; height: 11px; }
.mauth .bp-topbar .bpb-burger { display: none; }


/* --- back plane: generic ------------------------------------------------- */

.mauth .bp-rulings {
    position: absolute; inset: -40px -40px 0 -40px;
    background-image:
        repeating-linear-gradient(to right,  var(--bp-line) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(to bottom, var(--bp-line) 0 1px, transparent 1px 36px);
    /* Alpha stops only — no colour value here, so the mask stays theme-agnostic. */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 14%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 100%);
}
/* Snapped to the ruling pitch (96 x 36 from .bp-rulings' own origin), so the
   inline left/top values in the markup and these dimensions move together. */
.mauth .bp-cell { position: absolute; width: 95px; height: 35px; }
.mauth .bp-cell.i { background: color-mix(in srgb, var(--mui-role-input) var(--bp-mid), var(--mui-color-surface-alt)); }
.mauth .bp-cell.c { background: color-mix(in srgb, var(--mui-role-chart) var(--bp-mid), var(--mui-color-surface-alt)); }

.mauth .bp-canvas {
    position: absolute; left: 430px; top: 116px;
    width: 900px;   /* Wider than the room it has: cropped, not fitted. */
    display: grid; gap: var(--mui-space-5);
}
.mauth .bp-approw { display: flex; align-items: center; gap: var(--mui-space-3); }
.mauth .bp-approw > span { flex: none; }
.mauth .bp-approw .bp-apptitle-bar {
    width: 288px; height: 22px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-near), var(--mui-color-surface-alt));
}
.mauth .bp-approw .bp-spacer { flex: 1 1 auto; }
.mauth .bp-approw .bp-sel {
    width: 116px; height: 26px; border-radius: var(--mui-radius-sm);
    background: var(--bp-fill); border: 1px solid var(--bp-line);
}
.mauth .bp-approw .bp-iconbtn {
    width: 26px; height: 26px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-brand) var(--bp-accent), var(--mui-color-surface-alt));
}

.mauth .bp-cols { display: grid; grid-template-columns: 330px 1fr; gap: var(--mui-space-5); align-items: start; }
.mauth .bp-rightcol { display: grid; gap: var(--mui-space-5); }
.mauth .bp-panel {
    background: var(--bp-fill); border: 1px solid var(--bp-line);
    border-radius: var(--mui-radius); overflow: hidden;
}
.mauth .bp-panelhead {
    display: flex; align-items: center; gap: var(--mui-space-2);
    height: 34px; padding: 0 var(--mui-space-4);
    background: var(--bp-fill-2); border-bottom: 1px solid var(--bp-line);
}
.mauth .bp-paneltitle {
    width: 96px; height: 10px; margin-right: auto; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-mid), var(--mui-color-surface-alt));
}
.mauth .bp-panelhead .bp-dot {
    flex: none; width: 14px; height: 14px; border-radius: 50%;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bp-panelbody { padding: var(--mui-space-4); }

.mauth .bp-formrow { display: flex; align-items: center; gap: var(--mui-space-3); margin-bottom: var(--mui-space-3); }
.mauth .bp-formrow:last-child { margin-bottom: 0; }
.mauth .bp-lbl {
    flex: 0 0 33%; height: 9px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bp-ctl {
    flex: 1 1 auto; height: 30px; border-radius: var(--mui-radius-sm);
    background: var(--mui-color-surface-alt);
    border: 1px solid var(--bp-line);
}
.mauth .bp-formrow.short .bp-lbl { flex-basis: 24%; }
.mauth .bp-formrow.wide .bp-lbl { flex-basis: 40%; }

.mauth .bp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--mui-space-5); }
.mauth .bp-kpi-lbl {
    width: 62px; height: 8px; border-radius: var(--mui-radius-sm); margin-bottom: var(--mui-space-3);
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bp-kpi-val {
    width: 112px; height: 26px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-near), var(--mui-color-surface-alt));
}
.mauth .bp-kpi:nth-child(2) .bp-kpi-val {
    width: 88px;
    background: color-mix(in srgb, var(--mui-color-brand) var(--bp-accent), var(--mui-color-surface-alt));
}
.mauth .bp-kpi:nth-child(3) .bp-kpi-val { width: 100px; }

.mauth .bp-chart { display: flex; align-items: flex-end; gap: var(--mui-space-3); height: 176px; }
.mauth .bp-chart i {
    flex: 1 1 0; border-radius: 3px 3px 0 0;
    background: color-mix(in srgb, var(--mui-role-chart) var(--bp-accent), var(--mui-color-surface-alt));
}
.mauth .bp-chart i.alt {
    background: color-mix(in srgb, var(--mui-role-chart) calc(var(--bp-accent) / 2), var(--mui-color-surface-alt));
}


/* --- back plane: App Builder --------------------------------------------- */

.mauth .bpb-row {
    /* Runs past the right edge on purpose: the preview pane is cut off rather
       than fitted, and everything left of the sheet's 476px is occluded. */
    position: absolute; left: 300px; right: -84px; top: 54px; bottom: 0;
    display: flex; min-height: 0;
}

.mauth .bpb-rail {
    width: 240px; flex: 0 0 240px; display: flex; flex-direction: column;
    border-right: 1px solid var(--bp-line); padding: 12px 0;
}
.mauth .bpb-field {
    padding: 0 12px 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--bp-line); display: grid; gap: 6px;
}
.mauth .bpb-fieldlbl {
    width: 68px; height: 7px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bpb-select {
    height: 26px; border-radius: var(--mui-radius-sm);
    background: var(--bp-fill); border: 1px solid var(--bp-line);
}
.mauth .bpb-fieldlink {
    width: 104px; height: 7px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-brand) var(--bp-accent), var(--mui-color-surface-alt));
}
.mauth .bpb-new {
    height: 30px; margin: 0 8px 10px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-brand) var(--bp-accent), var(--mui-color-surface-alt));
}
.mauth .bpb-sessions { padding: 0 8px; display: grid; gap: 2px; align-content: start; }
.mauth .bpb-item {
    display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px;
    border-radius: var(--mui-radius-sm);
}
.mauth .bpb-item.active {
    background: color-mix(in srgb, var(--mui-color-surface-selected) 60%, var(--mui-color-surface-alt));
}
.mauth .bpb-item .t {
    flex: 1 1 auto; height: 7px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bpb-item.active .t {
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-mid), var(--mui-color-surface-alt));
}
.mauth .bpb-item .m {
    flex: 0 0 24px; height: 6px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) calc(var(--bp-far) / 1.6), var(--mui-color-surface-alt));
}
.mauth .bpb-item:nth-child(2) .t { max-width: 82%; }
.mauth .bpb-item:nth-child(4) .t { max-width: 64%; }
.mauth .bpb-item:nth-child(5) .t { max-width: 90%; }
.mauth .bpb-item:nth-child(6) .t { max-width: 55%; }
.mauth .bpb-item:nth-child(7) .t { max-width: 76%; }

.mauth .bpb-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mauth .bpb-sesshead {
    display: flex; align-items: center; gap: 10px; height: 36px;
    padding: 0 16px 0 32px; border-bottom: 1px solid var(--bp-line); flex: 0 0 auto;
}
.mauth .bpb-sesshead .t {
    width: 150px; height: 7px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bpb-sesshead .b {
    margin-left: auto; width: 46px; height: 20px;
    border-radius: var(--mui-radius-sm); border: 1px solid var(--bp-line);
}
.mauth .bpb-sesshead .b + .b { margin-left: 0; }

.mauth .bpb-transcript {
    flex: 1 1 auto; min-height: 0; padding: 24px 32px;
    display: flex; flex-direction: column; justify-content: flex-end;
    gap: 14px; overflow: hidden;
}
.mauth .bpb-e { display: flex; gap: 14px; align-items: flex-start; }
/* Fixed 64px role column so every body edge lines up; only the bar inside it
   varies. */
.mauth .bpb-e .role { flex: 0 0 64px; margin-top: 3px; }
.mauth .bpb-e .role::before {
    content: ""; display: block; width: 38px; height: 7px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bpb-e .role.w2::before { width: 24px; }
.mauth .bpb-e .body { flex: 1 1 auto; min-width: 0; display: grid; gap: 7px; }
.mauth .bpb-e .body span {
    height: 8px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-mid), var(--mui-color-surface-alt));
}
.mauth .bpb-e.user .body span {
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-near), var(--mui-color-surface-alt));
}
.mauth .bpb-e .body span.s60 { width: 60%; }
.mauth .bpb-e .body span.s75 { width: 75%; }
.mauth .bpb-e .body span.s88 { width: 88%; }
.mauth .bpb-e .body span.s42 { width: 42%; }
.mauth .bpb-tool { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.mauth .bpb-tool .dot {
    flex: 0 0 8px; height: 8px; border-radius: 50%;
    background: color-mix(in srgb, var(--mui-color-success) var(--bp-accent), var(--mui-color-surface-alt));
}
.mauth .bpb-tool.run .dot {
    background: color-mix(in srgb, var(--mui-color-pending) var(--bp-accent), var(--mui-color-surface-alt));
}
.mauth .bpb-tool .s {
    height: 7px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bpb-tool .s.a { width: 176px; }
.mauth .bpb-tool .s.b { width: 128px; }
.mauth .bpb-tool .s.c { width: 204px; }
.mauth .bpb-done { border-top: 1px solid var(--bp-line); padding-top: 10px; margin-top: 2px; }
.mauth .bpb-done .s {
    width: 148px; height: 7px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}

.mauth .bpb-artefacts {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 8px 32px; border-top: 1px solid var(--bp-line);
}
.mauth .bpb-chip {
    height: 26px; border-radius: var(--mui-radius-sm);
    background: var(--bp-fill); border: 1px solid var(--bp-line);
}
.mauth .bpb-chip.c1 { width: 96px; }
.mauth .bpb-chip.c2 { width: 78px; }
.mauth .bpb-chip.add {
    width: 62px; background: none;
    border: 2px dashed var(--bp-line); border-radius: var(--mui-radius);
}

.mauth .bpb-composer {
    flex: 0 0 auto; display: flex; align-items: flex-end; gap: 10px;
    padding: 12px 32px 20px; border-top: 1px solid var(--bp-line);
}
.mauth .bpb-textarea {
    flex: 1 1 auto; height: 64px; border-radius: var(--mui-radius-sm);
    background: var(--bp-fill); border: 1px solid var(--bp-line);
}
.mauth .bpb-send {
    flex: 0 0 100px; height: 40px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-brand) var(--bp-accent), var(--mui-color-surface-alt));
}

.mauth .bpb-preview { flex: 0 0 300px; display: flex; border-left: 1px solid var(--bp-line); }
.mauth .bpb-strip { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; }
.mauth .bpb-strip i {
    display: block; width: 7px; height: 62px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bpb-pvcontent { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mauth .bpb-pvbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--bp-line);
}
.mauth .bpb-pvclose {
    width: 12px; height: 12px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bpb-devices {
    display: flex; gap: 2px; padding: 2px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-surface-selected) 60%, var(--mui-color-surface-alt));
}
.mauth .bpb-devices i { display: block; width: 34px; height: 20px; border-radius: var(--mui-radius-sm); }
.mauth .bpb-devices i.on { background: var(--bp-fill); }
.mauth .bpb-pvactions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mauth .bpb-pvid {
    width: 92px; height: 22px; border-radius: var(--mui-radius-sm);
    background: var(--bp-fill); border: 1px solid var(--bp-line);
}
.mauth .bpb-pvload {
    width: 44px; height: 22px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-secondary) var(--bp-accent), var(--mui-color-surface-alt));
}
.mauth .bpb-pvpublish {
    width: 56px; height: 22px; border-radius: var(--mui-radius-sm);
    background: color-mix(in srgb, var(--mui-color-brand) var(--bp-accent), var(--mui-color-surface-alt));
}
.mauth .bpb-pvport { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; padding: 14px 0 0; }
/* An empty device frame. It stays empty: this page renders no application data
   of any kind, so nothing an app author wrote is renderable here. */
.mauth .bpb-frame {
    width: 208px; border-radius: var(--mui-radius-sm);
    background: var(--bp-fill); border: 1px solid var(--bp-line);
    padding: 14px; display: grid; gap: 10px; align-content: start;
}
.mauth .bpb-frame span {
    height: 8px; border-radius: 3px;
    background: color-mix(in srgb, var(--mui-color-text) var(--bp-far), var(--mui-color-surface-alt));
}
.mauth .bpb-frame span.h { width: 66%; height: 12px; }
.mauth .bpb-frame span.m { width: 84%; }
.mauth .bpb-frame span.n { width: 48%; }


/* --- the sheet ----------------------------------------------------------- */

.mauth .sheet {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 476px;
    background: var(--mui-color-surface);
    border-right: 1px solid var(--mui-color-border-strong);
    overflow-y: auto;
    /* --mui-shadow-lg throws downward, which is wrong for a panel anchored to
       the left edge. Same shadow, rotated 90 degrees. */
    box-shadow: 26px 0 60px -14px var(--sheet-shadow-ink);
}

.mauth .sheet-inner {
    padding: var(--mui-space-7) var(--mui-space-7) var(--mui-space-6);
    min-height: 100%; display: flex; flex-direction: column;
}

.mauth .sheet-head { margin-bottom: var(--mui-space-6); }
.mauth .wordmark { margin: 0; font-size: 0; line-height: 0; }
.mauth .wordmark a { display: inline-block; }
.mauth .mlp { fill: var(--mui-color-brand); }
.mauth .glg-b { fill: #4285F4; }
.mauth .glg-g { fill: #34A853; }
.mauth .glg-y { fill: #FBBC04; }
.mauth .glg-r { fill: #EA4335; }
.mauth .sheet h2 {
    margin: var(--mui-space-5) 0 0;
    font-size: var(--mui-text-xl); line-height: 1.25; letter-spacing: -0.01em; font-weight: 700;
    color: var(--mui-color-heading);
    font-family: var(--mui-font-sans);
}


/* --- controls ------------------------------------------------------------ */

/* Height is padding-derived: 14px text at 1.5, plus 12px of padding top and
   bottom, plus the 1px border, lands on 47px. Buttons, text inputs and tabs all
   use that one recipe, which is how every control clears the 44px touch-target
   floor without a min-height anywhere. Change the padding and that floor goes. */
.mauth-btn {
    display: flex; align-items: center; gap: var(--mui-space-3);
    width: 100%; padding: var(--mui-space-3) var(--mui-space-4);
    font-family: var(--mui-font-sans); font-size: var(--mui-text-sm);
    font-weight: 600; line-height: 1.5;
    border-radius: var(--mui-radius-sm);
    cursor: pointer;
    /* -webkit-appearance:button is the UA default and reasserts a native look on
       iOS once a background is set; the rest are style.css's .btn defaults. */
    -webkit-appearance: none; appearance: none;
    background-image: none; text-shadow: none; box-shadow: none;
    transition: background-color 120ms ease, border-color 120ms ease;
}
.mauth-btn-federated {
    background: var(--mui-color-surface);
    color: var(--mui-color-text);
    border: 1px solid var(--mui-color-border-strong);
    text-align: left;
}
.mauth-btn-federated:hover,
.mauth-btn-federated:focus {
    background: var(--mui-color-surface-hover);
    border-color: var(--mui-color-brand);
    color: var(--mui-color-text);
}
/* padding and background are restated because Bootstrap's .mark reaches these
   elements under any name close to it. */
.mauth-btn .mauth-mark {
    flex: 0 0 20px; display: flex; align-items: center; justify-content: center;
    padding: 0; background: none;
}
.mauth .federated { display: grid; gap: var(--mui-space-2); }

.mauth .sso-mark {
    width: 20px; height: 20px; border-radius: var(--mui-radius-sm);
    background: var(--mui-color-secondary); color: var(--mui-color-text-inverse);
    font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

.mauth .rule {
    display: flex; align-items: center; gap: var(--mui-space-3);
    margin: var(--mui-space-5) 0 var(--mui-space-4);
}
.mauth .rule::before,
.mauth .rule::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--mui-color-border); }
.mauth .rule span {
    font-size: var(--mui-text-xs); color: var(--mui-color-text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
}

.mauth-btn-quiet {
    background: transparent;
    color: var(--mui-color-text-secondary);
    border: 1px solid var(--mui-color-border);
    font-weight: 600;
}
.mauth-btn-quiet:hover,
.mauth-btn-quiet:focus {
    background: var(--mui-color-surface-alt);
    color: var(--mui-color-text);
    border-color: var(--mui-color-brand);
}
.mauth-btn-quiet .mauth-mark { flex: 0 0 20px; display: flex; align-items: center; }
.mauth-btn-quiet svg { display: block; }

.mauth-btn-primary {
    justify-content: center;
    background: var(--mui-color-brand);
    color: var(--mui-color-text-inverse);
    border: 1px solid var(--mui-color-brand);
    font-weight: 600;
}
.mauth-btn-primary:hover,
.mauth-btn-primary:focus,
.mauth-btn-primary:active {
    background: var(--mui-color-brand-strong);
    border-color: var(--mui-color-brand-strong);
    color: var(--mui-color-text-inverse);
}
.mauth-btn-primary[aria-busy="true"] { cursor: progress; }
/* currentColor so the spinner tracks the label through hover and the disabled
   state. */
.mauth-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
    border-top-color: currentColor;
    animation: mauth-spin 0.6s linear infinite;
    display: none;
}
.mauth-btn-primary[aria-busy="true"] .mauth-spinner { display: block; }
@keyframes mauth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mauth-spinner { animation-duration: 2.4s; } }

/* style.css has `.btn:focus { outline: none }` at (0,2,0). The .mauth prefix is
   what carries this to (0,2,0) as well, and auth.css is loaded later. */
.mauth :where(button, a, input, [tabindex]):focus-visible {
    outline: 2px solid var(--mui-color-focus);
    outline-offset: 2px;
}

.mauth a.link {
    color: var(--mui-color-brand-strong);
    font-size: var(--mui-text-sm);
    text-underline-offset: 3px;
    cursor: pointer;
}
.mauth a.link:hover,
.mauth a.link:focus { color: var(--mui-color-brand-strong); text-decoration-thickness: 2px; }


/* --- email path ---------------------------------------------------------- */

/* display:contents so this wrapper adds nothing to the layout: auth.js swaps
   its contents rather than re-mounting the scrolling panel. */
.mauth .email-zone { display: contents; }
.mauth .email-panel { margin-top: var(--mui-space-4); }
.mauth .tabs {
    display: flex; gap: var(--mui-space-5);
    border-bottom: 1px solid var(--mui-color-border);
    margin-bottom: var(--mui-space-5);
}
.mauth .tab {
    -webkit-appearance: none; appearance: none;
    background: none; border: 0;
    font-family: var(--mui-font-sans); font-size: var(--mui-text-sm);
    font-weight: 600; line-height: 1.5; color: var(--mui-color-text-muted);
    padding: var(--mui-space-3) 0;
    cursor: pointer;
    /* The -1px pulls the indicator onto .tabs' own border rather than below it. */
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mauth .tab[aria-selected="true"] { color: var(--mui-color-heading); border-bottom-color: var(--mui-color-brand-strong); }
.mauth .tab:hover { color: var(--mui-color-text); }

.mauth .field { margin-bottom: var(--mui-space-4); }
.mauth .field > label {
    display: block; font-size: var(--mui-text-sm); font-weight: 600;
    color: var(--mui-color-text-secondary); margin-bottom: var(--mui-space-2);
}
.mauth .field input {
    width: 100%; padding: var(--mui-space-3) var(--mui-space-4);
    font-family: var(--mui-font-sans); font-size: var(--mui-text-sm); line-height: 1.5;
    color: var(--mui-color-text);
    background: var(--mui-color-surface);
    border: 1px solid var(--mui-color-border-strong);
    border-radius: var(--mui-radius-sm);
    /* Safari gives text inputs an inset shadow and its own corner radius. */
    -webkit-appearance: none; appearance: none;
    box-shadow: none; height: auto;
}
.mauth .field input::placeholder { color: var(--mui-color-text-muted); }
.mauth .pw-wrap { position: relative; display: flex; }
.mauth .pw-wrap input { padding-right: calc(var(--mui-space-7) + var(--mui-space-5)); }
/* Visually hidden but announced. Two password fields on the create screen would
   otherwise both expose the accessible name "Show", leaving a screen reader
   user unable to tell which field each button belongs to. The visible word
   stays "Show", so it remains contained in the accessible name and Label in
   Name is satisfied. */
.mauth .vh {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
}
/* No height here on purpose: the toggle takes the field's, so it stays above
   the 44px floor with it. */
.mauth .pw-toggle {
    position: absolute; right: 1px; top: 1px; bottom: 1px;
    padding: 0 var(--mui-space-3);
    font-family: var(--mui-font-sans); font-size: var(--mui-text-xs); font-weight: 600;
    color: var(--mui-color-text-secondary);
    background: none; border: 0; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    border-radius: 0 var(--mui-radius-sm) var(--mui-radius-sm) 0;
}
.mauth .pw-toggle:hover { color: var(--mui-color-text); background: var(--mui-color-surface-hover); }

/* The border thickens to 2px; the padding gives that 1px back on every side so
   the content box, and therefore the field's height and the text's position, do
   not move when an error appears. */
.mauth .field.has-error input {
    border-color: var(--mui-color-danger-strong); border-width: 2px;
    padding: calc(var(--mui-space-3) - 1px) calc(var(--mui-space-4) - 1px);
    background: var(--mui-color-danger-bg);
}
.mauth .field.has-error .pw-wrap input { padding-right: calc(var(--mui-space-7) + var(--mui-space-5) - 1px); }
.mauth .err {
    display: flex; gap: var(--mui-space-2); align-items: flex-start;
    margin: var(--mui-space-2) 0 0;
    font-size: var(--mui-text-sm); color: var(--mui-color-danger-strong); font-weight: 600;
}
.mauth .err::before {
    content: "!"; flex: 0 0 16px; height: 16px; margin-top: 3px; border-radius: 50%;
    background: var(--mui-color-danger-strong); color: var(--mui-color-text-inverse);
    font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}
/* The form's non-error outcome — today only the password-reset confirmation.
   Same shape as .err so the two read as one region. Prefixed because style.css
   owns .note, where it is a callout with 15px of padding and a left border. */
.mauth .mauth-note {
    display: flex; gap: var(--mui-space-2); align-items: flex-start;
    margin: var(--mui-space-2) 0 0;
    font-size: var(--mui-text-sm); color: var(--mui-color-success-strong); font-weight: 600;
}
.mauth .form-foot { display: flex; justify-content: flex-end; margin: calc(-1 * var(--mui-space-1)) 0 var(--mui-space-5); }

/* margin-bottom is restated: Bootstrap gives every p a 10px one. */
.mauth .sheet-foot {
    margin: auto 0 0; padding-top: var(--mui-space-6);
    font-size: var(--mui-text-xs); color: var(--mui-color-text-muted);
}
.mauth .sheet-foot a { color: var(--mui-color-brand-strong); }

.mauth .inbox-mark {
    width: var(--mui-space-7); height: var(--mui-space-7); border-radius: var(--mui-radius);
    background: var(--mui-color-brand-tint);
    /* The glyph inside strokes with currentColor. */
    color: var(--mui-color-tip);
    display: flex; align-items: center; justify-content: center;
    margin: var(--mui-space-5) 0 var(--mui-space-5);
}
.mauth .inbox-mark svg { display: block; }
.mauth .inbox-body { margin: 0; font-size: var(--mui-text-sm); color: var(--mui-color-text-secondary); max-width: 36ch; }
.mauth .inbox-body strong { color: var(--mui-color-text); font-weight: 600; }
.mauth .inbox-actions { display: flex; gap: var(--mui-space-5); margin: var(--mui-space-5) 0 0; }

/* Keyed on aria-disabled as well as the attribute, so an in-flight submit can
   read as unavailable without losing focus. */
.mauth .sheet :where(button, input):disabled,
.mauth .sheet :where(button, input)[aria-disabled="true"] {
    background: var(--mui-color-control-disabled);
    border-color: var(--mui-color-control-disabled);
    color: var(--mui-color-text-inverse);
    cursor: default;
}


/* --- account-linking modal -----------------------------------------------
   Bootstrap 3 renders it, and its markup sits inside .mauth so the control
   classes above reach it. Nothing here may set transform, filter or
   will-change on an ancestor: that would make .mauth the containing block for
   the modal's position:fixed. */

.mauth .modal-content {
    border-radius: var(--mui-radius);
    background: var(--mui-color-surface);
    border: 1px solid var(--mui-color-border);
    box-shadow: var(--mui-shadow-md);
}
.mauth .modal-header { border-bottom: 0; padding: var(--mui-space-5) var(--mui-space-5) 0; }
.mauth .modal-body { padding: var(--mui-space-5); display: grid; gap: var(--mui-space-2); }
.mauth .modal-header .linkHeader {
    margin: 0;
    font-family: var(--mui-font-sans); font-size: var(--mui-text-lg);
    line-height: 1.25; font-weight: 700; color: var(--mui-color-heading);
}
.mauth .linkText {
    margin: 0 0 var(--mui-space-2);
    font-size: var(--mui-text-sm); color: var(--mui-color-text-secondary);
}
.mauth .modal-body .mauth-btn-quiet { justify-content: center; }


/* --- narrow viewports -----------------------------------------------------
   767px is the site's own phone breakpoint. Below it the sheet becomes a bottom
   sheet and the backdrop keeps a strip. */

@media (max-width: 767px) {
    .mauth .bp-canvas { left: 16px; top: 62px; width: 460px; }
    .mauth .bp-cols { grid-template-columns: 1fr; }
    .mauth .bp-topbar { height: 48px; gap: var(--mui-space-2); padding: 0 var(--mui-space-4); }
    .mauth .bp-topbar .n3,
    .mauth .bp-topbar .n4 { display: none; }
    .mauth .bp-approw .bp-apptitle-bar { width: 168px; height: 18px; }

    /* Matches the real App Builder, where the rail becomes a drawer below
       1024px and the two chrome buttons stack below 640px. */
    .mauth .bpb-topbar { height: 68px; }
    .mauth .bpb-topbar .bp-hgroup { flex-direction: column; align-items: stretch; gap: 4px; }
    .mauth .bpb-topbar .bp-pill.p1,
    .mauth .bpb-topbar .bp-pill.p2 { width: 54px; height: 20px; }
    .mauth .bpb-burger { display: block; width: 14px; height: 11px; }
    .mauth .bpb-row { left: 0; right: -170px; top: 68px; }
    .mauth .bpb-rail { display: none; }
    .mauth .bpb-transcript { padding: 16px 20px; }
    .mauth .bpb-sesshead { padding-left: 20px; }
    .mauth .bpb-preview { display: none; }

    .mauth .sheet {
        left: 0; right: 0; top: 148px; bottom: 0; width: auto;
        border-right: 0; border-top: 1px solid var(--mui-color-border-strong);
        border-radius: var(--mui-radius) var(--mui-radius) 0 0;
        box-shadow: 0 -18px 44px -14px var(--sheet-shadow-ink);
    }
    .mauth .sheet-inner { padding: var(--mui-space-6) var(--mui-space-5) var(--mui-space-5); }
    .mauth .sheet h2 { margin-top: var(--mui-space-4); font-size: var(--mui-text-md); }
}