/* Colors and sizes live here so they can be changed in one place. */
:root {
  --cardinal: #a6192e;      /* brand red: header and logo only, never "wrong" or errors */
  --ink: #1f2328;
  --ink-soft: #57606a;
  --paper: #fbfaf8;
  --surface: #ffffff;
  --line: #d8d4cc;
  --line-strong: #8a857b;   /* edges of things you can tap: needs 3:1 contrast */
  --page-width: 44rem;
  --gutter: 1rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* Device fonts only: nothing is downloaded from outside companies. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--cardinal);
  color: #ffffff;
}

.site-header__title {
  margin: 0;
  font-size: inherit;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  color: inherit;
  text-decoration: none;
}

/* "Sign in" / "Account", at the right of the header. */
.site-header__account {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 2px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__account:hover {
  background: rgba(255, 255, 255, 0.15);
}

.site-header__account:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.site-header__inner:focus-visible {
  outline-color: #ffffff;
  outline-offset: -4px;
}

.site-header__logo {
  flex: none;
  border-radius: 0.5rem;
}

.wordmark {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.wordmark__card {
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ---------- Page basics ---------- */

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 3rem;
}

.page h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  line-height: 1.25;
}

.page h2:focus {
  outline: none;
}

.section-heading {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}

.placeholder {
  margin: 0;
  padding: 2rem 1rem;
  border: 2px dashed var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--ink-soft);
  text-align: center;
}

.back-link,
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  font-weight: 600;
}

.back-link {
  gap: 0.375em;
  margin-bottom: 0.25rem;
}

.text-link {
  margin-top: 1.25rem;
}

.button {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.button--primary {
  background: var(--ink);
  color: #ffffff;
}

.section-heading--group {
  margin-top: 1.75rem;
}

.section-heading--group:first-of-type {
  margin-top: 0;
}

/* ---------- Tiles: decks on the home screen, sets on a deck page ---------- */

.tile-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile-list > li {
  min-width: 0;
}

.tile-list--sets {
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.75rem;
}

.tile {
  display: grid;
  gap: 0.25rem;
  height: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}

.tile:hover {
  border-color: var(--ink);
}

.tile--deck {
  padding: 1.25rem;
  border-left: 0.5rem solid var(--cardinal);
}

.tile--deck:hover {
  border-left-color: var(--cardinal);
}

.tile__name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.tile--deck .tile__name {
  font-size: 1.375rem;
}

.tile__detail {
  color: var(--ink-soft);
  font-size: 1rem;
}

/* A tile shared by related decks, with one button for each. */
.tile--series:hover {
  border-color: var(--line-strong);
}

.tile__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.tile__links .button {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
}

.deck-description {
  margin: 0 0 0.25rem;
}

.deck-count {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
}

/* ---------- Flashcards / Quiz switch ---------- */

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 22rem;
  margin: 0 0 0.75rem;
  padding: 0.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface);
}

.mode-switch__choice {
  position: relative;
  cursor: pointer;
}

.mode-switch__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mode-switch__label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

.mode-switch__radio:checked + .mode-switch__label {
  background: var(--ink);
  color: #ffffff;
}

.mode-switch__radio:focus-visible + .mode-switch__label {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Study options ---------- */

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
}

.option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.option__box {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--ink);
}

/* ---------- Progress: quiz mastery and study schedule ---------- */

.progress {
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

.progress-bar {
  display: flex;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 0.25rem;
  background: var(--line);
}

.progress .progress-bar {
  height: 0.875rem;
  border-radius: 0.4375rem;
}

.tile .progress-bar {
  margin-top: 0.375rem;
}

/* Mastery (from quiz answers): grey, amber, light green, green. */
.progress-bar__part--mastery-new,
.progress-bar__part--schedule-new {
  background: #c9c5bc;
}

.progress-bar__part--mastery-learning {
  background: #d99a00;
}

.progress-bar__part--mastery-reviewing {
  background: #7fb36a;
}

.progress-bar__part--mastery-mastered {
  background: #1a7f37;
}

/* Study schedule (from self-ratings): blues, so it is never mistaken for mastery. */
.progress-bar__part--schedule-studying {
  background: #8fb3dc;
}

.progress-bar__part--schedule-maintaining {
  background: #2f5f98;
}

.progress__heading {
  margin: 0;
  font-size: 1.125rem;
}

.progress__heading--schedule {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.progress__explain {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

.progress__hint {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
}

/* A word's mastery on the browse page. */
.mastery-label {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 600;
}

.mastery-label::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: #c9c5bc;
}

.mastery-label--learning::before {
  background: #d99a00;
}

.mastery-label--reviewing::before {
  background: #7fb36a;
}

.mastery-label--mastered::before {
  background: #1a7f37;
}

.progress__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.progress__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.progress__swatch {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
}

.progress__number {
  font-size: 1.25rem;
}

.reset {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.text-button {
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.reset__confirm {
  display: grid;
  gap: 0.75rem;
}

.reset__confirm p {
  margin: 0;
}

/* ---------- A card's labelled fields (browse list and flashcard back) ---------- */

.field {
  margin: 0.375rem 0 0;
}

.field__label {
  display: block;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field__value {
  display: block;
}

/* ---------- Browse page ---------- */

.card-set__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 2rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--ink);
  font-size: 1.25rem;
}

.card-set__count {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 400;
}

.card-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-row {
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--line);
}

.card-row__front {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

/* ---------- Study mode ---------- */

.study__progress {
  margin: -0.5rem 0 1rem;
  color: var(--ink-soft);
}

.flashcard {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(22rem, 50vh);
  margin-bottom: 0.5rem;
  padding: 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 2px 8px rgb(31 35 40 / 0.08);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.flashcard__front {
  margin: 0;
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

/* The starting side when studying "definition first". */
.flashcard__prompt {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.4;
  text-align: center;
}

.flashcard__prompt + .flashcard__prompt {
  margin-top: 0.75rem;
}

/* A hint for cards whose front is shared with another card in the deck. */
.flashcard__hint {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: 1.125rem;
  text-align: center;
}

.flashcard__hint-label {
  font-weight: 600;
}

.flashcard--flipped .flashcard__hint {
  margin: -0.25rem 0 0.75rem;
  text-align: left;
}

.flashcard--flipped {
  justify-content: flex-start;
}

.flashcard--flipped .flashcard__front {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.75rem;
  text-align: left;
}

.flashcard .field {
  margin-top: 0.75rem;
}

.study__controls {
  position: sticky;
  bottom: 0;
  padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--paper);
}

.study__hint {
  margin: 0.25rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  text-align: center;
}

.study__note,
.notice {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border-left: 0.25rem solid var(--ink-soft);
  background: #eef0f2;
  font-size: 1rem;
}

/* A note about a deck's content, e.g. that its meanings are still drafts. */
.notice--deck {
  font-size: 0.9375rem;
}

.deck-count + .notice--deck {
  margin-top: -0.75rem;
}

/* Amber, not red: red is the brand color, not a warning. */
.notice {
  border-left-color: #8a5a00;
  background: #ffe9b8;
}

/* Rating buttons. "Again" is gray on purpose: red is the brand color, not "wrong". */
.rating {
  display: grid;
  /* Three across; they stack when the text is enlarged a lot. */
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.5rem;
}

.rating:focus {
  outline: none;
}

.rating__button {
  display: grid;
  justify-items: center;
  gap: 0.125rem;
  min-height: 4rem;
  padding: 0.5rem 0.25rem;
  border: 2px solid;
  border-radius: 0.75rem;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.rating__button--again {
  border-color: #57606a;
  background: #e6e8eb;
}

.rating__button--hard {
  border-color: #8a5a00;
  background: #ffe9b8;
}

.rating__button--good {
  border-color: #1a7f37;
  background: #d3f2dc;
}

.rating__label {
  font-weight: 700;
}

.rating__when {
  font-size: 0.875rem;
}

.rating__key {
  display: none;
  min-width: 1.5rem;
  padding: 0 0.375rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font: inherit;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* Only show the keyboard shortcut on devices that have a mouse or trackpad. */
@media (hover: hover) and (pointer: fine) {
  .rating__key {
    display: inline-block;
  }
}

.panel {
  display: grid;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
  text-align: center;
}

.panel p {
  margin: 0;
}

.panel .panel__title {
  font-size: 1.75rem;
  font-weight: 700;
}

/* ---------- Quiz mode ---------- */

.quiz__prompt {
  margin-bottom: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: 0 2px 8px rgb(31 35 40 / 0.08);
}

.quiz__ask {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quiz__definition {
  margin: 0;
  font-size: 1.375rem;
  line-height: 1.4;
}

.quiz__options {
  display: grid;
  gap: 0.5rem;
}

.quiz-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.625rem 1rem;
  border: 2px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.quiz-option:disabled {
  cursor: default;
  color: var(--ink-soft);
}

.quiz-option__key {
  display: none;
  min-width: 1.5rem;
  padding: 0 0.375rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  opacity: 0.75;
}

.quiz-option__mark {
  margin-left: auto;
  font-size: 0.875rem;
}

/* Green for the right answer; gray, not red, for a wrong choice. */
.quiz-option--correct:disabled {
  border-color: #1a7f37;
  background: #d3f2dc;
  color: var(--ink);
}

.quiz-option--chosen:disabled {
  border-color: #57606a;
  background: #e6e8eb;
  color: var(--ink);
}

.quiz__feedback {
  min-height: 1.75rem;
  margin: 0.75rem 0;
  font-weight: 700;
}

.quiz__missed-title {
  font-weight: 700;
}

.quiz__missed {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (hover: hover) and (pointer: fine) {
  .quiz-option__key {
    display: inline-block;
  }
}

/* ---------- Chinese text ----------
   Text marked as Traditional Chinese uses the device's Traditional Chinese font,
   so characters appear in the forms used in Taiwan, and is shown larger than
   Latin text because characters have much more detail. */

:lang(zh-Hant) {
  font-family: "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Heiti TC", system-ui, sans-serif;
}

.flashcard__front:lang(zh-Hant) {
  font-size: clamp(3.25rem, 17vw, 5rem);
  font-weight: 500;
  line-height: 1.25;
}

.flashcard--flipped .flashcard__front:lang(zh-Hant) {
  font-size: 2.75rem;
}

.flashcard__prompt:lang(zh-Hant),
.quiz__definition:lang(zh-Hant) {
  font-size: 2.75rem;
  line-height: 1.3;
}

.card-row__front:lang(zh-Hant) {
  font-size: 1.875rem;
  font-weight: 500;
}

.quiz-option__text:lang(zh-Hant) {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.3;
}

.field__value:lang(zh-Hant),
.quiz__feedback :lang(zh-Hant),
.quiz__missed :lang(zh-Hant) {
  font-size: 1.5rem;
}

/* One written form of a word: kept together, so lines break between forms. */
.written-form {
  display: inline-block;
  max-width: 100%;
}

/* Entries with several forms or many characters are shown a little smaller. */
.flashcard__front.long-text:lang(zh-Hant) {
  font-size: clamp(2.25rem, 11vw, 3.25rem);
}

.flashcard--flipped .flashcard__front.long-text:lang(zh-Hant) {
  font-size: 2rem;
}

/* A back with one field (for example just the pinyin) has room to be larger. */
.flashcard--simple .field__value {
  font-size: 1.75rem;
  line-height: 1.3;
}

/* "Larger characters": bigger still, to make the strokes easy to see. */
.large-characters .flashcard__front:lang(zh-Hant) {
  font-size: clamp(4.5rem, 26vw, 8rem);
}

.large-characters .flashcard--flipped .flashcard__front:lang(zh-Hant) {
  font-size: clamp(3.5rem, 18vw, 5rem);
}

.large-characters .flashcard__front.long-text:lang(zh-Hant) {
  font-size: clamp(3rem, 15vw, 4.5rem);
}

.large-characters .flashcard--flipped .flashcard__front.long-text:lang(zh-Hant) {
  font-size: clamp(2.25rem, 11vw, 3.25rem);
}

.large-characters .flashcard__prompt:lang(zh-Hant),
.large-characters .quiz__definition:lang(zh-Hant) {
  font-size: clamp(3.5rem, 18vw, 5rem);
}

.large-characters .quiz-option__text:lang(zh-Hant) {
  font-size: 2.5rem;
}

@media (min-width: 40rem) {
  :root {
    --gutter: 1.5rem;
  }

  .wordmark {
    font-size: 2rem;
  }
}

/* ---------- Add your own deck ---------- */

/* "My decks" is a group like English and Chinese, set a little apart from them. */
.my-decks {
  margin-top: 1.5rem;
}

.my-decks__intro {
  margin: 0.75rem 0;
}

.my-decks .tile-list {
  margin-bottom: 1rem;
}

.add-deck__step {
  margin-top: 1.75rem;
}

.template h4 {
  margin: 0;
}

.template p {
  margin: 0;
}

.template__columns {
  font-size: 1rem;
}

.template .button {
  margin-top: 0.5rem;
}

.add-deck__list {
  margin: 0;
  padding-left: 1.25rem;
}

.add-deck__list li + li {
  margin-top: 0.5rem;
}

.add-deck__note {
  margin: 0.75rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

.upload__picker:focus-within {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.upload__result {
  margin-top: 1rem;
}

.check {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line-strong);
  border-left: 0.5rem solid #1a7f37;
  border-radius: 0.75rem;
  background: var(--surface);
}

/* Amber, not red: red is the brand color, not a warning. */
.check--refused {
  border-left-color: #8a5a00;
  background: #fff6e0;
}

.check p {
  margin: 0;
}

.check__title {
  font-size: 1.25rem;
  font-weight: 700;
}

.check__file,
.check__hint {
  color: var(--ink-soft);
  font-size: 1rem;
}

.check__heading {
  margin-top: 0.5rem !important;
  font-weight: 700;
}

.check ul {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 1rem;
}

.check .placeholder {
  margin-top: 0.5rem;
  padding: 1rem;
}

.upload__options {
  margin-bottom: 0.75rem;
}

.upload__row-one {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.upload__row-one legend {
  padding: 0;
  font-weight: 600;
}

.upload__templates {
  display: grid;
  margin: 0.25rem 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

.upload__templates legend {
  padding: 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.upload__template {
  align-items: flex-start;
  padding: 0.375rem 0;
  font-size: 1rem;
}

.upload__template .option__box {
  flex: none;
  margin-top: 0.125rem;
}

.save {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.save__label {
  font-weight: 700;
}

.save__name {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--line-strong);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.save__choice {
  display: grid;
  margin: 0;
  padding: 0;
  border: 0;
}

.save__choice legend {
  padding: 0;
  font-weight: 700;
}

.save__message:empty {
  display: none;
}

.save__message {
  color: #8a5a00;
  font-weight: 600;
}

/* ---------- Home screen groups (English, Chinese) that open and close ---------- */

.deck-group {
  margin-bottom: 0.75rem;
}

.deck-group__summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.75rem;
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  touch-action: manipulation;
}

.deck-group__summary::-webkit-details-marker,
.manage__summary::-webkit-details-marker {
  display: none;
}

/* A triangle that points right when closed and down when open. */
.deck-group__summary::before,
.manage__summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border-top: 0.375rem solid transparent;
  border-bottom: 0.375rem solid transparent;
  border-left: 0.5rem solid var(--ink);
  transition: transform 0.15s;
}

.deck-group[open] > .deck-group__summary::before,
.manage[open] > .manage__summary::before {
  transform: rotate(90deg);
}

.deck-group__summary:hover {
  border-color: var(--ink);
}

.deck-group__name {
  font-size: 1.25rem;
  font-weight: 700;
}

.deck-group__count {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 1rem;
}

.deck-group > .tile-list {
  margin-top: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .deck-group__summary::before,
  .manage__summary::before {
    transition: none;
  }
}

/* ---------- Managing an uploaded deck ---------- */

.manage {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.manage__summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  min-height: 3rem;
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
}

.manage__note {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.manage__part {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.manage__part p {
  margin: 0;
}

.manage__heading {
  margin: 0;
  font-size: 1.125rem;
}

/* A short confirmation after a change, e.g. "Renamed". */
.status-note {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.875rem;
  border-left: 0.25rem solid #1a7f37;
  background: #e6f4ea;
  font-size: 1rem;
}

/* ---------- Back up or move your progress ---------- */

.backup__part {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.backup__part p,
.backup__part h3 {
  margin: 0;
}

.backup__hint {
  color: var(--ink-soft);
  font-size: 1rem;
}

.backup__decks {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 1rem;
}

/* ---------- Account page ---------- */

.account__form {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--surface);
}

.account__form .section-heading {
  margin: 0;
}

.account__field {
  display: grid;
  gap: 0.375rem;
}

.account__hint {
  margin: 0;
  color: var(--ink-soft);
}

.account__message:empty {
  display: none;
}

/* Amber text, not red: red is the brand color, not an error. */
.account__message {
  margin: 0;
  color: #8a5a00;
  font-weight: 600;
}

.account__note {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border-left: 0.25rem solid #1f6f43;
  background: #e3f3e8;
}

.account__links {
  display: grid;
  justify-items: start;
}

.account__switch {
  min-height: 2.75rem;
}

.account__who {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

.account__signed-in {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.account__signed-in .button {
  max-width: 20rem;
}

.button:disabled {
  opacity: 0.6;
  cursor: progress;
}