/* LingoNeko design, shared by every language. Loads after the shared
   stylesheets and before a language layer (90-cjk.css, 95-*).

   Five labeled destinations (Home, Journey, Practice, Stories, Dictionary) in
   one tab bar; a compact one-row header; the Words | Sentences switch inside
   the search toolbar; and Home, built from the app's own white bordered cards
   on the gray page. Nothing here adds a new bar: the header lost its tagline
   and a row, and the toolbar gained its switch in place of the hidden type
   selector. */

/* ---------- One frame for every section ---------- */
:root {
  --content-width: 960px;
  --content-gutter: 12px;
}
@media (min-width: 1025px) {
  :root {
    --content-gutter: 24px;
  }
}

/* ---------- Header: one centered wordmark, account on the right ---------- */
/* The same header in every section, including the Word Game start screen on
   phones (the header only goes away while a round is under way). */
body:not(.word-game-round-active) header {
  align-items: center;
  box-sizing: border-box;
  column-gap: 8px;
  display: grid;
  flex-shrink: 0;
  grid-template-columns: 1fr auto 1fr;
  height: 65px;
  padding: 8px 12px 9px;
  text-align: center;
}
body:not(.word-game-round-active) header #site-title {
  align-items: center;
  flex-direction: column;
  font-size: 28px !important;
  gap: 0;
  grid-column: 2;
  grid-row: 1;
  line-height: 1.05;
  margin: 0;
  white-space: nowrap;
}
body:not(.word-game-round-active) header .header-top-row {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  margin: 0;
}
body:not(.word-game-round-active) header #auth-container {
  flex-wrap: nowrap;
  margin: 0;
  position: static;
  white-space: nowrap;
}
.wordmark-neko {
  color: var(--color-interactive);
}
body:not(.word-game-round-active) header .site-wordmark-descriptor {
  color: #35495f;
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  margin: 3px 0 0;
  text-indent: 0.32em;
  text-transform: uppercase;
}
@media (min-width: 1025px) {
  body:not(.word-game-round-active) header {
    height: 78px;
    padding: 12px 24px;
  }
  body:not(.word-game-round-active) header #site-title {
    font-size: 34px !important;
  }
}

/* ---------- Language menu: left corner of the header, and the footer list ---------- */
/* A <details> menu of plain links (tools/make-language-menu.py writes the
   markup). The trigger and panel reuse .account-menu-btn and
   .account-menu-panel; the panel opens to the right from the left corner. The
   corner is taken by the report button while reading a story, and a Word Game
   round has no header, so the menu is hidden in both. */
body:not(.word-game-round-active) header .language-menu {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  position: relative;
  z-index: 1100;
}
html.reading .language-menu,
body.word-game-round-active .language-menu {
  display: none;
}
.language-menu-btn {
  list-style: none;
  user-select: none;
}
.language-menu-btn::-webkit-details-marker {
  display: none;
}
.language-menu[open] .language-menu-btn {
  background-color: var(--color-wash-blue-active);
  border-color: var(--color-wash-blue-active-border);
}
.language-menu-btn:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}
.language-menu-current,
.language-menu-chevron {
  display: none;
}
@media (min-width: 700px) {
  .language-menu-btn {
    gap: 8px;
    padding: 0 10px;
    width: auto;
  }
  .language-menu-current {
    display: inline;
    font-size: 14px;
    font-weight: 500;
  }
  .language-menu-chevron {
    display: inline;
    font-size: 10px;
  }
}
.language-menu-panel {
  min-width: 220px;
  text-align: left;
}
.language-menu-item {
  justify-content: flex-start;
}
.language-menu-native {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 400;
}
.language-menu-check,
.language-menu-arrow {
  margin-left: auto;
}
.language-menu-item:not([aria-current]) .language-menu-check {
  visibility: hidden;
}
.language-menu-item[aria-current] {
  background-color: var(--color-wash-blue);
}
.language-menu-divider {
  border-top: 1px solid var(--color-wash-blue-border);
  margin: 6px 4px;
}
.footer-languages {
  margin: 12px 0 4px;
}
footer .footer-languages-label {
  color: var(--color-text-strong);
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 6px;
}
.footer-languages ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 16px;
}
/* The global `li` rule adds 10px above and below; in this list that stacked
   20px of dead space onto every row of links on phones. */
.footer-languages li {
  margin: 0;
}
.footer-languages a {
  color: var(--color-ink);
  display: inline-block;
  font-size: 14px;
  padding: 6px 2px;
  text-decoration: none;
}
.footer-languages a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}
.footer-languages a[aria-current] {
  color: var(--color-ink);
  font-weight: 600;
}

/* ---------- Tab bar: five tabs fit at their normal size ---------- */
@media (max-width: 1024px) {
  #mode-nav .mode-tab {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 2px;
    padding-right: 2px;
  }
  #mode-nav:has([data-mode="grammar"]) .mode-tab-label,
  #mode-nav .mode-tab-label {
    display: block;
    font-size: 13px;
    letter-spacing: 0;
    line-height: normal;
    min-height: 0;
    white-space: nowrap;
    width: auto;
  }
}

/* ---------- Words | Sentences, inside the search toolbar ---------- */
.type-switch {
  display: none;
}
body[data-mode="words"] .type-switch,
body[data-mode="sentences"] .type-switch {
  background-color: var(--color-wash-blue);
  border: 1px solid var(--color-wash-blue-border);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 100%;
  gap: 4px;
  padding: 4px;
}
html.home-view .type-switch {
  display: none !important;
}
.type-switch-btn {
  align-items: center;
  border-radius: 7px;
  box-sizing: border-box;
  color: #3e5368;
  display: flex;
  flex: 1 1 0;
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.05em;
  min-height: 44px;
  text-decoration: none;
  text-transform: uppercase;
}
.type-switch-btn:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
.type-switch-btn.active {
  background-color: var(--color-ink);
  box-shadow: 0 2px 5px rgba(13, 58, 105, 0.22);
  color: var(--color-surface);
}
.type-switch-btn:focus-visible {
  outline: 3px solid var(--color-wash-blue-active-border);
  outline-offset: 2px;
}
@media (min-width: 1025px) {
  body[data-mode="words"] .type-switch,
  body[data-mode="sentences"] .type-switch {
    flex: 0 0 auto;
    width: 240px;
  }
}

/* On Home the toolbar is just the search field. */

html.home-view .selectors-wrapper,
html.home-view .search-norwegian-letter-keys {
  display: none !important;
}

/* ---------- Home and the Dictionary start screen ---------- */
#landing-card.home {
  background: none;
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 auto;
  max-width: none;
  padding: 12px 0 24px;
  text-align: left;
  width: min(var(--content-width), calc(100% - 2 * var(--content-gutter)));
}
.home-card {
  background: var(--color-surface);
  border: 1px solid var(--color-wash-blue-border);
  border-radius: 12px;
  box-sizing: border-box;
  margin: 0;
  padding: 16px;
  text-align: left;
  width: 100%;
}
.dictionary-empty {
  margin: 12px auto;
  max-width: none;
  width: min(var(--content-width), calc(100% - 2 * var(--content-gutter)));
}
.dictionary-empty[hidden],
.home-card[hidden],
#landing-card.home > [hidden] {
  display: none !important;
}
.home-eyebrow {
  color: var(--color-text-slate);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.home-eyebrow-outside {
  margin: 0 0 8px 2px;
}
#landing-card.home h2.home-title,
#landing-card.home h3.home-title {
  color: var(--color-ink);
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 22px !important;
  font-weight: 600;
  line-height: 1.25;
  margin: 4px 0;
  text-align: left;
  text-wrap: balance;
}
.home-meta {
  color: var(--color-text-muted);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.4;
}
.home-goal {
  color: var(--color-text);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  margin: 2px 0 6px;
}
.home-count {
  color: var(--color-text-muted);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 14px;
  margin: 0 0 12px;
  text-align: center;
}
.home-progress {
  background: var(--color-surface-strong);
  border-radius: 3px;
  height: 6px;
  margin: 12px 0 14px;
  overflow: hidden;
}
.home-progress[hidden] {
  display: none;
}
.home-progress span {
  background: var(--color-ink);
  display: block;
  height: 6px;
  width: 0;
}
.home-primary,
.home-secondary {
  align-items: center;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  justify-content: center;
  letter-spacing: 0.05em;
  min-height: 46px;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
}
#landing-card.home > .home-card {
  display: flex;
  flex-direction: column;
}
#landing-card.home > .home-row,
.dictionary-empty > .home-row {
  flex-direction: row;
}
#landing-card.home > .home-card > .home-primary,
#landing-card.home > .home-card > .home-secondary {
  margin-top: auto;
}
.home-primary {
  background: var(--color-ink);
  border: 1px solid var(--color-ink);
  color: var(--color-surface);
  margin-top: 12px;
}
.home-primary:hover {
  background: var(--color-ink-active);
}
.home-secondary {
  background: var(--color-surface);
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}
.home-secondary:hover {
  background: var(--color-wash-blue);
}
.home-primary:focus-visible,
.home-secondary:focus-visible,
.dictionary-row:focus-visible,
.home-row:focus-visible,
.game-link-row:focus-visible {
  outline: 3px solid var(--color-wash-blue-active-border);
  outline-offset: 2px;
}
#landing-card.home .landing-daily-quests,
#landing-card.home .landing-progress-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-wash-blue-border);
  border-radius: 12px;
  margin: 0;
  padding: 16px;
}
#landing-card.home .landing-daily-quest-track {
  margin: 12px auto 6px;
}
.home-about {
  color: var(--color-text-muted);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 4px 0;
}
/* The whole reading card is the link, like the My Words row: the link's own
   hit area is stretched over the card, and the card reacts to hover and focus. */
#home-reading {
  position: relative;
}
#home-reading:hover {
  background: var(--color-wash-blue);
}
#home-reading:has(.story-card-link:focus-visible) {
  outline: 3px solid var(--color-wash-blue-active-border);
  outline-offset: 2px;
}
#home-reading .story-card-link {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  margin-top: 6px;
  min-height: 0;
  outline: none;
  padding: 0;
}
#home-reading .story-card-link:hover {
  background: none;
}
#home-reading .story-card-link::after {
  content: "";
  inset: 0;
  position: absolute;
}
.dictionary-empty .home-card + .home-card {
  margin-top: 12px;
}
.dictionary-rows {
  padding-bottom: 6px;
}
.dictionary-row,
.home-row {
  align-items: center;
  box-sizing: border-box;
  color: var(--color-ink);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 56px;
  text-decoration: none;
}
.dictionary-row {
  border-top: 1px solid var(--color-wash-blue-border);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
}
.dictionary-rows .home-eyebrow {
  margin-bottom: 4px;
}
.dictionary-rows .home-eyebrow + .dictionary-row {
  border-top: 0;
}
.dictionary-row-word {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 600;
}
.dictionary-row-gloss {
  color: var(--color-text-muted);
  flex: 1;
  font-size: 15px;
  text-align: right;
}
.home-row {
  padding-top: 8px;
  padding-bottom: 8px;
}
.home-row-copy {
  display: flex;
  flex-direction: column;
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
}
.home-row-title {
  font-size: 17px;
  font-weight: 600;
}
.home-row-sub {
  color: var(--color-text-muted);
  font-size: 14px;
}
.dictionary-row:hover,
.home-row:hover {
  background: var(--color-wash-blue);
}
.home-row:hover {
  background: var(--color-wash-blue);
}

/* Home from tablet width up: the journey step as a banner, then Today's practice
   beside the saved words and the reading suggestion. Below 700px it is one
   column. */
@media (min-width: 700px) {
  #landing-card.home {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-template-rows: auto auto 1fr;
    padding: 24px 0 32px;
  }
  #landing-card.home #home-journey {
    align-items: center;
    column-gap: 32px;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) 240px;
  }
  #landing-card.home #home-journey > :not(.home-primary):not(.home-progress) {
    grid-column: 1;
  }
  #landing-card.home #home-journey > .home-primary {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin-top: 0;
  }
  #landing-card.home #home-journey > .home-progress {
    grid-column: 1;
  }
  #landing-card.home #landing-daily-quests {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
  #landing-card.home #home-my-words {
    grid-column: 2;
    grid-row: 2;
  }
  #landing-card.home #home-wotd {
    grid-column: 2;
    grid-row: 3;
  }
  /* The story suggestion is as wide as the vocabulary profile it follows. */
  #landing-card.home #home-reading {
    grid-column: 1 / -1;
  }
  #landing-card.home #landing-progress-summary,
  #landing-card.home .home-about {
    grid-column: 1 / -1;
  }
  /* A language without a Grammar Journey has no banner in the first row. Today's practice and the
     saved words then start the page, the Word of the day follows, and the reading suggestion stays
     last, as in the languages that have a banner. */
  #landing-card.home:not(:has(#home-journey)) {
    grid-template-rows: auto 1fr auto;
    padding-top: 16px;
  }
  #landing-card.home:not(:has(#home-journey)) #landing-daily-quests {
    grid-row: 1 / span 2;
  }
  #landing-card.home:not(:has(#home-journey)) #home-my-words {
    grid-row: 1;
  }
  #landing-card.home:not(:has(#home-journey)) #home-wotd {
    grid-row: 2;
  }
  #landing-card.home:not(:has(#home-journey)) #home-reading {
    grid-row: 3;
  }
  /* A language without Today's practice (the standalone apps) has no card to span two rows: My Words and
     the Word of the day share the second row, or My Words takes the whole row when there is no word. */
  #landing-card.home:not(:has(#landing-daily-quests)) {
    grid-template-rows: auto;
  }
  #landing-card.home:not(:has(#landing-daily-quests)) #home-my-words {
    align-self: start;
    grid-column: 1;
    grid-row: 2;
  }
  #landing-card.home:not(:has(#landing-daily-quests)) #home-wotd {
    grid-column: 2;
    grid-row: 2;
  }
  #landing-card.home:not(:has(#landing-daily-quests)):not(:has(#home-wotd:not([hidden]))) #home-my-words {
    grid-column: 1 / -1;
  }
}

/* ---------- Practice: My Words and My Stats rows ---------- */
.game-link-rows {
  align-self: stretch;
  background: var(--color-surface);
  border: 1px solid var(--color-wash-blue-border);
  border-radius: 12px;
  box-sizing: border-box;
  margin: 12px 0;
  overflow: hidden;
  text-align: left;
  width: 100%;
}
.game-link-row {
  align-items: center;
  border-top: 1px solid var(--color-wash-blue-border);
  box-sizing: border-box;
  color: var(--color-ink);
  display: flex;
  justify-content: space-between;
  min-height: 56px;
  padding: 8px 16px;
  text-decoration: none;
}
.game-link-row:first-child {
  border-top: 0;
}
.game-link-row:hover {
  background: var(--color-wash-blue);
}
.game-link-row-copy {
  display: flex;
  flex-direction: column;
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
}
.game-link-row-copy strong {
  font-size: 16px;
  font-weight: 600;
}
.game-link-row-copy span {
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ---------- Every section starts in the same frame ---------- */
/* The page used to size its content per section (50% of the window for
   Dictionary and Stories, 920px for Practice, 720px for Journey). One width
   and one gutter instead. Lessons and a running Word Game round keep their own
   narrower, task-shaped layouts. */
html:not(.grammar-boot-lesson) body:not(.word-game-round-active):not(.grammar-lesson) #results-container,
body.word-game-mode:not(.word-game-round-active) #results-container,
html:not(.grammar-boot-lesson) body.grammar-mode:not(.grammar-lesson) #results-container,
body.word-list-mode #results-container,
body.my-stats-mode #results-container,
body.account-page-mode #results-container {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  width: min(var(--content-width), calc(100% - 2 * var(--content-gutter)));
}
#search-container {
  box-sizing: border-box;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}
#search-container-inner {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-width);
  min-width: 0;
  width: min(var(--content-width), 100%);
}

/* ---------- Desktop toolbar: filters on one row, the search field below ---------- */
/* At the shared content width the switch, the filters, the æøå keys and the
   search field no longer fit on one line (the field was squeezed to a sliver
   and its button clipped). Filters stay together; the search field gets the
   full width, as it already has on phones. */
@media (min-width: 1025px) {
  #search-container-inner {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  #search-container-inner .search-and-random-wrapper {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
  html.home-view #search-container-inner .search-and-random-wrapper {
    flex-basis: 100%;
  }
}

/* Journey hides the search toolbar, so the white tab strip has to carry the
   bottom edge itself, like Practice, My Stats and the account pages do. A lesson
   has its own toolbar band right under the strip, as a Word Game round does, so
   the strip gives the edge up there and the two read as one white block. */
@media (min-width: 1025px) {
  body.grammar-mode:not(.grammar-lesson) #mode-nav {
    border-bottom: 1px solid var(--color-border);
  }
}

/* Desktop toolbar balance: the first row spans the full width, split evenly
   between the Words | Sentences switch and the filters; the search row below
   spans the same width. */
@media (min-width: 1025px) {
  #search-container-inner .selectors-wrapper {
    display: flex;
    flex: 1 1 0;
    gap: 12px;
    min-width: 0;
    width: auto;
  }
  #search-container-inner .selectors-wrapper > .pos-filter,
  #search-container-inner .selectors-wrapper > .cefr-filter-group,
  #search-container-inner .selectors-wrapper > .genre-filter {
    flex: 1 1 0;
    min-width: 0;
  }
  #search-container-inner .cefr-filter-group > .cefr-filter {
    width: 100%;
  }
  body[data-mode="words"] .type-switch,
  body[data-mode="sentences"] .type-switch {
    flex: 0 0 240px;
    margin-right: 0;
  }
  #search-container-inner {
    column-gap: 12px;
  }
}
@media (min-width: 1025px) {
  /* Same height as the filter pills beside it. */
  .type-switch-btn {
    min-height: 36px;
  }
}

/* ---------- Skeleton for the reading card ---------- */
.home-skeleton {
  display: block;
  min-height: 126px;
  position: relative;
}
.sk-line,
.sk-badge {
  animation: home-shimmer 1.4s ease-in-out infinite;
  background: linear-gradient(
    90deg,
    var(--color-surface-strong) 25%,
    var(--color-surface-subtle) 50%,
    var(--color-surface-strong) 75%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  display: block;
}
.sk-eyebrow {
  height: 12px;
  width: 38%;
}
.sk-title {
  height: 20px;
  margin-top: 14px;
  width: 62%;
}
.sk-sub {
  height: 16px;
  margin-top: 10px;
  width: 44%;
}
.sk-meta {
  height: 14px;
  margin-top: 22px;
  width: 22%;
}
.sk-badge {
  bottom: 0;
  height: 26px;
  position: absolute;
  right: 0;
  width: 36px;
}
@keyframes home-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk-line,
  .sk-badge {
    animation: none;
  }
}

/* ---------- Word Game toolbar ---------- */
/* The Word Game uses none of the Stories filters; they must never show in
   its header, whichever route led to the game. */
body.word-game-mode #story-favorites-filter,
body.word-game-mode #genre-filter {
  display: none !important;
}

/* On desktop the shared toolbar rule above stretches the selectors wrapper
   across the whole row, which left the three round controls (translations,
   report, quit) pushed to the left edge. Mid-round they are the only thing in
   the row, so the wrapper shrinks to its content and is centered, as in the
   original apps. Phones and tablets keep their equal-width row. */
@media (min-width: 1025px) {
  body.word-game-mode.word-game-round-active #search-container-inner {
    justify-content: center;
  }
  body.word-game-mode.word-game-round-active
    #search-container-inner
    .selectors-wrapper {
    flex: 0 1 auto;
    justify-content: center;
  }
  body.word-game-mode.word-game-round-active .game-round-menu:not(.hidden) {
    flex: 0 1 auto;
  }
  body.word-game-mode.word-game-round-active .game-round-menu-panel {
    flex: 0 1 auto;
    justify-content: center;
    width: auto;
  }
  body.word-game-mode.word-game-round-active
    .game-round-menu-panel
    button:not(.hidden) {
    flex: 0 0 auto;
    padding: 4px 16px;
    width: auto;
  }
}

/* ---------- Mascot (docs/lingoneko-character.md) ---------- */
:root {
  --neko-fur: #6b8fb0;
  --neko-cream: #fff9f0;
  --neko-outline: #2e3440;
  --neko-soft: #e5ebf5;
  --neko-accent: #e6b85c;
  --neko-grey: #d8dde6;
}
/* Pictures placed by core/neko.js or written as <img class="neko">. Decorative. */
.neko {
  display: block;
  flex: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  width: 96px;
}
.neko--sm {
  width: 56px;
}
.neko--lg {
  width: 140px;
}
/* The Home Journey card is a two-column grid: the eyebrow and title in the first
   column, the cat in the second beside them, and every other line (goal, meta,
   progress, button) across the full width underneath. The cat is a real grid
   cell, so no amount of wrapping text can run under it or push it onto a
   control. */
#landing-card.home #home-journey {
  column-gap: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}
#landing-card.home #home-journey > * {
  grid-column: 1 / -1;
}
#landing-card.home #home-journey > .home-eyebrow {
  grid-column: 1;
  grid-row: 1;
}
#landing-card.home #home-journey > .home-title {
  grid-column: 1;
  grid-row: 2;
}
#landing-card.home #home-journey > .neko-float {
  align-self: start;
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 52px;
}
.neko-float .neko {
  width: 100%;
}
.neko-empty {
  margin: 8px auto 0;
  text-align: center;
}
.neko-empty .neko {
  margin: 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .neko--bob {
    animation: neko-bob 2.4s ease-in-out infinite;
  }
  @keyframes neko-bob {
    50% {
      transform: translateY(-4px);
    }
  }
}

/* ---------- Phone header: 44px touch targets, no collisions ---------- */
/* Language button, account button and Sign In were 34px tall and the wordmark
   sat 8px from the account button at 360px (and overlapped it at 320px). The
   controls are now 44px; the title takes the space between the two corners
   instead of being centered on the page, and shrinks on the narrowest phones. */
@media (max-width: 520px) {
  body:not(.word-game-round-active) header {
    column-gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  body:not(.word-game-round-active) header .language-menu {
    grid-column: 1;
  }
  body:not(.word-game-round-active) header #site-title {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
  }
  body:not(.word-game-round-active) header .header-top-row {
    grid-column: 3;
  }
  /* Every header control is the same 34px height as the streak badge and the
     sign-in button were originally; 44px made Sign In fat and, once signed in,
     pushed the account button over the wordmark. */
  body:not(.word-game-round-active) header .account-menu-btn,
  body:not(.word-game-round-active) header .google-signin-btn,
  body:not(.word-game-round-active) header .streak-badge,
  body:not(.word-game-round-active) header .auth-user-info {
    box-sizing: border-box;
    height: 34px;
  }
  body:not(.word-game-round-active) header .account-menu-btn {
    min-width: 34px;
    width: 34px;
  }
  body:not(.word-game-round-active) header .google-signin-btn {
    min-width: 0;
  }
  body:not(.word-game-round-active) header #auth-container {
    gap: 6px;
  }
  /* Signed in: the avatar stands for the name and a small icon for "Sign
     out" (its title and text still name it for screen readers), so the account
     button, streak badge and pill fit beside the wordmark; the wordmark steps
     down a size while all of them are showing. */
  body:not(.word-game-round-active) header .auth-user-name {
    display: none;
  }
  body:not(.word-game-round-active) header .google-signout-btn {
    font-size: 0;
    height: 26px;
    justify-content: center;
    padding: 0;
    width: 26px;
  }
  body:not(.word-game-round-active) header .google-signout-btn::before {
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--color-ink);
    content: "";
    display: block;
    height: 18px;
    width: 18px;
  }
  body:not(.word-game-round-active) header:has(#auth-user-info:not(.hidden)) #site-title {
    font-size: 22px !important;
  }
  body:not(.word-game-round-active) header:has(#auth-user-info:not(.hidden)) .site-wordmark-descriptor {
    font-size: 9px;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
  }
}
@media (max-width: 359px) {
  body:not(.word-game-round-active) header #site-title {
    font-size: 22px !important;
  }
  body:not(.word-game-round-active) header .site-wordmark-descriptor {
    font-size: 9px;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
  }
}

/* Phone language button: a plain globe instead of the Font Awesome "A/文" glyph
   plus chevron, which looked cramped in a 44px tile. From 700px the button shows
   the language's own name again and keeps the original glyph. */
@media (max-width: 699px) {
  body:not(.word-game-round-active) header .language-menu-btn .fa-language {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3.2 3.2 3.2 14.8 0 18M12 3c-3.2 3.2-3.2 14.8 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3.2 3.2 3.2 14.8 0 18M12 3c-3.2 3.2-3.2 14.8 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
    background: currentColor;
    display: block;
    font-size: 0;
    height: 24px;
    width: 24px;
  }
  body:not(.word-game-round-active) header .language-menu-btn .language-menu-chevron {
    display: none;
  }
}

/* Home banner from tablet width up: text | cat | button as three columns, so the
   cat has a cell of its own between the text and the button. Rows are explicit
   because the cat comes first in the markup. The button column is narrower on
   tablets so the text keeps a readable line. */
@media (min-width: 700px) {
  #landing-card.home #home-journey {
    column-gap: 24px;
    grid-template-columns: minmax(0, 1fr) auto 200px;
  }
  /* Repeated class: the older banner rule above also matches this element. */
  #landing-card.home #home-journey > .neko-float.neko-float.neko-float {
    align-self: center;
    grid-column: 2;
    grid-row: 1 / span 5;
    justify-self: center;
    width: 84px;
  }
  #landing-card.home #home-journey > .home-primary {
    grid-column: 3;
    grid-row: 1 / span 5;
  }
  #landing-card.home #home-journey > #home-journey-eyebrow { grid-row: 1; }
  #landing-card.home #home-journey > #home-journey-title { grid-row: 2; }
  #landing-card.home #home-journey > #home-journey-goal { grid-row: 3; }
  #landing-card.home #home-journey > #home-journey-meta { grid-row: 4; }
  #landing-card.home #home-journey > #home-journey-progress { grid-row: 5; }
}
@media (min-width: 1025px) {
  #landing-card.home #home-journey {
    grid-template-columns: minmax(0, 1fr) auto 240px;
  }
}

/* ---------- Home hierarchy ----------
   One recommendation leads the page (#home-journey: the only filled button and
   the strongest border). Today's practice, reading and My Words follow as
   quieter choices. docs/learning-system-plan.md, Phase 5. */
#landing-card.home #home-journey {
  border: 2px solid var(--color-ink);
}
/* Today's practice: a title and its count on one line, the three gems as one
   evenly spaced progress strip joined by a line, one quiet line about the next
   round, and a single outlined button. */
#landing-card.home .landing-daily-quests {
  padding: 16px;
}
#landing-card.home .landing-daily-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
#landing-card.home .landing-daily-quests .home-title {
  font-size: 18px;
  margin: 0;
}
#landing-card.home .landing-daily-count {
  color: var(--color-text-muted);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
#landing-card.home .landing-daily-quests .landing-daily-quest-track {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  margin: 20px 0 12px;
  position: relative;
  width: 100%;
}
/* The line runs behind the gems, from the first to the last. */
#landing-card.home .landing-daily-quests .landing-daily-quest-track::before {
  background: var(--color-wash-blue-border);
  content: "";
  height: 2px;
  left: calc(100% / 6);
  position: absolute;
  right: calc(100% / 6);
  top: 22px;
}
#landing-card.home .landing-daily-quests .landing-daily-quest-step {
  background: none;
  border: 0;
  gap: 6px;
  padding: 0;
  position: relative;
  transform: none;
}
#landing-card.home .landing-daily-quests .landing-daily-quest-gem {
  background: var(--color-surface);
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--color-surface);
  height: 44px;
  width: 44px;
}
#landing-card.home .landing-daily-quests .landing-daily-quest-step--active .landing-daily-quest-gem {
  box-shadow:
    0 0 0 5px var(--color-surface),
    0 0 0 7px var(--color-wash-blue-active-border);
}
#landing-card.home .landing-daily-quests .landing-daily-quest-step--complete {
  color: var(--color-success-text, #1c6b3c);
}
#landing-card.home .landing-daily-quests .landing-daily-quest-step--locked {
  background: none;
  color: var(--color-text-muted);
}
#landing-card.home .landing-daily-next {
  color: var(--color-text-muted);
  font-family: "Source Sans 3", "Noto Sans", sans-serif;
  font-size: 14px;
  margin: 0 0 12px;
  text-align: center;
}
#landing-card.home .landing-daily-quests .home-secondary {
  border-color: var(--color-wash-blue-border);
  font-size: 13px;
  min-height: 44px;
}

/* ---------- Footer on phones: compact, still comfortably tappable ---------- */
@media (max-width: 1024px) {
  footer .links {
    margin: 0;
  }
  footer .footer-control {
    min-height: 40px;
  }
  .footer-languages {
    margin: 6px 0 0;
  }
  footer .footer-languages-label {
    margin: 0;
  }
  .footer-languages ul {
    gap: 0 4px;
    padding: 0 4px;
  }
  .footer-languages a {
    align-items: center;
    display: inline-flex;
    min-height: 36px;
    padding: 0 6px;
  }
  footer .copyright {
    margin: 2px 0 0;
  }
}

/* Recommended reading on Home: the genre icon and level badge sit in one row at
   the foot of the card, level with the reading time, instead of a tall column
   with a gap in the middle. */
#home-reading .stories-detail-container {
  align-items: center;
  align-self: flex-end;
  flex-direction: row;
  gap: 8px;
}

/* Word of the day (wordOfDay.js): Home's card for a language with no stories. Its body is a word's dictionary
   entry (the same markup and classes), without the entry's own card chrome. The whole card opens the word;
   the star and the audio buttons sit above that link. */
#home-wotd { position: relative; }
#home-wotd:hover { background: var(--color-wash-blue); }
#home-wotd:has(.wotd-link:focus-visible) { outline: 3px solid var(--color-wash-blue-active-border); outline-offset: 2px; }
.wotd.definition { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 6px 0 0; padding: 0; position: static; }
.wotd .single-result-my-words-controls { position: absolute; right: 12px; top: 8px; z-index: 1; }
.wotd .wotd-link { color: inherit; text-decoration: none; }
.wotd .wotd-link::after { content: ""; inset: 0; position: absolute; }
.wotd .wotd-link:focus-visible { outline: none; }
.wotd .sentence-audio-icon { position: relative; z-index: 1; }
.wotd .word-gender { margin-top: 0; }
.wotd-cefr { align-items: center; color: #4f4f4f; display: inline-flex; font-family: "Noto Sans", sans-serif; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.wotd-cefr .fa-signal { margin-right: 5px; }
.wotd-cefr-badge { border-radius: 4px; display: inline-block; min-width: 15px; padding: 3px 7px; text-align: center; }
.wotd-cefr-name { color: #6b6b6b; font-size: 11px; font-weight: 500; letter-spacing: 0.03em; margin-left: 6px; }

/* Today's practice shares a row with My Words and the reading/Word of the day card on desktop, so it is
   often the taller one: keep its gems and caption centered between the heading and the button. */
#landing-card.home .landing-daily-head { margin-bottom: 20px; }
#landing-card.home .landing-daily-quests .landing-daily-quest-track { margin-top: auto; }

/* Word of the day, compact: the dictionary entry's rows without its spacing, no example sentence. */
.wotd .word-gender { margin-bottom: 4px; }
.wotd .definition-content { gap: 6px; margin: 0; padding: 0; }
.wotd .definition-content p { margin: 0; }