/* screens/channels.css — Owner: the "channels" builder.
   ALL classes in this file are prefixed .ch- (collision law).
   Shared layer does the rest: .card .btn .pill .field .field__err .toggle
   .menu .modal .empty .hint .ava (brand tile + picker avatar) — nothing here
   redefines them, it only tints or positions them. */

/* ═══ phone hero card ═══════════════════════════════════════════════════════ */
.ch-phone{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-28);flex-wrap:wrap}
.ch-phone__main{display:flex;flex-direction:column;gap:var(--sp-10);min-width:0}
.ch-lab{font-size:var(--fs-micro);font-weight:700;color:var(--muted-2)}
/* The number is INK. She reads it out digit by digit into a forwarding code,
   and the aurora is 2.36:1–2.68:1 on white — it never gets to carry glyphs.
   The ONE aurora element on this screen is the rule underneath it. */
.ch-phone__num{
  font-size:clamp(27px,3.6vw,40px);font-weight:800;letter-spacing:-.01em;line-height:1.12;
  color:var(--ink);white-space:nowrap;
}
.ch-phone__num::after{
  content:"";display:block;width:clamp(84px,14vw,132px);height:4px;margin-top:var(--sp-10);
  border-radius:var(--r-pill);background:var(--grad);
}
.ch-phone__hint{max-width:52ch;font-size:var(--fs-sm);font-weight:500;color:var(--muted);line-height:var(--lh-body)}
.ch-phone__note{max-width:52ch}
.ch-phone__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-12);flex:none}
.ch-stat{font-size:var(--fs-fine);font-weight:600;color:var(--muted)}

/* ═══ channel + integration cards ═══════════════════════════════════════════ */
.ch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:var(--sp-14)}
.ch-card{padding:var(--sp-20);display:flex;flex-direction:column;gap:var(--sp-12);min-height:170px}
.ch-card__head{display:flex;align-items:center;gap:var(--sp-12)}
.ch-card__head .menu{margin-left:auto}
.ch-card__id{min-width:0}
.ch-card__name{font-weight:700;font-size:var(--fs-base);letter-spacing:-.01em}
.ch-card__sub{display:block;font-size:var(--fs-fine);font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-card__desc{font-size:var(--fs-sm);font-weight:500;color:var(--muted);line-height:var(--lh-body)}
.ch-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-10)}
.ch-card__foot .btn{flex:1}
.ch-span{grid-column:1/-1}
.ch-togrow{display:flex;align-items:center;gap:var(--sp-8)}
.ch-togrow--c{justify-content:center}
.ch-togrow span{font-size:var(--fs-fine);font-weight:600;color:var(--muted)}

/* ── brand tiles: the shared .ava--lg.ava--sq square, tinted per brand.
      A tinted ground carries the mark, so these drop the neutral hairline. */
.ch-tile--telegram{color:#26A5E4;background:rgba(38,165,228,.10);border-color:transparent}
.ch-tile--messenger{color:#0084FF;background:rgba(0,132,255,.09);border-color:transparent}
.ch-tile--instagram{color:#E4405F;background:rgba(228,64,95,.09);border-color:transparent}
.ch-tile--viber{color:#7360F2;background:rgba(115,96,242,.09);border-color:transparent}
.ch-tile--whatsapp{color:#25D366;background:rgba(37,211,102,.10);border-color:transparent}
.ch-tile--google{color:#4285F4;background:rgba(66,133,244,.09);border-color:transparent}
.ch-tile--bitrix24{color:#006DFF;background:rgba(0,109,255,.09);border-color:transparent}
.ch-tile--odoo{color:#714B67;background:rgba(113,75,103,.10);border-color:transparent}
.ch-tile--zoho{color:#E42527;background:rgba(228,37,39,.08);border-color:transparent}
.ch-tile--altegio{color:#16171B;background:rgba(22,23,27,.07);border-color:transparent}
.ch-tile--sheets{color:#34A853;background:rgba(52,168,83,.10);border-color:transparent}
.ch-tile--airtable{color:#18BFFF;background:rgba(24,191,255,.12);border-color:transparent}
.ch-tile--notion{color:var(--ink);background:var(--tint-2);border-color:transparent}
.ch-tile--monday{color:#FB275D;background:rgba(251,39,93,.09);border-color:transparent}
.ch-tile--trello{color:#0052CC;background:rgba(0,82,204,.09);border-color:transparent}
.ch-tile--make{color:#6D00CC;background:rgba(109,0,204,.09);border-color:transparent}
.ch-tile--n8n{color:#EA4B71;background:rgba(234,75,113,.10);border-color:transparent}
.ch-tile--slack{color:#4A154B;background:rgba(74,21,75,.08);border-color:transparent}
/* the Microsoft mark carries its own four official colours — a brand-tinted
   ground would fight them, so its tile stays neutral. */
.ch-tile--ms{background:var(--tint-2);border-color:transparent}
/* Zapier's official mark IS a rounded square (wordmark inside). Full-bleed it
   instead of shrinking it into a tinted tile — otherwise the lettering smudges. */
.ch-tile--zapier{color:#FF4F00;background:none;border-color:transparent;padding:0;overflow:hidden}
.ch-tile--zapier svg{width:100%;height:100%;border-radius:var(--r-lg)}
/* monday's official glyph is 1.65:1 — letterboxed by preserveAspectRatio,
   so give its box more room to match the square marks optically. */
.ch-tile--monday svg{width:25px;height:25px}

/* ═══ modals: steps · rows · qr ═════════════════════════════════════════════ */
.ch-steps{display:flex;flex-direction:column;gap:var(--sp-20);margin-top:var(--sp-20)}
.ch-step{display:flex;gap:var(--sp-14)}
.ch-step__n{
  width:26px;height:26px;border-radius:var(--r-circle);flex:none;margin-top:1px;
  border:1px solid var(--line-2);display:grid;place-items:center;
  font-size:var(--fs-fine);font-weight:700;color:var(--muted);
}
.ch-step__body{flex:1;min-width:0}
.ch-step__body > b{display:block;font-size:var(--fs-md);margin-bottom:var(--sp-4);letter-spacing:-.01em}
.ch-step__body > p{font-size:var(--fs-sm);font-weight:500;color:var(--muted);line-height:1.6}
.ch-step__body .field{margin-top:var(--sp-10)}
.ch-acts--c{justify-content:center}
.ch-sub--tight{margin-bottom:0}

/* success view */
.ch-ok{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-8);padding:var(--sp-14) 0 var(--sp-2)}
.ch-ok__ring{
  width:54px;height:54px;border-radius:var(--r-circle);display:grid;place-items:center;margin-bottom:var(--sp-6);
  background:var(--ok-soft);border:1px solid var(--ok-line);color:var(--ok);
}
.ch-ok__ring svg{width:24px;height:24px}
.ch-ok__t{font-size:var(--fs-lg);letter-spacing:-.01em}
.ch-ok__name{font-size:var(--fs-md);font-weight:600;color:var(--muted)}
.ch-ok__note{font-size:var(--fs-sm);font-weight:500;color:var(--muted-2);max-width:36ch}
.ch-ok .ch-togrow{margin-top:var(--sp-10)}

/* account / page picker rows */
.ch-rows{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-16)}
.ch-row{
  display:flex;align-items:center;gap:var(--sp-12);width:100%;text-align:left;
  padding:var(--sp-12) var(--sp-14);border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--card);transition:border-color var(--t),background var(--t);
}
.ch-row:hover{border-color:var(--ink)}
.ch-row--off{opacity:.5;pointer-events:none}
.ch-row__txt{flex:1;min-width:0}
.ch-row__txt b{display:block;font-size:var(--fs-md)}
.ch-row__txt span{display:block;font-size:var(--fs-fine);font-weight:500;color:var(--muted)}
.ch-row > .sh-ic{width:15px;height:15px;color:var(--muted-2);flex:none}
.ch-mk{display:grid;place-items:center;width:17px;height:17px}
.ch-mk svg{width:17px;height:17px}
.ch-mk--google{color:#4285F4}
/* a bare note under the picker rows */
.ch-mbody > .hint{margin-top:var(--sp-14)}

/* whatsapp qr */
.ch-qr{
  width:196px;height:196px;box-sizing:content-box;margin:var(--sp-16) auto 0;padding:var(--sp-14);
  color:var(--ink);background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-2xl);
}
.ch-qr svg{width:100%;height:100%}
.ch-wait{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);margin-top:var(--sp-16);
  font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.ch-wait i{width:8px;height:8px;border-radius:var(--r-circle);background:var(--muted-2);animation:ch-pulse 1.1s ease-in-out infinite}
@keyframes ch-pulse{50%{opacity:.2}}
.ch-walist{margin-top:var(--sp-16);text-align:center;font-size:var(--fs-sm);font-weight:500;color:var(--muted);line-height:1.7}

/* ═══ webhook / api card ════════════════════════════════════════════════════ */
.ch-api{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-20) var(--sp-24);margin-top:var(--sp-2)}
.ch-api .field input{font-size:var(--fs-sm)}
.ch-keyrow{display:flex;gap:var(--sp-8)}
.ch-keyrow input{flex:1;min-width:0}
.ch-keyrow .btn{flex:none}
.ch-key{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:var(--fs-sm);letter-spacing:.01em;color:var(--ink-2);background:var(--card-2)}
.ch-saverow{display:flex;justify-content:flex-end;margin-top:var(--sp-2)}

/* ═══ connector routing pane (modal) ════════════════════════════════════════ */
.ch-map{margin-top:var(--sp-24);padding-top:var(--sp-20);border-top:1px solid var(--line)}
.ch-map__lab{font-size:var(--fs-micro);font-weight:700;letter-spacing:.06em;color:var(--muted-2);margin-bottom:var(--sp-12)}
.ch-map__rows{display:flex;flex-direction:column;gap:var(--sp-10)}
.ch-map__row{display:flex;align-items:center;gap:var(--sp-12)}
.ch-map__oc{font-size:var(--fs-md);font-weight:500;flex:1;min-width:0}
.ch-map__sel{flex:none;width:196px}
.ch-map__tg{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);
  font-size:var(--fs-md);font-weight:500;margin-top:var(--sp-2)}
/* hairline between the outcome toggles and the extra toggles */
.ch-map__sep{height:1px;background:var(--line);margin:var(--sp-4) 0}

/* the authorised account, above the routing pane */
.ch-acct{display:flex;align-items:center;gap:var(--sp-12);margin:var(--sp-20) 0 var(--sp-4);
  padding:var(--sp-12) var(--sp-14);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card-2)}
.ch-acct__t{min-width:0}
.ch-acct__t b{display:block;font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-acct__t span{display:block;font-size:var(--fs-fine);font-weight:500;color:var(--muted)}

/* provider gotchas, stacked above the routing pane */
.ch-notes{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-16)}
.ch-steps > .ch-notes{margin-top:-4px}

/* ═══ filter bar: type buttons left, search right ═══════════════════════════ */
.ch-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);
  flex-wrap:wrap;margin:clamp(24px,3vw,34px) 0 var(--sp-4)}
.ch-tabs{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;min-width:0}
.ch-tab{font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  background:transparent;border:1px solid transparent;border-radius:var(--r-full);
  padding:var(--sp-8) var(--sp-12);cursor:pointer;white-space:nowrap;
  transition:background var(--t),color var(--t),border-color var(--t)}
.ch-tab:hover{background:var(--card-2);color:var(--ink)}
.ch-tab[aria-pressed="true"]{background:var(--card);border-color:var(--line);color:var(--ink)}
.ch-tab:focus-visible{outline:none;box-shadow:var(--focus)}
.ch-search{position:relative;flex:none;width:236px;max-width:100%}
.ch-search .sh-ic{position:absolute;left:var(--sp-12);top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted-2);pointer-events:none}
.ch-search input{height:var(--ctl-h-sm);padding-left:36px}
.ch-search input::-webkit-search-cancel-button{cursor:pointer}
.ch-meta{margin:var(--sp-20) 0 var(--sp-10)}
.ch-count{font-size:var(--fs-fine);font-weight:600;color:var(--muted-2)}
.ch-none{margin-top:var(--sp-28)}

@media (max-width:880px){
  .ch-phone{gap:var(--sp-20)}
  .ch-phone__side{flex:1 1 100%;min-width:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sp-10)}
  .ch-phone__side .btn{flex-basis:100%}
  .ch-phone__num{white-space:normal}
}
@media (max-width:640px){
  .ch-api{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .ch-wait i{animation:none}
}

/* not live: the number stops wearing the live gradient. Green is the panel's
   "answering right now" signal — a paused line must not borrow it. */
.ch-phone--off .ch-phone__num::after{background:var(--line-2)}