/* Site integration for the plasTeX blueprint (generated by tools/integrate_blueprint.py).
   Colours follow assets/site.scss and assets/site-dark.scss. */
:root, html[data-theme="light"] {
  --bg: #ffffff; --fg: #373a3c; --muted: #5f6368; --link: #8a5a00; --primary: #9a6a12;
  --panel: #f6f4ef; --rule: #d9d4c7; --code: #7d4e00; --nav-bg: #141b26; --nav-fg: #e8e2d4;
}
html[data-theme="dark"] {
  --bg: #181c23; --fg: #e9e6df; --muted: #b9b4aa; --link: #f2be5c; --primary: #e0a83c;
  --panel: #20252e; --rule: #3a404b; --code: #f5cf8e; --nav-bg: #10141a; --nav-fg: #e8e2d4;
}
html, body, div.wrapper, div.content, div.content-wrapper, div.main-text { background: var(--bg) !important; color: var(--fg) !important; }
body { font-family: Lato, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.55; height: auto; display: block; }
/* plasTeX's theme fixes the body to the window and scrolls an inner box; with the site menu on top
   that left the page unable to scroll. Let the window scroll instead. */
html, body, body > div.wrapper, div.content { overflow: visible; height: auto; }
body { overflow-x: hidden; }
body > div.wrapper, div.content { display: block; }
div.displaymath { overflow-x: auto; overflow-y: hidden; }
::selection { color: var(--bg); background: var(--link); }
h1, h2, h3, h4, div[class$=_thmheading], .titlepage h1 { color: var(--fg) !important; font-family: inherit; }
a, a:visited { color: var(--link); }
code, .lean_decl { color: var(--code); }
p, li, dd, dt { color: inherit; }

/* Top menu, as on the rest of the site. */
nav.site-nav { position: sticky; top: 0; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.1rem;
  padding: .55rem 1.2rem; background: var(--nav-bg); color: var(--nav-fg); font-size: 1rem; }
nav.site-nav a, nav.site-nav a:visited { color: var(--nav-fg); text-decoration: none; opacity: .85; }
nav.site-nav a:hover, nav.site-nav a.active { opacity: 1; color: #f2be5c; }
nav.site-nav a.site-brand { font-size: 1.15rem; opacity: 1; margin-right: .6rem; }
nav.site-nav .site-spacer { flex: 1; }
.site-theme-toggle { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--nav-fg); cursor: pointer;
  background: linear-gradient(90deg, var(--nav-fg) 50%, transparent 50%); padding: 0; }

/* Statements and proofs. */
div.main-text { max-width: 52rem; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
div[class$=_thmcontent] { border-left: 3px solid var(--primary) !important; background: var(--panel); padding: .5rem .9rem; }
div.proof_content { border-left: 2px solid var(--rule) !important; }
div.thm_header_extras, div.thm_header_hidden_extras, svg.icon { color: var(--muted); fill: currentColor; }
dl.description dt { color: var(--fg); }
/* Statement reached by a link: a short amber flash instead of the theme's flash to white. */
div[class$=_thmwrapper]:target, div.hilite { animation: site-hilite 1.5s ease; }
@keyframes site-hilite { from { background: rgba(224, 168, 60, .35); } to { background: transparent; } }

/* Dependency graph page. */
body > header { background: var(--bg) !important; color: var(--fg); border-bottom: 1px solid var(--rule); }
body > header a.toc { display: none; }
body > header h1 { position: static; font-size: 1.4rem; font-weight: 600; }
div#graph { height: auto; resize: none; overflow: auto; margin: 1rem 0; padding: 1rem; background: #f6f4ef; border-radius: 6px; }
div#graph svg { display: block; margin: 0 auto; max-width: 100%; min-width: 40rem; height: auto; }
div#graph svg text { font-family: Lato, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* Legend: in the page flow (it used to float over the graph and the statements), open by default. */
details#Legend { margin: .8rem 0 0; padding: .45rem .9rem; background: var(--panel); color: var(--fg); border: 1px solid var(--rule); border-radius: 6px; }
details#Legend summary { cursor: pointer; font-weight: 600; }
details#Legend dl.legend { position: static; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .25rem 1.4rem;
  max-width: none; margin: .5rem 0 .2rem; font-size: .92rem; background: none !important; color: var(--fg) !important; }
details#Legend dl.legend > div { line-height: 1.4; }
details#Legend dl.legend dt { display: inline; font-weight: 700; }
details#Legend dl.legend dd { display: inline; margin: 0 0 0 .3em; }
p.graph-hint { margin: .6rem 0 0; color: var(--muted); font-size: .92rem; }
/* Statement of a clicked node: a panel at the right that stays clear of the menu, scrolls only when the
   statement is longer than the window, and closes with its button, Escape or a click elsewhere. */
div#statements { position: fixed; top: 3.6rem; right: 1rem; bottom: auto; z-index: 900; width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4.6rem); overflow-x: hidden; overflow-y: auto; background: var(--panel) !important; color: var(--fg) !important;
  border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
div.dep-modal-container { position: static; width: auto; margin: 0; }
div.dep-modal-content { position: relative; overflow: visible; margin: 0; padding: .7rem 1rem .9rem; border: none !important; box-shadow: none;
  background: transparent !important; color: var(--fg) !important; }
div.dep-modal-content div.thm_thmheading { padding-right: 2.2rem; }
div.dep-modal-content div[class$=_thmcontent] { margin-left: 0; }
#statements mjx-container[display="true"] { font-size: 100% !important; }
div.dep-modal-content a, div.dep-modal-content a:visited { color: var(--link); }
button.dep-closebtn { position: absolute; top: .35rem; right: .5rem; padding: .1rem .45rem; font-size: 1.6rem; line-height: 1; font-weight: 400;
  color: var(--fg); background: transparent; border: none; border-radius: 4px; cursor: pointer; }
button.dep-closebtn:hover, button.dep-closebtn:focus-visible { background: var(--rule); }
ul.tooltip_list { background: var(--panel) !important; border-color: var(--rule) !important; }
div#graph g.node.selected ellipse, div#graph g.node.selected polygon { stroke: #c27c0e; stroke-width: 4px; }
div.modal-content { background: var(--panel) !important; color: var(--fg) !important; border-color: var(--rule) !important; }
nav.prev_up_next { background: var(--panel) !important; border: 1px solid var(--rule); }
nav.prev_up_next svg { fill: var(--fg); color: var(--fg); }