/* ============================================================================================
   integrations-overage.css — the integration tiles and their modal (2026-09-17)

   WHAT THIS IS
   Every page's linked CSS is held to 40 KB gzipped (scripts/verify.mjs, rule P2). The shared sheet
   is at its line, so the styles only /partners and /integrations need live here, linked from those
   two records' `stylesheets` field with `data-overage`, the way go-overage.css serves the landing
   pages. The modal's own chrome is shared and stays in overlay-overage.css, which both pages link
   too; nothing here restyles the dialog itself.

   HOW IT IS MEASURED
   The verifier leaves this sheet out of the P2 total and reports it on its own line
   ("overage stylesheet N bytes gzipped").

   TO MERGE IT BACK
   When the shared sheet has room, move these rules into src/styles and drop the two records'
   `stylesheets` entries.

   DESIGN RECORD
   docs/superpowers/specs/2026-09-17-partner-and-integrations-pages-design.md
   ============================================================================================ */

/* ---- the group heading and its contents list ------------------------------------------- */

.integrations .int-group {
  font-size: var(--fs-subhead);
  line-height: var(--lh-tight);
  margin: var(--s-7) 0 var(--s-5);
}
.integrations .int-group:first-of-type { margin-top: var(--s-6); }

.int-contents { margin-top: var(--s-5); }
.int-contents ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
}
.int-contents a {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  font-size: var(--fs-small);
  color: var(--ink);
  text-decoration: none;
}
.int-contents a:hover { background: var(--bg-2); border-color: var(--border-strong); }

/* ---- the tiles -------------------------------------------------------------------------- */

.int-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--s-4);
}
/* A named set is a composed row, not a catalogue: four across so eight reads 4 + 4 rather than
   whatever auto-fill leaves over at the width in play. */
@media (min-width: 900px) {
  .int-tiles--set { grid-template-columns: repeat(4, 1fr); }
}

.int-tile {
  background: var(--tile);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  /* the dot a deep link lands on should not sit under the sticky bar */
  scroll-margin-top: 120px;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
/* V4 §6: the lift, the border toward the card's hue, the deeper shadow */
.int-tile:hover,
.int-tile:focus-within {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px rgba(60, 45, 110, .13);
}

/* The mark is centred in the tile: with the kicker gone and the name hidden behind the logo, the tile
   is one object, and every logo lands on the same centre line however wide its mark is. */
.int-open {
  display: grid;
  place-items: center;
  min-height: 108px;
  padding: var(--s-5) var(--s-4);
  text-decoration: none;
  color: inherit;
}
.int-open:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-card); }

/* The cell is the image's own box, both sides capped, the ratio untouched (V4 §23). The catalogue's
   marks run from about 9.5:1 to 1:1, so a width-only rule would size them wildly apart. */
.int-logo {
  width: 100%;
  max-width: 132px;
  height: 46px;
  object-fit: contain;
  /* One tone at rest, colour under the pointer. NOT the logo strip's `contrast(0)` flattening: several
     catalogue marks knock their wordmark out in white inside a coloured shape (Salesforce's cloud), and
     flattening to a single value erases the name inside the shape. Greyscale alone keeps that contrast. */
  filter: grayscale(1);
  opacity: .66;
  transition: filter var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.int-tile:hover .int-logo,
.int-tile:focus-within .int-logo { filter: none; opacity: 1; }

/* A vendor with no logo file has no mark to draw, so its name takes the mark's room instead of being
   printed twice. The kicker still sits between them. */
/* Its name is the only mark it has, so it reads at the size a mark would. */
.int-tile--nomark .int-name { font-size: var(--fs-card); max-width: 14ch; }

.int-name {
  font-size: var(--fs-label);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-align: center;
  margin: 0;
}

/* The paragraph is the tile's own content and stays in the HTML; the modal borrows it, the way a tab
   panel's copy is present and one panel shown (BLOG_STRUCTURE §22). It is never removed from the DOM,
   so it is extractable, reachable without scripts, and printed. */
.int-blurb { display: none; }
.int-tile:target .int-blurb {
  display: block;
  margin: 0;
  padding: 0 var(--s-4) var(--s-4);
  font-size: var(--fs-small);
  color: var(--body);
}
.int-tile:target { border-color: var(--orange); }

@media (scripting: none) {
  .int-blurb { display: block; margin: 0; padding: 0 var(--s-4) var(--s-4); font-size: var(--fs-small); color: var(--body); }
}
@media print {
  .int-blurb { display: block; }
}

/* ---- the fold ---------------------------------------------------------------------------
   islands/TableFold.astro's contract: the list carries data-truncated and the button names it with
   aria-controls. Every vendor is in the HTML; without scripting they all simply show.             */

.int-tiles[data-truncated] > .ct-more { display: none; }
@media (scripting: none) {
  .int-tiles[data-truncated] > .ct-more { display: block; }
  .int-fold { display: none; }
}
@media print {
  .int-tiles[data-truncated] > .ct-more { display: block; }
  .int-fold { display: none; }
}
.int-fold { margin: var(--s-4) 0 0; }

/* ---- see all ---------------------------------------------------------------------------- */

.int-seeall { margin: var(--s-6) 0 0; }

/* ---- what the dialog borrows ------------------------------------------------------------
   The dialog's own chrome (the corner, the hairline, the shadow, the close disc, the backdrop)
   is overlay-overage.css's. These rules only place the copy cloned out of the tile.            */

.modal--integration .modal-body { max-width: 520px; }
.modal--integration [data-int-borrowed].int-logo {
  display: block;
  max-width: 168px;
  height: 56px;
  margin: 0 0 var(--s-4);
  filter: none;
}
.modal--integration [data-int-borrowed].int-blurb {
  display: block;
  margin: 0 0 var(--s-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--body);
}
.modal--integration .int-modal-actions { margin: 0; }

/* ---- narrow ------------------------------------------------------------------------------ */

@media (max-width: 640px) {
  .int-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3); }
  .int-logo { height: 38px; max-width: 108px; }
  .int-open { min-height: 84px; }
  .integrations .int-group { font-size: var(--fs-card); margin-top: var(--s-6); }
}