/* ===================================================================
   connections.css — cn- namespace

   The action side of each row holds a button main.js owns, so the row
   is ours and the control inside it is reskinned rather than rebuilt.
   =================================================================== */

:root, [data-theme="light"] {
  --cn-bg:#F8F8F6; --cn-surface:#FFFFFF; --cn-surface2:#F0EDE5;
  --cn-ink:#1A1815; --cn-ink2:rgba(26,24,21,.74); --cn-ink3:rgba(26,24,21,.54);
  --cn-line:rgba(26,24,21,.12); --cn-line2:rgba(26,24,21,.22);
  --cn-accent:#8B6A2E;
  --cn-bad:#8B2D2D; --cn-badbg:rgba(139,45,45,.09);
  --cn-btn:#1A1815; --cn-btntx:#F8F8F6;
}
[data-theme="dark"] {
  --cn-bg:#1C1A17; --cn-surface:#252320; --cn-surface2:#2E2B27;
  --cn-ink:#F4F1E8; --cn-ink2:rgba(244,241,232,.78); --cn-ink3:rgba(244,241,232,.56);
  --cn-line:rgba(244,241,232,.12); --cn-line2:rgba(244,241,232,.22);
  --cn-accent:#C99B4D;
  --cn-bad:#D08383; --cn-badbg:rgba(199,115,115,.13);
  --cn-btn:#F4F1E8; --cn-btntx:#1C1A17;
}

#connections {
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--cn-ink); font-size:15px; line-height:1.55;
}
#connections * { box-sizing:border-box; }
.cn-wrap { max-width:720px; margin:0 auto; }

.cn-head { margin-bottom:26px; }
.cn-title {
  font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:25px;
  letter-spacing:-.015em; margin:0;
}
.cn-sub { font-size:14.5px; color:var(--cn-ink3); margin:5px 0 0; max-width:520px; }

.cn-error {
  padding:12px 16px; border-radius:8px; margin-bottom:16px;
  background:var(--cn-badbg); color:var(--cn-bad); font-size:14px;
}

/* ---------- groups ---------- */
.cn-group { margin-bottom:28px; }
.cn-grouphead { margin-bottom:12px; }
.cn-h2 {
  font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:18px;
  letter-spacing:-.01em; margin:0;
}
.cn-note { font-size:13.5px; color:var(--cn-ink3); margin:3px 0 0; }

.cn-rows {
  background:var(--cn-surface); border:1px solid var(--cn-line);
  border-radius:11px; overflow:hidden;
}

/* ---------- rows ---------- */
.cn-row {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:16px 20px; border-top:1px solid var(--cn-line);
  border-left:3px solid transparent;
}
.cn-row:first-child { border-top:none; }
.cn-row.on { border-left-color:var(--cn-accent); background:var(--cn-surface2); }

.cn-rowmain { min-width:0; }
.cn-name { font-size:15px; font-weight:600; }
.cn-rownote { font-size:13px; color:var(--cn-ink3); margin-top:2px; }
.cn-rowaction { flex-shrink:0; }

/* a platform main.js has no button for — shouldn't happen, but says so
   rather than showing an empty space */
.cn-missing .cn-rowaction::after {
  content:'unavailable';
  font-size:12.5px; color:var(--cn-ink3);
}

/* ---------- main.js's button, reskinned ---------- */
.cn-rowaction .platform-button {
  display:inline-flex; align-items:center; gap:8px;
  min-height:0; padding:9px 16px; border-radius:8px; cursor:pointer;
  background:transparent !important;
  border:1px solid var(--cn-line2) !important;
  color:var(--cn-ink2) !important;
  font-family:'Inter', system-ui, sans-serif !important;
  font-size:13.5px !important; font-weight:500 !important;
  letter-spacing:normal !important; text-transform:none !important;
  box-shadow:none !important; text-shadow:none !important;
  filter:none !important; opacity:1 !important;
  -webkit-text-fill-color:var(--cn-ink2) !important;
  white-space:nowrap;
}
.cn-rowaction .platform-button:hover {
  background:var(--cn-surface2) !important;
  border-color:var(--cn-ink) !important;
  color:var(--cn-ink) !important;
  -webkit-text-fill-color:var(--cn-ink) !important;
}
.cn-rowaction .platform-button i,
.cn-rowaction .platform-button svg {
  width:16px; height:16px; flex-shrink:0;
  color:var(--cn-ink3) !important; stroke:currentColor; filter:none !important;
}

/* connected: quieter, since the action becomes "disconnect" */
.cn-rowaction .platform-button.active {
  border-color:transparent !important;
  background:transparent !important;
  color:var(--cn-ink3) !important;
  -webkit-text-fill-color:var(--cn-ink3) !important;
}
.cn-rowaction .platform-button.active:hover {
  border-color:var(--cn-bad) !important;
  color:var(--cn-bad) !important;
  -webkit-text-fill-color:var(--cn-bad) !important;
  background:transparent !important;
}
.cn-rowaction .platform-button.active i,
.cn-rowaction .platform-button.active svg {
  color:var(--cn-accent) !important;
}

@media (max-width:640px) {
  .cn-row { flex-direction:column; align-items:flex-start; gap:10px; }
  .cn-rowaction { width:100%; }
  .cn-rowaction .platform-button { width:100%; justify-content:center; }
}