/* Dear Lingo, Azulejo: cobalt, white glaze and saffron on a whitewashed wall. Shared by the site
   (site.css) and the quiz (quiz.css): tokens, type, pill buttons, cards, speech bubbles and the
   character window. Since 30 September 2026 the look follows the "Landing v7 — Quiet" Figma page:
   america.gov's quiet pages in our colours, cobalt bubbles, saffron for the main action on cobalt,
   and tiles that never sit behind text. Text is set in the system font (SF Pro on Apple devices); Syne is only the
   wordmark. Palette source: business/artifacts/identities/poco-iterations/07-azulejo (tokens.css). */

@font-face {
  font-family: "Syne";
  src: url("/fonts/syne-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Syne";
  src: url("/fonts/syne-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* A local fallback sized like the logo font, so the wordmark barely moves when it arrives. */
@font-face {
  font-family: "Syne fallback";
  src:
    local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"),
    local("Liberation Sans Bold");
  font-weight: 700;
  size-adjust: 114.6%;
  ascent-override: 80.7%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;
  --wash: #f5f2ea; /* whitewash wall */
  --grout-2: #d7d1c3;
  --glaze: #fdfcf8; /* white glaze */
  --cobalt: #1e3e9e; /* fills, buttons, pattern (8.4:1 on wash) */
  --cobalt-ink: #172e73; /* headings and text (11:1) */
  --slate: #4d5670; /* secondary text (6.8:1) */
  --sky: #dce3f4; /* the arch behind a character */
  --saffron: #f0a818; /* fills only, never text */
  --saffron-2: #d48c06;
  --saffron-soft: #ffd27a; /* small caps on cobalt */
  --bisque-ink: #6b4a35;
  --error: #9b2c0c;
  --display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --body:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --logo: "Syne", "Syne fallback", "Avenir Next", sans-serif;
  /* Card titles: the system serif (New York on Apple devices). */
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mist: #8a93ad; /* quiet labels on white */
  --porcelain: #ecf0f8; /* soft blue wells */
  --blue-line: #dce2ef; /* hairlines on white */
  --tag: #fdefcf; /* warm cards and tags */
  --caption: #cdd5ee; /* secondary text on cobalt */
  --shadow-card: 0 1px 2px #172e730a, 0 10px 30px -8px #172e731f;
  --shadow-chip: 0 1px 2px #172e730d, 0 4px 12px -2px #172e7314;
  --shadow-float: 0 2px 4px #172e730f, 0 30px 60px -20px #172e7347;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* The page's side margin. */
  --pad: 24px;
}
@media (max-width: 640px) {
  :root {
    --pad: 20px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--glaze);
  scroll-behavior: smooth;
}
body {
  container-type: inline-size;
  margin: 0;
  color: var(--cobalt-ink);
  font: 400 18px / 1.55 var(--body);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--glaze);
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
p {
  text-wrap: pretty;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--cobalt);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--cobalt-ink);
  text-decoration-thickness: 2.5px;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid var(--cobalt-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
[tabindex="-1"]:focus {
  outline: none;
}
/* biome-ignore-start lint/complexity/noImportantStyles: hidden has to win over any display a component sets */
[hidden] {
  display: none !important;
}
/* biome-ignore-end lint/complexity/noImportantStyles: see above */
::selection {
  background: var(--saffron-soft);
  color: var(--cobalt-ink);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--cobalt);
  color: var(--glaze);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

/* The page: 1200px wide at most, centred. */
.wrap {
  width: min(100% - 2 * var(--pad), 1200px);
  margin-inline: auto;
}

/* The logo: the spiral tile and the wordmark. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--cobalt-ink);
  text-decoration: none;
}
.brand:hover {
  color: var(--cobalt-ink);
}
.brand img {
  width: var(--mark, 42px);
  height: var(--mark, 42px);
}
.wordmark {
  font: 700 31px / 1 var(--logo);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Type. The eyebrow: small capitals after a saffron dot. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 14px / 1.2 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cobalt);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--saffron);
}

/* Line icons (Icon.razor) take the text colour. */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

/* Buttons: pills. Cobalt by default; saffron for the main action on cobalt; white; an outline on
   cobalt. Sizes: 50px, 60px (btn-lg) and 40px (btn-sm). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--cobalt);
  color: var(--glaze);
  font: 600 17px / 1.1 var(--body);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.18s var(--ease),
    color 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.btn:hover {
  background: var(--cobalt-ink);
  color: var(--glaze);
}
.btn:active {
  transform: scale(0.98);
}
.btn .icon {
  width: 20px;
  height: 20px;
  transition: transform 0.18s var(--ease);
}
.btn:hover .icon-arrow {
  transform: translateX(3px);
}
.btn-lg {
  min-height: 60px;
  padding: 0 32px;
  font-size: 19px;
}
.btn-sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 15px;
}
.btn-accent {
  background: var(--saffron);
  color: var(--cobalt-ink);
}
.btn-accent:hover {
  background: var(--saffron-soft);
  color: var(--cobalt-ink);
}
.btn-light {
  background: #fff;
  color: var(--cobalt-ink);
  box-shadow: var(--shadow-chip);
}
.btn-light:hover {
  background: var(--porcelain);
  color: var(--cobalt-ink);
}
.btn-line {
  background: transparent;
  color: var(--cobalt);
  box-shadow: inset 0 0 0 1.5px var(--cobalt);
}
.btn-line:hover {
  background: var(--cobalt);
  color: var(--glaze);
}

/* Speech bubbles: cobalt with white text (a character), white (you) or saffron (a hint). The
   corner nearest the speaker is squared: bubble-from-left / -right / -top. */
.bubble {
  display: inline-grid;
  gap: 2px;
  padding: 10px 16px 11px;
  border-radius: 18px;
  background: var(--cobalt);
  color: #fff;
  font: 600 16px / 1.35 var(--body);
  text-align: left;
}
.bubble .en {
  font-size: 14px;
  font-weight: 400;
  color: var(--caption);
}
.bubble-you {
  background: #fff;
  color: var(--cobalt-ink);
  box-shadow: var(--shadow-chip);
}
.bubble-hint {
  background: var(--saffron);
  color: var(--cobalt-ink);
  box-shadow: var(--shadow-chip);
}
.bubble-from-left {
  border-bottom-left-radius: 4px;
}
.bubble-from-right {
  border-bottom-right-radius: 4px;
}

/* A character in a window: a cobalt-rimmed sky arch with the character in it (the quiz's café). */
.window {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
}
.window::before {
  content: "";
  position: absolute;
  inset: 8.3% 13.9% 0;
  border: 3px solid var(--cobalt);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: var(--sky);
}
.window > img {
  position: absolute;
  top: 8.3%;
  left: 0;
  width: 100%;
  height: auto;
}

@media (max-width: 640px) {
  body {
    font-size: 17px;
  }
  .brand {
    --mark: 36px;
  }
  .wordmark {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  /* biome-ignore-start lint/complexity/noImportantStyles: reduced motion has to beat every animation and transition, whatever its selector */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* biome-ignore-end lint/complexity/noImportantStyles: see above */
}