/* tg-figures.css — the SHARED TypeGlish figure components, used by the blog (blog.css @imports
   this), the docs (shipped in docs-theme/ for raw-HTML MDX embeds), and any future surface.
   Components: .t-* syntax tokens · .sqg/.sqa squiggles · .cfig code figure · .ifig image figure ·
   .dfig diagram figure (.flow/.fnode/.farr/.dstack/.dcols/.dgrp) · .fnote field note · .pq pull
   quote · <tg-hero> plates (+ og share-card variant; logic in blog-hero.js / tg-hero.js).
   Requires the token vars from styles.css; local fallbacks below keep it standalone-safe. */
:root{--ink:#12233E;--cream:#FBF6EC;--hair:rgba(18,35,62,.22);--hair2:rgba(18,35,62,.5);--mut:#44536E;--mut2:#67789A}
/* ---- syntax tokens (shared with landing) ---- */
.t-sec{color:var(--code-section);font-weight:700}.t-imp{color:var(--code-import);font-weight:700}.t-op{color:var(--code-operator)}.t-str{color:var(--code-string)}.t-dec{color:var(--code-declaration);font-weight:700}.t-mod{color:var(--code-modal);font-weight:700}.t-neg{color:var(--code-negate);font-weight:700}.t-ctl{color:var(--code-control);font-weight:700}.t-ref{color:var(--code-ref)}.t-com{color:var(--code-comment);font-style:italic}.t-doc{color:var(--code-doc);font-style:italic}
.sqg{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 3.2 Q3.5 0.6 7 3.2 T14 3.2' fill='none' stroke='%23F04E2C' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100%/14px 6px;padding-bottom:3px}
.sqa{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 3.2 Q3.5 0.6 7 3.2 T14 3.2' fill='none' stroke='%23D9860A' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 100%/14px 6px;padding-bottom:3px}
.cfig{border:1px solid var(--hair2);margin:26px 0 0}
.cfig .cap,.dfig .cap,.ifig .cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 8px 14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--hair)}
.cfig .cap .no,.dfig .cap .no,.ifig .cap .no{color:var(--coral-600);font-weight:700}.cfig .cap .yes,.dfig .cap .yes,.ifig .cap .yes{color:var(--palm-600);font-weight:700}.cfig .cap .warn,.dfig .cap .warn,.ifig .cap .warn{color:var(--gold-700,#AE6A05);font-weight:700}
.cfig pre{margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.85;white-space:pre;color:var(--code-text);padding:18px 22px;background:var(--code-bg);overflow-x:auto}
.ccopy{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:none;border:1px solid var(--hair2);border-radius:3px;color:var(--ink);padding:5px 10px;cursor:pointer}
.ccopy:hover{border-color:var(--ink)}.ccopy.did{color:var(--palm-600);border-color:var(--palm-600)}
.cnote{padding:10px 14px;border-top:1px dotted var(--hair2);font-size:13px;line-height:1.55;color:var(--mut)}
.fnote{border:1.5px dotted var(--hair2);background:var(--code-bg);padding:18px 22px;margin:30px 0 0}
.fnote .fl{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean-700);display:block;margin-bottom:8px}
.fnote p{margin:0;font-size:14.5px;line-height:1.65;color:var(--mut)}
.pq{border-left:2px solid var(--ink);padding:6px 0 6px 26px;margin:34px 0 0;font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.35;letter-spacing:-.015em}
/* ---- image figures (screenshots) ---- */
.ifig{border:1px solid var(--hair2);margin:26px 0 0}
.ifig .ibody{padding:14px;background:var(--code-bg)}
.ifig .ibody img,.ifig .ibody image-slot{display:block;width:100%;border-radius:6px;border:1px solid var(--hair2);overflow:hidden}
.ifig .ibody image-slot{min-height:300px}
/* ---- hero plates ---- */
tg-hero{display:block;margin:30px 0 0;padding:5px}
tg-hero .hframe{border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:4px;background:var(--cream)}
tg-hero .hin{display:flex;align-items:center;justify-content:space-between;gap:38px;padding:38px 44px 16px}
tg-hero .hkick{display:block;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ocean-700);margin-bottom:12px}
tg-hero .htitle{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4.2vw,46px);letter-spacing:-.035em;line-height:1.04;max-width:20ch;text-wrap:balance}
tg-hero .hicons{display:flex;gap:26px;align-items:flex-end;color:var(--ink);flex:none}
tg-hero .hground{display:block;width:100%;height:34px;color:var(--ink)}
tg-hero[og]{padding:0}
tg-hero[og] .ogwrap{position:relative;width:100%;aspect-ratio:1200/630;overflow:hidden}
tg-hero .ogcard{position:absolute;left:0;top:0;width:1200px;height:630px;background:var(--cream);transform-origin:0 0;font-family:var(--font-sans);color:var(--ink)}
tg-hero .ogf1{position:absolute;inset:14px;border:1px solid var(--ink)}
tg-hero .ogf2{position:absolute;inset:24px;border:2px solid var(--ink)}
tg-hero .ogin{position:absolute;left:70px;top:118px;right:70px}
tg-hero .ogin .hkick{font-size:16px;letter-spacing:.22em;margin-bottom:20px}
tg-hero .ogtitle{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;line-height:1.12;max-width:760px;text-wrap:balance}
tg-hero .ogicons{position:absolute;right:84px;bottom:132px;display:flex;gap:40px;align-items:flex-end;color:var(--ink)}
tg-hero .ogground{position:absolute;left:24px;right:24px;bottom:106px;border-top:1.5px solid rgba(18,35,62,.45)}
tg-hero .ogwave{position:absolute;bottom:78px;color:var(--ink);opacity:.5}
tg-hero .ogfoot{position:absolute;left:70px;right:70px;bottom:38px;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:16px;color:var(--mut2)}
@media (max-width:640px){tg-hero{padding:4px}tg-hero .hin{padding:22px 20px 8px;gap:18px}tg-hero .hicons svg{height:54px}.ifig .ibody{padding:10px}}
/* ---- diagram figures: process flows + architectures ---- */
.dfig{border:1px solid var(--hair2);margin:26px 0 0}
.dfig .dbody{padding:28px 14px;background:var(--code-bg);overflow-x:auto}
.flow{display:flex;align-items:center;min-width:min-content}
.flow+.flow{margin-top:18px}
.fnode{border:1.5px solid var(--ink);padding:10px 13px;text-align:center;background:var(--cream);flex:none;min-width:0}
.fnode .fn{font-family:var(--font-display);font-weight:600;font-size:14px;letter-spacing:-.01em;display:block;line-height:1.3}
.fnode .fm{font-family:var(--font-mono);font-size:12px;font-weight:500;display:block;line-height:1.5}
.fnode .fs{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--mut2);display:block;margin-top:3px}
.fnode.ok{border-color:var(--palm-600)}.fnode.ok .fn,.fnode.ok .fm{color:var(--palm-600)}
.fnode.bad{border-color:var(--coral-600)}.fnode.bad .fn,.fnode.bad .fm{color:var(--coral-600)}
.fnode.dim{border:1.5px dashed var(--hair2);background:transparent}
.farr{flex:1 0 30px;min-width:30px;height:1.5px;background:var(--ink);position:relative;margin:0 3px}
.farr::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink);transform:translateY(-50%) rotate(45deg)}
.farr .fl{position:absolute;left:50%;transform:translateX(-50%);bottom:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--mut2);white-space:nowrap;background:var(--code-bg);padding:0 4px}
.farr.plain::after{display:none}
.flow.v{flex-direction:column;align-items:center}
.flow.v .farr{flex:none;width:1.5px;height:30px;min-width:0;margin:3px 0}
.flow.v .farr::after{right:auto;left:50%;top:auto;bottom:0;transform:translateX(-50%) rotate(135deg)}
.flow.v .farr .fl{left:auto;right:auto;bottom:auto;top:50%;transform:translate(12px,-50%)}
.dstack{display:flex;flex-direction:column;gap:10px;flex:none}
.dcols{display:flex;gap:26px;align-items:stretch;min-width:min-content}
.dgrp{border:1.5px dashed var(--hair2);padding:22px 18px 18px;position:relative;flex:1;min-width:min-content}
.dgrp>.gl{position:absolute;top:-8px;left:12px;background:var(--code-bg);padding:0 8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
@media (max-width:640px){.dfig .dbody{padding:20px 14px}.fnode{padding:8px 12px}}