/* 📡 Connectors (js/pages/connectors.js, connector-row.js): a list of rows, each with its logo, its name and one status
   line; a tap opens the row (grid rows 0fr → 1fr: the height follows the content, none with reduced motion). Tokens only. */
.conn-list { background: var(--surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); overflow: clip; }
.conn + .conn { border-top: var(--border-width) solid var(--border); }
.conn { scroll-margin-top: calc(var(--topbar-height) + var(--space-2)); }

.conn__head { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: calc(var(--tap) + var(--space-4));
  padding: var(--space-3) var(--space-4); background: none; border: 0; color: var(--text); font: inherit; text-align: left;
  cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.conn__head:hover { background: var(--surface-hover); }
.conn__head:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.conn.is-open > .conn__head { background: var(--surface-hover); }

.conn__logo { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--text); }
.conn__logo svg { width: 22px; height: 22px; }
.conn__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.conn__name { font: var(--type-title); color: var(--text); overflow-wrap: anywhere; }
.conn__status { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-meta); color: var(--text-muted); }
.conn__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); }
.conn__status--success .conn__dot { background: var(--success); }
.conn__status--warning { color: var(--warning); }
.conn__status--warning .conn__dot { background: var(--warning); }
.conn__pays { flex: none; display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-subtle); }
.conn__pays svg { width: 20px; height: 20px; }
.conn__chev { flex: none; display: inline-flex; color: var(--text-subtle); transition: transform var(--dur) var(--ease); }
.conn__chev svg { width: 18px; height: 18px; }
.conn.is-open .conn__chev { transform: rotate(180deg); }

.conn__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.conn.is-open > .conn__panel { grid-template-rows: 1fr; }
.conn__inner { min-height: 0; overflow: hidden; }
.conn__form { padding: var(--space-2) var(--space-4) var(--space-4) calc(var(--space-4) + 40px + var(--space-3)); }

/* what it does and how to set it up: behind a quiet info control */
.conn__about > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); cursor: pointer;
  list-style: none; color: var(--text-muted); font: var(--type-meta); }
.conn__about > summary::-webkit-details-marker { display: none; }
.conn__about > summary:hover { color: var(--text); }
.conn__about > summary svg { width: 16px; height: 16px; }
.conn__about[open] > summary { margin-bottom: var(--space-2); }
.conn__about > p, .conn__about > ol { color: var(--text-muted); font-size: var(--text-sm); }

.conn.is-focus > .conn__head { box-shadow: inset 3px 0 0 var(--accent); }

/* 🔐 Key provider (js/pages/key-provider-row.js): the hosting variables its credentials live in, set or not */
.kp__vars { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.kp__vars li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.kp__vars code { overflow-wrap: anywhere; }
.kp__note { color: var(--text-muted); font: var(--type-meta); }
.kp code { font-size: var(--text-xs); }

/* 🚚 Platform → Hosting (js/pages/hosting-card.js): the host new shops go to, then one row per host */
.hosting__pick .segmented { flex-wrap: wrap; justify-self: start; max-width: 100%; }
.hosting__pick .segmented__btn { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap);
  padding: 0 var(--space-3); }
.hosting__pick .segmented__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hosting__pick .conn__logo { width: 24px; height: 24px; background: none; }
.hosting__pick .conn__logo svg { width: 18px; height: 18px; }
.hosting .conn-list textarea { min-height: calc(var(--tap) * 2); font-size: var(--text-xs); }

@media (max-width: 600px) {
  .conn__form { padding-left: var(--space-4); }
  .conn__pays { display: none; }   /* the phone row keeps the name and its status; the wallets show inside */
}
@media (prefers-reduced-motion: reduce) { .conn__panel, .conn__chev, .conn__head { transition: none; } }

/* 🤖 The shop bot's mode (js/pages/bot-mode.js): two choices side by side, the picked one on the raised step with a flame
   edge (its meaning also in the checked radio, never colour alone). Also in the setup guide's Telegram step. */
.mode-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.mode-pick__opt { display: flex; align-items: flex-start; gap: var(--space-3); min-height: var(--tap); padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); background: var(--surface-sunken); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.mode-pick__opt:hover { background: var(--surface-hover); }
.mode-pick__opt:has(input:checked) { background: var(--surface-raised); border-color: var(--accent); box-shadow: var(--inner-light); }
.mode-pick__opt:has(input:checked) .field__help { color: var(--text); }   /* muted on the raised step falls under 4.5:1 */
.mode-pick__opt input { margin-top: 3px; accent-color: var(--accent); flex: 0 0 auto; }
.mode-pick__text { display: grid; gap: 2px; }
@media (prefers-reduced-motion: reduce) { .mode-pick__opt { transition: none; } }

/* 🤖 Your bots (js/pages/telegram-bots.js): one row per bot, the picked one sends; on a phone the actions wrap under it */
.bots { display: grid; border: var(--border-width) solid var(--border); border-radius: var(--radius); overflow: clip; }
.bots__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3); min-height: var(--tap); }
.bots__row + .bots__row { border-top: var(--border-width) solid var(--border); }
.bots__pick { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 14rem; min-width: 0; min-height: var(--tap);
  cursor: pointer; }
.bots__pick input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.bots__pick input:disabled + .bots__text { color: var(--text-muted); }
.bots__text { display: grid; gap: 2px; min-width: 0; }
.bots__name { font: var(--type-title); color: var(--text); overflow-wrap: anywhere; }
.bots__user { font: var(--type-meta); color: var(--text-muted); overflow-wrap: anywhere; }
.bots__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.bots__empty { padding: var(--space-3); margin: 0; }