/* Page “Guide”: contents list and sections. .os-guide-body also styles the ? dialogs of the start page. */

/* one long page: sticky contents on the left, a card per section; text and picture side by side on wide screens */
.os-guide { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem; max-width: 84rem; margin: 0 auto; padding: 1.5rem; align-items: start; }
.os-guide-nav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 2px; padding: 0.75rem; }
.os-guide-nav-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); padding: 0.25rem 0.75rem 0.5rem; }
.os-guide-tab { display: flex; align-items: center; min-height: var(--touch-target); padding: 0.375rem 0.75rem; border-radius: var(--radius-control);
  color: var(--ink); font-weight: 500; text-decoration: none; border-left: 3px solid transparent; }
.os-guide-tab:hover { background: var(--surface-content); color: var(--ink); }
.os-guide-tab.is-active { background: var(--surface-content); border-left-color: var(--primary); color: var(--primary); font-weight: 600; }
.os-guide-tab:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.os-doc { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.os-doc-section { background: var(--surface-content); padding: 1.75rem 2rem; line-height: 1.6; scroll-margin-top: 1rem; }
.os-doc-section.has-figure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 2rem; align-items: start; }
.os-doc-text { max-width: 42rem; }
.os-doc-text > :last-child { margin-bottom: 0; }
.os-doc-figure { margin: 0; }
.os-doc-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: #fff; }
.os-doc-figure figcaption { margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-muted); }
.os-doc-section.has-figure .os-doc-figure { position: sticky; top: 1rem; }

.os-doc-section h2, .os-guide-body h2 { font-size: 1.375rem; font-weight: 600; margin-bottom: 0.875rem; }
.os-doc-section h3, .os-guide-body h3 { font-size: 1.0625rem; font-weight: 600; margin: 1.25rem 0 0.375rem; }
.os-doc-section code, .os-guide-body code { color: var(--ink); background: #eef1f4; padding: 1px 0.25rem; border-radius: 3px; }
.os-doc-section ol, .os-doc-section ul { padding-left: 1.25rem; }
.os-doc-section li { margin-bottom: 0.25rem; }
.os-guide-body { line-height: 1.6; }

@media (max-width: 1199.98px) {
  .os-doc-section.has-figure { grid-template-columns: 1fr; }
  .os-doc-section.has-figure .os-doc-figure { position: static; max-width: 34rem; }
}
@media (max-width: 899.98px) {
  .os-guide { grid-template-columns: 1fr; padding: 1rem; }
  .os-guide-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .os-guide-nav-title { width: 100%; }
  .os-doc-section { padding: 1.25rem; }
}

/* smartphones (portrait < 576 px, landscape: low screens): the contents become a strip that stays at the top
   and scrolls sideways */
@media (max-width: 575.98px), (max-width: 1023.98px) and (max-height: 500px) {
  .os-guide { padding: 0 0 1rem; gap: 0.75rem; }
  .os-guide-nav { position: sticky; top: 0; z-index: 10; flex-direction: row; flex-wrap: nowrap; gap: 0.375rem; overflow-x: auto;
    padding: 0.5rem 1rem; border-width: 0 0 1px; border-radius: 0; scrollbar-width: none; }
  .os-guide-nav::-webkit-scrollbar { display: none; }
  .os-guide-nav-title { display: none; }
  .os-guide-tab { flex: none; min-height: 2.5rem; padding: 0.375rem 0.875rem; white-space: nowrap; border: 1px solid var(--border); border-radius: 1.25rem;
    background: var(--surface-content); font-size: 0.875rem; }
  .os-guide-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
  .os-doc { padding: 0 0.75rem; gap: 0.75rem; }
  .os-doc-section { padding: 1rem; scroll-margin-top: 4rem; }
  .os-doc-section h2 { font-size: 1.25rem; }
}

/* the ? dialogs of the start page show guide sections */
.os-guide-body.os-guide-body--modal { padding: 0; background: none; }
.os-guide-body--modal h2 { font-size: 1.125rem; margin: 1.25rem 0 0.5rem; }
.os-guide-body--modal h2:first-child { margin-top: 0; }