/* Website-only styles for the online counter (jap/). The Android app never loads this file. */

/* Home + theme buttons, on the side opposite the app's ? and ⚙ buttons */
.web-btns {
  position: absolute; inset-inline-start: 12px; top: calc(env(safe-area-inset-top) + 12px);
  display: flex; gap: 6px; z-index: 1; /* side by side: also fits the short header of the setup screen */
}
.web-btns .round-btn { display: grid; place-items: center; text-decoration: none; cursor: pointer; }

/* A browser cannot read the phone's volume buttons, so that switch is hidden */
.trow:has(.switch[data-key="volumeKeys"]) { display: none; }

/* Wide screens: keep the counter phone-sized and centred */
@media (min-width: 640px) {
  html { background: var(--tint); }
  body { max-width: 560px; margin: 0 auto; min-height: 100vh; box-shadow: 0 0 40px rgba(0, 0, 0, .12); }
}

/* Dark mode. The app sets --bg and --accent from the chosen religion theme as inline styles,
   so those two need !important; everything else derives from the tokens below. */
:root[data-theme="dark"] {
  --bg: #121018 !important;
  --accent: color-mix(in srgb, var(--c1) 55%, #fff) !important;
  --card: #1c1924;
  --text: #ece9f3;
  --muted: #a39db0;
  --tint: color-mix(in srgb, var(--c1) 22%, #1c1924);
  --border: color-mix(in srgb, var(--c1) 32%, #1c1924);
  color-scheme: dark;
}
/* Colours the app writes directly instead of through tokens */
:root[data-theme="dark"] .sheet { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .tab.active { background: var(--card); }
:root[data-theme="dark"] .switch { background: #3a3646; }
:root[data-theme="dark"] .swatch { border-color: var(--card); }
:root[data-theme="dark"] .sheet-btn.danger { background: #3a1d1d; border-color: #5a2a2a; color: #ffaaa0; }