/* A church's own look: type, card style and corners. These only override tokens, so every
   screen follows. The admin preview uses the same rules on a small sample (.pv-card). */

/* Modern: the device's own type. SF Pro on iPhone, iPad and Mac; the system face everywhere else. */
[data-fonts="modern"] {
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, Roboto, sans-serif;
  --font-serif: var(--font-system); --font-sans: var(--font-system);
}
[data-fonts="modern"] .welcome-title, [data-fonts="modern"] .sheet-title { font-weight: 600; letter-spacing: -0.025em; }
[data-fonts="modern"] .masthead-name { font-weight: 600; letter-spacing: -0.01em; }
[data-fonts="traditional"] { --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif; }
/* Editorial: Apple's New York serif for reading, system type for controls. */
[data-fonts="editorial"] {
  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif;
}
/* Friendly: rounded system type where the device has it (SF Rounded on Apple devices). */
[data-fonts="friendly"] {
  --font-serif: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

[data-corners="round"] { --radius-card: 30px; --radius-sheet: 36px; --radius-sm: 18px; }
[data-corners="square"] { --radius-card: 6px; --radius-sheet: 10px; --radius-sm: 6px; }

[data-cards="solid"] .card, [data-cards="solid"] .pv-card {
  background: var(--panel-solid);
  box-shadow: 0 16px 32px -22px var(--card-shadow);
}
[data-cards="outlined"] .card, [data-cards="outlined"] .pv-card {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--light) 55%, var(--glass-edge));
  box-shadow: none;
}

/* logo in the header, and on the welcome screen */
.masthead-logo { height: 36px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.masthead-name.has-logo::before { display: none; }
/* the stat line normally lines up under the name, past the glowing dot; with a logo it lines up with the logo's own edge */
#masthead:has(.has-logo) .masthead-stat { margin: 8px 0 0; }
.welcome-logo { display: block; margin: 0 auto 16px; max-height: 72px; max-width: 220px; width: auto; object-fit: contain; }

/* "Powered by We Pray": small, quiet, and out of the way of the dock, zoom buttons and header */
.powered {
  position: fixed; left: 22px; bottom: calc(env(safe-area-inset-bottom) + 14px); z-index: var(--z-chrome);
  font: italic 400 var(--text-xs) / 1.2 var(--font-serif); color: var(--text-faint); opacity: 0.72;
  text-decoration: none; padding: 5px 11px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--bg-0) 72%, transparent); backdrop-filter: blur(6px);
}
.powered:hover, .powered:focus-visible { opacity: 1; color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
.powered-welcome { display: inline-block; margin-top: 18px; position: static; background: none; backdrop-filter: none; }
@media (max-width: 960px) { #powered { display: none; } } /* the dock spans the bottom here; the welcome screen carries the link instead */