/* Account, sign-in, contact, legal, install, feedback and 404 pages in the new look
   (2026-10-24). Their own stylesheets follow light and dark through ui-legacy.css; this
   file holds the page-level fixes. Loaded last on every static page. */
body.ui{background:var(--ui-bg);color:var(--ui-text)}
/* The footer spans the page even when the body centres its children (sign-in, 404). */
body.ui>footer.sp-footer{box-sizing:border-box;width:100%;align-self:stretch;justify-self:stretch}
body.ui.sp-not-found{display:block;font-family:var(--ui-font)}
body.ui.sp-not-found main h1{font-weight:500;letter-spacing:-.03em}
body.ui.sp-not-found main a{color:var(--ui-link)}

/* Main actions are the glossy purple pill; second actions the lavender glass. */
body.ui #send-message,body.ui .auth-primary,body.ui .button.send,body.ui #verification-action{box-sizing:border-box;border:.8px solid var(--ui-btn-line);border-radius:999px;background:var(--ui-btn-bg);color:var(--ui-btn-fg);font-family:var(--ui-font);font-weight:500;letter-spacing:-.02em;box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .15s,filter .15s}
body.ui #send-message:hover,body.ui .auth-primary:hover:not(:disabled),body.ui .button.send:hover,body.ui #verification-action:hover{background:var(--ui-btn-bg);border-color:var(--ui-btn-line);color:var(--ui-btn-fg);transform:translateY(-1px);filter:brightness(1.03) saturate(1.05);box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75)}
body.ui .auth-primary:disabled,body.ui #send-message:disabled{opacity:.55;box-shadow:none;transform:none;filter:none}
body.ui .button.reinstall,body.ui .button.support{border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);box-shadow:none}
/* Fields: the card colour with a hairline; a purple edge in dark mode (--ui-field-line). */
body.ui #contact-form input,body.ui #contact-form textarea,body.ui [data-email-auth] input,body.ui #feedback-form textarea,body.ui #feedback-form input{border:.8px solid var(--ui-field-line);border-radius:12px;background:var(--ui-card);color:var(--ui-text)}
body.ui #contact-form input:focus,body.ui #contact-form textarea:focus,body.ui [data-email-auth] input:focus{border-color:var(--ui-accent);box-shadow:0 0 0 4px var(--ui-accent-soft)}
body.ui .breadcrumb,body.ui .breadcrumbs{display:none}

/* The account card (scripts/account-card.html), embedded on the account and install pages:
   it follows the theme of the page around it (public/theme.js). */
html:has(>body.ui.account-card-page){background:var(--ui-card)}
body.ui.account-card-page{--line:var(--ui-line);--line2:var(--ui-line-strong);--dim:var(--ui-dim);--faint:var(--ui-faint);background:var(--ui-card);color:var(--ui-text);font-family:var(--ui-font)}
body.ui.account-card-page button.primary:not(#google),body.ui.account-card-page .auth-primary{box-sizing:border-box;border:.8px solid var(--ui-btn-line);border-radius:999px;background:var(--ui-btn-bg);color:var(--ui-btn-fg);font-weight:500;box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75)}
body.ui.account-card-page button.secondary,body.ui.account-card-page button.quiet{border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);box-shadow:none}
body.ui.account-card-page #google{border-radius:999px}
body.ui.account-card-page #close{color:var(--ui-text);border-radius:999px}

/* Account page (account-dashboard.js): no rails or handles; pills instead of keycaps;
   Add to Chrome is the same purple pill as the homepage and header. */
.ui .ft{border-inline:0}
.ui .ft-sec+.ft-sec::before,.ui .ft-sec+.ft-sec::after,.ui .ft-rule::before,.ui .ft-rule::after{display:none}
body.ui .acct-key{height:36px;padding:0 14px;border:.8px solid var(--ui-btn2-line);border-radius:999px;background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);font:500 14px/1 var(--ui-font);letter-spacing:-.02em;box-shadow:none}
body.ui .acct-key:hover{border-color:var(--ui-btn2-line);background:var(--ui-btn2-bg);color:var(--ui-btn2-fg);transform:translateY(-1px);filter:brightness(1.03);box-shadow:none}
body.ui .acct-key:active{transform:none}
body.ui .acct-key-light,body.ui .acct-key-light:hover,body.ui .acct-install,body.ui .acct-install:hover{border-color:var(--ui-btn-line);background:var(--ui-btn-bg);color:var(--ui-btn-fg);box-shadow:var(--ui-btn-shadow),inset 0 1px 0 rgba(255,255,255,.75)}
body.ui .acct-install .install-free-badge,body.ui .acct-install>svg{display:none}
body.ui .acct-install img{width:18px;height:18px}