/* User Provided Stylesheet */

/* custom.css - Kate Capital Financial Dashboards
   Last updated: December 2025

   MINIMAL VERSION - Layout, colors, fonts only
   ============================================
*/

/* ============================================================
   ADJUSTMENT GUIDE
   ============================================================

   For each screen width, adjust these values:

   OUTER_BORDER: Space between browser edge and Primary sidebar
                 (In sidebar overlay grid: [screen-start] value)

   CONTENT_MARGIN_LEFT: How far content starts from left edge
                        (In content window: margin-left)

   CONTENT_WIDTH: How wide the content area is
                  (In content window: max-width calc)

   SECONDARY_SHIFT: Moves Secondary sidebar left/right
                    (In Secondary sidebar: translateX)
                    More negative = further left
                    Less negative = further right
*/


/* ============================================================
   1. COLOR PALETTE (Kate Capital)
   ============================================================ */

:root {
  /* Layout - Sidebar Dimensions */
  --sidebar-left-width: 220px;
  --sidebar-right-width: 375px;
  --sidebar-right-max: 400px;

  /* Layout - Buffers (gap between sidebar and content) */
  --buffer-left: 20px;
  --buffer-right: 20px;

  /* Layout - Computed Margins */
  --content-margin-left: calc(var(--sidebar-left-width) + var(--buffer-left));
  --content-margin-right: calc(var(--sidebar-right-width) + var(--buffer-right));

  /* Color palette */
  --kate-white: #ffffff;
  --kate-gray-50: #f5f5f5;
  --kate-gray-100: #e5e5e5;
  --kate-gray-200: #cecece;
  --kate-gray-300: #bebebe;
  --kate-gray-400: #a2a2a2;
  --kate-gray-500: #8c8c8c;
  --kate-gray-600: #707070;
  --kate-gray-700: #545454;
  --kate-gray-800: #414141;
  --kate-gray-900: #151414;
  --kate-black: #000000;
  --kate-yellow-500: #ffeb33;
  --kate-orange-500: #ff8333;
  --kate-red-500: #ff3333;
  --kate-cyan-500: #38e3fa;
  --kate-blue-500: #3372ff;
  --kate-green-500: #3df597;

  /* Nav bar text colors */
  --kate-nav-text: var(--kate-gray-700);
  --kate-nav-text-hover: var(--kate-gray-900);
  --kate-nav-text-active: var(--kate-black);
}

html[data-theme="light"] {
  --mystnb-source-margin-color: var(--kate-orange-500);
}

html[data-theme="dark"] {
  --mystnb-source-bg-color: var(--kate-gray-900);
  --mystnb-source-margin-color: var(--kate-orange-500);
}


/* ============================================================
   2. SIDEBAR & TOC STYLING
   ============================================================ */
/* Logo padding */
.myst-home-link-logo {
  padding-bottom: 8px;
  padding-left: 12px;
}


/* Active item - exact match (current page) */
.myst-toc-item-exact {
  background-color: var(--kate-black) !important;
  color: var(--kate-white) !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
}

/* Active item - parent of current page (has active child) */
.myst-toc-item-active {
  color: var(--kate-black) !important;
  font-weight: 600 !important;
}

.myst-toc-item-active>a {
  color: var(--kate-black) !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .myst-toc-item-active {
  color: var(--kate-white) !important;
}

html[data-theme="dark"] .myst-toc-item-active>a {
  color: var(--kate-white) !important;
}

/* Remove any blue text in primary sidebar */
[class*="col-margin-left"] a[class*="text-blue"],
[class*="col-margin-left"] [class*="text-blue"] {
  color: var(--kate-black) !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] [class*="col-margin-left"] a[class*="text-blue"],
html[data-theme="dark"] [class*="col-margin-left"] [class*="text-blue"] {
  color: var(--kate-white) !important;
}

/* ---- CONTENTS SIDEBAR STYLING ---- */

/* Contents header */
.xl\:col-margin-right h2,
.lg\:col-margin-right h2,
[class*="col-margin-right"] h2 {
  font-family: "Arial Narrow", "Arial", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  color: var(--kate-gray-600) !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--kate-gray-200) !important;
}

/* All outline items - base styling */
.myst-outline-item {
  font-family: "Arial Narrow", "Arial", sans-serif !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  padding: 8px 12px !important;
  margin: 4px 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 4px 4px 0 !important;
  transition: all 0.15s ease !important;
}

.myst-outline-item a {
  color: var(--kate-gray-700) !important;
  text-decoration: none !important;
}

/* Nested items - level 2 */
.myst-outline-item[data-level="2"],
.myst-outline-item.ml-3,
nav[class*="col-margin-right"] li li {
  font-size: 1.05rem !important;
  padding-left: 16px !important;
}

/* Nested items - level 3 (the small ones) */
.myst-outline-item[data-level="3"],
.myst-outline-item.ml-6,
nav[class*="col-margin-right"] li li li,
[class*="col-margin-right"] nav ul ul li,
[class*="col-margin-right"] .myst-outline-item+ul li {
  font-size: 1rem !important;
  padding-left: 24px !important;
  line-height: 1.5 !important;
}

/* Force all nested links to be larger */
[class*="col-margin-right"] nav li a,
[class*="col-margin-right"] .myst-outline-item a {
  font-size: inherit !important;
}

/* Active item */
.myst-outline-item-active {
  background-color: var(--kate-gray-100) !important;
  border-left-color: var(--kate-black) !important;
}

.myst-outline-item-active a {
  color: var(--kate-black) !important;
  font-weight: 600 !important;
}

/* Hover state */
.myst-outline-item:hover {
  background-color: var(--kate-gray-50) !important;
  border-left-color: var(--kate-gray-400) !important;
}

.myst-outline-item:hover a {
  color: var(--kate-black) !important;
}

/* Dark mode - contents sidebar */
html[data-theme="dark"] .myst-outline-item a {
  color: var(--kate-gray-400) !important;
}

html[data-theme="dark"] .myst-outline-item-active {
  background-color: var(--kate-gray-800) !important;
  border-left-color: var(--kate-white) !important;
}

html[data-theme="dark"] .myst-outline-item-active a {
  color: var(--kate-white) !important;
}

html[data-theme="dark"] .myst-outline-item:hover {
  background-color: var(--kate-gray-900) !important;
}

html[data-theme="dark"] [class*="col-margin-right"] h2 {
  color: var(--kate-gray-400) !important;
  border-bottom-color: var(--kate-gray-700) !important;
}

/* Hover */
.myst-toc-item:hover {
  background-color: var(--kate-gray-400) !important;
  border-radius: 5px !important;
}

/* Focus outline */
.myst-toc-item:focus {
  outline-color: var(--kate-gray-300) !important;
  border-radius: 5px !important;
}

/* ============================================================
   3. BASE LAYOUT DEFAULTS
   ============================================================ */

body,
html {
  margin: 0 !important;
  padding: 0 !important;
}

/* This modifies where the title starts */

article.article-grid {
  padding-top: 25px;
}

.fixed.xl\:article-grid {
  grid-template-columns:
    [screen-start] 0 [page-start] 0.25rem [body-outset-start body-start gutter-left-start] minmax(10ch, 20ch) [body-inset-start middle-start] minmax(10ch, 20ch) [gutter-left-end] minmax(10ch, 20ch) minmax(10ch, 20ch) [gutter-right-start] minmax(10ch, 20ch) [middle-end body-inset-end] minmax(10ch, 20ch) [body-end gutter-right-end body-outset-end] 0.5rem [page-end] 0 [screen-end] !important;
  width: 100vw !important;
}

.xl\:col-margin-left,
.lg\:col-margin-left {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  margin-left: 0 !important;
  padding-left: 0.25rem !important;
}

[class*="col-margin-left"] nav {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

/* Right sidebar base styles (shared across breakpoints) */
.xl\:col-margin-right,
.lg\:col-margin-right {
  display: block !important;
  /* #<--- show/hide: none | block */
  position: sticky !important;
  /* #<--- sticky = scrolls with page, sticks at top */
  top: 80px !important;
  /* #<--- sticks 80px from top (below nav) */
  align-self: start !important;
  /* #<--- aligns to top of grid row */
  width: var(--sidebar-right-width) !important;
  /* #<--- sidebar width */
  max-width: var(--sidebar-right-max) !important;
  /* #<--- max sidebar width */
  padding-right: 15px !important;
  /* #<--- inner padding right */
  padding-left: 10px !important;
  /* #<--- inner padding left */
  background: var(--kate-white) !important;
  /* NO overflow-y or max-height = ONE page scrollbar */
}

/* Right sidebar dark mode */
html[data-theme="dark"] .xl\:col-margin-right,
html[data-theme="dark"] .lg\:col-margin-right {
  background: var(--kate-gray-900) !important;
}


/* ============================================================
   4. WORK LAPTOP WIDTH (1080-1535px)
   ============================================================ */

@media (min-width: 1080px) and (max-width: 1535px) {
  div[class*="sticky"][class*="top-0"] {
    padding-left: 0.5rem !important;
  }

  nav[class*="justify-between"] {
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  a[class*="ml-"][href="/"] {
    margin-left: 0 !important;
  }

  /* HIDE left sidebar on laptop to make room for contents */
  .xl\:col-margin-left,
  .lg\:col-margin-left {
    display: none !important;
  }

  /* Right sidebar inherits base styles from Section 3 */

  /* ---- CONTENT ---- */
  main.article-grid:not(.fixed) {
    margin-left: 20px !important;
    /* #<--- no left sidebar, just small buffer */
    margin-right: 395px !important;
    /* #<--- right sidebar (375px) + 20px buffer */
    max-width: calc(100vw - 435px) !important;
    /* #<--- 100vw - 20 - 395 - 20 safety */
  }

  main.article-grid,
  article.article-grid {
    grid-template-columns:
      [screen-start] 0 [page-start] 0.5rem [body-outset-start body-start gutter-left-start] minmax(10ch, 22ch) [body-inset-start middle-start] minmax(10ch, 22ch) [gutter-left-end] minmax(10ch, 22ch) minmax(10ch, 22ch) [gutter-right-start] minmax(10ch, 22ch) [middle-end body-inset-end] minmax(10ch, 22ch) [body-end gutter-right-end body-outset-end] 0.5rem [page-end] 0 [screen-end] !important;
  }
}


/* ============================================================
   5. DEFAULT WIDTH (1536-1999px)
   ============================================================ */

@media (min-width: 1536px) and (max-width: 1999px) {
  div[class*="sticky"][class*="top-0"] {
    padding-left: 0.5rem !important;
  }

  nav[class*="justify-between"] {
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  a[class*="ml-"][href="/"] {
    margin-left: 0 !important;
  }

  .xl\:col-margin-left,
  .lg\:col-margin-left {
    min-width: 200px !important;
    max-width: 220px !important;
  }

  /* Right sidebar inherits base styles from Section 3 */

  /* ---- CONTENT ---- */
  main.article-grid:not(.fixed) {
    margin-left: 230px !important;
    /* #<--- left sidebar (210px) + 20px buffer */
    margin-right: 395px !important;
    /* #<--- right sidebar (375px) + 20px buffer */
    max-width: calc(100vw - 645px) !important;
    /* #<--- 100vw - 230 - 395 - 20 safety */
  }

  main.article-grid,
  article.article-grid {
    grid-template-columns:
      [screen-start] 0 [page-start] 0.5rem [body-outset-start body-start gutter-left-start] minmax(12ch, 30ch) [body-inset-start middle-start] minmax(12ch, 30ch) [gutter-left-end] minmax(12ch, 30ch) minmax(12ch, 30ch) [gutter-right-start] minmax(12ch, 30ch) [middle-end body-inset-end] minmax(12ch, 30ch) [body-end gutter-right-end body-outset-end] 0.5rem [page-end] 0 [screen-end] !important;
  }
}


/* ============================================================
   6. OFFICE MONITOR WIDTH (>=2000px)
   ============================================================ */

@media (min-width: 2000px) {
  div[class*="sticky"][class*="top-0"] {
    padding-left: 0.5rem !important;
  }

  nav[class*="justify-between"] {
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  a[class*="ml-"][href="/"] {
    margin-left: 0 !important;
  }

  .fixed.xl\:article-grid {
    grid-template-columns:
      [screen-start] 0 [page-start] 0.25rem [body-outset-start body-start gutter-left-start] minmax(10ch, 20ch) [body-inset-start middle-start] minmax(10ch, 20ch) [gutter-left-end] minmax(10ch, 20ch) minmax(10ch, 20ch) [gutter-right-start] minmax(10ch, 20ch) [middle-end body-inset-end] minmax(10ch, 20ch) [body-end gutter-right-end body-outset-end] 0.5rem [page-end] 0 [screen-end] !important;
  }

  /* ---- LEFT BAR ---- */
  .xl\:col-margin-left {
    width: 220px !important;
    /* #<--- exact sidebar width */
    min-width: 220px !important;
    /* #<--- minimum sidebar width */
    max-width: 220px !important;
    /* #<--- maximum sidebar width */
  }

  /* Right sidebar inherits base styles from Section 3 */

  /* ---- CONTENT ---- */
  main.article-grid:not(.fixed) {
    margin-left: 240px !important;
    /* #<--- left sidebar (220px) + 20px buffer */
    margin-right: 395px !important;
    /* #<--- right sidebar (375px) + 20px buffer */
    max-width: calc(100vw - 655px) !important;
    /* #<--- 100vw - 240 - 395 - 20 safety */
  }

  main.article-grid,
  article.article-grid {
    grid-template-columns:
      [screen-start] 0 [page-start] 0.5rem [body-outset-start body-start gutter-left-start] minmax(15ch, 40ch) [body-inset-start middle-start] minmax(15ch, 40ch) [gutter-left-end] minmax(15ch, 40ch) minmax(15ch, 40ch) [gutter-right-start] minmax(15ch, 40ch) [middle-end body-inset-end] minmax(15ch, 40ch) [body-end gutter-right-end body-outset-end] 0.5rem [page-end] 0 [screen-end] !important;
  }
}


/* ============================================================
   6b. ULTRA-WIDE MONITOR (>=2500px)
   ============================================================
   Adds equal outer margins on both edges for a centered look.
   The margin grows with screen width: starts at 80px, increases beyond.
*/

@media (min-width: 2500px) {

  /* Outer edge margin - grows with screen width */
  :root {
    --edge-margin: calc((100vw - 2500px) / 2 + 80px);
    /* #<--- starts at 80px, grows as screen widens */
  }

  /* Nav bar - add padding on both edges */
  div[class*="sticky"][class*="top-0"] {
    padding-left: calc(var(--edge-margin) + 0.5rem) !important;
    padding-right: var(--edge-margin) !important;
  }

  /* Left sidebar - offset from left edge */
  .xl\:col-margin-left,
  .lg\:col-margin-left {
    left: var(--edge-margin) !important;
    /* #<--- distance from left edge */
  }

  /* Right sidebar - offset from right edge */
  .xl\:col-margin-right,
  .lg\:col-margin-right {
    right: var(--edge-margin) !important;
    /* #<--- distance from right edge */
  }

  /* Content - adjust margins to account for edge offset */
  main.article-grid:not(.fixed) {
    margin-left: calc(var(--edge-margin) + 240px) !important;
    /* #<--- edge margin + left sidebar (220px) + 20px buffer */
    margin-right: calc(var(--edge-margin) + 395px) !important;
    /* #<--- edge margin + right sidebar (375px) + 20px buffer */
    max-width: calc(100vw - 2 * var(--edge-margin) - 655px) !important;
    /* #<--- viewport - both edges - sidebars - buffers */
  }

  /* Grid overlay for nav */
  .fixed.xl\:article-grid {
    grid-template-columns:
      [screen-start] var(--edge-margin) [page-start] 0.25rem [body-outset-start body-start gutter-left-start] minmax(10ch, 20ch) [body-inset-start middle-start] minmax(10ch, 20ch) [gutter-left-end] minmax(10ch, 20ch) minmax(10ch, 20ch) [gutter-right-start] minmax(10ch, 20ch) [middle-end body-inset-end] minmax(10ch, 20ch) [body-end gutter-right-end body-outset-end] 0.5rem [page-end] var(--edge-margin) [screen-end] !important;
  }
}


/* ============================================================
   7. DARK MODE - OUTPUT CELLS
   ============================================================ */

html[data-theme="dark"] .cell_output {
  background-color: #ffffff !important;
  color: #000000 !important;
}


/* ============================================================
   8. RESPONSIVE CHARTS AND FIGURES
   ============================================================ */

.cell_output img,
figure img {
  max-width: 100% !important;
  height: auto !important;
}

.plotly-graph-div,
.js-plotly-plot {
  width: 100% !important;
}


/* ============================================================
   9. NAV BAR BUTTON STYLING (Tailwind override)
   ============================================================

   MyST book-theme uses Tailwind. Override nav button colors here.
   Variables for easy customization:
   --kate-nav-text: Default nav link color
   --kate-nav-text-hover: Hover color
   --kate-nav-text-active: Active/current page color
*/

html[data-theme="dark"] {
  --kate-nav-text: var(--kate-gray-300);
  --kate-nav-text-hover: var(--kate-gray-100);
  --kate-nav-text-active: var(--kate-white);
}

/* Primary nav bar links/buttons */
nav[class*="justify-between"] a,
nav[class*="justify-between"] button {
  color: var(--kate-nav-text) !important;
  transition: color 0.15s ease-in-out !important;
}

nav[class*="justify-between"] a:hover,
nav[class*="justify-between"] button:hover {
  color: var(--kate-nav-text-hover) !important;
}

/* Dropdown menu items in nav */
nav[class*="justify-between"] [role="menu"] a,
nav[class*="justify-between"] ul a {
  color: var(--kate-nav-text) !important;
}

nav[class*="justify-between"] [role="menu"] a:hover,
nav[class*="justify-between"] ul a:hover {
  color: var(--kate-nav-text-hover) !important;
  background-color: var(--kate-gray-100) !important;
}

html[data-theme="dark"] nav[class*="justify-between"] [role="menu"] a:hover,
html[data-theme="dark"] nav[class*="justify-between"] ul a:hover {
  background-color: var(--kate-gray-800) !important;
}

/* Active/current nav item */
nav[class*="justify-between"] a[aria-current="page"],
nav[class*="justify-between"] a.active {
  color: var(--kate-nav-text-active) !important;
  font-weight: 600 !important;
}


/* ============================================================
   10. TYPOGRAPHY
   ============================================================

   Kate Capital Brand Typography:
   - Times New Roman: Headings and highlights/quotes (elegant serif)
   - Arial Narrow: Body copy, taglines (all caps), captions (clean sans)
*/

/* Body text - Arial Narrow for all body copy */
body,
article,
.content,
p,
li,
td,
th {
  font-family: "Arial Narrow", "Arial", "Helvetica Neue", Helvetica, sans-serif !important;
  font-size: 0.95rem !important;
}

/* Headings - Times New Roman for elegant serif styling */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Times New Roman", Times, Georgia, serif !important;
  font-weight: 400 !important;
}

article h1 {
  font-size: 2.4rem !important;
  letter-spacing: -0.01em !important;
}

article h2 {
  font-size: 1.9rem !important;
  letter-spacing: -0.01em !important;
}

article h3 {
  font-size: 1.5rem !important;
}

article h4 {
  font-size: 1.25rem !important;
}

/* Blockquotes and highlights - Times New Roman for emphasis */
blockquote,
.quote,
.highlight-text,
article blockquote p {
  font-family: "Times New Roman", Times, Georgia, serif !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
}

/* Taglines - Arial Narrow in all caps */
.tagline,
.subtitle,
article .tagline {
  font-family: "Arial Narrow", "Arial", "Helvetica Neue", Helvetica, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

/* Captions - Arial Narrow, smaller size */
figcaption,
.caption,
.figure-caption,
article figcaption {
  font-family: "Arial Narrow", "Arial", "Helvetica Neue", Helvetica, sans-serif !important;
  font-size: 0.8rem !important;
  color: var(--kate-gray-600) !important;
}

html[data-theme="dark"] figcaption,
html[data-theme="dark"] .caption,
html[data-theme="dark"] .figure-caption {
  color: var(--kate-gray-400) !important;
}

/* Code blocks - keep monospace */
code,
pre,
kbd {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Monaco, Consolas, monospace !important;
}

/* Line height for readability */
article p,
article li {
  line-height: 1.7 !important;
}

/* Navigation and UI elements - Arial Narrow */
nav,
.myst-toc-item,
.myst-outline-item,
button {
  font-family: "Arial Narrow", "Arial", "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ============================================================
   11. IFRAME STYLING (General)
   ============================================================ */

/* Basic iframe styling - site-wide defaults */
article iframe {
  border: none !important;
}

/* Iframe containers with col-page class - expand to page width */
div.col-page,
figure.col-page {
  grid-column: page !important;
  width: 100% !important;
  max-width: none !important;
  margin: 1rem 0 !important;
}




/* ============================================================
   12. NOTEBOOKLM LINK STYLING
   ============================================================ */

/* NotebookLM banner container - ensure all text is white */
.notebooklm-banner,
div:has(> .notebooklm-link) {
  color: white !important;
}

/* All text and elements inside the banner should be white */
.notebooklm-banner *,
div:has(> .notebooklm-link) * {
  color: white !important;
}

/* NotebookLM link in notebooks - force white text */
.notebooklm-link,
.notebooklm-link:visited,
.notebooklm-link:hover,
.notebooklm-link:active {
  color: white !important;
  text-decoration: none !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}






/* ============================================================
   14. HIDE NOTEBOOK ERROR/WARNING OUTPUTS
   ============================================================ */

/* Hide stderr outputs (RuntimeWarnings, DeprecationWarnings, etc.) */
pre.myst-ansi-content {
  display: none !important;
}

/* Hide warning/error stream outputs */
.output_stderr,
[data-mime-type="application/vnd.jupyter.stderr"],
.jp-OutputArea-stderr {
  display: none !important;
}

/* Hide unknown directive errors (e.g., :::{todo} placeholders) */
details:has(.myst-exercise-header.bg-red-50\/80) {
  display: none !important;
}

/* Alternative: hide any exercise block with "Unknown Directive" */
details:has(.myst-exercise-title code) {
  display: none !important;
}


/* ============================================================
   15. TABLE OVERFLOW & SCROLLBAR STYLING
   ============================================================ */

/*
   APPROACH: Let the page scroll as ONE unit horizontally.
   Tables can be wider than the content area - that's OK.
   The entire page scrolls together (content + sidebars stay in sync).
*/

/* Allow tables to expand naturally - no nested scrollbars */
table,
.dataframe {
  width: auto !important;
}

/* Thin, subtle scrollbars for the page */
table::-webkit-scrollbar,
.cell_output::-webkit-scrollbar,
div[class*="table"]::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

table::-webkit-scrollbar-track,
.cell_output::-webkit-scrollbar-track,
div[class*="table"]::-webkit-scrollbar-track {
  background: transparent;
}

table::-webkit-scrollbar-thumb,
.cell_output::-webkit-scrollbar-thumb,
div[class*="table"]::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

table::-webkit-scrollbar-thumb:hover,
.cell_output::-webkit-scrollbar-thumb:hover,
div[class*="table"]::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Firefox scrollbar styling */
table,
.cell_output,
div[class*="table"] {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}


/* ============================================================
   16. HIDE HAMBURGER MENU WHEN NAV VISIBLE
   ============================================================ */

/* Hide hamburger button on larger screens where full nav is visible */
@media (min-width: 1280px) {

  nav button[aria-expanded],
  nav button[aria-label*="menu"],
  nav button[aria-label*="Menu"] {
    display: none !important;
  }
}


/* ============================================================
   17. SEARCH BUTTON STYLING
   ============================================================ */

/* Search button with clear label */
nav[class*="justify-between"] button[aria-label*="earch"],
nav[class*="justify-between"] button[class*="search"] {
  background: #f5f5f5 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  color: #6b7280 !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}

nav[class*="justify-between"] button[aria-label*="earch"]:hover,
nav[class*="justify-between"] button[class*="search"]:hover {
  background: #e5e5e5 !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

/* Show search icon */
nav button[aria-label*="earch"] svg:first-of-type,
nav button[class*="search"] svg:first-of-type {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 2 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Hide duplicate icons */
nav button[aria-label*="earch"] svg:not(:first-of-type),
nav button[class*="search"] svg:not(:first-of-type) {
  display: none !important;
}

/* Show "Search" text */
nav button[aria-label*="earch"] span:first-of-type,
nav button[class*="search"] span:first-of-type {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: inherit !important;
}

/* Hide keyboard shortcut */
nav button[aria-label*="earch"] kbd,
nav button[class*="search"] kbd {
  display: none !important;
}

/* Dark mode search button */
html[data-theme="dark"] nav[class*="justify-between"] button[aria-label*="earch"],
html[data-theme="dark"] nav[class*="justify-between"] button[class*="search"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #b0b0b0 !important;
}

html[data-theme="dark"] nav[class*="justify-between"] button[aria-label*="earch"]:hover,
html[data-theme="dark"] nav[class*="justify-between"] button[class*="search"]:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}


/* ============================================================
   END OF STYLESHEET
   ============================================================ */

/* Intro page specific styles */

:root {
  --kate-blue-500: #3372ff;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, #0f0f10 0%, #1a1a2e 50%, #16213e 100%) !important;
  border-radius: 16px !important;
  padding: 60px 40px !important;
  margin: 40px 0 !important;
  text-align: center !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

.hero-section h1 {
  color: #ffffff !important;
  font-size: 2.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  margin: 0 0 16px 0 !important;
}

.hero-section h1 a.header-anchor,
.hero-section h1 .heading-permalink,
.hero-section h1 a[aria-hidden="true"],
.hero-section a.anchor {
  display: none !important;
}

.hero-section p {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  margin: 0 !important;
}

/* Stats Row */
.stats-row {
  display: flex !important;
  justify-content: center !important;
  gap: 48px !important;
  margin: 40px 0 !important;
  flex-wrap: wrap !important;
}

.stat-item {
  text-align: center !important;
}

.stat-value {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--kate-blue-500) !important;
}

.stat-label {
  font-size: 0.85rem !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-top: 4px !important;
  font-weight: 600 !important;
}

/* Section Grid */
.section-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: 24px !important;
  margin: 32px 0 !important;
}

/* Section Cards */
.section-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 28px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e5e7eb !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  display: block !important;
}

.section-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--kate-blue-500) !important;
}

.section-card .card-icon {
  font-size: 2rem !important;
  margin-bottom: 12px !important;
  display: block !important;
}

.section-card h3 {
  color: #1f2937 !important;
  font-size: 1.3rem !important;
  margin: 0 0 8px 0 !important;
  font-weight: 700 !important;
}

.section-card p {
  color: #6b7280 !important;
  font-size: 0.95rem !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

.section-card .card-link {
  display: inline-block !important;
  margin-top: 16px !important;
  color: var(--kate-blue-500) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
}

/* Info Box */
.info-box {
  background: #f0f9ff !important;
  border-left: 4px solid var(--kate-blue-500) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 20px 24px !important;
  margin: 32px 0 !important;
}

.info-box p {
  margin: 0 !important;
  color: #1e40af !important;
}

/* Responsive - Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-section {
    padding: 50px 30px !important;
    margin: 30px 0 !important;
  }

  .hero-section h1 {
    font-size: 2.4rem !important;
  }

  .stats-row {
    gap: 36px !important;
  }

  .stat-value {
    font-size: 2rem !important;
  }

  .section-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .section-card {
    padding: 24px !important;
  }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
  .hero-section {
    padding: 32px 16px !important;
    margin: 16px 0 24px 0 !important;
    border-radius: 12px !important;
  }

  .hero-section h1 {
    font-size: 1.8rem !important;
    letter-spacing: 0.1em !important;
  }

  .hero-section p {
    font-size: 1rem !important;
  }

  .stats-row {
    gap: 24px !important;
    margin: 24px 0 !important;
  }

  .stat-value {
    font-size: 1.8rem !important;
  }

  .stat-label {
    font-size: 0.75rem !important;
  }

  .section-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .section-card {
    padding: 20px !important;
  }

  .section-card h3 {
    font-size: 1.1rem !important;
  }

  .section-card p {
    font-size: 0.9rem !important;
  }

  .info-box {
    padding: 16px !important;
  }
}


/* ============================================================
   OVERSIGHT SECTION - MUST BE LAST TO OVERRIDE OTHER BREAKPOINTS
   ============================================================ */

@media (min-width: 1080px) {

  /* Force left sidebar to stay visible on Oversight pages (overrides laptop breakpoint) */
  body:has(a[title="Oversight"][aria-current="page"]) .xl\:col-margin-left,
  body:has(a[title="Oversight"][aria-current="page"]) .lg\:col-margin-left,
  body:has(nav a[href="/oversight"][aria-current="page"]) .xl\:col-margin-left,
  body:has(nav a[href="/oversight"][aria-current="page"]) .lg\:col-margin-left {
    display: block !important;
    min-width: 200px !important;
    max-width: 220px !important;
  }

  /* Hide right sidebar on Oversight pages */
  body:has(a[title="Oversight"][aria-current="page"]) .xl\:col-margin-right,
  body:has(a[title="Oversight"][aria-current="page"]) .lg\:col-margin-right,
  body:has(nav a[href="/oversight"][aria-current="page"]) .xl\:col-margin-right,
  body:has(nav a[href="/oversight"][aria-current="page"]) .lg\:col-margin-right {
    display: none !important;
  }

  /* Extend content to right edge - override margins */
  body:has(a[title="Oversight"][aria-current="page"]) main.article-grid:not(.fixed),
  body:has(nav a[href="/oversight"][aria-current="page"]) main.article-grid:not(.fixed) {
    margin-left: 140px !important;
    /* Left sidebar (220px) + buffer */
    margin-right: 20px !important;
    max-width: calc(100vw - 160px) !important;
  }

  /* Override grid to allow full-width content */
  body:has(a[title="Oversight"][aria-current="page"]) main.article-grid,
  body:has(a[title="Oversight"][aria-current="page"]) article.article-grid,
  body:has(nav a[href="/oversight"][aria-current="page"]) main.article-grid,
  body:has(nav a[href="/oversight"][aria-current="page"]) article.article-grid {
    grid-template-columns: [screen-start page-start body-outset-start body-start] 1fr [body-end body-outset-end page-end screen-end] !important;
  }
}