/* Focused app examples used by the documentation pages. */
.doc-app-stage { padding:24px; min-height:0; }
.doc-app-stage .doc-page-shot { max-width:800px; }
.doc-app-detail { width:100%; max-width:734px; padding:22px; background:#faf6ee; border:1px solid rgba(33,55,75,.14); border-radius:12px; }
.doc-app-detail img { display:block; width:100%; height:auto; }
.doc-app-detail.is-share { max-width:448px; padding:0; border:0; background:transparent; }
.doc-app-detail.is-activity { max-width:310px; padding:22px; }
.doc-case-example { width:100%; max-width:700px; padding:26px 28px 10px; background:#faf6ee; border:1px solid rgba(33,55,75,.14); border-radius:12px; color:#21374b; }
.doc-case-example .example-title { font:600 17px/1.4 'General Sans',sans-serif; margin:0; }
.doc-case-example .example-context { font:400 13px/1.5 'General Sans',sans-serif; color:#667587; margin:5px 0 20px; }
.example-row { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:14px; align-items:center; padding:19px 0; border-top:1px solid rgba(33,55,75,.14); }
.example-row svg { width:20px; height:20px; color:#536779; }
.example-row strong { display:block; font:600 15px/1.4 'General Sans',sans-serif; }
.example-row small { display:block; margin-top:4px; font:400 13px/1.5 'General Sans',sans-serif; color:#667587; }
.example-row .example-go { font:500 13px/1.4 'General Sans',sans-serif; color:#426dc4; white-space:nowrap; }
.example-row .example-credit { font:500 12px/1.4 'General Sans',sans-serif; color:#536779; background:#fffdf8; border:1px solid rgba(33,55,75,.14); border-radius:6px; padding:6px 9px; white-space:nowrap; }
.gd-preview-dialog .doc-app-stage { min-height:0; }
.gd-preview-dialog:has(.doc-app-detail), .gd-preview-dialog:has(.doc-case-example) { width:min(1100px,calc(100vw - 32px)); }
.gd-preview-dialog .doc-app-detail { max-width:1000px; }
.gd-preview-dialog .doc-app-detail.is-share { max-width:560px; }
.gd-preview-dialog .doc-app-detail.is-activity { max-width:400px; }
.gd-preview-dialog .doc-case-example { max-width:860px; }
@media(max-width:600px) {
 .doc-app-stage { padding:14px; }
 .doc-app-detail { padding:14px; }
 .doc-case-example { padding:20px 18px 4px; }
 .example-row { grid-template-columns:18px minmax(0,1fr); gap:7px 10px; padding:17px 0; }
 .example-row svg { width:18px; height:18px; }
 .example-row .example-go,.example-row .example-credit { grid-column:2; justify-self:start; }
}

.doc-app-detail.is-case-details { max-width:380px; padding:0; }
.doc-channel-scroll { width:100%; min-width:0; overflow-x:auto; padding-bottom:12px; }
.doc-channel-row { display:flex; width:max-content; align-items:flex-start; gap:24px; }
.doc-channel { flex:none; }
.doc-channel p { font:500 14px/1.5 'General Sans',sans-serif; margin:0 0 12px; }
.doc-channel img { width:100%; height:auto; display:block; border:1px solid var(--gd-rule); border-radius:12px; }
.channel-panel { width:380px; }
.channel-email { width:400px; }
.channel-phone { width:300px; }
.channel-phone img { border:4px solid #21374b; border-radius:30px; }
.doc-account-example { width:100%; max-width:480px; background:#faf6ee; border:1px solid var(--gd-rule); border-radius:16px; padding:30px; }
.doc-account-example .account-wordmark { font:600 15px/1.4 'General Sans',sans-serif; margin:0 0 24px; }
.doc-account-example h3 { font:400 25px/1.3 'Zodiak',serif; margin:0 0 20px; }
.doc-account-example p { font:400 14px/1.6 'General Sans',sans-serif; }
.account-field { margin:16px 0; font:400 14px/1.5 'General Sans',sans-serif; }
.account-field>span { display:block; margin-bottom:6px; }
.account-field>div,.account-paste { padding:12px 14px; border:1px solid var(--gd-rule); border-radius:8px; background:white; color:#667587; }
.account-paste { min-height:110px; font-size:14px; margin:16px 0; }
.account-check { display:flex; align-items:center; gap:10px; }
.account-check>span { display:grid; place-items:center; border:1px solid var(--gd-rule); border-radius:4px; width:18px; height:18px; background:white; }
.account-button { display:inline-flex; justify-content:center; padding:11px 18px; background:#5b87d8; color:white; border-radius:8px; font:500 14px/1.5 'General Sans',sans-serif; margin-top:10px; }
@media(max-width:600px){.doc-account-example{padding:22px}.doc-channel-row{gap:16px}}

.gd-preview-dialog:has(.doc-channel-scroll) { width:min(1504px,calc(100vw - 32px)); }
.gd-preview-dialog .doc-channel-scroll { max-width:1128px; }
.doc-channel-scroll:focus-visible { outline:2px solid #5b87d8; outline-offset:4px; }

/* The overview fits all three products; the expanded view uses native sizes. */
.gd-sequence .doc-channel-row { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.gd-sequence .doc-channel { width:100%; min-width:0; }
.gd-sequence .doc-channel p { font-size:13px; }
@media(max-width:600px) {
 .gd-sequence .doc-channel-row { grid-template-columns:1fr; justify-items:center; gap:24px; }
 .gd-sequence .doc-channel { max-width:380px; }
 .gd-sequence .channel-phone { max-width:300px; }
}