/* AC-* — /fpl-ai-assistant-connectors/ (assistant connectors guide).
   Page-specific layer on top of the shared .ax-* editorial kit in pseo-base.css.
   Tokens come from :root (--v3-*); dark mode is automatic through the same vars.
   Every setup block is always rendered; JS only adds copy buttons and a scroll-spy
   highlight on the chip rows. Nothing here hides content. */

/* Masthead: copy + phone render side by side */
.ax-page.ac-page header.ac-mast { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; align-items: center; padding: 56px 0 40px; }
.ac-mast-copy { min-width: 0; }
.ax-page .ac-h1 { margin-top: 22px; font-size: clamp(34px, 4.1vw, 60px); }
.ax-page .ac-h1 .ax-h1-l1, .ax-page .ac-h1 .ax-h1-l2 { white-space: normal; text-wrap: balance; }
.ax-page .ac-h1 .ac-brand { text-transform: none; }
.ac-page .ac-stand { margin-top: 24px; max-width: 58ch; font-size: 18px; line-height: 1.55; color: var(--v3-ink); text-wrap: pretty; }
.ac-stand b { font-weight: 600; }
.ac-hero { position: relative; justify-self: end; width: 300px; margin: 0; }
.ac-hero img { width: 100%; height: auto; }
.ac-hero-fig { margin: 0; }

/* Availability strip */
.ac-page .ac-status { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.ac-status a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--v3-border); border-radius: var(--v3-radius-pill); background: var(--v3-chip-bg); font-size: 13px; line-height: 1; color: var(--v3-ink); }
.ax-page .ac-status a:hover { border-color: var(--v3-border-strong); }
.ac-status b { font-weight: 600; }
.ac-status .ax-mono { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--v3-ink-soft); }
.ac-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--v3-pink); }
.ac-dot--soon { background: transparent; border: 1.5px solid var(--v3-ink-soft); }

/* Brand marks: 16px inline in chips, large faint watermark behind each block.
   Claude keeps #D97757, Muse keeps its blue gradient (both <img>); Grok, OpenAI and Codex are inline
   currentColor svgs so it is ink in light and off-white in dark. All decorative. */
.ac-chip-mark { width: 16px; height: 16px; flex: none; display: inline-block; }
.ac-chip-mark--ink { color: var(--v3-ink); }
.ac-chip-mark--ink svg { display: block; width: 16px; height: 16px; }
.ac-switch a[aria-current="true"] .ac-chip-mark--ink { color: var(--v3-canvas); }
.ac-wm { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ac-wm-mark { position: absolute; right: -36px; bottom: -48px; width: 320px; height: 320px; opacity: .09; }
.ac-wm-mark--ink { color: var(--v3-ink); }
.ac-wm-mark--ink svg { display: block; width: 100%; height: 100%; }
@media (prefers-color-scheme: dark) { .ac-wm-mark { opacity: .09; } .ac-wm-mark--muse { opacity: .16; } }
.ac-wm-mark--codex, .ac-wm-mark--openai { opacity: .045; }

/* Prerequisites strip */
.ac-pre { counter-reset: ac-pre; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ac-pre li { counter-increment: ac-pre; min-width: 0; padding-top: 12px; border-top: 2px solid var(--v3-ink); font-size: 14.5px; line-height: 1.5; color: var(--v3-ink-soft); }
.ac-pre li::before { content: counter(ac-pre, decimal-leading-zero); display: block; margin-bottom: 6px; font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--v3-pink-text); }
.ac-pre b { font-weight: 600; color: var(--v3-ink); }
.ac-pre .ac-field--inline { display: flex; margin-top: 10px; }

/* Three prompt cards */
.ac-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ac-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 24px; border: 1px solid var(--v3-border); border-radius: var(--v3-radius-card); background: var(--v3-card); box-shadow: var(--v3-glow); }
.ac-card--lavender { background: var(--v3-lavender); }
.ac-card--mint { background: var(--v3-mint); }
.ac-card--blush { background: var(--v3-blush); }
.ac-card-q { font: 600 22px/1.2 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.015em; color: var(--v3-ink); text-wrap: balance; }
.ac-card h3 { margin-top: 6px; font: italic 600 12px/1.3 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.ac-card p { font-size: 15px; line-height: 1.55; color: var(--v3-ink-soft); }
.ac-tools { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 12.5px; line-height: 1.6; color: var(--v3-ink-soft); }
.ac-tools code { font: 600 12px/1.6 'JetBrains Mono', ui-monospace, monospace; color: var(--v3-ink); }

/* Why connect */
.ac-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.ac-why li { padding-top: 14px; border-top: 2px solid var(--v3-ink); font-size: 15px; line-height: 1.55; color: var(--v3-ink-soft); }
.ac-why b { display: block; margin-bottom: 6px; font: 600 17px/1.25 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.01em; color: var(--v3-ink); }

/* Numbered steps (shared by Before-you-start and every assistant block) */
.ac-steps { counter-reset: ac-step; display: flex; flex-direction: column; max-width: 64ch; }
.ac-steps > li { counter-increment: ac-step; position: relative; padding: 14px 0 14px 44px; border-top: 1px solid var(--v3-border); font-size: 16px; line-height: 1.55; color: var(--v3-ink); }
.ac-steps > li:first-child { border-top: 0; padding-top: 0; }
.ac-steps > li::before { content: counter(ac-step, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 700 13px/1.6 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; color: var(--v3-pink-text); }
.ac-steps > li:first-child::before { top: 0; }
.ac-steps b { font-weight: 600; }
.ac-steps code, .ac-shows code, .ac-aside code, .ac-fix code, .ac-after code { font: 600 .92em/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--v3-ink); overflow-wrap: anywhere; }

/* Copyable value */
.ac-field { display: flex; align-items: flex-start; min-width: 0; border: 1px solid var(--v3-border-input); border-radius: 12px; background: var(--v3-card); }
.ac-field > code { flex: 1 1 auto; min-width: 0; padding: 10px 14px; font: 600 14px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--v3-ink); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.ac-field--inline { display: inline-flex; vertical-align: middle; margin: 6px 0 2px; max-width: 100%; }
.ac-copy { position: relative; display: none; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 1px 1px 1px 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--v3-ink-soft); cursor: pointer; }
.ac-copy-done { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); padding: 5px 9px; border-radius: var(--v3-radius-pill); background: var(--v3-ink); color: var(--v3-canvas); font: 600 12px/1 'Inter', system-ui, sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; }
.ac-copy[data-copied] .ac-copy-icon { opacity: 0; }
.ac-copy[data-copied] .ac-copy-done { opacity: 1; }
.ac-js .ac-copy { display: inline-flex; }
.ac-copy:hover { color: var(--v3-ink); }
.ac-copy:focus-visible, .ac-switch a:focus-visible, .ac-page a:focus-visible, .ac-btn--ghost:focus-visible { outline: 3px solid var(--v3-pink); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .ac-copy:focus-visible, .ac-switch a:focus-visible, .ac-page a:focus-visible, .ac-btn--ghost:focus-visible { outline-color: #FF7AB2; } }

.ac-aside { margin-top: 20px; max-width: 64ch; padding: 16px 18px; border: 1px solid var(--v3-border); border-radius: var(--v3-radius-card); background: var(--v3-lavender); font-size: 14px; line-height: 1.55; color: var(--v3-ink); }

/* In-section jump chips: sticky under the site chrome, scroll-spy sets aria-current */
.ac-switch { position: sticky; top: calc(var(--pseo-main-top-padding, 120px) - 16px); z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 10px 0; background: var(--v3-sheet); }
.ac-switch a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--v3-border); border-radius: var(--v3-radius-pill); background: var(--v3-chip-bg); font: 600 14px/1 'Inter', system-ui, sans-serif; color: var(--v3-ink); }
.ac-switch a:hover { border-color: var(--v3-border-strong); }
.ac-switch a[aria-current="true"] { background: var(--v3-ink); border-color: var(--v3-ink); color: var(--v3-canvas); }
.ac-switch a .ac-dot { width: 7px; height: 7px; }
.ac-switch a[aria-current="true"] .ac-dot--soon { border-color: var(--v3-canvas); }

.ac-block { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); column-gap: 40px; row-gap: 24px; padding: 32px 0; border-top: 1px solid var(--v3-border); scroll-margin-top: calc(var(--pseo-main-top-padding, 120px) + 56px); }
.ac-block > :not(.ac-wm) { position: relative; z-index: 1; }
.ac-block-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.ac-page .ac-block-head h3 { font: 700 24px/1.1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.02em; color: var(--v3-ink); }
.ac-where { font-size: 14px; color: var(--v3-ink-soft); }
.ac-head-mark { display: none; }
.ac-block-main { min-width: 0; }
.ac-block-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ac-page .ac-note { margin-top: 16px; max-width: 64ch; font-size: 14px; line-height: 1.55; color: var(--v3-ink-soft); }
.ac-lead { max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--v3-ink); }
.ac-page .ac-cta-row { display: flex; margin: 24px 0 36px; }
.ac-cta-row + .ac-steps > li:first-child { border-top: 1px solid var(--v3-border); padding-top: 14px; }
.ac-cta-row + .ac-steps > li:first-child::before { top: 14px; }
.ac-alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--v3-border); }
.ac-page .ac-alt-h { margin-bottom: 10px; font: italic 600 12px/1.3 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.ac-alt .ac-steps > li { padding-top: 10px; padding-bottom: 10px; font-size: 15px; }
.ac-alt .ac-steps > li::before { top: 10px; }
.ac-alt .ac-steps > li:first-child::before { top: 0; }
.ac-page .ac-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v3-border); }
.ac-ask-lab { flex: none; font: italic 600 12px/1.3 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.ac-ask .ac-field--inline { margin: 0; flex: 1 1 260px; }
.ac-ask .ac-field > code, .ac-field--prose > code { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; }
.ac-page .ac-shows { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v3-border); font-size: 14px; line-height: 1.5; color: var(--v3-ink-soft); }
.ac-shows b { font-weight: 600; color: var(--v3-ink); }

/* Fields card */
.ac-fields { margin: 0; padding: 20px 20px 18px; border: 1px solid var(--v3-border); border-radius: var(--v3-radius-card); background: var(--v3-card); box-shadow: var(--v3-glow); }
.ac-fields dt { font: italic 600 11.5px/1.3 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.ac-fields dd { margin: 6px 0 16px; }
.ac-fields dd:last-child { margin-bottom: 0; }
.ac-fields .ac-empty { display: inline-block; padding: 8px 0; font-size: 14px; color: var(--v3-ink-soft); }
.ac-fields .ac-field { background: var(--v3-sheet); }

.ac-block--soon .ac-block-main p { max-width: 58ch; font-size: 16px; line-height: 1.55; color: var(--v3-ink-soft); }
.ac-block--soon .ac-soon-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border: 1px dashed var(--v3-border-strong); border-radius: var(--v3-radius-pill); font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--v3-ink-soft); }

.ac-page .ac-after { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--v3-border); max-width: 64ch; font-size: 15px; line-height: 1.55; color: var(--v3-ink-soft); }

/* Consent render — full-width row under the Claude steps */
.ac-consent { grid-column: 1 / -1; margin: 0; max-width: 760px; }
.ac-consent img { width: 100%; height: auto; }
.ac-consent figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--v3-ink-soft); }

/* Troubleshooting */
.ac-fix { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; row-gap: 0; max-width: 76ch; }
.ac-fix dt, .ac-fix dd { padding: 16px 0; border-top: 1px solid var(--v3-border); }
.ac-fix dt:first-of-type, .ac-fix dd:first-of-type { border-top: 0; padding-top: 0; }
.ac-fix dt { font: 600 15px/1.45 'Inter', system-ui, sans-serif; color: var(--v3-ink); }
.ac-fix dt code { font-size: 14px; color: var(--v3-pink-text); }
.ac-fix dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--v3-ink-soft); }
.ac-fix q { font-style: italic; }
.ac-page .ac-callout { margin-top: 28px; max-width: 64ch; padding: 4px 0 4px 18px; border-left: 3px solid var(--v3-pink); font-size: 16px; line-height: 1.55; color: var(--v3-ink); }

/* Close */
.ac-close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-self: end; }
.ac-btn--ghost { display: inline-block; height: 44px; padding: 0 22px; border: 1px solid var(--v3-border-input); border-radius: var(--v3-radius-pill); font: 600 14px/42px 'Inter', system-ui, sans-serif; white-space: nowrap; color: var(--v3-ink); }
.ax-page a.ac-btn--ghost:hover { border-color: var(--v3-ink); }
.ac-close-ref { flex-basis: 100%; font-size: 13px; color: var(--v3-ink-soft); }
.ac-links { display: flex; flex-wrap: wrap; align-items: center; padding: 24px 0 20px; font-size: 14px; color: var(--v3-ink-soft); }
.ax-page .ac-links a { color: var(--v3-ink); }

/* Responsive */
@media (max-width: 1100px) {
  .ax-page.ac-page header.ac-mast { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 40px; }
  .ac-hero { width: 260px; }
  .ac-cards, .ac-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .ac-cards, .ac-why, .ac-pre { grid-template-columns: minmax(0, 1fr); }
  .ac-why li { padding-top: 12px; }
  .ac-wm-mark { width: 200px; height: 200px; right: -40px; top: -36px; bottom: auto; opacity: .07; }
  .ac-block { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ax-page.ac-page header.ac-mast { grid-template-columns: minmax(0, 1fr); padding: 32px 0 28px; row-gap: 28px; }
  .ac-hero { width: min(240px, 70vw); justify-self: center; }
  .ax-page .ac-h1 .ax-h1-l1, .ax-page .ac-h1 .ax-h1-l2 { white-space: normal; }
  .ac-page .ac-stand { margin-top: 28px; font-size: 16px; }
  .ac-page .ac-status { flex-direction: column; gap: 0; margin-top: 24px; border-top: 1px solid var(--v3-border); }
  .ac-status li { border-bottom: 1px solid var(--v3-border); }
  .ac-status a { width: 100%; min-height: 0; padding: 10px 0; border: 0; border-radius: 0; background: none; }
  .ac-status b { flex: none; min-width: 80px; }
  .ac-switch { top: calc(var(--pseo-main-top-padding, 120px) - 16px); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; box-shadow: 0 -40px 0 var(--v3-sheet); }
  .ac-switch::-webkit-scrollbar { display: none; }
  .ac-switch a { flex: none; min-height: 36px; padding: 0 14px; font-size: 13.5px; }
  .ac-status .ax-mono { line-height: 1.35; }
  .ac-fix { grid-template-columns: minmax(0, 1fr); }
  .ac-fix dd { padding-top: 6px; border-top: 0; }
  .ac-fix dt:first-of-type, .ac-fix dd:first-of-type { padding-top: 0; }
  .ac-fix dd:first-of-type { padding-top: 6px; }
  .ac-steps > li { padding: 16px 0 16px 36px; }
  .ac-steps > li::before { top: 16px; }
  .ac-block { row-gap: 28px; padding: 44px 0 40px; }
  .ac-wm { display: none; }
  .ac-block-head:has(.ac-head-mark) { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; }
  .ac-block-head > :not(.ac-head-mark) { grid-column: 2; }
  .ac-head-mark { display: block; grid-row: 1; width: 28px; height: 28px; }
  .ac-head-mark--ink { color: var(--v3-ink); }
  .ac-head-mark--ink svg { display: block; width: 100%; height: 100%; }
  .ac-page .ac-block-head h3 { font-size: 22px; }
  .ac-page .ac-lead { font-size: 16px; }
  .ac-page .ac-cta-row { margin: 28px 0 36px; }
  .ac-page .ac-cta-row .ax-btn { width: 100%; justify-content: center; text-align: center; }
  .ac-page .ac-shows { margin-top: 20px; padding-top: 16px; }
  .ac-alt { margin-top: 28px; padding-top: 20px; }
  .ac-page .ac-ask { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; padding-top: 20px; }
  .ac-ask .ac-field--inline { flex: none; display: flex; }
  .ac-fields { padding: 18px 16px 16px; }
  .ac-fields dd { margin-bottom: 18px; }
  .ac-close-actions { justify-self: start; }
  .ac-close-actions .ax-btn, .ac-close-actions .ac-btn--ghost { width: 100%; text-align: center; }
}
@media (max-width: 400px) {
  .ac-field > code { font-size: 13px; }
}
@media print {
  .ac-switch { position: static; }
  .ac-copy, .ac-wm { display: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .ac-copy, .ac-switch a { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
  .ac-copy-icon, .ac-copy-done { transition: opacity .15s ease; }
}