/* Docs skin. The manual templates are Bootstrap markup carried over intact, so
   this retunes Bootstrap's own variables into the Neptune palette instead of
   rewriting the pages. Loaded after bootstrap.min.css. */

:root {
  --ink:    #0B2438;
  --navy:   #103F63;
  --muted:  #5B7388;
  --sea:    #0B7F87;
  --sea-lo: #096B72;
  --cyan:   #3ED4D8;
  --paper:  #FFFFFF;
  --wash:   #F2F8FB;
  --line:   #DCE9F0;

  /* From the logo ring. Rationed to hairlines and eyebrow rules — it fails
     contrast on white and is never used as a text colour. */
  --gilt:    #B89B5E;
  --gilt-lo: #9A7F45;

  --surface-1: #F7FBFD;
  --surface-2: #EDF5F9;

  --shadow-sm: 0 1px 2px rgba(11, 36, 56, 0.05),
               0 2px 6px -2px rgba(11, 36, 56, 0.08);
  --shadow-md: 0 4px 12px -4px rgba(11, 36, 56, 0.1),
               0 12px 28px -12px rgba(11, 36, 56, 0.16);
  --shadow-lg: 0 12px 24px -12px rgba(11, 36, 56, 0.14),
               0 32px 64px -28px rgba(11, 36, 56, 0.26);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 160ms;  --mid: 280ms;  --slow: 560ms;

  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;

  --display: "Google Sans", "Google Sans Text", "Product Sans", "Outfit",
             system-ui, sans-serif;
  --body: "Quicksand", system-ui, sans-serif;

  /* Bootstrap 5.3 reads these for body text, links, and component defaults. */
  --bs-body-font-family: var(--body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-emphasis-color: var(--navy);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--line);
  --bs-link-color: var(--sea);
  --bs-link-hover-color: var(--sea-lo);
  --bs-primary: var(--sea);
  --bs-primary-rgb: 11, 127, 135;
}

body.docs {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
}

.docs h1, .docs h2, .docs h3, .docs h4, .docs h5, .docs h6,
.docs .display-1, .docs .display-2, .docs .display-3,
.docs .display-4, .docs .display-5, .docs .display-6 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--navy);
}

.docs :focus-visible {
  outline: 3px solid var(--sea);
  outline-offset: 3px;
  border-radius: 6px;
}

.docs-skip { position: absolute; left: -9999px; }
.docs-skip:focus {
  left: 1rem; top: 0.75rem; z-index: 20;
  background: var(--paper); padding: 0.6rem 1rem;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
}

/* ---------- chrome ---------- */

/* Sticky and frosted, matching the landing header. docs.js adds .is-stuck
   once the page has moved; without the script the bar is simply always
   solid, which is the safe end state. */
.docs-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  transition: box-shadow var(--mid) var(--ease-out);
}
.docs-bar.is-stuck { box-shadow: var(--shadow-sm); }

.docs-bar__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
}

.docs-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.docs-mark img {
  width: 2.2rem;
  height: auto;
  transition: transform var(--slow) var(--spring);
}
.docs-mark:hover img { transform: rotate(-8deg) scale(1.06); }

.docs-nav { display: flex; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.docs-nav a {
  position: relative;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--fast) ease, background-color var(--fast) ease;
}
.docs-nav a:hover { color: var(--ink); background: var(--surface-2); }

/* Centre-out underline, same as the landing nav. */
.docs-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.28rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--sea);
  transform: translateX(-50%);
  transition: width var(--mid) var(--ease-out);
}
.docs-nav a:hover::after { width: calc(100% - 1.7rem); }

.docs-get {
  position: relative;
  padding: 0.6rem 1.35rem;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--sea) 0%, var(--sea-lo) 100%);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 30px -12px rgba(11, 127, 135, 0.6);
  transition: transform var(--fast) var(--spring),
              box-shadow var(--mid) var(--ease-out);
}
.docs-get:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(11, 127, 135, 0.7);
}

/* Gold sheen, same single pass as the landing CTA. */
.docs-get::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
              transparent 35%,
              rgba(184, 155, 94, 0.45) 50%,
              transparent 65%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.docs-get:hover::after { transform: translateX(120%); }

.docs-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  max-width: 1140px;
  margin: 3rem auto 0;
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}
.docs-foot p { margin: 0; }
.docs-foot__mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.docs-foot__links { display: flex; gap: 1.25rem; margin-right: auto; }
.docs-foot__links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--fast) ease;
}
.docs-foot__links a:hover { color: var(--sea-lo); }

/* ---------- scroll reveal (shared with the landing page) ----------
   Gated behind .js, which docs.js sets on <html> before anything paints. With
   JavaScript off the class never lands and the manuals render fully visible
   rather than blank. */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--slow) var(--ease-out),
              transform var(--slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity var(--slow) var(--ease-out),
              transform var(--slow) var(--ease-out);
}
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: 60ms; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: 130ms; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: 200ms; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: 270ms; }
.js [data-stagger].is-in > *:nth-child(5) { transition-delay: 340ms; }
.js [data-stagger].is-in > *:nth-child(6) { transition-delay: 410ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal], .js [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Bootstrap components the manuals actually use ---------- */

.docs .card {
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -30px rgba(16, 63, 99, 0.5);
}

.docs .card-header {
  background: var(--wash);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
  color: var(--navy);
}

.docs .list-group { border-radius: 14px; overflow: hidden; }

.docs .list-group-item {
  border-color: var(--line);
  padding-block: 1rem;
}
.docs .list-group-item-action:hover {
  background: var(--wash);
  color: inherit;
}

.docs .lead { color: var(--muted); font-weight: 500; }
.docs .text-muted { color: var(--muted) !important; }

/* Bootstrap's green is not in this palette; the payout figures use it. */
.docs .text-success { color: var(--sea-lo) !important; }

.docs .btn-primary,
.docs .btn-success {
  --bs-btn-bg: var(--sea);
  --bs-btn-border-color: var(--sea);
  --bs-btn-hover-bg: var(--sea-lo);
  --bs-btn-hover-border-color: var(--sea-lo);
  --bs-btn-active-bg: var(--sea-lo);
  --bs-btn-active-border-color: var(--sea-lo);
  font-weight: 700;
}

.docs .btn-outline-primary,
.docs .btn-outline-secondary {
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-bg: var(--wash);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-border-color: var(--sea);
  font-weight: 700;
}

.docs .bg-primary { background-color: var(--sea) !important; }
.docs .bg-light { background-color: var(--wash) !important; }
.docs .border-primary { border-color: var(--sea) !important; }

.docs .badge.bg-success { background-color: var(--sea) !important; }
.docs .badge.bg-secondary { background-color: var(--muted) !important; }

.docs .alert-warning {
  --bs-alert-bg: #FFF6E5;
  --bs-alert-border-color: #F2D9A8;
  --bs-alert-color: #6B4A05;
}
.docs .alert-danger {
  --bs-alert-bg: #FDEDEE;
  --bs-alert-border-color: #F3C3C7;
  --bs-alert-color: #8A1F29;
}
.docs .alert-info,
.docs .alert-primary {
  --bs-alert-bg: var(--wash);
  --bs-alert-border-color: var(--line);
  --bs-alert-color: var(--navy);
}

.docs .table { --bs-table-border-color: var(--line); }
.docs .table > thead {
  font-family: var(--display);
  color: var(--navy);
}

.docs code, .docs kbd, .docs pre {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
}
.docs code {
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1rem 0.35rem;
  color: var(--navy);
}

.docs .bi { color: var(--sea); }
.docs .text-danger .bi,
.docs .alert-danger .bi { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .docs * { animation: none !important; transition: none !important; }
}

/* ---------- contrast corrections ---------- */

/* Headings default to navy, which drops to 2.3:1 when Bootstrap puts one on a
   filled teal banner. Any heading inside a coloured block follows the block's
   own text colour instead. */
.docs .bg-primary h1, .docs .bg-primary h2, .docs .bg-primary h3,
.docs .bg-primary h4, .docs .bg-primary h5, .docs .bg-primary h6,
.docs .bg-primary .h1, .docs .bg-primary .h2, .docs .bg-primary .h3,
.docs .bg-primary .h4, .docs .bg-primary .h5, .docs .bg-primary .h6 {
  color: #fff;
}

/* --sea is tuned for white; on the --wash card headers it lands at 4.45:1,
   just under the 4.5 minimum. The darker step clears it at 5.6:1. */
.docs .text-primary { color: var(--sea-lo) !important; }

/* Bootstrap's grey secondary is 4.37:1 on --wash. --navy reads cleanly and is
   already the palette's secondary text tone. */
.docs .text-secondary { color: var(--navy) !important; }

/* Bootstrap's stock info/warning/danger are tuned for filled badges, not for
   text on white — cyan lands at 1.95:1 and amber at 1.63:1. These are the same
   hues darkened until they clear 4.5:1, so the semantic colour survives. */
.docs .text-info    { color: #0E7C8C !important; }  /* 4.8:1 on white */
.docs .text-warning { color: #8A5A00 !important; }  /* 5.9:1 on white */
.docs .text-danger  { color: #B02532 !important; }  /* 5.9:1 on white */

/* The danger tint is also used as a table-cell background, where the default
   red drops to 3.4:1. Darken further only in that context. */
.docs .table-danger .text-danger,
.docs td.table-danger.text-danger,
.docs .bg-danger-subtle .text-danger { color: #8E1620 !important; }

/* ---------- premium pass on the manual chrome ----------
   The manuals stay Bootstrap markup; these rules only add the depth and
   motion the landing page introduced, so the two do not read as two sites. */

/* Manual index cards lift the way the feature tiles do. */
.docs .list-group { box-shadow: var(--shadow-md); border: 1px solid var(--line); }

.docs .list-group-item {
  position: relative;
  transition: background-color var(--fast) ease,
              padding-left var(--mid) var(--ease-out);
}

/* Gold rail wipes down the left edge on hover, matching .strategy. */
.docs .list-group-item-action::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--sea), var(--gilt));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--mid) var(--ease-out);
}
.docs .list-group-item-action:hover::before { transform: scaleY(1); }
.docs .list-group-item-action:hover { padding-left: 1.4rem; }

.docs .list-group-item h5 {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: -0.015em;
}

/* Cards get the shared elevation ramp and a lift. */
.docs .card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--mid) var(--ease-out),
              box-shadow var(--mid) var(--ease-out),
              border-color var(--mid) ease;
}
.docs .card:hover {
  transform: translateY(-3px);
  border-color: rgba(11, 127, 135, 0.3);
  box-shadow: var(--shadow-lg);
}

.docs .card-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* Page title: same eyebrow-rule motif as the landing sections. */
.docs .display-5 {
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.docs .text-center > .display-5 + .lead::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin: 1rem auto 1.25rem;
  border-radius: 2px;
  background: linear-gradient(90deg,
              rgba(184, 155, 94, 0), var(--gilt), rgba(184, 155, 94, 0));
}

/* Tables read as data, not as a wall. */
.docs .table { --bs-table-border-color: var(--line); font-size: 0.95rem; }
.docs .table > thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sea-lo);
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
}
.docs .table > tbody tr { transition: background-color var(--fast) ease; }
.docs .table > tbody tr:hover { background: var(--surface-1); }

/* Alerts pick up a left rail so they scan as asides. */
.docs .alert {
  border-radius: var(--r-md);
  border-left-width: 3px;
  box-shadow: var(--shadow-sm);
}

.docs .badge { font-weight: 700; letter-spacing: 0.03em; }

/* Bootstrap buttons inherit the gradient + sheen from the landing CTA. */
.docs .btn-primary,
.docs .btn-success {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--sea) 0%, var(--sea-lo) 100%);
  border-color: transparent;
  box-shadow: 0 12px 30px -12px rgba(11, 127, 135, 0.6);
  transition: transform var(--fast) var(--spring),
              box-shadow var(--mid) var(--ease-out);
}
.docs .btn-primary:hover,
.docs .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(11, 127, 135, 0.7);
}
.docs .btn-primary::after,
.docs .btn-success::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
              transparent 35%, rgba(184, 155, 94, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}
.docs .btn-primary:hover::after,
.docs .btn-success:hover::after { transform: translateX(120%); }

/* Anchors land clear of the sticky bar. */
.docs { scroll-padding-top: 6rem; }
html { scroll-behavior: smooth; }