/* ─────────────────────────────────────────────────────────────────────────────
   #2819 — the #1817 backport block that used to sit here is GONE. It defined the
   Bootstrap 5.3 tokens (--bs-border-color, the --bs-*-bg family, --bs-secondary-color,
   the -subtle / -emphasis families and the text-bg-* utilities) by hand onto the
   bundled Bootstrap 5.1.0. Bootstrap is now 5.3.8 (see wwwroot/lib/bootstrap/dist),
   which ships every one of them WITH dark-mode values. Keeping the block would have
   been actively wrong: site.css loads after bootstrap.min.css at :root specificity, so
   its light values would have won inside [data-bs-theme=dark] and pinned the whole site
   light. The general guard (bootstrapTokens1817.test.js) still runs — now against 5.3.8.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   #2751 — ONE code face for every machine string DocButterfly prints.

   Jeff, 2026-09-19 [03:34]: "we should come up with a standard font for
   displaying SHA-0Z hash, because I'd like the zero to be a mathematical zero
   versus the O letter." [04:12] "zero and O are pretty fricking similar."

   Base 36 prints 0 beside O and 1 beside I in the same token, and today the only
   thing that separates them for a reader is that the alphabet stops being in
   order after Z. This applies wherever we print one: receipt digests, the
   exchange reference, safety codes, failure codes.

   SYSTEM FACES ONLY, in the order of how well each distinguishes those pairs —
   Cascadia Mono (dotted zero), Consolas (slashed zero, on every Windows), SF Mono
   and Menlo (macOS), DejaVu Sans Mono (Linux). `slashed-zero` asks a face for the
   marked zero where it has one as an OpenType feature rather than as its default.
   NO WEBFONT DOWNLOAD: a reference that reads correctly only after a font request
   succeeded is worse than one that picks what is already installed.

   THE FACE IS JEFF'S TO CHANGE. He used Eras Bold ITC in his own mockup, which is
   a licensed proportional face shipped with no OS. What is settled here is that
   there is ONE variable to change, not that this stack is the final answer. The
   hosted receipt page carries its own copy in
   Functions/DocFlow/DocFlowApp/src/shared/receiptPage.js (CODE_FONT), because its
   Content-Security-Policy is default-src 'none' and it can load no stylesheet.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --dbf-code-font: "Cascadia Mono", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", ui-monospace, monospace;
}

.dbf-code {
  font-family: var(--dbf-code-font);
  font-variant-numeric: slashed-zero;
}

/* #2819 — the 5.2/5.3 utility overrides (.text-bg-*, .bg-*-subtle, .border-*-subtle,
   .text-*-emphasis, .text-body-secondary/-tertiary) that #1817 hand-defined here are GONE
   too: Bootstrap 5.3.8 ships all of them, each with a proper dark-mode variant, so our
   light-only copies would have been white-on-white in dark. One behavior change to watch on
   the live walk: Bootstrap writes these utilities with !important, whereas ours did not, so a
   portal rule that deliberately re-colors a .badge that ALSO wears a text-bg-*/-subtle
   utility (e.g. .dbf-tabs .badge in data-browser.css) may now lose to the framework. Flagged
   for #2819's dark-mode pass; no white-on-white, only a possible tint change. */

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb;
}

/* #2819 — the page background follows the theme. --bs-tertiary-bg is #f8f9fa in light
   (the value this rule used to hard-code) and a dark gray under [data-bs-theme=dark]. */
body {
  background-color: var(--bs-tertiary-bg);
}

/* DocButterfly Theme Styles */
.navbar-brand {
  font-weight: bold;
  color: #1a3a5c !important;
}

.navbar-brand img {
  transition: transform 0.3s ease;
}

.navbar-brand:hover img {
  transform: scale(1.1);
}

/* Hero Section */
.hero-section {
  padding: 60px 0;
  /* #2819 — theme-aware gradient (was #f8f9fa -> #e9ecef, i.e. these two tokens' light values). */
  background: linear-gradient(135deg, var(--bs-tertiary-bg) 0%, var(--bs-secondary-bg) 100%);
  margin: -30px -15px 40px -15px;
}

.hero-logo {
  max-width: 300px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.hero-tagline {
  color: #1a3a5c;
  font-weight: 600;
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.hero-subtitle {
  color: #6c757d;
  font-size: 1.1rem;
}

.card {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.card-img-top {
  border-radius: 10px 10px 0 0;
}

.btn-primary {
  background-color: #1a3a5c;
  border-color: #1a3a5c;
}

.btn-primary:hover {
  background-color: #122a42;
  border-color: #122a42;
}

.family-tree-card {
  transition: transform 0.2s;
}

.family-tree-card:hover {
  transform: translateY(-5px);
}

.post-card {
  border-left: 4px solid #1a3a5c;
}

.timeline {
  position: relative;
  padding-left: 30px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #1a3a5c;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: #1a3a5c;
  border-radius: 50%;
}

.heritage-background {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 60px 0;
}

.person-card {
  border: none;
  background: var(--bs-body-bg);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.person-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Voting System Styles */
.vote-buttons {
  display: flex;
  align-items: center;
}

.btn-vote {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  transition: all 0.2s;
}

.btn-upvote:hover,
.btn-upvote.active {
  background-color: #28a745;
  border-color: #28a745;
  color: white;
}

.btn-downvote:hover,
.btn-downvote.active {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}

.vote-count {
  margin-left: 5px;
  font-weight: bold;
}

.vote-score .badge {
  font-size: 0.75rem;
}

.detail-section {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 15px;
}

.detail-section:last-child {
  border-bottom: none;
}

.comment-item {
  border-left: 3px solid #ffc107;
}

.border-left-primary {
  border-left: 4px solid #1a3a5c;
}

.border-left-success {
  border-left: 4px solid #28a745;
}

.border-left-info {
  border-left: 4px solid #17a2b8;
}

/* GEDCOM Upload Styles */
.upload-area {
  border: 2px dashed var(--bs-border-color);
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  transition: all 0.3s;
}

.upload-area:hover {
  border-color: #1a3a5c;
  background-color: var(--bs-tertiary-bg);
}

.upload-area.dragover {
  border-color: #1a3a5c;
  background-color: #e8f5e8;
}
/* ═══════════════════════════════════════════ */
/* AI CHAT FAB + PANEL (site-wide)             */
/* ═══════════════════════════════════════════ */

.ai-chat-fab {
    position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px;
    border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; border: none; font-size: 1.3rem; cursor: pointer; z-index: 1040;
    box-shadow: 0 4px 16px rgba(99,102,241,0.4); transition: transform 0.2s, box-shadow 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.ai-chat-fab:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(99,102,241,0.5); }
.ai-chat-fab.active { background: linear-gradient(135deg, #4f46e5, #7c3aed); }

.ai-chat-panel {
    position: fixed; bottom: 88px; right: 24px; width: 380px; height: 520px;
    z-index: 1039; background: var(--bs-body-bg); border-radius: 14px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18); display: flex; flex-direction: column;
    overflow: hidden; border: 1px solid var(--bs-border-color);
}
.ai-chat-header {
    padding: 12px 16px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.ai-chat-header i { margin-right: 6px; }
.ai-chat-close { background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; opacity: 0.8; padding: 0 4px; }
.ai-chat-close:hover { opacity: 1; }
.ai-chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.chat-msg { display: flex; max-width: 92%; }
.chat-msg.user { align-self: flex-end; }
.chat-msg.assistant { align-self: flex-start; }
.chat-bubble { padding: 8px 12px; border-radius: 12px; font-size: 0.84rem; line-height: 1.55; word-break: break-word; }
.chat-msg.user .chat-bubble { background: #6366f1; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.assistant .chat-bubble { background: var(--bs-secondary-bg); color: var(--bs-body-color); border-bottom-left-radius: 4px; }
.chat-bubble code { background: rgba(0,0,0,0.08); padding: 1px 4px; border-radius: 3px; font-size: 0.78rem; }
.chat-msg.user .chat-bubble code { background: rgba(255,255,255,0.2); }
.chat-bubble a { color: #6366f1; text-decoration: underline; }
.chat-msg.user .chat-bubble a { color: #c7d2fe; }
.chat-code-block { margin: 6px 0; border-radius: 6px; overflow: hidden; }
.chat-code-block pre { background: #1e1e1e; color: #d4d4d4; padding: 10px; margin: 0; font-size: 0.75rem; line-height: 1.4; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 180px; overflow-y: auto; }
.ai-chat-input { padding: 10px 12px; border-top: 1px solid var(--bs-border-color); display: flex; gap: 8px; flex-shrink: 0; background: var(--bs-tertiary-bg); }
.ai-chat-input input, .ai-chat-input textarea { flex: 1; border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 8px 12px; font-size: 0.82rem; outline: none; transition: border-color 0.15s; background: var(--bs-body-bg); color: var(--bs-body-color); }
.ai-chat-input input:focus, .ai-chat-input textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.ai-chat-input textarea { resize: none; font-family: inherit; line-height: 1.4; max-height: 120px; overflow-y: auto; } /* #735 */
.ai-chat-input button { background: #6366f1; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 0.85rem; transition: background 0.15s; }
.ai-chat-input button:hover { background: #4f46e5; }
.ai-chat-input button:disabled { background: #9ca3af; cursor: default; }
/* #1838 - the Advanced switch in the design assistant's composer. Quiet while off:
   it is a second register, not the main control, and a purple button beside Send
   would read as a second way to send. Lit while on, because a turn that can write
   the stylesheet and replace markup has to be visibly different from one that
   cannot. */
.ai-chat-input button.tdai-advanced {
    background: transparent; color: #6b7280; border: 1px solid #d1d5db;
    padding: 8px 10px; flex: 0 0 auto;
}
.ai-chat-input button.tdai-advanced:hover { background: #eef2ff; color: #4f46e5; border-color: #c7d2fe; }
.ai-chat-input button.tdai-advanced.is-on { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.ai-chat-input button.tdai-advanced.is-on:hover { background: #4338ca; }
.ai-chat-callout {
    position: fixed; bottom: 84px; right: 24px; width: 300px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff;
    border-radius: 12px; padding: 14px 16px; z-index: 1041;
    box-shadow: 0 8px 32px rgba(99,102,241,0.45); cursor: pointer;
    animation: sac-callout-appear 0.4s ease-out;
}
.ai-chat-callout::after { content: ''; position: absolute; bottom: -8px; right: 20px; width: 16px; height: 16px; background: #8b5cf6; transform: rotate(45deg); border-radius: 2px; }
.ai-chat-callout-close { position: absolute; top: 6px; right: 8px; background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 2px 4px; }
.ai-chat-callout-close:hover { color: #fff; }
.ai-chat-callout-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; }
.ai-chat-callout-title i { margin-right: 4px; }
.ai-chat-callout-body { font-size: 0.8rem; line-height: 1.5; opacity: 0.92; }
.ai-chat-callout-hiding { opacity: 0; transform: translateY(8px) scale(0.95); transition: opacity 0.3s, transform 0.3s; }
@keyframes sac-callout-appear { from { opacity: 0; transform: translateY(12px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.chat-typing span { width: 6px; height: 6px; background: #9ca3af; border-radius: 50%; animation: sac-bounce 1.4s infinite ease-in-out both; }
.chat-typing span:nth-child(1) { animation-delay: -0.32s; }
.chat-typing span:nth-child(2) { animation-delay: -0.16s; }
.chat-typing span:nth-child(3) { animation-delay: 0s; }
@keyframes sac-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
@media (max-width: 576px) {
    .ai-chat-panel { width: calc(100vw - 24px); right: 12px; bottom: 80px; }
    .ai-chat-callout { width: calc(100vw - 60px); right: 12px; }
}

/* #2412 - the environment note: one small line, never a banner. Dev/test say
   "This is test, not production."; prod says its configured beta disclaimer. */
.env-note {
    display: inline-block;
    font-size: .72rem;
    line-height: 1.25;
    padding: 2px 10px;
    margin: 0 0 4px;
    color: #7a5d00;
    background: #fff6d6;
    border: 1px solid #f3dd8a;
    border-radius: 0 0 8px 8px;
    letter-spacing: .01em;
}

/* #2084 — the login page is the Identity RCL's own (not scaffolded), so its provider buttons
   are bare text. Give each one its mark from the vendored bootstrap-icons font, keyed on the
   scheme name the button posts. A provider not listed here still renders, just without an icon. */
#external-account button[name="provider"] {
    margin: 0 .4rem .5rem 0;
}
#external-account button[name="provider"]::before {
    font-family: "bootstrap-icons";
    vertical-align: -.125em;
    margin-right: .4rem;
}
#external-account button[value="Microsoft"]::before { content: "\f65d"; }
#external-account button[value="Google"]::before { content: "\f3f0"; }
#external-account button[value="Apple"]::before { content: "\f65b"; }
#external-account button[value="GitHub"]::before { content: "\f3ed"; }
#external-account button[value="LinkedIn"]::before { content: "\f472"; }

/* #3319 — the same RCL login page links "Resend email confirmation" to a stock page that now answers
   404 (Services/StockIdentityPages.cs): it mailed a confirm-address link and nothing of ours uses it.
   The page is not scaffolded, so the link and its paragraph are hidden here, as #2084 styles it. */
#resend-confirmation,
p:has(> #resend-confirmation) {
    display: none;
}

/* #2632 review — footer link lists. Entries wrap: "Power Automate Connector" takes two lines at
   1280px and three at 768px, and with nothing but line-height between list items a wrapped entry
   ran straight into the next one, so a column read as a block of underlined text. The column
   widths are the other half of the fix (col-6 col-md-3 col-lg-2 in _Layout). */
footer .list-unstyled li {
    margin-bottom: .35rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   #2819 — dark-theme touch-ups for the few brand colors that are hard-coded because
   they ARE the brand (the #1a3a5c navy). Bootstrap 5.3 themes its own components from
   data-bs-theme; these rules only reach the places where a dark navy would sit on a
   dark surface and stop being readable. Everything else here is already routed through
   Bootstrap variables above.
   ───────────────────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .navbar-brand {
  /* Navy on a dark navbar is invisible; lift to Bootstrap's light-primary tint. */
  color: #9ec5fe !important;
}
[data-bs-theme="dark"] .hero-tagline {
  color: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .timeline-title,
[data-bs-theme="dark"] .admin-metric-content h3 {
  color: var(--bs-emphasis-color);
}