/* Docs mock chrome + content styles — shared by all explorations/docs-*.html pages.
   Figure components come from ../tg-figures.css; tokens from ../styles.css. */
*{box-sizing:border-box}html,body{margin:0}
:root{--ink:#12233E;--cream:#FBF6EC;--hair:rgba(18,35,62,.22);--hair2:rgba(18,35,62,.5);--mut:#44536E;--mut2:#67789A}
body{background:var(--cream);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono)}
a{color:var(--ink)}a:hover{color:var(--ocean-700)}
/* navbar */
td-nav{display:block;position:sticky;top:0;z-index:40}
td-nav .nav{background:var(--cream);border-bottom:1.5px solid var(--ink)}
td-nav .navin{max-width:1440px;margin:0 auto;padding:13px 32px 13px 22px;display:flex;align-items:center;gap:22px}
/* tab bar (below the header) */
td-tabs{display:block;background:var(--cream);border-bottom:1px solid var(--hair)}
td-tabs .tabsin{max-width:1440px;margin:0 auto;padding:0 22px;display:flex;gap:2px}
td-tabs a{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--mut2);padding:11px 13px;border-bottom:2px solid transparent;margin-bottom:-1px}
td-tabs a:hover{color:var(--ink)}
td-tabs a.on{color:var(--ink);border-bottom-color:var(--ink)}
td-nav .brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
td-nav .brand svg{height:22px;width:auto;display:block}
td-nav .wm{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.03em}
td-nav .wm .docs{color:var(--mut2);font-weight:500;margin-left:8px;font-size:15px}
td-nav .search{flex:1;max-width:420px;display:flex;align-items:center;gap:10px;border:1px solid var(--hair2);border-radius:4px;padding:8px 14px;font-family:var(--font-mono);font-size:12px;color:var(--mut2);cursor:pointer}
td-nav .search:hover{border-color:var(--ink)}
td-nav .search .k{margin-left:auto;border:1px solid var(--hair);border-radius:3px;padding:1px 6px;font-size:10.5px}
td-nav .navr{margin-left:auto;display:flex;align-items:center;gap:16px}
td-nav .gh{font-family:var(--font-mono);font-size:11.5px;text-decoration:none;border:1.5px solid var(--hair2);border-radius:4px;padding:8px 13px}
td-nav .gh:hover{border-color:var(--ink)}
td-nav .cta{background:var(--ink);color:var(--cream);font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:4px;text-decoration:none;border:1.5px solid var(--ink)}
td-nav .cta:hover{background:transparent;color:var(--ink)}
/* The docs use their own minimal <td-nav> masthead (logo + Docs on the left, search on the far right) —
   not the shared marketing <tg-header>. The td-nav .navin above aligns to the 1440 shell + 22px sidebar. */
/* shell */
.shell{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:260px minmax(0,1fr) 220px;gap:0}
td-side{display:contents}
.side{border-right:1px solid var(--hair);padding:30px 22px 60px;position:sticky;top:62px;height:calc(100vh - 62px);overflow-y:auto}
.sgrp{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin:26px 0 10px}
.sgrp:first-child{margin-top:0}
.side a{display:block;font-size:13.5px;color:var(--mut);text-decoration:none;padding:6px 10px;border-left:1.5px solid transparent}
.side a:hover{color:var(--ink);background:rgba(18,35,62,.04)}
.side a.here{color:var(--ink);font-weight:600;border-left-color:var(--ink)}
/* content column */
.main{padding:44px 56px 90px;min-width:0}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean-700)}
.main h1{font-family:var(--font-display);font-weight:700;font-size:38px;letter-spacing:-.035em;line-height:1.05;margin:14px 0 0;border-bottom:1.5px solid var(--ink);padding-bottom:18px}
.lede{font-size:16.5px;line-height:1.65;color:var(--mut);margin:20px 0 0;max-width:62ch}
.main h2{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.02em;margin:46px 0 0;border-bottom:1px solid var(--hair);padding-bottom:10px;scroll-margin-top:80px}
.main h3{font-family:var(--font-display);font-weight:600;font-size:17px;margin:28px 0 0}
.main p{font-size:15px;line-height:1.8;color:var(--mut);margin:18px 0 0;max-width:70ch}
.main ul,.main ol{margin:16px 0 0;padding-left:22px;font-size:15px;line-height:1.7;color:var(--mut);max-width:70ch}
.main li{margin-top:6px}.main li::marker{color:var(--ocean-700);font-weight:700}
code.inl{font-family:var(--font-mono);font-size:.9em;background:var(--cream-2,#F5EEDD);border:1px solid var(--hair);border-radius:3px;padding:1px 6px;color:var(--ink);font-weight:500;line-height:1.35;white-space:nowrap}
/* callouts (Mintlify Note/Info/Tip/Warning/Check targets) */
.co{display:flex;gap:12px;border:1.5px dotted var(--hair2);background:var(--code-bg);padding:14px 18px;margin:24px 0 0;font-size:14px;line-height:1.78;color:var(--mut);max-width:760px}
.co .ic{font-family:var(--font-mono);font-weight:700;flex:none}
.co.info{border-color:var(--ocean-700)}.co.info .ic{color:var(--ocean-700)}
.co.warn{border-style:solid;border-color:var(--coral-600)}.co.warn .ic{color:var(--coral-600)}
.co.tip,.co.check{border-color:var(--palm-600)}.co.tip .ic,.co.check .ic{color:var(--palm-600)}
/* Mintlify-style code block / code group */
.cb{border:1px solid var(--hair2);margin:24px 0 0;max-width:760px}
.cb .tabs{display:flex;gap:0;background:var(--cream-2,#F5EEDD);border-bottom:1px solid var(--hair);font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut)}
.cb .tabs span{padding:9px 16px;border-right:1px solid var(--hair);cursor:pointer}
.cb .tabs span.on{background:var(--code-bg);color:var(--ink);font-weight:700}
.cb .tabs .cp{margin-left:auto;border-right:0}
.cb pre{margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.8;white-space:pre;color:var(--code-text);padding:18px 22px;background:var(--code-bg);overflow-x:auto}
.cb pre .out{color:var(--mut2)}
.cb pre .ok{color:var(--palm-600);font-weight:700}.cb pre .bad{color:var(--coral-600);font-weight:700}
/* steps */
.steps{margin:24px 0 0;max-width:760px}
.stp{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:0 0 26px;position:relative}
.stp>div:last-child{min-width:0}
.stp::before{content:"";position:absolute;left:16px;top:36px;bottom:2px;border-left:1.5px solid var(--hair)}
.stp:last-child::before{display:none}
.stp .n{width:34px;height:34px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--ocean-700);background:var(--cream)}
.stp h3{margin:6px 0 4px}
.stp p{margin:0;font-size:14px}
.stp .cb,.stp .co{max-width:100%}
/* tables */
.tw{max-width:760px;margin:24px 0 0;overflow-x:auto}
.main table{border-collapse:collapse;margin:0;width:100%;max-width:100%}
.main th{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);text-align:left;border-bottom:1.5px solid var(--ink);padding:8px 14px 8px 0}
.main td{border-bottom:1px solid var(--hair);padding:11px 14px 11px 0;font-size:14px;line-height:1.9;color:var(--mut);vertical-align:top;overflow-wrap:break-word;min-width:0}
.main td:first-child{font-family:var(--font-mono);font-weight:700;color:var(--ink)}
.main td:first-child code.inl{white-space:normal}
.main td .lvl{font-size:11px;font-family:var(--font-mono);color:var(--mut2)}
/* card grid (Columns of Cards) */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 0;max-width:760px}
.dcard{border:1px solid var(--hair2);padding:18px 20px;text-decoration:none;display:block;background:var(--cream)}
.dcard:hover{border-color:var(--ink);box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--ink);color:var(--ink)}
.dcard .ci{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--ocean-700)}
.dcard h3{margin:8px 0 6px;font-size:16.5px}
.dcard p{margin:0;font-size:13.5px;line-height:1.55}
/* accordion / expandable */
details.acc{border:1px solid var(--hair2);margin:14px 0 0;max-width:760px;background:var(--cream)}
details.acc+details.acc{border-top:0;margin-top:0}
.acc summary{cursor:pointer;padding:13px 18px;font-family:var(--font-display);font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--font-mono);font-weight:700;color:var(--mut2)}
details[open].acc summary::after{content:"–"}
.acc .accb{padding:0 18px 16px;font-size:14px;line-height:1.65;color:var(--mut)}
.acc .accb p{margin:8px 0 0;font-size:14px}
/* param fields (API-style reference rows) */
.param{border-bottom:1px solid var(--hair);padding:16px 0;max-width:760px}
.param:first-of-type{border-top:1.5px solid var(--ink)}
.param .ph{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.param .pf{font-family:var(--font-mono);font-size:13.5px;font-weight:700;color:var(--ink)}
.param .pt{font-family:var(--font-mono);font-size:10.5px;color:var(--mut2);border:1px solid var(--hair);border-radius:3px;padding:1px 7px}
.param .pr{font-family:var(--font-mono);font-size:10.5px;color:var(--coral-600);font-weight:700}
.param p{margin:7px 0 0;font-size:14px}
/* prev/next cards */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:52px 0 0;max-width:760px}
.pn a{border:1px solid var(--hair2);padding:16px 18px;text-decoration:none;display:block}
.pn a:hover{border-color:var(--ink);box-shadow:0 0 0 3px var(--cream),0 0 0 4px var(--ink)}
.pn .d{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);display:block;margin-bottom:6px}
.pn .t{font-family:var(--font-display);font-weight:600;font-size:15px}
.pn a.nx{text-align:right}
/* right-rail toc */
.toc{padding:44px 28px 0;position:sticky;top:62px;height:calc(100vh - 62px);font-size:12.5px}
.toc .th{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin:0 0 12px}
.toc a{display:block;text-decoration:none;color:var(--mut);padding:4px 0 4px 12px;border-left:1.5px solid var(--hair);line-height:1.4}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);font-weight:600;border-left-color:var(--ink)}
tg-hero{max-width:760px}
@media (max-width:1100px){.shell{grid-template-columns:240px minmax(0,1fr)}.toc{display:none}}
@media (max-width:860px){.shell{grid-template-columns:1fr}.side{display:none}.main{padding:34px 24px 70px}td-nav .search{display:none}.cards{grid-template-columns:1fr}}