/* Connections page — restrained, all tokens from the design system. */
.cn-page { max-width: 880px; margin: 0 auto; padding: 8px 0 48px; }
/* A tab of Settings since 9/30/26: it reads in Settings' column, like the
   tabs beside it, not centred on a page of its own. */
#settingsConnectionsPane.cn-page { max-width: 820px; margin: 6px 0 0; padding: 0 0 48px; }
.cn-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; padding: 18px 20px; margin: 0 0 16px; }
.cn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cn-row { display: grid; grid-template-columns: 160px 1fr; gap: 8px 14px; padding: 7px 0; border-top: 1px solid var(--hairline); font-size: 13.5px; align-items: baseline; }
.cn-row:first-of-type { border-top: 0; }
.cn-k { color: var(--text-muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.cn-v { color: var(--text-body); }
.cn-sub { color: var(--text-muted); font-size: 12.5px; }
.cn-p { margin: 6px 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-body); }
.cn-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.cn-pill { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--text-body); background: var(--surface-2); }
.cn-pill.cn-on { border-color: var(--gold-pill-border); background: var(--gold-faint); color: var(--text-head); }
.cn-pill.cn-warn { border-color: #b5651d; color: var(--text-head); }
.cn-notice .cn-list { margin: 8px 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--text-body); }
.cn-notice .cn-list li { margin: 4px 0; }
.cn-never { margin: 8px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-body); }
.cn-notice:not(.cn-acked) { border-color: var(--gold-pill-border); background: var(--gold-faint); }
.cn-ack-done { font-size: 12.5px; color: var(--text-muted); }
.cn-foot { margin-top: 18px; }
/* The outstanding-requirement banner. Same treatment as the un-acknowledged
   notice, because it is the same kind of thing: something the person has to
   do before the page is finished with them. */
.cn-required { border-color: var(--gold-pill-border); background: var(--gold-faint); }
.cn-required-met { border-color: var(--hairline); background: var(--surface); }
@media (max-width: 640px) { .cn-row { grid-template-columns: 1fr; gap: 2px; } }

/* ── The connect gate ───────────────────────────────────────────────────────
   Lives with the Connections page because it is the same feature: the gate
   asks for the two connections, the page explains and manages them. It sits
   inside .login-card, so every token here is the login shell's, not the
   portal shell's. */
#connectScreen .login-card { max-width: 560px; }
#connectScreen .login-sub { margin-bottom: 22px; }
.cg-loading { font-size: 13.5px; color: var(--lh-gray-500); padding: 14px 0; }
.cg-row {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  padding: 16px 0; border-top: 1px solid var(--lh-gray-200);
}
.cg-row:first-child { border-top: 0; }
.cg-row-main { flex: 1 1 auto; min-width: 0; }
.cg-row-head { display: flex; align-items: center; gap: 10px; }
.cg-name { font-size: 15px; font-weight: 700; color: var(--lh-navy-deep); }
.cg-state {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--lh-gold-dark); border: 1px solid var(--lh-gold-pill-border, rgba(197,165,90,.5));
  background: var(--lh-gold-faint); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.cg-state.cg-on { color: var(--lh-navy-deep); }
.cg-why { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: var(--lh-gray-600); }
.cg-row-act { flex: 0 0 auto; padding-top: 2px; }
.cg-btn {
  background: var(--lh-navy-deep); color: var(--lh-gold); border: 0;
  padding: 9px 16px; border-radius: 3px; font-family: var(--font-sans);
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em; cursor: pointer;
  white-space: nowrap; transition: background 0.12s ease;
}
.cg-btn:hover { background: var(--lh-navy); }
.cg-row-done .cg-name { color: var(--lh-gray-600); }
.cg-blocked { font-size: 12px; color: var(--lh-gray-500); display: inline-block; max-width: 150px; }
.cg-note {
  margin: 18px 0 20px; padding-top: 16px; border-top: 1px solid var(--lh-gray-200);
  font-size: 12.5px; line-height: 1.55; color: var(--lh-gray-500); text-align: left;
}
@media (max-width: 560px) {
  .cg-row { flex-direction: column; gap: 10px; }
  .cg-row-act { width: 100%; }
  .cg-btn { width: 100%; }
  .cg-blocked { max-width: none; }
}
/* ChatGPT (the MCP connector): the sign-in waiting for this person, and its connections. */
.cn-consent { border-color: var(--gold-pill-border); background: var(--gold-faint); }
.cn-scopes li.cn-no { color: var(--text-muted); }
.cn-blocked { color: var(--text-head); font-weight: 600; }
.cn-inline { margin-left: 8px; padding: 2px 10px; font-size: 12px; }
.cn-page code { font-size: 12px; word-break: break-all; }