/* INTEGRATIONS. Page: /ui/integrations-page.js. Tokens and components:
   /ui/rl-ui.css; the page frame: /ui/rl-page.css.

   A directory page, so the design job is one thing: make the STATE of each
   card readable across the room. Four states, one dot each, and the one that
   matters — switched on but unfinished, where the workspace believes it is
   live and nothing is arriving — wears the warning colour and says what is
   missing in the card's own sentence. */

.rlx.ig-pg{overflow:hidden}
/* A capped column. Four auto-filled columns out of 1421px left every group
   trailing an empty one; three inside a cap line the groups up with each
   other and stop a card from stretching past a readable measure. */
.rlx .ig-body{flex:1;min-height:0;overflow-y:auto;padding-bottom:8px}
.rlx .ig-in{width:100%;max-width:1160px}

/* The banner: only when something is on but unfinished. */
.rlx .ig-warn{margin-bottom:18px}
.rlx .ig-warn .rl-btn{flex:none;align-self:center}

/* A group is a heading and a sentence saying what the whole group is for —
   the categories are the user's mental model, not the vendors'. */
.rlx .ig-grp{display:flex;align-items:flex-end;gap:16px;margin:26px 0 13px;padding-bottom:11px;border-bottom:1px solid var(--rl-line)}
.rlx .ig-grp:first-child{margin-top:2px}
.rlx .ig-grp .t{flex:1;min-width:0}
.rlx .ig-grp h2{margin:0;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--rl-ink)}
.rlx .ig-grp p{margin:3px 0 0;font-size:12.5px;line-height:1.55;color:var(--rl-ink3);max-width:76ch}
.rlx .ig-grp .ig-act{flex:none;margin-bottom:-1px}

.rlx .ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}

/* The card. A left edge carries the state colour, because a dot alone is not
   enough to scan a grid by. */
.rlx .ig-card{display:flex;flex-direction:column;position:relative;overflow:hidden;padding:17px 18px 16px;border-radius:var(--rl-r16);
  background:linear-gradient(180deg,#fff,#fcfcfe);box-shadow:var(--rl-sh-xs),inset 0 0 0 1px var(--rl-line);
  cursor:pointer;transition:box-shadow .16s var(--rl-ease),transform .16s var(--rl-ease)}
/* The state as an edge as well as a dot: a dot alone cannot be scanned down a
   column of cards, and the tint is what the eye lands on first. */
.rlx .ig-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--c,transparent)}
.rlx .ig-card::after{content:"";position:absolute;left:0;top:0;right:0;height:78px;pointer-events:none;
  background:linear-gradient(180deg,var(--tint,transparent),transparent)}
.rlx .ig-card.is-working{--tint:color-mix(in srgb,var(--rl-ok) 5%,transparent)}
.rlx .ig-card.is-unfinished{--tint:color-mix(in srgb,var(--rl-warn) 7%,transparent)}
.rlx .ig-card.is-ready{--tint:color-mix(in srgb,var(--rl-info) 5%,transparent)}
.rlx .ig-card > *{position:relative}
.rlx .ig-card:hover{transform:translateY(-2px);box-shadow:var(--rl-sh-md),inset 0 0 0 1px var(--rl-line)}
.rlx .ig-card:focus-visible{outline:0;box-shadow:var(--rl-sh-md),inset 0 0 0 2px var(--rl-acc)}
.rlx .ig-card.is-working{--c:var(--rl-ok)}
.rlx .ig-card.is-unfinished{--c:var(--rl-warn)}
.rlx .ig-card.is-ready{--c:var(--rl-info)}
.rlx .ig-card.is-export{cursor:default}
.rlx .ig-card.is-export:hover{transform:none;box-shadow:var(--rl-sh-xs),inset 0 0 0 1px var(--rl-line)}

.rlx .ig-card .top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.rlx .ig-card .lg{flex:none;width:36px;height:36px;border-radius:var(--rl-r10);display:grid;place-items:center;
  background:#fff;box-shadow:var(--rl-sh-xs),inset 0 0 0 1px var(--rl-line);color:var(--rl-ink2);overflow:hidden}
.rlx .ig-card .lg{position:relative}
.rlx .ig-card .lg img{position:absolute;inset:0;margin:auto;width:20px;height:20px;display:block;border-radius:4px;background:#fff}
.rlx .ig-card .top b{flex:1;min-width:0;font-size:14.5px;font-weight:700;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ig-card p{margin:0;font-size:12.5px;line-height:1.62;color:var(--rl-ink3)}
.rlx .ig-card .note{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--rl-ink4)}
.rlx .ig-card .note .rl-ic{flex:none;margin-top:2px}
.rlx .ig-card .ft{margin-top:auto;padding-top:15px}
.rlx .ig-card.is-off{opacity:.92}

/* The state chip. Its own dot, its own colour, and it never claims more than
   the server's flags support. */
.rlx .ig-card .st{flex:none;display:inline-flex;align-items:center;gap:6px;height:21px;padding:0 9px 0 8px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  color:var(--rl-ink3);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-hair)}
.rlx .ig-card .st i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.rlx .ig-card .st.is-working{color:var(--rl-ok);background:color-mix(in srgb,var(--rl-ok) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-ok) 20%,transparent)}
.rlx .ig-card .st.is-unfinished{color:var(--rl-warn);background:color-mix(in srgb,var(--rl-warn) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-warn) 24%,transparent)}
.rlx .ig-card .st.is-ready{color:var(--rl-info);background:color-mix(in srgb,var(--rl-info) 8%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rl-info) 20%,transparent)}
.rlx .ig-card .st.is-export{color:var(--rl-ink4)}

/* A value you copy rather than type: the input and its button are one control. */
.rlx .ig-copy{display:flex;gap:8px;align-items:center}
.rlx .ig-copy .rl-ipt{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px!important}
.rlx .ig-copy .rl-btn{flex:none}

.rlx .ig-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* The file control, and what replaces it once a file is chosen. */
.rlx input.rl-ipt[type=file]{padding:9px 12px;line-height:1.4;cursor:pointer}
.rlx input.rl-ipt[type=file]::file-selector-button{margin:-2px 10px -2px -4px;padding:6px 11px;border:0;border-radius:var(--rl-r8);
  font:inherit;font-size:12.5px;font-weight:600;color:var(--rl-ink);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line);cursor:pointer}
.rlx input.rl-ipt[type=file]::file-selector-button:hover{background:var(--rl-surface3)}
.rlx .ig-file{display:flex;align-items:center;gap:9px;height:42px;padding:0 8px 0 12px;border-radius:var(--rl-r10);
  background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line);font-size:13px}
.rlx .ig-file b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlx .ig-file .rl-ic{flex:none;color:var(--rl-ink3)}
.rlx .ig-file .sp{flex:1}

/* Column mapping: the widest part of the import, so it gets its own frame. */
.rlx .ig-map{padding:14px;border-radius:var(--rl-r12);background:var(--rl-surface2);box-shadow:inset 0 0 0 1px var(--rl-line)}
.rlx .ig-map-h{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.rlx .ig-map-h b{font-size:13px;font-weight:700}
.rlx .ig-map-h span{font-size:12px;color:var(--rl-ink3)}
.rlx .ig-map-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:12px}

@media (max-width: 1180px){
  .rlx .ig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
  .rlx .ig-grid{grid-template-columns:minmax(0,1fr)}
  .rlx .ig-grp{flex-wrap:wrap;align-items:flex-start;margin-top:20px}
  .rlx .ig-grp .ig-act{width:100%;justify-content:center;margin:2px 0 0}
  .rlx .ig-warn{flex-wrap:wrap}
  .rlx .ig-warn .rl-btn{margin-left:29px}
  .rlx .ig-map-g{grid-template-columns:minmax(0,1fr)}
  .rlx .ig-copy{flex-wrap:wrap}
  .rlx .ig-copy .rl-ipt{flex-basis:100%}
}