/* ══════════════════════════════════════════════════════════════════
   connector.css: what the consent page (/oauth/consent/) and the
   assistants page (/assistants/) share. Spec
   docs/superpowers/specs/2026-09-27-connector-web-surfaces-polish-design.md,
   plan Task 1. Load after /css/v2.css; page-only rules stay in each
   page's <style>.

   Tokens only (v2.css :root). The one colour outside the set is the solid
   card fill #171A20 for prefers-reduced-transparency. Text on the card
   uses --ink or --ink-2: --ink-3 reads 3.5:1 there, under the 4.5:1 floor.
   Glyphs are real SF Symbols (tools/sf-symbol-export.swift), inline.
   ══════════════════════════════════════════════════════════════════ */

/* ── Focus: 2 px ring in --ink, 2 px off, on every control ──────── */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
/* v2.css rounds every focus ring to 4px; pills and tiles keep their own shape. */
.cta-btn:focus-visible,
.ghost-btn:focus-visible,
.addr-pill__copy:focus-visible,
.hero-tab:focus-visible { border-radius: var(--r-pill); }
.connect-dialog__close:focus-visible { border-radius: 50%; }

/* ── Card material ───────────────────────────────────────────────── */
.connector-card, .connect-dialog {
  border-radius: var(--r-card);
  padding: var(--sp-24);
  background: rgba(26, 30, 37, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}

/* ── Icon tile: 44 px by default, 40 px in rows ──────────────────
   --tile is unitless so the radius can scale from --r-icon (6px at 22px). */
.icon-tile {
  --tile: 44;
  flex: none;
  display: inline-grid;
  place-items: center;
  /* Also centred as a flex box: a page's .sym rule may switch the display. */
  justify-content: center;
  align-items: center;
  width: calc(var(--tile) * 1px);
  height: calc(var(--tile) * 1px);
  border-radius: calc(var(--r-icon) * var(--tile) / 22);
  background: rgba(26, 30, 37, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--ink-2);
  object-fit: cover;
}
img.icon-tile { border: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
.icon-tile--40, .tiles-40 .icon-tile { --tile: 40; }
.icon-tile .sfsym { width: 55%; height: auto; display: block; }

/* ── Identity strip: Milligram, dashed join with the link glyph, assistant ── */
.id-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
}
.id-strip__join {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  color: var(--ink-2);
}
.id-strip__join::before,
.id-strip__join::after {
  content: "";
  width: var(--sp-16);
  border-top: 1.5px dashed var(--ink-3);
}
.id-strip__join .sfsym { width: 16px; height: auto; display: block; }

/* ── Custom checkbox ─────────────────────────────────────────────
   Markup: <label class="tick"><input type="checkbox" class="tick__input">
   <span class="tick__box" aria-hidden="true"></span><span>label</span></label>
   The real input stays in the tree for keyboard, forms and assistive tech. */
.tick {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  min-height: 44px;
  padding: var(--sp-10) 0;
  cursor: pointer;
  color: var(--ink);
  font-size: var(--fs-callout);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-callout);
  -webkit-tap-highlight-color: transparent;
}
.tick__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}
.tick__box {
  flex: none;
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 7px;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform 100ms var(--ease-out);
}
/* SF Symbol checkmark as a mask so it takes --cta-ink. */
.tick__box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cta-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='255 -1548 1723 1709'%3E%3Cpath transform='scale(1,-1)' d='M907 -161C950 -161 984 -142 1008 -105L1953 1383C1971 1412 1978 1434 1978 1457C1978 1512 1942 1548 1887 1548C1847 1548 1825 1535 1801 1497L903 66L437 676C412 711 387 725 351 725C294 725 255 686 255 631C255 608 265 582 284 558L803 -103C833 -142 864 -161 907 -161Z'/%3E%3C/svg%3E") center / 14px auto no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='255 -1548 1723 1709'%3E%3Cpath transform='scale(1,-1)' d='M907 -161C950 -161 984 -142 1008 -105L1953 1383C1971 1412 1978 1434 1978 1457C1978 1512 1942 1548 1887 1548C1847 1548 1825 1535 1801 1497L903 66L437 676C412 711 387 725 351 725C294 725 255 686 255 631C255 608 265 582 284 558L803 -103C833 -142 864 -161 907 -161Z'/%3E%3C/svg%3E") center / 14px auto no-repeat;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tick__input:checked + .tick__box { background: var(--cta); border-color: var(--cta); }
.tick__input:checked + .tick__box::after { opacity: 1; transform: none; }
.tick:active .tick__box { transform: scale(0.94); }
.tick__input:focus-visible + .tick__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.tick__input:disabled + .tick__box { opacity: 0.35; }

/* ── Buttons: press feedback on the press, 44 px on touch ─────────── */
.ghost-btn {
  min-height: 44px;
  justify-content: center;
  gap: var(--sp-8);
  transition: transform 100ms var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ghost-btn .sfsym { width: 16px; height: auto; display: block; }
@media (hover: hover) { .ghost-btn:not([disabled]):hover { opacity: 0.9; } }
.ghost-btn:not([disabled]):active { transform: scale(0.97); }
.cta-btn { transition: transform 100ms var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
@media (pointer: coarse) {
  .cta-btn, .ghost-btn { min-height: 44px; }
  .text-link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── Address pill: the MCP address with its copy button inside ────── */
.addr-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  max-width: 100%;
  min-height: 44px;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-16);
  border-radius: var(--r-pill);
  background: rgba(26, 30, 37, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.addr-pill__text {
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--fs-subhead);
  letter-spacing: 0;
  line-height: var(--lh-ui);
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
}
.addr-pill__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  min-height: 36px;
  padding: 0 var(--sp-12);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--line);
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-footnote);
  font-weight: 600;
  letter-spacing: var(--tr-footnote);
  cursor: pointer;
  transition: transform 100ms var(--ease-out), color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.addr-pill__copy .sfsym { width: 13px; height: auto; display: block; }
.addr-pill__copy:active { transform: scale(0.97); }
.addr-pill__copy.is-copied { color: var(--ink); }
@media (pointer: coarse) { .addr-pill__copy { min-height: 44px; } }

/* ── Loading skeleton: bars under a 1.4 s shimmer ────────────────── */
.skeleton { display: grid; gap: var(--sp-12); }
.skeleton__bar {
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(90deg,
    var(--line) 0%,
    color-mix(in srgb, var(--ink) 12%, transparent) 50%,
    var(--line) 100%);
  background-size: 200% 100%;
  animation: connector-shimmer 1.4s linear infinite;
}
.skeleton__bar--title { height: 28px; width: 72%; border-radius: 10px; margin-bottom: var(--sp-8); }
.skeleton__bar--short { width: 58%; }
.skeleton__bar--button { height: 48px; width: 160px; border-radius: var(--r-pill); margin-top: var(--sp-16); }
@keyframes connector-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* ── State transitions: enterState() in connector-ui.js adds this ─── */
.is-entering { animation: connector-enter var(--dur-fast) var(--ease-out) both; }
@keyframes connector-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes connector-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Reduced motion: cross-fades only, no shimmer, no rise, no scale ── */
@media (prefers-reduced-motion: reduce) {
  .is-entering { animation-name: connector-fade; }
  .skeleton__bar { animation: none; background: var(--line); }
  .ghost-btn:not([disabled]):active,
  .cta-btn:active,
  .addr-pill__copy:active,
  .tick:active .tick__box { transform: none; }
  .tick__box::after { transform: none; }
}

/* ── Reduced transparency: solid fills, no blur ──────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .connector-card, .connect-dialog {
    background: #171A20;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .icon-tile, .addr-pill { background: #171A20; }
}


/* ══════════════════════════════════════════════════════════════════
   Assistants page hero (spec addendum 2026-09-27 afternoon): the tab row,
   the headline badges, the actions, the address line, the dot grid and the "How to connect?" dialog.
   ══════════════════════════════════════════════════════════════════ */

.hero { position: relative; isolation: isolate; text-align: center; }

/* Dot grid: CSS only, behind the content, no effect on layout. It reaches
   up through the page's top padding (--hero-top, set by the page) and fades
   out at the left and right edges and about 140 px before the hero ends. */
.hero-dots {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-1 * var(--hero-top, 0px));
  bottom: 0;
  pointer-events: none;
  /* The layer sits at the reference's 0.22; the dot fill is 0.45 so the
     dots land near 10% white (0.10 at 0.22 is about 2%, invisible). */
  opacity: 0.22;
  background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: center top;
  -webkit-mask-image:
    radial-gradient(ellipse 58% 80% at 50% 36%, #000 30%, transparent 100%),
    linear-gradient(to bottom, #000 calc(100% - 320px), transparent calc(100% - 140px));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 58% 80% at 50% 36%, #000 30%, transparent 100%),
    linear-gradient(to bottom, #000 calc(100% - 320px), transparent calc(100% - 140px));
  mask-composite: intersect;
}

/* ── Tab row: a segmented track; wraps, never scrolls sideways ────── */
.hero-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
  max-width: 100%;
  padding: var(--sp-4);
  border-radius: 22px;
  background: rgba(26, 30, 37, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}
.hero-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 36px;
  padding: 0 var(--sp-16);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-subhead);
  font-weight: 500;
  letter-spacing: var(--tr-subhead);
  line-height: var(--lh-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform 100ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
/* 44 px hit area on a 36 px pill: 4 px above and below, into the track. */
.hero-tab::before { content: ""; position: absolute; inset: -4px 0; }
.hero-tab img { width: 16px; height: 16px; border-radius: 4px; display: block; flex: none; }
.hero-tab .sfsym { width: 16px; height: auto; display: block; }
@media (hover: hover) { .hero-tab:hover { color: var(--ink); } }
/* Phone: the track spans the column (lining up with the full-width buttons)
   and the two pills share it; row-gap keeps the 44 px hit areas apart if
   a very large text size ever wraps them. */
@media (max-width: 480px) {
  .hero-tabs { display: flex; gap: var(--sp-2); row-gap: var(--sp-8); padding: 3px; }
  .hero-tab { flex: 1 1 auto; justify-content: center; gap: var(--sp-6); padding: 0 var(--sp-8); }
}
.hero-tab[aria-selected="true"] { background: var(--cta); color: var(--cta-ink); }
.hero-tab:active { transform: scale(0.97); }

/* ── Headline: two lines, the assistant's badge set in the text ───── */
.hero-title {
  --badge-n: 44;
  margin: clamp(28px, 4vh, 40px) 0 0;
  font-size: var(--fs-title-lg);
  font-weight: 650;
  letter-spacing: var(--tr-title-lg);
  line-height: var(--lh-display);
  color: var(--ink);
  text-wrap: balance;
}
.hero-title__line { display: block; text-wrap: balance; }
.hero-title__line + .hero-title__line { margin-top: 0.08em; }
/* Badge and name travel together: never split across lines, and the
   cross-fade on a tab switch moves them as one. */
.hero-assistant { display: inline-block; white-space: nowrap; }
/* The badge's bottom edge is its baseline (inline-block, overflow hidden),
   so this centres it on the cap height (about 0.35em above the baseline). */
.hero-badge {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: calc(var(--badge-n) * 1px);
  height: calc(var(--badge-n) * 1px);
  vertical-align: calc(0.35em - var(--badge-n) * 0.5px);
  border-radius: calc(var(--r-icon) * var(--badge-n) / 22);
  background: var(--surface);
}
.hero-badge img { width: 100%; height: 100%; display: block; }
.hero-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
/* Desktop reads the two-line headline; phones read the one-sentence one.
   display: none keeps the hidden variant out of the accessibility tree. */
.hero-title__phone { display: none; }
/* The phone headline's assistant is the picker: the name, a chevron, and a
   native <select> laid invisibly over both, so a tap opens iOS's own picker
   and a change switches the tab. The select is the control (focus, VoiceOver,
   the picker); the name and chevron are what the eye sees. */
.hero-pick { position: relative; display: inline-flex; align-items: center; }
.hero-pick__chev { display: inline-block; width: 0.42em; margin-left: 0.16em; color: var(--ink-2); }
.hero-pick__chev .sfsym { width: 100%; height: auto; display: block; }
.hero-pick__select {
  position: absolute; inset: -8px -10px; width: auto; height: auto;
  margin: 0; padding: 0; border: 0; opacity: 0;
  font-size: 16px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.hero-pick:has(.hero-pick__select:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }
.hero-pick:has(.hero-pick__select:active) .hero-pick__chev { transform: translateY(1px); }
/* The ChatGPT panel's phone-only note under its buttons. */
.hero-note { display: none; margin: var(--sp-12) 0 0; color: var(--ink-2); font-size: var(--fs-footnote); letter-spacing: var(--tr-footnote); line-height: var(--lh-body); text-wrap: balance; }
@media (max-width: 600px) { .hero-title { --badge-n: 32; } }
@media (max-width: 480px) {
  .hero-title__desk { display: none; }
  .hero-title__phone { display: block; text-wrap: balance; line-height: 1.18; }
}


/* ── Actions: centred; stacked full width on a phone ─────────────── */
/* No lead line: the headline stands alone, so the actions sit a step
   further below it than the tabs sit above it. */
.hero-panel { margin-top: clamp(32px, 5vh, 48px); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-12);
}
.hero-actions .cta-btn,
.hero-actions .ghost-btn {
  min-height: 52px;
  padding: 0 var(--sp-24);
  justify-content: center;
  font-size: var(--fs-callout);
  letter-spacing: var(--tr-callout);
}
/* Border at 3:1 on the page background (#0F1012). */
.hero-actions .ghost-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.34);
}
.cta-btn__icon { width: 18px; height: 18px; border-radius: 5px; display: block; flex: none; }
/* The ChatGPT panel's two primary buttons: the link on desktop, the share
   button on phones (the phone block below swaps them). */
.cta-btn--phone { display: none; }
.cta-btn__sym { display: block; flex: none; width: 17px; margin-right: var(--sp-8); }
.cta-btn__sym .sfsym { width: 100%; height: auto; display: block; }
@media (max-width: 480px) {
  .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
}

/* ── Address line ────────────────────────────────────────────────── */
.hero-addr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: var(--sp-20);
}
/* The address as a quiet line, not a control: the copy glyph leads, the
   address follows in mono, and a copy swaps the glyph for a checkmark while
   the address stays put. The whole line is the button. */
.addr-line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-10);
  max-width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-8);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.addr-line__glyph { flex: none; display: block; width: 16px; transition: transform 100ms var(--ease-out); }
.addr-line__glyph .sfsym { width: 16px; height: auto; display: block; }
.addr-line__text {
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--fs-callout);
  letter-spacing: 0;
  line-height: var(--lh-ui);
  color: inherit;
  overflow-wrap: anywhere;
  text-align: left;
}
@media (hover: hover) { .addr-line:hover { color: var(--ink); } }
/* The narrowest phones (320 px): one size down so the address stays on one line. */
@media (max-width: 360px) { .addr-line__text { font-size: var(--fs-footnote); } }
.addr-line:active .addr-line__glyph { transform: scale(0.92); }
.addr-line.is-copied { color: var(--ink); }
.addr-line:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-pill); }
.hero-addr .text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration-color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) { .hero-addr .text-link:hover { color: var(--ink); } }

/* ── Tab switch: the badge and the actions rise 4 px ─────────────── */
.hero .is-entering { animation-name: hero-enter; }
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── "How to connect?" dialog ────────────────────────────────────── */
html.is-dialog-open { overflow: hidden; scrollbar-gutter: stable; }
.connect-dialog {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border-radius: 20px;
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 64px rgba(0, 0, 0, 0.5);
}
.connect-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.connect-dialog__body { padding: var(--sp-24); }
.connect-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
}
.connect-dialog h2 {
  margin: 0;
  padding-top: var(--sp-4);
  font-size: var(--fs-lead);
  font-weight: 650;
  letter-spacing: var(--tr-lead);
  line-height: var(--lh-ui);
  color: var(--ink);
}
/* 32 px circle, 44 px hit area. */
.connect-dialog__close {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -2px -4px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), transform 100ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.connect-dialog__close::before { content: ""; position: absolute; inset: -6px; }
.connect-dialog__close .sym { display: block; }
.connect-dialog__close .sfsym { width: 12px; height: auto; display: block; }
@media (hover: hover) { .connect-dialog__close:hover { color: var(--ink); } }
.connect-dialog__close:active { transform: scale(0.94); }
.dialog-steps > :first-child { margin-top: var(--sp-20); }
.connect-dialog .steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: var(--sp-16);
  margin: var(--sp-20) 0 0;
  padding: 0;
}
.connect-dialog .steps li {
  position: relative;
  counter-increment: step;
  padding-left: 36px;
  font-size: var(--fs-callout);
  letter-spacing: var(--tr-callout);
  line-height: var(--lh-body);
  color: var(--ink);
}
.connect-dialog .steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.connect-dialog .card-note {
  margin: var(--sp-16) 0 0;
  font-size: var(--fs-subhead);
  letter-spacing: var(--tr-subhead);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.connect-dialog .steps + .card-note {
  margin-top: var(--sp-20);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
}
/* Materialise: opacity and a 6 px rise in, the same path out. */
.connect-dialog[open] { animation: connector-enter var(--dur-fast) var(--ease-out) both; }
.connect-dialog[open]::backdrop { animation: connector-fade var(--dur-fast) var(--ease-out) both; }
.connect-dialog.is-closing { animation: connector-exit var(--dur-fast) var(--ease-out) both; }
.connect-dialog.is-closing::backdrop { animation: connector-fade-out var(--dur-fast) var(--ease-out) both; }
@keyframes connector-exit {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(6px); }
}
@keyframes connector-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@media (max-width: 480px) {
  .connect-dialog__body { padding: var(--sp-20); }
}

/* Reduced motion: the hero and the dialog cross-fade only. */
@media (prefers-reduced-motion: reduce) {
  .hero .is-entering { animation-name: connector-fade; }
  .hero-tab:active, .connect-dialog__close:active, .addr-line:active .addr-line__glyph { transform: none; }
  /* v2.css cuts every animation to 0.01ms here; these are fades, so they
     keep their length and cross-fade instead of snapping. */
  .hero .is-entering,
  .connect-dialog[open],
  .connect-dialog.is-closing,
  .connect-dialog[open]::backdrop,
  .connect-dialog.is-closing::backdrop { animation-duration: var(--dur-fast) !important; }
  .connect-dialog[open], .connect-dialog[open]::backdrop { animation-name: connector-fade; }
  .connect-dialog.is-closing, .connect-dialog.is-closing::backdrop { animation-name: connector-fade-out; }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-tabs { background: #171A20; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .connect-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}


/* ══════════════════════════════════════════════════════════════════
   Assistants page below the hero (spec addendum 2): What {assistant}
   sees, Your connections, the footer row. One centre line with the hero;
   card rows 960 px, text 640 px.
   ══════════════════════════════════════════════════════════════════ */

.subpage .wrap.page-sections { max-width: calc(960px + 2 * var(--pad-x)); }
.page-section { margin-top: clamp(64px, 10vh, 112px); }
.assist-head { max-width: 640px; margin: 0 auto clamp(32px, 5vh, 40px); text-align: center; }
.section-title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 650;
  letter-spacing: var(--tr-title);
  line-height: var(--lh-display);
  color: var(--ink);
  text-wrap: balance;
}
.section-sub {
  margin: var(--sp-12) 0 0;
  font-size: var(--fs-lead);
  letter-spacing: var(--tr-lead);
  line-height: var(--lh-lead);
  color: var(--ink-2);
  text-wrap: balance;
}

/* ── Two cards: equal columns on desktop, stacked on phones. The row is
   capped at 720 px and centred: two short lists in 470 px cards read as
   empty (Enzo, 2026-09-27). ────── */
.sees-grid { display: grid; gap: var(--sp-16); max-width: 720px; margin-inline: auto; }
@media (min-width: 720px) { .sees-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sees-card { display: flex; flex-direction: column; align-items: flex-start; }
/* Icon and title on one row (Enzo, 2026-09-27). */
.sees-card__head { display: flex; align-items: center; gap: var(--sp-12); }
.card-tile { flex: none; width: 40px; height: 40px; display: block; }
.sees-card h3 {
  margin: 0;
  font-size: var(--fs-callout);
  font-weight: 600;
  letter-spacing: var(--tr-callout);
  line-height: var(--lh-ui);
  color: var(--ink);
}
.sees-list {
  list-style: none;
  display: grid;
  gap: var(--sp-8);
  width: 100%;
  margin: var(--sp-12) 0 0;
  padding: 0;
}
.sees-list li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--sp-10);
  margin: 0;
  font-size: var(--fs-subhead);
  letter-spacing: var(--tr-subhead);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
/* The glyph sits in a one-line-tall box, centred on the first line. */
.sees-list__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--fs-subhead) * 1.6);
  color: var(--ink-2);
}
.sees-list__glyph .sfsym { width: 12px; height: auto; display: block; }
/* Decorative only; the words carry the meaning (--ink-3 allowed here). */
.sees-list--never .sees-list__glyph { color: var(--ink-3); }
/* Keeps a hyphenated word whole (third-party). */
.nowrap { white-space: nowrap; }
.sees-share {
  max-width: 640px;
  margin: var(--sp-24) auto 0;
  text-align: center;
  font-size: var(--fs-footnote);
  letter-spacing: var(--tr-footnote);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: balance;
}

/* ── Your connections: the manage card on the 640 px column ──────── */
.connections-body { max-width: 640px; margin: 0 auto; }
.connections-body .manage-card { margin-top: 0; }
/* The card frames only the signed-in states (loading, rows, empty, status):
   while both are hidden, signed out or paused, there is no card. */
.manage-card:not(:has(> :not([hidden]))) { display: none; }

/* The heading shows only with the signed-in states (loading, rows); signed
   out and paused, the section is just the button or the quiet line. The
   module's own hidden switches drive it; no new logic. */
#unlink:not(:has(#manage-signedin:not([hidden]), #manage-loading:not([hidden]))) .assist-head { display: none; }

/* Signed out: Apple's white Sign in with Apple button (Human Interface
   Guidelines: white fill, black logo and label, system font), pill corners
   to match the site. Opaque, so contrast and transparency settings leave it
   as it is. Same element and click as before (manage-apple). */
/* Signed out: one card built like the two cards below it (same tile, same
   title rank, same left edge): tile and title on one row, one line under
   them, the full-width Sign in with Apple button, then the Apple ID note.
   Fixed steps, no flex gap: 12 under the head, 20 above the button, 12
   under it (Enzo, 2026-09-27). */
.signin-card { display: block; }
.signin-card__head { display: flex; align-items: center; gap: var(--sp-12); }
.signin-card .icon-tile { --tile: 40; }
.signin-card h3 { margin: 0; font-size: var(--fs-callout); font-weight: 600; letter-spacing: var(--tr-callout); line-height: var(--lh-ui); color: var(--ink); }
.prose .signin-card__lead { margin: var(--sp-12) 0 0; color: var(--ink-2); font-size: var(--fs-subhead); letter-spacing: var(--tr-subhead); line-height: var(--lh-body); }
.apple-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  min-height: 44px;
  min-width: 140px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  background: #FFFFFF;
  color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--tr-body);
  line-height: 1;
  cursor: pointer;
  transition: transform 100ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.apple-btn .apple-glyph { height: 17px; width: auto; display: block; flex: none; margin-top: -2px; }
.apple-btn:not([disabled]):active { transform: scale(0.97); }
.apple-btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.apple-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-pill); }
/* In the signed-out card the button spans the card, like the hero buttons above it. */
.signin-card .apple-btn { width: 100%; min-height: 52px; margin-top: var(--sp-20); }

/* Before any state lands: one centred skeleton bar the size of the button,
   so the slot never pops in (static under reduced motion, from .skeleton__bar). */
/* It reserves the signed-out block's height (the button, 12 px, two
   footnote lines) so the common landing moves nothing below it. */
.manage-pending { display: block; }
/* One card-shaped bar the size of the signed-out card (tile row, one line,
   the 52 px button), so the common landing moves nothing. */
.manage-pending__bar { display: block; width: 100%; height: 184px; border-radius: var(--r-card); }

/* Section rhythm (Enzo, 2026-09-27): hero, Your connections and What
   Claude sees are three stages with clear air, the same in every state and
   on phones (these beat the phone block's 56 px). The footer keeps its gap. */
.subpage .page-section#unlink { margin-top: clamp(56px, 8vh, 96px); }
.subpage #unlink + .page-section { margin-top: clamp(64px, 10vh, 112px); }

.prose .manage-quiet {
  max-width: 44ch;
  margin: var(--sp-12) auto 0;
  text-align: center;
  font-size: var(--fs-footnote);
  letter-spacing: var(--tr-footnote);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: balance;
}
/* Paused: the glyph above the line, both on the centre line. */
.manage-notice { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.prose .manage-notice .manage-quiet { margin: 0; }
.manage-notice__glyph { display: inline-flex; flex: none; color: var(--ink-2); }
.manage-notice__glyph .sfsym { width: 16px; height: auto; display: block; }



/* ── Phone pass (Enzo on his iPhone at 375 px, 2026-09-27) ──────────
   Tighter and smaller on phones only; desktop unchanged. Every control
   keeps a 44 px hit area. */
@media (max-width: 480px) {
  /* Phones pick the assistant from the headline (the chevron picker below),
     not from a segmented control above it (Enzo, 2026-09-27). */
  .hero-tabs { display: none; }
  .hero-title { --badge-n: 32; margin-top: 0; }
  .hero-note--phone { display: block; }
  .hero-panel { margin-top: 28px; }
  .hero-actions .cta-btn,
  .hero-actions .ghost-btn { min-height: 48px; }
  .hero-addr { margin-top: var(--sp-8); }
  .addr-line { gap: var(--sp-8); }
  .addr-line__text { font-size: var(--fs-footnote); }
  .addr-line__glyph, .addr-line__glyph .sfsym { width: 14px; }

  /* Sections */
  .page-section { margin-top: 56px; }
  .assist-head { margin-bottom: var(--sp-24); }
  .assist-page .sees-card.connector-card, .assist-page .signin-card.connector-card { padding: 18px; }
  .signin-card .apple-btn { min-height: 48px; }
  .signin-card .icon-tile { --tile: 36; }
  .cta-btn--desk { display: none; }
  .cta-btn--phone { display: inline-flex; }
  .manage-pending__bar { height: 170px; }
  .sees-card .icon-tile { --tile: 36; }
  .card-tile { width: 36px; height: 36px; }
  /* Phones: the list reads as one comma-separated line, no glyphs
     (Enzo, 2026-09-27); desktop keeps the list. */
  .sees-list { display: block; margin-top: var(--sp-12); font-size: 0; line-height: 1.5; color: var(--ink-2); }
  .sees-list li { display: inline; grid-template-columns: none; font-size: var(--fs-subhead); }
  .sees-list li + li::before { content: ", "; }
  .sees-list__glyph { display: none; }
  .sees-share { margin-top: var(--sp-20); }

  /* Footer: three stacked lines, centred, each a 44 px target; the targets
     touch (no gap) so the lines sit about 28 px apart, not 52. */
}
/* The narrowest phones (320 px): the Title rank keeps the headline on
   three lines (at Title-lg it breaks "Ask about your protocol"). */
@media (max-width: 350px) { .hero-title { font-size: var(--fs-title); letter-spacing: var(--tr-title); } }


/* ── Signed-in card: rows, then the bottom row ──────────────────────
   Each row: 40 px tile | name over "Linked {date}" | Unlink, inline at
   every width and centred on the row; a long name wraps instead. */
.grant-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--line);
}
.grant-row .grant-row__unlink { min-height: 44px; gap: var(--sp-8); padding-left: var(--sp-16); padding-right: var(--sp-16); }
.grant-row:first-child { padding-top: 0; }
/* Signed in as {email} left, Sign out right, under a hairline. */
/* Two lines under the hairline: "Signed in as {email}" in full (a long
   Apple ID wraps rather than truncates), then Sign out on its own line
   (Enzo, 2026-09-27: the inline pair cut the email short). */
.manage-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--sp-4);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
.prose .manage-foot .manage-identity {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Sign out on its own line, at the right (Enzo, 2026-09-27). */
.manage-foot .text-link { flex: none; align-self: flex-end; display: inline-flex; align-items: center; min-height: 44px; }
.connections-body #manage-status { margin: var(--sp-12) 0; }
/* Phone: the same 18 px card padding as the other cards and a slimmer
   Unlink, so "Anthropic's Claude" and "Linked 12 September 2026" each keep
   one line at 375 px. */
@media (max-width: 480px) {
  .assist-page .connections-body .manage-card.connector-card { padding: 18px; }
  .grant-row { gap: var(--sp-8); }
  .grant-row .grant-row__unlink { padding-left: var(--sp-10); padding-right: var(--sp-10); font-size: var(--fs-footnote); letter-spacing: var(--tr-footnote); }
}