/**
 * Power Suite — sign-in screen.
 *
 * Three rules hold this together:
 *
 *  1. Only the field moves. The card, the panel, the date and the soft circle
 *     are static. Motion lives behind the composition, never inside it.
 *  2. Frosted glass DESATURATES. Every glass surface is blur + saturate below
 *     100% + a small brightness lift over a strong neutral white.
 *  3. Nothing here states a colour. Every value is a token; the DesignSystem
 *     test fails the build if a literal appears in this file.
 */

.ps-login-body {
    background: var(--ps-login-base);
    color: var(--pl-text-color);
    display: grid;
    font-family: var(--pl-font-family);
    font-size: 11.5px;
    font-weight: 200;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
    overflow: hidden;
    place-items: center;
}

.ps-login-body :where(button, input, textarea, select) {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* ── the field ─────────────────────────────────────────────────────────── */

.ps-login-field {
    background: var(--ps-login-base);
    inset: 0;
    overflow: hidden;
    position: fixed;
    z-index: var(--pl-layer-field);
}

/*
 * Rake light — the only hard edge on the field.
 *
 * Every blob below is blurred 60px, which is wider than the card itself, so
 * nothing behind the card has an edge and its backdrop-filter had nothing to
 * bend. Tuning the blur could never fix that: a blur of a blur is the same
 * blur. These bands are the structure the card refracts, and without them the
 * card optics in tokens.css do almost nothing.
 *
 * Faint in the open on purpose — a lit field does not want stripes across it —
 * and masked out before the board's column, so the right side is untouched.
 */
.ps-login-rake {
    background: repeating-linear-gradient(
        118deg,
        var(--transparent) 0 96px,
        var(--ps-login-rake-band) 96px 164px,
        var(--transparent) 164px 212px
    );
    inset: 0;
    /* Light enters from the left, gone well before the board. */
    -webkit-mask-image: linear-gradient(90deg, var(--full-white) 0%, var(--full-white) 34%, var(--transparent) 58%);
    mask-image: linear-gradient(90deg, var(--full-white) 0%, var(--full-white) 34%, var(--transparent) 58%);
    pointer-events: none;
    position: absolute;
}

.ps-login-blob {
    border-radius: 50%;
    filter: blur(60px);
    mix-blend-mode: screen;
    position: absolute;
    will-change: transform, opacity;
}

.ps-login-blob[data-blob="1"] {
    animation: ps-login-drift-1 34s ease-in-out infinite;
    background: var(--ps-login-blob-1);
    height: 70vw;
    left: -14vw;
    top: -22vw;
    width: 70vw;
}

.ps-login-blob[data-blob="2"] {
    animation: ps-login-drift-2 42s ease-in-out infinite;
    background: var(--ps-login-blob-2);
    height: 62vw;
    right: -16vw;
    top: -14vw;
    width: 62vw;
}

.ps-login-blob[data-blob="3"] {
    animation: ps-login-drift-3 38s ease-in-out infinite;
    background: var(--ps-login-blob-3);
    bottom: -40vw;
    height: 76vw;
    left: 16vw;
    width: 76vw;
}

.ps-login-blob[data-blob="4"] {
    animation: ps-login-drift-4 46s ease-in-out infinite;
    background: var(--ps-login-blob-4);
    bottom: -18vw;
    height: 52vw;
    left: -8vw;
    width: 52vw;
}

.ps-login-blob[data-blob="5"] {
    animation: ps-login-drift-5 30s ease-in-out infinite;
    background: var(--ps-login-blob-5);
    bottom: -10vw;
    height: 44vw;
    right: 6vw;
    width: 44vw;
}

@keyframes ps-login-drift-1 {
    0%, 100% { opacity: 0.95; transform: translate3d(0, 0, 0) scale(1); }
    50% { opacity: 0.7; transform: translate3d(26vw, 16vh, 0) scale(1.28); }
}

@keyframes ps-login-drift-2 {
    0%, 100% { opacity: 0.8; transform: translate3d(0, 0, 0) scale(1.12); }
    50% { opacity: 1; transform: translate3d(-22vw, 22vh, 0) scale(0.85); }
}

@keyframes ps-login-drift-3 {
    0%, 100% { opacity: 0.85; transform: translate3d(0, 0, 0) scale(1); }
    50% { opacity: 0.6; transform: translate3d(-28vw, -20vh, 0) scale(1.3); }
}

@keyframes ps-login-drift-4 {
    0%, 100% { opacity: 0.7; transform: translate3d(0, 0, 0) scale(1.15); }
    50% { opacity: 1; transform: translate3d(30vw, -14vh, 0) scale(0.9); }
}

@keyframes ps-login-drift-5 {
    0%, 100% { opacity: 0.55; transform: translate3d(0, 0, 0) scale(0.9); }
    50% { opacity: 0.9; transform: translate3d(-18vw, -18vh, 0) scale(1.25); }
}

/* The photo layer. Invisible while --ps-login-image is `none`; the moment the
   Settings application points it at a file it covers the field and drifts. */
.ps-login-photo {
    animation: ps-login-photo-drift 34s ease-in-out infinite;
    background-image: var(--ps-login-image);
    background-position: center;
    background-size: cover;
    inset: 0;
    overflow: hidden;
    position: fixed;
    z-index: var(--pl-layer-field);
}

.ps-login-photo::after {
    background: var(--pl-control-surface);
    content: "";
    inset: 0;
    opacity: var(--ps-login-wash);
    position: absolute;
}

@keyframes ps-login-photo-drift {
    0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
    50% { transform: scale(1.18) translate3d(-2.5%, -2%, 0); }
}

/* ── grain ─────────────────────────────────────────────────────────────── */

.ps-login-grain,
.ps-login-grain-fine {
    pointer-events: none;
    position: fixed;
    z-index: var(--pl-layer-grain);
}

.ps-login-grain {
    animation: ps-login-grain 0.5s steps(6) infinite;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    inset: -140%;
    opacity: var(--ps-login-grain-opacity);
}

.ps-login-grain-fine {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    inset: 0;
    mix-blend-mode: overlay;
    opacity: var(--ps-login-grain-fine-opacity);
}

@keyframes ps-login-grain {
    0% { transform: translate(0, 0); }
    16% { transform: translate(-7%, 5%); }
    33% { transform: translate(6%, -7%); }
    50% { transform: translate(-5%, -8%); }
    66% { transform: translate(8%, 4%); }
    83% { transform: translate(-4%, 7%); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-login-blob,
    .ps-login-grain,
    .ps-login-photo {
        animation: none;
    }
}

/* ── composition (static) ──────────────────────────────────────────────── */

/*
 * The row is CONTENT height, centred by the body. Putting min-height:100vh
 * here made `stretch` stretch both panels to the viewport, and switching to
 * `center` to stop that let each size itself — which is why the card and the
 * board stopped matching. Content height + stretch makes them equal to each
 * other, which is what the design does.
 */
.ps-login {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 32px;
    position: relative;
    z-index: var(--pl-layer-stage);
}

.ps-login-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*
 * Real frosted glass, per rule 2 at the top of this file: a heavy blur, and
 * saturation BELOW 100% because glass scatters light and drains colour out of
 * what is behind it. This was blur(28px) saturate(120%) — a light blur that
 * INTENSIFIED the field's colour, which is what tinted plastic does, not
 * glass. The three values are the tokens that were written for exactly this
 * and then never wired up.
 */
.ps-login-card {
    flex: 1;
    backdrop-filter: blur(var(--ps-login-card-blur)) saturate(var(--ps-login-card-saturate)) brightness(var(--ps-login-card-lift));
    -webkit-backdrop-filter: blur(var(--ps-login-card-blur)) saturate(var(--ps-login-card-saturate)) brightness(var(--ps-login-card-lift));
    background: linear-gradient(155deg, var(--ps-login-glass-top), var(--ps-login-glass-bottom));
    border: 1px solid var(--ps-login-card-edge);
    border-radius: var(--ps-login-radius);
    box-shadow: var(--ps-login-shadow);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* The card stretches to the board's height, but the form is a fixed amount
       of content. Without this it sits at the top and leaves a dead third of
       empty glass under the button. */
    justify-content: center;
    padding: 30px;
    width: 372px;
}

.ps-login-logo {
    display: block;
    height: auto;
    width: 116px;
}

/* The product name is carried by the page itself; repeating it above the
   heading only competes with it. */
.ps-login-wordmark {
    display: none;
}

.ps-login h1 {
    color: var(--ps-login-on-glass-strong);
    font-size: var(--ps-login-heading-size);
    font-weight: var(--ps-login-heading-weight);
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0 0 6px;
    white-space: nowrap;
}

/* 38px straight to 13px is a jump with nothing between it; at 14.5px the
   tagline reads as the heading's second line rather than as fine print. */
.ps-login-tagline {
    color: var(--ps-login-on-glass);
    font-size: 14.5px;
    margin: 0 0 34px;
}

.ps-login-error {
    color: var(--shade-00);
    font-size: 12px;
    margin: 0 0 16px;
}

.ps-login-field-row {
    display: block;
}

/* The placeholder names the field; a label above it says the same thing twice.
   Kept in the markup for assistive technology. */
.ps-login-label {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* A single bottom rule, no box. The field reads as a line of text on the
   backdrop rather than a control sitting on top of it. */
.ps-login-input {
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ps-login-field-rule);
    border-radius: 0;
    display: flex;
    height: var(--ps-login-field-height);
    margin-bottom: var(--ps-login-field-gap);
    padding: 0;
    transition: border-bottom-color var(--ps-login-field-transition);
}

.ps-login-input:focus-within {
    border-bottom-color: var(--ps-login-field-rule-active);
}

.ps-login-input input {
    background: transparent;
    border: 0;
    color: var(--ps-login-field-text);
    flex: 1;
    font: inherit;
    font-size: var(--ps-login-field-size);
    min-width: 0;
    outline: none;
    padding: 0;
}

.ps-login-input input::placeholder {
    color: var(--ps-login-field-placeholder);
}

/* Chrome paints its own opaque background on an autofilled field, which would
   reinstate exactly the box this design removes. The long transition is the
   documented way to defeat it — the UA style has no other override. */
.ps-login-input input:-webkit-autofill,
.ps-login-input input:-webkit-autofill:hover,
.ps-login-input input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--ps-login-field-text);
    caret-color: var(--ps-login-field-text);
    transition: background-color 100000s ease-in-out 0s;
}

.ps-login-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 4px 0 24px;
}

.ps-login-remember {
    color: var(--ps-login-on-glass);
    font-size: 12.5px;
    gap: var(--ps-login-check-gap);
}

.ps-login-forgot {
    color: var(--ps-login-on-glass);
    font-size: 12.5px;
    text-decoration: none;
}

.ps-login-forgot:hover {
    text-decoration: underline;
}

.ps-login-submit {
    background: var(--ps-login-submit-bg);
    border: 0;
    border-radius: var(--ps-login-submit-radius);
    box-shadow: var(--ps-login-submit-shadow);
    color: var(--ps-login-submit-text);
    cursor: pointer;
    font: inherit;
    font-size: 13.5px;
    font-weight: var(--ps-login-submit-weight);
    height: var(--ps-login-submit-height);
    width: 100%;
}

.ps-login-submit:hover {
    background: var(--ps-login-submit-bg-hover);
}

/* Square, borderless, and filled when checked — the same language as the
   underlined fields, which draw no boxes either. */
.ps-login-remember .ps-checkbox-box {
    background: var(--ps-login-check-idle);
    border: 0;
    border-radius: var(--ps-login-check-radius);
    box-shadow: none;
    color: var(--ps-login-check-mark);
    height: var(--ps-login-check-size);
    width: var(--ps-login-check-size);
}

.ps-login-remember input:checked ~ .ps-checkbox-box {
    background: var(--ps-login-check-on);
}

.ps-login-note {
    color: var(--pl-text-muted);
    font-size: 11px;
    line-height: 1.65;
    margin: auto 0 0;
    padding-top: 24px;
    text-align: center;
}

/* ── the board ─────────────────────────────────────────────────────────── */

/*
 * Taken from docs/design/preview-three.html, the approved reference.
 *
 * The reference sizes its type in `vw`, which is viewport-relative and so is
 * tied to its own three-up grid — copying those numbers here would size our
 * type off OUR viewport and drift with the window. Every size below is instead
 * `cqw`: percent of the BOARD's own width. The board is the query container,
 * so the reference's proportions hold exactly at any board size.
 *
 * The reference renders its board at 597.67px wide, giving 48 / 15.744 / 28.8 /
 * 17.664px. Scaled to this board that is 32.125 / 10.535 / 19.275 / 11.822px.
 *
 * `cqw` resolves against the container's CONTENT box, which the 1px border
 * makes 2px narrower than the 400px card you actually see — so each value is
 * stated against 398, not 400. Skipping that step made every size 0.05% light.
 *   date  8.072cqw    mark  4.843cqw
 *   meta  2.647cqw    quote 2.970cqw
 *
 * The board STRETCHES to the left column's height (~589px) rather than holding
 * the reference's 400x540. That is a decision, not a defect: the two columns
 * end flush, which matters more here than the reference's aspect. Because the
 * sizes above are width-relative, the stretch leaves all of them untouched —
 * only the panel inset and the quote's offset ride the extra height.
 */
.ps-login-board {
    backdrop-filter: blur(var(--ps-login-blur)) saturate(var(--ps-login-desaturate)) brightness(var(--ps-login-lift));
    -webkit-backdrop-filter: blur(var(--ps-login-blur)) saturate(var(--ps-login-desaturate)) brightness(var(--ps-login-lift));
    background: linear-gradient(155deg, var(--ps-login-board-top), var(--ps-login-board-bottom));
    border: 1px solid var(--ps-login-glass-edge);
    border-radius: var(--ps-login-radius);
    box-shadow: var(--ps-login-board-shadow);
    box-sizing: border-box;
    container-type: inline-size;
    min-height: 540px;
    overflow: hidden;
    position: relative;
    width: 400px;
}

/* The panel is open enough for light to pass THROUGH it. Any denser and
   whatever crosses it is cut off at the edge instead of being frosted. */
.ps-login-panel {
    backdrop-filter: blur(14px) saturate(108%);
    -webkit-backdrop-filter: blur(14px) saturate(108%);
    background: var(--ps-login-panel-tint);
    border: 1px solid var(--ps-login-panel-edge);
    border-radius: 14px;
    bottom: 3%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    left: 4%;
    padding: 8% 6%;
    position: absolute;
    top: 3%;
    width: 51%;
    z-index: var(--pl-layer-stage);
}

/*
 * Month and year are one lockup, not two labels. The year was set at the same
 * size as the month in --shade-30, which read as a different, greyed-out
 * element sitting under the date rather than part of it. It now steps down in
 * size and holds the same hue at reduced strength, so the pair reads as one
 * object with a hierarchy.
 */
.ps-login-date {
    color: var(--shade-00);
    font-size: 7.4cqw;
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

.ps-login-date span {
    color: var(--shade-00);
    display: block;
    font-size: 0.78em;
    font-weight: 300;
    letter-spacing: -0.02em;
    opacity: 0.55;
}

/*
 * The panel has three text objects — the date lockup, this long date, and the
 * quote — and they were three sizes in three different greys, so nothing led.
 * One ink for all three, and the hierarchy is carried by size and opacity:
 * the lockup is the heading, this is the caption under it, the quote is body.
 */
.ps-login-message {
    color: var(--shade-00);
    font-size: 2.35cqw;
    letter-spacing: 0.01em;
    line-height: 1.7;
    opacity: 0.5;
}

/*
 * The panel closes on an outlined circle, not a wordmark. The reference sets
 * a fixed 1.5px rule regardless of board size, so the border is not scaled.
 */
.ps-login-panel-mark {
    border: 1.5px solid var(--shade-00);
    border-radius: 50%;
    box-sizing: border-box;
    height: 4.843cqw;
    width: 4.843cqw;
}

/*
 * The logo, when it stands in for the circle.
 *
 * It is NOT sized to the circle. The circle is a dot; a logo is usually a
 * lockup carrying a wordmark, and matching the two put this at 19px tall,
 * which left the wordmark's capitals under 2px — present but unreadable.
 *
 * So the logo is sized by WIDTH: it fills the panel's column and takes
 * whatever height its own proportions ask for, which is how a lockup wants to
 * be set. The height cap stops a nearly-square logo from becoming a slab.
 */
.ps-login-panel-logo {
    display: block;
    height: auto;
    max-height: 15cqw;
    object-fit: contain;
    object-position: left bottom;
    width: 100%;
}

/* ── the object ─────────────────────────────────────────────────────────
   Both sit UNDER the panel so the frost softens the half that crosses it.
   Colours come from tokens bound to the field's own blobs, so whichever
   object is chosen it is always the same colour as the background. */

/* Ball: centred on the panel's right edge (panel spans 4%..55%), so half is
   frosted and half is clear. The near-white core is the specular highlight —
   without it this is a flat disc, not a lit sphere. Stops are the reference's
   exactly: core at 0%, body at 46%, body cooled toward the rim at 100%. */
.ps-login-orb {
    aspect-ratio: 1;
    background: radial-gradient(
        circle at 36% 34%,
        color-mix(in srgb, var(--ps-login-orb-core) 96%, transparent) 0%,
        var(--ps-login-orb-from) 46%,
        color-mix(in srgb, var(--ps-login-orb-from) 62%, var(--ps-login-orb-to)) 100%
    );
    border-radius: 50%;
    left: 55%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 42%;
    z-index: var(--pl-layer-grain);
}

.ps-login-halo {
    aspect-ratio: 1;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--ps-login-orb-from) 40%, transparent) 0%,
        transparent 66%);
    border-radius: 50%;
    filter: blur(30px);
    left: 55%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: var(--pl-layer-field);
}

/* Horizon: warm above the line, cool below, as scattering works. The line's
   height IS the hour — --ps-login-horizon-y comes from the site clock.
   The two mixes are the reference's: the glow above the line is the CORE at
   62%, not the body at 40%, which is why ours read thin and grey before. */
.ps-login-sky {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ps-login-orb-core) 62%, transparent) 0%,
            transparent var(--ps-login-horizon-y)),
        linear-gradient(0deg,
            color-mix(in srgb, var(--ps-login-orb-to) 30%, transparent) 0%,
            transparent calc(100% - var(--ps-login-horizon-y)));
    inset: 0;
    position: absolute;
    z-index: var(--pl-layer-field);
}

.ps-login-rule {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ps-login-orb-from) 38%,
        var(--ps-login-orb-from) 62%,
        transparent 100%);
    box-shadow: 0 0 40px 14px color-mix(in srgb, var(--ps-login-orb-from) 42%, transparent);
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: var(--ps-login-horizon-y);
    z-index: var(--pl-layer-grain);
}

/* The quote sits at the foot of the clear side, where the pill used to be. */
.ps-login-quote {
    bottom: 15%;
    color: var(--shade-00);
    left: 57%;
    margin: 0;
    position: absolute;
    right: 5%;
    z-index: var(--pl-layer-stage);
}

.ps-login-quote p {
    font-size: 2.970cqw;
    font-weight: 200;
    line-height: 1.6;
    margin: 0;
    opacity: 0.78;
}

.ps-login-quote cite {
    color: var(--pl-text-muted);
    display: block;
    font-size: 2.647cqw;
    font-style: normal;
    margin-top: 9px;
}


/* The promo card. Dark, so it reads as a separate object from the glass. */
.ps-login-promo {
    background: var(--shade-00);
    border-radius: var(--ps-login-radius);
    box-shadow: var(--ps-login-shadow);
    box-sizing: border-box;
    color: var(--full-white);
    display: flex;
    flex-direction: column;
    padding: 22px 26px;
    width: 372px;
}

.ps-login-promo-kicker {
    color: var(--pl-text-subtle);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ps-login-promo strong {
    font-size: 21px;
    font-weight: 300;
    letter-spacing: -0.015em;
    margin-top: 8px;
}

.ps-login-promo small {
    color: var(--pl-text-subtle);
    font-size: 12.5px;
    margin-top: 3px;
}

.ps-login-promo a {
    align-self: flex-end;
    color: var(--full-white);
    font-size: 12.5px;
    margin-top: 14px;
    text-decoration: none;
}

.ps-login-promo a:hover {
    text-decoration: underline;
}

.ps-login-cta {
    align-items: center;
    background: var(--shade-00);
    border-radius: 999px;
    bottom: 26px;
    color: var(--full-white);
    display: inline-flex;
    font-size: 12.5px;
    gap: 10px;
    height: 36px;
    padding: 0 5px 0 17px;
    position: absolute;
    right: 26px;
    text-decoration: none;
    z-index: var(--pl-layer-stage);
}

.ps-login-cta em {
    align-items: center;
    background: var(--pl-control-surface);
    border-radius: 50%;
    color: var(--shade-00);
    display: grid;
    font-size: 13px;
    font-style: normal;
    height: 26px;
    place-items: center;
    width: 26px;
}

/* ── mobile ────────────────────────────────────────────────────────────── */

/*
 * Same field, same grain, same glass — but the board is decorative, so it goes
 * and the form takes the screen.
 */
@media (max-width: 860px) {
    .ps-login-board {
        display: none;
    }

    .ps-login {
        padding: 20px;
    }

    .ps-login-column {
        max-width: 420px;
        width: 100%;
    }

    .ps-login-card {
        max-width: none;
        min-height: 0;
        padding: 30px 26px;
        width: 100%;
    }

    .ps-login-promo {
        width: 100%;
    }
}

/* ── phone ─────────────────────────────────────────────────────────────── */

/*
 * A phone is either orientation, so the query is width OR a short landscape —
 * a handset held sideways is 844x390, which no max-width rule would ever
 * catch.
 *
 * THE STAGE MUST BE STRETCHED FIRST. The body centres the stage with
 * `place-items: center`, which sizes .ps-login to its CONTENT. Every width
 * below is a percentage of the stage, so without stretching it they were
 * percentages of a shrunken box: the sheet measured 232px on a 390px screen,
 * 59.5% instead of full bleed, floating with field showing down both sides.
 */
@media (max-width: 560px), (max-height: 560px) and (orientation: landscape) {
    .ps-login-body {
        place-items: stretch;
    }

    .ps-login {
        align-items: stretch;
        justify-content: flex-start;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
        width: 100%;
    }

    /* Both decorative. The form takes the screen. */
    .ps-login-board,
    .ps-login-promo {
        display: none;
    }

    .ps-login-column {
        max-width: none;
        width: 100%;
    }

    /*
     * Square against the screen edge, and it scrolls INSIDE the sheet rather
     * than scrolling the page, so the 90/10 split cannot be scrolled away.
     * dvh, not vh, so the mobile URL bar collapsing does not clip the button.
     */
    .ps-login-card {
        border-radius: 0;
        height: 100vh;
        height: 100dvh;
        justify-content: flex-start;
        max-height: 100vh;
        max-height: 100dvh;
        max-width: none;
        min-height: 0;
        overflow-y: auto;
        width: var(--ps-login-sheet-width);
        scrollbar-color: var(--shade-40) transparent;
        scrollbar-width: thin;
    }

    /* The sheet's own scrollbar, kept off the glass. */
    .ps-login-card::-webkit-scrollbar {
        width: 4px;
    }

    .ps-login-card::-webkit-scrollbar-track {
        background: var(--transparent);
    }

    .ps-login-card::-webkit-scrollbar-thumb {
        background: var(--shade-40);
        border-radius: 999px;
    }

    .ps-login-logo {
        width: 132px;
    }

    .ps-login-label {
        font-size: 12.5px;
        margin-bottom: 4px;
    }

    /*
     * The wells STAY. Stripping them to a single underline over glass left the
     * placeholder — muted grey on a translucent card over a moving field —
     * effectively invisible, which is no way to show someone where to type.
     * The well gives the text something opaque to sit on.
     */
    .ps-login-input input {
        font-size: 16px;
    }

    /* Wraps instead of colliding when the sheet is narrow. */
    .ps-login-row {
        column-gap: 16px;
        flex-wrap: wrap;
        margin: 6px 0 26px;
        row-gap: 8px;
    }

    .ps-login-submit {
        border-radius: 999px;
        font-size: 14.5px;
        height: 50px;
    }
}

/*
 * Upright: full HEIGHT, and the same tenth of field left clear down the right.
 * The 10% is horizontal in both orientations — 100% refers to the height, not
 * the width. Making this full-bleed removed the strip and the sheet stopped
 * reading as a sheet standing on the field.
 */
@media (max-width: 560px) and (orientation: portrait) {
    .ps-login-card {
        padding: 12vh 28px 32px;
    }

    .ps-login h1 {
        font-size: var(--ps-login-heading-size-sm);
        margin-top: 34px;
    }

    .ps-login-tagline {
        margin-bottom: 40px;
    }

    .ps-login-note {
        padding-top: 34px;
    }
}

/*
 * Sideways: the sheet takes 90% from the left and the remaining tenth stays
 * clear, so the field is still visibly moving beside it. Vertical space is the
 * scarce one here, so the rhythm tightens rather than the sheet scrolling far.
 */
@media (max-height: 560px) and (orientation: landscape) {
    /*
     * Height is the scarce dimension here, not width — a handset sideways is
     * 390px tall. The rhythm tightens until the whole form, button included,
     * fits without scrolling, because a sign-in you have to scroll to submit
     * is a sign-in people abandon.
     */
    .ps-login-card {
        justify-content: center;
        padding: 18px 32px;
    }

    /*
     * The SHEET is 90% of the screen; its CONTENT is not. Left to stretch, the
     * fields ran 682px wide — a letterbox you cannot read a label across, and
     * nothing like the column the same form has in portrait. The column is
     * proportional so it holds on any handset, and capped so it never grows
     * past a comfortable measure on a wide one.
     */
    .ps-login-card > * {
        max-width: min(420px, 52%);
        width: 100%;
    }

    .ps-login h1 {
        font-size: var(--ps-login-heading-size-xs);
        margin-top: 8px;
    }

    .ps-login-tagline {
        margin-bottom: 14px;
    }

    .ps-login-input {
        margin-bottom: 10px;
    }

    .ps-login-row {
        margin: 4px 0 14px;
    }

    .ps-login-submit {
        height: 44px;
    }

    .ps-login-note {
        padding-top: 14px;
    }
}