/* Scoped styles for data/share guides and their entry points. */
.data-location { padding:28px 0; border-bottom:1px solid #c6d8db; }
.data-location h2 { font-size:24px; line-height:1.5; margin:16px 0 10px; }
.data-location p { font-size:14px; line-height:1.9; color:#466573; margin:0; }
.use-light-link { display:inline-block; color:#a3edf3; margin-top:24px; font-size:14px; text-underline-offset:5px; }
.share-example { margin:0; min-width:0; }
.share-example figcaption { font-size:12px; line-height:1.8; color:#506875; margin-bottom:16px; }
.share-demo { background:#f7f6f2; border:1px solid #d0dedd; padding:36px; box-shadow:0 18px 40px #0b293a0a; }
.share-demo img { width:116px; height:auto; display:block; }
.share-demo-kicker { color:#157d84; font-size:11px; letter-spacing:.13em; margin:56px 0 14px; }
.share-demo h2 { font-size:26px; line-height:1.5; margin:0; }
.share-demo-distance { font-size:clamp(48px,5.3vw,76px); font-weight:700; line-height:1.3; margin:22px 0 28px; letter-spacing:-.04em; white-space:nowrap; }
.share-demo-distance span { font-size:.48em; margin-left:6px; }
.share-demo dl { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:24px 0; border-top:2px solid #24bfc3; margin:0; }
.share-demo dl>div { display:flex; flex-direction:column; gap:12px; }
.share-demo dt { font-size:12px; color:#486571; }
.share-demo dd { margin:0; font-weight:600; font-size:28px; }
.share-demo dd span { font-size:18px; }
.share-demo-note { font-size:12px; line-height:1.8; color:#506875; margin:18px 0 0; }
.use-sample { padding:28px; background:#092d40; color:#fff; margin:28px 0; }
.use-sample pre { white-space:pre-wrap; overflow-wrap:anywhere; font-family:ui-monospace,monospace; line-height:1.9; font-size:16px; margin:0 0 24px; }
.use-sample button { font:inherit; padding:12px 18px; color:#0b293a; background:#a5edf3; border:0; cursor:pointer; }
.use-sample button:focus-visible,.use-topic-links a:focus-visible { outline:3px solid #178d96; outline-offset:4px; }
.use-sample a { color:#a5edf3; font-size:14px; margin-left:18px; text-underline-offset:5px; }
.use-sample [role=status] { display:block; margin-top:12px; min-height:1.8em; font-size:13px; color:#e1f1f4; }
.use-topic-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:30px 0 8px; }
.use-topic-links a { min-height:142px; border:1px solid #b7cfd2; padding:22px 20px; background:#fbfdfd; text-decoration:none; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.use-topic-links a:hover { transform:translateY(-3px); background:#eef7f7; border-color:#8eb8bd; }
.use-topic-links strong { display:block; color:#103343; font-size:18px; margin-bottom:10px; }
.use-topic-links small { color:#466573; font-size:12px; line-height:1.8; display:block; }
.use-health { scroll-margin-top:30px; }
.use-health h3 { font-size:19px; margin:26px 0 10px; }
.use-health-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 30px; }
.use-health-grid>div { padding:18px 0; border-top:1px solid #ccdadd; }
.use-health-grid dt { font-size:16px; font-weight:600; }
.use-health-grid dd { margin:10px 0 0; font-size:14px; line-height:1.9; }
@media(max-width:800px) {
 .use-topic-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .use-health-grid { grid-template-columns:1fr; }
 .share-demo { padding:26px; }
 .share-demo-kicker { margin-top:40px; }
 .use-sample { padding:22px; }
 .use-sample a { display:block; margin:18px 0 0; }
}
@media(max-width:360px) {
 .use-topic-links { grid-template-columns:1fr; }
 .share-demo-distance { font-size:52px; }
}