/* Machine view (SEB-301, 21 Oct). The Human/Machine switch and the markdown panel. Colours are the style.css tokens.
   One switch, fixed at the bottom centre of the screen on every page, at every width and in both modes. Pages keep
   room at the bottom so it never covers the last line. */
.mv-switch {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50;
  display: flex; gap: 2px; width: 160px; box-sizing: border-box; padding: 3px;
  border: 1px solid var(--color-neutral-300, #d7d3d3); border-radius: 999px; background: var(--color-bg, #fff);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.mv-switch button {
  flex: 1 1 0; min-width: 0; min-height: 28px; font: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 8px 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--color-neutral-700, #605d5d); cursor: pointer; text-align: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.mv-switch.mv-in-head { position: static; transform: none; box-shadow: none; width: auto; margin-left: 16px; flex: none; order: 99; }
.mv-switch.mv-in-head button { padding: 5px 10px; min-height: 0; font-size: 13px; }
@media (max-width: 767px) {
  .mv-switch.mv-in-head { order: 2; margin: 0 8px 0 auto !important; padding: 2px; }
  .mv-switch.mv-in-head button { padding: 6px 10px; font-size: 13px; }
  .mv-switch.mv-in-head + .sh-menu { margin: 0 -12px 0 0 !important; }
  :has(> .mv-switch.mv-in-head) { column-gap: 0 !important; }
}
.mv-switch button[aria-pressed="true"] { background: var(--color-ink, #201e1d); color: var(--color-bg, #fff); }
/* Machine mode: black background, white text, the markdown and nothing else. A soft fade in. */
html { transition: background-color 0.25s ease; }
html.mv-on { background: #0b0b0b; }
html.mv-on body { background: transparent; }
.mv-panel {
  display: none; margin: 0; padding: 40px 24px; max-width: 760px; margin-left: auto; margin-right: auto;
  opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease;
}
html.mv-on .mv-panel { display: block; }
html.mv-on .mv-panel.mv-in { opacity: 1; transform: none; }
html.mv-on [data-mv-hide] { display: none !important; }
.mv-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 0 0 10px; margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); font-size: 13px; color: rgba(255, 255, 255, 0.6);
}
.mv-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fff; }
.mv-links { display: flex; gap: 14px; margin-left: auto; }
.mv-links a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); }
.mv-llms { margin: 0 0 12px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.mv-llms a { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.4); }
.mv-md {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: #fff;
}
@media (max-width: 700px) { .mv-links { margin-left: 0; } }
/* Machine mode: the site header is hidden too. The switch stays at the bottom centre, in light-on-dark colours. */
html.mv-on :is(.hp-head, .ci-head, .c-head, .sm-head, .s-head, .fp-head, .mwh) { display: none !important; }
html.mv-on .mv-switch { border-color: rgba(255, 255, 255, 0.3); background: #0b0b0b; box-shadow: none; }
html.mv-on .mv-switch button { color: rgba(255, 255, 255, 0.7); }
html.mv-on .mv-switch button[aria-pressed="true"] { background: #fff; color: #0b0b0b; }
html.mv-on .mv-panel { padding-bottom: 96px; }