/* CSS for UI elements (a.k.a. chrome) */

html {
    scrollbar-color: var(--scrollbar) var(--bg);
}
#searchresults a,
.content a:link,
a:visited,
a > .hljs {
    color: var(--links);
}

/*
    body-container is necessary because mobile browsers don't seem to like
    overflow-x on the body tag when there is a <meta name="viewport"> tag.
*/
#body-container {
    /*
        This is used when the sidebar pushes the body content off the side of
        the screen on small screens. Without it, dragging on mobile Safari
        will want to reposition the viewport in a weird way.
    */
    overflow-x: clip;
}

/* Menu Bar */

/* BARTLEY: the mdbook controls remain a 50px row; the shared publisher
   lockup adds a second row while --menu-bar-height stays the total height
   used by sticky offsets, anchors, search popups, and page TOCs. */
:root {
    --bartley-menu-controls-height: 30px;
    --bartley-lockup-row-height: 34px;
    --menu-bar-height: calc(var(--bartley-menu-controls-height) + var(--bartley-lockup-row-height));
}

#menu-bar,
#menu-bar-hover-placeholder {
    z-index: 101;
    margin: auto calc(0px - var(--page-padding));
}
#menu-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    border-block-end-color: var(--theme-popup-border);
    border-block-end-width: 1px;
    border-block-end-style: solid;
}
.menu-controls-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: var(--bartley-menu-controls-height);
}
#menu-bar.sticky,
#menu-bar-hover-placeholder:hover + #menu-bar,
#menu-bar:hover,
html.sidebar-visible #menu-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0 !important;
}
#menu-bar-hover-placeholder {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: var(--menu-bar-height);
}
#menu-bar.bordered {
    border-block-end-color: var(--table-border-color);
}
.bartley-dark #menu-bar {
    border-block-end-color: var(--sidebar-non-existant);
}
#menu-bar i, #menu-bar .icon-button {
    position: relative;
    padding: 0 8px;
    z-index: 10;
    line-height: var(--bartley-menu-controls-height);
    cursor: pointer;
    transition: color 0.5s;
}
@media only screen and (max-width: 420px) {
    #menu-bar i, #menu-bar .icon-button {
        padding: 0 5px;
    }
}

.icon-button {
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}
.icon-button i {
    margin: 0;
}

.right-buttons {
    display: flex;
    margin: 0 15px;
}
.right-buttons a {
    text-decoration: none;
}

.left-buttons {
    display: flex;
    margin: 0 5px;
}
html:not(.js) .left-buttons button {
    display: none;
}

.menu-title {
    display: inline-block;
    font-weight: 200;
    font-size: 2.4rem;
    line-height: var(--bartley-menu-controls-height);
    text-align: center;
    margin: 0;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-title {
    cursor: pointer;
}

/* BARTLEY: compact Bartley Editions lockup row shared by every book. */
.bartley-lockup-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: var(--bartley-lockup-row-height);
    min-height: var(--bartley-lockup-row-height);
    box-sizing: border-box;
    padding-inline-start: 13px;
}
.bartley-lockup {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: 24px;
    color: var(--fg);
    text-decoration: none;
    transition: opacity 150ms ease-out;
}
.bartley-lockup:hover {
    color: var(--fg);
    opacity: 0.78;
    text-decoration: none;
}
.bartley-lockup-mark {
    display: block;
    width: auto;
    height: 24px;
    flex: 0 0 auto;
}
.bartley-lockup-logotype {
    display: block;
    font-family: "Cinzel", "Trajan Pro", "Cormorant SC", "Optima", Georgia, serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.14em;
    color: currentColor;
    white-space: nowrap;
}

/* BARTLEY: labs indicator — revealed by the inline head script in index.hbs
   when the per-book head.hbs canonical URL is a <slug>.bartleyeditions.com
   subdomain (non-www). Hidden by default for standalone books. Visual mirrors
   web/styles.css .gallery-card-badge so the same stamp the reader sees on
   bartleyeditions.com/labs/ rides on every labs-book page. Imprint+paper
   colors are theme-independent on purpose. */
.bartley-labs-indicator {
    display: none;
    margin-inline-start: auto;
    margin-inline-end: 13px;
    /* Asymmetric vertical padding nudges the small-caps glyphs to the
       optical center of the box. With smcp + no descenders, the visible
       mass otherwise sits ~1px above geometric center. */
    padding: 6px 10px 4px;
    background: #6e1f1f;
    color: #f5ede0;
    font-family: "Newsreader", Georgia, "Times New Roman", serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    font-feature-settings: "smcp", "kern";
    font-variation-settings: "opsz" 14;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: opacity 150ms ease-out;
}
html.bartley-labs .bartley-labs-indicator {
    display: inline-flex;
    align-items: center;
}
.bartley-labs-indicator:visited {
    color: #f5ede0;
}
.bartley-labs-indicator:hover {
    color: #f5ede0;
    text-decoration: none;
    opacity: 0.78;
}

/* BARTLEY: vertical publisher lockup used on colophon pages. The mark is
   loaded as a CSS background so the path resolves relative to this stylesheet
   (theme/css/chrome.css → ../favicon.svg) regardless of where the page
   itself ends up in the post-flatten URL hierarchy. */
.bartley-publisher-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9em;
    margin: 2rem auto 2.5rem;
    color: var(--fg);
    text-decoration: none;
    transition: opacity 150ms ease-out;
}
.bartley-publisher-lockup:hover,
.bartley-publisher-lockup:visited {
    color: var(--fg);
    text-decoration: none;
}
.bartley-publisher-lockup:hover {
    opacity: 0.78;
}
.bartley-publisher-mark {
    display: block;
    width: clamp(48px, 10.5vw, 82px);
    aspect-ratio: 1989 / 2681;
    background-image: url("../favicon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.bartley-publisher-name {
    display: block;
    font-family: "Cinzel", "Trajan Pro", "Cormorant SC", "Optima", Georgia, serif;
    font-weight: 400;
    font-size: clamp(1rem, 2.6vw, 1.35rem);
    line-height: 1;
    letter-spacing: 0.18em;
    color: currentColor;
    white-space: nowrap;
}

.menu-bar,
.menu-bar:visited,
.nav-chapters,
.nav-chapters:visited,
.mobile-nav-chapters,
.mobile-nav-chapters:visited,
.menu-bar .icon-button,
.menu-bar a i {
    color: var(--icons);
}

.menu-bar i:hover,
.menu-bar .icon-button:hover,
.nav-chapters:hover,
.mobile-nav-chapters i:hover {
    color: var(--icons-hover);
}

/* Nav Icons */

.nav-chapters {
    font-size: 2.5em;
    text-align: center;
    text-decoration: none;

    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    max-width: 150px;
    min-width: 90px;

    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;

    transition: color 0.5s, background-color 0.5s;
}

.nav-chapters:hover {
    text-decoration: none;
    background-color: var(--theme-hover);
    transition: background-color 0.15s, color 0.15s;
}

.nav-wrapper {
    margin-block-start: 50px;
    display: none;
}

.mobile-nav-chapters {
    font-size: 2.5em;
    text-align: center;
    text-decoration: none;
    width: 90px;
    border-radius: 5px;
    background-color: var(--sidebar-bg);
}

/* Only Firefox supports flow-relative values */
.previous { float: left; }
[dir=rtl] .previous { float: right; }

/* Only Firefox supports flow-relative values */
.next {
    float: right;
    right: var(--page-padding);
}
[dir=rtl] .next {
    float: left;
    right: unset;
    left: var(--page-padding);
}

/* Use the correct buttons for RTL layouts*/
[dir=rtl] .previous i.fa-angle-left:before {content:"\f105";}
[dir=rtl] .next i.fa-angle-right:before { content:"\f104"; }

@media only screen and (max-width: 1080px) {
    .nav-wide-wrapper { display: none; }
    .nav-wrapper { display: block; }
}

/* sidebar-visible */
@media only screen and (max-width: 1380px) {
    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
    #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
}

/* Inline code */

:not(pre) > .hljs {
    display: inline;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

:not(pre):not(a) > .hljs {
    color: var(--inline-code-color);
    overflow-x: initial;
}

a:hover > .hljs {
    text-decoration: underline;
}

pre {
    position: relative;
}
pre > .buttons {
    position: absolute;
    z-index: 100;
    right: 0px;
    top: 2px;
    margin: 0px;
    padding: 2px 0px;

    color: var(--sidebar-fg);
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.1s linear, opacity 0.1s linear;
}
pre:hover > .buttons {
    visibility: visible;
    opacity: 1
}
pre > .buttons :hover {
    color: var(--sidebar-active);
    border-color: var(--icons-hover);
    background-color: var(--theme-hover);
}
pre > .buttons i {
    margin-inline-start: 8px;
}
pre > .buttons button {
    cursor: inherit;
    margin: 0px 5px;
    padding: 4px 4px 3px 5px;
    font-size: 23px;

    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    border-color: var(--icons);
    background-color: var(--theme-popup-bg);
    transition: 100ms;
    transition-property: color,border-color,background-color;
    color: var(--icons);
}

pre > .buttons button.clip-button {
    padding: 2px 4px 0px 6px;
}
pre > .buttons button.clip-button::before {
    /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license
     */
    content: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 24 25" \
xmlns="http://www.w3.org/2000/svg" aria-label="Copy to clipboard">\
<path d="M18 20h2v3c0 1-1 2-2 2H2c-.998 0-2-1-2-2V5c0-.911.755-1.667 1.667-1.667h5A3.323 3.323 0 \
0110 0a3.323 3.323 0 013.333 3.333h5C19.245 3.333 20 4.09 20 5v8.333h-2V9H2v14h16v-3zM3 \
7h14c0-.911-.793-1.667-1.75-1.667H13.5c-.957 0-1.75-.755-1.75-1.666C11.75 2.755 10.957 2 10 \
2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
<path d="M4 19h6v2H4zM12 11H4v2h8zM4 17h4v-2H4zM15 15v-3l-4.5 4.5L15 21v-3l8.027-.032L23 15z"/>\
</svg>');
    filter: var(--copy-button-filter);
}
pre > .buttons button.clip-button:hover::before {
    filter: var(--copy-button-filter-hover);
}

@media (pointer: coarse) {
    pre > .buttons button {
        /* On mobile, make it easier to tap buttons. */
        padding: 0.3rem 1rem;
    }

    .sidebar-resize-indicator {
        /* Hide resize indicator on devices with limited accuracy */
        display: none;
    }
}
pre > code {
    display: block;
    padding: 1rem;
}

/* FIXME: ACE editors overlap their buttons because ACE does absolute
   positioning within the code block which breaks padding. The only solution I
   can think of is to move the padding to the outer pre tag (or insert a div
   wrapper), but that would require fixing a whole bunch of CSS rules.
*/
.hljs.ace_editor {
  padding: 0rem 0rem;
}

pre > .result {
    margin-block-start: 10px;
}

/* Search */

#searchresults a {
    text-decoration: none;
}

mark {
    border-radius: 2px;
    padding-block-start: 0;
    padding-block-end: 1px;
    padding-inline-start: 3px;
    padding-inline-end: 3px;
    margin-block-start: 0;
    margin-block-end: -1px;
    margin-inline-start: -3px;
    margin-inline-end: -3px;
    background-color: var(--search-mark-bg);
    transition: background-color 300ms linear;
    cursor: pointer;
}

mark.fade-out {
    background-color: rgba(0,0,0,0) !important;
    cursor: auto;
}

.searchbar-outer {
    margin-inline-start: auto;
    margin-inline-end: auto;
    max-width: var(--content-max-width);
}

#searchbar {
    width: 100%;
    margin-block-start: 5px;
    margin-block-end: 0;
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding: 10px 16px;
    transition: box-shadow 300ms ease-in-out;
    border: 1px solid var(--searchbar-border-color);
    border-radius: 3px;
    background-color: var(--searchbar-bg);
    color: var(--searchbar-fg);
}
#searchbar:focus,
#searchbar.active {
    box-shadow: 0 0 3px var(--searchbar-shadow-color);
}

.searchresults-header {
    font-weight: bold;
    font-size: 1em;
    padding-block-start: 18px;
    padding-block-end: 0;
    padding-inline-start: 5px;
    padding-inline-end: 0;
    color: var(--searchresults-header-fg);
}

.searchresults-outer {
    margin-inline-start: auto;
    margin-inline-end: auto;
    max-width: var(--content-max-width);
    border-block-end: 1px dashed var(--searchresults-border-color);
}

ul#searchresults {
    list-style: none;
    padding-inline-start: 20px;
}
ul#searchresults li {
    margin: 10px 0px;
    padding: 2px;
    border-radius: 2px;
}
ul#searchresults li.focus {
    background-color: var(--searchresults-li-bg);
}
ul#searchresults span.teaser {
    display: block;
    clear: both;
    margin-block-start: 5px;
    margin-block-end: 0;
    margin-inline-start: 20px;
    margin-inline-end: 0;
    font-size: 0.8em;
}
ul#searchresults span.teaser em {
    font-weight: bold;
    font-style: normal;
}

/* Sidebar */

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    font-size: 0.875em;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-fg);
}
.sidebar-iframe-inner {
    --padding: 10px;

    background-color: var(--sidebar-bg);
    padding: var(--padding);
    margin: 0;
    font-size: 1.4rem;
    color: var(--sidebar-fg);
    min-height: calc(100vh - var(--padding) * 2);
}
.sidebar-iframe-outer {
    border: none;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
[dir=rtl] .sidebar { left: unset; right: 0; }
.sidebar-resizing {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
html:not(.sidebar-resizing) .sidebar {
    transition: transform 0.3s; /* Animation: slide away */
}
.sidebar code {
    line-height: 2em;
}
.sidebar .sidebar-scrollbox {
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 10px;
}
.sidebar .sidebar-resize-handle {
    position: absolute;
    cursor: col-resize;
    width: 0;
    right: calc(var(--sidebar-resize-indicator-width) * -1);
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.sidebar-resize-handle .sidebar-resize-indicator {
    width: 100%;
    height: 16px;
    color: var(--icons);
    margin-inline-start: var(--sidebar-resize-indicator-space);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.sidebar-resize-handle .sidebar-resize-indicator::before {
    content: "";
    width: 2px;
    height: 12px;
    border-left: dotted 2px currentColor;
}
.sidebar-resize-handle .sidebar-resize-indicator::after {
    content: "";
    width: 2px;
    height: 16px;
    border-left: dotted 2px currentColor;
}

[dir=rtl] .sidebar .sidebar-resize-handle {
    left: calc(var(--sidebar-resize-indicator-width) * -1);
    right: unset;
}
.js .sidebar .sidebar-resize-handle {
    cursor: col-resize;
    width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
}
/* sidebar-hidden */
#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
    z-index: -1;
}
[dir=rtl] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
}
.sidebar::-webkit-scrollbar {
    background: var(--sidebar-bg);
}
.sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
}

/* sidebar-visible */
#sidebar-toggle-anchor:checked ~ .page-wrapper {
    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
}
[dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
}
@media only screen and (min-width: 620px) {
    #sidebar-toggle-anchor:checked ~ .page-wrapper {
        transform: none;
        margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
    }
    [dir=rtl] #sidebar-toggle-anchor:checked ~ .page-wrapper {
        transform: none;
    }
}

.chapter {
    list-style: none outside none;
    padding-inline-start: 0;
    line-height: 2.2em;
}

.chapter ol {
    width: 100%;
}

.chapter li {
    display: flex;
    color: var(--sidebar-non-existant);
}
.chapter li a {
    display: block;
    padding: 0;
    text-decoration: none;
    color: var(--sidebar-fg);
}

.chapter li a:hover {
    color: var(--sidebar-active);
}

.chapter li a.active {
    color: var(--sidebar-active);
}

/* Article type glyph injected before a typed entry's title (toc-type-marks.js).
   Inline-block so it flows with the title text and wraps cleanly on long
   names; color and shape come from the SVG itself, matching the graph and
   type-admonition glyphs. */
.chapter-type-mark {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-inline-end: 0.4em;
    vertical-align: -0.12em;
    flex: none;
}

.chapter li > a.toggle {
    cursor: pointer;
    display: block;
    margin-inline-start: auto;
    padding: 0 10px;
    user-select: none;
    opacity: 0.68;
}

.chapter li > a.toggle div {
    transition: transform 0.5s;
}

/* collapse the section */
.chapter li:not(.expanded) + li > ol {
    display: none;
}

.chapter li.chapter-item {
    line-height: 1.5em;
    margin-block-start: 0.6em;
}

.chapter li.expanded > a.toggle div {
    transform: rotate(90deg);
}

.spacer {
    width: 100%;
    height: 3px;
    margin: 5px 0px;
}
.chapter .spacer {
    background-color: var(--sidebar-spacer);
}

@media (-moz-touch-enabled: 1), (pointer: coarse) {
    .chapter li a { padding: 5px 0; }
    .spacer { margin: 10px 0; }
}

.section {
    list-style: none outside none;
    padding-inline-start: 20px;
    line-height: 1.9em;
}

/* Theme Menu Popup */

.theme-popup {
    position: absolute;
    left: 10px;
    top: var(--menu-bar-height);
    z-index: 1000;
    border-radius: 4px;
    font-size: 0.7em;
    color: var(--fg);
    background: var(--theme-popup-bg);
    border: 1px solid var(--theme-popup-border);
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    /* Don't let the children's background extend past the rounded corners. */
    overflow: hidden;
}
[dir=rtl] .theme-popup { left: unset;  right: 10px; }
.theme-popup .default {
    color: var(--icons);
}
.theme-popup .theme {
    width: 100%;
    border: 0;
    margin: 0;
    padding: 2px 20px;
    line-height: 25px;
    white-space: nowrap;
    text-align: start;
    cursor: pointer;
    color: inherit;
    background: inherit;
    font-size: inherit;
}
.theme-popup .theme:hover {
    background-color: var(--theme-hover);
}

.theme-selected::before {
    display: inline-block;
    content: "✓";
    margin-inline-start: -14px;
    width: 14px;
}

/* The container for the help popup that covers the whole window. */
#mdbook-help-container {
    /* Position and size for the whole window. */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* This uses flex layout (which is set in book.js), and centers the popup
       in the window.*/
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    /* Dim out the book while the popup is visible. */
    background: var(--overlay-bg);
}

/* The popup help box. */
#mdbook-help-popup {
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    min-width: 300px;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--bg);
    color: var(--fg);
    border-width: 1px;
    border-color: var(--theme-popup-border);
    border-style: solid;
    border-radius: 8px;
    padding: 10px;
}

.mdbook-help-title {
    text-align: center;
    /* mdbook's margin for h2 is way too large. */
    margin: 10px;
}

/* ============================================================================
   BARTLEY: house-theme treatments — scoped to .bartley-light and .bartley-dark
   so the five stock themes (Light, Rust, Coal, Navy, Ayu) remain pristine.
   Mirrors web/styles.css editorial idiom: hairlines, gold-bordered blockquotes,
   imprint-coloured links with thin underlines, Cinzel running head.
   ============================================================================ */

/* Heading hierarchy — Newsreader weight contrast, opsz axis tuned per level
   (matches the platform site's editorial rhythm). */
.bartley-light .content h1, .bartley-dark .content h1,
.bartley-light .content h2, .bartley-dark .content h2,
.bartley-light .content h3, .bartley-dark .content h3,
.bartley-light .content h4, .bartley-dark .content h4,
.bartley-light .content h5, .bartley-dark .content h5,
.bartley-light .content h6, .bartley-dark .content h6 {
    font-family: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif;
}
.bartley-light .content h1, .bartley-dark .content h1 {
    font-weight: 300;
    font-variation-settings: "opsz" 60;
    letter-spacing: 0.005em;
}
.bartley-light .content h2, .bartley-dark .content h2 {
    font-weight: 300;
    font-variation-settings: "opsz" 36;
    letter-spacing: 0.005em;
}
.bartley-light .content h3, .bartley-dark .content h3 {
    font-weight: 400;
    font-variation-settings: "opsz" 24;
}
.bartley-light .content h4, .bartley-dark .content h4 {
    font-weight: 500;
    font-variation-settings: "opsz" 20;
    font-style: italic;
}
.bartley-light .content h5, .bartley-dark .content h5 {
    font-weight: 500;
    font-variation-settings: "opsz" 18;
    font-style: italic;
}
.bartley-light .content h6, .bartley-dark .content h6 {
    font-weight: 500;
    font-variation-settings: "opsz" 16;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.85em;
}

/* Cinzel running head in the menu-bar — every Bartley book gets a small
   logotype-flavoured book title as a constant brand cue. */
.bartley-light .menu-title,
.bartley-dark .menu-title {
    font-family: "Cinzel", "Trajan Pro", "Cormorant SC", "Optima", Georgia, serif;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Hairline rules — replace mdbook's default heavier borders with 0.5px
   warm-tan dividers, mirroring the platform site's `0.5px solid var(--rule)`. */
.bartley-light .menu-bar,
.bartley-dark .menu-bar {
    border-bottom: 0.5px solid var(--theme-popup-border);
}
.bartley-light .content hr,
.bartley-dark .content hr {
    border: none;
    border-top: 0.5px solid var(--table-border-color);
    margin: 2em 0;
}
.bartley-light .content table,
.bartley-dark .content table {
    border: 0.5px solid var(--table-border-color);
}
.bartley-light .content table th,
.bartley-dark .content table th,
.bartley-light .content table td,
.bartley-dark .content table td {
    border: none;
    border-bottom: 0.5px solid var(--table-border-color);
}
.bartley-light .nav-wrapper,
.bartley-dark .nav-wrapper,
.bartley-light .nav-wide-wrapper,
.bartley-dark .nav-wide-wrapper {
    border-top: 0.5px solid var(--table-border-color);
}

/* Blockquote — gold left border is the only place gold appears in body content,
   echoing brand-standards.md "monogram is gold; nothing else". */
.bartley-light .content blockquote,
.bartley-dark .content blockquote {
    border: none;
    border-left: 4px solid var(--quote-border);
    background: var(--quote-bg);
    padding: 0.6em 1.2em;
    margin: 1.4em 0;
}

/* Links inside content — imprint colour, 0.5px underline with offset,
   smooth fade to fg on hover. Sidebar links keep their own (unstyled) treatment. */
.bartley-light .content a:link,
.bartley-light .content a:visited,
.bartley-dark .content a:link,
.bartley-dark .content a:visited {
    color: var(--links);
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 3px;
    transition: color 120ms ease-out;
}
.bartley-light .content a:hover,
.bartley-dark .content a:hover {
    color: var(--fg);
}

/* Selection — imprint bg / paper fg in light; gold-lifted bg / ink fg in dark. */
.bartley-light ::selection {
    background: #6e1f1f;        /* imprint */
    color: #f5ede0;             /* paper */
}
.bartley-dark ::selection {
    background: #d6b370;        /* gold-lifted */
    color: #1a1612;             /* ink */
}

/* Divider element between Auto/Bartley pair and the stock themes
   in the theme picker popup. */
.theme-popup .theme-divider {
    height: 0.5px;
    background: var(--theme-popup-border);
    margin: 0.4em 0;
    list-style: none;
    padding: 0;
}

/* ============================================================================
   BARTLEY: learning-track palette + ribbon pills (briefs/learning-tracks.md
   §3). The canonical 12-color palette is fixed across light and dark; per-pill
   text contrast is tuned per-palette in variables.css (gold 7, pink 8, slate 10
   need dark text). Each ribbon carries a `track-color-<n>` class plus an inline
   `--track-color` bridge, so the pill rules below reference a single variable.
   px/em only — NO rem (the 62.5% trap, policies/book-theme.md §4). */
:root {
    --track-color-1: #4E79A7;   /* blue */
    --track-color-2: #F28E2B;   /* orange */
    --track-color-3: #59A14F;   /* green */
    --track-color-4: #E15759;   /* red */
    --track-color-5: #B07AA1;   /* purple */
    --track-color-6: #76B7B2;   /* teal */
    --track-color-7: #EDC948;   /* gold */
    --track-color-8: #FF9DA7;   /* pink */
    --track-color-9: #9C755F;   /* brown */
    --track-color-10: #BAB0AC;  /* slate */
    --track-color-11: #6677CC;  /* indigo */
    --track-color-12: #8A9A5B;  /* olive */
}

/* Learning-tracks component styling is UNSCOPED — it renders in every theme,
   including the five stock mdbook themes (Light, Rust, Coal, Navy, Ayu) offered
   in the picker, following the house precedent set by the Related Articles
   component (custom.css). Palette adaptation flows through mdbook-standard CSS
   variables (var(--table-border-color), var(--icons), var(--links), var(--fg))
   that every theme defines; the :root palette tokens above are inert custom
   properties that paint nothing on their own and only take effect through these
   rules, so they follow the same bare-:root placement as the other BARTLEY token
   blocks in this file. */
.track-ribbons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 16px 0 22px;
    border: 1px solid var(--table-border-color);
    border-radius: 6px;
    padding: 10px 14px;
}

/* A quiet, small-caps section label that sets the ribbon block off from the
   article — letter-spaced and muted, matching the typographic voice of the
   menu-title and h6 small-caps headers elsewhere in this file. Decorative only:
   the nav's `aria-label="Learning tracks"` already names the region. */
.track-ribbons-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
    font-weight: 600;
    color: var(--icons);
    margin-bottom: 4px;
}

.track-ribbon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
}

.track-ribbon-name {
    font-weight: 600;
    color: var(--track-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.track-ribbon-name:hover {
    border-bottom-color: var(--track-color);
}

/* The colon offsetting the track name from its pills (kept outside the name
   <a> so it never joins the link underline). */
.track-ribbon-sep {
    margin-right: 6px;
}

/* The progression arrow between consecutive pills — track-colored for cohesion,
   small horizontal breathing room, no underline. */
.track-pill-arrow {
    color: var(--track-color);
    margin: 0 2px;
    text-decoration: none;
}

.track-ribbon-pills {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.track-pill {
    display: inline-block;
    /* Asymmetric vertical padding is an optical correction: Newsreader reserves
       more of its em box below the baseline than the caps occupy above it, so
       symmetric padding leaves the cap height riding ~1.5px high in the pill.
       The extra 1.5px on top re-centers the visible glyphs (measured in-browser:
       cap-glyph center vs pill center). Total pill height is unchanged. */
    padding: 3.5px 0.6em 0.5px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--track-color);
    text-decoration: none;
}

/* Pills are <a>/<span> inside `.content`. The link-color rule that applies in
   every theme — the unscoped `.content a:link, a:visited` at the top of this file
   (specificity 0,2,1, fed by var(--links)) — otherwise wins over a plain
   `.track-pill-*` selector, forcing pill text to the link color and adding an
   underline. Every pill link rule below therefore anchors under `.content` and
   names the pill class on the `a` element (`.content a.track-pill-*:link`,
   specificity 0,3,1), which beats `.content a:link` (0,2,1) in all themes while
   stripping the underline — so the pill foreground actually applies everywhere. */
.content a.track-pill:link,
.content a.track-pill:visited,
.content a.track-pill:hover,
.content a.track-pill-index:link,
.content a.track-pill-index:visited,
.content a.track-pill-index:hover {
    text-decoration: none;
}

/* Filled pills (links): track color background, white text by default
   (variables.css darkens text for the light-on-light palette indexes 7/8/10).
   The Learning Tracks page index pills (`track-pill-index`) share this fill so
   they read in the same colored-pill vocabulary as the ribbon prev/next pills. */
.content a.track-pill-prev:link,
.content a.track-pill-prev:visited,
.content a.track-pill-next:link,
.content a.track-pill-next:visited,
.content a.track-pill-index:link,
.content a.track-pill-index:visited {
    background: var(--track-color);
    color: var(--track-pill-fg, #fff);
}
.content a.track-pill-prev:hover,
.content a.track-pill-next:hover,
.content a.track-pill-index:hover {
    background: var(--track-color);
    color: var(--track-pill-fg, #fff);
    filter: brightness(0.92);
}

/* Bordered current pill (not a link): transparent fill, track-colored frame,
   ink-colored label (the theme foreground — dark in light themes, light in
   dark themes) so the current title reads as body text inside a colored frame.
   A <span>, so the link rules never touch it — a plain scoped class is enough,
   but mirror the `.content` scope for parity with the filled pills above. */
.content .track-pill-cur {
    background: transparent;
    color: var(--fg);
    font-weight: 600;
}

/* The "Prev:"/"Next:" direction prefix inside a filled pill. It inherits the
   pill foreground but sits slightly back (reduced opacity) so the article title
   reads as the emphasis and the direction label as a quiet qualifier. Scoped
   under `.content` for parity with the filled-pill rules above. */
.content .track-pill-dir {
    opacity: 0.8;
    font-weight: 400;
}

/* Learning Tracks page sections. Each section carries its track's
   `track-color-<n>` class + `--track-color` bridge (like the ribbon), so a
   color-keyed left accent reads each track in its own palette color without
   recoloring the section text. */
.learning-track {
    margin: 0 0 28px;
    border-left: 3px solid var(--track-color);
    padding-left: 14px;
}
.learning-track-purpose {
    margin: 4px 0 10px;
}
.learning-track-index {
    margin: 0;
}
/* Index entries are filled pills; give the stacked list a little vertical room
   so consecutive pills don't crowd one another. */
.learning-track-index li {
    margin: 4px 0;
}

/* Print: don't waste toner on dark-theme code blocks. mdbook's stock
   print.css resets bg/fg to white/black for prose, but pre/code keep
   the live theme palette. Force them flat for print. */
@media print {
    .bartley-light pre, .bartley-dark pre,
    .bartley-light code, .bartley-dark code {
        background: white !important;
        color: black !important;
        border: 0.5px solid #999 !important;
    }
}