/* connect.css — Connect AI page on the Drawing Set (rc.css primitives + this file's cx-* composition).
   Loaded on every page after style.css, so every selector here is cx-/tab-/copybtn-scoped. Colour, radius and type come from the
   --rc-* tokens only: no radius, shadow, gradient or colour of its own. The test-parsed .badge.readiness.* / .dependency-state*
   rules stay in style.css (the page now renders readiness with rc-status; those rules are kept for tests/test_connect_page.py).
   Sections: 1 head + facts + notice + jump map, 2 sections + connector cards, 3 Report Builder + Support, 4 setup tabs,
   5 code blocks + steps, 6 SQL bridge + explore, 7 phone, 8 touch floor. */

/* ============ 1 · HEAD, FACTS, NOTICE, JUMP MAP ============ */
.cx-head { align-items: flex-end; }
.cx-head__id { flex: 1 1 420px; min-width: 0; }
.cx-head h1 { margin: 10px 0 8px; }
.cx-head .cx-lead { max-width: 78ch; }
.cx-push { margin-left: auto; }
.cx-mute { color: var(--rc-text-mute); }

.cx-facts { margin-top: 24px; grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* always 4 or 2 across: auto-fit left empty tracks showing the hairline colour as a grey block at 768-990 */
.cx-k { display: flex; align-items: center; gap: 8px; color: var(--rc-text-mute); }
.cx-facts .rc-cell__v, .cx-facts .rc-cell__s { white-space: normal; overflow: visible; }
.cx-notice { margin-top: 16px; }
.cx-notice--end { margin-top: 40px; }
.cx-notice a { color: var(--rc-accent); text-decoration: underline; text-decoration-color: var(--rc-accent-line); text-underline-offset: 3px; }

.cx-map { display: flex; align-items: center; gap: 12px 16px; margin-top: 20px; min-width: 0; }
.cx-map__label { flex: none; }
.cx-map__row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.cx-map .rc-btn2--sm { gap: 8px; }
.cx-map .rc-btn2--sm:hover { text-decoration: none; }
.cx-map .rc-btn2--sm svg { color: var(--sec, var(--rc-text-mute)); }   /* the chip border and wash carry the page hue (style.css); the glyph follows it */
.cx-map .rc-btn2--sm:hover svg, .cx-map .rc-btn2--sm:focus-visible svg { color: var(--rc-text); }

/* ============ 2 · SECTIONS + CONNECTOR CARDS ============ */
.cx-sec { margin-top: 40px; min-width: 0; }
.cx-sec > .rc-gline + * { margin-top: 20px; }
.cx-sec > .rc-gline + .cx-lede { margin-top: 16px; }
:target.cx-sec .rc-gname { color: var(--rc-accent); }
.cx-sec .rc-empty__t { text-wrap: balance; }
.cx-lede { margin: 16px 0 0; max-width: 72ch; font: 400 14px/1.6 var(--rc-font-sans); color: var(--rc-text-soft); text-wrap: pretty; }
.cx-subdim { margin-top: 28px; }
.cx-subdim + * { margin-top: 16px; }
.cx-lede + .cx-subdim { margin-top: 20px; }
.cx-subdim .rc-count { margin-left: 2px; }

.cx-ico { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--sec-rule, var(--rc-line-strong)); background: var(--sec-band, var(--rc-card-soft)); color: var(--sec, var(--rc-text-soft)); }
.cx-p { margin: 0; max-width: 70ch; font: 400 14px/1.6 var(--rc-font-sans); color: var(--rc-text-soft); text-wrap: pretty; }
.cx-p strong, .cx-prose strong { font-weight: 600; color: var(--rc-text); }
.cx-p.cx-mute { color: var(--rc-text-mute); }
.cx-p a { color: var(--rc-accent); text-decoration: underline; text-decoration-color: var(--rc-accent-line); text-underline-offset: 3px; }
.cx-ext { display: inline-block; vertical-align: -2px; margin-left: 3px; }
.cx-sub { margin: 0; font: 400 13px/1.4 var(--rc-font-sans); color: var(--rc-text-mute); }
.cx-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }

.cx-cards { --rc-sheet-min: 340px; }
.cx-card .rc-tile__body { gap: 10px; padding: 14px; }
.cx-card .rc-tile__head { align-items: center; gap: 12px; }
.cx-card .cx-desc { display: block; overflow: visible; }
.cx-card:hover { border-color: var(--rc-line-strong); transform: none; }   /* a card that is not a link does not react to hover */

/* URL / client-ID row with a text-only Copy button (admin.js writes "Copied" / "Copy failed" into the button and toggles .copied / .copyfail) */
.cx-copy { display: flex; flex-wrap: wrap; align-items: stretch; min-width: 0; border: 1px solid var(--rc-line-strong); background: var(--rc-field); }
.cx-copy__k { flex: 1 0 100%; padding: 6px 12px; border-bottom: 1px solid var(--rc-line); background: var(--rc-band); }
.cx-copy__v { flex: 1 1 0; min-width: 0; align-self: center; padding: 7px 12px; font: 500 12px/1.5 var(--rc-font-mono); color: var(--rc-text-soft); overflow-wrap: anywhere; }
.cx-copy .rc-btn2 { flex: none; align-self: stretch; height: auto; min-width: 72px; min-height: 34px; border: 0; border-left: 1px solid var(--rc-line-strong); }
.copybtn.copied { color: var(--rc-green-ink); background: var(--rc-green-wash); }
.copybtn.copyfail { color: var(--rc-red-ink); background: var(--rc-red-wash); }

/* ============ 3 · REPORT BUILDER + SUPPORT ============ */
.cx-write { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cx-write > :only-child { grid-column: 1 / -1; max-width: 760px; }
.cx-rb .rc-panel__bar, .cx-support .rc-panel__bar { flex-wrap: wrap; padding-block: 8px; row-gap: 8px; }
.cx-rb .rc-panel__title, .cx-support .rc-panel__title { flex: 1 1 auto; min-width: 0; }
.cx-flags { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.cx-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.cx-actions .cx-copy { flex: 1 1 300px; }
.cx-actions .rc-btn2 { height: 36px; }
.cx-actions .cx-copy .rc-btn2 { height: auto; }
.cx-ready { display: grid; gap: 8px; }
.cx-deps { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rc-line); }
.cx-deps li { display: grid; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--rc-line); }
.cx-deps li:last-child { border-bottom: 0; }
.cx-dep__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.cx-dep__h > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.cx-dep__h strong { font: 600 14px/1.3 var(--rc-font-sans); color: var(--rc-text); }
.cx-dep__h .rc-status { white-space: normal; }
.cx-deps p { margin: 0; font: 400 13px/1.45 var(--rc-font-sans); color: var(--rc-text-soft); }
.cx-next { margin: 0; font: 400 13px/1.45 var(--rc-font-sans); color: var(--rc-text-soft); }
.cx-tools { margin: 0; padding: 0; list-style: none; border: 1px solid var(--rc-line); }
.cx-tools li { display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 10px 14px; border-bottom: 1px solid var(--rc-line); }
.cx-tools li:last-child { border-bottom: 0; }
.cx-tools code { padding: 0; border: 0; background: none; font: 500 12px/1.4 var(--rc-font-mono); color: var(--rc-text); overflow-wrap: anywhere; }
.cx-tools span { font: 400 13px/1.45 var(--rc-font-sans); color: var(--rc-text-soft); }

/* disclosure used as a panel foot (details > summary) */
.cx-key { display: block; padding: 0; font: inherit; }
.cx-key > summary { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; cursor: pointer; list-style: none; font: 500 13px/1.2 var(--rc-font-sans); color: var(--rc-text-soft); }
.cx-key > summary::-webkit-details-marker { display: none; }
.cx-key > summary:hover { color: var(--rc-text); background: var(--rc-hover); }
.cx-key > summary svg { width: 14px; height: 14px; color: var(--rc-text-faint); transition: transform var(--rc-dur-base) var(--rc-ease-out); }
.cx-key[open] > summary svg { transform: rotate(90deg); }
.cx-key[open] > summary { border-bottom: 1px solid var(--rc-line); }
.cx-key > .cx-prose { padding: 14px 16px 16px; }
.cx-prose p { margin: 0 0 12px; max-width: 68ch; font: 400 13px/1.65 var(--rc-font-sans); color: var(--rc-text-soft); text-wrap: pretty; }
.cx-prose p:last-child { margin-bottom: 0; }
.cx-prose code { font: 500 12px/1.4 var(--rc-font-mono); color: var(--rc-text); }

/* ============ 4 · SETUP TABS (connect.js drives .active / aria-selected / [hidden]) ============ */
.tabbar { display: flex; flex-wrap: wrap; margin-top: 20px; border-bottom: 1px solid var(--sec-rule, var(--rc-line)); background: var(--sec-wash, transparent); }
.tabbar .rc-tab svg { color: var(--sec, var(--rc-text-faint)); }
.tabbar .rc-tab[aria-selected="true"] { background: var(--sec-band, transparent); }   /* the hue is the band behind the current tab; its 2px underline stays violet */
.tab-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 20px; min-width: 0; }
.tab-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; max-width: 820px; }
.tab-fallback-title { margin: 0; font: 600 16px/1.3 var(--rc-font-display); letter-spacing: -.005em; color: var(--rc-text); }
.tab-panel .cx-notice { margin-top: 0; }
.cx-tut { margin: 0; }
.cx-tut .rc-btn2 { height: auto; min-height: 36px; padding-block: 8px; line-height: 1.35; white-space: normal; text-align: left; }

/* ============ 5 · CODE BLOCKS + NUMBERED STEPS ============ */
.cx-code .rc-panel__bar { min-height: 40px; padding-block: 4px; }
.cx-pre { margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--rc-field); font: 500 12.5px/1.75 var(--rc-font-mono); color: var(--rc-text-soft); tab-size: 2; }
.cx-pre code { font: inherit; white-space: pre; }
.cx-pre--more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }   /* scroll cue: connect.js sets it only while more text lies to the right */

/* numbered steps: drafting call-outs, numbered by CSS so the digits never enter the copy */
.cx-steps { margin: 0; padding: 0; max-width: 86ch; list-style: none; border-top: 1px solid var(--rc-line); counter-reset: cx-step; }
.cx-steps > li { position: relative; counter-increment: cx-step; padding: 14px 0 14px 48px; border-bottom: 1px solid var(--rc-line); font: 400 14px/1.6 var(--rc-font-sans); color: var(--rc-text); text-wrap: pretty; }
.cx-steps > li::before { content: counter(cx-step, decimal-leading-zero); position: absolute; left: 0; top: 15px; display: grid; place-items: center; width: 32px; height: 24px; border: 1px solid var(--rc-line-bright); font: 600 12px/1 var(--rc-font-mono); letter-spacing: .02em; color: var(--rc-text-soft); }
.cx-steps strong { font-weight: 600; }

/* ============ 6 · SQL BRIDGE + EXPLORE ============ */
.cx-sql .rc-panel__body { gap: 20px; }   /* the panel spans the page like every other section; the prose and steps keep their own reading measure */
.cx-sql .cx-copy { max-width: 560px; }
@media (min-width: 1100px) {   /* wide: the route on the left (strip, intro, server), the four steps beside it, the notes under both */
  .cx-sql .rc-panel__body { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; align-items: start; }
  .cx-sql .cx-steps { grid-column: 2; grid-row: 1 / span 3; }
  .cx-sql .cx-prose { grid-column: 1 / -1; }
}
.cx-lineage { margin-bottom: 4px; }
@media (max-width: 560px) {   /* the kit stacks the strip vertically under 560px (and leaves a 20px wire box); on a phone keep it one short row */
  .cx-lineage { flex-direction: row; align-items: center; }
  .cx-lineage .rc-node { padding: 8px 10px; }
  .cx-lineage .rc-node > small { display: none; }
  .cx-lineage .rc-node > b { white-space: normal; }
  .cx-lineage .rc-wire { flex: 1 1 14px; width: auto; height: 1px; min-width: 10px; min-height: 0; transform-origin: left; }
  .cx-lineage .rc-wire::before { left: -3px; top: -2px; }
  .cx-lineage .rc-wire::after { left: auto; right: -3px; top: -2px; bottom: auto; }
}
.cx-links { justify-content: flex-start; gap: 8px 24px; font: 500 13px/1.2 var(--rc-font-sans); }
.cx-navgrid { --rc-sheet-min: 260px; }
.cx-nav .rc-tile__body { gap: 6px; }
.cx-nav .rc-tile__head { align-items: center; }
.cx-nav .rc-tile__desc { display: block; overflow: visible; }
.cx-nav:hover .rc-tile__body { background: var(--sec-wash, var(--rc-hover)); }   /* colour = place: an Explore tile wears the hue of the place it opens (data-place); Fabric and Databricks lead off-portal and stay neutral */

/* ============ 7 · PHONE ============ */
@media (max-width: 1100px) {
  .cx-write { grid-template-columns: minmax(0, 1fr); }
  .cx-write > :only-child { max-width: none; }
}
@media (max-width: 1023px) {
  .cx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cx-sec { margin-top: 32px; }
  .cx-flags { flex: 1 0 100%; margin-left: 0; justify-content: flex-start; }
  .cx-head__id { flex-basis: 100%; }
  .cx-map { flex-direction: column; align-items: stretch; gap: 8px; }
  .cx-map .rc-btn2--sm { height: 44px; }
  .cx-copy .rc-btn2, .cx-actions .rc-btn2 { min-height: 44px; }
  .cx-actions .cx-copy .rc-btn2 { height: auto; }
  .cx-copy__v { padding: 11px 12px; }
  .cx-key > summary { min-height: 44px; }
  .cx-tools li { grid-template-columns: minmax(0, 1fr); }
  .cx-links .rc-link, .cx-sec .rc-empty > .rc-link { display: inline-flex; align-items: center; min-height: 44px; }
  .cx-steps > li { padding-left: 44px; }
  .cx-navgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cx-nav .rc-tile__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cx-nav .rc-tile__arrow { display: none; }
  .cx-nav .rc-tile__body { gap: 6px; padding: 12px; }
  .cx-nav .rc-tile__title { -webkit-line-clamp: 3; line-clamp: 3; }
  /* four tabs never fit one 358px row: a 2x2 segmented control, no clipped labels */
  .tabbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--rc-line-strong); }
  .tabbar .rc-tab { justify-content: center; border-right: 1px solid var(--rc-line-strong); border-bottom: 1px solid var(--rc-line-strong); }
  .tabbar .rc-tab:nth-child(2n) { border-right: 0; }
  .tabbar .rc-tab:nth-child(n+3) { border-bottom: 0; }
  .tabbar .rc-tab::after { display: none; }
  .tabbar .rc-tab[aria-selected="true"] { background: var(--sec-band, var(--rc-accent-wash)); box-shadow: inset 0 -2px 0 var(--rc-accent-ui); }
}

/* ============ 8 · TOUCH FLOOR (any width) ============
   The compact controls above out-rank the kit's `@media (pointer: coarse)` 44px floor (.cx-copy .rc-btn2 is 0,2,0 against 0,1,0), and the
   max-width:767px fixes only cover phones: an iPad at 820/1024 is wider than that and still a finger. Every control this page restyles
   is restored to 44px here. Last in the file on purpose: same specificity, later source order. */
@media (pointer: coarse) {
  .cx-copy .rc-btn2, .cx-actions .rc-btn2, .cx-tut .rc-btn2, .cx-map .rc-btn2--sm, .cx-code .rc-btn2--sm { min-height: 44px; }
  .cx-key > summary { min-height: 44px; }
  .cx-links .rc-link, .cx-sec .rc-empty > .rc-link { display: inline-flex; align-items: center; min-height: 44px; }
  .cx-copy__v { padding-block: 11px; }
}