/* rooz docs theme - layered over mdBook's stock CSS. Palette from the logo: container teal, kangaroo rust. */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../assets/fonts/plus-jakarta-sans.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../assets/fonts/bricolage-grotesque.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../assets/fonts/jetbrains-mono.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --content-max-width: 800px;
    --sidebar-target-width: 272px;
    --page-padding: 24px;
    --display-font: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
    --mono-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --code-font-size: 0.86em;
    --radius: 10px;
}

.light, html:not(.js) {
    --bg: #fbfaf7;
    --fg: #1b2127;
    --muted: #5d6872;
    --accent: #0e7490;
    --accent-2: #c2581c;
    --surface: #ffffff;
    --surface-border: #e6e2da;
    --glow-1: rgb(14 116 144 / 0.14);
    --glow-2: rgb(194 88 28 / 0.10);
    --term-bg: #13191f;

    --sidebar-bg: #f4f2ee;
    --sidebar-fg: #2b343c;
    --sidebar-non-existant: #a3a9ae;
    --sidebar-active: #0e7490;
    --sidebar-spacer: #e6e2da;
    --sidebar-header-border-color: #d4d0c7;

    --icons: #6b757e;
    --icons-hover: #0e7490;

    --links: #0e7490;
    --inline-code-color: #9a3f10;
    --inline-code-bg: #f2ebe1;
    --code-bg: #f4f2ee;
    --code-border: #e6e2da;

    --quote-bg: #eef6f8;
    --quote-border: #0e7490;

    --table-border-color: #e6e2da;
    --table-header-bg: #efece6;
    --table-alternate-bg: #f7f5f1;

    --searchbar-border-color: #d6d2ca;
    --searchbar-bg: #ffffff;
    --searchresults-li-bg: #eef6f8;
    --search-mark-bg: #fde3c8;

    --theme-popup-bg: #fbfaf7;
    --theme-popup-border: #d6d2ca;
    --theme-hover: #ece9e3;
}

.navy {
    --bg: #0d1217;
    --fg: #d5d9de;
    --muted: #8a95a0;
    --accent: #4fc3d4;
    --accent-2: #ef9156;
    --surface: #131a21;
    --surface-border: #1f2933;
    --glow-1: rgb(79 195 212 / 0.16);
    --glow-2: rgb(239 145 86 / 0.10);
    --term-bg: #0a0f13;

    --sidebar-bg: #10161c;
    --sidebar-fg: #b4bdc6;
    --sidebar-non-existant: #4c5661;
    --sidebar-active: #4fc3d4;
    --sidebar-spacer: #1d262f;
    --sidebar-header-border-color: #26313c;

    --icons: #6f7b86;
    --icons-hover: #4fc3d4;

    --links: #4fc3d4;
    --inline-code-color: #f0a46e;
    --inline-code-bg: #1a232c;
    --code-bg: #131a21;
    --code-border: #1f2933;

    --quote-bg: #11202a;
    --quote-border: #4fc3d4;

    --table-border-color: #1f2933;
    --table-header-bg: #151d25;
    --table-alternate-bg: #10171d;

    --searchbar-border-color: #2a3540;
    --searchbar-bg: #151d25;
    --searchbar-fg: #d5d9de;
    --searchbar-shadow-color: transparent;
    --searchresults-li-bg: #172630;
    --search-mark-bg: #7a4520;

    --theme-popup-bg: #10161c;
    --theme-popup-border: #2a3540;
    --theme-hover: #18212a;
}

/* typography */

html {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    word-spacing: 0.06em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

code, pre, .content h1, .content h2, .content h3, .content h4 {
    word-spacing: normal;
}

.content {
    line-height: 1.72;
}

.content main > p, .content main > ul, .content main > ol {
    color: color-mix(in srgb, var(--fg) 92%, var(--bg));
}

.content h1, .content h2, .content h3, .content h4 {
    font-family: var(--display-font);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.content h1 {
    font-size: 2.4em;
    margin-top: 0.5em;
}

.content h1:not(.rooz-title)::after {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-top: 0.4em;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

.content h2 {
    margin-top: 2.2em;
    font-size: 1.6em;
}

.content h3 {
    margin-top: 1.8em;
}

.content a:link, .content a:visited {
    color: var(--links);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
    text-underline-offset: 0.2em;
    transition: text-decoration-color 0.15s;
}

.content a:hover {
    text-decoration-color: currentColor;
}

/* header anchors keep mdBook's plain look */
.content :is(h1, h2, h3, h4, h5, h6) a.header:link,
.content :is(h1, h2, h3, h4, h5, h6) a.header:visited {
    color: var(--fg);
    text-decoration: none;
}

/* code */

code {
    font-family: var(--mono-font);
}

:not(pre) > code {
    padding: 0.1em 0.38em;
    border-radius: 5px;
    background: var(--inline-code-bg);
    color: var(--inline-code-color);
    font-size: 0.85em;
}

pre {
    border: 1px solid var(--code-border);
    border-radius: var(--radius);
}

pre > code.hljs, pre > code {
    background: var(--code-bg);
    padding: 1em 1.2em;
    border-radius: var(--radius);
}

pre > .buttons {
    top: 8px;
    right: 8px;
}

/* blockquotes and tables */

blockquote {
    margin: 1.5em 0;
    padding: 0.4em 1.2em;
    border: none;
    border-left: 3px solid var(--quote-border);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--quote-bg);
}

/* callouts: > [!NOTE], > [!IMPORTANT], > [!WARNING] */

.light, html:not(.js) {
    --blockquote-note-color: #0e7490;
    --blockquote-important-color: #c2581c;
    --blockquote-warning-color: #a16207;
}

.navy {
    --blockquote-note-color: #4fc3d4;
    --blockquote-important-color: #ef9156;
    --blockquote-warning-color: #e3b341;
}

.blockquote-tag {
    --callout: var(--blockquote-note-color);
    padding: 0.7em 1.1em;
    border-left: 3px solid var(--callout);
    background: color-mix(in srgb, var(--callout) 8%, var(--bg));
}

.blockquote-tag-important {
    --callout: var(--blockquote-important-color);
}

.blockquote-tag-warning {
    --callout: var(--blockquote-warning-color);
}

.blockquote-tag .blockquote-tag-title {
    margin: 0 0 0.3em;
    color: var(--callout);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.blockquote-tag .blockquote-tag-title svg {
    width: 15px;
    height: 15px;
    margin-right: 0.5em;
    vertical-align: -0.2em;
    fill: var(--callout);
}

.blockquote-tag p:last-child {
    margin-bottom: 0.2em;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--table-border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

table thead th {
    font-weight: 600;
    text-align: left;
}

table td, table th {
    padding: 0.55em 0.9em;
    border: none;
    border-bottom: 1px solid var(--table-border-color);
}

table tbody tr:last-child td {
    border-bottom: none;
}

/* sidebar */

.sidebar {
    border-right: 1px solid var(--sidebar-spacer);
    font-size: 0.9em;
}

.sidebar .sidebar-scrollbox {
    padding: 0 12px 28px;
}

/* brand row: sticky, the height of the top bar so the two read as one header */
.sidebar .sidebar-scrollbox::before {
    content: "rooz";
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    height: var(--menu-bar-height);
    margin: 0 -12px 14px;
    padding-left: 54px;
    border-bottom: 1px solid var(--sidebar-spacer);
    background: var(--sidebar-bg);
    font-family: var(--display-font);
    font-size: 1.3em;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--fg);
}

/* the logo sits on the fixed sidebar (pseudo-element backgrounds cannot be rounded) */
.sidebar::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: calc((var(--menu-bar-height) - 26px) / 2);
    left: 18px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: url("../rooz512.webp") center / cover;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 12%, transparent);
}

.chapter {
    line-height: 1.45;
}

.chapter li.chapter-item {
    margin-block-start: 1px;
    line-height: 1.45;
}

.chapter-link-wrapper > a {
    flex: 1;
}

.chapter li a {
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--sidebar-fg);
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}

.chapter li a:hover {
    background: var(--theme-hover);
    color: var(--fg);
}

.chapter li a.active {
    background: color-mix(in srgb, var(--sidebar-active) 11%, transparent);
    color: var(--sidebar-active);
    font-weight: 600;
}

/* in-page headings under the active chapter: secondary, with a marker on the rail */
.on-this-page {
    margin: 3px 0 8px 16px;
    padding-left: 6px;
    border-inline-start: 1px solid var(--sidebar-spacer);
    font-size: 0.92em;
}

.chapter li.header-item {
    margin: 0;
    line-height: 1.4;
}

.chapter li.header-item a {
    position: relative;
    padding: 4px 8px;
    color: var(--muted);
    font-weight: 400;
}

.chapter li.header-item a:hover {
    background: none;
    color: var(--fg);
}

.chapter a.current-header {
    color: var(--sidebar-active) !important;
}

.chapter a.current-header::before {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: -8px;
    width: 2px;
    border-radius: 1px;
    background: var(--sidebar-active);
}

.chapter li.part-title {
    margin: 22px 10px 6px;
    color: var(--muted);
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* top bar */

.menu-bar, .menu-bar:hover, .menu-bar.bordered {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--table-border-color);
}

.menu-title {
    font-family: var(--display-font);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* prev/next */

.nav-chapters {
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
}

.nav-chapters:hover {
    color: var(--accent);
    background: var(--theme-hover);
}

#mdbook-searchbar {
    border-radius: var(--radius);
}

/* version badge (theme/version.js) */

.right-buttons {
    display: flex;
    align-items: center;
}

.rooz-version {
    margin-right: 10px;
    padding: 2px 9px;
    border: 1px solid var(--code-border);
    border-radius: 999px;
    font-family: var(--mono-font);
    font-size: 0.75em;
    line-height: 1.6;
    color: var(--muted) !important;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.rooz-version:hover {
    color: var(--accent) !important;
    border-color: var(--accent);
}

/* phones: a smaller version badge */
@media (max-width: 600px) {
    .rooz-version {
        margin-right: 6px;
        padding: 1px 7px;
        font-size: 0.68em;
    }
}

/* landing page (introduction.md, theme/home.js) */

html.rooz-home {
    --content-max-width: 960px;
}

html.rooz-home .page-wrapper {
    background:
        radial-gradient(900px 480px at 85% -60px, var(--glow-1), transparent 70%),
        radial-gradient(700px 420px at 10% 120px, var(--glow-2), transparent 70%);
}

html.rooz-home .menu-title {
    visibility: hidden;
}

.rooz-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    padding: 48px 0 28px;
}

.rooz-eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    padding: 3px 12px;
    border: 1px solid var(--surface-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 70%, transparent);
    color: var(--muted);
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.content h1.rooz-title {
    margin: 0;
    font-size: clamp(2.6em, 5.4vw, 4.2em);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.rooz-title span {
    background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.content .rooz-lede {
    margin: 22px 0 28px;
    max-width: 34em;
    color: var(--muted);
    font-size: 1.12em;
    line-height: 1.65;
}

.rooz-install {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 30em;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--surface-border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 10px 30px -18px rgb(0 0 0 / 0.5);
}

.rooz-install .rooz-prompt {
    color: var(--accent-2);
    font-family: var(--mono-font);
    font-size: 0.9em;
    user-select: none;
}

.rooz-install code {
    display: block;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
    overflow-x: auto !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    color: var(--fg) !important;
    font-size: 0.88em !important;
    white-space: nowrap;
}

.rooz-copy {
    flex: none;
    min-width: 5.2em;
    padding: 7px 12px;
    border: 1px solid var(--surface-border);
    border-radius: 8px;
    background: var(--theme-hover);
    color: var(--fg);
    font: inherit;
    font-size: 0.8em;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.rooz-copy:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.rooz-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.content a.rooz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border: 1px solid var(--surface-border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--fg);
    font-weight: 650;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.rooz-btn .rooz-arrow {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s;
}

.rooz-btn:hover .rooz-arrow {
    transform: translateX(2px);
}

.content a.rooz-btn:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
}

.content a.rooz-btn-primary {
    border-color: transparent;
    background: linear-gradient(100deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
    color: #071317;
    box-shadow: 0 4px 12px -8px color-mix(in srgb, var(--accent) 50%, transparent);
}

.light .content a.rooz-btn-primary {
    color: #ffffff;
}

.content a.rooz-btn-primary:hover {
    border-color: transparent;
    box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);
}

.rooz-hero-art {
    position: relative;
    justify-self: center;
    width: min(100%, 340px);
}

.rooz-hero-art::before {
    content: "";
    position: absolute;
    inset: 8% -6% -6% 8%;
    border-radius: 32px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    filter: blur(42px);
    opacity: 0.45;
}

.content .rooz-hero-art img {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 28px;
    box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55);
    transform: rotate(2deg);
    transition: transform 0.4s ease;
}

.content .rooz-hero-art img:hover {
    transform: rotate(0deg) scale(1.01);
}

.rooz-terminal {
    margin: 36px 0 12px;
    border: 1px solid #1f2933;
    border-radius: 14px;
    overflow: hidden;
    background: var(--term-bg);
    box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.6);
}

.rooz-terminal-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid #1c252e;
    background: #10161b;
}

.rooz-terminal-bar i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #2b3640;
}

.rooz-terminal-bar span {
    margin-left: 10px;
    color: #6c7884;
    font-family: var(--mono-font);
    font-size: 0.75em;
}

.content .rooz-terminal pre {
    margin: 0;
    padding: 18px 20px;
    border: none;
    border-radius: 0;
    overflow-x: auto;
    background: none;
    color: #d5dde4;
    font-family: var(--mono-font);
    font-size: 0.86em;
    line-height: 1.8;
}

.rooz-terminal .t-p {
    color: #ef9156;
    user-select: none;
}

.rooz-terminal .t-c {
    color: #5f6d79;
}

.rooz-terminal .t-cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    vertical-align: text-bottom;
    background: #4fc3d4;
    animation: rooz-blink 1.1s steps(1) infinite;
}

@keyframes rooz-blink {
    50% {
        opacity: 0;
    }
}

.rooz-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 28px 0 16px;
}

.content a.rooz-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--surface-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    color: var(--fg);
    text-decoration: none;
    transition: transform 0.18s, border-color 0.18s, background 0.18s;
}

.content a.rooz-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--surface-border));
    background: var(--surface);
}

.rooz-card b {
    font-family: var(--display-font);
    font-size: 1.08em;
    letter-spacing: -0.01em;
}

.rooz-card b::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 2px;
    vertical-align: 0.12em;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.rooz-card span {
    color: var(--muted);
    font-size: 0.9em;
    line-height: 1.55;
}

.content a.rooz-band {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px;
    padding: 20px 24px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--surface-border));
    border-radius: 14px;
    background: linear-gradient(
        120deg,
        color-mix(in srgb, var(--accent) 12%, var(--surface)),
        color-mix(in srgb, var(--accent-2) 8%, var(--surface))
    );
    color: var(--fg);
    text-decoration: none;
    transition: transform 0.18s, border-color 0.18s;
}

.content a.rooz-band:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 70%, var(--surface-border));
}

.rooz-band b {
    font-family: var(--display-font);
    font-size: 1.15em;
    letter-spacing: -0.01em;
}

.rooz-band span {
    color: var(--muted);
    font-size: 0.92em;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .rooz-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    .rooz-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding-top: 24px;
    }

    .rooz-hero-art {
        grid-row: 1;
        width: 160px;
        justify-self: start;
    }

    .content h1.rooz-title {
        font-size: 2.6em;
    }

    .rooz-features {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rooz-terminal .t-cursor {
        animation: none;
    }

    .content .rooz-hero-art img, .content a.rooz-card, .content a.rooz-btn {
        transition: none;
        transform: none;
    }
}