/*
 * Juno-themed overrides for the Furo Sphinx theme.
 *
 * Three things layered on top of stock Furo:
 *   1. IBM Plex Sans / Mono typography (matches juno.sh).
 *   2. Pygments token → Juno editor theme color mapping for both
 *      light and dark modes (matches the in-app text editor).
 *   3. Monospace rendering for module names in the sidebar
 *      toctree (`juno.bluetooth`, etc.) — they're code identifiers,
 *      not prose.
 *
 * Brand orange (#ef7200) and font-stack overrides are set via
 * Furo's CSS variables in `conf.py`; this file only contains rules
 * that don't have a matching Furo variable.
 */

/* ---------------------------------------------------------------- */
/* 0. Sidebar logo — the wordmark SVG (54x19 native) is too small   */
/*    at Furo's default styling but felt overbearing at 70% sidebar */
/*    width; pin it at ~45% so it reads as a brand mark, not a     */
/*    headline.                                                     */
/* ---------------------------------------------------------------- */

.sidebar-brand-text {
    /* Hidden via ``sidebar_hide_name`` — belt-and-braces in case
       the option is reverted. The wordmark already says "juno". */
    display: none;
}

.sidebar-logo {
    max-width: 50%;
    width: 50%;
    /* Slight top offset to compensate for the wordmark's optical
       weight sitting low in the SVG bounds — without this the logo
       reads as bottom-aligned in the sidebar header area. */
    margin: 0.4rem 0 0 0;
}

/* Compact-width header (Furo's ``.mobile-header``). Replace the
   plain "juno" text with the same logo we show in the sidebar so
   the brand reads consistently across breakpoints. The text inside
   ``.brand`` is collapsed to zero font-size and made transparent so
   it takes no visible space; the logo loads as a background image
   on the same element. */
.mobile-header .header-center .brand {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("juno-logo-light.svg");
    width: 6rem;
    height: 1.6rem;
    font-size: 0;
    color: transparent;
}

body[data-theme="dark"] .mobile-header .header-center .brand {
    background-image: url("juno-logo-dark.svg");
}

@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) .mobile-header .header-center .brand {
        background-image: url("juno-logo-dark.svg");
    }
}

/* The theme toggle sits flush against the TOC overlay button in
   Furo's default — give them a small gap so they read as two
   separate controls. */
.mobile-header .header-right .theme-toggle-container {
    margin-right: 0.5rem;
}

/* ---------------------------------------------------------------- */
/* 1. Toctree links — module names render in the monospace stack    */
/*    everywhere they appear: sidebar nav + the index page's        */
/*    bottom module list.                                           */
/* ---------------------------------------------------------------- */

.sidebar-tree .toctree-l1 > a,
.sidebar-tree .toctree-l2 > a,
.sidebar-tree .toctree-l3 > a {
    font-family: var(--font-stack--monospace);
    font-size: 0.875em;
}

/* The "Modules" caption (h2 above the list) stays in the regular
   font stack — it's a label, not an identifier. */
.sidebar-tree .caption {
    font-family: var(--font-stack);
}

/* Module-name links on the index page (and any other ``:doc:``
   reference rendered inline) match Furo's ``code.literal`` styling
   exactly — background, border, radius, font-size, padding — so each
   submodule name reads as an inline code chip, then tint the text in
   brand orange for discoverability. Covers both the old toctree-
   wrapper rendering (when ``:hidden:`` is removed) and the
   handwritten ``:doc:``-link list on the index page. */
article .toctree-wrapper li > a,
article a.reference.internal > span.doc {
    font-family: var(--font-stack--monospace);
    font-size: var(--font-size--small--2);
    background: var(--color-inline-code-background);
    border: 1px solid var(--color-background-border);
    border-radius: 0.2em;
    padding: 0.1em 0.2em;
    color: var(--color-brand-content);
}

article .toctree-wrapper li > a:hover,
article a.reference.internal:hover > span.doc {
    color: var(--color-brand-content);
}

/* ---------------------------------------------------------------- */
/* 1b. Args / Raises / Returns / Return-type field lists — every    */
/*     parameter name, type reference, exception class and bare     */
/*     return-type link renders in upright monospace, slightly      */
/*     smaller than body text, at medium weight. No background or   */
/*     border — these are inline identifiers in dense lists, and    */
/*     stacking chips makes the parameter blocks visually noisy.    */
/*     Descriptive text after the ``–`` separator sits as a loose   */
/*     text node and stays in body font.                            */
/*                                                                  */
/*     Four layout variants Sphinx emits in this area:              */
/*       1. multi-param: dd > ul.simple > li > p > strong + em      */
/*       2. single-param: dd > p > strong + em (no ul)              */
/*       3. return type: dd > p > a (no em, type is the link text)  */
/*       4. raises:       dd > ul.simple > li > p > a > strong      */
/*     A simple descendant pair of selectors catches all four.      */
/* ---------------------------------------------------------------- */

dl.field-list dd strong,
dl.field-list dd em,
dl.field-list dd p > a {
    font-family: var(--font-stack--monospace);
    font-style: normal;
    font-weight: 500;
    font-size: 0.9em;
}

/* ---------------------------------------------------------------- */
/* 1c. Prev / Next page navigation at the bottom of every page —    */
/*     show titles in monospace. Most page titles are juno module   */
/*     names (``juno.bluetooth`` etc.); the sole exception is the   */
/*     index page's "Home" title, which reads cleanly in mono too.  */
/* ---------------------------------------------------------------- */

.related-pages .title {
    font-family: var(--font-stack--monospace);
}

/* ---------------------------------------------------------------- */
/* 1d. Page-level H1 — every module page's title is a Python        */
/*     identifier (``juno.bluetooth`` etc.); the index page's       */
/*     title is just ``juno``. Both read better in monospace.       */
/*     Sub-section headings (h2 and below) stay in the body font    */
/*     since they're descriptive labels, not identifiers.           */
/* ---------------------------------------------------------------- */

article > section > h1 {
    font-family: var(--font-stack--monospace);
}

/* Pin a small outlined ``BETA`` chip after every page H1 — visible
   on every module page so users who land via search / external link
   still see the pre-stable-release indicator. Outlined (border +
   text in brand orange, transparent fill) reads as a quieter
   typographic mark than a filled chip — present, but not loud.
   Same brand color as Furo's ``.. warning::`` admonition palette
   so the badge and the index-page warning read as the same signal.

   Hooked onto the headerlink's ``::before`` rather than the H1's
   ``::after`` so the visual order is ``<title> <BETA> <¶>`` — the
   anchor stays last, matching the convention everywhere else on
   the site. Drop the whole rule when the API stabilises. */
article > section > h1 > a.headerlink::before {
    content: "BETA";
    display: inline-block;
    margin: 0 0.3rem 0 0.3rem;
    padding: 0.15rem 0.4rem;
    font-family: var(--font-stack);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1;
    vertical-align: 0.35em;
    background: transparent;
    color: var(--color-brand-primary);
    border: 1.5px solid var(--color-brand-primary);
    border-radius: 0.25rem;
    /* Furo hides ``.headerlink`` with ``visibility: hidden`` and only
       reveals it on hover. ``visibility`` cascades, so without this
       opt-back-in the badge would also be hover-only. The ``¶``
       anchor in the parent stays hover-gated; the badge does not. */
    visibility: visible;
}

/* ---------------------------------------------------------------- */
/* 1e. API entity signatures (``class …``, ``def …``, ``property …``,*/
/*     etc.) render at body font size rather than Furo's default    */
/*     ``var(--api-font-size)`` (~87.5%). The default felt small    */
/*     given how much information density these lines carry —       */
/*     bumping to body size makes signatures the natural anchor of  */
/*     each entry.                                                  */
/* ---------------------------------------------------------------- */

.sig:not(.sig-inline) {
    font-size: inherit;
}


/* ---------------------------------------------------------------- */
/* 2. Pygments — Juno light theme.                                  */
/*    Mapping: Pygments token class → Juno TextEditorLightTheme.    */
/*                                                                  */
/*    Block background: pinned to the sidebar background so the     */
/*    code surface and the navigation surface share one tint. The   */
/*    Pygments-generated stylesheet hardcodes a different hex on    */
/*    ``.highlight`` so we can't drive this purely through Furo's   */
/*    --color-code-background variable; we override at the same    */
/*    selector with the matching variable here.                     */
/* ---------------------------------------------------------------- */

body[data-theme="light"] .highlight,
body:not([data-theme="dark"]) .highlight {
    background: var(--color-sidebar-background);
}

body[data-theme="light"] .highlight pre,
body:not([data-theme="dark"]) .highlight pre {
    color: #000000;                  /* text */
}

/* Comments (.c, .ch, .cm, .cp, .cpf, .c1, .cs) → comments */
body[data-theme="light"] .highlight .c,
body[data-theme="light"] .highlight .ch,
body[data-theme="light"] .highlight .cm,
body[data-theme="light"] .highlight .cp,
body[data-theme="light"] .highlight .cpf,
body[data-theme="light"] .highlight .c1,
body[data-theme="light"] .highlight .cs,
body:not([data-theme="dark"]) .highlight .c,
body:not([data-theme="dark"]) .highlight .ch,
body:not([data-theme="dark"]) .highlight .cm,
body:not([data-theme="dark"]) .highlight .cp,
body:not([data-theme="dark"]) .highlight .cpf,
body:not([data-theme="dark"]) .highlight .c1,
body:not([data-theme="dark"]) .highlight .cs {
    color: #5d6b79;
    font-style: italic;
}

/* Keywords (.k, .kc, .kd, .kn, .kp, .kr, .kt) → keywords */
body[data-theme="light"] .highlight .k,
body[data-theme="light"] .highlight .kc,
body[data-theme="light"] .highlight .kd,
body[data-theme="light"] .highlight .kn,
body[data-theme="light"] .highlight .kp,
body[data-theme="light"] .highlight .kr,
body:not([data-theme="dark"]) .highlight .k,
body:not([data-theme="dark"]) .highlight .kc,
body:not([data-theme="dark"]) .highlight .kd,
body:not([data-theme="dark"]) .highlight .kn,
body:not([data-theme="dark"]) .highlight .kp,
body:not([data-theme="dark"]) .highlight .kr {
    color: #9b2392;
    font-weight: 600;
}

/* Strings (.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss) → strings */
body[data-theme="light"] .highlight .s,
body[data-theme="light"] .highlight .sa,
body[data-theme="light"] .highlight .sb,
body[data-theme="light"] .highlight .sc,
body[data-theme="light"] .highlight .dl,
body[data-theme="light"] .highlight .sd,
body[data-theme="light"] .highlight .s2,
body[data-theme="light"] .highlight .se,
body[data-theme="light"] .highlight .sh,
body[data-theme="light"] .highlight .si,
body[data-theme="light"] .highlight .sx,
body[data-theme="light"] .highlight .sr,
body[data-theme="light"] .highlight .s1,
body[data-theme="light"] .highlight .ss,
body:not([data-theme="dark"]) .highlight .s,
body:not([data-theme="dark"]) .highlight .sa,
body:not([data-theme="dark"]) .highlight .sb,
body:not([data-theme="dark"]) .highlight .sc,
body:not([data-theme="dark"]) .highlight .dl,
body:not([data-theme="dark"]) .highlight .sd,
body:not([data-theme="dark"]) .highlight .s2,
body:not([data-theme="dark"]) .highlight .se,
body:not([data-theme="dark"]) .highlight .sh,
body:not([data-theme="dark"]) .highlight .si,
body:not([data-theme="dark"]) .highlight .sx,
body:not([data-theme="dark"]) .highlight .sr,
body:not([data-theme="dark"]) .highlight .s1,
body:not([data-theme="dark"]) .highlight .ss {
    color: #c41a15;
}

/* Numbers (.m, .mb, .mf, .mh, .mi, .il, .mo) → numbers */
body[data-theme="light"] .highlight .m,
body[data-theme="light"] .highlight .mb,
body[data-theme="light"] .highlight .mf,
body[data-theme="light"] .highlight .mh,
body[data-theme="light"] .highlight .mi,
body[data-theme="light"] .highlight .il,
body[data-theme="light"] .highlight .mo,
body:not([data-theme="dark"]) .highlight .m,
body:not([data-theme="dark"]) .highlight .mb,
body:not([data-theme="dark"]) .highlight .mf,
body:not([data-theme="dark"]) .highlight .mh,
body:not([data-theme="dark"]) .highlight .mi,
body:not([data-theme="dark"]) .highlight .il,
body:not([data-theme="dark"]) .highlight .mo {
    color: #1c00ce;
}

/* Function names — declaration (.nf), call/builtin handled below */
body[data-theme="light"] .highlight .nf,
body[data-theme="light"] .highlight .fm,
body:not([data-theme="dark"]) .highlight .nf,
body:not([data-theme="dark"]) .highlight .fm {
    color: #0f689f;
}

/* Built-in functions (.nb) — Python's print, len, etc. */
body[data-theme="light"] .highlight .nb,
body:not([data-theme="dark"]) .highlight .nb {
    color: #6b36a9;
}

/* Class definitions (.nc) → typeDeclaration */
body[data-theme="light"] .highlight .nc,
body:not([data-theme="dark"]) .highlight .nc {
    color: #0a4f79;
    font-weight: 600;
}

/* Built-in types (.bp — "self", "cls"; .ne — exceptions) → typeBuiltin */
body[data-theme="light"] .highlight .bp,
body[data-theme="light"] .highlight .ne,
body:not([data-theme="dark"]) .highlight .bp,
body:not([data-theme="dark"]) .highlight .ne {
    color: #3900a0;
}

/* Decorators (.nd) → attributes */
body[data-theme="light"] .highlight .nd,
body:not([data-theme="dark"]) .highlight .nd {
    color: #815e03;
}

/* Operators (.o, .ow) — keep them in muted text for readability */
body[data-theme="light"] .highlight .o,
body[data-theme="light"] .highlight .ow,
body:not([data-theme="dark"]) .highlight .o,
body:not([data-theme="dark"]) .highlight .ow {
    color: #000000;
}

/* ---------------------------------------------------------------- */
/* 3. Pygments — Juno dark theme.                                   */
/*    Mapping: Pygments token class → Juno TextEditorDarkTheme.     */
/* ---------------------------------------------------------------- */

body[data-theme="dark"] .highlight {
    background: var(--color-sidebar-background);
}

body[data-theme="dark"] .highlight pre {
    color: #ffffff;
}

body[data-theme="dark"] .highlight .c,
body[data-theme="dark"] .highlight .ch,
body[data-theme="dark"] .highlight .cm,
body[data-theme="dark"] .highlight .cp,
body[data-theme="dark"] .highlight .cpf,
body[data-theme="dark"] .highlight .c1,
body[data-theme="dark"] .highlight .cs {
    color: #6c7985;
    font-style: italic;
}

body[data-theme="dark"] .highlight .k,
body[data-theme="dark"] .highlight .kc,
body[data-theme="dark"] .highlight .kd,
body[data-theme="dark"] .highlight .kn,
body[data-theme="dark"] .highlight .kp,
body[data-theme="dark"] .highlight .kr {
    color: #fb5fa2;
    font-weight: 600;
}

body[data-theme="dark"] .highlight .s,
body[data-theme="dark"] .highlight .sa,
body[data-theme="dark"] .highlight .sb,
body[data-theme="dark"] .highlight .sc,
body[data-theme="dark"] .highlight .dl,
body[data-theme="dark"] .highlight .sd,
body[data-theme="dark"] .highlight .s2,
body[data-theme="dark"] .highlight .se,
body[data-theme="dark"] .highlight .sh,
body[data-theme="dark"] .highlight .si,
body[data-theme="dark"] .highlight .sx,
body[data-theme="dark"] .highlight .sr,
body[data-theme="dark"] .highlight .s1,
body[data-theme="dark"] .highlight .ss {
    color: #fc6a5d;
}

body[data-theme="dark"] .highlight .m,
body[data-theme="dark"] .highlight .mb,
body[data-theme="dark"] .highlight .mf,
body[data-theme="dark"] .highlight .mh,
body[data-theme="dark"] .highlight .mi,
body[data-theme="dark"] .highlight .il,
body[data-theme="dark"] .highlight .mo {
    color: #cfbe69;
}

body[data-theme="dark"] .highlight .nf,
body[data-theme="dark"] .highlight .fm {
    color: #41a0c0;
}

body[data-theme="dark"] .highlight .nb {
    color: #a067e6;
}

body[data-theme="dark"] .highlight .nc {
    color: #5cd7fe;
    font-weight: 600;
}

body[data-theme="dark"] .highlight .bp,
body[data-theme="dark"] .highlight .ne {
    color: #d0a8ff;
}

body[data-theme="dark"] .highlight .nd {
    color: #be8554;
}

body[data-theme="dark"] .highlight .o,
body[data-theme="dark"] .highlight .ow {
    color: #ffffff;
}

/* ---------------------------------------------------------------- */
/* 4. Inline `code` spans — keep them in the monospace family but   */
/*    don't tint them with brand orange (Furo's default does).      */
/*    Match juno.sh's plain-monospace inline-code look.             */
/* ---------------------------------------------------------------- */

.highlight .nv,
.highlight .nv-anonymous {
    color: inherit;
}