/* siteChrome.css — shared top-nav chrome for every public page in this
   project: the .top-links bar (tool links + coffee/feedback/contact), the
   Traditional/Simplified script toggle, and the Anthropic API-key overlay.
   Populated/wired by siteChrome.js — see that file for the render/wire
   functions and CLAUDE.md's "Site chrome (siteChrome.js/css)" section for
   the full history.

   Assumes the :root palette (--bg/--surface/--border/--red/--gold/--text/
   --text-soft/--muted) and the 'IM Fell English'/'Noto Serif SC' fonts
   every page here already defines identically in its own inline <style> —
   this file styles the shared chrome only, it doesn't declare its own
   tokens (those stay page-owned, out of scope for this consolidation). */

/* ── Top nav: tool links + coffee/feedback/contact ──
   Sized/spaced entirely in px, not rem (2026-09-15, owner request — "scope
   the NAV so it always renders the same way"): every page here is
   supposed to define an identical :root palette, but flashcards.html
   alone also sets `html { font-size: 18px }` (for its own body-text
   sizing), which silently inflated every rem-based measurement in this
   shared bar ~12.5% on that one page — the top nav visibly using a larger
   font/bigger padding there than on StudyDict/grammar/reader/chengyu/
   studytranslation, none of which override the root size. Every px value
   below is that same rem value computed against the 16px root the other
   five pages actually use (e.g. 0.75rem -> 12px), so this preserves their
   exact existing rendering pixel-for-pixel and only changes
   flashcards.html's. `.zh`'s own margin-right stays in rem (see its own
   rule) since that class is also used well outside this nav (a page's own
   primary-action buttons, e.g. "查詢 Look Up") where scaling with that
   page's own type size is correct, not a bug to fix — only .top-links .zh
   gets the same px pin as everything else in this bar. */
.top-links {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 10;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: calc(100vw - 32px);
}
.top-links .zh { margin-right: 4px; }
/* Small bilingual prefix on a nav link or button — same shape as the
   script toggle's own .zh (繁體/简体), reused site-wide (including inside
   a page's own primary-action buttons, e.g. "查詢 Look Up") for a compact
   two-language label rather than a second class per component. Not
   italic even inside .contact-link, since an italic CJK font reads badly. */
.zh { font-family: 'Noto Serif SC', serif; font-style: normal; margin-right: 0.25rem; }
.contact-link {
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 6.4px 12.8px;
  border-radius: 2px;
  background: var(--surface);
  transition: all 0.2s;
}
.contact-link:hover { color: var(--gold); border-color: var(--gold); }
.coffee-link { color: var(--text-soft); border-color: var(--border); }
.coffee-link:hover { color: #FFDD00; border-color: #FFDD00; }

/* The current page's own nav link (2026-09-15, owner call — "always show
   all of the pages... just have the current page dimmed" instead of the
   bar's shape changing depending on which page omitted itself). Lower
   opacity rather than a different color/border, so it still visibly
   belongs to the same row of links — just plainly "you're already here" —
   and skips the hover color change other links use, since hovering it
   doesn't lead anywhere new. */
.contact-link.current-page { opacity: 0.45; }
.contact-link.current-page:hover { color: var(--text-soft); border-color: var(--border); }

/* Small "Beta" flag on a still-experimental tool link (flashcards, for
   now) — a TOOLS entry opts in via `beta: true` in siteChrome.js rather
   than this being link-specific markup, so any future experimental tool
   link picks up the same treatment for free. --red rather than --gold
   (the hover accent every other link already uses) so it reads as a
   distinct "heads up" flag, not just emphasis. */
.beta-badge {
  display: inline-block;
  font-family: 'IM Fell English', serif;
  font-style: normal;
  font-size: 9.6px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 0.8px 6.4px;
  margin-left: 6.4px;
  vertical-align: middle;
}

/* Two-row labels (2026-09-30, trial): Chinese on top, English below, on the
   four tool links, the Menu button and the Back button. The dropdown panel's
   own links stay single-line. */
.top-links > a.contact-link, .top-links .nav-more-btn, .nav-back-btn {
  text-align: center; line-height: 1.25;
}
.top-links > a.contact-link .zh, .top-links .nav-more-btn .zh, .nav-back-btn .zh {
  display: block; margin-right: 0;
}
/* Beta flag sits beside the Chinese label (2026-09-30), not on the English line. */
.top-links .nav-zh-line { display: block; white-space: nowrap; }
.top-links > a.contact-link .nav-zh-line .zh { display: inline; }
.top-links .nav-zh-line .beta-badge { margin-left: 4px; }

/* ── Traditional/Simplified script toggle — pinned opposite .top-links.
   Persistent page chrome: on a page that renders dictionary-style content
   it drives that page's own render layer from outside (see
   siteChrome.js's createScriptToggle), so it stays visible whether or not
   a result is currently on screen.

   Deliberately carries NO position/top/left/z-index of its own — two real
   contexts need different positioning, and only the caller knows which:
   StudyDict.html uses it standalone (fixed, own top-left corner) while
   reader.html/chengyu.html nest it inside their own .nav-left wrapper
   (already fixed) alongside a back-link, where the toggle itself must
   stay in normal flow or it would escape that wrapper's flex column and
   duplicate its positioning. A standalone caller supplies its own
   position:fixed (see StudyDict.html's own small remaining rule); a
   nesting caller supplies nothing extra, since static/in-flow is already
   what it wants. ── */
.nav-script-toggle {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: 'IM Fell English', serif;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--border);
  padding: 0.4rem 0.8rem;
  border-radius: 2px;
  background: var(--surface);
  transition: border-color 0.2s;
}
.nav-script-toggle:hover { border-color: var(--gold); }
.nav-script-toggle .zh { font-family: 'Noto Serif SC', serif; margin-right: 0.3rem; }
/* Two-row options (2026-09-30): Chinese over English, like the nav links. */
.nav-script-toggle { align-items: center; }
.nav-script-toggle .toggle-opt { text-align: center; line-height: 1.25; }
.nav-script-toggle .toggle-opt .zh { display: block; margin-right: 0; }
.nav-script-toggle .sep { color: var(--muted); opacity: 0.5; }
/* Scoped to the nav toggle specifically, not a bare .toggle-opt rule — so
   this can't collide with dictEntry.css's own, separately-styled
   .toggle-opt used inside a rendered entry's register toggle. A page that
   loads both (StudyDict.html) gets identical values from either; a page
   that loads only this file (reader.html/chengyu.html, neither of which
   has dictEntry.css) still gets correct styling on its own. */
.nav-script-toggle .toggle-opt { color: var(--text-soft); opacity: 0.6; transition: opacity 0.2s, color 0.2s; }
.nav-script-toggle .toggle-opt.active { color: var(--gold); opacity: 1; font-weight: 700; }

/* ── "More" admin dropdown (2026-09-17) — everything that isn't one of the
   four main tool links (Profile/Help/coffee/Feedback/Contact) collapses
   behind this one button instead of sitting inline in .top-links, which is
   what was crowding/wrapping the bar. Positioned relative so the panel can
   anchor to it regardless of .top-links' own fixed/static state (mobile). */
.nav-more { position: relative; }
.nav-more-btn {
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6.4px 12.8px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
}
.nav-back-btn {
  font-family: 'IM Fell English', serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6.4px 12.8px;
  border-radius: 2px;
  cursor: pointer;
}
.nav-back-btn:hover { color: var(--gold); border-color: var(--gold); }
.nav-more-btn:hover, .nav-more-btn[aria-expanded="true"] { color: var(--gold); border-color: var(--gold); }
.nav-more-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  max-width: calc(100vw - 32px);
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
/* `display: flex` lives ONLY here, not on the bare .nav-more-panel rule
   above — that rule and the browser's own `[hidden] { display: none }`
   default have equal specificity (one attribute selector each), so a
   plain `display: flex` on .nav-more-panel would win the cascade by
   source order and silently defeat the `hidden` attribute JS toggles
   (found live during testing: the panel rendered open on page load).
   `:not([hidden])` only ever matches when the attribute is absent, so it
   never competes with the UA rule for the same element at the same time. */
.nav-more-panel:not([hidden]) { display: flex; }
.nav-more-panel .contact-link { text-align: left; }

/* Below this width .top-links wraps onto a second row, which used to just
   push further down harmlessly — now that a standalone .nav-script-toggle
   (StudyDict.html) is pinned fixed at the opposite corner, that second row
   can grow tall enough to overlap it. Un-fixing .top-links and letting it
   sit in normal document flow sidesteps that regardless of which corner
   layout a given page uses. A page with its own .nav-script-toggle
   positioning (standalone-fixed or nested-in-.nav-left) handles that
   element's own mobile behavior itself — see StudyDict.html's own rule
   and reader.html/chengyu.html's own .nav-left reset. */
@media (max-width: 640px) {
  .top-links {
    position: static;
    margin: 0 auto 16px;
    justify-content: center;
    max-width: 100%;
  }
}

/* ── Anthropic API-key overlay (AI-calling pages only) ── */
.key-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 1.5rem;
}
.key-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 2rem; width: 100%; max-width: 420px;
}
.key-box h2 {
  font-size: 0.75rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 1rem; font-weight: 400;
}
.key-box input {
  width: 100%; background: var(--bg);
  border: 1px solid var(--border); color: var(--text);
  padding: 0.7rem 0.9rem;
  font-family: 'IM Fell English', serif; font-size: 0.95rem;
  border-radius: 1px; outline: none; margin-bottom: 0.75rem;
  transition: border-color 0.2s;
}
.key-box input:focus { border-color: var(--gold); }
.key-box-hint {
  font-size: 0.78rem; font-style: italic;
  color: var(--muted); margin-bottom: 1rem; line-height: 1.5;
}
.key-box-row { display: flex; gap: 0.5rem; }
.btn-primary {
  background: var(--red); color: var(--text); border: none;
  padding: 0.6rem 1.2rem;
  font-family: 'IM Fell English', serif; font-size: 0.9rem;
  cursor: pointer; border-radius: 1px; transition: opacity 0.2s; flex: 1;
}
.btn-primary:hover { opacity: 0.85; }
.btn-skip {
  background: none; color: var(--muted);
  border: 1px solid var(--border);
  padding: 0.6rem 1rem;
  font-family: 'IM Fell English', serif; font-size: 0.9rem;
  cursor: pointer; border-radius: 1px; transition: all 0.2s;
}
.btn-skip:hover { border-color: var(--muted); color: var(--text); }

/* ── Deploy-timestamp footer (siteChrome.js's renderDeployFooter) ──
   Deliberately in normal document flow, not position:fixed — a page's own
   content (esp. reader.html's long scrolling chapters) shouldn't have a
   permanently-pinned strip eating screen space for something this minor;
   it just becomes the last thing on the page after everything else. */
.deploy-footer {
  text-align: center;
  font-family: 'IM Fell English', serif;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--muted);
  opacity: 0.6;
  padding: 2rem 1rem 1rem;
}

/* Profile menu item's sign-in indicator (2026-09-30): a green check when
   signed in, a red X when anonymous, in place of the old "(Signed in)" text. */
.nav-profile-status { font-style: normal; font-weight: 700; margin-left: 4px; }
.nav-profile-status.signed-in { color: #3fb950; }
.nav-profile-status.anon { color: #e5534b; }


/* First-visit welcome popup (2026-10-04, siteChrome.js maybeShowWelcome) —
   deliberately lighter than .key-overlay: a dimmer backdrop, a close button
   and Esc/backdrop-click to dismiss. z-index sits below the key overlay (100)
   and above the sign-in banner (90). */
.welcome-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 95; padding: 1.2rem;
}
.welcome-box {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 1.8rem 1.8rem 1.5rem; width: 100%; max-width: 480px;
  max-height: calc(100vh - 2.4rem); overflow-y: auto;
  font-family: 'IM Fell English', serif; color: var(--text);
}
.welcome-box h2 {
  font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-soft); margin: 0 1.5rem 1.2rem; font-weight: 400; text-align: center;
}
.welcome-box h2 .zh { display: block; font-family: 'Noto Serif SC', serif; color: var(--gold); letter-spacing: 0.1em; text-transform: none; font-size: 1.5rem; margin-bottom: 0.4rem; }
.welcome-box h2 .welcome-title-en { display: block; font-size: 0.95rem; letter-spacing: 0.2em; }
.welcome-close {
  position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: none;
  color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem;
}
.welcome-close:hover { color: var(--text); }
.welcome-lead { font-size: 1.1rem; line-height: 1.55; margin: 0 0 0.4rem; }
.welcome-zh { font-family: 'Noto Serif SC', serif; font-size: 0.82rem; color: var(--gold); line-height: 1.7; margin: 0 0 1rem; }
.welcome-list { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.welcome-list li { color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; margin-bottom: 0.5rem; padding-left: 0.9rem; position: relative; }
.welcome-list li::before { content: '·'; position: absolute; left: 0; color: var(--red); }
.welcome-list strong { color: var(--text); font-weight: 400; }
.welcome-list .zh { font-family: 'Noto Serif SC', serif; color: var(--gold); margin-right: 0.35rem; font-size: 0.85rem; }
.welcome-actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.welcome-actions .btn-primary { margin: 0; }
.welcome-more { color: var(--text-soft); font-size: 0.88rem; text-decoration: none; border-bottom: 1px solid var(--border); }
.welcome-more:hover { color: var(--gold); border-color: var(--gold); }

.welcome-feedback { color: var(--text-soft); font-size: 0.85rem; line-height: 1.55; margin: 0 0 1.2rem; border-top: 1px solid var(--border); padding-top: 0.9rem; }
.welcome-feedback .zh { display: block; font-family: 'Noto Serif SC', serif; color: var(--gold); font-size: 0.8rem; margin-bottom: 0.2rem; }
.welcome-feedback strong { color: var(--text); font-weight: 400; }