/* A readable guide on DS1's squares; the component illustrations are Aa's real DS1 buttons. */
.docs.guide { --ds-sf: var(--sf); max-width: none; padding: 0; }
.docs.guide a { color: inherit; text-underline-offset: calc(3px * var(--sf)); }
.docs.guide .docs-top > a:last-child { margin-left: auto; }
.guide-layout { display: grid; grid-template-columns: calc(10 * var(--u)) minmax(0, 1fr); gap: calc(2 * var(--u)); max-width: calc(68 * var(--u)); padding: calc(2 * var(--u)) var(--u) calc(4 * var(--u)); margin-inline: auto; }
.docs.guide .docs-top, .docs.guide .docs-foot { max-width: calc(68 * var(--u)); }
.guide-nav { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) / 2); padding-top: var(--u); }
.guide-nav a { text-decoration: none; color: var(--ds-text-color-muted); }
.guide-nav [aria-current] { color: var(--ds-text-color); text-decoration: underline; text-underline-offset: calc(4px * var(--sf)); }
.guide-content { min-width: 0; }
.guide-intro, .guide-contents { max-width: calc(32 * var(--u)); }
.guide-with-screen { display: grid; grid-template-columns: calc(14 * var(--u)) minmax(0, calc(32 * var(--u))); align-items: start; gap: calc(2 * var(--u)); margin-top: calc(3 * var(--u)); }
.guide-steps > .guide-section:first-child { margin-top: 0; }
.guide-phone-example { position: sticky; top: var(--u); margin: 0; }
.guide-phone { position: relative; width: 100%; aspect-ratio: 910 / 1855; }
.guide-phone-screen { position: absolute; inset: 1.7% 5.4% 1.7%; overflow: hidden; border-radius: 12% / 6%; background: white; }
.guide-phone-screen img { display: block; width: 100%; height: 100%; object-fit: fill; }
.guide-phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.guide-phone-example figcaption, .guide-example figcaption { font-size: calc(12px * var(--sf)); line-height: var(--u); color: var(--ds-text-color-muted); margin-top: var(--u); }
.guide-sample-note { display: block; margin-top: calc(var(--u) / 2); }
.guide-example { margin: calc(2 * var(--u)) 0 0; max-width: calc(22 * var(--u)); }
.guide-closeup { overflow: hidden; background: white; border: 1px solid var(--rule); border-radius: calc(4px * var(--sf)); }
.guide-closeup img { display: block; width: 100%; height: auto; }
.guide-closeup--currency { aspect-ratio: 390 / 120; }
.guide-closeup--currency img { margin-top: -55%; }
.guide-closeup--balance { aspect-ratio: 390 / 280; }

.guide-intro h1 { font-family: var(--typeface-medium); font-size: calc(20px * var(--sf)); line-height: calc(2 * var(--u)); margin: 0 0 var(--u); }
.guide-intro p { color: var(--ds-text-color-muted); }
.guide-contents { display: flex; flex-wrap: wrap; gap: calc(var(--u) / 2) var(--u); margin-top: var(--u); }
.guide-contents a { color: var(--ds-text-color-muted); }
.guide-section { margin-top: calc(3 * var(--u)); scroll-margin-top: var(--u); }
.guide-section h2 { font-family: var(--typeface-medium); font-size: calc(17px * var(--sf)); line-height: var(--u); margin: 0 0 var(--u); }
.guide-section p + p { margin-top: var(--u); }
.guide .aa-partial { display: inline-block; vertical-align: baseline; max-width: 100%; }
.guide .aa-partial > ds-button { pointer-events: none; }
.guide-note { margin-top: calc(3 * var(--u)); color: var(--ds-text-color-muted); font-size: calc(10px * var(--sf)); }
.guide-skip { position: absolute; inset-inline-start: var(--u); top: calc(-3 * var(--u)); }
.guide-skip:focus { top: var(--u); background: var(--ds-paper); z-index: 5; }
@media (max-width: 1100px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: calc(2 * var(--u)); }
  .guide-nav { flex-direction: row; flex-wrap: wrap; gap: calc(var(--u) / 2) var(--u); padding-top: 0; }
  .guide .docs-top { flex-wrap: wrap; height: auto; min-height: calc(2 * var(--u)); padding-block: calc(var(--u) / 2); }
}
@media (max-width: 680px) {
  .guide-with-screen { grid-template-columns: minmax(0, 1fr); }
  .guide-phone-example { position: static; width: calc(14 * var(--u)); max-width: 100%; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }