/* Stone Guest download pages (stoneguest. host and join.<domain>/<study>/stoneguest/).
   Builds on public.css tokens; no external fonts or requests. Works from 360 px. */
.sg-page { max-width: 42rem; margin: 0 auto; }
.tagline { color: var(--muted); font-style: italic; margin-top: -.25rem; }
.sg-page section { margin: 2rem 0; }
.sg-page h4 { margin: 1rem 0 .25rem; font-size: 1rem; }

.sg-cards { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sg-card { background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: .25rem 1rem 1rem; overflow-wrap: anywhere; }
.sg-card.is-suggested { border: 2px solid var(--accent); }
.sg-card h3 { margin-top: .75rem; }
.sg-badge { display: inline-block; margin-left: .25rem; padding: 0 .5rem; border-radius: 999px; font: 600 .8125rem/1.6 var(--sans); background: var(--mint-soft); color: var(--ink); }
.sg-meta { margin: .5rem 0; }
.sg-sha code { font-size: .8125rem; word-break: break-all; }
.sg-notes { white-space: pre-line; }

.sg-tabs { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: .5rem 0 1rem; }
.sg-tabs a { display: inline-block; min-height: 44px; padding: .65rem 1rem; border: 2px solid var(--primary); border-radius: 3px; color: var(--ink); text-decoration: none; font-weight: 600; }
.sg-tabs a[aria-current] { background: var(--primary); color: var(--primary-ink); }
[data-os-panel][hidden] { display: none; }

.sg-two { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.sg-keys { display: grid; grid-template-columns: max-content 1fr; gap: .75rem 1.25rem; align-items: start; }
.sg-keys dt { font-weight: 400; }
.sg-keys dd { margin: 0; align-self: center; }
@media (max-width: 30em) { .sg-keys { grid-template-columns: 1fr; gap: .25rem; } .sg-keys dd { margin-bottom: .75rem; } }
kbd { font: .875rem ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: .05rem .4rem; border: 1px solid var(--muted); border-bottom-width: 2px; border-radius: 3px; background: var(--card); }

.sg-faq { border-bottom: 1px solid var(--rule); padding: .25rem 0; }
.sg-faq summary { cursor: pointer; min-height: 44px; padding: .65rem 0; font-weight: 600; }
.sg-faq p { margin: 0 0 .75rem; }
.sg-origin { border-left: 4px solid var(--mint); padding-left: 1rem; }
.sg-play { font-family: var(--serif); font-size: 1.15rem; }
.sg-page .button { margin-top: .5rem; }