/* Site chrome of machinebehavior.io: skip link, top bar, search, demo banner, breadcrumbs, footer, page layouts.
   HTML from scripts/site_chrome.py (site/nav.yml); search behaviour in /inside/bar.js; tokens in /design/tokens.css.
   Class names start with mb- so the chrome does not collide with page styles. */
:root { --ib-h: var(--mb-bar-h); }  /* older page styles offset sticky elements by --ib-h */

.mb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* skip link: first focusable element on every page */
.mb-skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--mb-amber-fill); color: var(--mb-on-fill); padding: 8px 12px;
  border-radius: var(--mb-radius-s); font: 500 13px/1.2 var(--mb-font-mono); text-decoration: none; }
.mb-skip:focus { top: 8px; outline: 2px solid var(--mb-on-fill); outline-offset: 2px; }

/* ---------- top bar ---------- */
.mb-bar { position: sticky; top: 0; z-index: 50; box-sizing: border-box; height: var(--mb-bar-h); display: flex; align-items: center; gap: 22px;
  padding: 0 18px; background: var(--mb-bar-bg); border-bottom: 1px solid var(--mb-bar-line); color: var(--mb-bar-text);
  font-family: var(--mb-font-sans); line-height: 1.3; -webkit-font-smoothing: antialiased; }
.mb-bar *, .mb-bar *::before, .mb-bar *::after { box-sizing: border-box; }
.mb-brand { display: flex; align-items: center; gap: 9px; flex: none; color: var(--mb-bar-text); text-decoration: none; font-weight: 700; font-size: 16px; letter-spacing: -0.2px; }
.mb-mark { font-size: 20px; line-height: 1; }
.mb-brand:hover .mb-name { color: var(--mb-bar-accent); }
.mb-nav { display: flex; align-items: stretch; gap: 20px; min-width: 0; height: 100%; overflow-x: auto; scrollbar-width: none; }
.mb-nav::-webkit-scrollbar { display: none; }
.mb-nav a { display: flex; align-items: center; color: var(--mb-bar-soft); text-decoration: none; font-size: 14.5px; white-space: nowrap; }
.mb-nav a:hover { color: var(--mb-bar-accent); }
.mb-nav a[aria-current] { color: var(--mb-bar-text); box-shadow: inset 0 -2px 0 var(--mb-bar-accent); }
.mb-bar a:focus-visible, .mb-bar input:focus-visible { outline: 2px solid var(--mb-bar-accent); outline-offset: 2px; border-radius: 4px; }

.mb-search { position: relative; margin: 0 0 0 auto; width: min(340px, 34vw); flex: none; }
.mb-search input { display: block; width: 100%; margin: 0; background: var(--mb-bar-field); border: 1px solid #2A333D; border-radius: 8px; color: var(--mb-bar-text);
  padding: 8px 34px 8px 12px; font: 13px/1.3 var(--mb-font-mono); -webkit-appearance: none; appearance: none; }
.mb-search input::placeholder { color: var(--mb-bar-dim); opacity: 1; }
.mb-search input:focus { border-color: var(--mb-bar-accent); }
.mb-key { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font: 11px var(--mb-font-mono); color: var(--mb-bar-dim);
  border: 1px solid #2A333D; border-radius: 4px; padding: 0 5px; pointer-events: none; }
.mb-search input:focus ~ .mb-key, .mb-search input:not(:placeholder-shown) ~ .mb-key { display: none; }

/* search suggestions (filled by /inside/bar.js; class names shared with the results page) */
.ib-hits { position: absolute; right: 0; top: 42px; width: min(540px, calc(100vw - 24px)); max-height: 72vh; overflow: auto; list-style: none; margin: 0; padding: 0;
  background: #11151A; border: 1px solid var(--mb-bar-line); border-radius: var(--mb-radius-m); display: none; box-shadow: 0 12px 32px rgba(0,0,0,0.45); }
.ib-hits.on { display: block; }
.ib-hits a { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px 10px; padding: 9px 12px; text-decoration: none; border-top: 1px solid var(--mb-bar-line); color: var(--mb-bar-text); }
.ib-hits li:first-child a { border-top: 0; }
.ib-hits a:hover { background: #161B21; }
.ib-hits a:focus, .ib-hits a:focus-visible { background: #1A2129; outline: 2px solid var(--mb-bar-accent); outline-offset: -2px; border-radius: 0; }
.ib-hits .ib-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-top: 6px; }
.ib-hits b { font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.ib-hits .ib-s { grid-column: 2; font: 11px var(--mb-font-mono); color: var(--mb-bar-dim); }
.ib-hits .ib-d { grid-column: 2; font-size: 12.5px; color: var(--mb-bar-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-hits .ib-all { display: block; font: 12px var(--mb-font-mono); color: var(--mb-bar-accent); background: #0E1216; }
.ib-hits .ib-none { padding: 12px; color: var(--mb-bar-dim); font: 13px var(--mb-font-sans); }

/* below 820 px: brand and search on the first row, the sections on a second row */
@media (max-width: 819px) {
  .mb-bar { flex-wrap: wrap; align-content: flex-start; gap: 0 12px; padding: 0 var(--mb-gutter); }
  .mb-brand { height: 48px; font-size: 15px; }
  .mb-search { order: 2; width: auto; flex: 1; min-width: 0; }
  .mb-nav { order: 3; width: 100%; height: 44px; gap: 22px; border-top: 1px solid var(--mb-bar-line); }
  .mb-key { display: none; }
}
@media (max-width: 400px) { .mb-name { font-size: 14px; } }

/* ---------- public-demo banner (Inside and Docs app pages) ---------- */
.mb-demo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 18px; background: color-mix(in srgb, var(--mb-amber) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--mb-amber) 28%, transparent); font: 13px/1.45 var(--mb-font-sans); color: var(--mb-text-soft); }
.mb-demo-tag { font: 500 11px var(--mb-font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--mb-amber); white-space: nowrap; }
.mb-demo a { color: var(--mb-amber); text-underline-offset: 2px; white-space: nowrap; }
.mb-demo a:focus-visible { outline: 2px solid var(--mb-focus); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 819px) { .mb-demo { padding: 8px var(--mb-gutter); font-size: 12.5px; } }

/* ---------- breadcrumbs, with the page facts (owner, updated) beside them on hand-written pages ---------- */
.mb-crumbbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 18px; margin: 0 0 14px; }
.mb-crumbbar .mb-crumbs { margin: 0; }
.mb-page-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font: var(--mb-text-xs)/1.5 var(--mb-font-mono); color: var(--mb-text-dim); }
.mb-crumbs { margin: 0 0 14px; font: var(--mb-text-xs)/1.5 var(--mb-font-mono); letter-spacing: 0; text-transform: none; }
.mb-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.mb-crumbs li { display: inline-flex; align-items: baseline; min-width: 0; }
.mb-crumbs li + li::before { content: '/'; content: '/' / ''; margin: 0 7px; color: var(--mb-text-dim); opacity: 0.7; }
.mb-crumbs a { color: var(--mb-text-dim); text-decoration: none; overflow-wrap: anywhere; }
.mb-crumbs a:hover { color: var(--mb-accent); text-decoration: underline; }
.mb-crumbs a[aria-current="page"] { color: var(--mb-text-soft); }
.mb-crumbs a:focus-visible { outline: 2px solid var(--mb-focus); outline-offset: 2px; border-radius: 3px; }

/* ---------- footer ---------- */
.mb-foot { margin: 0; padding: 0; border-top: 1px solid var(--mb-line); background: var(--mb-surface-sunken); color: var(--mb-text-dim);
  font: var(--mb-text-xs)/1.7 var(--mb-font-mono); max-width: none; }
.mb-foot-in { box-sizing: border-box; max-width: 1200px; margin: 0 auto; padding: 22px 20px 30px; display: grid; gap: 6px; }
.mb-foot p { margin: 0; }
.mb-foot a { color: var(--mb-text-soft); text-decoration: underline; text-decoration-color: var(--mb-line); text-underline-offset: 3px; }
.mb-foot a:hover { color: var(--mb-accent); text-decoration-color: currentColor; }
.mb-foot a:focus-visible { outline: 2px solid var(--mb-focus); outline-offset: 2px; border-radius: 3px; }
.mb-foot-site { font-family: var(--mb-font-sans); font-size: var(--mb-text-sm); color: var(--mb-text-soft); }
.mb-foot-site a { font-weight: 700; color: var(--mb-text); text-decoration: none; }
.mb-foot .conf, .mb-foot .conf a { font-size: inherit; color: inherit; margin: 0; }
.mb-foot-links, .mb-foot-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }

/* ---------- reading layout: long research pieces in the serif column ---------- */
body.mb-read { padding: 0; }
body.mb-read > .sheet { padding: 22px 20px 56px; }
body.mb-read.home { padding-top: 0; }
@media (max-width: 819px) { body.mb-read > .sheet { padding: 18px var(--mb-gutter) 44px; } }

/* ---------- app layout: Inside, Docs, Map ---------- */
body.mb-app main .mb-crumbs { margin-bottom: 10px; }
.mb-s-map .panel .mb-crumbs { margin: 0 28px 6px 0; }
.mb-s-map .mb-foot { background: transparent; border-top: 1px solid var(--mb-line); margin-top: 14px; }
.mb-s-map .mb-foot-in { padding: 10px 0 0; gap: 4px; font-size: 11px; }
.mb-s-map .mb-foot-site { font-size: 12px; }

@media print { .mb-bar, .mb-demo, .mb-skip, .mb-foot-links { display: none; } }

/* ---------- section sidebar (Research, Inside) ---------- */
.mb-side { box-sizing: border-box; font: var(--mb-text-sm)/1.35 var(--mb-font-sans); color: var(--mb-text-soft); }
.mb-side *, .mb-side *::before { box-sizing: border-box; }
.mb-side ul { list-style: none; margin: 0; padding: 0; }
.mb-side a { display: block; padding: 5px 10px; border-radius: var(--mb-radius-s); color: var(--mb-text-soft); text-decoration: none; overflow-wrap: anywhere; }
.mb-side a:hover { background: var(--mb-accent-tint); color: var(--mb-text); }
.mb-side a[aria-current="page"] { background: var(--mb-accent-tint); color: var(--mb-accent); font-weight: 500; box-shadow: inset 2px 0 0 var(--mb-accent); }
.mb-side a:focus-visible, .mb-side summary:focus-visible { outline: 2px solid var(--mb-focus); outline-offset: 1px; }
.mb-side-head { font-weight: 700; font-size: var(--mb-text-md); color: var(--mb-text) !important; margin-bottom: 6px; }
.mb-side-label { display: block; margin: 14px 0 4px; padding: 0 10px; font: var(--mb-text-2xs)/1.4 var(--mb-font-mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--mb-text-dim); }
.mb-side-tree details > summary { list-style: none; display: flex; align-items: flex-start; cursor: pointer; }
.mb-side-tree details > summary::-webkit-details-marker { display: none; }
.mb-side-tree details > summary::before { content: '▸'; content: '▸' / ''; width: 14px; flex: none; padding-top: 4px; font-size: 12px; line-height: 1.2; color: var(--mb-text-dim); transition: transform .15s; }
.mb-side-tree details[open] > summary::before { transform: rotate(90deg); }
.mb-side-tree details > summary > a { flex: 1; min-width: 0; margin-left: -4px; }
.mb-side-tree details ul { margin: 2px 0 4px 10px; padding-left: 8px; border-left: 1px solid var(--mb-line); }
.mb-side-wrap > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  font: var(--mb-text-xs)/1.3 var(--mb-font-mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--mb-text-soft); }
.mb-side-wrap > summary::-webkit-details-marker { display: none; }
.mb-side-wrap > summary::after { content: '▾'; content: '▾' / ''; margin-left: auto; color: var(--mb-text-dim); letter-spacing: 0; transition: transform .15s; }
.mb-side-wrap:not([open]) > summary::after { transform: rotate(-90deg); }
.mb-side-n { letter-spacing: 0; text-transform: none; color: var(--mb-text-dim); }
@media (prefers-reduced-motion: reduce) { .mb-side-tree details > summary::before, .mb-side-wrap > summary::after { transition: none; } }

/* narrow: a disclosure above the content */
@media (max-width: 1099px) {
  .mb-side { border-bottom: 1px solid var(--mb-line); background: var(--mb-surface-sunken); }
  .mb-side-wrap > summary { padding: 12px var(--mb-gutter); }
  .mb-side-wrap[open] { padding-bottom: 12px; }
  .mb-side-wrap > a, .mb-side-wrap > ul { margin: 0 calc(var(--mb-gutter) - 10px); }
  body.mb-read > .mb-side .mb-side-wrap > a, body.mb-read > .mb-side .mb-side-wrap > ul { max-width: 680px; }
}

/* wide: a column beside the content, sticky under the bar */
@media (min-width: 1100px) {
  body.mb-has-side { display: grid; grid-template-columns: var(--mb-side-w) minmax(0, 1fr); min-height: 100vh; align-content: start; }
  body.mb-read.mb-has-side { grid-template-rows: auto 1fr auto; }
  body.mb-app.mb-has-side { grid-template-rows: auto auto 1fr auto; }
  body.mb-has-side > .mb-bar, body.mb-has-side > .mb-demo, body.mb-has-side > .mb-foot { grid-column: 1 / -1; }
  body.mb-has-side > .mb-side { grid-column: 1; position: sticky; top: var(--mb-bar-h); align-self: start;
    max-height: calc(100vh - var(--mb-bar-h)); overflow: auto; padding: 22px 14px 32px 18px; border-right: 1px solid var(--mb-line);
    scrollbar-width: thin; scrollbar-color: var(--mb-line) transparent; }
  body.mb-has-side > main, body.mb-has-side > .sheet { grid-column: 2; min-width: 0; }
  .mb-side-wrap > summary { display: none; }
}

/* Topics block at the end of each sidebar; a dot marks a topic that lists the current page */
.mb-topics { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--mb-line); }
.mb-topics .mb-side-label { display: block; margin: 8px 0 4px; padding: 0 10px; text-decoration: none; background: none; box-shadow: none; }
.mb-topics .mb-side-label:hover { color: var(--mb-accent); background: none; }
.mb-topics ul { list-style: none; margin: 0; padding: 0; }
.mb-topics a.mb-topic-in::after { content: '●'; content: '●' / ''; margin-left: 6px; font-size: 9px; vertical-align: 2px; color: var(--mb-accent); }
.side .mb-topics a { font-size: 13.5px; }

/* the footer sits at the bottom of the window on a short page */
body.mb-read:not(.mb-has-side), body.mb-app:not(.mb-has-side):not(.mb-s-map) { display: flex; flex-direction: column; min-height: 100vh; }
body:not(.mb-has-side) > .mb-foot { margin-top: auto; }
body:not(.mb-has-side) > :is(.mb-bar, .mb-demo, .mb-foot, .sheet, main, .layout) { flex-shrink: 0; width: 100%; box-sizing: border-box; }
body.mb-read > .sheet { box-sizing: border-box; width: 100%; max-width: calc(var(--mb-read-w) + 40px); }
@media (max-width: 819px) { body.mb-read > .sheet { max-width: none; } }