/* ==== tokens: written by pages/account/tokens.py, do not edit ==== */
:root {
  /* ---- SignIn: design/component/SignInTokens.kt, object SignInTokens ---- */
  --sign-in-background: #FEFCFD;
  --sign-in-picture-width: 941px;
  --sign-in-picture-height: 1672px;
  --sign-in-picture-fade-point: 0.58px;
  --sign-in-fade-above-title: 10px;
  --sign-in-shade-color: #3A3A3A;
  --sign-in-shade-height: 222px;
  --sign-in-shade-fade-end: 183;
  --sign-in-back-size: 16px;
  --sign-in-back-top: 18px;
  --sign-in-top-side-inset: 20px;
  --sign-in-top-tint: var(--palette-on-brand);
  --sign-in-back-touch-target: var(--sizing-min-touch-target);
  --sign-in-wordmark-top: 16px;
  --sign-in-wordmark-width: 110px;
  --sign-in-wordmark-height: 20px;
  --sign-in-skip-top: 16px;
  --sign-in-skip-style: var(--typography-body-strong);
  --sign-in-side-inset: 30px;
  --sign-in-bottom-inset: 40px;
  --sign-in-bottom-safe-gap: 6px;
  --sign-in-last-line-height: 24px;
  --sign-in-last-line-style: var(--typography-label);
  --sign-in-last-line-color: var(--palette-text-secondary);
  --sign-in-last-line-link-color: var(--palette-brand);
  --sign-in-last-line-to-email: 15px;
  --sign-in-email-to-divider: 20px;
  --sign-in-divider-to-providers: 20px;
  --sign-in-provider-gap: 10px;
  --sign-in-providers-to-subtitle: 35px;
  --sign-in-subtitle-to-title: 17px;
  --sign-in-title-style: var(--typography-hero);
  --sign-in-title-color: var(--palette-brand);
  --sign-in-subtitle-style: var(--typography-subhead-large);
  --sign-in-subtitle-color: var(--palette-text-secondary);
  --sign-in-subtitle-to-message: 10px;
  --sign-in-message-style: var(--typography-label);
  --sign-in-message-color: var(--palette-error);
  --sign-in-email-button-height: 60px;
  --sign-in-email-button-radius: var(--radius-card);
  --sign-in-email-button-horizontal-padding: 20px;
  --sign-in-email-button-fill: var(--palette-brand);
  --sign-in-email-button-label-color: var(--palette-on-brand);
  --sign-in-email-button-label-style: var(--typography-title);

  /* ---- EmailForm: design/component/EmailFormTokens.kt, object EmailFormTokens ---- */
  --email-form-background: var(--palette-background);
  --email-form-logo-size: 120px;
  --email-form-logo-top: 73px;
  --email-form-text-inset: 30px;
  --email-form-logo-to-title: 50px;
  --email-form-title-style: var(--typography-headline);
  --email-form-title-color: var(--palette-text-emphasis);
  --email-form-title-to-subtitle: 22px;
  --email-form-subtitle-style: var(--typography-body);
  --email-form-subtitle-color: var(--palette-text-emphasis);
  --email-form-field-inset: var(--spacing-screen-margin);
  --email-form-subtitle-to-fields: 20px;
  --email-form-field-gap: 15px;
  --email-form-fields-to-message: var(--spacing-xs);
  --email-form-message-leading-inset: 40px;
  --email-form-message-style: var(--typography-label);
  --email-form-message-color: var(--palette-error);
  --email-form-notice-color: var(--palette-text-emphasis);
  --email-form-fields-to-agreement: 20px;
  --email-form-checkbox-size: 24px;
  --email-form-checkbox-to-text: var(--spacing-sm);
  --email-form-agreement-style: var(--typography-label-tall);
  --email-form-agreement-color: var(--palette-text-emphasis);
  --email-form-agreement-link-style: var(--typography-label-tall-bold);
  --email-form-agreement-link-color: var(--palette-brand);
  --email-form-fields-to-forgot: 20px;
  --email-form-to-rule: 30px;
  --email-form-rule-height: 1px;
  --email-form-rule-color: var(--palette-border);
  --email-form-rule-to-switch: 30px;
  --email-form-switch-style: var(--typography-label-tall);
  --email-form-switch-color: var(--palette-text-emphasis);
  --email-form-switch-link-style: var(--typography-label-tall-bold);
  --email-form-switch-link-color: var(--palette-brand);
  --email-form-switch-to-divider: 30px;
  --email-form-divider-to-providers: 20px;
  --email-form-pinned-rule-to-button: 31px;
  --email-form-button-height: 60px;
  --email-form-button-radius: var(--radius-card);
  --email-form-button-horizontal-padding: 50px;
  --email-form-button-fill: var(--palette-brand);
  --email-form-button-label-color: var(--palette-on-brand);
  --email-form-button-label-style: var(--typography-body-strong);
  --email-form-button-bottom-inset: 38px;

  /* ---- CompleteProfile: design/component/CompleteProfileTokens.kt, object CompleteProfileTokens ---- */
  --complete-profile-background: var(--palette-background);
  --complete-profile-title-top: 73px;
  --complete-profile-text-inset: 30px;
  --complete-profile-title-style: var(--typography-headline);
  --complete-profile-title-color: var(--palette-text-emphasis);
  --complete-profile-title-to-body: 22px;
  --complete-profile-body-style: var(--typography-body);
  --complete-profile-body-color: var(--palette-text-emphasis);
  --complete-profile-body-line-height: 20px;
  --complete-profile-body-to-picture: 35px;
  --complete-profile-picture-size: 120px;
  --complete-profile-picture-radius: 39px;
  --complete-profile-pencil-size: 35px;
  --complete-profile-pencil-touch-target: var(--sizing-min-touch-target);
  --complete-profile-picture-to-fields: 40px;
  --complete-profile-field-inset: var(--spacing-screen-margin);
  --complete-profile-field-gap: var(--spacing-sm);
  --complete-profile-button-height: 60px;
  --complete-profile-button-radius: var(--radius-card);
  --complete-profile-button-horizontal-padding: 50px;
  --complete-profile-button-fill: var(--palette-brand);
  --complete-profile-button-label-color: var(--palette-on-brand);
  --complete-profile-button-label-style: var(--typography-body-strong);
  --complete-profile-message-to-button: var(--spacing-sm);
  --complete-profile-message-style: var(--typography-label);
  --complete-profile-message-color: var(--palette-error);
  --complete-profile-button-to-skip: 19px;
  --complete-profile-skip-style: var(--typography-body-strong);
  --complete-profile-skip-color: var(--palette-text-emphasis);
  --complete-profile-skip-bottom-inset: 49px;
  --complete-profile-skip-safe-gap: 12px;

  /* ---- CountrySheet: design/component/CompleteProfileTokens.kt, object CountrySheetTokens ---- */
  --country-sheet-row-height: 50px;
  --country-sheet-flag-size: 30px;
  --country-sheet-flag-leading-inset: var(--spacing-lg);
  --country-sheet-flag-to-name: var(--spacing-sm);
  --country-sheet-name-style: var(--typography-body-medium);
  --country-sheet-name-color: var(--palette-text-emphasis);
  --country-sheet-code-trailing-inset: var(--spacing-lg);
  --country-sheet-code-style: var(--typography-body-medium);
  --country-sheet-code-color: var(--palette-text-secondary);
  --country-sheet-search-to-no-match: 40px;

  /* ---- DevicesSheet: design/component/DevicesSheetTokens.kt, object DevicesSheetTokens ---- */
  --devices-sheet-scrim: var(--palette-scrim);
  --devices-sheet-fill: var(--palette-background);
  --devices-sheet-radius: var(--radius-lg);
  --devices-sheet-side-inset: var(--spacing-screen-margin);
  --devices-sheet-bottom-inset: 40px;
  --devices-sheet-bottom-safe-gap: 6px;
  --devices-sheet-height-fraction: 0.71;
  --devices-sheet-open-millis: var(--motion-sheet-millis);
  --devices-sheet-title-top: 21px;
  --devices-sheet-title-style: var(--typography-title);
  --devices-sheet-title-color: var(--palette-text-emphasis);
  --devices-sheet-close-size: 20px;
  --devices-sheet-close-inset: var(--spacing-lg);
  --devices-sheet-close-top: 21px;
  --devices-sheet-close-tint: var(--palette-inactive);
  --devices-sheet-close-touch-target: var(--sizing-min-touch-target);
  --devices-sheet-search-height: 50px;
  --devices-sheet-search-radius: var(--radius-pill);
  --devices-sheet-search-fill: var(--palette-surface);
  --devices-sheet-search-icon-inset: 15px;
  --devices-sheet-search-icon-tint: var(--palette-brand);
  --devices-sheet-search-placeholder-color: var(--palette-placeholder);
  --devices-sheet-search-text-color: var(--palette-text-emphasis);
  --devices-sheet-search-text-style: var(--typography-body-medium);
  --devices-sheet-search-top: 62px;
  --devices-sheet-search-side-inset: var(--spacing-lg);
  --devices-sheet-notice-style: var(--typography-micro);
  --devices-sheet-notice-color: var(--palette-text-secondary);
  --devices-sheet-notice-gap: var(--spacing-xxs);
  --devices-sheet-notice-to-search: var(--spacing-sm);
  --devices-sheet-list-inset: var(--spacing-lg);
  --devices-sheet-brand-header-height: 46px;
  --devices-sheet-brand-name-style: var(--typography-label-bold);
  --devices-sheet-brand-name-color: var(--palette-text-emphasis);
  --devices-sheet-caret-width: 12px;
  --devices-sheet-caret-height: 8px;
  --devices-sheet-caret-tint: var(--palette-placeholder);
  --devices-sheet-caret-trailing-inset: 29px;
  --devices-sheet-separator-height: 1px;
  --devices-sheet-separator-color: var(--palette-border);
  --devices-sheet-header-to-chips: 5px;
  --devices-sheet-chips-to-note: 9px;
  --devices-sheet-open-bottom: 15px;
  --devices-sheet-note-style: var(--typography-micro);
  --devices-sheet-note-color: var(--palette-text-emphasis);
  --devices-sheet-note-line-height: 14px;
  --devices-sheet-chip-height: 30px;
  --devices-sheet-chip-radius: var(--radius-chip);
  --devices-sheet-chip-padding: var(--spacing-sm);
  --devices-sheet-chip-gap: 5px;
  --devices-sheet-chip-fill: var(--palette-border);
  --devices-sheet-chip-label-style: var(--typography-micro);
  --devices-sheet-chip-label-color: var(--palette-text-secondary);
  --devices-sheet-search-to-results: 15px;
  --devices-sheet-search-to-no-match: var(--spacing-lg);
  --devices-sheet-search-to-failure: 40px;
  --devices-sheet-placeholder-count: 3;
  --devices-sheet-placeholder-height: 30px;
  --devices-sheet-placeholder-radius: var(--radius-chip);
  --devices-sheet-placeholder-gap: 17px;
  --devices-sheet-placeholder-fill: var(--palette-surface);

  /* ---- ResultCard: design/component/ResultCardTokens.kt, object ResultCardTokens ---- */
  --result-card-scrim: var(--palette-scrim);
  --result-card-fill: var(--palette-background);
  --result-card-radius: var(--radius-lg);
  --result-card-side-inset: var(--spacing-screen-margin);
  --result-card-height: 400px;
  --result-card-bottom-inset: 40px;
  --result-card-bottom-safe-gap: 6px;
  --result-card-open-millis: var(--motion-sheet-millis);
  --result-card-picture-top: 70px;
  --result-card-picture-size: 120px;
  --result-card-picture-to-title: 20px;
  --result-card-title-style: var(--typography-headline-bold);
  --result-card-title-color: var(--palette-brand);
  --result-card-title-to-wait: 33px;
  --result-card-wait-style: var(--typography-label-strong);
  --result-card-wait-color: var(--palette-text-emphasis);
  --result-card-wait-to-body: 20px;
  --result-card-body-style: var(--typography-label-regular);
  --result-card-body-color: var(--palette-text-emphasis);
  --result-card-text-inset: var(--spacing-lg);
  --result-card-to-order-line: 16px;
  --result-card-order-line-style: var(--typography-label-tall);
  --result-card-order-line-color: var(--palette-text-emphasis-soft);
  --result-card-button-height: 60px;
  --result-card-button-radius: var(--radius-card);
  --result-card-button-horizontal-padding: 50px;
  --result-card-button-fill: var(--palette-brand);
  --result-card-button-label-color: var(--palette-on-brand);
  --result-card-button-label-style: var(--typography-body-strong);
  --result-card-button-inset: var(--spacing-lg);
  --result-card-picture-top-with-button: 40px;
  --result-card-title-to-wait-with-button: 16px;
  --result-card-wait-to-body-with-button: var(--spacing-sm);

  /* ---- More: design/component/MoreTokens.kt, object MoreTokens ---- */
  --more-background: var(--palette-background);
  --more-side-inset: var(--spacing-screen-margin);
  --more-title-top: 15px;
  --more-title-style: var(--typography-heading);
  --more-title-color: var(--palette-text-emphasis);
  --more-title-to-account: 20px;
  --more-account-name-style: var(--typography-title-bold);
  --more-account-name-color: var(--palette-text-emphasis);
  --more-account-name-to-detail: 6px;
  --more-account-detail-style: var(--typography-label);
  --more-account-detail-color: var(--palette-text-secondary);
  --more-account-to-rows: 20px;
  --more-rows-to-message: var(--spacing-md);
  --more-message-style: var(--typography-label);
  --more-message-color: var(--palette-text-emphasis);
}
/* ==== end of the written tokens ==== */

/*
 * Maak on the web: what the account pages add beside the kit.
 *
 * The pages of pages/account/ (sign-in options, the email form, Complete
 * profile and its success card, the profile, deleting the account) link this
 * file after maak.css. It holds three kinds of thing, and says which is which:
 *
 *   1. The look chosen for the website (looks/x2.html), which the kit does not
 *      draw yet: a band of the brand colour across the top with the page's
 *      title in the middle, white cards that rise over the band's foot, a pale
 *      blue ground. Web only, and named for this family so that they meet no
 *      other family's: .account-ground, .account-band, .account-lift,
 *      .account-card, .account-actions, .account-under-sheet. When the kit
 *      draws the band and the card, these go.
 *   2. Components of the account screens, each named after the Android
 *      component or screen it mirrors and built from that one's tokens:
 *      .link-line (LinkLine.kt), .form-message, .maak-button--email,
 *      .form-field__number, .profile-form and .profile-picture
 *      (CompleteProfileScreen.kt), .result-card (ResultCard.kt),
 *      .country-sheet (CountrySheet.kt), three more placeholders, and the looks
 *      a busy screen gives a provider button, an action row and a declaration.
 *   3. How the other states of a page are shown standing still under it:
 *      .account-states, .account-state, and .is-still on a .scrim. Not part of
 *      the website.
 *
 * The tokens above the first mark are written by pages/account/tokens.py from
 * the Kotlin files. Everything below is a token or built from tokens, written
 * phone first, and nothing says left or right (base.css says how).
 */

/* ==========================================================================
   The website's own sizes on these pages
   ========================================================================== */

:root {
  /* How far the first card of a page rises over the band's foot. */
  --account-band-overlap: calc(var(--spacing-xxl) * 2);
  /* The widest a card that stands alone gets: a form with a picture beside it. */
  --account-card-measure: calc(var(--web-container) * 0.8);
  /* From a card's edge to what it holds. */
  --account-card-inset: var(--spacing-lg);
  /* A card on the pale ground: a soft shadow under it, no outline. */
  --account-card-shadow: 0 var(--spacing-xs) var(--spacing-xl) var(--palette-shadow-soft);
  /* The share of the sign-in picture that is scene: under it the picture is plain
     white, for the phone's title. SignInTokens.pictureFadePoint, which the token
     script writes as a length. */
  --sign-in-picture-scene: 0.58;
  /* A frame that holds a sheet or a dialog standing still (the states of a page). */
  --account-state-stage-height: calc(var(--web-sheet-width) * 1.3);
}
@media (min-width: 768px) {
  :root {
    --account-band-overlap: calc(var(--spacing-xxl) * 3);
    --account-card-inset: calc(var(--spacing-lg) * 2);
  }
}

/* ==========================================================================
   1. The look. Web only.
   ========================================================================== */

/* The pale blue ground the white cards stand on. Said on <body>, beside .page. */
.account-ground { background: var(--palette-brand-wash); }

/* A page that stands under a sheet or a dialog does not scroll: the window is
   the whole of it until the sheet is answered. Said on <body>. */
:root:has(.account-under-sheet) { overflow: hidden; }
.account-under-sheet { block-size: 100vh; overflow: hidden; }
/* A sheet or a dialog drawn as it stands once it is up, in a page of this
   design: it rises when it is opened, and a picture must not catch it rising.
   Said on the .scrim; the wiring leaves it out. */
.scrim.is-still, .scrim.is-still > * { animation: none; }

/* The band a page opens on: the brand colour across the whole window, the
   page's title and one sentence in the middle of it. The first card of the
   page rises over its foot (.account-lift). On a phone it runs edge to edge with a
   round foot, as .page-hero does; from a tablet up it is straight. It stands
   directly in <main>, outside any .container, and holds one. */
.account-band {
  --web-focus-color: var(--palette-on-brand);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: var(--spacing-xxl) calc(var(--account-band-overlap) + var(--spacing-xl));
  background: linear-gradient(to bottom var(--inline-end), var(--palette-brand-shade), var(--palette-brand) 45%, color-mix(in srgb, var(--palette-brand) 70%, var(--palette-on-brand)));
  color: var(--palette-on-brand); text-align: center;
  border-end-start-radius: var(--plans-hero-radius); border-end-end-radius: var(--plans-hero-radius);
}
/* Two pale discs behind the words, as the chosen look draws them. */
.account-band::before, .account-band::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: var(--palette-on-brand); pointer-events: none; }
.account-band::before { inset-block-start: calc(var(--web-hero-height) * -0.4); inset-inline-end: calc(var(--web-hero-height) * -0.35); inline-size: calc(var(--web-hero-height) * 1.55); block-size: calc(var(--web-hero-height) * 1.55); opacity: 0.08; }
.account-band::after { inset-block-end: calc(var(--web-hero-height) * -0.65); inset-inline-start: calc(var(--web-hero-height) * -0.3); inline-size: calc(var(--web-hero-height) * 1.3); block-size: calc(var(--web-hero-height) * 1.3); opacity: 0.06; }
.account-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sign-in-subtitle-to-title); }
/* The row at the band's top, as the top of Sign-in options has it: the way back at the leading end, Skip at the far end. */
.account-band:has(.account-band__bar) { justify-content: space-between; padding-block-start: var(--spacing-xs); }
.account-band__bar { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--sign-in-back-touch-target); margin-block-end: var(--spacing-lg); }
.account-band__back { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--sign-in-back-touch-target); block-size: var(--sign-in-back-touch-target); margin-inline-start: calc((var(--sign-in-back-touch-target) - var(--sign-in-back-size)) / -2); border-radius: 50%; color: var(--sign-in-top-tint); transition: background-color var(--motion-selection-millis) var(--motion-easing); }
.account-band__back .icon { --icon-size: var(--sign-in-back-size); }
.account-band__back:hover { background: var(--palette-on-brand-faint); }
.account-band .maak-text-button { color: var(--sign-in-top-tint); font: var(--sign-in-skip-style) var(--font-family); }
.account-band .maak-text-button:hover { color: var(--palette-on-brand-soft); }
.account-band__title { max-inline-size: 24ch; font: var(--typography-headline-bold) var(--font-family); text-wrap: balance; }
.account-band__subtitle { max-inline-size: 60ch; font: var(--typography-body) var(--font-family); line-height: var(--typography-body-loose-line); text-wrap: balance; }
/* An address or a number under the title keeps its own direction. */
.account-band__subtitle.num { white-space: normal; overflow-wrap: anywhere; }
/* The picture a phone's band may hold: the apps' own, behind the title. From a tablet up the picture stands in the card instead. */
.account-band__picture { display: none; }
@media (max-width: 767px) {
  .account-band--picture { min-block-size: calc(var(--web-hero-height) + var(--account-band-overlap) * 2); }
  .account-band--picture .account-band__picture { display: block; position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; }
  /* The brand colour rising from the foot, so that the title is read on any picture. */
  .account-band--picture::before { inset: 0; inline-size: auto; block-size: auto; border-radius: 0; opacity: 1; background: linear-gradient(to bottom, color-mix(in srgb, var(--sign-in-shade-color) 50%, transparent), transparent 32%), linear-gradient(to bottom, transparent 20%, var(--palette-brand) 56%); }
  .account-band--picture::after { content: none; }
}
@media (min-width: 768px) {
  .account-band { padding-block-start: calc(var(--spacing-xl) * 2); border-radius: 0; }
  .account-band__title { font: var(--typography-hero) var(--font-family); }
  .account-band__subtitle { font: var(--typography-subhead-large) var(--font-family); line-height: 1.5; }
}

/* What follows the band and rises over its foot. */
.account-lift { position: relative; z-index: 1; margin-block-start: calc(var(--account-band-overlap) * -1); }

/* A white card on the ground: what a page's content stands on. */
.account-card { inline-size: 100%; min-inline-size: 0; border-radius: var(--radius-lg); background: var(--palette-background); box-shadow: var(--account-card-shadow); overflow: hidden; }
/* One that stands alone is no wider than a form with a picture beside it. */
.account-card--measure { max-inline-size: var(--account-card-measure); margin-inline: auto; }
.account-card__body { display: flex; flex-direction: column; min-inline-size: 0; padding: var(--spacing-xl) var(--account-card-inset); }
/* A rule between two parts of a card: EmailFormTokens.ruleColor. */
.account-card__rule { block-size: var(--email-form-rule-height); border: 0; margin: 0; background: var(--email-form-rule-color); }
/* The picture beside a form, from a tablet up: the sign-in screen's own, cut to
   its scene. On a phone the band holds it. Never mirrored (SignInTokens). */
.account-card__picture { display: none; }
@media (min-width: 768px) {
  .account-card__body { padding-block: var(--account-card-inset); }
  .account-card--split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .account-card--split .account-card__body { justify-content: center; }
  /* The picture keeps a presence when the panel beside it is short. */
  .account-card--split { min-block-size: calc(var(--web-hero-height) + var(--spacing-xxl)); }
  .account-card__picture { display: block; position: relative; overflow: hidden; background: var(--sign-in-background); }
  .account-card__picture img { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; max-inline-size: none; block-size: calc(100% / var(--sign-in-picture-scene)); object-fit: cover; object-position: center top; }
}

/* The buttons a form ends with. On a phone the button fills the row and what
   skips or cancels stands under it, as in the apps; from a tablet up they stand
   at the far end of the row, the button last. Written button first. */
.account-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--spacing-xs); }
@media (min-width: 768px) {
  .account-actions { flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: var(--spacing-md); }
  .account-actions .maak-button { min-inline-size: calc(var(--web-aside) * 0.6); }
}

/* ==========================================================================
   2. The account screens' own components
   ========================================================================== */

/* LinkLine.kt: a line in two parts, plain words then a link, and the whole line
   is one control. "No account yet? Create one". With no look named it is the
   email form's switch line (EmailFormTokens.switch*). */
.link-line {
  display: block; padding-block: calc((var(--sizing-min-touch-target) - var(--typography-label-tall-line)) / 2);
  border-radius: var(--radius-chip); color: var(--email-form-switch-color); font: var(--email-form-switch-style) var(--font-family);
  text-align: center; cursor: pointer;
}
.link-line__link { color: var(--email-form-switch-link-color); font: var(--email-form-switch-link-style) var(--font-family); transition: color var(--motion-selection-millis) var(--motion-easing); }
.link-line:hover .link-line__link { color: var(--palette-brand-shade); text-decoration: underline; text-underline-offset: 0.25em; }
/* The last line of Sign-in options (SignInTokens.lastLine*): quieter, and its link is not bold. */
.link-line--sign-in { color: var(--sign-in-last-line-color); font: var(--sign-in-last-line-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.link-line--sign-in .link-line__link { color: var(--sign-in-last-line-link-color); font: inherit; }
.link-line[aria-disabled="true"] { opacity: var(--button-disabled-opacity); cursor: not-allowed; pointer-events: none; }

/* What the server answered to a whole form, in words (SignInState.message,
   EmailFormState.message, CompleteProfileState.message): the error colour. */
.form-message { color: var(--email-form-message-color); font: var(--email-form-message-style) var(--font-family); line-height: var(--typography-label-tall-line); }
/* Under a field, it starts where the field's own error starts. */
.form-message--inset { padding-inline-start: var(--form-field-error-leading-inset); }
.form-message--center { text-align: center; }
/* A confirmation, not a failure (EmailFormTokens.noticeColor, MoreTokens.messageColor). */
.form-message--notice { color: var(--email-form-notice-color); }

/* "Continue with email" (SignInTokens.emailButton): as tall and as round as
   the provider buttons, with their label style. A look of .maak-button. */
.maak-button--email { --_height: var(--sign-in-email-button-height); --_radius: var(--sign-in-email-button-radius); --_style: var(--sign-in-email-button-label-style); padding-inline: var(--sign-in-email-button-horizontal-padding); }

/* A sentence that cannot be ticked while the form is busy. */
.declaration:has(:disabled) { opacity: var(--button-disabled-opacity); cursor: not-allowed; }

/* A row of More that takes no press while signing out or deleting is under way (MoreState.isBusy). */
.action-row:disabled, .action-row[aria-disabled="true"] { opacity: var(--button-disabled-opacity); cursor: not-allowed; pointer-events: none; }

/* A provider button that is busy or cannot be pressed: the apps disable every control and draw no spinner. */
.provider-button:disabled, .provider-button[aria-disabled="true"] { opacity: var(--button-disabled-opacity); cursor: not-allowed; pointer-events: none; }

/* The customer's picture beside the fields from a tablet up; over them, in the middle, on a phone (CompleteProfileScreen.kt). */
.profile-form { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--complete-profile-picture-to-fields); }
.profile-form__fields { inline-size: 100%; min-inline-size: 0; }
@media (min-width: 768px) {
  .profile-form { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; align-items: start; column-gap: calc(var(--spacing-lg) * 2); }
}

/* What is written left to right in every language (an address, a password:
   the wiring says dir="ltr" on the field once it holds something) still starts
   at the field's leading edge, the page's own, where its placeholder stood. As
   FormField.kt on Android: left to right, at the leading edge. */
.form-field__input[dir="ltr"] { text-align: var(--inline-start); }

/* A phone number in a .form-field: its calling code and its digits are one
   run, written left to right in both directions. Empty, the placeholder stands
   alone and reads the way the page does. The run is a <label>, so a press
   anywhere on it reaches the digits. */
.form-field__number { flex: 1 1 0; min-inline-size: 0; align-self: stretch; display: flex; align-items: center; gap: var(--form-field-prefix-to-text); cursor: text; }
.form-field__number:not(:has(:placeholder-shown)) { direction: ltr; }
/* A browser reads a field for a phone number left to right whatever the page
   says: its own rule for that kind of field. Empty, the field reads as the page
   does, so that its placeholder starts where the other fields' do. */
.form-field__number .form-field__input:placeholder-shown { direction: inherit; }
/* Filled, the run stands at the field's leading edge, the page's own, as on
   Android: the digits take the room they need and no more, so that the code
   stays beside them. A browser that cannot size a field to what it holds keeps
   the digits filling the run, which then starts at the left. */
@supports (field-sizing: content) {
  .form-field__number:not(:has(:placeholder-shown)) { justify-content: var(--inline-start); }
  .form-field__number .form-field__input:not(:placeholder-shown) { flex: 0 1 auto; field-sizing: content; }
}
/* A list nothing was chosen from yet reads as a placeholder does. */
select.form-field__input:has(option[value=""]:checked) { color: color-mix(in srgb, var(--form-field-text-color) calc(var(--form-field-placeholder-opacity) * 100%), transparent); }

/* ResultCard.kt: how a flow ended, or that it is still going. A picture, a
   title, "Please wait...", where the flow goes next. It is the card itself,
   and stands in a .scrim: at the foot of a phone's window, in the middle from a
   tablet up. With no button it waits and leaves by itself (--waiting), which is
   the only form these pages draw. */
.result-card { position: relative; display: flex; flex-direction: column; align-items: center; inline-size: 100%; max-inline-size: var(--web-sheet-width); min-block-size: var(--result-card-height); padding: var(--result-card-picture-top-with-button) var(--result-card-text-inset) var(--result-card-button-inset); border-radius: var(--result-card-radius); background: var(--result-card-fill); box-shadow: var(--elevation-floating); text-align: center; animation: sheet-in var(--result-card-open-millis) var(--motion-easing) both; }
.result-card--waiting { padding-block: var(--result-card-picture-top); }
.result-card__picture { inline-size: var(--result-card-picture-size); block-size: var(--result-card-picture-size); }
.result-card__title { margin-block-start: var(--result-card-picture-to-title); color: var(--result-card-title-color); font: var(--result-card-title-style) var(--font-family); }
.result-card__wait { margin-block-start: var(--result-card-title-to-wait-with-button); color: var(--result-card-wait-color); font: var(--result-card-wait-style) var(--font-family); }
.result-card__body { margin-block-start: var(--result-card-wait-to-body-with-button); color: var(--result-card-body-color); font: var(--result-card-body-style) var(--font-family); line-height: var(--typography-label-tall-line); }
.result-card--waiting .result-card__wait { margin-block-start: var(--result-card-title-to-wait); }
.result-card--waiting .result-card__body { margin-block-start: var(--result-card-wait-to-body); }

/* The customer's picture (CompleteProfileScreen.kt's Picture): a round square,
   and a pencil centred on its leading edge at half its height. The picture and
   the pencil do the same thing, as in the apps: the pencil is the one control,
   and what it takes a press on reaches over the whole picture. */
.profile-picture { position: relative; flex: none; inline-size: var(--complete-profile-picture-size); block-size: var(--complete-profile-picture-size); }
.profile-picture__image { inline-size: 100%; block-size: 100%; border-radius: var(--complete-profile-picture-radius); object-fit: cover; }
.profile-picture__edit {
  position: absolute; inset-block-start: calc(50% - var(--complete-profile-pencil-touch-target) / 2); inset-inline-start: calc(var(--complete-profile-pencil-touch-target) / -2);
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: var(--complete-profile-pencil-touch-target); block-size: var(--complete-profile-pencil-touch-target); border-radius: 50%; cursor: pointer;
  transition: opacity var(--motion-selection-millis) var(--motion-easing);
}
.profile-picture__edit::after {
  content: ""; position: absolute;
  inset-block-start: calc((var(--complete-profile-pencil-touch-target) - var(--complete-profile-picture-size)) / 2); inset-inline-start: calc(var(--complete-profile-pencil-touch-target) / 2);
  inline-size: var(--complete-profile-picture-size); block-size: var(--complete-profile-picture-size); border-radius: var(--complete-profile-picture-radius);
}
.profile-picture__edit img { inline-size: var(--complete-profile-pencil-size); block-size: var(--complete-profile-pencil-size); }
.profile-picture__edit:hover { opacity: var(--button-pressed-opacity); }
.profile-picture__edit:disabled { opacity: var(--button-disabled-opacity); cursor: not-allowed; }

/* CountrySheet.kt: a sheet that lists countries to choose one from. Its
   container is the compatible devices sheet's (DevicesSheetTokens): a title, a
   close button, a search field; its rows are CountrySheetTokens: a flag, the
   name, the calling code. It is a .sheet, and takes that share of the window's height. */
.country-sheet { display: flex; flex-direction: column; block-size: calc(var(--devices-sheet-height-fraction) * 100%); }
.country-sheet__title { padding: var(--devices-sheet-title-top) var(--sizing-min-touch-target) 0; color: var(--devices-sheet-title-color); font: var(--devices-sheet-title-style) var(--font-family); text-align: center; }
.country-sheet .sheet__close { color: var(--devices-sheet-close-tint); }
.country-sheet__search { flex: none; margin: var(--spacing-lg) var(--devices-sheet-search-side-inset) 0; }
.country-sheet__list { flex: 1 1 auto; min-block-size: 0; margin-block-start: var(--devices-sheet-search-to-results); padding-block-end: var(--spacing-md); overflow-y: auto; }
.country-sheet__row {
  display: flex; align-items: center; gap: var(--country-sheet-flag-to-name);
  inline-size: 100%; min-block-size: var(--country-sheet-row-height); padding-inline: var(--country-sheet-flag-leading-inset) var(--country-sheet-code-trailing-inset);
  text-align: start; cursor: pointer; transition: background-color var(--motion-selection-millis) var(--motion-easing);
}
.country-sheet__row .flag { --flag-size: var(--country-sheet-flag-size); }
.country-sheet__row:hover { background: var(--palette-brand-wash); }
.country-sheet__name { flex: 1 1 0; min-inline-size: 0; color: var(--country-sheet-name-color); font: var(--country-sheet-name-style) var(--font-family); }
.country-sheet__code { color: var(--country-sheet-code-color); font: var(--country-sheet-code-style) var(--font-family); }
/* While the list is read: empty shapes, as in the devices sheet. */
.country-sheet__placeholders { display: flex; flex-direction: column; gap: var(--devices-sheet-placeholder-gap); padding: var(--devices-sheet-search-to-results) var(--devices-sheet-list-inset) var(--spacing-xl); }
.placeholder--sheet-row { block-size: var(--devices-sheet-placeholder-height); border-radius: var(--devices-sheet-placeholder-radius); background: var(--devices-sheet-placeholder-fill); }

/* While the profile is read: the shape of a field, and of the picture. */
.placeholder--form-field { block-size: var(--form-field-height); border-radius: var(--form-field-radius); }
.placeholder--profile-picture { inline-size: var(--complete-profile-picture-size); block-size: var(--complete-profile-picture-size); border-radius: var(--complete-profile-picture-radius); }

/* ==========================================================================
   3. The states of a page, standing still. Not part of the website.
   ========================================================================== */

/* Under a page's own content: every other state it has, each in a frame with a
   line that says when it is drawn. The wiring draws one state at a time. */
.account-states { margin-block-start: var(--web-section-gap); padding: var(--spacing-lg); border: 1px dashed var(--palette-placeholder); border-radius: var(--radius-card); }
.account-states__title { color: var(--palette-text-emphasis); font: var(--typography-title-bold) var(--font-family); }
.account-states__note { max-inline-size: 80ch; margin-block-start: var(--spacing-xs); color: var(--palette-text-secondary); font: var(--typography-label-tall) var(--font-family); }
.account-states__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--web-aside) - var(--spacing-xxl))), 1fr)); column-gap: var(--web-grid-gap); margin-block-start: var(--spacing-xs); }
/* A state takes two rows of the grid, its line and its frame, so that the frames of a row start level. */
.account-state { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--spacing-xs); align-items: start; min-inline-size: 0; margin: var(--spacing-md) 0 0; }
.account-state__label { color: var(--palette-text-secondary); font: var(--typography-caption-loose) var(--font-family); }
.account-state__label b { color: var(--palette-text-emphasis); font-weight: var(--font-weights-semi-bold); }
/* A piece of the page in that state: a card's body. */
.account-state__frame { display: flex; flex-direction: column; min-inline-size: 0; padding: var(--spacing-lg); border-radius: var(--radius-card); background: var(--palette-background); box-shadow: var(--account-card-shadow); }
/* A sheet or a dialog is fixed to the window; here it stays in its frame. */
.account-state__stage { position: relative; min-block-size: var(--account-state-stage-height); overflow: hidden; border-radius: var(--radius-card); background: var(--palette-surface); }
.account-state__stage--short { min-block-size: calc(var(--account-state-stage-height) * 0.55); }
.account-state__stage .scrim { position: absolute; animation: none; }
.account-state__stage .sheet, .account-state__stage .confirm-dialog, .account-state__stage .result-card { animation: none; }
@media (min-width: 768px) {
  .account-states { padding: var(--spacing-xl); }
}

/* ==========================================================================
   The website's sign-in (Figma 2573:4788): SignInScreen.kt. The ways in at
   the reading start, the traveller's picture with three chips at the end.
   ========================================================================== */

body.sign-in-page { background: var(--palette-background); }
.sign-in { display: flex; flex-direction: column; gap: var(--spacing-xl); padding-block: var(--spacing-lg) calc(var(--spacing-xxl) * 1.5); }
.sign-in__form { display: flex; flex-direction: column; gap: var(--spacing-md); min-inline-size: 0; }
.sign-in__bar { display: flex; align-items: center; gap: var(--spacing-sm); }
.sign-in__back { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--palette-surface); color: var(--palette-navy); }
.sign-in__title { color: var(--palette-navy); font: var(--typography-site-hero) var(--font-family); }
@media (min-width: 1100px) { .sign-in__title { font-size: 52px; line-height: 1.3; } }
.sign-in__accent { display: block; color: var(--palette-brand); }
.sign-in__subtitle { color: var(--palette-text-emphasis); font: var(--typography-site-body) var(--font-family); line-height: 1.6; }
.sign-in__email { min-block-size: 56px; gap: var(--spacing-xs); }
.sign-in__providers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); }
.sign-in__provider { inline-size: 100%; min-block-size: 52px; border-radius: var(--radius-md); }
.sign-in__art { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.sign-in__picture { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sign-in__chip {
  position: absolute; display: flex; align-items: center; gap: var(--spacing-xs); max-inline-size: 70%;
  padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--palette-background) 90%, transparent); box-shadow: var(--shadow-card-lift);
}
.sign-in__chip .icon-tile { inline-size: 36px; block-size: 36px; }
.sign-in__chip .icon-tile .icon { --icon-size: 18px; }
.sign-in__chip-words { display: flex; flex-direction: column; min-inline-size: 0; }
.sign-in__chip-title { color: var(--palette-brand); font: var(--typography-label-strong) var(--font-family); }
.sign-in__chip-title--1 { color: var(--palette-violet); }
.sign-in__chip-title--3 { color: var(--palette-apricot); }
.sign-in__chip-line { color: var(--palette-text-secondary); font: var(--typography-caption) var(--font-family); }
.sign-in__chip--1 { inset-block-start: 10%; inset-inline-end: 6%; }
.sign-in__chip--2 { inset-block-start: 50%; inset-inline-start: 6%; }
.sign-in__chip--3 { inset-block-end: 6%; inset-inline-end: 10%; }

@media (min-width: 768px) {
  .sign-in__providers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .sign-in { flex-direction: row; align-items: stretch; gap: calc(var(--spacing-xxl) * 1.5); padding-block: var(--spacing-xxl); }
  .sign-in__form { flex: 1 1 42%; justify-content: center; }
  .sign-in__art { flex: 1 1 58%; min-block-size: 580px; }
  .sign-in__picture { block-size: 100%; aspect-ratio: auto; }
}