/* ReliaSim theme for the docs site.
 *
 * Loaded AFTER /css/output.css so it wins on source order, not specificity.
 * Kept as a separate sheet rather than folded into input.css: this is a theme
 * layer over the existing light design, and keeping it separate means the whole
 * change is reversible by dropping one <link> — no need to unpick overrides
 * from the Tailwind source. (CI does rebuild output.css from input.css in
 * fly-deploy.yml, so new utility classes would work; they are just harder to
 * back out.)
 *
 * Tokens are copied verbatim from reliasim-site/wwwroot/index.html. The palette
 * already matched (chiaha-primary was #6EC1E4, ReliaSim's --blue); what diverged
 * was the light ground and the Lucida display face.
 */

:root {
  --blue:       #6EC1E4;
  --blue-dk:    #2C5977;
  --blue-mid:   #1d4f6e;
  --green:      #61CE70;
  --green-dk:   #37A88F;
  --amber:      #fbbf24;
  --bg0:        #07111e;
  --bg1:        #0f172a;
  --bg2:        #1e293b;
  --bg3:        #243044;
  --border:     #2d3f55;
  --border-lt:  #3a506b;
  --text:       #e2e8f0;
  --text-dim:   #94a3b8;
  --text-faint: #cbd5e1;
  --rounded:    0.5rem;
  --rounded-sm: 0.3rem;
}

html { background: var(--bg0); }
body {
  background: var(--bg0) !important;
  color: var(--text);
  font-family: 'Roboto', Arial, sans-serif;
}

/* ── Tailwind surface utilities in use by the views ── */
.bg-white      { background-color: var(--bg1) !important; }
.bg-gray-50    { background-color: var(--bg0) !important; }
.bg-gray-100   { background-color: var(--bg2) !important; }
.hover\:bg-gray-50:hover  { background-color: var(--bg2) !important; }
.hover\:bg-gray-100:hover { background-color: var(--bg2) !important; }

.border-gray-200, .border-gray-300 { border-color: var(--border) !important; }
.border, .border-b, .border-t, .border-l, .border-r { border-color: var(--border); }

.text-gray-400 { color: #6b7f96 !important; }
.text-gray-500 { color: var(--text-dim) !important; }
.text-gray-600, .text-gray-700 { color: var(--text-dim) !important; }
.text-gray-800, .text-gray-900 { color: var(--text) !important; }
.text-chiaha-text { color: var(--text-dim) !important; }

/* #2C5977 is ReliaSim's --blue-dk: correct on white, unreadable on --bg0. */
.text-chiaha-aha-blue { color: var(--blue) !important; }
.text-chiaha-primary  { color: var(--blue) !important; }
.hover\:text-chiaha-primary:hover { color: var(--blue) !important; }
.hover\:text-gray-600:hover { color: var(--text) !important; }
.hover\:border-chiaha-primary:hover { border-color: var(--blue) !important; }
.group:hover .group-hover\:bg-chiaha-primary { background-color: var(--green-dk) !important; }
.group:hover .group-hover\:text-chiaha-primary { color: var(--blue) !important; }
.hover\:shadow-xl:hover { box-shadow: 0 12px 28px rgba(0,0,0,0.45) !important; }

/* ── Typography: Playfair for display, matching the product site ── */
.font-header, h1.font-header, h2.font-header {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: -0.5px;
}

/* The base sheet sets these with !important, so the overrides need it too. */
.prose { color: var(--text) !important; font-family: 'Roboto', Arial, sans-serif; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: -0.4px !important;
  text-wrap: balance;
}
.prose h1 { color: var(--text) !important; font-weight: 900 !important; }
.prose h2 { color: var(--text) !important; font-weight: 700 !important; }
.prose h3, .prose h4 { color: var(--blue) !important; font-weight: 700 !important; }
.prose h5, .prose h6 { color: var(--blue) !important; }
.prose p, .prose li, .prose td, .prose dd { color: var(--text) !important; }
.prose strong { color: #fff !important; }
.prose em { color: var(--text-faint) !important; }
.prose a { color: var(--blue) !important; text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose hr { border-color: var(--border) !important; }
.prose blockquote {
  color: var(--text-dim) !important;
  border-left-color: var(--amber) !important;
  background: var(--bg2);
  border-radius: 0 var(--rounded) var(--rounded) 0;
  padding: 14px 20px;
}

/* Code */
.prose code, code {
  font-family: 'Roboto Mono', ui-monospace, monospace !important;
  background: var(--bg2) !important;
  color: var(--blue) !important;
  padding: 2px 6px; border-radius: var(--rounded-sm);
}
.prose pre, pre {
  background: var(--bg1) !important;
  border: 1px solid var(--border);
  border-radius: var(--rounded);
  overflow-x: auto;
}
.prose pre code { background: transparent !important; color: var(--text) !important; padding: 0; }

/* Tables — wide content must scroll in its own box, never the page */
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.prose th {
  color: var(--text-dim) !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
}
.prose td { border-bottom: 1px solid rgba(45,63,85,.55) !important; }
.prose thead { background: var(--bg2); }

/* Figures on a dark ground.
   60 of the 269 doc images carry transparency, and 24 of those are black line
   art or diagrams with black labels — the Overview Venn among them — which
   disappeared entirely once the page went dark. They need a light ground.
   The backing is deliberately unpadded: an opaque screenshot covers it
   completely, so nothing changes for the other 209, and white shows only
   where an image is actually transparent. Verified safe for the light-UI
   screenshots too — their foreground is dark text on their own white ground. */
.prose img, figure img {
  border: 1px solid var(--border);
  border-radius: var(--rounded);
  background: #ffffff;
}
figcaption { color: var(--text-dim) !important; font-size: 13px; }

/* The shared footer partial paints itself chiaha-aha-blue, which reads as a
   saturated slab against --bg0. */
.bg-chiaha-aha-blue { background-color: var(--bg1) !important; }
footer.bg-chiaha-aha-blue { border-top: 1px solid var(--border); }

/* ── Sidebar ── */
#doc-sidebar { background: var(--bg1) !important; border-color: var(--border) !important; }
#doc-sidebar a { color: var(--text-dim) !important; }
#doc-sidebar a:hover { color: var(--text) !important; background: var(--bg2) !important; }
.sidebar-summary { color: var(--text) !important; }
.sidebar-summary:hover { color: var(--blue) !important; }
.sidebar-chevron { color: var(--text-dim); }
#doc-sidebar .text-chiaha-aha-blue { color: var(--blue) !important; }
#sidebar-backdrop { background: rgba(7,17,30,0.7) !important; }

/* ── Sidebar as a true side pane ──
   The pane itself stretches to the full height of the content row, so its
   background runs the length of the page instead of stopping with the last
   link. An inner wrapper does the sticking, which keeps the nav in view on long
   pages without the pane forcing the row to 100vh — that inflated every page to
   viewport height and pushed the footer below the fold even on short ones.
   The row is left on its existing flex-1, which already fills the space the
   nav and footer do not use. */
#doc-sidebar {
  position: static !important;
  align-self: stretch !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
#doc-sidebar > div {
  position: sticky; top: 64px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

/* ── Nav — same metrics as reliasim.com's own <nav> ── */
.rs-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7,17,30,0.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 0 5vw; height: 64px;
  display: flex; align-items: center; gap: 20px;
}
.rs-nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.rs-nav-brand img { height: 32px; }
.rs-nav-links { display: flex; gap: 26px; flex: 1; justify-content: center; }
.rs-nav-links a { font-size: 13px; color: var(--text-dim); font-weight: 600; text-decoration: none; transition: color .15s; white-space: nowrap; }
.rs-nav-links a:hover { color: var(--text); }
.rs-nav-links a.active { color: var(--text); }
.rs-nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.rs-nav-cta {
  background: var(--green-dk); color: #fff; font-size: 12px; font-weight: 700;
  padding: 10px 18px; border-radius: var(--rounded-sm);
  text-decoration: none; white-space: nowrap; transition: filter .15s; flex-shrink: 0;
}
.rs-nav-cta:hover { filter: brightness(1.15); }
.rs-nav-toggle { display: none; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 6px; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px 12px; }
@media (max-width: 1150px) { .rs-nav-links { gap: 16px; } .rs-nav-links a { font-size: 12px; } }
@media (max-width: 900px) {
  .rs-nav-toggle { display: block; margin-left: auto; }
  .rs-nav-links { display: none !important; }
  .rs-nav-links.open {
    display: flex !important; flex-direction: column; align-items: flex-start;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(7,17,30,0.97); padding: 14px 5vw; gap: 12px;
    z-index: 90; border-bottom: 1px solid var(--border);
  }
  .rs-nav-right { display: none; }
}

/* ── Footer — reliasim.com's visual language, condensed for docs ──
   The marketing footer runs four columns and ~20 links, which came to roughly
   375px under a documentation page. One brand mark, six essentials, one legal
   line. */
footer.rs-foot {
  border-top: 1px solid var(--border); background: var(--bg0);
  padding: 22px 5vw 18px; color: var(--text-dim);
}
.rs-foot-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto;
}
.rs-foot-brand img { height: 24px; display: block; opacity: .9; }
.rs-foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.rs-foot-links a { font-size: 13px; color: var(--text-dim); text-decoration: none; transition: color .15s; }
.rs-foot-links a:hover { color: var(--text); }
.rs-foot-bottom {
  max-width: 1200px; margin: 16px auto 0; padding-top: 14px;
  border-top: 1px solid var(--border); font-size: 12px; color: var(--text-faint);
}
@media (max-width: 700px) { .rs-foot-top { flex-direction: column; align-items: flex-start; } }

/* ── Width ──
   The doc column is Tailwind max-w-4xl (896px). Beside a 256px sidebar that
   leaves ~350px of dead gutter on a 1500px screen, which reads as a narrow
   site next to reliasim.com. Widened for the page furniture — screenshots,
   tables, diagrams — while running text keeps a readable measure of its own,
   since a 1200px line of prose is worse to read, not better. */
main.max-w-4xl { max-width: 1240px !important; width: 100%; }
.prose { max-width: none !important; }
.prose > p, .prose > ul, .prose > ol, .prose > blockquote, .prose > h1,
.prose > h2, .prose > h3, .prose > h4 { max-width: 78ch; }
.prose > figure, .prose > table, .prose > .video-embed, .prose > img { max-width: 100%; }