/* Gentle compatibility fixes for historical demos: preserve each project's design. */
.archive-return { box-sizing: border-box; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .6rem 1.25rem; background: #111; color: #bbb; border-bottom: 1px solid #333; font: 13px/1.5 monospace; position: relative; z-index: 101; }
.archive-return a { color: #79dfa0; display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
:where(a,button,input,summary):focus-visible { outline: 3px solid #50c878; outline-offset: 3px; }
img { max-width: 100%; }
.dashboard-return { display: flex; align-items: center; min-height: 44px; padding: .5rem 1rem; color: var(--accent-color); font-size: .8rem; }
.dashboard-page { height: auto; min-height: 100dvh; overflow: auto; }
.dashboard-page .dashboard { height: auto; min-height: calc(100dvh - 44px); padding-top: 1rem; }
.dashboard-page .header { flex-wrap: wrap; gap: 1rem; }
.dashboard-page button { min-height: 44px; }
body:has(.graph-container) { display: block; }
body:has(.graph-container) .container { min-width: 0; }
body:has(.graph-container) .main-container { min-width: 0; }
body:has(.graph-container) .sidebar { min-width: 270px; width: 300px; height: auto; min-height: calc(100vh - 64px); }
body:has(.graph-container) .input-box { width: 85%; }
body:has(.graph-container) button { width: auto; min-height: 44px; height: auto; padding: .7rem; }
body:has(.graph-container) input { width: min(100%,10rem); }
@media (max-width: 760px) {
  body:has(.lang) nav, body:has(.codice) nav, body:has(.split) nav { padding: .5rem 1rem; }
  body:has(.lang) nav ul, body:has(.codice) nav ul, body:has(.split) nav ul { height: auto; min-height: 64px; flex-wrap: wrap; gap: .5rem 1rem; }
  body:has(.lang) nav li, body:has(.codice) nav li, body:has(.split) nav li { margin: 0; }
  body:has(.lang) .lang { max-width: calc(100% - 20px); }
  .index { box-sizing: border-box; max-width: 100%; }
  .split { display: block; width: auto; }
  pre { overflow-x: auto; max-width: 100%; }
  body:has(.graph-container) .container { flex-direction: column; }
  body:has(.graph-container) .sidebar { min-width: 0; width: 100%; min-height: 0; }
  body:has(.graph-container) .descr, body:has(.graph-container) input, body:has(.graph-container) .input-box { font-size: 1rem; }
  .dashboard-page .header-controls { flex-wrap: wrap; }
  .archive-return span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 760px) {
  body:has(.codice) table { display: block; max-width: 100%; overflow-x: auto; }
}
/* Embedded tutorial examples must fit their reading column. */
iframe { max-width: 100%; }