/* LangNation Dictionary — shared mobile shell.
   Linked last from every page that renders the Dictionary header, so the
   Dictionary home, dashboard, grammar, Amtsdeutsch and the user portal all get
   one header, one drawer and one set of touch targets instead of five.
   Loaded after each page's own <style>, which is what lets these rules win. */

@media (max-width: 640px) {

  /* ── Header ───────────────────────────────────────────────────────────── */

  :root { --ln-header-h: 56px; }

  /* The School's header is a full-width bar pinned to the top of the window.
     .dc-top sits inside .dc-wrap, which is 780px wide inside a 20px gutter, so a
     background on it could never reach the screen edges — that is why the bar
     looked like a floating panel in a different colour rather than a header.
     Taking it out of flow and pinning it to the viewport fixes both.

     position: fixed rather than sticky, and an opaque background rather than a
     blurred translucent one: a translucent sticky bar repaints against moving
     content and visibly shivers while scrolling on iOS. */
  .dc-top,
  .dc-sticky .dc-top,
  .dc-wrap-focus .dc-top {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1300 !important;
    box-sizing: border-box;
    height: calc(var(--ln-header-h) + env(safe-area-inset-top));
    margin: 0 !important;
    padding:
      env(safe-area-inset-top)
      max(16px, env(safe-area-inset-right))
      0
      max(16px, env(safe-area-inset-left)) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--paper) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
  }

  /* Content starts below the bar. .dc-root owns the page gutter
     (32px 20px 80px), so the top value is replaced rather than added to. */
  .dc-root {
    padding-top: calc(var(--ln-header-h) + env(safe-area-inset-top) + 12px) !important;
  }

  /* The search field pins under the header instead of under a moving target. */
  .dc-search {
    top: calc(var(--ln-header-h) + env(safe-area-inset-top)) !important;
  }

  /* Crest only. The wordmark costs about half the row on a 375px screen, and
     the eyebrow underneath already says which product this is. */
  .dc-top .ln-brand-copy { display: none; }
  .dc-top .ln-brand-crest .ln-crest { width: 32px; height: 36px; }
  .dc-top .dc-home { flex: 0 0 auto; display: inline-flex; align-items: center; }

  /* Drop the frosted pill. The School sets its buttons straight on the page; a
     pill around four already-bordered children reads as a box in a box. */
  .dc-header-actions {
    padding: 0 !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* One shape for every control, matching the School's .icon-btn. The avatar is
     deliberately NOT in this list: it carries its photo as a background-image,
     and the `background` shorthand here would erase it. */
  .dc-header-actions .dc-theme,
  .dc-header-actions .ln-home-btn,
  .dc-header-actions .ln-hdr-zone .ln-login-btn,
  .dc-header-actions .dc-menu-btn {
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--line2) !important;
    border-radius: 11px !important;
    background: var(--card) !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    font-size: 16px;
    line-height: 1;
    transform: none !important;
  }
  .dc-header-actions .dc-theme:hover,
  .dc-header-actions .ln-home-btn:hover,
  .dc-header-actions .ln-hdr-zone .ln-login-btn:hover,
  .dc-header-actions .dc-menu-btn:hover {
    border-color: var(--ink) !important;
    background: var(--soft) !important;
    box-shadow: none !important;
  }
  .dc-header-actions svg { width: 18px; height: 18px; }

  /* The avatar: same 40px square as its neighbours, but only background-COLOR is
     set, so the photo auth.js assigns inline still shows. */
  .dc-header-actions .ln-avatar-wrap > .ln-user-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 11px !important;
    border: 1px solid var(--line2) !important;
    background-color: var(--rust) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    font-size: 15px;
  }

  /* Sign In keeps its person icon; the word is carried by title and aria-label. */
  .dc-header-actions .ln-login-label { display: none !important; }
  .dc-header-actions .ln-login-ic { display: inline-grid !important; place-items: center; }
  .ln-hdr-zone { gap: 8px !important; display: inline-flex; align-items: center; }
  .ln-welcome { display: none !important; }

  /* Menu becomes a hamburger. font-size:0 hides the word without removing it
     from the accessibility tree. */
  .dc-header-actions .dc-menu-btn { font-size: 0 !important; }
  .dc-header-actions .dc-menu-btn::before { content: "\2630"; font-size: 18px; line-height: 1; }

  /* ── Homepage density ─────────────────────────────────────────────────── */

  .dc-title { display: none !important; }
  .dc-eyebrow { margin: 2px 0 10px !important; }
  .dc-search { padding: 6px 0 10px !important; }
  .dc-sticky { padding-bottom: 0 !important; }

  /* Quiz and Flashcards leave the homepage but stay in the Study drawer and in
     the PWA shortcuts, so nothing becomes unreachable. */
  .dc-studybar .dc-studybtn-quiz,
  .dc-studybar .dc-studybtn-cards { display: none !important; }
  .dc-studybar { gap: 8px; margin: 10px 0 14px !important; flex-wrap: wrap; }
  .dc-chiprow { margin-bottom: 12px; }

  /* ── One flat page colour ─────────────────────────────────────────────── */

  /* .dc-root paints two big radial glows over the paper. On a phone they run
     out around the middle of the screen and leave a visible seam, so the page
     looked like two tones. The glows still read well on a wide layout. */
  .dc-root { background: var(--paper) !important; }
  .dc-search { box-shadow: none !important; }

  /* ── Hero controls ────────────────────────────────────────────────────── */

  /* The direction control is now one dropdown, so the row has room for the
     regional picker beside it instead of wrapping onto a second line. */
  .dc-mode-trigger { min-width: 86px; padding: 8px 8px 8px 10px; font-size: 11.5px; gap: 6px; }
  .dc-mode-menu { min-width: 0; padding: 4px; }
  .dc-mode-opt { padding: 7px 9px; font-size: 12px; }

  /* "Meaning in" costs more width than it earns on a phone: the dropdown
     already names a language, and the full label returns above 640px. */
  .dc-controls { gap: 7px !important; flex-wrap: wrap !important; position: relative; align-items: flex-start; }
  .dc-regional-label { display: none !important; }
  .dc-regional-trigger {
    min-width: 0; gap: 5px; padding: 8px 8px 8px 10px; font-size: 12px;
    border-radius: 9px;
  }
  /* The picker is the elastic one: Auto and Search keep their size and this
     absorbs whatever is left, ellipsising only on very narrow screens. */
  .dc-regional-col { flex: 1 1 auto; min-width: 0; }
  .dc-regional-dd { max-width: 100%; }
  /* Anchored to the picker's column and grown leftwards from its right edge:
     stretching it across the row left a wide empty margin beside the language
     names, and anchoring it to the left ran it off the screen. The cap keeps
     it clear of the screen edge whatever the longest name turns out to be. */
  .dc-regional-dd { position: static; }
  .dc-regional-col { position: relative; }
  .dc-regional-menu {
    left: auto !important; right: 0 !important;
    width: max-content !important;
    min-width: 160px !important;
    max-width: 238px !important;
  }
  .dc-regional-opt { padding: 8px 10px; font-size: 13.5px; }
  .dc-regional-scroll { max-height: 264px; padding: 4px; }

  /* index.html put Search before the language picker so it sat beside the old
     two-button direction segment. With one compact dropdown the row reads
     left to right instead: what, into what, go. */
  .dc-mode-dd     { order: 0 !important; }
  .dc-regional-col { order: 1 !important; flex: 0 1 auto; min-width: 0; }
  .dc-go-mobile   { order: 2 !important; }
  /* The prompt now lives inside .dc-regional-col, directly under the picker and
     exactly as wide, so it neither overlaps Clear nor spans the whole row. */
  .dc-regional-tip { margin: 0 !important; }
  .dc-regional-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dc-go-mobile {
    margin-left: 0; flex: 0 0 auto;
    min-height: 36px; padding: 0 12px; border-radius: 9px;
    display: inline-flex; align-items: center;
  }

  /* 44px is the smallest comfortable touch target; the mic sits inside the
     input frame so it does not cost the row any height. */
  .dc-mic { width: 38px; }
  .dc-go { padding: 0 16px; }

  /* ── Word of the day ──────────────────────────────────────────────────── */

  /* The panel is already full width; a phone just needs it a little tighter. */
  .dc-studybar .dc-wod { padding: 10px 12px 10px 16px; }
  .dc-studybar .dc-wod b { font-size: 17px; }
  .dc-wod-card { max-width: 340px; padding: 20px 16px 16px; }
  .dc-wod-word { font-size: 26px; }

  /* The "Try" suggestions duplicate what Word of the Day and Recent already
     offer, and they were the widest row in the hero. Gone on a phone; the full
     row still shows above 640px. */
  .dc-chiprow-try { display: none !important; }

  /* ── School promotion ─────────────────────────────────────────────────── */

  /* A clear gap above the card so it reads as a separate thing from the search
     controls rather than the next row of them. */
  .school-promo {
    position: relative;
    display: block !important;
    padding: 12px !important;
    margin: 26px 0 56px !important;
    gap: 0 !important;
  }
  .school-promo-copy { gap: 4px; }
  .school-promo-eyebrow {
    font-size: 9.5px !important;
    margin: 0 !important;
    padding-right: 40px;
    line-height: 1.3 !important;
  }
  .school-promo h2 {
    font-size: 15px !important;
    line-height: 1.22 !important;
    margin: 3px 0 !important;
    padding-right: 40px;
  }
  /* The description goes entirely on a phone. The heading already makes the
     offer and the button says what to do about it; the sentence was the tallest
     thing in the card and the page it links to repeats it anyway. */
  .school-promo p { display: none !important; }
  .school-promo-actions {
    display: flex !important;
    gap: 6px !important;
    align-items: center;
    flex-wrap: nowrap !important;
    margin-top: 9px !important;
  }
  .school-promo-primary,
  .school-promo-secondary {
    font-size: 12.5px !important;
    padding: 8px 10px !important;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .school-promo .school-logo { position: absolute; top: 12px; right: 12px; }
  .school-promo .school-logo .ln-crest { width: 28px; height: 32px; }
  .school-promo .school-logo .ln-brand-copy { display: none; }

  /* Ask Lina floats bottom-right; keep the last card clear of it. */
  .dc-wrap { padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important; }

  /* The promotion belongs at the foot of the home screen, not floating in the
     middle of it. Making the home screen a full-height column and giving the
     card `margin-top: auto` moves the leftover space above the card instead of
     below it, so it settles just above the Ask Lina pill. Home screen only:
     results and the study panels manage their own scroll height. */
  /* .dc-sticky, not .dc-wrap: on the home screen .dc-sticky is .dc-wrap's only
     child and holds everything, so a flex column on .dc-wrap has nothing to
     distribute. */
  .dc-wrap:not(.dc-wrap-focus):not(.dc-wrap-results) .dc-sticky {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - var(--ln-header-h) - 34px);
  }
  .dc-wrap:not(.dc-wrap-focus):not(.dc-wrap-results) .dc-sticky > * { flex: 0 0 auto; }
  .dc-wrap:not(.dc-wrap-focus):not(.dc-wrap-results) .dc-studybar {
    order: 90;
    /* auto, not a fixed value: the leftover space goes above the pair */
    margin-top: auto !important;
    margin-bottom: 0 !important;
  }
  .dc-wrap:not(.dc-wrap-focus):not(.dc-wrap-results) .school-promo {
    order: 91;
    margin-top: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* clears the Ask Lina pill, which is ~62px tall above the safe area */
    margin-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  /* ── Account dropdown ─────────────────────────────────────────────────── */

  /* Appended to document.body, so it needs the UI font named explicitly and its
     own clearance below the fixed header. */
  .ln-menu {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    top: calc(var(--ln-header-h) + env(safe-area-inset-top) + 8px) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    max-height: calc(100dvh - var(--ln-header-h) - env(safe-area-inset-top) - 24px) !important;
    overflow-y: auto;
  }

  /* ── Navigation drawer geometry ───────────────────────────────────────── */

  .study-menu-overlay {
    align-items: stretch !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    background: rgba(6, 14, 28, 0.55) !important;
    z-index: 2000;
    animation: ln-fade-in .18s ease;
  }
  @keyframes ln-fade-in { from { opacity: 0; } }

  .study-menu {
    width: min(360px, 88vw) !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--line) !important;
    border-radius: 0 !important;
    background: var(--paper) !important;
    /* The drawer is appended to <body>, so it inherits the document's default
       text colour rather than the app shell's. */
    color: var(--ink) !important;
    box-shadow: -18px 0 44px rgba(6, 14, 28, .34) !important;
    display: flex !important;
    flex-direction: column;
    /* The status bar and the home indicator both sit over this panel. */
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(12px, env(safe-area-inset-bottom))
      12px !important;
    animation: ln-drawer-in .24s cubic-bezier(.22, .61, .36, 1);
  }
  @keyframes ln-drawer-in { from { transform: translateX(100%); } }
}

/* ── Site footer ─────────────────────────────────────────────────────────
   Appended to <body> by legal-footer.js, so it inherits the theme tokens from
   :root and sits below whatever each page lays out. */

/* The footer is appended to <body>, which sits below .dc-root's own
   background — without this the strip under the footer is the browser's
   default colour, which is black in a dark scheme. */
body { background: var(--paper); }

.ln-legal {
  max-width: 780px;
  margin: 34px auto 0;
  padding: 18px 20px calc(26px + env(safe-area-inset-bottom));
  /* Ask Lina floats bottom-right and would otherwise sit on top of the links. */
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.ln-legal-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px;
}
.ln-legal-links a {
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  padding: 4px 2px;
}
.ln-legal-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The German name sits under the English one rather than beside it, so the row
   stays one line on a narrow phone. */
.ln-legal-alt {
  display: block;
  font-size: 10.5px; font-weight: 500; color: var(--muted);
  letter-spacing: .02em;
}
.ln-legal-sep { color: var(--line2); font-size: 12px; }
.ln-legal-note {
  margin: 12px 0 0;
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 10.5px; letter-spacing: .06em; color: var(--muted);
}

/* ── Navigation rows ────────────────────────────────────────────────────────
   Not phone-only: the same markup renders in the desktop dropdown, and one
   compact row reads better in both. Only the drawer geometry above is scoped to
   small screens. */

.ln-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.ln-nav-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: .01em;
}
.ln-nav-title-ic { color: var(--gold); }
.ln-nav-close {
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.ln-nav-close:hover { border-color: var(--ink); background: var(--soft); }

/* The list scrolls; the header and the sound row stay put. */
.ln-nav-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}

.ln-nav-section {
  margin: 12px 0 4px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
}
.ln-nav-section:first-child { margin-top: 2px; }
/* The rule that separates one group from the next, in place of the per-row
   lines: it sits above the label that opens the group. */
.ln-nav-section + * ~ .ln-nav-section,
.ln-nav-section:not(:first-child) {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 10px;
}

/* One compact row: icon, label, optional badge, chevron. 50px tall, which clears
   the 44px minimum touch target without the card height it replaced. */
.ln-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .14s ease;
}
/* No rule between individual rows. A line under every one chopped the list into
   eight boxes; the separators belong between the groups, which is what the
   section labels already mark. */
.ln-nav-row:hover { background: var(--soft); }
.ln-nav-row:active { background: var(--soft); }
.ln-nav-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ln-nav-row[aria-current="page"] { color: var(--gold); font-weight: 600; }

.ln-nav-ic { width: 21px; height: 21px; flex: 0 0 auto; color: var(--muted); }
.ln-nav-row:hover .ln-nav-ic { color: var(--ink); }
.ln-nav-label { flex: 1 1 auto; min-width: 0; }
.ln-nav-chev { width: 17px; height: 17px; color: var(--line2); }

.ln-nav-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
}

/* Sound sits apart from the destinations: it changes a setting rather than
   navigating, and it used to shout in red for a state that is not an error. */
.ln-nav-sound {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  margin-top: 6px;
  padding: 0 8px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.ln-nav-sound:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ln-nav-sound[aria-checked="true"] .ln-nav-ic { color: var(--ink); }
.ln-nav-state { font-size: 12px; color: var(--muted); min-width: 22px; text-align: right; }

.ln-nav-switch {
  position: relative;
  width: 38px; height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--line2);
  transition: background .18s ease;
}
.ln-nav-switch.on { background: var(--gold); }
.ln-nav-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(6, 14, 28, .35);
  transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}
.ln-nav-switch.on .ln-nav-knob { transform: translateX(16px); }
.ln-nav-sound.is-toggling .ln-nav-switch {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 28%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .study-menu, .study-menu-overlay, .ln-nav-knob, .ln-nav-switch { animation: none; transition: none; }
}

/* Very small phones: let the header breathe by dropping the home button, which
   the crest already does — tapping it returns to the Dictionary home. */
@media (max-width: 360px) {
  .dc-header-actions .ln-home-btn { display: none !important; }
  .dc-header-actions { gap: 6px !important; }

  /* Below about 360px the two promotion links no longer fit on one line, and
     nowrap would push "Find your level" past the card edge. */
  .school-promo-actions { flex-wrap: wrap !important; }
  .school-promo-secondary { margin-top: 2px; }
}