/* ===== v93 · Integrations · API · MCP, and Data sources (3 Oct 2026, Integrations builder — _reviews/2026-10-03-integrations/BRIEF.md).
   Inside the settings frame (v90-settings.css): the catalog has a category rail with counts beside a grid of cards; cards are surfaces (radius 18),
   logos sit on 28px tiles (radius 8), rows inside cards keep the kit's 48px rhythm. Tokens only, so light and dark follow. Not iOS: tabs are
   underlines (ui/lboard.js), choices are menus, radio rows or switches — never a capsule segmented control. ===== */

/* ---------- logos (lib/brandlogos.js) ---------- */
.bl{display:inline-grid;place-items:center;flex:none;color:var(--bl,var(--fg-2));line-height:1;font-weight:var(--w-semibold);letter-spacing:-.01em}
.bl.is-tile{border-radius:var(--r-8);background:var(--lvl-0);box-shadow:inset 0 0 0 1px var(--bd)}
.bl.is-tile[style*="width: 24px"],.bl.is-tile[style*="width: 20px"],.bl.is-tile[style*="width: 18px"],.bl.is-tile[style*="width: 16px"]{border-radius:var(--r-6)}
.bl.is-bare{background:none;box-shadow:none}
.bl svg{display:block}
.bl.is-letter{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--bd);color:var(--fg-2)}
.bl.is-own{background:var(--bg-3);color:var(--fg-2);box-shadow:none}
.bl.is-multi{color:var(--fg)}
.bl.is-tile.is-lt{background:var(--bl);box-shadow:none;color:var(--fixed-ink)}
:root[data-theme="dark"] .bl.is-dk{color:var(--fg)}
:root[data-theme="dark"] .bl.is-tile{background:var(--lvl-1)}
:root[data-theme="dark"] .bl.is-tile.is-lt{background:var(--lvl-1);color:var(--bl)}
:root[data-theme="dark"] .bl.is-letter,:root[data-theme="dark"] .bl.is-own{background:var(--lvl-2)}
/* v97 (logo completion) — image logos (brandlogos.js IMG): a mark at 62% of its tile · "full" an opaque square icon that is the tile, with the
   tile's hairline drawn over its edge · "chip" a dark mark that sits on a light chip in dark mode */
.bl.is-img{position:relative}
.bl img{display:block;object-fit:contain;max-width:none}
.bl.is-img.is-full{overflow:hidden}
.bl.is-img.is-full img{width:100%;height:100%}
.bl.is-tile.is-img.is-full::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--bd);pointer-events:none}
.bl.is-bare.is-img.is-full{border-radius:22%}
/* loop 2 (IN-27): no bright stickers in dark mode — a dark mark is drawn in one light colour on the dark tile (its own shape, as Simple Icons' dark
   marks are); an icon printed on white is turned to a dark tile with its hues kept; a light mark sits on a grey plate in light mode; a small file is
   drawn at its own size, centred, never stretched */
/* D07 (design review, 7 Oct): a logo is never inverted by a filter — a dark mark, or an icon printed on white, sits on a small LIGHT plate in dark mode
   (its official colours kept); a bare logo gets the plate as a 2px halo, so nothing moves */
:root[data-theme="dark"] .bl:is(.is-chip,.is-inv){background:var(--plate);box-shadow:none}
:root[data-theme="dark"] .bl.is-bare:is(.is-chip,.is-inv){border-radius:var(--r-4);box-shadow:0 0 0 2px var(--plate)}
.bl.is-tile.is-plate{background:var(--bg-4)}
:root[data-theme="dark"] .bl.is-tile.is-plate{background:var(--lvl-1)}
.bl.is-img.is-small img{border-radius:22%}
svg.ig-ic{display:inline-block;vertical-align:-2px;color:var(--fg-3)}
.bl-nm{display:inline-flex;align-items:center;gap:6px;min-width:0;vertical-align:middle}
.bl-nm > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tbl-r .k.bl-nm{display:flex;min-width:0;max-width:100%;overflow:hidden}
.tbl-r .k.bl-nm > span:last-child{white-space:nowrap}
.k.ai-nm > .bl{flex:none}

/* the logo pass on other pages: inside Growth's provenance word, a table header, a source name */
.gr-pv .bl{margin-right:4px}
.hs-rl > .bl{display:inline-grid;margin:0 5px 0 2px;vertical-align:-2px}
.rp-ul li > .bl{display:inline-grid;margin-right:6px;vertical-align:-2px}
.tbl-h .bl-nm{gap:5px}

/* ---------- the head's extras ---------- */
.ig-sum{margin:-6px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ig-pol{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:-8px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}   /* night P6 (S10): who may connect, under the counts */
.ig-pol > svg{flex:none}
.ig-sum .stg-a{font-size:var(--t-co);color:var(--warn-ink)}   /* v103 (AX7, audit C2): was the orange fill, 2.12:1 */
.ig-for{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 14px;border-radius:var(--r-12);background:color-mix(in srgb,var(--c-blue) 7%,var(--bg));font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.ig-for svg{flex:none;color:var(--c-blue)}
.ig-for .stg-a{margin-left:auto}
.ig-h1{display:inline-flex;align-items:center;gap:12px;min-width:0}
.ig-h1 > span:last-child{min-width:0}

/* ---------- the hub: rail + main ---------- */
.ig-hub{display:grid;grid-template-columns:196px minmax(0,1fr);column-gap:24px;align-items:start;margin-top:2px}
.ig-ri{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:var(--r-8);font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg-2);white-space:nowrap;transition:var(--tr-ui)}
.ig-ri svg{flex:none;color:var(--fg-3)}
.ig-ri-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ig-ri-n{flex:none;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);font-variant-numeric:tabular-nums}
@media (hover:hover){.ig-ri:hover{background:var(--hover);color:var(--fg)}}
.ig-ri.is-on{background:var(--selected);color:var(--fg);font-weight:var(--w-semibold)}
.ig-ri.is-on svg,.ig-ri.is-on .ig-ri-n{color:var(--fg)}
.ig-main{min-width:0;display:flex;flex-direction:column;gap:18px}

/* the toolbar: one search, then the filters */
.ig-tools{display:flex;flex-direction:column;gap:10px}
.ig-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:var(--r-full);background:var(--lvl-0);box-shadow:inset 0 0 0 1px var(--bd-2);color:var(--fg-3);transition:var(--tr-ui)}
.ig-search:focus-within{box-shadow:inset 0 0 0 1px var(--bd-2);outline:2px solid var(--ring);outline-offset:2px}   /* v103 (AX4): the one ring */
.ig-search input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font:inherit;font-size:var(--t-body);color:var(--fg)}
.ig-search input::placeholder{color:var(--fg-4)}
.ig-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ig-filters .stg-sel{min-width:0;max-width:240px}
.ig-filters .stg-ck{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ig-clear{font-size:var(--t-co)}

/* groups and the grid of cards */
.ig-grp{display:flex;flex-direction:column;gap:10px;scroll-margin-top:calc(var(--top-h) + 12px)}
.ig-grp-hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:0 2px}
.ig-grp-hd h2{margin:0;font-size:var(--t-hl);line-height:var(--lh-hl);font-weight:var(--w-semibold);color:var(--fg)}
.ig-grp-hd .n{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ig-grp-a{font-size:var(--t-co)}
.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
/* loop 2 (IG5 · IN-7 · IN-8): the catalog card on the card system — padding 22 (logo at +23), the name wraps to two lines, nothing inside is cut */
.ig-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:22px 22px 16px;border:1px solid var(--bd-tl);border-radius:var(--r-card);background:var(--lvl-0);box-shadow:var(--sh-tiny);transition:var(--tr-ui)}
@media (hover:hover){.ig-card:hover{box-shadow:var(--sh-low);border-color:var(--line-strong)}}
.ig-card:focus-within{border-color:var(--bd-2)}
.ig-card.is-off .ig-card-d{color:var(--fg-3)}
.ig-card-hd{display:flex;align-items:flex-start;gap:9px;min-width:0}   /* the card system: a 24 tile at +23, the name at +56 */
.ig-card-hd > .bl{margin-top:-1px}
.ig-card-t{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.ig-card-t > span{font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);overflow-wrap:anywhere}
.ig-card .ig-card-a{display:block;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;text-wrap:balance}
.ig-st{display:inline-flex;align-items:flex-start;gap:6px;font-weight:var(--w-medium)}
.ig-st i{width:7px;height:7px;margin-top:calc((1lh - 7px) / 2);border-radius:var(--r-full);background:var(--fg-4);flex:none}
.ig-st.is-green{color:var(--pos-ink)}.ig-st.is-green i{background:var(--c-green)}   /* v103 (AX7, audit C2): the word in ink, the dot in the fill */
.ig-st.is-orange{color:var(--warn-ink)}.ig-st.is-orange i{background:var(--c-orange)}
.ig-st.is-gray{color:var(--fg-3)}
.ig-st.is-blue{color:var(--info-ink)}.ig-st.is-blue i{background:var(--c-blue)}   /* loop 2: partly paused — it retries by itself (ink token, as AX7) */
.ig-st.is-red{color:var(--neg-ink)}.ig-st.is-red i{background:var(--c-red)}
.ig-card-a{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);overflow:hidden;text-overflow:ellipsis;border-radius:var(--r-4)}
.ig-card .ig-card-a::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.ig-card .ig-card-a:focus-visible{outline:none;box-shadow:none}   /* v103 (AX13 C1): only inside a card, where the card draws the ring — a list's names keep theirs */
.ig-card .ig-card-a:focus-visible::after{outline:2px solid var(--ring);outline-offset:-1px}
.ig-card-r{position:relative;z-index:1;flex:none;display:flex;align-items:center}
.ig-card-d{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2);text-wrap:pretty}
.ig-card-inc{margin:-4px 0 0;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3)}
/* what it can do: one row of icons — each says its words in a tooltip and to a screen reader */
.ig-card-mk{display:flex;align-items:center;gap:10px;color:var(--fg-3)}
.ig-mk{position:relative;z-index:1;display:inline-grid;place-items:center;width:18px;height:18px;color:var(--fg-3);cursor:help}
.ig-mk svg{display:block}
.ig-card-ft{display:flex;align-items:center;gap:6px;min-width:0;margin-top:auto;padding-top:12px;border-top:1px solid var(--ln-3)}
.ig-card.is-build .ig-card-d{min-height:0}
.ig-uses{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}
.ig-uses .stg-uc{white-space:nowrap}
.ig-card-ft > .ig-card-r{margin-left:auto}
.ig-mark{display:inline-flex;align-items:center;gap:4px;flex:none;font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);white-space:nowrap}
.ig-mark svg{flex:none}
.ig-mark span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.ig-card-ft .ig-mark{min-width:0;flex:0 1 auto}
.ig-pubn.is-d{color:var(--fg-3)!important}

/* "Recommended" row */
.ig-start{display:flex;flex-direction:column;gap:10px}
.ig-start-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:8px}   /* D11: fewer columns before a name wraps many lines */
.ig-start-i{position:relative;display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border-radius:var(--r-12);background:var(--lvl-0);box-shadow:inset 0 0 0 1px var(--bd)}
.ig-start-t{flex:1;display:flex;flex-direction:column;min-width:0}
.ig-start-t > span{font-size:var(--t-sh);line-height:var(--lh-sh);color:var(--fg-3);overflow-wrap:break-word}
.ig-start-i .ig-card-a{font-size:var(--t-body);line-height:var(--lh-body);white-space:normal;overflow:visible;text-overflow:clip}   /* loop 2 (IN-7): names wrap, never cut */
/* night P6 (S6): one row per provider — several sites share a row and Connect asks which; "and N more" after 6 */
.ig-start-i .ig-st-pick{flex:none}
.ig-start-more{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
/* night P6 (S11): planned providers fold under the ones that work today, per category */
.ig-later{margin-top:12px}
.ig-later > .ig-grid{margin-top:10px}
.ig-none{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}

/* empty and "Can't find it?" */
.ig-empty{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;padding:18px 20px;border-radius:var(--r-card);background:var(--lvl-0);box-shadow:inset 0 0 0 1px var(--bd);color:var(--fg-2)}
.ig-empty > svg{flex:none;margin-top:2px;color:var(--fg-3)}
.ig-empty b{display:block;font-weight:var(--w-semibold);color:var(--fg)}
.ig-empty p{margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ig-empty-b{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.ig-cant{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding:16px 20px;border-radius:var(--r-card);background:var(--lvl-1);box-shadow:inset 0 0 0 1px var(--bd-tl)}
.ig-cant-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.ig-cant-t b{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.ig-cant-t span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ig-cant-b{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- one provider ---------- */
.ig-val{display:inline;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);text-wrap:pretty}
.ig-val svg{vertical-align:-2px;color:var(--fg-3)}
.ig-note{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--r-12);background:color-mix(in srgb,var(--c-blue) 7%,var(--bg));font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.ig-note > svg{flex:none;margin-top:2px;color:var(--c-blue)}
.ig-note b{font-weight:var(--w-semibold);color:var(--fg)}
.ig-note > .stg-a{margin-left:auto;flex:none}
.ig-note > span .stg-a{white-space:normal;overflow-wrap:anywhere}   /* night C6: a long change title inside a note wraps at 390 — it never pushes the page sideways */
.ig-note.is-quiet{background:var(--lvl-0);box-shadow:inset 0 0 0 1px var(--bd)}
.ig-note.is-quiet > svg{color:var(--fg-3)}
.ig-chg{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
/* loop 2 (IN-14): what the provider's own consent screen will say, quoted */
.ig-consent{display:flex;flex-direction:column;gap:6px;margin-top:12px;padding:12px 14px;border-radius:var(--r-12);background:var(--lvl-1);box-shadow:inset 0 0 0 1px var(--bd-tl)}
.ig-consent.is-sheet{margin-top:2px;width:100%}
.ig-consent-hd{display:flex;align-items:center;gap:8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ig-consent-hd svg{flex:none;color:var(--fg-3)}
.ig-consent-hd b{font-weight:var(--w-semibold);color:var(--fg)}
.ig-consent-l{margin:0;padding:0 0 0 22px;list-style:none;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg)}
.ig-consent-l li.is-opt{color:var(--fg-2)}
.ig-consent-n{display:flex;align-items:flex-start;gap:6px;margin:2px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ig-consent-n svg{flex:none;margin-top:2px;color:var(--fg-3)}
/* IG8 (§4 #11): recipes — when it changes → what Dottpace does */
.ig-rcp{align-items:center}
.ig-rcp-ic{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:var(--r-full);background:var(--bg-3);color:var(--fg-2)}
.ig-empty-t{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:2px}
.ig-empty-t p svg{display:inline-block;vertical-align:-2px}
.stg-tbl .tbl-r.is-link{cursor:pointer}
.stg-banner.is-red{background:var(--st-red-bg)}
.stg-banner.is-red > svg{color:var(--neg)}

/* ---------- the Connect sheet ---------- */
.ig-sh-hd{display:flex;align-items:center;gap:12px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ig-sh-hd b{font-size:var(--t-body);font-weight:var(--w-semibold);color:var(--fg)}
.ig-step{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:12px;row-gap:8px}
.ig-step-hd{display:contents}
.ig-step-n{grid-column:1;display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-full);background:var(--bg-3);font-size:var(--t-sh);line-height:1;font-weight:var(--w-semibold);color:var(--fg-2);font-variant-numeric:tabular-nums}
.ig-step.is-done .ig-step-n{background:var(--c-green);color:var(--on-fill)}
.ig-step-hd b{grid-column:2;align-self:center;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.ig-step-bd{grid-column:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.ig-step-bd > .stg-radios,.ig-step-bd > .stg-sf,.ig-step-bd > .ig-keyrow,.ig-step-bd > .ig-code,.ig-step-bd > .ig-sitepick,.ig-step-bd > .stg-ul{width:100%}
.ig-keyrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ig-keyrow .fb-err{flex-basis:100%}
.ig-ok{display:flex;align-items:center;gap:6px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--pos,var(--c-green))}
.ig-units{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ig-units svg{flex:none;margin-top:2px;color:var(--fg-3)}
.ig-ol,.ig-ul{font-size:var(--t-co);line-height:var(--lh-co)}
.ig-ul b{font-weight:var(--w-semibold);color:var(--fg)}
.ig-sitepick{display:flex;flex-direction:column;border-radius:var(--r-12);box-shadow:inset 0 0 0 1px var(--bd);overflow:hidden}
.ig-site{display:flex;padding:9px 12px}
.ig-site + .ig-site{border-top:1px solid var(--ln-3)}
.ig-site.is-on{background:color-mix(in srgb,var(--accent) 5%,var(--bg))}
.ig-ask{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:var(--t-co)}
/* loop 2 (IN-30): one field width in these sheets — every input, select, text area, radio and checklist runs the sheet's full width */
.stg-sheet.ig-sh .stg-sf > :is(.stg-in,.stg-ta,.stg-sel,.menu-btn),.stg-sheet.ig-sh .stg-sh-bd > .stg-sf > .stg-radios,.stg-sheet.ig-sh .stg-sf > .stg-radios,.stg-sheet.ig-sh .stg-sf > .stg-checks,.stg-sheet.ig-sh .ig-fw,.stg-sheet.ig-sh .ig-keyrow{width:100%;max-width:none}
.stg-sheet.ig-sh .stg-sf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.stg-sheet.ig-sh .ig-keyrow > .ig-fw{flex:1;min-width:0}
.ig-sh-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.ig-other{display:inline-flex;align-items:center;gap:2px;font-size:var(--t-co)}
.ig-sitepick.is-other{opacity:.92}
.ig-units.is-bal b{font-weight:var(--w-semibold);color:var(--fg)}

/* ---------- code ---------- */
.ig-code{position:relative;min-width:0;border-radius:var(--r-12);background:var(--lvl-2);box-shadow:inset 0 0 0 1px var(--bd-tl)}
.ig-code pre{margin:0;padding:12px 44px 12px 14px;overflow-x:auto;font-family:var(--mono);font-size:var(--t-sh);line-height:1.6;color:var(--fg);white-space:pre}
.ig-code-cp{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:var(--r-full);background:var(--lvl-2);box-shadow:-10px 0 10px -2px var(--lvl-2)}   /* fixer r1: a solid chip, so it never covers code scrolling under it */
.ig-code.is-resp{margin-top:8px}
code.ig-c{padding:1px 6px;border-radius:var(--r-4);background:var(--bg-3);font-family:var(--mono);font-size:.92em;color:var(--fg)}
.is-mono{font-family:var(--mono);font-size:var(--t-co)}
.stg-tbl .k.is-mono{font-size:var(--t-co);font-weight:var(--w-medium)}
.ig-path{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.ig-url{font-family:var(--mono);font-size:.78em;font-weight:var(--w-semibold);letter-spacing:-.02em;overflow-wrap:anywhere}

/* tabs inside a card (language, assistant) — underlines, never capsules */
.ig-lang{display:flex;flex-wrap:wrap;gap:4px 18px;border-bottom:1px solid var(--ln-3);margin-bottom:10px}
.ig-lang-t{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg-3);cursor:pointer}
@media (hover:hover){.ig-lang-t:hover{color:var(--fg)}}
.ig-lang-t.is-on{color:var(--fg);border-bottom-color:var(--fg)}
.ig-steps-l{margin:2px 0 10px}
.ig-addr{padding:4px 0}

/* ---------- API ---------- */
.ig-refbtn{display:inline-flex}
.ig-dlv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 8px 14px;border-bottom:1px solid var(--ln-3)}
.ig-dlv > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.ig-dlv b{font-size:var(--t-co);font-weight:var(--w-semibold);color:var(--fg-2)}
.ig-log .tbl-r{min-height:44px}
.ig-tg{padding:12px 8px 4px;font-size:var(--t-sh);line-height:var(--lh-sh);font-weight:var(--w-semibold);color:var(--fg-3);text-transform:none;border-bottom:1px solid var(--ln-3)}
.ig-tg span{font-weight:var(--w-regular,400)}
button.ig-tg.is-btn{display:flex;align-items:center;gap:6px;width:100%;border:0;border-bottom:1px solid var(--ln-3);background:none;font:inherit;font-size:var(--t-co);font-weight:var(--w-medium);color:var(--fg-2);padding:12px 8px;cursor:pointer;text-align:left}
@media (hover:hover){button.ig-tg.is-btn:hover{color:var(--fg);background:var(--hover-solid)}}
button.ig-tg.is-btn svg{color:var(--fg-3)}
.ig-evg{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:var(--r-12);box-shadow:inset 0 0 0 1px var(--bd)}
.ig-evg-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ig-evg-hd b{font-size:var(--t-co);font-weight:var(--w-semibold);color:var(--fg)}
.ig-evg-hd .stg-a{font-size:var(--t-co)}
/* the reference: a contents column beside the document */
.ig-ref{display:grid;grid-template-columns:184px minmax(0,1fr);column-gap:28px;align-items:start}
.ig-toc{position:sticky;top:calc(var(--top-h) + 18px);display:flex;flex-direction:column;gap:1px;max-height:calc(100vh - var(--top-h) - 36px);overflow-y:auto;scrollbar-width:thin;padding:2px 2px 16px}
.ig-toc .stg-ngl{padding:10px 8px 4px}
.ig-toc .stg-ngl:first-child{padding-top:0}
.ig-ref-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.ig-ref-b{display:flex;flex-direction:column;gap:10px;padding:18px 22px 20px;border:1px solid var(--bd-tl);border-radius:var(--r-card);background:var(--lvl-0);box-shadow:var(--sh-tiny);scroll-margin-top:calc(var(--top-h) + 12px)}
.ig-ref-b h2{margin:0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);letter-spacing:var(--ls-t3);color:var(--fg)}
/* loop 2 (IG8 §4 #10): Copy for LLM · View as Markdown on each section; request ids; key hygiene; a one-link request's progress */
.ig-ref-hd{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px}
.ig-ref-a{display:inline-flex;align-items:center;gap:2px;font-size:var(--t-co)}
.ig-idle{color:var(--warn-ink,var(--c-orange))!important}
.ig-reqn{font-size:var(--t-sh);text-align:left}
.ig-lk-logos{display:inline-flex;align-items:center;gap:4px;flex:none}
.ig-ex{display:flex;flex-direction:column;margin-top:4px}

/* ---------- MCP ---------- */
/* loop 2 (IG8 §4 #8): tool icons, Try a tool, example prompts, the data-access questions */
.ig-tool{display:inline-flex!important;align-items:center;gap:6px}
.ig-tool svg{flex:none;color:var(--fg-3)}
.ig-dlv.is-flat{padding:10px 0 4px;border-bottom:0}
.ig-prompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.ig-pr-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.ig-pr-col > b{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-semibold);color:var(--fg-2)}
.ig-pr{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;border:0;border-radius:var(--r-12);background:var(--lvl-1);box-shadow:inset 0 0 0 1px var(--bd-tl);font:inherit;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg);text-align:left;cursor:pointer}
@media (hover:hover){.ig-pr:hover{box-shadow:inset 0 0 0 1px var(--bd-2)}}
.ig-pr:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.ig-pr svg{flex:none;margin-top:2px;color:var(--fg-3)}
.ig-faq{display:flex;flex-direction:column}
.ig-faq-i{border-top:1px solid var(--ln-3);padding:10px 0}
.ig-faq-i:first-child{border-top:0}
.ig-faq-i summary{cursor:pointer;font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-medium);color:var(--fg)}
.ig-faq-i summary:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:var(--r-4)}
.ig-faq-i p{margin:6px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ig-os-hd .k .stg-chip{margin-left:8px;vertical-align:1px}
.ig-os{display:flex;flex-direction:column;gap:6px;padding:12px 0}
.ig-os + .ig-os{border-top:1px solid var(--ln-3)}
.ig-os-hd{display:flex;align-items:center;gap:12px;min-width:0}
.ig-os-hd .k2{display:flex;flex-direction:column;gap:1px;min-width:0}
.ig-os-hd .k{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.ig-os-hd .u{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.ig-os-t{display:flex;flex-direction:column;margin-left:40px}
.ig-os-r{display:flex;align-items:center;gap:10px;min-height:40px}
.ig-os-r + .ig-os-r{border-top:1px solid var(--ln-3)}

/* ---------- Data sources ---------- */
.ig-pubn{display:inline-flex!important;align-items:center;gap:4px;color:var(--info-ink)!important}   /* v103 (AX7): ink, not the blue fill (3.52:1) */
.ig-pubn svg{flex:none}
.ig-dirm{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.ig-dirm svg{color:var(--fg-3)}
.ig-dirm.is-pub{color:var(--c-blue)}
.ig-dirm.is-pub svg{color:var(--c-blue)}
/* loop 2 (IG2 · IG8): freshness, the 28-day strip, a failing row */
.ig-fresh{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ig-dots{display:grid;grid-template-columns:repeat(28,minmax(0,1fr));gap:3px;margin:10px 0 0 44px}
.ig-dots i{height:8px;border-radius:var(--r-2,2px);background:color-mix(in srgb,var(--c-green) 70%,var(--bg))}
.ig-dots i.is-prov{background:color-mix(in srgb,var(--c-green) 30%,var(--bg))}
.ig-dots i.is-bad{background:var(--c-red)}
.ig-dots.is-30{grid-template-columns:repeat(30,minmax(0,1fr));margin:0;width:100%;max-width:420px}
.ig-dots i.is-none{background:var(--bg-3)}
.stg-banner.is-quiet{background:var(--lvl-1);box-shadow:inset 0 0 0 1px var(--bd-tl)}
.stg-banner.is-quiet > svg{color:var(--c-blue)}
.stg-tbl .tbl-r.is-red{box-shadow:inset 3px 0 0 var(--c-red)}
.ig-off{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 0 4px;border-top:1px solid var(--ln-3);margin-top:4px}
.ig-off-l{font-size:var(--t-co);line-height:var(--lh-co);font-weight:var(--w-medium);color:var(--fg-3)}
.ig-off-i{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.ig-add-ft{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0 4px;border-top:1px solid var(--ln-3);margin-top:4px}
.ig-add-ft .btn{display:inline-flex}
.stg-srcs .stg-src .k{display:flex;align-items:center;min-width:0}
.stg-li.is-src .bl{margin-top:1px}

/* ---------- custom sources ---------- */
.ig-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 16px;border-radius:var(--r-12);box-shadow:inset 0 0 0 1px var(--bd-2);background:var(--lvl-1);text-align:center;color:var(--fg-3);font-size:var(--t-co);line-height:var(--lh-co)}
.ig-drop b{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg)}
.ig-drop .btn{margin-top:6px}
.ig-map{display:flex;flex-direction:column;gap:8px;width:100%;max-width:560px}
.ig-map-r{display:grid;grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);align-items:center;gap:10px}
.ig-map-r > svg{color:var(--fg-4)}
.ig-map-c{font-family:var(--mono);font-size:var(--t-co);color:var(--fg);padding:6px 10px;border-radius:var(--r-8);background:var(--bg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-map-r .stg-sel{width:100%;max-width:none}
.ig-prev .tbl-r{min-height:38px}
.ig-steps .stg-card{margin:0}

/* ---------- widths ---------- */
@media (max-width:1320px){
  .ig-hub,.ig-ref{grid-template-columns:176px minmax(0,1fr);column-gap:20px}
  .ig-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
}
@media (max-width:1100px){
  .ig-hub,.ig-ref{grid-template-columns:minmax(0,1fr)}
  .ig-rail,.ig-toc{display:none}
  .ig-dlv{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){ .ig-grid,.ig-start-l{grid-template-columns:minmax(0,1fr)} }
@media (max-width:900px){
  .ig-filters .stg-sel{max-width:none}
  .ig-for .stg-a,.ig-note > .stg-a{margin-left:0}
  .ig-empty-b{margin-left:0}
  .ig-os-t{margin-left:0}
  /* fixer r1: a long tool name wraps in its own column; the chip and the switch keep the row's right edge, inside the card */
  .ig-os-r{gap:8px}
  .ig-os-r > .k{flex:1 1 0;min-width:0;overflow-wrap:anywhere}
  .ig-os-r > .grow{display:none}
  .ig-os-hd{align-items:flex-start}
  .ig-os-hd > .k2{flex:1 1 0}
  .ig-os-hd > .grow{display:none}
  .ig-map-r{grid-template-columns:minmax(0,1fr)}
  .ig-map-r > svg{display:none}
}

/* ===== night build (Oct 7–8) — B3 source health in four layers · B10 what Dottpace can do · L10 connect links and the client's page · B6 alert
   delivery and incidents (Project settings › Alerts & findings). Tokens only; light and dark follow; nothing here is a capsule control. ===== */
/* B10: Supported read · Supported write · Developer handoff — a dot and a word, like a source's state */
.ig-cap{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0}
.ig-card > .ig-cap{margin-top:-4px}
.ig-cap-i{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-meta);line-height:var(--lh-meta);font-weight:var(--w-medium);color:var(--fg-3);white-space:nowrap}
.ig-cap-i i{width:6px;height:6px;border-radius:var(--r-full);background:var(--fg-4);flex:none}
.ig-cap-i.is-green{color:var(--pos-ink)}.ig-cap-i.is-green i{background:var(--c-green)}
.ig-cap-i.is-blue{color:var(--info-ink)}.ig-cap-i.is-blue i{background:var(--c-blue)}
.ig-capl .stg-li{align-items:flex-start}
.ig-capl .ig-cap-i{min-width:168px;padding-top:2px;font-size:var(--t-co);line-height:var(--lh-co)}
.ig-capl .stg-li-t span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
/* B3: the four layers */
.ig-health .tbl-r{align-items:flex-start}
.ig-health .ig-st{font-size:var(--t-co);line-height:var(--lh-co)}
/* L10: a connect link on the agency's side — its state, the client's last step, its history */
.ig-lk{align-items:flex-start}
.ig-lk .ig-lk-logos{padding-top:2px}
.ig-lk-st{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px;font-size:var(--t-co);line-height:var(--lh-co)}
.ig-lk-st .ig-st{font-size:var(--t-co)}
.ig-lk-ev{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--fg-3)}
.ig-lk-ev svg{flex:none}
.ig-lk-h{margin-top:2px}
.ig-lk-hl{margin:4px 0 0;padding:0 0 0 16px;display:flex;flex-direction:column;gap:2px;font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--fg-2)}
.ig-lk-a{flex:none;flex-wrap:wrap;justify-content:flex-end;max-width:46%}
.ig-lk .stg-li-t{flex:1 1 160px;min-width:0}   /* night C6: the link's title keeps a readable width — the actions wrap under it first */
@container pg (max-width:480px){.ig-lk .ig-lk-a{flex-basis:100%}}
.ig-lk.is-cancelled .stg-li-t > b,.ig-lk.is-replaced .stg-li-t > b{color:var(--fg-3)}

/* L10: the client's page (#/connect/<token>) — the agency's mark, who asks and why, each account, what never happens */
.cnl-cn{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.cnl-pv{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r-12);background:var(--accent-t);color:var(--fg-2);font-size:var(--t-co);line-height:var(--lh-co)}
.cnl-pv > svg{color:var(--accent);flex:none}
.cnl-pv b{color:var(--fg)}
.cnl-pv code{font-family:var(--mono);font-size:var(--t-meta);overflow-wrap:anywhere}
.cnl-h{display:flex;align-items:flex-start;gap:14px;padding:4px 0}
.cnl-m{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--r-12);background:var(--inv);color:var(--inv-fg);font-weight:var(--w-semibold);font-size:var(--t-t2)}
.cnl-k{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.cnl-t{margin:2px 0 0;font-size:var(--t-t1);line-height:var(--lh-t1);font-weight:var(--w-semibold);letter-spacing:var(--ls-t1);color:var(--fg)}
.cnl-s{margin:6px 0 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2);max-width:62ch}
.cnl-card{padding:16px 20px;display:flex;flex-direction:column;gap:0}
.cnl-card-h{display:flex;align-items:center;gap:8px;padding-bottom:8px}
.cnl-card-h h2{margin:0;font-size:var(--t-t3);line-height:var(--lh-t3);font-weight:var(--w-semibold);color:var(--fg)}
.cnl-card-h > svg{color:var(--c-green)}
.cnl-n{margin-left:auto;font-size:var(--t-co);color:var(--fg-3)}
.cnl-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px}
.cnl-facts > div{min-width:0}
.cnl-facts .is-wide{grid-column:1 / -1}
.cnl-facts dt{font-size:var(--t-meta);line-height:var(--lh-meta);color:var(--fg-3)}
.cnl-facts dd{margin:2px 0 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg);overflow-wrap:anywhere}
.cnl-row{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-top:1px solid var(--ln-3)}
.cnl-card-h + .cnl-row{border-top:0}
.cnl-row-l{flex:none;padding-top:2px}
.cnl-row-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cnl-row-t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.cnl-row-t b{font-size:var(--t-body);color:var(--fg)}
.cnl-row-t .ig-st{font-size:var(--t-co);line-height:var(--lh-co)}
.cnl-row-w{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cnl-row-w b{font-weight:var(--w-medium);color:var(--fg)}
.cnl-row-a{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cnl-row.is-off .cnl-row-b{opacity:.72}
.cnl-skip{font-size:var(--t-co)}
.cnl-pp{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cnl-pp > div{padding:12px 14px;border-radius:var(--r-12);background:var(--lvl-1);box-shadow:inset 0 0 0 1px var(--bd-tl)}
.cnl-pp b{font-size:var(--t-co);color:var(--fg)}
.cnl-pp p{margin:4px 0 0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.cnl-foot{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3)}
.cnl-foot svg{flex:none;margin-top:2px}
.cnl-x{flex-direction:row;align-items:flex-start;gap:12px}
.cnl-x > svg{flex:none;color:var(--warn-ink);margin-top:2px}
.cnl-x b{font-size:var(--t-body);color:var(--fg)}
.cnl-x p{margin:4px 0 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.cnl-x-a{margin-top:12px}
.cnl-next{margin:12px 0 0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--fg-2)}
.cnl-next b{color:var(--fg)}
@media (max-width:640px){
  .cnl-facts{grid-template-columns:minmax(0,1fr)}
  .cnl-pp{grid-template-columns:minmax(0,1fr)}
  .cnl-row{flex-wrap:wrap}
  .cnl-row-a{width:100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;padding-left:40px}
  .cnl-pv{flex-wrap:wrap}
  .ig-lk{flex-wrap:wrap}
  .ig-lk-a{max-width:none;justify-content:flex-start;padding-left:30px}
  .ig-capl .stg-li{flex-direction:column;gap:2px}
}

/* B6: Delivery (quiet hours with a time zone) and Incidents with their delivery log */
.al-qw{display:contents}
.stg-row.al-qoff > .stg-ctl{align-items:flex-start;padding-top:9px;min-height:0}   /* a two-line sentence starts on the label's line */
/* fixer r1 (A11Y-A4): rows under Quiet hours off stay full contrast. Settings-auth r1: with it off they fold into one "When it's on" line (full
   contrast, nothing live) — switching it on brings the three controls back with the saved values */
.al-inc{display:flex;flex-direction:column;gap:4px;padding:12px 0;border-top:1px solid var(--ln-3)}
.stg-rows > .al-inc:first-child{border-top:0}
.al-inc-hd{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-width:0}
.al-inc-t{font-size:var(--t-body);line-height:var(--lh-body);font-weight:var(--w-semibold);color:var(--fg);min-width:0}
.al-inc-n,.al-inc-m{margin:0;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.al-inc-m{color:var(--fg-3)}
.al-inc-a{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:4px}
.al-inc.is-resolved .al-inc-t{color:var(--fg-2)}
.al-inc-log{flex-basis:100%}
.al-inc-log .stg-tbl{margin-top:6px}
.al-log{display:inline-flex;align-items:flex-start;gap:6px;font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-2)}
.al-log i{width:6px;height:6px;margin-top:6px;border-radius:var(--r-full);background:var(--fg-4);flex:none}
.al-log.is-sent i,.al-log.is-recovery i{background:var(--c-green)}
.al-log.is-held i{background:var(--c-blue)}
.al-log.is-failed i,.al-log.is-skipped i{background:var(--c-orange)}
.al-log.is-failed{color:var(--warn-ink)}
.al-now{display:flex;align-items:center;gap:6px}
/* fixer r1: "8 AM to 6 PM" stays one unit; the days select goes under it on a phone */
.al-range{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:8px;min-width:0}
@container pg (max-width:600px){ .al-range .stg-sel{width:118px;min-width:0} .al-range + .stg-sel{flex-basis:100%} }
.al-now svg{flex:none}

/* ---------- fixer r1 (settings-auth) ---------- */
/* a note's text sits beside its icon — the icon never sits alone on a line (Stripe's "In Changes:", Ahrefs, MCP outside) */
.ig-note > span{flex:1 1 0;min-width:0}
/* the logo link in a section head keeps its 6px gap (".more" set 3px) */
.sec-hd a.more.bl-nm{gap:6px}
/* a button beside a masked secret uses the UI font, not the secret's mono */
.stg-ro .btn{font-family:var(--font)}
/* a preview shows the state's own fix, off, with why under it */
.stg-pvfix{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.stg-pvfix > span{font-size:var(--t-co);line-height:var(--lh-co);color:var(--fg-3);white-space:nowrap}
/* Data sources: a status chip stays one line on desktop */
@container pg (min-width:761px){
  .stg-srcs .tbl-r .lbl{white-space:nowrap}
  .stg-srcs .tbl-h,.stg-srcs .tbl-r{column-gap:20px}
  .stg-srcs .stg-note,.stg-srcs .stg-src .u{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}   /* the full note is on the source's page (and in the tooltip) */
}
/* phone: the banner's and the preview line's button drops under the sentence; Status and Used by always read label over value;
   the health notes read left-aligned */
@media (max-width:560px){
  .stg-main .stg-banner{flex-wrap:wrap}
  .stg-main .stg-banner > .grow{flex:1 1 calc(100% - 26px)}
  .stg-main .stg-banner > .btn,.stg-main .stg-banner > .stg-pvfix{margin-left:25px;align-self:flex-start}   /* fixer r1: the button sits at the start; its label stays centred in its box */
  .stg-main .preview-line{flex-wrap:wrap}
  .stg-main .preview-line > span{flex:1 1 calc(100% - 22px)}
  .stg-main .preview-line > a{margin-left:22px}
}
@container pg (max-width:560px){
  .stg-srcs.is-tbl > .tbl-r > :is([data-label="Status"],[data-label="Used by"]){flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left;gap:4px}
  .stg-srcs.is-tbl > .tbl-r > :is([data-label="Status"],[data-label="Used by"])::before{margin-right:0;max-width:none}
  .stg-srcs.is-tbl > .tbl-r > [data-label="Used by"] > .stg-ucs{justify-content:flex-start}
  .stg-srcs.is-tbl > .tbl-r > span{padding-top:5px;padding-bottom:5px}   /* stacked cells sit closer, so one source reads as one card */
  .ig-health.is-tbl > .tbl-r > :nth-child(3){justify-content:flex-start;text-align:left}
}

/* fixer r1 (settings-auth): API and MCP tabs on a phone — the row stops at a whole tab, never a clipped "ps 2" (the fade marks what is cut) */
@container pg (max-width:760px){
  .ig-tabbar.pl-bar > .pl-tabs{scroll-snap-type:x mandatory}
}