/* Reading layout for the runtime and NUBEAM user guides. */
.t-guide { max-width: 960px; padding-bottom: 2rem; }
.t-guide h1 { line-height: 1.2; }
.t-guide h2 { margin-top: 2.5rem; line-height: 1.3; }
.t-guide h3 { margin-top: 1.75rem; line-height: 1.4; }
.t-guide [id] { scroll-margin-top: 9rem; }
.t-guide p, .t-guide li { overflow-wrap: anywhere; }
.t-guide li > p { margin: .35rem 0; }
.t-guide .guide-toc {
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.5rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-orange, #E87722);
  border-radius: .35rem;
}
.guide-toc h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.guide-toc ul { margin: 0; padding-left: 1.25rem; }
.guide-table { overflow-x: auto; margin: 1.25rem 0; }
.guide-table:focus-visible { outline: 2px solid var(--brand-orange, #E87722); }
.t-guide table { width: 100%; border-collapse: collapse; }
.t-guide th, .t-guide td {
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.t-guide th { background: var(--panel); font-weight: 700; }
.t-guide code { font-size: .95em; overflow-wrap: anywhere; }
.t-guide pre {
  overflow-x: auto;
  padding: .8rem 1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: .35rem;
}
.t-guide pre code { white-space: pre; overflow-wrap: normal; }
.t-guide .guide-note {
  padding: .8rem 1rem;
  border-left: 4px solid var(--brand-orange, #E87722);
  background: var(--panel);
}
.guide-related { border-top: 1px solid var(--border); margin-top: 2rem; }
/* Match the shared menu markup while keeping the mobile header compact. */
@media (max-width: 1024px) {
  .t-guide-page .t-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
  }
  .t-guide-page .t-brand { flex: 1; min-width: 0; }
  .t-guide-page .t-brand .t-subtitle { font-size: .65rem; }
  .t-guide-page .t-menu-btn { display: inline-block; }
  .t-guide-page .t-menu { display: none; width: 100%; }
  .t-guide-page .t-nav-toggle:checked ~ .t-menu { display: flex; }
}
@media (max-width: 600px) {
  .t-guide th, .t-guide td { padding: .5rem; }
  .t-guide h1 { font-size: 1.8rem; }
}