/* Settings, measured from HEY's "Accounts & Settings" at 1512px: a 704px
   rounded sheet, then groups of 54px rows on a faint grey, with the icon in
   a 59.4px column and hairlines that start at the text. */

.sheet.settings-sheet { width: min(704px, 100%); min-height: 0; padding: 55px; border-radius: 29.7px; }

.settings-sheet__title { margin: 0 0 24.75px; font-size: 44px; line-height: 44px; font-weight: 700; text-align: center; }

.settings-group { display: flex; flex-direction: column; margin: 0 0 29.7px; }
.settings-group:last-child { margin-bottom: 0; }

.settings-group__item { position: relative; background: rgb(var(--shade-rgb) / 0.03); }
.settings-group__item:first-child { border-radius: 8.8px 8.8px 0 0; }
.settings-group__item:last-child { border-radius: 0 0 8.8px 8.8px; }
.settings-group__item:only-child { border-radius: 8.8px; }
.settings-group__item + .settings-group__item::before { content: ""; position: absolute; top: 0; left: 59.4px; right: 0; height: 1px; background: rgb(var(--shade-rgb) / 0.05); }

.settings-group__form { margin: 0; }

.settings-group__action {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 53.856px;
  padding: 13.068px 13.068px 13.068px 59.4px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: var(--color-ink);
  font: 500 19.8px/27.72px var(--font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.settings-group__action:hover { background: rgb(var(--shade-rgb) / 0.03); }
.settings-group__action:focus { outline: none; }
.settings-group__action:focus-visible { box-shadow: inset 0 0 0 2px #a4d2ff; }

.settings-group__icon { position: absolute; left: 18.56px; top: 50%; width: 22.275px; height: 22.275px; translate: 0 -50%; color: var(--color-ink); }
/* The reference's glyphs fill their 22.3px box (20-22.5px of ink); ours sit inside
   a 24-unit grid with room around them, so they're drawn up to match. */
.settings-group__icon { scale: 1.2; }
/* Measured 2026-10-18: these drew 5-16% short of the reference's */
.settings-group__icon[data-icon="lock"] { scale: 1.2; }
.settings-group__icon[data-icon="person"] { scale: 1.26; }
.settings-group__icon[data-icon="download"] { scale: 1.33; }
.settings-group__icon[data-icon="add"] { scale: 1.39; }
/* The reference's plane flies up and to the right, 45° from ours, corner to corner
   across its box (26.2px nose to tail, 24.8px wingspan) */
.settings-group__icon[data-icon="airplane"] { rotate: 45deg; scale: 1.43; }

.settings-group__action--account { gap: 10.9px; min-height: 82px; padding-left: 13.068px; cursor: default; }
.settings-group__action--account:hover { background: none; }
.settings-group__action--account .avatar { --avatar-size: 52px; flex: none; font-size: 19px; }

.settings-account { min-width: 0; }
.settings-account__name { margin: 0; font-size: 19.8px; line-height: 27.72px; font-weight: 700; }
.settings-account__address { margin: 0; overflow: hidden; font-size: 19.8px; line-height: 27.72px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }


/* Settings pages, measured from HEY's at 1512px: a "← Accounts & Settings"
   pill, the title on the page, then 704px sheets 39.6px apart. */

.settings-page { display: flex; flex-direction: column; align-items: center; }
.settings-page__back { margin: 0 0 24.7px; }
.settings-page__title { margin: 0 0 29.5px; font-size: 44px; line-height: 44px; font-weight: 700; text-align: center; }
.settings-page__intro { max-width: 704px; margin: -21.4px 0 49.7px; font-size: 19.8px; line-height: 27.72px; text-align: center; }

.sheet.settings-panel { width: min(704px, 100%); min-height: 0; margin: 0 0 39.6px; padding: 55px; border-radius: 29.7px; }
.sheet.settings-panel--thin { padding: 39.6px; }
.settings-panel__title { margin: 0; font-size: 22px; line-height: 22px; font-weight: 700; }

/* A switch beside its label, as HEY's "notifiable" rows */
.settings-switch-row { display: flex; align-items: center; gap: 19.8px; padding: 14.85px 0; }
.settings-panel__title + .settings-switch-row { padding-top: 6.2px; }
.settings-switch-row__content { flex: 1; min-width: 0; }
.settings-switch-row__label { margin: 0; font-size: 22px; line-height: 22px; font-weight: 400; }
.settings-switch-row__text { margin: 0; font-size: 19.8px; line-height: 27.72px; }
.settings-switch-row__note { margin: 0; color: var(--color-muted); font-size: 15.4px; line-height: 21.56px; }

.settings-zone-form { display: flex; flex-direction: column; gap: 6.6px; margin: 13.2px 0 0 74.8px; }
.settings-zone-form__label { font-size: 15.4px; font-weight: 600; }
.settings-zone-form__select { max-width: 100%; padding: 8.8px 11px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 6.6px; background: var(--color-sheet); color: var(--color-ink); font-size: 17.6px; }

/* HEY's switch: 55×33, a 26.4px white knob, grey off and green on */
.switch-form { flex: none; margin: 0; }
.switch-checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.switch { display: block; cursor: pointer; }
.switch__container { position: relative; display: flex; align-items: center; width: 55px; height: 33px; border-radius: 33px; background: rgb(var(--ink-rgb) / 0.15); transition: background-color 0.2s; }
.switch__button { width: 26.4px; height: 26.4px; border-radius: 100%; background: var(--color-sheet); transform: translateX(4.4px); transition: transform 0.2s; }
.switch-checkbox:checked + .switch .switch__container { background: rgb(41 152 80); }
.switch-checkbox:checked + .switch .switch__button { transform: translateX(24.2px); }
.switch-checkbox:focus-visible + .switch .switch__button { box-shadow: 0 0 0 2px rgb(var(--ink-rgb) / 0.3); }

/* "OFF"/"ON" to the left of a labelled switch (Autoresponder) */
.switch--labelled { display: flex; align-items: center; gap: 11px; }
.switch--labelled::before { content: "Off"; width: 3ch; font-size: 17.6px; text-align: right; text-transform: uppercase; }
.switch-checkbox:checked + .switch--labelled::before { content: "On"; }


/* Away Autoresponder, measured from HEY's at 1512px */
.settings-page__title.autoresponder__title { margin-bottom: 13.8px; }
.autoresponder__intro { max-width: 704px; margin: 0 0 49.7px; font-size: 19.8px; line-height: 27.72px; text-align: center; }

.autoresponder__header { display: flex; align-items: center; justify-content: space-between; gap: 19.8px; margin-bottom: 24.75px; }
.autoresponder__address { min-width: 0; margin: 0; overflow: hidden; font-size: 30.8px; line-height: 40.04px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

.autoresponder__message {
  padding: 19.8px 29.7px;
  border-radius: 19.8px;
  background: linear-gradient(135deg, rgb(255 245 202) 0%, rgb(255 229 218) 100%);
  font-size: 19.8px;
  line-height: 27.72px;
}

.autoresponder__edit {
  display: inline-flex;
  align-items: center;
  height: 41.6px;
  margin-top: 24.7px;
  padding: 5.94px 15.84px;
  border: 1px solid var(--color-ink);
  border-radius: 33px;
  color: var(--color-ink);
  font-size: 19.8px;
  line-height: 27.72px;
  font-weight: 500;
  text-decoration: none;
}

.autoresponder__edit:hover { background: var(--color-ink); color: #fff; }

.autoresponder-form__editor { min-height: 257.4px; padding: 11px 0; border: 0; border-radius: 6.6px; font-size: 19.8px; line-height: 27.72px; outline: none; }
.autoresponder-form trix-toolbar[hidden] { display: none; }
.autoresponder-form__buttons { display: flex; align-items: center; gap: 9.8px; padding: 11px 0; }

.autoresponder-form__save, .autoresponder-form__cancel {
  height: 41.6px;
  padding: 5.94px 15.84px;
  border: 1px solid #3072dd;
  border-radius: 33px;
  font: 500 19.8px/27.72px var(--font);
  text-decoration: none;
  cursor: pointer;
}

.autoresponder-form__save { background: #3072dd; color: #fff; }
.autoresponder-form__cancel { display: inline-flex; align-items: center; background: none; color: #3072dd; }

.autoresponder__faq { width: min(704px, 100%); padding: 0 55px; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.64px; }
.autoresponder__faq dl { margin: 0; }
.autoresponder__faq dt { font-weight: 700; }
.autoresponder__faq dd { margin: 0 0 22px; }


/* Login & Security, measured from HEY's: uppercase group titles over rows */
.settings-titled-group + .settings-titled-group { margin-top: 29.7px; }
.settings-titled-group__title { margin: 0 0 8.66px 11.4px; font-size: 17.325px; line-height: 20.79px; font-weight: 600; text-transform: uppercase; }

/* Rows that hold more than a link: a two-line label and a button or badge */
.settings-row { gap: 13.2px; cursor: default; }
.settings-row:hover { background: none; }
.settings-row__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.settings-row__note { color: var(--color-muted); font-size: 15.4px; line-height: 21.56px; font-weight: 400; }
.settings-group__action .settings-row__sub { display: block; font-size: 16.5px; line-height: 23.1px; font-weight: 500; }
.settings-row__badge { flex: none; color: rgb(41 152 80); font-size: 15.4px; font-weight: 600; }
.settings-row__time { flex: none; color: var(--color-muted); font-size: 15.4px; font-weight: 400; }
.settings-row__button { flex: none; text-decoration: none; padding: 4.62px 12.32px; border: 1px solid rgb(var(--ink-rgb) / 0.2); border-radius: 33px; background: var(--color-sheet); color: var(--color-ink); font: 500 15.4px/21.56px var(--font); cursor: pointer; }
.settings-row__button:hover { border-color: rgb(201 36 0); color: rgb(201 36 0); }
.settings-row__button--wide { padding: 5.94px 15.84px; font-size: 17.6px; }
.settings-sessions__others { margin: 24.75px 0 0; text-align: center; }
.settings-empty { margin: 0; color: var(--color-muted); text-align: center; }

.settings-form-page__error { margin: 0 0 19.8px; padding: 11px 15.4px; border-radius: 8.8px; background: rgb(201 36 0 / 0.08); color: rgb(201 36 0); font-size: 17.6px; }
.settings-form-page__intro { margin: 0 0 24.8px; font-size: 17.6px; line-height: 24.64px; }
.settings-form-page__note { margin: 13.2px 0 0; color: var(--color-muted); font-size: 15.4px; text-align: center; }

/* Appearance: the chosen row is blue, with a check at the right */
.settings-page .settings-sheet__title { margin-bottom: 29.5px; }
.settings-group__action--selected, .settings-group__action--selected .settings-group__icon { color: #3072dd; }
.settings-group__action--selected { padding-right: 39.6px; }
.settings-group__selected { position: absolute; right: 13.068px; top: 50%; width: 19.8px; height: 19.8px; translate: 0 -50%; color: #3072dd; }

/* Two-factor: HEY's two-line row, the setup QR and the recovery codes */
.settings-group__action--two-line { min-height: 76.9px; }
.settings-group__action .settings-row__sub { display: block; }
.two-factor-setup__qr { width: 200px; height: 200px; margin: 0 auto 13.2px; padding: 8px; border-radius: 11px; background: #fff; }
.two-factor-setup__qr svg { display: block; width: 100%; height: 100%; }
.two-factor-setup__secret { margin: 0 0 24.8px; color: var(--color-muted); font-size: 15.4px; text-align: center; }
.two-factor-setup__secret code { color: var(--color-ink); font-size: 15.4px; letter-spacing: 0.04em; }
.settings-form-page__danger { background: rgb(201 36 0); border-color: rgb(201 36 0); color: #fff; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8.8px 22px; margin: 0 0 24.8px; padding: 0 0 0 22px; font-size: 17.6px; }
.recovery-codes__form { margin: 0; }

/* The account card links to Manage account, with HEY's round next arrow */
.settings-group__action--account { cursor: pointer; padding-right: 13.068px; }
.settings-group__action--account:hover { background: rgb(var(--shade-rgb) / 0.03); }
.settings-account { flex: 1; }
.settings-account__manage { display: grid; flex: none; place-items: center; width: 30.8px; height: 30.8px; border-radius: 46.2px; color: var(--color-ink); }
.settings-account__manage svg { width: 21.7px; height: 21.7px; } /* the chevron drawn 17px tall, as the reference's */

/* Manage account: the big centred avatar, name and address */
.manage-account__header { display: flex; flex-direction: column; align-items: center; margin: 0 0 19.8px; text-align: center; }
.manage-account__header .avatar { --avatar-size: 79.2px; font-size: 29px; }
.manage-account__name { margin: 0; font-size: 30.8px; line-height: 30.8px; font-weight: 700; }
.manage-account__address { margin: 0; font-size: 19.8px; line-height: 27.72px; }
.manage-account__group:empty { display: none; }

/* Link Another Account: three hands, then an FAQ told as a chat */
.account-link__header { margin: 0 0 24.75px; text-align: center; }
.account-link__hands { display: flex; justify-content: center; gap: 4.8px; margin: 0 0 6.7px; }
.account-link__hand { width: 50px; height: 50px; }
.account-link__hand--purple { color: rgb(85 34 250); }
.account-link__hand--blue { color: rgb(48 114 221); }
.account-link__hand--yellow { color: rgb(230 180 0); }
.account-link__title { margin: 0 0 13.8px; font-size: 44px; line-height: 44px; font-weight: 700; }
.account-link__intro { margin: 0; font-size: 19.8px; line-height: 27.72px; }
.faq { display: flex; flex-direction: column; font-size: 17.6px; line-height: 22.88px; }
.faq__question { align-self: flex-start; width: 80%; margin: 22px 0 5.5px; padding: 17.6px 26.4px; border-radius: 0 17.6px 17.6px; background: linear-gradient(135deg, rgb(48 114 221 / 0.15) 0%, rgb(48 114 221 / 0.05) 100%); font-size: 17.6px; line-height: 22.88px; font-weight: 700; }
.faq__question:first-child { margin-top: 0; }
.faq__answer { align-self: flex-end; width: 80%; margin: 0; padding: 22px 26.4px; border-radius: 17.6px 0 17.6px 17.6px; background: linear-gradient(135deg, rgb(255 214 10 / 0.35) 0%, rgb(255 214 10 / 0.15) 100%); }
.faq__answer p { margin: 0; }
.faq__answer p + p { margin-top: 22.88px; }
.account-link__cta { margin: 39.6px 0 0; text-align: center; }
.account-link__button { display: inline-block; padding: 5.94px 15.84px; border: 1px solid rgb(48 114 221); border-radius: 33px; background: rgb(48 114 221); color: #fff; font-size: 19.8px; line-height: 27.72px; font-weight: 500; text-decoration: none; }

/* Edit Profile: the photo, then the name and name tag */
.profile__title { width: min(704px, 100%); margin: 0 0 27.95px; font-size: 44px; line-height: 44px; font-weight: 700; text-align: center; }
.profile__address { display: block; }
.profile__sheet { display: flex; flex-direction: column; align-items: center; }
.profile__sheet > .avatar { --avatar-size: 79.2px; font-size: 29px; }
.profile__photo-form { margin: 12.4px 0 0; }
.profile__upload { display: inline-block; padding: 5.28px 14.08px; border: 1px solid var(--popup-line); border-radius: 33px; color: var(--color-ink); font-size: 17.6px; line-height: 24.64px; font-weight: 500; cursor: pointer; }
.profile__upload-field { display: none; }
.profile__note { margin: 12.4px 0 15.4px; color: rgb(var(--ink-rgb) / 0.66); font-size: 15.4px; line-height: 21.56px; text-align: center; }
.profile__form { align-self: stretch; margin: 0; padding: 0 2px; }
.profile__label { display: block; margin: 0 0 6.2px; font-weight: 700; }
.profile__input { display: block; box-sizing: border-box; width: 100%; height: 49.5px; padding: 9.9px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 6.6px; background: var(--color-sheet); color: var(--color-ink); font: inherit; }
.profile__input:focus { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.profile__heading { margin: 24.7px 0 0; font-size: 19.8px; line-height: 19.8px; font-weight: 700; }
.profile__hint { margin: 4.95px 0 9.9px; color: rgb(var(--ink-rgb) / 0.66); font-size: 15.4px; line-height: 21.56px; }
.profile__switch { display: flex; align-items: center; gap: 12.4px; margin: 0 0 9.9px; }
.profile__name-tag { display: none; margin: 0 0 9.9px; }
.switch-checkbox:checked ~ .profile__name-tag { display: block; }
.profile__name-tag-editor { min-height: 88px; padding: 9.9px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 6.6px; font-size: 17.6px; line-height: 24.64px; }
.profile__name-tag-editor:focus { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.profile__actions { margin: 24.85px 0 0; text-align: center; }
.profile__save { padding: 5.94px 15.84px; border: 1px solid var(--color-accent); border-radius: 33px; background: var(--color-accent); color: #fff; font: 500 19.8px/27.72px var(--font); cursor: pointer; }

/* Recycling Center: the symbol and pitch, The Feed's sheet, contacts and
   domains, then the FAQ */
.recycling-center__symbol { width: 90px; height: 90px; margin: 0 0 19.1px; color: rgb(41 152 80); }
.recycling-center__title { margin-bottom: 13.8px; }
.recycling-center__intro { width: min(704px, 100%); margin: 0 0 19.8px; font-size: 19.8px; line-height: 27.72px; text-align: center; }
.recycling-center__sheet + .recycling-center__sheet { margin-top: 39.6px; }
.recycling-center__row { display: flex; align-items: flex-start; gap: 13.1px; padding: 13.1px 0; }
.recycling-center__contact { box-sizing: border-box; min-height: 71px; padding: 9.9px 0; }
.recycling-center__row .avatar { --avatar-size: 44.5px; flex: none; font-size: 16px; }
.recycling-center__feed-icon, .recycling-center__domain-icon { display: grid; flex: none; place-items: center; width: 44.5px; height: 44.5px; border-radius: 100%; background: rgb(48 114 221); color: #fff; font-weight: 700; text-decoration: none; }
.recycling-center__feed-icon svg { width: 27.6px; height: 27.6px; }
.recycling-center__who { flex: 1; min-width: 0; }
.recycling-center__name { margin: 0; overflow: hidden; font-size: 19.8px; line-height: 19.8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.recycling-center__meta { margin: 2.1px 0 0; overflow: hidden; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 19.36px; text-overflow: ellipsis; white-space: nowrap; }
.recycling-center__option { position: relative; flex: none; }
.recycling-center__pill { position: relative; display: flex; align-items: center; padding: 5.28px 14.08px 5.28px 38.72px; border: 1px solid var(--color-ink); border-radius: 33px; font-size: 17.6px; line-height: 24.64px; font-weight: 500; list-style: none; cursor: pointer; white-space: nowrap; }
.recycling-center__pill::-webkit-details-marker { display: none; }
.recycling-center__pill-icon { position: absolute; left: 14.08px; width: 17.6px; height: 17.6px; }
.recycling-center__pill--set { border-color: rgb(41 152 80); color: rgb(41 152 80); }
.recycling-center__sheet:first-of-type .recycling-center__pill { padding: 5.94px 15.84px 5.94px 43.56px; font-size: 19.8px; line-height: 27.72px; }
.recycling-center__sheet:first-of-type .recycling-center__pill-icon { left: 15.84px; width: 19.8px; height: 19.8px; }
.recycling-center__menu { left: auto; right: 0; width: 330px; translate: none; }
.recycling-center__menu-note { margin: 0 8.9px; color: var(--popup-muted); font-size: 12.83px; line-height: 15.4px; }
.recycling-center__heading { margin: 0 0 18.2px; font-size: 22px; line-height: 22px; font-weight: 700; }
.recycling-center__search { margin: 0; padding: 2px; }
.recycling-center__input { display: block; box-sizing: border-box; width: 100%; height: 44.2px; padding: 9.9px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 6.6px; background: var(--color-sheet); color: var(--color-ink); font: 17.6px/24.64px var(--font); }
.recycling-center__input:focus { outline: none; box-shadow: 0 0 0 2px #a4d2ff; }
.recycling-center__list-label { margin: 17.6px 0 14.2px; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.6px; }
.recycling-center__faq { width: min(704px, 100%); margin: 39.6px 0 0; padding: 0 55px; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.64px; }
.recycling-center__faq dl { margin: 0; }
.recycling-center__faq dt { font-weight: 700; }
.recycling-center__faq dd { margin: 0 0 22px; }
.recycling-center__faq a { color: inherit; }

/* HEY's mint "+" pill for adding things on settings pages */
.settings-new-pill { position: relative; display: inline-block; padding: 5.94px 15.84px 5.94px 43.56px; border: 1px solid var(--color-accent); border-radius: 33px; background: var(--color-accent); color: #fff; font-size: 19.8px; line-height: 27.72px; font-weight: 500; text-decoration: none; }
.settings-new-pill__icon { position: absolute; left: 14.85px; top: 50%; width: 19.8px; height: 19.8px; translate: 0 -50%; }

/* HEY's blank slate on settings pages: the blobs, the card 124px down */
.settings-blank { box-sizing: border-box; width: min(1078px, 100%); align-items: flex-start; padding-top: 124.2px; background-color: transparent; }
.settings-blank .feed-blank__card { text-align: left; }

/* Contact Groups */
.contact-groups__title { margin-bottom: 13.8px; }
.contact-groups__intro { margin: 0 0 12.4px; font-size: 19.8px; line-height: 27.72px; text-align: center; }
/* Each group in its own card, measured in the reference */
.contact-groups__list { width: min(932.8px, 100%); margin: 37.125px 0 0; }
.contact-group-card { box-sizing: border-box; margin: 0 0 37.125px; padding: 55px; border-radius: 29.7px; background: var(--color-sheet); box-shadow: rgb(var(--warm-rgb) / 0.5) 0 0 33px 0; }
.contact-group-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 13.2px; margin: -12.375px 0 6.1875px; }
.contact-group-card__name { min-width: 0; margin: 0; font-size: 30.8px; line-height: 40.04px; font-weight: 700; overflow-wrap: anywhere; }
.contact-group-card__edit { flex: none; margin-top: 7.24px; padding: 4.62px 12.32px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 33px; color: rgb(var(--ink-rgb) / 0.66); font-size: 15.4px; line-height: 21.56px; font-weight: 500; text-decoration: none; }
.contact-group-card__people { display: flex; flex-wrap: wrap; }
.contact-group-card__person { display: flex; align-items: center; margin: 6.1875px 12.375px 0 0; font-size: 19.8px; line-height: 27.72px; }
.contact-group-card__person .avatar { --avatar-size: 29.7px; margin-right: 6.18px; font-size: 11px; }
.extensions__hint.contact-groups__hint { width: min(1042.8px, 100%); margin: 2.47px 0 39.6px; padding: 0 55px; font-size: 19.8px; line-height: 27.72px; text-align: center; text-wrap: balance; }
.contact-group-form__title { margin-bottom: 27.5px; }
.contact-group-form { margin: 0; }
.contact-group-form__label { display: block; margin: 0 0 37.1px; }
.contact-group-form__heading { display: block; margin: 0; font-size: 22px; line-height: 28.6px; font-weight: 700; }
.contact-group-form__hint { display: block; font-size: 19.8px; line-height: 27.72px; }
.contact-group-form__name { margin-top: 12.4px; }
.contact-group-form__people { margin: 12.4px 0 0; padding: 9.9px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 6.6px; }
.contact-group-form__people .recipients { min-height: 48px; margin: 0; }
.contact-group-form__people .recipient-chip { box-sizing: border-box; height: 48px; }
.contact-group-form__people .recipients__input { height: 44px; }
.contact-group-form__people:focus-within { box-shadow: 0 0 0 2px #a4d2ff; }
.contact-group-form__actions { margin: 24.8px 0 0; }
.contact-group-form__sheet { margin-bottom: 39.6px; }
.contact-group-form__delete-form { margin: 0; text-align: center; }
.contact-group-form__delete { padding: 0; border: 0; background: none; color: rgb(201 36 0); font: 400 19.8px/27.72px var(--font); text-decoration: underline; cursor: pointer; }
.contact-group-form__delete:hover { text-decoration-thickness: 2px; }

/* The password check before sensitive pages, as HEY's: no sheet, a big
   dashed-underline field and a purple Continue */
.app-main.app-main--center { display: flex; align-items: center; justify-content: center; box-sizing: border-box; max-width: none; min-height: calc(100vh - 105.6px); padding: 17.6px; }
.sudo { width: min(550px, 100%); margin: 0 auto; text-align: center; }
.sudo__form { margin: 0; }
.sudo__label { display: block; }
.sudo__title { display: block; margin: 0 0 9.7px; font-size: 30.8px; line-height: 30.8px; font-weight: 700; }
.sudo__input { display: block; box-sizing: border-box; width: 100%; height: 81.2px; padding: 8.8px 0; border: 0; border-bottom: 1px dashed var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); font: 700 44px/61.6px var(--font); text-align: center; }
.sudo__input { caret-color: rgb(48 114 221); }
.sudo__input:focus { outline: none; border-bottom-color: rgb(48 114 221); }
.sudo__continue { margin: 24.7px 0 0; padding: 9.24px 24.64px; border: 1px solid rgb(48 114 221); border-radius: 33px; background: rgb(48 114 221); color: #fff; font: 500 30.8px/43.12px var(--font); cursor: pointer; }
.sudo__note { margin: 33px 0 0; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.64px; }
.sudo__note--last { margin: 17.6px 0; }
.sudo__note a { color: #3072dd; }
.exports__intro { max-width: 704px; }
.exports__start { margin: 0; }
.exports__contacts { margin: 13.2px 0 0; font-size: 17.6px; }
.exports__contacts a { color: #3072dd; }

/* HEY's purple buttons at the normal size: filled (tertiary) and outlined */
.settings-button { display: inline-block; padding: 5.94px 15.84px; border: 1px solid rgb(48 114 221); border-radius: 33px; background: rgb(48 114 221); color: #fff; font: 500 19.8px/27.72px var(--font); text-decoration: none; cursor: pointer; }
.settings-button--outlined { background: transparent; color: rgb(48 114 221); }

/* People & Permissions */
.people__sheet { margin-top: 37.1px; }
.people .settings-new-pill { margin-right: 6.6px; }
.people__role { flex: none; align-self: center; margin-right: 11px; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.6px; }

/* Add a user and Preview invite */
.user-setup__title { width: min(704px, 100%); margin-bottom: 24.8px; text-align: center; }
.user-setup__intro { margin: 0 0 24.8px; font-size: 17.6px; line-height: 24.64px; }
.user-setup { margin: 0; }
.user-setup__row { display: flex; align-items: center; gap: 13.2px; }
.user-setup__row--email { margin: 6.2px 0 0; padding: 3.1px 0; gap: 6.6px; }
.user-setup__label { flex: none; width: 53.7px; }
.user-setup__row--email .user-setup__label { margin-right: 6.6px; }
.user-setup__input { flex: 1; }
.user-setup__input--half { flex: none; width: 210.9px; }
.user-setup__domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-setup__invite { display: block; margin: 24.8px 0 0; }
.user-setup__invite-label { display: block; margin: 0 0 6.2px; }
.user-setup__actions { display: flex; gap: 6.6px; margin: 24.7px 0 0; }
.invite-preview p { margin: 0 0 19.8px; }
.invite-preview__headers { margin: 0 0 19.8px; border-collapse: collapse; font-size: 15.4px; line-height: 21.56px; }
.invite-preview__headers td { padding: 1px 0; vertical-align: top; }
.invite-preview__headers td:first-child { width: 67.8px; padding-right: 6.6px; color: rgb(var(--ink-rgb) / 0.66); text-align: right; }
.invite-preview__button { cursor: default; }

/* Manage Extensions: the narrower blank slate, the step card and HEY's
   radio buttons */
.settings-blank--narrow { width: min(704px, 100%); }
.sheet.extension-step { box-shadow: rgb(var(--warm-rgb) / 0.5) 0 2.2px 27.5px 0; }
.extension-form { margin: 0; }
.extension-form__heading { margin: 0 0 6.2px; font-size: 19.8px; line-height: 19.8px; font-weight: 700; }
.extension-form__heading--delivery { margin: 37.1px 0 12.4px; }
.extension-form__hint { margin: 0 0 19.3px; font-size: 15.4px; line-height: 21.56px; }
.extension-form__address { display: flex; align-items: center; gap: 6.6px; }
.extension-form__name { flex: none; width: 193.3px; }
.extension-form__domain { overflow: hidden; color: rgb(var(--ink-rgb) / 0.66); text-overflow: ellipsis; white-space: nowrap; }
.extension-form__actions { margin: 24.8px 0 0; }
.radio-button { position: relative; display: flex; align-items: flex-start; gap: 13.2px; min-height: 35.6px; font-size: 17.6px; line-height: 24.64px; cursor: pointer; }
.radio-button__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.radio-button__button { flex: none; box-sizing: border-box; width: 23.9px; height: 23.9px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 50%; background: var(--color-sheet); }
.radio-button__input:checked + .radio-button__button { border: 7px solid #3072dd; }
.radio-button__input:focus-visible + .radio-button__button { box-shadow: 0 0 0 2px #a4d2ff; }
.radio-button__label { padding-bottom: 11px; }

/* Catch-all, as HEY's: the title inside the sheet, left-aligned text */
.people__catch-all { margin: 19.8px 0 0; font-size: 17.6px; line-height: 27.7px; }
.people__catch-all, .people__catch-all a { color: rgb(var(--ink-rgb) / 0.66); }
.catch-all { text-align: center; }
.catch-all__title { margin: 0 0 19.8px; font-size: 44px; line-height: 44px; font-weight: 700; }
.catch-all__break { display: block; }
.catch-all p { margin: 0 0 19.8px; text-align: left; }
.catch-all__form { margin: 5px 0 0; }
.catch-all__off { border-color: rgb(201 36 0); background: rgb(201 36 0); }
.catch-all__permalink { color: inherit; }

/* Manage Extensions with entries, and Edit Extension, as the reference's
   (measured with a test extension) */
.extensions__intro { width: min(704px, 100%); margin: 0 0 12.4px; font-size: 19.8px; line-height: 27.72px; text-align: center; }
.extensions__list { width: min(594px, 100%); margin: 24.7px 0 0; }
.extension-card { position: relative; margin: 0 0 13.2px; padding: 31.68px 39.6px; border-radius: 29.7px; background: var(--color-sheet); box-shadow: rgb(var(--warm-rgb) / 0.5) 0 2.2px 27.5px 0; }
.extension-card__address { margin: -6.9px 0 0; font-size: 22px; line-height: 30.8px; font-weight: 400; overflow-wrap: anywhere; }
.extension-card__address strong { font-weight: 700; }
.extension-card__people { display: flex; flex-wrap: wrap; gap: 4.4px 13.2px; margin: 4.8px 0 0; padding: 0; list-style: none; font-size: 15.4px; line-height: 23.1px; }
.extension-card__people li { display: flex; align-items: center; gap: 5.5px; }
.extension-card__people .avatar { --avatar-size: 23.1px; font-size: 9px; }
.extension-card__edit { position: absolute; top: 9.9px; right: 9.9px; padding: 4.62px 12.32px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 33px; color: rgb(var(--ink-rgb) / 0.66); font-size: 15.4px; line-height: 21.56px; font-weight: 500; text-decoration: none; }
.extensions__hint { width: min(704px, 100%); box-sizing: border-box; margin: 26.4px 0 0; padding: 0 55px; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.64px; }

.extension-edit__title { margin-bottom: 27.5px; }
.extension-edit__photo { display: flex; flex-direction: column; align-items: center; }
.extension-edit__avatar { --avatar-size: 79.2px; font-size: 29px; object-fit: cover; }
span.extension-edit__avatar { background: rgb(255 204 0); color: rgb(35 28 51); }
.extension-edit .profile__photo-form { margin-top: 18.7px; }
.extension-edit .profile__note { margin: 6.5px 0 0; }
.extension-edit__section { margin: 49.4px 0 0; }
.extension-edit__section--people { margin-top: 37.1px; }
.extension-edit__people-heading { line-height: 25.74px; margin-bottom: 11px; padding: 0 2px; }
.extension-edit__people { padding: 9.9px; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 6.6px; }
.extension-edit__people .recipients { min-height: 44px; margin: 0; }
.extension-edit__people .recipient-chip { height: 44.2px; box-sizing: border-box; padding: 5.39px 7.7px 5.39px 12.32px; border-radius: 77px; background: rgb(48 114 221 / 0.05); font-size: 15.4px; }
.extension-edit__people-hint { margin: 6.1px 0 0; padding: 0 2px; }
.extension-edit__actions { display: flex; align-items: center; justify-content: space-between; margin: 37.1px 0 0; }
.extension-edit__delete-form { margin: 0; }
.extension-edit__delete { display: grid; place-items: center; width: 30.8px; height: 30.8px; padding: 0; border: 1px solid rgb(var(--ink-rgb) / 0.15); border-radius: 50%; background: none; color: rgb(var(--ink-rgb) / 0.66); cursor: pointer; }
.extension-edit__delete svg { width: 17px; height: 17px; }
.extension-edit__delete:hover { border-color: rgb(201 36 0); color: rgb(201 36 0); }

/* Login & Security's pages, as the reference's (measured at 1512px) */
.password-form__field { display: block; margin: 0 0 24.75px; font-size: 19.8px; line-height: 27.72px; }
.password-form__field strong { font-weight: 700; }
.password-form__control { display: block; margin-top: 6.19px; }
.password-form__hint { display: block; margin-top: 5.5px; color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.64px; }
.password-form__actions { margin-top: 24.75px; text-align: center; }

.sheet.two-factor-replace { display: block; width: min(514.8px, 100%); text-align: center; }
.two-factor-replace__title { margin: 0 0 24.75px; font-size: 30.8px; line-height: 30.8px; font-weight: 700; }
.two-factor-replace__text { margin: 19.8px 0; font-size: 19.8px; line-height: 27.72px; }
.two-factor-replace__no { margin-bottom: 0; }
.two-factor-replace__no a { color: #3072dd; }
.two-factor-replace__yes { display: inline-block; padding: 6.6px 17.6px; border: 1px solid rgb(201 36 0); border-radius: 33px; background: rgb(201 36 0); color: #fff; font-size: 22px; line-height: 30.8px; font-weight: 500; text-decoration: none; }

.settings-page .settings-sheet__title--quarter { margin-bottom: 13.75px; }
.security-intro { margin: 0; font-size: 19.8px; line-height: 27.72px; text-align: center; }
.security-island { display: flex; flex-direction: column; padding: 19.8px 0; font-size: 19.8px; line-height: 27.72px; }
.security-island--sessions { padding-top: 0; }
.security-island__top { padding: 19.8px 0; border-bottom: 1px solid rgb(var(--ink-rgb) / 0.15); text-align: center; }
.security-island__top form { margin: 0; }
.security-island__row { display: flex; align-items: center; padding: 19.8px 0; }
.security-island--events .security-island__row { border-bottom: 1px solid rgb(var(--ink-rgb) / 0.15); }
.security-island__content { flex: 1 1 auto; min-width: 0; }
.security-island__actions { flex: none; margin: 0 0 0 19.8px; }
.security-island__actions form { margin: 0; }
.security-island__meta { color: rgb(var(--ink-rgb) / 0.66); font-size: 17.6px; line-height: 24.64px; }
.security-island__active { color: #3072dd; font-weight: 700; }
.security-button { padding: 5.94px 15.84px; border: 1px solid var(--color-ink); border-radius: 33px; background: transparent; color: var(--color-ink); font: 500 19.8px/27.72px var(--font); cursor: pointer; }
.security-button:hover { background: var(--color-ink); color: var(--color-sheet); }
.security-island .pagination-link { display: block; min-height: 16.5px; }

/* The browser's logo after its name (drawn here, not the vendors' files) */
.security-device { position: relative; display: inline-block; margin: 0; font-size: 22px; line-height: 22px; font-weight: 700; }
.security-device::after { content: ""; position: relative; top: -1.65px; display: inline-block; width: 19.8px; height: 19.8px; margin-left: 4.4px; vertical-align: middle; border-radius: 50%; background: rgb(var(--ink-rgb) / 0.3); }
.security-device--chrome::after { background: radial-gradient(circle closest-side, #4285f4 0 42%, #fff 42% 54%, transparent 54%), conic-gradient(from -60deg, #ea4335 0 120deg, #fbbc04 120deg 240deg, #34a853 240deg 360deg); }
.security-device--safari::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%231a8cff' stroke='%23d6d6d6'/%3E%3Cpath d='M14.6 5.4 11.1 11.1 8.9 8.9z' fill='%23ff3b30'/%3E%3Cpath d='M5.4 14.6 8.9 8.9 11.1 11.1z' fill='%23fff'/%3E%3C/svg%3E") center / 100% auto no-repeat; }
.security-device--firefox::after { background: radial-gradient(circle closest-side, #7542e5 0 45%, transparent 46%), conic-gradient(#ff9500, #ff3750, #ffbd4f, #ff9500); }
.security-device--edge::after { background: radial-gradient(circle at 60% 60%, #fff 0 25%, transparent 26%), linear-gradient(135deg, #36c3f0, #0c59a4 55%, #50e6a0); }

/* Security keys, as the reference's: not a sheet but a 495px card that
   slides in from the right, with a full-width purple button */
.security-keys-step { box-sizing: border-box; width: min(495px, 100%); margin: 0 0 39.6px; padding: 39.6px; border-radius: 29.7px; background: var(--color-sheet); box-shadow: rgb(var(--warm-rgb) / 0.5) 0 2.2px 27.5px 0; text-align: center; animation: security-keys-step-in 300ms ease-out; }
.security-keys-step form { margin: 0; }
.security-keys-step__title { margin: 0 0 13.75px; font-size: 44px; line-height: 44px; font-weight: 700; }
.security-keys-step__text { margin: 19.8px 0; font-size: 19.8px; line-height: 27.72px; }
.security-keys-step__text--lead { margin-top: 0; }
.security-keys-step__text a:not(.security-keys-step__add) { color: #3072dd; }
.security-keys-step__add { display: block; box-sizing: border-box; width: 100%; padding: 5.94px 15.84px; border: 1px solid rgb(48 114 221); border-radius: 33px; background: rgb(48 114 221); color: #fff; font: 700 19.8px/27.72px var(--font); text-decoration: none; cursor: pointer; }
.security-keys-step__name { margin: 0 0 19.8px; text-align: center; }
.security-keys-step__error { margin: 0 0 19.8px; color: rgb(201 36 0); font-size: 17.6px; line-height: 24.64px; }
.security-keys-list { margin: 19.8px 0 0; padding: 0; list-style: none; text-align: left; }
.security-keys-list__key { display: flex; align-items: center; gap: 13.2px; padding: 13.2px 0; border-top: 1px solid rgb(var(--ink-rgb) / 0.15); }
.security-keys-list__key:last-child { border-bottom: 1px solid rgb(var(--ink-rgb) / 0.15); }
.security-keys-list__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; font-size: 19.8px; line-height: 27.72px; }
.security-keys-list__text small { color: rgb(var(--ink-rgb) / 0.66); font-size: 15.4px; line-height: 21.56px; }
.security-keys-list form { margin: 0; }
@keyframes security-keys-step-in { from { opacity: 0; transform: translateX(94px); } }
@media (prefers-reduced-motion: reduce) { .security-keys-step { animation: none; } }

@media (max-width: 640px) {
  .sheet.settings-sheet, .sheet.settings-panel { padding: 33px 16px; }
  .autoresponder__faq { padding: 0 16px; }
}