/* LAYOUT — header and page layout from the Figma mockups
   ("Cherokee Brand - Design System", Desktop / Home, Search results, Glossary;
   mobile: search). Loaded last on every dictionary page, so these rules win
   over the older ones in styles.css and word.css. Sizes are the Figma values;
   colours are tokens from tokens.css. */

/* ---- Header (every page) ---------------------------------------------- */

.app-container {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom-left-radius: 40px;
  background-size: cover;
}
#logo-title-container {
  gap: var(--space-3);
  margin-bottom: 0 !important;
}
#logo-title-container .seal { width: 88px; margin: 0; }
#logo-title-container h1 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Noto Sans Cherokee', sans-serif;
  font-weight: 700;
  font-size: 28px !important;
  line-height: 1.1;
}
#logo-title-container h1 br { display: none; }
#logo-title-container p { margin: 0 !important; font-size: 18px !important; }

/* Search: magnifier on the left, clear (x) on the right. */
#search-input-container { margin-top: var(--space-3) !important; } /* beats the inline margin: 0 auto */
#searchInput {
  height: var(--size-control);
  padding: 0 52px 0 52px;
  border-radius: 28px;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.18);
  font-family: 'Futura', 'Noto Sans Cherokee', sans-serif;
  font-size: 16px;
  color: var(--color-text-primary);
}
#searchInput::placeholder { color: var(--color-text-secondary); }
#searchSubmitButton {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  pointer-events: auto;
}
#searchSubmitButton { color: var(--color-text-secondary); }
#searchSubmitButton .search-icon { display: block; width: 24px; height: 24px; }
#searchClearButton { margin: 0 0 0 -48px; }

/* Search History / View Favorites under the search box. */
.header-shortcuts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.header-shortcuts .shortcut-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  margin: 0;
  padding: 0 14px 0 18px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand-charcoal);
  color: var(--color-text-inverse);
  font-family: 'Futura', 'Noto Sans Cherokee', sans-serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.header-shortcuts .shortcut-chip:hover { background: var(--color-neutral-800); }
.header-shortcuts .shortcut-chip:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: 2px; }
.header-shortcuts .chip-icon { flex-shrink: 0; width: 18px; height: 18px; }
.header-shortcuts .chip-icon-star { color: var(--color-accent-gold); }
/* Hidden while a search is showing results, like the seal and title. */
body.search-active .header-shortcuts { display: none; }

/* ---- Home (index.html) ------------------------------------------------ */

/* The (invisible) results block took space at the bottom of the header. */
body:not(.search-active) .app-container > #results { display: none; } /* every page but the word page */

.home-greeting { margin: var(--space-8) var(--space-4) var(--space-6) !important; }
.home-greeting > p:first-child { font-size: 26px !important; font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--space-4); }
.home-greeting > p + p { font-size: 16px; line-height: 1.5; color: var(--color-text-secondary); margin: 0; }

/* Word of the Day: #333 card like the live site, with the light watermark pattern. */
.container-wod {
  margin: 0 var(--space-4) var(--space-6);
  padding: var(--space-6);
  border-radius: 20px;
  background-color: var(--color-neutral-800);
  background-image: url(pattern-background-02.svg);
  background-size: cover;
  background-position: center;
  box-shadow: none;
}
.container-wod .word-of-the-day-card::before { display: none; }
.container-wod .wordOfTheWeekTitle { font-size: 14px; letter-spacing: 1.12px; }

#recentSearchesSection { margin: 0 var(--space-4) 110px !important; }
#recentSearchesSection .recent-header { color: var(--color-text-secondary); font-size: 15px; letter-spacing: 0.9px; margin: 0 0 var(--space-3); }
#recentSearchesSection .recent-list { background: var(--color-background-canvas); border-radius: var(--radius-lg); box-shadow: none; }
#recentSearchesSection .recent-item { border-bottom-color: var(--color-border-subtle); }

/* ---- Desktop (1024px and up) ------------------------------------------ */

@media (min-width: 1024px) {
  .app-container { padding-top: var(--space-10); padding-bottom: var(--space-16); border-bottom-left-radius: 56px; }
  #logo-title-container { gap: 18px; }
  #logo-title-container .seal { width: 112px; }
  #logo-title-container h1 { font-size: 40px !important; }
  #logo-title-container p { font-size: 24px !important; }
  #search-input-container { max-width: 740px !important; margin-top: 30px !important; }
  /* Menu and filter icons: 40px from the top, 23px from the edges (Figma). */
  .sidebarIconToggle { top: 14px; left: 23px; width: 34px; }
  .sidebarIconToggle .spinner { height: 4px; }
  .sidebarIconToggle .diagonal { width: 22px !important; }
  .sidebarIconToggle::after { height: 24px; } /* bigger X to match the 34px menu bars */
  .filter { top: 29px; right: 16px; width: 34px; height: 26px; padding: 11px 7px; } /* same 34px width as the menu bars, centred on the same line (53px down) */
  .header-shortcuts { margin-top: var(--space-2); }
  .header-shortcuts .shortcut-chip { height: 42px; padding: 0 16px 0 20px; font-size: 15px; }
  .header-shortcuts .chip-icon { width: 20px; height: 20px; }

  /* Two columns: greeting and recent searches on the left, Word of the Day on the right. */
  #page-container-hide.home-body:not(.page-container-hide) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: auto 1fr;
    column-gap: var(--space-12);
    align-items: start;
    box-sizing: border-box;
    width: 100%;
    max-width: 1248px; /* 1200px of content plus the side padding */
    margin: 0 auto;
    padding: var(--space-12) var(--space-6) 96px;
  }
  .home-body > .home-greeting { grid-column: 1; grid-row: 1; margin: 0 0 var(--space-6) !important; }
  .home-body > .container-wod { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding: var(--space-8); }
  .home-body > #recentSearchesSection { grid-column: 1; grid-row: 2; margin: var(--space-4) 0 0 !important; }
  .home-greeting > p:first-child { font-size: 32px !important; margin-bottom: var(--space-6); }
  .home-greeting > p + p { font-size: 20px; }
}

/* ---- Word page (word.html): search results and word entry ---------------
   word.js moves the list, or the entry's tabs, out of the red header into
   #wordBody, the white page below it (Figma: Desktop / Search results,
   Desktop / Word entry; mobile: search-results, dream). */

/* The red no longer fills the screen once the list or entry is in. */
body.word-list .app-container, body.word-entry .app-container { min-height: 0; }
.word-body { display: block; box-sizing: border-box; width: 100%; background: var(--color-surface-default); padding-bottom: 110px; }

/* Results: a compact header (search and chips); only Home has the seal and title. */
body.word-list.search-active .header-shortcuts { display: flex; }
body.word-list .app-container > .search-header { display: none; }
body.word-list .app-container > #results { display: none; } /* empty once the list has moved out */

/* Results list: rows on white, 960 wide on desktop. */
.word-body .results-list-v2 { max-width: 960px; margin: 0 auto; padding: var(--space-6) 0 var(--space-6); }
.word-body .results-count { margin: 0; padding: 12px var(--space-6); background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: 15px; font-weight: 600; border-radius: var(--radius-sm); }
.word-body .result-group__title { margin: var(--space-6) var(--space-6) var(--space-2); color: var(--color-text-primary); }
.word-body .results-no-exact { margin: var(--space-4) var(--space-6) 0; color: var(--color-text-secondary); }
.word-body .results-list-v2 .result-group + .result-group, .word-body .results-list-v2 .results-no-exact + .result-group { margin-top: 0; }
.word-body .family-card { margin: 0; padding: var(--space-4) var(--space-6); border-radius: 0; border-bottom: 1px solid var(--color-border-subtle); box-shadow: none; background: var(--color-surface-default); }
.word-body .family-card:hover { box-shadow: none; background: var(--color-background-canvas); }
.word-body .family-card__head { gap: var(--space-5); min-height: 60px; }
.word-body .family-card__audio { order: -1; width: 44px; height: 44px; font-size: 16px; }
.word-body .family-card__syllabary { font-family: 'Noto Sans Cherokee', sans-serif; font-size: 26px; color: var(--color-text-primary); }
.word-body .family-card__practical { font-size: 20px; color: var(--color-text-secondary); }
.word-body .family-card__pos { font-size: 16px; }
.word-body .family-card__translation { font-size: 18px; color: var(--color-text-primary); }
.word-body .family-card__chevron { color: var(--color-text-secondary); }
.word-body .family-card__forms { margin: var(--space-2) 0 0 64px; border-top-color: var(--color-border-subtle); }
.word-body .family-card__form + .family-card__form { border-top-color: var(--color-border-subtle); }
.word-body .family-card__form-syllabary { color: var(--color-text-primary); font-weight: 600; }
.word-body .results-more { margin: var(--space-6) auto 0; max-width: 320px; border-color: var(--color-action-primary); color: var(--color-action-primary); }
.word-body .results-empty__message, .word-body .results-empty__message * { color: var(--color-text-primary); }
.word-body .results-empty { margin: var(--space-4) var(--space-4) 0; background: var(--color-background-canvas); }

/* Entry header on the red: headword, gloss | practical, pronunciation, actions. */
body.word-entry .app-container { padding-bottom: var(--space-10); }
body.word-entry .dictionary-entry { max-width: 960px; margin-bottom: 0; }
body.word-entry .entry-header { padding: var(--space-3) var(--space-4) 0; }
body.word-entry .entry-header .headword-line { margin: 0 0 var(--space-3); }
body.word-entry .entry-header .headword { font-family: 'Noto Sans Cherokee', sans-serif; font-size: 28px; line-height: 1.2; }
body.word-entry .entry-header h3 { margin: var(--space-2) 0 0; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--color-text-inverse); }
body.word-entry .entry-header .pronunciation-label-tone { margin: 0; font-family: 'Futura', sans-serif; font-weight: 400; font-size: 16px; }
body.word-entry .entry-header .action-buttons { gap: var(--space-3); margin-top: var(--space-4); }
body.word-entry .entry-header .action-buttons button {
  flex: 0 0 auto; max-width: none; min-width: 0;
  flex-direction: row; gap: 10px;
  height: 48px; margin: 0; padding: 0 20px 0 18px;
  border-radius: 12px;
  background: var(--color-action-primary-hover);
  box-shadow: none;
  font-size: 16px;
}
body.word-entry .entry-header .action-buttons button:hover { background: var(--color-action-primary-pressed); transform: none; box-shadow: none; }
body.word-entry .entry-header .action-buttons button img { width: 24px !important; height: 24px !important; }
@media (max-width: 1023px) {
  /* Compact header: menu, Back, search and filter share one row (Figma mobile: dream). */
  body.search-active #search-input-container { padding: 0 44px 0 92px; }
  /* Square buttons, icon over label (Figma mobile). */
  body.word-entry .entry-header .action-buttons button { flex-direction: column; justify-content: center; gap: 4px; width: 76px; height: 72px; padding: 0; font-size: 12px; }
}

/* Tabs: a white bar under the header, then the content on the canvas grey. */
.word-body .tab-container { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; width: 100%; max-width: none; min-height: 0; margin: 0; border-radius: 0; background: var(--color-surface-default); box-shadow: none; }
.word-body .tab-header { grid-row: 1; display: flex; align-items: stretch; justify-content: center; box-sizing: border-box; padding: var(--space-3) calc(max(0px, (100% - 960px) / 2)) 0; margin: 0; background: var(--color-surface-default); border-bottom: 1px solid var(--color-border-subtle); }
.word-body .tab-button { flex: 1 1 0; font-weight: 500; margin: 0; padding: 14px 8px 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--color-text-secondary); font-family: 'Futura', 'Noto Sans Cherokee', sans-serif; font-size: 16px; }
.word-body .tab-button.active { color: var(--color-action-primary); border-bottom-color: var(--color-action-primary); }
.word-body .tab-content { grid-row: 2; grid-column: 1; display: block !important; visibility: hidden; box-sizing: border-box; width: 100%; max-width: 960px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); background: none; color: var(--color-text-primary); }
.word-body .tab-content.active { visibility: visible; }
.word-body .tab-content .section { border-bottom: 1px solid var(--color-border-subtle); padding-bottom: var(--space-6); margin-bottom: var(--space-6); }
.word-body .tab-content .section:last-child { border-bottom: 0; }
.word-body .tab-content .related-headword { font-family: 'Noto Sans Cherokee', 'Futura', sans-serif; font-size: 24px; font-weight: 600; color: var(--color-text-primary); }
.word-body .tab-content .related-headword a { color: inherit; }
.word-body .tab-content p { font-size: 17px; line-height: 1.5; }
.word-body .tab-content .pronunciation-label { color: var(--color-action-primary); font-size: 14px; letter-spacing: 0.84px; text-transform: uppercase; margin-bottom: var(--space-2); }
.word-body .example-sentence { border-left: 2px solid var(--color-border-strong); padding-left: 18px; }
.word-body .example-sentence .transcription { color: var(--color-text-secondary); font-style: italic; }
.word-body .speakers { color: var(--color-text-secondary); }

@media (min-width: 1024px) {
  body.word-entry .app-container { padding-bottom: var(--space-12); }
  body.word-entry .entry-header .headword { font-size: 40px; }
  body.word-entry .entry-header h3 { font-size: 24px; }
  body.word-entry .entry-header .pronunciation-label-tone { font-size: 20px; }
  .word-body .tab-button { font-size: 18px; }
  .word-body .tab-content { padding: var(--space-10) 0 96px; }
  .word-body .tab-content .related-headword { font-size: 30px; }
  .word-body .tab-content p { font-size: 19px; }
}

/* Back sits to the left of the search box on the word page: a pill with
   "Back" on desktop, an arrow-only circle on phones. */
#search-input-container { position: relative; }
#search-input-container .hback { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin: 0 12px 0 0; padding: 8px 16px; white-space: nowrap; font-family: 'Futura', 'Noto Sans Cherokee', sans-serif; }
#search-input-container .hback-icon { flex-shrink: 0; }
@media (max-width: 1023px) {
  #search-input-container .hback { right: auto; left: 46px; width: 40px; height: 40px; margin: 0; padding: 0; justify-content: center; }
  #search-input-container .hback span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Compact header (word page): the search box sits on the same line as the
   menu and filter icons, with less red above it. */
body.search-active .app-container { padding-top: 14px; }
body.search-active #search-input-container { margin-top: 0 !important; }
@media (max-width: 1023px) {
  body.search-active .sidebarIconToggle { top: 6px; }
  body.search-active .filter { top: 22px; }
}
@media (min-width: 1024px) {
  body.search-active .app-container { padding-top: 23px; }
}

/* Phones with a notch or Dynamic Island: the page runs under the status bar
   (viewport-fit=cover), so the header moves down by the status bar's height.
   In a browser the inset is 0 and nothing changes. */
@supports (padding-top: env(safe-area-inset-top)) {
  .app-container { padding-top: calc(var(--space-10) + env(safe-area-inset-top, 0px)); }
  .sidebarIconToggle { top: calc(40px + env(safe-area-inset-top, 0px)); }
  /* The drawer moves down by the same inset, so the X never sits on top of HOME. */
  #sidebarMenu { padding-top: calc(60px + env(safe-area-inset-top, 0px)); }
  /* History and Favorites panels: content and close X start below the status bar too. */
  .history-sidebar, .Favorites-sidebar { padding-top: calc(40px + env(safe-area-inset-top, 0px)); }
  #closeHistoryButton, #closeFavoritesButton { top: calc(8px + env(safe-area-inset-top, 0px)); }
  .filter { top: calc(53px + env(safe-area-inset-top, 0px)); }
  body.search-active .app-container { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  @media (max-width: 1023px) {
    body.search-active .sidebarIconToggle { top: calc(6px + env(safe-area-inset-top, 0px)); }
    body.search-active .filter { top: calc(22px + env(safe-area-inset-top, 0px)); }
  }
  @media (min-width: 1024px) {
    .app-container { padding-top: calc(var(--space-10) + env(safe-area-inset-top, 0px)); }
    .sidebarIconToggle { top: calc(14px + env(safe-area-inset-top, 0px)); }
    .filter { top: calc(29px + env(safe-area-inset-top, 0px)); }
    body.search-active .app-container { padding-top: calc(23px + env(safe-area-inset-top, 0px)); }
  }
}

/* ---- Audio player (audio-player.js), Figma "Dictionary / Desktop / Audio player" ---- */
.cn-audio { display: inline-flex; align-items: center; gap: var(--space-3); box-sizing: border-box; height: 44px; max-width: 100%; margin: var(--space-3) 0 0; padding: 0 18px 0 10px; border-radius: 22px; background: var(--color-surface-subtle); }
.cn-audio[hidden] { display: none; }
.cn-audio__play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0 0 0 1px; border: 0; border-radius: 50%; background: var(--color-action-primary); color: var(--color-action-on-primary); cursor: pointer; }
.cn-audio__play.is-playing { padding-left: 0; }
.cn-audio__play:hover { background: var(--color-action-primary-hover); }
.cn-audio__play:focus-visible, .cn-audio__track:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: 2px; }
.cn-audio__time { flex: none; font-family: 'Futura', sans-serif; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.cn-audio__track { position: relative; flex: 0 1 160px; width: 160px; min-width: 60px; height: 4px; border-radius: 2px; background: var(--color-border-subtle); cursor: pointer; }
.cn-audio__track::before { content: ""; position: absolute; inset: -10px 0; } /* a taller target than the 4px line */
.cn-audio__fill { height: 100%; width: 0; border-radius: 2px; background: var(--color-action-primary); }
/* Word of the Day card is charcoal (Semantic Dark). */
.container-wod .cn-audio { background: var(--color-neutral-900); } /* darker pill so it still shows on the #333 card */
.container-wod .cn-audio__time { color: var(--color-neutral-200); }
.container-wod .cn-audio__track { background: var(--color-neutral-600); }

/* ---- Example sentence (word page), Figma "Example" in Desktop / Word entry ---- */
.word-body .example-sentence { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-2); padding: 0 0 0 18px; border-left: 2px solid var(--color-border-strong); border-radius: 0; }
.word-body .example-sentence > * { margin: 0; }
.word-body .example-sentence > div:first-child { font-family: 'Noto Sans Cherokee', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.35; color: var(--color-text-primary); }
.word-body .example-sentence .transcription { padding: 0; font-family: 'Futura', sans-serif; font-style: italic; font-size: 15px; line-height: 1.4; color: var(--color-text-secondary); }
.word-body .example-sentence > .transcription + div { font-family: 'Futura', sans-serif; font-style: italic; font-size: 17px; line-height: 1.4; color: var(--color-text-primary); }
.word-body .example-sentence > hr { display: none; }
.word-body .example-sentence .speakers { display: block; margin: 0; font-size: 15px; font-style: italic; color: var(--color-text-secondary); }
.word-body .example-sentence .speakers img { width: 14px !important; margin-right: 6px; vertical-align: -1px; opacity: 0.7; }
.word-body .example-sentence .speakers a { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.word-body .example-sentence > div[id] > p { margin: 0; color: var(--color-text-secondary); font-size: 15px; } /* "Loading..." / "audio unavailable" message */
@media (min-width: 1024px) {
  .word-body .example-sentence > div:first-child { font-size: 24px; }
  .word-body .example-sentence .transcription { font-size: 17px; }
  .word-body .example-sentence > .transcription + div { font-size: 19px; }
  .word-body .example-sentence .speakers { font-size: 16px; }
}

/* Word page content sits on white, no grey sheet (Ngahine, 11 Oct). */

/* One search box size on every page: 40px, the same height as the Back button. */
#searchInput { height: 40px; font-size: 16px; padding-left: 50px; }
#searchSubmitButton { left: 16px; }
#searchSubmitButton .search-icon { width: 20px; height: 20px; }
#searchClearButton { height: 40px; }
#search-input-container .hback { box-sizing: border-box; height: 40px; }

/* Home header back to the original site's sizes (Ngahine, 11 Oct): 100px seal,
   24px title, 16px subtitle, 400px search box. Home has no shortcut chips (removed from index.html). */
#logo-title-container .seal { width: 100px; }
#logo-title-container h1 { font-size: 24px !important; }
#logo-title-container p { font-size: 16px !important; }
#search-input-container { max-width: 416px !important; }
@media (min-width: 1024px) {
  #logo-title-container .seal { width: 100px; }
  #logo-title-container h1 { font-size: 24px !important; }
  #logo-title-container p { font-size: 16px !important; }
  #search-input-container { max-width: 416px !important; }
}

/* No resize animation on the header: it used to animate padding, height and
   the seal/title (0.7s) whenever a page loaded or a search started. */
.app-container, #logo-title-container, #logo-title-container .seal { transition: none !important; }

/* Favourite star on each result (results-list.js), before the chevron. */
.family-card__fav { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-text-secondary); cursor: pointer; }
.family-card__fav svg { fill: none; stroke: currentColor; }
.family-card__fav.is-favorite { color: var(--color-accent-gold); }
.family-card__fav.is-favorite svg { fill: currentColor; }
.family-card__fav:hover { background: var(--color-background-canvas); }
.family-card__fav:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: 2px; }
/* Other forms: the star sits just left of the row's chevron. */
.family-card__form { position: relative; }
.family-card__form a .family-card__form-text { margin-right: 44px; }
.family-card__form > .family-card__fav { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); }

/* Favouriting: the star pops instead of a pop-up message. */
@keyframes fav-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35) rotate(-8deg); }
  65% { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1); }
}
.fav-pop svg, .fav-pop img, .fav-pop i { animation: fav-pop 0.45s ease-out; }
@media (prefers-reduced-motion: reduce) { .fav-pop svg, .fav-pop img, .fav-pop i { animation: none; } }

/* Headings lighter than body text: #525252, as on the live site. */
.home-greeting > p:first-child,
.word-body .family-card__syllabary,
.word-body .tab-content .related-headword,
.word-body .result-group__title { color: var(--color-text-secondary) !important; }

/* Pop-up messages (favourite added, copied): centred in the window. The old
   margin: 50% auto put the box half the page width down, off screen on desktops. */
#customAlertModal .modal-content {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  box-sizing: border-box; width: calc(100% - 32px); max-width: 420px; margin: 0;
}

/* Glossary (content.html): each row is one link to the word, with the same
   hover as the results list. */
#wordListItems .word-list-item { display: block; margin: 0; padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none; cursor: pointer; transition: background-color 0.15s; }
#wordListItems .word-list-item:hover { background-color: var(--color-background-canvas); }
#wordListItems .word-list-item:focus-visible { outline: 3px solid var(--color-gold-500); outline-offset: -3px; }

/* Close (X) on the History and Favorites panels: the same drawn X as the side
   menu (same shape, stroke and size), in the panel's text colour, with a 44px
   touch target. The buttons have aria-labels for screen readers. */
#closeHistoryButton, #closeFavoritesButton { right: 8px; width: 44px; height: 44px; padding: 0; font-size: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
#closeHistoryButton::before, #closeFavoritesButton::before { content: ""; width: 20px; height: 20px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='3' stroke-linecap='round' fill='none'/%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'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (min-width: 1024px) {
  #closeHistoryButton::before, #closeFavoritesButton::before { width: 24px; height: 24px; } /* matches the bigger desktop menu X */
}

/* Results header: the search row sits in the middle of the red, with 48px
   of red above and below the search box, at every screen size. The menu and
   filter icons move down with it so they stay level with the search box. */
body.word-list .app-container { padding-top: calc(38px + env(safe-area-inset-top, 0px)); padding-bottom: 38px; }
@media (max-width: 1023px) {
  body.word-list .sidebarIconToggle { top: calc(30px + env(safe-area-inset-top, 0px)); }
  body.word-list .filter { top: calc(46px + env(safe-area-inset-top, 0px)); }
}
@media (min-width: 1024px) {
  body.word-list .sidebarIconToggle { top: calc(29px + env(safe-area-inset-top, 0px)); }
  body.word-list .filter { top: calc(44px + env(safe-area-inset-top, 0px)); }
}