/* The Google Ads connection screen. It rides on the panel's own modal shell (.cmask /
   .cmbox), so only the inside is styled here. */

.gcask .gcbox{max-width:620px;width:calc(100vw - 40px);max-height:88vh;display:flex;
  flex-direction:column}
.gch{font-size:16px}
.gcintro{color:var(--mut);font-size:12.5px;line-height:1.55;padding:0 0 4px}
.gcb{overflow:auto;padding-right:4px;margin:10px 0 0}

.gcf{display:block;margin-bottom:13px}
.gcf>span{display:block;font-size:12px;font-weight:600;margin-bottom:5px}
.gcf input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:9px;color:var(--tx);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;
  padding:9px 11px}
.gcf input:focus{outline:0;border-color:var(--vio);background:rgba(139,125,255,.07)}
.gcf input::placeholder{font-family:'Capsule Sans Text',system-ui,sans-serif;color:var(--dim)}
.gcf em{display:block;font-style:normal;color:var(--dim);font-size:11.5px;line-height:1.5;margin-top:5px}

.gcres{border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-top:4px;
  background:rgba(255,255,255,.03)}
.gcres.good{border-color:rgba(52,211,153,.3);background:rgba(52,211,153,.06)}
.gcres.bad{border-color:rgba(248,113,113,.28);background:rgba(248,113,113,.06)}
.gcstep{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;padding:3px 0;line-height:1.45}
.gcstep b{flex:none;width:14px;text-align:center;color:var(--mut)}
.gcstep.y b{color:var(--good)}
.gcstep.n b{color:var(--bad)}
.gcstep em{display:block;font-style:normal;color:var(--mut);font-size:11.5px;margin-top:2px;
  word-break:break-word}

.gcf-bar{display:flex;align-items:center;gap:8px}
.gcspace{flex:1}

/* The row in Traffic sources, and the card in Settings, both need the same little state
   line: what is connected, or what is missing. */
.gcstate{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--mut)}
.gcstate i{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none}
.gcstate.on i{background:var(--good)}
.gcstate.off i{background:var(--warn)}

@media (max-width:620px){
  .gcask .gcbox{max-height:94vh}
  .gcf-bar{flex-wrap:wrap}
  .gcf-bar .pill{flex:1}
  .gcspace{display:none}
}

/* The three one-time steps, and the account tree that comes back. */
.gcsteps{margin:0 0 4px;padding:0 0 0 20px;counter-reset:gc}
.gcsteps li{list-style:none;position:relative;padding:0 0 15px 6px}
.gcsteps li:before{counter-increment:gc;content:counter(gc);position:absolute;left:-20px;top:1px;
  width:19px;height:19px;border-radius:50%;background:rgba(139,125,255,.18);color:var(--vio);
  font-size:11px;font-weight:700;display:grid;place-items:center}
.gcsteps b{display:block;font-size:13px;margin-bottom:3px}
.gcsteps span{display:block;color:var(--mut);font-size:12px;line-height:1.5}
.gcsteps code{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--tx);
  background:rgba(255,255,255,.06);border-radius:5px;padding:2px 6px;word-break:break-all}
.gcsteps input{width:100%;margin-top:7px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:9px;color:var(--tx);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;padding:9px 11px}
.gcsteps input:focus{outline:0;border-color:var(--vio);background:rgba(139,125,255,.07)}
.gccopy{display:flex!important;align-items:center;gap:8px;margin-top:6px}
.gccopyb{border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--tx);
  font-family:inherit;font-size:11px;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer;flex:none}
.gccopyb:hover{background:rgba(255,255,255,.09)}

.gcpick{border-top:1px solid var(--line);margin-top:12px;padding-top:14px}
.gcpick select{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:9px;color:var(--tx);font-family:inherit;font-size:13px;padding:9px 11px;color-scheme:dark}
.gcpick select option{background:#141220;color:var(--tx)}
.gclist{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gcrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 12px;font-size:12.5px}
.gcrow+.gcrow{border-top:1px solid rgba(255,255,255,.05)}
.gcrow span{color:var(--mut);font-size:11.5px}
.gcrow.map{align-items:center}
.gcrow.map b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.gcrow.map select{width:auto;max-width:56%;flex:none;font-size:12px;padding:6px 9px}
.gcwarn{color:var(--warn)!important}

.gcmanual{border-top:1px solid var(--line);margin-top:14px;padding-top:12px}
.gcmanual summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--mut);list-style:none}
.gcmanual summary::-webkit-details-marker{display:none}
.gcmanual summary:before{content:'▸';margin-right:7px;color:var(--dim)}
.gcmanual[open] summary:before{content:'▾'}
.gcmanual p{color:var(--dim);font-size:11.5px;line-height:1.5;margin:9px 0 12px}