/* =============================================================================
   readcon-core docs — readability + accessibility
   Patterns from MDN / Google developer style / WCAG 2.2 AA, Shibuya peers
   (rgpot, rgpycrumbs): measure, focus, landmarks, large code, contrast.
   ============================================================================= */

:root {
  --rc-font-sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --rc-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono",
    "Segoe UI Mono", Menlo, Consolas, monospace;
  --rc-indigo: #4f46e5;
  --rc-indigo-deep: #312e81;
  --rc-amber: #b45309; /* darker for AA on light bg */
  --rc-measure: 68ch;
  --rc-focus: #1d4ed8;
  --rc-focus-ring: 0 0 0 3px #fff, 0 0 0 6px var(--rc-focus);
  --rc-radius: 0.5rem;
  /* Code: absolute sizes so it does not shrink with nested em */
  --rc-code-size: 0.9375rem; /* 15px — MDN-ish floor */
  --rc-code-size-block: 0.96875rem; /* 15.5px blocks */
  --rc-code-lh: 1.65;
  --rc-inline-code-bg: color-mix(in srgb, var(--rc-indigo) 9%, #f1f5f9);
  --rc-inline-code-fg: #1e1b4b;
  --rc-pre-bg: #0f172a;
  --rc-pre-fg: #e2e8f0;
  --rc-link: #3730a3;
  --rc-link-visited: #5b21b6;
}

html.dark,
html[data-theme="dark"] {
  --rc-inline-code-bg: color-mix(in srgb, #a5b4fc 16%, #1e293b);
  --rc-inline-code-fg: #e0e7ff;
  --rc-link: #a5b4fc;
  --rc-link-visited: #c4b5fd;
  --rc-focus: #93c5fd;
  --rc-pre-bg: #020617;
  --rc-pre-fg: #e2e8f0;
}

/* ---- Skip link ----------------------------------------------------------- */
.rc-skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 10000;
  padding: 0.6rem 1rem;
  background: var(--rc-indigo-deep);
  color: #fff !important;
  font-family: var(--rc-font-sans);
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--rc-radius);
  text-decoration: none;
  transition: top 0.15s ease;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
}
.rc-skip-link:focus,
.rc-skip-link:focus-visible {
  top: 0.75rem;
  outline: none;
  box-shadow: var(--rc-focus-ring);
}

/* ---- Global type --------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html,
body,
.sy-page,
.sy-head,
.sy-lside,
.globaltoc,
.sy-foot,
.sy-rside {
  font-family: var(--rc-font-sans) !important;
}

body,
.sy-page {
  font-size: 1.125rem; /* 18px body — closer to MDN / modern docs */
  line-height: 1.7;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* Prose measure */
.sy-page article.yue,
.sy-page .yue,
article.yue {
  max-width: min(100%, calc(var(--rc-measure) + 14rem));
}

.sy-page p,
.sy-page li,
.sy-page dd,
.sy-page .caption,
.sy-page figcaption {
  max-width: var(--rc-measure);
}

.sy-page h1,
.sy-page h2,
.sy-page h3,
.sy-page h4,
.sy-head-brand strong {
  font-family: var(--rc-font-sans) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  scroll-margin-top: 5.5rem;
  text-wrap: balance;
}

.sy-page h1 { font-size: clamp(1.85rem, 2.6vw, 2.25rem); }
.sy-page h2 { font-size: clamp(1.4rem, 2vw, 1.6rem); margin-top: 2.15rem; }
.sy-page h3 { font-size: 1.2rem; margin-top: 1.6rem; }

/* ---- Links: never rely on color alone ------------------------------------ */
.sy-page a.reference {
  color: var(--rc-link);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
  text-decoration-skip-ink: auto;
}
.sy-page a.reference:visited {
  color: var(--rc-link-visited);
}
.sy-page a.reference:hover {
  text-decoration-thickness: 0.12em;
}
.globaltoc a,
.sy-rside a {
  text-underline-offset: 0.12em;
}

/* ---- Focus (WCAG 2.4.7 / 2.4.11 / 2.4.13) --------------------------------- */
:focus {
  outline: none;
}
:focus-visible {
  outline: 3px solid var(--rc-focus);
  outline-offset: 3px;
  border-radius: 2px;
}
.sy-page a:focus-visible,
.globaltoc a:focus-visible,
.sy-rside a:focus-visible,
.sy-head a:focus-visible,
.sy-page button:focus-visible,
.sy-page .copybtn:focus-visible,
.sy-page summary:focus-visible {
  outline: 3px solid var(--rc-focus);
  outline-offset: 3px;
}

/* ---- CODE: larger, clearer, high contrast -------------------------------- */
/* Inline code */
.sy-page :not(pre) > code,
.sy-page :not(pre) > tt,
.sy-page p code,
.sy-page li code,
.sy-page td code,
.sy-page th code,
.sy-page dd code,
.sy-page .docutils.literal,
.sy-page kbd,
.sy-page samp {
  font-family: var(--rc-font-mono) !important;
  font-size: var(--rc-code-size) !important;
  font-weight: 500;
  line-height: 1.45;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  background: var(--rc-inline-code-bg);
  color: var(--rc-inline-code-fg);
  padding: 0.12em 0.38em;
  border-radius: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--rc-indigo) 14%, transparent);
  word-break: break-word;
}

/* Fenced / highlighted blocks
   Sphinx nests div.highlight-LANG > div.highlight > pre. Framing BOTH wrappers
   drew double borders ("weird lines") around every code block — only frame the
   outermost highlight-* node (or a lone .highlight / literal-block). */
.sy-page div.highlight,
.sy-page div[class*="highlight-"],
.sy-page pre,
.sy-page pre.literal-block,
.sy-page .literal-block,
.sy-page div[class*="highlight"] pre,
.sy-page .highlight pre,
.sy-page .copybutton-wrapper,
.sy-page .code-block-caption + div {
  font-family: var(--rc-font-mono) !important;
}

/* Outer frame only */
.sy-page div[class*="highlight-"],
.sy-page > div.highlight,
.sy-page article div.highlight:not(div[class*="highlight-"] div.highlight),
.sy-page pre.literal-block {
  border-radius: 0.55rem;
  margin: 1.15rem 0 1.35rem;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, #64748b 35%, transparent);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.06);
  overflow: hidden;
  background: var(--rc-pre-bg);
}

/* Nested inner .highlight must not add a second border/margin/background */
.sy-page div[class*="highlight-"] > div.highlight,
.sy-page div[class*="highlight-"] div.highlight {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible;
}

.sy-page pre,
.sy-page .highlight pre,
.sy-page div[class*="highlight"] pre,
.sy-page pre.literal-block {
  font-family: var(--rc-font-mono) !important;
  font-size: var(--rc-code-size-block) !important;
  line-height: var(--rc-code-lh) !important;
  font-weight: 400;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  tab-size: 4;
  -moz-tab-size: 4;
  padding: 1.05rem 1.2rem !important;
  margin: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--rc-pre-bg) !important;
  color: var(--rc-pre-fg) !important;
  /* no second radius/border on <pre> — outer wrapper owns the chrome */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
}

/* Code fences: Pygments token <span>s must be inline (colour via class, not box).
   Sphinx may also emit <span data-line>…\n</span>; extra-foot unwraps those so
   theme display:block on [data-line] cannot double line gaps (R looked broken). */
/* Theme may set pre { display: grid } (each token span = grid row). Force block. */
.sy-page .highlight pre,
.sy-page div[class*="highlight-"] pre,
.sy-page pre.literal-block,
div.highlight pre,
div[class*="highlight-"] pre {
  display: block !important;
  white-space: pre !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
}

.sy-page .highlight pre span,
.sy-page .highlight pre code,
.sy-page div[class*="highlight-"] pre span,
.sy-page div[class*="highlight-"] pre code,
.sy-page pre.literal-block span,
.sy-page pre.literal-block code,
div.highlight pre span,
div[class*="highlight-"] pre span,
.highlight pre span[data-line],
.highlight pre [data-line] {
  display: inline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keyboard focus on scrollable pre (extra-foot sets tabindex=0) */
.sy-page pre:focus-visible,
.sy-page .highlight pre:focus-visible {
  outline: 3px solid var(--rc-focus);
  outline-offset: -3px; /* inside the frame, not a second outer line */
}

/* Copy button: larger hit target */
.sy-page button.copybtn,
.sy-page .copybtn {
  min-width: 2.5rem;
  min-height: 2.5rem;
  opacity: 0.85;
}
.sy-page button.copybtn:hover,
.sy-page .copybtn:hover,
.sy-page button.copybtn:focus-visible {
  opacity: 1;
}

/* Code caption / prompt lines */
.sy-page .code-block-caption,
.sy-page .caption-code {
  font-family: var(--rc-font-sans) !important;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Selection in code: high visibility */
.sy-page pre::selection,
.sy-page .highlight ::selection,
.sy-page code::selection {
  background: #38bdf8;
  color: #0f172a;
}

/* Syntax on dark fences (conf uses dark_code; pre bg is always slate).
   doxyrest-pygments.css forces many names to #000 !important — unreadable on
   --rc-pre-bg. Override with AA-friendly GitHub-dark-ish tokens. */
.sy-page .highlight pre,
.sy-page div[class*="highlight-"] pre,
div.highlight pre,
div[class*="highlight-"] pre,
.yue.dark-code .highlight pre {
  --rc-syn-text: #e6edf3;
  --rc-syn-comment: #8b949e;
  --rc-syn-keyword: #ff7b72;
  --rc-syn-string: #a5d6ff;
  --rc-syn-number: #79c0ff;
  --rc-syn-function: #d2a8ff;
  --rc-syn-name: #e6edf3;
  --rc-syn-operator: #ff7b72;
  --rc-syn-punct: #c9d1d9;
  --rc-syn-builtin: #79c0ff;
  --rc-syn-class: #ffa657;
  color: var(--rc-syn-text) !important;
}

/* Beat doxyrest-pygments.css (#000 !important on .nf / names) */
.sy-page .highlight pre .n,
.sy-page .highlight pre .nx,
.sy-page .highlight pre .nv,
.sy-page .highlight pre .vc,
.sy-page .highlight pre .vg,
.sy-page .highlight pre .vi,
.sy-page .highlight pre .nl,
.sy-page .highlight pre .nn,
.sy-page .highlight pre .py,
.sy-page .highlight pre .bp,
.sy-page .highlight pre .w,
div[class*="highlight-"] pre .n,
div[class*="highlight-"] pre .nx,
div.highlight pre .n,
.highlight pre .n {
  color: var(--rc-syn-name, #e6edf3) !important;
}

.sy-page .highlight pre .nf,
.sy-page .highlight pre .fm,
.sy-page .highlight pre .nc,
.sy-page .highlight pre .na,
.sy-page .highlight pre .no,
.sy-page .highlight pre .nd,
.sy-page .highlight pre .ni,
.sy-page .highlight pre .ne,
.sy-page .highlight pre .nt,
div[class*="highlight-"] pre .nf,
div.highlight pre .nf,
.highlight pre .nf {
  color: var(--rc-syn-function, #d2a8ff) !important;
  font-weight: 500 !important;
}

.sy-page .highlight pre .nb,
.sy-page .highlight pre .bp,
div[class*="highlight-"] pre .nb,
.highlight pre .nb {
  color: var(--rc-syn-builtin, #79c0ff) !important;
}

.sy-page .highlight pre .k,
.sy-page .highlight pre .kc,
.sy-page .highlight pre .kd,
.sy-page .highlight pre .kn,
.sy-page .highlight pre .kp,
.sy-page .highlight pre .kr,
.sy-page .highlight pre .kt,
div[class*="highlight-"] pre .k,
.highlight pre .k {
  color: var(--rc-syn-keyword, #ff7b72) !important;
}

.sy-page .highlight pre .s,
.sy-page .highlight pre .s1,
.sy-page .highlight pre .s2,
.sy-page .highlight pre .sa,
.sy-page .highlight pre .sb,
.sy-page .highlight pre .sc,
.sy-page .highlight pre .dl,
.sy-page .highlight pre .sd,
.sy-page .highlight pre .se,
.sy-page .highlight pre .sh,
.sy-page .highlight pre .si,
.sy-page .highlight pre .sx,
.sy-page .highlight pre .sr,
.sy-page .highlight pre .ss,
div[class*="highlight-"] pre .s,
.highlight pre .s {
  color: var(--rc-syn-string, #a5d6ff) !important;
}

.sy-page .highlight pre .m,
.sy-page .highlight pre .mb,
.sy-page .highlight pre .mf,
.sy-page .highlight pre .mh,
.sy-page .highlight pre .mi,
.sy-page .highlight pre .mo,
.sy-page .highlight pre .il,
div[class*="highlight-"] pre .m,
.highlight pre .m {
  color: var(--rc-syn-number, #79c0ff) !important;
}

.sy-page .highlight pre .o,
.sy-page .highlight pre .ow,
div[class*="highlight-"] pre .o,
.highlight pre .o {
  color: var(--rc-syn-operator, #ff7b72) !important;
}

.sy-page .highlight pre .p,
div[class*="highlight-"] pre .p,
.highlight pre .p {
  color: var(--rc-syn-punct, #c9d1d9) !important;
}

.sy-page .highlight pre .c,
.sy-page .highlight pre .c1,
.sy-page .highlight pre .cm,
.sy-page .highlight pre .cp,
.sy-page .highlight pre .cs,
.sy-page .highlight pre .ch,
.sy-page .highlight pre .cpf,
div[class*="highlight-"] pre .c1,
.highlight pre .c1 {
  color: var(--rc-syn-comment, #8b949e) !important;
  opacity: 1;
  font-style: italic;
}

html.dark .highlight,
html.dark .highlight pre,
html.dark pre.literal-block,
html[data-theme="dark"] .highlight,
html[data-theme="dark"] .highlight pre,
.yue.dark-code .highlight,
.yue.dark-code .highlight pre,
.yue.dark-code pre.literal-block {
  --syntax-text: #e6edf3;
  background: var(--rc-pre-bg) !important;
  color: var(--rc-pre-fg) !important;
}

/* ---- Hero ---------------------------------------------------------------- */
.rc-hero {
  text-align: center;
  margin: 0.5rem auto 1.75rem;
  max-width: 42rem;
}
.rc-hero-logo {
  display: block;
  margin: 0 auto 1rem;
  max-width: min(400px, 92vw);
  height: auto;
}
.rc-hero-tagline {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--sy-f-text-mute, #475569);
  margin: 0 auto;
  max-width: 36rem;
}
html[data-theme="dark"] .rc-hero-tagline,
html.dark .rc-hero-tagline {
  color: #94a3b8;
}

html[data-theme="dark"] .light-only,
html.dark .light-only { display: none !important; }
html:not([data-theme="dark"]):not(.dark) .dark-only { display: none !important; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .light-only { display: none !important; }
  html:not([data-theme="light"]) .dark-only { display: inline-block !important; }
  html:not([data-theme="light"]) .rc-hero .dark-only { display: block !important; }
}

/* ---- Admonitions --------------------------------------------------------- */
.sy-page div.important,
.sy-page div.note,
.sy-page div.tip,
.sy-page div.warning,
.sy-page div.caution,
.sy-page div.attention {
  border-radius: var(--rc-radius);
  margin: 1.35rem 0;
  padding: 0.95rem 1.15rem;
  border-left: 4px solid var(--rc-indigo);
  max-width: calc(var(--rc-measure) + 2rem);
}
.sy-page div.important,
.sy-page div.warning,
.sy-page div.caution {
  border-left-color: var(--rc-amber);
}

/* ---- Tables -------------------------------------------------------------- */
.sy-page table.next-steps,
.sy-page table.docutils {
  width: 100%;
  max-width: 48rem;
  border-collapse: collapse;
  font-size: 1.05rem;
}
.sy-page table.docutils th,
.sy-page table.docutils td {
  padding: 0.7rem 0.9rem;
  vertical-align: top;
}
.sy-page table.docutils th {
  font-weight: 700;
  text-align: left;
}
.sy-page table.docutils caption {
  caption-side: top;
  text-align: left;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

/* ---- Sidebars ------------------------------------------------------------ */
.globaltoc p.caption {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.8;
  margin-top: 1.1rem;
}

.globaltoc a.current,
.globaltoc li.current > a {
  font-weight: 700;
  border-left: 3px solid var(--rc-indigo);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

.sy-rside,
aside.sy-rside {
  font-family: var(--rc-font-sans) !important;
  font-size: 0.95rem;
}
.sy-rside .localtoc,
.sy-rside nav {
  line-height: 1.5;
}
.sy-rside .localtoc h3,
.sy-rside .localtoc .caption {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  opacity: 0.85;
}

/* Touch targets */
@media (max-width: 768px) {
  .globaltoc a,
  .sy-head a,
  .sy-rside a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
  :root {
    --rc-code-size: 0.9rem;
    --rc-code-size-block: 0.9rem;
  }
  body,
  .sy-page {
    font-size: 1.0625rem;
  }
}

/* Prefer larger type on wide screens with room */
@media (min-width: 1200px) {
  :root {
    --rc-code-size: 1rem; /* 16px inline */
    --rc-code-size-block: 1rem; /* 16px blocks */
  }
}

/* ---- Figures ------------------------------------------------------------- */
.sy-page img,
.sy-page .figure img,
.sy-page figure img {
  border-radius: 0.45rem;
  max-width: 100%;
  height: auto;
}
.sy-page .figure,
.sy-page figure {
  margin: 1.5rem auto 1.75rem;
  text-align: center;
  max-width: 52rem;
}
.sy-page .figure .caption,
.sy-page figcaption,
.sy-page p.caption {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--sy-f-text-mute, #475569);
  margin-top: 0.55rem;
  text-align: left;
  max-width: var(--rc-measure);
  margin-left: auto;
  margin-right: auto;
}

/* Images that are diagrams: keep alt as accessible name via img */
.sy-page img[alt=""] {
  /* decorative only — discourage empty alt on content figs */
}

/* ---- Motion / contrast preferences --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rc-skip-link { transition: none; }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  .sy-page a.reference {
    text-decoration-thickness: 0.12em;
  }
  .sy-page :not(pre) > code,
  .sy-page p code {
    border-width: 2px;
  }
  .sy-page pre,
  .sy-page .highlight pre {
    border: 2px solid #94a3b8;
  }
  :focus-visible {
    outline-width: 4px;
  }
}

/* Forced colors (Windows high contrast) */
@media (forced-colors: active) {
  .sy-page pre,
  .sy-page .highlight pre,
  .sy-page :not(pre) > code {
    border: 1px solid CanvasText;
    forced-color-adjust: none;
  }
  .rc-skip-link {
    border: 2px solid CanvasText;
  }
}

/* ---- Cards --------------------------------------------------------------- */
.sy-page .sd-card {
  border-radius: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--rc-indigo) 18%, transparent);
  height: 100%;
}
.sy-page .sd-card-title {
  font-weight: 700;
  font-family: var(--rc-font-sans) !important;
  font-size: 1.05rem;
}
.sy-page .sd-card:focus-within {
  outline: 3px solid var(--rc-focus);
  outline-offset: 2px;
}

.sy-page .mermaid {
  margin: 1.25rem 0 1.5rem;
}

.sy-page .section > h1:first-child {
  margin-top: 0.25rem;
}

.sy-foot {
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Print: readable code, no chrome noise */
@media print {
  .rc-skip-link,
  .sy-head,
  .sy-lside,
  .sy-rside,
  .copybtn {
    display: none !important;
  }
  body,
  .sy-page {
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
  }
  .sy-page pre,
  .sy-page .highlight pre {
    background: #f8fafc !important;
    color: #000 !important;
    border: 1px solid #333;
    font-size: 9.5pt !important;
    white-space: pre-wrap;
    overflow: visible;
  }
  .sy-page a.reference {
    color: #000;
    text-decoration: underline;
  }
}