/* Page kit additions for the integrations pages. */

/* ---------- integrations-b: Linear, Asana, Trello, Webhooks, Google Sheets, AI key pages ---------- */
.ib-box { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); min-width: 0; }
.ib-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--hairline); background: var(--paper-2); }
.ib-t { font: 500 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.ib-mono { font: 500 12.5px/1.4 var(--mono); color: var(--ink); background: var(--paper-2); padding: 1px 5px; overflow-wrap: anywhere; }
.ib-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.ib-tabs button { height: 26px; padding: 0 10px; border: 1px solid transparent; background: none; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; }
.ib-tabs button[aria-selected="true"] { background: #fff; border-color: var(--ink); color: var(--ink); }
.ib-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 12.5px/1.6 var(--mono); color: var(--ink); white-space: pre; tab-size: 2; background: #fff; }
.ib-code pre[hidden] { display: none; }
.ib-code .ib-note { padding: 10px 18px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--ink-3); }

.ib-map { background: #fff; border: 1px solid var(--hairline); min-width: 0; }
.ib-map-head, .ib-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.ib-map-head { border-top: 0; background: var(--paper); font: 500 12px/1.2 var(--sans); color: var(--ink-4); }
.ib-map-row b { font: 600 14px/1.3 var(--sans); color: var(--ink); }
.ib-map-row p { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.ib-map-row svg { width: 16px; height: 10px; color: var(--ink-4); }
.ib-map-row.forced { background: var(--periwinkle-tint); }
.ib-map-row.never b, .ib-map-row.never .ib-mono { text-decoration: line-through; color: var(--ink-4); }
.ib-map-cap { padding: 10px 16px; border-top: 1px solid var(--hairline); }
@media (max-width: 760px) { .ib-map-head { display: none; } .ib-map-row { grid-template-columns: 1fr; gap: 4px; } .ib-map-row svg { display: none; } }

.ib-tk-body { padding: 18px 20px; display: grid; gap: 14px; }
.ib-tk-title { font: 600 19px/1.3 var(--sans); color: var(--ink); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ib-tk-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); margin: 0; }
.ib-tk-meta div { background: #fff; padding: 10px 12px; }
.ib-tk-meta dt { font-size: 12px; color: var(--ink-4); }
.ib-tk-meta dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.ib-tk-desc { margin: 0; font: 400 12.5px/1.6 var(--mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); padding: 12px 14px; border: 1px solid var(--hairline); }

.ib-bld-in, .ib-bld-out, .ib-pad { padding: 18px 20px; display: grid; gap: 12px; align-content: start; }
.ib-bld-in { border-bottom: 1px solid var(--hairline); }
.ib-field { display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); }
.ib-field textarea, .ib-field input[type=text], .ib-field input[type=number], .ib-field select { width: 100%; border: 1px solid var(--ink); background: var(--paper); padding: 10px 12px; font: 500 14px/1.45 var(--sans); color: var(--ink); border-radius: 0; }
.ib-field textarea.mono, .ib-field input.mono { font: 400 12.5px/1.5 var(--mono); }
.ib-field textarea { resize: vertical; min-height: 64px; }
.ib-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-chips button { cursor: pointer; }
.ib-count { font: 500 11px/1 var(--mono); color: var(--ink-4); justify-self: end; padding: 3px 5px; }
.ib-count.over { color: var(--ink); background: var(--orange); }
.ib-verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--ink); }
.ib-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .ib-row2 { grid-template-columns: 1fr; } }

.ib-chain { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center; }
.ib-chain span { border: 1px solid var(--ink); background: #fff; padding: 6px 10px; font: 500 12.5px/1.2 var(--sans); color: var(--ink); }
.ib-chain span.on { background: var(--periwinkle-tint); }
.ib-chain span.wait { background: var(--amber-tint); }
.ib-chain i { width: 16px; height: 1px; background: var(--ink); flex: none; }

.ib-sheet { overflow-x: auto; background: #fff; border: 1px solid var(--hairline); }
.ib-sheet table { border-collapse: collapse; width: 100%; font: 400 12.5px/1.3 var(--mono); color: var(--ink); }
.ib-sheet th, .ib-sheet td { border: 1px solid var(--hairline); padding: 7px 9px; text-align: left; white-space: nowrap; }
.ib-sheet thead th { background: var(--paper-2); color: var(--ink-4); font-weight: 500; text-align: center; }
.ib-sheet thead th button { all: unset; cursor: pointer; display: block; width: 100%; }
.ib-sheet tbody th { background: var(--paper-2); color: var(--ink-4); font-weight: 400; width: 34px; text-align: center; }
.ib-sheet .on { background: var(--periwinkle-tint); }
.ib-sheet td.on.kept { background: var(--periwinkle); }
.ib-sheet td.on.skip { color: var(--ink-4); text-decoration: line-through; background: var(--paper); }
.ib-sheet-tabs { display: flex; gap: 0; border-top: 1px solid var(--hairline); background: var(--paper); }
.ib-sheet-tabs button { border: 0; border-right: 1px solid var(--hairline); background: none; padding: 8px 14px; font: 500 12.5px/1 var(--sans); color: var(--ink-3); cursor: pointer; }
.ib-sheet-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: inset 0 2px 0 var(--ink); }

.ib-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #fff; }
.ib-two > div { padding: 22px; display: grid; gap: 12px; align-content: start; }
.ib-two > div + div { border-left: 1px solid var(--ink); }
.ib-two h3 { font: 600 19px/1.25 var(--sans); color: var(--ink); }
.ib-two dl { margin: 0; display: grid; gap: 0; }
.ib-two dl div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hairline); font-size: 14px; }
.ib-two dt { color: var(--ink-4); }
.ib-two dd { margin: 0; color: var(--ink); }
.ib-two .us { background: var(--periwinkle-tint); }
@media (max-width: 760px) { .ib-two { grid-template-columns: 1fr; } .ib-two > div + div { border-left: 0; border-top: 1px solid var(--ink); } }

.ib-q { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--hairline); }
.ib-q:first-child { border-top: 0; padding-top: 0; }
.ib-q p { font: 500 15px/1.4 var(--sans); color: var(--ink); }
.ib-q .dc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ib-out { background: var(--paper); border-left: 2px solid var(--ink); padding: 14px 16px; font-size: 15px; color: var(--ink-2); }
.ib-out b { color: var(--ink); }

/* ---------- Shared integrations components (integrations-* Blade components). ---------- */
/* Data-flow diagram: one row per crossing, opened with native details. */
.ig-flow { margin: 0; display: grid; gap: 10px; min-width: 0; }
.ig-flow-rows { display: grid; gap: 8px; }
.ig-fl { background: #fff; border: 1px solid var(--hairline); }
.ig-fl[open] { border-color: var(--ink); }
.ig-fl summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(110px, .8fr) minmax(60px, .5fr) minmax(110px, .8fr) minmax(0, 1.6fr) 24px; gap: 12px; align-items: center; padding: 12px 14px; }
.ig-fl summary::-webkit-details-marker { display: none; }
.ig-node { border: 1px solid var(--ink); padding: 8px 10px; font: 600 14px/1.25 var(--sans); color: var(--ink); background: var(--paper); text-align: center; }
.ig-arrow { position: relative; height: 12px; display: block; }
.ig-arrow i { position: absolute; left: 0; right: 7px; top: 5px; height: 0; border-top: 1.5px solid var(--ink); }
.ig-arrow::after { content: ''; position: absolute; right: 0; top: 1px; border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ig-what { font-size: 14.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ig-what code, .ig-fl-detail code { font: 500 12.5px/1.4 var(--mono); color: var(--ink); background: var(--paper-2); padding: 1px 5px; }
.ig-more { width: 24px; height: 24px; border: 1px solid var(--ink); display: grid; place-items: center; font: 500 14px/1 var(--mono); color: var(--ink); }
.ig-fl[open] .ig-more { background: var(--ink); color: #fff; }
.ig-fl.never .ig-node:last-of-type { background: #fff; border-style: dashed; color: var(--ink-4); text-decoration: line-through; }
.ig-fl.never .ig-arrow i { border-top-style: dashed; border-top-color: var(--ink-4); }
.ig-fl.never .ig-arrow::after { border-left-color: var(--ink-4); }
.ig-fl-detail { margin: 0; padding: 4px 14px 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 20px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.ig-fl-detail dt { font-size: 12.5px; color: var(--ink-4); }
.ig-fl-detail dd { margin: 2px 0 0; font-size: 14px; color: var(--ink); }
@media (max-width: 760px) {
    .ig-fl summary { grid-template-columns: minmax(0, 1fr) 24px; }
    .ig-fl summary .ig-node, .ig-fl summary .ig-arrow, .ig-fl summary .ig-what { grid-column: 1; }
    .ig-fl summary .ig-more { grid-column: 2; grid-row: 1; }
    .ig-arrow { height: 22px; width: 12px; margin-left: 18px; }
    .ig-arrow i { left: 5px; right: auto; top: 0; bottom: 7px; height: auto; border-top: 0; border-left: 1.5px solid var(--ink); }
    .ig-arrow::after { right: auto; left: 1px; top: auto; bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--ink); }
    .ig-fl.never .ig-arrow i { border-left-style: dashed; border-left-color: var(--ink-4); }
    .ig-fl.never .ig-arrow::after { border-left-color: transparent; border-top-color: var(--ink-4); }
    .ig-node { text-align: left; }
}

/* Permission ledger and scope ladder. */
.ig-ledger { margin: 0; display: grid; gap: 10px; min-width: 0; }
.ig-ledger-rows { display: grid; gap: 10px; }
.ig-lr { background: #fff; border: 1px solid var(--hairline); padding: 16px 18px; display: grid; gap: 8px; }
.ig-lr.ours { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.ig-lr.not { background: var(--paper); }
.ig-lr-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ig-lr-head code { font: 500 13.5px/1.35 var(--mono); color: var(--ink); word-break: break-all; }
.ig-lr.not .ig-lr-head code { color: var(--ink-3); }
.ig-lr-vendor { margin: 0; font-size: 14px; color: var(--ink-3); }
.ig-lr dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; }
.ig-lr dt { font-size: 12.5px; color: var(--ink-4); }
.ig-lr dd { margin: 2px 0 0; font-size: 14.5px; color: var(--ink-2); }
.ig-ledger.ladder .ig-lr { position: relative; }
.ig-ledger.ladder .ig-lr:nth-child(1) { margin-right: 0; }
.ig-ledger.ladder .ig-lr:nth-child(2) { margin-left: 4%; }
.ig-ledger.ladder .ig-lr:nth-child(3) { margin-left: 8%; }
.ig-ledger.ladder .ig-lr:nth-child(4) { margin-left: 12%; }
@media (max-width: 640px) { .ig-lr dl { grid-template-columns: 1fr; } .ig-ledger.ladder .ig-lr { margin-left: 0 !important; } }

/* Field map. */
.ig-map { margin: 0; display: grid; gap: 12px; min-width: 0; }
.ig-map-grid { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 6px 18px 10px; }
.ig-map-h, .ig-map-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.ig-map-h { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 13px; color: var(--ink-4); }
.ig-map-row { padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.ig-map-row:last-child { border-bottom: 0; }
.ig-map-l { font-size: 14.5px; color: var(--ink); }
.ig-map-line { position: relative; height: 10px; }
.ig-map-line i { position: absolute; left: 0; right: 6px; top: 4px; border-top: 1.5px solid var(--ink); }
.ig-map-line::before { content: ''; position: absolute; left: -3px; top: 1px; width: 7px; height: 7px; background: var(--ink); }
.ig-map-line::after { content: ''; position: absolute; right: 0; top: 0; border-left: 7px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ig-map-r { display: grid; gap: 2px; }
.ig-map-r code, .ig-map-fx code, .ig-map-nx code { font: 500 13px/1.35 var(--mono); color: var(--ink); }
.ig-map-r small { font-size: 12.5px; color: var(--ink-4); }
.ig-map-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ig-map-forced, .ig-map-never { background: #fff; border: 1px solid var(--hairline); padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
.ig-map-forced { background: var(--periwinkle-tint); border-color: var(--ink); }
.ig-map-never { background: var(--paper); border-style: dashed; border-color: var(--dashed); }
.ig-map-k { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--ink); }
.ig-map-fx, .ig-map-nx { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid rgba(17, 17, 17, .08); }
.ig-map-fx span, .ig-map-nx span { font-size: 13.5px; color: var(--ink-3); }
.ig-map-nx code { color: var(--ink-4); }
@media (max-width: 640px) {
    .ig-map-h { display: none; }
    .ig-map-row { grid-template-columns: 1fr; gap: 4px; }
    .ig-map-line { width: 10px; height: 16px; margin-left: 4px; }
    .ig-map-line i { left: 4px; right: auto; top: 0; bottom: 6px; border-top: 0; border-left: 1.5px solid var(--ink); }
    .ig-map-line::before { display: none; }
    .ig-map-line::after { right: auto; left: -1px; top: auto; bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--ink); }
    .ig-map-foot { grid-template-columns: 1fr; }
}

/* Setup by role. */
.ig-setup { display: grid; gap: 16px; }
.ig-req { background: var(--amber-tint); border: 1px solid var(--ink); padding: 18px 20px; display: grid; gap: 12px; }
.ig-req-h { margin: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.ig-req .p-check li { font-size: 15px; }
.ig-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ig-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; background: #fff; border: 1px solid var(--hairline); padding: 18px 20px; }
.ig-step-n { font: 600 13px/1 var(--mono); color: #fff; background: var(--ink); padding: 7px 9px; height: max-content; }
.ig-step-b { display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.ig-step-b p { margin: 0; }
.ig-step-who { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ig-step-where { font-size: 13.5px; color: var(--ink-4); }
.ig-step-ok { font-size: 14px !important; color: var(--ink-3) !important; border-top: 1px solid var(--hairline); padding-top: 8px; }
.ig-step-ok b { color: var(--ink); font-weight: 600; }
.ig-step code { font: 500 12.5px/1.4 var(--mono); background: var(--paper-2); padding: 1px 5px; color: var(--ink); }

/* Error dictionary. */
.ig-errors { margin: 0; display: grid; gap: 10px; min-width: 0; }
.ig-err-rows { display: grid; gap: 8px; }
.ig-err { background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--orange); padding: 14px 16px; display: grid; gap: 8px; }
.ig-err-m { margin: 0; font: 500 14.5px/1.45 var(--sans); color: var(--ink); }
.ig-err-m::before { content: '\201C'; } .ig-err-m::after { content: '\201D'; }
.ig-err dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.ig-err dt { font-size: 12.5px; color: var(--ink-4); }
.ig-err dd { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
@media (max-width: 640px) { .ig-err dl { grid-template-columns: 1fr; } }

/* The thing an integration made, in a neutral frame. */
.ig-art { margin: 0; display: grid; gap: 10px; min-width: 0; }
.ig-art-sheet { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); display: grid; }
.ig-art-where { margin: 0; padding: 10px 16px; font-size: 13px; color: var(--ink-4); border-bottom: 1px solid var(--hairline); background: var(--paper); }
.ig-art-fields { margin: 0; display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--hairline); }
.ig-art-fields div { padding: 10px 16px; border-right: 1px solid var(--hairline); display: grid; gap: 3px; }
.ig-art-fields dt { font-size: 12px; color: var(--ink-4); }
.ig-art-fields dd { margin: 0; font-size: 14px; color: var(--ink); display: flex; gap: 6px; align-items: center; }
.ig-art-body { padding: 18px 20px; display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.ig-art-body h4 { margin: 6px 0 0; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.ig-art-body p { margin: 0; }

/* When, then template card. */
.ig-wt { background: #fff; border: 1px solid var(--hairline); padding: 20px; display: grid; gap: 12px; align-content: start; }
.ig-wt-title { margin: 0; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.ig-wt-when { margin: 0; font-size: 15px; color: var(--ink-2); }
.ig-wt-when b { color: var(--ink); }
.ig-wt-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.ig-wt-chain li { position: relative; border: 1px solid var(--ink); background: var(--paper); padding: 6px 9px; font-size: 13px; color: var(--ink); }
.ig-wt-chain li.mine { background: var(--periwinkle-tint); font-weight: 600; }
.ig-wt-chain li + li::before { content: ''; position: absolute; left: -17px; top: 50%; width: 12px; border-top: 1.5px solid var(--ink); }
.ig-wt-chain li + li::after { content: ''; position: absolute; left: -7px; top: calc(50% - 4px); border-left: 6px solid var(--ink); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.ig-wt-cost { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.ig-wt .link-arrow, .ig-link { font: 500 14px/1.3 var(--sans); color: var(--ink); text-underline-offset: 3px; }

/* Shared bits: a code block on paper (never a dark panel), a two-column contrast, and small inline code. */
.ig-code { margin: 0; background: var(--paper); border: 1px solid var(--ink); padding: 16px 18px; font: 400 13px/1.6 var(--mono); color: var(--ink); overflow-x: auto; white-space: pre; }
.ig-code .k { color: var(--ink-4); }
.ig-code .hl { background: var(--periwinkle-tint); }
.ig-code .del { color: var(--ink-4); text-decoration: line-through; }
.ig-inline { font: 500 0.88em/1.4 var(--mono); background: var(--paper-2); padding: 1px 5px; color: var(--ink); }
.prose .ig-inline, .p-prose .ig-inline { font-size: 0.85em; }
.ig-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ig-two > div { background: #fff; border: 1px solid var(--hairline); padding: 20px; display: grid; gap: 10px; align-content: start; }
.ig-two h3 { margin: 0; font: 600 18px/1.3 var(--sans); color: var(--ink); }
.ig-two p { margin: 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 760px) { .ig-two { grid-template-columns: 1fr; } }
.ig-tool { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 20px; display: grid; gap: 14px; min-width: 0; }
.ig-tool label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); }
.ig-tool input[type=text], .ig-tool input[type=number], .ig-tool select, .ig-tool textarea { width: 100%; border: 1px solid var(--ink); background: var(--paper); padding: 10px 12px; font: 400 15px/1.4 var(--sans); color: var(--ink); }
.ig-tool textarea { font: 400 13.5px/1.55 var(--mono); min-height: 140px; resize: vertical; }
.ig-tool .mini-btn { cursor: pointer; }
.ig-tool .mini-btn.on { background: var(--ink); color: #fff; }
.ig-out { border-top: 1px solid var(--hairline); padding-top: 12px; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.ig-out b { color: var(--ink); }
.ig-verdict { padding: 12px 14px; border: 1px solid var(--ink); font: 600 15px/1.35 var(--sans); color: var(--ink); background: var(--paper); }
.ig-verdict.ok { background: var(--periwinkle-tint); }
.ig-verdict.no { background: var(--orange-tint); }

/* ---------- /integrations/ hub: the connection map, the matrix, the cost bar, the edge locks. ---------- */
.ihub-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .7fr) minmax(0, 1fr); grid-template-areas: "left core right" "panel panel panel"; gap: 20px 28px; }
.ihub-left { grid-area: left; } .ihub-right { grid-area: right; } .ihub-core { grid-area: core; } .ihub-panel { grid-area: panel; }
.ihub-col { display: grid; gap: 16px; align-content: start; }
.ihub-ring { background: #fff; border: 1px solid var(--hairline); padding: 14px; display: grid; gap: 6px; }
.ihub-ring-h { margin: 0 0 4px; display: grid; gap: 2px; }
.ihub-ring-h b { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.ihub-ring-h span { font-size: 13px; color: var(--ink-4); }
.ihub-node { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--ink); background: var(--paper); text-decoration: none; color: var(--ink); font: 500 14.5px/1.2 var(--sans); }
.ihub-node em { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--ink-4); }
.ihub-node:hover { background: #fff; }
.ihub-node.on { background: var(--ink); color: #fff; }
.ihub-node.on em { color: #c9c3b8; }
.ihub-core { display: grid; align-content: center; gap: 14px; position: relative; }
.ihub-box { border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--periwinkle-tint); padding: 22px 18px; display: grid; gap: 8px; text-align: center; }
.ihub-box b { font: 700 24px/1 var(--wordmark); color: var(--ink); letter-spacing: -.02em; }
.ihub-box span { font-size: 13.5px; color: var(--ink-2); }
.ihub-flow { position: relative; display: block; text-align: center; font-size: 13px; color: var(--ink-3); padding: 0 0 16px; }
.ihub-flow::before { content: ''; position: absolute; left: 10%; right: 10%; bottom: 6px; border-top: 1.5px solid var(--ink); }
.ihub-flow.in::after { content: ''; position: absolute; right: 10%; bottom: 1px; border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ihub-flow.out::after { content: ''; position: absolute; right: 10%; bottom: 1px; border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.ihub-panel { background: #fff; border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 20px 22px; display: grid; gap: 12px; }
.ihub-p-name { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ihub-p-name b { font: 600 20px/1.2 var(--sans); color: var(--ink); }
.ihub-panel dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; }
.ihub-panel dt { font-size: 12.5px; color: var(--ink-4); }
.ihub-panel dd { margin: 2px 0 0; font-size: 14.5px; color: var(--ink); }
.ihub-panel code, .ihub-matrix code { font: 500 12.5px/1.4 var(--mono); background: var(--paper-2); padding: 1px 5px; color: var(--ink); }
@media (max-width: 900px) {
    .ihub-map { grid-template-columns: 1fr; grid-template-areas: "left" "core" "right" "panel"; }
    .ihub-flow.out { display: none; }
}
.ihub-matrix { display: grid; gap: 14px; }
.ihub-matrix .need-chips .mini-btn { cursor: pointer; }
.ihub-matrix .need-chips .mini-btn.on { background: var(--ink); color: #fff; }
.ihub-matrix table { min-width: 900px; font-size: 14px; }
.ihub-matrix tbody th { width: 15%; }
.ihub-matrix tbody th a { color: var(--ink); text-underline-offset: 3px; }
.ihub-matrix tr[hidden] { display: none; }
.ihub-split { display: grid; gap: 16px; }
.ihub-bar { display: flex; height: 44px; border: 1px solid var(--ink); background: #fff; }
.ihub-bar span { display: block; height: 100%; }
.ihub-bar .dfs, .ihub-legend i.dfs { background: var(--periwinkle); }
.ihub-bar .ai, .ihub-legend i.ai { background: var(--pink); }
.ihub-bar .ai { border-left: 1px solid var(--ink); }
.ihub-legend { background: #fff; border: 1px solid var(--hairline); display: grid; }
.ihub-legend div { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--hairline); }
.ihub-legend div:first-child { border-top: 0; }
.ihub-legend i { width: 14px; height: 14px; border: 1px solid var(--ink); background: #fff; }
.ihub-legend span { font: 600 15px/1.3 var(--sans); color: var(--ink); }
.ihub-legend b { font: 600 20px/1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.ihub-legend small { grid-column: 2 / -1; font-size: 13px; color: var(--ink-4); }
.ihub-edges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ihub-edge { background: #fff; border: 1px solid var(--hairline); padding: 18px; display: grid; gap: 12px; align-content: start; }
.ihub-edge h3 { margin: 0; font: 600 18px/1.2 var(--sans); color: var(--ink); }
.ihub-edge p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.ihub-edge .ig-code { font-size: 12.5px; padding: 12px 14px; }
@media (max-width: 1080px) { .ihub-edges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ihub-edges { grid-template-columns: 1fr; } }

/* ---------- /integrations/dataforseo/: the bill, the replay, the guard funnel. ---------- */
.idfs-bill { display: grid; gap: 8px; }
.idfs-line { background: #fff; border: 1px solid var(--hairline); }
.idfs-line[open] { border-color: var(--ink); }
.idfs-line.over { border-left: 3px solid var(--orange); }
.idfs-line summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) auto 24px; gap: 14px; align-items: center; padding: 16px 18px; }
.idfs-line summary::-webkit-details-marker { display: none; }
.idfs-line[open] .ig-more { background: var(--ink); color: #fff; }
.idfs-name { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.idfs-est, .idfs-act { display: grid; gap: 2px; font: 600 17px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.idfs-est { color: var(--ink-3); font-weight: 500; }
.idfs-est small, .idfs-act small { font: 400 12px/1.2 var(--sans); color: var(--ink-4); }
.idfs-line dl { margin: 0; padding: 14px 18px 16px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.idfs-line dt { font-size: 12.5px; color: var(--ink-4); }
.idfs-line dd { margin: 3px 0 0; font-size: 14.5px; color: var(--ink-2); }
.idfs-note { margin: 0 18px 16px; padding: 12px 14px; background: var(--orange-tint); border: 1px solid var(--ink); font-size: 14.5px; color: var(--ink-2); }
.idfs-note b { color: var(--ink); }
.idfs-sum { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 16px 18px; background: var(--paper); border: 1px solid var(--ink); font: 600 16px/1.3 var(--sans); color: var(--ink); }
.idfs-sum b { font-size: 24px; font-variant-numeric: tabular-nums; }
.idfs-basis { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-3); }
.idfs-basis span { width: 100%; }
.idfs-basis .mini-btn { cursor: pointer; }
.idfs-basis .mini-btn.on { background: var(--ink); color: #fff; }
.idfs-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.idfs-funnel li { width: var(--w); margin: 0 auto; background: #fff; border: 1px solid var(--ink); padding: 12px 16px; display: grid; gap: 3px; text-align: center; }
.idfs-funnel li:first-child { background: var(--periwinkle-tint); box-shadow: 4px 4px 0 var(--ink); }
.idfs-funnel li:last-child { background: var(--pink-tint); }
.idfs-funnel b { font: 600 15.5px/1.3 var(--sans); color: var(--ink); }
.idfs-funnel span { font-size: 13.5px; color: var(--ink-3); }
.idfs-funnel em { font-style: normal; font-size: 12.5px; color: var(--ink-4); }
.idfs-setup { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.idfs-side { display: grid; gap: 14px; }
@media (max-width: 1080px) { .idfs-setup { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .idfs-line summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 24px; }
    .idfs-name { grid-column: 1 / 3; }
    .idfs-line summary .chip { grid-column: 1 / 3; justify-self: start; }
    .idfs-line summary .ig-more { grid-column: 3; grid-row: 1; }
    .idfs-line dl { grid-template-columns: 1fr; }
    .idfs-funnel li { width: 100%; }
}

/* ---------- /integrations/wordpress/: the draft rule tester, the update states, the two roads. ---------- */
.iwp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.iwp-try textarea { min-height: 230px; }
.iwp-out { display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); align-content: start; }
.iwp-out .ig-code { min-height: 230px; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 760px) { .iwp-cols { grid-template-columns: 1fr; } }
.iwp-states { display: grid; gap: 12px; }
.iwp-state { background: #fff; border: 1px solid var(--ink); padding: 18px 20px; display: grid; gap: 10px; }
.iwp-state.go { background: var(--periwinkle-tint); box-shadow: 4px 4px 0 var(--ink); }
.iwp-state.stop { background: var(--paper); border-style: dashed; }
.iwp-s-h { margin: 0; font-size: 13px; color: var(--ink-4); }
.iwp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iwp-chips code { font: 500 13px/1 var(--mono); border: 1px solid var(--ink); background: #fff; padding: 6px 8px; color: var(--ink); }
.iwp-s-a { margin: 0; font-size: 15px; color: var(--ink-2); }
.iwp-s-a b { color: var(--ink); }
.iwp-roads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.iwp-road { background: #fff; border: 1px solid var(--hairline); padding: 18px; display: grid; gap: 12px; align-content: start; }
.iwp-road-h { margin: 0; font: 600 16px/1.3 var(--sans); color: var(--ink); }
.iwp-road ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.iwp-road li { position: relative; border: 1px solid var(--ink); background: var(--paper); padding: 8px 10px; font-size: 14px; color: var(--ink); }
.iwp-road li + li::before { content: ''; position: absolute; left: 18px; top: -18px; height: 12px; border-left: 1.5px solid var(--ink); }
.iwp-road li + li::after { content: ''; position: absolute; left: 14px; top: -7px; border-top: 6px solid var(--ink); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.iwp-road li.key { background: var(--amber); font-weight: 600; }
.iwp-road li.end { background: var(--periwinkle); font-weight: 600; }
@media (max-width: 640px) { .iwp-roads { grid-template-columns: 1fr; } }

/* ---------- /integrations/webflow/: the collection mapper and the publish timeline. ---------- */
.iwf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.iwf-h { margin: 0 0 6px; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.iwf-fields ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.iwf-fields li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--hairline); background: var(--paper); font-size: 14px; color: var(--ink); }
.iwf-fields code { font: 400 12px/1 var(--mono); color: var(--ink-4); margin-left: 6px; }
.iwf-fields em { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--ink-3); }
.iwf-result { display: grid; gap: 2px; align-content: start; }
.iwf-result .ig-verdict { margin: 10px 0 0; }
@media (max-width: 760px) { .iwf-grid { grid-template-columns: 1fr; } }
.iwf-time { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.iwf-time li { position: relative; background: #fff; border: 1px solid var(--ink); padding: 14px 16px; display: grid; gap: 4px; justify-items: start; }
.iwf-time li:nth-child(2) { background: var(--paper); }
.iwf-time li:last-child { background: var(--periwinkle-tint); box-shadow: 4px 4px 0 var(--ink); }
.iwf-time li + li::before { content: ''; position: absolute; left: 24px; top: -22px; height: 15px; border-left: 1.5px solid var(--ink); }
.iwf-time li + li::after { content: ''; position: absolute; left: 20px; top: -9px; border-top: 7px solid var(--ink); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.iwf-time b { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.iwf-time span:not(.chip) { font-size: 14px; color: var(--ink-3); }

/* ---------- /integrations/google-docs/: the scope ladder with a sample Drive, and the hand-off lanes. ---------- */
.igd-ladder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px; align-items: start; }
.igd-rungs { display: grid; gap: 10px; }
.igd-rung { text-align: left; cursor: pointer; display: grid; gap: 6px; padding: 14px 16px; background: var(--paper); border: 1px solid var(--hairline); }
.igd-rung:nth-child(2) { margin-left: 5%; }
.igd-rung:nth-child(3) { margin-left: 10%; }
.igd-rung code { font: 500 13px/1.3 var(--mono); color: var(--ink-3); }
.igd-rung b { font: 600 15px/1.35 var(--sans); color: var(--ink); }
.igd-rung span { font-size: 12.5px; color: var(--ink-4); }
.igd-rung.ours span { color: var(--ink); font-weight: 600; }
.igd-rung.on { background: #fff; border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.igd-rung.ours.on { background: var(--periwinkle-tint); }
.igd-drive { background: #fff; border: 1px solid var(--ink); padding: 16px; display: grid; gap: 10px; }
.igd-drive-h { margin: 0; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.igd-drive-h span { font-weight: 400; font-size: 13px; color: var(--ink-4); }
.igd-drive ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.igd-drive li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 9px 12px; border: 1px dashed var(--dashed); color: var(--ink-4); background: var(--paper); }
.igd-drive li span { display: grid; gap: 2px; }
.igd-drive li b { font-weight: 500; font-size: 14px; }
.igd-drive li small { font-size: 12px; }
.igd-drive li em { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; }
.igd-drive li.on { border: 1px solid var(--ink); background: #fff; color: var(--ink); }
.igd-drive li.on em { background: var(--periwinkle); padding: 4px 6px; }
@media (max-width: 900px) { .igd-ladder { grid-template-columns: 1fr; } .igd-rung { margin-left: 0 !important; } }
.igd-lanes { display: grid; gap: 6px; background: #fff; border: 1px solid var(--hairline); padding: 12px; overflow-x: auto; }
.igd-lane { display: grid; grid-template-columns: 170px repeat(4, minmax(150px, 1fr)); gap: 6px; min-width: 780px; }
.igd-who { font: 600 14px/1.3 var(--sans); color: var(--ink); padding: 12px 10px; background: var(--paper); border: 1px solid var(--hairline); }
.igd-cell { border: 1px dashed var(--hairline); min-height: 52px; }
.igd-cell.on { border: 1px solid var(--ink); background: var(--periwinkle-tint); padding: 10px 12px; font-size: 14px; color: var(--ink); }
.igd-lane:nth-child(2) .igd-cell.on { background: var(--amber-tint); }
.igd-lane:nth-child(4) .igd-cell.on { background: var(--pink-tint); }

/* ---------- /integrations/ahrefs/: the collapse from keywords to pages. ---------- */
.iah-collapse { display: grid; gap: 10px; }
.iah-page { background: #fff; border: 1px solid var(--ink); padding: 14px 16px; display: grid; gap: 10px; }
.iah-page:first-child { box-shadow: 4px 4px 0 var(--ink); }
.iah-page-h { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: baseline; }
.iah-page-h b { font: 600 16px/1.3 var(--sans); color: var(--ink); }
.iah-page-h span { font-size: 13px; color: var(--ink-4); }
.iah-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iah-chips span { font: 400 12px/1.2 var(--mono); padding: 6px 8px; background: var(--paper); border: 1px solid var(--hairline); color: var(--ink-2); }
.iah-chips span.more { background: var(--periwinkle-tint); border-color: var(--ink); color: var(--ink); }
[data-iah-units] select { height: 44px; padding: 0 12px; border: 1px solid var(--ink); font: 500 15px/1 var(--sans); color: var(--ink); background: var(--paper); width: 100%; }
[data-iah-units] [hidden] { display: none !important; }

/* ---------- /integrations/slack/: the message frame, the builder and the small canvas. ---------- */
.isl-msg { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); white-space: normal; word-break: break-word; }
.isl-msg b { font-weight: 600; background: var(--periwinkle-tint); padding: 0 2px; }
.isl-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.isl-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.isl-left, .isl-right { display: grid; gap: 12px; align-content: start; }
.isl-h { font-size: 14px; color: var(--ink-3); }
.isl-frame { background: #fff; border: 1px solid var(--ink); padding: 16px; min-height: 140px; }
.isl-count { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.isl-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .isl-cols { grid-template-columns: 1fr; } }
.isl-canvas { display: grid; gap: 18px; padding: 4px 0; }
.isl-node { position: relative; border: 1px solid var(--ink); background: var(--paper); padding: 9px 12px; font: 600 14px/1.3 var(--sans); color: var(--ink); display: grid; gap: 2px; }
.isl-node small { font-weight: 400; font-size: 12.5px; color: var(--ink-4); }
.isl-node.mine { background: var(--periwinkle-tint); }
.isl-node.wait { background: #fff; border-style: dashed; }
.isl-node + .isl-node::before { content: ''; position: absolute; left: 20px; top: -18px; height: 11px; border-left: 1.5px solid var(--ink); }
.isl-node + .isl-node::after { content: ''; position: absolute; left: 16px; top: -8px; border-top: 7px solid var(--ink); border-left: 5px solid transparent; border-right: 5px solid transparent; }
.ib-code pre { max-height: 520px; overflow: auto; }
.ib-tk-desc { max-height: 360px; overflow: auto; }
.ib-sheet td { white-space: normal; max-width: 260px; overflow-wrap: anywhere; }
.ib-sheet thead th { text-align: left; }

/* ---------- /integrations/google-search-console/: the sync window and the four watchers. ---------- */
.igsc-time { display: grid; gap: 8px; }
.igsc-bar { display: flex; border: 1px solid var(--ink); background: #fff; min-height: 64px; }
.igsc-bar span { display: grid; align-content: center; gap: 2px; padding: 10px 12px; font-size: 13px; color: var(--ink-2); }
.igsc-bar b { font: 600 14px/1.25 var(--sans); color: var(--ink); }
.igsc-bar .pages { background: var(--periwinkle-tint); }
.igsc-bar .both { background: var(--periwinkle); border-left: 1px solid var(--ink); }
.igsc-bar .night { background: var(--amber); border-left: 1px solid var(--ink); flex: 0 0 120px; }
.igsc-ticks { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-4); }
@media (max-width: 640px) {
    .igsc-bar { flex-direction: column; }
    .igsc-bar span { flex: none !important; border-left: 0 !important; border-top: 1px solid var(--ink); }
    .igsc-bar span:first-child { border-top: 0; }
    .igsc-ticks { display: none; }
}
.igsc-lanes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.igsc-lane { background: #fff; border: 1px solid var(--hairline); border-top: 3px solid var(--ink); padding: 16px; display: grid; gap: 8px; align-content: start; }
.igsc-lane p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.igsc-lane p b { color: var(--ink); }
.igsc-l-h { font: 600 16px/1.3 var(--sans) !important; color: var(--ink) !important; }
.igsc-l-k { font-size: 13px !important; color: var(--ink-4) !important; }
@media (max-width: 1080px) { .igsc-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .igsc-lanes { grid-template-columns: 1fr; } }