/* Login v1: the landing-page frame expands around its original centre. */
.login-stage-v1 {
    --login-frame-width: min(28rem, calc(100vw - 32px));
    --login-frame-radius: 20px;
    --login-primary: #3e6994;
}

.login-stage-v1 .b-div {
    overflow: visible;
}

.login-frame-v1 {
    width: var(--login-frame-width);
    border-radius: var(--login-frame-radius);
}

.login-frame-v1 #lpl {
    display: none;
    white-space: nowrap;
    cursor: default;
}

.login-frame-v1 #lsfwdiv {
    display: block;
    width: 100%;
    margin: 0;
    font-size: 1rem;
    text-align: left;
    box-shadow: none;
}

.login-frame-v1 .lsfHeading {
    position: relative;
    width: fit-content;
    min-width: 9rem;
    max-width: calc(100% - 32px);
    margin: -10px auto 14px;
    padding: 6px 22px 10px;
    border-radius: 0 0 18px 18px;
    background: var(--login-primary);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Concave shoulders join the inset title smoothly to the upper frame. */
.login-frame-v1 .lsfHeading::before,
.login-frame-v1 .lsfHeading::after {
    content: "";
    position: absolute;
    top: 0;
    width: 12px;
    height: 12px;
    pointer-events: none;
}

.login-frame-v1 .lsfHeading::before {
    left: -12px;
    background: radial-gradient(circle at bottom left, transparent 11.5px, var(--login-primary) 12px);
}

.login-frame-v1 .lsfHeading::after {
    right: -12px;
    background: radial-gradient(circle at bottom right, transparent 11.5px, var(--login-primary) 12px);
}

.login-frame-v1 #lsfwdiv .lsfInput {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 10px;
    /* Match the signed-in main search surface (#st in tscss.css). */
    border: 1px solid #babecc;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: -3px 3px 5px #babecc;
}

.login-frame-v1 .lsfButton {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.login-frame-v1 .fsa {
    left: 10px;
}

.login-frame-v1 .fsb {
    right: 10px;
}

.login-page-v1 .header a.login-v1-menu {
    display: block;
    font-size: 16px;
}

.login-page-v1 .login-v1-menu:focus-visible {
    outline: 3px solid #f0a202;
    outline-offset: 3px;
}

.login-page-v1 #dsli {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
}

.login-page-v1 .lsfNoscript {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 12px 20px;
    text-align: center;
}

/* Applied by the small head script before the first paint. Without it the
   usable, centred form is the default, including when the script cannot load. */
.login-morph-v1-pending .login-frame-v1 {
    width: auto;
}

.login-morph-v1-pending .login-frame-v1 #lpl {
    display: inline;
}

.login-morph-v1-pending .login-frame-v1 #lsfwdiv {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--login-frame-width) - 30px);
    visibility: hidden;
    opacity: 0;
}

.login-morph-v1-pending #toupp,
.login-morph-v1-pending #dsli {
    visibility: hidden;
}

.login-morph-v1-revealing .login-frame-v1 #lsfwdiv {
    visibility: visible;
}

.login-frame-v1.login-panel-resizing {
    overflow: hidden;
    overflow: clip;
}

/* Keep the search-style border and shadow without a second focus outline. */
.login-page-v1 :is(input, button, a, [tabindex]):is(:focus, :focus-visible),
.login-page-v1 #toupp a:is(:focus, :focus-visible) {
    outline: none;
}

/* On short screens, keep the entire active panel below the fixed header.
   Normal-sized screens retain exactly the landing page's centre. */
.login-morph-v1-ready .login-frame-v1 {
    top: max(50%, calc(96px - (100vh - 84px) / 4 + var(--login-frame-height, 0px) / 2));
}

.login-morph-v1-ready .login-page-v1 {
    min-height: max(100vh, calc(var(--login-frame-height, 0px) + 160px));
}

.login-morph-v1-ready #toupp {
    position: absolute;
    top: max(calc(100vh - 30px), calc(var(--login-frame-height, 0px) + 128px));
    bottom: auto;
}