/* ToolSurf "Tool wall" auth pages, 2026-10-31: /login (also ?sendpass) and /signup.
   Replaces auth-pages.css on these two templates (auth-pages.css stays on disk, untouched).
   Markup: login.phtml, _login.phtml, _login-form.phtml, _sendpass-form.phtml, signup/signup-blank.phtml and the
   shared panel _tool-wall.phtml. Logos: public/img/tool-wall/*.png (palette PNGs on white; .webp is not in
   aMember's .htaccess static whitelist and would hit index.php).
   Light only by design (outside $isAppPage). The form column is 400px: Google's own button cannot be wider.
   2026-11-02 "static first paint" (owner: the design moved before and after the Cloudflare check appeared): every
   late part has its final box from the first paint. Google's button, the Cloudflare check, the locked Log in button
   with its hint and the font are covered below; the templates render the rest (Cloudflare box, eye, placeholders). */

* { box-sizing: border-box; }

/* optional, not swap: the templates preload the file, so it is normally there for the first paint; when it is not,
   the page keeps the fallback font instead of re-wrapping lines when the font lands (that moved the signup form 20px) */
@font-face {
    font-family: "Anthropic Sans";
    src: url("/application/default/themes/kei/public/fonts/AnthropicSans-Roman-Web.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: optional;
}

@font-face {
    font-family: "Anthropic Sans";
    src: url("/application/default/themes/kei/public/fonts/AnthropicSans-Italic-Web.woff2") format("woff2");
    font-weight: 300 800;
    font-style: italic;
    font-display: optional;
}

:root {
    --tw-ink: #1a1613;
    --tw-text: #3d3430;
    --tw-muted: #6f655e;
    --tw-soft: #8a8079;
    --tw-line: #e9e1da;
    --tw-field: #d9d0c8;
    --tw-accent: #c6613f;
    --tw-accent-dark: #a94f33;
    --tw-panel: #1d1714;
    --tw-page: #f3eee8;
    --tw-font: "Anthropic Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ts-app-font: var(--tw-font);
}

html.ts-auth-ready,
html.ts-auth-document,
html:has(body.ts-auth-body) {
    min-height: 100%;
    background: var(--tw-page) !important;
}

body.ts-auth-body {
    display: grid; /* centres the card on tall screens; also keeps its margin from collapsing through body */
    align-content: center;
    margin: 0;
    min-height: 100vh;
    background: var(--tw-page) !important;
    color: var(--tw-ink);
    font-family: var(--tw-font);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.ts-auth-body a { color: var(--tw-accent); }

/* ---------------------------------------------------------------- shell */
.ts-auth-shell {
    width: min(1080px, calc(100% - 48px));
    margin: 40px auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(40, 25, 15, 0.05), 0 24px 60px rgba(40, 25, 15, 0.12);
}

/* ---------------------------------------------------------------- tool wall panel */
.ts-wall-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 40px 40px 0;
    background: var(--tw-panel);
    color: #fff;
    overflow: hidden;
}

.ts-wall-panel::before {
    content: "";
    position: absolute;
    left: -15%;
    right: -15%;
    bottom: -170px;
    height: 400px;
    background: radial-gradient(closest-side, rgba(198, 97, 63, 0.5), rgba(198, 97, 63, 0));
    pointer-events: none;
}

.ts-wall-panel > * { position: relative; }

.ts-auth-logo {
    display: inline-block;
    align-self: flex-start;
    line-height: 0;
}

.ts-auth-logo img {
    display: block;
    width: auto;
    height: 34px;
}

.ts-auth-body .ts-wall-title {
    margin: 30px 0 10px !important;
    color: #fff !important;
    font-family: var(--tw-font) !important;
    font-size: 30px !important;
    font-weight: 650 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.4px !important;
    text-wrap: balance;
}

.ts-wall-title em {
    font-style: normal;
    color: #ef9a78;
}

.ts-auth-body .ts-wall-sub {
    margin: 0 0 26px !important;
    color: #cdbfb5 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
}

.ts-auth-body .ts-wall {
    contain: size; /* the wall fills whatever height the form gives the card and never stretches it */
    flex: 1 1 auto;
    min-height: 200px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    margin: 0 -6px !important;
    padding: 2px 0 0 !important;
    list-style: none !important;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 45%, transparent 96%);
    mask-image: linear-gradient(#000 45%, transparent 96%);
}

.ts-auth-body .ts-wall-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 2.6;
    margin: 0 !important;
    padding: 0 10% !important;
    list-style: none !important;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.ts-auth-body .ts-wall-tile::before,
.ts-auth-body .ts-wall-tile::marker { content: none; }

.ts-wall-tile img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.ts-wall-tile:nth-child(3n+2) { transform: translateY(18px); }

/* ---------------------------------------------------------------- form side */
.ts-auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 52px 48px;
    background: #fff;
}

.wrapper.ts-auth-form-wrap,
.ts-auth-form-wrap {
    width: min(100%, 400px);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ts-auth-card-head { margin: 0 0 22px; }

.ts-auth-body .ts-auth-card-head h2 {
    margin: 0 0 6px !important;
    color: var(--tw-ink) !important;
    font-family: var(--tw-font) !important;
    font-size: 28px !important;
    font-weight: 650 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.3px !important;
}

.ts-auth-body .ts-auth-card-head p {
    margin: 0 !important;
    color: var(--tw-muted) !important;
    font-family: var(--tw-font) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

/* Google: the official button (auth-pages.js, max 400px) and aMember's redirect button as the fallback.
   2026-11-02: both are one 40px box in the same place. aMember's link is server-rendered and works without Google's
   script; it is drawn like Google's own button (measured inside Google's iframe: 400x40 pill, 1px #dadce0, radius
   20px, 18px logo, 8px gap, 14px/500 #3c4043, letter-spacing .25px), so the swap a moment later changes nothing on
   screen. auth-pages.js puts Google's box right before aMember's (same parent) and hides aMember's in the same step. */
.ts-auth-body .ts-gis-btn {
    min-height: 40px;
    margin: 0 !important;
}

/* Google first draws its own HTML copy of the button, then adds its iframe UNDER the copy and drops the copy a frame
   later: the box was 80px tall for a moment and the whole form jumped 36px down and back. One grid cell for both. */
.ts-auth-body .ts-gis-btn > div { display: grid; }
.ts-auth-body .ts-gis-btn > div > * { grid-area: 1 / 1; }

.am-google-button-wrapper {
    width: 100%;
    margin: 0 !important;
    text-align: center;
}

.am-google-button,
.am-google-button a { width: 100%; }

.am-google-button a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #dadce0 !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #3c4043 !important;
    font-family: "Google Sans", Roboto, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.25px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.am-google-button a::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.am-google-button a::after { content: "Continue with Google"; }

.am-google-button a:hover {
    border-color: #d2e3fc !important;
    background: #f8fbff !important;
}

.am-google-button a:focus-visible {
    outline: 2px solid #4285f4;
    outline-offset: 2px;
}

/* aMember's "Sign in with Google" picture (it had no alt text; the ::after text names the link now) */
.am-google-button img { display: none !important; }

.ts-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--tw-soft);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-transform: none;
}

.ts-auth-divider::before,
.ts-auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--tw-line);
}

/* ---------------------------------------------------------------- forms */
.ts-auth-form,
.am-signup-form {
    display: grid;
    gap: 14px;
    margin: 0;
}

.ts-auth-form > .ts-auth-divider { margin: 2px 0; }

.ts-auth-field-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.ts-auth-field,
.am-signup-form .am-row { min-width: 0; }

.ts-auth-field label,
.ts-auth-body .am-signup-form .am-element-title label,
.ts-auth-body .am-form .am-element-title label {
    display: block;
    margin: 0 0 6px;
    color: var(--tw-ink);
    font-family: var(--tw-font) !important;
    font-size: 13.5px;
    font-weight: 600 !important;
    line-height: 1.35;
    letter-spacing: 0 !important;
}

.ts-auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
}

.ts-auth-label-row label { margin: 0 !important; }

.ts-auth-label-row a {
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ts-auth-label-row a:hover { text-decoration: underline; }

/* every field here is required, so the asterisks say nothing */
.ts-auth-field label span,
.am-signup-form .required { display: none !important; }

.ts-auth-field input,
.am-signup-form input[type="text"],
.am-signup-form input[type="email"],
.am-signup-form input[type="password"],
.am-signup-form select,
.am-sendpass-form-form input[type="text"],
.am-login-form-form input[type="text"],
.am-login-form-form input[type="password"] {
    display: block;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid var(--tw-field) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--tw-ink) !important;
    box-shadow: none !important;
    font-family: var(--tw-font) !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    outline: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ts-auth-field input:focus,
.am-signup-form input[type="text"]:focus,
.am-signup-form input[type="email"]:focus,
.am-signup-form input[type="password"]:focus,
.am-signup-form select:focus,
.am-sendpass-form-form input[type="text"]:focus,
.am-login-form-form input[type="text"]:focus,
.am-login-form-form input[type="password"]:focus {
    border-color: var(--tw-accent) !important;
    box-shadow: 0 0 0 3px rgba(198, 97, 63, 0.14) !important;
}

.ts-auth-field input::placeholder,
.am-signup-form input::placeholder,
.am-sendpass-form-form input::placeholder {
    color: #a59b93;
    opacity: 1;
}

/* aMember's signup form structure, flattened to a single column */
.am-login-form-wrapper,
.am-sendpass-form-wrapper,
.am-auth-form,
.am-form,
.am-signup,
.am-signup-form,
.am-signup-form fieldset,
.am-signup-form .fieldset,
.am-signup-form .am-row,
.am-signup-form .am-element,
.am-signup-form .am-element-title {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.am-login-form-wrapper {
    display: flex;
    flex-direction: column;
}

.am-login-form-wrapper .am-google-button-wrapper,
.am-login-form-wrapper > .ts-gis-btn { order: -1; }

.am-login-form-wrapper[style*="display:none"],
.am-sendpass-form-wrapper[style*="display:none"] { display: none !important; }

.am-form .row,
.am-form [class*="col-"] {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.am-signup-form .am-row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.am-signup-form .am-element-title,
.am-form .am-element-title {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.am-signup-form .am-element,
.am-form .am-element {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.am-signup-form .am-element.group { display: block !important; }

.am-signup-form .comment,
.am-signup-form .am-description {
    margin: 4px 0 0 !important;
    color: var(--tw-muted) !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

/* "a confirmation email will be sent..." and "must be 6 or more characters": the placeholder says the latter */
#row-email-0 .comment,
#row-pass-0 .comment { display: none !important; }

.am-signup-form fieldset,
.am-signup-form .fieldset {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.am-signup-form legend { display: none !important; }

.am-signup-form input[type="image"] { display: none !important; }

/* password: aMember's own show/hide switch on signup, auth-pages.js's button on login */
.am-signup-form .am-pass-indicator-wrap {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.am-signup-form input.am-pass-indicator,
.am-signup-form input.am-pass-reveal {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 46px !important;
}

.am-signup-form .am-pass-indicator-bar,
.am-signup-form .am-pass-indicator-bar_bar { display: none !important; }

.am-signup-form .am-pass-indicator-wrap .am-switch-reveal {
    position: absolute !important;
    top: 23px !important; /* half the field, so an error line under the field never moves it */
    right: 13px !important;
    left: auto !important;
    transform: translateY(-50%);
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.5;
    cursor: pointer;
    z-index: 4;
}

.am-signup-form .am-pass-indicator-wrap .am-switch-reveal:hover { opacity: 0.9; }

.ts-pw-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.ts-pw-wrap > input { padding-right: 48px !important; }

.ts-pw-wrap .ts-pw-reveal {
    position: absolute !important;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px;
    background: transparent !important;
    color: #9a8f87 !important;
    box-shadow: none !important;
    cursor: pointer;
    z-index: 4;
}

.ts-pw-wrap .ts-pw-reveal:hover {
    color: var(--tw-accent-dark) !important;
    background: rgba(198, 97, 63, 0.08) !important;
}

/* terms: the checkbox sits in front of its sentence; an error gets its own line under both */
.am-signup-form [id^="row-_i_agree"] {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px 10px;
}

.am-signup-form [id^="row-_i_agree"] > .am-element { display: contents !important; }

/* aMember's clearfix pseudo-elements would become flex items here and push the checkbox in */
.am-signup-form [id^="row-_i_agree"]::before,
.am-signup-form [id^="row-_i_agree"]::after,
#row-grp-turnstile > .am-element::before,
#row-grp-turnstile > .am-element::after {
    content: none !important;
    display: none !important;
}

.am-signup-form [id^="row-_i_agree"] input[type="checkbox"] {
    order: 1;
    flex: 0 0 18px;
    width: 18px !important;
    height: 18px !important;
    margin: 1px 0 0 !important;
    accent-color: var(--tw-accent);
    cursor: pointer;
}

.am-signup-form [id^="row-_i_agree"] > .am-element-title {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
}

.ts-auth-body .am-signup-form [id^="row-_i_agree"] .am-element-title label {
    margin: 0;
    color: var(--tw-text);
    font-size: 14px;
    font-weight: 400 !important;
    line-height: 1.4;
    cursor: pointer;
}

.am-signup-form [id^="row-_i_agree"] .am-element-title label a { font-weight: 600; }

.am-signup-form [id^="row-_i_agree"] span.am-error {
    order: 3;
    flex: 0 0 100%;
    margin: 0 0 0 28px !important;
}

/* Cloudflare check: full column width (data-size flexible), no label */
#row-grp-turnstile {
    display: block !important;
    width: 100%;
}

#row-grp-turnstile > .am-element-title { display: none !important; }

#row-grp-turnstile > .am-element,
#row-grp-turnstile > .am-element.group {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: center;
    gap: 6px 0;
    width: 100%;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

#row-grp-turnstile .cf-turnstile {
    flex: 1 1 100%;
    width: 100%;
    min-height: 65px;
    margin: 0 !important;
}

/* never matches any more: Cloudflare now puts its iframe inside a closed shadow root (see the 2026-11-02 block below) */
#row-grp-turnstile .cf-turnstile iframe {
    display: block;
    margin: 0 auto;
}

#row-grp-turnstile .am-element > span.am-error {
    flex: 0 0 100%;
    text-align: center;
}

.am-turnstile-container {
    display: block;
    width: 100%;
    min-height: 65px;
    margin: 0;
}

.am-turnstile-container .custom-turnstile-widget { width: 100%; }

/* 2026-11-02: the Cloudflare check has its final box and look from the first paint. Login renders into the template's
   .am-turnstile-container (_login-form.phtml, _sendpass-form.phtml), signup into aMember's .cf-turnstile.
   - font-size/line-height 0: Cloudflare's 65px iframe is an inline box inside a closed shadow root, and the text line
     it sat on made the box 71px, so the button moved 6px down the moment the widget appeared. Its text is inside the
     iframe, which inherits nothing from here.
   - ::before/::after are a stand-in drawn like the widget (measured: 65px, #f8f8f8, ~#dedede 1px border, radius 3px,
     24px ring at x 9, text at x 41). They sit UNDER the widget (z-index -1 inside the box's own stacking context), so
     the widget simply covers them when it paints. */
#row-grp-turnstile .cf-turnstile,
.am-turnstile-container {
    position: relative;
    z-index: 0;
    font-size: 0;
    line-height: 0;
}

#row-grp-turnstile .cf-turnstile::before,
.am-turnstile-container::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    box-sizing: border-box; /* "* { box-sizing }" does not reach pseudo-elements: 65 + 2px border showed under the widget */
    height: 65px;
    border: 1px solid #dedede;
    border-radius: 3px;
    background: #f8f8f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23dddddd' stroke-width='2.5'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10' fill='none' stroke='%23999999' stroke-width='2.5' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") 9px 50% / 24px 24px no-repeat;
}

#row-grp-turnstile .cf-turnstile::after,
.am-turnstile-container::after {
    content: "Loading security check\2026";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 12px;
    left: 41px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    height: 65px;
    overflow: hidden;
    color: #6b6b6b;
    font: 400 14px/1.3 -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    #row-grp-turnstile .cf-turnstile::before,
    .am-turnstile-container::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23dddddd' stroke-width='2.5'/%3E%3C/svg%3E");
    }
}

#login-recaptcha-row,
#sendpass-recaptcha-row,
#row-grp-captcha {
    display: flex;
    justify-content: center;
}

/* ---------------------------------------------------------------- buttons and links */
.form-btn,
.form-btn.full,
.am-login-form-form button[type="submit"],
.am-sendpass-form-form button[type="submit"],
.am-signup-form input[type="submit"],
.am-signup-form .am-cta-signup {
    display: block;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--tw-accent) !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(198, 97, 63, 0.22) !important;
    cursor: pointer !important;
    font-family: var(--tw-font) !important;
    font-size: 15.5px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}

.form-btn:hover:not(:disabled),
.am-login-form-form button[type="submit"]:hover:not(:disabled),
.am-sendpass-form-form button[type="submit"]:hover:not(:disabled),
.am-signup-form input[type="submit"]:hover {
    background: var(--tw-accent-dark) !important;
    transform: translateY(-1px);
}

/* login stays locked until the Cloudflare check passes (auth-pages.js) */
.form-btn:disabled,
.form-btn.full:disabled,
.am-login-form-form button[type="submit"]:disabled,
.am-sendpass-form-form button[type="submit"]:disabled {
    opacity: 1 !important;
    background: #eadfd6 !important;
    color: rgba(26, 22, 19, 0.42) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.am-signup-form #row-buttons .am-element.group { display: block !important; }

.ts-auth-submit-row { display: block; }

/* 2026-11-02: the hint keeps its line and only fades, so the form does not jump up when the check passes (it was
   display:none, and the card lost 29px the moment Cloudflare said yes) */
.ts-auth-disabled-hint {
    display: block;
    margin: 10px 0 0;
    color: var(--tw-soft);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ts-auth-submit-row:has(button:disabled) .ts-auth-disabled-hint {
    visibility: visible;
    opacity: 1;
}

.ts-auth-body p.login {
    margin: 18px 0 0;
    color: var(--tw-muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.ts-auth-form > p.login { margin-top: 4px; }

.ts-auth-body p.login a,
.am-signup-form a {
    color: var(--tw-accent) !important;
    font-weight: 650;
    text-decoration: none;
}

.ts-auth-body p.login a:hover,
.am-signup-form a:hover {
    color: var(--tw-accent-dark) !important;
    text-decoration: underline;
}

.ts-auth-checkbox {
    display: flex;
    gap: 9px;
    align-items: center;
    color: var(--tw-text);
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}

.ts-auth-checkbox input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--tw-accent);
}

/* ---------------------------------------------------------------- errors */
ul.errors,
.errors,
.am-errors,
.alert {
    margin: 0 0 16px !important;
    padding: 12px 14px !important;
    border: 1px solid #f2c4bf !important;
    border-radius: 11px !important;
    background: #fff4f2 !important;
    color: #a3271d !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    list-style: none !important;
}

body.ts-auth-body > ul.errors,
body.ts-auth-body > .errors {
    width: min(1080px, calc(100% - 48px));
    margin: 24px auto 0 !important;
}

/* 2026-11-02: a refused login prints its error at the top of .am-login-form, which now follows Google's button
   directly (both sit in the same flex column, see the Google block); the same air above it as below */
.am-login-form-wrapper .am-login-form > .am-errors:first-child,
.am-login-form-wrapper .am-login-form > .errors:first-child { margin-top: 16px !important; }

ul.errors li,
.am-errors li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* field messages: jQuery validate (span with an id) and aMember after a refused POST (span without one) */
.am-signup-form span.am-error,
.am-form span.am-error {
    display: block !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #b42318 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

.am-signup-form input.am-error,
.am-form input.am-error { border-color: #e0897c !important; }

.am-signup-form input.am-error:focus,
.am-form input.am-error:focus { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12) !important; }

.am-signup-form .am-element.am-error {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.am-signup-form .am-element:has(span.am-error[id]) > span.am-error:not([id]),
#fieldset-agreement .am-element:has(> input:checked) > span.am-error { display: none !important; }

/* ---------------------------------------------------------------- e-mail code step (signup e-mail check) */
#EmailCode {
    margin: 4px 0 0 !important;
    padding: 28px 24px !important;
    border: 1px solid #efe2d9 !important;
    border-radius: 16px !important;
    background: #fdf8f5 !important;
    box-shadow: none !important;
    color: #5a4a42 !important;
    font-family: var(--tw-font) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

#EmailCode::before {
    content: "Check your inbox";
    display: block;
    margin-bottom: 8px;
    padding-top: 70px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 58 58'%3E%3Ccircle cx='29' cy='29' r='29' fill='%23fdeee8'/%3E%3Cg fill='none' stroke='%23c6613f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='17' y='20' width='24' height='18' rx='3'/%3E%3Cpath d='m17 23 12 8 12-8'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 58px 58px;
    color: var(--tw-ink);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}

#EmailCode .am-row,
#EmailCode .am-element,
#EmailCode .am-no-label .am-element {
    width: 100% !important;
    max-width: 470px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#EmailCode .am-element-title { display: none !important; }

#EmailCode input[type="image"],
#EmailCode input[type="submit"] { display: none !important; }

/* ---------------------------------------------------------------- short laptop screens */
@media (min-width: 901px) and (max-height: 820px) {
    .ts-auth-shell { margin: 24px auto; }
    .ts-auth-form-panel { padding-top: 40px; padding-bottom: 40px; }
}

/* ---------------------------------------------------------------- tablets and phones: the wall becomes a band */
@media (max-width: 900px) {
    html.ts-auth-ready,
    html.ts-auth-document,
    html:has(body.ts-auth-body),
    body.ts-auth-body { background: #fff !important; }

    body.ts-auth-body { display: block; }

    .ts-auth-shell {
        width: 100%;
        min-height: 100vh;
        margin: 0;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        border-radius: 0;
        box-shadow: none;
    }

    .ts-wall-panel { padding: 18px 0 16px; }

    .ts-wall-panel::before { bottom: -250px; }

    .ts-auth-logo { margin: 0 20px; }

    .ts-auth-logo img { height: 28px; }

    .ts-auth-body .ts-wall-title {
        margin: 12px 20px 14px !important;
        font-size: 19px !important;
        line-height: 1.24 !important;
        letter-spacing: -0.2px !important;
    }

    .ts-wall-tail,
    .ts-auth-body .ts-wall-sub { display: none !important; }

    /* two rows of logos, the second set half a tile to the left */
    .ts-auth-body .ts-wall {
        contain: none;
        flex: none;
        min-height: 0;
        height: 78px;
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-template-rows: repeat(2, 35px);
        grid-auto-columns: 92px;
        gap: 8px;
        margin: 0 0 0 20px !important;
        padding: 0 !important;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .ts-auth-body .ts-wall-tile {
        aspect-ratio: auto;
        height: 35px;
        border-radius: 10px;
        box-shadow: none;
    }

    .ts-wall-tile:nth-child(3n+2) { transform: none; }

    .ts-wall-tile:nth-child(even) { transform: translateX(-46px); }

    /* log-in: no headline (the form says "Welcome back"), one row of logos */
    .ts-auth-body-login .ts-wall-title { display: none !important; }

    .ts-auth-body.ts-auth-body-login .ts-wall {
        height: 35px;
        grid-template-rows: 35px;
        margin-top: 14px !important;
    }

    .ts-auth-body-login .ts-wall-tile:nth-child(even) { transform: none; }

    .ts-auth-form-panel {
        align-items: flex-start;
        padding: 26px 20px 96px; /* room to scroll the last link above the floating Support button */
    }

    .ts-auth-body .ts-auth-card-head h2 { font-size: 25px !important; }
}

@media (max-width: 600px) {
    /* 16px keeps iOS Safari from zooming into a focused field */
    .ts-auth-field input,
    .am-signup-form input[type="text"],
    .am-signup-form input[type="email"],
    .am-signup-form input[type="password"],
    .am-signup-form select,
    .am-sendpass-form-form input[type="text"],
    .am-login-form-form input[type="text"],
    .am-login-form-form input[type="password"] { font-size: 16px !important; }
}