/* The public Integrations page.
   Loaded after landing.css, which supplies the tokens, the shell, the nav,
   the footer, the buttons and the type scale. Nothing is redefined here —
   this file only adds the parts that exist on this page and nowhere else. */

/* ---- Hiding ------------------------------------------------------------
   The filter script hides a card by setting the `hidden` property. The UA
   rule behind that attribute is `display: none`, and ANY author rule that
   sets `display` on the same element beats it — so the flex display that the
   card rule sets below would keep every filtered-out card on screen while the
   count went on reporting the truth. That is the divergence this rule stops,
   and landing.css already carries the same guard for .lc-menu and .lc-pane.
   Declared once, ahead of anything that sets `display`, so a new component on
   this page cannot reintroduce it. */

[hidden] { display: none !important; }

/* ---- Active nav destination ------------------------------------------- */

.lc-nav-links a.is-active { color: var(--text); }
.lc-nav-links a.is-active::after {
  content: "";
  display: block;
  height: 1.5px;
  margin-top: 3px;
  border-radius: 1px;
  background: var(--cyan);
}

/* ---- Hero -------------------------------------------------------------- */

/* Much shorter than the landing hero: this page is a directory, so the list
   has to start near the top. The search field is the real hero here. */
.ig-hero { padding: 92px 0 26px; }

.ig-h1 {
  margin: 10px 0 0;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.08;
  max-width: 17ch;
}

.ig-lede {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-secondary);
}
.ig-lede em { color: var(--text); font-style: normal; font-weight: 550; }

/* ---- Search ------------------------------------------------------------ */

.ig-search { margin: 26px 0 0; max-width: 520px; }

.ig-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.ig-search-box:focus-within { border-color: var(--cyan); background: var(--surface-raised); }
.ig-search-ico { display: flex; color: var(--text-muted); }

.ig-search-box input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  outline: none;
}
.ig-search-box input::placeholder { color: var(--text-muted); }
.ig-search-box input::-webkit-search-cancel-button { display: none; }

.ig-clear {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: 19px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  border-radius: 5px;
}
.ig-clear:hover { color: var(--text); }

/* ---- Filters ----------------------------------------------------------- */

.ig-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
.ig-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.ig-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.ig-chip:hover { border-color: var(--border-strong); color: var(--text); }
.ig-chip.is-on {
  border-color: rgba(45, 217, 206, .45);
  background: rgba(45, 217, 206, .09);
  color: var(--cyan);
}
.ig-chip-sm { padding: 6px 11px; font-size: 12.5px; }
.ig-chip-n { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.ig-chip.is-on .ig-chip-n { color: inherit; opacity: .75; }

.ig-count { margin: 16px 0 0; font-size: 12.5px; color: var(--text-muted); }

/* ---- The grid ---------------------------------------------------------- */

.ig-list-wrap { padding: 8px 0 24px; }

.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* A column whose foot is pinned to the bottom, so a platform with one market
   stands the same height as its neighbour with four. */
.ig-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
/* Not integrated yet reads as quieter, not broken. It is still a real answer
   to "is my exchange here?" — just not the answer someone hoped for. */
.ig-card.is-planned { background: none; border-style: dashed; }
.ig-card.is-planned .ig-id h2 { color: var(--text-secondary); }

.ig-card-top { display: flex; align-items: flex-start; gap: 11px; }

.ig-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  /* The letter this tile falls back to is centred by place-items, which
     centres the LINE box — and an inherited line-height of 1.5 on a 13px font
     makes that box 19.5px, so it lands on a half pixel and the letter sits
     0.75px above the marks beside it. Pinning the line box to the font size
     puts it back on the same baseline as every real mark. */
  line-height: 1;
  overflow: hidden;
}
.ig-logo svg { display: block; }

.ig-id { flex: 1; min-width: 0; }
/* The venue name is the card's own heading, and the card sits directly
   under the page title — so h2, with the two labels inside it at h3. The
   outline used to jump from h1 straight to h3 over the whole grid. */
.ig-id h2 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ig-id p { margin: 2px 0 0; font-size: 11.5px; color: var(--text-muted); }

.ig-state {
  flex: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.ig-state.is-planned { background: var(--surface-raised); color: var(--text-muted); }
.ig-state.is-paused { background: rgba(244, 183, 64, .13); color: var(--amber); }

.ig-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ig-method {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(45, 217, 206, .09);
  color: var(--cyan);
  font-size: 11.5px;
  font-weight: 550;
}

.ig-markets { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.ig-market {
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.ig-cover { padding: 4px 8px; border-radius: 6px; background: var(--surface-raised); color: var(--text-muted); font-size: 11px; }

.ig-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }

/* ---- Markets on the card ---------------------------------------------
   Three states, and the word carries the answer as much as the colour does:
   a reader who cannot separate green from amber still reads Live, Available
   or Not supported, and a screen reader reads the same three words. */
.ig-clabel {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ig-mks { margin-top: 2px; }

.ig-mk {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 12.5px;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.ig-mk:first-of-type { border-top: none; }
.ig-mk-name { color: var(--text-secondary); }
.ig-mk-state { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 600; white-space: nowrap; }
.ig-mk-mark { width: 11px; text-align: center; font-weight: 700; }

.ig-mk.is-live .ig-mk-state, .ig-mk-mark.is-live { color: var(--green); }
.ig-mk.is-available .ig-mk-state, .ig-mk-mark.is-available { color: var(--amber); }
.ig-mk.is-none .ig-mk-state, .ig-mk-mark.is-none { color: var(--text-muted); }

/* ---- The foot: one line about how it connects ------------------------- */
/* margin-top:auto pins it to the bottom, which is what keeps a card with
   one market the same height as a card with four. */
.ig-card-foot { margin-top: auto; padding-top: 2px; }

.ig-conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
}
.ig-conn svg { color: var(--text-muted); }
.ig-conn.is-none, .ig-conn.is-paused { color: var(--text-muted); }
.ig-conn.is-paused { color: var(--amber); }

/* ---- View details ----------------------------------------------------- */
/* A <details>, so it is in the HTML a crawler reads, opens with the keyboard
   and works with the script switched off. */
.ig-more { border-top: 1px solid var(--border); margin-top: 2px; }
.ig-more > summary {
  list-style: none;
  cursor: pointer;
  padding-top: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
}
.ig-more > summary::-webkit-details-marker { display: none; }
.ig-more > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.ig-more .ig-more-shut { display: none; }
.ig-more[open] .ig-more-open { display: none; }
.ig-more[open] .ig-more-shut { display: inline; }

/* Open, the panel floats under its card rather than pushing the grid row
   taller — otherwise reading one platform's evidence leaves every card
   beside it stretched to match, with a hand's width of empty space. Only one
   is open at a time, so nothing ever overlaps anything else that is open. */
.ig-card { position: relative; }

@media (min-width: 561px) {
  .ig-more[open] > .ig-detail {
    position: absolute;
    inset-inline: -1px;
    top: 100%;
    z-index: 5;
    max-height: 440px;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 14px;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--surface-raised, var(--surface));
    box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
  }
}

.ig-detail { padding: 10px 0 2px; display: grid; gap: 11px; }
.ig-detail-empty { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.ig-dsec h4 {
  margin: 0 0 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ig-dsec p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.ig-dlist { margin: 0; padding-inline-start: 16px; display: grid; gap: 4px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

.ig-dmarkets { margin: 0; display: grid; gap: 7px; }
.ig-dmarkets > div { display: grid; grid-template-columns: 92px 1fr; gap: 10px; font-size: 12px; }
.ig-dmarkets dt { display: flex; align-items: baseline; gap: 5px; color: var(--text-secondary); }
.ig-dmarkets dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; color: var(--text-muted); }
.ig-dmarkets dd b { color: var(--text); font-weight: 600; }
.ig-dreach { padding: 1px 7px; border-radius: 5px; background: var(--surface-raised); }
.ig-dnote { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-muted); }

/* ---- How verification works ------------------------------------------- */
.ig-how { margin: 0; }
.ig-how > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.ig-how > summary::-webkit-details-marker { display: none; }
.ig-how > summary:hover { color: var(--text-secondary); }
.ig-how > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.ig-how-body {
  margin: 10px 0 0;
  padding: 12px 14px;
  display: grid;
  gap: 9px;
  max-width: 640px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.ig-how-body > div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 12px; line-height: 1.5; }
.ig-how-body dt { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.ig-how-body dd { margin: 0; color: var(--text-secondary); }

.ig-meta { display: grid; gap: 8px; margin-top: 14px; }

/* The market and connection rows share a line on a wide screen. A flex item
   will not shrink below its content unless told to, which is why both this
   row and its children carry min-width:0 — without it the chips push the
   whole page sideways instead of scrolling inside their own row. */
.ig-filters > * { min-width: 0; max-width: 100%; }

@media (max-width: 560px) {
  .ig-how-body > div { grid-template-columns: 1fr; gap: 2px; }
  .ig-dmarkets > div { grid-template-columns: 1fr; gap: 2px; }
}

.ig-legend { margin: 8px 0 0; font-size: 11.5px; color: var(--text-muted); }

/* Connector badge tones. The text names the state; the tone only echoes it. */
.ig-state.is-live { background: rgba(52, 211, 153, .13); color: var(--green); }
.ig-state.is-mixed { background: rgba(34, 211, 238, .13); color: var(--cyan); }
.ig-state.is-access, .ig-state.is-implemented { background: rgba(244, 183, 64, .13); color: var(--amber); }
.ig-state.is-import { background: rgba(34, 211, 238, .13); color: var(--cyan); }

@media (max-width: 480px) {
  .ig-row { grid-template-columns: 56px 1fr; }
}

/* ---- No result --------------------------------------------------------- */

.ig-empty {
  padding: 40px 22px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
}
.ig-empty h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.018em; }
.ig-empty p { margin: 10px auto 18px; max-width: 54ch; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

/* ---- Sections ---------------------------------------------------------- */

.ig-section { padding: 62px 0; border-top: 1px solid var(--border); }
.ig-section:first-of-type { border-top: 0; }

.ig-h2 {
  margin: 10px 0 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 650;
  letter-spacing: -.026em;
  line-height: 1.16;
  max-width: 22ch;
}

.ig-section-head { max-width: 70ch; margin-bottom: 30px; }
.ig-section-head .ig-lede { margin-top: 12px; }

.ig-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; }
.ig-split .ig-lede + .ig-lede { margin-top: 12px; }

.ig-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.ig-col { padding: 17px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ig-col h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.ig-col p { margin: 0; font-size: 12.5px; line-height: 1.62; color: var(--text-secondary); }

/* ---- Coverage illustration -------------------------------------------- */

.ig-demo { margin: 0; }
.ig-demo-card { padding: 17px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }

.ig-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ig-demo-head span:first-child { font-size: 13px; font-weight: 600; }
.ig-demo-flag { padding: 3px 9px; border-radius: 999px; background: rgba(244, 183, 64, .13); color: var(--amber); font-size: 10.5px; font-weight: 600; }

.ig-demo-rows { margin: 0; display: grid; gap: 9px; }
.ig-demo-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ig-demo-rows dt { font-size: 12px; color: var(--text-muted); }
.ig-demo-rows dd { margin: 0; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: right; }
.ig-demo-rows dd.is-gap { color: var(--amber); }

.ig-demo-cta { display: inline-block; margin-top: 15px; font-size: 12.5px; font-weight: 550; color: var(--cyan); }
.ig-demo figcaption { margin: 12px 2px 0; font-size: 11.5px; line-height: 1.55; color: var(--text-muted); }

/* ---- Final CTA --------------------------------------------------------- */

.ig-final { padding: 70px 0 84px; border-top: 1px solid var(--border); text-align: center; }
.ig-final .ig-h2 { margin: 0 auto 22px; max-width: 24ch; }

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 1180px) {
  .ig-split { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 760px) {
  .ig-hero { padding: 78px 0 22px; }
  .ig-section { padding: 46px 0; }
  .ig-final { padding: 52px 0 62px; }
  .ig-grid { grid-template-columns: 1fr; }
  .ig-filters { flex-direction: column; align-items: stretch; gap: 10px; min-width: 0; }
  /* The one folder row scrolls sideways inside itself rather than wrapping
     into three lines above the list. */
  /* Chips scroll sideways in their own row rather than wrapping into four
     lines above the list on a phone.
     min-width:0 is what makes that work: a nowrap flex container's minimum
     width is the sum of its items, so without it the row refuses to be
     narrower than all five chips and pushes the whole page sideways instead
     of scrolling inside itself. */
  .ig-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    min-width: 0;
    max-width: 100%;
  }
  .ig-chips::-webkit-scrollbar { display: none; }
  .ig-chip { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ig-chip, .ig-search-box { transition: none; }
}