/* patron-connect.css — p113 (2026-11-14): the connectors (patron-connect.js). Locked ones look like a product about to open:
   the card whole and crisp, only the Connect button muted with a lock, and a quiet "Opens soon" pill. The letter marks are
   ours (no brand artwork). The chat card sits on the card base of the other chat cards (.pd); Settings → Connections on the
   Settings cards (.ps-*). The light theme is in theme-light.css. */

/* ------------------------------------------------------------------ shared pieces */
.pk-tile{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(180deg,#2b2b2f 0,#1d1d20 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.45)}
.pk-mark{font-size:14px;line-height:1;font-weight:720;letter-spacing:-.03em;color:#ededea}
.pk-tile.pk-sm{width:24px;height:24px;border-radius:7px}
.pk-tile.pk-sm .pk-mark{font-size:10px}
.pk-tile.pk-lg{width:52px;height:52px;border-radius:15px}
.pk-tile.pk-lg .pk-mark{font-size:19px}
.pk-ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pk-ttl b,.pk-name{min-width:0;font-size:15px;line-height:20px;font-weight:650;color:#f4f4f1;letter-spacing:-.01em}
.pk-ttl>span{min-width:0;font-size:12.5px;line-height:17px;color:#8e8e8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-pill{flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:620;letter-spacing:.01em;white-space:nowrap}
.pk-pill.locked{background:rgba(255,255,255,.055);color:#b9b9b5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pk-pill.locked svg{color:#8e8e8a}
.pk-pill.live{background:rgba(34,195,111,.13);color:#5fd39a}
.pk-pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pk-pill.open{background:rgba(108,156,255,.14);color:#a6c2ff}
/* the Connect button as it will be; locked: muted, a lock, not-allowed (it still opens the details) */
.pk-connect{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 15px;border:0;border-radius:999px;background:#f4f4f1;color:#0b0b0b;
  font:inherit;font-size:13px;font-weight:650;white-space:nowrap;cursor:pointer}
.pk-connect:hover{background:#fff}
.pk-connect[aria-disabled="true"]{background:#1b1b1e;color:#7f7f7b;box-shadow:inset 0 0 0 1px #2b2b2e;cursor:not-allowed}
.pk-connect[aria-disabled="true"]:hover{background:#1f1f22;color:#94948f}
.pk-connect.pk-nudge{animation:pk-nudge .34s ease}
@keyframes pk-nudge{20%{transform:translateX(-3px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}100%{transform:none}}
.pk-more,.pk-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 2px;color:#b4b4b0;font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.pk-more:hover,.pk-link:hover{color:#f4f4f1}
.pk-bots{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.pk-bot{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:999px;background:#1d1d20;color:#cfcfcc;font-size:12px;font-weight:600;white-space:nowrap}
.pk-dot{width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.pk-built{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:18px;color:#a3a39f}
.pk-built svg{flex:none;margin-top:2px;color:#5fd39a}
.pk-fine{margin:0;font-size:12.5px;line-height:18px;color:#8e8e8a}
.pk-stripe{font-size:12.5px;color:#8e8e8a;white-space:nowrap}
.pk-stripe.ok{color:#5fd39a}
.pk-stripe.warn{color:#e8c46a}
:is(.pk-connect,.pk-more,.pk-link,.pk-name,.pk-pcgo):focus-visible{outline:2px solid #6c9cff;outline-offset:2px}

/* ------------------------------------------------------------------ in the chat: <connect service="…" why="…"/> */
.pk-chat .pk-top{display:flex;align-items:center;gap:12px;padding:14px 14px 0}
.pk-why{margin:11px 14px 0;font-size:14px;line-height:21px;color:#dcdcd8}
.pk-acts{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:12px 14px 14px}
.pk-now{padding:11px 14px 13px;border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.022)}
.pk-nowh{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:#8e8e8a}
.pk-nowp{margin:5px 0 0;font-size:13.5px;line-height:20px;color:#cfcfcc}
.pk-nowp[hidden],.pk-pcgo[hidden]{display:none}
.pk-pcgo{display:inline-flex;align-items:center;gap:7px;height:30px;margin-top:10px;padding:0 13px;border:0;border-radius:999px;background:#232326;color:#e6e6e3;
  font:inherit;font-size:12.5px;font-weight:620;cursor:pointer}
.pk-pcgo:hover:not(:disabled){background:#2c2c30;color:#fff}
.pk-pcgo:disabled{opacity:.55;cursor:default}
/* the same service again later: one quiet line */
.pk-again{display:flex;align-items:center;gap:9px;margin:6px 0;padding:6px 8px 6px 7px;border-radius:13px;background:#0e0f12;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#dcdcd8;text-shadow:none;font-size:13.5px;font-weight:500;line-height:18px}
.pk-againt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-againt b{font-weight:650;color:#f4f4f1}
.pk-againt span{color:#8e8e8a}
.pk-again .pk-more{padding:2px 4px}
.pk-gap{display:none}

/* ------------------------------------------------------------------ Settings → Connections */
.pk-page{display:flex;flex-direction:column;gap:10px}
.pk-intro{padding:15px 16px;border-radius:16px;background:#161618;box-shadow:inset 0 0 0 1px #232326}
.pk-introp{margin:0;font-size:14px;line-height:21px;color:#cfcfcc}
.pk-counts{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.pk-gh{margin-top:12px}
.pk-list{display:flex;flex-direction:column;gap:8px}
.pk-card{padding:14px 16px 14px 14px;border-radius:16px;background:#161618;box-shadow:inset 0 0 0 1px #232326;cursor:pointer;transition:background .15s,box-shadow .15s}
.pk-card:hover{background:#19191c;box-shadow:inset 0 0 0 1px #2c2c30}
.pk-card .pk-top{display:flex;align-items:center;gap:12px}
.pk-name{border:0;background:none;padding:0;font-family:inherit;text-align:left;cursor:pointer}
.pk-card:hover .pk-name{text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.pk-does{margin:9px 0 0 50px;padding:0;list-style:none}
.pk-does li{position:relative;padding-left:12px;font-size:13.5px;line-height:20px;color:#bdbdb9}
.pk-does li+li{margin-top:2px}
.pk-does li::before{content:"";position:absolute;left:1px;top:8.5px;width:4px;height:4px;border-radius:50%;background:#5c5c59}
.pk-card .pk-built{margin:8px 0 0 50px}
.pk-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;margin:12px 0 0 50px}
.pk-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.pk-foot>.pk-connect{margin-left:auto}
.pk-pagefoot{margin-top:6px;padding:0 2px}

/* ------------------------------------------------------------------ the detail sheet */
.sheet.pk-sheet{max-height:min(760px,92vh)}
.sheet-pane.pk-detail{gap:18px}
.pk-dhead{display:flex;align-items:center;gap:14px}
.pk-dhead .pk-ttl b{font-size:18px;line-height:23px}
.pk-sec{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.pk-ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.pk-ul li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:21px;color:#dcdcd8}
.pk-ul:not(.pk-ok) li{position:relative;padding-left:13px}
.pk-ul:not(.pk-ok) li::before{content:"";position:absolute;left:1px;top:9px;width:4px;height:4px;border-radius:50%;background:#6a6a66}
.pk-ul.pk-ok svg{flex:none;margin-top:3px;color:#a3a39f}
.pk-nowd{border:0;border-radius:12px;padding:10px 13px 12px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pk-nowd .pk-nowp:first-child{margin-top:0}
.pk-dfoot{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding-top:2px}
.pk-soon{font-size:12.5px;color:#8e8e8a}
.pk-link{align-self:flex-start;padding-left:0}
.pk-flow .pd{margin:0;background:transparent;box-shadow:none}
.ps-card.pk-flash{animation:pk-flash 1.8s ease}
@keyframes pk-flash{0%,35%{box-shadow:inset 0 0 0 1px #232326,0 0 0 3px rgba(244,244,241,.32)}100%{box-shadow:inset 0 0 0 1px #232326,0 0 0 3px rgba(244,244,241,0)}}
/* the light theme's flash (theme-light.css uses it; a keyframes block can't sit under html[data-theme="light"]) */
@keyframes pk-flash-lt{0%,35%{box-shadow:inset 0 0 0 1px var(--lt-line),0 0 0 3px rgba(22,22,22,.18)}100%{box-shadow:inset 0 0 0 1px var(--lt-line),0 0 0 3px rgba(22,22,22,0)}}
@media (prefers-reduced-motion:reduce){.pk-connect.pk-nudge,.ps-card.pk-flash{animation:none}.pk-card{transition:none}}

@media (max-width:600px){
  .pk-chat .pk-top{padding:12px 12px 0;gap:10px}
  .pk-why{margin:10px 12px 0}
  .pk-acts{padding:11px 12px 12px}
  .pk-now{padding:10px 12px 12px}
  .pk-card{padding:13px 13px 13px 12px}
  .pk-does,.pk-card .pk-built{margin-left:0;margin-top:10px}
  .pk-foot{margin-left:0}
  .pk-dhead{gap:12px}
  .pk-ttl>span{white-space:normal}
  .pk-againt span{display:none}
}

/* p113b: the panel with each service's own logo (white app tiles), a logo row on top, the cards in a grid */
.pk-tile.pk-logo{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 3px 10px rgba(0,0,0,.35)}
.pk-tile.pk-logo svg,.pk-tile .pk-mask{display:block;width:60%;height:60%}
.pk-tile .pk-mask{-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.pk-card .pk-tile{width:44px;height:44px;border-radius:12px}
.pk-intro{padding:18px 18px 16px}
.pk-cloud{display:flex;margin:0 0 14px}
.pk-cloud .pk-tile{width:34px;height:34px;border-radius:10px;margin-right:-7px;box-shadow:0 0 0 2px #161618,0 3px 10px rgba(0,0,0,.4)}
.pk-introh{font-size:17px;line-height:23px;font-weight:700;letter-spacing:-.015em;color:#f4f4f1;margin-bottom:4px}
.pk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.pk-card{display:flex;flex-direction:column;padding:14px}
.pk-card .pk-top{align-items:flex-start}
.pk-card .pk-pill{margin-top:2px}
.pk-line{margin:10px 0 0;font-size:13.5px;line-height:20px;color:#bdbdb9;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-card .pk-built{margin:8px 0 0}
.pk-card .pk-foot{margin:auto 0 0;padding-top:12px}
@media (max-width:640px){.pk-list{grid-template-columns:1fr}.pk-line{min-height:0}}