/* /connectors — the hero object, and this page's v2 corrections.
 *
 * The object is a PRODUCT SHOT of the Dash's Connectors page, the same kind of thing
 * /wire's terminal and /pricing's credit slip are. Every string in it is the product's
 * own: the taglines are `dash/src/components/ConnectorsPanel.tsx`'s registry entries,
 * shortened, and the two states are the only two that file has — `Connected` and
 * `Not connected`. One row is not connected on purpose: an all-green mock is not a
 * screen, it is a poster of one.
 */
/* The slot is `.credit-visual`'s, verbatim: `flex: 1 1 380px` is the SAME basis
   `.phead-row .phead` carries, which is what makes the row split into two even halves.
   A `0 1 280px` slot does not take its half, so the head ran 668px against /pricing's
   474 and the two heroes read as different pages. Object width matches too: 320, like
   `.credit-slip` and `.claim-ticket`. */
.conn-visual { flex: 1 1 380px; padding: 6px; display: flex; justify-content: center; align-items: center; }
/* Same reset the other hero objects carry: this basis sizes WIDTH in the row layout
   and would size HEIGHT once .phead-row flips to a column (styles.css, =<620). */
@media (max-width: 620px) { .conn-visual { flex: none; display: flex; justify-content: center; margin-top: 6px; } }

/* A panel on the page is --panel, one measured step UP (1.22), which is where
   .credit-slip and .claim-ticket sit. --panel-sunk here would be 1.01 against the page
   — no step at all, an object held together by its border alone. The header bar then
   takes no fill of its own: two fills inside one object is the mush the ladder exists
   to stop, so it is a hairline and nothing else. */
.conn-panel { position: relative; width: 320px; background: var(--panel);
  border: 1px solid var(--panel-line); border-radius: var(--radius-card); overflow: hidden; }

@media (max-width: 620px) { .conn-panel { width: 100%; max-width: 320px; } }

/* No header. It said "connectors" on the connectors page and "three kinds" above three
   rows you can count, so it was a caption for something already legible. Without it the
   first row is the object's top edge and takes the panel's radius. */
.conn-rows { display: grid; }
/* A row says ONE sentence: migrate FROM these, sync WITH these, notify TO these. That
   is the whole job of this object, and everything else it used to carry was competing
   with it. Gone: the direction mark, because the preposition says the direction in
   words and English beats a glyph that has to be decoded; and the scope value
   (per org / per repo / per person), because the three sections below already state it
   in their own facts and a hero repeating a detail is a hero with a detail in it.
   The marks stay: they are the OBJECT of the preposition, so the sentence needs them. */
.conn-row { display: grid; grid-template-columns: 92px 1fr; align-items: center;
  gap: 14px; padding: 15px 18px; min-width: 0; }
.conn-row + .conn-row { border-top: 1px solid var(--surface-border); }
/* Verb loud, preposition quiet — the same two-tone the product page's `.pd-call b`
   uses, so the three verbs read as a column and the prepositions read as the joins. */
.conn-k { font: 400 var(--t-value)/1 var(--mono); color: var(--muted); }
.conn-k b { color: var(--fg); font-weight: 500; }
.conn-ms { display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  min-width: 0; flex-wrap: wrap; }
/* the size lives here, not on the mark: the brand SVGs ship at 18 and this page shows
   them at two scales — small in the hero row, larger in the section piles */
.conn-m svg { width: 20px; height: 20px; display: block; }
.conn-m { display: flex; flex: none; }
/* Below ~340 the panel is 272 and the marks column falls to 130, where five 20px marks
   (136 with their gaps) fold to a second line and the row stops being one sentence.
   A media query, not a container one: `container-type` is on `.ill` only and this panel
   is not one. */
@media (max-width: 340px) {
  .conn-m svg { width: 16px; height: 16px; }
  .conn-row { padding: 14px 14px; gap: 10px; }
}

/* At the narrowest the marks give up their spacing before anything else does: the row's
   four parts all carry meaning, so none of them can go. */
/* NO container query here. `container-type: inline-size` is set on `.ill` only, and the
   hero panel is not one, so the rule that used to sit here never matched anything at any
   width — it was dead when it was written. The row does not need it: the marks column is
   `1fr` and `.conn-ms` wraps, so five marks fold to a second line before anything
   overflows. Measured at 320px: 116px of marks in a 148px column. */

/* ------------------------------------------------------------------------
 * SECTION SYSTEM v2, applied to /connectors' own components.
 * ---------------------------------------------------------------------- */
/* .logo-chip's v2 corrections went with the pills themselves — the brands are a
   plate now, not a row of chips. */

/* ------------------------------------------------------------------------
 * THE BRAND PLATE — the section's own object, on the right.
 *
 * These were a row of pills under the prose, which made them read as filters or as
 * chips you could press. They are neither: they are WHAT this kind of connector talks
 * to, so they belong beside the claim as its object, the way every other v2 section
 * pairs a claim with one. The label names the relationship, so the plate says what it
 * is without the prose having to.
 * ---------------------------------------------------------------------- */
.block.split > .brand-plate { grid-column: 2; grid-row: 2 / span 3; align-self: start; margin-top: 7.16px; }
/* .ill.bare in styles.css now carries the frameless contract; kept here so the plate
   reads the same on its own. */
.brand-plate { display: block; padding: 0; background: none; border: 0; overflow: visible;
  margin-top: 0; }

/* THE SCATTER.
 *
 * These were five one-line rows inside a card, which is a MENU: five equal items,
 * read top to bottom, and the card ended up mostly empty. Then they were a bento
 * mosaic, which is still a table — the cells just had different spans.
 *
 * This is a PILE. Each brand is its own small panel, the panels are laid out at
 * hand-placed offsets, and they OVERLAP. Nothing about a set of trackers you can
 * import from is ordered, and a layout that implies an order is telling a lie
 * that a reader then has to decode. A pile says "these, in no particular order"
 * in one look, which is exactly the fact.
 *
 * The card around them is gone. A loose group inside a bordered box reads as
 * spilled contents; the group IS the object.
 *
 * Three rules keep a pile from being a mess:
 *   1. Every tile is axis-aligned. The scatter is in the POSITIONS, never in the
 *      rotation — tilted tiles read as a decorative sticker wall, and this is a
 *      list of products we actually support.
 *   2. Every tile overlaps at least one neighbour, and every overlap is a CORNER.
 *      A tile that touches nothing has fallen off; an overlap across the middle
 *      buries the mark or the name underneath it.
 *   3. The tile on top is the one that matters most, and it is also the largest.
 *      Size and stacking say the same thing, so neither has to be decoded.
 *
 * Every offset is a PERCENTAGE of the field and every tile is sized in percent
 * too, so the whole composition scales with the column instead of needing a
 * second layout further down. */
/* The pile is narrower than its column whenever there are fewer than five of
   them, so it is CENTRED in it. Both edges were tried and both are worse: left
   leaves the whole right of the section empty, right opens a gap between the
   prose and the object wide enough that the two stop reading as one row. Centred,
   the object's own weight sits where the column's weight is. */
.bp-scatter { position: relative; width: 100%; margin-inline: auto; }
.bp-t { position: absolute; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 9%;
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius-card);
  /* A cast, so the stacking is read as depth and not as a border crossing a
     border. Same treatment the page's other floating objects take (styles.css
     `.credit-slip::before` and siblings), scaled to a tile: a fifth of the ink
     and half the lift on light, where a pale tile on a warm ground needs a hint
     of contact rather than a cast that reads as a second shape. */
  box-shadow: 0 12px 24px -16px var(--cast); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bp-t { box-shadow: 0 8px 18px -14px var(--cast); }
}
:root[data-theme="light"] .bp-t { box-shadow: 0 8px 18px -14px var(--cast); }
/* A panel takes the layer above the ground it sits on; on a band it steps the
   other way, which is the same rule .card follows two sections up. */
.block.band .bp-t { background: var(--panel-sunk); }
/* The mark is a share of its OWN tile, so the size hierarchy comes free from the
   tile sizes and there is no per-brand number to keep in step. */
.bp-t svg { width: 30%; height: auto; flex: none; }
/* Every name is the same ink at the same size. The first tile used to be brighter
   and a step larger because it was the pile's HERO; once the pile became a fanned
   row of equals there is nothing for it to lead, and a brighter Jira just claimed
   an importance the page does not mean. */
.bp-t span { font: 400 var(--t-value)/1 var(--mono);
  color: var(--secondary); white-space: nowrap; }

/* SCALE. The tile is ~100px in all three piles and the FIELD is whatever that
   many tiles need — not the other way round. Sized off the text beside it: the
   lede plus its link is 144px, so a pile that ran 300 tall left the section
   bottom-heavy on the right and empty on the left. These land at ~160, one object
   slightly taller than its paragraph rather than twice it. The width follows from
   the count, so the two-brand pile is a small object and is not inflated to fill
   a column it has nothing to put in.
   The pile is one FANNED row, not two. At this height a second row can only drop
   half a tile, so the tile above it covers the mark underneath — measured, not
   guessed: `pilecheck.py` failed on exactly that (ClickUp's mark under Linear)
   before this. The scatter is carried by the vertical jitter instead, which runs
   a third of a tile and reads as a hand-laid group rather than a row. */

/* five — Jira leads, because a backlog worth moving is usually in Jira. */
.s5 { max-width: 420px; aspect-ratio: 44 / 17; }
.s5 .t1 { width: 25%; left:  0%; top: 26%; z-index: 5; }
.s5 .t2 { width: 23%; left: 21%; top:  0%; z-index: 4; }
.s5 .t3 { width: 24%; left: 40%; top: 18%; z-index: 3; }
.s5 .t4 { width: 22%; left: 60%; top:  6%; z-index: 2; }
.s5 .t5 { width: 22%; left: 78%; top: 30%; z-index: 1; }

/* three — Slack leads; it is the one this feature was built against. */
/* Four notify channels since email joined the fan-out (RTSC-695): one more
   zigzag step than .s3, same grammar — vertical neighbours on opposite sides,
   z falling left to right, corner clips only. */
.s4 { max-width: 340px; aspect-ratio: 56 / 26; }
.s4 .t1 { width: 30%; left: 0%;  top: 28%; z-index: 4; }
.s4 .t2 { width: 29%; left: 26%; top: 0%;  z-index: 3; }
.s4 .t3 { width: 29%; left: 51%; top: 22%; z-index: 2; }
.s4 .t4 { width: 29%; left: 71%; top: 2%;  z-index: 1; }
/* Email has no brand hex, so it takes --rt-mail (tokens.css). The glyph is also
   drawn ~13% SMALLER than the brand marks: it is a filled rectangle that fills its
   whole box, where Telegram's plane and Discord's blob carry a lot of negative
   space, so at equal box size it reads bigger and heavier than either. */
.bp-mail { color: var(--rt-mail); }
/* Drawn on the 15-grid like everything we draw (RTSC-807): the same envelope the
   Dash's connector row uses, so no per-mark scale compensation. */
.conn-mail { color: var(--rt-mail); }

/* two — a pair still overlaps, or the pile reads as a two-column table again. */
.s2 { max-width: 190px; aspect-ratio: 44 / 37; }
.s2 .t1 { width: 56%; left:  0%; top: 24%; z-index: 2; }
.s2 .t2 { width: 53%; left: 47%; top:  0%; z-index: 1; }

/* Under ~420px the column is a phone's, and the landscape pile puts a 53px name
   inside an 81px tile. A phone has height to spare and none to waste sideways, so
   the pile turns PORTRAIT: same five tiles, same overlaps, re-placed down instead
   of across, and each one half again as big. Hiding the names was the other
   option and it is worse — nobody recognises Shortcut from its mark alone. */
@container (max-width: 420px) {
  .bp-scatter { max-width: none; }

  /* The pile reads in list order, and it is MIRRORED to get there. The original
     placement was compact because vertical neighbours sit on opposite sides, so
     they only clip corners and the band pitch can stay short — but it ran
     top-right to bottom-left, so the second tile read first. Reflecting it
     (left = 100 - left - width) keeps every overlap and the exact height, and
     puts the first tile at the top. Re-laying it out as a left-to-right zigzag
     instead cost 5 vertical steps rather than 3 and grew the plate by a fifth. */
  .s5 { aspect-ratio: 44 / 46; }
  .s5 .t1 { width: 42%; left: 20%; top:  0%; }
  .s5 .t2 { width: 46%; left: 54%; top: 18%; }
  .s5 .t3 { width: 38%; left:  0%; top: 34%; }
  .s5 .t4 { width: 36%; left: 64%; top: 56%; }
  .s5 .t5 { width: 36%; left: 32%; top: 62%; }

  .s2 { aspect-ratio: 44 / 34; }
  .s4 { aspect-ratio: 44 / 56; }
  .s4 .t1 { width: 44%; left: 10%; top:  2%; }
  .s4 .t2 { width: 48%; left: 50%; top: 20%; }
  .s4 .t3 { width: 46%; left:  6%; top: 40%; }
  .s4 .t4 { width: 44%; left: 50%; top: 60%; }
  .s2 .t1 { width: 58%; left:  1%; top:  2%; }
  .s2 .t2 { width: 54%; left: 44%; top: 28%; }
}

/* Once the split collapses (=<900, styles.css) the plate follows the prose in normal
   flow and takes the site's own text-to-object gap, 32 and 22. */
@media (max-width: 900px) { .block.split > .brand-plate { margin-top: 32px; } }
@media (max-width: 640px) { .block.split > .brand-plate { margin-top: 22px; } }