/* ---------- Accounts (/account/...): one calm card per page under the white site's top bar. account.js sends the forms
	inline: an answer on the same step updates the card in place (errors and the status line crossfade), a new step
	morphs the card's height while its content crossfades. Without JS every form still posts and the server answers with
	the page, its errors fading in on load. ---------- */
@font-face { font-family: "Google Sans Acct"; font-style: normal; font-weight: 500; font-display: swap; src: url("google-sans-500.woff2") format("woff2"); }

.acct-main { display: grid; justify-items: center; align-content: start; min-height: calc(100vh - 220px); min-height: calc(100svh - 220px); padding: clamp(28px, 7vh, 88px) var(--gutter) clamp(48px, 9vh, 110px); }
.acct-card { position: relative; width: 100%; max-width: 440px; border-radius: 26px; background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.acct-card.wide { max-width: 560px; }
.acct-in { display: grid; gap: 16px; padding: clamp(22px, 3vw, 32px); transition: opacity .25s var(--ease); }
.acct-in.swap { opacity: 0; }
.acct-card.morph { transition: height .55s var(--move); }

.acct-head { display: grid; justify-items: start; gap: 12px; margin-bottom: 2px; }
.acct-tile { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--paper); color: var(--ink); }
.acct-tile.bad { background: color-mix(in srgb, #b91c1c 10%, var(--paper)); color: #b91c1c; }
.acct-glyph { display: block; width: 24px; height: 24px; overflow: visible; }
.acct-title { margin: 0; font-weight: var(--h-weight); font-size: var(--h-size); line-height: 1.1; letter-spacing: -.01em; }
.acct-lead { margin: -4px 0 0; font-weight: 600; font-size: 15px; line-height: 1.45; color: var(--muted); }
.acct-lead b { color: var(--ink); font-weight: 750; overflow-wrap: anywhere; }

.acct-form { display: grid; gap: 14px; margin: 0; }
.acct-field { display: grid; gap: 6px; margin: 0; font-weight: 750; font-size: 13px; color: var(--muted); }
.acct-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-height: 1.35em; line-height: 1.35; }
.acct-label a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px;
	transition: color .6s var(--ease), text-decoration-color .6s var(--ease); }
@media (hover: hover) { .acct-label a:hover { color: var(--ink); text-decoration-color: var(--ink); transition-duration: .35s; } }
.acct-err { margin-left: auto; font-weight: 700; font-size: 13px; color: #b91c1c; text-align: right; transition: opacity .3s var(--ease), translate .45s var(--ease), color .45s var(--ease); }
.acct-err:empty { display: none; }
.acct-err.hint { font-weight: 650; color: var(--muted); }
.acct-err.swap { opacity: 0; translate: -4px 0; }
.acct-err.fresh { animation: acct-in .45s var(--ease) backwards; }
@keyframes acct-in { from { opacity: 0; translate: -6px 0; } }

.acct-card input[type="text"], .acct-card input[type="email"], .acct-card input[type="password"] { width: 100%; min-width: 0; margin: 0; padding: 11px 14px; border: 0; border-radius: 14px;
	background: var(--paper); color: var(--ink); font: 600 15px/1.4 var(--font); box-shadow: inset 0 0 0 1.5px transparent;
	transition: box-shadow .6s var(--ease), background-color .6s var(--ease), scale .6s var(--ease); }
@media (hover: hover) { .acct-card input:hover { background: color-mix(in srgb, var(--ink) 5%, var(--paper)); transition-duration: .35s; } }
.acct-card input:focus { outline: none; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); transition-duration: .35s; }
.acct-card input:active { scale: .992; transition-duration: .35s, .35s, .4s; }
.acct-field.bad input { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #b91c1c 55%, transparent); transition-duration: .35s; }
.acct-field.bad input:focus { box-shadow: inset 0 0 0 1.5px #b91c1c; }
.acct-code input[type="text"] { padding: 12px 14px; font: 800 26px/1.2 var(--font); letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.acct-hint { min-height: 1.35em; margin: 0; font-weight: 650; font-size: 13px; line-height: 1.35; color: var(--muted); transition: opacity .25s var(--ease), color .45s var(--ease); }
.acct-hint.swap { opacity: 0; }
.acct-hint.free { color: #15803d; }
.acct-hint.bad { color: #b91c1c; }

.acct-tick { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: fit-content; max-width: 100%; margin: 0; padding: 4px 0; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.acct-tick input { position: absolute; width: 22px; height: 22px; margin: 0; opacity: 0; cursor: pointer; }
.acct-box { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--paper); color: var(--paper); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 22%, transparent);
	transition: background-color .6s var(--ease), box-shadow .6s var(--ease), scale .6s var(--ease); }
.acct-box svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.acct-box path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s var(--ease); }
@media (hover: hover) { .acct-tick:hover .acct-box { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); transition-duration: .35s; } }
.acct-tick input:checked + .acct-box { background: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transition-duration: .35s; }
.acct-tick input:checked + .acct-box path { stroke-dashoffset: 0; }
.acct-tick input:focus-visible + .acct-box { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.acct-tick:active .acct-box { scale: .88; transition-duration: .35s, .35s, .4s; }
.acct-tick.bad .acct-box { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #b91c1c 60%, transparent); }
.acct-tick .acct-err { margin-left: 0; text-align: left; }

.acct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper);
	font: 800 15px/1 var(--font); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
	transition: translate .6s var(--ease), box-shadow .6s var(--ease), scale .6s var(--ease), background-color .6s var(--ease), opacity .45s var(--ease); }
@media (hover: hover) { .acct-btn:hover { translate: 0 -2px; box-shadow: var(--shadow-md); transition-duration: .35s; } }
.acct-btn:active { scale: .96; transition-duration: .35s, .35s, .4s, .35s, .35s; }
.acct-btn:focus-visible { outline-offset: 3px; }
.acct-btn.soft { background: var(--paper); color: var(--ink); }
@media (hover: hover) { .acct-btn.soft:hover { background: color-mix(in srgb, var(--ink) 9%, var(--paper)); box-shadow: none; } }
.acct-btn.danger { background: #b91c1c; color: #fff; }
.acct-btn:disabled { opacity: .38; cursor: default; translate: 0 0; box-shadow: none; scale: 1; }
.acct-btn-text { transition: opacity .25s var(--ease); }
.acct-btn-text.swap { opacity: 0; }
.acct-btn.wait .acct-btn-text { opacity: .55; }

.acct-status { min-height: 1.4em; margin: -2px 0 0; font-weight: 650; font-size: 14px; line-height: 1.4; color: var(--muted); text-align: center; transition: opacity .25s var(--ease), color .45s var(--ease); }
.acct-status.bad { color: #b91c1c; }
.acct-status.swap { opacity: 0; }
.acct-status.fresh { animation: acct-up .45s var(--ease) backwards; }
@keyframes acct-up { from { opacity: 0; translate: 0 4px; } }

.acct-or { display: flex; align-items: center; gap: 12px; margin: 0; font-weight: 700; font-size: 13px; color: var(--muted); }
.acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1.5px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.acct-foot { margin: 0; font-weight: 600; font-size: 14px; line-height: 1.45; color: var(--muted); text-align: center; }
.acct-foot a, .acct-lead a, .acct-fine a { color: var(--ink); font-weight: 750; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); text-underline-offset: 3px;
	transition: text-decoration-color .6s var(--ease); }
@media (hover: hover) { .acct-foot a:hover, .acct-lead a:hover, .acct-fine a:hover { text-decoration-color: var(--ink); transition-duration: .35s; } }
.acct-fine { margin: 0; font-weight: 600; font-size: 13px; line-height: 1.45; color: var(--muted); }
.acct-link-btn { display: inline; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 750 14px/1.45 var(--font); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent);
	text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color .6s var(--ease), opacity .6s var(--ease); }
@media (hover: hover) { .acct-link-btn:hover { text-decoration-color: var(--ink); transition-duration: .35s; } }
.acct-link-btn:active { opacity: .6; transition-duration: .35s; }

/* Google's sign-in button, light theme (its branding rules): white, a 1px #747775 border, the G untouched at 20px with 12px
	before it and 10px after, Google Sans Medium 14/20 in #1F1F1F, the pill shape; the hover is a state layer of the text
	colour, the press a small scale */
.acct-google { margin: 0; }
.acct-gbtn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; color: #1f1f1f;
	box-shadow: inset 0 0 0 1px #747775; font: 500 14px/20px "Google Sans Acct", "Google Sans", Roboto, Arial, sans-serif; letter-spacing: .25px; cursor: pointer; -webkit-tap-highlight-color: transparent; isolation: isolate;
	transition: scale .6s var(--ease), box-shadow .6s var(--ease); }
.acct-gbtn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #1f1f1f; opacity: 0; transition: opacity .6s var(--ease); }
@media (hover: hover) { .acct-gbtn:hover::before { opacity: .08; transition-duration: .35s; } .acct-gbtn:hover { box-shadow: inset 0 0 0 1px #747775, var(--shadow-sm); transition-duration: .35s; } }
.acct-gbtn:active { scale: .97; transition-duration: .4s, .35s; }
.acct-gbtn:active::before { opacity: .12; transition-duration: .35s; }
.acct-gbtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.acct-gbtn img { flex: none; width: 20px; height: 20px; margin-right: 10px; }

/* the account page: what's on the account, then one small card per thing you can change */
.acct-rows { display: grid; gap: 0; margin: 0; padding: 0; border-radius: 18px; background: var(--paper); }
.acct-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; margin: 0; padding: 12px 16px; font-weight: 650; font-size: 14px; color: var(--muted); }
.acct-row + .acct-row { box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.acct-row dd { min-width: 0; margin: 0; font-weight: 750; color: var(--ink); overflow-wrap: anywhere; text-align: right; }
.acct-part { display: grid; gap: 12px; padding-top: 18px; box-shadow: inset 0 1.5px 0 color-mix(in srgb, var(--ink) 7%, transparent); }
.acct-part-h { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 850; font-size: 17px; line-height: 1.2; }
.acct-part-h .acct-tile { width: 34px; height: 34px; border-radius: 11px; }
.acct-part-h .acct-glyph { width: 19px; height: 19px; }
.acct-part-h .acct-tile.bad { background: color-mix(in srgb, #b91c1c 10%, var(--paper)); }

.acct-main .rise { --i: 0; }
@media (max-width: 560px) {
	.acct-main { padding-top: 20px; }
	.acct-card { border-radius: 22px; }
}