@import url("../../elastic/styles/styles.min.css");
/* Phase 194 — the webmail every domain shares. A child of elastic: the mail
   UI stays elastic; this file draws the sign-in (templates/login.html) and
   gives the menu a mark you can see. One look for every client domain; the
   hosting company is a footnote, not the brand. Light is the base, dark is
   html.dark-mode (elastic sets it from the system or the user's choice). */

:root {
    --hp-ink: #0f172a;
    --hp-mut: #566074;
    --hp-bg: #eef2f9;
    --hp-card: rgba(255, 255, 255, .52);
    --hp-glass-light: rgba(255, 255, 255, .62);
    --hp-glass-mid: rgba(255, 255, 255, .16);
    --hp-card-edge: rgba(255, 255, 255, .72);
    --hp-card-shine: rgba(255, 255, 255, .9);
    --hp-divider: rgba(15, 23, 42, .12);
    --hp-shadow: 0 28px 70px -24px rgba(30, 41, 80, .32), 0 2px 6px rgba(30, 41, 80, .06);
    --hp-field: rgba(255, 255, 255, .66);
    --hp-field-edge: rgba(15, 23, 42, .14);
    --hp-field-hover: rgba(15, 23, 42, .24);
    --hp-accent: #3e7bfa;
    --hp-accent-2: #7b5cff;
    --hp-button-from: #3063d8;
    --hp-button-mid: #5157d9;
    --hp-button-to: #7044df;
    --hp-mark-glow: rgba(76, 110, 255, .28);
    --hp-ring: rgba(62, 123, 250, .22);
    --hp-warn: #b45309;
    --hp-chip: rgba(62, 123, 250, .10);
    --hp-chip-ink: #2f5fd0;
    --hp-err-ink: #b42318;
    --hp-err-bg: rgba(217, 45, 32, .08);
    --hp-err-edge: rgba(217, 45, 32, .22);
    --hp-card-solid: #fff;
    --hp-ok-ink: #15803d;
    --hp-ok-bg: rgba(22, 163, 74, .08);
    --hp-ok-edge: rgba(22, 163, 74, .22);
    --hp-toast: rgba(255, 255, 255, .94);
    --hp-toast-shadow: 0 18px 44px -16px rgba(30, 41, 80, .34), 0 2px 6px rgba(30, 41, 80, .08);
    --hp-info: #3e7bfa;
    --hp-good: #16a34a;
    --hp-bad: #dc2626;
    --hp-caution: #d97706;
}
html.dark-mode {
    --hp-ink: #e9ecf4;
    --hp-mut: #9aa3b6;
    --hp-bg: #070a12;
    --hp-card: rgba(19, 25, 37, .58);
    --hp-glass-light: rgba(194, 212, 240, .115);
    --hp-glass-mid: rgba(194, 212, 240, .025);
    --hp-card-edge: rgba(255, 255, 255, .10);
    --hp-card-shine: rgba(255, 255, 255, .23);
    --hp-divider: var(--hp-card-edge);
    --hp-shadow: 0 30px 80px -24px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .04) inset;
    --hp-field: rgba(255, 255, 255, .065);
    --hp-field-edge: rgba(255, 255, 255, .15);
    --hp-field-hover: rgba(255, 255, 255, .22);
    --hp-ring: rgba(96, 150, 255, .30);
    --hp-warn: #fbbf24;
    --hp-chip: rgba(96, 150, 255, .14);
    --hp-chip-ink: #a9c4ff;
    --hp-err-ink: #ff8a80;
    --hp-err-bg: rgba(255, 99, 88, .10);
    --hp-err-edge: rgba(255, 99, 88, .28);
    --hp-card-solid: #111521;
    --hp-ok-ink: #6ee7a0;
    --hp-ok-bg: rgba(52, 211, 153, .10);
    --hp-ok-edge: rgba(52, 211, 153, .26);
    --hp-toast: rgba(26, 31, 46, .94);
    --hp-toast-shadow: 0 22px 50px -18px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .05);
    --hp-info: #7aa5ff;
    --hp-good: #4ade80;
    --hp-bad: #f87171;
    --hp-caution: #fbbf24;
}

/* ---- the page ------------------------------------------------------------ */
body.task-login,
body.task-login #layout {
    background: var(--hp-bg) !important;
    color: var(--hp-ink);
}
body.task-login #layout-content.hp-login {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 16px 96px;
    background: transparent !important;
    /* 194.4: visible — the sky clips its own lights; hidden here clipped the
       card itself on a phone once a panel, a greeting or a note made it
       taller than the screen (nothing below could be reached) */
    overflow: visible;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 194.4: the sign-in scrolls when the card is taller than the screen —
   elastic pins every page to the viewport (body and #layout overflow hidden,
   #layout-content height 100%), right for the mail view, wrong for a card
   that grows. The footer then follows the card instead of sitting on it. */
body.task-login { overflow-x: hidden; overflow-y: auto !important; }
body.task-login #layout { height: auto; min-height: 100%; overflow: visible; }
body.task-login #layout-content.hp-login { height: auto; }

/* Phase205: broad neutral illumination gives the glass something to catch.
   These are static, viewport-scale gradients, never small coloured glow spots,
   texture tiles or a blurred full-screen layer. Seasonal palettes stay muted. */
.hp-sky {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background:
        linear-gradient(128deg, transparent 24%, rgba(255, 255, 255, .55) 43%, rgba(255, 255, 255, .08) 62%, transparent 78%),
        radial-gradient(ellipse 95% 90% at 50% -20%, rgba(255, 255, 255, .95), transparent 78%),
        linear-gradient(160deg, var(--hp-scene-top, #e5ebf3), var(--hp-scene-bottom, #cbd6e4));
}
html.dark-mode .hp-sky {
    background:
        linear-gradient(128deg, transparent 24%, rgba(188, 205, 230, .07) 43%, rgba(188, 205, 230, .012) 62%, transparent 78%),
        radial-gradient(ellipse 95% 90% at 50% -20%, rgba(188, 205, 230, .16), transparent 78%),
        linear-gradient(160deg, var(--hp-scene-night-top, #172131), var(--hp-scene-night-bottom, #080d16));
}
/* Keep the installed template compatible, without painting its old lights. */
.hp-glow { display: none; }

/* ---- the card ------------------------------------------------------------ */
.hp-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 420px;
    padding: 36px 34px 30px;
    border-radius: 26px;
    background: linear-gradient(135deg, var(--hp-glass-light), var(--hp-glass-mid) 38%, transparent 72%), var(--hp-card);
    border: 1px solid var(--hp-card-edge);
    box-shadow: var(--hp-shadow), inset 0 1px 0 var(--hp-card-shine);
    -webkit-backdrop-filter: blur(28px) saturate(125%);
    backdrop-filter: blur(28px) saturate(125%);
    animation: hp-rise .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes hp-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
/* 194.4: translucent only where the browser frosts it — without backdrop-filter
   the card is solid, so nothing of the sky (the snow, the leaves) crosses the form */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hp-card { background: var(--hp-card-solid); }
}
@media (prefers-reduced-motion: reduce) { .hp-card { animation: none; } }
/* An opaque material remains readable when the user requests less glass. */
@media (prefers-reduced-transparency: reduce) {
    .hp-card { background: var(--hp-card-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}


.hp-head { text-align: center; margin-bottom: 26px; }
.hp-mark {
    width: 60px; height: 60px; display: block; margin: 0 auto 18px;
    filter: drop-shadow(0 8px 18px var(--hp-mark-glow));
}
.hp-title {
    margin: 0; font-size: 30px; line-height: 1.15; font-weight: 700;
    letter-spacing: -.025em; color: var(--hp-ink);
}
.hp-lead { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--hp-mut); }
.hp-domain {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 12px 0 0; padding: 5px 13px 5px 9px; border-radius: 999px;
    background: var(--hp-chip); color: var(--hp-chip-ink);
    font-size: 14px; font-weight: 600; letter-spacing: .005em;
}
.hp-at {
    display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(135deg, var(--hp-accent), var(--hp-accent-2)); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1;
}

/* ---- the form Roundcube renders (loginform), reshaped -------------------- */
/* elastic places its form 20vh down, 320px wide and centred text — the card places it now */
body.task-login #login-form { position: static; top: auto; width: 100%; max-width: none; margin: 0; padding: 0;
    text-align: left; background: none; border: 0; box-shadow: none; }
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td { display: block; width: 100%; margin: 0; padding: 0; border: 0; }
body.task-login #login-form tr { margin: 0 0 18px; }
body.task-login #login-form tr.form-group.row { margin-left: 0; margin-right: 0; }
body.task-login #login-form td.hp-label { display: block !important; }
body.task-login #login-form td.title label {
    display: block; margin: 0 0 7px; padding: 0;
    font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--hp-mut);
}
body.task-login #login-form .input-group-prepend { display: none !important; }
/* one typeface on the card: elastic sets Roboto on controls */
body.task-login #login-form .form-control,
body.task-login #rcmloginsubmit,
body.task-login #login-form label,
.hp-card, .hp-foot { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body.task-login #login-form td.input { position: relative; display: block; }
body.task-login #login-form .form-control {
    width: 100%; height: 50px; margin: 0;
    padding: 0 16px; border-radius: 13px !important;
    font-size: 16px; /* under 16px iOS zooms the page */
    color: var(--hp-ink);
    background: var(--hp-field);
    border: 1px solid var(--hp-field-edge);
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
body.task-login #login-form .form-control:hover { border-color: var(--hp-field-hover); }
body.task-login #login-form .form-control:focus {
    outline: 0; border-color: var(--hp-accent);
    box-shadow: 0 0 0 4px var(--hp-ring);
    background: var(--hp-field);
    color: var(--hp-ink);
}
body.task-login #login-form .form-control::placeholder { color: var(--hp-mut); opacity: .55; }
body.task-login #login-form input:-webkit-autofill {
    -webkit-text-fill-color: var(--hp-ink);
    box-shadow: 0 0 0 40px var(--hp-field) inset;
    transition: background-color 9999s;
}

/* show / hide the password (hp-login.js): a small toggle in the label's row,
   clear of the field's right edge where password managers draw their icon */
body.task-login #login-form td.hp-labelrow {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    margin: 0 0 7px;
}
body.task-login #login-form td.hp-labelrow label { margin: 0; }
.hp-reveal {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px; margin: -3px -8px -3px 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--hp-mut); cursor: pointer;
    font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: color .15s ease, background-color .15s ease;
}
.hp-reveal:hover { color: var(--hp-ink); background: var(--hp-field-edge); }
.hp-reveal:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--hp-ring); color: var(--hp-ink); }
.hp-reveal svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hp-caps { margin: 8px 2px 0; font-size: 13px; font-weight: 600; color: var(--hp-warn); }
.hp-caps::before { content: "⇪ "; }

/* the button */
body.task-login #login-form p.formbuttons { margin: 26px 0 0; padding: 0; }
body.task-login #rcmloginsubmit {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
    width: 100%; height: 52px; margin: 0;
    border: 0; border-radius: 14px;
    background: linear-gradient(135deg, var(--hp-button-from) 0%, var(--hp-button-mid) 55%, var(--hp-button-to) 100%);
    color: #fff; font-size: 16px; font-weight: 650; letter-spacing: .005em;
    text-transform: none;
    box-shadow: 0 10px 22px -12px rgba(64, 78, 170, .50), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
body.task-login #rcmloginsubmit:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 13px 26px -12px rgba(64, 78, 170, .55), inset 0 1px 0 rgba(255, 255, 255, .22); }
body.task-login #rcmloginsubmit:active { transform: translateY(0) scale(.99); filter: brightness(.98); }
body.task-login #rcmloginsubmit:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--hp-ring), 0 10px 22px -12px rgba(64, 78, 170, .50); }
/* working: the button keeps its colour, its size and its place; an arc turns
   beside words that say what is happening ("Prihlasujem…", hp-login.js),
   and a soft light passes along it. The keyframes are the button's own —
   a name shared with another animation in this file is taken by whichever
   comes last (194.2's spider did exactly that: the spinner slid down out of
   the button instead of turning; skinanim194_test.go now refuses a repeat) */
/* Roundcube disables the button on submit (app.js); elastic then draws it
   at half opacity (`html.dark-mode .btn:disabled`, !important), hides its
   ::before (`#rcmloginsubmit::before`, !important) and pushes any button
   ::before .4rem off its text (`button.btn:before`, !important) — hence the
   !important here: "working" is not "unavailable", the arc is that ::before,
   and the space beside it is the button's own gap */
body.task-login #rcmloginsubmit.is-busy { pointer-events: none; cursor: progress; transform: none; filter: none; opacity: 1 !important; }
body.task-login #rcmloginsubmit.is-busy::before {
    content: ""; display: block !important; flex: none; position: static; margin: 0 !important; width: 18px; height: 18px; border-radius: 50%;
    background: conic-gradient(rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, .55) 55%, #fff);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: hp-busy-in .2s ease-out both, hp-busy-turn .8s linear infinite;
}
body.task-login #rcmloginsubmit.is-busy::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .06) 50%, transparent 75%);
    transform: translateX(-100%); animation: hp-busy-sheen 1.6s .2s cubic-bezier(.45, 0, .25, 1) infinite;
}
@keyframes hp-busy-in    { from { opacity: 0; } }
@keyframes hp-busy-turn  { to { transform: rotate(1turn); } }
@keyframes hp-busy-sheen { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    body.task-login #rcmloginsubmit.is-busy::before { animation-duration: .2s, 1.6s; }
    body.task-login #rcmloginsubmit.is-busy::after { display: none; }
}

/* elastic's own footer inside the form (product name, version) — the page has its own */
body.task-login #login-footer { display: none; }

.hp-maintenance {
    position: relative; z-index: 1; max-width: 440px;
    margin: 18px 12px 0; color: var(--hp-mut); text-align: center;
    font-size: 12.5px; line-height: 1.5;
}

/* ---- the footnote -------------------------------------------------------- */
.hp-foot {
    position: absolute; z-index: 1; left: 0; right: 0; bottom: 22px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 0 16px; font-size: 12.5px; color: var(--hp-mut); text-align: center;
}
.hp-foot a { color: var(--hp-ink); text-decoration: none; font-weight: 600; opacity: .85; }
.hp-foot a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.hp-morse { display: inline-flex; align-items: center; gap: 2px; opacity: .8; }
.hp-morse i, .hp-morse b { display: block; height: 4px; border-radius: 2px; background: var(--hp-accent); }
.hp-morse i { width: 4px; }
.hp-morse b { width: 10px; }

/* the login's messages (wrong password, signed out …): in the card, where
   hp-login.js lifts them; elastic's toast stays for a page without the script.
   !important because a message Roundcube raises from script comes with
   jQuery's .show() — an inline display:block that beat the plain rule, so
   every sign-in raised a "Loading..." toast under a button already saying
   it is working (194.5) */
body.task-login.hp-inline-notes #messagestack { display: none !important; }
.hp-note {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 0 0 18px; padding: 11px 14px; border-radius: 12px; text-align: left;
    font-size: 14px; line-height: 1.45; font-weight: 500;
    color: var(--hp-err-ink); background: var(--hp-err-bg); border: 1px solid var(--hp-err-edge);
    animation: hp-note-in .3s cubic-bezier(.2, .8, .2, 1) both;
}
.hp-note.is-ok { color: var(--hp-ok-ink); background: var(--hp-ok-bg); border-color: var(--hp-ok-edge); }
.hp-note[hidden] { display: none; }
.hp-note::before {
    content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
    border-radius: 50%; background: currentColor; font-weight: 800; font-size: 13px;
}
/* the glyph in the dot is the card's colour, over the dot's currentColor */
.hp-note::before { color: var(--hp-card-solid); background: var(--hp-err-ink); }
.hp-note.is-ok::before { content: "\2713"; background: var(--hp-ok-ink); font-size: 12px; }
@keyframes hp-note-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hp-note { animation: none; } }

/* ---- Roundcube's toasts, inside the webmail ------------------------------ */
/* elastic paints them as flat coloured slabs (a blue block for "sent"); here
   they are a card like the sign-in's, the kind said by a tinted icon dot */
#messagestack { right: 20px; bottom: 20px; width: 360px; max-width: calc(100vw - 32px); }
#messagestack > div.ui.alert,
html.dark-mode #messagestack > div.ui.alert {
    display: flex; align-items: center; gap: 12px;
    margin: 10px 0 0; padding: 12px 16px 12px 12px; min-height: 0;
    border-radius: 14px; border: 1px solid var(--hp-card-edge);
    background: var(--hp-toast); color: var(--hp-ink); opacity: 1;
    box-shadow: var(--hp-toast-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    font-size: 14px; line-height: 1.45; font-weight: 500;
    animation: hp-toast-in .32s cubic-bezier(.2, .8, .2, 1) both;
}
#messagestack > div.ui.alert > span { margin: 0; }
#messagestack > div.ui.alert > i.icon {
    --tone: var(--hp-info);
    flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: 0;
    border-radius: 50%; font-size: 15px !important; line-height: 1;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent);
}
#messagestack > div.ui.alert > i.icon::before,
html.dark-mode #messagestack > div.ui.alert > i.icon::before {
    float: none; display: block; margin: 0; width: auto; height: auto; font-size: 15px; color: var(--tone);
}
#messagestack > div.alert-success > i.icon { --tone: var(--hp-good); }
#messagestack > div.alert-warning > i.icon { --tone: var(--hp-caution); }
#messagestack > div.alert-danger > i.icon { --tone: var(--hp-bad); }
#messagestack > div.loading > i.icon { --tone: var(--hp-mut); }
#messagestack > div.ui.alert a:not(.btn) { color: var(--hp-info) !important; font-weight: 600; text-underline-offset: 2px; }
@keyframes hp-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #messagestack > div.ui.alert { animation: none; } }
@media screen and (max-width: 480px) {
    #messagestack { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; }
    #messagestack > div.ui.alert, html.dark-mode #messagestack > div.ui.alert { margin: 8px 0 0; }
}

/* ---- seasons (hp-season.js sets html[data-hp-season]) ------------------- */
/* the sky's colours and the mark's gradient follow the calendar; the form's
   own colours never do — a sign-in keeps its buttons where the eyes know them */
/* Established seasonal artwork stays; special effects leave the form clear. */
.hp-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Individual, muted palettes, including the four December occasions. */
html[data-hp-season="winter"] {
    --hp-mark-glow: rgba(96, 165, 250, .28);
    --hp-scene-top: #f1f6f8;
    --hp-scene-bottom: #dce7ed;
    --hp-scene-night-top: #131e2a;
    --hp-scene-night-bottom: #0b121d;
}
html[data-hp-season="spring"] {
    --hp-mark-glow: rgba(16, 185, 129, .26);
    --hp-scene-top: #f4f7f0;
    --hp-scene-bottom: #e1eade;
    --hp-scene-night-top: #16221d;
    --hp-scene-night-bottom: #0b1512;
}
html[data-hp-season="summer"] {
    --hp-mark-glow: rgba(245, 158, 11, .28);
    --hp-scene-top: #fbf6e9;
    --hp-scene-bottom: #e1eeec;
    --hp-scene-night-top: #20251f;
    --hp-scene-night-bottom: #0a1b20;
}
html[data-hp-season="autumn"] {
    --hp-mark-glow: rgba(234, 88, 12, .28);
    --hp-scene-top: #f8f1e7;
    --hp-scene-bottom: #e9dfce;
    --hp-scene-night-top: #241b17;
    --hp-scene-night-bottom: #13110f;
}
html[data-hp-season="christmas"] {
    --hp-mark-glow: rgba(76, 110, 255, .28);
    --hp-scene-top: #f1f5f2;
    --hp-scene-bottom: #dee9e3;
    --hp-scene-night-top: #12231f;
    --hp-scene-night-bottom: #091411;
}
html[data-hp-season="newyear"] {
    --hp-mark-glow: rgba(245, 158, 11, .28);
    --hp-scene-top: #f8f5ed;
    --hp-scene-bottom: #e9e3d5;
    --hp-scene-night-top: #191c2c;
    --hp-scene-night-bottom: #0c1020;
}
html[data-hp-season="valentine"] {
    --hp-mark-glow: rgba(244, 63, 94, .26);
    --hp-scene-top: #fbf1f1;
    --hp-scene-bottom: #f0e0e2;
    --hp-scene-night-top: #291b23;
    --hp-scene-night-bottom: #180f18;
}
html[data-hp-season="womensday"] {
    --hp-mark-glow: rgba(219, 39, 119, .26);
    --hp-scene-top: #faf3ef;
    --hp-scene-bottom: #ece2df;
    --hp-scene-night-top: #271d21;
    --hp-scene-night-bottom: #181116;
}
html[data-hp-season="mayday"] {
    --hp-mark-glow: rgba(236, 72, 153, .26);
    --hp-scene-top: #f9f3f4;
    --hp-scene-bottom: #e5ece0;
    --hp-scene-night-top: #23221c;
    --hp-scene-night-bottom: #121b15;
}
html[data-hp-season="easter"] {
    --hp-mark-glow: rgba(168, 85, 247, .26);
    --hp-scene-top: #f8f5ed;
    --hp-scene-bottom: #e9e3f0;
    --hp-scene-night-top: #262130;
    --hp-scene-night-bottom: #15131e;
}
html[data-hp-season="fasiangy"] {
    --hp-mark-glow: rgba(192, 38, 211, .26);
    --hp-scene-top: #f8f0f6;
    --hp-scene-bottom: #e9e0ef;
    --hp-scene-night-top: #291b2d;
    --hp-scene-night-bottom: #181020;
}
html[data-hp-season="childrensday"] {
    --hp-mark-glow: rgba(56, 189, 248, .28);
    --hp-scene-top: #f1f7f9;
    --hp-scene-bottom: #e5edf1;
    --hp-scene-night-top: #192633;
    --hp-scene-night-bottom: #101923;
}
html[data-hp-season="halloween"] {
    --hp-mark-glow: rgba(139, 92, 246, .28);
    --hp-scene-top: #eeeaf1;
    --hp-scene-bottom: #dcd7e3;
    --hp-scene-night-top: #1c1928;
    --hp-scene-night-bottom: #0d0d17;
}
html[data-hp-season="martin"] {
    --hp-mark-glow: rgba(125, 211, 252, .26);
    --hp-scene-top: #f3f4f3;
    --hp-scene-bottom: #dee4e7;
    --hp-scene-night-top: #1c242c;
    --hp-scene-night-bottom: #101820;
}
html[data-hp-holiday="advent"] {
    --hp-scene-top: #f7f4ec;
    --hp-scene-bottom: #e9e4d5;
    --hp-scene-night-top: #201e19;
    --hp-scene-night-bottom: #121410;
}
html[data-hp-holiday="mikulas"] {
    --hp-scene-top: #f7f1ef;
    --hp-scene-bottom: #e8e2e5;
    --hp-scene-night-top: #24191e;
    --hp-scene-night-bottom: #120e18;
}
html[data-hp-holiday="holidays"] {
    --hp-scene-top: #f4f3ef;
    --hp-scene-bottom: #e3e8e4;
    --hp-scene-night-top: #1b2422;
    --hp-scene-night-bottom: #101918;
}

html[data-hp-season="christmas"] #hp-mark-g stop:first-child { stop-color: #4c8dff; }
html[data-hp-season="christmas"] #hp-mark-g stop:last-child  { stop-color: #6d4dff; }
html[data-hp-season="newyear"]   #hp-mark-g stop:first-child { stop-color: #fbbf24; }
html[data-hp-season="newyear"]   #hp-mark-g stop:last-child  { stop-color: #ec4899; }
html[data-hp-season="winter"]    #hp-mark-g stop:first-child { stop-color: #60a5fa; }
html[data-hp-season="winter"]    #hp-mark-g stop:last-child  { stop-color: #6366f1; }
html[data-hp-season="valentine"] #hp-mark-g stop:first-child { stop-color: #fb7185; }
html[data-hp-season="valentine"] #hp-mark-g stop:last-child  { stop-color: #db2777; }
html[data-hp-season="spring"]    #hp-mark-g stop:first-child { stop-color: #34d399; }
html[data-hp-season="spring"]    #hp-mark-g stop:last-child  { stop-color: #3b82f6; }
html[data-hp-season="easter"]    #hp-mark-g stop:first-child { stop-color: #fbbf24; }
html[data-hp-season="easter"]    #hp-mark-g stop:last-child  { stop-color: #a855f7; }
html[data-hp-season="summer"]    #hp-mark-g stop:first-child { stop-color: #f59e0b; }
html[data-hp-season="summer"]    #hp-mark-g stop:last-child  { stop-color: #ec4899; }
html[data-hp-season="autumn"]    #hp-mark-g stop:first-child { stop-color: #f59e0b; }
html[data-hp-season="autumn"]    #hp-mark-g stop:last-child  { stop-color: #c2410c; }
html[data-hp-season="halloween"] #hp-mark-g stop:first-child { stop-color: #fb923c; }
html[data-hp-season="halloween"] #hp-mark-g stop:last-child  { stop-color: #7c3aed; }
html[data-hp-season="fasiangy"]  #hp-mark-g stop:first-child { stop-color: #ec4899; }
html[data-hp-season="fasiangy"]  #hp-mark-g stop:last-child  { stop-color: #7c3aed; }
html[data-hp-season="womensday"] #hp-mark-g stop:first-child { stop-color: #fb7185; }
html[data-hp-season="womensday"] #hp-mark-g stop:last-child  { stop-color: #c026d3; }
html[data-hp-season="mayday"]    #hp-mark-g stop:first-child { stop-color: #f472b6; }
html[data-hp-season="mayday"]    #hp-mark-g stop:last-child  { stop-color: #8b5cf6; }
html[data-hp-season="childrensday"] #hp-mark-g stop:first-child { stop-color: #38bdf8; }
html[data-hp-season="childrensday"] #hp-mark-g stop:last-child  { stop-color: #6366f1; }
html[data-hp-season="martin"]    #hp-mark-g stop:first-child { stop-color: #7dd3fc; }
html[data-hp-season="martin"]    #hp-mark-g stop:last-child  { stop-color: #4f46e5; }

/* a holiday says so, quietly, above the title */
.hp-greet {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 0 0 10px; padding: 4px 12px 4px 9px; border-radius: 999px;
    background: var(--hp-chip); color: var(--hp-chip-ink);
    font-size: 13px; font-weight: 600; letter-spacing: .01em;
    animation: hp-note-in .6s .25s cubic-bezier(.2, .8, .2, 1) both;
}
.hp-greet span { font-size: 14px; line-height: 1; }
html[data-hp-season="christmas"] .hp-greet { background: rgba(225, 29, 72, .09); color: #be123c; }
html[data-hp-season="newyear"]   .hp-greet { background: rgba(202, 138, 4, .11); color: #92400e; }
html[data-hp-season="valentine"] .hp-greet { background: rgba(225, 29, 72, .09); color: #be123c; }
html[data-hp-season="easter"]    .hp-greet { background: rgba(147, 51, 234, .09); color: #7e22ce; }
html[data-hp-season="halloween"] .hp-greet { background: rgba(234, 88, 12, .10); color: #c2410c; }
html[data-hp-season="fasiangy"]  .hp-greet { background: rgba(192, 38, 211, .09); color: #a21caf; }
html[data-hp-season="womensday"] .hp-greet,
html[data-hp-season="mayday"]    .hp-greet { background: rgba(219, 39, 119, .09); color: #be185d; }
html[data-hp-season="childrensday"] .hp-greet { background: rgba(2, 132, 199, .09); color: #0369a1; }
html[data-hp-season="martin"]    .hp-greet { background: rgba(71, 85, 105, .09); color: #475569; }
html.dark-mode[data-hp-season="christmas"] .hp-greet,
html.dark-mode[data-hp-season="valentine"] .hp-greet { background: rgba(251, 113, 133, .13); color: #fda4af; }
html.dark-mode[data-hp-season="newyear"]   .hp-greet { background: rgba(250, 204, 21, .12); color: #fde68a; }
html.dark-mode[data-hp-season="easter"]    .hp-greet { background: rgba(196, 181, 253, .14); color: #d8b4fe; }
html.dark-mode[data-hp-season="halloween"] .hp-greet { background: rgba(251, 146, 60, .13); color: #fdba74; }
html.dark-mode[data-hp-season="fasiangy"]  .hp-greet { background: rgba(232, 121, 249, .13); color: #f0abfc; }
html.dark-mode[data-hp-season="womensday"] .hp-greet,
html.dark-mode[data-hp-season="mayday"]    .hp-greet { background: rgba(244, 114, 182, .13); color: #f9a8d4; }
html.dark-mode[data-hp-season="childrensday"] .hp-greet { background: rgba(56, 189, 248, .13); color: #7dd3fc; }
html.dark-mode[data-hp-season="martin"]    .hp-greet { background: rgba(203, 213, 225, .10); color: #cbd5e1; }

/* what the mark wears (hp-season.js draws it into .hp-head): each sits on
   the mark's top-right corner; the ones marked "behind" tuck in under it */
.hp-head { position: relative; }
.hp-mark { position: relative; z-index: 1; }
.hp-wear {
    position: absolute; z-index: 2; height: auto; pointer-events: none; overflow: visible;
    filter: drop-shadow(0 3px 5px rgba(30, 20, 60, .24));
    animation: hp-wear-in .7s .2s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes hp-wear-in { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
.hp-wear.santa   { top: -15px; left: calc(50% + 1px);  width: 42px; rotate: 17deg; }
.hp-wear.party   { top: -31px; left: calc(50% + 9px);  width: 29px; rotate: 24deg; }
.hp-wear.witch   { top: -27px; left: calc(50% - 6px);  width: 50px; rotate: 13deg; }
/* the witch's hat is night-coloured: on the dark card a faint violet rim keeps its shape */
html.dark-mode .hp-wear.witch { filter: drop-shadow(0 0 1.2px rgba(196, 181, 253, .75)) drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
.hp-wear.boot    { top: 3px;   left: calc(50% + 19px); width: 49px; rotate: 6deg; }
.hp-wear.mask    { top: -14px; left: calc(50% + 2px);  width: 58px; rotate: -14deg; }
.hp-wear.heart   { top: -9px;  left: calc(50% + 19px); width: 25px; }
.hp-wear.blossom { top: -22px; left: calc(50% + 4px);  width: 56px; }
.hp-wear.ears    { top: -30px; left: calc(50% - 23px); width: 46px; z-index: 0; }
.hp-wear.tulip   { top: -30px; left: calc(50% + 10px); width: 30px; z-index: 0; rotate: 16deg; }
.hp-wear.snowcap { top: -7px;  left: calc(50% - 32px); width: 64px; filter: drop-shadow(0 2px 2px rgba(40, 60, 110, .25)); }
.hp-wear.balloon { top: -52px; left: calc(50% + 14px); width: 36px; z-index: 0; transform-origin: 15% 100%; }
/* small lives of their own: a heartbeat, an ear that flops, a balloon on a breeze */
.hp-wear.heart { animation: hp-wear-in .7s .2s cubic-bezier(.3, 1.5, .5, 1) both, hp-beat 3.2s 1.2s ease-in-out infinite backwards; }
@keyframes hp-beat { 0%, 30%, 100% { scale: 1; } 8% { scale: 1.16; } 16% { scale: 1; } 22% { scale: 1.1; } }
.hp-wear.ears .hp-ear-r { transform-box: fill-box; transform-origin: 50% 100%; animation: hp-flop 7s 2s ease-in-out infinite backwards; }
@keyframes hp-flop { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: 24deg; } 95% { rotate: 18deg; } }
.hp-wear.balloon { animation: hp-wear-in .7s .2s cubic-bezier(.3, 1.5, .5, 1) both, hp-bob 5s ease-in-out infinite alternate; }
@keyframes hp-bob { from { rotate: -4deg; } to { rotate: 5deg; } }

html[data-hp-season="christmas"] .hp-card::before {
    /* snow lying on the card's top edge: soft mounds above it, a few drips
       over it; the ends thin out where the corners start to round */
    content: ""; position: absolute; z-index: 2; pointer-events: none;
    top: -14px; left: 14px; right: 14px; height: 26px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.55' stop-color='%23fbfdff'/%3E%3Cstop offset='1' stop-color='%23dfe8f8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 16.5C6 14 12 10 24 9C36 8 42 5 58 4.5C74 4 82 7.5 98 7C116 6.5 124 2.5 146 2.5C166 2.5 174 6.5 192 6.5C210 6.5 220 3 240 3.5C260 4 266 7.5 284 7C300 6.5 310 4 328 4.5C346 5 356 8.5 372 9.5C386 10.5 394 14 400 16.5L400 18L360 18C356 18 354 19 353.5 22C353 25.5 348.5 25.5 348 22C347.5 19 346 18 342 18L270 18C266 18 264.5 19.5 264 24C263.5 28 258.5 28 258 24C257.5 19.5 256 18 252 18L190 18C187 18 186 19 185.8 21C185.5 23.2 182.5 23.2 182.2 21C182 19 181 18 178 18L110 18C106 18 104.5 19.5 104 23C103.5 26.5 99 26.5 98.5 23C98 19.5 96.5 18 92 18L40 18C37 18 36 19 35.8 20.8C35.5 22.8 32.5 22.8 32.2 20.8C32 19 31 18 28 18L0 18Z' fill='url(%23s)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter: drop-shadow(0 1px 1.5px rgba(60, 90, 150, .28));
}
html.dark-mode[data-hp-season="christmas"] .hp-card::before { opacity: .94; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }

/* ··· ––– ··· in lights under the snow — the company's own sign. Each bulb
   glows on its own slow breath; every ten seconds the row sends S.O.S.,
   bulb by bulb, in Morse's own rhythm (a dash holds longer than a dot) */
.hp-lights { position: absolute; z-index: 1; top: -2px; left: 16px; height: 22px; pointer-events: none; overflow: visible; }
.hp-lights .hp-wire { fill: none; stroke: #64748b; stroke-width: 1.2; }
.hp-bulb { fill: currentColor; color: #ef4444; opacity: .8; filter: drop-shadow(0 0 3px currentColor);
    animation: hp-send 10s calc(1.6s + var(--i) * .34s) ease-out infinite backwards; }
.hp-bulb.dash { animation-name: hp-send-long; }
.hp-bulb.c1 { color: #f59e0b; }
.hp-bulb.c2 { color: #22c55e; }
.hp-bulb.c3 { color: #3b82f6; }
html.dark-mode .hp-bulb { color: #f87171; }
html.dark-mode .hp-bulb.c1 { color: #fbbf24; }
html.dark-mode .hp-bulb.c2 { color: #4ade80; }
html.dark-mode .hp-bulb.c3 { color: #60a5fa; }
.hp-bulb rect:first-child { fill: #64748b; }
@keyframes hp-send      { 0%, 5%, 100% { opacity: .8; } 1% { opacity: 1; filter: drop-shadow(0 0 6px currentColor) brightness(1.25); } }
@keyframes hp-send-long { 0%, 8%, 100% { opacity: .8; } 1%, 4% { opacity: 1; filter: drop-shadow(0 0 6px currentColor) brightness(1.25); } }


/* Easter: painted eggs in a straw nest, resting on the card's top edge
   (its bottom 1px over the edge, on the straight part, clear of the corner) */
.hp-eggs { position: absolute; z-index: 2; top: -43px; right: 46px; width: 96px; height: auto; pointer-events: none;
    filter: drop-shadow(0 3px 4px rgba(60, 40, 90, .18)); animation: hp-wear-in .7s .35s cubic-bezier(.3, 1.5, .5, 1) both; }

/* Halloween: a small spider lets itself down from the card's edge on its
   thread, and climbs back. Transforms only — the thread scales, the spider
   slides with it — so nothing inside the frosted card is laid out again.
   268: its own style is the first frame (a short thread, the spider at its
   end) and the loop fills backwards, so the one-second wait before it starts
   — and a reduced-motion page, where that is the whole picture — never shows
   the full 64 px thread with the spider still at the card's edge */
.hp-spider { position: absolute; z-index: 2; top: 0; left: 44px; width: 16px; height: 64px; pointer-events: none; color: #2e1f47; }
.hp-spider i { position: absolute; left: 7.5px; top: 0; width: 1px; height: 64px; background: rgba(120, 110, 150, .6);
    transform-origin: 50% 0; transform: scaleY(.219); animation: hp-thread 9s 1s ease-in-out infinite alternate backwards; }
.hp-spider svg { position: absolute; left: 0; top: 0; display: block; width: 16px; height: auto; transform: translateY(10px); animation: hp-descend 9s 1s ease-in-out infinite alternate backwards; }
html.dark-mode .hp-spider { color: #a78bfa; }
html.dark-mode .hp-spider i { background: rgba(196, 181, 253, .45); }
/* the thread ends at the spider's head (4px into the drawing): 64px × scale = its offset + 4 */
@keyframes hp-thread { from { transform: scaleY(.219); } 60% { transform: scaleY(.813); } to { transform: scaleY(.656); } }
@keyframes hp-descend { from { transform: translateY(10px); } 60% { transform: translateY(48px); } to { transform: translateY(38px); } }

/* the footer's Morse mark on a holiday: the day's colours, and now and then
   it sends itself — the same S.O.S. the lights send at Christmas */
html[data-hp-holiday] .hp-morse { opacity: 1; }
html[data-hp-holiday] .hp-morse > * { animation: hp-send 10s calc(3s + var(--i, 0) * .3s) ease-out infinite backwards; }
.hp-morse > :nth-child(1) { --i: 0; } .hp-morse > :nth-child(2) { --i: 1; } .hp-morse > :nth-child(3) { --i: 2; }
.hp-morse > :nth-child(4) { --i: 3; } .hp-morse > :nth-child(5) { --i: 4; } .hp-morse > :nth-child(6) { --i: 5; }
.hp-morse > :nth-child(7) { --i: 6; } .hp-morse > :nth-child(8) { --i: 7; } .hp-morse > :nth-child(9) { --i: 8; }
html[data-hp-holiday] .hp-morse > b { animation-name: hp-send-long; }
html[data-hp-season="christmas"] .hp-morse > :nth-child(3n+1) { background: #ef4444; }
html[data-hp-season="christmas"] .hp-morse > :nth-child(3n+2) { background: #f59e0b; }
html[data-hp-season="christmas"] .hp-morse > :nth-child(3n)   { background: #22c55e; }
html[data-hp-season="newyear"]   .hp-morse > * { background: linear-gradient(90deg, #f59e0b, #ec4899); }
html[data-hp-season="halloween"] .hp-morse > :nth-child(odd)  { background: #f97316; }
html[data-hp-season="halloween"] .hp-morse > :nth-child(even) { background: #8b5cf6; }
html[data-hp-season="easter"]    .hp-morse > :nth-child(3n+1) { background: #f472b6; }
html[data-hp-season="easter"]    .hp-morse > :nth-child(3n+2) { background: #a78bfa; }
html[data-hp-season="easter"]    .hp-morse > :nth-child(3n)   { background: #facc15; }
html[data-hp-season="valentine"] .hp-morse > *,
html[data-hp-season="womensday"] .hp-morse > * { background: #f43f5e; }
html[data-hp-season="mayday"]    .hp-morse > * { background: #ec4899; }
html[data-hp-season="fasiangy"]  .hp-morse > :nth-child(3n+1) { background: #ec4899; }
html[data-hp-season="fasiangy"]  .hp-morse > :nth-child(3n+2) { background: #8b5cf6; }
html[data-hp-season="fasiangy"]  .hp-morse > :nth-child(3n)   { background: #facc15; }
html[data-hp-season="childrensday"] .hp-morse > :nth-child(odd)  { background: #38bdf8; }
html[data-hp-season="childrensday"] .hp-morse > :nth-child(even) { background: #f43f5e; }
html[data-hp-season="martin"]    .hp-morse > * { background: #94a3b8; }

/* Halloween: a moon behind the bats. The box is the glow (a gradient — a
   160px box-shadow blur rendered as a visible square tile on a phone); the
   disc is its ::after, a third of the box, in the middle */
.hp-moon {
    --moon: 118px;
    position: absolute; top: calc(9vh - var(--moon)); right: calc(11vw - var(--moon));
    width: calc(var(--moon) * 3); height: calc(var(--moon) * 3); border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, .30) 0, rgba(249, 115, 22, .14) 34%, rgba(249, 115, 22, 0) 70%);
}
.hp-moon::after {
    content: ""; position: absolute; inset: var(--moon); border-radius: 50%;
    background:
        radial-gradient(circle at 64% 38%, rgba(214, 160, 70, .35) 0 9%, transparent 10%),
        radial-gradient(circle at 36% 62%, rgba(214, 160, 70, .30) 0 12%, transparent 13%),
        radial-gradient(circle at 58% 72%, rgba(214, 160, 70, .22) 0 6%, transparent 7%),
        radial-gradient(circle at 38% 36%, #fffbeb, #fde68a 58%, #fbbf24);
    opacity: .92;
}
html.dark-mode .hp-moon::after { opacity: .84; }
@media (prefers-reduced-motion: reduce) {
    .hp-greet, .hp-wear, .hp-wear .hp-ear-r, .hp-eggs, .hp-spider i, .hp-spider svg, .hp-bulb, html[data-hp-holiday] .hp-morse > * { animation: none; }
}
/* resting (hp-season.js: two quiet minutes) — every loop holds where it is */
html.hp-rest .hp-glow, html.hp-rest .hp-wear, html.hp-rest .hp-wear .hp-ear-r, html.hp-rest .hp-spider i,
html.hp-rest .hp-spider svg, html.hp-rest .hp-bulb, html.hp-rest .hp-morse > * { animation-play-state: paused; }

/* 194.4: under the button — a forgotten password and a phone to set up.
   Two quiet links; each opens its panel in the card, one at a time */
.hp-help { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--hp-divider); }
.hp-help-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; }
.hp-help-links[hidden] { display: none; }
.hp-help-link {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; margin: 0; border: 0; border-radius: 8px;
    background: transparent; color: var(--hp-mut); cursor: pointer;
    font: 600 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: color .15s ease, background-color .15s ease;
}
.hp-help-link::after {
    content: ""; width: 6px; height: 6px; margin-left: 2px; border: solid currentColor; border-width: 0 1.6px 1.6px 0;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.hp-help-link[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.hp-help-link:hover, .hp-help-link[aria-expanded="true"] { color: var(--hp-ink); }
.hp-help-link:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--hp-ring); color: var(--hp-ink); }
/* and never elastic's button slab, whatever classes ui.js stamps on */
.hp-help .hp-help-link.btn, .hp-help .hp-help-link.btn:hover, .hp-help .hp-help-link.btn:focus,
.hp-help .hp-help-link.btn-secondary, .hp-help .hp-help-link.btn-secondary:hover { background: transparent; border: 0; box-shadow: none; }
/* a mouse press leaves no ring (elastic outlines every :focus); the keyboard keeps its own */
.hp-help-link:focus:not(:focus-visible), .hp-hostcopy:focus:not(:focus-visible), .hp-reveal:focus:not(:focus-visible) { outline: 0; box-shadow: none; }
.hp-panel {
    margin-top: 12px; padding: 12px 14px; border-radius: 12px; text-align: left;
    background: var(--hp-field); border: 1px solid var(--hp-field-edge);
    font-size: 13.5px; line-height: 1.5; color: var(--hp-ink);
    animation: hp-note-in .25s cubic-bezier(.2, .8, .2, 1) both;
}
.hp-panel[hidden] { display: none; }
.hp-panel p { margin: 0 0 10px; }
.hp-panel p:last-child { margin-bottom: 0; }
.hp-contact { display: flex; flex-direction: column; gap: 6px; }
.hp-contact a {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    color: var(--hp-accent); font-weight: 600; text-decoration: none;
}
.hp-contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hp-contact svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* 259.5: ONE grid for every row (the row divs are display: contents), so the
   values line up; the label wraps before a server name ever breaks */
.hp-settings { margin: 0 0 12px; display: grid; grid-template-columns: fit-content(48%) minmax(min-content, 1fr); gap: 9px 18px; align-items: baseline; }
.hp-settings > div { display: contents; }
/* the two servers stand apart from the sign-in pair above them */
.hp-settings > div:has(.hp-host) > * { margin-top: 6px; }
.hp-settings dt { margin: 0; color: var(--hp-mut); font-weight: 500; }
.hp-settings dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hp-host { font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--hp-ink); background: none; padding: 0; }
.hp-security, .hp-alternative { display: block; margin-top: 3px; }
.hp-security { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp-alternative { color: var(--hp-mut); font-size: 12px; }
/* 259.5: the server name is the copy control — name, a quiet icon, a check.
   Every property is set, because elastic's ui.js stamps "btn btn-secondary"
   on plain buttons (the grey slab .hp-help-link fights too). */
.hp-help .hp-hostcopy, .hp-help .hp-hostcopy.btn, .hp-help .hp-hostcopy.btn-secondary,
.hp-help .hp-hostcopy.btn:hover, .hp-help .hp-hostcopy.btn:focus {
    position: relative; display: inline-flex; align-items: center; gap: 7px; vertical-align: baseline;
    margin: -3px 0 -3px -7px; padding: 3px 7px; min-width: 0; min-height: 0; max-width: calc(100% + 7px);
    border: 0; border-radius: 7px; background: transparent; box-shadow: none;
    color: var(--hp-ink); cursor: pointer; text-align: left; text-transform: none; letter-spacing: 0;
    font: inherit; line-height: 1.3;
    transition: background-color .15s ease, color .15s ease;
}
.hp-help .hp-hostcopy:hover { background: var(--hp-chip); }
.hp-help .hp-hostcopy:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--hp-ring); }
/* the touch area, without a bigger box to look at */
.hp-hostcopy::before { content: ""; position: absolute; inset: -6px -4px; }
.hp-hostcopy .hp-host { white-space: nowrap; }
.hp-hostcopy svg {
    width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
    stroke-linecap: round; stroke-linejoin: round; color: var(--hp-mut); transition: color .15s ease;
}
.hp-hostcopy:hover .hp-copy-icon { color: var(--hp-accent); }
.hp-hostcopy .hp-copy-done, .hp-hostcopy.is-done .hp-copy-icon { display: none; }
.hp-hostcopy.is-done .hp-copy-done { display: block; color: var(--hp-ok-ink); stroke-width: 1.9; }
/* the check says it; the word is for screen readers, so the name never moves */
.hp-copy-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hp-help .hp-hostcopy.is-done { background: var(--hp-ok-bg); }
.hp-panel-note { color: var(--hp-mut); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) { .hp-panel { animation: none; } .hp-help-link::after { transition: none; } }

/* Keep field labels compact; help and copy controls have larger touch areas. */
@media (pointer: coarse), (max-width: 480px) {
    .hp-reveal { min-height: 24px; }
    .hp-help-link { min-height: 44px; }
    .hp-hostcopy::before { inset: -11px -6px; }
}

/* ---- phones -------------------------------------------------------------- */
@media (max-width: 480px) {
    body.task-login #layout-content.hp-login { justify-content: flex-start; padding: 56px 16px 88px; }
    .hp-card { padding: 30px 22px 24px; border-radius: 22px; }
    .hp-title { font-size: 27px; }
    .hp-settings { grid-template-columns: 1fr; row-gap: 1px; }
    .hp-settings dd { margin-bottom: 8px; }
    .hp-mark { width: 54px; height: 54px; margin-bottom: 14px; }
    .hp-moon { --moon: 72px; top: auto; bottom: calc(84px - var(--moon)); right: calc(12vw - var(--moon)); }
    /* Leave a visible stage for New Year's bursts below the form. */
    html[data-hp-season="newyear"] body.task-login #layout-content.hp-login { padding-bottom: 208px; }
}

/* ---- inside the webmail: the menu's mark (skin_logo = images/mark.svg) --- */
#layout-menu .popover-header img,
#layout-menu #logo,
#layout-menu img.logo {
    width: 44px !important; height: 44px !important; max-width: 44px !important; max-height: 44px !important;
    object-fit: contain; margin: 14px auto 10px; display: block;
    filter: drop-shadow(0 6px 14px rgba(76, 110, 255, .35));
}
/* 272: the website's own mark (hostplane_branding) — a square image, so it
   takes the sign-in card's plate rounding (17/64) at the menu's size */
#layout-menu #logo.hp-logo-site,
#layout-menu .popover-header img.hp-logo-site {
    border-radius: 12px; object-fit: cover;
    filter: drop-shadow(0 6px 14px rgba(15, 23, 42, .35));
}

/* 198: reveal the settled foreground over the already-selected seasonal sky.
   The normal card entrance starts on reveal; reduced motion stays immediate. */
html.hp-login-pending .hp-login .hp-card,
html.hp-login-pending .hp-login .hp-foot,
html.hp-login-pending .hp-login .hp-maintenance {
    visibility: hidden;
    animation: none;
}
/* ---------- 265: LIQUID GLASS — the sign-in button, the domain chip and the envelope are coated glass ----------
   The same material as the panel's sign-in (style.css "265: LIQUID GLASS",
   where the optics are written down): a clear body, the bevel's glints as
   inset shadows of ::before (Blinn-Phong on four bevel normals), the prism
   fringes, and ::after the lamp's reflection on the top curve plus the light
   coming back off the far wall, both in the coating's thin-film colour for
   the angle the light meets it. hp-login.js computes --g-* every frame for
   the button, the domain chip and the envelope (each from its own box), and gives the
   button a press that squashes and springs back. Reduced motion: nothing
   runs; the fallbacks paint glass lit from the upper left.
   The chip was the old accent (blue-violet pill, a gradient "@"); it is the
   same glass now, the "@" a small glass bead holding the coating's colours.
   Elastic hides this button's ::before and pushes any button ::before aside
   (both !important), so the bevel answers with !important on exactly those
   properties; while the button is working (.is-busy) both pseudo-elements
   are the arc and sheen as before, drawn in the ink.
   One block — deleting it (and copying styles.css over styles.min.css) is
   the whole revert. */
:root {
    --lg-body: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(246, 248, 253, .62) 50%, rgba(228, 235, 252, .78));
    --lg-edge: rgba(20, 34, 68, .13); --lg-top: #fff;
    --lg-contact: rgba(20, 34, 68, .10); --lg-drop: rgba(40, 30, 90, .24);
    --lg-density: 0; --lg-spec: .9; --lg-blend: normal; --lg-film: 1.5; --lg-depth: rgba(60, 70, 140, .18);
    --lg-bead: rgba(20, 34, 68, .05);
    --lg-room: rgba(255, 255, 255, .42); --lg-rim: .85;
}
html.dark-mode {
    --lg-body: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05) 52%, rgba(255, 255, 255, .08));
    --lg-edge: rgba(255, 255, 255, .16); --lg-top: rgba(255, 255, 255, .30);
    --lg-contact: rgba(0, 0, 0, .28); --lg-drop: rgba(0, 0, 0, .55);
    --lg-density: .07; --lg-spec: 1; --lg-blend: screen; --lg-film: 1; --lg-depth: rgba(0, 0, 0, .32);
    --lg-bead: rgba(255, 255, 255, .10);
    --lg-room: rgba(188, 205, 230, .06); --lg-rim: .7;
}
/* the body's shadow, one token for the rest and the hover alike */
:root { --lg-shadow: inset 0 1px 0 var(--lg-top), inset 0 -7px 12px -9px var(--lg-depth), 0 1px 2px var(--lg-contact), 0 12px 26px -16px var(--lg-drop); }
@media (forced-colors: none) {
    body.task-login #rcmloginsubmit {
        isolation: isolate;
        border: 1px solid var(--lg-edge);
        background: var(--lg-body);
        color: var(--hp-ink); text-shadow: none;
        box-shadow: var(--lg-shadow);
        transition: transform .15s ease;
    }
    /* the card frosted through the glass, where blur exists */
    @supports (backdrop-filter: blur(1px)) {
        body.task-login #rcmloginsubmit, .hp-domain, .hp-head .hp-mark { -webkit-backdrop-filter: blur(8px) saturate(180%); backdrop-filter: blur(8px) saturate(180%); }
    }
    /* asked for an opaque ground: the glass is the card's own field colour */
    @media (prefers-reduced-transparency: reduce) {
        body.task-login #rcmloginsubmit, .hp-domain, .hp-head .hp-mark { background: var(--hp-card-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
    }
    /* the bevel (the chip has one too) */
    body.task-login #rcmloginsubmit:not(.is-busy)::before,
    .hp-domain::before {
        content: "" !important; display: block !important; float: none !important; margin: 0 !important;
        width: auto !important; height: auto !important; /* elastic's icon rule sizes every button ::before */
        position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
        box-shadow:
            inset 0 1.5px 1px -.5px rgb(255 255 255 / calc(var(--g-t, .62) * var(--lg-spec))),
            inset 0 -1.5px 1px -.5px rgb(255 255 255 / calc(var(--g-b, .08) * var(--lg-spec))),
            inset 1.5px 0 1px -.5px rgb(255 255 255 / calc(var(--g-l, .5) * var(--lg-spec))),
            inset -1.5px 0 1px -.5px rgb(255 255 255 / calc(var(--g-r, .1) * var(--lg-spec))),
            inset calc(var(--g-dx, .55) * 4px) calc(var(--g-dy, .6) * 4px) 3px -1.5px rgb(255 92 178 / calc((.2 + var(--g-disp, .45) * .4) * var(--lg-film))),
            inset calc(var(--g-dx, .55) * -4px) calc(var(--g-dy, .6) * -4px) 3px -1.5px rgb(60 182 255 / calc((.2 + var(--g-disp, .45) * .4) * var(--lg-film))),
            inset 0 0 14px rgb(255 255 255 / var(--lg-density));
    }
    /* the surface reflections */
    body.task-login #rcmloginsubmit:not(.is-busy)::after,
    .hp-domain::after {
        content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
        background:
            radial-gradient(26% 30% at calc(var(--g-x, .36) * 100%) 0%, rgb(255 255 255 / calc(var(--g-t, .62) * .8)), var(--g-c1, rgb(253 203 129 / .34)) 42%, rgb(255 255 255 / 0) 74%),
            radial-gradient(24% 28% at calc(100% - var(--g-x, .36) * 100%) 100%, var(--g-c2, rgb(204 249 216 / .3)), rgb(255 255 255 / 0) 72%),
            linear-gradient(180deg, var(--g-c3, rgb(206 137 193 / .1)), rgb(255 255 255 / 0) 24%);
        mix-blend-mode: var(--lg-blend);
    }
    /* a chip is a third of the button's height: its reflections stay on the rim, off the letters */
    .hp-domain::after {
        background:
            radial-gradient(18% 15% at calc(var(--g-x, .36) * 100%) 0%, rgb(255 255 255 / calc(var(--g-t, .62) * .55)), var(--g-c1, rgb(253 203 129 / .34)) 45%, rgb(255 255 255 / 0) 80%),
            radial-gradient(18% 15% at calc(100% - var(--g-x, .36) * 100%) 100%, var(--g-c2, rgb(204 249 216 / .3)), rgb(255 255 255 / 0) 80%);
    }
    /* the hover is the light, not a change of shape; the press is the spring
       (hp-login.js marks the button it drives) */
    body.task-login #rcmloginsubmit:hover {
        filter: none; transform: none; background: var(--lg-body); border-color: var(--lg-edge);
        box-shadow: var(--lg-shadow);
    }
    body.task-login #rcmloginsubmit:active { transform: scale(.99); filter: none; }
    body.task-login #rcmloginsubmit[data-glass]:active { transform: none; }
    body.task-login #rcmloginsubmit:focus-visible {
        box-shadow: 0 0 0 4px var(--hp-ring), inset 0 1px 0 var(--lg-top), 0 12px 26px -16px var(--lg-drop); }
    /* working: the arc in the ink, a bright line crossing the glass */
    body.task-login #rcmloginsubmit.is-busy { background: var(--lg-body); }
    body.task-login #rcmloginsubmit.is-busy::before {
        background: conic-gradient(rgba(127, 127, 127, 0) 8%, color-mix(in srgb, var(--hp-ink) 50%, transparent) 55%, var(--hp-ink)); }
    body.task-login #rcmloginsubmit.is-busy::after {
        background: linear-gradient(100deg, transparent 34%, rgba(255, 92, 178, .18) 46%, rgba(255, 255, 255, .8) 50%, rgba(60, 182, 255, .18) 54%, transparent 66%); }
    /* the card is glass too: its edge glints where it faces the lamp, with the same
       prism, as the panel's card rim follows the pointer (hp-login.js lights it) */
    .hp-card::after {
        content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; pointer-events: none;
        box-shadow:
            inset 0 1.5px 1px -.5px rgb(255 255 255 / calc(var(--g-t, .4) * var(--lg-rim))),
            inset 0 -1.5px 1px -.5px rgb(255 255 255 / calc(var(--g-b, .04) * var(--lg-rim))),
            inset 1.5px 0 1px -.5px rgb(255 255 255 / calc(var(--g-l, .3) * var(--lg-rim))),
            inset -1.5px 0 1px -.5px rgb(255 255 255 / calc(var(--g-r, .06) * var(--lg-rim))),
            inset calc(var(--g-dx, .55) * 5px) calc(var(--g-dy, .6) * 5px) 4px -2px rgb(255 92 178 / calc((.12 + var(--g-disp, .45) * .26) * var(--lg-film))),
            inset calc(var(--g-dx, .55) * -5px) calc(var(--g-dy, .6) * -5px) 4px -2px rgb(60 182 255 / calc((.12 + var(--g-disp, .45) * .26) * var(--lg-film)));
    }
    /* the room's light: the sky's broad neutral illumination (Phase205: smooth, no
       coloured spots) now hangs where the lamp is. A viewport-sized soft pool moved
       by transform only — the sky itself never repaints. ::before, so it lies UNDER
       what hp-season.js draws into the sky (the snow, the lights, the moon) */
    .hp-sky::before {
        content: ""; position: absolute; left: 0; top: 0; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax;
        border-radius: 50%; pointer-events: none;
        background: radial-gradient(closest-side, var(--lg-room), rgba(255, 255, 255, 0));
        transform: translate3d(var(--hp-lamp-x, 50vw), var(--hp-lamp-y, -10vh), 0);
        will-change: transform;
    }
    /* the envelope (a host whose website has no icon): the tile is the same glass
       instead of the old blue-violet, the envelope drawn in the ink; an outer
       <svg> takes a background and inset shadows like any box, so the bevel,
       the reflections and the backdrop are its own (no pseudo-elements on svg).
       The season still tints the glow round it (--hp-mark-glow). */
    .hp-head svg.hp-mark, .hp-head .hp-mark.hp-mark-site {
        border-radius: 17px;
        background:
            radial-gradient(42% 26% at calc(var(--g-x, .36) * 100%) 0%, rgb(255 255 255 / calc(var(--g-t, .62) * .75)), var(--g-c1, rgb(253 203 129 / .34)) 45%, rgb(255 255 255 / 0) 78%),
            radial-gradient(38% 24% at calc(100% - var(--g-x, .36) * 100%) 100%, var(--g-c2, rgb(204 249 216 / .3)), rgb(255 255 255 / 0) 76%),
            linear-gradient(180deg, var(--g-c3, rgb(206 137 193 / .1)), rgb(255 255 255 / 0) 40%),
            var(--lg-body);
        box-shadow:
            inset 0 0 0 1px var(--lg-edge),
            inset 0 2px 1.5px -.5px rgb(255 255 255 / calc(var(--g-t, .62) * var(--lg-spec))),
            inset 0 -2px 1.5px -.5px rgb(255 255 255 / calc(var(--g-b, .08) * var(--lg-spec))),
            inset 2px 0 1.5px -.5px rgb(255 255 255 / calc(var(--g-l, .5) * var(--lg-spec))),
            inset -2px 0 1.5px -.5px rgb(255 255 255 / calc(var(--g-r, .1) * var(--lg-spec))),
            inset calc(var(--g-dx, .55) * 5px) calc(var(--g-dy, .6) * 5px) 4px -2px rgb(255 92 178 / calc((.2 + var(--g-disp, .45) * .4) * var(--lg-film))),
            inset calc(var(--g-dx, .55) * -5px) calc(var(--g-dy, .6) * -5px) 4px -2px rgb(60 182 255 / calc((.2 + var(--g-disp, .45) * .4) * var(--lg-film))),
            inset 0 -10px 16px -12px var(--lg-depth);
    }
    /* the website's own mark (branding-sync.py makes it a full square: the icon, or
       its glyph on a plate) sits in a 5px bezel of the same glass, clipped to the
       bezel's inner curve — every client's logo framed alike */
    .hp-head .hp-mark.hp-mark-site { box-sizing: border-box; padding: 5px; object-fit: cover; }
    .hp-head svg.hp-mark > rect:first-of-type { fill: transparent; }
    .hp-head svg.hp-mark > rect + rect, .hp-head svg.hp-mark > path { stroke: var(--hp-ink); }
    /* the domain chip: the same glass, the "@" a bead holding the coating's colours */
    .hp-domain {
        position: relative; isolation: isolate;
        background: var(--lg-body); color: var(--hp-ink);
        box-shadow: inset 0 0 0 1px var(--lg-edge), inset 0 1px 0 var(--lg-top), 0 8px 18px -12px var(--lg-drop);
    }
    /* the "@" is a glass bead: one pinpoint glint where the lamp is, the coating's
       colour round its rim, and the light it focuses pooling at its foot */
    .hp-at {
        color: var(--hp-ink);
        background:
            radial-gradient(circle at 33% 27%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, 0) 16%),
            radial-gradient(60% 45% at 50% 104%, var(--g-c2, rgb(204 249 216 / .5)), rgba(255, 255, 255, 0) 100%),
            radial-gradient(circle, rgba(255, 255, 255, 0) 52%, var(--g-c1, rgb(253 203 129 / .45)) 100%),
            var(--lg-bead);
        box-shadow: inset 0 0 0 1px var(--lg-edge), inset 0 -3px 4px -2px var(--lg-depth), 0 2px 4px -2px var(--lg-drop);
    }
}
/* THE SHEEN: the sky behind the card is a large pane of coated glass, and what you see
   on it is the lamp's reflection — one broad, soft light whose colour runs through the
   coating's thin-film order (pink, gold, mint, sky, lilac), faint, fading into the
   season's own sky. No shape has an edge: the colour lives in a field that slides under
   a feathered mask as the lamp moves, so the hues shift the way the button's do.
   Drawn on the template's spare .hp-glow elements (a: the reflection, b: its fainter
   echo), under what hp-season.js draws; transform only, no full-screen blur (Phase205);
   still under reduced motion (no script, no lamp), held while the page rests. */
:root {
    --sheen-a: .72; --sheen-b: .36;
    --sheen-1: #ffc8e3; --sheen-2: #ffe2b6; --sheen-3: #cdf2de; --sheen-4: #c2dfff; --sheen-5: #dccbff;
}
html.dark-mode {
    --sheen-a: .27; --sheen-b: .14;
    /* on dark glass the coating reads cool: gold would go brown, so its place is violet-blue */
    --sheen-1: #ff8cc8; --sheen-2: #8f8cff; --sheen-3: #5fd8c6; --sheen-4: #6cb4ff; --sheen-5: #b08cff;
}
/* each season's coating: the same sheen, a different film thickness — so the
   occasion's own colour leads (icy for the snow, fresh for spring, warm for autumn),
   and the full pearl stays for carnival, children's day and the plain days */
html[data-hp-season="winter"], html[data-hp-season="christmas"], html[data-hp-season="martin"] {
    --sheen-1: #d3e7ff; --sheen-2: #e3dcff; --sheen-3: #d2f2f0; --sheen-4: #c8dcff; --sheen-5: #e8f1ff; }
html[data-hp-season="newyear"] {
    --sheen-1: #ffe6c4; --sheen-2: #efdaff; --sheen-3: #d8e6ff; --sheen-4: #fff0d2; --sheen-5: #e3d6ff; }
html[data-hp-season="spring"], html[data-hp-season="easter"], html[data-hp-season="mayday"] {
    --sheen-1: #d4f4de; --sheen-2: #fff1bf; --sheen-3: #ffd8e8; --sheen-4: #d3eaff; --sheen-5: #e6f9d2; }
html[data-hp-season="summer"] {
    --sheen-1: #ffe0b4; --sheen-2: #fff0bd; --sheen-3: #c9ecff; --sheen-4: #ffd5c4; --sheen-5: #d6f4e6; }
html[data-hp-season="autumn"], html[data-hp-season="halloween"] {
    --sheen-1: #ffd6b2; --sheen-2: #ffe7bd; --sheen-3: #ecd0ff; --sheen-4: #ffcdd2; --sheen-5: #e4d9ff; }
html[data-hp-season="valentine"], html[data-hp-season="womensday"] {
    --sheen-1: #ffcade; --sheen-2: #ffdfe9; --sheen-3: #eed3ff; --sheen-4: #ffd6cc; --sheen-5: #ffe6f0; }
/* in the dark the plain coating already reads cool and rich; the snow wants ice, spring green */
html.dark-mode[data-hp-season="winter"], html.dark-mode[data-hp-season="christmas"], html.dark-mode[data-hp-season="martin"] {
    --sheen-1: #6cb4ff; --sheen-2: #8f8cff; --sheen-3: #5fd8c6; --sheen-4: #9cc8ff; --sheen-5: #a99cff; }
html.dark-mode[data-hp-season="spring"], html.dark-mode[data-hp-season="easter"], html.dark-mode[data-hp-season="mayday"] {
    --sheen-1: #5fd8a8; --sheen-2: #8fd0ff; --sheen-3: #ff8cc8; --sheen-4: #6cd6c6; --sheen-5: #b08cff; }
.hp-glow.a, .hp-glow.b {
    display: block; position: absolute; pointer-events: none; overflow: hidden;
    -webkit-mask: radial-gradient(closest-side, #000, rgba(0, 0, 0, .62) 38%, rgba(0, 0, 0, .18) 70%, transparent);
    mask: radial-gradient(closest-side, #000, rgba(0, 0, 0, .62) 38%, rgba(0, 0, 0, .18) 70%, transparent);
    will-change: transform;
}
.hp-glow.a {
    left: -38vmax; top: -52vmax; width: 150vmax; height: 104vmax; opacity: var(--sheen-a);
    transform: translate3d(calc(var(--hp-lamp-dx, 0) * 2.4vmax), calc(var(--hp-lamp-dy, 0) * 1.6vmax), 0) rotate(-24deg);
}
.hp-glow.b {
    left: 46vw; top: 52vh; width: 110vmax; height: 70vmax; opacity: var(--sheen-b);
    transform: translate3d(calc(var(--hp-lamp-dx, 0) * -1.6vmax), calc(var(--hp-lamp-dy, 0) * -1vmax), 0) rotate(-24deg);
}
/* the coating's colours, wider than the mask: the lamp slides them under it */
.hp-glow.a::before, .hp-glow.b::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 220%;
    background: linear-gradient(90deg, var(--sheen-1), var(--sheen-2) 10%, var(--sheen-3) 21%, var(--sheen-4) 32%, var(--sheen-5) 43%, var(--sheen-1) 54%, var(--sheen-2) 65%, var(--sheen-3) 76%, var(--sheen-4) 87%, var(--sheen-5));
    transform: translate3d(calc(var(--hp-lamp-dx, 0) * 9%), 0, 0);
    will-change: transform;
}
.hp-glow.b::before { transform: translate3d(calc(var(--hp-lamp-dx, 0) * -9% - 18%), 0, 0); }
@media (prefers-reduced-transparency: reduce) { .hp-glow.a, .hp-glow.b { display: none; } }
/* the website's own mark in place of the envelope (hostplane_branding): rounded
   even where forced colours turn the glass off */
.hp-mark.hp-mark-site { border-radius: 17px; object-fit: cover; }
/* 265.7: THE FIELDS ARE WELLS IN THE CARD'S GLASS. They were flat translucent
   boxes with a hairline and, on focus, the stock blue ring — the old accent the
   button and the chip had already left. Now each is a pocket sunk into the
   card, lit by the same lamp (hp-login.js paints --g-* on each well): a sunk
   wall faces the other way from a raised bevel, so the top inner wall takes
   the glint a raised slab's BOTTOM edge would (--g-b), the bottom wall --g-t,
   the left --g-r, the right --g-l; the lip nearest the lamp shades the floor
   under it (the inset shadow leans away from the lamp, --g-dx/-dy). The glyph
   sits in the well, the eye in a segment past a hairline, OUTSIDE the input
   (password managers draw their icon at the input's own right edge).
   Focus is the edge catching the light: a fine clear rim, the glint at the
   lamp's mirror point with the coating's one colour round it (266.6: it was
   the thin-film ORDER, five hues in an arc, and on a wide field that arc ran
   along the whole top edge — operator: "isnt it kinda rainbow?"), and a soft
   halo. In the dark the rim
   is the season's own coating (--sheen-*); in the light those pastels would
   vanish on white, so it is the same order deepened to 3:1 against the card.
   Forced colours: the system's Highlight outline. */
:root {
    --well-floor: linear-gradient(180deg, rgba(20, 34, 68, .055), rgba(20, 34, 68, .015) 60%, rgba(255, 255, 255, .28));
    --well-shade: rgba(20, 34, 68, .13); --well-spec: .95; --well-edge: rgba(20, 34, 68, .12); --well-edge-on: rgba(20, 34, 68, .2);
    --rim-1: #c4508c; --rim-2: #7c62d8; --rim-3: #2f86c9; --rim-4: #1f957f; --rim-5: #9a6fd0; --rim-edge: #7f88ad; --rim-glint: .55; --rim-tint: rgb(196 182 236 / .5);
    --well-halo: 0 0 0 3px rgba(110, 90, 220, .10), 0 0 18px -6px rgba(110, 90, 220, .34);
}
html.dark-mode {
    --well-floor: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .08) 55%, rgba(255, 255, 255, .045));
    --well-shade: rgba(0, 0, 0, .42); --well-spec: .55; --well-edge: rgba(255, 255, 255, .12); --well-edge-on: rgba(255, 255, 255, .2);
    --rim-1: var(--sheen-1); --rim-2: var(--sheen-2); --rim-3: var(--sheen-3); --rim-4: var(--sheen-4); --rim-5: var(--sheen-5); --rim-edge: rgba(226, 232, 255, .62); --rim-glint: .9; --rim-tint: rgb(196 186 255 / .42);
    --well-halo: 0 0 0 3px rgba(170, 185, 255, .09), 0 0 20px -4px rgba(150, 170, 255, .32);
}
body.task-login #login-form .hp-well {
    position: relative; display: flex; align-items: stretch;
    height: 50px; border-radius: 13px;
    border: 1px solid var(--well-edge);
    background: var(--well-floor);
    box-shadow:
        inset calc(var(--g-dx, .3) * 2px) calc(var(--g-dy, .8) * 2.5px) 6px var(--well-shade),
        inset 0 1.5px 1px -.5px rgb(255 255 255 / calc(var(--g-b, .05) * var(--well-spec))),
        inset 0 -1.5px 1px -.5px rgb(255 255 255 / calc(var(--g-t, .6) * var(--well-spec))),
        inset 1.5px 0 1px -.5px rgb(255 255 255 / calc(var(--g-r, .08) * var(--well-spec))),
        inset -1.5px 0 1px -.5px rgb(255 255 255 / calc(var(--g-l, .4) * var(--well-spec)));
    transition: border-color .18s ease;
}
@media (hover: hover) { body.task-login #login-form .hp-well:hover { border-color: var(--well-edge-on); } }
body.task-login #login-form .hp-well > .form-control,
body.task-login #login-form .hp-well > .form-control:hover,
body.task-login #login-form .hp-well > .form-control:focus {
    flex: 1 1 auto; min-width: 0; width: auto; height: 100%;
    padding: 0 14px 0 46px;
    border: 0; background: transparent; box-shadow: none; outline: 0;
}
/* 272: A FILLED FIELD KEEPS THE WELL. A password manager or the browser's own
   autofill marks the input :-webkit-autofill, and the UA sheet then paints a
   solid blue background with !important, which no author rule can beat.
   (operator: "dont these look ugly as fuck, the blue bg fields when filling
   it out from password managers"). The 9999 s transition above did not hold
   in the operator's screenshot (a transition needs a change to ride on). The
   old full-box inset cover was dropped in 265.7 because an opaque colour can't
   match a translucent well. The UA sheet sets background-color and -image but
   never background-clip, so clipping the background to the glyphs leaves the
   blue only under letters that -webkit-text-fill-color paints over. Nothing
   shows, and the caret stays (caret-color set explicitly, as UA colour is
   forced). :hover/:focus are listed so this outranks the well's
   `background: transparent` shorthand, which resets the clip on focus. */
body.task-login #login-form .hp-well > input:-webkit-autofill,
body.task-login #login-form .hp-well > input:-webkit-autofill:hover,
body.task-login #login-form .hp-well > input:-webkit-autofill:focus {
    box-shadow: none;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: var(--hp-ink); caret-color: var(--hp-ink);
}
.hp-fico {
    position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    color: var(--hp-mut); pointer-events: none; transition: color .18s ease;
}
.hp-fico svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hp-well:focus-within .hp-fico { color: var(--hp-ink); }
/* the eye: a square segment at the right, past an inset hairline */
body.task-login #login-form .hp-well > .hp-reveal {
    position: relative; flex: none; justify-content: center; width: 50px; height: auto;
    margin: 0; padding: 0; border-radius: 0 12px 12px 0;
    color: var(--hp-mut); background: transparent;
}
body.task-login #login-form .hp-well > .hp-reveal::before {
    content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: 1px;
    background: var(--well-edge); pointer-events: none;
}
@media (hover: hover) { body.task-login #login-form .hp-well > .hp-reveal:hover { color: var(--hp-ink); background: rgba(127, 127, 127, .08); } }
body.task-login #login-form .hp-well > .hp-reveal[aria-pressed="true"] { color: var(--hp-ink); }
body.task-login #login-form .hp-well > .hp-reveal:focus-visible { box-shadow: inset 0 0 0 2px var(--rim-5); }
body.task-login #login-form .hp-well > .hp-reveal svg { width: 18px; height: 18px; }
/* the lit edge */
@media (forced-colors: none) {
    body.task-login #login-form .hp-well::after {
        content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
        /* 266.6: one coating colour at a time (--g-c1, the thin-film colour hp-login.js computes
           for this edge, so it shifts as the light moves), round the glint — the five-hue arc
           stretched along a wide field's top edge and read as a rainbow border */
        background:
            radial-gradient(30% 90% at calc(var(--g-x, .3) * 100%) 0%, rgb(255 255 255 / var(--rim-glint)), rgb(255 255 255 / 0) 70%),
            radial-gradient(55% 160% at calc(var(--g-x, .3) * 100%) 0%, var(--g-c1, var(--rim-tint)), rgb(255 255 255 / 0) 78%),
            var(--rim-edge);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        opacity: 0; transition: opacity .22s ease;
    }
    body.task-login #login-form .hp-well:focus-within::after { opacity: 1; }
    body.task-login #login-form .hp-well:focus-within { border-color: transparent; }
    /* the halo the lit edge throws, on its own layer so it fades and never repaints with the lamp */
    body.task-login #login-form .hp-well::before {
        content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
        box-shadow: var(--well-halo); opacity: 0; transition: opacity .22s ease;
    }
    body.task-login #login-form .hp-well:focus-within::before { opacity: 1; }
}
@media (forced-colors: active) { body.task-login #login-form .hp-well:focus-within { outline: 2px solid Highlight; outline-offset: 1px; } }
/* 265 end — liquid glass */