/* 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;
  }
}