/* Unified app banner across the Chinese-reader ecosystem.
   Used by Reader (/), Voice Lab (/lab), News (/news), and DLPT (cross-domain).
   Replaces the per-page breadcrumb kicker. Sticky, low-chrome.

   Each host (ArticleReader + DLPT) carries a verbatim copy of this file.
   Keep them byte-identical so a future hamburger-menu change can be a single
   git scp pair.

   Theming: all colors come from CSS vars defined in styles.css :root and
   :root[data-theme="dark"]. No hardcoded hex here — keeps dark mode honest. */

.appbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr auto auto;   /* default: name | spacer | lang | hamburger */
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--appbar-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  font-family: "Newsreader", serif;
}
.appbar.has-back {
  grid-template-columns: auto auto 1fr auto auto;  /* back | name | spacer | lang | hamburger */
}

.appbar-back {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px 0; /* visual centering of the "‹" glyph */
  font-family: -apple-system, "Helvetica Neue", sans-serif;
  font-weight: 500;
}
.appbar-back:hover:not(:disabled) {
  border-color: var(--accent-soft);
  color: var(--accent);
}
.appbar-back:active:not(:disabled) { transform: translateY(1px); }
.appbar-back:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Language button — first-class topbar affordance sits between the spacer
   and the hamburger. Shows the current target-language label + a tiny
   chevron; click opens a separate dropdown of language options. */
.appbar-lang {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  min-height: 44px;
  padding: 0 10px;
  font-family: "Newsreader", serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar-lang:hover { border-color: var(--accent-soft); color: var(--accent); }
.appbar-lang:active { transform: translateY(1px); }
.appbar-lang[aria-expanded="true"] {
  background: var(--accent);
  color: var(--card);
  border-color: var(--accent);
}
@media (max-width: 380px) {
  .appbar-lang { max-width: 6rem; padding: 0 6px; font-size: 13px; }
}

/* Position the language menu under the language button (sits just before
   the hamburger on the right). Mirror the hamburger menu styling otherwise. */
.appbar-langmenu {
  right: 56px;   /* leaves room for the hamburger to its right */
  min-width: 160px;
}

.appbar-name {
  font-family: "Newsreader", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.03em;
  color: var(--accent);
  user-select: none;
}

.appbar-spacer { /* keeps the title centered-ish without affecting layout */ }

.appbar-hamburger {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.appbar-hamburger:hover { border-color: var(--accent-soft); color: var(--accent); }
.appbar-hamburger:active { transform: translateY(1px); }
.appbar-hamburger[aria-expanded="true"] {
  background: var(--accent);
  color: var(--card);
  border-color: var(--accent);
}

.appbar-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 8px;
  min-width: 180px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 10px 28px -10px rgba(var(--shadow-rgb), 0.45);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "Newsreader", serif;
}
.appbar-menu[hidden] { display: none; }
.appbar-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.12s;
}
.appbar-menu a:hover { background: var(--accent-tint); }
.appbar-menu a[aria-current="page"] {
  background: var(--accent-tint-strong);
  font-weight: 600;
  color: var(--accent);
}
.appbar-menu a .badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
}

.appbar-menu-divider {
  height: 1px;
  background: var(--rule);
  margin: 4px 6px;
}

.appbar-menu-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.55;
  padding: 6px 14px 2px;
  color: var(--ink-soft);
}
.appbar-menu-langgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 0 4px;
}
.appbar-menu-lang {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: "Newsreader", serif;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.appbar-menu-lang:hover { background: var(--accent-tint); }
.appbar-menu-lang[aria-checked="true"] {
  background: var(--accent-tint-strong);
  font-weight: 600;
  color: var(--accent);
}
.appbar-menu-lang[aria-checked="true"]::after {
  content: "✓";
  font-size: 13px;
}

.appbar-menu-reset {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-family: "Newsreader", serif;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.appbar-menu-reset:hover { background: var(--accent-tint); color: var(--accent); }
.appbar-menu-reset .badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
}
.appbar-menu-reset:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 480px) {
  .appbar { padding: 8px 12px; }
  .appbar-name { font-size: 15px; }
  .appbar-menu { right: 4px; min-width: 170px; }
}

/* Install-app modal — opens from the hamburger's "Install app" entry when
   the browser doesn't expose the native install prompt (iOS Safari, in-app
   webviews, etc). Positioned as a full-page backdrop with a card. */
.install-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.install-backdrop[hidden] { display: none; }
.install-panel {
  position: relative;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 28px 24px 24px;
  max-width: 30rem;
  width: 100%;
  font-family: "Newsreader", serif;
  box-shadow: 0 24px 60px -12px rgba(var(--shadow-rgb), 0.55);
}
.install-close {
  position: absolute;
  top: 10px;
  right: 12px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
}
.install-close:hover { background: var(--accent-tint); color: var(--accent); }
.install-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.4rem;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.install-lede {
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
  font-size: 0.98rem;
}
.install-native {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: var(--card);
  font-family: "Newsreader", serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0 0 1.2rem;
  min-height: 44px;
}
.install-native:hover { filter: brightness(1.05); }
.install-native:active { transform: translateY(1px); }
.install-steps {
  margin: 0.6rem 0 0.4rem;
  padding: 12px 14px 4px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
}
.install-steps.is-ios,
.install-steps.is-android {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.install-steps h3 {
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
}
.install-steps.is-ios h3,
.install-steps.is-android h3 { color: var(--accent); }
.install-steps ol {
  margin: 0 0 0.6rem 1.2rem;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.install-steps ol li { margin-bottom: 0.35rem; }
.install-steps ol li b { font-weight: 700; }
/* Small SVG-ish glyph for the iOS Share icon — an arrow rising out of a
   tray. Uses inline background so no external asset dependency. */
.ios-share {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l4 4h-3v9h-2V7H8l4-4zm-7 8v9a2 2 0 002 2h10a2 2 0 002-2v-9h-2v9H7v-9H5z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l4 4h-3v9h-2V7H8l4-4zm-7 8v9a2 2 0 002 2h10a2 2 0 002-2v-9h-2v9H7v-9H5z'/></svg>") center/contain no-repeat;
  color: var(--accent);
}
.install-foot {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 480px) {
  .install-panel { padding: 24px 18px 18px; border-radius: 14px; }
  .install-title { font-size: 1.3rem; }
}