/* User Provided Stylesheet */

:root {
  /*--sd-color-primary: #f37726;*/
}

/* Dark ground, shared with the landing page (landing/index.html).

   The book theme paints the page `bg-white dark:bg-stone-900`. Light is
   left alone — the landing adopted this white — and only the dark ground
   is replaced, by the landing's #0E1417, so following a link out of
   /landing does not swap the background under the reader. The value is
   duplicated in landing/index.html's token block (--ground under
   prefers-color-scheme: dark and [data-theme="dark"]): a standalone
   document with everything inlined cannot import it. Change one, change
   the other.

   Repainted here are the four surfaces that are meant to BE the page.
   Content components keep their own tones: admonitions are semantic, and
   code blocks are translucent, so they follow the ground on their own.

   Tailwind's utilities are class-level, so every selector has to
   out-specify one: `html.dark body.bg-white` beats
   `.dark .dark\:bg-stone-900`. */
html.dark body.bg-white {
    background-color: #0E1417;
}

/* Sticky top bar: same ground, kept translucent for its backdrop blur. */
html.dark .myst-top-nav.backdrop-blur {
    background-color: rgba(14, 20, 23, 0.8);
}

/* The floating page outline is chrome, not a card: it has to sit on the
   ground, not on a sheet over it. */
html.dark nav.myst-outline {
    background-color: rgba(14, 20, 23, 0.95);
}

/* Search field: the raised chrome tone (the landing's --ground-2). */
html.dark button.myst-search-bar {
    background-color: #141C1E;
}

/* Vertically centre grid items so the hero tagline and logo
   sit on the same visual baseline, not top-aligned. */
.myst-grid {
    align-items: center;
}

/* Diagram lightbox: click any content image (the markdown-embedded SVG/PNG
   diagrams carry data-canonical-url; theme chrome does not) to view it
   full-screen. Behaviour is wired by the script injected in deploy.sh.
   No transitions by design. */
.myst img[data-canonical-url],
article img[data-canonical-url] {
    cursor: zoom-in;
}

#yuneta-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

#yuneta-lightbox.open {
    display: flex;
}

#yuneta-lightbox img {
    max-width: 95vw;
    max-height: 86vh;
    width: auto;
    height: auto;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

#yuneta-lightbox-cap {
    max-width: 90vw;
    color: #f0f0f0;
    font-size: 1rem;
    line-height: 1.35;
    text-align: center;
}

/* Top nav ("Home" -> /landing) on narrow screens.

   The book theme wraps the nav items in `hidden ... lg:block`, so below
   1024px the only link back to the landing page disappears — and the
   hamburger opens the toc, which never carries nav items. A phone reader
   would have no way back to the front door. Reveal the wrapper by matching
   the item it holds; it is the only content of that container. */
.myst-top-nav div:has(> .myst-top-nav-item) {
    display: block;
}

/* That one nav item is the only way from the documentation to the front
   door of the project, and as plain grey text in a bar full of grey text
   it read as chrome. It is a button now: the accent colour of the landing
   it leads to, filled on hover. The theme gives the anchor `w-full`, which
   would stretch the pill across the whole nav container. */
.myst-top-nav .myst-top-nav-item > a {
    width: auto;
    padding: 0.15rem 0.9rem;
    border: 1px solid #0F6B64;
    border-radius: 999px;
    color: #0F6B64;
    font-weight: 600;
    white-space: nowrap;
}

.myst-top-nav .myst-top-nav-item > a:hover {
    background: #0F6B64;
    color: #F2F4F1;
}

/* The book-theme marks dark mode with a class on <html> (Tailwind), not
   with a data attribute -- the landing uses data-theme, these pages use
   the class. The dark pair is the landing's dark accent. */
html.dark .myst-top-nav .myst-top-nav-item > a {
    border-color: #6FCCBF;
    color: #6FCCBF;
}

html.dark .myst-top-nav .myst-top-nav-item > a:hover {
    background: #6FCCBF;
    color: #0E1417;
}

/* The item carries `mx-2` on both the box and its anchor (32px in all), which
   is what pushes the bar past the viewport on a 320px screen. */
@media (max-width: 480px) {
    .myst-top-nav .myst-top-nav-item,
    .myst-top-nav .myst-top-nav-item > a {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Below 390px the bar is saturated -- logo, this item, search and the theme
   toggle -- and it was already at the millimetre with the old "Home": the
   page measured exactly the viewport width, no slack. Anything longer sends
   the whole page into horizontal scroll, so the label is swapped for a short
   one here. font-size:0 hides the text without removing it, so the link keeps
   "Overview" as its accessible name. */
@media (max-width: 389px) {
    .myst-top-nav .myst-top-nav-item > a {
        font-size: 0;
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }
    .myst-top-nav .myst-top-nav-item > a::after {
        content: "Yuneta";
        font-size: 0.85rem;
    }
}

/* The heading permalink -- the little link the theme reveals when the pointer
   is over a heading -- is a zero-width anchor pushed 10px to the right of the
   heading text. When a heading fills the line, that push lands its glyph past
   the viewport, and the whole page could be dragged sideways: 2px at 320px, on
   a home page whose h2 is "An Asynchronous Development Framework". Found by
   bisecting the DOM; every other suspect (the top bar, the outline, the skip
   links) measured clean.

   It is only ever visible on `group-hover`, so on a device that cannot hover
   it is invisible weight -- which is exactly where the damage was. The width
   clause covers a desktop window narrowed that far, where the same applies and
   losing the permalink costs nothing. */
/* The prev/next links at the foot of every chapter are flex rows: an arrow
   and the neighbouring chapter's title. A flex item will not shrink below its
   content unless it is told it may, so a long title ("gobj framework crash
   course") pushed the row past a 320px viewport and the page went with it --
   13px on /gobj. min-width:0 lets the title wrap, which is what it should
   have done. */
.myst-footer-links,
.myst-footer-link,
.myst-footer-link * {
    min-width: 0;
}

@media (hover: none), (max-width: 400px) {
    h1 > a[href^="#"],
    h2 > a[href^="#"],
    h3 > a[href^="#"],
    h4 > a[href^="#"],
    h5 > a[href^="#"],
    h6 > a[href^="#"] {
        display: none;
    }
}

.danger {
    color: red;
    font-weight: bold;
}

.warning {
    color: orange;
    font-weight: bold;
}
/* The root page is Get Started (the first toc entry), and the logo already
   links to it. mystmd labels that entry with the project title, so the
   sidebar opened with a "Yuneta Simplified" item that looked like a page of
   its own. It is hidden; the landing is reached by "Overview" in the top bar. */
nav.myst-primary-sidebar-toc .myst-toc > a.myst-toc-item[href="/"] {
    display: none;
}