/* CSP-113: the public pages (/s/<token>, /join, /f/<slug>, /@handle, /welcome) follow the
   Mini App's default palette. CSP-248: that is Michael's azure (app/tma/static/app.css
   `azure`), the same tokens by value. */
:root {
  --bg:#E8ECEF; --fg:#343C46; --muted:#5A6270; --accent:#087EB4; --accent-fg:#FFFFFF; --accent-ink:#076A99; --tint:#D6EAF4;
  /* CSP-200: one typography system — same stack + scale as the Mini App
     (app/tma/static/app.css), admin.css, the printable statement and the
     landing page, so the UI reads as one product. No webfont download. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Khmer", "Khmer Sangam MN", "Khmer OS System", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --leading: 1.45;
  --leading-tight: 1.2;
}
@media (prefers-color-scheme: dark) { :root { --bg:#171B20; --fg:#F3F4F6; --muted:#B4BAC2; --accent-ink:#5FB8E6; --tint:#143242; } }
html,body { margin:0; background:var(--bg); color:var(--fg); font-family: var(--font-sans); line-height: var(--leading); }
/* CSP-200: form controls and links don't inherit the page font by default. */
button, input, select, textarea, a { font: inherit; }
h1, h2, h3 { line-height: var(--leading-tight); }
h1 { font-size: var(--text-2xl); font-weight: 700; }
h2 { font-size: var(--text-xl); font-weight: 700; }
h3 { font-size: var(--text-lg); font-weight: 600; }
/* Khmer script needs more vertical room than Latin at the same font-size. */
:lang(km), [lang="km"], .km { line-height: 1.65; }
.page { max-width: 720px; margin: 0 auto; padding: 48px 16px; }
.hero h1 { color: var(--accent-ink); margin: 0 0 8px; }
.muted { color: var(--muted); }
.link-button { background:none; border:0; padding:0; color:var(--accent-ink); text-decoration:underline; cursor:pointer; font:inherit; }
.link { color: var(--accent-ink); text-decoration: underline; }
.link-active { color: var(--fg); font-weight: 700; text-decoration: none; }
/* CSP-168: EN/KM toggle on the legal pages (/privacy, /terms, /delete-account). */
.lang-toggle { margin: 0 0 16px; }
/* Shared with admin.css's own copy — legal/public pages load app.css, not admin.css. */
.prose-list { list-style: disc; padding-left: 1.4em; margin: 0; }
.prose-list li { padding: 5px 0; }
.footer-links { text-align: center; }
.footer-links a { color: inherit; }
.btn { display:inline-block; background:var(--accent); color:var(--accent-fg); padding:10px 18px; border-radius:12px; text-decoration:none; border:0; font:inherit; font-size:var(--text-base); font-weight:600; cursor:pointer; }
.btn-secondary { background:var(--tint); color:var(--fg); }
.btn-danger { background:#b91c1c; color:#fff; }
.inline-form { display:inline; margin: 8px 0; }
.footer { text-align:center; color:var(--muted); font-size: var(--text-xs); padding: 24px 16px; }
.banner { padding: 10px 14px; border-radius: 10px; font-weight: 600; background: var(--tint); }
.banner-warning { background: #7a1f1f; color: #fff; }
/* CSP-155: the share page is many players' first touch — inputs and buttons must be thumb-sized. */
.public-form label { display:block; font-weight:600; margin: 12px 0 6px; }
.public-form .input { display:block; width:100%; box-sizing:border-box; min-height:48px; padding:10px 14px; border:1px solid rgba(128,128,128,.4); border-radius:12px; font:inherit; font-size:var(--text-base); background:#fff; color:#1F1B18; }
.public-form .actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.public-form .actions .btn { min-height:48px; flex:1 1 140px; text-align:center; }
.public-status { margin-top: 16px; }
.public-status .btn { min-height:48px; }
.dev-login-table { width:100%; border-collapse: collapse; margin-top: 16px; }
.dev-login-table th, .dev-login-table td { text-align:left; padding: 8px 12px; border-bottom: 1px solid rgba(128,128,128,.25); }

/* ---- Kbach Phni Pleung watermark (CSP-42) -------------------------------
   Decorative only: fixed behind everything, never interactive, drawn in
   currentColor so light/dark needs no second asset. Kept faint enough that
   text contrast is untouched; denser screens (admin) use the -quiet variant. */
.kbach-watermark {
  position: fixed;
  right: -60px;
  bottom: -70px;
  width: 300px;
  height: auto;
  color: var(--fg);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.kbach-watermark-quiet { opacity: 0.03; width: 340px; }
@media (prefers-color-scheme: dark) {
  .kbach-watermark { opacity: 0.07; }
  .kbach-watermark-quiet { opacity: 0.05; }
}
@media (max-width: 560px) { .kbach-watermark { width: 240px; right: -50px; bottom: -56px; } }
@media print, (prefers-reduced-motion: reduce) and (prefers-contrast: more) { .kbach-watermark { display: none; } }
/* content sits above the ornament */
.page, .admin .adm-top, .admin .adm-shell { position: relative; z-index: 1; }

/* CSP-201: the public facility page's own small map, self-hosted Leaflet
   (app/tma/static/vendor/leaflet/, served at /app-static/vendor/leaflet/). */
.facility-map { height: 240px; border-radius: 12px; margin: 12px 0; overflow: hidden; z-index: 0; }
.map-popup-actions { display: flex; gap: 8px; margin-top: 6px; }
/* CSP-201 review P3: Leaflet ships its own default font stack/size — pin it
   back to the typography system (CSP-200) so a map popup reads like the
   rest of the page. */
.leaflet-container, .leaflet-popup-content { font-family: var(--font-sans); font-size: var(--text-sm); }

.kbach-rule { width: 34px; height: 16px; color: var(--muted); opacity: 0.55; }
.kbach-divider { display: flex; align-items: center; gap: 10px; margin: 22px 0; }
.kbach-divider::before, .kbach-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: currentColor; opacity: 0.18;
}

/* CSP-295: signed-out EN | KH switch, top right of every base.html page. */
.locale-switch { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 0; position: relative; z-index: 2; }
.locale-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--border, var(--muted)); border-radius: 8px;
  color: var(--fg, inherit); text-decoration: none;
  font-size: var(--text-xs); font-weight: 600;
}
.locale-switch a.active { border-color: var(--accent); color: var(--accent-ink, var(--accent)); }