/* Reuses the dark/light theme's --bg/--panel/--text/--muted/--accent variables, defined globally in
   map.css's :root (map.css is linked on every page via App.razor, so it's available here without
   redefining anything). Shared by Privacy.razor and Terms.razor (.legal-page) and the two service pages,
   NotFound.razor and Error.razor, via StatusPage.razor (.status-page). */
.legal-page { min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: system-ui, sans-serif; padding: 40px 20px 80px; }
.legal-page .shell { width: min(720px, 92vw); margin: 0 auto; }
.legal-page h1 { font-size: 26px; margin: 0 0 4px; }
.legal-page .updated { color: var(--muted); font-size: 13px; margin: 0 0 32px; }
.legal-page h2 { font-size: 17px; margin: 28px 0 8px; }
.legal-page p, .legal-page li { font-size: 14.5px; line-height: 1.65; color: var(--text-2); }
.legal-page ul { margin: 8px 0; padding-left: 22px; }
.legal-page li { margin: 4px 0; }
.legal-page a { color: var(--accent); }
.legal-page .back { display: inline-block; margin-top: 36px; color: var(--accent); font-size: 13px; }

/* The contact form (Contact.razor), on the same shell as the legal pages: it is a page of text with a box
   at the bottom, not an app screen, and giving it chrome of its own would say otherwise. */
.contact-form { margin-top: 28px; display: flex; flex-direction: column; }
.contact-form label { margin-top: 18px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.contact-opt { margin-left: 6px; font-weight: 400; color: var(--muted); }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: 14.5px; color: var(--text); background: var(--panel);
  border: 1px solid var(--border-2); border-radius: 8px; padding: 10px 12px; width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 120px; line-height: 1.55; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.contact-note { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.contact-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.contact-send {
  font: inherit; font-size: 14px; font-weight: 600; padding: 10px 24px; border-radius: 8px; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.contact-send[disabled] { opacity: .6; cursor: default; }
/* One line for every outcome, beside the button where the sender is already looking. */
.contact-msg { font-size: 13px; color: var(--muted); }
.contact-done { margin-top: 28px; }
.contact-done h2 { margin-bottom: 6px; }

/* dvh, not vh: same reasoning as map.css's .fbmr-map-page — 100vh is the mobile URL bar's LARGE viewport, so
   with the bar visible the page would be taller than the screen and scroll under this centred shell. */
.status-page { min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text);
  font-family: system-ui, sans-serif; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; }
.status-page .shell { width: min(440px, 92vw); text-align: center; }
/* The wordmark's sidebar border/padding (map.css's .brandmark) doesn't belong on a standalone page. */
.status-page .brandmark { border-top: none; padding: 0; margin: 0 0 28px; }
.status-page .status-code { font-size: 15px; font-weight: 700; letter-spacing: 2px; color: var(--muted);
  margin: 0 0 6px; }
.status-page h1 { font-size: 24px; margin: 0 0 14px; }
.status-page .status-body p { font-size: 14.5px; line-height: 1.65; color: var(--text-2); margin: 0 0 8px; }
.status-page .status-request-id { font-size: 12.5px; color: var(--muted); }
.status-page .status-request-id code { font-family: var(--mono); }
.status-page .status-actions { display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap; margin-top: 26px; }
.status-page .status-primary, .status-page .status-ghost { font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 20px; border-radius: 8px; cursor: pointer; text-decoration: none; }
.status-page .status-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.status-page .status-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-2); }
.status-page .status-ghost:hover { background: var(--hover); }