/*
 * HashMicro's stage: the awards on the left, where the eye lands first, and on
 * the right nothing but what the visitor came to do.
 *
 * Shared by the doors into HashMeet -- the sign-in page and the password page
 * of a shared recording or snippet -- so they are one design rather than two
 * that drift apart. Everything is scoped under .hm-stage, which keeps it clear
 * of Tabler on pages that load both.
 */
.hm-stage {
    --red: #bf2130;
    --red-hover: #a51b29;
    --red-deep: #7d1019;
    --gold: #d8b062;
    --gold-soft: #f3d993;

    --page: #f5f6fa;
    --surface: #ffffff;
    --ink: #12131a;
    --ink-soft: #3b3f50;
    --muted: #6c7185;
    --line: #e5e7ef;
    --field: #f7f8fb;
    --field-line: #dfe2eb;
    --ring: rgba(191, 33, 48, .16);
}

[data-theme="dark"] .hm-stage, [data-bs-theme="dark"] .hm-stage {
    --page: #0b0c11;
    --surface: #11131a;
    --ink: #f1f2f7;
    --ink-soft: #c9ccd8;
    --muted: #969bb0;
    --line: #23262f;
    --field: #171a22;
    --field-line: #2a2e38;
    --ring: rgba(229, 72, 86, .24);
}

.hm-stage, .hm-stage *, .hm-stage *::before, .hm-stage *::after { box-sizing: border-box; }

.hm-stage { min-height: 100%; }

.hm-stage {
    margin: 0;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--page);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.hm-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr);
    min-height: 100vh;
    min-height: 100dvh;
}

/* ---- The awards ------------------------------------------------------ */
.hm-stage .hero {
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 48px;
    background:
        radial-gradient(60% 55% at 50% 42%, rgba(216, 176, 98, .20), transparent 70%),
        radial-gradient(55% 60% at 0% 100%, rgba(191, 33, 48, .30), transparent 70%),
        radial-gradient(40% 45% at 100% 0%, rgba(125, 16, 25, .22), transparent 70%),
        #050507;
    isolation: isolate;
}

/* A slow halo behind the trophies, breathing rather than blinking. */
.hm-stage .hero::before {
    content: "";
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    translate: -50% -52%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 217, 147, .20) 0%, rgba(216, 176, 98, .08) 38%, transparent 66%);
    filter: blur(8px);
    animation: hm-halo 7s ease-in-out infinite;
    z-index: -1;
}

/* A band of light that crosses the panel now and then. */
.hm-stage .hero::after {
    content: "";
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(105deg, transparent 44%, rgba(255, 236, 190, .07) 50%, transparent 56%);
    animation: hm-sheen 9s ease-in-out infinite;
    pointer-events: none;
}

.hm-stage .hero__stage {
    position: relative;
    width: min(620px, 100%);
    /* The artwork is drawn on black. Lighten lets that black give way to
       the scene behind it, so the trophies stand in the glow instead of in
       a square. It has to sit here, on the stage: on the image itself it
       only blends inside the group its own animation creates, and the
       square stays. */
    mix-blend-mode: lighten;
    animation: hm-rise .9s cubic-bezier(.2, .8, .2, 1) both;
}

.hm-stage .award {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: radial-gradient(72% 72% at 50% 48%, #000 52%, transparent 90%);
            mask-image: radial-gradient(72% 72% at 50% 48%, #000 52%, transparent 90%);
    animation: hm-float 8s ease-in-out infinite;
}

/* ---- The door -------------------------------------------------------- */
.hm-stage .panel {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    padding: 40px 56px 28px;
}

.hm-stage .panel__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.hm-stage .reveal { animation: hm-up .6s cubic-bezier(.2, .8, .2, 1) both; }
.hm-stage .reveal:nth-child(1) { animation-delay: .05s; }
.hm-stage .reveal:nth-child(2) { animation-delay: .12s; }
.hm-stage .reveal:nth-child(3) { animation-delay: .18s; }
.hm-stage .reveal:nth-child(4) { animation-delay: .24s; }
.hm-stage .reveal:nth-child(5) { animation-delay: .30s; }
.hm-stage .reveal:nth-child(6) { animation-delay: .36s; }

.hm-stage .logo {
    display: block;
    width: 239px;
    height: auto;
    /* The image carries its own transparent margin: 7% of its width on
       the left and about 4% of its width below the wordmark. The shift
       lines the cloud up with the text beneath it, and because translate
       is measured against the image itself it stays right at any size.
       The bottom margin is small for the same reason: the image already
       brings some space of its own. */
    translate: -7% 0;
    margin-bottom: 14px;
}

.hm-stage .eyebrow {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red);
}

[data-theme="dark"] .hm-stage .eyebrow, [data-bs-theme="dark"] .hm-stage .eyebrow { color: #ff6b78; }

.hm-stage h1 {
    margin: 0 0 12px;
    font-size: clamp(26px, 2.3vw, 32px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: balance;
}

.hm-stage .lead {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    text-wrap: pretty;
}

.hm-stage .lead strong { color: var(--ink-soft); font-weight: 600; }

.hm-stage label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}

.hm-stage .field {
    position: relative;
    display: flex;
    align-items: center;
}

.hm-stage .field__icon {
    position: absolute;
    z-index: 2;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--muted);
    pointer-events: none;
    transition: color .2s ease;
}

.hm-stage .field input {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 56px;
    padding: 0 54px 0 46px;
    border: 1.5px solid var(--field-line);
    border-radius: 14px;
    background: var(--field);
    color: var(--ink);
    font: 600 17px/1 'Manrope', sans-serif;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.hm-stage .field input::placeholder {
    color: var(--muted);
    opacity: .55;
}

/* A generated code (the share password): spaced out and upper case. */
.hm-stage .field--code input,
.hm-stage .field--code input::placeholder {
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hm-stage .field input:focus {
    border-color: var(--red);
    background: var(--surface);
    box-shadow: 0 0 0 5px var(--ring);
}

.hm-stage .field:focus-within .field__icon { color: var(--red); }

.hm-stage .field.is-invalid input {
    border-color: var(--red);
    box-shadow: 0 0 0 5px var(--ring);
    animation: hm-shake .42s cubic-bezier(.36, .07, .19, .97) both;
}

.hm-stage .reveal-btn {
    position: absolute;
    z-index: 2;
    right: 8px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.hm-stage .reveal-btn:hover { background: rgba(127, 131, 150, .12); color: var(--ink); }
.hm-stage .reveal-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hm-stage .reveal-btn svg { width: 19px; height: 19px; }
.hm-stage .reveal-btn .when-shown { display: none; }
.hm-stage .reveal-btn[aria-pressed="true"] .when-shown { display: block; }
.hm-stage .reveal-btn[aria-pressed="true"] .when-hidden { display: none; }

.hm-stage .message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 22px;
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--red);
    text-wrap: pretty;
}

[data-theme="dark"] .hm-stage .message, [data-bs-theme="dark"] .hm-stage .message { color: #ff7883; }

.hm-stage .message:empty { visibility: hidden; }
.hm-stage .message svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }

.hm-stage .submit {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 56px;
    margin-top: 18px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font: 700 15.5px/1 'Manrope', sans-serif;
    letter-spacing: .01em;
    cursor: pointer;
    overflow: hidden;
    background: linear-gradient(180deg, #d02838 0%, var(--red) 55%, #ad1c2a 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 1px 2px rgba(125, 16, 25, .35),
        0 12px 28px -12px rgba(191, 33, 48, .75);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.hm-stage .submit::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
    translate: -120% 0;
    transition: translate .7s ease;
}

.hm-stage .submit:hover { filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(125,16,25,.35), 0 16px 32px -12px rgba(191,33,48,.85); }
.hm-stage .submit:hover::after { translate: 120% 0; }
.hm-stage .submit:active { transform: translateY(1px) scale(.995); }
.hm-stage .submit:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

.hm-stage .submit svg { width: 18px; height: 18px; transition: translate .2s ease; }
.hm-stage .submit:hover svg { translate: 3px 0; }

.hm-stage .submit[disabled] {
    cursor: not-allowed;
    filter: grayscale(.35) brightness(.95);
    box-shadow: none;
}

.hm-stage .submit[disabled]::after { display: none; }

.hm-stage .spinner {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: hm-spin .7s linear infinite;
}

.hm-stage .submit.is-busy .spinner { display: block; }
.hm-stage .submit.is-busy .arrow { display: none; }

.hm-stage .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.hm-stage .meta span { display: inline-flex; align-items: center; gap: 7px; }
.hm-stage .meta svg { width: 15px; height: 15px; }

.hm-stage .foot {
    max-width: 400px;
    width: 100%;
    margin: 32px auto 0;
    font-size: 12px;
    color: var(--muted);
    opacity: .8;
}

/* ---- Motion ---------------------------------------------------------- */
@keyframes hm-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hm-rise { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes hm-halo { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes hm-sheen { 0%, 55% { translate: -45% 0; } 100% { translate: 45% 0; } }
@keyframes hm-spin { to { rotate: 360deg; } }
@keyframes hm-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

@media (prefers-reduced-motion: reduce) {
    .hm-stage, .hm-stage *, .hm-stage *::before, .hm-stage *::after { animation: none !important; transition: none !important; }
}

/* ---- Smaller screens: the awards become a banner above the form ------ */
@media (max-width: 991px) {
    .hm-stage { grid-template-columns: 1fr; }

    .hm-stage .hero {
        min-height: 30vh;
        padding: 18px 20px 46px;
    }

    .hm-stage .hero__stage { width: min(340px, 78%); }

    .hm-stage .panel {
        margin-top: -28px;
        padding: 26px 22px 18px;
        border-radius: 26px 26px 0 0;
        box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .45);
    }

    .hm-stage .logo { width: 183px; margin-bottom: 10px; }


    .hm-stage .lead { margin-bottom: 22px; }
    .hm-stage .message { margin-top: 10px; }
    .hm-stage .submit { margin-top: 12px; }
    .hm-stage .meta { margin-top: 22px; padding-top: 16px; }
    .hm-stage .foot { margin-top: 18px; }
}

@media (max-width: 420px) {
    .hm-stage .hero { min-height: 27vh; }
    .hm-stage h1 { font-size: 24px; }
    .hm-stage .lead { font-size: 14.5px; }
}


/* ---- Sign-in ------------------------------------------------------------ */
.hm-stage a.submit,
.hm-stage a.submit:hover,
.hm-stage a.submit:focus {
    color: #fff;
    text-decoration: none;
}

.hm-stage .submit .brand {
    display: block;
    width: auto;
    height: 19px;
    transition: opacity .2s ease;
}

.hm-stage .submit.is-busy .brand { display: none; }

.hm-stage .submit.is-disabled {
    pointer-events: none;
    opacity: .7;
    filter: grayscale(.35);
    box-shadow: none;
}

.hm-stage .hint {
    margin: 14px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.hm-stage .notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--field);
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.5;
}

.hm-stage .notice svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }

.hm-stage .notice--error {
    border-color: rgba(191, 33, 48, .25);
    background: rgba(191, 33, 48, .06);
    color: var(--red);
}

[data-theme="dark"] .hm-stage .notice--error,
[data-bs-theme="dark"] .hm-stage .notice--error {
    border-color: rgba(229, 72, 86, .32);
    background: rgba(229, 72, 86, .08);
    color: #ff7883;
}

.hm-stage .divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 22px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.hm-stage .divider::before,
.hm-stage .divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.hm-stage .stack > * + * { margin-top: 16px; }

.hm-stage .row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-size: 13.5px;
}

.hm-stage .link {
    color: var(--red);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}

.hm-stage .link:hover { color: var(--red-hover); text-decoration: underline; }

[data-theme="dark"] .hm-stage .link,
[data-bs-theme="dark"] .hm-stage .link { color: #ff7883; }

.hm-stage label.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
}

.hm-stage .check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--red);
}

.hm-stage .field select {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1.5px solid var(--field-line);
    border-radius: 12px;
    background: var(--field);
    color: var(--ink);
    font: 500 14px/1 'Manrope', sans-serif;
}

.hm-stage .register {
    margin: 24px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

/* Social sign-in keeps Tabler's markup; this only fits it to the stage. */
.hm-stage .social .card-body { padding: 0; }
.hm-stage .social .hr-text { display: none; }
.hm-stage .social .btn { height: 44px; border-radius: 12px; }


/* The small round controls in the header (theme, and the guest's Sign in). */
.hm-stage .icon-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
}

.hm-stage .icon-btn:hover { color: var(--ink); border-color: var(--field-line); background: var(--field); }
.hm-stage .icon-btn:active { transform: scale(.96); }
.hm-stage .icon-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.hm-stage .icon-btn svg { width: 17px; height: 17px; }

.hm-stage .chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-soft);
    font: 600 12.5px/1 'Manrope', sans-serif;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.hm-stage .chip:hover { color: var(--red); border-color: rgba(191, 33, 48, .35); background: rgba(191, 33, 48, .04); text-decoration: none; }

/* ---- Home: one header row ------------------------------------------------
   Where you can go on the left, who you are on the right, on the same line and
   on the same baseline. The nav takes the space that is left and scrolls
   sideways on a narrow panel rather than wrapping under the account button. */
.hm-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 0 0 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
}

.hm-bar__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
}

.hm-bar__nav::-webkit-scrollbar { display: none; }

.hm-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--muted);
    font: 600 12.5px/1 'Manrope', sans-serif;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: color .18s ease, background .18s ease;
}

.hm-bar__link::-webkit-details-marker { display: none; }
.hm-bar__link:hover { color: var(--ink); background: var(--field); text-decoration: none; }
.hm-bar__link:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.hm-bar__chev { width: 12px; height: 12px; opacity: .65; transition: rotate .2s ease; }
.hm-bar__menu { position: relative; flex: none; }
.hm-bar__menu[open] > .hm-bar__link { color: var(--ink); background: var(--field); }
.hm-bar__menu[open] .hm-bar__chev { rotate: 180deg; }

.hm-menu--nav { top: calc(100% + 8px); right: auto; left: 0; min-width: 180px; }

.hm-bar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

/* The account control carries a name, so it reads as a person rather than a
   coloured circle; the circle alone is left for narrow panels. */
.hm-account__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 9px 0 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-soft);
    cursor: pointer;
    list-style: none;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.hm-account__btn::-webkit-details-marker { display: none; }
.hm-account__btn:hover { border-color: var(--field-line); background: var(--field); color: var(--ink); }
.hm-account__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.hm-account__name {
    font: 600 12.5px/1 'Manrope', sans-serif;
    max-width: 96px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-home .field input {
    padding-right: 16px;
    font-size: 16px;
    letter-spacing: .01em;
    caret-color: var(--red);
}

.hm-home .field input::placeholder { font-weight: 500; letter-spacing: .04em; opacity: .8; }
.hm-home .field:has(.field__paste:not([hidden])) input { padding-right: 96px; }
.hm-home .field.has-value input { padding-right: 52px; }

.hm-home .field input:hover:not(:focus) { border-color: color-mix(in srgb, var(--field-line) 60%, var(--muted)); }
.hm-home .field.has-value .field__icon { color: var(--ink-soft); }
.hm-home .field:focus-within .field__icon { color: var(--red); }
[data-bs-theme="dark"] .hm-home .field:focus-within .field__icon { color: #ff6b78; }
[data-bs-theme="dark"] .hm-home .field input { caret-color: #ff6b78; }

.hm-home .field__action {
    position: absolute;
    z-index: 2;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font: 600 13px/1 'Manrope', sans-serif;
    cursor: pointer;
    animation: hm-pop .25s cubic-bezier(.2, .8, .2, 1) both;
    transition: background .2s ease, color .2s ease, transform .15s ease;
}

.hm-home .field__action[hidden] { display: none; }
.hm-home .field__clear { padding: 0; }
.hm-home .field__action svg { width: 16px; height: 16px; }
.hm-home .field__action:hover { background: rgba(127, 131, 150, .12); color: var(--ink); }
.hm-home .field__action:active { transform: scale(.94); }
.hm-home .field__action:focus-visible { outline: 2px solid var(--red); outline-offset: 0; }

/* -- One line under the field: what a pasted link opens, or what is missing.
      It slides open rather than jumping, and takes no room while empty. */
.hm-home .field-note {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .28s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

.hm-home .field-note.is-shown { grid-template-rows: 1fr; opacity: 1; }

.hm-home .field-note p {
    overflow: hidden;
    min-height: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.hm-home .field-note p::before {
    content: "";
    display: block;
    height: 10px;
}

.hm-home .field-note p.is-ok strong {
    padding: 1px 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--field);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .02em;
}

.hm-home .field-note p.is-error { color: var(--red); font-weight: 500; }
[data-bs-theme="dark"] .hm-home .field-note p.is-error { color: #ff7883; }

/* -- Join: while main.js checks, it stays red and says what it is doing. */
.hm-home .submit { margin-top: 14px; }

.hm-home .submit .label { display: grid; }

.hm-home .submit .label > span {
    grid-area: 1 / 1;
    text-align: center;
    transition: opacity .22s ease, translate .3s cubic-bezier(.2, .8, .2, 1);
}

.hm-home .submit .label__busy { opacity: 0; translate: 0 8px; }
.hm-home .submit.is-busy .label__idle { opacity: 0; translate: 0 -8px; }
.hm-home .submit.is-busy .label__busy { opacity: 1; translate: 0 0; }

.hm-home .submit.is-busy {
    cursor: progress;
    filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(125, 16, 25, .35);
}

.hm-home .submit.is-busy::after {
    display: block;
    transition: none;
    animation: hm-sweep 1.3s ease-in-out infinite;
}

.hm-home .submit.is-busy .spinner { animation-duration: .8s; }

/* -- Host, and the footnote. */
.hm-stage .ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    height: 52px;
    border: 1.5px solid var(--field-line);
    border-radius: 14px;
    background: transparent;
    color: var(--ink);
    font: 700 15px/1 'Manrope', sans-serif;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}

.hm-stage .ghost svg { width: 18px; height: 18px; color: var(--red); transition: rotate .3s cubic-bezier(.2, .8, .2, 1); }
.hm-stage .ghost:hover { border-color: rgba(191, 33, 48, .45); background: rgba(191, 33, 48, .05); color: var(--ink); text-decoration: none; }
.hm-stage .ghost:hover svg { rotate: 90deg; }
.hm-stage .ghost:active { transform: translateY(1px); }
.hm-stage .ghost:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

[data-bs-theme="dark"] .hm-stage .ghost svg { color: #ff6b78; }

.hm-home .divider { margin: 22px 0 18px; }

.hm-home .meta {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
}

/* -- The signed-in account: avatar button and a small menu. */
.hm-home .hm-account { position: relative; }
.hm-home .hm-account > summary { list-style: none; }
.hm-home .hm-account > summary::-webkit-details-marker { display: none; }

.hm-home .hm-account__btn {
    display: inline-flex;
    gap: 4px;
    width: auto;
    padding: 0 8px 0 4px;
}

.hm-home .hm-account__btn:hover svg { rotate: none; }

.hm-home .hm-avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: linear-gradient(160deg, #d02838, var(--red-deep)) center / cover no-repeat;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.hm-home .hm-account__btn .hm-account__chev {
    width: 14px;
    height: 14px;
    transition: rotate .25s cubic-bezier(.2, .8, .2, 1);
}

.hm-home .hm-account[open] .hm-account__chev { rotate: 180deg; }

.hm-home .hm-menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 248px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(18, 19, 26, .06), 0 18px 40px -16px rgba(18, 19, 26, .28);
    transform-origin: top right;
    animation: hm-menu .18s cubic-bezier(.2, .8, .2, 1) both;
}

[data-bs-theme="dark"] .hm-home .hm-menu { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }

.hm-home .hm-menu__who {
    display: grid;
    gap: 2px;
    padding: 8px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    color: var(--muted);
}

.hm-home .hm-menu__who strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.hm-home .hm-menu__who strong,
.hm-home .hm-menu__who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hm-home .hm-menu form { margin: 0; }

.hm-home .hm-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ink-soft);
    font: 600 13.5px/1 'Manrope', sans-serif;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.hm-home .hm-menu__item svg { width: 16px; height: 16px; color: var(--muted); }
.hm-home .hm-menu__item:hover { background: var(--field); color: var(--ink); text-decoration: none; }
.hm-home .hm-menu__item:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }

@keyframes hm-menu { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hm-pop { from { opacity: 0; scale: .85; } to { opacity: 1; scale: 1; } }
@keyframes hm-sweep { from { translate: -120% 0; } to { translate: 120% 0; } }

/* On a phone the header keeps its place at the top of the panel; only the
   nav scrolls, and the account button drops to its avatar. */
@media (max-width: 991px) {
    /* minmax(0,…) so the column may be narrower than the header's natural
       width: the nav scrolls inside instead of widening the page. */
    .hm-home { grid-template-columns: minmax(0, 1fr); }
    .hm-home .panel, .hm-home .hero { min-width: 0; }
    .hm-home .hm-bar { min-width: 0; }
    .hm-home .panel { padding-top: 22px; }
    .hm-home .hm-bar { padding-bottom: 12px; gap: 10px; }
    .hm-home .hm-bar__link { height: 30px; padding: 0 8px; font-size: 12px; }
    .hm-home .hm-account__name { display: none; }
    .hm-home .hm-account__btn { padding: 0 6px 0 4px; }
    .hm-home .lead { margin-bottom: 22px; }
    .hm-home .meta { margin-top: 20px; }
}


/* ---- Home: today's meetings ---------------------------------------------
   Today's meetings: one scroller, and only this one. `overscroll-behavior`
   keeps a flick at the end of the list from turning into a page scroll. */
.hm-today {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.hm-today__head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.hm-today__head h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.hm-today__count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 7px;
    background: var(--field);
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 700;
}

.hm-today__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: min(216px, 26vh);
    margin: 0;
    padding: 0 4px 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--field-line) transparent;
}

.hm-today__list::-webkit-scrollbar { width: 6px; }
.hm-today__list::-webkit-scrollbar-thumb { background: var(--field-line); border-radius: 99px; }

.hm-today__item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 9px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color .18s ease, background .18s ease, transform .15s ease;
}

.hm-today__item:hover { border-color: var(--field-line); background: var(--field); }

.hm-today__when {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: none;
    width: 58px;
}

.hm-today__time {
    font: 700 13px/1.2 'Manrope', sans-serif;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.hm-today__live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--red);
}

.hm-today__live::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: hm-pulse 1.8s ease-in-out infinite;
}

[data-theme="dark"] .hm-today__live, [data-bs-theme="dark"] .hm-today__live { color: #ff6b78; }

.hm-today__item.is-live { border-color: rgba(191, 33, 48, .35); background: rgba(191, 33, 48, .04); }

.hm-today__title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-today__join {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    height: 30px;
    padding: 0 11px;
    border-radius: 9px;
    background: var(--field);
    color: var(--red);
    font: 700 12.5px/1 'Manrope', sans-serif;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.hm-today__join svg { width: 14px; height: 14px; transition: translate .2s ease; }
.hm-today__join:hover { background: var(--red); color: #fff; text-decoration: none; }
.hm-today__join:hover svg { translate: 2px 0; }
.hm-today__join:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

[data-theme="dark"] .hm-today__join, [data-bs-theme="dark"] .hm-today__join { color: #ff7883; }

@keyframes hm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* The page itself never scrolls on desktop: today's list has its own scroll,
   and if a very long panel still overflows (a short window, many nav items),
   the panel takes that scroll so the awards stay where they are. */
@media (min-width: 992px) {
    .hm-home { height: 100vh; height: 100dvh; overflow: hidden; }
    .hm-home .panel { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
    .hm-home .hm-today__list { max-height: min(216px, 22vh); }
}

@media (max-width: 991px) {
    .hm-today { margin-top: 22px; padding-top: 16px; }
    .hm-today__list { max-height: 260px; }
}


/* ---- Signed in: the same page with a nav row and today's meetings in it.
   Tightened so everything fits a laptop window and the only thing that
   scrolls is the list itself. ------------------------------------------- */
.hm-home--signed .logo { margin-bottom: 14px; }
.hm-home--signed .hm-bar { padding-bottom: 12px; }
.hm-home--signed h1 { margin-bottom: 8px; font-size: clamp(24px, 2vw, 29px); }
.hm-home--signed .lead { margin-bottom: 20px; }
.hm-home--signed label { margin-bottom: 6px; }
.hm-home--signed .submit { margin-top: 12px; }
.hm-home--signed .divider { margin: 14px 0 12px; }
.hm-home--signed .ghost { height: 48px; }
.hm-home--signed .hm-today { margin-top: 16px; padding-top: 14px; }
.hm-home--signed .hm-today__head { margin-bottom: 9px; }
.hm-home--signed .foot { margin-top: 16px; }

@media (min-width: 992px) {
    /* A five-item header needs more width than the guest door does. */
    .hm-home--signed { grid-template-columns: minmax(0, 1fr) minmax(520px, .95fr); }
    .hm-home--signed .panel { padding: 22px 40px 20px; }
    .hm-home--signed .hm-today__list { max-height: 190px; }
}

/* Smaller laptop windows: less room, so the list shows fewer rows rather than
   pushing the rest of the panel out of view. */
@media (min-width: 992px) and (max-width: 1365px) {
    /* Narrow laptops: slimmer gutters and labels so the whole header still
       fits on one line rather than sliding under the account button. */
    .hm-home--signed .panel { padding-left: 30px; padding-right: 30px; }
    .hm-home--signed .hm-bar__link { padding: 0 6px; font-size: 11.5px; }
    .hm-home--signed .hm-bar__nav { gap: 0; }
    .hm-home--signed .hm-bar { gap: 8px; }
    .hm-home--signed .hm-today__list { max-height: 128px; }
    .hm-home--signed .lead { margin-bottom: 16px; }
    .hm-home--signed .logo { width: 210px; margin-bottom: 12px; }
    .hm-bar__link { padding: 0 8px; font-size: 12px; }
    .hm-account__name { display: none; }
}


/* The account button keeps its name where there is room for it; below that the
   avatar speaks for itself and the nav gets the width. */
@media (max-width: 1499px) {
    .hm-account__name { display: none; }
    .hm-bar__link { padding: 0 8px; font-size: 12px; }
    .hm-bar { gap: 10px; }
}


/* Signed in, the panel is a workspace rather than a doorway: its content lines
   up with the header above it instead of sitting in a narrower column. */
@media (min-width: 992px) {
    .hm-home--signed .panel__body,
    .hm-home--signed .foot { max-width: 100%; }
    .hm-home--signed .hm-today__item { padding: 10px 12px; }
}


/* A guest has no navigation, so the header keeps to the same column as the
   form beneath it rather than stretching across the panel. */
@media (min-width: 992px) {
    .hm-home:not(.hm-home--signed) .hm-bar {
        width: 100%;
        max-width: 400px;
        margin-inline: auto;
    }
}