/* ══════════════════════════════════════════════════════════════════
   APIARY sign-in pages (layouts/auth): signing in and up, getting back
   into an account, the codes that confirm an email, a phone or
   two-factor, a closed account, and the profile a social sign-in owes.

   Built from the approved mockup (mockup/auth-yupis-honey, gitignored).
   Not the old split screen: the farm is the whole page (hives on the
   hills at its foot, comb in the corner) and the form is one card in
   the valley, topped with honey that drips into it like the landing's
   hives. Sign-up fills a row of comb cells as its fields come right.

   Stands alone: not on css/landing.css (the yupis base the member area
   still uses). member.js drives the behaviour: [data-reveal] on a
   password, form[data-once], the six-box code and the resend countdown.
   Colour literals live only in :root.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --sky: #FFF8EF;
    --sky-2: #FCE9DC;
    --sand: #FEEEDD;
    --surface: #FFFFFF;
    --field: #FFFCF7;
    --cream: #FFF6E8;
    --hd: linear-gradient(180deg, #FFF2D9, #FFD98C);
    --drip: #FFD98C;
    --cell-on: linear-gradient(160deg, #FFC94A, #E8830E);
    --cell-off: #F4E2C2;
    --ink: #1F1A14;
    --text: #55504A;
    --muted: #6B665F;
    --ph: #8A8178;
    --line: #F1E6D6;
    --line-2: #E9D6BA;
    --orange: #F7931E;
    --orange-head: #E06C00;
    --orange-ink: #A84F00;
    --green: #17803F;
    --red: #B42318;
    --red-wash: #FDEDEB;
    --red-line: #F2C4BF;
    --white: #FFFFFF;
    --white-80: rgba(255, 255, 255, .8);
    --white-90: rgba(255, 255, 255, .92);
    --btn: linear-gradient(180deg, #DB6A0E, #A23F06);
    --btn-sh: 0 12px 22px -12px rgba(176, 72, 6, .75), inset 0 1px 0 rgba(255, 220, 160, .45);
    --text-sh: 0 1px 1px rgba(110, 40, 0, .35);
    --glow: rgba(255, 176, 66, .3);
    --trail: #D9954A;
    --scrim: rgba(31, 26, 20, .4);
    --shadow-sm: 0 8px 22px -16px rgba(120, 70, 10, .35);
    --shadow: 0 22px 46px -26px rgba(120, 70, 10, .4);
    --shadow-lg: 0 34px 70px -30px rgba(120, 60, 10, .45), 0 2px 0 rgba(233, 214, 186, .6);
    --hex-sh: drop-shadow(0 8px 10px rgba(224, 106, 6, .22));
    /* Fredoka has no Cyrillic and no Chinese: Nunito draws Russian, the system's CJK face draws Chinese */
    --font-h: Fredoka, Nunito, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    --font: Nunito, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    --font-brand: Righteous, Fredoka, Nunito, sans-serif;
    --side: max(20px, calc(50vw - 640px));
    --drips: url(../images/apiary/drip-edge.svg);
    --hex: url(../images/apiary/hex-mask.svg);

    /* the names toast.css reads */
    --brand: var(--orange-ink);
    --on-brand: var(--white);
    --brand-wash: rgba(247, 147, 30, .14);
    --down: var(--red);
    --t3: var(--muted);
    --hairline: var(--line);
    --sans: var(--font);
    --sh-2: 0 20px 44px -14px rgba(31, 26, 20, .28);
    color-scheme: light;
}

* { box-sizing: border-box; }
/* hidden means hidden, whatever display a class gives (the resend link waits out its countdown this way) */
[hidden] { display: none !important; }
html { overflow-x: clip; background: var(--sand); }
/* the hills sit at the foot of the page, whatever its height: the card stands in their valley */
.farm { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: 100svh; margin: 0; overflow-x: clip; color: var(--text); font: 600 16px/1.55 var(--font); -webkit-font-smoothing: antialiased;
    background: url(../images/apiary/farm-hills.webp) 50% 100% / max(1600px, 100%) auto no-repeat, radial-gradient(700px 480px at 88% 0%, var(--glow), transparent 70%), linear-gradient(var(--sky), var(--sky-2) 58%); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--orange-head); outline-offset: 3px; border-radius: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: -60px; left: 16px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--white); font-weight: 800; text-decoration: none; }
.skip:focus { top: 12px; }
.ic { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-variant-numeric: tabular-nums; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--btn); color: var(--white); font: 800 15px/1 var(--font); text-decoration: none; text-shadow: var(--text-sh); white-space: nowrap; box-shadow: var(--btn-sh); cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn:active, .btn:disabled { transform: none; }
.btn:disabled { filter: saturate(.6); cursor: progress; }
.btn-lg { min-height: 54px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn-line { background: var(--surface); color: var(--orange-ink); text-shadow: none; box-shadow: inset 0 0 0 1.5px var(--orange); }
.btn .ic { transition: translate .2s; }
.btn:hover > .ic:last-child { translate: 3px 0; }

/* ───────────── the farm around the card */
.corner { position: absolute; top: -110px; right: -170px; width: min(560px, 42vw); rotate: -14deg; pointer-events: none; }
.trail { position: absolute; top: 70px; right: calc(100% + 18px); width: 210px; height: 290px; fill: none; stroke: var(--trail); stroke-width: 2.2; stroke-dasharray: 1 9; stroke-linecap: round; pointer-events: none; }
.fly-bee { position: absolute; top: 30px; right: calc(100% - 4px); width: 62px; animation: buzz 3s ease-in-out infinite; pointer-events: none; }
.card-bee { position: absolute; top: -40px; right: -22px; z-index: 2; width: 82px; animation: buzz 3.4s ease-in-out infinite; pointer-events: none; }
/* the wide card reaches under the top bar's buttons: its bee rests on the right edge instead */
.stage:has(> .wide) .card-bee { top: auto; bottom: 90px; right: -44px; }
@keyframes buzz { 0%, 100% { translate: 0 0; rotate: -5deg; } 50% { translate: 8px -12px; rotate: 3deg; } }

/* ───────────── top bar: the brand, the way back, the language, and the other door */
.top { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 16px var(--side); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font: 400 27px/1 var(--font-brand); letter-spacing: .04em; text-decoration: none; }
.brand-mark { flex: none; width: 40px; height: 40px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--ink); font-size: 14.5px; font-weight: 800; text-decoration: none; transition: background-color .2s; }
.back:hover { background: var(--white-80); }
.back .ic { color: var(--orange-ink); }
.top-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 14px; border: 1.5px solid var(--line-2); border-radius: 999px; background: var(--white-90); color: var(--ink); font: 800 14px var(--font); cursor: pointer; }
.lang-btn:hover { border-color: var(--orange); }
.lang-btn > .ic { width: 18px; height: 18px; color: var(--orange-ink); }
.lang-btn > .ic:last-child { width: 16px; height: 16px; color: var(--muted); }
.lang-menu { position: fixed; inset: 74px var(--side) auto auto; width: min(260px, calc(100vw - 32px)); max-height: calc(100vh - 96px); margin: 0; padding: 8px; overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.lang-menu:popover-open { display: grid; gap: 2px; animation: popIn .2s ease; }
.lang-menu::backdrop { background: transparent; }
.lang-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 12px; color: var(--text); font-weight: 700; text-decoration: none; }
.lang-link:hover { background: var(--cream); }
.lang-link[aria-current] { color: var(--ink); font-weight: 800; }
.lang-link[aria-current]::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--orange); }
.lang-link .flag { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
@keyframes popIn { from { opacity: 0; translate: 0 -8px; } }
.switch { display: flex; padding: 3px; border: 1.5px solid var(--orange); border-radius: 999px; background: var(--white-90); }
.switch a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.switch a[aria-current] { background: var(--btn); color: var(--white); text-shadow: var(--text-sh); }

/* ───────────── the card: a honey header dripping into the form */
.gate { position: relative; display: grid; place-items: center; padding: 12px 20px clamp(28px, 5vh, 64px); }
.stage { position: relative; width: min(448px, 100%); }
.stage:has(> .wide) { width: min(780px, 100%); }
.au-card { position: relative; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-lg); animation: rise .5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rise { from { opacity: 0; translate: 0 18px; } }
.au-head { position: relative; display: grid; justify-items: center; gap: 6px; padding: 30px 32px 16px; border-radius: 28px 28px 0 0; background: var(--hd); text-align: center; }
.au-head::after { content: ""; position: absolute; top: calc(100% - 1px); left: 0; right: 0; height: 30px; background: var(--drip); -webkit-mask: var(--drips) 0 0 / 220px 30px repeat-x; mask: var(--drips) 0 0 / 220px 30px repeat-x; pointer-events: none; }
/* the page's icon on a comb cell */
.au-icon { display: grid; flex: none; place-items: center; width: 64px; height: 73px; margin-bottom: 6px; background: url(../images/apiary/hex-badge.svg) center / contain no-repeat; filter: var(--hex-sh); }
.au-icon .ic { width: 28px; height: 28px; color: var(--orange-ink); stroke-width: 2; }
.au-icon.is-down .ic { color: var(--red); }
.au-title { margin: 0; color: var(--ink); font: 600 34px/1.1 var(--font-h); letter-spacing: -.01em; overflow-wrap: anywhere; text-wrap: balance; }
.au-title em { color: var(--orange-head); font-style: normal; }
:lang(ru) .au-title { font-weight: 800; }
.au-lede { color: var(--text); font-size: 15.5px; }
.au-lede b { color: var(--ink); font-weight: 800; }
.au-form { display: grid; gap: 16px; padding: 48px 36px 30px; }

/* sign-up: the header in a row, its progress as comb cells filling with honey */
.au-head:has(.progress) { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; justify-items: start; column-gap: 18px; padding: 28px 34px 18px; text-align: left; }
.au-head:has(.progress) .au-icon { margin: 0; }
.au-head:has(.progress) .au-lede { margin-top: 6px; }
.progress { display: grid; justify-items: end; gap: 6px; text-align: right; }
.progress span { color: var(--text); font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.progress b { color: var(--orange-ink); font-size: 14px; font-weight: 800; white-space: nowrap; }
.progress.done b { color: var(--green); }
.cells { display: flex; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cells li, .meter i { aspect-ratio: 200 / 230; -webkit-mask: var(--hex) center / contain no-repeat; mask: var(--hex) center / contain no-repeat; }
.cells li { width: 28px; background: var(--white-80); transition: background-color .3s, scale .35s cubic-bezier(.3, 1.6, .5, 1); }
.cells li.on { background: var(--cell-on); scale: 1.08; }

/* ───────────── fields */
.au-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; align-items: start; }
.field { display: grid; align-content: start; gap: 8px; min-width: 0; }
.label { color: var(--ink); font-size: 14.5px; font-weight: 800; }
.fld-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 22px; }
.au-link { display: inline-flex; align-items: center; flex: none; min-height: 40px; margin: -9px 0; color: var(--orange-ink); font-size: 14px; font-weight: 800; text-decoration: none; }
.au-link:hover { text-decoration: underline; }
.optional { color: var(--muted); font-size: 13px; font-weight: 700; }
.ctl { position: relative; display: flex; align-items: center; }
.ctl > .ic { position: absolute; left: 16px; color: var(--orange-ink); pointer-events: none; }
.input { width: 100%; min-width: 0; min-height: 52px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--field); color: var(--ink); font: 700 16px var(--font); text-overflow: ellipsis; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.ctl > .ic + .input { padding-left: 46px; }
.input::placeholder { color: var(--ph); font-weight: 600; }
.input:hover { border-color: var(--orange); }
.input:focus { border-color: var(--orange-head); outline: none; background: var(--surface); box-shadow: 0 0 0 4px var(--glow); }
.input[aria-invalid="true"] { border-color: var(--red); }
select.input { padding-right: 44px; background: var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B665F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pw .input { padding-right: 52px; }
.eye { position: absolute; right: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--muted); cursor: pointer; }
.eye:hover, .eye[aria-pressed="true"] { color: var(--orange-ink); }
.hint { min-width: 0; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.4; }
.hint:empty { display: none; }
.hint[data-state="ok"] { color: var(--green); }
.hint[data-state="bad"] { color: var(--red); }
.fld-head .hint { text-align: right; }
.pw-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
/* the strength, as four comb cells: red, orange, honey, green */
.meter { display: flex; flex: none; gap: 3px; margin-left: auto; }
.meter i { width: 14px; background: var(--cell-off); transition: background-color .25s; }
.meter[data-score="1"] i:nth-child(-n+1) { background: var(--red); }
.meter[data-score="2"] i:nth-child(-n+2) { background: var(--orange); }
.meter[data-score="3"] i:nth-child(-n+3) { background: var(--cell-on); }
.meter[data-score="4"] i { background: var(--green); }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding-top: 10px; color: var(--text); font-size: 14.5px; font-weight: 700; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--orange-head); cursor: pointer; }
.check a { color: var(--orange-ink); font-weight: 800; }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; font-weight: 800; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.social { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.social .btn { padding: 0 16px; }
.social svg { width: 18px; height: 18px; }
/* the line under a form: the way across, a resend, who to ask */
.au-switch, .au-note { color: var(--muted); font-size: 14.5px; text-align: center; }
.au-note { font-size: 14px; line-height: 1.55; }
.au-note b { color: var(--ink); }
.au-switch a, .au-note a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; color: var(--orange-ink); font-weight: 800; }
/* a link inside a sentence: a taller target, no gap before the full stop after it */
.au-note a { display: inline; padding: 11px 0; }
/* a mobile number after its dialling code (user_data), a captcha beside its field */
.cap-row { display: flex; align-items: center; gap: 10px; }
.cap-row .input { flex: 1; }
.cap-row img, .cap-row canvas { flex: none; border-radius: 14px; }
.dial { display: grid; flex: none; place-items: center; min-width: 72px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--cream); color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.g-recaptcha-slot { min-height: 78px; }
/* a code of six digits: one input, drawn as six comb-edged cells once member.js is in */
.code6 i { display: none; }
.code6[data-ready] { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.code6[data-ready] i { display: grid; place-items: center; height: 62px; border: 1.5px solid var(--line-2); border-radius: 16px; background: var(--field); color: var(--ink); font: 600 28px var(--font-h); font-style: normal; transition: border-color .2s, box-shadow .2s; }
.code6[data-ready] i.is-on { border-color: var(--orange-head); background: var(--surface); box-shadow: 0 0 0 4px var(--glow); }
.code6[data-ready] i.is-on:empty::after { content: ""; width: 2px; height: 28px; background: var(--orange-head); animation: blink 1s steps(1) infinite; }
.code6[data-ready]:has(input[aria-invalid="true"]) i { border-color: var(--red); }
.code6[data-ready] input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: text; }
.input.otp { font: 600 24px var(--font-h); letter-spacing: .5em; text-align: center; }
@keyframes blink { 50% { opacity: 0; } }
/* the reason an account was suspended */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border: 1px solid var(--red-line); border-radius: 18px; background: var(--red-wash); color: var(--text); font-size: 14px; line-height: 1.55; }
.alert > .ic { margin-top: 2px; color: var(--red); }
.alert b { display: block; margin-bottom: 2px; color: var(--red); }

/* ───────────── foot of the page, on the sand */
.foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 24px; padding: 10px var(--side) max(12px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 13px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; color: var(--ink); font-weight: 800; text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }

/* side by side, a line under a field is kept even while empty: a message arriving never shifts the row */
@media (min-width: 641px) {
    .au-pair .hint:empty { display: block; min-height: 1.4em; }
}
@media (max-width: 1100px) {
    .trail, .fly-bee { display: none; }
}
/* the wide card all but fills the width: no room at its side, so its bee perches on the corner */
@media (max-width: 900px) {
    .stage:has(> .wide) .card-bee { top: -32px; bottom: auto; right: -8px; width: 64px; }
}
@media (max-width: 760px) {
    .au-head:has(.progress) { grid-template-columns: auto minmax(0, 1fr); }
    /* the label and the count on one line, the comb under them */
    .progress { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k n" "c c"; align-items: center; justify-items: start; gap: 8px 12px; margin-top: 14px; text-align: left; }
    .progress span { grid-area: k; }
    .progress b { grid-area: n; }
    .progress .cells { grid-area: c; }
}
@media (max-width: 640px) {
    .farm { background-size: auto 260px, auto, auto; }
    .top { gap: 8px; padding: 12px 16px; }
    .brand { gap: 8px; font-size: 23px; }
    .brand-mark { width: 34px; height: 34px; }
    .back { display: none; }
    .lang-btn { gap: 6px; padding: 0 10px; }
    .lang-menu { inset: auto 0 0 0; width: 100%; max-height: 84vh; border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
    .lang-menu::backdrop { background: var(--scrim); }
    /* only the other door: the card is this one (and only Sign in, where neither is) */
    .switch { padding: 0; border: 0; background: none; }
    .switch a[aria-current], .switch:not(:has([aria-current])) a + a { display: none; }
    .switch a { min-height: 44px; padding: 0 18px; background: var(--btn); color: var(--white); text-shadow: var(--text-sh); box-shadow: var(--btn-sh); }
    .corner { top: -70px; right: -130px; width: 300px; }
    .gate { padding: 34px 16px 190px; }
    .au-head { padding: 26px 20px 14px; }
    .au-head:has(.progress) { column-gap: 14px; padding: 24px 20px 16px; }
    .au-head:has(.progress) .au-icon { width: 52px; height: 59px; }
    .au-head:has(.progress) .au-icon .ic { width: 24px; height: 24px; }
    .au-title { font-size: 30px; }
    .au-lede { font-size: 15px; }
    .au-form { gap: 16px; padding: 44px 20px 24px; }
    .au-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .card-bee, .stage:has(> .wide) .card-bee { top: -32px; bottom: auto; right: -8px; width: 64px; }
    .code6[data-ready] { gap: 6px; }
    .code6[data-ready] i { height: 54px; border-radius: 14px; font-size: 24px; }
    .foot { justify-content: center; text-align: center; }
    .foot nav { justify-content: center; }
}
/* the narrowest phones with a long "Sign in" (Spanish, Russian): the language keeps its code, loses the globe */
@media (max-width: 380px) {
    .lang-btn > .ic:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .btn:hover { transform: none; }
}