/* Shared by every page: colours of the app, type, header, footer, buttons. The site is light only, like the app. */

:root {
  --site-bg: #F8FAFC;
  --site-surface: #FFFFFF;
  --site-ink: #0F172A;
  --site-muted: #566079;
  --site-line: #E2E8F0;
  --site-brand: #3B3A7B;
  --site-accent: #93A5F5;
  --site-soft: #EEF2FF;
  --site-night: #17163A;
  --site-on-night: #E8EAF6;
  --ok: #0F766E;
  --ok-soft: #E6F4F1;
  --warn: #9A5B06;
  --warn-soft: #FDF3DC;
  --stop: #A8323B;
  --stop-soft: #FBE9EA;

  /* colours of the mobile app itself, used only inside the phone replica */
  --app-amber: #D97706;
  --app-deep: #1E1B4B;
  --app-chip: #EEF0FD;
  --app-red: #EF4444;
  --app-red-line: #FECACA;
  --app-ink1: #1E293B;
  --app-ink2: #334155;
  --app-ink3: #475569;
  --app-mute2: #94A3B8;
  --app-grey: #CBD5E1;
  --app-line2: #F1F5F9;
  --app-line3: #EEF2F7;

  /* product voice and the voice of a person (requests and replies of people) */
  --f-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-voice: Georgia, "Times New Roman", "Noto Serif", serif;

  /* The page column: 70rem up to a 1440 px screen, then about 78% of the screen, and 100rem at most. */
  --wrap: clamp(70rem, 77.77vw, 100rem);
  --gutter: 1.375rem;
  --radius: 1.125rem;
}

/* Chinese, Japanese and Korean: the Latin fonts have none of these glyphs, so the system fonts of the language come
   first. The italic voice has no CJK italic, so it takes the same stack. No font file is loaded for any of them. */

:lang(ja) {
  --f-ui: "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Meiryo", system-ui, sans-serif;
  --f-voice: var(--f-ui);
  /* Breaks lines between phrases, not inside a word such as ください. */
  word-break: auto-phrase;
}

:lang(ko) {
  --f-ui: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-voice: var(--f-ui);
  /* Korean words stay whole: lines break only at the spaces between them. */
  word-break: keep-all;
}

:lang(zh) {
  --f-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --f-voice: var(--f-ui);
  word-break: auto-phrase;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Sizes on the site are in rem, so above 1440 px the whole design grows with the screen: one more pixel of type
     for every 280 px, which is 125% at 2560 px, and 131.25% at most. Up to 1440 px it is the size the visitor has
     set in the browser, and the growth is counted from that size. */
  font-size: clamp(100%, calc(100% + (100vw - 1440px) / 280), 131.25%);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--hdr-height, 5.25rem);
}

body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: var(--f-ui);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--site-brand);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* The focus ring is the brand colour on light backgrounds and the light accent on dark ones: both stand out. */

:focus-visible {
  outline: 3px solid var(--site-brand);
  outline-offset: 2px;
}

.ftr :focus-visible {
  outline-color: var(--site-accent);
}

[hidden] {
  display: none !important;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: -3.75rem;
  z-index: 100;
  background: var(--site-brand);
  color: var(--site-surface);
  padding: 0.625rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  border-radius: 999px;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--site-brand);
  background: var(--site-brand);
  color: var(--site-surface);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.btn:hover {
  box-shadow: 0 0.25rem 0.875rem rgba(59, 58, 123, 0.22);
}

.btn.ghost {
  background: transparent;
  color: var(--site-brand);
}

.btn.ghost:hover {
  background: var(--site-soft);
  box-shadow: none;
}

.btn.big {
  font-size: 1rem;
  padding: 0.875rem 1.5rem;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Header */

.hdr {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--site-surface);
  border-bottom: 1px solid var(--site-line);
}

.hdr-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem 1.25rem;
}

/* The header can be wider than the screen: with a large browser font, or with longer button texts in some languages,
   its right-hand group moves to a second line instead of making the page scroll sideways. It stays on one line
   wherever it fits. */
.hdr-in {
  flex-wrap: wrap;
}

.logo {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--site-brand);
  text-decoration: none;
}

.hdr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1.25rem;
  font-size: 0.88rem;
}

.hdr-nav a {
  color: var(--site-muted);
  text-decoration: none;
}

.hdr-nav a:hover {
  color: var(--site-brand);
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Language switcher: the summary looks like the header links, and the list is a small panel under it. The panel is
   anchored at the left edge of the switcher, which is never far enough right to leave the screen. */

.lang {
  position: relative;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--site-muted);
  padding: 0.5rem 0.625rem;
  border-radius: 999px;
  list-style: none;
  cursor: pointer;
}

.lang-toggle::-webkit-details-marker {
  display: none;
}

.lang-toggle:hover,
.lang[open] > .lang-toggle {
  color: var(--site-brand);
  background: var(--site-soft);
}

.lang-list {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  z-index: 70;
  width: min(11rem, calc(100vw - 2 * var(--gutter)));
  padding: 0.375rem;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 0.875rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12);
}

.lang-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.625rem;
  font-size: 0.9rem;
  color: var(--site-ink);
  text-decoration: none;
}

.lang-list a:hover {
  background: var(--site-soft);
  color: var(--site-brand);
}

.lang-list a[aria-current="true"] {
  font-weight: 700;
  color: var(--site-brand);
}

/* Flags: 3 to 2, with a thin border and rounded corners; the height of the text beside them. */

.flag {
  flex: none;
  width: 1.25em;
  height: 0.8333em;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 0.1875em;
  overflow: hidden;
  vertical-align: -0.05em;
}

/* The symbols of the flags are in the page for the <use> references and take no room. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.strip {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0.4375rem var(--gutter);
  border-top: 1px solid var(--site-line);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--site-muted);
}

@media (max-width: 900px) {
  .hdr-nav {
    display: none;
  }
}

@media (max-width: 480px) {
  :root {
    --gutter: 1rem;
  }

  .hdr-in {
    gap: 0.5rem;
  }

  .hdr-right {
    gap: 0.25rem;
  }

  .hdr .btn {
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
  }

  .strip {
    letter-spacing: 0.08em;
  }
}

/* The narrowest phones (320 px): the Russian header fits only with tighter buttons. */

@media (max-width: 350px) {
  .hdr .btn {
    padding: 0.5rem 0.5625rem;
  }

  .lang-toggle {
    padding: 0.5rem 0.375rem;
  }
}

/* Footer */

.ftr {
  margin-top: 4.5rem;
  background: var(--site-night);
  color: var(--site-on-night);
}

.ftr-in {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.75rem var(--gutter) 1.75rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 1.75rem;
}

.ftr .logo {
  color: var(--site-surface);
}

.ftr-brand p {
  margin-top: 0.625rem;
  font-size: 0.92rem;
  max-width: 26rem;
}

.ftr-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.ftr-col h2 {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--site-accent);
  margin-bottom: 0.25rem;
}

.ftr a {
  color: var(--site-on-night);
  text-decoration: none;
}

.ftr a:hover {
  text-decoration: underline;
}

.ftr-small,
.ftr-note {
  font-size: 0.8rem;
  color: var(--site-accent);
}

.ftr-note {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 1rem var(--gutter) 1.75rem;
  border-top: 1px solid rgba(232, 234, 246, 0.14);
}

@media (max-width: 820px) {
  .ftr-in {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .ftr-in {
    grid-template-columns: 1fr;
  }
}

/* Simple page used by 404 and short notices */

.plain-page {
  max-width: 40rem;
  margin: 0 auto;
  padding: 4.5rem var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.plain-page h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.plain-page p {
  color: var(--site-muted);
}

.plain-lang {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--site-line);
}

/* A wide screen is often taller than a short page (the account, the 404 page): the footer then stands at the
   bottom edge of the screen and leaves no band of the page colour under it. */

@media (min-width: 1441px) {
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  main {
    flex: 1 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* Account page: sign-in and sign-up, the profile form, the cabinet. Built on the colours and buttons of base.css. */

html {
  /* Two bars stay on the screen: the header, and the bar the profile form ends in. A field that takes the focus must not hide behind either. */
  scroll-padding-top: 6.5rem;
  scroll-padding-bottom: 6.875rem;
}

/* The bar grows when it carries a message. */
html:has(.acc-actions > :not(.acc-row):not([hidden])) {
  scroll-padding-bottom: 11.875rem;
}

/* On the narrowest phones the line above the header takes two rows. */
@media (max-width: 350px) {
  html {
    scroll-padding-top: 7.75rem;
  }
}

.acc {
  /* The edge of a control is what shows where it is on a white card: 3.5 to 1 against white. Placeholder text: 4.7 to 1. */
  --acc-edge: #7B8AA0;
  --acc-placeholder: #64748B;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 2.25rem var(--gutter) 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 55vh;
}

.acc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Text */

.acc-h {
  font-size: clamp(1.5rem, 3.6vw, 1.9rem);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* The heading takes the focus when a screen opens, so that a screen reader starts there; it is not a control. */
.acc-h:focus {
  outline: none;
}

.acc-h3 {
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 700;
}

.acc-sub {
  color: var(--site-muted);
  font-size: 0.95rem;
}

.acc-small,
.acc-hint,
.acc-count {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--site-muted);
}

.acc-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.acc-problem {
  font-size: 0.84rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--stop);
}

.acc-note,
.acc-alert {
  border-radius: 0.875rem;
  padding: 0.75rem 0.875rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.acc-note {
  background: var(--site-soft);
}

.acc-note.ok {
  background: var(--ok-soft);
  color: var(--ok);
}

.acc-note.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.acc-note p + p {
  margin-top: 0.5rem;
}

.acc-alert {
  background: var(--stop-soft);
  color: var(--stop);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.acc-loading::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.5rem;
  vertical-align: -0.1em;
  border: 2px solid var(--site-accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: acc-spin 0.8s linear infinite;
}

@keyframes acc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Cards and rows */

.acc-card {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 1.375rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.acc-auth {
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
}

.acc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1rem;
  align-items: center;
}

.acc-row.between {
  justify-content: space-between;
}

.acc-row.end {
  justify-content: flex-end;
}

/* Links and buttons */

.acc-link {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--site-brand);
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
  /* Tall enough for a thumb: these are the ways out of a screen, and some of them delete. */
  padding: 0.625rem 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: left;
}

.acc-link.danger {
  color: var(--stop);
}

.acc-link[disabled],
.acc-link[aria-disabled="true"] {
  color: var(--site-muted);
  text-decoration: none;
  cursor: default;
}

.acc-alert .acc-link {
  color: inherit;
}

/* The ways on that a message offers stand one under the other, whatever their number. */
.acc-alert .acc-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.acc .btn {
  white-space: normal;
  text-align: center;
}

.btn.danger {
  background: var(--stop);
  border-color: var(--stop);
}

.acc-wide {
  width: 100%;
}

.btn[aria-busy="true"]::before,
.acc-link[aria-busy="true"]::before {
  content: "";
  flex: none;
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.375rem;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: acc-spin 0.8s linear infinite;
}

/* Sign-in and sign-up */

.acc-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--site-soft);
}

.acc-tabs a {
  flex: 1;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.5625rem 0.625rem;
  color: var(--site-brand);
}

.acc-tabs a[aria-current="page"] {
  background: var(--site-brand);
  color: var(--site-surface);
}

.acc-form {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.acc-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.acc-label {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--site-muted);
}

.acc-required {
  font-weight: 800;
  color: var(--stop);
  margin-left: 0.1875rem;
}

.acc-in {
  display: block;
  width: 100%;
  min-width: 0;
  /* 16px keeps a phone from zooming into a focused field. */
  font-size: 1rem;
  line-height: 1.35;
  color: var(--site-ink);
  background: var(--site-surface);
  border: 1px solid var(--acc-edge);
  border-radius: 0.875rem;
  padding: 0.6875rem 0.875rem;
}

select.acc-in {
  appearance: none;
  padding-right: 2.375rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--site-muted) 50%), linear-gradient(135deg, var(--site-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.875rem) 50%;
  background-size: 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

textarea.acc-in {
  min-height: 6.5rem;
  resize: vertical;
}

.acc-in::placeholder {
  color: var(--acc-placeholder);
  opacity: 1;
}

.acc-in:disabled {
  background-color: var(--app-line2);
  color: var(--site-muted);
}

.acc-in[aria-invalid="true"] {
  border-color: var(--stop);
  box-shadow: 0 0 0 1px var(--stop);
}

.acc-check input[aria-invalid="true"] {
  box-shadow: 0 0 0 2px var(--stop);
}

.acc-code {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}

.acc-peek-row {
  position: relative;
}

.acc-peek-row .acc-in {
  padding-right: 5.6rem;
}

.acc-peek {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--site-brand);
  background: transparent;
  border: 0;
  border-radius: 0.625rem;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
}

.acc-rules {
  display: grid;
  gap: 0.25rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--site-muted);
}

.acc-rules li {
  position: relative;
  padding-left: 1.5rem;
}

.acc-rules li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.22em;
  width: 0.8125rem;
  height: 0.8125rem;
  border: 1.5px solid var(--acc-edge);
  border-radius: 50%;
}

.acc-rules li[data-met="true"] {
  color: var(--ok);
}

.acc-rules li[data-met="true"]::before {
  border-color: var(--ok);
  background: var(--ok);
  box-shadow: inset 0 0 0 2.5px var(--site-surface);
}

.acc-check {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--site-muted);
}

.acc-check input {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0.125rem 0 0;
  accent-color: var(--site-brand);
}

.acc-check .acc-problem {
  margin-top: 0.375rem;
}

/* Google's button under the form of sign-in and sign-up, with the divider above it. */
.acc-google-spot {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.acc-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--site-muted);
  font-size: 0.86rem;
}

.acc-or::before,
.acc-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--site-line);
}

/* The place of the button. Until sign-up's consent tick is set, the cover takes the presses over the dimmed button. */
.acc-google {
  position: relative;
  min-height: 2.75rem;
}

.acc-google-button {
  display: flex;
  justify-content: center;
}

.acc-google[aria-disabled="true"] .acc-google-button {
  opacity: 0.45;
}

.acc-google-cover {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.875rem;
  background: transparent;
  cursor: not-allowed;
}

/* Profile form */

.acc-profile {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.acc-photos-block {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 1.375rem;
  padding: 1.25rem;
}

.acc-photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.acc-photo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  border-radius: 1rem;
}

.acc-photo-frame,
.acc-photo-add {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--site-soft);
}

.acc-photo-frame {
  border: 1px solid var(--site-line);
}

.acc-photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.acc-photo-frame em {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.92);
  color: var(--site-brand);
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
}

.acc-photo-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border: 1.5px dashed var(--site-accent);
  color: var(--site-brand);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
}

.acc-photo-add span {
  font-size: 1.6rem;
  line-height: 1;
}

.acc-photo-add[aria-busy="true"] {
  cursor: progress;
}

.acc-photo-add[aria-busy="true"] span {
  width: 1.375rem;
  height: 1.375rem;
  border: 2.5px solid var(--site-accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: acc-spin 0.8s linear infinite;
}

.acc-photo-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.acc-photo-actions .acc-link {
  font-size: 0.84rem;
  padding: 0.5625rem 0;
}

.acc-sec {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 1.125rem;
}

.acc-sec summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9375rem 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  border-radius: 1.125rem;
  cursor: pointer;
  list-style: none;
}

.acc-sec summary::-webkit-details-marker {
  display: none;
}

.acc-sec summary::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0.1875rem 0 0;
  border-right: 2px solid var(--site-muted);
  border-bottom: 2px solid var(--site-muted);
  transform: rotate(45deg);
}

.acc-sec[open] summary::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

.acc-fill {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--site-muted);
  white-space: nowrap;
}

.acc-sec > .acc-small {
  padding: 0 1.125rem 0.625rem;
}

.acc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.acc-sec > .acc-grid {
  padding: 0.125rem 1.125rem 1.125rem;
}

.acc-grid .wide {
  grid-column: 1 / -1;
}

.acc-stack {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.acc-select {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.acc-filter {
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--site-bg);
}

.acc-affix {
  display: flex;
  align-items: center;
  border: 1px solid var(--acc-edge);
  border-radius: 0.875rem;
  background: var(--site-surface);
}

.acc-affix span {
  padding-left: 0.875rem;
  color: var(--site-muted);
}

.acc-affix .acc-in {
  border: 0;
  background: transparent;
  padding-left: 0.25rem;
}

.acc-chips,
.acc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.acc-chip {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid var(--acc-edge);
  background: var(--site-surface);
  color: var(--app-ink3);
  border-radius: 999px;
  padding: 0.5625rem 0.875rem;
  cursor: pointer;
  text-align: left;
}

.acc-chip[aria-pressed="true"] {
  background: var(--site-brand);
  border-color: var(--site-brand);
  color: var(--site-surface);
}

.acc-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.acc-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
  background: var(--site-soft);
  color: var(--site-brand);
  border-radius: 999px;
  padding: 0.1875rem 0.25rem 0.1875rem 0.875rem;
}

.acc-tag-x {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.acc-notes {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.acc-notes li:not(.acc-small) {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: var(--site-bg);
  border: 1px solid var(--site-line);
  border-radius: 0.875rem;
  padding: 0.75rem 0.875rem;
}

.acc-notes p,
.acc-dialog .acc-sub {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.acc-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0.75rem var(--gutter);
  background: var(--site-bg);
  border-top: 1px solid var(--site-line);
}

.acc-newcomer {
  padding-top: 0.25rem;
}

/* Cabinet */

.acc-cab {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.acc-cab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.acc-who {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  min-width: 0;
}

.acc-who > div:last-child {
  min-width: 0;
}

.acc-avatar {
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--site-soft);
  color: var(--site-brand);
  font-size: 1.5rem;
  font-weight: 800;
  text-transform: uppercase;
}

.acc-avatar img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.acc-name {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.acc-email {
  font-size: 0.88rem;
  color: var(--site-muted);
  overflow-wrap: anywhere;
}

.acc-badge {
  display: inline-block;
  margin-left: 0.5rem;
  vertical-align: 0.1em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: 999px;
  padding: 0.125rem 0.5625rem;
}

.acc-plan-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.acc-plan {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.375rem 0.625rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
}

.acc-plan b {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.acc-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--site-brand);
  background: var(--site-soft);
  border-radius: 999px;
  padding: 0.1875rem 0.625rem;
  white-space: nowrap;
}

/* What the next plan will be stands apart from the limits of the current one. */
.acc-plan-next {
  margin-top: 0.375rem;
  padding-top: 1rem;
  border-top: 1px solid var(--site-line);
}

.acc-limits li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--app-line2);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--app-ink3);
}

.acc-limits li:last-child {
  border-bottom: 0;
}

.acc-limits b {
  flex: none;
  color: var(--site-ink);
  font-variant-numeric: tabular-nums;
}

.acc-list {
  padding-left: 1.125rem;
  list-style: disc;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--site-muted);
}

/* Questions asked in a window of their own */

.acc-dialog {
  width: min(28rem, calc(100vw - 2rem));
  border: 0;
  border-radius: 1.375rem;
  padding: 1.5rem;
  color: var(--site-ink);
  background: var(--site-surface);
  box-shadow: 0 1.5rem 3.75rem rgba(15, 23, 42, 0.28);
}

.acc-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.acc-dialog::backdrop {
  background: rgba(15, 23, 42, 0.5);
}

.acc-dialog .acc-sub {
  max-height: 40vh;
  overflow: auto;
}

@media (max-width: 560px) {
  .acc {
    padding-top: 1.375rem;
    gap: 1rem;
  }

  .acc-card,
  .acc-photos-block {
    padding: 1.125rem;
    border-radius: 1.125rem;
  }

  .acc-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .acc-photos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .acc-sec summary {
    padding: 0.875rem;
  }

  .acc-sec > .acc-small {
    padding: 0 0.875rem 0.625rem;
  }

  .acc-sec > .acc-grid {
    padding: 0.125rem 0.875rem 1rem;
  }

  .acc-actions .btn {
    flex: 1;
  }

  /* Two buttons with long labels do not fit one row of a phone: each takes a row of its own. */
  .acc-dialog .acc-row.end {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acc-loading::before,
  .btn[aria-busy="true"]::before,
  .acc-link[aria-busy="true"]::before,
  .acc-photo-add[aria-busy="true"] span {
    animation: none;
  }
}