@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap");

/* ==========================================================================
   Themeson member area - custom style layer
   --------------------------------------------------------------------------
   Loaded by Am_View::printLayoutHead AFTER the active solid-color theme.css,
   so plain overrides win on source order. Never replaced on aMember upgrade.

   WHY THE !important ON SIZING: printLayoutHead echoes headLink() (our <link>)
   and only THEN headStyle() plus the 'head-finish' placeholder. Any inline
   <style> - a theme "custom CSS" box, a plugin - therefore lands after us and
   beats us at equal specificity. Structural width / height / max-width /
   grid-template-columns are hardened so the layout cannot be collapsed that way.
   Every hardened declaration is mirrored with !important in its media-query
   counterpart, otherwise the base rule would win and responsive would die.
   Nothing that JS toggles (display, the inline-styled strength bar) is hardened
   beyond what already needed it.

   Shape system (one scale, applied everywhere):
     shells 26px  >  inner cores 20px  >  controls 12px  >  primary CTA + chips: pill

   Colour system: teal is the BRAND accent - it alone marks state (current page,
   selected product, focus ring, primary CTA). Five further hues (sky, indigo,
   violet, rose, amber) are DECORATIVE only and rotate per section / row / card,
   so nothing about them has to be learned to use the page. Every hue clears
   4.5:1 on its own background in both themes; see the ratios beside each token.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    --ts-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* --- hue palette: six jewel tones, all >= 4.5:1 on white, used as a rotation
       for section markers, resource tiles and product cards --- */
    --c-teal:   #0c7a66;   /* 5.2:1 */
    --c-sky:    #0b6e9e;   /* 5.6:1 */
    --c-indigo: #3a4fc4;   /* 6.8:1 */
    --c-violet: #7040bd;   /* 6.7:1 */
    --c-rose:   #c0356a;   /* 5.3:1 */
    --c-amber:  #9a5f06;   /* 5.2:1 */
    --c-teal-soft:   rgba(12, 122, 102, .12);
    --c-sky-soft:    rgba(11, 110, 158, .12);
    --c-indigo-soft: rgba(58, 79, 196, .12);
    --c-violet-soft: rgba(112, 64, 189, .12);
    --c-rose-soft:   rgba(192, 53, 106, .12);
    --c-amber-soft:  rgba(154, 95, 6, .13);
    --c-spectrum: linear-gradient(90deg, var(--c-teal), var(--c-sky), var(--c-indigo), var(--c-violet), var(--c-rose), var(--c-amber));
    --c-cta: linear-gradient(118deg, var(--c-teal) 0%, #0a707e 58%, var(--c-sky) 128%);

    --ts-canvas: #eef1f6;
    --ts-surface: #ffffff;
    --ts-surface-2: rgba(255, 255, 255, .62);
    --ts-field: #f6f8fa;

    --ts-ink: #10151c;
    --ts-ink-2: #4a5462;
    --ts-ink-3: #6b7686;

    --ts-line: rgba(16, 21, 28, .08);
    --ts-line-strong: rgba(16, 21, 28, .14);

    --ts-accent: #0c7a66;          /* 5.2:1 against white  */
    --ts-accent-deep: #095e4f;
    --ts-accent-soft: rgba(12, 122, 102, .10);
    --ts-accent-ring: rgba(12, 122, 102, .16);
    --ts-link: #0a6b5a;            /* 6.4:1 against white  */
    --ts-on-accent: #ffffff;

    --ts-danger: #a32323;
    --ts-danger-btn: #a32323;      /* 7.4:1 against --ts-on-danger */
    --ts-on-danger: #ffffff;
    --ts-danger-soft: rgba(163, 35, 35, .08);
    --ts-warn-soft: rgba(163, 118, 20, .10);
    --ts-warn-ink: #6d4c07;

    --ts-glow-1: rgba(12, 122, 102, .15);
    --ts-glow-2: rgba(58, 79, 196, .13);
    --ts-glow-3: rgba(192, 53, 106, .10);

    --sh-1: 0 1px 2px rgba(20, 30, 45, .05);
    --sh-2: 0 14px 34px -18px rgba(20, 30, 45, .28), 0 2px 8px -4px rgba(20, 30, 45, .10);
    --sh-3: 0 34px 74px -32px rgba(20, 30, 45, .34), 0 6px 18px -10px rgba(20, 30, 45, .12);
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .9);
    --sh-cta: 0 12px 26px -14px rgba(12, 122, 102, .72), inset 0 1px 0 rgba(255, 255, 255, .22);
    --sh-cta-hover: 0 20px 38px -16px rgba(12, 122, 102, .78), inset 0 1px 0 rgba(255, 255, 255, .26);

    --r-shell: 26px;
    --r-core: 20px;
    --r-ctl: 12px;
    --r-pill: 999px;

    --ease: cubic-bezier(.32, .72, 0, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --ts-max: 1180px;
    --ts-field-w: 460px;

    /* icons - swapped wholesale in dark mode so stroke colours stay legible */
    --ts-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.6 19.6a7.9 7.9 0 0 1 14.8 0'/%3E%3C/svg%3E");
    --ts-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='9.6' rx='2.6'/%3E%3Cpath d='M8 10.4V7.8a4 4 0 0 1 8 0v2.6'/%3E%3C/svg%3E");
    --ts-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5462' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 12S6.1 5.9 12 5.9 21.4 12 21.4 12 17.9 18.1 12 18.1 2.6 12 2.6 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --ts-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5462' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l16 16'/%3E%3Cpath d='M10 6.1A9.7 9.7 0 0 1 12 5.9c5.9 0 9.4 6.1 9.4 6.1a17.2 17.2 0 0 1-3.3 4'/%3E%3Cpath d='M6.7 8A16.7 16.7 0 0 0 2.6 12S6.1 18.1 12 18.1a9.5 9.5 0 0 0 3.5-.7'/%3E%3Cpath d='M9.9 10a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
    --ts-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a5462' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    --ts-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 8.4l3 3 6.2-6.6'/%3E%3C/svg%3E");
    --ts-icon-cta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Ccircle cx='20' cy='20' r='19' fill='%23ffffff' fill-opacity='.18'/%3E%3Cpath d='M16 24l8-8M17.4 16H24v6.6' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --ts-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230c7a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.4l3.8 3.8L16 6'/%3E%3C/svg%3E");
    --ts-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5462' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.2 12 3.7l8.4 6.5V19a1.6 1.6 0 0 1-1.6 1.6h-3.5v-6H8.7v6H5.2A1.6 1.6 0 0 1 3.6 19z'/%3E%3C/svg%3E");
    --ts-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5462' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
    --ts-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3H7.2A2.2 2.2 0 0 0 5 5.2v13.6A2.2 2.2 0 0 0 7.2 21h9.6a2.2 2.2 0 0 0 2.2-2.2V8.6z'/%3E%3Cpath d='M13.6 3v5.6H19'/%3E%3Cpath d='M12 11.6v4.8M9.7 14.2 12 16.5l2.3-2.3'/%3E%3C/svg%3E");
    --ts-icon-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7a66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='3.4' width='15.6' height='17.2' rx='2.2'/%3E%3Cpath d='M8 8.4h8M8 12h8M8 15.6h5'/%3E%3C/svg%3E");
    --ts-icon-chevron-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230c7a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root {
        --ts-canvas: #0c1013;

        --c-teal:   #16b092;
        --c-sky:    #4cb8e8;
        --c-indigo: #8090f5;
        --c-violet: #b088f0;
        --c-rose:   #f2789f;
        --c-amber:  #e0a63c;
        --c-teal-soft:   rgba(22, 176, 146, .16);
        --c-sky-soft:    rgba(76, 184, 232, .16);
        --c-indigo-soft: rgba(128, 144, 245, .16);
        --c-violet-soft: rgba(176, 136, 240, .16);
        --c-rose-soft:   rgba(242, 120, 159, .16);
        --c-amber-soft:  rgba(224, 166, 60, .16);
        --c-cta: linear-gradient(118deg, var(--c-teal) 0%, #21b9ba 58%, var(--c-sky) 128%);
        --ts-surface: #151b21;
        --ts-surface-2: rgba(255, 255, 255, .04);
        --ts-field: #10161b;

        --ts-ink: #e7ecf1;
        --ts-ink-2: #a7b3c0;
        --ts-ink-3: #7e8b99;

        --ts-line: rgba(255, 255, 255, .09);
        --ts-line-strong: rgba(255, 255, 255, .15);

        --ts-accent: #16b092;      /* 6.2:1 against --ts-on-accent */
        --ts-accent-deep: #1ec5a3;
        --ts-accent-soft: rgba(22, 176, 146, .12);
        --ts-accent-ring: rgba(22, 176, 146, .22);
        --ts-link: #34d3ae;        /* 9.1:1 against --ts-surface  */
        --ts-on-accent: #04211b;

        --ts-danger: #ff8f8f;
        --ts-danger-soft: rgba(255, 143, 143, .10);
        --ts-warn-soft: rgba(240, 190, 90, .12);
        --ts-warn-ink: #f0be5a;

        --ts-glow-1: rgba(22, 176, 146, .15);
        --ts-glow-2: rgba(96, 120, 240, .14);
        --ts-glow-3: rgba(230, 90, 140, .10);

        --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
        --sh-2: 0 14px 34px -18px rgba(0, 0, 0, .78), 0 2px 8px -4px rgba(0, 0, 0, .45);
        --sh-3: 0 34px 74px -32px rgba(0, 0, 0, .86), 0 6px 18px -10px rgba(0, 0, 0, .50);
        --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .06);
        --sh-cta: 0 12px 26px -14px rgba(22, 176, 146, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
        --sh-cta-hover: 0 20px 38px -16px rgba(22, 176, 146, .62), inset 0 1px 0 rgba(255, 255, 255, .22);

        --ts-icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e8b99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.6 19.6a7.9 7.9 0 0 1 14.8 0'/%3E%3C/svg%3E");
        --ts-icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e8b99' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='9.6' rx='2.6'/%3E%3Cpath d='M8 10.4V7.8a4 4 0 0 1 8 0v2.6'/%3E%3C/svg%3E");
        --ts-icon-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b3c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 12S6.1 5.9 12 5.9 21.4 12 21.4 12 17.9 18.1 12 18.1 2.6 12 2.6 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
        --ts-icon-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b3c0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l16 16'/%3E%3Cpath d='M10 6.1A9.7 9.7 0 0 1 12 5.9c5.9 0 9.4 6.1 9.4 6.1a17.2 17.2 0 0 1-3.3 4'/%3E%3Cpath d='M6.7 8A16.7 16.7 0 0 0 2.6 12S6.1 18.1 12 18.1a9.5 9.5 0 0 0 3.5-.7'/%3E%3Cpath d='M9.9 10a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
        --ts-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a7b3c0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
        --ts-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2304211b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 8.4l3 3 6.2-6.6'/%3E%3C/svg%3E");
        --ts-icon-cta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Ccircle cx='20' cy='20' r='19' fill='%2304211b' fill-opacity='.20'/%3E%3Cpath d='M16 24l8-8M17.4 16H24v6.6' stroke='%2304211b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        --ts-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2316b092' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.4l3.8 3.8L16 6'/%3E%3C/svg%3E");
        --ts-icon-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b3c0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 10.2 12 3.7l8.4 6.5V19a1.6 1.6 0 0 1-1.6 1.6h-3.5v-6H8.7v6H5.2A1.6 1.6 0 0 1 3.6 19z'/%3E%3C/svg%3E");
        --ts-icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a7b3c0' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
        --ts-icon-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316b092' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.6 3H7.2A2.2 2.2 0 0 0 5 5.2v13.6A2.2 2.2 0 0 0 7.2 21h9.6a2.2 2.2 0 0 0 2.2-2.2V8.6z'/%3E%3Cpath d='M13.6 3v5.6H19'/%3E%3Cpath d='M12 11.6v4.8M9.7 14.2 12 16.5l2.3-2.3'/%3E%3C/svg%3E");
        --ts-icon-page: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316b092' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.2' y='3.4' width='15.6' height='17.2' rx='2.2'/%3E%3Cpath d='M8 8.4h8M8 12h8M8 15.6h5'/%3E%3C/svg%3E");
        --ts-icon-chevron-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2334d3ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5l5 5-5 5'/%3E%3C/svg%3E");
    }
}

/* --------------------------------------------------------------------------
   2. Page shell + sticky footer
   .am-footer is a SIBLING of .am-layout (both direct children of body),
   so the sticky footer has to be built on body itself.
   -------------------------------------------------------------------------- */
html {
    height: 100% !important;
    background-color: var(--ts-canvas);
    background-image:
        radial-gradient(840px 560px at 6% -10%, var(--ts-glow-1), transparent 66%),
        radial-gradient(740px 500px at 94% -4%, var(--ts-glow-2), transparent 64%),
        radial-gradient(960px 620px at 52% 106%, var(--ts-glow-3), transparent 68%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

body {
    height: auto !important;
    min-height: 100dvh !important;
    display: flex;
    flex-direction: column;
    background: transparent;
    font-family: var(--ts-font);
    color: var(--ts-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.am-layout {
    flex: 1 0 auto !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0;
    background: transparent;
}

.am-footer {
    flex-shrink: 0;
    height: auto !important;
}

.am-main {
    max-width: var(--ts-max) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
.am-common {
    font-family: var(--ts-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ts-ink);
}

.am-common h1,
.am-common h2,
.am-common h3 {
    color: var(--ts-ink);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.am-common h1 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.032em;
    margin: 0;
}

.am-common h2 {
    font-size: 22px;
    font-weight: 650;
    margin: 0 0 .6em;
}

.am-common h3 {
    font-size: 17px;
    font-weight: 650;
    margin: 0 0 .5em;
}

.am-common p {
    line-height: 1.65;
    padding-bottom: .8em;
}

.am-common a {
    color: var(--ts-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--ts-link) 32%, transparent);
    text-underline-offset: 3px;
    transition: color .3s var(--ease), text-decoration-color .3s var(--ease);
}

.am-common a:hover {
    color: var(--ts-accent-deep);
    text-decoration-color: currentColor;
}

/* stock draws a dashed pseudo-underline on these; we underline properly instead */
.am-common .ajax-link:after,
.am-common .local-link:after,
.am-common .local:after {
    display: none;
}

.am-common hr {
    background-color: var(--ts-line);
    margin: 2em 0;
}

.am-common mark {
    background: var(--ts-warn-soft);
    color: var(--ts-warn-ink);
    border-radius: var(--r-pill);
    padding: 3px 12px 4px;
    font-size: 12.5px;
    font-weight: 500;
    display: inline-block;
    margin-top: 8px;
}

/* stock kills focus outlines everywhere - restore a visible, on-brand ring */
.am-common a:focus-visible,
.am-common input:focus-visible,
.am-common select:focus-visible,
.am-common textarea:focus-visible,
.am-common button:focus-visible,
.am-footer a:focus-visible {
    outline: 2px solid var(--ts-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */
.am-header {
    background: transparent;
    overflow: visible;
}

.am-header .am-header-content-wrapper {
    border: none;
    background: none;
    padding-top: 0;
    padding-bottom: 0;
}

.am-header .am-header-content {
    padding: 30px 0 26px;
    overflow: visible;
    text-align: center;
}

.am-header .am-header-content .am-header-content-logo {
    float: none;
    margin: 0;
    display: inline-block;
    width: auto !important;
    height: auto !important;
    max-height: 46px !important;
    max-width: 240px !important;
    vertical-align: middle;
    transition: opacity .45s var(--ease);
}

.am-header a {
    display: inline-block;
    text-decoration: none;
}

.am-header a:hover .am-header-content-logo {
    opacity: .72;
}

/* fading hairline instead of the stock 12px grey bar */
.am-header-line {
    height: 1px !important;
    border: none;
    background-color: transparent;
    background-image: var(--c-spectrum);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    opacity: .8;
    max-width: var(--ts-max) !important;
    margin: 0 auto;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   5. Body surface
   -------------------------------------------------------------------------- */
.am-body {
    background: none;
    padding: 40px 0 64px;
}

.am-body .am-body-content-wrapper {
    background: var(--ts-surface);
    border: 1px solid var(--ts-line);
    border-radius: var(--r-shell);
    box-shadow: var(--sh-2);
    padding: 36px 36px 44px !important;
}

/* auth screens: the form card is the only object on the page */
.am-page-login .am-body .am-body-content-wrapper {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 24px !important;
}

.am-body-content {
    min-height: 0;
}

/* --- page title row + language switch --- */
.am-common .am-body-content-top {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    overflow: visible;
    margin: 0 0 26px;
}

.am-common .am-body-content-top:has(h1) {
    padding-bottom: 22px;
    border-bottom: 1px solid var(--ts-line);
}

.am-common .am-body-content-top h1 {
    order: 1;
    flex: 1 1 240px;
}

.am-common .am-lang-choice {
    order: 2;
    float: none;
    margin-left: auto;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 9px;
}

.am-common .am-lang-choice form {
    display: flex;
    align-items: center;
    gap: 9px;
}

.am-common .am-lang-title {
    float: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ts-ink-3);
    white-space: nowrap;
}

.am-common .am-lang-choice select {
    -webkit-appearance: none;
    appearance: none;
    height: 36px !important;
    max-width: none !important;
    padding: 0 34px 0 14px;
    border: 1px solid var(--ts-line-strong);
    border-radius: var(--r-pill);
    background-color: var(--ts-surface);
    background-image: var(--ts-icon-chevron);
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    box-shadow: var(--sh-1);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--ts-ink-2);
    cursor: pointer;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}

.am-common .am-lang-choice select:hover {
    border-color: var(--ts-accent);
    color: var(--ts-ink);
}

.am-common .am-lang-choice select:focus {
    border-color: var(--ts-accent);
    box-shadow: 0 0 0 4px var(--ts-accent-ring);
}

/* --- default page copy --- */
.am-common .am-body-content-content {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ts-ink-2);
    margin: 0 auto;
}

.am-common .am-body-content-content a {
    font-weight: 600;
}

.am-page-login .am-body-content-content,
.am-page-signup .am-body-content-content {
    max-width: none;
    color: var(--ts-ink);
}

/* --------------------------------------------------------------------------
   6. Auth card - nested "tray + plate" enclosure
   .am-auth-form = outer shell (6px lip)  >  form = pass-through  >  fieldset = core
   -------------------------------------------------------------------------- */
.am-login-form-wrapper,
.am-sendpass-form-wrapper {
    margin-top: 0;
}

.am-common .am-auth-form {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto;
    padding: 6px;
    border-radius: var(--r-shell);
    background: var(--ts-surface-2);
    box-shadow: inset 0 0 0 1px var(--ts-line), var(--sh-3);
}

.am-common .am-auth-form form {
    border: none;
    overflow: visible;
    box-shadow: none;
    background: none;
    margin: 0;
}

.am-common .am-auth-form fieldset {
    border: none;
    margin: 0;
    padding: 30px 30px 32px !important;
    border-radius: var(--r-core);
    background: var(--ts-surface);
    box-shadow: var(--sh-inset), 0 1px 2px rgba(20, 30, 45, .04);
}

.am-common .am-auth-form form legend {
    display: block;
    float: none;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0 0 24px;
    border: none;
    background: none;
    text-indent: 0;
    text-align: left;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.25;
    color: var(--ts-ink);
}

/* rows: stacked label-above-input, no stock zebra / dashed rules */
.am-common .am-auth-form div.row {
    background: none;
    border: none;
    margin: 0 0 16px;
    padding: 0;
}

.am-common .am-auth-form div.row:last-of-type {
    margin-bottom: 0;
}

.am-common .am-auth-form div.row div.element-title,
.am-common .am-auth-form div.row div.element {
    float: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: left;
    background: none;
}

.am-common .am-auth-form div.row div.element-title {
    margin-bottom: 8px;
}

.am-common .am-auth-form div.element-title label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ts-ink-2);
}

.am-common .am-auth-form .row-login-recaptcha .element {
    display: flex;
    justify-content: center;
    padding: 4px 0 6px;
}

/* --- text fields --- */
.am-common .am-auth-form input[type=text],
.am-common .am-auth-form input[type=password] {
    box-sizing: border-box;
    width: 100% !important;
    height: 52px !important;
    padding: 0 16px 0 46px !important;
    border: 1px solid var(--ts-line-strong);
    border-radius: var(--r-ctl);
    background-color: var(--ts-field);
    background-repeat: no-repeat;
    background-position: left 16px center;
    background-size: 19px 19px;
    box-shadow: inset 0 1px 2px rgba(20, 30, 45, .04);
    font: inherit;
    font-size: 15px;
    line-height: normal;
    color: var(--ts-ink);
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
}

.am-common .am-auth-form input[name=amember_login],
.am-common .am-auth-form input[name=login] {
    background-image: var(--ts-icon-user);
}

.am-common .am-auth-form input[name=amember_pass] {
    background-image: var(--ts-icon-lock);
    padding-right: 52px !important;
}

.am-common .am-auth-form input[type=text]::placeholder,
.am-common .am-auth-form input[type=password]::placeholder {
    color: var(--ts-ink-3);
    opacity: 1;
}

.am-common .am-auth-form input[type=text]:hover,
.am-common .am-auth-form input[type=password]:hover {
    border-color: color-mix(in srgb, var(--ts-ink) 22%, transparent);
}

.am-common .am-auth-form input[type=text]:focus,
.am-common .am-auth-form input[type=password]:focus {
    border-color: var(--ts-accent);
    background-color: var(--ts-surface);
    box-shadow: 0 0 0 4px var(--ts-accent-ring), inset 0 1px 2px rgba(20, 30, 45, .03);
}

.am-common .am-auth-form input.error {
    border-color: var(--ts-danger);
    background-color: var(--ts-danger-soft);
}

/* --- password reveal toggle --- */
.am-common .am-auth-form .row-login-pass .element {
    position: relative;
}

.am-common .am-switch-reveal {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px !important;
    height: 52px !important;
    margin: 0;
    border-radius: var(--r-ctl);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
    opacity: .5;
    cursor: pointer;
    transition: opacity .3s var(--ease);
}

.am-common .am-switch-reveal:hover {
    opacity: 1;
}

.am-common .am-switch-reveal-off {
    background-image: var(--ts-icon-eye-off);
}

.am-common .am-switch-reveal-on {
    background-image: var(--ts-icon-eye);
}

/* --- "Stay signed in" --- */
.am-common #am-form-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    margin: 16px 0 0;
    padding: 0;
    background: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ts-ink-2);
    cursor: pointer;
    user-select: none;
}

.am-common #am-form-login-remember input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 19px !important;
    height: 19px !important;
    margin: 0;
    border: 1px solid var(--ts-line-strong);
    border-radius: 6px;
    background-color: var(--ts-surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease);
}

.am-common #am-form-login-remember input[type=checkbox]:checked {
    background-color: var(--ts-accent);
    border-color: var(--ts-accent);
    background-image: var(--ts-icon-check);
}

/* --- actions --- */
.am-common .am-auth-form div.row-buttons {
    margin-top: 24px;
    text-align: left;
}

.am-common .am-auth-form div.row-buttons .element {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}

.am-common .am-auth-form input[type=submit] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100% !important;
    height: 54px !important;
    padding: 0 56px !important;
    border: none;
    border-radius: var(--r-pill);
    background-color: var(--ts-accent);
    background-image: var(--ts-icon-cta);
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 40px 40px;
    box-shadow: var(--sh-cta);
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 54px;
    letter-spacing: .005em;
    color: var(--ts-on-accent);
    text-shadow: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease);
}

.am-common .am-auth-form input[type=submit]:hover {
    background-color: var(--ts-accent-deep);
    box-shadow: var(--sh-cta-hover);
    transform: translateY(-1px);
}

.am-common .am-auth-form input[type=submit]:active {
    transform: translateY(0) scale(.985);
    box-shadow: var(--sh-cta);
}

.am-common .am-form-login-switch {
    align-self: center;
    margin: 0;
    font-size: 13.5px;
    font-weight: 550;
    color: var(--ts-ink-3);
    text-decoration: none;
    transition: color .3s var(--ease);
}

.am-common .am-form-login-switch:hover {
    color: var(--ts-accent);
    text-decoration: none;
}

/* --- signup footnote under the card --- */
.am-common .am-signup-link {
    max-width: 460px;
    margin: 22px auto 0;
    text-align: center;
    font-size: 14px;
    color: var(--ts-ink-2);
}

.am-common .am-signup-link a {
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Messages: errors, notices, flash
   -------------------------------------------------------------------------- */
.am-common div.errors ul,
.am-common ul.error,
.am-common ul.errors {
    margin: 0 auto 18px;
    max-width: 460px;
    border: 1px solid color-mix(in srgb, var(--ts-danger) 34%, transparent);
    border-radius: var(--r-ctl);
    background: var(--ts-danger-soft);
    color: var(--ts-danger);
    box-shadow: var(--sh-1);
}

.am-common div.errors ul li,
.am-common ul.error li,
.am-common ul.errors li {
    padding: 11px 16px;
    font-size: 13.5px;
    line-height: 1.5;
}

.am-common .error,
.am-common .am-form span.error {
    color: var(--ts-danger);
}

.am-common .am-info,
.am-common .am-notice,
.am-common .am-block {
    border-radius: var(--r-ctl);
    border: 1px solid var(--ts-line);
    box-shadow: var(--sh-1);
    padding: 14px 18px;
}

.am-common .am-info {
    background: var(--ts-accent-soft);
    border-color: color-mix(in srgb, var(--ts-accent) 26%, transparent);
    color: var(--ts-ink);
}

.am-common .am-notice {
    background: var(--ts-warn-soft);
    border-color: color-mix(in srgb, var(--ts-warn-ink) 26%, transparent);
    color: var(--ts-warn-ink);
}

.am-common .am-block {
    background: var(--ts-surface);
    color: var(--ts-ink-2);
    padding: 20px 22px;
}

.am-flash-mask {
    background: rgba(10, 14, 20, .42);
    opacity: 1;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.am-flash-content {
    top: 18%;
    left: 50%;
    margin-left: 0;
    width: min(380px, calc(100vw - 32px)) !important;
    transform: translateX(-50%);
}

.am-flash-content-message,
.am-flash-content-error {
    border-radius: var(--r-ctl);
    padding: 14px 18px;
    box-shadow: var(--sh-3);
    font-size: 14px;
    line-height: 1.5;
}

.am-flash-content-message {
    background: var(--ts-surface);
    border: 1px solid var(--ts-line-strong);
    color: var(--ts-ink);
}

.am-flash-content-error {
    background: var(--ts-surface);
    border: 1px solid color-mix(in srgb, var(--ts-danger) 40%, transparent);
    color: var(--ts-danger);
}

@media (prefers-reduced-transparency: reduce) {
    .am-flash-mask {
        background: rgba(10, 14, 20, .62);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* --------------------------------------------------------------------------
   8. Footer  (sits OUTSIDE .am-common - selectors must stay unscoped)
   -------------------------------------------------------------------------- */
.am-footer {
    font-family: var(--ts-font);
    color: var(--ts-ink-3);
}

.am-footer .am-footer-content-wrapper {
    height: auto !important;
    background: none;
    color: var(--ts-ink-3);
    font-size: 13px;
    border-top: 1px solid var(--ts-line);
}

.am-footer .am-footer-content {
    padding: 26px 0 34px;
    text-align: center;
}

.am-footer .am-footer-actions {
    display: none;
}

.am-footer .am-credits {
    margin: 0 0 6px;
    height: auto;
    color: var(--ts-ink-3);
    opacity: 1;
    font-size: 12px;
}

.am-footer .am-footer-text {
    padding: 0;
    text-align: center;
    color: var(--ts-ink-3);
    font-size: 13px;
}

.am-footer a,
.am-footer .am-credits a {
    color: var(--ts-ink-2) !important; /* stock .am-credits a uses !important */
    text-decoration: none;
    transition: color .3s var(--ease);
}

.am-footer a:hover,
.am-footer .am-credits a:hover {
    color: var(--ts-accent) !important;
}

/* --------------------------------------------------------------------------
   9. Generic .am-form controls  (every member-area form)
   Scoped with :not(.am-auth-form) wherever the auth-card rules above would
   otherwise be beaten on equal specificity by source order.
   -------------------------------------------------------------------------- */
.am-common .am-form:not(.am-auth-form) input[type=text],
.am-common .am-form:not(.am-auth-form) input[type=email],
.am-common .am-form:not(.am-auth-form) input[type=tel],
.am-common .am-form:not(.am-auth-form) input[type=number],
.am-common .am-form:not(.am-auth-form) input[type=password],
.am-common .am-form:not(.am-auth-form) select,
.am-common .am-form:not(.am-auth-form) textarea {
    box-sizing: border-box;
    width: 100% !important;
    max-width: var(--ts-field-w) !important;
    padding: 0 16px;
    border: 1px solid var(--ts-line-strong);
    border-radius: var(--r-ctl);
    background-color: var(--ts-field);
    box-shadow: inset 0 1px 2px rgba(20, 30, 45, .04);
    font: inherit;
    font-size: 15px;
    line-height: normal;
    color: var(--ts-ink);
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease);
    max-width: 100% !important;
}

.am-common .am-form:not(.am-auth-form) input[type=text],
.am-common .am-form:not(.am-auth-form) input[type=email],
.am-common .am-form:not(.am-auth-form) input[type=tel],
.am-common .am-form:not(.am-auth-form) input[type=number],
.am-common .am-form:not(.am-auth-form) input[type=password],
.am-common .am-form:not(.am-auth-form) select {
    height: 52px !important;
}

.am-common .am-form:not(.am-auth-form) textarea {
    min-height: 128px !important;
    padding: 14px 16px;
    line-height: 1.6;
    resize: vertical;
}

.am-common .am-form:not(.am-auth-form) select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 42px !important;
    background-image: var(--ts-icon-chevron);
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 13px 13px;
    cursor: pointer;
}

.am-common .am-form:not(.am-auth-form) input::placeholder,
.am-common .am-form:not(.am-auth-form) textarea::placeholder {
    color: var(--ts-ink-3);
    opacity: 1;
}

.am-common .am-form:not(.am-auth-form) input[type=text]:hover,
.am-common .am-form:not(.am-auth-form) input[type=password]:hover,
.am-common .am-form:not(.am-auth-form) select:hover,
.am-common .am-form:not(.am-auth-form) textarea:hover {
    border-color: color-mix(in srgb, var(--ts-ink) 22%, transparent);
}

.am-common .am-form:not(.am-auth-form) input:focus,
.am-common .am-form:not(.am-auth-form) select:focus,
.am-common .am-form:not(.am-auth-form) textarea:focus {
    border-color: var(--ts-accent);
    background-color: var(--ts-surface);
    box-shadow: 0 0 0 4px var(--ts-accent-ring), inset 0 1px 2px rgba(20, 30, 45, .03);
}

.am-common .am-form:not(.am-auth-form) input.error,
.am-common .am-form:not(.am-auth-form) select.error,
.am-common .am-form:not(.am-auth-form) textarea.error {
    border-color: var(--ts-danger);
    background-color: var(--ts-danger-soft);
}

/* the jQuery-validate "field is fine" tick */
.am-common .am-signup-form input.valid {
    background-color: var(--ts-field);
    background-image: var(--ts-icon-valid);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 17px 17px;
    padding-right: 42px !important;
}

.am-common .am-signup-form input.am-with-action.valid {
    background-image: none;
    padding-right: 52px !important;
}

/* --- radio + checkbox --- */
.am-common input[type=radio],
.am-common input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 20px !important;
    height: 20px !important;
    margin: 0;
    border: 1.5px solid var(--ts-line-strong);
    background-color: var(--ts-surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    cursor: pointer;
    transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.am-common input[type=radio] {
    border-radius: 50%;
}

.am-common input[type=checkbox] {
    border-radius: 6px;
}

.am-common input[type=radio]:checked {
    border-color: var(--ts-accent);
    background-color: var(--ts-accent);
    box-shadow: inset 0 0 0 4px var(--ts-surface);
}

.am-common input[type=checkbox]:checked {
    border-color: var(--ts-accent);
    background-color: var(--ts-accent);
    background-image: var(--ts-icon-check);
}

/* --- labels, hints, validation copy --- */
.am-common .am-form span.required {
    color: var(--ts-accent);
    font-weight: 600;
}

.am-common .am-form span.error {
    display: block;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ts-danger);
}

/* --- section fieldsets --- */
.am-common .am-form:not(.am-auth-form) fieldset {
    display: block;
    margin: 30px 0 0;
    padding: 0;
    border: 1px solid var(--ts-line);
    border-radius: var(--r-core);
    background: var(--ts-surface);
    overflow: hidden;
}

.am-common .am-form:not(.am-auth-form) fieldset legend {
    box-sizing: border-box;
    display: block;
    float: none;
    width: 100%;
    margin: 0;
    padding: 15px 20px;
    border: none;
    border-bottom: 1px solid var(--ts-line);
    background: var(--ts-field);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ts-ink);
}

.am-common .am-form:not(.am-auth-form) fieldset > .fieldset {
    padding: 22px 20px;
}

/* --- buttons --- */
.am-common .am-form:not(.am-auth-form) input[type=submit] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    height: 54px !important;
    min-width: 200px !important;
    padding: 0 56px 0 34px !important;
    border: none;
    border-radius: var(--r-pill);
    background-color: var(--ts-accent);
    background-image: var(--ts-icon-cta);
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 40px 40px;
    box-shadow: var(--sh-cta);
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 54px;
    color: var(--ts-on-accent);
    text-shadow: none;
    cursor: pointer;
    transition: transform .5s var(--ease), box-shadow .5s var(--ease), background-color .5s var(--ease);
}

.am-common .am-form:not(.am-auth-form) input[type=submit]:hover {
    background-color: var(--ts-accent-deep);
    box-shadow: var(--sh-cta-hover);
    transform: translateY(-1px);
}

.am-common .am-form:not(.am-auth-form) input[type=submit]:active {
    transform: translateY(0) scale(.985);
    box-shadow: var(--sh-cta);
}

/* secondary actions used across the member area */
.am-common a.button,
.am-common input[type=button] {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    height: 44px !important;
    padding: 0 22px;
    border: 1px solid var(--ts-line-strong);
    border-radius: var(--r-pill);
    background: var(--ts-surface);
    box-shadow: var(--sh-1);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 42px;
    color: var(--ts-ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}

.am-common a.button:hover,
.am-common a.button:active,
.am-common a.button.active,
.am-common input[type=button]:hover,
.am-common input[type=button]:active {
    background: var(--ts-surface);
    background-image: none;
    border-color: var(--ts-accent);
    color: var(--ts-accent);
    transform: translateY(-1px);
    box-shadow: var(--sh-2);
}

/* --------------------------------------------------------------------------
   10. Signup page
   -------------------------------------------------------------------------- */
.am-common .am-signup .am-login-text {
    margin-bottom: 28px;
}

/* --- stacked rows (label above field) --- */
.am-common .am-signup-form div.row {
    margin: 0 0 22px;
    padding: 0;
    border: none;
    background: none;
}

.am-common .am-signup-form div.row div.element-title,
.am-common .am-signup-form div.row div.element {
    float: none;
    width: 100% !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-align: left;
    background: none;
}

.am-common .am-signup-form div.row div.element-title {
    margin-bottom: 8px;
}

.am-common .am-signup-form div.element-title label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ts-ink-2);
}

.am-common .am-signup-form div.element-title .comment,
.am-common .am-signup-form div.element-title .comment strong,
.am-common .am-signup-form div.element-title .comment b {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ts-ink-3);
}

/* keep single-control rows to a readable measure so the reveal / strength
   affordances line up with the right edge of the field itself */
.am-common .am-signup-form div.row div.element:has(> input[type=text]),
.am-common .am-signup-form div.row div.element:has(> input[type=password]),
.am-common .am-signup-form div.row div.element:has(> select),
.am-common .am-signup-form div.row div.element:has(> textarea) {
    max-width: 100% !important;
}

/* --- selectable option cards: products + payment systems --- */
.am-common .am-signup-form div.element > br {
    display: none;
}

.am-common .am-signup-form [id^="row-product_id"] div.element,
.am-common .am-signup-form [id^="row-paysys_id"] div.element {
    display: grid;
    gap: 10px;
}

.am-common .am-signup-form [id^="row-product_id"] div.element > label,
.am-common .am-signup-form [id^="row-paysys_id"] div.element > label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 14px;
    row-gap: 6px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--ts-line-strong);
    border-radius: var(--r-ctl);
    background: var(--ts-surface);
    box-shadow: var(--sh-1);
    font-size: 0; /* swallows the stray &nbsp; text node between radio and label */
    cursor: pointer;
    transition: border-color .35s var(--ease), background-color .35s var(--ease),
                box-shadow .35s var(--ease), transform .35s var(--ease);
}

.am-common .am-signup-form [id^="row-product_id"] div.element > label:hover,
.am-common .am-signup-form [id^="row-paysys_id"] div.element > label:hover {
    border-color: color-mix(in srgb, var(--ts-accent) 55%, transparent);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
}

.am-common .am-signup-form [id^="row-product_id"] div.element > label:has(input:checked),
.am-common .am-signup-form [id^="row-paysys_id"] div.element > label:has(input:checked) {
    border-color: var(--ts-accent);
    background: var(--ts-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ts-accent);
}

.am-common .am-signup-form div.element > label > input[type=radio] {
    order: 1;
}

.am-common .am-product-title,
.am-common .am-paysystem-title {
    order: 2;
    flex: 1 1 220px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ts-ink);
}

.am-common .am-product-terms {
    order: 3;
    margin-left: auto;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ts-ink);
}

.am-common .am-signup-form div.element > label:has(input:checked) .am-product-terms {
    color: var(--ts-accent);
}

.am-common .am-product-desc,
.am-common .am-paysystem-desc {
    order: 4;
    flex: 0 0 100%;
    display: block;
    padding-left: 34px;
    font-size: 13.5px;
    font-style: normal;
    line-height: 1.55;
    color: var(--ts-ink-3);
}

/* --- password strength meter (JS writes width/top inline, hence !important) --- */
.am-common .am-signup-form [id^="row-pass"] div.element {
    padding-bottom: 14px;
}

.am-common .am-pass-indicator-bar {
    position: absolute !important;
    top: 58px !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--ts-line-strong);
}

.am-common .am-pass-indicator-bar_bar {
    height: 4px;
    border-radius: var(--r-pill);
    transition: width .6s var(--ease), background-color .6s var(--ease);
}

.am-common .am-pass-indicator-bar_bar-weak {
    background: var(--ts-danger);
}

.am-common .am-pass-indicator-bar_bar-good {
    background: color-mix(in srgb, var(--ts-warn-ink) 70%, var(--ts-accent));
}

.am-common .am-pass-indicator-bar_bar-strong {
    background: var(--ts-accent);
}

/* --- order summary --- */
.am-common .am-signup-form div.row:has(#invoice-summary) {
    margin-top: 28px;
}

.am-common .am-invoice-summary {
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--ts-line);
    border-radius: var(--r-ctl);
    background: var(--ts-field);
    box-shadow: inset 0 1px 2px rgba(20, 30, 45, .03);
    color: var(--ts-ink-2);
}

.am-common .am-invoice-summary td {
    padding: 7px 0;
    font-size: 14px;
    line-height: 1.5;
}

.am-common .am-invoice-summary .am-invoice-summary-item {
    border-bottom: none;
}

.am-common .am-invoice-summary .am-invoice-summary-item-num {
    color: var(--ts-ink-3);
}

.am-common .am-invoice-summary .am-invoice-summary-price {
    width: 28% !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--ts-ink);
}

.am-common .am-invoice-summary tr.am-invoice-summary-delimeter td {
    padding: 6px 0;
}

.am-common .am-invoice-summary hr {
    margin: 0;
    background-color: var(--ts-line);
}

.am-common .am-invoice-summary .am-invoice-summary-total,
.am-common .am-invoice-summary .am-invoice-summary-row-total,
.am-common .am-invoice-summary .am-invoice-summary-subtotal,
.am-common .am-invoice-summary .am-invoice-summary-row-subtotal {
    font-size: 17px;
}

.am-common .am-invoice-summary .am-invoice-summary-row-total strong {
    font-weight: 700;
    color: var(--ts-ink);
}

/* --- user agreement --- */
.am-common .agreement {
    max-height: 280px !important;
    padding: 18px 20px;
    border: 1px solid var(--ts-line);
    border-radius: var(--r-ctl);
    background: var(--ts-field);
    box-shadow: inset 0 1px 2px rgba(20, 30, 45, .03);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ts-ink-2);
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ts-line-strong) transparent;
}

.am-common .agreement p {
    padding-bottom: .4em;
}

.am-common .am-signup-form div.row.no-label div.element {
    margin: 0;
    padding: 0;
}

/* --- "I agree" puts the box before its label --- */
.am-common .am-signup-form div.row[id^="row-i_agree"] {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
}

.am-common .am-signup-form div.row[id^="row-i_agree"]:after {
    display: none;
}

.am-common .am-signup-form div.row[id^="row-i_agree"] div.element-title,
.am-common .am-signup-form div.row[id^="row-i_agree"] div.element {
    width: auto !important;
    max-width: none !important;
    margin: 0;
    flex: 0 1 auto;
}

.am-common .am-signup-form div.row[id^="row-i_agree"] div.element-title label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ts-ink);
    cursor: pointer;
}

/* --- submit row --- */
.am-common .am-signup-form div.row[id^="row-buttons"] {
    margin: 30px 0 0;
}

/* --------------------------------------------------------------------------
   11. Logged-in member area
   .am-body-content-top switches from a title row to a vertical stack when it
   carries the account toolbar (toolbar > nav > page title).
   -------------------------------------------------------------------------- */
.am-common .am-body-content-top:has(.am-account-toolbar) {
    display: block;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.am-common .am-body-content-top:has(.am-account-toolbar) h1 {
    margin: 0 0 24px;
}

/* --- account toolbar --- */
.am-common .am-account-toolbar {
    overflow: visible;
    margin: 0 0 18px;
}

.am-common .am-account-toolbar .am-account-toolbar-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    overflow: visible;
    padding: 0;
    background: none;
}

.am-common .am-account-toolbar .am-lang-choice {
    order: 3;
    margin-left: auto;
}

.am-common .am-account-toolbar .am-user-identity-block {
    order: 4;
}

.am-common .am-tabs-narrow-dashboard,
.am-common .am-tabs-narrow-switch {
    order: 1;
    float: none;
    box-sizing: border-box;
    width: 40px !important;
    height: 40px !important;
    padding: 0;
    border: 1px solid var(--ts-line-strong);
    border-radius: var(--r-ctl);
    background-color: var(--ts-surface);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;
    box-shadow: var(--sh-1);
    cursor: pointer;
    transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.am-common .am-tabs-narrow-switch {
    order: 2;
    background-image: var(--ts-icon-menu);
}

.am-common .am-tabs-narrow-dashboard {
    background-image: var(--ts-icon-home);
}

.am-common .am-tabs-narrow-dashboard:hover,
.am-common .am-tabs-narrow-switch:hover {
    border-color: var(--ts-accent);
}

.am-common .am-tabs-narrow-dashboard:active,
.am-common .am-tabs-narrow-switch:active {
    transform: scale(.94);
}

.am-common .am-tabs-narrow-dashboard img,
.am-common .am-tabs-narrow-switch img {
    display: none;
}

/* --- who is signed in --- */
.am-common .am-user-identity-block {
    display: flex;
    align-items: center;
    gap: 12px;
    float: none;
    padding: 0 0 0 26px;
    background-image: var(--ts-icon-user);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 18px 18px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: normal;
    color: var(--ts-ink-2);
}

.am-common .am-user-identity-block .am-user-identity-block_login {
    max-width: 190px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ts-ink);
}

.am-common .am-user-identity-block a {
    flex: none;
    height: 34px !important;
    padding: 0 15px;
    border: 1px solid var(--ts-line-strong);
    border-radius: var(--r-pill);
    background: var(--ts-surface);
    font-size: 13px;
    font-weight: 600;
    line-height: 32px;
    color: var(--ts-ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .3s var(--ease), color .3s var(--ease);
}

.am-common .am-user-identity-block a:hover {
    border-color: var(--ts-accent);
    color: var(--ts-accent);
    text-decoration: none;
}

/* --- primary navigation --- */
.am-common .am-tabs-wrapper {
    margin: 0 0 26px;
    border-bottom: 1px solid var(--ts-line);
}

.am-common ul.am-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0 2px;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: none;
    border-radius: 0;
    background: none;
}

.am-common ul.am-tabs li {
    position: relative;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    background: none;
    white-space: nowrap;
}

.am-common ul.am-tabs a {
    display: block;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 13px 14px 15px;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 14px;
    font-weight: 550;
    line-height: 1.3;
    color: var(--ts-ink-2);
    text-decoration: none;
    transition: color .3s var(--ease);
}

.am-common ul.am-tabs li.active,
.am-common ul.am-tabs li.normal:hover,
.am-common ul.am-tabs li.active > a,
.am-common ul.am-tabs li.normal > a:hover {
    background: none;
    border-color: transparent;
}

/* stock renders the Dashboard item as a bare icon; show its label instead */
.am-common ul.am-tabs li a#menu-member {
    width: auto !important;
    height: auto !important;
    overflow: visible;
    text-indent: 0;
    background-image: none;
}

.am-common ul.am-tabs > li > a:after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--ts-line-strong);
    transform: scaleX(0);
    transform-origin: 50% 100%;
    transition: transform .45s var(--ease);
}

.am-common ul.am-tabs > li > a:hover {
    color: var(--ts-ink);
}

.am-common ul.am-tabs > li:not(.active) > a:hover:after {
    transform: scaleX(1);
}

.am-common ul.am-tabs > li.active:not(.expanded) > a {
    color: var(--ts-ink);
    font-weight: 650;
}

.am-common ul.am-tabs > li.active:not(.expanded) > a:after {
    background: var(--ts-accent);
    transform: scaleX(1);
}

/* dropdown affordance drawn from currentColor so it recolours with the link */
.am-common ul.am-tabs span.arrow {
    width: 0;
    height: 0;
    margin: 0 0 2px 7px;
    padding: 0;
    border-style: solid;
    border-width: 4px 3.5px 0 3.5px;
    border-color: currentColor transparent transparent transparent;
    background: none;
    opacity: .5;
}

.am-common ul.am-tabs .has-children > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    min-width: 236px !important;
    margin: 0;
    padding: 7px;
    border: 1px solid var(--ts-line);
    border-radius: var(--r-ctl);
    background: var(--ts-surface);
    box-shadow: var(--sh-3);
    overflow: visible;
}

.am-common ul.am-tabs .has-children:hover > ul,
.am-common ul.am-tabs .has-children:focus-within > ul,
.am-common ul.am-tabs .has-children.expanded > ul {
    display: block;
    margin-left: 0;
}

.am-common ul.am-tabs .has-children > ul li {
    float: none;
    margin: 0;
    border-radius: 0;
    background: none;
}

.am-common ul.am-tabs .has-children > ul a {
    padding: 9px 12px;
    border: none;
    border-radius: 9px;
    background: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ts-ink-2);
    transition: background-color .25s var(--ease), color .25s var(--ease);
}

.am-common ul.am-tabs .has-children > ul a:hover {
    background: var(--ts-field);
    color: var(--ts-ink);
}

.am-common ul.am-tabs .has-children > ul li.active {
    background: none;
}

.am-common ul.am-tabs .has-children > ul li.active > a {
    background: var(--ts-accent-soft);
    color: var(--ts-accent);
    font-weight: 600;
}

/* --- narrow navigation panel --- */
.am-common .am-tabs-narrow-wrapper .am-tabs-narrow-wrapper-tail {
    width: auto;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    overflow: hidden;
}

.am-common ul.am-tabs-narrow {
    margin: 6px 0 0;
    padding: 10px !important;
    border: 1px solid var(--ts-line);
    border-radius: var(--r-core);
    background: var(--ts-surface);
    box-shadow: var(--sh-2);
    overflow: visible;
}

.am-common ul.am-tabs-narrow li {
    list-style: none;
    margin: 0;
}

.am-common ul.am-tabs-narrow a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ts-ink-2);
    text-decoration: none;
    transition: background-color .25s var(--ease), color .25s var(--ease);
}

.am-common ul.am-tabs-narrow a:hover {
    background: var(--ts-field);
    color: var(--ts-ink);
}

.am-common ul.am-tabs-narrow li.active > a {
    background: var(--ts-accent-soft);
    color: var(--ts-accent);
    font-weight: 650;
}

.am-common ul.am-tabs-narrow ul {
    margin: 2px 0 6px 12px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--ts-line);
}

.am-common ul.am-tabs-narrow ul a {
    font-size: 13.5px;
    padding: 8px 12px;
}

/* --- two-column dashboard --- */
.am-common .am-layout-two-coll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 0 34px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.am-common .am-layout-two-coll .am-layout-two-coll-top,
.am-common .am-layout-two-coll .am-layout-two-coll-bottom {
    display: none;
}

.am-common .am-layout-two-coll .am-coll-left,
.am-common .am-layout-two-coll .am-coll-right {
    float: none !important;
    width: auto !important;
    min-width: 0;
}

.am-common .am-layout-two-coll .am-coll-left .am-coll-content,
.am-common .am-layout-two-coll .am-coll-right .am-coll-content {
    margin: 0;
}

.am-common .am-coll-content > h2 {
    margin: 30px 0 11px;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.012em;
    color: var(--ts-ink);
}

.am-common .am-coll-content > h2:first-child {
    margin-top: 0;
}

.am-common .am-coll-content > .am-block {
    margin: 0;
}

/* --- widget lists --- */
.am-common ul.am-widget-list {
    margin: 0;
    padding: 0;
}

.am-common ul.am-widget-list > li {
    list-style: none;
    margin: 0;
}

/* subscriptions: product name over its term */
.am-common .am-list-subscriptions > li {
    padding: 13px 0;
    border-bottom: 1px solid var(--ts-line);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ts-ink-3);
}

.am-common .am-list-subscriptions > li:first-child {
    padding-top: 0;
}

.am-common .am-list-subscriptions > li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.am-common .am-list-subscriptions > li strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ts-ink);
}

/* resources: icon tile + title + description */
.am-common .am-list-resources > li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    column-gap: 13px;
    row-gap: 3px;
    margin: 0 -12px;
    padding: 11px 12px;
    border-radius: var(--r-ctl);
    transition: background-color .3s var(--ease);
}

.am-common .am-list-resources > li:hover {
    background: var(--ts-field);
}

.am-common .am-list-resources > li:before {
    content: '';
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
    background-color: var(--ts-tile-soft, var(--c-teal-soft));
}

/* the glyph is masked, not painted, so it takes the row's hue */
.am-common .am-list-resources > li:after {
    content: '';
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    width: 36px !important;
    height: 36px !important;
    background-color: var(--ts-tile-ink, var(--c-teal));
    -webkit-mask-image: var(--ts-icon-file);
    mask-image: var(--ts-icon-file);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 18px 18px;
    mask-size: 18px 18px;
}

.am-common .am-list-resources > li:has(> .am-resource-page):after {
    -webkit-mask-image: var(--ts-icon-page);
    mask-image: var(--ts-icon-page);
}

.am-common .am-list-resources > li > a {
    grid-column: 2;
    align-self: center;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ts-ink);
    text-decoration: none;
    transition: color .3s var(--ease);
}

.am-common .am-list-resources > li:has(> div) > a {
    /* align-self: end; */
}

.am-common .am-list-resources > li > a:hover {
    color: var(--ts-accent);
}

.am-common .am-list-resources > li > div {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ts-ink-3);
}

/* newsletter + unsubscribe toggles */
.am-common .am-list-newsletters > li {
    margin: 0;
}

.am-common .am-list-newsletters label,
.am-common #member-main-unsubscribe > label {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 -12px;
    padding: 10px 12px;
    border-radius: var(--r-ctl);
    font-size: 14px;
    line-height: 1.45;
    color: var(--ts-ink-2);
    cursor: pointer;
    transition: background-color .3s var(--ease);
}

.am-common .am-list-newsletters label:hover,
.am-common #member-main-unsubscribe > label:hover {
    background: var(--ts-field);
    color: var(--ts-ink);
}

/* useful links */
.am-common .am-list-links > li > a {
    position: relative;
    display: block;
    margin: 0 -12px;
    padding: 11px 34px 11px 12px;
    border-radius: var(--r-ctl);
    font-size: 14px;
    font-weight: 500;
    color: var(--ts-ink-2);
    text-decoration: none;
    transition: background-color .3s var(--ease), color .3s var(--ease);
}

.am-common .am-list-links > li > a:hover {
    background: var(--ts-field);
    color: var(--ts-accent);
}

.am-common .am-list-links > li > a:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 13px;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    background-image: var(--ts-icon-chevron-r);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.am-common .am-list-links > li > a:hover:after {
    opacity: 1;
    transform: none;
}

/* --- cancel-subscription confirmation --- */
.am-common .cancel-subscription-popup-text {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ts-ink);
}

.am-common .cancel-subscription-buttons {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
}

.am-common input.am-cta-cancel {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100% !important;
    height: 50px !important;
    padding: 0 22px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--ts-danger-btn);
    box-shadow: var(--sh-1);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 50px;
    color: var(--ts-on-danger);
    cursor: pointer;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), filter .4s var(--ease);
}

.am-common input.am-cta-cancel:hover {
    filter: brightness(1.08);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
}

.am-common input.am-cta-cancel:active {
    transform: translateY(0) scale(.985);
}

.am-common .cancel-subscription-buttons .am-popup-close {
    align-self: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ts-ink-3);
    text-decoration: none;
}

.am-common .cancel-subscription-buttons .am-popup-close:hover {
    color: var(--ts-ink);
}

/* --------------------------------------------------------------------------
   12. Colour accents
   The six hues rotate per section / per row so a page reads as a palette
   rather than one teal on grey. Rotation uses :nth-of-type, never :nth-child,
   because the markup interleaves <br> and <h2> between the real items.
   -------------------------------------------------------------------------- */
::selection {
    background: color-mix(in srgb, var(--c-teal) 26%, transparent);
    color: var(--ts-ink);
}

/* --- spectrum rule under the page title --- */
.am-common .am-body-content-top:has(h1) {
    position: relative;
    border-bottom: none;
}

.am-common .am-body-content-top:has(h1):after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background-image: var(--c-spectrum);
    opacity: .55;
}

.am-common .am-body-content-top:has(.am-account-toolbar):after {
    display: none;
}

/* --- auth card picks up a two-hue wash in its outer lip --- */
.am-common .am-auth-form {
    background-image: linear-gradient(148deg, var(--c-teal-soft), transparent 46%, var(--c-indigo-soft));
}

/* --- primary calls to action run a teal-to-sky gradient --- */
.am-common .am-auth-form input[type=submit],
.am-common .am-form:not(.am-auth-form) input[type=submit] {
    background-image: var(--ts-icon-cta), var(--c-cta);
    background-repeat: no-repeat, no-repeat;
    background-position: right 7px center, 0 0;
    background-size: 40px 40px, 100% 100%;
}

.am-common .am-auth-form input[type=submit]:hover,
.am-common .am-form:not(.am-auth-form) input[type=submit]:hover {
    filter: brightness(1.07) saturate(1.08);
}

/* --- signup: hue per product card, prices in amber --- */
.am-common .am-signup-form [id^="row-product_id"] div.element > label {
    box-shadow: var(--sh-1), inset 3px 0 0 var(--ts-card-hue, var(--c-teal));
}

.am-common .am-signup-form [id^="row-product_id"] div.element > label:hover {
    box-shadow: var(--sh-2), inset 3px 0 0 var(--ts-card-hue, var(--c-teal));
}

.am-common .am-signup-form [id^="row-product_id"] div.element > label:has(input:checked) {
    box-shadow: inset 0 0 0 1px var(--ts-accent), inset 3px 0 0 var(--ts-card-hue, var(--c-teal));
}

.am-common .am-signup-form [id^="row-product_id"] div.element > label:nth-of-type(6n+1) { --ts-card-hue: var(--c-teal); }
.am-common .am-signup-form [id^="row-product_id"] div.element > label:nth-of-type(6n+2) { --ts-card-hue: var(--c-sky); }
.am-common .am-signup-form [id^="row-product_id"] div.element > label:nth-of-type(6n+3) { --ts-card-hue: var(--c-indigo); }
.am-common .am-signup-form [id^="row-product_id"] div.element > label:nth-of-type(6n+4) { --ts-card-hue: var(--c-violet); }
.am-common .am-signup-form [id^="row-product_id"] div.element > label:nth-of-type(6n+5) { --ts-card-hue: var(--c-rose); }
.am-common .am-signup-form [id^="row-product_id"] div.element > label:nth-of-type(6n+6) { --ts-card-hue: var(--c-amber); }

.am-common .am-product-terms {
    color: var(--c-amber);
}

.am-common .am-signup-form div.element > label:has(input:checked) .am-product-terms {
    color: var(--c-amber);
}

.am-common .am-form:not(.am-auth-form) fieldset legend {
    background: var(--c-indigo-soft);
}

.am-common .am-invoice-summary .am-invoice-summary-row-total strong {
    color: var(--c-teal);
}

.am-common .am-pass-indicator-bar_bar-weak {
    background: var(--c-rose);
}

.am-common .am-pass-indicator-bar_bar-good {
    background: var(--c-amber);
}

.am-common .am-pass-indicator-bar_bar-strong {
    background: var(--c-teal);
}

/* --- dashboard: hue per section, marker + card edge share it --- */
.am-common .am-coll-content > h2 {
    position: relative;
    padding-left: 15px;
}

.am-common .am-coll-content > h2:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 17px;
    margin-top: -9px;
    border-radius: 4px;
    background: var(--ts-sec-hue, var(--c-teal));
}

.am-common .am-coll-content > .am-block {
    border-top: 2px solid var(--ts-sec-hue, var(--c-teal));
}

.am-common .am-coll-left .am-coll-content > h2:nth-of-type(6n+1),
.am-common .am-coll-left .am-coll-content > .am-block:nth-of-type(6n+1) { --ts-sec-hue: var(--c-teal); }
.am-common .am-coll-left .am-coll-content > h2:nth-of-type(6n+2),
.am-common .am-coll-left .am-coll-content > .am-block:nth-of-type(6n+2) { --ts-sec-hue: var(--c-sky); }
.am-common .am-coll-left .am-coll-content > h2:nth-of-type(6n+3),
.am-common .am-coll-left .am-coll-content > .am-block:nth-of-type(6n+3) { --ts-sec-hue: var(--c-indigo); }
.am-common .am-coll-left .am-coll-content > h2:nth-of-type(6n+4),
.am-common .am-coll-left .am-coll-content > .am-block:nth-of-type(6n+4) { --ts-sec-hue: var(--c-violet); }
.am-common .am-coll-left .am-coll-content > h2:nth-of-type(6n+5),
.am-common .am-coll-left .am-coll-content > .am-block:nth-of-type(6n+5) { --ts-sec-hue: var(--c-rose); }
.am-common .am-coll-left .am-coll-content > h2:nth-of-type(6n+6),
.am-common .am-coll-left .am-coll-content > .am-block:nth-of-type(6n+6) { --ts-sec-hue: var(--c-amber); }

/* offset the sidebar so its first section does not repeat the main column's */
.am-common .am-coll-right .am-coll-content > h2:nth-of-type(3n+1),
.am-common .am-coll-right .am-coll-content > .am-block:nth-of-type(3n+1) { --ts-sec-hue: var(--c-violet); }
.am-common .am-coll-right .am-coll-content > h2:nth-of-type(3n+2),
.am-common .am-coll-right .am-coll-content > .am-block:nth-of-type(3n+2) { --ts-sec-hue: var(--c-amber); }
.am-common .am-coll-right .am-coll-content > h2:nth-of-type(3n+3),
.am-common .am-coll-right .am-coll-content > .am-block:nth-of-type(3n+3) { --ts-sec-hue: var(--c-sky); }

/* --- dashboard: hue per download row --- */
.am-common .am-list-resources > li:nth-of-type(6n+1) { --ts-tile-ink: var(--c-teal);   --ts-tile-soft: var(--c-teal-soft); }
.am-common .am-list-resources > li:nth-of-type(6n+2) { --ts-tile-ink: var(--c-sky);    --ts-tile-soft: var(--c-sky-soft); }
.am-common .am-list-resources > li:nth-of-type(6n+3) { --ts-tile-ink: var(--c-indigo); --ts-tile-soft: var(--c-indigo-soft); }
.am-common .am-list-resources > li:nth-of-type(6n+4) { --ts-tile-ink: var(--c-violet); --ts-tile-soft: var(--c-violet-soft); }
.am-common .am-list-resources > li:nth-of-type(6n+5) { --ts-tile-ink: var(--c-rose);   --ts-tile-soft: var(--c-rose-soft); }
.am-common .am-list-resources > li:nth-of-type(6n+6) { --ts-tile-ink: var(--c-amber);  --ts-tile-soft: var(--c-amber-soft); }

.am-common .am-list-resources > li > a:hover {
    color: var(--ts-tile-ink, var(--c-teal));
}

/* --- navigation: a hue per item on hover, brand teal for the current page --- */
.am-common ul.am-tabs > li:nth-of-type(6n+1) { --ts-tab-hue: var(--c-teal); }
.am-common ul.am-tabs > li:nth-of-type(6n+2) { --ts-tab-hue: var(--c-sky); }
.am-common ul.am-tabs > li:nth-of-type(6n+3) { --ts-tab-hue: var(--c-indigo); }
.am-common ul.am-tabs > li:nth-of-type(6n+4) { --ts-tab-hue: var(--c-violet); }
.am-common ul.am-tabs > li:nth-of-type(6n+5) { --ts-tab-hue: var(--c-rose); }
.am-common ul.am-tabs > li:nth-of-type(6n+6) { --ts-tab-hue: var(--c-amber); }

.am-common ul.am-tabs > li:not(.active) > a:hover {
    color: var(--ts-tab-hue, var(--ts-ink));
}

.am-common ul.am-tabs > li:not(.active) > a:hover:after {
    background: var(--ts-tab-hue, var(--ts-line-strong));
}

.am-common ul.am-tabs-narrow > li:nth-of-type(6n+1) { --ts-tab-hue: var(--c-teal); }
.am-common ul.am-tabs-narrow > li:nth-of-type(6n+2) { --ts-tab-hue: var(--c-sky); }
.am-common ul.am-tabs-narrow > li:nth-of-type(6n+3) { --ts-tab-hue: var(--c-indigo); }
.am-common ul.am-tabs-narrow > li:nth-of-type(6n+4) { --ts-tab-hue: var(--c-violet); }
.am-common ul.am-tabs-narrow > li:nth-of-type(6n+5) { --ts-tab-hue: var(--c-rose); }
.am-common ul.am-tabs-narrow > li:nth-of-type(6n+6) { --ts-tab-hue: var(--c-amber); }

.am-common ul.am-tabs-narrow > li:not(.active) > a:hover {
    color: var(--ts-tab-hue, var(--ts-ink));
}

/* --- notices carry their own hue --- */
.am-common .am-info {
    background: var(--c-sky-soft);
    border-color: color-mix(in srgb, var(--c-sky) 32%, transparent);
}

.am-common .am-notice {
    background: var(--c-amber-soft);
    border-color: color-mix(in srgb, var(--c-amber) 32%, transparent);
    color: var(--c-amber);
}

.am-common .am-info a {
    color: var(--c-sky);
}

.am-common mark {
    background: var(--c-amber-soft);
    color: var(--c-amber);
}

.am-common .am-flash-content-message {
    border-left: 3px solid var(--c-sky);
}

.am-common .am-flash-content-error {
    border-left: 3px solid var(--c-rose);
}

/* --------------------------------------------------------------------------
   13. Entry motion  (transform + opacity only, reduced-motion gated)
   -------------------------------------------------------------------------- */
@keyframes ts-rise {
    from { opacity: 0; transform: translate3d(0, 16px, 0); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
    .am-header .am-header-content {
        animation: ts-rise .7s var(--ease-out) both;
    }

    .am-common .am-body-content-top {
        animation: ts-rise .7s var(--ease-out) .06s both;
    }

    .am-common .am-body-content-content {
        animation: ts-rise .7s var(--ease-out) .12s both;
    }

    /* replays when the login / lost-password cards are toggled */
    .am-common .am-auth-form {
        animation: ts-rise .65s var(--ease-out) .16s both;
    }
}

/* --------------------------------------------------------------------------
   14. Narrow viewports
   -------------------------------------------------------------------------- */
@media all and (max-width: 1000px) {
    .am-common .am-layout-two-coll {
        grid-template-columns: minmax(0, 1fr) 300px !important;
        gap: 0 26px;
    }
}

@media all and (max-width: 880px) {
    .am-common .am-layout-two-coll {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0;
    }

    /* stacked columns: the right column needs its heading rhythm back */
    .am-common .am-layout-two-coll .am-coll-right .am-coll-content > h2:first-child {
        margin-top: 30px;
    }
}

/* the tab bar carries too many items for a tablet - swap to the panel nav */
@media all and (max-width: 860px) {
    .am-common .am-tabs-wrapper {
        display: none;
    }

    .am-common .am-tabs-narrow-wrapper {
        display: block;
    }

    .am-common .am-tabs-narrow-dashboard,
    .am-common .am-tabs-narrow-switch {
        display: block;
    }

    .am-common .am-account-toolbar {
        margin-bottom: 14px;
    }

    .am-common .am-account-toolbar.am-account-toolbar-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 40;
        margin: 0;
        box-shadow: var(--sh-2);
    }

    .am-common .am-account-toolbar.am-account-toolbar-fixed .am-account-toolbar-items {
        padding: 10px 18px;
        border-bottom: 1px solid var(--ts-line);
        background: color-mix(in srgb, var(--ts-surface) 84%, transparent);
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
    }

    .am-common .am-account-toolbar.am-account-toolbar-fixed .am-tabs-narrow-wrapper {
        padding: 0 18px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .am-common .am-account-toolbar.am-account-toolbar-fixed .am-account-toolbar-items {
        background: var(--ts-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .am-common .am-tabs-narrow-wrapper.am-tabs-narrow-wrapper-open {
        animation: none;
    }
}

@media all and (max-width: 620px) {
    .am-main {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .am-header .am-header-content {
        padding: 22px 0 20px;
    }

    .am-header .am-header-content .am-header-content-logo {
        max-height: 38px !important;
        max-width: 190px !important;
    }

    .am-body {
        padding: 28px 0 44px;
    }

    .am-body .am-body-content-wrapper {
        padding: 24px 20px 28px !important;
        border-radius: 22px;
    }

    .am-page-login .am-body .am-body-content-wrapper {
        padding: 0 18px !important;
    }

    .am-common h1 {
        font-size: 27px;
    }

    .am-common .am-body-content-top {
        gap: 12px;
        margin-bottom: 20px;
    }

    .am-common .am-body-content-content {
        font-size: 15px;
    }

    .am-common .am-auth-form {
        max-width: none !important;
        border-radius: 22px;
        padding: 5px;
    }

    .am-common .am-auth-form fieldset {
        padding: 24px 20px 26px !important;
        border-radius: 17px;
    }

    .am-common .am-auth-form form legend {
        font-size: 19px;
        margin-bottom: 20px;
    }

    .am-common .am-signup-link {
        max-width: none;
    }

    .am-common .am-signup-form div.row {
        margin-bottom: 18px;
    }

    .am-common .am-signup-form [id^="row-product_id"] div.element > label,
    .am-common .am-signup-form [id^="row-paysys_id"] div.element > label {
        padding: 14px 15px;
    }

    .am-common .am-product-terms {
        order: 3;
        flex: 0 0 100%;
        margin-left: 0;
        padding-left: 34px;
    }

    .am-common .am-product-desc,
    .am-common .am-paysystem-desc {
        order: 4;
    }

    .am-common .am-form:not(.am-auth-form) fieldset > .fieldset {
        padding: 18px 15px;
    }

    .am-common .am-form:not(.am-auth-form) fieldset legend {
        padding: 13px 15px;
    }

    .am-common .agreement {
        padding: 15px 16px;
        max-height: 240px !important;
    }

    .am-common .am-invoice-summary {
        padding: 15px 16px;
    }

    .am-common .am-form:not(.am-auth-form) input[type=submit] {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 52px !important;
    }

    .am-common .am-body-content-top:has(.am-account-toolbar) h1 {
        margin-bottom: 18px;
    }

    .am-common .am-user-identity-block {
        gap: 10px;
        padding-left: 0;
        background-image: none;
    }

    .am-common .am-user-identity-block .am-user-identity-block_login {
        max-width: 120px !important;
    }

    .am-common .am-coll-content > h2 {
        font-size: 16px;
        margin: 26px 0 10px;
    }

    .am-common .am-list-resources > li {
        grid-template-columns: 32px minmax(0, 1fr) !important;
        column-gap: 11px;
        padding: 10px;
        margin: 0 -10px;
    }

    .am-common .am-list-resources > li:before {
        width: 32px !important;
        height: 32px !important;
    }

    .am-common .am-list-resources > li:after {
        width: 32px !important;
        height: 32px !important;
        -webkit-mask-size: 16px 16px;
        mask-size: 16px 16px;
    }
}

@media all and (max-width: 400px) {
    .am-common .am-lang-title {
        display: none;
    }

    .am-common .am-auth-form input[type=submit] {
        padding: 0 48px !important;
        background-size: 36px 36px, 100% 100%;
        background-position: right 8px center, 0 0;
    }
}

.am-form form {
    border: none;
}

#row-buttons .element.group {
    text-align: center;
}