/* proxima-nova, the Panel's typeface, comes from the Typekit kit linked in _Layout.cshtml.

   NOT from @font-face rules copied into this file. That was tried first, copying the four
   declarations out of the Panel's own site.css, and every one of them 404s: those
   "use.typekit.net/af/<hash>/..." URLs are kit-internal and Adobe rotates them, so a
   copy goes stale on its own with no deploy and no error beyond a quiet 404. The Panel's
   login page has been falling back to Segoe UI for exactly that reason -- the copies in
   its site.css are dead too, and _SpLoginLayout never linked the kit that would have
   replaced them.

   The kit stylesheet is the maintained URL: it is regenerated with the fonts, which is
   why _LayoutV4 has always rendered in proxima inside the panel while these pages did
   not. Needs style-src and font-src for use.typekit.net (and font-src for p.typekit.net,
   which the kit serves the actual files from); see Program.cs. */

:root {
    --ink: #434343;
    --muted: #888;
    --line: #e3e5ea;
    --danger: #dc3545;
    --ok: #1f8f4e;
    /* Every provider button, ours and Google's rendered one, is this wide.
       Kept here because the Razor partial has to pass the same number to
       Google as data-width — see _ExternalProviders.cshtml. */
    --sp-social-width: 320px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "proxima-nova", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: #f5f6f8;
}

/* Login page shell — pixel-matched to OMA's real Supplier Panel login page
   (OMA.Web/dev/assets/css/site.css, "SP LOGIN REDESIGN" block) so the jump
   from sma.*.com.au to login.easyasset.com.au doesn't feel like a jump at
   all. No jQuery/Bootstrap/Typekit/reCAPTCHA here — same visual result,
   built with what this app already uses (vanilla CSS custom properties,
   server-rendered Razor Pages). */
.sp-login-page { background: #f4f4f4; }

@media (min-width: 601px) {
    .sp-login-page { min-height: 100vh; }
}

/* PAGE CHROME — the header band and the dark footer band.

   Ported from the Panel's own common.css (.chrome-* block), not re-derived. The card was
   already matched; the frame around it was not, so this service rendered a card floating
   on grey while the Panel renders the same card between a white logo bar and a #434343
   footer. That frame is most of what makes a page read as "the same site", and its
   absence is what made the sign-in hop feel like a different product.

   Geometry is the Panel's measure, not a choice: .nav, .footer__wrapper and .i-container
   all sit on max-width 1000px with 15px side padding, so the logo lines up with the first
   card beneath it. Wider than the 860px login card on purpose — that is how it looks in
   the Panel. */
.chrome-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The one flex item between header and footer, so margin-top:auto on the footer reaches
   the bottom edge on a short page. Page content sits INSIDE it: a direct flex child with
   `margin: 0 auto` shrinks to its content instead of stretching. */
.chrome-main {
    flex: 1 1 auto;
    min-width: 0;
}

.chrome-header {
    background-color: #fff;
    border-bottom: solid 1px rgba(0,0,0,.08);
}

.chrome-header__inner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 10px 15px;
    /* 68px, not the 48px this started at, so the band is the same height on every brand.
       Otherwise it sizes to whatever logo it holds: a stacked portal mark (IS/MS/HH) gives
       69px, the wide EasyAsset wordmark gives 49px, and the header appears to change height
       when the theme changes. 68 + 1px border matches the portal-mark height, so the common
       case is unchanged and only the EA skin moves. Kept in step with the Panel's
       .chrome-header__inner in common.css -- these two rules have to stay equal. */
    min-height: 68px;
}

.chrome-header__brand { display: inline-flex; align-items: center; }

/* 110px is .nav__logoimage's own width in the Panel, which sizes portal logos by WIDTH.
   Measured against the running Panel at the same theme: 110 x 48, band 69px, identical. */
.chrome-header__brand img { width: 110px; height: auto; }

/* The EasyAsset wordmark is a wide horizontal lockup, not a stacked mark like IS/MS/HH, so
   at a fixed 110px WIDTH it comes out around 22px tall and the header reads as squashed
   next to the Panel's. The Panel already solved this: theme-ea.css sizes that one logo by
   HEIGHT instead (body.theme-ea .nav__logoimage, max-height 34px / max-width 140px). Same
   rule here, so the two headers match on the EA skin as well as on the portal skins. */
.sp-theme-easyasset .chrome-header__brand img {
    max-width: 140px;
    max-height: 34px;
    width: auto;
    height: auto;
}

.chrome-footer {
    margin-top: auto;
    background-color: #434343;
    color: #fff;
    font-size: 14px;
}

.chrome-footer__inner {
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 15px;
    text-align: center;
}

.chrome-footer__inner a {
    color: #fff;
    text-decoration: underline;
}

/* One line on desktop, two on mobile — the Panel's own rule. */
.sp-footer-br { display: none; }

@media screen and (max-width: 500px) {
    .chrome-header__brand img { width: 92px; }
}

.sp-login-wrap {
    display: flex;
    justify-content: center;
    padding: 40px 16px;
}

.sp-login-card {
    display: flex;
    width: 100%;
    max-width: 860px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.13);
    background: #fff;
}

/* DIALOG MODE — the right-hand column on its own, shaped like a modal.

   Same card, same radius, same shadow as the two-column version, so it reads as the thing the
   sign-in pages already are rather than a second visual language. Narrower because a single
   column at 860px is a very long line length for a form. */
.sp-login-card--dialog {
    max-width: 520px;
    position: relative;
}

/* The close control. 44px is the accessible minimum target; the glyph inside is smaller so it
   does not read as heavy. Sits over the card's own padding rather than displacing content, which
   is why .sp-login-right gets extra top padding in dialog mode. */
.sp-dialog-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--muted);
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}

.sp-dialog-close:hover,
.sp-dialog-close:focus-visible { background: var(--stone-bgcolor); color: var(--ink); }

/* The logo is absolutely positioned at top:24px right:28px, which is exactly where the close
   control now sits. Dropped in dialog mode rather than moved: the header band above already
   carries the brand, so this second copy was only ever balancing the left panel that a dialog
   does not have. */
.sp-login-card--dialog .sp-login-logo { display: none; }

.sp-login-card--dialog .sp-login-right { width: 100%; padding-top: 44px; }
.sp-login-card--dialog .sp-login-form-wrap { max-width: none; margin-top: 0; }

/* EMBEDDED — this document is inside the Panel's modal.

   The Panel already draws the dialog: its own rounded panel, shadow, backdrop and close button.
   So everything this page would use to look like a dialog has to come off, or it renders as a
   card inside a card with two sets of corners and a double drop shadow.

   Background transparent rather than white for the same reason: the Panel's modal owns the
   surface, and painting over it leaves a pale rectangle wherever the two disagree by a pixel. */
.sp-embed { background: transparent; min-height: 0; }
.sp-embed .sp-login-wrap { padding: 0; display: block; }
.sp-embed .sp-login-card,
.sp-embed .sp-login-card--dialog {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* The close control is the parent's, so the top padding that made room for ours goes too.
   The SIDE padding is not the parent's and must stay: the Panel sets .signin-modal__body
   { padding: 0 } so the frame fills its dialog edge to edge, which means the only gap between
   this text and the dialog's border is the one declared here. Written `4px 0 0`, it left every
   heading, field and button flush against both edges with the frame's scrollbar sitting on top
   of the last word. Same 28px as .sp-login-right's own dialog padding, so embedded and
   standalone frame the card identically. */
.sp-embed .sp-login-right { padding: 4px 28px 12px; }
.sp-embed .chrome-main { flex: 0 1 auto; }

/* THE CODE SCREEN, EMBEDDED. Centred, and only here.

   Standalone this is a page: the card is 520px, the text is left-aligned like every other screen
   in the flow, and it should stay that way. Inside the Panel's dialog the same markup is the whole
   of a ~445px surface with nothing else on it, and a left-aligned column with 130px of empty space
   down one side reads as a fragment of a page rather than a dialog.

   320px because that is what the code row actually measures -- six 44px boxes and five 10px gaps
   is 314 -- so the boxes set the width of the block and everything else lines up to them instead
   of to an arbitrary number.

   Scoped twice on purpose: .sp-embed keeps it away from the standalone page, .sp-code-screen keeps
   it away from the sign-in methods list, which is embedded too and is a list, not a prompt. */
.sp-embed .sp-code-screen {
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
}

.sp-embed .sp-code-screen .sp-otp { justify-content: center; }

/* The label sits above the boxes and is part of the same centred block. */
.sp-embed .sp-code-screen .sp-field label { display: block; text-align: center; }

/* LEFT PANEL */
.sp-login-left {
    position: relative;
    overflow: hidden;
    background: #3a3a3a;
    color: #fff;
    width: 50%;
    padding: 36px 50px;
    display: flex;
    flex-direction: column;
}

.sp-login-left::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 150px;
    height: 130px;
    background-image: radial-gradient(var(--bgcolor-theme) 1.4px, transparent 1.5px);
    background-size: 15px 15px;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(to top right, #000, transparent 65%);
    mask-image: linear-gradient(to top right, #000, transparent 65%);
    pointer-events: none;
}

.sp-login-left-body { position: relative; z-index: 1; }

.sp-login-left-top { display: flex; align-items: center; justify-content: space-between; margin-top: 48px; }

.sp-login-label {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--bgcolor-theme);
    margin-bottom: 12px;
    margin-top: 10px;
}

/* Hidden on desktop — the video lives in the .sp-video-teaser block at the
   bottom of the form instead. On mobile that block is hidden (no room for
   a thumbnail) and this pill in the left-panel header replaces it, matching
   OMA's real mobile page rather than just dropping the video on mobile. */
.sp-video-mobile-btn {
    display: none;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    white-space: nowrap;
    text-decoration: none;
}

.sp-video-mobile-btn:hover { background: rgba(255, 255, 255, 0.25); }

.sp-video-mobile-icon { width: 10px; height: 10px; flex-shrink: 0; }

.sp-login-heading {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    margin: 15px 0 24px;
}

.sp-login-bullets {
    list-style: none;
    padding: 0;
    margin: 20px 0 12px;
    display: flex;
    flex-direction: column;
}

.sp-login-bullets li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sp-login-bullets li:first-child { padding-top: 0; }
.sp-login-bullets li:last-child { border-bottom: none; padding-bottom: 0; }

.sp-bullet-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #cdd4db;
}

.sp-bullet-svg { width: 32px; height: 32px; }
.sp-bullet-svg-accent { stroke: var(--bgcolor-theme); }

.sp-bullet-text { display: flex; flex-direction: column; }
.sp-bullet-title { font-weight: 700; }
.sp-bullet-subtitle { font-size: 13px; font-weight: 400; color: #9daab5; }

.sp-login-new-user {
    position: relative;
    z-index: 1;
    font-size: 15px;
    margin-top: 30px;
    margin-bottom: 0;
}

.sp-login-new-user strong { display: block; margin-bottom: 2px; }

.sp-drive-sale { color: var(--bgcolor-theme) !important; text-decoration: underline !important; }

/* Desktop: only the left-panel copy shows. The mobile-only duplicate
   (moved into the right panel/form area, matching OMA's real page) takes
   over once the left panel's version hides at the 600px breakpoint. */
.sp-login-new-user--mobile { display: none; }

/* RIGHT PANEL */
.sp-login-right {
    background: #fff;
    width: 50%;
    padding: 36px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.sp-login-logo { position: absolute; top: 24px; right: 28px; }
.sp-login-logo img { height: 52px; width: auto; }

/* The EasyAsset wordmark is wider than the portal logos (IS/MS/HH), so at
   the same 52px height it looks oversized — OMA's own theme-ea.css trims
   it to 34px for a balanced header, and this matches that exactly. */
.sp-theme-easyasset .sp-login-logo img { height: 34px; }

.sp-login-form-wrap { max-width: 360px; margin: 60px 0 0; width: 100%; }

.sp-login-welcome { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.sp-login-subtitle { color: var(--muted); font-size: 14px; margin: 0 0 20px; line-height: 1.5; }

.sp-field { margin-bottom: 12px; position: relative; }
.sp-field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }

.sp-field-row { display: flex; justify-content: space-between; align-items: baseline; }

/* OMA's own value — a plain grey, not the theme accent (that's reserved
   for .sp-drive-sale-style calls to action, per OMA's real CSS). */
.sp-forgot-link {
    color: #555;
    font-size: 12px;
    text-decoration: underline;
}

.sp-field input[type="text"],
.sp-field input[type="email"],
.sp-field input[type="password"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #f2f2f2;
    font-size: 14px;
}

.sp-field input:focus {
    outline: none;
    border-color: var(--bgcolor-theme);
    box-shadow: 0 0 0 0.15rem rgba(0, 0, 0, 0.08);
}

.sp-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }

.sp-checkbox { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; }

/* "Keep me signed in" and "Forgot password?" share one row. The link used to sit up beside
   the Password label, which put the two things a person weighs at that moment three rows
   apart and left a ragged gap under the field. */
.sp-checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.sp-checkbox-row .sp-checkbox { margin-bottom: 0; }

/* Buttons carry their own bottom margin because they stack: a form per
   action means no parent is in a position to space them, and without this
   Continue and "Send it again" sit welded together. */
.sp-btn-primary {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    background: var(--bgcolor-theme);
    color: var(--textcolorcontrast-theme);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 8px;
}

.sp-btn-primary:hover { opacity: 0.85; }

/* One shape and one size for every provider, deliberately — each vendor
   publishes a different spec (Microsoft square and grey, LinkedIn brand
   blue), and following all three turns the panel into three unrelated
   buttons stacked on top of each other. The shared shape follows Google's
   current spec, since Google's is the strictest and its OWN rendered button
   sits in this same stack when One Tap is on: 40px tall, pill, #747775
   stroke, #1F1F1F text, medium weight.

   The width is a fixed px value rather than a percentage because Google's
   rendered button only accepts pixels (data-width) — a percentage there is
   simply ignored, and the one button we don't control would end up a
   different size from the ones we do. Capped at 100% so narrow screens still
   behave. */
.sp-social-btn {
    width: 100%;
    max-width: var(--sp-social-width);
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid #747775;
    border-radius: 20px;
    background: #fff;
    color: #1f1f1f;
    font-family: "Google Sans", Roboto, "Segoe UI", -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.sp-social-btn:hover { background: #f7f8f8; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3); }
.sp-social-btn:active { background: #f1f3f4; }
/* Keyboard focus has to be visible on a login page — :focus-visible keeps it
   off mouse clicks. */
.sp-social-btn:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }

/* Google draws its own button into this container at exactly
   --sp-social-width (passed through as data-width), so it lines up with the
   ones above rather than sitting a few pixels proud of them. */
.sp-google-button {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.sp-social-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* A connected provider named in a list rather than on a button — same mark,
   sitting next to its name instead of centred in one. */
.sp-social-label { display: inline-flex; align-items: center; gap: 10px; }

.sp-or {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin: 16px 0;
}

.sp-btn-ghost {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
}

.sp-footer-hint { margin-top: 20px; font-size: 13px; color: var(--muted); text-align: center; }

/* .sp-login-footer removed: it was dark text on the page background, which is the
   inverse of the Panel's footer. The band now comes from .chrome-footer above, so both
   applications render one footer instead of two that disagree. */

/* Video teaser — plain link, no JS-driven modal */
.sp-video-teaser { margin-top: 20px; text-align: center; }
.sp-video-teaser-text { margin-bottom: 8px; font-size: 14px; }
.sp-video-teaser-text strong { display: block; }

.sp-video-thumb {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    max-width: 320px;
    margin: 0 auto;
    border: 1px solid #ccc;
    transition: opacity 0.2s;
}

.sp-video-thumb:hover { opacity: 0.88; }
.sp-video-thumb img { display: block; width: 100%; }

.sp-video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 34px;
    background: #ff0000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    padding-left: 2px;
}

/* Video modal — native <dialog>, no jQuery/Bootstrap. Lives inside
   .sp-login-wrap (not a <body> sibling) so it inherits --bgcolor-theme
   etc. despite rendering in the top layer via showModal(). */
.sp-video-modal {
    border: none;
    border-radius: 12px;
    padding: 0;
    width: min(640px, 92vw);
    max-width: 640px;
    overflow: hidden;
}

.sp-video-modal::backdrop { background: rgba(0, 0, 0, 0.6); }

.sp-video-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #3a3a3a;
    color: #fff;
}

.sp-video-modal-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.sp-video-modal-play-icon { color: var(--bgcolor-theme); font-size: 11px; }

.sp-video-modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.sp-video-modal-embed { position: relative; padding-top: 56.25%; background: #000; }
.sp-video-modal-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.sp-video-modal-footer { padding: 14px 20px; text-align: right; }

.sp-video-modal-gotit {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: var(--bgcolor-theme);
    color: var(--textcolorcontrast-theme);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.sp-validation-summary {
    background: #fdeaea;
    color: var(--danger);
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

/* asp-validation-summary renders an empty div (validation-summary-valid)
   even with no errors — without this it shows as an empty colored bar
   on every page load, not just after a failed submit. */
.sp-validation-summary.validation-summary-valid { display: none; }

.sp-notice {
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 14px;
}

.sp-notice.good { background: var(--stone-bgcolor); }
.sp-notice.calm { background: var(--stone-bgcolor); }
.sp-notice.warn { background: #fff4e5; }

.sp-notice strong { display: block; margin-bottom: 4px; }

/* The code row needs air beneath it — it sat flush against Continue, so the
   six boxes read as part of the button rather than a field above it. */
.sp-otp {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.sp-otp input {
    width: 44px;
    height: 52px;
    text-align: center;
    font-size: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.sp-otp input:focus { outline: 2px solid var(--bgcolor-theme); }

/* CONNECTED ACCOUNT CARDS.

   Same 1px border and 8px radius as .sp-choices, so this is the panel's existing card and not a
   third one. Grid rather than flex: the mark, the text and the Disconnect control each get their
   own column, so a long provider name cannot push the control out of alignment between rows. */
.sp-connected { list-style: none; margin: 12px 0 16px; padding: 0; }

.sp-connected__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.sp-connected__mark { display: flex; align-items: center; }

.sp-connected__text { display: flex; flex-direction: column; min-width: 0; }
.sp-connected__name { font-weight: 600; font-size: 14px; }

/* The card already says which provider; this line says what that buys you. Quiet, because it is
   the same answer on every card. */
.sp-connected__meta { font-size: 12px; color: var(--muted); }

/* Deliberately not a .sp-btn-ghost: removing a way to sign in should not look as available as the
   actions people came here to do. A plain underlined control, findable but not inviting. */
.sp-connected__remove {
    background: none;
    border: none;
    padding: 4px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}

.sp-connected__remove:hover { color: var(--danger); }

.sp-connected__empty { margin: 12px 0 16px; }

/* "Connect Social accounts to sign in", closed by default. */
.sp-connect-more { margin-bottom: 16px; }

.sp-connect-more > summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 0;
    list-style-position: inside;
}

.sp-connect-more[open] > summary { margin-bottom: 8px; }

.sp-connect-more__body .sp-social-btn { margin-bottom: 8px; }

.sp-choices { list-style: none; margin: 12px 0; padding: 0; }

.sp-choices li {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.sp-choices a { display: block; color: var(--ink); text-decoration: none; font-weight: 600; }

.sp-choices button {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
}

/* TABLET / NARROW DESKTOP — OMA's real page only has one breakpoint (600px),
   so anything between that and where the card actually reaches its 860px
   max-width (a lot of real tablets and resized desktop windows) gets the
   full two-column layout squeezed into ~250px-wide columns — the heading
   wraps to three lines instead of two. Cutoff is 900px, not 860px: the card
   doesn't hit its own max-width until the viewport is noticeably wider than
   860px, since .sp-login-wrap's own 16px+16px padding and the scrollbar
   both eat into it first — measured directly (card was still 815px wide at
   an 862px viewport) rather than assumed. Verified this is a real,
   measurable problem generally, not just a guess: checked actual rendered
   layout at 601–899px viewports against the unmodified OMA CSS before
   adding this. Not present in OMA's own page either — a gap in the source
   being copied, closed here rather than carried forward, since
   "productionized" was the ask, not a literal
   port. */
@media only screen and (max-width: 900px) and (min-width: 601px) {
    .sp-login-left { padding: 28px 24px; }
    .sp-login-heading { font-size: 21px; margin: 10px 0 16px; }
    .sp-login-bullets li { padding: 10px 0; }
    .sp-bullet-badge { width: 38px; height: 38px; }
    .sp-bullet-svg { width: 26px; height: 26px; }
    .sp-login-right { padding: 32px 28px; }
    .sp-login-form-wrap { max-width: none; }
}

/* MOBILE — matches OMA's own 600px breakpoint */
@media only screen and (max-width: 600px) {
    .sp-login-wrap { padding: 0; align-items: flex-start; }

    .sp-footer-br { display: block; }

    .sp-login-card { flex-direction: column; border-radius: 0; box-shadow: none; }

    .sp-login-left { width: 100%; padding: 16px 24px 0; }
    .sp-login-left::after { display: none; }
    .sp-login-left .sp-login-new-user { display: none; }

    .sp-login-left-top { margin-top: 0; }
    .sp-login-label { font-size: 13px; margin-bottom: 6px; margin-top: 4px; }
    .sp-video-mobile-btn { display: inline-flex; font-size: 12px; padding: 4px 10px; }
    .sp-login-heading { font-size: 20px; margin: 10px 0 12px; }

    .sp-login-bullets { margin: 8px 0 12px; }
    .sp-login-bullets li { font-size: 13px; gap: 9px; padding: 0; border-bottom: none; }
    .sp-bullet-subtitle { display: none; }
    .sp-bullet-title { font-weight: 400; }
    .sp-bullet-badge { width: 26px; height: 26px; }
    .sp-bullet-svg { width: 18px; height: 18px; }

    .sp-login-right { width: 100%; padding: 20px 20px 24px; }
    .sp-login-logo { position: static; margin-bottom: 12px; text-align: right; }
    .sp-login-logo img { height: 40px; }

    .sp-login-form-wrap { margin-top: 0; }
    .sp-login-welcome { font-size: 20px; margin-bottom: 2px; }
    .sp-login-subtitle { font-size: 13px; margin-bottom: 12px; }

    .sp-video-teaser { display: none; }

    .sp-login-new-user--mobile { display: block; margin-top: 20px; text-align: center; }
    .sp-login-new-user--mobile .sp-drive-sale { color: var(--ink) !important; }
}

/* ---- MANAGE SCREEN: two named groups, one list, one primary --------------------------------

   Appended rather than woven in above, so this sits clear of the rules being edited around the
   embed padding and the section heading.

   The screen had no hierarchy: two status sentences over three identically-weighted full-width
   boxes, a form, then a fourth identical box that ended the session. A disclosure, a form submit
   and a sign-out all shared one shape, so nothing led and the squint test returned a stack of
   equal rectangles. These rules give it a heading level of its own, a neutral row action to pair
   with Disconnect, and a separated exit. */

/* Smaller than .sp-login-welcome on purpose: these label groups inside the dialog, they do not
   compete with the dialog's own title. 32px above and 8px below is the rhythm the whole screen
   now runs on - generous between groups, tight within one. */
.sp-manage-heading {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin: 32px 0 8px;
}

/* The first group follows the dialog title, which already brought its own space. */
.sp-manage-heading--first { margin-top: 4px; }

/* The same control as .sp-connected__remove, minus the danger hover: "Change" and "Disconnect"
   sit in the same column on adjacent rows and should read as the same kind of thing, but one of
   them is not destructive and must not colour as though it were. */
.sp-connected__action {
    background: none;
    border: none;
    padding: 4px;
    font-size: 13px;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}

.sp-connected__action:hover { color: var(--ink); }

/* The authenticator secret, for somebody typing it into an app on another device. Monospace and
   spaced out because it is transcribed by hand and l/1 and O/0 have to be told apart. */
/* The enrolment QR. White plate under it because a QR needs light quiet zones to scan, and the
   card behind this is not guaranteed to be white in every portal theme. */
.sp-qr {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    width: fit-content;
    margin: 0 auto 12px;
}

.sp-qr svg { display: block; width: 200px; height: 200px; }

.sp-authenticator-key {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* ONE LINE. Eight groups plus separators is 39 characters, which did not fit at 16px and
       wrapped onto a second line ending in a lone group. Sized so the whole key sits on one line
       inside the card, and allowed to scroll rather than wrap on a very narrow phone: a key broken
       across lines is the one that gets typed in wrong. */
    font-size: 13px;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow-x: auto;
    text-align: center;
    padding: 10px 12px;
    background: var(--tint, #f7f8f8);
    border-radius: 6px;
}

/* Recovery codes. Two columns so eight of them read as a block to copy rather than a long list,
   and monospace for the same transcription reason as the key above. */
.sp-recovery-codes {
    list-style: none;
    /* Centred as a block AND within each column: eight codes hard against the left edge read as
       the start of a list, when they are a single thing to copy down. */
    margin: 0 auto 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    justify-items: center;
    width: fit-content;
    gap: 6px 24px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
}

/* Neither of the row controls had a focus style. Both are reachable by keyboard and neither is a
   .sp-btn-*, so nothing else was going to give them one. */
.sp-connected__action:focus-visible,
.sp-connected__remove:focus-visible {
    outline: 2px solid var(--bgcolor-theme, #0b57d0);
    outline-offset: 2px;
    border-radius: 3px;
}

/* The rule is the element's reason for existing. Signing out ends the session rather than
   changing a setting, and it used to render as a fourth full-width box immediately below a form
   submit - close enough, and similar enough, to be hit instead of it. */
.sp-manage-exit {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.sp-manage-exit__btn {
    background: none;
    border: none;
    padding: 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
}

.sp-manage-exit__btn:hover { color: var(--ink); }

.sp-manage-exit__btn:focus-visible {
    outline: 2px solid var(--bgcolor-theme, #0b57d0);
    outline-offset: 2px;
    border-radius: 3px;
}

/* The disclosure sat between two bordered buttons looking like a third one. It is a control that
   reveals rather than acts, so it reads as a link now and keeps the group's tight rhythm. */
.sp-connect-more > summary { color: var(--muted); }
.sp-connect-more > summary:hover { color: var(--ink); }

/* The empty note is a footnote to the list above it, not a peer of the disclosure below. It sat
   16px from each and read as its own block. Negative top margin rather than :has(), because it
   collapses against the list's own bottom margin and needs no selector support to reason about. */
.sp-connected + .sp-connected__empty { margin-top: -8px; }