/* Integration row and guided setup panel for the real dashboard (integ.js). De-scoped from the terminal demo's term3.css, site tokens. Loaded after ui.css. */
.w-integ .irow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .igbtn { display: inline-flex; border: 1px solid var(--w-line, #cfd8e3); border-radius: 8px; background: var(--w-surface, #fff); color: var(--w-text, #0b1019); font: 600 14px var(--cond); cursor: pointer; align-items: center; gap: 8px; width: auto; flex: none; height: 38px; padding: 0 14px; white-space: nowrap; font-size: 14px; } /* .ibtn is the row icon button; this is the integration button */ .igbtn .ilogo { width: 20px; height: 20px; border-radius: 5px; display: block; } .igbtn.soon { color: var(--ink2); } .igbtn.soon .ilogo { opacity: .55; filter: grayscale(1); } .igbtn .pill { margin-left: 2px; }
.ipanel { margin-top: 14px; border-top: 1px solid var(--soft); padding-top: 12px; } .itabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--soft); margin: 0 0 12px; } .itabs .sp { flex: 1; } .itabs [role="tab"] { height: 36px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--ink2); font: 500 14px var(--cond); cursor: pointer; } .itabs [role="tab"][aria-selected="true"] { color: var(--w-text, #0b1019); border-bottom-color: var(--w-text, #0b1019); }
.iurl { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--w-line, #cfd8e3); border-radius: 8px; background: var(--w-surface2, #f1f4f8); margin: 0 0 14px; } .iurl code { display: block; font: 500 15px/1.3 var(--cond); color: var(--w-text, #0b1019); word-break: break-all; } .iurl .muted { font-size: 12px; display: block; margin-bottom: 2px; }
.isteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .isteps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 240px; gap: 12px; align-items: start; } .isn { width: 26px; height: 26px; border-radius: 50%; background: var(--w-text, #0b1019); color: var(--w-surface, #fff); font: 600 13px/26px var(--cond); text-align: center; } .ist h4 { margin: 2px 0 4px; font: 600 14px/1.3 var(--cond); } .ist p { margin: 0; color: var(--ink2); font-size: 13px; line-height: 1.45; }
.itest { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; } .itest code { padding: 6px 10px; border: 1px dashed var(--w-line, #cfd8e3); border-radius: 6px; font: 500 13px var(--cond); background: var(--w-surface, #fff); }
.iui { border: 1px solid var(--w-line, #cfd8e3); border-radius: 8px; background: var(--w-surface, #fff); overflow: hidden; font-size: 11.5px; color: var(--ink2); } .iub { display: flex; align-items: center; gap: 4px; padding: 5px 8px; background: var(--w-surface2, #f1f4f8); border-bottom: 1px solid var(--soft); } .iub i { width: 7px; height: 7px; border-radius: 50%; background: var(--w-line, #cfd8e3); } .iub span { margin-left: 6px; color: var(--dim); font-size: 11px; }
.iuy { padding: 8px 10px; display: grid; gap: 6px; } .iun { display: flex; gap: 8px; } .iun em { font-style: normal; } .iun b { color: var(--w-text, #0b1019); border-bottom: 2px solid var(--obj); } .iul { display: grid; gap: 4px; } .iur { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--soft); border-radius: 5px; } .iur i { width: 12px; height: 12px; border-radius: 3px; background: var(--w-line, #cfd8e3); } .iur i.w { background: #0e1218; } .iur span { margin-left: auto; font-size: 10px; } .iur.on { border-color: var(--obj); } .iur b { color: var(--w-text, #0b1019); }
.iui .tg { width: 22px; height: 12px; border-radius: 6px; background: var(--w-line, #cfd8e3); position: relative; } .iui .tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .iui .tg.on { background: var(--w-ok); } .iui .tg.on::after { left: 12px; }
.iup { width: 22px; height: 22px; border: 1px solid var(--obj); border-radius: 50%; text-align: center; line-height: 20px; color: var(--obj); font-weight: 600; } .iuy label { font-size: 10px; color: var(--dim); margin-bottom: -4px; } .iui-in { border: 1px solid var(--w-line, #cfd8e3); border-radius: 5px; padding: 4px 6px; background: var(--w-surface, #fff); color: var(--w-text, #0b1019); word-break: break-all; } .iui-in.hl { border-color: var(--obj); }
.iub2 { display: flex; justify-content: flex-end; gap: 6px; margin-top: 2px; } .iub2 span, .iub2 b { padding: 3px 8px; border-radius: 5px; border: 1px solid var(--w-line, #cfd8e3); } .iub2 b { background: #0e1218; color: #fff; border-color: #0e1218; } .iuw { font: 600 14px var(--cond); color: var(--w-text, #0b1019); } .iuw span { color: var(--obj); } .iuc { color: var(--dim); } .ium { padding: 5px 8px; border-radius: 8px 8px 2px 8px; background: var(--w-surface2, #f1f4f8); color: var(--w-text, #0b1019); justify-self: end; } .iut { padding: 5px 8px; border-radius: 8px 8px 8px 2px; border: 1px solid var(--soft); }
.iafter { margin: 16px 0 10px; } .iafter p { margin: 0; color: var(--ink2); font-size: 13px; } .itr { width: 100%; border-collapse: collapse; font-size: 13px; margin: 0 0 10px; } .itr th, .itr td { text-align: left; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--soft); vertical-align: top; } .itr th { color: var(--dim); font-weight: 500; }
.isoon .inote { padding: 8px 12px; border: 1px solid var(--w-line, #cfd8e3); border-radius: 8px; background: var(--w-surface2, #f1f4f8); color: var(--w-text, #0b1019); } .iplan { margin: 0 0 12px; padding-left: 20px; color: var(--ink2); } .iplan li { margin: 0 0 4px; }
.isoon { padding: 4px 0 8px; } .isoon .h4 { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; } .isoon p { margin: 0 0 8px; color: var(--ink2); max-width: 64ch; }
@media (max-width: 900px) { .isteps li { grid-template-columns: 28px minmax(0, 1fr); } .isteps .iui { grid-column: 2; } .igbtn { min-height: 44px; } }
.igbtn.go { background: var(--w-strong, #0b1019); border-color: var(--w-strong, #0b1019); color: #fff; } .igbtn.quiet { background: none; border-color: transparent; color: var(--ink2); } .ipanel .btn.cp { height: 32px; } .itabs .btn.quiet { border: 0; background: none; color: var(--ink2); cursor: pointer; font: 500 13px var(--cond); } .ipanel .h4 { margin: 10px 0 6px; font: 600 14px var(--stencil); } .ipanel p { font-size: 13.5px; }