/* open-mind.space look for the techdoc theme (loaded after theme, chroma and lightbox CSS).
   Palette: 73939C (slate blue), DDDAD8 (light grey), 8A8A8A (grey), 535C5F (charcoal).
   Dark is the default; the light theme applies via [data-theme="light"]. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --oms-bg: #2a3032; --oms-paper: #333a3d; --oms-ink: #dddad8; --oms-text2: #a9aeb0; --oms-hair: #444c4f;
  --oms-accent: #73939c; --oms-accent-text: #9dbac2; --oms-on-accent: #1a1f21;
  --oms-code: #23292b;
  --oms-body: "Archivo", sans-serif; --oms-mono: "IBM Plex Mono", Menlo, monospace;
  /* theme hooks */
  --custom-font-family-base: var(--oms-body);
  --custom-font-family-headings: var(--oms-body);
  --custom-link-text-color: var(--oms-accent-text);
  --custom-link-text-hover-color: var(--oms-ink);
  font-size: 17px;
  color: var(--oms-ink);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --oms-bg: #dddad8; --oms-paper: #ebe9e7; --oms-ink: #2c3335; --oms-text2: #535c5f; --oms-hair: #c4c1be;
  --oms-accent: #73939c; --oms-accent-text: #4c6c75; --oms-on-accent: #1f2527;
  --oms-code: #e4e1df;
  color-scheme: light;
}

body { background: var(--oms-bg); color: var(--oms-ink); font-feature-settings: normal; }
p, figcaption { font-size: 1rem; }
main p, main li, main td { color: var(--oms-text2); }
main strong { color: var(--oms-ink); }

/* Headings */
h1, h2, h3, h4, h5, h6 { color: var(--oms-ink); letter-spacing: -.01em; }
main h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; font-stretch: 112%; line-height: 1.12; }
main h2 { font-size: 26px; font-weight: 700; font-stretch: 108%; line-height: 1.2; }
main h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }
main h4 { font-size: 17px; font-weight: 600; line-height: 1.4; }
main h5, main h6 { font-size: 15px; font-weight: 600; }

a { color: var(--oms-accent-text); }
a:focus, a:active, a:hover { color: var(--oms-ink); text-decoration: underline; text-underline-offset: 3px; }
hr { background-color: var(--oms-hair); height: 1px; }

/* Header */
.oms-wrap { display: flex; align-items: center; gap: 14px; padding: 0 24px; }
.oms-header { background: var(--oms-bg); color: var(--oms-ink); border-bottom: 1px solid var(--oms-hair); padding: 0; position: sticky; top: 0; z-index: 100; }
.oms-header .oms-wrap { min-height: 68px; flex-wrap: wrap; }
.oms-portal { display: flex; color: var(--oms-ink); }
.oms-portal:hover { color: var(--oms-accent-text); }
.oms-portal svg { width: 38px; height: 34px; }
.oms-sep { color: var(--oms-hair); font-size: 22px; font-weight: 300; }
.oms-title { color: var(--oms-ink); font-weight: 800; font-stretch: 112%; font-size: 20px; line-height: 1.1; white-space: nowrap; }
.oms-title:hover { color: var(--oms-ink); text-decoration: none; }
.oms-nav { margin-left: auto; margin-right: 8px; display: flex; align-items: center; gap: 22px; }
.oms-nav a { color: var(--oms-text2); white-space: nowrap; }
.oms-nav a:hover, .oms-nav a.active { color: var(--oms-ink); text-decoration: none; }
.oms-mono { font-family: var(--oms-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.oms-sq {
  border: 1px solid var(--oms-hair); background: transparent; color: var(--oms-ink);
  height: 34px; min-width: 34px; padding: 0 9px; cursor: pointer;
  display: inline-grid; place-items: center; font: 500 12px var(--oms-mono);
}
.oms-sq:hover { background: var(--oms-ink); color: var(--oms-bg); border-color: var(--oms-ink); }
.global-menu { display: none; }

/* Layout */
.content-container { border-bottom: 1px solid var(--oms-hair); }
main { padding: 48px 56px 56px; }
.sidebar { background: var(--oms-bg); border-right: 1px solid var(--oms-hair); font-size: 15px; line-height: 1.6; padding-top: 16px; }
.sidebar a { color: var(--oms-text2); border-left: 2px solid transparent; border-bottom: 0; padding: 6px 20px; }
.sidebar a:hover { color: var(--oms-ink); background: var(--oms-paper); border-left: 2px solid var(--oms-hair); text-decoration: none; }
.sidebar .active > a { color: var(--oms-ink); background: var(--oms-paper); border-left: 2px solid var(--oms-accent); }
.sidebar nav > ul > li > a { font-weight: 600; color: var(--oms-ink); }
.sidebar nav > ul > li li a { padding-left: 34px; }

/* Content elements */
table { border: 1px solid var(--oms-hair); }
th, td { border-top: 1px solid var(--oms-hair); border-right: 1px solid var(--oms-hair); }
th { background: var(--oms-paper); color: var(--oms-ink); }
tr:nth-child(even) th, tr:nth-child(even) td { background: transparent; }
figure img { background: transparent; }
figcaption { color: var(--oms-text2); font-size: 14px; }
blockquote { color: var(--oms-text2); background: var(--oms-paper); border-left: 2px solid var(--oms-accent); border-radius: 0; }
code, pre, kbd { font-family: var(--oms-mono); }
code { background: var(--oms-code); color: var(--oms-ink); border-radius: 0; font-size: .9em; }
pre, .highlight pre { background: var(--oms-code) !important; border-radius: 0; border: 1px solid var(--oms-hair); }
kbd { background: var(--oms-ink); color: var(--oms-bg); border-radius: 0; }
.panel { border-radius: 0; }
.button { border-radius: 0; }

.table_of_contents { border: 1px solid var(--oms-hair); background: var(--oms-paper); font-size: 15px; }
.table_of_contents h5 { font-family: var(--oms-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--oms-text2); }
.table_of_contents li { border-top: 1px solid var(--oms-hair); }

.pagination { font-weight: 600; border-top: 1px solid var(--oms-hair); padding-top: 18px; }
.edit-meta, .powered { color: var(--oms-text2); font-family: var(--oms-mono); font-size: 11px; letter-spacing: .04em; }
.powered a { color: var(--oms-text2); text-decoration: underline; }

.fa-layers .fa-circle { color: var(--oms-bg); }
.backtothetop { color: var(--oms-accent-text); }

/* Lightbox (static/js/oms-lightbox.js), same look as on the oPBWeb page */
main a[href$=".png"], main a[href$=".jpg"], main a[href$=".jpeg"] { cursor: zoom-in; }
.oms-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(20, 24, 26, .97); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; }
.oms-lightbox[hidden] { display: none; }
.oms-lightbox figure { margin: 0; max-width: min(1400px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.oms-lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; border: 1px solid #444c4f; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.oms-lightbox figcaption { color: #dddad8; margin-top: 12px; text-align: center; }
.oms-lightbox .oms-lb-btn { color: #dddad8; border-color: #5d6669; background: rgba(42, 48, 50, .8); flex: none; font-size: 18px; }
.oms-lightbox .oms-lb-btn:hover { background: #dddad8; color: #2a3032; border-color: #dddad8; }
.oms-lightbox .oms-lb-btn[hidden] { display: none; }
.oms-lightbox .oms-lb-close { position: absolute; top: 16px; right: 16px; font-size: 14px; }
body.oms-lb-open { overflow: hidden; }

/* Footer */
.oms-footer { color: var(--oms-text2); padding: 26px 0 40px; }
.oms-footer .oms-wrap { flex-wrap: wrap; gap: 22px; }
.oms-right { margin-left: auto; display: flex; gap: 22px; }
.oms-footer a { color: var(--oms-text2); }
.oms-footer a:hover { color: var(--oms-ink); text-decoration: none; }

/* Narrow screens: header wraps, menu scrolls, sidebar below the content */
@media screen and (max-width: 860px) {
  .oms-wrap { padding: 0 16px; }
  .oms-header .oms-wrap { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .oms-title { font-size: 17px; white-space: normal; flex: 1 1 0; min-width: 0; }
  .oms-nav { order: 3; width: 100%; margin-left: 0; gap: 18px; overflow-x: auto; padding-bottom: 2px; }
  #oms-theme-toggle { margin-left: auto; }
  .content-container { flex-flow: column nowrap; }
  main { flex: 0 0 auto; max-width: 100%; min-width: 100%; padding: 28px 16px 40px; }
  .sidebar { flex: 0 0 auto; order: 1; border-right: 0; border-top: 1px solid var(--oms-hair); overflow-y: visible; }
  main table { display: block; overflow-x: auto; }
  .oms-lightbox { padding: 64px 8px 16px; gap: 4px; }
  .oms-lightbox .oms-lb-prev, .oms-lightbox .oms-lb-next { position: absolute; bottom: 16px; }
  .oms-lightbox .oms-lb-prev { left: 16px; }
  .oms-lightbox .oms-lb-next { right: 16px; }
  .table_of_contents { padding: 16px; }
  .table_of_contents ul > li li a { margin-left: 1rem; }
  .table_of_contents ul ul > li li a { margin-left: 2rem; }
  .table_of_contents ul ul ul > li li a { margin-left: 3rem; }
}