/* ---- site theme: make the app read as part of truebuddha.org.nz (P2) --------
   The static replica's own palette and font stack, copied from
   site/mirror/httpdocs/_lib/global.css so the two halves cannot drift:

     panel #FFC · band #e9f18a · band lines #CC3/#AA0 · glow #DA0
     ink #003 · muted #666 · temple red #c00/#900 · deep green #390/#690

   Font: the site's stack puts the Latin family first, so digits and English take
   Helvetica/Verdana while Han falls back to JhengHei — that is exactly the
   "numbers use the English font" rule, with no second font file.            */

:root {
  --site-panel: #ffc;
  --site-band: #e9f18a;
  --site-band-line-top: #cc3;
  --site-band-line-bottom: #aa0;
  --site-glow: #da0;
  --site-ink: #003;
  --site-ink-soft: #666;
  --site-red: #c00;
  --site-red-deep: #900;
  --site-green: #390;
  --site-green-deep: #690;
  --font-site: Helvetica, Verdana, Geneva, "Microsoft JhengHei", "LiHei Pro", sans-serif;
  --font-number: Helvetica, Arial, "Microsoft JhengHei", "LiHei Pro", sans-serif;
}

/* One font for the whole page, like the replica. */
body {
  font-family: var(--font-site);
  color: var(--site-ink);
}

/* Numbers, money, dates and quantities line up in columns and never fall back to
   a Han glyph, so a total or a phone number reads as it does on the static pages. */
table,
.amount,
.tabular,
input[type="number"],
input[type="tel"],
input[type="text"][inputmode="numeric"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The 4 module tabs, drawn like the replica's own tab strip
   (分類輔助: 日曆轉換 / 持咒規劃 / 術語詞表 / 文檔下載) instead of dark chips.
   `switchMainTab()` also applies these two classes, so the JS and the first paint
   agree. */
.site-tab {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  font-size: .75rem;
  line-height: 1.1;
  border: 1px solid var(--site-band-line-top);
  border-bottom: none;
  border-radius: 8pt 8pt 0 0;
  background: #fff;
  color: var(--site-ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.site-tab:hover {
  background: #fffef0;
  color: var(--site-red-deep);
}

.site-tab:focus-visible {
  outline: 2px solid var(--site-red-deep);
  outline-offset: 1px;
}

.site-tab--active {
  background: var(--site-panel);
  color: var(--site-red-deep);
  font-weight: 700;
  border-color: var(--site-band-line-bottom);
  box-shadow: 0 -2px 6px rgba(128, 64, 64, .18);
}

@media (min-width: 640px) {
  .site-tab { padding: .5rem 1rem; font-size: .875rem; }
}

#mainTabBar {
  background: var(--site-band);
  border-top: 1px solid var(--site-band-line-top);
  border-bottom: 1px solid var(--site-band-line-bottom);
  padding: 4px 6px;
  gap: 4px;
}

@media print {
  #mainTabBar { display: none !important; }
}